/* Hallmark · shape: custom (the hero is the tool: a free invoice, quotation and receipt generator that makes a real PDF) · genre: modern-minimal · theme: brand (Clear Harbour, locked)
 * paper: #F6F4EF warm white (brand) · accent: #B7491F terracotta (brand) · display: Inter 600 · body: Inter · hero: h1 and lead over a two-column generator, form left, the live preview and Download right (stacked on phones) · nav: edge-aligned wordmark, four links, language, log in, outline trial · footer: deep-ocean mast, four short columns · signature: the visitor's own document drawn live and downloaded as a PDF, worked out in sen, then "Your books" fed from it: plain sentences, P&L, what you have and owe, and the journal, all in integer sen
 * axes: light/grotesk-sans/warm · posture: product · contrast: pass · fold: pass · v3.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R3 V3 · weakest: V (no real screenshots yet); the card is drawn from the app's real number formats and labelled "Sample, not saved" */
/* waive 65: warm white paper with a terracotta accent is the owner-approved Clear Harbour brand (docs/DESIGN-SYSTEM-PROPOSAL.md), not a default */
/* waive 1: Inter is the locked brand face (Clear Harbour: one UI family), not a reflex pick */
/* waive 42: four short footer columns are the owner-approved footer (website spec 2.3) */
/* waive 58: headline, lead and section copy are owner-approved (docs/superpowers/plans/2026-11-14-home-page-interactive-design.md section 4), used verbatim; FAQ answers sit in closed <details> */
/* waive 44b-copy: headline and lead are owner-approved copy (home page v3 spec, section 4), used verbatim */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 68px; --measure: 680px; --bar-h: 76px; }

/* ---------------------------------------------------------------- shared */
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); }
.skip:focus-visible { top: var(--space-md); }
section { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
section:first-of-type { border-top: 0; }
h2 { font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); line-height: 1.15; }
h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
figure { margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-card); font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn-accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-accent:hover { background: color-mix(in oklab, var(--color-accent) 88%, black); }
.btn-accent:active { background: color-mix(in oklab, var(--color-accent) 78%, black); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); min-height: 40px; padding: 0 var(--space-md); }
.btn-outline:hover { background: var(--color-primary-tint); }
.btn-outline:active { background: color-mix(in oklab, var(--color-primary-tint) 80%, var(--color-primary)); }
.link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.link:hover { text-decoration-color: currentColor; }
.btn:focus-visible, .link:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.micro { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }

/* text buttons inside the try-out: Add, Remove, Start again */
.tbtn { min-height: 44px; min-width: 44px; padding: 0 var(--space-2xs); background: transparent; border: 0; border-radius: var(--radius-card); color: var(--color-primary); font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent); text-underline-offset: 0.16em; cursor: pointer; justify-self: start; }
.tbtn:hover { text-decoration-color: currentColor; }
.tbtn:active { color: var(--color-primary-hover); }
.tbtn:disabled { color: var(--color-muted); text-decoration: none; cursor: not-allowed; }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.site-head .container { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); }
.brand svg { width: 32px; height: 32px; }
.nav { display: flex; gap: var(--space-lg); margin-right: auto; }
.nav a { text-decoration: none; color: var(--color-ink); padding-block: var(--space-xs); }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; }
.head-actions { display: flex; align-items: center; gap: var(--space-md); }
.lang { display: inline-flex; border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.lang a, .lang span { padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); text-decoration: none; color: var(--color-muted); min-width: 40px; text-align: center; }
.lang [aria-current="true"] { color: var(--color-ink); font-weight: 600; background: var(--color-paper-3); }
.head-actions .login { text-decoration: none; color: var(--color-ink); }
.head-actions .login:hover { text-decoration: underline; }
.menu-toggle { display: none; }
.nav-extra { display: none; }

/* ---------------------------------------------------------------- hero: the quick generator */
.hero { padding-block: var(--space-xl) var(--section-gap-s); }
.hero h1 { font-size: clamp(2.25rem, 2.4vw + 1.25rem, 3.5rem); line-height: 1.05; max-width: 20ch; }
.hero .lead { margin-top: var(--space-sm); color: var(--color-muted); }
.privacy { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.ph { color: var(--color-muted); }
.state { white-space: nowrap; font-size: var(--text-sm); font-weight: 600; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink); }
.state.paid { background: var(--color-success-tint); color: var(--color-success); }
.state.part { background: var(--color-warning-tint); color: var(--color-warning-strong); }

