/* SwornVoice site styles. One stylesheet, mobile-first. Spec sections 4-6.
   Flat: colour and border changes only for hover and state. */

/* ==== 1. Tokens (spec 4.1, copied exactly) ==== */
:root{
  color-scheme:light;
  --bg:#F4F4F1;            /* ground */
  --surface:#FFFFFF;       /* cards, inputs, panels */
  --surface-hover:#F7F7F5; /* secondary button and summary hover */
  --line:#E3E4E8;          /* card, section, table borders (decorative) */
  --control:#7D828C;       /* input, checkbox, secondary button borders */
  --ink:#15171B;           /* text, headings */
  --muted:#5C6170;         /* secondary text, labels, help */
  --accent:#1F4FD6;        /* links, primary button */
  --accent-hover:#1A43B8;
  --on-accent:#FFFFFF;     /* text on accent fill */
  --accent-bg:#E8EEFC;
  --green:#1E6B3C; --green-bg:#E6F2EA;
  --amber:#8A4A05; --amber-bg:#FFF1E3;
  --red:#9B2C1E;   --red-bg:#FBE9E7;
  --neutral-bg:#EEEFF2;
  --focus:#1F4FD6;         /* focus ring */
  --radius:12px; --radius-sm:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#121316; --surface:#1A1C21; --surface-hover:#22252B; --line:#2B2E35; --control:#6E737E;
  --ink:#ECEDF0; --muted:#AEB3BC;
  --accent:#7D9BFF; --accent-hover:#9DB4FF; --on-accent:#121316; --accent-bg:#1B2440;
  --green:#7FCB9A; --green-bg:#16271D; --amber:#E8B06A; --amber-bg:#2E2114; --red:#F09A8C; --red-bg:#331B18;
  --neutral-bg:#262930; --focus:#7D9BFF;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121316; --surface:#1A1C21; --surface-hover:#22252B; --line:#2B2E35; --control:#6E737E;
  --ink:#ECEDF0; --muted:#AEB3BC;
  --accent:#7D9BFF; --accent-hover:#9DB4FF; --on-accent:#121316; --accent-bg:#1B2440;
  --green:#7FCB9A; --green-bg:#16271D; --amber:#E8B06A; --amber-bg:#2E2114; --red:#F09A8C; --red-bg:#331B18;
  --neutral-bg:#262930; --focus:#7D9BFF;
}
/* Print always uses the light palette (same values as above, card white as ground). */
@media print{:root:not([data-theme="light"]),:root[data-theme]{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-hover:#F7F7F5; --line:#E3E4E8; --control:#7D828C;
  --ink:#15171B; --muted:#5C6170;
  --accent:#1F4FD6; --accent-hover:#1A43B8; --on-accent:#FFFFFF; --accent-bg:#E8EEFC;
  --green:#1E6B3C; --green-bg:#E6F2EA; --amber:#8A4A05; --amber-bg:#FFF1E3; --red:#9B2C1E; --red-bg:#FBE9E7;
  --neutral-bg:#EEEFF2; --focus:#1F4FD6;
}}

/* Type, spacing and layout tokens (spec 5) */
:root{
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fs-h1:clamp(2rem, 1.25rem + 3.2vw, 3.25rem);
  --fs-h2:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-h3:clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-lead:clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  --fs-body:clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-small:0.9375rem;
  --fs-fine:0.875rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --section-y:clamp(48px, 7vw, 96px);
  --hero-y:clamp(40px, 6vw, 80px);
  --container:1160px;
  --gutter:clamp(16px, 3vw, 24px);
  --card-pad:clamp(20px, 3vw, 28px);
}

/* ==== 2. Base (spec 4.4, 5) ==== */
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--fs-body)/1.6 var(--font);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{text-wrap:balance;color:var(--ink)}
:where(h1,h2,h3,h4){margin:0}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.12;letter-spacing:-0.02em;max-width:20ch}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.2;letter-spacing:-0.01em}
h3,h4{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-0.005em}
:where(p,ul,ol,dl,dd,figure,blockquote,address){margin:0}
ul,ol{padding-left:1.25em}
:where(li + li){margin-top:var(--space-2)}
strong,b{font-weight:600}
img,svg,video,canvas{max-width:100%;height:auto}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-fine)}
code,kbd,samp{font-size:0.9em;overflow-wrap:anywhere}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-6) 0}
:where([id]){scroll-margin-top:24px}
address{font-style:normal}
/* Sticky footer: header, main and footer are the body's flex children. */
main{flex:1 0 auto}

