/* Counterweight site stylesheet.
   Custom properties carry the names of brand/tokens.json. :root is the Paper theme; .theme-graphite
   redefines the same names for dark blocks (the home hero, the closing call to action). Use the 4px
   space-* scale for anything new, and see brand/brand-book.md before adding a component. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --surface: #f3f0e9;
  --surface-raised: #fbf9f4;
  --surface-sunken: #e7e3d9;
  --ink: #15171a;
  --ink-muted: #4a5059;
  --ink-faint: #5c636d;
  --hairline: #cfc9bc;
  --rule: #7a8089;
  --graphite: #262a30;
  --on-graphite: #f1eee7;
  --steel: #6a727c;
  --tint: #d6cdb8;
  --brass: #b8862f;
  --on-brass: #15171a;
  --brass-mark: #a3761f;
  --brass-ink: #7a5512;
  --focus: var(--brass-ink);

  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-none: 0;
  --radius-sm: 2px;
  --stroke-hairline: 1px;
  --stroke-rule: 2px;
  --stroke-beam: 4px;

  --gutter: clamp(16px, 4vw, 48px);
  --section-space: clamp(64px, 8vw, 96px);
}

.theme-graphite {
  --surface: #15171a;
  --surface-raised: #1e2125;
  --ink: #f1eee7;
  --ink-muted: #a7aeb7;
  --ink-faint: #8a929c;
  --hairline: #30353b;
  --rule: #6b727b;
  --brass: #d4a24c;
  --brass-ink: #e3b868;
  --focus: var(--brass-ink);
  color: var(--ink);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
}

a:focus-visible { outline: var(--stroke-rule) solid var(--focus); outline-offset: 2px; }

h1, h2, h3, p, dl, dd { margin: 0; }
strong { font-weight: 650; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; }
.section { padding-top: var(--section-space); }
.section--last { padding-bottom: var(--section-space); }
.beam { height: var(--stroke-beam); background: var(--ink); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--loose { gap: 20px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px 72px; }

/* Type */
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.display-xl { font-size: clamp(42px, 6vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-size: 22px; line-height: 28px; font-weight: 650; }
.lead { font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.body { font-size: 16px; line-height: 26px; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 20px; }
.note { font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.mono { font-family: var(--font-mono); }
.figure { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 500; }
.text-link { color: var(--ink); text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: var(--stroke-rule); }

/* Buttons */
.btn { display: inline-block; font-weight: 600; font-size: 16px; line-height: 20px; border-radius: var(--radius-sm); text-decoration: none; }
.btn--primary { background: var(--brass); color: var(--on-brass); padding: 14px 24px; }
.btn--secondary { border: var(--stroke-hairline) solid var(--rule); color: var(--ink); padding: 13px 23px; }
.btn--compact { font-size: 15px; padding: 11px 19px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }

/* Header */
.site-header--paper { border-bottom: var(--stroke-hairline) solid var(--hairline); }
.site-header.theme-graphite { background: var(--surface); }
.site-bar { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-bar__logo { display: block; line-height: 0; }
.site-bar__logo img { height: 32px; width: auto; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; line-height: 20px; }
.site-nav a:not(.btn) { color: var(--ink); text-decoration: none; }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: end; }
.hero--home { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 8vw, 112px); gap: clamp(40px, 5vw, 72px); }
.hero--page { padding-top: clamp(48px, 7vw, 96px); gap: 40px 72px; }
.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.hero__copy .lead { max-width: 34em; }

.case { background: var(--surface-raised); border: var(--stroke-hairline) solid var(--hairline); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: var(--space-4); }
.case__figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-family: var(--font-mono); }
.case__was { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; font-weight: 500; color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.case__now { font-size: clamp(40px, 5vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--brass-ink); }
.case__unit { font-size: 16px; line-height: 26px; color: var(--ink-muted); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--stroke-beam) solid var(--ink); }
.facts > div { padding: 20px 16px 0 0; }
.facts > div:last-child { padding-right: 0; }
.facts dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.facts dd { margin-top: var(--space-1); font-family: var(--font-mono); font-size: clamp(20px, 2.4vw, 28px); line-height: 32px; font-weight: 500; }

/* Section openers: the beam, then the eyebrow 32px below it */
.intro { padding-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.split--opener { padding-top: var(--space-8); }
.label { padding-top: var(--space-8); }

/* Cards */
.cards { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.card { background: var(--surface-raised); border: var(--stroke-hairline) solid var(--hairline); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.card__source { margin-top: auto; padding-top: var(--space-2); }

/* Numbered steps (home) */
.steps { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-top: var(--stroke-hairline) solid var(--hairline); }
.steps > li { padding: 24px 24px 32px 0; display: flex; flex-direction: column; gap: var(--space-3); border-bottom: var(--stroke-hairline) solid var(--hairline); }
.steps__num { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.steps__meta { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.steps__link { font-weight: 600; }

/* Definition grid (where the money goes) */
.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 32px; }
.def-grid > div { padding: var(--space-4) 0; border-top: var(--stroke-hairline) solid var(--hairline); }
.def-grid dt { font-weight: 650; font-size: 16px; line-height: 24px; }
.def-grid dd { margin-top: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Relief block (how we charge) */
.relief { background: var(--tint); color: var(--on-brass); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px 64px; align-items: start; }
.relief .eyebrow { color: inherit; }

/* Ruled lists (Teardown) */
.ruled { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; }
.ruled > li { padding: var(--space-4) 0; border-top: var(--stroke-hairline) solid var(--hairline); font-size: 16px; line-height: 26px; }
.ruled > li:last-child { border-bottom: var(--stroke-hairline) solid var(--hairline); }
.ruled--numbered > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2); }
.ruled--numbered > li > span:first-child { font-family: var(--font-mono); color: var(--ink-faint); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 72px; }

/* Ledger table */
.table-wrap { margin-top: var(--space-8); overflow-x: auto; background: var(--surface-raised); border: var(--stroke-hairline) solid var(--hairline); }
.ledger { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.ledger thead tr { background: var(--surface-sunken); text-align: left; }
.ledger th, .ledger td { padding: 12px 16px; }
.ledger thead th { font-weight: 650; }
.ledger tbody { font-family: var(--font-mono); }
.ledger tbody tr { border-top: var(--stroke-hairline) solid var(--hairline); }
.ledger tbody th { text-align: left; font-family: var(--font-sans); font-weight: 400; }
.ledger .num { text-align: right; }
.ledger .text { font-family: var(--font-sans); }
.ledger .saving { color: var(--brass-ink); font-weight: 500; }
.ledger .total { border-top: var(--stroke-beam) solid var(--ink); font-weight: 500; }
.ledger .total th, .ledger .total td { padding: 14px 16px; }
.ledger .total th { font-weight: 650; }
.table-note { margin-top: var(--space-3); }

/* Handover table (approach): a scroll-free table on wide screens, stacked rows on phones */
.table-wrap--stack { overflow-x: visible; }
.handover { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.handover thead tr { background: var(--surface-sunken); }
.handover th, .handover td { padding: 12px 16px; text-align: left; vertical-align: top; }
.handover thead th { font-weight: 650; }
.handover tbody tr { border-top: var(--stroke-hairline) solid var(--hairline); }
.handover tbody th { font-weight: 650; }
@media (min-width: 761px) { .handover tbody th { white-space: nowrap; } }
@media (max-width: 760px) {
  .handover thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .handover, .handover tbody, .handover tr, .handover th, .handover td { display: block; }
  .handover tbody tr { padding: var(--space-2) 0 var(--space-4); }
  .handover tbody tr:first-child { border-top: 0; }
  .handover tbody th { padding-bottom: var(--space-1); font-size: 16px; line-height: 24px; }
  .handover td { padding-top: var(--space-2); padding-bottom: 0; }
  .handover td::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
}

/* Gate flow (approach): ink and steel only, no brass. A wide drawing from 900px, a tall one below. */
.flow { margin-top: var(--space-8); }
.flow svg { display: block; width: 100%; height: auto; }
.flow .flow__wide { display: none; }
.flow .flow__narrow { max-width: 360px; }
@media (min-width: 900px) { .flow .flow__wide { display: block; } .flow .flow__narrow { display: none; } }
.flow-box { fill: var(--surface-raised); stroke: var(--hairline); stroke-width: 1; }
.flow-box--end { stroke: var(--ink); stroke-width: 2; }
.flow-gate { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 2; }
.flow-line { fill: none; stroke: var(--steel); stroke-width: 2; }
.flow-head { fill: var(--steel); }
.flow text { font-family: var(--font-sans); font-size: 15px; fill: var(--ink); }
.flow .flow-strong { font-weight: 650; }
.flow .flow-label { font-size: 13px; font-weight: 600; fill: var(--ink-muted); }

/* People test and the two-answers block (approach) */
.people-test__source { display: block; margin-top: var(--space-2); }
.people-test__term { margin-top: var(--space-6); font-weight: 600; }
.answers { margin-top: var(--space-6); }
.answers__beam { margin-top: var(--space-12); }
.approach-link { margin-top: var(--space-6); }
.facts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }

/* Timeline (the ten working days) */
.timeline { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-6); }
.timeline > li { display: flex; flex-direction: column; gap: var(--space-2); }
.timeline__when { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.timeline__bar { height: var(--stroke-beam); background: var(--steel); }
.timeline__bar--end { background: var(--brass-mark); }
.timeline h3 { margin-top: var(--space-1); font-size: 18px; line-height: 24px; font-weight: 650; }
.timeline p { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Questions */
.faq-grid { gap: 32px 72px; }
.faq-grid h2 { margin-top: var(--space-8); }
.faq { display: flex; flex-direction: column; }
.faq > div { padding: 20px 0; border-top: var(--stroke-hairline) solid var(--hairline); }
.faq > div:last-child { border-bottom: var(--stroke-hairline) solid var(--hairline); }
.faq dt { font-size: 18px; line-height: 24px; font-weight: 650; }
.faq dd { margin-top: var(--space-2); font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Closing call to action, a graphite band */
.cta { background: var(--graphite); }
.cta__inner { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-8); }
.cta__copy { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.cta h2 { max-width: 720px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; }
.cta__actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.cta__actions .text-link { font-size: 15px; line-height: 20px; }
.cta .btn--secondary { border-color: var(--ink); }

/* Footer */
.site-footer { padding-top: 40px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); }
.site-footer img { height: 28px; width: auto; }
.site-footer p { max-width: 560px; }
.site-footer nav { display: flex; gap: var(--space-6); font-size: 14px; line-height: 20px; }

/* Long-form pages (privacy, terms) */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--space-12); font-size: 22px; line-height: 28px; font-weight: 650; }
.prose p, .prose ul { margin: var(--space-4) 0 0; font-size: 16px; line-height: 26px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: var(--stroke-rule); }

/* Sample estimate: the Price your exit skill's report.html, written by scripts/build_sample.py. Classes carry a
   report- prefix and the styles live here because the CSP blocks inline styles; mirrors the skill's own stylesheet. */
.sample-note { max-width: 760px; }
.report { max-width: 880px; margin: var(--space-8) auto 0; padding: 48px 24px 96px; box-sizing: border-box; border: var(--stroke-hairline) solid var(--hairline); font-size: 16px; line-height: 26px; color: var(--ink); }
.report-logo { display: block; height: 40px; width: auto; margin-bottom: 48px; }
.report .report-eyebrow { margin: 32px 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.report h1 { margin: 0 0 16px; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.01em; }
.report h2 { margin: 32px 0 16px; font-size: 30px; line-height: 36px; font-weight: 650; letter-spacing: -0.005em; }
.report h3 { margin: 32px 0 12px; font-size: 22px; line-height: 28px; font-weight: 650; }
.report p { margin: 0 0 16px; max-width: 70ch; }
.report .report-lead { font-size: 20px; line-height: 30px; }
.report .report-meta { font-size: 14px; line-height: 20px; color: var(--ink-faint); max-width: 70ch; }
.report-beam { height: var(--stroke-beam); margin-top: 64px; background: var(--ink); }
.report-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; border: var(--stroke-hairline) solid var(--hairline); background: var(--surface-raised); }
.report-stat { padding: 24px; border-right: var(--stroke-hairline) solid var(--hairline); }
.report-stat:last-child { border-right: 0; }
.report-l { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.report-v { margin-top: 8px; font-family: var(--font-mono); font-size: clamp(20px, 2.3vw, 28px); line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; }
.report-stat.report-brass { background: var(--brass); }
.report-stat.report-brass .report-l, .report-stat.report-brass .report-v { color: var(--on-brass); }
.report-tw { margin: 16px 0 24px; overflow-x: auto; border: var(--stroke-hairline) solid var(--hairline); background: var(--surface-raised); }
.report table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.report th { background: var(--surface-sunken); text-align: left; font-weight: 600; color: var(--ink-muted); }
.report th, .report td { padding: 12px; border-bottom: var(--stroke-hairline) solid var(--hairline); vertical-align: top; }
.report tr:last-child td { border-bottom: 0; }
.report .report-n { text-align: right; white-space: nowrap; }
.report td.report-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.report td.report-n b { font-weight: 500; }
.report-save { color: var(--brass-ink); }
.report ul { margin: 0 0 16px; padding-left: 20px; max-width: 70ch; }
.report li { margin-bottom: 8px; }
.report-fig { font-family: var(--font-mono); font-weight: 500; }
.report-chart { margin: 24px 0; }
.report-row { display: grid; grid-template-columns: 200px 1fr 96px; align-items: center; gap: 12px; margin: 8px 0; font-size: 14px; }
.report-track { display: block; width: 100%; height: 20px; }
.report-bar.report-graphite { fill: var(--graphite); }
.report-bar.report-brass { fill: var(--brass-mark); }
.report-val { font-family: var(--font-mono); text-align: right; }
.report-cta { display: inline-block; margin: 8px 0 32px; padding: 12px 24px; border: var(--stroke-hairline) solid var(--rule); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 16px; line-height: 24px; font-weight: 600; }
.report-cta:hover { background: var(--surface-sunken); }
@media (max-width: 640px) {
  .report { padding: 24px 16px 64px; }
  .report h1 { font-size: 30px; line-height: 36px; }
  .report h2 { font-size: 24px; line-height: 30px; }
  .report-stats { grid-template-columns: 1fr; }
  .report-stat { border-right: 0; border-bottom: var(--stroke-hairline) solid var(--hairline); }
  .report-row { grid-template-columns: 1fr 72px; }
  .report-lab { grid-column: 1 / 3; }
}