.gen { margin-top: var(--space-xl); }
.js .gen:not(.on) { visibility: hidden; min-height: 40rem; }
.gen-static { display: grid; gap: var(--space-lg); max-width: 40rem; }
.gen-types { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.gen-types li { padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); font-weight: 600; }
.gen-types li:first-child { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary); }
.gen-nojs { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.gen-grid { display: grid; gap: var(--space-xl); }
.gen-form, .gen-side { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.gen-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gen-form legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.lines-set > legend { font-size: var(--text-lg); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; align-content: start; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.hint { font-size: var(--text-sm); color: var(--color-muted); }
.err { font-size: var(--text-sm); color: var(--color-error); }
.gen-form input:not([type="radio"]):not([type="checkbox"]), .gen-form textarea, .gen-form select, .spent input { width: 100%; min-height: 48px; padding: var(--space-xs) var(--space-sm); font-size: max(16px, var(--text-md)); color: var(--color-ink); background: var(--color-paper-2); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); scroll-margin-top: calc(var(--nav-h) + 72px); scroll-margin-bottom: calc(var(--bar-h) + var(--space-md)); }
.gen-form textarea { resize: vertical; line-height: 1.45; }
.gen-form input::placeholder, .gen-form textarea::placeholder { color: var(--color-muted); opacity: 1; }
.gen-form input:hover, .gen-form textarea:hover, .gen-form select:hover, .spent input:hover { border-color: var(--color-ink-2); }
.gen-form :is(input, textarea, select):focus-visible, .spent input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-focus); }
.gen-form [aria-invalid="true"], .spent [aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }

/* segmented choices: document type, document language, SST rate (native radios, so arrow keys work) */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg > legend { flex-basis: 100%; }
.seg-opt { position: relative; flex: 1 1 0; min-width: max-content; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-2); font-weight: 600; color: var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.seg-opt:hover span { border-color: var(--color-primary); }
.seg-opt input:checked + span { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg-lang { align-items: center; }
.seg-lang .seg-opt { flex: 0 0 auto; }
.seg-lang .hint { flex-basis: 100%; }

.grp { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.grp + .grp { border-top: 0; }
.grp summary { min-height: 48px; display: flex; align-items: center; padding: var(--space-xs) var(--space-xl) var(--space-xs) 0; cursor: pointer; font-weight: 600; list-style: none; position: relative; }
.grp summary::-webkit-details-marker { display: none; }
.grp summary::after { content: "+"; position: absolute; right: var(--space-2xs); font-weight: 400; color: var(--color-muted); }
.grp[open] summary::after { content: "\2212"; }
.grp summary:hover { color: var(--color-primary); }
.grp-body { display: grid; gap: var(--space-md); padding-bottom: var(--space-lg); }
.pair { display: grid; gap: var(--space-md); }
.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; cursor: pointer; font-weight: 600; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--color-primary); }
.remember { display: grid; gap: var(--space-2xs); justify-items: start; }
.sst-on { display: grid; gap: var(--space-md); }

.lns { display: grid; gap: var(--space-md); }
.ln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.ln .f-desc, .ln-foot { grid-column: 1 / -1; }
.ln + .ln { border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.ln-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 44px; }
.ln-amt { font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }
.lines-set > .tbtn { margin-top: var(--space-xs); }
.paid-row { display: grid; gap: var(--space-sm); }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); align-self: end; }
.quick button { min-height: 48px; padding: 0 var(--space-sm); background: var(--color-paper-2); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-card); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.quick button:hover { background: var(--color-primary-tint); }
.quick button:active { background: color-mix(in oklab, var(--color-primary-tint) 80%, var(--color-primary)); }
.quick button[aria-pressed="true"] { background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-primary); }

/* sticky total, phones only: keeps the number in sight while typing (a plain block, no transform) */
.gen-bar { display: none; }

