/* =====================================================================
   Leakproof design kit · results.css  (the live scan, /r/<token>, the shared /report/ page:
   _results-views.js + scan.js). Loads after tokens.css, kit.css and site.css.
   The kit's components carry the meaning system (kit.css): the state tags (.lp-tag), the marker
   numbers (.lp-marker) and the counts bar (.lp-counts). The hand-drawn LEAK oval (.st-leak, site.css)
   is the one deliberate exception. Red is a leak only; calm blue a money opportunity only.
   ===================================================================== */

/* ---------- 10 · the counts header: four counts, the kit's bar, one footnote ---------- */
.counts-list { grid-template-columns: repeat(4, minmax(0, auto)); gap: var(--lp-s-1) 22px; }
/* the label sits clear below the pen ring around the digit (the ring is about 1.15em) */
.counts-list li { gap: 9px; align-content: start; }
.counts-list .c-live .counts-num { color: var(--lp-ink-3); }
.counts-list .c-live span { max-width: 13ch; }
.counts-list .c-live a { color: inherit; text-underline-offset: 2px; text-decoration-style: dashed; }
.counts-list .c-live a:hover { color: var(--lp-ink); }
.counts .counts-kbar { margin-top: var(--lp-s-1); gap: 6px; }
.counts .counts-kbar .lp-counts-note { text-wrap: balance; }
.counts[data-state="none"] .counts-kbar { display: none; }
@media (max-width: 560px) {
  .counts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lp-s-1) 12px; }
  .counts-list .c-live span { max-width: none; }
}

/* ---------- 11 · live scan ---------- */
.scan-page .site-head .wrap, .result-page .site-head .wrap { max-width: var(--lp-wrap-wide); }
.head-skip { margin-right: 4px; }
.short-only { display: none; }
@media (max-width: 560px) { .short-only { display: inline; } .long-only { display: none; } }
/* the header's path line: the bare "/" is never shown, so no separator before what follows */
.audit-sub > span[hidden] + span::before { content: none; }
.ruler { position: relative; margin-top: 22px; height: 44px; }
.ruler-track { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-bottom: 1.5px solid var(--lp-ink);
  background: repeating-linear-gradient(90deg, var(--lp-ink-3) 0 1px, transparent 1px 10%) 0 100% / 100% 12px no-repeat,
              repeating-linear-gradient(90deg, var(--lp-margin-2) 0 1px, transparent 1px 1%) 0 100% / 100% 6px no-repeat; }
.ruler-fill { position: absolute; left: 0; bottom: -1.5px; height: 5px; width: 0; background: var(--lp-ink); transition: width .5s cubic-bezier(.3,.1,.3,1); }
.ruler-fill::after { content: ""; position: absolute; right: -1px; bottom: 0; width: 2px; height: 20px; background: var(--lp-ink); border-radius: 1px; transform: rotate(8deg); transform-origin: bottom; }
.ruler-phases { list-style: none; position: absolute; left: 0; right: 0; top: 0; height: 20px; }
.ruler-phases li { position: absolute; top: 0; font: 500 var(--lp-t-label-sm)/1 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; color: var(--lp-ink-3); padding-left: 7px; border-left: 1px solid var(--lp-rule-2); height: 30px; white-space: nowrap; }
.ruler-phases li.is-now { color: var(--lp-ink); border-left-color: var(--lp-ink); font-weight: 600; }
.ruler-phases li.is-past { color: var(--lp-ink-2); }

.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "stage log" "results results"; gap: 28px clamp(28px, 3vw, 48px); padding-block: 22px 72px; align-items: start; }
.stage { grid-area: stage; min-width: 0; }
.scan-grid > .log-col { grid-area: log; align-self: stretch; min-width: 0; }
.scan-grid > .results { grid-area: results; }
/* Fig. 1 | Fig. 1's margin | Fig. 2 | Fig. 2's margin (design review 2026-10-06): each figure's labels sit
   in its own margin column, beside its marks, with a short leader; never one label floating between the
   figures with a line across to the phone. Where the figures share the width with the live log (the
   container is narrower), Fig. 2's labels are a plain list under the phone instead. */
