/* Layout: a financial paper's article page - masthead, leaderboard, article column + right rail; one bold element: the verdict stamp */
:root{
  --paper:#F6F7F9; --surface:#FFFFFF; --ink:#101820; --ink-2:#3B4756; --muted:#667386;
  --rule:#DDE2E9; --rule-strong:#B6C0CC;
  --accent:#2747D9; --winter:#2747D9; --summer:#C98204;
  --edge:#14804A; --half:#B06900; --myth:#C0362C;
  --shade:rgba(39,71,217,.06); --tint:#EEF1FB;
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --ui:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --data:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0D1117; --surface:#141A22; --ink:#E9EEF4; --ink-2:#BAC4D0; --muted:#8B97A7;
  --rule:#252E3A; --rule-strong:#3A4553;
  --accent:#8EA2FF; --winter:#8EA2FF; --summer:#F0B13C;
  --edge:#46C487; --half:#F0B13C; --myth:#FF6F63;
  --shade:rgba(142,162,255,.08); --tint:#171F36; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0D1117; --surface:#141A22; --ink:#E9EEF4; --ink-2:#BAC4D0; --muted:#8B97A7;
  --rule:#252E3A; --rule-strong:#3A4553;
  --accent:#8EA2FF; --winter:#8EA2FF; --summer:#F0B13C;
  --edge:#46C487; --half:#F0B13C; --myth:#FF6F63;
  --shade:rgba(142,162,255,.08); --tint:#171F36; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:16px}
@media (min-width:720px){.wrap{padding-inline:28px}}
.ui{font-family:var(--ui)}
.num{font-variant-numeric:tabular-nums}

/* preview strip */
.preview{background:var(--ink);color:var(--paper);font-family:var(--ui);font-size:12.5px}
.preview .wrap{display:flex;flex-wrap:wrap;gap:4px 14px;padding-block:8px}
.preview b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}

