/* =============================================================================
   SM DISPLAY PACK — stylesheet
   Everything is namespaced `smd-` (classes) / `--smd-` (custom properties) /
   `smd…` (element ids) so it cannot collide with a host site's own `smd-` rules.
   No global/element selectors are declared here except :root tokens.
   Design tokens live in :root below — change them there.
   ============================================================================= */
:root{
  --smd-ink:#0d0d0d;
  --smd-paper:#f7f6f3;
  --smd-paper-2:#efeee9;
  --smd-white:#ffffff;
  --smd-gray:#6f6f6b;
  --smd-gray-light:#a6a49c;
  --smd-line:rgba(13,13,13,0.12);
  --smd-line-invert:rgba(255,255,255,0.16);

  --smd-f-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --smd-f-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --smd-f-mono:'JetBrains Mono', 'Space Mono', ui-monospace, monospace;

  --smd-container: 1360px;
  --smd-pad: clamp(20px, 4vw, 64px);
}

.smd-section{
  font-family:var(--smd-f-body);
  color:var(--smd-ink);
  background:var(--smd-paper);
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.smd-section *{box-sizing:border-box;}
.smd-section img{max-width:100%;display:block;}
.smd-section a{color:inherit;text-decoration:none;}
.smd-container{max-width:var(--smd-container);margin:0 auto;padding:0 var(--smd-pad);}
.smd-kicker{
  font-family:var(--smd-f-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--smd-gray);
}
.smd-kicker.smd-on-dark{color:var(--smd-gray-light);}
.smd-section h1,.smd-section h2,.smd-section h3{
  font-family:var(--smd-f-display);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:0.96;
  margin:0;
  text-transform:uppercase;
  color:var(--smd-ink) !important; /* the host theme styles bare h1/h2 with its own (often white) color; pin it explicitly */
}
.smd-section p{margin:0;}
.smd-placeholder.smd-dark h2,
.smd-contact h2{color:var(--smd-paper) !important;}

/* ---- buttons ---- */
.smd-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--smd-f-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:40px;
  border:1px solid var(--smd-ink);
  background:var(--smd-ink);
  color:var(--smd-paper);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.smd-btn:hover{transform:translateY(-2px); color:var(--smd-paper);}
.smd-btn.smd-ghost{background:transparent;color:var(--smd-ink);}
.smd-btn.smd-invert{background:var(--smd-paper);border-color:var(--smd-paper);color:var(--smd-ink);}

/* ---- hero (pinned scroll-scrub) ---- */
.smd-hero{
  position:relative;
  height:230vh;
  background:var(--smd-paper);
}
@media(max-width:749px){
  /* tall, narrow phones need far less scroll distance for the same effect —
     230vh of a short landscape viewport vs. 230vh of a tall portrait one
     are very different amounts of actual scrolling */
  .smd-hero{height:150vh;}
}
.smd-hero-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:var(--smd-paper);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-top:64px;
  padding-bottom:40px;
}
.smd-hero-dots{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.smd-hero-word{
  position:absolute;
  top:50%;left:50%;
  z-index:1;
  text-align:center;
  white-space:nowrap;
  font-size:clamp(34px, 17vw, 260px); /* low floor is deliberate: on narrow phones 17vw must be free to shrink below any fixed px floor, or this single unbreakable word forces horizontal overflow and throws off the whole page's mobile layout */
  max-width:100vw;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  will-change:transform,opacity;
  pointer-events:none;
}
.smd-hero-glasses{
  position:absolute;
  top:50%;left:50%;
  z-index:2;
  width:min(58vw, 640px) !important;
  height:auto !important; /* the host theme forces object-fit:fill + a fixed height on <img>, which stretches this one out of proportion — pin both explicitly */
  object-fit:contain !important;
  aspect-ratio:1924/1599;
  transform:translate(-50%,-50%) scale(0.5);
  opacity:0;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,0.18));
  will-change:transform,opacity;
  pointer-events:none;
}
.smd-hero-scroll{
  position:relative;
  z-index:3;
  text-align:center;
  font-family:var(--smd-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--smd-gray-light);
  margin-top:auto;
}

