/* ============================================================
   SavingsLast — visual identity
   ------------------------------------------------------------
   Direction (owner, 2026-10-18): inspired by Apple.com. A white
   canvas and quiet grey tiles, large tight headlines, generous
   space, one accent colour, a translucent menu that stays on top
   and a light footer. Inter carries everything (it is drawn after
   Apple's own system face), with tabular figures wherever money
   lines up in a column and optical sizes for the big headlines.
   What stays from Horizon (2026-10-05): the plum brand, the gold
   sun, and the dusk landscapes, which are now the pictures on the
   page, the way Apple's pages are built around their product
   photographs: the hill is the balance, and the sun sets at the
   age the money runs out.

   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 white page, white panels and the quiet grey of a tile */
  --paper:#ffffff;
  --surface:#ffffff;
  --sunken:#f5f5f7;
  --rule:#d2d2d7;
  --rule-soft:#e8e8ed;

  /* text — near black, and a grey that still clears 5:1 on the tile grey */
  --ink:#1d1d1f;
  --ink-2:#5f5f64;

  /* 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:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:64rem;
  /* Panels are drawn with a hairline, not a cast shadow; a tile is grey, with no line at all. */
  --shadow:0 0 0 1px var(--rule-soft);
  --lift:0 10px 30px -12px rgba(0,0,0,.18);
  /* 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:#000000;
    --surface:#1c1c1e;
    --sunken:#141416;
    --rule:#3a3a3c;
    --rule-soft:#2c2c2e;

    --ink:#f5f5f7;
    --ink-2:#a1a1a6;

    --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 0 0 1px var(--rule-soft);
    --lift:0 10px 30px -12px rgba(0,0,0,.7);
    --seq0:#382c60; --seq1:#4a3366; --seq2:#6e4c87; --seq3:#a57cb0; --seq4:#cfaed2; --seq5:#f1e3ef;
    --seq-dk:#eeeaf6; --seq-lt:#15122a;
  }
}
:root[data-theme="dark"]{
  --paper:#000000; --surface:#1c1c1e; --sunken:#141416; --rule:#3a3a3c; --rule-soft:#2c2c2e;
  --ink:#f5f5f7; --ink-2:#a1a1a6;
  --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 0 0 1px var(--rule-soft);
  --lift:0 10px 30px -12px rgba(0,0,0,.7);
  --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.6 var(--sans);
  letter-spacing:-.006em;
  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:none}

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

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

/* ---------------- masthead ---------------- */
/* The menu stays on top as you scroll, frosted over the page, the way Apple's does.
   The bar spans the window; its contents keep to the page's width. */
header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;
  margin:0;padding:10px max(20px,calc(50% - var(--max) / 2 + 20px));
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
}
.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" 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.32rem;font-weight:600;letter-spacing:-.025em;line-height:1}
.logo .word b{font-weight:800;color:var(--brand)}
header nav{display:flex;flex-wrap:wrap;gap:4px 30px}
header nav a{
  font-size:.9rem;font-weight:450;letter-spacing:-.005em;text-decoration:none;color:color-mix(in srgb,var(--ink) 82%,transparent);
  padding:8px 0;transition:color .2s ease;
}
header nav a:hover{color:var(--ink)}

/* theme toggle: shows the icon for the mode you would switch TO */
.theme{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:none;color:color-mix(in srgb,var(--ink) 82%,transparent);cursor:pointer;transition:background .2s ease}
.theme:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.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){
  /* Two rows of menu would take too much of a phone screen to keep on top. */
  header{position:static;padding:12px 16px 6px;gap:6px 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;color:var(--ink)}
}

/* ---------------- 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 ---------------- */
/* Headlines are big, bold and set tight, as on Apple's pages; Inter's optical
   sizes draw them in its display cut. */
