/* ============================================================
   V2 — MOBILE (≤1039px)

   The mobile design, built from the Figma boards at 360×800
   (`807:2` and the per-section storyboards). Loaded AFTER v2.css so it
   wins, and kept in its own file so the desktop page is untouchable and
   the whole mobile pass is revertible in one line.

   THE PRINCIPLE: mobile did not inherit desktop's structure, it inherited
   desktop's *reasons*. One idea per screen; the type set in fixed px so it
   stops shrinking with the viewport; and motion only where the meaning IS
   the motion (the hands meeting, the dawn breaking).
   ============================================================ */

@media (max-width:1039px){

  /* ── 1 · THE TYPE RAMP ───────────────────────────────────────
     🔴 THE BUG THIS FIXES: `--s` is clamp(0.72px, 100vw/1440, 1.17px), so
     below 1040 it pins at 0.72 and every `calc(N * var(--s))` shrank ~28%.
     Measured on the real page at 360: footer body 10px, links 9px,
     eyebrows and legal 7px. Everything below is FIXED px. Floor is 12. */
  .eyebrow{ font-size:11px; letter-spacing:.14em; gap:10px; }
  .eyebrow .dot{ width:5px; height:5px; }
  .h1{ font-size:36px; line-height:39px; letter-spacing:-.03em; }
  .h2,.h2--wide{ font-size:28px; line-height:32px; letter-spacing:-.025em; }
  .sub,.hero__type .sub,.lede{ font-size:14px; line-height:23px; }
  .btn{ font-size:15px; padding:15px 22px 15px 26px; border-radius:26px; }

  /* ── 2 · ONE SECTION PER VIEWPORT ────────────────────────────
     Each section owns a screen and centres in it. The page stops being a
     column of ragged text and becomes a sequence of deliberate screens. */
  .vision,.why,.products,.cta{ min-height:100svh; display:flex; flex-direction:column;
    justify-content:center; }

  /* ── 3 · NAV: the CTA leaves, a hamburger takes its place ──── */
  .nav{ padding:12px 14px; }
  .nav__pill{ height:54px; padding:0 8px 0 16px; border-radius:27px; }
  .nav__links{ display:none; }
  .nav__cta{ display:none; }          /* the design moves it into the drawer */
  .brand__logo{ height:20px; }
  .nav .brand__logo{ height:17px; }
  .nav__toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; width:44px; height:44px;          /* a real tap target */
    background:none; border:0; padding:0; cursor:pointer; margin-left:auto;
  }
  .nav__toggle span{
    display:block; height:1.5px; border-radius:1px; background:var(--ink);
    transition:width .3s var(--ease), transform .3s var(--ease), opacity .2s;
  }
  .nav__toggle span:nth-child(1){ width:20px; }
  .nav__toggle span:nth-child(2){ width:14px; }
  /* open: the two rules become a cross */
  html.is-menu .nav__toggle span:nth-child(1){ width:20px; transform:translateY(3.75px) rotate(45deg); }
  html.is-menu .nav__toggle span:nth-child(2){ width:20px; transform:translateY(-3.75px) rotate(-45deg); }

  .drawer{
    position:fixed; inset:0; z-index:99; display:grid; place-items:center;
    background:rgba(10,10,10,.88);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    opacity:0; transition:opacity .34s var(--ease-io);
  }
  html.is-menu .drawer{ opacity:1; }
  .drawer[hidden]{ display:none; }
  .drawer__panel{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .drawer__links{ display:flex; flex-direction:column; align-items:center; gap:4px; }
  .drawer__links a{
    font-family:var(--serif); font-size:32px; line-height:1.5; letter-spacing:-.02em;
    color:var(--ink);
  }
  .drawer__links a[aria-current="page"]{ color:var(--lilac); }
  .drawer__cta{ margin-top:22px; }
  html.is-menu{ overflow:hidden; }

  /* ── 4 · HERO — type at the top, imagery on the floor ────────
     The desktop relationship kept: the bed rests on the floor of the
     viewport and the headphone rises out of it. The only change is that
     the type cannot live inside the arc at 360, so it sits above it. */
  /* 🔴 THE OLD COMPACT BLOCK FLOWS THE HERO — `.hero{height:auto}`,
     `.hero__stage{position:relative; max-height:56svh}`, type relative. The
     new design is a COMPOSITION: one viewport, type at the top, bed on the
     floor. Every one of those has to be undone explicitly, or the stage
     collapses to 418px and `bottom:` anchors to the wrong box. */
  .hero{ height:100svh; min-height:100svh; padding:0; display:block; }
  .hero__inner{ width:100%; height:100svh; position:relative; margin:0; }
  .hero__stage{ position:absolute; inset:0; height:auto; max-height:none; margin-top:0; }
  .hero__glow{ display:none; }
  .hero__air{ display:none; }         /* pollen is desktop-only detail */
  .hero__type{
    position:absolute; left:0; right:0; top:100px; bottom:auto;
    padding:0 22px; width:auto; margin:0;
    display:flex; flex-direction:column; align-items:center; gap:30px;
  }
  /* 34px (not the shared 36) so "one conversation at a time." holds one
     line at 360 — at 36 it orphaned "time." and the third line pushed the
     buttons into the headphones. Narrower phones wrap it balanced. */
  .hero__type .h1{ margin-top:0; font-size:34px; line-height:37px; }
  .hero__type .h1__line{ text-wrap:balance; }
  .hero__type .sub{ margin-top:0; }
  .hero__cta{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:8px; }
  /* the imagery, anchored to the floor */
  /* 🔴 LEAVE THE CENTRING ALONE. `html.is-ready .hero__phones` is two-class
     and already carries `translateX(-50%)`; a single-class `transform:none`
     here loses, and adding a -96px margin on top double-shifted it off the
     left edge. js/v2.js §2 now stands down on mobile, so that CSS transform
     is stable — use it, do not re-implement it. */
  .hero__phones{ left:50%; bottom:150px; width:192px; }
  /* stacked, as the design has them — side by side the two labels need
     340px inside a 316px measure and the row silently overflows */
  .hero__actions{ margin-top:0; flex-direction:column; align-items:center; gap:12px; flex-wrap:nowrap; }
  .hero__actions .btn{ width:auto; }
  /* 🔴 150px WAS TOO THIN TO READ AS A VIDEO. The loop was playing the
     whole time (is-live, readyState 4) but only 107px of it was on screen,
     so the flowers' sway fell under the threshold where motion registers —
     which is why it was reported as "the hero video doesn't work". The bed
     is 216px now and the loop fills it. */
  .hero__blooms{
    left:0; right:0; bottom:0; height:216px; overflow:hidden;
  }
  .hero__blooms picture,.hero__blooms video{ transform:none; filter:none; }
  .hero__blooms picture,.hero__blooms picture img,.hero__blooms video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  /* 🔴 the bed must END ON THE PAGE COLOUR. Without this the next section
     starts on a hard horizontal line — the exact bug the desktop hero had. */
  .hero::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:132px;
    z-index:2; pointer-events:none;
    background:linear-gradient(to top, var(--page) 0%, rgba(10,10,10,.7) 46%, rgba(10,10,10,0) 100%);
  }

  /* ── 5 · VISION — ONE PIN, TWO LAYERS, THE SAME ORDER AS DESKTOP ──
     🔴 REWRITTEN 2026-09-22. This section used to FLOW on a phone: the
     track collapsed, the two layers stacked, and an IntersectionObserver
     lit the statement in one go. That is what "everything is coming
     together" meant. It is the desktop architecture now — one sticky
     viewport, two absolutely-positioned layers, one timeline (js §5a) —
     because the ORDER is the content: the words name the thing, the thing
     appears, then its captions. Two stacked layers is the only way the
     second can start before the first has let go.
     320svh, not desktop's 620: there is no pan to pay for here (the train
     is a swipe), so the track only has to carry the arrivals + a hold. */
  .vision{ min-height:0; display:block; }
  .vstage{ height:200svh; }
  .vstage__stick{ position:sticky; top:0; height:100svh; overflow:hidden; display:block; }
  /* 🔴 both layers occupy the SAME box. Never `position:static` here — that
     is what stacked them into two screens and made the cross-fade
     impossible. And never a transform on .vstage__stick itself: that kills
     the pin outright. */
  .vlayer{ position:absolute; inset:0; }
  .vlayer--type{ padding:0 22px; min-height:0; display:flex; align-items:center;
    pointer-events:none; }
  .vision__type{ padding:0; gap:26px; width:100%; }
  .vline{ display:block; }
  /* start states only — js §5a writes every one of these inline, per frame.
     No transition: a transition on a scroll-driven property makes the value
     chase the scrub instead of tracking it. */
  .js .vlayer--type .eyebrow{ opacity:0; }
  .js [data-step]{ opacity:0; }

  /* ── 6 · THE TRAIN — window + all three captions, one swipe ──
     🔑 ALL THREE CAPTIONS STAY ON SCREEN. The desktop rail dims the
     neighbours rather than hiding them, because that is what keeps
     "there are three of these" true. Here they stack; the active one is
     lit and shows its body, the other two collapse to their label. */
  .vlayer--win{ min-height:0; display:flex; flex-direction:column;
    justify-content:center; gap:22px; padding:96px 0 56px; opacity:1; }
  .js .vwin__head .eyebrow,.js .vwin__head .h2,.js .vwin__frame,.js .vrail{ opacity:0; }
  .vwin__head{ gap:16px; padding:0 22px; }
  /* 🔴 !important, deliberately. The desktop aperture is a precisely sized
     chain — frame (aspect-ratio + max-height), plate, glass (the 516x284
     window cut out of the carriage), track. On mobile the carriage is
     dropped and the FRAME becomes the window, so every link has to be
     re-declared; each desktop rule here is more specific than a class, and
     measured overrides without !important lost (frame stayed 360x275,
     glass stayed 129x71). Contained to this block. */
  /* `flex:1 1 auto` is what made it grow to 275px, and `width:auto` then
     collapsed it to 0 because every child is absolute. Pin BOTH axes. */
  .vwin__frame{ flex:0 0 auto !important; align-self:center !important;
    width:316px !important; height:186px !important;
    min-height:0 !important; max-height:none !important;
    aspect-ratio:auto !important; margin:0 auto !important;
    border-radius:14px; overflow:hidden; }
  .vwin__carriage{ display:none !important; }   /* at 360 it is all frame, no view */
  .vwin__plate{ position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; top:0 !important; }
  .vwin__glass{ position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; border-radius:0 !important; }
  .vwin__track{ position:absolute !important; left:0 !important; top:50% !important;
    width:948px !important; height:174px !important;
    transform:translateY(-50%); transition:transform .5s var(--ease); }
  .vwin__track img{ width:948px !important; height:174px !important; max-width:none; }
  .vwin__fade{ display:none; }
  .vrail{ padding:0 22px; }
  .vrail__clip{ overflow:visible; }
  .vrail__track{ display:flex; flex-direction:column; gap:14px; height:auto;
    width:auto; transform:none !important; padding:0; }
  .vrail__gate{ display:none; }
  .vcap{
    position:static; width:auto; display:grid; grid-template-columns:2px 1fr;
    align-items:start; column-gap:12px; text-align:left;
    opacity:.42; transition:opacity .4s var(--ease-io);
  }
  .vcap.is-active{ opacity:1; }
  .vcap__r{ grid-row:1 / span 3; width:2px; height:20px; border-radius:1px;
    background:var(--hairline); transition:height .4s var(--ease), background .4s; }
  .vcap.is-active .vcap__r{ height:44px; background:var(--lilac); }
  .vcap__n{ font-size:12px; letter-spacing:.10em; color:var(--muted); }
  .vcap.is-active .vcap__n{ color:var(--lilac); }
  .vcap__l{ font-size:12px; letter-spacing:.10em; color:var(--muted); }
  .vcap.is-active .vcap__l{ color:var(--lilac); }
  .vcap__b{ font-size:15px; line-height:24px; max-width:none; margin-top:6px;
    display:none; }
  .vcap.is-active .vcap__b{ display:block; }
  .vdots{ display:flex; gap:7px; justify-content:center; align-items:center; margin-top:4px; }
  .vdots i{ width:6px; height:6px; border-radius:50%; background:var(--hairline); display:block; }
  .vdots i.is-on{ background:var(--lilac); }

  /* ── 7 · WHY — THE ONE PINNED SECTION ────────────────────────
     Its whole meaning is a sequence (two hands meeting), so it earns the
     scroll. The desktop timeline drives it unchanged: the hands travel in
     PERCENTAGES, so the geometry is resolution-independent. */
  .why{ min-height:0; display:block; }
  .wtrack{ height:280svh; }  /* 320 → 280 when the truths went (2026-09-26) */
  .wtrack__stick{ position:sticky; top:0; height:100svh; overflow:hidden; display:block; }
  .why__bg{ position:absolute; inset:0; }
  .why__bg img,.why__loop{ width:100%; height:100%; object-fit:cover; }
  /* the text now sits at the TOP, so the dark end of the scrim moved up with it */
  .why__vig{ position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.18) 70%, rgba(10,10,10,.55) 100%); }
  /* 🔁 FLIPPED 2026-09-26 (user: "the text should come on top and the hand
     joining animation should happen at the bottom", "as per the desktop").
     Thesis anchored under the nav, the hands band anchored to the FLOOR so
     the meeting happens in the lower half at any phone height, clear of the
     sound button (bottom 28 + 46). */
  .whands{ position:absolute; left:0; right:0; top:auto; bottom:84px; height:250px; }
  .whand{ position:absolute; top:0; width:180px; height:250px; overflow:hidden; }
  .whand--l{ left:0; }
  /* 🔴 left:auto — the desktop `.whand{left:0}` otherwise wins the pair and
     the right half sat ON the left one (found 2026-09-26) */
  .whand--r{ left:auto; right:0; }
  .whand img{ width:360px; max-width:none; height:250px; object-fit:cover; }
  .whand--r img{ margin-left:-180px; }
  .whand__glow{ display:block; left:50%; top:50%; width:180px; height:180px; margin:-90px 0 0 -90px; }
  .why__thesis{ position:absolute; left:0; right:0; top:92px; margin:0;
    padding:0 22px; gap:16px; }
  .why__thesis .lede{ width:auto; }
  /* the need gets its own last line, as on desktop */
  .why__thesis .h2 em{ display:block; }
  /* one step down on the phone too (2026-09-28) — 28/32 → 24/28 */
  .why__thesis .h2{ font-size:24px; line-height:28px; }
  /* a short phone (≤720 tall): the hands band gives up 50px and sits lower */
  @media (max-height:720px){
    .whands{ bottom:64px; height:200px; }
    .whand{ height:200px; }
    .whand img{ height:200px; }
    .why__thesis{ top:76px; gap:12px; }
  }

  /* ── 8 · PRODUCTS — ONE PIN, FOUR BEATS, IN ORDER ────────────
     🔴 REWRITTEN 2026-09-22. It used to be a static flex column with every
     beat at opacity 1. The user's brief for this section has always been a
     SEQUENCE — "product-header, then the ribbon fading in from right to
     left, then the mockup, and finally the text and cta. everything
     remains sticky" — and a sequence needs its actors on one stage at one
     time. Same pin as desktop, driven by the same four beats in js §3c.
     280svh: header + ribbon + device + five copy beats + a hold. */
  .products{ margin-top:0; min-height:0; display:block; }
  .ptrack{ height:410svh; }   /* +100svh hold for the CTA (2026-10-01) */
  .ptrack__stick{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:block; padding:0; }
  /* inside the pin everything is absolute and nothing reflows, so a beat
     arriving can never nudge the beat above it */
  .products__header{ position:absolute; left:0; right:0; top:96px;
    padding:0 22px; gap:16px; display:flex; flex-direction:column; }
  /* 🔴 .prow__copy AND .phone ARE CHILDREN OF .prow. That is the whole
     shape of this block. A clipped, fixed-height `.prow` (the obvious way
     to make the ribbon a card) ate the copy entirely — measured: the copy
     absent from the viewport at every p. So `.prow` is an UNCLIPPED box
     that spans the rest of the stage, and the two things that must be
     cropped — the ribbon and the device — carry their own clip. */
  .ptrack__stick .prow{ position:absolute; left:22px; right:22px; top:230px;
    bottom:0; height:auto; margin:0; overflow:visible; border-radius:0; }
  /* THE RIBBON: its own rounded card, and its own clip.
     🔴 THE WIPE HAD TO COME BACK — the old compact block kills the mask
     (`mask-image:none`) because there was no timeline to drive it, and
     with the pin restored that rule silently disabled the whole
     right-to-left draw-in. Re-declared here. */
  .prow__bg{ position:absolute; left:0; right:0; top:0; height:248px; inset:auto;
    border-radius:14px; overflow:hidden;
    -webkit-mask-image:linear-gradient(270deg, #000 var(--wipe, 130%), transparent calc(var(--wipe, 130%) + 16%));
            mask-image:linear-gradient(270deg, #000 var(--wipe, 130%), transparent calc(var(--wipe, 130%) + 16%)); }
  .prow__bg img{ width:100%; height:100%; object-fit:cover; }
  .prow__scrim{ display:none; }
  /* 🔴 `left` NEEDS !important: the old compact block sets
     `.phone{left:26.5% !important}` for the un-pinned layout, and an
     `!important` one-class rule beats this two-class one. Measured: the
     device sitting 18px from the left edge of the band. Its own
     overflow crops the bottom flush with the ribbon card. */
  .ptrack__stick .phone{ position:absolute; top:14px; left:50% !important;
    right:auto !important; width:130px; margin-left:-65px; height:234px;
    overflow:hidden; }
  .ptrack__stick .phone .phone__device{ width:100%; height:auto; display:block; }
  .phone__glow{ display:none; }
  .ptrack__stick .prow__copy{ position:absolute; left:0; right:0; top:276px;
    width:auto; padding:0 22px; display:flex; flex-direction:column;
    align-items:center; gap:12px; text-align:center; }
  .tag{ display:none; }               /* one product + "One product" header = noise */
  .pname{ font-size:30px; letter-spacing:-.03em; justify-content:center; }
  .pname__logo{ height:38px; }
  /* same trap: the chip sat at 7.22px because `.pill` is sized off --s */
  .prow__copy .pill{ font-size:11px; letter-spacing:.10em; padding:5px 11px; border-radius:12px; }
  /* the active caption's body, once the rail shows it */
  .vcap .vcap__b{ font-size:15px; line-height:24px; }
  .vcap .vcap__n,.vcap .vcap__l{ font-size:12px; letter-spacing:.10em; }
  .pdesc{ font-size:14px; line-height:23px; margin:0; }
  /* 🔴 the old compact block gives this `margin-top:22px`, which on top of
     the flex gap pushed the last line into the floating sound button
     (measured: the line's right edge at 316, the button's left at 298).
     Zero the margin and cap the measure so it can never reach it. */
  .pstealth{ font-size:12px; margin-top:0; max-width:220px; }

  /* ── 9 · CTA — assembled out of darkness ─────────────────────
     Pinned like Why: the black beat is the reason the dawn reads as
     BREAKING rather than being switched on. */
  .cta{ min-height:0; display:block; }
  .ctrack{ height:220svh; }
  .ctrack__stick{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:block; background:var(--page); }
  .cta__bloom{ position:absolute; inset:0; }
  .cta__bloom img{ width:100%; height:100%; object-fit:cover; }
  /* 🔴 THE BED PLAYS ON A PHONE NOW. It was `display:none` here and in the
     old compact block, and js §7e returned before fetching — which is the
     "the cta video doesn't work" the user reported. It runs the 144KB cut,
     masked the same way as desktop so only the flowers move. */
  .cta__bed{ display:block !important; position:absolute; inset:0; overflow:hidden; }
  .cta__loop{ width:100%; height:100%; object-fit:cover; display:block; }
  .cta__inner{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
    padding:0 22px; gap:22px; display:flex; flex-direction:column; align-items:center; }
  /* 🔴 the lede carries a FIXED desktop width (`calc(522 * var(--s))` =
     376px), so inside a 360 viewport it hung 8px off BOTH edges. Measured
     left:-8, width:376. Nothing in the compact block had answered it. */
  .cta__inner .lede{ width:auto; max-width:none; }
  .cta__ground{ display:none; }

  /* ── 10 · FOOTER — arrives whole, no animation ───────────────
     A footer that assembles is a footer that makes you wait to leave. */
  .foot{ padding:54px 22px 40px; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__blurb{ font-size:14px; line-height:23px; max-width:none; margin:22px 0 22px; }
  .foot__h{ font-size:11px; letter-spacing:.10em; }
  .foot__col a,.foot__soon{ font-size:15px; line-height:2.1; }
  .foot__social a{ width:32px; height:32px; font-size:11px; }
  .foot__legal{ margin-top:34px; gap:14px; flex-direction:column; align-items:flex-start; }
  .foot__legal p,.foot__legal-links span{ font-size:12px; }
  .js .foot [data-reveal]{ opacity:1 !important; transform:none !important; }

  /* the sound toggle stays, bottom right */
  .sound{ right:16px; bottom:16px; width:46px; height:46px; }
}

/* ============================================================
   REDUCED MOTION — the layout stands, the sequences do not
   ============================================================ */
@media (max-width:1039px) and (prefers-reduced-motion:reduce){
  .js [data-step]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .wtrack{ height:auto !important; }
  .wtrack__stick{ position:static !important; height:auto !important; padding:96px 0; }
  .whands{ position:relative !important; top:auto; margin:24px 0; }
  .why__thesis,.truths{ position:relative !important; top:auto !important; }
  .ctrack{ height:auto !important; }
  .ctrack__stick{ position:static !important; height:auto !important; padding:110px 0; }
  /* the two pins added 2026-09-22 collapse here as well — js flattens off
     the TRACK HEIGHT, so zeroing the track is all that is needed */
  .vstage{ height:auto !important; }
  .vstage__stick{ position:static !important; height:auto !important; }
  .vlayer{ position:static !important; }
  .vlayer--type{ min-height:60svh !important; }
  .ptrack{ height:auto !important; }
  .ptrack__stick{ position:static !important; height:auto !important;
    display:flex !important; flex-direction:column; gap:22px; padding:96px 0 52px; }
  .products__header,.ptrack__stick .prow,.ptrack__stick .prow__copy{
    position:relative !important; left:auto !important; right:auto !important;
    top:auto !important; }
  .ptrack__stick .prow{ margin:0 22px !important; }
  .cta__inner{ position:relative !important; top:auto; transform:none !important; }
  .vwin__track{ transition:none !important; }
  .nav__toggle span,.drawer{ transition:none !important; }
}

/* ============================================================
   2026-09-25 · STORIES + LEADERSHIP + ANNOUNCEMENTS on a phone
   ============================================================ */
@media (max-width:1039px){
  .strack{ height:420svh; }
  .sopen__card{ left:22px; right:22px; top:84px; width:auto; margin-top:0; aspect-ratio:auto; height:44svh; }
  /* the column stops above the prev/next pair (bottom 22 + 48 + a 12 gap)
     and scrolls inside itself — real stories run long (2026-09-26) */
  .sopen__col{ left:22px; right:22px; width:auto; top:calc(84px + 44svh + 22px); bottom:82px; transform:none;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sopen__col::-webkit-scrollbar{ display:none; }
  /* a short phone gives the story more of the screen */
  @media (max-height:720px){
    .sopen__card{ top:64px; height:36svh; }
    .sopen__col{ top:calc(64px + 36svh + 16px); }
  }
  .sopen__q{ font-size:21px; }
  .sopen__b{ margin-top:10px; font-size:13.5px; line-height:21px; }
  .sopen__name{ font-size:32px; bottom:44px; left:20px; }
  .sopen__meta{ left:22px; bottom:20px; font-size:10px; }
  .splayer{ margin-top:22px; height:56px; }
  .sopen__label{ font-size:10px; }
  .sopen__nav{ top:auto; bottom:22px; margin-top:0; }
  .sopen__nav--prev{ left:22px; } .sopen__nav--next{ right:22px; }
  .sopen__hint{ display:none; }

  .seqtrack{ height:260svh; }
  .seq__inner{ --k:1px; padding:0 22px; }   /* 2026-10-01: full viewport, centred; the nav comes in over it */
  .lead__inner .h2,.news__inner .h2{ font-size:28px; line-height:32px; }
  .lead__lede{ font-size:14px; line-height:21px; }
  .lead__row{ grid-template-columns:1fr; gap:18px; margin-top:24px; }
  .lcard{ grid-template-columns:104px 1fr; gap:16px; }
  .lcard__tag{ font-size:10px; margin-bottom:6px; }
  .lcard__name{ font-size:22px; margin-bottom:6px; }
  .lcard__role{ font-size:10px; margin-bottom:6px; }
  .lcard__bio{ font-size:12.5px; line-height:18px; }
  .lcard__link{ margin-top:8px; }
  .lcard__link a,.nlink{ font-size:10px; }
  .lead__more{ margin-top:24px; }
  .news__head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .news__all{ height:40px; font-size:13px; padding:0 16px; }
  .news__row{ grid-template-columns:1fr; gap:14px; margin-top:18px; }
  .nfeat__img{ margin-bottom:10px; border-radius:10px; }
  .nmeta,.nitem .nmeta{ font-size:9.5px; }
  .nfeat__h{ font-size:20px; margin:6px 0; }
  .nfeat .nlink{ display:none; }
  .nitem{ grid-template-columns:72px 1fr; gap:12px; padding:9px 0; }
  .nitem__h{ font-size:15px; }
  .nitem .nlink{ display:none; }
  /* the phone keeps its original order: Independence Day as the feature,
     Tokyo third in the list; the 4th item is still dropped */
  .nfeat--d,.nlist__li--d,.nlist__li--last{ display:none; }
  .nfeat--m{ display:flex; }
  /* 5 · Founders' perspective — a swipe carousel, the next card peeks */
  .fp__row{ display:flex; gap:12px; margin:18px -22px 0; padding:0 22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 22px;
    overscroll-behavior-x:contain; scrollbar-width:none; }
  .fp__row::-webkit-scrollbar{ display:none; }
  .fcard{ flex:0 0 264px; scroll-snap-align:start; padding:8px 8px 18px; border-radius:16px; }
  .fcard__img{ height:160px; border-radius:10px; }
  .fcard__qm{ left:16px; top:-12px; font-size:130px; }
  .fcard__qt{ right:16px; bottom:14px; font-size:10px; }
  .fcard__av{ left:18px; top:146px; width:44px; height:44px; box-shadow:0 0 0 4px #121210; }
  .fcard__who{ margin:8px 0 0 66px; min-height:30px; gap:3px; }
  .fcard__n{ font-size:12px; } .fcard__d{ font-size:8.5px; }
  .fcard__t{ margin:18px 10px 0; font-size:21px; line-height:25px; min-height:100px; }
  .fcard__go{ margin:14px 10px 0; font-size:9.5px; }
  .fp__dots{ display:flex; gap:8px; align-items:center; margin-top:18px; }
  .fp__dots i{ width:6px; height:6px; border-radius:3px; background:#4D4D4A; transition:width .3s var(--ease), background-color .3s; }
  .fp__dots i.is-on{ width:18px; background:var(--lilac); }
  @media (max-height:720px){ .fp__inner{ padding-top:0; } .fcard__img{ height:124px; } .fcard__av{ top:110px; } .fcard__t{ min-height:76px; font-size:19px; line-height:23px; } }
  /* the phone news list shows feature + 3 (2026-09-28: press only) */
  .news__row .nlist__li:nth-child(4){ display:none; }
  /* 5c · From the team — stacked rows (Figma 951:230): one lilac meta line,
     the title, the byline; no cover, no dek on a phone */
  .wr__list{ margin-top:18px; }
  .wrow{ grid-template-columns:1fr 24px; grid-template-areas:"meta go" "main go" "by by"; row-gap:7px; min-height:0; padding:12px 0 14px; }
  .wrow__meta{ grid-area:meta; flex-direction:row; align-items:center; gap:0; }
  .wrow__no,.wrow__chip,.wrow__mm{ font-family:var(--mono); font-weight:500; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac); }
  .wrow__chip{ padding:0; border:0; border-radius:0; }
  .wrow__mm{ display:inline; }
  .wrow__chip::before,.wrow__mm::before{ content:"\00a0\00b7\00a0"; }
  .wrow__main{ grid-area:main; }
  .wrow__img,.wrow__d,.wrow__m{ display:none; }
  .wrow__txt{ padding-right:12px; }
  .wrow__t{ font-size:20px; line-height:24px; }
  .wrow__by{ grid-area:by; gap:8px; }
  .wrow__av{ width:20px; height:20px; font-size:11px; }
  .wrow__who{ flex-direction:row; gap:0; }
  .wrow__n{ font-size:12px; font-weight:400; color:var(--body); }
  .wrow__r{ font-family:inherit; font-weight:400; font-size:12px; letter-spacing:0; color:var(--body); }
  .wrow__r::before{ content:"\00a0\00b7\00a0"; }
  .wrow__go{ grid-area:go; align-self:start; margin-top:18px; font-size:15px; }
  /* a short phone (≤720 tall) still holds all four rows inside the pin */
  @media (max-height:720px){
    .wr__inner{ padding-top:0; }
    .wr__list{ margin-top:12px; }
    .wrow{ row-gap:5px; padding:9px 0 11px; }
    .wrow__t{ font-size:17.5px; line-height:21px; }
  }
  .nlist__li--m{ display:list-item; }
}
@media (max-width:1039px) and (prefers-reduced-motion:reduce){
  .seqtrack{ height:auto !important; }
  .strack{ height:auto !important; }
  .strack__stick{ position:relative !important; }
}

/* TAP TARGETS (audit 2026-10-02): the logo link was 17px tall on a phone */
@media (max-width:1040px){
  .brand{ padding:8px 0; margin:-8px 0; }
  .foot__legal-links a{ display:inline-block; padding:10px 0; margin:-10px 0; }
}