/* ==========================================================================
   Ashton Harris, REALTOR®: design system (site.css)
   One file for the whole site. Brief §3 (tokens, type, layout, shape, motion,
   micro-interactions, components) + §4 nav + §8 compliance footer.
   Layers: tokens < base < layout < components < sections < utilities.
   Page <style> blocks (unlayered, ≤ 4 KB, layout only) win over every layer.
   The reduced-motion / motion-paused safety net at the end is unlayered on
   purpose so it beats every component rule without !important.
   ========================================================================== */

@layer tokens, base, layout, components, sections, utilities;

/* [hidden] must win over any component rule that sets display. Unlayered + !important so no layer beats it.
   hidden="until-found" is left to the browser (content-visibility), so find-in-page lanes still work. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light;
    /* §3.1 palette: light */
    /* Cinematic system (2026-09-25, Ashton picked direction C): paper for reading, projector black for film and
       title cards, Ashton blue only as the accent. See audit/cinematic-guide.md. WHITE since 2026-09-30 (Ashton:
       "have the background be white too with some hints of black some places", then "white background on every
       page"): white paper and neutral greys replace the bone family. --stage-paper is the soft studio grey a 3D
       scene lands on (look.js pagePaper() prefers it): pure white can't hold the scenes' shadows and fog through
       tone mapping, so a scene's frame wears this grey and reads as a lit studio set on the white page. */
    --bone: #EDE7DC;              /* the retired bone base (kept for reference; don't use it for surfaces) */
    --film: #0B0B0C;
    --paper: #FFFFFF;
    --paper-2: #F5F5F3;
    --stage-paper: #F5F5F3;
    --ink: #151311;
    --ink-2: #45433F;
    --muted: #65635E;
    --line: #E3E2DF;
    --line-strong: #6B6964;
    --blue-text: #2852E5;
    --blue-fill: #2852E5;
    --blue-deep: #1E3A8A;
    --night: #0B0B0C;
    --night-2: #151514;
    --night-3: #1D1C1B;
    --night-line: #2B2926;
    --on-night: #F1F0ED;
    --on-night-2: #A9A7A2;
    --blue-on-night: #8EA4FF;
    --glow: #5B7BFF;
    --glow-soft: #A5B4FF;
    --sold-red: #B33434;
    --focus: #2852E5;
    --on-fill: #FFFFFF;           /* text on --blue-fill / --blue-deep, every theme */

    /* §3.2 type */
    --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
    --fs-display: clamp(3.25rem, 11vw, 7.5rem);
    --fs-h2: clamp(2.25rem, 6vw, 4.5rem);
    --fs-h3: clamp(1.375rem, 3vw, 2rem);
    --fs-pull: clamp(1.75rem, 4.5vw, 3.25rem);
    --fs-body-guide: 1.0625rem;   /* 17px phone; 19px ≥ 768px (below) */
    --fs-body: 1rem;
    --fs-label: 0.875rem;         /* 14px floor */
    --fs-eyebrow: 0.8125rem;      /* 13px */
    --fs-numeral: clamp(3rem, 8vw, 6rem);
    --em-optical: 1.06;           /* Bodoni italic sits smaller than DM Sans at equal size */

    /* §3.3 spacing (4px base) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px; --s-6: 32px;
    --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
    --section-y: clamp(64px, 12vw, 160px);
    --gutter: 16px;
    --max-text: 64ch;
    --max-content: 1200px;
    --max-wide: 1440px;
    --cols: 4;
    --col-gap: 16px;
    --header-h: 56px;
    --bar-h: 64px;
    --bar-space: 0px;             /* bottom padding reserved for the bottom bar */
    --tap: 44px;

    /* §3.4 shape and elevation */
    --radius: 0;
    --hair: 1px;
    --elev-night: 0 0 0 1px var(--night-line), 0 24px 64px -24px rgba(40, 82, 229, .35);

    /* §3.5 motion */
    --dur-1: 120ms;
    --dur-2: 240ms;
    --dur-3: 480ms;
    --dur-4: 900ms;
    --dur-5: 1600ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --rise: 24px;
    --stagger: 70ms;
    --ease-cine: cubic-bezier(.7, 0, .2, 1);
    --grain: url("data:image/png;base64,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");   /* 96px noise tile, inline so it costs no request or file */
    --lb: clamp(40px, 9vh, 96px);          /* letterbox bar height */

    /* z-index scale */
    --z-stage: 1;
    --z-overlay: 2;
    --z-content: 3;
    --z-bar: 45;
    --z-menu: 48;
    --z-header: 50;
    --z-popover: 55;
    --z-toast: 70;
    --z-skip: 100;
  }

  @media (min-width: 768px) {
    :root { --gutter: 24px; --cols: 8; --col-gap: 24px; --fs-body-guide: 1.1875rem; }
  }
  @media (min-width: 1100px) {
    :root { --gutter: 48px; --cols: 12; --header-h: 64px; }
  }

  /* data-tone="white": the opt-in from the first white pages (2026-09-30). White is the default palette now (above),
     so this only restates it for pages that still carry the attribute. Declared before the dark-mode rules (same
     specificity), so dark mode still wins. */
  :root[data-tone="white"] {
    --paper: #FFFFFF;
    --paper-2: #F5F5F3;
    --stage-paper: #F5F5F3;
    --ink-2: #45433F;
    --muted: #65635E;
    --line: #E3E2DF;
    --line-strong: #6B6964;
  }

  /* §3.1 dark mode: the Artifact contract. Auto follows the OS unless the
     visitor picked Light; data-theme="dark" forces it. Night never changes. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #121110;
      --paper-2: #1B1A18;
      --ink: #F1F0ED;
      --ink-2: #CAC9C5;
      --muted: #A9A7A2;
      --line: #2B2926;
      --line-strong: #A9A7A2;
      --blue-text: #8EA4FF;
      --blue-fill: #2852E5;
      --blue-deep: #1E3A8A;
      --sold-red: #E0676B;
      --focus: #7C95FF;
      --stage-paper: #121110;
    }
  }
  :root[data-theme="dark"], .theme-dark {
    color-scheme: dark;
    --paper: #121110;
    --paper-2: #1B1A18;
    --ink: #F1F0ED;
    --ink-2: #CAC9C5;
    --muted: #A9A7A2;
    --line: #2B2926;
    --line-strong: #A9A7A2;
    --blue-text: #8EA4FF;
    --blue-fill: #2852E5;
    --blue-deep: #1E3A8A;
    --sold-red: #E0676B;
    --focus: #7C95FF;
    --stage-paper: #121110;
  }
  .theme-light {
    color-scheme: light;
    --paper: #FFFFFF;
    --paper-2: #F5F5F3;
    --stage-paper: #F5F5F3;
    --ink: #151311;
    --ink-2: #45433F;
    --muted: #65635E;
    --line: #E3E2DF;
    --line-strong: #6B6964;
    --blue-text: #2852E5;
    --blue-fill: #2852E5;
    --blue-deep: #1E3A8A;
    --sold-red: #B33434;
    --focus: #2852E5;
  }

  /* Semantic surface tokens. Components use these, so a component works
     unchanged on paper, dark paper and night. Re-declared on every scope
     so they resolve against that scope's base tokens. */
  :root, .theme-light, .theme-dark, .on-paper {
    --bg: var(--paper);
    --bg-2: var(--paper-2);
    --fg: var(--ink);
    --fg-2: var(--ink-2);
    --fg-muted: var(--muted);
    --rule: var(--line);
    --ctl: var(--line-strong);
    --accent: var(--blue-text);
    --red: var(--sold-red);
    --ring: var(--focus);
  }
  .night, .on-night {
    --bg: var(--night);
    --bg-2: var(--night-2);
    --fg: var(--on-night);
    --fg-2: var(--on-night-2);
    --fg-muted: var(--on-night-2);
    --rule: var(--night-line);
    --ctl: #A9A7A2;
    --accent: var(--blue-on-night);
    --red: #E0676B;
    --ring: #8EA4FF;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
    overflow-x: clip;
  }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  .page { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: var(--bar-space); overflow-x: clip; }
  .page > main { flex: 1 0 auto; }
  /* Scoped theme panels (styleguide, previews): a component inside renders exactly as in that theme. */
  .theme-light, .theme-dark { background: var(--bg); color: var(--fg); }
  img, video, svg, canvas, picture { display: block; max-width: 100%; }
  img, video { height: auto; }
  svg:not([fill]) { fill: currentColor; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
  hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }
  ::selection { background: var(--blue-fill); color: var(--on-fill); }
  [hidden]:not([hidden="until-found"]) { display: none; }
  :focus { outline: none; }
  :focus-visible { outline: 3px solid var(--ring, var(--focus)); outline-offset: 2px; }
  .night :focus-visible, .on-night :focus-visible { outline-color: #7C95FF; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
  table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  th { font-size: var(--fs-label); font-weight: 500; color: var(--fg-muted); }
  abbr[title] { text-decoration: none; }
  code, kbd, samp { font-family: inherit; font-size: .94em; font-weight: 600; letter-spacing: 0; }
  sup.reg, .reg { font-size: .62em; vertical-align: .55em; line-height: 0; margin-left: .04em; }

  /* --- typography (§3.2) --- */
  .display, h1 {
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: .92;
    letter-spacing: -.06em;
    text-wrap: balance;
  }
  h2, .h2 {
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  h3, .h3 {
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  h4, .h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
  /* The signature: one Bodoni italic word in blue. */
  h1 em, h2 em, .display em, .h2 em, .em, .h3 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -.02em;
    font-size: calc(var(--em-optical) * 1em);
    line-height: 0;
  }
  h1 .kicker, .display .kicker {
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: clamp(16px, 3vw, 32px);
  }
  h1 .h1-main { display: block; }
  .pull, blockquote.pull {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-pull);
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
  }
  .prose, .body-guide { font-size: var(--fs-body-guide); line-height: 1.6; max-width: var(--max-text); }
  .prose > * + * { margin-top: 1em; }
  .prose a, .text-link { color: var(--accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat; transition: background-size var(--dur-3) var(--ease-out); padding-bottom: 1px; }
  .prose a:hover, .prose a:focus-visible, .text-link:hover, .text-link:focus-visible { background-size: 100% 1px, 100% 1px; }
  .prose ul, .prose ol { padding-left: 1.2em; }
  .prose li + li { margin-top: .4em; }
  .lede { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; color: var(--fg-2); max-width: 56ch; }
  .label { font-size: var(--fs-label); font-weight: 500; line-height: 1.4; }
  .eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--fg-2);
  }
  .eyebrow--accent { color: var(--accent); }
  .numeral { font-size: var(--fs-numeral); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .tabular { font-variant-numeric: tabular-nums; }
  .muted { color: var(--fg-muted); }
  .fine, .fineprint { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-muted); }
  .accent { color: var(--accent); }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .container { width: 100%; max-width: calc(var(--max-content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .container--wide { max-width: calc(var(--max-wide) + 2 * var(--gutter)); }
  .container--text { max-width: calc(var(--max-text) + 2 * var(--gutter)); }
  .section { padding-block: var(--section-y); position: relative; }
  .section--tight { padding-block: clamp(48px, 8vw, 96px); }
  .band { background: var(--paper-2); }
  .night { background: var(--night); color: var(--on-night); }
  .section-head { display: grid; gap: var(--s-5); margin-bottom: clamp(32px, 6vw, 72px); max-width: 60rem; }
  .section-head .lede { margin-top: calc(var(--s-2) * -1); }
  .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--col-gap); }
  .span-all { grid-column: 1 / -1; }
  .split { display: grid; gap: clamp(32px, 6vw, 96px); align-items: start; }
  @media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split--wide-left { grid-template-columns: 7fr 5fr; } .split--wide-right { grid-template-columns: 5fr 7fr; } }
  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--s-3)); align-items: center; }
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 380px); gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); scrollbar-width: thin; }
  .rail > * { scroll-snap-align: start; }
  .rule-top { border-top: 1px solid var(--rule); }
  .rule-accent { border-top: 2px solid var(--accent); }
}

