/* ---- src/css/00-tokens.css ---- */
/* =====================================================================
   hypjam v2 · 00-tokens.css
   Design tokens. Every number here was read out of Lance's compiled CSS
   (ref/lance-css/2aw2dorymd3mg.css = the landing stylesheet,
   ref/lance-css/0802v4mhdt9c4.css = the Tailwind build), ref/style_spec.json
   or measured on ref/shots + ref/pages at 1920. The audit with sources is
   DESIGN.md. Use the variables; never re-type the numbers.

   Theme scoping: :root carries the DARK defaults (Lance's landing is
   black). Put data-theme="light" | "sand" | "sand-m" | "dark" on any
   section/page wrapper and the semantic tokens (--bg --fg --fg-body
   --hairline --pill-*) flip for everything inside it.
   ===================================================================== */

:root {
  /* ---------- colour · raw ---------- */
  --black: #000;
  --white: #fff;
  --sand-s: #f7f6f4;          /* Lance --sand-s · .bg-sand-s · metrics beat, feature section */
  --sand-m: #dad9d4;          /* Lance --sand-m · .bg-sand-m · rights section, security hero */
  --sand-l: #bcbbb4;          /* Lance --sand-l · card description text, drawing strokes on sand */
  --sand: #f0f1e9;            /* Lance --sand (unused on home, kept for parity) */
  --grey: #7b7b7b;            /* Lance --grey-m / .text-grey-m: body copy on light, footer labels */
  --grey-m: #5b5b5b;          /* CONTRACT divider tone (= --grey at 60% composited on black) */
  --grey-s: #f5f5f5;          /* Lance --grey-s */
  --line: #969696;            /* Lance --line: the drawing's stroke colour */
  --jam: #ff6f1f;             /* the accent. Replaces Lance's #2bca95. Rationed. */
  --jam-ink: #000;            /* text/arrow colour placed on a jam surface */

  /* accent alphas (Lance had #2BCA95/5 · /10 · /12 · /15 · /20 · /30 · /40 · /70) */
  --jam-05: rgba(255,111,31,.05);
  --jam-10: rgba(255,111,31,.10);
  --jam-12: rgba(255,111,31,.12);
  --jam-15: rgba(255,111,31,.15);
  --jam-20: rgba(255,111,31,.20);
  --jam-30: rgba(255,111,31,.30);
  --jam-40: rgba(255,111,31,.40);
  --jam-70: rgba(255,111,31,.70);

  /* white alphas Lance actually uses (bg-white/12, /15, /24, text-white/40 …) */
  --w05: rgba(255,255,255,.05);
  --w08: rgba(255,255,255,.08);
  --w10: rgba(255,255,255,.10);
  --w12: rgba(255,255,255,.12);
  --w15: rgba(255,255,255,.15);
  --w20: rgba(255,255,255,.20);
  --w24: rgba(255,255,255,.24);
  --w40: rgba(255,255,255,.40);
  --w45: rgba(255,255,255,.45);
  --w60: rgba(255,255,255,.60);
  --w70: rgba(255,255,255,.70);
  --w75: rgba(255,255,255,.75);

  /* black alphas Lance uses (bg-black/5, /20, /[0.36] nav pill, /40 overlay …) */
  --k05: rgba(0,0,0,.05);
  --k08: rgba(0,0,0,.08);
  --k10: rgba(0,0,0,.10);
  --k14: rgba(0,0,0,.14);
  --k20: rgba(0,0,0,.20);
  --k36: rgba(0,0,0,.36);
  --k40: rgba(0,0,0,.40);
  --k80: rgba(0,0,0,.80);

  /* sand-l/60 · grey/60 — Lance's hairlines on sand and the HUD divider */
  --sand-l-60: rgba(188,187,180,.6);
  --grey-60: rgba(123,123,123,.6);
  --hud-card-bg: rgba(188,187,180,.12);   /* .bg-[rgba(188,187,180,0.12)] */

  /* ---------- colour · semantic (dark defaults) ---------- */
  --bg: var(--black);
  --fg: var(--white);
  --fg-body: var(--white);          /* paragraph colour · light pages use --grey */
  --fg-dim: var(--w60);             /* secondary text on the current bg */
  --fg-dim-40: var(--w40);
  --hairline: var(--w15);           /* Lance: h-px bg-white/15 on black */
  --hairline-strong: var(--w20);
  --pill-bg: var(--w12);            /* .btn resting */
  --pill-bg-hover: var(--w24);
  --pill-fg: var(--white);
  --pill-fg-hover: var(--sand-m);
  --pill-ico-bg: var(--jam);        /* the trailing circle · jam on dark (Lance: white) */
  --pill-ico-fg: var(--jam-ink);
  --ghost-hover: var(--w15);        /* nav text pills: hover:bg-white/15 */
  --nav-pill-bg: var(--k36);        /* open nav item: bg-black/[0.36] + blur 6px */
  --reserved-fill: rgba(255,255,255,.04); /* held-open slots (.reserved, .tag-soon) */

  /* ---------- type ---------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;        /* Lance: publishSerif, Georgia, Times New Roman, serif */
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Lance: gtStandard, Arial, Helvetica, sans-serif */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;        /* Lance: gtStandardMono, ui-monospace, monospace */

  --fw-display: 400;   /* display is 400 only */
  --fw-body: 400;
  --fw-medium: 500;    /* feature titles, quote attribution name */

  /* h1 · font-display text-[64px] leading-[1.05] tracking-[-1.28px] · max-lp 48/-.96 · max-tp 36/-.72 */
  --fs-h1: 64px;  --lh-h1: 1.05; --ls-h1: -1.28px;
  --fs-h1-lp: 48px; --ls-h1-lp: -.96px;
  --fs-h1-tp: 36px; --ls-h1-tp: -.72px;
  /* .title (sub-page hero) · 64/1/-1.28 · phones 40/-.8 */
  --fs-title: 64px; --lh-title: 1; --ls-title: -1.28px;
  --fs-title-tp: 40px; --ls-title-tp: -.8px;
  /* h2 · 42/1.1/-.84 · max-tp 28/-.56 */
  --fs-h2: 42px;  --lh-h2: 1.1;  --ls-h2: -.84px;
  --fs-h2-tp: 28px; --ls-h2-tp: -.56px;
  /* big quote (section 2) · 36/45px(1.25)/-.72 · max-tp 24/-.48 */
  --fs-quote: 36px; --lh-quote: 1.25; --ls-quote: -.72px;
  --fs-quote-tp: 24px; --ls-quote-tp: -.48px;
  /* hero trust paragraph · 36/1.2/-.84 · max-tp 24/-.48 */
  --fs-trust: 36px; --lh-trust: 1.2; --ls-trust: -.84px;
  /* HUD card title · 26/1.2/-.52 */
  --fs-card-title: 26px; --lh-card-title: 1.2; --ls-card-title: -.52px;
  /* story card quote · 18/22.5px(1.25)/-.2 */
  --fs-story-quote: 18px; --lh-story-quote: 1.25; --ls-story-quote: -.2px;
  /* body · 16/24 · phones 14 */
  --fs-body: 16px; --lh-body: 1.5; --fs-body-tp: 14px;
  --lh-body-tight: 1.4;              /* 16/22.4 feature blurbs, rights labels */
  --lh-body-loose: 1.5;
  /* small · 14/1.4 (nav sub, hero p, HUD desc 14/1.35) */
  --fs-small: 14px; --lh-small: 1.4;
  --fs-hud: 14px;  --lh-hud: 1.5;     /* HUD stop buttons 14/21 */
  --fs-hud-desc: 14px; --lh-hud-desc: 1.35;
  --fs-nav: 13px;                     /* nav items 13/1 */
  --fs-btn: 14px;                     /* buttons 14/1 */
  --fs-caption: 13px; --lh-caption: 1.35;   /* attribution 13/17.55 · meta 13/16.9 (1.3) */
  --lh-meta: 1.3;
  --fs-eyebrow: 12px;  --ls-eyebrow: .08em;   /* small caps labels */
  --fs-eyebrow-lg: 13px; --ls-eyebrow-lg: .06em; /* security-card titles: 13px uppercase */
  --fs-dash-label: 13px; --ls-dash-label: .01em; /* "— Operations" product-page eyebrow */
  --fs-micro: 11px;

  /* ---------- layout ---------- */
  --space: 4px;                      /* Tailwind --spacing: .25rem */
  --px-page: 28px;                   /* Lance --page-x: 1.75rem */
  --px-page-m: 14px;                 /* Lance: --page-x: 14px under 601px (contract said 20; Lance is 14) */
  --section-y: 120px;                /* py-[120px] · --section-spacing */
  --section-y-m: 80px;               /* max-bp:py-20 · --section-spacing-mobile */
  --section-y-quote: 160px;          /* quote section py-40 */
  --section-y-stories: 140px;        /* stories section py-[140px] */
  --nav-h: 88px;
  --nav-pad: 28px;                   /* nav padding: 28px var(--px-page) */
  --nav-item-h: 32px;                /* h-8 rounded-full px-[14px] */
  --nav-item-px: 14px;
  --max-container: 1800px;
  --max-content: 1280px;
  --max-medium: 904px;
  --max-small: 580px;
  --max-trust: 717px;                /* hero paragraph max-w-[717px] (min(717px,47vw) under 1511) */
  --max-h2: 560px;                   /* stories h2 max-w-[560px] */
  --grid-gap: 24px;

  /* ---------- breakpoints (documentation only — vars cannot drive @media) ----------
     Lance (Tailwind v4 "not (min-width)" variants):
       max-tp  → @media (max-width: 600px)    (not (min-width:37.5625rem))   phones
       max-bp  → @media (max-width: 800px)    (not (min-width:50.0625rem))   small tablets
       max-lp  → @media (max-width: 1024px)   (not (min-width:64.0625rem))   laptops / HUD collapses
       max-nv  → @media (max-width: 1200px)   (not (min-width:75.0625rem))   4-col grids → 2
       max-[1511px] → @media (max-width: 1511px)                            trust paragraph 47vw
     min variants: tp (min-width:601px) · bp (min-width:801px) · lp (min-width:1025px) · nv (min-width:1201px)
     Copy these literally; do not invent 768/1280. */
  --bp-tp: 600px;
  --bp-bp: 800px;
  --bp-lp: 1024px;
  --bp-nv: 1200px;
  --bp-wide: 1511px;

  /* ---------- radii ---------- */
  --r-pill: 9999px;
  --r-card: 12px;                    /* HUD card, feature images rounded-[12px] */
  --r-panel: 6px;                    /* HUD product panel rounded-[6px] */
  --r-img: 8px;                      /* story card image rounded-[8px] */
  --r-img-lg: 16px;                  /* rounded-[16px] */
  --r-tile: 4px;

  /* ---------- buttons (.btn) ---------- */
  --btn-h: 32px;    --btn-gap: 10px; --btn-pl: 16px; --btn-pr: 5px; --btn-ico: 22px; --btn-ico-svg: 11px;   /* nav "Book a Demo": h-8 gap-2.5 pl-4 pr-[5px] size-[22px] svg 11 */
  --btn-h-lg: 36px; --btn-gap-lg: 12px; --btn-pl-lg: 18px; --btn-pr-lg: 6px; --btn-ico-lg: 24px; --btn-ico-svg-lg: 12px; /* hero: h-9 gap-3 pl-[18px] pr-[6px] size-6 svg 12 */
  --btn-blur: 6px;                   /* backdrop-blur-[6px] */

  /* ---------- HUD card / panels (hero) ---------- */
  --hud-card-w: 357px;
  --hud-card-h: 354px;
  --hud-card-pad: 22px 18px 18px;
  --hud-card-gap: 18px;
  --hud-card-blur: 4px;
  --hud-panel-w: 321px;
  --hud-panel-h: 184px;
  --hud-marker-w: 16px;
  --hud-shift: 24px;                 /* active stop translateX(24px) */
  --hud-gap: 36px;

  /* ---------- marquee (.partner-carousel) ---------- */
  --marquee-cell-w: 260px;
  --marquee-cell-h: 72px;
  --marquee-dur: 90s;                /* compact variant 28s · touch 180s */
  --marquee-dur-compact: 28s;
  --marquee-dur-touch: 180s;
  --marquee-fade: 24px;              /* mask edge (compact: 56px) */
  --marquee-opacity: .5;

  /* ---------- badges / seals ---------- */
  --badge-size: 120px;               /* size-[120px] · max-lp:size-[90px] */
  --badge-size-m: 90px;
  --badge-size-footer: 36px;
  --badge-ink: var(--grey);          /* bg-grey-m · hover:bg-black */
  --badge-ink-hover: var(--black);

  /* ---------- shadows ---------- */
  --shadow-card: 0 12px 12px rgba(0,0,0,.24);     /* HUD card */
  --shadow-story: 0 14px 32px rgba(0,0,0,.25);    /* story card image */

  /* ---------- motion ---------- */
  --dur-fast: .2s;                   /* nav item colour */
  --dur: .3s;                        /* transition-colors duration-300 */
  --dur-slow: .5s;                   /* HUD opacity/transform */
  --dur-reveal: .9s;                 /* .reveal */
  --ease: cubic-bezier(.4,0,.2,1);   /* standard (hero-walk caret, cta underline) */
  --ease-io: ease-in-out;
  --ease-soft: cubic-bezier(.22,1,.36,1);   /* demo-booker-in */
  --ease-pop: cubic-bezier(.2,.8,.2,1);     /* vd-pop */
  --ease-camera: cubic-bezier(.48,0,.18,1); /* CustomEase "M0,0 C0.48,0 0.18,1 1,1" (first dive) */
  --glint-dur: 10s;                  /* .product-ui-stroke-spin */

  /* ---------- z-index ---------- */
  --z-nav: 100;
  --z-menu: 110;
  --z-hud: 30;
  --z-trust: 20;
  --z-stage: 1;
}

/* ---------- theme scopes ---------- */
[data-theme="light"], .section--white, .theme-light {
  --bg: var(--white);
  --fg: var(--black);
  --fg-body: var(--grey);
  --fg-dim: var(--grey);
  --fg-dim-40: rgba(0,0,0,.4);
  --hairline: var(--k10);
  --hairline-strong: rgba(0,0,0,.18);
  --pill-bg: var(--k08);
  --pill-bg-hover: var(--k14);
  --pill-fg: var(--black);
  --pill-fg-hover: var(--black);
  --pill-ico-bg: var(--black);
  --pill-ico-fg: var(--white);
  --ghost-hover: rgba(0,0,0,.06);
  --nav-pill-bg: rgba(255,255,255,.6);
  --reserved-fill: rgba(0,0,0,.03);
}
[data-theme="sand"], .section--sand-s, .theme-sand {
  --bg: var(--sand-s);
  --fg: var(--black);
  --fg-body: var(--grey);
  --fg-dim: var(--grey);
  --fg-dim-40: rgba(0,0,0,.4);
  --hairline: var(--sand-l-60);
  --hairline-strong: var(--sand-l);
  --pill-bg: var(--k08);
  --pill-bg-hover: var(--k14);
  --pill-fg: var(--black);
  --pill-fg-hover: var(--black);
  --pill-ico-bg: var(--black);
  --pill-ico-fg: var(--white);
  --ghost-hover: rgba(0,0,0,.06);
  --nav-pill-bg: rgba(255,255,255,.6);
  --reserved-fill: rgba(0,0,0,.03);
}
[data-theme="sand-m"], .section--sand-m, .theme-sand-m {
  --bg: var(--sand-m);
  --fg: var(--black);
  --fg-body: var(--grey);
  --fg-dim: var(--grey);
  --fg-dim-40: rgba(0,0,0,.4);
  --hairline: var(--sand-l-60);
  --hairline-strong: var(--sand-l);
  --pill-bg: var(--k08);
  --pill-bg-hover: var(--k14);
  --pill-fg: var(--black);
  --pill-fg-hover: var(--black);
  --pill-ico-bg: var(--black);
  --pill-ico-fg: var(--white);
  --ghost-hover: rgba(0,0,0,.06);
  --nav-pill-bg: rgba(255,255,255,.6);
  --reserved-fill: rgba(0,0,0,.03);
}
[data-theme="dark"], .section--black, .theme-dark {
  --bg: var(--black);
  --fg: var(--white);
  --fg-body: var(--white);
  --fg-dim: var(--w60);
  --fg-dim-40: var(--w40);
  --hairline: var(--w15);
  --hairline-strong: var(--w20);
  --pill-bg: var(--w12);
  --pill-bg-hover: var(--w24);
  --pill-fg: var(--white);
  --pill-fg-hover: var(--sand-m);
  --pill-ico-bg: var(--jam);
  --pill-ico-fg: var(--jam-ink);
  --ghost-hover: var(--w15);
  --nav-pill-bg: var(--k36);
  --reserved-fill: rgba(255,255,255,.04);
}

/* ---------- responsive token flips (Lance's own values) ---------- */
@media (max-width: 800px) {           /* max-bp: py-20 */
  :root { --section-y: var(--section-y-m); --section-y-stories: 80px; }
}
@media (max-width: 600px) {           /* max-tp: --page-x: 14px */
  :root { --px-page: var(--px-page-m); }
}

/* ---- src/css/01-base.css ---- */
/* =====================================================================
   hypjam v2 · 01-base.css
   Reset, document defaults, Lenis hooks, reduced motion, focus ring,
   and the handful of .u- utilities the contract allows here.
   Fonts are NOT @imported here (site.css is a concatenation, so an
   @import would not be first) — the head partial links
   /assets/fonts/geist.css and /assets/fonts/newsreader.css.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  background: var(--bg);
  /* Lance hides the scrollbar on the landing (html:has([data-landing]){scrollbar-width:none}) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; margin: 0; height: 1px; background: var(--hairline); }
address, cite, em, i { font-style: normal; }
strong, b { font-weight: var(--fw-medium); }
small { font-size: var(--fs-caption); }
abbr[title] { text-decoration: none; }

img, video, svg, canvas, picture, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
svg { overflow: visible; }
img { border: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}
button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
  border-radius: 0;
}
/* Lance: everything clickable gets a pointer, disabled gets not-allowed */
button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), summary, label[for] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
textarea { resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }

[hidden] { display: none !important; }

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

/* focus ring in jam · keyboard only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--jam);
  outline-offset: 3px;
  border-radius: 2px;
}
/* pills keep their radius on the ring: see .btn:focus-visible in 03-ui.css */

/* ---------- Lenis (https://github.com/darkroomengineering/lenis#recommended-css) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---------- reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- .u- utilities (the only utilities the contract allows) ---------- */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.u-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.u-no-scrollbar::-webkit-scrollbar { display: none; }
.u-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-contain { object-fit: contain; }
.u-nowrap { white-space: nowrap; }
.u-tabular { font-variant-numeric: tabular-nums; }
.u-jam { color: var(--jam); }
.u-grey { color: var(--grey); }
.u-dim { color: var(--fg-dim); }
.u-dim-40 { color: var(--fg-dim-40); }
.u-w40 { color: var(--w40); }
.u-w45 { color: var(--w45); }
.u-w60 { color: var(--w60); }
.u-w70 { color: var(--w70); }
.u-w75 { color: var(--w75); }
.u-sand-l { color: var(--sand-l); }
.u-sand-m { color: var(--sand-m); }
.u-hide { display: none !important; }
/* breakpoint show/hide — Lance's max-tp / max-bp / max-lp */
@media (max-width: 600px)  { .u-hide-tp { display: none !important; } }
@media (min-width: 601px)  { .u-only-tp { display: none !important; } }
@media (max-width: 800px)  { .u-hide-bp { display: none !important; } }
@media (min-width: 801px)  { .u-only-bp { display: none !important; } }
@media (max-width: 1024px) { .u-hide-lp { display: none !important; } }
@media (min-width: 1025px) { .u-only-lp { display: none !important; } }

/* ---- src/css/02-typography.css ---- */
/* =====================================================================
   hypjam v2 · 02-typography.css
   One class per text style in CONTRACT §4 / ref/style_spec.json.
   Display = Newsreader (opsz axis, font-optical-sizing:auto), 400 only.
   Body = Geist. Responsive downshifts are Lance's exact max-lp / max-tp
   overrides (h1: max-lp:text-[48px] max-tp:text-[36px]; h2/quote: max-tp).
   ===================================================================== */

/* shared display setup — Lance's [data-landing] .font-display */
.t-display, .t-h1, .t-title, .t-h2, .t-h3, .t-quote, .t-trust, .t-card-title, .t-story-quote, .t-num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

/* h1 · 64/1.05/-1.28 → ≤1024: 48/-.96 → ≤600: 36/-.72 */
.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
/* .title · sub-page hero 64/1/-1.28 → ≤600: 40/-.8 */
.t-title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
/* h2 · 42/1.1/-.84 → ≤600: 28/-.56 */
.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
/* the second line of a two-line h2 at 40% ("running every shift on Lance") */
.t-h2-dim { color: var(--fg-dim-40); }
/* h3 · 18px display (stories page list titles, security cards use caps instead) */
.t-h3 {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.2px;
}
/* big quote · 36/1.25/-.72 → ≤600: 24/-.48 */
.t-quote {
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
}
/* hero trust paragraph · 36/1.2/-.84 → ≤600: 24/-.48 */
.t-trust {
  font-size: var(--fs-trust);
  line-height: var(--lh-trust);
  letter-spacing: var(--ls-trust);
  max-width: var(--max-trust);
}
/* HUD card title · 26/1.2/-.52 */
.t-card-title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card-title);
}
/* story card quote · 18/1.25/-.2 */
.t-story-quote {
  font-size: var(--fs-story-quote);
  line-height: var(--lh-story-quote);
  letter-spacing: var(--ls-story-quote);
}
/* big numerals (metrics beat) · display, tabular */
.t-num {
  font-size: 96px;
  line-height: 1;
  letter-spacing: -2.88px;
  font-variant-numeric: tabular-nums lining-nums;
}
/* hanging punctuation for opening quotes */
.t-hanging { hanging-punctuation: first last allow-end; }
@supports not (hanging-punctuation: first) { .t-hanging { text-indent: -.4em; } }

/* ---------- body (Geist) ---------- */
/* p · 16/24 · colour follows the theme (white on dark, --grey on light) · ≤600: 14px */
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: normal;
  color: var(--fg-body);
}
/* 16/22.4 · feature blurbs, rights labels */
.t-body-tight {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  color: var(--fg-body);
}
/* the inline bold-ish title inside a feature blurb: 16/22.4 weight 500, black on light */
.t-feature-title {
  font-weight: var(--fw-medium);
  color: var(--fg);
}
/* 14/1.4 · hero sub-line, nav dropdown copy, attribution name (500) */
.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.t-small-medium {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
}
/* 14/1.35 · HUD card description (sand-l) */
.t-hud-desc {
  font-family: var(--font-body);
  font-size: var(--fs-hud-desc);
  line-height: var(--lh-hud-desc);
  color: var(--sand-l);
}
/* 14/1.5 · HUD stop buttons */
.t-hud {
  font-family: var(--font-body);
  font-size: var(--fs-hud);
  line-height: var(--lh-hud);
}
/* 14/1 · buttons, footer links, "Read", "(Skip)" */
.t-btn {
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  line-height: 1;
}
/* 13/1 · nav items */
.t-nav {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  line-height: 1;
}
/* 13/1.35 · attribution lines (white .75) */
.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
/* 13/1.3 · meta ("Travellers' Choice", "100 keys") at .45 */
.t-meta {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-meta);
  color: var(--fg-dim-40);
}
/* 12px caps, tracking .08em · "PRODUCT", "LAUNCH FILM · 1 MIN 18 SEC" */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-dim);
}
/* 13px caps, tracking .06em, full-strength · security-card titles, rights labels */
.t-eyebrow-lg {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow-lg);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow-lg);
  text-transform: uppercase;
  color: var(--fg);
}
/* 16px caps 1.4 · rights section labels ("SOC 2 TYPE I") in --grey */
.t-label-caps {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--grey);
}
/* 11px micro caps · tags, timecodes */
.t-micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- colour helpers scoped to text ---------- */
.t-fg { color: var(--fg); }
.t-grey { color: var(--grey); }
.t-dim { color: var(--fg-dim); }
.t-dim-40 { color: var(--fg-dim-40); }
.t-w40 { color: var(--w40); }
.t-w45 { color: var(--w45); }
.t-w60 { color: var(--w60); }
.t-w70 { color: var(--w70); }
.t-w75 { color: var(--w75); }
.t-sand-l { color: var(--sand-l); }
.t-sand-m { color: var(--sand-m); }
.t-jam { color: var(--jam); }
.t-center { text-align: center; }
.t-balance { text-wrap: balance; }
.t-pretty { text-wrap: pretty; }

/* ---------- responsive downshifts (Lance's exact variants) ---------- */
@media (max-width: 1024px) {          /* max-lp */
  .t-h1 { font-size: var(--fs-h1-lp); letter-spacing: var(--ls-h1-lp); }
  .t-num { font-size: 72px; letter-spacing: -2.16px; }
  .t-trust { max-width: none; }
}
@media (max-width: 1511px) {          /* max-[1511px]: trust paragraph min(717px,47vw) */
  .t-trust { max-width: min(var(--max-trust), 47vw); }
}
@media (max-width: 1024px) { .t-trust { max-width: none; } }
@media (max-width: 600px) {           /* max-tp */
  .t-h1 { font-size: var(--fs-h1-tp); letter-spacing: var(--ls-h1-tp); }
  .t-title { font-size: var(--fs-title-tp); letter-spacing: var(--ls-title-tp); }
  .t-h2 { font-size: var(--fs-h2-tp); letter-spacing: var(--ls-h2-tp); }
  .t-quote { font-size: var(--fs-quote-tp); letter-spacing: var(--ls-quote-tp); }
  .t-trust { font-size: var(--fs-quote-tp); letter-spacing: var(--ls-quote-tp); }
  .t-body { font-size: var(--fs-body-tp); }
  .t-num { font-size: 56px; letter-spacing: -1.68px; }
}

/* ---- src/css/03-ui.css ---- */
/* =====================================================================
   hypjam v2 · 03-ui.css
   Shared UI atoms: .btn pill, .eyebrow, .container, .section, .hairline,
   .arrow-link, .reserved + .tag-soon, .icon, .badge, .marquee, .glint,
   .reveal. Everything is measured from Lance (see DESIGN.md §5–§8).
   Section-specific components live in their owners' files.
   ===================================================================== */

/* ---------- .btn · the pill ----------
   Lance nav "Book a Demo": group flex shrink-0 items-center rounded-full text-[14px]
   leading-none transition-colors duration-300 h-8 gap-2.5 pl-4 pr-[5px] bg-white/12
   text-white backdrop-blur-[6px] hover:bg-white/24 hover:text-sand-m
   + <span class="rounded-full size-[22px] bg-white text-black"> with an 11px arrow.
   Ours: same box; the circle is --jam on dark (Lance: white).
   Hero size (.btn--lg): h-9 gap-3 pl-[18px] pr-[6px], circle size-6, arrow 12px. */
.btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--btn-h);
  gap: var(--btn-gap);
  padding: 0 var(--btn-pr) 0 var(--btn-pl);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  text-decoration: none;
  color: var(--pill-fg);
  background: var(--pill-bg);
  -webkit-backdrop-filter: blur(var(--btn-blur));
  backdrop-filter: blur(var(--btn-blur));
  cursor: pointer;
  transition: color var(--dur), background-color var(--dur);
}
.btn:hover { background: var(--pill-bg-hover); color: var(--pill-fg-hover); }
.btn:focus-visible { border-radius: var(--r-pill); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--btn-ico);
  height: var(--btn-ico);
  border-radius: 50%;
  background: var(--pill-ico-bg);
  color: var(--pill-ico-fg);
}
.btn__ico svg, .btn__ico .icon { display: block; width: var(--btn-ico-svg); height: var(--btn-ico-svg); }
.btn--lg { height: var(--btn-h-lg); gap: var(--btn-gap-lg); padding: 0 var(--btn-pr-lg) 0 var(--btn-pl-lg); }
.btn--lg .btn__ico { width: var(--btn-ico-lg); height: var(--btn-ico-lg); }
.btn--lg .btn__ico svg, .btn--lg .btn__ico .icon { width: var(--btn-ico-svg-lg); height: var(--btn-ico-svg-lg); }

/* explicit variants (override whatever the theme scope says) */
.btn--dark {
  --pill-bg: var(--w12); --pill-bg-hover: var(--w24);
  --pill-fg: var(--white); --pill-fg-hover: var(--sand-m);
  --pill-ico-bg: var(--jam); --pill-ico-fg: var(--jam-ink);
}
/* light pages · measured on ref/pages/product.jpg + security.jpg: a black/8 pill,
   black text, a BLACK circle with a white arrow (not a black pill). */
