/* ============================================================
   SavingsLast — visual identity
   ------------------------------------------------------------
   Direction: "Ledger". A reference publication, not an app.
   A transitional serif carries headings, the wordmark and the
   one number that matters; body copy stays on the system stack
   so the page renders instantly whether or not the font arrives.

   The rule that shapes the palette: BRAND COLOUR AND SEMANTIC
   COLOUR ARE NEVER THE SAME COLOUR. Petrol is the brand and
   means nothing about your result. Green, amber and red mean
   only one thing each, and are used nowhere else.
   ============================================================ */

:root{
  /* surfaces — warm-neutral paper, biased very slightly toward the brand */
  --paper:#fbfaf8;
  --surface:#ffffff;
  --sunken:#f3f2ef;
  --rule:#e3e1db;
  --rule-soft:#eeece7;

  /* text */
  --ink:#17212a;
  --ink-2:#55616e;

  /* brand — deep petrol. Authoritative without being bank-navy,
     and deliberately not money-green. */
  --brand:#0e3a4a;
  --brand-hover:#0a2c38;
  --brand-tint:#e7eef1;
  --on-brand:#fbfaf8;

  /* semantics — reserved exclusively for what your result means */
  --good:#146b47;      --good-bg:#e4f1ea;
  --caution:#8a5608;   --caution-bg:#f8eeda;
  --risk:#a32820;      --risk-bg:#fbeae8;

  /* logo */
  --mark-tile:#0e3a4a;
  --mark-line:#fbfaf8;
  --mark-base:#87a5b2;
  --mark-dot:#d9a13a;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:64rem;
  --shadow:0 1px 2px rgba(23,33,42,.05),0 10px 28px -18px rgba(23,33,42,.3);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12161a;
    --surface:#191e24;
    --sunken:#1e242b;
    --rule:#2a313a;
    --rule-soft:#232a32;

    --ink:#e7e9ec;
    --ink-2:#9aa4af;

    --brand:#74b6cc;
    --brand-hover:#9bcfe0;
    --brand-tint:#152a33;
    --on-brand:#0b1216;

    --good:#63ce9c;      --good-bg:#12291f;
    --caution:#e2ab55;   --caution-bg:#2c2113;
    --risk:#f19189;      --risk-bg:#2e1815;

    --mark-tile:#17546b;
    --mark-line:#f2f7f9;
    --mark-base:#74a0b1;
    --mark-dot:#e0a94a;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#12161a; --surface:#191e24; --sunken:#1e242b; --rule:#2a313a; --rule-soft:#232a32;
  --ink:#e7e9ec; --ink-2:#9aa4af;
  --brand:#74b6cc; --brand-hover:#9bcfe0; --brand-tint:#152a33; --on-brand:#0b1216;
  --good:#63ce9c; --good-bg:#12291f;
  --caution:#e2ab55; --caution-bg:#2c2113;
  --risk:#f19189; --risk-bg:#2e1815;
  --mark-tile:#17546b; --mark-line:#f2f7f9; --mark-base:#74a0b1; --mark-dot:#e0a94a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}

/* 17px base. The audience is 55-70; this is the highest-return
   change on the site and it costs nothing. */
body{
  margin:0;
  font:18px/1.62 var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* A masthead rule, the way printed matter has one — and it runs out
   into gold at the right-hand end, the same event the mark draws. */
body::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--brand) 0 94%,var(--mark-dot) 94% 100%);
}

a{color:var(--brand)}
a:hover{color:var(--brand-hover)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

header,main,footer{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ---------------- masthead ---------------- */
header{
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--rule);
}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mark{display:block;flex:none;width:30px;height:30px}
/* "Savings" light, "Last" bold — the name is a claim, so let it read as one. */
.logo .word{font-family:var(--display);font-size:1.32rem;font-weight:500;letter-spacing:-.012em;line-height:1}
.logo .word b{font-weight:700}
header nav{display:flex;flex-wrap:wrap;gap:4px 18px}
header nav a{
  position:relative;font-size:.92rem;text-decoration:none;color:var(--ink-2);
  padding:5px 0;
}
header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .16s ease;
}
header nav a:hover{color:var(--brand)}
header nav a:hover::after{transform:scaleX(1)}

/* theme toggle: shows the icon for the mode you would switch TO */
.theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--rule);border-radius:9px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.theme:hover{color:var(--brand);border-color:var(--brand)}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .sun{display:none}
.theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .sun{display:block}
  :root:not([data-theme="light"]) .theme .moon{display:none}
}

/* On a phone the masthead wrapped to three rows — logo, nav over two lines,
   then the theme button stranded on its own. Pin the button beside the logo and
   give the nav the whole second row. */
@media (max-width:640px){
  header{padding:12px 20px 10px;gap:8px 14px}
  .logo{order:1}
  .theme{order:2;margin-left:auto}
  header nav{order:3;flex-basis:100%;gap:2px 15px}
  header nav a{font-size:.84rem}
}

/* ---------------- breadcrumb ---------------- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:.82rem;color:var(--ink-2);margin:20px 0 -14px;
}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--brand);text-decoration:underline}
.crumb i{font-style:normal;opacity:.45}
.crumb b{font-weight:400;color:var(--ink)}

/* ---------------- type ---------------- */
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.95rem,1.5rem + 1.7vw,2.6rem);line-height:1.12;font-weight:600;margin:30px 0 10px}
h2{font-size:clamp(1.32rem,1.2rem + .55vw,1.6rem);line-height:1.2;font-weight:600;margin:2.4rem 0 .6rem}
h3{font-size:1.16rem;font-weight:600;margin:1.8rem 0 .4rem}
p{margin:0 0 1rem}
main > p,main > section > p{max-width:68ch}
.lead{color:var(--ink-2);font-size:1.14rem;line-height:1.55;margin-top:0;max-width:62ch}
main ul,main ol{max-width:66ch}
main li{margin-bottom:.4rem}

/* ---------------- calculator ---------------- */
/* Two panels, not one box. Inputs sit on the sunken surface with the fields
   lifted off it; the answer sits on the raised surface. The eye separates
   "where I type" from "what it says" before reading a word of either. */
.calc{
  display:grid;grid-template-columns:1fr;
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  margin:26px 0;box-shadow:var(--shadow);overflow:hidden;
}
.calc-in{background:var(--sunken);padding:18px 22px 24px;border-bottom:1px solid var(--rule)}
.calc-out{padding:18px 22px 26px;min-width:0}
@media (min-width:900px){
  .calc{grid-template-columns:minmax(290px,33%) 1fr}
  .calc-in{border-bottom:0;border-right:1px solid var(--rule)}
  /* one field per row once the panel is narrow */
  .calc-in .grid{grid-template-columns:1fr}
}
/* Panel eyebrow: names the zone, carries the brand tick, and gives Reset a home. */
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--rule);
}
.panel-head span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
}
.panel-head span::before{
  content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:none;
}
.reset{
  font:inherit;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--ink-2);background:none;border:0;border-radius:6px;
  padding:5px 7px;margin:-5px -7px;cursor:pointer;
}
.reset:hover{color:var(--brand)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:15px;align-items:end}
label{display:block;font-size:1rem;color:var(--ink-2);margin-bottom:6px;line-height:1.3}
label .hint{opacity:.72;font-size:.8rem;white-space:nowrap;display:inline-block}
input.bad{outline:2px solid var(--caution);border-color:transparent}
/* The field is the lightest thing in the panel and it carries a real border.
   A hairline box on a matching fill is the single loudest wireframe tell. */
input{
  width:100%;padding:13px 14px;border:1.5px solid var(--rule);border-radius:10px;
  font-size:1.08rem;font-family:var(--sans);font-variant-numeric:tabular-nums;
  background:var(--surface);color:var(--ink);
}
input:hover{border-color:var(--ink-2)}
input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}

.result{margin:0}

/* The one number the whole site exists to produce. Serif, and
   coloured by what it MEANS — never by the brand. */
.headline{
  font-family:var(--display);font-size:clamp(1.6rem,1.25rem + 1.35vw,2.15rem);
  font-weight:500;line-height:1.2;
  padding:19px 22px;border-radius:12px;margin:0 0 16px;
  background:var(--sunken);color:var(--ink);border-left:5px solid var(--ink-2);
}
.headline strong{font-weight:700}
.result.good    .headline{background:var(--good-bg);   color:var(--good);   border-left-color:var(--good)}
.result.caution .headline{background:var(--caution-bg);color:var(--caution);border-left-color:var(--caution)}
.result.risk    .headline{background:var(--risk-bg);   color:var(--risk);   border-left-color:var(--risk)}

/* A strip of figures separated by hairlines, not three boxed cards — the boxes
   were what made the result card read as a wireframe. */