/* Flow: vertical rhythm between stacked blocks. Zero specificity so components win. */
:where(h2,h3,p,ul,ol,dl,table,details,.btn-row,.callout,.table-wrap,.compare,.grid-2,.steps,.faq-list,.card,.panel,.form,.split,.prose)
+ :where(h2,h3,p,ul,ol,dl,table,details,.callout,.table-wrap,.compare,.grid-2,.steps,.faq-list,.card,.panel,.form,.split,.prose){
  margin-top:var(--space-4);
}

/* Links (spec 6.2) */
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em}
a:hover{text-decoration-thickness:2px}

/* Focus (spec 6.2) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Utilities (spec 6.1) */
.muted{color:var(--muted)}
.small{font-size:var(--fs-small);line-height:1.5}
.num{font-variant-numeric:tabular-nums}
.visually-hidden,.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--space-2);top:-200px;z-index:100;
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;
  border:1px solid var(--control);border-radius:var(--radius-sm);
}
.skip-link:focus{top:var(--space-2);outline:2px solid var(--focus);outline-offset:2px}

/* ==== 3. Layout (spec 5.4, 6.1) ==== */
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section + .section{border-top:1px solid var(--line)}
.page-hero{padding-block:var(--hero-y) var(--section-y)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);align-items:start}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.split > *,.grid-2 > *,.compare > *{margin-top:0}
.prose{max-width:60ch}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:var(--space-2)}
.prose h2{margin-top:var(--space-7)}
.prose h3{margin-top:var(--space-5)}
.prose > :first-child{margin-top:0}
.section-head{max-width:60ch;margin-bottom:var(--space-6)}
.section-intro{color:var(--muted)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);max-width:60ch;margin-top:var(--space-4)}

/* ==== 4. Header and nav (spec 2.2) ==== */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);min-height:64px}
.header-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  column-gap:var(--space-4);min-height:64px;padding-block:10px;
}
.wordmark{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font);font-weight:700;font-size:20px;letter-spacing:-0.01em;line-height:1.2;
  color:var(--ink);text-decoration:none;
}
.site-header .nav-toggle{display:none;padding:10px 16px}
/* No JS, or JS at any width before the media rules below: a wrapping row under the wordmark. */
.site-nav{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-4);row-gap:var(--space-2);padding-bottom:var(--space-2)}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:var(--space-4)}
.nav-list li{margin:0}
.nav-link{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--muted);font-weight:500;text-decoration:none;
}
.nav-link:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:0.35em}
.nav-cta{flex:none}

@media (max-width:859.98px){
  .js .site-header .nav-toggle{display:inline-flex}
  .js .site-nav:not([data-open]){display:none}
  .js .site-nav[data-open]{display:block;padding-bottom:var(--space-4)}
  .js .site-nav[data-open] .nav-list{display:block}
  .js .site-nav[data-open] .nav-link{display:flex;min-height:48px;border-top:1px solid var(--line)}
  .js .site-nav[data-open] .nav-cta{display:flex;width:100%;margin-top:var(--space-3)}
}
@media (min-width:860px){
  .header-inner{flex-wrap:nowrap}
  .site-nav{flex-basis:auto;flex-wrap:nowrap;column-gap:var(--space-5);padding-bottom:0}
  .nav-list{flex-wrap:nowrap;column-gap:var(--space-5)}
}

