/* css/pages/listed-to-sold.css : Sell, From Listed to SOLD (scroll-story round 2, 2026-09-29; playbook §3.4). Page layout
   only; linked after site.css and unlayered on purpose, so it sits above every site.css layer and the tools' :where()
   styles. Contrast rhythm (white since 2026-09-30, html[data-tone="white"]): white paper is the base, the two 3D
   chapters (Pricing strategy, Every way your home gets seen) sit on the light studio grey (--stage-paper), and three
   ink moments are the accents: the Launch Day stage and its quote (WOW 1), "It sat for months" (the Coleman story, WOW 2)
   and the close (their words on ink, then the shared text-me ending, site.css .textme). Hairlines and glows on ink are
   neutral (241, 240, 237), never bone. .theme-dark re-points the tokens inside each; in dark mode they go one step deeper. His films, one per
   chapter: the hero walk-out at 1301 Coleman (the Coleman payoff shows a still of him at that door), the kitchen (Act I, sticky
   beside the pricing story), the prep (Act II, sticky beside the staging), the listing shoot (a corner film over Launch
   Day's first beat), the call (Act III). The signature: js/scenes/launch.js (#launch). Components: cinematic-guide.md. */

/* ------------------------------------------------------------------ hero: a film frame on bone, then the index card */
/* the film's pause control and the intro's Skip link are light glass chips, not blocks */
.sell-hero__pause { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 0 13px 0 11px; border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); transition: background-color var(--dur-2), border-color var(--dur-2); }
.sell-hero__pause::before { content: ""; position: absolute; inset: -7px -4px; }
.sell-hero__pause .icon { width: 12px; height: 12px; }
@media (max-width: 767px) { .sell-hero__pause { width: 34px; min-height: 34px; padding: 0; } .sell-hero__pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.sell-hero { --chapter-h: 210vh; /* pacing 2026-10-01: 1.1 screens of pin (was 0.8) */ --frame-top: calc(var(--header-h) + 2.6vh); --frame-h: min(58vh, calc(100vh - var(--header-h) - 300px)); }
.sell-hero__frame {
  position: absolute; left: max(var(--gutter), 3vw); right: max(var(--gutter), 3vw); top: var(--frame-top); height: var(--frame-h); z-index: 2;
  box-shadow: 0 0 0 1px rgba(21, 19, 17, calc(.08 * (1 - var(--chapter-close, 0)))), 0 50px 100px -56px rgba(21, 19, 17, calc(.55 * (1 - var(--chapter-close, 0))));
}
.sell-hero__films { position: absolute; inset: 0; transform-origin: 50% 45%; opacity: clamp(0, calc((1 - var(--chapter-close, 0)) * 14), 1); }
.sell-hero__frame { background: var(--paper); }
/* one wide film of him at his listing (1301 Coleman: out the front door, talking); his face sits in the upper third */
.sell-hero__films video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.03) contrast(1.03); }
.sell-hero__copy { position: absolute; left: max(var(--gutter), 3vw); right: max(var(--gutter), 3vw); bottom: clamp(24px, 4.4vh, 52px); z-index: 3; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.sell-hero h1 { font-weight: 300; font-size: clamp(3.25rem, 5.6vw, 6rem); line-height: .92; letter-spacing: -.05em; color: var(--ink); }
.sell-hero h1 .kicker { font-weight: 500; letter-spacing: .3em; color: var(--fg-2); margin-bottom: clamp(12px, 1.6vw, 20px); }
.sell-hero__aside { display: grid; gap: 16px; justify-items: start; }
.sell-hero__lede { max-width: 36ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--fg-2); }
.sell-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sell-hero__ctas .btn--primary { min-height: 50px; padding: 0 26px; }
.sell-hero__book { font-size: 12px; }
.sell-hero__pause:hover { border-color: #fff; background: rgba(255, 255, 255, .2); }
:root[data-motion="paused"] .sell-hero__pause { display: none; }
/* the intro's Skip link sits bottom-right, clear of the H1 (the shared rule puts it bottom-left, on the title) */
.sell-hero .chapter__stage > .skip-pin { left: auto; right: max(var(--gutter), 3vw); min-height: 30px; padding: 0 13px; border-radius: 999px; font-size: 10.5px; letter-spacing: .16em; color: var(--fg-2); background: color-mix(in srgb, var(--paper) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sell-hero .chapter__stage > .skip-pin::after { content: ""; position: absolute; inset: -8px -4px; }
.sell-hero .chapter__stage > .skip-pin:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
/* ...and leaves with the intro: it fades out as the chapter's pin ends, so it never floats over the next section */
.sell-hero:not(.is-static) .chapter__stage > .skip-pin { opacity: clamp(0, calc((.965 - var(--chapter-p, 0)) * 28), 1); transition: opacity .2s linear; }
@media (prefers-reduced-motion: reduce) { .sell-hero__pause { display: none; } }

/* the index card: the seller's line, then the acts (one bone card; the curtains close into it) */
.sell-index { gap: clamp(26px, 4vh, 44px); }
.sell-index__quote { display: grid; justify-items: center; gap: 18px; margin: 0; }
.sell-index__quote blockquote p { max-width: 24ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.3vw, 3.125rem); line-height: 1.16; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.sell-index__who { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }
.sell-index__who .stars, .launch-quote .stars { color: var(--blue-fill); }
.sell-index__full { max-width: 60ch; font-size: .9375rem; color: var(--fg-2); text-align: left; }
.sell-index__full > summary { display: flex; justify-content: center; min-height: 44px; align-items: center; cursor: pointer; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.sell-index__full p { margin-top: 10px; line-height: 1.6; }
.sell-index__toc { display: grid; justify-items: center; gap: 12px; }
.sell-index__toc .caps em { font-family: var(--serif); font-style: italic; letter-spacing: .06em; text-transform: none; font-size: 1.2em; color: var(--blue-text); }
.sell-index__toc ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(620px, calc(100vw - 2 * var(--gutter))); border-top: 1px solid var(--ink); }
.sell-index__toc a { display: flex; justify-content: center; align-items: center; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; color: var(--fg); text-decoration: none; transition: color var(--dur-2), letter-spacing var(--dur-3) var(--ease-out); }
.sell-index__toc a:hover, .sell-index__toc a:focus-visible { color: var(--blue-text); letter-spacing: .02em; }
/* the hold is not still: as the scroll carries on, the three acts light one after another (a blue rule draws under
   each), so the spine of the page is laid out before Act I opens. --chapter-p comes from cinema.js; static = plain. */
.sell-index__toc li { --k: .46; }
.sell-index__toc li:nth-child(2) { --k: .6; }
.sell-index__toc li:nth-child(3) { --k: .74; }
.sell-hero:not(.is-static) .sell-index__toc li { --on: clamp(0, calc((var(--chapter-p, 1) - var(--k)) * 9), 1); }
.sell-hero:not(.is-static) .sell-index__toc a { position: relative; color: color-mix(in srgb, var(--fg) calc(34% + 66% * var(--on, 1)), transparent); }
.sell-hero:not(.is-static) .sell-index__toc a::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--on, 1)); }

/* static (T0, phones, short screens): frame, copy, then the card, stacked */
.sell-hero.is-static .chapter__stage { display: grid; gap: clamp(24px, 4vw, 40px); padding: calc(var(--header-h) + 16px) max(var(--gutter), 3vw) 0; }
.sell-hero.is-static .sell-hero__frame, .sell-hero.is-static .sell-hero__copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
.sell-hero.is-static .sell-hero__frame { height: min(62vh, 640px); }
.sell-hero.is-static .chapter__curtain { display: none; }
.sell-hero.is-static .chapter__card { padding: clamp(56px, 10vh, 104px) 0; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------------ what you can count on */
.count { padding-block: clamp(24px, 3vw, 48px) clamp(40px, 5vw, 72px); }
.count__grid { display: grid; gap: 18px; }
@media (min-width: 1000px) { .count__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; } .count__grid > .caps { padding-top: 30px; } }
.count-on li { font-weight: 300; font-size: clamp(1.375rem, 2.8vw, 2.25rem); letter-spacing: -.035em; }
.count-on li::before { background: var(--ink); }
.count-on li em { position: relative; display: inline-block; }
/* scroll-lit (page JS writes --lit per line, 0 to 1, as it rises through the screen; unset = fully lit, so T0, no JS and
   the fail-safe read as plain type). The accent word lands last; its hairline draws as the line lights. */
.count[data-count-lit] .count-on li { color: color-mix(in srgb, var(--fg) calc(16% + 84% * var(--lit, 1)), transparent); transition: color .12s linear; }
.count[data-count-lit] .count-on li em { color: color-mix(in srgb, var(--accent) calc(10% + 90% * var(--lit-em, var(--lit, 1))), transparent); letter-spacing: calc(-.02em * (1 - var(--lit-em, 1))); }
.count[data-count-lit] .uline { clip-path: inset(-2px calc(100% * (1 - var(--draw, 1))) -2px 0); }
.count[data-count-lit] .count-on li::before { transform: scaleX(var(--rule, 1)); transition: none; }
.uline { position: absolute; left: -2%; right: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.uline path { fill: none; stroke: var(--blue-fill); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.count-on li:nth-child(2) .uline path { transition-delay: .12s; } .count-on li:nth-child(3) .uline path { transition-delay: .24s; } .count-on li:nth-child(4) .uline path { transition-delay: .36s; }

/* ------------------------------------------------------------------ acts: a compact bone title card, then the body */
.act { position: relative; }
.act__card .title-card__title { font-size: clamp(3rem, 7.6vw, 7.5rem); }
.act__body { padding-block: clamp(48px, 7vw, 104px); }
.act__body > .container { display: grid; gap: clamp(22px, 3vw, 36px); }
.act__body > .container + .container { margin-top: clamp(40px, 6vw, 80px); }
.act__main { display: grid; gap: clamp(18px, 2.4vw, 28px); align-content: start; min-width: 0; }
.act__intro { max-width: 30ch; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 300; line-height: 1.28; letter-spacing: -.02em; text-wrap: pretty; }
.act__body p:not([class]), .ask__body > p:not([class]) { max-width: 58ch; font-size: var(--fs-body-guide); line-height: 1.6; }
.act__line { max-width: 52ch; font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.5; padding: 18px 0 6px; }
.act__h2, .act__h3 { font-weight: 300; line-height: 1; letter-spacing: -.045em; }
.act__h2 { font-size: clamp(2.5rem, 5.4vw, 5rem); }
.act__h3 { font-size: clamp(2rem, 3.8vw, 3.5rem); }
.act__h2 em, .act__h3 em, .play__q em, .tool__title em, .launch-sig__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.act__stack { display: grid; gap: clamp(24px, 3vw, 36px); }
.act__links { display: grid; gap: 14px; justify-items: start; }
.act__links .deeper { width: 100%; max-width: none; }
.act__drawers { display: grid; gap: 0; justify-items: start; }
.act__drawers > * { width: min(100%, 880px); }
.act__drawers .deeper { max-width: none; }


/* ---------- why a website can only guess, inside its drawer: the online estimate jitters, is struck through, and
   "Texas is a non-disclosure state." rises. The comps and the range it used to show are the CMA's job now (#cma). */
.pricing-drawer .pricing { background: transparent; }
.pricing-drawer .pseq { background-color: var(--paper-2); }
.pricing__fine { margin-top: 14px; }

/* the header's four lights (Priced, Presented, Negotiated, Sold) sit a touch tighter on narrow phones */
@media (max-width: 419px) { .page--sell .pc-lights__dots { gap: 5px; } }
.papers__tray { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 6px 0 14px; padding: 0; list-style: none; }
.paper { display: grid; gap: 6px; align-content: start; padding: 20px 20px 22px; background: var(--paper-2); }
.paper strong { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--fg); }
.paper span { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-2); }
.paper--new { box-shadow: inset 0 2px 0 var(--blue-fill); }
.checklist { max-width: 46rem; }
.checklist__title { font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.check-group { padding: 18px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--rule); }
.deeper > summary { transition: color var(--dur-2); }
.deeper > summary:hover { color: var(--blue-text); }
.deeper[open] > :not(summary) { animation: deeper-in var(--dur-4) var(--ease-out) both; }
@keyframes deeper-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ LAUNCH DAY (the signature; js/scenes/launch.js)
   An ink stage: near-black with a soft studio glow where the objects stand and a fall-off to the edges (tonal depth),
   so the lit porcelain and polished silver pop like a product film. */
