/* ─── TOKENS ─────────────────────────────────── */
:root, [data-theme="light"] {
  --bg:          #f5f4f0;
  --surface:     #ffffff;
  --surface-2:   #fafaf8;
  --border:      #e2e0db;
  --divider:     #eceae5;
  --text:        #1a1916;
  --text-muted:  #6b6a66;
  --text-faint:  #706f6c;
  --text-inv:    #f9f8f5;
  --primary:       #1a6b47;
  --primary-hover: #145538;
  --primary-light: #e8f5ef;
  --primary-glow:  rgba(26,107,71,0.15);
  --gold:         #8d6514;
  --gold-light:   #fdf3df;
  --danger:        #c0392b;
  --danger-light:  #fdecea;
  --success:       #1a6b47;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --transition: 180ms cubic-bezier(0.16,1,0.3,1);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth:   cubic-bezier(0.65,0,0.35,1);
  --t-fast:   140ms var(--ease-out-expo);
  --t-base:   220ms var(--ease-out-expo);
  --t-spring: 380ms var(--ease-spring);
  --t-slow:   480ms var(--ease-out-expo);
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;
  --bottom-nav-h: 0px;
}
[data-theme="dark"] {
  --bg:          #111210;
  --surface:     #171815;
  --surface-2:   #1d1f1b;
  --border:      #2e3029;
  --divider:     #242621;
  --text:        #d8d7d2;
  --text-muted:  #7e7d79;
  --text-faint:  #84847d;
  --text-inv:    #1a1916;
  --primary:       #3dba7a;
  --primary-hover: #52d48f;
  --primary-light: #1a2e24;
  --primary-glow:  rgba(61,186,122,.18);
  --gold:        #e8aa3a;
  --gold-light:  #2a2115;
  --danger:       #e05c4e;
  --danger-light: #2c1a18;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#111210; --surface:#171815; --surface-2:#1d1f1b;
    --border:#2e3029; --divider:#242621; --text:#d8d7d2;
    --text-muted:#7e7d79; --text-faint:#84847d; --text-inv:#1a1916;
    --primary:#3dba7a; --primary-hover:#52d48f; --primary-light:#1a2e24;
    --primary-glow:rgba(61,186,122,.18); --gold:#e8aa3a; --gold-light:#2a2115;
    --danger:#e05c4e; --danger-light:#2c1a18;
    --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow:0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:0 12px 40px rgba(0,0,0,.55);
  }
}

/* ─── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 72px;
}
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.6;
  padding-bottom: var(--bottom-nav-h);
}
img, svg { display:block; max-width:100%; height:auto; }
input, button, select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
h1,h2,h3,h4,h5,h6 { text-wrap:balance; line-height:1.15; }
p, li { text-wrap:pretty; }

/* ─── TYPE SCALE ─────────────────────────────── */
:root {
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.75rem, 1rem + 5.5vw, 5.75rem);
}
:root {
  --sp1:0.25rem; --sp2:0.5rem; --sp3:0.75rem; --sp4:1rem;
  --sp5:1.25rem; --sp6:1.5rem; --sp7:1.75rem; --sp8:2rem; --sp10:2.5rem;
  --sp12:3rem; --sp16:4rem; --sp20:5rem; --sp24:6rem;
}

/* ─── NAV ────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp3) var(--sp6);
  min-height: 64px;
}
.nav-logo {
  display: flex; align-items: center; gap: var(--sp3);
  text-decoration: none; color: var(--text);
}
.nav-logo-mark { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; }
.nav-logo-text { font-family:var(--font-display); font-size:var(--text-lg); font-style:italic; color:var(--text); }
.nav-logo-text span { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: var(--sp1); }
.nav-link {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); padding: var(--sp2) var(--sp4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  border: none; background: none; cursor: pointer;
}
.nav-link:hover { color: var(--panel-accent, var(--primary)); background: color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); }
.nav-link.active { color: var(--panel-accent, var(--primary)); background: color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); }
.nav-link.active { font-weight: 700; }

/* ─── NAV DROPDOWNS (Tools / Learn) ──────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-caret { transition: transform var(--transition); flex-shrink: 0; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--sp2); z-index: 60;
  transform-origin: top left;
}
.nav-dropdown.open .nav-dropdown-menu { animation: dropdownIn var(--t-spring); }
@keyframes dropdownIn {
  from { opacity:0; transform: translateY(-6px) scale(.96); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.nav-dropdown.open .nav-dropdown-item { animation: dropdownItemIn 0.32s var(--ease-out-expo) backwards; }
.nav-dropdown.open .nav-dropdown-item:nth-child(1) { animation-delay: .02s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(2) { animation-delay: .05s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(3) { animation-delay: .08s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(n+4) { animation-delay: .11s; }
@keyframes dropdownItemIn { from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:translateX(0);} }
.nav-dropdown-item {
  display: flex; align-items: center; gap: var(--sp3); width: 100%;
  padding: var(--sp2) var(--sp3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
  border: none; background: none; text-align: left; cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.nav-dropdown-item:hover { transform: translateX(2px); }
.nav-dropdown-item:hover { color: var(--panel-accent, var(--primary)); background: color-mix(in oklch, var(--panel-accent, var(--primary)) 10%, transparent); }
.nav-dropdown-item.active { color: var(--panel-accent, var(--primary)); background: color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); font-weight: 700; }
.nav-dropdown-item-icon {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-muted); flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.nav-dropdown-item:hover .nav-dropdown-item-icon { background: color-mix(in oklch, var(--panel-accent, var(--primary)) 14%, transparent); color: var(--panel-accent, var(--primary)); }
.nav-dropdown-item.active .nav-dropdown-item-icon { background: color-mix(in oklch, var(--panel-accent, var(--primary)) 14%, transparent); color: var(--panel-accent, var(--primary)); }
.nav-actions { display:flex; align-items:center; gap:var(--sp2); }
.theme-toggle {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:all var(--transition);
}
.theme-toggle:hover { background:var(--divider); color:var(--text); }

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}
.nav-hamburger:hover { background: var(--divider); color: var(--text); }

/* Mobile drawer overlay */
.mobile-drawer-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(0px);
  opacity: 0; transition: opacity 0.32s var(--ease-out-expo), backdrop-filter 0.32s var(--ease-out-expo);
}
.mobile-drawer-overlay.open { display: block; opacity: 1; backdrop-filter: blur(4px); }

.mobile-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw); z-index: 310;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--t-spring);
  padding: var(--sp6);
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer.open .drawer-link,
.mobile-drawer.open .drawer-section-label {
  animation: drawerItemIn 0.4s var(--ease-out-expo) backwards;
}
@keyframes drawerItemIn { from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:translateX(0);} }
.mobile-drawer.open .drawer-nav > *:nth-child(1) { animation-delay: .04s; }
.mobile-drawer.open .drawer-nav > *:nth-child(2) { animation-delay: .07s; }
.mobile-drawer.open .drawer-nav > *:nth-child(3) { animation-delay: .10s; }
.mobile-drawer.open .drawer-nav > *:nth-child(4) { animation-delay: .13s; }
.mobile-drawer.open .drawer-nav > *:nth-child(5) { animation-delay: .16s; }
.mobile-drawer.open .drawer-nav > *:nth-child(n+6) { animation-delay: .19s; }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp8);
  padding-bottom: var(--sp4);
  border-bottom: 1px solid var(--divider);
}
.drawer-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all var(--transition);
}
.drawer-close:hover { background: var(--divider); color: var(--text); }
.drawer-nav { display: flex; flex-direction: column; gap: var(--sp1); }
.drawer-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); padding: var(--sp4) var(--sp4) var(--sp1);
}
.drawer-section-label:first-child { padding-top: 0; }
.drawer-link {
  display: flex; align-items: center; gap: var(--sp4);
  padding: var(--sp4) var(--sp4); border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 600; color: var(--text-muted);
  border: none; background: none; text-align: left; cursor: pointer;
  transition: all var(--transition);
}
.drawer-link:hover { color: var(--primary); background: var(--primary-light); }
.drawer-link.active { color: var(--panel-accent, var(--primary)); background: color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); }
.drawer-link.active { font-weight: 700; }
.drawer-link-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 1rem; flex-shrink: 0;
  transition: all var(--transition);
}
.drawer-link:hover .drawer-link-icon { background: var(--primary-light); color: var(--primary); }
.drawer-link.active .drawer-link-icon { background: color-mix(in oklch, var(--panel-accent, var(--primary)) 14%, transparent); color: var(--panel-accent, var(--primary)); }
.drawer-footer {
  margin-top: auto; padding-top: var(--sp6); border-top: 1px solid var(--divider);
  font-size: var(--text-xs); color: var(--text-faint);
}
.score-strip {
  display:flex; align-items:center; gap:7px;
  font-size:var(--text-xs); font-weight:700; color:var(--gold);
  background: var(--gold-light);
  border: 1.5px solid color-mix(in oklch, var(--gold) 35%, transparent);
  padding:6px 14px; border-radius:99px;
  box-shadow: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.score-strip svg { flex-shrink:0; }

/* ─── Minimal autosave toast (net worth tracker) ──────────────── */
.save-toast {
  display:flex; align-items:center; gap:5px;
  font-size:var(--text-xs); font-weight:600; color:var(--text-muted);
  opacity:0; transform:translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
}
.save-toast.is-visible { opacity:1; transform:translateY(0); }
.save-toast svg { flex-shrink:0; opacity:0.8; }

/* ─── STICKY BOTTOM NAV (mobile) ──────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: color-mix(in oklch, var(--surface) 95%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--divider);
  height: 60px;
  padding: 0 var(--sp2);
  justify-content: space-around;
  align-items: stretch;
  box-shadow: 0 -2px 20px rgba(0,0,0,.08);
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: 1; min-width: 0; padding: var(--sp1) 4px;
  border: none; background: none; cursor: pointer;
  color: var(--text-faint); transition: color var(--transition);
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
/* Tighten on very narrow screens so all 6 items fit. */
@media (max-width: 380px) {
  .bottom-nav-item { font-size: 0.55rem; letter-spacing: 0; }
  .bottom-nav-item svg { width: 18px; height: 18px; }
  .bottom-nav-home-icons svg { width: auto; height: auto; }
}
.bottom-nav-item svg { flex-shrink: 0; }
.bottom-nav-item.active { color: var(--panel-accent, var(--primary)); }
.bottom-nav-item:hover { color: var(--text-muted); }
.bottom-nav-home-icons { display: flex; align-items: center; gap: 2px; }
.bottom-nav-home-icons svg { flex-shrink: 0; }

/* ─── HERO ───────────────────────────────────── */
.hero {
  padding: clamp(var(--sp10),5vw,var(--sp16)) var(--sp6) 0;
  max-width: 1200px; margin: 0 auto;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp12); align-items: center;
  margin-bottom: var(--sp12);
}
@media(max-width:900px){ .hero-grid { grid-template-columns:1fr; gap:var(--sp10); } }
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-style: italic;
  line-height: 1.1;
  color: var(--text);
  max-width: 14ch;
  margin-bottom: var(--sp6);
}
.hero-headline em { color: var(--primary); font-style: italic; }
.hero-sub { font-size: var(--text-base); color: var(--text-muted); max-width: 52ch; margin-bottom: var(--sp8); line-height: 1.7; }
.hero-cta-row { display:flex; gap:var(--sp3); flex-wrap:wrap; margin-bottom:var(--sp8); }

