/* ============================================================
   SavingsLast — visual identity
   ------------------------------------------------------------
   Direction: "Horizon". How far your money reaches, drawn as a
   day across the page: a dawn sky at the top, nightfall in the
   footer, and a gold sun that sets at the age the money runs out.
   Fraunces in its soft cut carries headings, the wordmark and the
   one number that matters; Figtree carries everything else, with
   tabular figures wherever money lines up in a column.

   The rule that shapes the palette: BRAND COLOUR AND SEMANTIC
   COLOUR ARE NEVER THE SAME COLOUR. Plum 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 — a pale morning sky, lifted panels, a lilac sunken ground */
  --paper:#eef2f8;
  --surface:#ffffff;
  --sunken:#f4f1f6;
  --rule:#dcd6e4;
  --rule-soft:#ece8f1;

  /* text */
  --ink:#2a2340;
  --ink-2:#5a5371;

  /* brand — dusk plum. Warm, unlike any bank, and nowhere near money-green. */
  --brand:#6a3d66;
  --brand-hover:#572f54;
  --brand-tint:#f3e9f1;
  --on-brand:#ffffff;

  /* semantics — reserved exclusively for what your result means */
  --good:#1d6b47;      --good-bg:#e6f2eb;
  --caution:#8a5207;   --caution-bg:#fbeedd;
  --risk:#a5281f;      --risk-bg:#fbe9e7;

  /* the horizon — sky, sun, hills and night, drawn in the hero, the answer and the footer */
  --sun:#efa332;
  --sky-top:#d9e5f5;   --sky-low:#f9decb;
  --pic-top:#b9cfef;   --pic-low:#f7c49e;
  --hill-far:#c9b6cf;  --hill-mid:#9a7da2;  --hill-near:#5c4166;
  --night:#211b3a;     --on-night:#e9e4f4;

  /* logo */
  --mark-tile:#6a3d66;
  --mark-line:#ffffff;
  --mark-base:#d6b9d2;
  --mark-dot:#efa332;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:64rem;
  --shadow:0 1px 2px rgba(42,35,64,.06),0 18px 34px -22px rgba(42,35,64,.35);
  /* sequential ramp for magnitude (the state study map). One hue, light to
     dark. Labels on steps 0-2 use --ink, on 3-5 use --seq-lt; every pair
     clears 4.5:1. Magnitude only: never good or bad. */
  --seq0:#f3e6ef; --seq1:#ddbfd6; --seq2:#be93b6; --seq3:#8b5a87; --seq4:#633e63; --seq5:#33203a;
  --seq-dk:#2a2340; --seq-lt:#ffffff;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15122a;
    --surface:#1f1b38;
    --sunken:#1a1731;
    --rule:#352f55;
    --rule-soft:#29244a;

    --ink:#eeeaf6;
    --ink-2:#b1a9c9;

    --brand:#d7a4d1;
    --brand-hover:#e6bee1;
    --brand-tint:#2a2246;
    --on-brand:#1a1530;

    --good:#6fcb9d;      --good-bg:#15291f;
    --caution:#eab05e;   --caution-bg:#2e2213;
    --risk:#f2918a;      --risk-bg:#311915;

    --sun:#f2b34e;
    --sky-top:#1e2450;   --sky-low:#4a2c48;
    --pic-top:#121738;   --pic-low:#8a4566;
    --hill-far:#4e3c74;  --hill-mid:#6a5294;  --hill-near:#2e2249;
    --night:#0c0a1a;     --on-night:#d9d3ea;

    --mark-tile:#7a4a76;
    --mark-line:#ffffff;
    --mark-base:#b98fb4;
    --mark-dot:#f2b34e;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 34px -22px rgba(0,0,0,.8);
    --seq0:#382c60; --seq1:#4a3366; --seq2:#6e4c87; --seq3:#a57cb0; --seq4:#cfaed2; --seq5:#f1e3ef;
    --seq-dk:#eeeaf6; --seq-lt:#15122a;
  }
}
:root[data-theme="dark"]{
  --paper:#15122a; --surface:#1f1b38; --sunken:#1a1731; --rule:#352f55; --rule-soft:#29244a;
  --ink:#eeeaf6; --ink-2:#b1a9c9;
  --brand:#d7a4d1; --brand-hover:#e6bee1; --brand-tint:#2a2246; --on-brand:#1a1530;
  --good:#6fcb9d; --good-bg:#15291f;
  --caution:#eab05e; --caution-bg:#2e2213;
  --risk:#f2918a; --risk-bg:#311915;
  --sun:#f2b34e; --sky-top:#1e2450; --sky-low:#4a2c48; --pic-top:#121738; --pic-low:#8a4566;
  --hill-far:#4e3c74; --hill-mid:#6a5294; --hill-near:#2e2249; --night:#0c0a1a; --on-night:#d9d3ea;
  --mark-tile:#7a4a76; --mark-line:#ffffff; --mark-base:#b98fb4; --mark-dot:#f2b34e;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 34px -22px rgba(0,0,0,.8);
  --seq0:#382c60; --seq1:#4a3366; --seq2:#6e4c87; --seq3:#a57cb0; --seq4:#cfaed2; --seq5:#f1e3ef;
  --seq-dk:#eeeaf6; --seq-lt:#15122a;
}

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