/* ------------------------------------------------------------ components */
@layer components {

  /* ---------- icons (§3.4) ---------- */
  .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .icon--24 { width: 24px; height: 24px; }
  .icon--16 { width: 16px; height: 16px; }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* ---------- skip link ---------- */
  .skip-link { position: fixed; left: var(--gutter); top: 8px; z-index: var(--z-skip); background: var(--blue-fill); color: var(--on-fill); padding: 12px 18px; font-weight: 500; transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out); text-decoration: none; }
  .skip-link:focus-visible { transform: none; }

  /* ---------- buttons (§3.7) ---------- */
  .btn {
    --mx: 0px; --my: 0px;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px;
    font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.1; letter-spacing: .005em;
    text-decoration: none; text-align: center;
    border: 1px solid transparent; border-radius: 0;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transform: translate3d(var(--mx), var(--my), 0);
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .btn .icon { transition: transform var(--dur-3) var(--ease-out); }
  .btn:active { transform: translate3d(var(--mx), calc(var(--my) + 1px), 0); transition-duration: var(--dur-1); }
  .btn--primary { background: var(--blue-fill); color: var(--on-fill); border-color: var(--blue-fill); }
  .btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
  .night .btn--primary, .on-night .btn--primary { box-shadow: 0 10px 40px -12px rgba(40, 82, 229, .7); }
  .btn--secondary { background: transparent; color: var(--fg); border-color: var(--ctl); }
  .btn--secondary:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn--ink:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--on-fill); }
  .btn--tertiary {
    min-height: 44px; padding: 0; border: 0; color: var(--fg);
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
    transition: background-size var(--dur-3) var(--ease-out), color var(--dur-2);
  }
  .btn--tertiary:hover, .btn--tertiary:focus-visible { background-size: calc(100% - 30px) 1px; }
  .btn--tertiary .icon { order: 2; }
  .btn:hover .icon--arrow, .btn:focus-visible .icon--arrow { transform: translateX(4px); }
  .btn:hover .icon--out, .btn:focus-visible .icon--out { transform: translate(2px, -2px); }
  .btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
  .btn--tertiary.btn--sm { padding: 0; min-height: 44px; }
  .btn--block { display: flex; width: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .btn-row--stretch > .btn { flex: 1 1 auto; }

  /* icon-only square button (44x44) */
  .icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); color: var(--fg); border: 1px solid transparent; transition: border-color var(--dur-2), background-color var(--dur-2); }
  .icon-btn:hover { border-color: var(--ctl); }
  .icon-btn--outline { border-color: var(--ctl); }

  /* ---------- chips (§3.7) ---------- */
  .chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    font-size: var(--fs-label); font-weight: 500; line-height: 1; white-space: nowrap;
    color: var(--fg); background: transparent;
    border: 1px solid var(--ctl); border-radius: 0;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), border-color var(--dur-2);
  }
  .chip::before { content: ""; position: absolute; inset: -5px -1px; }   /* 44px hit area */
  .chip:hover { border-color: var(--fg); }
  .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="true"], .chip.is-selected,
  input:checked + .chip { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
  input:focus-visible + .chip { outline: 3px solid var(--ring); outline-offset: 2px; }
  .chip .icon { width: 16px; height: 16px; }
  .chip--static { cursor: default; }
  .chip--link::after { content: "\2192"; margin-left: 2px; transition: transform var(--dur-2) var(--ease-out); }
  .chip--link:hover::after { transform: translateX(3px); }
  .chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip-radio { position: relative; }
  .chip-radio > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .proof-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; font-size: var(--fs-label); font-weight: 500; border: 1px solid var(--rule); color: var(--fg); text-decoration: none; }
  a.proof-chip:hover { border-color: var(--ctl); }
  .proof-chip .stars { color: var(--accent); letter-spacing: .08em; }

  /* status dot (the only other rounded shape) */
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ctl); flex: none; }
  .dot.is-on { background: var(--glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 22%, transparent), 0 0 12px var(--glow); }
  .avatar { border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; background: var(--bg-2); }

  /* ---------- badges ---------- */
  .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; font-size: var(--fs-label); font-weight: 500; line-height: 1.2; border: 1px solid var(--ctl); color: var(--fg-2); }
  .badge--example::before, .badge--rep::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
  .badge--accent { border-color: var(--accent); color: var(--accent); }

  /* ---------- BrokerLine (§3.2, §3.7) ---------- */
  .broker-line {
    --name-size: 18px;
    font-size: max(12px, calc(var(--name-size) * .5));
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .01em;
    color: var(--fg-2);
  }
  .broker-line--caps { text-transform: uppercase; letter-spacing: .08em; }

  /* ---------- lockup ---------- */
  .lockup { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--fg); }
  .lockup__avatar { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; background: var(--bg-2); view-transition-name: nav-avatar; }
  .lockup__avatar img, .lockup__avatar video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .lockup__avatar video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-2); }
  .lockup__avatar.is-playing video { opacity: 1; }
  .lockup__avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent); }
  .lockup__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .lockup__name { font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
  .lockup__realtor { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--fg-muted); margin-left: 6px; }
  .lockup .broker-line { text-wrap: balance; }
  .lockup__logo { display: none; }
  @media (min-width: 1100px) {
    .lockup__avatar { width: 40px; height: 40px; }
    .lockup__name { font-size: 18px; }
  }
  @media (min-width: 1600px) {
    .lockup__logo { display: block; height: 17px; width: auto; margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--rule); box-sizing: content-box; }
    .theme-dark .lockup__logo, :root[data-theme="dark"] .lockup__logo, .night .lockup__logo, .site-header.is-night .lockup__logo, .site-header.is-menu-open .lockup__logo { filter: invert(1); }
  }
  @media (min-width: 1600px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lockup__logo { filter: invert(1); } }
  .cb-logo { height: 20px; width: auto; }
  .night .cb-logo, .on-night .cb-logo, .site-footer .cb-logo, .mobile-menu .cb-logo { filter: invert(1); }

  /* ---------- site header (§3.7, §4) ---------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    height: var(--header-h);
    background: var(--bg);
    color: var(--fg);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3);
  }
  .site-header.is-scrolled { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
  .site-header.is-night, .site-header.is-menu-open {
    --bg: var(--night); --bg-2: var(--night-2); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2);
    --rule: var(--night-line); --ctl: #A3A3A8; --accent: var(--blue-on-night); --ring: #7C95FF;
  }
  .site-header.is-menu-open { background: var(--night); border-bottom-color: var(--night-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner {
    height: 100%;
    max-width: calc(var(--max-wide) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex; align-items: center; gap: 12px;
  }
  .site-header .lockup { flex: 0 1 auto; margin-right: auto; }
  .site-nav { display: none; }
  .header-cta { display: none; }
  .menu-btn { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; color: var(--fg); margin-right: -10px; }
  .menu-btn__lines { position: relative; width: 22px; height: 12px; }
  .menu-btn__lines::before, .menu-btn__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--dur-3) var(--ease-out), top var(--dur-3) var(--ease-out); }
  .menu-btn__lines::before { top: 0; }
  .menu-btn__lines::after { top: 10.5px; }
  .menu-btn[aria-expanded="true"] .menu-btn__lines::before { top: 5.25px; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__lines::after { top: 5.25px; transform: rotate(-45deg); }
  @media (min-width: 768px) and (orientation: landscape), (min-width: 1100px) {
    .header-cta { display: inline-flex; }
  }
  @media (min-width: 1100px) {
    .site-header__inner { gap: 16px; }
    .header-cta { min-height: 44px; padding: 0 18px; }
  }
  /* §13 (2026-09-28): the desktop nav starts at 1280px so Back and "Book a call" fit beside it; 1100-1279 keeps
     the menu button with Text + Book in the header. */
  @media (min-width: 1280px) {
    .site-nav { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 26px); margin-left: auto; }
    .site-header .lockup { margin-right: 0; }
    .menu-btn { display: none; }
  }
  .nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: var(--tap); font-size: 15px; font-weight: 500; letter-spacing: -.005em;
    color: var(--fg); text-decoration: none; white-space: nowrap;
  }
  .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
  .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="page"]::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
  .nav-link[aria-current="page"] { color: var(--accent); }
  .nav-link .icon { width: 14px; height: 14px; transition: transform var(--dur-3) var(--ease-out); }
  .nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }

  /* Areas menu */
  .areas { position: relative; }
  .areas-panel {
    position: absolute; top: calc(100% + 10px); left: 50%; z-index: var(--z-popover);
    width: min(560px, 90vw);
    display: grid; grid-template-columns: 1fr 220px; gap: 0;
    background: var(--night); color: var(--on-night);
    box-shadow: var(--elev-night);
    translate: -50% 0;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .areas-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .areas-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent); }
  .areas-panel__links { padding: 20px 8px 20px 20px; display: grid; gap: 2px; align-content: start; }
  .areas-link { display: grid; gap: 2px; padding: 12px 14px; color: var(--on-night); text-decoration: none; border-left: 1px solid transparent; transition: border-color var(--dur-2), background-color var(--dur-2); }
  .areas-link:hover, .areas-link:focus-visible { border-left-color: var(--glow); background: var(--night-2); }
  .areas-link strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
  .areas-link strong em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-on-night); }
  .areas-link span { font-size: var(--fs-label); color: var(--on-night-2); }
  .areas-map { position: relative; border-left: 1px solid var(--night-line); padding: 16px; display: grid; align-content: center; }
  .areas-map svg { width: 100%; height: auto; overflow: visible; }
  .areas-map figcaption { font-size: 12px; color: var(--on-night-2); margin-top: 8px; line-height: 1.4; }
  .mini-map .corridor { fill: none; stroke: var(--glow); stroke-opacity: .45; stroke-width: 1.2; }
  .mini-map .city { fill: var(--on-night-2); }
  .mini-map .city--home { fill: var(--glow-soft); }
  .mini-map .halo { fill: none; stroke: var(--glow); stroke-opacity: .5; }
  .mini-map text { fill: var(--on-night-2); font-family: var(--sans); font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
  .mini-map text.is-home { fill: var(--on-night); font-weight: 600; }
  .mini-map text.has-page { font-weight: 600; } /* towns with their own page (Prosper, Celina, Anna; 2026-10-03): home-base weight, muted fill */

  /* Header page control (§3.7): the only progress UI on a page */
  .page-control { display: flex; align-items: center; gap: 8px; flex: none; }
  .page-control:empty { display: none; }
  .pc-chip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: var(--tap); height: var(--tap); padding: 0 10px;
    border: 1px solid var(--ctl); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg);
  }
  .pc-chip:hover { border-color: var(--fg); }
  .pc-chip__label { display: none; font-weight: 500; color: var(--fg-2); }
  .pc-rail { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; pointer-events: none; }
  .pc-rail__fill { height: 100%; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--progress, 0)); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 70%, transparent); }
  .pc-lights { display: flex; align-items: center; gap: 10px; height: var(--tap); padding: 0 4px; }
  .pc-lights__dots { display: flex; gap: 7px; }
  .pc-lights__label { display: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); min-width: 11ch; }
  .pc-lanes .pc-chip__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; background: var(--blue-fill); color: var(--on-fill); font-size: 12px; }
  .pc-lanes .pc-chip__count:empty { display: none; }
  .pc-pop {
    position: absolute; top: calc(var(--header-h) + 4px); right: var(--gutter); z-index: var(--z-popover);
    width: min(360px, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100svh - var(--header-h) - 24px); overflow: auto;
    background: var(--night); color: var(--on-night); box-shadow: var(--elev-night);
    padding: 12px;
  }
  .pc-pop[hidden] { display: none; }
  .pc-pop__title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); padding: 8px 10px 10px; }
  .pc-pop ol, .pc-pop ul { list-style: none; margin: 0; padding: 0; }
  .pc-pop a, .pc-pop label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; color: var(--on-night); text-decoration: none; font-size: 15px; }
  .pc-pop a:hover, .pc-pop label:hover { background: var(--night-2); }
  .pc-pop a .n { width: 26px; font-variant-numeric: tabular-nums; color: var(--on-night-2); font-size: 13px; }
  .pc-pop a[aria-current="step"] { color: var(--blue-on-night); }
  .pc-pop a[aria-current="step"] .n { color: var(--blue-on-night); }
  .pc-pop a.is-done .n::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--glow); vertical-align: middle; }
  .pc-pop input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue-fill); }
  @media (min-width: 1100px) {
    .page-control { order: 0; }
    .pc-chip__label, .pc-lights__label { display: inline; }
    .pc-chip { padding: 0 12px; }
  }
  @media (max-width: 359px) {
    .site-header.has-page-control .lockup__avatar { display: none; }
  }

  /* ---------- mobile menu (§3.7) ---------- */
  .mobile-menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    background: var(--night); color: var(--on-night);
    padding: calc(var(--header-h) + 8px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-3) var(--ease-in-out), visibility 0s linear var(--dur-3);
  }
  .mobile-menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }
  .mobile-menu__edge { position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: calc(var(--z-menu) + 1); background: var(--glow); box-shadow: 0 0 14px var(--glow); opacity: 0; transform: translateY(0); pointer-events: none; }
  .mobile-menu.is-animating .mobile-menu__edge { animation: menu-edge var(--dur-3) var(--ease-in-out) both; }
  .mobile-menu.is-closing .mobile-menu__edge { animation: menu-edge var(--dur-3) var(--ease-in-out) reverse both; }
  @keyframes menu-edge { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100svh); } }
  .mobile-menu__inner { max-width: 640px; margin-inline: auto; display: grid; gap: 28px; }
  .menu-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--night-line); }
  .menu-tile {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
    min-height: 64px; padding: 14px 2px;
    border-bottom: 1px solid var(--night-line);
    color: var(--on-night); text-decoration: none;
  }
  .menu-tile__label { font-size: clamp(1.625rem, 7vw, 2.25rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; }
  .menu-tile__label em { font-family: var(--serif); font-style: italic; color: var(--blue-on-night); letter-spacing: -.02em; }
  .menu-tile__sub { grid-column: 1; font-size: var(--fs-label); color: var(--on-night-2); }
  .menu-tile .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--on-night-2); transition: transform var(--dur-3) var(--ease-out), color var(--dur-2); }
  .menu-tile:hover .icon, .menu-tile:focus-visible .icon { transform: translate(3px, -3px); color: var(--blue-on-night); }
  .menu-tile[aria-current="page"] .menu-tile__label { color: var(--blue-on-night); }
  .mobile-menu.is-open .menu-tile { animation: tile-in var(--dur-3) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 60ms); }
  @keyframes tile-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .menu-tiles--small .menu-tile { min-height: 52px; }
  .menu-tiles--small .menu-tile__label { font-size: 1.25rem; letter-spacing: -.02em; }
  .menu-group-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 8px; }
  .menu-actions { display: grid; gap: 10px; }
  .menu-actions .btn { width: 100%; justify-content: space-between; }
  .menu-settings { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding-top: 16px; border-top: 1px solid var(--night-line); }
  .menu-foot { display: grid; gap: 10px; font-size: var(--fs-label); color: var(--on-night-2); padding-bottom: 8px; }
  @media (min-width: 560px) { .menu-tiles--main { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
  html.menu-open, html.menu-open body { overflow: hidden; }

  /* ---------- text toggles (theme, motion) ---------- */
  .text-toggle { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-label); }
  .text-toggle__label { color: var(--fg-muted); margin-right: 8px; }
  .text-toggle button, .motion-toggle {
    min-height: 44px; padding: 0 8px; font-size: var(--fs-label); font-weight: 500;
    color: var(--fg-2); background: linear-gradient(currentColor, currentColor) 8px calc(100% - 12px) / 0 1px no-repeat;
    transition: color var(--dur-2), background-size var(--dur-3) var(--ease-out);
  }
  .text-toggle button:hover, .motion-toggle:hover { color: var(--fg); }
  .text-toggle button[aria-pressed="true"] { color: var(--fg); background-size: calc(100% - 16px) 1px; }
  .text-toggle .sep { color: var(--fg-muted); }
  /* The motion toggle keeps one fixed label ("Pause motion"); aria-pressed carries the state (TEC-15). */
  .motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding-left: 0; background-position: 26px calc(100% - 12px); }
  .motion-toggle__icon { display: inline-flex; width: 18px; height: 18px; }
  .motion-toggle__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .motion-toggle[aria-pressed="true"] { color: var(--fg); background-size: calc(100% - 26px) 1px; }

  /* ---------- bottom bar (§3.7) ---------- */
  .bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
    height: calc(var(--bar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: none;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid var(--line);
    color: var(--ink);
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2);
  }
  .bottombar.is-managed { transform: translateY(calc(100% + 2px)); }
  .bottombar.is-managed:not(.is-visible) { visibility: hidden; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2), visibility 0s var(--dur-3); }
  .bottombar.is-managed.is-visible { transform: none; }
  .bar-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; height: var(--bar-h); padding: 0 4px;
    font-size: var(--fs-label); font-weight: 500; line-height: 1.1; text-align: center; text-decoration: none;
    color: var(--ink); border-left: 1px solid var(--line);
    transition: background-color var(--dur-2), color var(--dur-2);
  }
  .bar-btn:first-child { border-left: 0; }
  .bar-btn .icon { width: 20px; height: 20px; }
  .bar-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .bar-btn--primary { background: var(--blue-fill); color: var(--on-fill); border-left-color: var(--blue-fill); }
  .bar-btn--primary:hover { background: var(--blue-deep); }
  .bar-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The action bar: phones, and tablets in portrait. */
  @media (max-width: 767px), (max-width: 1099px) and (orientation: portrait) {
    .bottombar { display: grid; }
    .page { --bar-space: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  }
  /* The seller bar replaces it at every breakpoint (Sell page). */
  .page[data-bar="seller"] { --bar-space: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .page[data-bar="seller"] .bottombar { display: grid; }
  @media (min-width: 1100px) {
    .page[data-bar="seller"] .bottombar {
      left: 50%; right: auto; bottom: 16px; width: 640px; margin-left: -320px;
      height: var(--bar-h); padding-bottom: 0;
      border: 1px solid var(--line);
      box-shadow: 0 18px 50px -24px rgba(17, 17, 17, .35);
    }
    .page[data-bar="seller"] { --bar-space: calc(var(--bar-h) + 32px); }
    .page[data-bar="seller"] .bar-btn { flex-direction: row; gap: 8px; }
    .page[data-bar="seller"] .bottombar.is-managed:not(.is-visible) { transform: translateY(calc(100% + 28px)); }
  }
  .page[data-bar="none"] .bottombar { display: none; }
  .page[data-bar="none"] { --bar-space: 0px; }
  html.menu-open .bottombar { transform: translateY(calc(100% + 2px)); }

  /* ---------- toast + light ring (§3.6) ---------- */
  /* nav.js uses .toast[data-toast] (footer partial); share.js creates .ah-toast. Same look. */
  .toast, .ah-toast {
    position: fixed; left: 50%; bottom: calc(var(--bar-space) + 16px); z-index: var(--z-toast);
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 14px 18px 14px 20px; background: var(--night); color: var(--on-night);
    font: 500 var(--fs-label)/1.4 var(--sans);
    box-shadow: 0 0 0 1px var(--night-line), 0 18px 40px -16px rgba(0, 0, 0, .5);
    translate: -50% 0; opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
  }
  .toast.is-visible, .ah-toast.is-visible { opacity: 1; transform: none; }
  .toast::before, .ah-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--glow); box-shadow: 0 0 10px var(--glow); }
  .light-ring { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1px solid var(--glow); box-shadow: 0 0 12px var(--glow), inset 0 0 8px color-mix(in srgb, var(--glow) 50%, transparent); pointer-events: none; animation: light-ring var(--dur-5) var(--ease-out) forwards; }
  @keyframes light-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(var(--ring-scale, 14)); opacity: 0; } }

  /* ---------- film frame (§3.7) ---------- */
  /* Markup from js/ui/film.js: figure.film[data-film] > picture.film__poster + video.film__video
     + figcaption.film__label; film.js appends button.film__pause and sets data-film-state. */
  .film { position: relative; display: block; margin: 0; aspect-ratio: var(--ratio, 9 / 14); overflow: hidden; background: var(--night-2); isolation: isolate; color: var(--on-night); }
  .film > picture, .film > .film__poster, .film > img { position: absolute; inset: 0; display: block; }
  .film .film__poster img, .film > picture img, .film > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 35%); }
  .film__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 35%); }
  .film::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 28%; background: linear-gradient(rgba(11, 11, 12, .45), transparent); pointer-events: none; }
  .film__label {
    position: absolute; left: 12px; top: 12px; z-index: 2; margin: 0;
    display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 11px;
    background: rgba(11, 11, 12, .72); color: var(--on-night);
    font: 500 13px/1 var(--sans); letter-spacing: .06em; text-transform: none;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .film__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glow-soft); box-shadow: 0 0 8px var(--glow); }
  .film[data-film-state="playing"] .film__label::before { animation: live-dot 2s var(--ease-in-out) infinite; }
  @keyframes live-dot { 50% { opacity: .35; } }
  .film__pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--on-night); background: rgba(11, 11, 12, .6); border: 1px solid var(--on-night-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color var(--dur-2), background-color var(--dur-2); }
  .film__pause:hover { border-color: var(--on-night); background: rgba(11, 11, 12, .8); }
  .film__pause svg { width: 18px; height: 18px; }
  .film__pause-icon { display: inline-flex; }
  .film video::cue { font: 500 1rem/1.35 var(--sans); background: rgba(11, 11, 12, .75); color: #F5F5F5; }
  /* Lit frame (§1.1 rule 3): a 1px --glow border, a soft glow and an optional light cone. */
  .film--lit, .lit-frame { box-shadow: 0 0 0 1px var(--glow), 0 0 42px -8px color-mix(in srgb, var(--glow) 60%, transparent), 0 40px 80px -30px rgba(40, 82, 229, .45); }
  .cone { position: relative; }
  .cone::after { content: ""; position: absolute; left: -24%; right: -24%; top: 100%; height: 55%; background: radial-gradient(50% 60% at 50% 0%, rgba(91, 123, 255, .14), transparent 72%); pointer-events: none; }
  .film--card { --ratio: 4 / 5; }
  .film--wide { --ratio: 16 / 10; }

  /* ---------- Stage3D region (§3.7, §9.3) ---------- */
  /* A container that reserves layout and registers with stage3d.js (data-stage, data-stage-state =
     poster | loading | live | fallback | static | lost). No canvas of its own: the page's one fixed
     .stage-canvas draws into its rect. Poster, T1 fallback, text alternative, Replay, Skip, overlays. */
  .stage {
    position: relative; isolation: isolate;
    min-height: var(--stage-h, 70svh);
    background: var(--night); color: var(--on-night);
    overflow: hidden;
    --bg: var(--night); --bg-2: var(--night-2); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2); --rule: var(--night-line); --ctl: #A3A3A8; --accent: var(--blue-on-night); --ring: #7C95FF;
  }
  .stage--card { aspect-ratio: 4 / 3; min-height: 0; max-height: 40svh; }
  .stage .stage-poster, .stage [data-stage-poster], .stage__poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-4) var(--ease-out); }
  .stage__poster img, .stage__poster picture { width: 100%; height: 100%; object-fit: cover; }
  .stage[data-stage-state="live"] .stage-poster, .stage[data-stage-state="live"] [data-stage-poster], .stage.is-live .stage__poster { opacity: 0; }
  .stage .stage-fallback, .stage [data-stage-fallback] { position: absolute; inset: 0; z-index: 0; display: none; }
  .stage[data-stage-state="fallback"] .stage-fallback, .stage[data-stage-state="fallback"] [data-stage-fallback] { display: block; }
  .stage[data-stage-state="fallback"] .stage-poster, .stage[data-stage-state="fallback"] [data-stage-poster] { opacity: 0; }
  .stage .stage-overlay, .stage [data-stage-overlay], .stage__overlay { position: absolute; inset: 0; z-index: var(--z-overlay); pointer-events: none; }
  .stage .stage-overlay > *, .stage [data-stage-overlay] > *, .stage__overlay > * { pointer-events: auto; }
  .stage[data-stage-state="loading"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: var(--z-overlay); height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent) -40% 0 / 40% 100% no-repeat; animation: mount-scan 1.2s linear infinite; }
  .stage__label { position: absolute; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night); white-space: nowrap; translate: -50% -50%; text-shadow: 0 0 12px rgba(0, 0, 0, .9); }
  .stage__label--dim { color: var(--on-night-2); }
  .stage__controls { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: var(--z-overlay); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .stage__replay, .stage__skip, .stage [data-stage-replay] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--on-night); background: rgba(11, 11, 12, .55); border: 1px solid var(--on-night-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; }
  .stage__replay:hover, .stage__skip:hover, .stage [data-stage-replay]:hover { border-color: var(--on-night); }
  .stage[data-stage-state="static"] [data-stage-replay], .stage[data-stage-state="fallback"] [data-stage-replay] { display: none; }
  .stage__alt { font-size: var(--fs-label); line-height: 1.5; color: var(--on-night-2); }
  .stage__caption { position: absolute; left: var(--gutter); bottom: 72px; z-index: var(--z-overlay); max-width: 44ch; font-size: var(--fs-label); line-height: 1.5; color: var(--on-night-2); }
  .hotspot { position: absolute; width: 44px; height: 44px; translate: -50% -50%; display: grid; place-items: center; }
  .hotspot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--glow-soft); box-shadow: 0 0 0 4px rgba(91, 123, 255, .25), 0 0 18px var(--glow); }
  .hotspot::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid var(--glow); animation: hotspot-pulse 2.4s var(--ease-out) infinite; }
  @keyframes hotspot-pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
  .stage-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: var(--z-stage); pointer-events: none; }
  .skip-intro { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 16px); z-index: var(--z-overlay); }
  /* motion.js places .skip-pin (one Skip link per pinned group); this is its look. */
  .skip-pin { z-index: var(--z-overlay); gap: 8px; font-weight: 500; letter-spacing: .02em; color: var(--on-night); background: rgba(11, 11, 12, .72); border: 1px solid var(--on-night-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; }
  .skip-pin:hover { border-color: var(--on-night); }

  /* ---------- night window (§3.7) ---------- */
  .night-layout { display: block; }
  .night-window { display: none; }
  @media (min-width: 1024px) {
    .night-layout { display: grid; grid-template-columns: minmax(0, 1fr) min(42vw, 620px); gap: clamp(32px, 4vw, 72px); align-items: start; }
    .night-window {
      display: block; position: sticky; top: 80px;
      height: calc(100svh - 112px);
      background: var(--night); border: 1px solid var(--night-line);
      overflow: hidden;
    }
    .night-window .stage { position: absolute; inset: 0; min-height: 0; }
  }
  .night-expand { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: var(--night); pointer-events: none; clip-path: inset(var(--t, 0) var(--r, 0) var(--b, 0) var(--l, 0)); transition: clip-path var(--dur-5) var(--ease-in-out); }

  /* ---------- wipe (paper to night, §1.1 rule 6) ---------- */
  .wipe { position: relative; isolation: isolate; --p: 0; }
  .wipe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
  .wipe::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 1px; z-index: 1; background: var(--glow); box-shadow: 0 0 12px var(--glow), 0 0 36px rgba(91, 123, 255, .6); opacity: calc(min(var(--p) * 30, 1) * min((1 - var(--p)) * 30, 1)); pointer-events: none; }
  .wipe--down::before { clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
  .wipe--down::after { left: 0; right: 0; width: auto; height: 1px; top: calc(var(--p) * 100%); bottom: auto; }
  .glow-edge { height: 1px; background: var(--glow); box-shadow: 0 0 12px var(--glow); }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .inkstop { --from: var(--ink); --to: var(--on-night); --stop: 0px; background: linear-gradient(90deg, var(--to) 0 var(--stop), var(--from) var(--stop) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }

  /* ---------- review card + deck (§3.7) ---------- */
  .review-card {
    position: relative; display: grid; gap: 18px; align-content: start;
    padding: clamp(22px, 3vw, 32px);
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--rule);
  }
  .review-card__mark { display: block; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 88px; line-height: 1; height: 44px; margin-top: -6px; color: var(--accent); }
  .review-card__quote { font-size: 1.125rem; line-height: 1.55; letter-spacing: -.005em; }
  .review-card__quote--lg { font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; }
  .review-card__who { display: flex; align-items: center; gap: 12px; }
  .review-card__who .avatar { width: 44px; height: 44px; }
  .review-card__name { font-weight: 600; font-size: 1rem; }
  .review-card__meta { font-size: var(--fs-label); color: var(--fg-muted); }
  .stars { display: inline-flex; gap: 2px; color: var(--accent); }
  .stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
  .review-card__link { justify-self: start; font-size: var(--fs-label); }
  .review-deck { position: relative; display: grid; gap: 20px; }
  .review-deck__stage { position: relative; display: grid; perspective: 1400px; perspective-origin: 50% 30%; touch-action: pan-y; }
  .review-deck__stage > .review-slot { grid-area: 1 / 1; transform-style: preserve-3d; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out); transform: translate3d(0, calc(var(--d, 0) * 14px), calc(var(--d, 0) * -60px)) rotate(calc(var(--d, 0) * 1.4deg)); opacity: calc(1 - var(--d, 0) * .28); z-index: calc(10 - var(--d, 0)); }
  .review-deck__stage > .review-slot[data-d="3"], .review-deck__stage > .review-slot[data-d="4"], .review-deck__stage > .review-slot.is-far { opacity: 0; pointer-events: none; }
  .review-slot.is-dragging { transition: none; }
  .review-slot.is-leaving { transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3); opacity: 0; }
  .review-slot__inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform var(--dur-3) var(--ease-out); min-height: 100%; }
  .review-slot.is-flipped .review-slot__inner { transform: rotateY(180deg); }
  .review-slot__inner > .review-card { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .review-slot__inner > .review-card--back { transform: rotateY(180deg); }
  .review-slot:not([data-d="0"]) .review-card { box-shadow: none; }
  .review-slot[data-d="0"] .review-card { box-shadow: 0 30px 60px -40px rgba(17, 17, 17, .35); }
  .review-deck__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .review-deck__count { font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--fg-2); }

  /* ---------- stat (§3.7) ---------- */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
  @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .stat { display: grid; gap: 10px; align-content: start; padding: 24px 20px 24px 0; border-bottom: 1px solid var(--rule); }
  @media (min-width: 900px) { .stat + .stat { padding-left: 24px; border-left: 1px solid var(--rule); } .stat { border-bottom: 0; } }
  .stat__num { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .12em; }
  .stat__num small { font-size: .4em; letter-spacing: -.01em; font-weight: 500; }
  .stat__label { font-size: var(--fs-label); line-height: 1.45; color: var(--fg-2); max-width: 22ch; }
  .stat__label a { color: inherit; }
  .stat .stars svg { width: 16px; height: 16px; }
  .star-sweep { position: relative; display: inline-flex; }
  .star-sweep .stars { color: var(--rule); }
  .star-sweep .stars--fill { position: absolute; inset: 0; color: var(--accent); clip-path: inset(0 calc(100% - var(--sweep, 100%)) 0 0); transition: clip-path var(--dur-5) var(--ease-out); }
  /* odometer (CSS @property integer, driven by --n) */
  .odo { --n: 0; counter-reset: odo var(--n); transition: --n var(--dur-4) var(--ease-out); font-variant-numeric: tabular-nums; }
  .odo::before { content: counter(odo); }
  .odo.is-in { --n: var(--to, 0); }
  .odo--static::before { content: none; }
  /* year roll (§3.5): 2019 rolls to 2025, then settles as "2019 & 2025" */
  .year-roll { display: inline-flex; align-items: baseline; gap: .25em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .year-roll__win { display: inline-block; height: 1.05em; line-height: 1.05; overflow: hidden; vertical-align: bottom; }
  .year-roll__strip { display: flex; flex-direction: column; transition: transform var(--dur-4) var(--ease-out); }
  .year-roll__strip > span { height: 1.05em; }
  .year-roll__amp, .year-roll__first { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); vertical-align: bottom; }
  .year-roll.is-rolled .year-roll__strip { transform: translateY(-50%); }
  .year-roll.is-settled .year-roll__amp { max-width: 1.4em; opacity: 1; }
  .year-roll.is-settled .year-roll__first { max-width: 3em; opacity: 1; }
  .year-roll.is-static .year-roll__win { display: none; }

  /* ---------- quote marquee (§3.7) ---------- */
  .marquee { position: relative; display: flex; align-items: center; border-block: 1px solid var(--rule); overflow: hidden; }
  .marquee__viewport { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .marquee__track { display: flex; width: max-content; gap: 56px; padding: 22px 28px; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
  .marquee__item { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.625rem); letter-spacing: -.01em; }
  .marquee__item cite { font-family: var(--sans); font-style: normal; font-size: var(--fs-label); color: var(--fg-muted); letter-spacing: 0; }
  .marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); align-self: center; margin-left: 42px; }
  .marquee__pause { flex: none; margin: 0 8px; }
  .marquee.is-static .marquee__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .marquee.is-static .marquee__track { transform: none; }
  .marquee.is-static .marquee__item { scroll-snap-align: start; white-space: normal; max-width: 80vw; }
  .marquee.is-static .marquee__pause, .marquee.is-static [data-clone] { display: none; }

  /* ---------- flip card (§3.7) ---------- */
  .flip-deck { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .flip { position: relative; perspective: 1400px; min-height: var(--flip-h, 320px); }
  .flip__inner { position: relative; display: grid; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform var(--dur-3) var(--ease-out); }
  .flip.is-flipped .flip__inner { transform: rotateY(180deg); }
  .flip__face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 30px); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--bg); border: 1px solid var(--rule); }
  .flip__front { justify-content: flex-start; }
  .flip__front .flip__hint { margin-top: auto; }
  .flip__back { transform: rotateY(180deg); background: var(--night); color: var(--on-night); border-color: var(--night-line);
    --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2); --rule: var(--night-line); --ctl: #A3A3A8; --accent: var(--blue-on-night); --ring: #7C95FF; }
  .flip__num { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .flip__front .flip__num::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 14px; background: var(--accent); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
  .flip:hover .flip__front .flip__num::after { transform: scaleX(1.6); }
  .flip__q { margin-top: 6px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
  .flip__q em { font-family: var(--serif); font-style: italic; color: var(--accent); }
  .flip__toggle { text-align: left; font: inherit; letter-spacing: inherit; color: inherit; }
  .flip__toggle::after { content: ""; position: absolute; inset: 0; }
  .flip__hint { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--fg-muted); }
  .flip:hover .flip__hint .icon { transform: rotate(-30deg); }
  .flip__hint .icon { transition: transform var(--dur-3) var(--ease-out); width: 18px; height: 18px; }
  .flip__a { font-size: 1rem; line-height: 1.55; }
  .flip__meta { font-size: var(--fs-label); color: var(--on-night-2); margin-top: auto; }
  .flip__meta a { color: var(--blue-on-night); }
  .flip__actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
  .flip__close { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-label); color: var(--on-night-2); }
  .flip__close:hover { color: var(--on-night); }

  /* ---------- drawer ("Go deeper") ---------- */
  .drawer { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .drawer + .drawer { border-top: 0; }
  .drawer > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.0625rem; }
  .drawer > summary::-webkit-details-marker { display: none; }
  .drawer > summary .drawer__hint { font-size: var(--fs-label); font-weight: 400; color: var(--fg-muted); margin-left: auto; }
  .drawer > summary::after { content: ""; width: 14px; height: 14px; flex: none; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform var(--dur-3) var(--ease-out), background-size var(--dur-3) var(--ease-out); }
  .drawer[open] > summary::after { transform: rotate(180deg); background-size: 14px 1.5px, 1.5px 0; }
  .drawer__body { padding: 4px 0 24px; }

  /* ---------- calculator kit (§3.7, §6.0) ---------- */
  .tool { display: grid; gap: var(--s-5); padding: clamp(20px, 3vw, 36px); border: 1px solid var(--rule); background: var(--bg); }
  .tool__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
  .tool__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.02em; }
  .tool__grid { display: grid; gap: var(--s-5); }
  @media (min-width: 900px) { .tool__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); } }
  .tool__inputs { display: grid; gap: 18px; align-content: start; }
  .tool__foot { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .field { display: grid; gap: 8px; }
  .field__label { font-size: var(--fs-label); font-weight: 500; line-height: 1.3; color: var(--fg); display: flex; justify-content: space-between; gap: 8px; }
  .field__label .opt { font-weight: 400; color: var(--fg-muted); }
  .field__hint { font-size: var(--fs-label); line-height: 1.45; color: var(--fg-muted); }
  .input, .select, .textarea {
    width: 100%; min-height: 48px; padding: 0 14px;
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--ctl); border-radius: 0;
    font-size: 1rem; line-height: 1.3; font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
    -webkit-appearance: none; appearance: none;
  }
  .textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
  .select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--fg); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
  .input::placeholder, .textarea::placeholder { color: var(--fg-muted); opacity: 1; }
  .input-wrap { position: relative; display: flex; align-items: stretch; }
  .input-wrap .input { flex: 1; min-width: 0; }
  .adorn { display: grid; place-items: center; min-width: 40px; padding: 0 10px; border: 1px solid var(--ctl); color: var(--fg-2); font-size: 1rem; background: var(--bg-2); }
  .adorn--pre { border-right: 0; }
  .adorn--post { border-left: 0; }
  input[type="date"].input { padding-right: 8px; }
  .range { --fill: 50%; width: 100%; height: 32px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
  .range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--blue-fill) 0 var(--fill), var(--ctl) var(--fill) 100%); }
  .range::-moz-range-track { height: 2px; background: var(--ctl); }
  .range::-moz-range-progress { height: 2px; background: var(--blue-fill); }
  .range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; background: var(--bg); border: 1.5px solid var(--fg); border-radius: 0; transition: transform var(--dur-1); }
  .range::-moz-range-thumb { width: 16px; height: 16px; background: var(--bg); border: 1.5px solid var(--fg); border-radius: 0; }
  .range:active::-webkit-slider-thumb { transform: scale(1.15); border-color: var(--blue-fill); }
  .range:focus-visible { outline: none; }
  .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ring); }
  .range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ring); }
  /* toggle switch (native checkbox; add the `switch` attribute for iOS haptics) */
  .switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; }
  .switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
  .switch__track { position: relative; width: 44px; height: 24px; flex: none; border: 1px solid var(--ctl); background: var(--bg); transition: background-color var(--dur-2), border-color var(--dur-2); }
  .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--fg-2); transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2); }
  .switch input:checked + .switch__track { background: var(--blue-fill); border-color: var(--blue-fill); }
  .switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--on-fill); }
  .switch input:focus-visible + .switch__track { outline: 3px solid var(--ring); outline-offset: 2px; }
  /* segmented control */
  .segmented { display: inline-flex; width: max-content; border: 1px solid var(--ctl); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .segmented > label, .segmented > button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font-size: var(--fs-label); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2); }
  .segmented > label + label, .segmented > button + button { border-left: 1px solid var(--ctl); }
  .segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .segmented > label:has(input:checked), .segmented > button[aria-pressed="true"], .segmented > button[aria-selected="true"] { background: var(--blue-fill); color: var(--on-fill); }
  .segmented > label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: -3px; }
  /* outputs */
  .output { display: grid; gap: 6px; }
  .output__label { font-size: var(--fs-label); color: var(--fg-2); }
  .output__value { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .output__value--sm { font-size: 1.5rem; letter-spacing: -.02em; }
  .output__sub { font-size: var(--fs-label); color: var(--fg-muted); }
  .kv { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; }
  .kv > * { padding: 10px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
  .kv > dt, .kv > .k { color: var(--fg-2); }
  .kv > dd, .kv > .v { margin: 0; text-align: right; font-weight: 500; }
  .kv .total { font-weight: 600; color: var(--fg); border-bottom: 0; border-top: 1px solid var(--fg); }
  /* waterfall */
  .waterfall { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
  .wf-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 6.5rem; align-items: center; gap: 12px; font-size: var(--fs-label); }
  .wf-row__label { color: var(--fg-2); }
  .wf-row__track { position: relative; height: 22px; }
  .wf-row__bar { position: absolute; top: 0; bottom: 0; left: var(--from, 0%); width: var(--w, 0%); background: var(--fg); transition: left var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out); }
  .wf-row--neg .wf-row__bar { background: repeating-linear-gradient(135deg, var(--fg-muted) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--fg-muted); }
  .wf-row--total .wf-row__bar { background: var(--blue-fill); }
  .wf-row--total { font-weight: 600; }
  .wf-row__value { text-align: right; font-weight: 500; }
  @media (max-width: 520px) { .wf-row { grid-template-columns: minmax(0, 1fr) 6rem; } .wf-row__track { grid-column: 1 / -1; grid-row: 2; height: 12px; } }
  /* stacked bar */
  .stackbar { display: grid; gap: 12px; }
  .stackbar__bar { display: flex; height: 28px; width: 100%; background: var(--bg-2); }
  .stackbar__seg { height: 100%; width: var(--w, 0%); background: var(--c, var(--fg)); transition: width var(--dur-3) var(--ease-out); }
  .stackbar__seg + .stackbar__seg { box-shadow: inset 1px 0 0 var(--bg); }
  .stackbar__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-label); color: var(--fg-2); list-style: none; margin: 0; padding: 0; }
  .stackbar__legend li { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
  .stackbar__legend i { width: 10px; height: 10px; background: var(--c, var(--fg)); }
  .seg-1 { --c: var(--blue-fill); } .seg-2 { --c: var(--ink); } .seg-3 { --c: color-mix(in srgb, var(--ink) 55%, var(--paper)); } .seg-4 { --c: color-mix(in srgb, var(--blue-fill) 45%, var(--paper)); } .seg-5 { --c: color-mix(in srgb, var(--ink) 25%, var(--paper)); } .seg-6 { --c: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 5px); }
  /* compare bar */
  .compare { display: grid; gap: 14px; }
  .compare__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 7rem; gap: 12px; align-items: center; font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
  .compare__bar { display: block; height: 14px; width: var(--w, 0%); background: var(--fg); transition: width var(--dur-4) var(--ease-out); }
  .compare__row.is-lead .compare__bar { background: var(--blue-fill); }
  .compare__row .v { text-align: right; font-weight: 600; }
  .comp-note { font-size: var(--fs-label); color: var(--fg-2); padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--bg-2); }
  .tool-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }

  /* ---------- planner (js/ui/planner.js markup) ---------- */
  /* .planner > ol.planner__weeks > li.week > (.week__when, ul.week__items > li.milestone[.milestone--key]
     > time.milestone__date + .milestone__body > .milestone__label + .milestone__note), then the note,
     actions and a <details class="drawer planner__ics-text"> with the .ics text in a .codebox. */
  .planner { display: grid; gap: var(--s-5); }
  .planner__dates { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .planner__weeks { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
  .week { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
  .week:last-child { border-bottom: 1px solid var(--rule); }
  .week__when { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); line-height: 1.4; }
  .week__when small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-muted); margin-top: 2px; font-size: var(--fs-label); }
  .week__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .milestone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .milestone__date { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 7px; border: 1px solid var(--ctl); white-space: nowrap; letter-spacing: .02em; }
  .milestone__body { display: grid; gap: 2px; }
  .milestone__label { font-size: 1rem; line-height: 1.45; }
  .milestone__note { font-size: var(--fs-label); color: var(--fg-muted); }
  .milestone--key .milestone__date { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
  .milestone--key .milestone__label { font-weight: 500; }
  .milestone.is-past { opacity: .6; }
  .planner__note, .planner__fine { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-muted); }
  .planner__empty { padding: 18px; border: 1px dashed var(--ctl); color: var(--fg-2); font-size: var(--fs-label); list-style: none; }
  .planner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0; }
  .codebox { width: 100%; min-height: 140px; padding: 12px; font: 13px/1.5 var(--sans); font-variant-numeric: tabular-nums; background: var(--bg-2); color: var(--fg); border: 1px solid var(--ctl); }
  @media (max-width: 520px) { .week { grid-template-columns: 1fr; gap: 8px; } }

  /* ---------- form kit (js/ui/forms.js markup) ---------- */
  /* No red here: --sold-red belongs to the SOLD moment only (§3.1). Errors are ink with a 2px
     accent rule and an explicit message. */
  .form { display: grid; gap: 18px; max-width: 640px; }
  .form__row { display: grid; gap: 18px; }
  @media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
  .field--address .input { min-height: 56px; font-size: 1.125rem; }
  .fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
  .fieldset > legend { padding: 0; margin-bottom: 10px; font-size: var(--fs-label); font-weight: 500; }
  .consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-label); line-height: 1.5; color: var(--fg-2); cursor: pointer; }
  .consent input, .check { width: 22px; height: 22px; margin: 0; accent-color: var(--blue-fill); }
  .consent a { color: var(--accent); }
  .hp, [data-honeypot] { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .form-errors { display: grid; gap: 6px; margin: 0 0 16px; padding: 14px 18px; color: var(--fg); border: 1px solid var(--ctl); border-left: 2px solid var(--accent); background: var(--bg-2); }
  .form-errors__title { margin: 0; font-weight: 600; }
  .form-errors__list { margin: 0; padding-left: 1.2em; font-size: var(--fs-label); }
  .form-errors a { color: var(--fg); }
  .field-error, .field__error { display: flex; gap: 8px; align-items: baseline; margin: 2px 0 0; font-size: var(--fs-label); font-weight: 500; color: var(--fg); }
  .field-error::before, .field__error::before { content: ""; flex: none; width: 10px; height: 2px; background: var(--accent); transform: translateY(-3px); }
  .field__error { display: none; }
  .field.is-invalid .field__error, [aria-invalid="true"] ~ .field__error { display: flex; }
  .form-success { position: relative; display: grid; gap: 12px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--rule); border-top: 2px solid var(--accent); overflow: hidden; }
  .form-success__title { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.01em; }
  .form-success__preview { font-size: var(--fs-label); color: var(--fg-muted); }
  .form__foot { display: grid; gap: 12px; }
  .form__privacy { font-size: var(--fs-label); color: var(--fg-muted); }
  .form__privacy a { color: var(--accent); }
  .house-draw path, .house-draw line, .house-draw rect { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset var(--dur-4) var(--ease-out); }
  .house-draw .is-drawn { stroke-dashoffset: 0; }

  /* ---------- stories player (SM3; js/ui/stories.js markup) ---------- */
  .stories__list { list-style: none; margin: 0; padding: 0; display: grid; }
  .stories__list > li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--rule); transition: color var(--dur-2); color: var(--fg-muted); }
  .stories__list > li.is-active { color: var(--fg); }
  [data-story-open] { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; text-align: left; color: inherit; width: 100%; }
  [data-story-open] picture { display: none; }
  .story__num { font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; }
  .story__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
  .story__line { font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: var(--accent); padding-left: calc(2ch + 14px); }
  [data-stories-mode="cards"] .stories__list, [data-stories-mode="grid"] .stories__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
  [data-stories-mode="cards"] .stories__list > li, [data-stories-mode="grid"] .stories__list > li { border: 0; padding: 0; color: var(--fg); }
  [data-stories-mode="cards"] [data-story-open] picture, [data-stories-mode="grid"] [data-story-open] picture { display: block; grid-column: 1 / -1; aspect-ratio: 9 / 14; overflow: hidden; background: var(--night-2); margin-bottom: 8px; }
  [data-stories-mode="cards"] [data-story-open] img, [data-stories-mode="grid"] [data-story-open] img { width: 100%; height: 100%; object-fit: cover; }
  [data-stories-mode="cards"] .story__line, [data-stories-mode="grid"] .story__line { padding-left: 0; font-size: 1rem; }
  .stories-frame__card { position: relative; aspect-ratio: 9 / 16; background: var(--night); overflow: hidden; box-shadow: 0 0 0 1px var(--glow), 0 0 42px -8px color-mix(in srgb, var(--glow) 60%, transparent), 0 40px 80px -30px rgba(40, 82, 229, .45); transform-style: preserve-3d; }
  .stories-frame__label { font-family: var(--serif); font-style: italic; }
  .story-bar { flex: 1; height: 2px; background: rgba(245, 245, 245, .3); overflow: hidden; }
  .story-bar i { display: block; height: 100%; background: var(--on-night); transform-origin: left; }
  dialog.story-player { color: var(--on-night); background: var(--night); }
  .story-player__btn { border-color: var(--on-night-2); }
  .story-player__btn:hover { border-color: var(--on-night); }
  .story-player video::cue { font: 500 1rem/1.35 var(--sans); background: rgba(11, 11, 12, .75); }

  /* ---------- checklist (§3.7; js/ui/checklist.js) ---------- */
  .checklist { position: relative; display: grid; gap: 16px; }
  .checklist__head { display: grid; gap: 10px; }
  .checklist__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
  .checklist__progress { display: flex; align-items: center; gap: 14px; font-size: var(--fs-label); color: var(--fg-2); font-variant-numeric: tabular-nums; }
  .checklist__count { flex: none; min-width: 9ch; }
  .checklist__meter { flex: 1; height: 2px; background: var(--rule); position: relative; overflow: hidden; }
  .checklist__meter > i { position: absolute; inset: 0; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--done, 0)); transition: transform var(--dur-3) var(--ease-out); }
  .checklist__items { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
  .check-item { position: relative; border-bottom: 1px solid var(--rule); }
  .check-item label { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 14px 4px 14px 0; min-height: 52px; cursor: pointer; }
  /* The native checkbox (with `switch` for iPhone haptics) sits on top of the drawn box, invisible. */
  .check-item input { position: absolute; left: 0; top: 14px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
  .check-box { width: 24px; height: 24px; border: 1px solid var(--ctl); display: grid; place-items: center; transition: background-color var(--dur-2), border-color var(--dur-2); background: var(--bg); }
  .check-box svg { width: 16px; height: 16px; fill: none; stroke: var(--on-fill); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .check-box path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--dur-3) var(--ease-out) 60ms; }
  .check-item input:checked + .check-box { background: var(--blue-fill); border-color: var(--blue-fill); }
  .check-item input:checked + .check-box path { stroke-dashoffset: 0; }
  .check-item input:focus-visible + .check-box { outline: 3px solid var(--ring); outline-offset: 2px; }
  .check-item label:hover .check-box { border-color: var(--fg); }
  .check-item__text { display: grid; gap: 2px; font-size: 1rem; line-height: 1.45; }
  .check-item__hint { font-size: var(--fs-label); color: var(--fg-muted); }
  .check-item input:checked ~ .check-item__text > span:first-child { color: var(--fg-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-decoration-thickness: 1px; }
  .checklist__actions { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
  .checklist__actions .btn--tertiary { font-size: var(--fs-label); }
  [data-cl-reset].is-armed { color: var(--accent); }
  .checklist__done { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.3; color: var(--accent); min-height: 1.3em; }
  .checklist__done:empty { min-height: 0; }
  .checklist__print-hint { font-size: var(--fs-label); color: var(--fg-muted); }
  .checklist.is-print-view { max-width: 720px; padding: clamp(20px, 4vw, 40px); border: 1px solid var(--fg); background: var(--bg); }
  .checklist.is-print-view .check-item__hint { color: var(--fg-2); }
  .shared-load { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 16px; padding: 14px 16px; background: var(--bg-2); border: 0; border-left: 2px solid var(--accent); font-size: var(--fs-label); }
  .shared-load__text { flex: 1 1 220px; margin: 0; font-weight: 500; }
  .shared-load__actions { display: flex; gap: 10px; }
  .shared-load .btn { min-height: 44px; }

  /* ---------- Send to Ashton tray (js/ui/tray.js) / Send to my partner (js/ui/share.js) ---------- */
  dialog.tray, dialog.share-sheet {
    width: 100%; max-width: min(520px, calc(100vw - 32px)); padding: 0;
    color: var(--fg); background: var(--bg); border: 1px solid var(--ctl);
    box-shadow: 0 30px 80px -30px rgba(11, 11, 12, .55);
  }
  dialog.tray::backdrop, dialog.share-sheet::backdrop { background: rgba(11, 11, 12, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  dialog.tray[open], dialog.share-sheet[open] { animation: sheet-in var(--dur-3) var(--ease-out); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .tray__inner, .share-sheet__inner { position: relative; display: grid; gap: 16px; padding: 24px; }
  .tray__inner::before, .share-sheet__inner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue-fill); }
  .tray__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .tray__title, .share-sheet__title { margin: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
  .tray__lede, .tray__preview, .tray__number, .share-sheet__lede { margin: 0; color: var(--fg-2); font-size: var(--fs-label); line-height: 1.5; }
  .tray__preview-label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .tray__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .tray__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-left: 4px; border-bottom: 1px solid var(--rule); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
  .tray__close, .tray__remove { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--fg-2); }
  .tray__close:hover, .tray__remove:hover { color: var(--fg); }
  .tray__empty { font-size: var(--fs-label); color: var(--fg-muted); }
  .tray__actions, .share-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
  .tray__link { font-size: var(--fs-label); color: var(--accent); }
  .share-sheet__url { width: 100%; min-height: 48px; padding: 0 12px; font: 1rem/1.4 var(--sans); color: var(--fg); background: var(--bg-2); border: 1px solid var(--ctl); }
  .tray-count, [data-tray-count] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--blue-fill); color: var(--on-fill); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .share-btn .icon { width: 18px; height: 18px; }
  @media (max-width: 767px) {
    dialog.tray, dialog.share-sheet { margin: auto 0 0; max-width: 100vw; border-width: 1px 0 0; }
    dialog.tray .tray__inner, dialog.share-sheet .share-sheet__inner { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  }

  /* ---------- "What you can count on" strip ---------- */
  .count-on { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .count-on li { position: relative; padding: clamp(18px, 3vw, 28px) 0; font-size: clamp(1.25rem, 2.8vw, 2rem); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
  .count-on li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg); transform-origin: left; transform: scaleX(var(--drawn, 1)); transition: transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
  .count-on li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
  .count-on li em { font-family: var(--serif); font-style: italic; color: var(--accent); }
  .count-on.is-armed li::before { --drawn: 0; }
  .count-on.is-armed.is-in li::before { --drawn: 1; }

  /* ---------- lane switcher (Lease, §3.7) ---------- */
  .lanes { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--rule); }
  .lane-intro { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px 20px 24px 0; border-bottom: 1px solid var(--rule); }
  @media (min-width: 560px) { .lane-intro { padding-left: 20px; border-left: 1px solid var(--rule); } }
  .lane-intro::before { content: ""; position: absolute; left: -1px; top: -1px; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
  .lane-intro.is-open::before { transform: scaleX(1); }
  .lane-intro__n { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .lane-intro__title { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
  .lane-intro__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
  .lane-intro__line { font-size: 1rem; color: var(--fg-2); }
  .lane-open { justify-self: start; }
  .lane-open[aria-expanded="true"] .icon { transform: rotate(90deg); }
  .lane-body { padding-block: var(--section-y); border-top: 1px solid var(--rule); }
  .lane-body[hidden="until-found"] { padding: 0; border: 0; }
  .lane-body.is-opening { animation: lane-open var(--dur-4) var(--ease-out) both; }
  @keyframes lane-open { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
  .lane-sweep { position: fixed; left: 0; right: 0; height: 1px; top: 50%; z-index: calc(var(--z-header) - 2); background: var(--glow); box-shadow: 0 0 16px var(--glow); pointer-events: none; animation: lane-sweep var(--dur-4) var(--ease-in-out) forwards; }
  @keyframes lane-sweep { from { transform: scaleX(0); transform-origin: left; opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }

  /* ---------- tool mount ---------- */
  .tool-mount { position: relative; }
  .tool-mount__summary { display: grid; gap: 10px; justify-items: start; padding: 20px; border: 1px dashed var(--ctl); }
  .tool-mount[data-state="loading"]::before { content: attr(data-loading); display: block; margin-bottom: 10px; font-size: var(--fs-label); color: var(--fg-muted); }
  .tool-mount[data-state="loading"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: mount-scan 1.2s linear infinite; }
  @keyframes mount-scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }
  .tool-mount[data-state="ready"] > .tool-mount__summary { display: none; }
  .summary-card { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--rule); background: var(--bg); text-decoration: none; color: var(--fg); transition: border-color var(--dur-2); }
  .summary-card:hover { border-color: var(--ctl); }

  /* ---------- keep exploring + final CTA ---------- */
  .explore { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--rule); }
  .explore__link { position: relative; display: grid; gap: 8px; align-content: space-between; min-height: 140px; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rule); color: var(--fg); text-decoration: none; }
  @media (min-width: 560px) { .explore__link { padding-left: 20px; border-left: 1px solid var(--rule); } }
  .explore__link strong { font-size: 1.375rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
  .explore__link strong em { font-family: var(--serif); font-style: italic; color: var(--accent); }
  .explore__link span { font-size: var(--fs-label); color: var(--fg-muted); }
  .explore__link .icon { position: absolute; right: 16px; top: 22px; transition: transform var(--dur-3) var(--ease-out); }
  .explore__link:hover .icon { transform: translate(3px, -3px); }
  .explore__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
  .explore__link:hover::after, .explore__link:focus-visible::after { transform: scaleX(1); }
  .cta-final { display: grid; gap: 28px; justify-items: start; }
  .cta-final__who { display: flex; align-items: center; gap: 16px; }
  .cta-final__who .avatar { width: 70px; height: 70px; }
  .cta-final__phone { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

  /* ---------- quotes, callouts, sources ---------- */
  .quote { display: grid; gap: 16px; max-width: 48rem; }
  .quote cite { font-style: normal; font-size: var(--fs-label); color: var(--fg-muted); }
  .callout { padding: 18px 20px; border-left: 2px solid var(--accent); background: var(--bg-2); display: grid; gap: 6px; }
  .source-line { font-size: var(--fs-label); color: var(--fg-muted); }
  .source-line a { color: var(--accent); }
  .statement { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
  .sold-mark { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(4rem, 16vw, 12rem); line-height: .9; letter-spacing: -.03em; color: var(--fg); display: inline-block; padding-bottom: .08em; border-bottom: 2px solid var(--red); }

  /* ---------- site footer + TREC strip (§8) ---------- */
  .site-footer {
    position: relative; z-index: var(--z-content);
    background: var(--night); color: var(--on-night);
    --bg: var(--night); --bg-2: var(--night-2); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2);
    --rule: var(--night-line); --ctl: #A3A3A8; --accent: var(--blue-on-night); --ring: #7C95FF;
    color-scheme: dark;
  }
  .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--glow) 30%, var(--glow) 70%, transparent 100%); opacity: .7; }
  .site-footer a { color: inherit; }
  .footer__main { padding-block: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 64px); display: grid; gap: clamp(40px, 6vw, 64px); }
  .footer__top { display: grid; gap: 32px; }
  @media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
  .footer__brand { display: grid; gap: 22px; }
  .footer__brand .cb-logo { height: 22px; max-width: 100%; }
  .footer__who { display: flex; align-items: center; gap: 14px; }
  .footer__who .avatar { width: 56px; height: 56px; }
  .footer__name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
  .footer__name .reg-word { font-weight: 500; }
  .footer__who .broker-line { --name-size: 20px; font-size: 16px; color: var(--on-night-2); }
  .footer__line { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -.01em; max-width: 22ch; }
  .footer__line em { color: var(--blue-on-night); }
  .footer__contact { display: grid; gap: 16px; }
  .footer__contact-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .footer__contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); font-size: 1rem; }
  .footer__contact-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--on-night); font-variant-numeric: tabular-nums; }
  .footer__contact-list a:hover { color: var(--blue-on-night); }
  .footer__contact-list .icon { color: var(--on-night-2); }
  .footer__nav { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 32px; border-top: 1px solid var(--night-line); }
  @media (min-width: 900px) { .footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .footer__col h2 { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 10px; line-height: 1.4; }
  .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 40px; font-size: 1rem; text-decoration: none; color: var(--on-night); background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat; transition: background-size var(--dur-3) var(--ease-out), color var(--dur-2); }
  .footer__col a:hover, .footer__col a:focus-visible { background-size: 100% 1px; }
  .footer__col a[aria-current="page"] { color: var(--blue-on-night); }
  .footer__settings { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; padding-top: 20px; border-top: 1px solid var(--night-line); }
  .trec { border-top: 1px solid var(--night-line); background: #080809; color: var(--on-night-2); }
  .trec__inner { padding-block: 40px calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 28px; }
  .trec__links { display: grid; gap: 4px 32px; }
  @media (min-width: 900px) { .trec__links { grid-template-columns: repeat(2, max-content); } }
  .trec__links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--on-night); text-decoration: underline; text-decoration-color: var(--night-line); text-underline-offset: .25em; transition: text-decoration-color var(--dur-2), color var(--dur-2); }
  .trec__links a:hover { text-decoration-color: var(--blue-on-night); color: #FFFFFF; }
  .trec__links .icon { flex: none; color: var(--on-night-2); }
  .trec__grid { display: grid; gap: 28px; }
  @media (min-width: 900px) { .trec__grid { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px; } }
  .trec__marks { display: flex; gap: 18px; align-items: flex-start; color: var(--on-night); }
  .trec__marks svg { height: 64px; width: auto; }
  .trec__license, .trec__fh { font-size: 14px; line-height: 1.6; color: var(--on-night-2); }
  .trec__license strong { color: var(--on-night); font-weight: 600; }
  .trec__license p + p, .trec__fh p + p { margin-top: 10px; }
  .trec__fine { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--night-line); font-size: 14px; line-height: 1.6; color: var(--on-night-2); }
  .trec__fine a { color: var(--blue-on-night); text-underline-offset: .2em; }
  .trec__copy { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--on-night-2); }
  .trec__copy a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night); }
}