/* Caveat under a result -- quieter than the headline, but not hidden: it fires
   when the answer is sitting on the break-even line and a one-point change in an
   assumption flips it. */
.note{
  font-size:.9rem;color:var(--ink-2);
  border-left:2px solid var(--caution);
  padding:2px 0 2px 12px;margin:14px 0 0
}
.mini-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin:18px 0 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* Each cell is a column with the label pushed to fill the space above, so the
   figures share a baseline even when one label wraps to two lines and the
   others do not — "Claim at 67 (full retirement age)" against "Claim at 70". */
.mini-table div{
  padding:12px 16px 12px 0;margin-right:16px;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;
}
.mini-table div span{flex:1 0 auto}
.mini-table div:last-child{border-right:0;margin-right:0}
.mini-table span{display:block;font-size:.8rem;color:var(--ink-2);margin-bottom:3px}
.mini-table strong{font-size:1.52rem;font-weight:600;font-family:var(--display);letter-spacing:-.01em}
.mini-table span{font-size:.84rem}

/* Quiet link under the answer, where the sceptical reader looks for it. */
.how{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.88rem;color:var(--brand);text-decoration:none;margin-top:16px;
}
.how:hover{text-decoration:underline}
.how::before{
  content:"";width:14px;height:14px;border-radius:50%;flex:none;
  border:1.5px solid currentColor;
}

/* ---------------- chart ---------------- */
.fig{margin:20px 0 0}
.fig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.84rem;color:var(--ink-2);margin:0 0 8px}
.fig figcaption span:first-child{font-weight:600;color:var(--ink)}
.fig-note{font-size:.78rem}
.chart{width:100%;height:auto;display:block;touch-action:pan-y}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .tick{font-size:12px;fill:var(--ink-2);font-family:var(--sans);font-variant-numeric:tabular-nums}
.chart .line{fill:none;stroke:var(--brand);stroke-width:2.9;stroke-linejoin:round;stroke-linecap:round}
.chart .g0{stop-color:var(--brand);stop-opacity:.34}
.chart .g1{stop-color:var(--brand);stop-opacity:0}
.chart .area{fill:url(#sl-area)}
.chart .end{fill:var(--brand);stroke:var(--surface);stroke-width:2.5}
.result.good    .chart .end{fill:var(--good)}
.result.caution .chart .end{fill:var(--caution)}
.result.risk    .chart .end{fill:var(--risk)}
.chart .anno{font-size:12.5px;font-weight:600;fill:var(--ink);font-family:var(--sans);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.chart .hov-line{stroke:var(--ink-2);stroke-width:1}
.chart .hov-dot{fill:var(--brand);stroke:var(--surface);stroke-width:2.5}
.chart .tip rect{fill:var(--ink)}
.chart .tip-v{font-size:13px;font-weight:700;fill:var(--paper);font-family:var(--sans);font-variant-numeric:tabular-nums}
.chart .tip-l{font-size:11px;fill:var(--paper);opacity:.78;font-family:var(--sans)}
.chart .hit{fill:transparent;cursor:crosshair}

/* ---------------- tables ---------------- */
/* The wrapper owns the frame so a wide table can scroll inside it without the
   page body ever scrolling sideways. build.js adds .wide above three columns. */
.tablewrap{margin:1.1rem 0;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.tablewrap.wide{overflow-x:auto}
.tablewrap.wide table{min-width:34rem}
table{
  width:100%;border-collapse:collapse;margin:0;font-size:.98rem;
  font-variant-numeric:tabular-nums;
}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule-soft);text-align:right}
th:first-child,td:first-child{text-align:left}
tbody tr:last-child td{border-bottom:0}
thead th{background:var(--sunken);font-weight:600;font-size:.86rem;letter-spacing:.02em;color:var(--ink-2)}
tbody th{background:var(--sunken);font-weight:600;text-align:left}

/* ---------------- affiliate + ads ---------------- */
.cta{
  border:1px solid var(--rule);border-top:3px solid var(--brand);background:var(--surface);
  border-radius:12px;padding:20px 22px;margin:28px 0;box-shadow:var(--shadow);
}
.cta h3{margin:0 0 6px;font-size:1.14rem}
.cta p{margin:0 0 12px;color:var(--ink-2)}
.btn{
  display:inline-block;background:var(--brand);color:var(--on-brand)!important;
  padding:11px 18px;border-radius:9px;text-decoration:none;font-weight:600;font-size:1rem;
}
.btn:hover{background:var(--brand-hover)}
.ad{min-height:90px;margin:24px 0;display:flex;align-items:center;justify-content:center}

/* ---------------- browse chips ---------------- */
/* Dense, scannable, tappable. Used where the label IS the whole content —
   a dollar amount, an age, a state — so a card grid would be mostly padding. */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 6px}
.chips a{
  display:inline-block;padding:9px 15px;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);color:var(--ink);text-decoration:none;font-size:.97rem;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.chips a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.chips.compact a{padding:7px 12px;font-size:.92rem}
.browse{margin:30px 0 34px;padding:22px 24px;background:var(--sunken);border:1px solid var(--rule);border-radius:14px}
.browse h2{margin-top:0;font-size:1.24rem}
.browse h2 + p{margin-bottom:0}
.browse h2:not(:first-child){margin-top:1.9rem}
.browse .chips a{background:var(--surface)}

/* ---------------- faq / related ---------------- */
.faq details{border-bottom:1px solid var(--rule);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.02rem}
.faq summary:hover{color:var(--brand)}
.faq details p{margin:.6rem 0 0;color:var(--ink-2)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:16px 0}
.related a{
  display:block;padding:13px 15px;border:1px solid var(--rule);border-radius:10px;
  text-decoration:none;font-size:.98rem;background:var(--surface);color:var(--ink);
}
.related a:hover{border-color:var(--brand);color:var(--brand)}

/* ---------------- footer + fine print ---------------- */
footer{
  border-top:1px solid var(--rule);margin-top:52px;padding:28px 20px 40px;
  font-size:.88rem;color:var(--ink-2);
}
footer a{color:var(--ink-2);margin-right:16px}
footer a:hover{color:var(--brand)}
.muted{color:var(--ink-2)}
.disc{
  font-size:.88rem;color:var(--ink-2);border-left:3px solid var(--rule);
  padding-left:14px;margin:26px 0;
}

@media(max-width:600px){
  body{font-size:16.5px}
  header{padding:14px 16px}
  header,main,footer{padding-left:16px;padding-right:16px}
  .logo .word{font-size:1.2rem}
  .logo .mark{width:27px;height:27px}
  .headline{font-size:1.3rem;padding:13px 15px}
  .mini-table div{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--rule)}
  .mini-table div:last-child{border-bottom:0}
  /* the SVG scales to ~55% on a phone; scale its type back up so it stays legible */
  .chart .tick{font-size:19px}
  .chart .anno{font-size:20px;stroke-width:6px}
  .chart .tip-v{font-size:21px}
  .chart .tip-l{font-size:17px}
  .chart .end,.chart .hov-dot{r:7}
  .calc{padding:17px;border-radius:12px}
  table{font-size:.92rem}
  th,td{padding:8px 9px}
}