/* 18px 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.65 var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* The masthead rule is the day the page draws: sky, then the warm horizon,
   then the sun, then dusk. */
body::before{
  content:"";display:block;height:5px;
  background:linear-gradient(90deg,var(--sky-top),var(--sky-low) 55%,var(--sun) 80%,var(--hill-near));
}

a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-hover)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--sun) 75%,transparent);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:18px 20px 12px;
}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mark{display:block;flex:none;width:32px;height:32px}
/* "Savings" regular, "Last" bold in plum — the name is a claim, so let it read as one. */
.logo .word{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.005em;line-height:1}
.logo .word b{font-weight:800;color:var(--brand)}
header nav{display:flex;flex-wrap:wrap;gap:4px 20px}
header nav a{
  position:relative;font-size:.98rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding:6px 0;
}
header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
  background:var(--sun);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:38px;height:38px;padding:0;border:1px solid var(--rule);border-radius:999px;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:14px 16px 8px;gap:8px 14px}
  .logo{order:1}
  .theme{order:2;margin-left:auto}
  /* The five items do not fit one row at a readable size: at 13px they still
     overflowed a 360px phone. They take two rows at 15px instead, each link a
     full-height tap target. */
  header nav{order:3;flex-basis:100%;gap:0 20px}
  header nav a{font-size:.95rem;white-space:nowrap;padding:8px 0}
}

/* ---------------- breadcrumb ---------------- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:.88rem;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:.55}
.crumb b{font-weight:500;color:var(--ink)}

/* ---------------- type ---------------- */
/* No negative tracking below the H1: at heading sizes it closes the word
   spaces, and "Not Tax" read as "NotTax". */
h1,h2,h3{font-family:var(--display);letter-spacing:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2rem,1.45rem + 1.8vw,2.75rem);line-height:1.1;font-weight:700;letter-spacing:-.008em;margin:30px 0 12px}
h2{font-size:clamp(1.38rem,1.22rem + .6vw,1.7rem);line-height:1.22;font-weight:650;margin:2.4rem 0 .6rem}
h3{font-size:1.2rem;line-height:1.3;font-weight:650;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.6;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-radius:24px;
  margin:26px 0;box-shadow:var(--shadow);overflow:hidden;
}
.calc-in{background:var(--sunken);padding:20px 22px 24px;border-bottom:1px solid var(--rule-soft)}
.calc-out{padding:20px 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-soft)}
  /* one field per row once the panel is narrow */
  .calc-in .grid{grid-template-columns:1fr}
}
/* Panel head: names the zone in the display face, with the sun as its marker,
   and gives Reset a home. A heading a reader can actually read, not 13px caps. */
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;
}
.panel-head span{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:1.15rem;font-weight:650;color:var(--ink);
}
.panel-head span::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--sun);flex:none;
}
.reset{
  font:inherit;font-size:.92rem;font-weight:600;
  color:var(--brand);background:none;border:0;border-radius:6px;
  padding:5px 7px;margin:-5px -7px;cursor:pointer;
}
.reset:hover{color:var(--brand-hover);text-decoration:underline}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:15px;align-items:end}
label{display:block;font-size:1rem;font-weight:500;color:var(--ink);margin-bottom:6px;line-height:1.3}
/* The range under a label is real information ("−10 to 20"); it was 14px at
   72% opacity. Full ink-2 and 15px. */
label .hint{color:var(--ink-2);font-weight:400;font-size:.84rem;white-space:nowrap;display:inline-block}
/* Period toggle. Monthly is the default because that is the unit people think
   in; yearly exists because every rule of thumb, RMD and tax bracket is annual,
   and a reader comparing our answer to a 4% rule article needs both. */
.lblrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.lblrow label{margin-bottom:0}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:2px;overflow:hidden;flex:none;background:var(--surface)}
.seg button{
  font:inherit;font-size:.8rem;font-weight:600;
  padding:4px 11px;border:0;border-radius:999px;background:none;color:var(--ink-2);cursor:pointer;
}
.seg button:hover{color:var(--brand)}
.seg button.on{background:var(--brand);color:var(--on-brand)}
/* The bridge between this calculator and every rule of thumb ever written:
   what the entered withdrawal actually is as a percentage of the balance. */
.rate{
  font-size:.95rem;color:var(--ink-2);margin:0 0 14px;
  padding:11px 15px;background:var(--sunken);border-radius:14px;
}
.rate b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rate a{color:var(--brand)}
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 15px;border:1.5px solid var(--rule);border-radius:14px;
  font-size:1.12rem;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:3px solid color-mix(in srgb,var(--sun) 70%,transparent);outline-offset:1px;border-color:var(--sun)}

.result{margin:0}

/* The one number the whole site exists to produce, set against the sky it is
   measured across, with the sun beside it. The figure is coloured by what it
   MEANS — never by the brand. */
