/* ---- src\css\00-tokens.css ---- */
/* =====================================================================
   hypjam v2 · 00-tokens.css
   Design tokens. Every number here was read out of the reference site'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 (the reference site'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;          /* the reference site --sand-s · .bg-sand-s · metrics beat, feature section */
  --sand-m: #dad9d4;          /* the reference site --sand-m · .bg-sand-m · rights section, security hero */
  --sand-l: #bcbbb4;          /* the reference site --sand-l · card description text, drawing strokes on sand */
  --sand: #f0f1e9;            /* the reference site --sand (unused on home, kept for parity) */
  --grey: #5b5b5b;            /* body copy on light pages only — never on the black footer, where it scores 3.09; the footer uses white at 60%. Darkened from the reference site's #7b7b7b, which failed WCAG AA on every ground we use it on (3.92 on sand-s, 2.99 on sand-m, 4.23 on white); #5b5b5b gives 6.29 / 4.80 / 6.79. */
  --grey-m: #5b5b5b;          /* CONTRACT divider tone (= --grey at 60% composited on black) */
  --grey-s: #f5f5f5;          /* the reference site --grey-s */
  --line: #969696;            /* the reference site --line: the drawing's stroke colour */
  --jam: #ff5a1f;             /* the accent. Replaces the reference site's #2bca95. Rationed. */
  --jam-ink: #000;            /* text/arrow colour placed on a jam surface */

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

  /* white alphas the reference site 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 the reference site 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 — the reference site'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);           /* the reference site: 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 (the reference site: 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;        /* the reference site: publishSerif, Georgia, Times New Roman, serif */
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* the reference site: gtStandard, Arial, Helvetica, sans-serif */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;        /* the reference site: 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: 76px;  --lh-h1: 1.05; --ls-h1: -1.28px;
  --fs-h1-lp: 56px; --ls-h1-lp: -.96px;
  --fs-h1-tp: 42px; --ls-h1-tp: -.72px;
  /* .title (sub-page hero) · 64/1/-1.28 · phones 40/-.8 */
  --fs-title: 76px; --lh-title: 1; --ls-title: -1.28px;
  --fs-title-tp: 46px; --ls-title-tp: -.8px;
  /* h2 · 42/1.1/-.84 · max-tp 28/-.56 */
  --fs-h2: 50px;  --lh-h2: 1.1;  --ls-h2: -.84px;
  --fs-h2-tp: 32px; --ls-h2-tp: -.56px;
  /* big quote (section 2) · 36/45px(1.25)/-.72 · max-tp 24/-.48 */
  --fs-quote: 44px; --lh-quote: 1.25; --ls-quote: -.72px;
  --fs-quote-tp: 28px; --ls-quote-tp: -.48px;
  /* hero trust paragraph · 36/1.2/-.84 · max-tp 24/-.48 */
  --fs-trust: 48px; --lh-trust: 1.2; --ls-trust: -.84px;
  /* HUD card title · 26/1.2/-.52 */
  --fs-card-title: 32px; --lh-card-title: 1.2; --ls-card-title: -.52px;
  /* story card quote · 18/22.5px(1.25)/-.2 */
  --fs-story-quote: 21px; --lh-story-quote: 1.25; --ls-story-quote: -.2px;
  /* body · 16/24 · phones 14 */
  --fs-body: 18px; --lh-body: 1.5; --fs-body-tp: 16px;
  --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: 16px; --lh-small: 1.4;
  --fs-hud: 17px;  --lh-hud: 1.5;     /* HUD stop buttons 14/21 */
  --fs-hud-desc: 17px; --lh-hud-desc: 1.35;
  --fs-nav: 15px;                     /* nav items 13/1 */
  --fs-btn: 16px;                     /* buttons 14/1 */
  --fs-caption: 15px; --lh-caption: 1.35;   /* attribution 13/17.55 · meta 13/16.9 (1.3) */
  --lh-meta: 1.3;
  --fs-eyebrow: 13.5px;  --ls-eyebrow: .08em;   /* small caps labels */
  --fs-eyebrow-lg: 14.5px; --ls-eyebrow-lg: .06em; /* security-card titles: 13px uppercase */
  --fs-dash-label: 14.5px; --ls-dash-label: .01em; /* "— Operations" product-page eyebrow */
  --fs-micro: 12px;

  /* ---------- layout ---------- */
  --space: 4px;                      /* Tailwind --spacing: .25rem */
  --px-page: 28px;                   /* the reference site --page-x: 1.75rem */
  --px-page-m: 14px;                 /* the reference site: --page-x: 14px under 601px (contract said 20; the reference site 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) ----------
     the reference site (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 (the reference site'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);
  /* the reference site 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;
}
/* the reference site: 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 — the reference site'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 the reference site's exact max-lp / max-tp
   overrides (h1: max-lp:text-[48px] max-tp:text-[36px]; h2/quote: max-tp).
   ===================================================================== */