/* the preview: a simplified picture of the PDF, not the PDF */
.pv { display: grid; gap: var(--space-xs); container-type: inline-size; }
.pv-cap { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.tag { justify-self: start; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-card); padding: 0 var(--space-xs); }
.pv-page { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); line-height: 1.4; min-height: 22rem; align-content: start; }
.pv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.pv-biz { display: grid; gap: var(--space-3xs); align-content: start; min-width: 0; max-width: 60%; }
.pv-biz strong { font-size: var(--text-md); overflow-wrap: anywhere; }
.pv-addr { white-space: pre-line; overflow-wrap: anywhere; }
.pv-meta { display: grid; gap: var(--space-2xs); justify-items: end; align-content: start; text-align: right; margin-left: auto; }
.pv-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); letter-spacing: 0.02em; }
.pv-dl, .pv-tot { margin: 0; display: grid; gap: var(--space-3xs); }
.pv-dl div, .pv-tot div { display: flex; justify-content: space-between; gap: var(--space-md); }
.pv-dl dt, .pv-tot dt { color: var(--color-muted); }
.pv-dl dd, .pv-tot dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-to { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); }
.pv-to > div { display: grid; gap: var(--space-3xs); min-width: 0; }
.pv-to strong { overflow-wrap: anywhere; }
.pv-lab { font-weight: 600; color: var(--color-muted); }
.pv-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pv-lines th { background: var(--color-primary-tint); font-weight: 600; text-align: left; padding: var(--space-2xs) var(--space-xs); }
.pv-lines td { padding: var(--space-xs); border-bottom: 1px solid var(--color-rule); vertical-align: top; overflow-wrap: anywhere; }
.pv-lines .n { text-align: right; white-space: nowrap; }
.pv-lines .c-n { width: 1.5rem; color: var(--color-muted); }
.pv-q { display: none; color: var(--color-muted); }
.pv-off td { color: var(--color-muted); }
.pv-tot { justify-self: end; width: min(100%, 17rem); }
.pv-grand { padding-top: var(--space-2xs); border-top: 1px solid var(--color-rule-strong); font-weight: 700; font-size: var(--text-md); }
.pv-grand dt, .pv-b dt { color: var(--color-ink); }
.pv-b { font-weight: 600; }
.pv-note { color: var(--color-muted); text-align: right; }
.pv-notes { display: grid; gap: var(--space-3xs); white-space: pre-line; overflow-wrap: anywhere; }
.pv-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding-top: var(--space-xl); }
.pv-sign span { border-top: 1px solid var(--color-rule-strong); padding-top: var(--space-2xs); color: var(--color-muted); }
.pv-foot { margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); text-align: center; color: var(--color-muted); }
@container (max-width: 30rem) {
  .pv-lines .c-wide { display: none; }
  .pv-q { display: block; }
  .pv-biz { max-width: none; }
  .pv-page { padding: var(--space-md); }
}

.gen-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.gen-links:not(:has(a:not([hidden]))) { display: none; }
.gen-actions { display: grid; gap: var(--space-sm); justify-items: start; }
.gen-dl { min-width: 14rem; }
.gen-dl.btn-outline { min-height: 48px; }
.gen-summary { color: var(--color-error); font-weight: 600; }
.gen-msg { color: var(--color-ink); max-width: 52ch; }
.spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); }
.busy .spin { display: inline-block; animation: spin 0.8s linear infinite; }
.btn:disabled, .btn:disabled:hover { cursor: progress; background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-rule-strong); }
@keyframes spin { to { transform: rotate(360deg); } }
.honesty { display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.panel { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.panel h2 { font-size: var(--text-title); line-height: 1.25; }
.panel ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2xs); }
.panel .micro { margin-top: 0; }
.panel-big { font-weight: 600; }

/* phone bottom bar: one accent button while no other is on screen */
.bar { display: none; }

