/* ===========================================================================
 * site.css — Tickvouch. One stylesheet for every page on this site.
 *
 * No frameworks. No @import. No web fonts. No external request of any kind:
 * the privacy claim on the landing page depends on that, so never add one.
 * System fonts only. Light and dark via prefers-color-scheme.
 *
 * ---------------------------------------------------------------------------
 * CLASS CONTRACT — for the bank pages (banks/*.html) and legal pages
 * (legal/*.html). Link this file, use these classes, do not edit this file.
 * From a subdirectory the link is:
 *     <link rel="stylesheet" href="../assets/css/site.css">
 *
 * PAGE SHELL
 *   .wrap                centred column with gutters. Every band needs one.
 *   main > section       vertical rhythm; a hairline rule separates siblings.
 *   .band-quiet          on a <section>, an inset background band.
 *   .lede                one large intro paragraph under an h1.
 *   .eyebrow             small uppercase kicker above a heading.
 *   .meta                small muted line (dates, sources, counts).
 *   .prose               wraps long body copy: comfortable measure, list and
 *                        link styling, safe word wrapping.
 *   .cols-2              two-column grid, collapses to one on small screens.
 *
 * NAV
 *   header.site > .wrap > a.brand + nav.site-nav
 *   .brand               wordmark. .brand .mark is the coloured half.
 *   .brand-tag           the tagline beside the wordmark (hidden on mobile).
 *   .brand-note          same slot, for a short note instead of the tagline.
 *   .site-nav a          nav link. Mark the current page with
 *                        aria-current="page" and it styles itself.
 *
 * FOOTER
 *   footer.site > .wrap
 *   .footer-grid         link columns. .footer-col h3 heads each column.
 *   .disclaimer          boxed personal-capacity block. Required on every page.
 *   .signature           the signed line.
 *
 * CALLOUTS
 *   .note                neutral boxed aside.
 *   .note.pass           green. .note.fail amber. .note.info blue-grey.
 *   .note h3 / strong    a bold first line reads as the callout title.
 *   .quote               blockquote with attribution in .quote cite.
 *   .draft-notice        "this page is not final" banner for the legal pages.
 *                        Styled loud on purpose. A single commented-out rule
 *                        further down hides every one of them site-wide; read
 *                        the note beside it before uncommenting.
 *   .review-flag         "a named human still has to review this clause".
 *
 * TOKENS the other pages may use in their own inline styles:
 *   --bg --bg-raised --bg-inset --text --text-soft --text-faint
 *   --border --border-strong --accent --accent-soft --accent-text
 *   --pass-* --fail-* --nf-* --warn-* (alias of --fail-*) --radius --radius-sm
 * Use these rather than hex, or the page will not follow dark mode.
 *
 * STATUS CHIPS  (PASS / FAIL / NOT FOUND — use these three, nothing else)
 *   <span class="chip pass">PASS</span>
 *   <span class="chip fail">FAIL</span>
 *   <span class="chip notfound">NOT FOUND</span>
 *
 * RESULT BANNERS (converter output, and worked examples in copy)
 *   .banner.pass / .banner.fail / .banner.notfound / .banner.warn
 *
 * TABLES
 *   <div class="table-scroll"><table class="data"> … </table></div>
 *   The .table-scroll wrapper is REQUIRED: it is what stops a wide table
 *   from scrolling the whole page sideways on a phone.
 *   th.num / td.num      right-aligned, tabular figures.
 *   tr.flagged           amber row.
 *   table.preview        the converter's own preview table (same rules).
 *
 * FAQ
 *   .faq > details > summary + .prose
 *
 * PRICING
 *   .plans > .plan            three cards, collapse to one column.
 *   .plan.featured            the highlighted middle card.
 *   .plan-flag                the label ribbon inside a featured card.
 *   .price / .per-page        price and its unit-rate line.
 *
 * BUTTONS
 *   button, .btn              primary. .btn.secondary outline. .btn.ghost bare.
 *
 * WORK LOG (landing page only, but tokens are shared)
 *   .worklog > li > .step + .val, .equation
 *
 * CREDITS PANEL (landing page only)
 *   .credits > summary + .credits-form / .credits-stored
 * =========================================================================== */

/* --- Tokens: light ------------------------------------------------------- */