.figs-host { container: figs / inline-size; }
.figs { --notes-d: clamp(140px, 12vw, 180px); --fig-m: clamp(150px, 14vw, 200px); --notes-m: clamp(118px, 10vw, 150px);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--notes-d) var(--fig-m); grid-template-areas: "d notes m" "d notes mnotes"; grid-template-rows: auto 1fr;
  gap: 0 18px; align-items: start; position: relative; }
.figs > .fig-d { grid-area: d; }
.figs > .fig-m { grid-area: m; }
.figs > .notes { grid-area: notes; align-self: stretch; }
.figs > .notes.notes-m { grid-area: mnotes; align-self: start; --lp-notes: flow; margin-top: 14px; }
.figs > .strip { display: none; }
@container figs (min-width: 1000px) {
  .figs { grid-template-columns: minmax(0, 1fr) var(--notes-d) var(--fig-m) var(--notes-m); grid-template-areas: "d notes m mnotes"; grid-template-rows: auto; }
  .figs > .notes.notes-m { --lp-notes: gutter; align-self: stretch; margin-top: 0; }
  /* no marks on the phone: its margin closes */
  .figs:has(> .notes-m:empty) { --notes-m: 0px; }
}
/* while the scan runs and Fig. 1's margin has nothing to say yet, the phone sits right next to Fig. 1 */
@media (min-width: 761px) {
  .scan-page:not([data-phase="done"]) .figs:has(> .notes-d:empty) { --notes-d: 0px; }
}
/* a badge's short pen leader to its ring (scan.js badgesOutside): inside the badge, so it pops in with it */
.pen-g .pen-badge path.mk-badge-leader { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.pen-g.is-opp .pen-badge path.mk-badge-leader { stroke: var(--lp-opp); }
.pen-g.is-pencil .pen-badge path.mk-badge-leader { stroke: var(--lp-pencil); }
.fig-dns { margin-top: 36px; max-width: 760px; }
.scan-err { margin-top: 18px; border: 1.5px solid var(--lp-ink); border-radius: var(--lp-r-2); background: var(--lp-sheet); padding: 20px 22px; display: grid; gap: 12px; max-width: 640px; }
.scan-err h2 { font-size: var(--lp-t-h3); }
.scan-err p { color: var(--lp-ink-2); }
.scan-err .row { display: flex; flex-wrap: wrap; gap: 10px; }

/* the "FIRST SCREEN" fold label sits at the left edge, away from the rings and their badges */
.fig .fold span { right: auto; left: 6px; }

/* Fig. 2 while it waits: a phone page skeleton with a soft scan line ("Phone next") */
.phone-skel { display: grid; gap: 12px; justify-items: center; width: 100%; height: 100%; align-content: start; padding-top: 6px; }
.phone-skel .label { color: var(--lp-ink-2); text-align: center; }
.phone-skel-page { position: relative; width: 100%; display: grid; gap: 9px; padding: 14px 12px; border-radius: var(--lp-r-1); background: var(--lp-sunk); overflow: hidden; }
.phone-skel-page i { display: block; height: 7px; border-radius: 2px; background: var(--lp-rule); }
.phone-skel-page i.is-h { height: 13px; background: var(--lp-rule-2); }
.phone-skel-page i.is-short { width: 62%; }
.phone-skel-page i.is-btn { height: 22px; width: 70%; margin: 6px auto; border: 1.5px dashed var(--lp-rule-2); background: transparent; }
.phone-skel-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lp-accent); opacity: .55; animation: skel-scan 2.4s cubic-bezier(.45,.05,.4,1) infinite; }
@keyframes skel-scan { 0% { top: 0; opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } 100% { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .phone-skel-scan { animation: none; top: 40%; } }

/* the pen mark for a missing thing: a dashed ghost button where it is expected, its note inside */
.mk-box.mk-ghost { border: 2px dashed var(--lp-pen); border-radius: var(--lp-r-2); display: grid; place-items: center; overflow: visible; background: var(--lp-pen-halo); }   /* the screenshot stays light in both themes */
.mk-box.mk-ghost.is-opp { border-color: var(--lp-opp); }
.mk-box.mk-ghost.is-pencil { border-color: var(--lp-pencil); }
/* the note always fits inside its ghost button, whatever the figure's size (container units) */
.mk-box.mk-ghost { container-type: inline-size; }
.mk-ghost-note { font-family: var(--lp-f-pen); color: var(--lp-pen); font-size: clamp(8px, 12.5cqw, 22px); line-height: 1; white-space: nowrap; }
.mk-ghost.is-opp .mk-ghost-note { color: var(--lp-opp); }
/* (the same in the server's static figures: site.css section 15, src/checks/penmarks.js) */

/* mobile status strip (pinned under Fig. 1 while the scan runs): only the progress, the counts and
   a one-line ticker of the last finished check */
.strip { position: sticky; top: var(--lp-head-h); bottom: 0; z-index: 12; box-shadow: 0 -1px 0 var(--lp-rule); background: var(--lp-paper); border-bottom: 1px solid var(--lp-rule); padding: 10px 0 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.strip-top { display: flex; justify-content: flex-start; gap: 10px; align-items: baseline; }
.strip-now { display: none; }
.strip-count { flex: none; font: 600 var(--lp-t-label)/1 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.strip-bar { height: 4px; background: var(--lp-rule); border-radius: 2px; overflow: hidden; }
.strip-bar i { display: block; height: 100%; width: 0; background: var(--lp-ink); transition: width .4s ease; }
.strip-last { list-style: none; display: grid; gap: 4px; font-size: var(--lp-t-xs); color: var(--lp-ink-2); min-height: 22px; }
.strip-last li { display: flex; justify-content: space-between; align-items: center; gap: 10px; animation: chk-in .35s cubic-bezier(.2,.7,.3,1); }
.strip-last li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .scan-grid { grid-template-columns: 1fr; grid-template-areas: "stage" "log" "results"; }
  .scan-grid > .log-col .log { position: static; }
}
@media (max-width: 760px) {
  .scan-grid { grid-template-areas: "stage" "results" "log"; padding-top: 14px; }
  .ruler { margin-top: 16px; height: 40px; }
  .ruler-phases li, .ruler-phases li.is-past { font-size: var(--lp-t-label-sm); padding-left: 4px; letter-spacing: .02em; color: transparent; }
  .ruler-phases li.is-now { color: var(--lp-ink); }
  .figs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "d d" "strip strip" "m notes" "m mnotes"; grid-template-rows: auto auto auto 1fr; gap: 16px 18px; }
  .figs > .strip { display: grid; grid-area: strip; margin-inline: calc(var(--lp-gutter) * -1); padding-inline: var(--lp-gutter); }
  .scan-page[data-phase="done"] .figs > .strip { display: none; }
  .figs > .notes { --lp-notes: flow; }
  .figs > .notes.notes-m { margin-top: 0; }
  /* both margins become one list beside the phone: a mark on both figures is listed once */
  .figs > .notes-m > li.note.is-dup { display: none; }
}

/* ---------- 11b · done: the live scan becomes a results layout ----------
   The ruler, the status line and the scrolling log have done their job: one count header stays, the
   figures take the width, the top fixes sit beside the gate, and the audit log becomes "All checks"
   under the results (problems first, "Show all N checks", full rows, text wraps). */
.scan-page[data-phase="done"] .ruler, .scan-page[data-phase="done"] .status { display: none; }
.scan-page[data-phase="done"] .scan-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "results" "log"; }
.scan-page[data-phase="done"] .scan-grid > .log-col .log { position: static; border-top: 1.5px solid var(--lp-ink); padding-top: 22px; }
.scan-page[data-phase="done"] .log-head { border-bottom: 0; padding-bottom: 6px; }
.scan-page[data-phase="done"] .log-head h2 { font: 800 clamp(28px, 3vw, 42px)/1 var(--lp-f-display); font-stretch: var(--lp-display-stretch); letter-spacing: -.01em; text-transform: none; }
.scan-page[data-phase="done"] .log-list { max-height: none; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1181px) {
  .scan-page[data-phase="done"] .log-list, .result-page .log-list.is-cols { columns: 2; column-gap: 48px; }
  .scan-page[data-phase="done"] .log-list > li, .result-page .log-list.is-cols > li { break-inside: avoid; }
  .scan-page[data-phase="done"] .log-list .log-group, .result-page .log-list.is-cols .log-group { break-after: avoid; }
}
/* every row wraps (never "Your emails reach the inbox (we couldn't see it fr…") */
.chk-name, .chk-detail { overflow-wrap: anywhere; }