/* ==== 5. Buttons (spec 6.2) ==== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;padding:12px 20px;border-radius:var(--radius-sm);
  font:600 1rem/1.2 var(--font);text-align:center;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .12s,border-color .12s,color .12s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--control)}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--ink);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary[disabled]:hover{background:var(--accent);border-color:var(--accent)}
.btn-secondary[disabled]:hover{background:var(--surface);border-color:var(--control)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.btn-row .btn{width:100%}
@media (min-width:480px){.btn-row .btn{width:auto}}

/* ==== 6. Card and facts (spec 6.3) ==== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad)}
.card-title{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-0.005em;margin-bottom:var(--space-4)}
.card > ul,.card > ol{padding-left:1.25em}
.facts > div{padding-block:var(--space-3)}
.facts > div + div{border-top:1px solid var(--line)}
.facts > div:first-child{padding-top:0}
.facts > div:last-child{padding-bottom:0}
.facts dt{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--muted)}
.facts dd{margin:0;color:var(--ink)}
@media (min-width:480px){
  .facts > div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-4);align-items:baseline}
}
/* In a hero aside the column is narrow: stack label over value again. */
@media (min-width:1024px){
  .split .facts > div{display:block}
  .split .facts dd{margin-top:2px}
}

/* ==== 7. Step list, home (spec 6.4) ==== */
.steps{list-style:none;margin:0;padding:0;counter-reset:sv-step;border-bottom:1px solid var(--line)}
.step-row{
  counter-increment:sv-step;
  display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:var(--space-4);row-gap:var(--space-2);
  padding-block:var(--space-5);border-top:1px solid var(--line);
}
.step-row + .step-row{margin-top:0}
.step-row > *{margin:0;grid-column:2}
.step-row::before{
  content:counter(sv-step);grid-column:1;grid-row:1;
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--accent-bg);color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums;line-height:1;
}
.step-title{grid-row:1;align-self:center}
@media (min-width:768px){
  .step-row{grid-template-columns:36px minmax(0,3fr) minmax(0,5fr);column-gap:var(--space-5)}
  .step-title{align-self:start;padding-top:4px}
  .step-row > :not(.step-title){grid-column:3}
}

/* ==== 8. Step section, how it works (spec 6.5) ==== */
.step .step-head > h2{max-width:24ch}
.step-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.step-grid > *{margin-top:0}
.step-label{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--accent);margin-bottom:var(--space-2)}
.step-head > .step-label + *{margin-top:0}
@media (min-width:1024px){
  .step-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-7)}
}

/* ==== 9. Comparison (spec 6.6) ==== */
.compare{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.compare-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad)}
.compare-card--sv{border:2px solid var(--accent);padding:calc(var(--card-pad) - 1px)}
.compare-label{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--muted)}
.compare-figure{font-size:var(--fs-h2);font-weight:700;line-height:1.2;letter-spacing:-0.01em;color:var(--ink);margin-top:var(--space-2)}
.compare-label + .compare-figure{margin-top:var(--space-2)}
.compare-points{padding-left:1.25em}
.compare-points li + li{margin-top:var(--space-2)}

/* ==== 10. Tables (spec 6.7). Stacked below 600px, real table from 600px. Never scrolls. ==== */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse}
.table,.table tbody,.table tr,.table th,.table td{display:block}
.table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.table tbody tr{padding-block:var(--space-3)}
.table tbody tr + tr{border-top:1px solid var(--line)}
.table tbody tr.total{border-top-width:2px;font-weight:700}
.table tbody th{padding:4px 16px;text-align:left;font-weight:600}
.table tr.total th{font-weight:700}
.table td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:4px 16px;text-align:right}
.table td::before{content:attr(data-label);flex:0 0 auto;max-width:45%;text-align:left;color:var(--muted);font-size:var(--fs-small);font-weight:400}
.table td:empty{display:none}
.table .num{font-variant-numeric:tabular-nums}
/* Stacked: prose cells (notes) read left-aligned under their label; figures stay right. */
@media (max-width:599.98px){
  .table td:not(.num){display:block;text-align:left}
  .table td:not(.num)::before{display:block;max-width:none;margin-bottom:2px}
  .table td:not(.num):empty{display:none}
}
@media (min-width:600px){
  .table{display:table;table-layout:auto}
  .table thead{display:table-header-group;position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  .table tbody{display:table-row-group}
  .table tr{display:table-row}
  .table tbody tr{padding:0}
  .table tbody tr + tr,.table tbody tr.total{border-top:0}
  .table th,.table td{display:table-cell;padding:12px 16px;text-align:left;vertical-align:baseline}
  .table td::before{content:none}
  .table td:empty{display:table-cell}
  .table thead th{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--muted)}
  .table tbody th,.table tbody td{border-top:1px solid var(--line)}
  .table tbody tr.total > *{border-top:2px solid var(--line)}
  .table .num{text-align:right}
  .table td.num{white-space:nowrap}
  .table td.num + td:not(.num){padding-left:var(--space-6)}
  .table thead th:first-child{width:30%}
}

