/* StopWarden site, v3 ("Night Watch"). Design system: business/creative/web/v3/DESIGN.md. Colours, type and space
   come from tokens.css only; this file never names a hex. */

/* ---------------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--fg);
  font: 400 var(--fs-body)/1.6 var(--ff-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.night, .watch, .paper, .paper-2 { background: var(--bg); color: var(--fg); }
.paper-2 { --bg: var(--c-paper-2); }
img, video { display: block; max-width: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p, ul, ol, dl, dd, figure, pre, table, blockquote, fieldset { margin: 0; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--link-deco); text-decoration-thickness: 1px;
    text-underline-offset: 0.22em; transition: text-decoration-color var(--t-ui) ease, color var(--t-ui) ease; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-lamp); color: var(--c-ink); }
strong { font-weight: 600; }
code, pre, .mono, kbd, .crit, .axis-tick, .axis-clock { font-family: var(--ff-mono); font-size: var(--fs-mono); font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
code { overflow-wrap: anywhere; }
.num, time, td.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
                   white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -60px; z-index: 50; background: var(--c-lamp); color: var(--c-ink);
        padding: var(--s2) var(--s4); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

.split > *, .two-col > *, .install > *, .scan-grid > *, .hero-grid > *, .close-grid > *, .wait-grid > *,
.nf-grid > *, .dl-grid > *, .start-grid > *, .faq-grid > *, .replay-grid > *, .reads-grid > *, .scan-intro > *, .read-wrap-docs > *,
.foot-grid > * { min-width: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------------------------------------------- type */
.display { font: 700 var(--fs-display)/1.0 var(--ff-display); letter-spacing: -0.012em; }
.display-page { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); line-height: 1.02; }
.h2, .doc h2 { font: 700 var(--fs-h2)/1.06 var(--ff-display); letter-spacing: -0.008em; }
.h3, .doc h3 { font: 600 var(--fs-h3)/1.3 var(--ff-text); }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--fg-2); max-width: 58ch; }
.night .lede, .watch .lede { letter-spacing: 0.004em; }
.small, .caption, .cost, .table-note { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-3); }
.caption { margin-top: var(--s3); max-width: 70ch; }
.muted { color: var(--fg-3); }
.th-sub { display: block; font: 400 var(--fs-micro)/1.4 var(--ff-text); color: var(--fg-3); letter-spacing: 0; }

/* ---------------------------------------------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  font: 600 1rem/1.2 var(--ff-text); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-control); cursor: pointer;
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, color var(--t-ui) ease,
              transform var(--t-press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 52px; padding: 0 var(--s6); font-size: 1.0625rem; }
.btn-sm { min-height: 36px; padding: 0 var(--s4); font-size: 0.9375rem; }
.btn-lamp { background: var(--c-lamp); color: var(--c-ink); }
.btn-lamp:hover { background: var(--c-lamp-hi); }
.btn-quiet { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-quiet:hover { border-color: var(--fg-3); background: var(--bg-2); }
.btn-ink { background: var(--c-ink); color: var(--c-paper); }
.btn-ink:hover { background: var(--c-watch); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s6); }
.link-arrow { font-weight: 600; text-decoration-color: var(--line-2); }
.link-arrow::after { content: " \2192"; }

input[type="email"], input[type="text"] {
  min-height: 44px; width: 100%; padding: 0 var(--s4);
  font: 400 1rem var(--ff-text); color: var(--fg); caret-color: var(--c-lamp);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-control);
  transition: border-color var(--t-ui) ease;
}
input::placeholder { color: var(--fg-3); }
input:hover { border-color: var(--fg-3); }
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input[type="radio"] { accent-color: var(--c-lamp); width: 18px; height: 18px; margin: 0; }

/* ---------------------------------------------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); view-transition-name: site-head; }
.head-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; padding: var(--s2) 0; }
.wordmark { display: block; width: 144px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--s6); }
.nav a:not(.btn) { color: var(--fg-2); font-weight: 500; font-size: 0.9688rem; text-decoration: none; padding: var(--s2) 0; }
.nav a:not(.btn):hover { color: var(--fg); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
                padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-control); font-weight: 600; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: calc(-1 * var(--gutter)); top: calc(100% + 11px); width: 100vw; max-width: 420px;
              display: grid; padding: var(--s2) var(--gutter) var(--s5); background: var(--c-night-2);
              border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.menu-panel a:not(.btn) { display: flex; align-items: center; min-height: 48px; color: var(--fg); text-decoration: none;
                          border-bottom: 1px solid var(--line); font-weight: 500; }
.menu-panel .btn { margin-top: var(--s4); }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu { display: block; }
}

/* ---------------------------------------------------------------------------------------------------- bands */
.band { padding-block: var(--s9); }
.band.night-2 { --bg: var(--c-night-2); border-top: 1px solid var(--line); }
.page-head { padding-block: var(--s8) var(--s8); }
.page-head-tall { padding-block: var(--s9) var(--s10); }
.page-head-grid { display: grid; gap: var(--s5); }
.page-head-grid > * { max-width: 880px; }
.page-head-grid > .lede { max-width: 60ch; }
.page-head-grid .actions { margin-top: var(--s3); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; }
.split-top { align-items: start; }
.split-text > * + * { margin-top: var(--s4); }
.split-text .h2 + p { margin-top: var(--s5); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
.two-col > div > * + * { margin-top: var(--s4); }
.two-col .h2 + p, .two-col h2 + ul { margin-top: var(--s5); }
.two-col h2:not(.h2) { font: 700 var(--fs-h2)/1.06 var(--ff-display); }
.gap-top { margin-top: var(--s8); }
@media (max-width: 960px) {
  .split, .two-col { grid-template-columns: 1fr; gap: var(--s6); }
  .band { padding-block: var(--s8); }
}

/* ---------------------------------------------------------------------------------------------------- frames */
.frame { background: var(--c-paper-2); border: 1px solid var(--line); border-radius: var(--r-frame); padding: 3px;
         overflow-x: auto; overflow-y: hidden; width: fit-content; max-width: 100%; }
.night .frame, .watch .frame { background: var(--c-night-2); border-color: var(--line-2); }
.frame > img, .frame > video { border-radius: var(--r-inner); outline: 1px solid rgb(17 26 46 / 0.08); outline-offset: -1px; }
.frame-scroll { max-width: 100%; overflow-x: auto; }
.win-scroll, .frame-scroll { scrollbar-color: var(--c-line-paper-2) transparent; }

/* ---------------------------------------------------------------------------------------------------- hero */
.hero { padding-block: var(--s8) var(--s9); overflow-x: clip; }
@media (min-width: 1280px) { .hero { padding-top: var(--s6); } }
.phone-only { display: none; }
@media (max-width: 700px) { .phone-only { display: inline; } }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); align-items: start; }
.hero-copy { grid-column: 1 / span 5; grid-row: 1; padding-top: var(--s7); }
.hero-copy .lede { margin-top: var(--s5); }
.hero-copy .actions { margin-top: var(--s6); }
.hero-after { grid-column: 1 / span 6; grid-row: 2; padding-right: var(--s7); }
.hero-after .cost { margin-top: var(--s4); max-width: 58ch; }
.hero-after .cost a { color: var(--fg-2); }
.hero-figure { grid-column: 6 / -1; grid-row: 1; min-width: 0; }

.stage { position: relative; height: 548px; }
.win { position: absolute; background: var(--c-capture-white);
       border-radius: var(--r-frame); box-shadow: var(--shadow-window); overflow: hidden; }
.win-chart { left: 0; top: 0; width: 720px; height: 442px; }
.win-chart-inner { position: relative; width: 720px; height: 442px; }
.win-alert { left: 64px; top: 410px; width: 662px; height: 121px; }
.win-scroll { position: relative; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; }
.win-scroll img { width: 662px; height: 121px; }
.rp-ring { position: absolute; left: 484px; top: 248px; width: 70px; height: 70px; border: 2px solid var(--c-lamp);
           border-radius: 50%; opacity: 0; pointer-events: none; }
.rp-mask { position: absolute; left: 23px; top: 102px; width: 639px; height: 17px; background: var(--c-capture-white);
           opacity: 0; pointer-events: none; }
.rp-mark { position: absolute; left: 26px; top: 119px; width: 636px; height: 3px; background: var(--c-lamp); pointer-events: none; }

.axis { margin-top: var(--s5); max-width: 664px; }
.axis-head { display: flex; align-items: center; gap: var(--s4); min-height: 32px; }
.axis-state { display: grid; font-weight: 600; font-size: var(--fs-small); flex: 1 1 auto; }
.st { grid-area: 1 / 1; }
.st-warn { color: var(--fg-2); }
.st-crit { color: var(--c-lamp); }
.axis-state[data-state="crit"] .st-warn, .axis-state[data-state="warn"] .st-crit { visibility: hidden; }
.axis-clock { font-family: var(--ff-mono); font-size: var(--fs-mono); color: var(--fg-2); white-space: nowrap; }
.axis-el { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; min-width: 4.2em; color: var(--fg); }
.axis-el .unit { font-family: var(--ff-text); font-size: var(--fs-small); color: var(--fg-2); }
.axis-btn { font: 600 var(--fs-small) var(--ff-text); color: var(--fg-2); background: none; border: 0; padding: var(--s2) 0 var(--s2) var(--s3);
            min-width: 64px; min-height: 36px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2);
            text-underline-offset: 0.22em; }
.axis-btn:hover { color: var(--fg); text-decoration-color: currentColor; }
.axis-track { position: relative; height: 40px; margin-top: var(--s3); border-top: 1px solid var(--line-2);
              background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px),
                                linear-gradient(to right, var(--fg-3) 1px, transparent 1px);
              background-size: 5% 6px, 25% 11px; background-repeat: repeat-x; background-position: 0 0, 0 0; }
.axis-track::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 11px; background: var(--fg-3); }
.axis-span { position: absolute; left: 15%; width: 60%; top: -2px; height: 3px; background: var(--c-lamp); transform-origin: 0 50%; }
.axis-pin { position: absolute; top: 0; transform: translate(-50%, -50%); }
.axis-pin-fill { left: 15%; width: 12px; height: 10px; top: -6px; background: var(--c-chalk); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); }
.axis-pin-alert { left: 75%; width: 12px; height: 12px; background: var(--c-stop); }
.axis-tick { position: absolute; top: 14px; font: 400 0.75rem/1 var(--ff-mono); color: var(--fg-3); transform: translateX(-50%); }
.axis-tick.t0 { left: 0; transform: none; }
.axis-tick.t1 { left: 25%; } .axis-tick.t2 { left: 50%; } .axis-tick.t3 { left: 75%; }
.axis-tick.t4 { right: 0; transform: none; }
.crit { font-family: var(--ff-mono); font-size: var(--fs-mono); font-weight: 600; color: var(--fg); letter-spacing: 0.02em; }
.hero-figure .caption { max-width: 664px; }

/* motion pre-states: only while html.mo is set (gate.js); the HTML without them is the final frame */
html.mo .rp-mask { opacity: 1; }
html.mo .rp-mark { opacity: 0; }
html.mo [data-alert-pin], html.mo [data-alert-row] { opacity: 0; }
html.mo [data-span] { transform: scaleX(0); }

@media (max-width: 1279px) {
  .hero-copy, .hero-figure, .hero-after { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
  .hero-figure { margin-top: var(--s7); }
  .hero-after { margin-top: var(--s6); }
  .win-alert { left: 48px; }
  .hero-copy .lede { max-width: 62ch; }
}
@media (max-width: 700px) {
  .stage { height: auto; display: grid; gap: var(--s3); }
  .win-alert { left: auto; }
  .win { position: relative; left: auto; top: auto; }
  .win-chart { width: 100%; height: 340px; }
  .win-chart-inner { position: absolute; right: 0; top: -40px; }
  .win-alert { width: 100%; height: 121px; }
  .win-scroll { scrollbar-width: auto; scrollbar-color: var(--c-line-paper-2) var(--c-paper-2); height: auto; padding-bottom: 0; }

  .axis-tick.t1, .axis-tick.t3 { display: none; }
}

/* ---------------------------------------------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; margin-top: var(--s6); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; }
thead th { font-weight: 600; color: var(--fg); border-bottom: 1px solid var(--line-2); padding-bottom: var(--s3); }
tbody th { font-weight: 500; color: var(--fg); }
tbody td { color: var(--fg-2); }
tbody tr { border-bottom: 1px solid var(--line); }
.spec { min-width: 760px; }
.spec thead tr { border-top: 1px solid var(--fg); }
.spec thead th { padding-top: var(--s4); }
.spec tbody th, .spec tbody td { padding-block: var(--s4); }
.spec tbody th { width: 30%; }
.spec td { width: 23%; }
.spec-paper tbody th { width: 34%; }
.h2-wide { max-width: 22ch; }
.lead-in { margin-top: var(--s5); max-width: 66ch; color: var(--fg-2); }
.watch .small { margin-top: var(--s5); max-width: 80ch; }

/* ---------------------------------------------------------------------------------------------------- scan */
.scan-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
.scan-copy > p { margin-top: var(--s5); color: var(--fg-2); max-width: 56ch; }
.scan-copy .h2 + p, .scan-copy .display + .lede { margin-top: var(--s5); }
.scan-copy .cost { margin-top: var(--s4); }
.readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-top: var(--s6);
           font-size: var(--fs-small); color: var(--fg-3); }
.readout .num { color: var(--fg); font-weight: 600; }
.scan-media .readout { margin: 0 0 var(--s3); }
.readout-done { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); }
.readout-done::before { content: ""; width: 8px; height: 8px; background: var(--c-clear); }
.frame-2 { margin-top: var(--s3); }
.tally { margin-top: var(--s4); max-width: 480px; }
.tally caption { text-align: left; font-size: var(--fs-small); color: var(--fg-3); padding-bottom: var(--s2); caption-side: top; }
.tally tr { border-bottom: 1px solid var(--line); }
.tally tr:first-child { border-top: 1px solid var(--line); }
.tally td { font: 600 1.625rem/1 var(--ff-display); color: var(--fg); width: 64px; padding: var(--s3) var(--s4) var(--s3) 0;
            vertical-align: middle; text-align: right; }
.tally th { font-weight: 400; color: var(--fg-2); vertical-align: middle; }
.scan-media { min-width: 0; }
.scan-media .frame { max-width: 100%; overflow-x: auto; }
.gap-s { margin-top: var(--s5); }
.tally-head { margin-top: 0; }
.scan-grid-head .scan-media { padding-top: var(--s2); }
@media (max-width: 960px) { .scan-grid { grid-template-columns: 1fr; gap: var(--s7); } }

/* ---------------------------------------------------------------------------------------------------- plans */
.terms { margin-top: var(--s5); max-width: 78ch; color: var(--fg-2); }

.table-note { margin-top: var(--s4); }
/* ---------------------------------------------------------------------------------------------------- facts, faq, rules */
.facts th { width: 42%; font-weight: 600; color: var(--fg); }
.facts td { color: var(--fg-2); }
.facts tr:first-child { border-top: 1px solid var(--fg); }
.facts-night tr:first-child { border-top-color: var(--line-2); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); }
.faq > div { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.faq > div:first-child { border-top: 1px solid var(--fg); }
.faq dt { font-weight: 600; font-size: 1.125rem; }
.faq dd { margin-top: var(--s2); color: var(--fg-2); max-width: 64ch; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: var(--s5); } }
.rules { padding-left: 1.1em; display: grid; gap: var(--s3); color: var(--fg-2); }
.rules li::marker { color: var(--fg-3); }

