/* Free the Wage Slave — homepage, 1:1 replication of the Google Stitch mock
   ftws_desktop_homepage_newsroom.png (2026-08-19).
   Palette tokens are brand.md's locked set; the *_mock comments record the
   value measured out of the PNG where it differs (all within ΔE ≈ 2–3). */

:root{
  /* ink */
  --ink:#14181B;
  --ink-2:#46504E;
  --ink-3:#7D8783;

  /* surfaces — measured from the mock */
  --ground:#E0E5E1;      /* page ground */
  --surface:#F4F6F3;     /* content cards */
  --surface-2:#E7E9E6;   /* footer band */
  --compass:#E5F2EB;     /* compass strip */
  --field:#FFFFFF;

  /* brand */
  --brand:#0E5A45;       /* mock measured #0B563F */
  --brand-2:#0A4234;
  --brand-tint:#E7F1ED;
  --accent:#E4572E;      /* mock measured #D85020 */
  --accent-2:#C6421D;

  /* structure */
  --rule:#DCE1DC;
  --rule-2:#CBD3CC;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,24,27,.05);

  /* chart */
  --spark:#12604A;
  --spark-fill:rgba(18,96,74,.10);
  --up:#0E5A45;
  --down:#C0432A;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16px/1.5 "Inter","Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
h1,h2,h3,h4{margin:0;font-family:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;letter-spacing:-.015em}
button{font:inherit}

/* One content column on every page type, whatever its shell.
   Measured 2026-08-20: 35 pages rendered a 1100px card, 3 rendered 1140 (they carry one
   .wrap where the rest carry two nested), and 21 rendered 1440 because their card sat
   outside the wrap entirely. 1140 max less 40 of padding is the 1100 the majority already
   had, and making a nested .wrap a no-op means the single- and double-wrap shells agree on
   both the column width and the vertical rhythm — nesting used to double the 22px top. */
.wrap{max-width:1140px;margin:0 auto;padding:22px 20px 40px}
.wrap .wrap{max-width:none;margin:0;padding:0}
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom:22px;
}
.card__pad{padding:26px 30px 30px}

