/* Auditaz — the honest cost ledger, terminal-grade.
   Two themes share one set of semantic tokens; components never touch a literal
   colour. Boldness is spent in one place: --recover (mint) = real dollars
   recoverable. --accent (blue) carries interaction/brand; --amber = needs
   review; --leak = waste. Dark is the default; light is its own paper-ledger
   identity, not an inversion. */

:root {
  /* Type & layout (theme-independent) */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-hero: clamp(2.1rem, 1rem + 5.4vw, 4.2rem);
  --text-h2: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  --measure: 62ch;

  --space-section: clamp(3.5rem, 2.5rem + 5vw, 8rem);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Brand constants (guideline manual v1.0) — fixed, never themed. */
  --brand-blue: #006cff;
  --brand-blue-light: #00a3ff;
  --brand-navy: #0f172a;
  --brand-gray: #64748b;
  /* Filled controls: brand blue carries white type at 4.58:1 in either theme.
     --accent alone cannot — a blue light enough to read as link text on the
     dark background is too light to sit under white. Hence two tokens. */
  --accent-strong: var(--brand-blue);
  --accent-ink: #ffffff;

  /* Dark palette (default) */
  --bg: #0a0c0f;
  --surface: #15181e;
  --surface-2: #1b1f27;
  --ink: #e8eaed;
  --ink-soft: #9aa3b2;
  --rule: #22262e;
  --accent: #2b8cff;
  --accent-tint: rgba(43, 140, 255, 0.14);
  --recover: #00d9a3;
  --recover-tint: rgba(0, 217, 163, 0.13);
  --leak: #ff6b5c;
  --leak-tint: rgba(255, 107, 92, 0.13);
  --amber: #ff9f1c;
  --amber-tint: rgba(255, 159, 28, 0.14);
  --code-bg: #0d1117;
  --code-ink: #c9d4e3;
  --code-ink-soft: #9aa3b2;
  --code-recover: #00d9a3;
  --code-accent: #2b8cff;
  --ink-body: #b9c0cb;
  --recover-wash: rgba(0, 217, 163, 0.06);
  --recover-dim: #4fd8b0;
  --shadow: rgba(0, 0, 0, 0.55);
  --az-wordmark: #ffffff;
  --az-deep: #ffffff;
}

:root[data-theme="dark"] {
  --bg: #0a0c0f;
  --surface: #15181e;
  --surface-2: #1b1f27;
  --ink: #e8eaed;
  --ink-soft: #9aa3b2;
  --rule: #22262e;
  --accent: #2b8cff;
  --accent-tint: rgba(43, 140, 255, 0.14);
  --recover: #00d9a3;
  --recover-tint: rgba(0, 217, 163, 0.13);
  --leak: #ff6b5c;
  --leak-tint: rgba(255, 107, 92, 0.13);
  --amber: #ff9f1c;
  --amber-tint: rgba(255, 159, 28, 0.14);
  --code-bg: #0d1117;
  --code-ink: #c9d4e3;
  --code-ink-soft: #9aa3b2;
  --code-recover: #00d9a3;
  --code-accent: #2b8cff;
  --ink-body: #b9c0cb;
  --recover-wash: rgba(0, 217, 163, 0.06);
  --recover-dim: #4fd8b0;
  --shadow: rgba(0, 0, 0, 0.55);
  --az-wordmark: #ffffff;
  --az-deep: #ffffff;
}

/* Light — the auditor's paper ledger: warm paper, ink, green in the black. */
:root[data-theme="light"] {
  --bg: #f5f6f1;
  --surface: #ffffff;
  --surface-2: #eef2ec;
  --ink: #15211b;
  --ink-soft: #58635b;
  --rule: #d4dcd2;
  --accent: #0059d6;
  --accent-tint: #e4edfd;
  --recover: #0b6b4f;
  --recover-tint: #e2f0e9;
  --leak: #a63a2b;
  --leak-tint: #f7e9e6;
  --amber: #8f6310;
  --amber-tint: #f4e7cf;
  --code-bg: #10201a;
  --code-ink: #d7efe4;
  --code-ink-soft: #a9bdb4;
  --code-recover: #3ddcae;
  --code-accent: #7fd8ff;
  --ink-body: #303b34;
  --recover-wash: #eef6f1;
  --recover-dim: #2f7d63;
  --shadow: rgba(21, 33, 27, 0.4);
  --az-wordmark: #0a1a33;
  --az-deep: #023ca2;
}

/* No JS: honour the OS preference (default stays dark). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f5f6f1;
    --surface: #ffffff;
    --surface-2: #eef2ec;
    --ink: #15211b;
    --ink-soft: #58635b;
    --rule: #d4dcd2;
    --accent: #0059d6;
    --accent-tint: #e4edfd;
    --recover: #0b6b4f;
    --recover-tint: #e2f0e9;
    --leak: #a63a2b;
    --leak-tint: #f7e9e6;
    --amber: #8f6310;
    --amber-tint: #f4e7cf;
    --code-bg: #10201a;
    --code-ink: #d7efe4;
    --code-ink-soft: #a9bdb4;
    --code-recover: #3ddcae;
    --code-accent: #7fd8ff;
    --ink-body: #303b34;
    --recover-wash: #eef6f1;
    --recover-dim: #2f7d63;
    --shadow: rgba(21, 33, 27, 0.4);
    --az-wordmark: #0a1a33;
    --az-deep: #023ca2;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html, body { overflow-x: hidden; } /* guard against incidental horizontal scroll */

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "cv05";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Motion utilities (F8-UX-1) ------------------------------------------- */
/* Reveal on scroll — opt-in via [data-reveal]. Only hidden once JS is active
   (.js is set before paint) and only when motion is welcome, so no-JS and
   reduced-motion users always see the content. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  }
  .js [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* Copy feedback toast — inverted surface so it reads on either theme. */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 100;
  transform: translate(-50%, 1rem);
  padding: 0.6rem 1rem; border-radius: var(--radius);
  background: var(--ink); color: var(--bg);
  font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 10px 30px -10px var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --- Header / footer ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-inline-start: auto; min-width: 0; }
.site-header nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; transition: color 0.15s var(--ease); }
.site-header nav a:hover { color: var(--ink); }

/* Account menu: an icon button in the header opening a dropdown (native
   <details>, so it works without JS; app.js only closes it on outside-click/Esc). */
.account-menu { position: relative; }
.account-menu-btn {
  display: inline-grid; place-items: center; list-style: none;
  width: 2.2rem; height: 2.2rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.account-menu-btn::-webkit-details-marker { display: none; } /* hide default disclosure triangle */
.account-menu-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.account-menu[open] .account-menu-btn { color: var(--ink); border-color: var(--accent); }
.account-menu-btn svg { width: 1.1rem; height: 1.1rem; display: block; }
.account-menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 60;
  min-width: 11rem; display: grid; gap: 0.15rem; padding: 0.4rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 18px 40px -24px var(--shadow);
}
.account-menu-panel a,
.account-menu-panel button {
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  color: var(--ink); background: none; border: none; border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; transition: background 0.12s var(--ease);
}
.account-menu-panel a:hover,
.account-menu-panel button:hover { background: var(--surface-2); }
.account-menu-panel form { margin: 0; }

/* On narrow screens let the nav flow onto its own line instead of overflowing. */
@media (max-width: 46rem) {
  .site-header nav { margin-inline-start: 0; order: 3; width: 100%; }
  .wordmark { margin-inline-end: auto; }
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.az-logo { display: block; width: auto; transition: opacity 0.15s var(--ease); }
.az-logo-lockup { height: 2.15rem; }          /* ~148px wide, past the 80px floor */
.az-logo-mark { height: 1.5rem; }
/* The lockup is the link's whole content in the header, so give the hit area
   the breathing room the manual asks for instead of hugging the glyphs. */
.site-header .wordmark { padding: 0.15rem 0; }
.wordmark:hover .az-logo { opacity: 0.85; }
.lang select {
  font: inherit; font-size: 0.9rem; padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}

/* Theme toggle (F8-DS-2) */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; display: block; }
/* Show the icon that matches the *action* (moon in light, sun in dark). */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

main { display: block; }

.site-footer {
  display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start;
  grid-template-columns: 1fr;
  padding: 3rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--rule); color: var(--ink-soft);
  margin-top: var(--space-section);
}
/* Four cells: the brand plus Product / Resources / Legal. The grid used to
   declare three columns, which pushed Legal onto a second row under the brand. */
@media (min-width: 40rem) { .site-footer { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .site-footer { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand { display: grid; gap: 0.6rem; max-width: 34ch; }
.footer-tagline {
  margin: -0.25rem 0 0; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-gray);
}
.footer-note { font-size: 0.9rem; margin: 0; }
.footer-col { display: grid; gap: 0.5rem; align-content: start; }
.footer-col h2 { font-size: 0.95rem; color: var(--ink); margin: 0 0 0.3rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; transition: color 0.15s var(--ease); }
.footer-col a:hover { color: var(--accent); }

/* --- Buttons -------------------------------------------------------------- */

.cta {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.8rem 1.5rem; border: 1px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-strong); color: var(--accent-ink);
  text-decoration: none; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--shadow); filter: brightness(1.06); }
