/* css/pages/road-to-home.css : Buy, The Road to Home (round 8, 2026-09-29; toned down 2026-09-30). Page layout only;
   linked after site.css and unlayered on purpose, so it sits above every site.css layer and above the tools' :where()
   styles.

   Ashton, 2026-09-30: "background white also"; "tone it down a little, it is a tad overwhelming"; "don't like the stack
   for payment"; "just have the meat and potatoes". The page opts into the white tone (<html data-tone="white">, site.css
   maps the paper tokens), and every stop is a title, one or two short lines and at most ONE visual the scroll builds.
   Page JS writes a progress (--p, --g, --t, --lp, --sp...) on each visual as it travels up the screen; unset (T0, no JS,
   the fail-safe) each falls back to its finished state. Rhythm: white first, with three ink moments: the inspection (the
   lights go down, then come back up at "Negotiated"), the competitor board, and the text-me ending. The CMA moment at
   Stop 4 sits on the light-grey plate (not an ink moment). Components: audit/cinematic-guide.md (§14 the ending, §15 the
   board, §16 the CMA). */

.page--buy { --bone-bg: var(--paper); --ink-bg: #121110; --card-bg: var(--paper-2); --chip-bg: var(--paper); --note-bg: var(--paper-2); --note-fg: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--buy { --bone-bg: #121110; --ink-bg: #080807; --card-bg: #1B1A18; --chip-bg: #22201D; --note-bg: #22201D; --note-fg: var(--ink); } }
:root[data-theme="dark"] .page--buy { --bone-bg: #121110; --ink-bg: #080807; --card-bg: #1B1A18; --chip-bg: #22201D; --note-bg: #22201D; --note-fg: var(--ink); }
.page--buy em { font-style: italic; }

/* ------------------------------------------------------------------ hero: one screen, the film frame, the title, the road */
.rh-hero { position: relative; }
.rh-hero__inner { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: clamp(18px, 2.8vh, 32px); min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + clamp(10px, 1.8vh, 20px)) max(var(--gutter), 3vw) clamp(18px, 3vh, 32px); }
.rh-hero__frame { position: relative; min-height: clamp(240px, 38vh, 520px); }
.buy-hero__films { position: absolute; inset: 0; transform: scale(calc(1 + var(--hp, 0) * .07)); transform-origin: 50% 40%; }
.buy-hero__films video { filter: saturate(1.02) contrast(1.03); }
/* the buyer-preview clip carries a burned-in chapter label near the bottom; a small push-in from the top keeps it out */
.buy-hero__films video[data-crop="label"] { transform: scale(1.16); transform-origin: 50% 0; }
/* one live clip (the lead, with its Pause control); the two panels beside it are stills of the same visit that always
   show the two rooms the clip isn't in, drifting very slowly (feedback item 6) */
.buy-hero__films .is-still img { opacity: 0; transition: opacity .35s var(--ease-out); transform-origin: 50% 40%; animation: bh-drift 22s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.buy-hero__films .is-still img.is-on { opacity: 1; }
.buy-hero__films .is-still:last-child img { animation-delay: -11s; transform-origin: 40% 30%; }
@keyframes bh-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
:root[data-motion="paused"] .buy-hero__films .is-still img { animation: none; }
.buy-hero__pause { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, .45); background: rgba(11, 11, 12, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.buy-hero__pause:hover { border-color: #fff; }
:root[data-motion="paused"] .buy-hero__pause { display: none; }

.rh-hero__copy { display: grid; gap: 18px clamp(32px, 5vw, 80px); align-items: end; }
@media (min-width: 900px) { .rh-hero__copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.rh-hero h1 { font-weight: 300; font-size: clamp(3rem, 5.4vw, 5.75rem); line-height: .92; letter-spacing: -.05em; color: var(--ink); }
.rh-hero h1 .kicker { font-weight: 500; letter-spacing: .3em; color: var(--fg-2); margin-bottom: clamp(10px, 1.4vw, 18px); }
.rh-hero h1 .h1-main { display: inline; }
.rh-hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; color: var(--accent); }
.rh-hero__aside { display: grid; gap: 14px; justify-items: start; }
.rh-hero__lede { max-width: 36ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--fg-2); }
.rh-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.rh-hero__ctas .btn--primary { min-height: 50px; padding: 0 26px; }
.rh-hero__move { font-size: 12px; }

/* the road: three acts, ten stops, in one line (the header carries it after this) */
.rh-road { display: grid; gap: 0 clamp(20px, 3vw, 48px); }
@media (min-width: 900px) { .rh-road { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rh-road__act { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 12px; border-top: 1px solid var(--rule); }
.rh-road__act::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--ink); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out); transition-delay: calc(.2s + var(--a, 0) * .18s); }
.rh-road__h { font-weight: 300; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1; letter-spacing: -.035em; }
.rh-road__h em { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--accent); }
.rh-road ol { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.rh-road a { display: inline-flex; align-items: baseline; gap: 7px; min-height: 36px; padding: 6px 0; font-size: .9375rem; color: var(--fg-2); text-decoration: none; transition: color var(--dur-2); }
.rh-road a span { font-size: 11px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--blue-text); }
.rh-road a:hover, .rh-road a:focus-visible { color: var(--fg); }
.rh-road.is-armed .rh-road__act { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(.1s + var(--a, 0) * .14s); }
.rh-road.is-armed .rh-road__act::before { transform: scaleX(0); }
.rh-road.is-armed.is-in .rh-road__act { opacity: 1; transform: none; }
.rh-road.is-armed.is-in .rh-road__act::before { transform: scaleX(1); }
.is-failsafe .rh-road .rh-road__act { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ the stops */
.stop { position: relative; padding-block: clamp(44px, 7vh, 80px) 0; }
/* head (title and the strong line), rest (the points, the fact, the drawers) and the visual. Wide screens: the words in
   one column and the visual beside them; phones: the visual comes straight after the line. */
.stop__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "rest"; gap: 20px; }
.stop__grid > .stop__head { grid-area: head; }
.stop__grid > .stop__rest { grid-area: rest; }
.stop__grid > .stop__vis { grid-area: vis; }
.stop__rest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; justify-items: start; min-width: 0; }
.stop__vis { min-width: 0; }
@media (min-width: 1000px) {
  .stop__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "head vis" "rest vis"; column-gap: clamp(36px, 5vw, 88px); row-gap: 18px; }
  .stop--flip .stop__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "vis head" "vis rest"; }
  .stop__grid > .stop__vis { align-self: center; }
}
.stop__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.stop__act { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 4px; font-weight: 300; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1; letter-spacing: -.025em; color: var(--fg); }
.stop__act::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--accent); }
.stop__act em { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--accent); }
.stop__head .reel-ticks { justify-content: flex-start; gap: 5px; }
.stop__head .reel-ticks i { width: 14px; }
.stop__title { font-weight: 300; font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: .95; letter-spacing: -.05em; color: var(--fg); }
.stop__title em { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; color: var(--accent); }
.stop__line { max-width: 30ch; font-size: clamp(1.1875rem, 1.75vw, 1.5rem); line-height: 1.32; letter-spacing: -.018em; color: var(--fg); text-wrap: pretty; }
.stop__sub { max-width: 44ch; font-size: 1rem; line-height: 1.5; color: var(--fg-2); }
.pts { display: grid; max-width: 46ch; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.pts > li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); font-size: 1rem; line-height: 1.45; color: var(--fg-2); }
.pts > li::before { content: ""; position: absolute; left: 0; top: 1.2em; width: 10px; height: 1.5px; background: var(--blue-fill); }
.fact { display: grid; gap: 2px; max-width: 48ch; padding-left: 14px; border-left: 2px solid var(--blue-fill); }
.fact__title { font-size: 1rem; font-weight: 500; line-height: 1.45; }
.stop .fineprint, .close-act .fineprint { font-size: 13px; }
.stop .fineprint > summary, .close-act .fineprint > summary { padding: 2px 0; }
.stop__deeper { display: grid; width: 100%; max-width: 40rem; }
.stop__deeper > .drawer > summary { min-height: 50px; font-size: 1rem; }
.drawer__cta { margin-top: 16px; }
.drawer__body .stop__tool { padding-top: 8px; }
.drawer__body .loans { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.drawer__body .loans li { font-size: .9375rem; line-height: 1.5; color: var(--fg-2); }
.drawer__body .loans b { display: inline-block; min-width: 9.5rem; font-weight: 600; color: var(--fg); }
.drawer__body > .fine + .checklist { margin-top: 22px; }
.drawer__more { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.drawer__h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }

/* the stop titles rise word by word (cinema.js title-card hook: [data-title-card] > [data-split]) */
.stop__head.cine-split .w { padding-bottom: .12em; margin-bottom: -.12em; }

/* ------------------------------------------------------------------ compact cards that tick ([data-ticks], stops 1 and 5) */
.ticks { display: grid; gap: 8px; width: 100%; max-width: 34rem; margin: 0; padding: 0; list-style: none; }
.tick { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 16px 11px 12px; background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: 0 16px 30px -26px rgba(21, 19, 17, .5); transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .6s var(--ease-out), transform .6s var(--ease-out), opacity .45s var(--ease-out); }
.tick__box { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--blue-fill); background: var(--blue-fill); transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out); }
.tick__box svg { width: 15px; height: 15px; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease-out) .08s; }
.tick__t { font-size: .96875rem; line-height: 1.35; color: var(--fg); transition: color .35s; }
.ticks.is-armed .tick:not(.is-on) { background: transparent; border-color: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: none; transform: translateX(10px); }
.ticks.is-armed .tick:not(.is-on) .tick__box { background: transparent; border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.ticks.is-armed .tick:not(.is-on) .tick__box svg { stroke-dashoffset: 24; }
.ticks.is-armed .tick:not(.is-on) .tick__t { color: var(--fg-muted); }
.ticks.is-armed .tick.is-on .tick__box { animation: tick-pop .5s var(--ease-out); }
@keyframes tick-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ticks--grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.is-failsafe .ticks.is-armed .tick { background: var(--card-bg) !important; transform: none !important; }
.is-failsafe .ticks.is-armed .tick__box { background: var(--blue-fill) !important; border-color: var(--blue-fill) !important; }
.is-failsafe .ticks.is-armed .tick__box svg { stroke-dashoffset: 0 !important; }

/* ------------------------------------------------------------------ stop 1: a warm portrait of him, opening from a slit */
.stop--1 .stop__vis { display: grid; justify-items: center; }
@media (min-width: 1000px) { .stop--1 .stop__vis { justify-items: end; } }
.portrait, .closing { --q: clamp(0, calc(var(--p, 1) * 1.35), 1); margin: 0; }
.portrait { width: min(100%, 360px); }
.portrait__photo, .closing__photo { position: relative; overflow: hidden; background: var(--paper-2); clip-path: inset(calc((1 - var(--q)) * 14%) calc((1 - var(--q)) * 20%) calc((1 - var(--q)) * 6%) round calc((1 - var(--q)) * 160px) calc((1 - var(--q)) * 160px) 4px 4px); box-shadow: 0 50px 100px -56px rgba(21, 19, 17, .55); }
.portrait__photo { aspect-ratio: 4 / 5; }
.portrait__photo img, .portrait__photo video, .closing__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - .14 * var(--q))); transform-origin: 50% 40%; }
.portrait__photo img, .portrait__photo video { object-position: 50% 40%; }
/* the closing-day loop (film.js): it fades in over its own first frame (the poster), so the swap never shows. Its pause
   button keeps a 44px hit area but draws a small disc, bottom left over the counter, clear of his face and beard. */
