/* ── hero: made for iPhone Duo (five chapters, played by scroll) ───────────── */
.dx{position:relative;height:820vh;height:820svh;background:var(--ink)}
.dx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--u:min(1vw,1.5vh)}

/* the films: cinematic nights from FAL Kling, kept dim so the phone leads */
.dx-bg{position:absolute;inset:-4%;z-index:0}
.dx-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease);
  filter:saturate(1.05) contrast(1.02)}
.dx-film.is-on{opacity:1}
.dx-veil{position:absolute;inset:0;background:
  radial-gradient(80% 70% at 50% 55%,rgba(8,9,10,.38) 0%,rgba(8,9,10,.82) 70%,rgba(8,9,10,.96) 100%),
  linear-gradient(180deg,rgba(8,9,10,.75) 0%,rgba(8,9,10,.15) 30%,rgba(8,9,10,.35) 70%,rgba(8,9,10,.95) 100%)}

/* intro */
.dx-intro{position:absolute;left:0;right:0;top:calc(92px + 2vh);z-index:4;text-align:center;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}
.dx-intro .eyebrow{margin-bottom:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dx-title{font-size:clamp(46px,6.6vw,112px);line-height:.88}
.dx-w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(10px);
  animation:dxWord 1.1s var(--ease) forwards}
.dx-w:nth-child(1){animation-delay:.05s}.dx-w:nth-child(2){animation-delay:.14s}
.dx-w:nth-child(4){animation-delay:.26s}.dx-w:nth-child(5){animation-delay:.35s}
@keyframes dxWord{to{opacity:1;transform:none;filter:none}}
.dx-intro .lede{max-width:48ch;margin-top:18px;color:var(--fg-soft);opacity:0;animation:dxFade 1s .5s var(--ease) forwards}
.dx-intro .cta-row{justify-content:center;margin-top:26px;opacity:0;animation:dxFade 1s .65s var(--ease) forwards}
@keyframes dxFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* chapter rail */
.dx-rail{position:absolute;left:var(--gutter);top:50%;z-index:4;list-style:none;margin:0;padding:0;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;opacity:0;transition:opacity .5s}
.dx-rail.is-on{opacity:1}
.dx-rail li{display:flex;align-items:center;gap:12px;font:500 13px/1 var(--body);color:var(--fg-faint);transition:color .4s}
.dx-rail i{position:relative;width:8px;height:8px;border-radius:50%;background:rgba(244,242,239,.25);transition:background .4s,transform .4s}
.dx-rail li.is-on{color:var(--paper)}
.dx-rail li.is-on i{background:var(--ember);transform:scale(1.5);box-shadow:0 0 0 5px rgba(236,102,45,.18)}
.dx-rail li.is-done i{background:var(--mint)}

/* captions */
.dx-caps{position:absolute;left:0;right:0;top:calc(84px + 1vh);z-index:4;pointer-events:none}
.dx-cap{position:absolute;left:50%;top:0;width:min(860px,calc(100% - 2 * var(--gutter)));transform:translateX(-50%);text-align:center;
  opacity:0;visibility:hidden}
.dx-cap.is-on{visibility:visible}
.dx-cap .mono{color:var(--mint);margin:0 0 12px}
.dx-cap h2{font-size:clamp(32px,4vw,64px);line-height:.9}
.dx-cap p:last-of-type{margin:14px auto 0;max-width:52ch;color:var(--fg-soft);font-size:clamp(15px,1.25vw,19px)}
.dx-cap .dx-end-cta{margin-top:20px;pointer-events:auto}

/* the scene */
.dx-scene{position:absolute;inset:0;z-index:3;perspective:1600px;perspective-origin:50% 40%;pointer-events:none}
.dx-glow{position:absolute;left:50%;top:58%;width:calc(var(--u) * 80);height:calc(var(--u) * 26);margin-left:calc(var(--u) * -40);
  border-radius:50%;background:radial-gradient(closest-side,rgba(236,240,242,.22),rgba(236,240,242,0));filter:blur(30px);opacity:.7;will-change:transform,opacity}

/* the Duo: a wrapper that moves (dxDuo), the open body, and the left page as a door on
   the hinge. Folded, the door lies over the right half with the outer screen up and the
   body's left half is clipped away; open, the door's inside is the body's left half. */
.dx-duo{position:absolute;left:50%;top:50%;width:calc(var(--u) * 60);aspect-ratio:951/669;
  margin-left:calc(var(--u) * -30);margin-top:calc(var(--u) * -30 * 669 / 951);
  transform-style:preserve-3d;will-change:transform}