/* state tags in the log and the top fixes: the kit's Tag, right-aligned in the status column */
.chk > .st-tag, .chk > .st { justify-self: end; margin-top: 1px; }
.st-tag.is-running::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1s steps(4, end) infinite; }
.dns-st.lp-tag { justify-self: end; }
.chk-name .lp-marker { font-size: var(--lp-t-xs); flex: none; cursor: pointer; padding: 0; transform: translateY(1px); }
.log-manual .log-opps a { color: var(--lp-ink); text-underline-offset: 2px; }
/* the unlocked fix: an ink label (green means "fine" only) */
.chk-fix b { color: var(--lp-ink); }

/* ---------- 13 · results + email gate ---------- */
.results { border-top: 1.5px solid var(--lp-ink); padding-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.res-h { font-size: var(--lp-t-h2); }
.res-intro { font-size: var(--lp-t-lede); color: var(--lp-ink-2); margin-top: 12px; }
.top { list-style: none; margin-top: 30px; border-top: 1px solid var(--lp-rule); }
.top-item { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; padding: 26px 0 28px; border-bottom: 1px solid var(--lp-rule); }
.top-n { font-family: var(--lp-f-pen); color: var(--lp-pen); font-size: 72px; line-height: .8; text-align: center; padding-top: 4px; }
.top-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.top-meta .st, .top-meta .st-tag { justify-self: start; }
.top-stage { font: 500 var(--lp-t-label)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .04em; text-transform: uppercase; color: var(--lp-ink-2); }
.top-title { font-size: clamp(24px, 2.2vw, 31px); margin: 10px 0 10px; max-width: 26ch; }
.top-detail { color: var(--lp-ink-2); max-width: var(--lp-measure); font-size: var(--lp-t-body); }
.top-k { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; margin-top: 12px; font-size: var(--lp-t-small); max-width: var(--lp-measure); align-items: baseline; }
.top-k .k { font: 600 var(--lp-t-label)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .04em; text-transform: uppercase; color: var(--lp-ink-2); }
.top-k.is-fix .k { color: var(--lp-ink); }
.top-k.is-fix p { color: var(--lp-ink); }
/* locked: one jump link to the one gate, never a repeated "leave your email" line */
.top-k.is-fix.is-locked p { color: var(--lp-ink-2); }
.gate-jump { color: var(--lp-ink); text-underline-offset: 2px; }
.top-k p { color: var(--lp-ink-2); }
.show-mark { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; }
.show-mark .lp-marker { font-size: var(--lp-t-xs); text-decoration: none; }
.res-also { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
.res-also h3 { font: 600 var(--lp-t-label)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.res-also p { font-size: var(--lp-t-small); color: var(--lp-ink-2); }
.res-also ul { list-style: none; display: grid; gap: 6px; font-size: var(--lp-t-small); color: var(--lp-ink-2); }
/* "Only a real lead can check": greyed, dashed (the meaning system's "unknown"), wrapping, pointing to the Live Test */
.live-list { list-style: none; display: grid; gap: 0; margin: 0 0 10px; border-top: 1px solid var(--lp-rule); }
.live-list li { font-size: var(--lp-t-xs); line-height: 1.35; color: var(--lp-ink-2); padding: 7px 0 7px 22px; border-bottom: 1px solid var(--lp-rule); position: relative; }
.live-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 11px; height: 11px; border: 1.5px dashed var(--lp-unknown); border-radius: 50%; }
.live-list .live-why { color: var(--lp-ink-3); }
.res-live p { font-size: var(--lp-t-xs); }
.res-live p a { color: var(--lp-ink); text-underline-offset: 2px; }
.top-item[data-sev="warn"] .top-n { color: var(--lp-opp); }
.log-manual .log-pointer { font-size: var(--lp-t-xs); color: var(--lp-ink-2); margin: 0; }
.log-manual .log-pointer a { color: var(--lp-ink); text-underline-offset: 2px; }
.js .results.is-revealing .top-item, .js .results.is-revealing .gate, .js .results.is-revealing .res-also { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.js .results .is-in { opacity: 1 !important; transform: none !important; }

.gate-col { position: sticky; top: calc(var(--lp-head-h) + 20px); }
.gate { background: var(--lp-sheet); border: 1px solid var(--lp-rule); border-radius: var(--lp-r-2); box-shadow: var(--lp-shadow); padding: clamp(22px, 2.4vw, 32px); scroll-margin-top: calc(var(--lp-head-h) + 16px); }
.gate-step { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: var(--lp-t-xs); color: var(--lp-ink-2); }
.gate-h { font-size: clamp(27px, 2.3vw, 34px); margin: 10px 0 12px; }
.gate-p { font-size: var(--lp-t-small); color: var(--lp-ink-2); margin-bottom: 18px; }
.gate-p b { color: var(--lp-ink); font-weight: 600; }
.gate-err { font-size: var(--lp-t-xs); color: var(--lp-leak); font-weight: 600; margin-bottom: 12px; }
.gate-err:empty { display: none; }
.gate-fine { margin-top: 12px; font: 400 var(--lp-t-label-sm)/1.5 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-2); text-align: center; }
/* the success card: no blank band above the heading; a small ink pen tick beside it; clears the sticky header */
.gate-done { scroll-margin-top: calc(var(--lp-head-h) + 16px); position: relative; }
.gate-done .gate-h { margin-top: 0; }
.done-tick { display: inline-block; width: 26px; height: 24px; margin-right: 10px; vertical-align: -2px; }
.gate-done h2:focus { outline: none; }
.gate-emailed { font-weight: 600; color: var(--lp-ink); }
.next { list-style: none; margin: 4px 0 22px; border-top: 1px solid var(--lp-rule); }
.next li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--lp-rule); font-size: var(--lp-t-small); }
.next .mono { font-size: var(--lp-t-label); color: var(--lp-ink-2); padding-top: 3px; text-transform: uppercase; }

