/* ════════════════════════════════════════════════════════════════════════
   PRESS — THE PUBLIC SITE, in the Outcomes language
   The same language as the product (bento-tokens.css), set at marketing
   scale. Taken from outcomes.digital, measured in a browser on 2026-09-24,
   with one thing kept exactly as it was: the headings are Fraunces,
   semi-bold, SOFT 0 / WONK 1 / opsz 144, with its italic for emphasis.

     1. PAPER GROUND.          Warm off-white #F1EFED, white cards on it.
     2. COLOUR COMES IN BLOCKS. Orange, amber, sky, red and ink as whole-card
                               fills with ink text, 24px corners and a soft
                               drop -- never as tints, glows or gradients.
                               The one exception is the marker behind a
                               phrase, which is the site's orange-to-coral
                               highlighter stroke.
     3. PILLS FOR ACTION.      The primary action is an ink pill; the hero's
                               is uppercase and heavy with an arrow. The
                               secondary is an outlined pill.
     4. TWO VOICES.            Fraunces for every statement; Zalando Sans for
                               everything that is information, including
                               figures.
     5. MOTION IS TYPOGRAPHIC. Headline lines rise from behind a mask in
                               reading order; nothing else moves on entry.
                               Cards do not fade, do not lift, and are
                               never staggered per index.
   The page ends the way outcomes.digital's does: an orange block carrying
   the wordmark at display size.
   ──────────────────────────────────────────────────────────────────────── */

:root {

  /* ── GROUND ───────────────────────────────────────────────────────────
     Three paper tones and three ink tones. Opaque, all six. An alpha wash
     over paper goes grey-green; these were picked by eye against the lime. */
  --paper:   #F1EFED;
  --paper2:  #EBE9E5;   /* inset / hover / alternating band              */
  --paper3:  #DBD7D1;   /* pressed, and the bar track of a chart          */
  --card:    #FFFFFF;   /* a card on paper                                */
  --ink:     #121213;   /* body text on paper, and the ink block          */
  --ink2:    #444444;   /* secondary text — 8.5:1 on --paper              */
  --ink3:    #6F6B66;   /* metadata — 4.6:1 on --paper, the floor         */

  /* ── RULE ─────────────────────────────────────────────────────────────
     Rule 2's whole vocabulary. --rule is the hairline that bounds a cell;
     --rule-strong is the structural line that bounds a section and is drawn
     on scroll; --rule-ink is full ink, used once or twice per page. */
  --rule:        #DBD7D1;
  --rule-strong: #B9B4AC;
  --rule-ink:    #121213;

  /* ── ACCENT ───────────────────────────────────────────────────────────
     The product's lime, unchanged. On paper it is a FILL ONLY -- lime text
     on paper is 1.6:1 and unreadable, so there is no --acc text token and
     no rule that sets colour:var(--acc) outside an ink band. */
  --acc:     #FF6022;   /* orange — the marker, the active edge, a block  */
  --acc-hi:  #FF7A45;
  --acc-ink: #121213;   /* text sitting on the orange                     */
  --acc-tx:  #B83C0C;   /* orange as TEXT on paper (5.0:1)                */
  --amber:   #FFB500;
  --sky:     #8CCBFF;
  --red:     #FF3B30;
  --sun:     #FF9100;   /* the closing block, outcomes.digital's footer   */
  --marker:  linear-gradient(90deg, #FF6022 0%, #FF8B5D 100%);

  /* ── INK BAND ─────────────────────────────────────────────────────────
     A full-bleed inverted section. Inside .inkband these five are swapped
     onto the same names, so every component below works on both grounds
     without a single .inkband .foo override. */
  --ink-paper:  #F6F4F0;
  --ink-ink2:   #B5B1AB;
  --ink-rule:   #2E2E30;

  /* ── TYPE ─────────────────────────────────────────────────────────────
     Rule 4. Fraunces is variable on opsz/wght/SOFT/WONK; the site runs it
     soft-0 wonk-1 at display sizes, which is where its ear and its leaning
     'y' show. Zalando Sans is outcomes.digital's text face. */
  --face-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --face-text:    'Zalando Sans', system-ui, -apple-system, sans-serif;

  /* Fluid, and much wider-ranging than the product's fixed eight steps: a
     marketing hero at 132px and a footnote at 12px belong to one page. */
  --fs-hero:  clamp(46px, 8.6vw, 128px);
  --fs-h1:    clamp(38px, 6.0vw,  88px);
  --fs-h2:    clamp(31px, 4.4vw,  62px);
  --fs-h3:    clamp(23px, 2.4vw,  34px);
  --fs-h4:    clamp(19px, 1.5vw,  23px);
  --fs-lead:  clamp(17px, 1.35vw, 21px);
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    12.5px;
  --fs-label: 12px;     /* the uppercase label, one size only             */

  --lh-display: 0.94;   /* display type is set tight enough to read as a
                           block; the mask reveal depends on it            */
  --lh-snug:    1.22;
  --lh-body:    1.58;
  --lh-lead:    1.5;

  --ls-display: -0.028em;
  --ls-h:       -0.02em;
  --ls-body:    0;
  --ls-label:   0.04em;  /* outcomes.digital's "SAY HELLO" tracking        */

  --fw-book:   400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ── MEASURE ──────────────────────────────────────────────────────────
     Prose gets a measure. The product has no running text so it has no
     equivalent; a marketing page that lets a paragraph run 140 characters
     is the single most common reason one looks amateur. */
  --measure:      64ch;
  --measure-wide: 78ch;

  /* ── SPACE ────────────────────────────────────────────────────────────
     8px base, and the section steps are fluid: a 160px gap that survives
     a 390px phone has to be allowed to become 72px. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --sec:     clamp(72px, 9vw, 148px);   /* between sections               */
  --sec-sm:  clamp(44px, 5vw,  80px);

  /* ── SHAPE ────────────────────────────────────────────────────────────*/
  --r:      16px;       /* a card                                        */
  --r-lg:   24px;       /* a colour block                                */
  --r-pill: 999px;      /* every control                                 */
  --r-marker: 0.06em;   /* the highlighter: a near-square stroke         */
  --shadow-block: 0 20px 40px rgba(0,0,0,.08);
  --shadow-pill:  0 8px 20px rgba(0,0,0,.2);

  /* ── LAYOUT ───────────────────────────────────────────────────────────*/
  --wrap: 1340px;
  --mar:  clamp(20px, 5.2vw, 84px);
  --nav-h: 66px;

  /* ── MOTION ───────────────────────────────────────────────────────────
     Rule 5. --ease is expo-out: it arrives fast and settles, which is what
     makes a 600ms move feel decisive instead of slow. The product uses a
     symmetric 150ms cubic-bezier(.4,0,.2,1) and nothing else. */
  --dur:      620ms;
  --dur-mid:  380ms;
  --dur-fast: 200ms;
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
}

/* ── RESET / BASELINE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, p, figure, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Zero-specificity, for the reason bento-tokens.css spells out: an
   element-qualified reset outranks every single-class component rule. */
:where(button, input, select, textarea) {
  font: inherit; color: inherit; background: transparent; border: 0;
}
:where(button) { cursor: pointer; }

::selection { background: var(--acc); color: var(--acc-ink); }

/* The site is one long scroll; a heavy scrollbar competes with the rules. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--paper2); }
*::-webkit-scrollbar-thumb { background: var(--rule-strong); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink3); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.inkband :focus-visible { outline-color: var(--acc); }

/* ── VIEW TRANSITIONS ──────────────────────────────────────────────────
   Replaces the previous site's full-screen loading overlay outright. That
   overlay held navigation for 470ms so a spinner could be seen; this hands
   the same continuity to the browser, costs nothing, and degrades to an
   ordinary instant navigation where it is unsupported. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pr-out 180ms var(--ease-io) both; }
::view-transition-new(root) { animation: pr-in  320ms var(--ease)    both; }
@keyframes pr-out { to { opacity: 0 } }
@keyframes pr-in  { from { opacity: 0; transform: translateY(10px) } }

/* ════════════════════════════════════════════════════════════════════════
   MOTION PRIMITIVES  (Rule 5)
   Three devices, and the site uses no others.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. THE MASK REVEAL. A line of display type sits inside an overflow-hidden
      box and rises into it. .ln is the box, .ln > span is the line.

      The stagger here is PER LINE OF ONE HEADLINE, which is a typographic
      device: the sentence assembles itself in reading order. It is not the
      banned per-card stagger, and no grid in this stylesheet carries a
      transition-delay. */
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
.ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur) var(--ease);
}
.in .ln > span,
.ln.in > span { transform: translateY(0); }
.ln:nth-child(2) > span { transition-delay: 70ms; }
.ln:nth-child(3) > span { transition-delay: 140ms; }
.ln:nth-child(4) > span { transition-delay: 210ms; }

/* 2. THE RULE DRAW. Structural rules draw themselves left to right. */
.rule {
  display: block; height: 1px; background: var(--rule-strong);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease);
}
.rule.in, .in > .rule { transform: scaleX(1); }
.rule-ink { background: var(--ink); height: 2px; }
.inkband .rule { background: var(--ink-rule); }

/* 3. THE WIPE. A figure is uncovered left to right. Square, never rounded:
      the product's reveal is a rounded inset wipe and this must not read as
      the same gesture at a different radius.

      .wipe ALWAYS sits on a child of the observed .rv element, never on the
      .rv element itself. Chromium folds a target's own clip-path into the
      rect it hands IntersectionObserver, so an element that is both observed
      and clipped to zero width never reports as intersecting: it waits
      forever for a callback that cannot fire, and the figure never appears.
      The one-line rule is: observe the wrapper, clip the child. */
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur) var(--ease); }
.in > .wipe, .in .wipe { clip-path: inset(0 0 0 0); }

/* Plain copy blocks fade in place. No transform: a paragraph that slides is
   a paragraph you read twice. */
