/* ──────────────────────────────────────────────────────────────────────────
   Styles for the public /tools pages, redesigned on the homepage's system
   (landing/index.html, September 2026): warm paper, one deep green,
   Instrument Serif for statements, Geist for everything else, tabular
   figures for money. Light by default, dark when the system asks. Same
   token names and values as the homepage's block, which mirrors
   src/index.css and docs/design/DESIGN-LANGUAGE.md.

   The fonts are the app's own faces, self-hosted from /fonts (Google Fonts,
   SIL OFL 1.1; Archivo's licence is in fonts/ARCHIVO-OFL.txt). Pages preload
   the two faces above the fold; the @font-face declarations live here so the
   HTML stays just meta and content.

   Deliberately narrower than the home page: no chart choreography, no
   story scroller. These pages are read by people mid-task and by crawlers,
   so they load fast and stay quiet.
   ────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-latin.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Wordmark'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-wordmark.woff2') format('woff2'); unicode-range: U+0043, U+0046, U+004F; }

:root {
  color-scheme: light;
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f3f3f1;
  --surface-3: #e9e9e6;
  --text: #16171a;
  --text-2: #4d4e56;
  --muted: #5f6068;
  --border: rgba(22, 23, 28, 0.09);
  --border-strong: rgba(22, 23, 28, 0.16);
  --rule: #16171a;
  --green: #126b33;
  --green-dim: #0f5a2b;
  --green-bg: rgba(21, 128, 61, 0.09);
  --on-green: #ffffff;
  --amber: #934704;
  --amber-bg: rgba(217, 119, 6, 0.10);
  --amber-bar: rgba(217, 119, 6, 0.55);
  --red: #c02626;
  --bar: #16171a;
  --shadow-md: 0 2px 10px rgba(16, 17, 20, 0.06), 0 1px 3px rgba(16, 17, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 17, 20, 0.10), 0 2px 6px rgba(16, 17, 20, 0.05);
  --ease: cubic-bezier(.25, 1, .5, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Kept for compatibility with older selectors and guides/content.css. */
  --font-display: var(--serif);
  --font-body: var(--sans);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --glass: var(--surface);
  --dur-fast: 150ms;
  --dur: 220ms;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0c0d0f;
    --surface: #141518;
    --surface-2: #1a1c20;
    --surface-3: #23252a;
    --text: #ededef;
    --text-2: #a9aab1;
    --muted: #8d8e97;
    --border: rgba(255, 255, 255, 0.075);
    --border-strong: rgba(255, 255, 255, 0.13);
    --rule: #8d8e97;
    --green: #2fd07a;
    --green-dim: #22b566;
    --green-bg: rgba(47, 208, 122, 0.11);
    --on-green: #04200f;
    --amber: #f2a33a;
    --amber-bg: rgba(242, 163, 58, 0.12);
    --amber-bar: rgba(242, 163, 58, 0.6);
    --red: #f26268;
    --bar: #ededef;
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--green); color: var(--on-green); }

/* ── LAYOUT ────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* The tool pages' own measure: calculators read best narrower than the
   homepage's 1240px canvas. */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.num { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--green);
  color: var(--on-green);
  font-weight: 600;
}
.skip-link:focus { top: 12px; outline: none; }

#main:focus { outline: none; }

/* ── TYPE ROLES ────────────────────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: .98;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--green); }
.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede {
  color: var(--text-2);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 46ch;
  text-wrap: pretty;
}
.note { color: var(--muted); font-size: .8125rem; }
.figure { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; line-height: 1; }

/* The small green kicker above headlines. The markup keeps its `//` prefix;
   it renders as part of the label. */
.tag {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-block;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: .98;
  text-wrap: balance;
}
h2 span { color: var(--green); }

/* ── BUTTONS (the app's: sentence case, one green) ─────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { background: var(--green-dim); }
.btn-quiet, .btn-ghost { border-color: var(--border-strong); background: var(--surface); }
.btn-quiet:hover, .btn-ghost:hover { border-color: var(--text-2); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
@media (hover: none) {
  .btn-primary:hover, .btn-quiet:hover, .btn-ghost:hover { transform: none; }
}

/* ── NAV ───────────────────────────────────────────────────────────────── */
/* The homepage's bar: sticky, blurred page behind it, a hairline that is
   simply always there (the tool pages skip the scroll listener). The tool
   pages have no inner wrapper, so the bar itself is the flex row and centers
   its content on the homepage's measure. */