/* ─── HERO RECEIPT (signature interactive element) ── */
.hero-receipt-col { display:flex; justify-content:center; }
.hero-receipt-shell { width:100%; max-width:380px; transform: rotate(-1.1deg); }
.hero-receipt {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
  padding: var(--sp7) var(--sp7) calc(var(--sp3) + 10px);
  /* Faint thermal-paper texture so it reads as receipt stock, not a generic card */
  background-image:
    repeating-linear-gradient(0deg, color-mix(in oklch, var(--text) 2%, transparent) 0px, transparent 1px, transparent 3px);
}
.hero-receipt-head { text-align:center; margin-bottom:var(--sp5); }
.hero-receipt-brand { display:flex; align-items:center; justify-content:center; gap:7px; }
.hero-receipt-logo { width:20px; height:20px; flex:none; display:flex; }
.hero-receipt-logo svg { width:100%; height:100%; }
.hero-receipt-store { font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); color:var(--text); }
.hero-receipt-store span { color:var(--primary); }
.hero-receipt-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); margin-top:4px; letter-spacing:.03em; text-transform:uppercase; }
.hero-receipt-rule { border:none; border-top:1.5px dashed var(--border); margin:var(--sp4) 0; }
.hero-receipt-row { display:flex; justify-content:space-between; gap:var(--sp3); font-family:var(--font-mono); font-size:13px; padding:5px 0; }
.hero-receipt-row .k { color:var(--text-muted); }
.hero-receipt-row .v { font-weight:700; font-variant-numeric:tabular-nums; }
.hero-receipt-row .v.neg { color:var(--danger); }
.hero-receipt-row .v.pos { color:var(--primary); }
.hero-receipt-control { margin: var(--sp5) 0 var(--sp1); }
.hero-receipt-control label {
  display:flex; justify-content:space-between; font-size:11px; font-weight:700;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp2);
}
.hero-receipt-control label b { color:var(--primary); font-family:var(--font-mono); text-transform:none; letter-spacing:0; font-weight:700; }
.hero-receipt-edge {
  height:14px;
  background-image: linear-gradient(135deg, transparent 49%, var(--bg) 51%); background-size: 14px 14px; background-repeat: repeat-x;
}
.hero-receipt-total {
  position: relative;
  background: var(--primary-light);
  padding: var(--sp4) var(--sp7) calc(var(--sp4) + 7px);
  display:flex; justify-content:space-between; align-items:baseline;
  border-radius: 0;
}
/* Torn-paper bottom edge, in place of a smooth rounded corner */
.hero-receipt-total::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:10px;
  background-image: linear-gradient(135deg, transparent 49%, var(--bg) 51%);
  background-size: 14px 14px; background-repeat: repeat-x;
  transform: translateY(50%);
}
.hero-receipt-total .k { font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; }
.hero-receipt-total .v { font-family:var(--font-mono); font-weight:700; font-size:var(--text-lg); color:var(--primary); font-variant-numeric:tabular-nums; }
.hero-receipt-note {
  margin-top:var(--sp4); text-align:center; font-size:12px; color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ─── HOW IT WORKS ───────────────────────────── */
.how-it-works {
  background: var(--bg);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: clamp(var(--sp10),5vw,var(--sp16)) var(--sp6);
  margin-bottom: var(--sp16);
}
.how-inner { max-width: 1200px; margin: 0 auto; }
.how-header { text-align: left; margin-bottom: var(--sp10); max-width: 52ch; }
.how-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--sp3);
}
.how-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); color: var(--text); margin-bottom: var(--sp3); }
.how-title em { color: var(--primary); font-style: italic; }
.how-desc { font-size: var(--text-base); color: var(--text-muted); max-width: 52ch; margin: 0; }
.how-steps {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; position: relative;
  border-top: 1px solid var(--divider);
}
@media(max-width:700px){ .how-steps { grid-template-columns: 1fr; border-top:none; } }
.how-step {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--sp8) var(--sp6) var(--sp2) 0;
  background: none; border: none; border-radius: 0;
  border-right: 1px solid var(--divider);
  position: relative;
}
.how-step:last-child { border-right: none; }
.how-step:not(:first-child) { padding-left: var(--sp6); }
@media(max-width:700px){
  .how-step { border-right:none; border-top:1px solid var(--divider); padding:var(--sp6) 0 !important; }
  .how-step:first-child { border-top:none; }
}
.how-step-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 2.75rem; font-weight: 400; color: var(--text-faint);
  line-height: 1; margin-bottom: var(--sp4);
  border: none; width: auto; height: auto; border-radius: 0;
  display: block; background: none;
}
.how-step-title { font-size: var(--text-base); font-weight: 700; color: var(--text); margin-bottom: var(--sp2); }
.how-step-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.65; }

/* ─── TESTIMONIALS ───────────────────────────── */
.testimonials-section {
  padding: clamp(var(--sp12),6vw,var(--sp20)) var(--sp6);
  margin-bottom: var(--sp4);
}
.testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonials-header { margin-bottom: var(--sp10); }
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: var(--sp5);
}
@media(max-width:900px){ .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--surface);
  border-radius: var(--radius-lg); padding: var(--sp6);
  box-shadow: none;
  transition: box-shadow var(--transition);
  display: flex; flex-direction: column; gap: var(--sp4);
}
.testimonial-card:hover { box-shadow: var(--shadow-sm); }
.testimonial-stars { display: flex; gap: 3px; }
.testimonial-star { color: var(--gold); font-size: 0.9rem; }
.testimonial-text { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; font-style: italic; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: var(--sp3); }
.testimonial-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 800;
  background: var(--primary-light); color: var(--primary);
  flex-shrink: 0;
}
.testimonial-name { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.testimonial-role { font-size: var(--text-xs); color: var(--text-faint); }

/* ─── AUTHOR CREDIBILITY ─────────────────────── */
.author-block {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp8);
  display: flex; gap: var(--sp8); align-items: flex-start;
  max-width: 800px;
}
@media(max-width:600px){ .author-block { flex-direction: column; } }
.author-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 60%, #000) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 2rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.author-info { flex: 1; }
.author-name { font-size: var(--text-base); font-weight: 700; color: var(--text); margin-bottom: var(--sp1); }
.author-role { font-size: var(--text-sm); color: var(--primary); font-weight: 600; margin-bottom: var(--sp3); }
.author-bio { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp4); }
.author-credentials { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.author-cred {
  display: flex; align-items: center; gap: var(--sp1);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
  padding: 4px var(--sp3); background: var(--bg);
  border: 1px solid var(--border); border-radius: 99px;
}
.author-cred svg { color: var(--primary); }

/* ─── SMALL CHANGES SECTION (set-piece: dark ledger band) ── */
.small-changes-section {
  background: linear-gradient(160deg, #173c2b 0%, #0f2a1e 100%);
  border-top: none; border-bottom: none;
  padding: clamp(var(--sp12),5vw,var(--sp16)) var(--sp6);
  margin-bottom: var(--sp12);
  /* Locally re-tint the shared text/border tokens so every element below
     that already reads var(--text)/var(--divider)/etc. becomes light-on-dark
     without needing per-rule overrides. Reset inside .sc-truth-block, which
     sits on its own light card within this band. */
  --text: #f2f6f3;
  --text-muted: rgba(242,246,243,.72);
  --text-faint: rgba(242,246,243,.65);
  --divider: rgba(242,246,243,.22);
  --border: rgba(242,246,243,.22);
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.04);
}
.small-changes-inner { max-width: 1200px; margin: 0 auto; }
.small-changes-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp12); align-items: end;
  margin-bottom: var(--sp10);
}
@media(max-width:900px){ .small-changes-header { grid-template-columns: 1fr; gap: var(--sp6); align-items:start; } }
.sc-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #a8e6c4;
  background: rgba(255,255,255,.08); padding: var(--sp1) var(--sp3);
  border-radius: var(--radius-sm); margin-bottom: var(--sp4);
}
.sc-headline { font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; color: var(--text); line-height: 1.15; margin-bottom: var(--sp4); }
.sc-headline em { color: #a8e6c4; font-style: italic; }
.sc-intro { font-size: var(--text-base); color: var(--text-muted); line-height: 1.75; max-width: 48ch; }
.sc-intro strong { color: #fff; }
/* Outcome number now sits directly on the band — no boxed gradient card,
   it IS the loud moment rather than decorating one. */
.sc-outcome-block {
  background: none; border-radius: 0; padding: 0;
  color: #fff; position: relative; overflow: visible; text-align: right;
}
@media(max-width:900px){ .sc-outcome-block { text-align:left; } }
.sc-outcome-block::before { content: none; }
.sc-outcome-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(242,246,243,.6); opacity: 1; margin-bottom: var(--sp3); }
.sc-outcome-number { font-family: var(--font-display); font-size: clamp(3.5rem,6vw,5.5rem); font-style: italic; line-height: 1; margin-bottom: var(--sp3); color: #fff; }
.sc-outcome-sub { font-size: var(--text-sm); color: rgba(242,246,243,.75); opacity: 1; line-height: 1.6; max-width: 32ch; margin-left: auto; }
@media(max-width:900px){ .sc-outcome-sub { margin-left:0; } }
.sc-outcome-sub strong { opacity: 1; color: #a8e6c4; }
/* Habit rows: a vertical ledger, not a card carousel — dashed rules instead
   of borders/shadows, echoing the receipt in the hero. */
.sc-changes-grid {
  display: flex; flex-direction: column; gap: 0;
  overflow: visible; padding: 0; margin-bottom: 0;
  border-top: 1.5px dashed var(--divider);
}
.sc-change-card-wrap { flex: none; scroll-snap-align: none; display: block; transition: none; }
.sc-change-card-wrap:hover { transform: none; }
.sc-change-card-wrap:hover .sc-change-card { box-shadow: none; background: rgba(255,255,255,.03); }
.sc-change-card {
  display: grid; grid-template-columns: 34px 1.5fr 1fr 1fr;
  align-items: center; gap: var(--sp5);
  background: none; border: none; border-radius: 0;
  padding: var(--sp5) var(--sp2);
  border-bottom: 1.5px dashed var(--divider);
  position: relative; overflow: visible;
  transition: background var(--transition);
}
@media(max-width:700px){
  .sc-change-card { grid-template-columns: 28px 1fr; row-gap: var(--sp3); }
  .sc-change-result, .sc-compare { grid-column: 2; }
}
.sc-change-card::before { content: none; }
.sc-change-icon {
  width: 34px; height: 34px; margin-bottom: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px dashed var(--card-accent, #3dba7a);
  color: var(--card-accent, #3dba7a);
  transform: rotate(-6deg);
}
.sc-change-icon svg { width: 16px; height: 16px; }
.sc-change-text { min-width: 0; }
.sc-compare { margin-top: 0; min-width: 130px; display: flex; flex-direction: column; gap: 7px; }
.sc-compare-row { display: flex; align-items: center; gap: var(--sp2); }
.sc-compare-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); width: 66px; flex-shrink: 0; white-space: nowrap; }
.sc-compare-track { flex: 1; height: 6px; background: var(--divider); border-radius: 99px; overflow: hidden; }
.sc-compare-fill { height: 100%; border-radius: 99px; width: 0; transition: width 1s cubic-bezier(.4,0,.2,1); }
.sc-compare-fill.spent { background: var(--text-faint); }
.sc-compare-fill.grown { background: var(--card-accent, #3dba7a); }
.sc-change-habit { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: var(--sp1); }
.sc-change-action { font-size: var(--text-base); font-weight: 700; color: var(--text); margin-bottom: 0; line-height: 1.35; }
.sc-change-divider { display: none; }
.sc-change-result { text-align: right; }
@media(max-width:700px){ .sc-change-result { text-align:left; } }
.sc-change-result-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--sp1); }
.sc-change-result-value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: #a8e6c4; line-height: 1; font-variant-numeric: tabular-nums; }
.sc-change-result-period { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--sp1); }
.sc-change-edge { display: none; }
.sc-bar-container { margin-top: var(--sp4); }
.sc-bar-track { height: 6px; background: var(--divider); border-radius: 99px; overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: 99px; background: var(--card-accent, #3dba7a); width: 0; transition: width 1s cubic-bezier(.4,0,.2,1); }
/* Truth block sits as a light "receipt stub" set into the dark band, so it
   needs its own light-mode token reset (it inherited the dark overrides above). */
.sc-truth-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4);
  padding: var(--sp8); background: #fff;
  border: none; border-radius: var(--radius-xl);
  align-items: start; margin-top: var(--sp12);
  --text: #1a1916; --text-muted: #6b6a66; --text-faint: #706f6c;
  --divider: #eceae5; --border: #e2e0db; --surface: #ffffff; --surface-2: #fafaf8;
}
@media(max-width:700px){ .sc-truth-block { grid-template-columns: 1fr; } }
.sc-truth-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--text); line-height: 1.25; margin-bottom: var(--sp4); }
.sc-truth-title em { color: var(--primary); font-style: italic; }
.sc-truth-body { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.75; }
.sc-truth-body strong { color: var(--text); }
.sc-truth-stats { display: flex; flex-direction: column; gap: var(--sp4); }
.sc-truth-stat { display: flex; align-items: flex-start; gap: var(--sp4); padding: var(--sp4) var(--sp5); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--divider); }
.sc-truth-stat-num { font-size: var(--text-xl); font-weight: 800; color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sc-truth-stat-text { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; }
.sc-truth-stat-text strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ─── BUTTONS ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp2);
  padding: 12px 24px; border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap; border: none; cursor: pointer;
  transition: transform var(--t-spring), box-shadow var(--t-base),
              background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.btn:active { transform: scale(0.96); transition-duration: 90ms; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 16px var(--primary-glow); }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-2px) scale(1.015); box-shadow:0 10px 28px var(--primary-glow); }
