/* Maneten v3 design system.
   v1's design (the Framer site, Vectura theme) measured in 00-old-site-inventory.md (`inv Lnn`) and the layout dumps
   in assets/v1/data/, recreated in plain CSS; v2's content. Versions: v1 = Framer, v2 = maneten-site, v3 = this.

   TWO RULES FOR THIS FILE
   1. Nothing here may set `transition` or `animation` on a node inside a scene root (.scene): the scenes are pure
      render(t) functions (scenes/49-motion-playbook.md § 6), checked by verify/scenes.mjs. The scenes create
      elements with class names v3 also uses (btn, card, chip, row, rows, w, ln, wrap, icon...), so every v3 rule on
      one of those names carries :not(.scene *) or sits under a v3-only ancestor.
   2. Base styles are the END state of every motion. Hidden starting states exist only under html.js (head script),
      and html.static (?t= freeze) puts everything at its end state with no transition. */

/* ============================================================ tokens */
:root {
  --black: #000000;
  --white: #ffffff;
  --ink: #222222;
  --grey: #8a8a8a;
  --black-60: rgba(0, 0, 0, .6);
  --black-10: rgba(0, 0, 0, .1);
  --black-30: rgba(0, 0, 0, .3);
  --glass: rgba(255, 255, 255, .15);
  --white-80: #fffc;
  --warm-50: #fbfaf9;
  --cool-50: #f9fafb;
  --grey-50: #fafafa;
  /* v1's "Medium Warm" was #f2ece8 (rgb 242,236,232): red highest, blue lowest, it read pink (feedback 2026-11-05 #10).
     The brand's bone, same lightness and no pink cast, so every use (Home values band, Team page theme, a Pricing card,
     the mega-menu hover tile) changes at once */
  --warm-200: #f2f0e8;
  --cool-200: #e8edf3;
  --grey-ed: #ededed;
  --green: #40b844;
  --night: #1d1d1b;
  --bone: #f2f0e8;
  --bone-64: rgba(242, 240, 232, .64);
  --bone-40: rgba(242, 240, 232, .4);
  --scene-cool: #eceef0;
  --scene-warm: #ececea;
  --card-muted: #6b6f76;
  /* Foregrounds and the accent as tokens, so an alternate theme can reach them. Pure #000 and #fff
     were written inline in nine rules; both are off-palette in a cool system. */
  --ink-strong: #000;      /* headings; --fg-strong resolves to this on a light ground */
  --on-dark: #fff;         /* any foreground on a dark ground */
  --accent: var(--black);  /* the primary button; its own token so a theme can part it from --black */
  --hero-ink: #f2f0e8;     /* the hero canvas reads these two: its dots, and its ground */
  --hero-paper: #1d1d1b;
  --hero-tint: #a855f7;    /* the colour a selected part takes, in both canvases */
  /* The nine scenes' own colours, as tokens. Defaults are exactly what the artwork bakes in,
     so the shipped site is unchanged; build/scenes.py points the artwork at these. */
  --sc-ink: #1d1d1b;
  --sc-ink-rgb: 29, 29, 27;   /* the same ink as channels, for the artwork's many alphas */
  --sc-surface: #ffffff;
  --sc-panel-cool: #f7f8f9;
  --sc-panel-warm: #f7f7f5;
  --sc-ground-cool: #eceef0;
  --sc-ground-warm: #ececea;
  --sc-raise-1: #fbf9f5;
  --sc-raise-2: #fbf3e3;
  --sc-ok: #eaf7ea;
  /* v1's warm wash on the About cards and the Numbers tiles. It was written as a literal, so it
     stayed bone-coloured when the palette changed; as a token it follows. */
  --wash: rgba(245, 243, 242, .3);

  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, monospace;

  --container: 1600px;
  --gutter: 40px;
  --header-h: 72px;
  --r-card: 16px;
  --r-pill: 64px;
  --r-input: 10px;
  --r-row: 12px;
  --r-tile: 8px;
  --r-round: 32px;
  --shadow-menu: 0 10px 20px rgba(0, 0, 0, .05);
  --ov-hero-radial: radial-gradient(139% 111% at 50.8% 0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .85) 99%);
  --ov-image-hero: linear-gradient(219deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 88%);
  --ov-benefits: linear-gradient(rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 66.7%, rgba(0, 0, 0, .9) 100%);
  --blur-glass: 16px;
  --blur-tile: 8px;
  --blur-header: 2px;

  /* easing (plan § Tokens; the spring's logged linear() is truncated after 33 values, its tail completed as a
     geometric decay to 1: ledger Task 0) */
  --e-appear: cubic-bezier(.44, 0, .13, .96);
  --e-rise: cubic-bezier(.23, 1, .32, 1);
  --e-zoom: cubic-bezier(.55, .06, .53, .81);
  --e-card: cubic-bezier(.3, 1, .6, 1);
  --e-theme: cubic-bezier(.15, 0, .4, 1);
  --e-menu: cubic-bezier(.7, 0, .075, .7);   /* refit to inv L190 over 440 ms (ledger Task 4) */
  --e-faq: cubic-bezier(.2, 0, .15, 1);
  --e-list: cubic-bezier(0, 0, .58, 1);
  --e-spring: linear(0, 0.0235, 0.083, 0.1647, 0.2582, 0.3557, 0.4517, 0.5423, 0.6252, 0.6991, 0.7636, 0.8186, 0.8647,
    0.9025, 0.933, 0.9571, 0.9756, 0.9895, 0.9996, 1.0065, 1.0111, 1.0137, 1.0149, 1.0151, 1.0146, 1.0136, 1.0123,
    1.0108, 1.0093, 1.0079, 1.0066, 1.0053, 1.0043, 1.0035, 1.0028, 1.0023, 1.0019, 1.0015, 1.0012, 1.001, 1.0008,
    1.0006, 1.0005, 1.0004, 1.0003, 1.0003, 1.0002, 1.0002, 1.0001, 1);

  /* text colours: sections in a theme flip these at once (M19), cards set their own */
  --fg-strong: var(--ink-strong);
  --fg: var(--ink);
}
@media (max-width: 759.98px) {
  :root { --gutter: 20px; --header-h: 64px; }
}

/* ============================================================ base (kept off scene nodes: scenes bring their own) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4, p, ul, ol, figure, hr, blockquote):not(:where(.scene, .scene *)) { margin: 0; }
:where(ul, ol):not(:where(.scene *)) { padding: 0; list-style: none; }
:where(a):not(:where(.scene *)) { color: inherit; text-decoration: none; }
:where(button):not(:where(.scene *)) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(img):not(:where(.scene *)) { display: block; max-width: 100%; }
:where(a, button, input, textarea, select, summary):not(:where(.scene *)):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--black); color: var(--white); font-size: 16px; }
.skip:focus-visible { top: 12px; }

/* ============================================================ type roles (inv L70-93; phone ≤759.98) */
.t-display { font-size: 80px; line-height: 88px; font-weight: 300; letter-spacing: -4px; color: var(--fg-strong); }
.t-stat { font-size: 72px; line-height: 72px; font-weight: 400; letter-spacing: -3.6px; color: var(--fg-strong); }
.t-stat .u { letter-spacing: -2.88px; }
.t-h2 { font-size: 58px; line-height: 69.6px; font-weight: 400; letter-spacing: -2.9px; color: var(--fg-strong); }
.t-price { font-size: 58px; line-height: 58px; font-weight: 400; letter-spacing: -2.32px; color: var(--fg-strong); }
.t-h1-detail { font-size: 52px; line-height: 62.4px; font-weight: 400; letter-spacing: -2.08px; color: var(--fg-strong); }
.t-h3-l { font-size: 40px; line-height: 48px; font-weight: 400; letter-spacing: -0.8px; color: var(--fg-strong); }
.t-h3 { font-size: 32px; line-height: 38.4px; font-weight: 400; letter-spacing: -0.64px; color: var(--fg-strong); }
.t-h3-s { font-size: 24px; line-height: 28.8px; font-weight: 400; letter-spacing: -0.24px; color: var(--fg-strong); }
.t-lead { font-size: 21px; line-height: 29.4px; font-weight: 400; letter-spacing: normal; color: var(--fg); }
.t-faq-q { font-size: 21px; line-height: 31.5px; font-weight: 400; letter-spacing: normal; color: var(--ink); }
.t-body { font-size: 19px; line-height: 26.6px; font-weight: 400; letter-spacing: -0.19px; color: var(--fg); }
.t-faq-a { font-size: 19px; line-height: 26.6px; font-weight: 300; letter-spacing: normal; color: var(--ink); }
.t-btn-m { font-size: 17px; line-height: 23.8px; font-weight: 400; letter-spacing: normal; }
.t-nav { font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: -0.16px; color: var(--ink); }
.t-small { font-size: 15px; line-height: 21px; font-weight: 400; letter-spacing: -0.15px; color: var(--fg); }
.t-foot-s { font-size: 14px; line-height: 19.6px; font-weight: 400; letter-spacing: normal; }
.t-eyebrow-l { font-family: var(--font-mono); font-size: 15px; line-height: 21px; font-weight: 400; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--fg); }
.t-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 14.4px; font-weight: 400; letter-spacing: 0.72px;
  text-transform: uppercase; color: var(--fg); }
@media (max-width: 759.98px) {
  .t-display { font-size: 48px; line-height: 52.8px; letter-spacing: -2.4px; }
  .t-stat { font-size: 52px; line-height: 52px; letter-spacing: -2.6px; }
  .t-stat .u { letter-spacing: -2.08px; }
  .t-h2 { font-size: 36px; line-height: 43.2px; letter-spacing: -1.8px; }
  .t-h1-detail { font-size: 30px; line-height: 36px; letter-spacing: -1.2px; }
  .t-h3-l { font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; }
  .t-h3 { font-size: 22px; line-height: 26.4px; letter-spacing: -0.44px; }
  .t-h3-s { font-size: 18px; line-height: 21.6px; letter-spacing: -0.18px; }
  .t-lead { font-size: 17px; line-height: 23.8px; }
  .t-faq-q { font-size: 17px; line-height: 25.5px; }
  .t-body { font-size: 16px; line-height: 22.4px; letter-spacing: -0.16px; }
  .t-faq-a { font-size: 16px; line-height: 22.4px; }
  .t-btn-m { font-size: 15px; line-height: 21px; }
  .t-nav { font-size: 17px; line-height: 23.8px; letter-spacing: normal; }
  .t-small { font-size: 13px; line-height: 18.2px; letter-spacing: -0.13px; }
  .t-foot-s { font-size: 12px; line-height: 16.8px; }
  .t-eyebrow-l { font-size: 13px; line-height: 18.2px; letter-spacing: 0.78px; }
  .t-eyebrow { font-size: 10px; line-height: 12px; letter-spacing: 0.6px; }
}
/* heading line wrappers (v2's <span class="ln">) */
.t-h2 .ln:not(.scene *), .t-display .ln:not(.scene *) { display: block; }