/* ---------------------------------------------------------------------------------------------------- close + forms */
.close { padding-block: var(--s10); }
.close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: end; }
.close-grid-single { grid-template-columns: minmax(0, 1fr); }
.close-grid > div > p { margin-top: var(--s4); color: var(--fg-2); max-width: 54ch; }
.paper .close-grid > div > p { color: var(--fg-2); }
.waitlist { display: grid; gap: var(--s3); padding: var(--s6); background: var(--bg-2); border: 1px solid var(--line);
            border-radius: var(--r-frame); }
.waitlist-open { padding: var(--s5) 0 0; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; }
.waitlist label:not(.radio) { font-weight: 600; font-size: var(--fs-small); margin-top: var(--s2); }
.field-row { display: flex; gap: var(--s2); }
.field-row input { flex: 1 1 auto; min-width: 0; }
.form-status:empty { display: none; }
.waitlist fieldset { border: 0; padding: 0; display: grid; gap: var(--s3); }
.waitlist legend { font-weight: 600; margin-bottom: var(--s3); }
.radio { display: flex; align-items: center; gap: var(--s3); min-height: 32px; cursor: pointer; color: var(--fg-2); }
.wait-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start; }
.wait-grid .lede { margin-top: var(--s5); }
.wait-grid .cost { margin-top: var(--s4); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s8); align-items: end; }
.nf-grid .lede { margin-top: var(--s5); }
.nf-links { display: grid; border-top: 1px solid var(--line-2); }
.nf-links a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg-2); }
.nf-links a:hover { color: var(--fg); }
@media (max-width: 860px) {
  .close-grid, .wait-grid, .nf-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .field-row { flex-direction: column; }
}

/* ---------------------------------------------------------------------------------------------------- download + steps */
.page-head-grid.dl-grid > * { max-width: none; }
.dl-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: end; }
.dl-grid .lede { margin-top: var(--s5); }
.dl-card { min-width: 0; }
.hash { word-break: break-all; color: var(--fg); font-size: 0.8125rem; }
.install { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
.install-intro > * + * { margin-top: var(--s4); }
.install-intro .h2 + p { margin-top: var(--s5); }
.explain > div { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.explain > div:first-child { border-top: 1px solid var(--fg); }
.explain dt { font-weight: 600; }
.explain dd { margin-top: var(--s1); color: var(--fg-2); font-size: var(--fs-small); }
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; }
.steps > li { min-width: 0; counter-increment: step; position: relative; padding: var(--s5) 0 var(--s6) 56px; border-top: 1px solid var(--line); }
.steps > li:first-child { border-top-color: var(--fg); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: calc(var(--s5) - 4px);
                      font: 700 1.875rem/1 var(--ff-display); color: var(--fg); font-variant-numeric: tabular-nums; }
.steps h3 { font: 600 var(--fs-h3)/1.3 var(--ff-text); }
.steps h3 + p, .steps p + pre, .steps pre + p, .steps p + p, .steps h2 + p, .steps h2 + ol, .steps p + ul, .steps ul + p,
.steps .step-shot { margin-top: var(--s3); }
.steps-compact > li { padding-bottom: var(--s5); }
pre { background: var(--c-paper-2); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s3) var(--s4);
      white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: var(--c-ink); }
.paper-2 pre { background: var(--c-paper); }
:not(pre) > code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; padding: 0 0.3em; font-size: 0.86em; }
.night :not(pre) > code, .watch :not(pre) > code { background: var(--c-night-2); }
.sub-steps { padding-left: 1.2em; display: grid; gap: var(--s3); color: var(--fg-2); }
.note { margin-top: var(--s3); font-size: var(--fs-small); color: var(--fg-2); }
.start-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); align-items: start; }
.start-toc { position: sticky; top: 96px; }
.toc-title { font: 600 var(--fs-small) var(--ff-text); color: var(--fg-3); }
.start-toc ol { margin-top: var(--s3); padding-left: 1.2em; display: grid; gap: var(--s2); font-size: var(--fs-small); }
.start-toc a { color: var(--fg-2); text-decoration: none; }
.start-toc a:hover { color: var(--fg); text-decoration: underline; }
.steps-start { max-width: 760px; }
.steps-start > li { scroll-margin-top: 88px; }
@media (max-width: 960px) {
  .dl-grid, .install, .start-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .start-toc { position: static; }
  .steps > li { padding-left: 48px; }
}

/* ---------------------------------------------------------------------------------------------------- reading pages */
.read-wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: var(--s8) var(--gutter) var(--s10); }
.read-wrap-docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); align-items: start; }
.doc { max-width: 72ch; }
.doc h1 { font: 700 clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem)/1.04 var(--ff-display); letter-spacing: -0.01em; }
.doc h1 + p { margin-top: var(--s5); }
.doc > h2, .doc > h3, .doc > h4 { scroll-margin-top: 88px; }
.doc h2 { font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem); margin-top: var(--s8); }
.doc h3 { margin-top: var(--s6); }
.doc h4 { margin-top: var(--s5); font-weight: 600; }
.doc h2 + *, .doc h3 + *, .doc h4 + * { margin-top: var(--s3); }
.doc p, .doc ul, .doc ol, .doc pre, .doc table, .doc blockquote { margin-top: var(--s4); }
.doc p, .doc li { line-height: 1.65; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: var(--s2); }
.doc li::marker { color: var(--fg-3); }
.doc table { display: block; overflow-x: auto; font-size: var(--fs-small); }
.doc thead th { border-bottom-color: var(--fg); }
.doc blockquote { padding-left: var(--s4); border-left: 1px solid var(--line-2); color: var(--fg-2); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
.doc a { text-decoration-color: var(--c-line-paper-2); }
.doc a:hover { text-decoration-color: currentColor; }
.doc-lede { font-size: var(--fs-lede); color: var(--fg-2); line-height: 1.55; }
.doc-index .guide-list { list-style: none; padding: 0; margin-top: var(--s7); border-top: 1px solid var(--fg); }
.guide-list li { padding: var(--s5) 0; border-bottom: 1px solid var(--line); margin: 0; }
.guide-list li > a { font: 600 1.375rem/1.2 var(--ff-display); text-decoration: none; }
.guide-list li > a:hover { text-decoration: underline; text-decoration-color: var(--c-line-paper-2); }
.guide-list .small { margin-top: var(--s2); color: var(--fg-2); }
.doc-rail { position: sticky; top: 96px; font-size: var(--fs-small); padding-top: var(--s2); }
.rail-title a { font-weight: 600; color: var(--fg); text-decoration: none; }
.doc-rail ul { list-style: none; padding: 0; margin-top: var(--s3); display: grid; gap: var(--s1); border-left: 1px solid var(--line); }
.doc-rail li a { display: block; padding: var(--s1) 0 var(--s1) var(--s4); color: var(--fg-2); text-decoration: none; margin-left: -1px;
                 border-left: 1px solid transparent; }
.doc-rail li a:hover { color: var(--fg); }
.doc-rail a[aria-current="page"] { color: var(--fg); font-weight: 600; border-left-color: var(--fg); }
.crumbs { font-size: var(--fs-small); color: var(--fg-3); margin-bottom: var(--s5); }
.crumbs a { color: var(--fg-2); }
.doc-note { font-size: var(--fs-small); color: var(--fg-3); padding-top: var(--s5); border-top: 1px solid var(--line); margin-top: var(--s8) !important; }
/* prelaunch: the "not open yet" notice at the top of every docs, legal and guide page */
.notice-prelaunch { margin-top: var(--s5); padding: var(--s4) var(--s5); background: var(--bg-2); border-left: 3px solid var(--c-lamp-deep);
                    border-radius: var(--r-inner); font-size: var(--fs-small); color: var(--fg); line-height: 1.5; }
.notice-prelaunch strong { font-weight: 600; }
.guide-related { margin-top: var(--s7); }
.guide-related h2 { font-size: 1.375rem; margin-top: 0; }
.guide-related ul { list-style: none; padding: 0; }
.guide-related li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); margin: 0; }
.guide-cta { margin-top: var(--s7); padding: var(--s6); background: var(--c-night); color: var(--c-chalk);
             border-radius: var(--r-frame); --focus: var(--c-lamp); }
.guide-cta p { color: var(--c-chalk-2); margin: 0; }
.guide-cta strong { color: var(--c-chalk); }
.guide-cta .row { margin-top: var(--s5); }
.guide-cta a.cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s6); background: var(--c-lamp);
                   color: var(--c-ink); font-weight: 600; text-decoration: none; border-radius: var(--r-control);
                   transition: background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.guide-cta a.cta:hover { background: var(--c-lamp-hi); }
.guide-cta a.cta:active { transform: scale(0.97); }
.doc-legal h1 + p, .doc-legal h1 + h2 { margin-top: var(--s5); }
@media (max-width: 960px) {
  .read-wrap-docs { grid-template-columns: 1fr; gap: var(--s5); }
  .doc-rail { position: static; }
  .doc-rail ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-left: 0; }
  .doc-rail li a { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------------------------------------------- footer */
.site-foot { padding-block: var(--s8) var(--s6); border-top: 1px solid var(--line); }
.foot-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.foot-brand p { margin-top: var(--s4); color: var(--fg-2); font-size: var(--fs-small); max-width: 46ch; }
.foot-brand p a { color: var(--fg); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); justify-content: flex-end; padding-top: var(--s2); }
.foot-nav a { color: var(--fg-2); text-decoration: none; font-weight: 500; padding: 6px 0; }
.foot-nav a:hover { color: var(--fg); text-decoration: underline; }
.foot-legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); display: grid;
              grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5) var(--s7); align-items: start; }
.disclosure { font-size: var(--fs-micro); line-height: 1.6; color: var(--fg-3); max-width: 96ch; }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-micro); color: var(--fg-3); }
.legal-links a { color: var(--fg-2); text-decoration: none; }
.legal-links a:hover { color: var(--fg); text-decoration: underline; }
@media (max-width: 860px) {
  .foot-row, .foot-legal { grid-template-columns: 1fr; gap: var(--s5); }
  .foot-nav { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .guide-cta a.cta:active { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------------------------------- v3 r3 additions */
.quote-log { margin-top: var(--s6); display: grid; gap: var(--s1); }
.quote-log .mono { color: var(--fg); overflow-wrap: anywhere; }
.quote-src { font-size: var(--fs-micro); color: var(--fg-3); }
.scan-media .quote-log { margin: 0 0 var(--s4); }
@media (max-width: 640px) {
  .tablewrap:has(.stack) { overflow: visible; }
  table.stack, .spec.stack { min-width: 0; }
  table.stack, .stack tbody, .stack tr, .stack th, .stack td { display: block; width: auto !important; }
  .stack thead { display: none; }
  .stack tbody tr { padding: var(--s4) 0; }
  .stack tbody tr:first-child { border-top: 1px solid var(--fg); }
  .stack td { padding: 2px 0; color: var(--fg-2); white-space: normal !important; }
  .stack td[data-label]::before { content: attr(data-label) ": "; color: var(--fg-3); }
  .stack tbody th { padding: 0 0 var(--s1); }
}
/* ---------------------------------------------------------------------------------------------------- v3 r4 additions */
.verbatim { font-family: var(--ff-mono); font-size: var(--fs-mono); color: var(--fg); font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
img.x110 { width: 671px; height: auto; max-width: none; }
.split-flip > .split-media { order: -1; }
@media (max-width: 960px) { .split-flip > .split-media { order: 0; } }
.read-wrap:not(.read-wrap-docs) > .doc { margin-inline: auto; }
@media (max-width: 700px) {
  .win-alert { height: auto; }
  .win-scroll { padding: 10px 12px; }
  .win-scroll img { width: 328px; height: 24px; }
  .rp-mask { left: 12px; top: 10px; width: 328px; height: 24px; }
  .rp-mark { left: 14px; top: 34px; width: 320px; }
}
/* ---------------------------------------------------------------------------------------------------- v3 r5 additions */
.page-head-compact { padding-block: var(--s7) var(--s6); }
.price-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: end; }
.price-head .lede { margin-top: var(--s4); max-width: 56ch; }
.price-head-cta .cost { margin-top: var(--s3); }
@media (max-width: 860px) { .price-head { grid-template-columns: 1fr; gap: var(--s5); } }
.which { margin-top: var(--s5); max-width: 78ch; }
.lead-in { margin-top: 0; }
.nf-head { font: 600 var(--fs-small)/1.4 var(--ff-text); color: var(--fg-3); padding-bottom: var(--s3); }
.nf-links { border-top: 0; }
.nf-links .nf-head + a { border-top: 1px solid var(--line-2); }
.quote-log .mono { max-width: 52ch; }
.waitlist input[type="radio"] { appearance: none; width: 18px; height: 18px; border: 1px solid var(--fg-3); border-radius: 50%;
                                 display: grid; place-items: center; margin: 0; }
.waitlist input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-lamp);
                                        opacity: 0; transform: scale(0.6); transition: transform var(--t-press) var(--ease-out), opacity var(--t-press) var(--ease-out); }
.waitlist input[type="radio"]:checked { border-color: var(--c-lamp); }
.waitlist input[type="radio"]:checked::after { opacity: 1; transform: none; }
.band-tight { padding-top: var(--s7); }

/* ---------------------------------------------------------------------------------------------------- v3 r6 additions */
@media (max-width: 1279px) { .win-alert { top: 410px; } }

/* ---------------------------------------------------------------------------------------------------- v3 r7 additions */
.nf-grid { align-items: center; }
.win-scroll { background: var(--c-capture-white); }
@media (min-width: 701px) { .win-alert { height: 128px; } .win-scroll { padding-bottom: 7px; } }
@media (min-width: 1280px) { .hero-grid { grid-template-rows: auto 1fr; } .hero-after { align-self: start; } }

/* ---------------------------------------------------------------------------------------------------- refine r8 (2026-10-01)
   Product first, one idea per section, and no two neighbouring sections built the same way:
   hero (pitch + windows) / full-width recording / three cases with real log lines / full-bleed Scan capture /
   one big number / a pull quote / plan columns / capture + facts / questions / a centred close. */
.night .caption, .watch .caption { color: var(--fg-2); }
.h2-xl { font-size: var(--fs-statement); line-height: 1.02; letter-spacing: -0.014em; }
.hero .display { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.018em; }
.hero-copy .lede { font-size: var(--fs-lede); color: var(--fg-2); max-width: 34ch; margin-top: var(--s5); }
.hero-copy .cost { margin-top: var(--s5); max-width: 44ch; color: var(--fg-2); }
.hero-copy .cost a { color: var(--fg); }
@media (min-width: 1280px) { .hero { padding-block: var(--s7) var(--s9); } }
.axis-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s3); font-size: var(--fs-small);
               color: var(--fg-2); }
.lg { display: inline-flex; align-items: baseline; gap: var(--s2); }
.lg::before { content: ""; flex: none; width: 9px; height: 9px; transform: translateY(-1px); }
.lg-fill::before { background: var(--c-chalk); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lg-alert::before { background: var(--c-stop); }

/* the recording, full width */
.rec-band { padding-block: var(--s9); }
.rec-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: end; }
.rec-head p { color: var(--fg-2); font-size: var(--fs-lede); line-height: 1.5; max-width: 46ch; }
.player { margin-top: var(--s8); }
.player-frame { position: relative; border-radius: var(--r-frame); overflow: hidden; box-shadow: var(--shadow-window);
                background: var(--c-capture-white); }
.player-frame video { width: 100%; height: auto; cursor: pointer; }
.player-btn { position: absolute; left: var(--s5); bottom: var(--s5); display: inline-flex; align-items: center;
              gap: var(--s3); min-height: 56px; padding: 0 var(--s6) 0 var(--s3); border: 0; border-radius: 28px; cursor: pointer;
              background: var(--c-lamp); color: var(--c-ink); font: 600 1.0625rem/1 var(--ff-text);
              box-shadow: 0 12px 32px -8px rgb(4 9 22 / 0.55);
              transition: background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out), opacity var(--t-ui) ease; }