.cta:active { transform: translateY(0); }

/* --- Layout shells -------------------------------------------------------- */

.shell {
  max-width: 74rem; margin-inline: auto;
  padding: var(--space-section) clamp(1rem, 4vw, 3rem);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  max-width: 74rem; margin-inline: auto;
  padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1rem, 4vw, 3rem) var(--space-section);
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero { grid-template-columns: 1.05fr 0.95fr; }
}
/* grid items default to min-width:auto; without this, long words/IDs force the
   track wider than the viewport and cause horizontal overflow on mobile. */
.hero-copy, .hero-statement { min-width: 0; }
.hero-title {
  font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 800; margin: 0 0 1.25rem; text-wrap: balance; overflow-wrap: break-word;
}
.hero-lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 40ch; margin: 0 0 2rem; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero-trust { font-size: 0.95rem; color: var(--ink-soft); }

/* --- Statement (the hero artifact + report ledger) ------------------------ */

.statement {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 0 var(--rule), 0 24px 40px -28px var(--shadow);
}
.statement-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule);
}
.statement-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.statement-head .tag { font-size: 0.8rem; color: var(--ink-soft); font-family: var(--font-mono); }

.stmt-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem;
  align-items: baseline; padding: 0.85rem 1.25rem;
}
.stmt-row:nth-child(odd) { background: var(--surface-2); }
.stmt-name { font-weight: 500; }
.stmt-meta {
  grid-column: 1; font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--ink-soft); letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.stmt-amount { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.stmt-amount.leak { color: var(--leak); }
.stmt-amount.leak::before { content: "−"; }

.statement-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.25rem; border-top: 2px solid var(--rule);
  background: var(--recover-tint);
}
.statement-total .label { font-weight: 600; }
.total-amount {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.9rem; color: var(--recover); letter-spacing: -0.02em;
}
.statement-caption { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* one orchestrated load reveal */
@media (prefers-reduced-motion: no-preference) {
  .hero-statement .stmt-row { animation: rowIn 0.5s var(--ease) both; }
  .hero-statement .stmt-row:nth-child(2) { animation-delay: 0.05s; }
  .hero-statement .stmt-row:nth-child(3) { animation-delay: 0.12s; }
  .hero-statement .stmt-row:nth-child(4) { animation-delay: 0.19s; }
  .hero-statement .statement-total { animation: rowIn 0.5s 0.28s var(--ease) both; }
  @keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* --- Numbered steps (used by /connect; the home's "how it works" list was
   replaced by the two-station hero, which shows the sequence instead) ------ */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1.4rem 0; border-bottom: 1px solid var(--rule);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent);
}

/* --- Report page ---------------------------------------------------------- */

.report h1 { font-size: var(--text-h2); letter-spacing: -0.02em; margin: 0 0 1.5rem; }

.well-optimized {
  padding: 2rem; border: 1px solid var(--rule); border-left: 3px solid var(--recover);
  border-radius: var(--radius); background: var(--surface); max-width: var(--measure);
}
.well-optimized h2 { margin-top: 0; }

/* --- Result hero (annual recoverable + context) --- */
.result-hero {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem;
  padding: 2rem; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  border-top: 3px solid var(--recover);
}
.result-hero.empty { border-top-color: var(--rule); align-items: center; }
.result-hero.hygiene { border-top-color: var(--accent); align-items: center; }
.result-figure { display: flex; flex-direction: column; }
.result-amount {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em;
}
.result-amount.recover { color: var(--recover); }
.result-amount.muted { color: var(--ink-soft); }
.result-label { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.35rem; }
.result-sub { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.9rem; }
.result-copy h2 { margin: 0 0 0.4rem; }
.result-copy p { margin: 0; color: var(--ink-soft); max-width: 42ch; }

/* Drift banner — deployed role behind the current template */
.drift-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin: 1.5rem auto; padding: 1.1rem 1.4rem;
  background: var(--amber-tint); border: 1px solid var(--rule); border-left: 3px solid var(--amber); border-radius: var(--radius);
}
.drift-copy { max-width: 60ch; }
.drift-copy strong { display: block; color: var(--ink); }
.drift-copy p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.drift-versions { font-family: var(--font-mono); font-size: 0.78rem !important; opacity: 0.85; }
.drift-missing { font-size: 0.8rem !important; }
.drift-missing code { font-family: var(--font-mono); font-size: 0.72rem; background: var(--surface-2); padding: 0.05rem 0.3rem; border-radius: 3px; }
.drift-actions { display: grid; gap: 0.5rem; }
.drift-cli { font-size: 0.8rem; color: var(--ink-soft); }
.drift-cli summary { cursor: pointer; }
.drift-cli code { font-size: 0.75rem; word-break: break-all; background: var(--surface-2); padding: 0.1rem 0.3rem; border-radius: 3px; }

.findings-heading { font-size: 0.9rem; color: var(--ink-soft); font-family: var(--font-mono); margin: 0 0 1rem; }
.finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.4rem; }
.finding-count { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.finding-annual { font-size: 0.8rem; color: var(--leak); }
.low-note { color: var(--ink-soft); margin: 1rem 0; max-width: var(--measure); }

/* Issue-type badge (quick fix / needs review) */
.badge {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 3px; border: 1px solid transparent;
}
.badge.quick { color: var(--recover); background: var(--recover-tint); }
.badge.review { color: var(--amber); background: var(--amber-tint); }

/* Per-resource rows inside a group (paid) */
.resources { list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0; border-top: 1px dashed var(--rule); display: grid; gap: 0.9rem; }
.resource { display: grid; gap: 0.5rem; }
.resource-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.resource-arn { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); word-break: break-all; }
.resource .money { font-size: 0.8rem; color: var(--recover); }

.scan-context {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 0.85rem; font-family: var(--font-mono);
}

/* Coverage note: what the scan could not see. Amber, not red — the scan is
   qualified, not broken — and collapsed by default so it informs without
   competing with the findings for attention. */
.coverage-note {
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  background: var(--amber-tint); border: 1px solid var(--amber);
  border-radius: var(--radius); font-size: 0.85rem;
}
.coverage-note > summary {
  cursor: pointer; color: var(--amber); font-weight: 600;
  font-family: var(--font-mono); letter-spacing: 0.01em;
}
.coverage-note > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.coverage-note__lead { margin: 0.75rem 0 0.5rem; color: var(--ink-soft); max-width: var(--measure); }
.coverage-note ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.coverage-note li { margin: 0.35rem 0; }
.coverage-note code {
  font-family: var(--font-mono); font-size: 0.8rem;
  padding: 0.08rem 0.35rem; border-radius: 3px; background: var(--surface);
}
.coverage-note__count { color: var(--ink-soft); opacity: 0.85; }

.summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2.5rem;
  padding: 1.5rem; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  border-top: 3px solid var(--recover);
}
.summary-figure { display: flex; flex-direction: column; }
.summary-figure .value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); color: var(--recover); letter-spacing: -0.02em;
}
.summary-figure .value.muted { color: var(--ink); font-size: 1.4rem; }
.summary-figure .label { font-size: 0.85rem; color: var(--ink-soft); }

/* --- Report v3: action plan + ledger (F10-RPT) ---------------------------
   Two readings of the same findings. The plan groups by fix effort and opens
   one row per track; the ledger states the same numbers as an accountant's
   statement. Shared vocabulary: mono for every figure, a severity gutter on
   the left of a row, mint only where dollars are recoverable. */

/* A1 — result band: a figure closed by a rule, not a card. */
.result-band {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 3rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule);
}
.result-overline {
  margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.result-band-main { flex: 1 1 22rem; min-width: 0; }
.result-figure-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin: 0; }
.result-figure-line .result-amount {
  font-size: clamp(2.8rem, 1.6rem + 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.035em;
}
.result-figure-line .result-label { margin-top: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.result-band .result-sub { margin: 0.7rem 0 0; }
.result-band-side { display: grid; gap: 0.9rem; min-width: 17rem; }
.band-item { margin: 0; display: flex; flex-direction: column; padding-left: 0.9rem; border-left: 2px solid var(--rule); }
.band-item.quick { border-left-color: var(--recover); }
.band-item.review { border-left-color: var(--amber); }
/* The side figures stay in --ink: only the recoverable total is mint, or the
   "this is money" signal dilutes. */
.band-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink);
}
.band-legend { font-size: 0.85rem; color: var(--ink-soft); }