.portrait__photo .film__pause { left: 4px; right: auto; bottom: 4px; width: 44px; height: 44px; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.portrait__photo .film__pause-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(21, 19, 17, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s; }
.portrait__photo .film__pause:hover .film__pause-icon { background: rgba(21, 19, 17, .72); }
.portrait__photo .film__pause-icon svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ stop 2: the approval meter (a live needle), the stop's one visual */
.stop--2 .stop__vis { display: grid; }
.approve { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(16px, 2.2vw, 26px); width: 100%; max-width: 36rem; margin-inline: auto; padding: clamp(26px, 3.4vw, 48px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 40px); background: var(--card-bg); border-top: 1px solid var(--ink); }
.approve__gauge { width: min(100%, 340px); }
/* wide screens: the visual stays in view beside an open drawer (the calculator, the tax tool) instead of floating to the
   middle of a tall column */
@media (min-width: 1000px) { :is(.stop--2, .stop--3) .stop__grid > .stop__vis { align-self: start; position: sticky; top: calc(var(--header-h) + 28px); } }
/* the calculator in the drawer (js/tools/payment.js, shared) draws its own stacked picture: not on this page (Ashton,
   2026-09-30: "don't like the stack for payment"). The legend under the total itemizes the same numbers; page JS
   retitles the tool "Your monthly payment". */
#payment-calc .pay__vis { display: none; }
.approve__gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.approve__track { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 9; stroke-linecap: round; }
.approve__fill { fill: none; stroke: var(--blue-fill); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.approve__ticks line { stroke: var(--fg-muted); stroke-width: 1.2; }
.approve__needle { transform-origin: 120px 120px; transform: rotate(90deg); }
.approve__needle line { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.approve__needle circle { fill: var(--ink); stroke: var(--card-bg); stroke-width: 3; }
.approve__ends { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.approve__side { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; min-width: 0; text-align: center; }
.approve__read { display: grid; justify-items: center; gap: 6px; margin: 0; }
.approve__read b { font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1; letter-spacing: -.045em; transition: color .4s; }
.approve.is-approved .approve__read b, :root:not(.cine-js) .approve__read b { color: var(--blue-text); }
.approve__read span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
/* the lender folder: five documents that light as the needle climbs (paper tabs, not tick cards) */
.docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.doc { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px 5px 10px; border-radius: 3px 10px 3px 3px; background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: .875rem; line-height: 1.2; color: var(--fg); transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), color .4s, opacity .4s, transform .5s var(--ease-out); }
.doc::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-fill); transition: background-color .4s, box-shadow .4s; }
.docs.is-armed .doc:not(.is-on) { opacity: .45; transform: translateY(4px); background: transparent; }
.docs.is-armed .doc:not(.is-on)::before { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.is-failsafe .docs.is-armed .doc { opacity: 1 !important; transform: none !important; }

/* ---------- his notes along the road: a text from him, with his face (a typing beat, then the words) ---------- */
.note { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: end; max-width: 30rem; }
.note__av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bone-bg), 0 10px 22px -12px rgba(21, 19, 17, .6); }
.note__bubble { justify-self: start; margin: 0; padding: 12px 17px; border-radius: 22px 22px 22px 6px; background: var(--note-bg); color: var(--note-fg); font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(21, 19, 17, .05), 0 24px 44px -32px rgba(21, 19, 17, .5); }
.note__dots { position: absolute; left: 46px; bottom: 0; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--note-bg); opacity: 0; transform: scale(.9); transform-origin: 0 100%; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); pointer-events: none; }
.note__dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--note-fg) 45%, transparent); animation: note-dot 1.05s ease-in-out infinite; }
.note__dots i:nth-child(2) { animation-delay: .16s; } .note__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes note-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.note.is-armed .note__av { opacity: 0; transform: scale(.82); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.note.is-armed .note__bubble { opacity: 0; transform: translateY(12px) scale(.965); transform-origin: 0 100%; transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); }
.note.is-armed.is-typing .note__dots { opacity: 1; transform: none; }
.note.is-armed:is(.is-typing, .is-in) .note__av { opacity: 1; transform: none; }
.note.is-armed.is-in .note__bubble { opacity: 1; transform: none; }
.is-failsafe .note.is-armed :is(.note__av, .note__bubble) { opacity: 1 !important; transform: none !important; }
.is-failsafe .note__dots { display: none; }