h1,h2,h3{font-family:var(--display);text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.2rem,1.5rem + 2.4vw,3.4rem);line-height:1.06;font-weight:700;letter-spacing:-.028em;margin:36px 0 14px}
h2{font-size:clamp(1.55rem,1.3rem + .9vw,2.1rem);line-height:1.15;font-weight:680;letter-spacing:-.022em;margin:2.8rem 0 .7rem}
h3{font-size:1.25rem;line-height:1.3;font-weight:650;letter-spacing:-.014em;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.22rem;line-height:1.5;letter-spacing:-.012em;margin-top:0;max-width:60ch}
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:28px;
  margin:30px 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;letter-spacing:-.014em;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}
input:focus,select:focus{outline:none!important;border-color:var(--brand)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,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:1px solid var(--rule);border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease;
  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;letter-spacing:-.022em;
  padding:18px 22px 18px 64px;border-radius:18px;margin:0 0 16px;
  background:var(--sunken);color:var(--ink);
  /* Always two lines tall, whatever the answer says, so the answer changing from "17 years" to
     "indefinitely" never moves what is under it. The words sit in the middle, beside the sun. */
  display:flex;flex-wrap:wrap;align-items:center;align-content:center;column-gap:.28em;min-height:calc(2 * 1.18em + 36px);
}
.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}
/* The drawdown headline is always two rows: "Your money lasts" on the first, the answer on the second,
   whatever the answer is. Before, the answer sat beside the label when it was short and dropped to a
   second line when it was long, so changing the numbers flipped the headline between one and two lines.
   Both rows start at the same place every time. A long answer on a narrow screen wraps inside its row,
   which the reserved height below covers. */
.headline.split{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;min-height:calc(2 * 1.18em + 36px)}
.result .headline.split strong{white-space:normal}
/* The longest answer the calculator can give ("99 years 11 months") needs a second line for itself only
   at 360px wide and narrower, measured with the site's fonts, so only there does it keep three rows. */
@media (max-width:379px){.headline.split{min-height:calc(3 * 1.18em + 36px)}}
@media (max-width:339px){.headline.split{min-height:calc(4 * 1.18em + 36px)}}
/* Every other calculator's headline is two rows too, a lead and then the figure. Invisible copies of the
   longest wordings the headline can have (.hl-size) share the same two grid rows as the real one (a
   subgrid), so each row is as tall as the tallest wording at this screen width, with the site's fonts:
   the box never changes size and the figure never changes place, with no list of heights to keep up to
   date. The copies are hidden from sight, from screen readers and from the share image. A browser
   without subgrid keeps the box size and loses only the fixed place of the second row. */
.headline.sized{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;min-height:0}
.headline.sized .hl-main,.headline.sized .hl-size,.headline.sized .hl-size > div{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:1 / span 2;grid-column:1;
  align-items:start;justify-items:start;min-width:0}
.headline.sized .hl-size{visibility:hidden;pointer-events:none}
/* Reserved sizes. The summary above the figures and the explanations below the chart are as tall as
   their longest text for this width, so a change of numbers moves nothing: the chart and the page
   under it stay put. The heights were measured over 168 combinations of balance, withdrawal and
   return at each of these widths, with the site's own font loaded (scripts/measure-result.js; Inter
   since 2026-10-18, which wraps a little differently from the Figtree it replaced). The
   headlines are their own fixed rows (.headline.split and .headline.sized above). */
.result{--min-sum:241px;--min-more:448px}
.r-sum{min-height:var(--min-sum)}
.r-more{min-height:var(--min-more)}
@media (min-width:360px){.result{--min-sum:185px;--min-more:412px}}
@media (min-width:440px){.result{--min-more:324px}}
@media (min-width:480px){.result{--min-sum:157px}}
@media (min-width:540px){.result{--min-sum:135px;--min-more:293px}}
@media (min-width:600px){.result{--min-more:250px}}
@media (min-width:700px){.result{--min-more:250px}}
@media (min-width:800px){.result{--min-more:225px}}
@media (min-width:900px){.result{--min-more:250px}}
/* A year-by-year schedule has as many rows as the plan has years, so it scrolls inside a frame of one
   size, with its column heads kept in view, instead of making the page as long as the plan. */