/* A2 — toolbar: view switch + actions. Replaces the four-button share bar. */
.report-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0 1.75rem;
}
.view-switch {
  display: flex; gap: 0.4rem; padding: 0.25rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface);
}
.switch-item {
  font-size: 0.85rem; font-weight: 500; text-decoration: none; color: var(--ink-soft);
  padding: 0.45rem 0.9rem; border-radius: var(--radius);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.switch-item:hover { color: var(--ink); }
.switch-item.active { background: var(--surface-2); color: var(--ink); font-weight: 600; }

.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tool-btn {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 0.5rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.tool-btn.primary { border-color: var(--recover); background: var(--recover-tint); color: var(--recover); }
.tool-btn.primary:hover { border-color: var(--recover); color: var(--recover); filter: brightness(1.08); }

.share-menu { position: relative; }
.share-menu > summary { list-style: none; display: inline-block; }
.share-menu > summary::-webkit-details-marker { display: none; }
.share-menu-panel {
  position: absolute; right: 0; z-index: 20; margin-top: 0.4rem; min-width: 11rem;
  display: grid; gap: 0.1rem; padding: 0.4rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 18px 40px -24px var(--shadow);
}
.share-item {
  font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
  padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); text-decoration: none;
}
.share-item:hover { background: var(--surface-2); }

/* A3 — track header: one per fix-effort lane. */
.track { margin-top: 3rem; }
.track:first-of-type { margin-top: 0; }
.track-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--rule);
}
.track-title {
  margin: 0; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.track-quick .track-title { color: var(--recover); }
.track-review .track-title { color: var(--amber); }
.track-hygiene .track-title { color: var(--ink-soft); }
.track-subtotal { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); }

/* A4 — group row. The severity gutter stays, at 2px. */
.group { border-bottom: 1px solid var(--rule); }
.group-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  padding: 1.15rem 0.9rem 1.15rem 0.75rem; cursor: pointer; list-style: none;
  border-left: 2px solid var(--rule);
  transition: background 0.12s var(--ease);
}
.group-head::-webkit-details-marker { display: none; }
.group-head:hover { background: var(--surface); }
.group.sev-critical > .group-head { border-left-color: var(--leak); }
.group.sev-high > .group-head { border-left-color: var(--amber); }
.group.sev-medium > .group-head { border-left-color: color-mix(in srgb, var(--amber) 55%, var(--rule)); }
.group.sev-low > .group-head { border-left-color: var(--rule); }
/* min-width: 0 is load-bearing — without it a long title blows out the flex row. */
.group-title { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 600; }
.group-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }
.group-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 1rem; color: var(--recover); min-width: 6.5rem; text-align: right;
}
.group-value.tag { font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
/* Risk tags are coloured text, not chips: the track already says the rest. */
.risk-tag {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.risk-tag.destructive { color: var(--leak); }
.risk-tag.decision { color: var(--amber); }

/* A5 — group body. */
.group-body { padding: 0 0.9rem 1.5rem 0.75rem; display: grid; gap: 1rem; }
.group-desc { margin: 0; max-width: 68ch; line-height: 1.6; color: var(--ink-body); }

.cmd-block { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.cmd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--rule);
}
.cmd-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cmd-warning { color: var(--leak); font-weight: 600; }
.cmd-copy {
  font: inherit; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; cursor: pointer;
  padding: 0.25rem 0.6rem; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.cmd-copy:hover { border-color: var(--accent); color: var(--accent); }
.cmd-pre {
  margin: 0; padding: 0.9rem 1.1rem; background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75;
  overflow-x: auto; tab-size: 4;
}
/* A single long command (the collector install line) wraps instead of scrolling
   out of sight — a command you can only half-read cannot be trusted or typed. */
.cmd-pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
.cmd-pre code { color: inherit; }

.decision-card {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule); border-left: 2px solid var(--amber);
  border-radius: var(--radius); background: var(--surface);
}
.decision-item { display: flex; flex-direction: column; gap: 0.3rem; max-width: 52ch; }
.decision-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.decision-value { font-size: 0.95rem; color: var(--ink); }
.decision-value.money { font-family: var(--font-mono); font-weight: 700; }
.decision-value.recover { color: var(--recover); }

.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.resource-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.resource-arn { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); word-break: break-all; }
.resource-item .money { font-family: var(--font-mono); font-size: 0.8rem; color: var(--recover); }
.finding-region { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }

.fix {
  margin: 0; padding: 0.9rem 1.1rem; border-radius: var(--radius);
  background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 0.85rem; overflow-x: auto;
}
.fix code { color: inherit; }
.fix.locked { background: var(--surface-2); color: var(--ink-soft); font-family: inherit; }
.locked-note { color: var(--ink-soft); margin: 1rem 0; }

/* Low-value groups collapsed to a summary line, with the full list behind a
   "see all" disclosure (aggregation threshold). */
.finding-aggregate { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.resource-toggle > summary {
  cursor: pointer; color: var(--accent); font-size: 0.85rem; font-weight: 600; list-style: none;
}
.resource-toggle > summary::-webkit-details-marker { display: none; }
.resource-toggle[open] > summary { margin-bottom: 0.6rem; }

/* B — ledger: the same findings as a statement. */
.ledger-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.ledger-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.ledger-meta {
  margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
}
.ledger-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { text-align: left; }
.ledger thead th {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding: 0.6rem 0.75rem;
}
.ledger .num { text-align: right; }
.ledger .col-type { padding-left: 1.1rem; }
.ledger .col-action { padding-right: 1.1rem; padding-left: 1.5rem; }
.ledger-section td {
  padding: 1.6rem 1.1rem 0.5rem; font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.ledger-section:first-child td { padding-top: 1.4rem; }
.ledger-section.track-quick td { color: var(--recover); }
.ledger-section.track-review td { color: var(--amber); }
.ledger-section.track-hygiene td { color: var(--ink-soft); }

.ledger-row td, .ledger-row th { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--surface-2); font-weight: 400; }
.ledger-row:nth-of-type(odd) { background: var(--surface); }
.ledger-row .col-type { border-left: 2px solid var(--rule); }
.ledger-row.sev-critical .col-type { border-left-color: var(--leak); }
.ledger-row.sev-high .col-type { border-left-color: var(--amber); }
.ledger-row.sev-medium .col-type { border-left-color: color-mix(in srgb, var(--amber) 55%, var(--rule)); }
.ledger-row.aggregated { color: var(--ink-soft); }
.ledger .col-service { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }
.ledger .money { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ledger .money.recover { color: var(--recover); }
.ledger .tag { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }
.row-tag { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); }
.action-link { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); text-decoration: none; }
.action-link:hover { text-decoration: underline; }
.action-locked { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }

.ledger-subtotal td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-weight: 700;
}
.ledger-subtotal td:first-child {
  font-size: 0.78rem; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
/* The double rule is the ledger's one quotation of accounting stationery. It
   appears here and nowhere else. */
.ledger-total th, .ledger-total td { border-top: 3px double var(--rule); padding: 1.2rem 0.75rem; }
.ledger-total th { font-size: 1.05rem; font-weight: 700; }
.ledger-total .money { font-size: 1.15rem; }
.ledger-total .total-annual { font-size: 1.9rem; letter-spacing: -0.02em; }
.ledger-note { max-width: 68ch; margin-top: 1.5rem; font-size: 0.9rem; line-height: 1.65; color: var(--ink-soft); }

/* A6 — conversion footer: one card, no blue top border. */
.monitor-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; margin-top: 3rem; padding: 1.35rem 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.monitor-copy { max-width: 46ch; }
.monitor-copy h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.monitor-copy p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.monitor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.monitor-actions form { margin: 0; }
.monitor-footer .upsell-note { flex-basis: 100%; margin: 0; }

.upsell {
  margin: 2rem 0; padding: 1.75rem;
  border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--surface);
}
.upsell h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.upsell-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; max-width: var(--measure); }
.upsell-list li { padding-left: 1.5rem; position: relative; color: var(--ink); }
.upsell-list li::before { content: "✓"; position: absolute; left: 0; color: var(--recover); font-weight: 700; }
.upsell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.upsell-actions form { margin: 0; }
.upsell-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }

@media (max-width: 60rem) {
  .ledger { min-width: 44rem; }
  .group-value { min-width: 0; text-align: left; }
  .result-band-side { min-width: 0; }
}


/* --- Home v3: finding → fix (F11-HOME) -----------------------------------
   One job: get to the free scan. The hero pairs the claim with the artefact
   that proves it (the scan running, then the statement with the command), and
   every number below it is derived from the registry or the case study. */

.hero-v2 {
  max-width: 74rem; margin-inline: auto;
  padding: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(1rem, 4vw, 3rem) clamp(3.5rem, 2rem + 6vw, 6rem);
  display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 62rem) {
  .hero-v2 { grid-template-columns: 1fr 1.05fr; }
}
.hero-v2 .hero-copy, .hero-cycle { min-width: 0; }
.hero-v2 .hero-lede { max-width: 44ch; line-height: 1.55; margin-bottom: 2.2rem; }
.hero-v2 .cta { font-size: 1.05rem; padding: 0.9rem 1.7rem; }
.hero-v2 .hero-trust { font-family: var(--font-mono); font-size: 0.85rem; }

