/* ============================================================================
   selrob design system — "parchment/ink" editorial identity
   Locked brand direction (owner-approved, July 2026): Newsreader + Public Sans
   on parchment/ink, oxblood accent, decision-ledger as the signature product UI.
   Ported from the Claude Design project "SelRob brand guidelines".
   This file is the single source of styling for every page. No Tailwind.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Public+Sans:ital,wght@0,400..700;1,400..700&family=Spline+Sans+Mono:wght@400..600&display=swap');

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Base palette */
  --ink: #0A1F44;              /* text, primary action, BID */
  --oxblood: #7A2E2E;          /* accent — the period, eyebrows, NO-BID */
  --brass: #C9A55C;            /* warm accent, sparingly on ink surfaces */
  --parchment: #F5F1EA;        /* page background */
  --parchment-raised: #FAF7F2; /* raised strips/panels on parchment */
  --paper: #FFFFFF;            /* data surfaces: ledger, tables */
  --canvas: #E9E4DA;           /* outermost desk/canvas behind pages */

  /* Text */
  --text-display: var(--ink);
  --text-body: rgba(10, 31, 68, 0.75);
  --text-muted: rgba(10, 31, 68, 0.65);
  --text-faint: rgba(10, 31, 68, 0.5);
  --text-inverse: var(--parchment);
  --text-inverse-muted: rgba(245, 241, 234, 0.7);
  --text-inverse-faint: rgba(245, 241, 234, 0.55);

  /* Surfaces */
  --surface-page: var(--parchment);
  --surface-raised: var(--parchment-raised);
  --surface-card: var(--paper);
  --surface-ink: var(--ink);

  /* Lines */
  --line: rgba(10, 31, 68, 0.12);
  --line-soft: rgba(10, 31, 68, 0.08);
  --line-strong: rgba(10, 31, 68, 0.25);
  --line-inverse: rgba(245, 241, 234, 0.12);

  /* Actions */
  --action-primary: var(--ink);
  --action-primary-fg: var(--parchment);
  --action-accent: var(--oxblood);
  --action-accent-fg: #FAF9F5;

  /* Signals (bid / no-bid vocabulary) */
  --signal-bid: var(--ink);
  --signal-nobid: var(--oxblood);
  --signal-caution: var(--brass);

  /* Families */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Spline Sans Mono', 'SF Mono', monospace;

  /* Display scale (Newsreader, weight 400, tight leading) */
  --text-hero-size: 58px;  --text-hero-lh: 1.05;  --text-hero-ls: -0.015em;
  --text-h1-size: 44px;    --text-h1-lh: 1.1;     --text-h1-ls: -0.01em;
  --text-h2-size: 32px;    --text-h2-lh: 1.15;    --text-h2-ls: -0.01em;
  --text-stat-size: 38px;  --text-stat-lh: 1.1;

  /* Body scale (Public Sans) */
  --text-lead-size: 18px;  --text-lead-lh: 1.65;
  --text-base-size: 15px;  --text-base-lh: 1.6;
  --text-sm-size: 13px;    --text-sm-lh: 1.5;

  /* Eyebrow + mono labels */
  --eyebrow-size: 11px;    --eyebrow-tracking: 0.22em;
  --mono-label-size: 10px; --mono-label-tracking: 0.14em;
  --mono-data-size: 14px;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 44px; --space-8: 56px;
  --space-9: 76px; --space-10: 88px;

  --radius-sm: 3px;
  --radius-md: 6px;

  --page-pad-x: 56px;
  --nav-height: 76px;
  --measure-lead: 620px;
  --measure-hero: 820px;

  /* Effects */
  --shadow-card: 0 2px 12px rgba(10, 31, 68, 0.08);
  --shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 160ms;
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base-size);
  line-height: var(--text-base-lh);
  color: var(--text-body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The parchment bleeds to the edges of the viewport — no sheet, no frame. */
.page {
  background: var(--surface-page);
  width: 100%;
  min-height: 100vh;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
em { font-style: italic; }

/* --- Typography helpers --------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
.hero-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-hero-size); line-height: var(--text-hero-lh);
  letter-spacing: var(--text-hero-ls); color: var(--ink);
  max-width: var(--measure-hero); margin: 0;
}
.h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-h1-size); line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls); color: var(--ink); margin: 0;
}
.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-h2-size); line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls); color: var(--ink); margin: 0;
}
.lead {
  font-size: var(--text-lead-size); line-height: var(--text-lead-lh);
  color: var(--text-body); max-width: var(--measure-lead);
}
.prose { font-size: var(--text-base-size); line-height: var(--text-base-lh); color: var(--text-body); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

.rule { width: 40px; height: 1px; background: var(--line-strong); margin: 36px 0; border: 0; }
.rule--center { margin-left: auto; margin-right: auto; }

/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--oxblood);
}
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--inverse { color: var(--brass); }

/* --- Wordmark ------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  line-height: 1; color: var(--ink); font-size: 30px; text-decoration: none;
  display: inline-block;
}
.wordmark .dot { color: var(--oxblood); }
.wordmark--inverse { color: var(--parchment); }
.wordmark--inverse .dot { color: var(--brass); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  padding: 14px 28px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: opacity var(--duration) var(--ease), background var(--duration) var(--ease);
  background: var(--action-primary); color: var(--action-primary-fg);
}
.btn:hover { opacity: 0.88; }
.btn--sm { font-size: 14px; padding: 10px 20px; }
.btn--secondary {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn--accent { background: var(--action-accent); color: var(--action-accent-fg); }
.btn--inverse { background: var(--parchment); color: var(--ink); }
.btn--inverse.btn--secondary {
  background: transparent; color: var(--parchment); border-color: rgba(245, 241, 234, 0.3);
}

/* --- Layout: full-bleed bands -------------------------------------------- */
.band { padding: var(--space-9) var(--page-pad-x); border-top: 1px solid var(--line); }
.band:first-child { border-top: 0; }
.band--flush { border-top: 0; }
.band--raised { background: var(--surface-raised); }
.band--ink { background: var(--ink); color: var(--parchment); border-top-color: var(--line-inverse); }
.band--ink .h1, .band--ink .h2, .band--ink .hero-title, .band--ink .display { color: var(--parchment); }
.band--ink .lead, .band--ink .prose { color: var(--text-inverse-muted); }
.band--center { text-align: center; }
.band--center .lead, .band--center .hero-title { margin-left: auto; margin-right: auto; }

.stack > * + * { margin-top: var(--space-4); }
.actions { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.band--center .actions { justify-content: center; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
/* Checkout: plan summary beside the form, form slightly wider. */
.split--checkout { grid-template-columns: 1fr 1.15fr; align-items: start; }

.eyebrow + .hero-title, .eyebrow + .h1, .eyebrow + .h2 { margin-top: 24px; }

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-height); padding: 0 var(--page-pad-x);
  border-bottom: 1px solid var(--line);
  background: rgba(245, 241, 234, 0.85);
  backdrop-filter: saturate(120%) blur(8px);
  transition: box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}
.nav.is-scrolled { box-shadow: var(--shadow-card); background: rgba(245, 241, 234, 0.95); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link {
  font-size: 14px; color: var(--text-body); text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.nav-link:hover { color: var(--ink); }

/* Solutions dropdown */
.nav-menu { position: relative; }
.nav-menu-trigger {
  font-size: 14px; color: var(--text-body); background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.nav-menu-trigger:hover { color: var(--ink); }
.nav-menu-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 280px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 8px; opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease);
}
.nav-menu:hover .nav-menu-panel, .nav-menu:focus-within .nav-menu-panel { opacity: 1; visibility: visible; }
.nav-menu-item {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); font-size: 14px;
  transition: background var(--duration) var(--ease);
}
.nav-menu-item:hover { background: var(--parchment); }
.nav-menu-item .nav-menu-note { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* Mobile menu */
.nav-mobile-btn { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--ink); }
.nav-mobile { display: none; }

/* --- Stat block + proof strip -------------------------------------------- */
.proof-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); background: var(--surface-raised);
}
.proof-strip .stat-block { padding: 28px var(--page-pad-x); border-right: 1px solid var(--line); }
.proof-strip .stat-block:last-child { border-right: 0; }
.stat-block .stat-value {
  font-family: var(--font-display); font-size: var(--text-stat-size); line-height: var(--text-stat-lh);
  color: var(--ink);
}
.stat-block .stat-label {
  font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--oxblood); margin-top: 8px;
}
.stat-block--inverse .stat-value { color: var(--parchment); }
.stat-block--inverse .stat-label { color: var(--brass); }