.btn--light {
  --pill-bg: var(--k08); --pill-bg-hover: var(--k14);
  --pill-fg: var(--black); --pill-fg-hover: var(--black);
  --pill-ico-bg: var(--black); --pill-ico-fg: var(--white);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* solid black pill, white circle · for a light pill that must read as primary */
.btn--solid {
  --pill-bg: var(--black); --pill-bg-hover: #1a1a1a;
  --pill-fg: var(--white); --pill-fg-hover: var(--white);
  --pill-ico-bg: var(--white); --pill-ico-fg: var(--black);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* force the jam circle on any variant */
.btn--jam { --pill-ico-bg: var(--jam); --pill-ico-fg: var(--jam-ink); }
/* ghost · Lance's nav text pills: h-8 rounded-full px-[14px] hover:bg-white/15 */
.btn--ghost {
  padding: 0 var(--nav-item-px);
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--fg);
}
.btn--ghost:hover { background: var(--ghost-hover); color: var(--fg); }
.btn--ghost:has(.btn__ico) { padding-right: var(--btn-pr); }
.btn--ghost .btn__ico { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
/* text-only pill (nav "Log in": px-1.5 text-[13px], tp:px-[14px]) */
.btn--text { padding: 0 6px; font-size: var(--fs-nav); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--fg); }
.btn--text:hover { background: var(--ghost-hover); color: var(--fg); }
@media (min-width: 601px) { .btn--text { padding: 0 var(--nav-item-px); } }
.btn--full { width: 100%; justify-content: space-between; }

/* ---------- .eyebrow · "— Operations" (product pages) ----------
   measured: 20×1px dash, 12px gap, 13px --grey text. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-dash-label);
  line-height: 1;
  letter-spacing: var(--ls-dash-label);
  color: var(--grey);
  white-space: nowrap;
}
.eyebrow::before { content: ""; flex-shrink: 0; width: 20px; height: 1px; background: currentColor; }
.eyebrow--caps { text-transform: uppercase; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); }
.eyebrow--nodash::before { display: none; }
.eyebrow--fg { color: var(--fg); }
.eyebrow--dim { color: var(--fg-dim); }
/* the standalone short rule under security-card titles (24px, 40%) */
.dash { display: block; width: 24px; height: 1px; background: var(--fg-dim-40); }
.dash--wide { width: 40px; }

/* ---------- .container ---------- */
.container { width: 100%; padding-left: var(--px-page); padding-right: var(--px-page); }
.container--content { max-width: calc(var(--max-content) + 2 * var(--px-page)); margin-inline: auto; }
.container--medium  { max-width: calc(var(--max-medium)  + 2 * var(--px-page)); margin-inline: auto; }
.container--small   { max-width: calc(var(--max-small)   + 2 * var(--px-page)); margin-inline: auto; }
.container--max     { max-width: calc(var(--max-container) + 2 * var(--px-page)); margin-inline: auto; }
.container--flush   { padding-left: 0; padding-right: 0; }
/* Lance's .left-page / .right-page anchors */
.left-page  { left: var(--px-page); }
.right-page { right: var(--px-page); }

/* ---------- .section ----------
   py-[120px] max-bp:py-20 · themed by data-theme or the .section--* aliases
   (declared in 00-tokens.css so the semantic tokens flip with them). */
.section {
  position: relative;
  width: 100%;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}
.section--quote   { padding-top: var(--section-y-quote);   padding-bottom: var(--section-y-quote); }   /* py-40 */
.section--stories { padding-top: var(--section-y-stories); padding-bottom: var(--section-y-stories); } /* py-[140px] */
.section--rights  { padding-top: 64px;  padding-bottom: 40px; }   /* pt-16 pb-10 */
.section--footer  { padding-top: 128px; padding-bottom: 40px; }   /* pt-32 pb-10 · max-bp:pt-20 */
.section--page-hero { padding-top: 150px; padding-bottom: 24px; } /* sub-page hero pt-[150px] pb-6 · max-bp:pt-[110px] */
.section--tight   { padding-top: 56px; padding-bottom: 120px; }  /* pt-14 pb-[120px] · max-bp: pt-10 pb-16 */
.section--flush   { padding-top: 0; padding-bottom: 0; }
.section--fill    { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.section--clip    { overflow: hidden; }
@media (max-width: 800px) {
  .section--footer    { padding-top: 80px; }
  .section--page-hero { padding-top: 110px; }
  .section--tight     { padding-top: 40px; padding-bottom: 64px; }
}

/* ---------- .hairline ---------- */
.hairline { display: block; width: 100%; height: 1px; margin: 0; border: 0; background: var(--hairline); }
.hairline--strong { background: var(--hairline-strong); }
.hairline--v { width: 1px; height: auto; align-self: stretch; }
.hairline--hud { height: .5px; background: var(--grey-60); }       /* HUD card divider: h-[0.5px] bg-grey-m/60 */
.hairline--sand { background: var(--sand-l-60); }                    /* border-sand-l/60 */
.hairline--white15 { background: var(--w15); }                       /* footer rule: my-16 h-px bg-white/15 */

/* ---------- .arrow-link · "Explore →" (13px) · "Learn More »" (16px) · "Read" (14px) ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur);
}
.arrow-link:hover { color: var(--fg); }
.arrow-link svg, .arrow-link .icon { width: 12px; height: 12px; flex-shrink: 0; }
.arrow-link__mark { font-size: 12px; line-height: 1; }              /* the » glyph */
.arrow-link--lg { gap: 12px; font-size: 16px; padding-top: 12px; padding-bottom: 12px; }   /* Learn More: py-3 gap-3 text-[16px] */
.arrow-link--btn { font-size: var(--fs-btn); color: var(--fg); }     /* "Read": 14px white */
.arrow-link--fg { color: var(--fg); }
.arrow-link--fg:hover { color: var(--fg-dim); }
/* Lance's .cta-touch underline sweep */
.arrow-link--underline { position: relative; padding-bottom: 4px; }
.arrow-link--underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--sand-m); transform-origin: 0; transform: scaleX(1); pointer-events: none;
}
.arrow-link--underline:hover::after { animation: ui-underline .55s var(--ease) forwards; }
@keyframes ui-underline {
  0%   { transform-origin: 100%; transform: scaleX(1); }
  45%  { transform-origin: 100%; transform: scaleX(0); }
  55%  { transform-origin: 0;    transform: scaleX(0); }
  100% { transform-origin: 0;    transform: scaleX(1); }
}
/* arrow nudges on hover (feature/story cards) */
.arrow-link--nudge svg { transition: transform var(--dur) var(--ease); }
.arrow-link--nudge:hover svg { transform: translateX(3px); }

/* ---------- .reserved · honest held-open slots (CONTRACT §10) ----------
   dashed hairline frame + .tag-soon pill with a jam dot. Must look designed. */
.reserved {
  position: relative;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-img);
  background: var(--reserved-fill);
  color: var(--fg-dim);
}
.reserved--card   { border-radius: var(--r-card); }
.reserved--square { border-radius: 0; }
.reserved--inline { border-radius: var(--r-pill); padding: 6px 12px; display: inline-flex; align-items: center; gap: 10px; }
.reserved__area {                       /* the image area of a card */
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
/* a line-drawn phone silhouette for image areas */
.reserved__phone {
  position: relative;
  width: 84px;
  aspect-ratio: 9 / 19;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  flex-shrink: 0;
}
.reserved__phone::before {              /* speaker */
  content: ""; position: absolute; top: 8px; left: 50%; width: 26px; height: 3px; margin-left: -13px;
  border-radius: 2px; border: 1px solid var(--hairline-strong);
}
.reserved__phone::after {               /* home bar */
  content: ""; position: absolute; bottom: 8px; left: 50%; width: 22px; height: 1px; margin-left: -11px;
  background: var(--hairline-strong);
}
.reserved__phone--lg { width: 120px; border-radius: 18px; }
.reserved__phone--sm { width: 40px; border-radius: 8px; }
.reserved__phone--sm::before { top: 5px; width: 14px; margin-left: -7px; height: 2px; }
.reserved__phone--sm::after { bottom: 5px; width: 12px; margin-left: -6px; }
.reserved__label { color: var(--fg-dim); }
.tag-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--reserved-fill);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--fg-dim);
}
.tag-soon::before {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--jam);
  animation: ui-live 2.4s ease-in-out infinite;
}
.tag-soon--static::before { animation: none; }
.tag-soon--caps { text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
@keyframes ui-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* a lone jam live dot */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--jam); animation: ui-live 2.4s ease-in-out infinite; }

/* ---------- .icon · for the inline sprite (src/partials/icons.html) ----------
   <svg class="icon" aria-hidden="true"><use href="#i-arrow-right"/></svg> */
.icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.125em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon--11 { width: 11px; height: 11px; }
.icon--12 { width: 12px; height: 12px; }
.icon--14 { width: 14px; height: 14px; }
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--block { display: block; vertical-align: 0; }

/* ---------- .badge · line-drawn seals (assets/badges/*.svg or #seal-* symbols) ----------
   Lance: block size-[120px] bg-grey-m hover:bg-black max-lp:size-[90px] (mask-image PNGs).
   Ours are stroke="currentColor" SVGs: inline them (sprite) to get the hover recolour. */
.badge {
  display: block;
  width: var(--badge-size);
  height: var(--badge-size);
  color: var(--badge-ink);
  transition: color var(--dur);
}
.badge svg, .badge img { display: block; width: 100%; height: 100%; }
.badge:hover, a:hover > .badge, a:focus-visible > .badge { color: var(--badge-ink-hover); }
.badge--footer { width: var(--badge-size-footer); height: var(--badge-size-footer); }
.badge--sm { width: 64px; height: 64px; }
@media (max-width: 1024px) { .badge:not(.badge--footer):not(.badge--sm) { width: var(--badge-size-m); height: var(--badge-size-m); } }
/* footer "Shot on phones, directed by people" row · Lance: 36px seal + 14px --grey text */
.badge-row { display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-body); font-size: var(--fs-btn); line-height: 1; color: var(--grey); white-space: nowrap; }
[data-theme="dark"] .badge, .section--black .badge, :root .badge--on-dark { --badge-ink: var(--grey); --badge-ink-hover: var(--white); }
[data-theme="light"] .badge, [data-theme="sand"] .badge, [data-theme="sand-m"] .badge,
.section--white .badge, .section--sand-s .badge, .section--sand-m .badge { --badge-ink: var(--grey); --badge-ink-hover: var(--black); }

/* ---------- .marquee · Lance's .partner-carousel ----------
   mask 24px edges · track = two identical groups · translate(-50%) over 90s · opacity .5
   cells 260×72 · logo heights 22–42px (set --logo-h per cell) */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: var(--marquee-opacity);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: ui-marquee var(--marquee-dur) linear infinite;
}
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__cell {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--marquee-cell-w); height: var(--marquee-cell-h);
  color: var(--fg);
}
.marquee__cell img, .marquee__cell svg { width: auto; height: var(--logo-h, 28px); max-width: none; object-fit: contain; -webkit-user-drag: none; }
.marquee--compact { --marquee-fade: 56px; --marquee-dur: var(--marquee-dur-compact); }
.marquee--full { --marquee-opacity: 1; }
@media (hover: none) and (pointer: coarse) { .marquee__track { animation-duration: var(--marquee-dur-touch); } }
@keyframes ui-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- .glint · Lance's .product-ui-stroke rotating border ----------
   place inside a position:relative rounded box:
   <div class="glint" aria-hidden="true"><div class="glint__spin"></div></div>
   conic: #fff 0° · #ffffff2e 90° · [jam] 180° · #ffffff2e 270° · #fff 360° (Lance: #ffffffd9 at 180°) */
.glint {
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: .5px;
  overflow: hidden;
  opacity: .6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}
.glint__spin {
  position: absolute; left: 50%; top: 50%;
  width: 220%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(#fff 0deg, rgba(255,255,255,.18) 90deg, var(--jam) 180deg, rgba(255,255,255,.18) 270deg, #fff 360deg);
  animation: ui-glint var(--glint-dur) linear infinite;
}
.glint--white .glint__spin { background: conic-gradient(#fff 0deg, rgba(255,255,255,.18) 90deg, rgba(255,255,255,.85) 180deg, rgba(255,255,255,.18) 270deg, #fff 360deg); }
@keyframes ui-glint { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ---------- .reveal · Lance's scroll reveal (JS adds .is-shown) ---------- */
.reveal { --reveal-delay: 0s; opacity: 0; transition: opacity var(--dur-reveal) ease var(--reveal-delay); }
.reveal.is-shown { opacity: 1; }
.reveal-text { --rt-from: var(--sand-l); --rt-to: var(--fg); }
.reveal-text .rt-i { color: var(--rt-from); transition: color .6s ease; }
.reveal-text.is-shown .rt-i { color: var(--rt-to); }

/* ---------- reduced motion for the loops declared here ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track, .glint__spin, .tag-soon::before, .live-dot, .arrow-link--underline:hover::after { animation: none !important; }
  .reveal { opacity: 1 !important; transition: none !important; }
  .reveal-text .rt-i { color: var(--rt-to) !important; }
}

/* ---- src/css/10-nav.css ---- */
/* ==========================================================================
   10-nav.css — one-to-one port of Lance's <nav> (ref/index.html, ref/lance-css)
   Measured: fixed, z 60, padding 28px var(--px-page), 88px tall, items 13px,
   -14px outer margin so the first label sits on the page gutter, triggers
   -8px vertical margin / 32px pill / 14px padding, CTA 32px pill with a 22px
   circle. Breakpoints are Lance's compiled ones: tp 601, bp 801, lp 1025,
   nv 1201 (min-width). Theme + fill are driven by 10-nav.js from the
   data-nav / data-nav-fill attributes of the section under the nav.
   ========================================================================== */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav, 60);
  display: flex;
  flex-direction: column;
  padding: var(--nav-pad, 28px) var(--px-page, 28px);
  color: #fff;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-body, 'Geist', Arial, Helvetica, sans-serif);
  font-weight: 400;
  pointer-events: auto;
  transition: background-color .3s, backdrop-filter .3s, color .3s;
}
.nav[data-theme="light"] { color: #000; }

/* fills (values mirror Lance's data-nav-fill vocabulary) */
.nav[data-fill="bg-black"]  { background-color: rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav[data-fill="bg-white"]  { background-color: #fff; }
.nav[data-fill="bg-grey-s"] { background-color: #f5f5f5; }
.nav[data-fill="bg-sand-s"] { background-color: var(--sand-s, #f7f6f4); }
.nav[data-fill="bg-sand-m"] { background-color: var(--sand-m, #dad9d4); }
.nav[data-open="true"] { color: #fff; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.nav-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 801px) {
  .nav-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- left cluster (desktop, >= 1201px) ---------------------------------- */
.nav-left {
  display: none;
  margin: 0 -14px;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: 13px;
}
.nav-mobile-toggle { display: flex; align-items: center; justify-content: flex-start; font-size: 14px; }
@media (min-width: 1201px) {
  .nav-left { display: flex; }
  .nav-mobile-toggle { display: none; }
}

.nav-item { position: relative; }

.nav-trigger,
.nav-link {
  position: relative;
  margin: -8px 0;
  display: flex;
  height: 32px;
  align-items: center;
  border-radius: 9999px;
  padding: 0 14px;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  line-height: 1; /* after `font` — the shorthand would reset it */
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease-in-out, background-color .3s;
}
.nav-link:hover { background-color: var(--ghost-hover, rgba(255, 255, 255, .15)); color: inherit; }
.nav-trigger-label { position: relative; }
.nav-trigger-bg {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: var(--nav-pill-bg, rgba(0, 0, 0, .36));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.nav-item.is-open > .nav-trigger .nav-trigger-bg,
.nav-trigger:hover .nav-trigger-bg { opacity: 1; }
.nav-trigger:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.nav-menu-btn:focus-visible,
.nav-logo:focus-visible { outline: 2px solid var(--jam, #ff6f1f); outline-offset: 2px; }

/* ---- dropdown panels ---------------------------------------------------- */
.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 1;
  min-width: 240px;
  padding: 8px;
  border-radius: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility 0s linear .2s;
}
.nav-menu::before { /* bridges the 14px hover gap under the trigger */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.nav-item.is-open > .nav-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility 0s;
}
.nav-menu-inner { display: flex; align-items: stretch; gap: 8px; }
.nav-menu-cols { display: grid; grid-template-columns: repeat(2, minmax(176px, auto)); gap: 0 4px; }
.nav-menu-col { display: flex; flex-direction: column; min-width: 176px; }
.nav-menu-title {
  margin: 0;
  padding: 10px 12px 6px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey, #7b7b7b);
}
.nav-menu-link {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.nav-menu-link:hover,
.nav-menu-link:focus-visible { background-color: rgba(255, 255, 255, .08); color: #fff; outline: none; }
.nav-menu-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px -8px -8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s;
}
.nav-menu-foot:hover { color: #fff; }
.nav-menu-foot svg { transition: transform .2s; }
.nav-menu-foot:hover svg { transform: translateX(2px); }

/* the "New" card (Services) */
.nav-menu-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px;
  padding: 14px;
  border-radius: 8px;
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
  text-decoration: none;
  transition: background-color .2s;
}
.nav-menu-card:hover { background-color: rgba(255, 255, 255, .1); }
.nav-menu-card-head { display: flex; align-items: center; justify-content: space-between; }
.nav-menu-tile {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.nav-menu-tile img { display: block; width: 24px; height: 24px; border-radius: 5px; }
.nav-menu-new,
.nav-m-new {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jam, #ff6f1f);
}
.nav-menu-card-title { margin-top: 2px; font-size: 14px; line-height: 1.3; color: #fff; }
.nav-menu-card-desc { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .6); }

/* the video card (Resources) */
.nav-menu-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
  padding: 8px 8px 12px;
  border-radius: 8px;
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
  text-decoration: none;
  transition: background-color .2s;
}
.nav-menu-video:hover { background-color: rgba(255, 255, 255, .1); }
.nav-menu-video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background-color: #141414;
  overflow: hidden;
}
.nav-menu-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.nav-menu-video-frame.is-playing .nav-menu-play { opacity: 0; }
.nav-menu-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity .3s;
}
.nav-menu-play svg { margin-left: 2px; }
.nav-menu-video-title { padding: 0 4px; font-size: 13px; line-height: 1.3; color: #fff; }
.nav-menu-video-sub { padding: 0 4px; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .45); }

/* ---- centre lockup ------------------------------------------------------- */
.nav-centre { display: flex; justify-content: center; }
/* the box is the 32px row (Lance: h-4 w-[87px]); the lockup is 160px wide (brand
   minimum) = 49px tall, so it overflows the row symmetrically and the nav stays 88px */
.nav-logo {
  position: relative;
  display: block;
  width: 88px;
  height: var(--nav-item-h, 32px);
  flex-shrink: 0;
}
.nav-logo-img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  transition: opacity .3s;
}
.nav-logo-img--lockup { display: none; }
.nav-logo-img--light { opacity: 0; }
.nav[data-theme="light"] .nav-logo-img--light { opacity: 1; }
.nav[data-theme="light"] .nav-logo-img--dark { opacity: 0; }
.nav[data-open="true"] .nav-logo-img--light { opacity: 0; }
.nav[data-open="true"] .nav-logo-img--dark { opacity: 1; }
@media (min-width: 601px) {
  .nav-logo { width: 160px; }
  .nav-logo-img--lockup { display: block; }
  .nav-logo-img--word { display: none; }
}

/* ---- right cluster ------------------------------------------------------- */
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.nav-link--creators { padding: 0 6px; font-size: 13px; }
@media (min-width: 601px) {
  .nav-right { gap: 12px; }
  .nav-link--creators { padding: 0 14px; }
}
.nav-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 32px;
  gap: 10px;
  padding: 0 5px 0 16px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1;
  color: var(--pill-fg, #fff);
  background-color: var(--pill-bg, rgba(255, 255, 255, .12));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.nav-cta:hover { background-color: var(--pill-bg-hover, rgba(255, 255, 255, .24)); color: var(--pill-fg-hover, var(--sand-m, #dad9d4)); }
/* light pages (measured on ref/pages/product.jpg): black/8 pill, black text, black circle, white arrow */
.nav[data-theme="light"] .nav-cta { --pill-bg: rgba(0, 0, 0, .08); --pill-bg-hover: rgba(0, 0, 0, .14); --pill-fg: #000; --pill-fg-hover: #000; --pill-ico-bg: #000; --pill-ico-fg: #fff; }
.nav[data-open="true"] .nav-cta { --pill-bg: rgba(255, 255, 255, .12); --pill-bg-hover: rgba(255, 255, 255, .24); --pill-fg: #fff; --pill-fg-hover: var(--sand-m, #dad9d4); --pill-ico-bg: var(--jam, #ff6f1f); --pill-ico-fg: #000; }
.nav-cta-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background-color: var(--pill-ico-bg, var(--jam, #ff6f1f));
  color: var(--pill-ico-fg, #000);
}
.nav-cta-circle svg { display: block; flex-shrink: 0; }

/* ---- Menu / Close button (< 1201px) ------------------------------------- */
.nav-menu-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease-in-out;
}
.nav-menu-btn-close { display: none; }
.nav[data-open="true"] .nav-menu-btn-open { display: none; }
.nav[data-open="true"] .nav-menu-btn-close { display: inline; }

/* ---- full-screen mobile menu (ref/mobile/menu_open.jpg) ------------------ */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: -1;
  padding: 88px var(--px-page, 28px) 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  background-color: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out, visibility 0s linear .25s;
}
.nav[data-open="true"] .nav-mobile { opacity: 1; visibility: visible; transition: opacity .25s ease-in-out, visibility 0s; }
@media (min-width: 1201px) { .nav-mobile { display: none; } }
html.nav-lock, html.nav-lock body { overflow: hidden; }

/* Lance's rows run edge to edge, past the page gutter */
.nav-m-list { display: flex; flex-direction: column; margin: 9px calc(-1 * var(--px-page, 28px)) 0; }
.nav-m-group { display: flex; flex-direction: column; }
.nav-m-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 55px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-m-chev { flex-shrink: 0; margin-right: 1px; color: rgba(255, 255, 255, .7); transition: transform .3s ease-in-out; }
.nav-m-row--toggle[aria-expanded="true"] .nav-m-chev { transform: rotate(180deg); }
.nav-m-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease-in-out;
}
.nav-m-row--toggle[aria-expanded="true"] + .nav-m-sub { grid-template-rows: 1fr; }
.nav-m-sub-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.nav-m-row--toggle[aria-expanded="true"] + .nav-m-sub .nav-m-sub-inner { padding: 6px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.nav-m-subtitle {
  margin: 0;
  padding: 14px 2px 8px 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey, #7b7b7b);
}
.nav-m-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 2px 11px 18px;
  font-size: 15px;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
}
.nav-m-sublink:hover { color: #fff; }
.nav-m-sublink--all { color: #fff; }

/* reduced motion: no fades, no slides */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-menu, .nav-mobile, .nav-m-sub, .nav-m-chev, .nav-logo-img, .nav-trigger-bg, .nav-link, .nav-cta { transition: none; }
}

/* ---- src/css/20-hero.css ---- */
/* =====================================================================
   hypjam v2 · 20-hero.css
   The hero engine's stage (CONTRACT §7). Every number is Lance's, read
   from the Tailwind class lists in ref/hero_dom.html / ref/hero_chunk
   .pretty.js and the landing stylesheet (.hero-walk, .hotel-map,
   .product-ui-stroke → .glint from 03-ui.css, .partner-carousel →
   .marquee from 03-ui.css). Colours and type sizes come from tokens.
   Two renderings: .hero-stage (pinned, > 1024px) and .hero-m (Lance's
   phone experience, ≤ 1024px). The media queries below decide which one
   is displayed; 20-hero.js mirrors that choice in [data-mode].
   ===================================================================== */

/* ---------- section + stage ---------- */
.hero {
  position: relative;
  width: 100%;
  background: var(--sand-s);            /* Lance: section.relative.w-full.bg-sand-s (shows once the pin ends) */
  color: var(--white);
}
.hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;                        /* h-screen */
  overflow: hidden;
  background-color: #000;               /* JS: color-mix(in srgb, #f7f6f4 p%, #000) while sand animates */
}
.hero-layer { position: absolute; inset: 0; }

/* 1 · video */
.hero-video-layer { z-index: 1; will-change: filter, opacity; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}

/* 2 · overlay */
.hero-overlay { z-index: 2; pointer-events: none; background: rgba(0,0,0,.4); }

/* 3 · the drawing */
.hero-map-layer { z-index: 3; }
.hero-map { position: absolute; inset: 0; }
.hero-map svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.hero-map svg [stroke] { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.hero-stage[data-sand="1"] .hero-map svg [stroke] { stroke: var(--sand-l) !important; }

/* 4 · edge gradients (Lance: w-[min(800px,calc(800/1512*100vw))] · h-[min(719px,calc(719/1512*100vw))]) */
.hero-grad { position: absolute; z-index: 10; pointer-events: none; opacity: 0; }
.hero-grad--left {
  top: 0; bottom: 0; left: 0;
  width: min(800px, calc(800 / 1512 * 100vw));
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}
.hero-grad--top {
  left: 0; right: 0; top: 0;
  height: min(719px, calc(719 / 1512 * 100vw));
  background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* 5 · trust layer · absolute inset-0 z-20 pt-24 */
.hero-trust { z-index: 20; padding-top: 96px; }
.hero-trust-inner {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 72px var(--px-page) 180px;   /* pt-[72px] pb-[180px] px-page */
}
.hero-trust-p {
  position: relative;
  z-index: 10;
  transform: translateY(-16px);         /* -translate-y-4 */
  text-align: left;
  color: var(--white);
}
.hero-trust-p > span { display: inline; }
.trust-word { display: inline; opacity: 0; }   /* 20-hero.js splits the paragraph into these */

/* the walk hint (Lance's .hero-walk) sits bottom-right above the marquee */
.hero-walk-wrap {
  position: absolute;
  right: var(--px-page);
  bottom: 122px;                        /* marquee bottom 26 + cell 72 + 24 */
  z-index: 31;
  opacity: 0;                           /* 20-hero.js fades it in on mount (Lance fades its intro row) */
}
.hero-walk {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,.4);          /* #fff6 */
  transition: color .3s;
}
.hero-walk:hover { color: var(--white); }
.hero-walk-arrow { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 16px; height: 14px; }
.hero-walk-arrow svg { display: block; opacity: 0; }
.hero-walk--mark .hero-walk-arrow svg {
  animation-name: hero-walk-caret;
  animation-duration: var(--hero-walk-cycle, 3s);
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-iteration-count: infinite;
}
.hero-walk-label { opacity: 0; transition: opacity .5s; white-space: nowrap; }
.hero-walk--label .hero-walk-label { opacity: 1; }
@keyframes hero-walk-caret {
  0%   { opacity: 0; transform: translateY(-1.5px); }
  20%  { opacity: 1; transform: translateY(0); }
  55%  { opacity: 1; transform: translateY(2px); }
  80%  { opacity: 0; transform: translateY(5px); }
  100% { opacity: 0; transform: translateY(-1.5px); }
}
@media (max-width: 600px) { .hero-walk { font-size: 13px; } }

/* marquee · absolute bottom-[26px] left-0 right-0 z-30 flex flex-col gap-4 · .partner-carousel = .marquee */
.hero-marquee-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;                           /* G-driven: fades in over 1s from the first scroll */
}
.hero-marquee .marquee__cell { --logo-h: 26px; }   /* Lance's wordmarks: 22–42px; ours are one typographic family */
.hero-marquee .marquee__cell img { height: var(--logo-h); width: auto; }

/* 6 · HUD · absolute inset-0 z-30 (opacity + pointer-events from progress) */
.hero-hud { z-index: 30; opacity: 0; pointer-events: none; }
.hero-hud-inner {
  position: absolute;
  left: var(--px-page);                 /* left-page */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--hud-gap);                  /* 36px (eo) */
}
.hero-stops { position: relative; flex-shrink: 0; padding-right: 36px; }   /* pr-9 */
.hero-marker-track { position: absolute; top: 0; bottom: 0; left: 0; width: 16px; pointer-events: none; }
.hero-marker {
  position: absolute; left: 0; top: 0;
  width: var(--hud-marker-w); height: 1px;
  background: var(--w60);               /* bg-white/60 */
  transition: transform .5s ease-in-out;
  transform: translateY(10.5px) translateY(-50%);
}
.hero-stop-list { display: flex; flex-direction: column; gap: 6px; }       /* gap-1.5 */
.hero-stop {
  display: block;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-hud);             /* 14px */
  line-height: var(--lh-hud);           /* 1.5 */
  color: var(--white);
  opacity: .4;                          /* opacity-40 · active/hover .6 (Lance's data-[active=true]:opacity-60) */
  transform: translateX(0);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  white-space: nowrap;
}
.hero-stop:hover, .hero-stop[data-active="true"], .hero-stop[data-active="true"]:hover { opacity: .6; }

.hero-card-row { display: flex; align-items: flex-end; }
.hero-card {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: var(--hud-card-w);             /* 357 · JS tweens width/height between measured bodies */
  height: var(--hud-card-h);            /* 354 */
  border-radius: var(--r-card);         /* 12 */
  background: var(--hud-card-bg);       /* rgba(188,187,180,.12) */
  box-shadow: var(--shadow-card);       /* 0 12px 12px rgba(0,0,0,.24) */
}
.hero-card-blur {
  position: absolute; inset: 0;
  border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(var(--hud-card-blur));
  backdrop-filter: blur(var(--hud-card-blur));
  pointer-events: none;
}
.hero-card .glint { z-index: 1; }
.hero-card-body {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 2;
  padding: var(--hud-card-pad);         /* 22px 18px 18px */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-card-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hud-card-gap);             /* 18px */
  width: 100%;
  min-width: 0;
}
.hero-card-head { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; flex-shrink: 0; }
.hero-card-title { color: var(--white); }
.hero-card-desc { width: 100%; }
.hero-card-divider { flex-shrink: 0; width: 100%; height: .5px; background: var(--grey-60); }   /* h-[0.5px] bg-grey-m/60 */
.hero-panel {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: var(--hud-panel-w);            /* 321 */
  max-width: 100%;
  height: var(--hud-panel-h);           /* 184 · JS reads data-panel-height from the mounted panel */
  border-radius: var(--r-panel);        /* 6 */
}
.hero-panel > .pnl { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-skip {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 14px;                      /* text-sm */
  line-height: 20px;
  color: var(--w60);                    /* text-white/60 */
  transition: color .3s;
  white-space: nowrap;
}
.hero-skip:hover { color: var(--white); }
.hero-skip--inline { display: none; }                                   /* Lance: hidden max-tp:block (phones use .hero-m here) */
.hero-skip--corner { position: absolute; bottom: 52px; right: var(--px-page); }   /* bottom-[52px] right-[var(--page-x)] */
@media (max-width: 1200px) { .hero-skip--corner { bottom: 28px; } }          /* max-nv:bottom-7 */

/* 7 · metrics · pointer-events-none absolute inset-0 z-30 · two reveals via custom properties */
.hero-metrics {
  z-index: 30;
  pointer-events: none;
  visibility: hidden;
  --metrics-text: 0;
  --metrics-nums: 0;
  --metrics-gap: 28px;
}
.hero-metrics-inner {
  position: absolute;
  left: var(--px-page);
  top: 120px;
  right: var(--metrics-gap, 28px);
  bottom: var(--metrics-gap, 28px);
  display: flex;
  flex-direction: column;
}
.hero-metrics-text { display: flex; flex-direction: column; gap: 12px; max-width: 480px; opacity: var(--metrics-text, 0); }   /* Lance: max-w-[420px]; +60 so "Measured in commitments" stays on one line like "Measured in Outcomes" */
.hero-metrics-eyebrow:empty { display: none; }
.hero-metrics-title { color: var(--black); }
.hero-metrics-sub { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--grey); }
.hero-metrics-nums { display: flex; flex: 1; min-height: 0; margin-top: 24px; opacity: var(--metrics-nums, 0); }
.hero-metrics-spacer { width: 50%; }
.hero-metrics-col { display: flex; width: 50%; flex-direction: column; justify-content: flex-end; gap: 20px; align-self: stretch; }
.hero-metric { display: flex; width: 100%; flex-direction: column; gap: 16px; }
.hero-metric-in {
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease calc(var(--i, 0) * 160ms), transform .7s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 160ms);
}
[data-active="1"] .hero-metric-in { opacity: 1; transform: translateY(0); }
.hero-metric-row { display: flex; align-items: flex-start; color: var(--black); }
.hero-metric-num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-size: 100px;                     /* text-[100px] leading-none tracking-[-2px] */
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Lance's "%" is 60px/1.1/-1.2px; our units are words ("days", "hooks"), set at the h2 size so they read as a unit, not a second numeral */
.hero-metric-unit {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  margin-left: 8px;
  padding-top: 8px;
}
.hero-metric-unit:empty { display: none; }
.hero-metric-label { font-family: var(--font-body); font-size: 16px; line-height: 1.3; color: var(--black); }
.hero-metric-rule { width: 100%; height: 1px; overflow: hidden; background: transparent; }
.hero-metric-rule i {
  display: block; height: 1px;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--sand-l);
  transition: transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 160ms + 200ms);
}
[data-active="1"] .hero-metric-rule i { transform: scaleX(1); }
@media (max-width: 1200px) {           /* max-nv: numbers become a row under the text */
  .hero-metrics-nums { margin-top: auto; flex: none; }
  .hero-metrics-spacer { display: none; }
  .hero-metrics-col { width: 100%; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .hero-metric { width: auto; min-width: 0; flex: 1; gap: 8px; }
  .hero-metric-rule { display: none; }
}
@media (max-width: 600px) {            /* max-tp:!block — Lance brings the hairlines back on phones */
  .hero-metric-rule { display: block; }
}

/* ---------- which rendering shows ---------- */
@media (max-width: 1024px) { .hero-stage { display: none; } }
/* .hero-m's desktop `display:none` lives at the END of this file: the base
   rule `.hero-m { display:block }` below has equal specificity, so the hiding
   rule must come later in source order to win. (integration fix) */

/* =====================================================================
   mobile (≤ 1024px) · Lance's phone experience (ref/mobile/m00–m03)
   ===================================================================== */
.hero-m { display: block; width: 100%; background: var(--black); }

.hero-m-video { position: relative; height: 100svh; width: 100%; overflow: hidden; background: var(--black); }
.hero-m-vid { z-index: 1; }
.hero-m-video .hero-overlay { position: absolute; inset: 0; z-index: 2; }
.hero-m-video-grad {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}
.hero-m-video-content {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  padding: 20px var(--px-page) 28px;    /* px-page pb-7 pt-5 */
}
.hero-m-video-inner {
  position: relative;
  display: flex; flex: 1; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  gap: 24px;                            /* gap-6 */
  padding: 24px 0;                      /* pt-6 pb-6 */
  text-align: left;
}
.hero-m-p { color: var(--white); opacity: 0; }   /* 21-hero-mobile.js fades it in like Lance's h1 */
.hero-m-video-row { position: relative; display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: 15px; }
.hero-m-video-row .hero-walk { margin-left: auto; flex-shrink: 0; opacity: 0; }

.hero-m-body { position: relative; width: 100%; background: var(--black); padding: 40px 0 64px; }   /* pt-10 pb-16 */
.hero-m-marquee { margin-bottom: 48px; }                                                          /* mb-10 + the paragraph's mt-12 */
.hero-m-drawing {
  position: relative;
  margin: 0 var(--px-page);
  aspect-ratio: 44001 / 21918;
  overflow: hidden;
}
.hero-m-acc {
  display: flex; flex-direction: column;
  width: auto;
  margin: 56px var(--px-page) 0;        /* mt-14 px-page */
  border-top: 1px solid var(--w15);     /* border-t border-white/15 */
}
.hero-m-item { border-bottom: 1px solid var(--w15); }
.hero-m-row {
  display: flex; width: 100%;
  align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 20px 0;                      /* py-5 */
  text-align: left;
  color: var(--white);
}
.hero-m-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-size: 24px; line-height: 1.2; letter-spacing: -.48px;
}
.hero-m-plus { position: relative; flex-shrink: 0; width: 20px; height: 20px; color: var(--sand-l); }
.hero-m-plus i, .hero-m-plus b { position: absolute; left: 50%; top: 50%; display: block; background: currentColor; }
.hero-m-plus i { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.hero-m-plus b { width: 1px; height: 12px; transform: translate(-50%, -50%) scaleY(1); transition: transform .3s ease-out; }
.hero-m-row[aria-expanded="true"] .hero-m-plus b { transform: translate(-50%, -50%) scaleY(0); }
.hero-m-region {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1);
}
.hero-m-region[data-open="true"] { grid-template-rows: 1fr; }
.hero-m-region-clip { min-height: 0; overflow: hidden; }
.hero-m-region-inner { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }   /* gap-5 pb-6 */
.hero-m-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--sand-l); }
.hero-m-panel-box {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--r-panel);
  aspect-ratio: 321 / 184;              /* JS: 321 / data-panel-height */
  background: var(--w05);
}
.hero-m-panel {
  position: absolute; left: 0; top: 0;
  width: 321px; height: 184px;          /* JS sets height + --pnl-scale */
  max-width: none;
  transform-origin: 0 0;
  transform: scale(var(--pnl-scale, 1));
}

.hero-m-outcomes {
  position: relative; width: 100%;
  background: var(--white);
  color: var(--black);
  padding: 64px var(--px-page) 80px;    /* pt-16 pb-20 px-page */
}
.hero-m-outcomes-text { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.hero-m-outcomes-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-size: 28px; line-height: 1.1; letter-spacing: -.56px;
  color: var(--black);
}
.hero-m-outcomes-sub { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--grey); }
.hero-m-nums { display: flex; flex-direction: column; gap: 20px; margin-top: 120px; }   /* mt-[7.5rem] gap-5 */
.hero-metric-num--m { font-size: 64px; letter-spacing: -1.28px; }            /* text-[64px] leading-none tracking-[-1.28px] */
.hero-metric-unit--m { font-size: 28px; letter-spacing: -.56px; padding-top: 5px; margin-left: 6px; }   /* Lance's "%": 38px */
.hero-metric-label--m { font-size: 14px; line-height: 1.3; }
.hero-metric-rule--m i { background: rgba(188,187,180,.35); }                /* bg-sand-l/35 */

/* ---------- reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-walk-label { opacity: 1; }
  .hero-walk-arrow svg, .hero-walk--mark .hero-walk-arrow svg { opacity: 1; animation: none; transform: none; }
  .hero-walk-wrap, .hero-m-p, .hero-m-video-row .hero-walk { opacity: 1; }
  .hero-metric-in { opacity: 1; transform: none; transition: none; }
  .hero-metric-rule i { transform: scaleX(1); transition: none; }
  .hero-m-region { transition: none; }
  .hero-m-plus b { transition: none; }
}

/* ---------- which rendering shows (part 2, must stay last) ----------
   Above 1024px only the pinned .hero-stage renders; .hero-m is the phone
   rendering. This rule is last in the file on purpose — see the note beside
   the .hero-stage rule above. */
@media (min-width: 1025px) { .hero-m { display: none; } }

/* ---- src/css/30-features.css ---- */
/* =====================================================================
   hypjam v2 · 30-features.css
   Home "features" — Lance #features ("Run smarter, serve better."),
   ported from ref/index.html + ref/hero_chunk.pretty.js (the carousel
   component: min card 400, image aspect 1.16, gap 24, drag threshold 8)
   and ref/shots/s23–s24 · ref/mobile/m04–m06.

   section  w-full bg-sand-s px-page py-[120px] max-bp:py-20   → 975px tall at 1920
   inner    flex-col gap-12 (max-bp: gap-8)
   head     flex items-end justify-between gap-6
            copy: flex-col gap-3 · h2 42/1.1/-.84 black · p 16/24 grey-m max-w-[729px]
            (max-bp: min(729px,70vw))
            arrows: gap-[9.6px], 32px chevrons, text-sand-m hover:text-sand-l,
            disabled → pointer-events none · hidden ≤600
   cards    .agents-carousel overflow-hidden cursor-grab · track flex gap 24
            card width = max(400, (w − 72) / 4) → 448 at 1920 · flex-col gap-4
            image box rounded-[6px] · height = width × 1.16 (→ aspect 400/464)
            background: Lance's grey gradient over #fff
            p 16/1.4 · title font-medium black · desc grey-m
   ≤600     stacked: flex-col gap-10, cards w-full, image aspect-[400/464]
   Lance does not scroll-animate these cards, so nothing is animated here.

   The four "screens" are CSS mocks (no images). They are sized in container
   query units so they scale with the card: 3.125cqw = 14px at 448px.
   Placeholder brand is always "your brand"; no real names (name bars are
   redacted pills), no metrics.
   ===================================================================== */

.feat {
  padding-left: var(--px-page);
  padding-right: var(--px-page);
}
.feat-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;                               /* gap-12 */
}

/* ---------- head row ---------- */
.feat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;                               /* gap-6 */
}
.feat-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;                               /* gap-3 */
}
.feat-h2 { color: var(--black); }
.feat-sub {
  max-width: 729px;
  color: var(--grey);
}
.feat-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9.6px;
}
.feat-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--sand-m);
  transition: color .2s;
}
.feat-arrow:hover { color: var(--sand-l); }
.feat-arrow:disabled { pointer-events: none; color: var(--sand-m); cursor: default; }
.feat-arrow svg { display: block; width: 32px; height: 32px; }