.fade { opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.fade.in, .in > .fade { opacity: 1; }

/* THE NO-JS CONTRACT. Every hidden state above is applied by a class the
   script adds, so a page with JS off or still parsing shows finished type
   rather than an empty column. (This is the one lesson from the product
   build that transfers unchanged.) */
html:not(.js) .ln > span { transform: none; }
html:not(.js) .rule      { transform: scaleX(1); }
html:not(.js) .wipe      { clip-path: none; }
html:not(.js) .fade      { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ln > span { transform: none !important; transition: none !important; }
  .rule { transform: scaleX(1) !important; transition: none !important; }
  .wipe { clip-path: none !important; transition: none !important; }
  .fade { opacity: 1 !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   TYPE  (Rule 4)
   ════════════════════════════════════════════════════════════════════════ */

/* Fraunces' variable axes. opsz is set per size class rather than left on
   `auto`, because `auto` keys off the COMPUTED px and a clamp()'d hero that
   lands at 48px on a phone would silently get text-grade serifs there. */
.d1, .d2, .d3, .d4, .dq {
  font-family: var(--face-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  text-wrap: balance;
}
.d1 { font-size: var(--fs-hero); }
/* The hero's 46px floor is wider than a 360px phone's column: "Know" sat
   alone on the first line and the headline ran to five. Scaling down on the
   narrowest phones keeps it to three lines from 320px up. */
@media (max-width: 380px) { .d1 { font-size: clamp(34px, 11.1vw, 40px); } }
.d2 { font-size: var(--fs-h1);   }
.d3 { font-size: var(--fs-h2);   }
.d4 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-h);
      font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 48; }

/* The emphasised phrase. Italic Fraunces with wonk on is the site's single
   most recognisable mark -- it is why this face was chosen. */
.it { font-style: italic; font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144; }

/* THE MARKER. Rule 2 says a filled box is reserved; this is what it is
   reserved for. Lime behind one phrase, ink on top, on the lopsided radius
   Rule 3 carves out. It is drawn ONCE per page.
   It is set as a background on an inline box rather than a pseudo-element
   so it breaks correctly across two lines, which is the whole point of a
   highlighter. */
.mk {
  background: var(--acc); color: var(--acc-ink);
  border-radius: var(--r-marker);
  padding: 0 0.18em; margin: 0 -0.06em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* A HEADLINE THAT CARRIES A MARKER NEEDS MORE LEADING THAN ONE THAT DOES NOT.
   --lh-display is 0.94, which is what makes a three-line statement read as a
   block. But .mk paints the full inline box, and an inline box is about 1.2em
   tall whatever the line-height is -- so at 0.94 the lime rectangle rises into
   the line above and eats its descenders. On the home hero it clipped the 'y'
   of "buy"; on the narrative's first panel it swallowed most of "before they".

   The fix is leading on the headline, not a shorter box: painting the marker
   as a part-height band instead would lose the lopsided radius that is the
   whole point of it. :has() is the right selector because the condition is
   genuinely "this heading contains one", and where it is unsupported the page
   simply keeps the tighter leading it has today. */
.d1:has(.mk), .d2:has(.mk), .d3:has(.mk), .pull:has(.mk) { line-height: 1.18; }

/* Running text. */
.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--ink2); max-width: var(--measure);
}
.prose { max-width: var(--measure); color: var(--ink2); }
.prose p + p { margin-top: 1.1em; }

/* THE LABEL. Uppercase, tracked to 0.16em, 11px, always in the text face.
   Every eyebrow, every category, every column head on the site is this one
   object -- the previous site had a pill with a pulsing dot in the same
   slot, which is a component; this is a piece of typography. */
.lbl {
  font-family: var(--face-text); font-size: var(--fs-label);
  font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink3);
  display: inline-block;
}
.lbl-ink { color: var(--ink); }

/* THE INDEX. A section's number, set in the margin. Print's way of telling
   you where you are; the product uses a breadcrumb because it has routes,
   the site uses a numeral because it has a sequence. */
.idx {
  font-family: var(--face-text); font-size: var(--fs-label);
  font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  color: var(--ink3); font-variant-numeric: tabular-nums;
}

/* Numbers. Display face, tabular, tracked tighter than the type around it. */
.num {
  font-family: var(--face-display); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semi); letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
}

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════════ */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--mar); }

/* A section is a rule, a two-column head, and a body. That is the entire
   page grammar; every page on the site is a stack of these. */
.sec { padding-block: var(--sec); }
.sec-sm { padding-block: var(--sec-sm); }
.sec > .rule:first-child { margin-bottom: var(--s7); }

/* The head: index + label pinned to a narrow left column, statement and
   lead in the wide one. Below 900px the columns stack and the index sits
   inline with the label, because a 3-character column on a phone is a
   column of one character per line. */
.shead { display: grid; grid-template-columns: 148px 1fr; gap: var(--s7); align-items: start; }
.shead-l { display: flex; flex-direction: column; gap: var(--s2); padding-top: 0.5em; }
.shead-r { min-width: 0; }
.shead-r .lead { margin-top: var(--s5); }
@media (max-width: 900px) {
  .shead { grid-template-columns: 1fr; gap: var(--s5); }
  .shead-l { flex-direction: row; align-items: baseline; gap: var(--s4); padding-top: 0; }
}

/* THE INK BAND. Rule 1's one inversion. Full-bleed out of .wrap using the
   100vw trick rather than a wrapper element, so it can be dropped into any
   page's flow. The five ground tokens are reassigned here, which is why no
   component below needs an .inkband variant. */
.inkband {
  --paper: var(--ink); --paper2: #1C1C1E; --paper3: #2A2A2C;
  /* --ink3 is lighter on the ink ground than on paper. The same value on
     both would be 4.3:1 here, and every eyebrow and every stat label on the
     site is set in it -- the floor for this token is 4.5:1 on whatever it
     sits on, not one hex that happens to pass on one of the two grounds. */
  --ink: var(--ink-paper); --ink2: var(--ink-ink2); --ink3: #9A968F;
  --rule: var(--ink-rule); --rule-strong: #3A3A3D; --rule-ink: var(--ink-paper);
  background: #121213; color: var(--ink-paper);
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-block: var(--sec);
}
.inkband > .wrap { max-width: var(--wrap); }
/* A lime band. Used once on the site, on the final call to action. */
.limeband {
  --paper: var(--acc); --paper2: #FF7A45; --paper3: #FF8B5D;
  --ink: var(--acc-ink); --ink2: #3A1A0A; --ink3: #4A2410;
  --rule: #FF8B5D; --rule-strong: #E4531A; --rule-ink: var(--acc-ink);
  background: var(--acc); color: var(--acc-ink);
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-block: var(--sec);
}

/* Full-bleed hairline across the page, outside any band. */
.hr { width: 100vw; margin-inline: calc(50% - 50vw); height: 1px; background: var(--rule); border: 0; }

/* ════════════════════════════════════════════════════════════════════════
   CONTROLS
   Square, ink-filled, and there are exactly three.
   ════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 50px; padding-inline: var(--s6);
  font-family: var(--face-text); font-size: var(--fs-sm);
  font-weight: var(--fw-semi); letter-spacing: 0.02em;
  border-radius: var(--r); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-io),
              color var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io);
}
/* Primary: solid ink. On an ink band it inverts to paper automatically
   because both sides are named tokens. */
.btn-1 { background: var(--ink); color: var(--paper); }
.btn-1:hover { background: var(--acc); color: var(--acc-ink); }
/* Secondary: a hairline box that fills on hover. box-shadow, not border, so
   the button's height never shifts by 2px between the two states. */
.btn-2 { box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--ink); }
.btn-2:hover { box-shadow: inset 0 0 0 1px var(--ink); background: var(--ink); color: var(--paper); }
/* Tertiary: a text link with an arrow. */
.btn-3 { padding: 0; height: auto; color: var(--ink); }
.btn-3 svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-io); }
.btn-3:hover svg { transform: translateX(4px); }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btns { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* THE DRAWN UNDERLINE. Every inline link on the site. The rule is a
   pseudo-element scaled from the right on rest and the left on hover, so
   the old underline retracts and the new one draws -- one gesture, not a
   fade. */
.lk { position: relative; color: inherit; }
.lk::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: 100% 50%;
  transition: transform var(--dur-mid) var(--ease);
}
.lk:hover::after { transform: scaleX(0); transform-origin: 0 50%; }
/* The inverse: no rule at rest, drawn on hover. For links inside prose. */
.lk-d::after { transform: scaleX(0); transform-origin: 0 50%; }
.lk-d:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.prose a:hover { border-bottom-color: var(--ink); background: var(--acc); }

/* ════════════════════════════════════════════════════════════════════════
   THE MASTHEAD
   A newspaper masthead, not an app bar: it is transparent over the hero,
   and the only thing that changes on scroll is that a rule appears under it.
   ════════════════════════════════════════════════════════════════════════ */

.nv {
  position: fixed; inset: 0 0 auto; z-index: 800;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s6);
  padding-inline: var(--mar);
  background: transparent;
  transition: background var(--dur-mid) var(--ease-io),
              box-shadow var(--dur-mid) var(--ease-io);
}
.nv.stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: inset 0 -1px 0 var(--rule);
}
body { padding-top: var(--nav-h); }

/* The lockup. A filled lime square and the name -- the same two parts the
   product's sidebar uses, set in the display face at the site's scale. */
.nv-brand { display: inline-flex; align-items: center; gap: var(--s3); }
.bn-mark { width: 13px; height: 13px; background: var(--acc); flex: 0 0 auto; }
.bn-word {
  font-family: var(--face-display); font-size: 21px; font-weight: var(--fw-semi);
  letter-spacing: -0.03em; font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
  line-height: 1;
}

.nv-links { display: flex; align-items: center; gap: var(--s6); margin-left: var(--s5); }
.nv-link {
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink2); position: relative; padding-block: var(--s2);
}
.nv-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-mid) var(--ease);
}
.nv-link:hover { color: var(--ink); }
.nv-link:hover::after { transform: scaleX(1); }
.nv-link.active { color: var(--ink); }
.nv-link.active::after { background: var(--acc); transform: scaleX(1); height: 3px; }

.nv-cta { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.nv-cta .btn { height: 40px; padding-inline: var(--s5); }
.nv-signin {
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink2);
}
.nv-signin:hover { color: var(--ink); }

/* The burger draws two rules and crosses them. */
.nv-burger { display: none; width: 34px; height: 34px; position: relative; }
.nv-burger i {
  position: absolute; left: 6px; right: 6px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) linear;
}
.nv-burger i:nth-child(1) { top: 13px; }
.nv-burger i:nth-child(2) { bottom: 13px; }
body.menu-open .nv-burger i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .nv-burger i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
body.menu-open .nv-burger i { background: var(--ink-paper); }
/* The masthead sits ON TOP of the sheet, so the wordmark has to invert with
   it or it vanishes into the ink. */
body.menu-open .nv { background: transparent; box-shadow: none; }
body.menu-open .nv .bn-word { color: var(--ink-paper); }

/* The phone menu is a full-screen ink page with the links set at display
   size. It is the site's argument in one screen: the product would never
   show a nav item at 40px, and this is not the product. */
.nv-sheet {
  position: fixed; inset: 0; z-index: 790;
  background: #121213; color: var(--ink-paper);
  padding: calc(var(--nav-h) + var(--s7)) var(--mar) var(--s7);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s4);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur) var(--ease);
  visibility: hidden;
}
.nv-sheet.open { clip-path: inset(0 0 0 0); visibility: visible; }
/* Direct children only. The sheet's foot holds two ordinary buttons, and
   an unscoped `.nv-sheet a` set the "Log in" control in 56px Fraunces. */
.nv-sheet > a {
  font-family: var(--face-display); font-size: clamp(34px, 11vw, 56px);
  font-weight: var(--fw-semi); letter-spacing: -0.03em; line-height: 1.06;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 72;
  color: var(--ink-paper);
  display: flex; align-items: baseline; gap: var(--s4);
}
.nv-sheet > a .idx { color: #8A867F; }
.nv-sheet > a:hover { color: var(--acc-tx); }
.nv-sheet .nv-sheet-foot { margin-top: var(--s7); display: flex; gap: var(--s3); }
body.menu-open { overflow: hidden; }

@media (max-width: 1040px) {
  .nv-links { display: none; }
  .nv-burger { display: block; }
  .nv-cta .nv-signin { display: none; }
}
@media (max-width: 560px) { .nv-cta .btn { display: none; } }

/* THE SCROLL RULE. A 2px lime line across the very top that fills as you
   read. The previous site had the same idea as a gradient bar; this one is
   flat, because Rule 1 has no gradients in it. */
.prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 900;
  background: var(--acc); pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   THE HERO
   ════════════════════════════════════════════════════════════════════════ */

.hero { padding-block: clamp(56px, 9vw, 130px) clamp(40px, 5vw, 72px); }
.hero .d1 { margin-block: var(--s5) 0; }
.hero-2col { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: var(--s7) var(--s9); align-items: end; }
.hero-2col .lead { max-width: none; }
@media (max-width: 1000px) { .hero-2col { grid-template-columns: 1fr; gap: var(--s6); align-items: start; } }

/* The hero's foot: the lead and the buttons sit under the statement, on a
   rule, with the index of what follows in the margin. */
.hero-foot { display: grid; grid-template-columns: 148px 1fr auto; gap: var(--s6) var(--s7); align-items: start; margin-top: var(--s7); }
@media (max-width: 900px) { .hero-foot { grid-template-columns: 1fr; align-items: start; } }

/* ════════════════════════════════════════════════════════════════════════
   THE TICKER
   Continuous horizontal type. Editorial, and load-bearing: it is how the
   site says "there are twenty-six of these" without a number.
   ════════════════════════════════════════════════════════════════════════ */

.tick { width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden;
        border-block: 1px solid var(--rule); padding-block: var(--s4); }
.tick-track { display: flex; width: max-content; animation: tick 46s linear infinite; }
.tick:hover .tick-track { animation-play-state: paused; }
.tick-track > * { display: flex; align-items: center; flex: 0 0 auto; }
.tick-i {
  font-family: var(--face-display); font-size: clamp(20px, 2.4vw, 32px);
  font-weight: var(--fw-med); letter-spacing: -0.02em; color: var(--ink);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48;
  padding-inline: var(--s5); white-space: nowrap;
}
.tick-i::after { content: ''; width: 7px; height: 7px; background: var(--acc); margin-left: var(--s5); flex: 0 0 auto; }
a.tick-i:hover { font-style: italic; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick-track { animation: none; } }

/* A quieter ticker for logos / integration names, in the text face. */
.tick-sm { border-block: 1px solid var(--rule); }
.tick-sm .tick-i {
  font-family: var(--face-text); font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink2);
}
.tick-sm .tick-track { animation-duration: 38s; }

/* ════════════════════════════════════════════════════════════════════════
   THE CELL GRID  (Rule 2)
   The site's answer to a card. No fill, no shadow, no lift: a cell is the
   area between four rules. Hover washes the ground one step and turns the
   top rule lime. NOTHING in here carries a transition-delay.
   ════════════════════════════════════════════════════════════════════════ */

/* THE SEPARATORS ARE BOX-SHADOWS, NOT BORDERS, and the reason is the last
   column. A border is painted INSIDE the element, so `overflow: hidden` on
   the grid cannot clip the right-hand rule of the right-hand column: every
   cells grid closed itself with a stray vertical line at the page margin
   while the left side stayed open. A box-shadow is painted outside the
   border box, so the last column's falls beyond the grid and IS clipped.
   The bottom row loses its shadow the same way, so the grid supplies that
   rule itself. */
.cells { display: grid; gap: 0; overflow: hidden;
         border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cells-2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.cells-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cells-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.cell {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s6) var(--s5) var(--s7);
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
  transition: background var(--dur-fast) var(--ease-io);
  min-width: 0;
}
/* The lime edge. A 2px line drawn across the top of the cell on hover --
   the same left-origin scaleX as every other rule on the site, so hovering
   a cell reads as the page drawing a line, not as a card waking up. */
/* top:0, not -1px: the grid clips to its content box, so a lime edge hung
   one pixel above the first row would never be drawn. */
.cell::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--acc); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-mid) var(--ease);
}
a.cell:hover, button.cell:hover { background: var(--paper2); }
a.cell:hover::before, button.cell:hover::before { transform: scaleX(1); }

.cell-idx { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.cell h3, .cell h4 {
  font-family: var(--face-display); font-size: var(--fs-h4);
  font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--ls-h);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 36;
  margin-bottom: var(--s3);
}
.cell p { color: var(--ink2); font-size: var(--fs-sm); }
.cell .more { margin-top: auto; padding-top: var(--s5); display: inline-flex; align-items: center; gap: var(--s2);
              font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
              text-transform: uppercase; color: var(--ink); }
.cell .more svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-io); }
a.cell:hover .more svg { transform: translateX(4px); }

/* A cell's icon. Line art at one size, inheriting the ink -- the previous
   site gave every card a coloured gradient tile, which is what made forty
   cards read as forty products. */
.cell-ic { width: 26px; height: 26px; margin-bottom: var(--s5); color: var(--ink); }
.cell-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.cell-ic svg [fill]:not([fill="none"]) { fill: currentColor; }

/* ════════════════════════════════════════════════════════════════════════
   FIGURES
   ════════════════════════════════════════════════════════════════════════ */

/* THE STAT. A number at display scale over a label, under a rule. No tile,
   no border, no background -- the size IS the emphasis. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s6) var(--s7); }
.stat { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.stat b { display: block; font-family: var(--face-display); font-size: clamp(44px, 5.4vw, 76px);
          font-weight: var(--fw-semi); line-height: 0.92; letter-spacing: -0.045em;
          font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: var(--s3); font-size: var(--fs-label); font-weight: var(--fw-semi);
             letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink3); }
a.stat { transition: border-color var(--dur-fast) var(--ease-io); }
a.stat:hover { border-top-color: var(--acc); }

/* THE LEDGER. A numbered list of rows divided by hairlines. Used wherever
   the previous site used a column of glass cards: steps, pains, plays,
   points, signal groups. */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s5);
  padding-block: var(--s5); border-bottom: 1px solid var(--rule);
  align-items: start;
}
.ledger-row > .idx { padding-top: 0.35em; }
.ledger-row h4 { font-family: var(--face-display); font-size: var(--fs-h4); font-weight: var(--fw-semi);
                 letter-spacing: var(--ls-h); line-height: var(--lh-snug);
                 font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 36; }
.ledger-row p { color: var(--ink2); font-size: var(--fs-sm); margin-top: var(--s2); max-width: var(--measure); }
a.ledger-row { transition: background var(--dur-fast) var(--ease-io); }
a.ledger-row:hover { background: var(--paper2); }
@media (max-width: 640px) { .ledger-row { grid-template-columns: 40px 1fr; gap: var(--s4); } }

/* THE PULL QUOTE. The one place the display face runs at hero size inside
   the page body. */
.pull { font-family: var(--face-display); font-size: var(--fs-h2); font-weight: var(--fw-book);
        line-height: 1.08; letter-spacing: var(--ls-display); font-style: italic;
        font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
        max-width: 22ch; }

/* TAGS. A tag is a word on a rule, not a pill. */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  font-size: var(--fs-xs); color: var(--ink2);
  padding: var(--s1) var(--s3); box-shadow: inset 0 0 0 1px var(--rule);
  white-space: nowrap;
}
.tag-fill { background: var(--acc); color: var(--acc-ink); box-shadow: none; font-weight: var(--fw-semi); }

/* ════════════════════════════════════════════════════════════════════════
   SEARCH AND FILTER
   The banned-effects note in the brief singles out "an animated conic-
   gradient glowing ring around search inputs on focus". There is no ring
   here at all: the field is a single rule that goes ink and 2px on focus.
   ════════════════════════════════════════════════════════════════════════ */

.srch { display: flex; align-items: center; gap: var(--s3); position: relative;
        border-bottom: 1px solid var(--rule-strong); padding-block: var(--s3); min-width: 220px; }
.srch::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-mid) var(--ease);
}
.srch:focus-within::after { transform: scaleX(1); }
.srch svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--ink3); fill: none; stroke-width: 1.8; }
.srch input { flex: 1; min-width: 0; outline: 0; font-size: var(--fs-sm); }
.srch input::placeholder { color: var(--ink3); }

/* Filter chips: text on a rule, and the selected one is the only fill. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink2);
  padding: var(--s2) var(--s4); box-shadow: inset 0 0 0 1px var(--rule);
  transition: color var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io),
              background var(--dur-fast) var(--ease-io);
}
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); box-shadow: none; }

.empty { padding: var(--s8) 0; text-align: center; color: var(--ink3); font-size: var(--fs-sm); display: none; }

/* ════════════════════════════════════════════════════════════════════════
   THE COLOPHON  (footer)
   ════════════════════════════════════════════════════════════════════════ */

/* No top margin: every page ends on the closing band, whose own padding
   is the gap. A --sec margin here put 148px of dead paper between the
   band and the rule. */
.foot { border-top: 2px solid var(--ink); }
.foot-in { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: var(--s8) var(--s9); padding-block: var(--s8); }
.foot-tag { font-family: var(--face-display); font-size: var(--fs-h3); font-weight: var(--fw-book);
            font-style: italic; line-height: 1.12; letter-spacing: var(--ls-h); max-width: 18ch;
            font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48; margin-block: var(--s5) var(--s6); }
.foot-cols { display: flex; gap: var(--s9); }
.foot-col { display: flex; flex-direction: column; gap: var(--s3); min-width: 120px; }
.foot-col h5 { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
               text-transform: uppercase; color: var(--ink3); margin-bottom: var(--s2); }
.foot-col a { font-size: var(--fs-sm); color: var(--ink2); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between;
               padding-block: var(--s5); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--ink3); }
.foot-links { display: flex; gap: var(--s5); }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr; } .foot-cols { flex-wrap: wrap; gap: var(--s7); } }

/* ════════════════════════════════════════════════════════════════════════
   OVERLAYS
   One shell for the lead form, the sign-up pop-up and the video. It enters
   as a clip wipe from the top edge -- the same gesture as the phone menu,
   because they are the same kind of object.
   ════════════════════════════════════════════════════════════════════════ */

.ov { position: fixed; inset: 0; z-index: 1000; display: none; }
.ov.on { display: block; }
.ov-bg { position: absolute; inset: 0; background: rgba(18,18,19,.42); animation: ovbg var(--dur-mid) var(--ease) both; }
@keyframes ovbg { from { opacity: 0 } }
.ov-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  background: var(--paper); border-left: 1px solid var(--rule-strong);
  padding: var(--s7) clamp(20px, 4vw, 44px) var(--s8);
  overflow-y: auto;
  animation: ovin var(--dur) var(--ease) both;
}
@keyframes ovin { from { transform: translateX(100%) } }
@media (max-width: 560px) { .ov-panel { width: 100%; border-left: 0; } }

