/* ==========================================================================
   My Debt Cleared — Design System
   "Confusion to clarity": the interface walks a tone ladder from midnight
   to daylight as the visitor moves from problem toward understanding.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --danger:#B3441F;
  /* Tone ladder — the spine of the brand */
  --midnight:#080B12;
  --midnight-deep:#04060B;
  --dusk:#0E1421;
  --dusk-2:#141C2C;
  --dawn:#E8EAF0;
  --day:#F7F8FA;
  --day-warm:#FCFCFD;

  /* Accents */
  --mint:#4DE2C5;
  --mint-deep:#0E7360;
  --mint-ink:#0B4A3F;
  --blue:#79AFFF;
  --blue-deep:#2560BE;
  --amber:#F0B978;
  --amber-ink:#6B4413;

  /* Text on dark */
  --t-hi:#F5F7FA;
  --t-mid:#B7C1D2;
  --t-low:#8592A8;
  --t-faint:#79879E;

  /* Text on light */
  --l-hi:#0A0E17;
  --l-mid:#414D62;
  --l-low:#5C687D;

  /* Lines */
  --line-dark:rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.16);
  --line-light:rgba(10,14,23,.10);
  --line-light-2:rgba(10,14,23,.16);

  /* Glass */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-light:rgba(255,255,255,.72);

  /* Type */
  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  /* Scale */
  --s-1:.72rem; --s0:.82rem; --s1:.94rem; --s2:1.03rem; --s3:1.18rem;
  --s4:1.42rem; --s5:1.78rem; --s6:2.25rem; --s7:2.9rem; --s8:3.8rem; --s9:5rem;

  /* Space */
  --sp1:.35rem; --sp2:.7rem; --sp3:1.1rem; --sp4:1.6rem; --sp5:2.3rem;
  --sp6:3.2rem; --sp7:4.6rem; --sp8:6.5rem; --sp9:9rem;

  --wrap:1180px; --wrap-narrow:760px; --wrap-mid:940px;
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --header-h:72px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--f-body);font-size:var(--s2);line-height:1.65;
  background:var(--midnight);color:var(--t-mid);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{color:var(--ink-hi);margin:0;font-family:var(--f-display);font-weight:600;line-height:1.1;letter-spacing:-.025em}
p{margin:0 0 var(--sp3)}
ul,ol{margin:0 0 var(--sp3);padding-left:1.15rem}
li{margin-bottom:.45rem}
hr{border:0;border-top:1px solid var(--line-dark);margin:var(--sp5) 0}
:focus-visible{outline:2.5px solid var(--mint);outline-offset:3px;border-radius:4px}
::selection{background:var(--mint);color:var(--midnight)}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.wrap-mid{max-width:var(--wrap-mid)}
.sect{padding-block:clamp(3.4rem,7.5vw,6.5rem);position:relative;isolation:isolate}
.sect-tight{padding-block:clamp(2.4rem,5vw,4rem)}
.grid{display:grid;gap:var(--sp4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.flow>*+*{margin-top:var(--sp3)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 4. The tone ladder ---------- */
.tone{position:relative;isolation:isolate}
.tone-midnight{background:var(--midnight);color:var(--t-mid)}
.tone-deep{background:var(--midnight-deep);color:var(--t-mid)}

/* ---- Tone tokens -------------------------------------------------------
   Components reference --ink-*, --rule and --accent. Each tone sets them, so
   a light section nested inside a dark page resolves to light-on-dark values
   automatically. Never write `.tone-x .component{color:...}` again. */
.tone-midnight,.tone-deep,.tone-dusk,.tone-dawn{
  --danger:#FF9B8A;
  --ink-hi:var(--t-hi);--ink-mid:var(--t-mid);--ink-low:var(--t-low);
  --ink-faint:var(--t-faint);--rule:var(--line-dark);--rule-2:var(--line-dark-2);
  --accent:var(--mint);--accent-2:var(--blue);--surface:var(--glass);--surface-solid:#0F1421;
}
.tone-day,.tone-day-warm{
  --danger:#B3441F;
  --ink-hi:var(--l-hi);--ink-mid:var(--l-mid);--ink-low:var(--l-low);
  --ink-faint:var(--l-low);--rule:var(--line-light);--rule-2:var(--line-light-2);
  --accent:var(--mint-deep);--accent-2:var(--blue-deep);--surface:#fff;--surface-solid:#fff;
}
.tone-dusk{background:linear-gradient(180deg,var(--dusk) 0%,var(--dusk-2) 100%);color:var(--t-mid)}
.tone-dawn{background:linear-gradient(180deg,#151D2C 0%,#28324a 60%,#3C4761 100%);color:#E6E9F0}
/* The seam carries the final fade to daylight and never holds text. */
.seam-dawn{height:clamp(90px,10vw,160px);background:linear-gradient(180deg,#3C4761 0%,#7B8496 45%,var(--day) 100%)}
.tone-day{background:var(--day);color:var(--l-mid)}
.tone-day-warm{background:var(--day-warm);color:var(--l-mid)}


/* The horizon: a hairline seam between tones, lit from the accent */
.horizon{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,rgba(77,226,197,.55) 22%,rgba(121,175,255,.45) 62%,transparent);position:relative;z-index:2}

/* Ambient field — very slow drift, only on dark tones */
.field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field~.wrap{position:relative;z-index:1}
.field::before,.field::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;
}
/* The 34s infinite drift was removed deliberately. Animating a blur(80px)
   layer at 52vw keeps the compositor awake for the whole visit, which costs
   battery and causes scroll jank on low-end Android — a large share of this
   audience, often late at night on a handset they cannot afford to replace.
   The gradient is identical when static; only the cost changed. */
.field::before{width:52vw;height:52vw;top:-18%;left:-12%;background:radial-gradient(circle,rgba(77,226,197,.5),transparent 68%)}
.field::after{width:46vw;height:46vw;bottom:-22%;right:-10%;background:radial-gradient(circle,rgba(121,175,255,.45),transparent 68%);animation-delay:-16s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4%,-5%,0) scale(1.14)}}

/* ---------- 5. Type utilities ---------- */
.eyebrow{
  font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:500;display:block;margin-bottom:var(--sp3)}
.eyebrow.blue{color:var(--accent-2)}
.h-hero{font-size:clamp(2.5rem,6.4vw,var(--s9));letter-spacing:-.04em;line-height:1.02;font-weight:600}
.h1{font-size:clamp(2.1rem,4.6vw,var(--s8));letter-spacing:-.035em;line-height:1.06}
.h2{font-size:clamp(1.7rem,3.4vw,var(--s7));letter-spacing:-.03em;line-height:1.1}
.h3{font-size:clamp(1.3rem,2.3vw,var(--s5));letter-spacing:-.02em}
.h4{font-size:var(--s4);letter-spacing:-.015em}
.h5{font-size:var(--s3);letter-spacing:-.01em}
.lead{color:var(--ink-mid);font-size:clamp(1.06rem,1.7vw,var(--s4));line-height:1.55;font-weight:400}
.muted{color:var(--ink-low);font-size:var(--s1)}
.data{font-family:var(--f-data);font-size:var(--s0);letter-spacing:.04em}
.tabular{font-variant-numeric:tabular-nums}
mark{background:linear-gradient(180deg,transparent 58%,rgba(77,226,197,.32) 58%);color:inherit;padding:0 .08em}

/* Prose */
.prose{max-width:70ch;font-size:var(--s3);line-height:1.72}
.prose h2{font-size:clamp(1.5rem,2.8vw,2.15rem);margin:var(--sp6) 0 var(--sp3);scroll-margin-top:110px}
.prose h3{font-size:clamp(1.18rem,2vw,1.5rem);margin:var(--sp5) 0 var(--sp2);scroll-margin-top:110px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin-bottom:var(--sp4)}
.prose li{margin-bottom:.6rem}
.prose a:not(.btn){color:var(--mint-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(23,169,142,.4)}
.prose a:not(.btn):hover{text-decoration-color:var(--mint-deep)}
.prose strong{color:var(--l-hi);font-weight:650}

/* Answer-first block: the opening paragraph that resolves the query */
.answer{
  border-left:2px solid var(--mint);padding:var(--sp3) 0 var(--sp3) var(--sp4);
  font-size:var(--s4);line-height:1.55;color:var(--l-hi);font-weight:450;
  margin-bottom:var(--sp5)}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;justify-content:center;
  padding:.92rem 1.6rem;border-radius:100px;border:1px solid transparent;
  font-family:var(--f-body);font-weight:600;font-size:var(--s2);letter-spacing:-.01em;
  cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;text-align:center;
}
.btn-primary{background:var(--mint);color:#04231D;box-shadow:0 4px 26px -6px rgba(77,226,197,.5)}
.btn-primary:hover{background:#6BEBD3;transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(77,226,197,.62)}
.btn-ghost{background:transparent;border-color:var(--rule-2);color:var(--ink-hi)}
.btn-ghost:hover{border-color:var(--mint);background:rgba(77,226,197,.07);transform:translateY(-2px)}
.btn-lg{padding:1.1rem 2.1rem;font-size:var(--s3)}
.btn-sm{padding:.6rem 1.1rem;font-size:var(--s1)}
.btn-block{width:100%}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

/* ---------- 7. Glass cards ---------- */
.card{background:var(--surface);border:1px solid var(--rule);color:var(--ink-mid);
  background:var(--glass);border:1px solid var(--line-dark);border-radius:var(--r-l);
  padding:var(--sp5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:all .38s var(--ease);position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.07),transparent 42%);opacity:0;transition:opacity .38s var(--ease);
}
a.card:hover,.card-i:hover{transform:translateY(-4px);border-color:rgba(77,226,197,.34);background:var(--glass-2)}
a.card:hover::after,.card-i:hover::after{opacity:1}
.card-sm{padding:var(--sp4);border-radius:var(--r-m)}
.card h3,.card h4{margin-bottom:var(--sp2)}
.card p:last-child{margin-bottom:0}

/* Card index — small monospace marker for genuine sequences only */
.card-num{font-family:var(--f-data);font-size:var(--s-1);color:var(--mint);letter-spacing:.14em;display:block;margin-bottom:var(--sp3)}

/* ---------- 8. Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;transition:all .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* One header treatment. The on-light variant was removed — see mdc.js. */
.hdr.stuck{background:rgba(8,11,18,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom-color:var(--line-dark)}
.hdr-in{display:flex;align-items:center;gap:var(--sp4);width:100%}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.03em;color:var(--t-hi);flex-shrink:0}
.logo-mk{width:26px;height:26px;flex-shrink:0}
.logo-w{display:flex;flex-direction:column;line-height:.98;white-space:nowrap}
.logo-w span:last-child{color:var(--mint)}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav>a,.nav-t{
  white-space:nowrap;padding:.5rem .7rem;border-radius:8px;font-size:var(--s1);font-weight:500;color:var(--t-mid);
  background:none;border:0;cursor:pointer;transition:color .2s,background .2s;display:flex;align-items:center;gap:.3rem;
}
.nav>a:hover,.nav-t:hover,.nav-t[aria-expanded=true]{color:var(--mint)}
.nav-t svg{transition:transform .25s var(--ease)}
.nav-t[aria-expanded=true] svg{transform:rotate(180deg)}
.nav-item{position:relative}
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:rgba(14,20,33,.96);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  border:1px solid var(--line-dark);border-radius:var(--r-m);padding:var(--sp4);
  min-width:440px;opacity:0;visibility:hidden;transition:all .28s var(--ease);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.mega a{display:block;padding:.6rem .7rem;border-radius:8px;font-size:var(--s1);color:var(--t-mid);transition:all .2s}
.mega a:hover{background:rgba(77,226,197,.09);color:var(--mint)}
.mega a b{display:block;color:var(--t-hi);font-weight:550;font-size:var(--s1)}
.mega a span{font-size:var(--s-1);color:var(--t-faint)}
.mega a:hover b{color:var(--mint)}
.mega-foot{margin-top:var(--sp3);padding-top:var(--sp3);border-top:1px solid var(--line-dark);font-size:var(--s0)}
.hdr-cta{margin-left:var(--sp3)}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;margin-left:auto;color:var(--t-hi)}

@media(max-width:1180px){
  .nav,.hdr-cta{display:none}
  .burger{display:block}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:950;background:var(--midnight);
  transform:translateX(100%);transition:transform .42s var(--ease);
  overflow-y:auto;padding:var(--sp4) 0 var(--sp8);
}
.drawer.open{transform:translateX(0)}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp5)}
.drawer-x{background:none;border:0;color:var(--t-hi);cursor:pointer;padding:.5rem}
.dgroup{border-bottom:1px solid var(--line-dark)}
.dgroup>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 0;background:none;border:0;color:var(--t-hi);font-size:var(--s3);
  font-family:var(--f-display);font-weight:550;cursor:pointer;text-align:left;
}
.dgroup>button svg{transition:transform .3s var(--ease);flex-shrink:0}
.dgroup>button[aria-expanded=true] svg{transform:rotate(45deg)}
.dpanel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.dpanel a{display:block;padding:.62rem 0 .62rem 1rem;font-size:var(--s2);color:var(--t-mid);border-left:1px solid var(--line-dark)}
.dpanel a:hover{color:var(--mint)}
.drawer>.wrap>a.dsolo{display:block;padding:1rem 0;border-bottom:1px solid var(--line-dark);font-family:var(--f-display);font-size:var(--s3);font-weight:550;color:var(--t-hi)}

/* ---------- 9. Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--header-h);position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap{width:100%}
.hero-in{max-width:900px;position:relative;z-index:2}
.hero h1{margin-bottom:var(--sp3)}
.hero .lead{max-width:56ch;margin-bottom:var(--sp4)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp3);margin-bottom:var(--sp4)}
.hero-meta{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-low)}
.hero-meta span{display:flex;align-items:center;gap:.5rem}
.hero-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--mint)}

/* Rotating figure — the amount cycles, then resolves to the promise */
.cycler{display:inline-block;position:relative;min-width:4.2ch;color:var(--mint);font-variant-numeric:tabular-nums}
.cycler-out{animation:cyOut .34s var(--ease) forwards}
.cycler-in{animation:cyIn .34s var(--ease) forwards}
@keyframes cyOut{to{opacity:0;transform:translateY(-.32em) rotateX(38deg)}}
@keyframes cyIn{from{opacity:0;transform:translateY(.32em) rotateX(-38deg)}to{opacity:1;transform:none}}