/* ── utility bar ─────────────────────────────────────────────── */
.utility{
  display:flex;align-items:center;gap:14px;
  padding:11px 30px;
  border-bottom:1px solid var(--rule);
  font-size:14px;color:var(--ink);
}
.utility__date{font-weight:500;white-space:nowrap}
.utility__live{display:flex;align-items:center;gap:7px;color:var(--ink-2);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.utility__right{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.utility__label{white-space:nowrap}
.signup{display:flex;align-items:center;background:var(--field);border:1px solid var(--rule-2);border-radius:7px;overflow:hidden;min-width:0}
.signup input{
  border:0;outline:0;background:transparent;
  font:400 14px/1 "Inter",sans-serif;color:var(--ink);
  padding:8px 10px;width:168px;min-width:0;
}
.signup input::placeholder{color:var(--ink-3)}
.signup button{border:0;background:transparent;cursor:pointer;padding:6px 9px;color:var(--ink-2);display:flex}
.iconbtn{border:0;background:transparent;cursor:pointer;padding:4px;color:var(--ink);display:flex}

/* ── masthead ────────────────────────────────────────────────── */
.masthead{display:flex;align-items:center;gap:22px;padding:20px 30px 16px}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
.chip{width:64px;height:64px;flex:none}
.wordmark{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:800;
  font-size:41px;line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 4px;
}
.tagline{margin:0;font-size:15.5px;color:var(--ink-2)}
.btn-brief{
  margin-left:auto;flex:none;
  background:var(--accent);color:#fff;border:0;border-radius:7px;
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:15.5px;
  padding:13px 20px;cursor:pointer;
}
.btn-brief:hover{background:var(--accent-2);text-decoration:none}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{
  display:flex;flex-wrap:wrap;gap:26px;
  padding:2px 30px 16px;
  border-bottom:1px solid var(--rule);
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:16px;
}
.nav a:hover{color:var(--brand)}

/* ── compass strip ───────────────────────────────────────────── */
.compass{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--compass)}
.axis{
  display:flex;align-items:flex-end;justify-content:flex-start;gap:28px;
  padding:16px 22px;min-width:0;
  border-left:1px solid rgba(14,90,69,.14);
}
.axis:first-child{border-left:0}
.axis__t{min-width:0}
.axis__name{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 2px;
}
.axis__count{font-size:14px;color:var(--ink-2)}
.bars{display:flex;align-items:flex-end;gap:4px;height:34px;flex:none}
.bars i{display:block;width:13px;border-radius:2px 2px 0 0;background:var(--brand)}
.bars i:nth-child(1){height:32%;opacity:.28}
.bars i:nth-child(2){height:48%;opacity:.45}
.bars i:nth-child(3){height:66%;opacity:.62}
.bars i:nth-child(4){height:82%;opacity:.80}
.bars i:nth-child(5){height:100%;opacity:1}

/* ── lead block ──────────────────────────────────────────────── */
.lead{
  display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  gap:26px;padding:26px 30px 8px;
}
.hero{position:relative;border-radius:var(--radius-sm);overflow:hidden;min-width:0}
.hero img{width:100%;height:100%;min-height:454px;object-fit:cover;aspect-ratio:16/11}
.hero__scrim{
  position:absolute;inset:auto 0 0 0;height:72%;
  background:linear-gradient(to bottom,rgba(10,12,11,0) 0%,rgba(10,12,11,.62) 46%,rgba(10,12,11,.9) 100%);
}
.hero__txt{position:absolute;inset:auto 0 0 0;padding:0 30px 26px;color:#fff}
.hero__h{font-size:34px;line-height:1.14;font-weight:800;margin:0 0 10px;text-wrap:balance}
.hero__dek{margin:0;font-size:18.5px;line-height:1.42;color:rgba(255,255,255,.9);max-width:52ch}

.latest__h{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;
}
.latest ol{list-style:none;margin:0;padding:0}
.latest li{padding:11px 0;border-bottom:1px solid var(--rule)}
.latest li:last-child{border-bottom:0}
.meta{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:4px}
.meta__time{color:var(--ink-2)}
.meta__sep{color:var(--ink-3)}
.meta__axis{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;color:var(--brand);
  text-transform:uppercase;letter-spacing:.05em;
}
.latest h3{font-size:15.5px;line-height:1.3;font-weight:700}

/* ── exit index ──────────────────────────────────────────────── */
.index{padding:18px 30px 26px}
.index__h{font-size:20px;font-weight:800;margin:0 0 12px}
.index__row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.stat{padding:14px 18px 10px;border-left:1px solid var(--rule);min-width:0}
.stat:first-child{border-left:0;padding-left:0}
.stat__label{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.03em;text-transform:uppercase;margin:0 0 4px;
}
.stat__row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.stat__val{font-family:"Inter Tight","Inter",sans-serif;font-weight:800;font-size:29px;line-height:1.05;font-variant-numeric:tabular-nums}
.delta{font-size:13.5px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta--up{color:var(--up)}
.delta--down{color:var(--down)}
.stat__spark{margin-top:10px;width:100%;height:38px;display:block}

/* ── section cards (right column of the mock) ────────────────── */
.sect__kicker{font-size:22px;font-weight:800;margin:0 0 14px}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.feature img{border-radius:var(--radius-sm);aspect-ratio:4/3;object-fit:cover;width:100%}
.feature__h{font-size:27px;line-height:1.15;font-weight:800;margin:0 0 10px}
.feature__dek{margin:0 0 16px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.feature__dek b{color:var(--ink);font-weight:700}
.stack{display:flex;flex-direction:column;gap:16px}
.mini{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center}
.mini img{border-radius:6px;aspect-ratio:4/3;object-fit:cover;width:100%}
.mini h4{font-size:14.5px;line-height:1.28;font-weight:700}

.sect__lede{font-size:27px;line-height:1.16;font-weight:800;margin:0 0 18px;max-width:34ch}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cards3 img{border-radius:var(--radius-sm);aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:10px}
.cards3 h4{font-size:15px;line-height:1.3;font-weight:700}

/* ── tools ───────────────────────────────────────────────────── */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.calc{border:1px solid var(--rule);border-radius:var(--radius-sm);padding:20px 20px 22px;background:var(--surface)}
.calc__h{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;margin:0 0 16px;
}
.calc__row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:center;margin-bottom:12px}
.calc__row label{font-size:15px}
.calc__row input,.calc__row select{
  width:100%;background:var(--field);border:1px solid var(--rule-2);border-radius:7px;
  padding:9px 11px;font:400 15px/1.2 "Inter",sans-serif;color:var(--ink);min-width:0;
}
.calc__row input::placeholder{color:var(--ink-3)}
.btn-calc{
  width:100%;margin-top:8px;background:var(--brand);color:#fff;border:0;border-radius:7px;
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:15.5px;
  padding:12px 16px;cursor:pointer;
}
.btn-calc:hover{background:var(--brand-2)}

/* ── footer ──────────────────────────────────────────────────── */
.footer{background:var(--surface-2);border-radius:var(--radius);padding:30px 30px 16px}
.footer__cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.footer h4{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 14px;
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer li,.footer p{font-size:14px;line-height:1.35;color:var(--ink-2);margin:0}
.btn-sub{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--brand);color:#fff;border:0;border-radius:6px;
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:14.5px;
  padding:9px 14px;cursor:pointer;
}
.btn-sub:hover{background:var(--brand-2);text-decoration:none}
.social{display:flex;gap:14px}
.social a{color:var(--brand);display:flex}
.footer__bar{
  display:flex;gap:14px;align-items:center;
  margin-top:26px;padding-top:14px;border-top:1px solid var(--rule-2);
  font-size:13px;color:var(--ink-3);
}
.footer__bar span:last-child{margin-left:auto}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .lead{grid-template-columns:minmax(0,1fr)}
  .index__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-left:1px solid var(--rule);padding-left:18px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(5){grid-column:1/-1}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:760px){
  .wrap{padding:12px 12px 28px}
  .card__pad{padding:20px 18px 22px}
  .utility{flex-wrap:wrap;padding:10px 18px;gap:8px 12px;font-size:13px}
  .utility__right{margin-left:0;width:100%}
  .signup{flex:1}
  .signup input{width:100%}
  .masthead{flex-wrap:wrap;gap:14px;padding:16px 18px 12px}
  .chip{width:48px;height:48px}
  .wordmark{font-size:27px}
  .tagline{font-size:14px}
  .btn-brief{margin-left:0;width:100%;min-height:44px}
  .nav{gap:14px 20px;padding:2px 18px 14px;font-size:15px}
  .compass{grid-template-columns:repeat(2,minmax(0,1fr))}
  .axis{border-left:1px solid rgba(14,90,69,.14);border-top:1px solid rgba(14,90,69,.14);padding:13px 16px}
  .axis:nth-child(-n+2){border-top:0}
  .axis:nth-child(odd){border-left:0}
  .lead{padding:18px 18px 4px;gap:20px}
  .hero{border-radius:0}
  .hero img{aspect-ratio:4/3;height:auto;min-height:0;border-radius:var(--radius-sm)}
  /* the overlay caption cannot fit over a 4:3 photo at 390px without clipping,
     so on mobile it sits under the photo in ink instead of white-on-scrim */
  .hero__scrim{display:none}
  .hero__txt{position:static;padding:14px 0 0;color:var(--ink)}
  .hero__h{font-size:25px}
  .hero__dek{font-size:16px;color:var(--ink-2)}
  .axis{gap:12px}
  .axis__count{white-space:nowrap}
  .bars{height:28px}
  .bars i{width:9px}
  .index{padding:14px 18px 20px}
  .feature,.cards3,.tools{grid-template-columns:minmax(0,1fr);gap:18px}
  .feature__h,.sect__lede{font-size:23px}
  .calc__row{grid-template-columns:minmax(0,1fr)}
  .footer{padding:24px 18px 14px}
  .footer__cols{grid-template-columns:minmax(0,1fr);gap:22px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:6px}
  .footer__bar span:last-child{margin-left:0}
  .btn-sub,.btn-calc,.iconbtn{min-height:44px}
}

/* ══ fingerprint parity additions (docs/fingerprint-homepage.md) ══════════ */

/* standfirst — the "what this is" block (CF/DS pattern, adds indexable prose) */
.standfirst{padding:22px 30px 0;max-width:78ch}
.standfirst p{margin:0 0 8px;font-size:17.5px;line-height:1.55;color:var(--ink-2)}
.standfirst b{color:var(--ink);font-weight:700}

/* section head row: label + dek + see-all (CF: 18 link-bearing sections) */
.sect__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.sect__head .sect__kicker{margin:0}
.sect__dek{margin:0;font-size:15.5px;color:var(--ink-2);flex:1 1 260px;min-width:0}
.seeall{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:14.5px;
  color:var(--brand);white-space:nowrap;
}

/* card meta: absolute date + relative time + credentialed byline (PH pattern) */
.byline{
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  font-size:12.5px;color:var(--ink-2);margin-top:8px;
}
.byline .who{font-weight:600;color:var(--ink)}
.byline time{font-variant-numeric:tabular-nums}
.byline .sep{color:var(--ink-3)}

/* latest rail gains a thumbnail per item (PH/DS/SHN all carry one) */
.latest li{display:grid;grid-template-columns:66px minmax(0,1fr);gap:12px;align-items:start}
.latest li img{border-radius:6px;aspect-ratio:4/3;object-fit:cover;width:100%}

/* text-link lists under each section lead */
.links{list-style:none;margin:14px 0 0;padding:0}
.links li{padding:9px 0;border-bottom:1px solid var(--rule)}
.links li:last-child{border-bottom:0}
.links a{font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:15px;line-height:1.3}
.links .byline{margin-top:4px}

/* podcast strip (3 of 4 competitors run a podcast module on the homepage) */
.pods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pod img{border-radius:var(--radius-sm);aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:10px}
.pod .ep{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand);
}
.pod h4{font-size:15.5px;line-height:1.28;font-weight:700;margin:4px 0 6px}
.pod p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}