/* The two stations are stages of one loop, not slides: numbered, with a
   progress bar under the active label, and never arrows or dots. */
.hc-stages { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 0.9rem; }
.hc-stage { display: grid; gap: 0.4rem; }
.hc-lab {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.hc-bar { height: 2px; background: var(--recover); transform-origin: left; }
.hc-lab-b { opacity: 0.38; }
.hc-bar-b { transform: scaleX(0); }

.hc-stack { position: relative; min-height: 34rem; }
.hc-a, .hc-b { position: absolute; left: 0; right: 0; top: 0; }
.hc-b { opacity: 0; }

.hc-body { padding: 1.1rem 1.2rem; display: grid; gap: 0.55rem; }
.hc-line {
  margin: 0; display: flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.45; color: var(--code-ink);
}
.hc-check { color: var(--code-recover); font-weight: 700; }
.hc-progress {
  height: 0.4rem; margin-top: 0.35rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.hc-fill {
  display: block; height: 100%; width: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--code-accent), var(--code-recover));
}
.hc-foot { margin: 0.15rem 0 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--code-ink-soft); }

/* The open finding and its commands: the whole argument of the page. */
.stmt-row.is-open { background: var(--surface-2); border-left: 2px solid var(--recover); }
.stmt-fix { border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.stmt-fix-head { padding: 0.5rem 1.25rem 0.35rem; }
.stmt-fix-label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.stmt-fix-pre {
  margin: 0; padding: 0.8rem 1.25rem 1rem; background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.7; overflow-x: auto;
}

/* 18s loop, CSS only. Every piece shares the duration so they stay in phase. */
@media (prefers-reduced-motion: no-preference) {
  .hc-a { animation: hcA 18s linear infinite; }
  .hc-b { animation: hcB 18s linear infinite; }
  .hc-lab-a { animation: hcLabA 18s linear infinite; }
  .hc-lab-b { animation: hcLabB 18s linear infinite; }
  .hc-bar-a { animation: hcBarA 18s linear infinite; }
  .hc-bar-b { animation: hcBarB 18s linear infinite; }
  .hc-fill { animation: hcFill 18s linear infinite; }
  .hc-line { opacity: 0.35; }
  .hc-line-1 { animation: hcW1 18s linear infinite; }
  .hc-line-2 { animation: hcW2 18s linear infinite; }
  .hc-line-3 { animation: hcW3 18s linear infinite; }
  .hc-line-4 { animation: hcW4 18s linear infinite; }
  .hc-line-5 { animation: hcW5 18s linear infinite; }
  .hc-line-6 { animation: hcW6 18s linear infinite; }
}
@keyframes hcA { 0%, 47% { opacity: 1; transform: none; }
                 50% { opacity: 0; transform: translateY(-6px); }
                 97% { opacity: 0; transform: translateY(6px); }
                 100% { opacity: 1; transform: none; } }
@keyframes hcB { 0%, 47% { opacity: 0; transform: translateY(6px); }
                 50%, 97% { opacity: 1; transform: none; }
                 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hcFill { 0% { width: 3%; } 45%, 100% { width: 100%; } }
@keyframes hcLabA { 0%, 47% { opacity: 1; } 50%, 97% { opacity: 0.38; } 100% { opacity: 1; } }
@keyframes hcLabB { 0%, 47% { opacity: 0.38; } 50%, 97% { opacity: 1; } 100% { opacity: 0.38; } }
@keyframes hcBarA { 0%, 47% { transform: scaleX(1); } 50%, 97% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes hcBarB { 0%, 47% { transform: scaleX(0); } 50%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hcW1 { 0%, 3% { opacity: 0.35; } 6%, 47% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes hcW2 { 0%, 9% { opacity: 0.35; } 12%, 47% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes hcW3 { 0%, 16% { opacity: 0.35; } 19%, 47% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes hcW4 { 0%, 23% { opacity: 0.35; } 26%, 47% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes hcW5 { 0%, 30% { opacity: 0.35; } 33%, 47% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes hcW6 { 0%, 37% { opacity: 0.35; } 40%, 47% { opacity: 1; } 50%, 100% { opacity: 0.35; } }

/* Without motion the stations stack and both show in full — the content is
   always in the DOM, the animation only sequences it. */
@media (prefers-reduced-motion: reduce) {
  .hc-stack { display: grid; gap: 1.25rem; min-height: 0; }
  .hc-a, .hc-b { position: relative; opacity: 1; transform: none; }
  .hc-lab-b { opacity: 1; }
  .hc-bar-b { transform: scaleX(1); }
  .hc-line { opacity: 1; }
}

/* --- Proof band ----------------------------------------------------------- */
.proof-band { background: var(--code-bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.proof-inner {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 2rem 3rem; padding: 3rem clamp(1rem, 4vw, 3rem);
}
.proof-figures { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; }
.proof-figure { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.proof-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: var(--code-ink);
}
.proof-value.recover { color: var(--code-recover); }
.proof-legend { font-size: 0.9rem; color: var(--code-ink-soft); }
.proof-context { margin: 0; max-width: 34ch; font-size: 0.9rem; line-height: 1.6; color: var(--code-ink-soft); }
.proof-context a { color: var(--code-accent); font-weight: 600; text-decoration: none; }
.proof-context a:hover { text-decoration: underline; }

/* --- Checks grid ---------------------------------------------------------- */
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 3rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--rule);
}
.section-head h2 { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem); letter-spacing: -0.025em; font-weight: 700; }
.section-lede { margin: 0; max-width: 46ch; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.check-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 2.5rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
.check-group { min-width: 0; }
.check-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--recover);
}
.check-count { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem;
  font-size: 0.9rem; line-height: 1.45; color: var(--ink-body); }

/* --- Report preview ------------------------------------------------------- */
.report-preview { background: var(--code-bg); border-top: 1px solid var(--rule); }
.preview-inner {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  align-items: center; padding: clamp(3.5rem, 2rem + 6vw, 6rem) clamp(1rem, 4vw, 3rem);
}
@media (min-width: 62rem) { .preview-inner { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }
.preview-copy { min-width: 0; }
.preview-copy h2 { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem); letter-spacing: -0.025em; color: var(--code-ink); }
.preview-copy .section-lede { font-size: 1.05rem; max-width: 48ch; color: var(--code-ink-soft); }
.preview-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.6rem; color: var(--code-ink); }
.preview-list li { position: relative; padding-left: 1.4rem; }
.preview-list li::before { content: "✓"; position: absolute; left: 0; color: var(--code-recover); font-weight: 700; }
.preview-link { color: var(--code-accent); font-weight: 600; text-decoration: none; }
.preview-link:hover { text-decoration: underline; }

/* A crop, not a screen: the veil is what says so. */
.report-crop {
  position: relative; min-width: 0; max-height: 26rem; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg);
}
.report-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7rem;
  background: linear-gradient(to bottom, transparent, var(--code-bg));
}
.crop-band {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--rule);
}
.crop-amount {
  margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 2.4rem;
  line-height: 1; letter-spacing: -0.03em; color: var(--recover);
}
.crop-label { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.crop-side { display: grid; gap: 0.35rem; }
.crop-side-item { margin: 0; font-size: 0.72rem; color: var(--ink-soft); padding-left: 0.6rem; border-left: 2px solid var(--recover); }
.crop-side-item.review { border-left-color: var(--amber); }
.crop-side-item span { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.crop-track {
  margin: 0; padding: 0.9rem 1.25rem 0.5rem; font-family: var(--font-mono); font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--recover);
}
.crop-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--rule); font-size: 0.8rem;
}
.crop-money { font-family: var(--font-mono); font-weight: 700; color: var(--recover); }
.crop-pre {
  margin: 0; padding: 0.7rem 1.25rem; background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.7; overflow: hidden;
}

/* --- Comparison (four lines; the full table lives on /compare) ------------- */
.compare-home h2 { margin: 0 0 0.75rem; max-width: 30ch; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem); letter-spacing: -0.025em; }
.compare-home .section-lede { font-size: 1.05rem; max-width: 56ch; margin-bottom: 2.5rem; }
.compare-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.cg-corner { border-bottom: 2px solid var(--rule); }
.cg-head {
  padding: 0.6rem 1rem; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
}
.cg-head.cg-us { color: var(--recover); border-bottom-color: var(--recover); }
.cg-label, .cg-them, .cg-ours { padding: 1.1rem 1rem; border-bottom: 1px solid var(--rule); min-width: 0; }
.cg-label { font-weight: 600; }
.cg-them { color: var(--ink-soft); }
.cg-ours { color: var(--ink); background: var(--recover-wash); }
@media (max-width: 48rem) {
  .compare-grid { grid-template-columns: 1fr; }
  .cg-corner, .cg-head { display: none; }
  .cg-label { padding-bottom: 0.3rem; border-bottom: 0; }
  .cg-them, .cg-ours { padding-top: 0.3rem; padding-bottom: 0.3rem; border-bottom: 0; font-size: 0.95rem; }
  .cg-ours { padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
}

/* --- Final CTA ------------------------------------------------------------ */
.cta-band { background: var(--surface); border-top: 1px solid var(--rule); }
.cta-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem 3rem; padding: clamp(3rem, 2rem + 4vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}
.cta-copy { max-width: 40ch; }
.cta-copy h2 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem); letter-spacing: -0.025em; }
.cta-copy p { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }
.cta-actions { display: grid; gap: 0.7rem; justify-items: start; }
.cta-actions .cta { font-size: 1.05rem; padding: 0.9rem 1.7rem; }
.cta-prices { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }

/* Header CTA — the whole site exists to get here. */
.nav-cta { font-size: 0.9rem; padding: 0.5rem 1rem; }

/* --- Scan progress (live terminal widget, F8-SCAN) ------------------------ */
.scanning h1 { font-size: var(--text-h2); letter-spacing: -0.02em; margin: 0 0 0.5rem; }

.terminal {
  margin-top: 2rem; max-width: 46rem;
  background: var(--code-bg); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 24px 50px -30px var(--shadow);
}
.term-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.term-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #3a3f46; }
.term-dot:nth-child(1) { background: #ff5f57; }
.term-dot:nth-child(2) { background: #febc2e; }
.term-dot:nth-child(3) { background: #28c840; }
.term-title { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--code-ink-soft); }

.term-body { padding: 1.1rem 1.2rem; display: grid; gap: 0.5rem; }
/* Finished lines recede by COLOUR, never by opacity: opacity over the terminal's
   dark ground drops the text below 4.5:1, and these lines are the record of what
   was actually checked. */
.term-line {
  margin: 0; display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.86rem; color: var(--code-ink-soft);
}
.term-line.is-active { color: var(--code-ink); }
.term-line.term-fail { color: var(--leak); }
.term-glyph { color: var(--code-recover); font-weight: 700; }
.term-line.is-active .term-glyph { color: var(--code-accent); }
.term-line.term-fail .term-glyph { color: var(--leak); }
@media (prefers-reduced-motion: no-preference) {
  .term-line.is-active .term-glyph { animation: termBlink 1.1s steps(2, start) infinite; }
  @keyframes termBlink { 50% { opacity: 0.35; } }
}

.progress {
  margin-top: 0.5rem; height: 0.4rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--code-accent), var(--code-recover));
  transition: width 0.4s var(--ease);
}
.scan-noscript { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9rem; }

/* --- Forms (scan + connect) ----------------------------------------------- */

.scan h1, .connect h1 { font-size: var(--text-h2); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2rem; }

.scan-form, .connect-form { display: grid; gap: 0.5rem; max-width: 30rem; }
.scan-form label, .connect-form label { font-weight: 600; margin-top: 0.9rem; }
.scan-form input, .connect-form input, .connect-form select {
  font: inherit; padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.scan-form input:focus, .connect-form input:focus, .connect-form select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.connect-form input[name="account_id"] { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.08em; }
.connect-form .field-hint { display: block; margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.8rem; }
.scan-form .cta, .connect-form .cta { margin-top: 1.4rem; justify-self: start; }

/* Consent checkbox on the sign-up (email) step. */
.consent { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); }
.consent input { margin-top: 0.2rem; flex: none; }
.consent a { color: var(--accent); }

/* Progressive disclosure for destructive actions: the confirm input and the
   destructive button stay hidden inside <details> until the user opts in by
   clicking the summary (native, no JS, accessible). Shared by "delete my
   account" and "disconnect". */
.delete-details > summary,
.disconnect-details > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  list-style: none; width: fit-content;
  color: var(--leak); font-weight: 600; font-size: 1rem;
}
.delete-details > summary::-webkit-details-marker,
.disconnect-details > summary::-webkit-details-marker { display: none; }
.delete-details > summary::before,
.disconnect-details > summary::before { content: "▸"; font-size: 0.85em; transition: transform 0.15s var(--ease); }
.delete-details[open] > summary::before,
.disconnect-details[open] > summary::before { transform: rotate(90deg); }
.delete-details > summary:hover,
.disconnect-details > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.delete-details[open] > summary,
.disconnect-details[open] > summary { margin-bottom: 0.6rem; }
.delete-form { display: grid; gap: 0.5rem; margin-top: 0.4rem; max-width: 22rem; }
.delete-form input { font-family: var(--font-mono); }
.cta.danger { background: var(--leak); border-color: var(--leak); color: #fff; }
.cta.danger:hover { filter: brightness(1.08); }

/* Legal pages (privacy / terms). */
.legal { max-width: var(--measure); }
.legal .legal-updated { color: var(--ink-soft); font-size: 0.85rem; margin-top: -0.4rem; }
.legal .legal-draft { display: inline-block; padding: 0.35rem 0.7rem; border-radius: var(--radius); background: var(--amber-tint); color: var(--amber); font-size: 0.85rem; }
.legal-section { margin-top: 1.8rem; }
.legal-section h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.legal-section p { color: var(--ink-soft); }

.form-error {
  color: var(--leak); background: var(--leak-tint); border: 1px solid var(--rule);
  padding: 0.8rem 1rem; border-radius: var(--radius); max-width: var(--measure);
}
.form-note {
  color: var(--recover); background: var(--recover-tint); border: 1px solid var(--rule);
  padding: 0.8rem 1rem; border-radius: var(--radius); max-width: var(--measure);
}

/* --- Account area (/account) ------------------------------------------------
   The account is the archive of what the customer bought: the report history
   first, then what changed, then the two machines that keep producing it. State
   is carried by a rule on the left edge of a block — never a badge, and never
   colour alone: the value next to it always spells the state out. */

.account.shell {
  /* 68rem, not the app's 74rem: the report table has five columns and reads
     better a little tighter. */
  max-width: 68rem;
  padding: 3.5rem clamp(1rem, 4vw, 3rem) 4rem;
}
.account > .form-note, .account > .form-error { margin: 0 0 1.5rem; }

/* Status strip — replaces the identity/subscription/connection cards. Three
   boxes was a lot of furniture for three lines of text. */
.account-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
}
/* The facts wrap among themselves; the actions stay a single unit beside them,
   and drop to their own line aligned with the content rather than floating
   right on an orphaned row. */
.strip-items {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem;
  min-width: 0; flex: 1 1 auto;
}
.strip-item { display: grid; gap: 0.15rem; min-width: 0; }
.strip-item-ruled { padding-left: 0.9rem; border-left: 2px solid var(--rule); }
.strip-item-ruled.is-ok { border-left-color: var(--recover); }
.strip-item-ruled.is-warn { border-left-color: var(--amber); }
.strip-item-ruled.is-bad { border-left-color: var(--leak); }
.strip-label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.strip-value { font-size: 0.95rem; font-weight: 600; }
.strip-value-mono { font-family: var(--font-mono); font-weight: 400; word-break: break-all; }
.strip-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 0 0 auto; }
.strip-jump a {
  font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.strip-jump a:hover { border-color: var(--accent); color: var(--accent); }

/* Report history — the page's reason to exist. */
.reports-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem;
}
.reports-head h1 {
  margin: 0; font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
}
.reports-lede { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 0.95rem; max-width: var(--measure); }

.report-table-wrap {
  margin-top: 2rem; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow-x: auto; background: var(--surface);
}
/* The rows are grids, so the table box itself must stop applying the table
   layout algorithm — otherwise it shrink-to-fits and overflows its wrapper. */