/* Page hero (interior) */
.phero{padding-top:calc(var(--header-h) + clamp(2.6rem,6vw,5rem));padding-bottom:clamp(2.4rem,5vw,4rem);position:relative;overflow:hidden}
.phero h1{margin-bottom:var(--sp4);max-width:19ch}
.phero .lead{max-width:62ch}
.phero-wide h1{max-width:24ch}

/* ---------- 10. Breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-family:var(--f-data);font-size:var(--s-1);color:var(--ink-low);margin-bottom:var(--sp4);letter-spacing:.05em}
.crumbs a:hover{color:var(--mint)}
.crumbs .sep{opacity:.4}

/* ---------- 11. Tiles (problem selector) ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
@media(max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{
  display:flex;flex-direction:column;gap:.7rem;padding:1.25rem 1.15rem;border-radius:var(--r-m);
  background:var(--glass);border:1px solid var(--line-dark);transition:all .32s var(--ease);
  min-height:118px;justify-content:space-between;
}
.tile:hover{background:var(--glass-2);border-color:rgba(77,226,197,.36);transform:translateY(-3px)}
.tile-ic{width:24px;height:24px;color:var(--mint);opacity:.9}
.tile b{font-size:var(--s1);font-weight:550;color:var(--t-hi);line-height:1.3;display:block}
.tile span{font-size:var(--s-1);color:var(--t-faint);font-family:var(--f-data)}

/* ---------- 12. Comparison table ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-m);border:1px solid var(--rule);background:var(--surface)}
table.cmp{width:100%;border-collapse:collapse;font-size:var(--s1);min-width:640px}
table.cmp th,table.cmp td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-mid)}
table.cmp thead th{
  font-family:var(--f-display);font-size:var(--s2);font-weight:600;color:var(--l-hi);
  background:#F1F3F7;position:sticky;top:0;z-index:1;letter-spacing:-.01em;
}
table.cmp tbody th{font-weight:550;color:var(--ink-hi);width:190px;font-size:var(--s1)}
table.cmp tbody tr:hover td{background:rgba(77,226,197,.045)}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:0}
.yes{color:var(--accent);font-weight:700}
.no{color:var(--ink-low)}
.tbl-note{font-size:var(--s0);color:var(--l-low);margin-top:var(--sp3)}

/* Filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp4)}
.chip{
  padding:.48rem 1rem;border-radius:100px;border:1px solid var(--line-light-2);background:transparent;
  font-size:var(--s1);cursor:pointer;transition:all .25s var(--ease);color:var(--l-mid);font-weight:500;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--surface-solid)}

/* ---------- 13. Conversion bridge ---------- */
.bridge{
  border-radius:var(--r-l);padding:clamp(1.8rem,3.6vw,2.9rem);margin-block:var(--sp6);
  background:linear-gradient(135deg,rgba(77,226,197,.11),rgba(121,175,255,.07));
  border:1px solid rgba(77,226,197,.25);position:relative;overflow:hidden;
}
.bridge h3{margin-bottom:var(--sp2);color:var(--ink-hi)}
.bridge p{margin-bottom:var(--sp4);max-width:56ch}
.bridge-row{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:center}
.bridge .data{color:var(--accent)}

/* ---------- 14. Notices ---------- */
.notice{
  border-radius:var(--r-m);padding:var(--sp4);font-size:var(--s1);line-height:1.6;
  border:1px solid;margin-block:var(--sp4);
}
.notice b{display:block;margin-bottom:.4rem;font-family:var(--f-display);font-size:var(--s2);font-weight:600}
.notice p:last-child{margin-bottom:0}
.notice-free{background:rgba(121,175,255,.09);border-color:rgba(121,175,255,.34);color:var(--ink-mid)}
.notice-free b{color:var(--accent-2)}
.notice-risk{background:rgba(240,185,120,.11);border-color:rgba(240,185,120,.4);color:var(--ink-mid)}
.notice-risk b{color:var(--amber-ink)}
.notice a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 15. E-E-A-T meta strip ---------- */
.eeat{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding:var(--sp3) 0;
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  font-family:var(--f-data);font-size:var(--s-1);color:var(--ink-low);letter-spacing:.04em;margin-bottom:var(--sp5);
}
.eeat b{color:var(--ink-mid);font-weight:500}
.eeat a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Sources */
.sources{margin-top:var(--sp6);padding-top:var(--sp4);border-top:1px solid var(--line-light)}
.sources h4{font-size:var(--s2);margin-bottom:var(--sp3)}
.sources ol{font-size:var(--s0);color:var(--l-low);padding-left:1.2rem}
.sources li{margin-bottom:.4rem}

/* ---------- 16. TOC ---------- */
.layout-doc{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:1000px){.layout-doc{grid-template-columns:1fr}.toc{display:none}}
.toc{position:sticky;top:104px}
.toc-h{font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;color:var(--l-low);margin-bottom:var(--sp3)}
.toc a{display:block;padding:.4rem 0 .4rem .9rem;font-size:var(--s1);color:var(--l-low);border-left:1px solid var(--line-light);transition:all .22s}
.toc a:hover,.toc a.on{color:var(--mint-deep);border-left-color:var(--mint-deep)}

/* ---------- 17. FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  padding:1.15rem 2.4rem 1.15rem 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--f-display);font-size:var(--s3);font-weight:550;color:var(--ink-hi);transition:color .22s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.55rem;width:11px;height:11px;
  border-right:1.8px solid var(--mint-deep);border-bottom:1.8px solid var(--mint-deep);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.9rem}
.faq summary:hover{color:var(--accent)}
.faq-a{color:var(--ink-mid);padding:0 0 1.3rem;font-size:var(--s2);max-width:72ch}
.faq-a p:last-child{margin-bottom:0}

/* ---------- 18. Stats ---------- */
.stat{padding:var(--sp4) 0}
.stat-n{font-family:var(--f-display);font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:600;letter-spacing:-.04em;color:var(--mint);line-height:1;font-variant-numeric:tabular-nums}
.stat-l{font-size:var(--s1);color:var(--ink-mid);margin-top:.6rem;max-width:26ch}
.stat-s{font-family:var(--f-data);font-size:var(--s-1);color:var(--ink-low);margin-top:.4rem;letter-spacing:.04em}

/* ---------- 19. Funnel ---------- */
.funnel-page{min-height:100svh;display:flex;flex-direction:column;transition:background 1.1s var(--ease),color 1.1s var(--ease)}
.fn-stage-0{background:#04060B}.fn-stage-1{background:#080B12}.fn-stage-2{background:#0C1220}
.fn-stage-3{background:#121A2C}.fn-stage-4{background:#1A2439}.fn-stage-5{background:#243049}
.fn-stage-6{background:#33415C}.fn-stage-7{background:#4E5C77}.fn-stage-8{background:#F7F8FA}
.fn-bar{position:fixed;top:0;left:0;right:0;z-index:80;padding:1rem 0;background:inherit}
.fn-rail{height:2px;background:rgba(255,255,255,.13);border-radius:2px;position:relative;overflow:visible}
.fn-stage-8 .fn-rail{background:rgba(10,14,23,.12)}
.fn-fill{height:100%;background:linear-gradient(90deg,var(--mint-deep),var(--mint) 60%,var(--blue));border-radius:2px;width:0;transition:width .6s var(--ease);position:relative}
.fn-fill::after{content:"";position:absolute;right:-3px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--mint);transform:translateY(-50%);box-shadow:0 0 14px 3px rgba(77,226,197,.75)}
.fn-meta{display:flex;justify-content:space-between;font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;color:var(--t-faint);margin-top:.65rem}
.fn-stage-8 .fn-meta{color:var(--l-low)}
.fn-body{flex:1;display:flex;align-items:center;padding:6.5rem 0 3rem}
.fn-step{display:none;animation:stepIn .5s var(--ease)}
.fn-step.on{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fn-q{font-family:var(--f-display);font-size:clamp(1.65rem,4vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--t-hi);margin-bottom:var(--sp3);max-width:18ch}
.fn-stage-8 .fn-q{color:var(--l-hi)}
.fn-hint{color:var(--t-low);margin-bottom:var(--sp5);max-width:52ch;font-size:var(--s2)}
.fn-stage-8 .fn-hint{color:var(--l-low)}
.fn-opts{display:grid;gap:.7rem;max-width:660px}
.fn-opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.fn-opts.two{grid-template-columns:1fr}}
.fn-opt{
  display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.3rem;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);cursor:pointer;
  transition:all .26s var(--ease);text-align:left;font-size:var(--s3);color:var(--t-hi);width:100%;font-weight:500;
}
/* fn-stage-8 is the final contact and consent screen. These three rules
   painted a white background and set text to var(--l-hi), which was dark
   ink when the light palette existed. When the tone ladder was flattened,
   --l-hi was aliased to #F4F7FA — so this became near-white text on white,
   on the one screen where the lead is actually captured. Same root cause
   as the header bug. They now use the dark surface treatment like every
   other control on the site. */
.fn-stage-8 .fn-opt{background:rgba(255,255,255,.06);border-color:var(--rule-2);color:var(--t-hi)}
.fn-opt:hover{border-color:var(--mint);background:rgba(77,226,197,.1);transform:translateX(4px)}
.fn-opt[aria-pressed=true]{border-color:var(--mint);background:rgba(77,226,197,.16)}
.fn-box{width:20px;height:20px;border-radius:6px;border:1.6px solid rgba(255,255,255,.28);flex-shrink:0;display:grid;place-items:center;transition:all .24s}
.fn-opt[aria-pressed=true] .fn-box{background:var(--mint);border-color:var(--mint)}
.fn-box svg{opacity:0;color:#04231D;transition:opacity .2s}
.fn-opt[aria-pressed=true] .fn-box svg{opacity:1}
.fn-nav{display:flex;gap:var(--sp3);align-items:center;margin-top:var(--sp5);flex-wrap:wrap}
.fn-back{background:none;border:0;color:var(--ink-mid);cursor:pointer;font-size:var(--s1);padding:.5rem 0;display:flex;align-items:center;gap:.4rem}
.fn-back:hover{color:var(--accent)}
.fn-field{margin-bottom:var(--sp4);max-width:520px}
.fn-field label{display:block;font-size:var(--s1);font-weight:550;margin-bottom:.5rem;color:var(--t-hi)}
.fn-stage-8 .fn-field label{color:var(--l-hi)}
.fn-field input{
  width:100%;padding:.95rem 1.15rem;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);color:var(--t-hi);font-size:var(--s3);transition:all .24s;
}
.fn-stage-8 .fn-field input{background:rgba(255,255,255,.06);border-color:var(--rule-2);color:var(--t-hi)}
.fn-field input:focus{border-color:var(--mint);outline:none;box-shadow:0 0 0 3px rgba(77,226,197,.18)}
.fn-field input::placeholder{color:var(--t-faint)}
.fn-err{color:#FF9B8A;font-size:var(--s0);margin-top:.4rem;display:none}
.fn-field.bad input{border-color:#FF7A63}
.fn-field.bad .fn-err{display:block}
.consent{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-m);
  padding:var(--sp4);margin-bottom:var(--sp4);max-width:620px;font-size:var(--s1);line-height:1.6;
}
.fn-stage-8 .consent{background:#fff;border-color:var(--line-light-2)}
.consent h4{font-size:var(--s2);margin-bottom:var(--sp2);color:var(--ink-hi)}
.consent ul{font-size:var(--s0);color:var(--ink-mid);margin-bottom:var(--sp3)}

.cbox{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:var(--sp3);cursor:pointer;font-size:var(--s1);color:var(--ink-mid)}
.cbox:last-child{margin-bottom:0}
.cbox input{margin-top:.28rem;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.cbox span{color:var(--ink-mid)}
.hp label{color:transparent}

/* My Debt Map result */
.map-hd{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--r-m);overflow:hidden;margin-bottom:var(--sp5)}
.map-cell{background:#fff;padding:var(--sp4)}
.map-cell .data{color:var(--l-low);text-transform:uppercase;letter-spacing:.11em;font-size:var(--s-1);display:block;margin-bottom:.4rem}
.map-cell b{font-family:var(--f-display);font-size:var(--s4);color:var(--l-hi);font-weight:600;letter-spacing:-.02em}

/* ---------- 20. Footer ---------- */
.ftr{background:var(--midnight-deep);color:var(--t-low);padding-top:var(--sp7);border-top:1px solid var(--line-dark)}
.ftr-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--sp5);padding-bottom:var(--sp6)}
@media(max-width:980px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr h5{font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.15em;text-transform:uppercase;color:var(--t-faint);margin-bottom:var(--sp3);font-weight:500}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.5rem}
.ftr a{font-size:var(--s1);color:var(--t-low);transition:color .2s}
.ftr a:hover{color:var(--mint)}
.ftr-brand .logo{margin-bottom:var(--sp3)}
.ftr-brand p{font-size:var(--s1);max-width:34ch;line-height:1.6}
.ftr-legal{border-top:1px solid var(--line-dark);padding:var(--sp5) 0;font-size:var(--s0);line-height:1.65;color:var(--t-faint)}
.ftr-legal p{margin-bottom:var(--sp3)}
.ftr-legal strong{color:var(--t-low);font-weight:600}
.ftr-bot{display:flex;flex-wrap:wrap;gap:var(--sp3) var(--sp5);justify-content:space-between;align-items:center;padding-bottom:var(--sp5);font-size:var(--s0);color:var(--t-faint)}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:1.1rem}

/* ---------- 21. Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:880;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(8,11,18,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line-dark);display:none;transform:translateY(110%);transition:transform .4s var(--ease);
}
.sticky-cta.up{transform:translateY(0)}
@media(max-width:820px){.sticky-cta{display:block}body{padding-bottom:0}}

/* ---------- 22. Link lists / index grids ---------- */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.6rem}
.linkgrid a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;
  border-radius:12px;border:1px solid var(--rule);font-size:var(--s1);color:var(--ink-mid);
  transition:all .26s var(--ease);background:var(--surface);font-weight:500;
}
.linkgrid a:hover{border-color:var(--accent);color:var(--ink-hi);transform:translateX(3px)}
.linkgrid a::after{content:"→";color:var(--accent);opacity:0;transition:all .26s;transform:translateX(-6px)}
.linkgrid a:hover::after{opacity:1;transform:none}
.tone-midnight .linkgrid a::after,.tone-dusk .linkgrid a::after{color:var(--mint)}