/* -------------------------------------------------------------- sections */
@layer sections {
  /* Page heroes share one rhythm; pages add layout in their own <style>. */
  .hero { position: relative; padding-block: clamp(40px, 8vw, 112px) clamp(56px, 10vw, 128px); }
  .hero__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: end; }
  @media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
  .hero__note { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; margin-top: clamp(24px, 4vw, 40px); max-width: 30rem; font-size: 1.0625rem; line-height: 1.6; color: var(--fg-2); }
  .hero__note::before { content: ""; height: 1px; margin-top: .8em; background: var(--fg); }
  .hero__proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .hero__chip { margin-top: 16px; }
}

/* ------------------------------------------------------------- utilities */
@layer utilities {
  .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
  .nowrap { white-space: nowrap; }
  .center { text-align: center; }
  .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
  .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
  .max-text { max-width: var(--max-text); }
  .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
  .hide-phone { display: none; }
  @media (min-width: 768px) { .hide-phone { display: revert; } .only-phone { display: none; } }
}

/* ------------------------------------------------ motion presets (§3.5) */
/* reveal-rise via scroll-driven animation; motion.js supplies the GSAP
   fallback where animation-timeline is unsupported. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="paused"]) .reveal { animation: reveal-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    :root:not([data-motion="paused"]) .reveal-stagger > * { animation: reveal-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 4%) cover calc(22% + var(--i, 0) * 4%); }
  }
}
@keyframes reveal-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
/* heading-lines: SplitText wraps lines in .hl-mask > .hl-line */
.hl-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hl-line { display: block; transform: translateY(105%); transition: transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.is-in .hl-line, .hl-line.is-in { transform: none; }
/* draw: SVG stroke-dashoffset */
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset var(--dur-4) var(--ease-out); }
.draw.is-in, .is-in .draw { stroke-dashoffset: 0; }
/* flip preset */
.flip-y { transition: transform var(--dur-3) var(--ease-out); transform-style: preserve-3d; }
.flip-y.is-flipped { transform: rotateY(180deg); }