/* ---------- carousel ---------- */
.feat-carousel {
  width: 100%;
  overflow: hidden;
  cursor: grab;
}
.feat-carousel.is-dragging { cursor: grabbing; }
.feat-track {
  display: flex;
  gap: 24px;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}
.feat-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;                               /* gap-4 */
  text-align: left;
  width: 400px;                            /* JS sets the measured width; 400 = Lance's min */
}
.feat-media {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 464;                 /* = width × 1.16 */
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(270deg, rgba(217,217,217,.6) 11.375%, rgba(240,240,240,.6) 52.812%, rgba(227,227,227,.6) 81.651%, rgba(188,187,180,.6) 114%),
    #fff;
  container-type: inline-size;
}
.feat-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--grey);
}
.feat-title { font-weight: var(--fw-medium); color: var(--black); }
.feat-desc { color: var(--grey); }

/* ---------- the mocks ----------
   base 14px at 448px (3.125cqw); everything inside is in em. */
.feat-mock {
  position: absolute;
  inset: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-size: 3.125cqw;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--grey);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.feat-screen {
  position: absolute;
  left: 12%;
  top: 13%;
  width: 118%;
  padding: 1.5em 1.7em 1.7em;
  border-radius: 1em;
  background: rgba(255,255,255,.62);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    0 2.4em 4em -1.6em rgba(0,0,0,.16);
}
.feat-sh {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.2em;
  white-space: nowrap;
}
.feat-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 1.6em;
  padding: 0 .65em;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-size: .7em;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grey);
}
.feat-sh-title { font-size: 1.02em; color: #1a1a1a; }
.feat-sh-meta { margin-left: auto; padding-left: 1em; font-size: .82em; color: var(--grey); }

/* shared tick / check */
.feat-pick svg, .feat-short svg, .feat-take-st svg, .feat-pl svg { display: inline-block; width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* 1 · hook sheet */
.feat-hooks { display: flex; flex-direction: column; gap: .5em; }
.feat-hook {
  display: flex;
  align-items: center;
  gap: .8em;
  height: 2.65em;
  padding: 0 .9em;
  border-radius: .5em;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  white-space: nowrap;
}
.feat-hook-n { width: 1.7em; flex-shrink: 0; font-size: .76em; letter-spacing: .06em; color: var(--sand-l); font-variant-numeric: tabular-nums; }
.feat-hook-t { font-size: .95em; color: #2a2a2a; }
.feat-hook.is-picked .feat-hook-t { color: #000; }
.feat-pick {
  margin-left: auto;
  padding-left: 1em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .7em;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--jam);
}

/* 2 · casting board */
.feat-cast {
  display: grid;
  grid-template-columns: repeat(3, 12em);
  gap: .7em;
}
.feat-cc {
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: .85em .9em .9em;
  border-radius: .6em;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.045);
  white-space: nowrap;
}
.feat-cc.is-short { box-shadow: inset 0 0 0 1px rgba(255,111,31,.35); }
.feat-cc-top { display: flex; align-items: center; gap: .6em; }
.feat-av {
  display: block;
  width: 2.2em;
  height: 2.2em;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  overflow: hidden;
}
.feat-av svg { display: block; width: 100%; height: 100%; fill: none; stroke: rgba(0,0,0,.42); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.feat-cc-name { display: block; height: .62em; width: 4.4em; border-radius: 999px; background: rgba(0,0,0,.16); }
.feat-cc-name--s { width: 3.3em; }
.feat-cc-name--l { width: 5.4em; }
.feat-cc.is-short .feat-cc-name { background: rgba(0,0,0,.28); }
.feat-cc-tags { font-size: .76em; color: var(--grey); }
.feat-short {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .68em;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--jam);
}
.feat-short--off { color: var(--sand-l); }

/* 3 · shoot sheet */
.feat-mock--shoot .feat-screen { left: 9%; top: 11%; width: 122%; }
.feat-shoot { display: flex; align-items: flex-start; gap: 1.3em; }
.feat-phone {
  position: relative;
  flex-shrink: 0;
  width: 8.8em;
  aspect-ratio: 9 / 19;
  border-radius: 1.35em;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1.2em 2.2em -1em rgba(0,0,0,.2);
}
.feat-phone-scr {
  position: absolute;
  inset: .42em;
  border-radius: 1em;
  overflow: hidden;
  background: linear-gradient(160deg, #eeeeec 0%, #d9d8d3 58%, #c8c7c1 100%);
}
.feat-rec {
  position: absolute;
  left: .8em;
  top: .8em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .66em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.feat-rec::before { content: ""; width: .9em; height: .9em; border-radius: 50%; background: var(--jam); }
.feat-tc { position: absolute; right: .8em; top: .8em; font-size: .66em; letter-spacing: .06em; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.feat-fig-head { position: absolute; left: 50%; top: 36%; width: 2.3em; height: 2.3em; margin-left: -1.15em; border-radius: 50%; background: rgba(0,0,0,.085); }
.feat-fig-body { position: absolute; left: 50%; top: 53%; width: 5.4em; height: 6em; margin-left: -2.7em; border-radius: 2.7em 2.7em 0 0; background: rgba(0,0,0,.075); }
.feat-phone-lab { position: absolute; left: .8em; bottom: .8em; font-size: .66em; letter-spacing: .04em; color: #1a1a1a; white-space: nowrap; }
.feat-takes { flex: 1; min-width: 17em; display: flex; flex-direction: column; gap: .5em; }
.feat-take {
  display: flex;
  align-items: center;
  gap: .7em;
  height: 2.55em;
  padding: 0 .9em;
  border-radius: .5em;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  white-space: nowrap;
  font-size: .95em;
  color: #1a1a1a;
}
.feat-take-st {
  margin-left: auto;
  padding-left: 1em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .72em;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grey);
}
.feat-take.is-live .feat-take-st { color: var(--jam); }
.feat-take.is-live .feat-take-st::before { content: ""; width: .75em; height: .75em; border-radius: 50%; background: var(--jam); }
.feat-take.is-next { opacity: .5; }

/* 4 · edit timeline */
.feat-mock--edit .feat-screen { left: 10%; top: 12%; width: 122%; }
.feat-toggle {
  margin-left: auto;
  padding-left: 1em;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .8em;
  color: #1a1a1a;
}
.feat-toggle i { position: relative; display: block; width: 2.3em; height: 1.3em; border-radius: 999px; background: var(--jam); }
.feat-toggle i::after { content: ""; position: absolute; top: .17em; right: .17em; width: .96em; height: .96em; border-radius: 50%; background: #fff; }
.feat-ruler {
  display: flex;
  justify-content: space-between;
  padding: 0 0 .45em 3.4em;
  font-size: .64em;
  letter-spacing: .05em;
  color: var(--sand-l);
  font-variant-numeric: tabular-nums;
}
.feat-tl { position: relative; display: flex; flex-direction: column; gap: .5em; }
.feat-tr { display: flex; align-items: center; gap: .7em; height: 2.3em; }
.feat-tr-l { width: 2.1em; flex-shrink: 0; font-size: .68em; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); }
.feat-tr-b { flex: 1; height: 100%; display: flex; align-items: center; gap: .3em; }
.feat-clip { display: block; height: 100%; border-radius: .38em; background: linear-gradient(180deg, #ebeae6, #d8d7d2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.feat-cap { display: block; height: 58%; border-radius: .25em; background: rgba(0,0,0,.13); }
.feat-wave {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: .38em;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.17) 0 .12em, transparent .12em .36em) center / 100% 62% no-repeat,
    rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.feat-ph { position: absolute; left: calc(3.4em + 41%); top: -.55em; bottom: 0; width: 1px; background: #1a1a1a; }
.feat-ph::before { content: ""; position: absolute; top: 0; left: -.36em; width: .72em; height: .72em; border-radius: 50%; background: #1a1a1a; }
.feat-export {
  margin-top: 1.15em;
  display: flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}
.feat-export-l { margin-right: .3em; font-size: .78em; color: var(--grey); }
.feat-pl {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: 1.9em;
  padding: 0 .75em;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: .82em;
  color: #1a1a1a;
}
.feat-pl svg { color: var(--jam); }
.feat-rights { margin-top: .75em; font-size: .78em; color: var(--grey); white-space: nowrap; }

/* ---------- responsive (Lance's real breakpoints) ---------- */
@media (max-width: 800px) {                 /* max-bp */
  .feat-inner { gap: 32px; }                /* max-bp:gap-8 */
  .feat-sub { max-width: min(729px, 70vw); }
}
@media (max-width: 600px) {                 /* max-tp: stacked */
  .feat-nav { display: none; }
  .feat-carousel { overflow: visible; cursor: default; }
  .feat-track {
    flex-direction: column;
    gap: 40px;                              /* gap-10 */
    width: 100% !important;
    transform: none !important;
    transition: none;
  }
  .feat-card { width: 100% !important; flex-shrink: 1; }
}

/* ---- src/css/31-quotes.css ---- */
/* =====================================================================
   hypjam v2 · 31-quotes.css
   Home "quotes" — Lance #testimonials, ported from ref/index.html and the
   component in ref/hero_chunk.pretty.js (lines ~19760–20100), measured on
   ref/shots/s25–s26 (1920) and ref/mobile/m07 (390).

   section   relative flex min-h-svh items-center justify-center px-page py-40
             data-nav="image" · background: stacked <img> object-cover, the
             active one at opacity 1, transition 700ms · shade bg-black/20
   wrap      mx-auto w-full max-w-[760px] (max-lp: 520)
   card      rounded-[12px] bg-white/16 backdrop-blur-[30px] pt-9 pl-10 pr-5 pb-5
             (max-lp: min-h-[420px] pt-9 pl-8 pb-4)  → 760×520 at 1920
   body      relative · an invisible sizer (longest quote + h-[88px] + name/role,
             gap-5) locks the height · the active slide is absolute inset-0
             flex-col justify-center gap-5
   quote     hanging-punct max-w-[640px] 36/1.25/-.72 white (max-lp: max-w none ·
             max-tp: 24/-.48) · each word a span, opacity driven by JS
   attr      flex-col gap-1: signature slot (240 wide; ours: the founder's name
             in the display serif, no image) · row items-end justify-between
             gap-6: name 14/1.4 500 · role 14/1.4 · logo h-8 (ours: hypjam's
             hook wordmark)
   thumbs    mt-auto self-end pt-8 gap-2 · 57×36 rounded-[3px], active opacity 1,
             others .4 (hover .7), bg-black/20 shade · a 2px sand-l frame that
             slides 65px per slot over 500ms
   reserved  slide 1 = CONTRACT §10: same layout, "The first brand quote goes
             here." + .tag-soon "Filled in at launch" + a dashed hairline frame
             inside the card. No invented name.
   ===================================================================== */

.quo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-left: var(--px-page);
  padding-right: var(--px-page);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- backgrounds ---------- */
.quo-bgs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.quo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
}
.quo-bg.is-active { opacity: 1; }
.quo-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.2);
}

/* ---------- card ---------- */
.quo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}
.quo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 36px 20px 20px 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: var(--white);
}
/* the reserved slot's dashed frame (03-ui's .reserved treatment, inset on the glass) */
.quo-frame {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease-in-out;
}
.quo-card.is-reserved .quo-frame { opacity: 1; }

.quo-body { position: relative; }
.quo-sizer {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;                               /* gap-5 */
}
.quo-sizer-gap { height: 88px; }
.quo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}
.quo-slide.is-active { visibility: visible; pointer-events: auto; }
.quo-quote { margin: 0; }
.quo-text {
  max-width: 640px;
  color: var(--white);
}
.quo-w { display: inline; }               /* words: opacity + transition set inline by 30-quotes.js */

/* attribution */
.quo-attr {
  display: flex;
  flex-direction: column;
  gap: 4px;                                /* gap-1 */
}
/* signature slot: Lance shows a 240×70 handwritten apng; ours is the name in the display serif */
.quo-sig {
  display: flex;
  align-items: center;
  width: 240px;
  min-height: 70px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-style: italic;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.32px;
  color: var(--white);
  white-space: nowrap;
}
.quo-attr-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;                               /* gap-6 */
}
.quo-attr-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
}
.quo-name { font-weight: var(--fw-medium); }
.quo-role { font-weight: var(--fw-body); }
.quo-logo {
  display: block;
  height: 32px;                            /* h-8 */
  width: auto;
  flex-shrink: 0;
  opacity: .7;
}
.quo-slide--reserved .tag-soon { align-self: flex-start; }

/* ---------- thumbnails ---------- */
.quo-thumbs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;                                /* gap-2 */
  align-self: flex-end;
  margin-top: auto;
  padding-top: 32px;                       /* pt-8 */
}
.quo-thumb-frame {
  position: absolute;
  left: 0;
  top: 32px;
  z-index: 10;
  width: 57px;
  height: 36px;
  border-radius: 3px;
  border: 2px solid var(--sand-l);
  background: transparent;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 500ms ease-in-out;
}
.quo-thumb {
  position: relative;
  width: 57px;
  height: 36px;
  overflow: hidden;
  border-radius: 3px;
  opacity: .4;
  transition: opacity 300ms ease-in-out;
}
.quo-thumb:hover { opacity: .7; }
.quo-thumb.is-active { opacity: 1; }
.quo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quo-thumb-shade { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.quo-thumb:focus-visible { outline-offset: 2px; border-radius: 3px; }

/* ---------- responsive (Lance's real breakpoints) ---------- */
@media (max-width: 1024px) {                /* max-lp */
  .quo-wrap { max-width: 520px; }
  .quo-card { min-height: 420px; padding: 36px 20px 16px 32px; }
  .quo-text { max-width: none; }
}
@media (max-width: 600px) {                 /* max-tp */
  .quo-sig { font-size: 28px; min-height: 64px; }
}

/* ---------- reduced motion: final states, no crossfade, no autoplay (JS) ---------- */
@media (prefers-reduced-motion: reduce) {
  .quo-w, .quo [data-quo-fade] { opacity: 1 !important; transition: none !important; }
  .quo-bg, .quo-thumb, .quo-thumb-frame, .quo-frame { transition: none !important; }
}

/* ---- src/css/32-stories.css ---- */
/* =====================================================================
   hypjam v2 · 32-stories.css — the brand-stories carousel (home)
   One-to-one with Lance's "Trusted by leading hotels" section
   (ref/index.html, ref/lance-css .story-carousel-*, ref/shots/s27–s28,
   ref/mobile/m08). Numbers, in Lance's own utilities:
     section   flex col justify-center overflow-hidden bg-black min-h-svh
               py-[140px] · max-bp: min-h-0 py-20
     head      flex items-end justify-between gap-8 px-page
               h2 max-w-[560px] 42/1.1/-.84 (max-tp 28/-.56), line 2 white/40
               buttons size-[45px] text-white/70 hover:text-white 200ms,
               chevron 16×16 stroke 1.4, prev rotated 180 (plain chevrons —
               no circle in the frames)
     mask      mt-16 (max-bp mt-8) · padding-left var(--page-x) · overflow
               hidden · cursor-grab / grabbing
     track     flex items-start gap 30px width max-content will-change
               transform · transition transform 620ms cubic-bezier(.22,1,.36,1)
               (none under reduced motion — Lance has the same rule)
     card      w-[min(377px,78vw)] gap-6 · max-bp w-[min(280px,78vw)] gap-4
     media     h-[440px] (max-bp 360) rounded-[8px] shadow 0 14px 32px .25
               inner: absolute inset-0 flex col justify-between p-5 pb-4
               "Read" pill: gap-2 rounded-[6px] px/py-2.5 14px/1
               quote 18/1.25/-.2 (max-tp 16) · attribution 13/1.35 white/75
     foot      flex items-center justify-between gap-4 · logo h 24px
               max-w 103px · meta 13/1.3 white/45 truncated right
   Ours are the reserved slots of CONTRACT §10: the media box is a dashed
   hairline frame on a dark surface with a line-drawn phone; the quote and
   the jam-dotted attribution tag sit where Lance's hover overlay puts them,
   shown at rest; "Read" is present but inert.
   ===================================================================== */

.sto {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: 100svh;
  padding-top: var(--section-y-stories);
  padding-bottom: var(--section-y-stories);
  background: var(--black);
  color: var(--white);
}

/* ---------- head: h2 + arrows ---------- */
.sto-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-left: var(--px-page);
  padding-right: var(--px-page);
}
.sto-h2 { max-width: var(--max-h2); color: var(--white); }
.sto-h2-l1 { color: var(--white); }
.sto-h2-l2 { color: var(--w40); }

.sto-nav { display: flex; flex-shrink: 0; margin-bottom: 4px; }
.sto-arrow {
  display: flex;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  color: var(--w70);
  transition: color var(--dur-fast);
}
.sto-arrow:hover { color: var(--white); }
.sto-arrow svg { display: block; width: 16px; height: 16px; }
.sto-arrow--prev svg { transform: rotate(180deg); }
.sto-arrow:focus-visible { border-radius: 50%; outline-offset: -4px; }

/* ---------- carousel ---------- */
.sto-mask {
  margin-top: 64px;
  padding-left: var(--px-page);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.sto-mask.is-dragging { cursor: grabbing; }
.sto-track {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: max-content;
  will-change: transform;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
}
.sto-track.is-still { transition: none; }

/* ---------- card ---------- */
.sto-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(377px, 78vw);
  flex-shrink: 0;
}

/* the image box → a reserved slot: dashed hairline frame on a dark surface */
.sto-media {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: var(--r-img);
  border: 1px dashed var(--w20);
  background: rgba(255, 255, 255, .06);     /* the "image" surface — Lance's box is bg-stone-900 under the photo */
  box-shadow: var(--shadow-story);
  transition: border-color var(--dur) ease-out, background-color var(--dur) ease-out;
}
.sto-card:hover .sto-media,
.sto-card:focus-within .sto-media { border-color: var(--w40); background: rgba(255, 255, 255, .09); }

.sto-media-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 16px;
}

/* "Read" — Lance's hover pill, top-left. Present, inert. */
.sto-read-row { display: flex; align-items: center; }
.sto-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  background: var(--w08);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  line-height: 1;
  color: var(--white);
  opacity: .45;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sto-read svg { display: block; flex-shrink: 0; width: 12px; height: 12px; }

/* the line-drawn phone, centred in the free space between the pill and the text */
.sto-phone {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  color: var(--w40);
  transition: color var(--dur) ease-out;
}
.sto-card:hover .sto-phone,
.sto-card:focus-within .sto-phone { color: var(--w60); }
.sto-phone-svg { display: block; width: 112px; height: auto; max-height: 100%; overflow: visible; }
.sto-phone-screen { opacity: .55; stroke-dasharray: 3 5; }
.sto-phone-side { opacity: .7; }

/* quote + attribution, where Lance's overlay text sits (bottom-left of the box) */
.sto-text { display: flex; flex-direction: column; gap: 8px; }
.sto-quote { color: var(--white); text-wrap: pretty; }
.sto-attr { line-height: 1; }

