/* ============ tokens (traces to mobile/src/theme/tokens.ts) ============ */
:root {
  --stone0:#ffffff; --stone50:#fafafa; --stone100:#f4f4f5; --stone200:#e8e8ea;
  --stone300:#d4d4d8; --stone400:#a1a1aa; --stone500:#71717a; --stone600:#52525b;
  --stone700:#3f3f46; --stone900:#18181b; --ink:#18181b; --cinema:#000000;
  --garment-field:#f2ede8;
  --tone-a:#cdbfae; --tone-b:#c8b8a6; --tone-c:#bcb4a8; --tone-d:#d8cdbd;
  --glyph:rgba(26,23,20,.26);
  --r-chip:6px; --r-control:10px; --r-card:12px; --r-sheet:20px;
  --gutter:24px; --max:1240px;
  --ease:cubic-bezier(.23,1,.32,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--cinema);
  color:var(--ink);
  font-family:"Hanken Grotesk","Helvetica World","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img, svg { display:block; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }

.skip-link {
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--stone0); color:var(--ink); font-size:14px; font-weight:600;
  padding:12px 18px; border-radius:var(--r-control);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  transition:top .2s var(--ease);
}
.skip-link:focus { top:16px; }

.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

/* ============ buttons: ink-on-paper inversions, no accent hue ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 26px; border-radius:var(--r-control);
  font-size:15px; font-weight:500; letter-spacing:0;
  transition:transform .18s cubic-bezier(.23,1,.32,1), background .18s, color .18s;
  cursor:pointer; border:0;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:scale(.97); }
.btn-fill-light { background:var(--stone0); color:var(--ink); }
.btn-fill-light:hover { background:var(--stone200); }
.btn-line-light { background:transparent; color:var(--stone0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.btn-line-light:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.btn-fill-ink { background:var(--ink); color:var(--stone0); }
.btn-fill-ink:hover { background:var(--stone700); }

/* ============ nav: floating glass pill ============ */
/* Frosted, not solid: the page reads through it as you scroll, which is why
   the blur is paired with saturate() (keeps colour behind from going flat)
   and a 1px top highlight for the refracted edge. Note this is a web
   approximation of the "liquid glass" look, not Apple's own material. */
.nav {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:50; width:min(calc(100% - 32px), 980px);
  display:flex; align-items:center; gap:28px;
  border-radius:999px;
  padding:8px 8px 8px 24px;
  background:rgba(250,250,250,.62);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    0 8px 32px rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.35);
  animation:navdrop .7s var(--ease) both;
}
/* no backdrop-filter (or the user asked for less transparency): fall back to
   an opaque pill so the links never sit on an unreadable field */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background:var(--stone0); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background:var(--stone0); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@keyframes navdrop { from { opacity:0; transform:translate(-50%,-16px); } to { opacity:1; transform:translate(-50%,0); } }
.nav .wordmark { font-size:18px; font-weight:600; letter-spacing:.01em; color:var(--ink); }
.nav .links { display:flex; gap:24px; margin-left:auto; }
.nav .links a { font-size:15px; font-weight:400; color:var(--stone700); transition:color .15s; }
.nav .links a:hover { color:var(--ink); }
.nav .btn { height:40px; padding:0 20px; font-size:14.5px; border-radius:999px; }

/* ============ hero ============ */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 700px at 72% 40%, #232327 0%, #0d0d0e 55%, #000 100%);
  color:var(--stone0);
  /* no runway needed any more: the device is a fixed layer that holds its own
     position across the seam, so the hero is just the hero. */
  padding:150px 0 96px;
}
.hero .wrap {
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:24px;
  min-height:760px;
}
.hero .wrap > * { min-width:0; }
.hero h1 {
  font-size:clamp(52px, 6.6vw, 96px);
  line-height:1.05; letter-spacing:-.025em; font-weight:500;
  text-wrap:balance;
}
/* masked line rise on load */
.hl { display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hl-inner { display:block; transform:translateY(112%); animation:rise .85s cubic-bezier(.23,1,.32,1) forwards; }
.hl:nth-child(2) .hl-inner { animation-delay:.12s; }
@keyframes rise { to { transform:translateY(0); } }
.hero .sub {
  margin-top:26px; max-width:46ch;
  font-size:18px; line-height:1.6; color:var(--stone300);
}
.hero .sub strong { color:var(--stone0); font-weight:500; }
.hero .ctas { display:flex; gap:12px; margin-top:38px; }
.hero .fineprint { margin-top:18px; font-size:13px; color:var(--stone500); }

/* ============ the phone's opening slot ============ */
/* The device itself is .phoneworld, further down -- a fixed layer, so that it
   can leave the hero. This is only the hole it opens in: the hero's right
   column reserves the space and lights it, and JS reads this box to know where
   the flight starts. Nothing flies on narrow screens, so the slot goes away
   there rather than leaving a gap in the hero. */
.phone-stage { position:relative; min-height:700px; }
/* rim light so the black device separates from the black field */
.phone-stage::before {
  content:""; position:absolute; width:620px; height:800px;
  left:50%; top:50%; transform:translate(-50%,-52%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.10), transparent 66%);
  pointer-events:none;
  opacity:var(--rim, 1);
}