.launch-sig { position: relative; background: #121110; color: var(--ink); }
.launch-sig__stage { position: relative; }
/* The studio glow sits UNDER the page's WebGL canvas (z-index 1): a sticky backdrop with no z-index, so the lit set draws
   over it and the stage (z-index 2, transparent) carries the type above both. Static (no pin): the stage wears it. */
.launch-sig { --launch-glow: radial-gradient(ellipse 50% 58% at 64% 47%, rgba(241, 240, 237, .085), rgba(241, 240, 237, .03) 52%, transparent 76%), linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 24%, transparent 76%, rgba(0, 0, 0, .3)); }
.launch-sig:not(.is-desk) { --launch-glow: radial-gradient(ellipse 80% 42% at 50% 50%, rgba(241, 240, 237, .08), rgba(241, 240, 237, .025) 55%, transparent 80%), linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 26%, transparent 74%, rgba(0, 0, 0, .28)); }
.launch-sig.is-pinned .launch-sig__pin::before { content: ""; position: sticky; top: 0; display: block; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; background-image: var(--launch-glow); pointer-events: none; }
.launch-sig.is-static .launch-sig__stage { background-image: var(--launch-glow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .launch-sig { background-color: #080807; --paper: #080807; --paper-2: #141312; } }
:root[data-theme="dark"] .launch-sig { background-color: #080807; --paper: #080807; --paper-2: #141312; }
.launch-sig .caps { color: var(--muted); }
.launch-sig__title em { color: var(--blue-text); }
.launch-sig__head { display: grid; gap: 12px; align-content: start; }
.launch-sig__title { font-weight: 300; font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1; letter-spacing: -.045em; }
.launch-sig__lede { max-width: 32ch; font-size: 1rem; line-height: 1.55; color: var(--fg-2); }
.launch-sig__gl { position: relative; background: transparent !important; overflow: visible !important; }
.launch-sig__frame { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 6px; transform-origin: 50% 50%; transition: opacity .2s linear; }
.launch-sig__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* the poster sits under the film, so the frame is never an empty box while a frame decodes (after a fast scroll back) */
.launch-sig__frame { background: #1B1A18 url("../../assets/films/listings/4571-lake-breeze-scrub-poster.jpg") 50% 50% / cover no-repeat; }
.launch-sig.is-phone .launch-sig__frame, .launch-sig:not(.is-desk) .launch-sig__frame { background-position: 47% 50%; }
/* T1: the lifted frame reads as glass (a sheen and a bright rim), from the same --glass the WebGL faces use */
.launch-sig__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--glass, 0); background: linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, .05) 52%, transparent 62%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1.5px rgba(143, 148, 157, .6); }
.launch-sig__frame.is-handed { opacity: 0; }
.launch-sig__beats { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.launch-sig__beats li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 40%, transparent); transition: color .5s; }
.launch-sig__beats li i { position: relative; height: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.launch-sig__beats li i b { position: absolute; inset: 0; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--f, 0)); }
.launch-sig__beats li.is-on { color: var(--ink); }
.launch-sig__soldline { display: none; }
.launch-sig__chans { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.launch-sig__chans li { border-bottom: 1px solid var(--rule); }
.launch-sig__chans button { display: grid; gap: 4px; width: 100%; padding: 12px 0 13px 18px; text-align: left; color: var(--fg-2); position: relative; transition: color .35s; }
.launch-sig__chans button::before { content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .35s, border-color .35s; }
.launch-sig__chans button.is-on, .launch-sig__chans button:hover, .launch-sig__chans button:focus-visible { color: var(--ink); }
.launch-sig__chans button.is-on::before { background: var(--blue-fill); border-color: var(--blue-fill); }
.launch-sig__chan { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.launch-sig__line { font-size: .9375rem; line-height: 1.45; max-width: 40ch; }
/* SOLD: a porcelain plate with the word pressed into it in ink (the WebGL plate's twin for T1, T0 and the text layer) */
.launch-sig__sold { margin: 0; line-height: 1; text-align: center; }
.launch-sig__sold span {
  display: inline-block; padding: .1em .5em .2em; border-radius: 12px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(3.25rem, 6.2vw, 5.75rem); letter-spacing: -.01em; line-height: 1; color: #15171B;
  background: linear-gradient(180deg, #FBFAF8 0%, #F0EEE9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 4px rgba(21, 23, 27, .08), 0 0 0 1px rgba(241, 240, 237, .18), 0 2px 3px rgba(0, 0, 0, .35), 0 34px 56px -24px rgba(0, 0, 0, .85), 0 0 90px -20px rgba(241, 240, 237, .16);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(21, 23, 27, .3);
}
.launch-sig__sold span::after { content: ""; display: block; width: .9em; height: 2px; margin: .02em auto 0; border-radius: 2px; background: var(--blue-fill); }
.launch-sig__credits { display: grid; gap: 14px; align-content: start; }
.launch-sig__facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--ink); }
.launch-sig__facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.launch-sig__facts dt { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); }
.launch-sig__facts dd { margin: 0; font-size: 1rem; line-height: 1.4; }
.launch-sig__status { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-style: italic; font-size: 1.375rem; color: var(--blue-text); }
/* his face with the credit: the listing agent, in person */
.launch-sig__me { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #121110, 0 0 0 3px var(--blue-fill); }
.launch-sig__soldline em { display: flex; align-items: center; gap: 10px; }
.launch-sig__soldline .launch-sig__me { width: 32px; height: 32px; }
.launch-sig__chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; }
.launch-sig__chips.is-on { opacity: 1; }
.launch-sig__chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; transition: color .35s; will-change: transform; }
.launch-sig__chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; transition: opacity .35s, background-color .35s, transform .35s; }
.launch-sig__chip.is-active { color: var(--ink); }
.launch-sig__chip.is-active::before { opacity: 1; background: var(--blue-fill); transform: scale(1.3); }
.launch-sig__skip { position: absolute; left: max(var(--gutter), 4vw); right: auto; bottom: 16px; justify-self: start; align-self: end; width: auto; z-index: 8; min-height: 30px; padding: 0 13px; border-radius: 999px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2) !important; background: rgba(241, 240, 237, .06) !important; border: 1px solid rgba(241, 240, 237, .22) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: inline-flex; align-items: center; text-decoration: none; }
.launch-sig__skip::after { content: ""; position: absolute; inset: -8px -4px; }

/* desk (>= 900 px): the copy column left, the stage right; JS moves the channels, the credits and SOLD into it */
.launch-sig.is-desk .launch-sig__stage {
  display: grid; grid-template-columns: minmax(0, 29fr) minmax(0, 69fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 2vw;
  padding: calc(var(--header-h) + 4.5vh) max(var(--gutter), 4vw) 5vh;
}
.launch-sig.is-desk .launch-sig__head { grid-column: 1; grid-row: 1; }
.launch-sig.is-desk .launch-sig__side { grid-column: 1; grid-row: 2; position: relative; margin-top: clamp(20px, 4vh, 44px); }
.launch-sig.is-desk .launch-sig__gl { grid-column: 2; grid-row: 1 / span 2; container-type: size; min-height: 440px; }
.launch-sig.is-desk .launch-sig__frame {
  --fw: min(76cqw, calc((100cqh - 200px) * 1.7778));
  position: absolute; width: var(--fw); left: calc(50cqw - var(--fw) / 2); top: calc(44cqh - var(--fw) * .28125);
}
.launch-sig.is-desk.is-static .launch-sig__frame { --fw: min(70cqw, calc((100cqh - 190px) * 1.7778)); top: calc(40cqh - var(--fw) * .28125); }
.launch-sig.is-desk.is-static .launch-sig__sold { position: absolute; left: 0; right: 0; top: calc(40cqh + min(70cqw, calc((100cqh - 190px) * 1.7778)) * .28125 + 22px); z-index: 3; }
.launch-sig.is-desk .launch-sig__chans button { padding-block: 10px 11px; }
/* pinned desk: only the lit channel shows its line (the list stays a calm column of five names) */
.launch-sig.is-pinned.is-desk .launch-sig__line { display: block; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s var(--ease-out); }
.launch-sig.is-pinned.is-desk .launch-sig__chans button.is-on .launch-sig__line,
.launch-sig.is-pinned.is-desk .launch-sig__chans button:focus-visible .launch-sig__line { max-height: 5em; opacity: 1; }
.launch-sig.is-desk .launch-sig__after { display: none; }

/* pinned (motion on): 375vh on desk, 440svh on phones (pacing 2026-10-01: room for each paced beat); the side column
   cross-fades per beat */
.launch-sig.is-pinned.is-desk .launch-sig__pin { height: 375vh; }
.launch-sig.is-pinned.is-phone .launch-sig__pin { height: 440vh; height: 440svh; }
.launch-sig.is-pinned .launch-sig__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 2; }
.launch-sig.is-pinned .launch-sig__side > * { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.launch-sig.is-pinned[data-beat="1"] .launch-sig__beats,
.launch-sig.is-pinned[data-beat="2"] .launch-sig__chans,
.launch-sig.is-pinned.is-desk[data-beat="3"] .launch-sig__credits,
.launch-sig.is-pinned.is-phone[data-beat="3"] .launch-sig__soldline { opacity: 1; transform: none; pointer-events: auto; }
.launch-sig.is-pinned .launch-sig__side > :focus-within { opacity: 1; transform: none; pointer-events: auto; } /* keyboard focus always shows */
.launch-sig.is-pinned .launch-sig__gl { perspective: 1600px; }
/* T1: the DOM listing and the panes share one 3D context, so the inner pair sorts in front of the listing (as in WebGL) */
.launch-sig.is-pinned .launch-sig__gl:not(.is-live) { transform-style: preserve-3d; }
/* SOLD while pinned: the DOM plate stands where the WebGL plate stands (JS sets left/top) and rises with --sold; under
   WebGL it stays as the text layer only */
.launch-sig.is-pinned .launch-sig__sold { position: absolute; left: 50%; top: 82%; z-index: 3; transform: translate(-50%, -50%); pointer-events: none; }
.launch-sig.is-pinned .launch-sig__sold span { opacity: var(--sold, 0); transform: translateY(calc((1 - var(--sold, 0)) * 36px)) rotateX(calc((1 - var(--sold, 0)) * 50deg)); transform-origin: 50% 100%; }
.launch-sig.is-gl .launch-sig__sold { opacity: 0; }
/* T1 fan (CSS 3D): four panes with the same poses as the WebGL panes, each with its own picture (one atlas) */
.launch-sig__fan { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.launch-sig__fan[hidden] { display: none; }
.launch-sig__pane { position: absolute; background: #1B1A18; border-radius: 6px; box-shadow: 0 0 0 1px rgba(143, 148, 157, .7), 0 -1px 0 1px rgba(234, 237, 241, .55), 0 34px 60px -26px rgba(0, 0, 0, .85), 0 10px 20px -10px rgba(0, 0, 0, .55); pointer-events: auto; will-change: transform; transition: box-shadow .4s, filter .5s var(--ease-out); backface-visibility: hidden; }
.launch-sig__fan:has(.is-active) .launch-sig__pane:not(.is-active) { filter: brightness(.62) saturate(.9) blur(1.2px); }
/* the glass: one narrow strip-softbox streak (no wash) and a fine dark seam inside the chamfer */
.launch-sig__pane::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .16) 63%, rgba(255, 255, 255, 0) 66%); box-shadow: inset 0 0 0 1px rgba(10, 10, 12, .55); }
.launch-sig__pane i { position: absolute; display: block; border-radius: inherit; background-image: url("../../assets/stills/launch-channels.jpg"); background-repeat: no-repeat; }
.launch-sig__pane.is-active { box-shadow: 0 0 0 1px var(--blue-fill), 0 -1px 0 1px rgba(234, 237, 241, .6), 0 44px 70px -26px rgba(0, 0, 0, .9), 0 12px 24px -10px rgba(0, 0, 0, .55); }
/* T1's floor: the same lacquer floor line as the WebGL stage (JS sets --floor-y and fades it in with the lift), a soft
   light pool on it; the SOLD plate stands on it with its reflection */