/* notes: Exit Index methodology + calculator sublines */
.index__note,.calc__note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.calc__note{margin:0 0 14px;color:var(--ink-2);font-size:14px}

/* how-we-make-money block above the footer (SHN + DS both link this) */
.disclose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.disclose h3{font-size:19px;font-weight:800;margin:0 0 8px}
.disclose p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.disclose a{color:var(--brand);font-weight:600}

@media (max-width:760px){
  .standfirst{padding:18px 18px 0}
  .standfirst p{font-size:16px}
  .pods,.disclose{grid-template-columns:minmax(0,1fr);gap:18px}
  .latest li{grid-template-columns:56px minmax(0,1fr);gap:10px}
  .sect__head{gap:8px}
  .seeall{min-height:44px;display:inline-flex;align-items:center}
}

/* h1 lifted out of the brand link; masthead geometry unchanged */
.brand{display:flex;align-items:center;gap:18px;min-width:0;flex-wrap:wrap}
.brand__link{display:flex;align-items:center;gap:18px;min-width:0}
.brand .tagline{flex:1 1 100%;margin:0}
.wordmark{margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:761px){
  .brand{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
         column-gap:18px;row-gap:2px;align-items:center}
  .brand__link{display:contents}
  .chip{grid-row:1 / span 2;align-self:center}
  .wordmark{grid-column:2;align-self:end}
  .brand .tagline{grid-column:2;grid-row:2;align-self:start;flex:none}
}