/* Cross-document View Transitions (progressive enhancement). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }

/* ------------------------------------------------------------ print */
@media print {
  .site-header, .mobile-menu, .bottombar, .toast, .stage-canvas, .stage, .night-window, .marquee, .film__bar, .checklist__actions, .tray--sheet, .skip-link { display: none; }
  body { background: #FFFFFF; color: #111111; font-size: 12pt; }
  .page { padding: 0; }
  .site-footer { background: #FFFFFF; color: #111111; --fg: #111111; --fg-2: #484848; --fg-muted: #484848; --rule: #DEDEDE; --accent: #2852E5; }
  .site-footer::before, .footer__main, .footer__settings { display: none; }
  .trec { background: #FFFFFF; color: #111111; }
  .trec__links a, .trec__license strong, .trec__marks { color: #111111; }
  .trec__license, .trec__fh, .trec__fine, .trec__copy { color: #484848; }
  .check-item { break-inside: avoid; }
  html.print-one main > :not(:has([data-print-target])):not([data-print-target]) { display: none; }
  html.print-one .site-footer .footer__main { display: none; }
  .checklist__actions, .checklist__print-hint, .shared-load { display: none; }
  .check-box { border-color: #111111; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #656565; }
  .trec a::after, .btn::after { content: none; }
}

/* ------------- motion safety net (unlayered: beats every layer above) --- */
/* Reduced motion and the global pause (ah-motion-paused) get designed end
   states: transitions finish instantly and looping animations stop. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms; animation-delay: 0s; animation-iteration-count: 1; transition-duration: 1ms; transition-delay: 0s; }
  .hl-line { transform: none; }
  .draw { stroke-dashoffset: 0; }
  .hotspot::after, .tool-mount[data-state="loading"]::after { animation: none; }
  .flip.is-flipped .flip__inner { transform: none; }
  .flip.is-flipped .flip__front { visibility: hidden; }
  .flip:not(.is-flipped) .flip__back { visibility: hidden; }
  .flip__back { transform: none; }
  .review-slot.is-flipped .review-slot__inner { transform: none; }
  .review-slot.is-flipped .review-card--front { visibility: hidden; }
  .review-slot:not(.is-flipped) .review-card--back { visibility: hidden; }
  .review-slot__inner > .review-card--back { transform: none; }
  .mobile-menu { transition: none; }
  .light-ring { display: none; }
}
:root[data-motion="paused"] *, :root[data-motion="paused"] *::before, :root[data-motion="paused"] *::after { animation-duration: 1ms; animation-delay: 0s; animation-iteration-count: 1; transition-duration: 1ms; transition-delay: 0s; }
:root[data-motion="paused"] .hl-line { transform: none; }
:root[data-motion="paused"] .draw { stroke-dashoffset: 0; }
:root[data-motion="paused"] .hotspot::after, :root[data-motion="paused"] .tool-mount[data-state="loading"]::after { animation: none; }
:root[data-motion="paused"] .light-ring { display: none; }

/* ==========================================================================
   HOME ADDITIONS (index.html). Owner: home page engineer, 2026-09-24.
   Components the home page needed that the system didn't have yet: the
   threshold (SM1), proof list, night-map shell and its SVG fallback (SM2),
   road fan, x-ray teaser shell (SM6), pricing sequence, beats, brand line,
   scripture reveal, ride window (SM3), home value tool (T14), vault slit,
   pilot light, the three-button phone bar. Token-driven: paper, dark paper
   and night all work without variant classes. Layer: sections.
   ========================================================================== */
@layer sections {
  /* ---------- the intro sequence (SM1 + SM2 share one skip link) ---------- */
  .intro { position: relative; }
  .city-card[hidden], .spot__body[hidden], .xray__explore[hidden] { display: none; }
  .intro-skip { display: none; position: fixed; right: var(--gutter); bottom: 24px; z-index: 40; align-items: center; min-height: 44px; padding: 0 16px; font-size: var(--fs-label); }
  .intro.is-pinned.is-active .intro-skip { display: inline-flex; }

  /* ---------- threshold (SM1) ---------- */
  .threshold { position: relative; background: var(--bg); color: var(--fg); }
  .threshold__pane { --p: 0; position: relative; min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .threshold__ink { position: absolute; inset: 0; z-index: 0; background: var(--night); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); pointer-events: none; }
  .threshold__edge { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); z-index: 2; width: 1px; margin-left: -1px; background: var(--glow); box-shadow: 0 0 12px var(--glow), 0 0 42px rgba(91, 123, 255, .55); opacity: calc(min(var(--p) * 40, 1) * min((1 - var(--p)) * 40, 1)); pointer-events: none; }
  .threshold__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 42%; grid-template-areas: "h1 h1" "note note" "proof door" "ctas ctas" "move move"; column-gap: 16px; padding-block: 18px 28px; }
  .threshold__copy { display: contents; }
  .threshold__h1 { grid-area: h1; font-size: clamp(3.25rem, min(14.6vw, 7.4svh), 4.5rem); }
  @media (min-width: 1000px) { .threshold__h1 { font-size: clamp(3.25rem, min(11vw, 14.5svh), 7.5rem); } }
  .threshold__h1 .kicker { margin-bottom: clamp(12px, 2.4vw, 28px); }
  .threshold__h1 .h1-main { padding-top: .1em; margin-top: -.1em; }
  .threshold__h1 em { display: inline-block; line-height: .868; padding: 0 .12em .2em .06em; margin: 0 -.12em -.2em -.06em; }
  .threshold [data-ink-text] { --from: var(--fg); --to: var(--on-night); color: var(--from); transition: color .3s linear; }
  .threshold .kicker[data-ink-text] { --from: var(--fg-2); --to: var(--on-night-2); }
  .threshold em[data-ink-text] { --from: var(--blue-text); --to: var(--blue-on-night); }
  .threshold.is-inked [data-ink-text] { color: var(--to); }
  .threshold.is-stops [data-ink-text] { transition: none; background: linear-gradient(90deg, var(--to) 0 var(--stop, 0px), var(--from) var(--stop, 0px) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .threshold [data-ink-fade].is-night { --bg: var(--night); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2); --rule: var(--night-line); --ctl: #A3A3A8; --accent: var(--blue-on-night); --ring: #7C95FF; }
  .threshold__note, .proof-list, .proof-list__item, .threshold__cue, .threshold__move { transition: color .3s linear, border-color .3s linear; }
  .threshold__note { grid-area: note; margin-top: 16px; max-width: 32rem; font-size: 1rem; line-height: 1.55; color: var(--fg-2); }
  .proof-list { grid-area: proof; align-self: end; list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
  .proof-list li { border-top: 1px solid var(--rule); transition: border-color .3s linear; }
  .proof-list li:last-child { border-bottom: 1px solid var(--rule); }
  .proof-list__item { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; color: var(--fg); text-decoration: none; }
  a.proof-list__item:hover { color: var(--accent); }
  .proof-list .stars svg { width: 13px; height: 13px; }
  .threshold__door { grid-area: door; position: relative; align-self: end; margin-top: 18px; --lit: 0; --draw: 0; --fade: 0; --hand: 0; }
  .door__frame { position: relative; z-index: 1; transform: scale(calc(1 + var(--lit) * .08)); transform-origin: 50% 100%; }
  .film--door { background: var(--night-2); }
  .film--door .film__video { transition: opacity .6s var(--ease-out); }
  .film--door.is-held .film__video { opacity: 0; }
  .film--door .film__label { font-size: 12px; min-height: 26px; }
  .film--door .film__pause { top: 10px; right: 10px; bottom: auto; }
  @media (max-width: 999px) { .film--door .film__poster img, .film--door .film__video { transform: scale(1.45); transform-origin: 80% 74%; } .film--door .film__pause { top: auto; right: auto; left: 8px; bottom: 8px; } }
  .door__shade { position: absolute; inset: 0; z-index: 3; background: var(--night); opacity: var(--fade); pointer-events: none; }
  .door__glow { position: absolute; inset: 0; z-index: 3; box-shadow: 0 0 0 1px var(--glow), 0 0 46px -6px rgba(91, 123, 255, .8), 0 40px 90px -30px rgba(40, 82, 229, .7); opacity: var(--lit); pointer-events: none; }
  .door__line { --d: calc(var(--draw) * 4); position: absolute; inset: -1px; z-index: 4; pointer-events: none;
    background:
      linear-gradient(var(--glow), var(--glow)) left top / calc(clamp(0, var(--d), 1) * 100%) 1px no-repeat,
      linear-gradient(var(--glow), var(--glow)) right top / 1px calc(clamp(0, var(--d) - 1, 1) * 100%) no-repeat,
      linear-gradient(var(--glow), var(--glow)) right bottom / calc(clamp(0, var(--d) - 2, 1) * 100%) 1px no-repeat,
      linear-gradient(var(--glow), var(--glow)) left bottom / 1px calc(clamp(0, var(--d) - 3, 1) * 100%) no-repeat; }
  .door__corners { position: absolute; inset: -10px; z-index: 4; pointer-events: none; opacity: calc(1 - var(--lit) * 2.5); transition: opacity .3s;
    background:
      linear-gradient(var(--fg), var(--fg)) left top / 22px 1px no-repeat, linear-gradient(var(--fg), var(--fg)) left top / 1px 22px no-repeat,
      linear-gradient(var(--fg), var(--fg)) right bottom / 22px 1px no-repeat, linear-gradient(var(--fg), var(--fg)) right bottom / 1px 22px no-repeat; }
  .door__cone { position: absolute; left: -40%; right: -40%; top: 100%; z-index: 0; height: calc(40% + var(--hand) * 90%); background: radial-gradient(50% 62% at 50% 0%, rgba(91, 123, 255, .22), rgba(91, 123, 255, .06) 45%, transparent 72%); opacity: var(--lit); pointer-events: none; }
  .door__glints { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .door__glint { --t: clamp(0, (var(--hand) - var(--k) * .45) / .55, 1); position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: #DDE3FF; box-shadow: 0 0 6px 1px var(--glow); opacity: calc(var(--t) * (1 - var(--t)) * 4.2); transform: translate3d(calc(var(--t) * var(--dx)), calc(var(--t) * var(--dy)), 0); }
  .threshold__stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .threshold__pane:has(.threshold__stage.is-live) .door__glints { display: none; }
  .nightmap__stage.is-live .nightmap__labels, .nightmap__stage.is-live .nightmap__frames { display: none; }
  .threshold__ctas { grid-area: ctas; display: flex; gap: 10px; margin-top: 18px; }
  .threshold__ctas .btn { flex: 1 1 0; padding: 0 12px; }
  .threshold__move { grid-area: move; justify-self: start; margin-top: 12px; }
  .threshold__cue { display: none; }
  @media (min-width: 1000px) {
    .threshold__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "copy door"; column-gap: clamp(40px, 6vw, 112px); align-items: center; padding-block: clamp(28px, 5svh, 64px) clamp(72px, 11svh, 120px); }
    .threshold__copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; }
    .threshold__note { display: grid; grid-template-columns: 40px 1fr; gap: 16px; margin-top: clamp(24px, 4svh, 40px); font-size: 1.0625rem; line-height: 1.6; }
    .threshold__note::before { content: ""; height: 1px; margin-top: .8em; background: currentColor; }
    .proof-list { flex-direction: row; align-items: flex-end; align-self: flex-start; margin-top: clamp(22px, 3.4svh, 32px); }
    .proof-list li, .proof-list li:last-child { border: 0; border-left: 1px solid var(--rule); padding: 0 22px; }
    .proof-list li:first-child { border-left: 0; padding-left: 0; }
    .proof-list__item { padding: 2px 0; }
    .threshold__ctas { margin-top: clamp(22px, 3.4svh, 32px); }
    .threshold__ctas .btn { flex: 0 0 auto; padding: 0 26px; }
    .threshold__move { margin-top: 14px; }
    .threshold__door { align-self: center; justify-self: end; margin: 0; width: min(100%, 430px, calc((100svh - var(--header-h) - 150px) * 540 / 840)); }
    .threshold__cue { position: absolute; z-index: 1; left: max(var(--gutter), calc((100% - var(--max-wide)) / 2)); bottom: clamp(20px, 4svh, 36px); display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
    .threshold__cue .icon { animation: cue-bob 2.4s var(--ease-in-out) infinite; }
  }
  @keyframes cue-bob { 50% { transform: translateY(4px); } }

  /* ---------- night map (SM2) ---------- */
  .nightmap { position: relative; background: var(--night); color: var(--on-night); }
  .nightmap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 1px; background: linear-gradient(90deg, transparent, var(--glow) 30%, var(--glow) 70%, transparent); opacity: .5; }
  .nightmap__pane { position: relative; display: flex; flex-direction: column; overflow: hidden; padding-top: clamp(48px, 9vw, 88px); padding-bottom: 32px; }
  .nightmap__copy { order: -1; position: relative; z-index: 3; }
  .nightmap__copy h2 { margin-top: 18px; max-width: 13em; }
  .nightmap__sub { margin-top: 14px; font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--on-night-2); letter-spacing: -.01em; }
  .nightmap__stage { position: relative; height: clamp(360px, 60svh, 720px); margin-top: 12px; overflow: hidden; background: transparent; }
  .nightmap__art, .nightmap__art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .nightmap__labels, .nightmap__frames { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .nightmap__foot { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 8px; }
  .nightmap__cities, .nightmap__notes { min-width: 0; }
  .nightmap__cities-title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 10px; }
  .nightmap__chips { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .nightmap__chips::-webkit-scrollbar { display: none; }
  .nightmap__chips .chip { background: rgba(11, 11, 12, .55); }
  .nightmap__chips .chip[aria-pressed="true"] { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
  .nightmap__chips .chip.is-home::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glow-soft); box-shadow: 0 0 8px var(--glow); }
  .nightmap__caption { max-width: 62ch; font-size: var(--fs-label); line-height: 1.55; color: var(--on-night-2); }
  .nightmap__filmcap { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-label); color: var(--on-night-2); }
  .nightmap__replay { justify-self: start; }
  @media (min-width: 1000px) {
    .nightmap__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; max-width: 780px; }
    .nightmap__foot { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }
    .nightmap__replay { justify-self: end; }
  }
  .intro.is-pinned .threshold { height: calc(100svh - var(--header-h) + 120svh); }
  .intro.is-pinned .threshold__pane { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 0; }
  .intro.is-pinned .nightmap { height: calc(100svh - var(--header-h) + 180svh); }
  .intro.is-pinned .nightmap__pane { position: sticky; top: var(--header-h); display: block; height: calc(100svh - var(--header-h)); padding: 0; }
  .intro.is-pinned .nightmap__stage { position: absolute; inset: 0; height: auto; margin: 0; }
  .intro.is-pinned .nightmap__copy { position: absolute; top: 0; left: 0; right: 0; padding-top: clamp(28px, 6svh, 64px); padding-bottom: 90px; background: linear-gradient(#0B0B0C 25%, rgba(11, 11, 12, 0)); pointer-events: none; }
  .intro.is-pinned .nightmap__foot { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-top: 110px; padding-bottom: clamp(20px, 3.5svh, 32px); background: linear-gradient(rgba(11, 11, 12, 0), rgba(11, 11, 12, .9) 45%); }
  .city-card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; gap: 10px; padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom)); background: rgba(20, 20, 22, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--glow); box-shadow: 0 -20px 60px -20px rgba(40, 82, 229, .45); }
  .city-card__close { position: absolute; top: 10px; right: 10px; }
  .city-card__name { font-family: var(--serif); font-style: italic; font-size: clamp(2.25rem, 4vw, 2.75rem); line-height: 1.05; letter-spacing: -.01em; color: var(--on-night); }
  .city-card__line { color: var(--on-night-2); }
  .city-card__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 4px; }
  @media (min-width: 1000px) {
    .city-card { position: absolute; left: auto; right: var(--gutter); top: 50%; bottom: auto; z-index: 4; width: 340px; padding: 26px; translate: 0 -50%; border: 1px solid var(--night-line); box-shadow: var(--elev-night); }
  }
  /* SVG map (T1 fallback, T2 poster). --mp is the map progress 0..1. */
  .map-svg .grid-line { stroke: #2A2A30; stroke-width: 1; fill: none; }
  .map-svg .corr { fill: none; stroke: #2852E5; stroke-opacity: .5; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .map-svg .corr--major { stroke-width: 2.4; stroke-opacity: .75; }
  .map-svg .flow { fill: none; stroke: #A5B4FF; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2 60; animation: map-flow 4s linear infinite; opacity: clamp(0, var(--mp) * 3 - .2, 1); }
  @keyframes map-flow { to { stroke-dashoffset: -62; } }
  .map-svg .col { --g: clamp(0, (var(--mp) * 1.75 - var(--d)) * 3.2, 1); transition: opacity .3s; }
  .map-svg .col line { stroke: #5B7BFF; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--g)); }
  .map-svg .col .tip { fill: #E4E9FF; opacity: var(--g); transform: translate(calc(var(--dx) * var(--g) * 1px), calc(var(--dy) * var(--g) * 1px)); }
  .map-svg .col .halo { fill: #5B7BFF; opacity: calc(var(--g) * .14); transform: translate(calc(var(--dx) * var(--g) * 1px), calc(var(--dy) * var(--g) * 1px)); }
  .map-svg .base { fill: #7C95FF; opacity: calc(.25 + var(--g) * .35); }
  .map-svg.has-hi .col:not(.is-hi) { opacity: .2; }
  .map-svg .col.is-hi line { stroke: #A5B4FF; }
  .map-svg .beam line { stroke: url(#beamGrad); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--mp) * 5, 1)); }
  .map-svg .ring { fill: none; stroke: #A5B4FF; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: map-ring 2.8s var(--ease-out) infinite; }
  .map-svg .ring--2 { animation-delay: 1.4s; }
  @keyframes map-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
  .map-label { --g: clamp(0, (var(--mp) * 1.75 - var(--d) - .3) * 3, 1); position: absolute; translate: -50% -100%; padding-bottom: 8px; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--on-night-2); opacity: var(--g); text-shadow: 0 0 10px #0B0B0C, 0 0 2px #0B0B0C; transition: color .3s; }
  .map-label--major { color: var(--on-night); }
  .map-label--home { color: var(--on-night); font-weight: 600; }
  .map-label.is-hi { color: #FFFFFF; }
  .map-frame { --g: clamp(0, (var(--mp) * 1.75 - var(--d) - .15) * 3, 1); position: absolute; width: var(--fw, 52px); translate: -50% -100%; opacity: var(--g); transform: translateY(calc((1 - var(--g)) * 18px)); }
  .map-frame img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; box-shadow: 0 0 0 1px var(--glow), 0 0 22px -4px rgba(91, 123, 255, .8); }
  .map-frame::after { content: ""; display: block; width: 1px; height: var(--lift, 28px); margin: 0 auto; background: linear-gradient(var(--glow), rgba(91, 123, 255, 0)); }

  /* ---------- receipts ---------- */
  .receipts { position: relative; }
  .receipts__stats { margin-top: 8px; }
  .stat__num--year, .stat__num--dmag { font-size: clamp(2rem, 4.4vw, 3.5rem); }
  .stat__num--dmag em { font-family: var(--font-display, "Bodoni Moda", serif); font-style: italic; color: var(--accent); }
  .receipts__grid { align-items: start; }
  .receipts__deck .review-card { grid-template-rows: auto 1fr auto auto; height: 100%; }
  .receipts__deck .review-card__quote { align-self: start; }
  /* Quotes name me, so they stay at 24px or less (the header BrokerLine covers them; brief 3.2). */
  .receipts__deck .review-card__quote--lg { font-size: clamp(1.25rem, 2vw, 1.5rem); }
  .receipts__marquee .marquee__item { font-size: clamp(1.125rem, 1.8vw, 1.5rem); }
  .receipts__side { display: grid; gap: 22px; align-content: start; justify-items: start; }
  .receipts__pull { font-size: clamp(1.875rem, 3.8vw, 3.25rem); line-height: 1.12; }
  .receipts__pull em { font-family: inherit; color: var(--accent); }
  .receipts__pull-note { color: var(--fg-2); max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; }
  .receipts__broker { max-width: 62ch; padding-top: 20px; border-top: 1px solid var(--rule); }
  .receipts__marquee { margin-top: clamp(56px, 8vw, 104px); }
  .receipts__fine { margin-top: 16px; }

  /* ---------- pick your road (fan) ---------- */
  .paths { overflow: hidden; }
  .roads__rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 320px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 12px calc(50vw - min(38vw, 160px)) 28px; scrollbar-width: none; }
  .roads__rail::-webkit-scrollbar { display: none; }
  .road { --off: 0; --aoff: 0; position: relative; display: flex; flex-direction: column; scroll-snap-align: center; background: var(--bg); border: 1px solid var(--rule); transform: perspective(1200px) rotateY(calc(var(--off) * -18deg)) translateZ(calc(var(--aoff) * -40px)); transform-origin: 50% 50%; opacity: calc(1 - var(--aoff) * .3); will-change: transform; }
  .road .film, .road__still, .road__mock { position: relative; z-index: 2; pointer-events: none; }
  .road .film__pause { pointer-events: auto; }
  .road__still { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-2); }
  .road__still picture, .road__still img { width: 100%; height: 100%; object-fit: cover; }
  .road__body { display: grid; gap: 6px; align-content: start; flex: 1; padding: 18px 20px 20px; }
  .road__kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .road__title { margin-top: 2px; font-size: 1.625rem; font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
  .road__title em { font-family: var(--serif); font-style: italic; color: var(--accent); letter-spacing: -.02em; }
  .road__link { color: inherit; text-decoration: none; }
  .road__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .road__link:focus-visible { outline: none; }
  .road:has(.road__link:focus-visible) { outline: 3px solid var(--ring); outline-offset: 3px; }
  .road__line { font-size: .9375rem; color: var(--fg-2); }
  .road__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-label); font-weight: 500; color: var(--accent); }
  .road__go .icon { transition: transform var(--dur-3) var(--ease-out); }
  .road:hover .road__go .icon { transform: translateX(4px); }
  .road__mock { aspect-ratio: 4 / 5; overflow: hidden; display: grid; align-content: start; gap: 12px; padding: 20px 18px; background: var(--night-2); color: var(--on-night); }
  .mock__bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid #A3A3A8; font-size: .9375rem; }
  .mock__seg { display: flex; border: 1px solid var(--night-line); }
  .mock__seg span { flex: 1; padding: 9px 0; text-align: center; font-size: 13px; color: var(--on-night-2); }
  .mock__seg .is-on { background: var(--blue-fill); color: #FFFFFF; }
  .mock__row { display: grid; grid-template-columns: 34% 1fr; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--night-line); }
  .mock__row i { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #1C1C20, #26262B); }
  .mock__row span { display: grid; gap: 8px; }
  .mock__row b { display: block; height: 8px; background: #2A2A30; }
  .mock__row b + b { width: 60%; }
  .mock__label { margin-top: auto; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); }
  .roads__nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
  .roads__count { font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--fg-2); min-width: 5ch; text-align: center; }
  @media (min-width: 1100px) {
    .roads__rail { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; overflow: visible; max-width: calc(var(--max-wide) + 2 * var(--gutter)); margin-inline: auto; padding: 24px var(--gutter) 12px; }
    .road { transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3), box-shadow var(--dur-3); transform: perspective(1400px) translateY(calc(var(--aoff) * 22px)) rotateY(calc(var(--off) * -18deg)) translateZ(calc(var(--aoff) * -30px)); }
    .road:hover, .road:focus-within { --off: 0; --aoff: 0; transform: perspective(1400px) translateY(-10px); opacity: 1; box-shadow: 0 40px 70px -40px rgba(17, 17, 17, .45); z-index: 3; }
    .roads__nav { display: none; }
  }

  /* ---------- repairs: x-ray teaser shell (SM6) ---------- */
  .repairs { position: relative; padding-block: var(--section-y); overflow: hidden; }
  .repairs__wipe-edge { position: absolute; top: 0; bottom: 0; z-index: 5; width: 1px; margin-left: -1px; background: var(--glow); box-shadow: 0 0 12px var(--glow), 0 0 40px rgba(91, 123, 255, .6); pointer-events: none; }
  .repairs__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-areas: "head" "xray" "quote" "foot"; }
  @media (min-width: 1100px) { .repairs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head xray" "quote xray" "foot xray"; grid-template-rows: auto auto 1fr; column-gap: clamp(48px, 6vw, 112px); align-items: start; } }
  .repairs__head { grid-area: head; }
  .repairs__head h2 { margin-top: 18px; }
  .repairs__lede { margin-top: 20px; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--on-night-2); }
  .xray { grid-area: xray; position: relative; min-width: 0; }
  .xray__stage { position: relative; overflow: hidden; border: 1px solid var(--night-line); }
  .xray__art, .xray__static { position: absolute; inset: 0; }
  .xray__art > svg, .xray__static > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .xray__badge { position: absolute; right: 12px; top: 12px; z-index: 3; background: rgba(11, 11, 12, .7); }
  .xray .xr-frame { box-shadow: 0 0 0 1px var(--glow), 0 0 42px -8px color-mix(in srgb, var(--glow) 60%, transparent); }
  .xray .xr-list { border-top-color: var(--night-line); }
  /* paper theme (house.js adds .xr--paper): a light chip with a hairline on the bone blueprint, a warm hairline over the list.
     The stage itself is always bone in this theme (house.js), so the chip uses fixed light values; the list sits on the
     page, so it follows the page's own hairline token. */
  .xray.xr--paper .xray__badge { background: rgba(245, 245, 243, .94); color: #45433F; border-color: #E3E2DF; box-shadow: none; }
  .xray.xr--paper .xray__badge::before { background: #2852E5; }
  .xray.xr--paper .xray__stage { border-color: #E3E2DF; }
  .xray.xr--paper .xr-list { border-top-color: var(--line); }
  .xray .xr-hot[data-hotspot="hvac"] .xr-hot__label { left: auto; right: 34px; }
  .repairs__quote { grid-area: quote; display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--night-line); }
  .spots { grid-area: spots; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
  .spot { border-bottom: 1px solid var(--night-line); }
  .spot__btn { display: grid; grid-template-columns: 2.6ch 1fr 20px; gap: 14px; align-items: center; width: 100%; min-height: 56px; padding: 14px 0; text-align: left; font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; color: var(--on-night); }
  .spot__n { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--blue-on-night); font-variant-numeric: tabular-nums; }
  .spot__btn .icon { transition: transform var(--dur-3) var(--ease-out); }
  .spot__btn[aria-expanded="true"] .icon { transform: rotate(45deg); }
  .spot.is-active .spot__t { color: #FFFFFF; }
  .spot__body { display: grid; gap: 8px; padding: 0 0 20px calc(2.6ch + 14px); }
  .spot__quote { font-family: var(--serif); font-style: italic; font-size: 1.3125rem; line-height: 1.35; letter-spacing: -.01em; color: var(--on-night); }
  .spot__how { font-size: .9375rem; line-height: 1.55; color: var(--on-night-2); }
  .repairs__foot { grid-area: foot; display: grid; gap: 18px; justify-items: start; }
  .repairs__lines { font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.25; color: var(--on-night); }
  .repairs__lines span + span { color: var(--blue-on-night); }

  /* ---------- pricing sequence ---------- */
  .pricing { position: relative; background: var(--bg); }
  .pricing__pane { padding-block: var(--section-y); }
  .pricing.is-scrub .pricing__track { height: calc(100svh - var(--header-h) + 160svh); }
  .pricing.is-scrub .pricing__pane { position: sticky; top: var(--header-h); display: flex; flex-direction: column; justify-content: center; height: calc(100svh - var(--header-h)); padding-block: 24px; }
  .pricing__grid { display: grid; gap: clamp(32px, 5vw, 80px); }
  @media (min-width: 1000px) { .pricing__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
  .pricing__head { display: grid; gap: 22px; justify-items: start; }
  .pricing__lede { max-width: 44ch; font-size: var(--fs-body-guide); line-height: 1.6; color: var(--fg-2); }
  .pricing__fine { margin-top: 18px; }
  .pseq { --b1: 1; --b2: 1; --b3: 1; --b4: 1; --b5: 1; position: relative; display: grid; gap: 16px; align-content: start; padding: clamp(22px, 3vw, 36px); background: var(--bg-2); border: 1px solid var(--rule); overflow: hidden;
    background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
  .pseq > * { position: relative; }
  .pseq__estimate { justify-self: start; display: inline-flex; align-items: baseline; gap: 14px; padding: 10px 16px; background: var(--bg); border: 1px solid var(--ctl); opacity: var(--b1); transform: translateY(calc((1 - var(--b1)) * 14px)); }
  .pseq__est-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .pseq__est-num { position: relative; font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .pseq__est-num::after { content: ""; position: absolute; left: -4px; top: 55%; height: 2px; width: calc(var(--b2) * (100% + 8px)); background: var(--accent); }
  .pseq__statement { margin-top: 6px; font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; text-wrap: balance; opacity: var(--b2); transform: translateY(calc((1 - var(--b2)) * 36px)); clip-path: inset(-10% 0 calc((1 - var(--b2)) * 100%) 0); }
  .pseq__statement em { font-family: var(--serif); font-style: italic; color: var(--accent); letter-spacing: -.02em; }
  .pseq__sub { max-width: 52ch; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); opacity: var(--b2); }
  .pseq__comps { margin-top: 6px; }
  .pseq__comps-label { margin-bottom: 12px; opacity: var(--b3); }
  .pseq__comps-label .badge { background: var(--bg); }
  .comps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; perspective: 1000px; }
  @media (min-width: 640px) { .comps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .comp { --c: clamp(0, var(--b3) * 4 - var(--i), 1); --a: clamp(0, var(--b4) * 4 - var(--i), 1); position: relative; display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 14px 12px 44px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 18px 40px -30px rgba(17, 17, 17, .5); opacity: var(--c); transform: translateX(calc((1 - var(--c)) * 90px)) rotateY(calc((1 - var(--c)) * -50deg + 6deg)) translateZ(calc((1 - var(--c)) * -120px)); transform-origin: 0 50%; }
  .comp::before { content: ""; width: 34px; height: 22px; margin-bottom: 8px; background: linear-gradient(var(--fg), var(--fg)) 0 100% / 100% 1px no-repeat, linear-gradient(var(--fg), var(--fg)) 4px 8px / 1px 14px no-repeat, linear-gradient(var(--fg), var(--fg)) 29px 8px / 1px 14px no-repeat, linear-gradient(to top right, transparent calc(50% - .5px), var(--fg) 50%, transparent calc(50% + .5px)) 0 0 / 17px 9px no-repeat, linear-gradient(to top left, transparent calc(50% - .5px), var(--fg) 50%, transparent calc(50% + .5px)) 17px 0 / 17px 9px no-repeat; opacity: .8; }
  .comp__id { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .comp__meta { font-size: .875rem; line-height: 1.35; color: var(--fg); }
  .comp__adj { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--on-fill); background: var(--blue-fill); opacity: var(--a); transform: translateY(calc((1 - var(--a)) * -18px)) scale(calc(.7 + var(--a) * .3)); transform-origin: 0 100%; }
  .comp__adj--minus { color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--ctl); }
  .pseq__range { margin-top: 10px; }
  .range { position: relative; height: 36px; }
  .range__track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ctl); }
  .range__band { position: absolute; top: 50%; height: 12px; margin-top: -6px; left: calc(6% + var(--b5) * 32%); right: calc(6% + var(--b5) * 32%); background: color-mix(in srgb, var(--blue-fill) calc(30% + var(--b5) * 70%), transparent); }
  .range__tick { position: absolute; top: 50%; width: 1px; height: 26px; margin-top: -13px; background: var(--fg); }
  .range__tick--l { left: calc(6% + var(--b5) * 32%); }
  .range__tick--r { right: calc(6% + var(--b5) * 32%); }
  .range__labels { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; color: var(--fg-muted); }
  .range__wide { opacity: calc(1 - var(--b5) * .6); }
  .range__tight { color: var(--accent); opacity: calc(.35 + var(--b5) * .65); }
  .pseq__replay { justify-self: end; color: var(--fg); background: var(--bg); border-color: var(--ctl); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pricing.is-scrub .pseq__replay { display: none; }

  /* ---------- hi y'all ---------- */
  .hiyall__grid { display: grid; gap: clamp(32px, 5vw, 96px); align-items: center; }
  @media (min-width: 1000px) { .hiyall__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
  .hiyall__portrait { position: relative; margin: 0 calc(var(--gutter) * -1); aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
  @media (min-width: 1000px) { .hiyall__portrait { margin: 0; aspect-ratio: 3 / 4; } }
  .hiyall__portrait picture { position: absolute; inset: -6% 0; }
  .hiyall__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: translate3d(0, var(--py, 0px), 0); }
  .hiyall__portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.3; color: #F5F5F5; background: linear-gradient(rgba(11, 11, 12, 0), rgba(11, 11, 12, .72)); }
  .hiyall__h2 { margin-top: 18px; font-size: clamp(3.75rem, 11vw, 8.5rem); line-height: .9; letter-spacing: -.055em; }
  @media (max-width: 999px) { .hiyall__h2 em { margin-left: .1em; } }
  .hiyall__intro { margin-top: clamp(20px, 3vw, 32px); max-width: 34ch; font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); line-height: 1.45; letter-spacing: -.01em; }
  .beats { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; border-top: 1px solid var(--rule); }
  .beats li { display: grid; grid-template-columns: 3ch 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.5; }
  .beats--plain { display: grid; gap: 12px; padding-top: 22px; }
  .beats--plain p { max-width: 42ch; font-size: 1.125rem; line-height: 1.55; color: var(--fg); }
  .ride__h { font-size: clamp(2rem, 4.6vw, 3.75rem); }
  .hiyall .ride { margin-top: clamp(72px, 10vw, 140px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule); }
  .vault-line { margin-top: clamp(40px, 6vw, 72px); padding-top: 20px; border-top: 1px solid var(--rule); font-size: var(--fs-label); }
  .vault-line a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  .beats__n { padding-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--accent); font-variant-numeric: tabular-nums; }
  .hiyall__more { margin-top: 18px; }
  .brandline { margin: 0; max-width: 20em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 6vw, 5.5rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
  .brandline::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: clamp(20px, 3vw, 32px); background: var(--accent); }
  .brandline span { color: var(--accent); }
  .scripture { display: grid; gap: 16px; max-width: 54rem; margin: 0; }
  .scripture blockquote { margin: 0; }
  .scripture p { font-size: clamp(1.1875rem, 2vw, 1.5rem); line-height: 1.5; letter-spacing: -.01em; color: var(--fg); }
  .scripture .w { opacity: .14; transition: opacity .7s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
  .scripture.is-in .w { opacity: 1; }
  .scripture figcaption { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-muted); }
  .scripture figcaption span { margin-right: 12px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }

  /* ---------- ride along (SM3 teaser) ---------- */
  .ride__grid { display: grid; gap: clamp(32px, 5vw, 80px); }
  .ride__lede { margin-top: 20px; }
  .ride .stories__list { margin-top: clamp(28px, 4vw, 48px); }
  .ride__more { margin-top: 24px; }
  .ride__window { display: none; }
  .ride[data-stories-mode="cards"] .stories__list, .ride[data-stories-mode="grid"] .stories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  @media (min-width: 900px) { .ride[data-stories-mode="cards"] .stories__list, .ride[data-stories-mode="grid"] .stories__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ride[data-stories-mode="cards"] .story__title, .ride[data-stories-mode="grid"] .story__title { font-size: 1.0625rem; }
  @media (min-width: 1024px) {
    .ride[data-stories-mode="frame"] .ride__grid { grid-template-columns: minmax(0, 1fr) min(42vw, 580px); align-items: start; }
    .ride[data-stories-mode="frame"] .ride__window { position: sticky; top: calc(var(--header-h) + 24px); display: grid; place-items: center; height: calc(100svh - var(--header-h) - 48px); overflow: hidden; background: radial-gradient(55% 45% at 50% 45%, rgba(40, 82, 229, .22), transparent 70%), var(--night); border: 1px solid var(--night-line); }
    .ride[data-stories-mode="frame"] .ride__frame { width: min(58%, calc((100svh - var(--header-h) - 150px) * 9 / 16)); }
    .ride[data-stories-mode="frame"] .stories__list > li { padding-block: clamp(32px, 9svh, 88px); }
    .ride[data-stories-mode="frame"] .story__title { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -.035em; }
    .ride[data-stories-mode="frame"] .story__line { font-size: 1.25rem; margin-top: 6px; }
  }

  /* ---------- texas ---------- */
  .texas .flip { --flip-h: 300px; }
  .texas .flip__q { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -.03em; }
  @media (min-width: 1000px) { .texas .flip-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); } .texas .flip { --flip-h: 290px; } }
  @media (max-width: 699px) {
    .texas .flip-deck { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
    .texas .flip-deck::-webkit-scrollbar { display: none; }
    .texas .flip { --flip-h: 280px; scroll-snap-align: start; }
  }

  /* ---------- home value (T14) ---------- */
  .hv__grid { display: grid; gap: clamp(32px, 5vw, 96px); }
  @media (min-width: 1000px) { .hv__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .hv__head { position: sticky; top: calc(var(--header-h) + 32px); } }
  .hv__head { display: grid; gap: 20px; align-content: start; }
  .hv__head h2 { margin-top: -2px; }
  .hv__promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .hv__promises li { display: flex; gap: 12px; line-height: 1.5; color: var(--fg); }
  .hv__promises li::before { content: ""; flex: none; width: 16px; height: 1px; margin-top: .75em; background: var(--accent); }
  .hv__headsup { padding: 16px 20px; border-left: 2px solid var(--accent); background: var(--bg-2); font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
  .hv__headsup .eyebrow { display: block; margin-bottom: 6px; }
  .hv { display: grid; gap: 22px; padding: clamp(20px, 3vw, 40px); background: var(--bg); border: 1px solid var(--rule); border-top: 2px solid var(--accent); }
  .hv__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .hv__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px 18px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
  .hv__steps li { display: inline-flex; align-items: center; gap: 8px; }
  .hv__steps li::before { content: attr(data-n); display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 11px; letter-spacing: 0; border: 1px solid var(--ctl); }
  .hv__steps li.is-current { color: var(--fg); }
  .hv__steps li.is-current::before, .hv__steps li.is-done::before { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
  .hv__house { flex: none; width: clamp(120px, 34%, 200px); }
  .hv__house .ghost { fill: none; stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
  .hv__house svg { width: 100%; height: auto; overflow: visible; }
  .hv__house .part { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-4) var(--ease-out); }
  .hv__house .ground { stroke: var(--ctl); stroke-dasharray: 3 5; stroke-dashoffset: 0; }
  .hv__house .pane { fill: var(--blue-fill); opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
  .hv__house.s1 .p1, .hv__house.s2 .p2, .hv__house.s3 .p3, .hv__house.s4 .p4 { stroke-dashoffset: 0; }
  .hv__house.s4 .pane { opacity: .9; }
  .hv__house.s4 .glowline { stroke: var(--accent); }
  .hv .form { max-width: none; }
  .hv__step { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .hv__step[hidden] { display: none; }
  .hv__legend { padding: 0; margin-bottom: 4px; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; }
  .hv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .hv__back { min-height: 44px; font-size: var(--fs-label); color: var(--fg-2); text-decoration: underline; text-underline-offset: .25em; }
  .hv__walk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .hv-success { display: grid; gap: 16px; }
  .hv-success__who { display: flex; align-items: center; gap: 14px; }
  .hv-success__who .avatar { width: 56px; height: 56px; }
  .hv-success__steps { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--rule); }
  .hv-success__steps li { display: grid; grid-template-columns: 3ch 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .hv-success__steps li span { font-size: 13px; font-weight: 600; color: var(--accent); }

  /* ---------- vault teaser ---------- */
  .vault { position: relative; padding-block: var(--section-y); overflow: hidden; }
  .vault__grid { display: grid; gap: clamp(40px, 6vw, 112px); align-items: center; }
  @media (min-width: 900px) { .vault__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
  .vault__door { --open: 0; --w: calc(1.2% + var(--open) * 24%); position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 540 / 766; background: #070708; box-shadow: inset 0 0 0 1px var(--night-line); }
  .vault__door picture { position: absolute; inset: 0; clip-path: inset(0 calc(50% - var(--w)) 0 calc(50% - var(--w))); filter: brightness(.5) saturate(.75); }
  .vault__door img { width: 100%; height: 100%; object-fit: cover; }
  .vault__slit { position: absolute; top: 0; bottom: 0; left: calc(50% - var(--w)); right: calc(50% - var(--w)); box-shadow: -1px 0 0 var(--glow), 1px 0 0 var(--glow), 0 0 50px rgba(91, 123, 255, .55), inset 0 0 70px rgba(165, 180, 255, .28); }
  .vault__spill { position: absolute; left: -30%; right: -30%; top: 100%; height: 38%; background: radial-gradient(calc(8% + var(--open) * 26%) 70% at 50% 0%, rgba(165, 180, 255, .3), transparent 72%); pointer-events: none; }
  .vault__copy h2 { margin-top: 18px; }
  .vault__lede { margin-top: 24px; max-width: 26ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.25; letter-spacing: -.01em; }
  .vault__body { margin-top: 16px; max-width: 44ch; line-height: 1.6; color: var(--on-night-2); }
  .vault__copy .btn { margin-top: 28px; }
  .vault__fine { margin-top: 20px; }

  /* ---------- your move ---------- */
  .yourmove__grid { display: grid; gap: 40px; }
  @media (min-width: 1000px) { .yourmove__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; column-gap: clamp(48px, 6vw, 112px); } }
  .yourmove__h2 { margin-top: 18px; font-size: clamp(3rem, 8vw, 7rem); line-height: .95; letter-spacing: -.05em; }
  .yourmove .lede { margin-top: 24px; }
  .pilot { display: inline-block; width: .1em; height: .1em; margin-left: .14em; vertical-align: .12em; border-radius: 50%; background: #E4E9FF; box-shadow: 0 0 0 .05em rgba(91, 123, 255, .3), 0 0 .3em .05em var(--glow); animation: pilot 3.2s var(--ease-in-out) infinite; }
  @keyframes pilot { 50% { box-shadow: 0 0 0 .14em rgba(91, 123, 255, .1), 0 0 .6em .12em var(--glow); } }
  .yourmove__card { display: grid; gap: 22px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--rule); border-top: 2px solid var(--accent); }
  .yourmove__name { font-size: 1rem; font-weight: 600; }
  .yourmove__btns { display: grid; gap: 10px; }
  .yourmove__btns .btn { justify-content: flex-start; }

  /* ---------- phone bar: Text · Call (number) · Book ---------- */
  .bottombar.bottombar--three { grid-template-columns: 1fr 1.45fr 1fr; }
  .bottombar--three .bar-btn--num span { font-variant-numeric: tabular-nums; letter-spacing: 0; }
}
/* ======================================================= /home additions */


/* ==========================================================================
   CINEMATIC DAYLIGHT (direction C, evolved 2026-09-25 after Ashton: "there's a ton of black")
   Bone first. Film is the color. Black only for true film moments: each page's one signature scene
   (scroll-scrubbed film, the homepage night map) and, rarely, one more film. Ashton blue is the accent.
   Dark budget: at most ~20% of a page's scroll height on dark backgrounds and at most two dark moments
   (measure with tools/qa/dark_share.py). Guide: audit/cinematic-guide.md. JS: js/ui/cinema.js.
   Everything here renders its designed end state without JS and at T0.
   Dark mode (prefers-color-scheme / data-theme="dark") still works: --paper becomes warm dark paper,
   --ink becomes bone, so every bone-first surface below follows automatically.
   ========================================================================== */
@layer components {

  /* ---------- the header: bone, translucent, a hairline once you scroll ---------- */
  .site-header {
    --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted);
    --rule: var(--line); --ctl: var(--line-strong); --accent: var(--blue-text); --ring: var(--focus);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
    color: var(--ink); color-scheme: inherit;
    transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3);
  }
  .site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom-color: color-mix(in srgb, var(--ink) 12%, transparent); }
  .site-header .lockup__name { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
  .site-header .lockup__realtor { font-size: 9px; letter-spacing: .14em; }
  .site-header .broker-line { color: var(--fg-2); letter-spacing: .02em; }
  .site-header .nav-link { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); transition: color var(--dur-2); }
  .site-header .nav-link:hover, .site-header .nav-link:focus-visible, .site-header .nav-link[aria-expanded="true"],
  .site-header .nav-link[aria-current="page"] { color: var(--fg); }
  .site-header .nav-link::after { bottom: 10px; background: var(--blue-fill); height: 1px; }
  .site-header .header-cta {
    min-height: 44px; padding: 0 2px; gap: 8px; background: transparent; border: 0; color: var(--fg);
    font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    background-image: linear-gradient(var(--blue-fill), var(--blue-fill)); background-size: 100% 1px; background-position: 0 calc(100% - 9px); background-repeat: no-repeat;
    box-shadow: none; transition: color var(--dur-2), background-size var(--dur-3) var(--ease-out);
  }
  .site-header .header-cta:hover { background-color: transparent; color: var(--fg); background-size: 100% 2px; }
  .site-header .header-cta .icon { width: 16px; height: 16px; color: var(--accent); }
  .site-header .lockup__logo { filter: none; opacity: .9; }
  @media (min-width: 1100px) { .site-header .lockup__name { font-size: 14px; } }
  /* over a dark signature scene ([data-header="night"], nav.js): the header goes dark with it */
  .site-header.is-night {
    --bg: var(--night); --bg-2: var(--night-2); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2);
    --rule: var(--night-line); --ctl: #A9A7A2; --accent: var(--blue-on-night); --ring: #8EA4FF;
    background: color-mix(in srgb, var(--night) 84%, transparent); color: var(--on-night); color-scheme: dark; border-bottom-color: transparent;
  }
  /* over a full-bleed film hero ([data-header="film"], cinema.js): transparent with light type until you scroll */
  .site-header.is-over-film:not(.is-scrolled):not(.is-menu-open) {
    --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .82); --fg-muted: rgba(255, 255, 255, .7); --ctl: rgba(255, 255, 255, .6); --accent: #FFFFFF;
    background: linear-gradient(to bottom, rgba(11, 11, 12, .42), rgba(11, 11, 12, 0)); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent; color: #FFFFFF; text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  }
  .site-header.is-night .lockup__logo, .site-header.is-over-film:not(.is-scrolled):not(.is-menu-open) .lockup__logo { filter: invert(1); }
  /* the open mobile menu is bone too */
  .site-header.is-menu-open {
    --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted);
    --rule: var(--line); --ctl: var(--line-strong); --accent: var(--blue-text); --ring: var(--focus);
    background: var(--paper); color: var(--ink); border-bottom-color: var(--line); color-scheme: inherit;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header:not(.is-night) .lockup__logo { filter: invert(1); } }
  :root[data-theme="dark"] .site-header:not(.is-night) .lockup__logo { filter: invert(1); }
  /* hero sections that sit under a transparent header */
  .under-header { margin-top: calc(-1 * var(--header-h)); }

  /* ---------- overlays that used to be night (mobile menu, Areas panel, page-control popover): bone ----------
     They are drawn with the night tokens in the base layer; re-pointing those tokens inside them flips everything. */
  .mobile-menu, .areas-panel, .pc-pop {
    --night: var(--paper); --night-2: var(--paper-2); --night-3: var(--paper-2); --night-line: var(--line);
    --on-night: var(--ink); --on-night-2: var(--muted); --blue-on-night: var(--blue-text); --glow-soft: var(--blue-text);
    --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted);
    --rule: var(--line); --ctl: var(--line-strong); --accent: var(--blue-text); --ring: var(--focus);
    color-scheme: inherit;
  }
  .areas-panel, .pc-pop { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(21, 19, 17, .35); }
  .areas-panel::before { background: linear-gradient(90deg, transparent, var(--blue-fill), transparent); }
  .areas-map { overflow: hidden; }
  .mini-map text { fill: var(--muted); }
  .mini-map text.is-home { fill: var(--ink); }
  .mobile-menu .cb-logo { filter: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mobile-menu .cb-logo { filter: invert(1); } }
  :root[data-theme="dark"] .mobile-menu .cb-logo { filter: invert(1); }

  /* ---------- the footer: end credits on bone, a hairline on top; the TREC block keeps its sizes ---------- */
  .site-footer {
    --night: var(--paper); --night-2: var(--paper-2); --night-3: var(--paper-2); --night-line: var(--line);
    --on-night: var(--ink); --on-night-2: var(--ink-2); --blue-on-night: var(--blue-text); --glow: var(--blue-fill);
    --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted);
    --rule: var(--line); --ctl: var(--line-strong); --accent: var(--blue-text); --ring: var(--focus);
    background: var(--paper); color: var(--ink); color-scheme: inherit;
  }
  .site-footer::before { height: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); opacity: 1; }
  .site-footer .cb-logo { filter: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer .cb-logo { filter: invert(1); } }
  :root[data-theme="dark"] .site-footer .cb-logo { filter: invert(1); }
  .footer__line { font-family: var(--sans); font-style: normal; font-weight: 300; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: .98; letter-spacing: -.045em; max-width: 14ch; }
  .footer__line em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
  .footer__name { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
  .footer__who .broker-line { --name-size: 14px; font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
  .footer__col h2 { letter-spacing: .24em; font-weight: 500; }
  .trec { background: var(--paper-2); border-top-color: var(--line); }
  .trec__links a:hover { color: var(--ink); text-decoration-color: var(--blue-fill); }

  /* ---------- scenes ---------- */
  .scene { position: relative; }
  .scene--bone { background: var(--paper); color: var(--ink); }   /* bone in light; warm dark paper in dark mode */
  .scene--paper { background: var(--paper-2); color: var(--ink); } /* the "title plate" tone: a half-step deeper than bone */
  /* Daylight versions of what used to be dark (S1 sweep, 2026-09-28). The night tokens are re-pointed at their paper
     equivalents inside, so page CSS written for black sections (var(--on-night), var(--night-line), var(--blue-on-night),
     background: var(--night)...) reads correctly on bone without per-page rewrites.
     .scene--day = a bone section; .screen = a paper plate (results, maps, dials); .stack-card--ink = a paper card with an ink rule. */
  .scene--day, .screen, .stack-card--ink, .cine-tool {
    --night: var(--paper); --night-2: var(--paper-2); --night-3: var(--paper-2); --night-line: var(--line);
    --on-night: var(--ink); --on-night-2: var(--muted); --blue-on-night: var(--blue-text); --glow: var(--blue-fill); --glow-soft: var(--blue-text);
    --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted);
    --rule: var(--line); --ctl: var(--line-strong); --accent: var(--blue-text); --ring: var(--focus);
    color: var(--ink); color-scheme: inherit;
  }
  .scene--day { background: var(--paper); }
  .screen { --bg: var(--paper-2); --night: var(--paper-2); background: var(--paper-2); border-top: 1px solid var(--ink); }
  .stack-card--ink { --bg: var(--paper-2); background: var(--paper-2); border-top: 3px solid var(--ink); }
  /* Film stays film: copy set over footage keeps light type. In a daylight chapter hero that is everything on the stage
     except the chapter cards (they play on bone after the curtains close). */
  .scene--day.chapter .chapter__stage > :not(.chapter__card):not(.chapter__curtain):not(.on-paper), .scene--day [data-chapter-out]:not(.on-paper), .on-film {
    --night: #0B0B0C; --night-2: #151514; --night-line: #2B2926; --on-night: #F1F0ED; --on-night-2: #D8D7D3; --blue-on-night: #A9B9FF;
    --fg: #F1F0ED; --fg-2: #D8D7D3; --fg-muted: #D8D7D3; --accent: #A9B9FF; --rule: rgba(237, 231, 220, .35); --ctl: rgba(237, 231, 220, .6);
    color: #F1F0ED;
  }
  /* Dark by choice. Counts against the dark budget: use for the signature scene only. */
  .scene--black, .screen--night, .title-card--night {
    --bg: var(--night); --bg-2: var(--night-2); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2);
    --rule: var(--night-line); --ctl: #A9A7A2; --accent: var(--blue-on-night); --ring: #8EA4FF;
    background: var(--night); color: var(--on-night); color-scheme: dark;
  }

  /* ---------- grain: a paper tooth on bone, film grain on black (animated only when motion is allowed) ---------- */
  .grain { position: relative; isolation: isolate; }
  .grain::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; background-image: var(--grain); background-size: 96px; opacity: .14; mix-blend-mode: multiply; }
  .grain.scene--black::after, .grain.night::after, .grain.screen--night::after, .grain.title-card--night::after, .grain.scrub-film::after,
  .scene--black .grain::after, .night .grain::after, .screen--night .grain::after, .scrub-film .grain::after { opacity: .55; mix-blend-mode: normal; }
  .title-card.grain:not(.title-card--night)::after { opacity: .14; mix-blend-mode: multiply; }   /* a bone title card, even one still marked scene--black */
  :is(.scene--black, .night, .screen--night) .title-card.grain::after { opacity: .55; mix-blend-mode: normal; }
  @media (prefers-reduced-motion: no-preference) { :root:not([data-motion="paused"]) .grain--live::after { animation: grain-shift .9s steps(6) infinite; } }
  @keyframes grain-shift { 0%, 100% { background-position: 0 0; } 20% { background-position: -40px 30px; } 40% { background-position: 60px -20px; } 60% { background-position: -20px -60px; } 80% { background-position: 30px 50px; } }

  /* ---------- letterbox: two bars in the colour of the scene (bone on bone, black on black); --lbk 0..1 closes them ---------- */
  .letterbox { position: relative; --lbk: 0; }
  .letterbox__bar { position: absolute; left: 0; right: 0; z-index: 20; height: calc(var(--lb) + (50% - var(--lb)) * var(--lbk)); background: var(--lb-bg, var(--bg, var(--paper))); pointer-events: none; }
  .letterbox__bar--top { top: 0; }
  .letterbox__bar--bot { bottom: 0; }

  /* ---------- small caps line (credits, pre-titles, beats) ---------- */
  .caps { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; line-height: 1.5; color: var(--fg-2); }

  /* ---------- title card: bone by default, night only by choice (.title-card--night) ---------- */
  .title-card { position: relative; display: grid; justify-items: center; align-content: center; gap: clamp(14px, 2vw, 22px); text-align: center; padding: clamp(72px, 14vh, 160px) var(--gutter); min-height: min(64vh, 640px); overflow: clip; }
  /* Bone title card. The night tokens are re-pointed at their paper equivalents inside it, so page CSS written for the
     old black cards (color: var(--on-night-2), background: var(--night), var(--blue-on-night)...) reads right on bone. */
  .title-card:not(.title-card--night) {
    --night: var(--paper); --night-2: var(--paper-2); --night-3: var(--paper-2); --night-line: var(--line);
    --on-night: var(--ink); --on-night-2: var(--muted); --blue-on-night: var(--blue-text); --glow: var(--blue-fill); --glow-soft: var(--blue-text);
    --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted);
    --rule: var(--line); --ctl: var(--line-strong); --accent: var(--blue-text); --ring: var(--focus);
    background: var(--paper); color: var(--ink); color-scheme: inherit;
  }
  /* a title card set over its own film (a backdrop video), and a title card inside a dark scene, stay dark
     (literal values: the bone card above has re-pointed the night tokens) */
  .title-card:not(.title-card--night):has(> video, > * > video),
  :is(.scene--black, .night, .screen--night) .title-card:not(.title-card--night) {
    --night: #0B0B0C; --night-2: #151514; --night-3: #1D1C1B; --night-line: #2B2926;
    --on-night: #F1F0ED; --on-night-2: #A9A7A2; --blue-on-night: #8EA4FF; --glow: #5B7BFF; --glow-soft: #A5B4FF;
    --bg: #0B0B0C; --bg-2: #151514; --fg: #F1F0ED; --fg-2: #A9A7A2; --fg-muted: #A9A7A2;
    --rule: #2B2926; --ctl: #A9A7A2; --accent: #8EA4FF; --ring: #8EA4FF;
    background: #0B0B0C; color: #F1F0ED; color-scheme: dark;
  }
  :is(.scene--black, .night, .screen--night) .title-card:not(.title-card--night) { background: transparent; }
  .title-card:has(> video, > * > video)::before { display: none; }
  /* the daylight letterbox: a short ink hairline draws in at the head of every bone title card */
  .title-card:not(.title-card--night)::before { content: ""; position: absolute; left: 50%; top: 0; width: min(120px, 24vw); height: 1px; background: color-mix(in srgb, var(--fg) 55%, transparent); transform: translateX(-50%) scaleX(1); transition: transform var(--dur-5) var(--ease-out); }
  :is(.scene--black, .night, .screen--night) .title-card::before { display: none; }
  .tc-armed.title-card:not(.title-card--night)::before { transform: translateX(-50%) scaleX(0); }
  .tc-armed.is-in.title-card:not(.title-card--night)::before { transform: translateX(-50%) scaleX(1); }
  .title-card__title { font-family: var(--sans); font-weight: 300; font-size: clamp(3rem, 8.4vw, 8.5rem); line-height: .92; letter-spacing: -.05em; text-wrap: balance; max-width: 16ch; }
  .title-card__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; font-size: calc(var(--em-optical) * 1em); }
  .title-card__sub { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); max-width: 44ch; line-height: 1.7; }
  .title-card__still { position: absolute; inset: 0; z-index: -1; opacity: .22; }
  .title-card:not(.title-card--night) .title-card__still { opacity: .12; mix-blend-mode: multiply; }
  .title-card__still img, .title-card__still video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.05); }
  .title-card .w, .cine-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
  .title-card .wi, .cine-split .wi { display: inline-block; }
  .tc-armed [data-split] .wi { transform: translateY(112%); transition: transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .tc-armed.is-in [data-split] .wi { transform: none; }
  .tc-armed [data-tc-rest] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-4) var(--ease-out) .35s, transform var(--dur-4) var(--ease-out) .35s; }
  .tc-armed.is-in [data-tc-rest] { opacity: 1; transform: none; }
  .chapter__card .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
  /* split words inside the Bodoni accent (whose line-height is 0 in headings) need their own line box */
  .title-card em .w, .chapter__card em .w, .cine-split em .w { line-height: 1.08; padding-top: .06em; margin-top: -.06em; }
  .chapter__card .wi { display: inline-block; }

  /* the reel: ten small ticks, one lit (used under scene title cards) */
  .reel-ticks { display: flex; gap: 10px; align-items: center; justify-content: center; }
  .reel-ticks i { position: relative; width: 22px; height: 2px; background: color-mix(in srgb, var(--fg) 20%, transparent); }
  .reel-ticks i.is-done { background: color-mix(in srgb, var(--fg) 55%, transparent); }
  .reel-ticks i.is-on { background: var(--blue-fill); }

  /* ---------- subtitle (sits over film) ---------- */
  .subtitle { display: inline; font-size: clamp(1.0625rem, 1.5vw, 1.4rem); line-height: 1.55; color: #fff; background: rgba(11, 11, 12, .6); padding: 3px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* ---------- end credits (any key/value list: payments, costs, dates); on bone by default ---------- */
  .credits { display: grid; gap: 14px; text-align: center; }
  .credits--panel { padding: clamp(28px, 4vw, 48px); background: var(--bg-2); border-top: 1px solid var(--fg); }
  .credits__title { font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--fg-2); }
  .credits__meta { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--fg); }
  .credits__list { display: grid; gap: 14px; margin: 18px 0 0; }
  .credits__list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; align-items: baseline; }
  .credits__list dt { text-align: right; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); }
  .credits__list dd { margin: 0; text-align: left; font-size: 1.375rem; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .credits__list dd.is-soft { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--fg-2); }
  .credits__total { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
  .credits__total dt { color: var(--fg); }
  .credits__total dd { font-size: clamp(2.75rem, 5vw, 4.25rem); font-weight: 300; letter-spacing: -.045em; line-height: .9; }
  @media (max-width: 520px) { .credits__list > div { gap: 10px 16px; } .credits__list dt { font-size: 10.5px; letter-spacing: .14em; } .credits__list dd { font-size: 1.2rem; } }

  /* ---------- film framed on bone: the default film moment (720px vertical footage never goes full-bleed) ---------- */
  .film-frame { position: relative; overflow: hidden; background: var(--bg-2, var(--paper-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 50px 100px -56px rgba(21, 19, 17, .55); }
  .phone-frame { position: relative; aspect-ratio: var(--ratio, 9 / 16); width: min(100%, var(--frame-w, 420px)); overflow: hidden; background: var(--bg-2, var(--paper-2)); }
  .phone-frame > video, .phone-frame > img, .phone-frame > picture, .phone-frame > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus-y, 50%); }
  .triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .triptych > * { position: relative; overflow: hidden; background: var(--bg-2, var(--paper-2)); }
  .triptych video, .triptych img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus-y, 35%); }
  @media (max-width: 767px) { .triptych { grid-template-columns: 1fr; } .triptych > :not(.is-lead) { display: none; } }

  /* ---------- scroll-scrubbed film ([data-scrub-film]; cinema.js): dark by nature, the page's signature ---------- */
  .scrub-film { position: relative; height: var(--scrub-h, 400vh); }
  .scrub-film__stage {
    --bg: var(--night); --bg-2: var(--night-2); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-muted: var(--on-night-2);
    --rule: var(--night-line); --ctl: #A9A7A2; --accent: var(--blue-on-night); --ring: #8EA4FF; color-scheme: dark;
  }
  .scrub-film__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; background: var(--night); color: var(--on-night); }
  .scrub-film__amb { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 9 / 16; transform: translateY(-50%) scale(1.15); filter: blur(48px) saturate(1.2); opacity: .4; }
  .scrub-film__frame { position: absolute; left: 50%; top: 50%; height: min(84vh, 900px); aspect-ratio: var(--ratio, 9 / 16); transform: translate(-50%, -50%); overflow: hidden; background: #111; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); }
  .scrub-film__frame video, .scrub-film__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus-y, 50%); }
  .scrub-film__side { position: absolute; left: max(var(--gutter), 5vw); top: 50%; transform: translateY(-50%); max-width: min(26vw, 360px); z-index: 3; }
  .scrub-film__side h2, .scrub-film__side h3 { margin-top: 18px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.5rem, 4.4vw, 4.375rem); line-height: 1; letter-spacing: -.015em; }
  .scrub-film__side p:last-child { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--on-night-2); }
  .scrub-film__beats { position: absolute; right: max(var(--gutter), 5vw); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 18px; min-width: 200px; list-style: none; margin: 0; padding: 0; }
  .scrub-film__beats li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--on-night) 40%, transparent); transition: color .5s; }
  .scrub-film__beats li i { position: relative; height: 1px; background: color-mix(in srgb, var(--on-night) 20%, transparent); overflow: hidden; }
  .scrub-film__beats li i b { position: absolute; inset: 0; background: var(--on-night); transform-origin: left; transform: scaleX(var(--f, 0)); }
  .scrub-film__beats li.is-on { color: var(--on-night); }
  .scrub-film__subs { position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%); z-index: 4; width: min(680px, 90vw); text-align: center; min-height: 3em; }
  .scrub-film__subs > p { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity .45s; }
  .scrub-film__subs > p.is-on { opacity: 1; }
  .scrub-film__bars::before, .scrub-film__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 7vh; background: var(--night); z-index: 2; }
  .scrub-film__bars::before { top: 0; } .scrub-film__bars::after { bottom: 0; }
  .scrub-film__cap { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); z-index: 4; white-space: nowrap; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--on-night) 50%, transparent); }
  @media (max-width: 899px) {
    .scrub-film__frame { height: min(64vh, 150vw); width: auto; top: calc(50% + 34px); }
    .scrub-film__side { z-index: 5; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 18px); transform: none; max-width: none; }
    .scrub-film__side h2, .scrub-film__side h3 { font-size: 1.875rem; margin-top: 8px; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
    .scrub-film__side p:last-child, .scrub-film__cap, .scrub-film__bars::before, .scrub-film__bars::after { display: none; }
    .scrub-film__beats { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(var(--bar-h) + 22px + env(safe-area-inset-bottom)); transform: none; grid-template-columns: repeat(var(--beats, 4), 1fr); gap: 6px; min-width: 0; }
    .scrub-film__beats li { grid-template-columns: 1fr; font-size: 0; gap: 0; }
    .scrub-film__beats li i { height: 2px; }
    .scrub-film__subs { bottom: calc(var(--bar-h) + 48px + env(safe-area-inset-bottom)); }
  }
  /* static end state (T0, no JS): the frame shows its poster, every subtitle stacks as a caption list */
  .scrub-film.is-static { height: auto; }
  .scrub-film.is-static .scrub-film__stage { position: relative; height: auto; min-height: 100svh; padding: 12vh 0 18vh; }
  .scrub-film.is-static .scrub-film__frame { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; height: min(78vh, 820px); }
  .scrub-film.is-static .scrub-film__beats, .scrub-film.is-static .scrub-film__cap, .scrub-film.is-static .scrub-film__amb { display: none; }
  .scrub-film.is-static .scrub-film__subs { position: relative; left: auto; bottom: auto; transform: none; margin: 28px auto 0; display: grid; gap: 8px; }
  .scrub-film.is-static .scrub-film__subs > p { position: static; opacity: 1; }

  /* ---------- chapter transition ([data-chapter]): takes the section's scene (bone by default, black only if the
     section says .scene--black). Curtains are the scene colour, so on bone they close as paper. cinema.js writes
     --chapter-close (0..1) and --chapter-p (0..1) on the section for page CSS. ---------- */
  .chapter { position: relative; height: var(--chapter-h, 260vh); }
  .chapter__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; background: var(--bg, var(--paper)); color: var(--fg, var(--ink)); }
  .chapter__curtain { position: absolute; left: 0; right: 0; height: 50%; background: var(--curtain, var(--bg, var(--paper))); z-index: 5; transform: scaleY(0); }
  .chapter__curtain--t { top: 0; transform-origin: top; } .chapter__curtain--b { bottom: 0; transform-origin: bottom; }
  .chapter__card { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--gutter); opacity: 0; pointer-events: none; }
  .chapter__card.is-live { pointer-events: auto; }
  .chapter.is-static { height: auto; }
  .chapter.is-static .chapter__stage { position: relative; height: auto; }
  .chapter.is-static .chapter__card { position: relative; opacity: 1; padding: 14vh var(--gutter); pointer-events: auto; }

  /* ---------- film strip: a horizontal row driven by vertical scroll ([data-film-strip]); bone unless the section is black ---------- */
  .film-strip { position: relative; }
  .film-strip__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; display: flex; align-items: center; }
  .film-strip__track { display: flex; align-items: stretch; gap: clamp(14px, 2vw, 28px); padding: 0 max(var(--gutter), 5vw); will-change: transform; }
  .film-strip__frame { flex: 0 0 clamp(280px, 27vw, 400px); min-height: min(62vh, 540px); padding: 30px 28px; display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--bg-2, var(--paper-2)); transition: border-color .5s, box-shadow .5s; }
  .scene--black .film-strip__frame, .film-strip.scene--black .film-strip__frame { background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, transparent), transparent); }
  .film-strip__frame:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
  .film-strip__intro { flex: 0 0 clamp(280px, 30vw, 440px); align-self: center; padding-right: 2vw; }
  .film-strip__prog { position: absolute; left: max(var(--gutter), 5vw); right: max(var(--gutter), 5vw); bottom: 7vh; height: 1px; background: var(--rule); }
  .film-strip__prog i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0)); }
  /* phones and T0: a native swipe row, no pin */
  .film-strip.is-static { height: auto !important; }
  .film-strip.is-static .film-strip__stage { position: relative; height: auto; padding-block: clamp(56px, 10vh, 120px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), 5vw); overscroll-behavior-x: contain; scrollbar-width: none; }
  .film-strip.is-static .film-strip__stage::-webkit-scrollbar { display: none; }
  .film-strip.is-static .film-strip__track { transform: none !important; }
  .film-strip.is-static .film-strip__frame, .film-strip.is-static .film-strip__intro { scroll-snap-align: start; }
  .film-strip.is-static .film-strip__prog { display: none; }
  @media (max-width: 767px) { .film-strip__frame, .film-strip__intro { flex-basis: 80vw; min-height: 0; } }

  /* ---------- stacking cards ([data-stack-cards]; borrowed from direction B) ---------- */
  .stack-cards { display: grid; gap: 4vh; padding-bottom: 4vh; }
  .stack-card { position: sticky; top: calc(var(--header-h) + 4vh + var(--i, 0) * 18px); min-height: min(44vh, 420px); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; transform-origin: 50% 0; will-change: transform; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 -24px 50px -34px rgba(21, 19, 17, .32); }
  .stack-card--paper { background: var(--paper-2); }
  .stack-card--blue { background: var(--blue-fill); color: #fff; border-color: var(--blue-fill); --fg: #fff; --fg-2: rgba(255,255,255,.82); --accent: #fff; }
  .stack-card--black { --bg: var(--night); --fg: var(--on-night); --fg-2: var(--on-night-2); --rule: var(--night-line); --accent: var(--blue-on-night); background: var(--night); color: var(--on-night); }

  /* ---------- magnetic ([data-magnetic]); cinema.js moves it with --mx/--my (the .btn transform already reads them) */
  [data-magnetic]:not(.btn) { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform var(--dur-3) var(--ease-out); }

  /* ---------- ghost pill and caps link ---------- */
  .btn--ghost { min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); color: var(--fg); background: transparent; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
  .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .btn--ghost .dot-blue { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 10px color-mix(in srgb, var(--blue-fill) 60%, transparent); }
  .link-caps { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); text-decoration: none; background: linear-gradient(var(--blue-fill), var(--blue-fill)) 0 calc(100% - 8px) / 100% 1px no-repeat; transition: background-size var(--dur-3) var(--ease-out), color var(--dur-2); }
  .link-caps:hover { background-size: 100% 2px; }
  .link-caps--quiet { background-image: linear-gradient(color-mix(in srgb, var(--fg) 40%, transparent), color-mix(in srgb, var(--fg) 40%, transparent)); }
}