/* shared display setup — the reference site'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 the reference site") */
.t-h2-dim { color: var(--fg-dim-40); }
/* h3 · 18px display (stories page list titles, security cards use caps instead) */
.t-h3 {
  font-size: 20.5px;
  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 (the reference site'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 the reference site (see DESIGN.md §5–§8).
   Section-specific components live in their owners' files.
   ===================================================================== */

/* ---------- .btn · the pill ----------
   the reference site 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 (the reference site: 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 · the reference site'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; }
/* the reference site'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: 15px;
  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: 14px; line-height: 1; }              /* the » glyph */
.arrow-link--lg { gap: 12px; font-size: 18.5px; 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); }
/* the reference site'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: 14px;
  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: 12.5px; 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) ----------
   the reference site: 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 · the reference site: 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 · the reference site'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 · the reference site'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° (the reference site: #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 · the reference site'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 the reference site'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 the reference site'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 the reference site'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: 15px;
}
.nav-mobile-toggle { display: flex; align-items: center; justify-content: flex-start; font-size: 16px; }
@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, #ff5a1f); 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: 16px;
  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: 14px;
  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: 15px;
  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: 12.5px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jam, #ff5a1f);
}
.nav-menu-card-title { margin-top: 2px; font-size: 16px; line-height: 1.3; color: #fff; }
.nav-menu-card-desc { font-size: 15px; 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: 15px; line-height: 1.3; color: #fff; }
.nav-menu-video-sub { padding: 0 4px; font-size: 14px; 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 (the reference site: 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: 15px; }
@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: 16px;
  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, #ff5a1f); --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, #ff5a1f));
  color: var(--pill-ico-fg, #000);
}
.nav-cta-circle svg { display: block; flex-shrink: 0; }

/* ---- Menu / Close button (< 1201px) ------------------------------------- */
.nav-menu-btn {
  /* padding + matching negative margin: a 44px-tall tap target without moving the
     nav row. Was padding:0 with line-height:1, i.e. a ~14px-tall target. */
  padding: 15px 10px;
  margin: -15px -10px;
  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; }

/* the reference site'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: 17px;
  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: 14px;
  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: 17px;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
}
.nav-m-sublink:hover { color: #fff; }
.nav-m-sublink--all { color: #fff; }
/* the "New" service row carries the same one-line description the desktop card shows */
.nav-m-sublink--new { flex-direction: column; align-items: flex-start; gap: 5px; }
.nav-m-sublink-title { display: inline-flex; align-items: center; gap: 8px; }
.nav-m-sublink-desc { padding-right: 24px; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .45); text-wrap: pretty; }

/* 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; }
}

/* Ignis Shield badge: tall mark, sized by height and centred (replaces the wide lockup) */
.nav-logo { width: 36px; height: 40px; }
.nav-logo-img { left: 50%; width: auto; height: 40px; transform: translate(-50%, -50%); }
@media (min-width: 601px) { .nav-logo { width: 42px; height: 48px; } .nav-logo-img { height: 48px; } }


/* company name beside the badge (every page) */
.nav-logo { display: inline-flex; align-items: center; width: auto; gap: 10px; }
.nav-logo-img { position: static; transform: none; flex: none; }
.nav-logo-img--light { display: none; }
.nav[data-theme="light"] .nav-logo-img--light { display: block; }
.nav[data-theme="light"] .nav-logo-img--dark { display: none; }
.nav[data-open="true"] .nav-logo-img--light { display: none; }
.nav[data-open="true"] .nav-logo-img--dark { display: block; }
.nav-logo-img--word { display: none !important; }
.nav-logo-img--lockup { display: block; }
.nav[data-theme="light"] .nav-logo-img--lockup.nav-logo-img--dark { display: none; }
.nav-logo-name { font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: .14em; color: var(--white); white-space: nowrap; transition: color .3s; }
.nav[data-theme="light"] .nav-logo-name { color: var(--black); }
.nav[data-open="true"] .nav-logo-name { color: var(--white); }
@media (max-width: 600px) { .nav-logo-name { font-size: 15px; letter-spacing: .1em; } }
/* only one badge at a time (light/dark lockups) */
.nav-logo-img--lockup.nav-logo-img--light { display: none; }
.nav[data-theme="light"] .nav-logo-img--lockup.nav-logo-img--light { display: block; }
.nav[data-open="true"] .nav-logo-img--lockup.nav-logo-img--light { display: none; }
.nav[data-open="true"] .nav-logo-img--lockup.nav-logo-img--dark { display: block; }
/* phones: name + badge get the space; call / quote live in the sticky bottom bar and the menu */
@media (max-width: 600px) {
  .nav-right .nav-link--creators, .nav-right .nav-cta { display: none; }
}
/* ours (desktop): a slightly larger top bar - bigger badge, name and menu */
@media (min-width: 1201px) {
  .nav-logo { height: 60px; gap: 12px; }
  .nav-logo-img { height: 60px; }
  .nav-logo-name { font-size: 20.5px; letter-spacing: .15em; }
  .nav-left { font-size: 18px; gap: 6px; }
  .nav-trigger, .nav-link { height: 38px; padding: 0 16px; }
  .nav-link--creators { font-size: 17px; }
  .nav-cta { height: 40px; font-size: 17px; padding: 0 6px 0 18px; }
}
/* ours (desktop): logo on the left, menu centred, call + quote on the right */
@media (min-width: 1201px) {
  .nav-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; }
  .nav-centre { order: 1; justify-content: flex-start; }
  .nav-left { order: 2; justify-content: center; margin: 0; }
  .nav-right { order: 3; }
  .nav-logo { height: 72px; gap: 14px; }
  .nav-logo-img { height: 72px; }
  .nav-logo-name { font-size: 23px; }
}
/* ours: the 3-column Services menu - fixed column widths, long names wrap instead of
   running into the next column, and the panel is centred under its trigger */
.nav-menu--services { width: max-content; max-width: calc(100vw - 48px); }
.nav-menu-cols--3 { grid-template-columns: repeat(3, 232px); gap: 0 10px; }
.nav-menu-cols--3 .nav-menu-col { min-width: 0; }
.nav-menu-cols--3 .nav-menu-title { min-height: 34px; line-height: 1.25; }
.nav-menu-cols--3 .nav-menu-link { height: auto; min-height: 36px; padding: 8px 12px; white-space: normal; line-height: 1.3; }
@media (min-width: 1201px) {
  .nav-menu--services { left: 50%; transform: translate(-50%, -6px); }
  .nav-item.is-open > .nav-menu--services { transform: translate(-50%, 0); }
}
@media (min-width: 1201px) and (max-width: 1360px) { .nav-menu-cols--3 { grid-template-columns: repeat(3, 210px); } }
/* ours: larger badge in the bar */
.nav-logo { height: 52px; } .nav-logo-img { height: 52px; }
@media (min-width: 601px) { .nav-logo { height: 64px; } .nav-logo-img { height: 64px; } }
@media (min-width: 1201px) { .nav-logo { height: 88px; } .nav-logo-img { height: 88px; } .nav { --nav-pad: 18px; } }
@media (min-width: 1201px) and (max-width: 1320px) {
  .nav-left { font-size: 16px; } .nav-trigger, .nav-link { padding: 0 11px; }
  .nav-logo-name { font-size: 19px; } .nav-logo { height: 76px; } .nav-logo-img { height: 76px; }
}