.dx-body{position:absolute;inset:0;border-radius:calc(var(--u) * 3.3);padding:calc(var(--u) * .9);background:#040605;
  box-shadow:0 0 0 calc(var(--u) * .26) #7F8481,0 0 0 calc(var(--u) * .38) #D6D9D6,
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 calc(var(--u) * 5) calc(var(--u) * 10) rgba(0,0,0,.6);
  clip-path:inset(-20% -20% -20% 50%)}
.dx-duo.is-open .dx-body{clip-path:none}
.dx-door{position:absolute;left:0;top:0;width:calc(50% + 1px);height:100%;transform-origin:100% 50%;transform-style:preserve-3d;
  transform:translateZ(1px) rotateY(180deg);will-change:transform}
.dx-duo.is-open .dx-door{visibility:hidden}
.dx-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dx-face-in{background:#040605;overflow:hidden;border-radius:calc(var(--u) * 3.3) 0 0 calc(var(--u) * 3.3);
  box-shadow:0 0 0 calc(var(--u) * .26) #7F8481,0 0 0 calc(var(--u) * .38) #D6D9D6;
  clip-path:inset(-20% 0 -20% -20%)}                 /* no rim along the hinge: the screen runs on unbroken */
.dx-face-scr{position:absolute;left:calc(var(--u) * .9);top:calc(var(--u) * .9);width:calc(200% - 2px - var(--u) * 1.8);height:calc(100% - var(--u) * 1.8);
  border-radius:calc(var(--u) * 2.45);background:#000 url(/site/assets/duo/s-reveal.jpg) center/cover no-repeat}
.dx-face-out{transform:rotateY(180deg)}
.dx-face-out .dx-outer{border-radius:calc(var(--u) * .9) calc(var(--u) * 3.3) calc(var(--u) * 3.3) calc(var(--u) * .9)}
/* upright: the device turns a quarter; this layer turns back so the portrait screen stands */
.dx-layer.dx-layer-v{left:50%;top:50%;width:calc(var(--u) * (60 * 669 / 951 - 1.8));height:calc(var(--u) * 58.2);
  transform:translate(-50%,-50%) rotate(-90deg)}
.dx-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--u) * 2.45);overflow:hidden;background:#000}
.dx-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease)}
.dx-layer.is-on{opacity:1}
/* a tap, where the app was tapped */
.dx-tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.9);background:rgba(236,102,45,.35);animation:dxTap .8s var(--ease) forwards}
@keyframes dxTap{0%{transform:scale(.4);opacity:0}25%{opacity:1}100%{transform:scale(1.8);opacity:0}}

/* folded Duo: outer screen 466 × 678, hinge on the left */
.dx-fold{position:absolute;top:50%;left:50%;width:calc(var(--u) * 20);aspect-ratio:466/678;opacity:0;will-change:transform,opacity}
.dx-outer{position:relative;width:100%;height:100%;padding:calc(var(--u) * .75);background:#040605;
  border-radius:calc(var(--u) * .9) calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * .9);
  box-shadow:0 0 0 calc(var(--u) * .2) #7F8481,0 0 0 calc(var(--u) * .32) #D6D9D6,
    calc(var(--u) * -.5) 0 0 calc(var(--u) * .32) #A4A8A5,0 calc(var(--u) * 3) calc(var(--u) * 7) rgba(0,0,0,.6)}
.dx-outer img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--u) * .45) calc(var(--u) * 1.85) calc(var(--u) * 1.85) calc(var(--u) * .45)}
.dx-cam{position:absolute;right:calc(var(--u) * 1.8);top:calc(var(--u) * 1.4);width:calc(var(--u) * 1.4);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2A3340,#06080A 60%);box-shadow:0 0 0 calc(var(--u) * .12) #1A1D1F}

@media (max-width:860px){
  .dx{height:760vh;height:760svh}
  .dx-stage{--u:min(1.5vw,1vh)}
  .dx-rail{display:none}
  .dx-intro{top:80px}
  .dx-intro .lede{display:none}
  .dx-caps{top:auto;bottom:6vh}
  .dx-cap{top:auto;bottom:0}
  .dx-cap h2{font-size:clamp(30px,8.4vw,46px)}
  .dx-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dx-w,.dx-intro .lede,.dx-intro .cta-row{animation:none;opacity:1;transform:none;filter:none}
}

/* ── hero (2026-10-30): what it is, on its own screen, before How it works. The Duo
   stage below keeps a short intro of its own. */
.hx{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hx .dx-intro{top:50%;transform:translateY(-50%)}
.dx-title-duo{font-size:clamp(40px,5vw,84px)}
.hx .eyebrow{padding:9px 18px;font-size:15px;color:var(--paper);background:rgba(244,242,239,.1)}