/* ============================================================ layout */
.contain { width: 100%; max-width: var(--container); margin: 0 auto; }
.section { padding: 120px var(--gutter); }
.section__head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 64px; }
.section__head .t-h2 { max-width: 800px; }
.section__lead { max-width: 650px; }
@media (max-width: 759.98px) {
  .section { padding: 60px var(--gutter); }
  .section__head { gap: 16px; margin-bottom: 40px; }
}

/* ============================================================ buttons (inv L151-163, M24) */
.btn:not(.scene *) { display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  border-radius: var(--r-pill); text-align: center; cursor: pointer; transition: opacity 250ms ease; }
.btn:not(.scene *) .btn__label { display: inline-block; transition: transform 250ms ease; }
.btn--l:not(.scene *) { height: 59px; padding: 16px 34px; font-size: 19px; line-height: 26.6px; letter-spacing: -0.19px; }
.btn--m:not(.scene *) { height: 50px; padding: 13px 32px; font-size: 17px; line-height: 23.8px; }
.btn--black:not(.scene *) { background: var(--accent); color: var(--white); }
/* the SVG paints this green inline; CSS takes it so a theme can reach it */
.check-circle circle { fill: var(--green); }
.btn--white:not(.scene *) { background: var(--white); color: var(--black); }
.btn--glass:not(.scene *) { background: var(--glass); color: var(--white); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); }
.btn--bone:not(.scene *) { background: var(--bone); color: var(--night); }
.btn--block:not(.scene *) { display: flex; width: 100%; }
.btn--black:not(.scene *):hover { opacity: .7; }
:is(.btn--white, .btn--glass, .btn--bone):not(.scene *):hover { opacity: .8; }
.btn:not(.scene *):hover .btn__label { transform: scale(.98); }
.btn:not(.scene *):disabled { background: var(--black-60); cursor: default; opacity: 1; }
@media (max-width: 759.98px) {
  .btn--l:not(.scene *) { height: 54px; font-size: 16px; line-height: 22.4px; letter-spacing: -0.16px; }
  .btn--m:not(.scene *) { height: 47px; font-size: 15px; line-height: 21px; }
}
.text-link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ============================================================ chip (v1 product chips; night = approved mock) */
.chip:not(.scene *) { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 32px; padding: 0 14px;
  border-radius: var(--r-tile); background: var(--cool-200); color: var(--ink); font-family: var(--font-mono); font-size: 12px;
  line-height: 14.4px; font-weight: 400; letter-spacing: 0.72px; text-transform: uppercase; white-space: nowrap; }
.chip:not(.scene *) svg { width: 14px; height: 14px; flex: 0 0 14px; }
.chip--night:not(.scene *) { background: rgba(242, 240, 232, .12); color: var(--bone); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (max-width: 759.98px) {
  .chip:not(.scene *) { height: 28px; padding: 0 12px; font-size: 10px; line-height: 12px; letter-spacing: 0.6px; }
  .chip:not(.scene *) svg { width: 12px; height: 12px; flex-basis: 12px; }
}
.check-circle { width: 32px; height: 32px; flex: none; }
.ficon { width: 20px; height: 20px; }

/* ============================================================ cards */
.card:not(.scene *) { border-radius: var(--r-card); --fg-strong: var(--ink-strong); --fg: var(--ink); color: var(--fg); }
.card--warm:not(.scene *) { background: var(--warm-50); }
.card--cool:not(.scene *) { background: var(--cool-50); }
.card--cool-200:not(.scene *) { background: var(--cool-200); }
.card--white:not(.scene *) { background: var(--white); }
/* the dark card: v1 drew it in its theme's blue-grey, judged off brand (feedback 2026-11-05 #9); v3 uses the
   site's own night, white text and the white button unchanged */
.card--night:not(.scene *) { background: var(--night); --fg-strong: var(--on-dark); --fg: var(--on-dark); }

/* ============================================================ header (inv L170-193, M1, M20-M22) */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h); --delay: 0ms;
  background-color: var(--white); --hfg: var(--ink); color: var(--hfg);
  transition: height 440ms var(--e-menu), background-color 500ms ease, -webkit-backdrop-filter 500ms ease, backdrop-filter 500ms ease; }
.site-header[data-delay="1400"] { --delay: 1400ms; }
.site-header[data-variant="transparent"] { background-color: rgba(255, 255, 255, .01); --hfg: var(--bone);
  -webkit-backdrop-filter: blur(var(--blur-header)); backdrop-filter: blur(var(--blur-header)); }
.site-header__inner { position: relative; max-width: 1740px; height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; }
.brand { display: flex; align-items: center; height: 100%; color: var(--hfg); transition: color 500ms ease; }
.brand .lockup { width: 91px; height: 20px; }
.primary { display: flex; align-items: center; margin-left: 64px; height: 50px; }
.primary__menu { position: relative; display: flex; align-items: center; }
.primary__link { display: inline-flex; align-items: center; gap: 6px; padding: 12px; font-size: 16px; line-height: 22.4px;
  letter-spacing: -0.16px; color: var(--hfg); transition: color 500ms ease; }
.primary__link:hover, .primary__trigger[aria-expanded="true"] { color: var(--grey); }
.primary__link .caret { width: 10px; height: 6px; transition: transform 500ms ease; }
.primary__trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.site-header__actions .btn:not(.scene *) { transition: opacity 250ms ease, background-color 250ms ease, color 250ms ease; }
.site-header[data-variant="transparent"] .site-header__actions .btn--black { background: var(--bone); color: var(--night); }
.burger { display: none; width: 21px; height: 32px; margin-left: auto; color: var(--hfg); }
.burger__icon { width: 21px; height: 32px; display: block; }
.burger__icon path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transform-origin: 10.5px 16px;
  transition: transform 440ms var(--e-menu); }
.site-header.is-menu-open .burger__top { transform: translateY(4px) rotate(45deg); }
.site-header.is-menu-open .burger__bottom { transform: translateY(-4px) rotate(-45deg); }

/* M1: the header fades in on load (Home: 1400 ms delay) */
@keyframes v3-fade-in { from { opacity: .001; } to { opacity: 1; } }
.js:not(.static) .site-header { animation: v3-fade-in 2000ms var(--e-appear) var(--delay) both; }
.calm:not(.static) .site-header { animation-duration: 600ms; }

/* mega-menu (inv L179-186, M21) */
.mega { position: absolute; top: calc(100% + 22px); left: -12px; z-index: 2; width: max-content; padding: 24px;
  border-radius: var(--r-input); background: var(--white); box-shadow: var(--shadow-menu); color: var(--ink); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.mega__inner { display: grid; grid-template-columns: 330px 330px; gap: 16px; }
.mega__col { display: flex; flex-direction: column; gap: 20px; }
.mega__eyebrow { color: var(--ink); }
.mega__items { display: flex; flex-direction: column; gap: 36px; }
.mega-card { display: flex; gap: 16px; align-items: flex-start; }
.mega-card__tile { flex: 0 0 52px; width: 52px; height: 52px; padding: 16px; border-radius: var(--r-tile); display: grid; place-items: center;
  transition: background-color 250ms ease; }
.mega-card--warm .mega-card__tile { background: var(--warm-50); }
.mega-card--cool .mega-card__tile { background: var(--cool-50); }
.mega-card--warm:hover .mega-card__tile { background: var(--warm-200); }
.mega-card--cool:hover .mega-card__tile { background: var(--cool-200); }
.mega-card__icon { width: 20px; height: 20px; color: var(--black); }
.team-icon { width: 20px; height: 20px; color: var(--black); }
.mega-card__text { display: flex; flex-direction: column; gap: 2px; }
.mega-card__title { font-size: 17px; line-height: 23.8px; font-weight: 700; color: var(--ink); }   /* v1: 700, #222 (QA P2 #1) */
.mega-card__desc { font-size: 15px; line-height: 21px; letter-spacing: -0.15px; color: var(--ink); max-width: 250px; }   /* v1: #222 (QA P2 #2) */
@keyframes v3-mega-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes v3-fade-only { from { opacity: 0; } to { opacity: 1; } }
.js:not(.static) .mega:not([hidden]) { animation: v3-mega-in 400ms var(--e-spring) both; }
.calm:not(.static) .mega:not([hidden]) { animation: v3-fade-only 300ms ease both; }

/* mobile menu (inv L188-193, M22) */
.mobile-menu { display: none; }
@media (max-width: 1023.98px) {
  .primary, .site-header__actions { display: none; }
  .burger { display: block; }
  .site-header { overflow: hidden; }
  .site-header.is-menu-open { height: 100vh; height: 100svh; background-color: var(--grey-ed); --hfg: var(--ink);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-menu { display: flex; flex-direction: column; gap: 24px; height: calc(100svh - var(--header-h)); overflow-y: auto;
    padding: 64px var(--gutter) 40px; visibility: hidden; transition: visibility 0s linear 440ms; overscroll-behavior: contain; }
  .is-menu-open .mobile-menu { visibility: visible; transition: none; }
  .mobile-menu__rows { display: flex; flex-direction: column; gap: 8px; }
  .mm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 24px 20px;
    border-radius: var(--r-row); background: var(--white); color: var(--ink); font-size: 17px; line-height: 23.8px; text-align: left; }
  .mm-row .caret { width: 10px; height: 6px; transition: transform 440ms var(--e-menu); }
  .mm-row[aria-expanded="true"] .caret { transform: rotate(180deg); }
  .mm-group { border-radius: var(--r-row); background: var(--white); }
  .mm-panel { padding: 0 12px 12px; }
  .mm-panel__inner { display: flex; flex-direction: column; gap: 32px; padding: 16px; border-radius: var(--r-input); background: var(--white); }
  .mm-panel__inner .mega__eyebrow { font-size: 10px; line-height: 12px; letter-spacing: 0.6px; }
  .mm-panel__inner .mega-card__title { font-size: 15px; line-height: 21px; }
  .mm-panel__inner .mega-card__desc { font-size: 13px; line-height: 18.2px; letter-spacing: -0.13px; }
  .mm-panel__inner .mega-card--warm .mega-card__tile { background: var(--warm-200); }
  .mm-panel__inner .mega-card--cool .mega-card__tile { background: var(--cool-200); }
  .mobile-menu__cta { display: flex; justify-content: center; }
}

/* ============================================================ page theme (inv L52-56, M19) */
.page { position: relative; z-index: 1; background-color: var(--white); transition: background-color 700ms var(--e-theme); }
.page[data-theme-now="black"] { background-color: var(--black); }
.page[data-theme-now="warm"] { background-color: var(--warm-200); }
.page[data-theme-now="black"] [data-theme="black"] { --fg-strong: var(--on-dark); --fg: var(--on-dark); }
.page[data-theme-now="black"] [data-theme="black"] .card:not(.scene *) { --fg-strong: var(--ink-strong); --fg: var(--ink); }
.page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *) { --fg-strong: var(--on-dark); --fg: var(--on-dark); }