/* ------------------------------------------------------------------ stop 3: the new-build tip (one line) and the two tax bills */
.stop__tip { max-width: 34ch; margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--fg-2); }
.stop__tip em { font-family: var(--serif); font-size: 1.18em; color: var(--fg); }
.bills { display: grid; gap: 12px; align-content: start; }
.bills__h { font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.05; letter-spacing: -.04em; }
.bills__h em { font-family: var(--serif); font-weight: 400; color: var(--accent); letter-spacing: -.01em; }
.bills__plates { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .9fr); column-gap: clamp(14px, 2.4vw, 32px); align-items: end; height: clamp(300px, 42vh, 390px); padding: 18px clamp(14px, 2vw, 28px) 16px; background: var(--card-bg); border-top: 1px solid var(--ink); }
.bill { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; height: 100%; min-width: 0; }
.bill__stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; min-height: 0; }
.bill__brick { --bp: clamp(0, calc(var(--p, 1) * (var(--sn, 8) + 2.4) - var(--k, 0) - .4), 1); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: calc(var(--h) * .96); min-height: 3px; padding: 0 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); font-size: 11px; letter-spacing: .08em; opacity: var(--bp); transform: translateY(calc((1 - var(--bp)) * -46px)); transition: opacity .16s linear, transform .16s linear; }
.bill__brick:nth-child(2n) { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.bill__brick.is-mud { background: color-mix(in srgb, var(--blue-fill) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-fill) 60%, transparent); }
.bill__brick b { font-weight: 600; text-transform: uppercase; }
.bill__brick i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.bill__brick.is-thin > * { display: none; }
.bill__v { margin: 10px 0 0; font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.bill__k { margin: 6px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--fg-2); }
.bills__diff { --dp: clamp(0, calc(var(--p, 1) * (var(--sn, 8) + 2.4) - var(--sn, 8) - .6), 1); align-self: center; margin: 0; padding-left: 16px; border-left: 2px solid var(--blue-fill); font-size: 1rem; line-height: 1.4; color: var(--fg-2); opacity: var(--dp); transform: translateX(calc((1 - var(--dp)) * 18px)); }
.bills__diff b { display: block; font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.05em; line-height: 1; color: var(--blue-text); }

/* ------------------------------------------------------------------ stop 4: the offer, and the CMA moment under it
   The CMA (css/site.css "== CMA ==", js/ui/cma.js, guide §16; feedback #48) is the stop's ONE visual: it replaced the
   five-lever rack, whose levers now sit in the drawer. The title and the drawer stack in the words column (as on every
   stop, so opening the drawer never moves its summary), then the paper plate. Only spacing here; the component itself
   is styled in site.css. */
.stop--4 .stop__grid { grid-template-areas: "head" "rest"; padding-bottom: clamp(30px, 5.5vh, 60px); }
@media (min-width: 1000px) { .stop--4 .stop__grid { grid-template-rows: auto auto; grid-template-areas: "head ." "rest ."; } }
.drawer__body .levers-list li { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); column-gap: 14px; }
.drawer__body .levers-list b { min-width: 0; }
.drawer__body .levers-list + .fact { margin-top: 18px; }