.btn-primary:active { transform: translateY(0) scale(0.96); box-shadow: 0 3px 10px var(--primary-glow); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
.btn-ghost:hover { background:var(--surface-2); border-color:var(--text-faint); transform:translateY(-1px); }
.btn-sm { padding:8px 16px; font-size:var(--text-xs); border-radius:var(--radius-sm); }

/* ─── MAIN LAYOUT ────────────────────────────── */
.main { max-width:1200px; margin:0 auto; padding-inline:var(--sp6); }

/* ─── SECTION ────────────────────────────────── */
.section { padding-block: clamp(var(--sp12),6vw,var(--sp20)); }
.section-header { margin-bottom:var(--sp10); }
.section-tag {
  display:inline-block; font-size:var(--text-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--panel-accent, var(--primary));
  background:color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); padding:var(--sp1) var(--sp3);
  border-radius:var(--radius-sm); margin-bottom:var(--sp4);
}
.section-title { font-family:var(--font-display); font-style:italic; font-size:var(--text-2xl); color:var(--text); margin-bottom:var(--sp3); }
.section-desc { font-size:var(--text-base); color:var(--text-muted); max-width:56ch; line-height:1.7; }

/* ─── CALCULATOR CARD ────────────────────────── */
.calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.calc-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp6) var(--sp8); border-bottom: 1px solid var(--divider); background: var(--surface-2); }
.calc-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); display: flex; align-items: center; gap: var(--sp3); }
.calc-title-icon { width:36px; height:36px; border-radius:var(--radius-sm); background:color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); color:var(--panel-accent, var(--primary)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.calc-body { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 480px; }
@media(max-width:768px){ .calc-body { grid-template-columns:1fr; } }
.calc-inputs { padding: var(--sp8); border-right: 1px solid var(--divider); }
@media(max-width:768px){ .calc-inputs { border-right:none; border-bottom:1px solid var(--divider); } }
.calc-output { padding: var(--sp8); display: flex; flex-direction: column; gap: var(--sp6); }

/* ─── EXPORT / SHARE ACTIONS ─────────────────── */
.calc-actions {
  display: flex; gap: var(--sp2); flex-wrap: wrap;
  padding: var(--sp4) var(--sp8);
  border-top: 1px solid var(--divider);
  background: var(--surface-2);
}
.calc-action-btn {
  display: flex; align-items: center; gap: var(--sp2);
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); cursor: pointer;
  transition: all var(--transition);
}
.calc-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.calc-action-btn svg { flex-shrink: 0; }

/* ─── FORM ELEMENTS ──────────────────────────── */
.field { margin-bottom: var(--sp5); }
.field-label { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp2); }
.field-label-hint { font-size:var(--text-xs); font-weight:500; color:var(--text-muted); }
.field-value-display { font-weight:700; color:var(--panel-accent, var(--primary)); font-size:var(--text-sm); }
.slider-wrap { position:relative; }
input[type="range"] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; box-sizing:border-box;
  /* Visible track stays 6px tall via symmetric padding; background is
     clipped to that inner strip so the enlarged box below/above it is an
     invisible-but-tappable hit area (44px meets the ~44px touch target
     minimum) without changing how the track looks. */
  padding-block: 19px;
  background-clip: content-box; background-origin: content-box;
  border-radius:99px;
  background-color: var(--divider); outline:none; cursor:pointer;
  transition: background-color var(--transition);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--panel-accent, var(--primary)); cursor:pointer;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--panel-accent, var(--primary)) 45%, transparent);
  transition: transform var(--t-spring), box-shadow var(--t-base);
}
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); box-shadow:0 3px 12px color-mix(in oklch, var(--panel-accent, var(--primary)) 45%, transparent); }
input[type="range"]:active::-webkit-slider-thumb { transform:scale(1.4); box-shadow:0 4px 16px color-mix(in oklch, var(--panel-accent, var(--primary)) 55%, transparent); }
input[type="range"]::-moz-range-track { height:6px; border-radius:99px; background:transparent; }
input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--panel-accent, var(--primary)); cursor:pointer; border:none; box-shadow:0 2px 8px color-mix(in oklch, var(--panel-accent, var(--primary)) 45%, transparent); transition: transform var(--t-spring), box-shadow var(--t-base); }
input[type="range"]:hover::-moz-range-thumb { transform:scale(1.2); }
input[type="range"]:active::-moz-range-thumb { transform:scale(1.4); }
.slider-ticks { display:flex; justify-content:space-between; margin-top:var(--sp2); padding-inline:2px; }
.slider-tick { font-size:var(--text-xs); color:var(--text-faint); }
.field-select {
  width:100%; padding:10px var(--sp4);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
  font-size:var(--text-sm); font-weight:500;
  outline:none; transition:border-color var(--transition), box-shadow var(--transition);
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6a66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp4) center;
  padding-right:var(--sp10);
}
.field-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.chips { display:flex; flex-wrap:wrap; gap:var(--sp2); margin-top:var(--sp3); }
.chip { padding:5px 12px; font-size:var(--text-xs); font-weight:600; border:1.5px solid var(--border); border-radius:99px; color:var(--text-muted); background:var(--surface-2); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-spring); cursor:pointer; }
.chip:active { transform: scale(0.94); }
.chip:hover { border-color:var(--panel-accent, var(--primary)); color:var(--panel-accent, var(--primary)); background:color-mix(in oklch, var(--panel-accent, var(--primary)) 14%, transparent); }
.chip.active { border-color:var(--panel-accent, var(--primary)); color:var(--panel-accent, var(--primary)); background:color-mix(in oklch, var(--panel-accent, var(--primary)) 14%, transparent); }

/* ─── RESULT METRICS — receipt-style output sheet ──
   Shared by every calculator (Opportunity Cost, Inflation,
   Mindset, Budget, Net Worth) so the "here's your ticket"
   moment matches the homepage receipt language everywhere
   results are shown, not just on the homepage. ──────── */
.result-hero {
  background: linear-gradient(135deg, var(--panel-accent, var(--primary)) 0%, color-mix(in oklch, var(--panel-accent, var(--primary)) 60%, #000) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--sp6) var(--sp6) var(--sp7);
  color: #fff; position: relative; overflow: hidden;
}
.result-hero::before { content:''; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.06); }
.result-hero::after { content:''; position:absolute; right:30px; top:-20px; width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.04); }
.result-hero-label { font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.75; margin-bottom:var(--sp2); position:relative; z-index:1; }
.result-hero-value { font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:700; line-height:1; margin-bottom:var(--sp4); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; position:relative; z-index:1; }
.result-hero-chips { display:flex; flex-wrap:wrap; gap:var(--sp2); position:relative; z-index:1; }
.result-hero-chip { background:rgba(255,255,255,.15); backdrop-filter:blur(6px); border-radius:99px; padding:4px 12px; font-size:var(--text-xs); font-weight:600; }
.result-hero-chip strong { font-family:var(--font-mono); color:#a8ffcb; }
/* Torn-paper seam between the total and the line-item ledger below it */
.result-hero-edge {
  height:12px; margin-top:-1px; position:relative;
  background-image: linear-gradient(135deg, transparent 49%, var(--surface-2) 51%);
  background-size: 14px 14px; background-repeat: repeat-x;
}
.result-metrics {
  display:flex; flex-direction:column;
  background: var(--surface-2); border:1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 0 var(--sp5);
}
/* When directly preceded by a result-hero's torn edge, the ledger attaches
   flush underneath it instead of floating as its own standalone card
   (Opportunity Cost, Budget, Net Worth). Panels without a hero — Inflation,
   Mindset — get the standalone rounded-card treatment above instead. */
.result-hero-edge + .result-metrics {
  border-top: none; border-radius: 0; margin-top: -1px;
}
.metric {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp3);
  background:none; border:none; border-radius:0;
  border-bottom:1px dashed var(--divider);
  padding: var(--sp3) 0;
}
.metric:last-child { border-bottom:none; }
.metric-label { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:0; }
.metric-value { font-family:var(--font-mono); font-size:var(--text-base); font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; text-align:right; word-break:break-word; overflow-wrap:anywhere; }
.metric-value.pos { color:var(--primary); }
.metric-value.neg { color:var(--danger); }
/* Neutral "note" treatment: gold is reserved for gamification (score,
   quiz progress) so it reads as a distinct signal rather than a second
   brand accent competing with the primary CTA color. */
.insight-box {
  background: var(--surface); border:1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  padding:var(--sp4) var(--sp5); font-size:var(--text-sm); color:var(--text-muted); line-height:1.6;
}
/* Attaches flush under the ledger (used explicitly via .insight-attached,
   since a chart sometimes sits between the ledger and the note in the
   markup — adjacency alone isn't reliable). Stands alone as its own
   rounded card otherwise (e.g. Net Worth, where the note follows a bar
   chart rather than a ledger). */
.insight-box.insight-attached {
  border-top:none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-top:-1px;
}
.insight-box strong { color:var(--text); }

/* ─── CHART AREA + ACCESSIBLE SUMMARY ──────────── */
.chart-wrap { position:relative; width:100%; border-radius:var(--radius); overflow:hidden; }
.chart-summary {
  margin-top: var(--sp3);
  padding: var(--sp3) var(--sp4);
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.chart-summary strong { color: var(--text); }

/* ─── TAB SWITCHER ───────────────────────────── */
.tabs { display:flex; gap:var(--sp1); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:4px; flex-wrap:wrap; }
.tab { flex:1; min-width:fit-content; padding:9px var(--sp5); font-size:var(--text-sm); font-weight:600; color:var(--text-muted); border-radius:var(--radius-sm); transition: color var(--t-fast), background var(--t-spring), box-shadow var(--t-base), transform var(--t-spring); text-align:center; white-space:nowrap; }
.tab:hover { color:var(--text); }
.tab:active { transform: scale(0.96); }
.tab.active { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); animation: tabPop 0.32s var(--ease-spring); }
@keyframes tabPop { from{transform:scale(.94)} to{transform:scale(1)} }

/* ─── SECTION PANELS ─────────────────────────── */
.panel { display:none; }
.panel.active { display:block; animation:fadeUp 0.4s var(--ease-out-expo); }
/* Direct children of a freshly-activated panel cascade in rather than
   arriving as one flat block — small stagger, capped so long panels don't
   feel sluggish waiting for the last item. */
.panel.active > * { animation: panelChildIn 0.5s var(--ease-out-expo) backwards; }
.panel.active > *:nth-child(1) { animation-delay: .02s; }
.panel.active > *:nth-child(2) { animation-delay: .06s; }
.panel.active > *:nth-child(3) { animation-delay: .10s; }
.panel.active > *:nth-child(4) { animation-delay: .14s; }
.panel.active > *:nth-child(n+5) { animation-delay: .17s; }
/* Prevent the browser's scroll-anchoring from fighting the programmatic
   scroll-to-top below when a panel swap causes a big layout shift. */
#mainContent { overflow-anchor: none; }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes panelChildIn { from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ─── VIEW TRANSITIONS (panel swaps) ─────────────
   Progressive enhancement: browsers without View Transitions support just
   get the fadeUp/panelChildIn animation above — nothing breaks. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vtOut 0.32s var(--ease-smooth) both;
  }
  ::view-transition-new(root) {
    animation: vtIn 0.42s var(--ease-out-expo) both;
  }
  @keyframes vtOut { to   { opacity: 0; transform: scale(.99) translateY(-6px); } }
  @keyframes vtIn   { from { opacity: 0; transform: scale(1.01) translateY(6px); } }
}
/* Respect reduced-motion everywhere: shrink every animation/transition to
   near-instant instead of removing motion cues entirely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* ─── INFLATION SECTION ──────────────────────── */