/* ============================================================ rows (Home §4, M18) */
.rows:not(.scene *) { display: flex; flex-direction: column; gap: 20px; }
.row:not(.scene *) { display: flex; gap: 20px; opacity: .6; transition: opacity 400ms var(--e-spring); }
.row:not(.scene *).is-active { opacity: 1; }

/* ============================================================ stats (Home §2, M14) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stat { display: flex; flex-direction: column; justify-content: space-between; height: 250px; padding: 24px; }
.stat__cap { max-width: 220px; }
.stat__n { font-variant-numeric: tabular-nums; }
@media (max-width: 759.98px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .stat { height: 220px; }
}

/* ============================================================ FAQ (inv L278-279, L467-470, M13, M23) */
.faq__row { display: flex; gap: 64px; align-items: flex-start; }
.faq__head .t-h2 { max-width: 540px; }
.faq__head .section__lead { max-width: 440px; }
.faq__list { flex: 1 1 825px; min-width: 0; }
.faq-item { border-bottom: 1px solid var(--black-10); }
.faq-item__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 0;
  text-align: left; }
.faq-item__q .chevron { width: 20px; height: 20px; flex: none; transition: transform 450ms var(--e-faq); }
.faq-item__q[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.faq-item__a { overflow: hidden; transition: height 450ms var(--e-faq); }
/* v1 answer padding 12 / 0 / 36 (inv L469): the answer text starts 48 below the question text at 1440, 42 at 390. Never a
   negative margin here: .faq-item__a clips (overflow hidden), so anything lifted above its top is cut (QA P1-1). */
.faq-item__inner { padding: 12px 0 36px; }
.night-card { flex: 0 0 471px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 523px; padding: 40px; }
.night-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.night-card a[href^="mailto"] { text-decoration: underline; }
@media (max-width: 1023.98px) {
  .faq__row { flex-direction: column; gap: 40px; }
  .night-card { flex: none; width: 100%; min-height: 0; }
  .faq__list { flex: none; width: 100%; }
}
@media (max-width: 759.98px) {
  .faq .section__head { margin-bottom: 32px; }
  .faq__row { gap: 32px; }
  .night-card { min-height: 443px; }   /* v1's fixed card, 471x523 desktop / 350x443 phone (data-product-390.json) */
  .faq-item__q { padding: 24px 0; }
  .faq-item__inner { padding: 18px 0 24px; }
  .night-card { padding: 28px 20px; gap: 32px; }
}

/* ============================================================ scene hosts (v2 subpage.css L274-298, L990-991, re-scoped) */
.scene-host { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--scene-cool); }
.scene-host--section { background: var(--scene-warm); }
.scene-host > .scene { position: absolute; inset: 0; width: 100%; height: 100%; text-align: left; color: var(--night);
  font-family: var(--font-sans); font-weight: 400; -webkit-font-smoothing: antialiased; }
.scene-host .scene .panel { position: absolute; inset: 0; }
/* Out and Review carry their standalone page's section padding on the root (body scoped to #scene-*); inside a host
   the host is the frame, so it goes (else the root outgrows a host shorter than 272 px, e.g. Home §5 at 390). */
.scene-host > #scene-out, .scene-host > #scene-review { padding: 0; }
.scene-host .scene .seat { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); place-items: center; }
.scene-host .scene .seat > * { transform: var(--fit, none); }
.scene-host--section > .scene .panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  place-items: center; padding: 24px; }
.scene-host--section > .scene .panel > * { transform: var(--fit, none); transform-origin: 50% 0; }   /* FIT_JS: envelope fit */
.scene-host--ask #ask .panel { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; }
.scene-host--ask .scene .stage { display: block; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }

/* ============================================================ CTA band (inv L248-251, M16; no M25 hover zoom: QA P2 #4) */
.cta-band { padding: 64px var(--gutter); }
/* min-height, not height: v3's card copy is 772 px tall against v1's 747 px of room, so a fixed band put the
   checklist link 25 px OUTSIDE its own card, on the photo (invisible once the photo went light, 2026-11-06).
   v1's 827 stays the floor. */
.cta-band__photo { position: relative; max-width: var(--container); min-height: 827px; margin: 0 auto; padding: 40px;
  border-radius: var(--r-card); overflow: hidden; display: flex; justify-content: flex-end; align-items: stretch; isolation: isolate; }
/* 68 %, not centred: the card covers the band's right third, so a centred frame put the monitor half behind it.
   At 68 % the screen clears the card's edge at 1440 and 1800 (owner, 2026-11-06). */
.cta-band__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  object-position: 68% 50%; max-width: none; }
.cta-card { position: relative; width: 468px; display: flex; flex-direction: column; gap: 48px; padding: 40px;
  border-radius: var(--r-card); background: var(--black); color: var(--white); --fg-strong: var(--on-dark); --fg: var(--on-dark);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cta-card__text { display: flex; flex-direction: column; gap: 24px; }
.cta-card__features { display: flex; flex-direction: column; gap: 24px; }
.cta-card__line { height: 1px; border: 0; background: var(--white); opacity: .15; }   /* v1: white at .15 (QA P2 #3) */
.cta-card__feature { display: flex; gap: 12px; align-items: flex-start; }
.cta-card__icon { flex: 0 0 24px; width: 24px; height: 24px; color: var(--white); }
.cta-card__ftext { display: flex; flex-direction: column; gap: 2px; }
.cta-card__fbody { max-width: 340px; }
.cta-card__actions { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.cta-card__actions .btn:not(.scene *) { width: 100%; }
.cta-card__link { align-self: center; font-size: 16px; line-height: 22.4px; color: var(--white); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); transition: text-decoration-color 250ms ease; }
.cta-card__link:hover { text-decoration-color: var(--white); }
@media (max-width: 759.98px) {
  .cta-band { padding: 40px var(--gutter); }
  .cta-band__photo { height: auto; min-height: 562px; padding: 200px 20px 20px; }
  .cta-card { width: 100%; padding: 28px 20px; gap: 32px; }
  .cta-card__features { display: none; }
  .cta-card__actions { gap: 12px; }
  .cta-card__link { font-size: 13px; line-height: 18.2px; }
}

/* ============================================================ footer (inv L195-202, D4) */
.site-footer { background: var(--black); color: var(--white); padding: 80px var(--gutter); position: relative; z-index: 1; }
.site-footer__wrap { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 160px; }
.site-footer__top { display: flex; justify-content: space-between; gap: 40px; }
.site-footer__brand { width: 567px; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.site-footer__lockup { color: var(--white); }
.site-footer__lockup .lockup { width: 180px; height: 40px; }
.site-footer__tagline { font-size: 24px; line-height: 28.8px; letter-spacing: -0.24px; }
.site-footer__cols { display: flex; gap: 80px; }
.site-footer__col { display: flex; flex-direction: column; gap: 32px; }
.site-footer__title { font-size: 17px; line-height: 23.8px; font-weight: 400; opacity: .6; }
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links a { font-size: 19px; line-height: 26.6px; letter-spacing: -0.19px; transition: color 250ms ease; }
.site-footer a:hover { color: rgba(255, 255, 255, .8); }
.site-footer__bottom { display: flex; flex-direction: column; gap: 32px; }
.site-footer__line { height: 1px; border: 0; background: var(--white); }
.site-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 22px; }
.site-footer__loc { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; line-height: 19.6px; }
.site-footer__loc .pin { width: 22px; height: 22px; }
.site-footer__row--legal { font-size: 14px; line-height: 19.6px; }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { font-size: 14px; line-height: 19.6px; transition: color 250ms ease; }
.disclaimer { font-size: 14px; line-height: 19.6px; opacity: .4; }
.socials { display: flex; gap: 12px; }
@media (max-width: 1023.98px) {
  .site-footer__top { flex-direction: column; gap: 48px; }
  .site-footer__brand { width: auto; }
}
@media (max-width: 759.98px) {
  .site-footer { padding: 60px var(--gutter) 40px; }
  .site-footer__wrap { gap: 80px; }
  .site-footer__brand { gap: 32px; }
  .site-footer__tagline { font-size: 18px; line-height: 21.6px; letter-spacing: -0.18px; }
  .site-footer__cols { flex-direction: column; gap: 48px; }
  .site-footer__col { gap: 24px; }
  .site-footer__links { gap: 10px; }
  .site-footer__links a { font-size: 16px; line-height: 22.4px; letter-spacing: -0.16px; }
  .site-footer__bottom { gap: 24px; }
  .site-footer__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__loc { margin-left: 0; font-size: 12px; line-height: 16.8px; }
  .site-footer__row--legal, .site-footer__legal a { font-size: 12px; line-height: 16.8px; }
}

/* ============================================================ forms + checklist dialog (inv L479-483, D6) */
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.field__label { font-size: 19px; line-height: 26.6px; letter-spacing: -0.19px; color: var(--ink); }
.field__input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--black-30); border-radius: var(--r-input);
  background: var(--white); color: var(--ink); font: inherit; font-size: 19px; line-height: 26.6px; }