:root {
  --bg:            #f7f7f4;
  --bg-raised:     #ffffff;
  --bg-inset:      #eeeeea;
  --text:          #1c2126;
  --text-soft:     #4d5760;
  --text-faint:    #62696f; /* 4.8:1+ on every light surface (WCAG AA at 13px) */
  --border:        #d8d8d2;
  --border-strong: #b6b6ae;
  /* Form-control boundaries only. WCAG 1.4.11 wants 3:1 where the border is
     the component's sole visual indicator; --border and --border-strong are
     decorative-tier and fail that bar. */
  --border-control: #84847c;
  --accent:        #1d4e6b;
  --accent-soft:   #e7eff4;
  --accent-text:   #ffffff;

  --pass-bg:     #e8f3ea;
  --pass-border: #2f7a45;
  --pass-text:   #1c5730;

  --fail-bg:     #fbf1de;
  --fail-border: #b07610;
  --fail-text:   #75500a;

  --nf-bg:       #eceef0;
  --nf-border:   #8b949c;
  --nf-text:     #4a5259;

  /* Aliases. FAIL and "warning" are the same amber by design: a failed check
     IS the warning. The bank, comparison and legal pages reference the --warn-*
     names in their own inline styles, so these must keep resolving or those
     pages fall back to hardcoded light-mode hex and break in dark mode. */
  --warn-bg:     var(--fail-bg);
  --warn-border: var(--fail-border);
  --warn-text:   var(--fail-text);

  --radius:    10px;
  --radius-sm: 6px;
  --max:       62rem;
  --measure:   40rem;
}

/* --- Tokens: dark -------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #14171a;
    --bg-raised:     #1c2024;
    --bg-inset:      #23282d;
    --text:          #e3e6e8;
    --text-soft:     #a2abb3;
    --text-faint:    #838d95;
    --border:        #363c42;
    --border-strong: #4a5158;
    --border-control: #6e7880;
    --accent:        #7fb3d1;
    --accent-soft:   #1b2830;
    --accent-text:   #10161b;

    --pass-bg:     #152c1c;
    --pass-border: #3d9257;
    --pass-text:   #9ed4ae;

    --fail-bg:     #30250e;
    --fail-border: #bd8e2b;
    --fail-text:   #e3c079;

    --nf-bg:       #22272b;
    --nf-border:   #6e7880;
    --nf-text:     #aab3ba;
  }
}

/* --- Reset and base ------------------------------------------------------ */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

main > section { padding: 2.6rem 0; }
main > section + section { border-top: 1px solid var(--border); }

.band-quiet { background: var(--bg-inset); }
main > section.band-quiet + section { border-top: none; }

/* --- Headings and prose -------------------------------------------------- */

h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; }

h1 {
  font-size: clamp(1.65rem, 5.2vw, 2.6rem);
  letter-spacing: -0.015em;
  margin: 1.6rem 0 0.6rem;
  max-width: 24ch;
}

h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  max-width: 30ch;
}

h3 { font-size: 1.08rem; margin: 1.4rem 0 0.3rem; }
h4 { font-size: 0.98rem; margin: 1rem 0 0.25rem; }

p, ul, ol, dl { max-width: var(--measure); }

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.25rem;
}

.lede {
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: var(--text-soft);
  max-width: 46rem;
  margin: 0 0 1.4rem;
}

.lede strong { color: var(--text); }

.meta { font-size: 0.85rem; color: var(--text-faint); }

