/* ============================================================
   Claims Bible — design tokens
   Captured from claimsbible.replit.app, 31 July 2026,
   via computed styles on the live app. These are exact values,
   not approximations, except where marked.

   Single source of truth for the Astro rebuild. All five
   templates (hub / entity / calculator / article / start) and
   the form engine consume these variables. Restyling the site
   means editing this file, nothing else.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --ink:          #0E0F2F;   /* rgb(14,15,47)  headings + body text */
  --ink-deep:     #0C0E3C;   /* rgb(12,14,60)  dark bands, text on yellow */
  --navy-footer:  #0F2344;   /* rgb(15,35,68)  footer background */
  --bg:           #F5F6F9;   /* rgb(245,246,249) page background */
  --surface:      #FFFFFF;   /* cards, form panels */
  --muted:        #637288;   /* rgb(99,114,136) subheads, captions */
  --accent:       #F9D51F;   /* rgb(249,213,31) the yellow. CTAs only —
                                never decorative, so it always means "act" */
  --accent-shadow: rgba(249, 213, 31, 0.4);
  --success:      #22C55E;   /* check icons — approx (Tailwind green-500);
                                sampled element resolved white. Verify if exact
                                match matters */
  --border:       #E5E7EB;   /* card borders (converted from oklch) */

  /* ---- type ----
     System stack: zero webfont requests, part of the Lighthouse story */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --text-hero:    clamp(44px, 7vw, 72px);  /* captured: 72px desktop */
  --text-h2:      36px;
  --text-body:    16px;
  --text-sub:     18px;
  --leading-hero: 1.05;                    /* captured: 75.6/72 */
  --leading-body: 1.5;                     /* captured: 24/16 */
  --tracking-hero: -0.025em;               /* captured: -1.8px at 72px */
  --weight-display: 900;                   /* h1 and h2 both black weight */
  --weight-bold:    700;

  /* ---- shape ---- */
  --radius-pill:  9999px;   /* all buttons + the floating nav bar */
  --radius-card:  16px;     /* cards AND dark bands share this */
  --shadow-card:  0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-cta:   0 4px 16px var(--accent-shadow);

  /* ---- component recipes (captured) ----
     Primary CTA: bg --accent, text --ink-deep, pill radius,
                  padding 14px 36px, weight 700, shadow --shadow-cta
     Nav:         floating pill bar on --bg, logo left, CTA right
     Dark band:   bg --ink-deep, radius --radius-card, white text,
                  used for trust strips
     Card:        bg --surface, radius --radius-card, 1px --border,
                  --shadow-card, padding 20px
     Footer:      bg --navy-footer, white text
  */
}

/* ---- deviations from the Replit build, by design ----
   1. No invented numbers ("£120m", "4.8 stars", "ClaimExperts") —
      every trust claim on the new site must be evidenceable.
   2. YMYL furniture added: FRN + Forces Compare Ltd in footer,
      Gavin Cooper authorship + Person schema, editorial standards.
   3. Article/entity templates use a denser type scale for long-form
      content: same tokens, tighter rhythm. Hero scale is for hubs
      and home only.
   4. Form engine re-skinned to these tokens (replaces the Divi-era
      navy #1A3C6E palette from the old site).
*/

/* Claims Bible base styles — consumes tokens.css variables */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:var(--text-body);line-height:var(--leading-body);color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--ink)}

/* nav */
.nav{padding:14px 16px}
.nav-in{max-width:1160px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
  display:flex;align-items:center;gap:20px;padding:10px 22px;box-shadow:var(--shadow-card)}
.logo{font-weight:var(--weight-display);font-size:20px;text-decoration:none;letter-spacing:-.5px}
.nav-in nav{display:flex;gap:16px;flex:1;flex-wrap:wrap}
.nav-in nav a{text-decoration:none;font-size:15px;color:var(--ink)}
.nav-in nav a:hover{text-decoration:underline}

/* buttons */
.btn{display:inline-block;text-decoration:none;font-weight:var(--weight-bold);border-radius:var(--radius-pill);padding:12px 28px}
/* the letter tools use native <button> elements: strip the UA button border
   (renders as a heavy dark ring on Android) and inherit the site font.
   .btn-ghost re-adds its own border after this. (Gavin, 19 Aug 2026) */