/* ---- stats ---- */
.smd-stats{
  background:var(--smd-paper-2);
  border-top:1px solid var(--smd-line);
  border-bottom:1px solid var(--smd-line);
}
.smd-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.smd-stat{padding:44px 28px;border-left:1px solid var(--smd-line);}
.smd-stat:first-child{border-left:0;}
.smd-stat .smd-val{
  font-family:var(--smd-f-display);
  font-weight:900;
  font-size:clamp(22px,2.6vw,38px);
  letter-spacing:-0.01em;
}
.smd-stat .smd-val .smd-unit{font-size:0.45em;font-family:var(--smd-f-mono);text-transform:none;margin-left:4px;color:var(--smd-gray);}
.smd-stat .smd-lbl{margin-top:8px;}
@media(max-width:760px){
  .smd-stats-grid{grid-template-columns:repeat(2,1fr);}
  .smd-stat{border-left:0;border-top:1px solid var(--smd-line);}
  .smd-stat:nth-child(odd){border-left:0;}
}

/* ---- section heads ---- */
.smd-sec-head{
  padding:100px 0 46px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}
.smd-sec-head h2{font-size:clamp(34px,5.2vw,64px);max-width:760px;}
.smd-sec-head .smd-desc{max-width:340px;color:var(--smd-gray);font-size:15px;line-height:1.55;}
.smd-sec-head.smd-on-dark .smd-desc{color:var(--smd-gray-light);}
.smd-sec-tag{
  display:inline-block;
  font-family:var(--smd-f-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--smd-gray);
  border:1px solid var(--smd-line);
  border-radius:20px;
  padding:5px 14px;
  margin-bottom:18px;
}
.smd-sec-tag.smd-on-dark{color:var(--smd-gray-light);border-color:var(--smd-line-invert);}

/* ---- SM Camera — video left, copy right (mirror of the SM App layout) ---- */
.smd-camera{
  max-width:1180px;margin:0 auto;padding:clamp(64px,9vw,120px) var(--smd-pad);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,5vw,72px);align-items:center;
}
@media(max-width:860px){
  .smd-camera{grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px;}
}
.smd-camera-video{flex:none;}
.smd-camera-video video{
  width:min(80vw, 360px);
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:22px;
  background:#111;
  display:block;
}
.smd-camera-body{max-width:560px;}
@media(max-width:860px){ .smd-camera-body{margin-inline:auto;} }
.smd-camera-body h2{font-size:clamp(30px,4.4vw,52px);margin:16px 0 12px;}
.smd-camera-body .smd-desc{color:var(--smd-gray);font-size:15px;line-height:1.6;max-width:440px;}
@media(max-width:860px){ .smd-camera-body .smd-desc{margin-inline:auto;} }
.smd-camera-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--smd-line);border:1px solid var(--smd-line);
  margin:26px 0;
}
.smd-cs{background:var(--smd-paper);padding:18px;display:flex;flex-direction:column;gap:5px;}
.smd-cs b{font-family:var(--smd-f-display);font-weight:800;font-size:15px;letter-spacing:-0.01em;}
.smd-cs span{color:var(--smd-gray);font-size:12.5px;line-height:1.4;}
@media(max-width:520px){.smd-camera-specs{grid-template-columns:1fr;}}

/* ---- contact ---- */
.smd-contact{background:var(--smd-ink);color:var(--smd-paper);padding:130px 0 110px;text-align:center;}
.smd-contact h2{font-size:clamp(34px,6vw,84px);max-width:900px;margin:0 auto;}
.smd-contact .smd-desc{color:var(--smd-gray-light);max-width:480px;margin:22px auto 40px;font-size:15.5px;}
.smd-wl-form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.smd-wl-form input,.smd-wl-form textarea{
  flex:1;min-width:220px;
  padding:15px 18px;
  border-radius:22px;
  border:1px solid var(--smd-line-invert);
  background:rgba(255,255,255,0.04);
  color:var(--smd-paper);
  font-family:var(--smd-f-body);
  font-size:14px;
  outline:none;
}
.smd-wl-form input::placeholder,.smd-wl-form textarea::placeholder{color:var(--smd-gray-light);}
.smd-wl-form input:focus,.smd-wl-form textarea:focus{border-color:var(--smd-paper);}
.smd-wl-note{margin-top:16px;font-family:var(--smd-f-mono);font-size:11.5px;color:var(--smd-gray);}
@media(max-width:520px){.smd-wl-form{flex-direction:column;}}

/* ---- reveal on scroll ---- */
.smd-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.smd-reveal.smd-in{opacity:1;transform:translateY(0);}