/* ---------- 23. Glossary ---------- */
.gl-search{
  width:100%;max-width:520px;padding:1rem 1.25rem;border-radius:100px;border:1px solid var(--line-light-2);
  background:#fff;font-size:var(--s3);margin-bottom:var(--sp5);
}
.gl-search:focus{border-color:var(--mint-deep);outline:none;box-shadow:0 0 0 3px rgba(23,169,142,.14)}
.gl-item{padding:var(--sp4) 0;border-bottom:1px solid var(--line-light)}
.gl-item h3{font-size:var(--s4);margin-bottom:.5rem}
.gl-item p{margin-bottom:.6rem;max-width:74ch}
.gl-item.hide{display:none}
.gl-none{display:none;padding:var(--sp5) 0;color:var(--l-low)}
.gl-none.on{display:block}

/* ---------- 24. Reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .field::before,.field::after{animation:none}
}

/* ---------- 25. Misc ---------- */
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .82rem;border-radius:100px;background:rgba(77,226,197,.13);border:1px solid rgba(77,226,197,.3);font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.09em;text-transform:uppercase;color:var(--mint-deep)}
.tone-midnight .pill,.tone-dusk .pill{color:var(--mint)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(77,226,197,.55)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(77,226,197,0)}}
.pc-form{display:flex;gap:.6rem;max-width:460px;flex-wrap:wrap}
.pc-form input{flex:1;min-width:180px;padding:.95rem 1.2rem;border-radius:100px;border:1px solid var(--line-dark-2);background:rgba(255,255,255,.05);color:var(--t-hi);font-size:var(--s3);text-transform:uppercase}
.pc-form input:focus{border-color:var(--mint);outline:none}
.pc-out{margin-top:var(--sp4);display:none}
.pc-out.on{display:block}
.callout-num{font-family:var(--f-display);font-size:var(--s6);font-weight:600;color:var(--mint);letter-spacing:-.03em;line-height:1}

/* ---- Solution cards on the homepage -------------------------------- */
.card-sol{display:flex;flex-direction:column}
.card-sol h3{font-size:var(--s3);letter-spacing:-.02em;margin-bottom:.7rem}
.card-sol .card-meta{font-size:var(--s-1);color:var(--accent);line-height:1.7;letter-spacing:.02em;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--rule)}
.card-sol .card-body{font-size:var(--s0);color:var(--ink-mid);flex:1}
.card-sol .card-cta{margin-top:1.3rem}
.card-sol .card-cta .data{color:var(--accent);font-size:var(--s-1)}
@media(min-width:861px) and (max-width:1200px){.grid.g4:has(.card-sol){grid-template-columns:repeat(2,1fr)}}

/* ---- Contrast corrections ------------------------------------------ */
/* Footer sits on the darkest surface, so its body text needs to be lighter
   than the general faint token to clear 4.5:1. */
.ftr{color:#8A97AC}
.ftr h5{color:#95A1B5}
.ftr a{color:#C3CBD9}
.ftr a:hover{color:var(--mint)}
.ftr .ftr-legal,.ftr .ftr-legal p,.ftr small{color:#8A97AC}

/* Hero trust chips were failing on midnight. */
.hero .trust,.hero .trust span{color:#8A97AC}

/* A ghost button must take its ink from the tone it sits in, not a fixed value. */
.btn-ghost{border:1px solid var(--rule-2);color:var(--ink-hi);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--ink-hi);background:rgba(127,127,127,.07)}

/* Mono/data accents on light surfaces use the darker accent automatically now,
   but explicit .data spans inside light CTAs still need it. */
.tone-day .data,.tone-day-warm .data{color:var(--accent)}

/* Funnel footnote sits on the deepest surface and needs lighter ink. */
.fn-wrap .fn-note,.fn-wrap .fn-note a,.fn-free,.fn-free a{color:#8A97AC}
.fn-free a,.fn-wrap .fn-note a{text-decoration:underline;text-underline-offset:3px}
.fn-free a:hover,.fn-wrap .fn-note a:hover{color:var(--mint)}
.fn-optout{margin-top:1.6rem;font-size:.86rem;max-width:56ch;color:#8A97AC}
.fn-optout a{color:#8A97AC;text-decoration:underline;text-underline-offset:3px}
.fn-optout a:hover{color:var(--mint)}

/* ---- Postcode form: must follow the tone it sits in ------------------ */
.pc-form input{border:1px solid var(--rule-2);background:var(--surface);color:var(--ink-hi)}
.pc-form input::placeholder{color:var(--ink-low);text-transform:none}
.pc-form input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(14,115,96,.16)}

/* ---- Three-nations visual ------------------------------------------- */
.nations-vis{display:flex;flex-direction:column;gap:.8rem}
.nation-card{padding:1.15rem 1.3rem;border-radius:var(--r-m);border:1px solid var(--rule);
  background:var(--surface);display:flex;flex-direction:column;gap:.3rem;position:relative;overflow:hidden}
.nation-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.nation-card:nth-child(2)::before{background:var(--accent-2)}
.nation-card:nth-child(3)::before{background:var(--amber)}
.nation-card b{font-family:var(--f-display);font-size:var(--s3);font-weight:600;color:var(--ink-hi);letter-spacing:-.02em}
.nation-card .data{font-size:var(--s-1);color:var(--ink-low);letter-spacing:.03em}

/* ---- Overflow containment ------------------------------------------- */
/* Grid and flex children default to min-width:auto, which lets wide
   children (tables, <pre>, long tokens) push past the viewport instead of
   scrolling inside their own wrapper. */
.grid>*,.prose>*,.art-main,.art-side{min-width:0}
.tbl-wrap{max-width:100%}
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* The off-canvas drawer must be genuinely inert when closed, not merely
   pushed out of sight — otherwise it stays focusable and screen-reader
   reachable, and can extend the scrollable area. */
.drawer{visibility:hidden}
.drawer.open{visibility:visible}

/* ---- What-changed box ------------------------------------------------ */
.whatchanged{border:1px solid var(--rule);border-left:3px solid var(--amber);
  border-radius:var(--r-m);padding:var(--sp4);margin-block:var(--sp5);background:rgba(240,185,120,.07)}
.wc-tag{font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-ink);display:block;margin-bottom:.5rem}
.whatchanged h3{font-size:var(--s4);margin-bottom:.8rem}
.whatchanged p{margin-bottom:.8rem;color:var(--ink-mid)}
.wc-src{font-size:var(--s-1);font-family:var(--f-data);color:var(--ink-low);margin-bottom:0}
.stamp{font-family:var(--f-data);font-size:var(--s-1);line-height:1.7;color:var(--ink-low);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--sp3) 0;margin-block:var(--sp4)}
.stamp b{color:var(--ink-mid);font-weight:500}
.fsrc{font-family:var(--f-data);font-size:var(--s-2,.72rem);color:var(--accent);
  margin-left:.5rem;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
table.facts tbody th{width:34%}
.draft-banner{background:#7A2E14;color:#FFE8DC;padding:.75rem 1.2rem;font-size:.9rem;
  text-align:center;position:relative;z-index:200}
.draft-banner code{background:rgba(0,0,0,.28);padding:.1rem .4rem;border-radius:4px}

/* ---- Urgent triage panel inside the funnel --------------------------- */
.urgent-list{display:grid;gap:.6rem;margin-top:1.4rem}
.urgent-list a{display:block;padding:1rem 1.2rem;border-radius:12px;
  border:1px solid var(--line-dark-2);background:rgba(255,255,255,.04);transition:all .24s var(--ease)}
.urgent-list a:hover{border-color:var(--amber);background:rgba(240,185,120,.09);transform:translateX(3px)}
.urgent-list b{display:block;color:var(--t-hi);font-family:var(--f-display);font-size:var(--s3);
  font-weight:550;margin-bottom:.25rem;letter-spacing:-.02em}
.urgent-list span{font-size:var(--s1);color:#AEB6C6;line-height:1.5}
.fn-urgent .fn-q{color:var(--amber)}
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Native select inside the dark funnel: the control is dark, but the dropdown
   list is painted by the OS on a light background, so options need dark ink. */
.fn-field select{width:100%;padding:.9rem 1.1rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  color:var(--t-hi);font-size:var(--s2);font-family:inherit}
.fn-field select:focus{border-color:var(--mint);outline:none;box-shadow:0 0 0 3px rgba(77,226,197,.18)}
.fn-field select option{color:#0A0E17;background:#fff}

/* =====================================================================
   FORM SYSTEM — one visual language for every form on the site
   ===================================================================== */

/* ---- Glass card shell ------------------------------------------------ */
.f-card{
  position:relative;border-radius:var(--r-l,20px);padding:clamp(1.6rem,3.5vw,2.6rem);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
  overflow:hidden;isolation:isolate;
}
/* Slow aurora drift behind the glass. Sits under content, never over it. */
.f-card::before{
  content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 18%, rgba(77,226,197,.30), transparent 66%),
    radial-gradient(34% 38% at 82% 74%, rgba(121,175,255,.26), transparent 66%),
    radial-gradient(30% 30% at 58% 108%, rgba(240,185,120,.16), transparent 66%);
  filter:blur(46px);opacity:.85;
  /* drift removed: this sits behind the funnel card for the entire
     time someone is answering, on the one page that must not jank. */
}
/* Hairline top edge — the thing that makes glass read as glass. */
.f-card::after{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
@keyframes fdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(3%,-4%,0) scale(1.1)}
}
.tone-day .f-card,.tone-day-warm .f-card{
  background:linear-gradient(158deg,#fff,#fcfdfe);
  border-color:var(--line-light);
  box-shadow:0 26px 64px -38px rgba(10,14,23,.32), inset 0 1px 0 #fff;
}
.tone-day .f-card::before,.tone-day-warm .f-card::before{opacity:.4}

/* ---- Fields ---------------------------------------------------------- */
.f-field{position:relative;margin-bottom:1.15rem}
.f-field label{
  display:block;font-size:var(--s0);font-weight:550;letter-spacing:.01em;
  color:var(--ink-hi);margin-bottom:.45rem;
}
.f-field .f-note{display:block;font-size:var(--s-1);color:var(--ink-low);margin-top:.35rem}

.f-field input,.f-field select,.f-field textarea{
  width:100%;padding:.95rem 1.1rem;border-radius:13px;font-size:var(--s2);
  font-family:inherit;color:var(--ink-hi);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .24s var(--ease),box-shadow .28s var(--ease),background .24s var(--ease);
}
.tone-day .f-field input,.tone-day .f-field select,.tone-day .f-field textarea,
.tone-day-warm .f-field input,.tone-day-warm .f-field select,.tone-day-warm .f-field textarea{
  background:#fff;border-color:var(--line-light-2);
}
.f-field textarea{min-height:120px;resize:vertical;line-height:1.55}
.f-field input::placeholder,.f-field textarea::placeholder{color:var(--ink-low)}
.f-field select option{color:#0A0E17;background:#fff}

/* The glow. Deliberately a ring rather than a hard outline, so focus reads
   as illumination rather than as an error state. */
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--mint);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(77,226,197,.17), 0 0 26px -6px rgba(77,226,197,.4);
}
.tone-day .f-field input:focus,.tone-day .f-field textarea:focus,.tone-day .f-field select:focus,
.tone-day-warm .f-field input:focus,.tone-day-warm .f-field textarea:focus{
  border-color:var(--mint-deep);background:#fff;
  box-shadow:0 0 0 4px rgba(14,115,96,.13), 0 0 22px -8px rgba(14,115,96,.3);
}

/* Validation state, shown with a mark as well as colour so it does not rely
   on colour alone. */
.f-field.is-good input,.f-field.is-good select,.f-field.is-good textarea{
  border-color:rgba(77,226,197,.55);
}
.f-field.is-good::after{
  content:"✓";position:absolute;right:1rem;top:2.45rem;
  color:var(--mint);font-size:.95rem;font-weight:700;pointer-events:none;
  animation:fpop .34s var(--ease);
}
.tone-day .f-field.is-good::after,.tone-day-warm .f-field.is-good::after{color:var(--mint-deep)}
@keyframes fpop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

.f-field.is-bad input,.f-field.is-bad select,.f-field.is-bad textarea{
  border-color:var(--danger);box-shadow:0 0 0 4px rgba(196,82,47,.16);
}
.f-field .f-err{
  display:none;font-size:var(--s-1);color:var(--danger);margin-top:.4rem;font-weight:500;
}
.f-field.is-bad .f-err{display:block;animation:fslide .26s var(--ease)}
@keyframes fslide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}

/* ---- Submit ---------------------------------------------------------- */
.f-submit{width:100%;margin-top:.6rem;position:relative;overflow:hidden}
/* Sheen sweep on hover — one pass, not a loop. */
.f-submit::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-120%);
}
.f-submit:hover::after{transform:translateX(120%);transition:transform .75s var(--ease)}
.f-submit.is-sending{pointer-events:none;opacity:.75}
.f-submit.is-sending::before{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid rgba(0,0,0,.25);border-top-color:#04231D;border-radius:50%;
  animation:fspin .62s linear infinite;
}
@keyframes fspin{to{transform:rotate(360deg)}}

.shake{animation:fshake .42s}
@keyframes fshake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(2px)}
}

/* ---- Success --------------------------------------------------------- */
.f-done{
  text-align:center;padding:clamp(2rem,4vw,3rem);border-radius:var(--r-l,20px);
  background:linear-gradient(158deg,rgba(77,226,197,.13),rgba(121,175,255,.07));
  border:1px solid rgba(77,226,197,.3);
  animation:fdone .5s var(--ease);
}
@keyframes fdone{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.f-done .f-tick{
  width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%;
  background:var(--mint);color:#04231D;display:grid;place-items:center;
  font-size:1.6rem;font-weight:700;
  box-shadow:0 0 0 0 rgba(77,226,197,.5);animation:ftick .7s var(--ease) .12s both;
}
@keyframes ftick{
  0%{transform:scale(0);box-shadow:0 0 0 0 rgba(77,226,197,.55)}
  60%{transform:scale(1.12)}
  100%{transform:scale(1);box-shadow:0 0 0 18px rgba(77,226,197,0)}
}
.f-done h3{font-size:var(--s5);margin-bottom:.7rem}
.f-done p{color:var(--ink-mid);max-width:46ch;margin:0 auto .7rem}
.f-done .f-ref{font-family:var(--f-data);font-size:var(--s-1);color:var(--ink-low);letter-spacing:.06em}
.is-sent{display:none}

/* ---- Trust strip under a form --------------------------------------- */
.f-trust{
  display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.3rem;
  font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-low);
}
.f-trust span{display:flex;align-items:center;gap:.42rem}
.f-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .f-card::before,.f-submit::after,.f-done,.f-done .f-tick,.shake,.f-field.is-good::after{
    animation:none!important;transition:none!important;transform:none!important;
  }
}
.f-formerr{display:none;color:var(--danger);font-size:var(--s0);margin-top:.9rem;font-weight:500}
.f-formerr:not([hidden]){display:block;animation:fslide .26s var(--ease)}
.f-h{font-size:var(--s5);margin-bottom:.6rem}
.f-intro{color:var(--ink-mid);margin-bottom:1.6rem;max-width:52ch}
.f-wrap{max-width:720px}