/* ---- src\css\20-hero.css ---- */
/* =====================================================================
   hypjam v2 · 20-hero.css
   The hero engine's stage (CONTRACT §7). Every number is the reference site'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 (the reference site'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);            /* the reference site: 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 (the reference site: 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;
  flex-direction: column;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  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 hero CTA row — a more prominent, always-with-the-copy "Book a call",
   not just the compact nav pill. inherits the trust layer's own G.trust
   opacity fade (set on .hero-trust itself), so it appears/disappears with
   the paragraph and the walk hint; no extra JS hook needed. */
/* z-32 clears the walk hint (31) and the marquee (30): 20-hero.js rides this row down
   onto their band at scroll 0, and paint order is what keeps the click landing here. */
.hero-cta-row { position: relative; z-index: 32; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-cta--ghost { --pill-bg: transparent; }
.hero-cta--ghost:hover { --pill-bg-hover: var(--w12); }
@media (max-width: 600px) {
  .hero-trust-inner { gap: 24px; }
  .hero-cta-row { gap: 10px; }
  .hero-cta--ghost { display: none; }   /* one clear action on small screens */
}

/* the walk hint (the reference site'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 (the reference site 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: 16px;
  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: 15px; } }

/* 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; }   /* the reference site'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 (the reference site'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: 16px;                      /* 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; }                                   /* the reference site: 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); }   /* the reference site: 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: 18.5px; 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;
}
/* the reference site'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: 18.5px; 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 — the reference site 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) · the reference site'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 the reference site's h1 */
.hero-m-video-row { position: relative; display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: 15px; }
.hero-m-cta { opacity: 0; }
.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: 16px; 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: 18.5px; 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; }   /* the reference site's "%": 38px */
.hero-metric-label--m { font-size: 16px; 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-cta, .hero-m-video-row .hero-walk { opacity: 1; }
  .hero-cta-row { transform: none; }
  .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; } }
/* ours: (Skip) as a clear pill, bold and high-contrast over the video */
.hero-skip { font-size: 17px; font-weight: 700; letter-spacing: .02em; color: var(--white);
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .3s, color .3s, border-color .3s; }
.hero-skip:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.hero-skip { font-size: 18.5px; font-weight: 700; color: var(--black); background: var(--white); border-color: var(--white);
  padding: 12px 22px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.hero-skip:hover { background: var(--jam, #ff5a1f); border-color: var(--jam, #ff5a1f); color: var(--black); }
.hero-skip { font-size: 19.5px; font-weight: 800; letter-spacing: .03em; padding: 14px 26px; border-width: 2px; }

/* ---- src\css\30-features.css ---- */
/* =====================================================================
   hypjam v2 · 30-features.css
   Home "features" — the reference site #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: the reference site'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]
   the reference site 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 = the reference site'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: 18.5px;
  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: 16px;
  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,90,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 (the reference site'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" — the reference site #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; }
/* one slide, no thumbnail row: match the bottom padding to the top */
.quo-card--single { padding-bottom: 36px; }

.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: the reference site 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: 16px;
  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 (the reference site'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; }
}
/* ours: the badge on the quote photo reads at a glance */
.quo-logo { height: 88px; opacity: 1; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
@media (max-width: 800px) { .quo-logo { height: 64px; } }
.quo-logo { height: 128px; }
@media (max-width: 800px) { .quo-logo { height: 84px; } }

/* ---- src\css\32-stories.css ---- */
/* =====================================================================
   hypjam v2 · 32-stories.css — the brand-stories carousel (home)
   One-to-one with the reference site's "Trusted by leading hotels" section
   (ref/index.html, ref/lance-css .story-carousel-*, ref/shots/s27–s28,
   ref/mobile/m08). Numbers, in the reference site'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 — the reference site 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 the reference site'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(400px, 82vw);
  flex-shrink: 0;
}

/* the image box → a reserved slot: dashed hairline frame on a dark surface */
.sto-media {
  position: relative;
  aspect-ratio: 9 / 16;          /* the shape of the work itself */
  overflow: hidden;
  border-radius: var(--r-img);
  border: 1px dashed var(--w20);
  background: rgba(255, 255, 255, .06);     /* the "image" surface — the reference site'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" — the reference site'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: 150px; height: auto; max-height: 100%; overflow: visible; }
.sto-phone-screen { opacity: .55; stroke-dasharray: 3 5; }
.sto-phone-side { opacity: .7; }

/* quote + attribution, where the reference site'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 (the reference site'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(320px, 82vw); gap: 16px; }
  .sto-media-in { padding: 16px 16px 14px; }
  .sto-phone-svg { width: 120px; }
}
@media (max-width: 600px) {
  .sto-quote { font-size: 18.5px; }               /* max-tp:text-[16px] */
}

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

/* ---------- a filled slot ----------
   A reserved slot is a dashed frame around a line-drawn phone. A filled one
   holds the real clip: solid frame, and the video sized to a true 9:16 so it
   is never cropped. The clip is 1080x1920, so at 440px tall it is 247px wide
   and sits centred on the dark surface exactly where the phone drawing was. */
.sto-media--filled {
  border-style: solid;
  border-color: var(--w20);
  background: rgba(255, 255, 255, .04);
}
.sto-card:hover .sto-media--filled,
.sto-card:focus-within .sto-media--filled { border-color: var(--w40); }
.sto-media-in--filled { display: block; padding: 0; }
.sto-vid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* frame and clip are both 9:16, so this crops nothing */
  background: #000;
}

/* ---- src\css\33-rights.css ---- */
/* =====================================================================
   hypjam v2 · 33-rights.css — "Rights and safety at every layer" (home)
   One-to-one with the reference site's #security section (ref/index.html,
   ref/shots/s29–s30, ref/mobile/m09–m10). the reference site'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]
   the reference site'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: 14px; 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 (the reference site'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) {
  /* the reference site: [data-landing] .text-[16px]{font-size: 16px} 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 the reference site (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 the reference site 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 {                                  /* the reference site 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: 18.5px; line-height: 24px; color: var(--grey); max-width: 600px; text-wrap: pretty; }
.page-p--sm { font-size: 16px; line-height: 1.5; }
.page-eyebrow {                             /* "— Operations": 20px dash, 12px gap, 13px grey */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  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: 14px;
  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 ----------
   the reference site'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: 14px;
  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;   /* the reference site'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: 18.5px; 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__visual .page-panel.page-panel--fit { aspect-ratio: auto; --panel-ratio: 3 / 2; }
.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: 16px; line-height: 1.5; }
  .page-hero__visual .page-panel { aspect-ratio: 4 / 5; }
  .page-hero__visual .page-panel.page-panel--fit { aspect-ratio: auto; --panel-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 (the reference site'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: 15px; 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: 15px; 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: 12.5px; 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: 15px; 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: 12.5px; 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: 20.5px;
  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 (the reference site: 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: 16px; 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: 14px; 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; }
/* --fit: never shorter than the panel's usual ratio, but taller when its card needs it
   (an invisible spacer holds the ratio in the same grid cell as the card) */
.page-panel.page-panel--fit { aspect-ratio: auto; }
.page-panel--fit::before { content: ""; grid-area: 1 / 1; width: 100%; aspect-ratio: var(--panel-ratio, 3 / 2); }
.page-panel--fit > * { grid-area: 1 / 1; }

/* ---------- .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: 18.5px; 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: 16px;
  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: 16px; 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: 15px; line-height: 1; color: var(--grey); transition: color var(--dur); }
.page-link::before { content: "↳"; font-size: 15px; 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: 18.5px; line-height: 1.4; font-weight: 500; color: var(--black); }
.page-problem__body { margin-top: 12px; font-size: 16px; 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: 14px; line-height: 1; letter-spacing: .04em; color: var(--grey); font-variant-numeric: tabular-nums; }
.page-step__title { margin-top: 72px; font-size: 18.5px; line-height: 1.4; font-weight: 500; color: var(--black); }
.page-step__body { margin-top: 10px; font-size: 16px; 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: 14px; 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: 16px; 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: 16px; line-height: 1.4; font-weight: 500; color: var(--black); }
.page-quote__role { margin-top: 2px; font-size: 15px; 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: 18.5px;
  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: 16px; }
.page-faq__label { flex: 1 1 auto; min-width: 0; }
.page-faq__toggle { flex-shrink: 0; width: 16px; text-align: right; font-size: 17px; 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: 16px; line-height: 1.5; color: var(--grey); }
@media (max-width: 600px) { .page-faq__q { padding: 18px 0; font-size: 17px; } .page-faq__a { padding-bottom: 24px; } }

/* =====================================================================
   .mock-* · tiny UI mocks (white card in a .page-panel). the reference site'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"; the reference site'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: 15px;
  line-height: 1.35;
  text-align: left;
}
.mock-card--sm { --w: 260px; padding: 14px 16px 12px; }
/* the main card of a stage keeps the reference site's card mass even when the spec is short */
.mock-stage > .mock-card:not(.mock-card--sm) { min-height: 248px; }
.mock-stage > .mock-card.mock-card--slim { min-height: 0; }   /* small stacked cards (the casting hero) size to their content */
.mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; font-size: 14px; 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: 12.5px; letter-spacing: .04em; color: var(--grey); }
.mock-label { margin: 14px 0 6px; font-size: 12.5px; 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: 15px;
  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: 12.5px; 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: 14px; color: var(--grey); white-space: nowrap; }
.mock-row__sub { flex-basis: 100%; margin: -4px 0 4px 30px; font-size: 14px; 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: 12.5px; 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: 12.5px;
  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: 14px; line-height: 1; flex-shrink: 0; }
.mock-x { color: var(--grey); font-size: 14px; line-height: 1; flex-shrink: 0; }
.mock-hl { margin: 4px 0 8px; padding: 10px 12px; border-radius: 8px; background: #f7f5f0; font-size: 16px; line-height: 1.4; color: var(--black); }
.mock-hl--serif { font-family: var(--font-display); font-size: 20.5px; 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: 18.5px; 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: 14px; 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); }
/* a label's value drawn as skeleton lines (render_services.py label_fill) */
.mock-fill { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 4px; }
.mock-fill .mock-line { display: block; }
.mock-fill--rules { gap: 0; }
.mock-fill__row { display: block; padding: 7px 0; }
.mock-fill__row + .mock-fill__row { border-top: 1px solid var(--k08); }
.mock-fill--caret { flex-direction: row; align-items: center; gap: 2px; }
.mock-fill--caret .mock-line { flex: 0 0 72%; }
/* phones: the hero panel is a fixed 4:5, so a card with a stack of labels (the briefing
   brief) tightens its label spacing to fit inside it */
@media (max-width: 600px) { .page-hero__visual .mock-label { margin-top: 10px; margin-bottom: 4px; } }
.mock-bubble { display: block; width: fit-content; max-width: 88%; margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #f0efed; font-size: 15px; 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: 12.5px; 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: 12.5px; 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: 12.5px; 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: 12.5px; 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: 12.5px; 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: 12.5px; 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: 14px; 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: 14px; 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: 12.5px; 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: 12.5px; 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: 15px; 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: 14px; 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: 14px; }
/* 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: 12.5px; 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: 12.5px; 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: 14px; 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: 15px; color: var(--black); }
.mock-feed__head small { font-size: 12.5px; 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; } }

/* Ignis Shield: sector names in the platforms row (replaces the platform wordmarks) */
.platforms__word { font-family: var(--font-body); font-size: 23px; font-weight: 500; letter-spacing: -.3px; color: currentColor; white-space: nowrap; }
@media (max-width: 600px) { .platforms__word { font-size: 18.5px; } }

/* ---- 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 the reference site'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%; }
}


/* ---- Ignis Shield: real photos on service pages ---- */
.svc-photo { position: relative; margin: 0; border-radius: var(--r-img-lg, 16px); overflow: hidden; aspect-ratio: 4 / 5; max-height: 620px; background: #111; }
.svc-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-photo__cap { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  font-size: 15px; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.svc-photo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jam); box-shadow: 0 0 8px var(--jam); }
.svc-strip { padding-top: 0; }
.svc-strip__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: var(--max-content, 1280px); margin: 0 auto; padding-inline: var(--px-page); }
.svc-strip__item { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: #111; }
.svc-strip__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.svc-strip__item:hover .svc-strip__img { transform: scale(1.04); }
@media (max-width: 800px) {
  .svc-photo { aspect-ratio: 4 / 5; max-height: none; margin-top: 8px; }
  .svc-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none; }
  .svc-strip__row::-webkit-scrollbar { display: none; }
  .svc-strip__item { flex: 0 0 78%; scroll-snap-align: center; }
}

/* feature blocks: photo instead of a drawn mock-up */
.svc-feat { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; background: #111; }
.svc-feat__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.svc-feat:hover .svc-feat__img { transform: scale(1.04); }
.svc-feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.svc-feat__cap { position: absolute; z-index: 1; left: 16px; bottom: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 16px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
@media (max-width: 800px) { .svc-feat { aspect-ratio: 4 / 3; } }
/* industry pages: hero photo in the split hero */
.page-hero__visual .sol-photo { aspect-ratio: 3 / 2; }
@media (max-width: 800px) { .page-hero__visual .sol-photo { aspect-ratio: 4 / 3; } }

/* ours: service-page FAQ across the full width - large questions in two columns of cards */
.svc-faq { margin-top: 120px; }
.svc-faq__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.svc-faq__head .page-h2 { max-width: 22ch; }
.svc-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.svc-faq__list .page-faq__item { border: 1px solid var(--k10); border-radius: 16px; background: var(--white, #fff);
  padding: 0 26px; transition: border-color .25s, box-shadow .25s; }
.svc-faq__list .page-faq__item:hover { border-color: rgba(0,0,0,.2); }
.svc-faq__list .page-faq__item[open] { border-color: rgba(0,0,0,.24); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.svc-faq__list .page-faq__q { padding: 24px 0; font-size: 23px; line-height: 1.3; color: var(--black); font-weight: 500; }
.svc-faq__list .page-faq__mark { display: none; }
.svc-faq__list .page-faq__toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.06); font-size: 20.5px; line-height: 1; color: var(--black); }
.svc-faq__list .page-faq__item[open] .page-faq__toggle { background: var(--jam, #ff5a1f); color: #fff; }
.svc-faq__list .page-faq__a { padding: 0 0 26px; max-width: none; font-size: 18.5px; line-height: 1.6; color: #444; }
@media (max-width: 900px) { .svc-faq__list { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .svc-faq { margin-top: 72px; } .svc-faq__list .page-faq__q { font-size: 19.5px; padding: 20px 0; } .svc-faq__list .page-faq__item { padding: 0 20px; } .svc-faq__list .page-faq__a { font-size: 17px; } }

/* ---- 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 the reference site'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
   the reference site 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: 15px; 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; }
}

/* the reference site'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 the reference site'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 (the reference site'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 the reference site'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 (the reference site: 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: 14px; 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: 16px; 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: 16px; 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 (the reference site /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: 14px; 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: 18.5px; 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: 16px; line-height: 1.5; }
}

/* ---------------------------------------------------------------------
   BRAND PAGES · the full-width still band (the reference site: 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: 14px; 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: 16px; line-height: 1.4; color: var(--grey); transition: color var(--dur); }
.sol-related__link::before { content: "↳"; flex-shrink: 0; width: 14px; font-size: 15px; 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: 15px; 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 the reference site'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: 15px; 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: 18.5px;
  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: 18.5px; 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: 16px; } .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: 16px; line-height: 1.2; color: var(--black); }
.sol-castcard__tags { font-size: 14px; 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: 12.5px; } }

/* 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: 15px;
  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: 15px; 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: 15px; }

/* tab strip (spark-toggle) */
.sol-tabs { display: flex; gap: 20px; padding-bottom: 12px; }
.sol-tab { font-size: 15px; 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: 17px;
  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: 17px; 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 (the reference site'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 the reference site (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 the reference site'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: 20.5px;
  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);            /* the reference site: 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: 16px;
  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: 16px;
  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: 18.5px;
  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: 16px;
  line-height: 1.5;
  color: var(--sand-l);
}
.rights-acc-link { margin: -8px 0 24px; }

/* ---------- breakpoints (the reference site: 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) {
  /* the reference site'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; }      /* the reference site: .title 40/-.8 under 601 */
  .rights-hero-sub { font-size: 18.5px; }
  .rights-hero-seals { gap: 20px 24px; margin-top: 32px; }
  .rights-acc-btn { font-size: 17px; 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 (the reference site'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: 18.5px;
  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: 20.5px;
  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: 12.5px;
  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; night-patrol.jpg is a dark
     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: 16px;
  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: 14px;
  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: 16px;
  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: 15px; line-height: 1.35; color: var(--grey); }
.work-sample-note { flex: 1 1 auto; font-family: var(--font-body); font-size: 15px; line-height: 1.35; color: var(--fg-dim-40); }
.work-sample-format { margin-top: 4px; }

/* ---------- breakpoints (the reference site: 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: 18.5px; letter-spacing: -.16px; }
  .work-plat-glyph { width: 18px; height: 18px; }
}

/* ---- src\css\45-book.css ---- */
/* =====================================================================
   hypjam v2 · 45-book.css — the /book page. Prefix .book-.

   This page has one job: get a call booked and let the visitor leave.
   So the calendar IS the page. It loads immediately (no click gate), it
   is the widest and tallest thing on screen, and everything else —
   the promise of what the call covers, the founder quote, the rights
   seals — sits quietly beneath it where it cannot compete.

   The earlier two-column treatment gave half the viewport to a photo
   and squeezed the calendar into a 440px rail. That was the wrong
   trade for a booking page.
   ===================================================================== */

.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;
  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: 52px; flex-shrink: 0; }
.book-logo img { display: block; width: 100%; height: auto; }
.book-header-link {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  color: var(--grey);
  white-space: nowrap;
  transition: color var(--dur);
}
.book-header-link:hover { color: var(--black); }

/* ---------- the column ---------- */
.book-main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px var(--px-page) 72px;
}

.book-intro { max-width: 640px; margin: 0 auto; text-align: center; }
.book-h1 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.8px;
  color: var(--black);
}
.book-sub {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--grey);
  text-wrap: pretty;
}

/* ---------- the calendar · the point of the page ---------- */
.book-embed { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.book-frame {
  overflow: hidden;
  border-radius: 16px;
  background: #101010;                       /* cal.com's dark theme ground; never colour-inverted */
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
}
.book-iframe {
  display: block;
  width: 100%;
  height: 900px;                             /* 45-book.js grows this to cal.com's reported height */
  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: 15px; line-height: 1.35; color: var(--grey); text-align: center; }
.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; }

/* ---------- under the calendar ---------- */
.book-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--k05);
}

.book-expect { display: flex; flex-direction: column; gap: 12px; }
.book-expect-label { color: var(--grey); }
.book-expect-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  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); }

/* the quote, demoted: it used to own half the viewport, now it is a footnote */
.book-quote-mini { display: flex; flex-direction: column; gap: 14px; }
.book-quote-mini-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey);
  text-wrap: pretty;
}
.book-quote-mini-cap { display: flex; align-items: center; gap: 10px; }
.book-quote-mini-mark { display: block; width: 28px; height: 28px; flex-shrink: 0; opacity: .9; }
.book-quote-mini-name { display: block; font-family: var(--font-body); font-size: 15px; font-weight: var(--fw-medium); line-height: 1.35; color: var(--black); }
.book-quote-mini-role { display: block; font-family: var(--font-body); font-size: 15px; line-height: 1.35; color: var(--grey); }