/* the phone's sticky bar to the gate (scan.js shows it once the scan has finished) */
.gate-bar { display: none; }
@media (max-width: 760px) {
  .gate-bar:not([hidden]) { display: flex; justify-content: center; align-items: center; gap: 4px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
    min-height: 50px; padding: 12px 18px; border-radius: var(--lp-r-1); background: var(--lp-ink); color: var(--lp-on-ink); font-weight: 600; font-size: var(--lp-t-small); text-decoration: none; box-shadow: var(--lp-shadow); }
  body.has-gate-bar .site-foot { padding-bottom: 84px; }
}

@media (max-width: 1180px) {
  .results { grid-template-columns: 1fr; }
  .gate-col { position: static; max-width: 560px; }
  /* one column: the top fixes, then the gate, then what only a real lead can check (shown once, after the gate) */
  .results > .res-main { display: contents; }
  .results > .res-main > .res-h { order: 1; }
  .results > .res-main > .res-intro { order: 2; }
  .results > .res-main > .top { order: 3; }
  .results > .gate-col { order: 4; }
  .results > .res-main > .res-also { order: 5; }
  .results { row-gap: 0; }
  .results > .gate-col { margin-top: 28px; }
}
@media (max-width: 760px) {
  .res-also { grid-template-columns: 1fr; gap: 20px; }
  .top-item { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .top-n { font-size: 46px; }
  .top-k { grid-template-columns: 1fr; gap: 2px; }
  .results { padding-top: 32px; }
}

/* ---------- 14 · result page (/r/<token>) ---------- */
.result-top { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: 30px; padding-top: 30px; border-top: 1.5px solid var(--lp-ink); }
.result-top .res-h { font-size: clamp(30px, 3vw, 44px); }
.result-block { margin-top: clamp(56px, 7vw, 96px); padding-top: 22px; border-top: 1.5px solid var(--lp-ink); }
.result-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: 26px; }
.result-block-head h2 { font-size: clamp(28px, 3vw, 42px); }
.result-page .log { position: static; }
@media (max-width: 1180px) {
  .result-top { grid-template-columns: 1fr; }
  .result-top > .res-main { display: contents; }
  .result-top > .res-main > .res-h { order: 1; }
  .result-top > .res-main > .res-intro { order: 2; }
  .result-top > .res-main > .top { order: 3; }
  .result-top > .gate-col { order: 4; margin-top: 28px; }
  .result-top > .res-main > .res-also { order: 5; }
  .result-top { row-gap: 0; }
}