/* ---------- page transitions: a paper letterbox closes, the next page opens (cross-document View Transitions) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-close .42s var(--ease-cine) both; }
  ::view-transition-new(root) { animation: vt-open .6s var(--ease-cine) .08s both; }
}
@keyframes vt-close { to { clip-path: inset(50% 0 50% 0); } }
@keyframes vt-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-group(root) { background: var(--paper); }
/* fallback curtain for browsers without cross-document transitions (cinema.js) */
.page-curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.page-curtain::before, .page-curtain::after { content: ""; position: absolute; left: 0; right: 0; height: 50.5%; background: var(--paper); transform: scaleY(var(--pc, 0)); transition: transform .45s var(--ease-cine); }
.page-curtain::before { top: 0; transform-origin: top; } .page-curtain::after { bottom: 0; transform-origin: bottom; }

/* ==========================================================================
   DAYLIGHT TOOL STAGES (S1, 2026-09-28). The tool modules draw some stages on hard-coded black (:where(), zero
   specificity). These rules put them on the paper plate everywhere; page CSS can still override.
   ========================================================================== */
@layer components {
  .tb__stage, .cd__line, .route__screen, .route__reel, .lt__phone { background: var(--paper-2); color: var(--ink); box-shadow: none; border-top: 1px solid var(--ink); }
  /* two tax bills: the plates are the picture on paper */
  .tb__plate { color: var(--muted); border-top-color: var(--line); }
  .tb__plate[aria-pressed="true"] { color: var(--ink); }
  .tb__plate::before { background: var(--blue-fill); box-shadow: none; }
  .tb__pk { color: var(--blue-text); }
  .tb__rep { background: var(--paper); color: var(--ink-2); border-color: var(--line-strong); }
  .tb__stage .tb__layer svg { opacity: .9; }
  /* countdown timeline */
  .cd__track { background: var(--line); }
  .cd__opt { background: color-mix(in srgb, var(--blue-fill) 14%, transparent); box-shadow: inset -1px 0 0 var(--blue-fill); }
  .cd__fill { background: var(--blue-fill); box-shadow: none; }
  .cd__now { background: var(--ink); }
  .cd__mk i { border-color: var(--blue-fill); background: var(--paper-2); box-shadow: none; }
  .cd__mk--opt i { background: var(--blue-fill); }
  .cd__mk--keys i { border-color: var(--ink); background: var(--ink); box-shadow: none; }
  .cd__mk--keys b { color: var(--ink); }
  .cd__mk small, .cd__start b, .cd__start small { color: var(--muted); }
  /* route planner reel */
  .rl__track { background: var(--line); }
  .rl__seg { background: var(--ink); }
  .rl__seg--prep { background: color-mix(in srgb, var(--ink) 35%, transparent); }
  .rl__node { background: var(--paper-2); box-shadow: 0 0 0 2px var(--blue-fill); }
  .rl__today { background: var(--blue-fill); }
  .rl__months { border-top-color: var(--line); }
  /* link-text preview phone */
  .lt__to, .lt__host { color: var(--muted); border-bottom-color: var(--line); }
  .lt__card { background: var(--paper); border-color: var(--line); }
  /* wishlist trading card: a paper card with an ink rule */
  .tcard__face { background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(21, 19, 17, .45); }
  .tcard.is-complete .tcard__front, .tcard__back { box-shadow: 0 0 0 1px var(--blue-fill), 0 30px 60px -36px rgba(21, 19, 17, .45); }
  .tcard__stats, .tcard__stats > div + div, .tcard__who { border-color: var(--line); }
  .tcard__stats dt, .tcard__who .broker-line { color: var(--muted); }
  .tcard__meter { background: var(--line); }
  .tcard__meter i { background: var(--blue-fill); box-shadow: none; }
  .tcard__big em { color: var(--blue-text); }
  .tcard__promise { color: var(--ink); }
}