.player-btn:hover { background: var(--c-lamp-hi); }
.player-btn:active { transform: scale(0.97); }
.player-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--c-ink); position: relative; flex: none; }
.player-icon::after { content: ""; position: absolute; left: 14px; top: 11px; width: 11px; height: 14px; background: var(--c-lamp);
                      clip-path: polygon(0 0, 100% 50%, 0 100%); }
.player .caption { max-width: none; margin-top: var(--s4); }

/* three cases, each with the real log line that proves it */
.gaps { padding-block: var(--s10) var(--s9); }
.gaps-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: end; }
.gaps-head p { color: var(--fg); font-size: var(--fs-lede); line-height: 1.5; max-width: 42ch; }
.cases { list-style: none; padding: 0; margin-top: var(--s9); }
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) var(--s7);
        padding: var(--s7) 0; border-top: 1px solid var(--line-2); }
.case:last-child { border-bottom: 1px solid var(--line-2); }
.case-title { font: 600 var(--fs-title)/1.15 var(--ff-display); color: var(--fg); max-width: 20ch; }
.case-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: 0; }
.case-cols dt { font-size: var(--fs-small); font-weight: 600; color: var(--fg-2); }
.case-cols dt span { font-weight: 400; }
.case-cols dd { margin: var(--s2) 0 0; color: var(--fg); line-height: 1.45; }
.case-cols div:first-child dd { color: var(--fg-2); }
.logline { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.logline-scroll { max-width: 100%; overflow-x: auto; background: var(--c-capture-white); border-radius: var(--r-control);
                  padding: 10px 12px; box-shadow: 0 8px 20px -10px rgb(4 9 22 / 0.6); }
.logline-scroll img { max-width: 100%; height: auto; }
.logline figcaption { font-size: var(--fs-small); color: var(--fg-2); }
.more { margin-top: var(--s6); }
.more summary { cursor: pointer; font-weight: 600; color: var(--fg); width: fit-content; list-style: none;
                display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                       transform: translateY(-2px) rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.more .tablewrap { margin-top: var(--s4); }
.footnote { margin-top: var(--s6); font-size: var(--fs-small); color: var(--fg-2); max-width: 80ch; }

/* the Scan, shown at nearly its real size */
.scan-band { padding-block: var(--s10) var(--s9); }
.scan-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: end; }
.scan-intro p { color: var(--fg-2); font-size: var(--fs-lede); line-height: 1.5; max-width: 46ch; }
.scan-intro p.small { margin-top: var(--s5); font-size: var(--fs-small); line-height: 1.55; color: var(--fg-3); }
.shot-bleed { margin-top: var(--s8); }
.shot-frame { width: min(1520px, calc(100% - 2 * var(--gutter))); margin-inline: auto; border-radius: var(--r-frame);
              overflow: hidden; background: var(--c-capture-white); box-shadow: var(--shadow-window); }
.shot-frame img { width: 100%; height: auto; }
.shot-bleed .caption { margin-top: var(--s5); max-width: calc(var(--max) + 2 * var(--gutter)); color: var(--fg-2); }
.shot-bleed .caption strong { color: var(--fg); font-weight: 600; }

/* the replay: one big number */
.replay { padding-block: var(--s10); }
.replay-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.big-stat { font: 700 clamp(8rem, 3rem + 15vw, 18rem)/0.8 var(--ff-display); letter-spacing: -0.04em; color: var(--fg);
            display: flex; align-items: baseline; gap: 0.06em; }
.big-stat .of { font-size: 0.3em; letter-spacing: -0.01em; color: var(--fg-3); }
.replay-lede { margin-top: var(--s4); font-size: var(--fs-lede); color: var(--fg-2); }
.replay-lede strong { color: var(--fg); }
.outcomes { list-style: none; padding: 0; margin-top: var(--s6); }
.outcomes li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0;
               border-top: 1px solid var(--line); color: var(--fg-2); }
.outcomes li:last-child { border-bottom: 1px solid var(--line); }
.outcomes .tag { font-size: var(--fs-small); font-weight: 600; color: var(--fg-3); padding-top: 2px; }
.outcomes .hit { color: var(--fg); }
.outcomes .hit .tag { color: var(--state-clear); display: inline-flex; align-items: center; gap: 6px; align-self: start; }
.outcomes .hit .tag::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.replay-foot { margin-top: var(--s6); color: var(--fg-2); max-width: 60ch; }
.replay-foot strong { font: 700 1.5rem/1 var(--ff-display); color: var(--fg); }

/* the builder: a pull quote */
.builder { padding-block: var(--s10); }
.builder-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); }
.pull { grid-column: 1 / span 10; margin: 0; font: 600 var(--fs-statement)/1.06 var(--ff-display); letter-spacing: -0.012em;
        color: var(--fg); text-wrap: balance; }
.builder-text { grid-column: 6 / -1; margin-top: var(--s8); max-width: 58ch; }
.builder-text p { font-size: 1.125rem; line-height: 1.6; color: var(--fg-2); }
.builder-text p + p { margin-top: var(--s4); }
.builder-text a { color: var(--fg); }
.builder-text .sign { margin-top: var(--s5); font-size: var(--fs-small); color: var(--fg); font-weight: 600; }
.builder-text .sign::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--c-lamp);
                              vertical-align: middle; margin-right: var(--s3); }

/* plans as four columns */
.plans-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: end; }
.plans-head p { color: var(--fg-2); font-size: var(--fs-lede); max-width: 48ch; }
.tiers { list-style: none; padding: 0; margin-top: var(--s7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
         border-top: 1px solid var(--fg); }
.tiers > li { padding: var(--s5) var(--s5) 0 0; }
.tiers > li + li { padding-left: var(--s5); border-left: 1px solid var(--line); }
.tier-name { font: 600 var(--fs-title)/1.1 var(--ff-display); }
.tier-price { margin-top: var(--s4); font: 700 3.5rem/1 var(--ff-display); letter-spacing: -0.02em; }
.tier-price span { font: 500 var(--fs-small) var(--ff-text); color: var(--fg-3); margin-left: 2px; letter-spacing: 0; }
.tier-note { margin-top: var(--s2); font-size: var(--fs-small); color: var(--fg-3); }
.tier-what { margin-top: var(--s4); color: var(--fg-2); font-size: 1rem; line-height: 1.5; }
#plans .terms { margin-top: var(--s7); }

/* what it touches: the Status capture beside the facts */
.reads-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s8); align-items: center; }
.reads-lead { margin-top: var(--s5); font-size: var(--fs-lede); line-height: 1.5; color: var(--fg); }
.facts-list { margin-top: var(--s6); }
.facts-list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s4); padding: var(--s3) 0;
                    border-top: 1px solid var(--line); font-size: var(--fs-small); }
.facts-list dt { font-weight: 600; }
.facts-list dd { margin: 0; color: var(--fg-2); }

/* questions */
.faq-grid .faq > div:first-child { border-top: 1px solid var(--fg); }
.faq dd { line-height: 1.55; }

/* the close, centred */
.close { padding-block: var(--s11); }
.close-center { text-align: center; display: grid; justify-items: center; }
.close-center .display { font-size: var(--fs-statement); max-width: 16ch; }
.close-center > p { margin-top: var(--s4); font-size: var(--fs-lede); color: var(--fg-2); }
.close-center .actions { justify-content: center; }
.waitlist-line { margin-top: var(--s7); width: 100%; max-width: 540px; padding: 0; background: none; border: 0; text-align: left; }
.waitlist-line label:not(.radio) { font-weight: 400; color: var(--fg-2); margin: 0; }

@media (max-width: 1279px) {
  .hero-copy { padding-top: 0; }
  .hero-copy .lede { max-width: 52ch; }
}
@media (max-width: 960px) {
  .rec-head, .gaps-head, .scan-intro, .plans-head, .replay-grid, .reads-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .case { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .tiers > li:nth-child(3) { border-left: 0; padding-left: 0; }
  .tiers > li:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: var(--s5); }
  .pull, .builder-text { grid-column: 1 / -1; }
  .builder-text { margin-top: var(--s6); }
  .gaps, .scan-band, .replay, .builder, .rec-band { padding-block: var(--s8); }
  .close { padding-block: var(--s9); }
  .cases { margin-top: var(--s7); }
}
@media (max-width: 700px) {
  .case-cols { grid-template-columns: 1fr; gap: var(--s3); }
  .case-cols > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s3); }
  .case-cols dd { margin: 0; }
  .logline-scroll img, .shot-frame img { max-width: none; width: auto; }
  .shot-frame { overflow-x: auto; }
  .big-stat { font-size: 8rem; }
  .outcomes li { grid-template-columns: 1fr; gap: var(--s1); }
  .tiers { grid-template-columns: 1fr; }
  .tiers > li, .tiers > li + li { border-left: 0; padding-left: 0; padding-right: 0; }
  .tiers > li + li { border-top: 1px solid var(--line); margin-top: var(--s5); }
  .facts-list > div { grid-template-columns: 1fr; gap: var(--s1); }
  .player-btn { min-height: 48px; font-size: 1rem; }
}
.player-len { font-weight: 400; font-variant-numeric: tabular-nums; padding-left: var(--s2); border-left: 1px solid rgb(17 26 46 / 0.3); }

/* pricing, refine r8: four plan columns that read as a product page, the Setup capture large, terms as short facts */
.price-hero { padding-block: var(--s9) var(--s8); }
.price-hero .display-page { font-size: var(--fs-display); line-height: 1; }
.price-hero .lede { max-width: 46ch; color: var(--fg-2); }
.price-hero .cost { color: var(--fg-2); max-width: 40ch; }
.plans-band { padding-block: var(--s8) var(--s9); }
.plans-line { font-size: var(--fs-small); color: var(--fg-2); }
.tiers-full { margin-top: var(--s4); }
.tiers-full > li { display: flex; flex-direction: column; padding-bottom: var(--s2); }
.tier-sub { margin-top: var(--s1); font-size: var(--fs-small); color: var(--fg-3); }
.tier-list { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); display: grid; gap: var(--s2); flex: 1 1 auto;
             align-content: start; }
.tier-list li { font-size: 0.9688rem; line-height: 1.45; color: var(--fg-2); padding-left: 16px; position: relative; }
.tier-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1px; background: var(--fg-3); }
.tier-list strong { color: var(--fg); }
.tiers-full .btn { align-self: flex-start; }
.protect-line { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); max-width: 90ch; color: var(--fg-2); }
.protect-line strong { color: var(--fg); }
.day1 { padding-block: var(--s9); }
.day1-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: end; }
.day1-head p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; max-width: 60ch; }
.day1-head a { color: var(--fg); }
.terms-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); align-items: start; }
.terms-list { margin-top: 0; }
.terms-list > div { font-size: 1rem; padding: var(--s4) 0; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.terms-list > div:first-child { border-top-color: var(--fg); }
@media (max-width: 960px) {
  .day1-head, .terms-grid { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 700px) {
  .tiers-full > li { padding-bottom: var(--s5); }
  .terms-list > div { grid-template-columns: 1fr; }
}
.case > *, .cases, .logline { min-width: 0; }
@media (max-width: 700px) {
  .win-alert { top: auto; }
  .player-btn { position: static; margin: var(--s3) 0 0; box-shadow: none; }
  .player-frame { overflow: visible; background: none; box-shadow: none; }
  .player-frame video { border-radius: var(--r-frame); box-shadow: var(--shadow-window); }
  .player-frame.is-playing .player-btn { opacity: 1; pointer-events: auto; }
}

/* scan page, refine r8: the capture under the hero, findings as a reading grid */
.scan-hero { padding-bottom: var(--s9); }
.scan-hero .shot-bleed { margin-top: var(--s8); }
.findings { margin-top: var(--s7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s6);
            border-top: 1px solid var(--fg); padding-top: var(--s6); }
.findings dt { font: 600 var(--fs-title)/1.15 var(--ff-display); }
.findings dd { margin: var(--s3) 0 0; color: var(--fg-2); line-height: 1.55; }
.cannot { margin-top: var(--s8); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7);
          padding-top: var(--s6); border-top: 1px solid var(--line); }
.cannot p { font-size: var(--fs-lede); line-height: 1.5; color: var(--fg); max-width: 60ch; }
@media (max-width: 960px) { .findings { grid-template-columns: 1fr 1fr; } .cannot { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 640px) { .findings { grid-template-columns: 1fr; gap: var(--s5); } }

/* download + start, refine r8: no dead column beside long steps; captures fit their column */
@media (min-width: 961px) { .install-intro { position: sticky; top: 96px; align-self: start; } }
.steps .frame { width: auto; }
.steps .frame > img { max-width: 100%; height: auto; }
em { font-style: italic; }

/* ---------------------------------------------------------------------------------------------------- refine r9 (critic round 1)
   One frame rule for every capture (8 px radius, 1 px hairline, inside the column, never clipped mid-line),
   one 96 px section rhythm, and the heading-left / paragraph-right head used once per page at most. */
.band { padding-block: var(--s9); }
.shot-frame, .frame, .stage, .logline-box, .player-frame { border-radius: 8px; }
.frame { background: var(--c-capture-white); border: 1px solid var(--line); padding: 0; overflow: hidden; }
.frame > img, .frame > video { border-radius: 0; outline: 0; max-width: 100%; height: auto; }
.night .frame, .watch .frame { border-color: var(--line-2); background: var(--c-capture-white); }

/* hero: one framed pane, the chart above the StopWarden window, nothing overlapping */
.stage { height: auto; width: 720px; display: flex; flex-direction: column; background: var(--c-capture-white);
         border: 1px solid var(--line-2); overflow: hidden; box-shadow: var(--shadow-window); }
.win { position: relative; left: auto; top: auto; border-radius: 0; box-shadow: none; }
.win-chart { width: 720px; height: 442px; }
.win-alert { left: auto; top: auto; width: 100%; height: auto; border-top: 1px solid var(--c-line-paper); }
@media (min-width: 701px) { .win-alert { height: 128px; } }
@media (max-width: 1279px) { .win-alert { left: auto; top: auto; } .stage { max-width: 100%; } }
@media (max-width: 700px) {
  .stage { width: 100%; }
  .win-chart { display: none; }
  .win-alert { border-top: 0; }
}
.hero-copy { padding-top: var(--s6); }
.hero-figure .caption { color: var(--fg-2); }

/* the recording: centred head, the frame, then one control row */
.rec-band { padding-top: var(--s6); }
.rec-head { display: block; text-align: center; }
.rec-head .h2 { max-width: 20ch; margin-inline: auto; }
.rec-head p { margin: var(--s4) auto 0; max-width: 46ch; }
.player { margin-top: var(--s7); }
.player-frame { border: 1px solid var(--line-2); }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.player-bar .caption { margin: 0; }
.player-btn { position: static; transform: none; min-height: 48px; padding: 0 var(--s5) 0 var(--s2); border-radius: 24px;
              box-shadow: none; gap: var(--s3); }
.player-btn:active { transform: scale(0.97); }
.player-icon { width: 32px; height: 32px; }
.player-icon::after { left: 12px; top: 9px; }

/* the three cases */
.gaps { padding-block: var(--s9); }
.gaps-title { max-width: 16ch; }
.gaps-lead { margin-top: var(--s5); font-size: var(--fs-lede); max-width: 52ch; color: var(--fg); }
.gaps-lead strong { font-weight: 600; }
.cases { margin-top: var(--s8); }
.case { padding: var(--s6) 0; }
.case-cols dt { color: var(--fg-2); }
.logline-box { width: 100%; background: var(--c-capture-white); border: 1px solid var(--line-2); padding: 12px 14px; overflow: hidden; }
.logline-box img { display: block; max-width: 100%; height: auto; }
.logline-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.logline { flex-direction: column; align-items: stretch; gap: var(--s2); }
.logline figcaption { font-size: var(--fs-small); color: var(--fg-2); }
.more { margin-top: var(--s5); }
@media (max-width: 700px) {
  .logline-box img { display: none; }
  .logline-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
                  font: 400 0.8125rem/1.5 var(--ff-mono); color: var(--c-ink); overflow-wrap: anywhere; }
}

/* the Scan: counts beside the report at actual size */
.scan-band { padding-block: var(--s9); }
.scan-intro { align-items: start; }
.scan-show { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); margin-top: var(--s8); align-items: start; }
.scan-counts { list-style: none; padding: 0; display: grid; gap: var(--s4); }
.scan-counts li { font-size: var(--fs-small); color: var(--fg-2); line-height: 1.35; padding-top: var(--s3); border-top: 1px solid var(--line); }
.scan-counts strong { display: block; font: 700 2.5rem/1 var(--ff-display); color: var(--fg); margin-bottom: var(--s1); }
.scan-shot .shot-frame { width: auto; margin: 0; border: 1px solid var(--line-2); box-shadow: var(--shadow-window); }
.scan-shot .shot-frame img { width: auto; max-width: 100%; height: auto; }
.scan-shot .caption { margin-top: var(--s3); max-width: none; }
@media (max-width: 960px) {
  .scan-show { grid-template-columns: 1fr; }
  .scan-counts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 700px) { .scan-shot .shot-frame { overflow-x: auto; } .scan-shot .shot-frame img { max-width: none; } }