.prose > * + * { margin-top: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.35rem; }
.prose a { overflow-wrap: anywhere; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

code, kbd {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0.08em 0.35em;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

hr { border: none; border-top: 1px solid var(--border); margin: 1.6rem 0; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.cols-2 > * { max-width: none; }

/* --- Header and nav ------------------------------------------------------ */

header.site {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem 1.1rem;
  flex-wrap: wrap;
}

a.brand, .brand {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand .mark { color: var(--accent); }

.brand-tag, .brand-note {
  color: var(--text-faint);
  font-size: 0.85rem;
  border-left: 1px solid var(--border);
  padding-left: 1.1rem;
}

.brand-note a { color: var(--text-faint); }

nav.site-nav {
  margin-left: auto;
  display: flex;
  gap: 0.15rem 1.1rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

nav.site-nav a {
  color: var(--text-soft);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}

nav.site-nav a:hover { color: var(--text); border-bottom-color: var(--border-strong); }
nav.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

@media (max-width: 46rem) {
  .brand-tag { display: none; }
  nav.site-nav { margin-left: 0; width: 100%; }
}

/* --- Buttons ------------------------------------------------------------- */

button, .btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

button:hover, .btn:hover { filter: brightness(1.08); }

button.secondary, .btn.secondary { background: transparent; color: var(--accent); }
button.ghost, .btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* --- Status chips: PASS / FAIL / NOT FOUND ------------------------------- */

.chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--nf-border);
  background: var(--nf-bg);
  color: var(--nf-text);
  white-space: nowrap;
  vertical-align: 0.05em;
}

.chip.pass     { background: var(--pass-bg); border-color: var(--pass-border); color: var(--pass-text); }
.chip.fail     { background: var(--fail-bg); border-color: var(--fail-border); color: var(--fail-text); }
.chip.notfound { background: var(--nf-bg);   border-color: var(--nf-border);   color: var(--nf-text); }

/* --- Callouts and result banners ----------------------------------------- */

.note, .banner {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  padding: 0.85rem 1.05rem;
  margin: 1.1rem 0 0;
  max-width: 46rem;
}

.note > *, .banner > * { max-width: none; }
.note > * + *, .banner > * + * { margin-top: 0.55rem; }
.note p:first-child, .banner p:first-child { margin-top: 0; }

.note.pass, .banner.pass { background: var(--pass-bg); border-color: var(--pass-border); color: var(--pass-text); }
.note.fail, .banner.fail,
.note.warn, .banner.warn { background: var(--fail-bg); border-color: var(--fail-border); color: var(--fail-text); }
.note.notfound, .banner.notfound { background: var(--nf-bg); border-color: var(--nf-border); color: var(--nf-text); }
.note.info { background: var(--accent-soft); border-color: var(--accent); }

.note .title, .banner .title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.note a, .banner a { color: inherit; }

/* --- Draft banner (legal/*.html) ----------------------------------------- */
/*
 * .draft-notice marks a page whose content is not final — the legal pages use
 * it while Bert's contact and entity details are still blank. It is styled to
 * be impossible to miss, because a draft legal page that looks finished is
 * worse than no page.
 *
 * TO HIDE EVERY DRAFT BANNER SITE-WIDE: uncomment the rule marked below.
 * Uncommenting it removes the banner from every page at once, on every
 * element carrying class="draft-notice". Do that only when the details are
 * actually filled in — the banner is the only thing telling a reader the page
 * is provisional, so hiding it while the page is still a draft turns a
 * disclosed gap into a hidden one. Comment it back in to restore them.
 */

.draft-notice {
  border: 2px dashed var(--fail-border);
  background: var(--fail-bg);
  color: var(--fail-text);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.05rem;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  max-width: 46rem;
}

.draft-notice > * { max-width: none; }
.draft-notice > * + * { margin-top: 0.5rem; }
.draft-notice strong { display: block; }
.draft-notice a { color: inherit; }

/*
 * .review-flag marks a paragraph on a legal page that is waiting on a named
 * human review. Same amber family as a FAIL: an unreviewed clause is an open
 * item, not decoration. Like the draft banner it is meant to be visible.
 */

.review-flag {
  border-left: 3px solid var(--fail-border);
  background: var(--fail-bg);
  color: var(--fail-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.6rem 0.9rem;
  margin: 0.9rem 0;
  font-size: 0.93rem;
  max-width: 46rem;
}

/* === Uncomment the next line to hide all draft banners site-wide. ===
.draft-notice { display: none; }
   === End of the draft-banner switch. === */

.quote {
  margin: 1.1rem 0;
  padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--border-strong);
  color: var(--text);
  max-width: 46rem;
}

.quote p { font-size: 1.06rem; margin: 0; }
.quote cite { display: block; font-size: 0.85rem; color: var(--text-faint); font-style: normal; margin-top: 0.4rem; }

/* --- Tables -------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 1rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  -webkit-overflow-scrolling: touch;
}

table.data, table.preview {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

table.preview { min-width: 38rem; }
table.data    { min-width: 30rem; }

table.data th, table.data td,
table.preview th, table.preview td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

table.data thead th, table.preview thead th {
  background: var(--bg-inset);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

table.data td.num, table.data th.num,
table.preview td.num, table.preview th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.preview td { white-space: nowrap; }
table.preview td.desc { white-space: normal; min-width: 13rem; }
table.data td.desc { min-width: 12rem; }

table.data tr.flagged, table.preview tr.flagged { background: var(--fail-bg); color: var(--fail-text); }
table.data tbody tr:last-child td, table.preview tbody tr:last-child td { border-bottom: none; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 46rem; }

details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  padding: 0.7rem 1rem;
  margin: 0.55rem 0;
}

details[open] { border-color: var(--border-strong); }

summary {
  cursor: pointer;
  font-weight: 600;
  list-style-position: outside;
}

summary::marker { color: var(--accent); }
details > .prose, details > p { margin-top: 0.7rem; }

/* --- Inline form (waitlist; validates locally, posts nowhere) ------------ */

.waitlist-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 0;
  max-width: 32rem;
}

.waitlist-form input[type="email"] {
  font: inherit;
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

.form-msg { font-size: 0.9rem; margin: 0.55rem 0 0; }
.form-msg.err { color: var(--fail-text); font-weight: 600; }

/* --- Credits panel (pricing section; code entry and balance) -------------- */

.credits { max-width: 46rem; margin-top: 1.3rem; }

.credits-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 0;
  max-width: 32rem;
}

.credits-form input[type="text"] {
  font: inherit;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

.credits-stored {
  display: flex;
  gap: 0.6rem 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.8rem 0 0;
}

.credits-stored .meta { margin: 0; font-variant-numeric: tabular-nums; }

/* --- Pricing ------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.3rem;
  align-items: start;
}

.plan {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.25rem;
  height: 100%;
}

.plan.featured {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.plan-flag {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}

.plan h3 { margin: 0 0 0.15rem; font-size: 1.02rem; }
.plan .price { font-size: 1.85rem; font-weight: 700; margin: 0.1rem 0 0; letter-spacing: -0.02em; }
.plan .per-page { font-size: 0.88rem; color: var(--text-soft); margin: 0.1rem 0 0; font-variant-numeric: tabular-nums; }
.plan ul { margin: 0.8rem 0 0; padding-left: 1.05rem; font-size: 0.92rem; }
.plan li + li { margin-top: 0.3rem; }

/* --- Converter panel ----------------------------------------------------- */

.converter {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 0 0 1rem;
}

.dropzone {
  border: 2px dashed var(--border-control);
  border-radius: var(--radius);
  padding: 2.4rem 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--bg);
}

.dropzone:hover { border-color: var(--accent); }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone p { margin: 0.3rem auto; max-width: 34rem; }
.dropzone .big { font-size: 1.1rem; font-weight: 600; }
.dropzone .hint { color: var(--text-soft); font-size: 0.9rem; }

.file-note { color: var(--text-soft); font-size: 0.88rem; margin: 0.7rem 0 0; max-width: none; }

.status { margin: 1rem 0 0; font-size: 0.95rem; max-width: none; }

.downloads {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.downloads .hint { color: var(--text-soft); font-size: 0.88rem; }

/* --- Work log: what the page is actually doing --------------------------- */

.worklog {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  font-size: 0.9rem;
  max-width: none;
}

.worklog li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  padding: 0.22rem 0;
  border-bottom: 1px dotted var(--border);
}

.worklog li:last-child { border-bottom: none; }
.worklog .step { color: var(--text-soft); }
.worklog .val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.worklog li.equation {
  display: block;
  font-variant-numeric: tabular-nums;
  padding-top: 0.5rem;
}

.worklog li.equation .eq {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.worklog-head {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.2rem 0 0;
}

/* --- Steps --------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 1.2rem 0 0;
  list-style: none;
  max-width: none;
}

.steps li {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.steps .n {
  display: block;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

/* --- Bank cards ---------------------------------------------------------- */

.banks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.banks li {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.banks h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.banks p { font-size: 0.92rem; margin: 0 0 0.5rem; max-width: none; }
.banks .src { font-size: 0.8rem; color: var(--text-faint); }
.banks .src a { color: var(--text-faint); }

/* --- Footer -------------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 2rem 0 2.8rem;
  color: var(--text-soft);
  font-size: 0.88rem;
}

footer.site p, footer.site ul { max-width: 46rem; }
footer.site h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin: 0 0 0.4rem; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0 0 1.4rem;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0.25rem 0; }

.disclaimer {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.05rem;
  margin: 0 0 1.1rem;
  max-width: 46rem;
}

.signature { font-style: normal; color: var(--text); margin: 0 0 1rem; max-width: 46rem; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 56rem) {
  .steps, .banks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 44rem) {
  main > section { padding: 1.9rem 0; }
  .steps, .banks, .plans, .cols-2, .footer-grid { grid-template-columns: 1fr; }
  .converter { padding: 1rem; }
  .dropzone { padding: 1.8rem 0.75rem; }
  /* The three packs keep their price order when stacked. The middle pack is
     highlighted, not promoted: the compromise effect needs it to sit BETWEEN
     the cheaper and the dearer option, so never reorder these on mobile. */
}

@media (max-width: 24rem) {
  .wrap { padding: 0 0.9rem; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  header.site, nav.site-nav, .dropzone, .downloads { display: none; }
  body { background: #fff; color: #000; }
}