@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('fonts/inter-tight-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ==========================================================================
   Coast FIRE Calculator — visual layer
   Palette: near-black ink, one green accent, hairline borders, low shadows.
   Type scale: 56 / 34 / 22 / 18 / 15 / 13 / 12, line-height 1.05–1.7
   ========================================================================== */
:root{
  --ink:#0a1f3d;
  --muted:#0a1f3d;
  --faint:#0a1f3d;
  --line:#E7E2D8;
  --sand:#E8E2D6;
  --sand-soft:#F1EDE4;
  --line-soft:#F0ECE3;
  --surface:#F5F2EB;
  --white:#fff;
  --green:#157a4d;
  --green-dark:#0f5c3a;
  --green-soft:#E7F1EA;
  --red:#b42318;
  --red-soft:#fdf2f1;
  --amber:#946200;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --shadow-sm:0 1px 2px rgba(13,21,18,.05);
  --shadow:0 1px 3px rgba(13,21,18,.04), 0 10px 30px -18px rgba(13,21,18,.18);
  --shadow-lg:0 30px 70px -40px rgba(13,21,18,.35);
  --maxw:1280px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --display:'Inter Tight','Inter',-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.58;font-feature-settings:'cv11' 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
::selection{background:var(--green-soft);color:var(--green-dark)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0 0 .48em;letter-spacing:-.022em;font-weight:680}
h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.028em;line-height:1.06}
h2{font-size:clamp(26px,3.2vw,36px);margin-top:2.6em}
h3{font-size:20px;letter-spacing:-.01em;margin-top:1.8em}
p{margin:0 0 1.15em;max-width:46em}
.sub{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--muted);max-width:36em;letter-spacing:-.005em}
a{color:var(--green);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
a:hover{border-bottom-color:currentColor}
.mono,.subline,.ends{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hint{font-size:14.5px;color:#0a1f3d;line-height:1.55}

/* ---------- top bar ---------- */
.site-header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.028em;color:var(--ink)}
.brand .dot{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--green),var(--green-dark));
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;letter-spacing:0;box-shadow:0 4px 12px -4px rgba(21,122,77,.55)}
.nav{display:flex;align-items:center;gap:8px;font-size:15.5px;color:var(--ink)}
.nav a,.nav .menu-btn{color:var(--ink);font-weight:500;border-bottom:0}
.nav a:hover{color:var(--green);border-bottom:0}
.nav-link{padding:8px 12px;border-radius:9px;transition:background .15s,color .15s}
.nav-link:hover{background:var(--surface)}
.menu{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  font:inherit;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:9px;
  transition:background .15s,color .15s}
.menu:hover .menu-btn,.menu:focus-within .menu-btn{background:var(--surface);color:var(--green)}
.caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5.5px solid currentColor;opacity:.5;transition:transform .16s}
.menu:hover .caret,.menu:focus-within .caret{transform:rotate(180deg);opacity:.9}
.menu-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 48px -20px rgba(13,21,18,.55),0 2px 6px rgba(13,21,18,.06);padding:8px;border-color:#dfe5e1;
  opacity:0;visibility:hidden;transition:opacity .14s,transform .14s;z-index:60}
.menu-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px}
.menu:hover .menu-panel,.menu:focus-within .menu-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu-panel a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;color:var(--ink);font-weight:500}
.menu-panel a:hover{background:var(--surface);color:var(--green)}
.nav .btn{flex:0 0 auto;max-width:none;overflow:visible;margin-left:8px}
@media(max-width:980px){
  .nav .menu,.nav .nav-link{display:none}
  .nav{gap:0}
  .brand{font-size:19px}
  .brand .dot{width:32px;height:32px;border-radius:9px}
}
@media(max-width:720px){
  .hero{padding:28px 0 4px}
  .calc{margin-top:20px}
  h1{letter-spacing:-.03em}
}