/* the replay: the number, labelled */
.replay { padding-block: var(--s9); }
.replay-grid { align-items: start; }
.big-stat { display: block; font: 700 clamp(6rem, 3rem + 7vw, 10rem)/0.85 var(--ff-display); letter-spacing: -0.03em; }
.big-stat span { font-size: 0.34em; letter-spacing: -0.005em; color: var(--fg-3); }
.big-stat-label { margin-top: var(--s4); font-size: var(--fs-small); color: var(--fg-2); max-width: 18ch; }

/* the builder: a short letter, centred narrow column */
.builder { padding-block: var(--s9); }
.builder-wrap { display: block; max-width: calc(640px + 2 * var(--gutter)); }
.builder-title { font: 600 var(--fs-title)/1.15 var(--ff-display); }
.builder-text { margin-top: var(--s5); max-width: none; }
.builder-text p { font-size: 1.1875rem; line-height: 1.6; color: var(--fg); }
.builder-text .sign { margin-top: var(--s5); font-size: var(--fs-small); font-weight: 600; color: var(--fg-2); }
.builder-text .sign::before { content: "— "; display: inline; width: auto; height: auto; background: none; margin: 0; }

/* plans */
.tiers { margin-top: var(--s6); }
.tier-flag { display: inline-block; margin-left: var(--s2); padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px;
             font: 600 0.75rem/1.4 var(--ff-text); color: var(--fg-2); vertical-align: 0.3em; letter-spacing: 0.01em; }
.terms-lines { list-style: none; padding: 0; margin-top: var(--s6); display: grid; gap: var(--s1); color: var(--fg-2); max-width: 80ch; }
#plans .actions { margin-top: var(--s5); }

/* questions: two columns, no sticky heading */
.faq-cols { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s8); }
.faq-cols > div { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.faq-cols > div:first-child { border-top: 1px solid var(--line); }
@media (max-width: 760px) { .faq-cols { grid-template-columns: 1fr; } }

/* close */
.close { padding-block: var(--s10); }
.waitlist-line { text-align: center; }
.waitlist-line .field-row { margin-top: var(--s3); }
.waitlist-line input[type="email"] { background: var(--c-night-2); border-color: var(--c-line-night-2); }

/* pricing r9 */
.tier-list li { padding-left: 0; }
.tier-list li::before { display: none; }
.protect-line { max-width: none; }
.protect-line strong + * { max-width: 90ch; }
/* hero pane at the Activity capture's width: the chart is shown at 92 % so both edges meet */
.stage { width: 662px; }
.win-chart, .win-chart-inner { width: 662px; height: 406px; }
.win-chart-inner img { width: 662px; height: 406px; }
.rp-ring { left: 443px; top: 226px; width: 64px; height: 64px; }
@media (max-width: 1279px) { .stage { max-width: 100%; } }
.faq-cols > div, .faq-cols > div:first-child { border-bottom: 0; }
.faq-cols > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
.win-line { display: none; }
@media (max-width: 700px) {
  .win-scroll picture, .win-scroll .rp-mask, .win-scroll .rp-mark { display: none; }
  .win-line { display: block; font: 400 0.8125rem/1.5 var(--ff-mono); color: var(--c-ink); overflow-wrap: anywhere;
              padding-bottom: 6px; border-bottom: 3px solid var(--c-lamp); }
}
.day1-head { align-items: start; }
.day1-shot { margin-top: var(--s7); }
.win-line, .logline-text { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
/* phones: the recording is cropped to the StopWarden window (the desktop margins are empty), and the wide
   captures that scroll sideways fade at the right edge so they read as "more this way", not as cut off */
@media (max-width: 700px) {
  .player-frame video { aspect-ratio: 864 / 720; object-fit: cover; }
}

/* ---------------------------------------------------------------------------------------------------- refine r10 (critic round 2)
   One H2 size for every section head, 64 px section seams, one left edge for section heads,
   breathing room after the hero's alert line, no sideways page scroll on phones. */
.h2-xl { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.008em; }
.close-center .display { font-size: var(--fs-h2); }
.band, .gaps, .scan-band, .replay, .builder, .rec-band { padding-block: var(--s8); }
.close { padding-block: var(--s9); }
.rec-head { text-align: left; }
.rec-head .h2 { margin-inline: 0; }
.builder-wrap { max-width: calc(var(--max) + 2 * var(--gutter)); }
.builder-text { max-width: 62ch; }
.stage { width: 680px; }
.win-chart, .win-chart-inner, .win-chart-inner img { width: 680px; height: 417px; }
.rp-ring { left: 455px; top: 232px; width: 66px; height: 66px; }
.logline figcaption, .shot-bleed .caption, .scan-shot .caption, .reads-shot .caption { color: var(--fg); }
.scan-show > *, .scan-shot, .scan-shot .shot-frame { min-width: 0; max-width: 100%; }
@media (max-width: 1279px) { .stage { max-width: 100%; } .win-chart, .win-chart-inner { max-width: 100%; } }
@media (max-width: 700px) {
  .stage, .win-chart { width: 100%; }
  .actions .btn-lg { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------------- v4 Full Frame (2026-10-01)
   The home page on the Full Frame concept (business/creative/web/concepts/full-frame/): one real window, full width,
   rising from the bottom of a Watch Blue hero; inline section heads (statement + softer second clause); Protect leads
   every comparison. Values below are the ones picked in the v4 variant passes (business/creative/web/v4/). */
body:has(.ff-hero, .ff-page) .site-head { background: var(--c-watch); border-bottom-color: #34528F; }
body:has(.ff-hero, .ff-page) .site-head .menu-panel { background: #1A3269; }

.ff-hero { padding-top: var(--s8); overflow-x: clip; }
.ff-h1 { font: 700 clamp(2.5rem, 1rem + 3vw, 3.375rem)/1.0 var(--ff-display); letter-spacing: -0.012em; }
.ff-h1 span { display: block; }
.ff-h1 .soft { color: var(--c-chalk-2); }
.ff-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); margin-top: var(--s5); align-items: start; }
.ff-lede { font-size: 1.1875rem; line-height: 1.5; color: var(--c-chalk-2); max-width: 48ch; letter-spacing: 0.004em; }
.ff-lede strong { color: var(--c-chalk); font-weight: 500; }
.ff-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.ff-cost { font-size: var(--fs-small); line-height: 1.5; color: var(--c-chalk-2); max-width: 42ch; }
.ff-cost a { color: var(--c-chalk); }

.ff-frame { margin-top: var(--s7); margin-left: max(var(--gutter), calc((100vw - var(--max)) / 2));
            background: var(--c-night); border-radius: 16px 0 0 0; padding: 22px 0 0 40px; overflow: hidden;
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.ff-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-right: 40px; margin-bottom: var(--s4);
          font-size: 0.875rem; line-height: 1.45; color: var(--c-chalk-3); }
.ff-cap b { font-size: 0.8125rem; font-weight: 500; color: var(--c-chalk-2); }
.ff-key { display: inline-flex; align-items: center; gap: var(--s2); color: var(--c-chalk-2); }
.ff-key::before { content: ""; flex: none; width: 18px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 2px var(--c-stop); }
.ff-shot { position: relative; width: calc(1064px * 1.2); border-radius: var(--r-frame) var(--r-frame) 0 0; overflow: hidden; }
.ff-shot img { display: block; width: 100%; height: auto; }
.ff-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); pointer-events: none; }
.ff-mark { position: absolute; left: 1.9%; top: 82.5%; width: 97.6%; height: 15.5%; border-radius: 3px; box-shadow: 0 0 0 2px var(--c-stop); }
.ff-typed { display: none; }

.ff-inline { font: 600 clamp(1.625rem, 1.1rem + 1.4vw, 2.375rem)/1.15 var(--ff-display); letter-spacing: -0.005em; max-width: 40ch; }
.ff-inline span { color: var(--c-chalk-3); }
.ff-inline-ink { color: var(--c-ink); }
.ff-inline-ink span { color: var(--c-ink-3); }
.ff-h3 { font: 600 var(--fs-title)/1.15 var(--ff-display); color: var(--c-chalk); }
.ff-h3-ink { color: var(--c-ink); }
.ff-src { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-3); max-width: 62ch; }

.ff-does { padding-block: var(--s9) var(--s10); border-top: 1px solid rgb(255 255 255 / 0.04); }
.ff-seq, .ff-log { list-style: none; padding: 0; display: grid; }
.ff-seq li, .ff-log li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5); padding: 18px 0; border-top: 1px solid var(--line); }
.ff-seq li:last-child, .ff-log li:last-child { border-bottom: 1px solid var(--line); }
.ff-seq time, .ff-log time { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.ff-seq p, .ff-log p { color: var(--fg-2); }
.ff-seq strong, .ff-log strong { color: var(--fg); font-weight: 600; }
/* the no-stop story, left to right: four beats on one rule, the close marked in lamp */
.ff-seq li, .ff-seq li:last-child { grid-template-columns: 1fr; gap: 10px; padding: var(--s4) 0 0; border-top: 2px solid var(--line-2); border-bottom: 0; }
.ff-log .crit time { color: var(--c-stop-on-paper); }
.ff-seq .crit, .ff-log .crit { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; }

.ff-does .ff-h3 { margin-top: var(--s10); max-width: 30ch; }

.ff-proof { padding-block: var(--s9); }
.ff-proof .ff-log { background: var(--c-night); border-radius: 10px; padding: var(--s2) var(--s5); box-shadow: var(--shadow-window);
                   --line: var(--c-line-night); }
.ff-proof .ff-log li:first-child { border-top: 0; }
.ff-proof .ff-log li:last-child { border-bottom: 0; }
.ff-proof .ff-log time { color: var(--c-chalk-3); }
.ff-proof .ff-log p { color: var(--c-chalk-2); }
.ff-proof .ff-log strong { color: var(--c-chalk); }
.ff-proof .ff-log .crit time { color: var(--c-stop-on-night); }
.ff-raw { font-size: 0.78125rem; line-height: 1.5; overflow-wrap: anywhere; margin-bottom: var(--s1); }
.ff-proof .ff-log .ff-raw { color: var(--c-chalk-3); }
.ff-replay { margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--c-ink); display: grid;
             grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s5) var(--s7); }
.ff-replay > .ff-h3 { grid-column: 1; grid-row: 1 / span 4; }
.ff-replay > *:not(.ff-h3) { grid-column: 2; }
.ff-replay-lede { color: var(--fg-2); max-width: 64ch; }
.ff-facts { list-style: none; padding: 0; display: grid; }
.ff-facts li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s4); align-items: baseline; padding: var(--s3) 0;
               border-top: 1px solid var(--line); color: var(--fg-2); }
.ff-facts li:last-child { border-bottom: 1px solid var(--line); }
.ff-facts strong { font: 700 2rem/1 var(--ff-display); color: var(--fg); }
.ff-replay .sign { font-size: var(--fs-small); font-weight: 600; color: var(--fg-2); }

.ff-how { padding-block: var(--s9) var(--s10); }
.ff-steps { list-style: none; padding: 0; margin-top: var(--s7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--s6); align-items: start; }
.ff-steps > li { border-top: 1px solid var(--line-2); padding-top: var(--s5); display: grid; gap: var(--s3); align-content: start; color: var(--fg-2); }
.ff-steps > li.is-protect { background: var(--c-night-2); border: 1px solid var(--c-line-night-2); border-top: 2px solid var(--c-lamp);
                            border-radius: 0 0 8px 8px; padding: var(--s5); }
.ff-step-n { font: 600 var(--fs-title)/1.1 var(--ff-display); color: var(--fg); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.ff-step-n .num { color: var(--fg-3); }
.ff-tag { font: 500 var(--fs-small)/1.3 var(--ff-text); color: var(--fg-3); }
.is-protect .ff-tag { color: var(--c-lamp); }
.ff-step-more { font-size: var(--fs-small); color: var(--fg-3); }
.ff-step-more a { color: var(--fg-2); }
.ff-steps .link-arrow { justify-self: start; color: var(--fg); }
.ff-does-list { list-style: none; padding: 0; display: grid; }
.ff-does-list li { padding: var(--s2) 0; border-top: 1px solid var(--line); color: var(--fg); font-size: 0.9688rem; line-height: 1.5; }
.ff-limits { margin-top: var(--s9); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s4) var(--s7);
             padding-top: var(--s6); border-top: 1px solid var(--line); }
.ff-limits ul { padding-left: 1.1em; display: grid; gap: var(--s3); color: var(--fg-2); max-width: 70ch; }

.ff-plans { padding-block: var(--s9); }
.ff-tiers { list-style: none; padding: 0; margin-top: var(--s7); display: grid; grid-template-columns: 1fr 1.25fr 1fr 1fr; gap: var(--s4); align-items: stretch; }
.ff-tiers > li { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-frame); }
.ff-tiers > li.is-pick { background: var(--c-night); color: var(--c-chalk); border-color: var(--c-night); box-shadow: var(--shadow-window);
                         --fg-2: var(--c-chalk-2); --fg-3: var(--c-chalk-3); --line-2: var(--c-line-night-2); }
.ff-tier-job { margin-top: var(--s1); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--fg); }
.is-pick .ff-tier-job { color: var(--c-lamp); }
.is-pick .tier-what { color: var(--c-chalk-2); }

.ff-h1-page { font-size: clamp(2rem, 1rem + 2vw, 2.75rem); }
@media (max-width: 900px) { .ff-h1-page { font-size: 2rem; } }
/* the pricing page's pick: Standard as the one Night card (same treatment as the home teaser) */
.tiers-full > li.is-pick { background: var(--c-night); color: var(--c-chalk); border-radius: var(--r-frame); padding: var(--s5);
                           box-shadow: var(--shadow-window); --fg: var(--c-chalk); --fg-2: var(--c-chalk-2); --fg-3: var(--c-chalk-3);
                           --line: var(--c-line-night); --line-2: var(--c-line-night-2); }