/* ---------- foot ---------- */
.book-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--k05);
}
.book-note {
  flex: 1 1 320px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  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); }

.book-rights { display: flex; align-items: center; gap: 14px; }
.book-rights-label { font-family: var(--font-body); font-size: 15px; line-height: 1; color: var(--grey); white-space: nowrap; }
.book-seals { display: flex; align-items: center; gap: 12px; }
.book-seal { display: block; width: 32px; height: 32px; color: var(--black); opacity: .55; }

/* ---------- breakpoints ---------- */
@media (max-width: 1024px) {
  .book-iframe { height: 860px; }
}
@media (max-width: 800px) {
  .book-main { padding: 36px var(--px-page) 56px; }
  .book-intro { text-align: left; }
  .book-after { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 44px; }
  .book-foot { margin-top: 32px; }
}
@media (max-width: 600px) {
  .book-h1 { font-size: 32px; letter-spacing: -.64px; }
  .book-iframe { height: 940px; }               /* cal.com's stacked mobile layout is taller */
  .book-rights { width: 100%; }
}

/* ---- Ignis Shield quote form (replaces the cal.com embed) ---- */
.book-form { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.book-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.book-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--fg-dim); min-width: 0; }
.book-field--full { grid-column: 1 / -1; }
.book-field input, .book-field select, .book-field textarea {
  font: inherit; font-size: 17px; color: var(--fg); background: var(--w05); border: 1px solid var(--hairline-strong);
  border-radius: 8px; padding: 11px 12px; width: 100%; box-sizing: border-box;
}
.book-field select option { color: #000; }
.book-field input:focus-visible, .book-field select:focus-visible, .book-field textarea:focus-visible { outline: 2px solid var(--jam); outline-offset: 1px; }
.book-submit { align-self: flex-start; }
.book-form-alt { font-size: 16px; color: var(--fg-dim); margin: 0; }
@media (max-width: 600px) { .book-form-grid { grid-template-columns: 1fr; } }
/* assessment form: honeypot, sending state, result message */
.book-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.book-submit.is-sending { opacity: .6; pointer-events: none; }
.book-form-status { padding: 14px 18px; border-radius: 12px; font-size: 17px; line-height: 1.45; }
.book-form-status.is-ok { background: #e8f6ec; color: #11512a; border: 1px solid #9fd8b2; }
.book-form-status.is-error { background: #fdecea; color: #7a1d14; border: 1px solid #f2b0a8; }

/* ---- 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: 18.5px;
  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: 15px;
  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: 18.5px;
  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: 15px;
  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: 18.5px;
  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: 12.5px;
  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: 15px;
  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: 12.5px;
  line-height: 1.6;
  color: var(--grey);
  opacity: .72;
  font-variant-numeric: tabular-nums;
}
.blog-rail-toc-a {
  display: inline-block;
  font-size: 15px;
  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: 18.5px;
  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: 23px;
  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: 23px;
  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: 18.5px;
  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: 16px;
  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: 15px;
  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: 14px;
  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: 16px;
  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: 15px; 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: 20.5px;
  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: 15px; line-height: 1.35; color: var(--black); }
.blog-story-sub { display: block; font-size: 15px; 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: 18.5px;
  line-height: 24px;
  color: var(--grey);
  text-wrap: pretty;
}

/* =====================================================================
   Responsive — the reference site'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: 20.5px; }
}
@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: 16px; 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: 16px; line-height: 21px; }
  .blog-art-banner { aspect-ratio: 4 / 3; }
  .blog-art-banner .blog-art { width: 52%; }
  .blog-art-desc { font-size: 16px; line-height: 1.5; }
  .blog-rail-list { grid-template-columns: minmax(0, 1fr); }
  .blog-prose { font-size: 17px; }
  .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 the reference site 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 (the reference site'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: 17px;
  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: 15px;
  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: 12.5px;
  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: 15px;
  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: 14px;
  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: 19.5px; line-height: 1.3; font-weight: 500; color: var(--black); }
.proc-h4 { margin: 22px 0 8px; font-size: 16px; 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: 18.5px; line-height: 1.6; color: var(--grey); text-wrap: pretty; }
.proc-p { margin: 0 0 4px; font-size: 16px; line-height: 1.55; color: var(--grey); }
.proc-note { margin: 20px 0 0; font-size: 15px; 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: 15px;
  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: 16px; 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: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; color: var(--black); }
.proc-card-p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--grey); }
.proc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 15px;
  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: 12.5px;
  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: 14px; 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: 15px; line-height: 1.45; color: var(--grey); }
.proc-topic-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  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: 16px;
  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: 14px;
  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: 12.5px;
  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: 16px;
  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: 17px; line-height: 1.3; font-weight: 600; color: var(--black); }
.proc-ref-p { margin: 8px 0 0; font-size: 15px; 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: 20.5px; 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: 15px; 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: 15px; line-height: 1.5; color: var(--grey); }
.proc-pkg-best-k {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  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: 17px; line-height: 1.35; font-weight: 600; color: var(--black); }
.proc-faq-a { margin: 8px 0 0; font-size: 16px; 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: 23px;
  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: 15px; 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: 15px; line-height: 1.5; color: var(--grey); }
.proc-foot-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  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: 18.5px;
  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: 16px;
  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: 12.5px; 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: 18.5px;
  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: 17px;
  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: 16px; 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: 18.5px;
  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: 18.5px;
  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: 15px; 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: 12.5px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: .72;
}
.agency-fact-v { font-size: 17px; 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: 18.5px;
  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: 12.5px;
  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: 15px; 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: 16px; line-height: 1.4; font-weight: 500; color: var(--black); }
.agency-founder-role { font-size: 15px; 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: 16px; 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: 17px; }
}

/* =====================================================================
   /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: 18.5px;
  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: 18.5px;
  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: 17px;
  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: 15px; 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: 15px;
  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: 15px; line-height: 1.4; color: var(--grey); }
.legal-related { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
.legal-rel-a {
  font-size: 15px;
  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: 18.5px;
  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: 15px;
  line-height: 1.6;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.legal-sec-body {
  min-width: 0;
  max-width: 670px;
  font-size: 18.5px;
  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: 18.5px; 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: 17px; }
}

/* ---- src\css\48-apply.css ---- */
/* =====================================================================
   hypjam v2 · 48-apply.css — /apply, the creator application form.
   Built on the shared .page- vocabulary in 40-pages.css; only the form
   itself is new. Two columns on desktop: the form carries the weight,
   "what happens next" sits beside it as a narrow reassurance rail.
   ===================================================================== */

.page-apply-main { background: var(--white); }

.apply-section { padding-top: 8px; padding-bottom: 120px; }
.apply-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: start;
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 0 var(--px-page);
}

/* ---------- the form ---------- */
.apply-form { display: flex; flex-direction: column; gap: 44px; max-width: 620px; }
.apply-set { display: flex; flex-direction: column; gap: 28px; border: 0; padding: 0; margin: 0; }
.apply-legend {
  padding: 0 0 4px;
  color: var(--grey);
  border-bottom: 1px solid var(--hairline);
  width: 100%;
}
.apply-field { display: flex; flex-direction: column; }

.apply-label {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--black);
}
.apply-help {
  order: 3;                       /* help sits under the control, error under that */
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--grey);
}
.apply-error {
  order: 4;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: #c2402f;
}