.launch-sig.is-pinned .launch-sig__gl:not(.is-live)::before { content: ""; position: absolute; left: -10%; right: -10%; top: var(--floor-y, 100%); height: 46%; pointer-events: none; opacity: var(--floor-a, 0); background: radial-gradient(ellipse 42% 34% at 50% 6%, rgba(241, 240, 237, .085), rgba(241, 240, 237, .03) 48%, transparent 74%); transform: translateZ(-60px); }
.launch-sig.is-pinned .launch-sig__gl.is-live::before { content: none; }
:is(.launch-sig.is-pinned, .launch-sig.is-desk.is-static) .launch-sig__sold span { -webkit-box-reflect: below 1px linear-gradient(transparent 52%, rgba(255, 255, 255, .14)); }
/* WebGL owns the stage while it draws; the stage sits above the page canvas (z-index 2) with a clear background */
.launch-sig__gl.is-live .launch-sig__fan { display: none; }

/* phones, pinned (moving): the same three beats in a portrait stage: the title, the stage (a 4:5 frame that lifts into
   the fan), then one line under it (the beats, the lit channel, the credit); the facts follow the pin */
/* the phone bar steps aside over this section ([data-bar-avoid]), so the stage keeps its lower band for the set */
.launch-sig.is-phone .launch-sig__stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: calc(var(--header-h) + 14px) var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.launch-sig.is-phone .launch-sig__head { gap: 6px; padding-right: 76px; }
.launch-sig.is-phone .launch-sig__gl { margin-inline: calc(-1 * var(--gutter)); min-height: 0; container-type: size; }
.launch-sig.is-phone .launch-sig__frame { --fw: min(calc(100cqw - 2 * var(--gutter) - 32px), calc(94cqh * .8)); position: absolute; width: var(--fw); aspect-ratio: 4 / 5; left: calc(50cqw - var(--fw) / 2); top: calc(47cqh - var(--fw) * .625); }
.launch-sig.is-phone .launch-sig__side { position: relative; min-height: 64px; }
@media (max-width: 374px) { .launch-sig.is-phone .launch-sig__side { min-height: 84px; } } /* the longest channel line wraps to three */
.launch-sig.is-phone .launch-sig__chips { display: none; }
.launch-sig.is-phone .launch-sig__chans { border-top: 0; display: grid; }
.launch-sig.is-phone .launch-sig__chans li { grid-area: 1 / 1; border: 0; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out); }
.launch-sig.is-phone .launch-sig__chans li:has(.is-on), .launch-sig.is-phone .launch-sig__chans li:focus-within { opacity: 1; pointer-events: auto; }
.launch-sig.is-phone .launch-sig__chans:not(:has(.is-on))::before { content: attr(aria-label); grid-area: 1 / 1; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); padding-top: 2px; }
.launch-sig.is-phone .launch-sig__chans button { padding: 0 0 0 18px; gap: 4px; }
.launch-sig.is-phone .launch-sig__chans button::before { top: 4px; }
.launch-sig.is-phone .launch-sig__line { font-size: .875rem; }
.launch-sig.is-phone .launch-sig__soldline { display: grid; gap: 2px; }
.launch-sig.is-phone .launch-sig__soldline .caps { font-size: 11px; letter-spacing: .18em; }
.launch-sig.is-phone .launch-sig__soldline em { font-family: var(--serif); font-style: italic; font-size: 1.3125rem; line-height: 1.25; color: var(--blue-text); }
.launch-sig.is-phone .launch-sig__sold span { font-size: clamp(2.5rem, 12vw, 3.5rem); border-radius: 10px; }
.launch-sig.is-phone .launch-sig__skip { left: auto; right: var(--gutter); top: calc(var(--header-h) + 14px); bottom: auto; }
.launch-sig.is-phone .launch-sig__after { padding-block: 28px clamp(40px, 7vh, 72px); }
/* phones, pinned: the address and "I was the listing agent." already land with SOLD in the stage (the sold line), so the
   facts that follow the pin carry only the facts (the credits appear once) */
.launch-sig.is-pinned.is-phone .launch-sig__credits > .caps, .launch-sig.is-pinned.is-phone .launch-sig__status { display: none; }
@media (max-height: 700px) { .launch-sig.is-phone .launch-sig__lede { display: none; } }

/* phones and desk, static (T0: reduced motion or motion paused): nothing pins */
.launch-sig:not(.is-desk):not(.is-phone) .launch-sig__stage { display: grid; align-content: center; gap: 16px; padding: calc(var(--header-h) + 18px) var(--gutter) 22px; }
.launch-sig:not(.is-desk):not(.is-phone) .launch-sig__frame { aspect-ratio: 4 / 5; width: min(100%, 420px); margin-inline: auto; }
.launch-sig:not(.is-desk) .launch-sig__beats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.launch-sig:not(.is-desk) .launch-sig__beats li { grid-template-columns: 1fr; gap: 8px; font-size: 10.5px; letter-spacing: .16em; }
.launch-sig:not(.is-desk) .launch-sig__beats li i { height: 2px; }
.launch-sig:not(.is-desk) .launch-sig__title { font-size: clamp(2rem, 9vw, 2.75rem); }
.launch-sig__after { display: grid; gap: clamp(36px, 6vh, 56px); padding-block: 8px clamp(40px, 7vh, 72px); }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans { grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-top: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans::-webkit-scrollbar { display: none; }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans li { scroll-snap-align: start; border: 0; background: var(--paper-2); border-top: 3px solid var(--ink); }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans button { padding: 14px 16px 18px; gap: 8px; color: var(--ink); cursor: default; }
/* each card carries its channel's own picture (the MLS card the listing film; the others their atlas cell) under glass */
.launch-sig.is-static:not(.is-desk) .launch-sig__chans button::before { position: static; display: block; width: 100%; height: auto; border: 0; border-radius: 4px; aspect-ratio: 16 / 9; background: url("../../assets/films/listings/4571-lake-breeze-scrub-poster.jpg") 47% 50% / cover no-repeat; margin-bottom: 6px; box-shadow: 0 0 0 1px rgba(199, 203, 210, .45), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 18px 30px -18px rgba(0, 0, 0, .8), 0 6px 12px -8px rgba(0, 0, 0, .5); }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans li:nth-child(2) button::before { background: url("../../assets/stills/launch-channels.jpg") 0% 50% / 284.444% auto no-repeat; }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans li:nth-child(3) button::before { background: url("../../assets/stills/launch-channels.jpg") 51.809% 15.83% / 311.111% auto no-repeat; }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans li:nth-child(4) button::before { background: url("../../assets/stills/launch-channels.jpg") 58.659% 90.22% / 249.582% auto no-repeat; }
.launch-sig.is-static:not(.is-desk) .launch-sig__chans li:nth-child(5) button::before { background: url("../../assets/stills/launch-channels.jpg") 96.403% 16.65% / 331.238% auto no-repeat; }
.launch-sig.is-static:not(.is-desk) .launch-sig__line { color: var(--fg-2); }
.launch-sig:not(.is-desk) .launch-sig__end { display: grid; gap: 22px; }
.launch-sig.is-static .launch-sig__stage { height: auto; }
.launch-sig.is-static.is-desk .launch-sig__stage { padding-block: clamp(56px, 8vw, 104px); grid-template-rows: auto auto; }
.launch-sig.is-static.is-desk .launch-sig__gl { min-height: 0; height: min(64vh, 640px); }
.launch-sig.is-static.is-desk .launch-sig__side { display: grid; gap: 28px; }
.launch-sig.is-static .launch-sig__beats li { color: var(--ink); }
.launch-sig.is-static .launch-sig__sold span { opacity: 1; transform: none; }
.launch-sig.is-static .launch-sig__chans button { cursor: default; }
@media (prefers-reduced-motion: reduce) { .launch-sig__sold span { transform: none !important; opacity: 1 !important; } }
:root[data-motion="paused"] .launch-sig__sold span { transform: none !important; opacity: 1 !important; }
@media (max-width: 899px) { .launch-sig__skip { bottom: calc(var(--bar-h, 64px) + 14px + env(safe-area-inset-bottom)); } }
.launch-sig__skip { transition: opacity .4s var(--ease-out), visibility 0s linear 0s; }
/* SOLD has landed (desk and phones): the finale keeps no stray UI, and the link leaves the tab order with it */
.launch-sig.is-sold .launch-sig__skip { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease-out), visibility 0s linear .4s; }
@media (min-width: 900px) and (max-height: 820px) {
  .launch-sig.is-desk .launch-sig__credits { gap: 10px; }
  .launch-sig.is-desk .launch-sig__facts > div { padding: 6px 0; }
  .launch-sig.is-desk .launch-sig__facts dd { font-size: .9375rem; line-height: 1.3; }
  .launch-sig.is-desk .launch-sig__status { font-size: 1.1875rem; }
}

/* ------------------------------------------------------------------ the ink moments (contrast rhythm, three): Launch Day and
   its quote, "It sat for months" (the Coleman story) and the shared text-me ending sit on near-black #121110
   (.theme-dark re-points the tokens inside, so every component reads right; data-header="night" darkens the header
   over them), with bone between them. In dark mode they go one step deeper, so they still read as moments. */