/* ---------------------------------------------------------------- your books (its own section, fed by the generator on the home page) */
.books > * { min-width: 0; }
.books { display: grid; gap: var(--space-lg); min-width: 0; max-width: 64rem; }
.books-other { color: var(--color-muted); max-width: var(--measure); }
.books-body { display: grid; gap: var(--space-lg); min-width: 0; }
.spent { display: none; max-width: 22rem; }
.js .books.live .spent { display: grid; }
.books .tag { margin-top: calc(var(--space-md) * -1); }
.books-empty { color: var(--color-muted); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: ev; max-width: var(--measure); }
.events li { counter-increment: ev; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.events li::before { content: counter(ev); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); }
.stmts { display: grid; gap: var(--space-lg); }
.stmt { width: 100%; border-collapse: collapse; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.stmt caption { text-align: left; font-weight: 600; padding-bottom: var(--space-xs); }
.stmt caption span, .entry caption span { font-weight: 400; color: var(--color-muted); }
.stmt th, .stmt td { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); vertical-align: top; }
.stmt tr:first-child > * { border-top: 0; }
.stmt th { text-align: left; font-weight: 400; }
.stmt td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stmt .sum > * { font-weight: 600; border-top-color: var(--color-rule-strong); }
.term { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.check, .neg { margin-top: var(--space-sm); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.check { color: var(--color-success); font-weight: 600; }
.neg { color: var(--color-ink); }
.journal { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.journal summary { min-height: 44px; display: flex; align-items: center; padding: var(--space-xs) var(--space-xl) var(--space-xs) 0; cursor: pointer; font-weight: 600; color: var(--color-primary); list-style: none; position: relative; }
.journal summary::-webkit-details-marker { display: none; }
.journal summary::after { content: "+"; position: absolute; right: 0; font-weight: 400; color: var(--color-muted); }
.journal[open] summary::after { content: "\2212"; }
.journal summary:hover { text-decoration: underline; }
.journal .micro { margin-top: 0; }
.entries { display: grid; gap: var(--space-lg); padding: var(--space-md) 0 var(--space-lg); }
.entry { width: 100%; border-collapse: collapse; background: var(--color-paper-2); font-variant-numeric: tabular-nums; }
.entry caption { text-align: left; font-weight: 600; padding-bottom: var(--space-xs); }
.entry th, .entry td { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); text-align: left; overflow-wrap: break-word; }
.entry thead th { font-size: var(--text-sm); font-weight: 600; }
.entry .dr, .entry .cr, .entry .tdr, .entry .tcr, .entry thead th + th { text-align: right; white-space: nowrap; width: 1%; }
.entry tfoot > tr > * { font-weight: 600; }

/* ---------------------------------------------------------------- also, one line */
.also-sec { padding-block: var(--space-xl); }
.also-line { color: var(--color-muted); max-width: 70ch; }

/* ---------------------------------------------------------------- what would I pay? */
.pick { display: none; margin-top: var(--space-lg); }
.js .pick { display: block; }
.pick fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick legend { padding: 0; margin-bottom: var(--space-sm); font-weight: 600; }
.radios { display: grid; gap: var(--space-xs); }
.radio { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-xs) var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); cursor: pointer; }
.radio:hover { border-color: var(--color-primary); }
.radio:has(:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.radio:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.radio input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); }
.radio input:focus-visible { outline: 0; }
.pick-result { margin-top: var(--space-md); font-weight: 600; }
.prices { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.price { padding: var(--space-lg); border-radius: var(--radius-card); }
.price + .price { border-left: 1px solid var(--color-rule); }
.price.mine { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.price-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-weight: 600; }
.for-you { font-size: var(--text-xs); font-weight: 600; padding: 0 var(--space-xs); border-radius: var(--radius-card); background: var(--color-primary-tint); color: var(--color-primary); opacity: 0; visibility: hidden; transition: opacity var(--dur-micro) var(--ease-out), visibility 0s linear var(--dur-micro); }
.price.mine .for-you { opacity: 1; visibility: visible; transition: opacity var(--dur-micro) var(--ease-out); }
.price-amount { font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: var(--space-xs); letter-spacing: -0.02em; }
.price-amount span { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); letter-spacing: 0; white-space: nowrap; }
.price-what { color: var(--color-muted); margin-top: var(--space-xs); }
.price-note { margin-top: var(--space-lg); color: var(--color-muted); max-width: 70ch; }

/* ---------------------------------------------------------------- questions */
.faq { margin-top: var(--space-xl); max-width: var(--measure); border-top: 1px solid var(--color-rule); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { min-height: 44px; padding: var(--space-md) var(--space-xl) var(--space-md) 0; cursor: pointer; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: var(--space-md); font-weight: 400; color: var(--color-muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--color-primary); }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-muted); }