/* ---- exploded-view hero (SM Display anatomy, scroll-scrubbed frame sequence) ---- */
.smd-exploded{
  position:relative;
  height:520vh;
  background:#000;
}
@media(max-width:749px){
  /* fewer real px of scroll needed on short/narrow viewports for the same effect */
  .smd-exploded{height:360vh;}
}
.smd-exploded-stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:#000;
}
.smd-exploded-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
}
.smd-exploded-note{
  position:absolute;
  top:50%;
  right:6%;
  transform:translateY(-50%);
  width:min(360px, 34vw);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:2;
}
.smd-exploded-note.smd-in{opacity:1;}
.smd-exploded-note-part{
  font-family:var(--smd-f-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:clamp(22px,2.6vw,34px);
  color:var(--smd-paper);
  margin:0 0 10px;
}
.smd-exploded-note-body{
  font-family:var(--smd-f-body);
  font-size:15.5px;
  line-height:1.55;
  color:var(--smd-gray-light);
  margin:0;
}
@media(max-width:749px){
  .smd-exploded-note{right:auto;left:6%;top:auto;bottom:16%;width:min(78vw,420px);transform:none;}
}
.smd-exploded-overlay{
  position:absolute;
  left:6%;
  bottom:9%;
  z-index:2;
  max-width:480px;
  pointer-events:none;
}
.smd-exploded-overlay .smd-kicker{margin-bottom:10px;display:block;}
.smd-exploded-overlay h2{
  font-size:clamp(28px,4.4vw,54px) !important;
  color:var(--smd-paper) !important;
  margin:0 0 12px !important;
}
.smd-exploded-overlay .smd-desc{color:var(--smd-gray-light);font-size:15.5px;line-height:1.5;max-width:420px;}
@media(max-width:749px){
  .smd-exploded-overlay{display:none;}
  /* the HUD section keeps its caption on phones — anchored to the bottom on a
     dark scrim so it stays legible over whatever frame is showing */
  .smd-hud-scrub .smd-exploded-overlay{
    display:block;
    left:0;
    right:0;
    bottom:0;
    max-width:none;
    padding:96px 22px calc(26px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.82) 42%, rgba(0,0,0,0) 100%);
  }
  .smd-hud-scrub .smd-exploded-overlay .smd-kicker{margin-bottom:8px;}
  .smd-hud-scrub .smd-exploded-overlay h2{
    font-size:clamp(23px,6.4vw,32px) !important;
    margin:0 0 8px !important;
  }
  .smd-hud-scrub .smd-exploded-overlay .smd-desc{
    font-size:13.5px;
    line-height:1.45;
    max-width:34ch;
  }
  .smd-hud-scrub .smd-exploded-scroll{display:none;}
}
.smd-exploded-scroll{
  position:absolute;
  right:6%;
  bottom:9%;
  z-index:2;
  font-family:var(--smd-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--smd-gray-light);
}

/* ---- HUD interface: same scroll-scrub as the exploded hero, its own footage ---- */
.smd-hud-scrub{
  position:relative;
  height:300vh;
  background:#000;
}
@media(max-width:749px){
  .smd-hud-scrub{height:220vh;}
}
.smd-hud-scrub-stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:#000;
}
.smd-hud-scrub-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

/* ============================================================
   SM App — interactive phone mock (the real app, in the site's language)
   everything namespaced .smd-au- so it can't collide with Dawn
   ============================================================ */
.smd-au{
  --t1:#f2f2f5; --t2:#9a9aa1; --lab:#82828a;
  --purple:#8b5cf6; --green:#22c55e; --red:#ef4b52;
  --glass:rgba(255,255,255,.045); --hair:rgba(255,255,255,.08);
  --r-card:20px; --r-mid:16px; --r-sm:13px;
  max-width:1180px;margin:0 auto;padding:clamp(64px,9vw,120px) var(--smd-pad);
  display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center;
}
.smd-au *,.smd-au *::before,.smd-au *::after{box-sizing:border-box;}
@media(max-width:860px){
  .smd-au{grid-template-columns:1fr;justify-items:center;text-align:center;gap:36px;}
}
.smd-au-copy{max-width:420px;}
@media(max-width:860px){ .smd-au-copy{margin-inline:auto;} }
.smd-au-note{
  margin-top:22px;font-family:var(--smd-f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smd-gray);
}

.smd-au-phone{
  --w:326px;width:var(--w);flex:none;padding:11px;border-radius:52px;background:#0b0b0c;
  box-shadow:0 44px 80px -26px rgba(0,0,0,.42), 0 10px 24px -14px rgba(0,0,0,.3);
}
@media(max-width:400px){ .smd-au-phone{--w:290px;} }
.smd-au-screen{
  position:relative;height:684px;border-radius:42px;overflow:hidden;background:#000;
  display:flex;flex-direction:column;color:var(--t1);
  font-family:var(--smd-f-body);font-size:13px;letter-spacing:-.005em;
}
.smd-au-glass{
  background:var(--glass);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
}