.launch-quote-band { position: relative; background: #121110; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .launch-quote-band { background: #080807; --paper: #080807; --paper-2: #141312; } }
:root[data-theme="dark"] .launch-quote-band { background: #080807; --paper: #080807; --paper-2: #141312; }
.launch-quote-band .caps { color: var(--muted); }
/* the seller's words close the stage: the same ink, a hairline of light where the stage ends */
.launch-quote-band { border-top: 1px solid rgba(241, 240, 237, .06); }
.launch-quote-band .stars { color: #8EA4FF; }
/* the playbook: paper plates stacking on bone, the Push card in his blue, and him on a call beside them */
.plays-band { margin-block: clamp(48px, 7vw, 104px); }
.act__body > .plays-band:last-child { margin-bottom: 0; }

.launch-quote { display: grid; justify-items: center; gap: 12px; margin: 0 auto; padding-block: clamp(28px, 3.6vw, 52px) clamp(36px, 4.2vw, 64px); text-align: center; }
.launch-quote blockquote p { max-width: 30ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.launch-quote figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }
.launch-quote__k { margin: 0; color: var(--fg-2); }
.launch-quote__full { max-width: 62ch; text-align: left; font-size: .9375rem; color: var(--fg-2); }
.launch-quote__full > summary { display: flex; justify-content: center; min-height: 44px; align-items: center; cursor: pointer; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.launch-quote__full p { margin-top: 10px; line-height: 1.6; }

/* ------------------------------------------------------------------ Act III: playbook deck + inspection cards */
.plays { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .plays { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .plays__side { position: sticky; top: calc(var(--header-h) + 5vh); } }
.plays__side { display: grid; gap: 14px; }
.plays__hint { font-size: 1rem; color: var(--fg-2); max-width: 34ch; }
.plays__film { width: min(100%, 300px); aspect-ratio: 4 / 5; margin: 10px 0 0; border-radius: 4px; }
.plays__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
@media (min-width: 900px) { .plays__film { width: auto; height: min(42vh, 400px); justify-self: start; } }
.play .caps { color: var(--fg-2); }
.stack-card--blue.play .caps { color: rgba(255, 255, 255, .82); }
.play__q { font-weight: 300; font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.play__a { margin-top: auto; max-width: 48ch; font-size: 1.0625rem; line-height: 1.6; }
.stack-card.play { min-height: min(24vh, 220px); }
.inspect { display: grid; gap: clamp(20px, 3vw, 32px); }
.inspect__head { display: grid; gap: 14px; }
.inspect__head p { max-width: 52ch; color: var(--fg-2); line-height: 1.55; }
.inspect__list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.inspect__list li { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; background: var(--paper-2); box-shadow: inset 3px 0 0 var(--blue-fill); }
.inspect__call { font-weight: 300; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.2; }
.inspect__list li p:last-child { font-size: var(--fs-label); line-height: 1.55; color: var(--fg-2); }
.act__closing { margin-top: clamp(20px, 3vw, 32px); }
.closing-list { display: grid; margin: 4px 0 14px; border-top: 1px solid var(--ink); }
.closing-list > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.closing-list dt { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); padding-top: 3px; }
.closing-list dd { margin: 0; color: var(--fg); }


/* ------------------------------------------------------------------ IT SAT FOR MONTHS (WOW 2, ink; page JS initSat)
   The Coleman listing film holds (sticky) under an Expired tag, frosted and gray, while the story holds; each part of the
   refresh clears the frost a step as it rises past it; on the last one the film plays in full colour, the tag walks
   Active, Pending, Sold, and the 30 counts in his line. --frost 1 to 0 and the tag are written by JS; without JS the end
   state (clear, Sold) shows. */
.sat { position: relative; background: #121110; color: var(--ink); padding-block: clamp(56px, 7vw, 100px) clamp(36px, 4.4vw, 64px); border-top: 1px solid rgba(241, 240, 237, .06); }
.sat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 42% at 30% 46%, rgba(241, 240, 237, calc(.03 + .05 * (1 - var(--frost, 0)))), transparent 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sat { background: #080807; --paper: #080807; --paper-2: #141312; } }
:root[data-theme="dark"] .sat { background: #080807; --paper: #080807; --paper-2: #141312; }
.sat .caps { color: var(--muted); }
.sat__grid { position: relative; display: grid; gap: clamp(24px, 4vw, 72px); }
.sat__frame { aspect-ratio: 16 / 10; margin: 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(241, 240, 237, .1), 0 60px 110px -50px rgba(0, 0, 0, .95); }
.sat__frame video { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover;
  filter: grayscale(calc(var(--frost, 0) * .9)) blur(calc(var(--frost, 0) * 13px)) brightness(calc(1 - var(--frost, 0) * .2)) contrast(calc(1 - var(--frost, 0) * .08)); }
.sat__frost { position: absolute; inset: 0; pointer-events: none; opacity: var(--frost, 0); background: linear-gradient(122deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .11) 64%, rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sat__tag { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #F1F0ED; background: rgba(12, 12, 12, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(241, 240, 237, .16); transition: background-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.sat__tag i { width: 7px; height: 7px; border-radius: 50%; background: #2852E5; box-shadow: 0 0 0 3px rgba(40, 82, 229, .25); transition: background-color .4s, box-shadow .4s; }
.sat__tag b { font-weight: 500; }
.sat__tag.is-expired i { background: #8B8B88; box-shadow: none; }
.sat__tag.is-active i { background: #F1F0ED; box-shadow: 0 0 0 3px rgba(241, 240, 237, .18); }
.sat__tag.is-sold { color: #15171B; background: linear-gradient(180deg, #FBFAF8, #EFEDE8); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 26px -12px rgba(0, 0, 0, .8); }
.sat__tag b.is-swap { animation: sat-swap .5s var(--ease-out); }
@keyframes sat-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sat__copy { display: grid; align-content: start; }
.sat__head { display: grid; gap: 16px; padding-bottom: clamp(24px, 6vh, 64px); }
.sat__title { font-weight: 300; font-size: clamp(2.25rem, 3.8vw, 3.75rem); line-height: 1; letter-spacing: -.045em; max-width: 14ch; }
.sat__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--blue-text); }
.sat__story { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.45; color: var(--fg-2); max-width: 30ch; }
.sat__steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(241, 240, 237, .5); counter-reset: sat; }
.sat__steps li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(241, 240, 237, .12); font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 300; line-height: 1.3; letter-spacing: -.015em;
  color: color-mix(in srgb, var(--ink) calc(34% + 66% * var(--on, 1)), transparent); }
.sat__steps li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); background: color-mix(in srgb, var(--blue-fill) calc(100% * var(--on, 1)), transparent); border-color: color-mix(in srgb, var(--blue-fill) calc(100% * var(--on, 1)), rgba(241, 240, 237, .5)); transform: translateY(1px); }
.sat__steps li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--blue-text); transform-origin: left; transform: scaleX(var(--on, 1)); opacity: .7; }
.sat__result { display: grid; gap: 14px; padding-top: clamp(28px, 6vh, 64px); }
.sat__line { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.35; max-width: 24ch; letter-spacing: -.015em; }
.sat__num { display: block; margin: 2px 0 6px; font-weight: 200; font-size: clamp(5rem, 9vw, 8.5rem); line-height: .82; letter-spacing: -.06em; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.sat__facts { font-size: 13px; letter-spacing: .06em; color: var(--fg-2); }
.sat__facts em { font-family: var(--serif); font-style: italic; font-size: 1.3em; letter-spacing: 0; color: var(--ink); }
/* desk: the frame holds in the middle of the screen while the story scrolls past it; each step gets its own beat */
@media (min-width: 900px) {
  .sat__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .sat__media { position: sticky; top: max(calc(var(--header-h) + 24px), calc(50vh + var(--header-h) / 2 - 17vw)); }
  .sat.is-armed .sat__steps li { padding-block: clamp(20px, 5vh, 56px); }
  .sat.is-armed .sat__head { padding-top: 2vh; }
  .sat.is-armed .sat__result { padding-top: 10vh; padding-bottom: 6vh; }
}
/* phones: the head, then the frame, then the steps, compact enough that the frame is still on screen while each step
   lights under it; then his line and the 30 */
@media (max-width: 899px) {
  .sat { padding-top: 56px; }
  .sat__copy { display: contents; }
  .sat__head { order: 1; padding-bottom: 0; }
  .sat__media { order: 2; }
  .sat__steps { order: 3; }
  .sat__result { order: 4; padding-top: 12px; }
  .sat__tag { left: 10px; top: 10px; min-height: 28px; padding: 0 12px 0 10px; font-size: 10px; }
  .sat__steps li { padding-block: 13px; font-size: 1.0625rem; }
}

.qa { display: grid; counter-reset: qa; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
@media (min-width: 1100px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: clamp(32px, 4vw, 64px); } }
.qa > li { counter-increment: qa; border-bottom: 1px solid var(--rule); }
.qa__item > summary { list-style: none; }
.qa__item > summary::-webkit-details-marker { display: none; }
.qa__q { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 60px; padding: 14px 0; cursor: pointer; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.3; transition: color var(--dur-2); }
.qa__q::before { content: counter(qa, decimal-leading-zero); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--accent); font-variant-numeric: tabular-nums; }
.qa__q::after { content: ""; width: 14px; height: 14px; 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); }
.qa__item[open] .qa__q::after { transform: rotate(180deg); background-size: 14px 1.5px, 1.5px 0; }
.qa__q:hover { color: var(--accent); }
.qa__a { margin: 0; padding: 0 0 18px 3.15rem; color: var(--fg-2); line-height: 1.6; max-width: 60ch; }
.qa__item[open] .qa__a { animation: deeper-in var(--dur-4) var(--ease-out) both; }
.qa__a .text-link { margin-left: 4px; white-space: nowrap; }
.interview.is-print-view .qa__a { display: block; }
.finish .qa { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }


/* ------------------------------------------------------------------ tools on paper */
.cine-tool .tool { gap: clamp(22px, 3vw, 32px); padding: 0; border: 0; background: transparent; }
.cine-tool .tool__title { font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.045em; }
.cine-tool .tool__foot { border-top-color: var(--rule); }
.cine-tool .tool-mount__summary.credits { padding: clamp(28px, 4vw, 48px); background: var(--paper-2); border-top: 1px solid var(--ink); justify-items: stretch; }
.cine-tool .tool-mount__summary.credits .fine { max-width: 56ch; margin: 6px auto 0; }
.adorn[hidden] { display: none; }
.screen { position: relative; isolation: isolate; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 96px; opacity: .2; mix-blend-mode: multiply; }
.grain.screen::after { z-index: 30; }

/* T5: price input, then the filter scale and chips on the paper plate */
.bands__grid { display: grid; gap: 12px; max-width: 520px; }
.bands__screen { display: grid; gap: 20px; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px); }
.bands__scale { position: relative; height: 64px; margin: 6px 6px 26px; border-bottom: 1px solid var(--line-strong); }
.bands__tick { position: absolute; bottom: -1px; width: 1px; height: 14px; background: var(--muted); transition: left var(--dur-3) var(--ease-out); }
.bands__tick > span { position: absolute; top: 20px; left: 50%; translate: -50% 0; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bands__tick.is-in { background: var(--blue-fill); }
.bands__tick.is-in > span { color: var(--ink); }
.bands__miss { position: absolute; bottom: 0; height: 22px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 1.5px, transparent 1.5px 6px); transition: left var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out); }
.bands__marker { position: absolute; bottom: -1px; width: 0; height: 48px; transition: left .7s var(--ease-out); }
.bands__marker i { position: absolute; left: -1px; bottom: 0; width: 2px; height: 100%; background: var(--ink); }
.bands__marker i::before { content: ""; position: absolute; left: -5px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-fill) 18%, transparent); }
.bands__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bands__chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); color: var(--fg-2); }
.bands__chip .bands__label { text-decoration: line-through; text-decoration-thickness: 1px; }
.bands__chip.is-in { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
.bands__chip.is-in .bands__label { text-decoration: none; }
.bands__state { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.bands__chip.is-in .bands__state { background: currentColor; }
.bands__line { min-height: 3em; font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -.015em; line-height: 1.35; color: var(--ink); max-width: 40ch; }

/* T4: two offers in, the nets on the paper plate; terms and "how the net is figured" in drawers */
.offers-mount { container-type: inline-size; }
.cine-tool .tool.offers { gap: 18px; }
.offers__wfd .offers__notes { margin-top: 16px; }
.offers__intro { color: var(--fg-2); line-height: 1.55; max-width: 56ch; }
.offers__fields { display: grid; gap: 14px; }
@container (min-width: 560px) { .offers__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offers__payer, .offers__est, .field--comp { grid-column: 1 / -1; } }
.offers__est { grid-column: 1 / -1; }
.field--comp .field__label { align-items: center; }
.segmented--xs > label { min-height: 32px; padding: 0 10px; font-size: 13px; }
.segmented--xs { position: relative; }
.segmented--xs::before { content: ""; position: absolute; inset: -6px 0; }
.offers__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.offers__tabs { display: inline-flex; gap: 6px; }
.offers__tab { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ctl); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.offers__tab[aria-selected="true"] { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
.offers__tab[hidden] { display: none; }
.offers__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px; }
.offers__rail > .ocard { scroll-snap-align: start; }
@container (min-width: 560px) { .offers__rail { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .offers.has-c .offers__rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; } }
@container (min-width: 900px) { .offers.has-c .offers__rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.ocard { position: relative; display: grid; gap: 12px; align-content: start; padding: 18px; background: var(--paper-2); transition: box-shadow var(--dur-3); }
.ocard[hidden] { display: none; }
.ocard.is-selected { box-shadow: inset 0 2px 0 var(--blue-fill); }
.ocard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.ocard__name { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.ocard__net { display: grid; justify-items: end; gap: 2px; }
.ocard__net-label { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }
.ocard__net-v { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ocard__remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--fg-2); }
.ocard:has(.ocard__remove) .ocard__head { padding-right: 36px; }
.ocard__fields { display: grid; gap: 12px; }
@container (min-width: 900px) { .ocard > .ocard__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ocard > .ocard__fields > .field--comp { grid-column: 1 / -1; } }
.ocard .input, .ocard .select, .offers__shared .input, .offers__shared .select { background: var(--paper); }
.ocard__terms > summary { font-size: .9375rem; min-height: 48px; }
.offers__screen { display: grid; gap: clamp(22px, 3vw, 32px); padding: clamp(24px, 3.4vw, 44px) clamp(20px, 4vw, 48px); }
.offers__compare, .offers__detail { display: grid; gap: 14px; }
.offers__screen .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .3em; color: var(--fg-2); }
.offers .compare__row { grid-template-columns: 5rem minmax(0, 1fr) 7.5rem; }
.offers__screen .compare__row > span:first-child { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.offers__screen .compare__row .v { font-size: 1.375rem; font-weight: 300; letter-spacing: -.02em; color: var(--ink); }
.compare__track { display: block; height: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.compare__row .compare__bar { height: 100%; width: var(--w, 0%); background: var(--ink); transition: width var(--dur-4) var(--ease-out); }
.compare__row.is-selected .compare__bar { background: var(--blue-fill); }
.offers__close { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; color: var(--ink); }
.offers .wf-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 6.5rem; }
.offers .wf-row__label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); text-align: right; }
.offers .wf-row__value { font-weight: 300; font-size: 1.0625rem; color: var(--ink); }
.offers .wf-row__bar { background: var(--ink); }
.offers .wf-row--neg .wf-row__bar { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 45%, transparent) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent); }
.offers .wf-row--total .wf-row__bar { background: var(--blue-fill); }
.offers .wf-row--total .wf-row__value { font-size: 1.375rem; }
@container (max-width: 520px) { .offers .wf-row { grid-template-columns: minmax(0, 1fr) 6.5rem; } .offers .wf-row__track { grid-column: 1 / -1; grid-row: 2; height: 10px; } .offers .wf-row__label { text-align: left; } }
.offers__wfd .offers__detail { padding-top: 8px; }
@container (min-width: 900px) { .offers__compare { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 40px; align-items: center; } .offers__compare > .eyebrow { grid-column: 1 / -1; } }
.offers__terms { display: grid; gap: 12px; }
.offers__terms > .drawer__body { display: grid; gap: 12px; }
.terms-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.terms { min-width: 460px; font-size: var(--fs-label); }
.terms th[scope="row"] { color: var(--fg); font-weight: 500; }
.terms__label { display: inline-flex; align-items: center; gap: 8px; }
.terms__tip { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--fg-muted); max-width: 34ch; }
.terms__mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-fill); flex: none; }
.terms tr.is-diff td { color: var(--fg); font-weight: 500; }
.offers__marker-note { display: flex; align-items: baseline; gap: 8px; }
.route__notes strong, .offers__notes strong { color: var(--fg); font-weight: 600; }
.offers__notes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-label); line-height: 1.5; color: var(--fg-2); }