.tiers-full > li.is-pick + li { border-left: 0; }
.tiers-full > li.is-pick .tier-sub { color: var(--c-lamp); font-weight: 600; }
.tiers-full > li.is-pick .tier-list strong { color: var(--c-chalk); }
/* the close bookends the hero: Watch Blue, the headline on two lines */
.ff-close .display { max-width: 24ch; }
.ff-close .waitlist-line input[type="email"] { background: #1A3269; border-color: #4A67A3; }

@media (max-width: 1100px) {
  .ff-tiers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .ff-row, .ff-does-grid, .ff-proof-grid, .ff-case, .ff-replay, .ff-limits { grid-template-columns: 1fr; }
  .ff-replay > .ff-h3, .ff-replay > *:not(.ff-h3) { grid-column: 1; grid-row: auto; }
  .ff-steps { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 900px) {
  .ff-hero { padding-top: var(--s6); padding-bottom: var(--s7); }
  .ff-h1 { font-size: 2.125rem; }
  .ff-row { gap: var(--s5); margin-top: var(--s4); }
  .ff-lede { font-size: 1.0625rem; }
  .ff-long { display: none; }
  .ff-frame { margin-top: var(--s7); margin-left: var(--s4); padding: 18px 0 0 18px; overflow-x: auto; overscroll-behavior-x: contain; }
  .ff-cap { flex-direction: column; gap: var(--s1); padding-right: 18px; }
  .ff-cap-desc { display: none; }
  .ff-shot { width: 1064px; }
  .ff-typed { display: block; margin: 0 var(--s4); padding: 14px 16px; border-radius: 0 0 10px 10px;
              background: rgb(242 238 229 / 0.06); box-shadow: inset 0 0 0 1px rgb(242 238 229 / 0.14); }
  .ff-typed .mono { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--c-chalk); overflow-wrap: anywhere; }
  .ff-typed small { display: block; margin-top: var(--s2); font-size: 0.8125rem; color: var(--c-chalk-3); }
}
@media (max-width: 700px) {
  .ff-does, .ff-how { padding-block: var(--s8) var(--s9); }
  .ff-proof, .ff-plans { padding-block: var(--s8); }
  .ff-log li { grid-template-columns: 1fr; gap: var(--s1); }
  .ff-tiers { grid-template-columns: 1fr; }
  .ff-facts li { grid-template-columns: 52px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------------------------------- v5 (2026-10-01)
   Sean's v4 review: pricing and the first screen are the bar; three sections were text and tables, not designed
   objects. v5 turns them into objects built from the pricing page's own language (the one Night card on paper, big
   display numerals, lamp for the one light) and adds a real player around the recording. Picks and reasons:
   business/creative/web/v5/picks.md. Motion follows Emil Kowalski's rules: transitions not keyframes, ease-out,
   under 300 ms, transform/opacity/filter only, nothing moves under prefers-reduced-motion. */
.ff-btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
.watch .btn-quiet { border-color: #5B78B3; }
.watch .btn-quiet:hover { background: #1A3269; border-color: var(--c-chalk-2); }

/* No visible sideways scrollbar anywhere (Sean, v4 review). A wide real capture on a phone still swipes, but shows
   no scrollbar and no fade: it is cut cleanly at the edge, and the line that matters is also typed out as text. */
.ff-frame, .shot-frame, .scan-shot .shot-frame { scrollbar-width: none; }
.ff-frame::-webkit-scrollbar, .shot-frame::-webkit-scrollbar { display: none; }
.doc th, .doc td { overflow-wrap: anywhere; }

/* ---- the player ---------------------------------------------------------------------------------------------- */
.pl-band { padding-block: var(--s9); }
.pl { margin-top: var(--s7); }
.pl-win { background: #0A1226; border: 1px solid var(--c-line-night-2); border-radius: 14px; overflow: hidden;
          box-shadow: 0 40px 80px -32px rgb(2 6 18 / 0.9), 0 2px 8px rgb(2 6 18 / 0.5); }
.pl-titlebar { display: flex; align-items: center; gap: var(--s4); min-height: 42px; padding: 0 var(--s4);
               font: 500 0.8125rem/1.3 var(--ff-text); color: var(--c-chalk-3); border-bottom: 1px solid var(--c-line-night); }
.pl-name { display: inline-flex; align-items: center; gap: var(--s2); color: var(--c-chalk-2); font-weight: 600; }
.pl-name img { width: 16px; height: 16px; }
.pl-meta { flex: 1; text-align: center; }
.pl-len { white-space: nowrap; }
.pl-stage { position: relative; background: #E6E6E6; aspect-ratio: 16 / 9; }
.pl-stage video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.pl-stage::after { content: ""; position: absolute; inset: 0; background: rgb(13 23 48 / 0.16); pointer-events: none;
                   transition: opacity 200ms var(--ease-out); }
.pl.is-started .pl-stage::after { opacity: 0; }
.pl.is-ended .pl-stage::after { opacity: 1; }
.pl-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; white-space: nowrap; z-index: 1;
          display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border: 0; border-radius: 999px;
          background: rgb(13 23 48 / 0.92); color: var(--c-chalk); font: 600 1.0625rem/1 var(--ff-text); cursor: pointer;
          box-shadow: 0 18px 40px -12px rgb(2 6 18 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08);
          transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background-color var(--t-ui) ease; }
.pl-big:hover { background: var(--c-night-2); }
.pl-big:active { transform: translate(-50%, -50%) scale(0.97); }
.pl-big-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-lamp);
               transition: background-color var(--t-ui) ease; }
.pl-big:hover .pl-big-icon { background: var(--c-lamp-hi); }
.pl-big-icon svg { fill: var(--c-ink); transform: translateX(1.5px); }          /* optical centre of the triangle */
.pl-big-len { font: 500 0.875rem/1 var(--ff-text); color: var(--c-chalk-3); padding-left: 12px; border-left: 1px solid var(--c-line-night-2); }
.pl.is-started .pl-big { opacity: 0; transform: translate(-50%, -50%) scale(0.96); pointer-events: none; }
.pl.is-ended .pl-big { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }

.pl-ctrl { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s4) 0 var(--s2);
           border-top: 1px solid var(--c-line-night); }
.pl-pp { position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
         color: var(--c-chalk); cursor: pointer; transition: background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.pl-pp:hover { background: var(--c-night-2); }
.pl-pp:active { transform: scale(0.94); }
.pl-pp svg { position: absolute; left: 12px; top: 12px; fill: currentColor;
             transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out); }
.pl-pp .i-play { transform: translateX(1px); }
.pl-pp .i-pause { opacity: 0; transform: scale(0.6); filter: blur(2px); }
.pl.is-playing .pl-pp .i-play { opacity: 0; transform: scale(0.6); filter: blur(2px); }
.pl.is-playing .pl-pp .i-pause { opacity: 1; transform: none; filter: none; }
.pl-scrub { position: relative; flex: 1; height: 44px; }
.pl-rail { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
           background: rgb(242 238 229 / 0.16); }
.pl-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--c-lamp); transform-origin: 0 50%; transform: scaleX(0); }
.pl-tick { position: absolute; top: -4px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--c-chalk-3); }
.pl-tick.is-alert { background: var(--c-stop-on-night); }
.pl-scrub input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer;
                  -webkit-appearance: none; appearance: none; }
.pl-scrub input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.pl-scrub input::-moz-range-track { height: 44px; background: transparent; }
.pl-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 15px; border-radius: 50%;
                                        background: var(--c-chalk); box-shadow: 0 1px 4px rgb(2 6 18 / 0.6);
                                        transition: transform var(--t-press) var(--ease-out); }
.pl-scrub input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--c-chalk); }
.pl-scrub input:hover::-webkit-slider-thumb { transform: scale(1.2); }
.pl-scrub input:focus-visible { outline: none; }
.pl-scrub input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--c-night), 0 0 0 5px var(--c-lamp); }
.pl-scrub input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--c-night), 0 0 0 5px var(--c-lamp); }
.pl-fs { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
         color: var(--c-chalk-2); cursor: pointer; transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.pl-fs:hover { background: var(--c-night-2); color: var(--c-chalk); }
.pl-fs:active { transform: scale(0.94); }
.pl-fs svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-time { flex: none; min-width: 7.5ch; text-align: right; font: 500 0.875rem/1 var(--ff-text); color: var(--c-chalk-3); }

.pl-chapters { list-style: none; padding: 0; margin-top: var(--s3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.pl-chapters button { width: 100%; height: 100%; display: grid; gap: 4px; align-content: start; padding: 12px 14px; text-align: left;
                      font: 500 0.9688rem/1.3 var(--ff-text); color: var(--c-chalk-2); background: transparent;
                      border: 1px solid var(--c-line-night); border-radius: 10px; cursor: pointer;
                      transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease, color var(--t-ui) ease; }
.pl-chapters button:hover { border-color: var(--c-line-night-2); background: var(--c-night-2); color: var(--c-chalk); }
.pl-chapters .num { font: 500 0.8125rem/1 var(--ff-text); color: var(--c-chalk-3); }
.pl-chapters .is-alert .num { display: inline-flex; align-items: center; gap: var(--s2); }
.pl-chapters .is-alert .num::after { content: ""; width: 16px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 2px var(--c-stop); }
.pl-chapters button[aria-current="true"] { border-color: var(--c-lamp); color: var(--c-chalk); }
.pl-chapters button[aria-current="true"] .num { color: var(--c-lamp); }
.pl-cap { margin-top: var(--s5); max-width: 82ch; font-size: var(--fs-small); line-height: 1.55; color: var(--c-chalk-3); }
.pl-cap strong { color: var(--c-chalk-2); font-weight: 600; }

/* ---- the Scan page's next steps: the home page's path, Protect as the one Night card ----------------------------- */
.next-path { list-style: none; padding: 0; margin-top: var(--s5); display: grid; gap: var(--s3); }
.next-path > li { display: grid; gap: var(--s1); padding: var(--s4) 0 var(--s4); border-top: 1px solid var(--line-2); color: var(--fg-2); }
.next-path > li.is-protect { padding: var(--s4) var(--s5); border: 0; border-radius: 12px; background: var(--c-night); color: var(--c-chalk-2);
                             box-shadow: var(--shadow-window); }
.np-t { font: 600 var(--fs-title)/1.15 var(--ff-display); color: var(--fg); }
.np-t span { margin-left: var(--s2); font: 500 var(--fs-small)/1.3 var(--ff-text); color: var(--fg-3); }
.is-protect .np-t { color: var(--c-chalk); }
.is-protect .np-t span { color: var(--c-lamp); }
.np-terms { margin-top: var(--s4); font-size: var(--fs-small); color: var(--fg-3); }

/* ---- 1. what Protect does: one Night panel on paper, like the pricing page's pick ------------------------------- */
.ff-out { padding-block: var(--s9) var(--s8); }
.out-panel { margin-top: var(--s7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--c-night);
             color: var(--c-chalk); border-radius: 14px; box-shadow: var(--shadow-window); }
.out-card { padding: var(--s6) var(--s6) var(--s5); display: grid; align-content: start; gap: var(--s3); }
.out-card + .out-card { border-left: 1px solid var(--c-line-night); }
.out-state { display: flex; align-items: center; gap: var(--s3); font: 600 clamp(1.625rem, 1.2rem + 1vw, 2.125rem)/1.1 var(--ff-display); color: var(--c-chalk); }
.out-mark { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: rgb(60 155 115 / 0.2);
            fill: none; stroke: #6CC79E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.out-what { color: var(--c-chalk-2); max-width: 46ch; }
.out-facts { display: flex; flex-wrap: wrap; gap: var(--s4) 0; margin-top: var(--s3); }
.out-facts > div { padding-right: var(--s5); margin-right: var(--s5); border-right: 1px solid var(--c-line-night-2); }
.out-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.out-facts dt { font: 500 0.8125rem/1.3 var(--ff-text); color: var(--c-chalk-3); }
.out-facts dd { font-variant-numeric: tabular-nums; margin-top: 6px; font: 600 1.625rem/1 var(--ff-display); color: var(--c-chalk); letter-spacing: 0.005em; }
.out-facts .is-done dd { color: var(--c-lamp); }
.out-src { margin-top: var(--s2); font-size: 0.875rem; line-height: 1.5; color: var(--c-chalk-3); max-width: 52ch; }
.out-foot { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3) var(--s7); }
.out-foot p { max-width: 74ch; font-size: var(--fs-small); color: var(--c-ink-2); }

/* the one log line, behind a disclosure: it wraps, never scrolls sideways */
.logd { margin-top: var(--s2); }
.logd summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; cursor: pointer; list-style: none;
                font: 600 0.9375rem/1.2 var(--ff-text); color: var(--fg); text-decoration: underline;
                text-decoration-color: var(--link-deco); text-underline-offset: 0.22em; }
.logd summary::-webkit-details-marker { display: none; }
.logd summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                        transform: rotate(-45deg); transition: transform var(--t-ui) var(--ease-out); }
.logd[open] summary::before { transform: rotate(45deg); }
.logd summary:hover { text-decoration-color: currentColor; }
.out-card .logd { --fg: var(--c-chalk); --link-deco: var(--c-line-night-2); }
.logd-line { margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: 8px; background: rgb(242 238 229 / 0.05);
             box-shadow: inset 0 0 0 1px rgb(242 238 229 / 0.1); font-size: 0.8125rem; line-height: 1.6; color: var(--c-chalk-2);
             overflow-wrap: anywhere; white-space: normal; }
.logd-note { margin-top: var(--s2); font-size: 0.875rem; color: var(--fg-3); }
.out-card .logd-note { color: var(--c-chalk-3); }

/* ---- 2. what else goes wrong: a comparison with Protect lit, the pricing pick's Night column ------------------- */
.ff-gaps { padding-block: var(--s8) var(--s9); }
.cmp { width: 100%; margin-top: var(--s7); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp .cmp-c-what { width: 29%; }
.cmp .cmp-c-protect { width: 29%; }
.cmp thead th { padding: 0 var(--s5) var(--s3); text-align: left; vertical-align: bottom; font: 600 0.9375rem/1.3 var(--ff-text); color: var(--c-ink-2); }
.cmp thead th span { font-weight: 400; color: var(--c-ink-3); margin-left: 4px; }
.cmp thead th.is-protect { padding-top: var(--s5); border-radius: 14px 14px 0 0; background: var(--c-night); color: var(--c-chalk);
                           font: 600 1.375rem/1 var(--ff-display); }
.cmp thead th.is-protect span { font: 600 0.875rem/1 var(--ff-text); color: var(--c-lamp); margin-left: 6px; }
.cmp tbody th, .cmp td { padding: var(--s5); vertical-align: top; border-top: 1px solid var(--c-line-paper); }
.cmp tbody th { padding-left: 0; text-align: left; font: 600 1.25rem/1.25 var(--ff-display); color: var(--c-ink); }
.cmp tbody th span { display: block; margin-top: 6px; font: 400 0.9375rem/1.45 var(--ff-text); color: var(--c-ink-3); }
.cmp tbody tr:last-child > * { border-bottom: 1px solid var(--c-line-paper); }
.cmp td { font-size: 0.9375rem; line-height: 1.45; color: var(--c-ink-3); }
.cmp td > span { display: block; margin-top: 6px; text-wrap: pretty; }
.cmp td.is-protect { background: var(--c-night); color: var(--c-chalk-3); border-top-color: var(--c-line-night); }
.cmp tbody tr:last-child td.is-protect { border-bottom-color: transparent; border-radius: 0 0 14px 14px; }
.cm { display: flex; align-items: center; gap: 10px; font: 600 1.0625rem/1.25 var(--ff-text); color: var(--c-ink); }
.cm::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background-position: center; background-repeat: no-repeat; }
.cmp td.is-protect .cm { color: var(--c-chalk); }
.cm-act::before { background-color: var(--c-lamp);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23111A2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cm-alert::before { background-color: var(--c-watch);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5v5.5' stroke='%23F2EEE5' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.4' r='1.3' fill='%23F2EEE5'/%3E%3C/svg%3E"); }
.cm-none { color: var(--c-ink-2); font-weight: 500; }
.cm-none::before { box-shadow: inset 0 0 0 1.5px var(--c-line-paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10h7' stroke='%2356607A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---- 3. the 4 Sep incident: the story first, the position drawn under it, the log behind a disclosure ---------- */
.ff-proof.night { padding-block: var(--s9); }
.story { list-style: none; padding: 0; margin-top: var(--s8); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story > li { display: grid; align-content: start; gap: var(--s3); padding-right: var(--s5); }
.story-pos { position: relative; height: 76px; margin-right: calc(-1 * var(--s5)); margin-bottom: var(--s2); }
.story-pos::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--c-line-night-2); }
.story > li:first-child .story-pos::after { content: "long"; position: absolute; right: calc(100% + 14px); top: 4px;
  font: 500 0.75rem/1 var(--ff-text); color: var(--c-chalk-3); box-shadow: none; }
.story-axis-short { position: absolute; right: calc(100% + 14px); bottom: 4px; font: 500 0.75rem/1 var(--ff-text); color: var(--c-chalk-3); }
.story > li + li .story-pos { box-shadow: inset 1px 0 0 var(--c-line-night-2); }
.story-bar { position: absolute; left: 0; right: 0; height: 30px; }
.pos-long .story-bar { bottom: 50%; background: rgb(60 155 115 / 0.85); }
.pos-warn .story-bar { background: repeating-linear-gradient(-45deg, rgb(60 155 115 / 0.85) 0 7px, rgb(60 155 115 / 0.35) 7px 12px); }
.pos-short .story-bar { top: 50%; background: var(--c-stop); }
.pos-flat .story-bar { top: 50%; left: 0; right: auto; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c-chalk-2); }
.story-chip { justify-self: start; display: inline-flex; align-items: center; gap: var(--s2); padding: 5px 12px; border-radius: 999px;
              font: 600 0.875rem/1.2 var(--ff-text); color: var(--c-chalk); box-shadow: inset 0 0 0 1px var(--c-line-night-2); }
.story-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-clear); }
.pos-warn .story-chip .dot { background: var(--c-lamp); }
.pos-short .story-chip { color: var(--c-chalk); background: rgb(224 69 46 / 0.16); box-shadow: inset 0 0 0 1px var(--c-stop); }
.pos-short .story-chip .dot { background: var(--c-stop-on-night); }
.pos-flat .story-chip .dot { background: var(--c-chalk-2); }
.story time { font: 600 1.625rem/1 var(--ff-display); color: var(--c-chalk); }
.pos-short time { color: var(--c-stop-on-night); }
.story-what { color: var(--c-chalk-2); max-width: 34ch; }
.story-what strong { color: var(--c-chalk); }
.story-notes { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--c-line-night); display: grid;
               grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.story-notes dt { font: 600 1rem/1.3 var(--ff-text); color: var(--c-chalk); }
.story-notes dd { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.55; color: var(--c-chalk-2); }
.logd-panel { margin-top: var(--s6); }
.logd-panel .ff-log { margin-top: var(--s3); padding: var(--s2) var(--s5); border-radius: 10px; background: #0A1226;
                      box-shadow: inset 0 0 0 1px var(--c-line-night); }
.logd-panel .ff-log li { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 0; border-color: var(--c-line-night); }
.logd-panel .ff-log li:first-child { border-top: 0; }
.logd-panel .ff-log li:last-child { border-bottom: 0; }
.logd-panel .ff-log time { color: var(--c-chalk-3); font-size: var(--fs-mono); }
.logd-panel .ff-raw { margin: 0; color: var(--c-chalk-2); }
.logd-panel .crit time, .logd-panel .crit .ff-raw { color: var(--c-stop-on-night); }
.ff-replay-band { padding-block: var(--s9); }
.ff-replay-band .ff-replay { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .pl-big, .pl-pp, .pl-pp svg, .pl-fs, .pl-stage::after, .pl-chapters button, .pl-scrub input::-webkit-slider-thumb, .logd summary::before { transition: none; }
  .pl-big:active { transform: translate(-50%, -50%); }
  .pl-pp:active { transform: none; }
}
@media (max-width: 1239px) {
  .story > li:first-child .story-pos::after, .story-axis-short { display: none; }
}
@media (max-width: 1100px) {
  .story { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); }
  .story > li:nth-child(3) .story-pos { box-shadow: none; }
  .story-notes { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pl-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .out-panel { grid-template-columns: 1fr; }
  .out-card + .out-card { border-left: 0; border-top: 1px solid var(--c-line-night); }
}
@media (max-width: 760px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead, .cmp colgroup { display: none; }
  .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: var(--s5) 0; border-top: 1px solid var(--c-line-paper); }
  .cmp tbody tr:last-child { border-bottom: 1px solid var(--c-line-paper); }
  .cmp tbody tr > * { border: 0 !important; }
  .cmp tbody th { grid-column: 1 / -1; padding: 0 0 var(--s3); }
  .cmp td { padding: var(--s3) var(--s3) 0 0; }
  .cmp td.is-protect { grid-column: 1 / -1; padding: var(--s4); margin-bottom: var(--s2); border-radius: 12px !important; }
  .cmp td::before { content: attr(data-label); display: block; margin-bottom: 6px; font: 600 0.8125rem/1.2 var(--ff-text); color: var(--c-ink-3); }
  .cmp td.is-protect::before { content: "Protect (paid)"; color: var(--c-lamp); }
  .cm { font-size: 1rem; }
}
@media (max-width: 700px) {
  .pl-band, .ff-proof.night, .ff-replay-band { padding-block: var(--s8); }
  .ff-out { padding-block: var(--s8) var(--s7); }
  .pl { margin-top: var(--s6); margin-inline: calc(-1 * var(--s2)); }
  .pl-win { border-radius: 10px; }
  .pl-stage { aspect-ratio: 864 / 720; }                       /* phones: crop the empty desktop margins */
  .pl-stage video { object-fit: cover; }
  .pl-meta { display: none; }
  .pl-name { flex: 1; }
  .pl-big { gap: 10px; padding: 6px 16px 6px 6px; font-size: 0.9375rem; }
  .pl-big-icon { width: 40px; height: 40px; }
  .pl-big-len { display: none; }
  .pl-ctrl { gap: var(--s2); padding-right: var(--s3); }
  .pl-chapters button { padding: 10px 12px; font-size: 0.9063rem; }
  .out-card { padding: var(--s5) var(--s4); }
  .out-facts { display: grid; gap: 0; }
  .out-facts > div, .out-facts > div:last-child { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
                      padding: 10px 0; margin: 0; border-right: 0; border-top: 1px solid var(--c-line-night); }
  .out-facts dd { margin: 0; font-size: 1.375rem; }
  .story { grid-template-columns: 1fr; row-gap: 0; margin-top: var(--s7); }
  .story > li { position: relative; padding: 0 0 var(--s6) 26px; gap: var(--s2); }
  .story > li::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: 0; width: 1px; background: var(--c-line-night-2); }
  .story > li:last-child { padding-bottom: 0; }
  .story > li:last-child::before { display: none; }
  .story > li::after { content: ""; position: absolute; left: 0; top: 10px; width: 11px; height: 11px; border-radius: 50%;
                       background: var(--c-night); box-shadow: inset 0 0 0 2px var(--c-chalk-3); }
  .story > li.pos-short::after { box-shadow: inset 0 0 0 2px var(--c-stop-on-night); }
  .story-pos { display: none; }
  .story time { font-size: 1.375rem; }
  .logd-panel .ff-log { padding: var(--s2) var(--s4); }
  .logd-panel .ff-log li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- v5 reader round (3 blind readers, 7/7/7): fixes ------------------------------------------------------------ */