/* top line + masthead */
.topline{font-family:var(--ui);font-size:12px;color:var(--muted);border-bottom:1px solid var(--rule)}
.topline .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-block:9px}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;padding-block:22px 16px}
.brand{font-family:var(--display);font-weight:600;font-size:clamp(2.3rem,6vw,3.6rem);line-height:.95;letter-spacing:-.02em;text-decoration:none}
.brand i{font-weight:400;color:var(--accent);font-size:.62em;margin-inline:.08em;letter-spacing:0}
.mast-side{display:flex;align-items:center;gap:14px;font-family:var(--ui);font-size:13px;color:var(--muted)}
.btn{font-family:var(--ui);font-weight:600;font-size:13px;border:0;background:var(--accent);color:var(--surface);padding:9px 14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.tagline{font-family:var(--ui);font-size:13px;color:var(--ink-2);flex-basis:100%;margin:0}
nav.sections{border-block:1px solid var(--ink);font-family:var(--ui);font-size:13.5px;font-weight:500}
nav.sections ul{list-style:none;margin:0;padding:0;display:flex;gap:2px 22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
nav.sections li a{display:block;padding-block:10px;text-decoration:none;color:var(--ink-2)}
nav.sections li a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}

/* ad spaces */
.ad{font-family:var(--ui);color:var(--muted);display:grid;gap:4px}
.ad small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.ad div{border:1px dashed var(--rule-strong);display:grid;place-items:center;text-align:center;font-size:12px;padding:8px;background:repeating-linear-gradient(135deg,transparent 0 10px,var(--shade) 10px 11px)}
.ad-top{max-width:728px;margin:18px auto 0}
.ad-top div{height:90px}
.ad-in div{height:250px;max-width:336px;margin-inline:auto;width:100%}
.ad-rail div{height:600px}

/* page grid */
.page{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:28px 56px}
@media (min-width:1000px){.page{grid-template-columns:minmax(0,1fr) 300px;gap:56px}}
article{min-width:0;max-width:720px}

.kicker{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);display:flex;flex-wrap:wrap;gap:4px 10px}
.kicker span+span::before{content:"/";color:var(--rule-strong);margin-right:10px}
h1{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.6vw,3.15rem);line-height:1.07;letter-spacing:-.015em;margin:14px 0 0;text-wrap:balance}
.dek{font-size:clamp(1.15rem,2.2vw,1.35rem);line-height:1.45;color:var(--ink-2);margin:16px 0 0;text-wrap:pretty}
.byline{font-family:var(--ui);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.byline b{color:var(--ink);font-weight:600}

/* verdict */
.verdict{margin-top:28px;background:var(--surface);border:1px solid var(--ink);display:grid;gap:20px;padding:22px}
.v-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px}
.v-claim{min-width:0;flex:1 1 300px}
.label{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.v-claim p.q{font-size:1.28rem;line-height:1.35;margin:0;font-style:italic}
.stamp{--v:var(--half);font-family:var(--data);font-weight:600;font-size:1.25rem;letter-spacing:.12em;color:var(--v);border:3px double var(--v);padding:8px 14px;transform:rotate(-4deg);white-space:nowrap;align-self:center}
.scale{display:grid;grid-template-columns:repeat(3,1fr);font-family:var(--ui);font-size:12px;font-weight:600;text-align:center;border:1px solid var(--rule-strong)}
.scale span{padding:7px 4px;color:var(--muted)}
.scale span+span{border-left:1px solid var(--rule-strong)}
.scale .on{background:var(--half);color:var(--surface)}
.v-why{margin:0;font-size:1.06rem;line-height:1.55}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.stats div{background:var(--surface);padding:14px 4px 2px 0;display:grid;gap:2px;align-content:start}
.stats b{white-space:nowrap;font-family:var(--display);font-weight:600;font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.stats b.sold{color:var(--accent)}
.stats span{font-family:var(--ui);font-size:12.5px;color:var(--muted)}

/* prose */
.prose{font-size:1.16rem;line-height:1.62;margin-top:30px}
.prose>*{margin:0}
.prose>*+*{margin-top:1em}
.prose h2{font-weight:600;font-size:1.6rem;line-height:1.2;letter-spacing:-.01em;margin-top:2em;text-wrap:balance}
.prose p{max-width:66ch;text-wrap:pretty}
.prose>figure,.prose>.ad,.prose>.box,.prose>.tablewrap{margin-top:1.8em}
.prose>figure+*,.prose>.ad+*,.prose>.box+*{margin-top:1.8em}

/* figures */
figure{margin:0;display:grid;gap:10px}
.fig-title{font-family:var(--ui);font-weight:600;font-size:15px;line-height:1.35;margin:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2);margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:16px;height:3px;display:inline-block;background:var(--c)}
.legend i.sq{height:10px;width:10px}
.chart{position:relative;min-height:240px;border-top:1px solid var(--ink);padding-top:6px}
.chart svg{display:block;width:100%;overflow:visible}
figcaption{font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--rule);padding-top:8px}
svg text{font-family:var(--ui);font-size:11.5px;fill:var(--muted)}
svg .grid{stroke:var(--rule);stroke-width:1}
svg .zero{stroke:var(--rule-strong);stroke-width:1}
svg .l-hold{fill:none;stroke:var(--ink-2);stroke-width:1.6}
svg .l-strat{fill:none;stroke:var(--accent);stroke-width:2}
svg .a-strat{fill:var(--accent);opacity:.07}
svg .end{font-weight:600;font-size:12.5px}
svg .end.hold{fill:var(--ink-2)}
svg .end.strat{fill:var(--accent)}
svg .guide{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
svg .dot-hold{fill:var(--ink-2)}
svg .dot-strat{fill:var(--accent)}
svg .b-pos{fill:var(--summer)}
svg .b-neg{fill:var(--myth)}
svg .b-on{opacity:.55}
svg .shade{fill:var(--shade)}
svg .avg{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:5 4}
svg .avg-t{fill:var(--ink);font-weight:600}
svg .period{fill:var(--ink-2);font-weight:600;letter-spacing:.04em}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--ink);font-family:var(--ui);font-size:12.5px;line-height:1.45;padding:7px 10px;min-width:150px;z-index:2}
.tip b{display:block;font-weight:600;margin-bottom:2px}
.tip span{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}