/* T6 inside its drawer: route cards and inputs on the paper plate */
.cine-tool .route-card { background: var(--paper); border-color: transparent; }
.cine-tool .route-card:has(input:checked) { background: var(--paper); border-color: var(--blue-fill); }
.cine-tool .route__col { padding: clamp(18px, 2.4vw, 26px); background: var(--paper); }
.cine-tool .route__col-t { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.cine-tool .route__col .input, .cine-tool .route__col .select { background: var(--paper-2); }
.cine-tool .route__step { color: var(--fg-2); }
.cine-tool .route__screen { text-align: center; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 899px) {
  .sell-hero__copy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sell-hero.is-static .sell-hero__frame { height: auto; aspect-ratio: 4 / 4.4; }
  .sell-hero__films video { object-position: 56% 30%; } /* he talks just right of centre: keep him whole in the tall crop */
  .sell-hero h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .sell-hero h1 .kicker { letter-spacing: .2em; font-size: 11px; }
  .sell-hero__lede { font-size: 1rem; }
  .sell-index__quote blockquote p { font-size: clamp(1.5rem, 7vw, 2rem); }
  .act__card .title-card__title { font-size: clamp(2.75rem, 13vw, 3.75rem); }
  .stack-card.play { min-height: 0; }
  .qa__q { grid-template-columns: 2rem minmax(0, 1fr) 14px; }
  .qa__a { padding-left: 2.75rem; }
  .closing-list > div { grid-template-columns: 1fr; gap: 2px; }
  .launch-sig__facts > div { grid-template-columns: 7rem minmax(0, 1fr); }
}
@media (max-width: 359px) { .sell-index__toc a { font-size: .9375rem; } }

/* ------------------------------------------------------------------ the short version (feedback #24: why hire me), under the
   promises: his face, 10 years full time, hundreds of transactions, 80+ reviews, D Magazine Top Producer (no years). Each
   cell lights as the line rises (--lit from page JS; unset = lit, so T0, no JS and the fail-safe read as plain type). */
.proofline { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: end; margin: clamp(32px, 4.4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.proofline > li { display: grid; gap: 8px; align-content: end; padding: 22px clamp(14px, 2vw, 30px) 4px; border-left: 1px solid var(--rule); opacity: calc(.26 + .74 * var(--lit, 1)); transform: translateY(calc((1 - var(--lit, 1)) * 14px)); }
.proofline > li:first-child { border-left: 0; padding-left: 0; }
.proofline__n { font-weight: 300; font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: .95; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.proofline__n em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .8em; letter-spacing: -.02em; color: var(--accent); }
.proofline > li > span { max-width: 22ch; font-size: .9375rem; line-height: 1.4; color: var(--fg-2); }
.proofline > li.proofline__me { justify-items: start; padding-right: clamp(20px, 3vw, 44px); }
.proofline__me img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--blue-fill); }
.proofline > li.proofline__me > span { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-muted); }
@media (max-width: 899px) {
  .proofline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proofline > li { padding: 18px 0 16px 16px; border-bottom: 1px solid var(--rule); }
  .proofline > li:nth-child(2n) { border-left: 0; padding-left: 0; }
  .proofline > li.proofline__me { grid-column: 1 / -1; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding-left: 0; }
  .proofline__me img { width: 56px; height: 56px; }
}

/* ------------------------------------------------------------------ ACT I: his film beside his line and the three drivers */
.price { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .price { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(36px, 5vw, 88px); align-items: center; }
}
.price__media { display: grid; gap: 20px; align-content: start; justify-items: start; min-width: 0; }
.price__film { margin: 0; width: min(100%, calc(min(62vh, 600px) * .8)); aspect-ratio: 4 / 5; border-radius: 4px; }
.price__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transform: scale(1.42); transform-origin: 76% 60%; }
.price__film.mask-armed > video { transform: scale(1.5); }
.price__film.mask-armed.is-in > video { transform: scale(1.42); }
.price__voice { margin: 0; max-width: 24ch; }
.price__voice::before { content: ""; display: block; width: 40px; height: 1px; margin-bottom: 14px; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--ring, 1)); transition: transform 1.1s var(--ease-out) .2s; }
.price__voice.is-armed { --ring: 0; }
.price__voice.is-armed.is-in { --ring: 1; }
.act__body .price__voice p { max-width: none; font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.price__voice em { color: var(--accent); }
.price__story { display: grid; gap: clamp(24px, 2.8vw, 40px); min-width: 0; }
@media (max-width: 899px) {
  .price__film { width: 100%; aspect-ratio: 1 / 1; }
  .price__film video { transform: scale(1.3); transform-origin: 74% 58%; }
  .price__voice { max-width: 30ch; }
}

/* "Try your price" and "Put in your numbers": the full tools wait behind a quiet pill */
.pband__try, .faceoff__tool { justify-self: start; width: 100%; }
.pband__try > summary, .faceoff__tool > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink); cursor: pointer; list-style: none; transition: background-color var(--dur-2), color var(--dur-2); }
.pband__try > summary::-webkit-details-marker, .faceoff__tool > summary::-webkit-details-marker { display: none; }
.pband__try > summary:hover, .faceoff__tool > summary:hover { background: var(--ink); color: var(--paper); }
.pband__try > summary .icon, .faceoff__tool > summary .icon { transition: transform var(--dur-3) var(--ease-out); }
.pband__try[open] > summary .icon, .faceoff__tool[open] > summary .icon { transform: rotate(45deg); }
.pband__try[open] > .cine-tool, .faceoff__tool[open] > .cine-tool { margin-top: clamp(18px, 2.4vw, 28px); animation: deeper-in var(--dur-4) var(--ease-out) both; }

/* ------------------------------------------------------------------ ACT II: the prep film holds (sticky) beside the staging
   numbers and the drawers, so the right column never runs empty */
.present { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .present { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 104px); }
  .present .prep-film { position: sticky; top: calc(var(--header-h) + 6vh); }
}
.present__main { display: grid; gap: clamp(18px, 2.4vw, 28px); align-content: start; min-width: 0; }
.prep-film { display: grid; gap: 14px; justify-items: center; margin: 0; }
.prep-film__frame { width: min(100%, 440px, calc(min(66vh, 620px) * .8)); aspect-ratio: 4 / 5; border-radius: 4px; }
/* the clip carries a burned-in label near the bottom: a 4:5 crop from the upper part keeps it out of frame */
.prep-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.prep-film__cap { max-width: 40ch; font-size: 13px; line-height: 1.5; color: var(--fg-2); text-align: center; }
@media (max-width: 899px) { .present .prep-film { order: -1; } .prep-film__frame { width: min(100%, 360px); } }

/* ------------------------------------------------------------------ Launch Day: him on a listing shoot, a small film over the
   frame's lower corner while the drone film scrubs (beat 1, "Photography"); it steps away as the frame lifts off. Its
   place follows the frame's own container math (desk and phone). T0 (static) leaves it out. */