/* --- Decision chip -------------------------------------------------------- */
.decision-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  padding: 4px 10px; text-transform: uppercase; border: 1px solid;
}
.decision-chip--bid { background: var(--signal-bid); color: #FAF9F5; border-color: var(--signal-bid); }
.decision-chip--nobid { background: transparent; color: var(--signal-nobid); border-color: var(--signal-nobid); }
.decision-chip--review { background: transparent; color: #8a6a2f; border-color: var(--brass); }

/* --- Ledger --------------------------------------------------------------- */
.ledger {
  border: 1px solid rgba(10, 31, 68, 0.15); background: var(--surface-card);
  font-family: var(--font-body);
}
/* Hero: the wound on the left, the trimmed ledger beside it on a .split. The
   outcome stats follow in the strip beneath, so the hero keeps the design's
   76/60 band. */
.band--hero { padding-top: var(--space-9); padding-bottom: 60px; }
.band--hero .rule { margin: var(--space-6) 0; }
.band--hero .actions { margin-top: 40px; }
/* Both columns hang from one datum — the ledger caption sits on the eyebrow's
   line, not centred against the headline block. */
.band--hero .split { align-items: start; }

/* Trimmed ledger — tender, fit, call only. The full five-column ledger needs
   ~820px to keep a call on one line, which a half-width column never has; this
   variant fits beside the copy at any width. Fit and call take fixed widths so
   everything left over goes to the tender name, which is what actually wraps. */
.ledger--trim { max-width: 880px; }
.ledger--trim .ledger-row { grid-template-columns: 1fr 48px 72px; gap: 20px; }

/* Mono caption for a ledger that sits beside copy — it names the sheet without
   spending a second eyebrow or heading against the one in the other column. The
   11px top margin is the .eyebrow paragraph's own (1em of 11px), so the two land
   on a shared datum across the split. */
.ledger-caption {
  font-family: var(--font-mono); font-size: var(--mono-label-size);
  letter-spacing: var(--mono-label-tracking); text-transform: uppercase;
  color: var(--text-faint); margin: 11px 0 12px;
}
.ledger-row {
  display: grid; grid-template-columns: 2.4fr 0.8fr 1.6fr 1.6fr 1fr;
  padding: 16px 24px; align-items: center; border-bottom: 1px solid var(--line-soft);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-head {
  padding: 12px 24px; border-bottom: 1px solid rgba(10, 31, 68, 0.15); background: var(--parchment);
}
.ledger-head .ledger-col {
  font-family: var(--font-mono); font-size: var(--mono-label-size);
  letter-spacing: var(--mono-label-tracking); text-transform: uppercase; color: var(--text-faint);
}
.ledger-col--right { text-align: right; }
.ledger-tender { font-size: 14px; color: var(--ink); }
.ledger-fit { font-family: var(--font-mono); font-size: var(--mono-data-size); color: var(--ink); }
.ledger-fit--low { color: var(--oxblood); }
.ledger-note { font-size: 13px; color: var(--text-muted); }

/* --- Fit panel ------------------------------------------------------------ */
.fit-panel {
  background: var(--parchment); border-radius: var(--radius-md); padding: 32px;
  box-shadow: var(--shadow-deep); font-family: var(--font-body);
}
.fit-panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.fit-panel-title {
  font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxblood);
}
.fit-panel-meta { font-size: 12px; color: var(--text-faint); }
.fit-panel-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.fit-panel-label {
  font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.fit-panel-note { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.fit-panel-value { font-family: var(--font-display); font-size: 30px; color: var(--ink); }
.fit-panel-value--flag { color: var(--oxblood); }
.fit-panel-verdict { padding-top: 20px; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ink); }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 32px;
}
.card--raised { background: var(--surface-raised); }
.card .card-title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.card .card-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--oxblood); margin-bottom: 16px;
}