/* the logo / meta row under the box */
.sto-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sto-mark {
  display: block;
  width: auto;
  height: 24px;
  max-width: 103px;
  object-fit: contain;
  object-position: left center;
  -webkit-user-drag: none;
  user-select: none;
}
.sto-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-meta);
  color: var(--w45);
}

/* ---------- breakpoints (Lance's max-bp 800 / max-tp 600) ---------- */
@media (max-width: 800px) {
  .sto { min-height: 0; }                       /* max-bp:min-h-0 (py-20 comes from the token flip) */
  .sto-mask { margin-top: 32px; }               /* max-bp:mt-8 */
  .sto-card { width: min(280px, 78vw); gap: 16px; }
  .sto-media { height: 360px; }
  .sto-media-in { padding: 16px 16px 14px; }
  .sto-phone-svg { width: 96px; }
}
@media (max-width: 600px) {
  .sto-quote { font-size: 16px; }               /* max-tp:text-[16px] */
}

/* ---------- reduced motion: final states, no easing ---------- */
@media (prefers-reduced-motion: reduce) {
  .sto-track { transition: none !important; }
}

/* ---- src/css/33-rights.css ---- */
/* =====================================================================
   hypjam v2 · 33-rights.css — "Rights and safety at every layer" (home)
   One-to-one with Lance's #security section (ref/index.html,
   ref/shots/s29–s30, ref/mobile/m09–m10). Lance's utilities:
     section  flex col justify-between gap-16 bg-sand-m px-page pb-10 pt-16
              · max-bp: gap-10                              → 64 / 28 / 40 / 64→40
     head     flex col gap-3 max-w-[588px] (max-bp max-w-[min(588px,70vw)])
              h2 42/1.1/-.84 black (max-tp 28/-.56)
              p  max-w-[384px] 16/1.5 grey-m
              a  flex w-fit items-center gap-3 py-3 16px/1 grey-m
                 hover:text-black 300ms · » at 12px
     grid     grid-cols-4 border-l border-t sand-l/60
              · max-nv (≤1200) 2 cols · max-lp (≤1024) 1 col
     cell     flex h-[433px] col justify-between border-b border-r sand-l/60
              px-6 pb-8 pt-6 · max-lp: h-auto min-h-[360px] pb-12
              text: flex col gap-3 16px grey-m · title uppercase 1.4 · desc 1.5
     seal     block size-[120px] bg-grey-m hover:bg-black 300ms
              · max-lp: mt-10 size-[90px]
   Lance's seals are mask-image PNGs recoloured by background; ours are
   stroke SVGs drawn in #7b7b7b (assets/badges), so the hover recolour is
   filter: brightness(0) — grey → black, same 300ms.
   ===================================================================== */

.rights {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: 64px var(--px-page) 40px;
  background: var(--sand-m);
  color: var(--black);
}

/* ---------- head ---------- */
.rights-head {
  display: flex;
  width: 100%;
  max-width: 588px;
  flex-direction: column;
  gap: 12px;
}
.rights-h2 { color: var(--black); }
.rights-sub {
  max-width: 384px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--grey);
}
.rights-more {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.rights-more:hover { color: var(--black); }
.rights-more-mark { font-size: 12px; line-height: 1; }

/* ---------- the hairline grid ---------- */
.rights-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--sand-l-60);
  border-top: 1px solid var(--sand-l-60);
}
.rights-cell {
  display: flex;
  height: 433px;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid var(--sand-l-60);
  border-right: 1px solid var(--sand-l-60);
  padding: 24px 24px 32px;
}
.rights-cell-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--grey);
}
.rights-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--grey);
}
.rights-desc { line-height: var(--lh-body); color: var(--grey); }

/* ---------- the seal ---------- */
.rights-seal {
  display: block;
  width: var(--badge-size);
  height: var(--badge-size);
  flex-shrink: 0;
}
.rights-seal img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  transition: filter var(--dur);
}
.rights-seal:hover img,
.rights-seal:focus-visible img { filter: brightness(0); }

/* ---------- breakpoints (Lance's max-nv 1200 / max-lp 1024 / max-bp 800) ---------- */
@media (max-width: 1200px) {
  .rights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .rights-grid { grid-template-columns: minmax(0, 1fr); }
  .rights-cell { height: auto; min-height: 360px; padding-bottom: 48px; }
  .rights-seal { margin-top: 40px; width: var(--badge-size-m); height: var(--badge-size-m); }
}
@media (max-width: 800px) {
  .rights { gap: 40px; }
  .rights-head { max-width: min(588px, 70vw); }
}
@media (max-width: 600px) {
  /* Lance: [data-landing] .text-[16px]{font-size:14px} under 601px — the sub,
     the "Learn more" link and every cell's title/description are text-[16px]. */
  .rights-sub,
  .rights-more,
  .rights-cell-text,
  .rights-title { font-size: var(--fs-body-tp); }
}

/* ---- src/css/40-pages.css ---- */
/* =====================================================================
   hypjam v2 · 40-pages.css
   The shared SUB-PAGE vocabulary: every inner page of lance.live (product,
   product/*, solutions, solutions/*, news, faq, about …) is built from the
   same dozen blocks. They are defined once here, prefixed `.page-`, and
   measured on ref/pages/product.jpg and ref/pages/product_*.jpg at 1920
   (numbers in the comments are those measurements). The services,
   solutions and every other page agent reuse them; do not redefine them.

   HOW A LIGHT PAGE IS SET UP
     <!-- nav: light -->            body[data-nav="light"]  → black nav text
     <!-- nav-fill: bg-white -->    body[data-nav-fill]      → white nav bg
     <main class="page" data-theme="light"> …sections… </main>
   (10-nav.js mirrors body[data-nav] / [data-nav-fill] to the nav; the
   data-theme scope flips .btn, .hairline, .t-body etc. to the light look.)
   Include {{include:partials/icons.html}} once after the nav so the
   platform wordmarks (#wm-*) and #i-* icons resolve.

   BLOCKS (all inside a .page-section that carries .container)
     .page-section--hero        eyebrow · h1 · intro · pill        pt 150 pb 24
     .page-section--hero-split  crumb · h1 · intro · pill | visual pt 112 pb 56
     .page-section--image       editorial image + platforms row   pt 56 pb 120
     .page-section--list        the grouped numbered rows         pt 0  pb 120
     .page-section--sand        sand-s block (films, steps, hood)  py 120
     .page-section--stats       centred statement + 4 facts       pt 120 pb 100
     .page-section--features    alternating feature blocks        py 72
     .page-section--problems    2×2 problems grid                  py 120
     .page-section--compare     "Under the hood" grid (white)     pt 124 pb 120
     .page-section--faq         quote card + FAQ                  pt 0  pb 120
     .page-section--closing     closing CTA card                  pt 0  pb 140
     .page-split                eyebrow column | content column (932px)
     .page-hero                 the two hero layouts
     .page-image                full-width 16:9 image, radius 16
     .platforms                 "Ships to" label + six wordmarks + tail
     .page-list / .page-list__row   12-col numbered rows, 108px pitch
     .page-media                two 16:9 film cards ("See it in action")
     .page-cta                  sand-m card, copy left, white HQ panel right
     .page-stats / .page-stat   four count-up facts
     .page-feature              text | .page-panel visual (flip variant)
     .page-bullet               "↳ title" accordion item (<details>)
     .page-link                 "↳ label" 13px link
     .page-problems / .page-problem   4:3 gradient tile + title + body
     .page-steps / .page-step   four columns with hairlines, 01–04
     .page-compare / .page-compare__cell   2×3 label / value / body grid
     .page-quote                sand-s testimonial card (+ --reserved)
     .page-faq / .page-faq__item   plus/minus accordion (<details>)
     .page-panel                the light gradient mock panel
     .mock-*                    small CSS/SVG UI mocks that sit in a panel
   ===================================================================== */

/* ---------- page wrapper ---------- */
.page {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.page-section {
  position: relative;
  width: 100%;
  padding: var(--section-y) var(--px-page);
  background: var(--white);
  color: var(--black);
}
.page-section--hero       { padding-top: 150px; padding-bottom: 24px; }
.page-section--hero-split { padding-top: 112px; padding-bottom: 56px; }
.page-section--image      { padding-top: 56px;  padding-bottom: 120px; }
.page-section--list       { padding-top: 0;     padding-bottom: 120px; }
.page-section--stats      { padding-top: 120px; padding-bottom: 100px; text-align: center; }
.page-section--features   { padding-top: 72px;  padding-bottom: 72px; }
.page-section--problems   { padding-top: 120px; padding-bottom: 120px; }
.page-section--compare    { padding-top: 124px; padding-bottom: 120px; }
.page-section--faq        { padding-top: 0;     padding-bottom: 120px; }
.page-section--closing    { padding-top: 0;     padding-bottom: 140px; }
.page-section--sand       { background: var(--sand-s); padding-top: 120px; padding-bottom: 120px; }
/* two sand sections in a row read as one field (measured on Lance only for the
   index films block; the service pages put the steps on sand and the hood on
   white, ref/pages/product_*.jpg — exactly one sand band per detail page) */
.page-section--sand + .page-section--sand { padding-top: 0; }
.page-section--sand + .page-section--sand > .page-split { padding-top: 120px; }
@media (max-width: 800px) {
  .page-section--hero       { padding-top: 110px; }
  .page-section--hero-split { padding-top: 96px;  padding-bottom: 40px; }
  .page-section--image      { padding-top: 40px;  padding-bottom: 64px; }
  .page-section--list       { padding-bottom: 64px; }
  .page-section--stats      { padding-top: 80px;  padding-bottom: 64px; }
  .page-section--features   { padding-top: 48px;  padding-bottom: 48px; }
  .page-section--problems   { padding-top: 64px;  padding-bottom: 64px; }
  .page-section--compare    { padding-top: 64px;  padding-bottom: 64px; }
  .page-section--faq        { padding-bottom: 64px; }
  .page-section--closing    { padding-bottom: 80px; }
  .page-section--sand       { padding-top: 64px;  padding-bottom: 64px; }
  .page-section--sand + .page-section--sand > .page-split { padding-top: 64px; }
}

/* ---------- shared text roles ---------- */
.page-h2 {                                  /* Lance h2: 42/1.1/-.84 → ≤600 28/-.56 */
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--black);
  text-wrap: pretty;
}
.page-p { font-size: 16px; line-height: 24px; color: var(--grey); max-width: 600px; text-wrap: pretty; }
.page-p--sm { font-size: 14px; line-height: 1.5; }
.page-eyebrow {                             /* "— Operations": 20px dash, 12px gap, 13px grey */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--grey);
  white-space: nowrap;
}
.page-eyebrow::before { content: ""; flex-shrink: 0; width: 20px; height: 1px; background: currentColor; }
.page-eyebrow--caps {                       /* "PRODUCT" above the index h1: 12px caps, no dash */
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-eyebrow--caps::before { display: none; }
@media (max-width: 600px) { .page-h2 { font-size: var(--fs-h2-tp); letter-spacing: var(--ls-h2-tp); } }

/* ---------- .page-split · eyebrow left, content starts at 932px ----------
   Lance's h2 in every list/films/steps/hood/FAQ header starts at
   28 + 904 = 932px at 1920: left column = 50% − gutter. */
.page-split {
  display: grid;
  grid-template-columns: calc(50% - var(--px-page)) minmax(0, 1fr);
  align-items: start;
}
.page-split__aside { padding-top: 14px; }   /* eyebrow centre lines up with the h2's first line */
.page-split__main { min-width: 0; }
.page-split__main > .page-p { margin-top: 28px; }
@media (max-width: 800px) {
  .page-split { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .page-split__aside { padding-top: 0; }
  .page-split__main > .page-p { margin-top: 20px; }
}

/* ---------- .page-hero ---------- */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }   /* 793 | 1071 at 1920 */
.page-hero__copy { min-width: 0; }
.page-hero__crumb {                         /* "PRODUCT / AI VOICE AGENT" 12px caps .08em */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 8px;
}
.page-hero__crumb a { color: var(--grey); transition: color var(--dur); }
.page-hero__crumb a:hover { color: var(--black); }
.page-hero__crumb .page-hero__crumb-current { color: var(--black); }
.page-hero__eyebrow { display: block; padding-top: 6px; }
.page-hero__title {
  /* Measured on ref/pages/product.jpg and product_ai-front-desk.jpg at 1920:
     ink height of a descender line 56px and a baseline pitch of 58px on both,
     i.e. 56/58/-.02em — the sub-page h1 is smaller than the home hero's 64px
     (--fs-title), so it is set here rather than taken from the token. */
  margin-top: 28px;
  max-width: 560px;   /* Lance's longest h1 line measures 511px of ink */
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 56px;
  line-height: 58px;
  letter-spacing: -1.12px;
  color: var(--black);
  text-wrap: pretty;
}
.page-hero--split .page-hero__title { max-width: 560px; }
.page-hero__intro { margin-top: 20px; max-width: 600px; font-size: 16px; line-height: 24px; color: var(--grey); text-wrap: pretty; }
.page-hero--split .page-hero__intro { max-width: 460px; }
.page-hero__cta { margin-top: 48px; }
.page-hero__visual { min-width: 0; }
.page-hero__visual .page-panel { aspect-ratio: 3 / 2; }          /* 1071×714 (spec: 1050×700) */
.page-hero__platforms { margin-top: 72px; }
@media (max-width: 1024px) {
  .page-hero--split { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .page-hero--split .page-hero__visual { order: 2; }
}
@media (max-width: 800px) {
  .page-hero__cta { margin-top: 36px; }
  .page-hero__platforms { margin-top: 48px; }
}
@media (max-width: 600px) {
  .page-hero__title { font-size: 36px; line-height: 38px; letter-spacing: -.72px; margin-top: 22px; }
  .page-hero__intro { font-size: 14px; line-height: 1.5; }
  .page-hero__visual .page-panel { aspect-ratio: 4 / 5; }
}

/* ---------- .page-image · full-width editorial still ---------- */
.page-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-img-lg);
  object-fit: cover;
  background: var(--sand-s);
}
.page-image + .platforms { margin-top: 80px; }
@media (max-width: 800px) { .page-image { border-radius: 12px; aspect-ratio: 4 / 3; } .page-image + .platforms { margin-top: 48px; } }

/* ---------- .platforms · replaces "Trusted by" ----------
   label 13px grey left · six wordmarks right-aligned, ~96px apart, 26px tall,
   opacity .5 (Lance's partner PNGs sit at 22–30px) · "+ tail" 13px grey. */
.platforms {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}
.platforms__label { flex-shrink: 0; font-size: 13px; line-height: 1; color: var(--grey); white-space: nowrap; }
.platforms__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px 72px;
  min-width: 0;
}
.platforms__item { display: flex; align-items: center; color: var(--black); opacity: .5; }
.platforms__mark { display: block; height: 26px; width: auto; fill: none; }
.platforms__tail { flex-shrink: 0; font-size: 13px; line-height: 1; color: var(--grey); white-space: nowrap; }
@media (max-width: 1200px) { .platforms__list { gap: 20px 44px; } .platforms__mark { height: 22px; } }
@media (max-width: 800px) {
  .platforms { flex-direction: column; align-items: flex-start; gap: 24px; }
  .platforms__list { justify-content: flex-start; gap: 18px 32px; }
  .platforms__mark { height: 20px; }
}

/* ---------- .page-list · numbered rows (12-col grid, gap 32, 108px pitch) ----------
   01 at the gutter (11px grey) · name at col 2 (26px display) · blurb at col 6
   (13px grey) · "Explore →" right-aligned. Hairline above every row + below the list. */
.page-list { display: block; border-bottom: 1px solid var(--k10); }
.page-list__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  align-items: center;
  min-height: 108px;
  padding: 24px 0;
  border-top: 1px solid var(--k10);
  color: var(--black);
  text-decoration: none;
}
.page-list__n { grid-column: 1 / 2; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--grey); font-variant-numeric: tabular-nums; }
.page-list__name {
  grid-column: 2 / 6;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
  transition: color var(--dur);
}
.page-list__blurb { grid-column: 6 / 12; font-size: 13px; line-height: 1.4; color: var(--grey); }
.page-list__explore { grid-column: 12 / 13; justify-self: end; }
.page-list__row:hover .page-list__name { color: var(--grey); }
.page-list__row:hover .arrow-link { color: var(--black); }
.page-list__head { margin-bottom: 56px; }
.page-group + .page-group { margin-top: 120px; }
@media (max-width: 1024px) {
  .page-list__name { grid-column: 2 / 7; }
  .page-list__blurb { grid-column: 7 / 12; }
}
@media (max-width: 800px) {
  .page-list__row { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 16px; min-height: 0; padding: 22px 0; row-gap: 8px; }
  .page-list__n { grid-column: 1; grid-row: 1; }
  .page-list__name { grid-column: 2; grid-row: 1; font-size: 22px; letter-spacing: -.44px; }
  .page-list__blurb { grid-column: 2; grid-row: 2; }
  .page-list__explore { grid-column: 3; grid-row: 1; }
  .page-list__head { margin-bottom: 32px; }
  .page-group + .page-group { margin-top: 64px; }
}

/* ---------- .page-media · two 16:9 cards ("See it in action") ---------- */
.page-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 72px; }
.page-media__card { display: block; min-width: 0; color: inherit; text-decoration: none; }
.page-media__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--sand-m); }
.page-media__frame img, .page-media__frame video { width: 100%; height: 100%; object-fit: cover; }
.page-media__frame.reserved { background: var(--reserved-fill); display: flex; align-items: center; justify-content: center; }
.page-media__frame .tag-soon { position: absolute; left: 16px; bottom: 16px; }
.page-media__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 20px; }
.page-media__eyebrow { font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.page-media__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: var(--black);
}
.page-media__action { padding-bottom: 2px; }
.page-media__action[aria-disabled="true"] { cursor: default; }
.page-media__action[aria-disabled="true"]:hover { color: var(--grey); }
@media (max-width: 800px) { .page-media { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; } }

/* ---------- .page-cta · closing card ----------
   sand-m card, radius 16, padding 24, columns 1fr | 1fr gap 40, min-height 384.
   Copy sits 48px in (24 card + 24 text), the white panel is 888×336 at 1920
   with the small HQ line drawing centred (Lance: footer-buildings.png). */
.page-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  min-height: 384px;
  padding: 24px;
  border-radius: 16px;
  background: var(--sand-m);
  color: var(--black);
}
.page-cta__text { display: flex; flex-direction: column; min-width: 0; padding: 24px; }
.page-cta__h2 { max-width: 460px; }
.page-cta__p { margin-top: 20px; max-width: 400px; font-size: 14px; line-height: 1.5; color: var(--grey); }
.page-cta__btn { margin-top: auto; padding-top: 40px; }
.page-cta__panel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; border-radius: 12px; background: var(--white); overflow: hidden; }
.page-cta__art { display: block; width: 62%; max-width: 560px; height: auto; }
.page-cta__art.is-missing { display: none; }
.page-cta__fallback { display: none; width: 62%; max-width: 560px; height: auto; color: var(--line); }
.page-cta__art.is-missing + .page-cta__fallback { display: block; }
@media (max-width: 800px) {
  .page-cta { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; min-height: 0; }
  .page-cta__text { padding: 20px 16px 16px; }
  .page-cta__btn { padding-top: 32px; }
  .page-cta__panel { min-height: 200px; padding: 24px; }
  .page-cta__art, .page-cta__fallback { width: 80%; }
}

/* ---------- .page-stats · centred statement + four count-up facts ----------
   h2 42px centred (max 760) · numerals 64px display · 12px caps labels. */
.page-stats__h2 { margin-inline: auto; max-width: 760px; text-wrap: balance; }
.page-stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 96px; }
.page-stat { text-align: center; min-width: 0; }
.page-stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -1.28px;
  color: var(--black);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.page-stat__label { margin-top: 28px; padding-inline: 8px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); text-wrap: balance; }
@media (max-width: 1200px) { .page-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; } }
@media (max-width: 800px)  { .page-stats__row { margin-top: 56px; } .page-stat__num { font-size: 48px; letter-spacing: -.96px; } .page-stat__label { margin-top: 18px; } }
/* word values ("30 minutes", "2 to 5") must wrap on a phone rather than
   push the page sideways; bare counting numerals are one token anyway */
@media (max-width: 600px)  { .page-stat__num { font-size: 40px; letter-spacing: -.8px; white-space: normal; text-wrap: balance; } }

/* ---------- .page-panel · the light gradient stage every mock sits on ---------- */
.page-panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #dddcd9 0%, #eeedeb 28%, #f3f2f0 56%, #e7e6e3 100%);
  color: var(--black);
}
.page-panel--tile { aspect-ratio: 4 / 3; }

/* ---------- .page-feature · alternating text | visual ----------
   grid 793 | 1071 (1fr | 1.35fr); text max 440; flipped blocks put the
   visual first and pad the text 40px. Blocks stack 144px apart. */
.page-features { display: flex; flex-direction: column; gap: 144px; }
.page-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
.page-feature--flip { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.page-feature--flip .page-feature__visual { order: -1; }
.page-feature--flip .page-feature__text { padding-left: 40px; }
.page-feature__text { max-width: 440px; min-width: 0; padding-top: 8px; }
.page-feature--flip .page-feature__text { max-width: 480px; }
.page-feature__h2 { max-width: 440px; }
.page-feature__p { margin-top: 20px; font-size: 16px; line-height: 24px; color: var(--grey); }
.page-feature__bullets { display: flex; flex-direction: column; gap: 22px; margin-top: 48px; }
.page-feature__related { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.page-feature__visual { min-width: 0; }
.page-feature__visual .page-panel { aspect-ratio: 5 / 4; }        /* 1071×856 at 1920 */
@media (max-width: 1024px) {
  .page-features { gap: 96px; }
  .page-feature, .page-feature--flip { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .page-feature--flip .page-feature__visual { order: 2; }
  .page-feature--flip .page-feature__text { padding-left: 0; }
  .page-feature__text, .page-feature--flip .page-feature__text, .page-feature__h2 { max-width: 560px; }
}
@media (max-width: 800px) { .page-features { gap: 64px; } .page-feature__bullets { margin-top: 32px; gap: 18px; } .page-feature__visual .page-panel { aspect-ratio: 1 / 1; } }

/* ---------- .page-bullet · "↳ title" accordion (<details>) ----------
   open: 14px 500 black with the ↳ mark at the left edge and a 14/1.5 grey body
   indented 26px; closed: 14px grey title at the same indent, no mark. */
.page-bullet { display: block; }
.page-bullet__btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--grey);
  cursor: pointer;
  transition: color var(--dur);
  list-style: none;
}
.page-bullet__btn::-webkit-details-marker { display: none; }
.page-bullet__btn:hover { color: var(--black); }
.page-bullet__mark { flex-shrink: 0; width: 16px; text-align: left; visibility: hidden; }
.page-bullet[open] .page-bullet__btn { color: var(--black); font-weight: 500; }
.page-bullet[open] .page-bullet__mark { visibility: visible; font-weight: 400; }
.page-bullet__body { margin-top: 8px; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--grey); max-width: 420px; }
.page-bullet__btn:focus-visible { outline: 2px solid var(--jam); outline-offset: 3px; border-radius: 2px; }

/* "↳ label" 13px grey link (feature related, comparison link) */
.page-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1; color: var(--grey); transition: color var(--dur); }
.page-link::before { content: "↳"; font-size: 13px; line-height: 1; }
.page-link:hover { color: var(--black); }

/* ---------- .page-problems · heading (4/12) + 2×2 tiles (8/12) ---------- */
.page-problems { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.page-problems__head { grid-column: 1 / 5; min-width: 0; }
.page-problems__head .page-p { margin-top: 24px; max-width: 380px; }
.page-problems__grid { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 64px; }
.page-problem { min-width: 0; }
.page-problem__tile { aspect-ratio: 4 / 3; }
.page-problem__icon { display: block; width: 46%; height: auto; color: #b0afaa; }
.page-problem__title { margin-top: 24px; font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--black); }
.page-problem__body { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--grey); }
@media (max-width: 1024px) {
  .page-problems { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .page-problems__head, .page-problems__grid { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .page-problems__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }

/* ---------- .page-steps · four columns, hairlines between ---------- */
.page-split--steps { margin-bottom: 60px; }
.page-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-step { padding: 32px 28px; border-left: 1px solid var(--sand-l-60); min-width: 0; }
.page-step:first-child { border-left: 0; }
.page-step__n { font-size: 12px; line-height: 1; letter-spacing: .04em; color: var(--grey); font-variant-numeric: tabular-nums; }
.page-step__title { margin-top: 72px; font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--black); }
.page-step__body { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--grey); }
@media (max-width: 1024px) {
  .page-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-step { border-left: 0; border-top: 1px solid var(--sand-l-60); padding: 28px 24px 28px 0; }
  .page-step:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--sand-l-60); }
  .page-step__title { margin-top: 40px; }
}
@media (max-width: 600px) {
  .page-steps { grid-template-columns: minmax(0, 1fr); }
  .page-step, .page-step:nth-child(2n) { border-left: 0; padding: 24px 0; }
  .page-step__title { margin-top: 24px; }
  .page-split--steps { margin-bottom: 24px; }
}

/* ---------- .page-compare · 2×3 "Under the hood" grid ---------- */
.page-split--compare { margin-bottom: 60px; }
.page-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-compare__cell {
  display: flex;
  flex-direction: column;
  min-height: 236px;
  min-width: 0;
  padding: 34px 28px 28px;
  border-left: 1px solid var(--sand-l-60);
}
.page-compare__cell:nth-child(3n + 1) { border-left: 0; }
.page-compare__cell:nth-child(n + 4) { border-top: 1px solid var(--sand-l-60); }
.page-compare__label { font-size: 12px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.page-compare__value {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
}
.page-compare__body { margin-top: auto; padding-top: 40px; font-size: 14px; line-height: 1.5; color: var(--grey); }
.page-compare__link { margin-top: 14px; }
@media (max-width: 1024px) {
  .page-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-compare__cell { min-height: 0; padding: 28px 24px 28px 0; border-left: 0; border-top: 1px solid var(--sand-l-60); }
  .page-compare__cell:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--sand-l-60); }
  .page-compare__cell:nth-child(-n + 2) { border-top: 0; }
  .page-compare__body { padding-top: 20px; }
}
@media (max-width: 600px) {
  .page-compare { grid-template-columns: minmax(0, 1fr); }
  .page-compare__cell, .page-compare__cell:nth-child(2n) { border-left: 0; padding: 24px 0; border-top: 1px solid var(--sand-l-60); }
  .page-compare__cell:first-child { border-top: 0; }
  .page-split--compare { margin-bottom: 24px; }
}

/* ---------- .page-quote · sand-s testimonial card ----------
   2/3 copy (padding 56, quote 36/1.25/-.72 hanging) | 1/3 image, min-height 450. */
.page-quote {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  min-height: 450px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand-s);
  color: var(--black);
}
.page-quote__body { display: flex; flex-direction: column; min-width: 0; padding: 56px; }
.page-quote__text {
  max-width: 780px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
  hanging-punctuation: first last allow-end;
  text-wrap: pretty;
}
@supports not (hanging-punctuation: first) { .page-quote__text { text-indent: -.4em; } }
.page-quote__attr { margin-top: auto; padding-top: 48px; }
.page-quote__name { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--black); }
.page-quote__role { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--grey); }
.page-quote__media { position: relative; min-height: 280px; background: var(--sand-m); }
.page-quote__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-quote--reserved { background: var(--reserved-fill); border: 1px dashed var(--hairline-strong); }
.page-quote--reserved .page-quote__text { color: var(--grey); }
.page-quote--reserved .page-quote__media { display: flex; align-items: center; justify-content: center; background: transparent; border-left: 1px dashed var(--hairline-strong); }
.page-quote--reserved .tag-soon { margin-top: 12px; }
@media (max-width: 800px) {
  .page-quote { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-quote__body { padding: 32px 24px; }
  .page-quote__attr { padding-top: 32px; }
  .page-quote__media { min-height: 220px; order: -1; }
  .page-quote--reserved .page-quote__media { border-left: 0; border-bottom: 1px dashed var(--hairline-strong); }
}
@media (max-width: 600px) { .page-quote__text { font-size: var(--fs-quote-tp); letter-spacing: var(--ls-quote-tp); } }
.page-quote + .page-split { margin-top: 120px; }
@media (max-width: 800px) { .page-quote + .page-split { margin-top: 64px; } }

/* ---------- .page-faq · plus / minus accordion (<details>) ----------
   closed row 64px (16px grey question, "+" right) · open: ↳ + 16px 500 black
   question, 14/1.5 grey answer indented 28px, "×" right. Hairline after each. */
.page-faq { display: block; }
.page-split__main > .page-h2 + .page-faq { margin-top: 60px; }
.page-faq__item { display: block; border-bottom: 1px solid var(--k10); }
.page-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 22px 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--grey);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur);
}
.page-faq__q::-webkit-details-marker { display: none; }
.page-faq__q:hover { color: var(--black); }
.page-faq__q:focus-visible { outline: 2px solid var(--jam); outline-offset: 3px; border-radius: 2px; }
.page-faq__mark { flex-shrink: 0; width: 16px; visibility: hidden; font-size: 14px; }
.page-faq__label { flex: 1 1 auto; min-width: 0; }
.page-faq__toggle { flex-shrink: 0; width: 16px; text-align: right; font-size: 15px; line-height: 20px; color: var(--grey); }
.page-faq__toggle::before { content: "+"; }
.page-faq__item[open] .page-faq__q { color: var(--black); font-weight: 500; }
.page-faq__item[open] .page-faq__mark { visibility: visible; font-weight: 400; }
.page-faq__item[open] .page-faq__toggle::before { content: "×"; }
.page-faq__a { padding: 0 0 32px 28px; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--grey); }
@media (max-width: 600px) { .page-faq__q { padding: 18px 0; font-size: 15px; } .page-faq__a { padding-bottom: 24px; } }