.launch-sig__pip { --pw: 140px; position: absolute; z-index: 3; margin: 0; width: var(--pw); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; pointer-events: none;
  background: #1B1A18 url("../../assets/stills/sell-photos.jpg") 50% 20% / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(241, 240, 237, .34), 0 0 0 6px rgba(18, 17, 16, .92), 0 34px 60px -24px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.launch-sig__pip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.launch-sig.is-pinned .launch-sig__pip.is-on { opacity: 1; transform: none; }
.launch-sig.is-desk .launch-sig__pip { --pw: clamp(118px, 10.5vw, 164px); --fw: min(76cqw, calc((100cqh - 200px) * 1.7778)); left: calc(50cqw - var(--fw) / 2 - var(--pw) * .32); top: calc(44cqh + var(--fw) * .28125 - var(--pw) * .9); }
.launch-sig.is-phone .launch-sig__pip { --pw: 92px; --fw: min(calc(100cqw - 2 * var(--gutter) - 32px), calc(94cqh * .8)); left: calc(50cqw - var(--fw) / 2 - 10px); top: calc(47cqh + var(--fw) * .625 - var(--pw) * 1.02); }
.launch-sig.is-static .launch-sig__pip { display: none; }

/* ------------------------------------------------------------------ ACT III: the Offer Face-Off payoff (the scroll plays it:
   the price bars draw, the nets race and land $49 apart, "So the terms decide." lights). --pp / --np / --pw / --nw come
   from page JS; unset = the end state. */
.faceoff { display: grid; gap: clamp(22px, 3vw, 36px); }
.faceoff__board { display: grid; gap: clamp(18px, 2.4vw, 28px); padding: clamp(24px, 3.6vw, 52px); }
.faceoff__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
.faceoff__race { display: grid; gap: clamp(20px, 2.8vw, 32px); margin: 0; padding: 0; list-style: none; }
.faceoff__row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 10rem; align-items: center; gap: 10px clamp(16px, 2.4vw, 32px); }
.faceoff__who { display: grid; gap: 4px; }
.faceoff__who b { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.faceoff__who span { font-size: 1rem; line-height: 1.35; color: var(--fg-2); }
.faceoff__track { position: relative; height: 16px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.faceoff__bar { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: left center; }
.faceoff__bar--price { width: var(--pw, 98%); transform: scaleX(var(--pp, 1)); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 24%, transparent) 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.faceoff__bar--net { width: var(--nw, 46%); transform: scaleX(var(--np, 1)); background: var(--ink); }
.faceoff.is-landed .faceoff__bar--net { background: var(--blue-fill); transition: background-color .5s var(--ease-out); }
.faceoff__net { display: grid; justify-items: end; gap: 2px; }
.faceoff__net span { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }
.faceoff__net b { min-height: 1.15em; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.faceoff__gap { font-size: 1.125rem; line-height: 1.45; color: var(--fg-2); opacity: var(--gap, 1); transform: translateY(calc((1 - var(--gap, 1)) * 10px)); }
.faceoff__gap b { font-weight: 500; color: var(--ink); }
.faceoff__lit { font-weight: 300; font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.faceoff__lit em, .words__lit em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--accent); }
.faceoff__fine { max-width: 72ch; }
@media (max-width: 699px) {
  .faceoff__row { grid-template-columns: minmax(0, 1fr) auto; }
  .faceoff__track { grid-column: 1 / -1; grid-row: 2; }
}
/* scroll-lit words ([data-lit]; page JS writes each word's --w, 0 to 1; unset = lit) */
[data-lit] .wi { opacity: calc(.16 + .84 * var(--w, 1)); }


/* ------------------------------------------------------------------ Coleman: him at the same front door comes back as the
   payoff lands (a still from his listing film in an arched frame; the hero film plays only once on the page) */
.sat__me { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 16px; margin: 4px 0 2px; }
.sat__me-frame { position: relative; width: clamp(104px, 9vw, 138px); aspect-ratio: 4 / 5; border-radius: 999px 999px 8px 8px; overflow: hidden; background: #1B1A18; box-shadow: 0 0 0 1px rgba(241, 240, 237, .22), 0 24px 50px -24px rgba(0, 0, 0, .9); }
/* 2026-09-30 (feedback #6): a still of him at the Coleman door (stills/sell-coleman-door), not a second play of the hero film */
.sat__me img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sat__me figcaption { max-width: 22ch; padding-bottom: 6px; font-size: 13px; line-height: 1.45; color: var(--fg-2); }

/* ------------------------------------------------------------------ what's it worth + two questions, one compact bone band */
.finish { padding-block: clamp(48px, 6vw, 88px); }
.finish__grid { display: grid; gap: clamp(36px, 5vw, 88px); align-items: start; }
@media (min-width: 1000px) {
  .finish__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .finish__more { position: sticky; top: calc(var(--header-h) + 32px); }
}
.finish__hv { display: grid; gap: clamp(20px, 2.6vw, 28px); min-width: 0; }
.finish .hv__head { position: static; display: grid; gap: 18px; }
.hvme { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2.4vw, 30px); align-items: center; }
.hvme__face { display: block; position: relative; }
.hvme__face img { display: block; width: clamp(92px, 9vw, 132px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 42% 30%; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--blue-fill), 0 26px 44px -26px rgba(21, 19, 17, .55); }
.hvme.is-armed .hvme__face img { transform: scale(.9); opacity: 0; transition: transform 1s var(--ease-out), opacity .8s var(--ease-out); }
.hvme.is-armed.is-in .hvme__face img { transform: none; opacity: 1; }
.hvme__copy { display: grid; gap: 10px; min-width: 0; }
.finish .act__h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); }
.finish__more > .hv__headsup { order: 3; margin-top: clamp(20px, 2.6vw, 32px); }
.hvme__line { max-width: 52ch; font-size: var(--fs-body-guide); line-height: 1.6; color: var(--fg); }
.finish .hv { border-top-color: var(--blue-fill); background: var(--paper); }
.finish .hv__house { display: none; }
.finish .hv__top { justify-content: flex-start; }
.hv__headsup { padding: 16px 20px; border-left: 2px solid var(--blue-fill); background: var(--paper-2); font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
.finish__more { display: grid; align-content: start; min-width: 0; }
.finish__more > .ask:first-of-type { border-top: 1px solid var(--ink); }
.ask { border-bottom: 1px solid var(--rule); }
.ask__sum { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 8px 16px; align-items: center; padding: clamp(18px, 2.4vw, 26px) 0; cursor: pointer; list-style: none; }
.ask__sum::-webkit-details-marker { display: none; }
.ask__sum > .caps { grid-column: 1; color: var(--fg-2); }
.ask__title { grid-column: 1; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); transition: color var(--dur-2); }
.ask__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--accent); }
.ask__sum::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 16px no-repeat; transition: transform var(--dur-3) var(--ease-out); }
.ask[open] > .ask__sum::after { transform: rotate(45deg); }
.ask__sum:hover .ask__title { color: var(--blue-text); }
.ask__body { display: grid; gap: 16px; padding: 0 0 clamp(20px, 3vw, 30px); }
.ask[open] > .ask__body { animation: deeper-in var(--dur-4) var(--ease-out) both; }
.ask__body > p { max-width: 58ch; line-height: 1.6; }
.rightsize__drawers .deeper { max-width: none; }
.rightsize__drawers .deeper:first-child { border-top-color: var(--ink); }
.interview__actions { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ------------------------------------------------------------------ IN THEIR WORDS, on ink (the close begins): three seller
   lines drift across the dark, each lit as it passes, then his line lights word by word straight into the ending.
   Desk: one line each, drifting (page JS writes --tx from the scroll plus a slow idle drift). Phones and T0: they wrap. */
.words { position: relative; overflow: clip; padding-block: clamp(44px, 5vw, 80px) clamp(24px, 3vw, 44px); background: #121110; color: var(--ink); border-top: 1px solid rgba(241, 240, 237, .06); }
.words::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 40%, rgba(241, 240, 237, .045), transparent 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .words { background: #080807; --paper: #080807; --paper-2: #141312; } }
:root[data-theme="dark"] .words { background: #080807; --paper: #080807; --paper-2: #141312; }
.words .caps { color: var(--muted); }
.words__head { position: relative; display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 44px); }
@media (min-width: 900px) { .words__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.words__title { font-weight: 300; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: .95; letter-spacing: -.05em; }
.words__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--blue-text); }
.words__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; max-width: 34ch; color: var(--fg-2); }
.words__n { font-weight: 300; font-size: clamp(2.75rem, 4vw, 3.5rem); line-height: .9; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.words__rows { position: relative; display: grid; gap: clamp(26px, 3.6vw, 48px); width: min(100% - 2 * max(var(--gutter), 4vw), 1320px); margin-inline: auto; }
.words__row { display: grid; gap: 12px; width: min(100%, 34ch); margin: 0; font-size: clamp(1.625rem, 2.9vw, 2.625rem); transform: translate3d(var(--tx, 0px), 0, 0); }
.words__row:nth-child(2) { justify-self: end; }
.words__row:nth-child(3) { justify-self: center; }
.words__row blockquote { margin: 0; }
.words__row p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1em; line-height: 1.16; letter-spacing: -.01em; text-wrap: balance; color: color-mix(in srgb, var(--ink) calc(30% + 70% * var(--lit, 1)), transparent); }
.words__row figcaption { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.words__lit { position: relative; width: min(100% - 2 * max(var(--gutter), 4vw), 1320px); max-width: none; margin: clamp(48px, 7vw, 96px) auto 0; font-weight: 300; font-size: clamp(2.125rem, 4.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.04em; }
.words__lit { text-wrap: balance; }
.words.is-live .words__row { will-change: transform; }
@media (max-width: 767px) {
  .words__row { width: 100%; font-size: 1.3125rem; gap: 8px; transform: translate3d(0, calc((1 - var(--lit, 1)) * 16px), 0); }
  .words__rows { gap: 24px; }
  .words__lit { font-size: 2rem; }
  .words__row:nth-child(n) { justify-self: start; }
}
.words.is-static .words__row { transform: none; }
@media (min-width: 1000px) {
  /* the head and the quotes share their own grid (.words__top), so the sticky head ends with the last quote and never
     slides over his line below */
  .words { padding-inline: max(var(--gutter), 4vw); }
  .words__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; }
  .words__top > .words__head { grid-column: 1; grid-row: 1; width: auto; max-width: none; margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--header-h) + 40px); }
  .words__rows { grid-column: 2; grid-row: 1; width: auto; margin: 0; gap: clamp(18px, 2vw, 28px); }
  .words__row { font-size: clamp(1.375rem, 2vw, 1.875rem); width: min(100%, 36ch); gap: 8px; }
  .words__lit { width: auto; margin-top: clamp(32px, 4vw, 56px); }
}
/* the ink runs straight into the ending: no seam between the two */
.words + .textme { border-top: 0; }

/* ------------------------------------------------------------------ the seller actions on desktop: a slim rail in the right
   gutter (What's it worth, My net), never over the copy (the wide container ends 48px short of the edge there). The
   label shows as a tip on hover or focus and is always the accessible name. Text and Book are in the header on desktop.
   Phones keep the full-width bar every page has. */
@media (min-width: 1100px) {
  .page--sell[data-bar="seller"] { --bar-space: 0px; }
  .page--sell[data-bar="seller"] .bottombar { left: auto; right: 4px; top: 50%; bottom: auto; width: 40px; height: auto; margin: 0; padding: 4px 0; display: grid; grid-template-columns: 40px; grid-auto-rows: 40px; gap: 4px; justify-items: center; border-radius: 999px; overflow: visible; border: 1px solid var(--line); box-shadow: 0 14px 34px -20px rgba(17, 17, 17, .45); transform: translate(0, -50%); }
  .page--sell[data-bar="seller"] .bottombar.is-managed.is-visible { transform: translate(0, -50%); }
  .page--sell[data-bar="seller"] .bottombar.is-managed:not(.is-visible) { transform: translate(calc(100% + 12px), -50%); }
  .page--sell[data-bar="seller"] .bottombar .bar-btn[data-bar-action="text"], .page--sell[data-bar="seller"] .bottombar .bar-btn[data-bar-action="book"] { display: none; }
  .page--sell[data-bar="seller"] .bottombar .bar-btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; }
  .page--sell[data-bar="seller"] .bottombar .bar-btn .icon { width: 18px; height: 18px; }
  .page--sell[data-bar="seller"] .bottombar .bar-btn span { position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; max-width: none; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-2); }
  .page--sell[data-bar="seller"] .bottombar .bar-btn:hover span, .page--sell[data-bar="seller"] .bottombar .bar-btn:focus-visible span { opacity: 1; }
}
/* the header's lights: no label until the first act starts (on the hero it would read "Priced" too early) */
.page--sell .pc-lights__label:empty { display: none; }

/* ================================================================== ROUND 3 (2026-09-29, Ashton: "a lot of text and kind of
   boring after a while ... could be way more motion, animated, alive, 3D"). Act I's tiles, THE LAUNCH WINDOW (the 3D
   chapter), Act II's rings and the compact list cards. */

/* ---------- Act I: the three things a price is built from, three tiles lit as they rise (page JS writes --lit 0..1 per
   tile; unset = lit, so T0, no JS and the fail-safe read as plain type). A blue rule draws across the top of each. */