/* ------------------------------------------------------------------ stop 5: the option clock and its seven to-dos */
.optslate { display: grid; gap: clamp(22px, 3.4vw, 48px); align-items: center; }
@media (min-width: 700px) { .optslate { grid-template-columns: auto minmax(0, 1fr); } }
.optslate .option__dial { position: relative; width: clamp(190px, 18vw, 250px); aspect-ratio: 1; justify-self: center; }
.optslate .option__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.optslate .option__track { fill: none; stroke: var(--rule); stroke-width: 1; }
.optslate .option__arc { fill: none; stroke: var(--blue-fill); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: var(--t, 1); }
.optslate :is(.option__hand, .option__dot) { transform-origin: 60px 60px; transform: rotate(calc(var(--t, 1) * 360deg)); }
.optslate .option__hand { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.optslate .option__dot { fill: var(--blue-fill); }
.optslate .option__ticks line { stroke: var(--ink); stroke-width: 1.5; opacity: calc(1 - .8 * clamp(0, calc(var(--t, 1) * 7 - var(--d, 0)), 1)); }
.optslate .option__read { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; margin: 0; text-align: center; }
.optslate .option__num { font-size: clamp(3rem, 4.6vw, 4.25rem); font-weight: 300; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.optslate .option__lbl { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.optslate.is-done .option__num, :root:not(.cine-js) .optslate .option__num { color: var(--accent); }
.optslate .ticks--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.optslate .ticks--grid .tick { padding: 9px 12px 9px 10px; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.optslate .ticks--grid .tick__box { width: 22px; height: 22px; }
.optslate .ticks--grid .tick__box svg { width: 13px; height: 13px; }
.optslate .ticks--grid .tick__t { font-size: .9rem; }

/* ------------------------------------------------------------------ THE PEAK: the house lights go down for the scrub
   page JS writes --arrive (0..1, the section arriving), --lights (0 = bone, 1 = the dark stage: it rises with the
   arrival and falls again in the film's tail) and --handoff (the last frame settling onto the charcoal plate). So the
   film plays in the dark and leaves on a charcoal card in daylight. Static (T0) keeps the dark stage. */
#inspection { --night: #121110; --handoff: 0; --fh: min(84vh, 900px); --ftop: 50%; margin-top: clamp(28px, 4.5vh, 48px); }
:root[data-theme="dark"] #inspection { --night: #080807; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #inspection { --night: #080807; } }
.scrub-film:not(.is-static) .scrub-film__stage { background: color-mix(in srgb, var(--night) calc(var(--lights, 1) * 100%), var(--paper)); }
.scrub-film:not(.is-static) .scrub-film__bars::before, .scrub-film:not(.is-static) .scrub-film__bars::after { background: color-mix(in srgb, var(--night) calc(var(--lights, 1) * 100%), var(--paper)); }
.scrub-film.grain:not(.is-static)::after { opacity: calc(.55 * var(--lights, 1)); }
.scrub-film:not(.is-static) .scrub-film__amb { opacity: calc(.4 * var(--lights, 1) * (1 - .85 * var(--handoff))); }
.scrub-film:not(.is-static) .skip-pin { opacity: var(--lights, 1); }
#inspection .scrub-film__frame { z-index: 2; }
.scrub-film:not(.is-static)#inspection .scrub-film__frame { transform: translate(-50%, calc(-50% - 34px * var(--handoff))) scale(calc((.9 + .1 * var(--arrive, 1)) * (1 - .27 * var(--handoff)))); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, calc(.3 + .6 * var(--arrive, 1))); }
.scrub-film:not(.is-static)#inspection :is(.scrub-film__side, .scrub-film__beats, .scrub-film__subs, .scrub-film__cap) { opacity: calc(clamp(0, calc(var(--arrive, 1) * 1.6 - .6), 1) * clamp(0, calc(1 - var(--handoff) * 2.2), 1)); }
#inspection .scrub-film__plate { position: absolute; left: 50%; top: var(--ftop); z-index: 1; width: calc(var(--fh) * var(--ratio) * .73 + 56px); height: calc(var(--fh) * .73 + 128px); display: grid; align-content: end; justify-items: center; padding-bottom: 22px; background: #1B1A18; border-top: 3px solid #F3F3F1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 60px 120px -60px rgba(0, 0, 0, .95); opacity: var(--handoff); transform: translate(-50%, calc(-50% + 30px)) scale(calc(.92 + .08 * var(--handoff))); pointer-events: none; }
#inspection .scrub-film__plate-cap { display: flex; align-items: baseline; gap: 12px; margin: 0; color: #F3F3F1; opacity: clamp(0, calc(var(--handoff) * 2 - 1), 1); transform: translateY(calc((1 - var(--handoff)) * 10px)); }
#inspection .scrub-film__plate-cap span { font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #8EA4FF; }
#inspection .scrub-film__plate-cap em { font-family: var(--serif); font-size: 1.75rem; line-height: 1; }
.scrub-film.is-static#inspection .scrub-film__plate { display: none; }
/* the subtitles live inside the film frame: a long line wraps to two lines within it and never overhangs the frame */
#inspection .scrub-film__subs { width: min(calc(min(84vh, 900px) * var(--ratio) - 40px), 90vw); }
#inspection .scrub-film__beats li span { display: block; }
@media (max-width: 899px) {
  #inspection { --fh: min(64vh, 150vw); --ftop: calc(50% + 34px); }
  #inspection .scrub-film__subs { width: min(calc(min(64vh, 150vw) * var(--ratio) - 20px), calc(100vw - 2 * var(--gutter))); bottom: calc(var(--bar-h, 64px) + 60px + env(safe-area-inset-bottom)); }
  #inspection .scrub-film__beats { padding-top: 22px; }
  #inspection .scrub-film__beats li span { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: .2em; white-space: nowrap; color: var(--on-night); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .45s var(--ease-out); }
  #inspection .scrub-film__beats li.is-on span { opacity: 1; transform: none; }
  #inspection .scrub-film__side { right: calc(var(--gutter) + 78px); }
  #inspection .scrub-film__stage > .skip-pin { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--header-h) + 18px); }
}

/* ------------------------------------------------------------------ the proof, in daylight: what people say */
.proof { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 9vh, 104px); }
.proof__grid { display: grid; gap: clamp(20px, 2.6vw, 40px); align-items: center; }
@media (min-width: 1000px) { .proof__grid:has(> .sold-card) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
/* the results on their own (the sold card left on 2026-10-01): one calm centred column */
.proof__grid > .results:only-child { width: 100%; max-width: 820px; margin-inline: auto; }
.sold-card { display: grid; margin: 0; background: var(--card-bg); border-top: 3px solid var(--ink); box-shadow: 0 40px 80px -56px rgba(21, 19, 17, .55); }
.sold-card__photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sold-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(calc(var(--frost, 0) * 18px)) saturate(calc(1 - var(--frost, 0) * .55)); transform: scale(calc(1 + var(--frost, 0) * .06 + var(--sp, .5) * .06)) translateY(calc((var(--sp, .5) - .5) * -3%)); transform-origin: 50% 60%; }
.sold-card__frost { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, calc(.3 * var(--frost, 0))), rgba(255, 255, 255, 0) 62%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(.5 * var(--frost, 0))); }
.sold-card__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 18px; padding: clamp(16px, 2vw, 26px); }
.sold-card__label { grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-text); }
.sold-card__addr { font-weight: 300; font-size: clamp(1.375rem, 2.1vw, 2rem); line-height: 1.05; letter-spacing: -.04em; color: var(--fg); }
.sold-card__who { font-family: var(--serif); font-style: italic; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.2; color: var(--fg-2); text-align: right; }
.sold-card__who em { color: var(--accent); }
.is-failsafe .sold-card { --frost: 0 !important; }
.results { display: grid; gap: clamp(14px, 1.8vw, 22px); align-content: start; }
.results__title { font-weight: 300; font-size: clamp(1.875rem, 3vw, 3rem); line-height: 1; letter-spacing: -.045em; max-width: 16ch; color: var(--fg); }
.results__title em, .results__big em { font-family: var(--serif); font-weight: 400; color: var(--accent); letter-spacing: -.01em; }
.results__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.results__list li { --lp: clamp(0, calc(var(--p, 1) * 4.4 - var(--i, 0) - .25), 1); display: grid; gap: 8px; align-content: start; padding: 16px 14px 14px 0; opacity: calc(.08 + .92 * var(--lp)); transform: translateY(calc((1 - var(--lp)) * 26px)); transition: opacity .18s linear, transform .18s linear; }
.results__list li + li { padding-left: 14px; border-left: 1px solid var(--rule); }
.results__big { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: .98; letter-spacing: -.05em; color: var(--fg); }
.results__big [data-rcount] { font-variant-numeric: tabular-nums; }
.results__list li > p:last-child { font-size: .875rem; line-height: 1.45; color: var(--fg-2); }
.results__quote { display: grid; gap: 10px; margin: 4px 0 0; }
.results__quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; color: var(--fg); max-width: 40ch; }
.results__quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }
.results__quote .avatar { width: 32px; height: 32px; border-radius: 50%; }

/* the competitor board follows the proof (shared component: spacing and the pin's length here).
   pacing (2026-10-01): 1.9 screens of pin on desk, 2.0 on phones (was 0.8 / 0.76), so the first repairs, the spin-up
   and the landing each get their moment on a flick (js/ui/competitor.js paces the board in five steps) */