/* Segment cards (Who it's for) */
.seg-card { display: block; text-decoration: none; }
.seg-card:hover { border-color: var(--line-strong); }
.seg-card .seg-arrow { color: var(--oxblood); font-family: var(--font-mono); margin-top: 20px; font-size: 13px; }

/* --- Process step mockups ------------------------------------------------- */
.mock {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden; font-family: var(--font-body);
}
.mock-chrome {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--parchment-raised);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock-title {
  margin-left: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
.mock-body { padding: 24px; }

/* Upload / drop-zone mockup */
.dropzone {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
  padding: 28px; text-align: center; background: var(--parchment);
}
.dropzone .dz-icon { font-family: var(--font-display); font-size: 30px; color: var(--ink); }
.file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); margin-top: 10px; font-size: 13px; color: var(--ink);
}
.file-row .file-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* Extracted-criteria list mockup */
.extract-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.extract-row:last-child { border-bottom: 0; }
.extract-label { font-size: 14px; color: var(--ink); }
.extract-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--text-muted);
}
.tag--ok { color: var(--ink); border-color: var(--line-strong); }
.tag--flag { color: var(--oxblood); border-color: var(--oxblood); }

/* Numbered process teaser */
.process-step { border-top: 2px solid var(--ink); padding-top: 16px; }
.process-step .step-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--oxblood);
}
.process-step .step-title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin: 10px 0 8px; }

/* --- Pricing -------------------------------------------------------------- */
.price-card {
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 32px; display: flex; flex-direction: column;
}
.price-card--featured { border-color: var(--ink); box-shadow: var(--shadow-card); }
.price-name { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: var(--ink); }
.price-amount { font-family: var(--font-display); font-size: 40px; color: var(--ink); margin: 12px 0 2px; }
.price-period { font-size: 13px; color: var(--text-faint); }
.price-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oxblood); margin-bottom: 8px;
}
.price-features { list-style: none; padding: 0; margin: 24px 0; }
.price-features li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--text-body); }
.price-features li::before { content: "—"; color: var(--oxblood); margin-right: 10px; }
.price-card .btn { margin-top: auto; }