/* ==========================================================================
   S4 motion hooks (js/ui/cinema.js initHooks) and the compact title card
   ========================================================================== */
@layer components {
  .mask-armed { clip-path: inset(12% 0 0 0); transition: clip-path 900ms var(--ease-cine); }
  .mask-armed > img, .mask-armed > picture img, .mask-armed > video { transform: scale(1.06); transition: transform 1400ms var(--ease-out); }
  .mask-armed.is-in { clip-path: inset(0 0 0 0); }
  .mask-armed.is-in > img, .mask-armed.is-in > picture img, .mask-armed.is-in > video { transform: none; }
  [data-parallax] { overflow: hidden; }
  [data-parallax].is-parallax > * { will-change: transform; }
  [data-tilt] { transition: transform var(--dur-3) var(--ease-out); transform-style: preserve-3d; }
  /* Rule: at most 3 full-height title cards per page (act or chapter openers); every other one is compact. */
  .title-card--compact { min-height: min(44vh, 440px); padding-block: clamp(48px, 8vh, 96px); }
}
@media (prefers-reduced-motion: reduce) { .mask-armed { clip-path: none; } .mask-armed > * { transform: none !important; } }
:root[data-motion="paused"] .mask-armed { clip-path: none; }

/* ==========================================================================
   S5 footer (2026-09-28): on pages whose last section is a #contact CTA, the footer's "Ready when you are" block
   repeats it, so it hides; the brand block (name + broker line) stays. Phones: a tighter 2-column sitemap.
   The TREC block is untouched.
   ========================================================================== */
@layer components {
  body:has(main #contact) .footer__contact { display: none; }
  body:has(main #contact) .footer__top { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 767px) {
    .footer__main { padding-block: 28px 18px; gap: 18px; }
    .footer__brand { gap: 12px; }
    /* the sitemap becomes one flowing block of links; column names stay for screen readers */
    .footer__nav { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 14px; }
    .footer__col { display: contents; }
    .footer__col h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .footer__col ul { display: contents; }
    .footer__col li { display: block; }
    .footer__col a { min-height: 32px; font-size: .9375rem; }
    .footer__settings { padding-top: 10px; gap: 4px 20px; font-size: 13px; }
    .footer__settings .text-toggle__label { display: none; }
    .trec__inner { padding-block: 28px calc(28px + env(safe-area-inset-bottom)); gap: 20px; }
  }
}

/* ==========================================================================
   S9 .fineprint (js/ui/fineprint.js): one visible line under a tool; the full assumptions and sources in a drawer.
   ========================================================================== */
@layer components {
  .fineprint { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-muted); max-width: 78ch; }
  .fineprint > summary { display: block; cursor: pointer; list-style: none; padding: 4px 0; }
  .fineprint > summary::-webkit-details-marker { display: none; }
  .fineprint__more { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; white-space: nowrap; }
  .fineprint__more::after { content: ""; width: 6px; height: 6px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-3) var(--ease-out); }
  .fineprint[open] .fineprint__more::after { transform: translateY(1px) rotate(-135deg); }
  .fineprint > summary:hover .fineprint__more { text-decoration-color: currentColor; }
  .fineprint__body { margin-top: 8px; padding: 12px 14px; border-left: 2px solid var(--rule); color: var(--fg-2); }
  .fineprint__body a { color: var(--accent); }
}
/* stage3d mode 'sticky-side': the sticky column sits above the page canvas while its stage is live */
.has-live-stage { z-index: 2; background: transparent !important; }

/* ==========================================================================
   S7 .proof-card (js/ui/proof.js from js/data/proof.js): real results and real transactions, kept visibly apart from
   representative examples. Paper plate, 3px ink top rule, blue caps "Real results, not an example".
   ========================================================================== */
@layer components {
  .proof-card { display: grid; gap: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 3.6vw, 48px); background: var(--paper-2); border-top: 3px solid var(--ink); color: var(--ink); }
  .proof-card__label { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-text); }
  .proof-card__title { font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -.045em; max-width: 22ch; }
  .proof-card__title em, .proof-card__big em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
  .proof-card__list { display: grid; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  @media (min-width: 900px) { .proof-card__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .proof-card__list li + li { border-left: 1px solid var(--line); } }
  .proof-card__list li { display: grid; gap: 12px; align-content: start; padding: 22px clamp(0px, 1.6vw, 22px) 6px; border-bottom: 1px solid var(--line); }
  @media (min-width: 900px) { .proof-card__list li { border-bottom: 0; } .proof-card__list li:first-child { padding-left: 0; } }
  .proof-card__big { font-weight: 300; font-size: clamp(2.125rem, 3.2vw, 3.125rem); line-height: .95; letter-spacing: -.05em; }
  .proof-card__list li > p:last-child { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
  .proof-card__fine, .proof-card__status { font-size: 13px; color: var(--ink-2); }
  .proof-card__story { font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; }
  .proof-card__facts { display: grid; gap: 8px; margin: 0; }
  .proof-card__facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; align-items: baseline; }
  .proof-card__facts dt { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .proof-card__facts dd { margin: 0; }
  .proof-card__result { font-weight: 500; font-size: 1.125rem; }
}
/* the skip link on pinned stages sits bottom-left, above the stage's own controls */
:is(.chapter__stage, .scrub-film__stage, .film-strip__stage) > .skip-pin { position: absolute; left: max(var(--gutter), 3vw); right: auto; bottom: 16px; z-index: 8; min-height: 40px; padding: 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #F1F0ED; background: rgba(11, 11, 12, .6); border: 1px solid rgba(237, 231, 220, .45); display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 767px) { :is(.chapter__stage, .scrub-film__stage, .film-strip__stage) > .skip-pin { bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)); } }

/* S10 "Go deeper" drawer: <details class="deeper"><summary>Go deeper: <topic></summary> body (<= 250 words) </details> */
@layer components {
  .deeper { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 72ch; }
  .deeper + .deeper { border-top: 0; }
  .deeper > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.0625rem; }
  .deeper > summary::-webkit-details-marker { display: none; }
  .deeper > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-3) var(--ease-out); }
  .deeper[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .deeper > :not(summary) { padding-bottom: 18px; font-size: 1rem; line-height: 1.6; color: var(--fg-2); }
}

/* Form hand-off (no form backend yet): one tap texts or emails the details to Ashton (js/ui/forms.js). */
.form-handoff { display: grid; gap: 10px; margin-top: 14px; }
.form-handoff__lead { font-weight: 500; color: var(--fg); }
.form-handoff__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   §13 navigation (2026-09-28, audit/cinematic-guide.md §13): the Back button, "Book a call" in the header and the
   footer, and the motion fail-safe. JS: js/ui/nav.js (Back, open at the top), js/core/motion.js onReveal().
   ========================================================================== */