/* =====================================================================
   .mock-* · tiny UI mocks (white card in a .page-panel). Lance's language:
   white card r12 with a soft shadow, 12px grey header, 13–14px black rows on
   .5–1px hairlines, outlined 11px chips, one black (here: jam) emphasis.
   No images. Text comes from the JSON `visual` spec strings.
   ===================================================================== */
.mock-stage { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 100%; min-width: 0; padding: 6%; }
.mock-stage--col { flex-direction: column; gap: 16px; }
.mock-card {
  position: relative;
  /* the spec strings say "White card 400×300"; Lance's own cards measure ~464
     wide inside the 1071×857 panel (ref/pages/product_ai-front-desk.jpg), so
     the declared width is scaled 1.15 here rather than in every spec */
  /* the inline --w comes from the spec's "White card 400x300"; min() keeps it
     inside the panel on narrow viewports, where --card-scale drops to 1 */
  width: min(calc(var(--w, 400px) * var(--card-scale, 1.15)), 100%);
  min-width: 0;
  max-width: 100%;
  padding: 18px 20px 16px;
  border-radius: 12px;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}
.mock-card--sm { --w: 260px; padding: 14px 16px 12px; }
/* the main card of a stage keeps Lance's card mass even when the spec is short */
.mock-stage > .mock-card:not(.mock-card--sm) { min-height: 248px; }
.mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; font-size: 12px; line-height: 1.3; letter-spacing: .02em; color: var(--grey); }
.mock-head__t { color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-head__r { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--grey); }
.mock-label { margin: 14px 0 6px; font-size: 11px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.mock-label:first-child { margin-top: 2px; }
.mock-rows { display: flex; flex-direction: column; }
.mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 0;
  border-top: 1px solid var(--k08);
  font-size: 13px;
  color: var(--black);
}
.mock-row:first-child, .mock-label + .mock-rows > .mock-row:first-child { border-top: 0; }
.mock-row--muted, .mock-row--muted .mock-row__t { color: var(--grey); }
.mock-row--strike .mock-row__t { color: var(--grey); text-decoration: line-through; }
.mock-row--jam .mock-row__t { color: var(--black); }
.mock-row__n { flex-shrink: 0; width: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--grey); font-variant-numeric: tabular-nums; }
.mock-row__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-row__v { flex-shrink: 0; margin-left: auto; font-size: 12px; color: var(--grey); white-space: nowrap; }
.mock-row__sub { flex-basis: 100%; margin: -4px 0 4px 30px; font-size: 12px; color: var(--grey); }
.mock-row--wrap { flex-wrap: wrap; }
/* small segmented selector (7 · 30 · 60 · 365) and a masked code field */
.mock-seg { display: inline-flex; flex-shrink: 0; margin-left: auto; border: 1px solid var(--k14); border-radius: 5px; overflow: hidden; }
.mock-seg i { padding: 2px 7px; border-left: 1px solid var(--k14); font-style: normal; font-size: 10px; line-height: 1.4; color: var(--grey); }
.mock-seg i:first-child { border-left: 0; }
.mock-seg i.is-on { background: var(--black); color: var(--white); }
.mock-code { display: flex; gap: 8px; margin: 10px 0 2px; }
.mock-code span { flex: 1 1 0; padding: 6px 0; border: 1px solid var(--k14); border-radius: 5px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--grey); text-align: center; }
/* numbered beat rows: label + tag on line one, a grey description rule under */
.mock-row--stack { flex-wrap: wrap; align-items: baseline; min-height: 44px; }
.mock-row--stack .mock-row__d { flex-basis: 100%; margin: 4px 0 0 30px; }
.mock-row--stack .mock-row__d .mock-line { display: block; height: 5px; }
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--k14);
  font-size: 11px;
  line-height: 1;
  color: var(--grey);
  white-space: nowrap;
}
.mock-chip--jam { border-color: var(--jam); color: var(--jam); }
.mock-chip--ink { background: var(--black); border-color: var(--black); color: var(--white); }
.mock-chip--fill { background: var(--sand-s); border-color: transparent; color: var(--black); }
.mock-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.mock-tick { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--jam); color: var(--black); }
.mock-tick--ink { background: var(--black); color: var(--white); }
.mock-tick svg { width: 8px; height: 8px; display: block; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mock-ring { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--k20); }
.mock-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--k20); }
.mock-dot--jam { background: var(--jam); }
.mock-dot--ink { background: var(--black); }
.mock-star { color: var(--jam); font-size: 12px; line-height: 1; flex-shrink: 0; }
.mock-x { color: var(--grey); font-size: 12px; line-height: 1; flex-shrink: 0; }
.mock-hl { margin: 4px 0 8px; padding: 10px 12px; border-radius: 8px; background: #f7f5f0; font-size: 14px; line-height: 1.4; color: var(--black); }
.mock-hl--serif { font-family: var(--font-display); font-size: 18px; line-height: 1.3; letter-spacing: -.2px; }
.mock-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.mock-cols--eq { align-items: center; }
.mock-eq { display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--grey); }
.mock-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--k08); font-size: 12px; line-height: 1.3; color: var(--grey); }
.mock-foot--bare { border-top: 0; padding-top: 0; }
.mock-caret { display: inline-block; width: 1px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--jam); animation: mock-blink 1s steps(2, start) infinite; }
.mock-lines { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.mock-line { height: 6px; border-radius: 3px; background: var(--k08); }
.mock-line--w60 { width: 60%; } .mock-line--w80 { width: 80%; } .mock-line--w45 { width: 45%; }
.mock-line--dark { background: var(--k20); }
.mock-bubble { display: block; width: fit-content; max-width: 88%; margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #f0efed; font-size: 13px; line-height: 1.4; color: var(--black); }
.mock-bubble--reply { margin-left: auto; background: #f7f5f0; }
.mock-bubble--ink { background: var(--black); color: var(--white); border-radius: 999px; padding: 6px 12px; }
.mock-bubble__meta { display: block; margin-top: 4px; font-size: 11px; color: var(--grey); }
.mock-avatar { display: inline-block; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--k20); position: relative; }
.mock-avatar::before { content: ""; position: absolute; left: 50%; top: 6px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 1px solid var(--k20); }
.mock-avatar::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 18px; height: 9px; margin-left: -9px; border-radius: 9px 9px 0 0; border: 1px solid var(--k20); border-bottom: 0; }
.mock-thumb { position: relative; flex-shrink: 0; width: 22px; height: 38px; border-radius: 5px; border: 1px solid var(--k20); }
.mock-thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -4px 0 0 -2px; border-left: 6px solid var(--jam); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.mock-thumb--lg { width: 44px; height: 78px; border-radius: 8px; }
.mock-thumb--lg::after { margin: -6px 0 0 -3px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.mock-thumb--jam { border-color: var(--jam); }
.mock-thumb__l { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; font-size: 10px; line-height: 1; color: var(--grey); text-align: center; white-space: nowrap; }
.mock-thumbs { display: flex; gap: 16px; padding: 4px 0 24px; }
.mock-thumbs .mock-thumb { flex-shrink: 0; }
/* line-drawn phone frame with REC dot + timecode */
.mock-phone { position: relative; flex-shrink: 0; width: 150px; aspect-ratio: 9 / 19; border-radius: 20px; border: 1px solid #a9a8a3; background: rgba(255,255,255,.35); }
.mock-phone--lg { width: 236px; border-radius: 30px; }
.mock-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; border: 1px solid #a9a8a3; }
.mock-phone::after { content: ""; position: absolute; bottom: 9px; left: 50%; width: 30%; height: 1px; margin-left: -15%; background: #a9a8a3; }
.mock-phone__rec { position: absolute; top: 26px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--grey); }
.mock-phone__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jam); animation: mock-blink 1.2s steps(2, start) infinite; }
.mock-phone__tc { position: absolute; top: 26px; right: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--grey); font-variant-numeric: tabular-nums; }
.mock-phone__meter { position: absolute; left: 14px; right: 14px; bottom: 30px; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.mock-phone__meter i { flex: 1; background: var(--k14); border-radius: 1px; height: 30%; animation: mock-meter 1.4s ease-in-out infinite; }
.mock-phone__meter i:nth-child(2n) { animation-delay: -.4s; } .mock-phone__meter i:nth-child(3n) { animation-delay: -.8s; }
.mock-phone__figure { position: absolute; inset: 22% 18% 26%; color: #a9a8a3; }
.mock-phone__figure svg { width: 100%; height: 100%; }
.mock-phone__caption { position: absolute; left: 12px; right: 12px; bottom: 24%; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.78); color: var(--white); font-size: 11px; line-height: 1.3; text-align: center; }
.mock-phone__zone { position: absolute; border: 1px dashed var(--k14); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--k05) 4px 5px); border-radius: 6px; }
.mock-phone__zone--top { left: 10px; right: 10px; top: 46px; height: 14%; }
.mock-phone__zone--side { right: 10px; bottom: 34%; width: 22%; height: 30%; }
.mock-call { position: absolute; left: 12px; right: 12px; top: 48%; padding: 8px 10px; border-radius: 10px; background: var(--white); box-shadow: 0 4px 14px rgba(0,0,0,.08); font-size: 11px; line-height: 1.35; color: var(--black); }
.mock-call::before { content: ""; display: block; width: 8px; height: 8px; margin-bottom: 6px; border-radius: 50%; background: var(--jam); }
/* progress row · dots joined by a line */
.mock-steps { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 14px 0 6px; }
.mock-steps::before { content: ""; position: absolute; left: 7px; right: 7px; top: 21px; height: 1px; background: var(--k14); }
.mock-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 11px; line-height: 1.2; color: var(--grey); text-align: center; }
.mock-step > .mock-tick, .mock-step > .mock-ring, .mock-step > .mock-dot { position: relative; z-index: 1; background-clip: padding-box; }
.mock-step > .mock-ring, .mock-step > .mock-dot { box-shadow: 0 0 0 4px var(--white); }
.mock-step > .mock-dot { width: 14px; height: 14px; }
.mock-step > .mock-tick { box-shadow: 0 0 0 4px var(--white); }
.mock-step--current { color: var(--black); }
.mock-step__l { max-width: 90px; }
/* timeline track */
.mock-track { position: relative; padding: 6px 0 2px; }
.mock-track__ruler { display: flex; justify-content: space-between; height: 8px; border-bottom: 1px solid var(--k14); margin-bottom: 8px; }
.mock-track__ruler i { width: 1px; height: 100%; background: var(--k14); }
.mock-track__row { display: flex; gap: 4px; height: 26px; margin-bottom: 6px; }
.mock-track__row--thin { height: 14px; }
.mock-clip { display: flex; align-items: center; flex: 1 1 0; min-width: 0; padding: 0 8px; border-radius: 4px; background: #e9e8e5; font-size: 11px; line-height: 1; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-clip--w2 { flex-grow: 2; } .mock-clip--w3 { flex-grow: 3; }
.mock-clip--cap { background: var(--sand-s); border: 1px solid var(--k08); color: var(--grey); font-size: 10px; }
.mock-clip--strike { text-decoration: line-through; color: var(--grey); background: transparent; border: 1px dashed var(--k14); }
.mock-clip--jam { box-shadow: inset 0 0 0 1px var(--jam); }
.mock-cut { position: relative; width: 6px; flex-shrink: 0; }
.mock-cut::before { content: ""; position: absolute; left: 2px; top: -4px; bottom: -4px; border-left: 1px dashed var(--jam); }
.mock-cut__l { position: absolute; top: 100%; left: -14px; margin-top: 4px; font-size: 9px; letter-spacing: .04em; color: var(--jam); white-space: nowrap; }
/* progress / level bars */
.mock-bar { position: relative; height: 6px; border-radius: 3px; background: var(--k08); overflow: hidden; }
.mock-bar__fill { display: block; width: var(--p, 60%); height: 100%; border-radius: 3px; background: var(--black); }
.mock-bar__fill--jam { background: var(--jam); }
.mock-bar__fill--grey { background: var(--k20); }
.mock-bar__mark { position: absolute; top: -3px; left: var(--p, 40%); width: 1px; height: 12px; background: var(--jam); }
.mock-bar--tall { height: 10px; border-radius: 5px; }
.mock-bar--tall .mock-bar__fill { border-radius: 5px; }
.mock-bars { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.mock-bars__row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; font-size: 12px; color: var(--black); }
.mock-bars__row .mock-row__v { margin-left: 0; }
.mock-seg { display: flex; gap: 3px; }
.mock-seg i { flex: 1; height: 8px; border-radius: 2px; background: var(--k08); }
.mock-seg i.is-on { background: var(--black); }
.mock-seg__l { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--grey); }
.mock-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.mock-wave i { width: 2px; border-radius: 1px; background: var(--k20); height: 30%; }
.mock-wave i:nth-child(2n) { height: 70%; } .mock-wave i:nth-child(3n) { height: 100%; } .mock-wave i:nth-child(5n) { height: 50%; }
.mock-export { margin-top: 10px; }
.mock-export .mock-bar__fill { width: 0; }
.is-in .mock-export .mock-bar__fill { animation: mock-fill 2.2s .4s cubic-bezier(.4,0,.2,1) forwards; }
.mock-export__chips { display: flex; gap: 8px; margin-top: 10px; }
.is-in .mock-export__chips .mock-chip { animation: mock-chip-on .4s both; }
.is-in .mock-export__chips .mock-chip:nth-child(1) { animation-delay: 2.7s; }
.is-in .mock-export__chips .mock-chip:nth-child(2) { animation-delay: 3s; }
.is-in .mock-export__chips .mock-chip:nth-child(3) { animation-delay: 3.3s; }
/* tile grids */
.mock-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; padding: 6px 0 2px; }
.mock-grid--labels { grid-template-columns: 76px repeat(var(--cols, 3), minmax(0, 1fr)); }
.mock-tile { position: relative; min-height: 44px; padding: 8px 10px; border-radius: 6px; background: var(--sand-s); font-size: 12px; line-height: 1.3; color: var(--black); }
.mock-tile__s { display: block; margin-top: 3px; font-size: 10px; line-height: 1.3; color: var(--grey); }
.mock-tile--empty { background: transparent; border: 1px dashed var(--k14); color: var(--grey); }
.mock-tile--head { min-height: 0; padding: 4px 0; background: transparent; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.mock-tile--rowhead { min-height: 0; background: transparent; padding-left: 0; font-size: 11px; color: var(--grey); display: flex; align-items: center; }
.mock-tile .mock-dot--jam { position: absolute; right: 8px; top: 8px; }
.mock-tile--jam { box-shadow: inset 0 0 0 1px var(--jam); }
/* seals row */
.mock-seals { display: flex; justify-content: space-around; gap: 12px; padding: 12px 0 4px; }
.mock-seal { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; font-size: 11px; line-height: 1.3; color: var(--grey); text-align: center; }
.mock-seal__ring { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--k20); }
.mock-seal__ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--k14); }
.mock-seal__ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin-left: -7px; background: var(--k20); }
/* kit list (line icons + labels) */
.mock-kit { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.mock-kit__row { display: flex; align-items: center; gap: 12px; min-height: 34px; font-size: 13px; color: var(--black); }
.mock-kit__ico { flex-shrink: 0; width: 26px; height: 26px; color: #a9a8a3; }
.mock-kit__ico svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.mock-kit__row--strike { color: var(--grey); text-decoration: line-through; }
/* flow */
.mock-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 4px; }
.mock-flow__node { padding: 6px 10px; border-radius: 6px; background: var(--sand-s); font-size: 12px; color: var(--black); }
.mock-flow__node--jam { background: transparent; box-shadow: inset 0 0 0 1px var(--jam); }
.mock-flow__arrow { color: var(--grey); font-size: 12px; }
/* toggle */
.mock-toggle { display: inline-block; flex-shrink: 0; width: 26px; height: 15px; border-radius: 999px; background: var(--k14); position: relative; }
.mock-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--white); }
.mock-toggle--on { background: var(--black); }
.mock-toggle--on::after { left: 13px; }
/* signature line */
.mock-sig { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--k08); font-size: 11px; color: var(--grey); }
.mock-sig__line { flex: 1; height: 18px; border-bottom: 1px solid var(--k20); position: relative; }
.mock-sig__line::after { content: ""; position: absolute; left: 4px; bottom: 3px; width: 46%; height: 8px; border-radius: 50%; border-top: 1px solid var(--k40); transform: rotate(-4deg); }
.mock-stamp { position: absolute; top: 14px; right: 16px; padding: 4px 8px; border: 1px solid var(--k14); border-radius: 4px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); transform: rotate(-6deg); }
/* mono ticker under a card */
.mock-ticker { position: relative; height: 16px; overflow: hidden; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); text-align: center; }
.mock-ticker span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .4s; }
.mock-ticker span.is-on { opacity: 1; }
.mock-strip { font-size: 12px; letter-spacing: .02em; color: var(--grey); text-align: center; }
/* in-feed ad */
.mock-feed { display: flex; flex-direction: column; gap: 10px; }
.mock-feed__head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--black); }
.mock-feed__head small { font-size: 11px; color: var(--grey); }
.mock-feed__video { position: relative; width: 100%; aspect-ratio: 9 / 12; border-radius: 10px; border: 1px solid var(--k14); background: var(--sand-s); }
.mock-feed__video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -9px 0 0 -6px; border-left: 16px solid var(--jam); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.mock-feed__icons { display: flex; gap: 14px; color: #a9a8a3; }
.mock-feed__icons svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
/* stagger-in */
.page-panel .mock-row, .page-panel .mock-step, .page-panel .mock-tile, .page-panel .mock-bubble, .page-panel .mock-clip, .page-panel .mock-kit__row { opacity: 0; transform: translateY(6px); }
.page-panel.is-in .mock-row, .page-panel.is-in .mock-step, .page-panel.is-in .mock-tile, .page-panel.is-in .mock-bubble, .page-panel.is-in .mock-clip, .page-panel.is-in .mock-kit__row {
  animation: mock-in .5s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(.12s + var(--i, 0) * .09s);
}
@keyframes mock-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mock-blink { 50% { opacity: 0; } }
@keyframes mock-fill { to { width: 100%; } }
@keyframes mock-chip-on { from { border-color: var(--k14); color: var(--grey); } to { border-color: var(--jam); color: var(--jam); } }
@keyframes mock-meter { 0%, 100% { height: 30%; } 50% { height: 90%; } }
@media (max-width: 800px) {
  /* the panel is narrow here, so the 1.15 card scale above is dropped */
  .mock-card { --card-scale: 1; }
}
@media (max-width: 600px) {
  .mock-stage { gap: 14px; padding: 5%; }
  .mock-card { --w: 100%; --card-scale: 1; padding: 14px 14px 12px; }
  .mock-stage > .mock-card--sm { display: none; }
  .mock-stage > .mock-phone { width: 96px; }
  .mock-stage > .mock-phone--lg { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-panel .mock-row, .page-panel .mock-step, .page-panel .mock-tile, .page-panel .mock-bubble, .page-panel .mock-clip, .page-panel .mock-kit__row { opacity: 1; transform: none; animation: none !important; }
  .mock-export .mock-bar__fill { width: 100%; animation: none !important; }
  .mock-export__chips .mock-chip { border-color: var(--jam); color: var(--jam); animation: none !important; }
  .mock-caret, .mock-phone__rec::before, .mock-phone__meter i { animation: none !important; }
}

/* ---------- line icons on the problems tiles (1px grey, baseline rule) ---------- */
.page-icon { display: block; width: 100%; height: auto; stroke: currentColor; fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.page-icon * { vector-effect: non-scaling-stroke; }
@media (max-width: 600px) { .page-split__main > .page-h2 + .page-faq { margin-top: 32px; } }

/* ---- src/css/41-services.css ---- */
/* =====================================================================
   hypjam v2 · 41-services.css
   Services-only tweaks on top of 40-pages.css (the shared sub-page
   vocabulary). Prefix `.svc-`. Everything structural lives in 40-pages.css
   so the solutions and other page agents can reuse it unchanged.
   ===================================================================== */

/* the hero mock stage on a service page: the 3:2 panel holds a 420–560px card */
.svc .page-hero__visual .mock-stage { padding: 5% 6%; }
.svc .page-hero__visual .mock-card { --w: 420px; }
.svc .page-hero__visual .mock-card--wide { --w: 560px; }
.svc .page-hero__visual .mock-card--sm { --w: 260px; }
.svc .page-hero__visual .mock-ticker, .svc .page-hero__visual .mock-strip { width: 100%; max-width: 420px; }

/* index: the two reserved film slots keep Lance's 16:9 card but read as held-open */
.svc--index .page-media__frame.reserved .reserved__phone { opacity: .9; }

/* feature mocks: a 400px card centred on the 5:4 panel */
.svc .page-feature__visual .mock-card { --w: 400px; }
.svc .page-feature__visual .mock-stage { padding: 8%; }

@media (max-width: 1024px) {
  .svc .page-hero__visual .mock-card--wide { --w: 100%; }
}

/* ---- src/css/42-solutions.css ---- */
/* =====================================================================
   hypjam v2 · 42-solutions.css
   Solutions-only additions on top of 40-pages.css (the shared sub-page
   vocabulary owned by the services agent). Prefix `.sol-`.

   Everything the solutions pages share with /services — page hero, split
   header, editorial image, platforms row, feature blocks, ↳ bullets,
   problems grid, steps, "under the hood" compare grid, quote card, FAQ,
   closing CTA card, .page-panel + .mock-* — comes from 40-pages.css and is
   NOT redefined here. What lives here is what only /solutions has:

     .sol-cards        index: "By goal" 3×2 and "By brand" 3×1 card grids
     .sol-stats--3     three facts instead of Lance's four
     .sol-behind       "the services behind it": four columns with rules
     .sol-fits         brand pages: "Where hypjam fits" 2×2 with rules
     .sol-hero-full    brand pages: full-viewport still hero, centred
     .sol-band         brand pages: full-width still band with a centred h2
     .sol-related      "Related" list under a full-width rule
     .sol-quote-media  the HQ room line drawing inside the quote card

   Numbers are measured on ref/pages/solutions.jpg,
   solutions_front-of-house.jpg and solutions_independent.jpg at 1920.
   ===================================================================== */

/* ---------------------------------------------------------------------
   INDEX · card grids
   Lance at 1920: three columns in the 1864px content box → 602.67 each,
   column gap 28, row gap 56. Tile 603×452 (4:3). Title 26px display with
   "Explore →" on the same baseline, right-aligned; blurb 13/22 grey.
   --------------------------------------------------------------------- */
.sol-cards__head { margin-bottom: 64px; }
.sol-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 56px;
  list-style: none;
}
.sol-card { display: block; min-width: 0; color: inherit; text-decoration: none; }
.sol-card__tile { aspect-ratio: 4 / 3; }
.sol-card__icon { display: block; width: 64%; height: auto; color: #b0afaa; }
.sol-card__still {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
  background: var(--sand-m);
}
.sol-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.sol-card__title {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
  transition: color var(--dur);
}
.sol-card__explore { flex-shrink: 0; }
.sol-card__blurb { margin-top: 12px; max-width: 400px; font-size: 13px; line-height: 22px; color: var(--grey); }
.sol-card:hover .sol-card__title { color: var(--grey); }
.sol-card:hover .arrow-link { color: var(--black); }

@media (max-width: 1200px) {
  .sol-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .sol-cards__head { margin-bottom: 48px; }
}
@media (max-width: 800px) {
  .sol-cards { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .sol-cards__head { margin-bottom: 32px; }
  .sol-card__head { margin-top: 16px; }
  .sol-card__title { font-size: 22px; letter-spacing: -.44px; }
}

/* Lance's index h1 needs a wider box than the sub-page default (560) */
.sol--index .page-hero__title { max-width: 700px; }

/* the by-goal section keeps Lance's pb-[140px] (max-bp: pb-20) */
.sol-section--goal { padding-top: 0; padding-bottom: 140px; }
@media (max-width: 800px) { .sol-section--goal { padding-bottom: 80px; } }

/* ---------------------------------------------------------------------
   DETAIL · three facts (Lance's stats row is four)
   --------------------------------------------------------------------- */
.sol-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the values here are offer facts ("14 days", "6 placements"), not Lance's
   short numerals, so they wrap rather than overflow their column */
.sol-stats--3 .page-stat__num { white-space: normal; text-wrap: balance; }
@media (max-width: 1440px) { .sol-stats--3 .page-stat__num { font-size: 52px; letter-spacing: -1.04px; } }
@media (max-width: 1200px) { .sol-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 1024px) { .sol-stats--3 .page-stat__num { font-size: 40px; letter-spacing: -.8px; } }
@media (max-width: 800px)  { .sol-stats--3 { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
                             .sol-stats--3 .page-stat__num { font-size: 48px; letter-spacing: -.96px; } }
@media (max-width: 600px)  { .sol-stats--3 .page-stat__num { font-size: 40px; letter-spacing: -.8px; } }

/* ---------------------------------------------------------------------
   GOAL PAGES · "The services behind it" — four columns, 1px rules between.
   Cell text sits 28px inside its column (Lance: 57px from the page edge).
   --------------------------------------------------------------------- */
.sol-behind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.sol-behind__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px 28px 28px;
  border-left: 1px solid var(--sand-l-60);
}
.sol-behind__cell:first-child { border-left: 0; }
.sol-behind__n { font-size: 12px; line-height: 1; letter-spacing: .04em; color: var(--grey); font-variant-numeric: tabular-nums; }
.sol-behind__name {
  display: block;
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
  transition: color var(--dur);
}
a.sol-behind__name:hover { color: var(--grey); }
.sol-behind__blurb { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--grey); }
.sol-behind__link { margin-top: auto; padding-top: 32px; }
@media (max-width: 1024px) {
  .sol-behind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-behind__cell { border-left: 0; border-top: 1px solid var(--sand-l-60); padding: 28px 24px 28px 0; }
  .sol-behind__cell:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--sand-l-60); }
  .sol-behind__name { margin-top: 16px; }
}
@media (max-width: 600px) {
  .sol-behind { grid-template-columns: minmax(0, 1fr); }
  .sol-behind__cell, .sol-behind__cell:nth-child(2n) { border-left: 0; padding: 24px 0; }
  .sol-behind__cell:first-child { border-top: 0; }
  .sol-behind__name { font-size: 22px; letter-spacing: -.44px; }
  .sol-behind__link { padding-top: 20px; }
}

/* ---------------------------------------------------------------------
   BRAND PAGES · "Where hypjam fits" — 2×2, 1px rules both ways.
   Title 26px display, a 24px hairline under it, body 14/1.5, ↳ link.
   --------------------------------------------------------------------- */
.sol-fits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
.sol-fits__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 38px 28px 44px;
  border-left: 1px solid var(--sand-l-60);
  border-top: 1px solid var(--sand-l-60);
}
.sol-fits__cell:nth-child(2n + 1) { border-left: 0; }
.sol-fits__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
}
.sol-fits__dash { display: block; width: 24px; height: 1px; margin: 20px 0 0; background: var(--sand-l); border: 0; }
.sol-fits__body { margin-top: 22px; max-width: 840px; font-size: 14px; line-height: 1.5; color: var(--grey); }
.sol-fits__link { margin-top: auto; padding-top: 28px; }
@media (max-width: 800px) {
  .sol-fits { grid-template-columns: minmax(0, 1fr); }
  .sol-fits__cell, .sol-fits__cell:nth-child(2n + 1) { border-left: 0; padding: 28px 0 32px; }
  .sol-fits__title { font-size: 22px; letter-spacing: -.44px; }
  .sol-fits__link { padding-top: 20px; }
}

/* ---------------------------------------------------------------------
   BRAND PAGES · full-viewport still hero (Lance /solutions/independent).
   h-svh, min 560; 45% black scrim; content centred and anchored low.
   --------------------------------------------------------------------- */
.sol-hero-full {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100svh;
  min-height: 560px;
  max-height: 1100px;
  padding: 28px var(--px-page) 48px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  text-align: center;
}
.sol-hero-full__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-hero-full__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.sol-hero-full__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
  padding-bottom: 56px;
}
.sol-hero-full__mark { display: block; width: 68px; height: auto; margin-bottom: 30px; }
.sol-hero-full__eyebrow { font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--w70); }
.sol-hero-full__title {
  margin-top: 22px;
  max-width: 640px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--white);
  text-wrap: balance;
}
.sol-hero-full__intro { margin-top: 20px; max-width: 500px; font-size: 16px; line-height: 24px; color: var(--w75); text-wrap: pretty; }
.sol-hero-full__cta { margin-top: 34px; }
@media (max-width: 1024px) { .sol-hero-full__title { font-size: var(--fs-h1-lp); letter-spacing: -.96px; } }
@media (max-width: 800px)  { .sol-hero-full__inner { padding-bottom: 24px; } .sol-hero-full__mark { width: 56px; margin-bottom: 22px; } }
@media (max-width: 600px)  {
  .sol-hero-full { min-height: 520px; padding-bottom: 40px; }
  .sol-hero-full__title { font-size: var(--fs-title-tp); letter-spacing: var(--ls-title-tp); }
  .sol-hero-full__intro { font-size: 14px; line-height: 1.5; }
}

/* ---------------------------------------------------------------------
   BRAND PAGES · the full-width still band (Lance: 1864×517, radius 12)
   --------------------------------------------------------------------- */
.sol-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 517px;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  text-align: center;
}
.sol-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-band__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sol-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 40px var(--px-page); }
.sol-band__mark { display: block; width: 68px; height: auto; margin-bottom: 26px; }
.sol-band__h2 {
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--white);
  text-wrap: balance;
}
.sol-band__sub { margin-top: 18px; max-width: 460px; font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--w75); text-wrap: pretty; }
@media (max-width: 1024px) { .sol-band { height: 440px; } .sol-band__h2 { font-size: var(--fs-h1-lp); letter-spacing: -.96px; } }
@media (max-width: 600px)  {
  .sol-band { height: 360px; border-radius: 12px; }
  .sol-band__mark { width: 52px; margin-bottom: 18px; }
  .sol-band__h2 { font-size: var(--fs-title-tp); letter-spacing: var(--ls-title-tp); }
}