.tablewrap.sched{height:26rem;overflow:auto}
.tablewrap.sched thead th{position:sticky;top:0;z-index:1}
/* Figures that change with the numbers hold their width: digits all the same width, and a figure
   never breaks across two lines. Without this, "$1,111" and "$2,000" are different widths. */
.result strong,.result b{font-variant-numeric:tabular-nums}
.result [data-k]{white-space:nowrap}
.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:680;letter-spacing:-.02em;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(--hill-far);stop-opacity:.12}
.chart .area{fill:url(#sl-area)}
.chart .end{fill:var(--sun);stroke:var(--surface);stroke-width:2.5}
.chart .end-halo{fill:var(--sun);opacity:.3}
/* Motion. The first chart on a card draws itself in once it is on screen; later
   results morph through script (src/calc.js). Each hidden start state lives inside
   a keyframe or behind .pre, which script adds only when it will also remove it, so
   a visitor who asks for less motion never meets an invisible chart. */
@keyframes sl-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sl-fade{from{opacity:0}to{opacity:1}}
@keyframes sl-rest{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.chart.pre .line,.chart.pre .area,.chart.pre .end,.chart.pre .end-halo,.chart.pre .anno,.chart.pre .mark,.chart.pre .mark-l{opacity:0}
.chart.drawin .line{stroke-dasharray:1;animation:sl-draw 2.6s cubic-bezier(.45,.05,.3,1) backwards}
.chart.drawin .area{animation:sl-fade 2s ease-out .8s backwards}
.chart.drawin .end,.chart.drawin .end-halo{transform-box:fill-box;transform-origin:center;animation:sl-rest 1.1s ease-out 2.2s backwards}
.chart.drawin .anno,.chart.drawin .mark,.chart.drawin .mark-l{animation:sl-fade 1s ease-out 2.6s backwards}
.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}
/* a short ranking table (three or four narrow columns) fits a phone instead of scrolling */
.tablewrap table.fit th,.tablewrap table.fit td{padding:10px 8px}
.tablewrap table.fit th:first-child,.tablewrap table.fit td:first-child{padding-left:12px}
.tablewrap table.fit th:last-child,.tablewrap table.fit td:last-child{padding-right:12px}
/* the senior property tax catalog: lists of programs read left to right, unlike a table of figures */
.relief td,.relief th{text-align:left;vertical-align:top}
.relief td:first-child{white-space:nowrap;font-weight:600}
.relief ul{margin:0;padding-left:1.1em}
.relief li{margin:0 0 .6em;line-height:1.45;font-size:.92rem}
.relief td:last-child{font-size:.86rem;line-height:1.5;min-width:11rem;color:var(--ink-2)}
.relief.wide table{min-width:44rem}
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(--sunken);
  border-radius:22px;padding:22px 24px;margin:28px 0;
}
.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:12px 24px;border-radius:999px;text-decoration:none;font-weight:550;font-size:1.02rem;letter-spacing:-.01em;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--brand-hover)}
.btn:active{transform:scale(.98)}
.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(--sunken);color:var(--ink);text-decoration:none;font-size:1rem;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.2;transition:background .2s ease,color .2s ease;
}
.chips a:hover{color:var(--brand);background:var(--brand-tint)}
.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)}
.browse{border-radius:24px}

/* ---------------- 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:600;letter-spacing:-.014em;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(--sunken);color:var(--ink);
  transition:background .2s ease,color .2s ease;
}
.related a:hover{color:var(--brand);background:var(--brand-tint)}

/* ---------------- footer + fine print ---------------- */
/* A quiet grey band to close the page, as Apple's footer does. It reaches the
   window edges without widening the page. */