.headline{
  position:relative;text-wrap:balance;
  font-family:var(--display);font-size:clamp(1.6rem,1.25rem + 1.3vw,2.2rem);
  font-weight:500;line-height:1.18;
  padding:18px 22px 18px 64px;border-radius:18px;margin:0 0 16px;
  background:linear-gradient(90deg,var(--sky-top),var(--sky-low));color:var(--ink);
}
.headline::before{
  content:"";position:absolute;left:20px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:var(--sun);box-shadow:0 0 0 7px color-mix(in srgb,var(--sun) 25%,transparent);
}
.headline strong{font-weight:700}
.result.good    .headline strong{color:var(--good)}
.result.caution .headline strong{color:var(--caution)}
.result.risk    .headline strong{color:var(--risk)}

/* 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:.92rem;color:var(--ink-2);
  border-left:3px solid var(--caution);
  padding:2px 0 2px 12px;margin:14px 0 0
}
/* The three "to last N years" figures, each on its own patch of the sunken
   ground. Smaller than the headline everywhere, phones included. */
.mini-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:20px 0 4px}
/* 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:14px 16px;border-radius:16px;background:var(--sunken);
  display:flex;flex-direction:column;
}
.mini-table div span{flex:1 0 auto}
.mini-table span{display:block;font-size:.86rem;color:var(--ink-2);margin-bottom:4px}
.mini-table strong{font-size:1.5rem;font-weight:650;font-family:var(--display)}

/* Quiet link under the answer, where the sceptical reader looks for it. The
   marker is the sun, filled: an empty ring read as an unticked option. */
.how{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.92rem;color:var(--brand);text-decoration:none;margin-top:16px;
}
.how:hover{text-decoration:underline}
.how::before{
  content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--sun);
}

/* ---------------- chart ---------------- */
.fig{margin:20px 0 0}
.fig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.88rem;color:var(--ink-2);margin:0 0 8px}
.fig figcaption span:first-child{font-weight:600;color:var(--ink)}
.fig-note{font-size:.82rem}
.chart{width:100%;height:auto;display:block;touch-action:pan-y}
.chart .grid{stroke:var(--rule-soft);stroke-width:1}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .tick{font-size:12.5px;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(--hill-mid);stop-opacity:.5}
.chart .g1{stop-color:var(--sky-low);stop-opacity:.2}
.chart .area{fill:url(#sl-area)}
.chart .end{fill:var(--sun);stroke:var(--surface);stroke-width:2.5}
.chart .anno{font-size:13px;font-weight:600;fill:var(--ink);font-family:var(--sans);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.chart .mark{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 4}
.chart .mark-l{font-size:12.5px;font-weight:600;fill:var(--ink-2);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. */
/* Code on the /ai/ page: a command to copy, a config to paste. Wraps rather than
   scrolls so a phone shows the whole thing. */
pre{margin:1rem 0;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--sunken);color:var(--ink);font-size:.88rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
p code,li code,td code{padding:1px 5px;border-radius:5px;background:var(--sunken)}
.tablewrap{margin:1.1rem 0;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--surface)}
.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:.9rem;color:var(--ink-2)}
tbody th{background:var(--sunken);font-weight:600;text-align:left}

/* ---------------- affiliate + ads ---------------- */
.cta{
  background:var(--surface);
  border-radius:20px;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:13px 24px;border-radius:999px;text-decoration:none;font-weight:700;font-size:1.02rem;
  box-shadow:0 10px 20px -12px color-mix(in srgb,var(--brand) 80%,transparent);
}
.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:10px 16px;border-radius:999px;
  background:var(--surface);color:var(--ink);text-decoration:none;font-size:1rem;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.2;box-shadow:inset 0 0 0 1px var(--rule),0 1px 0 var(--rule);
}
.chips a:hover{color:var(--brand);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand)}
.chips.compact a{padding:8px 13px;font-size:.95rem}
.browse{margin:30px 0 34px;padding:22px 24px;background:var(--sunken);border-radius:20px}
.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:14px 0}
/* The sun marks each question; the browser's black triangle looked unfinished. */
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:650;font-size:1.12rem;line-height:1.35;display:flex;align-items:baseline;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--sun);transform:translateY(-2px);transition:transform .16s ease}
.faq details[open] summary::before{background:var(--hill-mid)}
.faq summary:hover{color:var(--brand)}
.faq details p{margin:.6rem 0 0 22px;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:14px 16px;border-radius:14px;
  text-decoration:none;font-size:1rem;font-weight:500;background:var(--surface);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--rule);
}
.related a:hover{color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

/* ---------------- footer + fine print ---------------- */
/* Nightfall: the page that opened on a dawn sky closes on a night one. The band
   reaches the window edges the same way the hero's sky does. */
footer{
  margin-top:72px;padding:40px 20px 48px;
  font-size:.95rem;color:var(--on-night);background:var(--night);
  box-shadow:0 0 0 100vmax var(--night);clip-path:inset(0 -100vmax -100vmax);
}
/* Each link is its own tap target, 44px tall on a phone, with room between.
   They are written with no space between them, so the gap does the spacing. */
footer p:first-child{display:flex;flex-wrap:wrap;gap:2px 26px;margin-bottom:20px}
footer a{color:var(--on-night);display:inline-block;padding:9px 0;font-size:1rem;font-weight:500;text-decoration:none}
footer a:hover{color:var(--sun);text-decoration:underline}
footer p:last-child{color:color-mix(in srgb,var(--on-night) 82%,transparent);max-width:70ch}
.muted{color:var(--ink-2)}
.disc{
  font-size:.92rem;color:var(--ink-2);border-left:3px solid var(--hill-far);
  padding-left:14px;margin:26px 0;
}

@media(max-width:600px){
  body{font-size:17px}
  header,main,footer{padding-left:16px;padding-right:16px}
  .logo .word{font-size:1.32rem}
  .logo .mark{width:28px;height:28px}
  /* The answer stays the biggest thing in the result. It was 1.3rem here,
     smaller than the 1.52rem figures under it. */
  .headline{font-size:1.55rem;padding:15px 16px 15px 54px;border-radius:16px}
  .headline::before{left:16px;width:24px;height:24px;margin-top:-12px;box-shadow:0 0 0 6px color-mix(in srgb,var(--sun) 25%,transparent)}
  .mini-table strong{font-size:1.32rem}
  /* The SVG scales to ~55% on a phone; scale its type back up so it lands
     near 12px. Every other year label is dropped so "Age 65" and the next
     age cannot run together. */
  .chart .tick{font-size:22px}
  .chart .tick.y{font-size:19px}
  .chart .tick.alt{display:none}
  .chart .anno{font-size:23px;stroke-width:6px}
  .chart .mark-l{font-size:21px;stroke-width:6px}
  .chart .tip-v{font-size:23px}
  .chart .tip-l{font-size:19px}
  .chart .end,.chart .hov-dot{r:8}
  .calc{border-radius:20px}
  .calc-in,.calc-out{padding-left:16px;padding-right:16px}
  table{font-size:.94rem}
  th,td{padding:8px 9px}
}

/* What the calculator is applying for this account type. Sits above the
   fragility note because it explains the number rather than caveating it. */
.rules{
  font-size:.92rem;color:var(--ink-2);margin:0 0 14px;
  padding:11px 15px;border-left:3px solid var(--brand);
  background:var(--brand-tint);border-radius:0 14px 14px 0;
}
.rules b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
input:disabled{opacity:.55;cursor:not-allowed}

/* ---------------- byline ---------------- */
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:.92rem;color:var(--ink-2);margin:0 0 18px;
}
.byline a{color:var(--brand);text-decoration:none;font-weight:600}
.byline a:hover{text-decoration:underline}
.byline span{opacity:.45}
.byline em{font-style:normal}