.tool-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* The wordmark: Geist "Freelance" and the Archivo-compressed green "CFO",
   exactly as the homepage sets it. The little logo mark rides along. */
.nav-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-logo img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  align-self: center;
  flex-shrink: 0;
}
.nav-logo span,
.nav-logo b {
  font-family: 'Archivo Wordmark', var(--sans);
  font-stretch: 76%;
  font-weight: 800;
  color: var(--green);
  font-size: 1.06em;
}
/* The guides' and homepage's wordmark shape, if a page uses it bare. */
.wordmark { display: inline-flex; align-items: baseline; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.wordmark b { font-family: 'Archivo Wordmark', var(--sans); font-stretch: 76%; font-weight: 800; color: var(--green); font-size: 1.06em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: .9rem;
  color: var(--text-2);
}
.nav-links a:not(.btn) { transition: color .15s var(--ease); }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links .btn { height: 38px; padding: 0 16px; font-size: .875rem; }
@media (max-width: 820px) {
  .nav-links a:not(.btn) { display: none; }
}

/* ── BREADCRUMB ────────────────────────────────────────────────────────── */
.breadcrumb {
  padding-top: 20px;
  font-size: .8125rem;
  color: var(--muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--border-strong);
}
.breadcrumb a:hover { color: var(--text-2); }
.breadcrumb [aria-current='page'] { color: var(--text-2); }

/* ── PAGE HEAD ─────────────────────────────────────────────────────────── */
.tool-hero { padding: 48px 0 52px; }
@media (min-width: 881px) {
  .tool-hero { max-width: 860px; }
}
.tool-hero h1 {
  font-size: clamp(2.9rem, 5.4vw, 5.4rem);
  margin: 18px 0 22px;
}
.tool-hero h1 span { color: var(--green); }
.tool-hero p {
  max-width: 58ch;
  color: var(--text-2);
  font-size: 1.12rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Calculator page only, desktop only: the headline sets as a wide two-line
   block rather than a narrow four-line stack, so it carries real weight while
   still leaving the tool itself on screen at load. Mobile is unchanged. */
@media (min-width: 881px) {
  .tool-hero--compact { max-width: 780px; padding: 36px 0 40px; }
  .tool-hero--compact h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); margin: 16px 0 16px; }
}

/* ── CALCULATOR LAYOUT ─────────────────────────────────────────────────── */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  /* `start` is what lets the result panel stick: it keeps each column at its
     natural height inside a full-height grid area. */
  align-items: start;
}
.calc-col { min-width: 0; }
.calc-reset { margin-bottom: 10px; font-size: .82rem; text-align: right; }
@media (max-width: 880px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-reset { text-align: left; }
}

/* Desktop only. The result panel rides along while the reader works down the
   inputs; it is bounded by its own grid area, so it can never ride over the
   header above it or the FAQ below it. */
@media (min-width: 881px) {
  .result { position: sticky; top: 88px; }
}

/* ── PANELS ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
@media (min-width: 881px) {
  .panel { padding: 28px; }
}

.panel h2 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 22px;
}

.panel-hint {
  margin: -12px 0 20px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* A second or third section heading inside a single form panel. The comparison
   form has three groups but one surface, so the headings do the dividing
   rather than splitting it into three cards. */
.panel-heading-split {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* ── FORM ──────────────────────────────────────────────────────────────── */
.field + .field { margin-top: 18px; }

.field label {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 7px;
}

.field .hint {
  display: block;
  margin-top: 7px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

.control {
  position: relative;
  display: flex;
  align-items: center;
}

.control .affix {
  position: absolute;
  font-size: .9rem;
  color: var(--muted);
  pointer-events: none;
}
.control .affix-lead { left: 14px; }
.control .affix-trail { right: 14px; }

.field input,
.field select {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--sans);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field select {
  /* Room for the native chevron on every platform. */
  padding-right: 36px;
}

.control-money input { padding-left: 30px; }
.control-pct input { padding-right: 34px; }

.field input:hover,
.field select:hover { border-color: var(--text-2); }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}

/* ── RESULT ────────────────────────────────────────────────────────────── */
.result {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.result-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  margin-bottom: 14px;
}

/* The runway panel reports months, not tax, so it drops the amber label that
   carries the tax semantic. Its health reads off the band line instead. */
.result--neutral .result-label { color: var(--muted); }

.result-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
}

/* A words-and-digits headline ("5.0 months") is far wider than a currency
   figure at the same size, and the tax panel's ramp overflows the column
   between 881px and about 1100px. This is the same gesture, one step down. */