@layer components {
  /* ---------- Back: a quiet ring at the head of the header; a "Back" pill on desktop ---------- */
  .back-btn {
    position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 36px; height: 36px; padding: 0; margin-left: -4px;
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius: 999px;
    background: transparent; color: var(--fg); text-decoration: none;
    font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
    transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
  }
  .back-btn::before { content: ""; position: absolute; inset: -5px; } /* a 46px tap target */
  .back-btn[hidden] { display: none; }
  .back-btn .icon { width: 16px; height: 16px; flex: none; transition: transform var(--dur-3) var(--ease-out); }
  .back-btn__label { display: none; line-height: 1; }
  .back-btn:hover { border-color: color-mix(in srgb, currentColor 60%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); }
  .back-btn:hover .icon, .back-btn:focus-visible .icon { transform: translateX(-3px); }
  .back-btn:focus-visible { outline: 2px solid var(--ring, var(--focus)); outline-offset: 3px; }
  @media (max-width: 767px) {
    .site-header.has-back .site-header__inner { gap: 10px; }
  }
  /* phones with a page control (Buy 4/10, Sell lights, Lease lanes): the avatar steps aside for Back */
  @media (max-width: 419px) {
    .site-header.has-back.has-page-control .lockup__avatar { display: none; }
  }
  @media (max-width: 359px) {
    .site-header.has-back .lockup__avatar { display: none; }
    .site-header.has-back.has-page-control .site-header__inner { gap: 6px; padding-inline: 12px; }
    .site-header.has-back.has-page-control .back-btn { width: 28px; height: 28px; margin-left: -2px; }
    .site-header.has-back.has-page-control .back-btn .icon { width: 14px; height: 14px; }
    .site-header.has-back.has-page-control .lockup .broker-line { letter-spacing: 0; }
    .site-header.has-back.has-page-control .pc-chip { min-width: 40px; padding: 0 6px; }
    .site-header.has-back.has-page-control .pc-lights { padding: 0; }
  }
  @media (min-width: 1280px) {
    .back-btn { margin-left: 0; }
    .site-header.has-back .lockup { padding-left: 14px; border-left: 1px solid var(--rule); }
  }
  @media (min-width: 1440px) {
    .back-btn { width: auto; height: 38px; padding: 0 15px 0 11px; }
    .back-btn__label { display: inline; }
  }

  /* ---------- "Book a call": the secondary pill beside "Text Ashton" (desktop, and tablets in landscape) ---------- */
  .site-header .header-book { display: none; }
  .site-header .header-cta { flex: none; white-space: nowrap; }
  @media (min-width: 768px) and (orientation: landscape), (min-width: 1100px) {
    .site-header .header-book { display: inline-flex; }
  }
  .site-header .header-book {
    flex: none; min-height: 40px; padding: 0 16px 0 14px; gap: 8px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); background: transparent; color: var(--fg);
    font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: none;
  }
  .site-header .header-book .icon { width: 16px; height: 16px; color: var(--accent); transition: color var(--dur-2); }
  .site-header .header-book:hover, .site-header .header-book:focus-visible { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
  .site-header .header-book:hover .icon, .site-header .header-book:focus-visible .icon { color: var(--on-fill); }
  @media (max-width: 1023px), (min-width: 1280px) and (max-width: 1439px) { .header-book__more { display: none; } }
  .site-header.is-over-film:not(.is-scrolled):not(.is-menu-open) .header-book { border-color: rgba(255, 255, 255, .55); }
  /* over a film hero the ring gets a soft smoked glass so it reads on bright footage */
  .site-header.is-over-film:not(.is-scrolled):not(.is-menu-open) .back-btn {
    border-color: rgba(255, 255, 255, .55); background: rgba(11, 11, 12, .26);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }

  /* ---------- the footer's "Book a call" (shows where the footer's contact block steps aside for a #contact CTA) ---------- */
  .footer__book { display: none; justify-self: start; }
  body:has(main #contact) .footer__book { display: inline-flex; }
  .footer__book .icon { color: var(--blue-text); }
}

/* ---------- the motion fail-safe: html.is-failsafe (set by the header's early script when the motion system never
   started) shows every hook in its designed end state; the script also marks chapters, scrub films and film strips
   .is-static. Nothing here applies while the motion system runs. ---------- */
.is-failsafe .mask-armed { clip-path: none !important; }
.is-failsafe .mask-armed > img, .is-failsafe .mask-armed > picture img, .is-failsafe .mask-armed > video { transform: none !important; }
.is-failsafe .hl-line { transform: none !important; }
.is-failsafe .tc-armed [data-split] .wi { transform: none !important; }
.is-failsafe .tc-armed [data-tc-rest] { opacity: 1 !important; transform: none !important; }
.is-failsafe .reveal, .is-failsafe .reveal-stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
.is-failsafe .draw { stroke-dashoffset: 0 !important; }
.is-failsafe .chapter__card { opacity: 1 !important; }
/* no JavaScript at all: chapter cards still read (the stage keeps its layout) */
:root:not(.cine-js) .chapter__card { opacity: 1; }

/* ==========================================================================
   §14 THE TEXT-ME ENDING (feedback #32, Ashton: "that type of model where it was text me, that was super clever").
   One shared final chapter for every page, on ink: his portrait in a door of warm light that opens with the scroll,
   a text to him that types itself (the page's own words, data-invite-msg), Text me + Book a call, the broker line.
   JS: js/ui/invite.js (auto-inits [data-invite]; nav.js loads it whenever the markup is on a page). Guide §14.
   Static first: without JS, at T0 (reduced motion, the pause) and in the fail-safe the door is open, the message is
   whole and the send arrow is lit. invite.js only arms it (.is-armed) and scrubs --tm-open / --tm-card / --tm-y.
   Block name .textme on purpose: About's own .invite section stays page-owned (css/pages/about.css).
   ========================================================================== */
@layer components {
  .textme {
    --tm-ink: #121110;
    --bg: var(--tm-ink); --bg-2: #1B1A18; --fg: #F1F0ED; --fg-2: #CAC9C5; --fg-muted: #A9A7A2;
    --rule: #2B2926; --ctl: #A9A7A2; --accent: #8EA4FF; --ring: #8EA4FF;
    --tm-open: 1; --tm-card: 1; --tm-y: 0px;
    position: relative; isolation: isolate; overflow: clip;
    display: grid; align-content: center;
    min-height: 100vh; min-height: 100svh;
    padding: clamp(88px, 13vh, 160px) 0 clamp(80px, 12vh, 150px);
    background: var(--tm-ink); color: var(--fg); color-scheme: dark;
  }
  .textme > .container + .container { margin-top: clamp(48px, 8vh, 96px); }  /* optional quiet row after (keep it short) */
  /* the blue light: leans toward a fine pointer (invite.js sets --ix/--iy). It fades in from the section's top edge, so
     an ink section before this one never shows a seam where the glow is clipped. */
  .textme__light {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 min(30%, 34vh)); mask-image: linear-gradient(to bottom, transparent, #000 min(30%, 34vh));
  }
  .textme__light::before {
    content: ""; position: absolute; left: var(--ix, 70%); top: var(--iy, 46%); width: 110vmax; height: 110vmax; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(40, 82, 229, .26), rgba(40, 82, 229, .07) 45%, transparent 70%);
    transition: left 1.6s var(--ease-out), top 1.6s var(--ease-out);
  }
  .textme__inner { position: relative; display: grid; grid-template-areas: "copy" "stage" "act"; align-items: center; }
  .textme__copy { grid-area: copy; min-width: 0; }
  .textme__stage { grid-area: stage; }
  .textme__act { grid-area: act; min-width: 0; }
  @media (min-width: 768px) {
    .textme__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "copy stage" "act stage"; column-gap: clamp(40px, 6vw, 112px); }
    .textme__copy { align-self: end; }
    .textme__act { align-self: start; }
  }

  /* ---------- the words ---------- */
  .textme__kicker { margin-bottom: clamp(14px, 2.2vh, 24px); color: var(--fg-2); }
  .textme__h { font-weight: 300; font-size: clamp(3.4rem, 16vw, 4.4rem); line-height: .92; letter-spacing: -.055em; color: var(--fg); max-width: 11ch; text-wrap: balance; }
  @media (min-width: 768px) { .textme__h { font-size: clamp(4rem, 8.6vw, 9.25rem); } }
  .textme__lede { margin-top: clamp(18px, 3vh, 30px); max-width: 34ch; font-size: clamp(1.125rem, 1.55vw, 1.45rem); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }

  /* ---------- the door: his portrait in an arch of warm light (warm is LIGHT only, never a colour) ---------- */
  /* phones and tablets: the card hangs under the door; from 1100px it overlaps the door's foot. Never over his face. */
  .textme__stage { position: relative; isolation: isolate; width: min(72vw, 330px); margin: clamp(40px, 9vw, 64px) auto 0; padding-bottom: 112px; }
  @media (min-width: 768px) { .textme__stage { width: min(100%, 360px); margin: 0 0 0 auto; padding-bottom: 104px; } }
  @media (min-width: 1100px) { .textme__stage { width: min(100%, 420px); padding-bottom: 0; } }
  .textme__lamp {
    position: absolute; z-index: -1; left: 50%; top: 44%; width: 190%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%) scale(calc(.72 + var(--tm-open) * .28)); opacity: var(--tm-open);
    background: radial-gradient(closest-side, rgba(255, 201, 138, .15), rgba(255, 201, 138, .055) 40%, transparent 72%);
  }
  .textme__door {
    position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 22px 22px; overflow: hidden; background: #0B0A09;
    box-shadow: 0 0 0 1px rgba(237, 231, 220, .16), 0 0 70px -10px rgba(255, 201, 138, .14), 0 60px 120px -50px rgba(0, 0, 0, .9);  /* light leaks round the frame */
  }
  /* the door frame: a pearl hairline that stays while the doors part */
  .textme__door::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(237, 231, 220, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .textme__reveal { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--tm-open)) * 47%) 0 calc((1 - var(--tm-open)) * 47%)); }
  .textme__reveal picture { display: contents; }
  .textme__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(calc(1 + (1 - var(--tm-open)) * .14)); transform-origin: 50% 36%; }
  /* lamplight on his face (light only); the room falls off into the ink around him and at the foot of the door, so
     the portrait belongs to the dark moment instead of punching a bright slab through it. The face is never touched. */
  .textme__reveal::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(110% 64% at 50% 10%, rgba(255, 201, 138, .10), transparent 62%),
                radial-gradient(58% 46% at 46% 30%, rgba(12, 11, 10, 0) 38%, rgba(12, 11, 10, .5) 78%, rgba(12, 11, 10, .72) 100%),
                linear-gradient(to bottom, rgba(18, 17, 16, 0) 48%, rgba(18, 17, 16, .5) 78%, rgba(18, 17, 16, .9));
  }

  /* ---------- the text you'd send (decorative; it opens the same text as "Text me") ---------- */
  .textme__msg {
    position: absolute; z-index: 3; left: calc(50% - min(44vw, 162px)); bottom: 0; width: min(88vw, 324px);
    display: grid; gap: 12px; padding: 16px; text-align: left; color: var(--fg); text-decoration: none;
    background: rgba(27, 26, 24, .66); border: 1px solid rgba(237, 231, 220, .16); border-radius: 22px;
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
    opacity: var(--tm-card);
    transform: translate3d(0, calc((1 - var(--tm-card)) * 56px + var(--tm-y)), 0) rotate(calc(-2deg - (1 - var(--tm-card)) * 3deg));
    transition: border-color .3s;
  }
  @media (min-width: 768px) { .textme__msg { left: -16%; width: 316px; } }
  @media (min-width: 1100px) { .textme__msg { left: -26%; bottom: -5%; width: 336px; padding: 18px; } }
  .textme__msg:hover { border-color: rgba(142, 164, 255, .6); }
  .textme__msg-top { display: flex; align-items: center; gap: 10px; }
  .textme__msg-top img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
  .textme__msg-top b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
  .textme__msg-top small { display: block; font-size: 12px; line-height: 1.3; letter-spacing: .02em; color: var(--fg-muted); }
  .textme__bubble {
    justify-self: end; max-width: 88%; min-height: 46px; padding: 12px 16px; border-radius: 20px 20px 5px 20px;
    background: var(--blue-fill); color: #FFFFFF; font-size: 17px; line-height: 1.32; letter-spacing: -.003em; overflow-wrap: anywhere;
  }
  @media (max-width: 767px) { .textme__bubble { max-width: min(88%, 47vw); } }   /* phones: the section still reads (and measures) as one ink moment */
  @media (min-width: 1100px) { .textme__bubble { font-size: 18px; } }
  .textme__caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: #FFFFFF; animation: tm-caret 1.1s steps(1) infinite; }
  .textme.is-typing .textme__caret { animation: none; }
  .textme__send {
    justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--blue-fill); color: #FFFFFF;
    transition: background-color .5s var(--ease-out), color .5s var(--ease-out), transform .6s var(--ease-out);
  }
  .textme__send .icon { width: 18px; height: 18px; transform: rotate(-90deg); }
  .textme.is-armed:not(.is-ready) .textme__send { background: rgba(237, 231, 220, .12); color: var(--fg-2); transform: scale(.92); }
  .textme.is-armed.is-ready .textme__send { animation: tm-ping 1.8s var(--ease-out) .1s 1 both; }

  /* ---------- the ask ---------- */
  .textme__act { margin-top: clamp(36px, 9vw, 56px); }
  @media (min-width: 768px) { .textme__act { margin-top: clamp(26px, 4vh, 40px); } }
  .textme__btns { display: flex; flex-wrap: wrap; gap: 12px; }
  .textme__btn { flex: 1 1 auto; min-height: 58px; padding: 0 28px; border-radius: 999px; }
  @media (min-width: 768px) { .textme__btn { flex: 0 0 auto; padding: 0 32px; } }
  .textme .btn--primary { font-size: 1.0625rem; box-shadow: 0 16px 50px -16px rgba(40, 82, 229, .8); }
  .textme .btn--ghost { color: var(--fg); border-color: rgba(237, 231, 220, .42); }
  .textme .btn--ghost:hover { background: var(--fg); color: var(--tm-ink); border-color: var(--fg); }
  .textme__who { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px, 4.4vh, 44px); }
  .textme__who::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--accent); }
  .textme__name { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; color: var(--fg); }
  .textme .broker-line { --name-size: 26px; color: var(--fg-2); }   /* 13px: at least half of every name or number in view */
  .textme__fine { margin-top: 12px; color: var(--fg-muted); }
  .textme__fine .text-link { color: var(--fg-2); }

  /* ---------- .textme--card: the card-style ending, the one every page uses except Home (2026-09-29) ----------
     Ashton called the "door portrait" on Moving "terrible" (feedback #35) and loves About's card-style text ending, so
     the shared ending drops the door: the text that types itself is the whole stage, bigger, floating on a soft pool of
     his blue with a slow breath once it has typed. Markup: add .textme--card to the section and leave out
     .textme__lamp and .textme__door (invite.js needs only .textme__stage and .textme__msg). Home keeps its lit doorway
     (css/pages/home.css .home-end). TREC sizes unchanged: bubble 17-18px, card name 14px. */
  .textme--card .textme__stage { width: min(86vw, 350px); margin: clamp(36px, 9vw, 56px) auto 0; padding: 0; }
  .textme--card .textme__stage::before {   /* a soft blue pool under the card (light only) */
    content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: 150%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%) scale(calc(.8 + var(--tm-card) * .2)); opacity: calc(.4 + var(--tm-card) * .6);
    background: radial-gradient(closest-side, rgba(40, 82, 229, .30), rgba(40, 82, 229, .08) 55%, transparent 72%);
  }
  .textme--card .textme__msg { position: relative; left: auto; bottom: auto; width: 100%; gap: 14px; padding: 18px; border-radius: 26px; }
  .textme--card .textme__msg-top img { width: 36px; height: 36px; }
  .textme--card .textme__bubble { min-height: 50px; padding: 14px 18px; }
  @media (min-width: 768px) {
    .textme--card .textme__stage { align-self: center; width: min(100%, 440px); margin: 0 0 0 auto; padding: 0; }
    .textme--card .textme__msg { left: auto; bottom: auto; width: 100%; padding: 22px; }
  }
  @media (min-width: 1100px) {
    .textme--card .textme__stage { width: min(100%, 480px); }
    .textme--card .textme__msg { left: auto; bottom: auto; width: 100%; padding: 24px; }
  }
  /* a slow breath once it has typed (never at T0: invite.js only sets .is-ready when armed) */
  .textme--card.is-armed.is-ready .textme__stage { animation: tm-breathe 6s ease-in-out infinite alternate; }
}
@keyframes tm-breathe { from { translate: 0 0; } to { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .textme--card .textme__stage { animation: none !important; } }
:root[data-motion="paused"] .textme--card .textme__stage { animation: none !important; }
@keyframes tm-caret { 50% { opacity: 0; } }
@keyframes tm-ping { 0% { box-shadow: 0 0 0 0 rgba(142, 164, 255, .6); } 100% { box-shadow: 0 0 0 18px rgba(142, 164, 255, 0); } }
/* dark mode: a deeper ink so the ending still reads as its own moment on dark paper */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .textme { --tm-ink: #0A0908; box-shadow: inset 0 1px 0 #2B2926; } }
:root[data-theme="dark"] .textme { --tm-ink: #0A0908; box-shadow: inset 0 1px 0 #2B2926; }
/* the fail-safe (guide §13): open door, whole card */
.is-failsafe .textme { --tm-open: 1 !important; --tm-card: 1 !important; --tm-y: 0px !important; }

/* ==========================================================================
   == COMPETITOR ==  §15 THE COMPETITOR MOMENT (feedback #44 and #45, 2026-09-29). Ashton, on About's aliveness: "This
   is so badass and what I was going for." His strong point, and why someone should hire him. Home and Buy only (the
   repair list lives on those two pages, feedback #39). One pinned ink section (CSS sticky, about 1.2 screens of
   scroll): a split-flap board streams his negotiated repairs, accelerating, and lands on "If it can break, I've
   negotiated it."; his words light word by word; the phone lights and rings; "Put me in your corner" (#contact).
   JS: js/ui/competitor.js (auto-inits [data-competitor]; draws the board on a canvas and renders the list from
   js/data/negotiated.js). Guide §15. Static first: without JS the heading is display type and the list is set type;
   at T0 (reduced motion, the pause), in the fail-safe and when scrolled past, everything shows its end state.
   competitor.js adds .has-board, .is-armed (and .is-tight / .is-compact / .is-free when a screen is short), toggles
   .is-on on list items and .is-ringing, and writes --cmp-dim, --cmp-words (on the quote), --cmp-end and --cmp-bw.
   ========================================================================== */
@layer components {
  .cmp {
    --cmp-ink: #121110;
    --cmp-travel: 120vh;                          /* the pinned scroll (the section is one screen plus this) */
    --bg: var(--cmp-ink); --bg-2: #1B1A18; --fg: #F1F0ED; --fg-2: #CAC9C5; --fg-muted: #A9A7A2;
    --rule: #2B2926; --ctl: #A9A7A2; --accent: #8EA4FF; --ring: #8EA4FF;
    position: relative; isolation: isolate;
    background: var(--cmp-ink); color: var(--fg); color-scheme: dark;
  }
  @media (max-width: 767px) { .cmp { --cmp-travel: 110vh; } }
  .cmp.is-armed:not(.is-free) { height: calc(100vh + var(--cmp-travel)); height: calc(100svh + var(--cmp-travel)); }

  /* ---------- the stage: one screen, pinned while armed ---------- */
  .cmp__stage {
    position: relative; display: grid; align-content: center; overflow: clip;
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--header-h) + clamp(14px, 4vh, 48px)) 0 clamp(24px, 5.4vh, 60px);
    background: radial-gradient(90% 70% at 50% 16%, #1A1816, rgba(18, 17, 16, 0) 72%), var(--cmp-ink);
  }
  @media (max-width: 767px), (max-width: 1099px) and (orientation: portrait) {
    .cmp__stage { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + clamp(12px, 2.4vh, 24px)); }
  }
  .cmp.is-armed:not(.is-free) .cmp__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  /* the phone's light: a soft blue bloom low in the room, as if a screen lit up in the dark */
  .cmp__glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--cmp-end, 1);
    background: radial-gradient(56% 44% at 84% 100%, rgba(40, 82, 229, .24), rgba(40, 82, 229, .06) 50%, transparent 74%);
  }
  @media (max-width: 1099px) { .cmp__glow { background: radial-gradient(95% 34% at 26% 100%, rgba(40, 82, 229, .26), rgba(40, 82, 229, .06) 52%, transparent 76%); } }
  .cmp.is-armed .cmp__glow { will-change: opacity; }

  .cmp__inner {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
    grid-template-areas: "top" "land" "board" "list" "say" "end";
  }
  @media (min-width: 1100px) {
    .cmp__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "land land" "board board" "list list" "say end"; column-gap: clamp(40px, 5vw, 96px); }
  }

  /* ---------- the top line: the kicker (and the Skip link competitor.js adds while pinned) ---------- */
  .cmp__top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; }
  .cmp__kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--fg-2); }
  @media (max-width: 419px) { .cmp__kicker { gap: 10px; letter-spacing: .18em; } }
  .cmp__kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 12px 1px rgba(40, 82, 229, .85); }
  .cmp__skip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px 0 12px;
    font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
    color: var(--fg-muted); transition: color var(--dur-2);
  }
  .cmp__skip:hover, .cmp__skip:focus-visible { color: var(--fg); }

  /* ---------- the line: display type without JS; with the board it is the board's words, for screen readers ---------- */
  .cmp__land {
    grid-area: land; margin: clamp(16px, 3vh, 32px) 0 0; max-width: 14ch;
    font-family: var(--sans); font-weight: 300; font-size: clamp(2.1rem, 8.4vw, 4.6rem); line-height: 1; letter-spacing: -.035em;
    color: var(--fg); text-wrap: balance;
  }
  .cmp__land em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.02em; font-size: calc(var(--em-optical) * 1em); }
  .cmp.has-board .cmp__land { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ---------- the board (a canvas competitor.js sizes: whole tiles, never stretched), in its housing ---------- */
  .cmp__board {
    grid-area: board; position: relative; isolation: isolate; justify-self: start; width: max-content; max-width: 100%;
    margin-top: clamp(20px, 3.4vh, 36px); line-height: 0;
  }
  .cmp:not(.has-board) .cmp__board { display: none; }
  .cmp__canvas { display: block; max-width: 100%; }
  /* the housing: a recessed ink panel with a hairline, so the board reads as an object in the room */
  .cmp__board::before {
    content: ""; position: absolute; inset: calc(var(--cmp-hous, 14px) * -1); z-index: -2; pointer-events: none; border-radius: 10px;
    background: linear-gradient(180deg, #0F0E0D, #0A0908);
    box-shadow: inset 0 0 0 1px rgba(237, 231, 220, .06), inset 0 1px 0 rgba(237, 231, 220, .05), 0 44px 90px -36px rgba(0, 0, 0, .9);
  }
  @media (max-width: 767px) { .cmp__board { --cmp-hous: 9px; } .cmp__board::before { border-radius: 7px; } }
  /* the landing: a soft blue light comes up behind the line and spills through the gaps between the tiles */
  .cmp__board::after {
    content: ""; position: absolute; inset: 18% 12%; z-index: -1; pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side, rgba(62, 104, 255, .55), rgba(40, 82, 229, .18) 55%, transparent);
    transition: opacity 1.4s var(--ease-out);
  }
  .cmp.is-landed .cmp__board::after { opacity: 1; }

  /* ---------- the list: every win, as set type; it lights as the board passes each one ---------- */
  .cmp__list {
    grid-area: list; max-width: min(100%, var(--cmp-bw, 76rem)); margin: clamp(22px, 3.6vh, 40px) 0 0; padding: 0; list-style: none;
    font-size: 12px; line-height: 1.55; letter-spacing: .01em; color: var(--fg-2); text-wrap: pretty;
  }
  @media (min-width: 768px) { .cmp__list { font-size: 13px; line-height: 1.62; } }
  @media (min-width: 1100px) { .cmp__list { font-size: 14px; } }
  .cmp:not(.has-board) .cmp__list { max-width: 64rem; font-size: 15px; }
  .cmp__item { display: inline; }
  .cmp__name, .cmp__note { white-space: nowrap; }   /* lines break between names and notes, never inside one */
  /* the dot rides on the item's last word: a line may end on a dot, never start with one */
  .cmp__item:not(:last-child) > :last-child::after {
    content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 .48em 0 .72em; border-radius: 50%;
    background: var(--fg-muted); opacity: .6; vertical-align: .24em;
  }
  .cmp__note { margin-left: .2em; color: var(--accent); }

  /* ---------- his words ---------- */
  .cmp__say { grid-area: say; min-width: 0; margin-top: clamp(18px, 3.6vh, 44px); }
  .cmp__quote {
    max-width: 36ch; margin: 0;
    font-size: min(clamp(1.125rem, 4.9vw, 1.4rem), 2.7vh); line-height: 1.4; font-weight: 400; letter-spacing: -.008em;
    color: var(--fg); text-wrap: pretty;
  }
  @media (min-width: 768px) { .cmp__quote { font-size: min(clamp(1.5rem, 2.3vw, 2.3rem), 3.9vh); line-height: 1.24; letter-spacing: -.018em; max-width: 34ch; } }
  .cmp__quote em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); font-size: calc(var(--em-optical) * 1em); letter-spacing: -.01em; }

  /* ---------- the ask: the phone lights and rings, then "Put me in your corner" ---------- */
  .cmp__end { grid-area: end; margin-top: clamp(16px, 3vh, 32px); }
  @media (min-width: 1100px) { .cmp__end { align-self: end; justify-self: end; margin-top: 0; padding-bottom: .2em; } }
  .cmp__cta {
    gap: 12px; min-height: 52px; padding: 0 22px 0 8px; border-radius: 999px;
    font-size: 1rem; color: var(--fg); background: rgba(237, 231, 220, .04); border-color: rgba(237, 231, 220, .3);
  }
  .cmp__cta:hover, .cmp__cta:focus-visible { border-color: rgba(142, 164, 255, .75); background: rgba(40, 82, 229, .14); }
  .cmp__phone {
    position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
    color: #FFFFFF; background: var(--blue-fill); box-shadow: 0 0 26px 2px rgba(40, 82, 229, .55);
    transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out), color .6s var(--ease-out);
  }
  .cmp__phone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .cmp__phone::before, .cmp__phone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(142, 164, 255, .75); opacity: 0; pointer-events: none; }

  /* ---------- armed (competitor.js, T1/T2): the start states the scroll plays out of ---------- */
  .cmp.is-armed .cmp__item { opacity: .26; transition: opacity .5s var(--ease-out); }
  .cmp.is-armed .cmp__item.is-on { opacity: 1; }
  .cmp.is-armed .cmp__quote .cmp__w {
    opacity: calc(var(--cmp-dim, 1) * (.18 + .82 * clamp(0, (var(--cmp-words, 1) * (var(--cmp-n, 30) + 3) - var(--cmp-i, 0)) / 3, 1)));
    transition: opacity .25s linear;
  }
  .cmp.is-armed .cmp__end { opacity: var(--cmp-end, 1); transform: translate3d(0, calc((1 - var(--cmp-end, 1)) * 16px), 0); }
  .cmp.is-armed:not(.is-ringing) .cmp__phone { color: var(--fg-2); background: rgba(237, 231, 220, .07); box-shadow: inset 0 0 0 1px rgba(237, 231, 220, .22); }
  .cmp.is-armed.is-ringing .cmp__phone::before { animation: cmp-ring 1.9s var(--ease-out) .12s 2 both; }
  .cmp.is-armed.is-ringing .cmp__phone::after { animation: cmp-ring 1.9s var(--ease-out) .7s 2 both; }
  .cmp.is-armed.is-ringing .cmp__phone svg { animation: cmp-buzz .9s var(--ease-out) .1s 2 both; }
  /* a short screen (competitor.js, after it has shrunk the board): tighter, then the visible list steps aside (it
     stays for screen readers), then (a landscape phone) no pin at all */
  .cmp.is-tight .cmp__board { margin-top: 16px; }
  .cmp.is-tight .cmp__list { margin-top: 18px; font-size: 11.5px; line-height: 1.5; }
  .cmp.is-tight .cmp__say { margin-top: 16px; }
  .cmp.is-tight .cmp__end { margin-top: 14px; }
  .cmp.is-compact .cmp__list { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes cmp-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes cmp-buzz { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(3deg); } 75% { transform: rotate(0); } }