/* the player: crop NinjaTrader's duplicate bottom tab out of the frame; the Play pill sits in the poster's empty band */
.pl-stage { aspect-ratio: 1280 / 688; }
.pl-stage video { object-fit: cover; object-position: 50% 0; }
.pl-big { top: 66.5%; }
.pl-typed { display: none; }
.cmp-foot { margin-top: var(--s4); }
.out-foot { display: grid; justify-items: start; gap: var(--s3); }
.story-caveat { margin-top: var(--s7); max-width: 78ch; font-size: var(--fs-small); line-height: 1.55; color: var(--c-chalk-2);
                padding-top: var(--s4); border-top: 1px solid var(--c-line-night); }
.pos-flat .story-pos::before { right: auto; width: 14px; }
.story > li:first-child .story-pos::after, .story-axis-short { font-size: 0.8125rem; }
.ff-tiers > li.is-pick, .tiers-full > li.is-pick { box-shadow: 0 10px 28px -14px rgb(4 9 22 / 0.55); }
@media (max-width: 700px) {
  /* hero: a purpose-made crop of the window and the start of the alert row; the full line is typed below it */
  .ff-frame { overflow: hidden; margin-right: var(--s4); border-radius: 16px 16px 0 0; }
  .ff-shot { width: auto; border-top-right-radius: 0; }
  .ff-shot img { width: 100%; }
  .ff-mark { left: 1.2%; top: 83%; width: 98.8%; height: 16%; border-radius: 3px 0 0 3px; }
  .ff-typed { margin-top: 0; border-radius: 0 0 10px 10px; }
  /* the recording: a still you can read the alert in, then the full player one tap away (it opens full screen) */
  .pl-big { top: 50%; }
  .pl-typed { display: grid; gap: 6px; margin-top: var(--s3); padding: 12px 14px; border-radius: 10px;
              background: rgb(242 238 229 / 0.05); box-shadow: inset 0 0 0 1px var(--c-stop); }
  .pl-typed > span:first-child { font: 600 0.8125rem/1.2 var(--ff-text); color: var(--c-chalk-3); }
  .pl-typed .mono { font-size: 0.8125rem; line-height: 1.55; color: var(--c-chalk); overflow-wrap: anywhere; }
}

/* the Play control lives in the control bar, so nothing covers the poster; it hands over to play/pause once started */
.pl-stage::after { display: none; }
.pl-ctrl .pl-big { position: static; transform: none; flex: none; gap: 10px; padding: 4px 18px 4px 4px; font-size: 1rem;
                   background: var(--c-night-2); box-shadow: inset 0 0 0 1px var(--c-line-night-2); }
.pl-ctrl .pl-big:active { transform: scale(0.97); }
.pl-ctrl .pl-big-icon { width: 40px; height: 40px; }
.pl-ctrl .pl-big-len { padding-left: 10px; }
.pl:not(.is-started) .pl-pp, .pl.is-ended .pl-pp { display: none; }
.pl.is-started:not(.is-ended) .pl-big { display: none; }
.pl.is-started .pl-big, .pl.is-ended .pl-big { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 700px) {
  .pl-ctrl .pl-big { padding-right: 14px; font-size: 0.9375rem; }
  .pl-ctrl .pl-big-icon { width: 36px; height: 36px; }
  .pl:not(.is-started) .pl-time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pl-ctrl .pl-big:active { transform: none; } }

/* ---------------------------------------------------------------------------------------------------- v6 (2026-10-01)
   Sean's v5 review: the hero image was weak, and the page fell flat below "What else goes wrong". Every section is
   traced to a source in business/creative/web/v6/SOURCE_TRACE.md; picks and reasons in v6/picks.md. The language is
   the one Sean praised: the pricing pick (one Night card on paper), the comparison's marks, the player's window. */

/* ---- hero: the real recording, cut to its 10 seconds and framed like the player ------------------------------ */
.hx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s8); align-items: start; }
.hx-grid > .ff-h1, .hx-grid > .ff-row { grid-column: 1; }
.hx-grid > .hx { grid-column: 2; grid-row: 1 / span 2; }
.hx-split { padding-bottom: var(--s9); }
.hx-split .ff-h1 { font-size: clamp(2.25rem, 1rem + 2.4vw, 3rem); line-height: 1.02; }
.hx-split .ff-row { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s5); }
.hx-split .ff-lede { max-width: 44ch; }
.hx { margin: 0; }
.hx-win { position: relative; background: #0A1226; border-radius: 12px; overflow: hidden;
          box-shadow: 0 0 0 1px rgb(242 238 229 / 0.12), 0 40px 80px -32px rgb(2 6 18 / 0.9), 0 2px 8px rgb(2 6 18 / 0.5); }
.hx-bar { display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 6px 0 14px;
          font: 500 0.8125rem/1.3 var(--ff-text); color: var(--c-chalk-3); border-bottom: 1px solid var(--c-line-night); }
.hx-name { display: inline-flex; align-items: center; gap: var(--s2); color: var(--c-chalk-2); font-weight: 600; }
.hx-meta { flex: 1; }
.hx-pp { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%;
         background: transparent; color: var(--c-chalk-2); cursor: pointer;
         transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.hx-pp::before { content: ""; position: absolute; inset: -6px; }                  /* a 44 px hit area */
.hx-pp:hover { background: var(--c-night-2); color: var(--c-chalk); }
.hx-pp:active { transform: scale(0.94); }
.hx-pp svg { grid-area: 1 / 1; fill: currentColor; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.hx-pp .i-play { transform: translateX(1px); }
.hx-pp .i-pause, .hx.is-playing .hx-pp .i-play { opacity: 0; transform: scale(0.6); }
.hx.is-playing .hx-pp .i-pause { opacity: 1; transform: none; }
.hx-stage { position: relative; aspect-ratio: 828 / 466; background: #FFFFFF; }
.hx-stage::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(17 26 46 / 0.1); pointer-events: none; }   /* the ring on top of the capture (Schoger) */
.hx-stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-cap { margin-top: var(--s3); font-size: 0.875rem; line-height: 1.5; color: var(--c-chalk-2); max-width: 70ch; text-wrap: pretty; }
.hx-cap a { color: var(--c-chalk); white-space: nowrap; }
/* the "never" lines under the buttons (CONVERSION_PLAYBOOK pattern 4), then what install needs (pattern 3) */
.hx-never { list-style: none; padding: 0; display: grid; max-width: 48ch; }
.hx-never li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid #34528F; font-size: var(--fs-small); line-height: 1.45; color: var(--c-chalk-2); }
.hx-never li:last-child { border-bottom: 1px solid #34528F; }
.hx-never li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 6px; border-left: 2px solid var(--c-lamp);
                       border-bottom: 2px solid var(--c-lamp); transform: rotate(-45deg); }
.hx-never b { font-weight: 600; color: var(--c-chalk); }
.hx-never a, .hx-needs a { color: var(--c-chalk); }
.hx-needs { font-size: 0.875rem; line-height: 1.45; color: var(--c-chalk-3); max-width: 48ch; }
.sb-check { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-small); color: var(--c-ink-2); }
.sb-check span { font-weight: 600; color: var(--c-ink); }
.sb-check a { color: var(--c-ink); }
/* variant A (kept for the record in v6/picks.md): the window full width under the headline */
.hx-full { padding-bottom: 0; }
.hx-full .hx-grid { display: block; }
.hx-full .hx { display: flex; flex-direction: column; margin-top: var(--s7); padding: var(--s5) var(--s8) 0; border-radius: 16px 16px 0 0;
               background: #0A1226; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.hx-full .hx-cap { order: -1; margin: 0 0 var(--s4); }
.hx-full .hx-win { width: 100%; max-width: 1104px; margin-inline: auto; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgb(242 238 229 / 0.12); }

/* ---- Watch -> Learn -> Protect: three steps on one track, the pricing pick's Night card at the end ------------- */
.ff-how.paper { padding-block: var(--s9); }
.stp { position: relative; list-style: none; padding: 0; margin-top: var(--s7); display: grid;
       grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s5); align-items: stretch; }
.stp-step { position: relative; display: grid; align-content: start; gap: var(--s4); padding: var(--s5);
            border-radius: var(--r-frame); box-shadow: 0 0 0 1px rgb(17 26 46 / 0.14); color: var(--c-ink-2); }
.stp-step:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--s5) / 2 - 8px); top: 34px; z-index: 1;
            width: 16px; height: 16px; border-radius: 50%; background: var(--c-paper) center / 10px no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.8L6.7 5 3.5 8.2' fill='none' stroke='%2356607A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            box-shadow: 0 0 0 1px var(--c-line-paper-2); }