/* market bars */
.markets{display:grid;gap:12px;border-top:1px solid var(--ink);padding-top:12px}
.mrow{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
@media (min-width:600px){.mrow{grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:center}}
.mname{font-family:var(--ui);font-size:13.5px;font-weight:500}
.mbars{position:relative;display:grid;gap:3px;padding-right:58px}
.mbars::before{content:"";position:absolute;top:-3px;bottom:-3px;left:calc((100% - 58px) * var(--zf));border-left:1px solid var(--rule-strong)}
.mbar{position:relative;height:13px}
.mbar span{position:absolute;top:0;bottom:0}
.mbar.w span{background:var(--winter)}
.mbar.s span{background:var(--summer)}
.mbar em{position:absolute;top:-2px;font-style:normal;font-family:var(--ui);font-size:11.5px;color:var(--ink-2);padding-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mbar.neg em{transform:translateX(-100%);padding:0 6px 0 0}

/* tables and boxes */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;font-family:var(--ui);font-size:14px;min-width:340px;width:100%;max-width:520px}
caption{text-align:left;font-weight:600;font-size:15px;padding-bottom:8px}
th,td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:right;font-variant-numeric:tabular-nums}
th:first-child{text-align:left}
thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--ink)}
td.sold{color:var(--accent);font-weight:600}
.box{background:var(--tint);padding:20px 22px;display:grid;gap:10px}
.box h3{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:0;color:var(--ink-2)}
.box p{margin:0}
.bottom p{font-size:1.2rem;line-height:1.5}
.bottom em{font-style:normal;font-family:var(--data);font-weight:600;color:var(--half);letter-spacing:.06em}
.method{background:transparent;border:1px solid var(--rule-strong)}
.method dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px 18px;font-family:var(--ui);font-size:13.5px;line-height:1.5}
@media (min-width:600px){.method dl{grid-template-columns:130px minmax(0,1fr)}}
.method dt{font-family:var(--data);font-size:12px;color:var(--muted);padding-top:6px}
.method dd{margin:0;padding-top:4px}
@media (min-width:600px){.method dd{padding-top:6px;border-top:1px solid var(--rule)}.method dt{border-top:1px solid var(--rule)}}
.note{font-family:var(--ui);font-size:13px;color:var(--muted)}

/* newsletter */
.signup{background:var(--ink);color:var(--paper);padding:24px 22px;display:grid;gap:12px;margin-top:2.2em}
.signup h3{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.2;margin:0}
.signup p{font-family:var(--ui);font-size:14px;margin:0;opacity:.85}
.signup form{display:flex;flex-wrap:wrap;gap:8px}
.signup input{flex:1 1 220px;min-width:0;font:inherit;font-family:var(--ui);font-size:15px;padding:10px 12px;border:1px solid var(--paper);background:var(--ink);color:var(--paper)}
.signup input::placeholder{color:var(--paper);opacity:.55}
.signup .btn{background:var(--paper);color:var(--ink);padding:10px 16px}
.signup output{font-family:var(--ui);font-size:13px;min-height:1em}

/* rail */
aside{display:grid;gap:30px;align-content:start;min-width:0}
.rail-h{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:7px;margin:0 0 10px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.board div{background:var(--surface);padding:12px 6px;text-align:center;display:grid;gap:2px}
.board b{font-family:var(--display);font-size:1.8rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.board span{font-family:var(--ui);font-size:11.5px;color:var(--muted)}
.board .e b{color:var(--edge)} .board .h b{color:var(--half)} .board .m b{color:var(--myth)}
.board-note{font-family:var(--ui);font-size:12.5px;color:var(--muted);margin:8px 0 0}
.queue{list-style:none;margin:0;padding:0;font-family:var(--display);font-size:1.05rem;line-height:1.35}
.queue li{padding-block:10px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:6px}
.queue li span{font-family:var(--data);font-size:12px;color:var(--muted);padding-top:3px}
@media (min-width:1000px){.ad-rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)}}