.inflation-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp6); }
@media(max-width:768px){ .inflation-layout{grid-template-columns:1fr} }
.inflation-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--sp8); box-shadow:var(--shadow); }
.inflation-bars { display:flex; flex-direction:column; gap:var(--sp3); margin-top:var(--sp4); }
.inf-row { display:flex; align-items:center; gap:var(--sp3); }
.inf-year { font-size:var(--text-xs); font-weight:700; color:var(--text-muted); width:36px; text-align:right; flex-shrink:0; }
.inf-track { flex:1; height:28px; background:var(--divider); border-radius:6px; overflow:hidden; position:relative; }
.inf-bar { height:100%; border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding-right:var(--sp2); font-size:var(--text-xs); font-weight:700; color:#fff; transition: width 0.7s cubic-bezier(.4,0,.2,1); min-width:4px; }
.inf-bar.cash   { background: linear-gradient(90deg, var(--danger) 0%, color-mix(in oklch, var(--danger) 80%, #000) 100%); }
.inf-bar.invest { background: linear-gradient(90deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, #000) 100%); }
.inf-label { font-size:var(--text-xs); font-weight:700; width:52px; text-align:right; flex-shrink:0; }
.inf-label.cash   { color:var(--danger); }
.inf-label.invest { color:var(--primary); }
.inflation-warning {
  background: var(--danger-light); border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm); padding: var(--sp4); margin-top: var(--sp4);
}
.inflation-warning-title { font-size: var(--text-xs); font-weight: 700; color: var(--danger); margin-bottom: var(--sp1); }
.inflation-warning-text { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; }

/* ─── PRINCIPLES (quiet accordion list, not a bordered card grid) ── */
.principles-grid { display:flex; flex-direction:column; border-top:1px solid var(--divider); }
.principle-card {
  background:none; border:none; border-radius:0;
  border-bottom:1px solid var(--divider);
  padding: var(--sp6) var(--sp2);
  box-shadow:none; position:relative; overflow:visible;
  transition: background var(--transition); cursor:pointer;
}
.principle-card::before { content:none; }
.principle-card:hover { box-shadow:none; transform:none; background:var(--surface-2); border-color:var(--divider); }
.principle-card[aria-expanded="true"] { border-color: var(--divider); box-shadow: none; background: var(--surface-2); }
.principle-card-row { display:flex; align-items:flex-start; gap:var(--sp5); }
.principle-num {
  position:static; font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--text-faint); flex-shrink:0; width:22px; padding-top:9px;
  line-height:1; pointer-events:none; user-select:none;
  transition:color var(--transition);
}
.principle-card:hover .principle-num, .principle-card[aria-expanded="true"] .principle-num { color: var(--p-accent, var(--primary)); }
.principle-icon {
  width:38px; height:38px; margin-bottom:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); background: color-mix(in oklch, var(--p-accent, var(--primary)) 12%, transparent);
  color: var(--p-accent, var(--primary));
}
.principle-icon svg { width:20px; height:20px; }
.principle-card-body { flex:1; min-width:0; }
.principle-title { font-size:var(--text-base); font-weight:700; color:var(--text); margin-bottom:var(--sp2); }
.principle-desc { font-size:var(--text-sm); color:var(--text-muted); line-height:1.65; max-width:64ch; }
.principle-example {
  margin-top:var(--sp3); padding:var(--sp3) var(--sp4);
  background: color-mix(in oklch, var(--p-accent, var(--primary)) 10%, transparent);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs); color: var(--p-accent, var(--primary)); font-weight:600;
  display:none;
}
.principle-card[aria-expanded="true"] .principle-example { display:block; animation: fadeUp 0.32s var(--ease-out-expo); }
.principle-icon { transition: transform var(--t-spring); }
.principle-card[aria-expanded="true"] .principle-icon { transform: scale(1.08) rotate(-4deg); }
.principle-toggle {
  margin-top: var(--sp3);
  font-size: var(--text-xs); font-weight: 700;
  color: var(--p-accent, var(--primary)); display: flex; align-items: center; gap: var(--sp1);
}
@media(max-width:560px){ .principle-card-row { gap: var(--sp3); } }

/* ─── EXPLAINER ACCORDION ("How this works") ──── */
.explainer {
  background: var(--surface-2); border: 1px solid var(--divider);
  border-radius: var(--radius-lg); margin-bottom: var(--sp6); overflow: hidden;
}
.explainer summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp3);
  padding: var(--sp4) var(--sp5); font-weight: 700; font-size: var(--text-sm); color: var(--text);
  transition: background var(--transition);
}
.explainer summary::-webkit-details-marker { display: none; }
.explainer summary:hover { background: var(--divider); }
.explainer summary .exp-icon {
  width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: color-mix(in oklch, var(--panel-accent, var(--primary)) 12%, transparent); color: var(--panel-accent, var(--primary));
  display: flex; align-items: center; justify-content: center;
}
.explainer summary .exp-chevron { margin-left: auto; color: var(--text-muted); transition: transform var(--transition); flex-shrink:0; }
.explainer[open] summary .exp-chevron { transform: rotate(180deg); }
.explainer-body { padding: 0 var(--sp5) var(--sp5); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; }
.explainer[open] .explainer-body { animation: fadeUp 0.32s var(--ease-out-expo); }
.explainer summary .exp-chevron { transition: transform var(--t-spring); }
.explainer-body p { margin-bottom: var(--sp3); }
.explainer-body p:last-child { margin-bottom: 0; }
.explainer-assumption {
  margin-top: var(--sp3); padding: var(--sp3) var(--sp4);
  background: var(--surface-2); border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-muted);
}
.explainer-assumption strong { color: var(--text); }

/* ─── GLOSSARY TERM ──────────────────────────── */
.gterm { border-bottom: 1px dashed var(--text-faint); cursor: help; font-weight: 600; color: var(--text); }

/* ─── LEARNING PATH ──────────────────────────── */
.path-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp8); box-shadow: var(--shadow); margin-bottom: var(--sp20); }
.path-head { margin-bottom: var(--sp6); }
.path-head h2 { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--text); margin-bottom: var(--sp2); }
.path-head p { color: var(--text-muted); font-size: var(--text-sm); max-width: 60ch; }
.path-steps { display: flex; flex-direction: column; gap: 0; }
.path-step {
  display: flex; align-items: center; gap: var(--sp4); padding: var(--sp4) var(--sp2);
  border-bottom: 1px solid var(--divider); background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; width: 100%; border-radius: var(--radius-sm); transition: background var(--transition);
  cursor: pointer;
}
.path-step:last-child { border-bottom: none; }
.path-step:hover { background: color-mix(in oklch, var(--step-accent, var(--primary)) 12%, transparent); }
.path-step-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 800; color: var(--text-muted);
}
.path-step.done .path-step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.path-step-body { flex: 1; min-width: 0; }
.path-step-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.path-step-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.path-step-arrow { color: var(--text-faint); flex-shrink: 0; }
.path-step:hover .path-step-arrow { color: var(--step-accent, var(--primary)); }

/* ─── NEXT-STEP FOOTER (bottom of each module) ── */
.next-step {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp4);
  margin-top: var(--sp10); padding: var(--sp5) var(--sp6);
  background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.next-step-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.next-step-title { font-size: var(--text-base); font-weight: 700; color: var(--text); margin-top: 2px; }

/* ─── QUIZ MODULE LINK ───────────────────────── */
.quiz-module-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp2); font-size: var(--text-xs); font-weight: 700;
  color: var(--primary); background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ─── SCENARIO / CASE STUDY CARDS ─────────────── */
.scenario-card {
  background: var(--surface); border-radius: var(--radius-xl);
  padding: var(--sp8); box-shadow: none; margin-bottom: var(--sp6);
}
.scenario-head { display: flex; align-items: center; gap: var(--sp4); margin-bottom: var(--sp5); }
.scenario-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); font-weight: 700;
}
.scenario-name { font-size: var(--text-base); font-weight: 800; color: var(--text); }
.scenario-tag { font-size: var(--text-xs); color: var(--text-muted); }
.scenario-body { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.75; margin-bottom: var(--sp5); }
.scenario-body strong { color: var(--text); }
.scenario-numbers { display: flex; flex-wrap: wrap; gap: var(--sp3); margin-bottom: var(--sp5); }
.scenario-chip { background: var(--surface-2); border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: var(--sp2) var(--sp4); font-size: var(--text-xs); }
.scenario-chip b { color: var(--primary); }
.scenario-cta { display: flex; gap: var(--sp3); flex-wrap: wrap; }

/* ─── GUIDE / FAQ ACCORDIONS (Learn panel) ────── */
.guide-list { display: flex; flex-direction: column; gap: var(--sp3); }
.guide-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.guide-item summary {
  cursor: pointer; list-style: none; padding: var(--sp5) var(--sp6);
  font-weight: 700; font-size: var(--text-base); color: var(--text);
  display: flex; align-items: center; gap: var(--sp3);
}
.guide-item summary::-webkit-details-marker { display: none; }
.guide-item summary .exp-chevron { margin-left: auto; color: var(--text-muted); transition: transform var(--transition); }
.guide-item[open] summary .exp-chevron { transform: rotate(180deg); }
.guide-body { padding: 0 var(--sp6) var(--sp6); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.75; }
.guide-body p { margin-bottom: var(--sp3); }
.guide-body ul { margin: var(--sp3) 0 var(--sp3) var(--sp5); }
.guide-body li { margin-bottom: var(--sp1); }

.glossary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4); }
@media (max-width: 680px) { .glossary-grid { grid-template-columns: 1fr; } }
.glossary-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp4) var(--sp5); }
.glossary-term { font-weight: 800; color: var(--primary); font-size: var(--text-sm); margin-bottom: 4px; }
.glossary-def { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }

.learn-subnav { display: flex; gap: var(--sp2); margin-bottom: var(--sp8); flex-wrap: wrap; }
.learn-subnav-btn {
  padding: var(--sp2) var(--sp5); border-radius: 99px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: var(--text-sm); font-weight: 700; color: var(--text-muted);
  transition: all var(--transition);
}
.learn-subnav-btn:hover { border-color: var(--primary); color: var(--primary); }
.learn-subnav-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.learn-section { display: none; }
.learn-section.active { display: block; animation: fadeUp 0.3s ease; }

/* ─── METHODOLOGY / ABOUT (footer expansion) ──── */
.footer-expand { max-width: 1200px; margin: 0 auto var(--sp10); padding: 0 var(--sp6); }
.footer-expand details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: var(--sp3); padding: 0;
}
.footer-expand summary {
  cursor: pointer; list-style: none; padding: var(--sp4) var(--sp5);
  font-weight: 700; font-size: var(--text-sm); color: var(--text);
  display: flex; align-items: center; gap: var(--sp2);
}
.footer-expand summary::-webkit-details-marker { display: none; }
.footer-expand-body { padding: 0 var(--sp5) var(--sp5); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.75; }
.footer-expand-body ul { margin: var(--sp2) 0 var(--sp2) var(--sp5); }
.footer-expand-body li { margin-bottom: var(--sp1); }