/* dark theme: a deeper ink, so the moment still reads as its own on dark paper */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cmp { --cmp-ink: #0A0908; box-shadow: inset 0 1px 0 #2B2926, inset 0 -1px 0 #2B2926; } }
:root[data-theme="dark"] .cmp { --cmp-ink: #0A0908; box-shadow: inset 0 1px 0 #2B2926, inset 0 -1px 0 #2B2926; }
/* the fail-safe (guide §13): the end state, unpinned */
.is-failsafe .cmp { height: auto !important; }
.is-failsafe .cmp__stage { position: relative !important; height: auto !important; min-height: 100svh !important; }
.is-failsafe .cmp .cmp__w, .is-failsafe .cmp .cmp__end, .is-failsafe .cmp .cmp__item { opacity: 1 !important; transform: none !important; }
/* competitor.js measures the one-screen fit with transitions off (the global pause's 1 ms transitions would read stale sizes) */
.cmp.is-fitting, .cmp.is-fitting * { transition: none !important; }
/* == /COMPETITOR == */
/* ==========================================================================
   == CMA ==  §16 THE CMA MOMENT (feedback #48, 2026-09-29; reworked for #56, 2026-09-30; wording #61, 2026-10-01).
   Ashton's idea: his detailed CMA beside the one-click, one-page auto-report a lot of agents send. Sell (Act I, "Priced
   right") and Buy (Stop 4, the offer). Ashton, 2026-09-30: "make the cma a little more easier to follow and flow
   better", "not overbearing with info". So it is a calm sequence, ONE idea at a time, on one pinned screen on the plate
   (CSS sticky, about 1.5 screens of scroll): (1) one sheet: "A lot of agents send one page."; (2) my CMA lands beside
   it, a thick bound stack: "Mine is 20+." and his research note, "appraisal-style" (2026-10-01: never "most", never
   "lazy", and a CMA is never called an appraisal; .cma__fine says "A CMA is not an appraisal.");
   (3) the camera moves in and the four pages that matter turn one by one, each with a one-line caption (the sales I
   picked, how they compare, the math, what I'd offer / where I'd price it), their contents playing in as they come up;
   (4) the pull-back: the one-pager returns beside it and the heading lands with the mode's line. No counters, no fan.
   Every number, address and name on the pages is an ink redaction bar BY DESIGN (audit/cma-blueprint.md is the only
   source: structure and counts, no data). Neutral white paper, ink and his blue (no bone, no gold), so it sits on the
   white pages and in dark mode alike.
   JS: js/ui/cma.js (auto-inits [data-cma]; data-cma-mode="sell" | "buy"). Guide §16. Static first: without JS the
   kicker, the heading, the research note, the line, the four pages (a short list) and the fine print are plain text; at T0 (reduced motion, the pause), in
   the fail-safe and on a screen too short to pin, the desk shows its end state, unpinned. cma.js adds .has-desk,
   .is-armed (.is-free when a pinned screen is too short), .is-jump (a landing with no transitions) and data-w on the
   section (dim | l1 | l2 | step | land: what the words show); .is-on / .is-past on the steps; data-pose on the report
   and the stack; .is-turned / .is-live on the sheets. It writes only transforms, classes and attributes.
   ========================================================================== */
@layer components {
  .cma {
    --cma-travel: 150vh;                     /* the pinned scroll (the section is one screen plus this) */
    --cma-sheet: #FFFFFF; --cma-sheet-2: #F3F3F1; --cma-ink: #151311; --cma-soft: #E2E2DF; --cma-grey: #8C8A85;
    --cma-rule: #E6E5E2; --cma-blue: #2852E5; --cma-ph-a: #EEEEEC; --cma-ph-b: #DCDBD8;
    --cma-edge: #FBFBFA; --cma-edge-2: #D5D4D0; --cma-pool: rgba(255, 255, 255, .7);
    --cma-pw: 480px; --cma-ph: 621px; --cma-fs: 14.1px;   /* cma.js sizes these from the desk */
    --cma-t: calc(var(--cma-pw) * .055);                   /* the stack's thickness (exaggerated, so 20+ pages read as a stack) */
    position: relative; isolation: isolate;
    background: var(--paper-2); color: var(--ink);
  }
  @media (max-width: 767px) { .cma { --cma-travel: 140vh; } }
  .cma.is-armed:not(.is-free) { height: calc(100vh + var(--cma-travel)); height: calc(100svh + var(--cma-travel)); }

  /* ---------- the stage: static by default, one pinned screen while armed ---------- */
  .cma__stage { position: relative; padding: clamp(64px, 10vh, 120px) 0 clamp(56px, 9vh, 104px); }
  .cma.is-armed:not(.is-free) .cma__stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; display: grid;
    padding: calc(var(--header-h) + clamp(10px, 2.4vh, 32px)) 0 clamp(16px, 3.4vh, 40px);
  }
  @media (max-width: 767px), (max-width: 1099px) and (orientation: portrait) {
    .cma.is-armed:not(.is-free) .cma__stage { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + clamp(10px, 2vh, 20px)); }
  }
  .cma__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "zone" "desk"; row-gap: clamp(20px, 3.2vh, 34px); }
  .cma.is-armed:not(.is-free) .cma__inner {
    height: 100%; min-height: 0; row-gap: clamp(10px, 2vh, 22px);
    grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "desk" "zone";
  }
  @media (min-width: 1100px) {
    .cma__inner, .cma.is-armed:not(.is-free) .cma__inner {
      grid-template-columns: minmax(300px, .78fr) minmax(0, 1.5fr); grid-template-rows: auto minmax(0, 1fr);
      grid-template-areas: "top desk" "zone desk"; column-gap: clamp(36px, 4.2vw, 84px); row-gap: clamp(16px, 3vh, 32px);
    }
  }

  /* ---------- the top line: the kicker (and the Skip link cma.js adds while pinned) ---------- */
  .cma__top { grid-area: top; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; }
  .cma__kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); }
  @media (max-width: 419px) { .cma__kicker { gap: 10px; font-size: 11px; letter-spacing: .14em; } }
  @media (min-width: 1100px) and (max-width: 1439px) { .cma__kicker { font-size: 11.5px; letter-spacing: .2em; } }
  .cma__kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 10px 1px rgba(40, 82, 229, .5); }
  .cma__skip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px 0 12px;
    font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
    color: var(--muted); transition: color var(--dur-2);
  }
  .cma__skip:hover, .cma__skip:focus-visible { color: var(--ink); }

  /* ---------- the words: the heading and his line; the four pages as a short list (static) ---------- */
  .cma__zone { grid-area: zone; display: grid; align-content: center; min-width: 0; container-type: inline-size; }
  .cma__h {
    margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(2rem, 7.6vw, 3.3rem); line-height: 1.03;
    letter-spacing: -.034em; color: var(--ink); text-wrap: balance;
  }
  /* the display size, sized by the words' column (container units, resolved where it is used); a shared variable so the
     first beat's note can sit in the heading's second line while that line waits */
  .cma { --cma-hfs: min(clamp(2rem, 7.6vw, 3.3rem), 10.4cqi); }
  @media (min-width: 1100px) { .cma { --cma-hfs: min(clamp(2.3rem, 3.2vw, 3.7rem), 6.6vh, 10.4cqi); } }
  .cma__h, .cma.is-armed .cma__st { font-size: var(--cma-hfs); }
  .cma__h > span { display: block; }
  .cma__nw { white-space: nowrap; }
  /* "20+": the Bodoni plus is a hairline, so the count sets in the sans (same weight as the heading), still blue */
  .cma__h em .cma__plus { font-family: var(--sans); font-style: normal; font-weight: 300; letter-spacing: -.04em; font-size: calc(1em / var(--em-optical, 1)); }
  .cma__h em, .cma.is-armed .cma__st em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; font-size: calc(var(--em-optical) * 1em); }
  .cma__say, .cma__sub {
    display: flex; align-items: baseline; gap: .75em; max-width: 32ch; margin: clamp(12px, 2.2vh, 26px) 0 0;
    font-size: clamp(1.08rem, 4.4vw, 1.4rem); line-height: 1.34; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty;
  }
  @media (min-width: 1100px) { .cma__say, .cma__sub, .cma.is-armed .cma__sc { font-size: min(clamp(1.15rem, 1.45vw, 1.5rem), 3vh); } }
  .cma__say::before, .cma__sub::before { content: ""; flex: none; width: 1.5em; height: 1px; background: var(--blue-fill); transform: translateY(-.32em); }
  .cma__sub { display: none; color: var(--ink-2); }
  /* his research note is real text: without the moment (no JS, T0, the fail-safe) it reads as a plain line under the
     heading, before his closing line */
  .cma:not(.is-armed) .cma__sub[data-n="1"] { display: block; max-width: 38ch; font-size: clamp(1rem, 3.9vw, 1.2rem); }
  .cma:not(.is-armed) .cma__sub[data-n="1"]::before { content: none; }
  /* the fine print: a CMA is not an appraisal (always in view with the words) */
  .cma__fine { margin: 14px 0 0; }
  /* the four pages that matter: a short list without the moment (and for screen readers) */
  .cma__steps { display: grid; gap: 10px; margin: clamp(22px, 3.4vh, 34px) 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); }
  .cma__step { display: block; max-width: 44ch; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
  .cma__st { display: inline; font: inherit; font-weight: 600; letter-spacing: 0; color: var(--ink); }
  .cma__st em { font-style: normal; }
  .cma__eb { display: none; }

  /* ---------- the desk: a pool of light on the plate, and the camera (a slow drift with the scroll) ---------- */
  .cma__desk { grid-area: desk; position: relative; min-width: 0; min-height: 0; height: clamp(260px, 74vw, 440px); contain: layout style; }
  @media (min-width: 768px) { .cma__desk { height: min(clamp(420px, 60vw, 600px), 92vh); } }
  @media (min-width: 1100px) { .cma__desk { height: min(78vh, 700px); } }
  .cma.is-armed:not(.is-free) .cma__desk { height: auto; }
  .cma:not(.has-desk) .cma__desk { display: none; }
  .cma__desk::before {
    content: ""; position: absolute; inset: -8% -6%; pointer-events: none;
    background: radial-gradient(56% 50% at 56% 50%, var(--cma-pool), rgba(255, 255, 255, 0) 72%);
  }
  .cma__cam { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 52% 40%; }

  /* ---------- paper: letter-size sheets, laid out at reading size and scaled down at rest (always crisp) ---------- */
  .cma__sheet, .cma__doc { position: absolute; left: 0; top: 0; width: var(--cma-pw); height: var(--cma-ph); transform-origin: 50% 50%; }
  .cma__sheet {
    overflow: hidden; display: flex; flex-direction: column; padding: 2.2em 2.4em 1.6em; font-size: var(--cma-fs); line-height: 1.2;
    color: var(--cma-ink); border-radius: calc(var(--cma-fs) * .16);
    background: linear-gradient(162deg, #FFFFFF 0%, var(--cma-sheet) 46%, var(--cma-sheet-2) 100%);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  /* the quick auto-report: one thin sheet */
  .cma__sheet--quick {
    z-index: 2; opacity: 0;
    box-shadow: 0 0 0 1px rgba(21, 19, 17, .05), 0 .1em .22em rgba(21, 19, 17, .08), 0 1.3em 2.6em -1.1em rgba(21, 19, 17, .3);
    transition: transform 1.1s var(--ease-cine), opacity .55s var(--ease-out);
  }
  .cma__sheet--quick.is-on { opacity: 1; }
  .cma__sheet--quick[data-pose="out"] { transition: transform 1s var(--ease-cine), opacity .45s var(--ease-out); }
  /* my CMA: a bound stack in real 3D (the pages on top, the paper edges under them, a base sheet with the cast shadow) */
  .cma__doc {
    z-index: 3; transform-style: preserve-3d; visibility: hidden;
    transition: transform 1.15s cubic-bezier(.22, 1.1, .36, 1), visibility 0s 1.15s;
  }
  .cma__doc.is-on { visibility: visible; transition: transform 1.15s cubic-bezier(.22, 1.1, .36, 1), visibility 0s 0s; }
  .cma__doc.is-on:is([data-pose="read"], [data-pose="final"]) { transition: transform 1.25s var(--ease-cine), visibility 0s 0s; }
  .cma__base {
    position: absolute; inset: 0; display: block; border-radius: calc(var(--cma-fs) * .16); background: var(--cma-edge-2);
    transform: translateZ(calc(var(--cma-t) * -1));
    box-shadow: 0 2.6em 4.4em -1.4em rgba(21, 19, 17, .4), 0 .9em 1.6em -.8em rgba(21, 19, 17, .24);
  }
  .cma__edge { position: absolute; display: block; pointer-events: none; }
  .cma__edge--r {
    left: 100%; top: 0; width: var(--cma-t); height: 100%; transform-origin: 0 50%; transform: rotateY(90deg);
    background: repeating-linear-gradient(90deg, var(--cma-edge) 0 1.6px, var(--cma-edge-2) 1.6px 2.3px);
  }
  .cma__edge--b {
    left: 0; top: 100%; width: 100%; height: var(--cma-t); transform-origin: 50% 0; transform: rotateX(-90deg);
    background: repeating-linear-gradient(180deg, #FFFFFF 0 1.6px, #DFDEDA 1.6px 2.3px);
  }
  /* the sheets: each turns on its left edge (the binding), lifts toward you and is gone, showing the one under it */
  .cma__pg {
    transform-origin: 0 50%; transform: translateZ(calc(var(--z) * .7px));
    box-shadow: 0 0 0 1px rgba(21, 19, 17, .04);
    transition: transform .95s cubic-bezier(.33, .1, .2, 1), opacity .3s linear;
  }
  .cma__pg.is-turned {
    transform: translateZ(calc(var(--z) * .7px + 2px)) rotateY(-102deg); opacity: 0;
    transition: transform 1.05s cubic-bezier(.45, .05, .25, 1), opacity .42s linear .4s;
  }
  .cma__pg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out);
    background: linear-gradient(90deg, rgba(21, 19, 17, .14), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, .6) 66%, rgba(255, 255, 255, 0));
  }
  .cma__pg.is-turned::after { opacity: 1; }

  /* ---------- the labels on the desk ---------- */
  .cma__tag {
    position: absolute; left: 0; top: 0; z-index: 30; white-space: nowrap; pointer-events: none; opacity: 0;
    font-size: 10.5px; font-weight: 500; letter-spacing: .2em; line-height: 1.45; text-transform: uppercase; color: var(--muted);
    transition: opacity .5s var(--ease-out), transform 1.1s var(--ease-cine);
  }
  .cma__tag.is-on { opacity: 1; transition: opacity .6s var(--ease-out) .55s, transform 1.1s var(--ease-cine); }
  .cma__tag--mine { color: var(--blue-text); }
  @media (max-width: 767px) { .cma__tag { max-width: 9.5em; white-space: normal; font-size: 9.5px; letter-spacing: .14em; } .cma__tag .cma__dot { display: none; } }

  /* ---------- what's on a page (all in em of the page, so it scales with the paper) ---------- */
  .cma__x { display: inline-block; flex: none; width: var(--w, 5em); max-width: 100%; height: .7em; border-radius: .08em; background: var(--cma-ink); vertical-align: middle; }
  .cma__x--sm { height: .56em; }
  .cma__x--xs { height: .42em; }
  .cma__x--lg { height: 1.25em; border-radius: .1em; }
  .cma__x--blue { background: var(--cma-blue); }
  .cma__t { display: block; width: var(--w, 90%); height: .44em; border-radius: .22em; background: var(--cma-soft); }
  .cma__l { font-size: .5em; font-weight: 600; letter-spacing: .14em; line-height: 1.25; text-transform: uppercase; color: var(--cma-grey); white-space: nowrap; }
  .cma__l--ink { color: var(--cma-ink); }
  .cma__ph { display: block; border-radius: .25em; aspect-ratio: 4 / 3; background: linear-gradient(140deg, var(--cma-ph-a), var(--cma-ph-b)); }
  .cma__run { display: flex; align-items: center; justify-content: space-between; padding-bottom: .65em; border-bottom: .07em solid var(--cma-rule); }
  .cma__brand { display: inline-flex; align-items: center; gap: .7em; font-size: .56em; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
  .cma__brand::before { content: ""; width: .95em; height: .95em; border-radius: .12em; background: var(--cma-blue); }
  .cma__pt { margin: 1em 0 .7em; font-size: 1.38em; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
  .cma__lead { display: grid; gap: .5em; margin-bottom: 1.2em; }
  .cma__pnote { display: grid; gap: .5em; margin-top: 1.2em; padding: .9em 1em; border-radius: .3em; background: rgba(21, 19, 17, .035); }
  .cma__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .75em; border-top: .07em solid var(--cma-rule); }
  .cma__fx { display: inline-flex; gap: .55em; }
  .cma__fx .cma__x { height: .32em; opacity: .9; }
  .cma__pno { font-size: .5em; font-weight: 600; letter-spacing: .12em; color: var(--cma-grey); font-variant-numeric: tabular-nums; }
  /* the part of a page that matters lights once its page has played in: a blue hairline and a soft glow */
  [data-hl] { position: relative; }
  .cma__hl {
    position: absolute; inset: -.55em -.7em; border-radius: .45em; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 .12em rgba(40, 82, 229, .9), 0 0 1.8em .1em rgba(40, 82, 229, .2); background: rgba(40, 82, 229, .035);
    transition: opacity .3s var(--ease-out);
  }
  .cma__pg.is-live .cma__hl { opacity: 1; transition: opacity .6s var(--ease-out) 1.3s; }

  /* the cover */
  .cma__cv { flex: 1; display: flex; flex-direction: column; padding-top: 3.4em; }
  .cma__cv-k { font-size: .56em; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cma-grey); }
  .cma__cv-t { margin: .3em 0 0; font-family: var(--serif); font-style: italic; font-size: 3.7em; line-height: 1.05; letter-spacing: -.02em; }
  .cma__cv-rule { width: 3.6em; height: .14em; margin: 1.3em 0 1.7em; background: var(--cma-blue); }
  .cma__cv-a, .cma__cv-b { display: block; }
  .cma__cv-b { margin-top: .75em; }
  .cma__call { display: grid; gap: .55em; margin-top: 2.1em; padding: 1em 1.1em; border-left: .22em solid var(--cma-blue); background: rgba(40, 82, 229, .05); }
  .cma__cv-for { display: grid; gap: .55em; justify-items: start; margin-top: auto; padding-bottom: 1.2em; }

  /* the sales I used: the table fills row by row, seller credits are struck, and the column that matters lights */
  .cma__tbl { position: relative; display: grid; grid-template-columns: 1.45fr 1fr .9fr 1.15fr 1.15fr 1.2fr .7fr; column-gap: .75em; align-items: stretch; }
  .cma__th, .cma__tr { display: contents; }
  .cma__th .cma__l { align-self: end; padding-bottom: 1.4em; border-bottom: .14em solid var(--cma-ink); font-size: .44em; letter-spacing: .1em; white-space: normal; }
  .cma__td { position: relative; display: flex; align-items: center; min-height: 2.5em; border-bottom: .07em solid var(--cma-rule); }
  .cma__tr .cma__x { transform-origin: 0 50%; transition: transform .5s var(--ease-out) calc(.3s + var(--r) * 110ms), opacity .4s var(--ease-out) calc(.95s + var(--r) * 90ms); }
  .cma__strike {
    position: absolute; left: -.2em; right: .1em; top: 50%; height: .15em; margin-top: -.075em; border-radius: .08em;
    background: var(--cma-blue); transform-origin: 0 50%; transition: transform .45s var(--ease-out) calc(.95s + var(--r) * 90ms);
  }
  .cma__paid .cma__x { opacity: .26; }
  .cma__colhl { position: absolute; grid-column: 6 / 7; grid-row: 1 / 6; inset: 0; pointer-events: none; }   /* an abs-pos grid item needs both lines (auto = the edge) */
  .cma__mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; margin-top: 1.2em; }
  .cma__ph--sm { aspect-ratio: 4 / 3; }

  /* how they compare: a photo, one honest line and two credits per sale */
  .cma__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em 1em; }
  .cma__card { display: grid; align-content: start; gap: .6em; }
  .cma__card .cma__ph { aspect-ratio: 16 / 10; }
  .cma__chips { display: flex; flex-wrap: wrap; gap: .5em; transition: opacity .45s var(--ease-out) calc(.35s + var(--r) * 140ms), transform .55s var(--ease-out) calc(.35s + var(--r) * 140ms); }
  .cma__chip { display: inline-flex; align-items: center; gap: .4em; padding: .38em .6em; border-radius: 1em; box-shadow: inset 0 0 0 .08em rgba(21, 19, 17, .22); }
  .cma__chip b { font-size: .8em; font-weight: 600; color: var(--cma-blue); }

  /* the math: 4 sales by 6 adjustments, then where each lands */
  .cma__grid { position: relative; display: grid; grid-template-columns: 1.55fr repeat(4, 1fr); column-gap: .9em; }
  .cma__ar, .cma__res { display: contents; }
  .cma__res { --r: 6.5; }
  .cma__gh { display: flex; align-items: end; padding-bottom: .8em; border-bottom: .14em solid var(--cma-ink); min-height: 1.6em; }
  .cma__gl, .cma__gc { display: flex; align-items: center; min-height: 2.35em; border-bottom: .07em solid var(--cma-rule); }
  .cma__res > * { min-height: 2.9em; border-bottom: 0; }
  .cma__res > .cma__hl { grid-column: 1 / -1; grid-row: 8 / 9; inset: 0 -.4em; }
  .cma__gc .cma__x { transform-origin: 0 50%; transition: transform .42s var(--ease-out) calc(.25s + var(--r) * 90ms + var(--c, 0) * 35ms); }
  .cma__res .cma__l { transition: opacity .4s var(--ease-out) .85s; }

  /* what I weigh most: the four weights as bar widths only, then the market, assumptions and the call */
  .cma__wts { display: grid; gap: 1.05em; margin-top: .3em; }
  .cma__wt { display: grid; grid-template-columns: 4.2em 1fr; gap: .5em 1em; align-items: center; }
  .cma__wt .cma__t { grid-column: 2; }
  .cma__track { display: block; height: 1.05em; overflow: hidden; border-radius: .2em; background: rgba(21, 19, 17, .06); }
  .cma__fill {
    display: block; width: calc(var(--f) * 100%); height: 100%; border-radius: .2em; background: var(--cma-ink);
    transform-origin: 0 50%; transition: transform .7s var(--ease-out) calc(.3s + var(--r) * 120ms);
  }
  .cma__wt:first-child .cma__fill { background: var(--cma-blue); }
  .cma__rest { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: 1.6em; transition: opacity .5s var(--ease-out) .75s, transform .6s var(--ease-out) .75s; }
  .cma__blk { display: grid; align-content: start; gap: .5em; padding-top: .75em; border-top: .07em solid var(--cma-rule); }
  .cma__call--end { margin-top: 1.4em; transition: opacity .5s var(--ease-out) .95s, transform .6s var(--ease-out) .95s; }

  /* the quick auto-report: a few grey lines and an average */
  .cma__quick { display: grid; gap: 1.1em; align-content: start; padding-top: .9em; }
  .cma__q, .cma__qr i, .cma__qavg i { display: block; width: var(--w); height: .56em; border-radius: .28em; background: #DCDCD9; }
  .cma__q--t { height: 1.15em; margin-bottom: .4em; background: #CFCECA; }
  .cma__qr { display: flex; gap: 6%; }
  .cma__qavg { display: flex; gap: 6%; margin-top: .8em; padding-top: 1.1em; border-top: .1em solid #E3E2DF; }

  /* ---------- armed (cma.js, T1/T2): the words, one idea at a time ---------- */
  .cma.is-armed .cma__zone { grid-template-areas: "w" "f"; }
  .cma.is-armed .cma__fine { grid-area: f; margin-top: clamp(10px, 2.2vh, 22px); }
  @media (max-width: 1099px) { .cma.is-armed .cma__zone { align-content: start; } }
  .cma.is-armed :is(.cma__land, .cma__steps) { grid-area: w; }
  .cma.is-armed .cma__land { display: grid; grid-template-rows: auto auto; align-content: start; transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
  .cma.is-armed .cma__h { grid-row: 1; }
  .cma.is-armed :is(.cma__say, .cma__sub) {
    display: flex; grid-row: 2; grid-column: 1; align-self: start; opacity: 0; transform: translate3d(0, .45em, 0);
    transition: opacity .45s var(--ease-out), transform .7s var(--ease-out);
  }
  .cma.is-armed .cma__h > span { opacity: .14; transition: opacity .6s var(--ease-out); }
  .cma.is-armed[data-w="l1"] .cma__h > span:first-child { opacity: 1; }
  .cma.is-armed[data-w="l1"] .cma__h > span + span { opacity: 0; }
  .cma.is-armed .cma__sub[data-n="0"] { transform: translate3d(0, calc(var(--cma-hfs) * -1.03 + .45em), 0); }
  .cma.is-armed[data-w="l1"] .cma__sub[data-n="0"] { opacity: 1; transform: translate3d(0, calc(var(--cma-hfs) * -1.03), 0); transition-delay: .3s; }
  .cma.is-armed[data-w="l2"] .cma__h > span:first-child { opacity: .24; }
  .cma.is-armed[data-w="l2"] .cma__h > span + span { opacity: 1; transition-delay: .15s; }
  .cma.is-armed[data-w="l2"] .cma__sub[data-n="1"] { opacity: 1; transform: none; transition-delay: .45s; }
  .cma.is-armed[data-w="step"] .cma__land { opacity: 0; transform: translate3d(0, -.6em, 0); }
  .cma.is-armed[data-w="land"] .cma__h > span { opacity: 1; }
  .cma.is-armed[data-w="land"] .cma__h > span + span { transition-delay: .3s; }
  .cma.is-armed[data-w="land"] .cma__say { opacity: 1; transform: none; transition-delay: .6s; }
  /* the four pages' lines take the same place, one at a time */
  .cma.is-armed .cma__steps { display: grid; grid-template-areas: "w"; margin: 0; padding: 0; border: 0; pointer-events: none; }
  .cma.is-armed .cma__step {
    grid-area: w; display: grid; align-content: start; gap: clamp(8px, 1.5vh, 16px); max-width: none;
    opacity: 0; transform: translate3d(0, .7em, 0); transition: opacity .4s var(--ease-out), transform .6s var(--ease-out);
  }
  .cma.is-armed .cma__step.is-on { opacity: 1; transform: none; transition-delay: .25s; }
  .cma.is-armed .cma__step.is-past { transform: translate3d(0, -.7em, 0); }
  .cma.is-armed .cma__eb { display: block; font-size: 11px; font-weight: 500; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; color: var(--blue-text); font-variant-numeric: tabular-nums; }
  .cma.is-armed .cma__st { display: block; margin: 0; font-family: var(--sans); font-weight: 300; line-height: 1.03; letter-spacing: -.034em; color: var(--ink); text-wrap: balance; }
  .cma.is-armed .cma__sc { display: block; max-width: 30ch; font-size: clamp(1.08rem, 4.4vw, 1.4rem); line-height: 1.34; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }

  /* ---------- armed: a page under the one being read waits in its start state; when it comes up it plays in ---------- */
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__tr .cma__x { transform: scaleX(0); }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__paid .cma__x { opacity: 1; }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__strike { transform: scaleX(0); }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__chips { opacity: 0; transform: translate3d(0, .5em, 0); }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__gc .cma__x { transform: scaleX(0); }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__res .cma__l { opacity: 0; }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) .cma__fill { transform: scaleX(0); }
  .cma.is-armed .cma__pg:not(.is-live):not(.is-turned) :is(.cma__rest, .cma__call--end) { opacity: 0; transform: translate3d(0, .6em, 0); }

  /* a short phone (an SE, a small Android): the same moment, tighter type, so the pinned desk keeps its room */
  @media (max-width: 767px) and (max-height: 720px) {
    .cma.is-armed:not(.is-free) .cma__inner { row-gap: 8px; }
    .cma.is-armed:not(.is-free) .cma__top { min-height: 22px; }
    .cma.is-armed { --cma-hfs: min(2rem, 5.3vh); }
    .cma.is-armed :is(.cma__say, .cma__sub) { margin-top: 8px; font-size: min(1.08rem, 2.9vh); }
    .cma.is-armed .cma__sc { font-size: min(1.08rem, 2.9vh); }
    .cma.is-armed .cma__step { gap: 6px; }
  }
  @media (max-width: 359px) {
    .cma__kicker { font-size: 10.5px; letter-spacing: .13em; gap: 8px; }
  }
}
/* dark theme: the plate turns dark; the paper stays paper (a touch dimmer), lit by a softer pool */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cma { --cma-sheet: #EDEDEB; --cma-sheet-2: #E1E1DE; --cma-edge: #E9E9E6; --cma-edge-2: #B9B8B4; --cma-pool: rgba(255, 255, 255, .06); }
}
:root[data-theme="dark"] .cma { --cma-sheet: #EDEDEB; --cma-sheet-2: #E1E1DE; --cma-edge: #E9E9E6; --cma-edge-2: #B9B8B4; --cma-pool: rgba(255, 255, 255, .06); }
/* a landing with no transitions (a #hash jump, a Back restore, a resize, the end state) */
.cma.is-jump, .cma.is-jump * { transition: none !important; }
/* the fail-safe (guide §13): the end state, unpinned */
.is-failsafe .cma { height: auto !important; }
.is-failsafe .cma__stage { position: relative !important; height: auto !important; }
/* == /CMA == */