#competitor { margin-top: 0; --cmp-travel: 190vh; }
@media (max-width: 767px) { #competitor { --cmp-travel: 200vh; } }
@supports (height: 1svh) { @media (max-width: 767px) { #competitor { --cmp-travel: 200svh; } } }

/* ------------------------------------------------------------------ stop 6: the report sorts itself (ONE visual) */
.stop__head--wide { max-width: none; }
.pull { margin: 4px 0 0; display: grid; gap: 12px; max-width: 34ch; }
.pull__t { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.18; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.pull__who { display: flex; align-items: center; gap: 10px; }
.pull__who .avatar { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bone-bg), 0 10px 22px -12px rgba(21, 19, 17, .6); }
.pull__who .caps { color: var(--fg-2); }
@media (min-width: 1000px) {
  .stop__head--wide { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(36px, 5vw, 88px); align-items: end; }
  .stop__head--wide > :not(.stop__lines) { grid-column: 1; }
  .stop__head--wide > .stop__lines { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}
.stop__head--wide .stop__lines[data-lit] { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
.stop__deeper--row { max-width: none; margin-top: clamp(14px, 2vw, 22px); }
@media (min-width: 900px) { .stop__deeper--row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: start; } .stop__deeper--row > .drawer + .drawer { border-top: 1px solid var(--rule); } .stop__deeper--row > .drawer[open] { grid-column: 1 / -1; } }
.sev { margin-top: clamp(22px, 3vw, 40px); padding: clamp(18px, 2.4vw, 32px); background: var(--card-bg); border-top: 1px solid var(--ink); }
.sev__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 20px; margin-bottom: 14px; }
.sev__count { margin: 0; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.35; color: var(--fg-2); }
.sev__n { margin-right: 6px; font-weight: 300; font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.sev__count b { font-weight: 500; color: var(--fg-muted); transition: color .5s; }
.sev.is-keyed .sev__count b, :root:not(.cine-js) .sev__count b { color: var(--blue-text); }
.sev__lanes { display: grid; gap: 8px; }
.sev__lane { display: grid; gap: 8px 16px; align-items: start; padding-top: 10px; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .sev__lane { grid-template-columns: 150px minmax(0, 1fr); } }
.sev__k { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.sev__k span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
@media (max-width: 759px) { .sev__k span { margin-left: 4px; } }
.sev__lane ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sev-dot--safety { background: var(--blue-fill); }
.sev-dot--major { background: var(--ink); }
.sev-dot--maint { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sev-dot--cosmetic { box-shadow: inset 0 0 0 1px var(--fg-muted); }
.chip-f { --cp: clamp(0, calc((var(--p, 1) * 1.5 * (var(--sn, 25) + 3) - var(--k, 0)) / 3), 1); position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 5px 4px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 13px; line-height: 1.2; color: var(--fg); opacity: var(--cp); transform: translate(calc((1 - var(--cp)) * var(--dx, 0px)), calc((1 - var(--cp)) * var(--dy, 0px))) rotate(calc((1 - var(--cp)) * var(--rot, 0deg))); transition: opacity .18s linear, transform .18s linear, background-color .5s var(--ease-out), border-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.chip-f:not(.is-key) { padding-right: 12px; }
.chip-f::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--fg-muted); }
.sev__lane--safety .chip-f::before { background: var(--blue-fill); box-shadow: none; }
.sev__lane--major .chip-f::before { background: var(--ink); box-shadow: none; }
.sev__lane--maint .chip-f::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* keyed: the 8 that carry the negotiation stand out, the rest step back; each key has an empty slot for my call */
.sev.is-keyed .chip-f:not(.is-key) { opacity: calc(var(--cp) * .34); }
.sev.is-keyed .chip-f.is-key { border-color: var(--blue-fill); box-shadow: 0 12px 24px -16px rgba(40, 82, 229, .7); }
.vd { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: transparent; box-shadow: inset 0 0 0 1px transparent; transition: color .35s var(--ease-out) .1s, background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .45s var(--ease-out); }
.sev.is-armed.is-keyed .chip-f.is-key:not(.is-called) .vd { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-fill) 55%, transparent); background-image: repeating-linear-gradient(90deg, transparent 0 4px, color-mix(in srgb, var(--blue-fill) 10%, transparent) 4px 8px); }
/* my call lands: repair in ink, credit in blue with the amount, let it go struck through */
.chip-f.is-called .vd, :root:not(.cine-js) .chip-f.is-key .vd, .sev:not(.is-armed) .chip-f.is-key .vd { color: #FFFFFF; animation: vd-stamp .45s var(--ease-out); }
.chip-f.is-called[data-v="repair"] .vd, .sev:not(.is-armed) .chip-f[data-v="repair"] .vd { background: var(--ink); color: var(--paper); }
.chip-f.is-called[data-v="credit"], .sev:not(.is-armed) .chip-f[data-v="credit"] { background: color-mix(in srgb, var(--blue-fill) 10%, var(--chip-bg)); }
.chip-f.is-called[data-v="credit"] .vd, .sev:not(.is-armed) .chip-f[data-v="credit"] .vd { background: var(--blue-fill); color: #FFFFFF; }
.chip-f.is-called[data-v="let-go"] .vd, .sev:not(.is-armed) .chip-f[data-v="let-go"] .vd { background: transparent; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip-f[data-v="let-go"]::after { content: ""; position: absolute; left: 22px; right: 76px; top: 50%; height: 1.5px; background: var(--fg-muted); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease-out) .1s; }
.chip-f.is-called[data-v="let-go"]::after, .sev:not(.is-armed) .chip-f[data-v="let-go"]::after { transform: scaleX(1); }
.chip-f.is-called[data-v="let-go"], .sev:not(.is-armed) .chip-f[data-v="let-go"] { color: var(--fg-muted); border-color: var(--line-strong); box-shadow: none; }
@keyframes vd-stamp { 0% { transform: scale(1.35); } 60% { transform: scale(.94); } 100% { transform: none; } }
/* the tally: my three piles, counted as the calls land */
.sev__tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); margin-top: clamp(16px, 2vw, 24px); }
.tally { display: grid; gap: 4px; margin: 0; padding: 12px clamp(12px, 1.4vw, 18px) 14px; background: var(--chip-bg); border-top: 3px solid var(--ink); transition: opacity .4s; }
.tally--credit { border-top-color: var(--blue-fill); }
.tally--let-go { border-top-color: var(--line-strong); }
.tally b { font-weight: 300; font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tally--credit b { color: var(--blue-text); }
.tally span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.sev.is-armed .tally:not(.is-on) { opacity: .4; }
.is-failsafe .chip-f { opacity: 1 !important; transform: none !important; }
.is-failsafe .chip-f.is-key .vd { color: #FFFFFF; }
/* 2026-09-30, toned down: the 17 findings that don't carry the negotiation land as small dots at every width (the lane
   counts still say 7, 5, 9 and 4; the full report is a drawer away), so the eye goes straight to the 8 that do */
.sev--dots .sev__lane ul { align-items: center; }
.sev--dots .chip-f:not(.is-key) { width: 11px; height: 11px; min-height: 0; padding: 0; gap: 0; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; background: color-mix(in srgb, var(--ink) 16%, transparent); border: 0; }
.sev--dots .chip-f:not(.is-key)::before { display: none; }
.sev--dots .sev__lane--safety .chip-f:not(.is-key) { background: color-mix(in srgb, var(--blue-fill) 45%, transparent); }
.sev--dots .sev__lane--major .chip-f:not(.is-key) { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.stop--6 .badge--example { flex: none; }
/* scroll-lit statements (data-lit): each word goes from 14% to full ink as the line crosses the screen */
[data-lit] .wi { opacity: clamp(.14, calc(.14 + (var(--lp, 1) * (var(--ln, 1) + 3) - var(--i, 0)) * .86), 1); transition: opacity .25s linear; }
.stop__lines[data-lit] { display: block; max-width: 30ch; margin: 0; font-weight: 300; font-size: clamp(1.625rem, 2.8vw, 2.5rem); line-height: 1.14; letter-spacing: -.025em; text-wrap: balance; }
.stop__lines[data-lit] em { font-family: var(--serif); font-weight: 400; color: var(--accent); letter-spacing: -.01em; }
.is-failsafe [data-lit] .wi { opacity: 1 !important; }
/* the full sample report (drawer) */
.report__full .report__filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 18px; }
.report__meta { display: grid; gap: 8px 24px; margin: 0 0 12px; }
@media (min-width: 760px) { .report__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report__meta div { display: grid; gap: 2px; }
.report__meta dt { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.report__meta dd { font-size: .9375rem; }
.report__sec { border-top: 1px solid var(--rule); }
.report__sec > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; }
.report__sec > summary::-webkit-details-marker { display: none; }
.report__sname { font-weight: 600; }
.report__sform { font-size: 13px; color: var(--fg-muted); }
.report__scount { margin-left: auto; font-size: 13px; color: var(--fg-2); }
.report__items { display: grid; gap: 0; margin: 0 0 12px; padding: 0; list-style: none; }
.finding { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .finding { grid-template-columns: 52px minmax(0, 1fr) 180px; } }
.finding__marks { display: flex; gap: 4px; margin: 0; font-size: 11px; font-weight: 600; }
.finding__marks span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--rule); }
.finding__marks .is-d { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.finding__body { display: grid; gap: 4px; }
.finding__item { font-weight: 600; font-size: .9375rem; }
.finding__loc { font-size: 13px; color: var(--fg-muted); }
.finding__loc span { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; margin-right: 6px; }
.finding__obs, .finding__rei { font-size: .9375rem; line-height: 1.5; color: var(--fg-2); }
.finding__rei { color: var(--fg); }
.finding__sev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; align-content: start; margin: 0; font-size: 13px; font-weight: 500; }
@media (max-width: 899px) { .finding__sev { grid-column: 2; } }
.report__rr { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-text); }
.report__foot, .report__sevnote { padding: 12px 0 4px; }

/* ------------------------------------------------------------------ close it: stops 7 to 10 on one spine (the countdown)
   page JS: --sh (the line's length, to the keys), --sp (0..1 drawn), --hy (the day counter's position); .is-passed on
   each mark as its day goes by. No JS / T0: the line is drawn, every mark lit, no counter. */
.close-act { --spx: 14px; --spad: 44px; padding-top: clamp(48px, 8vh, 96px); }
@media (min-width: 1000px) { .close-act { --spx: 22px; --spad: 76px; } }
.close-act__wrap { position: relative; }
.close-act__wrap > :not(.spine) { margin-left: var(--spad); }
.close-act__label { margin-bottom: 0; }
.spine { position: absolute; left: calc(var(--gutter) + var(--spx)); top: 0; width: 2px; height: var(--sh, calc(100% - 60px)); transform: translateX(-50%); pointer-events: none; }
.spine__track { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.spine__fill { position: absolute; inset: 0; background: var(--blue-fill); transform-origin: 50% 0; transform: scaleY(var(--sp, 1)); }
.spine__dot { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--bone-bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent); transition: background-color .35s, box-shadow .35s, transform .45s var(--ease-out); }
.spine__dot.is-on { background: var(--blue-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-fill) 16%, transparent); }
.spine__head { position: absolute; left: 50%; top: 0; display: none; place-content: center; justify-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-fill); color: #FFFFFF; transform: translate(-50%, calc(var(--hy, 0px) - 50%)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue-fill) 15%, transparent), 0 14px 30px -12px rgba(40, 82, 229, .8); }
.spine__head small { font-size: 8px; font-weight: 600; letter-spacing: .16em; line-height: 1; text-transform: uppercase; opacity: .8; }
.spine__head b { font-size: 15px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.close-act.is-live .spine__head { display: grid; }
:root[data-motion="paused"] .close-act .spine__head, .is-failsafe .close-act .spine__head { display: none; }
@media (max-width: 999px) { .spine__head { width: 34px; height: 34px; } .spine__head small { font-size: 7px; } .spine__head b { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .close-act .spine__head { display: none !important; } }

.stop--c { padding-top: clamp(32px, 5vh, 52px); }
.stop--c .stop__title { font-size: clamp(2.25rem, 4vw, 3.75rem); }
.stop--7, .stop--8 { display: grid; gap: 18px; }
@media (min-width: 1000px) { .stop--7, .stop--8 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(36px, 5vw, 88px); align-items: start; } }
.stop--c .stop__vis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
/* stop 7: the appraisal gap draws; the three roads light in turn */
.gapbars { display: grid; gap: 14px; max-width: 34rem; margin: 4px 0 18px; }
.gapbars__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 14px; margin: 0; }
.gapbars__k { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.gapbars__track { position: relative; display: block; height: 12px; }
.gapbars__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--ink); transform-origin: 0 50%; }
.gapbars__row--low .gapbars__bar { width: 80%; background: color-mix(in srgb, var(--ink) 42%, transparent); }
.gapbars__gap { position: absolute; left: 80%; right: 0; top: 0; bottom: 0; border: 1px dashed var(--blue-fill); border-left: 2px solid var(--blue-fill); }
.gapbars__gap span { position: absolute; right: 0; top: calc(100% + 8px); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--blue-text); }
[data-gapslate] .gapbars__row:first-child .gapbars__bar { transform: scaleX(clamp(0, calc(var(--p, 1) * 3.2), 1)); }
[data-gapslate] .gapbars__row--low .gapbars__bar { transform: scaleX(clamp(0, calc(var(--p, 1) * 3.2 - .7), 1)); }
[data-gapslate] .gapbars__gap { opacity: clamp(0, calc(var(--p, 1) * 3.2 - 1.6), 1); }
.roads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.roads li { --lit: clamp(0, calc((var(--p, 1) - .5 - var(--i, 0) * .14) * 7), 1); display: grid; gap: 6px; align-content: start; padding: 12px 12px 14px; background: color-mix(in srgb, var(--card-bg) calc(var(--lit) * 100%), transparent); border-top: 2px solid color-mix(in srgb, var(--blue-fill) calc(var(--lit) * 100%), var(--rule)); opacity: calc(.3 + .7 * var(--lit)); transform: translateY(calc((1 - var(--lit)) * 10px)); transition: opacity .18s linear, transform .18s linear; }
.roads__k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-text); }
.roads__t { font-size: .875rem; line-height: 1.4; color: var(--fg-2); }
.title-note { margin: 0; font-size: 1.0625rem; line-height: 1.4; padding-left: 14px; border-left: 2px solid var(--blue-fill); }
.title-note em { font-family: var(--serif); color: var(--accent); }
/* stop 8: the deadlines ride the spine; each lights as its day passes, with who owns it */
.dl { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.dl__row { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 58px; padding: 10px 0; border-bottom: 1px solid var(--rule); transition: opacity .4s var(--ease-out); }
.dl__d { display: grid; font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--fg-muted); transition: color .35s; }
.dl__d small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.dl__t { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); }
.dl__who { justify-self: end; min-width: 4.5rem; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-align: center; color: var(--fg-2); transition: background-color .35s, border-color .35s, color .35s; }
.close-act.is-live .dl__row:not(.is-passed) { opacity: .42; }
.dl__row.is-passed .dl__d { color: var(--blue-text); }
.dl__row.is-passed .dl__who { background: var(--blue-fill); border-color: var(--blue-fill); color: #FFFFFF; }
:root:not(.cine-js) .dl__row .dl__who { background: var(--blue-fill); border-color: var(--blue-fill); color: #FFFFFF; }
#countdown-full.is-folded .planner__weeks > :nth-child(n + 3) { display: none; }
.cd-fold { margin-top: 12px; }
/* the closing beat: the closing-day photo opens big; stops 9 and 10 land beside it as chips */
.closing-beat { display: grid; gap: 18px; padding-top: clamp(36px, 5vh, 56px); }
@media (min-width: 1000px) {
  .closing-beat { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto; column-gap: clamp(36px, 5vw, 88px); row-gap: 28px; align-items: start; }
  .closing__photo { aspect-ratio: 4 / 4.6; }
  .closing-beat > .closing { grid-row: 1 / span 2; }
  .closing-beat > .stop--c { padding-top: 0; }
}
.closing { position: relative; }
.closing__photo { aspect-ratio: 4 / 5; }
.closing__photo img { object-position: 50% 45%; transform-origin: 60% 58%; }
.closing__cap { position: absolute; left: 0; right: 0; top: 0; z-index: 2; margin: 0; padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 28px) 64px; background: linear-gradient(to bottom, rgba(11, 11, 12, .66), rgba(11, 11, 12, 0)); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; color: #FFFFFF; opacity: clamp(0, calc(var(--p, 1) * 2.2 - 1.2), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p, 1) * 2.2 - 1.2), 1)) * 12px)); }
.closing__cap em { color: #C9D4FF; }
.closing-beat .stop__head .reel-ticks { display: none; }
.closing-beat .stop__title { font-size: clamp(2.125rem, 3.4vw, 3.25rem); }
.closing-beat .stop__line { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.chips-t { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips-t li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px 6px 11px; border-radius: 999px; background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: .9375rem; line-height: 1.25; color: var(--fg); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), border-color .4s, background-color .4s; }
.chips-t li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--blue-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; transition: background-color .35s; }
.chips-t.is-armed li:not(.is-on) { opacity: .4; transform: translateY(6px); background: transparent; }
.chips-t.is-armed li:not(.is-on)::before { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.chips-t--keys li { border-color: color-mix(in srgb, var(--blue-fill) 40%, transparent); }
.is-failsafe .chips-t.is-armed li { opacity: 1 !important; transform: none !important; }
.wire { margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--blue-fill); font-size: 1rem; line-height: 1.45; color: var(--fg-2); max-width: 40ch; }
.wire strong { display: block; margin-bottom: 2px; font-weight: 500; font-size: 1.125rem; letter-spacing: -.015em; color: var(--fg); }
.wire strong em { font-family: var(--serif); font-weight: 400; color: var(--accent); }
.close-act__fine { margin-top: clamp(20px, 3vh, 32px); }

/* ------------------------------------------------------------------ blocks that glide in with the scroll (--g 0..1) */
[data-glide] { opacity: calc(.12 + .88 * var(--g, 1)); transform: translateY(calc((1 - var(--g, 1)) * 22px)); transition: opacity .16s linear, transform .16s linear; }
.dl__row[data-glide] { transform: translateX(calc((1 - var(--g, 1)) * 14px)); }
.is-failsafe [data-glide] { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ the ending: what happens after you text me */
.textme { margin-top: clamp(64px, 11vh, 128px); }
.next-steps { display: grid; gap: 0; max-width: 30rem; margin: clamp(22px, 3.4vh, 34px) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .4); }
.next-steps li { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--fg-2); font-size: clamp(1rem, 1.25vw, 1.125rem); }
.next-steps__n { font-family: var(--serif); font-style: italic; font-size: 1.3em; line-height: 1; color: var(--accent); }
.next-steps li::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--tm-open, 1) * 1.6 - var(--i, 0) * .3), 1)); }
@media (max-width: 767px) { .textme .next-steps li { padding: 10px 0; } }