.apply-input {
  order: 2;
  margin-top: 10px;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--black);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.apply-input::placeholder { color: var(--sand-l); }
.apply-input:focus {
  outline: none;
  border-color: var(--jam);
  box-shadow: 0 0 0 3px var(--jam-15);
}
.apply-input[aria-invalid="true"] { border-color: #c2402f; }
.apply-textarea { resize: vertical; min-height: 110px; }
.apply-textarea--short { min-height: 76px; }

/* "Optional" beside a label: everything unmarked is required */
.apply-opt {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--grey);
}
/* a line of guidance under a fieldset's legend */
.apply-set-help {
  margin-top: -12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--grey);
}

/* socials: a compact two-column grid of short fields */
.apply-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.apply-field--social .apply-label { font-size: 16px; }
.apply-field--social .apply-input { margin-top: 6px; min-height: 42px; padding: 9px 12px; font-size: 16.5px; }
.apply-error--set { margin-top: -14px; }

.apply-select-wrap { order: 2; position: relative; margin-top: 10px; }
.apply-select {
  order: 0;
  margin-top: 0;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6 6 7.6l3-3' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

/* radios */
.apply-choices { order: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.apply-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1;
  color: var(--black);
  cursor: pointer;
  transition: border-color var(--dur), background-color var(--dur);
}
.apply-choice:hover { border-color: var(--grey); }
.apply-choice input { accent-color: var(--jam); width: 16px; height: 16px; margin: 0; }
.apply-choice:has(input:checked) { border-color: var(--jam); background: var(--jam-05); }
.apply-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--jam-15); }