/* ─── QUIZ ───────────────────────────────────── */
.quiz-wrapper { max-width:680px; margin-inline:auto; }
.quiz-progress { height:6px; background:var(--divider); border-radius:99px; overflow:hidden; margin-bottom:var(--sp6); }
.quiz-progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--gold)); border-radius:99px; transition:width 0.4s ease; }
.quiz-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--sp8); box-shadow:var(--shadow); }
.quiz-q-label { font-size:var(--text-xs); font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--sp3); }
.quiz-question { font-size:var(--text-lg); font-weight:700; color:var(--text); margin-bottom:var(--sp6); line-height:1.45; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp3); }
@media(max-width:500px){ .quiz-options{grid-template-columns:1fr} }
.quiz-opt {
  display:flex; align-items:center; gap:var(--sp3);
  padding:var(--sp4) var(--sp5); border-radius:var(--radius); border:1.5px solid var(--border);
  border-left-width:4px; background:var(--surface-2);
  font-size:var(--text-sm); font-weight:500; color:var(--text); text-align:left;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast); cursor:pointer;
}
.quiz-opt:hover:not(:disabled) { transform: translateX(3px); }
.quiz-opt:active:not(:disabled) { transform: scale(0.98); }
.quiz-opt-letter {
  flex-shrink:0; width:26px; height:26px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--divider); color:var(--text-muted);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700;
  transition: all var(--t-fast);
}
.quiz-opt-text { flex:1; }
.quiz-opt:hover:not(:disabled) { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.quiz-opt:hover:not(:disabled) .quiz-opt-letter { background:var(--primary); color:#fff; transform: scale(1.08); }
.quiz-opt.correct { border-color:var(--primary); background:var(--primary-light); color:var(--primary); animation: quizCorrectPop 0.45s var(--ease-spring); }
.quiz-opt.correct .quiz-opt-letter { background:var(--primary); color:#fff; }
.quiz-opt.wrong { border-color:var(--danger); background:var(--danger-light); color:var(--danger); animation: quizWrongShake 0.4s var(--ease-smooth); }
.quiz-opt.wrong .quiz-opt-letter { background:var(--danger); color:#fff; }
.quiz-opt:disabled { cursor:default; }
.quiz-opt:disabled:hover { transform: none; }
@keyframes quizCorrectPop { 0%{transform:scale(1)} 45%{transform:scale(1.035)} 100%{transform:scale(1)} }
@keyframes quizWrongShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.quiz-feedback { margin-top:var(--sp4); padding:var(--sp3) var(--sp4); border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:600; display:none; flex-direction:column; align-items:flex-start; gap:var(--sp2); animation: quizFeedbackIn 0.38s var(--ease-out-expo); transform-origin: top; }
.quiz-feedback.show{display:flex}
.quiz-feedback.ok { background:var(--primary-light); color:var(--primary); border-left:3px solid var(--primary); }
.quiz-feedback.fail { background:var(--danger-light); color:var(--danger); border-left:3px solid var(--danger); }
@keyframes quizFeedbackIn { from{opacity:0; transform:translateY(-6px) scaleY(.92);} to{opacity:1; transform:translateY(0) scaleY(1);} }
.quiz-footer { display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp6); flex-wrap:wrap; gap:var(--sp3); }
.quiz-complete { text-align:center; padding:0 0 var(--sp10); display:none; }
.quiz-complete.show { display:block; animation:fadeUp 0.5s var(--ease-out-expo); }
@keyframes bounceY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.quiz-result-hero {
  position: relative; overflow: hidden; padding: var(--sp12) var(--sp8) var(--sp10);
  margin-bottom: var(--sp8); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 55%, #000) 100%);
  color: #fff;
}
.quiz-result-hero::before {
  content: ''; position: absolute; left: -50px; top: -50px;
  width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.07);
}
.quiz-result-hero::after {
  content: ''; position: absolute; right: -30px; bottom: -60px;
  width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.quiz-result-icon { position:relative; width:64px; height:64px; margin:0 auto var(--sp4); display:flex; align-items:center; justify-content:center; color:#fff; animation: quizIconPop 0.6s var(--ease-spring) both, bounceY 1.4s ease 0.6s infinite; }
.quiz-result-icon svg { width: 44px; height: 44px; }
@keyframes quizIconPop { from{opacity:0; transform:scale(.4) rotate(-12deg);} to{opacity:1; transform:scale(1) rotate(0);} }
.quiz-result-title { position:relative; font-size:var(--text-lg); font-weight:700; color:#fff; margin-bottom:var(--sp2); animation: fadeUp 0.5s var(--ease-out-expo) 0.12s both; }
.quiz-score-big { position:relative; font-family:var(--font-display); font-style:italic; font-size:clamp(2.25rem,4vw,3rem); font-weight:700; color:#fff; line-height:1; margin-bottom:var(--sp2); animation: fadeUp 0.5s var(--ease-out-expo) 0.18s both; }
.quiz-score-line { position:relative; font-size:var(--text-sm); color:rgba(255,255,255,.85); margin-bottom:0; line-height:1.5; animation: fadeUp 0.5s var(--ease-out-expo) 0.24s both; }
.quiz-quote-card { position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--sp8) var(--sp8) var(--sp6); margin:0 auto var(--sp8); max-width:560px; text-align:left; box-shadow:var(--shadow); animation: fadeUp 0.55s var(--ease-out-expo) 0.3s both; }
.quiz-quote-mark { font-family:var(--font-display); font-size:5rem; line-height:0.6; color:var(--primary); opacity:0.18; position:absolute; top:var(--sp5); left:var(--sp5); user-select:none; pointer-events:none; }
.quiz-quote-text { font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); color:var(--text); line-height:1.55; margin-bottom:var(--sp4); position:relative; z-index:1; }
.quiz-quote-author { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary); }
.quiz-complete-actions { display:flex; gap:var(--sp3); justify-content:center; flex-wrap:wrap; }

/* ─── BOOKS ──────────────────────────────────── */
.books-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp5); }
.book-card { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:none; transition: box-shadow var(--t-base), transform var(--t-spring); }
.book-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-5px) scale(1.015); }
.book-cover { height:160px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:800; font-family:var(--font-display); font-style:italic; position:relative; overflow:hidden; }
.book-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35)); }
.book-info { padding:var(--sp4) var(--sp5); }
.book-title { font-size:var(--text-sm); font-weight:700; color:var(--text); margin-bottom:var(--sp1); }
.book-author { font-size:var(--text-xs); color:var(--text-muted); margin-bottom:var(--sp3); }
.book-tag { display:inline-block; font-size:var(--text-xs); font-weight:700; padding:3px 10px; border-radius:99px; }

/* ─── MINDSET CALCULATOR ─────────────────────── */
.ms-step-card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp6) var(--sp8); margin-bottom: var(--sp4); box-shadow: none; }
.ms-step-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: var(--sp5); }
.ms-three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp5); }
@media(max-width: 640px) { .ms-three-col { grid-template-columns: 1fr; } }
.ms-field { display: flex; flex-direction: column; gap: var(--sp2); }
.ms-label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.ms-field-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--sp1); }
.ms-input-wrap { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.ms-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.ms-input-wrap.ms-highlight { border-color: var(--primary); background: var(--primary-light); }
.ms-input-wrap.ms-readonly { background: var(--primary-light); border-color: transparent; cursor: default; }
.ms-prefix, .ms-suffix { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); padding: 0 var(--sp3); background: transparent; user-select: none; flex-shrink: 0; }
.ms-prefix { border-right: 1px solid var(--divider); }
.ms-suffix { border-left: 1px solid var(--divider); }
.ms-input-wrap.ms-readonly .ms-prefix { border-right-color: transparent; color: var(--primary); }
.ms-input { flex: 1; min-width: 0; padding: 12px var(--sp3); font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); background: transparent; border: none; outline: none; text-align: right; }
.ms-input-no-prefix { padding-left: var(--sp4); }
.ms-display { display: flex; align-items: center; justify-content: flex-end; color: var(--primary); padding: 12px var(--sp3); font-size: var(--text-base); font-weight: 700; }
.ms-result-banner { margin-bottom: var(--sp4); }
/* Two mini-receipts (one per path), color-coded, tearing into one shared
   total below — same "vs." comparison as before, in the ticket language
   used by every other calculator's result. */
.ms-ticket-row { display:flex; gap:var(--sp3); }
@media(max-width:560px){ .ms-ticket-row { flex-direction:column; } }
.ms-ticket {
  flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; padding: var(--sp5) var(--sp5) var(--sp4);
  text-align:center;
}
.ms-ticket.danger { box-shadow: inset 0 3px 0 var(--danger); }
.ms-ticket.pos { box-shadow: inset 0 3px 0 var(--primary); }
.ms-path-label { font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp3); }
.danger-label { color: var(--danger); }
.success-label { color: var(--primary); }
.ms-ticket-rule { border:none; border-top:1.5px dashed var(--divider); margin: var(--sp3) 0; }
.ms-path-value { font-family:var(--font-mono); font-size:var(--text-xl); font-weight:700; line-height:1; margin-bottom:var(--sp2); font-variant-numeric:tabular-nums; }
.danger-val { color: var(--danger); }
.success-val { color: var(--primary); }
.ms-path-sub { font-size:11px; color:var(--text-faint); }
.ms-ticket-edge-row { display:flex; }
.ms-ticket-edge-row > div {
  flex:1; height:12px; margin-top:-1px;
  background-image: linear-gradient(135deg, transparent 49%, var(--bg) 51%);
  background-size:12px 12px; background-repeat:repeat-x;
}
.ms-diff-block {
  text-align: center; position: relative; overflow: hidden;
  margin-top: -1px; padding: var(--sp8) var(--sp6);
  background: linear-gradient(135deg, var(--panel-accent, var(--primary)) 0%, color-mix(in oklch, var(--panel-accent, var(--primary)) 55%, #000) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.ms-diff-block::before {
  content: ''; position: absolute; right: -40px; bottom: -50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.ms-diff-eyebrow { position: relative; font-family:var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); margin-bottom: var(--sp2); }
.ms-diff-amount { position: relative; font-family: var(--font-mono); font-size: clamp(1.9rem,4vw,2.5rem); font-weight: 700; color: #fff; line-height: 1; margin-bottom: var(--sp2); font-variant-numeric: tabular-nums; }
.ms-diff-sub { position: relative; font-size: var(--text-sm); color: rgba(255,255,255,.8); }
.ms-chart-area { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp6); margin-bottom: var(--sp4); box-shadow: none; }
.ms-insight { display: flex; align-items: flex-start; gap: var(--sp4); padding: var(--sp5) var(--sp6); background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; }
.ms-insight-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.ms-insight strong { color: var(--text); }

/* ─── MODULE CARDS ───────────────────────────── */
.module-grid { display:flex; flex-direction:column; margin-bottom:var(--sp16); border-top:1px solid var(--divider); }
.module-card {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--divider);
  padding: var(--sp6) var(--sp2);
  position: relative; cursor: pointer;
  display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: var(--sp5);
  transition: background var(--transition); box-shadow: none;
}
.module-card::before, .module-card::after { content: none; }
.module-card:hover { box-shadow: none; transform: none; background: var(--surface-2); }
.module-card-head { display: contents; }
.module-card-num { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 4px; }
.module-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: color-mix(in oklch, var(--accent-line, var(--primary)) 12%, transparent); color: var(--accent-line, var(--primary)); flex-shrink: 0; margin-bottom: 0; }
.module-card-icon svg { width: 20px; height: 20px; }
.module-card-body { min-width: 0; }
.module-card-title { font-size: var(--text-base); font-weight: 700; color: var(--text); margin-bottom: 3px; }
.module-card-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin-bottom: 0; }
.module-card-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0; padding-top: 0; margin-bottom: 0; border-top: none; flex-shrink: 0; }
.module-card-stat-num { font-family: var(--font-mono); font-weight: 800; font-size: var(--text-base); color: var(--accent-line, var(--primary)); line-height:1; }
.module-card-stat-label { font-size: 10.5px; color: var(--text-faint); line-height:1.3; max-width: 120px; }
.module-card-cta { font-size: var(--text-xs); font-weight: 700; color: var(--accent-line, var(--primary)); display: flex; align-items: center; gap: var(--sp1); flex-shrink: 0; transition: transform var(--transition); }
.module-card:hover .module-card-cta { transform: translateX(3px); }
@media(max-width:640px){
  .module-card { grid-template-columns: 36px 1fr auto; gap: var(--sp3); }
  .module-card-stat { display: none; }
}

/* ─── FOOTER ─────────────────────────────────── */
/* Torn-paper strip, same technique as .hero-receipt-edge — a small callback
   so the page footer reads as "torn off the bottom of the receipt" rather
   than a plain rule, echoing the hero's tactile paper feel. */
.footer-tear {
  height: 12px; margin-top: var(--sp20);
  background: var(--divider);
  background-image: linear-gradient(135deg, transparent 49%, var(--bg) 51%);
  background-size: 14px 14px; background-repeat: repeat-x;
}
footer { border-top:none; margin-top:0; padding:var(--sp10) var(--sp6); text-align:center; font-size:var(--text-xs); color:var(--text-faint); }
footer strong { color:var(--primary); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp4); align-items: center; }
.footer-links { display: flex; gap: var(--sp6); flex-wrap: wrap; justify-content: center; }
.footer-link { font-size: var(--text-xs); color: var(--text-faint); text-decoration: none; transition: color var(--transition); }
.footer-link:hover { color: var(--primary); }

/* ─── TOAST ──────────────────────────────────── */
.toast-stack { position:fixed; bottom:var(--sp6); right:var(--sp6); z-index:9999; display:flex; flex-direction:column; gap:var(--sp2); }
.toast { background:var(--text); color:var(--bg); padding:var(--sp3) var(--sp5); border-radius:var(--radius); font-size:var(--text-sm); font-weight:600; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:var(--sp3); animation: slideR var(--t-spring); max-width:280px; pointer-events:none; }
.toast.ok { background:var(--primary); color:#fff; }
.toast.fail { background:var(--danger); color:#fff; }
.toast.leaving { animation: slideOutR 0.32s var(--ease-smooth) forwards; }
@keyframes slideR { from{opacity:0;transform:translateX(32px) scale(.92)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes slideOutR { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(32px) scale(.92)} }

/* ─── SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--divider); }
::-webkit-scrollbar-thumb { background:var(--text-faint); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ─── BUDGET CALCULATOR ─────────────────────── */
#budget-split-total.over-100 { color: var(--danger); font-weight: 700; }
#budget-split-total.under-100 { color: var(--gold); font-weight: 700; }
#budget-income-wrap.field-error { border-color: var(--danger); background: var(--danger-light); }
.metric-value.warn { color: var(--gold); }

/* Budget content is taller than other calculators — let the card grow to fit
   instead of clipping via the shared 480px min-height + overflow:hidden rule. */
#panel-budget .calc-card { overflow: visible; }

/* Rebalance columns: give the results panel more breathing room and let
   height be driven by content rather than a fixed min-height. */
#panel-budget .calc-body {
  min-height: 0;
  align-items: start;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp2);
}
#panel-budget .calc-inputs,
#panel-budget .calc-output {
  overflow: visible;
}
#panel-budget .calc-inputs {
  padding: var(--sp7) var(--sp7) var(--sp8);
}
#panel-budget .calc-output {
  padding: var(--sp7) var(--sp8) var(--sp8);
  gap: var(--sp5);
}

/* Fix number-input right padding so trailing digits (esp. zeros) never
   look clipped against the field edge. Applies to every input inside
   the budget panel for consistent sizing/alignment. */
#panel-budget .ms-input-wrap {
  height: 46px;
  min-width: 0;
}
#panel-budget .ms-input {
  padding: 12px var(--sp5) 12px var(--sp3);
  min-width: 0;
  font-size: var(--text-base);
}
#panel-budget input[type="number"]::-webkit-outer-spin-button,
#panel-budget input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#panel-budget input[type="number"] {
  -moz-appearance: textfield;
}
#panel-budget .ms-prefix {
  padding: 0 var(--sp4) 0 var(--sp4);
}