.stp-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font: 600 var(--fs-title)/1.1 var(--ff-display); color: var(--c-ink); }
.stp-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 600 0.9375rem/1 var(--ff-text);
         color: var(--c-ink-2); box-shadow: inset 0 0 0 1.5px var(--c-line-paper-2); }
.stp-tag { flex-basis: 100%; font: 500 var(--fs-small)/1.3 var(--ff-text); color: var(--c-ink-3); }
.stp-well { display: grid; gap: var(--s3); justify-items: start; align-content: start; padding: var(--s2); border-radius: var(--r-control);
            background: var(--c-paper-2); }
.stp-well img { display: block; max-width: 100%; height: auto; border-radius: 1px; outline: 1px solid rgb(17 26 46 / 0.1); outline-offset: -1px; }
.stp-well .stp-line { display: none; }
.stp-what { font-size: 0.9688rem; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.stp .link-arrow { justify-self: start; color: var(--c-ink); }
.mtr { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 2ch; align-items: center; gap: var(--s3); width: 100%;
       font: 500 0.875rem/1.2 var(--ff-text); color: var(--c-ink-2); }
.mtr-bar { display: grid; gap: 3px; }
.mtr-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.mtr-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mtr-bar i { height: 14px; border-radius: 2px; background: rgb(17 26 46 / 0.1); box-shadow: inset 0 0 0 1px rgb(17 26 46 / 0.12); }
.mtr-v { font: 600 1.25rem/1 var(--ff-display); color: var(--c-ink); text-align: right; }
.stp-step.is-protect { background: var(--c-night); border-color: var(--c-night); color: var(--c-chalk-2);
                       box-shadow: 0 10px 28px -14px rgb(4 9 22 / 0.55); }
.is-protect .stp-t { color: var(--c-chalk); }
.is-protect .stp-n { background: var(--c-lamp); color: var(--c-ink); box-shadow: none; }
.is-protect .stp-tag { color: var(--c-lamp); }
.stp-does { list-style: none; padding: 0; display: grid; }
.stp-does li { padding: 11px 0; border-top: 1px solid var(--c-line-night); }
.stp-does li:last-child { border-bottom: 1px solid var(--c-line-night); }
.stp-does .cm, .cl .cm { color: var(--c-chalk); font-size: 1rem; }
.stp-does .cm { align-items: flex-start; }
.stp-does .cm::before { margin-top: 1px; }
.is-protect .link-arrow { color: var(--c-chalk); text-decoration-color: var(--c-line-night-2); }
/* variant B: the steps as rows, the capture beside the words */
.stp-rows { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.stp-rows .stp-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s7); }
.stp-rows .stp-step > :not(.stp-well):not(.stp-does) { grid-column: 1; }
.stp-rows .stp-well, .stp-rows .stp-does { grid-column: 2; grid-row: 1 / span 3; }
.stp-rows .stp-well .stp-line { display: block; }
.stp-rows .stp-step:not(:last-child)::after { right: auto; left: 38px; top: auto; bottom: calc(-1 * var(--s4) / 2 - 8px); transform: rotate(90deg); }

/* ---- what it catches: one Night band of three numbers, then the two lists in the comparison's marks ----------- */
.ff-replay-band { padding-block: var(--s9); }
.sb { margin-top: var(--s7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--c-night); color: var(--c-chalk);
      border-radius: 14px; box-shadow: 0 10px 28px -14px rgb(4 9 22 / 0.55); }
.sb-c { padding: var(--s6) var(--s6) var(--s5); }
.sb-c + .sb-c { border-left: 1px solid var(--c-line-night); }
.sb dt { font: 600 1.125rem/1.3 var(--ff-text); color: var(--c-chalk); }
.sb dt strong { display: block; margin-bottom: var(--s3); font: 600 clamp(3.5rem, 2.4rem + 2.8vw, 4.75rem)/0.9 var(--ff-display);
                letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--c-chalk); }
.sb .is-lit dt strong { color: var(--c-chalk); }               /* the ratio is not the headline (copy/PRINCIPLES N2) */
.sb sup { margin-left: 2px; font-size: 0.7em; }
.sb sup a { color: var(--c-chalk-3); text-decoration: none; }
.sb sup a:hover { color: var(--c-chalk); }
.sb dd { margin-top: var(--s2); display: flex; align-items: center; gap: var(--s3); font-size: 0.9375rem; line-height: 1.45; color: var(--c-chalk-3); }
.sb-acc { display: inline-flex; gap: 5px; flex: none; }
.sb-acc i { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--c-chalk-3); }
.sb-acc i.on { background: var(--c-lamp); box-shadow: none; }
.cc { margin-top: var(--s7); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s5) var(--s8); }
.cc-h { margin-bottom: var(--s3); font: 600 0.9375rem/1.3 var(--ff-text); color: var(--c-ink-2); }
.cc ul { list-style: none; padding: 0; display: grid; }
.cc li { padding: 14px 0; border-top: 1px solid var(--c-line-paper-2); }
.cc li:last-child { border-bottom: 1px solid var(--c-line-paper-2); }
.cc .cm { font-size: 1.0625rem; }
.cc .cm-none { color: var(--c-ink-2); }
.sb-notes { margin-top: var(--s4); padding-left: 1.25em; display: grid; gap: var(--s1); max-width: 96ch; font-size: 0.875rem; line-height: 1.5; color: var(--c-ink-3); }
.sb-limits { margin-top: var(--s2); max-width: 96ch; font-size: 0.875rem; line-height: 1.5; color: var(--c-ink-3); }
/* "Before you point this at a funded account": a plain, raised box in the limits band (paper tokens only) */
.bf { margin-top: var(--s6); max-width: 96ch; padding: var(--s5); background: var(--c-paper); color: var(--c-ink);
      border: 1px solid var(--c-line-paper-2); border-left: 4px solid var(--c-lamp-deep); border-radius: var(--r-frame); }
.bf-h { margin: 0; font: 600 var(--fs-h3)/1.25 var(--ff-text); color: var(--c-ink); }
.bf-lede { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.bf-list { margin-top: var(--s4); padding: 0; list-style: none; display: grid; }
.bf-list li { padding: var(--s3) 0; border-top: 1px solid var(--c-line-paper-2); font-size: 1rem; line-height: 1.5; color: var(--c-ink-2);
              overflow-wrap: anywhere; }
.bf-list li b { color: var(--c-ink); font-weight: 600; }
.bf a { color: var(--c-ink); }
@media (max-width: 560px) { .bf { padding: var(--s4); } }
.sb-foot { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--c-line-paper-2); display: flex; flex-wrap: wrap;
           justify-content: space-between; gap: var(--s2) var(--s6); font-size: var(--fs-small); color: var(--c-ink-2); }
.sb-foot p { max-width: 80ch; }
.sb-foot .sign { margin: 0; }
/* variant B: the numbers as three plan-style cards, the caught one lit */
.sb-cards .sb { gap: var(--s4); background: none; color: var(--c-ink); box-shadow: none; border-radius: 0; }
.sb-cards .sb-c { border: 1px solid var(--c-line-paper-2); border-radius: var(--r-frame); }
.sb-cards .sb-c + .sb-c { border-left: 1px solid var(--c-line-paper-2); }
.sb-cards .sb dt, .sb-cards .sb dt strong { color: var(--c-ink); }
.sb-cards .sb dd { color: var(--c-ink-3); }
.sb-cards .sb sup a { color: var(--c-ink-3); }
.sb-cards .sb-c.is-lit { background: var(--c-night); border-color: var(--c-night); box-shadow: 0 10px 28px -14px rgb(4 9 22 / 0.55); }
.sb-cards .is-lit dt, .sb-cards .is-lit sup a { color: var(--c-chalk); }
.sb-cards .is-lit dt strong { color: var(--c-lamp); }
.sb-cards .is-lit dd { color: var(--c-chalk-3); }

/* ---- questions: one line each, the answer one click away -------------------------------------------------------- */
.qa { margin-top: var(--s7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); align-items: start; }
.qa-i { border-top: 1px solid var(--c-line-paper-2); }
.qa-i:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line-paper-2); }
.qa-i summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 64px; padding: var(--s3) 0;
                cursor: pointer; list-style: none; font: 600 1.0625rem/1.35 var(--ff-text); color: var(--c-ink); text-wrap: pretty; }
.qa-i summary::-webkit-details-marker { display: none; }
.qa-i summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-line-paper-2);
                       background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' fill='none' stroke='%23111A2E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
                       transition: transform var(--t-ui) var(--ease-out); }
.qa-i[open] summary::after { transform: rotate(45deg); }
.qa-i summary:hover { color: var(--c-ink-2); }
.qa-a { padding-bottom: var(--s5); max-width: 62ch; color: var(--c-ink-2); line-height: 1.55; }