.result-amount--text { font-size: clamp(2.2rem, 5vw, 3.2rem); }

.band[data-band='thin'] { color: var(--red); }
.band[data-band='building'] { color: var(--amber); }
.band[data-band='healthy'] { color: var(--green); }
.band[data-verdict='ahead'] { color: var(--green); }

/* Amber, not red: a contract that comes out behind is a negotiating position,
   not an error state. */
.band[data-verdict='behind'] { color: var(--amber); }

.result-due {
  margin-top: 12px;
  font-size: 1.1rem;
  color: var(--text-2);
}
.result-due strong { color: var(--text); font-weight: 600; }

.result-note {
  margin-top: 6px;
  font-size: .82rem;
  color: var(--muted);
}

.result-rule {
  height: 1px;
  margin: 24px 0 20px;
  background: var(--border);
  border: 0;
}

/* ── BREAKDOWN TABLE ───────────────────────────────────────────────────── */
.breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.breakdown caption {
  text-align: left;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding-bottom: 14px;
}

.breakdown th,
.breakdown td {
  padding: 9px 0;
  text-align: left;
  font-weight: 400;
  color: var(--text-2);
  vertical-align: top;
}

.breakdown td {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  padding-left: 14px;
}

/* One <tbody> per stage of the calculation, each opened by a label in the same
   register as the table caption. */
.breakdown .group-head th {
  padding: 26px 0 10px;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
}
.breakdown tbody:first-of-type .group-head th { padding-top: 2px; }

/* Hairlines separate rows within a group, never across a group boundary. */
.breakdown tr:not(.group-head) + tr:not(.group-head) th,
.breakdown tr:not(.group-head) + tr:not(.group-head) td {
  border-top: 1px solid var(--border);
}

.breakdown .row-total th,
.breakdown .row-total td {
  color: var(--text);
  font-weight: 600;
}
.breakdown tr:not(.group-head) + .row-total th,
.breakdown tr:not(.group-head) + .row-total td {
  border-top-color: var(--border-strong);
}

.breakdown .row-sub th { padding-left: 16px; color: var(--muted); }
.breakdown .row-sub td { color: var(--text-2); }

/* ── SAFE HARBOR ───────────────────────────────────────────────────────── */
/* The second number on the page, and for a lot of readers the one that decides
   what they actually send. Amber, because DESIGN-LANGUAGE section 3 gives amber
   one product semantic and this is squarely it: an estimated-tax set-aside.
   Outlined rather than filled, so it reads a tier below the filled amber
   `.notice` alert and never competes with the green CTA underneath. */
.safe-harbor {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.safe-harbor-head { font-size: .95rem; font-weight: 600; color: var(--text); }
.safe-harbor .figure { color: var(--amber); }
.safe-harbor-note {
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* ── INLINE NOTICE ─────────────────────────────────────────────────────── */
.notice {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--amber-bg);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius-md);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-2);
}
.notice[hidden] { display: none; }

/* ── ADVANCED FIELD DISCLOSURE ─────────────────────────────────────────── */
.advanced {
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.advanced summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  transition: color var(--dur-fast);
}
.advanced summary:hover { color: var(--text); }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after {
  content: '+';
  color: var(--green);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.advanced[open] summary::after { content: '\2212'; }
.advanced-hint { margin: 14px 0 18px; }

/* ── INLINE TEXT BUTTONS ───────────────────────────────────────────────── */
/* These read as links but they act on the page rather than navigating, so the
   markup is a button and the styling brings it back to a link. */
.copy-row {
  margin-top: 20px;
  font-size: .82rem;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.copy-row button,
.calc-reset button {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast);
}
.copy-row button:hover,
.calc-reset button:hover { color: var(--green-dim); }

.copy-status:empty { display: none; }
.copy-status { color: var(--muted); }

/* Visible to a screen reader, never to the eye. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Q4 ALTERNATIVE ────────────────────────────────────────────────────── */
/* Information, not a warning, so it takes the outlined safe-harbor treatment
   rather than the filled amber `.notice`. */
.tip {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.tip[hidden] { display: none; }
.tip-head { font-size: .9rem; font-weight: 600; color: var(--text); }
.tip-note {
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-2);
}
.tip-note strong { color: var(--text); font-weight: 600; }
.tip-note a { color: var(--green); text-underline-offset: 3px; }

/* ── RECOMMENDATION LIST AND EMAIL DRAFT ──────────────────────────────── */
/* The pay-Q4 tool answers in reasons rather than a figure, and the late fee
   tool hands back wording to paste. */
.result-reasons {
  margin-top: 16px;
  padding-left: 1.1em;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-2);
}
.result-reasons li + li { margin-top: 10px; }