/* ---------------------------------------------------------------------
   DETAIL · "Related" — a full-width rule, then eyebrow | list
   --------------------------------------------------------------------- */
.sol-section--related { padding-top: 0; padding-bottom: 100px; }
.sol-related-rule { width: 100%; height: 1px; margin-bottom: 48px; background: var(--k10); border: 0; }
.sol-related { display: flex; flex-direction: column; gap: 20px; list-style: none; }
.sol-related__item { min-width: 0; }
.sol-related__link { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--grey); transition: color var(--dur); }
.sol-related__link::before { content: "↳"; flex-shrink: 0; width: 14px; font-size: 13px; line-height: 1.5; }
.sol-related__link:hover { color: var(--black); }
.sol-related__body { margin-top: 3px; padding-left: 24px; max-width: 560px; font-size: 13px; line-height: 1.45; color: var(--grey); }
@media (max-width: 800px) { .sol-section--related { padding-bottom: 56px; } .sol-related-rule { margin-bottom: 32px; } }

/* ---------------------------------------------------------------------
   DETAIL · the quote card's right column
   Goal pages show the HQ line drawing of the room that matches the stop
   (CONTRACT §8) instead of Lance's customer photo; brand pages keep the
   reserved slot from 40-pages.css (.page-quote--reserved).
   --------------------------------------------------------------------- */
.sol-quote-media { display: grid; place-items: center; padding: 44px; background: var(--sand-s); }
.sol-room { display: block; width: 100%; height: auto; max-height: 100%; color: var(--line); }
.sol-room path, .sol-room line, .sol-room rect, .sol-room circle,
.sol-room ellipse, .sol-room polyline, .sol-room polygon { vector-effect: non-scaling-stroke; }
@media (max-width: 800px) { .sol-quote-media { padding: 28px; min-height: 240px; } }

/* the goal-page hero panel holds the same mock cards the service pages use */
.sol .page-hero__visual .mock-stage { padding: 5% 6%; }
.sol .page-hero__visual .mock-card { --w: 420px; }
.sol .page-hero__visual .mock-card--wide { --w: 520px; }
.sol .page-feature__visual .mock-card { --w: 400px; }
.sol .page-feature__visual .mock-stage { padding: 8%; }
@media (max-width: 1024px) { .sol .page-hero__visual .mock-card--wide { --w: 100%; } }

/* the conversation mock: a bubble, a drawn connector and the hypjam mark */
.sol-conv { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; padding: 6%; }
.sol-conv__left { min-width: 0; max-width: 320px; }
.sol-conv__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; line-height: 1.3; color: var(--grey); }
.sol-conv__meta svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sol-conv__bubble {
  position: relative;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--sand-m);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  font-size: 16px;
  line-height: 1.35;
  color: var(--black);
}
.sol-conv__bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-right: 1px solid var(--sand-m);
  border-bottom: 1px solid var(--sand-m);
  transform: rotate(45deg);
}
.sol-conv__wire { flex-shrink: 0; width: 92px; height: 72px; color: var(--sand-l); }
.sol-conv__wire svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.sol-conv__right { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.sol-conv__mark { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: var(--black); }
.sol-conv__mark img { width: 44px; height: 44px; }
.sol-conv__label { margin-top: 14px; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--black); text-align: center; }
.page-panel .sol-conv__bubble, .page-panel .sol-conv__right { opacity: 0; transform: translateY(6px); }
.page-panel.is-in .sol-conv__bubble { animation: mock-in .6s cubic-bezier(.2,.8,.2,1) both; }
.page-panel.is-in .sol-conv__right { animation: mock-in .5s .35s cubic-bezier(.2,.8,.2,1) both; }
@media (max-width: 1024px) {
  .sol-conv { flex-direction: column; gap: 8px; }
  .sol-conv__wire { width: 56px; height: 40px; transform: rotate(90deg); }
}
@media (max-width: 600px) { .sol-conv__bubble { font-size: 14px; } .sol-conv__mark { width: 64px; height: 64px; border-radius: 16px; } .sol-conv__mark img { width: 34px; height: 34px; } }

/* three casting cards side by side (the casting-board mock) */
.sol-castcards { display: flex; align-items: stretch; justify-content: center; gap: 20px; width: 100%; padding: 6%; }
.sol-castcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 150px;
  padding: 20px 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--sand-m);
  background: var(--white);
  text-align: center;
}
.sol-castcard--pick { box-shadow: 0 12px 24px rgba(0, 0, 0, .08); }
.sol-castcard__av { width: 56px; height: 56px; color: var(--line); }
.sol-castcard__av svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sol-castcard__handle { font-size: 14px; line-height: 1.2; color: var(--black); }
.sol-castcard__tags { font-size: 12px; line-height: 1.4; color: var(--grey); }
.sol-castcard__pick { margin-top: 2px; }
.page-panel .sol-castcard { opacity: 0; transform: translateY(6px); }
.page-panel.is-in .sol-castcard { animation: mock-in .5s cubic-bezier(.2,.8,.2,1) both; }
.page-panel.is-in .sol-castcard:nth-child(2) { animation-delay: .25s; }
.page-panel.is-in .sol-castcard:nth-child(3) { animation-delay: .5s; }
@media (max-width: 600px) { .sol-castcards { gap: 10px; padding: 5%; } .sol-castcard { width: auto; flex: 1 1 0; padding: 14px 8px; } .sol-castcard__tags { font-size: 11px; } }

/* the retention flow diagram */
.sol-flow { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 6%; }
.sol-flow__node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 150px;
  min-height: 90px;
  padding: 16px 14px;
  border-radius: 12px;
  border: 1px solid var(--sand-m);
  background: var(--white);
  font-size: 13px;
  line-height: 1.35;
  color: var(--black);
}
.sol-flow__play { display: block; width: 0; height: 0; border-left: 12px solid var(--jam); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.sol-flow__arrow { flex-shrink: 0; width: 46px; height: 14px; color: var(--sand-l); }
.sol-flow__arrow svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.page-panel .sol-flow__node { opacity: 0; transform: translateY(6px); }
.page-panel.is-in .sol-flow__node { animation: mock-in .5s cubic-bezier(.2,.8,.2,1) both; }
.page-panel.is-in .sol-flow__node:nth-child(3) { animation-delay: .3s; }
.page-panel.is-in .sol-flow__node:nth-child(5) { animation-delay: .6s; }
@media (max-width: 600px) { .sol-flow { flex-direction: column; gap: 8px; } .sol-flow__node { width: 100%; min-height: 0; } .sol-flow__arrow { transform: rotate(90deg); width: 28px; } }

/* the trend board's small stitched phone */
.sol-mini-phone { position: relative; flex-shrink: 0; width: 104px; aspect-ratio: 9 / 16; border-radius: 12px; border: 1px solid #a9a8a3; background: rgba(255,255,255,.5); overflow: hidden; display: flex; flex-direction: column; }
.sol-mini-phone i { flex: 1; border-bottom: 1px dashed var(--k14); background: var(--sand-s); }
.sol-mini-phone i:last-child { border-bottom: 0; background: var(--sand-m); }

@media (prefers-reduced-motion: reduce) {
  .page-panel .sol-conv__bubble, .page-panel .sol-conv__right,
  .page-panel .sol-castcard, .page-panel .sol-flow__node { opacity: 1; transform: none; animation: none !important; }
}

/* ---------------------------------------------------------------------
   Small pieces the solutions mocks need on top of 40-pages.css's .mock-*
   --------------------------------------------------------------------- */
.sol-stats__p { margin: 28px auto 0; max-width: 560px; }

/* a wider mock card: the hook sheet and the brief card run to 520px */
.sol-wide { --w: 520px; }
.sol .page-feature__visual .sol-wide { --w: 520px; }
@media (max-width: 1024px) { .sol .page-hero__visual .sol-wide, .sol .page-feature__visual .sol-wide { --w: 100%; } }

/* label left (grey) · value right (black) — the inverse of .mock-row__t/__v */
.sol-row-k { flex: 1 1 auto; min-width: 0; color: var(--grey); }
.sol-row-v { flex-shrink: 0; margin-left: auto; font-size: 13px; color: var(--black); white-space: nowrap; }

/* the eight-hook sheet: hooks are sentences, so let them sit on one line
   without the ellipsis .mock-row__t would otherwise apply */
.sol-hooks .mock-row { min-height: 32px; }
.sol-hooks .mock-row__t { font-size: 13px; }

/* tab strip (spark-toggle) */
.sol-tabs { display: flex; gap: 20px; padding-bottom: 12px; }
.sol-tab { font-size: 13px; line-height: 1.4; color: var(--grey); padding-bottom: 6px; }
.sol-tab--on { color: var(--black); border-bottom: 1px solid var(--black); }

/* the signed stamp on the rights sheet */
.sol-stamp { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--jam); position: relative; }
.sol-stamp::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--jam); }
.page-panel .sol-stamp { opacity: 0; transform: scale(.9); }
.page-panel.is-in .sol-stamp { animation: sol-stamp-in .4s 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sol-stamp-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* the read-back grid shades cells without printing a number in them */
.sol-cell--2 { background: var(--sand-m); }
.sol-cell--3 { background: var(--sand-l); }

/* the founder prompt card cycles two hook lines through .mock-ticker */
.sol-take .mock-ticker {
  position: relative;
  height: auto;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.1px;
  text-transform: none;
  color: var(--black);
  text-align: left;
}
.sol-take .mock-ticker span { position: absolute; left: 0; right: 0; top: 0; }
.sol-take__line { min-height: 46px; font-size: 15px; line-height: 1.3; letter-spacing: -.1px; color: var(--black); }

@media (prefers-reduced-motion: reduce) {
  .page-panel .sol-stamp { opacity: 1; transform: none; animation: none !important; }
}

/* ---- src/css/43-rights.css ---- */
/* =====================================================================
   hypjam v2 · 43-rights.css — the /rights page (Lance's /security,
   ref/pages/security.jpg at 1920). Class prefix .rights-page / .rights-hero
   / .rights-how / .rights-q / .rights-acc — chosen so nothing collides with
   the home section's .rights-* in 33-rights.css.
   Measured on the reference:
     hero    section.security-hero flex h-svh min-h-[500px] flex-col
             items-center justify-center bg-sand-m px-page
             h1 text-[56px] leading-none (line pitch 56) two lines, centred
             p  18/24 grey max-w-[600px] · 24px above and below
             pill 36px light (black/8, black circle) · seals 120px, gap-[120px],
             40px under the pill · touch: min-h 120svh pt-115 pb-120, inner +42px
     how     flex flex-col gap-20 bg-black px-page pb-7 pt-16 · h2 42
             grid 3 cols, 1px white/20 lines (measured #363636 on black),
             cell 327 tall, padding 24/24/28, title 13px caps, 24px dash,
             body 14/21 sand-l, 24px icon bottom-left
     q       flex gap-12 bg-black px-page py-[120px] · two equal columns
             left: h2 42, p 16/24 grey, 32px dark pill · right: rows of 73px
             (16px question, 24px padding, 1px white/15), 16px "+"
   ===================================================================== */

.rights-page { background: var(--black); color: var(--white); }

/* ---------- hero ---------- */
.rights-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  min-height: 500px;
  padding: 54px var(--px-page) 0;          /* the block sits ~27px under the true centre on Lance (nav overlap) */
  background: var(--sand-m);
  color: var(--black);
  text-align: center;
}
.rights-hero-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.rights-hero-h1 {
  max-width: 520px;                         /* wraps "Rights and safety / at every layer", like Lance's two lines */
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--black);
}
.rights-hero-sub {
  max-width: 600px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  color: var(--grey);
}
.rights-hero-cta { margin-top: 24px; }
.rights-hero-seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 120px;
  margin-top: 40px;
}
.rights-hero-seal {
  display: block;
  width: var(--badge-size);
  height: var(--badge-size);
  flex-shrink: 0;
}
.rights-hero-seal img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  transition: filter var(--dur);            /* Lance: bg-grey-m hover:bg-black · ours: grey stroke → black */
}
.rights-hero-seal:hover img { filter: brightness(0); }
/* schema fallback when a seal file is missing: the engraved text in a 1px circle */
.rights-hero-seal--text .rights-hero-seal-ring {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--grey);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--grey);
}

/* ---------- how we protect… ---------- */
.rights-how {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 64px var(--px-page) 28px;
  background: var(--black);
  color: var(--white);
}
.rights-how-h2 { color: var(--white); }
.rights-how-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--w20);
  border-left: 1px solid var(--w20);
}
.rights-how-cell {
  display: flex;
  min-height: 327px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 28px;
  border-right: 1px solid var(--w20);
  border-bottom: 1px solid var(--w20);
}
.rights-how-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rights-how-title { color: var(--white); }
.rights-how-body {
  max-width: 560px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sand-l);
}
.rights-how-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 32px;
  color: var(--white);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- questions ---------- */
.rights-q {
  display: flex;
  gap: 48px;
  padding: 120px var(--px-page);
  background: var(--black);
  color: var(--white);
}
.rights-q-intro {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.rights-q-h2 { color: var(--white); }
.rights-q-p { color: var(--grey); }
.rights-q-cta { margin-top: 4px; }

.rights-acc { flex: 1 1 0; min-width: 0; }
.rights-acc-item { border-bottom: 1px solid var(--w15); }
.rights-acc-h { font: inherit; }
.rights-acc-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  transition: color var(--dur);
}
.rights-acc-btn:hover { color: var(--sand-m); }
.rights-acc-btn:focus-visible { outline-offset: -2px; border-radius: 2px; }
.rights-acc-ico {
  display: flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: transform .35s var(--ease);
}
.rights-acc-ico svg { display: block; width: 16px; height: 16px; }
.rights-acc-item.is-open .rights-acc-ico { transform: rotate(45deg); }   /* + becomes × */
.rights-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s;
}
.rights-acc-item.is-open .rights-acc-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.rights-acc-panel-in { min-height: 0; overflow: hidden; }
.rights-acc-a {
  max-width: 640px;
  padding-bottom: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sand-l);
}
.rights-acc-link { margin: -8px 0 24px; }

/* ---------- breakpoints (Lance: max-nv 1200 · max-lp 1024 · max-bp 800 · max-tp 600 · touch) ---------- */
@media (max-width: 1200px) {
  .rights-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .rights-hero-seals { gap: 32px 64px; }
}
@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  /* Lance's .security-hero touch rule */
  .rights-hero { height: auto; min-height: 120svh; justify-content: flex-start; padding-top: 115px; padding-bottom: 120px; }
  .rights-hero-inner { transform: translateY(42px); }
}
@media (max-width: 800px) {
  .rights-hero-seals { gap: 24px 32px; }
  .rights-how { gap: 40px; padding-top: 48px; }
  .rights-how-grid { grid-template-columns: minmax(0, 1fr); }
  .rights-how-cell { min-height: 260px; padding-bottom: 24px; }
  .rights-q { flex-direction: column; align-items: stretch; gap: 40px; padding: 80px var(--px-page); }
  .rights-acc-item:first-child { border-top: 1px solid var(--w15); }
}
@media (max-width: 600px) {
  .rights-hero-h1 { font-size: 40px; letter-spacing: -.8px; }      /* Lance: .title 40/-.8 under 601 */
  .rights-hero-sub { font-size: 16px; }
  .rights-hero-seals { gap: 20px 24px; margin-top: 32px; }
  .rights-acc-btn { font-size: 15px; padding: 20px 0; gap: 16px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rights-acc-panel, .rights-acc-ico, .rights-hero-seal img { transition: none !important; }
}

/* ---- src/css/44-work.css ---- */
/* =====================================================================
   hypjam v2 · 44-work.css — the /work page (Lance's /hotels,
   ref/pages/hotels.jpg at 1920). The hero reuses the home carousel
   (.sto-* from 32-stories.css + 32-stories.js) with the hotels-page
   paddings; everything else is prefixed .work-.
   Measured on the reference:
     hero       bg-black pt-[220px] pb-[90px] · h1 42/1.1 two lines (line 2
                white/40) · 45px arrows · cards 377 × 440, gap 30
     facts      flex-col items-center gap-20 bg-sand-s px-page py-[120px]
                h2 42 centred · p 16/24 grey max-w 480 · 3×2 tiles 602×213,
                gap 30/26, radius 6, tint #f1f0ec · numeral text-[80px]
                sand-l · label 16 grey
     wall       flex-col items-center gap-[84px] bg-white pt-[120px] pb-[72px]
                three columns 395 wide, gap 42 (1268 total) · card tint
                sand/40, radius 8, padding 24 · quote Geist 18 · name 14/500
                · role 13 grey
     platforms  flex-col gap-10 px-page pt-[72px] pb-[120px] · 11px caps
                label · large tiles 203 tall, gap 18 · grid tiles 255 tall,
                gap 16 · tile grey-s (#f5f5f5), radius 6
     cta        relative h-svh min-h-[580px] · still darkened · h2 42 white
                + p 16 white bottom-left (112px up) · dark pill right
     formats    hypjam's own wall, in the same language: sand-s, py-[120px]
   ===================================================================== */

.work-page { background: var(--white); color: var(--black); --work-tile: #f1f0ec; }

/* ---------- hero: the .sto carousel with the hotels-page paddings ---------- */
.work-hero { min-height: 0; padding-top: 220px; padding-bottom: 90px; }
.work-hero-head { display: flex; min-width: 0; flex-direction: column; gap: 0; }
.work-hero-h1 { max-width: 640px; }
.work-hero-dim { max-width: 1000px; }
/* the heading breaks after work.hero.h1_break_after on desktop, as the reference does;
   below 1024 the forced break splits the line badly, so the two halves run inline */
.work-hero-l { display: block; }

/* ---------- shared centred head (facts, wall) ---------- */
.work-sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.work-sec-p { max-width: 480px; color: var(--grey); }
.work-sec-p--wide { max-width: 600px; }

/* ---------- facts ---------- */
.work-facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 120px var(--px-page);
  background: var(--sand-s);
  color: var(--black);
}
.work-facts-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 30px;
}
.work-fact {
  display: flex;
  height: 213px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 6px;
  background: var(--work-tile);
  text-align: center;
}
.work-fact-num {
  font-size: 80px;
  line-height: 1;
  letter-spacing: -1.6px;
  color: var(--sand-l);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.work-fact-suffix { font-size: 42px; letter-spacing: -.84px; }
.work-fact-label {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey);
}

/* ---------- the (reserved) quote wall ---------- */
.work-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 120px var(--px-page) 72px;
  background: var(--white);
  color: var(--black);
}
.work-wall-grid {
  display: grid;
  width: 100%;
  max-width: 1268px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
}
.work-quote {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 24px;
  border-radius: 8px;
}
.work-quote-text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.35;
  color: var(--black);
  text-wrap: pretty;
}
.work-quote-by { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.work-quote-role { color: var(--grey); }

/* ---------- platforms (replaces the brand-logo grids) ---------- */
.work-platforms {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 72px var(--px-page) 120px;
  background: var(--white);
  color: var(--black);
}
.work-plat-group { display: flex; flex-direction: column; gap: 20px; }
.work-plat-label {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
}
.work-plat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.work-plat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.work-plat-tile {
  display: flex;
  height: 203px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 6px;
  background: var(--grey-s);
  color: var(--black);
}
.work-plat-tile--sm { height: 255px; }
/* the name set typographically, monochrome at 60% — the hero marquee's treatment */
.work-plat-tile-in { display: inline-flex; align-items: center; gap: 12px; opacity: .6; }
.work-plat-glyph { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.work-plat-text {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.22px;
  text-align: center;
}

/* ---------- photo CTA ---------- */
.work-cta {
  position: relative;
  display: flex;
  width: 100%;
  height: 100svh;
  min-height: 580px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
.work-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* the reference band averages 34/255 luminance; aerial-close.jpg is a bright
     golden frame, so it is dimmed to land on the same tone under the shade */
  filter: brightness(.72);
}
.work-cta-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.58) 100%);
}
.work-cta-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: 0 var(--px-page) 112px;
}
.work-cta-text { display: flex; max-width: 760px; flex-direction: column; gap: 16px; }
.work-cta-h2 { color: var(--white); }
.work-cta-p { color: var(--white); }
.work-cta-btn { margin-top: 6px; }

/* ---------- formats wall (hypjam's own) ---------- */
.work-formats {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 120px var(--px-page);
  background: var(--sand-s);
  color: var(--black);
}
.work-formats-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.work-formats-h2 { max-width: 640px; }
.work-formats-intro { max-width: 720px; color: var(--grey); }
.work-format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-format {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: var(--white);
}
.work-format-name { color: var(--black); }
.work-format-blurb {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
}
.work-format-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.work-tag {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--sand-l-60);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--grey);
}
.work-samples { display: flex; flex-direction: column; gap: 20px; }
.work-sample-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.work-sample {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 8px;
  background: var(--white);
}
.work-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-sample-brand {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--black);
}
.work-sample-hook { color: var(--black); text-wrap: pretty; }
.work-sample-creator { font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--grey); }
.work-sample-note { flex: 1 1 auto; font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--fg-dim-40); }
.work-sample-format { margin-top: 4px; }

/* ---------- breakpoints (Lance: max-nv 1200 · max-lp 1024 · max-bp 800 · max-tp 600) ---------- */
@media (max-width: 1200px) {
  .work-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-wall-grid { gap: 24px; }
  .work-plat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-plat-tile { height: 160px; }
  .work-plat-tile--sm { height: 180px; }
  .work-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .work-hero-l { display: inline; }
}
@media (max-width: 800px) {
  .work-hero { padding-top: 140px; padding-bottom: 64px; }
  .work-facts { gap: 48px; padding: 80px var(--px-page); }
  .work-facts-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .work-fact { height: 180px; }
  .work-fact-num { font-size: 56px; letter-spacing: -1.12px; }
  .work-fact-suffix { font-size: 32px; letter-spacing: -.64px; }
  .work-wall { gap: 48px; padding: 80px var(--px-page) 48px; }
  .work-wall-grid { grid-template-columns: minmax(0, 1fr); }
  .work-quote { min-height: 0; gap: 32px; }
  .work-platforms { gap: 32px; padding: 48px var(--px-page) 80px; }
  .work-cta { min-height: 520px; }
  .work-cta-row { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 64px; }
  .work-formats { gap: 40px; padding: 80px var(--px-page); }
  .work-format-grid, .work-sample-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .work-hero { padding-top: 120px; }
  .work-plat-row, .work-plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .work-plat-tile, .work-plat-tile--sm { height: 120px; padding: 16px; }
  .work-plat-text { font-size: 16px; letter-spacing: -.16px; }
  .work-plat-glyph { width: 18px; height: 18px; }
}

/* ---- src/css/45-book.css ---- */
/* =====================================================================
   hypjam v2 · 45-book.css — the /book page (Lance's /get-started,
   ref/pages/get-started.jpg at 1920×1080). Prefix .book-.
   Measured on the reference:
     header  60px (h-[60px]), sand-s, 1px black/5 rule, lockup left at
             page-x, one 13px grey line right · no nav, no footer
     split   two equal columns filling the rest of the viewport
     left    sand-s · flex items-center justify-center px-page py-6
             column max-w-[440px] · h1 36px display · 13px labels ·
             40px white fields (r 8) · 44px full-width pill
     right   photo, darkened · card w-[420px] r-8 bg-white/10 blur-[30px]
             padding 32 · quote 26/1.25 white · signature 40px tall ·
             name 14/500 · role 14 white/60 · small mark right · 1px
             white/15 rule · "Trusted by" 13 white/70 · compact logo
             marquee · bottom: 13px label + 40px seals, 30px up
   Ours: the form is the cal.com embed (loaded on click, dark, never
   inverted), the logo row is the platforms row, the seals are ours.
   ===================================================================== */

.page-book { background: var(--sand-s); }
.book-page {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  background: var(--sand-s);
  color: var(--black);
}

/* ---------- header ---------- */
.book-header {
  position: sticky;                 /* the reference page never scrolls; ours does once the
                                       calendar opens, so the lockup and the contact line stay put
                                       and the photo column can fill exactly 100svh - 60px below */
  top: 0;
  z-index: 5;
  display: flex;
  height: 60px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--px-page);
  border-bottom: 1px solid var(--k05);
  background: var(--sand-s);
}
.book-logo { display: block; width: 160px; flex-shrink: 0; }   /* brand minimum for the lockup */
.book-logo img { display: block; width: 100%; height: auto; }
.book-header-link {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  white-space: nowrap;
  transition: color var(--dur);
}
.book-header-link:hover { color: var(--black); }

/* ---------- split ---------- */
.book-split {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100svh - 60px);
}

/* left */
.book-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--px-page);
  background: var(--sand-s);
}
.book-form { display: flex; width: 100%; max-width: 440px; flex-direction: column; }
.book-h1 {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -.72px;
  color: var(--black);
}
.book-sub {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
}
.book-embed { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.book-open {
  width: 100%;
  height: 44px;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 8px;
  font-size: 15px;
}
.book-open .btn__ico { width: 28px; height: 28px; }
.book-open .btn__ico svg { width: 12px; height: 12px; }
.book-frame {
  overflow: hidden;
  border-radius: 12px;
  background: #101010;                       /* cal.com's dark theme ground; the embed is never colour-inverted */
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.book-iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  background: #101010;
  color-scheme: dark;
}
/* Lenis' recommended CSS blocks pointer events on iframes while smooth scrolling; the calendar must stay usable */
.lenis.lenis-smooth .book-frame iframe { pointer-events: auto; }
.book-fallback { font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--grey); }
.book-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--grey);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur);
}
.book-fallback a:hover { color: var(--black); }
.book-fallback svg { width: 12px; height: 12px; }
.book-expect { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.book-expect-label { color: var(--grey); }
.book-expect-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
}
.book-expect-list li { display: flex; gap: 12px; }
.book-expect-list li::before { content: ""; flex-shrink: 0; width: 14px; height: 1px; margin-top: 10px; background: var(--sand-l); }
.book-note {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg-dim-40);
}
.book-note a { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur); }
.book-note a:hover { color: var(--black); }

/* right */
.book-right { position: relative; background: var(--black); color: var(--white); }
/* exactly the viewport under the 60px sticky header: the page is 100svh tall like the
   reference, and the photo still fills the screen once the calendar makes it scroll */
.book-right-sticky { position: sticky; top: 60px; height: calc(100svh - 60px); overflow: hidden; }
.book-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* the reference photo column averages 98/255 luminance; this treatment lands
     studio-creator.jpg on ~90, dark enough for the frosted card, no darker */
  filter: brightness(.95);
}
.book-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.26) 100%);
}
.book-right-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px var(--px-page) 110px;
}
.book-card {
  width: 420px;
  max-width: 100%;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  color: var(--white);
}
.book-quote { color: var(--white); text-wrap: pretty; }
.book-cap { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
/* signature = name-text: the name in the display italic where Lance had a handwriting image */
.book-sig {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-optical-sizing: auto;
  font-weight: var(--fw-display);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--white);
}
.book-cap-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.book-name { font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-medium); line-height: 1.4; color: var(--white); }
.book-role { font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--w60); }
.book-mark { display: block; width: 40px; height: 40px; flex-shrink: 0; opacity: .9; }
.book-card-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--w15);
}
.book-ships-label { font-family: var(--font-body); font-size: 13px; line-height: 1; color: var(--w70); }
.book-ships {
  --marquee-opacity: .75;
  /* the cells are words, not logos: the fade has to be wide enough that a name
     leaving the card reads as a fade rather than a chopped word (~5 characters) */
  --marquee-fade: 76px;
  --marquee-dur: 36s;
  --logo-h: 18px;
  width: 100%;
}
.book-ships .marquee__cell { width: auto; height: 28px; padding: 0 16px; }
.book-ship {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--white);
}
.book-ship-glyph { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.book-rights {
  position: absolute;
  left: var(--px-page);
  right: var(--px-page);
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.book-rights-label { font-family: var(--font-body); font-size: 13px; line-height: 1; color: var(--w75); }
.book-seals { display: flex; align-items: center; gap: 16px; }
.book-seal { display: block; width: 40px; height: 40px; color: var(--white); opacity: .85; }

/* ---------- breakpoints (Lance: max-lp 1024 · max-bp 800 · max-tp 600) ---------- */
@media (max-width: 1024px) {
  .book-card { width: 380px; padding: 28px; }
  .book-quote { font-size: 22px; letter-spacing: -.44px; }
  .book-sig { font-size: 26px; }
}
@media (max-width: 800px) {
  .book-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .book-left { align-items: flex-start; padding: 40px var(--px-page) 56px; }
  .book-form { max-width: none; }
  .book-right-sticky { position: static; height: auto; min-height: 640px; }
  .book-right-in { position: relative; padding: 56px var(--px-page) 128px; }
  .book-card { width: 100%; }
  .book-rights { bottom: 36px; }
}
@media (max-width: 600px) {
  .book-h1 { font-size: 32px; letter-spacing: -.64px; }
  .book-iframe { height: 760px; }               /* cal.com's stacked mobile layout is taller */
  .book-card { padding: 24px; }
  .book-quote { font-size: 20px; letter-spacing: -.4px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .book-ships .marquee__track { animation: none !important; }
}

/* ---- src/css/46-blog.css ---- */
/* =====================================================================
   hypjam v2 · 46-blog.css — /blog (index) and /blog/<slug> (article)
   Structure and every number measured at 1920 on
     ref/pages/news.jpg                (index)
     ref/pages/hotels_aloft-dublin.jpg (long-form article)
   with scratchpad/pw/blog2/probe.js (luminance runs) — the figures are in
   the comments. Markup comes from tools/render_blog.py; copy from
   content/blog.json. Prefix: .blog- (+ the .md-* prose classes that
   tools/md.py emits, which only ever appear inside .blog-prose,
   .legal-* and nowhere else).

   INDEX (news.jpg)
     hero        full viewport (1080 at 1920×1080), image + shade,
                 mark 52 · h1 52/57.2 centred · sub 16/24, block bottom 100
     list        sand-m, pt 104 / pb 300
     filters     32px pills, 13px, 10px gap, centred; active = black on k06
     grid        3 × 594.67 (28 | 663 | 1297), col-gap 40, row-gap 80
     card        image 595×465 (32:25), caption mt 12, 16/24,
                 date black · title grey
   ARTICLE (hotels_aloft-dublin.jpg)
     hero        h1 42/46.2 at the gutter, lede 16/24 ≤622, media mt 40
     media       full width (28…1892), 16:9 (1864×1048), radius 16
     body        grid calc(50% − 28px) | 1fr → content column starts at 932
                 and is 960 wide, exactly like 40-pages.css's .page-split
     rail        label 11 caps grey · value 13, item pitch 53
     prose       h2 32 display · p 16/1.6 black · 26 between paragraphs
     more        3 × 603, gap 28, tile 16:9
   ===================================================================== */

/* ---------- page wrapper ---------- */
.blog {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* =====================================================================
   INDEX — hero
   mark 697–753 · h1 ink 805–912 (two lines, 57px apart) · sub 942–980 ·
   hero bottom 1080 → the block sits 100px off the bottom.
   ===================================================================== */
.blog-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;
  padding: 120px var(--px-page) 100px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  text-align: center;
}
.blog-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* content/blog.json: hero.background.kind = "video-still-blur" — the only
     honest source of imagery we have is a frame of our own hero video. */
  filter: blur(14px) saturate(.9);
  transform: scale(1.12);
}
.blog-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 34%, rgba(0,0,0,.72) 100%);
}
.blog-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 860px;
}
.blog-hero-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 41px;                  /* mark bottom 753 → h1 box top 794 */
  opacity: .9;
}
.blog-hero-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 52px;                      /* cap 35, lines 57.2 apart */
  line-height: 1.1;
  letter-spacing: -1.04px;
  color: var(--white);
  text-wrap: balance;
  max-width: 12em;
}
.blog-hero-sub {
  margin-top: 24px;
  max-width: 460px;                     /* measured line width 403 */
  font-size: 16px;
  line-height: 24px;
  color: var(--w70);
  text-wrap: pretty;
}