/* the tagline is now an <h1>; keep the mock's regular-weight masthead look */
h1.tagline{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:400;letter-spacing:0;font-size:15.5px;line-height:1.35;color:var(--ink-2)}
@media (max-width:760px){ h1.tagline{font-size:14px} }

/* ══ /tools/ — calculator hub (docs/fingerprint-tools.md) ═════════════════ */
.crumbs{padding:14px 30px 0;font-size:13.5px;color:var(--ink-2)}
.crumbs a{color:var(--brand);font-weight:600}
.crumbs span{color:var(--ink-3);margin:0 2px}

.hubhead{padding:14px 30px 26px;max-width:80ch}
.hubhead h1{font-size:34px;line-height:1.14;font-weight:800;margin:0 0 12px}
.hubhead__lead{margin:0 0 10px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.jump{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0}
.jump a{
  display:inline-block;background:var(--brand-tint);color:var(--brand-2);
  border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;
  font-family:"Inter Tight","Inter",sans-serif;
}
.jump a:hover{background:var(--brand);color:#fff;text-decoration:none}

.calcwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start;margin:4px 0 22px}
.calcx{display:grid;gap:12px}
.out{background:var(--brand-tint);border-radius:var(--radius-sm);padding:20px 22px}
.out__label{
  margin:0 0 4px;font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand-2);
}
.out__big{
  margin:0 0 14px;font-family:"Inter Tight","Inter",sans-serif;font-weight:800;
  font-size:38px;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;
}
.out__dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font-size:14.5px}
.out__dl dt{color:var(--ink-2)}
.out__dl dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