/* ---------- hero ---------- */
.hero{padding:40px 0 0}
.hero h1{max-width:15em}
.hero .sub{margin-top:10px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0;font-size:13px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:99px;padding:5px 12px;background:var(--white);box-shadow:var(--shadow-sm)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ---------- calculator shell ---------- */
.calc{
  display:grid;grid-template-columns:352px minmax(0,1fr);gap:0;
  margin:26px 0 0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;
}
.calc > form{padding:30px 28px;background:var(--surface);border-right:1px solid var(--line)}
.calc > div{padding:30px 32px;min-width:0}
@media(max-width:900px){
  .calc{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .calc > form{border-right:0;border-bottom:1px solid var(--line)}
  .calc > div{padding:26px 22px}
  .calc > form{padding:26px 22px}
}

/* ---------- form ---------- */
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);
  font-weight:700;margin-bottom:14px;padding:0}
.field{margin-bottom:16px}
.field label{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px;letter-spacing:-.005em}
.field .hint{margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=number],select{
  width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:16px;font-variant-numeric:tabular-nums;background:var(--white);
  color:var(--ink);transition:border-color .15s, box-shadow .15s, background .15s;
  appearance:none;
}
select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235c6862' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
input[type=number]:hover, select:hover{border-color:#cfd7d2}
input[type=number]:focus, select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(21,122,77,.14);background:var(--white)}
input[type=number]:disabled{background:var(--surface);color:var(--faint);cursor:not-allowed}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

details{border:1px solid var(--line);border-radius:var(--r);padding:0;margin-bottom:10px;background:var(--white);
  transition:border-color .15s, background .15s}
details:hover{border-color:#d5ddd8}
details[open]{background:var(--white);box-shadow:var(--shadow-sm)}
details summary{cursor:pointer;font-weight:600;font-size:14px;padding:13px 14px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;color:var(--ink)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--faint);font-size:17px;font-weight:400;line-height:1}
details[open] summary::after{content:"−"}
details[open] summary{padding-bottom:6px}
details > *:not(summary){padding:0 14px}
details > *:not(summary):last-child{padding-bottom:14px}
details p.hint{padding-top:0}

/* ---------- result card ---------- */
.card{border:0;border-radius:0;background:transparent;padding:0}
.verdict{font-size:clamp(21px,2.6vw,30px);font-weight:700;line-height:1.3;margin:0 0 10px;letter-spacing:-.02em}
.verdict.warn{color:var(--red)}
.verdict.ok{color:var(--green-dark)}
.subline{font-size:15.5px;color:#0a1f3d;line-height:1.62;margin:0 0 22px;max-width:52em}

.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:22px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 16px 18px;box-shadow:var(--shadow-sm);transition:border-color .15s, box-shadow .15s}
.stat:hover{border-color:#cfd7d2;box-shadow:var(--shadow)}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.015em;color:#0a1f3d;font-weight:700;line-height:1.3;white-space:nowrap}
.stat .v{font-size:23px;white-space:nowrap;font-weight:700;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.stat .n{font-size:13px;color:#0a1f3d;margin-top:6px;line-height:1.5}
@media(max-width:1100px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}

/* ---------- switcher ---------- */
.switch{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);margin-top:26px;overflow:hidden}
.tabs{display:flex;gap:6px;padding:8px;background:var(--surface);border-bottom:1px solid var(--line)}
.tabs button{
  flex:1;padding:10px 12px;border:0;border-radius:var(--r-sm);background:transparent;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--muted);
  transition:background .15s,color .15s,box-shadow .15s;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--white);color:var(--green-dark);box-shadow:var(--shadow-sm)}
.tabs button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.panel{padding:22px 22px 24px}
.panel[hidden]{display:none}
.panel label{font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--muted)}