footer{
  margin-top:80px;padding:34px 20px 44px;
  font-size:.92rem;color:var(--ink-2);background:var(--sunken);
  box-shadow:0 0 0 100vmax var(--sunken);clip-path:inset(0 -100vmax -100vmax);
  border-top:1px solid var(--rule-soft);
}
/* 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:color-mix(in srgb,var(--ink) 85%,transparent);display:inline-block;padding:9px 0;font-size:.95rem;font-weight:450;text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
footer p:last-child{color:var(--ink-2);max-width:70ch;padding-top:18px;border-top:1px solid var(--rule)}
.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:20px 22px 16px;background:var(--sunken);border-radius:24px}
.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:24px;overflow:hidden;
  background:var(--sunken);text-decoration:none;padding-bottom:20px;
  transition:transform .35s cubic-bezier(.37,0,.63,1),box-shadow .35s cubic-bezier(.37,0,.63,1);
}
.guidelist a:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.guidelist .scene{display:block;height:110px;margin-bottom:14px}
.guidelist .scene svg{display:block;width:100%;height:100%}
.guidelist .gdate{display:block;margin:0 18px 6px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.guidelist strong{
  display:block;font-family:var(--display);font-size:1.22rem;font-weight:650;letter-spacing:-.018em;line-height:1.25;
  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:1px solid var(--rule);border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease;
  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:1rem;font-weight:600;letter-spacing:-.01em;color:var(--brand);margin:22px 0 8px}
.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:18px 20px;border-radius:20px;background:var(--sunken)}
.stats strong{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:2.2rem;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:20px;padding:18px 20px;background:var(--sunken)}
.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. */
/* The opening, centred and large, the way Apple opens a product page; the worked
   example is the picture under it. */
.intro{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:34px;
  margin:0 0 6px;padding:64px 0 30px;text-align:center;
}
.intro-text{display:flex;flex-direction:column;align-items:center}
.intro .tagline{
  font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,1.6rem + 3.6vw,4.4rem);
  line-height:1.03;letter-spacing:-.035em;color:var(--ink);margin:0 0 18px;max-width:16ch;text-wrap:balance;
}
.intro .sub{color:var(--ink-2);font-size:1.25rem;line-height:1.5;letter-spacing:-.012em;margin:0 0 26px;max-width:46ch;text-wrap:pretty}
.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;width:100%;max-width:44rem;border-radius:28px;overflow:hidden;background:var(--sunken);text-align:left}
.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}
/* The landscape arrives once, on load: the near hill rises and the sun drops to the
   horizon with a small spring, sinking a little behind the hill before it settles.
   Plain CSS, so the picture is whole without script, and the reduced-motion rule
   at the top of this file turns it off. */
@keyframes ll-set{from{transform:translateY(-70px)}to{transform:translateY(0)}}
@keyframes ll-rise{from{opacity:0;transform:scaleY(.86)}to{opacity:1;transform:scaleY(1)}}
.ll-sun,.ll-halo{animation:ll-set 4.5s cubic-bezier(.3,.1,.25,1) .4s backwards}
.ll-hill,.ll-ridge{transform-box:fill-box;transform-origin:50% 100%;animation:ll-rise 3s cubic-bezier(.3,.1,.25,1) backwards}
.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;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:8px 0 0;padding:0;max-width:none;text-align:left;border-top:1px solid var(--rule)}
.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 var(--rule-soft)}
.proof b{display:block;font-family:var(--display);font-weight:650;letter-spacing:-.014em;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 var(--rule-soft)}
  .proof li:nth-child(n+3) a{border-top:1px solid var(--rule-soft);padding-top:12px}
  .proof a{padding:12px 12px 12px 0}
}
@media (max-width:600px){
  .intro{padding:36px 0 20px;gap:24px}
  .intro .sub{font-size:1.1rem}
  .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:40px 0;padding:36px 36px 30px;background:var(--sunken);
  border-radius:30px;
}
@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 12px;font-size:clamp(1.7rem,1.35rem + 1.3vw,2.5rem);letter-spacing:-.028em;line-height:1.08}
.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:24px 18px 20px;border-radius:24px}}