.card__pad h3{font-size:20px;font-weight:800;margin:26px 0 8px}
.card__pad p{font-size:16px;line-height:1.6;margin:0 0 12px}
.chart__intro{color:var(--ink-2);font-size:15px}
.fig{width:100%;height:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-sm);margin:0 0 8px}

.sensbox{display:grid;gap:10px;margin:6px 0 4px}
.sens{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) 5.5rem;gap:14px;align-items:center;font-size:14.5px}
.sens__l{color:var(--ink)}
.sens__bar{background:var(--paper-3);border-radius:999px;height:12px;overflow:hidden}
.sens__bar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.sens__v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

.tablewrap{overflow-x:auto;margin:0 0 8px}
.grid{width:100%;border-collapse:collapse;font-size:14.5px;min-width:min(100%,420px)}
.grid caption{caption-side:bottom;text-align:left;padding:8px 0 0;font-size:13px;color:var(--ink-3)}
.grid th,.grid td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:right;font-variant-numeric:tabular-nums}
.grid th:first-child,.grid td:first-child{text-align:left}
.grid thead th{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule-2);
}
.grid tr.hit td{background:var(--brand-tint);font-weight:700}

.formula{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--paper-3);border-left:3px solid var(--brand);border-radius:0 6px 6px 0;
  padding:11px 14px;font-size:14.5px;line-height:1.5;overflow-x:auto;
}
.assumptions{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:14px 16px;font-size:14.5px;color:var(--ink-2)}
.assumptions a{color:var(--brand);font-weight:600}
.faq h3{font-size:17.5px;margin:18px 0 6px}
.faq p{color:var(--ink-2)}

@media (max-width:760px){
  .crumbs{padding:12px 18px 0}
  .hubhead{padding:12px 18px 20px}
  .hubhead h1{font-size:25px}
  .hubhead__lead{font-size:16px}
  .calcwrap{grid-template-columns:minmax(0,1fr);gap:18px}
  .out__big{font-size:31px}
  .out__dl{grid-template-columns:minmax(0,1fr) auto}
  .sens{grid-template-columns:minmax(0,1fr) 4.5rem;gap:6px 10px}
  .sens__bar{grid-column:1/-1;order:3}
  .jump a{min-height:44px;display:inline-flex;align-items:center}
  .card__pad h3{font-size:18px}
}