.act__body--lead { padding-block-end: clamp(40px, 5vw, 72px); }
.price__story { align-content: center; gap: clamp(20px, 2.4vw, 32px); }
.drivers { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.drivers > li { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 0 18px; border-bottom: 1px solid var(--rule); opacity: calc(.22 + .78 * var(--lit, 1)); transform: translateY(calc((1 - var(--lit, 1)) * 18px)); }
.drivers > li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--lit, 1)); }
.drivers__n { font-weight: 300; font-size: clamp(1.875rem, 2.9vw, 2.625rem); line-height: 1; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.drivers > li > span { max-width: 28ch; font-size: .98rem; line-height: 1.45; color: var(--fg-2); }
@media (min-width: 700px) {
  .drivers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drivers > li { padding: 22px clamp(12px, 1.6vw, 24px) 4px 0; border-bottom: 0; }
  .drivers > li + li { padding-left: clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--rule); }
}
.act__body--tools { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.price-tools { display: grid; gap: 16px; justify-items: start; }
.price-tools > .deeper { width: min(100%, 880px); max-width: none; }

/* ---------- PRICING STRATEGY, "I'll walk you through it." (#launch-window, js/scenes/sell-market.js; rebuilt 2026-10-01,
   feedback #61: Ashton never wants to price on the ceiling, so it is him walking the seller through pricing, four beats:
   the value, the pricing pyramid, the search bands, "We'll pick it together."). A pinned chapter on the stage paper, the
   light studio grey the CMA above it also wears, so the two read as one studio set on the white page (and the 3D fog,
   look.js pagePaper(), is the same grey, so nothing shows a box). The stage is sticky and sits ABOVE the page's WebGL
   canvas (z-index 2, transparent), so the words and labels read over the set; the studio light pool is a sticky layer
   under the canvas. Without .is-pinned (T0, no JS, the fail-safe) the four beats simply stack. */
.mkt { position: relative; background: var(--stage-paper); }
.mkt__pin { position: relative; }
.mkt.is-pinned .mkt__pin { height: 400vh; }
.mkt.is-pinned.is-phone .mkt__pin { height: 410vh; height: 410svh; } /* pacing 2026-10-01: 3.1 screens of pin, six paced beats */
.mkt.is-pinned .mkt__pin::before { content: ""; position: sticky; top: 0; display: block; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 64% 58%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .34) 48%, transparent 76%); }
.mkt.is-pinned.is-phone .mkt__pin::before { background: radial-gradient(ellipse 96% 34% at 50% 72%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3) 52%, transparent 80%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mkt.is-pinned .mkt__pin::before { background: radial-gradient(ellipse 50% 46% at 64% 58%, rgba(255, 255, 255, .06), transparent 74%); } }
:root[data-theme="dark"] .mkt.is-pinned .mkt__pin::before { background: radial-gradient(ellipse 50% 46% at 64% 58%, rgba(255, 255, 255, .06), transparent 74%); }
.mkt.is-pinned .mkt__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 2; }
.mkt__gl { position: absolute; inset: 0; background: transparent !important; overflow: visible !important; }
.mkt:not(.is-pinned) .mkt__gl { display: none; }
.mkt__flat { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity .6s var(--ease-out); }
.mkt.is-gl .mkt__flat { opacity: 0; }
.mkt__labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* the words stay legible over the set: a veil of the stage paper under them (above the canvas, under the words) */
.mkt__scrim { display: none; }
.mkt.is-pinned .mkt__scrim { display: block; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 44% 50% at 10% 30%, var(--stage-paper) 0, color-mix(in srgb, var(--stage-paper) 88%, transparent) 46%, color-mix(in srgb, var(--stage-paper) 40%, transparent) 72%, transparent 100%); }
.mkt.is-pinned.is-phone .mkt__scrim { background: linear-gradient(180deg, var(--stage-paper) 0, color-mix(in srgb, var(--stage-paper) 94%, transparent) 36%, color-mix(in srgb, var(--stage-paper) 40%, transparent) 44%, transparent 50%); }
.mkt.is-pinned:not(.has-house) .mkt__readout { opacity: 0; transform: translateY(8px); }
.mkt__readout { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
/* labels, projected from the set's own camera (sell-market.js anchors each box and writes the transform and opacity).
   Beat a: the value (blue) and "Your home". Beat b: the pyramid's four tiers, "At value" (blue,
   "The most buyers") up to "Way over" ("The fewest"). Beat c: the bands and the listing's price tag. */
.mkt__lbl { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); will-change: transform, opacity; transition: color .4s var(--ease-out); }
.mkt__lbl small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--fg-2); }
.mkt__lbl--value { display: grid; justify-items: center; gap: 4px; color: var(--blue-text); }
.mkt__lbl--value b { font-weight: 600; }
/* phones: beside the rod, a little over halfway up (the tip reaches into the words' veil), with a blue tick back to it */
.mkt__lbl--value.is-side { justify-items: start; }
.mkt__lbl--value.is-side::before { content: ""; position: absolute; left: -8px; top: 50%; width: 5px; height: 1px; background: currentColor; opacity: .8; }
.mkt__lbl--home { padding: 5px 11px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--paper) 84%, transparent); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mkt__lbl--tier { display: grid; justify-items: start; gap: 3px; color: var(--ink); }
.mkt__lbl--tier b { font-weight: 600; }
.mkt__lbl--tier.is-on b, .mkt__lbl--tier.is-on small { color: var(--blue-text); }
.mkt__lbl--tier::before { content: ""; position: absolute; left: -8px; top: 50%; width: 5px; height: 1px; background: currentColor; opacity: .5; }
.mkt__lbl--tier.is-on::before { color: var(--blue-text); opacity: .8; }
.mkt__lbl--band { padding-top: 2px; font-variant-numeric: tabular-nums; }
.mkt__lbl--band.is-on { color: var(--blue-text); }
.mkt__lbl--tag { display: grid; justify-items: center; gap: 3px; padding: 7px 12px 8px; border-radius: 10px; letter-spacing: 0; text-transform: none; background: color-mix(in srgb, var(--paper) 84%, transparent); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 26px -14px rgba(21, 19, 17, .35); transition: border-color .35s, box-shadow .35s; }
.mkt__lbl--tag b { font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; transition: color .35s; }
.mkt__lbl--tag small { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); transition: color .35s; }
.mkt__lbl--tag.is-in { border-color: var(--blue-fill); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue-fill) 14%, transparent), 0 10px 26px -14px rgba(40, 82, 229, .45); }
.mkt__lbl--tag.is-in b, .mkt__lbl--tag.is-in small { color: var(--blue-text); }
/* the words */
.mkt__copy { position: relative; z-index: 3; }
.mkt__beat { display: grid; gap: 14px; justify-items: start; align-content: start; }
.mkt__kicker { color: var(--fg-2); }
.mkt__title { font-weight: 300; font-size: clamp(2.25rem, 3.8vw, 3.5rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.mkt__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--accent); }
.mkt__line { max-width: 34ch; font-size: 1.0625rem; line-height: 1.5; color: var(--fg-2); }
.mkt__readout { display: grid; gap: 8px; margin-top: 6px; }
.mkt__readout b { font-weight: 300; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.05em; color: var(--ink); transition: color .35s var(--ease-out); }
.mkt__readout span { max-width: 24ch; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.25; color: var(--fg-2); transition: color .35s var(--ease-out); }
.mkt.is-in .mkt__readout b, .mkt.is-in .mkt__readout span { color: var(--blue-text); }
.mkt__fine { margin: 0; }
/* pinned: the words on the left (desk) or on top (phones), one beat at a time */
.mkt.is-pinned .mkt__copy { position: absolute; left: max(var(--gutter), 4vw); top: calc(var(--header-h) + 7vh); width: min(34vw, 460px); }
.mkt.is-pinned .mkt__beat { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .5s var(--ease-out), transform .65s var(--ease-out); }
.mkt.is-pinned .mkt__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mkt.is-pinned .mkt__fine { position: absolute; z-index: 3; left: max(var(--gutter), 4vw); bottom: 18px; max-width: 46ch; }
.mkt__skip { position: absolute; z-index: 4; right: max(var(--gutter), 4vw); bottom: 14px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--fg-2); background: color-mix(in srgb, var(--paper) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mkt__skip::after { content: ""; position: absolute; inset: -8px -4px; }
.mkt__skip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
@media (min-width: 1100px) { .mkt__skip { right: calc(max(var(--gutter), 4vw) + 40px); } }
.mkt.is-pinned.is-phone .mkt__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); width: auto; }
.mkt.is-phone .mkt__beat { gap: 9px; }
.mkt.is-phone .mkt__title { font-size: clamp(1.875rem, 8.6vw, 2.5rem); }
.mkt.is-phone .mkt__line { font-size: .95rem; max-width: 36ch; }
.mkt.is-phone .mkt__readout { margin-top: 0; gap: 4px; }
.mkt.is-phone .mkt__readout b { font-size: 2.125rem; }
.mkt.is-phone .mkt__readout span { font-size: 1.0625rem; }
.mkt.is-phone .mkt__lbl { font-size: 9px; letter-spacing: .13em; }
.mkt.is-phone .mkt__lbl small { font-size: 8.5px; letter-spacing: .1em; }
.mkt.is-phone .mkt__upto { display: none; }
.mkt.is-phone .mkt__lbl--tag b { font-size: 14px; }
.mkt.is-phone .mkt__lbl--tag small { font-size: 8.5px; }
.mkt.is-pinned.is-phone .mkt__fine { left: var(--gutter); right: 96px; bottom: calc(var(--bar-space, 0px) + 12px); font-size: 11.5px; }
.mkt.is-phone .mkt__skip { right: var(--gutter); bottom: calc(var(--bar-space, 0px) + 10px); }
@media (max-width: 359px) { .mkt.is-phone .mkt__line { display: none; } }
/* stacked (T0, no JS, the fail-safe): each beat, then its still (T0 draws one for the pyramid and one for the bands; the
   first and last beats are words only and take the whole row) */
.mkt:not(.is-pinned) .mkt__stage { padding-block: clamp(48px, 7vw, 96px); }
.mkt:not(.is-pinned) .mkt__copy { display: grid; gap: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 64px); width: min(100% - 2 * max(var(--gutter), 4vw), 1320px); margin-inline: auto; }
.mkt:not(.is-pinned) .mkt__fine { width: min(100% - 2 * max(var(--gutter), 4vw), 1320px); margin: clamp(18px, 2vw, 24px) auto 0; }
@media (min-width: 900px) {
  .mkt.is-static .mkt__copy { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; }
  .mkt.is-static .mkt__beat:is([data-mkt-beat="a"], [data-mkt-beat="d"]) { grid-column: 1 / -1; }
}
.mkt__still { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.mkt.is-phone .mkt__still { aspect-ratio: 5 / 4; }
.mkt__still canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mkt__still-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mkt__still .mkt__lbl { opacity: 1; }

/* ---------- Act II: the staging numbers as rings that fill and count as they rise (page JS writes --fill 0..1 per ring;
   unset = full, the end state) */
.present__lead { max-width: 40ch; font-size: 1.125rem; line-height: 1.5; color: var(--fg-2); }
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); margin: 6px 0 0; padding: 0; list-style: none; }
.rings > li { position: relative; display: grid; justify-items: start; align-content: start; gap: 10px; }
.ring { display: block; width: min(100%, 132px); height: auto; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 7; }
.ring__fill { fill: none; stroke: var(--blue-fill); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--v) * var(--fill, 1)); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue-fill) 30%, transparent)); }
.rings__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: min(100%, 132px); aspect-ratio: 1; font-weight: 300; font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rings__l { max-width: 18ch; font-size: .9375rem; line-height: 1.4; color: var(--fg-2); }
@media (max-width: 519px) { .rings__l { font-size: .8125rem; } .ring, .rings__n { width: 100%; } .rings__n { font-size: 1.5rem; } }

/* ---------- the lists as compact cards: a count, a title and a thin meter (the list's own progress, from checklist.js);
   one opens to full width and its items rise in */