/* ---- Funnel stage 8 is daylight, so it must carry the LIGHT tone tokens.
   The stage classes changed the background only; anything using --ink-* kept
   resolving against the dark page tone and rendered light-on-light. Setting
   the tokens fixes every component at once instead of one selector at a
   time. ------------------------------------------------------------------ */
.fn-stage-8{
  --danger:#B3441F;
  --ink-hi:var(--l-hi);--ink-mid:var(--l-mid);--ink-low:var(--l-low);
  --ink-faint:var(--l-low);--rule:var(--line-light);--rule-2:var(--line-light-2);
  --accent:var(--mint-deep);--accent-2:var(--blue-deep);
  --surface:#fff;--surface-solid:#fff;
}
.fn-stage-7{
  --danger:#FF9B8A;
  --ink-hi:#F5F7FA;--ink-mid:#DCE2EC;--ink-low:#B4BECD;
  --rule:rgba(255,255,255,.18);--rule-2:rgba(255,255,255,.26);
}
.fn-stage-8 .f-field input,.fn-stage-8 .f-field select,.fn-stage-8 .f-field textarea{
  background:rgba(255,255,255,.06);border-color:var(--rule-2);color:var(--t-hi);
}
.fn-stage-8 .f-field input:focus,.fn-stage-8 .f-field select:focus{
  border-color:var(--mint-deep);
  box-shadow:0 0 0 4px rgba(14,115,96,.13),0 0 22px -8px rgba(14,115,96,.3);
}
.fn-stage-8 .f-field.is-good::after{color:var(--mint-deep)}
.fn-stage-8 .cbox span{color:var(--l-mid)}
.fn-stage-8 .consent h4{color:var(--l-hi)}
.fn-stage-8 .fn-optout,.fn-stage-8 .fn-optout a{color:var(--l-low)}
.fn-stage-8 .fn-sum,.fn-stage-8 .fn-sum b{color:var(--l-hi)}
.fn-stage-8 .fn-sum .data{color:var(--l-low)}
.consent-sub{font-size:.9rem;margin:1.3rem 0 .6rem;color:var(--ink-mid)}
.consent-sub strong{color:var(--ink-hi)}
.consent-err{display:none;font-size:.86rem;margin-top:.6rem;font-weight:500;color:var(--danger)}


/* Dark funnel stages carry the dark ink tokens explicitly, so any component
   rendered there resolves correctly regardless of which step it belongs to. */
.fn-stage-0,.fn-stage-1,.fn-stage-2,.fn-stage-3,.fn-stage-4,.fn-stage-5,.fn-stage-6{
  --danger:#FF9B8A;
  --ink-hi:var(--t-hi);--ink-mid:var(--t-mid);--ink-low:#8A97AC;
  --rule:var(--line-dark);--rule-2:var(--line-dark-2);
  --accent:var(--mint);--accent-2:var(--blue);--surface:var(--glass);
}
.fn-sum .data,.fn-sum span{color:var(--ink-low)}

/* ---- Contextual related block ---------------------------------------- */
.related-ctx{margin-block:var(--sp6);padding-top:var(--sp5);border-top:1px solid var(--rule)}
.related-ctx h3{font-size:var(--s3);margin-bottom:var(--sp3);color:var(--ink-hi)}

/* =====================================================================
   LIGHT SYSTEM v2 — depth, separation, and surfaces that read as objects
   =====================================================================
   The light zones were a flat wash: one background colour, no elevation,
   no seam between sections, so everything blurred into one page. Dark
   sections got all the atmosphere and light sections got none.

   Three moves fix it:
     1. The canvas is tinted and lit, not flat grey.
     2. Alternating sections sit on different surfaces, so the eye can
        tell where one idea ends and the next begins.
     3. Anything that is a discrete object — card, table, notice, FAQ —
        gets real elevation instead of a 1px border.
   ------------------------------------------------------------------ */

:root{
  --lift-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --lift-2:0 2px 4px -1px rgba(16,24,40,.05), 0 8px 20px -6px rgba(16,24,40,.10);
  --lift-3:0 4px 8px -2px rgba(16,24,40,.06), 0 18px 44px -12px rgba(16,24,40,.16);
  --lift-4:0 8px 16px -4px rgba(16,24,40,.07), 0 32px 72px -20px rgba(16,24,40,.22);
  --ring-mint:0 0 0 1px rgba(14,115,96,.16);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---- 1. The canvas is lit ------------------------------------------- */
.tone-day,.tone-day-warm{position:relative;isolation:isolate}
.tone-day::before,.tone-day-warm::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 46% at 8% 0%,   rgba(77,226,197,.11), transparent 62%),
    radial-gradient(60% 44% at 96% 12%, rgba(121,175,255,.10), transparent 62%),
    radial-gradient(52% 40% at 50% 100%,rgba(240,185,120,.07), transparent 66%);
}
/* Paper grain, so large light areas are not dead flat. */
.tone-day::after,.tone-day-warm::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.07 0 0 0 0 0.12 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tone-day{background-color:#F7F8FA;background-image:linear-gradient(180deg,#F6F8FB 0%,#FAFBFD 55%,#F4F7FA 100%)}
.tone-day-warm{background-color:#FCFCFD;background-image:linear-gradient(180deg,#FCFCFD 0%,#F8F9FC 100%)}

/* ---- 2. Sections separate ------------------------------------------- */
/* A hairline with a mint bloom at its centre — the light-mode equivalent
   of the horizon seams used in the dark zones. */
.tone-day + .tone-day-warm::before,
.tone-day-warm + .tone-day::before{content:none}
.sect.tone-day + .sect.tone-day-warm,
.sect.tone-day-warm + .sect.tone-day{position:relative}
.sect.tone-day + .sect.tone-day-warm::after,
.sect.tone-day-warm + .sect.tone-day::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(14,115,96,.28) 22%,rgba(44,107,214,.22) 50%,rgba(14,115,96,.28) 78%,transparent);
  opacity:.55;
}

/* A raised panel variant for sections that should read as a distinct block. */
.panel{
  background:#fff;border:1px solid rgba(16,24,40,.07);border-radius:var(--r-l,22px);
  box-shadow:var(--lift-3),var(--edge);padding:clamp(1.8rem,4vw,3.2rem);position:relative;overflow:hidden;
}
.panel::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(14,115,96,.45),transparent);
}

/* ---- 3. Cards become objects ---------------------------------------- */
.tone-day .card,.tone-day-warm .card{
  background-color:#fff;background-image:linear-gradient(168deg,#fff,#fcfdfe);
  border:1px solid rgba(16,24,40,.075);
  box-shadow:var(--lift-2),var(--edge);
  border-radius:16px;transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
}
.tone-day a.card:hover,.tone-day-warm a.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--lift-4),var(--ring-mint),var(--edge);
  border-color:rgba(14,115,96,.24);
}
.tone-day .card-sol,.tone-day-warm .card-sol{position:relative;overflow:hidden}
.tone-day .card-sol::after,.tone-day-warm .card-sol::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--mint-deep),rgba(44,107,214,.65));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);
}
.tone-day a.card-sol:hover::after,.tone-day-warm a.card-sol:hover::after{transform:scaleY(1)}

/* ---- Nation cards --------------------------------------------------- */
.tone-day .nation-card,.tone-day-warm .nation-card{
  background:#fff;border-color:rgba(16,24,40,.07);
  box-shadow:var(--lift-2),var(--edge);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tone-day .nation-card:hover{transform:translateX(4px);box-shadow:var(--lift-3),var(--edge)}
.nation-card::before{width:4px}

/* ---- 4. The comparison table as a premium data object --------------- */
.tone-day .tbl-wrap,.tone-day-warm .tbl-wrap{
  border:1px solid rgba(16,24,40,.08);border-radius:18px;
  box-shadow:var(--lift-3),var(--edge);background:#fff;overflow:auto;
}
.tone-day table.cmp thead th,.tone-day-warm table.cmp thead th{
  background-color:#EEF3F8;background-image:linear-gradient(180deg,#F2F6FA,#EAF0F6);
  border-bottom:1px solid rgba(16,24,40,.10);
  font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--l-hi);position:sticky;top:0;z-index:2;
}
.tone-day table.cmp thead th a,.tone-day-warm table.cmp thead th a{color:var(--mint-deep)}
.tone-day table.cmp tbody tr:nth-child(odd) td,
.tone-day table.cmp tbody tr:nth-child(odd) th,
.tone-day-warm table.cmp tbody tr:nth-child(odd) td,
.tone-day-warm table.cmp tbody tr:nth-child(odd) th{background:rgba(121,175,255,.035)}
.tone-day table.cmp tbody tr:hover td,.tone-day table.cmp tbody tr:hover th,
.tone-day-warm table.cmp tbody tr:hover td,.tone-day-warm table.cmp tbody tr:hover th{
  background:rgba(77,226,197,.09);
}
.tone-day table.cmp tbody th,.tone-day-warm table.cmp tbody th{
  position:sticky;left:0;background:#fff;z-index:1;
  box-shadow:1px 0 0 rgba(16,24,40,.06);
}
.tone-day table.cmp tbody tr:nth-child(odd) th,
.tone-day-warm table.cmp tbody tr:nth-child(odd) th{background:#F7FAFD}
table.cmp td,table.cmp th{transition:background .22s var(--ease)}
.yes{font-weight:600}

/* ---- 5. Link grids get accent bars ---------------------------------- */
.tone-day .linkgrid a,.tone-day-warm .linkgrid a{
  background:#fff;border:1px solid rgba(16,24,40,.075);
  box-shadow:var(--lift-1),var(--edge);border-radius:13px;
  padding-left:1.15rem;position:relative;overflow:hidden;
}
.tone-day .linkgrid a::before,.tone-day-warm .linkgrid a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mint-deep);
  transform:scaleY(0);transform-origin:center;transition:transform .32s var(--ease);
}
.tone-day .linkgrid a:hover,.tone-day-warm .linkgrid a:hover{
  transform:translateX(3px);box-shadow:var(--lift-2),var(--ring-mint),var(--edge);
  border-color:rgba(14,115,96,.2);
}
.tone-day .linkgrid a:hover::before,.tone-day-warm .linkgrid a:hover::before{transform:scaleY(1)}
.linkgrid a::after{transition:transform .32s var(--ease)}
.linkgrid a:hover::after{transform:translateX(4px)}

/* ---- 6. Notices ------------------------------------------------------ */
.tone-day .notice,.tone-day-warm .notice{
  border-radius:16px;box-shadow:var(--lift-1),var(--edge);
  border-left-width:3px;padding:1.3rem 1.5rem;position:relative;
}
.tone-day .notice-free,.tone-day-warm .notice-free{
  background-color:#F1F6FF;background-image:linear-gradient(140deg,rgba(121,175,255,.12),rgba(121,175,255,.045));
  border-color:rgba(44,107,214,.3);border-left-color:var(--blue-deep);
}
.tone-day .notice-risk,.tone-day-warm .notice-risk{
  background-color:#FDF6EC;background-image:linear-gradient(140deg,rgba(240,185,120,.16),rgba(240,185,120,.06));
  border-color:rgba(200,140,60,.32);border-left-color:var(--amber);
}
.notice b{display:block;margin-bottom:.4rem;font-size:var(--s2)}

/* ---- 7. FAQ becomes cards ------------------------------------------- */
.tone-day .faq,.tone-day-warm .faq{border-top:0;display:grid;gap:.7rem}
.tone-day .faq details,.tone-day-warm .faq details{
  border:1px solid rgba(16,24,40,.075);border-radius:14px;background:#fff;
  box-shadow:var(--lift-1),var(--edge);border-bottom:1px solid rgba(16,24,40,.075);
  padding:0 1.35rem;transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.tone-day .faq details[open],.tone-day-warm .faq details[open]{
  box-shadow:var(--lift-3),var(--ring-mint),var(--edge);border-color:rgba(14,115,96,.2);
}
.tone-day .faq summary,.tone-day-warm .faq summary{padding:1.15rem 0}
.tone-day .faq-a,.tone-day-warm .faq-a{padding-bottom:1.15rem}

/* ---- 8. Section headers get an accent rule -------------------------- */
.tone-day .eyebrow,.tone-day-warm .eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
}
.tone-day .eyebrow::before,.tone-day-warm .eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--mint-deep),rgba(44,107,214,.5));
}

/* ---- 9. Stat blocks -------------------------------------------------- */
.tone-day .stat,.tone-day-warm .stat{
  background:#fff;border:1px solid rgba(16,24,40,.07);border-radius:16px;
  box-shadow:var(--lift-2),var(--edge);padding:1.5rem;
}

/* ---- 10. Bridge / CTA block ----------------------------------------- */
.tone-day .bridge,.tone-day-warm .bridge{
  background-color:#EFF9F6;background-image:linear-gradient(150deg,rgba(77,226,197,.13),rgba(121,175,255,.09) 55%,rgba(255,255,255,.6));
  border:1px solid rgba(14,115,96,.18);border-radius:20px;
  box-shadow:var(--lift-3),var(--edge);position:relative;overflow:hidden;
}
.tone-day .bridge::before,.tone-day-warm .bridge::before{
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(14,115,96,.5),transparent);
}

@media(prefers-reduced-motion:reduce){
  .tone-day .card,.tone-day .linkgrid a,.tone-day .nation-card,
  .tone-day-warm .card,.tone-day-warm .linkgrid a{transition:none!important}
  .tone-day a.card:hover,.tone-day .linkgrid a:hover{transform:none!important}
}

/* ---- Table header legibility ---------------------------------------- */
/* Uppercase mono at the small size read as decoration rather than as column
   labels. It is the key to the whole table, so it gets weight and size. */
.tone-day table.cmp thead th,.tone-day-warm table.cmp thead th{
  font-size:var(--s0);letter-spacing:.04em;font-weight:650;
  padding-top:1.05rem;padding-bottom:1.05rem;
}
.tone-day table.cmp thead th a,.tone-day-warm table.cmp thead th a{
  font-weight:650;text-decoration:none;border-bottom:1px solid rgba(14,115,96,.3);
  padding-bottom:1px;
}
.tone-day table.cmp thead th a:hover,.tone-day-warm table.cmp thead th a:hover{
  border-bottom-color:var(--mint-deep);
}
/* First column header is a spacer, so it should not shout. */
.tone-day table.cmp thead th:first-child,.tone-day-warm table.cmp thead th:first-child{
  background:linear-gradient(180deg,#EEF3F8,#E6EDF4);
}

/* .yes is applied to <td>, so display must stay table-cell — setting
   inline-flex pulled every cell out of the table layout and collapsed the
   whole row into one column. The marker is an inline-block instead. */
td.yes,th.yes{padding-left:1rem}
.yes::before{
  content:"";position:absolute;left:1rem;top:1.28em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(14,115,96,.14);
}
table.cmp td.yes{position:relative;padding-left:2rem}

/* ---- Section rhythm -------------------------------------------------- */
/* Larger scale jump between section heading and body, so the eye lands on
   the heading first instead of scanning a wall of even-weight text. */
.tone-day .h2,.tone-day-warm .h2{letter-spacing:-.032em}
.sect .prose > h2:not(:first-child){margin-top:var(--sp6)}

/* Table caption sits under the object it describes, quietly. */
.tbl-note{margin-top:.9rem;font-size:var(--s-1);line-height:1.6;max-width:74ch}

/* =====================================================================
   DARK SYSTEM v2 — matching depth so the two halves feel like one site
   ===================================================================== */

/* Glass cards in the dark zones get the same object treatment as light. */
.tone-midnight .card,.tone-deep .card,.tone-dusk .card{
  background-color:rgba(255,255,255,.035);
  background-image:linear-gradient(162deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:16px;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
}
.tone-midnight a.card:hover,.tone-deep a.card:hover,.tone-dusk a.card:hover{
  transform:translateY(-4px);
  border-color:rgba(77,226,197,.38);
  box-shadow:0 32px 80px -30px rgba(0,0,0,.95),
             0 0 40px -14px rgba(77,226,197,.35),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.tone-midnight .card-sol::after,.tone-dusk .card-sol::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--mint),rgba(121,175,255,.7));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);
}
.tone-midnight a.card-sol:hover::after,.tone-dusk a.card-sol:hover::after{transform:scaleY(1)}

/* Tiles pick up the same lift. */
.tone-dusk .tile,.tone-midnight .tile{
  transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease);
}
.tone-dusk .tile:hover,.tone-midnight .tile:hover{
  transform:translateY(-3px);border-color:rgba(77,226,197,.4);
  box-shadow:0 20px 46px -22px rgba(0,0,0,.9),0 0 30px -14px rgba(77,226,197,.4);
}

/* Eyebrow accent rule, mirroring the light zones. */
.tone-midnight .eyebrow,.tone-dusk .eyebrow,.tone-dawn .eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
}
.tone-midnight .eyebrow::before,.tone-dusk .eyebrow::before,.tone-dawn .eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--mint),rgba(121,175,255,.55));
}

/* Stat numbers get a soft bloom so the data reads as the hero of its band. */
.stat-n{text-shadow:0 0 42px rgba(77,226,197,.28)}

/* Primary button: mint core with an outward glow rather than a flat fill. */
.btn-primary{
  box-shadow:0 10px 30px -10px rgba(77,226,197,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .26s var(--ease),box-shadow .3s var(--ease),filter .26s var(--ease);
}
.btn-primary:hover{
  transform:translateY(-2px);filter:saturate(1.06);
  box-shadow:0 18px 44px -12px rgba(77,226,197,.68), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active{transform:translateY(0)}

/* Horizon seam between consecutive dark bands. */
.sect.tone-midnight + .sect.tone-dusk,
.sect.tone-dusk + .sect.tone-dawn,
.sect.tone-dusk + .sect.tone-dusk{position:relative}
.sect.tone-midnight + .sect.tone-dusk::before,
.sect.tone-dusk + .sect.tone-dawn::before,
.sect.tone-dusk + .sect.tone-dusk::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(77,226,197,.32) 30%,rgba(121,175,255,.26) 50%,rgba(77,226,197,.32) 70%,transparent);
}

@media(prefers-reduced-motion:reduce){
  .tone-midnight a.card:hover,.tone-dusk a.card:hover,.btn-primary:hover,
  .tone-dusk .tile:hover{transform:none!important}
}

/* =====================================================================
   HERO — atmosphere
   ===================================================================== */
.hero{position:relative}

/* Vignette: pulls the eye to the headline and stops the corners feeling
   like empty screen. Sits above the aurora, below the content. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 40%,transparent 30%,rgba(4,6,11,.55) 100%);
}
.hero .wrap{position:relative;z-index:1}

/* A slow light sweep across the top edge — the only looping motion on the
   page, and slow enough to read as ambience rather than animation. */
/* .hero .field::after removed — the hero no longer uses .field. */
100%{transform:translateX(130%) rotate(6deg);opacity:.85}
}

/* Headline gets a faint luminance lift so it sits above the vignette. */
.h-hero{text-shadow:0 2px 60px rgba(0,0,0,.6)}

/* Trust chips: small dots picking up the accent, so the row reads as a
   deliberate element rather than leftover text. */
.hero .trust{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center}
.hero .trust span{display:inline-flex;align-items:center;gap:.5rem}
.hero .trust span::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px rgba(77,226,197,.9);flex:0 0 4px;
}

/* Scroll cue. */
.hero-cue{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:1;
  width:22px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:12px;
  display:grid;place-items:start center;padding-top:7px;pointer-events:none;
}
.hero-cue::before{
  content:"";width:3px;height:7px;border-radius:2px;background:var(--mint);
  animation:cue 2.1s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1}70%{opacity:0;transform:translateY(11px)}}
@media(max-width:860px){.hero-cue{display:none}}

@media(prefers-reduced-motion:reduce){
  .hero-beam,.hero-cue::before,.hero .field::after{animation:none!important}
}

/* Stat numbers now sit on white cards in the light zones, so the bright mint
   must switch to the deep accent. The glow also has to go — a bloom on a
   light surface reads as a rendering fault, not as luminance. */
.tone-day .stat-n,.tone-day-warm .stat-n,.tone-day .stat .stat-n{
  color:var(--mint-deep);text-shadow:none;
}
.tone-day .stat,.tone-day-warm .stat{position:relative;overflow:hidden}
.tone-day .stat::before,.tone-day-warm .stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--mint-deep),rgba(37,96,190,.55));
}

/* =====================================================================
   FLAT TONE SYSTEM — solid surfaces, no gradient blending
   =====================================================================
   The dark-to-light "clarity gradient" was doing too much: every section
   was a different shade, mid-fade colours had to be contrast-tested
   individually, and the transitions read as blur rather than structure.

   Replaced with two solid surfaces that alternate. Structure now comes
   from a crisp rule and a spacing change, not from a fade. The palette
   is unchanged — it just does the work directly.
   ------------------------------------------------------------------ */

/* Surface A: the base. Surface B: one step up, for alternating bands. */
.tone-midnight,.tone-deep,.tone-day,.tone-day-warm,.tone-dusk,.tone-dawn{
  background-image:none !important;
}
.tone-midnight,.tone-day{background-color:#080B12}
.tone-deep{background-color:#04060B}
.tone-dusk,.tone-dawn,.tone-day-warm{background-color:#0C111C}

/* One ink scale for the whole site. No per-zone light/dark switching. */
.tone-midnight,.tone-deep,.tone-dusk,.tone-dawn,.tone-day,.tone-day-warm,
.fn-stage-0,.fn-stage-1,.fn-stage-2,.fn-stage-3,.fn-stage-4,
.fn-stage-5,.fn-stage-6,.fn-stage-7,.fn-stage-8{
  --danger:#FF9B8A;
  --ink-hi:#F4F7FA;
  --ink-mid:#C2CBD9;
  --ink-low:#8A97AC;
  --ink-faint:#8A97AC;
  --rule:rgba(255,255,255,.09);
  --rule-2:rgba(255,255,255,.16);
  --accent:var(--mint);
  --accent-2:var(--blue);
  --surface:rgba(255,255,255,.035);
  --surface-solid:#101623;
  color:var(--ink-mid);
}

/* Funnel stages: same two surfaces, no ladder. */
.fn-stage-0,.fn-stage-2,.fn-stage-4,.fn-stage-6,.fn-stage-8{background:#080B12}
.fn-stage-1,.fn-stage-3,.fn-stage-5,.fn-stage-7{background:#0C111C}
.fn-stage-8 .fn-rail{background:rgba(255,255,255,.12)}

/* The dawn seam existed only to fade into daylight. Nothing to fade to. */
.seam-dawn{display:none}

/* A single hairline marks every section change. */
.sect + .sect,.sect + .sect-tight,.sect-tight + .sect{position:relative}
.sect + .sect::before,.sect + .sect-tight::before,.sect-tight + .sect::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 18%,rgba(77,226,197,.30) 50%,rgba(255,255,255,.10) 82%,transparent);
}

/* Ambient washes belonged to the gradient system. */
.tone-day::before,.tone-day-warm::before,.tone-day::after,.tone-day-warm::after{content:none}

/* Surfaces are dark again, so every light-mode override reverts. */
.tone-day .card,.tone-day-warm .card,
.tone-day .nation-card,.tone-day-warm .nation-card,
.tone-day .stat,.tone-day-warm .stat,
.tone-day .linkgrid a,.tone-day-warm .linkgrid a,
.tone-day .faq details,.tone-day-warm .faq details,
.tone-day .tbl-wrap,.tone-day-warm .tbl-wrap,
.tone-day table.cmp tbody th,.tone-day-warm table.cmp tbody th{
  background-color:rgba(255,255,255,.035);
  background-image:none;
  border-color:rgba(255,255,255,.09);
  box-shadow:0 22px 54px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--ink-mid);
}
.tone-day table.cmp thead th,.tone-day-warm table.cmp thead th{
  background-color:#131A28;background-image:none;color:var(--ink-hi);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.tone-day table.cmp thead th:first-child,.tone-day-warm table.cmp thead th:first-child{
  background:#131A28;
}
.tone-day table.cmp tbody tr:nth-child(odd) td,
.tone-day table.cmp tbody tr:nth-child(odd) th,
.tone-day-warm table.cmp tbody tr:nth-child(odd) td,
.tone-day-warm table.cmp tbody tr:nth-child(odd) th{background:rgba(255,255,255,.022)}
.tone-day table.cmp tbody tr:hover td,.tone-day table.cmp tbody tr:hover th,
.tone-day-warm table.cmp tbody tr:hover td,.tone-day-warm table.cmp tbody tr:hover th{
  background:rgba(77,226,197,.07);
}
.tone-day .stat-n,.tone-day-warm .stat-n,.tone-day .stat .stat-n{
  color:var(--mint);text-shadow:0 0 42px rgba(77,226,197,.28);
}
.tone-day .notice-free,.tone-day-warm .notice-free{
  background-color:rgba(121,175,255,.08);background-image:none;
  border-color:rgba(121,175,255,.26);border-left-color:var(--blue);
}
.tone-day .notice-risk,.tone-day-warm .notice-risk{
  background-color:rgba(240,185,120,.09);background-image:none;
  border-color:rgba(240,185,120,.28);border-left-color:var(--amber);
}
.notice-free b{color:var(--blue)}
.notice-risk b{color:var(--amber)}
.tone-day .bridge,.tone-day-warm .bridge{
  background-color:rgba(77,226,197,.07);background-image:none;
  border-color:rgba(77,226,197,.22);
}
.tone-day .f-card,.tone-day-warm .f-card{
  background-color:rgba(255,255,255,.045);
  background-image:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border-color:rgba(255,255,255,.11);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
}
.tone-day .f-field input,.tone-day .f-field select,.tone-day .f-field textarea,
.tone-day-warm .f-field input,.tone-day-warm .f-field select,.tone-day-warm .f-field textarea,
.fn-stage-8 .f-field input,.fn-stage-8 .f-field select,.fn-stage-8 .f-field textarea{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);color:var(--ink-hi);
}
.pc-form input{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);color:var(--ink-hi)}
.tone-day .f-field input:focus,.tone-day-warm .f-field input:focus,
.fn-stage-8 .f-field input:focus,.fn-stage-8 .f-field select:focus{
  border-color:var(--mint);
  box-shadow:0 0 0 4px rgba(77,226,197,.17), 0 0 26px -6px rgba(77,226,197,.4);
}
.tone-day .f-field.is-good::after,.fn-stage-8 .f-field.is-good::after{color:var(--mint)}
.fn-stage-8 .cbox span,.fn-stage-8 .consent h4,.fn-stage-8 .fn-optout,
.fn-stage-8 .fn-optout a,.fn-stage-8 .fn-sum,.fn-stage-8 .fn-sum b{color:inherit}
.fn-stage-8 .fn-sum b{color:var(--ink-hi)}
.hp label{color:transparent}

/* Card hover: one behaviour everywhere. */
a.card:hover{
  transform:translateY(-4px);
  border-color:rgba(77,226,197,.38);
  box-shadow:0 32px 80px -30px rgba(0,0,0,.95),
             0 0 40px -14px rgba(77,226,197,.35),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.card-sol::after{background:linear-gradient(180deg,var(--mint),rgba(121,175,255,.7))}
.eyebrow::before{background:linear-gradient(90deg,var(--mint),rgba(121,175,255,.55))!important}
.linkgrid a::before{background:var(--mint)!important}
.yes::before{background:var(--mint);box-shadow:0 0 0 3px rgba(77,226,197,.16)}
.hero::after{content:none}

/* =====================================================================
   TYPOGRAPHY — one system, applied consistently
   =====================================================================
   Three faces, each with one job:
     Bricolage Grotesque  display only — headings, stat figures
     Figtree              all reading text
     IBM Plex Mono        data, labels, eyebrows, references

   Nothing else. Where a face was used outside its job the page read as
   inconsistent even when every individual element looked fine.
   ------------------------------------------------------------------ */

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures contextual;
}
body{
  font-family:var(--f-body);
  font-weight:400;
  letter-spacing:-.006em;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}

/* Display: tight tracking that loosens as size drops, which is how optical
   sizing works — large type needs less space, small type needs more. */
h1,.h1,.h-hero{font-family:var(--f-display);font-weight:600;letter-spacing:-.042em;line-height:1.02}
h2,.h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.032em;line-height:1.1}
h3,.h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.022em;line-height:1.16}
h4,h5{font-family:var(--f-display);font-weight:600;letter-spacing:-.014em;line-height:1.25}

/* Reading text. 68ch is the comfortable measure for this size; longer lines
   make the eye lose its place on the return sweep. */
.prose p,.faq-a p,.answer,.lead{max-width:68ch}
.prose p{margin-bottom:1.15em;line-height:1.68}
.prose li{line-height:1.62;margin-bottom:.5em}
.prose h2{margin-top:2.6em;margin-bottom:.7em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em;margin-bottom:.55em}
.lead{line-height:1.55;letter-spacing:-.012em;font-weight:400}

/* Numerals: tabular everywhere they are compared, lining everywhere else. */
table.cmp,.stat-n,.f-field input,.tot,.data{font-variant-numeric:tabular-nums lining-nums}
.stat-n{font-family:var(--f-display);font-weight:600;letter-spacing:-.04em}

/* Mono is for labels and data only, never for reading. */
.data,.eyebrow,.crumbs,.stamp,.hero-meta,.f-trust,.wc-tag,.fsrc,.tbl-note{
  font-family:var(--f-data);font-weight:400;
}
.eyebrow{font-size:.74rem;letter-spacing:.15em;font-weight:500}
.stamp{font-size:.78rem;line-height:1.7;letter-spacing:.01em}

/* Links in body copy: underline that sits clear of descenders. */
.prose a:not(.btn){
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(77,226,197,.45);
  transition:text-decoration-color .2s var(--ease),color .2s var(--ease);
}
.prose a:not(.btn):hover{text-decoration-color:var(--mint)}

/* Strong should read as emphasis, not as a second heading level. */
.prose strong,.prose b{font-weight:600;color:var(--ink-hi)}

/* Buttons and UI take the body face at a heavier weight, never the display
   face — display letterforms are drawn for size, and shrink badly. */
.btn,.chip,.fn-opt,.linkgrid a{font-family:var(--f-body);font-weight:550;letter-spacing:-.008em}

/* Balance short headings across lines instead of leaving one orphan word. */
h1,h2,.h1,.h2,.h-hero,.fn-q{text-wrap:balance}
.lead,.answer{text-wrap:pretty}

/* Hyphenation only where the measure is genuinely narrow. */
@media(max-width:620px){
  .prose p,.faq-a p{hyphens:auto;-webkit-hyphens:auto}
}

/* Leftovers from the light system, now on a dark surface. These were the
   hardcoded values that never went through the ink tokens. */
.answer{color:var(--ink-hi)}
.toc-h,.tbl-note{color:var(--ink-low)}
.eeat a,.stamp a,.fsrc,.data{color:var(--accent)}
.wc-tag{color:var(--amber)}
.whatchanged{
  background:rgba(240,185,120,.07);
  border-color:rgba(255,255,255,.09);
  border-left-color:var(--amber);
}
.whatchanged h3{color:var(--ink-hi)}
table.cmp thead th a{color:var(--mint)}
.yes{color:var(--mint)}
.no{color:var(--ink-low)}
.tone-day .yes,.tone-day-warm .yes{color:var(--mint)}
.chip[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#04231D}
.btn-primary{background:var(--mint);color:#04231D}
.pc-form input::placeholder,.f-field input::placeholder,.f-field textarea::placeholder{color:var(--ink-low)}
.f-field select option{color:#0A0E17;background:#fff}
.bridge h3{color:var(--ink-hi)}
.nation-card b{color:var(--ink-hi)}
.nation-card .data{color:var(--ink-low)}
.gl-item h3{color:var(--ink-hi)}
.f-done{background:rgba(77,226,197,.10);border-color:rgba(77,226,197,.3)}
.f-done h3{color:var(--ink-hi)}

/* The light palette has no surfaces left to sit on. Rather than hunt every
   remaining reference, the light variables are aliased to their dark
   equivalents — one place to reverse if a light zone ever returns. */
:root{
  --mint-deep:#4DE2C5;
  --blue-deep:#79AFFF;
  --amber-ink:#F5B457;
  --l-hi:#F4F7FA;
  --l-mid:#C2CBD9;
  --l-low:#8A97AC;
  --line-light:rgba(255,255,255,.09);
  --line-light-2:rgba(255,255,255,.16);
}

/* The summary grid was a white panel from the light system. It is now a
   glass panel like everything else. */
.map-cell{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:var(--sp4);
}
.map-cell .data{color:var(--ink-low)}
.map-cell b{color:var(--ink-hi)}
.map-hd{border:0;gap:1px;background:rgba(255,255,255,.07)}
/* Native <option> is painted by the OS on a white list, so it needs dark ink
   regardless of the control's own styling. */
option,select option,.fld select option{color:#0A0E17;background-color:#fff}
.fld input,.fld select{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);color:var(--ink-hi)}
.fld label{color:var(--ink-hi)}
.tot{border-color:var(--rule)}
.tot b{color:var(--ink-hi)}
.sol-links a{border-color:var(--mint);color:var(--mint)}
.sol-links a:hover{background:var(--mint);color:#04231D}

/* =====================================================================
   THREE NATIONS — the section that carries the site's core argument
   =====================================================================
   Most UK debt sites quietly assume England. Saying so is the strongest
   differentiator on the page, so it gets treated as a showpiece rather
   than a bullet list.
   ------------------------------------------------------------------ */
.nations-vis{display:grid;gap:1rem}
.nation-card{
  position:relative;overflow:hidden;
  padding:1.6rem 1.7rem 1.5rem 2.2rem;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 54px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:.3rem;
  transition:transform .38s var(--ease),border-color .38s var(--ease),box-shadow .38s var(--ease);
}
/* The accent rail is the nation's identity colour. */
.nation-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--nc,var(--mint));
}
/* A wash that grows from the rail on hover. */
.nation-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;right:0;pointer-events:none;
  background:linear-gradient(90deg,var(--nc-glow,rgba(77,226,197,.16)),transparent 62%);
  opacity:0;transition:opacity .38s var(--ease);
}
.nation-card:hover{
  transform:translateX(5px);
  border-color:var(--nc-edge,rgba(77,226,197,.34));
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95), 0 0 40px -18px var(--nc-glow,rgba(77,226,197,.5));
}
.nation-card:hover::after{opacity:1}
.nation-card > *{position:relative;z-index:1}

.nc-ew{--nc:var(--mint);--nc-glow:rgba(77,226,197,.16);--nc-edge:rgba(77,226,197,.34)}
.nc-sc{--nc:var(--blue);--nc-glow:rgba(121,175,255,.16);--nc-edge:rgba(121,175,255,.34)}
.nc-ni{--nc:var(--amber);--nc-glow:rgba(240,185,120,.14);--nc-edge:rgba(240,185,120,.32)}

.nc-index{
  position:absolute;top:1.1rem;right:1.4rem;z-index:0;
  font-family:var(--f-display);font-size:3.1rem;font-weight:600;
  line-height:1;letter-spacing:-.05em;
  color:var(--nc);opacity:.13;
}
.nation-card b{
  font-family:var(--f-display);font-size:var(--s4);font-weight:600;
  letter-spacing:-.028em;color:var(--ink-hi);
}
.nc-sub{
  font-family:var(--f-data);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nc);margin-bottom:.85rem;
}
.nc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.nc-list li{
  font-size:.86rem;padding:.3rem .7rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.12);color:var(--ink-mid);
  background:rgba(255,255,255,.03);white-space:nowrap;
}
.nc-flag{
  margin-top:.9rem;font-family:var(--f-data);font-size:.74rem;letter-spacing:.06em;
  color:var(--nc);display:inline-flex;align-items:center;gap:.45rem;
}
.nc-flag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--nc)}

@media(prefers-reduced-motion:reduce){
  .nation-card,.nation-card:hover{transition:none;transform:none}
}

/* =====================================================================
   CHECK MY OPTIONS — funnel v2
   =====================================================================
   The flow was left-aligned in a 1280px viewport, so every screen sat
   in the left third with a void beside it. Headings broke across three
   lines because the measure was capped at 18ch. And a "63 seconds left"
   countdown sat above copy promising no pressure — the one device on
   the site that contradicted its own positioning.

   Centred column, wider measure, honest progress.
   ------------------------------------------------------------------ */

.funnel-page{min-height:100svh;display:flex;flex-direction:column}

/* ---- Progress: segments, not a bar ---------------------------------- */
/* Nine segments for nine questions, so progress is countable rather than
   an abstract percentage. */
.fn-bar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:1.1rem 0 .9rem;
  background:rgba(8,11,18,.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.fn-bar .wrap,.fn-bar .wrap-mid{max-width:760px;margin-inline:auto}
.fn-rail{
  display:flex;gap:5px;height:4px;background:none;border-radius:0;overflow:visible;
}
.fn-seg{
  flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.10);
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
}
.fn-seg.done{background:var(--mint)}
.fn-seg.now{
  background:var(--mint);
  box-shadow:0 0 14px 1px rgba(77,226,197,.6);
}
.fn-fill{display:none}
.fn-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-data);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-low);margin-top:.7rem;
}
.fn-meta [data-fn-time]{color:var(--ink-low);text-transform:none;letter-spacing:.04em}

/* ---- Centred stage --------------------------------------------------- */
.fn-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:7.5rem 0 4rem;
}
.fn-body > .wrap,.fn-body > .wrap-mid{width:100%;max-width:760px;margin-inline:auto}
.fn-step{display:none}
.fn-step.on{display:block;text-align:center;animation:stepIn .42s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.fn-q{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.75rem,3.7vw,2.7rem);
  letter-spacing:-.036em;line-height:1.08;
  color:var(--ink-hi);margin:0 auto var(--sp3);
  max-width:22ch;text-wrap:balance;
}
.fn-hint{
  color:var(--ink-mid);font-size:1.02rem;line-height:1.6;
  margin:0 auto var(--sp5);max-width:56ch;text-wrap:pretty;
}

/* ---- Options --------------------------------------------------------- */
.fn-opts{display:grid;gap:.65rem;max-width:660px;margin-inline:auto;text-align:left}
.fn-opts.two{grid-template-columns:1fr 1fr}
@media(max-width:640px){.fn-opts.two{grid-template-columns:1fr}}

.fn-opt{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.2rem;border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  color:var(--ink-hi);font-weight:550;text-align:left;cursor:pointer;
  transition:border-color .26s var(--ease),background .26s var(--ease),
             transform .26s var(--ease),box-shadow .26s var(--ease);
}
/* Accent rail that wipes in from the left on hover and locks on select. */
.fn-opt::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mint);
  transform:scaleY(0);transform-origin:center;transition:transform .28s var(--ease);
}
.fn-opt:hover{
  border-color:rgba(77,226,197,.42);
  background:rgba(77,226,197,.07);
  transform:translateY(-2px);
  box-shadow:0 16px 36px -20px rgba(0,0,0,.9),0 0 26px -14px rgba(77,226,197,.55);
}
.fn-opt:hover::before{transform:scaleY(1)}
.fn-opt:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.fn-opt[aria-pressed=true]{
  border-color:var(--mint);
  background:rgba(77,226,197,.13);
  box-shadow:0 0 0 1px rgba(77,226,197,.35),0 0 30px -16px rgba(77,226,197,.8);
}
.fn-opt[aria-pressed=true]::before{transform:scaleY(1)}

.fn-box{
  width:22px;height:22px;border-radius:7px;
  border:1.6px solid rgba(255,255,255,.26);
  flex-shrink:0;display:grid;place-items:center;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.fn-opt[aria-pressed=true] .fn-box{background:var(--mint);border-color:var(--mint);transform:scale(1.06)}
.fn-box svg{opacity:0;color:#04231D;transform:scale(.6);transition:opacity .2s,transform .24s var(--ease)}
.fn-opt[aria-pressed=true] .fn-box svg{opacity:1;transform:scale(1)}

/* Keyboard hint — appears only for keyboard users, so mouse users are not
   shown shortcuts they will never press. */
.fn-key{
  margin-left:auto;font-family:var(--f-data);font-size:.7rem;
  color:var(--ink-low);border:1px solid rgba(255,255,255,.12);
  border-radius:5px;padding:.1rem .38rem;opacity:0;transition:opacity .2s;
}
body.kbd .fn-key{opacity:1}

/* ---- Navigation ------------------------------------------------------ */
.fn-nav{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-top:var(--sp5);
}
.fn-nav .btn{min-width:220px}
.fn-back{
  background:none;border:0;color:var(--ink-low);cursor:pointer;
  font-size:.92rem;padding:.5rem .8rem;display:inline-flex;align-items:center;gap:.45rem;
  border-radius:8px;transition:color .2s,background .2s;
}
.fn-back:hover{color:var(--accent);background:rgba(255,255,255,.04)}
.btn:disabled,.btn[disabled]{
  opacity:.32;cursor:not-allowed;filter:grayscale(.4);box-shadow:none;transform:none;
}

/* ---- Fields ---------------------------------------------------------- */
.fn-field,.f-field{text-align:left;max-width:520px;margin-inline:auto}
.f-row{max-width:520px;margin-inline:auto}
.pc-form{max-width:420px;margin-inline:auto}
.consent{max-width:620px;margin-inline:auto;text-align:left}
.fn-optout{margin-inline:auto;text-align:center}

/* ---- Answer trail ---------------------------------------------------- */
/* What they have already told us, so the flow feels cumulative rather than
   like nine unrelated screens. */
.fn-trail{
  display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin:0 auto var(--sp4);max-width:660px;min-height:26px;
}
.fn-trail button{
  font-family:var(--f-data);font-size:.7rem;letter-spacing:.04em;
  padding:.28rem .7rem;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  color:var(--ink-low);transition:all .22s var(--ease);
}
.fn-trail button:hover{border-color:var(--mint);color:var(--mint)}

/* ---- Summary --------------------------------------------------------- */
.fn-sum{text-align:left;max-width:660px;margin-inline:auto}
.map-hd{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.map-hd{grid-template-columns:repeat(2,1fr)}}

@media(prefers-reduced-motion:reduce){
  .fn-step.on{animation:none}
  .fn-opt:hover{transform:none}
}

/* ---- Funnel refinements ---------------------------------------------- */
/* 22ch forced most questions onto three lines. At this size two lines is
   the right rhythm — the eye should take the question in one movement. */
.fn-q{max-width:30ch;font-size:clamp(1.8rem,3.9vw,2.85rem)}
.fn-hint{max-width:52ch;color:var(--ink-mid)}

/* Ambient pool behind the stage so the centred column sits in light rather
   than floating on flat black. */
.funnel-page{position:relative;isolation:isolate;overflow-x:clip}
.funnel-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 40% at 50% 26%, rgba(77,226,197,.09), transparent 70%),
    radial-gradient(46% 38% at 82% 78%, rgba(121,175,255,.07), transparent 70%);
}

/* The accent rail needed to be visible enough to read as a state change. */
.fn-opt::before{width:4px;border-radius:0 3px 3px 0}
.fn-opt{padding-left:1.35rem}

/* Selected options carry a tick even in single-select, so the last answer is
   still legible when you come back to change it. */
.fn-opts:not([data-multi]) .fn-opt[aria-pressed=true]::after{
  content:"✓";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--mint);font-weight:700;font-size:.95rem;
}

/* Back sits quietly below the primary action, never competing with it. */
.fn-nav{gap:.6rem}
.fn-nav .fn-back{margin-top:.2rem}

/* Trail reserves its space so the question does not jump when the first
   answer appears. */
.fn-trail:empty{margin-bottom:0;min-height:0}
/* At narrow widths the step count and the trust line collide. The count is
   the load-bearing one, so the trust line drops to its own row. */
@media(max-width:560px){
  .fn-meta{flex-direction:column;align-items:center;gap:.3rem;text-align:center}
  .fn-meta [data-fn-time]{font-size:.68rem}
  .fn-q{font-size:clamp(1.55rem,7vw,2rem);max-width:20ch}
  .fn-body{padding-top:6.5rem}
  .fn-nav .btn{width:100%;min-width:0}
}

/* =====================================================================
   FUNNEL v3 — intro, grouped stages, summary
   ===================================================================== */

/* ---- Intro ----------------------------------------------------------- */
.fn-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-data);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mint);margin-bottom:1rem;
}
.fn-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--mint),rgba(121,175,255,.55))}
.fn-assure{
  list-style:none;margin:0 auto var(--sp5);padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
}
.fn-assure li{
  font-family:var(--f-data);font-size:.76rem;letter-spacing:.06em;
  padding:.4rem .9rem;border-radius:99px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);
  color:var(--ink-mid);display:inline-flex;align-items:center;gap:.45rem;
}
.fn-assure li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px rgba(77,226,197,.8)}
.fn-introducer{
  max-width:56ch;margin:var(--sp5) auto 0;font-size:.84rem;line-height:1.6;
  color:var(--ink-low);
}

/* The urgent route: a real door, not a toll gate. */
.fn-urgent-door{
  display:block;max-width:560px;margin:var(--sp5) auto 0;text-align:left;
  padding:1.2rem 1.4rem;border-radius:16px;
  background:rgba(240,185,120,.07);
  border:1px solid rgba(240,185,120,.26);border-left:3px solid var(--amber);
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}
.fn-urgent-door:hover{
  transform:translateY(-2px);background:rgba(240,185,120,.11);
  border-color:rgba(240,185,120,.5);border-left-color:var(--amber);
}
.fn-ud-tag{display:block;font-family:var(--f-data);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}
.fn-ud-body{display:block;font-size:.92rem;line-height:1.55;color:var(--ink-mid)}
.fn-ud-go{display:block;margin-top:.6rem;font-weight:600;color:var(--amber);font-size:.9rem}

/* ---- Grouped stages -------------------------------------------------- */
.fn-group{border:0;padding:0;margin:0 auto var(--sp5);max-width:660px;text-align:left}
.fn-glabel{
  display:block;font-family:var(--f-body);font-size:1.02rem;font-weight:600;
  color:var(--ink-hi);margin-bottom:.75rem;padding:0;
}
.fn-opt-sm{padding:.85rem 1.1rem .85rem 1.25rem;font-size:.94rem}
.fn-opt-sm .fn-box{width:19px;height:19px;border-radius:6px}

/* ---- Summary --------------------------------------------------------- */
.fn-sumgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
  max-width:660px;margin:0 auto var(--sp4);text-align:left;
}
@media(max-width:720px){.fn-sumgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.fn-sumgrid{grid-template-columns:1fr}}
.sum-card{
  padding:1rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  position:relative;overflow:hidden;
}
.sum-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mint);opacity:.5}
.sum-k{display:block;font-family:var(--f-data);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-low);margin-bottom:.35rem}
.sum-card b{font-family:var(--f-display);font-size:1.06rem;font-weight:600;
  letter-spacing:-.02em;color:var(--ink-hi);line-height:1.25;display:block}
.sum-nation{grid-column:1/-1}
.sum-nation::before{background:var(--blue)}
.sum-note{display:block;margin-top:.45rem;font-size:.84rem;color:var(--ink-mid);line-height:1.5}

.sum-types{max-width:660px;margin:0 auto var(--sp5);text-align:left}
.sum-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.sum-chip{
  font-size:.82rem;padding:.32rem .8rem;border-radius:99px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:var(--ink-mid);
}
/* Priority debts carry consequences the others do not. Marking them is the
   single most useful thing this summary can do. */
.sum-chip.is-priority{
  border-color:rgba(240,185,120,.4);background:rgba(240,185,120,.10);color:var(--amber);
}
.sum-chip.is-priority::before{content:"! ";font-weight:700}

/* ---- Next step ------------------------------------------------------- */
.fn-next{
  max-width:660px;margin:0 auto var(--sp5);padding:1.6rem 1.7rem;text-align:left;
  border-radius:18px;background:rgba(77,226,197,.07);
  border:1px solid rgba(77,226,197,.22);
}
.fn-next h3{font-size:1.35rem;margin-bottom:.6rem;color:var(--ink-hi)}
.fn-next p{color:var(--ink-mid);line-height:1.62;margin:0;max-width:60ch}

/* ---- Consent: readable, not a contract ------------------------------- */
.consent{
  max-width:660px;margin:var(--sp5) auto 0;padding:1.5rem 1.6rem;text-align:left;
  border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
}
.consent h4{font-size:1.1rem;margin-bottom:1rem;color:var(--ink-hi)}
.consent-qa{display:grid;gap:.9rem;margin-bottom:1.4rem}
.cq{padding-left:.9rem;border-left:2px solid rgba(77,226,197,.35)}
.cq-q{display:block;font-weight:600;font-size:.92rem;color:var(--ink-hi);margin-bottom:.2rem}
.cq-a{display:block;font-size:.9rem;line-height:1.58;color:var(--ink-mid)}
.cbox-main{
  padding:.9rem 1rem;border-radius:12px;
  background:rgba(77,226,197,.07);border:1px solid rgba(77,226,197,.24);
}
.consent-channels{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.consent-rights{font-size:.82rem;color:var(--ink-low);margin-top:1rem;line-height:1.55}
.f-opt{font-family:var(--f-data);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-low);margin-left:.4rem}

@media(max-width:560px){
  .fn-next,.consent{padding:1.2rem 1.1rem}
  .fn-urgent-door{padding:1rem 1.1rem}
}
/* No progress to report before the first question. */
body.fn-at-intro .fn-rail{opacity:0}
.fn-rail{transition:opacity .3s var(--ease)}
/* The question is focused programmatically on each step so screen readers
   announce it. That focus should be silent — a visible ring here reads as a
   stray box around the heading. Keyboard focus rings elsewhere are untouched. */
.fn-q:focus{outline:none}
.fn-q:focus-visible{outline:none}
.consent-note{font-size:.84rem;color:var(--ink-low);margin:-.3rem 0 .6rem;line-height:1.5}
[data-channel-err]{display:none}
.fn-noob{text-align:center;font-size:.9rem;color:var(--ink-low);margin-top:.7rem}

/* ---- Funnel polish --------------------------------------------------- */
/* Multi-select options already carry a checkbox. The right-hand tick was
   added for single-select, where there is no box — showing both is telling
   the same thing twice. */
.fn-group[data-multi="true"] .fn-opt[aria-pressed=true]::after,
.fn-step[data-multi="true"] .fn-opt[aria-pressed=true]::after{content:none}
.fn-opts .fn-opt[aria-pressed=true]::after{
  content:"✓";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--mint);font-weight:700;font-size:.95rem;
}
.fn-opt:has(.fn-box)[aria-pressed=true]::after{content:none}

/* On a narrow screen the answer trail wrapped to four rows and pushed the
   question below the fold. One scrollable row keeps it glanceable. */
@media(max-width:640px){
  .fn-trail{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-inline:1rem;margin-inline:-1rem;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .fn-trail::-webkit-scrollbar{display:none}
  .fn-trail button{flex:0 0 auto;scroll-snap-align:start}
}

/* Thumb-sized targets. 44px is the accessibility floor, and this form is
   used one-handed by people who are stressed. */
@media(max-width:640px){
  .fn-opt{min-height:56px;padding-top:1rem;padding-bottom:1rem}
  .fn-opt-sm{min-height:52px}
  .btn-lg,.f-submit{min-height:56px}
  .cbox input{width:22px;height:22px}
  .fn-back{min-height:44px}
}

/* A sticky Continue was tried here and removed: on the twelve-option debt
   types stage it floated over the last four options, so the control meant to
   help you finish was covering the things you still needed to tap. The button
   sits at the end of the list instead, where scrolling naturally lands. */

/* =====================================================================
   RESULT SCREEN — bounded form card
   =====================================================================
   Everything used to stack flat down the page: summary, next step, fields,
   five consent questions, channels, rights, CTA. Nothing had an edge, so the
   contact form read as more page rather than as a form, and the screen felt
   endless. The form is now one object with a visible boundary.
   ------------------------------------------------------------------ */

.fn-sumgrid{grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:var(--sp5)}
.sum-card{padding:.9rem 1rem;border-radius:12px}
.sum-card b{font-size:1rem}
.sum-k{font-size:.64rem;margin-bottom:.3rem}
[data-sum-count]{display:block}
.sum-card .sum-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.sum-card .sum-chip{font-size:.72rem;padding:.2rem .55rem}

/* ---- The card -------------------------------------------------------- */
.fn-card{
  max-width:660px;margin:0 auto;text-align:left;
  border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  position:relative;
}
/* Hairline top edge — the detail that makes a panel read as glass. */
.fn-card::before{
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(77,226,197,.55),transparent);
}

.fn-card-hd{
  padding:1.6rem 1.7rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(77,226,197,.05);
}
.fn-card-hd h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--ink-hi)}
.fn-card-hd p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-mid)}
.fn-card-hd .fn-eyebrow{margin-bottom:.6rem}

.fn-card-body{padding:1.6rem 1.7rem .4rem}
.fn-card-body .f-field,.fn-card-body .f-row{max-width:none;margin-inline:0}
.f-label{
  display:block;font-size:var(--s0);font-weight:550;color:var(--ink-hi);margin-bottom:.5rem;
}

/* ---- Legal: three numbered facts, then the rest on request ----------- */
.fn-card-legal{
  padding:1.4rem 1.7rem 1.6rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
}
.legal-row{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:.88rem;line-height:1.55;color:var(--ink-mid);margin-bottom:.75rem;
}
.legal-row b{color:var(--ink-hi);font-weight:600}
.legal-i{
  flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-data);font-size:.66rem;
  background:rgba(77,226,197,.16);color:var(--mint);
  border:1px solid rgba(77,226,197,.3);margin-top:.1rem;
}
.legal-more{margin:1rem 0 1.1rem;border-top:1px solid rgba(255,255,255,.07);padding-top:.9rem}
.legal-more summary{
  cursor:pointer;font-size:.86rem;color:var(--mint);
  list-style:none;display:flex;align-items:center;gap:.45rem;
}
.legal-more summary::-webkit-details-marker{display:none}
.legal-more summary::after{content:"+";font-weight:700;transition:transform .25s var(--ease)}
.legal-more[open] summary::after{content:"−"}
.legal-more-body{padding-top:.8rem}
.legal-more-body p{font-size:.85rem;line-height:1.6;color:var(--ink-mid);margin-bottom:.7rem}
.legal-more-body p:last-child{margin-bottom:0}
.legal-more-body b{color:var(--ink-hi);display:block;margin-bottom:.15rem}

.fn-card-legal .cbox-main{margin-top:.4rem}
.fn-card-foot{padding:1.4rem 1.7rem 1.6rem;text-align:center}
.fn-card-foot .btn{width:100%}
.fn-card-foot .fn-noob{margin-top:.7rem;margin-bottom:0}

.fn-after{max-width:660px;margin:var(--sp4) auto 0;text-align:center}
.fn-after .fn-optout{margin-top:.8rem;font-size:.84rem;color:var(--ink-low);line-height:1.55}

/* Consent panel styles no longer used on this screen. */
.fn-card .consent{padding:0;background:none;border:0;margin:0}

@media(max-width:720px){.fn-sumgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .fn-sumgrid{grid-template-columns:1fr}
  .fn-card-hd,.fn-card-body,.fn-card-legal,.fn-card-foot{padding-left:1.1rem;padding-right:1.1rem}
  .fn-card{border-radius:18px}
}

/* Cards size to their own content instead of stretching to match the tallest
   in the row, which left "Work" and "Left each month" mostly empty. */
.fn-sumgrid{align-items:start}

/* The channel checkboxes wrapped so each label sat under its own box. They are
   three short options and should read as one row. */
.consent-channels{display:flex;flex-wrap:wrap;gap:.5rem}
.consent-channels .cbox{
  flex:0 0 auto;margin-bottom:0;align-items:center;gap:.55rem;
  padding:.55rem .95rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.consent-channels .cbox:hover{border-color:rgba(77,226,197,.4)}
.consent-channels .cbox:has(input:checked){
  border-color:var(--mint);background:rgba(77,226,197,.12);
}
.consent-channels .cbox input{margin-top:0}
.consent-channels .cbox span{white-space:nowrap;color:var(--ink-hi);font-size:.9rem}

/* ---- Data chart ------------------------------------------------------ */
.chart-wrap{margin:0 0 var(--sp5);padding:1.4rem 1.2rem 1rem;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--rule)}
.chart-wrap svg{display:block;overflow:visible}
.chart-wrap figcaption{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1rem;
  font-family:var(--f-data);font-size:.74rem;color:var(--ink-low)}
.ch-key{display:inline-flex;align-items:center;gap:.45rem}
.ch-key i{width:10px;height:10px;border-radius:3px;display:inline-block}
.chart-wrap rect[fill]:hover{opacity:1}

/* ============================================================
   38. THE ESCALATION THREAD — hero signature
   ------------------------------------------------------------
   Replaces the drifting blur field. Debt is experienced as a
   sequence with tightening deadlines, so the hero renders that
   sequence and then stops it. The mint marker is the thesis:
   wherever you are on this line, it can still be interrupted.

   Draws ONCE on load. No infinite loop, no animated blur — the
   old .field ran two 52vw radial gradients at blur(80px) on a
   34s cycle, which is continuous GPU compositing on exactly the
   cheap Android handsets this audience is using at midnight.
   ============================================================ */
/* In FLOW, not absolutely positioned. The first version floated it over the
   hero at bottom:11% and it landed straight on top of the CTA row — the
   "Creditor letters" station was completely hidden behind the primary button.
   A screenshot caught it; reading the CSS never would have. */
.thread{
  position:relative;z-index:2;width:100%;
  margin-top:var(--sp4);padding-bottom:0;
}
.thread svg{width:100%;height:150px;display:block;overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 90%,transparent);
}
.thread-hint{
  text-align:center;margin:.4rem 0 0;font-family:var(--f-data);
  font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-faint);opacity:0;animation:stopIn .6s var(--ease) 2.6s forwards;
}

.thread-line{
  fill:none;stroke:var(--line-dark-2);stroke-width:1;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:threadDraw 1.9s var(--ease) .25s forwards;
}
.thread-live{
  fill:none;stroke:var(--mint);stroke-width:1.5;opacity:.85;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:threadDraw 1.5s var(--ease) .3s forwards;
}
@keyframes threadDraw{to{stroke-dashoffset:0}}

/* Each station is a real link. The invisible rect is the tap target — the
   circle alone is 7px across, which fails WCAG 2.2 target size and is
   unusable on a phone. */
.thread-stop{opacity:0;animation:stopIn .5s var(--ease) forwards;cursor:pointer}
.thread-stop .hit{fill:transparent}
.thread-stop circle{fill:var(--midnight);stroke:var(--t-low);stroke-width:1;
  transition:stroke .25s var(--ease),fill .25s var(--ease),r .25s var(--ease)}
.thread-stop text{
  font-family:var(--f-data);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;fill:var(--t-mid);transition:fill .25s var(--ease);
}
.thread-stop .tick{font-size:8.5px;fill:var(--t-faint);letter-spacing:.08em}
.thread-stop:hover circle,.thread-stop:focus-visible circle{stroke:var(--mint);fill:var(--mint);r:5}
.thread-stop:hover text,.thread-stop:focus-visible text{fill:var(--t-hi)}
.thread-stop:focus-visible .hit{
  fill:rgba(77,226,197,.10);stroke:var(--mint);stroke-width:1.5;
}
.thread-stop:focus{outline:none}
.thread-stop.is-after circle{stroke:var(--t-faint)}
.thread-stop.is-after text{fill:var(--t-faint)}
@keyframes stopIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* The interruption. The only colour on the line, which is the whole point. */
.thread-here{opacity:0;animation:hereIn .7s var(--ease) 1.5s forwards;pointer-events:none}
.thread-here .halo{fill:rgba(77,226,197,.14)}
.thread-here .dot{fill:var(--mint)}
.thread-here .stem{stroke:var(--mint);stroke-width:1;opacity:.45}
.thread-here text{
  font-family:var(--f-data);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;fill:var(--mint);
}
@keyframes hereIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}

.thread-pulse{
  fill:none;stroke:var(--mint);stroke-width:1;
  animation:threadPulse 3.4s var(--ease) 2.2s 3;
}
@keyframes threadPulse{0%{r:5;opacity:.55}55%{r:19;opacity:0}100%{r:19;opacity:0}}

.thread-after{stroke:var(--line-dark);stroke-width:1;stroke-dasharray:2 6;fill:none;
  opacity:0;animation:stopIn .6s var(--ease) 2s forwards}

/* On a phone the four-station line is unreadable, so it becomes a scrollable
   row of real buttons. Same links, same order, shaped for a thumb. */
@media(max-width:820px){
  /* Chips first, then the hint that explains them. The earlier
     column-reverse put the instruction before the thing it described. */
  .thread{position:static;margin-top:var(--sp4);display:block}
  .thread svg{display:none}
  .thread-hint{text-align:left;opacity:1;animation:none;
    margin:.55rem clamp(1.15rem,4vw,2rem) 0}
}

/* A single static wash for depth. Static, so it composites once. */
.hero-wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%,rgba(77,226,197,.10),transparent 62%),
    radial-gradient(100% 70% at 92% 18%,rgba(121,175,255,.09),transparent 60%);
}

/* ============================================================
   39. CONVERSION LAYER
   ------------------------------------------------------------
   Before this existed, 76 pages had exactly ONE route to the
   funnel — a .bridge block mid-article — and 16 had none at
   all, including /urgent-debt-help/, the highest-intent hub on
   the site. The sticky bar was display:none above 820px, so
   every desktop reader hit the end of a 4,000-word page with
   nothing to do.

   Three strengths, because a debt site should not push the
   funnel equally hard everywhere. A sales CTA on a privacy
   notice costs more trust than it earns.
   ============================================================ */
.nextstep{
  margin:var(--sp7) 0 0;padding:var(--sp5) var(--sp5) var(--sp5);
  border-radius:var(--r-l);position:relative;overflow:hidden;
  border:1px solid var(--rule);background:var(--surface-2);
}
.nextstep::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);
}
.nextstep h3{font-family:var(--f-display);font-size:var(--s4);letter-spacing:-.02em;margin:0 0 .6rem}
.nextstep p{color:var(--ink-mid);max-width:58ch;margin:0 0 var(--sp4);font-size:var(--s2)}
.nextstep-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3)}
.nextstep .data{
  font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-low);
}
.nextstep-alt{
  margin-top:var(--sp3);padding-top:var(--sp3);border-top:1px solid var(--rule);
  font-size:var(--s1);color:var(--ink-low);
}
.nextstep-alt a{color:var(--ink-mid);text-decoration:underline;text-underline-offset:3px}
.nextstep-alt a:hover{color:var(--accent)}

/* Soft: policy and legal pages. No funnel push at all — the only
   thing offered is genuinely free independent advice. */
.nextstep.is-soft{background:transparent;border-style:dashed}
.nextstep.is-soft::before{display:none}
.nextstep.is-soft h3{font-size:var(--s3)}

/* Strong: the urgent hub and solution pages, where someone has
   read the whole thing and is deciding. */
.nextstep.is-strong{background:var(--surface-2);box-shadow:var(--lift-2)}

/* ---------- desktop persistent path ----------
   A full-width bar bolted to a 27" monitor looks like a cookie
   banner. Desktop gets a compact pill that rises after the
   reader has passed the first in-content CTA. */
.cta-pill{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:880;display:none;
  align-items:center;gap:.85rem;padding:.7rem .8rem .7rem 1.15rem;
  border-radius:999px;border:1px solid var(--line-dark-2);
  background:rgba(14,20,33,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.55);
  transform:translateY(140%);transition:transform .45s var(--ease),opacity .3s;
  font-size:var(--s1);color:var(--t-hi);
}
.cta-pill.up{transform:translateY(0)}
.cta-pill .lbl{white-space:nowrap;font-weight:500}
.cta-pill .sub{
  display:block;font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-low);margin-top:.15rem;
}
.cta-pill .go{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.1rem;border-radius:999px;background:var(--mint);color:#04231D;
  font-weight:600;white-space:nowrap;transition:background .2s var(--ease);
}
.cta-pill .go:hover{background:#6BEBD3}
.cta-pill .dismiss{
  background:none;border:0;color:var(--t-faint);cursor:pointer;padding:.3rem .45rem;
  font-size:1.1rem;line-height:1;border-radius:50%;
}
.cta-pill .dismiss:hover{color:var(--t-hi);background:var(--glass-2)}
@media(min-width:821px){.cta-pill{display:flex}}
@media(prefers-reduced-motion:reduce){.cta-pill{transition:none}}

/* Shown only when no partner firm is configured. Not an error state — a
   statement of fact that protects the person on the other side of the form. */
.fn-norecipient{
  margin:0 0 var(--sp4);padding:var(--sp4);border-radius:var(--r-m);
  border:1px solid var(--rule-2);background:var(--surface-2);font-size:var(--s1);
  color:var(--ink-mid);line-height:1.6;
}
.fn-norecipient strong{color:var(--ink-hi);display:block;margin-bottom:.4rem}
.fn-norecipient a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Local support block — rendered from data_local.py so the page shows what the
   quality gate scores. A gate that scores a data file the reader never sees is
   a metric measuring itself. */
.localsupport{margin:var(--sp4) 0 var(--sp5)}
.ls-row{padding:var(--sp4) 0;border-top:1px solid var(--rule)}
.ls-row h3{font-size:var(--s3);letter-spacing:-.015em;margin:0 0 .5rem}
.ls-row p{color:var(--ink-mid);margin:0}
.ls-stat{
  margin-top:var(--sp4);padding:var(--sp4);border-radius:var(--r-m);
  border:1px solid var(--rule-2);background:var(--surface-2);
}
.ls-stat p{margin:.5rem 0 0;color:var(--ink-hi);font-size:var(--s2)}
.ls-tag{
  font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}

/* Above-the-fold introducer disclosure — audit sections 9 and 16.
   Styled as a quiet statement of fact, not a warning. Making transparency
   look like a risk notice teaches people to fear it. */
.hero-disclose{
  margin:var(--sp3) 0 0;max-width:56ch;font-size:var(--s0);line-height:1.6;
  color:var(--t-low);padding-left:.9rem;border-left:2px solid var(--line-dark-2);
}
.hero-disclose a{color:var(--t-mid);text-decoration:underline;text-underline-offset:3px}
.hero-disclose a:hover{color:var(--mint)}

/* Hero height — audit section 17. 100svh pushed every useful thing below the
   fold on a small phone and hid the fact there was more to scroll to. The
   next section should peek. */
.hero{min-height:88svh}
@media(min-width:821px){.hero{min-height:92vh}}
@media(max-width:820px){
  .hero{min-height:auto;padding-bottom:var(--sp5)}
  .hero .lead{font-size:var(--s2);margin-bottom:var(--sp4)}
  .hero-cta{gap:.7rem;margin-bottom:var(--sp3)}
  .hero-meta{gap:.4rem 1rem;font-size:9.5px}
  .hero-disclose{font-size:var(--s-1);margin-top:var(--sp3)}
}

/* Mobile thread: the SVG is replaced by a horizontally scrollable row of real
   buttons built from the same links. */
@media(max-width:820px){
  .thread{overflow:visible}
  .thread nav,.thread{scrollbar-width:none}
}

/* Mobile stations. The SVG line is unreadable under ~820px, so the same six
   links become a scrollable row of real buttons. Not a cut-down version —
   identical destinations, shaped for a thumb, 56px minimum target. */
.thread-chips{display:none}
@media(max-width:820px){
  .thread-chips{
    /* Aligned with the body text on the left, bleeding off the right edge.
       The bleed is the affordance — it is how a thumb knows to scroll. */
    /* .thread is already full-bleed, so padding alone aligns the first chip
       with the body text and lets the row run off the right edge. The earlier
       negative margin pushed the first chip off-screen. */
    display:flex;gap:.55rem;overflow-x:auto;
    padding:.2rem clamp(1.15rem,4vw,2rem) .6rem;
    /* scroll-snap was snapping the first chip flush to x=0 and eating the
       padding. scroll-padding keeps the snap position inside the gutter. */
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scroll-padding-inline-start:clamp(1.15rem,4vw,2rem);
  }
  .thread-chips::-webkit-scrollbar{display:none}
  .thread-chips a{
    flex:0 0 auto;scroll-snap-align:start;min-height:56px;
    display:flex;flex-direction:column;justify-content:center;gap:.15rem;
    padding:.6rem .95rem;border-radius:var(--r-s);
    border:1px solid var(--line-dark-2);background:var(--glass);
    transition:border-color .25s var(--ease),background .25s var(--ease);
  }
  .thread-chips a:first-child{border-color:rgba(77,226,197,.45)}
  .thread-chips a:hover,.thread-chips a:focus-visible{
    border-color:var(--mint);background:rgba(77,226,197,.08);
  }
  .thread-chips b{font-size:var(--s0);color:var(--t-hi);font-weight:600;white-space:nowrap}
  .thread-chips span{
    font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.08em;
    text-transform:uppercase;color:var(--t-faint);white-space:nowrap;
  }
}
@media(prefers-reduced-motion:reduce){
  .thread-line,.thread-live{stroke-dashoffset:0;animation:none}
  .thread-stop,.thread-here,.thread-after,.thread-hint{opacity:1;animation:none}
  .thread-pulse{display:none}
}

/* IVA payment illustrator. Two sliders, live figures, no promises. */
.ivacalc{border:1px solid var(--rule);border-radius:var(--r-l);padding:var(--sp5);background:var(--surface-2);margin:var(--sp5) 0}
.ivacalc .ic-row{margin-bottom:var(--sp4)}
.ivacalc label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.55rem;font-weight:600}
.ivacalc label output{font-family:var(--f-data);font-size:var(--s3);color:var(--accent);font-weight:500}
.ivacalc input[type=range]{width:100%;accent-color:var(--accent);height:44px}
.ic-results{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);margin:var(--sp4) 0}
.ic-cell{border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--sp4)}
.ic-cell .lbl{font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-low);display:block;margin-bottom:.4rem}
.ic-cell .val{font-family:var(--f-data);font-size:var(--s5);color:var(--ink-hi)}
.ic-note{border-left:3px solid var(--accent);padding:.2rem 0 .2rem var(--sp4);color:var(--ink-mid);font-size:var(--s1);line-height:1.65}
@media(max-width:640px){.ic-results{grid-template-columns:1fr}}

/* Sample letters. Monospace body on a document surface, made to be copied. */
.letter-tpl{border:1px solid var(--rule-2);border-radius:var(--r-m);background:var(--surface-2);padding:var(--sp4);margin:var(--sp4) 0;overflow-x:auto}
.letter-tpl pre{font-family:var(--f-data);font-size:var(--s0);line-height:1.7;white-space:pre-wrap;margin:0;color:var(--ink-hi)}

/* Jurisdiction banner — audit items 2 and 10. Britain has four debt systems;
   every urgent/legal page now says which one it describes before the reader
   invests in the wrong law. */
.jurbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;
  padding:.8rem 1.1rem;border:1px solid var(--rule-2);border-left:3px solid var(--accent);
  border-radius:var(--r-s);background:var(--surface-2);margin:0 0 var(--sp4);font-size:var(--s0)}
.jurbar .jur-tag{font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-low)}
.jurbar b{color:var(--ink-hi)}
.jurbar .jur-note{flex-basis:100%;color:var(--ink-mid);font-size:var(--s0)}