/* ---------------- guide diagrams ---------------- */
/* Series colour follows the site rule: plum is identity and says nothing about
   the outcome, and the risk red appears only on a line that actually runs out of
   money — the same thing that colour means everywhere else. The third series is
   a trade-off rather than a bad outcome, so it stays neutral. */
.diagram{margin:26px 0;padding:18px 20px 14px;background:var(--surface);border-radius:20px;box-shadow:var(--shadow)}
.diagram figcaption{font-size:.9rem;font-weight:600;color:var(--ink);margin:0 0 10px}
.chart.diag{width:100%;height:auto;display:block}
.chart.diag .ln{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.chart.diag .ln.a,.chart.diag .dot.a{stroke:var(--brand)}
.chart.diag .ln.b,.chart.diag .dot.b{stroke:var(--risk)}
.chart.diag .ln.c,.chart.diag .dot.c{stroke:var(--ink-2);stroke-dasharray:5 4}
.chart.diag .dot{stroke-width:2.5}
.chart.diag .dot.a{fill:var(--brand)}
.chart.diag .dot.b{fill:var(--risk)}
.chart.diag .dot.c{fill:var(--ink-2);stroke-dasharray:none}
.chart.diag .lbl{font-size:12.5px;font-weight:600;font-family:var(--sans)}
.chart.diag .lbl.a{fill:var(--brand)}
.chart.diag .lbl.b{fill:var(--risk)}
.chart.diag .lbl.c{fill:var(--ink-2)}
.chart.diag .bar{fill:var(--rule)}
.chart.diag .bar.on{fill:var(--brand)}
.chart.diag .barval{font-size:12px;font-weight:600;fill:var(--ink-2);font-family:var(--sans);font-variant-numeric:tabular-nums}
.chart.diag .barval.on{fill:var(--brand)}
.dnote{font-size:.9rem;color:var(--ink-2);margin:12px 0 0;max-width:66ch}
/* A viewBox'd SVG scales to ~55% on a phone, so 12px text renders at 6.5px.
   Scale the type UP at small widths so it lands back around 12px. */
@media (max-width:600px){
  .chart.diag .tick{font-size:22px}
  .chart.diag .tick.y{font-size:19px}
  .chart.diag .lbl{font-size:22px}
  .chart.diag .barval{font-size:21px}
}

/* ---------------- guides index ---------------- */
/* Picture cards. The landscape at the top of each is drawn at build time and
   varies by guide; it is where the article's hero picture will go. */
.guidelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin:22px 0}
.guidelist a{
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--surface);text-decoration:none;box-shadow:var(--shadow);padding-bottom:18px;
}
.guidelist a:hover{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--brand)}
.guidelist .scene{display:block;height:110px;margin-bottom:14px}
.guidelist .scene svg{display:block;width:100%;height:100%}
.guidelist strong{
  display:block;font-family:var(--display);font-size:1.2rem;font-weight:650;line-height:1.28;
  color:var(--ink);margin:0 18px 6px;
}
.guidelist span:not(.scene){display:block;color:var(--ink-2);font-size:.95rem;line-height:1.5;margin:0 18px}
.sc-sky0{stop-color:var(--pic-top)} .sc-sky1{stop-color:var(--pic-low)}
.sc-sun{fill:var(--sun)} .sc-far{fill:var(--hill-far)} .sc-mid{fill:var(--hill-mid)} .sc-near{fill:var(--hill-near)}