.report-table, .report-table thead, .report-table tbody { display: block; width: 100%; }
.report-head, .report-row {
  display: grid; grid-template-columns: 9rem 1fr 7rem 8rem 7rem;
  gap: 1rem; align-items: center; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.report-head {
  padding: 0.7rem 1.25rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.report-head th { font-weight: 600; text-align: left; }
.report-head th.num { text-align: right; }
.report-row {
  /* The same gutter vocabulary the report itself uses: mint = paid. */
  border-left: 2px solid var(--rule);
}
.report-row.is-paid { border-left-color: var(--recover); }
.report-table tbody tr:last-child { border-bottom: 0; }
.report-row td { min-width: 0; }
.report-row td.num { text-align: right; }
.report-when, .report-scope { display: grid; gap: 0.1rem; }
.report-date { font-family: var(--font-mono); font-size: 0.88rem; }
.report-rel { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
.report-scope { gap: 0.15rem; }
.report-scope-main { font-weight: 600; }
.report-scope-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.report-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.9rem; color: var(--ink-body);
}
.report-annual {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--recover);
}
/* Unpaid: the number exists, but the statement behind it was not bought. */
.report-annual.is-locked { color: var(--ink-soft); }
.report-access { display: grid; gap: 0.2rem; justify-items: end; }
.report-access a { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.report-access a:hover { text-decoration: underline; text-underline-offset: 3px; }
.report-free {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.report-none { color: var(--ink-soft); }
.cell-label { display: none; }
.report-more { margin-top: 0.9rem; font-size: 0.9rem; }
.report-more a { color: var(--accent); font-weight: 600; }
.report-empty {
  margin-top: 2rem; display: grid; gap: 1.25rem; justify-items: center;
  padding: 3rem 1.5rem; text-align: center;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.report-empty p { margin: 0; color: var(--ink-body); }

/* What changed since the previous scan. Amber, not mint: on this page mint
   means money, and money means paid. */
.diff-section { margin-top: 3rem; }
.diff-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1rem;
  padding-bottom: 0.75rem; border-bottom: 2px solid var(--rule);
}
.diff-head h2 {
  margin: 0; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}
.diff-head a { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.diff-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.diff-list { list-style: none; margin: 0; padding: 0; display: grid; }
.diff-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  padding: 1rem 0.75rem; border-bottom: 1px solid var(--rule);
  border-left: 2px solid var(--rule);
}
.diff-list li:last-child { border-bottom: 0; }
.diff-row.is-new { border-left-color: var(--amber); }
.diff-row.is-resolved { border-left-color: var(--recover); }
.diff-tag {
  flex: none; width: 4.5rem; font-family: var(--font-mono); font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.diff-row.is-new .diff-tag { color: var(--amber); }
.diff-row.is-resolved .diff-tag { color: var(--recover); }
.diff-title { flex: 1 1 14rem; min-width: 0; font-weight: 600; color: var(--ink); }
/* Resolved recedes by colour, never by opacity. */
.diff-row.is-resolved .diff-title { font-weight: 500; color: var(--ink-body); }
.diff-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.diff-delta {
  margin-inline-start: auto; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--recover);
}
.diff-row.is-resolved .diff-delta { color: var(--ink-soft); }
/* A finding worth $0 is hygiene, not money — it must not wear the mint. */
.diff-delta.is-hygiene { color: var(--ink-soft); font-weight: 600; }

/* Connection + subscription. */
.account-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.conn-card, .sub-card, .mini-card {
  padding: 1.5rem; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--surface);
}
.conn-card { border-left: 3px solid var(--rule); }
.conn-card.is-ok { border-left-color: var(--recover); }
.conn-card.is-warn { border-left-color: var(--amber); }
.conn-card.is-bad { border-left-color: var(--leak); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.conn-card h2, .sub-card h2, .mini-card h2 { margin: 0; font-size: 1rem; }
.card-state {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.conn-card.is-ok .card-state { color: var(--recover); }
.conn-card.is-warn .card-state { color: var(--amber); }
.conn-card.is-bad .card-state { color: var(--leak); }
.conn-facts {
  display: grid; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--ink-body); overflow-wrap: anywhere;
}
.conn-perms.is-ok { color: var(--recover); }
.conn-perms.is-warn { color: var(--amber); }
.card-body { margin: 0.6rem 0 0; color: var(--ink-body); font-size: 0.9rem; line-height: 1.55; }
.card-actions {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.25rem;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.sub-card .card-actions, .mini-card .card-actions { border-top: 0; padding-top: 0; }
.card-actions form { margin: 0; }
.card-actions > a { font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.card-actions > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-actions a.card-mail { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 400; color: var(--ink-soft); }

/* A submit button that reads as a link: the action is a POST, but it is not a
   decision that deserves a button's weight. */
.link-btn {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Opened, a destructive <details> takes the whole row so its form has room. */
.delete-details[open], .disconnect-details[open] { flex-basis: 100%; }
.delete-details > summary, .disconnect-details > summary { font-size: 0.9rem; }

.sub-card.is-warn { border-left: 3px solid var(--amber); }
.sub-card h2 { margin-bottom: 0.8rem; }
.sub-status { margin: 0 0 0.3rem; font-weight: 600; }
.sub-billing { margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }

.mini-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.mini-card { flex: 1 1 20rem; }

/* Support page (/support): the form left the account page, where a full-width
   form at the bottom competed with everything above it. */
.support-page.shell { max-width: 48rem; }
.support-page h1 {
  margin: 0 0 0.6rem; font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
}
.support-from { margin: 0; color: var(--ink-body); font-size: 0.9rem; }
.support-from-mail { font-family: var(--font-mono); }
.support-alt { margin-top: 1.75rem; color: var(--ink-soft); font-size: 0.9rem; }
.support-alt a { font-family: var(--font-mono); color: var(--accent); }
.support-back { margin-top: 2rem; font-size: 0.9rem; }
.support-back a { color: var(--accent); font-weight: 600; }

.support-form { display: grid; gap: 0.4rem; margin-top: 1.5rem; }
.support-form label { font-weight: 600; margin-top: 0.5rem; }
.support-form input, .support-form textarea {
  font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--bg); color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.support-form textarea { resize: vertical; }
.support-form input:focus, .support-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.support-form .cta { margin-top: 0.75rem; justify-self: start; }

/* Below 62rem the two cards stack and the table scrolls sideways rather than
   crushing five columns. */
@media (max-width: 62rem) {
  .account-grid { grid-template-columns: 1fr; }
  .report-head, .report-row { min-width: 46rem; }
}
/* Below 48rem each row becomes a stacked block: date and scope on top, the
   numbers below, each with the label the hidden header used to carry. */
@media (max-width: 48rem) {
  .report-head { display: none; }
  .report-row {
    min-width: 0; grid-template-columns: 1fr auto;
    gap: 0.6rem 1rem; padding: 1.1rem 1rem;
  }
  .report-when { grid-column: 1; }
  .report-access { grid-column: 2; grid-row: 1; }
  .report-scope { grid-column: 1 / -1; }
  .report-row td.num.report-count { grid-column: 1; text-align: left; }
  .report-row td.num.report-annual { grid-column: 2; }
  .cell-label {
    display: block; font-family: var(--font-mono); font-size: 0.68rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  }
  .strip-jump { margin-inline-start: 0; }
}

.connect-steps { list-style: none; margin: 0; padding: 0; counter-reset: cstep; }
.connect-steps > li {
  counter-increment: cstep; padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
.connect-steps > li h2 { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.15rem; margin: 0 0 0.5rem; }
.connect-steps > li h2::before { content: counter(cstep, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent); font-size: 0.95rem; }

.connected-panel {
  max-width: var(--measure); padding: 1.75rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--recover); border-radius: var(--radius);
  background: var(--surface);
}
.connected-panel h2 { margin: 0 0 0.5rem; }
.connected-panel p { margin: 0 0 1.25rem; color: var(--ink-soft); }
/* Drift/update notice merged into the connected card (one card, not two). */
.connected-panel .drift-banner { margin: 0 0 1.25rem; max-width: none; }

/* Scan flow: email/code identity hints + dev code notice */
.connect-identity { color: var(--ink-soft); margin: 0 0 0.5rem; }

/* Code step: centered verification card */
.code-card {
  max-width: 30rem; margin: 2rem auto; padding: 2.5rem 2rem;
  border: 1px solid var(--rule); border-radius: calc(var(--radius) * 1.5);
  background: var(--surface); text-align: center;
  box-shadow: 0 30px 60px -40px var(--shadow);
}
.code-card h1 { margin: 0 0 0.5rem; }
.code-card .lede { margin: 0 auto 1.75rem; font-size: 1.05rem; }
.code-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 1.1rem; font-size: 1.4rem;
  border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent);
}
.code-card .form-error { max-width: none; margin: 0 0 1rem; text-align: left; }


.otp-form { display: grid; gap: 1.1rem; }
.otp-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.otp-form .cta { justify-self: stretch; text-align: center; }

/* Single-input fallback (no JS): styled like a code field */
.otp-fallback {
  font: inherit; font-family: var(--font-mono); font-size: 1.4rem;
  letter-spacing: 0.35em; text-align: center; padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.otp-fallback:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.otp-cells { display: none; }

/* Upgraded (JS): hide the fallback, show one box per digit */
.otp[data-otp-ready] .otp-fallback {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.otp[data-otp-ready] .otp-cells {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
}
.otp-cell {
  font: inherit; font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem;
  text-align: center; padding: 0.7rem 0; width: 100%;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.1s var(--ease);
}
.otp-cell:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint); transform: translateY(-1px);
}
@media (max-width: 26rem) { .otp-cell { font-size: 1.25rem; padding: 0.55rem 0; } }

.scan-resend { margin-top: 1.25rem; }
.code-card .scan-resend { margin-top: 1.5rem; }
.linklike {
  font: inherit; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--ink); }
.linklike:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; }

/* Scan flow: method choice (connect vs CSV) */
/* --- Pricing tiers --------------------------------------------------------- */
.pricing h1 { font-size: var(--text-h2); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.tiers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 52rem) { .tiers { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.tier { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tier.featured { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 24px 40px -30px var(--shadow); }
.tier h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.tier-price { margin: 0 0 0.25rem; display: flex; align-items: baseline; gap: 0.4rem; }
.tier-price .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 2.4rem; letter-spacing: -0.02em; }
.tier.featured .tier-price .amount { color: var(--recover); }
.tier-price .unit, .tier-alt { color: var(--ink-soft); font-size: 0.9rem; }
.tier-alt { margin: 0 0 0.75rem; }
.tier-desc { color: var(--ink); max-width: 34ch; }
/* Push each tier's action (CTA link or subscribe form) to the card's bottom so
   the three cards align even though the monitor card carries an email field. */
.tier > .cta, .subscribe-form { margin-top: auto; }
.cta.ghost { background: transparent; color: var(--accent); }
.cta.ghost:hover { box-shadow: none; filter: none; background: var(--accent-tint); }
.subscribe-form { display: grid; gap: 0.35rem; padding-top: 1.25rem; }
.subscribe-form label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.subscribe-form input {
  font: inherit; padding: 0.65rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); transition: border-color 150ms ease, box-shadow 150ms ease;
}
.subscribe-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.plan-buttons { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.plan-buttons .cta { padding: 0.7rem 1rem; text-align: center; }

/* Pricing v2: "most popular" badge, ROI, FAQ (F8-PRICE) */
.tier { position: relative; }
.tier-badge {
  position: absolute; top: -0.7rem; right: 1.25rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--accent-strong); color: var(--accent-ink);
}
.roi { max-width: var(--measure); }
.roi > p { color: var(--ink); }
.roi-points { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
.roi-points li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.roi-points li::before { content: "→"; position: absolute; left: 0; color: var(--recover); font-weight: 700; }

.faq { max-width: var(--measure); display: grid; gap: 0.5rem; }
.faq-item {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 0.4rem 1.1rem;
}
.faq-item > summary {
  cursor: pointer; list-style: none; padding: 0.7rem 0; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; }
.faq-item[open] > summary::after { content: "−"; }
.faq-item > p { margin: 0 0 0.8rem; color: var(--ink-soft); max-width: 60ch; }

/* --- Security / Features / Compare ---------------------------------------- */
.security h1, .features h1, .compare h1 { font-size: var(--text-h2); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.section-h { font-size: 1.3rem; margin: 2.5rem 0 1rem; letter-spacing: -0.01em; }

.guarantees { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 48rem) { .guarantees { grid-template-columns: repeat(3, 1fr); } }
.guarantee { padding: 1.5rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.guarantee h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }

.never-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; max-width: var(--measure); }
.never-list li { padding-left: 1.5rem; position: relative; }
.never-list li::before { content: "✕"; position: absolute; left: 0; color: var(--leak); font-weight: 700; }

.perm-groups { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.perm-group { padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.perm-group h3 { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: 0.95rem; }
.perm-desc { margin: 0 0 0.75rem; color: var(--ink-soft); max-width: var(--measure); }
.perm-actions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.perm-actions li code { font-family: var(--font-mono); font-size: 0.8rem; background: var(--surface-2); padding: 0.2rem 0.5rem; border-radius: 3px; }

.two-engines { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 48rem) { .two-engines { grid-template-columns: 1fr 1fr; } }
.engine { padding: 1.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.engine:first-child { border-top: 3px solid var(--recover); }
.engine:last-child { border-top: 3px solid var(--accent); }
.engine h2 { margin: 0 0 0.6rem; }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; max-width: var(--measure); }
.cat-list li { border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; color: var(--ink-soft); }
.cat-list strong { color: var(--ink); }
.features .cta { margin-top: 2rem; }

.compare-scroll { overflow-x: auto; margin-top: 1.5rem; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 40rem; }
.compare-table th, .compare-table td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare-table thead th { font-size: 0.95rem; }
.compare-table tbody th { font-weight: 600; color: var(--ink-soft); }
.compare-table .us { background: var(--accent-tint); }
.compare-table thead .us { border-bottom: 2px solid var(--accent); color: var(--accent); }
.compare-note { margin-top: 1.5rem; color: var(--ink-soft); max-width: var(--measure); }

/* ===========================================================================
   The /scan funnel — three steps, one rail
   ===========================================================================
   Every screen of the funnel shares the shell and the progress rail; the step
   itself decides the interior. Two rules run through the whole block and are
   not negotiable: attenuation is always a colour change, never `opacity` (it
   drops meta text below 4.5:1), and the mint (--recover) is only ever spent on
   a fact — a granted permission, a completed step, a recoverable dollar. It is
   never a category label. */

.scan-shell { max-width: 62rem; margin-inline: auto; padding: 3.5rem 1.25rem 3rem; }
@media (min-width: 48rem) { .scan-shell { padding: 3.5rem 3rem 3rem; } }
.scan-shell h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem); letter-spacing: -0.03em; font-weight: 700; margin: 0 0 0.6rem; }
.scan-shell > .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 58ch; margin: 0 0 2.5rem; line-height: 1.55; }

/* --- Progress rail --------------------------------------------------------- */
.scan-steps {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.scan-step { display: grid; gap: 0.5rem; }
.scan-step-rule { height: 2px; background: var(--rule); border-radius: var(--radius-pill); }
.scan-step.is-active .scan-step-rule,
.scan-step.is-done .scan-step-rule { background: var(--recover); }
.scan-step-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.scan-step.is-active .scan-step-label { color: var(--ink); }
.scan-step-check { color: var(--recover); margin-right: 0.3rem; }

/* --- Step 01: email --------------------------------------------------------- */
.email-field {
  display: grid; gap: 0.5rem; max-width: 30rem;
  margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule);
}
.email-field label { font-weight: 600; }
.email-field input[type="email"] {
  font: inherit; font-size: 1rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.email-field input[type="email"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.email-field.has-error input[type="email"] { border-color: var(--leak); box-shadow: 0 0 0 3px var(--leak-tint); }
/* This note is load-bearing: without it the visitor waits for an email that
   will not arrive until the report is ready. */
.field-note { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.field-error {
  margin: 0.35rem 0 0; display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.9rem; color: var(--leak); line-height: 1.5;
}
.field-error-mark { font-weight: 700; }

/* --- Step 01: method choice ------------------------------------------------ */
/* A radio list, not three parallel cards: the old layout had two competing
   badges fighting for attention and spent the mint on a category label. */
.method-list { display: grid; gap: 0.75rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.method-option {
  display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0 1.25rem; align-items: start;
  padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color 150ms var(--ease);
}
.method-option:hover { border-color: var(--ink-soft); }
/* Selection is read off the input itself, so it follows a click without any
   JavaScript. The marker and the "selecionar" hint use sibling selectors, which
   work everywhere; the card border uses :has(), and a browser without it simply
   keeps a neutral border while the marker still moves. */
.method-option:has(input:checked) { border-color: var(--accent); }
.method-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.method-marker {
  width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg);
  transition: border-color 150ms var(--ease), border-width 150ms var(--ease);
}
.method-option input:checked ~ .method-marker { border: 5px solid var(--accent); }
/* min-width: 0 is required — without it a long title blows out the grid. */
.method-body { min-width: 0; display: grid; gap: 0.4rem; }
.method-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.method-title { font-size: 1.15rem; font-weight: 600; }
/* The hierarchy lives here, in neutral text — not in a coloured badge. */
.method-meta {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.method-desc { color: var(--ink-body); max-width: 60ch; line-height: 1.55; margin: 0; }
.method-proof { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.5rem; }
.proof-item { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.proof-mark { color: var(--recover); }
.method-pick {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap;
}
.method-option input:checked ~ .method-pick { visibility: hidden; }
.scan-continue { margin-top: 2rem; }

/* A signed-in visitor is told which address the scan will belong to, not asked
   to type it again. */
/* Shorter than the field it replaces, so it takes less room around it — the
   field's 2.5rem gutters left a hole under a single line of text. */
.known-email {
  display: grid; gap: 0.35rem; max-width: 30rem;
  margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule);
}
.known-label {
  margin: 0; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.known-value { margin: 0; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.known-value strong { font-size: 1.05rem; }
@media (max-width: 34rem) {
  .method-option { grid-template-columns: 1.5rem 1fr; }
  .method-pick { display: none; }
}

/* --- Step 02: the shared skeleton ------------------------------------------ */
/* Work on the left, context on the right. Below 60rem the context follows the
   work rather than preceding it — nobody reads a permissions panel before they
   know what it is for. */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .work-grid { grid-template-columns: 1.25fr 1fr; gap: 3rem; } }

.work-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.work-step {
  display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start;
  padding: 1.75rem 0; border-top: 1px solid var(--rule);
}
.work-step:first-child { padding-top: 0; border-top: 0; }
.work-step-num { font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent); padding-top: 0.15rem; }
.work-step-body { min-width: 0; }
.work-step-body h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.work-step-body > p { margin: 0 0 1rem; color: var(--ink-body); line-height: 1.55; max-width: 46ch; }
.work-step-note { margin: 0.75rem 0 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.work-step-note a { color: var(--accent); }
.work-aside { display: grid; gap: 1rem; align-content: start; }

/* Step 02A's middle step exists to say "this one is just waiting" — without it
   a stack that takes 40 seconds reads as a hang. */
.status-chip {
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
  padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); max-width: 26rem;
}
.status-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--recover); flex: none; }
.status-text { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-body); overflow-wrap: anywhere; }

.account-form { display: grid; gap: 0.5rem; max-width: 26rem; }
.account-input {
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.08em;
  padding: 0.7rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.account-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.account-form .cta { margin-top: 0.9rem; justify-self: start; }

/* --- Permissions panel ------------------------------------------------------ */
/* Rendered from infra/cloudformation/role.yaml, never from literals: a list
   that could disagree with the deployed policy is worse than no list. */
.perm-panel {
  padding: 1.5rem; border: 1px solid var(--rule); border-left: 3px solid var(--recover);
  border-radius: var(--radius); background: var(--surface);
}
.perm-panel h2 { margin: 0 0 0.9rem; font-size: 1rem; }
.perm-note { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.perm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.perm-list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.4rem; }
.perm-actions { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-body); line-height: 1.5; overflow-wrap: anywhere; }
.perm-mark { color: var(--recover); }
/* The self-inspection permission is a different kind of grant and says so:
   it is scoped to this role's own policy, which is what makes drift detection
   possible without widening anything. */
.perm-caveat { color: var(--ink-soft); }
.deny-mark { color: var(--leak); }
.perm-list.deny { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
/* The strongest sentence role.yaml can offer, and the old screen never said it. */
.perm-deny {
  margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--leak);
}
.perm-more { display: inline-block; margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.perm-more:hover { text-decoration: underline; }

.revoke-card, .upsell-card, .gap-panel {
  padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.revoke-card h2, .upsell-card h2, .gap-panel h2 { margin: 0 0 0.7rem; font-size: 1rem; }
.revoke-card p, .upsell-card p { margin: 0 0 0.9rem; color: var(--ink-body); font-size: 0.92rem; line-height: 1.55; }
.revoke-facts {
  list-style: none; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--rule);
  display: grid; gap: 0.45rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5;
}

/* --- Diagnosis card (assume-role / CSV failures) ---------------------------- */
/* Not "try again": the three things that actually go wrong, numbered. */
.diag-card {
  max-width: 40rem; margin: 0 0 2rem; padding: 1.25rem 1.4rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--leak);
  border-radius: var(--radius); background: var(--leak-tint);
}
.diag-title { margin: 0 0 0.9rem; color: var(--ink); font-weight: 600; }
.diag-lede { margin: 0 0 0.9rem; color: var(--ink-body); font-size: 0.92rem; line-height: 1.6; }
.diag-list { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.55rem; font-size: 0.92rem; color: var(--ink-body); }
.diag-list::marker, .diag-list li::marker { color: var(--ink-soft); }
.diag-line {
  margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 0.78rem; overflow-wrap: anywhere;
}
.diag-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
.cta.small { font-size: 0.9rem; padding: 0.6rem 1.1rem; }
.cta.ghost-outline { background: transparent; border-color: var(--rule); color: var(--ink); }
.cta.ghost-outline:hover { background: var(--surface-2); box-shadow: none; filter: none; }
.form-notice {
  margin: 0 0 1.5rem; padding: 0.8rem 1rem; max-width: 46rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--amber);
  border-radius: var(--radius); background: var(--amber-tint);
  color: var(--ink-body); font-size: 0.92rem; line-height: 1.55;
}

/* --- Step 02B: the CLI ------------------------------------------------------ */
/* The action happens in a terminal, off-screen. This card is the page saying
   it knows that, and that it is still watching. */
.wait-card {
  display: flex; align-items: flex-start; gap: 0.9rem; margin-top: 2.5rem;
  padding: 1.25rem 1.4rem; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--surface);
}
.wait-dot { width: 0.6rem; height: 0.6rem; margin-top: 0.4rem; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .wait-dot { animation: waitPulse 1.6s var(--ease) infinite; }
  @keyframes waitPulse { 50% { transform: scale(0.6); } }
}
.wait-title { margin: 0 0 0.25rem; font-weight: 600; }
.wait-body { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

/* --- Step 02C: the CSV ------------------------------------------------------ */
.export-steps { margin: 0 0 0.75rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--ink-body); line-height: 1.55; }
.export-steps code { font-family: var(--font-mono); font-size: 0.88em; color: var(--ink); }
/* The real <input> hides behind this label, so with no JavaScript the label IS
   the file picker and the form behaves identically. */
/* The button was glued to the dropzone: this form needs its own rhythm, not
   the inherited zero margin of a bare <form>. */
.csv-form { display: grid; gap: 1.5rem; justify-items: start; }
.csv-form > * { min-width: 0; max-width: 100%; }
.dropzone-wrap { width: 100%; }

.dropzone {
  display: grid; place-items: center; gap: 0.5rem; cursor: pointer;
  padding: 2.25rem 1.5rem; border: 1px dashed var(--rule); border-radius: var(--radius);
  background: var(--surface); text-align: center;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone-title { font-weight: 600; }
.dropzone-alt { font-size: 0.88rem; color: var(--ink-soft); }

/* One of the two shows at a time: the invitation, or the file that answered it. */
.dropzone-wrap.has-file .dropzone { display: none; }
.file-chip { display: none; }
.dropzone-wrap.has-file .file-chip {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0;
  padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.file-size { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.file-mark { color: var(--recover); }
.file-name { font-family: var(--font-mono); font-size: 0.85rem; overflow-wrap: anywhere; min-width: 0; }
.gap-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.45rem; }
.gap-list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.4rem; font-size: 0.9rem; color: var(--ink-body); line-height: 1.5; }
.gap-mark { color: var(--amber); }
.keeps-mark { color: var(--recover); }
.gap-keep { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }

/* --- Step 03: the statement ------------------------------------------------- */
/* The headline figure reuses the report's .result-band (see above) — no second
   set of result-* classes lives here. */
.unlock-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; margin-top: 2rem; }
@media (min-width: 60rem) { .unlock-grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
.finding-peek-col { min-width: 0; }
.peek-title { margin: 0 0 1rem; font-size: 1.05rem; }
/* The number lands before the code. The visitor sees the total and the five
   biggest issue types — never the resources or the commands, which is exactly
   the line the report already draws on its free view. */
.finding-peek {
  position: relative;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
/* Only a list that genuinely runs past its box gets clipped and faded. */
.finding-peek.is-clipped { max-height: 17rem; overflow: hidden; }
.peek-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.peek-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); border-left: 2px solid var(--rule);
}
.peek-row.sev-critical { border-left-color: var(--leak); }
.peek-row.sev-high { border-left-color: var(--amber); }
.peek-row.sev-medium, .peek-row.sev-low { border-left-color: var(--ink-soft); }
/* Name over meta rather than beside it: in a 1.15fr column a long rule title
   and a nowrap meta cannot both fit, and the title is the part worth reading. */
.peek-main { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.peek-name { font-weight: 600; line-height: 1.35; }
.peek-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); }
.peek-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--recover); white-space: nowrap; }
.peek-more { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
/* State 3 recedes the result rather than removing it — again by colour, so the
   meta text keeps its contrast instead of sliding to ~3:1. */
.finding-peek.is-dimmed.is-clipped { max-height: 14rem; }
.finding-peek.is-dimmed .peek-name { color: var(--ink-body); font-weight: 500; }
.finding-peek.is-dimmed .peek-value { color: var(--recover-dim); }

.unlock-card, .code-panel {
  padding: 1.75rem; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface);
}
.unlock-card h2, .code-panel h2 { margin: 0 0 0.5rem; font-size: 1.25rem; letter-spacing: -0.01em; }
.unlock-body, .code-body { margin: 0 0 1.5rem; color: var(--ink-body); font-size: 0.95rem; line-height: 1.55; }
.unlock-body strong, .code-body strong { color: var(--ink); }
.cta.block { display: block; width: 100%; text-align: center; }
.unlock-notmine {
  display: inline-block; margin-top: 1rem; font-size: 0.9rem;
  color: var(--accent); text-decoration: underline;
}
.unlock-kept {
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5;
}
.code-panel .otp-form { margin-top: 0.5rem; }
.code-panel .code-resend { margin-top: 1rem; text-align: center; }
/* Dev-only, and deliberately quiet: the old blue dashed block competed with the
   field and made dev and production look like different products. */
.dev-note {
  margin: 0 0 1rem; padding: 0.55rem 0.75rem;
  border: 1px dashed var(--rule); border-radius: var(--radius-sm);
  background: var(--code-bg); color: var(--code-ink-soft);
  font-family: var(--font-mono); font-size: 0.78rem;
}
.dev-note code { color: var(--code-recover); font-weight: 700; letter-spacing: 0.08em; }

/* --- Screen-reader-only ------------------------------------------------------ */
/* Not display:none — a hidden radio must stay focusable and announced. */
.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;
}