/* ------------------------------------------------------------------ phones and narrow windows */
@media (max-width: 899px) {
  .rh-hero__inner { min-height: 0; grid-template-rows: auto auto auto; }
  .rh-hero__frame { height: min(50svh, 118vw); min-height: 0; }
  .rh-road { border-top: 1px solid var(--ink); }
  .rh-road__act { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 10px 0 8px; border-top: 0; border-bottom: 1px solid var(--rule); }
  .rh-road__act::before { display: none; }
  .rh-road ol { gap: 0 14px; }
  .rh-road a { min-height: 32px; padding: 4px 0; font-size: .875rem; }
  .rh-road a span { display: none; }
  /* phones: each act names its first stop only (the header's Stop n/10 list has all ten) */
  .rh-road li:not(:first-child) { display: none; }
  .rh-road__act { padding: 7px 0 5px; }
}
@media (max-width: 999px) {
  .stop { padding-top: clamp(40px, 6vh, 64px); }
  .stop__grid { gap: 18px; }
  /* stop 1 on phones and tablets: his portrait beside the title, the promises under both */
  .stop--1 .stop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-areas: "head vis" "rest rest"; column-gap: 16px; align-items: end; }
  .stop--1 .stop__vis { justify-items: stretch; }
  .portrait { width: 100%; }
  .portrait__photo .film__pause-icon { width: 26px; height: 26px; }
  .portrait__photo .film__pause-icon svg { width: 12px; height: 12px; }
  .stop--1 .stop__line { font-size: 1.0625rem; }
  /* the closing beat: the photo opens across the column (a square crop), then the two stops */
  .closing__photo { aspect-ratio: 1 / 1; }
  .closing__photo img { object-position: 50% 75%; transform-origin: 60% 62%; }
}
@media (max-width: 767px) {
  .stop { padding-top: 36px; }
  .stop__grid { gap: 14px; }
  .stop__head { gap: 10px; }
  .stop__deeper > .drawer > summary { min-height: 46px; }
  .stop__title { font-size: clamp(2.25rem, 10.5vw, 2.875rem); }
  .stop__line { font-size: 1.125rem; }
  .stop__rest { gap: 14px; }
  .ticks .tick { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 8px 10px 9px 9px; align-items: start; }
  .ticks .tick__box { width: 20px; height: 20px; }
  .ticks .tick__box svg { width: 12px; height: 12px; stroke-width: 2.8; }
  .ticks .tick__t { font-size: .875rem; line-height: 1.3; }
  .ticks.is-armed .tick:not(.is-on) { transform: translateY(6px); }
  .approve { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); grid-template-areas: "gauge read" "docs docs"; gap: 10px 14px; padding: 12px; }
  .approve__gauge { grid-area: gauge; }
  .approve__side { display: contents; }
  .approve__read { grid-area: read; align-self: center; }
  .approve .docs { grid-area: docs; }
  .approve__ends { font-size: 8.5px; letter-spacing: .08em; }
  .approve__read b { font-size: 1.375rem; }
  .doc { min-height: 26px; padding: 3px 8px 3px 7px; gap: 6px; font-size: .78125rem; }
  .doc::before { width: 6px; height: 6px; }
  .note__bubble { font-size: 1rem; }
  .stop__tip { font-size: 1rem; }
  .bills__plates { height: 300px; }
  .optslate { gap: 16px; }
  .proof { padding: 20px 0 44px; }
  .results__quote p { max-width: none; }
  .sold-card__photo { aspect-ratio: 2 / 1; }
  .sold-card__cap { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 14px; gap: 4px; }
  .sold-card__who { text-align: left; }
  .results__list li { padding: 12px 8px 12px 0; }
  .results__list li + li { padding-left: 8px; }
  .results__big { font-size: 1.1875rem; white-space: nowrap; }
  .results__list li > p:last-child { font-size: .78125rem; }
  .results__quote p { font-size: 1.0625rem; }
  .sev { padding: 14px 12px; }
  .sev__lanes { gap: 6px; }
  .sev__lane { padding-top: 8px; gap: 6px; }
  .sev__lane ul { gap: 4px; }
  .chip-f { min-height: 26px; gap: 6px; padding: 2px 3px 2px 9px; font-size: 12px; }
  .chip-f:not(.is-key) { padding-right: 9px; }
  .vd { min-height: 20px; padding: 0 7px; font-size: 9.5px; letter-spacing: .06em; }
  .chip-f[data-v="let-go"]::after { left: 17px; right: 62px; }
  .tally { padding: 10px 10px 12px; }
  .tally span { font-size: 9.5px; letter-spacing: .08em; }
  .stop__head--wide .stop__lines[data-lit] { font-size: 1.25rem; }
  .pull__t { font-size: 1.25rem; }
  .stop--6 .pull__who { display: none; }
  .roads { grid-template-columns: 1fr; gap: 4px; }
  .roads li { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 8px; padding: 8px 10px 9px; }
  .gapbars { gap: 10px; margin-bottom: 14px; }
  .closing-beat .stop__title { font-size: 2.125rem; }
  .closing-beat { gap: 12px; }
  .dl__row { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 4px 10px; min-height: 0; padding: 9px 0; }
  .dl__d { font-size: 10px; letter-spacing: .1em; }
  .dl__d small { font-size: 11px; }
  .dl__t { font-size: .9375rem; }
  .dl__who { min-width: 0; padding: 3px 9px; font-size: 11px; }
  .close-act { padding-top: 36px; }
  .stop--c { padding-top: 30px; }
  .stop--7, .stop--8 { gap: 12px; }
  .wire { margin-top: 12px; font-size: .9375rem; }
  .wire strong { font-size: 1.0625rem; }
  .closing-beat .stop__line { font-size: 1rem; }
  .chips-t { margin-top: 10px; gap: 5px; }
  .pull { gap: 8px; }
  .approve .docs { gap: 4px; }
  .results__title { font-size: 1.75rem; }
  .results { gap: 12px; }
  .stop__deeper .drawer__hint { display: none; }
  .closing-beat > .stop--c { padding-top: 22px; }
  .closing__cap { padding-bottom: 44px; font-size: 1.125rem; }
  .chips-t li { min-height: 28px; padding: 4px 10px 4px 8px; font-size: .8125rem; }
  .chips-t li::before { width: 12px; height: 12px; background-size: 9px; }
  .textme { margin-top: 44px; }
}
@media (max-width: 759px) {
  /* stop 6 on phones: each severity lane's name leads its own row; the 17 findings that don't carry the negotiation
     land as small dots (the lane counts still say 7, 5, 9, 4), the 8 that do stay named, so the board fits one screen */
  .sev__lane { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
  .sev__lane ul { display: contents; }
  .sev__k { margin: 0 4px 0 0; min-height: 26px; }
  .chip-f:not(.is-key) { width: 11px; height: 11px; min-height: 0; padding: 0; gap: 0; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; background: color-mix(in srgb, var(--ink) 16%, transparent); border: 0; }
  .chip-f:not(.is-key)::before { display: none; }
  .sev__lane--safety .chip-f:not(.is-key) { background: color-mix(in srgb, var(--blue-fill) 45%, transparent); }
  .sev__lane--major .chip-f:not(.is-key) { background: color-mix(in srgb, var(--ink) 55%, transparent); }
}
@media (max-width: 767px) {
  .rh-hero__frame { height: min(37svh, 96vw); }
  /* stop 5 on phones: the clock beside its seven to-dos */
  .optslate { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; align-items: start; }
  .optslate .option__dial { width: 124px; }
  .optslate .option__num { font-size: 2.5rem; }
  .optslate .option__lbl { max-width: 76px; margin-inline: auto; font-size: 8.5px; letter-spacing: .12em; line-height: 1.35; }
  .optslate .ticks--grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .optslate .ticks--grid .tick { padding: 6px 9px 7px 8px; }
  .optslate .ticks--grid .tick__t { font-size: .8125rem; }
}
@media (max-width: 640px) {
  .bills__plates { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; height: 280px; row-gap: 10px; }
  .bills__diff { grid-column: 1 / -1; }
  .bill__brick { font-size: 10px; padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .buy-hero__films .is-still img { animation: none; }
  .buy-hero__pause { display: none; }
  .ticks.is-armed .tick.is-on .tick__box { animation: none; }
  .chip-f .vd { animation: none !important; }
}

/* ---------- pacing (2026-10-01): the CMA moment's pinned scroll, 2.2 screens on desk and 2.4 on phones (site.css: 150vh
   desk, 140vh phones), so each of its seven beats gets its own moment on a flick (js/ui/cma.js paces them one at a
   time). Armed only: T0 keeps its layout. */
#cma { --cma-travel: 220vh; }
@media (max-width: 767px) { #cma { --cma-travel: 240vh; } }
@supports (height: 1svh) { @media (max-width: 767px) { #cma { --cma-travel: 240svh; } } }

/* ---------- pacing (2026-10-01): the inspection film's scroll (was an inline 240vh): 2.0 screens of pin on desk, 2.5 on
   phones, so each of its five shots gets its moment on a flick (cinema.js paces the film). .is-static stays auto. */
#inspection { --scrub-h: 300vh; }
@media (max-width: 767px) { #inspection { --scrub-h: 350vh; } }
@supports (height: 1svh) { @media (max-width: 767px) { #inspection { --scrub-h: 350svh; } } }