input[type=range]{width:100%;accent-color:var(--green);margin:14px 0 8px;height:20px;cursor:pointer}
.ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint);letter-spacing:.02em}
.out{font-size:16px;margin-top:16px;line-height:1.6}
.out strong{font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- charts ---------- */
.chartbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:20px;margin-top:16px}
.chartbox h3{margin:0 0 4px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.chartbox .cap{font-size:12.5px;color:rgba(10,31,61,.66);margin:0 0 10px;line-height:1.5;max-width:none}
svg{display:block;width:100%;height:auto}
svg text{font-family:var(--font)}

/* ---------- sections ---------- */
section{margin-top:8px}
.note{background:var(--green-soft);border-left:3px solid var(--green);
  padding:18px 20px;border-radius:0 var(--r) var(--r) 0;font-size:15.5px;margin:26px 0;max-width:none}
.note p:last-child{margin-bottom:0}

table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
th,td{padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--green-soft);color:var(--green-dark);font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface)}

ul,ol{padding-left:1.3em;margin:0 0 1.1em;max-width:46em}
li{margin-bottom:.45em}
li::marker{color:var(--faint)}

/* ---------- faq ---------- */
.faq details{background:var(--white);margin-bottom:8px;border-radius:var(--r)}
.faq summary{font-size:16px;padding:16px 18px;font-weight:600}
.faq details > p{padding:0 18px 16px;margin:0;color:var(--muted);font-size:15.5px;max-width:none}