.field__input::placeholder { color: var(--grey); }
.field__input:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.checklist { width: min(584px, calc(100% - 40px)); max-height: calc(100% - 40px); margin: auto; padding: 40px; border: 0;
  border-radius: var(--r-card); background: var(--white); color: var(--ink); overscroll-behavior: contain; }
.checklist::backdrop { background: rgba(0, 0, 0, .6); }
.checklist__form, .checklist__done { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.checklist .chip:not(.scene *) { margin-right: 56px; }
.checklist__title { margin-top: 24px; }
.checklist__lead { margin-top: 16px; }
.checklist__submit:not(.scene *) { margin-top: 32px; }
.checklist__note { margin-top: 16px; color: var(--black-60); }
.checklist__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checklist__close { position: absolute; top: -16px; right: -16px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-round); background: var(--warm-50); color: var(--ink); transition: background-color 170ms ease; }
.checklist__close:hover { background: var(--white); }
.checklist__close svg { width: 16px; height: 16px; }
@media (max-width: 759.98px) {
  .checklist { padding: 28px 20px; }
  .checklist__close { top: -8px; right: -4px; }
}

/* ============================================================ Home (plan § Home; v1 rects assets/v1/data/rects-home-*.json) */
/* §1 hero: sticky stage, media card inset 72/24/24 r16 (inv L214), copy bottom-centre pad-bottom 120.
   The card does not clip its media (v1 'Media Wrapper' is overflow visible): the rounded clip rides on the zoom
   layer, so at load the 1.6x media covers the whole viewport and the white frame appears as it lands (M2). The
   section clips that overscan. */
.home-hero { position: sticky; top: 0; z-index: 0; height: max(900px, 100vh); height: max(900px, 100svh);
  overflow: clip; --fg-strong: var(--on-dark); --fg: var(--on-dark); color: var(--on-dark); }
.home-hero__stage { position: absolute; inset: 0; padding: 72px 24px 24px; transform-origin: 50% 50%; }
.home-hero__media { position: relative; width: 100%; height: 100%; border-radius: var(--r-card);
  background: var(--night); isolation: isolate; }
/* its own ground: the canvas is transparent until WebGL draws its first frame, which waits for the dot clouds */
.home-hero__zoom { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-card); background: var(--night);
  transform-origin: 50% 50%; }
/* CLIP-PATH, not border-radius, is what rounds this canvas. Firefox will not hold a border-radius
   clip on a live GPU-composited WebGL canvas: the hero's corners rendered square and flickered round
   for single frames while scrolling, as the layer was recomposited. That holds whether the radius
   sits on the zoom layer or on the canvas itself; clip-path is a different code path and does stick.
   Established on real hardware with a five-way side-by-side (owner, 2026-11-10): ancestor clip and
   canvas border-radius both flickered, while clip-path, a mask and a shader-painted corner all held.
   Headless Firefox clips correctly either way, so no harness here can see this - which is exactly how
   it shipped twice. border-radius stays too: it costs nothing and is what Chrome and Safari use.
   Both are zeroed on a phone below, where the card is full-bleed. */
.home-hero__zoom #stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  border-radius: inherit; clip-path: inset(0 round var(--r-card)); }
.home-hero__overlay { position: absolute; inset: 0; background: var(--ov-hero-radial); pointer-events: none; }
/* centred in the stage, not sitting on its floor (owner, 2026-11-09). v1 anchored its hero copy to the bottom of
   the media card; v3's copy is centred both ways from 760 up, and keeps v1's bottom anchor on a phone, where the
   product above the copy needs the upper half to itself. */
.home-hero__copy { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px; padding: 40px; text-align: center; }
.home-hero__text { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 900px; }
.home-hero__eyebrow { color: rgba(255, 255, 255, .8); }
.home-hero__h1 { color: var(--on-dark); }
.home-hero__lead { max-width: 660px; color: var(--on-dark); }
.home-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* M2 media zoom, M3 text then CTAs (inv L403-404); on inner wrappers, so the scroll-linked exit (M15, inline
   styles on the stage and #hero-copy) never fights an animation's fill */
@keyframes v3-hero-zoom { from { transform: scale(1.6); } to { transform: none; } }
@keyframes v3-rise-60 { from { opacity: .001; transform: translateY(60px); } to { opacity: 1; transform: none; } }
/* `backwards`, NOT `both`. A forwards fill keeps the animation applying its last keyframe for ever, and that
   keyframe is `transform: none` -- which Firefox computes as matrix(1,0,0,1,0,0), an identity TRANSFORM that is
   still set. The element therefore stays a composited layer indefinitely, and a composited layer loses the
   rounded clip on the canvas inside it: the hero's corners were square from the moment the zoom landed until
   the first scroll forced a re-raster, which is exactly what the owner saw (2026-11-10). `backwards` still
   holds the 1.6x start through the 200ms delay, and the end state is identical because the keyframe's `to` IS
   the base style -- the forwards fill was never doing anything. */
.js:not(.static):not(.calm) .home-hero__zoom { animation: v3-hero-zoom 1400ms var(--e-zoom) 200ms backwards; }
.js:not(.static) .home-hero__text, .js:not(.static) .home-hero__ctas { animation: v3-rise-60 1600ms var(--e-rise) 1400ms both; }
.calm:not(.static) .home-hero__text, .calm:not(.static) .home-hero__ctas { animation-name: v3-fade-only; }
@media (max-width: 759.98px) {
  .home-hero { position: relative; }
  .home-hero__stage { padding: 0; }
  .home-hero__media, .home-hero__zoom { border-radius: 0; }
  .home-hero__zoom #stage { clip-path: none; }
  .home-hero__copy { justify-content: flex-end; padding: 40px var(--gutter) 100px; }
  .home-hero__ctas { flex-direction: column; align-self: stretch; }
  .home-hero__ctas .btn:not(.scene *) { width: 100%; }
}
#hero-cover-sentinel { height: 1px; margin-bottom: -1px; }

/* §2 intro (inv L219): warm wrapper inset 24, pad 64/40, quote 859 + author block, three stat cards */
.intro { padding: 0 24px 24px; }
.intro__wrap { max-width: var(--container); margin: 0 auto; padding: 64px 40px; border-radius: var(--r-card);
  background: var(--warm-50); display: flex; flex-direction: column; gap: 120px; }
.intro__top { display: flex; flex-direction: column; gap: 80px; }
.intro__quote-row { display: flex; align-items: flex-end; gap: 24px; }
.intro__quote { flex: 0 1 859px; }
/* the author block keeps its content width and the quote gives way (at 1024 a 1 1 0 author got 13 px: QA P1-3) */
.intro__author { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 8px; }
.intro__lockup { color: var(--black); margin-bottom: 12px; }
.intro__lockup .lockup { width: 91px; height: 20px; }
.intro__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); margin-bottom: 12px; }
.intro .stat { padding: 24px; }
@media (max-width: 1023.98px) {
  .intro__quote-row { flex-direction: column; align-items: flex-start; }
  .intro__quote { flex: none; }
}
@media (max-width: 759.98px) {
  .intro { padding: 0; }
  .intro__wrap { padding: 40px 20px; gap: 64px; border-radius: 0; }
  .intro__top { gap: 40px; }
  .intro .stats { gap: 16px; }
}

/* §3 main features (inv L226): 448 filler + right column; sticky nav (top 200) + cards at the column's full width.
   v1 centred the cards at 90 % of the column, which left them 45 px inside the H2's left edge at 1440; feedback
   2026-11-05 #3 puts them on the heading's grid (left edge = the H2's, right edge = the container's), v1's vertical
   margins kept */