/* inline newsletter capture (walletburst + coastfirecalc both run one in-body) */
.capture{background:var(--accent-tint);border-radius:var(--radius-sm);padding:20px 22px;margin:26px 0 8px}
.capture h3{margin:0 0 6px}
.capture p{margin:0 0 12px;color:var(--ink-2);font-size:15px}
.signup--wide{max-width:420px}
.signup--wide input{width:100%}

/* ══ article hubs (/money-mindset/) — docs/fingerprint-mindset.md ══════════ */
.takeaways{background:var(--brand-tint);border-radius:var(--radius-sm);padding:20px 24px;margin:0 0 24px}
.takeaways h2{font-size:15px;font-family:"Inter Tight","Inter",sans-serif;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brand-2);margin:0 0 10px}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{font-size:15.5px;line-height:1.5;margin-bottom:7px}
.takeaways a{color:var(--brand-2);font-weight:700}

.card__pad h2{font-size:26px;line-height:1.18;font-weight:800;margin:30px 0 10px}
.card__pad h2:first-child{margin-top:0}
.card__pad ul,.card__pad ol{margin:0 0 14px;padding-left:22px}
.card__pad li{font-size:16px;line-height:1.6;margin-bottom:8px}
.card__pad a{color:var(--brand);font-weight:600}
.card__pad h3 + p{margin-top:0}

/* The lead figure was rendering 1040x585 and pushing the whole article below the
   fold. 720px is also exactly what its srcset `sizes` hint promises, so the browser
   now downloads the file it actually paints. */
.leadfig{margin:0 0 22px;max-width:720px}
.leadfig img{width:100%;height:auto;border-radius:var(--radius-sm)}
.leadfig figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-3)}

.scripts li{margin-bottom:12px}
.scripts li b{color:var(--ink)}

.podrow{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:center;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:20px 22px;margin:26px 0 20px}
.podrow img{border-radius:var(--radius-sm);width:100%;height:auto}
.podrow h2{margin:0 0 8px;font-size:22px}
.podrow p{margin:0 0 8px;font-size:15.5px}

@media (max-width:760px){
  .takeaways{padding:16px 18px}
  .card__pad h2{font-size:22px;margin-top:24px}
  .podrow{grid-template-columns:minmax(0,1fr);gap:14px}
  .podrow img{max-width:180px}
}