/* =====================================================================
   INDEX — list, filters, grid
   ===================================================================== */
.blog-list {
  background: var(--sand-m);
  color: var(--black);
  padding: 104px var(--px-page) 300px;  /* pills 1184 (=1080+104) · last card 2368 → 2691 */
}
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;                            /* text runs 28–30 apart, pill padding 10 */
  margin-bottom: 48px;                  /* pill bottom 1215 → grid 1262 */
}
.blog-filter {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur), background-color var(--dur);
}
.blog-filter:hover { color: var(--black); }
.blog-filter[aria-pressed="true"] {
  background: rgba(0,0,0,.06);          /* measured lum 210 on a 217 ground */
  color: var(--black);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;                     /* 623 → 663 */
  row-gap: 80px;                        /* card 525 tall; row 2 top 1867 */
}
.blog-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.blog-card[hidden] { display: none; }
.blog-card-art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 595 / 465;              /* 594.67 × 465 measured */
  background: var(--sand-s);
  overflow: hidden;
  transition: background-color var(--dur);
}
.blog-card:hover .blog-card-art { background: var(--white); }
.blog-art {
  width: 64%;
  max-width: 340px;
  height: auto;
  color: var(--grey-m);
  overflow: visible;
}
/* the two accent details inside every motif (CONTRACT §4: jam, rationed) */
.blog-art .art-jam-fill { fill: var(--jam); stroke: var(--jam); }
.blog-art .art-jam-stroke { stroke: var(--jam); }
.blog-card-cap {
  display: block;
  margin-top: 12px;                     /* image 1726 → caption box 1738 */
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.blog-card-date {
  font-weight: 500;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.blog-card-title { transition: color var(--dur); }
.blog-card:hover .blog-card-title { color: var(--black); }

/* =====================================================================
   ARTICLE — hero
   Reference h1 box top 214; ours carries a back link and a byline above it.
   ===================================================================== */
.blog-article { background: var(--white); }
.blog-art-hero { padding: 150px var(--px-page) 0; }
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.blog-back svg { flex-shrink: 0; }
.blog-back:hover { color: var(--black); }
.blog-art-eyebrow { display: block; margin-top: 40px; }
.blog-art-title {
  margin-top: 18px;
  max-width: 1100px;
  color: var(--black);
  text-wrap: pretty;
}
.blog-art-desc {
  margin-top: 24px;
  max-width: 622px;                     /* reference lede wraps at 650 − 28 */
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.blog-art-banner {
  display: grid;
  place-items: center;
  margin-top: 40px;                     /* lede box bottom 422 → media 460 */
  width: 100%;
  /* The reference plate is a 16:9 film (1864×1048). We have no article
     photography and will not borrow any, so the plate is a line-drawn band:
     the same full-bleed gesture at 1864×700 rather than 1048px of empty
     ground around a drawing. */
  aspect-ratio: 1864 / 700;
  border-radius: var(--r-img-lg);
  background: var(--sand-s);
  overflow: hidden;
}
/* the motifs draw inside the middle ~80% of their 240×160 viewBox, so the
   <svg> is sized off the banner's height */
.blog-art-banner .blog-art {
  width: auto;
  max-width: 92%;
  height: 66%;
  color: var(--grey-m);
}

/* =====================================================================
   ARTICLE — body: meta rail | prose
   ===================================================================== */
.blog-art-body {
  display: grid;
  grid-template-columns: calc(50% - var(--px-page)) minmax(0, 1fr);
  align-items: start;
  padding: 48px var(--px-page) 0;       /* media 1508 → rail/quote 1554 */
}
.blog-rail {
  position: sticky;
  top: 120px;
  padding-right: 40px;
  min-width: 0;
}
.blog-rail-list { margin: 0; }
.blog-rail-item + .blog-rail-item { margin-top: 22px; }   /* item pitch 53 */
.blog-rail-k {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: .72;                         /* reference ink floor 163 */
}
.blog-rail-v {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey-m);
}
.blog-rail-dim { color: var(--grey); }
.blog-rail-toc {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  counter-reset: toc;
}
.blog-rail-toc-i {
  counter-increment: toc;
  position: relative;
  padding-left: 22px;
  margin-top: 8px;
}
.blog-rail-toc-i::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--grey);
  opacity: .72;
  font-variant-numeric: tabular-nums;
}
.blog-rail-toc-a {
  display: inline-block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.blog-rail-toc-a:hover { color: var(--black); }
.blog-col { min-width: 0; }

/* ---------- prose (tools/md.py output) ---------- */
.blog-prose {
  font-size: 16px;
  line-height: 1.6;                     /* body lines 25.6 apart */
  color: var(--black);
}
.blog-prose > :first-child { margin-top: 0; }
.blog-prose > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 26px; text-wrap: pretty; }
.md-lede {
  font-size: 20px;
  line-height: 1.45;
  color: var(--grey-m);
  margin-bottom: 34px;
}
.md-h2 {
  margin: 64px 0 20px;                  /* sub-head ink bottom 1821 → body 1841 */
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 32px;                      /* cap 23 → ≈33 */
  line-height: 1.2;
  letter-spacing: -.64px;
  color: var(--black);
  scroll-margin-top: 120px;
  text-wrap: pretty;
}
.md-h3 {
  margin: 40px 0 12px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--black);
  scroll-margin-top: 120px;
}
.md-h4 {
  margin: 28px 0 8px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--black);
}
.md-strong { font-weight: 500; color: var(--black); }
.md-em { font-style: italic; }
.md-a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--k40);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur), text-decoration-color var(--dur);
}
.md-a:hover { color: var(--jam); text-decoration-color: var(--jam); }
.md-ul, .md-ol { margin: 0 0 26px; padding: 0; list-style: none; }
.md-li { position: relative; padding-left: 24px; margin-bottom: 10px; text-wrap: pretty; }
.md-ul > .md-li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sand-l);
}
.md-ol { counter-reset: mdol; }
.md-ol > .md-li { counter-increment: mdol; }
.md-ol > .md-li::before {
  content: counter(mdol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.md-quote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 1px solid var(--sand-m);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.44px;
  color: var(--black);
}
.md-hr { height: 1px; margin: 48px 0; border: 0; background: var(--k10); }
.md-code {
  font-family: var(--font-mono);
  font-size: .875em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--sand-s);
}
.md-pre {
  margin: 0 0 26px;
  padding: 16px 18px;
  border-radius: var(--r-panel);
  background: var(--sand-s);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}
.md-tbl { margin: 0 0 26px; width: 100%; overflow-x: auto; }
.md-table { width: 100%; border-collapse: collapse; text-align: left; }
.md-th {
  padding: 0 24px 10px 0;
  border-bottom: 1px solid var(--k10);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.md-td {
  padding: 12px 24px 12px 0;
  border-bottom: 1px solid var(--k10);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
  color: var(--black);
}
.md-table tr > :last-child { padding-right: 0; }
.md-qa .md-strong { display: inline-block; margin-bottom: 2px; }

/* ---------- the two facts under the prose ---------- */
.blog-facts {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--k10);
}
.blog-fact { display: flex; align-items: baseline; gap: 12px; }
.blog-fact-n {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.64px;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.blog-fact-l { font-size: 13px; line-height: 1.4; color: var(--grey); max-width: 260px; }
.blog-fact-rule { flex: 0 0 1px; align-self: stretch; background: var(--k10); }

/* =====================================================================
   ARTICLE — "More guides" (reference: 3 × 603, gap 28, tile 16:9)
   ===================================================================== */
.blog-more { padding: 120px var(--px-page) 0; }
.blog-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.blog-more-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
}
.blog-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.blog-story {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.blog-story-tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;                 /* 603 × 339 measured */
  border-radius: var(--r-img);
  background: var(--sand-s);
  overflow: hidden;
  transition: background-color var(--dur);
}
.blog-story:hover .blog-story-tile { background: var(--sand-m); }
.blog-story-tile .blog-art { width: 46%; max-width: 240px; color: var(--grey-m); }
.blog-story-quote {
  display: block;
  margin-top: 16px;                     /* image 3625 → attribution ink 3645 */
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: var(--black);
  text-wrap: pretty;
}
.blog-story-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}
.blog-story-meta { display: block; min-width: 0; }
.blog-story-cat { display: block; font-size: 13px; line-height: 1.35; color: var(--black); }
.blog-story-sub { display: block; font-size: 13px; line-height: 1.35; color: var(--grey); }
.blog-story-read { flex-shrink: 0; }
.blog-story:hover .blog-story-read { color: var(--black); }

/* =====================================================================
   ARTICLE — closing band
   ===================================================================== */
.blog-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
  padding: 120px var(--px-page);
  background: var(--sand-s);
  text-align: center;
}
.blog-cta-h2 { max-width: 720px; color: var(--black); text-wrap: balance; }
.blog-cta-p {
  margin: 20px 0 36px;
  max-width: 560px;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}

/* =====================================================================
   Responsive — Lance's breakpoints (DESIGN §4): 1200 / 1024 / 800 / 600
   ===================================================================== */
@media (max-width: 1200px) {
  .blog-grid { column-gap: 28px; row-gap: 56px; }
  .blog-art-title { max-width: none; }
}
@media (max-width: 1024px) {
  .blog-hero-h1 { font-size: 44px; letter-spacing: -.88px; }
  .blog-art-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding-top: 40px;
  }
  .blog-rail {
    position: static;
    padding-right: 0;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--k10);
  }
  .blog-rail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
  }
  .blog-rail-item + .blog-rail-item { margin-top: 0; }
  .blog-rail-item:last-child { grid-column: 1 / -1; }
  .blog-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .blog-list { padding-top: 72px; padding-bottom: 120px; }
  .blog-filters { margin-bottom: 36px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-art-hero { padding-top: 110px; }
  .blog-art-eyebrow { margin-top: 28px; }
  .blog-art-banner { margin-top: 28px; border-radius: 12px; }
  .blog-more { padding-top: 72px; }
  .blog-cta { margin-top: 72px; padding-top: 72px; padding-bottom: 72px; }
  .md-h2 { font-size: 26px; letter-spacing: -.52px; margin-top: 48px; }
  .md-lede { font-size: 18px; }
}
@media (max-width: 600px) {
  .blog-hero { min-height: 88vh; padding-bottom: 64px; }
  .blog-hero-mark { width: 44px; height: 44px; margin-bottom: 28px; }
  .blog-hero-h1 { font-size: 34px; letter-spacing: -.68px; }
  .blog-hero-sub { font-size: 14px; line-height: 1.5; margin-top: 18px; }
  .blog-list { padding-top: 56px; padding-bottom: 80px; }
  .blog-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(var(--px-page) * -1);
    padding-inline: var(--px-page);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .blog-card-cap { font-size: 14px; line-height: 21px; }
  .blog-art-banner { aspect-ratio: 4 / 3; }
  .blog-art-banner .blog-art { width: 52%; }
  .blog-art-desc { font-size: 14px; line-height: 1.5; }
  .blog-rail-list { grid-template-columns: minmax(0, 1fr); }
  .blog-prose { font-size: 15px; }
  .blog-facts { flex-direction: column; gap: 20px; }
  .blog-fact-rule { display: none; }
  .blog-fact-l { max-width: none; }
  .blog-more-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .blog-story-tile .blog-art { width: 40%; }
  .blog-cta-p { margin-bottom: 28px; }
}

/* ---- src/css/47-misc.css ---- */
/* =====================================================================
   hypjam v2 · 47-misc.css — /process, /faq, /agency, /join, /privacy, /terms
   Markup: tools/render_blog.py. Copy: content/{process,faq,agency,join,
   legal}.json. Prefixes: .proc- .faq- .agency- .join- .legal-
   (the .md-* prose classes are defined once in 46-blog.css and are reused
   by the legal pages).

   Measured at 1920 with scratchpad/pw/blog2/probe.js:
     ref/pages/product-docs.jpg          header 64 · sidebar 120–399 (white,
                                         hairline at 399) · content 400–1800
                                         on a tinted page · card padding 64
     ref/pages/privacy-policy.jpg        column centred 1086 (417…1503) ·
                                         h1 52 · intro 16/24 ≤670 grey ·
                                         section number at 0, body at +128 ·
                                         section heading 32 display · body black
   /faq, /agency and /join have no Lance page of their own; they use the
   shared inner-page vocabulary of 40-pages.css (hero 150/24, the split with
   the content column at 932, 108px numbered rows, the +/× accordion).
   ===================================================================== */

/* =====================================================================
   /process — the documentation page (Lance's /product-docs)
   Its own header and footer: the page deliberately leaves the marketing
   chrome behind, exactly as the reference does.
   ===================================================================== */
.proc {
  /* 120px gutters at 1920 (= (1920 − 1680) / 2), never less than the page gutter */
  --proc-x: max(var(--px-page), calc((100% - 1680px) / 2));
  --proc-head-h: 64px;
  display: block;
  background: var(--sand-s);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- docs header ---------- */
.proc-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--proc-head-h);
  padding: 0 var(--proc-x);
  background: var(--white);
  border-bottom: 1px solid var(--k10);
}
.proc-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
}
.proc-home img { width: 32px; height: 32px; }
.proc-head-links { display: flex; align-items: center; gap: 8px; }
.proc-head-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur), background-color var(--dur);
}
.proc-head-link:hover { color: var(--black); background: rgba(0,0,0,.05); }
.proc-head-link--solid { background: var(--black); color: var(--white); }
.proc-head-link--solid:hover { background: var(--black); color: var(--white); opacity: .88; }

/* ---------- shell: sidebar | main ---------- */
.proc-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);   /* 120–399 | 400–1800 */
  align-items: start;
  padding: 0 var(--proc-x);
}
.proc-side {
  position: sticky;
  top: var(--proc-head-h);
  align-self: stretch;
  min-height: calc(100vh - var(--proc-head-h));
  padding: 32px 24px 64px 0;
  background: var(--white);
  border-right: 1px solid var(--k10);
}
.proc-side-nav { display: flex; flex-direction: column; }
.proc-side-group {
  margin: 24px 0 8px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: .72;
}
.proc-side-group:first-child { margin-top: 0; }
.proc-side-link {
  position: relative;
  display: block;
  padding: 6px 0 6px 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.proc-side-link::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sand-l);
  transition: background-color var(--dur);
}
.proc-side-link:hover { color: var(--black); }
.proc-side-link.is-active { color: var(--black); }
.proc-side-link.is-active::before { background: var(--jam); }

/* the content cards start hard against the sidebar hairline (400 at 1920)
   and hold their copy 64px in, exactly as the reference's do */
.proc-main { min-width: 0; padding: 40px 0 96px; }

/* ---------- shared section furniture ---------- */
.proc-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jam);
}
.proc-h1 {
  /* the reference docs page drops the display serif for a heavy sans — the
     one place on the site where documentation is signalled by the type */
  margin: 0;
  max-width: 14ch;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -1.44px;
  color: var(--black);
}
.proc-h2 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.96px;
  color: var(--black);
  scroll-margin-top: calc(var(--proc-head-h) + 16px);
}
.proc-h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--black); }
.proc-h4 { margin: 22px 0 8px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--black); }
.proc-h4:first-child { margin-top: 0; }
.proc-lead { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--grey); text-wrap: pretty; }
.proc-p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--grey); }
.proc-note { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey); }

.proc-hero,
.proc-library,
.proc-band,
.proc-ref,
.proc-faqs,
.proc-support,
.proc-week-card {
  margin-bottom: 24px;
  padding: 48px 64px;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--k08);
  scroll-margin-top: calc(var(--proc-head-h) + 16px);
}
.proc-week { display: block; scroll-margin-top: calc(var(--proc-head-h) + 16px); }
.proc-week-card { padding: 0; overflow: hidden; border-top: 2px solid var(--jam); }

/* ---------- hero ---------- */
.proc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: 48px;
  padding: 56px 64px;
}
.proc-hero-text { min-width: 0; }
.proc-hero-text .proc-lead { margin-top: 20px; }
.proc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.proc-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--sand-m);
  border-radius: var(--r-pill);
  font-size: 13px;
  line-height: 1;
  color: var(--black);
  text-decoration: none;
  transition: background-color var(--dur), border-color var(--dur);
}
.proc-pill:hover { background: var(--sand-s); border-color: var(--sand-l); }

/* the hero visual: the home hero's HUD card, on its own dark plate, because
   the five product panels (src/panels) are drawn for a dark ground */
.proc-hero-art {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--black);
}
.proc-hud {
  width: 100%;
  max-width: var(--hud-card-w);
  padding: var(--hud-card-pad);
  border-radius: var(--r-card);
  background: var(--hud-card-bg);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--hud-card-blur));
  backdrop-filter: blur(var(--hud-card-blur));
  color: var(--white);
}
.proc-hud-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--fs-card-title);
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--white);
}
.proc-hud-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.35; color: var(--sand-l); }
.proc-hud-hr { height: .5px; margin: 18px 0; background: var(--grey-60); }
.proc-hud-panel {
  position: relative;
  width: 100%;
  height: var(--hud-panel-h);
  border-radius: var(--r-panel);
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

/* ---------- library cards ---------- */
.proc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.proc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 20px;
  border: 1px solid var(--k10);
  border-radius: 10px;
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur), background-color var(--dur);
}
.proc-card:hover { border-color: var(--sand-l); background: var(--sand-s); }
.proc-card-h3 { margin: 14px 0 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; color: var(--black); }
.proc-card-p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey); }
.proc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1;
  color: var(--jam);
}
.proc-card-link svg { width: 11px; height: 11px; }

.proc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--sand-s);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
}
.proc-tag--jam { background: var(--jam-10); color: var(--jam); }

/* ---------- week card: head + topic rows ---------- */
.proc-week-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 64px 36px;
}
.proc-week-text { min-width: 0; }
.proc-week-h2 {
  margin: 14px 0 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -1.02px;
  color: var(--black);
}
.proc-week-text .proc-lead { margin-top: 14px; }
.proc-count {
  flex-shrink: 0;
  width: 200px;
  padding: 18px 20px;
  border: 1px solid var(--k10);
  border-radius: 10px;
  background: var(--white);
}
.proc-count-ico { display: block; color: var(--grey); }
.proc-count-n { display: block; margin-top: 12px; font-size: 22px; line-height: 1; font-weight: 600; color: var(--black); }
.proc-count-l { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--grey); }

.proc-topics { border-top: 1px solid var(--k08); }
.proc-topic {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 64px;
  border-bottom: 1px solid var(--k08);
}
.proc-topic:last-child { border-bottom: 0; }
.proc-topic-l { min-width: 0; }
.proc-topic-r { min-width: 0; }
.proc-topic-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--grey); }
.proc-topic-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1;
  color: var(--jam);
  text-decoration: none;
}
.proc-topic-link svg { width: 11px; height: 11px; }

.proc-ul, .proc-ol { margin: 0 0 6px; padding: 0; list-style: none; }
.proc-ul-i, .proc-ol-i {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
}
.proc-check { flex-shrink: 0; margin-top: 2px; color: var(--jam); }
.proc-check svg { display: block; }
.proc-n {
  flex-shrink: 0;
  width: 18px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--jam);
  font-variant-numeric: tabular-nums;
}

/* ---------- table band ---------- */
.proc-tbl { margin-top: 28px; width: 100%; overflow-x: auto; }
.proc-table { width: 100%; border-collapse: collapse; text-align: left; }
.proc-th {
  padding: 0 20px 10px 0;
  border-bottom: 1px solid var(--k10);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.proc-td {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--k08);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
  color: var(--black);
}
.proc-table tr > :first-child { font-weight: 500; white-space: nowrap; }
.proc-table tr > :last-child { padding-right: 0; }

/* ---------- "what we need from you" cards ---------- */
.proc-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.proc-ref-card { padding: 22px; border: 1px solid var(--k10); border-radius: 10px; }
.proc-ref-ico { display: block; color: var(--jam); }
.proc-ref-h3 { margin: 14px 0 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--black); }
.proc-ref-p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey); }

/* ---------- packages ---------- */
.proc-pkgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.proc-pkg { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--k10); border-radius: 10px; }
.proc-pkg-name { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 600; color: var(--black); }
.proc-pkg-price {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.64px;
  color: var(--black);
}
.proc-pkg-videos { margin: 8px 0 18px; font-size: 13px; line-height: 1.4; color: var(--grey); }
.proc-pkg-list { margin-top: auto; padding-top: 4px; border-top: 1px solid var(--k08); }
.proc-pkg-best { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey); }
.proc-pkg-best-k {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: .72;
}

/* ---------- faq grid + support ---------- */
.proc-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 28px;
}
.proc-faq-q { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--black); }
.proc-faq-a { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--grey); }
.proc-support-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--k10);
  border-radius: 10px;
  background: var(--sand-s);
}
.proc-support-mail {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--k20);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur);
}
.proc-support-mail:hover { text-decoration-color: var(--jam); }
.proc-support-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grey); }

/* ---------- docs footer ---------- */
.proc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px var(--proc-x);
  border-top: 1px solid var(--k10);
  background: var(--white);
}
.proc-foot-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grey); }
.proc-foot-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--black);
  text-decoration: none;
}
.proc-foot-home svg { width: 11px; height: 11px; }

@media (max-width: 1200px) {
  .proc-cards, .proc-ref-grid, .proc-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc-hero { grid-template-columns: minmax(0, 1fr); }
  .proc-hero-art { order: 2; }
}
@media (max-width: 1024px) {
  .proc-shell { grid-template-columns: minmax(0, 1fr); }
  .proc-side {
    position: static;
    min-height: 0;
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--k10);
    box-shadow: none;
    clip-path: none;
    background: transparent;
  }
  .proc-side-nav { flex-flow: row wrap; gap: 0 8px; align-items: center; }
  .proc-side-group { width: 100%; margin: 12px 0 4px; }
  .proc-side-link { padding: 6px 0 6px 18px; }
  .proc-topic { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 800px) {
  .proc-hero, .proc-library, .proc-band, .proc-ref, .proc-faqs, .proc-support { padding: 32px 24px; }
  .proc-week-card { padding: 0; }
  .proc-week-head { flex-direction: column; padding: 32px 24px 24px; }
  .proc-count { width: 100%; }
  .proc-topic { padding: 24px; }
  .proc-h1 { font-size: 36px; letter-spacing: -1.08px; max-width: none; }
  .proc-h2 { font-size: 26px; letter-spacing: -.78px; }
  .proc-week-h2 { font-size: 28px; letter-spacing: -.84px; }
  .proc-cards, .proc-ref-grid, .proc-pkgs, .proc-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .proc-main { padding-top: 24px; padding-bottom: 64px; }
}
@media (max-width: 600px) {
  .proc-h1 { font-size: 30px; letter-spacing: -.9px; }
  .proc-hero-art { padding: 16px; }
  .proc-head-link { padding: 0 10px; }
  .proc-home span { display: none; }
}

/* =====================================================================
   /faq — two accordion groups, side nav on the left
   ===================================================================== */
.faq {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.faq-hero { padding: 150px var(--px-page) 0; }        /* 40-pages: .page-section--hero */
.faq-eyebrow { display: block; }
.faq-h1 { margin-top: 28px; max-width: 640px; color: var(--black); }
.faq-lead {
  margin-top: 20px;
  max-width: 600px;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.faq-body {
  display: grid;
  grid-template-columns: calc(50% - var(--px-page)) minmax(0, 1fr);   /* content at 932 */
  align-items: start;
  padding: 88px var(--px-page) 120px;
}
.faq-side { position: sticky; top: 120px; padding-right: 40px; }
.faq-side-nav { display: flex; flex-direction: column; align-items: flex-start; }
.faq-side-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.faq-side-link:hover, .faq-side-link.is-active { color: var(--black); }
.faq-side-n { font-size: 11px; line-height: 1; color: var(--grey); font-variant-numeric: tabular-nums; }
.faq-groups { min-width: 0; }
.faq-group + .faq-group { margin-top: 88px; }
.faq-group { scroll-margin-top: 120px; }
.faq-h2 {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--black);
}

/* the +/× accordion of 40-pages.css .page-faq, with this markup's spans */
.faq-item, .join-item { display: block; border-bottom: 1px solid var(--k10); }
.faq-q, .join-q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--grey);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur);
}
.faq-q::-webkit-details-marker, .join-q::-webkit-details-marker { display: none; }
.faq-q:hover, .join-q:hover { color: var(--black); }
.faq-q:focus-visible, .join-q:focus-visible { outline: 2px solid var(--jam); outline-offset: 3px; border-radius: 2px; }
.faq-q-text, .join-q-text { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.faq-plus, .join-plus {
  flex-shrink: 0;
  width: 16px;
  text-align: right;
  font-size: 15px;
  line-height: 20px;
  color: var(--grey);
}
.faq-plus::before, .join-plus::before { content: "+"; }
.faq-item[open] > .faq-q, .join-item[open] > .join-q { color: var(--black); font-weight: 500; }
.faq-item[open] .faq-plus::before, .join-item[open] .join-plus::before { content: "×"; }
.faq-a, .join-a { padding: 0 0 32px; max-width: 640px; }
.faq-a-p, .join-a-p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.faq-a-link { margin-top: 14px; }

.faq-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px var(--px-page);
  background: var(--sand-s);
  text-align: center;
}
.faq-cta-h2, .agency-cta-h2 { max-width: 720px; color: var(--black); text-wrap: balance; }
.faq-cta-p, .agency-cta-p {
  margin: 20px 0 36px;
  max-width: 560px;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.faq-cta-btns, .agency-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* =====================================================================
   /agency
   ===================================================================== */
.agency {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.agency-hero { padding: 150px var(--px-page) 24px; }
.agency-hero-eyebrow { display: block; }
.agency-h1 { margin-top: 28px; max-width: 900px; color: var(--black); }
.agency-intro {
  margin-top: 20px;
  max-width: 600px;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.agency-hero .btn { margin-top: 48px; }

.agency-editorial { padding: 56px var(--px-page) 120px; }
.agency-drawing {
  display: block;
  width: 100%;
  aspect-ratio: 1864 / 700;
  border-radius: var(--r-img-lg);
  background: var(--sand-s);
  overflow: hidden;
}
.agency-drawing svg { display: block; width: 100%; height: 100%; }
/* src/drawing/hq.svg ships the way the hero engine wants it: a full-canvas
   black rect it removes at runtime, 10-unit strokes it normalises, and the
   five detailed interiors it draws in on the dive. As a still editorial
   plate the page needs the exterior only, at 1px. */
.agency-drawing svg > g > rect:first-child { display: none; }
.agency-drawing svg [id^="#"]:not([id$="-fade"]) { display: none; }
.agency-drawing svg :is(path, line, rect, circle, ellipse, polyline, polygon) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  stroke: var(--line);
}
.agency-facts-row {
  display: grid;
  grid-template-columns: calc(50% - var(--px-page)) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 28px;
}
.agency-caption { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--grey); }
.agency-facts { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.agency-fact { display: flex; flex-direction: column; gap: 6px; }
.agency-fact-k {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: .72;
}
.agency-fact-v { font-size: 15px; line-height: 1.4; color: var(--black); text-decoration: none; }
a.agency-fact-v {
  text-decoration: underline;
  text-decoration-color: var(--k20);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur);
}
a.agency-fact-v:hover { text-decoration-color: var(--jam); }

/* eyebrow left · body starting at 932, like 40-pages.css .page-split */
.agency-sec, .join-sec {
  display: grid;
  grid-template-columns: calc(50% - var(--px-page)) minmax(0, 1fr);
  align-items: start;
  padding: 0 var(--px-page) 120px;
  scroll-margin-top: 120px;
}
.agency-eyebrow, .join-eyebrow { padding-top: 14px; }
.agency-sec-body, .join-sec-body { min-width: 0; }
.agency-h2, .join-h2 {
  margin: 0;
  max-width: var(--max-h2);
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--black);
  text-wrap: pretty;
}
.agency-p, .join-p {
  margin: 28px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.agency-p + .agency-p { margin-top: 20px; }

/* numbered rows — 40-pages.css .page-list geometry (108px pitch) */
.agency-rows, .join-rows {
  grid-column: 1 / -1;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--k10);
}
.agency-row, .join-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  align-items: center;
  min-height: 108px;
  padding: 24px 0;
  border-top: 1px solid var(--k10);
}
.agency-row-n, .join-row-n {
  grid-column: 1 / 2;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.agency-row-name, .join-row-name {
  grid-column: 2 / 6;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.52px;
  color: var(--black);
}
.agency-row-blurb, .join-row-blurb { grid-column: 6 / 13; font-size: 13px; line-height: 1.4; color: var(--grey); }

.agency-founder {
  display: grid;
  grid-template-columns: calc(50% - var(--px-page)) minmax(0, 1fr);
  align-items: start;
  padding: 120px var(--px-page);
  background: var(--sand-s);
}
.agency-founder-body { margin: 0; min-width: 0; }
.agency-quote { margin: 0; max-width: 840px; color: var(--black); }
.agency-founder-cap { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.agency-founder-name { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--black); }
.agency-founder-role { font-size: 13px; line-height: 1.35; color: var(--grey); }

.agency-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px var(--px-page) 140px;
  text-align: center;
}
.agency-cta-art { width: 280px; height: auto; margin-bottom: 32px; opacity: .9; }
.agency-cta-art.is-missing { display: none; }