/* ==== 11. FAQ (spec 6.8) ==== */
.faq h2 + .faq-list{margin-top:var(--space-5)}
.faq-list{max-width:60ch}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item + .faq-item{margin-top:0}
.faq-item > summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  min-height:44px;padding-block:var(--space-4);cursor:pointer;color:var(--ink);
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::marker{content:""}
.faq-item > summary:hover,.faq-item > summary:hover .faq-q{color:var(--accent)}
.faq-item > summary::after{content:"+";flex:none;color:var(--muted);font-size:20px;line-height:1;font-weight:400}
.faq-item[open] > summary::after{content:"\2212"}
.faq-q{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-0.005em;margin:0;color:inherit}
.faq-a{padding-bottom:var(--space-4)}
/* Wide screens: the list spans the container; answers keep a readable measure. */
@media (min-width:1024px){
  .faq-list{max-width:none}
  .faq-a > *{max-width:68ch}
}

/* ==== 12. Callout (spec 6.9) ==== */
.callout{
  max-width:60ch;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);padding:16px 20px;
}
.callout--note{background:var(--green-bg);border-color:var(--green)}
.callout--warning{background:var(--amber-bg);border-color:var(--amber)}
.callout-title{font-weight:600}
.callout--note .callout-title{color:var(--green)}
.callout--warning .callout-title{color:var(--amber)}
.callout > * + *{margin-top:var(--space-2)}

/* ==== 13. Pills (spec 6.10) ==== */
.pill{
  display:inline-block;padding:2px 10px;border-radius:999px;white-space:nowrap;
  font-size:var(--fs-fine);font-weight:600;line-height:1.5;vertical-align:baseline;
}
.pill--green{color:var(--green);background:var(--green-bg)}
.pill--amber{color:var(--amber);background:var(--amber-bg)}
.pill--accent{color:var(--accent);background:var(--accent-bg)}
.pill--neutral{color:var(--muted);background:var(--neutral-bg)}
/* A row of pills that wraps as a group, never one chip alone. */
.pill-row{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);vertical-align:baseline}
.pill-row > .pill{margin:0}