.apply-conditional { margin-top: -6px; }

/* tick-box chips for "pick any that apply" */
.apply-choices--multi { gap: 8px; }
.apply-choice--chip { gap: 8px; padding: 9px 13px; font-size: 16px; line-height: 1.2; }
.apply-choice--chip input { width: 15px; height: 15px; }

/* the 18-or-over confirmation */
.apply-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--black);
  cursor: pointer;
}
.apply-check input { accent-color: var(--jam); width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; }
.apply-check input:focus-visible { outline: 2px solid var(--jam); outline-offset: 2px; }
.apply-check ~ .apply-help { margin-left: 28px; }
.apply-check ~ .apply-error { margin-left: 28px; }

/* ---------- actions ---------- */
.apply-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* The shared .btn is sized for nav and hero use, around 32px tall. That is too
   small for the one action this page exists for, and below the 44px touch target
   a thumb needs, so the submit is sized to match the inputs above it. */
.apply-submit {
  min-width: 220px;
  height: 50px;
  padding-left: 22px;
  padding-right: 10px;
  font-size: 17px;
}
.apply-submit .btn__ico { width: 30px; height: 30px; }
.apply-note {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--grey);
  max-width: 460px;
}
.apply-note a { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.apply-note a:hover { color: var(--black); }

.apply-status {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--sand-s);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
}
.apply-status[data-tone="bad"] { background: rgba(194, 64, 47, .08); }
.apply-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.apply-copy {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--black);
  cursor: pointer;
}
.apply-copy:hover { border-color: var(--grey); }
.apply-copy:focus-visible { outline: 2px solid var(--jam); outline-offset: 2px; }
.apply-reopen { font-family: var(--font-body); font-size: 16px; color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the rail ---------- */
.apply-after {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--sand-s);
}
.apply-after__h2 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--black);
}
.apply-after__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  counter-reset: ap;
  list-style: none;
}
.apply-after__list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--grey);
  counter-increment: ap;
}
.apply-after__list li::before {
  content: counter(ap);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--jam);
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
}