/* ---------------- 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)
}
/* Long values (the font stacks, the shadow) wrap rather than push the page sideways. */
.tokval{color:var(--ink-2);font-size:.82rem;margin-left:auto;text-align:right;min-width:0;overflow-wrap:anywhere}
.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-radius:16px;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-radius:20px;box-shadow:var(--shadow);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}

/* ---------------- 72(t) calculator ---------------- */
/* A select is a field like any other and gets the field's border, fill and
   type. Left unstyled it is the one control on the page that looks like the
   browser's, not ours. */
select{
  width:100%;padding:13px 40px 13px 15px;border:1.5px solid var(--rule);border-radius:14px;
  font-size:1.08rem;font-family:var(--sans);background:var(--surface);color:var(--ink);
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
select:hover{border-color:var(--ink-2)}
select:focus{outline:3px solid color-mix(in srgb,var(--sun) 70%,transparent);outline-offset:1px;border-color:var(--sun)}
input[type=date]{min-height:3.1rem}
input::placeholder{color:var(--ink-2);opacity:.6}
.sepp-methods em{display:block;font-style:normal;font-size:.84rem;color:var(--ink-2);margin-top:2px}
.sepp-methods strong.muted{font-size:1.05rem;font-weight:500}
.lock{margin:14px 0 0}
/* The trail is the calculator's evidence: what table it read, what factor it
   found, what rate it used and the division it did. It reads as a record, not
   as a result, so it sits in the small sans with the figures emphasised. */
.trail{font-size:.9rem;color:var(--ink-2);padding-left:1.1rem;margin:8px 0 12px}
.trail li{margin-bottom:.55rem}
.trail b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.result h3{font-size:1rem;margin:22px 0 4px}

/* ---------------- tools under a result ---------------- */
/* Quiet, text-like buttons: the result is the thing, these are what you do with
   it. Share is the one filled button: it sends a picture of the result and the
   link that reproduces it. Copy-link makes the URL that already carries the
   inputs visible; print turns the page into a one-sheet through the print
   rules below. */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:14px}
.tool{
  font:inherit;font-size:.92rem;font-weight:500;color:var(--brand);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;
}
.tool:hover{text-decoration-color:var(--brand)}
.tool.share{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px 10px 15px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font-weight:700;text-decoration:none;
}
.tool.share:hover{background:var(--brand-hover)}
.tool.share svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.print-url{display:none}

/* ---------------- print ---------------- */
/* A printed calculator page is the plan: the inputs, the figures, the working
   and the address it came from. Everything that exists to move a visitor around
   the site or to pay for it is dropped. */
@media print{
  header,footer,.ad,.cta,.theme,.crumb,.related,.browse,.guidelist,.reset,.tools,.how,.seg{display:none!important}
  body{background:#fff;color:#000;font-size:11.5pt}
  main{max-width:none;padding:0}
  .calc{display:block;box-shadow:none;border:1px solid #888;border-radius:6px;break-inside:avoid;margin:14px 0}
  .calc-in,.calc-out{background:none;border:0;padding:10px 14px}
  .calc-in .grid{grid-template-columns:repeat(3,1fr);gap:8px 14px}
  input,select{border:1px solid #999;padding:6px 8px;font-size:11pt;background:none;color:#000;-webkit-appearance:none;appearance:none;background-image:none}
  .headline{background:none;border-left:4px solid #000;border-radius:0;color:#000;padding:8px 12px}
  .headline::before{display:none}
  .headline strong{color:#000!important}
  .rules,.note,.rate{background:none;border-color:#000;color:#000}
  .mini-table,.mini-table div,.tablewrap,th,td{border-color:#999}
  .chart .hit,.chart .hov{display:none}
  a{color:inherit;text-decoration:none}
  a[href^="http"]:not(.logo)::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  h2{break-after:avoid}
  .faq details{break-inside:avoid}
  .print-url{display:block;font-size:9.5pt;color:#444;margin-top:18px;border-top:1px solid #999;padding-top:8px}
}
/* A checkbox row inside the input grid: the box sits beside its sentence, not
   stretched to the field width like a text input. */
.check{grid-column:1/-1}
.check label{display:flex;align-items:flex-start;gap:10px;color:var(--ink)}
.check input[type=checkbox]{width:auto;margin:4px 0 0;flex:none;accent-color:var(--brand)}
.panel-head.sub{margin-top:20px}

/* Review date under a rule page's lead, and the corrections log. */
.reviewed{font-size:.85rem;color:var(--ink-2);margin:-4px 0 14px}
.log dt{font-weight:600;margin-top:1rem}
.log dd{margin:.3rem 0 0;max-width:68ch;color:var(--ink-2)}

/* Bridge planner tables: the selected strategy, years over the marketplace line, and short years. */
.result tr.on td{font-weight:600;background:var(--brand-tint)}
.result tr.over td{color:var(--caution)}
.result tr.short td{color:var(--risk)}
.result table.years td,.result table.years th{font-size:.86rem;padding:7px 8px;white-space:nowrap}
.result table small{color:var(--ink-2)}

/* ============================================================
   State study (/how-long-500k-lasts-in-every-state/)
   A data feature in the Horizon voice: the display face for the
   headline and the figures that matter, raised cards, one plum
   ramp for magnitude and nothing else coloured.
   ============================================================ */
.kicker{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:22px 0 10px}
.study h1{font-size:clamp(2.1rem,5.2vw,3.25rem);line-height:1.06;letter-spacing:-.012em;max-width:18ch}
/* A study paragraph ran the full 64rem, about 110 characters a line. Prose
   keeps the same measure as every other page; figures and tables stay wide. */
.study > p,.study > section:not(.figcard) > p{max-width:68ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:26px 0 8px}
.stats div{padding:16px 18px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.stats strong{display:block;font-family:var(--display);font-weight:650;font-size:2.15rem;line-height:1.05;color:var(--ink)}
.stats span{display:block;margin-top:6px;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
@media (max-width:600px){.stats{gap:10px}}

.figcard{margin:28px 0;padding:22px 24px 20px;background:var(--surface);border-radius:24px;box-shadow:var(--shadow)}
.figcard h3{margin:0 0 4px;font-size:1.2rem}
.figcard .sub{margin:0 0 14px;color:var(--ink-2);font-size:.95rem;max-width:62ch}
.figcard .src{margin:12px 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.5}
.controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 14px}
.controls .cl{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-right:2px}
.controls .grp{display:flex;align-items:center;gap:8px}
.seg button{font-size:.88rem}

.tilemap{width:100%;height:auto;display:block;max-width:680px;margin:0 auto}
.tilemap .tile{cursor:pointer;outline:none}
.tilemap rect{stroke:var(--surface);stroke-width:0;transition:opacity .12s}
.tilemap .ab{font:700 13px var(--sans);text-anchor:middle;letter-spacing:.02em}
.tilemap .v{font:600 14px var(--sans);text-anchor:middle;font-variant-numeric:tabular-nums}
.tilemap .tile:hover rect,.tilemap .tile:focus rect{stroke:var(--ink);stroke-width:2.5}
.tilemap .tile.dim rect{opacity:.28}
.b0 rect,i.b0,.dot.b0{fill:var(--seq0);background:var(--seq0)}
.b1 rect,i.b1,.dot.b1{fill:var(--seq1);background:var(--seq1)}
.b2 rect,i.b2,.dot.b2{fill:var(--seq2);background:var(--seq2)}
.b3 rect,i.b3,.dot.b3{fill:var(--seq3);background:var(--seq3)}
.b4 rect,i.b4,.dot.b4{fill:var(--seq4);background:var(--seq4)}
.b5 rect,i.b5,.dot.b5{fill:var(--seq5);background:var(--seq5)}
.b0 text,.b1 text,.b2 text{fill:var(--seq-dk)}
.b3 text,.b4 text,.b5 text{fill:var(--seq-lt)}
.seqlegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:14px 0 0;font-size:.88rem;color:var(--ink-2);justify-content:center}
.seqlegend .lt{font-weight:600;color:var(--ink);margin-right:4px}
.seqlegend .sw{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.seqlegend i{display:inline-block;width:16px;height:12px;border-radius:3px}
.maptip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--paper);border-radius:8px;padding:9px 12px;font-size:.84rem;line-height:1.4;max-width:250px;box-shadow:var(--shadow);opacity:0;transition:opacity .1s}
.maptip.on{opacity:1}
.maptip b{display:block;font-size:1.02rem;font-variant-numeric:tabular-nums}
.maptip span{opacity:.8}
.mapwrap{position:relative}

.strip{width:100%;height:auto;display:block}
.strip .axis{stroke:var(--ink-2);stroke-width:1}
.strip .tick{font:12.5px var(--sans);fill:var(--ink-2);font-variant-numeric:tabular-nums}
.strip .dot{stroke:var(--surface);stroke-width:1.5}
.strip .lbl{font:600 11.5px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0 8px}
.person{border-radius:18px;padding:16px 18px;background:var(--surface);box-shadow:var(--shadow)}
.person h3{margin:0 0 6px;font-size:1.08rem}
.person p{margin:0 0 8px;font-size:.93rem;color:var(--ink-2);line-height:1.5}
.person .range{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--rule-soft);padding-top:10px;margin-top:10px;font-size:.86rem}
.person .range b{display:block;font-size:1.25rem;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}

.finder{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.finder select{max-width:320px}
.finder .card{border-top:2px solid var(--hill-mid);padding-top:14px}
.finder .card h3{margin:0 0 10px;font-size:1.35rem}
.finder dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin:0}
.finder dt{font-size:.86rem;color:var(--ink-2)}
.finder dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.finder .rules{margin-top:14px;font-size:.92rem}
.yearchart{margin:16px 0 4px}
.yearchart .yc-cap{margin:0 0 6px;font-size:.88rem}
.yearchart .fig{margin:0}

table.sortable th{cursor:pointer;user-select:none;white-space:nowrap}
table.sortable th::after{content:"";display:inline-block;margin-left:5px;opacity:.5}
table.sortable th[aria-sort=ascending]::after{content:"▲";font-size:.7em}
table.sortable th[aria-sort=descending]::after{content:"▼";font-size:.7em}
table.sortable td.n,table.sortable th.n{text-align:right;font-variant-numeric:tabular-nums}
table.sortable tr.hl td{background:var(--brand-tint)}
@media print{.controls,.maptip{display:none}.figcard{box-shadow:none}}
@media (max-width:600px){
  .figcard{padding:16px 12px 14px;margin:22px -4px}
  .controls{gap:10px}
  .controls .grp{width:100%;flex-wrap:wrap;gap:6px}
  .controls .seg{display:flex;width:100%}
  .controls .seg button{flex:1 1 0;padding:8px 4px;font-size:.8rem;line-height:1.2}
  /* tiles shrink to ~58% on a phone; these land the labels near 11 and 12px */
  .tilemap .ab{font-size:19px}
  .tilemap .v{font-size:21px}
  .stats strong{font-size:1.8rem}
}
/* Horizontal bars as text, not a picture: an SVG of 26 rows shrank to 7px
   labels on a phone. Each row is a label, a bar and its value, at body size
   at every width. The bar width is set inline from the value. */
.bars{list-style:none;margin:6px 0 0;padding:0;max-width:none;display:grid;gap:7px}
.bars li{display:grid;grid-template-columns:minmax(7.5em,26%) 1fr;align-items:center;gap:12px;margin:0}
.bars .lab{text-align:right;font-size:.95rem;color:var(--ink);line-height:1.2}
.bars .row{display:flex;align-items:center;gap:8px;min-width:0}
.bars .bar{display:block;height:14px;border-radius:7px;background:var(--seq3);flex:none;min-width:4px;width:calc(var(--w) * (100% - 6.2em))}
.bars .val{font-size:.9rem;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:600px){.bars li{grid-template-columns:minmax(6.5em,34%) 1fr;gap:8px}.bars .lab{font-size:.9rem}.bars .val{font-size:.85rem}}
.strip .more{font:600 12px var(--sans);fill:var(--ink)}
.strip .more-n{font:700 15px var(--sans);fill:var(--ink)}
.tilemap .bna rect{fill:var(--sunken);stroke:var(--rule);stroke-width:1}
.tilemap .bna text{fill:var(--ink-2)}
.youform{margin:0 0 16px;padding:16px 18px;background:var(--sunken);border-radius:18px}
.youform .grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.youform p{margin:10px 0 0}
.youform [hidden]{display:none!important}
.youform .inrow{display:flex;gap:6px}
.youform .inrow input{flex:1 1 auto;min-width:5.5em;padding-left:.7em;padding-right:.5em}
.youform .inrow select{flex:0 0 auto;width:6.4em;padding-left:.6em;padding-right:1.7em}
.youform p.muted{font-size:.9em;line-height:1.5}
.youform .addons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.youform .addons .cl{font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.youform .addon{font:inherit;font-size:.95em;padding:6px 14px;border-radius:999px;border:1px dashed var(--rule);background:transparent;color:var(--ink-2);cursor:pointer}
.youform .addon:hover,.youform .addon:focus-visible{border-color:var(--brand);color:var(--ink)}
.youform .addon[aria-expanded="true"]{border-style:solid;border-color:var(--brand);background:var(--brand);color:var(--paper)}
.penbox{margin:12px 0 0;padding:10px 14px 14px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.penbox legend{font-weight:700;padding:0 6px}
.penbox .rm{font:inherit;font-size:.85em;font-weight:400;margin-left:8px;padding:0;border:0;background:none;color:var(--ink-2);text-decoration:underline;cursor:pointer}
.penbox .chk{display:flex;align-items:flex-end;padding-bottom:10px}
.penbox .chk label{display:flex;gap:8px;align-items:center;font-weight:400}
.penbox .chk input{width:auto}
.sscompare{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.sscompare .cmp-h{margin:0 0 8px}
.sscompare .cmp-h select{width:auto;display:inline-block;margin:0 2px;padding:4px 1.8em 4px 8px}
.sscompare table{width:100%;max-width:520px;border-collapse:collapse;font-size:.95em}
.sscompare th,.sscompare td{padding:6px 8px;border-bottom:1px solid var(--rule-soft);text-align:left}
.sscompare .n{text-align:right;font-variant-numeric:tabular-nums}
.sscompare tr.on td{font-weight:700}

/* ============================================================
   Homepage
   The front page says what the site is before the tool starts:
   a dawn sky across the full width of the window, the tagline in
   the display face, the worked example drawn as a landscape whose
   sun sets at the age the money runs out, and four promises, each
   a link to the page that shows it is kept.
   ============================================================ */
/* The sky bleeds to the window edges without widening the page: a border
   image paints outside the box without adding to its size, and the clip keeps
   it off the rows above and below, so nothing can scroll sideways on a phone. */
.intro{
  display:grid;grid-template-columns:minmax(0,1fr);gap:22px 44px;align-items:center;
  margin:0 0 6px;padding:40px 0 28px;
  border-image:linear-gradient(180deg,var(--sky-top),color-mix(in srgb,var(--sky-low) 55%,var(--paper)) 78%,var(--paper)) fill 0 / 0 / 0 100vmax;
  clip-path:inset(0 -100vmax);
}
@media (min-width:860px){.intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.intro .tagline{
  font-family:var(--display);font-weight:750;font-size:clamp(2.25rem,1.55rem + 2.5vw,3.25rem);
  line-height:1.04;letter-spacing:-.012em;color:var(--ink);margin:0 0 16px;max-width:14ch;text-wrap:balance;
}
.intro .sub{color:var(--ink-2);font-size:1.12rem;line-height:1.6;margin:0 0 20px;max-width:50ch}
.intro .go{margin:0}
/* The worked example as a landscape. The near hill's ridge is the balance
   falling; the sun sits on the horizon at the age it reaches zero. */
.lastline{margin:0;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.lastline svg{display:block;width:100%;height:auto}
.lastline figcaption{padding:12px 18px 16px;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.lastline figcaption strong{color:var(--ink)}
.ll-sky0{stop-color:var(--pic-top)} .ll-sky1{stop-color:var(--pic-low)}
.ll-h0{stop-color:var(--hill-mid)} .ll-h1{stop-color:var(--hill-near)}
.ll-far{fill:var(--hill-far)} .ll-mid{fill:var(--hill-mid)} .ll-ground{fill:var(--hill-near)}
.ll-sun{fill:var(--sun)} .ll-halo{fill:var(--sun);opacity:.3}
.ll-ridge{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:1 5;stroke-linecap:round;opacity:.85}
.ll-t{font:700 14px var(--sans);fill:var(--ink);font-variant-numeric:tabular-nums}
.ll-g{font:700 14px var(--sans);fill:#fff;font-variant-numeric:tabular-nums}
.ll-end{font:800 19px var(--sans);fill:#fff;font-variant-numeric:tabular-nums}
.proof{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:8px 0 0;padding:0;max-width:none;border-top:1px solid color-mix(in srgb,var(--hill-mid) 40%,transparent)}
.proof li{margin:0}
.proof a{display:block;height:100%;padding:14px 16px 2px 0;text-decoration:none;color:var(--ink-2);font-size:.92rem;line-height:1.45}
.proof li + li a{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--hill-mid) 30%,transparent)}
.proof b{display:block;font-family:var(--display);font-weight:650;color:var(--ink);font-size:1.06rem;margin-bottom:3px}
.proof a:hover b{color:var(--brand);text-decoration:underline}
@media (max-width:859px){
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof li + li a{padding-left:0;border-left:0}
  .proof li:nth-child(even) a{padding-left:14px;border-left:1px solid color-mix(in srgb,var(--hill-mid) 30%,transparent)}
  .proof li:nth-child(n+3) a{border-top:1px solid color-mix(in srgb,var(--hill-mid) 30%,transparent);padding-top:12px}
  .proof a{padding:12px 12px 12px 0}
}
@media (max-width:600px){
  .intro{padding:28px 0 20px;gap:20px}
  .intro .sub{font-size:1.04rem}
  .ll-t,.ll-g{font-size:16px}
  .ll-end{font-size:21px}
}

/* The featured study: the map is the picture people remember the site by. */
.feature{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px 34px;align-items:center;
  margin:36px 0;padding:26px 26px 22px;background:var(--surface);
  border-radius:24px;box-shadow:var(--shadow);
}
@media (min-width:860px){.feature{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.feature .kicker{margin:0 0 8px}
.feature h2{margin:0 0 10px;font-size:clamp(1.5rem,1.28rem + .8vw,1.9rem)}
.feature p{color:var(--ink-2)}
.feature .btn{margin-top:2px}
.feature-map a{display:block}
.feature-map .seqlegend{margin-top:10px}
@media (max-width:600px){.feature{padding:20px 16px 18px}}

/* Every calculator, grouped by the question it answers. */
.toolgroups{margin:48px 0 10px}
.toolgroups > h2{margin-bottom:.3rem}
.tgroup{margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--rule)}
.tgroup h3{margin:0 0 10px;font-size:1.25rem}
.tgroup > .muted{margin:0 0 4px;font-size:.98rem}
.rowlabel{margin:18px 0 0;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.rowlabel + .chips{margin-top:8px}
.toolcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.toolcards a{display:block;padding:18px 20px 20px;border-radius:20px;background:var(--surface);text-decoration:none;box-shadow:var(--shadow)}
.toolcards a:hover{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--brand)}
.toolcards strong{display:block;font-family:var(--display);font-size:1.2rem;font-weight:650;color:var(--ink);margin-bottom:5px}
.toolcards span{display:block;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.also{margin:12px 0 0;font-size:.95rem;color:var(--ink-2)}
.allcalc{margin:26px 0 0;font-weight:600}
@media print{.intro,.feature,.toolgroups{display:none!important}}