/* ---------------------------------------------------------------- final band */
.band { background: var(--color-band); color: var(--color-band-ink); text-align: center; border-top: 0; }
.band h2 { margin-inline: auto; }
.band p { color: var(--color-band-muted); margin: var(--space-sm) auto 0; max-width: 48ch; }
.band .hero-actions { justify-content: center; }
.band .link { color: var(--color-band-ink); text-decoration-color: color-mix(in oklab, var(--color-band-ink) 50%, transparent); }
.band :focus-visible { outline-color: var(--color-band-ink); }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--color-shell); color: var(--color-shell-ink); padding-block: var(--space-2xl) var(--space-xl); }
.foot-cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(min-content, 1fr)); gap: var(--space-xl); }
.site-foot h2 { font-size: var(--text-md); color: var(--color-shell-strong); margin-bottom: var(--space-sm); max-width: none; letter-spacing: 0; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.site-foot a { color: var(--color-shell-ink); text-decoration: none; }
.site-foot a:hover { color: var(--color-shell-strong); text-decoration: underline; }
.site-foot :focus-visible { outline-color: var(--color-shell-strong); }
.site-foot .brand { color: var(--color-shell-strong); }
.nowrap { white-space: nowrap; }
.foot-tag { margin-top: var(--space-sm); max-width: 32ch; }
.foot-base { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-shell-ink) 25%, transparent); display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.foot-base .meta { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 900px) {
  .gen-grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
  .gen-side { position: sticky; top: calc(var(--nav-h) + var(--space-md)); }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stmts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .entries { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
  .paid-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  .quick { margin-top: calc(var(--text-sm) * 1.55 + var(--space-2xs)); }
  .radios { grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 899.98px) {
  .gen-bar { display: flex; align-items: center; gap: var(--space-sm); position: sticky; top: var(--nav-h); z-index: var(--z-sticky); margin-inline: calc(var(--gutter) * -1); padding: var(--space-xs) var(--gutter); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); font-variant-numeric: tabular-nums; }
  .gen-bar strong { margin-right: auto; font-size: var(--text-lg); white-space: nowrap; }
}
@media (max-width: 60rem) {
  .nav, .head-actions .login, .head-actions .btn-outline { display: none; }
  .menu-toggle { display: inline-flex; margin-left: auto; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink); cursor: pointer; }
  .site-head[data-open] .nav { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--color-paper); padding: var(--space-md) var(--gutter) var(--space-lg); border-bottom: 1px solid var(--color-rule); gap: var(--space-xs); }
  .site-head[data-open] .nav a { min-height: 44px; display: flex; align-items: center; }
  .head-actions { margin-left: auto; }
  .lang a, .lang span { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nav-extra { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
  .nav-extra .btn-outline { width: 100%; min-height: 48px; color: var(--color-primary); justify-content: center; }
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-rule); }
  .price:nth-child(4) { border-top: 1px solid var(--color-rule); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .hero { padding-top: var(--space-lg); }
  .hero-actions .btn-accent, .gen-dl, .panel .btn { width: 100%; }
  .gen-actions, .panel { justify-items: stretch; }
  .panel { padding: var(--space-md); }
  .prices { grid-template-columns: minmax(0, 1fr); }
  .price, .price + .price { border-left: 0; border-top: 1px solid var(--color-rule); }
  .price:first-child { border-top: 0; }
  .site-foot .nowrap { white-space: normal; }
  .entry { font-size: var(--text-sm); }
  .entry th, .entry td { padding: var(--space-xs); }
  .stmt th, .stmt td { padding-inline: var(--space-sm); }
  .js body { padding-bottom: var(--bar-h); }
  .js .bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: 1px solid var(--color-rule); transform: translateY(100%); visibility: hidden; transition: transform 200ms var(--ease-out), visibility 0s linear 200ms; }
  .bar .btn { width: 100%; }
  .js .bar.show { transform: none; visibility: visible; transition: transform 200ms var(--ease-out); }
  .js .site-head[data-open] ~ .bar { transform: translateY(100%); visibility: hidden; }
}
@media (max-width: 340px) {
  .entry th, .entry td, .stmt th, .stmt td { padding: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .js .bar, .js .bar.show, .js .site-head[data-open] ~ .bar { transform: none; transition: none; }
  .for-you, .price.mine .for-you { transition: none; }
}
@media (scripting: none) { .menu-toggle { display: none; } }
@media (max-width: 60rem) and (scripting: none) { .nav { display: flex; flex-direction: column; position: static; } .site-head .container { flex-wrap: wrap; } }
/* the closing band's button goes quiet while the after-download panel holds the accent */
.band .btn-outline { color: var(--color-band-ink); border-color: var(--color-band-ink); min-height: 48px; padding: 0 var(--space-lg); }
.band .btn-outline:hover { background: color-mix(in oklab, var(--color-band-ink) 12%, transparent); }
/* reduced motion: the spinner is replaced by its words */
@media (prefers-reduced-motion: reduce) { .busy .spin { display: none; } }
/* "Print or save as PDF instead": only the preview is printed */
@media print {
  body * { visibility: hidden; }
  .pv-page, .pv-page * { visibility: visible; }
  .pv-page { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
}
/* ---------------------------------------------------------------- generator landing pages */
.how-grid { display: grid; gap: var(--space-xl); }
.steps, .what { margin: var(--space-lg) 0 0; padding-left: 1.4rem; display: grid; gap: var(--space-xs); max-width: var(--measure); }
.steps li::marker { font-weight: 600; color: var(--color-primary); }
.cross { margin-top: var(--space-xl); color: var(--color-muted); }
.stmt .owe-h > th { font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); padding-bottom: 0; border-top-color: var(--color-rule-strong); }
@media (min-width: 900px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }