/* ==========================================================================
   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:#17324D;
  --midnight-deep:#132A42;
  --dusk:#17324D;
  --dusk-2:#1E3D5E;
  --dawn:#EDF1FF;
  --day:#F8FAFD;
  --day-warm:#FFFFFF;

  /* Accents */
  --mint:#22C9BC;
  --mint-deep:#0E9C90;
  --mint-ink:#0A4F48;
  --blue:#7A8CFF;
  --blue-deep:#4F64FF;
  --amber:#F6C954;
  --amber-ink:#6B4A12;

  /* Text on dark */
  --t-hi:#FFFFFF;
  --t-mid:#C9D6E6;
  --t-low:#9FB3C8;
  --t-faint:#8DA2B8;

  /* Text on light */
  --l-hi:#17324D;
  --l-mid:#4D6175;
  --l-low:#718196;

  /* Lines */
  --line-dark:rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.16);
  --line-light:#DFE7EF;
  --line-light-2:#CBD6E2;

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

  /* Type */
  --f-display:"Manrope",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"Inter",system-ui,sans-serif;

  /* 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:1200px; --wrap-narrow:760px; --wrap-mid:940px;
  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:32px;
  --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{
  /* Bright Clarity v62: the all-dark aliasing reversed, exactly as this
     block's original comment promised. Light zones are back. */
  --mint-deep:#0E9C90;
  --blue-deep:#4F64FF;
  --amber-ink:#6B4A12;
  --l-hi:#17324D;
  --l-mid:#4D6175;
  --l-low:#718196;
  --line-light:#DFE7EF;
  --line-light-2:#CBD6E2;
}

/* 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)}

/* Official sources block — every YMYL page ends with where the facts came from. */
.sources{border-top:1px solid var(--rule);padding-top:var(--sp5)}
.sources-h{font-family:var(--f-data);font-size:var(--s-1);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-low);margin:0 0 .6rem}
.sources-list{list-style:none;margin:0 0 var(--sp4);padding:0}
.sources-list li{padding:.3rem 0;border-bottom:1px dashed var(--rule)}
.sources-list a{color:var(--ink-hi);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.sources-note{color:var(--ink-low);font-size:var(--s-1);margin:0}

/* "Email me this summary" — quiet, adjacent to the email field, never nagging. */
.cbox-summary{margin-top:.55rem;background:var(--panel-2,rgba(255,255,255,.03));border:1px dashed var(--rule);border-radius:10px;padding:.7rem .9rem}
.cbox-summary b{color:var(--ink-hi)}
.cbox-summary[hidden]{display:none}

.infographic{margin:1.6rem 0}.infographic img{width:100%;height:auto;border:1px solid var(--dawn);border-radius:12px}.infographic figcaption{font-size:.85rem;color:#6a7183;margin-top:.5rem}

.fn-recipient{border:1px solid var(--mint-deep);border-radius:12px;padding:1rem 1.2rem;margin:1rem 0;background:#f2fbf8}.fn-recipient-h{margin:0 0 .3rem;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mint-ink)}.fn-recipient-name{margin:.2rem 0}.fn-recipient-links{margin:.4rem 0;font-size:.95rem}.fn-recipient-note{margin:.4rem 0 0;font-size:.9rem;color:#4a5164}

.fn-capture .fn-cap-note{font-size:.92rem;color:#4a5164;margin:1rem 0 .5rem}.fn-capture .fn-cap-links{display:flex;flex-wrap:wrap;gap:.5rem}.fn-cap-done{border:1px solid var(--mint-deep);background:#f2fbf8;border-radius:10px;padding:.9rem 1.1rem;margin-top:.8rem}.fn-capture #cem{max-width:26rem}

/* ================================================================
   BRIGHT CLARITY 2027 — component layer (v62)
   A re-skin over the locked SEO engine. Tokens above were remapped;
   this layer flips the default canvas to light, makes the header
   white and the footer navy, retires glass/neon, and sets the
   contrast rules from the adopted design adjudication:
   - #22C9BC (aqua) is a GRAPHIC colour; aqua text on light uses
     --mint-deep (#0E9C90) at display sizes only.
   - Coral and Sunlight are backgrounds; they always carry navy ink.
   - Electric blue #4F64FF buttons carry white text (4.6:1); hover
     deepens to #3D50E7.
   ================================================================ */
:root{
  --electric:#4F64FF; --electric-deep:#3D50E7;
  --ice:#EDF1FF; --aqua-mist:#EAF9F7; --coral:#FF786E; --coral-mist:#FFF0EE;
  --sun:#F6C954; --sun-mist:#FFF8DD; --lilac:#8A74F9; --lilac-mist:#F3F0FF;
  --surface-grey:#F1F4F8;
  --sh-1:0 8px 30px rgba(23,50,77,.06);
  --sh-2:0 14px 40px rgba(23,50,77,.10);
  --sh-3:0 20px 60px rgba(23,50,77,.12);
}
/* ---- canvas: light by default; navy belongs to chosen bands only */
body{background:var(--day);color:var(--l-mid)}
body h1,body h2,body h3,body h4,body h5{color:var(--l-hi);font-weight:700}
.tone-day,.tone-dawn{background:var(--day);color:var(--l-mid)}
.tone-dawn{background:var(--ice)}
.tone-midnight,.tone-deep,.tone-dusk{background:var(--midnight);color:var(--t-mid)}
.tone-midnight h1,.tone-midnight h2,.tone-midnight h3,
.tone-dusk h1,.tone-dusk h2,.tone-dusk h3,
.tone-deep h1,.tone-deep h2,.tone-deep h3{color:var(--t-hi)}
/* ---- retire glass + glow everywhere */
*{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
[class]{text-shadow:none}
/* ---- header: crisp white (brief §18) */
.hdr,.hdr.stuck{background:#FFFFFF;border-bottom:1px solid var(--line-light)}
.hdr.stuck{box-shadow:var(--sh-1)}
.logo,.logo-w{color:var(--l-hi)}
.logo-w span:last-child{color:var(--electric)}
.nav>a,.nav-t{color:var(--l-mid)}
.nav>a:hover,.nav-t:hover,.nav-t[aria-expanded=true]{color:var(--electric);background:var(--ice)}
/* ---- mega menu: large white panel (brief §21) */
.mega{background:#FFFFFF;border:1px solid var(--line-light);box-shadow:var(--sh-3);border-radius:var(--r-m)}
.mega a{color:var(--l-mid)}
.mega a b{color:var(--l-hi)}
.mega a span{color:var(--l-low)}
.mega a:hover{background:var(--ice);color:var(--electric)}
.mega a:hover b{color:var(--electric)}
.mega-foot{border-top-color:var(--line-light)}
/* ---- buttons: electric blue is the action colour (brief §4) */
.btn-primary{background:var(--electric);color:#FFFFFF;box-shadow:0 8px 24px -8px rgba(79,100,255,.45)}
.btn-primary:hover{background:var(--electric-deep);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(79,100,255,.5)}
.btn-ghost{border:1px solid var(--line-light-2);color:var(--l-hi);background:#FFFFFF}
.btn-ghost:hover{border-color:var(--electric);color:var(--electric);background:var(--ice)}
.tone-midnight .btn-ghost,.tone-dusk .btn-ghost,.tone-deep .btn-ghost{background:transparent;color:var(--t-hi);border-color:var(--line-dark-2)}
/* ---- cards: white, one subtle border, restrained shadow (brief §13-14) */
.card,.fn-card,.li-card,.tool-card{background:#FFFFFF;border:1px solid var(--line-light);box-shadow:var(--sh-1);border-radius:var(--r-m)}
.card:hover{box-shadow:var(--sh-2)}
.card-num{color:var(--mint-deep)}
/* ---- answer box: the aqua clarity rule (brief §64) */
.answer{background:var(--aqua-mist);border-left:3px solid var(--mint);color:var(--l-hi);border-radius:0 var(--r-s) var(--r-s) 0}
/* ---- data/eyebrow labels: Inter with tabular figures, no mono */
.data,.eyebrow,.fn-eyebrow,.card-num{font-feature-settings:"tnum" 1;letter-spacing:.08em}
/* ---- tables: light, soft grey heading (brief §67) */
.cmp{background:#FFFFFF;border:1px solid var(--line-light);border-radius:var(--r-s)}
.cmp thead th{background:var(--surface-grey);color:var(--l-hi)}
.cmp td,.cmp th{border-color:var(--line-light);color:var(--l-mid)}
.tone-midnight .cmp,.tone-dusk .cmp{background:transparent;border-color:var(--line-dark)}
.tone-midnight .cmp thead th,.tone-dusk .cmp thead th{background:rgba(255,255,255,.06);color:var(--t-hi)}
.tone-midnight .cmp td,.tone-dusk .cmp td{color:var(--t-mid);border-color:var(--line-dark)}
/* ---- sources panel: institutional cool grey (brief §68) */
.sources{background:var(--surface-grey);border:1px solid var(--line-light);border-radius:var(--r-s);color:var(--l-mid)}
.sources a{color:var(--electric)}
/* ---- eeat strip ---- */
.eeat{background:#FFFFFF;border:1px solid var(--line-light);border-radius:var(--r-s);color:var(--l-low)}
.eeat b{color:var(--l-hi)}
/* ---- prose links ---- */
.prose a{color:var(--electric);text-decoration:underline;text-decoration-color:rgba(79,100,255,.35);text-underline-offset:2px}
.prose a:hover{text-decoration-color:var(--electric)}
/* ---- funnel: light canvas, white tiles, ice-blue selection (brief §85-88) */
.fn-page,.fn-wrap,body.fn-body{background:#F5F7FF}
.fn-step{color:var(--l-mid)}
.fn-step .fn-q{color:var(--l-hi)}
.fn-opt{background:#FFFFFF;border:1px solid var(--line-light-2);color:var(--l-hi);border-radius:var(--r-s);min-height:56px}
.fn-opt:hover{border-color:var(--electric)}
.fn-opt[aria-pressed=true]{background:var(--ice);border-color:var(--electric);color:var(--l-hi)}
.fn-rail span{background:var(--line-light-2)}
.fn-rail span.done{background:var(--mint)}
.fn-rail span.on{background:var(--electric)}
.fn-hint,.fn-cap-note{color:var(--l-low)}
.f-field input,.f-field select,.f-field textarea{background:#FFFFFF;border:1px solid var(--line-light-2);color:var(--l-hi);border-radius:var(--r-s)}
.f-field input:focus{border-color:var(--electric);outline:2px solid rgba(79,100,255,.25);outline-offset:1px}
.f-err{color:#B3441F}
.f-field input[aria-invalid=true],.f-field .bad input{border-color:var(--coral)}
.cbox{color:var(--l-mid)}
.fn-cap-done{background:var(--aqua-mist);border:1px solid rgba(34,201,188,.35);border-radius:var(--r-s);color:var(--l-hi)}
/* ---- inline capture cards ride the same system ---- */
.li-card .fn-card-hd h3{color:var(--l-hi)}
.li-card{background:#FFFFFF}
/* ---- focus visibility sitewide (brief §17) */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--electric);outline-offset:2px;border-radius:4px}
/* ---- footer: deep navy, structured (brief §128) */
.foot,footer.foot,.site-foot{background:var(--midnight);color:var(--t-mid)}
.foot a{color:var(--t-mid)}
.foot a:hover{color:#FFFFFF}
.foot h4,.foot b{color:var(--t-hi)}
/* ---- sticky mobile CTA: white bar, electric action ---- */
.sticky-cta{background:rgba(255,255,255,.96);border-top:1px solid var(--line-light);box-shadow:0 -8px 30px rgba(23,50,77,.08)}
/* ---- reduced motion already honoured; keep transitions modest ---- */
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}

/* ---- Bright Clarity scope remap: inside light sections and the white
   header, every component written against the dark token set re-inks
   itself automatically. One rule instead of a hundred selector chases. */
.tone-day,.tone-dawn,.tone-day-warm,.hdr,.mega{
  --t-hi:var(--l-hi); --t-mid:var(--l-mid); --t-low:var(--l-low); --t-faint:var(--l-low);
  --line-dark:var(--line-light); --line-dark-2:var(--line-light-2);
  --glass:#FFFFFF; --glass-2:var(--ice); --glass-light:#FFFFFF;
}
.tone-dawn{background:var(--ice)}
.tone-day-warm{background:#FFFFFF}
/* hero on ice: wash becomes soft geometry, not darkness */
.hero.tone-dawn{background:linear-gradient(180deg,#F4F6FF 0%,var(--ice) 60%,var(--day) 100%)}
.hero.tone-dawn .hero-wash{opacity:.5;filter:none}

/* ---- Bright Clarity definitive ink scale (v62). The site's text all
   flows through --ink-*; the legacy "one ink scale" block pinned those
   to light-on-dark literals on every tone. This final layer re-scopes
   them properly: light sections get navy ink, navy bands keep white. */
.tone-day,.tone-dawn,.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:#B3441F;
  --ink-hi:#17324D; --ink-mid:#4D6175; --ink-low:#718196; --ink-faint:#8DA2B8;
  --rule:#DFE7EF; --rule-2:#CBD6E2;
  --accent:var(--electric); --accent-2:var(--mint-deep);
  --surface:#FFFFFF; --surface-solid:#FFFFFF;
  color:var(--ink-mid);
}
.tone-midnight,.tone-deep,.tone-dusk{
  --ink-hi:#FFFFFF; --ink-mid:#C9D6E6; --ink-low:#9FB3C8; --ink-faint:#8DA2B8;
  --rule:rgba(255,255,255,.14); --rule-2:rgba(255,255,255,.22);
  --accent:var(--mint); --accent-2:var(--blue);
  --surface:rgba(255,255,255,.05); --surface-solid:#1E3D5E;
  color:var(--ink-mid);
}
.tone-day{background-color:var(--day)}
.tone-dawn{background-color:var(--ice)}
.tone-day-warm{background-color:#FFFFFF}
.tone-midnight,.tone-deep{background-color:var(--midnight)}
.tone-dusk{background-color:var(--dusk-2)}
.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{background-color:#F5F7FF}
body{background:var(--day);color:var(--l-mid)}
/* funnel inputs on light stages: undo the dark glass field styling */
[class*="fn-stage"] .f-field input,[class*="fn-stage"] .f-field select,[class*="fn-stage"] .f-field textarea{
  background:#FFFFFF;border:1px solid var(--line-light-2);color:var(--l-hi);
}
/* hero vignette has no place on a light hero */
.hero::after{content:none !important}

/* ---- v62 polish: the floating pill joins the light system ---- */
.cta-pill{background:#FFFFFF;border:1px solid var(--line-light);box-shadow:var(--sh-3);color:var(--l-hi)}
.cta-pill .sub{color:var(--l-low)}
/* ---- Clarity Landscape (v62): hero artwork sits right on desktop ---- */
.hero-art{display:none}
@media(min-width:1020px){
  .hero.tone-dawn .hero-in{max-width:none;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:var(--sp6);align-items:center}
  .hero-art{display:block;order:2;filter:drop-shadow(0 20px 40px rgba(23,50,77,.10))}
  .hero-art svg{width:100%;height:auto;border-radius:28px}
  .hero.tone-dawn .hero-meta,.hero.tone-dawn .hero-disclose,.hero.tone-dawn .hero-cta,.hero.tone-dawn h1,.hero.tone-dawn .lead,.hero.tone-dawn .eyebrow{grid-column:1}
  .hero.tone-dawn .hero-art{grid-column:2;grid-row:1/span 6}
}
/* ---- Problem tiles: per-cluster mists (Clarity World grammar) ---- */
.tiles .tile:nth-child(1){background:var(--ice)}
.tiles .tile:nth-child(2){background:var(--sun-mist)}
.tiles .tile:nth-child(3){background:var(--lilac-mist)}
.tiles .tile:nth-child(4){background:var(--aqua-mist)}
.tiles .tile:nth-child(5){background:var(--coral-mist)}
.tiles .tile:nth-child(6){background:#FFFFFF}
.tiles .tile{border:1px solid var(--line-light);border-radius:var(--r-m)}
.tiles .tile:hover{border-color:var(--line-light-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
/* ---- v62: light-section tables lose the all-dark-era header band ---- */
.tone-day table.cmp thead th,.tone-day-warm table.cmp thead th,.tone-dawn table.cmp thead th{
  background:#F1F4F8;color:var(--l-hi);
}
.tone-day table.cmp thead th:first-child,.tone-day-warm table.cmp thead th:first-child{background:#F1F4F8}
.tone-day table.cmp thead th a,.tone-day-warm table.cmp thead th a{color:var(--mint-deep);border-bottom-color:rgba(14,156,144,.35)}
table.cmp thead th a{color:var(--mint-deep)}
.tone-midnight table.cmp thead th,.tone-dusk table.cmp thead th{background:rgba(255,255,255,.06);color:#FFFFFF}
.tone-midnight table.cmp thead th a,.tone-dusk table.cmp thead th a{color:var(--mint)}
/* aqua never carries white text (adjudicated contrast rule) */
.cta-pill .btn,.cta-pill .btn-primary{background:var(--electric);color:#FFFFFF}
.cta-pill .btn:hover{background:var(--electric-deep)}

/* ---- v63: mobile drawer joins the light system (brief §96) ---- */
.drawer{background:#FFFFFF;color:var(--l-mid)}
.drawer .drawer-x{color:var(--l-hi)}
.drawer a{color:var(--l-hi)}
.drawer .nav-t,.drawer summary{color:var(--l-hi)}
.drawer .sub,.drawer span{color:var(--l-low)}
.drawer .btn-primary{background:var(--electric);color:#FFF}
/* ---- v63: footer wordmark on navy keeps white ink ---- */
.foot .logo,.foot .logo-w,.ftr .logo,.ftr .logo-w{color:#FFFFFF}
.foot .logo-w span:last-child,.ftr .logo-w span:last-child{color:var(--mint)}

/* ===== CINEMATIC 2027 PACKAGE (verbatim) ===== */
:root{--ink:#0d1819;--dark:#0b1317;--lime:#c7f58b;--lime-2:#d8ffb0;--cream:#f5f5f0;--paper:#fffefa;--muted:#697475;--border:#dde3dd;--radius:22px;--ease:cubic-bezier(.2,.65,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #71bb85;outline-offset:4px}img,svg{display:block}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;font-weight:700}p{line-height:1.7}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.container{width:min(1440px,calc(100% - 112px));margin:0 auto}.skip-link{position:absolute;z-index:999;background:#fff;color:#000;padding:16px;top:-70px;left:10px}.skip-link:focus{top:10px}.eyebrow{font-size:10px;letter-spacing:.20em;font-weight:800;display:flex;align-items:center;gap:13px;line-height:1.4;margin-bottom:25px}.eyebrow-line{height:1px;width:30px;background:var(--lime);display:inline-block;flex:none}.dark-line{background:#3b6250}.micro-label{font-size:10px;letter-spacing:.16em;font-weight:800}.section{padding:125px 0}.section-heading{margin-bottom:52px}.section-heading.between{display:flex;align-items:flex-end;justify-content:space-between;gap:55px}.section-heading h2,.region-heading h2,.faq-layout h2,.urgent-head h2,.free-copy h2,.editorial-copy h2{font-size:clamp(38px,4.1vw,64px);line-height:1.11;letter-spacing:-.06em;margin-bottom:0;font-weight:700}.text-muted{color:#85908b}.section-aside{width:308px;max-width:35%;padding-bottom:6px}.section-aside p{color:#69736e;line-height:1.65;font-size:14px;margin-bottom:25px}.text-link{font-weight:800;display:inline-flex;align-items:center;gap:18px;font-size:13px;padding-bottom:8px;border-bottom:1px solid #8f9b91;transition:gap .25s}.text-link:hover{gap:24px}.text-link svg{width:16px;height:16px}
.announcement{position:relative;z-index:20;background:#0c1818;color:#d5e5dd;border-bottom:1px solid #ffffff1a}.announcement-inner{height:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:9px;letter-spacing:.14em;font-weight:750}.announcement-inner>span{display:flex;align-items:center;gap:9px}.announcement-right{letter-spacing:.015em!important;font-size:10px!important;font-weight:500!important}.announcement-right a{color:var(--lime);font-weight:700;margin-left:7px}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.site-header{position:absolute;left:0;right:0;top:32px;z-index:50;color:#f4fbf5}.nav-shell{height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #ffffff20}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex-shrink:0}.brand-mark{width:33px;height:32px;position:relative;display:block;transform:rotate(-20deg)}.brand-mark span{position:absolute;width:11px;height:26px;border-radius:9px;background:var(--lime);top:3px;transform:skewY(-13deg)}.brand-mark span:nth-child(1){left:0;opacity:.45}.brand-mark span:nth-child(2){left:9px;opacity:.8}.brand-mark span:nth-child(3){left:19px}.brand-word{font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-.075em;font-weight:800;line-height:1}.brand-word>span{font-weight:400;color:#e1eae1}.brand-stop{color:var(--lime)}.desktop-nav{display:flex;align-items:center;gap:clamp(17px,2vw,37px)}.desktop-nav a{font-size:12px;font-weight:600;color:#d2ddd7;transition:color .2s;white-space:nowrap}.desktop-nav a:hover{color:var(--lime)}.nav-actions{display:flex;align-items:center;gap:25px}.nav-text-link{font-size:11px;font-weight:700;white-space:nowrap;display:flex;gap:7px;align-items:center}.nav-text-link svg{width:13px;height:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:14px 21px;min-height:49px;border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:-.01em;line-height:1.15;transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .2s;white-space:nowrap}.btn svg{width:16px;height:16px}.btn:hover{transform:translateY(-2px)}.btn-lime{background:var(--lime);color:#102216}.btn-lime:hover{background:#dfffba;box-shadow:0 9px 32px #c7f58b25}.btn-nav{padding:13px 17px;min-height:42px;gap:16px}.btn-large{padding:18px 22px;min-height:57px;font-size:13px}.btn-ghost{background:#ffffff09;color:white;border-color:#ffffff55}.btn-ghost:hover{background:#ffffff1b}.btn-dark{background:#102322;color:#fff}.btn-dark:hover{background:#203c34}.menu-toggle{display:none;color:white;background:none;border:0;padding:10px;cursor:pointer}.menu-toggle span{height:2px;background:currentColor;width:23px;display:block;margin:5px}.mobile-menu{display:none}
.hero{position:relative;overflow:hidden;min-height:820px;background:linear-gradient(122deg,#0b1416 0%,#0d181b 47%,#101c20 100%);color:white}.hero-grid{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(#8cbda71a 1px,transparent 1px),linear-gradient(90deg,#8cbda71a 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent,#000 75%)}.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,#101b1f70 100%);pointer-events:none}.hero-ambient{position:absolute;pointer-events:none;filter:blur(85px);border-radius:100%}.hero-ambient-one{width:680px;height:680px;right:5%;top:6%;background:radial-gradient(circle,#65b99d40 0%,#2d747227 44%,transparent 70%)}.hero-ambient-two{width:450px;height:450px;right:22%;bottom:-40%;background:#b3d36e16}.hero-content{position:relative;display:grid;grid-template-columns:1fr .94fr;gap:30px;min-height:774px;align-items:center;padding-top:138px;padding-bottom:82px}.hero-copy{z-index:4;position:relative;align-self:center;padding-bottom:35px}.hero-eyebrow{color:var(--lime);margin-bottom:27px}.hero h1{font-size:clamp(50px,5.15vw,87px);line-height:1.10;letter-spacing:-.072em;margin:0 0 27px;max-width:800px;font-weight:700}.hero .serif-word{font-style:normal;color:#fff}.hero-highlight{color:var(--lime)}.hero-highlight .period{color:#fff}.hero-lede{max-width:515px;color:#bccbc5;font-size:16px;line-height:1.8;margin:0 0 28px}.hero-ctas{display:flex;gap:11px;flex-wrap:wrap}.hero-note{color:#a4b9ae;display:flex;gap:9px;align-items:flex-start;font-size:11px;line-height:1.6;margin-top:25px}.hero-note svg{width:16px;height:16px;color:var(--lime);flex:none}.hero-bottom{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:-53px;padding-bottom:25px}.hero-bottom p{max-width:770px;font-size:9px;font-weight:600;letter-spacing:.06em;color:#a6b8b2;margin:0;line-height:1.8}.hero-bottom p a{color:#e4f5e6;text-decoration:underline;text-underline-offset:3px}.scroll-cue{font-size:10px;letter-spacing:.12em;white-space:nowrap;display:flex;align-items:center;gap:14px;color:#c9d8d1}.scroll-cue span{font-size:21px}
.hero-art{position:relative;min-height:580px;align-self:center}.art-halo{width:510px;height:510px;border-radius:50%;position:absolute;top:7%;left:9%;background:radial-gradient(circle,#deffb923 4%,#80d5b01c 33%,#78caca08 49%,transparent 67%);filter:blur(18px)}.orbit{position:absolute;width:550px;height:550px;border:1px solid #dcfff323;border-radius:50%;top:1%;left:0;transform:rotate(-28deg) scaleY(.78)}.orbit-two{width:630px;height:630px;border-color:#c0f9d810;top:-6%;left:-8%;transform:rotate(17deg) scaleY(.6)}.sculpture{position:absolute;left:16%;top:6%;width:440px;height:440px;border-radius:50%;transform:rotate(-28deg);background:radial-gradient(circle at 68% 28%,#e8fff2aa 0%,#96e9c36b 8%,#6ea1aa30 26%,transparent 54%),radial-gradient(circle at 36% 40%,#8dfac18c,#124d508e 36%,#0f263389 60%,#23525d49 72%,transparent 77%);box-shadow:inset -18px -26px 45px #011112, inset 3px 1px 48px #c0fff73c,0 25px 95px #2cb69f2d;animation:artFloat 9s ease-in-out infinite;overflow:hidden}.sculpture:before{content:'';position:absolute;inset:18px;border-radius:50%;border:1px solid #b4fff33c;box-shadow:inset 1px 1px 30px #d8ffe125}.sculpture:after{content:'';position:absolute;inset:2%;border-radius:50%;background:linear-gradient(150deg,transparent 26%,#ddffcb22 27%,#ebfff62f 36%,transparent 44%);transform:rotate(24deg)}.sculpture-inner{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 20%,#eaffd795,#629c9a45 24%,#071d29d1 74%);box-shadow:0 0 0 30px #ccffbc11,0 0 0 62px #bcf8df09, inset 5px 4px 19px #d5ffda40}.sculpture-ring{position:absolute;border:37px solid #d0ffe91b;border-left-color:#bdfff150;border-top-color:#e2ffd11c;border-right-color:#142f3405;width:370px;height:370px;top:33px;left:30px;border-radius:50%;transform:skew(0,10deg) rotate(-45deg);box-shadow:3px -2px 10px #d8ffe73a,inset 4px 3px 18px #d6ffd321}.sculpture-flare{position:absolute;width:180px;height:180px;left:50%;top:12%;border-radius:50%;background:#e5ffd75c;filter:blur(50px)}.art-spark{position:absolute;border-radius:50%;background:#c6f8b5;box-shadow:0 0 24px #d3ffbb80}.art-spark-one{width:7px;height:7px;top:13%;left:24%}.art-spark-two{width:5px;height:5px;top:63%;right:2%}.floating-label{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 19px;border:1px solid #ffffff40;border-radius:13px;background:linear-gradient(135deg,#d3fff121,#d4fff009);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 15px 50px #06171d33;font-size:11px;color:#d0e6dc;line-height:1.4}.floating-label strong{color:white;font-size:12px}.floating-label-one{right:0;top:13%;transform:rotate(5deg)}.label-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#17372c}.label-icon svg{width:17px;height:17px}.glass-guide{z-index:3;position:absolute;right:0;bottom:5%;width:min(410px,85%);border:1px solid #ffffff50;border-radius:18px;background:linear-gradient(130deg,#f9fffcef 0%,#e4f0e9e5 100%);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 35px 95px #00000045;padding:23px;color:#20332a;transform:rotate(-1.7deg);transition:transform .5s var(--ease)}.glass-guide:hover{transform:rotate(0) translateY(-5px)}.glass-guide-top{display:flex;justify-content:space-between;align-items:center;color:#82948a}.glass-guide .micro-label{color:#547b64}.glass-guide .guide-count{font-size:9px;color:#7b9384}.glass-guide h2{font-size:23px;letter-spacing:-.05em;margin:11px 0 14px;font-weight:800}.glass-guide a{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #d3ded5;padding:14px 0;font-size:12px;font-weight:700}.glass-guide a:last-child{padding-bottom:1px}.glass-guide a>span{display:flex;gap:11px;align-items:center}.glass-guide a span svg{width:17px;height:17px;color:#4f8270}.glass-guide .guide-arrow{width:15px;height:15px;transition:transform .2s}.glass-guide a:hover .guide-arrow{transform:translate(2px,-2px)}@keyframes artFloat{0%,100%{transform:translateY(0) rotate(-28deg)}50%{transform:translateY(-17px) rotate(-26deg)}}
.assurance-strip{background:#e4e9df;border-bottom:1px solid #d4d9d0}.assurance-inner{min-height:86px;display:flex;justify-content:space-between;align-items:center;gap:20px}.assurance-inner span{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:750}.assurance-inner svg{width:19px;height:19px;color:#3a6552}
.section-intro{background:#f6f6f2}.debt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,245px);gap:14px}.debt-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:24px 25px 25px;border:1px solid #e1e5dd;border-radius:18px;background:#e9eee6;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}.debt-card:hover,.solution-card:hover,.tool-card:hover{transform:translateY(-6px);box-shadow:0 24px 55px #20351d13;border-color:#c1d6b9}.debt-card .debt-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}.icon-pill,.card-arrow{display:grid;place-items:center;border:1px solid #c6d0c5;border-radius:13px;width:43px;height:43px;background:#ffffff7a}.icon-pill svg{width:20px;height:20px}.card-arrow{background:transparent;border-radius:50%;width:33px;height:33px}.card-arrow svg{width:14px;height:14px}.debt-bottom{position:relative;z-index:2}.card-kicker{font-size:9px;letter-spacing:.17em;font-weight:800;color:#637566;display:block;margin-bottom:11px}.debt-card h3{font-size:23px;letter-spacing:-.04em;line-height:1.12;margin-bottom:10px}.debt-card p{font-size:12px;line-height:1.55;color:#647269;margin:0;max-width:235px}.debt-featured{grid-column:span 2;grid-row:span 2;background:linear-gradient(145deg,#d9eed8 0%,#bdd9c4 100%);padding:29px 32px}.debt-featured h3{font-size:40px;letter-spacing:-.06em}.debt-featured p{font-size:14px;max-width:380px}.debt-featured .card-kicker{color:#406b51}.debt-featured-art{position:absolute;left:5%;right:5%;top:5%;height:65%;pointer-events:none}.mini-card{display:block;position:absolute;width:250px;height:154px;border-radius:15px;box-shadow:0 19px 43px #305a4640;left:23%;top:21%;transform:rotate(-15deg);background:linear-gradient(138deg,#0f2b31,#173b3e 70%,#9bc6a5);border:1px solid #ffffff69}.mini-card-back{transform:translate(55px,-45px) rotate(18deg);background:linear-gradient(140deg,#95caa5,#456c69 62%,#102c3b);opacity:.85}.mini-card-front{color:#e9f7eb;padding:20px}.card-brand{font-weight:800;font-size:15px;letter-spacing:-.05em}.card-brand span{color:var(--lime)}.chip-icon{position:absolute;width:30px;height:23px;border:1px solid #e4edc681;border-radius:5px;top:65px;left:20px;background:linear-gradient(90deg,#c8eac2,#8daaa0)}.fake-cardnum{position:absolute;bottom:20px;left:20px;font-size:11px;letter-spacing:.05em;color:#f1f9ee}.card-action{font-size:12px;font-weight:800;display:flex;align-items:center;gap:12px;margin-top:25px}.card-action svg{width:15px;height:15px}.debt-rose{background:#f2e9e5}.debt-sky{background:#e5edf0}.explore-row{border-bottom:1px solid #d2dbd4;padding:31px 0;font-size:12px;color:#738078}.explore-row a{color:#213d31;font-weight:800;margin-left:20px;text-decoration:underline;text-decoration-color:#a0b6a2;text-underline-offset:5px}
.solutions-section{background:#fffefb}.solution-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.solution-card{background:#f2f3ef;border:1px solid #e4e7de;border-radius:17px;padding:21px;min-height:470px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}.solution-top,.tool-top{display:flex;justify-content:space-between;align-items:center}.solution-index{font-size:11px;font-weight:800;color:#657369}.circle-arrow{width:34px;height:34px;border:1px solid #bac8b9;border-radius:50%;display:grid;place-items:center;flex:none}.circle-arrow svg{width:16px;height:16px}.solution-icon{height:153px;display:grid;place-items:center;position:relative;overflow:hidden;margin:8px -6px 12px}.solution-icon-a:before,.solution-icon-b:before,.solution-icon-c:before,.solution-icon-d:before{content:'';position:absolute;inset:10% 12%;border-radius:50%;background:radial-gradient(circle,#a8c3bd40,transparent 67%)}.abstract-disc{width:126px;height:126px;border-radius:50%;border:22px solid #597d70;box-shadow:inset 0 6px 25px #21453870,0 18px 23px #20483d25;transform:rotateX(53deg) rotate(-28deg);background:linear-gradient(135deg,#b6e6cc,#235543)}.abstract-stack{height:108px;width:120px;position:relative;background:linear-gradient(135deg,#accfbc,#326853);transform:rotate(-19deg) skew(4deg);border-radius:13px;box-shadow:21px 14px 0 #7ca998,38px 28px 0 #bed3c6}.abstract-arch{height:125px;width:116px;border-radius:70px 70px 10px 10px;background:linear-gradient(155deg,#b7ced6,#43798a);position:relative;transform:rotate(12deg)}.abstract-arch:after{content:'';position:absolute;width:61px;height:84px;border-radius:40px 40px 0 0;background:#f2f3ef;left:27px;bottom:0}.abstract-prism{height:116px;width:116px;background:linear-gradient(135deg,#b5adcf 0%,#8c8da9 45%,#514b72 46%,#aaa4c8);clip-path:polygon(50% 0,100% 25%,100% 76%,50% 100%,0 74%,0 25%);transform:rotate(-9deg)}.solution-copy{margin-top:auto}.solution-category{color:#6c7b70;letter-spacing:.15em;font-size:9px;font-weight:800}.solution-card h3{font-size:19px;letter-spacing:-.04em;line-height:1.25;margin:13px 0 13px;min-height:48px}.solution-card h3 em{font-size:11px;vertical-align:middle;letter-spacing:.01em;font-style:normal;background:#dfe7df;padding:4px 6px;border-radius:5px}.invisible-placeholder{visibility:hidden}.solution-card p{font-size:12px;line-height:1.65;color:#68756e;margin-bottom:20px;min-height:62px}.solution-more{display:flex;gap:9px;align-items:center;font-weight:800;font-size:12px}.solution-more svg{width:14px;height:14px}.solution-disclaimer{margin:22px 0 0;display:flex;align-items:center;gap:9px;color:#7c8680;font-size:11px;line-height:1.5}.solution-disclaimer svg{flex:none;width:16px;height:16px}
.journey-section{background:#101c1e;color:#fff;position:relative;overflow:hidden}.journey-section:before{content:'';position:absolute;border:1px solid #d9ffda18;width:680px;height:680px;border-radius:50%;left:-400px;top:-300px;box-shadow:0 0 0 80px #a6f3a006,0 0 0 160px #a6f3a004}.journey-layout{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:14%;align-items:center}.eyebrow.light{color:var(--lime)}.journey-intro h2{font-size:clamp(55px,6vw,98px);line-height:1.08;letter-spacing:-.07em;margin:0 0 27px}.accent-lime{color:var(--lime)}.journey-intro>p:not(.eyebrow){color:#9db1a9;font-size:15px;line-height:1.8;max-width:400px;margin:0 0 30px}.journey-steps{border:1px solid #ffffff27;border-radius:19px;background:linear-gradient(145deg,#ffffff0e,#ffffff04);backdrop-filter:blur(16px);padding:10px 28px}.journey-step{display:grid;grid-template-columns:48px 1fr 18px;gap:17px;padding:30px 0;border-bottom:1px solid #ffffff1e;align-items:start}.journey-step:last-child{border-bottom:0}.journey-no{color:var(--lime);font-size:14px;font-weight:800;margin-top:3px}.journey-step .micro-label{color:#89a496}.journey-step h3{font-size:20px;letter-spacing:-.04em;margin:11px 0 7px}.journey-step p{color:#a9bbb2;font-size:12px;line-height:1.6;margin:0}.journey-step>svg{width:17px;height:17px;color:var(--lime)}
.tools-section{background:#f6f6f2}.tools-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}.tool-card{background:#e9efeb;border-radius:18px;border:1px solid #e1e7df;padding:23px;display:flex;flex-direction:column;min-height:390px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}.tool-main{background:#d6e6d7}.tool-label{letter-spacing:.15em;font-size:9px;font-weight:800;color:#657e6a;display:inline-flex;align-items:center;gap:8px}.tool-label .dot{width:6px;height:6px;background:#527d5c;border-radius:50%}.tool-graphic{background:#f7faf5d9;border:1px solid #fff9;border-radius:15px;margin:30px 4px 18px;padding:18px;transform:rotate(-3deg);box-shadow:0 18px 28px #466d4c20}.graphic-track{display:flex;gap:5px}.graphic-track span{height:4px;flex:1;border-radius:4px;background:#d6e2da}.graphic-track .track-on{background:#517c63}.graphic-head{font-weight:800;font-size:14px;letter-spacing:-.03em;margin:20px 0}.graphic-choice{border:1px solid #d4e2d5;padding:11px 13px;background:#e2f1e5;border-radius:7px;font-size:11px;display:flex;align-items:center;justify-content:space-between;font-weight:700}.graphic-choice.muted{background:white;color:#809184;margin-top:7px}.graphic-choice span{color:#476e56}.tool-bottom{margin-top:auto;position:relative}.tool-bottom h3{font-size:23px;letter-spacing:-.05em;margin-bottom:9px}.tool-bottom p{font-size:12px;color:#66796d;max-width:275px;margin:0}.tool-main .tool-bottom{padding-right:47px}.tool-main .circle-arrow{position:absolute;right:0;bottom:12px}.compare-visual{height:188px;margin:12px 0 21px;display:flex;justify-content:center;flex-direction:column;gap:20px}.compare-head{display:flex;justify-content:space-around;font-size:12px;font-weight:800;color:#547c6a}.compare-bars{height:95px;display:flex;justify-content:space-around;align-items:end;gap:18px;border-bottom:1px solid #aac2b4;margin:0 19px}.compare-bars span{width:21%;background:linear-gradient(0deg,#8eb7a2,#c5e3d3);border-radius:8px 8px 0 0}.compare-bars span:nth-child(2){background:linear-gradient(0deg,#6d9d94,#bcd6d6)}.compare-bars span:nth-child(3){background:linear-gradient(0deg,#d2c8d7,#b0b8cd)}.calc-visual{display:flex;align-items:center;justify-content:center;gap:22px;height:188px;color:#365e4c}.calc-visual>span:first-child{font-family:Manrope;font-weight:800;font-size:100px;line-height:1;letter-spacing:-.09em;color:#7eab93}.calc-lines{display:flex;flex-direction:column;gap:12px}.calc-lines i{width:58px;height:8px;background:#c3d7c9;border-radius:8px}.calc-lines i:nth-child(2){width:40px}.calc-lines i:nth-child(3){width:52px}.calc-bubble{display:grid;place-items:center;background:#cce4d1;width:39px;height:39px;border-radius:50%;font-size:22px}
.urgent-section{background:#fffefb;padding-top:65px;padding-bottom:72px}.urgent-shell{padding:55px 58px 50px;border:1px solid #e9ded8;background:#f4eae5;border-radius:21px}.urgent-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:37px}.urgent-head>p{max-width:365px;font-size:13px;color:#766d67;margin:0}.urgent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:25px}.urgent-grid a{display:flex;flex-direction:column;justify-content:space-between;min-height:126px;background:#fff8f4d9;border:1px solid #e8ddd8;border-radius:12px;padding:17px;position:relative;transition:background .2s,transform .2s}.urgent-grid a:hover{background:white;transform:translateY(-3px)}.urgent-grid a>span{color:#a38a7f;font-size:10px;font-weight:800}.urgent-grid strong{font-size:15px;letter-spacing:-.035em;padding-right:10px}.urgent-grid svg{position:absolute;right:15px;top:15px;width:14px;height:14px}
.jurisdiction-section{background:#f3f5f0}.region-layout{display:grid;grid-template-columns:.82fr 1fr;gap:9%;align-items:center}.region-heading>p:not(.eyebrow){max-width:420px;font-size:14px;color:#718075;margin:25px 0}.region-widget{background:#e5ede5;padding:13px;border-radius:20px;border:1px solid #d6e0d5;box-shadow:0 30px 60px #3d624d0b}.region-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}.region-tabs button{border:0;background:transparent;padding:14px 3px;border-radius:9px;font-size:11px;color:#78897c;font-weight:800;cursor:pointer;white-space:nowrap}.region-tabs button[aria-selected=true]{background:#fff;color:#244b34;box-shadow:0 4px 12px #243d3112}.region-panel{min-height:264px;background:#fff;border-radius:13px;padding:26px 27px 20px}.region-caption{font-size:9px;font-weight:800;letter-spacing:.15em;color:#7b9881}.region-panel h3{font-size:28px;letter-spacing:-.045em;margin:9px 0}.region-panel>p{color:#728278;font-size:12px;max-width:430px;margin-bottom:18px}.region-tags{display:flex;flex-wrap:wrap;gap:7px}.region-tags a{background:#e8f1e7;border:1px solid #cfdfcd;padding:8px 12px;border-radius:7px;font-size:11px;font-weight:800;transition:background .2s}.region-tags a:hover{background:#d9ebd7}.region-foot{border-top:1px solid #e5eae4;margin-top:22px;padding-top:15px;color:#8b9990;font-size:10px;display:flex;align-items:center;gap:9px}.region-foot svg{height:14px;width:14px}
.free-section{background:#e4eadc}.free-inner{display:grid;grid-template-columns:.9fr 1fr;gap:12%;align-items:center}.free-copy h2{font-size:clamp(51px,5.7vw,91px)}.free-copy>p:not(.eyebrow){font-size:15px;line-height:1.8;color:#606e61;max-width:450px;margin:25px 0}.underline-swoosh{position:relative;z-index:0}.underline-swoosh:after{content:'';position:absolute;bottom:8px;left:0;right:0;height:11px;background:#abdb95;z-index:-1;transform:rotate(-2deg)}.free-list{background:#f7f9f1;border-radius:17px;border:1px solid #e5ebde;padding:0 27px}.free-list a{display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:18px;padding:23px 0;border-bottom:1px solid #dde5dc;transition:padding .2s}.free-list a:last-child{border-bottom:0}.free-list a:hover{padding-left:5px}.resource-order{color:#809586;font-size:10px;font-weight:800}.free-list strong{font-size:18px;letter-spacing:-.04em;display:block}.free-list small{font-size:12px;color:#77877a;display:block;margin-top:3px}.free-list svg{height:17px;width:17px}
.editorial-section{background:#fffefb}.editorial-card{border:1px solid #e1e7dd;border-radius:19px;background:#f1f4ec;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:360px}.editorial-visual{background:#17352f;color:#e9f4ec;padding:50px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:end}.editorial-visual:before{content:'';position:absolute;width:400px;height:400px;right:-100px;top:-220px;background:radial-gradient(circle,#bdffc16b 0%,#84d4a329 50%,transparent 70%);filter:blur(14px)}.data-orbit{position:absolute;right:-16%;top:-25%;width:450px;height:450px;border-radius:50%;border:1px solid #c5f1d144;box-shadow:0 0 0 50px #c5f1d113,0 0 0 110px #c5f1d10b}.data-index{position:absolute;top:43px;left:50px;color:#b8e1c6;font-size:10px;letter-spacing:.21em;font-weight:800}.data-figure{position:relative;font-family:Manrope,sans-serif;font-size:clamp(68px,8vw,116px);line-height:1;font-weight:800;letter-spacing:-.095em}.data-figure span{font-size:18px;vertical-align:top;position:relative;top:15px;letter-spacing:0}.editorial-visual p{position:relative;color:#c0d2c5;font-size:12px;margin:10px 0 0;line-height:1.55}.editorial-copy{padding:56px 65px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.editorial-copy h2{font-size:clamp(32px,3.4vw,53px)}.editorial-copy>p:not(.eyebrow){font-size:13px;color:#67766b;margin:21px 0}.editorial-copy small{font-size:10px;color:#96a399;margin-top:24px}
.faq-section{background:#f5f5f0}.faq-layout{display:grid;grid-template-columns:.78fr 1fr;gap:12%}.faq-layout>div:first-child>p:not(.eyebrow){max-width:310px;color:#758077;font-size:14px;margin:25px 0}.faq-list{border-top:1px solid #cdd7ce}.faq-list details{border-bottom:1px solid #cdd7ce}.faq-list summary{cursor:pointer;list-style:none;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:15px;font-weight:800;letter-spacing:-.02em}.faq-list summary::-webkit-details-marker{display:none}.faq-plus{height:30px;width:30px;flex:none;border-radius:50%;border:1px solid #afc1b2;display:grid;place-items:center;font-size:20px;font-weight:400;transition:transform .2s}.faq-list details[open] .faq-plus{transform:rotate(45deg)}.faq-list details>div{padding:0 30px 24px 0;color:#6d7b6f;font-size:13px;line-height:1.8}.faq-list a{text-decoration:underline;text-underline-offset:3px;font-weight:700;color:#1b5743}
.final-cta{background:#e5f2d4;overflow:hidden;position:relative}.final-cta-inner{position:relative;padding:97px 0 103px}.final-copy{position:relative;z-index:2}.final-copy h2{font-size:clamp(51px,6.3vw,95px);line-height:1.08;letter-spacing:-.073em;margin:0 0 25px}.final-copy h2>span{color:#67866a}.final-copy>p:not(.eyebrow){max-width:485px;font-size:15px;color:#526b56;line-height:1.8;margin-bottom:29px}.final-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}.final-secondary{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800}.final-secondary svg{width:14px;height:14px}.final-orb{position:absolute;right:-8%;top:-10%;height:680px;width:680px;border-radius:50%;background:radial-gradient(circle at 38% 28%,#fffce9 0%,#ceeab6 22%,#91baa0 44%,#2e5b52 65%,#1b443b 72%,transparent 73%);opacity:.72;box-shadow:inset 40px 30px 60px #ffffff89,0 40px 100px #426b4230;transform:rotate(-40deg)}.final-orb:before{content:'';position:absolute;inset:-45px;border:1px solid #658d7755;border-radius:50%}.final-orb:after{content:'';position:absolute;inset:60px;border:1px solid #d4ffd558;border-radius:50%}
.site-footer{background:#101b1e;color:#e8f1e9;padding:70px 0 30px}.footer-main{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:50px;padding-bottom:65px;border-bottom:1px solid #ffffff24}.footer-brand p{font-size:13px;color:#96aca1;margin:22px 0}.footer-feature-link{font-weight:800;color:var(--lime);font-size:12px}.footer-col{display:flex;flex-direction:column;gap:14px}.footer-col h3{font-size:12px;color:white;margin:4px 0 11px}.footer-col a{font-size:12px;color:#91a79a;line-height:1.5}.footer-col a:hover,.footer-base a:hover{color:var(--lime)}.footer-disclosure{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:31px 0;border-bottom:1px solid #ffffff24}.disclosure-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#e0ffb417;color:#c7ffae}.disclosure-icon svg{height:17px;width:17px}.footer-disclosure strong{font-size:12px}.footer-disclosure p{color:#85998e;font-size:10px;line-height:1.75;margin:9px 0}.footer-base{display:flex;justify-content:space-between;gap:20px;padding-top:25px;color:#8fa39a;font-size:10px;align-items:center}.footer-base span:nth-child(2){display:flex;gap:17px}.mobile-action{display:none}
@media(max-width:1300px){.container{width:min(1200px,calc(100% - 72px))}.desktop-nav{gap:17px}.nav-text-link{display:none}.hero h1{font-size:clamp(53px,5.4vw,76px)}.hero-art{transform:scale(.87);transform-origin:center}.solution-card{padding:17px}.solution-card h3{font-size:18px}.debt-grid{grid-template-rows:repeat(2,230px)}.editorial-copy{padding:46px}}
@media(max-width:1020px){.container{width:calc(100% - 56px)}.desktop-nav,.nav-text-link{display:none}.menu-toggle{display:block}.nav-actions{gap:12px}.hero-content{grid-template-columns:1fr .80fr}.hero h1{font-size:clamp(47px,5.65vw,65px)}.hero-art{transform:scale(.77);transform-origin:left center;margin-left:-45px}.glass-guide{right:-80px}.hero{min-height:780px}.hero-content{min-height:730px;padding-top:145px}.assurance-inner{flex-wrap:wrap;padding:22px 0;justify-content:center;gap:16px 35px}.solution-grid{grid-template-columns:repeat(2,1fr)}.solution-card{min-height:400px}.debt-grid{grid-template-rows:repeat(2,216px)}.debt-card{padding:21px}.mini-card{left:10%;top:20%}.urgent-grid{grid-template-columns:repeat(2,1fr)}.tools-grid{grid-template-columns:1.1fr 1fr}.tool-main{grid-row:span 2}.tool-card{min-height:340px}.tool-main{min-height:695px}.tool-main .tool-graphic{margin-top:95px}.region-layout{gap:5%}.free-inner,.faq-layout{gap:7%}.footer-main{grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer-col:last-child{grid-column:2 / 4;flex-direction:row;flex-wrap:wrap;gap:10px 22px;align-items:center}.footer-col:last-child h3{width:100%;margin-bottom:0}.site-header .mobile-menu{display:none;position:absolute;top:87px;right:0;left:0;padding:17px 28px 24px;background:#122522;box-shadow:0 24px 50px #0007;flex-direction:column;gap:0}.mobile-menu:not([hidden]){display:flex!important}.mobile-menu a:not(.btn){padding:15px;border-bottom:1px solid #ffffff25;font-size:14px;font-weight:700}.mobile-menu .btn{margin-top:17px}.site-header.menu-active{background:#10211f}}
@media(max-width:760px){html{scroll-padding-top:76px}.container{width:calc(100% - 36px)}.announcement-right{display:none!important}.announcement-inner{justify-content:center;font-size:9px;letter-spacing:.08em}.site-header{top:32px}.nav-shell{height:70px}.brand-word{font-size:22px}.brand-mark{transform:rotate(-20deg) scale(.88)}.btn-nav{display:none}.site-header .mobile-menu{top:69px}.hero{min-height:0}.hero-content{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:145px;padding-bottom:80px;gap:5px}.hero-copy{padding:0}.hero h1{font-size:clamp(45px,9.2vw,77px);line-height:1.13;max-width:620px;margin-bottom:20px}.hero-lede{font-size:14px;line-height:1.75;margin-bottom:24px}.hero-eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:20px}.hero-ctas{flex-wrap:wrap}.hero-ctas .btn{flex:1;min-width:200px}.hero-note{margin-top:18px}.hero-art{min-height:430px;height:430px;transform:scale(.74);transform-origin:top center;margin:0 0 -90px}.sculpture{left:50%;margin-left:-210px;top:1%}.orbit{left:50%;margin-left:-275px}.orbit-two{left:50%;margin-left:-315px}.art-halo{left:50%;margin-left:-255px}.floating-label-one{right:5%;top:9%}.glass-guide{right:5%;bottom:-2%;width:390px}.hero-bottom{margin-top:-8px;display:block;padding-bottom:25px}.hero-bottom p{font-size:9px}.scroll-cue{display:none}.section{padding:78px 0}.section-heading.between{display:block;margin-bottom:32px}.section-heading h2,.region-heading h2,.faq-layout h2,.urgent-head h2,.free-copy h2,.editorial-copy h2{font-size:clamp(38px,8.8vw,58px)}.section-aside{width:auto;max-width:550px;margin-top:23px}.section-aside p{margin-bottom:12px}.assurance-inner{display:grid;grid-template-columns:1fr 1fr;gap:17px;padding:24px 0}.assurance-inner span{font-size:10px;align-items:flex-start}.assurance-inner svg{width:16px;height:16px;flex:none}.debt-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,220px)}.debt-featured{grid-column:span 2;grid-row:span 2}.debt-featured h3{font-size:35px}.debt-featured-art .mini-card{left:23%;top:14%}.debt-card h3{font-size:21px}.explore-row{line-height:2.3}.explore-row a{display:inline-block;margin-left:11px}.journey-layout,.region-layout,.free-inner,.faq-layout,.editorial-card{grid-template-columns:1fr}.journey-layout{gap:38px}.journey-intro h2{font-size:65px}.urgent-head{display:block}.urgent-head>p{margin-top:20px}.urgent-shell{padding:34px 24px}.region-layout{gap:30px}.free-inner{gap:30px}.editorial-card{min-height:0}.editorial-visual{min-height:300px}.editorial-copy{padding:43px 30px}.faq-layout{gap:26px}.final-cta-inner{padding:73px 0 78px}.final-copy h2{font-size:clamp(44px,9vw,73px)}.final-orb{width:420px;height:420px;right:-210px;top:-70px;opacity:.28}.footer-main{grid-template-columns:1fr 1fr;gap:42px 24px}.footer-brand{grid-column:1/3}.footer-col:last-child{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.footer-col:last-child h3{width:auto;margin-bottom:11px}.footer-base{flex-direction:column;align-items:start;gap:14px}.site-footer{padding-bottom:95px}.mobile-action{display:block;position:fixed;z-index:25;bottom:0;left:0;right:0;padding:10px 18px max(12px,env(safe-area-inset-bottom));background:#fafff9e9;backdrop-filter:blur(18px);border-top:1px solid #d7e5d4}.mobile-action a{background:#c7f58b;color:#102216;min-height:48px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;font-size:13px;font-weight:800}.mobile-action svg{width:17px;height:17px}}
@media(max-width:480px){.container{width:calc(100% - 32px)}.hero-content{padding-top:135px}.hero h1{font-size:clamp(43px,10.7vw,58px)}.hero-lede{font-size:13px}.hero-ctas{gap:9px}.hero-ctas .btn{min-width:100%;min-height:51px}.hero-art{height:340px;min-height:340px;transform:scale(.60);margin-top:18px;margin-bottom:-120px}.glass-guide{right:-6%;bottom:3%}.floating-label-one{right:-13%}.hero-note{font-size:10px}.hero-bottom p{font-size:8px}.assurance-inner{gap:15px 8px}.assurance-inner span{font-size:9px;gap:5px}.debt-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,214px);gap:9px}.debt-card{padding:17px 14px;border-radius:14px}.debt-featured{padding:22px;grid-row:span 2}.debt-featured h3{font-size:31px}.debt-featured-art .mini-card{left:5%;top:24%;transform:scale(.9) rotate(-15deg)}.debt-featured-art .mini-card-back{transform:translate(45px,-35px) scale(.9) rotate(18deg)}.debt-card h3{font-size:18px}.debt-card p{font-size:11px}.card-kicker{font-size:8px}.icon-pill{width:37px;height:37px}.card-arrow{width:30px;height:30px}.solution-grid{gap:10px}.solution-card{min-height:400px;padding:15px}.solution-icon{height:110px;margin-top:5px}.abstract-disc{width:100px;height:100px}.abstract-stack{transform:scale(.7) rotate(-19deg) skew(4deg)}.abstract-arch{transform:scale(.7) rotate(12deg)}.abstract-prism{transform:scale(.75) rotate(-9deg)}.solution-card h3{font-size:15px}.solution-card h3 em{font-size:9px}.solution-card p{font-size:10px}.solution-category{font-size:8px;min-height:24px}.solution-more{font-size:10px}.tools-grid{display:grid;grid-template-columns:1fr}.tool-main{grid-row:auto;min-height:405px}.tool-main .tool-graphic{margin-top:30px}.tool-card{min-height:335px}.urgent-grid{gap:8px}.urgent-grid a{min-height:117px;padding:15px}.urgent-grid strong{font-size:13px}.region-tabs button{font-size:10px}.region-panel{padding:22px 18px}.region-panel h3{font-size:24px}.free-list{padding:0 17px}.free-list a{grid-template-columns:24px 1fr 16px;gap:10px}.free-list strong{font-size:16px}.journey-steps{padding:6px 20px}.journey-step{grid-template-columns:28px 1fr 12px;gap:11px}.journey-step h3{font-size:17px}.data-figure{font-size:73px}.editorial-visual{padding:30px}.data-index{left:30px;top:30px}.faq-list summary{font-size:14px}.final-actions{gap:22px}.footer-main{gap:35px 15px}.footer-col a{font-size:11px}.footer-disclosure{grid-template-columns:25px 1fr;gap:10px}.footer-disclosure p{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Mobile refinements: keep the ornamental sphere and the glass guide inside the viewport,
   and reveal the sticky CTA only once the first-screen CTA has scrolled away. */
@media(max-width:760px){.mobile-action{transform:translateY(110%);transition:transform .28s ease}.mobile-action.is-visible{transform:translateY(0)}}
@media(max-width:480px){
.hero-art{transform:none!important;height:390px;min-height:390px;margin:12px 0 6px;max-width:100%;}
.art-halo{width:360px;height:360px;left:50%;margin-left:-180px;top:0;}
.orbit{width:385px;height:385px;left:50%;margin-left:-192px;top:0;}
.orbit-two{width:430px;height:430px;left:50%;margin-left:-215px;top:-20px;}
.sculpture{width:310px;height:310px;top:25px;left:50%;margin-left:-155px;}
.sculpture-ring{width:260px;height:260px;border-width:27px;top:24px;left:24px;}
.floating-label-one{right:0;top:10px;transform:scale(.86) rotate(4deg);transform-origin:right top;}
.glass-guide{width:min(316px,95%);right:4%;bottom:0;padding:17px 19px;transform:rotate(-1.5deg);border-radius:14px;}
.glass-guide h2{font-size:20px;margin:9px 0 8px;}
.glass-guide a{padding:10px 0;font-size:11px;}
.glass-guide a span svg{width:15px;height:15px;}
.hero-bottom{margin-top:0;}
}
@media(max-width:760px){.hero-art{width:100%;align-self:stretch}}


/* ================================================================
   CINEMATIC 2027 RECONCILIATION (v65)
   The package stylesheet above owns the look. This layer maps OUR
   template classes (193 pages) onto its tokens: cream canvas, ink
   bands, lime action. Contrast rules: lime NEVER carries light
   text (ink #0d1819 on lime = 13:1); on ink bands body text is
   #b9c4bd minimum.
   ================================================================ */
:root{
  --f-display:Manrope,"DM Sans",sans-serif;
  --f-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-data:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --day:#f5f5f0; --day-warm:#fffefa; --dawn:#eef2e9;
  --midnight:#0d1819; --midnight-deep:#0b1317; --dusk:#0d1819; --dusk-2:#121f1d;
  --l-hi:#0d1819; --l-mid:#49544f; --l-low:#697475;
  --line-light:#dde3dd; --line-light-2:#c9d2c9;
  --electric:#3b6250; --electric-deep:#2e4d3f;
  --ice:#eef2e9; --aqua-mist:#e8f3e2; --coral-mist:#f7ebe7; --sun-mist:#f5f1e3; --lilac-mist:#edeef5;
  --surface-grey:#eceee8; --mint:#c7f58b; --mint-deep:#3b6250;
  --sh-1:0 8px 30px rgba(13,24,25,.07); --sh-2:0 14px 40px rgba(13,24,25,.10); --sh-3:0 20px 60px rgba(13,24,25,.14);
}
body{background:var(--day);color:var(--l-mid);font-family:var(--f-body)}
.tone-day{background:var(--day)}
.tone-dawn{background:var(--dawn)}
.tone-day-warm{background:var(--day-warm)}
.tone-midnight,.tone-deep{background-color:var(--midnight)}
.tone-dusk{background-color:var(--dusk-2)}
.tone-day,.tone-dawn,.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{
  --ink-hi:#0d1819; --ink-mid:#49544f; --ink-low:#697475; --ink-faint:#85908b;
  --rule:#dde3dd; --rule-2:#c9d2c9; --accent:#3b6250; --accent-2:#71bb85;
  --surface:#fffefa; --surface-solid:#fffefa;
  --t-hi:#0d1819; --t-mid:#49544f; --t-low:#697475; --t-faint:#85908b;
  --line-dark:#dde3dd; --line-dark-2:#c9d2c9; --glass:#fffefa; --glass-2:#eef2e9;
  color:var(--ink-mid);
}
.tone-midnight,.tone-deep,.tone-dusk{
  --ink-hi:#f5f5f0; --ink-mid:#b9c4bd; --ink-low:#85908b; --ink-faint:#6d7872;
  --rule:rgba(245,245,240,.14); --rule-2:rgba(245,245,240,.24);
  --accent:#c7f58b; --accent-2:#d8ffb0;
  --surface:rgba(245,245,240,.05); --surface-solid:#121f1d;
  --t-hi:#f5f5f0; --t-mid:#b9c4bd; --t-low:#85908b; --t-faint:#6d7872;
  color:var(--ink-mid);
}
.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{background-color:#f5f5f0}
body h1,body h2,body h3,body h4{color:var(--ink-hi);font-family:var(--f-display);font-weight:700;letter-spacing:-.045em}
/* buttons: lime action, ink text — never light-on-lime */
.btn-primary,.cta-pill .btn,.drawer .btn-primary{background:#c7f58b;color:#0d1819;box-shadow:0 10px 26px -10px rgba(199,245,139,.55)}
.btn-primary:hover{background:#d8ffb0;color:#0d1819;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--rule-2);color:var(--ink-hi);background:transparent}
.tone-day .btn-ghost,.tone-day-warm .btn-ghost,.tone-dawn .btn-ghost{background:#fffefa}
.btn-ghost:hover{border-color:#3b6250;color:#3b6250}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #71bb85;outline-offset:3px}
/* header: paper, ink nav, lowercase wordmark handled in markup */
.hdr,.hdr.stuck{background:#fffefa;border-bottom:1px solid #dde3dd}
.hdr{--t-hi:#0d1819;--t-mid:#49544f;--t-low:#697475;--line-dark:#dde3dd}
.nav>a:hover,.nav-t:hover,.nav-t[aria-expanded=true]{color:#0d1819;background:#eef2e9}
.logo,.logo-w{color:#0d1819;font-weight:800;letter-spacing:-.02em}
.logo-w span:last-child{color:#3b6250}
.mega{background:#fffefa;border:1px solid #dde3dd;box-shadow:var(--sh-3)}
.mega{--t-hi:#0d1819;--t-mid:#49544f;--t-faint:#85908b;--line-dark:#dde3dd}
.mega a:hover{background:#eef2e9;color:#0d1819}
.mega a:hover b{color:#3b6250}
/* cards + capture + answer */
.card,.fn-card,.li-card{background:#fffefa;border:1px solid #dde3dd;border-radius:22px;box-shadow:var(--sh-1)}
.tiles .tile{border-radius:22px;border:1px solid #dde3dd}
.tiles .tile:nth-child(1){background:#e8f3e2}.tiles .tile:nth-child(2){background:#f5f1e3}
.tiles .tile:nth-child(3){background:#edeef5}.tiles .tile:nth-child(4){background:#e7f0ec}
.tiles .tile:nth-child(5){background:#f7ebe7}.tiles .tile:nth-child(6){background:#fffefa}
.answer{background:#e8f3e2;border-left:3px solid #c7f58b;color:#0d1819}
.prose a{color:#3b6250;text-decoration:underline;text-decoration-color:rgba(59,98,80,.35)}
.prose a:hover{text-decoration-color:#3b6250}
.sources{background:#eceee8;border-color:#dde3dd}
.sources a{color:#3b6250}
.eeat{background:#fffefa;border-color:#dde3dd}
.tone-day table.cmp thead th,.tone-day-warm table.cmp thead th,.tone-dawn table.cmp thead th{background:#eceee8;color:#0d1819}
.tone-day table.cmp thead th:first-child,.tone-day-warm table.cmp thead th:first-child{background:#eceee8}
table.cmp thead th a,.tone-day table.cmp thead th a{color:#3b6250}
.fn-opt{background:#fffefa;border:1px solid #c9d2c9;color:#0d1819;border-radius:14px}
.fn-opt:hover{border-color:#3b6250}
.fn-opt[aria-pressed=true]{background:#e8f3e2;border-color:#3b6250}
.fn-rail span{background:#c9d2c9}.fn-rail span.done{background:#71bb85}.fn-rail span.on{background:#0d1819}
.f-field input,.f-field select,.f-field textarea{background:#fffefa;border:1px solid #c9d2c9;color:#0d1819}
.f-field input:focus{border-color:#3b6250;outline:3px solid rgba(113,187,133,.35)}
.fn-cap-done{background:#e8f3e2;border:1px solid rgba(113,187,133,.4)}
.cta-pill{background:#fffefa;border-color:#dde3dd;color:#0d1819}
.drawer{background:#fffefa;color:#49544f}
.foot,.ftr{background:var(--midnight)}
.foot .logo,.foot .logo-w,.ftr .logo,.ftr .logo-w{color:#f5f5f0}
.foot .logo-w span:last-child,.ftr .logo-w span:last-child{color:#c7f58b}
.sticky-cta{background:rgba(255,254,250,.96);border-top:1px solid #dde3dd}
/* their package assumes .container width; our pages keep .wrap — align metrics */
.wrap{max-width:1200px}

/* v65 guards: their global svg{22px} must not resize our attribute-sized SVGs */
svg[width]{width:auto;height:auto}
svg[viewBox].clarity-landscape{width:100%;height:auto}
.ins-chart svg,.chart svg,[data-chart] svg{width:100%;height:auto}
.thread svg[viewBox]{width:100%;height:auto}
/* brand wordmark on light chrome: ink word, deep-green stop (lime stays on dark) */
.hdr .brand-word,.drawer .brand-word{color:#0d1819}
.hdr .brand-stop,.drawer .brand-stop{color:#3b6250}
.foot .brand-word,.ftr .brand-word{color:#f5f5f0}
.foot .brand-stop,.ftr .brand-stop{color:#c7f58b}
.hdr .brand-mark{transform:rotate(-20deg) scale(.8)}
.hdr .logo.brand{color:#0d1819}
/* v65 hero + wordmark inking */
.hero{--ink-hi:#f5f5f0;--ink-mid:#b9c4bd;--ink-low:#85908b}
body .hero h1{color:#fff}
.hdr .brand-word>span,.drawer .brand-word>span{color:#49544f;font-weight:400}
.foot .brand-word>span,.ftr .brand-word>span{color:#b9c4bd;font-weight:400}
/* v65: light surfaces inside the dark hero keep ink text */
.hero .glass-guide{--ink-hi:#0d1819;--ink-mid:#49544f}
body .hero .glass-guide h2{color:#0d1819}
.hero .btn-ghost{background:#fffefa;color:#0d1819;border-color:#fffefa}
.hero .btn-ghost:hover{color:#3b6250;border-color:#d8ffb0}

/* v65: inline SVGs must escape the package's global svg{22px; stroke:currentColor; fill:none} */
.chart-wrap svg{width:100%;height:auto;fill:#0d1819;stroke:none;stroke-width:1}
.thread svg{width:100%;height:auto;fill:#0d1819;stroke:none;stroke-width:1}
.thread svg .hit{fill:transparent;stroke:none}
.chart-wrap{background:#fffefa;border:1px solid #dde3dd}

/* v65: funnel chrome on cinematic canvas */
.fn-bar{background:#fffefa;border-bottom:1px solid #dde3dd;color:#49544f}
.fn-bar *{color:#49544f}
/* v65: mobile header must fit brand + CTA + burger in 390px */
.burger svg{width:24px;height:24px}
@media (max-width:560px){
  .hdr .brand-word{font-size:17px}
  .hdr .brand-mark{transform:rotate(-20deg) scale(.62)}
  .hdr .hdr-cta{padding:.6rem .95rem;font-size:.78rem;box-shadow:none}
  .hdr-in{gap:.5rem}
}
/* v65: mint is a text/accent token — deep green on light, lime on dark */
.tone-day,.tone-dawn,.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{--mint:#3b6250;--mint-deep:#2e4d3f}
.tone-midnight,.tone-deep,.tone-dusk,.hero{--mint:#c7f58b;--mint-deep:#d8ffb0}
::selection{background:#c7f58b;color:#0d1819}
/* v65: footer ghost CTA readable on ink */
.foot .btn-ghost,.ftr .btn-ghost{border-color:rgba(245,245,240,.4);color:#f5f5f0;background:transparent}
.foot .btn-ghost:hover,.ftr .btn-ghost:hover{border-color:#c7f58b;color:#c7f58b}
/* v65.1: package-exact homepage chrome — transparent header over the dark hero */
.home .hdr{position:absolute;left:0;right:0;top:34px;background:transparent;border-bottom:0;box-shadow:none}
.home .hdr.stuck{background:transparent;border-bottom:0;box-shadow:none}
.home .hdr .nav>a,.home .hdr .nav-t{color:#e7efe8}
.home .hdr .nav>a:hover,.home .hdr .nav-t:hover,.home .hdr .nav-t[aria-expanded=true]{color:#fff;background:rgba(245,245,240,.08)}
.home .hdr .brand-word{color:#f4fbf5}
.home .hdr .brand-word>span{color:#e1eae1}
.home .hdr .brand-stop{color:#c7f58b}
.home .hdr .burger{color:#f4fbf5}
.home{background:#f5f5f0}
/* v65.1: package dark bands keep light ink under our global heading rule */
.journey-section{--ink-hi:#f5f5f0;--ink-mid:#b9c4bd;--ink-low:#85908b}
body .journey-section h2,body .journey-section h3{color:#f5f5f0}
.journey-section .accent-lime{color:#c7f58b}
body .editorial-visual p{color:#b9c4bd}
/* v69: mega-menu header restored on the homepage, styled to the package look (transparent over hero) */

/* v66.1: hero geometry exactly as the package (kill legacy padding) */
.hero{padding:0}
/* v66.1: strip legacy type metrics inside package sections — theirs rely on browser defaults */
.journey-step h3,.tool-bottom h3,.graphic-head{line-height:normal}
.free-list a strong,.urgent-grid a strong,.region-tags a{line-height:normal}
.hero p,.section p,.final-cta p,.site-footer p,.assurance-strip span{letter-spacing:normal}
.section h3,.final-cta h3{letter-spacing:-.04em}
/* v66.1: the package relies on browser-default line-height except where it sets one */
body.home{line-height:normal}
/* v66.1: tone-scoped legacy eyebrow beats the package rule on specificity — restore theirs */
.home .eyebrow{display:flex;font-size:10px;letter-spacing:.20em;font-weight:800;line-height:1.4;margin-bottom:25px;gap:13px}
@media(max-width:760px){.home .hero-eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:20px}}

/* v66.1 final metric pins */
.home .urgent-head h2{line-height:1.11}
.home .glass-guide h2{line-height:normal}
.home .hero-eyebrow{margin-bottom:27px}
/* v66.1 mobile exactness: legacy hero/eyebrow rules must not reach the package homepage */
.home .hero{display:block}
.home .hero-art{display:block}
.home .eyebrow::before{content:none}
@media(max-width:760px){.home .hero-eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:20px}}
/* ================================================================
   ESCALATION TIMELINE (v68) — "Tap where you are" dark showpiece.
   Package language: ink band, lime action, Manrope, 22px radius.
   Lime never carries light text; on ink, body text >= #b9c4bd.
   ================================================================ */
.escalation-section{background:#f5f5f0;color:#49544f;position:relative;overflow:hidden}
.escalation-section::before{content:"";position:absolute;right:-180px;top:-220px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(199,245,139,.35),transparent 62%);pointer-events:none}
.escalation-section{--ink-hi:#0d1819;--ink-mid:#49544f;--ink-low:#697475;--mint:#3b6250}
body .escalation-section h2{color:#0d1819;font-size:clamp(38px,4.1vw,64px);line-height:1.11;letter-spacing:-.06em;margin-bottom:0}
.escalation-section .accent-lime{color:#3b6250}
.esc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:64px}
.esc-lede{width:330px;max-width:38%;color:#69736e;font-size:14px;line-height:1.65;margin:0 0 6px}
.esc-track-shell{position:relative;margin:0 0 46px}
.esc-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;align-items:start}
.esc-line{position:absolute;left:8.33%;right:8.33%;top:9px;height:2px;background:#dde3dd;border-radius:2px}
.esc-line-fill{--p:40%;position:absolute;left:0;top:0;height:100%;width:var(--p);background:linear-gradient(90deg,#71bb85,#3b6250);border-radius:2px;box-shadow:0 0 14px rgba(113,187,133,.45);transition:width .45s cubic-bezier(.2,.65,.2,1)}
.esc-stop{position:relative;background:none;border:0;padding:0 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:#697475;font-family:inherit}
.esc-node{width:20px;height:20px;border-radius:50%;border:2px solid #c9d2c9;background:#fffefa;position:relative;z-index:2;transition:all .25s}
.esc-stop:hover .esc-node{border-color:#3b6250}
.esc-stop.is-done .esc-node{border-color:#71bb85;background:#71bb85}
.esc-stop.is-here .esc-node{border-color:#3b6250;background:#3b6250;box-shadow:0 0 0 7px rgba(59,98,80,.14),0 0 24px rgba(113,187,133,.45)}
.esc-stop.is-here .esc-node::after{content:"";position:absolute;inset:-11px;border-radius:50%;border:1px solid rgba(59,98,80,.4);animation:escPulse 2.2s cubic-bezier(.2,.65,.2,1) infinite}
@keyframes escPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.esc-stop-label{font-family:Manrope,'DM Sans',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.02em;color:#49544f;transition:color .2s;line-height:normal}
.esc-stop-time{font-size:9px;letter-spacing:.16em;font-weight:800;color:#85908b;line-height:normal}
.esc-stop:hover .esc-stop-label{color:#0d1819}
.esc-stop.is-here .esc-stop-label{color:#0d1819}
.esc-stop.is-here .esc-stop-time{color:#3b6250}
.esc-stop:focus-visible{outline:3px solid #71bb85;outline-offset:4px;border-radius:12px}
.esc-card{display:flex;gap:0;background:#fffefa;border:1px solid #dde3dd;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(13,24,25,.07)}
.esc-card-main{flex:1;padding:44px 48px}
.esc-card-kicker{color:#3b6250;display:block;margin-bottom:14px}
.esc-card h3{font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(22px,2vw,30px);letter-spacing:-.04em;line-height:1.18;color:#0d1819;margin:0 0 14px;font-weight:700}
.esc-card p{color:#49544f;font-size:15.5px;line-height:1.7;max-width:560px;margin:0 0 26px}
.esc-card .btn-lime{background:#c7f58b;color:#0d1819;display:inline-flex;align-items:center;gap:12px;font-weight:800;border-radius:999px;padding:14px 24px;font-size:14px;text-decoration:none;transition:transform .2s,background .2s}
.esc-card .btn-lime:hover{background:#d8ffb0;transform:translateY(-2px);color:#0d1819}
.esc-card .btn-lime svg{width:16px;height:16px}
.esc-card-aside{width:300px;flex:none;border-left:1px solid #e9ede7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;background:radial-gradient(circle at 50% 42%,rgba(199,245,139,.3),transparent 64%)}
.esc-stage-no{font-family:Manrope,'DM Sans',sans-serif;font-weight:800;font-size:92px;letter-spacing:-.06em;color:#3b6250;line-height:1;text-shadow:0 0 44px rgba(199,245,139,.55)}
.esc-stage-cap{font-size:9px;letter-spacing:.18em;font-weight:800;color:#697475;text-align:center;line-height:1.8}
.esc-pulse-ring{position:absolute;width:210px;height:210px;border-radius:50%;border:1px solid rgba(59,98,80,.18);animation:escPulse 3.4s linear infinite}
.esc-foot{display:flex;align-items:center;gap:10px;margin:28px 0 0;color:#69736e;font-size:13px}
.esc-foot svg{width:16px;height:16px;color:#3b6250;flex:none}
.esc-foot a{color:#3b6250;text-decoration:underline;text-decoration-color:rgba(59,98,80,.35)}
@media(max-width:1020px){.esc-card-aside{width:220px}.esc-stage-no{font-size:68px}}
@media(max-width:760px){
  .esc-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:40px}
  .esc-lede{width:100%;max-width:none}
  .esc-track{grid-template-columns:1fr;gap:0}
  .esc-line{left:15px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .esc-line-fill{width:2px;height:var(--p);background:linear-gradient(180deg,#71bb85,#3b6250);transition:height .45s cubic-bezier(.2,.65,.2,1)}
  .esc-stop{flex-direction:row;align-items:center;gap:16px;padding:12px 0;text-align:left}
  .esc-stop .esc-node{width:16px;height:16px;flex:none;margin-left:8px}
  .esc-stop-label{font-size:16px}
  .esc-card{flex-direction:column}
  .esc-card-main{padding:30px 26px}
  .esc-card-aside{width:100%;border-left:0;border-top:1px solid rgba(245,245,240,.1);padding:26px 0}
  .esc-stage-no{font-size:56px}
  .esc-pulse-ring{width:140px;height:140px}
}
/* ================================================================
   CINEMATIC INNER PAGES (v68) — every page opens like the homepage.
   CSS-only: no markup or SEO-field changes on 190+ pages.
   ================================================================ */
.phero{position:relative;overflow:hidden;background:linear-gradient(118deg,#0b1416 0%,#0d181b 55%,#101c20 100%)!important;padding-top:64px;padding-bottom:72px}
.phero::before{content:"";position:absolute;right:-220px;top:-260px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(199,245,139,.11),transparent 62%);pointer-events:none}
.phero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,245,240,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,245,240,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 30% 20%,#000 30%,transparent 75%);pointer-events:none}
.phero>.wrap{position:relative;z-index:2}
.phero{--ink-hi:#f5f5f0;--ink-mid:#b9c4bd;--ink-low:#85908b;--rule:rgba(245,245,240,.14);--accent:#c7f58b;--accent-2:#d8ffb0;--mint:#c7f58b;color:#b9c4bd}
body .phero h1,body .phero .h1{color:#f5f5f0;letter-spacing:-.055em}
.phero .lead{color:#b9c4bd}
.phero .crumbs,.phero .crumbs a,.phero .crumbs span{color:#85908b}
.phero .crumbs a:hover{color:#c7f58b}
.phero .crumbs .sep{color:#3e4a46}
.phero .pill{background:rgba(199,245,139,.12);color:#c7f58b;border:1px solid rgba(199,245,139,.25)}
.phero .meta,.phero .meta span{color:#85908b}
.phero .btn-primary{background:#c7f58b;color:#0d1819}
.phero .btn-ghost{border-color:rgba(245,245,240,.3);color:#f5f5f0;background:transparent}
.phero .btn-ghost:hover{border-color:#c7f58b;color:#c7f58b}
/* closing band: the nextstep aside becomes a dark cinematic card */
.nextstep{position:relative;overflow:hidden;background:linear-gradient(118deg,#0b1416,#101c20)!important;border:1px solid rgba(245,245,240,.1)!important;border-radius:22px;color:#b9c4bd}
.nextstep::before{content:"";position:absolute;right:-140px;bottom:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(199,245,139,.14),transparent 62%);pointer-events:none}
.nextstep>*{position:relative;z-index:2}
.nextstep h3{color:#f5f5f0;font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.04em}
.nextstep p{color:#b9c4bd}
.nextstep .btn-primary{background:#c7f58b;color:#0d1819;box-shadow:0 10px 26px -10px rgba(199,245,139,.5)}
.nextstep .btn-primary:hover{background:#d8ffb0;color:#0d1819}
.nextstep .data{color:#85908b}
.nextstep-alt,.nextstep-alt a{color:#85908b}
.nextstep-alt a{color:#c7f58b;text-decoration-color:rgba(199,245,139,.4)}
.nextstep.is-soft{background:#fffefa!important;border:1px solid #dde3dd!important;color:#49544f}
.nextstep.is-soft::before{content:none}
.nextstep.is-soft h3{color:#0d1819}
.nextstep.is-soft p,.nextstep.is-soft a{color:#49544f}
.phero{padding-top:92px!important;padding-bottom:84px!important}
.phero .crumbs{margin-bottom:34px}
/* ================================================================
   INNER-PAGE ELITE PASS (v70) — every shared component speaks the
   package language: paper cards, ink type, green/lime accents.
   ================================================================ */
/* notices: green for free-advice, warm sand for the rest */
.notice{background:#f5f1e3;border:1px solid #e9dfc4;border-radius:18px}
.notice b,.notice strong{color:#0d1819;font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.02em}
.notice p{color:#49544f}
.notice a{color:#3b6250;text-decoration:underline;text-decoration-color:rgba(59,98,80,.35)}
.notice.notice-free{background:#e8f3e2;border-color:#cfe5c6}
.notice.notice-free b{color:#17352c}
/* FAQ accordions: paper rows, ink summaries, green open state */
.faq details{background:#fffefa;border:1px solid #dde3dd;border-radius:16px;overflow:hidden}
.faq details+details{margin-top:10px}
.faq summary{font-family:Manrope,'DM Sans',sans-serif;font-weight:700;color:#0d1819;letter-spacing:-.02em;padding:18px 22px;cursor:pointer;transition:background .2s}
.faq summary:hover{background:#eef2e9}
.faq details[open]{border-color:#9ecb8f}
.faq details[open] summary{background:#eef2e9}
.faq .faq-a{padding:4px 22px 18px;color:#49544f}
.faq .faq-a a{color:#3b6250}
/* link grids (nearby areas, related guides, compare-any-two): text-link rows */
.linkgrid a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid #dde3dd;font-weight:700;font-family:Manrope,'DM Sans',sans-serif;font-size:14.5px;letter-spacing:-.02em;color:#0d1819;text-decoration:none;transition:color .2s}
.linkgrid a::after{content:"\2197";color:#3b6250;font-weight:800;transition:transform .2s}
.linkgrid a:hover{color:#3b6250}
.linkgrid a:hover::after{transform:translate(2px,-2px)}
/* card grids: numbered, lifting, arrowed — homepage solution-card energy */
.grid>.card{position:relative;background:#fffefa;border:1px solid #dde3dd;border-radius:22px;transition:transform .25s cubic-bezier(.2,.65,.2,1),box-shadow .25s,border-color .25s}
.grid>.card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(13,24,25,.1);border-color:#c9d2c9}
.grid{counter-reset:mdccard}
.grid>.card{counter-increment:mdccard}
.grid>.card::before{content:counter(mdccard,decimal-leading-zero);position:absolute;top:18px;right:20px;font-family:Manrope,'DM Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:.08em;color:#85908b}
.grid>.card:hover::before{color:#3b6250}
.grid>.card .arw{color:#3b6250}
.grid>.card h3{letter-spacing:-.03em}
/* comparison tables: one paper card */
table.cmp{background:#fffefa;border:1px solid #dde3dd;border-radius:18px;overflow:hidden;border-collapse:separate;border-spacing:0}
table.cmp td,table.cmp th{border-color:#e4e8e2}
table.cmp tbody tr:hover td{background:#f7f9f4}
/* pills on light surfaces */
.tone-day .pill,.tone-day-warm .pill,.tone-dawn .pill{background:#e8f3e2;color:#17352c;border:1px solid #cfe5c6}
/* sources block: quiet paper */
.sources{border-radius:18px}
.sources .sources-h{color:#697475;letter-spacing:.14em}
/* v70: specificity boost — tone-scoped legacy linkgrid rules must lose */
.tone-day .linkgrid a,.tone-day-warm .linkgrid a,.tone-dawn .linkgrid a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 4px;
  background:transparent;border:0;border-bottom:1px solid #dde3dd;border-radius:0;box-shadow:none;
  font-weight:700;font-family:Manrope,'DM Sans',sans-serif;font-size:14.5px;letter-spacing:-.02em;
  color:#0d1819;text-decoration:none}
.tone-day .linkgrid a::before,.tone-day-warm .linkgrid a::before{content:none}
.tone-day .linkgrid a::after,.tone-day-warm .linkgrid a::after,.tone-dawn .linkgrid a::after{
  content:"\2197";color:#3b6250;font-weight:800;opacity:1;transform:none;transition:transform .2s}
.tone-day .linkgrid a:hover,.tone-day-warm .linkgrid a:hover,.tone-dawn .linkgrid a:hover{
  color:#3b6250;transform:none;box-shadow:none;border-color:#c9d2c9}
.tone-day .linkgrid a:hover::after,.tone-day-warm .linkgrid a:hover::after{transform:translate(2px,-2px)}
/* v70: faq specificity boost */
.tone-day .faq details,.tone-day-warm .faq details,.tone-dawn .faq details{background:#fffefa;border:1px solid #dde3dd;border-radius:16px}
.tone-day .faq details[open],.tone-day-warm .faq details[open]{border-color:#9ecb8f}
.tone-day .faq summary,.tone-day-warm .faq summary{color:#0d1819;background:transparent}
.tone-day .faq summary:hover,.tone-day-warm .faq summary:hover,.tone-day .faq details[open] summary,.tone-day-warm .faq details[open] summary{background:#eef2e9}
.tone-day .faq .faq-a,.tone-day-warm .faq .faq-a{color:#49544f}
/* ================================================================
   FUNNEL WOW FLOW (v71) — cinematic opener, huge tap-targets,
   animated steps. funnel.js logic untouched.
   ================================================================ */
/* the opener is a dark cinematic moment; questions stay calm cream */
.fn-stage-0{background:linear-gradient(118deg,#0b1416 0%,#0d181b 55%,#101c20 100%)!important}
.fn-stage-0 .fn-bar{background:transparent;border-bottom:1px solid rgba(245,245,240,.1)}
.fn-stage-0 .fn-bar *{color:#85908b}
.fn-stage-0 .fn-rail span{background:rgba(245,245,240,.16)}
.fn-stage-0 .fn-rail span.on{background:#c7f58b}
.fn-stage-0 .fn-eyebrow{color:#c7f58b}
.fn-stage-0 .fn-q{color:#f5f5f0}
.fn-stage-0 .fn-hint{color:#b9c4bd}
.fn-stage-0 .fn-introducer{color:#85908b}
.fn-stage-0 .fn-assure li{color:#b9c4bd}
.fn-stage-0 .fn-assure li::before{background:#c7f58b;box-shadow:0 0 10px rgba(199,245,139,.6)}
.fn-stage-0 .fn-urgent-door{background:rgba(245,245,240,.05);border:1px solid rgba(245,245,240,.14);backdrop-filter:blur(6px)}
.fn-stage-0 .fn-ud-tag{color:#f0b978}
.fn-stage-0 .fn-ud-body{color:#b9c4bd}
.fn-stage-0 .fn-ud-go{color:#c7f58b}
/* step entry: every step rises in */
@keyframes fnStepIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.fn-step.on{animation:fnStepIn .5s cubic-bezier(.2,.65,.2,1) both}
@media(prefers-reduced-motion:reduce){.fn-step.on{animation:none}}
/* the question: homepage-scale type */
.fn-q{font-family:Manrope,'DM Sans',sans-serif;font-weight:700;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.05em;line-height:1.1}
.fn-hint{font-size:16px;line-height:1.65}
/* answers: big, numbered, lifting tap-cards with a tick on select */
.fn-opt{position:relative;background:#fffefa;border:1.5px solid #dde3dd;border-radius:16px;padding:18px 54px 18px 20px;font-weight:700;font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.02em;font-size:15.5px;color:#0d1819;transition:transform .22s cubic-bezier(.2,.65,.2,1),border-color .22s,box-shadow .22s,background .22s}
.fn-opt:hover{transform:translateY(-3px);border-color:#71bb85;box-shadow:0 14px 34px rgba(13,24,25,.09)}
.fn-opt::after{content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;border-radius:50%;border:1.5px solid #c9d2c9;transform:translateY(-50%);transition:all .2s;background:transparent}
.fn-opt[aria-pressed=true]{background:#e8f3e2;border-color:#3b6250;transform:none}
.fn-opt[aria-pressed=true]::after{background:#3b6250;border-color:#3b6250;content:"\2713";color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fn-opt.fn-opt-sm{font-size:14px;padding:14px 48px 14px 16px}
/* progress rail: glowing lime fill */
.fn-rail span{height:4px;border-radius:4px;transition:background .3s}
.fn-rail span.done{background:#71bb85}
.fn-rail span.on{background:#c7f58b;box-shadow:0 0 12px rgba(199,245,139,.6)}
/* primary action: lime pill, confident */
.fn-nav .btn-primary{background:#c7f58b;color:#0d1819;border-radius:999px;padding:16px 30px;font-size:15.5px;font-weight:800;box-shadow:0 14px 34px -10px rgba(199,245,139,.55);transition:transform .2s,background .2s}
.fn-nav .btn-primary:hover{background:#d8ffb0;transform:translateY(-2px);color:#0d1819}
.fn-back{color:#697475;font-weight:700}
.fn-back:hover{color:#3b6250}
/* capture + summary cards */
.fn-card{background:#fffefa;border:1px solid #dde3dd;border-radius:22px;box-shadow:0 20px 60px rgba(13,24,25,.08);overflow:hidden}
.fn-card-hd{background:#e8f3e2}
.f-field input,.f-field select{padding:15px 16px;border-radius:14px;font-size:16px}
.f-field input:focus{border-color:#3b6250;outline:3px solid rgba(113,187,133,.3)}
/* urgent door: slide-the-arrow affordance */
.fn-urgent-door{border-radius:18px;transition:transform .22s,border-color .22s}
.fn-urgent-door:hover{transform:translateY(-2px);border-color:#e0a46a}
.fn-urgent-door:hover .fn-ud-go{letter-spacing:.02em}
/* v71: the intro headline needs no box — let the type carry it */
.fn-intro .fn-q{border:0!important;background:none!important;padding:0!important;box-shadow:none!important}
/* v71: programmatic a11y focus on the question shouldn't draw a box for mouse users */
.fn-q:focus{outline:none}
.fn-q:focus-visible{outline:3px solid #71bb85;outline-offset:8px;border-radius:8px}
.fn-intro .fn-q:focus,.fn-intro .fn-q:focus-visible{outline:none}
/* ================================================================
   FUNNEL FORM CARD (v72) — the whole flow lives in ONE obvious
   white form box floating on the cinematic dark backdrop.
   ================================================================ */
.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{
  background:linear-gradient(118deg,#0b1416 0%,#0d181b 55%,#101c20 100%)!important}
.fn-bar{background:transparent!important;border-bottom:1px solid rgba(245,245,240,.1)!important}
.fn-bar *{color:#85908b!important}
.fn-rail span{background:rgba(245,245,240,.16)!important}
.fn-rail span.done{background:#71bb85!important}
.fn-rail span.on{background:#c7f58b!important;box-shadow:0 0 12px rgba(199,245,139,.6)}
/* THE form box */
.fn-body .wrap-mid{background:#fffefa;border:1px solid rgba(245,245,240,.16);border-radius:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 0 10px rgba(245,245,240,.04);
  padding:clamp(26px,4vw,52px) clamp(20px,4vw,56px);max-width:860px;margin-top:28px;margin-bottom:56px}
/* everything inside the box reads as a light form again (undo dark intro inks) */
.fn-stage-0 .fn-eyebrow{color:#3b6250}
.fn-stage-0 .fn-q,.fn-q{color:#0d1819}
.fn-stage-0 .fn-hint,.fn-hint{color:#49544f}
.fn-stage-0 .fn-introducer,.fn-introducer{color:#697475}
.fn-stage-0 .fn-assure li,.fn-assure li{color:#49544f}
.fn-stage-0 .fn-assure li::before,.fn-assure li::before{background:#3b6250;box-shadow:none}
.fn-assure li{background:#eef2e9;border-radius:999px;padding:8px 14px;font-weight:600}
.fn-stage-0 .fn-urgent-door{background:#f5f1e3;border:1px solid #e9dfc4;backdrop-filter:none}
.fn-stage-0 .fn-ud-tag{color:#9a6a1f}
.fn-stage-0 .fn-ud-body{color:#49544f}
.fn-stage-0 .fn-ud-go{color:#3b6250}
.fn-back{color:#697475}
/* form label above the box so nobody mistakes it */
.fn-body .wrap-mid{position:relative}
.fn-trail{color:#85908b}
/* speed feel: no tap delay, no accidental text select, instant active states */
.fn-opt,.fn-nav .btn,.fn-back{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.fn-opt:active{transform:scale(.985);transition-duration:.08s}
.fn-nav .btn-primary:active{transform:scale(.97)}
/* MOBILE: full-width box, single-column answers, thumb-size targets */
@media(max-width:640px){
  .fn-body .wrap-mid{margin:14px 10px 40px;padding:22px 16px 26px;border-radius:20px;width:auto}
  .fn-opts.two{grid-template-columns:1fr!important;display:grid;gap:10px}
  .fn-opt{min-height:56px;font-size:16px;padding:16px 50px 16px 16px}
  .fn-opt.fn-opt-sm{min-height:48px;font-size:15px}
  .fn-q{font-size:clamp(24px,7vw,32px)}
  .fn-hint{font-size:15px}
  .fn-nav{position:sticky;bottom:10px;z-index:5}
  .fn-nav .btn-primary{width:100%;justify-content:center;padding:17px 20px;font-size:16px;box-shadow:0 14px 34px -8px rgba(199,245,139,.65)}
  .f-field input,.f-field select{font-size:16px;min-height:52px}
  .fn-step.on{animation-duration:.32s}
}

/* =====================================================================
   v85 MOBILE ELITE PASS — measured, not guessed.
   Audit (317 pages × 360/390px) found 38 pages forced to ~640px wide:
   data tables have a ~640px min-content width, and the doc grid track
   (1fr = minmax(auto,1fr)) grew to fit them instead of letting them
   scroll. Fix at the root: grid children may shrink; wide tables scroll
   inside their own box; long words/URLs wrap.
   ===================================================================== */
.layout-doc > *, .layout-doc .prose { min-width: 0; }
.prose { overflow-wrap: break-word; }
.prose img, .prose svg, .prose video, .prose iframe,
figure, figure.infographic, figure.infographic img { max-width: 100%; height: auto; }
.prose pre { max-width: 100%; overflow-x: auto; }

@media (max-width: 760px) {
  /* Tables become their own horizontal scroller — page width never moves */
  .prose table, table.cmp {
    display: block; max-width: 100%; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .prose table th, .prose table td { min-width: 112px; }
  .prose table th:first-child, .prose table td:first-child { min-width: 96px; }

  /* 44px touch targets (Apple HIG) for nav, footer and brand */
  .logo, .logo.brand { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col a, .site-footer .footer-col li a, .footer-base a, .footer-feature-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
  }
  .linkgrid a { min-height: 44px; }
  .toc a { min-height: 40px; display: flex; align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

  /* Inputs at 16px+ so iOS never zooms the page on focus */
  input, select, textarea { font-size: 16px; }
}
/* v85.1 — table.cmp carries min-width:640px on the element itself (design
   layer, line ~336). As a scroll box it must be allowed to be narrow; the
   inner table keeps its natural width and scrolls inside. */
@media (max-width: 760px) {
  table.cmp, .prose table.cmp { min-width: 0 !important; }
  .crumbs a { min-height: 40px; }
  .nextstep-alt a, .nextstep a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
}
/* v85.2 — footer legal row must wrap on the narrowest phones */
@media (max-width: 760px) {
  .footer-base { flex-wrap: wrap; row-gap: 6px; }
  .footer-base > span { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 0; min-width: 0; max-width: 100%; }
}

/* v88 — tighten the homepage hand-off from the escalation ladder ("free
   advice at every stage") into "Start with what's happening": 250px of dead
   space on desktop, 156px on mobile, cut to roughly half. */
.escalation-section{padding-bottom:60px}
.escalation-section + #debt-types{padding-top:64px}
@media(max-width:760px){.escalation-section{padding-bottom:40px}.escalation-section + #debt-types{padding-top:44px}}

/* v88 — letter pages: the "we can fill this in for you" card above each template */
.lb-cta{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;background:#0d1819;color:#f5f5f0;border-radius:20px;padding:1.2rem 1.4rem;margin:0 0 1.2rem}
.lb-cta b{display:block;color:#fff;font-size:1.08rem;margin-bottom:.2rem}
.lb-cta p{margin:0;color:#c9d6cf;font-size:.93rem;line-height:1.5}
.lb-cta p a{color:#c7f58b}
.lb-cta .btn{flex:0 0 auto;min-height:48px;white-space:nowrap}
@media(max-width:760px){.lb-cta{flex-direction:column;align-items:stretch}.lb-cta .btn{width:100%;justify-content:center}}
.lq-table td:first-child{font-weight:600}

/* v89 — toolkit unlock card (shared by every self-help tool) */
.tg-card{position:relative;background:#0d1819;color:#f5f5f0;border-radius:22px;padding:1.4rem 1.4rem 1.2rem;margin:0 0 1.2rem;box-shadow:0 24px 60px -34px rgba(13,24,25,.6);transition:transform .25s}
.tg-card.tg-nudge{transform:scale(1.015);box-shadow:0 0 0 3px #c7f58b,0 24px 60px -34px rgba(13,24,25,.6)}
.tg-card h3{color:#fff;font-size:1.35rem;margin:.35rem 0 .4rem}
.tg-card>p{color:#c9d6cf;font-size:.95rem;margin:0 0 1rem}
.tg-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c7f58b}
.tg-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media(max-width:760px){.tg-fields{grid-template-columns:minmax(0,1fr);gap:0}}
.tg-f{display:block;margin:0 0 .8rem}
.tg-f span{display:block;font-size:.88rem;font-weight:600;margin-bottom:.35rem;color:#e8efe9}
.tg-f input{width:100%;box-sizing:border-box;padding:.75rem .9rem;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#fff;color:#0d1819;font:inherit;font-size:16px}
.tg-f small{display:block;color:#ffb4a6;margin-top:.3rem}
.tg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tg-chk{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .7rem;min-height:44px;color:#c9d6cf;font-size:.9rem;cursor:pointer}
.tg-chk input{width:22px;height:22px;margin-top:.1rem;flex:0 0 auto}
.tg-card .btn{width:100%;justify-content:center;margin:.3rem 0 .8rem}
.tg-notice{font-size:.8rem;line-height:1.45;color:#9fb3a8!important;margin:0!important}.tg-notice a{color:#c7f58b}
.tg-done{background:#f4fbe9;border:1px solid #c7f58b;border-radius:14px;padding:.75rem 1rem;font-size:.93rem;margin:0 0 1.2rem}
.tg-link{background:none;border:0;padding:0 0 0 .3rem;font:inherit;text-decoration:underline;cursor:pointer;color:inherit;min-height:24px}
[data-tool] [hidden]{display:none!important}
/* tool UI */
.tk{display:grid;gap:1.4rem}
.tk-f{display:block;margin:0 0 .85rem}
.tk-f>span{display:block;font-size:.9rem;font-weight:600;margin-bottom:.35rem}
.tk-f input,.tk-f select,.tk-f textarea{width:100%;box-sizing:border-box;padding:.72rem .9rem;border-radius:12px;border:1px solid var(--border,#dde3dd);background:#fff;font:inherit;font-size:16px}
.tk-f small{display:block;color:var(--muted,#697475);margin-top:.3rem;font-size:.85rem}
.tk-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
@media(max-width:600px){.tk-grid2{grid-template-columns:minmax(0,1fr);gap:0}}
.tk-card{background:#fff;border:1px solid var(--border,#dde3dd);border-radius:20px;padding:1.3rem 1.4rem}
.tk-result{border-radius:20px;padding:1.3rem 1.4rem;background:#f4fbe9;border:1px solid #c7f58b}
.tk-result.warn{background:#fff7e6;border-color:#f6c954}
.tk-result.bad{background:#fdeeea;border-color:#e8a598}
.tk-result h3{margin:0 0 .4rem;font-size:1.2rem}
.tk-big{font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(2rem,6vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:.3rem 0 .5rem}
.tk-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr) auto;gap:.5rem;align-items:end;margin-bottom:.6rem}
@media(max-width:700px){.tk-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#f7f8f5;border-radius:14px;padding:.7rem}.tk-row .tk-f{margin:0}}
.tk-row .tk-del{min-height:44px;min-width:44px;border:1px solid var(--border,#dde3dd);background:#fff;border-radius:12px;cursor:pointer;font-size:1.1rem}
.tk-table{width:100%;border-collapse:collapse;font-size:.95rem}
.tk-table th,.tk-table td{padding:.55rem .4rem;border-bottom:1px solid #e6ebe4;text-align:left}
.tk-table td.n,.tk-table th.n{text-align:right;font-variant-numeric:tabular-nums}
.tk-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0 0}
.tk-bar .btn{min-height:44px}
.tk-steps{counter-reset:s;list-style:none;padding:0;margin:.6rem 0 0}
.tk-steps li{counter-increment:s;position:relative;padding:0 0 .7rem 2.2rem}
.tk-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;border-radius:50%;background:#0d1819;color:#c7f58b;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.tk-pill{display:inline-block;font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:100px;background:#eef1ec}
.tk-pill.p{background:#fde3dc;color:#7a2a17}
.tk-sub{font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#697475);margin:1.1rem 0 .6rem}
.tk-bar .btn.is-locked::before,.lb-bar .btn.is-locked::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.45em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 1 0-8 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 1 0-8 0z'/%3E%3C/svg%3E") center/contain no-repeat}

/* v90 — homepage "What are you worried about?" search */
.wsearch{background:#0d1819;color:#f5f5f0;padding:64px 0 56px}
.wsearch .eyebrow{color:#c7f58b}
.wsearch h2{font-size:clamp(34px,4.2vw,58px);line-height:1.05;letter-spacing:-.05em;margin:0 0 22px;color:#fff}
.ws-box{display:flex;gap:10px;background:#fff;border-radius:18px;padding:8px;max-width:860px;box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.ws-box input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:clamp(17px,2vw,21px);padding:12px 14px;color:#0d1819;background:transparent}
.ws-box .btn{flex:0 0 auto;min-height:52px;border-radius:12px}
.ws-pop{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:#9fb3a8}
.ws-pop span{margin-right:4px}
.ws-pop a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:100px;border:1px solid rgba(199,245,139,.35);color:#e8efe9;font-size:13px}
.ws-pop a:hover{background:rgba(199,245,139,.12)}
.ws-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
@media(max-width:900px){.ws-groups{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:600px){.ws-groups{grid-template-columns:minmax(0,1fr)}.ws-box{flex-direction:column}.ws-box .btn{width:100%;justify-content:center}.wsearch{padding:44px 0 40px}}
.ws-g{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px}
.ws-g h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c7f58b;margin:0 0 10px;font-family:inherit}
.ws-now h3{color:#ffb4a6}
.ws-g a{display:block;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);min-height:44px}
.ws-g a:first-of-type{border-top:0}
.ws-g a b{display:block;color:#fff;font-size:15px;line-height:1.3}
.ws-g a span{display:block;color:#9fb3a8;font-size:12.5px;line-height:1.45;margin-top:3px}
.ws-none{margin-top:20px;background:rgba(255,255,255,.05);border-radius:16px;padding:16px;color:#c9d6cf}
.ws-none a{color:#c7f58b;text-decoration:underline}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* v90 — self-help article furniture */
.applies{display:inline-block;margin:0 0 .9rem;padding:.35rem .8rem;border-radius:100px;background:#0d1819;color:#f5f5f0;font-size:.82rem}
.applies b{color:#c7f58b}
.do-now{background:#f4fbe9;border:1px solid #c7f58b;border-radius:18px;padding:1rem 1.2rem .4rem;margin:1.2rem 0 1.6rem}
.do-now h2{font-size:1.15rem;margin:0 0 .5rem}
.do-now ol{margin:0 0 .6rem;padding-left:1.2rem}.do-now li{margin:0 0 .45rem}
.dtl{list-style:none;padding:0;margin:1.2rem 0 1.8rem;position:relative}
.dtl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:linear-gradient(#c7f58b,#0d1819)}
.dtl li{position:relative;padding-left:46px;margin:0 0 .7rem}
.dtl li::before{content:counter(list-item);position:absolute;left:0;top:10px;width:32px;height:32px;border-radius:50%;background:#0d1819;color:#c7f58b;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.dtl a{display:block;background:#fff;border:1px solid var(--border,#dde3dd);border-radius:16px;padding:.8rem 1rem;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.dtl a:hover{border-color:#0d1819;transform:translateX(3px)}
.dtl b{display:block;font-size:1.02rem}.dtl span{display:block;font-size:.92rem;color:var(--muted,#697475);margin-top:.15rem}
.dtl em{display:inline-block;margin-top:.4rem;font-style:normal;font-size:.78rem;font-weight:700;background:#f4fbe9;border:1px solid #c7f58b;border-radius:100px;padding:.15rem .6rem}
/* v90 Bill Prioritiser + Contact Log */
.bp-row{display:grid;grid-template-columns:1.4fr 1fr 1.4fr auto;gap:.7rem;align-items:end;padding:.8rem 0;border-bottom:1px solid var(--border,#dde3dd)}
.bp-row .tk-f{margin:0}
.bp-del{width:40px;height:40px;border-radius:50%;border:1px solid var(--border,#dde3dd);background:#fff;font-size:1.3rem;line-height:1;cursor:pointer;color:#555}
.bp-del:hover{background:#fdeeea;border-color:#e8a598}
.bp-list{list-style:none;padding:0;margin:.5rem 0 1.4rem;display:grid;gap:.7rem}
.bp-item{display:flex;gap:.9rem;background:#fff;border:1px solid var(--border,#dde3dd);border-radius:16px;padding:1rem 1.1rem}
.bp-item.is-urgent{border-color:#e8a598;background:#fdf6f4}
.bp-item p{margin:.35rem 0 .45rem;font-size:.95rem}
.bp-n{flex:0 0 34px;height:34px;border-radius:50%;background:#0e3b2e;color:#fff;display:grid;place-items:center;font-weight:700}
.bp-meta{display:block;font-size:.85rem;color:#5a6b62}
.bp-note{background:#f4fbe9;border:1px solid #c7f58b;border-radius:14px;padding:.9rem 1rem}
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.cl-table td{vertical-align:top;font-size:.92rem}
.cl-table small{color:#5a6b62}
.cl-empty{color:#5a6b62;font-style:italic}
@media (max-width:760px){.bp-row{grid-template-columns:1fr;position:relative;padding-top:1rem}.bp-row .tk-f:first-child{padding-right:52px}.bp-del{position:absolute;top:2.2rem;right:0}.cl-grid{grid-template-columns:1fr}}
@media print{.hdr,.site-footer,.no-print,[data-sh-gate],.tk-bar,.phero .lead,.eeat,.layout-doc,.cl-entry,.bp-del,.bp-add{display:none!important}.bp-item,.cl-table{break-inside:avoid}}
@media (max-width:640px){.cl-table thead{display:none}.cl-table,.cl-table tbody,.cl-table tr,.cl-table td{display:block;width:100%}.cl-table tr{position:relative;padding:.8rem 2.8rem .8rem 0;border-bottom:1px solid var(--border,#dde3dd)}.cl-table td{border:0!important;padding:.1rem 0!important}.cl-table td.no-print{position:absolute;top:.8rem;right:0;width:auto}}
/* v91 wave 2 tools */
.sim{list-style:none;padding:0;margin:1rem 0;position:relative}
.sim:before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:#cfe6c0}
.sim-step{display:flex;gap:1rem;position:relative;padding:0 0 1.3rem}
.sim-dot{flex:0 0 36px;height:36px;border-radius:50%;background:#0e3b2e;color:#fff;display:grid;place-items:center;font-weight:700;z-index:1;font-size:.9rem}
.sim-step h3{margin:.15rem 0 .35rem;font-size:1.1rem}
.sim-step p{margin:0 0 .4rem;font-size:.96rem}
.sim-when{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4a7a2a}
.sim-do{background:#f4fbe9;border-radius:12px;padding:.6rem .8rem}
.dl-step.is-soon .sim-dot{background:#c9861a}.dl-step.is-past .sim-dot{background:#b5412e}
.po-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1rem 0}
.po-row{display:grid;grid-template-columns:1.3fr 1fr .8fr 1fr auto;gap:.6rem;align-items:end;padding:.6rem 0;border-bottom:1px solid var(--border,#dde3dd)}
.po-row .tk-f{margin:0}
@media (max-width:760px){.po-row{grid-template-columns:1fr 1fr;position:relative;padding-top:1rem}.po-row .tk-f:first-child{grid-column:1/-1;padding-right:52px}.po-row .bp-del{position:absolute;top:2.2rem;right:0}}
.dir-find{margin:1rem 0}.dir-find input{font-size:1.05rem}
.dir-table td{vertical-align:top;font-size:.94rem}
.firm-facts th{text-align:left;width:38%;font-weight:600;background:#f6f8f5}
.cancant{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}
.cancant>div{border-radius:16px;padding:.9rem 1.1rem;background:#f4fbe9;border:1px solid #c7f58b}
.cancant>div+div{background:#fdf6f4;border-color:#e8a598}
.cancant h3{margin:0 0 .4rem;font-size:1.05rem}
.srcs{font-size:.88rem;word-break:break-word}
@media (max-width:640px){.cancant{grid-template-columns:1fr}.dir-table thead{display:none}.dir-table,.dir-table tbody,.dir-table tr,.dir-table td{display:block;width:100%}.dir-table tr{padding:.7rem 0;border-bottom:1px solid var(--border,#dde3dd)}.dir-table td{border:0!important;padding:.05rem 0!important}}
.dir-table tr[hidden]{display:none!important}
.fd-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.6rem}
.fd-chk{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--border,#dde3dd);border-radius:14px;padding:.85rem 1rem;cursor:pointer}
.fd-chk input{width:22px;height:22px;margin-top:.15rem;flex:0 0 22px;accent-color:#0e3b2e}
.fd-chk b{display:block}.fd-chk small{display:block;color:#4b5a52;font-size:.92rem;margin-top:.2rem}
.fd-links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.4rem;font-size:.92rem}
.fd-prog{height:8px;border-radius:8px;background:#e6efe1;overflow:hidden;margin:.3rem 0 0}.fd-prog span{display:block;height:100%;background:#7bc043;transition:width .3s}
.fd-found{padding-left:1.1rem}
.mf-card{background:#fff;border:1px solid var(--border,#dde3dd);border-radius:18px;padding:1rem 1.1rem}
.mf-card p{margin:.2rem 0 .5rem;font-size:.94rem}
.script{border-left:4px solid #7bc043;background:#f6faf2;border-radius:0 14px 14px 0;padding:.8rem 1rem;margin:.8rem 0}.script h3{margin:0 0 .3rem;font-size:1.02rem}.script p{margin:0;font-size:1rem}.routes td{font-size:.9rem;vertical-align:top}
.dro-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem}.dro-t{display:flex;gap:.8rem;align-items:flex-start;border-radius:14px;padding:.7rem .9rem;border:1px solid var(--border,#dde3dd);background:#fff}.dro-t>b{flex:0 0 70px;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}.dro-t span b{display:block}.dro-t.is-in{background:#f4fbe9;border-color:#c7f58b}.dro-t.is-out{background:#fff7e6;border-color:#f6c954}.dro-t.is-unk{color:#5a6b62}
.ws-best{margin:0 0 1rem;border-radius:18px;background:#c7f58b;padding:.8rem 1rem}.ws-best>span{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0e3b2e}.ws-best a{display:block;color:#0e1f18;text-decoration:none;margin-top:.3rem}.ws-best a b{display:block;font-size:1.1rem}.ws-best a span{font-size:.92rem;color:#24382d}
.firm-facts th,.firm-facts td{box-shadow:none!important;position:static!important;background-image:none!important}.firm-facts th{background:#f6f8f5!important}
.rv-card{margin-top:1.2rem;border-color:#c7f58b}.rv-ask{margin:.4rem 0 .8rem}.rv-again{margin-top:.6rem}.rv-done{color:#2f6b1e;font-weight:600}
.bc-export{margin-top:1.2rem}
.sx-note{font-size:.92rem;color:#4b5a52}.sx-card{border:1px solid var(--border,#dde3dd);border-radius:18px;padding:1rem 1.1rem;margin:.8rem 0;background:#fff}
.sx-card.is-in{border-color:#c7f58b;background:#f8fdf1}.sx-card.is-out{background:#fffaf0;border-color:#f6d68a}
.sx-head{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;align-items:baseline}.sx-head h3{margin:0;font-size:1.12rem}
.sx-tag{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#4a7a2a}.is-out .sx-tag{color:#9a6a12}.is-unk .sx-tag{color:#5a6b62}
.sx-tests{list-style:none;padding:0;margin:.5rem 0;display:grid;gap:.25rem;font-size:.93rem}.sx-tests li:before{display:inline-block;width:1.4em;font-weight:700}
.sx-tests li.ok:before{content:"\2713";color:#2f6b1e}.sx-tests li.no:before{content:"\2715";color:#b5412e}.sx-tests li.unk:before{content:"\2013";color:#5a6b62}
.sx-trade{font-size:.92rem;margin:.3rem 0 0}
.savebar{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1.2rem}
.savebar button{border:1px solid var(--border,#dde3dd);background:#fff;border-radius:999px;padding:.45rem .9rem;font:inherit;font-size:.88rem;cursor:pointer;min-height:40px}
.savebar button:hover{border-color:#7bc043}.savebar [aria-pressed="true"]{background:#f4fbe9;border-color:#c7f58b}
@media print{.savebar,.sticky-cta,.cta-pill,.nextstep{display:none!important}}
.ck{border:1px solid var(--border,#dde3dd);border-radius:18px;padding:1rem 1.2rem;margin:1.2rem 0;background:#fff}
.ck h2{margin-top:0}.ck ul{list-style:none;padding:0}.ck li{padding:.35rem 0 .35rem 2rem;position:relative;border-bottom:1px dashed #e3e8e4}
.ck li:before{content:"";position:absolute;left:0;top:.45rem;width:1.1rem;height:1.1rem;border:2px solid #0e3b2e;border-radius:4px}
@media print{body.print-one .ck:not(.print-this),body.print-one .prose>*:not(.ck){display:none!important}.ck{border:0;break-inside:avoid}.ck .btn{display:none}}
.gl-act{margin:.3rem 0 0;font-size:.92rem;font-weight:600}
.rv-who{font-size:.9rem;color:#3d4d44;margin:0 0 .6rem}

/* ============================================================
   v96 — TALK TO A DEBT EXPERT (xchat.js)
   Dark launcher, white chat card, lime answers. Sits above the
   mobile sticky bar; replaces the desktop pill where it shows.
   ============================================================ */
.xc{--xc-ink:#0d1819;--xc-ink2:#123128;--xc-lime:#c7f58b;--xc-lime2:#a9e56a;--xc-paper:#fff;--xc-cream:#f4f6f1;--xc-line:#e3e8e2;--xc-mut:#5d6b66;
  font-family:var(--f-body,"Inter",system-ui,sans-serif);color:var(--xc-ink);position:relative;z-index:900}
body.xc-on .cta-pill{display:none!important}
.xc-launch{position:fixed;right:20px;bottom:20px;z-index:901;display:flex;align-items:center;gap:.7rem;border:0;cursor:pointer;
  padding:.55rem 1.15rem .55rem .55rem;border-radius:999px;background:var(--xc-ink);color:#fff;text-align:left;
  box-shadow:0 18px 40px -12px rgba(13,24,25,.55),0 0 0 1px rgba(255,255,255,.06) inset;
  transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s,box-shadow .2s}
.xc.xc-up .xc-launch{transform:none;opacity:1}
.xc-launch:hover{box-shadow:0 22px 48px -12px rgba(13,24,25,.65),0 0 0 2px var(--xc-lime) inset}
.xc-launch:focus-visible{outline:3px solid var(--xc-lime);outline-offset:3px}
.xc-li{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--xc-lime);color:var(--xc-ink);flex:0 0 42px;position:relative}
.xc-li::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--xc-lime);opacity:0;animation:xcring 2.6s 4s 3}
@keyframes xcring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.xc-lt{font-weight:700;font-size:15px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.xc-lt small{display:block;font-weight:500;font-size:12px;color:#a9bab4;margin-top:2px;letter-spacing:.01em}
.xc.xc-open .xc-launch{transform:translateY(140%);opacity:0;pointer-events:none}

.xc-nudge{position:fixed;right:20px;bottom:96px;z-index:901;width:330px;max-width:calc(100vw - 32px);background:var(--xc-paper);border-radius:20px;
  padding:18px 18px 16px;box-shadow:0 24px 60px -18px rgba(13,24,25,.45),0 0 0 1px var(--xc-line);animation:xcpop .45s cubic-bezier(.2,.9,.25,1.2)}
.xc-nudge::after{content:"";position:absolute;right:34px;bottom:-8px;width:16px;height:16px;background:var(--xc-paper);transform:rotate(45deg);box-shadow:3px 3px 0 0 var(--xc-line)}
.xc-nl{font-family:var(--f-display,"Manrope",sans-serif);font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.02em;padding-right:22px}
.xc-nl b{background:linear-gradient(transparent 62%,var(--xc-lime) 62%);font-weight:800}
.xc-ns{font-size:14px;color:var(--xc-mut);margin:6px 0 12px;line-height:1.45}
.xc-ngo{border:0;cursor:pointer;background:var(--xc-ink);color:var(--xc-lime);font-weight:700;font-size:14.5px;border-radius:999px;padding:11px 16px;width:100%}
.xc-ngo:hover{background:var(--xc-ink2)}
.xc-nx{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;background:none;border-radius:50%;font-size:20px;color:var(--xc-mut);cursor:pointer}
.xc-nx:hover{background:var(--xc-cream)}
@keyframes xcpop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.xc-panel{position:fixed;right:20px;bottom:20px;z-index:902;width:400px;height:min(640px,calc(100vh - 40px));display:flex;flex-direction:column;
  background:var(--xc-paper);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -24px rgba(13,24,25,.55),0 0 0 1px rgba(13,24,25,.06);animation:xcpop .4s cubic-bezier(.2,.9,.25,1.1)}
.xc-panel[hidden]{display:none}
.xc-head{display:flex;align-items:center;gap:12px;padding:16px 14px 14px 18px;background:radial-gradient(120% 140% at 100% 0%,#1f4a3a 0%,var(--xc-ink) 60%);color:#fff}
.xc-mark{width:38px;height:38px;border-radius:12px;background:var(--xc-lime);color:var(--xc-ink);display:grid;place-items:center;font-weight:800;font-family:var(--f-display,"Manrope",sans-serif);font-size:17px;letter-spacing:-.04em}
.xc-ht{flex:1;min-width:0}.xc-ht b{display:block;font-size:16px;letter-spacing:-.01em}.xc-ht span{font-size:12.5px;color:#a9bab4}
.xc-x{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}
.xc-x:hover{background:rgba(255,255,255,.16)}
.xc-steps{height:3px;background:#e9eee7}.xc-steps i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--xc-lime2),#59b36b);transition:width .5s}
.xc-body{flex:1;overflow-y:auto;padding:18px 16px 8px;background:linear-gradient(#fbfcf9,#f6f8f3);display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;overscroll-behavior:contain}
.xc-msg{max-width:86%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.45;animation:xcin .3s ease both;word-wrap:break-word}
.xc-bot{align-self:flex-start;background:#fff;border:1px solid var(--xc-line);border-bottom-left-radius:6px}
.xc-bot b{font-weight:700}
.xc-bot a{color:#1f6b3a;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.xc-me{align-self:flex-end;background:var(--xc-ink);color:#fff;border-bottom-right-radius:6px}
.xc-typing{display:flex;gap:4px;padding:14px 16px}
.xc-typing span{width:7px;height:7px;border-radius:50%;background:#a8b5b0;animation:xcdot 1s infinite}
.xc-typing span:nth-child(2){animation-delay:.15s}.xc-typing span:nth-child(3){animation-delay:.3s}
@keyframes xcdot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes xcin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.xc-dim{color:var(--xc-mut);font-weight:400}
.xc-tick{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--xc-lime);color:var(--xc-ink);font-weight:800;font-size:13px;margin-right:2px}
.xc-sum{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 2px;font-size:14px}
.xc-sum dt{color:var(--xc-mut)}.xc-sum dd{margin:0;font-weight:600}

.xc-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--xc-line);max-height:56%;overflow-y:auto}
.xc-foot:empty{padding:0;border:0}
.xc-chips{display:flex;flex-wrap:wrap;gap:8px}
.xc-chips.xc-cols{display:grid;grid-template-columns:1fr 1fr}
.xc-chip{border:1.5px solid var(--xc-line);background:#fff;border-radius:14px;padding:11px 12px;font:inherit;font-size:14.5px;font-weight:600;color:var(--xc-ink);cursor:pointer;text-align:left;min-height:46px;line-height:1.25;transition:border-color .15s,background .15s,transform .1s}
.xc-chip:hover{border-color:#7bc043;background:#f6fbef}
.xc-chip:active{transform:scale(.98)}
.xc-chip:focus-visible{outline:3px solid var(--xc-lime);outline-offset:1px}
.xc-field{display:flex;gap:8px}
.xc-field input{flex:1;min-width:0;border:1.5px solid var(--xc-line);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px;color:var(--xc-ink);background:#fff}
.xc-field input:focus{outline:none;border-color:#59b36b;box-shadow:0 0 0 4px rgba(199,245,139,.5)}
.xc-send{width:50px;border:0;border-radius:14px;background:var(--xc-ink);color:var(--xc-lime);font-size:20px;cursor:pointer}
.xc-err{color:#a23a3a;font-size:13.5px;margin:8px 2px 0}
.xc-note{color:var(--xc-mut);font-size:12.5px;margin:8px 2px 0;line-height:1.4}
.xc-skip{display:block;margin:8px auto 0;border:0;background:none;color:var(--xc-mut);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px}
.xc-consent{font-size:12.5px;line-height:1.5;color:var(--xc-mut);margin:0 0 10px}
.xc-consent a{color:var(--xc-ink)}
.xc-mk{display:flex;gap:8px;align-items:center;font-size:13.5px;margin:0 0 10px;cursor:pointer}
.xc-mk input{width:18px;height:18px;accent-color:#3b6250}
.xc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.xc-go{width:100%;border:0;border-radius:16px;padding:15px;font:inherit;font-size:16px;font-weight:800;background:var(--xc-lime);color:var(--xc-ink);cursor:pointer;box-shadow:0 10px 24px -10px rgba(89,179,107,.8)}
.xc-go:hover{background:var(--xc-lime2)}.xc-go:disabled{opacity:.7;cursor:wait}
.xc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media(max-width:820px){
  .xc-launch{right:14px;bottom:calc(84px + env(safe-area-inset-bottom));padding:.45rem;gap:0}
  .xc-launch .xc-lt{display:none}
  .xc-li{width:52px;height:52px;flex-basis:52px}
  .xc-nudge{right:12px;left:12px;width:auto;bottom:calc(150px + env(safe-area-inset-bottom))}
  .xc-nudge::after{right:30px}
  .xc-panel{inset:0;width:auto;height:auto;border-radius:0;animation:xcup .35s cubic-bezier(.2,.9,.25,1)}
  .xc-head{padding-top:calc(14px + env(safe-area-inset-top))}
  html.xc-lock,html.xc-lock body{overflow:hidden}
  .xc-msg{font-size:15.5px}
}
@keyframes xcup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.xc-launch,.xc-nudge,.xc-panel,.xc-msg{animation:none!important;transition:none!important}.xc-li::after{display:none}}
@media print{.xc{display:none!important}}

/* ============================================================
   v96 — NEXT STEP CARD, redesigned. Contained (never full-bleed),
   light so it stands apart from the dark footer, generous space
   above the footer, and a second column for the expert chat.
   ============================================================ */
aside.nextstep.ns2{all:unset;display:block;box-sizing:border-box;width:min(1200px,calc(100% - 32px));margin:clamp(48px,7vw,88px) auto clamp(56px,8vw,104px)!important;
  padding:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible;color:#0d1819;font-family:var(--f-body,"Inter",system-ui,sans-serif)}
aside.nextstep.ns2::before{content:none!important}
.ns2-in{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:clamp(20px,3vw,40px);align-items:stretch;
  padding:clamp(26px,4vw,52px);border-radius:28px;overflow:hidden;
  background:radial-gradient(720px 380px at 0% 0%,rgba(199,245,139,.55),transparent 62%),linear-gradient(135deg,#f6fbef 0%,#eef6e4 55%,#f4f7f0 100%);
  border:1px solid #dbe8cd;box-shadow:0 30px 70px -40px rgba(31,74,58,.45)}
.ns2-in::after{content:"";position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(89,179,107,.16),transparent 65%);pointer-events:none}
.ns2-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ns2-eye{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2f6b3a;
  background:rgba(255,255,255,.7);border:1px solid #d3e4c2;border-radius:999px;padding:6px 12px;margin-bottom:16px}
.ns2-eye::before{content:"";width:7px;height:7px;border-radius:50%;background:#59b36b}
aside.nextstep.ns2 h3{font-family:var(--f-display,"Manrope",sans-serif)!important;font-size:clamp(26px,3.2vw,40px)!important;line-height:1.08!important;letter-spacing:-.035em!important;color:#0d1819!important;margin:0 0 12px!important;font-weight:800!important}
aside.nextstep.ns2 .ns2-copy>p{color:#3d4b45!important;font-size:clamp(16px,1.25vw,18px);line-height:1.6;max-width:56ch;margin:0 0 22px}
.ns2-row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
aside.nextstep.ns2 .btn-primary{background:#0d1819!important;color:#c7f58b!important;box-shadow:0 14px 30px -14px rgba(13,24,25,.7)!important;border-radius:14px}
aside.nextstep.ns2 .btn-primary:hover{background:#1c3a2f!important}
aside.nextstep.ns2 .btn-ghost{background:#fff!important;color:#0d1819!important;border:1px solid #cfdcc4!important;border-radius:14px}
aside.nextstep.ns2 .btn-ghost:hover{border-color:#59b36b!important}
aside.nextstep.ns2 .ns2-alt{margin:24px 0 0!important;padding:16px 0 0!important;border-top:1px solid #d6e3c9!important;font-size:14px!important;line-height:1.55!important;color:#5a6862!important;max-width:62ch}
aside.nextstep.ns2 .ns2-alt a{display:inline!important;min-height:0!important}
aside.nextstep.ns2 .ns2-alt a{color:#1f5a30!important;text-decoration:underline;text-decoration-color:rgba(31,90,48,.35);text-underline-offset:3px}
.ns2-side{position:relative;z-index:1;display:flex}
.ns2-card{flex:1;display:flex;flex-direction:column;background:#0d1819;color:#dfe7e2;border-radius:22px;padding:26px 24px 24px;
  box-shadow:0 26px 50px -26px rgba(13,24,25,.8);background-image:radial-gradient(420px 260px at 100% 0%,rgba(199,245,139,.18),transparent 60%)}
.ns2-ic{width:44px;height:44px;border-radius:14px;background:#c7f58b;color:#0d1819;display:grid;place-items:center;margin-bottom:16px}
.ns2-card h4{font-family:var(--f-display,"Manrope",sans-serif);font-size:22px;letter-spacing:-.025em;color:#fff;margin:0 0 8px;font-weight:800}
.ns2-card p{font-size:15px;line-height:1.55;color:#b7c4be;margin:0 0 14px}
.ns2-card ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.ns2-card li{position:relative;padding-left:26px;font-size:14.5px;color:#e6ede9}
.ns2-card li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#c7f58b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%230d1819' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
aside.nextstep.ns2 .ns2-chat{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:8px;background:#c7f58b!important;color:#0d1819!important;border-radius:14px;font-weight:800;padding:14px 18px;min-height:50px;box-shadow:0 12px 28px -12px rgba(199,245,139,.6)}
aside.nextstep.ns2 .ns2-chat:hover{background:#d8ffb0!important}
@media(max-width:860px){
  .ns2-in{grid-template-columns:1fr;border-radius:22px}
  aside.nextstep.ns2 .btn-primary,aside.nextstep.ns2 .btn-ghost{flex:1 1 100%;justify-content:center}
}
@media print{aside.nextstep.ns2{display:none!important}}

/* v97 prompt schedule */
.xc-nnever{display:block;margin:8px auto 0;border:0;background:none;color:var(--xc-mut);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:4px}
.xc-badge{position:absolute;top:2px;left:36px;min-width:20px;height:20px;border-radius:10px;background:#e5484d;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px #0d1819;z-index:2;animation:xcpop .4s}
.xc-badge[hidden]{display:none}
.xc-launch{overflow:visible}
@media(max-width:820px){.xc-badge{left:40px;top:0}}

/* ============================================================
   v98 — CENTRE POP-UP: "Talk to a debt expert" call back.
   Split card: dark promise on the left, 20-second form on the right.
   ============================================================ */
.xm{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px;font-family:var(--f-body,"Inter",system-ui,sans-serif);color:#0d1819}
.xm[hidden]{display:none}
.xm-dim{position:absolute;inset:0;background:rgba(8,18,15,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.xm-card{position:relative;width:min(880px,100%);max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:1fr 1.05fr;border-radius:28px;background:#fff;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transform:translateY(24px) scale(.97);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.25,1.05),opacity .3s}
.xm.xm-in .xm-dim{opacity:1}.xm.xm-in .xm-card{transform:none;opacity:1}
html.xm-lock,html.xm-lock body{overflow:hidden}
.xm-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#f1f4ef;color:#0d1819;font-size:22px;cursor:pointer}
.xm-x:hover{background:#e4ebe0}
.xm-l{position:relative;padding:40px 36px 32px;color:#dbe5e0;background:radial-gradient(520px 340px at 0% 0%,rgba(199,245,139,.28),transparent 60%),radial-gradient(420px 300px at 100% 100%,rgba(34,201,160,.18),transparent 60%),#0d1819;display:flex;flex-direction:column}
.xm-eye{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c7f58b;border:1px solid rgba(199,245,139,.35);border-radius:999px;padding:6px 12px}
.xm-eye i{width:7px;height:7px;border-radius:50%;background:#c7f58b}
.xm-l h2{font-family:var(--f-display,"Manrope",sans-serif);font-size:clamp(28px,3.4vw,38px);line-height:1.06;letter-spacing:-.035em;color:#fff;margin:18px 0 12px;font-weight:800}
.xm-l h2 em,.xm-l h2 b{font-style:normal;color:#c7f58b;font-weight:800}
.xm-sub{font-size:16px;line-height:1.55;color:#c3d0ca;margin:0 0 20px}
.xm-sub a{color:#c7f58b}
.xm-ticks{list-style:none;padding:0;margin:0 0 auto;display:grid;gap:10px}
.xm-ticks li{position:relative;padding-left:28px;font-size:15px;color:#eef3f0}
.xm-ticks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:#c7f58b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%230d1819' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.xm-free{font-size:12.5px;color:#8fa39b;margin:22px 0 0}.xm-free a{color:#c7f58b}
.xm-r{padding:36px 32px 26px}
.xm-q{font-size:13px;font-weight:700;color:#3d4b45;margin:0 0 8px}
.xm-ts,.xm-bt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.xm-t,.xm-b{border:1.5px solid #e1e7df;background:#fff;border-radius:999px;padding:8px 12px;font:inherit;font-size:13.5px;font-weight:600;color:#0d1819;cursor:pointer;min-height:38px}
.xm-t:hover,.xm-b:hover{border-color:#7bc043}
.xm-t.on,.xm-b.on{background:#0d1819;border-color:#0d1819;color:#c7f58b}
.xm-f{display:block;margin:0 0 12px}
.xm-f span{display:block;font-size:13px;font-weight:700;color:#3d4b45;margin-bottom:6px}
.xm-f input{width:100%;box-sizing:border-box;border:1.5px solid #dfe6dc;border-radius:14px;padding:13px 14px;font:inherit;font-size:16px;color:#0d1819;background:#fbfcfa}
.xm-f input:focus{outline:none;border-color:#59b36b;background:#fff;box-shadow:0 0 0 4px rgba(199,245,139,.5)}
.xm-err{color:#a23a3a;font-size:13.5px;margin:-4px 0 10px}
.xm-go{width:100%;border:0;border-radius:16px;padding:16px;font:inherit;font-size:17px;font-weight:800;background:#c7f58b;color:#0d1819;cursor:pointer;box-shadow:0 14px 30px -12px rgba(89,179,107,.85);transition:transform .1s,background .2s}
.xm-go:hover{background:#b6ec72}.xm-go:active{transform:scale(.99)}.xm-go:disabled{opacity:.7;cursor:wait}
.xm-consent{font-size:11.5px;line-height:1.5;color:#6a7772;margin:12px 0 0}.xm-consent a{color:#0d1819}
.xm-alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #eef1ec}
.xm-alt button{border:0;background:none;font:inherit;font-size:13px;color:#2f6b3a;font-weight:600;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.xm-alt button[data-xm-never]{color:#7b8783;font-weight:500}
.xm-done{text-align:left;padding-top:20px}
.xm-tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#c7f58b;color:#0d1819;font-size:28px;font-weight:800;margin-bottom:16px;animation:xcpop .5s}
.xm-done h3{font-family:var(--f-display,"Manrope",sans-serif);font-size:30px;letter-spacing:-.03em;margin:0 0 10px}
.xm-done p{font-size:16px;line-height:1.55;color:#3d4b45;margin:0 0 14px}
.xm-wait{font-size:14.5px!important;background:#f4f8ef;border-radius:14px;padding:12px 14px}.xm-wait a{color:#1f5a30;font-weight:700}
@media(max-width:760px){
  .xm{padding:0;align-items:end}
  .xm-card{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:94vh;transform:translateY(60px)}
  .xm-l{padding:28px 22px 18px}
  .xm-l h2{font-size:27px;margin:14px 0 8px;padding-right:36px}
  .xm-sub{font-size:15px;margin-bottom:12px}
  .xm-ticks{display:none}
  .xm-free{display:none}
  .xm-r{padding:20px 20px calc(18px + env(safe-area-inset-bottom))}
  .xm-x{background:rgba(255,255,255,.12);color:#fff}
}
@media(prefers-reduced-motion:reduce){.xm-card,.xm-dim{transition:none}}
@media print{.xm{display:none!important}}
/* v98 pop-up: compact phone layout so the button is on screen */
@media(max-width:760px){
  .xm-l{padding:20px 18px 14px}
  .xm-eye{font-size:10px;padding:5px 10px;letter-spacing:.1em}
  .xm-l h2{font-size:24px;margin:12px 0 6px}
  .xm-sub{font-size:14px;line-height:1.45;margin:0}
  .xm-r{padding:16px 18px calc(14px + env(safe-area-inset-bottom))}
  .xm-q{margin-bottom:6px}
  .xm-ts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px 12px;padding:0 18px 2px}
  .xm-ts::-webkit-scrollbar{display:none}
  .xm-t{white-space:nowrap;flex:0 0 auto}
  .xm-f{margin-bottom:10px}.xm-f span{margin-bottom:4px}
  .xm-f input{padding:11px 12px}
  .xm-bt{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
  .xm-b{padding:8px 4px;font-size:13px;white-space:nowrap}
  .xm-go{padding:14px;font-size:16px}
  .xm-consent{font-size:11px;margin-top:10px}
  .xm-alt{margin-top:10px;padding-top:8px}
  .xm-x{top:10px;right:10px;width:36px;height:36px}
}
.xm-card>*{min-width:0}.xm-ts{max-width:100%}
@media(max-width:760px){.xm-card{width:100%}.xm-ts{max-width:none}}