.smd-au-status{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 7px;font-size:12px;flex:none;font-family:var(--smd-f-mono);}
.smd-au-status .smd-au-time{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.smd-au-status .smd-au-r{display:flex;gap:6px;align-items:center;}
.smd-au-status .smd-au-r svg{width:15px;height:15px;display:block;}

.smd-au-head{display:flex;justify-content:space-between;align-items:center;padding:8px 20px 14px;flex:none;}
.smd-au-title{font-family:var(--smd-f-display);font-size:21px;font-weight:800;margin:0;letter-spacing:-.01em;color:var(--t1);}
.smd-au-icbtn{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--glass);border:1px solid var(--hair);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
.smd-au-icbtn svg{width:16px;height:16px;color:var(--t2);}

.smd-au-scroll{flex:1;overflow:hidden;position:relative;}
.smd-au-views{display:flex;height:100%;transition:transform .46s cubic-bezier(.4,0,.2,1);}
.smd-au-view{min-width:100%;height:100%;overflow-y:auto;padding:2px 18px 22px;scrollbar-width:none;}
.smd-au-view::-webkit-scrollbar{display:none;}

.smd-au-pill{border-radius:var(--r-mid);display:flex;justify-content:space-around;align-items:center;padding:13px 8px;margin-bottom:12px;font-size:12px;color:var(--t2);}
.smd-au-pill .smd-au-seg{display:flex;align-items:center;gap:6px;}
.smd-au-pill .smd-au-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.smd-au-pill svg{width:13px;height:13px;}

.smd-au-bright{border-radius:var(--r-mid);display:flex;align-items:center;gap:13px;padding:15px 16px;margin-bottom:22px;}
.smd-au-bright>svg{width:16px;height:16px;color:var(--t2);flex:none;}
.smd-au-track{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;cursor:pointer;}
.smd-au-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--purple);width:70%;}
.smd-au-knob{position:absolute;top:50%;left:70%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.smd-au-pct{font-family:var(--smd-f-mono);font-size:11px;color:var(--t2);width:38px;text-align:right;flex:none;font-variant-numeric:tabular-nums;}

.smd-au-label{font-family:var(--smd-f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lab);margin:10px 2px 12px;}

.smd-au-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.smd-au-tile{border-radius:var(--r-card);padding:19px 10px 15px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:transform .16s cubic-bezier(.4,0,.2,1),background .16s;}
.smd-au-tile:active{transform:scale(.96);}
.smd-au-tile:hover{background:rgba(255,255,255,.07);}
.smd-au-tile .smd-au-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--hair);color:var(--t1);}
.smd-au-tile .smd-au-ic svg{width:20px;height:20px;}
.smd-au-tile b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--t1);}