/* ============ the pipeline: the same desk, five moments ============ */
.pipe { background:var(--stone50); padding:130px 0 0; }
.pipe h2.big, .rest h2.big, .faq h2.big {
  font-size:clamp(34px, 3.7vw, 52px); letter-spacing:-.02em; font-weight:500; line-height:1.1;
}
/* held to the left half so the phone can fly past it without a collision */
.pipe h2.big { max-width:620px; }
.pipe .lede, .rest .lede { margin-top:14px; color:var(--stone500); max-width:52ch; }
.pipe-track { height:520vh; position:relative; margin-top:-110px; } /* pull the pinned desk up under the heading */
.pin { position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.pin-grid { display:grid; grid-template-columns:380px 1fr; gap:64px; align-items:center; width:100%; position:relative; }
.rail { position:relative; padding-left:26px; }
.rline { position:absolute; left:0; top:12px; bottom:12px; width:2px; background:var(--stone200); border-radius:1px; }
.rline .rfill { position:absolute; left:0; top:0; width:100%; height:100%; background:var(--ink); border-radius:1px; transform-origin:top; transform:scaleY(var(--p, 0)); }
.ritem { display:flex; gap:16px; padding:15px 0; opacity:.32; transition:opacity .35s; }
.ritem.on { opacity:1; }
.ritem .rnum { font-size:12px; font-weight:500; color:var(--stone500); font-variant-numeric:tabular-nums; padding-top:4px; }
.ritem h3 { font-size:18px; font-weight:600; letter-spacing:-.01em; }
.ritem p { margin-top:4px; font-size:14px; line-height:1.5; color:var(--stone600); max-width:34ch; }
/* the stage desk: persistent plane, tilting with the pointer through all five moments */
.stageworld { perspective:1400px; perspective-origin:50% 20%; }
/* the stage the phone lands on. Scenery for the flight only -- when nothing
   flies, the screens stack on their own and this plane is not drawn. */
.stagedesk { display:none; }
body.fly .stagedesk {
  display:block; position:relative; width:min(100%, 660px); height:620px; margin:0 auto; border-radius:24px;
  transform:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, #f6f1ec 0%, var(--garment-field) 58%, #ebe4dc 100%);
  box-shadow:inset 0 0 0 1px rgba(26,23,20,.05);
  transition:transform .1s linear;
}

/* ============ the phone that travels ============
   Base (no JS / narrow / reduced motion): the five app screens stack as framed
   cards inside the pipeline column -- every step still readable, nothing moves.
   body.fly upgrades that to the flight: the device leaves the hero's right
   column, turns over as it crosses the frame, and docks in the pinned demo,
   where the five steps then play out on its screen. */
.phoneworld { display:flex; flex-wrap:wrap; justify-content:center; gap:44px 28px; }
.phoneplane, .flyphone, .pface { display:contents; }
.pback, .pshadow, .pdepth, .prail, .pend, .pglare, .pglint, .pisle, .pglow { display:none; }
.pscreen {
  position:relative; flex:none; width:min(300px, 84vw); height:630px;
  border-radius:44px; overflow:hidden; background:var(--stone0); color:var(--ink);
  display:flex; flex-direction:column; font-size:13px; line-height:1.42;
  box-shadow:0 0 0 4px #4c4c53, 0 26px 54px rgba(0,0,0,.28);
}

/* --- the flight --- */
body.fly .phoneworld {
  position:fixed; inset:0; z-index:6; pointer-events:none; gap:0;
  display:block; perspective:1700px;
}
body.fly .phoneplane { display:block; position:absolute; inset:0; transform-style:preserve-3d; }
/* left/top are the viewport origin; JS translates the centre where it wants it */
body.fly .flyphone {
  display:block; position:absolute; left:0; top:0; width:300px; height:630px;
  margin:-315px 0 0 -150px; transform-style:preserve-3d; will-change:transform;
}
/* --- the body is solid, 18px of it ---
   A flat card goes to nothing at 90deg, which is exactly where a turn spends
   its most legible moment. So the device is built the way the old WebGL one
   looked: stacked planes fill the rounded silhouette, and four real machined
   faces close the sides, so edge-on shows a milled rail rather than a slice. */
/* the same milled gradient the rails carry, so the filled corners and the flat
   side faces read as one continuous surface instead of two parts meeting */
/* Corners only. The rails already seal the straight sides, and full-height
   planes there just stack their antialiased edges into a picket fence at
   grazing angles -- eight of them read as brushed stripes on the rail. The
   rounded corners are the one place a flat wall cannot reach. */
body.fly .pdepth {
  display:block; position:absolute; left:0; right:0; height:58px;
  background:linear-gradient(180deg,#3b3b42 0%,#2a2a30 100%);
}
body.fly .pdepth.t { top:0; border-radius:52px 52px 0 0; transform-origin:50% 543.1%; }
body.fly .pdepth.b { bottom:0; border-radius:0 0 52px 52px; transform-origin:50% -443.1%;
  background:linear-gradient(180deg,#2a2a30 0%,#3b3b42 100%); }
body.fly .pdepth.deep { background:linear-gradient(180deg,#2c2c32 0%,#1f1f24 100%); }
body.fly .pdepth.deep.b { background:linear-gradient(180deg,#1f1f24 0%,#2c2c32 100%); }
body.fly .prail {
  display:block; position:absolute; top:58px; bottom:58px; width:28px;
  background:linear-gradient(180deg,#4a4a52 0%,#2e2e34 9%,#232328 34%,#1f1f24 66%,#2f2f35 91%,#4e4e56 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.16), inset -1px 0 0 rgba(0,0,0,.5);
}
/* the machined buttons, standing very slightly proud of the rail */
body.fly .prail i {
  position:absolute; left:5px; right:5px; border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.16), rgba(0,0,0,.20));
  box-shadow:0 0 0 .5px rgba(0,0,0,.28);
}
/* the walls fold back into the body (-Z), never forward through the glass */
body.fly .prail.l { left:0; transform-origin:left center; transform:rotateY(90deg); }
body.fly .prail.r { right:0; transform-origin:right center; transform:rotateY(-90deg); }
body.fly .pend {
  display:block; position:absolute; left:64px; right:64px; height:28px;
  background:linear-gradient(90deg,#43434a 0%,#28282e 22%,#1f1f24 50%,#2a2a30 78%,#46464e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.5);
}
body.fly .pend.t { top:0; transform-origin:center top; transform:rotateX(-90deg); }
body.fly .pend.b { bottom:0; transform-origin:center bottom; transform:rotateX(90deg); }

/* the frame: a machined band, bright where it catches light at the chamfer and
   dark across the flat, with a polished lip picked out on the very edge */
body.fly .pface, body.fly .pback {
  display:block; position:absolute; inset:0; border-radius:52px; backface-visibility:hidden;
  background:linear-gradient(148deg,
    #e9e9ef 0%, #cacad1 5%, #93939b 13%, #67676f 24%, #48484f 38%,
    #3a3a41 50%, #4d4d56 62%, #7a7a83 76%, #adadb5 88%, #dcdce2 96%, #e6e6ec 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
body.fly .pface { transform:translateZ(.6px); }
/* the black bezel: the screen is inset inside this, never flush to the metal */
body.fly .pface::before {
  content:""; position:absolute; inset:1.2px; border-radius:50.8px; background:#010101;
  box-shadow:inset 0 0 2px rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* the island, cut out of the glass and sitting above every screen */
body.fly .pisle {
  display:block; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:86px; height:26px; border-radius:999px; background:#000; z-index:6;
  box-shadow:inset 0 -1px 1.5px rgba(255,255,255,.07);
}
/* the back sits at the far side of the body, not on top of the front */
body.fly .pback { transform:rotateY(180deg) translateZ(28px) scale(.99);
  background:linear-gradient(148deg,#cfcfd6 0%,#9a9aa2 9%,#6a6a73 22%,#45454d 40%,
    #3a3a41 52%,#4c4c55 66%,#75757e 80%,#a8a8b0 92%,#d2d2d9 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
/* specular: a rim glint on the frame and a sheen across the glass, both moved
   by --lx, which JS drives off the device's own rotation */
body.fly .pglint {
  display:block; position:absolute; inset:0; border-radius:52px; padding:1.2px; pointer-events:none; z-index:3;
  background:conic-gradient(from calc(190deg + var(--lx, 0) * 360deg) at 50% 50%,
    transparent 0deg, rgba(255,255,255,.46) 16deg, rgba(255,255,255,.09) 34deg, transparent 60deg,
    transparent 155deg, rgba(255,255,255,.30) 186deg, transparent 218deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
body.fly .pglare {
  display:block; position:absolute; inset:7px; border-radius:45px; overflow:hidden; z-index:4; pointer-events:none;
  background:
    radial-gradient(ellipse 300px 180px at 16% -6%, rgba(255,255,255,.055), transparent 68%),
    radial-gradient(ellipse 120% 108% at 50% 50%, transparent 76%, rgba(0,0,0,.16) 100%);
  box-shadow:inset 0 0 1.5px rgba(0,0,0,.65), inset 0 0 12px rgba(0,0,0,.22);
}
body.fly .pglare::before {
  content:""; position:absolute; top:-20%; bottom:-20%; left:-40%; width:180%;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.055) 44%,
    rgba(255,255,255,.085) 47%, rgba(255,255,255,.02) 53%, transparent 62%);
  transform:translateX(calc((var(--lx, 0) - .35) * 70%));
}
body.fly .pscreen {
  position:absolute; inset:7px; width:auto; height:auto; border-radius:45px;
  box-shadow:none; opacity:0; transition:opacity .5s var(--ease);
}
body.fly .pscreen.on { opacity:1; }
/* the ground shadow only belongs over the pipeline's paper, never the hero's
   black field, so JS fades it in as the device crosses the seam */
/* the landing: light blooms behind the device as it settles onto the mat and
   then falls back to a resting halo. --bloom is driven by the same scroll
   number that flies it, so the glow tracks the landing rather than a timer. */
body.fly .pglow {
  display:block; position:absolute; inset:-26% -40%; border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 52%,
    rgba(255,251,244,.92) 0%, rgba(255,243,225,.46) 28%, rgba(252,236,214,.18) 54%, transparent 76%);
  transform:translateZ(-70px); opacity:var(--bloom, 0); pointer-events:none;
}
body.fly .pshadow {
  display:block; position:absolute; inset:3% -9% -9% -9%; border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(40,33,28,.34), transparent 70%);
  transform:translateZ(-38px); opacity:var(--ground, 0);
}
/* the back of the device -- seen for a beat as it turns over */
.pbody { position:absolute; inset:1.5px; border-radius:50.5px; overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.055%27/%3E%3C/svg%3E"),
    radial-gradient(130% 85% at 20% 10%, rgba(255,255,255,.075) 0%, transparent 56%),
    radial-gradient(100% 65% at 82% 96%, rgba(255,255,255,.03) 0%, transparent 62%),
    linear-gradient(158deg,#2a2a30 0%,#1a1a1e 34%,#141417 62%,#222228 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045), inset 0 0 44px rgba(0,0,0,.55),
    inset 2px 0 3px -1px rgba(255,255,255,.10), inset -2px 0 4px -1px rgba(0,0,0,.45); }
/* the back, to the 17 Pro pattern: a full-width raised plateau across the top
   with the cluster left and flash/mic/lidar right, and a separate glass window
   below it. Deliberately unbranded -- no logo, no exact trade dress. */
.pplat {
  position:absolute; left:0; right:0; top:0; height:123px;
  border-radius:50px 50px 34px 34px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.055%27/%3E%3C/svg%3E"),
    linear-gradient(163deg,#33333b 0%,#26262d 38%,#1c1c22 72%,#242429 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 3px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.42);
}
.pplat i {
  position:absolute; width:52px; height:52px; border-radius:999px;
  display:grid; place-items:center;
  background:conic-gradient(from 208deg,
    #858995 0deg, #c6cad4 26deg, #6e727e 78deg, #3d404a 140deg, #292c34 196deg,
    #535763 252deg, #969cab 312deg, #858995 360deg);
  box-shadow:0 2px 5px rgba(0,0,0,.62), 0 6px 14px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.14);
}
.pplat i::after {
  content:""; width:38px; height:38px; border-radius:999px;
  background:
    radial-gradient(circle at 33% 25%, rgba(178,204,248,.44) 0%, rgba(44,64,104,.5) 13%, rgba(9,13,24,.97) 40%, #04060b 70%),
    radial-gradient(circle at 68% 78%, rgba(78,60,112,.22), transparent 46%),
    #04060b;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.055), inset 0 0 13px rgba(0,0,0,.97),
    inset 0 1px 2px rgba(255,255,255,.13);
}
.pplat i::before {
  content:""; position:absolute; top:13px; left:16px; width:6px; height:6px; border-radius:999px;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.5) 46%, transparent 72%);
  z-index:2;
}
.pplat i:nth-child(1) { left:46px; top:6px; }
.pplat i:nth-child(2) { left:46px; top:64px; }
.pplat i:nth-child(3) { left:115px; top:35px; }
/* the plateau is raised: its lip catches light and it drops a shadow below */
.pplat::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  border-radius:0 0 34px 34px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.42) 70%, transparent);
}
.pplat b {
  position:absolute; left:218px; top:24px; width:20px; height:20px; border-radius:999px;
  background:radial-gradient(circle at 38% 32%, #fffdf4, #d9d2bb 52%, #8e876c);
  box-shadow:0 0 0 2.5px #2b2b31, inset 0 1px 2px rgba(255,255,255,.7);
}
.pplat s {
  position:absolute; left:226px; top:59px; width:5px; height:5px; border-radius:999px;
  background:#0a0a0d; box-shadow:inset 0 0 1px rgba(255,255,255,.25);
}
.pplat u {
  position:absolute; left:220px; top:80px; width:16px; height:16px; border-radius:999px;
  background:radial-gradient(circle at 38% 32%, #39434f, #0e131a 68%);
  box-shadow:0 0 0 2px #2b2b31;
}
/* the glass window below the plateau */
.pwin {
  position:absolute; left:22px; right:22px; top:146px; bottom:54px; border-radius:32px;
  background:linear-gradient(168deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 34%, rgba(0,0,0,.10) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- screen chrome shared by all five --- */
.pscreen.dark { background:#0e0e10; color:var(--stone0); }
/* the status row sits either side of the island, the way it actually does */
.psbar { flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:21px 22px 0; font-size:12px; font-weight:600; color:var(--stone500); }
.pscreen.dark .psbar { color:rgba(255,255,255,.58); }
.psbar .sig { display:flex; align-items:center; gap:5px; }
.psbar .sig svg { height:11px; width:auto; fill:currentColor; display:block; }
.psbar .sig .dim { opacity:.4; }

/* --- 01 shoot / 02 read: the camera --- */
.viewf { position:relative; flex:1; margin:14px 16px 0; border-radius:20px; overflow:hidden; background:#17171a; }
.vmat { position:absolute; border-radius:10px; display:grid; place-items:center; }
.vmat svg { width:40%; height:40%; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.vmat.m1 { left:7%;  top:10%; width:50%; height:30%; background:var(--tone-a); transform:rotate(-4deg); }
.vmat.m2 { left:45%; top:35%; width:44%; height:32%; background:var(--tone-b); transform:rotate(3deg); }
.vmat.m3 { left:11%; top:62%; width:42%; height:25%; background:var(--tone-c); transform:rotate(-2deg); }
.vbr { position:absolute; inset:14px; }
.vbr i { position:absolute; width:20px; height:20px; border:1.5px solid rgba(255,255,255,.5); }
.vbr i:nth-child(1) { top:0; left:0; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.vbr i:nth-child(2) { top:0; right:0; border-left:0; border-bottom:0; border-radius:0 6px 0 0; }
.vbr i:nth-child(3) { bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 6px; }
.vbr i:nth-child(4) { bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.pcam { flex:none; padding:18px 0 26px; display:grid; justify-items:center; gap:13px; }
.pcam .lbl { font-size:12px; font-weight:600; color:rgba(255,255,255,.62); }
.pcam .shut { width:52px; height:52px; border-radius:999px; background:#fff;
  box-shadow:0 0 0 3px #0e0e10, 0 0 0 4.5px rgba(255,255,255,.92); }
/* 02 adds the read: dashed finds, named pills, the confirm sheet */
.vmat .ol { position:absolute; inset:-7px; border:1.6px dashed rgba(255,255,255,.85); border-radius:13px;
  opacity:0; transition:opacity .45s var(--ease) .1s; }
.pscreen.on .vmat .ol { opacity:1; }
.vtag { position:absolute; display:flex; align-items:center; gap:5px;
  background:var(--stone0); color:var(--ink); border-radius:999px; padding:5px 10px;
  font-size:11px; font-weight:600; white-space:nowrap;
  opacity:0; transform:translateY(5px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.vtag svg { width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.vtag.t1 { left:8%; top:2%; } .vtag.t2 { left:44%; top:29%; transition-delay:.13s; } .vtag.t3 { left:10%; top:55%; transition-delay:.26s; }
.pscreen.on .vtag { opacity:1; transform:none; }
.psheet { flex:none; margin:12px 14px 20px; display:flex; align-items:center; gap:11px;
  background:var(--stone0); color:var(--ink); border-radius:16px; padding:11px 12px;
  opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease) .38s, transform .5s var(--ease) .38s; }
.pscreen.on .psheet { opacity:1; transform:none; }
.psheet .sw { width:40px; height:40px; flex:none; border-radius:9px; background:var(--garment-field); display:grid; place-items:center; }
.psheet .sw svg { width:18px; height:18px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; }
.psheet .m { flex:1; min-width:0; }
.psheet .n { display:block; font-size:13px; font-weight:600; }
.psheet .s { display:block; font-size:11px; color:var(--stone500); margin-top:1px; }
/* the confirm: the disc springs in, then the mark draws itself. Nothing is
   stamped on -- the tick is a stroke with a length, and it is animated by
   giving that length back. */
.psheet .ok { flex:none; width:32px; height:32px; }
.psheet .ok svg { display:block; width:32px; height:32px; overflow:visible; }
.psheet .ok .okring {
  fill:var(--ink); transform-box:fill-box; transform-origin:center;
  transform:scale(.3); opacity:0;
  transition:transform .52s cubic-bezier(.2,1.35,.36,1) .42s, opacity .24s ease .42s;
}
.psheet .ok .okmark {
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:18; stroke-dashoffset:18;
  transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1) .72s;
}
.pscreen.on .psheet .ok .okring { transform:scale(1); opacity:1; }
.pscreen.on .psheet .ok .okmark { stroke-dashoffset:0; }

/* --- 03 the rack --- */
.phead { flex:none; padding:20px 22px 0; display:flex; align-items:baseline; justify-content:space-between; }
.phead .t { font-size:21px; font-weight:600; letter-spacing:-.02em; }
.phead .c { font-size:12px; font-weight:600; color:var(--stone500); }
.ptabs { flex:none; display:flex; gap:5px; margin:14px 22px 0; }
.ptab { border:1px solid var(--stone200); border-radius:var(--r-chip); padding:5px 9px;
  font-size:11.5px; font-weight:600; color:var(--stone600); }
.ptab.on { background:var(--ink); color:var(--stone0); border-color:var(--ink); }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 22px 0; }
.pgrid span { aspect-ratio:.9; border-radius:10px; display:grid; place-items:center;
  opacity:0; transform:translateY(10px) scale(.95); transition:opacity .38s var(--ease), transform .38s var(--ease); }
.pgrid svg { width:26px; height:26px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.pscreen.on .pgrid span { opacity:1; transform:none; }
.pgrid span:nth-child(2) { transition-delay:.05s; } .pgrid span:nth-child(3) { transition-delay:.1s; }
.pgrid span:nth-child(4) { transition-delay:.15s; } .pgrid span:nth-child(5) { transition-delay:.2s; }
.pgrid span:nth-child(6) { transition-delay:.25s; } .pgrid span:nth-child(7) { transition-delay:.3s; }
.pgrid span:nth-child(8) { transition-delay:.35s; } .pgrid span:nth-child(9) { transition-delay:.4s; }
.pgrid span:nth-child(10) { transition-delay:.45s; } .pgrid span:nth-child(11) { transition-delay:.5s; }
.pgrid span:nth-child(12) { transition-delay:.55s; }
.pfoot { flex:none; margin-top:auto; padding:0 22px 26px; font-size:12px; font-weight:600; color:var(--stone500); }

/* --- 04 the hunt --- */
.pfield { margin:16px 22px 0; min-height:100px; border:1px solid var(--stone200); border-radius:12px;
  background:var(--stone50); padding:13px 14px 15px;
  font-size:16px; font-weight:600; letter-spacing:-.015em; line-height:1.45; white-space:pre-line; }
.pfield .caret { display:inline-block; width:1.5px; height:16px; background:var(--ink);
  vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.pchips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 22px 0; }
.pchip { border:1px solid var(--stone200); border-radius:var(--r-chip); padding:4px 8px; font-size:11.5px; font-weight:500; color:var(--stone600); }
.phunts { margin:22px 22px 0; border-top:1px solid var(--stone200); }
.phunts .lbl { display:block; padding:12px 0 4px; font-size:12px; font-weight:600; color:var(--stone500); }
.phunts .h { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--stone200); }
.phunts .sw { width:30px; height:30px; flex:none; border-radius:7px; background:var(--garment-field); display:grid; place-items:center; }
.phunts .sw svg { width:14px; height:14px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.phunts .n { flex:1; min-width:0; font-size:12.5px; font-weight:600; }
.phunts .n small { display:block; font-size:11px; font-weight:400; color:var(--stone500); }
.phunts .dot { width:5px; height:5px; flex:none; border-radius:999px; background:var(--ink); }
.pbtn { margin:auto 22px 26px; height:44px; border-radius:12px; background:var(--ink); color:var(--stone0);
  display:grid; place-items:center; font-size:13px; font-weight:700; }

/* --- 05 it lands --- */
.plock { flex:none; text-align:center; padding:52px 0 0; }
.plock .d { font-size:12px; font-weight:600; color:rgba(255,255,255,.6); }
.plock .t { font-size:66px; font-weight:600; letter-spacing:-.03em; line-height:1.04; margin-top:2px; }
.ppush { margin:auto 14px 12px; display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.95); color:var(--ink); border-radius:18px; padding:11px 12px;
  opacity:0; transform:translateY(-14px); transition:opacity .5s var(--ease) .22s, transform .5s var(--ease) .22s; }
.pscreen.on .ppush { opacity:1; transform:none; }
.ppush .ic { width:32px; height:32px; flex:none; border-radius:9px; background:var(--ink); display:grid; place-items:center; }
.ppush .ic svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ppush .tx { flex:1; min-width:0; }
.ppush .h { display:block; font-size:11.5px; font-weight:600; color:var(--stone500); }
.ppush .b { display:block; font-size:12px; line-height:1.35; margin-top:2px; }
.plist { margin:0 14px 22px; display:flex; gap:11px; align-items:center;
  background:var(--stone0); color:var(--ink); border-radius:16px; padding:11px;
  opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease) .48s, transform .5s var(--ease) .48s; }
.pscreen.on .plist { opacity:1; transform:none; }
.plist .th { width:52px; height:52px; flex:none; border-radius:9px; background:var(--garment-field); display:grid; place-items:center; }
.plist .th svg { width:22px; height:22px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.plist .info { flex:1; min-width:0; }
.plist .nm { display:block; font-size:13px; font-weight:600; }
.plist .mt { display:block; font-size:11.5px; color:var(--stone500); margin-top:2px; }
.plist .go2 { flex:none; height:32px; padding:0 12px; border-radius:9px; background:var(--ink); color:var(--stone0);
  display:grid; place-items:center; font-size:11.5px; font-weight:700; }

/* ============ the rest of the day: Home / Shop / You ============ */
.rest { background:var(--stone0); border-top:1px solid var(--stone200); padding:165px 0 175px; }
.rest .row { display:grid; grid-template-columns:5fr 7fr; gap:80px; align-items:center; margin-top:130px; }
.rest .row.flip .demo { order:-1; }
.rest .row h3 { font-size:clamp(25px, 2.5vw, 34px); font-weight:500; letter-spacing:-.02em; line-height:1.18; }
.rest .row .body { margin-top:14px; color:var(--stone600); font-size:16.5px; line-height:1.6; max-width:44ch; }
.rest .row .body strong { color:var(--ink); font-weight:500; }
.rest .row .points { margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.rest .row .points li { list-style:none; display:flex; gap:10px; font-size:15px; color:var(--stone600); }
.rest .row .points li::before { content:""; width:5px; height:5px; border-radius:999px; background:var(--ink); margin-top:8px; flex:none; }
/* Home demo: the morning briefing card */
.briefing {
  background:var(--stone50); border:1px solid var(--stone200); border-radius:var(--r-sheet);
  padding:28px 28px 32px; position:relative;
}
.briefing .bhead { display:flex; align-items:center; justify-content:space-between; }
.briefing .greeting { font-size:23px; font-weight:500; letter-spacing:-.02em; }
.briefing .avatar { width:38px; height:38px; border-radius:999px; background:var(--stone200); display:grid; place-items:center; font-size:13px; font-weight:500; color:var(--stone700); }
.briefing .context { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:5px; background:var(--stone100); border-radius:var(--r-chip); padding:5px 9px; font-size:13px; font-weight:500; color:var(--stone600); }
.briefing .events { font-size:13px; color:var(--stone500); }
.briefing .sechead { display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 12px; }
.briefing .sechead h4 { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.briefing .sechead .count { font-size:12px; color:var(--stone600); }
.briefing .tiles { display:flex; gap:12px; position:relative; }
.briefing .tile { flex:1; aspect-ratio:.92; border-radius:var(--r-card); display:grid; place-items:center; }
.briefing .tile svg { width:34px; height:34px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.briefing .note { position:absolute; right:2px; bottom:-24px; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--stone500); }
.briefing .bhunts { margin-top:40px; border-top:1px solid var(--stone200); }
.briefing .bhunt { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--stone200); }
.briefing .bhunt:last-child { border-bottom:0; padding-bottom:0; }
.briefing .bhunt .sw { width:40px; height:40px; flex:none; border-radius:var(--r-chip); background:var(--garment-field); display:grid; place-items:center; }
.briefing .bhunt .sw svg { width:16px; height:16px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; }
.briefing .bhunt .nm { flex:1; font-size:14px; font-weight:600; }
.briefing .bhunt .nm small { display:block; font-size:12.5px; font-weight:400; color:var(--stone500); }
.briefing .bhunt .newdot { width:6px; height:6px; border-radius:999px; background:var(--ink); }
/* Shop demo: the floor */
.floor { background:var(--stone50); border:1px solid var(--stone200); border-radius:var(--r-sheet); padding:24px; }
.floor .search {
  display:flex; align-items:center; gap:10px; height:48px; padding:0 16px;
  background:var(--stone100); border-radius:var(--r-control); color:var(--stone500); font-size:15px;
}
.floor .search svg { width:17px; height:17px; stroke:var(--stone500); fill:none; stroke-width:2; stroke-linecap:round; }
.floor .cats { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.floor .cat { border:1px solid var(--stone200); background:var(--stone0); border-radius:var(--r-chip); padding:6px 11px; font-size:13px; font-weight:500; }
.floor .cat.on { background:var(--ink); color:var(--stone0); border-color:var(--ink); }
.floor .goods { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:16px; }
.floor .good { background:var(--stone0); border:1px solid var(--stone200); border-radius:var(--r-card); overflow:hidden; position:relative; }
.floor .good .ph { aspect-ratio:1; background:var(--garment-field); display:grid; place-items:center; }
.floor .good .ph svg { width:34px; height:34px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.floor .good .gi { padding:10px 12px 12px; }
.floor .good .gn { font-size:13.5px; font-weight:600; line-height:1.3; }
.floor .good .gm { font-size:12.5px; color:var(--stone500); margin-top:2px; }
.floor .good .fav { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:999px; background:var(--stone0); border:1px solid var(--stone200); display:grid; place-items:center; }
.floor .good .fav svg { width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.floor .good .fav.on svg { fill:var(--ink); }
/* You demo: the rack wall */
.rackwall { background:var(--stone50); border:1px solid var(--stone200); border-radius:var(--r-sheet); padding:24px; }
.rackwall .tabsrow { display:flex; gap:4px; background:var(--stone100); border:1px solid var(--stone200); border-radius:var(--r-control); padding:3px; width:max-content; }
.rackwall .tab { border-radius:8px; padding:7px 16px; font-size:13.5px; font-weight:600; color:var(--stone500); }
.rackwall .tab.on { background:var(--ink); color:var(--stone0); }
.rackwall .grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:16px; }
.rackwall .gt { aspect-ratio:.92; border-radius:var(--r-card); display:grid; place-items:center; position:relative; }
.rackwall .gt svg { width:30px; height:30px; stroke:var(--glyph); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.rackwall .gt .gtag { position:absolute; bottom:6px; right:6px; font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--stone600); background:rgba(255,255,255,.75); border-radius:4px; padding:2px 6px; }

/* ============ the wall (ink) ============ */
.wall { background:var(--ink); color:var(--stone0); padding:175px 0 185px; }
.statement {
  font-size:clamp(26px, 3.1vw, 42px); line-height:1.32; letter-spacing:-.02em;
  font-weight:500; max-width:24ch;
}
.statement .w { color:#46464d; transition:color .5s ease-out; }
.statement .w.on { color:var(--stone0); }

/* what people are hunting. The match does not get drawn on -- it simply comes
   up out of the list, and a hairline settles under it. */
.wall .lbl {
  display:block; font-size:12px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--stone500);
}
.hunted { margin-top:120px; }
.hunted-list {
  margin-top:30px;
  font-size:clamp(27px, 3.9vw, 54px); line-height:1.36; letter-spacing:-.02em; font-weight:500;
  color:#3d3d44;
}
.hunted-list i { font-style:normal; color:#2b2b31; }
.hunted-list .piece { transition:color .8s var(--ease) .1s; }
/* the rule is a background, not a pseudo-element, and box-decoration-break
   clones it -- so it still lands under every line when the name wraps */
.hunted-list .piece.found {
  background-image:linear-gradient(var(--stone0), var(--stone0));
  background-repeat:no-repeat; background-position:0 calc(100% + .1em);
  background-size:0% 1px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:color .8s var(--ease) .1s, background-size 1s cubic-bezier(.23,1,.32,1) .35s;
}
.hunted-list .piece.found.in { color:var(--stone0); background-size:100% 1px; }

/* the hunt ends: one row, ruled, no card floating on the field */
.matched { margin-top:120px; max-width:660px; }
.mrow {
  margin-top:22px; display:flex; align-items:center; gap:22px; padding:24px 2px;
  border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15);
  transition:border-color .25s;
}
.mrow:hover { border-color:rgba(255,255,255,.36); }
.mthumb { width:58px; height:58px; flex:none; border-radius:8px;
  background:rgba(255,255,255,.05); display:grid; place-items:center; }
.mthumb svg { width:25px; height:25px; stroke:rgba(255,255,255,.32); fill:none;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.minfo { flex:1; min-width:0; }
.mname { display:block; font-size:17px; font-weight:500; letter-spacing:-.01em; }
.mmeta { display:block; font-size:13.5px; color:var(--stone500); margin-top:5px; }
.mprice { flex:none; font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; }
.mgo { flex:none; font-size:13px; font-weight:500; color:var(--stone500);
  white-space:nowrap; transition:color .25s; }
.mrow:hover .mgo { color:var(--stone0); }

/* ============ faq (cinema) ============ */
.faq { background:var(--cinema); color:var(--stone0); padding:155px 0; }
.faq .rows { margin-top:48px; border-top:1px solid rgba(255,255,255,.14); }
.faq details { border-bottom:1px solid rgba(255,255,255,.14); }
.faq summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:26px 0; font-size:clamp(19px, 2vw, 24px); font-weight:600; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .mark { flex:none; margin-left:20px; width:22px; height:22px; position:relative; opacity:.6; transition:transform .25s cubic-bezier(.23,1,.32,1), opacity .15s; }
.faq summary:hover .mark { opacity:1; }
.faq summary .mark::before, .faq summary .mark::after {
  content:""; position:absolute; background:var(--stone0); border-radius:1px;
}
.faq summary .mark::before { left:0; right:0; top:10px; height:2px; }
.faq summary .mark::after { top:0; bottom:0; left:10px; width:2px; }
.faq details[open] summary .mark { transform:rotate(45deg); }
.faq .a { padding:0 0 28px; max-width:62ch; color:var(--stone400); font-size:16px; line-height:1.65; }
.faq details[open] .a { animation:answer .4s cubic-bezier(.23,1,.32,1); }
@keyframes answer { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ============ end cta + footer ============ */
/* the finish: the last line is cut out of the picture behind the page */
/* sized so the section and the whole footer land inside the last viewport --
   scrolled to the bottom, the closing line sits clear of the nav instead of
   being sliced by it */
.endcta { background:#f1ede6; color:var(--ink); min-height:max(460px, calc(100vh - 400px));
  display:grid; place-items:center; padding:56px 0; text-align:center; }
.endcta h2 {
  font-size:clamp(44px, 8.4vw, 122px); letter-spacing:-.03em; font-weight:600; line-height:1.02;
  text-wrap:balance;
  background-image:url("text-background.jpg"); background-size:cover; background-position:50% 32%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.endcta .btn { margin-top:48px; height:64px; padding:0 44px; font-size:17.5px; border-radius:12px; }
.endcta .fineprint { margin-top:16px; font-size:13px; color:var(--stone500); }

.footer { background:var(--cinema); color:var(--stone0); border-top:1px solid rgba(255,255,255,.12); padding:56px 0 48px; }
.footer .cols { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.footer .tag .wordmark { font-size:16px; font-weight:600; letter-spacing:.01em; }
.footer .tag p { margin-top:10px; font-size:14px; color:var(--stone500); }
.footer nav { display:flex; gap:56px; }
.footer .col { display:flex; flex-direction:column; gap:12px; }
.footer .col .lbl {
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--stone500);
  margin-bottom:4px;
}
.footer .col a { font-size:14px; color:var(--stone300); transition:color .15s; }
.footer .col a:hover { color:var(--stone0); }
.footer .legal { margin-top:48px; font-size:12.5px; color:var(--stone600); }

/* ============ motion ============ */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .statement .w { transition:none; }
  .hunted-list .piece.found { transition:none; background-size:100% 1px; }
  .hunt-input .caret { animation:none; }
  .btn, .faq summary .mark { transition:none; }
  .nav { animation:none; }
  .hl-inner { transform:none; animation:none; }
  .faq details[open] .a { animation:none; }
  /* nothing flies: the slot closes, the pipeline unpins, the screens stack */
  .phone-stage { display:none; }
  .pipe-track { height:auto; margin-top:12px; }
  .pin { position:static; height:auto; overflow:visible; }
  .pin-grid { display:block; }
  .rail { padding-left:0; margin-bottom:44px; }
  .stageworld { perspective:none; }
  .pfield .caret { animation:none; }
  .pscreen, .pscreen * { transition:none !important; }
  .ritem { opacity:1; }
  .rline { display:none; }
}

/* ============ responsive ============ */
@media (max-width: 1020px) {
  .hero .wrap { grid-template-columns:1fr; min-height:0; padding-top:20px; }
  .hero { padding-top:130px; }
  .phone-stage { display:none; }
  /* pipeline unpins and stacks on narrow screens */
  .pipe-track { height:auto; margin-top:12px; }
  .pin { position:static; height:auto; overflow:visible; }
  .pin-grid { display:block; }
  .rail { padding-left:0; margin-bottom:48px; }
  .rline { display:none; }
  .ritem { opacity:1; padding:12px 0; }
  .stageworld { perspective:none; }
  /* the stacked footer is much taller here, so the closing section gives way
     to it rather than pushing itself off the top of the last screen */
  .endcta { min-height:0; padding:64px 0; }
  .rest .row, .rest .row.flip { grid-template-columns:1fr; gap:28px; margin-top:72px; }
  .rest .row.flip .demo { order:0; }
  .footer .cols { flex-direction:column; }
  .footer nav { gap:40px; flex-wrap:wrap; }
}
@media (max-width: 640px) {
  .nav .links { display:none; }
  .nav .btn { margin-left:auto; }
  .hunted-list { line-height:1.45; }
  .hero h1 { font-size:clamp(42px, 11.5vw, 56px); }
  .hero .ctas { flex-direction:column; align-items:stretch; }
  .floor .goods { grid-template-columns:repeat(2, 1fr); }
  .rackwall .grid { grid-template-columns:repeat(3, 1fr); }
  .hunted-list { font-size:clamp(24px, 7.4vw, 40px); }
  .mrow { flex-wrap:wrap; gap:14px 18px; }
  .mprice { margin-left:auto; }
}