/* ---------- breakpoints ---------- */
@media (max-width: 600px) {
  .apply-socials { gap: 12px 10px; }
  .apply-input, .apply-field--social .apply-input { font-size: 18.5px; }   /* 16px stops iOS Safari zooming into each field on tap */
}
@media (max-width: 359px) {
  .apply-socials { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .apply-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .apply-after { position: static; order: 2; }
  .apply-form { max-width: none; }
  .apply-section { padding-bottom: 88px; }
}

/* ---- src\css\90-footer.css ---- */
/* ==========================================================================
   90-footer.css — one-to-one port of the reference site'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: 16px;
  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: 16px;
  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, #ff5a1f); 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, #ff5a1f);
  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: rgba(255, 255, 255, .6);
  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: rgba(255, 255, 255, .6); }

.foot-badge { display: flex; flex-shrink: 0; align-items: center; gap: 16px; color: rgba(255, 255, 255, .6); }
.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: 16px; line-height: 1; }

/* Ignis Shield badge in the footer */
.foot-logo { width: auto; height: 132px; }
@media (max-width: 800px) { .foot-logo { width: auto; height: 108px; } }

/* the three badge colourways under the main logo */
.foot-badges { display: flex; gap: 20px; margin: 36px 0 0; padding: 0; list-style: none; }
.foot-badges img { display: block; height: 96px; width: auto; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.foot-badges li:hover img { transform: translateY(-4px) rotate(-2deg); }
@media (max-width: 800px) { .foot-badges { gap: 14px; margin-top: 28px; } .foot-badges img { height: 72px; } }

/* ours: calmer brand column - smaller main badge, colourways in a neat tray */
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.foot-logo { height: 76px; }
.foot-badges { margin: 0; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.foot-badges img { height: 44px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.foot-badges li:hover img { transform: translateY(-3px); }
@media (max-width: 800px) { .foot-logo { height: 64px; } .foot-badges img { height: 40px; } }

/* ==========================================================================
   ours: footer v2 - brand block + four link columns + badge strip + bottom bar
   ========================================================================== */
.foot2 { display: grid; grid-template-columns: minmax(260px, 1fr) 2.6fr; gap: 64px; align-items: start; }
.foot2-brand { display: flex; flex-direction: column; gap: 22px; }
.foot2-logo { display: inline-flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; }
.foot2-logo img { display: block; height: 96px; width: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.foot2-name { font-family: var(--font-body); font-weight: 700; font-size: 23px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.foot2-name small { font-size: 14px; font-weight: 500; letter-spacing: .08em; opacity: .7; }
.foot2-tag { margin: 0; max-width: 30ch; font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: rgba(255,255,255,.85); }
.foot2-contact { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.foot2-contact a, .foot2-live { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 17px; line-height: 1.3; }
.foot2-contact svg { flex: none; color: var(--jam, #ff5a1f); }
.foot2-contact a:hover { color: var(--sand-l, #bcbbb4); }

.foot2-links { display: grid; grid-template-columns: 1.25fr 1.35fr .9fr .8fr; gap: 32px; }
.foot2-h { display: block; margin: 0 0 18px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); text-decoration: none; }
a.foot2-h:hover { color: #fff; }
.foot2-col ul { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.foot2-col a:not(.foot2-h) { color: rgba(255,255,255,.78); text-decoration: none; font-size: 16px; line-height: 1.35; transition: color .15s; }
.foot2-col a:not(.foot2-h):hover { color: #fff; }

.foot2-seals { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 72px; padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.foot2-seals img { display: block; height: 104px; width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.foot2-seals img:hover { transform: translateY(-4px) scale(1.04); }

.foot2-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; }
.foot2-copy { margin: 0; font-size: 15px; color: rgba(255,255,255,.55); }
.foot2-legal { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
.foot2-legal a { font-size: 15px; color: rgba(255,255,255,.7); text-decoration: none; }
.foot2-legal a:hover { color: #fff; }

@media (max-width: 1200px) { .foot2 { grid-template-columns: 1fr; gap: 48px; } .foot2-brand { display: grid; grid-template-columns: auto 1fr; column-gap: 48px; row-gap: 18px; align-items: center; } .foot2-tag { grid-column: 1; } .foot2-contact { grid-column: 2; grid-row: 1 / span 2; } }
@media (max-width: 800px) {
  .foot2-brand { display: flex; }
  .foot2-logo img { height: 76px; } .foot2-name { font-size: 19.5px; } .foot2-tag { font-size: 22px; }
  .foot2-links { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot2-seals { gap: 22px; margin-top: 48px; padding: 26px 0; } .foot2-seals img { height: 76px; }
  .foot2-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (min-width: 801px) { .foot2-seals { gap: 56px; } .foot2-seals img { height: 124px; } }
@media (max-width: 800px) { .foot2-brand { align-items: flex-start; } }

/* ---- src\css\95-mobile.css ---- */
/* ==========================================================================
   Ignis Shield — mobile polish (loaded last)
   Sticky call/quote bar, comfortable tap targets, safe-area padding.
   ========================================================================== */
.mbar { display: none; }
@media (max-width: 800px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    display: grid; grid-template-columns: 1fr 1.45fr; gap: 8px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 90;
    padding: 8px; border-radius: 18px;
    background: rgba(12,12,12,.86); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    transform: translateY(150%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .mbar.is-on { transform: none; }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px;
    font: 600 14.5px/1 var(--font-body); text-decoration: none; }
  .mbar__call { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
  .mbar__quote { color: var(--jam-ink, #000); background: var(--jam); }

  /* footer + inline link lists: 44px tap targets */
  .foot-link, .foot-col a { display: inline-flex; align-items: center; min-height: 40px; }
  .foot-col { row-gap: 0; }
  .page-link, .blog-filter { min-height: 40px; }

  /* long words never break the layout */
  h1, h2, h3, p, li, a { overflow-wrap: anywhere; }
  img, video { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* ---- 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, #ff5a1f);
  --pnl-jam-a: rgba(255, 90, 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);
}