.features__head { display: flex; gap: 16px; margin-bottom: 64px; }
.features__filler { flex: 0 0 448px; }
.features__right { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.features__right .t-h2 { max-width: 780px; }
.features__scroll { display: flex; gap: 16px; align-items: flex-start; }
.feature-nav { position: sticky; top: 200px; flex: 0 0 448px; display: flex; flex-direction: column; gap: 8px; }
.feature-nav__item { display: flex; align-items: center; gap: 8px; height: 29px; color: var(--black-60); transition: color 250ms ease; }
.feature-nav__item.is-active { color: var(--black); }
.feature-nav__mark { display: none; }
.feature-nav__item.is-active .feature-nav__mark { display: inline-block; }
.feature-nav__label { display: inline-block; }
.features__cards { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.feature-card { margin: 39px 0; overflow: hidden; border-radius: var(--r-card); background: var(--cool-200); }
.feature-card__media.scene-host { height: 524px; border-radius: 0; }
.feature-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px;
  background: var(--cool-50); }
/* the pillar chip (feedback 2026-11-05 #4): the subpages' chip, as a link to the pillar's page; hover and keyboard
   focus turn it black so it reads as a control, the focus ring stays the site's own */
.feature-card__pillar:not(.scene *) { transition: background-color 250ms ease, color 250ms ease; }
.feature-card__pillar:not(.scene *):hover, .feature-card__pillar:not(.scene *):focus-visible { background: var(--black);
  color: var(--white); }
.feature-card__pillar:not(.scene *):focus-visible { outline-color: var(--black); }
@media (max-width: 1023.98px) {
  .features__filler, .feature-nav { display: none; }
}
@media (max-width: 759.98px) {
  .features__head { margin-bottom: 48px; }
  .feature-card { margin: 24px 0; }
  .feature-card__media.scene-host { height: 260px; }
  .feature-card__text { gap: 12px; padding: 24px; }
}

/* §4 management features, dark (D2, mock home-4): rows of a scene card 843x537 and a text card */
.mf { padding-top: 180px; padding-bottom: 180px; }
.mf__h2 { max-width: 800px; margin-bottom: 80px; }
.mf-row { height: 537px; }
.mf-scene.scene-host { flex: 0 0 62%; height: 100%; }
.mf-text:not(.scene *) { flex: 1 1 0; min-width: 0; padding: 40px; }
.mf-text__h { max-width: 400px; }
.mf-text__body:not(.scene *) { max-width: 380px; margin-top: 20px; color: var(--card-muted); }
@media (min-width: 1024px) {
  .scene-host--ask #ask .stage { transform: var(--fit, none); }
}
@media (max-width: 1023.98px) {
  .mf-row:not(.scene *) { flex-direction: column; height: auto; gap: 12px; }
  .mf-row--scene-first .mf-text { order: -1; }
  .mf-scene.scene-host { flex: none; width: 100%; height: 440px; }
  .mf-scene.scene-host--ask { height: auto; }
  .scene-host--ask > #ask { position: relative; }
  .scene-host--ask #ask .panel { position: relative; inset: auto; height: 520px; }
  .mf-text__h { max-width: none; }
}
@media (max-width: 759.98px) {
  .mf { padding-top: 60px; padding-bottom: 60px; }
  .mf__h2 { margin-bottom: 40px; }
  .mf .rows:not(.scene *) { gap: 24px; }
  .mf-text:not(.scene *) { padding: 20px; }
  .mf-text__body:not(.scene *) { margin-top: 12px; }
  .mf-scene.scene-host--section { height: 300px; }
}

/* §5 Benefits: the Pricing page's shell (owner, 2026-11-06). v1's dark bento (a 462 x 940 photo card beside a 2x2
   of 460-tall cards, inv L238-241) is gone: v3 had a thin scene where the photo was, so the section read off balance
   and sat on the black the assistant section above it owns. Now the Values section's head over two squares, the
   scene left and Pricing's mini cards right, on Pricing's own grey band. Everything structural rides on the shipped
   .section.comparison / .comparison__row / .mini-plan rules; only what this content needs is set here. */
.benefits__head { margin-bottom: 64px; align-items: flex-start; }
.benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
/* .comparison__row's own 3-column rule is later in this sheet, so the override carries one more class */
.benefits .benefits__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefits__media { overflow: hidden; border-radius: var(--r-card); }
.benefits__stage.scene-host { height: 100%; min-height: 460px; border-radius: 0; }
/* the check sits on the title's first line, at Pricing's own 24 px and 12 px gap (.plan__check) */
.benefits__mini-h { display: flex; align-items: flex-start; gap: 12px; }
.benefits__mini-h .check-circle { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
/* square only while the two sit side by side: stacked, each takes its content's height */
@media (min-width: 1200px) {
  .benefits .benefits__cards, .benefits__media { aspect-ratio: 1 / 1; }
  .benefits .benefits__cards { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .benefits__cards .mini-plan { min-height: 0; }
}
/* below 1200 a half-width card would starve the scene (the fit scales down, never up: 456 px at 1024 renders the
   708 px artwork at 60 %, where its text stops being readable), so the two stack instead */
@media (max-width: 1199.98px) {
  .benefits__grid { grid-template-columns: minmax(0, 1fr); }
  .benefits__stage.scene-host { min-height: 380px; }
}
@media (max-width: 759.98px) {
  .benefits .benefits__cards { grid-template-columns: minmax(0, 1fr); }
  .benefits__stage.scene-host { min-height: 300px; }
}

/* §6 values, from v1 /careers (inv L373): warm band, heading max 500, 3x2 grid gap 120/96 */
/* the same grey as the Benefits section above it (owner, 2026-11-09), not v1's bone. The token itself is
   untouched: the Team collaboration page, a Pricing card, the chips and the mega-menu hover still use it. */
.values { background: var(--grey-50); }
.values__head { margin-bottom: 96px; }
.values__head .t-h2 { max-width: 800px; }
.values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 120px 96px; }
.values__cell { display: flex; flex-direction: column; gap: 16px; }
.values__icon { width: 36px; height: 36px; color: var(--black); }
.values__body { margin-top: -4px; }
@media (max-width: 1023.98px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 48px; }
}
@media (max-width: 759.98px) {
  .values__head { margin-bottom: 48px; }
  .values__grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .values__icon { width: 28px; height: 28px; }
}

/* ============================================================ product subpages (plan Task 8: Create, Connect, Comply, Assistant) */
/* subhero: the approved mock (shoedog docs/todos/review/49-v3-mock-subhero-build.py L51-139, rulings 23 + 25): v1's
   case-study detail shape on v2's field-only dot field; v1's 200 on top and 200 below = 975 tall at every desktop width */
.subhero { position: relative; isolation: isolate; overflow: hidden; padding: 200px var(--gutter); background: var(--night);
  color: var(--bone); --fg-strong: var(--bone); --fg: var(--bone-64); }
.subhero__field { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.subhero__row { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: stretch; }
.subhero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-width: 0; }
.subhero__h1 { max-width: 640px; margin-top: 24px; text-wrap: balance; }
.subhero__lead { max-width: 560px; margin-top: 24px; text-wrap: pretty; }
.subhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.subhero__link { color: var(--bone); font-size: 19px; line-height: 26.6px; letter-spacing: -0.19px; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--bone-40);
  transition: text-decoration-color 250ms ease; }