/* Every calculator, grouped by the question it answers. */
.toolgroups{margin:48px 0 10px}
.toolgroups > h2{margin-bottom:.3rem;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);letter-spacing:-.03em}
.tgroup{margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--rule)}
.tgroup h3{margin:0 0 12px;font-size:1.3rem}
.tgroup > .muted{margin:0 0 4px;font-size:.98rem}
.rowlabel{margin:20px 0 0;font-size:.95rem;font-weight:600;letter-spacing:-.01em;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:22px 22px 22px;border-radius:22px;background:var(--sunken);text-decoration:none;transition:transform .35s cubic-bezier(.37,0,.63,1),box-shadow .35s cubic-bezier(.37,0,.63,1)}
.toolcards a:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.toolcards strong{display:block;font-family:var(--display);font-size:1.22rem;font-weight:650;letter-spacing:-.018em;color:var(--ink);margin-bottom:6px}
.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}}

/* ============================================================
   The best places to retire (/best-places-to-retire/)
   ------------------------------------------------------------
   Each city is a chapter: a large photograph (or, until one is
   chosen, the drawn landscape guide cards use), its rank, a row
   of grey figure tiles and the write-up. The comparison table
   sits above them; the method and the limits close the page.
   ============================================================ */
.place{margin:3.2rem 0 0;scroll-margin-top:76px}
.place-pic{margin:0 0 18px;border-radius:28px;overflow:hidden;background:var(--sunken);aspect-ratio:16/9}
.place-pic img,.place-pic svg{display:block;width:100%;height:100%;object-fit:cover}
.place-pic figcaption{font-size:.8rem;color:var(--ink-2);padding:8px 4px 0}
.place-fig{margin:0 0 18px}
.place-fig .place-pic{margin:0}
.place-fig figcaption{font-size:.82rem;line-height:1.45;color:var(--ink-2);padding:8px 6px 0}
.place-fig figcaption a{color:inherit}
.place-rank{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--brand);margin:0 0 4px}
.place h2{margin:0 0 14px}
.place-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px;padding:0;list-style:none;max-width:none}
@media (min-width:900px){.place-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.place-tiles li{margin:0;padding:14px 14px 12px;border-radius:18px;background:var(--sunken);display:flex;flex-direction:column;min-height:88px}
.place-tiles span{font-size:.8rem;line-height:1.3;color:var(--ink-2)}
.place-tiles b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:6px}
.place-tiles small{font-size:.74rem;color:var(--ink-2);font-weight:400;margin-top:auto;padding-top:2px}
.place p{max-width:68ch}
.place-pic.ph{aspect-ratio:5/2}
.place-intro{font-size:1.2rem;line-height:1.5;letter-spacing:-.012em;color:var(--ink);margin:0 0 16px}
.place .catch{display:grid;gap:8px;padding:16px 20px;border-radius:20px;background:var(--brand-tint);color:var(--ink);max-width:68ch}
.place .catch p{margin:0}
.place .catch strong{color:var(--brand)}
.glance td:first-child,.glance th:first-child{text-align:left}
.glance td:nth-child(2),.glance th:nth-child(2){text-align:left}
.glance a{font-weight:600;text-decoration:none}
.glance a:hover{text-decoration:underline}
.weights{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:10px;margin:14px 0 18px;padding:0;list-style:none;max-width:none}
.weights li{margin:0;padding:16px 16px 14px;border-radius:18px;background:var(--sunken)}
.weights b{display:block;font-family:var(--display);font-size:1.8rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.weights span{display:block;margin-top:6px;font-size:.92rem;line-height:1.4;color:var(--ink-2)}
@media (max-width:600px){
  .place-pic{border-radius:22px}
  .place-tiles{gap:8px}
  .place-tiles li{padding:12px 11px 10px;min-height:80px;border-radius:16px}
  .place-tiles b{font-size:1.12rem}
}