/* Consistent field rhythm */
#panel-budget .field { margin-bottom: var(--sp6); }
#panel-budget .ms-three-col { gap: var(--sp4); }
#panel-budget .ms-field { gap: var(--sp2); min-width: 0; }
#panel-budget .ms-label { white-space: nowrap; }

/* Results panel: long value strings (e.g. "£1,234 / £987 / £654") need to
   wrap safely now that metrics render as full-width ledger rows. */
#panel-budget .result-hero {
  padding: var(--sp7);
}
#panel-budget .result-hero-label {
  position: relative;
  z-index: 1;
  padding-left: 2px;
  overflow: visible;
  white-space: normal;
}
#panel-budget .result-hero-value {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, var(--text-2xl));
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
#panel-budget .result-hero-chips {
  gap: var(--sp3);
}
#panel-budget .chart-wrap {
  height: 260px;
}
#panel-budget .insight-box {
  line-height: 1.7;
}

@media (max-width: 1024px) {
  #panel-budget .calc-body { grid-template-columns: 1fr; }
  #panel-budget .calc-inputs { border-right: none; border-bottom: 1px solid var(--divider); }
}
@media (max-width: 640px) {
  #panel-budget .calc-body { grid-template-columns: 1fr; }
  #panel-budget .calc-inputs,
  #panel-budget .calc-output { padding: var(--sp6) var(--sp5); }
  #panel-budget .chart-wrap { height: 220px; }
  #panel-budget .ms-three-col { grid-template-columns: 1fr; }
}

/* ─── CURRENCY SELECT ────────────────────────── */
.currency-select {
  height: 36px; padding: 0 26px 0 var(--sp3);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted);
  font-size: var(--text-xs); font-weight: 700;
  outline: none; cursor: pointer; appearance: none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6a66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition: border-color var(--transition), color var(--transition);
}
.currency-select:hover { border-color: var(--text-faint); color: var(--text); }
.currency-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.currency-select-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.currency-info-btn {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 11px; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--surface);
  transition: border-color var(--transition), color var(--transition);
}
.currency-info-btn:hover, .currency-info-btn:focus-visible { color: var(--text); border-color: var(--text-faint); outline: none; }
.currency-info-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 260;
  width: 200px; padding: var(--sp3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted); font-weight: 500;
}
.currency-info-tip[hidden] { display: none; }
.currency-info-tip strong { color: var(--text); }
@media (max-width: 640px) {
  .currency-info-tip { right: -20px; width: 190px; }
}

/* ─── SETTINGS MENU (burger: currency, theme) ─── */
.settings-menu-wrap { position: relative; }
.settings-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 250;
  width: 228px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp2); display: flex; flex-direction: column; gap: 2px;
  animation: dropdownIn var(--t-spring);
  transform-origin: top right;
}
.settings-menu[hidden] { display: none; }
.settings-menu-section {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp2);
  padding: var(--sp2) var(--sp3);
}
.settings-menu-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: 0;
}
.settings-menu-section .currency-select-wrap { width: auto; flex-shrink: 0; }
.settings-menu-section .currency-select {
  width: auto; flex: none; height: 30px;
  padding: 0 22px 0 10px; font-size: 11px;
}
.settings-menu-divider { height: 1px; background: var(--divider); margin: var(--sp1) var(--sp1); }

/* ─── SAVE / SHARE + THEME ITEMS (inside settings menu) ─── */
.save-menu-item {
  display: flex; align-items: center; gap: var(--sp3);
  width: 100%; padding: var(--sp3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  text-align: left; transition: background var(--transition);
}
.save-menu-item svg { color: var(--primary); flex-shrink: 0; }
.save-menu-item:hover, .save-menu-item:focus-visible { background: var(--primary-light); outline: none; }
@media (max-width: 480px) {
  .settings-menu { width: 210px; }
}

/* ─── FULL BREAKDOWN — nav progress badge ─────
   Replaces the old settings-menu "Download PDF" item. Mirrors the same
   completion count as the pdf-breakdown-card on every calculator, so
   progress is visible without scrolling to one. ───────────────────── */
.pdf-progress-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px; border-radius: 99px;
  font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all var(--transition);
}
.pdf-progress-badge:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pdf-progress-badge.is-ready { color: var(--primary); background: var(--primary-light); border-color: var(--primary-light); }
.pdf-progress-badge-ring { flex-shrink: 0; color: currentColor; }
.pdf-progress-badge-ring-fill { transition: stroke-dasharray var(--transition); }
@media (max-width: 640px) { .pdf-progress-badge { display: none; } }

/* ─── FULL BREAKDOWN CARD — bottom of every calculator ─────
   Identical card on all 5 calculator panels, driven by shared state in
   script.js (see "FULL BREAKDOWN" section) so progress and the checklist
   stay in sync wherever the visitor is on the site. */
.pdf-breakdown-card { margin-top: var(--sp8); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pdf-breakdown-top { padding: var(--sp6); }
.pdf-breakdown-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp4); margin-bottom: var(--sp3); }
.pdf-breakdown-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.pdf-breakdown-title { font-size: var(--text-base); font-weight: 800; color: var(--text); }
.pdf-breakdown-dots { display: flex; gap: 6px; flex-shrink: 0; padding-top: 3px; }
.pdf-breakdown-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background var(--transition); }
.pdf-breakdown-dot.done { background: var(--primary); }
.pdf-breakdown-progress-track { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: var(--sp4); }
.pdf-breakdown-progress-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width var(--transition); }
.pdf-breakdown-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp5); flex-wrap: wrap; }
.pdf-breakdown-foot p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 56ch; }
.btn-breakdown {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--sp2);
  padding: 12px 20px; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 700;
  color: #fff; border: none; background: var(--primary); box-shadow: 0 4px 16px var(--primary-glow);
  white-space: nowrap; cursor: pointer; transition: all var(--transition);
}
.btn-breakdown:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-breakdown[disabled] { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border); box-shadow: none; cursor: not-allowed; transform: none; }

.pdf-breakdown-success { display: flex; align-items: center; gap: var(--sp4); }
.pdf-breakdown-success-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pdf-breakdown-success-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); margin: 0 0 2px; color: var(--text); display: block; }
.pdf-breakdown-success-sub { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.pdf-breakdown-success-sub strong { color: var(--text); }

.pdf-breakdown-expand[hidden] { display: none; }
.pdf-breakdown-expand { border-top: 1.5px dashed var(--border); padding: var(--sp5) var(--sp6) var(--sp6); background: var(--surface-2); }
.pdf-check-list { display: flex; flex-direction: column; margin-bottom: var(--sp4); }
.pdf-check-item {
  display: flex; align-items: center; gap: var(--sp4); padding: var(--sp3) 2px;
  border-bottom: 1px solid var(--divider); width: 100%; text-align: left;
  background: none; border-left: none; border-right: none; border-top: none; cursor: pointer;
}
.pdf-check-item:last-child { border-bottom: none; }
.pdf-check-item:hover, .pdf-check-item:focus-visible { background: color-mix(in oklch, var(--primary) 6%, transparent); outline: none; }
.pdf-check-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--surface);
}
.pdf-check-item.done .pdf-check-num { background: var(--primary); border-color: var(--primary); }
.pdf-check-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdf-check-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.pdf-check-status { font-size: var(--text-xs); margin-top: 1px; font-weight: 600; }
.pdf-check-status.done { color: var(--primary); }
.pdf-breakdown-locked-note { text-align: center; font-size: var(--text-xs); color: var(--text-faint); margin: 0; line-height: 1.5; }

@media (max-width: 640px) {
  .pdf-breakdown-foot { flex-direction: column; align-items: stretch; }
  .btn-breakdown { width: 100%; justify-content: center; }
}

/* ─── NET WORTH TRACKER ──────────────────────── */
.nw-col-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: var(--sp4); }
.nw-list { display: flex; flex-direction: column; gap: var(--sp3); margin-bottom: var(--sp4); }
.nw-row { display: flex; align-items: center; gap: var(--sp2); animation: nwRowIn 0.32s var(--ease-out-expo); transform-origin: top; }
.nw-row.leaving { animation: nwRowOut 0.2s var(--ease-smooth) forwards; pointer-events: none; }
@keyframes nwRowIn  { from{opacity:0; transform:translateY(-8px) scaleY(.9);} to{opacity:1; transform:translateY(0) scaleY(1);} }
@keyframes nwRowOut { from{opacity:1; transform:translateX(0) scale(1);} to{opacity:0; transform:translateX(16px) scale(.94);} }
.nw-label-input {
  flex: 1.2; min-width: 0; padding: 12px var(--sp3);
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.nw-label-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.nw-row .ms-input-wrap { flex: 1; min-width: 0; }
.nw-row .ms-input { text-align: right; }
.nw-remove-btn {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 1.1rem; line-height: 1;
  transition: all var(--transition);
}
.nw-remove-btn:hover { background: var(--danger-light); color: var(--danger); }
.nw-bar-track { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--divider); margin: var(--sp5) 0; }
.nw-bar-fill { height: 100%; transition: width 0.6s cubic-bezier(.4,0,.2,1); }
.nw-bar-fill.assets { background: var(--primary); }
.nw-bar-fill.liabilities { background: var(--danger); }
#nw-result-hero.negative { background: linear-gradient(135deg, var(--danger) 0%, color-mix(in oklch, var(--danger) 60%, #000) 100%); }
#panel-networth .calc-body { grid-template-columns: 1fr 1fr; }
#panel-networth .calc-inputs:first-child { border-right: 1px solid var(--divider); }
@media (max-width: 768px) {
  #panel-networth .calc-body { grid-template-columns: 1fr; }
  #panel-networth .calc-inputs:first-child { border-right: none; border-bottom: 1px solid var(--divider); }
}

/* ─── RESPONSIVE ─────────────────────────────── */
@media(max-width:640px){
  :root { --bottom-nav-h: 60px; }
  .nav-links { display:none; }
  /* Hamburger stays hidden on mobile: the bottom nav's "More" button already
     opens this same drawer, so keeping both was a third, redundant entry
     point into identical navigation. */
  .bottom-nav { display:flex; }
  .hero-headline { font-size:clamp(2.3rem,9vw,3.75rem); }
  .calc-body { grid-template-columns:1fr; }
  .toast-stack { bottom: calc(var(--bottom-nav-h) + var(--sp4)); }
  .currency-select { height:32px; padding:0 24px 0 var(--sp2); font-size:11px; }
}

/* ═══════════════════════════════════════════════════════════
   ENGAGEMENT LAYER
   Ambient motion, scroll reveals, and micro-interactions layered
   on top of the existing design — nothing above is modified.
   The global prefers-reduced-motion rule earlier in this file
   already collapses every animation/transition duration site-wide;
   the JS side (bottom of script.js) additionally skips continuous
   per-frame effects (tilt, parallax) under that same setting since
   a duration override alone can't stop those.
═══════════════════════════════════════════════════════════ */

/* ─── AMBIENT BACKGROUND DRIFT ─────────────────────────────────
   Softness comes from the gradients' own wide falloff, not a
   `filter: blur()` — blurring a viewport-sized fixed layer is
   expensive to recomposite every animation frame (especially on
   software-rendering fallback paths), so the radii below are tuned
   to look soft on their own instead. ────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in oklch, var(--primary) 13%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 85% 12%, color-mix(in oklch, var(--gold) 11%, transparent) 0%, transparent 28%),
    radial-gradient(circle at 78% 85%, color-mix(in oklch, var(--primary) 10%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 18% 92%, color-mix(in oklch, var(--gold) 9%, transparent) 0%, transparent 26%);
  opacity: .7;
  animation: ambientDrift 40s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-1.5%, 1.5%, 0); }
  100% { transform: translate3d(1.5%, -1%, 0); }
}

/* ─── FLOATING DECORATIVE BLOBS (injected by script.js) ────────
   Small, lightly-blurred, and purely CSS-animated (no scroll-driven
   JS moving them) — kept cheap so they don't add per-frame work on
   top of the page's existing scroll-linked effects. ───────────── */
.hero, .small-changes-section { position: relative; isolation: isolate; }
.float-blob-wrap { position: absolute; z-index: -1; pointer-events: none; }
.float-blob-wrap--a { width: 180px; height: 180px; top: 6%;  left: -3%; }
.float-blob-wrap--b { width: 140px; height: 140px; top: 55%; right: -2%; }
.float-blob-wrap--c { width: 110px; height: 110px; bottom: 8%; left: 24%; }
.float-blob {
  display: block; width: 100%; height: 100%;
  opacity: .55;
  animation: floatDrift 14s ease-in-out infinite alternate;
}
/* Soft edges come from the gradient's own falloff rather than a
   `filter: blur()` — see the ambient-background note above for why
   that matters here. */