footer{border-top:1px solid var(--ink);font-family:var(--ui);font-size:13px;color:var(--muted)}

footer .brand{font-size:1.6rem}

footer p{margin:0}
@media (prefers-reduced-motion:no-preference){.stamp{animation:press .5s ease-out both}@keyframes press{from{transform:rotate(-4deg) scale(1.25);opacity:.4}to{transform:rotate(-4deg) scale(1);opacity:1}}}

/* verdict colours shared by stamps and chips */
.stamp.edge,.chip.edge{--v:var(--edge)} .stamp.half,.chip.half{--v:var(--half)} .stamp.myth,.chip.myth{--v:var(--myth)}
.chip{--v:var(--half);display:inline-block;font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--v);border:1px solid var(--v);padding:2px 7px;line-height:1.4;white-space:nowrap}
.page.solo{grid-template-columns:minmax(0,1fr)}

/* front page */
.front{min-width:0;display:grid;gap:44px;align-content:start}
.lead{display:grid;gap:14px;padding-bottom:30px;border-bottom:1px solid var(--rule)}
.lead .kicker span:first-child{color:var(--ink)}
.lead-h{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.018em;margin:0;text-wrap:balance}
.lead-h a{text-decoration:none}
.lead-h a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.lead .dek{margin:0}
.lead-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:6px}
.lead-row .stamp{font-size:1.05rem}
.lead-row .stats{flex:1 1 360px;border-top:0;background:transparent;gap:16px}
.lead-row .stats div{background:transparent;padding:0}
.spark{border-top:1px solid var(--ink);padding-top:10px}
.sparksvg{display:block;width:100%;height:150px}
.more{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.more::after{content:"\00a0\2192"}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;counter-reset:s}
.steps li{display:grid;gap:4px;counter-increment:s;align-content:start}
.steps li b{font-family:var(--display);font-size:1.2rem;font-weight:600}
.steps li b::before{content:counter(s) ". ";color:var(--accent)}
.steps li span{font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--ink-2)}
.steps p{margin:14px 0 0;font-family:var(--ui);font-size:14px}
.signup{margin-top:0}

/* list of tests */
.tests{list-style:none;margin:0;padding:0;display:grid}
.ti a{display:grid;gap:5px;padding-block:16px;border-bottom:1px solid var(--rule);text-decoration:none}
.ti a:hover .ti-title{text-decoration:underline;text-underline-offset:4px}
.ti-top{display:flex;align-items:center;gap:10px}
.ti-no{font-family:var(--data);font-size:12px;color:var(--muted)}
.ti-title{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.2;text-wrap:balance}
.ti-short{font-size:1.04rem;line-height:1.5;color:var(--ink-2)}
.ti-meta{font-family:var(--ui);font-size:12.5px;color:var(--muted)}