button.btn{border:0;-webkit-appearance:none;appearance:none;font:inherit;font-weight:var(--weight-bold);cursor:pointer}
.btn-cta{background:var(--accent);color:var(--ink-deep);box-shadow:var(--shadow-cta)}
.btn-cta:hover{filter:brightness(.97)}

/* layout */
.wrap{max-width:840px;margin:0 auto;padding:24px 20px 48px}
.crumb{font-size:14px;color:var(--muted);margin:6px 0 18px}
.crumb a{color:var(--muted)}

/* prose */
.prose h1{font-size:clamp(30px,4.5vw,44px);font-weight:var(--weight-display);line-height:1.12;letter-spacing:-.02em;margin:.2em 0 .5em}
.prose h2{font-size:26px;font-weight:var(--weight-display);margin:1.4em 0 .5em}
.prose h3{font-size:20px;font-weight:var(--weight-bold);margin:1.2em 0 .4em}
.prose p,.prose li{font-size:17px;line-height:1.65}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose a.btn,.prose .btn-cta{text-decoration:none}
.prose table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:15px;background:var(--surface);border-radius:12px;overflow:hidden}
.prose th,.prose td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--bg);font-weight:var(--weight-bold)}
.prose blockquote{border-left:4px solid var(--accent);margin:1.2em 0;padding:.4em 1em;background:var(--surface);border-radius:0 12px 12px 0}
.prose img{border-radius:var(--radius-card);margin:.6em 0}