.float-blob--a { background: radial-gradient(circle, color-mix(in oklch, var(--primary) 55%, transparent) 0%, transparent 70%); }
.float-blob--b { background: radial-gradient(circle, color-mix(in oklch, var(--gold) 55%, transparent) 0%, transparent 70%); animation-duration: 17s; animation-delay: -4s; }
.float-blob--c { background: radial-gradient(circle, color-mix(in oklch, var(--primary) 45%, transparent) 0%, transparent 70%); animation-duration: 12s; animation-delay: -7s; }
@keyframes floatDrift {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(12px,-16px); }
  100% { transform: translate(-8px,8px); }
}

/* ─── SCROLL REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── HERO ENTRANCE (first paint) ─────────────────────────────
   .hero-receipt-shell deliberately uses fill-mode "backwards" only
   (not "forwards") — once the intro animation finishes, control
   must revert to the normal cascade so the mousemove tilt effect's
   inline transform (below) can take over the same property. ──── */
body.intro-ready .hero-headline      { animation: introUp .85s var(--ease-out-expo) both; }
body.intro-ready .hero-sub           { animation: introUp .85s var(--ease-out-expo) .10s both; }
body.intro-ready .hero-cta-row       { animation: introUp .85s var(--ease-out-expo) .20s both; }
body.intro-ready .hero-receipt-shell { animation: introReceipt 1s var(--ease-spring) .22s backwards; }
@keyframes introUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes introReceipt {
  from { opacity: 0; transform: translateY(30px) rotate(-5deg) scale(.94); }
  to   { opacity: 1; transform: translateY(0) rotate(-1.1deg) scale(1); }
}

/* ─── TILT-READY SURFACES ─────────────────────────────────────
   Only the transition + perspective plumbing lives here; the
   inline `transform` itself is written by the JS mousemove handler
   so it can respond continuously, not on a fixed CSS timing curve. */
.hero-receipt-col   { perspective: 1000px; }
.hero-receipt-shell { transition: transform .2s var(--ease-out-expo); }
.module-card        { transition: background var(--transition), transform .2s var(--ease-out-expo); }

/* ─── HERO RECEIPT LIVE-DRAG GLOW ─────────────────────────────
   Brief highlight while the slider is actively being dragged, so
   the "receipt reprices itself" moment reads as more tactile. ─── */
.hero-receipt { transition: box-shadow .25s ease; }
.hero-receipt.is-live { box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 25%, transparent), var(--shadow-lg); }

/* ─── NAV SCROLL DEPTH ────────────────────────────────────────── */
.nav { transition: box-shadow var(--t-base); }
.nav.is-scrolled { box-shadow: var(--shadow-sm); }

/* ─── BUTTON MICRO-INTERACTIONS ───────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn-primary::after, .product-cta-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 40%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out-expo);
  pointer-events: none;
}
.btn-primary:hover::after, .product-cta-btn:hover::after { transform: translateX(120%); }
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: btnRippleOut .55s var(--ease-out-expo) forwards;
  pointer-events: none;
}
.btn-ghost .btn-ripple { background: color-mix(in oklch, var(--primary) 30%, transparent); }
@keyframes btnRippleOut { to { transform: scale(1); opacity: 0; } }

/* ─── PRODUCT CTA — "The PayslipMindset System"
   Deliberately gold rather than the site's green: green already means
   "free tool, try it" everywhere else (buttons, module cards, the hero
   CTAs); gold is the site's existing premium/insight signal (5 Wealth
   Principles, quiz score), so reusing it here reads as "paid, upgraded
   tier" without introducing a new brand color. Three sizes share that
   same gold language: a compact nav pill (always-visible, desktop),
   a full-width drawer button (mobile), and a large standalone promo
   card on the homepage. All three carry the `.btn` class for the
   shared ripple-on-click behavior defined above. ───────────────── */

/* Compact nav pill — persistent, deliberately understated so it reads
   as "also available here," not a banner competing with the page. */
.nav-cta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; margin-right: var(--sp1);
  border-radius: 99px;
  font-size: 13px; font-weight: 700;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, var(--gold) 0%, color-mix(in oklch, var(--gold) 62%, #000) 100%);
  box-shadow: 0 3px 12px color-mix(in oklch, var(--gold) 35%, transparent);
  transition: transform var(--t-spring), box-shadow var(--t-base), filter var(--t-fast);
}
.nav-cta-btn svg { flex-shrink: 0; transition: transform var(--t-fast); }
.nav-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in oklch, var(--gold) 42%, transparent); filter: brightness(1.05); }
.nav-cta-btn:hover svg { transform: translateX(2px); }
.nav-cta-btn:active { transform: translateY(0) scale(.96); }
@media (max-width: 900px) { .nav-cta-btn { padding: 9px 13px; font-size: 12.5px; } }
@media (max-width: 640px) { .nav-cta-btn { display: none; } } /* the drawer CTA below takes over on mobile */

/* Mobile drawer — full-width, first thing seen when the menu opens. */
.drawer-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: var(--sp7); padding: 14px 20px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-weight: 700;
  color: #fff; text-decoration: none; text-align: center;
  background: linear-gradient(135deg, var(--gold) 0%, color-mix(in oklch, var(--gold) 62%, #000) 100%);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--gold) 35%, transparent);
}
.drawer-cta-btn svg { flex-shrink: 0; transition: transform var(--t-fast); }
.drawer-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in oklch, var(--gold) 42%, transparent); }
.drawer-cta-btn:hover svg { transform: translateX(2px); }
.drawer-cta-btn:active { transform: scale(.97); }

/* Homepage promo — the full pitch, placed right after the "£842,000+"
   compound-effect band so it lands as "now here's how you actually do
   this," not a cold ad dropped at random. */
.product-cta { max-width: 1200px; margin: 0 auto var(--sp20); padding: 0 var(--sp6); }
.product-cta-inner {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 760px; margin: 0 auto; text-align: center;
  padding: clamp(var(--sp10),6vw,var(--sp14)) clamp(var(--sp6),5vw,var(--sp12));
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--gold-light) 0%, var(--surface) 68%);
  border: 1.5px solid color-mix(in oklch, var(--gold) 30%, var(--border));
  box-shadow: var(--shadow-lg);
}
.product-cta-inner::before {
  content: ''; position: absolute; z-index: -1; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: color-mix(in oklch, var(--gold) 16%, transparent);
}
.product-cta-inner::after {
  content: ''; position: absolute; z-index: -1; left: -50px; bottom: -70px;
  width: 180px; height: 180px; border-radius: 50%;
  background: color-mix(in oklch, var(--primary) 10%, transparent);
}
.product-cta-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); background: color-mix(in oklch, var(--gold) 16%, transparent);
  padding: 6px 14px; border-radius: 99px; margin-bottom: var(--sp5);
}
.product-cta-title {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-2xl); color: var(--text); margin-bottom: var(--sp4); line-height: 1.15;
}
.product-cta-desc {
  font-size: var(--text-base); color: var(--text-muted);
  line-height: 1.7; max-width: 56ch; margin: 0 auto var(--sp7);
}
.product-cta-desc strong { color: var(--text); }
.product-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 34px; border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 700;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--gold) 0%, color-mix(in oklch, var(--gold) 58%, #000) 100%);
  box-shadow: 0 6px 22px color-mix(in oklch, var(--gold) 40%, transparent);
  transition: transform var(--t-spring), box-shadow var(--t-base), filter var(--t-fast);
}
.product-cta-btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 30px color-mix(in oklch, var(--gold) 46%, transparent); filter: brightness(1.04); }
.product-cta-btn:active { transform: translateY(0) scale(.97); }
.product-cta-btn svg { flex-shrink: 0; transition: transform var(--t-fast); }
.product-cta-btn:hover svg { transform: translateX(3px); }
.product-cta-note { margin-top: var(--sp4); font-size: var(--text-xs); color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  body::before, .float-blob { animation: none; }
  .reveal { opacity: 1; transform: none; }
  body.intro-ready .hero-headline,
  body.intro-ready .hero-sub,
  body.intro-ready .hero-cta-row,
  body.intro-ready .hero-receipt-shell { animation: none; }
}

/* ═══ START-HERE CONVERSION PATH ═══════════════════════════════
   One obvious route: Start here → 4 free stages → The System.
   The green "Start here" button leads everywhere; the paid System
   is the gold finish line rather than a competing first ask. */

/* Nav: green Start here leads, paid System is a quiet text link */
.nav-sys-link {
  font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none;
  border-bottom: 1px dashed var(--border); margin-right: var(--sp2); white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-sys-link:hover { color: var(--gold); border-color: var(--gold); }
.nav-start-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; margin-right: var(--sp1); border-radius: 99px;
  font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  background: var(--primary); box-shadow: 0 3px 12px var(--primary-glow);
  transition: transform var(--t-spring), box-shadow var(--t-base), background var(--t-fast);
}
.nav-start-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 8px 20px var(--primary-glow); }
.nav-start-btn svg { flex-shrink: 0; transition: transform var(--t-fast); }
.nav-start-btn:hover svg { transform: translateX(2px); }
@media (max-width: 900px) { .nav-sys-link { display: none; } }
@media (max-width: 640px) { .nav-start-btn { padding: 8px 12px; font-size: 12.5px; } }
@media (max-width: 380px) { .nav-start-btn svg { display: none; } }

.drawer-start-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-bottom: var(--sp7); padding: 14px 20px; border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-weight: 700; color: #fff;
  background: var(--primary); box-shadow: 0 4px 16px var(--primary-glow);
}
.drawer-sys-link {
  display: block; margin-bottom: var(--sp3); font-weight: 700; color: var(--gold); text-decoration: none;
}

/* Hero: one primary action that names the exact first step */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp5);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-light); padding: 6px 14px; border-radius: 99px;
}
.hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.hero-cta-row { flex-direction: column; align-items: flex-start; gap: var(--sp3); }
.btn-start { padding: 16px 26px; font-size: var(--text-base); }
.hero-cta-meta { font-size: var(--text-xs); color: var(--text-faint); }
.hero-cta-alt { font-size: var(--text-sm); color: var(--text-muted); }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--primary); font-weight: 600; border-bottom: 1px solid currentColor;
}

/* (rail + path styles: see "COMPACT PATH CARD" below) */

/* Next-step bars on every module: progress + clear handoff */
.next-step { background: var(--primary-light); border: 1.5px solid color-mix(in oklch, var(--primary) 30%, var(--border)); }
.next-step-label { color: var(--primary); }
.next-step-dots { display: flex; gap: 4px; margin-top: var(--sp2); max-width: 200px; }
.next-step-dots i { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in oklch, var(--text-faint) 35%, transparent); }
.next-step-dots i.on { background: var(--primary); }

/* Quiz results: the finish line */
.quiz-finish {
  max-width: 560px; margin: 0 auto var(--sp8); padding: var(--sp7) var(--sp6); text-align: center;
  background: linear-gradient(160deg, var(--gold-light) 0%, var(--surface) 70%);
  border: 1.5px solid var(--gold); border-radius: var(--radius-xl); box-shadow: var(--shadow);
}
.quiz-finish-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp3); }
.quiz-finish-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--text); line-height: 1.15; margin-bottom: var(--sp3); }
.quiz-finish-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.65; margin: 0 auto var(--sp5); max-width: 46ch; }
/* Once every free step is done the nav button itself becomes "The System" */
.path-complete .nav-sys-link { display: none; }

/* ─── CONTACT (bottom of every page) ─────────── */
.contact { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp6); }
.contact-card {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp10); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp8) var(--sp10); box-shadow: var(--shadow);
}
.contact-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-xl); line-height: 1.1; color: var(--text); margin-bottom: var(--sp3); }
.contact-title em { color: var(--primary); }
.contact-desc { font-size: var(--text-sm); color: var(--text-muted); max-width: 48ch; }
.contact-topics { display: flex; flex-wrap: wrap; gap: var(--sp2); margin: var(--sp4) 0 0; padding: 0; list-style: none; }
.contact-topics li {
  font-size: var(--text-xs); font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--divider); border-radius: 99px; padding: 5px 12px;
}
.contact-email-box {
  background: var(--primary-light); border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  border-radius: var(--radius-lg); padding: var(--sp6);
}
.contact-email-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.contact-email-addr {
  display: block; margin: var(--sp2) 0 var(--sp4); font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px); color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
.contact-email-addr:hover { color: var(--primary); }
.contact-actions { display: flex; gap: var(--sp3); flex-wrap: wrap; }
.contact-small-print { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; margin-top: var(--sp4); }
@media (max-width: 820px) {
  .contact-card { grid-template-columns: 1fr; gap: var(--sp6); padding: var(--sp6) var(--sp5); }
  .contact-actions .btn { flex: 1; justify-content: center; }
}
.footer-contact { font-size: var(--text-xs); color: var(--text-faint); }
.footer-email { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border); transition: color var(--transition), border-color var(--transition); }
.footer-email:hover { color: var(--primary); border-color: var(--primary); }