/* podcast hub: subscribe pills + archive list */
.subs a{background:var(--brand);color:#fff}
.subs a:hover{background:var(--brand-2)}
.archive{columns:2;column-gap:34px}
.archive li{break-inside:avoid}
.pods .pod h3{font-size:15.5px;line-height:1.28;font-weight:700;margin:4px 0 6px}
@media (max-width:760px){ .archive{columns:1} }
.byline .status{white-space:normal}
.byline .status b{white-space:nowrap}

/* wide tables on small screens: denser cells so the payload columns fit, plus a
   visible scroll affordance — a silently-clipped "effective rate" column defeats
   the point of the table it lives in */
.tablewrap{position:relative}
@media (max-width:760px){
  .grid{font-size:12.5px;min-width:0}
  .grid th,.grid td{padding:7px 7px}
  .grid thead th{font-size:11px;letter-spacing:.02em}
  .tablewrap::after{
    content:"";position:absolute;top:0;right:0;bottom:22px;width:26px;pointer-events:none;
    background:linear-gradient(to right,rgba(244,246,243,0),rgba(244,246,243,.96));
  }
  .tablewrap.is-scrollable::after{content:""}
  .tablewrap:not(.is-scrollable)::after{display:none}
}
.anat{margin:6px 0 18px}
.anat li{font-size:15.5px;line-height:1.55}
.eyebrow{font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.10em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.est{color:var(--ink-3);font-size:13px}
.checks{margin:6px 0 16px;padding-left:22px}
.checks li{font-size:16px;line-height:1.6;margin-bottom:11px}

/* search results */
.results{list-style:none;margin:0 0 24px;padding:0}
.results li{padding:14px 0;border-bottom:1px solid var(--rule)}
.results li:last-child{border-bottom:0}
.results a{font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:17px;color:var(--brand)}
.results .hitpath{margin:2px 0 4px;font-size:12.5px;color:var(--ink-3)}
.results p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* HOMEPAGE-CALCS-V1 */
.calc__out{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.calc__out:empty{display:none}
.calc__more{margin:8px 0 0;font-size:13px}
.stat__note{margin:4px 0 0;font-size:12px;line-height:1.35;color:var(--ink-3)}
.cards3--1{grid-template-columns:minmax(0,1fr)}
.cards3--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.cards3--2{grid-template-columns:minmax(0,1fr)}}

/* Exit Index: the five labels are different lengths, so two of them wrap and pushed their values
   out of line with the other three. Reserve two lines for every label and the row reads as a row. */
.index__row .stat{display:flex;flex-direction:column}
.index__row .stat__label{line-height:1.3;min-height:2.6em;margin-bottom:0}
.index__row .stat__row{margin-top:0}
.index__row .stat__note{margin-top:auto}

/* READING-MEASURE-V1 */
/* Line length. Measured 2026-08-20: body copy ran the full 1040px column, which is about 127
   characters per line on the hubs and was 168 on the article pages before their container was
   fixed. Typographic practice puts comfortable reading at 60-75; the ch unit ties this to the font
   rather than to a pixel guess, so it holds if the type scale changes.

   Only running text is constrained. Tables, lead figures, card rails, the takeaways box, the
   sensitivity boxes, the FAQ and the calculators all still use the full column, because they are
   laid out to be scanned rather than read line by line. */
.card__pad > p,
.card__pad > h2,
.card__pad > h3,
.card__pad > h4,
.card__pad > ul,
.card__pad > ol,
.card__pad > blockquote{max-width:60ch}   /* 60ch of Inter's zero renders ~70 real characters */
.card__pad > ul.links,
.card__pad > p.assumptions{max-width:66ch}
.card__pad > div.tablewrap,
.card__pad > div.cards3,
.card__pad > div.pods,
.card__pad > div.sensbox,
.card__pad > div.takeaways,
.card__pad > div.faq,
.card__pad > div.calcwrap,
.card__pad > div.tools,
.card__pad > div.feature{max-width:none}
/* Inside the boxed components, the same rule applies to their own running text. */
.takeaways li,
.sensbox p,
.faq p{max-width:66ch}


/* AUTHOR-CARDS-V1 */
/* The authors index reused .sensbox/.sens, which is a three-column text row designed for the
   glossary's definition boxes. With a portrait in the first column the name, tagline and
   role/location were thrown into separate columns and the location clipped off the card. */
.authorgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:6px 0 10px}
.authorcard{display:flex;flex-direction:column;gap:0}
.authorcard img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);
  margin:0 0 12px}
.authorcard h3{margin:0 0 4px;font-size:19px;line-height:1.2}
.authorcard .byline{margin:0 0 8px}
.authorcard p{margin:0 0 8px;font-size:14.5px;line-height:1.45;max-width:none}
.authorcard .more{margin-top:auto;font-size:14px;font-weight:600}
/* The author hub portrait sits beside the name rather than above it, and stays small: it is a
   trust signal, not the subject of the page. */
.authorpic{width:132px;height:132px;object-fit:cover;border-radius:50%;margin:0 0 14px}
@media (max-width:1000px){.authorgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.authorgrid{grid-template-columns:minmax(0,1fr);gap:20px}
  .authorcard img{max-width:200px}}