/* ==========================================================================
   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{
  /* Tone ladder — the spine of the brand */
  --midnight:#080B12;
  --midnight-deep:#04060B;
  --dusk:#0E1421;
  --dusk-2:#141C2C;
  --dawn:#E8EAF0;
  --day:#F7F8FA;
  --day-warm:#FCFCFD;

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Tone tokens -------------------------------------------------------
   Components reference --ink-*, --rule and --accent. Each tone sets them, so
   a light section nested inside a dark page resolves to light-on-dark values
   automatically. Never write `.tone-x .component{color:...}` again. */
.tone-midnight,.tone-deep,.tone-dusk,.tone-dawn{
  --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{
  --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;
  animation:drift 34s var(--ease) infinite alternate;
}
.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;
}
.hdr.stuck{background:rgba(8,11,18,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom-color:var(--line-dark)}
.hdr.on-light.stuck{background:rgba(247,248,250,.86);border-bottom-color:var(--line-light)}
.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}
.hdr.on-light .logo{color:var(--l-hi)}
.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;
}
.hdr.on-light .nav>a,.hdr.on-light .nav-t{color:var(--l-mid)}
.nav>a:hover,.nav-t:hover,.nav-t[aria-expanded=true]{color:var(--mint)}
.hdr.on-light .nav>a:hover,.hdr.on-light .nav-t:hover{color:var(--mint-deep)}
.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)}
.hdr.on-light .burger{color:var(--l-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;align-items:center;padding-top:var(--header-h);position:relative;overflow:hidden;isolation:isolate}
.hero-in{max-width:900px;position:relative;z-index:2}
.hero h1{margin-bottom:var(--sp4)}
.hero .lead{max-width:56ch;margin-bottom:var(--sp5)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp3);margin-bottom:var(--sp5)}
.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 .fn-opt{background:#fff;border-color:var(--line-light-2);color:var(--l-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(--t-low);cursor:pointer;font-size:var(--s1);padding:.5rem 0;display:flex;align-items:center;gap:.4rem}
.fn-back:hover{color:var(--mint)}
.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:#fff;border-color:var(--line-light-2);color:var(--l-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)}
.consent ul{font-size:var(--s0);color:var(--t-low);margin-bottom:var(--sp3)}
.fn-stage-8 .consent ul{color:var(--l-low)}
.cbox{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:var(--sp3);cursor:pointer;font-size:var(--s1)}
.cbox:last-child{margin-bottom:0}
.cbox input{margin-top:.28rem;width:18px;height:18px;accent-color:var(--mint-deep);flex-shrink:0;cursor:pointer}

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