/* CTA band */
.cta-band{max-width:840px;margin:8px auto 24px;padding:0 20px}
.cta-band>div{background:var(--ink-deep);color:#fff;border-radius:var(--radius-card);padding:26px 28px}
.cta-band h2{margin:0 0 6px;font-size:22px;font-weight:var(--weight-display);color:#fff}
.cta-band p{margin:0 0 14px;color:#cbd2e0}

/* author box */
.author{max-width:840px;margin:0 auto 40px;padding:0 20px}
.author>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px 22px;box-shadow:var(--shadow-card)}
.author .author-in{display:flex;gap:16px;align-items:flex-start}
.author-pic{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--border)}
.author h3{margin:0 0 2px;font-size:17px}
.author h3 a{text-decoration:none}
.author h3 a:hover{text-decoration:underline}
.author .role{margin:0 0 8px;color:var(--muted);font-size:14px}
.author p{font-size:14.5px;line-height:1.55;margin:.3em 0}
.author .meta{color:var(--muted)}

/* author page */
.author-hero{display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.author-hero img{border-radius:var(--radius-card);width:300px;max-width:100%;height:auto}
.author-page .prose img{max-width:420px;width:100%}

/* link lists (related guides etc.) */
.prose ul.linklist{padding-left:0;list-style:none}
.prose ul.linklist li{margin:6px 0}

/* footer */
footer{background:var(--navy-footer);color:#fff;margin-top:32px}
.foot-in{max-width:1160px;margin:0 auto;padding:30px 20px;font-size:13.5px;line-height:1.6}
.foot-in a{color:#fff}
.foot-verify{font-size:13px}
.foot-small{font-size:12px;color:#9aa3b5}
.stats-note{grid-column:1/-1;font-size:13.5px;color:var(--ink);margin:2px 0 0;text-align:right}
.foot-contact{font-size:15px;margin-bottom:14px}
.topbar{background:var(--ink-deep);color:#cbd2e0;font-size:13.5px}
.topbar-in{max-width:1160px;margin:0 auto;padding:7px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar a{color:#fff;text-decoration:none}
.topbar a strong{color:var(--accent)}
.topbar a:hover strong{text-decoration:underline}
@media (max-width:560px){.topbar-in span{display:none}.topbar-in{justify-content:center}}
.partners{padding:8px 16px 4px}
.partners-in{max-width:1160px;margin:0 auto 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:34px 28px;text-align:center}
.partners-in h2{margin:0 0 12px;font-size:clamp(20px,2.6vw,26px);font-weight:var(--weight-display);letter-spacing:-.01em}
.partners-note{max-width:720px;margin:0 auto 26px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.logos{display:flex;gap:clamp(28px,5vw,64px);align-items:center;justify-content:center;flex-wrap:wrap}
.logos img{height:40px;width:auto;opacity:.75;filter:grayscale(1);transition:opacity .2s}
.logos img:hover{opacity:1}
.prose img[src^="/assets/team-"]{width:150px;height:150px;border-radius:50%;object-fit:cover}
.reg-note{margin:14px auto 22px}
.reviews{padding:8px 16px 4px}
.reviews-in{max-width:1160px;margin:0 auto 24px;background:var(--ink-deep);color:#fff;border-radius:var(--radius-card);padding:40px 30px;text-align:center}
.reviews-in .stars{color:var(--accent);font-size:24px;letter-spacing:4px}
.reviews-in blockquote{margin:10px auto 12px;max-width:760px;font-size:clamp(20px,3vw,28px);font-weight:var(--weight-display);line-height:1.3;color:#fff}
.reviews-meta{margin:0;color:#cbd2e0;font-size:14.5px}
.reviews-meta a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.check-stars a{color:var(--accent);text-decoration:none;font-weight:700}
.calclinks{padding:8px 16px 4px}
.calclinks-in{max-width:1160px;margin:0 auto 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:32px 30px}
.calclinks-in h2{margin:0 0 6px;font-size:clamp(20px,2.6vw,26px);font-weight:var(--weight-display)}
.calclinks-in .lead{margin:0 0 18px;color:var(--muted);font-size:15px}
.calclinks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 24px}
.calclinks-grid a{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.calclinks-all{margin:18px 0 0;font-weight:700}
.prose .callout{background:var(--ink-deep);color:#fff;border-radius:var(--radius-card);padding:24px 26px;margin:28px 0;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.prose .callout h3{margin:0 0 6px;color:#fff;font-size:20px}
.prose .callout p{margin:0;color:#cbd2e0;font-size:14.5px;max-width:520px}
.prose .callout .btn-cta{white-space:nowrap}
/* CMCOB mandatory notice: prominence rule — keep at/near body size, full ink */
.notice-slim{max-width:900px;margin:0 auto;padding:4px 20px 10px;text-align:center;font-size:15px;line-height:1.5;color:var(--ink)}

/* ---- embedded calculators ---- */
.calc{margin:10px 0 34px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.calc-head{background:var(--ink-deep);color:#fff;padding:20px 24px}
.calc-head h3{margin:0;font-size:19px;font-weight:var(--weight-display);color:#fff}
.calc-head p{margin:4px 0 0;color:#cbd2e0;font-size:13.5px}
.calc-body{padding:22px 24px 26px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.calc-grid label{display:flex;flex-direction:column;font-weight:600;font-size:14.5px;gap:6px;min-width:0}
.calc-grid label span{font-weight:400;font-size:12.5px;color:var(--muted)}
.calc-grid .calc-wide{grid-column:1/-1}
.calc-grid input,.calc-grid select{font:inherit;font-weight:400;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);width:100%;min-width:0;max-width:100%}
.calc-grid input:focus,.calc-grid select:focus{outline:none;border-color:var(--ink-deep)}
@media (max-width:640px){.calc-grid{grid-template-columns:1fr}}
.calc-result{margin-top:22px;border-top:1.5px dashed var(--border);padding-top:18px}
.calc-result a.btn{margin:6px 0 18px}
.gavin-view{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border-left:4px solid var(--accent);border-radius:var(--radius-card);padding:16px 18px;margin:26px 0}
.gavin-view img{border-radius:50%;flex-shrink:0}
.gavin-view .gv-head{font-size:13px;color:var(--muted);margin:0 0 6px}
.gavin-view p:last-child{margin:0}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.calc-total span{font-weight:600}
.calc-total strong{font-size:34px;font-weight:var(--weight-display);letter-spacing:-.02em}
table.calc-break{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 14px}
table.calc-break td{padding:7px 0;border-bottom:1px solid var(--border)}
table.calc-break td:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.calc-break tr.calc-tot td{font-weight:700;border-bottom:none}
.calc-cross{font-size:13px;color:var(--muted);margin:0 0 10px}
.calc-warn{font-size:13.5px;background:#FDF3D7;border:1px solid #EAD48A;border-radius:10px;padding:10px 14px;margin:0 0 12px}
.calc-note{font-size:12.5px;color:var(--muted);margin:0 0 16px}

/* ---- press mentions ---- */
.press{padding:8px 16px 4px}
.press-in{max-width:1160px;margin:0 auto 24px}
.press-in h2{text-align:center;font-size:clamp(20px,2.6vw,26px);font-weight:var(--weight-display);letter-spacing:-.01em;margin:0 0 8px}
.press-note{text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:560px;margin:0 auto 22px}
.press-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.press-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.press-card img{height:30px;width:auto;align-self:flex-start;object-fit:contain}
.press-card p{margin:0;font-size:14.5px;line-height:1.5;flex:1}
.press-card a{font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:2px}
.prose .press{padding:0}
.prose .press-cards{margin:0 0 8px}
.prose .press-card img{max-width:none}
/* links on dark surfaces: hero, CTA bands, compliance dark cards */
.hero-in a:not(.btn),.cta-band>div a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.hero-in a:not(.btn):hover,.cta-band>div a:not(.btn):hover{filter:brightness(1.1)}
.foot-in p{max-width:900px}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:2px}
.nav-toggle span{display:block;width:22px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s}
@media (max-width:1120px){
  .nav-in nav{display:none}
  .nav-toggle{display:block}
  .nav-in{flex-wrap:wrap;border-radius:24px;gap:12px}
  .logo{margin-right:auto}
  .nav-in.open nav{display:flex;flex-direction:column;order:5;flex:none;width:100%;gap:0;padding:6px 0 4px}
  .nav-in.open nav a{padding:11px 4px;border-top:1px solid var(--border);font-size:15.5px}
  .nav-in.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-in.open .nav-toggle span:nth-child(2){opacity:0}
  .nav-in.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
@media (max-width:420px){
  .nav-in{padding:10px 16px}
  .nav-in .btn-cta{padding:10px 14px;font-size:14px}
}

/* ---- form engine (tokens skin) ---- */
.cbf-card{max-width:560px;margin:8px 0 32px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.cbf-head{background:var(--ink-deep);color:#fff;padding:18px 22px}
.cbf-title{margin:0;font-weight:var(--weight-display);font-size:19px}
.cbf-sub{margin:4px 0 10px;color:#cbd2e0;font-size:13.5px}
.cbf-bar{height:5px;background:rgba(255,255,255,.22);border-radius:3px;overflow:hidden}
.cbf-bar i{display:block;height:100%;width:10%;background:var(--accent);transition:width .3s}
.cbf-body{padding:20px 22px}
.cbf-q{font-size:17px;font-weight:var(--weight-bold);margin:0 0 4px;color:var(--ink)}
.cbf-hint{font-size:13.5px;color:var(--muted);margin:0 0 12px}
.cbf-opt{display:block;width:100%;text-align:left;padding:13px 16px;margin-bottom:9px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);font-size:16px;font-family:inherit;color:var(--ink);cursor:pointer;transition:all .15s}
.cbf-opt:hover{border-color:var(--ink-deep)}
.cbf-opt.sel{border-color:var(--ink-deep);background:var(--bg);font-weight:var(--weight-bold)}
.cbf-opt.sel::after{content:'✓';float:right;color:var(--success);font-weight:800}
.cbf-f{margin-bottom:12px}
.cbf-f label{display:block;font-size:13.5px;font-weight:var(--weight-bold);margin-bottom:4px;color:var(--ink)}
.cbf-opt-note{font-weight:400;color:var(--muted)}
.cbf-f input,.cbf-f select{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:16px;font-family:inherit;background:var(--surface);color:var(--ink)}
.cbf-f input:focus,.cbf-f select:focus{outline:none;border-color:var(--ink-deep);box-shadow:0 0 0 3px rgba(12,14,60,.10)}
.cbf-f input.bad{border-color:#B91C1C}
.cbf-err{display:none;font-size:12.5px;color:#B91C1C;margin-top:3px}
.cbf-err.on{display:block}
.cbf-nav{display:flex;gap:10px;margin-top:14px;align-items:center}
.cbf-btn{flex:1;padding:13px 18px;background:var(--accent);color:var(--ink-deep);border:none;border-radius:var(--radius-pill);font-size:16px;font-weight:var(--weight-bold);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-cta)}
.cbf-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Dual-route deafness bands (23 Sept 2026 — Gavin: stacked buttons were
   collapsing into each other; .calc-dual previously had NO rules at all) */
.calc-dual{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:18px 0}
.calc-dual .calc-note{margin:0 0 2px}
.calc-dual .btn{margin:0}
/* Ideal Postcodes address lookup (22 Sept 2026) */
.cbf-lkrow{display:flex;gap:8px}
.cbf-lkrow input{flex:1;min-width:0}
.cbf-lkrow .cbf-lkgo{flex:0 0 auto;padding:11px 16px}
.cbf-lkmsg{margin:8px 0 0;font-size:14px;min-height:1em}
.cbf-lkmsg.cbf-lkerr{color:#B91C1C}
.cbf-lkdone{margin:12px 0 0;padding:12px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;font-size:15px}
.cbf-lkdone .cbf-lkchange{margin-left:8px;font-size:14px}
.cbf-lkmanual{margin:10px 0 0;font-size:14px}
.cbf-back{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:8px;font-family:inherit}
.cbf-consent{background:var(--bg);border-radius:10px;padding:12px 14px;margin:12px 0 0}
.cbf-consent label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:13px;line-height:1.5;color:var(--ink)}
.cbf-consent input{margin-top:2px;flex-shrink:0;width:17px;height:17px}
.cbf-mktg{background:none;border:1px solid var(--border)}
.cbf-mktg label{color:var(--muted)}
.cbf-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.cbf-note a{color:var(--ink)}
.cbf-hp{position:absolute;left:-9999px;opacity:0;height:0}
.cbf-out{padding:6px 2px}
.cbf-out h3{margin:0 0 8px;font-size:18px;color:var(--ink)}
.cbf-ok{border-left:4px solid var(--success);padding-left:14px}
.cbf-stop{border-left:4px solid #D97706;padding-left:14px}

/* ---- design pass: hero ---- */
.hero{padding:10px 16px 0}
.hero-in{max-width:1160px;margin:0 auto;background:var(--ink-deep);color:#fff;border-radius:var(--radius-card);padding:clamp(36px,6vw,72px) clamp(24px,5vw,64px)}
.hero .kicker{display:inline-block;background:rgba(255,255,255,.14);border-radius:var(--radius-pill);padding:6px 14px;font-size:13.5px;margin:0 0 18px}
.hero h1{margin:0 0 14px;font-size:clamp(32px,5vw,54px);font-weight:var(--weight-display);line-height:1.08;letter-spacing:-.02em;color:#fff}
.hero .sub{margin:0 0 22px;font-size:clamp(16px,2vw,19px);line-height:1.55;color:#cbd2e0;max-width:660px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.hero ul.checks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.hero ul.checks li{font-size:14.5px;color:#e6e9f2}
.hero ul.checks li::before{content:'✓ ';color:var(--accent);font-weight:800}
/* CMCOB 3.2.4R fee statement — must stay prominent alongside "no win, no fee" */
.hero-fees{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:#cbd2e0;max-width:720px}

/* stat strip (pulled up over hero base) */
.stats{max-width:1120px;margin:-26px auto 10px;padding:0 16px;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.stats>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px 18px}
.stats .n{font-size:22px;font-weight:var(--weight-display);letter-spacing:-.01em}
.stats .c{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}

/* category cards */
.cards{max-width:1160px;margin:16px auto;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px;display:flex;flex-direction:column}
.card h3{margin:0 0 6px;font-size:18px}
/* FCA perimeter badges — consumers must see regulated vs not before clicking */
.card .reg-tag{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:600;line-height:1;border:1px solid #bfe3cd;border-radius:var(--radius-pill);padding:4px 10px;margin:0 0 10px;color:#1a6b3c;background:#eaf7ef}
.card .reg-tag.unreg{color:var(--muted);border-color:var(--border);background:var(--bg)}
/* CMCOB 3.2.7R free-route line on cards with a DIY tool */
.card .card-free{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 12px;padding-top:8px;border-top:1px dashed var(--border)}
.card .card-free a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* outbound partner signposting at point of click */
.partner-note{font-size:12.5px;line-height:1.55;opacity:.75;margin:18px 0 0;max-width:640px}
/* inside the cta-band, `.cta-band p` outranks `.partner-note` and zeroed its
   top margin, leaving the disclaimer hugging the button (Gavin, 14 Aug) */
.cta-band .partner-note{margin:18px 0 0}
.card .card-partner{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 0;flex-basis:100%}
/* Trustpilot review invites (form done screens + letter tools) */
.tp-ask{margin-top:22px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.tp-ask p{margin:0 0 12px;font-size:14.5px}
.lt-tp{font-size:13px;color:var(--muted);margin:2px 0 14px}
.lt-tp a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.card p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.card .links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.card .links a{font-weight:var(--weight-bold);font-size:14.5px;text-decoration:none}
.card .links a.guide{color:var(--muted)}
.card .links a:hover{text-decoration:underline}
/* card redesign, 4 Aug: bottom-aligned CTA block + unified small print */
.card .card-actions{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:10px}
.card .card-cta{display:block;text-align:center;background:var(--accent);color:var(--ink-deep);font-weight:var(--weight-bold);font-size:14.5px;padding:11px 16px;border-radius:var(--radius-pill);text-decoration:none;box-shadow:var(--shadow-cta)}
.card .card-cta:hover{filter:brightness(.97)}
.card .card-guide{display:block;text-align:center;font-weight:var(--weight-bold);font-size:13.5px;color:var(--muted);text-decoration:none}
.card .card-guide:hover{text-decoration:underline}
.card .card-guide.ghost{border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:10px 16px;color:var(--ink);font-size:14.5px}
.card .card-small{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border)}
.card .card-small p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--muted);flex:none}
.card .card-small p:last-child{margin-bottom:0}
.card .card-small a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* trust trio */
.trust{max-width:1160px;margin:10px auto;padding:0 16px}
.trust h2{font-size:clamp(22px,3vw,28px);font-weight:var(--weight-display);margin:20px 4px 14px}
.trust .tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.trust .tri>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px}
.trust .tri h3{margin:0 0 8px;font-size:17px}
.trust .tri p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* how it works */
.steps{max-width:1160px;margin:8px auto 16px;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.steps>div{background:var(--bg);border:1.5px dashed var(--border);border-radius:var(--radius-card);padding:20px}
.steps .n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--ink-deep);font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.steps h3{margin:0 0 6px;font-size:16.5px}
.steps p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* section headings + spotlight */
.sect{max-width:1160px;margin:26px auto 0;padding:0 16px}
.sect h2{font-size:clamp(22px,3vw,30px);font-weight:var(--weight-display);margin:0 0 4px}
.sect p.lead{margin:0;color:var(--muted)}
.spot{max-width:1160px;margin:20px auto;padding:0 16px}
.spot>div{background:var(--ink-deep);color:#fff;border-radius:var(--radius-card);padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.spot h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px);color:#fff;font-weight:var(--weight-display)}
.spot p{margin:0 0 4px;color:#cbd2e0;max-width:560px}

/* fees disclosure component */
.fees-note{max-width:840px;margin:0 auto 8px;padding:0 20px}
.fees-note>div{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-card);padding:16px 20px}
.fees-note h2{margin:0 0 6px;font-size:18px}
.fees-note p{margin:0 0 12px;font-size:14.5px;line-height:1.6}

/* page tail: trio + fees + CTA + author aligned to one column with even rhythm */
.tail{max-width:880px;margin:8px auto 44px;padding:0 20px}
.tail .trust,.tail .fees-note,.tail .cta-band,.tail .author{max-width:none;margin:0 0 20px;padding:0}
.tail .trust h2{margin:26px 2px 14px;font-size:24px}
.tail .trust .tri{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tail .cta-band>div{padding:24px 26px}
.tail .author{margin-bottom:0}

/* compliance banners (above the fold, CMCOB) */
.notice{max-width:840px;margin:0 auto 6px;padding:0 20px}
.notice>div{border-radius:12px;padding:12px 16px;font-size:13.5px;line-height:1.55}
.notice-info>div{background:#EAF0FA;border:1px solid #C6D4EE;color:var(--ink)}
.notice-alert>div{background:#FDF3D7;border:1px solid #EAD48A;color:var(--ink)}
.notice a{color:var(--ink);text-decoration:underline}

/* buttons never underline, whatever context they render in (final rule wins ties) */
a.btn,a.btn:hover,.prose a.btn,.calc a.btn,.cta-band a.btn,.spot a.btn{text-decoration:none}

/* tables scroll horizontally instead of spilling on small screens */
@media (max-width:720px){
  .prose table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .stats{margin-top:14px}
}
.prose{overflow-wrap:break-word}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:18px 0 22px}
.factgrid .fact{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 17px;min-width:0}
.factgrid .fact h4{margin:0 0 6px;font-size:15px;line-height:1.3}
.factgrid .fact p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.start-h1{font-size:clamp(26px,4vw,38px);font-weight:var(--weight-display);line-height:1.15;letter-spacing:-.02em;margin:.3em 0 .6em}
.prose h4{font-size:17.5px;font-weight:var(--weight-bold);margin:1.1em 0 .35em}
.prose h5,.prose h6{font-size:16px;font-weight:var(--weight-bold);margin:1em 0 .3em}
/* mobile sticky claim bar */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--ink-deep);box-shadow:0 -4px 18px rgba(10,15,30,.28);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.ctabar-note{flex-basis:100%;color:#cbd2e0;font-size:12px;line-height:1.35}
.ctabar-note a{color:#fff;text-decoration:underline}
.ctabar.show{transform:none;visibility:visible}
.ctabar .btn-cta{flex:1;text-align:center;padding:12px 16px;font-size:16px}
.ctabar-x{background:none;border:0;color:#cbd2e0;font-size:28px;line-height:1;padding:2px 8px;cursor:pointer}
@media (max-width:768px){.ctabar{display:flex}}
.cbf-fail{border-left:4px solid #C0392B;padding-left:14px;margin-top:14px}
.cbf-fail p{font-size:15px;line-height:1.55}
/* complaint letter tool */
.calc-grid textarea{font:inherit;font-weight:400;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);width:100%;min-width:0;max-width:100%;resize:vertical}
.calc-grid textarea:focus{outline:none;border-color:var(--ink-deep)}
.lt-out{width:100%;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);white-space:pre-wrap;overflow:hidden}
.lt-optin{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--muted);margin-top:4px}
.lt-optin input{margin-top:2px}
.lt-send{font-size:15px}
.lt-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 14px}
.lt-actions .btn-ghost{border:1.5px solid var(--border);background:var(--surface);color:var(--ink)}
.calc-grid input[type=checkbox]{width:auto;min-width:0;flex:0 0 auto;margin:0}
/* two-route band: DIY-free beside partner route */
.two-route{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:none!important;padding:0!important}
.two-route-mid{margin:30px 0}
.two-route .route{background:var(--ink-deep);color:#fff;border-radius:var(--radius-card);padding:26px 28px;display:flex;flex-direction:column;align-items:flex-start}
.two-route .route:first-child{background:var(--surface);color:var(--ink);border:1.5px solid var(--border)}
.two-route .route h3{margin:0 0 6px;font-size:20px;font-weight:var(--weight-display);color:inherit}
.two-route .route p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:inherit;opacity:.85;flex:1}
.two-route .route p a{color:inherit}
@media (max-width:680px){.two-route{grid-template-columns:1fr}}

/* cookie consent banner (point 20, 5 Aug 2026) — equal-prominence buttons */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:1200;background:#182636;color:#fff;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:center;box-shadow:0 -3px 14px rgba(0,0,0,.3);font-size:14.5px;line-height:1.45}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;max-width:620px}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-actions button{font:inherit;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;border:1.5px solid #fff;background:transparent;color:#fff}
.cookie-actions button:hover{background:rgba(255,255,255,.12)}
.reassure-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 0}
.reassure-chips span{border:1px solid var(--border);border-radius:9999px;padding:3px 12px;font-size:12px;line-height:1.5;color:var(--muted);white-space:nowrap}
.reassure-chips span::before{content:"\2713";margin-right:6px;opacity:.7}
.reassure-chips.reassure-pre{margin:0 0 14px}
.two-route .reassure-chips span{border-color:rgba(255,255,255,.3);color:#fff;opacity:.85}