/* --- Footer --------------------------------------------------------------- */
.footer {
  padding: 56px var(--page-pad-x); border-top: 1px solid var(--line); background: var(--surface-raised);
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-col h4 {
  font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px;
}
.footer-col a { display: block; text-decoration: none; color: var(--text-body); font-size: 14px; padding: 5px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-faint);
}
.footer-bottom .footer-legal { display: flex; gap: 24px; }
.footer-bottom a { text-decoration: none; color: var(--text-faint); }
.footer-bottom a:hover { color: var(--ink); }

/* --- Forms ---------------------------------------------------------------- */
.field { display: block; margin-bottom: 18px; }
.field label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

/* --- Reveal on scroll ----------------------------------------------------- */
.reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 80ms; }
.delay-2 { transition-delay: 160ms; }
.delay-3 { transition-delay: 240ms; }

/* --- Sticky footer CTA ---------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--page-pad-x); background: var(--ink); color: var(--parchment);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
}
.sticky-cta.is-visible { display: flex; }
.sticky-cta .sticky-close { background: none; border: 0; color: var(--text-inverse-muted); cursor: pointer; font-size: 20px; }

/* --- Utilities ------------------------------------------------------------ */
.measure { max-width: var(--measure-lead); }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; }
.mt-6 { margin-top: 32px; } .mt-8 { margin-top: 56px; }
.mb-6 { margin-bottom: 32px; }
.text-center { text-align: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  :root { --page-pad-x: 24px; --text-hero-size: 40px; --text-h1-size: 32px; --text-h2-size: 26px; --text-stat-size: 32px; }
  .band { padding: 56px var(--page-pad-x); }
  .split, .split--checkout, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip .stat-block { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-strip .stat-block:last-child { border-bottom: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .ledger { overflow-x: auto; }
  /* Only full five-column ledgers need the width; the trim fits any column. */
  .ledger:not(.ledger--trim) .ledger-head,
  .ledger:not(.ledger--trim) .ledger-row { min-width: 640px; }
  .nav-links { display: none; }
  .nav-mobile-btn { display: inline-flex; }
  .nav-mobile.is-open {
    display: block; position: absolute; top: var(--nav-height); left: 0; right: 0;
    background: var(--parchment); border-bottom: 1px solid var(--line); padding: 16px var(--page-pad-x);
  }
  .nav-mobile.is-open a, .nav-mobile.is-open .nav-mobile-group-label {
    display: block; padding: 12px 0; text-decoration: none; color: var(--ink); font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-mobile.is-open .nav-mobile-group-label { color: var(--text-faint); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
  .sticky-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (max-width: 640px) {
  /* The full five-column ledger reflows: each row becomes a stacked entry — tender
     and call chip on the opening line, mono-labelled Fit/Capacity/Risk beneath — so
     the verdict never leaves the screen. The nth-child mapping and ::before labels
     are coupled to the 5-cell row order (tender · fit · capacity-note · risk-note ·
     call) used by every full .ledger-row in the HTML; keep that order if you add
     rows. .ledger--trim is exempt — its three columns fit at any width. */
  .ledger:not(.ledger--trim) { overflow-x: visible; }
  .ledger:not(.ledger--trim) .ledger-head { display: none; }
  .ledger:not(.ledger--trim) .ledger-row {
    min-width: 0;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tender call" "fit fit" "capacity capacity" "risk risk";
    gap: 6px 16px; align-items: baseline;
  }
  .ledger:not(.ledger--trim) .ledger-row > .ledger-tender     { grid-area: tender; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(2)      { grid-area: fit; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(3)      { grid-area: capacity; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(4)      { grid-area: risk; }
  .ledger:not(.ledger--trim) .ledger-row > .ledger-col--right { grid-area: call; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(2)::before { content: "Fit"; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(3)::before { content: "Capacity"; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(4)::before { content: "Risk"; }
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(2)::before,
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(3)::before,
  .ledger:not(.ledger--trim) .ledger-row > :nth-child(4)::before {
    display: inline-block; width: 76px;
    font-family: var(--font-mono); font-size: var(--mono-label-size);
    letter-spacing: var(--mono-label-tracking); text-transform: uppercase;
    color: var(--text-faint);
  }

  /* Compact pass: tighten what stays desktop-sized through the 900px step. */
  .card, .price-card, .fit-panel { padding: 24px 20px; }
  .fit-panel-value { font-size: 26px; }
  .price-amount { font-size: 32px; }
  .mock-body { padding: 16px; }
  .dropzone { padding: 20px; }
  .wordmark { font-size: 26px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bottom .footer-legal { flex-wrap: wrap; gap: 12px 20px; }
}