/* A centred panel, for the video and the sign-up pop-up. */
.ov-mid {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, calc(100% - 2 * var(--mar))); max-height: calc(100% - 2 * var(--s7));
  overflow-y: auto; background: var(--paper);
  padding: var(--s7) clamp(20px, 4vw, 44px) var(--s7);
  animation: ovmid var(--dur) var(--ease) both;
}
@keyframes ovmid { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) } }
.ov-sm { width: min(460px, calc(100% - 2 * var(--mar))); }

.ov-x { position: absolute; top: var(--s5); right: var(--s5); width: 34px; height: 34px;
        display: grid; place-items: center; color: var(--ink2); z-index: 2; }
.ov-x:hover { color: var(--ink); background: var(--paper2); }
.ov-x svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.ov-h { margin-bottom: var(--s6); }
.ov-h h3 { font-family: var(--face-display); font-size: var(--fs-h3); font-weight: var(--fw-semi);
           letter-spacing: var(--ls-h); line-height: var(--lh-snug); margin-block: var(--s3) var(--s2);
           font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48; }
.ov-h p { color: var(--ink2); font-size: var(--fs-sm); }

/* ── FORM ────────────────────────────────────────────────────────────────
   Underlined fields, no boxes. The label sits above and shrinks to a
   tracked cap when the field has content, so a filled form still reads as
   a list of named things. */
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
.f { position: relative; margin-bottom: var(--s6); }
.f label { display: block; font-size: var(--fs-label); font-weight: var(--fw-semi);
           letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink3); margin-bottom: var(--s2); }
.f label .opt { text-transform: none; letter-spacing: 0; font-weight: var(--fw-book); }
.f input, .f textarea {
  width: 100%; outline: 0; font-size: var(--fs-body); color: var(--ink);
  border-bottom: 1px solid var(--rule-strong); padding-block: var(--s2) var(--s3);
  resize: vertical;
}
.f input::placeholder, .f textarea::placeholder { color: var(--ink3); }
.f::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
            background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
            transition: transform var(--dur-mid) var(--ease); }
.f:focus-within::after { transform: scaleX(1); }
.f.bad input, .f.bad textarea { border-bottom-color: #C0392B; }
.f.bad::after { background: #C0392B; transform: scaleX(1); }
.f.ok::after { background: var(--acc); transform: scaleX(1); }

.f-err { color: #A5301F; font-size: var(--fs-sm); min-height: 1.2em; }
.f-note { font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s5); }
.f-submit { width: 100%; justify-content: center; margin-top: var(--s3); }
.f-submit.loading { opacity: .6; pointer-events: none; }

/* The two-way toggle at the top of the lead form. */
.f-pills { display: flex; gap: var(--s2); margin-bottom: var(--s6); }
.f-pill { flex: 1; text-align: center; font-size: var(--fs-label); font-weight: var(--fw-semi);
          letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink2);
          padding: var(--s3); box-shadow: inset 0 0 0 1px var(--rule);
          transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io); }
.f-pill.on { background: var(--ink); color: var(--paper); box-shadow: none; }

/* The success state. No confetti: a rule draws, a mark is struck, done. */
.f-done { display: none; text-align: left; }
.f-done.on { display: block; }
.f-done .mark { width: 44px; height: 44px; background: var(--acc); display: grid; place-items: center; margin-bottom: var(--s5); }
.f-done .mark svg { width: 22px; height: 22px; stroke: var(--acc-ink); stroke-width: 2.4; fill: none; }
.f-done h3 { font-family: var(--face-display); font-size: var(--fs-h3); font-weight: var(--fw-semi);
             letter-spacing: var(--ls-h); font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48; }
.f-done p { color: var(--ink2); margin-block: var(--s3) var(--s6); }

/* The Google button host. GSI draws its own pill; the site boxes it so the
   surrounding square geometry is not broken by one rounded control. */
.gbtn { display: flex; justify-content: center; padding: var(--s4); box-shadow: inset 0 0 0 1px var(--rule); min-height: 60px; }
.gbtn > div { max-width: 100%; }
.g-alt { display: none; margin-top: var(--s4); }
.g-err, .g-ok { display: flex; gap: var(--s2); font-size: var(--fs-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s5); }
.g-err { background: #F6E3DF; color: #8C2A19; }
.g-ok { background: var(--acc); color: var(--acc-ink); }
.g-secure { display: flex; align-items: center; justify-content: center; gap: var(--s2);
            font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s5); }
.g-secure svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* The video frame. 16:9, square corners, ink ground so the player edge
   never shows against paper. */
.vframe { position: relative; aspect-ratio: 16 / 9; background: #121213; overflow: hidden; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
       justify-content: center; gap: var(--s4); text-align: center; padding: var(--s7); color: var(--ink-paper); }
.vph b { font-family: var(--face-display); font-size: var(--fs-h4); font-weight: var(--fw-semi); }
.vph span { font-size: var(--fs-xs); color: #9A968F; max-width: 44ch; }
.vph .play { width: 58px; height: 58px; background: var(--acc); display: grid; place-items: center; }
.vph .play svg { width: 22px; height: 22px; fill: var(--acc-ink); }

/* ════════════════════════════════════════════════════════════════════════
   THE DIRECTORY  (/agents)
   ════════════════════════════════════════════════════════════════════════ */

.dir-bar { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: end; justify-content: space-between; margin-bottom: var(--s6); }
.dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); overflow: hidden;
       border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* An agent cell leads with its name in the display face, because in a
   directory the name is the thing you are scanning for. The category and
   the badge are labels above it; the summary is beneath. */
.ag { position: relative; display: flex; flex-direction: column; padding: var(--s6) var(--s5) var(--s6);
      box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
      transition: background var(--dur-fast) var(--ease-io); min-width: 0; }
.ag::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--acc);
              transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-mid) var(--ease); }
.ag:hover { background: var(--paper2); }
.ag:hover::before { transform: scaleX(1); }
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.ag-badge { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
            text-transform: uppercase; background: var(--acc); color: var(--acc-ink); padding: 2px var(--s2); }
.ag-badge.building { background: var(--paper3); color: var(--ink2); }
.ag h3 { font-family: var(--face-display); font-size: clamp(22px, 2vw, 28px); font-weight: var(--fw-semi);
         letter-spacing: var(--ls-h); line-height: 1.1; font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 36; }
.ag-role { font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s2); }
.ag p { font-size: var(--fs-sm); color: var(--ink2); margin-top: var(--s4); }
.ag-metric { margin-top: var(--s4); font-family: var(--face-display); font-size: var(--fs-sm);
             font-weight: var(--fw-semi); color: var(--ink); }
.ag-foot { margin-top: auto; padding-top: var(--s6); display: flex; align-items: center; justify-content: space-between; }
.ag-foot .arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6;
                      transition: transform var(--dur-fast) var(--ease-io); }
.ag:hover .arrow svg { transform: translateX(5px); }

/* ════════════════════════════════════════════════════════════════════════
   THE AGENT PAGE
   ════════════════════════════════════════════════════════════════════════ */

.crumb { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-label); font-weight: var(--fw-semi);
         letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink3); padding-top: var(--s6); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--rule-strong); }