/* ---------- 15 · report (client-facing full audit; works without JavaScript) ---------- */
.report { max-width: 1120px; }
.report-cover { padding-block: clamp(36px, 5vw, 64px) 30px; border-bottom: 1.5px solid var(--lp-ink); }
.report-cover .audit-head { padding-top: 0; }
.report-cover .audit-title { font-size: clamp(36px, 4.4vw, 62px); }
.report-for { margin-top: 18px; font-size: var(--lp-t-small); color: var(--lp-ink-2); }
.report-for b { color: var(--lp-ink); }
.rsec { display: grid; grid-template-columns: 170px minmax(0, 1fr); padding-block: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--lp-rule); }
.rsec > .sec-margin { padding-top: 8px; }
.rsec-body { min-width: 0; border-left: 1px solid var(--lp-margin); padding-left: clamp(24px, 3.4vw, 56px); }
.rsec h2 { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 16px; }
.rsec .lede { margin: 0 0 24px; max-width: var(--lp-measure); }
/* the video card: a raised inverse panel in both themes */
.video-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center; text-decoration: none; color: var(--lp-on-inverse); background: var(--lp-surface-inverse); border: 1px solid var(--lp-inverse-rim); border-radius: var(--lp-r-2); padding: 14px; box-shadow: var(--lp-shadow-sm); }
.video-card:hover { color: var(--lp-on-inverse); border-color: var(--lp-on-inverse-2); }
.video-thumb { aspect-ratio: 16 / 9; border-radius: var(--lp-r-1); background: var(--lp-device); position: relative; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.video-thumb i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--lp-surface-inverse); box-shadow: 0 0 0 2px var(--lp-pen); }
.video-thumb i::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 14px solid var(--lp-on-inverse); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.video-card h3 { font-size: var(--lp-t-h3); margin-bottom: 6px; color: var(--lp-on-inverse); }
.video-card p { color: var(--lp-on-inverse-2); font-size: var(--lp-t-small); }
/* server copy: a long video link wraps inside the card on phones */
.video-card .mono { overflow-wrap: anywhere; }
.static-figs { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: start; }
.static-figs .share-fig { margin: 0; }
.report-print { font-size: var(--lp-t-xs); color: var(--lp-ink-2); }
.report-next { margin-top: 26px; font-size: var(--lp-t-body); }
.rchecks { border-top: 1.5px solid var(--lp-ink); }
.rgroup { display: flex; justify-content: space-between; gap: 12px; font: 600 var(--lp-t-label)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; padding: 22px 0 8px; border-bottom: 1px solid var(--lp-rule-2); }
.rgroup span + span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--lp-ink-2); }
.rcheck .chk-no { padding-top: 4px; }
.rcheck h4 { display: flex; gap: 6px; align-items: baseline; }
.rcheck .st, .rcheck .st-tag { justify-self: end; }
.manual .st, .manual .lp-tag { justify-self: start; }
.rcheck { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(70px, auto); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--lp-rule); align-items: start; }
.rcheck h4 { margin: 0; font-size: var(--lp-t-body); font-weight: 600; font-family: var(--lp-f-body); }
.rcheck p { font-size: var(--lp-t-small); color: var(--lp-ink-2); margin-top: 4px; max-width: var(--lp-measure); }
.rcheck .fixline { color: var(--lp-ink); }
.rcheck .fixline b { font: 600 var(--lp-t-label)/1 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .04em; text-transform: uppercase; color: var(--lp-ink); margin-right: 8px; }
.manual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.manual { padding: 18px 0 20px; border-top: 1px solid var(--lp-rule); }
.manual h3 { font-size: var(--lp-t-h3); margin: 6px 0 8px; }
.manual p { color: var(--lp-ink-2); font-size: var(--lp-t-small); }
.manual .evidence { margin-top: 10px; font: 400 var(--lp-t-label)/1.55 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink); background: var(--lp-sunk); border-radius: var(--lp-r-1); padding: 10px 12px; white-space: pre-wrap; }
.report-foot { padding-block: 30px 60px; font-size: var(--lp-t-xs); color: var(--lp-ink-2); display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; }
@media (max-width: 900px) {
  .rsec { grid-template-columns: 1fr; }
  .rsec > .sec-margin { grid-auto-flow: column; justify-content: start; gap: 12px; margin-bottom: 14px; }
  .rsec-body { border-left: 0; padding-left: 0; }
  .static-figs { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .manual-grid { grid-template-columns: 1fr; }
  .video-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .static-figs { grid-template-columns: 1fr; } }
@media print {
  .rsec { break-inside: avoid-page; padding-block: 18pt; }
  .video-card { box-shadow: none; }
}

/* ---------- 18 · server integration ---------- */
.static-fig img.report-shot { display: block; width: 100%; height: auto; max-height: 1100px; object-fit: cover; object-position: top; }
.share-fig--phone .static-fig img.report-shot { max-height: 760px; }
.report-next a { color: var(--lp-ink); }

/* The quiet Deep Dive card under the email gate, the build card, the re-scan form. A solid hairline:
   a dashed grey line means "only a real lead can check" (the meaning system, tokens.css), never an offer. */
.dd-cta { margin-top: 18px; padding: 18px 20px 20px; border: 1px solid var(--lp-rule); border-radius: var(--lp-r-2); }
.dd-cta .label { color: var(--lp-ink-2); }
.dd-cta-h { font-size: var(--lp-t-h3); margin: 8px 0 8px; }
.dd-cta p:not(.label) { font-size: var(--lp-t-small); color: var(--lp-ink-2); }
.dd-cta .dd-cta-fine { margin: 8px 0 14px; font-size: var(--lp-t-xs); }
@media (max-height: 1000px) { .gate-col:has(.dd-cta) { position: static; } }
.build-cta { margin-top: 18px; padding: 18px 20px 20px; border: 1px solid var(--lp-rule); border-radius: var(--lp-r-2); }
.build-cta .label { color: var(--lp-ink-2); }
.build-cta p:not(.label) { font-size: var(--lp-t-small); color: var(--lp-ink-2); margin-top: 8px; }
.build-cta .btn { margin-top: 12px; }
@media (max-height: 1000px) { .gate-col:has(.build-cta), .gate-col:has(.rescan) { position: static; } }
.rescan { margin-top: 18px; font-size: var(--lp-t-xs); color: var(--lp-ink-2); }
.rescan-p { margin: 18px 0 6px; font-size: var(--lp-t-xs); color: var(--lp-ink-2); }
.rescan .rescan-p { margin-top: 0; }
/* the scan pages' card: two short paragraphs */
.dd-cta p:not(.label) + p { margin-top: 6px; }
.dd-cta p b { color: var(--lp-ink); font-weight: 650; }