/* ---------- cta ---------- */
.cta-block{
  margin-top:56px;border-radius:var(--r-xl);padding:44px 40px;
  background:linear-gradient(160deg,#123f2b 0%,#0d2a1e 100%);
  color:#fff;position:relative;overflow:hidden;
}
.cta-block::after{
  content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(66,190,130,.28),transparent 65%);
}
.cta-block p{color:rgba(255,255,255,.78);max-width:44em}
.cta-block .hint{color:rgba(255,255,255,.55)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 14px;position:relative;z-index:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;
  border-radius:99px;border:1px solid transparent;font-weight:650;font-size:16px;
  text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;
  white-space:nowrap;border-bottom:0;
}
.btn:hover{border-bottom:0;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 8px 20px -10px rgba(21,122,77,.7)}
.btn.primary:hover{background:var(--green-dark)}
.btn.ghost{background:var(--white);color:var(--green-dark);border-color:var(--line)}
.btn.ghost:hover{border-color:#cfd7d2;background:var(--white)}
.cta-block .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
.cta-block .btn.ghost:hover{background:rgba(255,255,255,.18)}
.cta-block .btn.primary{background:var(--white);color:var(--green-dark);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.cta-block .btn.primary:hover{background:#f2f7f4}

footer{border-top:1px solid var(--line);margin-top:0;padding:30px 0 70px;font-size:14px;color:var(--faint);background:var(--white)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .card, .switch, .chartbox{animation:fade .4s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}

/* chart + tooltip */
.chartbox{position:relative;padding:16px 18px 10px}
.chartbox svg{overflow:visible}
.tt{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
  background:#0d1512;color:#fff;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.6;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.45);min-width:170px;z-index:5;
  font-variant-numeric:tabular-nums;
}
.tt.on{opacity:1}
.tt .row{display:flex;justify-content:space-between;gap:16px}
.tt .row span:first-child{color:rgba(255,255,255,.62)}
.tt .age{font-weight:700;font-size:13px;margin-bottom:5px;color:#fff}
.tt .k{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* grouped field help */
.help{border:1px solid var(--line);border-radius:var(--r);background:var(--white);margin-top:6px}
.help summary{font-size:13.5px;padding:12px 14px}
.help dl{margin:0;padding:0 14px 14px}
.help dt{font-weight:650;font-size:13.5px;margin-top:11px;color:var(--ink)}
.help dd{margin:3px 0 0;font-size:13.5px;color:#0a1f3d;line-height:1.58}

/* ── paper texture + downhill motif ───────────────────────────── */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(45deg,rgba(10,31,61,.026) 0 1px,transparent 1px 9px);
}
.slope{position:absolute;top:0;left:0;width:100%;height:600px;z-index:0;pointer-events:none}
.slope path{fill:none;stroke-linecap:round}
.glow{position:absolute;top:-140px;left:-160px;width:720px;height:600px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(21,122,77,.085),rgba(21,122,77,0) 72%)}
.wrap,.site-header{position:relative;z-index:1}

/* ── stat card progress rail ──────────────────────────────────── */
.bar{height:5px;border-radius:99px;background:var(--sand-soft);margin:12px 0 0;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#178252,#1E9A63);
  transform-origin:left center;animation:railGrow .85s cubic-bezier(.2,.7,.3,1) both}
.bar.ghost i{background:repeating-linear-gradient(90deg,rgba(10,31,61,.11) 0 3px,transparent 3px 7px)}
@keyframes railGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.bar i{animation:none}}

/* ── first screen: tighter, H1 on one line ────────────────────── */
.hero{padding:26px 0 0}
h1{white-space:nowrap;max-width:none;font-size:clamp(26px,5.1vw,58px);line-height:1.06;letter-spacing:-.03em}
@media(max-width:520px){h1{white-space:normal;font-size:clamp(28px,8vw,44px)}}
.hero .sub{margin-top:10px}
.badges{margin:14px 0 0}
.calc{margin:16px 0 0}

/* paper base */
html,body{background:#FBFAF7}

@media(max-width:560px){
  .site-header .inner{height:64px;padding:0 16px}
  .brand{font-size:17px;gap:9px;white-space:nowrap}
  .brand .dot{width:30px;height:30px;border-radius:9px;font-size:11px}
  .nav .btn{height:36px;padding:0 14px;font-size:13.5px}
  .wrap{padding:0 18px}
}

/* ── hero verdict block (sits under the controls) ─────────────── */
.result-block{margin:36px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.hero-number{font-family:var(--display);font-size:clamp(46px,6vw,68px);font-weight:700;
  letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-label{font-size:14.5px;color:rgba(10,31,61,.58);margin-top:10px}
.hero-progress{font-size:15.5px;margin-top:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-progress b{color:var(--green);font-weight:650}
.hero-note{font-size:13.5px;line-height:1.55;margin-top:7px;color:rgba(10,31,61,.62);max-width:52ch}
.hero-note.warn{color:var(--red)}
.hero-note.ok{color:#0F5C3A}

/* ── chart legend ─────────────────────────────────────────────── */
.legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin:10px 2px 2px;font-size:12.5px;color:rgba(10,31,61,.72)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend .sw{width:22px;height:0;border-top-width:2.5px;border-top-style:solid;display:inline-block}
.legend .solid-green{border-top-color:#157a4d}
.legend .solid-grey{border-top-color:#9aa5a0}
.legend .dash-blue{border-top-style:dashed;border-top-color:#2f6fb3}
.legend .dash-red{border-top-style:dashed;border-top-color:#c0392b}
.panel-solo{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:2px 0 0}
.panel-solo label{display:block;font-weight:650;font-size:14.5px;margin:0 0 10px}

/* chart colour tokens (light defaults) */
:root{
  --c-grid:#eaeff0; --c-axis:#0a1f3d; --c-tick:#d7ddd9;
  --c-net:#157a4d; --c-contrib:#9aa5a0; --c-coast:#2f6fb3; --c-need:#c0392b;
  --c-hover:#0d1512; --c-cross-text:#0f5c3a; --c-cross-ring:#fff;
}
/* keep tooltip rows on one line */
.tt .row{white-space:nowrap}
.tt .row span:first-child{flex:0 0 auto}
.tt .row span:last-child{flex:0 0 auto;text-align:right}

/* centred result block, two summary cards */
.result-block{text-align:center}
.hero-note{margin-left:auto;margin-right:auto}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.stats{grid-template-columns:1fr}}