/* ---------------- guides index ---------------- */
.guidelist{display:grid;gap:12px;margin:22px 0}
.guidelist a{
  display:block;padding:18px 20px;border:1px solid var(--rule);border-radius:13px;
  background:var(--surface);text-decoration:none;box-shadow:var(--shadow);
}
.guidelist a:hover{border-color:var(--brand)}
.guidelist strong{
  display:block;font-family:var(--display);font-size:1.22rem;font-weight:600;
  color:var(--ink);letter-spacing:-.012em;margin-bottom:5px;
}
.guidelist span{display:block;color:var(--ink-2);font-size:.95rem;line-height:1.5}

/* ---------------- design reference (/design/, noindex) ---------------- */
.toks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:12px 0 26px}
.tok{display:flex;align-items:center;gap:10px;font-size:.85rem;min-width:0}
.tok code{font-size:.8rem;color:var(--ink)}
.chip{
  width:30px;height:30px;border-radius:7px;flex:none;
  border:1px solid var(--rule);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)
}
.tokval{color:var(--ink-2);font-size:.78rem;margin-left:auto;text-align:right;white-space:nowrap}
.rule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:16px 0 8px}
.rule-card{background:var(--sunken);border:1px solid var(--rule-soft);border-radius:12px;padding:16px 18px}
.rule-card h3{margin:0 0 .4rem;font-size:1rem}
.rule-card p{margin:0;font-size:.9rem;color:var(--ink-2)}
.sem{font-weight:600}
.sem.good{color:var(--good)} .sem.caution{color:var(--caution)} .sem.risk{color:var(--risk)}
.type-demo,.mark-demo{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:22px;margin:16px 0}
.mark-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;align-items:start}
.mark-demo .logo{pointer-events:none}