/* ═══ TIGHTER HOMEPAGE ════════════════════════════════════════
   Rail + 7-step path merged into one card; compound effect shows
   3 swaps (+3 behind "See all 6") and 3 fact tiles; slim about strip. */

/* COMPACT PATH CARD */
.path-card-wrap { max-width: 1200px; margin: 0 auto var(--sp12); padding: 0 var(--sp6); }
.path-card {
  padding: var(--sp6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.path-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp3); flex-wrap: wrap; margin-bottom: var(--sp5); }
.path-card-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-xl); line-height: 1.1; color: var(--text); }
.path-card-title em { color: var(--primary); }
.path-card-meta { font-size: var(--text-xs); color: var(--text-muted); }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap: var(--sp3); }
.path-card .path-stage {
  border: 1px solid var(--divider); background: var(--surface-2); border-radius: var(--radius);
  padding: var(--sp4); transition: border-color var(--t-base), box-shadow var(--t-base);
}
.path-card .path-stage.current { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
.path-stage-head { display: flex; align-items: center; gap: var(--sp2); font-size: var(--text-sm); font-weight: 700; color: var(--text); margin-bottom: var(--sp2); }
.path-stage-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--text-muted); background: var(--surface);
}
/* Stage circles have no number: blank, green ring on the current stage, green tick once complete */
.path-card .path-stage.current .path-stage-dot { border-color: var(--primary); border-width: 2px; }
.path-stage-time { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.path-card .path-steps { display: grid; gap: 2px; }
.path-card .path-step {
  display: flex; align-items: center; gap: var(--sp2); width: 100%;
  padding: 6px 8px; border: none; border-radius: var(--radius-sm); background: none;
  font-size: var(--text-xs); font-weight: 600; color: var(--text); text-align: left;
}
.path-card .path-step:hover { background: var(--primary-light); }
.path-card .path-step-num { width: auto; height: auto; border: none; background: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-faint); }
.path-card .path-step-num { width: 18px; flex-shrink: 0; text-align: center; }
/* Done step: its number becomes a green tick circle */
.path-card .path-step.done .path-step-num {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 0;
}
.path-card .path-step.done .path-step-num::after { content: '✓'; font-size: 10.5px; line-height: 1; }
/* Finished stage: its number becomes a tick too */
.path-card .path-stage.complete .path-stage-dot { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-size: 0; }
.path-card .path-stage.complete .path-stage-dot::after { content: '✓'; font-size: 13px; line-height: 1; }
/* One-line explanation under the single-step stages */
.path-stage-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; margin: var(--sp2) 8px 0; }
.path-card .path-step-title { flex: 1; min-width: 0; font-size: var(--text-xs); }
.path-card .path-step-go { display: none; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.path-card .path-step.next { background: var(--primary-light); color: var(--primary); }
.path-card .path-step.next .path-step-go { display: inline; }
.path-card .path-finish {
  display: flex; flex-direction: column; gap: var(--sp2); padding: var(--sp4);
  border: 1.5px solid var(--gold); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--gold-light), var(--surface) 80%);
}
.path-finish-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.path-finish-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); line-height: 1.3; }
.path-finish-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.path-card .path-finish .product-cta-btn { margin-top: auto; justify-content: center; padding: 10px 14px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
@media (max-width: 1000px) {
  .path-grid { grid-template-columns: 1fr 1fr; }
  .path-card .path-finish { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .path-card { padding: var(--sp5) var(--sp4); }
  .path-grid { grid-template-columns: 1fr; }
}

/* COMPOUND EFFECT: 3 swap cards side by side, 3 more behind "See all 6" */
.sc-changes-grid.sc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); border-top: none; }
.sc-grid-3 .sc-change-card {
  grid-template-columns: 34px 1fr; row-gap: var(--sp4); align-items: start; height: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp5);
}
.sc-grid-3 .sc-change-result, .sc-grid-3 .sc-compare { grid-column: 1 / -1; text-align: left; }
.sc-grid-3 .sc-change-card-wrap:hover .sc-change-card { background: rgba(255,255,255,.09); }
@media (max-width: 900px) { .sc-changes-grid.sc-grid-3 { grid-template-columns: 1fr; } }
.sc-more { margin-top: var(--sp3); }
.sc-more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp2);
  font-size: var(--text-sm); font-weight: 700; color: #a8e6c4; padding: var(--sp2) 0;
}
.sc-more summary::-webkit-details-marker { display: none; }
.sc-more summary::before {
  content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: 14px; line-height: 1;
}
.sc-more[open] summary::before { content: '–'; }
.sc-more .sc-changes-grid { margin-top: var(--sp2); }
.sc-more .sc-more-label-open { display: none; }
.sc-more[open] .sc-more-label-open { display: inline; }
.sc-more[open] .sc-more-label-closed { display: none; }
/* Fact tiles replace the long "why the numbers feel impossible" block */
.sc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); margin-top: var(--sp8); }
.sc-facts .sc-truth-stat-num { color: #a8e6c4; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-xl); min-width: 2.6ch; }
@media (max-width: 900px) { .sc-facts { grid-template-columns: 1fr; } }

/* SLIM ABOUT STRIP */
.about-strip {
  display: flex; align-items: center; gap: var(--sp4); margin-bottom: var(--sp10);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp4) var(--sp5);
}
.about-strip .author-avatar { width: 44px; height: 44px; font-size: 18px; flex-shrink: 0; }
.about-strip p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; margin: 0; }
.about-strip strong { color: var(--text); }

/* ─── LEARN → GUIDES (numbered, with subtitles and "Try it" links) ── */
.guide-intro { display: flex; justify-content: space-between; align-items: center; gap: var(--sp3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--sp3); }
.guide-intro strong { color: var(--text); }
.guide-taxyear { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--primary); background: var(--primary-light); padding: 4px 10px; border-radius: 99px; }
.guide-item summary { gap: var(--sp4); }
.guide-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; background: var(--primary-light); color: var(--primary);
}
.guide-head { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guide-title { line-height: 1.3; }
.guide-sub { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.guide-body { padding-left: calc(var(--sp6) + 32px + var(--sp4)); }
.guide-body h4 { font-size: var(--text-sm); font-weight: 700; color: var(--text); margin: var(--sp5) 0 var(--sp2); }
.guide-body h4:first-child { margin-top: 0; }
.guide-body strong { color: var(--text); }
.guide-body ol { margin: var(--sp3) 0 var(--sp3) var(--sp5); }
.guide-callout { background: var(--surface-2); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--sp3) var(--sp4); margin: var(--sp4) 0; }
.guide-callout b { color: var(--text); }
.guide-callout-faith { border-left: 3px solid var(--primary); }
.guide-body .guide-ladder { list-style: none; counter-reset: ladder; margin: var(--sp2) 0 var(--sp4); padding: 0; }
.guide-ladder li { counter-increment: ladder; display: flex; gap: var(--sp3); align-items: flex-start; margin-bottom: var(--sp2); }
.guide-ladder li::before {
  content: counter(ladder); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 3px;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--primary); color: #fff;
}
.guide-try {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp3); flex-wrap: wrap;
  margin-top: var(--sp5); padding: var(--sp3) var(--sp4); border-radius: var(--radius); background: var(--primary-light);
}
.guide-try-links { display: flex; gap: var(--sp4); flex-wrap: wrap; }
.guide-try-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--primary); white-space: nowrap; }
.guide-try-link:hover { text-decoration: underline; }
.guide-source { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--sp4); }
@media (max-width: 640px) {
  .guide-item summary { padding: var(--sp4); gap: var(--sp3); }
  .guide-num { width: 28px; height: 28px; font-size: 12px; }
  .guide-body { padding: 0 var(--sp4) var(--sp5); }
}
/* Contact now lives only on the homepage, above the methodology bar */
#panel-home .contact { margin-bottom: var(--sp12); }

/* ─── PRINCIPLES: "Go deeper" link beside "Show example" ── */
.principle-foot { display: flex; align-items: center; gap: var(--sp5); flex-wrap: wrap; margin-top: var(--sp3); }
.principle-foot .principle-toggle { margin-top: 0; }
.principle-deeper {
  display: inline-flex; align-items: center; gap: var(--sp2);
  background: none; border: none; border-left: 1px solid var(--divider); padding: 0 0 0 var(--sp5);
  font: inherit; font-size: var(--text-xs); cursor: pointer; color: var(--text-muted);
}
.principle-deeper-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--divider); border-radius: 5px; padding: 1px 6px;
}
.principle-deeper-label { font-weight: 700; color: var(--text); }
.principle-deeper:hover .principle-deeper-label { color: var(--primary); text-decoration: underline; }
#learn-guides .guide-item { scroll-margin-top: 90px; }
@media (max-width: 560px) { .principle-deeper { border-left: none; padding-left: 0; } }

/* ─── HERO MINI PAYSLIP (built on the receipt styles) ── */
.hero-payslip-take { font-size: 15px; }
.hero-payslip-take .k { color: var(--text); font-weight: 700; }
.hero-payslip-split { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin: var(--sp2) 0 var(--sp2); }
.hero-payslip-split span { display: block; }
.hero-payslip-split .needs, .hero-payslip-key.needs { background: var(--text-faint); }
.hero-payslip-split .wants, .hero-payslip-key.wants { background: var(--gold); }
.hero-payslip-split .future, .hero-payslip-key.future { background: var(--primary); }
.hero-payslip-split .needs { flex: 50; } .hero-payslip-split .wants { flex: 30; } .hero-payslip-split .future { flex: 20; }
.hero-receipt-row .k { display: inline-flex; align-items: center; gap: 8px; }
.hero-payslip-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.hero-payslip-pct { font-size: 11px; color: var(--text-faint); }
.hero-payslip-total { flex-wrap: wrap; row-gap: 4px; }
.hero-payslip-paidin { flex-basis: 100%; font-size: 11.5px; color: var(--text-muted); }
/* Tablet widths (641–820px): the full nav doesn't fit beside the Start
   button, so drop the progress badge (already hidden on phones) and
   tighten the links. */
@media (max-width: 820px) {
  .pdf-progress-badge { display: none; }
  .nav-links { gap: 0; }
}
/* The decorative float blobs can poke past the right edge; clip them so the
   page never scrolls sideways (clip, not hidden, keeps the sticky nav working). */
html { overflow-x: clip; }
/* Let the hero columns shrink below their content width on phones, so the
   payslip fits the screen instead of pushing past the right edge. */
.hero-grid > * { min-width: 0; }
.hero-receipt-control label { gap: var(--sp3); }

/* ─── JUMP TO WHAT YOU NEED (under the path card) ── */
.jump-row { margin-top: var(--sp6); }
.jump-head { display: flex; align-items: baseline; gap: var(--sp3); flex-wrap: wrap; margin-bottom: var(--sp3); }
.jump-heading { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.jump-intro { font-size: var(--text-xs); color: var(--text-muted); }
.jump-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
.jump-card {
  display: flex; flex-direction: column; gap: var(--sp3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp4) var(--sp5); transition: border-color var(--transition);
}
.jump-card:hover { border-color: var(--primary); }
.jump-top { display: flex; align-items: center; gap: var(--sp3); }
.jump-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; background: var(--primary-light); color: var(--primary); }
.jump-icon svg { width: 19px; height: 19px; }
.jump-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); line-height: 1.25; }
.jump-sub { font-size: var(--text-xs); color: var(--text-muted); margin: 1px 0 0; }
.jump-links { list-style: none; margin: 0; padding: var(--sp2) 0 0; border-top: 1px dashed var(--border); display: grid; gap: 2px; }
.jump-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); width: 100%;
  padding: 6px 8px; border: none; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--text); text-align: left;
}
.jump-link:hover { background: var(--primary-light); color: var(--primary); }
.jump-tag {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--divider); border-radius: 5px; padding: 1px 6px;
}
@media (max-width: 1000px) { .jump-grid { grid-template-columns: 1fr; } }

/* ─── FUTURE-YOU SECTION (payslip framing of the compound effect) ── */
.sc-outcome-figure { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--sp2); margin-bottom: var(--sp3); }
.sc-outcome-figure .sc-outcome-number { margin-bottom: 0; }
.sc-outcome-unit { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: rgba(242,246,243,.75); }
@media (max-width: 900px) { .sc-outcome-figure { justify-content: flex-start; } }
.sc-change-per { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.sc-change-result-period strong { color: #a8e6c4; font-family: var(--font-mono); }
.sc-footnote { margin-top: var(--sp5); font-size: var(--text-xs); color: var(--text-faint); }