/* NADA AI — one stylesheet for the whole site.

   This file replaces home.css and styles.css. Those two were deliberately kept
   apart so the home page could not regress when a subpage changed, and the
   arrangement worked exactly as well as a convention ever does: the comment in
   each file asked the other to keep its numbers in sync, and three of them had
   already drifted — --pad at 24 against 28, --dur-micro at 170 against 180, and
   two different --ease-move curves. --pad was visible: on every phone the floor
   IS the page margin, so the whole site shifted 4px sideways on the tap from
   home to Insight. A convention that is checked by remembering is not a system.

   The isolation the split was protecting is now expressed where it belongs — in
   the cascade, not in the filesystem:

   1. ONE FOUNDATION. Font, tokens, reset, and the objects every page shares are
      declared once, above both compositions. There is no second copy to drift.

   2. TWO GROUNDS, NAMED. `html[data-ground]` says which surface the page sits
      on — ink or paper — and the ground rules are the only place either value is
      spent. Nothing else in this file sets a page background.

   3. TWO COMPOSITIONS, SEALED. The home layer is reached only through
      `[data-page="home"]` or class names that exist nowhere else (.stage-*,
      .product-scrub*); the subpage layer only through `.subpage` and its own. The header
      and footer belong to neither — they are declared once, above both.
      The two share five class names in total, all compound state modifiers
      (.is-hidden, .is-pinned, .is-active) that are never written alone. Editing
      a subpage still cannot reach the home page.

   Reading order below: foundation, grounds, home composition, subpage
   composition. Both compositions keep their own commentary verbatim. */

/* Self-hosted, latin subset of the same Manrope variable face Google served.
   The <link> it replaces cost two blocking round trips on every page — the
   googleapis stylesheet, then the gstatic font it names — before a glyph could
   paint, and shipped seven unicode subsets to an English-only site. One 24KB
   file, preloaded from our own origin, on the same connection as the CSS. It
   also takes the last third-party request off a site that publishes a Security
   page, and lets the CSP drop two hosts. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/manrope-latin-var.woff2) format('woff2');
}

/* ══ foundation ═══════════════════════════════════════════════════════════ */

:root {
  /* ── ground ───────────────────────────────────────────────────────── */
  --ink: #08080a;
  --ink-raise: #101014;
  --ink-line: rgba(255, 255, 255, .13);
  --ink-line-soft: rgba(255, 255, 255, .07);
  /* Warm, not screen-white: the light chapter should read as paper turned over. */
  --paper: #f7f8f7;
  --paper-line: rgba(8, 8, 10, .16);
  --paper-line-soft: rgba(8, 8, 10, .08);

  /* Text tone as one dimension per ground. The third tone is the floor, and it is
     set at the alpha where 11px type clears WCAG AA against its own ground — not
     at whatever looked quiet enough. Measured: .44 on ink gives 4.33:1 and .56 on
     paper gives 4.46:1, so both were failing every chapter label on the page. */
  --on-dark-1: rgba(255, 255, 255, .93);
  --on-dark-2: rgba(255, 255, 255, .64);
  --on-dark-3: rgba(255, 255, 255, .47);   /* 4.81:1 on --ink */
  --on-light-1: rgba(8, 8, 10, .93);
  --on-light-2: rgba(8, 8, 10, .68);
  --on-light-3: rgba(8, 8, 10, .60);       /* 5.24:1 on --paper */

  /* The only chromatic value in the system. It was also --green in the subpage
     file: one hex, two names, which is how a system stops being one. */
  --signal: #00ff51;
  --signal-dim: rgba(0, 255, 81, .34);
  /* The focus ring on paper. Signal green is 1.4:1 against --paper and cannot
     carry a 3:1 UI boundary; this is the same hue taken down to 5.1:1. */
  --signal-ink: #0a7a2e;

  /* ── type ─────────────────────────────────────────────────────────────
     One scale, ~1.3 between steps at the top end. Tracking is a function of
     size: display type needs the optical compensation, body must not have it.
     Subpage titles previously ran on their own --subpage-title, which set them
     at 53.8px against the home page's 62.7px chapter heads — the same rank, two
     steps apart. Every top-level head on the site is now --fs-h1. */
  /* The display step is bounded by height as well as width, and its cap is 104.
     The masthead is the one place where type has to fit a screen rather than a
     column: on a 1440x760 laptop a purely width-driven size spends more than the
     window has, and what falls off the bottom is the action and the scroll cue
     rather than 10px of headline. And past ~1520px the measure stops growing at
     --measure while the size does not, so the cap sets the permanent worst case
     for the longest line — at 108 that line ran to 95% of its column, a rounding
     error away from breaking the authored three lines into four. */
  --fs-display: clamp(43px, min(7.1vw, 12vh), 104px);
  --fs-h1: clamp(32px, 4.9vw, 72px);
  --fs-h2: clamp(26px, 3.1vw, 46px);
  --fs-h3: clamp(19px, 1.55vw, 25px);
  /* Both floors are set by the laptop, not the phone. The vw terms only overtake
     their minimums past ~1570, so on the 1280-1440 displays most people read this
     on, the floor IS the rendered size — body was shipping at 15px and the lede at
     17px on every one of them. 16 is the floor for body copy anywhere, and the lede
     moves with it to keep a real step between the two rather than a 1px one. */
  --fs-lede: clamp(18px, 1.32vw, 20px);
  --fs-body: clamp(16px, 1.02vw, 17px);
  /* Actions sit between body and small deliberately: a 13px primary CTA reads as
     weak, a 15px one as unstyled body text. Named rather than left as a literal,
     because it was the one rendered size on the page belonging to no token. */
  --fs-action: 14px;
  --fs-small: 13px;
  --fs-label: 11px;

  --tr-display: -.055em;
  --tr-h1: -.045em;
  --tr-h2: -.035em;
  --tr-h3: -.025em;
  --tr-body: -.011em;
  --tr-label: .16em;

  /* ── space ───────────────────────────────────────────────────────────
     A single ladder. Component margins pick a rung; they do not invent a clamp. */
  --s1: 8px;
  --s2: 12px;
  --s3: 18px;
  --s4: 26px;
  --s5: 38px;
  --s6: 56px;
  --s7: clamp(64px, 6vw, 88px);
  /* Vertical rhythm between chapters. */
  --s8: clamp(88px, 10.5vw, 152px);

  /* 24, not 28. The vw term only overtakes the floor past ~457px, so on every
     phone the floor IS the page margin — and a 28 in the subpage file against
     the home page's 24 moved the left edge of the site by 4px on the tap from
     home to Insight. The one drift that was actually visible. */
  --pad: clamp(24px, 5.25vw, 84px);
  --measure: 1320px;
  --gutter: clamp(16px, 1.8vw, 28px);
  /* The site's one left axis, including the offset the centred measure adds.
     Containers using max-width + margin-inline:auto land on it for free;
     .careers-intro and .notfound-wrap are free blocks inside full-width parents
     (the first has a gradient and a canvas to fill behind it and cannot narrow
     itself), so the same value has to be computable. The scrollbar is hidden
     site-wide, so 100vw is the viewport width. */
  --axis: max(var(--pad), calc((100vw - var(--measure)) / 2 + var(--pad)));

  /* Chrome height, one per composition. These are two different objects today —
     a 74px bar on the home page, a 106px header everywhere else — and the
     wordmark is carried between them by a view transition, so the difference is
     seen in motion on every navigation. Unifying the two headers is the next
     move; naming both heights here is what makes it a one-line change. */
  --chrome: 74px;
  --header-h: calc(var(--chrome) + env(safe-area-inset-top));

  /* ── motion ───────────────────────────────────────────────────────────
     entrance: arrivals settle hard. exit: departures accelerate away. move:
     state changes that start and end at rest. micro: pointer feedback. Nothing
     falls back to the browser default. */
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.55, 0, .85, .15);
  --ease-move: cubic-bezier(.4, 0, .1, 1);
  --ease-micro: cubic-bezier(.25, .6, .3, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --dur-micro: 170ms;
  --dur-short: 300ms;
  --dur-base: 460ms;
  --dur-long: 760ms;

  --sans: 'Manrope', 'Helvetica Neue', sans-serif;

  /* Film grain. The reference's black is not a flat fill — there is a fine tooth
     over the whole ground, which is most of why it reads as a material rather than
     as #000. Theirs is a WebGL pass; a tiled turbulence tile costs one rasterise. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* One handover for the whole site: pages turn rather than cut, and the wordmark
   is the element carried across. This was declared twice, with a comment in each
   copy asking the other to keep its numbers in sync. */
@view-transition { navigation: auto; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes page-out { to { opacity: 0; transform: translateY(-4px); } }
::view-transition-old(root) { animation: page-out .2s var(--ease-exit) both; }
::view-transition-new(root) { animation: page-in .46s .04s var(--ease-entrance) both; }
::view-transition-group(nada-wordmark) { animation-duration: .46s; animation-timing-function: var(--ease-move); }

/* ── reset ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Both grounds show ink behind the document: on paper pages this is what an
     overscroll at the top reveals, and it should be the site, not white. */
  background: var(--ink);
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Both, not just body. Locking the body alone leaves the root scrollable in
   engines that hand scrolling to <html>, so the page could still move behind the
   menu sheet and the reader returned to somewhere they did not choose. */
html.is-menu-locked, html.is-menu-locked body { overflow: hidden; overscroll-behavior: none; }

body {
  margin: 0;
  /* clip, not hidden: hidden would make the body a scroll container, which
     captures view-timeline progress in a scrollport that never scrolls. */
  overflow-x: clip;
  scrollbar-width: none;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: var(--tr-body);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::-webkit-scrollbar { display: none; width: 0; height: 0; }

a { color: inherit; text-decoration: none; }
/* One tap highlight. The subpage file used a neutral rgba(0,0,0,.08) against the
   home page's signal tint — the same decision, made twice, differently. */
a, button, input { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 255, 81, .14); }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
/* Icons must remain readable even if CSS is briefly stale or missing: the HTML
   SVGs carry width/height/fill/stroke attributes as a fallback. CSS then keeps
   the shared size and stroke language consistent across pages. */
.ui-arrow {
  width: 14px; height: 14px; flex: none; display: inline-block; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.4px;
  stroke-linecap: round; stroke-linejoin: round;
}
.ui-arrow path { fill: none; }
[hidden] { display: none !important; }
:where(h1, h2) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
::selection { background: var(--signal); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* The first thing a keyboard reader meets on any page, and it was the one object
   that changed size and position between the two files. */
.skip-link {
  position: fixed; z-index: 100; top: 12px; left: 12px; min-height: 44px;
  display: inline-flex; align-items: center; padding: 10px 16px;
  border-radius: 999px; background: var(--signal); color: var(--ink);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-entrance);
}
.skip-link:focus { transform: translateY(0); }
/* Skip links move focus to the page body. Keep that destination visible for
   keyboard users without introducing a persistent ring for pointer navigation. */
main:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* One focus green for the site. The two files reached it as #087f2c and #0a7a2e,
   which is not two decisions; it is the same decision made twice. Each ground
   names its own value below — the ring itself is declared once, here. */
:where(a, button, input):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ══ grounds ══════════════════════════════════════════════════════════════
   The one place a page background is set. `data-ground` is on <html> so the
   colour scheme and the anchor offset — both of which the document element owns
   — can be stated without waiting for script or for body to parse. */

html { scroll-padding-top: calc(var(--header-h) + var(--s4)); }
html[data-ground="ink"] { color-scheme: dark; }
html[data-ground="paper"] { color-scheme: light; }
[data-ground="ink"] body { background: var(--ink); color: var(--on-dark-1); }
[data-ground="paper"] body { background: var(--paper); color: var(--ink); }
[data-ground="ink"] :where(a, button, input):focus-visible { outline-color: var(--signal); }
[data-ground="paper"] :where(a, button, input):focus-visible { outline-color: var(--signal-ink); }

/* ══ chrome ═══════════════════════════════════════════════════════════════
   One header and one footer, on every page.

   There were two of each. The home page carried a 74px `.bar` with its own
   menu, its own scroll-retreat and its own footer row; the nine subpages
   carried a 106px `.site-header` with a second menu, a second retreat, and a
   footer this file itself described as "the homepage's closing row, on paper
   instead of ink". The wordmark is carried between them by a view transition,
   so the two were never compared from memory — they were compared in motion,
   32px apart, on every navigation between them.

   What is left is one object with one variable: which ground it is over.
   `--g0`/`--g1` say where paper sits inside the bar, in bar-local pixels. A
   paper page answers "all of it" and never changes. The home page has the
   document's one hard ink/paper edge sweeping up through the bar, and the
   scroll pipeline writes the measured crossing, so the edge continues through
   the bar frame for frame instead of being crossfaded around — crossfading took
   460ms, which at any ordinary scroll speed left the bar half a second as a
   muddy intermediate over ground that had already changed.

   `.is-on-light` is the same question answered for type, which cannot be split
   down the middle and so flips on the line it sits on: the row every object in
   the bar centres on. */

.site-header {
  position: fixed; z-index: 60; inset: 0 0 auto;
  height: var(--header-h);
  padding: env(safe-area-inset-top) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  display: flex; align-items: center; gap: var(--s4);
  --surface-ink: rgba(8, 8, 10, .62);
  --surface-paper: rgba(247, 248, 247, .84);
  /* No paper under the bar until the pipeline says otherwise. */
  --g0: 100%; --g1: 100%;
  transition: transform var(--dur-base) var(--ease-move);
}
/* A paper page has no ink chapter to cross, so the answer is constant and the
   pipeline never has to write it. */
[data-ground="paper"] .site-header { --g0: 0px; --g1: 100%; }
.site-header.is-hidden { transform: translateY(-100%); }
.reading-progress {
  position: fixed; z-index: 61; top: calc(var(--header-h) - 2px); left: 0;
  width: 100%; height: 2px; pointer-events: none;
  background: var(--signal-ink);
  transform: scaleX(var(--reading-progress, 0)); transform-origin: left center;
  transition: top var(--dur-base) var(--ease-move);
}
.site-header.is-hidden + .reading-progress { top: 0; }
[data-ground="ink"] .reading-progress { background: var(--signal); }
body[data-page="notfound"] .reading-progress { display: none; }
.site-header.is-pinned {
  background: linear-gradient(to bottom,
    var(--surface-ink) 0, var(--surface-ink) var(--g0),
    var(--surface-paper) var(--g0), var(--surface-paper) var(--g1),
    var(--surface-ink) var(--g1), var(--surface-ink) 100%);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
/* The one element carried across a navigation. */
.site-header > .wordmark { view-transition-name: nada-wordmark; animation: enter-header .62s .02s var(--ease-entrance) backwards; }
.site-header .menu-toggle { animation: enter-header .62s .07s var(--ease-entrance) backwards; }
@media (min-width: 901px) { .site-header > .main-nav { animation: enter-header .62s .07s var(--ease-entrance) backwards; } }

/* Centred, not baseline-aligned. `baseline` with a single replaced child and a
   44px touch minimum parks the glyph against the TOP of that box, 14px high of
   the row every other object in the bar centres on. It also puts the mark
   entirely above the type-inversion marker: over the paper chapter's edge the
   wordmark was painted dark while still sitting on the ink half of the bar, and
   the primary brand anchor simply vanished for the length of that handover. */
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  transition: transform var(--dur-micro) var(--ease-micro);
}
.wordmark:active { transform: scale(.98); }
/* The actual SVG rather than an external CSS mask. On a cold mobile load the
   mask could paint a frame after the rest of the bar, leaving the primary brand
   anchor briefly blank. The two-state filter changes at the same threshold as
   the bar type, so it never lingers in an intermediate grey. */
.wordmark-glyph {
  width: 64px; height: auto; display: block;
  transition: opacity var(--dur-micro) linear, transform var(--dur-micro) var(--ease-micro);
}

/* The home page had no navigation at all: the only route to any other page was
   the very bottom of a 7000px scroll. */
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); font-size: var(--fs-small); font-weight: 500; }
.main-nav a { position: relative; padding: 12px 0; transition: color var(--dur-micro) var(--ease-micro); }
.main-nav a:not(.header-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-short) var(--ease-move);
}
.main-nav a:not(.header-cta):hover::after,
.main-nav a:not(.header-cta):focus-visible::after,
.main-nav a.is-current::after { transform: scaleX(1); transform-origin: left center; }

/* The CTA is the nav's last node rather than a sibling beside it, so there is
   one DOM node and not two: on desktop it is the last item in the row, and
   below the breakpoint it travels into the panel with the links and is read
   last. Scoped to .main-nav throughout, because `.main-nav a` sets position and
   a 12px 0 padding for the underline treatment and at 0,1,1 outweighs a bare
   .header-cta — which collapsed the pill's horizontal padding to zero. */
.main-nav .header-cta {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  /* The transparent border is not decoration: it keeps this control the same
     drawn size as a bordered pill elsewhere on the page. */
  padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  font-size: var(--fs-action); font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-micro),
              background-color var(--dur-short) var(--ease-micro),
              color var(--dur-short) var(--ease-micro);
}
.main-nav .header-cta:hover { background: var(--signal); color: var(--ink); }
.main-nav .header-cta:active { transform: scale(.97); }

.menu-toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  padding: 10px; border: 0; background: none; color: inherit; cursor: pointer;
}
.menu-toggle span {
  display: block; width: 22px; height: 1px; margin: 5px 0; background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-short) var(--ease-move);
}
.site-header.is-menu-open .menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.site-header.is-menu-open .menu-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ── the two grounds, one set of rules ──────────────────────────────────
   Ink is the default because the home masthead is the first thing the site
   shows. The inverted set is reached two ways that mean the same thing: a page
   whose ground is paper, and the home bar while the paper chapter is under the
   line its type sits on. 200ms is long enough not to snap and short enough that
   the letters are still over the edge that caused it. */
.site-header { color: var(--on-dark-1); }
.site-header .main-nav a:not(.header-cta) { color: var(--on-dark-2); }
.site-header .main-nav a:not(.header-cta):hover { color: var(--on-dark-1); }
.site-header .wordmark-glyph { filter: invert(1); }
.site-header .header-cta { background: #fff; color: var(--ink); }

[data-ground="paper"] .site-header,
.site-header.is-on-light { color: var(--on-light-1); }
[data-ground="paper"] .site-header .main-nav a:not(.header-cta),
.site-header.is-on-light .main-nav a:not(.header-cta) { color: var(--on-light-2); }
[data-ground="paper"] .site-header .main-nav a:not(.header-cta):hover,
.site-header.is-on-light .main-nav a:not(.header-cta):hover { color: var(--on-light-1); }
[data-ground="paper"] .site-header .wordmark-glyph,
.site-header.is-on-light .wordmark-glyph { filter: none; }
[data-ground="paper"] .site-header .header-cta,
.site-header.is-on-light .header-cta { background: var(--ink); color: var(--paper); }

@media (hover: hover) and (pointer: fine) {
  .wordmark:hover:not(:active) .wordmark-glyph { opacity: .72; transform: translateY(-1px); }
}

/* ── footer ─────────────────────────────────────────────────────────────
   Careers, Insight, Security and Terms once had no footer element at all: the
   pages simply stopped, with no contact route and no way onward, and on the two
   legal documents that is where a reader arrives having read to the end. One
   hairline, the signature left, the links right, a 28px tick over the rule. */
.site-foot {
  position: relative; width: 100%;
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  text-align: left;
}
.site-foot::before {
  content: ''; position: absolute; top: -1px; left: var(--foot-inset, 0); width: 28px; height: 1px;
  background: rgba(255, 255, 255, .28);
}
.site-foot-signature {
  display: grid; gap: 5px; margin: 0; color: var(--on-dark-3);
  font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
}
.site-foot-signature strong { color: var(--on-dark-2); font-weight: 600; }
.site-foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px clamp(18px, 2.4vw, 32px); }
/* The two halves of the footer are one line of type across the page, so they
   have to share a baseline. The 13px links sit in a 20.2px line box against a
   12px signature in a 16.5px one, which put them low enough to read as a second
   row rather than as one line. The negative offset is the difference in
   half-leading; the 44px target is kept underneath it. */
.site-foot-links a {
  position: relative; min-height: 44px; display: inline-flex; align-items: flex-start;
  margin-top: -2px; color: var(--on-dark-2); font-size: var(--fs-small);
  transition: color var(--dur-micro) linear;
}
.site-foot-links a::after {
  content: ''; position: absolute; left: 0; top: 23px; width: 100%; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-short) var(--ease-move);
}
.site-foot-links a:hover { color: var(--on-dark-1); }
.site-foot-links a:hover::after, .site-foot-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* The current page is not a destination. It stays in the row so the set reads
   complete, but it does not offer itself as a link. */
.site-foot-links [aria-current="page"] { color: var(--on-dark-3); pointer-events: none; }
.site-foot-links [aria-current="page"]::after { content: none; }

/* On paper the same footer, in the paper tones. The home page's copy had been
   written with three alphas of its own — .54, .72, .72 — against the three tone
   tokens the rest of the site uses. Three greys that were not three decisions. */
[data-ground="paper"] .site-foot { border-top-color: var(--paper-line); }
[data-ground="paper"] .site-foot::before { background: rgba(8, 8, 10, .34); }
[data-ground="paper"] .site-foot-signature { color: var(--on-light-3); }
[data-ground="paper"] .site-foot-signature strong { color: var(--on-light-2); }
[data-ground="paper"] .site-foot-links a { color: var(--on-light-2); }
[data-ground="paper"] .site-foot-links a:hover { color: var(--on-light-1); }
[data-ground="paper"] .site-foot-links [aria-current="page"] { color: var(--on-light-3); }

/* The home footer sits inside the closing chapter, which already carries the
   measure and the page margins; a subpage footer has to draw them itself. */
.subpage .site-foot {
  --foot-inset: max(var(--pad), env(safe-area-inset-left));
  max-width: var(--measure);
  margin: clamp(96px, 11vw, 168px) auto 0;
  padding: var(--s4) max(var(--pad), env(safe-area-inset-right))
           max(var(--s4), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
  /* The home footer's rule begins on the content axis because it lives inside
     .stage-inner. Draw the subpage rule between the same inset axes instead of
     across the outer measure box. */
  border-top-color: transparent;
}
.subpage .site-foot::before { z-index: 1; }
.subpage .site-foot::after {
  content: '';
  position: absolute;
  top: -1px;
  left: max(var(--pad), env(safe-area-inset-left));
  right: max(var(--pad), env(safe-area-inset-right));
  height: 1px;
  background: var(--paper-line);
}
:where([data-page="home"]) .site-foot { margin-top: var(--s6); }

/* ── chrome, narrow ─────────────────────────────────────────────────────
   One breakpoint. The home bar became a sheet at 900 and the subpage header at
   800, so between the two a reader could have navigation on Insight and none on
   the page that links to it — or the reverse, depending on which way they came.

   The sheet takes the page's own ground: a menu is not a different surface from
   the page it belongs to. */
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  /* The sheet is a positioned child of the header, so it paints over its
     siblings: without this the wordmark — on a subpage, the only link back to
     the home page — is painted under the panel it was opened from, and returns
     the panel from a hit test. */
  .site-header > .wordmark, .site-header > .menu-toggle { position: relative; z-index: 2; }
  .main-nav {
    position: fixed; z-index: 1; inset: 0;
    height: var(--vvh, 100svh);
    min-height: 100svh;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--s2);
    padding: max(calc(var(--chrome) + var(--s6)), calc(env(safe-area-inset-top) + 108px)) max(var(--pad), env(safe-area-inset-right))
             max(var(--s6), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
    background: rgba(8, 8, 10, .96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    font-size: clamp(28px, 8vw, 40px); font-weight: 500; letter-spacing: var(--tr-h2);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity var(--dur-short) var(--ease-exit),
                transform var(--dur-short) var(--ease-exit),
                visibility 0s linear var(--dur-short);
  }
  [data-ground="paper"] .main-nav { background: rgba(247, 248, 247, .96); }
  .site-header.is-menu-open .main-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .main-nav a { padding: 10px 0; }
  .main-nav a {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--dur-short) linear,
      transform var(--dur-base) var(--ease-entrance),
      color var(--dur-micro) var(--ease-micro);
  }
  .site-header.is-menu-open .main-nav a {
    opacity: 1;
    transform: none;
  }
  .site-header.is-menu-open .main-nav a:nth-child(1) { transition-delay: 45ms; }
  .site-header.is-menu-open .main-nav a:nth-child(2) { transition-delay: 75ms; }
  .site-header.is-menu-open .main-nav a:nth-child(3) { transition-delay: 105ms; }
  .site-header.is-menu-open .main-nav a:nth-child(4) { transition-delay: 135ms; }
  .site-header.is-menu-open .main-nav a:nth-child(5) { transition-delay: 165ms; }
  /* The underline is a pointer affordance at 13px in a row; at 40px in a column
     it is just a rule under every item. */
  .main-nav a:not(.header-cta)::after { content: none; }
  /* The CTA is read last, and it does not take the column's type size. */
  .main-nav .header-cta { margin-top: var(--s4); padding: 13px 24px; font-size: var(--fs-action); }
  /* Over the sheet the header takes the page's own ground again, whatever
     chapter is behind it, and it must not retreat while the menu it belongs to
     is open. This has to outrank the .is-on-light set, which is written for a
     bar sitting on the paper chapter: the inversion tracks what is behind the
     bar, and while the menu is open what is behind the bar is the menu. */
  .site-header.is-menu-open { transform: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-ground="ink"] .site-header.is-menu-open { color: var(--on-dark-1); }
  [data-ground="ink"] .site-header.is-menu-open .wordmark-glyph { filter: invert(1); }
  [data-ground="ink"] .site-header.is-menu-open .main-nav a:not(.header-cta) { color: var(--on-dark-1); }
  [data-ground="ink"] .site-header.is-menu-open .header-cta { background: #fff; color: var(--ink); }
  [data-ground="ink"] .site-header.is-menu-open .header-cta:hover { background: var(--signal); }
  [data-ground="paper"] .site-header .main-nav a:not(.header-cta) { color: var(--on-light-1); }
}

@media (max-width: 900px) and (max-height: 540px) {
  .main-nav {
    justify-content: flex-start;
    gap: 6px;
    padding-top: max(calc(var(--chrome) + var(--s4)), calc(env(safe-area-inset-top) + 82px));
    padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
    font-size: clamp(24px, 7vh, 32px);
  }
  .main-nav .header-cta { margin-top: var(--s3); }
}

/* Eight destinations no longer share one horizontal row with the signature on
   tablet widths. The earlier 640px handover left the 641–900 band wrapping into
   accidental two- and three-item rows; this is a deliberate two-level footer. */
@media (max-width: 840px) {
  .site-foot { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .site-foot-signature { justify-items: start; }
  .site-foot-links { justify-content: flex-start; gap: 0 clamp(14px, 3.2vw, 24px); }
  .site-foot-links a { margin-top: 0; }
  .site-foot-links a[href^="mailto:"] { flex: 1 0 100%; justify-content: flex-start; }
}

@media (max-width: 640px) {
  /* The CTA had been the loudest object on a phone screen, twice the optical
     weight of the wordmark it sat beside. Quieting it to 40px put the primary
     action 2px under the 44px touch minimum, so the drawn box keeps the optical
     size and the target is extended past it — 44px to hit, a 40px pill drawn. */
  .site-header .header-cta { position: relative; min-height: 40px; padding: 10px 16px; font-size: 13px; }
  .site-header .header-cta::after { content: ''; position: absolute; inset: -2px 0; }
  .wordmark-glyph { width: 58px; height: 15px; }
  /* Stacked, the baseline correction is meaningless and the address becomes its
     own coordinate above the page links. The whole footer stays on the same left
     axis as the content instead of reverting to a generic centred stack. */
  .site-foot-links { gap: 0 clamp(14px, 4.6vw, 24px); }
  .site-foot-links a { min-height: 44px; }
  .subpage .site-foot { margin-top: clamp(72px, 16vw, 120px); }
  :where([data-page="home"]) .site-foot { margin-top: var(--s5); }
}

/* All pages end with the same compact two-row navigation on phones. The old
   subpage footer promoted Contact to a full row, so its rhythm and link axes no
   longer matched the homepage even though the HTML component was identical. */
@media (max-width: 700px) {
  .subpage .site-foot {
    padding-top: var(--s3);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 14px;
  }
  .subpage .site-foot-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: 0;
  }
  .subpage .site-foot-links a,
  .subpage .site-foot-links a[href^="mailto:"] {
    min-width: 0;
    min-height: 44px;
    margin-top: 0;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
  }
  .subpage .site-foot-links a::after {
    top: auto;
    bottom: 5px;
  }
}

/* ══ home composition ═════════════════════════════════════════════════════
   Reached only through .stage-*, .product-scrub*, .dwell-*, .loop, .ledger, .close-*
   and .tour. None of these exist on a subpage. */

/* The home page's own element defaults. Zero-specificity so every component rule
   below still outranks them, exactly as the bare element selectors they replace
   did — and wrapped so they cannot reach a subpage. */
:where([data-page="home"]) :where(h1, h2, h3) { margin: 0; font-weight: 500; text-wrap: balance; }
:where([data-page="home"]) :where(p) { margin: 0; text-wrap: pretty; }

.stage-light :where(a, button):focus-visible { outline-color: var(--signal-ink); }

/* ── atmosphere ───────────────────────────────────────────────────────────
   Two layers the page did not have: a grain tile over everything, and a soft
   lift inside each dark chapter so the ground has a light source instead of
   being one flat value from edge to edge. */

.grain {
  position: fixed; z-index: 50; inset: 0;
  background-image: var(--grain); background-size: 160px 160px;
  opacity: .05; mix-blend-mode: overlay; pointer-events: none;
  contain: strict;
}

/* Sits under .stage-inner (z-index 2) and under the canvases, so it lifts the
   ground without touching the type. On the two pinned chapters it goes on the pin
   rather than the section: a 420vh section would show its light source only for
   the first screenful and then hold four screens of flat ground. */
.stage-hero::before, .dwell-pin::before, .product-scrub__sticky::before, .stage-close::before {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(120% 78% at 72% 8%, rgba(255, 255, 255, .052), transparent 62%);
}
/* .dwell-pin is the only one of the four that is also the measure container, so
   the shared `inset: 0` cropped its light to the text column and left a hard
   vertical seam down both page gutters — the ground read as three panels rather
   than one. Bleed it back out to the viewport, as the full-bleed sections already are. */
.dwell-pin::before { background: radial-gradient(90% 60% at 20% 42%, rgba(255, 255, 255, .04), transparent 66%); inset-inline: calc(50% - 50vw); }
.product-scrub__sticky::before { background: radial-gradient(112% 74% at 74% 42%, rgba(255, 255, 255, .05), transparent 64%); }
.stage-close::before { background: radial-gradient(88% 70% at 82% 78%, rgba(255, 255, 255, .052), transparent 66%); }

/* ── custom cursor (Moonshot-style ring + center dot) ─────────────────────
   Native pointer is hidden. A 5px white hotspot tracks the mouse exactly; a
   36px ring eases behind it and opens to 56px over interactive targets. */
.cursor {
  position: fixed; z-index: 90; inset: 0;
  display: none;
  width: 0; height: 0; pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.cursor.is-live { opacity: 1; }
.cursor.is-suppressed { opacity: 0; }
.cursor-ring,
.cursor-dot {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  will-change: translate, opacity;
}
.cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .6);
  background: transparent;
  scale: 1;
  transition:
    scale .35s cubic-bezier(.16, 1, .3, 1),
    border-color .35s ease,
    background-color .35s ease;
}
.cursor.is-hover .cursor-ring {
  scale: calc(56 / 36);
  border-color: rgba(255, 255, 255, .9);
  background-color: rgba(255, 255, 255, .08);
}
.cursor.is-down .cursor-ring { scale: .82; }
.cursor.is-hover.is-down .cursor-ring { scale: calc(48 / 36); }
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  transition: background-color .35s ease;
}
/* Paper chapter (001 The creative loop): invert the lens onto #101010. */
.cursor.is-on-light .cursor-ring {
  border-color: rgba(16, 16, 16, .6);
}
.cursor.is-on-light.is-hover .cursor-ring {
  border-color: rgba(16, 16, 16, .9);
  background-color: rgba(16, 16, 16, .08);
}
.cursor.is-on-light .cursor-dot {
  background: #101010;
}
@media (hover: none), (pointer: coarse) {
  .grain { opacity: .035; background-size: 180px 180px; }
  .pill:hover:not(:active),
  .ledger li:hover .ledger-to strong,
  .ledger li:hover .ledger-arrow { transform: none; }
  .pill-ghost:hover {
    border-color: rgba(255, 255, 255, .3);
    background: transparent;
    color: var(--on-dark-1);
  }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor { display: block; }
  .has-focus-lens,
  .has-focus-lens * { cursor: none !important; }
}

/* ── primitives ──────────────────────────────────────────────────────── */

/* Every chapter label, stage number and micro-caption is this one object. */
.label {
  display: flex; align-items: center; gap: 11px;
  color: var(--on-dark-3);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* The separator is centred optically, not mechanically. Every label is tracked at
   .16em, and tracking is applied *after* the last letter too, so the flex gap on
   the left of the dot measured 12.76px against 11px on its right — the same 1.76px
   on five chapter labels, a footer and six tour stages. */
.label i {
  width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none;
  margin-inline-start: calc(var(--tr-label) * -1);
}
.stage-light .label { color: var(--on-light-3); }

.pill {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  font-size: var(--fs-action); font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-micro),
              background-color var(--dur-short) var(--ease-micro),
              color var(--dur-short) var(--ease-micro),
              border-color var(--dur-short) var(--ease-micro);
}
.pill:active { transform: scale(.97); }
/* Its own line value, not --ink-line. A hairline at .13 is right for structure
   drawn between paragraphs; on the one control the hero asks a reader to press it
   is 1.3:1 against the ground, which is a button you have to already know is
   there. .3 clears the 3:1 floor for a UI boundary without turning into a box. */
.pill-ghost { border-color: rgba(255, 255, 255, .3); color: var(--on-dark-1); }
.pill-ghost:hover { border-color: #fff; background: #fff; color: var(--ink); }

/* ── chapter frame ───────────────────────────────────────────────────── */

.stage { position: relative; isolation: isolate; }
.stage-light,
.stage-dark {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}
.stage-inner {
  position: relative; z-index: 2;
  /* Explicit, because `margin: 0 auto` on a grid item (the pinned chapters place
     this inside .product-scrub__sticky / .dwell-pin) resolves the item to its content width
     instead of stretching, which collapsed the twelve columns to fit-content. */
  width: 100%;
  max-width: var(--measure); margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* One grid for the whole document. Chapter labels, headlines, list numbers and
   body copy all resolve to the same twelve columns, so the left axis is continuous
   from the hero to the footer. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.chapter-head { margin-bottom: clamp(58px, 5.4vw, 76px); }
.chapter-head .label { margin-bottom: clamp(18px, 2vw, 24px); }
.chapter-head h2 {
  font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-h1);
  max-width: 15ch;
}

/* ── 01 hero ─────────────────────────────────────────────────────────── */

/* The whole masthead — label, headline, lede and the cue at the foot — has to be
   inside one screen. The first-screen action was removed because it only scrolled
   to a later chapter; the header already carries the real outbound action. */
.stage-hero {
  min-height: 100dvh;
  display: grid; align-items: center;
  padding: calc(var(--chrome) + var(--s5)) 0 calc(var(--s7) + var(--s3));
  overflow: hidden;
}
.orbit {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
  contain: strict;
  /* Field yields to type — measured right edge of the masthead copy. */
  --clear-x: 62%;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.04) 0, rgba(0,0,0,.1) calc(var(--clear-x) - 60px), rgba(0,0,0,.78) calc(var(--clear-x) + 10px), #000 calc(var(--clear-x) + 100px));
  mask-image: linear-gradient(to right, rgba(0,0,0,.04) 0, rgba(0,0,0,.1) calc(var(--clear-x) - 60px), rgba(0,0,0,.78) calc(var(--clear-x) + 10px), #000 calc(var(--clear-x) + 100px));
  pointer-events: none;
}
.hero-particles {
  --hero-field-opacity: .88;
  opacity: var(--hero-field-opacity);
  /* Keep the canvas transparent to the page ground; only particles carry light. */
  mix-blend-mode: screen;
}
.motion .hero-particles {
  opacity: 0;
  animation: hero-field-in 820ms 160ms var(--ease-entrance) forwards;
}
@keyframes hero-field-in { to { opacity: var(--hero-field-opacity); } }
.hero-particles .particle-text-field,
.hero-particles > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hero-particle-control {
  position: absolute;
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: rgba(0, 255, 81, .12);
}
.hero-particle-control.is-transitioning { pointer-events: none; }
.hero-particle-control:focus-visible {
  outline: 1px solid rgba(238, 239, 234, .56);
  outline-offset: 7px;
}
/* The masthead is one column. The right of the frame is the particle field —
   composition, not a gap to be filled. A contents index lived here for a while;
   it duplicated the nav bar, it duplicated the chapter labels a screen below it,
   and a six-section page read top to bottom without needing a table of contents.

   Nine columns preserve the deliberate display rhythm while leaving the field
   enough room to emerge on the right. The headline carries four short authored
   lines, so its social promise reads as a sequence rather than a paragraph. */
.hero-lead { grid-column: 1 / span 9; min-width: 0; }
.hero-lead .label { margin-bottom: var(--s5); }
.stage-hero h1 {
  margin-bottom: var(--s5);
  color: rgba(255, 255, 255, .96);
  font-size: var(--fs-display); line-height: .96; letter-spacing: 0; font-weight: 500;
}
.stage-hero .label { color: rgba(255, 255, 255, .56); }
.lede { max-width: 40ch; color: rgba(255, 255, 255, .69); font-size: var(--fs-lede); line-height: 1.5; }
.hero-mobile-cta { display: none; }
.hero-mobile-cta svg {
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round;
}

/* Aligned to the measure, not to the section padding. Anchoring it to --pad put
   it on its own axis 60px left of every other element on the page at any viewport
   wider than the 1320px measure — the one thing in the document that did not
   start where everything else starts. */
.cue {
  position: absolute; z-index: 2; bottom: var(--s5);
  left: 50%; translate: -50%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--on-dark-3); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.cue span { width: 1px; height: 28px; background: currentColor; transform-origin: top; animation: cue 2.6s var(--ease-move) infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.3); opacity: .5 } 50% { transform: scaleY(1); opacity: 1 } }

/* ── 02 the held statement ───────────────────────────────────────────── */

/* 128vh preserves the reading-light progression without asking for nearly half a
   second screen after the final phrase has already resolved. */
.dwell { position: relative; height: 128vh; background: var(--ink); }
.dwell-pin {
  position: sticky; top: 0; z-index: 2;
  height: 100dvh; display: grid; align-content: center;
  padding-block: calc(var(--chrome) + var(--s5)) var(--s7);
}
.thesis-block { grid-column: 1 / span 10; min-width: 0; }
.thesis-block .label { margin-bottom: clamp(28px, 3vw, 36px); color: var(--on-dark-3); }
/* Left-aligned to the page axis. The statement had been centred over eight ragged
   lines, which is the one setting that makes a manifesto look like a slide.
   Its own size, not --fs-h1: the measure and the size are tuned together so the
   sentence lands in four or five lines at every width, instead of nine at 970px
   and eight at 1440px. */
/* 1.28, not 1.18 and not 1.12. Manrope sets 1.37em of content in the line box, so
   the line box is shorter than the type it holds and the leading always reads
   tighter than the number. At 1.18 the distance from one line's descenders to the
   next line's cap height is 11px at 50px type, and the 2px emphasis rule has to
   live in that 11px: it cleared the descenders of its own phrase by 1.8px, so the
   rule under "community" all but touched that word's own y and the whole gap
   between the lines read as one crowded band. There is no setting of the rule that
   fixes that; the leading was the problem. At 1.28 the gap is 16px and the rule
   sits 4.3px under its own descenders, 9.7px clear of the caps below. The extra
   leading is affordable at every size the statement is set at: four lines and
   300px to spare at 1280x800, four and 48px at 1920x600, five and 183px at
   700x600. */
.thesis {
  max-width: 31ch;
  font-size: clamp(29px, 3.9vw, 58px); line-height: 1.28; letter-spacing: var(--tr-h1); font-weight: 400;
  text-wrap: balance;
}

/* Reading light. Every word starts quiet and resolves to full as the dwell is
   spent, so the sentence is read at the pace it is scrolled rather than arriving
   all at once. --lit is written per word by the scroll pipeline.

   The floor is .46 — 4.64:1, AA at this size — and not lower. It had started at
   .24, which is 2.04:1: a reader who does not scroll, or who scrolls straight
   past, was shown a paragraph below the legibility threshold. The effect should
   be type lifting from readable to bright, not from unreadable to readable. */
.thesis .w { color: rgba(255, 255, 255, calc(.46 + .47 * var(--lit, 1))); transition: color 90ms linear; }
.dwell:not(.is-scrubbed) .thesis .w { color: var(--on-dark-1); }

/* Emphasis is a rule drawn under the phrase, not a block behind it. A marker
   highlight puts a coloured rectangle over the type; a rule leaves the word alone. */
.thesis mark {
  position: relative; display: inline-block; background: none; color: inherit;
}
.thesis mark::after {
  /* Centred in the gap between this line's descenders and the next line's caps.
     At -.16em the rule cleared its own descenders by clearing the following line's
     cap height too — it sat 4px inside the words underneath, so every rule read as
     belonging to the line below the one it emphasises. */
  content: ''; position: absolute; left: 0; right: 0; bottom: -.064em; height: 2px;
  background: var(--signal); transform: scaleX(var(--mark, 1)); transform-origin: left center;
  transition: transform var(--dur-short) var(--ease-move);
}
/* The emphasised phrases run the same floor but resolve past it, to pure white. */
.thesis mark .w { color: rgba(255, 255, 255, calc(.46 + .54 * var(--lit, 1))); }

/* ── 03 the loop, on paper ───────────────────────────────────────────────
   The single inversion in the document. Hard edges on both sides. */

.stage-light {
  /* The paper chapter is the only inversion in the document. Give the eye enough
     time to register the change before the product stage takes over. */
  padding: clamp(108px, 10vw, 148px) 0;
  background: var(--paper); color: var(--on-light-1);
}
.stage-light .chapter-head h2 { max-width: 13ch; }

.loop { list-style: none; margin: 0; padding: 0; }
.loop li { grid-column: span 4; min-width: 0; padding-top: var(--s4); border-top: 1px solid var(--paper-line); }
/* The rule over each step doubles as its hover target: it darkens and the number
   goes live. No card, no shadow, no tilt — the structure is the rule. */
.loop li::before {
  content: ''; position: absolute; inset: -1px 0 auto; height: 1px;
  background: var(--on-light-1); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-long) var(--ease-move);
}
.loop li { position: relative; }
.loop li.in::before { transform: scaleX(1); }
.loop .label { margin-bottom: var(--s5); transition: color var(--dur-short) var(--ease-micro); }
.loop h3 { margin-bottom: var(--s2); font-size: var(--fs-h3); line-height: 1.14; letter-spacing: var(--tr-h3); }
.loop p { color: var(--on-light-2); max-width: 31ch; line-height: 1.58; }
/* The hover the rule was drawn for. It had been described in the comment above and
   then never written, so the three steps were the one block on the page that took
   the pointer and did nothing with it. */
@media (hover: hover) and (pointer: fine) {
  .loop li:hover .label { color: var(--on-light-1); }
}

/* ── 04 the product — sticky viewport + horizontal scrub ───────────────
   Same interaction grammar as the lab site: a tall stage buys vertical scroll;
   a sticky pin holds the composition; the card track translates on X. */

.product-scrub {
  --product-center-y: 52%;
  --product-gap: clamp(56px, 6.5vw, 112px);
  --product-head-block: clamp(7.75rem, 13.8vh, 8.75rem);
  --product-card-gap: clamp(20px, 2.2vh, 24px);
  /* The chapter marker is a section coordinate, not another card caption. */
  --product-chapter-gap: clamp(48px, 6.5vh, 68px);
  /* One card owns the center. Its neighbours remain visible as the before/after
     of the sequence instead of flattening all four steps into a grid. */
  --product-media-size: max(
    236px,
    min(
      380px,
      29vw,
      calc(100dvh - var(--product-head-block) - var(--product-card-gap) - 11.5rem)
    )
  );
  --product-card-h: calc(var(--product-media-size) + var(--product-head-block) + var(--product-card-gap));
  position: relative;
  background: var(--ink);
}

.chapter-anchor {
  position: absolute; z-index: -1; top: calc(var(--chrome) + var(--s4));
  width: 1px; height: 1px; pointer-events: none;
}

.product-scrub__desktop { display: none; }
.product-scrub__mobile {
  display: block;
  padding: var(--s8) max(var(--pad), env(safe-area-inset-left)) var(--s8) max(var(--pad), env(safe-area-inset-right));
  overflow: clip;
}

.product-scrub__mobile-head { max-width: 36rem; margin: 0 auto clamp(46px, 11vw, 76px); }
.product-scrub__mobile-head .label { margin-bottom: var(--s4); }
.product-scrub__mobile-head h2 {
  margin-bottom: 0;
  font-size: clamp(32px, 8vw, 48px); line-height: 1.02; letter-spacing: var(--tr-h1); font-weight: 500;
}

.product-scrub__carousel {
  --product-slide-gap: clamp(12px, 3vw, 18px);
  --product-slide-peek: clamp(24px, 7vw, 32px);
  max-width: 420px;
  margin: 0 auto;
}

.product-scrub__mobile-list {
  display: flex; flex-direction: row; gap: var(--product-slide-gap);
  list-style: none; margin: 0;
  padding: 0 var(--product-slide-peek) 4px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--product-slide-peek);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Keep native horizontal swiping without trapping the page's vertical scroll. */
  touch-action: pan-x pan-y;
}
.product-scrub__mobile-list::-webkit-scrollbar { display: none; }
.product-scrub__mobile-list > li {
  --slide-focus: 0;
  --slide-y: 6px;
  --slide-scale: .985;
  --slide-opacity: .56;
  --slide-image-y: 6px;
  --slide-image-scale: .985;
  flex: 0 0 calc(100% - var(--product-slide-peek));
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-width: 0;
  opacity: var(--slide-opacity);
  transform: translate3d(0, var(--slide-y), 0) scale(var(--slide-scale));
  transition: opacity 220ms linear, transform 380ms var(--ease-move);
  will-change: opacity, transform;
  contain: layout paint style;
}
.product-scrub__mobile-list > li.is-active {
  --slide-focus: 1;
  --slide-y: 0px;
  --slide-scale: 1;
  --slide-opacity: 1;
  --slide-image-y: 0px;
  --slide-image-scale: 1;
}
.product-scrub__mobile-list.is-scrolling > li,
.product-scrub__mobile-list.is-scrolling > li img,
.product-scrub__mobile-list.is-scrolling + .product-scrub__status button i::after {
  transition: none;
}
.product-scrub__mobile-list .label { margin-bottom: 10px; }
.product-scrub__mobile-list .label span { color: var(--signal); margin-right: 6px; }
.product-scrub__mobile-list h3 {
  min-height: 1.2em;
  margin: 0 0 12px;
  font-size: var(--fs-h3); line-height: 1.16; letter-spacing: var(--tr-h3); font-weight: 520;
  text-wrap: balance;
}
.product-scrub__mobile-list p {
  min-height: 4.8em;
  margin: 0 0 clamp(22px, 5.6vw, 32px);
  color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.55;
}
.product-scrub__mobile-list img {
  width: min(100%, 300px); height: auto; aspect-ratio: 1 / 1;
  margin: 0 auto; display: block; object-fit: contain; object-position: center;
  border-radius: clamp(16px, 4vw, 22px);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 26px 58px -34px rgba(0, 0, 0, .92);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate3d(0, var(--slide-image-y), 0) scale(var(--slide-image-scale));
  transition: transform 380ms var(--ease-move), box-shadow var(--dur-base) var(--ease-move), border-color var(--dur-base) var(--ease-move);
  will-change: transform;
}
.product-scrub__mobile-list > li.is-active img {
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 36px 76px -38px rgba(0, 0, 0, .96);
}

.product-scrub__status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(28px, 7vw, 42px);
  padding-inline: var(--product-slide-peek);
}
.product-scrub__status button {
  appearance: none; min-height: 44px; border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer;
  display: grid; align-items: center; width: 100%;
  transform: translateY(0);
  transition: transform var(--dur-micro) var(--ease-micro), opacity var(--dur-short) linear;
}
.product-scrub__status button:active { transform: translateY(1px); }
.product-scrub__status button i {
  position: relative;
  display: block; width: 100%; height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
  transition: background-color var(--dur-short) var(--ease-micro), transform var(--dur-short) var(--ease-micro);
}
.product-scrub__status button i::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--signal);
  transform: scaleX(var(--dot-progress, 0));
  transform-origin: left center;
  transition: transform 420ms var(--ease-move);
}
.product-scrub__status button[aria-selected="true"] i {
  background: rgba(0, 255, 81, .18);
  transform: none;
}
.product-scrub__status button:hover i { background: rgba(255, 255, 255, .28); }
.product-scrub__status button[aria-selected="true"]:hover i { background: rgba(0, 255, 81, .22); }
.product-scrub__status button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (min-width: 1024px) {
  .product-scrub { height: 330vh; }
  .product-scrub__desktop { display: block; height: 100%; }
  .product-scrub__mobile { display: none; }
}

/* Only truly constrained landscape viewports fall back to the swipeable list.
   Ordinary short laptops retain the authored horizontal narrative. */
@media (min-width: 1024px) and (max-height: 600px) {
  .product-scrub { height: auto; }
  .product-scrub__desktop { display: none !important; }
  .product-scrub__mobile { display: block !important; }
}

@media (min-width: 1024px) and (min-height: 601px) and (prefers-reduced-motion: reduce) {
  .product-scrub { height: auto; }
  .product-scrub__sticky { position: relative; min-height: 100svh; }
  .product-scrub__track {
    left: max(var(--pad), env(safe-area-inset-left));
    transform: translate3d(0, -50%, 0);
  }
  .product-card { opacity: 1; filter: none; transform: none; }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .product-scrub {
    --product-head-block: clamp(7rem, 12.2vh, 8rem);
    --product-chapter-gap: clamp(48px, 6vh, 62px);
  }
  .product-card__head h3 { font-size: clamp(16px, 1.4vw, 22px); }
  .product-card__head p { font-size: 13.5px; line-height: 1.52; }
  .product-scrub__bg span { font-size: clamp(32px, 5.4vw, 72px); }
}

.product-scrub__sticky {
  position: sticky; top: 0; z-index: 2;
  height: 100dvh; overflow: hidden;
}
.product-scrub__sticky::after {
  content: '';
  position: absolute; z-index: 15; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--ink) 0,
    rgba(10, 10, 10, .9) 10px,
    transparent clamp(36px, 4vw, 64px),
    transparent calc(100% - clamp(36px, 4vw, 64px)),
    rgba(10, 10, 10, .9) calc(100% - 10px),
    var(--ink) 100%
  );
}

.product-scrub__chrome {
  position: absolute; z-index: 20;
  left: 0; right: 0; top: auto;
  bottom: calc(100% - var(--product-center-y) + (var(--product-card-h) / 2) + var(--product-chapter-gap));
  display: flex; align-items: center; justify-content: center;
  padding: 0 max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  text-align: center;
  pointer-events: none;
  opacity: var(--product-exit-opacity, 1);
  transform: translate3d(0, var(--product-exit-y, 0), 0);
}
.product-scrub__chrome .label {
  pointer-events: auto;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .52);
}

.product-scrub__bg {
  pointer-events: none;
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; white-space: nowrap; user-select: none;
  font-weight: 500; line-height: .95; letter-spacing: var(--tr-display);
  color: rgba(255, 255, 255, .93);
  opacity: var(--bg-opacity, 1);
  transform: translate3d(0, var(--bg-y, -24px), 0) scale(var(--bg-scale, 1));
}
.product-scrub__bg span {
  font-size: clamp(40px, 7.5vw, 120px);
}

.product-scrub__track {
  position: absolute;
  top: var(--product-center-y); left: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--product-gap);
  transform: translate3d(100vw, -50%, 0);
  opacity: var(--product-exit-opacity, 1);
}

.product-scrub__progress {
  --progress-opacity: 0;
  position: absolute; z-index: 20;
  left: 50%;
  top: calc(var(--product-center-y) + (var(--product-card-h) / 2) + clamp(22px, 3.2vh, 34px));
  width: min(420px, 42vw);
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 9px;
  opacity: calc(var(--progress-opacity) * var(--product-exit-opacity, 1));
  transform: translate3d(-50%, var(--product-exit-y, 0), 0);
  pointer-events: none;
}
.product-scrub__progress-count {
  min-width: 46px;
  display: flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .4);
  font-size: 10px; line-height: 1; font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}
.product-scrub__progress-count b { color: rgba(255, 255, 255, .82); font: inherit; }
.product-scrub__progress-count i { width: 8px; height: 1px; background: rgba(255, 255, 255, .24); }
.product-scrub__progress button {
  appearance: none;
  min-width: 0; min-height: 44px;
  display: grid; align-items: center;
  margin: 0; padding: 0;
  border: 0; background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.product-scrub__progress button > i {
  position: relative;
  display: block;
  width: 100%; height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
  transform-origin: center;
  transition: background-color var(--dur-short) linear, transform var(--dur-short) var(--ease-micro);
}
.product-scrub__progress button > i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--signal);
  transform: scaleX(var(--step-fill, 0));
  transform-origin: left center;
}
.product-scrub__progress button[aria-current="step"] > i {
  background: rgba(255, 255, 255, .27);
  transform: none;
}
.product-scrub__progress button:focus-visible { outline: 2px solid var(--signal); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .product-scrub__progress button:hover > i { background: rgba(255, 255, 255, .42); }
}

.product-card {
  --card-focus: .3;
  --card-opacity: 1;
  --card-head-opacity: .38;
  --card-head-y: 7px;
  --card-rule-opacity: .24;
  --card-rule-scale: .6;
  --card-shadow: 0 24px 58px -36px rgba(0, 0, 0, .92);
  --card-image-scale: .985;
  --card-border-alpha: .12;
  --card-edge-opacity: .22;
  --card-media-y: 12px;
  --card-media-rotation: 0deg;
  display: flex; flex-direction: column; gap: var(--product-card-gap);
  flex-shrink: 0;
  width: var(--product-media-size);
  max-width: 100%;
  height: auto;
  opacity: 1;
}

.product-card__head {
  position: relative;
  flex: none;
  min-height: var(--product-head-block);
  display: grid;
  align-content: start;
  opacity: var(--card-head-opacity);
  transform: translateY(var(--card-head-y));
  transition: none;
}
.product-card__head::after {
  content: '';
  position: absolute;
  left: 0; bottom: -12px;
  width: 34px; height: 1px;
  background: var(--signal);
  opacity: var(--card-rule-opacity);
  transform: scaleX(var(--card-rule-scale));
  transform-origin: left center;
  transition: none;
}
.product-card__head .label {
  margin-bottom: 12px;
  color: var(--on-dark-3);
  color: rgb(255 255 255 / calc(.47 + var(--card-focus) * .2));
  transition: none;
}
.product-card__head .label span {
  color: var(--signal);
  margin-right: 6px;
  text-shadow: 0 0 14px rgb(0 255 81 / calc(var(--card-focus) * .42));
  transition: none;
}
.product-card__head h3 {
  margin: 0 0 clamp(13px, 1.4vh, 16px);
  font-size: clamp(19px, 1.52vw, 25px); line-height: 1.14; letter-spacing: var(--tr-h3); font-weight: 520;
  color: var(--on-dark-1);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.product-card__head p {
  margin: 0;
  max-width: 34ch;
  color: var(--on-dark-2);
  font-size: var(--fs-small); line-height: 1.58;
  overflow-wrap: anywhere;
}

.product-card__media {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: clamp(16px, 1.25vw, 22px);
  border: 1px solid rgb(255 255 255 / var(--card-border-alpha));
  background: var(--ink-raise);
  opacity: var(--card-opacity);
  transition: none;
  box-shadow: var(--card-shadow);
  transform: translate3d(0, var(--card-media-y), 0) rotate(var(--card-media-rotation));
  transform-origin: center center;
}
.product-card__media::before {
  content: '';
  position: absolute; z-index: 1; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  opacity: var(--card-edge-opacity);
  pointer-events: none;
}
.product-card__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transform: scale(var(--card-image-scale));
  transition: none;
}

/* Promote the authored scrub only while it is approaching the viewport. Keeping
   all seven animated surfaces promoted for the entire document wastes texture
   memory on the hero and live-feed chapters, where those layers cannot be seen. */
@media (min-width: 1024px) and (min-height: 601px) and (prefers-reduced-motion: no-preference) {
  .product-scrub.is-near .product-scrub__bg,
  .product-scrub.is-near .product-scrub__progress,
  .product-scrub.is-near .product-card__media { will-change: opacity, transform; }
  .product-scrub.is-near .product-scrub__track { will-change: transform; }
}

#deck-title:focus-visible { outline: 2px solid var(--signal); outline-offset: 10px; }

/* ── 05 the ledger ───────────────────────────────────────────────────── */

.stage-dark { padding: clamp(104px, 9.5vw, 142px) 0; background: var(--ink); }
.ledger { margin: 0; padding: 0; list-style: none; counter-reset: l; border-top: 1px solid var(--ink-line); }
.ledger li {
  position: relative; counter-increment: l; align-items: center;
  min-height: 116px; padding: var(--s4) 0;
}
.ledger li::before {
  content: '00' counter(l); grid-column: 1 / span 1;
  color: var(--on-dark-3); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); font-variant-numeric: tabular-nums;
  transition: color var(--dur-short) var(--ease-micro);
}
.ledger li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink-line-soft); transform: scaleX(1); transform-origin: left;
  transition: transform var(--dur-long) var(--ease-entrance), background-color var(--dur-short) var(--ease-micro);
}
.motion .ledger li.reveal::after { transform: scaleX(0); }
.motion .ledger li.reveal.in::after { transform: scaleX(1); transition-delay: var(--d, 0ms); }
.ledger h3 {
  grid-column: 2 / span 3; color: var(--on-dark-3);
  font-size: var(--fs-label); line-height: 1.35; letter-spacing: var(--tr-label);
  font-weight: 600; text-transform: uppercase;
}
.ledger p { margin: 0; }
.ledger-from, .ledger-to {
  display: grid; gap: 8px; font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.25; letter-spacing: -.018em;
}
.ledger-from { grid-column: 5 / span 3; color: var(--on-dark-3); }
.ledger-to { grid-column: 9 / -1; color: var(--on-dark-1); }
.ledger-from > span, .ledger-to > span {
  color: var(--on-dark-3); font-size: var(--fs-label); line-height: 1;
  font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase;
}
.ledger-to strong { font-weight: 500; transition: transform var(--dur-short) var(--ease-entrance), color var(--dur-short) linear; }
.ledger-arrow {
  grid-column: 8; width: min(100%, 48px); overflow: visible;
  stroke: rgba(255,255,255,.32); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur-short) linear, transform var(--dur-short) var(--ease-entrance);
}
@media (hover: hover) and (pointer: fine) {
  .ledger li:hover::after { background: var(--ink-line); }
  .ledger li:hover::before { color: var(--signal); }
  .ledger li:hover .ledger-arrow { stroke: var(--signal); transform: translateX(3px); }
  .ledger li:hover .ledger-to strong { color: #fff; transform: translateX(2px); }
}

/* ── 06 close ────────────────────────────────────────────────────────── */

.stage-close {
  position: relative; min-height: max(100svh, 780px);
  display: grid; overflow: hidden; background: var(--ink);
  contain: paint;
}
.world-field {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  contain: strict;
  /* The measured footer edge, published by the tree layout, replaces a viewport
     percentage: the artwork now hands off before the rule at every height. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--tree-foot-y, 90%) - 92px),
    rgba(0, 0, 0, .56) calc(var(--tree-foot-y, 90%) - 50px),
    transparent var(--tree-foot-y, 90%)
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--tree-foot-y, 90%) - 92px),
    rgba(0, 0, 0, .56) calc(var(--tree-foot-y, 90%) - 50px),
    transparent var(--tree-foot-y, 90%)
  );
}
.world-field-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}
.close-inner {
  width: 100%; min-height: inherit;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding-top: calc(var(--chrome) + var(--s6));
  padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
  text-align: left;
}
.stage-close .site-foot {
  z-index: 3;
  isolation: isolate;
}
/* A quiet dark handoff gives the footer its own reading plane without turning it
   into a separate panel. It begins above the rule while the tree is fading out. */
.stage-close .site-foot::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -76px;
  bottom: calc(0px - max(var(--s4), env(safe-area-inset-bottom)));
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(8, 8, 10, .58) 46px,
    rgba(8, 8, 10, .94) 76px,
    var(--ink) 100%
  );
}
.close-message { align-self: center; width: min(900px, 70vw); margin-top: -30px; padding-block: var(--s5); }
.close-kicker {
  margin: 0 0 var(--s4); display: flex; align-items: center; gap: 11px;
  color: var(--on-dark-3); font-size: var(--fs-label); font-weight: 600;
  line-height: 1.35; letter-spacing: var(--tr-label); text-transform: uppercase;
}
.close-kicker span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .42); }
.stage-close h2 {
  margin-bottom: var(--s5); font-size: clamp(52px, 6.5vw, 100px);
  line-height: .92; letter-spacing: var(--tr-display); font-weight: 500;
}
.stage-close h2 > span { display: block; white-space: nowrap; }
.close-cta {
  position: relative; isolation: isolate; overflow: hidden; gap: 12px;
  border-color: rgba(255, 255, 255, .28); color: var(--on-dark-1);
  transform-origin: center;
}
.close-cta::before {
  content: ''; position: absolute; z-index: -1; inset: -1px;
  border-radius: inherit; background: var(--signal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-move);
}
.close-cta i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .56); transition: opacity var(--dur-short) linear, transform var(--dur-short) var(--ease-move); }
.close-cta svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-short) var(--ease-entrance); }
.close-cta:hover, .close-cta:focus-visible, .close-cta.is-activated { border-color: var(--signal); color: var(--ink); }
.close-cta:hover::before, .close-cta:focus-visible::before, .close-cta.is-activated::before { transform: scaleX(1); }
.close-cta:hover i, .close-cta:focus-visible i, .close-cta.is-activated i { opacity: 0; transform: scale(.4); }
.close-cta:hover svg, .close-cta:focus-visible svg, .close-cta.is-activated svg { transform: translateX(3px); }
/* The closing sequence is one event: premise, statement, action.
   Without scripting every element stays visible; `.motion` opts into the staged
   arrival only after the page has confirmed that it can run it.

   `.site-foot` is deliberately not in this set. It carries the copyright line and
   the page's only route to Terms, Privacy and Security, and those cannot be a
   function of an animation firing. `.motion` is added the moment the home module runs, but
   `.is-awake` needs a second, later thing to also succeed; when it did not, the
   footer stayed at opacity 0 with no way for the reader to recover it. The footer
   now paints with the document, and the staged arrival is spent only on the three
   elements whose absence costs nothing. */
.motion .stage-close .close-kicker,
.motion .stage-close h2 > span,
.motion .stage-close .close-cta { opacity: 0; transform: translateY(14px); }
.motion .stage-close.is-awake .close-kicker,
.motion .stage-close.is-awake h2 > span,
.motion .stage-close.is-awake .close-cta {
  opacity: 1; transform: none;
  transition: opacity 420ms linear,
              transform 700ms var(--ease-entrance),
              color var(--dur-short) var(--ease-micro),
              border-color var(--dur-short) var(--ease-micro);
}
.motion .stage-close.is-awake h2 > span:first-child { transition-delay: 70ms; }
.motion .stage-close.is-awake h2 > span + span { transition-delay: 150ms; }
.motion .stage-close.is-awake .close-cta { transition-delay: 280ms; }
.motion .stage-close.is-settled .close-cta { transition-delay: 0s; }
.motion .stage-close.is-awake .close-cta:active { transform: translateY(1px) scale(.975); }
/* Footer content never disappears; only its rule draws in after the closing
   statement, completing the handoff from artwork to navigation. */
.motion .stage-close .site-foot { border-top-color: transparent; }
.motion .stage-close .site-foot::before { transform: scaleX(0); transform-origin: left; }
.motion .stage-close.is-awake .site-foot {
  border-top-color: var(--ink-line);
  transition: border-color 720ms linear 760ms;
}
.motion .stage-close.is-awake .site-foot::before {
  transform: scaleX(1);
  transition: transform 680ms var(--ease-entrance) 900ms;
}

/* ── entrances ───────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); }
.motion .reveal { transition: opacity 420ms linear var(--d, 0ms), transform 700ms var(--ease-entrance) var(--d, 0ms); }
.motion .reveal.in { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .pill:hover:not(:active) { transform: translateY(-1px); }
}

/* ── narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-particles { --hero-field-opacity: .9; }
  .hero-lead { grid-column: 1 / -1; }
  .hero-mobile-cta { display: inline-flex; gap: 24px; margin-top: var(--s5); }
  /* Drop the masthead a touch so type and field share the lower half of the
     upper screen — more settled than hugging the chrome. */
  .stage-hero {
    padding-top: max(
      calc(var(--chrome) + var(--s5) + clamp(28px, 6vh, 56px)),
      calc(88px + clamp(28px, 6vh, 56px) + env(safe-area-inset-top))
    );
  }
  /* Narrow, the headline runs the full measure, so a mask that fades left to right
     leaves the rings sitting on the type. Concentrate the field in the empty band
     above the masthead instead — and hand the band's extent to the same measured
     value the wide mask uses, because "20% of the viewport" was where the label
     happened to start on one phone. */
  .orbit {
    /* Field brightens with the measured masthead top so particles and copy
       settle together when the lead moves. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,.14) 0,
      rgba(0,0,0,.42) max(40px, calc(var(--clear-y, 28%) * .16)),
      #000 max(120px, calc(var(--clear-y, 28%) - 8px)),
      rgba(0,0,0,.28) calc(var(--clear-y, 28%) + 36px),
      rgba(0,0,0,.1) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,.14) 0,
      rgba(0,0,0,.42) max(40px, calc(var(--clear-y, 28%) * .16)),
      #000 max(120px, calc(var(--clear-y, 28%) - 8px)),
      rgba(0,0,0,.28) calc(var(--clear-y, 28%) + 36px),
      rgba(0,0,0,.1) 100%
    );
  }
  .loop li { grid-column: 1 / -1; }
  .loop li + li { margin-top: var(--s5); }
  .loop .label { margin-bottom: var(--s3); }
  .loop h3, .loop p { max-width: 34ch; }
  /* The number remains a stable side index while each comparison reads as a
     vertical sentence in the content column. */
  .stage-dark { padding: clamp(86px, 16vw, 132px) 0; }
  .stage-dark .chapter-head { margin-bottom: clamp(52px, 10vw, 76px); }
  .ledger li {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px; row-gap: 0;
    min-height: 0; padding: clamp(25px, 6vw, 34px) 0;
  }
  .ledger li::before {
    grid-column: 1; grid-row: 1 / span 4;
    align-self: start; margin-top: 2px; color: var(--signal);
  }
  .ledger h3 { grid-column: 2; margin-bottom: 22px; }
  .ledger p { grid-column: 2; }
  .ledger-from,
  .ledger-to {
    position: relative;
    padding-left: 18px;
  }
  .ledger-from::before,
  .ledger-to::before {
    content: '';
    position: absolute; left: 0; top: .42em;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
  }
  .ledger-from { margin-bottom: 14px; }
  .ledger-arrow { grid-column: 2; width: 28px; height: 28px; margin: 0 0 14px 1px; rotate: 90deg; opacity: .78; }
  .ledger-from, .ledger-to { font-size: clamp(17px, 4.8vw, 21px); }
  .thesis-block { grid-column: 1 / -1; }
  .thesis { max-width: 24ch; }
  .dwell { height: 128vh; }
  .cue { display: none; }
  .close-message { width: min(720px, 82vw); margin-top: -20px; }
  .product-scrub__mobile { padding-top: clamp(86px, 16vw, 132px); padding-bottom: clamp(86px, 16vw, 132px); }
  .product-scrub__mobile-head h2 { font-size: clamp(30px, 7.6vw, 44px); line-height: 1; }
  .product-scrub__carousel {
    --product-slide-peek: 22px;
    max-width: none;
  }
  .product-scrub__mobile-list {
    margin-left: calc(0px - max(var(--pad), env(safe-area-inset-left)));
    margin-right: calc(0px - max(var(--pad), env(safe-area-inset-right)));
    width: calc(100% + max(var(--pad), env(safe-area-inset-left)) + max(var(--pad), env(safe-area-inset-right)));
    max-width: none;
    padding-inline: max(var(--pad), env(safe-area-inset-left));
    scroll-padding-left: max(var(--pad), env(safe-area-inset-left));
    scroll-padding-right: max(var(--pad), env(safe-area-inset-right));
  }
  .product-scrub__mobile-list > li {
    flex-basis: calc(100% - var(--product-slide-peek));
  }
  .product-scrub__status { padding-inline: 0; }
  .product-scrub__mobile-list img { width: min(100%, 316px); }
  /* Tree seats in the free right column beside the headline (--tree-clear-*). */
  .world-field {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.06) max(0px, calc(var(--tree-clear-x, 48%) - 12px)),
        rgba(0,0,0,.4) var(--tree-clear-x, 48%),
        #000 calc(var(--tree-clear-x, 48%) + 56px)
      ),
      linear-gradient(
        to bottom,
        rgba(0,0,0,.45) 0%,
        #000 16%,
        #000 calc(var(--tree-foot-y, 90%) - 82px),
        rgba(0,0,0,.48) calc(var(--tree-foot-y, 90%) - 42px),
        transparent var(--tree-foot-y, 90%)
      );
    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.06) max(0px, calc(var(--tree-clear-x, 48%) - 12px)),
        rgba(0,0,0,.4) var(--tree-clear-x, 48%),
        #000 calc(var(--tree-clear-x, 48%) + 56px)
      ),
      linear-gradient(
        to bottom,
        rgba(0,0,0,.45) 0%,
        #000 16%,
        #000 calc(var(--tree-foot-y, 90%) - 82px),
        rgba(0,0,0,.48) calc(var(--tree-foot-y, 90%) - 42px),
        transparent var(--tree-foot-y, 90%)
      );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* Phone landscape: collapse the masthead so content stays usable. */
@media (max-width: 900px) and (max-height: 480px) {
  .stage-hero {
    min-height: auto;
    padding-top: max(calc(var(--chrome) + var(--s3)), calc(64px + env(safe-area-inset-top)));
    padding-bottom: var(--s5);
  }
  .stage-hero h1 { font-size: clamp(28px, 7vw, 40px); margin-bottom: var(--s3); }
  .lede { font-size: 15px; }
  .dwell { height: auto; }
  .dwell-pin { position: static; height: auto; padding-block: var(--s6); }
  /* Landscape is the mirror of portrait, and the narrow block above assumed
     portrait: it concentrates the field in the band over the masthead, which is
     ~290px tall on a phone held upright but only ~96px on its side. At 844x390
     that squeezed the word into a 48px strip lying straight across the header,
     between the wordmark and the menu button. Landscape leaves a real 300-410px
     column beside the copy instead, so take the wide left-to-right mask back. */
  .orbit {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.04) 0, rgba(0,0,0,.1) calc(var(--clear-x) - 60px), rgba(0,0,0,.78) calc(var(--clear-x) + 10px), #000 calc(var(--clear-x) + 100px));
    mask-image: linear-gradient(to right, rgba(0,0,0,.04) 0, rgba(0,0,0,.1) calc(var(--clear-x) - 60px), rgba(0,0,0,.78) calc(var(--clear-x) + 10px), #000 calc(var(--clear-x) + 100px));
  }
}

@media (max-width: 640px) {
  .stage-hero {
    /* Keep the particle band and the masthead on their existing visual axes, but
       stop extending the section to a full viewport after the copy has ended.
       At common phone heights this removes roughly 18vh of empty tail and makes
       01 -> 02 read with the same cadence as 02 -> 03. */
    min-height: max(620px, 82svh);
    align-items: start;
    padding-top: max(
      calc(var(--chrome) + var(--s5)),
      calc(88px + env(safe-area-inset-top)),
      clamp(214px, 34svh, 262px)
    );
    padding-bottom: clamp(62px, 12vh, 84px);
  }
  /* "NADA AI" must not break across two lines. */
  .stage-hero .label { flex-wrap: wrap; gap: 8px; font-size: 10px; letter-spacing: .14em; }
  .stage-hero .label span { white-space: nowrap; }
  /* The authored lines remain short, but the size still answers to the narrowest
     screen so the four-line statement and its lede stay inside one masthead. */
  .stage-hero h1 { margin-bottom: clamp(28px, 7vw, 38px); font-size: clamp(32px, 9.4vw, 48px); }
  .lede { max-width: 34ch; line-height: 1.48; }
  /* A short statement should not spend a full phone viewport plus a scrub tail.
     Keep enough air for it to feel like a chapter, but let the paper section
     arrive after roughly three quarters of a screen. */
  .dwell {
    height: auto;
    min-height: clamp(520px, 72svh, 650px);
  }
  .dwell-pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: inherit;
    align-content: center;
    padding-top: max(calc(var(--header-h) + var(--s3)), calc(92px + env(safe-area-inset-top)));
    padding-bottom: clamp(64px, 10vh, 88px);
  }
  /* The scroll distance is intentionally removed on phones, so the statement
     arrives resolved rather than flashing through nine words in a few pixels. */
  .dwell .thesis .w { color: var(--on-dark-1); }
  .dwell .thesis mark::after { transform: scaleX(1); }
  .stage-light { padding: clamp(86px, 21vw, 126px) 0; }
  .stage-light .chapter-head { margin-bottom: clamp(48px, 12vw, 68px); }
  .stage-light .chapter-head .label { margin-bottom: var(--s3); }
  .loop li { padding-top: var(--s3); }
  .loop li + li { margin-top: clamp(38px, 10vw, 52px); }
  .loop h3 { margin-bottom: 10px; line-height: 1.12; }
  .loop p { line-height: 1.54; }
  /* The rule is the one part of this that does not scale: 2px under 50px type is
     a hairline, 2px under 29px type is a bar, and it is spending a gap that has
     shrunk with the type. So the leading goes up and the rule comes down — the
     phone sets ten lines with 83px to spare at 375x667, so the leading is free. */
  .thesis { max-width: none; font-size: clamp(27px, 7.8vw, 38px); line-height: 1.34; }
  .thesis mark::after { height: 1.5px; }
  .product-scrub__mobile {
    padding-top: clamp(76px, 18vw, 108px);
    padding-bottom: clamp(78px, 18vw, 112px);
  }
  .product-scrub__mobile-head { margin-bottom: clamp(36px, 9vw, 54px); }
  .product-scrub__mobile-head .label { margin-bottom: var(--s3); }
  .product-scrub__mobile-list .label { margin-bottom: 9px; }
  .product-scrub__mobile-list h3 { min-height: 1.2em; margin-bottom: 12px; line-height: 1.13; }
  .product-scrub__mobile-list p { min-height: 4.55em; margin-bottom: clamp(20px, 5vw, 28px); font-size: 15px; line-height: 1.52; }
  .product-scrub__mobile-list img { width: min(100%, 286px); border-radius: 22px; }
  .product-scrub__status { margin-top: 24px; }

  .stage-close { min-height: max(var(--vvh, 100svh), 720px); }
  .world-field {
    /* Phone: tree shows through the copy zone, then yields to the measured footer. */
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,.55) 0%, #000 18%, #000 100%),
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent max(0px, calc(var(--tree-clear-y, 40%) - 170px)),
        rgba(0,0,0,.28) max(0px, calc(var(--tree-clear-y, 40%) - 110px)),
        rgba(0,0,0,.55) max(0px, calc(var(--tree-clear-y, 40%) - 50px)),
        rgba(0,0,0,.82) max(0px, calc(var(--tree-clear-y, 40%) - 8px)),
        #000 calc(var(--tree-clear-y, 40%) + 16px),
        #000 calc(var(--tree-foot-y, 90%) - 82px),
        rgba(0,0,0,.48) calc(var(--tree-foot-y, 90%) - 42px),
        transparent var(--tree-foot-y, 90%)
      );
    mask-image:
      linear-gradient(to right, rgba(0,0,0,.55) 0%, #000 18%, #000 100%),
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent max(0px, calc(var(--tree-clear-y, 40%) - 170px)),
        rgba(0,0,0,.28) max(0px, calc(var(--tree-clear-y, 40%) - 110px)),
        rgba(0,0,0,.55) max(0px, calc(var(--tree-clear-y, 40%) - 50px)),
        rgba(0,0,0,.82) max(0px, calc(var(--tree-clear-y, 40%) - 8px)),
        #000 calc(var(--tree-clear-y, 40%) + 16px),
        #000 calc(var(--tree-foot-y, 90%) - 82px),
        rgba(0,0,0,.48) calc(var(--tree-foot-y, 90%) - 42px),
        transparent var(--tree-foot-y, 90%)
      );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .close-inner {
    padding-top: max(calc(var(--chrome) + var(--s4)), calc(82px + env(safe-area-inset-top)));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .close-message {
    position: relative;
    z-index: 2;
    width: 100%;
    align-self: start;
    margin-top: 0;
    padding-top: clamp(30px, 6vh, 56px);
    padding-bottom: var(--s4);
    background: transparent;
  }
  /* Light local veil behind type only — keeps glyphs readable over the tree. */
  .close-message::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -12px;
    bottom: 8px;
    left: calc(0px - max(var(--pad), env(safe-area-inset-left)));
    width: min(100%, 22ch);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(8, 8, 10, .22) 0%,
      rgba(8, 8, 10, .16) 70%,
      rgba(8, 8, 10, .06) 100%
    );
  }
  .close-kicker,
  .stage-close h2,
  .close-cta {
    text-shadow: 0 1px 10px rgba(8, 8, 10, .65), 0 0 22px rgba(8, 8, 10, .35);
  }
  /* Soft falloff under the CTA — mostly open to the tree. */
  .close-message::after {
    content: '';
    position: absolute;
    left: calc(0px - max(var(--pad), env(safe-area-inset-left)));
    right: calc(0px - max(var(--pad), env(safe-area-inset-right)));
    top: calc(100% - 4px);
    height: clamp(40px, 8vh, 72px);
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(8, 8, 10, .14) 0%,
      rgba(8, 8, 10, .04) 50%,
      transparent 100%
    );
  }
  .close-kicker { margin-bottom: var(--s3); font-size: 10px; letter-spacing: .13em; }
  .stage-close h2 { max-width: 10.8ch; margin-bottom: var(--s4); font-size: clamp(42px, 12.4vw, 60px); line-height: .94; }
  .stage-close h2 > span { white-space: normal; }
  .stage-close h2 > span:first-child { max-width: 10.8ch; }
  .close-cta { padding-inline: 18px; }
  body[data-page="home"] .site-foot {
    margin-top: clamp(24px, 5vh, 40px);
    padding-top: var(--s3);
  }
  body[data-page="home"] .site-foot-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  body[data-page="home"] .site-foot-links a {
    min-width: 0; min-height: 44px; margin-top: 0;
    justify-self: start;
    align-items: center; justify-content: flex-start;
    white-space: nowrap;
  }
  body[data-page="home"] .site-foot-links a::after {
    top: auto;
    bottom: 7px;
  }
}

/* The closing artwork has its own portrait breakpoint. At 641-700px the page
   is already a single column, so keeping the desktop-side tree geometry creates
   a hybrid layout: full-width copy with a canopy still trying to sit beside it. */
@media (max-width: 700px) {
  /* Copy, tree and footer need distinct vertical bands on a phone. At one
     viewport tall the tree was compressed into a faint 170px emblem between
     the CTA and footer; the extra depth lets the complete crown read. */
  .stage-close { min-height: max(var(--vvh, 100svh), 980px); }
  .close-inner {
    padding-top: max(calc(var(--chrome) + var(--s3)), calc(76px + env(safe-area-inset-top)));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .close-message {
    position: relative;
    z-index: 2;
    width: 100%;
    align-self: start;
    margin-top: 0;
    padding: clamp(24px, 5vh, 40px) 0 var(--s3);
  }
  .close-kicker {
    max-width: 100%;
    margin-bottom: var(--s3);
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: .13em;
  }
  .stage-close h2 {
    max-width: 10.8ch;
    margin-bottom: var(--s4);
    font-size: clamp(42px, 12.4vw, 58px);
    line-height: .94;
  }
  .stage-close h2 > span { white-space: normal; }
  .close-cta { padding-inline: 18px; }

  /* Reveal the canopy only after the action. The canvas still grows as one
     continuous tree; this mask supplies a quiet reading plane for the copy. */
  .world-field {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      transparent max(0px, calc(var(--tree-clear-y, 40%) - 2px)),
      rgba(0,0,0,.3) calc(var(--tree-clear-y, 40%) + 12px),
      rgba(0,0,0,.72) calc(var(--tree-clear-y, 40%) + 36px),
      #000 calc(var(--tree-clear-y, 40%) + 60px),
      #000 calc(var(--tree-foot-y, 90%) - 94px),
      rgba(0,0,0,.48) calc(var(--tree-foot-y, 90%) - 52px),
      transparent var(--tree-foot-y, 90%)
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      transparent max(0px, calc(var(--tree-clear-y, 40%) - 2px)),
      rgba(0,0,0,.3) calc(var(--tree-clear-y, 40%) + 12px),
      rgba(0,0,0,.72) calc(var(--tree-clear-y, 40%) + 36px),
      #000 calc(var(--tree-clear-y, 40%) + 60px),
      #000 calc(var(--tree-foot-y, 90%) - 94px),
      rgba(0,0,0,.48) calc(var(--tree-foot-y, 90%) - 52px),
      transparent var(--tree-foot-y, 90%)
    );
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  body[data-page="home"] .site-foot {
    margin-top: clamp(18px, 3.5vh, 28px);
    padding-top: var(--s3);
    gap: 14px;
  }
  body[data-page="home"] .site-foot-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: 0;
  }
  body[data-page="home"] .site-foot-links a {
    min-width: 0;
    min-height: 44px;
    margin-top: 0;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
  }
  body[data-page="home"] .site-foot-links a::after {
    top: auto;
    bottom: 5px;
  }
}

/* Height, not width, is what the masthead runs out of on a laptop. The type scale
   already answers for itself through the vh bound on --fs-display; this is the
   surrounding air, which does not shrink on its own. */
@media (min-width: 901px) and (max-height: 780px) {
  .stage-hero { padding-top: calc(var(--chrome) + var(--s3)); padding-bottom: calc(var(--s6) + var(--s2)); }
  .hero-lead .label { margin-bottom: var(--s4); }
  .stage-hero h1 { margin-bottom: var(--s4); }
}

@media (min-width: 641px) and (max-height: 720px) {
  .stage-close { min-height: 720px; }
  .stage-close h2 { margin-bottom: var(--s4); font-size: clamp(48px, 8.4vh, 68px); }
  .close-message { padding-block: var(--s3); }
}

@media (min-width: 901px) and (max-height: 720px) {
  .world-field {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        #000 max(12%, calc(var(--tree-clear-y, 28%) - 24px)),
        #000 calc(var(--tree-foot-y, 90%) - 82px),
        rgba(0, 0, 0, .48) calc(var(--tree-foot-y, 90%) - 42px),
        transparent var(--tree-foot-y, 90%)
      );
    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        #000 max(12%, calc(var(--tree-clear-y, 28%) - 24px)),
        #000 calc(var(--tree-foot-y, 90%) - 82px),
        rgba(0, 0, 0, .48) calc(var(--tree-foot-y, 90%) - 42px),
        transparent var(--tree-foot-y, 90%)
      );
  }
}

/* ── reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* A named group would still fly the mark across the viewport under the blanket
     duration override below, because the group's animation is generated rather
     than authored. Dropping the name leaves it to the root cross-fade. */
  .site-header > .wordmark { view-transition-name: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  /* A tall chapter exists only to buy dwell time; without motion it is dead scroll. */
  .dwell { height: auto; }
  .dwell-pin { position: static; height: auto; padding-block: clamp(96px, 18vh, 200px); }
  .reveal { opacity: 1; transform: none; }
  .thesis .w { color: var(--on-dark-1); }
  .thesis mark::after { transform: none; }
  .loop li::before { transform: scaleX(1); }
  .cue span { animation: none; }
  /* Tall height only buys scroll for the scrub; without motion, show the list. */
  .product-scrub { height: auto; }
  .product-scrub__desktop { display: none !important; }
  .product-scrub__mobile { display: block !important; }
}

@media (scripting: none) {
  .site-header { position: absolute; }
  .dwell { height: auto; }
  .dwell-pin { position: static; height: auto; padding-block: clamp(96px, 18vh, 200px); }
  .loop li::before { transform: scaleX(1); }
  .product-scrub { height: auto; }
  .product-scrub__desktop { display: none !important; }
  .product-scrub__mobile { display: block !important; }
  .product-scrub__mobile-list > li {
    --slide-y: 0px;
    --slide-scale: 1;
    --slide-opacity: 1;
    --slide-image-y: 0px;
    --slide-image-scale: 1;
  }
  .product-scrub__status button[aria-selected="true"] i::after { transform: scaleX(1); }
}

/* Without JavaScript the mobile menu cannot become a sheet. Present its links as
   a compact second row instead of leaving a visible button that does nothing. */
@media (scripting: none) and (max-width: 900px) {
  .site-header {
    height: auto; min-height: var(--header-h);
    flex-wrap: wrap; row-gap: 0; padding-bottom: 10px;
  }
  .menu-toggle { display: none; }
  .main-nav {
    position: static; order: 3; flex: 1 0 100%;
    min-height: 36px; padding: 0; gap: 22px;
    flex-direction: row; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-inline: contain;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 12px; letter-spacing: 0;
    visibility: visible; opacity: 1; transform: none;
  }
  .main-nav a { flex: 0 0 auto; padding: 8px 0; opacity: 1; transform: none; }
  .stage-hero { padding-top: max(calc(var(--chrome) + 72px), calc(150px + env(safe-area-inset-top))); }
}

@media (prefers-reduced-transparency: reduce) {
  /* Opaque surfaces, same two stops: the edge still runs through the bar. */
  .site-header { --surface-ink: var(--ink); --surface-paper: var(--paper); }
  .site-header.is-pinned { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .main-nav { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-ground="paper"] .main-nav { background: var(--paper); }
  .grain { display: none; }
}

/* ══ subpage composition ════════════════════════════════════════════════
   Careers, Insight, Company, Security, Terms, Privacy, 404. Reached only
   through .subpage and class names that exist on no other page. */

/* Subpage title motion. Titles rise out of a mask rather than flying in; the
   padding compensates for the overflow clip so descenders are never cut. */
.rise-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.rise-line > span { display: block; animation: line-rise .78s .05s var(--ease-entrance) backwards; }
@keyframes line-rise { from { transform: translateY(108%); } }

/* Shared secondary pages */
.subpage { min-height: 100vh; min-height: 100svh; background: var(--paper); }
.careers-lede { animation: enter-up .68s .12s var(--ease-entrance) backwards; }
.careers-invite { animation: enter-up .68s .18s var(--ease-entrance) backwards; }
.careers-intro .search-pill { animation: enter-up .68s .25s var(--ease-entrance) backwards; }

/* Careers */
/* The light field runs behind the header, so no seam appears at the header's lower edge. */
.careers-hero {
  position: relative;
  padding-top: var(--header-h);
  /* The hand reference is 750:310. At the previous 930px cap, a wide viewport
     produced a 900px-tall drawing inside a ~620px canvas, so both wrists were
     guillotined by the hero boundary. The taller field preserves the horizontal
     reach of the gesture while giving its full lower contour room to resolve. */
  height: calc(clamp(900px, 68vw, 1200px) + var(--header-h));
  overflow: hidden;
  /* The hand study is the colour event. A centred mineral atmosphere gives the
     fingertip contact depth without putting unrelated yellow and blue fields
     behind the artwork. */
  background:
    radial-gradient(ellipse 62% 42% at 50% 76%, rgba(161, 194, 181, .14), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, 0) 44%),
    var(--paper);
}
/* Editorial split rather than a centred text pyramid. The title holds the site's
   left axis; the explanation gets its own shorter reading column. This prevents
   a long centred paragraph from producing arbitrary, tapering line endings as the
   viewport changes, and leaves the hand study a quieter field underneath. */
.careers-intro {
  position: relative; z-index: 4; width: min(100%, var(--measure)); margin: 52px auto 0;
  padding-inline: var(--pad); display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1fr);
  align-items: start; gap: clamp(48px, 7vw, 112px); text-align: left;
}
.careers-intro h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-h1); white-space: nowrap; }
.careers-copy { max-width: 560px; padding-top: .35em; }
.careers-intro p { text-wrap: pretty; }
.careers-lede { margin: 0 0 20px; color: var(--on-light-1); font-size: var(--fs-lede); line-height: 1.5; }
.careers-invite { margin: 0 0 32px; max-width: 52ch; color: var(--on-light-2); font-size: 15px; line-height: 1.62; }
.search-pill { width: 180px; min-height: 44px; margin-inline: 0; border-radius: 999px; padding: 0 16px; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); color-scheme: dark; cursor: text; transform: scale(1); transition: transform var(--dur-base) var(--ease-entrance), box-shadow var(--dur-short) var(--ease-micro); }
.search-pill:focus-within { box-shadow: 0 0 0 3px var(--signal); transform: scale(1.025); }
.search-pill input { min-width: 0; width: 100%; border: 0; outline: 0; appearance: none; background: transparent; color: #fff; font: 500 var(--fs-small)/1 var(--sans); }
.search-pill input::placeholder { color: rgba(255, 255, 255, .66); opacity: 1; }
/* Drawn, not typed. U+2315 is a telephone-recorder glyph pressed into service as a
   magnifier: Manrope has no such codepoint, so every platform substituted a
   different fallback face and the mark changed shape from machine to machine. */
.search-glyph { flex: 0 0 auto; display: flex; transform: rotate(0); transition: transform var(--dur-base) var(--ease-entrance); }
.search-pill:focus-within .search-glyph { transform: rotate(-18deg) scale(1.08); }
/* The canvas begins below the full two-column introduction. Earlier it started at
   220px and silently sat underneath the second paragraph and search control. */
#careers-canvas { position: absolute; inset: calc(310px + var(--header-h)) 0 0; width: 100%; height: calc(100% - 310px - var(--header-h)); }
/* NOTE: a .collision-hint pill used to be styled here — a label that appeared at
   the fingertip when the pointer found it. No page has ever contained the element,
   so the rule, the --contact-x/--contact-y the canvas computed for it, and the
   .is-near-contact state that switched it were three pieces of machinery driving
   nothing. Restoring the hint needs one <div class="collision-hint"> in the hero
   and a line of copy; until then the fingertip's only feedback is its own burst. */
.roles { min-height: 820px; padding: 120px var(--pad) 180px; }
.roles-heading { margin-bottom: 72px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.roles h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: var(--tr-h2); }
/* 11px, the site's label step. At 12 it belonged to no scale — one pixel from the
   labels above it and one from the links beside it. */
.roles-heading p { margin: 0; color: var(--on-light-3); font-size: var(--fs-label); letter-spacing: .04em; }
.role-group { margin-top: 57px; }
.role-group > p { margin: 0 0 25px; color: var(--on-light-2); font-size: var(--fs-lede); }
/* The rows are the application. Each is a real mail link, using the same contact
   action as the homepage footer; swap the href for an applicant-tracking URL when
   there is one. */
.role {
  position: relative; display: grid; grid-template-columns: 1.8fr .8fr auto;
  align-items: baseline; column-gap: 20px;
  padding: 25px 0; border-top: 1px solid var(--paper-line); font-size: 17px;
  min-width: 0;
  transition: color var(--dur-micro) var(--ease-micro), border-color var(--dur-micro) var(--ease-micro);
}
.role:last-child { border-bottom: 1px solid var(--paper-line); }
.role span { min-width: 0; overflow-wrap: anywhere; }
/* The rule above the row darkens on hover, matching the loop steps on the home
   page — structure drawn with a hairline, no card, no fill. */
.role::before {
  content: ''; position: absolute; inset: -1px 0 auto; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-move);
}
/* Always present, never revealed. A list whose entire purpose is to be clicked
   should not hide the fact until a pointer arrives — that reads as a discovery on a
   desktop and as nothing at all on a phone, which is where most of these rows are
   read. Hover adds emphasis to something already legible. */
.role-go {
  justify-self: end; text-align: right;
  color: var(--on-light-3); font-size: var(--fs-small); font-weight: 600;
  transition: color var(--dur-micro) var(--ease-micro), transform var(--dur-short) var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .role:hover::before { transform: scaleX(1); }
  .role:hover .role-go { color: var(--ink); transform: translateX(2px); }
}
.role:focus-visible::before { transform: scaleX(1); }
.role:focus-visible .role-go { color: var(--ink); }
.no-results { margin: 60px 0 0; color: var(--on-light-2); }

/* Insight */
.insight-page {
  /* Editorial paper, not a decorative colour wash. The former yellow/blue fields
     covered most of the viewport and competed with the article artwork. A quiet
     mineral-green atmosphere now supports the brand without reading as a gradient. */
  background:
    radial-gradient(ellipse 74% 48% at 108% 14%, rgba(161, 194, 181, .12), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 42%),
    var(--paper);
  background-attachment: scroll;
}
.insight-wrap { padding: calc(var(--header-h) + 105px) var(--pad) 150px; }
/* The 110px below the title was there because nothing followed it: the press page
   opened on a one-word heading and went straight into cards, with no line saying
   whose announcements these are, and no route for a journalist to reach anyone.
   Careers states its case in a paragraph before it lists; this page now does too,
   so the two read as the same publication. */
.insight-wrap h1 { margin: 0 0 34px; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-h1); }
.insight-belief { margin: 0 0 22px; max-width: 24ch; color: var(--on-light-1); font-size: clamp(28px, 3vw, 42px); font-weight: 510; letter-spacing: -.045em; line-height: 1.07; text-wrap: balance; animation: enter-up .68s .1s var(--ease-entrance) backwards; }
.insight-lede { margin: 0 0 44px; max-width: 72ch; color: var(--on-light-2); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.58; text-wrap: pretty; animation: enter-up .68s .16s var(--ease-entrance) backwards; }
.insight-lede a { color: var(--on-light-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-micro) var(--ease-micro); }
.insight-lede a:hover { text-decoration-thickness: 2px; }
.insight-filters { margin: 0 0 82px; display: flex; flex-wrap: wrap; gap: 8px; animation: enter-up .68s .22s var(--ease-entrance) backwards; }
.insight-filters button {
  min-height: 44px; padding: 9px 15px; border: 1px solid var(--paper-line); border-radius: 999px;
  background: rgba(247,248,247,.48); color: var(--on-light-2); cursor: pointer;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: -.005em;
  transition: color var(--dur-short) linear, background-color var(--dur-short) var(--ease-micro), border-color var(--dur-short) var(--ease-micro), transform var(--dur-micro) var(--ease-micro);
}
.insight-filters button span { margin-left: 6px; color: var(--on-light-3); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.insight-filters button:hover { border-color: rgba(8,8,10,.32); color: var(--on-light-1); }
.insight-filters button:active { transform: scale(.97); }
.insight-filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.insight-filters button[aria-pressed="true"] span { color: rgba(255,255,255,.62); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 75px 24px; }
.insight-grid-editorial { grid-template-columns: repeat(2, 1fr); }
.insight-grid article { min-width: 0; }
.insight-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1.92; border-radius: 9px; background: var(--ink); color: inherit; text-decoration: none; isolation: isolate; cursor: pointer; }
/* height:auto is required — the intrinsic `height` attribute would otherwise win over aspect-ratio. */
.insight-grid article img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 900ms var(--ease-entrance), filter 600ms var(--ease-move); }
.insight-media::after { content: ''; position: absolute; z-index: 1; inset: -35%; pointer-events: none; background: linear-gradient(112deg, transparent 35%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.018) 55%, transparent 68%); opacity: 0; transform: translateX(-42%) rotate(2deg); transition: opacity var(--dur-short) linear, transform 900ms var(--ease-entrance); }
.insight-grid article p { position: relative; display: flex; flex-wrap: wrap; gap: 4px 9px; margin: 14px 0 20px; padding-left: 0; color: var(--on-light-3); font-size: var(--fs-label); font-variant-numeric: tabular-nums; transition: color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance), padding-left var(--dur-base) var(--ease-move); }
.insight-grid .insight-type { padding-left: 9px; border-left: 1px solid var(--paper-line); color: var(--on-light-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.insight-grid article p::before { content: ''; position: absolute; left: 0; top: .65em; width: 18px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-move); }
.insight-grid article h2 { margin: 0; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.35; letter-spacing: -.025em; font-weight: 500; transition: transform var(--dur-base) var(--ease-entrance); }
.insight-grid article h2 a { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: start; gap: clamp(14px, 2vw, 24px); color: inherit; text-decoration: none; }
.insight-grid article h2 a::after { content: ''; width: 28px; height: 28px; margin-top: 1px; border: 1px solid rgba(8,8,10,.18); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2308080a' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5'/%3E%3C/svg%3E") center / 15px no-repeat; opacity: .58; transition: opacity var(--dur-short) linear, border-color var(--dur-short) linear, background-color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.insight-grid article h2 a[target="_blank"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2308080a' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5M6 4.5h5.5V10'/%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) {
  .insight-grid article:hover img { transform: scale(1.025); filter: saturate(1.04) contrast(1.018); }
  .insight-grid article:hover .insight-media::after { opacity: 1; transform: translateX(42%) rotate(2deg); }
  .insight-grid article:hover p { padding-left: 27px; color: var(--on-light-2); transform: translateX(2px); }
  .insight-grid article:hover p::before { transform: scaleX(1); }
  .insight-grid article:hover h2 { transform: translateY(-1px); }
  .insight-grid article:hover h2 a::after { opacity: 1; border-color: var(--ink); background-color: rgba(8,8,10,.035); transform: translateX(3px); }
  .insight-grid article:hover h2 a[target="_blank"]::after { transform: translate(2px, -2px); }
}
.insight-grid article:has(:is(.insight-media, h2 a):focus-visible) img { transform: scale(1.018); filter: saturate(1.03) contrast(1.015); }
.insight-grid article:has(:is(.insight-media, h2 a):focus-visible) p { padding-left: 27px; color: var(--on-light-2); }
.insight-grid article:has(:is(.insight-media, h2 a):focus-visible) p::before { transform: scaleX(1); }
.insight-grid article h2 a:focus-visible::after { opacity: 1; border-color: var(--ink); }
.insight-grid :is(.insight-media, h2 a):focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
/* The primary NADA perspective runs full width as a lead. All remaining stories
   resolve into a stable two-column editorial field. */
.insight-grid article.insight-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; align-items: end; gap: 0 40px; }
.insight-grid article.insight-lead .insight-media { grid-row: span 2; aspect-ratio: 2.4; }
.insight-grid article.insight-lead p { align-self: end; margin-bottom: 14px; }
.insight-grid article.insight-lead h2 { font-size: clamp(20px, 2vw, 32px); line-height: 1.22; letter-spacing: -.03em; }

/* Company */
.company-page { background: var(--paper); }
.company-page :where(h1, h2, h3) { text-wrap: balance; }
.company-page :where(p) { text-wrap: pretty; }
.company-wrap { padding-top: calc(var(--header-h) + clamp(84px, 7.5vw, 108px)); padding-bottom: clamp(24px, 3vw, 40px); }
.company-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(380px, .84fr); align-items: end; gap: clamp(64px, 8vw, 124px); padding-bottom: clamp(90px, 7.6vw, 112px); }
.company-hero-title { position: relative; min-width: 0; }
.company-hero-title .company-eyebrow { margin-bottom: 24px; animation: enter-up .68s .04s var(--ease-entrance) backwards; }
.company-hero h1 { margin: 0; max-width: 10.4ch; font-size: clamp(48px, 6.15vw, 88px); line-height: .94; letter-spacing: -.061em; }
.company-hero-copy { position: relative; max-width: 56ch; padding-left: clamp(24px, 3vw, 42px); border-left: 1px solid var(--paper-line); animation: enter-up .68s .12s var(--ease-entrance) backwards; }
.company-hero-copy::before { content: ''; position: absolute; top: 0; left: -1px; width: 1px; height: 64px; background: var(--signal-ink); }
.company-hero-copy p { margin: 0; color: var(--on-light-1); font-size: var(--fs-lede); line-height: 1.52; }
.company-hero-copy p + p { margin-top: 20px; color: var(--on-light-2); font-size: var(--fs-body); line-height: 1.66; }
.company-facts { margin: 0; padding: 0; display: grid; grid-template-columns: 1.26fr .72fr .74fr 1.36fr .72fr 1.18fr; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.company-facts > div { min-width: 0; min-height: 112px; padding: 23px clamp(14px, 1.65vw, 24px) 24px; border-left: 1px solid var(--paper-line-soft); }
.company-facts > div:first-child { padding-left: 0; border-left: 0; }
.company-facts > div:last-child { padding-right: 0; }
.company-facts dt, .company-eyebrow { margin: 0 0 12px; color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; }
.company-eyebrow { display: flex; align-items: center; gap: 10px; }
.company-section-index { min-width: 19px; color: var(--signal-ink); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.company-facts dd { margin: 0; color: var(--on-light-1); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.company-facts a { display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-short) linear, text-decoration-thickness var(--dur-short) linear; }
.company-facts a:hover, .company-facts a:focus-visible { color: var(--signal-ink); text-decoration-thickness: 2px; }
.company-belief { position: relative; isolation: isolate; margin-top: clamp(104px, 9vw, 132px); padding: clamp(76px, 7vw, 100px) 0 clamp(68px, 6vw, 86px); background: var(--ink); color: var(--paper); }
.company-belief::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--ink); }
.company-belief::after { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: 1px; background: linear-gradient(to right, var(--signal) 0 56px, rgba(255,255,255,.12) 56px 100%); }
.company-belief .company-eyebrow { margin-bottom: clamp(44px, 5vw, 64px); color: var(--on-dark-3); }
.company-belief .company-section-index { color: var(--signal); }
.company-belief-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); align-items: start; gap: clamp(48px, 7vw, 112px); }
.company-belief h2 { margin: 0; max-width: 10.5ch; color: var(--paper); font-size: clamp(38px, 4.6vw, 66px); line-height: .99; letter-spacing: -.052em; }
.company-belief-copy { max-width: 50ch; }
.company-belief-copy p { margin: 0; color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.72; }
.company-belief-copy p + p { margin-top: 20px; }
.company-belief-copy a, .company-product-link, .company-principles-link { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14px; font-weight: 650; }
.company-belief-copy a { color: var(--paper); }
.company-belief :where(a):focus-visible { outline-color: var(--signal); }
.company-belief-copy a:hover .ui-arrow, .company-belief-copy a:focus-visible .ui-arrow,
.company-product-link:hover .ui-arrow, .company-product-link:focus-visible .ui-arrow,
.company-principles-link:hover .ui-arrow, .company-principles-link:focus-visible .ui-arrow { transform: translateX(4px); }
.company-belief-copy a:hover .ui-arrow-external, .company-belief-copy a:focus-visible .ui-arrow-external,
.company-product-link:hover .ui-arrow-external, .company-product-link:focus-visible .ui-arrow-external { transform: translate(2px, -2px); }
.company-belief-copy a .ui-arrow, .company-product-link .ui-arrow, .company-principles-link .ui-arrow { transition: transform var(--dur-base) var(--ease-entrance); }
.company-belief-signal { margin-top: clamp(58px, 6vw, 78px); display: grid; grid-template-columns: auto minmax(26px, 1fr) auto minmax(26px, 1fr) auto minmax(26px, 1fr) auto; align-items: center; gap: clamp(10px, 1.5vw, 18px); color: var(--on-dark-3); font-size: 9px; font-weight: 700; letter-spacing: .13em; line-height: 1; text-transform: uppercase; }
.company-belief-signal span:last-child { color: var(--paper); }
.company-belief-signal i { position: relative; height: 1px; overflow: visible; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,255,81,.5)); transform-origin: left; }
.company-belief-signal i::after { content: ''; position: absolute; top: 50%; right: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px rgba(0,255,81,.42); transform: translate(50%, -50%); }
.company-section { padding-top: clamp(108px, 9.5vw, 140px); }
.company-section > h2, .company-product h2, .company-principles h2, .company-next h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: var(--tr-h2); }
.company-section-intro { display: grid; grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr); align-items: end; gap: clamp(48px, 7vw, 104px); margin-bottom: clamp(64px, 6vw, 82px); }
.company-section-intro h2 { margin: 0; max-width: 11ch; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: var(--tr-h2); }
.company-statement { margin: 0; max-width: 54ch; color: var(--on-light-2); font-size: var(--fs-lede); line-height: 1.58; }
.company-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--paper-line-soft); }
.company-pillars article { position: relative; min-height: 250px; padding: 29px clamp(28px, 3vw, 46px) 36px; border-top: 1px solid var(--paper-line); }
.company-pillars article:first-child { padding-left: 0; }
.company-pillars article + article { border-left: 1px solid var(--paper-line-soft); }
.company-pillars article:last-child { padding-right: 0; }
/* A single signal moves across the three layers without introducing another
   illustration. Each marker is decorative; the semantic articles remain real. */
.company-pillars article::before {
  content: ''; position: absolute; top: -1px; left: 0; transform-origin: left;
  width: clamp(34px, 4vw, 56px); height: 1px; background: var(--signal-ink);
  transition: width var(--dur-long) var(--ease-entrance), transform var(--dur-long) var(--ease-entrance), opacity var(--dur-short) linear;
}
.company-pillars article::after {
  content: ''; position: absolute; top: -3px; left: clamp(32px, calc(4vw - 2px), 54px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--signal-ink);
  box-shadow: 0 0 10px rgba(10, 122, 46, .18);
  transition: left var(--dur-long) var(--ease-entrance), opacity var(--dur-base) linear, transform var(--dur-long) var(--ease-entrance);
}
.company-pillars article:nth-child(2)::before, .company-pillars article:nth-child(2)::after { opacity: .68; }
.company-pillars article:nth-child(3)::before, .company-pillars article:nth-child(3)::after { opacity: .42; }
.company-pillars article > p:first-child { margin: 0 0 52px; color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); }
.company-pillars h3 { margin: 0 0 17px; max-width: 12ch; font-size: var(--fs-h3); line-height: 1.18; letter-spacing: var(--tr-h3); transition: transform var(--dur-base) var(--ease-entrance); }
.company-pillars article > p:last-child { margin: 0; max-width: 38ch; color: var(--on-light-2); font-size: 15px; line-height: 1.62; }
.company-product { margin-top: clamp(116px, 10.5vw, 152px); padding: 46px 0 58px; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); align-items: start; gap: clamp(56px, 7.5vw, 112px); }
.company-product-head h2 { max-width: 10ch; }
.company-product-proof {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1.42;
  margin: clamp(42px, 5vw, 64px) 0 0;
  overflow: hidden;
  border: 1px solid rgba(8,8,10,.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 34%, rgba(0,255,81,.12), transparent 29%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(231,233,232,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 28px 70px rgba(8,8,10,.07);
  isolation: isolate;
}
.company-product-proof::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(48% - 3px);
  left: 9%;
  width: 82%;
  height: 7px;
  background:
    radial-gradient(circle at 10% 50%, var(--signal-ink) 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 50%, rgba(10,122,46,.6) 0 3px, transparent 3.5px),
    radial-gradient(circle at 90% 50%, rgba(10,122,46,.34) 0 3px, transparent 3.5px),
    linear-gradient(90deg, transparent, rgba(8,8,10,.14) 16% 84%, transparent) center / 100% 1px no-repeat;
}
.company-product-shot {
  position: absolute;
  min-width: 0;
  overflow: hidden;
  width: 31.2%;
  height: auto;
  aspect-ratio: 780 / 1688;
  border: 1px solid rgba(8,8,10,.72);
  border-radius: 16px;
  background: #0c0c0f;
  box-shadow: 0 22px 48px rgba(8,8,10,.18), 0 3px 9px rgba(8,8,10,.12), inset 0 0 0 1px rgba(255,255,255,.16);
  transform-origin: center bottom;
  transition: transform 680ms var(--ease-entrance), border-color var(--dur-short) linear, box-shadow 680ms var(--ease-entrance), filter var(--dur-base) linear;
}
.company-product-shot-play { z-index: 1; top: 2.5%; left: 3.5%; transform: rotate(-2.7deg) scale(.94); }
.company-product-shot-create { z-index: 3; top: 2%; left: 34.4%; transform: scale(1); }
.company-product-shot-continue { z-index: 2; top: 2.5%; right: 3.5%; transform: rotate(2.7deg) scale(.94); }
.company-product-proof img { width: 100%; height: 100%; object-fit: contain; }
.company-product-shot > span {
  position: absolute;
  left: 10px;
  bottom: 9px;
  min-height: 25px;
  padding: 0 10px 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(8,8,10,.76);
  color: rgba(255,255,255,.82);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.company-product-shot > span b { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--signal); color: #071008; font-size: 7px; font-weight: 800; letter-spacing: 0; }
.company-product-proof figcaption {
  position: absolute;
  z-index: 5;
  right: 15px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(8,8,10,.48);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
.company-product-proof figcaption span { position: static; width: 18px; height: 1px; padding: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, var(--signal-ink), rgba(10,122,46,.16)); }
.company-product-copy { padding-top: 2px; }
.company-product-copy > p { margin: 0 0 38px; max-width: 48ch; color: var(--on-light-2); font-size: var(--fs-lede); line-height: 1.58; }
.company-product-loop { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--paper-line); }
.company-product-loop li { position: relative; min-height: 94px; display: grid; grid-template-columns: 42px minmax(88px, .34fr) minmax(0, 1fr); align-items: start; gap: 18px; padding: 22px 10px 22px 0; border-bottom: 1px solid var(--paper-line); transition: background-color var(--dur-short) linear, padding-left var(--dur-base) var(--ease-entrance); }
.company-product-loop li::before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -14px; right: -14px; z-index: -1; border-radius: 5px; background: rgba(8,8,10,.025); opacity: 0; transition: opacity var(--dur-short) linear; }
.company-product-loop li > span { color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); transition: color var(--dur-short) linear; }
.company-product-loop strong { color: var(--on-light-1); font-size: 15px; font-weight: 650; transition: transform var(--dur-base) var(--ease-entrance); }
.company-product-loop p { margin: -2px 0 0; color: var(--on-light-2); font-size: 14px; line-height: 1.55; }
.company-product-link, .company-principles-link { color: var(--on-light-1); }
.company-principles { margin-top: clamp(116px, 10.5vw, 152px); }
.company-principles-head { display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); align-items: end; gap: clamp(56px, 7.5vw, 112px); margin-bottom: clamp(58px, 5.5vw, 72px); }
.company-principles-head .company-eyebrow { margin-bottom: 0; }
.company-principle-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--paper-line); }
.company-principle-list li { position: relative; display: grid; grid-template-columns: 72px minmax(230px, .72fr) minmax(0, 1fr) 24px; align-items: start; gap: clamp(24px, 3.5vw, 54px); padding: 32px 8px 35px 0; border-bottom: 1px solid var(--paper-line); transition: background-color var(--dur-short) linear, padding-left var(--dur-base) var(--ease-entrance); }
.company-principle-list li::after { content: ''; justify-self: end; width: 6px; height: 6px; margin-top: 3px; border: 1px solid var(--paper-line); border-radius: 50%; transition: border-color var(--dur-short) linear, background-color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.company-principle-list span { color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); transition: color var(--dur-short) linear; }
.company-principle-list h3 { margin: -4px 0 0; color: var(--on-light-1); font-size: clamp(20px, 2vw, 27px); line-height: 1.22; letter-spacing: -.035em; transition: transform var(--dur-base) var(--ease-entrance); }
.company-principle-list p { margin: -2px 0 0; max-width: 48ch; color: var(--on-light-2); font-size: 15px; line-height: 1.62; }
.company-next { margin-top: clamp(116px, 10.5vw, 152px); padding-top: 34px; border-top: 1px solid var(--paper-line); display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); gap: clamp(48px, 7.5vw, 112px); }
.company-next h2 { max-width: 9ch; }
.company-next nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.company-next nav a { min-height: 94px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; border: 1px solid var(--paper-line); border-radius: 10px; color: var(--on-light-2); font-size: 14px; transition: color var(--dur-short) linear, border-color var(--dur-short) linear, background-color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance), box-shadow var(--dur-base) var(--ease-entrance); }
.company-next nav a > span { min-width: 0; display: block; transition: color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.company-next nav small { display: block; margin-bottom: 10px; color: var(--on-light-3); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: color var(--dur-short) linear; }
.company-next nav .company-next-primary { grid-column: 1 / -1; min-height: 116px; padding: 24px 26px; border-color: var(--ink); background: var(--ink); color: var(--paper); font-size: clamp(19px, 1.8vw, 25px); font-weight: 560; letter-spacing: -.03em; }
.company-next nav .company-next-primary small { color: var(--on-dark-3); font-size: 9px; letter-spacing: .13em; }
.company-next nav .company-next-primary > .ui-arrow { width: 22px; height: 22px; color: var(--signal); }
.company-next nav a > .ui-arrow { width: 18px; height: 18px; color: var(--on-light-3); transition: color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.company-next nav a:hover, .company-next nav a:focus-visible { color: var(--on-light-1); border-color: rgba(8,8,10,.3); background: rgba(8,8,10,.025); transform: translateY(-2px); }
.company-next nav .company-next-primary:hover, .company-next nav .company-next-primary:focus-visible { border-color: var(--ink); background: var(--ink-raise); color: var(--paper); box-shadow: 0 18px 46px rgba(8,8,10,.14); }
.company-next nav a:hover > span:first-child, .company-next nav a:focus-visible > span:first-child { transform: translateX(5px); }
.company-next nav a:hover > .ui-arrow, .company-next nav a:focus-visible > .ui-arrow { color: var(--signal-ink); transform: translateX(3px); }
.company-next nav a:hover > .ui-arrow-external, .company-next nav a:focus-visible > .ui-arrow-external { transform: translate(2px, -2px); }

@media (hover: hover) and (pointer: fine) {
  .company-pillars article:hover::before { width: 76px; }
  .company-pillars article:hover::after { left: 74px; opacity: 1; }
  .company-pillars article:hover h3 { transform: translateX(3px); }
  .company-product-loop li:hover { padding-left: 8px; }
  .company-product-loop li:hover::before { opacity: 1; }
  .company-product-loop li:hover > span, .company-principle-list li:hover > span { color: var(--signal-ink); }
  .company-product-loop li:hover strong, .company-principle-list li:hover h3 { transform: translateX(3px); }
  .company-principle-list li:hover { padding-left: 8px; }
  .company-principle-list li:hover::after { border-color: var(--signal-ink); background: var(--signal-ink); transform: scale(1.12); }
  .company-product-proof:hover .company-product-shot { filter: saturate(.88) brightness(.9); }
  .company-product-proof .company-product-shot:hover { z-index: 4; border-color: rgba(8,8,10,.92); filter: none; box-shadow: 0 30px 70px rgba(8,8,10,.24), 0 4px 12px rgba(8,8,10,.14); }
  .company-product-proof .company-product-shot-play:hover { transform: translate(-4px, -5px) rotate(-1deg) scale(.97); }
  .company-product-proof .company-product-shot-create:hover { transform: translateY(-5px) scale(1.015); }
  .company-product-proof .company-product-shot-continue:hover { transform: translate(4px, -5px) rotate(1deg) scale(.97); }
  .company-product:has(.company-product-loop li:nth-child(1):hover) .company-product-shot:not(.company-product-shot-play),
  .company-product:has(.company-product-loop li:nth-child(2):hover) .company-product-shot:not(.company-product-shot-create),
  .company-product:has(.company-product-loop li:nth-child(4):hover) .company-product-shot:not(.company-product-shot-continue) { filter: saturate(.82) brightness(.82); }
  .company-product:has(.company-product-loop li:nth-child(1):hover) .company-product-shot-play { z-index: 4; transform: translate(-4px, -5px) rotate(-1deg) scale(.97); }
  .company-product:has(.company-product-loop li:nth-child(2):hover) .company-product-shot-create { z-index: 4; transform: translateY(-5px) scale(1.015); }
  .company-product:has(.company-product-loop li:nth-child(4):hover) .company-product-shot-continue { z-index: 4; transform: translate(4px, -5px) rotate(1deg) scale(.97); }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .company-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .company-facts > div { min-height: 104px; border-bottom: 1px solid var(--paper-line); }
  .company-facts > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .company-facts > div:nth-child(3n) { padding-right: 0; }
}

.company-page.motion-ready .reveal-item { --reveal-distance: 12px; transition-duration: 420ms, 640ms; }
.company-page.motion-ready .company-belief-signal.reveal-item i { transform: scaleX(0); }
.company-page.motion-ready .company-belief-signal.reveal-item.is-revealed i { transform: scaleX(1); transition: transform 760ms var(--ease-entrance); }
.company-page.motion-ready .company-belief-signal.reveal-item.is-revealed i:nth-of-type(2) { transition-delay: 100ms; }
.company-page.motion-ready .company-belief-signal.reveal-item.is-revealed i:nth-of-type(3) { transition-delay: 200ms; }
.company-page.motion-ready .company-pillars article.reveal-item::before { transform: scaleX(0); }
.company-page.motion-ready .company-pillars article.reveal-item::after { opacity: 0; transform: scale(.45); }
.company-page.motion-ready .company-pillars article.reveal-item.is-revealed::before { transform: scaleX(1); }
.company-page.motion-ready .company-pillars article.reveal-item.is-revealed::after { opacity: 1; transform: scale(1); }

/* Perspective */
.perspective-page { background: var(--paper); }
.perspective-wrap { padding-top: calc(var(--header-h) + 72px); padding-bottom: 24px; }
.perspective-hero { max-width: 1080px; }
.perspective-back { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 54px; color: var(--on-light-2); font-size: var(--fs-small); transition: color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.perspective-back:hover, .perspective-back:focus-visible { color: var(--on-light-1); transform: translateX(-3px); }
.perspective-type { margin: 0 0 20px; color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; animation: enter-up .68s .08s var(--ease-entrance) backwards; }
.perspective-hero h1 { margin: 0; max-width: 14ch; font-size: clamp(42px, 6.2vw, 88px); line-height: .98; letter-spacing: -.055em; animation: enter-up .72s .12s var(--ease-entrance) backwards; }
.perspective-deck { margin: 42px 0 34px; max-width: 64ch; color: var(--on-light-2); font-size: var(--fs-lede); line-height: 1.52; animation: enter-up .68s .18s var(--ease-entrance) backwards; }
.perspective-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--on-light-3); font-size: var(--fs-label); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; animation: enter-up .68s .24s var(--ease-entrance) backwards; }
.perspective-meta > * + * { position: relative; }
.perspective-meta > * + *::before { content: ''; position: absolute; top: .58em; left: -14px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.perspective-cover { margin: 96px 0 132px; overflow: hidden; border-radius: 12px; background: var(--ink); }
.perspective-cover img { width: 100%; height: auto; aspect-ratio: 2048 / 942; object-fit: cover; }
.perspective-layout { display: grid; grid-template-columns: minmax(160px, 232px) minmax(0, 64ch); justify-content: center; align-items: start; column-gap: clamp(48px, 7vw, 104px); }
.perspective-aside { position: sticky; top: calc(var(--header-h) + 30px); padding-top: 17px; border-top: 1px solid var(--paper-line); }
.perspective-aside p { margin: 0 0 14px; color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; }
.perspective-aside strong { display: block; color: var(--on-light-2); font-size: 14px; font-weight: 500; line-height: 1.55; letter-spacing: -.01em; }
.perspective-content { min-width: 0; }
.perspective-standfirst { margin: 0; color: var(--on-light-1); font-size: clamp(21px, 1.72vw, 26px); line-height: 1.48; letter-spacing: -.025em; }
.perspective-content section { padding-top: 92px; }
.perspective-content h2 { margin: 0 0 28px; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.08; letter-spacing: var(--tr-h2); }
.perspective-content section > p { margin: 0 0 24px; color: var(--on-light-1); font-size: var(--fs-body); line-height: 1.72; }
.perspective-content a { text-decoration: underline; text-decoration-color: var(--on-light-3); text-decoration-thickness: 1px; text-underline-offset: .16em; transition: color var(--dur-micro) var(--ease-micro), text-decoration-color var(--dur-micro) var(--ease-micro); }
.perspective-content a:hover { color: var(--signal-ink); text-decoration-color: currentColor; }
.perspective-content blockquote { margin: 52px 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--signal); }
.perspective-content blockquote p { margin: 0; color: var(--on-light-1); font-size: clamp(22px, 2vw, 31px); font-weight: 500; line-height: 1.34; letter-spacing: -.035em; }
.perspective-next { margin-top: 144px; padding-top: 22px; border-top: 1px solid var(--paper-line); display: grid; grid-template-columns: minmax(150px, 232px) minmax(0, 1fr); gap: clamp(48px, 7vw, 104px); }
.perspective-next > span { color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; }
.perspective-next a { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; color: var(--on-light-1); }
.perspective-next strong { font-size: clamp(25px, 3vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: var(--tr-h2); transition: transform var(--dur-base) var(--ease-entrance); }
.perspective-next a > .ui-arrow { width: 25px; height: 25px; transition: transform var(--dur-base) var(--ease-entrance); }
.perspective-next a:hover strong, .perspective-next a:focus-visible strong { transform: translateX(5px); }
.perspective-next a:has(> .ui-arrow-left):hover strong,
.perspective-next a:has(> .ui-arrow-left):focus-visible strong { transform: translateX(-5px); }
.perspective-next a:hover > .ui-arrow, .perspective-next a:focus-visible > .ui-arrow { transform: translateX(5px); }
.perspective-next a:hover > .ui-arrow-left, .perspective-next a:focus-visible > .ui-arrow-left { transform: translateX(-5px); }

/* Boopy design story: the character work needs more visual cadence than an essay,
   but it still sits inside the same editorial reading column. Every image keeps
   its natural proportion; the paper or ink field belongs to the article layout,
   not to a destructive crop of the source art. */
.boopy-story-page .perspective-hero { max-width: 1160px; }
.boopy-story-page .perspective-hero h1 { max-width: 15ch; }
.boopy-story-page .perspective-layout { grid-template-columns: minmax(180px, 220px) minmax(0, 960px); column-gap: clamp(52px, 6vw, 96px); }
.boopy-story-content > .perspective-standfirst,
.boopy-story-content > section { width: min(100%, 64ch); margin-inline: auto; }
.boopy-story-content > section { scroll-margin-top: calc(var(--header-h) + 28px); }
.boopy-story-index > p { margin-bottom: 10px; }
.boopy-story-index nav { margin-bottom: 24px; padding-bottom: 18px; display: grid; border-bottom: 1px solid var(--paper-line); }
.boopy-story-index nav a { min-height: 33px; padding: 7px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; color: var(--on-light-3); font-size: 12px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.boopy-story-index nav a span { color: inherit; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: .08em; opacity: .62; }
.boopy-story-index nav a:hover,
.boopy-story-index nav a:focus-visible { color: var(--on-light-1); transform: translateX(3px); }
.boopy-story-index nav a.is-active { color: var(--signal-ink); }
.boopy-story-index nav a.is-active span { opacity: 1; }
.boopy-story-index { transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-entrance); }
.boopy-story-index.is-past-story { opacity: 0; pointer-events: none; transform: translateY(-12px); }
.boopy-story-role > span { display: block; margin-bottom: 10px; color: var(--on-light-3); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.boopy-story-role strong { font-size: 12px; line-height: 1.52; }
.boopy-cover { position: relative; margin-top: 84px; margin-bottom: 112px; }
.boopy-cover::after { content: ''; position: absolute; inset: 58% 0 0; background: linear-gradient(180deg, transparent, rgba(3,17,9,.52)); pointer-events: none; }
.boopy-cover figcaption { position: absolute; z-index: 1; right: 22px; bottom: 18px; color: rgba(255,255,255,.68); font-size: var(--fs-label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.boopy-story-content > section { padding-top: 78px; }
.boopy-story-content > figure { margin: 52px 0 8px; }
.boopy-story-content > figure figcaption { color: var(--on-light-3); font-size: 12px; line-height: 1.58; }
.boopy-story-content section > .boopy-section-label,
.boopy-community-intro .boopy-community-kicker,
.boopy-sticker-intro .boopy-community-kicker { margin: 0 0 14px; color: var(--signal-ink); font-size: 10px; font-weight: 750; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.boopy-motion { padding: clamp(22px, 4vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, .5fr); align-items: end; gap: clamp(22px, 4vw, 34px); overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 36% 38%, rgba(0,255,81,.13), transparent 34%), #07120b; }
.boopy-motion-stage { display: grid; place-items: center; }
.boopy-motion video { display: block; width: min(100%, 292px); aspect-ratio: 9 / 16; border-radius: 10px; background: #d9d9d9; box-shadow: 0 28px 70px rgba(0,0,0,.38); object-fit: cover; }
.boopy-motion figcaption { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; color: var(--on-dark-3) !important; }
.boopy-motion figcaption strong { color: var(--paper); font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
.boopy-motion figcaption span { max-width: 22ch; }
.boopy-design-evolution { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 18px; }
.boopy-design-evolution > article { min-width: 0; }
.boopy-design-evolution-image { min-width: 0; overflow: hidden; aspect-ratio: 10 / 9; border: 1px solid var(--paper-line); border-radius: 12px; background: #d2d4d3; }
.boopy-design-evolution-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.boopy-design-evolution article > p:first-of-type { margin: 16px 2px 0; color: var(--signal-ink); font-size: 9px; font-weight: 750; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.boopy-design-evolution article > p:first-of-type span { margin-right: 5px; color: var(--on-light-3); font-variant-numeric: tabular-nums; }
.boopy-design-evolution h3 { margin: 8px 2px 0; color: var(--on-light-1); font-size: clamp(19px, 1.8vw, 24px); font-weight: 520; letter-spacing: -.035em; line-height: 1.12; }
.boopy-design-evolution article > p:last-of-type { margin: 12px 2px 0; color: var(--on-light-3); font-size: 12px; line-height: 1.62; }
.boopy-design-evolution-arrow { margin-top: min(14vw, 160px); display: grid; place-items: center; color: var(--on-light-3); font-style: normal; }
.boopy-design-evolution-arrow span { display: none; }
.boopy-design-evolution-arrow svg { display: block; width: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1; }
.boopy-design-evolution figcaption { grid-column: 1 / -1; margin-top: 4px; padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 22px; border-top: 1px solid var(--paper-line); }
.boopy-design-evolution figcaption strong { flex: none; color: var(--on-light-2); font-weight: 650; }
.boopy-design-evolution figcaption span { max-width: 52ch; text-align: right; }
.boopy-cast figcaption { grid-column: 1 / -1; margin-top: 5px; }
.boopy-cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.boopy-cast > div { min-width: 0; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: radial-gradient(circle at 50% 38%, rgba(0,255,81,.11), transparent 48%), #090c0a; }
.boopy-cast img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--ease-entrance); }
.boopy-archive { padding: 24px; border: 1px solid var(--paper-line); border-radius: 14px; background: rgba(8,8,10,.018); content-visibility: auto; contain-intrinsic-size: auto 720px; }
.boopy-archive-group + .boopy-archive-group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--paper-line); }
.boopy-archive-group > h3 { margin: 0 0 10px; color: var(--on-light-3); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.boopy-archive-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.boopy-archive-grid > div { min-width: 0; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: radial-gradient(circle at 50% 40%, rgba(0,255,81,.09), transparent 54%), #090c0a; }
.boopy-archive img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--ease-entrance); }
.boopy-archive figcaption { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--paper-line); display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.boopy-archive figcaption strong { color: var(--on-light-2); font-weight: 650; }
.boopy-archive figcaption span { max-width: 38ch; text-align: right; }
.boopy-community { margin: 46px 0 10px; min-width: 0; overflow: hidden; display: grid; grid-template-columns: minmax(470px, 1.28fr) minmax(260px, .72fr); border: 1px solid var(--paper-line); border-radius: 14px; background: rgba(8,8,10,.018); }
.boopy-community-stage { min-width: 0; padding: 34px 28px 23px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 50% 40%, rgba(0,255,81,.13), transparent 31%), #090c0a; }
.boopy-community-device { position: relative; width: min(100%, 284px); aspect-ratio: 342 / 718; border-radius: 50px; background: #000; box-shadow: 0 34px 82px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.035); transform: translateZ(0); }
.boopy-community-screen { position: absolute; z-index: 1; inset: 3px; overflow: hidden; display: grid; grid-template-rows: 34px minmax(0, 1fr) 88px 51px; border-radius: 47px; background: #050507; isolation: isolate; }
.boopy-community-status { z-index: 2; display: block; width: 100%; height: 100%; background: #f7f8f7; object-fit: cover; }
.boopy-community-player { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(0,255,81,.08), transparent 42%), #050507; isolation: isolate; }
.boopy-community-player iframe { position: absolute; z-index: 1; inset: 0 auto auto 0; display: block; width: 390px; height: var(--boopy-player-canvas-height, 100%); border: 0; background: transparent; color-scheme: normal; opacity: 1; transform: scale(var(--boopy-player-scale, 1)); transform-origin: top left; transition: opacity .24s ease; }
.boopy-community-player.is-deferred iframe,
.boopy-community-player.is-loading iframe { opacity: 0; }
.boopy-community-player iframe:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }
.boopy-community-loader { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: rgba(255,255,255,.56); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.boopy-community-loader i { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.2); border-top-color: var(--signal); border-radius: 50%; }
.boopy-community-player.is-deferred .boopy-community-loader,
.boopy-community-player.is-loading .boopy-community-loader { opacity: 1; }
.boopy-community-player.is-deferred .boopy-community-loader i { display: none; }
.boopy-community-player.is-deferred .boopy-community-loader span { font-size: 0; }
.boopy-community-player.is-deferred .boopy-community-loader span::after { content: 'Playable preview'; font-size: 9px; }
.boopy-community-player.is-loading .boopy-community-loader i { animation: boopy-community-load .8s linear infinite; }
.boopy-community-native {
  position: absolute; z-index: 2; inset: 0; display: none; place-content: center; justify-items: center;
  padding: 28px 22px; background: radial-gradient(circle at 50% 42%, rgba(0,255,81,.12), transparent 36%), #050507; text-align: center;
}
.boopy-community-native p { margin: 0; max-width: 22ch; display: grid; gap: 8px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.45; }
.boopy-community-native strong { color: var(--paper); font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.boopy-community-player.is-native .boopy-community-native { display: grid; }
.boopy-community-player.is-native iframe,
.boopy-community-player.is-native .boopy-community-loader { opacity: 0; pointer-events: none; }
.boopy-community-meta { position: relative; z-index: 2; min-width: 0; padding: 13px 14px 12px 15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid rgba(8,8,10,.08); background: #f7f8f7; color: var(--ink); }
.boopy-community-meta p { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.boopy-community-meta p > span { margin-bottom: 3px; color: rgba(8,8,10,.46); font-size: 7px; font-weight: 750; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.boopy-community-meta strong { overflow: hidden; font-size: 12px; font-weight: 720; letter-spacing: -.018em; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.boopy-community-meta small { margin-top: 3px; overflow: hidden; color: rgba(8,8,10,.52); font-size: 8px; font-weight: 580; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.boopy-community-meta > a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); text-decoration: none; }
.boopy-community-meta > a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boopy-community-meta > a svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.boopy-community-tabs { position: relative; z-index: 2; min-width: 0; padding: 3px 10px 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-top: 1px solid rgba(255,255,255,.08); background: #0a0a0c; }
.boopy-community-tabs button { position: relative; min-width: 0; min-height: 44px; padding: 4px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: rgba(255,255,255,.4); cursor: pointer; }
.boopy-community-tabs button::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 12px; height: 2px; border-radius: 2px; background: var(--signal); opacity: 0; transform: translateX(-50%) scaleX(.4); transition: opacity var(--dur-micro) linear, transform var(--dur-base) var(--ease-entrance); }
.boopy-community-tabs button span { font-size: 8px; font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: .08em; line-height: 1; }
.boopy-community-tabs button small { overflow: hidden; max-width: 100%; font-size: 7px; font-weight: 650; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.boopy-community-tabs button[aria-pressed="true"] { color: var(--paper); }
.boopy-community-tabs button[aria-pressed="true"]::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
.boopy-community-tabs button:focus-visible,
.boopy-community-meta > a:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.boopy-community-device-frame { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)); }
.boopy-community-controls { width: min(100%, 284px); min-height: 46px; margin-top: 17px; display: grid; grid-template-columns: 44px minmax(40px, 1fr) auto 44px; align-items: center; gap: 10px; color: var(--paper); }
.boopy-community-controls > button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: rgba(255,255,255,.055); color: var(--paper); cursor: pointer; transition: border-color var(--dur-short) linear, background-color var(--dur-short) linear, opacity var(--dur-short) linear; }
.boopy-community-controls > button:disabled { cursor: default; opacity: .28; }
.boopy-community-controls > button svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.boopy-community-controls > button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.boopy-community-controls > div { height: 1px; overflow: hidden; background: rgba(255,255,255,.18); }
.boopy-community-controls > div i { display: block; width: 25%; height: 100%; background: var(--signal); transform-origin: left center; transition: width 500ms var(--ease-entrance); }
.boopy-community-controls > span { display: flex; align-items: center; gap: 6px; font-size: 9px; font-variant-numeric: tabular-nums; }
.boopy-community-controls > span b { min-width: 14px; color: var(--paper); font-weight: 700; }
.boopy-community-controls > span i { width: 10px; height: 1px; background: rgba(255,255,255,.28); }
.boopy-community-controls > span em { color: rgba(255,255,255,.46); font-style: normal; }
.boopy-community-live { width: min(100%, 284px); margin: 1px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: rgba(255,255,255,.42); font-size: 8px; font-weight: 680; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.boopy-community-live span { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(0,255,81,.09); }
.boopy-community-story { min-width: 0; padding: clamp(30px, 4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-left: 1px solid var(--paper-line); }
.boopy-community-index { margin: 0 0 15px; color: var(--signal-ink); font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.boopy-community-story h3 { margin: 0; color: var(--on-light-1); font-size: clamp(27px, 3.1vw, 40px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.boopy-community-byline { margin: 10px 0 0; color: var(--on-light-3); font-size: 11px; font-weight: 650; line-height: 1.4; }
.boopy-community-insight { margin: clamp(28px, 4vw, 42px) 0 0; padding-top: 17px; border-top: 1px solid var(--paper-line); color: var(--on-light-2); font-size: 13px; line-height: 1.66; }
.boopy-community-insight strong { color: var(--on-light-1); font-weight: 700; }
.boopy-community-open { min-height: 46px; margin-top: 28px; padding: 0 18px; display: inline-flex; align-items: center; gap: 24px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none !important; }
.boopy-community-open .ui-arrow { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-entrance); }
.boopy-community-hint { margin: auto 0 0; padding-top: 34px; color: var(--on-light-3); font-size: 9px; line-height: 1.5; }
@keyframes boopy-community-load { to { transform: rotate(1turn); } }
.boopy-sticker-library { width: min(100%, 790px); margin: 40px auto 10px; padding: 20px; border: 1px solid var(--paper-line); border-radius: 14px; background: rgba(8,8,10,.018); content-visibility: auto; contain-intrinsic-size: auto 820px; }
.boopy-sticker-outbound { width: min(100%, 790px); margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--paper-line); }
.boopy-sticker-outbound a { display: inline-flex; align-items: center; gap: 10px; color: var(--on-light-1); font-size: var(--fs-body); font-weight: 600; line-height: 1.45; text-decoration: none !important; transition: color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.boopy-sticker-outbound a .ui-arrow { flex: none; width: 14px; height: 14px; color: var(--signal-ink); transition: transform var(--dur-base) var(--ease-entrance); }
.boopy-sticker-outbound a:hover, .boopy-sticker-outbound a:focus-visible { color: var(--signal-ink); }
.boopy-sticker-outbound a:hover .ui-arrow, .boopy-sticker-outbound a:focus-visible .ui-arrow { transform: translate(2px, -2px); }
.boopy-sticker-heading { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.boopy-sticker-heading h3 { margin: 0; color: var(--on-light-2); font-size: 10px; font-weight: 750; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.boopy-sticker-heading span { color: var(--on-light-3); font-size: 10px; }
.boopy-sticker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.boopy-sticker-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.boopy-sticker-card { min-width: 0; margin: 0; padding: 10px 10px 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: radial-gradient(circle at 50% 38%, rgba(0,255,81,.1), transparent 48%), #090c0a; }
.boopy-sticker-card picture,
.boopy-sticker-card img { display: block; width: 100%; aspect-ratio: 1; }
.boopy-sticker-card img { height: auto; object-fit: contain; }
.boopy-sticker-card figcaption { margin-top: 5px; overflow: hidden; color: var(--on-dark-2); font-size: 10px; font-weight: 650; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.boopy-sticker-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--paper-line); }
.boopy-sticker-more > summary {
  min-height: 48px; padding: 0 14px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid rgba(8,8,10,.16); border-radius: 12px; background: rgba(255,255,255,.72);
  color: var(--on-light-1); font-size: 13px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; list-style: none;
  box-shadow: 0 1px 0 rgba(8,8,10,.03); transition: border-color var(--dur-short) linear, background-color var(--dur-short) linear, color var(--dur-short) linear, box-shadow var(--dur-short) linear;
}
.boopy-sticker-more > summary::-webkit-details-marker { display: none; }
.boopy-sticker-more > summary:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
.boopy-sticker-more > summary .ui-arrow-down {
  width: 28px; height: 28px; padding: 7px; box-sizing: border-box; flex: none;
  border: 1px solid rgba(0,160,60,.28); border-radius: 50%; background: rgba(0,255,81,.1);
  color: var(--signal-ink);
  transition: transform var(--dur-base) var(--ease-entrance), border-color var(--dur-short) linear, background-color var(--dur-short) linear;
}
.boopy-sticker-more[open] > summary { margin-bottom: 20px; border-color: rgba(8,8,10,.28); background: #fff; }
.boopy-sticker-more[open] > summary .ui-arrow-down { transform: rotate(180deg); border-color: rgba(0,160,60,.42); background: rgba(0,255,81,.16); }
.boopy-sticker-more .boopy-sticker-group + .boopy-sticker-group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--paper-line); }

@media (hover: hover) and (pointer: fine) {
  .boopy-cast > div:hover img,
  .boopy-archive-grid > div:hover img { transform: scale(1.035) translateY(-2px); }
  .boopy-community-meta > a:hover { background: var(--signal-ink); }
  .boopy-community-controls > button:not(:disabled):hover { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.11); }
  .boopy-community-open:hover .ui-arrow { transform: translate(2px, -2px); }
  .boopy-sticker-more > summary:hover { border-color: rgba(8,8,10,.34); background: #fff; box-shadow: 0 8px 22px rgba(8,8,10,.06); }
  .boopy-sticker-more > summary:hover .ui-arrow-down { border-color: rgba(0,160,60,.48); background: rgba(0,255,81,.18); }
}

@media (max-width: 1180px) {
  .boopy-community { grid-template-columns: minmax(440px, 1.18fr) minmax(250px, .82fr); }
}

/* Boopy's wide evidence needs more room than an ordinary essay. Keep the chapter
   rail horizontal through tablet and phone landscape widths; otherwise the 220px
   sidebar leaves less space than the community player's two authored columns and
   silently clips its story panel. The rail remains sticky and touch-sized. */
@media (max-width: 1100px) {
  .boopy-story-page .perspective-layout { grid-template-columns: minmax(0, 1fr); }
  .boopy-story-page .perspective-aside {
    position: sticky;
    z-index: 8;
    top: var(--header-h);
    margin: 0 calc(0px - max(var(--pad), env(safe-area-inset-right))) 58px calc(0px - max(var(--pad), env(safe-area-inset-left)));
    padding: 9px max(var(--pad), env(safe-area-inset-right)) 9px max(var(--pad), env(safe-area-inset-left));
    display: block;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: max(var(--pad), env(safe-area-inset-left));
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    border-block: 1px solid rgba(8,8,10,.08);
    background: var(--paper);
    scrollbar-width: none;
  }
  .site-header.is-hidden ~ main .boopy-story-index { top: 0; }
  .boopy-story-page .perspective-aside::-webkit-scrollbar { display: none; }
  .boopy-story-index > p,
  .boopy-story-role { display: none; }
  .boopy-story-index nav { width: max-content; margin: 0; padding: 0; display: flex; gap: 4px; border: 0; }
  .boopy-story-index nav a { min-height: 44px; padding: 8px 12px; display: inline-flex; grid-template-columns: none; gap: 7px; border-radius: 999px; white-space: nowrap; scroll-snap-align: center; }
  .boopy-story-index nav a:hover,
  .boopy-story-index nav a:focus-visible { transform: none; }
  .boopy-story-index nav a.is-active { background: var(--ink); color: var(--paper); }
  .boopy-story-content > section { scroll-margin-top: 96px; }
}

/* Below this width the phone and its editorial note no longer have a truthful
   two-column minimum. Stack them instead of shrinking or clipping either one. */
@media (max-width: 780px) {
  .boopy-community { grid-template-columns: minmax(0, 1fr); }
  .boopy-community-story { min-height: 360px; border-top: 1px solid var(--paper-line); border-left: 0; }
}

/* Product guide: the essays use a single reading column; this page has a second
   job — explain six interface states without shrinking them into decorative
   thumbnails. The wider right column lets copy and real product UI sit together,
   while the same type, paper, and article rhythm keep it inside the publication. */
.product-guide-page .perspective-hero { max-width: 1180px; }
.product-guide-page .perspective-hero h1 { max-width: 17ch; }
.product-guide-page .perspective-layout { grid-template-columns: minmax(160px, 232px) minmax(0, 860px); }
.product-guide-cover { position: relative; }
.product-guide-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 68%, rgba(8,8,10,.58)); pointer-events: none; }
.product-guide-cover figcaption { position: absolute; z-index: 1; left: 24px; bottom: 20px; color: rgba(255,255,255,.72); font-size: var(--fs-label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.product-guide-content { width: 100%; }
.product-guide-content > .perspective-standfirst { max-width: 64ch; }
.product-flow { margin-top: 68px; padding: 18px 0; display: grid; grid-template-columns: repeat(5, auto 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); overflow: hidden; }
.product-flow span { display: flex; flex-direction: column; gap: 4px; color: var(--on-light-1); font-size: var(--fs-small); font-weight: 650; white-space: nowrap; }
.product-flow span b { color: var(--on-light-3); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.product-flow i { display: block; min-width: 12px; height: 1px; background: var(--paper-line); }
.product-flow i::after { content: ''; display: block; width: 4px; height: 4px; margin: -1.5px 0 0 auto; border-radius: 50%; background: var(--signal-ink); }
.perspective-content section.product-feature { padding-top: 128px; display: grid; grid-template-columns: minmax(0, 1fr); }
.product-feature-copy { max-width: 64ch; }
.product-feature-index { margin: 0 0 16px !important; color: var(--on-light-3) !important; font-size: var(--fs-label) !important; font-weight: 700; letter-spacing: var(--tr-label); line-height: 1.4 !important; text-transform: uppercase; }
.product-feature-copy h2 { margin-bottom: 28px; }
.product-feature-copy > p:not(.product-feature-index) { margin: 0 0 22px; color: var(--on-light-1); font-size: var(--fs-body); line-height: 1.72; }
.product-feature-copy blockquote { margin: 38px 0 0; }
.product-feature-copy blockquote p { font-size: clamp(20px, 1.7vw, 25px); }
.product-screen-set { min-width: 0; margin: 52px 0 0; padding: clamp(28px, 4.8vw, 54px) clamp(24px, 6.5vw, 72px) 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 246px)); justify-content: center; align-items: start; column-gap: clamp(28px, 6vw, 64px); row-gap: 0; overflow: hidden; border: 1px solid var(--paper-line); border-radius: 16px; background: rgba(8, 8, 10, .025); }
.product-phone { min-width: 0; }
.product-phone:nth-child(2) { margin-top: clamp(24px, 4vw, 40px); }
.product-device { position: relative; width: 100%; aspect-ratio: 660 / 1434; padding: 4px; overflow: hidden; border: 1px solid rgba(8, 8, 10, .72); border-radius: clamp(22px, 2.4vw, 30px); background: #0c0c0e; box-shadow: 0 18px 44px rgba(8, 8, 10, .14), 0 2px 8px rgba(8, 8, 10, .12), inset 0 0 0 1px rgba(255, 255, 255, .28); }
.product-device::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, .13); border-radius: calc(clamp(22px, 2.4vw, 30px) - 4px); pointer-events: none; }
.product-device img { display: block; width: 100%; height: 100%; aspect-ratio: 660 / 1434; object-fit: cover; border-radius: calc(clamp(22px, 2.4vw, 30px) - 5px); background: #0c0c0e; }
.product-phone span { display: block; padding: 14px 4px 0; color: var(--on-light-2); font-size: 10px; font-weight: 700; letter-spacing: .065em; line-height: 1.45; text-transform: uppercase; }
.product-screen-set figcaption { grid-column: 1 / -1; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--paper-line); color: var(--on-light-3); font-size: 12px; line-height: 1.55; text-align: center; }
.perspective-content section.product-prompt-section { margin-top: 128px; padding: clamp(34px, 4.5vw, 58px); display: grid; grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr); align-items: center; gap: clamp(38px, 5vw, 68px); border-radius: 14px; background: var(--ink); color: var(--paper); }
.product-prompt-section h2 { margin-bottom: 22px; color: var(--paper); }
.product-prompt-section > div:first-child > p:not(.product-feature-index) { margin: 0; color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.7; }
.product-prompt-section .product-feature-index { color: var(--on-dark-3) !important; }
.product-prompt { padding: 26px; border: 1px solid var(--ink-line); border-radius: 10px; background: var(--ink-raise); }
.product-prompt > p { margin: 0 0 28px; color: var(--on-dark-1); font-size: clamp(19px, 1.65vw, 25px); line-height: 1.48; letter-spacing: -.025em; }
.product-prompt mark { padding: 0 .12em; background: rgba(0,255,81,.16); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.product-prompt dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-prompt dl div { padding-top: 11px; border-top: 1px solid var(--ink-line); }
.product-prompt dt { margin-bottom: 5px; color: var(--on-dark-3); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.product-prompt dd { margin: 0; color: var(--on-dark-2); font-size: 11px; line-height: 1.45; }
.product-loop-compare { margin: 42px 0; display: grid; gap: 10px; }
.product-loop-compare > div { padding: 18px 20px; display: grid; grid-template-columns: minmax(145px, .34fr) 1fr; align-items: center; gap: 20px; border: 1px solid var(--paper-line); border-radius: 9px; }
.product-loop-compare span { color: var(--on-light-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.product-loop-compare p { margin: 0; color: var(--on-light-2); font-size: var(--fs-small); line-height: 1.6; }
.product-loop-compare i { padding: 0 6px; color: var(--on-light-3); font-style: normal; }
.product-loop-compare .is-aippy { border-color: var(--ink); background: var(--ink); }
.product-loop-compare .is-aippy span { color: var(--signal); }
.product-loop-compare .is-aippy p { color: var(--on-dark-1); }
.product-loop-compare .is-aippy i { color: var(--on-dark-3); }
.product-responsibility { margin-top: 42px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-responsibility article { padding: 26px; border: 1px solid var(--paper-line); border-radius: 10px; }
.product-responsibility article > p { margin: 0 0 20px; color: var(--on-light-1); font-size: var(--fs-small); font-weight: 700; }
.product-responsibility ul { margin: 0; padding: 0; list-style: none; }
.product-responsibility li { position: relative; margin-top: 12px; padding-left: 16px; color: var(--on-light-2); font-size: 13px; line-height: 1.55; }
.product-responsibility li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--signal-ink); }
.perspective-content .product-guide-cta { min-height: 50px; margin-top: 14px; padding: 0 22px; display: inline-flex; align-items: center; gap: 28px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); text-decoration: none; text-decoration-color: transparent; font-size: var(--fs-action); font-weight: 650; transition: background-color var(--dur-short) var(--ease-micro), color var(--dur-short) var(--ease-micro), transform var(--dur-short) var(--ease-micro); }
.perspective-content .product-guide-cta svg { flex: none; width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-entrance); }
.perspective-content .product-guide-cta:hover, .perspective-content .product-guide-cta:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; text-decoration-color: transparent; }
.perspective-content .product-guide-cta:hover svg, .perspective-content .product-guide-cta:focus-visible svg { transform: translate(3px, -2px); }
.perspective-content .product-guide-cta:active { transform: scale(.975); }
.product-guide-note { margin: 84px 0 0; padding-top: 16px; border-top: 1px solid var(--paper-line); color: var(--on-light-3); font-size: var(--fs-label); line-height: 1.55; }

/* Legal */
/* Security and Terms used to shrink the whole header — 86px instead of 106, a 54px
   wordmark instead of 70, and 10px navigation instead of 13. The secondary pages
   are peers; their titles were already pulled onto one scale for exactly this
   reason, and a chrome that shrinks on two of them undoes it. 10px was also the
   smallest type on the site by 3px, on the pages a reader spends longest on. */
/* 27% / 1fr 是按比例分的，不是按内容分的：1440 下侧栏拿到 348px 去装一列 11px
   的目录，正文列拿到 838px 却被 max-width: 64ch 收在 625px，剩下的 213px 加上
   页面右 padding，让整份文档的右边空出 289px。文档因此整体压在左侧，右三分之一
   是死的 —— 这正是 Security 截图给人的失衡感。
   改成按内容定宽：侧栏取目录最长一条的实际需要，正文列取 64ch，两列作为一组
   居中于版心。 */
/* 27% / 1fr 是按比例分的，不是按内容分的：1440 下侧栏拿到 348px 去装一列 11px
   的目录（最宽一条也只用掉 150px），正文列拿到 838px 却被 max-width: 64ch 收在
   625px。两处虚占加起来，让整份文档压在左侧、右边空出 289px —— 这正是 Security
   截图里的失衡。改成按内容定宽。
   不居中整组：全站标题共用一条左轴（.careers-intro 的注释称之为 "the site's one
   left axis"），把这一页的标题为了对称而内缩，是用一页的平衡去换全站的一致。
   长文档右侧留白本来就是常态。 */
.legal-wrap { padding: calc(var(--header-h) + 70px) var(--pad) 150px; display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 64ch); column-gap: clamp(48px, 6vw, 96px); }
.legal-wrap > h1 { grid-column: 1 / -1; margin: 0 0 110px; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-h1); }
/* --fs-small，不是 --fs-label。11px 在本站是标签的尺度，别处承载的都是日期、
   计数、编号这类短物件，且多带字距或全大写。这里是十一条句式大小写的导航，
   最长一条是 "Infrastructure and Access Control" —— 用标签的尺度去排导航，
   结果就是截图里那列几乎读不出来的字。 */
.legal-aside { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; display: flex; flex-direction: column; font-size: var(--fs-small); line-height: 1.45; color: var(--on-light-3); transition: top var(--dur-base) var(--ease-move); }
.site-header.is-hidden ~ main .legal-aside { top: 24px; }
.legal-aside a { position: relative; padding: 6px 0 6px 13px; border-left: 1px solid transparent; transition: color var(--dur-micro) var(--ease-micro), border-color var(--dur-micro) var(--ease-micro), transform var(--dur-short) var(--ease-micro); }
/* 系统里只有一个黑，是 --ink (#08080a)；纯 #000 是这份文件头部注释专门声明修掉过
   的那一类偏差，侧栏这三处当时漏了。 */
.legal-aside a:hover { color: var(--on-light-1); }
.legal-aside a.is-active { color: var(--on-light-1); border-left-color: var(--ink); transform: translateX(3px); }
/* These are the two pages on the site that someone actually has to read start to
   finish, and they were set at 13px across a 760px column — 96 characters a line,
   where the readable band is 45 to 75. Both numbers moved: 15px is the size the
   rest of the site uses for body copy, and the column is capped so the line lands
   at ~68 characters — a length the eye can return from without losing its place.
   64ch, not 68: `ch` here resolves against this element's inherited 16px, while the
   paragraphs inside it are 15px, so a 68ch box measures 72 characters of the type
   actually set in it. */
.legal-content { max-width: 64ch; }
.legal-content .legal-updated { margin: 0 0 13px; color: var(--on-light-3); font-size: var(--fs-label); }
.legal-content .legal-intro { margin-top: 0; }
.privacy-summary {
  margin: 46px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; color: var(--on-light-2);
}
.privacy-summary > div { padding-top: 15px; border-top: 1px solid var(--paper-line); }
.privacy-summary dt {
  margin-bottom: 8px; color: var(--on-light-1); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase;
}
.privacy-summary dd { margin: 0; font-size: 13px; line-height: 1.55; }
.security-summary {
  margin: 42px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; color: var(--on-light-2);
}
.security-summary > div { padding-top: 15px; border-top: 1px solid var(--paper-line); }
.security-summary dt {
  margin-bottom: 8px; color: var(--on-light-1); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase;
}
.security-summary dd { margin: 0; font-size: 13px; line-height: 1.55; }
.security-summary a { color: var(--on-light-1); }
.legal-note {
  margin: 22px 0 26px; padding: 16px 18px; border-left: 2px solid rgba(8, 8, 10, .34);
  background: rgba(8, 8, 10, .035); color: var(--on-light-2) !important;
}
.legal-content section { scroll-margin-top: 30px; }
.legal-content h2 { margin: 56px 0 16px; font-size: var(--fs-h3); line-height: 1.18; letter-spacing: var(--tr-h3); }
/* 14px against 13px body was a subheading the size of the text it introduced.
   Its rank now comes from weight and case rather than from one pixel of size. */
.legal-content h3 { margin: 32px 0 10px; font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--tr-body); }
.legal-content p, .legal-content li { margin-top: 0; color: var(--on-light-1); font-size: var(--fs-body); line-height: 1.62; }
.legal-content ul { margin-top: 0; padding-left: 20px; }
/* A line that ends in a colon is not a paragraph, it is the head of the list under
   it. Two of these had been welded to the sentence above with a <br> — which is
   the only way to get zero gap when the alternative is a full paragraph step, and
   it cost them the break they actually needed. They are paragraphs now, drawn
   closer to what they introduce than to what precedes them. */
.legal-content p:has(+ ul) { margin-bottom: 9px; }
.legal-content li { margin-bottom: 4px; }
.legal-content a { text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { text-decoration-thickness: 2px; }
/* box-sizing 全局是 border-box，所以 max-width 含 padding：内容宽正好落在
   1320 - 2*--pad = 1152，与首页 .stage-inner 逐像素一致。 */
.roles, .insight-wrap, .legal-wrap, .company-wrap, .perspective-wrap { max-width: var(--measure); margin-inline: auto; padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }

/* Motion choreography is progressively enabled by JavaScript for offscreen content only. */
.motion-ready .reveal-item { opacity: 0; transform: translate3d(0, var(--reveal-distance, 18px), 0) scale(var(--reveal-scale, .995)); transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-long) var(--ease-entrance); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.motion-ready .reveal-item.is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.motion-ready .reveal-item:focus-within { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0ms; }

@media (max-width: 980px) {
  .careers-intro { max-width: 720px; grid-template-columns: 1fr; gap: 24px; }
  .careers-intro h1 { white-space: normal; }
  .careers-copy { max-width: 600px; padding-top: 0; }
  #careers-canvas { inset: calc(350px + var(--header-h)) 0 0; height: calc(100% - 350px - var(--header-h)); }
  .perspective-layout { grid-template-columns: minmax(140px, 180px) minmax(0, 64ch); column-gap: 42px; }
}

@media (max-width: 800px) {
  .careers-hero { height: calc(clamp(900px, calc(1120px - 20vw), 1040px) + var(--header-h)); }
  .careers-intro { width: 100%; margin-top: 40px; padding-inline: max(var(--pad), env(safe-area-inset-left)); gap: 18px; }
  .careers-lede { margin-bottom: 14px; font-size: 16px; line-height: 1.48; }
  .careers-invite { margin-bottom: 26px; font-size: 14px; line-height: 1.58; }
  .search-pill input { font-size: 16px; }
  #careers-canvas {
    /* Copy wraps progressively on narrow screens, so the hand study descends at
       the same rate: 350px at 800, 408px at 600, 503px at 375. */
    inset: calc(clamp(350px, calc(660px - 42vw), 510px) + var(--header-h)) 0 0;
    height: calc(100% - clamp(350px, calc(660px - 42vw), 510px) - var(--header-h));
  }
  .roles {
    min-height: 0;
    padding-top: 72px;
    padding-bottom: clamp(96px, 18vw, 124px);
  }
  .roles-heading { margin-bottom: 54px; }
  /* Title and action. Location drops — it is the least load-bearing field
     and the only one that can be asked for in the reply. */
  .role { grid-template-columns: 1fr auto; column-gap: 14px; font-size: 14px; }
  .role span:nth-child(2) { display: none; }
  .role-go { min-width: 0; font-size: 12px; }
  /* The fixed header is 74px before a safe-area inset. A literal 75px top
     padding left these titles one pixel below it and ignored notches entirely. */
  .insight-wrap,
  .perspective-wrap {
    padding-top: calc(var(--header-h) + clamp(34px, 8vw, 48px));
  }
  .insight-wrap { padding-bottom: 72px; }
  .insight-wrap h1 { margin-bottom: 30px; }
  .insight-belief { margin-bottom: 18px; font-size: clamp(28px, 6vw, 36px); }
  .insight-lede { margin-bottom: 34px; }
  .insight-filters {
    margin-bottom: 58px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .insight-filters::-webkit-scrollbar { display: none; }
  .insight-filters button { flex: 0 0 auto; scroll-snap-align: start; }
  .insight-grid { grid-template-columns: 1fr; gap: 55px; }
  .insight-grid article h2 { font-size: 18px; }
  /* One column: the lead is just the first card again. */
  .insight-grid article.insight-lead { display: block; }
  .insight-grid article.insight-lead .insight-media { aspect-ratio: 1.92; }
  .insight-grid article.insight-lead p { margin: 14px 0 20px; }
  .insight-grid article.insight-lead h2 { font-size: 20px; line-height: 1.35; letter-spacing: -.025em; }
  .company-wrap { padding-top: calc(var(--header-h) + clamp(42px, 8vw, 64px)); padding-bottom: 24px; }
  .company-hero { grid-template-columns: 1fr; gap: 34px; padding-bottom: clamp(68px, 12vw, 88px); }
  .company-hero h1 { max-width: 10ch; }
  .company-hero-copy { max-width: 48ch; padding: 28px 0 0; border-top: 1px solid var(--paper-line); border-left: 0; }
  .company-hero-copy::before { top: -1px; left: 0; width: 56px; height: 1px; }
  .company-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-facts { border-bottom: 0; }
  .company-facts > div, .company-facts > div:not(:nth-child(3n + 1)) { min-height: 104px; padding-left: 0; padding-right: clamp(14px, 2vw, 28px); border-left: 0; border-bottom: 1px solid var(--paper-line); }
  .company-facts > div:nth-child(even) { padding-left: clamp(14px, 2vw, 28px); padding-right: 0; border-left: 1px solid var(--paper-line); }
  .company-belief { margin-top: clamp(84px, 15vw, 108px); padding: clamp(64px, 12vw, 88px) 0; }
  .company-belief .company-eyebrow { margin-bottom: 38px; }
  .company-belief-grid { grid-template-columns: 1fr; gap: 42px; }
  .company-belief h2 { max-width: 11ch; }
  .company-belief-signal { margin-top: clamp(48px, 9vw, 64px); }
  .company-section { padding-top: clamp(88px, 15vw, 112px); }
  .company-section-intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: clamp(52px, 10vw, 66px); }
  .company-section-intro h2 { max-width: 12ch; }
  .company-pillars { grid-template-columns: 1fr; gap: 46px; }
  .company-pillars { border-bottom: 0; }
  .company-pillars article, .company-pillars article:first-child, .company-pillars article:last-child { min-height: 0; padding: 27px 0 0; border-left: 0; }
  .company-pillars article + article { border-left: 0; }
  .company-pillars article > p:first-child { margin-bottom: 24px; }
  .company-product { margin-top: clamp(96px, 17vw, 120px); padding: 30px 0 42px; grid-template-columns: 1fr; gap: 44px; }
  .company-product-head h2 { max-width: 12ch; }
  .company-product-proof { margin-top: 42px; }
  .company-principles { margin-top: clamp(96px, 17vw, 120px); }
  .company-principles-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
  .company-principles-head .company-eyebrow { margin-bottom: 0; }
  .company-principle-list li { grid-template-columns: 48px minmax(180px, .8fr) minmax(0, 1fr); gap: 22px; }
  .company-principle-list li::after { display: none; }
  .company-next { margin-top: clamp(96px, 17vw, 120px); grid-template-columns: 1fr; gap: 42px; }
  .company-next nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-next nav .company-next-primary { grid-column: 1 / -1; }
  .company-next nav a { min-height: 76px; }
  .perspective-back { margin-bottom: 38px; }
  .product-guide-page .perspective-layout { grid-template-columns: 1fr; }
  .perspective-hero h1 { font-size: clamp(37px, 10.5vw, 62px); line-height: 1; }
  .perspective-deck { margin-top: 30px; }
  .perspective-cover { margin: 66px 0 84px; border-radius: 8px; }
  .perspective-layout { grid-template-columns: 1fr; }
  .boopy-story-page .perspective-layout { grid-template-columns: minmax(0, 1fr); }
  .perspective-aside { position: static; margin-bottom: 62px; padding-bottom: 18px; border-bottom: 1px solid var(--paper-line); display: grid; grid-template-columns: minmax(110px, .35fr) 1fr; gap: 24px; }
  .perspective-aside p { margin: 2px 0 0; }
  .perspective-aside strong { max-width: 36ch; }
  .boopy-story-page .perspective-aside {
    position: sticky;
    z-index: 8;
    top: var(--header-h);
    margin: 0 calc(0px - max(var(--pad), env(safe-area-inset-right))) 58px calc(0px - max(var(--pad), env(safe-area-inset-left)));
    padding: 9px max(var(--pad), env(safe-area-inset-right)) 9px max(var(--pad), env(safe-area-inset-left));
    display: block;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: max(var(--pad), env(safe-area-inset-left));
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    border-block: 1px solid rgba(8,8,10,.08);
    background: var(--paper);
    scrollbar-width: none;
  }
  .site-header.is-hidden ~ main .boopy-story-index { top: 0; }
  .boopy-story-page .perspective-aside::-webkit-scrollbar { display: none; }
  .boopy-story-index > p,
  .boopy-story-role { display: none; }
  .boopy-story-index nav { width: max-content; margin: 0; padding: 0; display: flex; gap: 4px; border: 0; }
  .boopy-story-index nav a { min-height: 44px; padding: 8px 12px; display: inline-flex; grid-template-columns: none; gap: 7px; border-radius: 999px; white-space: nowrap; scroll-snap-align: center; }
  .boopy-story-index nav a:hover,
  .boopy-story-index nav a:focus-visible { transform: none; }
  .boopy-story-index nav a.is-active { background: var(--ink); color: var(--paper); }
  .boopy-story-content > section { scroll-margin-top: 62px; }
  .perspective-content section { padding-top: 72px; }
  .boopy-story-content > section { padding-top: 68px; }
  .boopy-story-content > figure { margin-top: 46px; }
  .boopy-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-flow {
    grid-template-columns: repeat(6, minmax(84px, 1fr));
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-flow::-webkit-scrollbar { display: none; }
  .product-flow i { display: none; }
  .product-flow span { scroll-snap-align: start; }
  .perspective-content section.product-feature { padding-top: 94px; }
  .product-screen-set { width: min(100%, 660px); margin: 42px auto 0; }
  .perspective-content section.product-prompt-section { margin-top: 94px; grid-template-columns: 1fr; }
  .perspective-next { margin-top: 104px; grid-template-columns: 1fr; gap: 24px; }
  .perspective-next a { align-items: center; }
  .legal-wrap {
    padding-top: calc(var(--header-h) + clamp(38px, 9vw, 55px));
    padding-bottom: 72px;
    grid-template-columns: 1fr;
  }
  .legal-wrap > h1 { margin-bottom: 60px; }
  .legal-aside {
    position: sticky;
    z-index: 8;
    top: var(--header-h);
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin: 0 calc(0px - max(var(--pad), env(safe-area-inset-right))) 48px calc(0px - max(var(--pad), env(safe-area-inset-left)));
    padding: 11px max(var(--pad), env(safe-area-inset-right)) 11px max(var(--pad), env(safe-area-inset-left));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-left: max(var(--pad), env(safe-area-inset-left));
    scroll-padding-right: max(var(--pad), env(safe-area-inset-right));
    -webkit-overflow-scrolling: touch;
    background: rgba(247,248,247,.9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }
  .site-header.is-hidden ~ main .legal-aside { top: 0; }
  .legal-aside::-webkit-scrollbar { display: none; }
  .legal-aside a { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; white-space: nowrap; }
  .legal-aside a.is-active { background: var(--ink); color: var(--paper); transform: none; }
  /* Below 800 the contents stops being a column beside the document and becomes a
     sticky bar over it, and the scroll padding on <html> only ever accounted for
     the header. Jumping backwards through the index — the one direction that
     leaves the header on screen — put the heading you asked for at 128px with the
     index itself occupying 74 to 140: the reader pressed "Data Protection" and
     landed on its second paragraph, with the title behind the control they had
     just used. 60 clears the bar by 18px with the header up, and reads as ordinary
     air above a heading when the header has retreated. */
  .legal-content section { scroll-margin-top: 60px; }
  .legal-content p, .legal-content li { font-size: var(--fs-body); line-height: 1.66; }
  .privacy-summary { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
  .security-summary { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
  body[data-page="security"] .legal-content section,
  body[data-page="terms"] .legal-content section { min-height: 0; }
  .insight-page { background-attachment: scroll; }
}

@media (max-width: 480px) {
  .roles-heading { margin-bottom: 46px; align-items: baseline; }
  .insight-wrap h1 { margin-bottom: 26px; }
  .insight-belief { max-width: 18ch; font-size: clamp(27px, 8.2vw, 32px); line-height: 1.1; }
  .insight-lede { font-size: 17px; line-height: 1.52; }
  .company-wrap { padding-top: calc(var(--header-h) + 34px); }
  .company-hero { gap: 30px; padding-bottom: 62px; }
  .company-hero-title .company-eyebrow { margin-bottom: 18px; }
  .company-hero h1 { max-width: 9.5ch; font-size: clamp(40px, 12.8vw, 56px); line-height: 1; }
  .company-hero-copy { padding-top: 24px; }
  .company-hero-copy p { font-size: 17px; line-height: 1.56; }
  .company-hero-copy p + p { margin-top: 16px; font-size: 15px; line-height: 1.62; }
  .company-facts { grid-template-columns: 1fr; }
  .company-facts > div, .company-facts > div:nth-child(even) { min-height: 0; padding: 18px 0 20px; display: grid; grid-template-columns: minmax(108px, .42fr) minmax(0, 1fr); gap: 16px; align-items: start; border-left: 0; }
  .company-facts dt { margin: 2px 0 0; }
  .company-belief { margin-top: 78px; padding: 60px 0 66px; }
  .company-belief::after { background: linear-gradient(to right, var(--signal) 0 42px, rgba(255,255,255,.12) 42px 100%); }
  .company-belief h2 { font-size: clamp(36px, 10.8vw, 48px); line-height: 1.03; }
  .company-belief-copy p { line-height: 1.66; }
  .company-belief-signal { grid-template-columns: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto; gap: 6px; font-size: 8px; letter-spacing: .08em; }
  .company-belief-signal i::after { width: 4px; height: 4px; }
  .company-section { padding-top: 82px; }
  .company-section-intro { gap: 25px; margin-bottom: 50px; }
  .company-statement { margin: 0; }
  .company-pillars { gap: 40px; }
  .company-product, .company-principles, .company-next { margin-top: 90px; }
  .company-product { padding-top: 26px; gap: 38px; }
  .company-product-head { min-width: 0; }
  .company-product-proof {
    width: 100vw;
    max-width: 100vw;
    margin: 34px 0 0 calc(50% - 50vw);
    padding: 18px var(--pad) 36px;
    display: flex;
    gap: 12px;
    aspect-ratio: auto;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--pad);
    scroll-snap-type: x mandatory;
    border-inline: 0;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .company-product-proof::-webkit-scrollbar { display: none; }
  .company-product-proof::before { display: none; }
  .company-product-shot {
    position: relative;
    inset: auto;
    flex: 0 0 min(72vw, 258px);
    width: auto;
    height: auto;
    aspect-ratio: 780 / 1688;
    scroll-snap-align: center;
    transform: none;
  }
  .company-product-proof > div { border-radius: 8px; }
  .company-product-shot:first-of-type { scroll-snap-align: start; }
  .company-product-proof figcaption { right: var(--pad); bottom: 14px; }
  .company-product-copy > p { margin-bottom: 28px; font-size: 17px; line-height: 1.55; }
  .company-product-loop li { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 16px; }
  .company-product-loop p { grid-column: 2; }
  .company-principle-list li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px 16px; }
  .company-principle-list h3, .company-principle-list p { grid-column: 2; }
  .company-next { gap: 34px; }
  .company-next nav { grid-template-columns: 1fr; gap: 8px; }
  .company-next nav a { min-height: 58px; padding: 15px 16px; }
  .company-next nav .company-next-primary { min-height: 94px; padding: 20px; }
  .perspective-meta { gap: 7px 18px; }
  .perspective-meta > * + *::before { left: -11px; }
  .perspective-aside { grid-template-columns: 1fr; gap: 8px; }
  .perspective-content blockquote { margin: 42px 0; padding-left: 20px; }
  .boopy-cover figcaption { right: 12px; bottom: 10px; font-size: 9px; }
  .boopy-cover { margin-top: 64px; margin-bottom: 82px; }
  .boopy-story-content > section { padding-top: 60px; }
  .boopy-story-content > figure { margin-top: 40px; }
  .boopy-motion { grid-template-columns: 1fr; padding: 18px; }
  .boopy-motion video { width: min(100%, 270px); max-height: 68vh; }
  .boopy-motion figcaption { padding: 0 3px 2px; }
  .boopy-motion figcaption span { max-width: 34ch; }
  .boopy-design-evolution { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .boopy-design-evolution-arrow { margin: 0; min-height: 34px; }
  .boopy-design-evolution-arrow svg { width: 30px; transform: rotate(90deg); }
  .boopy-design-evolution figcaption { grid-column: 1; margin-top: 2px; display: block; }
  .boopy-design-evolution figcaption strong,
  .boopy-design-evolution figcaption span { display: block; text-align: left; }
  .boopy-design-evolution figcaption span { margin-top: 5px; }
  .boopy-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .boopy-archive { padding: 16px; border-radius: 11px; contain-intrinsic-size: auto 880px; }
  .boopy-archive-group + .boopy-archive-group { margin-top: 18px; padding-top: 18px; }
  .boopy-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .boopy-archive figcaption { display: block; }
  .boopy-archive figcaption strong,
  .boopy-archive figcaption span { display: block; text-align: left; }
  .boopy-archive figcaption span { margin-top: 5px; }
  .boopy-community { margin-top: 36px; grid-template-columns: minmax(0, 1fr); border-radius: 11px; }
  .boopy-community-stage { padding: 30px 16px 20px; }
  .boopy-community-device { width: min(78vw, 304px); border-radius: 46px; }
  .boopy-community-screen { grid-template-rows: 36px minmax(0, 1fr) 90px 52px; border-radius: 43px; }
  .boopy-community-controls,
  .boopy-community-live { width: min(78vw, 304px); }
  .boopy-community-story { min-height: 380px; padding: 32px clamp(22px, 6vw, 34px); border-top: 1px solid var(--paper-line); border-left: 0; }
  .boopy-community-story h3 { max-width: 16ch; font-size: clamp(29px, 8.5vw, 38px); }
  .boopy-community-insight { max-width: 46ch; margin-top: 30px; }
  .boopy-community-hint { padding-top: 30px; }
  .boopy-sticker-library { width: 100%; margin-top: 32px; padding: 14px; border-radius: 11px; contain-intrinsic-size: auto 490px; }
  .boopy-sticker-outbound { width: 100%; margin-top: 14px; padding-top: 14px; }
  .boopy-sticker-heading { margin-bottom: 9px; }
  .boopy-sticker-grid { gap: 7px; }
  .boopy-sticker-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .boopy-sticker-card { padding: 6px 6px 7px; border-radius: 8px; }
  .boopy-sticker-card figcaption { margin-top: 3px; font-size: 9px; }
  .boopy-sticker-more { margin-top: 16px; padding-top: 14px; }
  .boopy-sticker-more > summary { min-height: 46px; padding: 0 12px 0 14px; font-size: 12px; border-radius: 11px; }
  .boopy-sticker-more > summary .ui-arrow-down { width: 26px; height: 26px; padding: 6px; }
  .boopy-sticker-more[open] > summary { margin-bottom: 16px; }
  .product-guide-cover figcaption { left: 14px; bottom: 12px; max-width: calc(100% - 28px); font-size: 9px; }
  .product-flow { margin-top: 52px; }
  .product-flow span { padding-inline: 8px; }
  .product-screen-set { margin-top: 36px; padding: 20px 16px 18px; column-gap: 14px; border-radius: 12px; }
  .product-phone:nth-child(2) { margin-top: 18px; }
  .product-device { padding: 3px; border-radius: 18px; }
  .product-device::after { inset: 2px; border-radius: 15px; }
  .product-device img { border-radius: 14px; }
  .product-phone span { padding: 10px 2px 0; font-size: 8px; line-height: 1.4; }
  .product-screen-set figcaption { margin-top: 16px; padding-top: 12px; font-size: 10px; text-align: left; }
  .perspective-content section.product-prompt-section { padding: 28px 22px; border-radius: 10px; }
  .product-prompt { padding: 20px; }
  .product-prompt dl { grid-template-columns: 1fr; }
  .product-prompt dl div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
  .product-loop-compare > div { grid-template-columns: 1fr; gap: 8px; }
  .product-responsibility { grid-template-columns: 1fr; }
  .perspective-next a { gap: 18px; }
  .legal-wrap > h1 { margin-bottom: 46px; }
  .legal-aside { margin-bottom: 40px; }
}

@media (max-width: 360px) {
  .boopy-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .boopy-sticker-library { contain-intrinsic-size: auto 465px; }
}

/* ── outline action ───────────────────────────────────────────────────
   The site's secondary control, and the homepage's .pill-ghost on paper: same
   44px height, same 22px flank, same 14px label, same 999px radius. It had no
   base rule at all — only three modifiers naming a border, a margin and a hover.
   So the one route off a 404 rendered as `display: inline`, 22px tall, borderless
   and unpadded: not a button, a sentence with an arrow after it.

   The border is .3, matching the reasoning on .pill-ghost: a structural hairline
   is .16, but the boundary of a control a reader is asked to press has to clear
   the 3:1 floor, and #767676 was that number arrived at without a token.

   One resting appearance, on every pointer. A coarse-pointer rule used to repaint
   the label and border in signal green, which is 1.4:1 on --paper: the one control
   on a 404 was unreadable on the devices that only ever see the resting state. */
.signal-button {
  min-height: 44px; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border: 1px solid rgba(8, 8, 10, .3); border-radius: 999px;
  color: var(--on-light-1);
  font-size: var(--fs-action); font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  /* The pointer magnetism has always been computed — it just had nothing to move.
     It rides `translate` so the press scale on `transform` stays independent. */
  translate: var(--magnet-x, 0) var(--magnet-y, 0);
  transition: background-color var(--dur-short) var(--ease-micro),
              color var(--dur-short) var(--ease-micro),
              border-color var(--dur-short) var(--ease-micro),
              translate var(--dur-short) var(--ease-micro),
              transform var(--dur-micro) var(--ease-micro);
}
.signal-button:hover, .signal-button:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.signal-button:active { transform: scale(.97); }
/* The same arrow the homepage's closing action carries, drawn rather than typed:
   the U+203A it replaced is a quotation mark standing in for a chevron, and it
   sits on the type baseline instead of on the row's optical centre. */
.signal-button svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-short) var(--ease-entrance); }
.signal-button:hover svg, .signal-button:focus-visible svg { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .signal-button:hover:not(:active) { transform: translateY(-1px); }
}

/* 404 */
body[data-page="notfound"] { display: flex; flex-direction: column; }
.notfound-wrap {
  width: 100%;
  min-height: 0;
  flex: 1;
  padding: calc(var(--header-h) + 80px) max(var(--pad), env(safe-area-inset-right)) 120px max(var(--axis), env(safe-area-inset-left));
  max-width: calc(720px + var(--axis));
}
.notfound-wrap .notfound-code { margin: 0 0 18px; color: var(--on-light-3); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; }
.notfound-wrap h1 { margin: 0 0 22px; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-h1); }
.notfound-wrap .notfound-body { margin: 0 0 44px; max-width: 46ch; color: var(--on-light-2); font-size: var(--fs-lede); line-height: 1.55; }

/* Aippy shirt design story: the selected direction is almost monochrome, so the
   page follows it. Large paper fields make the garment feel wearable rather than
   merchandised; green appears only where the design itself uses it as a signal. */
.shirt-story-page .perspective-hero { max-width: 1200px; }
.shirt-story-page .perspective-hero h1 { max-width: none; font-size: clamp(42px, 5.85vw, 82px); text-wrap: balance; }
.shirt-title-line { display: block; }
.shirt-story-page .perspective-deck { max-width: 58ch; }
.article-share {
  min-height: 28px;
  margin: -8px 0;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--on-light-3);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color var(--dur-short) linear;
}
.article-share svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }
.article-share:hover, .article-share:focus-visible { color: var(--on-light-1); }
.article-share.is-complete { color: var(--signal-ink); }
.perspective-meta > .sr-only::before { content: none; }
.shirt-cover {
  position: relative;
  margin-top: 84px;
  margin-bottom: 112px;
  border: 1px solid var(--paper-line);
  background: #eee;
  box-shadow: 0 28px 70px rgba(8,8,10,.06), 0 2px 8px rgba(8,8,10,.035);
  isolation: isolate;
}
.shirt-cover::after { content: ''; position: absolute; z-index: 1; inset: 62% 0 0; background: linear-gradient(180deg, transparent, rgba(8,8,10,.12)); pointer-events: none; }
.shirt-cover img { cursor: zoom-in; transform: scale(1.001); transition: transform 900ms var(--ease-entrance), filter 600ms var(--ease-move); }
.shirt-cover img:focus-visible,
.shirt-flat img:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: -4px; }
.shirt-zoom-hint {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8,8,10,.13);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(8,8,10,.72);
  box-shadow: 0 6px 18px rgba(8,8,10,.08);
  pointer-events: none;
  transition: color var(--dur-short) linear, transform 360ms var(--ease-entrance), background-color var(--dur-short) linear;
}
.shirt-zoom-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.shirt-cover:has(> img:hover) .shirt-zoom-hint,
.shirt-cover:has(> img:focus-visible) .shirt-zoom-hint,
.shirt-flat:has(> img:hover) .shirt-zoom-hint,
.shirt-flat:has(> img:focus-visible) .shirt-zoom-hint,
.shirt-direction-image:has(> img:hover) .shirt-zoom-hint,
.shirt-direction-image:has(> img:focus-visible) .shirt-zoom-hint { color: var(--ink); background: rgba(255,255,255,.96); transform: scale(1.08); }
.shirt-lightbox {
  width: min(calc(100% - 32px), 1440px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #09090a;
  color: #fff;
  box-shadow: 0 34px 120px rgba(0,0,0,.58);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: 50% 48%;
  transition: opacity 240ms ease, transform 360ms var(--ease-entrance);
}
.shirt-lightbox::backdrop { background: rgba(8,8,10,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color 300ms ease, -webkit-backdrop-filter 360ms ease, backdrop-filter 360ms ease; }
.shirt-lightbox.is-preparing,
.shirt-lightbox.is-closing { opacity: 0; transform: translateY(18px) scale(.975); }
.shirt-lightbox.is-preparing::backdrop,
.shirt-lightbox.is-closing::backdrop { background: rgba(8,8,10,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.shirt-lightbox-open { overflow: hidden; }
.shirt-lightbox-panel { max-height: calc(100dvh - 34px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transition: transform 420ms var(--ease-entrance); }
.shirt-lightbox.is-preparing .shirt-lightbox-panel,
.shirt-lightbox.is-closing .shirt-lightbox-panel { transform: scale(.992); }
.shirt-lightbox header { min-height: 86px; padding: 18px 20px 17px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
.shirt-lightbox header span { display: block; margin-bottom: 6px; color: rgba(255,255,255,.44); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.shirt-lightbox h2 { margin: 0; color: #fff; font-size: clamp(18px, 2vw, 26px); font-weight: 540; letter-spacing: -.03em; line-height: 1.12; }
.shirt-lightbox header button { flex: none; position: relative; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: border-color var(--dur-short) linear, background-color var(--dur-short) linear, transform var(--dur-base) var(--ease-entrance); }
.shirt-lightbox header button span { position: absolute; top: 21px; left: 13px; width: 17px; height: 1px; margin: 0; background: currentColor; transform: rotate(45deg); }
.shirt-lightbox header button span:last-child { transform: rotate(-45deg); }
.shirt-lightbox header button:hover, .shirt-lightbox header button:focus-visible { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); transform: rotate(4deg); }
.shirt-lightbox-image { min-height: 0; overflow: auto; display: grid; place-items: center; background: #d4d4d4; overscroll-behavior: contain; }
.shirt-lightbox.is-dark-image .shirt-lightbox-image { background: #000; }
.shirt-lightbox-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 190px); object-fit: contain; opacity: 1; transform: scale(1); transition: opacity 280ms ease 60ms, transform 520ms var(--ease-entrance); }
.shirt-lightbox.is-preparing .shirt-lightbox-image img,
.shirt-lightbox.is-closing .shirt-lightbox-image img { opacity: 0; transform: scale(1.018); transition-delay: 0s; }
.shirt-lightbox-panel > p { margin: 0; padding: 15px 24px 17px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 14px; color: rgba(255,255,255,.54); font-size: 11px; line-height: 1.5; }
.shirt-lightbox-panel > p span { color: rgba(255,255,255,.86); font-size: 9px; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; }
.shirt-lightbox-panel > p b { font: inherit; font-weight: inherit; }
.shirt-story-content > .perspective-standfirst,
.shirt-story-content > section { width: min(100%, 64ch); margin-inline: auto; }
.shirt-story-content :where(h2, blockquote p) { text-wrap: balance; }
.shirt-design-logic {
  width: min(100%, 64ch);
  margin: 54px auto 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.shirt-design-logic li { min-width: 0; padding: 18px 18px 20px 0; }
.shirt-design-logic li + li { padding-left: 18px; border-left: 1px solid var(--paper-line); }
.shirt-design-logic span { display: block; margin-bottom: 25px; color: var(--signal-ink); font-size: 9px; font-weight: 760; letter-spacing: .11em; font-variant-numeric: tabular-nums; }
.shirt-design-logic strong { display: block; color: var(--on-light-1); font-size: 14px; font-weight: 680; letter-spacing: -.018em; line-height: 1.32; }
.shirt-design-logic p { margin: 8px 0 0; color: var(--on-light-3); font-size: 11px; line-height: 1.58; }
.shirt-story-index { --story-progress: .2; }
.shirt-story-index nav { position: relative; padding-left: 14px; }
.shirt-story-index nav::before,
.shirt-story-index nav::after { content: ''; position: absolute; top: 7px; bottom: 25px; left: 0; width: 1px; transform-origin: top; }
.shirt-story-index nav::before { background: var(--paper-line); }
.shirt-story-index nav::after { background: var(--signal-ink); transform: scaleY(var(--story-progress)); transition: transform 520ms var(--ease-entrance); }
.shirt-story-index nav a.is-active { transform: translateX(3px); }
.shirt-pixel-study {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(270px, .88fr) minmax(320px, 1.12fr);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #080909;
  color: #fff;
  box-shadow: 0 24px 70px rgba(8,8,10,.12);
}
.shirt-pixel-stage {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255,255,255,.1);
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.shirt-pixel-stage::after { content: ''; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.08); pointer-events: none; }
.shirt-pixel-stage > img { position: relative; z-index: 1; width: min(48%, 186px); height: auto; cursor: zoom-in; image-rendering: pixelated; transition: transform 520ms var(--ease-entrance), filter 320ms ease; }
.shirt-pixel-stage > img:focus-visible { outline: 2px solid var(--signal); outline-offset: 8px; }
.shirt-pixel-stage:has(> img:hover) > img { transform: scale(1.045); filter: drop-shadow(0 0 24px rgba(45,255,75,.12)); }
.shirt-pixel-stage .shirt-zoom-hint { border-color: rgba(255,255,255,.16); background: rgba(8,9,9,.68); color: rgba(255,255,255,.7); box-shadow: none; }
.shirt-pixel-stage:has(> img:hover) .shirt-zoom-hint,
.shirt-pixel-stage:has(> img:focus-visible) .shirt-zoom-hint { color: #fff; background: rgba(8,9,9,.9); transform: scale(1.08); }
.shirt-pixel-study > figcaption { padding: clamp(30px, 4vw, 48px); display: flex; flex-direction: column; color: #fff; }
.shirt-pixel-study > figcaption > p { margin: 0; }
.shirt-pixel-study > figcaption > p span { display: block; margin-bottom: 22px; color: var(--signal); font-size: 9px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.shirt-pixel-study > figcaption > p strong { display: block; max-width: 10ch; color: #fff; font-size: clamp(30px, 3.4vw, 46px); font-weight: 520; letter-spacing: -.05em; line-height: .98; }
.shirt-pixel-study > figcaption > div { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; color: rgba(255,255,255,.56); font-size: 11px; line-height: 1.62; }
.shirt-pixel-study > figcaption > div p { margin: 0; }
.shirt-pixel-study ul { margin: auto 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; border-top: 1px solid rgba(255,255,255,.12); list-style: none; }
.shirt-pixel-study li { color: rgba(255,255,255,.56); font-size: 9px; line-height: 1.4; }
.shirt-pixel-study li span { display: block; margin-bottom: 7px; color: var(--signal); font-variant-numeric: tabular-nums; }
.shirt-flat {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(8,8,10,.045);
}
.shirt-flat img { display: block; width: 100%; height: auto; cursor: zoom-in; transition: transform 900ms var(--ease-entrance), filter 600ms var(--ease-move); }
.shirt-flat figcaption {
  margin: 0;
  padding: 16px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--paper-line);
}
.shirt-flat figcaption strong { flex: none; color: var(--on-light-2); font-weight: 650; }
.shirt-flat figcaption span { max-width: 44ch; text-align: right; }
.shirt-directions {
  width: min(calc(100% + 160px), calc(100vw - 48px));
  margin: 52px 0 0;
  margin-left: 50%;
  translate: -50% 0;
  overflow: hidden;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: #f1f1ed;
  box-shadow: 0 22px 62px rgba(8,8,10,.055);
}
.shirt-directions > figcaption { padding: 28px 30px 26px; }
.shirt-directions > figcaption > span { display: block; margin-bottom: 12px; color: var(--signal-ink); font-size: 9px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.shirt-directions > figcaption > strong { display: block; max-width: 20ch; color: var(--on-light-1); font-size: clamp(26px, 3vw, 38px); font-weight: 540; letter-spacing: -.045em; line-height: 1.03; text-wrap: balance; }
.shirt-directions > figcaption > p { max-width: 48ch; margin: 14px 0 0; color: var(--on-light-3); font-size: 12px; line-height: 1.55; }
.shirt-direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--paper-line); }
.shirt-direction { position: relative; min-width: 0; background: #fff; }
.shirt-direction:nth-child(even) { border-left: 1px solid var(--paper-line); }
.shirt-direction:nth-child(n + 3) { border-top: 1px solid var(--paper-line); }
.shirt-direction.is-selected::before { content: ''; position: absolute; z-index: 3; inset: 0 0 auto; height: 3px; background: var(--signal); pointer-events: none; }
.shirt-direction-image { position: relative; overflow: hidden; background: #fff; }
.shirt-direction-image > img { display: block; width: 100%; height: auto; cursor: zoom-in; transition: transform 680ms var(--ease-entrance), filter 360ms var(--ease-move); }
.shirt-direction-image > img:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: -4px; }
.shirt-direction-image .shirt-zoom-hint { top: 10px; right: 10px; width: 30px; height: 30px; opacity: .8; box-shadow: 0 4px 14px rgba(8,8,10,.07); }
.shirt-direction > p { margin: 0; padding: 13px 16px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(8,8,10,.08); }
.shirt-direction > p span { color: var(--on-light-3); font-size: 8px; font-weight: 730; letter-spacing: .1em; text-transform: uppercase; }
.shirt-direction.is-selected > p span { color: var(--signal-ink); }
.shirt-direction > p strong { color: var(--on-light-2); font-size: 11px; font-weight: 660; letter-spacing: -.012em; text-align: right; }
.shirt-manifesto {
  position: relative;
  min-height: 430px;
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, rgba(0,255,81,.055), transparent 34%), #050505;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 24px 64px rgba(8,8,10,.08);
}
.shirt-manifesto::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.045); border-radius: 4px; pointer-events: none; }
.shirt-manifesto > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 44px);
}
.shirt-manifesto > div > i {
  width: 17px;
  height: clamp(62px, 8vw, 88px);
  border-block: 4px solid currentColor;
  transition: transform 820ms var(--ease-entrance), opacity 520ms var(--ease-smooth);
}
.shirt-manifesto > div > i:first-child { border-left: 4px solid currentColor; }
.shirt-manifesto > div > i:last-child { border-right: 4px solid currentColor; }
.shirt-manifesto p {
  margin: 0;
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 760;
  line-height: .86;
  letter-spacing: -.055em;
}
.shirt-manifesto p span { color: var(--signal); }
.shirt-manifesto figcaption {
  padding-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.5) !important;
}
.shirt-manifesto figcaption strong { color: rgba(255,255,255,.82); font-weight: 600; }
.shirt-choice-list { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--paper-line); }
.shirt-choice-list li {
  padding: 21px 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  border-bottom: 1px solid var(--paper-line);
  transition: background-color var(--dur-short) linear;
}
.shirt-choice-list li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8,8,10,.14);
  border-radius: 50%;
  color: var(--signal-ink);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.shirt-choice-list strong {
  color: var(--on-light-1);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.shirt-choice-list p { margin: 7px 0 0; color: var(--on-light-3); font-size: 13px; line-height: 1.55; }
.shirt-outcome { margin-top: 54px; padding: clamp(28px, 4vw, 42px); border-radius: 12px; background: var(--ink); color: var(--paper); }
.shirt-outcome > p { margin: 0 0 22px !important; color: var(--signal) !important; font-size: 9px !important; font-weight: 750; letter-spacing: .14em; line-height: 1.4 !important; text-transform: uppercase; }
.shirt-outcome > strong { display: block; max-width: 18ch; color: var(--paper); font-size: clamp(27px, 3.2vw, 40px); font-weight: 520; letter-spacing: -.045em; line-height: 1.04; }
.shirt-outcome ul { margin: 38px 0 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-top: 1px solid rgba(255,255,255,.16); list-style: none; }
.shirt-outcome li { position: relative; padding-left: 13px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 650; line-height: 1.45; }
.shirt-outcome li::before { content: ''; position: absolute; top: .47em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.shirt-story-page .perspective-next { margin-top: 118px; padding: 30px 32px 32px; border: 1px solid var(--paper-line); border-radius: 14px; background: rgba(8,8,10,.018); }

@media (hover: hover) and (pointer: fine) {
  .shirt-cover:hover img { transform: scale(1.012); filter: contrast(1.01); }
  .shirt-flat:hover img { transform: scale(1.012); filter: contrast(1.015); }
  .shirt-direction-image:hover > img { transform: scale(1.025); filter: contrast(1.02); }
  .shirt-choice-list li > div { transition: transform 520ms var(--ease-entrance); }
  .shirt-choice-list li:hover { background: rgba(8,8,10,.018); }
  .shirt-choice-list li:hover > div { transform: translateX(5px); }
}

.motion-ready .shirt-manifesto.reveal-item > div > i:first-child { opacity: 0; transform: translateX(-16px); }
.motion-ready .shirt-manifesto.reveal-item > div > i:last-child { opacity: 0; transform: translateX(16px); }
.motion-ready .shirt-manifesto.reveal-item.is-revealed > div > i { opacity: 1; transform: translateX(0); }
.motion-ready .boopy-story-index.is-past-story { opacity: 0; transform: translateY(-12px); }

@media (min-width: 801px) {
  .shirt-title-line { white-space: nowrap; }
}

@media (max-width: 800px) {
  .shirt-story-index nav { padding-left: 0; }
  .shirt-story-index nav::before, .shirt-story-index nav::after { display: none; }
  .shirt-story-index nav a.is-active { transform: none; }
  .shirt-story-page .perspective-next { padding: 24px; }
}

@media (max-width: 700px) {
  .shirt-story-page .perspective-hero h1 { font-size: clamp(38px, 11.5vw, 56px); }
  .article-share::before { content: none; }
  .shirt-cover { margin-top: 64px; margin-bottom: 82px; }
  .shirt-zoom-hint { top: 10px; right: 10px; width: 32px; height: 32px; }
  .shirt-lightbox { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .shirt-lightbox-panel { max-height: calc(100dvh - 18px); }
  .shirt-lightbox header { min-height: 76px; padding: 14px 12px 13px 16px; }
  .shirt-lightbox-image img { max-height: calc(100dvh - 230px); }
  .shirt-lightbox-panel > p { padding: 14px 16px 16px; grid-template-columns: auto minmax(0, 1fr); }
  .shirt-design-logic { margin-top: 42px; grid-template-columns: 1fr; }
  .shirt-design-logic li { padding: 17px 0 18px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
  .shirt-design-logic li + li { padding-left: 0; border-top: 1px solid var(--paper-line); border-left: 0; }
  .shirt-design-logic span { grid-row: 1 / span 2; margin: 2px 0 0; }
  .shirt-design-logic p { margin-top: 4px; }
  .shirt-pixel-study { grid-template-columns: 1fr; border-radius: 8px; }
  .shirt-pixel-stage { min-height: 330px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .shirt-pixel-stage > img { width: min(42%, 150px); }
  .shirt-pixel-study > figcaption { padding: 28px 22px 24px; }
  .shirt-pixel-study > figcaption > p strong { max-width: 12ch; }
  .shirt-pixel-study > figcaption > div { grid-template-columns: 1fr; gap: 12px; }
  .shirt-pixel-study ul { margin-top: 28px; }
  .shirt-flat { border-radius: 8px; }
  .shirt-flat figcaption { display: block; padding: 13px 14px; }
  .shirt-flat figcaption span { display: block; margin-top: 4px; text-align: left; }
  .shirt-directions { width: 100%; margin-top: 42px; margin-left: 0; translate: none; border-radius: 8px; }
  .shirt-directions > figcaption { padding: 24px 20px 22px; }
  .shirt-direction-grid { grid-template-columns: 1fr; }
  .shirt-direction:nth-child(even) { border-left: 0; }
  .shirt-direction:nth-child(n + 2) { border-top: 1px solid var(--paper-line); }
  .shirt-direction > p { padding-inline: 14px; }
  .shirt-manifesto { min-height: 320px; padding: 24px 20px; border-radius: 8px; }
  .shirt-manifesto > div { gap: 16px; }
  .shirt-manifesto > div > i { width: 12px; height: 54px; border-block-width: 3px; }
  .shirt-manifesto > div > i:first-child { border-left-width: 3px; }
  .shirt-manifesto > div > i:last-child { border-right-width: 3px; }
  .shirt-manifesto p { font-size: clamp(36px, 12vw, 54px); }
  .shirt-manifesto figcaption { display: block; }
  .shirt-manifesto figcaption strong { display: block; margin-top: 5px; }
  .shirt-choice-list li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .shirt-outcome { margin-top: 44px; padding: 26px 22px; border-radius: 8px; }
  .shirt-outcome ul { grid-template-columns: 1fr; gap: 9px; }
  .shirt-story-page .perspective-next { margin-top: 88px; padding: 22px 20px 24px; border-radius: 10px; }
}

@media (max-width: 480px) {
  .notfound-wrap {
    padding-top: calc(var(--header-h) + 46px);
    padding-bottom: 72px;
  }
  .notfound-wrap .notfound-body { margin-bottom: 34px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(nada-wordmark) { animation: none; }
  .motion-ready .reveal-item { opacity: 1; transform: none; }
  /* Scroll-driven animations take their progress from the timeline, not from duration, so the
     blanket .01ms above would strand them on their end keyframe instead of cancelling them. */
}

/* Reduced transparency is a site-wide material choice, not only a header
   preference. These declarations live after subpage rules so they also win over
   the tablet legal navigator and Insight card affordance. */
@media (prefers-reduced-transparency: reduce) {
  .legal-aside { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}