/* ==== 14. Form controls (spec 6.11) ==== */
.form{display:block}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.form-grid > *{margin-top:0}
.field--full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field > *{margin:0}
.field-label{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--ink)}
.field-label .muted{font-weight:400}
.input,.textarea{
  display:block;width:100%;min-height:44px;margin:0;
  font:400 16px/1.4 var(--font);padding:10px 12px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--control);border-radius:var(--radius-sm);
  -webkit-appearance:none;appearance:none;
  transition:border-color .12s;
}
.input:focus,.textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--red)}
.textarea{min-height:120px;resize:vertical}
.field-help{font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
.field-error{font-size:var(--fs-fine);font-weight:600;line-height:1.5;color:var(--red)}
.check{display:flex;align-items:center;gap:var(--space-3);min-height:44px;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form-fine{font-size:var(--fs-fine);line-height:1.5;color:var(--muted);max-width:60ch}
.form-actions{margin-top:var(--space-2)}
.form-actions .btn{width:100%}
@media (min-width:480px){.form-actions .btn{width:auto}}
@media (min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{background:var(--surface);border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);padding:var(--card-pad);color:var(--ink)}
.panel--success{background:var(--green-bg);border-color:var(--green)}
.panel--error{background:var(--red-bg);border-color:var(--red)}
.panel-title{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-0.005em}
.panel--success .panel-title{color:var(--green)}
.panel > * + *{margin-top:var(--space-3)}
.panel:focus{outline:none}
.panel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==== 15. Legal (spec 6.12) ==== */
.legal-meta{font-size:var(--fs-small);line-height:1.5;color:var(--muted);margin-top:var(--space-3)}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start}
.legal-layout > *{margin-top:0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad)}
.toc-title{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--ink)}
.toc ol{margin-top:var(--space-2);padding-left:1.25em;font-size:var(--fs-small)}
.toc li + li{margin-top:0}
.toc a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--fs-small);line-height:1.4;color:var(--accent);text-decoration:none}
.toc a:hover{text-decoration:underline}
@media (min-width:600px){.toc a{min-height:0;padding-block:8px}}
@media (min-width:600px) and (max-width:1023.98px){
  .toc ol{columns:2;column-gap:var(--space-6)}
  .toc li{break-inside:avoid}
}
.legal h2{margin-top:var(--space-7);scroll-margin-top:24px}
.legal > :first-child h2,.legal > h2:first-child{margin-top:0}
.legal h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3;margin-top:var(--space-5)}
.legal ul{list-style:disc;padding-left:1.25em}
.legal dl.legal-terms dt{font-weight:600;color:var(--ink)}
.legal dl.legal-terms dd{margin:0 0 var(--space-4)}
.legal dl.legal-terms dd:last-child{margin-bottom:0}
@media (min-width:1024px){
  .legal-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--space-7)}
  .toc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto}
}

/* ==== 16. CTA band (spec 6.13) ==== */
.cta-band .cta-card{text-align:left}
.cta-card > *{max-width:60ch}
@media (min-width:1024px){
  .cta-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-7);align-items:center}
  .cta-card > h2,.cta-card > p{grid-column:1}
  .cta-card > .btn-row{grid-column:2;grid-row:1 / span 2;margin-top:0}
}

/* ==== 17. Footer (spec 2.3) ==== */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding-block:var(--space-7)}
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.footer-inner > *{margin-top:0}
.footer-org{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.footer-name{font-weight:600;color:var(--ink)}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:var(--space-5)}
.footer-nav li{margin:0}
.footer-nav a,.footer-org a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:none}
.footer-nav a{font-size:var(--fs-small);white-space:nowrap}
.footer-nav a:hover,.footer-org a:hover{text-decoration:underline;text-decoration-thickness:1px}
.footer-meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.footer-meta > *{margin:0}
.footer-note,.footer-copy{font-size:var(--fs-small);line-height:1.5;color:var(--muted);max-width:44ch}
.theme-toggle::before{
  content:"";flex:none;width:12px;height:12px;border-radius:50%;
  border:2px solid currentColor;
}
.theme-toggle[aria-pressed="true"]::before{border-width:6px}
@media (min-width:768px){
  .footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:var(--space-6)}
  .footer-nav ul{display:grid;grid-template-columns:repeat(2,max-content);column-gap:var(--space-6);margin-top:-12px}
}

/* ==== 18. Breakpoints for grids (spec 5.5) ==== */
@media (min-width:768px){
  .grid-2,.compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
}
/* Pair: two short sections side by side from 1024px (home: who it's for, what it costs). */
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--section-y)}
.pair > *{margin-top:0}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8)}
}
/* Wide screens: a wider column and larger rem base, so type, measure and spacing scale together. */
@media (min-width:1920px){
  :root{--container:1280px}
  html{font-size:112.5%}
}

/* ==== 19. Motion and print ==== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
}
@media print{
  body{font-size:11pt;line-height:1.5}
  .skip-link,.nav-toggle,.site-nav,.theme-toggle,.cta-band,.btn-row,.form-actions{display:none !important}
  .section,.page-hero{padding-block:16px}
  .section + .section{border-top:0}
  .toc{position:static;max-height:none;overflow:visible}
  .card,.callout,.panel,.table-wrap,.compare-card,.faq-item,.step-row{break-inside:avoid}
  .prose a[href^="http"]::after,.legal a[href^="http"]::after{content:" (" attr(href) ")";font-size:0.85em;color:var(--muted)}
  .site-footer{padding-block:16px}
}