.agp { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: var(--s7) var(--s9); align-items: start; }
@media (max-width: 960px) { .agp { grid-template-columns: 1fr; } }
.agp-side { display: flex; flex-direction: column; gap: var(--s6); position: sticky; top: calc(var(--nav-h) + var(--s5)); }
@media (max-width: 960px) { .agp-side { position: static; } }
.side-block { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.side-block + .side-block { margin-top: var(--s2); }
.side-block .lbl { display: block; margin-bottom: var(--s3); }
.side-cta { background: var(--ink); color: var(--ink-paper); padding: var(--s6) var(--s5); }
.side-cta b { font-family: var(--face-display); font-size: var(--fs-h4); font-weight: var(--fw-semi); display: block; }
.side-cta p { color: var(--ink-ink2); font-size: var(--fs-sm); margin-block: var(--s3) var(--s5); }
.side-cta .btn-1 { background: var(--acc); color: var(--acc-ink); width: 100%; justify-content: center; }
.side-cta .btn-1:hover { background: var(--acc-hi); }
.side-cta .btn-2 { box-shadow: inset 0 0 0 1px #3A3A3D; color: var(--ink-paper); width: 100%; justify-content: center; margin-top: var(--s2); }
.side-cta .btn-2:hover { background: var(--ink-paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-paper); }

/* The three-up "why / how / who" block: three columns under one rule. */
.trips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s6) var(--s7); }
.trip { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.trip h4 { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
           text-transform: uppercase; color: var(--ink3); margin-bottom: var(--s3); }
.trip p { font-size: var(--fs-sm); color: var(--ink2); }

/* ════════════════════════════════════════════════════════════════════════
   THE PRODUCT FIGURE
   A picture of the product, drawn in the product's own light surfaces:
   white tiles on a stone frame, one orange tile. (The rules below were
   written for the earlier dark product; the OUTCOMES block at the end of
   this file restates them.)
   ════════════════════════════════════════════════════════════════════════ */

.shot { background: #EBE9E5; color: #121213; padding: clamp(14px, 1.6vw, 22px);
        font-family: var(--face-text); font-size: 13px; line-height: 1.5; }
.shot-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.shot-ttl { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semi); font-size: 13px; }
.shot-ttl i { width: 7px; height: 7px; background: #FF6022; border-radius: 50%; }
.shot-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px;
             letter-spacing: .1em; text-transform: uppercase; color: #6F6B66; }
.shot-live i { width: 6px; height: 6px; background: #FF6022; border-radius: 50%; animation: shotpulse 2.2s ease-in-out infinite; }
@keyframes shotpulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.shot-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.shot-kpi { background: #FFFFFF; border-radius: 12px; padding: 14px 16px; }
/* Rule 4 of the PRODUCT's system, honoured here: exactly one tile is filled. */
.shot-kpi.lead { background: #FF6022; color: #121213; }
.shot-kpi .kl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6F6B66; }
.shot-kpi.lead .kl { color: #121213; opacity: .72; }
.shot-kpi .kv { display: block; font-family: var(--face-text); font-size: 26px; font-weight: var(--fw-semi);
                letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.shot-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
@media (max-width: 720px) { .shot-grid { grid-template-columns: 1fr; } .shot-kpis { grid-template-columns: 1fr; } }
.shot-panel { background: #FFFFFF; border-radius: 12px; padding: 14px 16px; min-width: 0;
               display: flex; flex-direction: column; }
.shot-ph { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6F6B66; margin-bottom: 12px; }
.shot-bars { display: flex; align-items: flex-end; gap: 5px; flex: 1; min-height: 92px; }
.shot-bars span { flex: 1; background: #DBD7D1; border-radius: 3px; height: var(--h); }
.shot-bars span.hi { background: #FF6022; }
.shot-wl { display: flex; flex-direction: column; gap: 8px; }
.shot-wlr { display: grid; grid-template-columns: 16px 1fr 90px 34px; gap: 10px; align-items: center; font-size: 12.5px; }
.shot-wlr .rk { color: #6F6B66; font-variant-numeric: tabular-nums; }
.shot-wlr .co { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-wlr .bar { height: 6px; background: #DBD7D1; border-radius: 3px; overflow: hidden; }
.shot-wlr .bar i { display: block; height: 100%; width: var(--w); background: #8CCBFF; }
.shot-wlr:first-child .bar i { background: #FF6022; }
.shot-wlr .sc { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }
.shot-feed { margin-top: 10px; background: #FFFFFF; border-radius: 12px; padding: 14px 16px; }
.shot-frow { display: grid; grid-template-columns: 1fr auto 46px 34px; gap: 10px; align-items: center;
             padding-block: 7px; font-size: 12.5px; opacity: 0; transform: translateY(-6px);
             transition: opacity 260ms ease, transform 260ms ease; }
.shot-frow + .shot-frow { border-top: 1px solid #EBE9E5; }
.shot-frow.in { opacity: 1; transform: none; }
.shot-frow.out { opacity: 0; }
.shot-frow .fchip { font-size: 11px; color: #6F6B66; white-space: nowrap; }
.shot-frow .fwhen { font-size: 11px; color: #6F6B66; text-align: right; }
.shot-frow .fsc { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }
@media (max-width: 560px) { .shot-frow { grid-template-columns: 1fr 46px 34px; } .shot-frow .fchip { display: none; } }
.shot-cap { font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s3); }

/* ════════════════════════════════════════════════════════════════════════
   THE COMPARISON  (/why)
   A real table, set like a table: hairlines, tabular, no fills. The only
   coloured column is ours, and it is coloured with the lime top rule.
   ════════════════════════════════════════════════════════════════════════ */

.cmp { overflow-x: auto; }
.cmp table { border-collapse: collapse; width: 100%; min-width: 860px; font-size: var(--fs-sm); }
.cmp th, .cmp td { text-align: left; padding: var(--s4) var(--s4); border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp thead th { border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--s5); }
.cmp thead th .ttl { display: block; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.cmp thead th .sub { display: block; font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s1); }
.cmp .own { background: var(--paper2); }
.cmp thead th.own { border-top: 3px solid var(--acc); }
.cmp tbody th { font-weight: var(--fw-med); color: var(--ink); width: 28%; }
/* Not scoped under .cmp: the legend sits OUTSIDE the table, and an inline
   <svg> with no width and no matching rule falls back to 300x150, not to
   the font size. */
.mk-y, .mk-p, .mk-n { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; }
.mk-y svg, .mk-p svg, .mk-n svg { width: 15px; height: 15px; stroke-width: 2.2; fill: none; }
.mk-y { color: var(--ink); }
.cmp .own .mk-y { background: var(--acc); color: var(--acc-ink); }
.mk-p { color: var(--ink3); }
.mk-n { color: var(--rule-strong); }
.fnb { font-size: 10px; vertical-align: super; color: var(--ink3); margin-left: 2px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); font-size: var(--fs-xs); color: var(--ink3); }
.cmp-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.fnotes { columns: 2; column-gap: var(--s7); font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s6); }
.fnotes p { break-inside: avoid; margin-bottom: var(--s3); }
@media (max-width: 720px) { .fnotes { columns: 1; } }

/* ════════════════════════════════════════════════════════════════════════
   LEGAL
   A long document wants one column, a measure, and rules between sections.
   ════════════════════════════════════════════════════════════════════════ */

.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s9); align-items: start; }
@media (max-width: 1000px) { .legal { grid-template-columns: 1fr; gap: var(--s6); } }
.legal-side { position: sticky; top: calc(var(--nav-h) + var(--s6)); }
@media (max-width: 1000px) { .legal-side { position: static; } }
.legal-body { max-width: var(--measure-wide); font-size: var(--fs-sm); color: var(--ink2); }
.legal-body p { margin-bottom: 1.05em; }
.legal-body h2 { font-family: var(--face-display); font-size: var(--fs-h3); font-weight: var(--fw-semi);
                 letter-spacing: var(--ls-h); line-height: var(--lh-snug); color: var(--ink);
                 font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 48;
                 margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule); margin-bottom: var(--s4); }
.legal-body h4 { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
                 text-transform: uppercase; color: var(--ink); margin-top: var(--s6); margin-bottom: var(--s3); }
.legal-body ul { margin-bottom: 1.05em; }
.legal-body li { position: relative; padding-left: var(--s5); margin-bottom: var(--s2); }
.legal-body li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 1px; background: var(--rule-strong); }
.legal-meta { font-size: var(--fs-xs); color: var(--ink3); }
.legal-cats { border-top: 1px solid var(--rule); margin-block: var(--s5) 1.05em; }
.legal-cat { display: grid; grid-template-columns: 1fr 150px; gap: var(--s5); padding-block: var(--s4);
             border-bottom: 1px solid var(--rule); }
.legal-cat b { color: var(--ink); font-weight: var(--fw-semi); }
.legal-cat p { margin: var(--s1) 0 0; font-size: var(--fs-xs); }
.legal-cat > span { font-size: var(--fs-xs); color: var(--ink3); text-align: right; }
@media (max-width: 640px) { .legal-cat { grid-template-columns: 1fr; } .legal-cat > span { text-align: left; } }

/* ════════════════════════════════════════════════════════════════════════
   LOGIN
   No card, no glow, no orbiting rings. A rule, a statement, a button.
   ════════════════════════════════════════════════════════════════════════ */

.login { min-height: calc(100vh - var(--nav-h) - 120px); display: grid; place-items: center; padding-block: var(--sec-sm); }
.login-in { width: min(420px, 100%); text-align: center; }
.login-in .d3 { margin-block: var(--s4) var(--s3); }
.login-sub { color: var(--ink2); font-size: var(--fs-sm); margin-bottom: var(--s6); }
.login-foot { font-size: var(--fs-xs); color: var(--ink3); margin-top: var(--s6);
              padding-top: var(--s5); border-top: 1px solid var(--rule); }

/* ════════════════════════════════════════════════════════════════════════
   THE STORY  (home · how it works)
   The previous site pinned this section and scrubbed six CSS variables off
   scroll position through a lerp loop -- 40 lines of JS whose entire output
   was "which step is lit". This is the same story told with position:
   sticky and one IntersectionObserver: the figure holds while the steps
   scroll past it, and the active step is marked by a rule, not a glow.
   ════════════════════════════════════════════════════════════════════════ */

.story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s9); align-items: stretch; }
@media (max-width: 960px) { .story { grid-template-columns: 1fr; gap: var(--s7); } }
/* The sticky element is the figure's CHILD, not the grid item. A grid item
   stretched to the row height cannot travel inside itself, and one aligned
   to `start` is only as tall as its content -- either way `position: sticky`
   on the item is a no-op. Stretching the item and sticking its child gives
   the child the full column to move in. */
.story-fig > * { position: sticky; top: calc(var(--nav-h) + var(--s7)); }
@media (max-width: 960px) { .story-fig { order: -1; } .story-fig > * { position: static; } }
.story-steps { border-top: 1px solid var(--rule); }
.story-step {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s5);
  padding-block: clamp(var(--s6), 6vw, var(--s8));
  border-bottom: 1px solid var(--rule); align-items: start;
  transition: opacity var(--dur-mid) var(--ease);
}
.story-step:not(.on) { opacity: .42; }
.story-step h4 { font-family: var(--face-display); font-size: var(--fs-h3); font-weight: var(--fw-semi);
                 letter-spacing: var(--ls-h); line-height: 1.1;
                 font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48; }
.story-step p { color: var(--ink2); font-size: var(--fs-sm); margin-top: var(--s3); max-width: 46ch; }
.story-step .idx { padding-top: 0.5em; position: relative; }
.story-step.on .idx { color: var(--ink); }
.story-step.on .idx::before { content: ''; position: absolute; left: 0; top: 0; width: 26px; height: 2px; background: var(--acc); }
@media (max-width: 640px) { .story-step { grid-template-columns: 40px 1fr; gap: var(--s4); } }

/* The figure itself: a single account card in the product's own palette,
   reusing .shot's ground so the two product figures on the home page are
   demonstrably the same product. */
.acct { background: #FFFFFF; color: #121213; padding: clamp(18px, 2vw, 26px); font-size: 13px; }
.acct-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.acct-co { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semi); font-size: 15px; }
.acct-co i { width: 7px; height: 7px; background: #FF6022; border-radius: 50%; }
.acct-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6F6B66; }
.acct-score { display: flex; align-items: baseline; gap: 12px; padding-block: var(--s5); border-block: 1px solid #EBE9E5; }
.acct-score b { font-size: clamp(52px, 6vw, 82px); font-weight: var(--fw-semi); line-height: .9;
                letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #FF6022; }
.acct-score span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6F6B66; }
.acct-why { margin-top: var(--s5); }
.acct-why .kl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6F6B66; }
.acct-why p { margin-top: 6px; color: #444444; font-size: 13.5px; }
.acct-draft { margin-top: var(--s5); background: #FF6022; color: #121213; width: 100%;
              justify-content: center; height: 44px; font-weight: var(--fw-semi); font-size: 13px;
              display: inline-flex; align-items: center; gap: 8px; }
.acct-draft:hover { background: #FF7A45; }

/* ════════════════════════════════════════════════════════════════════════
   INDUSTRIES
   ════════════════════════════════════════════════════════════════════════ */

.ind-flag { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: var(--s7);
            border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
            padding: var(--s6) 0 var(--s7); transition: background var(--dur-fast) var(--ease-io); }
.ind-flag:hover { background: var(--paper2); }
@media (max-width: 860px) { .ind-flag { grid-template-columns: 1fr; } }
.ind-segs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-xs); color: var(--ink3); }
.ind-segs span { display: inline-flex; align-items: center; gap: var(--s2); }
.ind-segs span::before { content: ''; width: 5px; height: 5px; background: var(--acc); flex: 0 0 auto; }
.ind-others { display: flex; flex-wrap: wrap; gap: var(--s3); }
.ind-other { font-size: var(--fs-sm); padding: var(--s2) var(--s4); box-shadow: inset 0 0 0 1px var(--rule); }
.ind-other:hover { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════════
   INTEGRATIONS
   ════════════════════════════════════════════════════════════════════════ */

.ig-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.ig-list span { font-size: var(--fs-xs); color: var(--ink2); padding: var(--s1) var(--s3); background: var(--paper2); }

/* ════════════════════════════════════════════════════════════════════════
   PRINT
   Somebody will print the privacy policy. The site is already paper.
   ════════════════════════════════════════════════════════════════════════ */

@media print {
  .nv, .nv-sheet, .prog, .tick, .ov, .foot-cols, .btns, .btn { display: none !important; }
  body { padding-top: 0; }
  .inkband, .limeband { background: none !important; color: #000 !important; width: auto; margin-inline: 0; }
  .ln > span, .rule, .wipe, .fade { transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .legal-body { max-width: none; color: #000; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE NARRATIVE  (/login-preview)
   A full-height scroll sequence. Each panel is one statement; the ground
   alternates paper / ink so the argument is carried by the page inverting
   under you rather than by anything moving. The rail on the left is the
   only fixed element and is the same numeral the section heads use.

   This replaces a page that pulled three.js, GSAP and Lenis off three CDNs
   to morph a WebGL mesh between nine shapes, scramble its own headings a
   character at a time, run a custom cursor and offer a sound toggle.
   ════════════════════════════════════════════════════════════════════════ */

.narr-rail {
  position: fixed; left: var(--mar); top: 50%; transform: translateY(-50%);
  z-index: 600; display: flex; flex-direction: column; gap: var(--s3);
  mix-blend-mode: difference;
}
.narr-rail a { display: block; font-size: var(--fs-label); font-weight: var(--fw-semi);
               letter-spacing: var(--ls-label); color: #8A867F; font-variant-numeric: tabular-nums; }
.narr-rail a.on { color: #F6F4F0; }
@media (max-width: 900px) { .narr-rail { display: none; } }

.narr-panel {
  min-height: 100svh; display: grid; place-items: center;
  padding: var(--s9) var(--mar); scroll-snap-align: start;
}
.narr-panel .inner { width: 100%; max-width: 980px; }
.narr-panel.ink { background: #121213; color: var(--ink-paper);
  --paper: #121213; --paper2: #1C1C1E; --ink: var(--ink-paper); --ink2: var(--ink-ink2);
  --ink3: #9A968F; --rule: var(--ink-rule); --rule-strong: #3A3A3D; }
.narr-panel .d2 { margin-block: var(--s5) var(--s6); }
.narr-panel .lead { max-width: var(--measure); }
.narr-panel.center { text-align: center; }
.narr-panel.center .lead, .narr-panel.center .inner > * { margin-inline: auto; }
.narr-panel.right .inner { margin-left: auto; text-align: right; }
.narr-panel.right .lead { margin-left: auto; }

/* The sign-in panel. A single block on the ink, with the Google button
   boxed by a rule like every other control on the site. */
.narr-card { width: min(420px, 100%); margin-inline: auto; text-align: center; }
.narr-card .d3 { margin-block: var(--s4) var(--s3); }
.narr-card .gbtn { box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* ════════════════════════════════════════════════════════════════════════
   OUTCOMES
   The components above were drawn for a print grammar: square corners,
   hairline cells, a lime stroke. This block restates them in the Outcomes
   language and sits last so it wins by order, not by !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Type details ── */
.lbl, .idx, .nv-link, .nv-signin, .chip, .f label, .foot-col h5, .crumb, .trip h4,
.cell .more, .stat span, .ag-badge, .f-pill, .legal-body h4, .narr-rail a {
  font-weight: var(--fw-med);
}
.num { font-family: var(--face-text); font-variation-settings: normal; letter-spacing: -0.03em; }
*, *::before, *::after { font-variant-numeric: proportional-nums !important; }

/* THE MARKER: outcomes.digital's highlighter -- an orange-to-coral stroke
   behind the phrase, near-square, ink on top. */
.mk {
  background: var(--marker); color: var(--acc-ink);
  border-radius: var(--r-marker); padding: 0 0.14em; margin: 0 -0.04em;
}

/* ── Controls: pills ── */
.btn { border-radius: var(--r-pill); height: 48px; padding-inline: var(--s6);
       font-weight: var(--fw-med); letter-spacing: 0; }
.btn-1 { background: var(--ink); color: var(--ink-paper); }
.btn-1:hover { background: #2B2B2E; color: var(--ink-paper); }
.btn-2 { box-shadow: inset 0 0 0 1px var(--rule-strong); background: transparent; color: var(--ink); }
.btn-2:hover { box-shadow: inset 0 0 0 1px var(--ink); background: transparent; color: var(--ink); }
/* The hero's action: uppercase, heavy, arrowed, with the site's soft drop. */
.hero .btn-1, .btn-hero {
  height: 54px; padding-inline: var(--s7); text-transform: uppercase;
  font-weight: 800; font-size: 16px; box-shadow: var(--shadow-pill);
}
.hero .btn-1::after, .btn-hero::after { content: '\2192'; font-weight: 800; }
.prose a:hover { background: none; border-bottom-color: var(--acc); }

/* ── Masthead ── */
.nv.stuck { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.bn-mark { border-radius: var(--r-pill); }
.bn-word { font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144; font-size: 23px; }
.nv-link { font-size: 15px; text-transform: none; letter-spacing: -0.01em; color: var(--ink); }
.nv-link::after { background: var(--acc); height: 2px; }
.nv-link.active::after { height: 2px; }
.nv-signin { font-size: 15px; text-transform: none; letter-spacing: -0.01em; color: var(--ink); }
.nv-cta .btn { height: 40px; }
.nv-sheet { background: var(--ink); }
.nv-sheet > a:hover { color: var(--acc); }
.prog { background: var(--acc); }

/* ── Ticker ── */
.tick { border-block-color: var(--rule); }
.tick-i::after { border-radius: var(--r-pill); background: var(--acc); }
.tick-sm .tick-i { font-weight: var(--fw-med); }

/* ── Cells and the directory become white cards on paper ── */
.cells, .dir { gap: var(--s4); border: 0; overflow: visible; }
.cell, .ag {
  background: var(--card); border-radius: var(--r); box-shadow: none;
  padding: var(--s6) var(--s6) var(--s6);
}
.cell::before, .ag::before { content: none; }
a.cell:hover, button.cell:hover, .ag:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ag-badge { background: var(--acc); color: var(--acc-ink); border-radius: var(--r-pill); padding: 3px var(--s3); }
.ag-badge.building { background: var(--paper2); color: var(--ink2); }
.cell-ic { color: var(--ink); }

/* ── Stats: the site's figure is the text face, heavy, over a label ── */
.stat { border-top: 0; padding-top: 0; }
.stat b { font-family: var(--face-text); font-weight: 700; letter-spacing: -0.04em;
          font-variation-settings: normal; line-height: 1; }
.stat span { text-transform: uppercase; }
a.stat:hover { border-top-color: transparent; }

/* ── Tags and chips: pills ── */
.tag { border-radius: var(--r-pill); box-shadow: none; background: var(--paper2); padding: 3px var(--s3); }
.tag-fill { background: var(--acc); color: var(--acc-ink); }
.chip { border-radius: var(--r-pill); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm);
        box-shadow: inset 0 0 0 1px var(--rule-strong); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip.on { background: var(--ink); color: var(--ink-paper); }
.srch { border: 0; background: var(--card); border-radius: var(--r-pill); padding: var(--s3) var(--s5); }
.srch::after { content: none; }
.srch:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }

/* ── Ledger rows and story steps: the site's top-line tab ── */
.story-step.on .idx::before { background: var(--acc); height: 2px; }
.story-step.on .idx { color: var(--acc-tx); }

/* ── The product figure, in the product's light surfaces ── */
.shot, .acct {
  background: var(--paper2); color: var(--ink); border-radius: var(--r-lg);
  font-family: var(--face-text);
}
.shot-ttl i, .shot-live i, .acct-co i { background: var(--acc); }
.shot-live, .shot-kpi .kl, .shot-ph, .shot-frow .fchip, .acct-tag, .acct-score span, .acct-why .kl { color: var(--ink3); }
.shot-kpi, .shot-panel, .shot-feed { background: var(--card); border-radius: var(--r); }
.shot-kpi.lead { background: var(--acc); color: var(--acc-ink); }
.shot-kpi.lead .kl { color: var(--acc-ink); opacity: .75; }
.shot-bars span { background: var(--paper3); }
.shot-bars span.hi { background: var(--acc); }
.shot-wlr .rk, .shot-frow .fwhen { color: var(--ink3); }
.shot-wlr .bar { background: var(--paper2); }
.shot-wlr .bar i { background: var(--sky); }
.shot-wlr:first-child .bar i { background: var(--acc); }
.shot-frow + .shot-frow { border-top-color: var(--paper2); }
.acct { background: var(--card); box-shadow: var(--shadow-block); }
.acct-score { border-block-color: var(--rule); }
.acct-score b { color: var(--ink); font-family: var(--face-text); font-weight: 700; }
.acct-why p { color: var(--ink2); }
.acct-draft { background: var(--ink); color: var(--ink-paper); border-radius: var(--r-pill); }
.acct-draft:hover { background: #2B2B2E; }

/* ── Bands become blocks ──
   The ink band is the site's black card ("05 Optimise and Scale"): inset,
   24px corners, a soft drop. The closing band is the orange block. */
.inkband, .limeband {
  width: auto; margin-inline: var(--mar); border-radius: var(--r-lg);
  box-shadow: var(--shadow-block);
}
/* Literal, not var(--ink): inside the band --ink is re-pointed at the light
   text colour, so var(--ink) here would paint the band paper-white. */
.inkband { background: #121213; }
/* The closing call to action is the site's sky block ("03 Build the
   Growth Engine"), so it does not run into the orange colophon below it. */
.limeband {
  --paper: var(--sky); --paper2: #A8D8FF; --paper3: #C4E4FF;
  --ink: #121213; --ink2: #1E2A36; --ink3: #2A3A4A;
  --rule: #6FB6F0; --rule-strong: #4C9BDA; --rule-ink: #121213;
  background: var(--sky); color: #121213; margin-block: 0 var(--s7);
}
.limeband .btn-2 { box-shadow: inset 0 0 0 1px #121213; }
@media (max-width: 640px) { .inkband, .limeband { margin-inline: 12px; } }

/* ── The colophon: outcomes.digital's closing block. Orange ground, the
   wordmark at display size, the tagline, contact columns. ── */
.foot { border-top: 0; background: var(--sun); color: var(--ink);
        --rule: rgba(18,18,19,.18); --ink2: #2A1A08; --ink3: #3A2A10; }
.foot-word {
  display: block; font-family: var(--face-display); font-weight: var(--fw-semi);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-size: clamp(72px, 16.5vw, 250px); line-height: .9; letter-spacing: -0.035em;
  padding-top: var(--s8); color: var(--ink);
}
.foot .bn-mark { background: var(--ink); }
.foot-tag { font-style: normal; font-family: var(--face-text); font-weight: var(--fw-book);
            font-size: clamp(26px, 3vw, 44px); line-height: 1.12; letter-spacing: -0.03em;
            font-variation-settings: normal; max-width: 16ch; }
.foot-col h5 { color: var(--ink); }
.foot-col a { color: var(--ink); font-size: 18px; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot .btn-1 { background: var(--ink); color: var(--ink-paper); }
.foot-bottom { color: var(--ink); }

/* ── Overlays ── */
.ov-panel { border-left: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--paper); }
.ov-mid { border-radius: var(--r-lg); }
.ov-x { border-radius: var(--r-pill); }
.f-pill { border-radius: var(--r-pill); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.f-done .mark { border-radius: var(--r-pill); }
.gbtn { border-radius: var(--r); }
.vframe { border-radius: var(--r-lg); }
.vph .play { border-radius: var(--r-pill); }
.side-cta { border-radius: var(--r-lg); }
.side-cta .btn-1 { background: var(--acc); color: var(--acc-ink); }
.side-cta .btn-2 { box-shadow: inset 0 0 0 1px #3A3A3D; }
.ind-flag { border-top: 0; background: var(--card); border-radius: var(--r); padding: var(--s6); border-bottom: 0; }
.ind-flag:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ind-segs span::before { border-radius: var(--r-pill); }
.ind-other { border-radius: var(--r-pill); }
.ig-list span { border-radius: var(--r-pill); }
.cmp .own { background: var(--card); }
.cmp .own .mk-y { border-radius: var(--r-pill); }
.narr-card .gbtn { border-radius: var(--r); }

/* ════════════════════════════════════════════════════════════════════════
   PLAY
   The playful layer, driven by static/js/press-play.js. Every rule below is
   scoped to html.play, a class that script adds only when motion is allowed,
   so with JS off or under prefers-reduced-motion none of it applies and the
   page is the finished, static page above. No rule here delays a card by its
   index; the only per-index timing is per letter of the footer wordmark.
   ════════════════════════════════════════════════════════════════════════ */

:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --glide: cubic-bezier(.22, 1, .36, 1);
        --r-arrive: 64px;   /* a block's corners while it is still arriving */ }

/* ── Springy letters (headlines, footer wordmark) ── */
.play .d1 .wd, .play .foot-word .wd { display: inline-block; white-space: nowrap; }
.play .d1 .ch, .play .foot-word .ch {
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144, 'wght' var(--w, 600);
  transition: font-variation-settings 420ms var(--glide);
}
.play .d1.is-live .ch, .play .foot-word.is-live .ch { transition-duration: 160ms; }
.play .d1 .it .ch { font-style: italic; }

/* ── The highlighter draws itself once its phrase is on screen ── */
.play .mk { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 900ms var(--glide); }
.play .mk.drawn { background-size: 100% 100%; }

/* ── The hero deck ── */
.hero-play { position: relative; }
.deck { display: none; }
@media (min-width: 1120px) {
  .deck {
    display: block; position: absolute; z-index: 0;
    right: var(--mar); top: clamp(80px, 9vw, 140px);
    width: clamp(260px, 22vw, 330px); aspect-ratio: 4 / 3.4;
    transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
    transition: transform 700ms var(--glide);
    cursor: pointer;
  }
  .hero-play > :not(.deck) { position: relative; z-index: 1; }
}
.deck-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5); border-radius: var(--r-lg);
  box-shadow: var(--shadow-block); color: var(--ink);
  transition: transform 720ms var(--spring), opacity 400ms ease;
  will-change: transform;
}
.deck-card.c-orange { background: var(--acc); }
.deck-card.c-amber  { background: var(--amber); }
.deck-card.c-sky    { background: var(--sky); }
.deck-card.c-ink    { background: var(--ink); color: var(--ink-paper); }
.deck-card .deck-k { font-size: var(--fs-label); font-weight: var(--fw-med); letter-spacing: var(--ls-label); text-transform: uppercase; opacity: .8; }
.deck-card b { font-family: var(--face-display); font-weight: var(--fw-semi); font-size: 32px; line-height: 1.05;
               letter-spacing: -0.02em; font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144; }
.deck-card .deck-l { font-size: var(--fs-sm); opacity: .85; }
.deck-card .deck-s { margin-top: auto; font-size: 54px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
/* Stack positions. 0 is the top card. */
.deck-card[data-pos="0"] { z-index: 4; transform: rotate(-4deg); }
.deck-card[data-pos="1"] { z-index: 3; transform: translate(26px, -22px) rotate(5deg) scale(.95); }
.deck-card[data-pos="2"] { z-index: 2; transform: translate(-24px, -38px) rotate(-10deg) scale(.9); }
.deck-card[data-pos="3"] { z-index: 1; transform: translate(4px, -50px) rotate(2deg) scale(.85); opacity: .0; }
/* The deal: the top card is flicked off to the right, then tucked behind. */
.deck-card.fling { z-index: 5; transform: translate(70%, 18%) rotate(22deg) !important; opacity: 0; transition-duration: 520ms; }
/* The deck arrives once, as one object: a single swing into place. */
.play .deck { opacity: 0; transform: translate3d(0, 24px, 0) rotate(-8deg) scale(.92); }
.play .deck.dealt { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
                    transition: opacity 500ms ease 250ms, transform 900ms var(--spring) 250ms; }
.play .deck.dealt:hover .deck-card[data-pos="0"] { transform: rotate(-1deg) translateY(-6px); }
/* Idle float, on the deck as a whole so the cards never move independently. */
@keyframes deck-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.play .deck.dealt .deck-card[data-pos="0"] { animation: deck-bob 4.2s ease-in-out infinite; }

/* ── Pill buttons flood from the pointer ── */
.play .btn { position: relative; overflow: hidden; isolation: isolate;
             transition: color 260ms var(--glide), box-shadow 260ms var(--glide), transform 160ms var(--spring); }
.play .btn::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: var(--x, 50%); top: var(--y, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--acc); transform: scale(0);
  transition: transform 520ms var(--glide);
}
.play .btn:hover::before { transform: scale(60); }
.play .btn-1:hover { background: var(--ink); color: var(--acc-ink); }
.play .btn-2::before { background: var(--ink); }
.play .btn-2:hover { color: var(--ink-paper); box-shadow: inset 0 0 0 1px var(--ink); }
.play .limeband .btn-1::before, .play .foot .btn-1::before { background: var(--card); }
.play .btn:active { transform: scale(.96); }
.play .hero .btn-1::after { display: inline-block; transition: transform 320ms var(--spring); }
.play .hero .btn-1:hover::after { transform: translateX(5px); }

/* ── Cards flood with a block colour from the corner ── */
.play .ag, .play a.cell { position: relative; overflow: hidden; isolation: isolate; }
.play .ag::after, .play a.cell::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: var(--x, 0px); top: var(--y, 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--acc); transform: scale(0);
  transition: transform 620ms var(--glide);
}
.play .ag:nth-child(4n+2)::after, .play a.cell:nth-child(4n+2)::after { background: var(--amber); }
.play .ag:nth-child(4n+3)::after, .play a.cell:nth-child(4n+3)::after { background: var(--sky); }
.play .ag:nth-child(4n+4)::after, .play a.cell:nth-child(4n+4)::after { background: var(--red); }
.play .ag:hover::after, .play a.cell:hover::after { transform: scale(90); }
.play .ag:hover, .play a.cell:hover { box-shadow: none; }
.play .ag:hover p, .play .ag:hover .ag-role, .play .ag:hover .lbl, .play a.cell:hover p { color: var(--ink); }
.play .ag:hover .ag-badge { background: var(--ink); color: var(--ink-paper); }
.play .ag .cell-ic, .play a.cell .cell-ic { transition: transform 420ms var(--spring); }
.play .ag:hover .cell-ic, .play a.cell:hover .cell-ic { transform: rotate(-12deg) scale(1.15); }

/* ── Odometer ── */
/* Qualified with .odo because the columns are spans, and .stat span is
   the small uppercase label rule. */
.odo { display: inline-flex; line-height: 1; }
.odo .odo-col, .odo .odo-strip, .odo .odo-strip > span {
  margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none;
}
.odo .odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo .odo-strip { display: flex; flex-direction: column; transform: translateY(0); }
.odo .odo-strip > span { display: block; height: 1em; line-height: 1; }
.odo.roll .odo-col .odo-strip { transform: translateY(calc(var(--d) * -1em)); transition: transform var(--t, 1200ms) var(--glide); }

/* ── The ticker leans into the scroll ── */
.play .tick-i { transform: skewX(var(--skew, 0deg)); transition: transform 200ms linear; }
.play .tick-i::after { transition: transform 300ms var(--spring); }
.play .tick-i:hover::after { transform: scale(1.8); }

/* ── The track ── */
.track-tabs { display: flex; gap: var(--s4); margin-bottom: var(--s6); }
.track-tabs button {
  flex: 1; text-align: left; padding-top: var(--s3); border-top: 2px solid var(--rule);
  font-size: var(--fs-sm); color: var(--ink3); font-weight: var(--fw-med);
  transition: color 240ms ease, border-color 240ms ease;
}
.track-tabs button b { display: block; font-size: var(--fs-xs); font-weight: 700; margin-bottom: 2px; }
.track-tabs button.on { color: var(--acc-tx); border-top-color: var(--acc); }
.track-rail { display: flex; flex-direction: column; gap: var(--s4); }
.track-card {
  border-radius: var(--r-lg); padding: clamp(28px, 4vw, 64px); box-shadow: var(--shadow-block);
  color: var(--ink); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
}
.track-card.c-orange { background: var(--acc); }
.track-card.c-amber  { background: var(--amber); }
.track-card.c-sky    { background: var(--sky); }
.track-card.c-ink    { background: var(--ink); color: var(--ink-paper); }
.track-n { font-size: clamp(56px, 7vw, 104px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; margin-bottom: auto; }
.track-card h4 { font-family: var(--face-display); font-weight: var(--fw-semi); font-size: clamp(30px, 3.6vw, 56px);
                 line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
                 margin: var(--s6) 0 var(--s3); max-width: 16ch; }
.track-card p { font-size: var(--fs-lead); max-width: 40ch; opacity: .9; }
/* Pinned: wide screens with motion allowed. */
.play .track.is-pinned { height: calc(var(--n) * 80vh + 30vh); }
.play .track.is-pinned .track-pin { position: sticky; top: calc(var(--nav-h) + var(--s5)); }
.play .track.is-pinned .track-view { overflow: hidden; margin-inline: calc(-1 * var(--s2)); padding: var(--s2) var(--s2) var(--s7); }
.play .track.is-pinned .track-rail { flex-direction: row; gap: var(--s5); will-change: transform; }
.play .track.is-pinned .track-card { flex: 0 0 min(78%, 920px); min-height: clamp(360px, 52vh, 520px); }
/* Each block breathes as it crosses the middle: a scale tied to scroll
   position, not an entrance. */
.play .track.is-pinned .track-n { transition: transform 500ms var(--spring); }
.play .track.is-pinned .track-card:hover .track-n { transform: translateX(8px) rotate(-3deg); }

/* ── Blocks settle ── */
.play .inkband, .play .limeband {
  transform: scale(.94); border-radius: var(--r-arrive);
  transition: transform 1000ms var(--spring), border-radius 1000ms var(--glide);
}
.play .inkband.settled, .play .limeband.settled { transform: none; border-radius: var(--r-lg); }

/* ── The footer wordmark rises letter by letter ── */
.play .foot-word { overflow: hidden; }
.play .foot-word .ch { display: inline-block; transform: translateY(105%);
  transition: transform 800ms var(--spring) calc(var(--i) * 45ms), font-variation-settings 420ms var(--glide); }
.play .foot-word.up .ch { transform: none; }

/* ── Page to page: an orange curtain ──
   The new page is uncovered from the bottom while the old one fades; the
   gap between them is the ::view-transition backdrop, painted orange.
   (.vt is set by the inline script in <head>, before first paint, and only
   when motion is allowed: the new page's first frame is captured before any
   deferred script runs.) */
.vt::view-transition { background: #FF6022; }
.vt::view-transition-old(root) { animation: pr-curtain-out 360ms var(--ease-io) both; }
.vt::view-transition-new(root) { animation: pr-curtain-in 620ms var(--glide) 140ms both; }
@keyframes pr-curtain-out { to { opacity: 0; transform: scale(.97); } }
@keyframes pr-curtain-in  { from { clip-path: inset(100% 0 0 0 round 48px 48px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }

/* ── Small delights ── */
.play .nv-brand .bn-mark { transition: transform 500ms var(--spring); }
.play .nv-brand:hover .bn-mark { transform: scale(1.6); }
.play .chip { transition: background 200ms ease, color 200ms ease, transform 260ms var(--spring); }
.play .chip:active { transform: scale(.92); }
.play .story-step.on .idx::before { animation: pr-grow 600ms var(--glide) both; }
@keyframes pr-grow { from { transform: scaleX(0); transform-origin: 0 50%; } }
.play .prog { background: linear-gradient(90deg, var(--acc), var(--amber)); height: 3px; }
/* The tab rail only means something while the track slides. */
.track:not(.is-pinned) .track-tabs { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   PLAY, LOUDER — the second layer of the public site's motion.
   Same three rules as above: the page is complete without it, reduced
   motion turns it off, and nothing arrives card by card. What is new:
   an opening sequence, a throwable deck, a sticker, a statement that
   lights up as you read it, a band of display type driven by the scroll,
   ink blocks that open like a portal, confetti on the calls to action,
   a directory that glides when filtered, and a footer full of toys.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The opening sequence (home, first visit in a session) ──
   .intro-on is set in <head> so the orange cover exists before the first
   paint; press-play.js replaces it with the real sequence. If the script
   never arrives, the cover lifts itself after 3s. */
.intro-on body::after {
  content: ''; position: fixed; inset: 0; z-index: 2000; background: #FF6022;
  animation: pr-intro-failsafe 1ms linear 3s forwards;
}
@keyframes pr-intro-failsafe { to { visibility: hidden; opacity: 0; } }
.intro-hold .hero .ln > span { transform: translateY(105%) !important; }
.intro-hold .hero .fade { opacity: 0 !important; }
.intro { position: fixed; inset: 0; z-index: 2001; display: flex; pointer-events: auto; cursor: pointer; }
.intro-bar { flex: 1; background: #FF6022; transition: background-color 380ms ease, transform 900ms var(--glide); }
.intro.go .intro-bar.c-amber { background: var(--amber); }
.intro.go .intro-bar.c-sky   { background: var(--sky); }
.intro.go .intro-bar.c-red   { background: var(--red); }
/* The four bars leave a beat apart, left to right: four stripes of one
   curtain, not four cards. */
.intro-bar { transition-delay: 0ms, 120ms; }
.intro-bar:nth-child(2) { transition-delay: 0ms, 190ms; }
.intro-bar:nth-child(3) { transition-delay: 0ms, 260ms; }
.intro-bar:nth-child(4) { transition-delay: 0ms, 330ms; }
.intro.out .intro-bar { transform: translateY(-101%); }
.intro-word {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--ink); overflow: hidden; padding: .06em 0 .12em;
  font-family: var(--face-display); font-weight: var(--fw-semi);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-size: clamp(56px, 15vw, 240px); line-height: .9; letter-spacing: -0.035em;
}
.intro-word .ch { display: inline-block; transform: translateY(115%) rotate(14deg);
  transition: transform 760ms var(--spring) calc(var(--i) * 38ms); }
.intro.go .intro-word .ch { transform: none; }
.intro.out .intro-word .ch { transform: translateY(-120%) rotate(-8deg); transition: transform 340ms cubic-bezier(.5, 0, .75, 0); }
.intro-meta {
  position: absolute; left: var(--mar); right: var(--mar); bottom: var(--s6);
  display: flex; justify-content: space-between; color: var(--ink);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  transition: opacity 240ms ease;
}
.intro.out .intro-meta { opacity: 0; }

/* ── The hero sticker: a spinning roundel stuck to the deck ── */
.sticker { display: none; }
@media (min-width: 1120px) {
  .play .sticker {
    display: block; position: absolute; z-index: 6; width: 120px; height: 120px;
    right: -34px; bottom: -52px; overflow: visible;
    animation: pr-spin 16s linear infinite;
    transition: scale 400ms var(--spring);
  }
  .play .sticker:hover { scale: 1.12; }
  .sticker > circle:first-of-type { fill: var(--ink); }
  .sticker text { fill: var(--ink-paper); font: 700 10.5px var(--face-text); letter-spacing: .18em; }
  .sticker-dot { fill: var(--acc); transform-origin: 60px 60px; animation: pr-pulse 1.6s var(--glide) infinite; }
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }

/* ── The deck can be grabbed and thrown ── */
@media (min-width: 1120px) {
  /* Above the hero's text blocks, which run full width and would
     otherwise take every press meant for the cards. */
  .play .deck { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 2; }
  .play .deck.grabbing { cursor: grabbing; z-index: 5; }
  .play .deck.grabbing .deck-card[data-pos="0"] { transition: none; animation: none; }
  .play .deck-card.springing { transition: none !important; animation: none !important; }
  .play .deck-card.thrown { z-index: 5; transition: transform 560ms cubic-bezier(.2, .7, .3, 1), opacity 560ms ease; opacity: 0; }
}

/* ── The highlighter changes colour under the pointer ── */
@keyframes pr-mk-cycle {
  0%   { background-color: var(--acc); }
  25%  { background-color: var(--amber); }
  50%  { background-color: var(--sky); }
  75%  { background-color: var(--red); }
}
.play .mk.drawn:hover { animation: pr-mk-cycle 1.2s steps(1) infinite; background-image: none; }

/* ── The statement ── */
.said { padding-block: clamp(72px, 11vw, 160px) clamp(24px, 4vw, 64px); }
.said-t {
  font-family: var(--face-display); font-weight: var(--fw-semi);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-size: clamp(34px, 5.4vw, 84px); line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink); max-width: 20ch;
}
.said-b { padding: 0 .12em; margin: 0 -.04em; border-radius: var(--r-sm); box-decoration-break: clone; -webkit-box-decoration-break: clone;
          background-repeat: no-repeat; background-size: 100% 100%; }
.said-b.c-orange { background-image: linear-gradient(var(--acc), var(--acc)); }
.said-b.c-amber  { background-image: linear-gradient(var(--amber), var(--amber)); }
.said-b.c-sky    { background-image: linear-gradient(var(--sky), var(--sky)); }
.play .said-t .sw { color: #C9C4BD; transition: color 280ms ease; }
.play .said-t .sw.lit { color: var(--ink); }
.play .said-b { background-size: 0% 100%; transition: background-size 700ms var(--glide); }
.play .said-b.lit { background-size: 100% 100%; }

/* ── The kinetic band ── */
.kin { overflow: hidden; padding-block: clamp(40px, 6vw, 96px); user-select: none; }
.kin-row {
  display: flex; align-items: center; gap: .32em; width: max-content; white-space: nowrap;
  font-family: var(--face-display); font-weight: var(--fw-semi);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-size: clamp(60px, 10.5vw, 180px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink);
  transform: translate3d(var(--kx, 0px), 0, 0) skewX(var(--kskew, 0deg));
  will-change: transform;
}
.kin-row + .kin-row { margin-top: .06em; }
.kin-w.o { color: transparent; -webkit-text-stroke: 2px var(--ink); font-style: italic; }
.kin-s { display: inline-block; flex: 0 0 auto; width: .6em; height: .6em; overflow: visible; transform: rotate(var(--kr, 0deg)); }
.kin-s.s1 { fill: var(--acc); }
.kin-s.s2 { fill: var(--amber); }
.kin-s.s3 { fill: var(--sky); }
.kin-s.s4 { fill: var(--red); }
.kin-w { transition: color 300ms ease; }
.kin-w:not(.o):hover { color: var(--acc); }
.kin-w.o:hover { -webkit-text-stroke-color: var(--acc); }

/* ── Ink blocks open like a portal ──
   press-play.js writes the clip on each ink block as it scrolls in: a
   small rounded window in the middle of the band that widens to the full
   block. .portal is set by the script, so without it nothing is clipped. */
.play .inkband.portal { transform: none; transition: none; will-change: clip-path; }
.play .inkband.portal > .wrap { transform: scale(calc(.86 + .14 * var(--pp, 1))); opacity: calc(.15 + .85 * var(--pp, 1)); }

/* ── Confetti ── */
.cf-layer { position: fixed; inset: 0; z-index: 3000; pointer-events: none; overflow: hidden; }
.cf { position: absolute; left: 0; top: 0; width: 12px; height: 12px; will-change: transform; }
.cf.k0 { border-radius: 50%; }
.cf.k2 { width: 18px; height: 7px; border-radius: var(--r-pill); }
.cf.k3 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ── Footer toys ── */
.foot-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); }
.foot-top .foot-word { flex: 0 1 auto; }
.toys { display: none; }
@media (min-width: 1120px) {
  .toys { display: grid; grid-template-columns: repeat(3, clamp(64px, 6vw, 96px)); gap: 10px; flex: 0 0 auto; margin-bottom: 18px; }
}
.toy { aspect-ratio: 1; border-radius: var(--r); display: grid; place-items: center; cursor: pointer;
       transition: background-color 400ms ease, transform 500ms var(--spring); }
.toy.t-ink   { background: var(--ink); }
.toy.t-paper { background: var(--paper, #F1EFED); }
.toy.t-sky   { background: var(--sky); }
.toy.t-red   { background: var(--red); }
.toy.t-acc   { background: var(--acc); }
.toy svg { width: 62%; height: 62%; overflow: visible; fill: var(--ink); transform: rotate(var(--tr, 0deg));
           transition: transform 700ms var(--spring), fill 400ms ease; }
.toy.t-ink svg { fill: var(--sun); }
/* The library the shapes morph between: laid out, but sizeless. */
.shape-lib { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.play .toy:hover { transform: scale(1.08) rotate(-4deg); }
.play .toy:active { transform: scale(.9); }

/* ── Footer letters: after they rise, they jump under the pointer like keys ── */
.play .foot-word.risen .ch { transform: translateY(calc(var(--lift, 0) * -16%));
  transition: transform 520ms var(--spring), font-variation-settings 420ms var(--glide); }
.play .foot-word.risen.is-live .ch { transition-duration: 180ms, 160ms; }

/* ── Page to page: the curtain is four colours now ── */
.vt::view-transition { background: linear-gradient(90deg, #FF6022 0 25%, #FFB500 0 50%, #8CCBFF 0 75%, #FF3B30 0); }

/* ── The signal path (Anime.js) ──
   Drawn by press-play.js down the gap between the four steps and the
   account card: it draws itself as the page scrolls, a signal rides its
   head, and each step's node springs open as the signal reaches it. Built
   only on wide screens with motion on; otherwise there is nothing here. */
.story { position: relative; }
.sig { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.sig-track { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.sig-line { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sig-node { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.sig-node.hit { fill: var(--acc); stroke: var(--ink); }
.sig-dot { fill: var(--ink); }
.sig-dot-in { fill: var(--acc); }
.story-steps, .story-fig { position: relative; z-index: 1; }