.subhero__link:hover { text-decoration-color: var(--bone); }
.subhero__stage.scene-host { height: 575px; }
/* M4 (the picture: opacity 0 -> 1 + scale 1.15 -> 1, 1300) and M5 (text 2300, actions 2800, rise 60), inv L405-406 */
@keyframes v3-media-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }
.js:not(.static) .subhero__stage { animation: v3-media-in 1300ms var(--e-appear) both; }
.js:not(.static) .subhero__top { animation: v3-rise-60 2300ms var(--e-rise) both; }
.js:not(.static) .subhero__actions { animation: v3-rise-60 2800ms var(--e-rise) both; }
.calm:not(.static) .subhero__stage, .calm:not(.static) .subhero__top, .calm:not(.static) .subhero__actions { animation-name: v3-fade-only; }
@media (max-width: 1023.98px) {
  .subhero__row { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .subhero__copy { justify-content: flex-start; }
  .subhero__stage.scene-host { width: 100%; max-width: 640px; }
  .subhero__stage.scene-host--ask { height: auto; }
}
@media (max-width: 759.98px) {
  .subhero { padding: 150px var(--gutter) 48px; }
  .subhero__row { gap: 48px; }
  .subhero__copy { gap: 32px; }
  .subhero__h1, .subhero__lead { margin-top: 20px; }
  .subhero__actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .subhero__actions .btn:not(.scene *) { width: 100%; }
  .subhero__link { font-size: 16px; line-height: 22.4px; text-align: center; }
  .subhero__stage.scene-host { height: auto; aspect-ratio: 5 / 4; }
  .subhero__stage.scene-host--ask { aspect-ratio: auto; }
}

/* feature rows: v1 /product #expense-tracking, #budget-control, #report-engine (rects-product-1440.json): rows of
   1360 x 650 = text 640 (pad 64) + illustration 700 (pad 64), gap 20; three cards 440 x 367 (pad 40, gap 100) */
.prows { display: flex; flex-direction: column; gap: 20px; }
.prow { display: flex; gap: 20px; min-height: 650px; }
.prow--full { min-height: 0; }
.prow__text:not(.scene *) { flex: 0 0 calc((100% - 20px) * 640 / 1340); min-width: 0; display: flex; flex-direction: column;
  justify-content: space-between; gap: 64px; padding: 64px; }
.prow--full .prow__text:not(.scene *) { flex: 1 1 auto; }
.prow__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.prow--full .prow__head .t-h2 { max-width: 860px; }
.prow__body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.prow__body .t-lead { max-width: 640px; }
.prow__media { flex: 1 1 0; min-width: 0; display: flex; padding: 64px; border-radius: var(--r-card); }
.prow__media--cool { background: var(--cool-50); }
.prow__media--cool-200 { background: var(--cool-200); }
.prow__media > .scene-host { flex: 1 1 auto; min-height: 522px; }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pcard:not(.scene *) { display: flex; flex-direction: column; justify-content: space-between; gap: 100px; min-height: 367px; padding: 40px; }
.pcard__mark { display: grid; place-items: center; width: 36px; height: 36px; color: var(--black); }
.pcard__mark .ficon { width: 36px; height: 36px; stroke-width: .85; }
.pcard__n { display: grid; place-items: center; width: 36px; height: 36px; border: 1.2px solid currentColor; border-radius: 50%;
  font-size: 16px; line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
.pcard__text { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
@media (max-width: 1023.98px) {
  .prow:not(.scene *) { flex-direction: column; min-height: 0; }
  .prow__text:not(.scene *) { flex: none; }
  .prow__media { flex: none; height: 560px; }
  .prow__media > .scene-host { min-height: 0; }
  .pcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759.98px) {
  .prows, .prow:not(.scene *), .pcards { gap: 16px; }
  .prow__text:not(.scene *) { gap: 32px; padding: 24px; }
  .prow__media { height: auto; aspect-ratio: 1; padding: 20px; }
  .pcard:not(.scene *) { gap: 48px; min-height: 253px; padding: 24px; }
}

/* ============================================================ Pricing (plan Task 12; assets/v1/data/data-pricing-*.json) */
/* text hero (inv L105, L117): pad 200/40/96, centred heading wrapper gap 24, H1 max 570, lead max 530; M6 + M7 */
.texthero { padding: 200px var(--gutter) 96px; background: var(--white); }
.texthero__head { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 24px; text-align: center; }
.texthero__h1 { max-width: 570px; }
.texthero__h1 .w { display: inline-block; }
.texthero__lead { max-width: 530px; }
@keyframes v3-rise-10 { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v3-plans-in { from { opacity: .001; transform: translateY(60px) scale(.95); } to { opacity: 1; transform: none; } }
.js:not(.static) .texthero__head { animation: v3-rise-60 1000ms var(--e-appear) 200ms both; }
.js:not(.static) .texthero__h1 .w { animation: v3-rise-10 1000ms var(--e-appear) calc(150ms + var(--i) * 20ms) both; }
.js:not(.static) .plans__grid { animation: v3-plans-in 1000ms var(--e-appear) 100ms both; }
.calm:not(.static) .texthero__head, .calm:not(.static) .texthero__h1 .w, .calm:not(.static) .plans__grid { animation-name: v3-fade-only; }

/* plans: v1's #fafafa wrapper pad 40 (the band is the section, so the 1600 cap holds at 1800); two cards where v1 had
   three 432s with gap 32 (pad 40, r16); v1 card 2 ground #f2ece8 for card 1, white for the form card */
.plans { padding: 40px var(--gutter); background: var(--grey-50); }
.plans__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.card--warm-200:not(.scene *) { background: var(--warm-200); }
.plan:not(.scene *) { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding: 40px; }
.plan__top { display: flex; flex-direction: column; gap: 12px; }
.plan__from { color: var(--ink); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.plan__unit { font-size: 17px; line-height: 23.8px; color: var(--ink); }
.plan__note { color: var(--ink); }
.plan__checks { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.plan__check { display: flex; align-items: flex-start; gap: 12px; color: var(--black); }
.plan__check .check-circle { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; }
.plan__check .t-body { color: var(--black); }
.price-form { display: flex; flex-direction: column; }
.price-form__submit:not(.scene *) { margin-top: 48px; }
.price-form__sent { margin-top: 24px; color: var(--ink); }

/* comparison: v1's plan-header row only (1360 x 300, white r16, three 279 x 252 #fafafa mini cards) carrying the props */
.section.comparison { padding-top: 96px; padding-bottom: 96px; background: var(--grey-50); }
.comparison__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 24px;
  border-radius: var(--r-card); background: var(--white); }
.mini-plan { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 252px; padding: 24px;
  border-radius: var(--r-card); background: var(--grey-50); }
.mini-plan__body { max-width: 340px; color: var(--ink); }
.faq--grey { background: var(--grey-50); }
@media (max-width: 1023.98px) {
  .plans__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 759.98px) {
  .texthero { padding: 150px var(--gutter) 48px; }
  .plans { padding: 24px; }
  .plan:not(.scene *) { gap: 24px; padding: 24px; }
  .plan__checks { gap: 16px; margin-top: 8px; }
  .price-form__submit:not(.scene *) { margin-top: 40px; }
  .section.comparison { padding-top: 48px; padding-bottom: 48px; }
  .comparison__row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .mini-plan { min-height: 0; gap: 12px; padding: 20px; }
}

.form-notice { margin-top: 16px; color: var(--ink); }
.form-notice a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ Legal pages (inv L377-380: a #fafafa content
   section, a sticky 432 "LAST UPDATED" card on the left, an 864 column of numbered sections on the right) */
.section.legal { padding-top: 96px; padding-bottom: 96px; background: var(--grey-50); }
.legal__row { display: grid; grid-template-columns: 432px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal__meta { position: sticky; top: 140px; padding: 32px; border-radius: var(--r-card); }
.legal__meta-label { color: var(--ink); }
.legal__meta-date { margin-top: 8px; }
.legal__body { max-width: 864px; display: flex; flex-direction: column; gap: 56px; }
.legal__h { margin-bottom: 20px; }
.legal__p + .legal__p { margin-top: 16px; }
.legal__p { color: var(--ink); }
.legal__p a { color: var(--black); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--black-30, rgba(0, 0, 0, .3)); transition: text-decoration-color 170ms ease; }
.legal__p a:hover { text-decoration-color: var(--black); }
@media (max-width: 1023.98px) {
  .legal__row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .legal__meta { position: static; }
}
@media (max-width: 759.98px) {
  .section.legal { padding-top: 48px; padding-bottom: 48px; }
  .legal__body { gap: 40px; }
  .legal__meta { padding: 24px; }
}

/* ============================================================ About (plan Task 13; assets/v1/data/data-about-*.json) */
/* hero: the subhero with v1's About photo in the 575-tall picture frame (r16, cover); M4 rides on .subhero__stage */
.subhero__photo { position: relative; height: 575px; overflow: hidden; border-radius: var(--r-card); background: var(--night); }
.subhero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* intro: v1's centred heading wrapper (gap 24), word reveal rise 20 (M10); the four cards are dropped */
.section__head.about-intro__head { align-items: center; margin-bottom: 0; text-align: center; }
.about-intro__head .about-intro__h2 { max-width: 1000px; }
.about-intro__lead { max-width: 660px; }

.section__head.numbers__head { align-items: center; text-align: center; }
.numbers__head .t-h2 { max-width: 640px; }
.numbers__head .section__lead { max-width: 520px; }
@media (max-width: 759.98px) {
  .section__head.numbers__head { align-items: flex-start; gap: 24px; margin-bottom: 48px; text-align: left; }
}
/* numbers: v1's 2 x 670 grid of 253-tall cards (pad 40, caption 21 top, figure 80/300 bottom); the night Big card
   (150/165) takes the right column. v1's left cards: rgba(245,243,242,.3), clear, #fbfaf9 */
.numbers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 253px; gap: 20px; }
.num:not(.scene *) { grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  min-width: 0; padding: 40px; }
.num:not(.scene *):nth-child(1) { background: var(--wash); }
.num:not(.scene *):nth-child(4) { background: var(--warm-50); }
.num--big:not(.scene *) { grid-column: 2; grid-row: 1 / span 3; }
.num__fig--big { font-size: 150px; line-height: 165px; font-weight: 400; letter-spacing: -7.5px; color: var(--fg-strong); }

/* awards: v1's two 672 x 700 photo cards, gap 16, section pad 120/40/96 */
.section.awards { padding-bottom: 96px; }
.awards__row { display: flex; gap: 16px; }
.photo-card { position: relative; flex: 1 1 0; min-width: 0; height: 700px; overflow: hidden; border-radius: var(--r-card); }
/* no hover zoom: v1's About awards, Team photos and CTA photo hold still on hover (QA P2 #4; v1's 1.05 is on case and
   blog cards only, which v3 does not have) */
.photo-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* approach: v1's 3-column grid (gap 10, rows 345): night title card over two columns (H2 max 510 + wordmark, body
   at the bottom), then four cards (rgba(245,243,242,.3), pad 40: mark 36 + H3 24 top, lead at the bottom) */
.approach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(345px, auto); gap: 10px; }
.approach-title:not(.scene *) { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px; }
.approach-title__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.approach-title__h { max-width: 510px; }
.approach-title__mark { flex: none; padding-top: 12px; color: var(--white); }
.approach-title__mark .lockup { width: 122px; height: 27px; }
.approach-title__body { max-width: 823px; }
.approach-card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px;
  border-radius: var(--r-card); background: var(--wash); color: var(--ink); transition: background-color 250ms ease; }
.approach-card:hover { background: var(--warm-200); }
.approach-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.approach-card__icon { width: 36px; height: 36px; color: var(--black); }
.approach-card__body { max-width: 367px; }
@media (max-width: 1023.98px) {
  .subhero__photo { width: 100%; max-width: 640px; }
  .approach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
  .subhero__photo { height: auto; aspect-ratio: 5 / 4; }
  .numbers__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .num:not(.scene *) { grid-column: 1; height: 200px; padding: 24px; }   /* v1 390: 350 x 200, Big 350 x 240 */
  .num--big:not(.scene *) { grid-column: 1; grid-row: auto; height: 240px; }
  .num__fig--big { font-size: 72px; line-height: 79.2px; letter-spacing: -3.6px; }
  .section.awards { padding-bottom: 60px; }
  .awards__row { flex-direction: column; }
  .photo-card { flex: none; width: 100%; height: 365px; }
  .approach__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .approach-title:not(.scene *) { grid-column: auto; min-height: 360px; padding: 24px; }
  .approach-card { min-height: 300px; padding: 24px; }
  .approach-title__mark .lockup { width: 91px; height: 20px; }
}

/* ============================================================ Book a demo (plan Task 14; assets/v1/data/data-contact_sales-*.json) */
/* v1 /contact/sales: #fbfaf9 band pad 200/40/96, one white card max 1400 pad 64 gap 64 r16, two 584 columns */
.contact { padding: 200px var(--gutter) 96px; background: var(--warm-50); }
.contact__card { max-width: 1400px; margin: 0 auto; display: flex; align-items: flex-start; gap: 64px; padding: 64px;
  border-radius: var(--r-card); background: var(--white); }
.contact__col, .demo-form { flex: 1 1 0; min-width: 0; }
.contact__col { display: flex; flex-direction: column; gap: 64px; }
.contact__head { display: flex; flex-direction: column; gap: 32px; }
.contact__h1 { max-width: 400px; }
.contact__list { display: flex; flex-direction: column; gap: 12px; max-width: 400px; }
.contact__check { display: flex; align-items: center; gap: 16px; min-height: 28px; }
.contact__check .t-body { color: var(--black); }
.contact__icon { width: 24px; height: 24px; flex: 0 0 24px; align-self: flex-start; margin-top: 2px; }
.contact__helper { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 340px; }
.contact__helper-text { color: var(--grey); }
.contact__helper-link { font-size: 19px; line-height: 26.6px; letter-spacing: -0.19px; color: var(--black-60); transition: color 250ms ease; }
.contact__helper-link:hover { color: var(--ink); }
/* the form: v1 rhythm fields 24 / label->input 8 / fields->submit 48; inputs 52, textarea 160, submit 56 */
.demo-form { display: flex; flex-direction: column; }
.demo-form__fields { display: flex; flex-direction: column; gap: 24px; }
.demo-form .field { margin-top: 0; }
.demo-form .field__input { height: 52px; padding: 0 12px; font-size: 19px; line-height: 22.8px; letter-spacing: -0.19px; color: var(--black); }
.demo-form .field__input--area { height: 160px; padding: 12px; resize: vertical; }
.demo-form__submit:not(.scene *) { height: 56px; margin-top: 48px; }
.demo-form__sent { color: var(--ink); }
.demo-form__submit:not([hidden]) + .demo-form__sent { margin-top: 24px; }
/* load motion (v1 appearConfig): card 60 / 1000 / 100; column + form 60 / 1000 / 200; list 20 / 600 / 400; helper fade */
@keyframes v3-rise-20 { from { opacity: .001; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js:not(.static) .contact__card { animation: v3-rise-60 1000ms var(--e-appear) 100ms both; }
.js:not(.static) .contact__col, .js:not(.static) .demo-form { animation: v3-rise-60 1000ms var(--e-appear) 200ms both; }
.js:not(.static) .contact__list { animation: v3-rise-20 600ms var(--e-list) 400ms both; }
.js:not(.static) .contact__helper { animation: v3-fade-only 900ms var(--e-list) 400ms both; }
.calm:not(.static) .contact__card, .calm:not(.static) .contact__col, .calm:not(.static) .demo-form,
.calm:not(.static) .contact__list { animation-name: v3-fade-only; }
@media (max-width: 1023.98px) {
  .contact__card { flex-direction: column; align-items: stretch; }
  .contact__col, .demo-form { flex: none; }
}
@media (max-width: 759.98px) {
  .contact { padding: 150px var(--gutter) 48px; }
  .contact__card { gap: 32px; padding: 24px; }
  .contact__col { gap: 32px; }
  .contact__head { gap: 24px; }
  .contact__list { gap: 10px; }
  .contact__check { gap: 12px; min-height: 24px; }
  .contact__icon { width: 20px; height: 20px; flex-basis: 20px; margin-top: 1px; }
  .contact__helper-link { font-size: 16px; line-height: 22.4px; letter-spacing: -0.16px; }
  .demo-form { padding-top: 12px; }
  .demo-form .field__label { font-size: 16px; line-height: 22.4px; letter-spacing: -0.16px; }
  .demo-form .field__input { height: 46px; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; }
  .demo-form .field__input--area { height: 160px; }
  .demo-form__submit:not(.scene *) { height: 56px; margin-top: 32px; }
}

/* ============================================================ appear states (M10-M13): only under html.js */
[data-rise="20"] { --rise: 20; }
[data-rise="15"] { --rise: 15; }
.js [data-reveal] .w:not(.scene *) { display: inline-block; opacity: .001; transform: translateY(calc(var(--rise, 15) * 1px));
  transition: opacity 900ms var(--e-appear) calc(var(--i) * 20ms), transform 900ms var(--e-appear) calc(var(--i) * 20ms); }
.js [data-reveal].is-in .w:not(.scene *) { opacity: 1; transform: none; }
.js [data-reveal-after] { opacity: 0; transition: opacity 850ms var(--e-card) var(--after, 0ms); }
.js [data-reveal-after].is-in { opacity: 1; }
.js [data-appear] { opacity: .001; transition: opacity 850ms var(--e-card) calc(var(--sib, 0) * 100ms); }
.js [data-appear].is-in { opacity: 1; }
.js .faq__list { opacity: 0; transform: translateY(60px); transition: opacity 1200ms var(--e-card), transform 1200ms var(--e-card); }
.js .faq__list.is-in { opacity: 1; transform: none; }

/* ============================================================ Team collaboration (plan Task 15)
   v1 /product Management Features (data-product-1440.json boxes): rows 1360 x 650, gap 20 = photo column 640 (#f2ece8
   under the photo, r16) + text column 700 (#fbfaf9, r16, pad 64: chip #f2ece8 + H2 58, gap 16; lead 21 + Large Black,
   gap 32; head and body pushed apart); rows 2 reversed. 390 (data-product-390.json): photo 350 x 250 on top, text
   card pad 24, head -> body 16, rows and row gap 16. The photo holds still on hover, as v1's does (.photo-card, About). */
.chip--warm:not(.scene *) { background: var(--warm-200); }
.team-row:not(.scene *) { min-height: 650px; scroll-margin-top: calc(var(--header-h) + 20px); }
.team-row--reverse:not(.scene *) { flex-direction: row-reverse; }
.team-row__photo.photo-card { flex: 0 0 calc((100% - 20px) * 640 / 1340); height: auto; background: var(--warm-200); }
.team-row__text:not(.scene *) { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
  gap: 64px; padding: 64px; }
.team-row__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.team-row__h { max-width: 512px; }
.team-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
@media (max-width: 1023.98px) {
  .team-row:not(.scene *), .team-row--reverse:not(.scene *) { flex-direction: column; min-height: 0; }
  .team-row__photo.photo-card { flex: none; width: 100%; height: 480px; }
}
@media (max-width: 759.98px) {
  .team__rows.rows:not(.scene *), .team-row:not(.scene *) { gap: 16px; }
  .team-row__photo.photo-card { height: 250px; }
  .team-row__text:not(.scene *) { gap: 16px; padding: 24px; }
  /* v1 /product's chip keeps 32 x (pad 14, icon 14) at 390 (data-product-390.json "Variant 1" 176 x 32), 10 px type */
  .team-row .chip:not(.scene *) { height: 32px; padding: 0 14px; }
  .team-row .chip:not(.scene *) svg { width: 14px; height: 14px; flex-basis: 14px; }
}

/* reduced motion: appear effects become fades, menus / FAQ / theme are instant */
.calm [data-reveal] .w:not(.scene *) { transform: none; }
.calm .faq__list { transform: none; }
.calm .page, .calm .site-header, .calm .burger__icon path, .calm .faq-item__a, .calm .faq-item__q .chevron,
.calm .mm-row .caret, .calm .primary__link .caret, .calm .row:not(.scene *) { transition: none; }

/* ?t= freeze: everything at its end state, nothing moving outside the scenes */
.static [data-reveal] .w:not(.scene *), .static [data-reveal-after], .static [data-appear], .static .faq__list {
  opacity: 1; transform: none; transition: none; }
.static .page, .static .site-header, .static .site-header *, .static .row:not(.scene *), .static .cta-card { transition: none; }
.static .site-header .site-header__actions .btn:not(.scene *) { transition: none; }   /* the CTA's own 250 ms colour swap (M20) */

/* settled at once (above the viewport at load), and the scroll lock (dialog, mobile menu) */
.is-instant, .is-instant *:not(.scene, .scene *) { transition: none !important; }
html.is-locked { overflow: hidden; }

/* ============================================================ kit page (site/_kit/) */
.kit { padding-top: calc(var(--header-h) + 80px); }
.kit__types { display: flex; flex-direction: column; gap: 12px; margin: 40px 0; }
.kit__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; padding: 24px; border-radius: var(--r-card); background: var(--night); }
.kit__mark { width: 28px; height: 28px; color: var(--bone); }
.kit__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.kit__card { height: 260px; padding: 24px; }
.kit__block { min-height: 900px; }
.kit__rowcard { flex: 1 1 0; height: 300px; padding: 40px; }
@media (max-width: 759.98px) {
  .kit__grid { grid-template-columns: minmax(0, 1fr); }
  .kit__row .btn--l:not(.scene *) { white-space: normal; height: auto; }
}

/* ============================================================ Palette studies (review only)
   Seven alternate palettes from DESIGN-maneten-v3.md, for the team to compare against the shipped
   warm one. Each is inert until <html data-theme="..."> is set, and the control that sets it ships
   only under THEME_SWITCH=1, so production carries none of this.

     cool     cool neutrals, no accent at all
     fathom   + Fathom on actions
     signal   + Signal on the demo button (communication only; banned in the product UI)
     murex    + Murex on the AI section, which is the system's own rule for AI-generated work
     tonal    + the doc's campaign language: one scale per surface, on the values band
     neutral  grey without a blue bias, for anyone who finds Mist too cold
     dark     the system's full dark theme

   The nine scenes keep their warm colours in every study for now (owner, 2026-11-10). */

/* ---- the shared cool neutrals. "Warmth comes from the voice, the type and the photography,
        not from tinted greys", which is why the bone grounds go. ---- */
html[data-theme="cool"], html[data-theme="fathom"], html[data-theme="signal"],
html[data-theme="murex"], html[data-theme="tonal"] {
  --white: #FAFBFC;        /* Surface */
  --grey-50: #F3F5F8;      /* Mist, the default ground */
  --warm-50: #F3F5F8;
  --cool-50: #F3F5F8;
  --warm-200: #E8ECF1;     /* Sunken, where bone used to sit */
  --bone: #E8ECF1;
  --cool-200: #E8ECF1;
  --grey-ed: #DCE1E8;      /* Pebble, hairlines */
  /* The default panel, for scenes that belong to no pillar (the Benefits one). Pillar scenes
     take their own hue below. A step under the Sunken bands they sit in, which is what keeps
     a panel from disappearing into its ground. */
  --scene-cool: #DDE2F2;
  --scene-warm: #DDE2F2;
  --ink: #151B23;          /* Graphite */
  --ink-strong: #151B23;   /* never pure black in a cool system */
  --on-dark: #E9ECEF;      /* nor pure white on the dark grounds */
  --black: #151B23;
  --night: #0E1A2A;        /* Abyss: the hero and the footer */
  --grey: #5A6573;
  --card-muted: #475260;
  --hero-ink: #E9ECEF;
  --hero-paper: #0E1A2A;
  --hero-tint: #2C3D8A;    /* Fathom: the system reserves it for actions and selection */
  /* the artwork follows too, or the palette stops at the edge of every animation */
  --sc-ink: #151B23;
  --sc-ink-rgb: 21, 27, 35;
  --wash: rgba(233, 236, 239, .3);
  --sc-surface: #FAFBFC;
  --sc-panel-cool: #F3F5F8;
  --sc-panel-warm: #F3F5F8;
  --sc-ground-cool: #E7EAF7;   /* the artwork's own ground, inside the panel, same hue */
  --sc-ground-warm: #E7EAF7;
  --sc-raise-1: #E3E6F6;   /* Fathom tint: a highlighted row reads as selection */
  --sc-raise-2: #E3E6F6;
  --sc-ok: #DDF0E5;        /* the system's success tint */
  --bone-64: rgba(233, 236, 239, .64);
  --bone-40: rgba(233, 236, 239, .4);
  /* .68, not .6: Graphite is lighter than the #000 this replaces, so a disabled control and the
     quiet helper links fell to 4.48:1 where the shipped palette gives 5.66:1. At .68 they read
     5.9:1, which matches the shipped weight rather than merely clearing AA. */
  --black-60: rgba(21, 27, 35, .68);
  --black-30: rgba(21, 27, 35, .3);
  --black-10: rgba(21, 27, 35, .1);
}

/* ---- what each one does with an accent ---- */
html[data-theme="cool"]   { --accent: #151B23; --green: #1C7347; }   /* none; the tick is Success */
html[data-theme="fathom"] { --accent: #2C3D8A; --green: #2C3D8A; }   /* Fathom: actions and selection */
html[data-theme="signal"] { --accent: #FF2D6F; --green: #2C3D8A; }
html[data-theme="murex"]  { --accent: #2C3D8A; --green: #2C3D8A; }
html[data-theme="tonal"]  { --accent: #2C3D8A; --green: #2C3D8A; }

/* Signal vivid takes Graphite type: white on it is 3.59:1, below AA under poster size. */
html[data-theme="signal"] .btn--black:not(.scene *) { color: #151B23; }

/* Murex earns one surface and no other: the AI section, so machine work is distinguishable. */
/* Mist, not a violet band. Murex marks AI-generated work, and in this section that work is the
   two animation panels; the copy beside them is our own words, so it sits on neutral like every
   other section. A violet GROUND also forced two scales onto one surface, which the system
   forbids: the cards on it stayed cool grey, and the dimmed row blended into a third lavender.
   This also makes the Assistant the fourth sibling of Create, Connect and Comply -- a hued panel
   on a neutral ground -- instead of the one full-bleed colour block on the page. (owner review,
   2026-11-11; the runner-up was keeping the band and moving the cards into the violet scale.) */
html[data-theme="murex"] .mf { background: var(--grey-50); }
html[data-theme="murex"] .mf .card--cool:not(.scene *) { background: var(--white); }
html[data-theme="murex"] .mf .check-circle circle { fill: #4A3B78; }
html[data-theme="murex"] .mf .btn--black:not(.scene *) { background: #4A3B78; }
/* and its animation panels take Murex too. Custom properties inherit, so scoping them to the
   section is enough to carry the hue into the artwork as well as the panel. */

/* ---- one hue per pillar (owner, 2026-11-11; Filip raised the same thing on 2026-11-05: the
   three animation boxes were hard to tell apart once the right-column nav drops away).
   Create, Connect and Comply get a different tint each on Home, and each subpage carries its
   pillar's hue so the identity follows from the card to the page.

   The system gives two accents, not four, so these are drawn from its own palettes without
   taking a colour that already means something:
     Create     Fathom      the primary accent, for the primary act
     Connect    Lagoon      the dataviz teal, the set built to be mutually distinguishable
     Comply     series-5    the dataviz neutral (the design doc's own name for it is avoided
                            here on purpose: tests/test_site.py bans that word in our sources so
                            v1's blue-grey dark card cannot return, feedback 2026-11-05 #9. This
                            is a LIGHT panel, an unrelated use, and the guard stays absolute.)
                            Signal pink was tried and rejected (owner, 2026-11-11): red carries a
                            warning at any weight, the wrong note for compliance. This separates
                            from Fathom by saturation rather than hue, and reads as the record it
                            describes. Green and amber were never candidates: both are semantic
                            here, and green on Comply would claim a passing STATE, not identity
     Assistant  Murex       prescribed: the system reserves violet for the assistant and
                            anything AI-generated
   Semantic colours are deliberately absent: they are reserved for state and never decoration.
   Each pair is the panel and, a step lighter, the artwork's own ground inside it, so a scene
   is one scale rather than two. */
html[data-theme="murex"] #feature-create,
html[data-theme="murex"] body[data-page="create"] {
  --scene-cool: #DDE2F2; --scene-warm: #DDE2F2; --sc-ground-cool: #E7EAF7; --sc-ground-warm: #E7EAF7; }
html[data-theme="murex"] #feature-connect,
html[data-theme="murex"] body[data-page="connect"] {
  --scene-cool: #D2E8E8; --scene-warm: #D2E8E8; --sc-ground-cool: #E0F1F1; --sc-ground-warm: #E0F1F1; }
html[data-theme="murex"] #feature-comply,
html[data-theme="murex"] body[data-page="comply"] {
  --scene-cool: #D3D9E2; --scene-warm: #D3D9E2; --sc-ground-cool: #E2E6EC; --sc-ground-warm: #E2E6EC; }
/* One box, not two. A subpage row's illustration column paints its own ground and insets the
   scene panel inside it with 64 px of padding. In the shipped warm palette those two colours
   are near enough to read as one box; a pillar hue makes the nesting obvious (owner,
   2026-11-11). The column takes the hue and the panel stops painting, so the artwork keeps
   its position and its size and only the surround changes. */
html[data-theme="murex"] .prow__media { background: var(--scene-cool); }
html[data-theme="murex"] .prow__media > .scene-host { background: transparent; }

/* Assistant: the AI section on Home and the whole Assistant page. */
/* The ask artwork's own ground fills 100% of its panel, so the colour a visitor sees there is
   this one, not --scene-cool. They were different, which put one panel lighter than the section
   and its sibling darker. Holding both to one value is what makes the pair read as a pair. */
html[data-theme="murex"] .mf,
html[data-theme="murex"] body[data-page="assistant"] {
  --scene-cool: #E2DCF0; --scene-warm: #E2DCF0; --sc-ground-cool: #E2DCF0; --sc-ground-warm: #E2DCF0; }

/* One scale per surface: a full-bleed pastel ground, type in a deep tone of the same hue,
   and no second scale anywhere on it. */
html[data-theme="tonal"] .values { background: #E5E9FC; }
html[data-theme="tonal"] .values, html[data-theme="tonal"] .values .t-h2,
html[data-theme="tonal"] .values h2, html[data-theme="tonal"] .values p { color: #2C3D8A; }

/* ---- grey without the blue bias ---- */
html[data-theme="neutral"] {
  --white: #FCFCFC; --grey-50: #F4F4F5; --warm-50: #F4F4F5; --cool-50: #F4F4F5;
  --warm-200: #EAEAEB; --bone: #EAEAEB; --cool-200: #EAEAEB; --grey-ed: #DEDEE0;
  --scene-cool: #E0E0E2; --scene-warm: #E0E0E2;   /* under the bands, as above */
  --ink: #1A1A1C; --ink-strong: #1A1A1C; --on-dark: #F4F4F5;
  --black: #1A1A1C; --night: #141416; --grey: #6A6A70; --card-muted: #55555C;
  --accent: #1A1A1C; --green: #1C7347;
  --hero-ink: #EAEAEB; --hero-paper: #141416; --hero-tint: #1A1A1C;
  --bone-64: rgba(236, 236, 238, .64); --bone-40: rgba(236, 236, 238, .4);
}

/* ---- the system's dark theme ---- */
html[data-theme="dark"] {
  /* canvas -> surface -> scene, three distinct steps. --white is the page and body ground
     (canvas); cards are lifted to Surface below; scenes are lifted further still, so the
     light artwork inside them reads as a screen rather than a hole. */
  /* An elevation ladder, not one flat value. The shipped site puts the feature card's text
     panel ABOVE its card and the scenes between: lighter means more lifted there, so in dark
     the same order runs sunken -> canvas -> card -> scene -> text panel. Every step distinct,
     so nothing disappears into what it sits on. */
  --warm-200: #080D14;     /* sunken bands */
  --bone: #080D14;
  --white: #0B121B;        /* canvas: the page and body ground */
  --grey-50: #0E1621;      /* the grey bands, a step off the canvas as #fafafa is off #ffffff */
  --warm-50: #0E1621;      /* the warm bands sit at the same remove, as they do when light */
  --cool-200: #111A25;     /* the feature card's ground */
  --scene-cool: #19242F;   /* scenes read as a lit screen, not a hole */
  --scene-warm: #19242F;
  /* the artwork inverts with the ground it is drawn on */
  --sc-ink: #E9ECEF;
  --sc-ink-rgb: 233, 236, 239;
  --wash: rgba(233, 236, 239, .16);
  --sc-surface: #0E1724;
  --sc-panel-cool: #16202C;
  --sc-panel-warm: #16202C;
  --sc-ground-cool: #19242F;
  --sc-ground-warm: #19242F;
  --sc-raise-1: #221E38;
  --sc-raise-2: #221E38;
  --sc-ok: #0F251B;
  --cool-50: #1C2836;      /* the feature card's text panel, the most lifted surface */
  --grey-ed: #1F2B39;
  --ink: #E9ECEF; --ink-strong: #E9ECEF; --on-dark: #E9ECEF;
  --black: #111A25; --night: #060B12; --grey: #8E99A7; --card-muted: #B4BDC8;
  --accent: #A3B3F0;       /* Tide: Fathom is too dark to carry an action here */
  --green: #6FD2A0;
  --white-80: rgba(233, 236, 239, .8);
  --hero-ink: #E9ECEF; --hero-paper: #060B12; --hero-tint: #A3B3F0;
  --bone-64: rgba(233, 236, 239, .64); --bone-40: rgba(233, 236, 239, .4);
  --black-60: rgba(233, 236, 239, .6); --black-30: rgba(233, 236, 239, .3);
  --black-10: rgba(233, 236, 239, .12);
  --shadow-menu: 0 10px 20px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .btn--black:not(.scene *) { color: #0B121B; }
/* --white is the canvas in this theme, so a white card needs lifting to Surface by hand */
html[data-theme="dark"] .card--white:not(.scene *) { background: #111A25; }
/* --fg-strong is a literal #000 on :root and on every card, so headings would vanish here */
html[data-theme="dark"] .card:not(.scene *) { --fg-strong: var(--ink); }

/* ---- M19's page theme: off in every light study (owner, 2026-11-10) ----
   The AI section is marked data-theme="black", so scrolling it past the viewport centre turned
   the whole page black and the type white. That is the warm site's intent, not these. Each light
   study keeps its own section ground and leaves the page as it is. Night cards stay light-on-dark
   because they really are dark. */
html[data-theme="cool"] .page[data-theme-now="black"],
html[data-theme="fathom"] .page[data-theme-now="black"],
html[data-theme="signal"] .page[data-theme-now="black"],
html[data-theme="murex"] .page[data-theme-now="black"],
html[data-theme="tonal"] .page[data-theme-now="black"],
html[data-theme="neutral"] .page[data-theme-now="black"] { background-color: var(--white); }

html[data-theme="cool"] .page[data-theme-now="black"] [data-theme="black"],
html[data-theme="fathom"] .page[data-theme-now="black"] [data-theme="black"],
html[data-theme="signal"] .page[data-theme-now="black"] [data-theme="black"],
html[data-theme="murex"] .page[data-theme-now="black"] [data-theme="black"],
html[data-theme="tonal"] .page[data-theme-now="black"] [data-theme="black"],
html[data-theme="neutral"] .page[data-theme-now="black"] [data-theme="black"] {
  --fg-strong: var(--ink-strong); --fg: var(--ink); }

html[data-theme="cool"] .page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *),
html[data-theme="fathom"] .page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *),
html[data-theme="signal"] .page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *),
html[data-theme="murex"] .page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *),
html[data-theme="tonal"] .page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *),
html[data-theme="neutral"] .page[data-theme-now="black"] [data-theme="black"] .card--night:not(.scene *) {
  --fg-strong: var(--on-dark); --fg: var(--on-dark); }