.smd-au-tinput{border-radius:var(--r-mid);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 15px;}
.smd-au-tinput input{flex:1;background:none;border:0;outline:0;color:var(--t1);font-size:12.5px;font-family:inherit;min-width:0;}
.smd-au-tinput input::placeholder{color:var(--lab);}
.smd-au-send{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;flex:none;display:grid;place-items:center;background:#16a34a;}
.smd-au-send svg{width:15px;height:15px;color:#fff;}

.smd-au-back{display:flex;align-items:center;gap:5px;font-family:var(--smd-f-display);font-size:17px;font-weight:800;margin:2px 0 16px;cursor:pointer;background:none;border:0;color:var(--t1);padding:6px 8px 6px 0;letter-spacing:-.01em;}
.smd-au-back svg{width:18px;height:18px;color:var(--t2);}
.smd-au-panel{border-radius:var(--r-card);padding:16px;}
.smd-au-panel textarea{width:100%;height:116px;background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:var(--r-sm);color:var(--t1);padding:12px;font-family:inherit;font-size:12.5px;resize:none;outline:0;line-height:1.5;}
.smd-au-panel textarea::placeholder{color:var(--lab);}
.smd-au-btn{width:100%;border:0;border-radius:14px;padding:13px;font-weight:600;font-size:13px;font-family:var(--smd-f-body);cursor:pointer;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.01em;transition:transform .14s;color:#fff;}
.smd-au-btn:active{transform:scale(.98);}
.smd-au-btn svg{width:14px;height:14px;}
.smd-au-btn.smd-au-blue{background:#2f5cc4;color:#eef2ff;}
.smd-au-btn.smd-au-red{background:var(--red);}
.smd-au-btn.smd-au-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--hair);}
.smd-au-row2{display:flex;gap:10px;margin-top:12px;}
.smd-au-row2 .smd-au-btn{margin-top:0;}
.smd-au-trow{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:14px;font-weight:600;color:var(--t1);}

.smd-au-sw{width:50px;height:30px;border-radius:999px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;flex:none;transition:background .25s;}
.smd-au-sw::after{content:"";position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .25s cubic-bezier(.4,0,.2,1);}
.smd-au-sw.smd-au-on{background:var(--green);}
.smd-au-sw.smd-au-on::after{left:22px;}

.smd-au-seg-ctl{position:relative;display:flex;margin-top:14px;padding:3px;border-radius:12px;background:rgba(255,255,255,.09);}
.smd-au-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(25% - 4.5px);border-radius:9px;background:#fff;transition:transform .26s cubic-bezier(.4,0,.2,1);}
.smd-au-opt{flex:1;text-align:center;padding:8px 0;font-family:var(--smd-f-mono);font-size:12px;color:var(--t2);cursor:pointer;position:relative;z-index:1;transition:color .18s;}
.smd-au-opt.smd-au-on{color:#111;}
.smd-au-sub{font-family:var(--smd-f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lab);margin-top:16px;}

.smd-au-li{display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid var(--hair);font-size:13px;font-weight:500;color:var(--t1);}
.smd-au-li:last-child{border-bottom:0;}
.smd-au-li .smd-au-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.06);border:1px solid var(--hair);color:var(--t1);}
.smd-au-li .smd-au-ic svg{width:16px;height:16px;}
.smd-au-li .smd-au-meta{color:var(--lab);font-size:11.5px;margin-top:2px;font-weight:400;}
.smd-au-li .smd-au-mono{margin-left:auto;font-family:var(--smd-f-mono);font-size:11px;color:var(--lab);}

.smd-au-setrow{display:flex;justify-content:space-between;align-items:center;padding:15px 6px;border-bottom:1px solid var(--hair);font-size:14px;font-weight:500;color:var(--t1);}
.smd-au-setrow:last-child{border-bottom:0;}
.smd-au-h2{font-family:var(--smd-f-display);font-size:25px;font-weight:800;margin:8px 2px 16px;letter-spacing:-.02em;color:var(--t1);}

.smd-au-nav{display:flex;padding:9px 6px calc(10px + env(safe-area-inset-bottom));flex:none;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border-top:1px solid var(--hair);}
.smd-au-nav button{flex:1;background:none;border:0;color:var(--lab);display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--smd-f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:3px 0;transition:color .2s;}
.smd-au-nav button svg{width:20px;height:20px;}
.smd-au-nav button.smd-au-on{color:#fff;}
@media(prefers-reduced-motion:reduce){
  .smd-au-views,.smd-au-thumb,.smd-au-sw::after{transition:none;}
}

/* ============================================================
   Preloader — shown on every page load, in the site's own style
   ============================================================ */
.smd-preloader{
  position:fixed;
  inset:0;
  z-index:99999;
}
.smd-preloader.smd-preloader--done{
  pointer-events:none;
}
/* two curtain panels that cover the screen while loading, then part like
   theatre curtains — sliding fully off left/right — to reveal the page
   that's already rendered underneath */
.smd-preloader-panel{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background:var(--smd-ink);
  transition:transform .9s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.smd-preloader-panel--left{left:0;}
.smd-preloader-panel--right{right:0;}
.smd-preloader.smd-preloader--done .smd-preloader-panel--left{transform:translateX(-100%);}
.smd-preloader.smd-preloader--done .smd-preloader-panel--right{transform:translateX(100%);}
.smd-preloader-inner{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:20px;
  padding:0 var(--smd-pad);
  transition:opacity .4s ease;
}
.smd-preloader.smd-preloader--done .smd-preloader-inner{
  opacity:0;
}
/* SM set in the site's giga-type, hard left; the progress bar runs straight
   through the letters and inverts them where it crosses (mix-blend difference) */
.smd-preloader-stage{
  position:relative;
  width:100%;
  display:flex;
}
.smd-preloader-word{
  font-family:var(--smd-f-display);
  font-weight:800;
  font-size:clamp(88px, 24vw, 300px);
  line-height:.82;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--smd-paper);
}
.smd-preloader-bar{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:clamp(16px, 2.4vw, 26px);
  background:rgba(247, 246, 243, 0.14);
  border-radius:999px;
  overflow:hidden;
  mix-blend-mode:difference;
}
.smd-preloader-bar-fill{
  height:100%;
  width:0%;
  background:var(--smd-paper);
  transition:width .3s ease-out;
}
.smd-preloader-pct{
  font-family:var(--smd-f-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--smd-gray-light);
  margin:0;
}
@media(prefers-reduced-motion:reduce){
  .smd-preloader-panel,
  .smd-preloader-inner{transition:none;}
}