/* text pages */
.page-text{min-width:0;max-width:700px;font-size:1.14rem;line-height:1.62}
.page-text.wide{max-width:760px}
.page-text>*{margin:0}
.page-text>*+*{margin-top:1em}
.page-text h1{font-weight:600;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.page-text h2{font-weight:600;font-size:1.45rem;line-height:1.25;margin-top:1.8em}
.page-text .lede{font-size:1.28rem;line-height:1.5;color:var(--ink-2)}
.page-text a{color:var(--accent)}
.page-text .tests{margin-top:1.4em;border-top:1px solid var(--ink)}
.addr{font-family:var(--data);font-size:.92em;user-select:all;white-space:nowrap}
.verdicts{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 18px;margin-top:1.2em}
@media (min-width:600px){.verdicts{grid-template-columns:110px minmax(0,1fr)}}
.verdicts dt{padding-top:4px}
.verdicts dd{margin:0 0 10px}

/* market pages */
.mkt{min-width:0;max-width:720px}
.mkt .intro{font-size:1.08rem;line-height:1.55;color:var(--ink-2);margin:14px 0 0;max-width:66ch}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;background:var(--rule);border-block:1px solid var(--ink);margin-top:22px}
.facts div{background:var(--paper);padding:12px 8px 10px 0;display:grid;gap:2px;align-content:start}
.facts b{font-family:var(--display);font-weight:600;font-size:1.65rem;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.facts span{font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.years{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:3px}
.yc{display:grid;gap:1px;padding:6px 7px;font-family:var(--ui);font-variant-numeric:tabular-nums}
.yc span{font-size:11px;color:var(--ink-2)}
.yc b{font-size:13.5px;font-weight:600}
.yc.pos{background:color-mix(in srgb,var(--accent) calc(var(--a) * 55%),transparent)}
.yc.neg{background:color-mix(in srgb,var(--myth) calc(var(--a) * 55%),transparent)}
.faq{display:grid;gap:0;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding-block:12px}
.faq summary{font-weight:600;cursor:pointer;line-height:1.35}
.faq p{margin:8px 0 0;font-size:1.05rem;line-height:1.55;color:var(--ink-2)}
.related{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;font-family:var(--ui);font-size:14px}
.related a{display:inline-block;padding:6px 10px;border:1px solid var(--rule-strong);text-decoration:none}
.related a:hover{border-color:var(--ink)}
td.neg{color:var(--myth);font-weight:600}
table.falls{min-width:560px;max-width:none}
table.mkts{max-width:none;min-width:560px}
table.mkts th a{color:var(--accent);font-weight:600}
svg .a-dd{fill:var(--myth);opacity:.13}
svg .l-dd{fill:none;stroke:var(--myth);stroke-width:1.5}
svg .dot-dd{fill:var(--myth)}
svg .b-up{fill:var(--accent)}

/* test articles from content files */
.scale .on.edge{background:var(--edge)} .scale .on.half{background:var(--half)} .scale .on.myth{background:var(--myth)}
.scale span.on{color:var(--surface)}
.bottom em.edge{color:var(--edge)} .bottom em.myth{color:var(--myth)}
.markets.one .mbars{gap:0}
.mbar.ours span{background:var(--accent)}
.mbar.ref span{background:var(--rule-strong)}
.mbar.early span{background:var(--winter);opacity:.55}
.mbar.late span{background:var(--winter)}
.mbar.plain span{background:var(--ink-2)}
.mbar.neg.plain span,.mbar.neg.ours span{background:var(--myth)}
.lead-why{font-size:1.12rem;line-height:1.55;margin:4px 0 0;max-width:66ch;color:var(--ink)}

/* tools: the calculator */
.tool{min-width:0;max-width:none}
.tool-head{max-width:780px}
.calc{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--ink);background:var(--surface)}
@media (min-width:900px){.calc{grid-template-columns:390px minmax(0,1fr)}}
.calc-in{padding:22px;display:grid;gap:20px;align-content:start;background:var(--paper);border-bottom:1px solid var(--rule)}
@media (min-width:900px){.calc-in{border-bottom:0;border-right:1px solid var(--rule)}}
.fld{display:grid;gap:8px;min-width:0}
.fld>label{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.fbox{display:flex;align-items:center;border:1px solid var(--rule-strong);background:var(--surface);height:46px;min-width:0}
.fbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.fbox input{flex:1 1 auto;width:100%;min-width:0;border:0;background:transparent;font-family:var(--ui);font-size:18px;line-height:1.2;font-weight:500;color:var(--ink);padding:10px 12px;height:auto;font-variant-numeric:tabular-nums lining-nums;outline:none;-moz-appearance:textfield}
.fbox input::-webkit-outer-spin-button,.fbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fbox .pre{font-family:var(--ui);font-size:15px;color:var(--muted);padding-left:13px}
.fbox .pre+input{padding-left:4px}
.fbox .post{font-family:var(--ui);font-size:15px;color:var(--muted);padding-right:13px}
.row2{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:8px;align-items:stretch}
.seg{display:flex;border:1px solid var(--rule-strong);background:var(--surface);min-width:0}
.seg button{flex:1 1 0;min-width:0;font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink-2);background:transparent;border:0;padding:0 4px;min-height:38px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button+button{border-left:1px solid var(--rule)}
.seg button:hover{color:var(--ink);background:var(--paper)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.row2 .seg button{min-height:44px}
.seg-mode button{min-height:44px;font-size:14px;font-weight:600;letter-spacing:.02em}
.calc input[type=range]{width:100%;margin:2px 0 0;accent-color:var(--accent);height:22px;cursor:pointer}
#dep-row.off .fbox{opacity:.45}
.hint{font-family:var(--ui);font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
.calc-out{padding:26px 28px;display:grid;gap:16px;align-content:start;min-width:0;container-type:inline-size}
.when{font-family:var(--ui);font-size:12px;color:var(--muted);margin:0;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.big{font-family:var(--display);font-weight:600;font-size:clamp(2rem,12cqi,4.4rem);line-height:1;margin:-4px 0 0;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.warn{margin:0;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--myth)}
.bar{display:flex;height:12px;background:var(--rule);overflow:hidden}
.bar span{display:block;height:100%}
.k-start{background:var(--ink-2)} .k-added{background:var(--rule-strong)} .k-growth{background:var(--accent)}
.k-taken{background:var(--half)} .k-loss{background:var(--myth)}
.bar-key{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.bar-key li{display:flex;align-items:center;gap:7px}
.bar-key i{width:10px;height:10px;display:inline-block;flex:none}
.bar-key b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--rule)}
.stats3 div{padding:12px 10px 12px 0;display:grid;gap:3px;min-width:0}
.stats3 div+div{padding-left:16px;border-left:1px solid var(--rule)}
.stats3 span{font-family:var(--ui);font-size:12px;color:var(--muted)}
.stats3 b{font-family:var(--display);font-size:clamp(1.05rem,4.4cqi,1.45rem);font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
@media (max-width:440px){.stats3{grid-template-columns:minmax(0,1fr)}.stats3 div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}}
.calc-chart{min-height:210px;border-top:0;padding-top:0}
.legend i.dash{width:16px;height:0;border-top:1.5px dashed var(--ink-2);background:none}
svg .a-base{fill:var(--rule-strong);opacity:.45}
svg .a-up{fill:url(#cg)}
svg .a-down{fill:var(--myth);opacity:.3}
svg .l-bal{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round}
svg .l-base{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:4 4}
svg .dot-bal{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.reality-box{margin-top:26px;border:1px solid var(--rule-strong);background:var(--surface);padding:24px;display:grid;gap:10px}
.reality-box .label{margin:0}
.reality-box h2{font-family:var(--display);font-size:1.55rem;line-height:1.2;margin:0;font-weight:600}
.reality-box>p{margin:0;font-size:1.06rem;line-height:1.55;max-width:72ch}
.reality-box .note{font-size:12.5px}
.rbars{display:grid;gap:9px;margin-top:6px}
.rrow{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) 76px;gap:14px;align-items:center;font-family:var(--ui);font-size:13.5px}
.rrow .rname{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow small{color:var(--muted);font-size:11.5px}
.rtrack{position:relative;height:14px;background:var(--paper)}
.rtrack i{position:absolute;top:0;bottom:0;background:var(--rule-strong)}
.rtrack i.neg{background:var(--myth)}
.rtrack i.over{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent)}
.rrow b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.rrow.you .rname,.rrow.you b{color:var(--accent);font-weight:700}
.rrow.you .rtrack i{background:var(--accent)}
@media (max-width:600px){.rrow{grid-template-columns:minmax(0,1fr) 70px;row-gap:4px}.rrow .rtrack{grid-column:1/-1;grid-row:2}}
.sched-box{margin-top:14px;border:1px solid var(--rule-strong);background:var(--surface)}
.sched-box summary{cursor:pointer;padding:14px 18px;font-family:var(--ui);font-weight:600;font-size:14px;color:var(--ink)}
.sched-box summary:hover{color:var(--accent)}
.sched-box .tablewrap{padding:0 18px 16px}
table.sched{min-width:560px;max-width:none}
.tool .prose{max-width:720px;margin-top:40px}
.calc-out .reality-box{margin-top:8px;border:0;border-top:1px solid var(--rule);padding:20px 0 0;background:transparent}
.calc-out .reality-box h2{font-size:1.3rem}
.calc-out .rrow{grid-template-columns:minmax(0,190px) minmax(0,1fr) 70px}
.formula{font-family:var(--data);font-size:.92em;white-space:nowrap}
.tools-list{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:12px}
.tools-list a{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--ink);text-decoration:none;color:var(--ink)}
.tools-list b{font-family:var(--display);font-size:1.3rem}
.tools-list span{font-family:var(--ui);font-size:14px;color:var(--ink-2)}

/* breadcrumbs */
.crumbs{font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"\203A";margin-right:8px;color:var(--rule-strong)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}
.crumbs+.page{padding-top:16px}
.reality-box>p.label{font-size:11px;line-height:1.3;letter-spacing:.1em}

/* ---------- design pass 15 Oct: shared fixes ---------- */
/* losses are always red in bar charts */
.mbar.neg span{background:var(--myth)!important}
/* tables: headings and dates on one line, full width where it helps */
th,td{white-space:nowrap}
td:first-child,th:first-child{white-space:normal}
.prose table,.mkt table{max-width:none}
.mkt .tablewrap table{width:100%}
/* questions people ask */
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-right:2px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ui);font-weight:400;font-size:1.3rem;color:var(--muted);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--accent)}

/* footer */
footer .foot{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 40px;padding-block:32px 40px}
@media (min-width:760px){footer .foot{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
footer .foot-brand p{margin:8px 0 0;max-width:34ch;line-height:1.5}
footer h3{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
footer nav ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
footer .foot-legal{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:16px;margin:0;max-width:none;font-size:12.5px}

/* promo card (the calculator) */
.promo{display:grid;gap:6px;padding:18px;border:1px solid var(--ink);background:var(--surface);text-decoration:none;color:var(--ink)}
.promo .promo-k{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.promo b{font-family:var(--display);font-size:1.25rem;font-weight:600;line-height:1.2}
.promo span:not(.promo-k){font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.promo em{font-style:normal;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--accent)}
.promo em::after{content:"\00a0\2192"}
.promo:hover b{text-decoration:underline;text-underline-offset:4px}
.promo.wide{grid-template-columns:minmax(0,1fr);padding:22px 24px}
@media (min-width:700px){.promo.wide{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px}.promo.wide .promo-k,.promo.wide b,.promo.wide span{grid-column:1}.promo.wide em{grid-column:2;grid-row:1/4;border:1px solid var(--accent);padding:10px 16px}}

/* market rail */
.mrail{list-style:none;margin:0;padding:0;display:grid}
.mrail a{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--ui);font-size:13.5px;color:var(--ink-2)}
.mrail a:hover{color:var(--ink);background:var(--surface)}
.mrail a[aria-current]{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent);padding-left:9px}
.mrail b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

/* home: chart in the lead, market cards, the tool */
.lead-fig{margin-top:4px}
.lead-fig figure{gap:8px}
.home-markets .mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}
.mcard{display:grid;gap:3px;padding:16px;border:1px solid var(--rule-strong);background:var(--surface);text-decoration:none;color:var(--ink)}
.mcard:hover{border-color:var(--ink)}
.mc-name{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-2)}
.mc-big{font-family:var(--display);font-size:2rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.mc-sub,.mc-dd{font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.mc-dd b{color:var(--myth);font-weight:600}
.home-markets p{margin:14px 0 0}

/* articles: keep reading */
.keep{margin-top:2.6em;border-top:1px solid var(--ink);padding-top:18px}
.keep h2{font-family:var(--display);font-size:1.5rem;margin:0 0 14px}
.keep h3{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.keep-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:760px){.keep-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.keep-grid>div{display:grid;gap:12px;align-content:start}
.keep-tests{list-style:none;margin:0;padding:0;display:grid}
.keep-tests a{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.keep-tests b{grid-column:1/-1;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.4}
.keep-tests a:hover b{text-decoration:underline;text-underline-offset:3px}
.keep .related{margin-bottom:4px}

/* markets index */
.mk-index h2{font-family:var(--display);font-size:1.4rem;margin-top:1.6em}
.mk-index table.mkts{width:100%;min-width:620px}
.mk-index td.yr{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.ybar{display:inline-block;width:110px;height:8px;background:var(--rule)}
.ybar i{display:block;height:100%;background:var(--accent)}
.ybar i.neg{background:var(--myth)}
.ybar i.over{-webkit-mask-image:linear-gradient(to right,#000 75%,transparent);mask-image:linear-gradient(to right,#000 75%,transparent)}
.mk-index td.yr b{min-width:52px;text-align:right;font-weight:600}

/* tools page */
.tools-page{max-width:none}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px;margin-top:1.4em}
.tcard{display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--rule-strong);background:var(--surface);text-decoration:none;color:var(--ink)}
.tcard.live{border-color:var(--ink)}
.tcard.live:hover b{text-decoration:underline;text-underline-offset:4px}
.tcard.soon{opacity:.72}
.tc-art{width:100%;height:90px;display:block;margin-bottom:6px;overflow:visible}
.tc-base{fill:none;stroke:var(--rule-strong);stroke-width:1.5;stroke-dasharray:4 4}
.tc-area{fill:var(--accent);opacity:.18}
.tc-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.tc-line.red{stroke:var(--myth)}
.tc-block{fill:var(--rule-strong)}
.tc-block.on{fill:var(--accent)}
.tc-k{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tcard.soon .tc-k{color:var(--muted)}
.tcard b{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.2}
.tc-d{font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.tcard em{font-style:normal;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--accent)}
.tcard em::after{content:"\00a0\2192"}
.mk-index,.tools-page{max-width:none}
.mk-index .lede,.tools-page .lede{max-width:780px}
.mk-index table.mkts{table-layout:fixed}
.mk-index table.mkts th:nth-child(1){width:28%}
.mk-index table.mkts th:nth-child(2){width:9%}
.mk-index table.mkts th:nth-child(3){width:27%}
.mk-index table.mkts th:nth-child(4),.mk-index table.mkts th:nth-child(5),.mk-index table.mkts th:nth-child(6){width:12%}
.mk-index .ybar{width:clamp(60px,14vw,180px)}
@media (max-width:640px){
  .mk-index table.mkts{min-width:0}
  .mk-index table.mkts th:nth-child(4),.mk-index table.mkts td:nth-child(4),
  .mk-index table.mkts th:nth-child(6),.mk-index table.mkts td:nth-child(6){display:none}
  .mk-index table.mkts th:nth-child(1){width:38%}
  .mk-index table.mkts th:nth-child(2){width:15%}
  .mk-index table.mkts th:nth-child(3){width:30%}
  .mk-index table.mkts th:nth-child(5){width:17%}
  .mk-index .ybar{display:none}
  .lead-row .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .lead-row .stats b{font-size:clamp(1.15rem,5.6vw,1.6rem)}
  .lead-row .stats span{font-size:11.5px}
  .verdict .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .verdict .stats b{font-size:clamp(1.05rem,5.2vw,1.5rem)}
  .verdict .stats div{padding-right:6px}
}