.email-draft { margin-top: 20px; }
.email-draft h3 { font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.email-draft pre {
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── EMAIL CAPTURE ─────────────────────────────────────────────────────── */
.capture {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.capture-label {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.capture-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.capture-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--sans);
  font-size: .95rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.capture-row input:hover { border-color: var(--text-2); }
.capture-row input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}
.capture-row .btn { flex: 0 0 auto; }
.capture-row .btn:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}

/* The bot trap. Off screen rather than display:none, which some bots skip. */
.capture-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Empty unless Cloudflare decides it needs the reader to click something. */
.capture-turnstile:not(:empty) { margin-top: 10px; }
.capture-hint {
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}
.capture-status {
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-2);
}
.capture-status:empty { display: none; }
.capture-status[data-tone='ok'] { color: var(--green); }
.capture-status[data-tone='error'] { color: var(--red); }

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px;
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 24%, transparent);
  border-radius: var(--radius-lg);
}
.cta p {
  max-width: 54ch;
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
/* The homepage's question list: hairline rows, a green plus that turns into
   the close mark, no boxes. */
.faq { padding: 88px 0 24px; }
.faq h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  margin-bottom: 26px;
}
.faq-list { max-width: 78ch; border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  color: var(--green);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p {
  margin-top: 0;
  padding: 0 0 20px;
  max-width: 62ch;
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.65;
}

/* ── TOOL INDEX CARDS ──────────────────────────────────────────────────── */
/* `auto-fit`, not `auto-fill`: with two cards in a three-track row, auto-fill
   holds the empty third track open and the row reads as a card that failed to
   load. The two behave identically once the row is full. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding-bottom: 32px;
}

.tool-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  box-shadow: var(--shadow-md);
}
.tool-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.tool-card p {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.6;
}
.tool-card .go {
  display: inline-block;
  margin-top: 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}
@media (hover: none) {
  .tool-card:hover { transform: none; box-shadow: none; }
}

/* Heading over the card grid. Sits below the featured tool, so it is a step
   down from the feature's display size rather than another hero. */
.grid-heading {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin: 64px 0 22px;
}

/* ── FEATURED TOOL ─────────────────────────────────────────────────────── */
/* One tool exists, so it gets the whole width rather than sitting as a lone
   third of a card grid. `.tool-grid` above stays for when there are several. */
.tool-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow-md);
}
.tool-feature h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: .98;
  margin: 16px 0 16px;
}
.tool-feature p {
  max-width: 52ch;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.65;
}
.tool-feature .btn { margin-top: 26px; }

.feature-spec {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.feature-spec h3 {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
  margin-bottom: 16px;
}
.feature-spec ul {
  list-style: none;
  display: grid;
  gap: 11px;
  font-size: .94rem;
  color: var(--text-2);
}
.feature-spec li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  line-height: 1.5;
}
.feature-spec li::before {
  content: '+';
  flex-shrink: 0;
  color: var(--green);
  font-size: .9rem;
}
@media (max-width: 880px) {
  .tool-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 28px;
  }
}

/* ── VALUE ROW ─────────────────────────────────────────────────────────── */
.value-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  padding: 64px 0 8px;
}
.value-item h3 {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
  margin-bottom: 12px;
}
.value-item p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.65;
}

/* ── TOOLS PAGE CTA ────────────────────────────────────────────────────── */
.tools-cta {
  margin: 64px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 36px 40px;
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 24%, transparent);
  border-radius: var(--radius-xl);
}
.tools-cta h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 8px;
}
.tools-cta p {
  max-width: 52ch;
  color: var(--text-2);
  line-height: 1.6;
}
@media (max-width: 880px) {
  .tools-cta { padding: 28px; }
}

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.tool-footer {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding: 28px 0 48px;
}

.disclaimer {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

.freshness { margin-top: 8px; }

/* Source citations. A tax page is YMYL: the links to the primary documents are
   part of the argument, so they read as links rather than as body text. */
.freshness a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.freshness a:hover {
  color: var(--green);
  text-decoration-color: var(--green);
}

.footer-row {
  margin-top: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-2);
}
.footer-row a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}