.kits { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 620px) { .kits { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kits--end { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kits > .kit[open] { grid-column: 1 / -1; } }
.act__body > .kits--end { margin-top: clamp(40px, 6vw, 72px); }
.kits > .kit { width: auto; max-width: none; margin: 0; border: 0; }
.kit > summary { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 14px; min-height: 112px; padding: 18px 18px 22px; border-radius: 6px; background: var(--paper-2); list-style: none; cursor: pointer; overflow: hidden; transition: background-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.kit > summary::-webkit-details-marker { display: none; }
.kit > summary::before { display: none; }
.kit > summary::after { position: absolute; right: 20px; top: 22px; opacity: .6; }
.kit > summary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(21, 19, 17, .45); color: inherit; }
.kit[open] > summary { background: var(--ink); color: var(--paper); }
.kit__n { grid-row: 1 / span 2; align-self: end; font-weight: 300; font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: .85; letter-spacing: -.05em; color: var(--blue-text); }
.kit[open] .kit__n { color: #8EA4FF; }
.kit__t { display: grid; gap: 6px; font-size: 1rem; font-weight: 500; line-height: 1.25; }
.kit__k { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-muted); }
.kit[open] .kit__k { color: rgba(241, 240, 237, .6); }
.kit__meter { position: absolute; left: 18px; right: 18px; bottom: 11px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.kit__meter i { position: absolute; inset: 0; background: var(--blue-fill); transform-origin: left; transform: scaleX(var(--done, 0)); transition: transform .6s var(--ease-out); }
.kit[open] .kit__meter { background: rgba(241, 240, 237, .16); }
.kit[open] > :not(summary) { padding: 12px 4px 8px; }
/* the items rise in when a list opens (a short stagger; nothing at T0) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .kit[open] .check-item, html:not([data-motion="paused"]) .kit[open] .paper, html:not([data-motion="paused"]) .kit[open] .inspect__list > li, html:not([data-motion="paused"]) .kit[open] .closing-list > div { animation: kit-rise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
}
@keyframes kit-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* compact lists: two columns of short items on wide screens */
@media (min-width: 900px) {
  .kit .checklist { max-width: none; }
  .kit .checklist__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .kit .check-group { grid-column: 1 / -1; }
}
.kit .check-item__hint { font-size: 13px; }
.present__showings { padding-top: 8px; }

/* ---------- print */
@media print {
  .mkt .mkt__gl { display: none; }
  .mkt .mkt__beat { position: static; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .sell-hero, .act__card, .launch-sig, .launch-quote-band, .plays-band, .sat, .words { background: #FFFFFF; color: #111111; }
  .price__media, .prep-film, .finish__more { position: static; }
  .words__row { width: auto; transform: none; }
  .words__row p { white-space: normal; }
  .qa > li, .ocard { break-inside: avoid; }
  .sat__media { position: static; }
  .sat__frame video { filter: none; }
}

/* ------------------------------------------------------------------ EVERY WAY YOUR HOME GETS SEEN (#seen; js/scenes/sell-seen.js,
   feedback #47). The studio grey, the gallery after the Launch Day ink. The markup is a clean grid of the five groups, and that is what
   shows with no JS, at T1 (no WebGL), at T0 (reduced motion, the pause) and in the fail-safe. Phones and lite (.is-grid):
   the same grid, each chip rises and lights as it comes up (--lit, 0 to 1; unset = lit). Desk T2 (.is-desk): a pinned stage.
   The porcelain model and its orbits are WebGL on the page canvas (z-index 1) under the stage (z-index 2, transparent); the
   words and the chips are DOM above it. The chips' CSS places are their landing slots; the script flies each one in from its
   bead on the orbit (transform and opacity only) and lights it as it lands. */
.seen {
  --seen-chip: color-mix(in srgb, #FFFFFF 62%, var(--paper));
  --seen-chip-line: color-mix(in srgb, var(--ink) 12%, transparent);
  --seen-dot: #B4B9C2;
  --seen-blue: var(--blue-fill);
  --seen-glow: rgba(40, 82, 229, .42);
  position: relative; background: var(--stage-paper); color: var(--ink); /* the studio grey its 3D fog lands on (white pages) */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seen { --seen-chip: color-mix(in srgb, #FFFFFF 5%, var(--paper)); --seen-chip-line: rgba(241, 240, 237, .13); --seen-dot: #5C6068; --seen-blue: #8EA4FF; --seen-glow: rgba(142, 164, 255, .35); --seen-sheen: rgba(255, 255, 255, .06); } }
:root[data-theme="dark"] .seen { --seen-chip: color-mix(in srgb, #FFFFFF 5%, var(--paper)); --seen-chip-line: rgba(241, 240, 237, .13); --seen-dot: #5C6068; --seen-blue: #8EA4FF; --seen-glow: rgba(142, 164, 255, .35); --seen-sheen: rgba(255, 255, 255, .06); }
.seen__pin { padding-block: clamp(72px, 10vw, 136px); }
.seen__stage { position: relative; }
.seen__gl { display: none; }
.seen__head { display: grid; justify-items: center; gap: 14px; text-align: center; padding-inline: var(--gutter); }
.seen__kicker { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; line-height: 1.5; color: var(--fg-2); }
.seen__kicker em { font: inherit; color: inherit; letter-spacing: inherit; }
.seen__title { max-width: 15ch; font-weight: 300; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.seen__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--accent); }
.seen__line { max-width: 36ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.3; letter-spacing: -.005em; color: var(--fg-2); text-wrap: balance; }
.seen__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px clamp(20px, 2.4vw, 32px); max-width: var(--max-wide); margin: clamp(40px, 5vw, 64px) auto 0; padding-inline: max(var(--gutter), 4vw); }
@media (min-width: 1280px) { .seen__groups { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.seen__side { display: contents; }
.seen__g { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1.3; color: var(--fg); }
.seen__g i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--seen-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seen-blue) 16%, transparent); }
.seen__g::after { content: ""; flex: 1 1 auto; min-width: 16px; height: 1px; background: var(--seen-chip-line); }
.seen__chips { display: grid; gap: 8px; justify-items: start; margin: 0; padding: 0; list-style: none; }
.seen__chip {
  --l: var(--lit, 1);
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 16px 7px 12px;
  border-radius: 17px; font-size: .9375rem; line-height: 1.2; color: var(--fg); background: var(--seen-chip);
  border: 1px solid color-mix(in srgb, var(--seen-blue) calc(var(--l) * 26%), var(--seen-chip-line));
  box-shadow: inset 0 1px 0 var(--seen-sheen, rgba(255, 255, 255, .55)), 0 10px 24px -18px rgba(36, 34, 31, .45), 0 10px 26px -16px color-mix(in srgb, var(--seen-glow) calc(var(--l) * 100%), transparent);
}
.seen__chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--seen-blue) calc(var(--l) * 100%), var(--seen-dot)); }
.seen__fine { max-width: var(--max-wide); margin: clamp(28px, 3.6vw, 44px) auto 0; padding-inline: max(var(--gutter), 4vw); font-size: 13px; color: var(--muted); }
@media (max-width: 699px) {
  .seen__pin { padding-block: 64px 72px; }
  .seen__head { justify-items: start; text-align: left; }
  .seen__title { font-size: clamp(2.125rem, 9.4vw, 2.75rem); }
  .seen__groups { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
  .seen__g { margin-bottom: 10px; }
  .seen__chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .seen__chip { min-height: 32px; padding: 6px 13px 6px 11px; font-size: .875rem; gap: 8px; }
}

/* phones and lite: the grid lights as it rises (--lit per chip, --g per group label; the script writes them) */
.seen.is-grid .seen__chip { opacity: calc(.14 + .86 * var(--l)); transform: translateY(calc((1 - var(--l)) * 12px)) scale(calc(.94 + .06 * var(--l))); }
.seen.is-grid .seen__g { opacity: calc(.3 + .7 * var(--g, 1)); }
.seen.is-grid .seen__g i { transform: scale(calc(.6 + .4 * var(--g, 1))); background: color-mix(in srgb, var(--seen-blue) calc(var(--gd, 1) * 100%), var(--seen-dot)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seen-blue) calc(var(--gd, 1) * 16%), transparent); }
.seen.is-grid .seen__g::after { transform-origin: 0 50%; transform: scaleX(var(--gr, 1)); background: color-mix(in srgb, var(--seen-blue) 38%, var(--seen-chip-line)); }

/* the landing: one soft blue ring as a chip lands and lights (desk and phones; never at T0) */
.seen:is(.is-grid, .is-desk) .seen__chip.is-lit::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--seen-blue); pointer-events: none; animation: seen-ping .9s var(--ease-out) both; }
@keyframes seen-ping { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(1.12, 1.5); } }

/* ---------- desk T2: the pinned stage */
.seen.is-desk .seen__pin { height: 370vh; padding: 0; } /* pacing 2026-10-01: seven paced beats; 2.7 screens since the fix pass (2026-10-02) keeps Sell inside its desktop length budget */
/* the gallery light sits UNDER the page canvas: a sticky backdrop with no z-index, so the lit model draws over it and the
   stage (z-index 2, transparent) carries the words above both */
.seen.is-desk .seen__pin::before { content: ""; position: sticky; top: 0; display: block; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none;
  background: radial-gradient(ellipse 34% 40% at 50% 50%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22) 55%, transparent 80%), radial-gradient(ellipse 60% 26% at 50% 80%, rgba(255, 255, 255, .3), transparent 75%), linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--paper-2) 55%, transparent)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seen.is-desk .seen__pin::before { background: radial-gradient(ellipse 34% 40% at 50% 50%, rgba(241, 240, 237, .08), rgba(241, 240, 237, .03) 55%, transparent 80%); } }
:root[data-theme="dark"] .seen.is-desk .seen__pin::before { background: radial-gradient(ellipse 34% 40% at 50% 50%, rgba(241, 240, 237, .08), rgba(241, 240, 237, .03) 55%, transparent 80%); }
.seen.is-desk .seen__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 2; }
.seen.is-desk .seen__gl { display: block; position: absolute; inset: 0; background: transparent !important; }
.seen.is-desk .seen__head { position: static; display: block; padding: 0; }
.seen.is-desk .seen__kicker { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--header-h) + 3.4vh); margin: 0 auto; max-width: 22ch; font-size: clamp(1.875rem, 5.1vh, 3.25rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.05; text-transform: none; color: var(--fg); text-align: center; }
.seen.is-desk .seen__kicker em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--accent); }
.seen.is-desk .seen__title { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(6.4vh + 12px + clamp(1.0625rem, 2.5vh, 1.4375rem) * 1.3 + 1.2vh); margin: 0 auto; max-width: none; font-size: clamp(2rem, 5.6vh, 3.5rem); text-align: center; }
.seen.is-desk .seen__line { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(6.4vh + 12px); margin: 0 auto; max-width: none; font-size: clamp(1.0625rem, 2.5vh, 1.4375rem); text-align: center; white-space: nowrap; }
.seen.is-desk .seen__title .wi { display: inline-block; opacity: var(--w, 1); transform: translateY(calc((1 - var(--w, 1)) * .42em)); }
.seen.is-desk .seen__title .w { display: inline-block; }
.seen.is-desk .seen__line { opacity: var(--hl, 1); transform: translateY(calc((1 - var(--hl, 1)) * 10px)); }
.seen.is-desk .seen__groups { position: absolute; inset: 0; display: block; max-width: none; margin: 0; padding: 0; pointer-events: none; }
.seen.is-desk .seen__side { position: absolute; top: calc(var(--header-h) + 3.4vh + clamp(1.875rem, 5.1vh, 3.25rem) * 1.05 + 5.4vh); display: flex; flex-direction: column; gap: clamp(12px, 2.6vh, 26px); width: clamp(200px, 19vw, 300px); transform-origin: 50% 0; transform: scale(var(--fit, 1)); }
.seen.is-desk .seen__side--l { right: calc(50% + clamp(230px, 26vw, 400px)); align-items: flex-end; transform-origin: 100% 0; }
.seen.is-desk .seen__side--r { left: calc(50% + clamp(230px, 26vw, 400px)); align-items: flex-start; transform-origin: 0 0; }
.seen.is-desk .seen__group { display: grid; justify-items: inherit; }
.seen.is-desk .seen__side--l .seen__group { justify-items: end; }
.seen.is-desk .seen__g { margin: 0 0 clamp(6px, 1vh, 10px); font-size: clamp(10px, 1.25vh, 11.5px); opacity: var(--g, 1); }
.seen.is-desk .seen__g::after { width: clamp(28px, 3vw, 48px); flex: none; transform: scaleX(var(--gr, 1)); transform-origin: 0 50%; }
.seen.is-desk .seen__side--l .seen__g { flex-direction: row-reverse; }
.seen.is-desk .seen__side--l .seen__g::after { transform-origin: 100% 50%; }
.seen.is-desk .seen__g i { background: color-mix(in srgb, var(--seen-blue) calc(var(--gd, 1) * 100%), var(--seen-dot)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seen-blue) calc(var(--gd, 1) * 16%), transparent); }
.seen.is-desk .seen__chips { gap: clamp(3px, .56vh, 6px); justify-items: inherit; }
.seen.is-desk .seen__side--l .seen__chips { justify-items: end; }
.seen.is-desk .seen__chip { min-height: clamp(23px, 3.35vh, 32px); padding: 0 clamp(11px, 1.4vh, 15px) 0 clamp(9px, 1.1vh, 12px); gap: clamp(7px, 1vh, 10px); font-size: clamp(12px, 1.52vh, 14.5px); white-space: nowrap; will-change: transform, opacity; transform-origin: 50% 50%; }
.seen.is-desk .seen__side--l .seen__chip { flex-direction: row-reverse; padding: 0 clamp(9px, 1.1vh, 12px) 0 clamp(11px, 1.4vh, 15px); }
.seen.is-desk .seen__fine { position: absolute; z-index: 3; left: max(var(--gutter), 4vw); bottom: 14px; margin: 0; padding: 0; max-width: min(92ch, 64vw); font-size: 12px; line-height: 1.45; }
.seen__skip { position: absolute; z-index: 4; right: max(var(--gutter), 4vw); bottom: 14px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--fg-2); background: color-mix(in srgb, var(--paper) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); pointer-events: auto; }
.seen__skip::after { content: ""; position: absolute; inset: -8px -4px; }
.seen__skip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
@media (min-width: 1100px) { .seen__skip { right: calc(max(var(--gutter), 4vw) + 40px); } }

@media print {
  .seen .seen__gl, .seen__skip { display: none; }
  .seen__chip { opacity: 1 !important; transform: 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; } } }