/* ---- the close: the hero's one action, what you get free, what it needs ---------------------------------------- */
.cl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7) var(--s9); align-items: end; }
.cl .display { font-size: var(--fs-statement); max-width: 20ch; }
.cl-lbl { margin-top: var(--s6); font: 600 0.9375rem/1.3 var(--ff-text); color: var(--c-chalk-2); }
.cl-get { list-style: none; padding: 0; margin-top: var(--s3); display: grid; max-width: 520px; }
.cl-get li { padding: 12px 0; border-top: 1px solid #34528F; }
.cl-get li:last-child { border-bottom: 1px solid #34528F; }
.cl-act { display: grid; justify-items: start; gap: var(--s4); }
.cl-cost { font-size: var(--fs-small); line-height: 1.5; color: var(--c-chalk-2); max-width: 46ch; }
.cl-cost a { color: var(--c-chalk); }
.cl-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.cl-links a { color: var(--c-chalk); }
.cl .waitlist-line { margin-top: var(--s3); max-width: none; text-align: left; padding-top: var(--s4); border-top: 1px solid #34528F; }

@media (prefers-reduced-motion: reduce) {
  .hx-pp, .hx-pp svg, .qa-i summary::after { transition: none; }
  .hx-pp:active { transform: none; }
}
@media (max-width: 1100px) {
  .stp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stp-step.is-protect { grid-column: 1 / -1; }
  .stp-step:nth-child(2)::after { display: none; }
}
@media (max-width: 960px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-grid > .hx { grid-column: 1; grid-row: auto; margin-top: var(--s7); }
  .sb { grid-template-columns: minmax(0, 1fr); }
  .sb-c + .sb-c { border-left: 0; border-top: 1px solid var(--c-line-night); }
  .sb-cards .sb-c + .sb-c { border-top: 1px solid var(--c-line-paper-2); }
  .cc, .qa, .cl { grid-template-columns: minmax(0, 1fr); }
  .qa-i:nth-last-child(2) { border-bottom: 0; }
  .stp-rows .stp-step { grid-template-columns: minmax(0, 1fr); }
  .stp-rows .stp-well, .stp-rows .stp-does { grid-column: 1; grid-row: auto; }
}
@media (max-width: 700px) {
  .hx-split { padding-bottom: var(--s8); }
  .hx-split .ff-h1 { font-size: 2.125rem; }
  .hx-grid > .hx { grid-row: 2; margin-top: var(--s5); margin-inline: calc(-1 * var(--s2)); }   /* phones: the recording right under the headline */
  .hx-grid > .ff-row { grid-row: 3; margin-top: var(--s6); }
  .hx-split .ff-row { display: flex; flex-direction: column; margin-top: var(--s5); }   /* phones: the buttons straight under the recording */
  /* phones: the lede (the scene) reads right under the recording, then the buttons (2026-10-01, Sean: the text fell flat) */
  .hx-split .hx-cap { font-size: 0.8125rem; }
  .hx-win { border-radius: 10px; }
  .hx-meta { display: none; }
  .hx-name { flex: 1; }
  .ff-how.paper, .ff-replay-band { padding-block: var(--s8); }
  .stp { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .stp-step.is-protect { grid-column: auto; }
  .stp-step:not(:last-child)::after, .stp-step:nth-child(2)::after { display: block; right: auto; left: 32px; top: auto;
                                       bottom: calc(-1 * var(--s5) / 2 - 8px); transform: rotate(90deg); }
  .sb-c { padding: var(--s5); }
  .sb dt strong { font-size: 3.25rem; }
  .cl .display { font-size: 2.375rem; }
}
/* critics' round (v6/critic_design.md, critic_conversion.md), fixed once */
.stp-meter { display: grid; gap: var(--s2); }
body:has(.hx-split) .site-head .btn-lamp.btn-sm { background: transparent; color: var(--c-chalk); box-shadow: inset 0 0 0 1px rgb(242 238 229 / 0.4); }   /* one amber on the home first screen */
body:has(.hx-split) .site-head .btn-lamp.btn-sm:hover { background: #1A3269; }

/* ---------------------------------------------------------------------------------------------------- v7 (2026-10-01)
   Measured against the frontier (linear, raycast, resend, stripe, vercel, posthog, plausible, Tailwind, ui.sh,
   Impeccable, Anthropic, Claude, Geist and the converting launch pages), values not concepts. Every number and its
   source: business/creative/web/v7/PIXEL_COMPARE.md. */

/* ---- header: its own layer. Night (the guide pages' and the footer's surface) on every page, a chalk hairline at
        10 % (Linear 8 %, Linear 2019 10 %, Raycast 6 %), flat on landing, a soft shadow only once stuck (Vercel). -- */
.site-head, body:has(.ff-hero, .ff-page) .site-head { background: var(--c-night); border-bottom: 1px solid rgb(242 238 229 / 0.10);
  transition: box-shadow 200ms var(--ease-out); }
.site-head.is-stuck { box-shadow: 0 10px 28px -14px rgb(2 6 18 / 0.7); }
body:has(.ff-hero, .ff-page) .site-head .menu-panel { background: var(--c-night-2); }
.head-row { min-height: 80px; }                                   /* room for the bigger logo (was 72, frontier median) */
.site-head .wordmark { width: 320px; }                             /* 320 x 62, the S 37 px: Sean 2026-10-01 "still too small" x2 overrides the frontier median (was 206 x 40) */
.foot-brand .wordmark { width: 256px; }                            /* follows the header up (was 176) */
.nav { gap: 28px; }
.nav a:not(.btn) { font-size: 0.9375rem; }                         /* 15 px Barlow ~ 14 px Inter, the frontier median */
html { scroll-padding-top: 96px; }
/* the home page's header button: filled, like 6 of 9 frontier header CTAs, in chalk so the hero keeps the one amber */
body:has(.hx-split) .site-head .btn-lamp.btn-sm { background: var(--c-chalk); color: var(--c-ink); box-shadow: none; }
body:has(.hx-split) .site-head .btn-lamp.btn-sm:hover { background: #FFFFFF; }

/* ---- hero: the recording near 1:1 (0.93x, was 0.83x) and wider (53 % of the viewport, was 48 %); text on Watch Blue
        at 8:1 (was 6:1), install line at 6:1 (was 4.3:1). ------------------------------------------------------------ */
.hx-split .ff-lede, .hx-never li, .hx-cap, .ff-close .cl-cost { color: var(--c-chalk-1); }
.hx-needs { color: var(--c-chalk-2); }
@media (min-width: 1200px) {
  .hx-split .hx-grid { grid-template-columns: minmax(0, 488px) minmax(0, 1fr); column-gap: 48px; }
  .hx-split .hx { margin-right: calc(-1 * min(64px, max(0px, (100vw - var(--max)) / 2 - 24px))); }
}

/* ---- body copy: 17 px where it is reading text (frontier body median 17.5 px; impeccable's 16 px floor) ----------- */
.stp-what, .ff-does-list li { font-size: var(--fs-body); }

@media (max-width: 860px) {
  .head-row { min-height: 68px; }
  .site-head .wordmark { width: 248px; }                           /* 48 px tall, the S 29 px; Sean: bigger (was 176 x 34) */
}
@media (max-width: 700px) {
  .hx-split .ff-h1 { font-size: 2.25rem; }                         /* frontier phone H1 median 36 (was 34) */
}

/* ---------------------------------------------------------------------------------------------------- v8 (2026-10-01)
   Sean's v7 review: keep the elements and layouts, lose the dull. Inside Night Watch only: the heading voice gets its
   contrast back (signage statement, then a readable standfirst), the grounds get the hand of real stock (a fine
   grain on paper and night alike), one zine highlighter on the line that matters, and ONE authored
   moment: the order line on the Protect card docks in its Lamp price tag. */

/* ---- browser surfaces, in the palette -------------------------------------------------------------------------- */
html { scrollbar-width: auto; scrollbar-color: var(--c-watch) var(--c-paper-2); }
input, textarea { caret-color: var(--focus); }

/* ---- the heading voice: a highway-sign statement, then the standfirst in the text face -------------------------- */
body:has(.hx-split) .ff-inline { max-width: 30ch; font: 700 var(--fs-h2)/1.03 var(--ff-display); letter-spacing: -0.014em; }
body:has(.hx-split) .ff-inline > span { display: block; max-width: 56ch; margin-top: var(--s4); font: 400 var(--fs-lede)/1.5 var(--ff-text);
  letter-spacing: 0.002em; color: var(--c-chalk-1); }
body:has(.hx-split) .ff-inline-ink > span { color: var(--c-ink-2); }
/* the zine highlighter, once: a Lamp marker stroke under the one line that matters (ink on lamp, 9.6:1) */
.hl { color: inherit; padding: 0 0.1em; margin: 0 -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: transparent no-repeat 0 92% / 100% 0.52em
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 8.2C41 4.4 96 7.1 197 3.4l-1.4 16.2C133 22.1 70 18.6 4.4 21.7z' fill='%23F4B740'/%3E%3C/svg%3E"); }

/* ---- grounds: the grain of real stock on every home band (no grid: a tiled hairline grid reads as generated UI) -- */
body:has(.hx-split) {
  --grain-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .1 0 0 0 0 .18 0 0 0 2.2 -1.05'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  --grain-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .93 0 0 0 0 .9 0 0 0 2.2 -1.05'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
}
body:has(.hx-split) :is(section.paper, section.paper-2) { background-image: var(--grain-ink); background-size: 200px 200px; }
body:has(.hx-split) :is(section.night, section.watch) { background-image: var(--grain-chalk); background-size: 200px 200px; }

/* ---- the one authored moment: an order line with no stop --------------------------------------------------------
   An NT8 order line: the fill tick at the left, the dashed stretch with no stop, a Lamp marker, then the Lamp price
   tag "Close sent". The HTML is the final frame, and the rules just below draw it. */
.ax { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: var(--s2); padding-top: 26px; }
.ax-len { position: absolute; left: 0; top: 0; font: 500 0.8125rem/1.2 var(--ff-text); color: var(--c-chalk-2); white-space: nowrap; }
.ax-line { position: relative; height: 16px; container-type: inline-size; }
.ax-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--c-line-night-2); }
.ax-line::after { content: ""; position: absolute; left: 0; top: 1px; width: 2px; height: 14px; border-radius: 1px; background: var(--c-chalk-2); }
.ax-run { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--c-chalk-3); transform-origin: 0 50%; }
.ax-dot { position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--c-lamp);
  transform: translateX(100cqw); }
.ax-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px 0 15px; font: 600 0.8125rem/1 var(--ff-text); letter-spacing: 0.01em;
  color: var(--c-ink); background: var(--c-lamp); clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
@media (max-width: 700px) {
  body:has(.hx-split) .ff-inline > span { margin-top: var(--s3); }
}

/* ---------------------------------------------------------------------------------------------------- v9 (2026-10-02)
   The pop pass, on the afternoon page Sean restored ("lacking that human spark and pop"; what he liked: "that animated
   bordered video window w the cascading gradient colors and text"). Layout untouched. Three motion moments, no more:
   the hero ground and the window's sheen (continuous, 22 s+ cycles), the headline and lede arriving once on load
   (under 900 ms), and the order line in #does (v8). Below the hero the bands get a gradient edge or
   wash instead of a flat block, an 8 px arrival (app.js 1c) and hover life. Reduced motion is a finished frame: the
   gradient still cascades, the sheen rests on the window's top right, every line is shown and highlighted. */

/* ---- hero ground: Night into Watch Blue, cascading; pools of screen light drift over it, the grain stays still --- */
body:has(.hx-split) section.hx-split { position: relative; isolation: isolate; overflow: clip; background-color: var(--c-night);
  background-image: linear-gradient(160deg, #0D1730 0%, #152B5E 24%, #1F3B7A 48%, #24448A 70%, #132652 100%);
  background-size: auto; }                                     /* the grain moved to ::after; its 200 px tile size must not stay */
.hx-split::before { content: ""; position: absolute; inset: -24% -16%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(36% 42% at 70% 38%, rgb(68 110 196 / 0.6), rgb(68 110 196 / 0) 100%),     /* the screen's light */
    radial-gradient(30% 40% at 26% 76%, rgb(40 72 148 / 0.5), rgb(40 72 148 / 0) 100%),
    radial-gradient(34% 46% at 10% 14%, rgb(7 12 28 / 0.75), rgb(7 12 28 / 0) 100%);          /* the deep note */
  transform: translate3d(-2%, -1.5%, 0) rotate(-3deg) scale(1.04); }
.hx-split::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain-chalk); background-size: 200px 200px; }
@keyframes hx-drift { to { transform: translate3d(3%, 2.5%, 0) rotate(4deg) scale(1.12); } }

/* ---- the window is on: a 1 px frame with a sheen that travels round it, lit from below by its own screen ------- */
.hx-split .hx-win { --hx-r: 12px; padding: 2px; isolation: isolate; border-radius: var(--hx-r); background: #3A5A9E;
  box-shadow: 0 30px 90px -36px rgb(84 128 214 / 0.7), 0 40px 80px -32px rgb(2 6 18 / 0.9), 0 2px 8px rgb(2 6 18 / 0.5); }
/* a comet of light round the frame: blue tail, chalk body, a Lamp head (the moving marker) */
.hx-split .hx-win::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 130%; aspect-ratio: 1;
  pointer-events: none; transform: translate(-50%, -50%) rotate(80deg);                       /* at rest: top right */
  background: conic-gradient(rgb(150 178 232 / 0) 0deg 214deg, rgb(150 178 232 / 0.9) 276deg, #F2EEE5 314deg,
                             #F4B740 330deg, rgb(244 183 64 / 0) 346deg, rgb(244 183 64 / 0) 360deg); }
.hx-split .hx-bar { position: relative; background: #0A1226; border-radius: calc(var(--hx-r) - 2px) calc(var(--hx-r) - 2px) 0 0; }
.hx-split .hx-stage { border-radius: 0 0 calc(var(--hx-r) - 2px) calc(var(--hx-r) - 2px); overflow: hidden; }
@media (max-width: 700px) { .hx-split .hx-win { --hx-r: 10px; } }
/* the window is positioned, so its drop shadow would paint over the caption's first line: lift the caption to the same layer */
.hx-split .hx-cap { position: relative; }
@keyframes hx-sheen { to { transform: translate(-50%, -50%) rotate(440deg); } }
/* the status dot: green (StopWarden's own "running" lamp) while the recording plays, chalk when it is paused */
.hx-dot { position: relative; flex: none; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--c-chalk-3);
  transition: background-color 400ms ease; }
.hx.is-playing .hx-dot { background: var(--c-clear); }
.hx-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-clear); opacity: 0; }
@keyframes hx-ping { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }

/* ---- the headline lands in two beats, then the lede, then the Lamp stroke draws under the human line -------- */
/* ink on Lamp over Watch Blue: the stroke must cover the whole line box (ascenders included) or the ink vanishes into the blue;
   the base .hl is a half-height underline for ink text on paper and does not apply here */
.hx-split .hl-lede { color: var(--c-ink); padding: 0.1em 0.3em 0.12em 0.22em; margin: 0 0 0 -0.22em;
  background: transparent no-repeat 0 50% / 100% 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3.2 2.4C48 0.8 108 2.2 196.4 1l1.6 7.4-1.3 7 1.5 7.3C140 23.4 72 22 3.6 23l1.2-7.6-1.8-6.4z' fill='%23F4B740'/%3E%3C/svg%3E"); }
@keyframes hx-in { from { opacity: 0; transform: translateY(0.4em); filter: blur(6px); } }
@keyframes hl-draw { from { background-size: 0% 100%; color: var(--c-chalk-1); } }
html.mo .hx-split .ff-h1 > span { animation: hx-in 560ms var(--ease-out) both; }
html.mo .hx-split .ff-h1 > span + span { animation-delay: 120ms; }
html.mo .hx-split .ff-lede { animation: hx-in 520ms var(--ease-out) 240ms both; }
html.mo .hx-split .hl-lede { animation: hl-draw 380ms var(--ease-out) 480ms both; }

@media (prefers-reduced-motion: no-preference) {
  .hx-split::before { animation: hx-drift 26s ease-in-out infinite alternate; }
  .hx-split .hx-win::before { animation: hx-sheen 22s linear infinite; }
  .hx.is-playing .hx-dot::after { animation: hx-ping 2.8s var(--ease-out) infinite; }
  .hx-split.is-away::before, .hx-split.is-away .hx-win::before { animation-play-state: paused; }   /* app.js 2b */
}

/* ---- below the hero: light instead of flat blocks ---------------------------------------------------------- */
/* #does: Chart Paper with the hero's edge falling onto it and a desk lamp in the corner */
body:has(.hx-split) section.ff-out { background-image: var(--grain-ink),
    linear-gradient(180deg, rgb(13 23 48 / 0.16) 0, rgb(13 23 48 / 0) 64px),
    radial-gradient(56% 44% at 92% 0%, rgb(244 183 64 / 0.14), rgb(244 183 64 / 0) 100%),
    linear-gradient(180deg, var(--c-paper) 55%, #EAE4D7 100%);
  background-size: 200px 200px, auto, auto, auto; }
/* #recording: the night lifts toward the player, the way a screen lights a desk */
body:has(.hx-split) section.pl-band { background-image: var(--grain-chalk),
    radial-gradient(64% 56% at 50% 64%, rgb(31 59 122 / 0.8), rgb(31 59 122 / 0) 100%),
    linear-gradient(180deg, #0A1226 0%, var(--c-night) 34%, #132046 100%);
  background-size: 200px 200px, auto, auto; }
/* #limits: paper-2 fades in from the paper above and back out into the plans, no hard step */
body:has(.hx-split) section.ff-replay-band { background-image: var(--grain-ink),
    radial-gradient(44% 40% at 84% 30%, rgb(244 183 64 / 0.1), rgb(244 183 64 / 0) 100%),
    linear-gradient(180deg, var(--c-paper) 0, var(--c-paper-2) 200px, var(--c-paper-2) calc(100% - 200px), var(--c-paper) 100%);
  background-size: 200px 200px, auto, auto; }
/* the plans: the lamp falls on the pick, and the band melts into the questions below */
body:has(.hx-split) section.ff-plans { background-image: var(--grain-ink),
    radial-gradient(40% 56% at 38% 58%, rgb(244 183 64 / 0.14), rgb(244 183 64 / 0) 100%),
    linear-gradient(180deg, var(--c-paper) 60%, var(--c-paper-2) 100%);
  background-size: 200px 200px, auto, auto; }
/* the sign-off bookends the hero: the same cascade, still */
body:has(.hx-split) section.ff-close { background-image: var(--grain-chalk),
    radial-gradient(44% 70% at 84% 100%, rgb(68 110 196 / 0.5), rgb(68 110 196 / 0) 100%),
    radial-gradient(40% 60% at 4% 0%, rgb(7 12 28 / 0.6), rgb(7 12 28 / 0) 100%),
    linear-gradient(200deg, #101E44 0%, var(--c-watch) 52%, #14295A 100%);
  background-size: 200px 200px, auto, auto, auto; }
/* the night panels on paper are lit screens, not flat slabs: a Watch Blue corner falling to deep night, a top light */
body:has(.hx-split) :is(.out-panel, .sb, .ff-tiers > li.is-pick) {
  background-image: linear-gradient(158deg, #1B3068 0%, var(--c-night) 48%, #0A1226 100%); }
body:has(.hx-split) .out-panel { box-shadow: inset 0 1px 0 rgb(242 238 229 / 0.07), var(--shadow-window); }
body:has(.hx-split) :is(.sb, .ff-tiers > li.is-pick) { box-shadow: inset 0 1px 0 rgb(242 238 229 / 0.07), 0 10px 28px -14px rgb(4 9 22 / 0.55); }

/* ---- the arrival (app.js 1c arms .rv only on blocks still below the fold) ---------------------------------- */
html.mo .rv:not(.is-in) { opacity: 0; transform: translateY(8px); }                    /* armed: snaps, no fade-out */
html.mo .rv.is-in { transition: opacity 400ms var(--ease-out) var(--rv-d, 0ms), transform 400ms var(--ease-out) var(--rv-d, 0ms); }

/* ---- hover life: buttons lift, links draw a Lamp stroke (a marker on paper, a 2 px line on night) ----------- */
body:has(.hx-split) { --ul-c: rgb(244 183 64 / 0.62); --ul-y: 90%; --ul-h: 0.36em; }
body:has(.hx-split) :is(.night, .watch, .is-protect, .is-pick) { --ul-c: var(--c-lamp); --ul-y: 100%; --ul-h: 2px; }
body:has(.hx-split) :is(.link-arrow, .hx-cap a, .hx-never a, .hx-needs a, .sb-check a) {
  background: linear-gradient(var(--ul-c), var(--ul-c)) no-repeat 0 var(--ul-y) / 0% var(--ul-h);
  transition: background-size 320ms var(--ease-out), text-decoration-color var(--t-ui) ease, color var(--t-ui) ease; }
body:has(.hx-split) :is(.link-arrow, .hx-cap a, .hx-never a, .hx-needs a, .sb-check a):hover {
  background-size: 100% var(--ul-h); text-decoration-color: transparent; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body:has(.hx-split) .btn { transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, color var(--t-ui) ease,
                                         transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
  body:has(.hx-split) .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgb(4 9 22 / 0.6); }
  body:has(.hx-split) .btn-lamp.btn-lg:hover { box-shadow: 0 12px 24px -12px rgb(244 183 64 / 0.55), 0 3px 6px -2px rgb(4 9 22 / 0.35); }
  body:has(.hx-split) .btn:active { transform: translateY(0) scale(0.97); transition-duration: var(--t-press); }
  body:has(.hx-split) .link-arrow::after { display: inline-block; white-space: pre; transition: transform 220ms var(--ease-out); }
  body:has(.hx-split) .link-arrow:hover::after { transform: translateX(3px); }
}