@media (max-width: 1024px) {
  .faq-body, .agency-facts-row, .agency-sec, .join-sec, .agency-founder {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .faq-side { position: static; padding-right: 0; padding-bottom: 24px; }
  .faq-side-nav { flex-direction: row; gap: 20px; }
  .agency-eyebrow, .join-eyebrow { padding-top: 0; }
  .agency-rows, .join-rows { grid-column: 1; }
  .agency-row-name, .join-row-name { grid-column: 2 / 7; }
  .agency-row-blurb, .join-row-blurb { grid-column: 7 / 13; }
}
@media (max-width: 800px) {
  .faq-hero, .agency-hero { padding-top: 110px; }
  .faq-body { padding-top: 56px; padding-bottom: 64px; }
  .faq-group + .faq-group { margin-top: 56px; }
  .faq-cta, .agency-founder { padding-top: 64px; padding-bottom: 64px; }
  .agency-editorial { padding-top: 40px; padding-bottom: 64px; }
  .agency-sec, .join-sec { padding-bottom: 64px; }
  .agency-cta { padding: 64px var(--px-page) 80px; }
  .agency-row, .join-row {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    min-height: 0;
    padding: 22px 0;
  }
  .agency-row-n, .join-row-n { grid-column: 1; grid-row: 1; }
  .agency-row-name, .join-row-name { grid-column: 2; grid-row: 1; font-size: 22px; letter-spacing: -.44px; }
  .agency-row-blurb, .join-row-blurb { grid-column: 2; grid-row: 2; }
  .agency-rows, .join-rows { margin-top: 32px; }
  .agency-drawing { aspect-ratio: 3 / 2; border-radius: 12px; }
}
@media (max-width: 600px) {
  .faq-lead, .agency-intro, .agency-p, .join-p { font-size: 14px; line-height: 1.5; }
  .faq-side-nav { flex-wrap: wrap; gap: 12px; }
  .agency-facts { gap: 24px 32px; }
  .agency-cta-art { width: 200px; }
  .faq-q, .join-q { padding: 18px 0; font-size: 15px; }
}

/* =====================================================================
   /join
   ===================================================================== */
.join {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.join-hero { padding: 150px var(--px-page) 96px; }
.join-hero-eyebrow { display: block; }
.join-h1 { margin-top: 28px; max-width: 800px; color: var(--black); }
.join-sub {
  margin-top: 20px;
  max-width: 600px;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}
.join-hero .btn { margin-top: 48px; }
.join-pay { padding-top: 120px; background: var(--sand-s); }
.join-look { margin: 32px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--k10); }
.join-look-i {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--k10);
  font-size: 16px;
  line-height: 1.4;
  color: var(--black);
  text-wrap: pretty;
}
.join-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--jam);
}
.join-sec-body > .join-h2 + [class$="-item"] { margin-top: 28px; }
.join-sec-body[data-accordion] .join-item:first-of-type { margin-top: 28px; border-top: 1px solid var(--k10); }
.join-checklist { margin: 28px 0 0; padding: 0; list-style: none; }
.join-check-i {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey);
}
.join-check { flex-shrink: 0; margin-top: 3px; color: var(--jam); }
.join-check svg { display: block; }
.join-apply .btn { margin-top: 36px; }
.join-privacy { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey); }
.join-privacy-a {
  color: var(--grey);
  text-decoration: underline;
  text-decoration-color: var(--k20);
  text-underline-offset: 3px;
  transition: color var(--dur);
}
.join-privacy-a:hover { color: var(--black); }

@media (max-width: 800px) {
  .join-hero { padding-top: 110px; padding-bottom: 64px; }
  .join-pay { padding-top: 64px; }
}

/* =====================================================================
   /privacy and /terms — the legal template
   Column centred 1086 (417…1503 at 1920); intro ≤670 grey; each "## " is a
   numbered section: number in the margin, body indented 128.
   ===================================================================== */
.legal {
  display: block;
  padding: 150px var(--px-page) 140px;
  background: var(--sand-s);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.legal-wrap { width: 100%; max-width: 1086px; margin: 0 auto; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.legal-back:hover { color: var(--black); }
.legal-eyebrow { display: block; margin-top: 36px; }
.legal-h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  font-size: 52px;                      /* measured: ink 251–302, cap 36 */
  line-height: 1.05;
  letter-spacing: -1.04px;
  color: var(--black);
}
.legal-updated { margin: 18px 0 0; font-size: 13px; line-height: 1.4; color: var(--grey); }
.legal-related { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
.legal-rel-a {
  font-size: 13px;
  line-height: 1;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--dur);
}
.legal-rel-a:hover { color: var(--black); }
.legal-rel-a[aria-current="page"] { color: var(--black); }
.legal-intro {
  margin-top: 40px;
  max-width: 670px;                     /* measured 417…1087 */
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
}
.legal-intro .md-p { margin-bottom: 20px; }
.legal-intro .md-p:last-child { margin-bottom: 0; }
.legal-secs { margin-top: 56px; border-top: 1px solid var(--sand-l-60); }
.legal-sec {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  padding: 56px 0 0;
}
.legal-num {
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.legal-sec-body {
  min-width: 0;
  max-width: 670px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
}
/* the .md-* prose classes come from 46-blog.css; the legal page tightens them */
.legal-sec-body > .md-h2 { margin: 0 0 20px; font-size: 32px; letter-spacing: -.64px; }
.legal-sec-body .md-h3 { margin: 32px 0 8px; font-size: 16px; font-weight: 500; }
.legal-sec-body .md-h4 { margin: 24px 0 6px; }
.legal-sec-body .md-p { margin-bottom: 20px; }
.legal-sec-body .md-li { margin-bottom: 8px; }
.legal-sec-body .md-ul, .legal-sec-body .md-ol { margin-bottom: 20px; }
.legal-sec-body .md-strong { font-weight: 500; }
.legal-sec-body > :last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .legal { padding-top: 110px; padding-bottom: 80px; }
  .legal-h1 { font-size: 40px; letter-spacing: -.8px; }
  .legal-intro { margin-top: 32px; }
  .legal-secs { margin-top: 40px; }
  .legal-sec { grid-template-columns: minmax(0, 1fr); padding-top: 40px; row-gap: 10px; }
  .legal-sec-body > .md-h2 { font-size: 26px; letter-spacing: -.52px; }
}
@media (max-width: 600px) {
  .legal-h1 { font-size: 34px; letter-spacing: -.68px; }
  .legal-intro, .legal-sec-body { font-size: 15px; }
}

/* ---- src/css/90-footer.css ---- */
/* ==========================================================================
   90-footer.css — one-to-one port of Lance's <footer> (ref/shots/s31-s32,
   ref/index.html): pt 128 / pb 40, 14px leading-none, headline 42/1.1/-.84,
   36px CTA pill, 1px white/15 rule with 64px margins, left column flex 1.2 +
   six-column grid flex 2 (gap-x clamp(.75rem,2.5vw,2.5rem), gap-y 40),
   20px column gaps, bottom row mt 64 with the 280px HQ drawing and a badge.
   Breakpoints: max-lp 1024, max-bp 800, max-tp 600.
   ========================================================================== */

.foot {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 128px var(--px-page, 28px) 40px;
  background-color: #000;
  color: #fff;
  font-family: var(--font-body, 'Geist', Arial, Helvetica, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 800px) { .foot { padding-top: 80px; } }

.foot-top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
@media (max-width: 800px) { .foot-top { flex-direction: column; align-items: flex-start; gap: 32px; } }

.foot-headline {
  margin: 0;
  font-family: var(--font-display, 'Newsreader', Georgia, 'Times New Roman', serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.84px;
  color: #fff;
}
@media (max-width: 600px) { .foot-headline { font-size: 28px; letter-spacing: -0.56px; } }

.foot-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 36px;
  gap: 12px;
  padding: 0 6px 0 18px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.foot-cta:hover { background-color: rgba(255, 255, 255, .24); color: var(--sand-m, #dad9d4); }
.foot-cta:focus-visible,
.foot-link:focus-visible,
.foot-col-title:focus-visible,
.foot-logo-link:focus-visible { outline: 2px solid var(--jam, #ff6f1f); outline-offset: 2px; }
.foot-cta-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: var(--jam, #ff6f1f);
  color: #000;
}
.foot-cta-circle svg { display: block; flex-shrink: 0; }

.foot-rule { margin: 64px 0; height: 1px; width: 100%; background-color: rgba(255, 255, 255, .15); }
@media (max-width: 800px) { .foot-rule { margin: 40px 0; } }

.foot-body { display: flex; width: 100%; gap: 48px; }
@media (max-width: 1024px) { .foot-body { flex-direction: column; gap: 48px; } }

.foot-brand { min-width: 0; flex: 1.2; }
.foot-logo-link { display: inline-block; }
.foot-logo { display: block; width: 184px; height: auto; }
@media (max-width: 800px) { .foot-logo { width: 160px; } }

.foot-grid {
  display: grid;
  flex: 2;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 2.5vw, 2.5rem);
  row-gap: 40px;
}
@media (max-width: 1024px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.foot-col { display: flex; min-width: 0; flex-direction: column; gap: 20px; }
.foot-col-title {
  margin: 0;
  color: var(--grey, #7b7b7b);
  text-decoration: none;
  transition: color .15s;
}
a.foot-col-title:hover { color: var(--sand-l, #bcbbb4); }
.foot-link { color: #fff; text-decoration: none; transition: color .15s; }
.foot-col--dim .foot-link { color: rgba(255, 255, 255, .7); }
.foot-link:hover { color: var(--sand-l, #bcbbb4); }

.foot-bottom {
  margin-top: 64px;
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
@media (max-width: 800px) { .foot-bottom { margin-top: 40px; flex-direction: column; align-items: flex-start; gap: 32px; } }

.foot-left { display: flex; min-width: 0; flex-direction: column; gap: 20px; }
.foot-hq-slot { display: block; width: 280px; max-width: 100%; min-height: 120px; }
.foot-hq { display: block; width: 280px; max-width: 100%; height: auto; }
.foot-hq.is-missing { visibility: hidden; } /* keeps the box until the drawing agent's file lands */
@media (max-width: 800px) { .foot-hq-slot { width: 200px; min-height: 86px; } .foot-hq { width: 200px; } }
.foot-copy { margin: 0; line-height: 1.5; color: var(--grey, #7b7b7b); }

.foot-badge { display: flex; flex-shrink: 0; align-items: center; gap: 16px; color: var(--grey, #7b7b7b); }
.foot-seal { display: block; width: 36px; height: 36px; flex-shrink: 0; }
.foot-seal svg { display: block; width: 100%; height: 100%; }
.foot-badge-text { font-size: 14px; line-height: 1; }

/* ---- src/panels/_panels.css ---- */
/* ==========================================================================
   Product panels — shared primitives (see src/panels/SPEC.md)
   Everything is scoped under .pnl. Tokens fall back to CONTRACT §4 values
   until src/css/00-tokens.css lands.
   ========================================================================== */

.pnl {
  --pnl-ink: #fff;
  --pnl-ink-2: #d9d9d9;
  --pnl-mute: #a1a09a;
  --pnl-mute-2: rgba(255, 255, 255, 0.45);
  --pnl-line: rgba(255, 255, 255, 0.10);
  --pnl-fill: rgba(255, 255, 255, 0.06);
  --pnl-fill-2: rgba(255, 255, 255, 0.12);
  --pnl-stroke: rgba(255, 255, 255, 0.14);
  --pnl-jam: var(--jam, #ff6f1f);
  --pnl-jam-a: rgba(255, 111, 31, 0.18);
  --pnl-mono-stack: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body, "Geist", system-ui, -apple-system, sans-serif);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--pnl-ink-2);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  pointer-events: none;
}
.pnl,
.pnl * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.pnl svg {
  display: block;
}

/* --- beats: stacked states that crossfade ------------------------------ */
.pnl-beat {
  position: absolute;
  inset: 0;
}

/* --- text ---------------------------------------------------------------- */
.pnl-label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--pnl-mute);
}
.pnl-mono {
  font-family: var(--pnl-mono-stack);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--pnl-mute);
  white-space: nowrap;
}
.pnl-mono--ink {
  color: var(--pnl-ink);
}
.pnl-ink {
  color: var(--pnl-ink);
}
.pnl-mute {
  color: var(--pnl-mute);
}

/* --- head: 18px title row -------------------------------------------------- */
.pnl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  height: 18px;
}
.pnl-head__t {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--pnl-ink);
}

/* --- rows ---------------------------------------------------------------- */
.pnl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  border-bottom: 0.5px solid var(--pnl-line);
}
.pnl-row--tall {
  min-height: 34px;
}
.pnl-row--bare {
  border-bottom: 0;
}
.pnl-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
.pnl-cell--grow {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pnl-cell--end {
  margin-left: auto;
  justify-content: flex-end;
}
.pnl-hr {
  height: 0.5px;
  width: 100%;
  background: var(--pnl-line);
}

/* --- chips ---------------------------------------------------------------- */
.pnl-chip {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--pnl-fill-2);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pnl-ink-2);
  white-space: nowrap;
}
.pnl-chip--jam {
  background: var(--pnl-jam-a);
  color: var(--pnl-jam);
}
.pnl-chip--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--pnl-stroke);
  color: var(--pnl-mute);
}

/* --- avatar: line-drawn head and shoulders -------------------------------- */
.pnl-avatar {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.pnl-avatar svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pnl-avatar--lg {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
.pnl-avatar--lg svg {
  width: 15px;
  height: 15px;
}

/* --- bubble + caret --------------------------------------------------------- */
.pnl-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--pnl-fill);
  box-shadow: inset 0 0 0 1px var(--pnl-stroke);
  font-size: 13px;
  line-height: 1.35;
  color: var(--pnl-ink);
}
.pnl-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--pnl-ink);
  animation: pnl-blink 1s steps(1, end) infinite;
}
.pnl-cursor[hidden] {
  display: none;
}
@keyframes pnl-blink {
  50% { opacity: 0; }
}

/* --- status line + spinner ------------------------------------------------ */
.pnl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--pnl-mute);
  white-space: nowrap;
}
.pnl-spin {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  border-top-color: transparent;
  opacity: 0.8;
  animation: pnl-spin 0.9s linear infinite;
}
@keyframes pnl-spin {
  to { transform: rotate(360deg); }
}

/* --- tick (draws via stroke-dashoffset; path length is 12) ---------------- */
.pnl-tick {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke: var(--pnl-jam);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.pnl-tick path {
  stroke-dasharray: 12;
  stroke-dashoffset: 0;
}
.pnl-tick--mute {
  stroke: var(--pnl-mute);
}

/* --- live dot ---------------------------------------------------------------- */
.pnl-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--pnl-jam);
  animation: pnl-pulse 1.2s ease-in-out infinite;
}
.pnl-dot--still {
  animation: none;
  opacity: 0.55;
}
@keyframes pnl-pulse {
  50% { opacity: 0.35; }
}

/* --- toggle -------------------------------------------------------------------- */
.pnl-toggle {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 15px;
  flex: 0 0 26px;
  border-radius: 9999px;
  background: var(--pnl-fill-2);
  transition: background 0.28s ease-in-out;
}
.pnl-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pnl-ink);
  transition: transform 0.28s ease-in-out;
}
.pnl-toggle[data-on="true"] {
  background: var(--pnl-jam);
}
.pnl-toggle[data-on="true"]::after {
  transform: translateX(11px);
}

/* --- progress bar ---------------------------------------------------------------- */
.pnl-bar {
  position: relative;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background: var(--pnl-fill-2);
  overflow: hidden;
}
.pnl-bar__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--pnl-ink);
}
.pnl-bar--jam .pnl-bar__fill {
  background: var(--pnl-jam);
}

/* --- phone frame ------------------------------------------------------------------ */
.pnl-phone {
  position: relative;
  width: 70px;
  height: 140px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.pnl-phone::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

/* --- clipped list (scrolls its track; bottom fade like reference panel 4) ----------- */
.pnl-clip {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
}
.pnl-clip__track {
  will-change: transform;
}

/* --- stat tile ------------------------------------------------------------------------ */
.pnl-tile {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--pnl-fill);
}
.pnl-tile__num {
  font-size: 20px;
  line-height: 1.1;
  color: var(--pnl-ink);
  font-variant-numeric: tabular-nums;
}
.pnl-tile__lbl {
  margin-top: 4px;
  font-family: var(--pnl-mono-stack);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pnl-mute);
}

/* --- button ------------------------------------------------------------------------------ */
.pnl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  width: 100%;
  border-radius: 6px;
  background: var(--pnl-fill);
  font-size: 13px;
  color: var(--pnl-mute);
}

/* --- inline icon ----------------------------------------------------------------------------- */
.pnl-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* --- reduced motion ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pnl-cursor,
  .pnl-spin,
  .pnl-dot {
    animation: none;
  }
  .pnl-toggle,
  .pnl-toggle::after {
    transition-duration: 0s;
  }
}

/* ---- src/panels/brief.css ---- */
/* ==========================================================================
   Panel 1 — brief (321×184). Layout only; primitives live in _panels.css.
   Static state = final state (beat B visible, beat A hidden).
   ========================================================================== */

/* Beat A: the client message ------------------------------------------- */
.pnl-brief__msg {
  opacity: 0;
}
.pnl-brief__from {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
}
.pnl-brief__bubble {
  position: absolute;
  top: 24px;
  left: 0;
  max-width: 292px;
}
.pnl-brief__text span {
  display: inline;
}
.pnl-brief__status {
  position: absolute;
  top: 86px;
  left: 0;
}

/* Beat B: the brief card ------------------------------------------------ */
.pnl-brief__card {
  display: flex;
  flex-direction: column;
}
.pnl-brief__head {
  margin-bottom: 6px;
}
.pnl-brief__line {
  min-height: 28px;
}
.pnl-brief__key {
  width: 76px;
  flex: 0 0 76px;
}
.pnl-brief__val {
  font-size: 13px;
  color: var(--pnl-ink);
  gap: 6px;
}
.pnl-brief__signed {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  margin-top: 8px;
  font-size: 12px;
}

/* ---- src/panels/casting.css ---- */
/* ==========================================================================
   Panel 3 — casting (321×205). Layout only; primitives live in _panels.css.
   Static state = final state: counter "Shortlist 3 of 3", five roster rows in
   place, CR-014 / CR-031 / CR-052 ticked and chipped "shortlisted" (their city
   tag has yielded its width to that slot), the other two rows receded.
   ========================================================================== */

/* Head: "Roster" · counter ---------------------------------------------------- */
.pnl-casting__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.pnl-casting__hr {
  position: absolute;
  top: 21px;
  left: 0;
}
/* The counter digit: four stacked spans in one grid cell, one visible, so the
   count is a tween of opacities (seek-safe, no callbacks); the grid cell is as
   wide as the widest digit and tabular figures keep it from twitching. */
.pnl-casting__n {
  display: inline-grid;
}
.pnl-casting__n > span {
  grid-area: 1 / 1;
  opacity: 0;
}
.pnl-casting__n > span:last-child {
  opacity: 1;
}

/* The roster: five 34px rows from y26 (26 + 5 × 34 = 196 ≤ 205) ---------------- */
.pnl-casting__list {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
}
.pnl-casting__row {
  height: 34px;
  min-height: 34px;
}
.pnl-casting__id {
  flex: 0 0 auto;
}
/* Tags sit in the growing cell; chips 4px apart, nothing wraps. */
.pnl-casting__tags {
  gap: 4px;
  white-space: nowrap;
}
.pnl-casting__tag {
  flex: 0 0 auto;
  overflow: hidden;
}
/* Three ghost chips and the shortlist slot cannot both fit in 321px, so on a
   picked row the city tag yields its width to the slot. It fades out first and
   only then collapses, so its rounded edge is never caught mid-clip. The JS
   tweens exactly these five properties; max-width (not width) does the
   collapsing, so the chip's natural size is never measured or hard-coded. */
.pnl-casting__row--picked .pnl-casting__tag--city {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: -4px;
  opacity: 0;
}
/* The shortlist slot: tick + jam chip. JS opens it from max-width 0 while its
   contents are still invisible, then fades them in, so no glyph is ever sliced
   by the opening box. overflow:hidden keeps anything from spilling mid-open. */
.pnl-casting__pick {
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
/* Rows that did not make the shortlist recede; their hairlines stay. */
.pnl-casting__row--dim > .pnl-cell {
  opacity: 0.5;
}

/* ---- src/panels/hooks.css ---- */
/* ==========================================================================
   Panel 2 — hooks (321×128). Layout only; primitives live in _panels.css.
   Static state = final state: counter "8 of 8", the track scrolled so rows
   03–06 show, rows 03 and 06 in ink with a jam tick and the chip
   "picked for the shoot".
   ========================================================================== */

/* Head: "Hooks" · counter --------------------------------------------------- */
.pnl-hooks__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.pnl-hooks__hr {
  position: absolute;
  top: 21px;
  left: 0;
}

/* The clipped list: four 26px rows visible (y24–128) ------------------------ */
.pnl-hooks__clip {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 104px;
  /* The shared 20px bottom fade would dim the fourth row — which is the line
     being typed, and picked row 06 at `final`. Four 26px rows fill the clip
     exactly, so both edges get a 6px soften instead: enough to say the list
     runs past the frame, not enough to cost a word. */
  -webkit-mask-image: linear-gradient(transparent, #000 6px, #000 calc(100% - 6px), transparent);
  mask-image: linear-gradient(transparent, #000 6px, #000 calc(100% - 6px), transparent);
}
/* final state: rows 03–06 in view (JS drives the transform from y0) */
.pnl-hooks__track {
  transform: translateY(-52px);
}
.pnl-hooks__row {
  height: 26px;
  min-height: 26px;
}
/* last row: no trailing hairline, like the reference list's bottom row */
.pnl-hooks__row:last-child {
  border-bottom: 0;
}
.pnl-hooks__idx {
  flex: 0 0 22px;
}
.pnl-hooks__line {
  position: relative;
  gap: 0;
}
/* The hook line: the plain text is the settled state; JS lays a
   per-character copy (.pnl-hooks__type) over it while the line types, then
   swaps them, so the final frame is kerned exactly like the static HTML. */
.pnl-hooks__text,
.pnl-hooks__type {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.35;
  color: inherit;
}
.pnl-hooks__text {
  flex: 1 1 auto;
}
.pnl-hooks__type {
  position: absolute;
  inset: 0;
}
.pnl-hooks__type span {
  display: inline;
}

/* Picked rows read as ink (JS holds them at ink-2 until the pick lands).
   The chip takes 129px of the 289px row, so the line cannot finish inside
   the cell: it dissolves under the chip rather than ending in an ellipsis —
   the same fade the clipped list uses on its own edges. */
.pnl-hooks__row--picked {
  color: var(--pnl-ink);
}
.pnl-hooks__row--picked .pnl-hooks__line {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
}
.pnl-hooks__row--picked .pnl-hooks__text,
.pnl-hooks__row--picked .pnl-hooks__type {
  text-overflow: clip;
}
/* the tick + chip slot opens from zero width as the pick lands */
.pnl-hooks__pick {
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- src/panels/ship.css ---- */
/* ==========================================================================
   Panel 5 — ship (321×96). Layout only; primitives live in _panels.css.
   Static state = final state: playhead parked at the end of the strip,
   captions toggle on, export bar full, the three platform ticks drawn and
   their chips brightened to ink.

   Storyboard note: the clip widths are SPEC §10.5's 48·70·40·86·52 scaled by
   0.704 (34·49·28·60·37 + four 2px gaps = 216px) so the "Captions" label and
   toggle fit at the right end of the same 321px row with a 14px gap. Row
   positions: strip y0–28, export labels y38–52, bar y55–59, targets y68–85.
   ========================================================================== */

.pnl--ship {
  /* the picked clip sits one step above --pnl-fill-2 so it reads as selected
     without spending the panel's single accent (that belongs to the toggle
     and the three ticks) */
  --pnl-ship-clip-picked: rgba(255, 255, 255, 0.2);
}

/* Row 1 (y0–28): the timeline strip ---------------------------------------- */
.pnl-ship__strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 216px;
  height: 28px;
}
.pnl-ship__clips {
  position: absolute;
  top: 4px;
  left: 0;
  display: flex;
  gap: 2px;
}
.pnl-ship__clip {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 20px;
  border-radius: 3px;
  background: var(--pnl-fill-2);
}
/* four grey steps so the strip reads as five different takes, not a chart */
.pnl-ship__clip:nth-child(1) { width: 34px; background: var(--pnl-line); }
.pnl-ship__clip:nth-child(2) { width: 49px; }
.pnl-ship__clip:nth-child(3) { width: 28px; }
.pnl-ship__clip:nth-child(4) { width: 60px; }
.pnl-ship__clip:nth-child(5) { width: 37px; background: var(--pnl-fill); }
/* the picked hook clip carries its id at 8px */
.pnl-ship__clip--picked {
  background: var(--pnl-ship-clip-picked);
}
.pnl-ship__clipid {
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 8px;
  line-height: 20px;
  letter-spacing: 0.06em;
  color: var(--pnl-ink);
}
/* 1px playhead; JS drives `left` from 0% to 100% */
.pnl-ship__playhead {
  position: absolute;
  top: 0;
  left: 100%;
  width: 1px;
  height: 28px;
  background: var(--pnl-ink);
}

/* Right end of row 1: "Captions" + toggle ------------------------------------ */
.pnl-ship__cc {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}

/* Row 2 (y38–59): export labels + bar ------------------------------------------ */
.pnl-ship__export {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pnl-ship__bar {
  position: absolute;
  top: 55px;
  left: 0;
}
.pnl-ship__fill {
  width: 100%;
}

/* Row 3 (y68–85): the three platform targets -------------------------------- */
.pnl-ship__targets {
  position: absolute;
  top: 68px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 17px;
}
.pnl-ship__target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.pnl-ship__chip {
  color: var(--pnl-ink);
}

/* ---- src/panels/shoot.css ---- */
/* ==========================================================================
   Panel 4 — shoot (321×152). Layout only; primitives live in _panels.css.
   Static state = final state: the take is cut (REC dot still, timecode
   frozen at 00:00:03:20), HOOK 03 ticked in jam, the header reads
   "founder cut · take 1" and the last row "up next".
   ========================================================================== */

/* The phone: 70×140 at x0 y6 ------------------------------------------------ */
.pnl-shoot__phone {
  position: absolute;
  top: 6px;
  left: 0;
}
/* corner guides + the creator mid-take, one stroke colour at 35% white */
.pnl-shoot__frame {
  position: absolute;
  inset: 0;
  width: 70px;
  height: 140px;
  color: rgba(255, 255, 255, 0.35);
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.pnl-shoot__guides {
  opacity: 0.7;
}
.pnl-shoot__rec {
  position: absolute;
  top: 11px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 8px;
}
.pnl-shoot__rec-lbl {
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.06em;
}
.pnl-shoot__tc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  text-align: center;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--pnl-ink-2);
}

/* The take list: x86–321 ------------------------------------------------------ */
.pnl-shoot__list {
  position: absolute;
  top: 6px;
  left: 86px;
  right: 0;
  display: flex;
  flex-direction: column;
}
.pnl-shoot__hr {
  margin-top: 4px;
}
.pnl-shoot__id {
  flex: 0 0 80px;
}
.pnl-shoot__val {
  font-size: 12px;
  color: var(--pnl-ink-2);
}
.pnl-shoot__row--live .pnl-shoot__val {
  color: var(--pnl-ink);
}

/* Two strings that crossfade in one slot: `a` is the first beat (hidden in the
   static/final state), `b` stays in flow so the baseline is the real one. */
.pnl-shoot__swap {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.pnl-shoot__swap-a {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
.pnl-shoot__next-a {
  color: var(--pnl-mute-2);
}