/*
 * Storefront stylesheet — one file, no framework.
 * Tokens mirror the audited portal design system (portal/src/styles/app.css) and the
 * report brand so landing → checkout → email → PDF read as one product.
 * Accessibility floor: this site must pass its own product's bar — every text/background
 * pair here is ≥4.5:1 (the portal's --faint lesson: hierarchy comes from form, not from
 * fading colour below the product's own threshold).
 */

/* Brand fonts, self-hosted (served same-origin; CSP font-src 'self' covers them).
   Variable woff2, latin subset. font-display:swap — never invisible text. */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/fonts/dmsans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --paper: #F8F6F2; --paper2: #FCFBF9; --card: #ffffff;
  --navy: #141d2b; --navy2: #0B1220;
  --ink: #16233A; --body: #3D4656; --sub: #5A6272;
  --hair: #E3E0D8; --hair2: #EDE9E1; --soft: #F4F1EA;
  --blue: #2563eb; --blueDeep: #1d4ed8; --blueBg: #E7EEFB;
  --green: #0F7A4D; --greenBg: #E8F3EC;
  --amber: #9A5B00; --amberBg: #F8EFDD;
  --red: #B23A2E; --redBg: #F8E9E7;
  --slate: #5B6675; --slateBg: #EEF1F4;
  /* v7 domain + severity palette (report-language accents; the site uses the
     domain colors only in the hero and on the what-we-check card headings) */
  --a11y: #9A5B00; --a11yBg: #F5EAD4;
  --priv: #6D40C9; --privBg: #ECE5FA;
  /* Ticket 019 (PIN I): Security is a pillar, not a verdict, so it is teal and
     no longer the Good green. --secBg is a background tint only, never text.
     --green / --sev-good stay #0F7A4D: Pass / Good. */
  --sec: #126E82; --secBg: #E4F2F6;
  --sev-bad: #B4232A; --sev-badBg: #FBE7E5;
  --sev-slate: #5A6272; --sev-slateBg: #EDEFF2;
  --sev-good: #0F7A4D; --sev-goodBg: #E6F2EA;
  /* #9: medium-severity warn, distinct from --a11y #9A5B00 so amber never means
     both "accessibility domain" and "medium severity" (board finding #9). */
  --sev-warn: #B45309;
  /* CW-P32: "serious" needs its own step between --sev-bad and --sev-warn, and
     it must not be the a11y brown-amber either (Rule 1: domain colour and
     severity colour never mean the same hue). Additive - nothing above moves. */
  --sev-ser: #C2410C; --sev-serBg: #FBE9DC;
  /* --mon: reserved product-name signature for "Monitoring" — deep indigo, distinct
     from the UI sky-blue and the three domain colors. Site-wide brand decision
     2026-08-19 (founder): the product name carries this everywhere it appears. */
  --mon: #3730a3;
  --disp: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --pagew: 1080px;
  --textw: 720px;
  --sh1: 0 1px 2px rgba(22,35,58,.05);
  --sh2: 0 10px 26px -10px rgba(22,35,58,.14);
  --sh3: 0 20px 44px -16px rgba(22,35,58,.22);
  --sh4: 0 34px 70px -30px rgba(22,35,58,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased;
  font-size: 16.5px;
  /* footer pin: navy always meets the viewport bottom, even on short pages
     (board visual review P1-4 — the below-footer beige band on /success) */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
/* Display scale (board visual review P1-2): at 1280 the old 44px cap left
   nothing on the page big — section headings barely outranked card titles.
   Display 34→60, h2 26→36, so the hierarchy actually ranks. */
h1, h2, h3, h4 { font-family: var(--disp); color: var(--ink); }
h1 { font-size: clamp(35px, 4.6vw, 52px); line-height: 1.07; letter-spacing: -.028em; margin: 0 0 16px; font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(27px, 3.2vw, 37px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 600; text-wrap: balance; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.006em; font-weight: 600; }
/* h2 rendered at card scale — keeps the outline legal (h1→h2) where the visual
   hierarchy wants a small heading (axe heading-order is a build gate here) */
.h-sub { font-size: 18px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.006em; }
p { color: var(--body); margin: 8px 0; }
a { color: var(--blueDeep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--blue); }
button { font-family: inherit; cursor: pointer; font-size: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Inline style="" attributes are FORBIDDEN in page templates: the deployed CSP is
   style-src 'self' with no 'unsafe-inline', so an inline style silently dies in
   production and nowhere else (2026-07-31 audit F1 — 32 of them did exactly that).
   The axe gate now serves the real _headers CSP and fails on any console error,
   and build.js refuses any style= attribute in dist. Use these utilities. */
.wrap-narrow { max-width: 760px; }
.wrap-mid { max-width: 860px; }
.wrap-tight { max-width: 640px; }
.h1-sm { font-size: 30px; }
.p-sm { font-size: 15px; }
.p-lg { font-size: 19px; }
.mt2 { margin-top: 2px; }
.mt14 { margin-top: 14px; }
.mt16 { margin-top: 16px; }
.mt18 { margin-top: 18px; }
.mt22 { margin-top: 22px; }
.mt24 { margin-top: 24px; }
.mt26 { margin-top: 26px; }
.mt30 { margin-top: 30px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ftr-tag { color: #aeb9c8; font-size: 14.5px; max-width: 340px; margin-top: 10px; }
.soon-band .soon-p { max-width: 640px; }

/* skip link — first focusable element on every page */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ── header ── */
/* sticky header, consistent across breakpoints; nav.js hides it on scroll-down
   and brings it (and the CTA) back on scroll-up (the transition disables under
   prefers-reduced-motion via the global reduce rule). */
.hdr { background: var(--paper); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 60; transition: transform .28s ease; }
.hdr.hdr-hidden { transform: translateY(-100%); }
.hdr-in {
  max-width: var(--pagew); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 26px; min-height: 64px;
}
.brand {
  font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
}
.brand b { color: var(--blueDeep); font-weight: 800; }
.brand .mark { width: 26px; height: 26px; flex-shrink: 0; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--body); text-decoration: none; font-weight: 500; font-size: 15.5px;
  padding: 8px 12px; border-radius: 7px;
}
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a[aria-current="page"], .nav a.nav-here { color: var(--ink); font-weight: 650; }
.nav .cta {
  background: var(--blue); color: #fff; font-weight: 650; padding: 9px 16px; border-radius: 8px;
}
.nav .cta:hover { background: var(--blueDeep); color: #fff; }

/* mobile menu button (hidden >700px; unhidden by nav.js so no-JS keeps links) */
.menu-btn {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--hair); border-radius: 8px;
  padding: 8px 14px; font-weight: 650; color: var(--ink);
}
.menu-ico { position: relative; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }
.menu-ico::before, .menu-ico::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.menu-ico::before { top: -5px; }
.menu-ico::after { top: 5px; }
.nav-open .menu-ico { background: transparent; }
.nav-open .menu-ico::before { top: 0; transform: rotate(45deg); }
.nav-open .menu-ico::after { top: 0; transform: rotate(-45deg); }

/* ── page scaffolding ── */
main { display: block; }
.wrap { max-width: var(--pagew); margin: 0 auto; padding: 0 22px; }
/* Fable 007 F2 capped /success at the delivery mail's 640px card. Ticket 012 §1
   (the Lemont CC cold read): at 100% zoom on a laptop that card hid "When the
   PDF lands" and both guide cards below the fold, so the panel is the page width
   again (--pagew) and the content goes ACROSS it — the three steps in a row, the
   refund + account lines side by side, the wait copy beside the two cards. The
   pin: a 1280×800 viewport at 100% shows steps + wait copy + both cards with no
   vertical clipping, and no type is shrunk to fake the fold. */
.page-success .wrap { max-width: var(--pagew); }
/* the same fit on a 768-tall laptop (1366×768 is the common one): the section's
   34px tight padding becomes 22px on this page only, nothing else moves. */
.page-success .sec.tight { padding: 22px 0 34px; }
.sec { padding: 54px 0; }
.sec.tight { padding: 34px 0; }
.sec.alt { background: var(--paper2); border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px; font-weight: 700;
  color: var(--sub); margin: 0 0 8px;
}
.lead { font-size: 19px; line-height: 1.55; color: var(--body); max-width: var(--textw); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ── hero ── */
.hero { padding: 64px 0 56px; }
/* the three hero.sub beats: Site/Report navy, Scan blue — the wordmark's logic */
.sub .beat { color: var(--ink); font-weight: 700; }
.sub .beat-scan { color: var(--blueDeep); }
/* the three domains in their domain colors (founder direction 2026-08-02 —
   deliberate override of the guide's report-only palette rule; portal-audited
   accessible tokens, and the axe gate verifies contrast on every build) */
.sub .dom { font-weight: 650; }
.sub .dom-a11y { color: #9A5B00; }
.sub .dom-priv { color: #6D40C9; }
.sub .dom-sec { color: var(--sec); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: start; }
/* the artifact peek under the scan panel (board review P2-12: fill the dead
   air under the widget with proof — the report cover rising into view) */
.hero-panel { display: flex; flex-direction: column; gap: 0; }
.hero-proof {
  display: block; position: relative; margin: 22px 12px 0; height: 150px;
  overflow: hidden; border-radius: 10px 10px 0 0; border: 1px solid var(--hair);
  border-bottom: 0; background: #fff;
  box-shadow: 0 -6px 24px -12px rgba(20, 29, 43, .25);
}
.hero-proof img { display: block; width: 100%; height: auto; }
.hero-proof-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(248, 246, 242, .97) 55%, rgba(248, 246, 242, 0));
  color: var(--blueDeep); font-size: 14px; font-weight: 650;
  padding: 26px 16px 10px; text-decoration: underline; text-underline-offset: 2px;
}
.hero .sub { font-size: 19px; color: var(--body); max-width: 560px; }
.hero-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--body); }
.hero-points .tick { color: var(--blueDeep); flex-shrink: 0; margin-top: 3px; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 9px; padding: 13px 22px; font-weight: 650; font-size: 16.5px;
  text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blueDeep); color: #fff; }
.btn-secondary { background: #fff; color: var(--blueDeep); border: 1px solid var(--hair); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blueDeep); }
/* the paid action, navy so it never competes with the free-scan primary */
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy2); color: #fff; }
.btn-lg { padding: 16px 30px; font-size: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-duo .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
@media (max-width: 420px) { .btn-duo { grid-template-columns: 1fr; } }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 650;
  color: var(--blueDeep); align-self: center; padding: 13px 4px;
}
.link-arrow::after { content: "\2192"; }

/* ── cards ── */
.card { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 22px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.icon-tile { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
/* tile modifiers are t-prefixed: bare `sec`/`a11y` would collide with the
   section class .sec (its 54px padding blew a 40px tile out to 108px — caught
   by DOM measurement during the 2026-07-31 cold read) */
/* Brand guide (quoted in the 2026-07-31 favicon brief): the severity/domain
   palette is REPORT-ONLY and must never appear in website UI — "no colored
   domain dots." All three pillar tiles wear the brand blue. */
.icon-tile.t-a11y, .icon-tile.t-priv, .icon-tile.t-sec { background: var(--blueBg); color: var(--blueDeep); }
.icon-tile svg { width: 22px; height: 22px; }

/* ── scan panel (widget + checkout share the form anatomy) ── */
.panel { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(20, 29, 43, .04); }
.panel h2, .panel h3 { margin-top: 0; }
.field-label { display: block; font-weight: 650; font-size: 14.5px; margin: 0 0 6px; color: var(--ink); }
.field-row { display: flex; gap: 10px; }
.field-row input[type="url"], .field-row input[type="text"], input.txt {
  flex: 1; min-width: 0; border: 1px solid var(--hair); border-radius: 9px; padding: 12px 14px;
  font: inherit; color: var(--ink); background: #fff;
}
.field-row input:focus-visible, input.txt:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 14.5px; color: var(--body); }
.check input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex-shrink: 0; }
.fineprint { font-size: 13.5px; color: var(--sub); margin-top: 10px; }
/* Fable 011 F8: a real Stripe cs_ id is 66 characters with no break opportunity; on its own line,
   breaking anywhere, so /success never scrolls sideways on a phone. */
.fineprint code { display: block; margin: 4px 0; overflow-wrap: anywhere; word-break: break-all; }

/* widget result states */
.scan-status { margin-top: 16px; }
.notice { border-radius: 10px; padding: 14px 16px; font-size: 15px; border: 1px solid; }
.notice.info { background: var(--blueBg); border-color: #C7D8F7; color: #1e3a8a; }
.notice.warn { background: var(--amberBg); border-color: #EAD9B5; color: #6b4a00; }
.notice.err { background: var(--redBg); border-color: #EFD0CB; color: #7f2d24; }

.notice p { color: inherit; margin: 4px 0; }
.spin {
  width: 18px; height: 18px; border: 2.5px solid var(--blueBg); border-top-color: var(--blue);
  border-radius: 50%; display: inline-block; vertical-align: -4px; margin-right: 8px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -- free-scan results card (.fsr-*, CW-P32 2026-09-02) ----------------------
   Replaces .result/.result-head/.result-body/.stat-row/.stat/.issue-list/.sev,
   which the widget was the only consumer of. Two rules the card introduces:
     1. One colour system per zone. Domain colours (--a11y/--priv/--sec) only in
        .fsr-domains; severity colours only in .fsr-find. Never adjacent.
     2. The results card is the third ratified exception to the report-only
        palette rule (hero .sub 2026-08-02; .sb-chip; this - founder 2026-09-02).
   Drawn at the real column: ~471px, ~419px inside the scanbox padding. */
.fsr { margin-top: 18px; border-top: 1px solid var(--hair2); padding-top: 18px; }

/* masthead - no second border; the card is not a box inside a box */
.fsr-top { display: flex; align-items: flex-start; gap: 12px; }
/* Ticket 018 §10: no .fsr-mark. The navy ✓ tile read as "passed" above a count
   of failing checks, so the masthead starts with its kicker. */
.fsr-id { min-width: 0; flex: 1; }
.fsr-kick { font-family: var(--disp); font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--blueDeep); line-height: 1; }
.fsr-dom { font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.018em; color: var(--ink); word-break: break-all; line-height: 1.2; margin-top: 3px; }
.fsr-meta { font-size: 12.5px; color: var(--sub); margin-top: 3px; line-height: 1.3; }
.fsr-meta .pgn { font-family: var(--disp); font-size: 17px; font-weight: 800; color: var(--blueDeep); letter-spacing: -.02em; font-variant-numeric: tabular-nums; vertical-align: -1px; margin-right: 1px; }
.fsr-meta b { color: var(--body); font-weight: 600; }

/* bot-protection warning - always between the masthead and the readings */
.fsr-warn { margin-top: 14px; background: var(--amberBg); border: 1px solid #EAD9B5; color: #6b4a00; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; }
.fsr-warn b { display: block; font-family: var(--disp); font-size: 12.5px; margin-bottom: 3px; color: #5a3f00; }

/* the three readings - domain colour zone */
.fsr-domains { display: grid; gap: 9px; margin-top: 16px; }
/* min-width:0 is load-bearing: these are GRID items (default min-width:auto), and
   .fsr-dsub is nowrap, so without it the sub-line’s min-content width pushes the
   row past the card and the whole page scrolls sideways at 360px. Caught at 360,
   invisible at 471. The ellipsis below only engages once the row can shrink. */
.fsr-d { display: flex; align-items: center; gap: 13px; min-width: 0; border: 1px solid var(--hair2); border-left: 3px solid; border-radius: 10px; padding: 11px 14px 11px 12px; background: var(--paper2); }
.fsr-d.a { border-left-color: var(--a11y); background: linear-gradient(90deg, var(--a11yBg) 0%, var(--paper2) 62%); }
.fsr-d.p { border-left-color: var(--priv); background: linear-gradient(90deg, var(--privBg) 0%, var(--paper2) 62%); }
.fsr-d.s { border-left-color: var(--sec); background: linear-gradient(90deg, var(--secBg) 0%, var(--paper2) 62%); }
.fsr-n { font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; flex-shrink: 0; }
.fsr-d.a .fsr-n { color: var(--a11y); }
.fsr-d.p .fsr-n { color: var(--priv); }
/* Ticket 018 ruling F3: the Security numeral is ink at every count, failing
   included (a green failing count read as a pass mark). The frame stays --sec. */
.fsr-d.s .fsr-n { color: var(--ink); }
.fsr-dtxt { min-width: 0; flex: 1; }
.fsr-dlab { font-family: var(--disp); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.fsr-d.a .fsr-dlab { color: var(--a11y); }
.fsr-d.p .fsr-dlab { color: var(--priv); }
.fsr-d.s .fsr-dlab { color: var(--sec); }
.fsr-dsay { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.3; margin-top: 3px; }
.fsr-dsub { font-size: 12px; color: var(--sub); line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ticket 018 ruling F7: the Accessibility severity mix and the Privacy
   "Includes …" list wrap instead of ending in an ellipsis on a phone. */
.fsr-d.a .fsr-dsub, .fsr-d.p .fsr-dsub { white-space: normal; }
/* Ticket 018 §1: "0" failing security checks is plain ink: not the domain green
   (a green zero reads as a pass mark) and not grey (grey reads as "not
   measured", Fable 016 F4). The row keeps its Security frame. */
.fsr-d.s.none .fsr-n { color: var(--ink); }
/* The checks did not finish: no numeral, a quiet dash, and the second cap
   sentence may wrap (a sentence is never cut to an ellipsis). */
.fsr-d.s.cap .fsr-n { color: var(--sub); }
.fsr-d.s.cap .fsr-dsub { white-space: normal; }
/* the say line balances, so a wrapped say line never leaves one word alone on
   a phone (Fable 016 F5) */
.fsr-dsay { text-wrap: balance; }
/* the quiet line under the security tile (#fsr-sec-tpl) - wraps, never a banner */
.fsr-dnote { display: block; font-size: 11.5px; color: var(--sub); line-height: 1.4; margin: -3px 2px 0; }
/* Ticket 018 §2: "N automated accessibility checks ran on this page." Plain
   ink, never the green of a pass verdict (it replaced "N of N passed"). */
.fsr-ran { font-size: 12px; color: var(--ink); margin: 9px 2px 0; text-align: right; font-variant-numeric: tabular-nums; }

/* findings - ONE framed block: heading + definition, rows flush inside, and a
   bordered footer row built on /report's own .cov-more device (:837). Severity
   colour zone; no domain colour appears past this line. */
.fsr-block { margin-top: 20px; border: 1px solid var(--hair2); border-radius: 12px; overflow: hidden; background: #fff; }
.fsr-bhead { padding: 13px 15px 12px; border-bottom: 1px solid var(--hair2); background: var(--paper2); }
.fsr-bhead h3 { font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.fsr-def { font-size: 12px; color: var(--sub); line-height: 1.45; margin: 5px 0 0; }
.fsr-def b { font-family: var(--disp); font-weight: 700; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.fsr-def b.lc { color: var(--sev-bad); }
.fsr-def b.ls { color: var(--sev-ser); }
.fsr-def b.lm { color: var(--sev-warn); }
.fsr-def b.ln { color: var(--sev-slate); }
.fsr-find { list-style: none; margin: 0; padding: 0; }
.fsr-find li { display: flex; gap: 13px; align-items: center; padding: 12px 15px; border-top: 1px solid var(--hair2); position: relative; }
.fsr-find li:first-child { border-top: 0; }
.fsr-find li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; }
.fsr-find li.critical::before { background: var(--sev-bad); }
.fsr-find li.serious::before { background: var(--sev-ser); }
.fsr-find li.moderate::before { background: var(--sev-warn); }
.fsr-find li.minor::before { background: var(--sev-slate); }
.fsr-ftxt { min-width: 0; flex: 1; }
.fsr-sev { font-family: var(--disp); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1; display: block; margin-bottom: 3px; }
.fsr-find li.critical .fsr-sev { color: var(--sev-bad); }
.fsr-find li.serious .fsr-sev { color: var(--sev-ser); }
.fsr-find li.moderate .fsr-sev { color: var(--sev-warn); }
.fsr-find li.minor .fsr-sev { color: var(--sev-slate); }
.fsr-fd { font-size: 13.5px; color: var(--body); line-height: 1.35; display: block; }
.fsr-fx { flex-shrink: 0; text-align: center; min-width: 44px; }
.fsr-fx .c { font-family: var(--disp); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.fsr-fx .u { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); margin-top: 3px; }
.fsr-more2 { display: block; font-size: 12.5px; font-weight: 650; color: var(--blueDeep); text-align: center; margin: 0; padding: 12px 14px; border-top: 1px solid var(--hair2); background: var(--paper2); text-decoration: none; }
.fsr-more2:hover { background: var(--blueBg); }

/* the paid panel - cloned from #fsr-sell-tpl, never built in JS */
.fsr-sell { margin-top: 20px; background: var(--navy); border-radius: 14px; padding: 18px 18px 16px; color: #fff; box-shadow: var(--sh2); }
.fsr-sell .sh { font-family: var(--disp); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8FB4F5; margin: 0; }
.fsr-sell ul { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 8px; }
.fsr-sell li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #fff; font-weight: 500; line-height: 1.4; letter-spacing: -.005em; }
.fsr-sell li .p { color: #8FB4F5; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; display: block; }
.fsr-sell li .p svg { width: 17px; height: 17px; display: block; }
.fsr-more { display: inline-block; margin-top: 13px; font-size: 12.5px; font-weight: 650; color: #8FB4F5; text-decoration: underline; text-underline-offset: 3px; }
.fsr-cta { display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: var(--navy); border: 0; border-radius: 10px; padding: 15px 22px; font-family: var(--sans); font-weight: 700; font-size: 16.5px; width: 100%; margin-top: 14px; cursor: pointer; }
.fsr-cta .pr { font-variant-numeric: tabular-nums; }

/* (the result card's trust + terms strip left with the Stripe start it vouched for,
   Ticket 011 §1 — the strip now lives on the Price card as .pc-stripe) */

/* ── pricing ── */
.price-card { max-width: 460px; margin: 0 auto; text-align: left; }
.price-line { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 2px; }
.price-now { font-size: 46px; font-weight: 800; letter-spacing: -.02em; }
.price-was { font-size: 22px; color: var(--sub); text-decoration: line-through; text-decoration-thickness: 2px; }
.price-tag { background: var(--blueBg); color: #1e3a8a; font-weight: 700; font-size: 13px; border-radius: 6px; padding: 3px 9px; }
.price-sub { color: var(--sub); font-size: 14.5px; margin-bottom: 14px; }
.feature-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 9px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--body); }
.feature-list .tick { color: var(--blueDeep); flex-shrink: 0; margin-top: 3px; }

/* ── monitoring coming soon ── */
.soon-band { border: 1px dashed var(--hair); background: var(--paper2); border-radius: 14px; padding: 26px; }
.soon-chip {
  display: inline-block; background: var(--slateBg); color: #334155; font-weight: 700;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; border-radius: 6px; padding: 4px 10px; margin-bottom: 10px;
}

/* ── steps ── */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { position: relative; padding: 22px; background: var(--card); border: 1px solid var(--hair); border-radius: 12px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  font-weight: 750; font-size: 15px; margin-bottom: 12px;
}

/* ── FAQ ── */
.faq { display: grid; gap: 10px; }
.faq-group { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); margin: 26px 0 2px; }
.faq-group:first-child { margin-top: 0; }
.faq details { background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 0; }
.faq summary {
  cursor: pointer; font-weight: 650; padding: 16px 18px; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; color: var(--sub); flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-a { padding: 0 18px 16px; color: var(--body); }
.faq .faq-a p { margin-top: 0; }

/* ── legal / prose pages ── */
.prose { max-width: var(--textw); margin: 0 auto; }
.prose h2, .prose h3 { scroll-margin-top: 24px; }
.toc { background: var(--paper2); border: 1px solid var(--hair2); border-radius: 10px; padding: 16px 20px; margin: 0 0 26px; }
.toc-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sub); margin: 0 0 6px; }
/* the counsel headings carry their own section numbers — no list numbering */
.toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 28px; }
.toc li { font-size: 14px; margin: 3px 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.prose h1 { font-size: 30px; }
.prose h2 { font-size: 21px; margin-top: 28px; }
.prose h3 { font-size: 17px; margin-top: 20px; }
.prose li { color: var(--body); margin: 4px 0; }
.prose .doc-meta { color: var(--sub); font-size: 14px; margin-bottom: 22px; }
/* counsel tables scroll inside their own box (never a horizontal page scroll) */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 16px 0; }
.prose table { border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--hair); padding: 7px 11px; text-align: left; font-size: 14px; vertical-align: top; }
.prose th { background: var(--paper2); font-weight: 650; }

/* ── footer (grouped SaaS columns — board reviews P1-4/P2-9) ── */
.ftr { background: var(--navy); color: #c9d2df; margin-top: 64px; }
.ftr-in { max-width: var(--pagew); margin: 0 auto; padding: 42px 22px 30px; }
.ftr-grid {
  display: grid; gap: 30px 34px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
}
.ftr .fbrand { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.ftr .fbrand b { color: #7CA8F7; }
.ftr-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ftr-h {
  color: #8b98aa; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; margin: 0 0 4px;
}
.ftr a { color: #c9d2df; text-decoration: none; font-size: 14.5px; overflow-wrap: anywhere; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr .legalrow { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 28px; padding-top: 16px; display: flex; justify-content: space-between; gap: 8px 22px; flex-wrap: wrap; font-size: 13px; color: #8b98aa; align-items: baseline; }
.ftr .legalrow-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ftr .legalrow-links a { font-size: 13px; color: #8b98aa; }
.ftr .legalrow-links a:hover { color: #fff; }
@media (max-width: 860px) {
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-brand-col { grid-column: 1 / -1; }
}

/* ── homepage feature rows (text beside a real report crop) ── */
.frows { display: grid; gap: 34px; }
.frow {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 30px 44px; align-items: center;
}
.frow-flip .frow-text { order: 2; }
.frow-flip .frow-media { order: 1; }
.frow-text h3 { font-size: 21px; }
.frow-media { display: block; }
.frow-media img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--hair); border-radius: 10px;
  box-shadow: 0 12px 30px -18px rgba(20, 29, 43, .3);
}
.frow-media:hover img { border-color: var(--blue); }
@media (max-width: 860px) {
  .frow, .frow-flip { grid-template-columns: 1fr; gap: 14px; }
  .frow-flip .frow-text { order: 1; }
  .frow-flip .frow-media { order: 2; }
}

/* ── how it works: an inline numbered strip, no card chrome ── */
.howstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.how { display: flex; gap: 14px; align-items: flex-start; }
.how p { margin: 2px 0 0; }
.hownum {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  font-weight: 750; font-size: 15px; margin-top: 2px;
}
@media (max-width: 700px) { .howstrip { grid-template-columns: 1fr; gap: 16px; } }

/* ── see-the-report section ── */
.see-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 34px 54px; align-items: center;
}
.see-media { display: block; }
.see-media img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--hair); border-radius: 10px;
  box-shadow: 0 16px 40px -20px rgba(20, 29, 43, .35);
}
.see-media:hover img { border-color: var(--blue); }
@media (max-width: 860px) { .see-grid { grid-template-columns: 1fr; } }

/* ── the editorial positioning moment (one per page; no eyebrow, no card) ── */
.editorial {
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.45; color: var(--ink);
  letter-spacing: -.012em; margin: 0; max-width: 880px;
}
.standards { color: var(--sub); font-size: 14px; margin: 22px 0 0; }

/* ── risk-reversal strip under the price card ── */
.assure { max-width: 460px; margin: 14px auto 0; text-align: left; }
.assure p { color: var(--body); font-size: 14.5px; border-left: 3px solid var(--blueBg); padding-left: 14px; }

/* ── closing CTA band ── */
.ctaband { background: var(--navy); }
.ctaband h2 { color: #fff; }
.ctaband .center-lead { color: #c9d2df; margin-left: auto; margin-right: auto; }
/* 012-fold F16: the buyer band's account sentence links the portal host. On the navy the
   site's deep-blue link is invisible; the footer's on-navy link colour (#c9d2df, underlined so
   it still reads as a link inside grey lead text) is the convention. */
.ctaband .center-lead a { color: #c9d2df; text-decoration: underline; text-underline-offset: 3px; }
/* #6: a page that ends on the navy .ctaband would show the footer's 64px top
   margin as a cream slab between two navy bands. The old `.ctaband + .ftr`
   neutralizer can never match — shell.js wraps sections in <main>, so .ftr is
   <main>'s sibling, not .ctaband's. Scope it to the pages that close on the band
   (home + /report). */
.page-home .ftr, .page-report .ftr { margin-top: 0; }


/* success page steps reuse the how-strip anatomy, stacked */
.next-steps { display: grid; gap: 16px; }

/* ── methodology rows (headed rows, not cards — varies the layout grammar) ── */
.mrows { border-top: 1px solid var(--hair); }
.mrow {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 26px;
  padding: 18px 0; border-bottom: 1px solid var(--hair);
}
.mrow-h { margin: 0; font-size: 17px; }
.mrow-p { margin: 0; }
.limit-h { margin: 22px 0 4px; font-size: 17.5px; }
.limit-h:first-child { margin-top: 0; }

/* ── 404 ── */
.err-code {
  font-size: clamp(80px, 14vw, 140px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: var(--sub); margin: 0 0 8px;
}

.center-row { justify-content: center; }

/* ── resources hub rows ── */
.hub { display: grid; gap: 12px; }
.hub-row {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  background: var(--card); border: 1px solid var(--hair); border-radius: 12px;
  padding: 20px 22px; color: inherit;
}
.hub-row:hover { border-color: var(--blue); color: inherit; }
.hub-row:hover .hub-h { color: var(--blueDeep); }
.hub-body { display: block; min-width: 0; }
.hub-h { display: block; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 3px; }
.hub-p { display: block; color: var(--body); font-size: 15px; }
.hub-go { margin-left: auto; color: var(--blueDeep); font-size: 22px; flex-shrink: 0; }

@media (max-width: 700px) {
  .mrow { grid-template-columns: 1fr; gap: 4px; }
}

/* ── responsive ── */
@media (max-width: 860px) {
  .hero { padding: 40px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .grid3, .steps { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}
/* Mobile header (board visual review P1-4): a real menu, not a wrapped link
   list. ≤700px with JS: the nav becomes a full-width sheet under the header,
   toggled by the menu button (nav.js owns aria-expanded + the .nav-open class).
   Without JS the plain link list wraps — degraded but complete. */
@media (max-width: 700px) {
  .js .nav {
    display: none;
    position: fixed; left: 0; right: 0; top: 57px; bottom: 0; z-index: 50;
    background: var(--paper); border-top: 1px solid var(--hair);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px 16px; margin: 0; overflow-y: auto;
  }
  html.js.nav-open .nav { display: flex; }
  .js .nav a { font-size: 18px; padding: 13px 12px; border-radius: 9px; }
  .js .nav .cta { margin-top: 12px; text-align: center; }
  .js .menu-btn { display: inline-flex; }
  html.nav-open { overflow: hidden; }
  .hdr { position: sticky; top: 0; z-index: 60; }
  .hdr-in { min-height: 56px; padding: 0 16px; }
  html:not(.js) .hdr-in { flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  html:not(.js) .nav { margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .grid3, .steps { grid-template-columns: 1fr; }
  .sec { padding: 38px 0; }
  .field-row { flex-direction: column; }
  .price-now { font-size: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LG-39 HOMEPAGE (v7 direction) — scoped under .page-home so the shared chrome
   and every other page keep their existing look. Ported 2026-08-09 from
   website/_preview/homepage-v7.html. No inline styles (CSP); per-card CSS vars
   are set by modifier classes. D1 (mobile fluidity), D3 (Monitoring life), and
   D4 (domain-colored card headings) are folded in here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* section rhythm + accent keyline (life without more color) */
.page-home .sec { padding: 78px 0; }
.page-home .sec-head { max-width: 680px; margin-bottom: 40px; }
.page-home .sec-head.center { margin-left: auto; margin-right: auto; }
.page-home .kline { display: block; width: 42px; height: 4px; border-radius: 3px; background: var(--blue); margin: 0 0 18px; }
.page-home .sec-head.center .kline { margin-left: auto; margin-right: auto; }
.page-home .lead { font-size: 18.5px; line-height: 1.55; color: var(--body); }
.page-home .mx { margin-left: auto; margin-right: auto; }
.page-home .arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--blueDeep); text-decoration: none; font-size: 15.5px; }
.page-home .arrow::after { content: "\2192"; transition: transform .15s; }
.page-home .arrow:hover::after { transform: translateX(3px); }

/* hero */
.page-home .hero { padding: 60px 0 66px; position: relative; }
.page-home .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(44% 52% at 90% 10%, rgba(37,99,235,.06), transparent 72%); pointer-events: none; z-index: 0; }
.page-home .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 52px; align-items: center; position: relative; z-index: 1; }
.page-home .hero-grid > * { min-width: 0; }
.page-home .hero h1 .l2 { color: var(--blueDeep); }
/* Ticket 016 §6: one block per sentence, so h1 text-wrap:balance balances each
   sentence on its own (a <br> left the second one's last pair alone). */
.page-home .hero h1 .l1, .page-home .hero h1 .l2 { display: block; }
.page-home .hero .sub { font-size: 20px; line-height: 1.55; color: var(--body); max-width: 480px; margin: 0; }
/* the one domain-color callout on the page (hero only) */
.page-home .sub .dom { font-weight: 700; border-radius: 5px; padding: 0 5px; }
.page-home .sub .dom-a11y { color: var(--a11y); background: var(--a11yBg); }
.page-home .sub .dom-priv { color: var(--priv); background: var(--privBg); }
.page-home .sub .dom-sec { color: var(--sec); background: var(--secBg); }
.page-home .sub .beat, .page-home .sub .beat-scan { color: var(--ink); font-weight: 500; }

/* free-scan box — one cohesive unit over the shipped one-form contract */
.scanbox { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--sh4); padding: 26px; min-width: 0; scroll-margin-top: 80px; }
.scanbox .sb-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; flex-wrap: wrap; }
.scanbox .free { font-family: var(--disp); font-weight: 700; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; background: var(--blue); color: #fff; border-radius: 6px; padding: 4px 10px; }
.scanbox .sb-h { margin: 0; font-size: 21px; }
.scanbox .ctx { font-size: 15px; color: var(--body); margin: 0 0 16px; }
.scanbox .field { display: flex; align-items: center; border: 1.5px solid var(--hair); border-radius: 12px; padding: 0 6px 0 14px; background: #fff; }
.scanbox .field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blueBg); }
.scanbox .field .fbox { display: flex; align-items: center; flex: 1; min-width: 0; }
.scanbox .field .pre { color: var(--sub); font-size: 15px; flex-shrink: 0; }
.scanbox .field input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; padding: 0 10px; font: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.scanbox .field .btn { margin: 6px 0; padding: 12px 20px; flex-shrink: 0; }
/* Ticket 016 §6: on a phone the one-row field left the input a ~140px stub
   ("yourbusiness.cor" at 375). Under 420px the prefix + input keep the bordered
   box to themselves and Scan drops under it, full width. */
@media (max-width: 420px) {
  .scanbox .field { flex-direction: column; align-items: stretch; gap: 10px; border: 0; border-radius: 0; padding: 0; background: none; }
  .scanbox .field:focus-within { box-shadow: none; }
  .scanbox .field .fbox { border: 1.5px solid var(--hair); border-radius: 12px; padding: 0 6px 0 14px; background: #fff; }
  .scanbox .field .fbox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blueBg); }
  .scanbox .field .btn { margin: 0; width: 100%; padding: 14px 20px; }
}
.scanbox .check { margin: 12px 2px 0; font-size: 12.5px; color: var(--sub); }
.scanbox .check a { color: var(--sub); }
.scanbox .sb-chips { display: flex; gap: 8px; margin: 18px 0 0; flex-wrap: wrap; }
/* .sb-chip is shared by the scan box and the Price card (Ticket 011 visual fold);
   only the row's margin (.sb-chips above / .pc-chips below) is per-surface. */
.sb-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; border-radius: 20px; padding: 6px 12px; }
.sb-chip .d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-chip.a { background: var(--a11yBg); color: var(--a11y); } .sb-chip.a .d { background: var(--a11y); }
.sb-chip.p { background: var(--privBg); color: var(--priv); } .sb-chip.p .d { background: var(--priv); }
.sb-chip.s { background: var(--secBg); color: var(--sec); } .sb-chip.s .d { background: var(--sec); }
/* T2 paid-path weight: the full-site (paid) trigger is a real secondary button,
   not a text link — clear weight without out-competing the filled free "Scan". */
.scanbox .sb-full { margin: 12px 2px 0; padding-top: 10px; border-top: 1px solid var(--hair2); display: flex; gap: 10px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* CW-P32: hidden while a result card is on screen (the card carries its own
   paid CTA). display:flex above would otherwise beat the [hidden] default. */
.scanbox .sb-full[hidden] { display: none; }
.scanbox .sb-full-lab { font-size: 14.5px; color: var(--sub); font-weight: 500; }
.scanbox .sb-paid { padding: 9px 15px; font-size: 14px; white-space: nowrap; }
.scanbox .sb-paid[disabled] { opacity: .55; cursor: default; }

/* what we check — the Site → cards → One report flow */
.flow { display: grid; grid-template-columns: 140px 36px minmax(0, 1fr) 36px 128px; gap: 12px; align-items: center; }
.fnode { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; }
.fnode .nlab { font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; color: var(--sub); font-weight: 600; }
.fsite { width: 140px; height: 112px; border: 1.5px solid var(--hair); border-radius: 14px; background: #fff; box-shadow: var(--sh2); position: relative; overflow: hidden; }
.fsite .top { height: 24px; background: var(--blueBg); border-bottom: 1px solid var(--hair2); display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.fsite .top i { width: 7px; height: 7px; border-radius: 50%; }
.fsite .top i:nth-child(1) { background: #E4A0A0; } .fsite .top i:nth-child(2) { background: #E9CE9A; } .fsite .top i:nth-child(3) { background: #9FCBB0; }
.fsite .top .u { margin-left: 6px; height: 9px; flex: 1; background: #fff; border: 1px solid #C7D8F7; border-radius: 3px; }
.fsite .ln { position: absolute; left: 14px; height: 7px; border-radius: 3px; }
.fsite .ln:nth-child(2) { top: 40px; width: 74px; background: var(--a11y); opacity: .5; }
.fsite .ln:nth-child(3) { top: 55px; width: 104px; background: var(--hair); }
.fsite .ln:nth-child(4) { top: 70px; width: 88px; background: var(--priv); opacity: .45; }
.fsite .ln:nth-child(5) { top: 85px; width: 64px; background: var(--sec); opacity: .5; }
.frep { width: 108px; height: 138px; border-radius: 10px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--sh3); position: relative; overflow: hidden; }
.frep::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 15px; background: var(--navy); }
.frep .k { position: absolute; top: 28px; left: 13px; width: 24px; height: 4px; border-radius: 2px; background: var(--blue); }
.frep .t { position: absolute; top: 39px; left: 13px; right: 18px; height: 8px; border-radius: 2px; background: var(--ink); }
.frep .t2 { position: absolute; top: 51px; left: 13px; width: 54px; height: 6px; border-radius: 2px; background: var(--sub); }
.frep .chip { position: absolute; height: 13px; border-radius: 4px; bottom: 15px; }
.frep .c1 { left: 13px; width: 24px; background: var(--a11yBg); border: 1px solid var(--a11y); }
.frep .c2 { left: 42px; width: 24px; background: var(--privBg); border: 1px solid var(--priv); }
.frep .c3 { left: 71px; width: 24px; background: var(--secBg); border: 1px solid var(--sec); }
.fconn { display: flex; align-items: center; height: 2px; }
.fconn i { height: 2px; flex: 1; background: linear-gradient(90deg, var(--hair), var(--sub)); }
.fconn::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--sub); margin-left: -1px; }
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dcard { background: #fff; border: 1px solid var(--hair); border-top: 4px solid var(--dc); border-radius: 13px; padding: 20px 18px; box-shadow: var(--sh2); display: flex; flex-direction: column; }
.dcard-a11y { --dc: var(--a11y); --dcbg: var(--a11yBg); }
.dcard-priv { --dc: var(--priv); --dcbg: var(--privBg); }
.dcard-sec { --dc: var(--sec); --dcbg: var(--secBg); }
/* Ticket 016 §5: icon + domain word on ONE row, desktop and mobile; the
   sentence and tags sit under that row. */
.dcard .dc-head { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; min-width: 0; }
.dcard .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--dcbg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dcard .ic svg { width: 24px; height: 24px; }
/* D4: the three what-we-check card headings carry their domain color */
.dcard h3 { color: var(--dc); font-size: 19px; margin: 0; min-width: 0; }
.dcard p { font-size: 14px; color: var(--body); margin: 0 0 16px; line-height: 1.45; }
/* LOW: tags bottom-anchored so the three cards' chips align regardless of body
   length; nowrap + tighter tracking so "SECURITY HEADERS · TLS GRADE" fits one line. */
/* two short standard pills per card (kept balanced across all three so the
   security pair doesn't read heavier than the others) */
.dcard .tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.dcard .tag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: var(--dc); background: var(--dcbg); border-radius: 6px; padding: 4px 9px; font-weight: 600; }

/* your report — illustrative example.com teaser */
.deliv-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 50px; align-items: center; }
/* Ticket 016 §6 — split sections (the homepage .deliv-grid, /report's
   .appr-grid; /report's coverage section stacks instead, see .deliv-stack):
   the crop / mock is never taller than the copy block beside it.
   .vis wraps the visual; on desktop it contributes no height of its own
   (contain: size), so the row is the copy's height, and it stretches to that row.
   The frame inside is centred and capped at 100% of it: a shorter crop keeps its
   own height, a taller one is clipped at the copy's height. Stacked (≤920px) the
   wrapper is an ordinary block again, after the copy. */
.vis { min-width: 0; }
@media (min-width: 921px) {
  .vis { align-self: stretch; contain: size; display: flex; flex-direction: column; justify-content: center; }
  .vis > .ireport { max-height: 100%; display: flex; flex-direction: column; }
  .vis > .ireport > .ir-bar { flex-shrink: 0; }
  .vis > .ireport > .ir-body { min-height: 0; overflow: hidden; position: relative; }
  .vis > .ireport > .ir-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to top, var(--paper), rgba(248, 246, 242, 0)); pointer-events: none; }
}
.ireport { border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; box-shadow: var(--sh4); background: var(--paper); min-width: 0; }
.ir-bar { height: 32px; background: var(--navy); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.ir-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); flex-shrink: 0; }
.ir-bar span { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: #aeb9c8; }
.ir-body { padding: 22px 24px 24px; }
.ir-kick { font-family: var(--disp); font-size: 12.5px; font-weight: 600; color: var(--blueDeep); margin: 0 0 10px; }
.ir-risk { display: flex; align-items: center; gap: 13px; background: var(--navy); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ir-risk .rl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #aeb9c8; }
.ir-risk .rc { font-family: var(--disp); font-size: 14px; font-weight: 700; background: var(--sev-warn); color: #fff; border-radius: 6px; padding: 4px 11px; }
.ir-risk .rt { font-size: 12.5px; color: #c9d2df; line-height: 1.4; border-left: 1px solid rgba(255,255,255,.22); padding-left: 13px; flex: 1; min-width: 120px; }
.ir-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.ir-c { background: #fff; border: 1px solid var(--hair); border-top: 3px solid var(--cc); border-radius: 10px; padding: 13px; }
.ir-a11y { --cc: var(--a11y); } .ir-priv { --cc: var(--priv); } .ir-sec { --cc: var(--sec); }
.ir-c .h { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cc); margin-bottom: 9px; }
.ir-c .b { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 20px; padding: 3px 8px; margin-bottom: 9px; }
.ir-c .b.bad { background: var(--sev-badBg); color: var(--sev-bad); }
.ir-c .b.sl { background: var(--sev-slateBg); color: var(--sev-slate); }
.ir-c .b.gd { background: var(--sev-goodBg); color: var(--sev-good); }
.ir-c .m { font-family: var(--disp); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.ir-c .m small { font-size: 12px; color: var(--sub); font-weight: 500; }
.ir-find { border: 1px solid var(--hair2); border-left: 3px solid var(--a11y); border-radius: 8px; padding: 11px 13px; background: #fff; }
.ir-find .ft { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.ir-find .fs { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--sev-bad); background: var(--sev-badBg); border-radius: 5px; padding: 2px 7px; }
.ir-find .fn { font-family: var(--disp); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ir-find p { font-size: 12px; color: var(--body); margin: 0; line-height: 1.4; }
.ir-more { margin-top: 12px; font-size: 11.5px; color: var(--sub); text-align: center; font-family: var(--mono); letter-spacing: .04em; }

/* how it works — navy discs */
.proc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; position: relative; }
.proc::before { content: ""; position: absolute; left: 16%; right: 16%; top: 32px; height: 2px; background: var(--hair); }
.pstep { text-align: center; padding: 0 18px; position: relative; }
.pstep .disc { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: var(--sh2); }
.pstep .disc svg { width: 30px; height: 30px; }
.pstep .pn { position: absolute; top: -6px; right: calc(50% - 40px); width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--navy); border: 2px solid var(--paper2); font-family: var(--disp); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pstep h3 { font-size: 19px; margin: 0 0 7px; }
.pstep p { font-size: 14.5px; margin: 0; max-width: 250px; margin-left: auto; margin-right: auto; }

/* pricing — clean card, blue accent, refunds folded in */
.pricewrap { max-width: 560px; margin: 0 auto; }
.pricecard { background: #fff; border: 1px solid var(--hair); border-top: 4px solid var(--blue); border-radius: 20px; box-shadow: var(--sh4); overflow: hidden; text-align: left; }
.pricecard .pc-body { padding: 32px 32px 28px; }
.pricecard .pc-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pricecard .pc-now { font-family: var(--disp); font-size: 58px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.pricecard .pc-was { font-size: 22px; color: var(--sub); text-decoration: line-through; text-decoration-thickness: 2px; }
.pricecard .pc-tag { background: var(--blue); color: #fff; font-weight: 600; font-size: 12px; border-radius: 20px; padding: 5px 11px; align-self: center; }
.pricecard .pc-sub { color: var(--sub); font-size: 14.5px; margin: 12px 0 18px; }
.pricecard .pc-getlabel { font-family: var(--disp); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); margin: 0 0 14px; padding-top: 18px; border-top: 1px solid var(--hair2); }
.pricecard .pc-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.pricecard .pc-list li { display: flex; gap: 12px; align-items: center; font-size: 15.5px; color: var(--body); line-height: 1.4; }
/* Ticket 011 visual fold: /report's tile icon (a small .page-report .incl .i-ic) replaces
   the generic tick, so the three lines read as the product they describe. */
.pricecard .pc-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--blueBg); color: var(--blueDeep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pricecard .pc-ic svg { width: 19px; height: 19px; display: block; }
/* The scope row: the scan box's three domain chips + the result card's "See what's inside"
   device on one line at desktop; the link wraps under the chips on a phone. */
.pricecard .pc-scope { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 22px; }
.pricecard .pc-chips { margin: 0; }
.pricecard .pc-more { font-size: 13.5px; font-weight: 650; color: var(--blueDeep); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Fable fold F2: the three chips are 288px at their scan-box size; the card's column is 285
   at 375 and 270 at 360, so "Security" orphaned onto its own row. Phone-scoped to the Price
   card only (the scan box's chips are untouched). Measured: 266px, one row at 360. */
@media (max-width: 400px) {
  .pricecard .pc-chips { gap: 6px; }
  .pricecard .pc-chips .sb-chip { padding: 6px 10px; font-size: 12.5px; }
}
.pricecard .pc-cta { margin: 0 0 10px; }
.pricecard .pc-stripe { display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--sub); margin: 0; text-align: center; }
.pricecard .pc-stripe .pc-lock { margin-top: 2px; }
.pricecard .pc-stripe .pc-lock { color: var(--sub); flex-shrink: 0; }
.pricecard .pc-stripe b { color: #635BFF; font-weight: 600; }
.pricecard .pc-deliver { text-align: center; font-size: 13px; color: var(--sub); margin: 0; }
.pricecard .pc-refund { background: var(--soft); border-top: 1px solid var(--hair2); padding: 18px 32px; text-align: center; }
.pricecard .pc-refund p { font-size: 13.5px; color: var(--body); margin: 0; line-height: 1.6; }
.pricecard .pc-refund a { color: var(--blueDeep); }
/* Ticket 011 §1: Price owns the only Checkout start, so the card carries the URL
   field + authorization + button + status. The field mirrors the scan box's
   (https:// prefix, 54px input) so the buyer recognizes it as the same input. */
.pricecard .pc-form { margin: 0 0 12px; padding-top: 18px; border-top: 1px solid var(--hair2); }
.pricecard .pc-label { display: block; font-weight: 650; font-size: 14.5px; color: var(--ink); margin: 0 0 8px; }
.pricecard .pc-field { display: flex; align-items: center; border: 1.5px solid var(--hair); border-radius: 12px; padding: 0 6px 0 14px; background: #fff; }
.pricecard .pc-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blueBg); }
.pricecard .pc-field .pre { color: var(--sub); font-size: 15px; flex-shrink: 0; }
.pricecard .pc-field input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; padding: 0 10px; font: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.pricecard .pc-check { margin: 12px 2px 16px; font-size: 13.5px; color: var(--sub); }
.pricecard .pc-check a { color: var(--sub); }
.pricecard .pc-status { margin-top: 12px; }
.pricecard .pc-status:empty { display: none; }
.pricecard .pc-form .notice.warn { margin-top: 12px; }
/* Fable 011 F4: the refused control shows the error, not just the notice under the button. */
.pricecard .pc-field.invalid { border-color: #EFD0CB; box-shadow: 0 0 0 3px var(--redBg); }
.pricecard .pc-check.invalid, .pricecard .pc-check.invalid a { color: #7f2d24; }

/* our approach */
.appr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.appr-grid h2 { max-width: 460px; }
.appr-body { font-size: 16.5px; color: var(--body); max-width: 480px; margin: 0 0 24px; }
.proofs { display: grid; gap: 16px; }
.proof { border-left: 3px solid var(--navy); padding-left: 16px; }
.proof h3 { font-size: 16px; margin: 0 0 3px; }
.proof p { font-size: 14px; margin: 0; }
.creds { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair2); }
.cred { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cred svg { width: 15px; height: 15px; flex-shrink: 0; }
.vs { border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; box-shadow: var(--sh3); background: #fff; min-width: 0; }
.vs-row { display: grid; grid-template-columns: 1fr 1fr; }
.vs-col { padding: 22px; display: flex; flex-direction: column; }
.vs-col.a { background: var(--paper2); border-right: 1px solid var(--hair2); }
.vs-h { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); margin: 0 0 4px; font-weight: 600; }
.vs-sub { font-size: 12px; color: var(--sub); margin: 0 0 16px; }
/* left: a dense, undifferentiated dump of flags — everything flagged, no order */
.vs-dump { display: grid; gap: 9px; }
.vs-fl { display: flex; align-items: center; gap: 8px; }
.vs-fl .vs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sev-slate); opacity: .38; flex-shrink: 0; }
.vs-fl .vs-fb { height: 8px; border-radius: 3px; background: var(--sev-slateBg); }
.vs-fb.x1 { width: 100%; } .vs-fb.x2 { width: 78%; } .vs-fb.x3 { width: 92%; } .vs-fb.x4 { width: 68%; } .vs-fb.x5 { width: 86%; } .vs-fb.x6 { width: 62%; } .vs-fb.x7 { width: 96%; }
/* right: a short, ranked list of real findings — priority chip + finding + fix */
.vs-ranked { display: grid; gap: 15px; }
.vs-item { display: flex; align-items: center; gap: 11px; }
.vs-p { font-family: var(--disp); font-weight: 700; font-size: 11px; color: #fff; padding: 4px 7px; border-radius: 5px; flex-shrink: 0; }
.vs-p.p1 { background: var(--sev-bad); } .vs-p.p2 { background: var(--sev-warn); } .vs-p.p3 { background: var(--sev-slate); }
.vs-txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.vs-title { height: 9px; border-radius: 3px; background: var(--ink); opacity: .78; }
.vs-item:nth-child(1) .vs-title { width: 90%; } .vs-item:nth-child(2) .vs-title { width: 74%; } .vs-item:nth-child(3) .vs-title { width: 84%; } .vs-item:nth-child(4) .vs-title { width: 66%; }
.vs-hint { height: 5px; border-radius: 3px; background: var(--hair); width: 54%; }
.vs-cap { font-size: 12px; color: var(--sub); margin: 10px 0 0; margin-top: auto; padding-top: 14px; }
.vs-cap-strong { color: var(--ink); font-weight: 600; }
/* live-review 2026-08-19: brand the winning side (mark + name in ink) and give the
   free-checker "dump" scrambled severity dots so the unsorted-alarms contrast lands. */
.vs-us { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.vs-us .mark { width: 15px; height: 15px; flex-shrink: 0; }
.vs-fl .vs-dot.r { background: var(--sev-bad); opacity: .55; }
.vs-fl .vs-dot.w { background: var(--sev-warn); opacity: .55; }

/* monitoring — reveal, name prominent; D3: more life via weight + structure */
.mon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: center; }
.mon .mchip { display: inline-flex; align-items: center; gap: 7px; background: var(--blueBg); color: var(--blueDeep); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 20px; padding: 5px 12px; margin-bottom: 16px; }
.mon .mchip .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: monpulse 2s ease-in-out infinite; }
@keyframes monpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.mon h2 { font-size: clamp(30px, 3.6vw, 40px); }
.mon .hook { font-size: 17.5px; color: var(--body); max-width: 470px; margin: 0 0 22px; }
.mon .hook b { color: var(--ink); font-weight: 600; }
/* T8: the capability list (left) beside a mocked monitoring artifact (right) at
   the report teaser's visual weight — an illustrative "change detected" card. */
.mon .mon-list { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 10px; }
.mon .mon-list li { font-size: 14.5px; color: var(--body); padding-left: 17px; position: relative; line-height: 1.45; }
.mon .mon-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.mon .mon-list b { color: var(--ink); font-weight: 600; }
.monart { border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; box-shadow: var(--sh4); background: #fff; min-width: 0; }
.ma-head { display: flex; align-items: center; gap: 9px; background: var(--navy); padding: 12px 16px; }
.ma-head .ma-name { font-family: var(--mono); font-size: 11.5px; color: #c9d2df; }
.ma-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8fe3b4; background: rgba(70,200,138,.16); border-radius: 20px; padding: 3px 9px 3px 8px; }
.ma-live .ma-dot { width: 7px; height: 7px; border-radius: 50%; background: #46c88a; box-shadow: 0 0 0 3px rgba(70,200,138,.22); flex-shrink: 0; animation: monpulse 2s ease-in-out infinite; }
.ma-body { padding: 18px; }
.ma-alert { display: flex; gap: 12px; align-items: center; background: #FBEEDD; border: 1px solid #EED9BB; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.ma-ic { color: var(--sev-warn); flex-shrink: 0; display: flex; }
.ma-ic svg { width: 22px; height: 22px; }
.ma-alert-txt { flex: 1; min-width: 0; }
.ma-alert-txt b { display: block; font-family: var(--disp); font-size: 13.5px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
/* Ticket 016 §6 (Fable 016 F10): as an inline span the line took the parent's
   26px strut, so on a phone the cream callout was ~100px tall around ~50px of
   text. A block line keeps its own 1.35 pitch; the box and its copy stay. */
.ma-alert-txt span { display: block; font-size: 12px; color: var(--body); line-height: 1.35; }
.ma-spark { color: var(--sev-warn); flex-shrink: 0; width: 56px; display: flex; }
.ma-spark svg { width: 56px; height: 24px; }
.ma-rows { border: 1px solid var(--hair2); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.ma-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--hair2); font-size: 13px; }
.ma-row:last-child { border-bottom: 0; }
.ma-row .ma-k { color: var(--body); }
.ma-row .ma-v.steady { font-weight: 600; font-size: 12px; color: var(--sub); }
/* Ticket 019: the uptime-ok figure ("100%") is a verdict, so Good green, not --sec. */
.ma-row .ma-up { font-family: var(--disp); font-weight: 700; color: var(--green); }
.ma-foot { font-size: 11.5px; color: var(--sub); margin: 0; text-align: center; font-family: var(--mono); letter-spacing: .02em; }

/* homepage closing band uses the shared .ctaband; nudge the copy color */
.page-home .ctaband .center-lead { color: #c9d2df; max-width: 560px; }

/* ── homepage responsive (scoped selectors outrank the generic media rules,
      so the homepage carries its own collapse points — D1 lives here) ── */
@media (max-width: 920px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track floors at its item's min-content,
     which is how a wide crop can push a column past a phone's width. */
  .page-home .hero-grid, .deliv-grid, .appr-grid, .mon { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fconn { display: none; }
  /* Ticket 016 §5: stacked, the decorative Site / Report posters read as two
     extra images around the cards. On small screens they go; the three cards stay. */
  .flow .fnode { display: none; }
  .dcards { grid-template-columns: 1fr; }
  .proc { grid-template-columns: 1fr; gap: 28px; }
  .proc::before { display: none; }
  .pstep .pn { right: calc(50% - 40px); }
}
/* Ticket 016 §6: Our approach becomes one column under 700px — the free-checker
   vs SiteScanReport comparison stacks, and the credentials strip is one list
   rather than a ragged 3-then-2 wrap on a portrait phone. */
@media (max-width: 700px) {
  .vs-row { grid-template-columns: 1fr; }
  .vs-col.a { border-right: 0; border-bottom: 1px solid var(--hair2); }
  .creds { flex-direction: column; align-items: flex-start; gap: 9px; }
}
@media (max-width: 560px) {
  .page-home .sec { padding: 52px 0; }
  .ir-cards { grid-template-columns: 1fr; }
  .pricecard .pc-now { font-size: 48px; }
  .pricecard .pc-body { padding: 26px 22px 24px; }
  .pricecard .pc-refund { padding: 16px 22px; }
  .scanbox { padding: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /report — v5 direction (LG-39, 2026-08-12). Built from the HOMEPAGE's own
   components (visual SoT: exchange/from-cowork/2026-08-12-report-page-mockup-v5.html)
   so the two pages read as one site: the shared .hero/.hero-grid, .sec/.sec.alt,
   .kline, .deliv-grid/.appr-grid, .ireport chrome, .dom colors, .ctaband. The
   rules below MIRROR the .page-home ones that are page-home-scoped (sec padding,
   sec-head, kline, hero gradient+grid, sub .dom pills); the only NEW vocabulary is
   .ireport > img, the coverage clip, and the "In every report" tiles. No inline
   styles (CSP). ═══════════════════════════════════════════════════════════════ */
/* section rhythm + hero + keyline, mirrored from .page-home */
.page-report .sec { padding: 78px 0; }
.page-report .kline { display: block; width: 42px; height: 4px; border-radius: 3px; background: var(--blue); margin: 0 0 18px; }
.page-report .hero { padding: 60px 0 66px; position: relative; }
.page-report .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(44% 52% at 90% 10%, rgba(37,99,235,.06), transparent 72%); pointer-events: none; z-index: 0; }
.page-report .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 52px; align-items: center; position: relative; z-index: 1; }
.page-report .hero-grid > * { min-width: 0; }
.page-report .hero .sub { font-size: 20px; line-height: 1.55; color: var(--body); max-width: 520px; margin: 0; }
.page-report .hero .sub strong { color: var(--ink); font-weight: 700; }
/* domain-color pills on the hero sub, mirrored from .page-home */
.page-report .sub .dom { font-weight: 700; border-radius: 5px; padding: 0 5px; }
.page-report .sub .dom-a11y { color: var(--a11y); background: var(--a11yBg); }
.page-report .sub .dom-priv { color: var(--priv); background: var(--privBg); }
.page-report .sub .dom-sec { color: var(--sec); background: var(--secBg); }
/* NEW: let a real crop sit inside the shared .ireport frame */
.page-report .ireport > img { display: block; width: 100%; height: auto; background: #fff; }
.page-report .ir-stack { border-top: 1px solid var(--hair2); }
/* NEW: coverage — clip the long table, fade, note the rest */
.page-report .cov-clip { position: relative; max-height: 352px; overflow: hidden; }
/* Ticket 016 §7: the coverage crop is scaled to its frame at every width, never
   wider than the viewport; the frame clips its height, never its width. */
.page-report .cov-clip img { display: block; width: 100%; max-width: 100%; height: auto; }
/* Ticket 016 §6: the coverage section's copy is two short lines (~180px at
   1280), so capping the table beside it at that height left one header row.
   This one section stacks at every width instead: copy, then the table frame
   under it at a readable width. Nothing sits beside the crop, so it is never
   taller than a copy block next to it. */
.page-report .deliv-stack { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.page-report .deliv-stack > .ireport { max-width: 860px; }
/* stacked at 860px wide, 352px showed three rows under "Every page"; with nothing
   beside it the window can be taller (Fable 016 F3). Phones keep 352. */
@media (min-width: 921px) {
  .page-report .deliv-stack .cov-clip { max-height: 460px; }
}
.page-report .cov-clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 82px; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); pointer-events: none; }
.page-report .cov-more { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--sub); text-align: center; margin: 0; padding: 12px 14px; border-top: 1px solid var(--hair2); }
/* NEW: "In every report" — even, compact icon-left tiles that hug their content */
.page-report .incl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.page-report .incl .i { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--hair); border-radius: 13px; padding: 20px 22px; box-shadow: var(--sh2); }
.page-report .incl .i-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blueBg); color: var(--blueDeep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.page-report .incl .i-ic svg { width: 24px; height: 24px; }
.page-report .incl h3 { font-size: 17px; margin: 0 0 3px; letter-spacing: -.01em; }
.page-report .incl p { font-size: 14.5px; color: var(--body); margin: 0; line-height: 1.45; }
/* "What a finding tells you" — numbered anatomy key beside the finding crop
   (live-review round 2, 2026-08-19); lighter than the "In every report" tiles. */
.page-report .fkey { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 17px; }
.page-report .fkey > li { display: flex; gap: 14px; align-items: flex-start; }
.page-report .fkey-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; margin-top: 1px; }
.page-report .fkey > li > div { display: flex; flex-direction: column; gap: 2px; }
.page-report .fkey li > div > b { font-size: 16px; color: var(--ink); letter-spacing: -.01em; }
.page-report .fkey li > div > span { font-size: 14px; color: var(--body); line-height: 1.4; }
/* responsive — mirror the homepage collapse points */
@media (max-width: 920px) {
  /* explicit collapse — don't depend on the homepage rule's global .deliv-grid/
     .appr-grid leak (board finding, Codex). */
  .page-report .hero-grid, .page-report .deliv-grid, .page-report .appr-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* copy leads on mobile: push the framed crop below its heading so a section
     doesn't stack two report screenshots back-to-back (board finding, Fable).
     Ticket 016: the grid item is the .vis wrapper now, not the frame. */
  .page-report .appr-grid .vis { order: 2; }
}
@media (max-width: 700px) {
  .page-report .incl { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-report .sec { padding: 52px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /monitoring — Monitoring coming-soon page (LG-39, reconciles LG-86). TRIMMED
   2026-08-15 (founder live direction): three sections only — a centered hero with
   NO image, colorful feature tiles, and a coming-soon/waitlist closer. No product
   visuals (we don't showcase a dashboard for a product not yet built). The product
   name "Monitoring" carries a reserved signature color (--mon) at its prominent
   instances so it reads as a PRODUCT, not a capitalized word. Shared brand chrome
   (type, colors, nav, buttons) kept. No inline styles (CSP). No uptime %.
   ═══════════════════════════════════════════════════════════════════════════ */
/* --mon (the reserved product-name signature) is a :root token — BRAND DECISION
   2026-08-19 (founder): the product name "Monitoring" carries its indigo signature
   site-wide, wherever it appears as the product. .mon-name is global (color only;
   it inherits weight from its context — a heading or running copy). */
.mon-name { color: var(--mon); }
/* the /monitoring hero name carries a soft depth (founder: "a tad more umph") */
.page-monitoring .mon-hero h1 .mon-name { text-shadow: 0 1px 8px rgba(55,48,163,.16); }
/* domain words — colored pills scoped to .sub (the hero sub) ONLY, matching the
   homepage/report .dom scoping. CW review: one domain-color moment; the features
   lead names the domains but stays plain. */
.page-monitoring .sub .dom { font-weight: 650; border-radius: 5px; padding: 0 5px; }
.page-monitoring .sub .dom-a11y { color: var(--a11y); background: var(--a11yBg); }
.page-monitoring .sub .dom-priv { color: var(--priv); background: var(--privBg); }
.page-monitoring .sub .dom-sec { color: var(--sec); background: var(--secBg); }

.page-monitoring .sec { padding: 74px 0; }
.page-monitoring .kline { display: block; width: 42px; height: 4px; border-radius: 3px; background: var(--blue); margin: 0 0 18px; }

/* hero — centered, NO image */
.page-monitoring .mon-hero { padding: 72px 0 62px; position: relative; text-align: center; }
.page-monitoring .mon-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 62% at 50% 0%, rgba(55,48,163,.06), transparent 70%); pointer-events: none; }
.page-monitoring .mon-hero .wrap { position: relative; }
.page-monitoring .mon-hero-in { max-width: 720px; margin: 0 auto; }
.page-monitoring .mon-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--blueBg); color: var(--blueDeep); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; border-radius: 20px; padding: 6px 14px; margin-bottom: 22px; }
.page-monitoring .mon-eyebrow .dotpin { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.page-monitoring .mon-hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.06; letter-spacing: -.02em; margin: 0; }
.page-monitoring .mon-hero .sub { font-size: 19px; line-height: 1.55; color: var(--body); max-width: 600px; margin: 20px auto 0; }

/* features — colorful icon tiles, 3-col */
.page-monitoring .feat-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.page-monitoring .feat-head .kline { margin-left: auto; margin-right: auto; }
.page-monitoring .feat-head .lead { margin-left: auto; margin-right: auto; }
.page-monitoring .feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page-monitoring .ft { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 22px 22px 24px; box-shadow: var(--sh2); }
.page-monitoring .ft .ft-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.page-monitoring .ft .ft-ic svg { width: 23px; height: 23px; }
.page-monitoring .ft h3 { font-size: 16.5px; margin: 0 0 5px; letter-spacing: -.01em; }
.page-monitoring .ft p { font-size: 14px; color: var(--body); margin: 0; line-height: 1.5; }
/* per-tile accent — decorative icon chip only; the title + copy stay --ink/--body (AA) */
.page-monitoring .ft.a1 .ft-ic { color: #2563eb; background: rgba(37,99,235,.10); }
.page-monitoring .ft.a2 .ft-ic { color: #0F7A4D; background: rgba(15,122,77,.11); }
.page-monitoring .ft.a4 .ft-ic { color: #B45309; background: rgba(180,83,9,.11); }
/* Founder ruling 2026-10-19 (Ticket 021, before storefront deploy): tiles 3, 5, 6 take color instead of
   the slate/navy neutrals Tickets 020/021 gave them. Tile 3 = the brand blue (tile 1's). Tiles 5 and 6
   were picked by the founder's gate, ΔE00 >= 10 (the 020 instrument) from every domain hue and --mon:
   #DC2626 closest 16.08 (tile 4); #0F766E closest 12.59 (--green), 12.79 (--sec). */
.page-monitoring .ft.a3 .ft-ic { color: #2563eb; background: rgba(37,99,235,.10); }
.page-monitoring .ft.a5 .ft-ic { color: #DC2626; background: rgba(220,38,38,.10); }
.page-monitoring .ft.a6 .ft-ic { color: #0F766E; background: rgba(15,118,110,.10); }

/* closing band: heading + lead + the INERT waitlist field + soft scan route */
.page-monitoring .wl { max-width: 440px; margin: 26px auto 0; }
.page-monitoring .wl-form { display: flex; gap: 10px; }
.page-monitoring .wl-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; }
.page-monitoring .wl-input:disabled { background: var(--paper2); color: var(--sub); -webkit-text-fill-color: var(--sub); cursor: not-allowed; }
.page-monitoring .wl-form .btn { flex-shrink: 0; }
.page-monitoring .wl-note { font-size: 13.5px; color: var(--body); margin: 12px 0 0; line-height: 1.5; }
.page-monitoring .wl-note .wl-state { color: var(--ink); font-weight: 600; }
.page-monitoring .scanroute { font-size: 14.5px; color: var(--body); margin: 22px 0 0; }
.page-monitoring .scanroute a { color: var(--blueDeep); font-weight: 600; }

/* responsive */
@media (max-width: 860px) {
  .page-monitoring .feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-monitoring .sec { padding: 52px 0; }
  .page-monitoring .feats { grid-template-columns: 1fr; }
  .page-monitoring .wl-form { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /about — v4 redesign (LG-39, live-review round 2 2026-08-19). Four sections on
   the site's own components; ONE text size per section, the visual variety carried
   by the 3-card gap visual + the four icon tiles. No inline styles (CSP). ════════ */
.page-about .kline { display: block; width: 42px; height: 4px; border-radius: 3px; background: var(--blue); margin: 0 0 18px; }
.page-about .ab-head { max-width: 660px; margin: 0 auto 34px; text-align: center; }
.page-about .ab-head .kline { margin-left: auto; margin-right: auto; }
.page-about .ab-intro { font-size: 19px; line-height: 1.6; color: var(--body); }
.page-about .ab-intro .dom { font-weight: 700; border-radius: 5px; padding: 0 5px; }
.page-about .ab-intro .dom-a11y { color: var(--a11y); background: var(--a11yBg); }
.page-about .ab-intro .dom-priv { color: var(--priv); background: var(--privBg); }
.page-about .ab-intro .dom-sec { color: var(--sec); background: var(--secBg); }
.page-about .ab-lead { font-size: 17px; line-height: 1.55; color: var(--body); margin: 0; }
/* S2 — a feature comparison, all cards EQUAL size (founder round-6): the lead
   stands out by COLOR + WEIGHT, not size or a raised podium. SiteScanReport = crisp
   white, 2px brand-blue border (#2563eb), bold navy heading, GREEN checks
   (#0F7A4D). The two alternatives = a muted grey fill, soft border, regular heading,
   RED x marks, so they read as the lesser options beside the bright lead. No pill. */
.page-about .ab-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.page-about .ab-lead-card { background: #fff; border: 2px solid var(--blue); border-radius: 14px; padding: 24px 22px; box-shadow: var(--sh2); }
.page-about .ab-lc-name { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; margin: 0; }
.page-about .ab-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.page-about .ab-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
/* Ticket 019: these checks are a verdict, so --green. They borrowed --sec when the
   two were the same hex, and would have turned teal with it. */
.page-about .ab-ck { flex-shrink: 0; color: var(--green); font-weight: 800; font-size: 15px; line-height: 1.4; }
.page-about .ab-alt-card { background: var(--slateBg); border: 1px solid var(--hair); border-radius: 14px; padding: 24px 22px; }
.page-about .ab-alt-name { font-size: 17px; font-weight: 500; color: var(--sub); letter-spacing: -.01em; margin: 0; }
.page-about .ab-xs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.page-about .ab-xs li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--body); line-height: 1.45; }
.page-about .ab-x { flex-shrink: 0; color: var(--red); font-weight: 700; font-size: 15px; line-height: 1.4; }
/* S3 — what you can count on, four icon tiles (the report .incl idiom) */
.page-about .ab-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.page-about .ab-tile { background: var(--card); border: 1px solid var(--hair); border-radius: 13px; padding: 22px 20px; box-shadow: var(--sh2); }
.page-about .ab-tile-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--blueBg); color: var(--blueDeep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.page-about .ab-tile-ic svg { width: 23px; height: 23px; }
.page-about .ab-tile h3 { font-size: 16px; margin: 0 0 4px; letter-spacing: -.01em; }
.page-about .ab-tile p { font-size: 14px; color: var(--body); margin: 0; line-height: 1.45; }
@media (max-width: 860px) {
  .page-about .ab-compare { grid-template-columns: 1fr; }
  .page-about .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-about .ab-tiles { grid-template-columns: 1fr; }
}

/* ── /resources content hub + articles (LG-111) ──────────────────────────────
   Built on the site tokens; the domain-color chips reuse the exact color/bg
   pairs /report already clears the dogfood axe gate with. Shared chip + keyline
   vocabulary first, then the hub (.page-resources), then the article
   (.page-article) reading template. */
.page-resources .dom, .page-article .dom {
  display: inline-block; font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  border-radius: 5px; padding: 2px 8px; line-height: 1.5;
}
.page-resources .dom-a11y, .page-article .dom-a11y { color: var(--a11y); background: var(--a11yBg); }
.page-resources .dom-priv, .page-article .dom-priv { color: var(--priv); background: var(--privBg); }
.page-resources .dom-sec, .page-article .dom-sec { color: var(--sec); background: var(--secBg); }
.page-resources .dom-gen, .page-article .dom-gen { color: var(--blueDeep); background: var(--blueBg); }

/* hub = a resource LIBRARY: compact heading + one grid of all resources */
.page-resources .res-head-sec { padding-bottom: 6px; }
.page-resources .res-title { font-size: clamp(26px, 3vw, 34px); margin: 0 0 6px; }
.page-resources .res-intro { color: var(--body); font-size: 17px; margin: 0; max-width: 62ch; }

.page-resources .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; }
.page-resources .res-card {
  display: flex; flex-direction: column; gap: 10px; background: var(--card);
  border: 1px solid var(--hair); border-radius: 13px; padding: 20px 22px; box-shadow: var(--sh1);
  text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s;
}
.page-resources .res-card:hover { border-color: var(--blue); box-shadow: var(--sh2); }
/* The card's two labels are shared with /success's two link cards (Ticket 011
   visual fold: the same pill + tag for the same two pages, /report and /faq). */
.page-resources .res-card-tags, .page-success .res-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* filled domain pill: text names the domain, colour is reinforcement (the pairs
   clear the dogfood axe gate the same way .btn-primary white-on-blue does) */
.page-resources .rc-domain, .page-success .rc-domain {
  display: inline-block; color: #fff; font-weight: 700; font-size: 11.5px;
  letter-spacing: .03em; border-radius: 5px; padding: 3px 9px; line-height: 1.4;
}
.page-resources .rc-a11y { background: var(--a11y); }
.page-resources .rc-priv { background: var(--priv); }
.page-resources .rc-sec { background: var(--sec); }
.page-resources .rc-gen, .page-success .rc-gen { background: var(--blueDeep); }
/* type tag: visually distinct — outlined + neutral */
.page-resources .rc-type, .page-success .rc-type {
  display: inline-block; color: var(--body); font-weight: 600; font-size: 11.5px;
  letter-spacing: .03em; border: 1px solid var(--hair); border-radius: 5px; padding: 2px 8px; line-height: 1.4;
}
.page-resources .rc-featured {
  display: inline-block; color: var(--sub); font-weight: 600; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; margin-left: auto;
}
.page-resources .res-card-h { font-family: var(--disp); font-size: 18.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); font-weight: 650; margin: 2px 0 0; }
.page-resources .res-card:hover .res-card-h { color: var(--blueDeep); }
.page-resources .res-card-p { color: var(--body); font-size: 14.5px; line-height: 1.5; flex: 1 0 auto; }
.page-resources .res-card-meta { font-size: 13px; color: var(--sub); font-weight: 600; }

/* domain filter chips — progressive enhancement (hidden until res-filter.js) */
.page-resources .res-filter { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-resources .res-filter-label { font-size: 13px; font-weight: 600; color: var(--sub); }
.page-resources .res-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.page-resources .res-chip {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--body);
  background: var(--card); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 14px;
}
.page-resources .res-chip:hover { border-color: var(--blue); color: var(--blueDeep); }
.page-resources .res-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.page-resources .res-card[hidden] { display: none; }

/* article */
.page-article .art-wrap { max-width: 768px; }
.page-article .sec.art { padding: 38px 0 6px; }
.page-article .crumbs { margin-bottom: 20px; }
.page-article .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; font-size: 13.5px; }
.page-article .crumbs li { display: flex; align-items: center; gap: 8px; color: var(--body); }
.page-article .crumbs li + li::before { content: "/"; color: var(--sub); }
.page-article .crumbs a { color: var(--blueDeep); text-decoration: none; }
.page-article .crumbs a:hover { text-decoration: underline; }
.page-article .crumbs [aria-current] { color: var(--sub); }

.page-article .art-head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); }
.page-article .art-cat { margin: 0 0 14px; }
.page-article .art-head h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 14px; }
.page-article .art-meta { color: var(--sub); font-size: 14.5px; margin: 0; }
.page-article .art-upd::before { content: "· "; }

.page-article .art-body { font-size: 17.5px; line-height: 1.72; color: var(--body); }
.page-article .art-body h2 { font-family: var(--disp); font-size: 25px; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); font-weight: 700; margin: 40px 0 12px; }
.page-article .art-body h3 { font-size: 19px; margin: 28px 0 8px; color: var(--ink); }
.page-article .art-body p { margin: 0 0 18px; }
.page-article .art-body ul, .page-article .art-body ol { margin: 0 0 18px; padding-left: 24px; }
.page-article .art-body li { margin: 6px 0; }
.page-article .art-body li > ul, .page-article .art-body li > ol { margin: 6px 0; }
.page-article .art-body a { color: var(--blueDeep); text-decoration: underline; text-underline-offset: 2px; }
.page-article .art-body strong { color: var(--ink); font-weight: 700; }
.page-article .art-body code { font-family: var(--mono); font-size: .92em; background: var(--soft); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; }
.page-article .art-hr { border: none; border-top: 1px solid var(--hair); margin: 32px 0; }

.page-article .art-table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--hair); border-radius: 10px; }
.page-article .art-table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.page-article .art-table th, .page-article .art-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--hair2); }
.page-article .art-table thead th { background: var(--soft); color: var(--ink); font-weight: 700; font-family: var(--disp); font-size: 14px; }
.page-article .art-table tbody td { color: var(--body); }
.page-article .art-table tbody tr:last-child td { border-bottom: none; }
.page-article .art-table .ta-c { text-align: center; }
.page-article .art-table .ta-r { text-align: right; }

.page-article .art-quote { margin: 0 0 22px; padding: 2px 0 2px 22px; border-left: 3px solid var(--blue); }
.page-article .art-quote p { margin: 0; color: var(--ink); font-size: 18.5px; line-height: 1.6; font-style: italic; }
.page-article .art-fig { margin: 0 0 22px; }
.page-article .art-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 10px; }

.page-article .art-sources { margin: 34px 0 0; padding: 24px 0 4px; border-top: 1px solid var(--hair); }
.page-article .art-sources h2 { font-family: var(--sans); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 700; margin: 0 0 12px; }
.page-article .art-src-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--body); }
.page-article .art-src-list li { margin: 6px 0; }
.page-article .art-src-list a { color: var(--blueDeep); word-break: break-word; }

.page-article .art-rel-h { font-size: 22px; margin: 0 0 18px; }
.page-article .art-rel-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 0; margin: 0; }
.page-article .art-rel-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--sh1); transition: border-color .18s, box-shadow .18s; }
.page-article .art-rel-card:hover { border-color: var(--blue); box-shadow: var(--sh2); }
.page-article .art-rel-cat { align-self: flex-start; }
.page-article .art-rel-t { font-family: var(--disp); font-size: 16px; line-height: 1.3; color: var(--ink); font-weight: 650; }
.page-article .art-rel-card:hover .art-rel-t { color: var(--blueDeep); }

@media (max-width: 700px) {
  .page-resources .res-grid { grid-template-columns: 1fr; }
  .page-article .art-rel-list { grid-template-columns: 1fr; }
  .page-article .art-body { font-size: 16.5px; line-height: 1.68; }
  .page-article .art-body h2 { font-size: 22px; margin-top: 32px; }
}

/* print: legal pages should print cleanly */
@media print {
  .hdr, .ftr, .skip { display: none; }
  body { background: #fff; }
}

/* ── /success: after the three steps (Ticket 011 §3) ──
   The portal band left this page (portal copy lives on the delivery mail only).
   In its place: a one-line how-to for THIS purchase and two link cards to pages
   that already exist (/report, /faq). Visual fold: the cards wear the /resources
   card chrome (.page-resources .res-card: white card, hairline, 13px radius, the
   domain pill + type tag above the title, blue border + lift on hover), so the
   two links read as the hub's own cards for the same two pages. */
/* Ticket 012 §1: the steps in a ROW on desktop — a light timeline: each navy disc
   is joined to the next column's disc by a hairline (the disc is 30px + a 14px
   gap, so the line starts at 44px and runs across the 28px column gap). Stacked
   again under 700px, where the line is dropped. */
.next-steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.next-steps-row .how { position: relative; }
.next-steps-row .how:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 44px; right: -28px; height: 1px; background: var(--hair);
}
.next-steps-row .how > div { position: relative; background: var(--card); padding-right: 6px; }
@media (max-width: 700px) {
  .next-steps-row { grid-template-columns: 1fr; gap: 16px; }
  .next-steps-row .how:not(:last-child)::after { display: none; }
}
/* the refund line and the account line share a row; the account line leads with
   a bold key so the mechanism (paid-with email · password once · one-time code)
   reads at a glance. */
.next-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin: 14px 0 0; }
.next-lines p { margin: 0; }
.account-line .al-k { font-weight: 700; color: var(--ink); }
@media (max-width: 700px) { .next-lines { grid-template-columns: 1fr; } }
/* the wait copy beside the two cards: head 1/3, cards 2/3 at desktop; stacked under 860px. */
.next-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 34px; align-items: start; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hair2); }
.next-how h2 { font-size: 18px; margin: 0 0 8px; }
.next-how p { margin: 0; font-size: 15px; color: var(--body); }
.next-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
@media (max-width: 860px) { .next-how { grid-template-columns: 1fr; } }
/* the cards on this page sit 2px tighter than the hub's so a 1024×768 laptop keeps the whole fold too. */
.page-success .next-card { padding: 16px 18px; }
.next-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  border: 1px solid var(--hair); border-radius: 13px; background: var(--card); box-shadow: var(--sh1);
  color: var(--ink); text-decoration: none; transition: border-color .18s, box-shadow .18s;
}
.next-card:hover { border-color: var(--blue); box-shadow: var(--sh2); }
.next-card .nc-h { font-family: var(--disp); font-weight: 650; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin-top: 2px; }
.next-card:hover .nc-h { color: var(--blueDeep); }
.next-card .nc-p { font-size: 14px; line-height: 1.5; color: var(--body); }
@media (max-width: 560px) { .next-cards { grid-template-columns: 1fr; } }