@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans.woff2)format("woff2");
 font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-italic.woff2)format("woff2");
 font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic.woff2)format("woff2");
 font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2)format("woff2");
 font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url(/fonts/caveat.woff2)format("woff2");
 font-weight:500 600;font-style:normal;font-display:swap}
:root{
  --bg:#F7F6F0; --paper-drawn:#F6F4E6; --bg2:#EDEBE1; --panel:#FBFBF6; --line:#E3E1D7; --line2:#D1CEC0; --sel:#FAEEED;
  --ink:#1D1A18; --ink2:#3B3632; --muted:#67615A;
  --rich:#1D1A18; --cheap:#67615A; --pos:#1D1A18; --neg:#1D1A18; --acc:#973533;
  --grid:rgba(29,26,24,.05);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -14px rgba(0,0,0,.22);
  --ui:"Instrument Sans",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.odo,
td,
th,
.kv .v,
.meter .n,
.lane .val,
.tier .price,
.plan .price,
.buy .price,
.fig .v,
.dial dd,
.sp .n{font-variant-numeric:tabular-nums}
.odo .st{font-variant-numeric:normal}
a{color:inherit}
p{margin:12px 0;max-width:60ch}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}
.kicker{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
h1{margin:0;font-size:clamp(38px,4.6vw,66px);line-height:.98;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
h1 em,
h2 em{font:italic 400 1.08em var(--serif);letter-spacing:-.01em;color:var(--ink)}
h2{margin:0;font-size:clamp(26px,2.7vw,36px);line-height:1.06;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
p.lede{font-size:17px;line-height:1.5;color:var(--ink2);max-width:54ch;margin-top:18px}
p.muted,
p.small{color:var(--muted)}
p.small{font-size:13px}
a.x{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line2)}
.mono{font-family:var(--mono)}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:6px;height:56px;font-size:13px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.02em;margin-right:22px;text-decoration:none}
.brand i{width:16px;height:16px;border-radius:5px;background:var(--acc);display:block;-webkit-mask:radial-gradient(circle at 35% 35%,transparent 22%,#000 23%);mask:radial-gradient(circle at 35% 35%,transparent 22%,#000 23%)}
.tabs{display:flex;gap:2px}
.tabs a{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;color:var(--ink2);font-weight:500;border-radius:8px}
.tabs a:hover{background:var(--bg)}
.top .right{margin-left:auto}
.btn{height:36px;padding:0 15px;border:1px solid var(--ink);border-radius:9px;background:var(--ink);color:var(--panel);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;font-size:13px;white-space:nowrap;transition:transform .2s,opacity .2s}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line2)}
.btn.big{height:44px;padding:0 20px;font-size:14px}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.hero{position:relative;padding:56px 0 24px}
.hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px 56px;align-items:center}
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.cta .or{font-size:13px;color:var(--muted)}
.cta .or a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line2)}
.nocard{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.tier.paid{border-color:var(--ink)}
.tier .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tier .price{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.tier .price small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.tier p{margin:0;font-size:13px;color:var(--ink2);line-height:1.45;max-width:none}
.tier p a{color:var(--acc);text-decoration:none}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}
.rise.d2{animation-delay:.16s}
.rise.d3{animation-delay:.24s}
.rise.d4{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.fig{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:0}
.fig .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fig .v{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.fig .v small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.fig .v .vs{color:var(--muted);font-weight:500;font-size:18px}
.fig .v .c{color:var(--cheap)}
.fig .v .d{color:var(--rich)}
.fig p{margin:4px 0 0;font-size:13px;color:var(--ink2);line-height:1.45;max-width:none}
.odo{display:inline-flex;height:1em;line-height:1;overflow:hidden;vertical-align:baseline}
.odo .st{display:inline-block}
.odo .dg{display:inline-block;height:1em;overflow:hidden}
.odo .dg u{display:block;text-decoration:none;transform:translateY(calc(var(--d) * -1em));animation:roll 1.5s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--delay) + var(--k) * 70ms)}
.odo .dg u i{display:block;height:1em;font-style:normal}
@keyframes roll{from{transform:translateY(0)}}
.paper{border-radius:18px;padding:12px;background-color:var(--bg2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;margin:22px 0}
.win{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;position:relative;font-size:13px}
.titlebar{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid var(--line)}
.titlebar .t{margin:0 auto;font:500 11.5px var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .act{font:500 10.5px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--bg);white-space:nowrap}
.titlebar .act.paid{color:var(--rich);border-color:var(--rich)}
.titlebar{height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}
.titlebar .t{white-space:normal;text-align:center;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.status{display:flex;align-items:center;height:30px;border-top:1px solid var(--line);font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--muted);overflow:hidden}
.status span{padding:0 14px;border-right:1px solid var(--line);height:100%;display:flex;align-items:center;white-space:nowrap}
.status .r{margin-left:auto;border-right:0;border-left:1px solid var(--line)}
.note{padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.5}
.note a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line2)}
.band{padding:56px 0 18px;border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px 48px;align-items:start}
.split .paper{margin:0}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(138px,1fr);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px;scrollbar-width:thin}
.day{scroll-snap-align:start;border:1px solid var(--line);border-radius:10px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:5px;min-height:150px;background:var(--panel);animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 40%}
.day .dow{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.day .sym{font-weight:700;font-size:24px;letter-spacing:-.03em;line-height:1}
.day .sess{font-size:11.5px;color:var(--muted)}
.day .hid{margin-top:auto;display:grid;gap:4px}
.day .hid div{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.dots{font-family:var(--mono);letter-spacing:.2em;color:var(--line2)}
.dials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
.dial{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.dial svg{width:140px;height:140px}
.dial .t{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline}
.dial .t b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.dial .t span{font:500 10.5px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.dial dl{margin:0;display:grid;gap:5px;font-size:13px}
.dial dl div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:3px}
.dial dt{color:var(--muted)}
.dial dd{margin:0;font-weight:600}
.track{stroke:var(--line);stroke-width:10;fill:none}
.arc{fill:none;stroke-linecap:round;animation:sweep 1.2s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
.arc.q{stroke:var(--line2);stroke-width:10}
.arc.r{stroke:var(--rich);stroke-width:12}
.dial .c{font:600 30px var(--ui);fill:var(--ink);letter-spacing:-.03em}
.dial .cl{font:500 10.5px var(--mono);fill:var(--muted);letter-spacing:.12em;text-transform:uppercase}
@keyframes sweep{from{stroke-dashoffset:var(--len)}}
.splits{padding:14px;display:grid;gap:14px}
.sp{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.sp .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sp .t b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.sp .t span{font:500 10.5px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sp .row{display:grid;grid-template-columns:82px 1fr 56px;gap:10px;align-items:center;font-size:13px;padding:4px 0}
.sp .row .l{color:var(--muted)}
.sp .row .n{text-align:right;font-weight:600}
.sp .bar{height:12px;border-radius:6px;background:var(--bg);position:relative;overflow:hidden}
.sp .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;width:var(--w);background:var(--line2);animation:grow 1s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
.sp .row.rep .bar i{background:var(--rich)}
.sp .row.ord .bar i{background:var(--cheap)}
.sp .row.rep .n{color:var(--rich)}
.sp .row.ord .n{color:var(--cheap)}
.sp .sum{font:500 11.5px var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
@keyframes grow{from{width:0}}
.tw{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1080px}
th{background:var(--panel);text-align:right;font:500 11.5px var(--ui);color:var(--muted);padding:0 10px;height:36px;border-bottom:1px solid var(--line2);white-space:nowrap}
th.l,
td.l{text-align:left}
td{padding:0 10px;height:38px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle}
tr:hover td{background:var(--sel)}
th.l,
td.l{position:sticky;left:0;background:var(--panel);box-shadow:1px 0 0 var(--line)}
tr:hover td.l{background:var(--sel)}
td .tk{font-weight:600;letter-spacing:-.01em;font-size:13px}
td .c{color:var(--muted);font-size:11.5px;margin-left:8px}
td.pos{color:var(--pos)}
td.neg{color:var(--neg)}
td.dim{color:var(--muted)}
td .rich{color:var(--rich);font-weight:600}
td .cheapc{color:var(--cheap);font-weight:600}
td .lab{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:5px}
.sh{display:inline-block;width:56px;height:5px;border-radius:3px;background:var(--line);position:relative;vertical-align:middle;margin-right:8px}
.sh i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--acc);width:var(--w)}
.gg{display:inline-block;width:56px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--cheap),var(--line) 50%,var(--rich));position:relative;vertical-align:middle;margin-right:8px}
.gg i{position:absolute;top:-3px;width:2px;height:11px;background:var(--ink);left:calc(var(--p) - 1px)}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.group{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.group h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.group h3.c{color:var(--cheap)}
.group h3.d{color:var(--rich)}
.group .dsc{font-size:13px;color:var(--muted);margin:2px 0 14px}
.meter{display:grid;gap:9px}
.meter .row{display:grid;grid-template-columns:66px 1fr auto;gap:10px;align-items:center;font-size:11.5px}
.meter .row span:first-child{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.meter .bar{height:10px;border-radius:999px;background:var(--bg);overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:999px;background:var(--ink);width:var(--w);animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
.meter .row.blend .bar i{background:var(--line2)}
.meter .n{font-weight:600;font-size:17px;letter-spacing:-.02em}
.meter .n small{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:4px}
.group .cnt{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec{display:grid;grid-template-columns:1fr 1fr}
.rec > div{padding:16px 18px}
.rec > div + div{border-left:1px solid var(--line)}
.rec .h{font-weight:600;font-size:14px}
.rec .h + p{margin:2px 0 12px;font-size:13px;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.kv .k{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kv .v{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1}
.kv .v small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:5px;letter-spacing:0}
.kv .sub{grid-column:1/-1;font-size:11.5px;color:var(--muted)}
.rec .n{font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}
.rec{grid-template-rows:auto auto auto auto auto}
.rec > div{display:grid;grid-template-rows:subgrid;grid-row:1/-1}
.rec .n{line-height:1.5;text-wrap:balance}
.rec .kv .v{grid-column:2;grid-row:1/span 2;align-self:center}
.rec .kv .sub{grid-column:1;grid-row:2}
.ranges{padding:18px 18px 12px}
.axis{position:relative;height:16px;margin:0 0 6px 140px;font:500 10.5px var(--mono);color:var(--muted)}
.axis span{position:absolute;transform:translateX(-50%)}
.rrow{display:grid;grid-template-columns:140px 1fr;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.rrow .who{font-size:13px}
.rrow .who b{display:block;font-weight:600}
.rrow .who small{color:var(--muted);font:500 10.5px var(--mono)}
.lane{position:relative;height:30px}
.lane .zero{position:absolute;top:-8px;bottom:-8px;left:25%;border-left:1px dashed var(--line2)}
.lane .rb{position:absolute;top:12px;height:6px;border-radius:999px;background:var(--bg2);left:var(--a);width:calc(var(--b) - var(--a));animation:grow-in 1s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
.lane .pt{position:absolute;top:6px;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line2);left:calc(var(--m) - 9px);animation:pop 1s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
.lane .val{position:absolute;top:-4px;left:calc(var(--m) + 14px);font-weight:600;font-size:13px;white-space:nowrap}
.lane .val.flip{left:auto;right:calc(100% - var(--m) + 14px)}
.val small{font:500 10.5px var(--mono);color:var(--muted);margin-left:4px}
.ranges{--vcol:156px}
.rrow{grid-template-columns:140px minmax(0,1fr) var(--vcol);column-gap:16px}
.axis{margin-right:calc(var(--vcol) + 16px)}
.vcol{min-width:0}
.vcol .val{position:static;left:auto;right:auto;top:auto;white-space:nowrap;display:block}
.axis span:last-child{transform:translateX(-100%)}
.rrow.base .pt{background:var(--line2)}
.rrow.cheap .pt{background:var(--cheap)}
.rrow.dear .pt{background:var(--rich)}
@keyframes grow-in{from{transform:scaleX(0);transform-origin:left}}
@keyframes pop{from{transform:scale(0)}}
.buy{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;padding:16px 18px;border-top:1px solid var(--line);background:var(--sel)}
.buy .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.buy .price{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}
.buy .price small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:4px}
.buy p{margin:0;font-size:13px;color:var(--ink2)}
.brow{display:grid;grid-template-columns:110px minmax(0,1fr) 110px 110px;gap:12px;padding:0 18px;height:38px;align-items:center;border-top:1px solid var(--line);font-size:13px}
.brow.h{font:500 11.5px var(--ui);color:var(--muted);height:36px;border-top:0;border-bottom:1px solid var(--line2)}
.brow b{font-weight:600}
.brow .r{text-align:right}
@media (max-width:520px){.brow{grid-template-columns:70px minmax(0,1fr) 54px 54px;gap:8px;padding:0 12px;font-size:11.5px}}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.plan.paid{border-color:var(--ink)}
.plan .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan .price{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}
.plan .price small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan p{margin:0;font-size:13px;color:var(--ink2);max-width:none}
.plan .btn{align-self:flex-start;margin-top:auto}
.plan .fine{font-size:11.5px;color:var(--muted)}
footer{margin-top:64px;border-top:1px solid var(--line);padding:24px 0 44px;font-size:11.5px;color:var(--muted)}
footer .wrap{display:grid;gap:6px}
footer a{color:var(--ink2)}
@media (max-width:980px){.hgrid{grid-template-columns:minmax(0,1fr)}.split{grid-template-columns:minmax(0,1fr)!important}.figs{grid-template-columns:minmax(0,1fr)}.groups{grid-template-columns:minmax(0,1fr)}.plans{grid-template-columns:minmax(0,1fr)}.rec{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.rec > div{display:block;grid-row:auto}.rec > div + div{border-left:0;border-top:1px solid var(--line)}.dials{grid-template-columns:1fr}}
@media (max-width:640px){.hero{padding-top:36px}.tiers{grid-template-columns:1fr}.fig .v{font-size:34px}.rrow{grid-template-columns:1fr;gap:6px}.lane{order:1}.axis{margin-left:0;margin-right:0}.ranges{padding:14px 12px 10px}.paper{padding:8px;border-radius:14px}.sp .row{grid-template-columns:70px 1fr 50px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:root{--report:#973533;--ordinary:#366373}
body{font-size:16px;line-height:1.6}
p{max-width:62ch}
p.lede{font-size:18px;color:var(--ink2)}
.fig p,
.tier p,
.plan p{font-size:13px}
.kicker{display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:18px;height:2px;background:linear-gradient(90deg,var(--report) 0 50%,var(--ordinary) 50% 100%);border-radius:1px}
.brand{gap:8px;font-weight:700;letter-spacing:-.03em;font-size:16px}
.brand .mark{display:block;color:var(--ink)}
.brand i{display:none}
.titlebar .mark{width:14px;height:14px;color:var(--muted)}
.band{padding:72px 0 24px}
.chip{display:inline-block;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.chip.dear{background:var(--ink);color:var(--panel)}
.chip.cheap{border:1px solid var(--muted);color:var(--muted)}
.gg{background:var(--line);width:56px}
.gg i{background:var(--ink);width:2px}
.fig .v .c,
.fig .v .d{color:var(--ink)}
td .rich,
td .cheapc{color:var(--ink);font-weight:600}
.sh{background:var(--ordinary);width:64px}
.sh i{background:var(--report)}
.hero-sky{padding:44px 0 30px;overflow:hidden}
.skyimg{position:absolute;inset:-56px 0 0 0;background:url(/img/background.jpg) center 35%/cover no-repeat;animation:kb 48s ease-in-out infinite alternate;z-index:0}
.skyimg{filter:saturate(.6) hue-rotate(10deg) sepia(.08)}
.pwin::before,
.band.macro::before{filter:hue-rotate(-12deg) saturate(.8)}
.hero-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,246,240,0) 0%,rgba(247,246,240,.10) 58%,rgba(247,246,240,.55) 84%,var(--bg) 100%);pointer-events:none}
.hero-sky .wrap{position:relative;z-index:1}
.herowin{background:var(--paper-drawn);border:1px solid var(--line);border-radius:16px;box-shadow:0 34px 70px -30px rgba(29,26,24,.38),var(--shadow);overflow:hidden}
.herowin .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.herowin .txt{padding:30px 32px 32px}
.hprism{position:relative;border-left:1px solid var(--line);min-height:460px;overflow:hidden;background:var(--bg2)}
.hprism img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadein 1.4s ease both}
.hprism .lbl{position:absolute;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:var(--shadow);animation:rise .8s cubic-bezier(.2,.7,.2,1) both;white-space:nowrap;backdrop-filter:blur(3px)}
.hprism .lbl.q{left:3%;top:47%;animation-delay:.6s}
.hprism .lbl.r{right:5%;top:24%;color:var(--report);border-color:var(--report);animation-delay:1.1s}
.hprism .lbl.o{right:5%;top:62%;color:var(--ordinary);border-color:var(--ordinary);animation-delay:1.4s}
@keyframes kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-2%)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.top{background:color-mix(in srgb,var(--panel) 72%,transparent)}
@media (max-width:980px){.herowin .body{grid-template-columns:1fr}.hprism{border-left:0;border-top:1px solid var(--line);min-height:0;aspect-ratio:3/2}.hprism .lbl.q{top:51%}}
.pwin{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.flat{position:relative;overflow:hidden;background:var(--bg2);min-height:380px}
.flat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadein 1.2s ease both}
.flat .lbl{position:absolute;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:var(--shadow);white-space:nowrap;animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 60%}
.flat .lbl.q{left:4%;top:41%}
.flat .lbl.r{right:4%;top:22%;color:var(--report);border-color:var(--report)}
.flat .lbl.o{right:4%;top:66%;color:var(--ordinary);border-color:var(--ordinary)}
.forks{padding:10px 18px 14px;display:grid;gap:6px;border-left:1px solid var(--line)}
.fork{padding:8px 0}
.fork .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.fork .t b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.fork .t span{font:500 10.5px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.fork svg{width:100%;height:auto;display:block}
.fork .pr{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.fork text{font-family:var(--ui);font-size:13px;fill:var(--ink)}
.fork text.k{font-family:var(--mono);font-size:10.5px;fill:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.fork text.v{font-weight:700}
.fork text.r{fill:var(--report)}
.fork text.o{fill:var(--ordinary)}
.fork{view-timeline:--fk block}
.fork .ln{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:drawln 1s cubic-bezier(.2,.7,.2,1) both;animation-timeline:--fk;animation-range:entry 10% entry 60%}
.fork .ln.q{stroke:var(--ink)}
.fork .glow{opacity:.3}
.fork .glow.q{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:round;opacity:.12}
.fork .glow.r{fill:var(--report)}
.fork .glow.o{fill:var(--ordinary)}
.fork .wg{transform:scale(0);animation:wedge 1s cubic-bezier(.2,.7,.2,1) both;animation-timeline:--fk;animation-range:entry 40% entry 100%}
.fork .wg.r{fill:var(--report)}
.fork .wg.o{fill:var(--ordinary)}
@keyframes wedge{to{transform:scale(1)}}
.fork .tk{stroke:var(--line2);stroke-width:1}
.fork .tk.maj{stroke:var(--muted)}
.fork .tk.base{stroke:var(--line2)}
.fork .ghost{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:3 5;opacity:.7}
.fork .pulse{fill:#FBFBF6;stroke-width:1.5;offset-distance:0%;animation:travel 3.2s linear infinite}
.fork .pulse.r{stroke:var(--report)}
.fork .pulse.o{stroke:var(--ordinary)}
.fork .pulse.q{stroke:var(--ink)}
@keyframes travel{from{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{offset-distance:100%;opacity:0}}
.fork tspan.sh{font-family:var(--mono);font-size:10.5px;fill:var(--muted);font-weight:400;letter-spacing:.06em}
@keyframes drawln{to{stroke-dashoffset:0}}
.forks .sum{font:500 11.5px var(--mono);color:var(--muted);letter-spacing:.04em;padding-top:8px;border-top:1px dashed var(--line)}
@media (max-width:980px){.pwin{grid-template-columns:1fr}.forks{border-left:0;border-top:1px solid var(--line)}.flat{min-height:0;aspect-ratio:16/9}}
.band.macro{position:relative;overflow:hidden}
.band.macro::before{content:"";position:absolute;inset:0;background:url(/img/background_2.jpg) right center/cover no-repeat;-webkit-mask:linear-gradient(90deg,transparent 44%,#000 68%);mask:linear-gradient(90deg,transparent 44%,#000 68%);opacity:.95;animation:kb 44s ease-in-out infinite alternate}
.band.macro .wrap{position:relative;z-index:1}
.band.macro .paper{background-color:rgba(237,235,225,.55);backdrop-filter:blur(2px)}
footer .brandrow{display:flex;align-items:center;gap:14px;margin-bottom:10px}
footer .brandrow img{width:56px;height:56px;border-radius:14px;box-shadow:var(--shadow)}
footer .brandrow b{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink);display:flex;align-items:center;gap:8px}
.hprism{background:var(--paper-drawn);border-left:0}
@media (min-width:981px){.hprism{overflow:visible;z-index:0}.hprism img{width:132%;left:-32%;padding:0;object-fit:contain;-webkit-mask:linear-gradient(90deg,transparent 10%,#000 42%);mask:linear-gradient(90deg,transparent 10%,#000 42%)}.herowin .body>div:first-child{position:relative;z-index:1}}
.hprism img{object-fit:contain;padding:10px}
.hprism .lbl{font:600 23px "Caveat",cursive;letter-spacing:0;text-transform:none;background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;transform:rotate(-3deg)}
.hprism .lbl.q{color:var(--ink)}
.hprism .lbl.r{color:var(--report)}
.hprism .lbl.o{color:var(--ordinary)}
.win:has(.pwin){background:var(--paper-drawn)}
.pwin .forks{border-left:0}
@media (min-width:981px){
.pwin{position:relative;background:url(/img/felt-tile.jpg) center/1663px auto,var(--paper-drawn)}
.pwin::before{content:'';position:absolute;inset:0;z-index:0;background:url(/img/felt-photo.jpg) -284px center/1210px auto no-repeat;-webkit-mask:linear-gradient(90deg,#000 0 51.2%,rgba(0,0,0,.22) 57%,transparent 66%);mask:linear-gradient(90deg,#000 0 51.2%,rgba(0,0,0,.22) 57%,transparent 66%)}
.pwin::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 51.2%,color-mix(in srgb,var(--paper-drawn) 72%,transparent) 64%,color-mix(in srgb,var(--paper-drawn) 72%,transparent) 100%)}
.pwin>*{position:relative;z-index:1}
.pwin .flat{background:none}
.pwin .flat img{display:none}
.pwin .forks{background:none}
}
.band .wrap{position:relative;z-index:1}
.band:has(+ .band.macro) .paper{background-color:rgba(228,226,212,.55);backdrop-filter:blur(2px)}
.band.macro{overflow:visible}
.band.macro::before{inset:-180px 0;-webkit-mask-image:linear-gradient(90deg,transparent 44%,#000 68%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.30) 8.4%,#000 18.7%,#000 81.3%,rgba(0,0,0,.30) 91.6%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 44%,#000 68%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.30) 8.4%,#000 18.7%,#000 81.3%,rgba(0,0,0,.30) 91.6%,transparent 100%);mask-composite:intersect}
.band.macro .bl{font-size:13px}
.band.macro .blh,
.band.macro .blr{display:grid;
  grid-template-columns:24px minmax(0,1fr) 84px 148px;gap:10px;align-items:center;
  padding:0 16px;min-height:38px}
.band.macro .blh{font:500 10.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);min-height:30px;border-bottom:1px solid var(--line2)}
.band.macro .blr{border-top:1px solid var(--line)}
.band.macro .blr .n{font:500 11.5px var(--mono);color:var(--muted)}
.band.macro .blr .s{display:flex;align-items:baseline;gap:8px;min-width:0}
.band.macro .blr .s b{font-weight:600;font-size:14px;letter-spacing:-.015em}
.band.macro .blr .s i{font-style:normal;color:var(--muted);font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band.macro .r{justify-self:end;display:flex;align-items:center;justify-content:flex-end;
  white-space:nowrap}
.band.macro .blr .r{font-variant-numeric:tabular-nums}
.band.macro .hide{display:inline-block;height:10px;border-radius:2px;
  background:repeating-linear-gradient(135deg,var(--line2) 0 2px,transparent 2px 5px)}
.band.macro .hide.w1{width:22px}
.band.macro .hide.w3{width:44px}
.band.macro .gg.empty i{display:none}
.band.macro .blr.lk{background:var(--bg2)}
.band.macro .blr.lk .s b{color:var(--ink2);font-weight:500}
.band.macro .blsec{display:flex;align-items:baseline;gap:12px;padding:9px 16px 8px;
  border-top:1px solid var(--line2)}
.band.macro .blsec .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink)}
.band.macro .blsec .t{font-size:11.5px;color:var(--muted);margin-left:auto}
.band.macro .blsec .t a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line2)}
.band.macro .blsec .t a:hover{border-bottom-color:var(--acc)}
.band.macro .blsec.free{background:var(--sel)}
.band.macro .blsec.paid{background:var(--line2)}
.band.macro .blsec.paid .t{color:var(--ink2)}
@media (max-width:640px){
  .band.macro .blh,.band.macro .blr{grid-template-columns:18px minmax(0,1fr) 56px 96px;
    gap:8px;padding:0 11px}
  .band.macro .blh{font-size:10.5px;letter-spacing:.05em}
  .band.macro .blr .s{flex-direction:column;align-items:stretch;gap:0}
  .band.macro .blr .s > *{min-width:0}
  .band.macro .blr .s b{font-size:13px}
  .band.macro .blr .s i{font-size:10.5px;line-height:1.35}
  .band.macro .blr{min-height:44px;font-size:13px}
  .band.macro .gg{width:34px;margin-right:5px}
  .band.macro .blr .chip{margin-left:4px;padding:2px 5px;font-size:10.5px}
  .band.macro .blsec{padding:8px 11px 7px}
  .band.macro .blsec .k{font-size:10.5px}
  .band.macro .blsec .t{font-size:10.5px}
  .band.macro .hide.w3{width:34px}
  .band.macro .status span{padding:0 8px}
}
.rz{display:inline-flex;align-items:center;white-space:nowrap}
.rz .gg{margin-right:0;flex:none}
.rz .rv{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.rz .rc{flex:none;display:inline-flex;align-items:center}
.band.macro .blr .rz .chip,
.rz .rc .chip{margin-left:0}
.rz-t{gap:8px}
.rz-t .rv{width:28px}
.rz-t .rc{width:52px}
.rz-b{gap:6px}
.rz-b .rv{width:24px}
.rz-b .rc{width:50px}
.band.macro .blr .rz .hide{vertical-align:middle;width:100%}
@media (max-width:640px){.rz-b{gap:6px}.band.macro .blr .rz-b .gg{display:none}
.rz-b .rv{width:19px}.rz-b .rc{width:48px}
.band.macro .blr .rz .chip{font-size:10.5px;padding:2px 4px;letter-spacing:.05em}}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-sky{overflow-x:clip;overflow-y:visible}
.skyimg{inset:-56px 0 -240px 0;-webkit-mask:linear-gradient(180deg,#000 0 84%,transparent 97%);mask:linear-gradient(180deg,#000 0 84%,transparent 97%)}
.hero-sky::after{inset:0 0 -300px 0;background:linear-gradient(180deg,rgba(247,246,240,0) 0%,rgba(247,246,240,.08) 50%,rgba(247,246,240,.30) 70%,rgba(247,246,240,.62) 78%,rgba(247,246,240,.80) 84%,rgba(247,246,240,.95) 92%,var(--bg) 96%,var(--bg) 100%)}
.hero-sky + .band{border-top:0}
.start-free .split3{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start;margin-top:22px}
.start-free .free .lede{margin-top:0}
.start-free .acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 0;max-width:none}
.start-free .acts .or{font-size:13px;color:var(--muted)}
.start-free .asks{font-size:13px;color:var(--muted);max-width:none;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.start-free .plan{display:grid;grid-template-rows:auto auto auto auto auto;gap:0;padding:24px 26px;margin-top:12px;background:var(--paper-drawn);border-color:var(--line2)}
.start-free .plan .k{margin-bottom:16px}
.start-free .plan .price{font-size:30px;margin-bottom:12px}
.start-free .plan .price small{font-size:12px;color:var(--muted)}
.start-free .plan p{font-size:15px;line-height:1.5;margin:0 0 20px}
.start-free .plan .btn{justify-self:start;margin:0 0 12px;background:var(--ink);color:var(--panel);border-color:var(--ink)}
.start-free .plan .fine{font-size:12px}
@media (max-width:980px){.start-free .split3{grid-template-columns:minmax(0,1fr);gap:28px}}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:26px;
 background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.proof .pc{background:var(--paper-drawn);padding:14px 16px 15px;display:flex;flex-direction:column}
.proof .pk{font:500 9.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;
 color:var(--muted);margin-bottom:7px}
.proof .pv{font:600 25px/1.05 var(--ui);letter-spacing:-.025em;color:var(--ink);margin-bottom:8px}
.proof .pv i{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
.proof .pv b{font-weight:600}
.proof .pv .cheap{color:var(--ordinary)}
.proof .pv .dear{color:var(--report)}
.proof .ps{font-size:11.5px;line-height:1.5;color:var(--ink2);max-width:34ch}
@media (max-width:860px){
  .proof{grid-template-columns:1fr}
  .proof .ps{max-width:none}
}
.gg .mk{position:absolute;left:0;top:-3px;width:100%;height:11px;display:block}
.gg .mk rect{fill:var(--ink)}
.sh{overflow:hidden}
.sh .fl{position:absolute;left:0;top:0;width:100%;height:5px;display:block}
.sh .fl rect{fill:var(--acc)}
.band.macro .gg .mk rect{fill:var(--ink)}
.band.macro .sh .fl rect{fill:var(--report)}
.u1{color:var(--ink2)}
.u2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:8px}
.u3{margin-top:8px}
.u4{margin-top:8px;color:var(--muted)}
.u5{--l:88}
.u6{transform-origin:200px 87px}
.u7{transform-origin:200px 97px}
.u8{offset-path:path('M200 87 L270.1 69.5')}
.u9{offset-path:path('M200 97 L250.1 110.4');animation-delay:-1.3s}
.u10{offset-path:path('M96 92 H180');animation-delay:-2.1s}
.u11{--l:120}
.u12{offset-path:path('M200 87 L314.6 58.4')}
.u13{offset-path:path('M200 97 L218.9 102.1');animation-delay:-1.3s}
.u14{offset-path:path('M64 92 H180');animation-delay:-2.1s}
.u15{color:var(--report)}
.u16{color:var(--ordinary)}
.u17{text-decoration:none;color:var(--acc)}
.u18{--w:97%}
.u19{--w:75%}
.u20{--w:83%}
.u21{--w:72%}
.u22{--w:76%}
.u23{--w:69%}
.u24{color:var(--muted)}
.u25{left:25%}
.u26{left:50%}
.u27{left:75%}
.u28{left:100%}
.u29{--a:33%;--b:80.25%}
.u30{--m:56.775%}
.u31{--a:22.25%;--b:48.75%}
.u32{--m:35.35%}
.u33{--a:14.5%;--b:61.25%}
.u34{--m:37.95%}
.tagp,
.tagf{font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 7px;white-space:nowrap}
.tagp{color:var(--rich);border:1px solid var(--rich)}
.tagf{color:var(--muted);border:1px solid var(--line2)}
.srcs .k{display:block;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.srcs{border-top:1px solid var(--line);padding:15px 18px 17px}
.srcs dl{margin:0;display:grid;grid-template-columns:76px minmax(0,1fr);gap:9px 16px}
.srcs dt{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.srcs dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.top a[href="#"]{outline:2px dashed var(--neg)}
.nav-id{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;
 color:var(--ink2);font-weight:500;border-radius:8px}
.nav-id:hover{background:var(--bg)}
.tabs a{--tab-pad:12px}
.tabs a[aria-current]{position:relative;color:var(--acc);font-weight:600}
.tabs a[aria-current]::after{content:"";position:absolute;left:var(--tab-pad);
 right:var(--tab-pad);bottom:4px;height:2px;border-radius:1px;background:var(--acc)}
.top{--bar-h:0px}
.top .wrap{flex-wrap:wrap;height:auto;min-height:56px;row-gap:0}
.top .right{gap:12px}
@media (max-width:820px){
  .top .wrap{padding:0 16px}
  .brand{margin-right:12px}
  .tabs{order:3;width:100%;margin:0 -4px 6px;overflow-x:auto;scrollbar-width:none}
}
html{--mt-top:0px}
@media (min-width:701px){.mt-ph{display:none!important}}
@media (max-width:700px){.mt-dt{display:none!important}}
.mt-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){
  .win>.status{flex-wrap:wrap;height:auto;padding:5px 0 6px}
  .win>.status span{min-height:21px;padding:2px 14px;border:0;white-space:normal}
  .win>.status .r{margin-left:0;flex-basis:100%;border:0}
  .win:is(:has(table),:has(.mt-rows))>.titlebar{height:auto;min-height:40px;padding-top:8px;padding-bottom:8px}
}
@media (hover:none) and (max-width:700px){.mt-kbd{display:none!important}}
@property --mt-fr{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes mt-edge{from{--mt-fr:44px}to{--mt-fr:0px}}
.tw,
.f pre{animation:mt-edge linear both;animation-timeline:scroll(self inline);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mt-fr)),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - var(--mt-fr)),transparent)}
@media (max-width:700px),(pointer:coarse){
  .top .brand{min-width:44px;min-height:44px;justify-content:center}
  .tabs a{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .nav-id{min-height:44px}
}
@media (max-width:520px){.top>.brand{margin-left:-12px}}
@media (max-width:520px){.top .brand .btxt{display:inline;position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
@media (min-width:701px){
  .win>.status{flex-wrap:wrap;height:auto;min-height:30px}
  .win>.status span{height:auto;min-height:29px;white-space:nowrap}
}
.mt-lens{display:none}
@media (max-width:700px){
  .mt-lens{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;min-width:0;
    padding:0 10px;border:0;border-bottom:1px solid var(--line);background:var(--panel)}
  .mt-lens .k{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin-right:2px}
  .mt-lens label{position:relative;display:flex;align-items:center;min-height:44px;cursor:pointer}
  .mt-lens input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  .mt-lens label span{display:block;min-width:44px;text-align:center;padding:5px 11px;
    border:1px solid var(--line2);border-radius:999px;font:500 12px var(--ui);color:var(--ink2);
    background:var(--bg);white-space:nowrap}
  .mt-lens input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--panel)}
  .mt-lens input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
  .mt-lens label:hover span{border-color:var(--ink2)}
  .win:has(.mt-lens) thead th{white-space:normal;line-height:1.2}
  .win:has(.mt-lens) td .tag{display:inline-block}
  .mt-when{display:block;margin-top:2px;font:500 10px var(--mono);letter-spacing:0;
    color:var(--muted);white-space:nowrap}
}
@media (max-width:700px){
  .win:has(.mt-lens) table{min-width:0}
  .win:has(.mt-lens) td .c{display:block;margin:2px 0 0;white-space:normal;line-height:1.3;max-width:96px}
  .win:has(.mt-lens) :is(td,th).l{position:static;box-shadow:none;padding-left:12px}
  .win:has(.mt-lens) td{height:auto;padding-top:8px;padding-bottom:8px}
  .win:has(.mt-lens) :is(th,td){padding-left:8px;padding-right:8px}
  .win:has(.mt-lens) .sh{width:44px;margin-right:6px}
  .win:has(.mt-lens) .rz-t{gap:6px}
  .win:has(.mt-lens) .rz .gg{width:44px}
  .win:has(.mt-lens) .rz-t .rv{width:24px}
}
@media (max-width:360px){
  .win:has(.mt-lens) :is(th,td){padding-left:5px;padding-right:5px}
  .win:has(.mt-lens) td.l{padding-left:10px}
  .win:has(.mt-lens) .sh{width:34px;margin-right:5px}
  .win:has(.mt-lens) .rz-t{gap:5px}
  .win:has(.mt-lens) .rz .gg{width:34px}
  .win:has(.mt-lens) .rz-t .rv{width:22px}
  .win:has(.mt-lens) .rz-t .rc{width:46px}
  .win:has(.mt-lens) .rz .chip{font-size:9.5px;padding:2px 5px;letter-spacing:.04em}
}
@media (max-width:700px),(pointer:coarse){
  .btn{height:44px}
  .u17,footer span:last-child a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .cta .or{line-height:44px}
  .cta .or a{padding:15px 0}
}
.cta .or a{border-bottom:0;text-decoration-line:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-skip-ink:none}
@media (max-width:700px){
  .win:has(#mtl-mtland-priced:checked) #mtland :is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-mtland-split:checked) #mtland :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-mtland-after:checked) #mtland :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){display:none}
  .win:has(#mtl-mtland-cost:checked) #mtland :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(9),:nth-child(10)){display:none}
}
@media (min-width:641px){.axis{margin-left:156px}}
@media (max-width:1199px){.split:has(.ranges){grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:820px){.top .wrap{padding-left:20px;padding-right:20px}}
@media (max-width:520px){.top .wrap>.brand{margin:0 0 0 -11px}}
@media (min-width:360px) and (max-width:820px){
  .top .wrap{flex-wrap:nowrap}
  .tabs{order:0;width:auto;flex:none;margin:0;overflow:visible}
}
@media (min-width:360px) and (max-width:520px){.tabs a{padding:0 8px;--tab-pad:8px}.nav-id{padding:0 8px}}
@media (min-width:360px) and (max-width:420px){.tabs a{padding:0 6px;--tab-pad:6px}.nav-id{padding:0 6px}}
@media (min-width:360px) and (max-width:374px){.tabs a{padding:0 5px;--tab-pad:5px}.nav-id{padding:0 5px}}
.tw a.tk,
.blr .s a{color:inherit;text-decoration:none}
.tw a.tk:hover,
.blr .s a:hover{text-decoration:underline}

/* ---- product additions (BUILD_PLAN 3.82): every rule below is a logged difference ---- */
/*
 * Appended to every ported page's stylesheet and to chrome.css (scripts/port_mockup_css.py).
 * Each rule is a logged difference from the mockups (BUILD_PLAN 3.82).
 */

/*
 * TIER VARIANTS (3.64), rewritten for the mockup cascade. app.css reveals a variant with
 * `display: revert`, which rolls back to the UA value and would drop the mockup's
 * `.nav-id{display:flex}` for exactly the signed-in readers. So these HIDE the variants that do
 * not apply and never set a display for the one that does: whatever the page's own rules say
 * is what shows. (b: the page bytes are identical for every reader, 3.64.)
 */
html[data-tier] .tier-anon,
html:not([data-tier]) .tier-auth,
html:not([data-tier='free']) .tier-free,
html:not([data-tier='paid']) .tier-paid{display:none!important}

/*
 * The theme switch ships `hidden` (decision 18). The mockup's `.icon-btn{display:inline-grid}`
 * beats the UA's `[hidden]{display:none}`, so without this the attribute would do nothing.
 * `theme.js` sets `html.js` at parse time, before the bar exists, so a reader with scripts on
 * never sees the bar change after load; with scripts off the dead button stays hidden.
 */
html:not(.js) .icon-btn[hidden]{display:none}

/*
 * "ON" STATES ARE LINEN AND INK (3.409, `mockups/board-select/` option A, operator 2026-11-03). The
 * mockups mark every selected, pressed and current thing with `--sel` (the accent's pink) and an
 * oxblood edge, and oxblood already MEANS something on these pages: the report's part of the split,
 * a negative number, a link. So an open row was tinted the colour of the report, under every
 * figure in it. `--on-bg` is the page's own paper one step deeper and `--on` is ink: a row, a
 * pressed filter, a current tab or a picked item is pulled forward, not coloured. `--sel` is left
 * as it is, because `/`'s subscribe band and its free macro block use it as a fill and stay pink
 * (operator). Checked at 4.5:1 or better for the muted text on `--on-bg` in both modes.
 */
:root{--on-bg:#ECE8DC;--on:#1D1A18}
:root[data-theme="dark"]{--on-bg:#2A2822;--on:#EFEDE7}

/*
 * THE COMPACT FOOTER (operator, 2026-09-28). The mockup's footer set each disclaimer on its own
 * line, padded every link to a 44px box, and sat 64px below a separate readout/theme row, so
 * the pair took most of a phone screen. Now: one bar (links, readout, theme switch), and no
 * disclaimer lines (operator). The links are 32px tall, over WCAG 2.2 AA's 24px.
 *
 * The readout and the switch are shown where the top bar does not show them: the switch from
 * 360px up (the top bar keeps it below 360px, where it has room), and the readout from 360 to
 * 820px only (the top bar shows it everywhere else). On a phone the two head the footer; on a
 * desktop the switch ends the link row. (d)
 */
footer.site{margin-top:8px;padding:14px 0 20px}
footer.site .site-in{gap:2px}
.site-bar{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;min-height:34px}
.site-links{display:flex;flex-wrap:wrap;gap:0 16px;flex:1 1 auto;font-size:12.5px}
/* Terms and Privacy wrap as a pair, so a wrapped row never strands one word on a line */
.site-pair{display:flex;gap:inherit}
footer.site .site-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink2);text-decoration:none}
footer.site .site-links a:hover{text-decoration:underline}
/* 3.418: what VolModel is, one sentence above the links (SITE_DEFINITION; SEO audit item 9). */
footer.site .site-def{max-width:68ch;margin:2px 0 8px;font:400 13px/1.55 var(--ui);color:var(--muted)}
.site-bar>.state{display:none}
.site-bar .icon-btn{flex:none}
/* 3.433: down to 320 too, now that the footer's switch is the only one (it was hidden below 360,
   where the bar carried its own) */
@media (max-width:820px){
.site-bar>.state{display:flex;flex:1 1 auto;order:-1}
.site-bar .icon-btn{order:-1}
.site-links{flex-basis:100%}
.site-bar.bare>.state{display:none}
.site-bar.bare .icon-btn{order:0}
.site-bar.bare .site-links{flex:1 1 0;min-width:0}}
@media (min-width:375px) and (max-width:520px){.site-bar .fresh .long{display:inline}}
@media (max-width:520px){.site-links{gap:0 12px}}
/* the page notes above the footer end in 40px of padding, and the footer adds its own */
.wrap>.foot,body>.foot{padding-bottom:12px}

/*
 * "Sign in" in the top bar stands out from the section tabs (operator, 2026-09-28): a quieted
 * accent (60% accent, 40% ink2, so it does not compete with the current tab's full accent) and a
 * heavier weight. "Account", the signed-in variant, stays plain.
 */
.nav-id.nav-signin{color:color-mix(in srgb,var(--acc) 60%,var(--ink2));font-weight:600}
.bgaccent{overflow:clip;animation:none}
.bgaccent::before{content:"";position:absolute;inset:0;background:inherit;animation:bgkb 48s ease-in-out infinite alternate}
/*
 * THE TWO RULES ABOVE: THE DAYBREAK ZOOM DOES NOT WIDEN THE PAGE (BUILD_PLAN 3.111). The
 * mockup zooms the whole `.bgaccent` box (`bgkb`, scale 1 to 1.07 over 48s), and a transformed
 * box counts toward the
 * page's scrollable width. So in light mode every page with the band scrolled sideways, growing
 * with the zoom to 50px at 1440 and 13px at 375 (dark hides the band). The box now stays put and
 * clips, and the photo zooms inside it on `::before`, which inherits the box's background. The
 * veil (`::after`) and the mask no longer zoom with it.
 */

/*
 * THE PHONE LENS AS ONE SEGMENTED ROW (3.115). The mockups' lens is a row of pills that wraps:
 * "Cost after" sat alone on a second line on /, and the other lens pages wrapped the same way.
 * Each segment is as wide as its label and the row fills the width, so it fits a 320px phone
 * wherever the labels do (`check_css.mjs` cannot see widths; 3.115 measured each page). The
 * "Show" label goes because the control explains itself; the legend stays for screen readers.
 * The fieldset's bottom rule moves onto the table under it, which every lens page puts next.
 */
@media (max-width:700px){
  .mt-lens{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:2px;margin:10px;padding:2px;
    border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
  .mt-lens .k{display:none}
  .mt-lens label span{width:100%;min-width:0;padding:10px 6px;border:0;border-radius:999px;
    background:transparent;font-size:12.5px}
  .mt-lens input:checked+span{background:var(--ink);color:var(--panel)}
  .mt-lens label:hover span{border:0}
  .mt-lens+.tw{border-top:1px solid var(--line)}
}
/* the narrowest phones: /accuracy/'s three labels overflowed the row by a few px at 320 */
@media (max-width:360px){
  .mt-lens{margin:10px 8px}
  .mt-lens label span{padding:10px 4px;font-size:12px}
}

/*
 * THE BAR PER READER (BUILD_PLAN 3.150, mockups/topbar-audit/). A visitor's "Sign in" gets a
 * filled "Create free account" button beside it from 768px up, and goes plain there so the two
 * do not compete; below 768px the button is hidden and "Sign in" keeps its accent. A free
 * reader's "Upgrade" takes that quiet accent. The tier rules above still win (`!important`), so
 * on a cached page the button never shows to a signed-in reader. (d)
 *
 * The button is an ink PILL with a chevron (3.320, mockups/topbar-nav-states/ round 2, R1): the
 * only round object on the bar, so it reads as the one action rather than an 8px-cornered slab
 * that matched nothing beside it. Hover warms the ink a step toward the accent, lifts it, and
 * moves the chevron 2px forward, in place of the flat `opacity:.88` dim. 4px more air before it.
 */
.top .nav-cta{display:none}
@media (min-width:768px){
.top .nav-id.nav-signin.has-cta{color:var(--ink2);font-weight:500}
.top .nav-id.nav-signin.has-cta:hover{color:var(--ink)}
.top .nav-cta{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 15px;margin-left:4px;
  border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--panel);
  font:600 13px var(--ui);text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:background .15s,border-color .15s,box-shadow .15s}
.top .nav-cta::after{content:"";width:6px;height:6px;margin-top:1px;border:solid currentColor;
  border-width:1.6px 1.6px 0 0;transform:rotate(45deg);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.top .nav-cta:hover{background:color-mix(in srgb,var(--ink) 86%,var(--acc));
  border-color:color-mix(in srgb,var(--ink) 86%,var(--acc));
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 16px -8px rgba(0,0,0,.45)}
.top .nav-cta:hover::after{transform:translateX(2px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.top .nav-cta,.top .nav-cta::after{transition:none}}
.top .nav-id.nav-upgrade{color:color-mix(in srgb,var(--acc) 60%,var(--ink2));font-weight:600}
/*
 * THE BAR'S LINKS ARE UNDERLINED WORDS, NOT BOXES (3.320, mockups/topbar-nav-states/, option C).
 * The mockup's current tab carried three signals (a tinted box, the accent, and an underline
 * floating inside the box), and its hover box was LIGHTER than the frosted bar, so it read as a
 * white patch, and a hovered tab beside the current one looked like a second selection. Now the
 * current page is ink (the accent until 3.409), weight 600 and a 2px underline under the word; hover is ink and a faint
 * ink underline at the same offset. The identity link takes the same two states: on its own page
 * (/login/'s "Sign in", /account/'s "Account", which until 3.150 only a screen reader could
 * tell) it is current, and an open Account menu shows the hover state. (d)
 */
.tabs a,.top .nav-id{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;
  text-decoration-color:transparent;transition:color .15s,text-decoration-color .15s}
.tabs a:hover,.top .nav-id:hover,.am[open]>summary{background:none;color:var(--ink);
  text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.tabs a[aria-current],.top .nav-id[aria-current]{background:none;color:var(--on);font-weight:600;
  text-decoration-color:var(--on)}
.tabs a[aria-current]::after{content:none}
@media (prefers-reduced-motion:reduce){.tabs a,.top .nav-id{transition:none}}

/*
 * ONE BASELINE ON THE RIGHT OF THE BAR (3.153). The bar centres every item's BOX, and a box holding
 * 11px JetBrains Mono centres onto a different baseline than one holding 13px Instrument Sans: the
 * readout ("Updated 6 Oct") sat 0.58px above "Account" beside it, which reads as misaligned at any
 * zoom. The text-bearing items now share a baseline; the theme switch, which has no text, stays
 * centred. The group's tallest item (the 34px button where there is one, else the identity link)
 * keeps its place, so nothing but the readout moves.
 */
.top .right>.state,.top .right>.nav-id,.top .right>.btn:not(.icon-btn){align-self:baseline}

/*
 * SEARCH IN THE BAR (3.157, mockups/topbar-search/, phone layout B). The field from 1024px up,
 * growing from 160 to 300px; below that an icon opens a panel (search.js). Measured on the real
 * bars at every width from 320 to 1440: a field narrower than ~160px is not usable, and below 1024
 * one reader or another has less than that (a visitor 41-120px at 821-940, a free reader 24-104px
 * at 560-640).
 *   - basis 160, not 300: the bar is flex-wrap, and a line wraps on an item's BASIS before it
 *     shrinks one. A 300px basis wrapped a visitor's bar to 67px at 1024.
 *   - from 821 to 1023 the readout leaves the bar to make room for the icon, as it already does
 *     at 360-820; the footer carries it at every width.
 *   - on a phone the Method tab leaves the bar for the icon (it is in the footer). Below 360 the
 *     bar is already two rows, and the icon joins the tabs row instead.
 *   - the icon is 32px tall like the links beside it (44 where they are): the right side aligns on
 *     the text baseline (3.153), and a taller icon grew the group and lifted "Sign in" 4px.
 */
.srch{position:relative;flex:1 1 160px;max-width:300px;min-width:0;margin-left:14px}
.srch-box{display:flex;align-items:center;gap:8px;height:34px;padding:0 7px 0 10px;border:1px solid var(--line2);
  border-radius:9px;background:var(--bg);color:var(--muted);cursor:text}
.srch-box:hover{border-color:color-mix(in srgb,var(--ink2) 35%,var(--line2))}
.srch-box:focus-within{border-color:var(--acc);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.srch-box svg{flex:none}
.srch input,.srch-sheet input{flex:1;min-width:0;height:100%;border:0;padding:0;margin:0;background:none;outline:0;
  font:500 13.5px var(--ui);color:var(--ink);-webkit-appearance:none;appearance:none}
.srch input::placeholder,.srch-sheet input::placeholder{color:var(--muted);opacity:1}
.srch input::-webkit-search-cancel-button,.srch-sheet input::-webkit-search-cancel-button{display:none}
.srch kbd{flex:none;font:600 10.5px/1 var(--mono);color:var(--muted);border:1px solid var(--line2);border-radius:5px;
  padding:3px 6px;background:var(--panel)}
.srch-box:focus-within kbd{visibility:hidden}
.srch-pop{position:absolute;top:calc(100% + 8px);left:0;width:min(460px,calc(100vw - 32px));max-height:min(70vh,560px);
  overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;z-index:40}
.srch-pop[hidden]{display:none}
.srch-hd{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.sr{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:40px;
  padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.sr:hover{background:var(--hover)}
.sr[aria-selected="true"]{background:var(--on-bg);box-shadow:inset 2px 0 0 var(--on)}
.sr .sy{font:600 13px var(--mono);letter-spacing:.01em}
.sr .nm{font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .mt,.ix-l .mt{display:flex;align-items:center;gap:6px;font:500 11.5px var(--ui);color:var(--muted);white-space:nowrap}
.sr .ss,.ix-l .ss{font:500 9.5px var(--mono);letter-spacing:.06em;color:var(--ink2);border:1px solid var(--line2);
  border-radius:5px;padding:1px 5px}
.sr .ss.amc,.ix-l .ss.amc{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.sr .et,.ix-l .et{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--muted);border:1px solid var(--line2);
  border-radius:5px;padding:1px 5px}
.sr mark{background:none;color:var(--acc);font-weight:700}
.sr .go{display:none;font:600 11px var(--mono);color:var(--acc)}
.sr[aria-selected="true"] .go{display:inline}
.srch-none{padding:14px 12px 12px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.srch-none b{color:var(--ink)}
.srch-none a{color:var(--acc);font-weight:600;text-decoration:none}
.srch-ft{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:6px;
  padding:9px 10px 5px;font:500 11px var(--mono);color:var(--muted)}
.srch-ft kbd{font:inherit;border:1px solid var(--line2);border-radius:4px;padding:0 4px}
.srch-ico{display:none;align-self:center;place-items:center;flex:none;width:36px;height:32px;margin:0;padding:0;border:0;
  border-radius:8px;background:none;color:var(--ink2);cursor:pointer}
.srch-ico:hover{background:var(--bg)}
@media (max-width:700px),(pointer:coarse){.srch-ico{min-height:44px}}
@media (max-width:1023px){.srch{display:none}.srch-ico.in-right{display:inline-grid}}
@media (min-width:821px) and (max-width:1023px){.top .right>.state{display:none}}
@media (max-width:520px){.tabs a[href="/methodology/"]{display:none}}
/*
 * ONE ROW DOWN TO 320 (3.433, mockups/topbar-oneline/, option A). Below 360 the bar used to wrap
 * the tabs onto a second row (95px) with the search icon beside them; now 360-820's single row
 * runs all the way down, with the padding stepped down once more. The readout goes, as it does
 * from 360 (the footer carries it), and the theme switch is the footer's only.
 */
@media (max-width:359px){
  .top{flex-wrap:nowrap}
  .tabs{order:0;width:auto;flex:none;margin:0;overflow:visible}
  .top .right>.state{display:none}
  .srch-ico.in-right{width:32px}
  .tabs a{padding:0 4px;--tab-pad:4px}
  .nav-id{padding:0 4px}
  .top .right{gap:4px}
  .brand{margin-right:4px}
}
/* the panel: a sheet over the page on a phone, a centred box from 521px */
.srch-sheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--panel)}
.srch-sheet[hidden]{display:none}
@media (min-width:521px){.srch-sheet{inset:auto;top:64px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));
  max-height:min(72vh,620px);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow)}}
html.srch-open{overflow:hidden}
@media (min-width:521px){html.srch-open{overflow:visible}}
.srch-sh-top{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--line)}
.srch-sh-top .srch-box{flex:1;height:44px;border-radius:10px;border-color:var(--acc);background:var(--panel);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.srch-sh-top input{font-size:16px}
.srch-x{flex:none;height:44px;padding:0 6px;border:0;background:none;font:600 14px var(--ui);color:var(--acc);cursor:pointer}
.srch-sh-list{flex:1;overflow:auto;padding:4px 6px 24px}
.srch-sheet .sr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sy mt" "nm nm";row-gap:2px;min-height:56px;padding:9px 10px}
.srch-sheet .sr .sy{grid-area:sy;font-size:14px}
.srch-sheet .sr .nm{grid-area:nm;font-size:14px}
.srch-sheet .sr .mt{grid-area:mt}
.srch-sheet .srch-ft{display:none}

/*
 * A COMPANY'S TWO VIEWS (3.171, `mockups/company-views/` E3). Both `/earnings/<sym>/` and
 * `/t/<SYM>/` open with the same one-line head and, for a company with a public page, the same
 * switch at the top of the figures column (`views/view-switch.ts`). Here, not in the two pages'
 * own files, because it is one component and the two copies would drift.
 *
 * The head: one line at every width. The symbol, the parent and the separators never shrink; a
 * long company name is cut with an ellipsis instead of wrapping the line.
 */
.kicker.k1{display:flex;align-items:baseline;white-space:nowrap;min-width:0;max-width:100%}
.kicker.k1 > *{flex:none}
.kicker.k1 .knm{flex:0 1 auto;min-width:3ch;overflow:hidden;text-overflow:ellipsis}
.kicker.k1 .ksp{color:var(--muted);margin:0 .6em}
.kicker.k1 .kdt{margin:0 .6em}
.kicker.k1 .kc{color:var(--acc);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--acc) 35%,transparent);
  text-underline-offset:3px;text-decoration-thickness:1px}
.kicker.k1 .kc:hover{text-decoration-color:var(--acc)}
@media (max-width:700px){.kicker.k1 .kc{display:inline-flex;align-items:center;min-height:44px;margin:-15px 0}}
/* 3.191: the ellipsis above never engaged. The head sits in `.lead`'s first column, a grid item
   with the default `min-width:auto`, so the column grew to the head's no-wrap width instead of
   letting `.knm` shrink: "Hewlett Packard Enterprise Co" made the head 352px in a 343px column at
   375, hidden by the page's overflow clip. A control after the name would be pushed off screen. */
.lead>div:has(>.kicker.k1){min-width:0}

/*
 * THE WATCH CONTROL (3.191, `mockups/watchlist/` K1): "· ☆ WATCH" in the head's own type, ink where
 * the breadcrumb is accent, and "· ★ WATCHING" in the accent once the name is on the list. The
 * text sets the baseline (the star is centred on it), and the 44px tap area is a pseudo-element,
 * so the head's line does not grow. A pending button (the cached page, before `watch.js` has
 * asked) is dimmed and not pressable.
 */
.kicker.k1 .kx-sep{color:var(--muted);margin:0 .6em}
.k1w{position:relative;display:inline-flex;align-items:baseline;gap:.5em;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink2);text-decoration:none;-webkit-tap-highlight-color:transparent}
.k1w::after{content:"";position:absolute;inset:-16px -6px}
.k1w .wl-i{position:relative;top:-1px;align-self:center;flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.k1w:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.k1w:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
.k1w .on-t{display:none}
.k1w.on{color:var(--on)}
.k1w.on .wl-i{fill:currentColor}
.k1w.on .on-t{display:inline}
.k1w.on .off-t{display:none}
.k1w[aria-busy=true]{opacity:.45;cursor:progress}
.wl-toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:calc(100vw - 32px);transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;
  padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 13.5px/1.4 var(--ui);box-shadow:var(--shadow);transition:opacity .18s,transform .18s}
.wl-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.wl-toast a{margin-left:10px;color:inherit;font-weight:600}

/*
 * THE ACCOUNT MENU (3.191, `mockups/watchlist/` round 2, M1). A `<details>`: its summary is the
 * bar's "Account" (`.nav-id`, so it keeps that link's look, its current-page underline and its
 * hit area), and the panel drops below it, right-aligned to the bar's edge. The wrapper takes
 * 3.153's baseline rule, which keys on `.nav-id`: without it the readout ("Updated 13 Oct") lost
 * its line beside Account the first time the menu was rendered.
 */
.am{position:relative;display:flex}
.top .right>.am{align-self:baseline}
.am-t{list-style:none;cursor:pointer;gap:6px;user-select:none;-webkit-user-select:none}
.am-t::-webkit-details-marker{display:none}
.am-t:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.am-cv{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.am[open]>summary{color:var(--ink)}
.am[open] .am-cv{transform:rotate(180deg)}
.am-p{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:292px;padding:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -18px rgba(0,0,0,.35);font:14px/1.4 var(--ui);text-align:left}
.am-who{padding:10px 12px 11px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.am-who b{display:block;font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-who span{display:block;margin-top:2px;font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.am-i{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:10px;width:100%;min-height:44px;padding:7px 10px;
  border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;font-weight:550;text-align:left;text-decoration:none;cursor:pointer}
/* Hover is `--bg2`, not `--hover`: `landing.css` defines `--hover` only for dark, so on `/` the
   light hover painted nothing, and where it is defined it sits one barely visible step off the panel
   (#F5ECE3 on #FDFAF5). Dark keeps `--hover`, which every page defines there and which is LIGHTER
   than its panel, where `--bg2` would be darker. */
.am-i:hover,.am-i:focus-visible{background:var(--bg2);outline:0}
.am-i:hover .am-ic,.am-i:focus-visible .am-ic{color:var(--ink)}
.am-i:hover .am-star,.am-i:focus-visible .am-star{color:var(--acc)}
html[data-theme="dark"] .am-i:hover,html[data-theme="dark"] .am-i:focus-visible{background:var(--hover)}
.am-i[aria-current]{background:var(--on-bg);box-shadow:inset 2px 0 0 var(--on)}
.am-i[aria-current] .am-l{color:var(--on)}
.am-ic{grid-row:1 / span 2;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;color:var(--ink2)}
.am-star{color:var(--acc);fill:currentColor}
.am-l{display:block}
.am-s{display:block;grid-column:2;margin-top:1px;font-size:12px;font-weight:400;color:var(--muted)}
.am-sep{height:1px;margin:4px 6px;background:var(--line)}
.am-p form{margin:0}
.am-out{color:var(--ink2);font-weight:500}
@media (max-width:520px){.am-p{right:-8px;width:min(320px,calc(100vw - 16px))}}
/* a free bar (Upgrade + Account) is 5px too wide at 375 and 6px at 360 with the full chevron */
@media (max-width:420px){.am-t{gap:2px}.am-cv{width:10px;height:10px}}
@media (max-width:374px){.am-cv{display:none}}
/* 3.433: below 360 "Account" is its menu's person icon, the word kept for screen readers; a free bar
   (Upgrade + Account) is otherwise 20px too wide at 320. With no text left, the baseline rule above
   would drop Upgrade 3px, so the menu centres instead. */
.am-tico{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:359px){
  .am-t .am-tl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .am-t .am-tico{display:block}
  .am-t{min-width:40px;justify-content:center}
  .top .right>.am{align-self:center}
}

/*
 * The switch, above the figures: its own column wrapper, so on the signed-out ticker page it
 * sits above the dashed "Open with a free account" panel rather than inside that lock.
 *
 * 3.216 (operator, 2026-10-16, option B of four rendered): a recessed track with the CURRENT half
 * raised on it, the phone's segmented-control shape, because the old switch read backwards. Its
 * only colour was the accent arrow, and that sat on the LINK half, so the eye went to the page you
 * were not on; the current half was marked by a 2px bar on the box edge alone. Now the raised
 * surface says where you are, the arrows (still the direction of time, ← past, next →) take the
 * text colour, and the accent appears only on hover. No new colour: oxblood stays the report's.
 * Dark mode raises the current half on --hover, since --panel is too close to the dark track.
 */
.kcol{display:flex;flex-direction:column;gap:12px;min-width:0}
/* 3.219: `.lead` bottom-aligns its columns (`align-items:end`, the mockups' own rule), so the
 * switch's height under the top bar was the headline column's height minus this one's, and it
 * differed between the two pages it exists to join: 25px lower on /earnings/nvda/ than on
 * /t/NVDA/ at 1600. Pinned to the top, it starts on the kicker line on both. */
.lead>.kcol{align-self:start}
.vsw{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg2);box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
:root[data-theme="dark"] .vsw{background:var(--bg)}
.vsw .h{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;border-radius:7px;text-decoration:none;color:var(--muted)}
.vsw .h.pv{padding:11px 14px 11px 38px}
.vsw .h.nx{padding:11px 38px 11px 14px;align-items:flex-end;text-align:right}
.vsw .h b{font:600 14.5px/1.2 var(--ui);color:inherit;letter-spacing:-.005em}
.vsw .h i{font:500 10px/1.25 var(--mono);font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.vsw .h[aria-current]{background:var(--panel);color:var(--ink);
  box-shadow:0 0 0 1px var(--line2),0 1px 2px rgba(0,0,0,.08),0 3px 10px -3px rgba(0,0,0,.18)}
:root[data-theme="dark"] .vsw .h[aria-current]{background:var(--hover);box-shadow:0 0 0 1px var(--line2),0 2px 10px -2px rgba(0,0,0,.6)}
.vsw .h[aria-current] i{color:var(--ink2)}
.vsw a.h:hover{background:color-mix(in srgb,var(--panel) 45%,transparent);color:var(--ink)}
.vsw a.h:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.vsw .dir{position:absolute;top:50%;transform:translateY(-50%);font:500 16px/1 var(--mono);color:inherit;transition:transform .15s}
.vsw .pv .dir{left:14px}
.vsw .nx .dir{right:14px}
.vsw a.h:hover .dir{color:var(--acc)}
.vsw a.pv:hover .dir{transform:translate(-3px,-50%)}
.vsw a.nx:hover .dir{transform:translate(3px,-50%)}
@media (prefers-reduced-motion:reduce){.vsw .dir{transition:none}}
/* The track's 4px inset is taken back from each half's inner padding, so a phone keeps the old
   line breaks ("Mon 19 Oct · before bell" on one line at 390). */
@media (max-width:700px){
  .vsw .h.pv{padding:10px 10px 10px 27px}
  .vsw .h.nx{padding:10px 27px 10px 10px}
  .vsw .pv .dir{left:8px}
  .vsw .nx .dir{right:8px}
}
/*
 * 3.388 — the two boards as a switch (`boardsSwitch`, `mockups/offseason-entry/` option A). The
 * company pages' track, without the arrows (they mean past and next there), so each half keeps
 * the same inner padding on both sides. On /board/ it heads the tiles' column (`.bcol`), in the
 * space the headline column leaves above them, so a desktop board moves nothing when the operator
 * turns it on; the off-season page has the same lead since 3.389, so it heads that page's tiles
 * too, as its way back (it sat beside the title, in `.off-head`, before). The counts' tails
 * (`.xl`) go on a phone, where they wrapped each half to three lines.
 */
.vsw.bsw .h.pv,.vsw.bsw .h.nx{padding:11px 14px}
@media (max-width:700px){.vsw.bsw .h.pv,.vsw.bsw .h.nx{padding:10px 12px}}
@media (max-width:520px){.bsw .xl{display:none}}
.bcol{display:flex;flex-direction:column;justify-content:space-between;gap:18px;align-self:stretch;min-width:0}
.bcol>.bsw{width:100%;max-width:420px;margin-left:auto}
@media (max-width:900px){.bcol>.bsw{max-width:none;margin-left:0}}

/*
 * `/watchlist/`'s add box (3.191) is the top bar's search list over the same index (`search.js`),
 * dropped from a box at the right of the window, so it opens right-aligned; the empty page's box is
 * centred, and so is its list. Here and not in `app.css`: these override `.srch-pop` above, which is
 * unlayered, and a rule in `app.css`'s `@layer components` would lose to it whatever its specificity.
 */
.wl-add .srch-pop{left:auto;right:0;z-index:30;text-align:left}
.wl-add.big .srch-pop{right:auto;left:50%;transform:translateX(-50%)}
.wl-add .sr .go{font-size:10.5px}
.sr .wl-on{color:var(--acc);font-weight:600}
/* Focus is the box's, as the top bar's search draws it, not a second ring on the field inside it. */
.wl-add input:focus,.wl-add input:focus-visible{outline:none}
.wl-add label:focus-within{border-color:var(--acc);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}

/*
 * 3.215 — the history tables on /earnings/<sym>/ and /t/<SYM>/ (#hist, and /t/'s #hist2), one
 * shape on both pages. The cells were centred, and an empty spacer stood in for the group label
 * above a lone name; on a phone the label wraps ("Report's / part") and the spacer stays one
 * line, so "Priced" sat a line below "Report", "Rank" and "C2C". Now the group label sits at the
 * top-left of its cell, every column name on the bottom line, with room between the two
 * (operator's reference: /t/'s "Priced / Quoted"). Type is each page's quiet pass: the label
 * 12px 600 ink, the name the base 11px muted.
 */
#hist thead th,#hist2 thead th{vertical-align:bottom;height:auto;padding-top:5px;padding-bottom:5px;line-height:1.15}
/* the spacer goes: both pages' rules for it carry a :not(), so this needs the weight */
#hist thead th::before,#hist2 thead th::before{display:none!important}
#hist th .grp,#hist2 th .grp{white-space:nowrap;margin-bottom:7px}
/* The forecast column: every number ends on one edge, "rec" or not. A cell without it reserves
   the width "rec" takes, so the column is no wider than it was. */
#hist sup.u{display:inline-block;width:14px;margin-left:2px;text-align:left;font:500 8.5px var(--mono);
  letter-spacing:.04em;color:var(--muted);vertical-align:4px}
#hist .pr:not(:has(sup.u))::after{content:"";display:inline-block;width:16px}
@media (max-width:700px){
  /* "Report's part" is "Report's" on a phone: one line in a ~60px column */
  #hist th .grp .gx{display:none}
  /* The Chart lens: the strip takes whatever the other columns leave, up to its 190px. It was
     100vw minus a guessed width for them, and /earnings/'s Report column (date and chip on one
     line, 130px) is wider than the guess, so the table ran 23px past its box at 375. */
  #hist .evc{width:100%}
  #hist .ev{width:100%;max-width:190px}
}
/* below 360px "By 10:00" is "10:00": it sits under "Realized" */
@media (max-width:359px){#hist th .bx{display:none}}

/*
 * NO PAPER MAT (operator, 2026-10-25). The mockup sets every window on a `.paper` mat: 12px of
 * grid-paper padding with rounded corners. Removed on every page. The element stays, because it
 * carries the window's spacing (`margin-bottom:22px`, `/`'s `margin:22px 0`) and its anchor ids
 * (`#split`, `#fl-rank`). `!important` because the fills it clears include `/`'s band tints and
 * the dark `.atmos` re-tint, whose selectors outweigh any plain `.paper`. (d)
 */
.paper{padding:0!important;border-radius:0!important;background:none!important;backdrop-filter:none!important}

/*
 * HOVER (2026-10-28). The mockup's buttons hovered by dropping to `opacity:.88`. On an ink button
 * that is a faint grey, and on an outlined one (`.btn.ghost`, the theme switch: panel on panel) it
 * changes nothing anyone can see. Buttons now hover the way the bar's "Create free account" pill
 * does (3.320): a filled button warms its ink toward the accent and lifts, an outlined one takes
 * the hover ground and a firmer border. `app.css` gives its own buttons (`/account/`, `/pricing/`,
 * `/login/`, `/watchlist/`) the same two states. A button in a form that is sending
 * (`submit-once.js` sets `aria-disabled`) keeps its resting look. (d)
 */
.btn:not([aria-disabled="true"]):hover{opacity:1;background:color-mix(in srgb,var(--ink) 86%,var(--acc));
  border-color:color-mix(in srgb,var(--ink) 86%,var(--acc));box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.btn.ghost:not([aria-disabled="true"]):hover{background:var(--hover);color:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 45%,var(--line2));box-shadow:none}
.more-btn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 45%,var(--line2))}
@media (prefers-reduced-motion:no-preference){.btn,.more-btn{transition:background-color .12s,border-color .12s,box-shadow .12s,transform .2s}}
/* Links that had no hover at all: the glossary's "What the columns mean", a methodology key's
   note, the board's off-season notice, and a ticker window's CSV chip, which hovers as the
   board's own CSV button does. */
.foot .gl .glsee a:hover,.mk-note a:hover,.board-notice a:hover{color:var(--acc);text-decoration-color:var(--acc)}
.titlebar .act:has(>a:hover){color:var(--ink);border-color:var(--muted)}
/*
 * THE FORKS (landing-figures.ts). real/landing.py wrote these per fork, sized to one day's pair;
 * port_mockup_css.py drops those (DATA_RULE) and these carry the same geometry for any pair.
 * The dash is normalised by pathLength="100"; the wedge origins are the apex on each drawing
 * (the phone one sits 80 units left); the pulse's offset-path is set by landing.js from data-op,
 * so a pulse stays hidden until it has one rather than flashing at the SVG's origin.
 */
.fork .ln.q{--l:100}
.fk-w .wg.r{transform-origin:200px 87px}.fk-w .wg.o{transform-origin:200px 97px}
.fk-p .wg.r{transform-origin:120px 87px}.fk-p .wg.o{transform-origin:120px 97px}
.fork .pulse.o{animation-delay:-1.3s}.fork .pulse.q{animation-delay:-2.1s}
.fork .pulse:not(.on){display:none}
.fork .glow{filter:url(#fk-glow)}
.fork .fk-fl{fill:url(#fk-gl)}.fork .fk-fr{fill:url(#fk-gr)}
.fk-s1{stop-color:#FBFBF6}.fk-s2{stop-color:#E0DED3}.fk-s3{stop-color:#D2CFC2}.fk-s4{stop-color:#B1AE9E}
.fk-defs{position:absolute;width:0;height:0;overflow:hidden}
/* Decision 14: the 280-unit phone drawing below 440px, the mockup's 440-unit one above. */
.fk-p{display:none}
@media (max-width:440px){.fk-w{display:none}.fk-p{display:block}}

/* The meter bars' width, one class per whole percent (the mockup's .u18-.u23 were one day's). */
.mw-0{--w:0%}.mw-1{--w:1%}.mw-2{--w:2%}.mw-3{--w:3%}.mw-4{--w:4%}.mw-5{--w:5%}.mw-6{--w:6%}.mw-7{--w:7%}.mw-8{--w:8%}.mw-9{--w:9%}.mw-10{--w:10%}.mw-11{--w:11%}.mw-12{--w:12%}.mw-13{--w:13%}.mw-14{--w:14%}.mw-15{--w:15%}.mw-16{--w:16%}.mw-17{--w:17%}.mw-18{--w:18%}.mw-19{--w:19%}.mw-20{--w:20%}.mw-21{--w:21%}.mw-22{--w:22%}.mw-23{--w:23%}.mw-24{--w:24%}.mw-25{--w:25%}.mw-26{--w:26%}.mw-27{--w:27%}.mw-28{--w:28%}.mw-29{--w:29%}.mw-30{--w:30%}.mw-31{--w:31%}.mw-32{--w:32%}.mw-33{--w:33%}.mw-34{--w:34%}.mw-35{--w:35%}.mw-36{--w:36%}.mw-37{--w:37%}.mw-38{--w:38%}.mw-39{--w:39%}.mw-40{--w:40%}.mw-41{--w:41%}.mw-42{--w:42%}.mw-43{--w:43%}.mw-44{--w:44%}.mw-45{--w:45%}.mw-46{--w:46%}.mw-47{--w:47%}.mw-48{--w:48%}.mw-49{--w:49%}.mw-50{--w:50%}.mw-51{--w:51%}.mw-52{--w:52%}.mw-53{--w:53%}.mw-54{--w:54%}.mw-55{--w:55%}.mw-56{--w:56%}.mw-57{--w:57%}.mw-58{--w:58%}.mw-59{--w:59%}.mw-60{--w:60%}.mw-61{--w:61%}.mw-62{--w:62%}.mw-63{--w:63%}.mw-64{--w:64%}.mw-65{--w:65%}.mw-66{--w:66%}.mw-67{--w:67%}.mw-68{--w:68%}.mw-69{--w:69%}.mw-70{--w:70%}.mw-71{--w:71%}.mw-72{--w:72%}.mw-73{--w:73%}.mw-74{--w:74%}.mw-75{--w:75%}.mw-76{--w:76%}.mw-77{--w:77%}.mw-78{--w:78%}.mw-79{--w:79%}.mw-80{--w:80%}.mw-81{--w:81%}.mw-82{--w:82%}.mw-83{--w:83%}.mw-84{--w:84%}.mw-85{--w:85%}.mw-86{--w:86%}.mw-87{--w:87%}.mw-88{--w:88%}.mw-89{--w:89%}.mw-90{--w:90%}.mw-91{--w:91%}.mw-92{--w:92%}.mw-93{--w:93%}.mw-94{--w:94%}.mw-95{--w:95%}.mw-96{--w:96%}.mw-97{--w:97%}.mw-98{--w:98%}.mw-99{--w:99%}.mw-100{--w:100%}

/* Links the mockup drew as href="#". */
.blr .s a,.tw a.tk{color:inherit;text-decoration:none}

/*
 * DARK (decision 15). The landing mockup is light-only and / carries no theme switch, but a
 * reader who chose dark on another page has data-theme="dark" here too. They get the app
 * screens' dark tokens (board.css, verbatim) with the GROUND rasters hidden (the sky, the felt
 * texture), which is the app screens' own dark rule for their grounds. The two prism
 * photographs are framed content, not ground, and stay: hiding them collapsed both windows to
 * one column and scaled the 440-unit forks across the full width.
 */
:root[data-theme="dark"]{
  --bg:#151411; --bg2:#1A1915; --panel:#1D1C18; --hover:#26241F; --sel:#322625;
  --line:#2b2923; --line2:#3F3D34; --grid:rgba(239,237,231,.05);
  --ink:#EFEDE7; --ink2:#BEBCB2; --muted:#939187;
  --rich:#EFEDE7; --cheap:#939187; --pos:#EFEDE7; --neg:#D87267; --acc:#D87267;
  --report:#D87267; --ordinary:#80AEBF; --paper-drawn:#201E19;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
}
:root[data-theme="dark"] .skyimg{display:none}
:root[data-theme="dark"] .pwin{background:var(--paper-drawn)}
/* The mockup's light-only literals on the ground (found by listing every surviving rgba/hex
   after the token swap — the colour a palette guard cannot see is the one that is not a token). */
:root[data-theme="dark"] .hero-sky::after,:root[data-theme="dark"] .band.macro::before{display:none}

/*
 * THE COMPACT FOOTER'S THEME SWITCH (operator, 2026-09-28). `/` now carries the same footer as
 * every other page (`siteFooter`), switch included, which reverses decision 15's "no switch on
 * `/`". The landing mockup never drew one, so the switch's base rules (the app screens',
 * verbatim) come here. And `/` has no switch in its top bar, so the footer's must not hide
 * below 360px the way it does on the app screens, where the bar keeps one there.
 */
.icon-btn{width:34px;padding:0;display:inline-grid;place-items:center}
.icon-btn svg{display:block;width:16px;height:16px}
.icon-btn .ico-sun{display:none}
.icon-btn[aria-pressed="true"] .ico-moon{display:none}
.icon-btn[aria-pressed="true"] .ico-sun{display:block}
.icon-btn:hover{transform:none}
.icon-btn{height:34px}
/* the mockup's own touch size, restated because the rules above come after it */
@media (max-width:700px),(pointer:coarse){.icon-btn{width:44px;height:44px}}
@media (max-width:359px){html.js footer.site .site-bar .icon-btn{display:inline-grid}}

/* "Full methodology" in the past-reports window's status bar: neutral ink rather than the
   accent, underlined on hover (operator, 2026-09-28). */
.u17{color:var(--ink2)}
.u17:hover{text-decoration:underline}

/*
 * THE PAST-REPORTS TABLE (3.115). Scoped to this table and its window. The segmented lens it
 * introduced is every page's now and lives in shared.add.css.
 */
#mtland td.allc{color:var(--ink)}
/* a report's whole row opens its /earnings/ page; `rowlink` is set by row-link.js, so the cursor
   appears only where the click works (operator, 2026-10-11) */
#mtland.rowlink tbody tr:has(a.tk){cursor:pointer}
/* 3.216 (operator, 2026-10-16): the forward board's rows open their name the same way, and light
   up on hover like the past-reports rows. A withheld row with no public page has no link, so it
   gets neither. */
.band.macro .bl.rowlink .blr:has(.s a){cursor:pointer}
.band.macro .bl.rowlink .blr:has(.s a):hover{background:var(--sel)}
/* The A-Z strip under the table: the link from the sample to /earnings/ (operator, 2026-10-11,
   mockups/earnings-link/ option D). Set in the window's mono, like its status bar. On a phone the
   letters go and the strip is one full-width row, the shape of the status bar's own links. */
.azs{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);
  font:500 10.5px var(--mono);letter-spacing:.04em}
.azs .k{color:var(--acc);text-decoration:none;white-space:nowrap}
.azs .k:hover{text-decoration:underline}
.azs .k .arr{margin-left:6px}
.azs .ls{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 auto}
.azs .ls a{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:24px;border-radius:5px;
  color:var(--ink2);text-decoration:none;font-size:11.5px}
.azs .ls a:hover{background:var(--bg);color:var(--acc)}
@media (max-width:700px){
  .azs{padding:0 18px}
  .azs .ls{display:none}
  .azs .k{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;font-size:12px}
  .azs .k .arr{font-size:16px}
}
/* The hero's "Companies" figure: its public-page phrase links /earnings/ (option A). Ink with a
   report-colour underline since 3.198, like every other link on the page (see the 3.198 block). */
.proof .ps a.pl{color:var(--ink);text-decoration-line:underline;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);
  text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-skip-ink:none}
.proof .ps a.pl:hover{color:var(--acc);text-decoration-color:var(--acc)}
#mtland sup.fn{font:500 9.5px var(--mono);color:var(--muted);margin-left:2px;vertical-align:4px;line-height:0}
/* the band header rows; they wrap, or the longest label widens the table at 320px */
#mtland tr.grp th{height:28px;padding:8px 10px 6px;background:var(--bg);border-bottom:1px solid var(--line2);
  text-align:left;white-space:normal;font:600 12px var(--mono);line-height:1.35;letter-spacing:0;
  text-transform:none;color:var(--ink2)}
/* the footnotes: one number per note, the same number in every cell it explains */
.lpr-notes{padding-bottom:4px}
.lpr-notes .fns{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.lpr-notes .fns li{display:grid;grid-template-columns:16px minmax(0,1fr)}
.lpr-notes .fnn{font:500 10px var(--mono);color:var(--muted);padding-top:3px}
.lpr-notes b{color:var(--ink);font-weight:600}
.u17 .arr{display:none}
/* the phone's column definitions, one list per lens (hidden above 700px by .mt-ph) */
.lpr-defs{padding:12px 18px 14px;border-top:1px solid var(--line)}
.lpr-defs .k{margin:0 0 8px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lpr-defs dl{display:none;margin:0;gap:2px}
.lpr-defs dt{font:600 13px var(--ui);color:var(--ink);margin-top:6px}
.lpr-defs dt:first-child{margin-top:0}
.lpr-defs dd{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.lpr-defs dd.key{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font:500 11.5px var(--mono);color:var(--ink2)}
.lpr-defs dd.key span{display:inline-flex;align-items:center;white-space:nowrap}
.lpr-defs .sw{flex:none;display:inline-block;width:18px;height:5px;border-radius:3px;margin-right:7px}
.lpr-defs .sw.r{background:var(--acc)}
.lpr-defs .sw.o{background:var(--ordinary)}
.win:has(#mtl-mtland-priced:checked) .lpr-defs dl[data-lens="priced"],
.win:has(#mtl-mtland-split:checked) .lpr-defs dl[data-lens="split"],
.win:has(#mtl-mtland-after:checked) .lpr-defs dl[data-lens="after"],
.win:has(#mtl-mtland-cost:checked) .lpr-defs dl[data-lens="cost"]{display:grid}
@media (max-width:700px){
  /* the lens itself is the shared segmented row (shared.add.css, 3.115) */
  /* the footnotes follow the lens; a lens with none hides the block */
  .lpr-notes .fns li{display:none}
  .win:has(#mtl-mtland-priced:checked) .lpr-notes li[data-lens="priced"],
  .win:has(#mtl-mtland-split:checked) .lpr-notes li[data-lens="split"],
  .win:has(#mtl-mtland-after:checked) .lpr-notes li[data-lens="after"],
  .win:has(#mtl-mtland-cost:checked) .lpr-notes li[data-lens="cost"]{display:grid}
  .win:has(#mtl-mtland-priced:checked) .lpr-notes:not(:has(li[data-lens="priced"])),
  .win:has(#mtl-mtland-split:checked) .lpr-notes:not(:has(li[data-lens="split"])),
  .win:has(#mtl-mtland-after:checked) .lpr-notes:not(:has(li[data-lens="after"])),
  .win:has(#mtl-mtland-cost:checked) .lpr-notes:not(:has(li[data-lens="cost"])){display:none}
  /* the status bar: the colour key lives in the Split definition, the link is a full-width row.
     The forward band's bar (3.175) and the record window's (3.232, 3.234) are the same row, so
     the three windows' links are one style. */
  .win:has(#mtl-mtland)>.status,
  .win:has(>.rec)>.status,
  .band.macro .win>.status{display:grid;grid-template-columns:minmax(0,1fr);padding:0}
  .win:has(#mtl-mtland)>.status>span,
  .win:has(>.rec)>.status>span,
  .band.macro .win>.status>span{padding:0 18px;min-height:0}
  .win:has(#mtl-mtland)>.status .lpr-key{display:none}
  .win:has(#mtl-mtland)>.status .r,
  .win:has(>.rec)>.status .r,
  .band.macro .win>.status .r{border:0}
  .win:has(#mtl-mtland)>.status .u17,
  .win:has(>.rec)>.status .u17,
  .band.macro .win>.status .u17{position:relative;display:flex;align-items:center;width:100%;
    min-height:48px;font:600 13px var(--ui);color:var(--ink)}
  /* The label keeps the desktop underline; the arrow is positioned out of the flow so the
     underline (which propagates to in-flow children only) stops at the words. */
  .win:has(#mtl-mtland)>.status .u17 .arr,
  .win:has(>.rec)>.status .u17 .arr,
  .band.macro .win>.status .u17 .arr{display:flex;align-items:center;position:absolute;right:0;top:0;bottom:0;
    color:var(--acc);font-size:16px}
}

/*
 * THE FORWARD BAND'S PHOTO TAKES NO CLICKS (3.144). The mockup's `.band.macro::before` is an
 * absolutely positioned layer that reaches 180px past the band at both ends and paints above
 * whatever unpositioned content sits there. For a subscriber the band is the last one on the
 * page (no closing band follows), so it lay over the whole compact footer: every footer link
 * and the theme switch hit-tested to the band. It is decoration, like `.hero-sky::after`.
 */
.band.macro::before{pointer-events:none}

/* A subscriber's band: the top of their board, ranked (3.144, `forwardBand`). */
.band.macro .blr .n{font-variant-numeric:tabular-nums}
.band.macro .blr .s b a:hover{text-decoration:underline}
.band.macro .blmore{display:flex;align-items:baseline;gap:12px;padding:9px 16px 8px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted)}
.band.macro .blmore a{margin-left:auto;color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line2)}
.band.macro .blmore a:hover{border-bottom-color:var(--acc)}
@media (max-width:640px){.band.macro .blmore{padding:8px 11px 7px;font-size:10.5px}}

/*
 * THE FORWARD BAND'S STATUS BAR IS A LINK TO THE BOARD (3.175, operator, P3 in
 * `mockups/forward-richness-align/`). It used to repeat the header's captions. On a desktop the
 * link ends on the Richness column's edge: the rows pad 16px and the shared bar 14px. On a phone
 * it is the full-width row above, shared with "Full methodology"; the cells' own
 * `.band.macro .r{justify-self:end}` would shrink that row to its text, so it is stretched back.
 * (This replaces 3.144's one-line phone bar, and with it the rule that hid "Reports" below 360.)
 */
@media (min-width:701px){.band.macro .win>.status .r{padding-right:16px}}
@media (max-width:700px){.band.macro .win>.status .r,.win:has(>.rec)>.status .r{justify-self:stretch}}

/*
 * THE FORWARD BAND'S HEADER BELOW 360PX (3.175). At 320 "PRICED MOVE" (75px of text) sat in a
 * 56px column and, right-aligned and unwrapped, ran 19px left over "COMPANY". The labels may
 * wrap here, so it stands as PRICED / MOVE inside its own column. Richness had 96px for at most
 * 73 (a ranked phone row: a 19px number, a 6px gap, a 48px chip; its header is 55; 80 since 3.297's wider number and gap), so it gives
 * 20 of them to Company. 360 and up are unchanged.
 */
@media (max-width:359px){
  .band.macro .blh,.band.macro .blr{grid-template-columns:18px minmax(0,1fr) 56px 76px}
  .band.macro .blh{padding-top:5px;padding-bottom:5px}
  .band.macro .blh .r{white-space:normal;text-align:right;line-height:1.25}
}
/*
 * A THREE-DIGIT RANK ON A PHONE (3.297). The mockup sizes the rank box at 19px below 640px, which
 * holds "88" (15.6px) but not "100" (23.4px at 13px), so a 100 ran 3.8px into the 6px gap and sat
 * 1.6px from its chip. The box is 24px and the gap 8px; that is 80 of the 96px column. Below 360
 * the column is 76, so the gap stays 6 and the chip box gives up 2px it does not use (the CHEAP chip is 44.1).
 */
@media (max-width:640px){.rz-b{gap:8px}.rz-b .rv{width:24px}}
@media (max-width:359px){.rz-b{gap:6px}.rz-b .rc{width:46px}}

/*
 * THE SHARED BAR ON / (BUILD_PLAN 3.150). `topBar({wrap: true})` puts the bar's contents in a
 * `.wrap.bar-in` box, because landing.css styles this bar through `.top .wrap`. These rules put
 * that box on the shared column, mark and type, so the logo, tabs and links sit where they sit
 * on every other page (x=36 / 157 at 1440, measured) and the bar is 56px, not 57. The
 * see-through ground over the sky stays. The theme switch shows below 360px, as on every page:
 * the footer drops its own there. (d)
 */
.top>.wrap.bar-in{max-width:none;margin:0;min-height:55px;
  padding-left:max(16px,calc((100% - 1400px) / 2 + 16px));
  padding-right:max(16px,calc((100% - 1400px) / 2 + 16px))}
.top>.wrap.bar-in>.brand{font-size:15px;gap:9px}
.top>.wrap.bar-in>.right{display:flex;align-items:center;gap:12px}
@media (max-width:520px){.top>.wrap.bar-in>.right{gap:8px}
.top>.wrap.bar-in>.brand{margin-left:-12px}}

/*
 * THE FRONT-PAGE AUDIT (BUILD_PLAN 3.154). Reviewed as `mockups/landing-v2/`.
 *
 * (a) "A jumpy stock": the prism photograph goes and the two forks sit side by side. The window
 * was ~650px tall at 1280 for two readouts, and the photo's beams faded out before reaching
 * them. Two columns of ~590px draw the 440-unit forks at about their old scale (the reason the
 * dark rule above keeps the photo was ONE column at full width). The phone keeps one column.
 */
.pwin{grid-template-columns:minmax(0,1fr)}
.pwin::before,.pwin::after{display:none}
.pwin .forks{border-left:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:14px 22px 16px}
.pwin .forks .sum{grid-column:1/-1}
@media (max-width:760px){.pwin .forks{grid-template-columns:minmax(0,1fr)}}

/* (b) Past reports: the Richness heading sits over its gauge, which starts the cell, rather
   than right-aligned over the number at its end. */
#mtland thead th:nth-child(6){text-align:left}

/* (c) The expiry-week window: a key for the dot and the range bar, which only the aria-label
   named once the caption went (2026-09-25). */
.ranges .rkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font:500 10.5px var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ranges .rkey span{display:inline-flex;align-items:center;gap:7px}
.ranges .rkey i{display:inline-block}
.ranges .rkey .kd{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.ranges .rkey .kb{width:22px;height:6px;border-radius:999px;background:var(--line2)}

/* (d) A signed-in reader's page opens on the forward band (`.lead`), which then carries the h1
   and the page's action. The wash sits behind the heading there, so the phone drops it. */
.band.macro.lead{padding-top:40px}
@media (max-width:760px){.band.macro.lead::before{display:none}}
.band.macro .acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 0}
.band.macro .acts .or{font-size:13px;color:var(--muted)}
.band.macro h1{margin:0;font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.band.macro h1 em{font:italic 400 1.08em var(--serif);letter-spacing:-.01em;color:var(--ink)}

/* (e) "How it works": one card per argument, each link on the card's last row so the three
   share a baseline whatever the text above them runs to. */
.how .groups{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.how .groups{grid-template-columns:minmax(0,1fr)}}
.how .group{display:grid;grid-template-rows:auto 1fr auto;gap:6px}
.how .group p{margin:0;font-size:14px;line-height:1.5}
.how .group a.x{font-size:13px;justify-self:start;align-self:end;margin-top:6px}

/* (f) A subscriber's ending (`planBand`): the closing band's layout without its offer, under its
   own class so `start-free` still means "an ask" (landing.test.ts reads its absence). */
.ending .split3{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start;margin-top:22px}
.ending .free .lede{margin-top:0}
.ending .acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 0;max-width:none}
.ending .acts .or{font-size:13px;color:var(--muted)}
.ending .asks{font-size:13px;color:var(--muted);max-width:none;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:980px){.ending .split3{grid-template-columns:minmax(0,1fr);gap:28px}}
/* 3.183: the hero's call to action on a phone (operator, mockups/hero-cta-phone/ option B). The
   button spans the card, and the link and the note sit centred under it with the gaps closed:
   129px → 93px at 375. The link keeps its 44px tap line (`.cta .or` above); the negative margins
   only take back the air that line leaves around 13px text. */
@media (max-width:700px){
  .herowin .cta{flex-direction:column;align-items:stretch;row-gap:0;margin-top:20px}
  .herowin .cta .btn.big{justify-content:center}
  .herowin .cta .or{text-align:center;margin-top:-2px}
  .herowin .nocard{text-align:center;margin-top:-8px}
}
/* 3.185: the hero's prism on a phone and a tablet, cropped (operator, mockups/hero-prism-phone/
   option C). The drawing's ink spans rows 285-775 of the 1600x1075 picture, so a 3:2 box spent
   about a quarter of its height on blank paper above it and a quarter below. A 12:5 box with
   object-fit:cover crops that paper (222px → 139px at 375), and each label moves to keep its spot
   on the drawing: top' = (top·1075/1600 − crop) / box height, with crop = (1075/1600 − 5/12)/2.
   Desktop keeps its layout. */
@media (max-width:980px){
  /* Operator, 2026-10-14: no rule between the text and the drawing, and the drawing moved up.
     The two halves share one paper colour, so without the rule they read as one card. */
  .herowin .txt{padding-bottom:12px}
  .hprism{border-top:0}
  .hprism{aspect-ratio:12/5}
  .hprism img{object-fit:cover;padding:0}
  .hprism .lbl.q{top:51.6%}
  .hprism .lbl.r{top:8.1%}
  .hprism .lbl.o{top:69.3%}
}
/* 3.198: the prism in dark mode. Until 3.198 the picture stayed light paper in both palettes, a
   bright cream block inside the dark card, and 3.185 pinned its three labels to the LIGHT
   palette's ink, report and ordinary so they could be read on that cream. Now the picture is
   inverted and its hue turned back, which keeps the pencil drawing and the oxblood/slate
   beams on a dark ground, so 3.185's reason is gone and the labels take dark mode's own tokens.
   `.hprism` was its own stacking context (z-index:0), which isolated the blend: the picture
   overflows its column to the left and blended against nothing. z-index:auto lets it blend
   against the card; the text column keeps z-index:1, so it still paints on top. */
:root[data-theme="dark"] .hprism img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:lighten}
:root[data-theme="dark"] .hprism{background:var(--paper-drawn);z-index:auto}

/*
 * 3.198: THE QUIET PASS (operator, 2026-10-14, mockups/emphasis-options/ "Quiet"). Same layout,
 * same elements, same figures; the page reads quieter and its hierarchy is clearer. Two rules:
 * one typeface for everything you read, and one job per colour. The block is the reviewed
 * mockup's CSS in the reviewed order, so the page is the page that was approved.
 */
/* The stats: cheap/dear in ink. Oxblood and slate are "the report" and "ordinary" in the
   prism right beside them, so coloured numbers here read as those two parts. */
.proof .pv .cheap,.proof .pv .dear{color:var(--ink)}
.proof .pv small{font-size:.6em;font-weight:500;color:var(--muted);letter-spacing:0}
.proof .ps{font-size:12.5px}
.titlebar .act{font-size:11px}
/* "No card. Nothing expires." in sentence case, as the closing band already sets it. */
.nocard{font:400 13px var(--ui);letter-spacing:0;text-transform:none}
/* The table key read "Split:the report·ordinary": the flex row ate the spaces. */
.status .lpr-key{gap:.4em}
/* "Cheap" was set in the muted grey, so the first card looked switched off. */
.group h3.c{color:var(--ink)}
/* The forward board's glow at about half strength, kept inside its own band instead of
   spilling 180px into the worked example above, so the board is the brightest thing there. */
.band.macro::before{opacity:.5;inset:-40px 0}

/* Method paragraphs step back: each band leads with one paragraph at reading size, and the
   "how it was measured" paragraph beside or under it is a quieter note, never cut. */
.lede.aside{font-size:15px;line-height:1.6;color:var(--muted);max-width:58ch}
/* Calmer surfaces: softer shadows, a fainter graph-paper grid, and the felt behind the forks
   at about half strength, so the forks are the strongest thing in their window. */
:root:not([data-theme="dark"]){--shadow:0 1px 2px rgba(0,0,0,.035),0 8px 22px -14px rgba(0,0,0,.16);--grid:rgba(29,26,24,.035)}
.pwin::before{opacity:.5}
@media (min-width:981px){:root:not([data-theme="dark"]) .pwin{background:
  linear-gradient(color-mix(in srgb,var(--paper-drawn) 55%,transparent),color-mix(in srgb,var(--paper-drawn) 55%,transparent)),
  url(/img/felt-tile.jpg) center/1663px auto,var(--paper-drawn)}}
/* One logo is enough: the V mark is in the page's bar, so the window bars drop theirs. */
.titlebar .mark{display:none}

/* ONE TYPEFACE. Inside <main> the mono token is the body face, so every label that was
   JetBrains Mono (kickers, captions, stat labels, the fork labels inside the SVG, chips, the
   A-Z strip) is Instrument Sans. The bar keeps its mono "/" key hint, the prism its handwriting. */
main{--mono:var(--ui)}
/* Mono labels were tracked capitals so they read as mono; in the body face they read better
   as sentence case at one small size. */
.proof .pk,.titlebar .t,.meter .row span:first-child,.group .cnt,
.rec .k,.rec .n,.band.macro .blh,.band.macro .blsec .k,.fork .t span,.forks .sum,
.rkey,.axis,.rrow .who small,.status,.tier .k,.start-free .plan .k,.azs,.mt-lens .k{
  text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.fork text.k,.fork tspan.sh{text-transform:none;letter-spacing:0;font-size:12px}
.titlebar .t::first-letter,.proof .pk::first-letter,.tier .k::first-letter,.start-free .plan .k::first-letter{text-transform:uppercase}
.titlebar .t{font-weight:500;color:var(--ink2)}
.band.macro .blsec .k{font-weight:600!important;color:var(--ink2)!important}
.rec .k{color:var(--ink2)}
.group .cnt,.rec .n{font-variant-numeric:tabular-nums}
/* Kickers keep their role (the small line over each heading, with the two-tone dash) but drop
   from terracotta mono to a muted, lightly tracked sans. */
.kicker{font:600 12px var(--ui)!important;letter-spacing:.08em!important;color:var(--muted)!important}
@media (max-width:420px){.hero .kicker{letter-spacing:.05em!important}}
/* Chips stay capitals: that is what makes DEAR / CHEAP read as a verdict. */
.chip{font-weight:600;letter-spacing:.06em}

/* ONE JOB PER COLOUR. The accent (terracotta then, oxblood since 3.329) was the kickers, every link AND "the report"; now it is the
   report part (and its half of the kicker dash). Links are ink with an oxblood underline.
   An underline, not a border: on a phone the hero link is a 44px tap box (3.183), and a border
   on its bottom edge draws a line straight through "No card. Nothing expires." below it.
   LONGHANDS, NOT THE SHORTHAND: a browser that does not take a thickness inside
   `text-decoration` (Safari) drops the whole declaration, leaving `a.x` with no underline and
   the hero link with the mockup's beige one, nearly invisible on the panel. */
a.x,.cta .or a,.u17,.azs .k,.band.macro .blsec .t a{
  color:var(--ink)!important;border-bottom:0!important;
  text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:3px}
a.x:hover,.cta .or a:hover,.u17:hover,.azs .k:hover,.band.macro .blsec .t a:hover{
  color:var(--acc)!important;text-decoration-color:var(--acc)}

/* Figures line up: tabular digits wherever numbers sit in a column or a row of stats. */
.proof .pv,#mtland td,.rec .v,.meter .n,.rrow .val,.band.macro .blr{font-variant-numeric:tabular-nums}
/* Quieter tints on the forward board: the dark beige "next 14 days" bar and the tinted locked
   rows take the page's own light grey; the hatching already says "locked". */
.band.macro .blsec.paid{background:var(--bg2)}
.band.macro .blsec.free{background:color-mix(in srgb,var(--sel) 60%,transparent)}
.band.macro .blr.lk{background:transparent}
/* 3.231 (operator, 2026-10-18, `mockups/landing-links/`): the name over each fork links to that
   company's page, underlined the way the band's prose links are (ink, a 55% accent underline 3px
   down) at the label's own size, and the accent on hover. */
.fork .t a.fk-n{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.fork .t a.fk-n:hover{color:var(--acc);text-decoration-color:var(--acc)}

/*
 * THE ARTICLES BAND (3.271, `mockups/landing-articles/` option B, colours B2). The newest article
 * as a feature card, its figure on the left when it has one, two cards under it. Class names are
 * the band's own (`a*`): the mockup reused `.fig` and `.strip`, which this page already styles,
 * and inherited part of its look from them, so the inherited values are written out here
 * (the figure panel's border, radius, shadow and 6px column gap; the drawing's 14px inset).
 * Colours: labels muted, the week line body ink, the link the page's link style; the losing dots
 * keep the round-1 report colour (operator, 2026-10-21; terracotta then, oxblood since 3.329).
 */
.arts .abh{display:flex;align-items:end;justify-content:space-between;gap:20px}
.arts .amore{font-size:14px;white-space:nowrap}
.arts .afeat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin-top:26px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transition:transform .2s}
.arts .afeat.nofig{grid-template-columns:minmax(0,1fr)}
.arts .afeat:hover{transform:translateY(-2px)}
.arts .afig{display:flex;flex-direction:column;gap:6px;min-width:0;padding:22px 22px 18px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  background-color:var(--bg2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.arts .afk{margin:0 0 12px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.arts .astrip{display:block;box-sizing:border-box;width:100%;height:auto;padding:14px}
.arts .astrip.narrow{display:none}
@media (max-width:520px){.arts .astrip.wide{display:none}.arts .astrip.narrow{display:block}}
.astrip .az{stroke:var(--muted);stroke-dasharray:4 3}
.astrip .aln{stroke:var(--line2)}
.astrip .aup{fill:var(--ink);fill-opacity:.82;stroke:var(--panel);stroke-width:1.2}
.astrip .adn{fill:var(--acc);fill-opacity:.78;stroke:var(--panel);stroke-width:1.2}
.astrip .aav{stroke:var(--ink);stroke-width:3}
.astrip .alb{font:600 13px var(--ui);fill:var(--ink)}
.arts .afl{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.arts .afl i{display:inline-block;vertical-align:-1px;margin-right:6px}
.arts .afl .ad{width:10px;height:10px;border-radius:50%}
.arts .afl .ad.up{background:var(--ink)}.arts .afl .ad.dn{background:var(--acc)}
.arts .afl .at{width:3px;height:12px;background:var(--ink)}
.arts .abody{display:flex;flex-direction:column;gap:12px;padding:26px 28px}
/* 3.339: --muted itself (5.89:1 on the panel); mixed 75% toward transparent it read 3.43:1 at 10.5px */
.arts .afm{display:flex;gap:12px;margin:0;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.arts .aak{color:var(--muted)}
/* 3.318: a step under the band's 36px heading (it was 32, which read as a second heading); 20px on a phone */
.arts h3{margin:0;font:600 22px/1.22 var(--ui);letter-spacing:-.015em;text-wrap:balance}
@media (max-width:700px){.arts h3{font-size:20px}}
.arts .afd{margin:0;font-size:16px;line-height:1.5;color:var(--ink2);max-width:46ch}
.arts .ago{margin-top:auto;font-weight:600;font-size:14px;color:var(--ink);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:4px;text-decoration-thickness:1px;align-self:flex-start}
.arts .afeat:hover .ago{text-decoration-color:var(--acc)}
/* 3.358: the recap link's arrow sits 4px off its words, as the article card's and "All N are free" do */
.arts .ago .arr{display:inline-block;margin-left:4px}
.arts .amore-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.arts .amini{display:grid;gap:8px;align-content:start;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);text-decoration:none;color:inherit}
.arts a.amini:hover h4{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.arts .amini h4{margin:0;font:600 17px/1.25 var(--ui);letter-spacing:-.015em}
.arts .amini p:not(.afm){margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.arts .amini.next{background:transparent;border-style:dashed;border-color:var(--line2)}
.arts .amini.next h4{color:var(--ink2)}
@media (max-width:860px){.arts .afeat{grid-template-columns:minmax(0,1fr)}.arts .afig{border-right:0}
  .arts .amore-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.arts .abh{align-items:start;flex-direction:column;gap:10px}.arts .abody{padding:20px}
  .arts .afig{padding:16px}}

/*
 * THE FIRST SCREEN (3.318, `mockups/landing-questions/`, view S — the operator's pick). A centred
 * question over the sky with a stack of company marks in its first line, one sentence, one action,
 * and six of last week's settled reports as tiles. Values are the mockup's (its `build.py`); the
 * tile bars are SVG here because `style-src 'self'` drops the mockup's inline widths.
 */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#cost{scroll-margin-top:56px}
.hq{position:relative;display:flex;flex-direction:column;min-height:calc(min(100vh,980px) - 57px);padding:0}
.hq .wrap{position:relative;z-index:1;width:100%;box-sizing:border-box}
.hq-wash{display:none}
.hq-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:84px;padding-bottom:48px}
.hq h1{margin:0;font:450 clamp(42px,5.6vw,82px)/1.02 var(--ui);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
/* 3.336: the headline rises without fading. Starting it at opacity 0 kept Chrome from taking it as
   the largest paint in 2 of 3 lab runs, which then fell to the first logo the stack rotates in at
   2.4s (a 22px image, LCP 5.2s against 2.9s) */
.hq h1.rise{animation-name:rise-y}
@keyframes rise-y{from{transform:translateY(14px)}to{transform:none}}
.hq h1>span{display:block}
.hq h1 .r{color:var(--report)}
.hq-sub{max-width:58ch;margin:22px auto 0;font-size:17px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.hq-go{display:inline-flex;align-items:center;gap:9px;height:52px;margin-top:34px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--panel);
  font:500 15.5px var(--ui);text-decoration:none;white-space:nowrap;box-shadow:0 18px 40px -22px rgba(29,26,24,.55);
  transition:background-color .18s ease-out,color .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out}
.hq-go svg{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.hq-go:hover{background:var(--report);color:var(--panel);transform:translateY(-1px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--report) 80%,transparent)}
.hq-go:hover svg{transform:translateX(2px)}
.hq-go:active{transform:translateY(0);box-shadow:none;transition-duration:.06s}
.hq-go:focus-visible{outline:2px solid var(--report);outline-offset:3px}
.hq-back{padding-bottom:30px}
.hq-bh{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
/* a heading, not a caption (3.355): the count in ink, the instruction its own sentence in ink2 */
.hq-bh h2{margin:0;font:600 24px/1.22 var(--ui);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.hq-bh h2 .go{font-weight:500;color:var(--ink2)}
.hq .skyimg{inset:-56px 0 -120px 0}
.hq + .band{border-top:0}
:root[data-theme="dark"] .hq .skyimg{display:block;filter:saturate(.55) hue-rotate(10deg)}
:root[data-theme="dark"] .hq-wash{display:block;position:absolute;inset:-56px 0 -120px 0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 26% at 50% 70%,rgba(216,114,103,.14),transparent 70%),
    linear-gradient(180deg,rgba(21,20,17,.95) 0%,rgba(21,20,17,.86) 34%,rgba(21,20,17,.62) 62%,rgba(21,20,17,.55) 76%,var(--bg) 92%)}

/* the marks in the headline; `public/landing.js` moves the stack one place every 2.4s */
.hq h1 .lg{display:inline-block;position:relative;width:2.06em;height:.86em;margin:0 .04em 0 .1em;vertical-align:-.1em}
.hq h1 .lg-st{display:block;position:absolute;inset:0}
/* 3.322: the mark fills its circle (every stacked mark is an opaque square, measured), and a
   ring in the panel colour parts each circle from the one it overlaps */
.lg-st i{position:absolute;left:0;top:0;width:.86em;height:.86em;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:#fff;box-shadow:0 0 0 .04em var(--panel),0 .05em .14em -.02em rgba(29,26,24,.32);
  transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .9s cubic-bezier(.65,0,.35,1);opacity:0;transform:translateX(1.8em) scale(.6)}
.lg-st img{width:100%;height:100%;object-fit:cover;display:block}
.lg-st i.in img{width:86%;height:86%}
.lg-st i.axp{background:#026FD1}.lg-st i.kmx{background:#FFD902}
.lg-st i[data-p="0"]{opacity:1;transform:translateX(0) scale(1);z-index:3}
.lg-st i[data-p="1"]{opacity:1;transform:translateX(.6em) scale(1);z-index:2}
.lg-st i[data-p="2"]{opacity:1;transform:translateX(1.2em) scale(1);z-index:1}
.lg-st i[data-p="out"]{opacity:0;transform:translateX(-.35em) scale(.6);z-index:4}
.lg-st i[data-p="x"]{transition:none}
.hq h1 .lg-note{position:absolute;right:calc(100% - .5em);bottom:calc(100% + .72em);display:block;white-space:nowrap;
  font:600 .36em/1 Caveat,cursive;font-style:normal;letter-spacing:0;color:var(--report);transform:rotate(-7deg);transform-origin:right bottom}
/* 3.336: the text lives in `data-note` so it is not part of the headline's text (`landing.ts`) */
.hq h1 .lg-note::before{content:attr(data-note)}
.hq h1 .lg-arrow{position:absolute;left:.5em;bottom:calc(100% + .03em);width:.66em;height:.7em;color:var(--report);transform:rotate(8deg)}
.hq h1 .lg.flip .lg-note{right:auto;left:1.05em;transform-origin:left bottom}
.hq h1 .lg.flip .lg-arrow{left:.3em;transform:scaleX(-1) rotate(8deg)}
.hq h1 .lg.bare .lg-note,.hq h1 .lg.bare .lg-arrow{display:none}
:root[data-theme="dark"] .lg-st i{box-shadow:0 0 0 .04em var(--panel),0 .05em .14em -.02em rgba(0,0,0,.5)}

/* the tiles */
.tl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tl.n5{grid-template-columns:repeat(5,minmax(0,1fr))}.tl.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tl.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tl.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.tl.n1{grid-template-columns:minmax(0,1fr)}
.tl a{display:flex;flex-direction:column;gap:12px;padding:14px 14px 13px;border-radius:16px;color:var(--ink);text-decoration:none;
  background:rgba(255,255,255,.62);border:1px solid rgba(29,26,24,.11);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background-color .2s}
.tl a:hover{transform:translateY(-3px);background:rgba(255,255,255,.82);box-shadow:0 22px 40px -26px rgba(29,26,24,.4)}
.tl a:focus-visible{outline:2px solid var(--report);outline-offset:3px}
.tl .th{display:flex;align-items:center;gap:8px}
.tl .th b{font:600 15px var(--ui)}
.tl .th .dt{margin-left:auto;font-size:11.5px;color:var(--ink2);white-space:nowrap}
/* 3.321: a rounded square, because the stored marks are square (most carry their own ground);
   the monogram fills the slot instead of nesting a second plate inside it */
.tl .lo{display:grid;place-items:center;flex:none;width:28px;height:28px;box-sizing:border-box;border-radius:8px;overflow:hidden;
  background:#fff;border:1px solid rgba(29,26,24,.1);box-shadow:0 1px 2px -1px rgba(29,26,24,.25)}
.tl .lo img{display:block;width:22px;height:22px;border-radius:5px;object-fit:contain}
.tl .lo.mono{background:var(--bg2);border-color:var(--line2);box-shadow:none}
.tl .lo.mono svg{display:block;width:100%;height:100%}
.tl .mono-plate{fill:none;stroke:none}
.tl .mono-text{fill:var(--ink2);font-family:var(--mono);font-weight:600}
/* 3.321: VolModel's rank, in a box of its own; the oxblood marks whose number it is, the same on
   every tile, and rich/cheap stay in the word and the dial's position */
.tl .vm{display:inline-block;width:13px;height:13px;flex:none}
.tl .vm .vl{fill:var(--report)}.tl .vm .vr{fill:var(--ordinary)}
.tl .own{display:inline-flex;align-items:center;gap:5px;font:600 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tl .rkb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 10px 11px;border-radius:12px;
  background:color-mix(in srgb,var(--ink) 3%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
/* 3.357: the box, its edge and its label are neutral; the dial's arc is the tile's one red (mockups/rank-quiet/ A) */
.tl .rkb .own{align-self:flex-start}
.tl .dl{display:block;width:100%;max-width:150px;height:auto;margin-top:2px;overflow:visible}
.tl .dtr,.tl .dfi{fill:none;stroke-width:9;stroke-linecap:round}
.tl .dtr{stroke:color-mix(in srgb,var(--ink) 11%,transparent)}
.tl .dfi{stroke:var(--report)}
.tl .dtk{stroke:var(--panel);stroke-width:1.6}
.tl .dn{font:400 30px var(--ui);letter-spacing:-.03em;fill:var(--ink);font-variant-numeric:tabular-nums}
.tl .de{font:400 8.5px var(--ui);fill:var(--ink2)}
.tl .dw{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.tl .dw b{font:600 15px/1.1 var(--ui)}
.tl .dw b.middle{font-weight:500;color:var(--ink2)}
.tl .dw>span{font-size:10.5px;line-height:1.3;color:var(--ink2)}
/* what happened: the market's numbers */
.tl .aft{display:flex;flex-direction:column;gap:8px;flex:1}
.tl .aft .k{font:500 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tl .tx{font:400 28px/1 var(--ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tl .tx small{display:block;margin-top:5px;font:400 12px/1.3 var(--ui);letter-spacing:0;color:var(--ink2)}
.tl .bars{display:grid;grid-template-columns:42px 1fr auto;column-gap:7px;row-gap:5px;align-items:center;font-size:11.5px;color:var(--ink2)}
.tl .tb{display:block;width:100%;height:7px}
.tl .tb .bp{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.tl .tb .bm{fill:var(--ink)}
.tl .bars b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.tl .iv{margin-top:auto;display:flex;justify-content:space-between;padding-top:7px;
  border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent);font-size:11.5px;color:var(--ink2)}
.tl .iv b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.r2-foot{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:12.5px;color:var(--ink2)}
.s-all{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);
  text-underline-offset:4px;white-space:nowrap}
.s-all span{display:inline-block;margin-left:4px;transition:transform .18s ease-out}
.s-all:hover{text-decoration-color:var(--acc)}.s-all:hover span{transform:translateX(3px)}
:root[data-theme="dark"] .tl a{background:rgba(21,20,17,.5);border-color:rgba(239,237,231,.14)}
:root[data-theme="dark"] .tl a:hover{background:rgba(29,28,24,.8)}
:root[data-theme="dark"] .tl .lo{border-color:rgba(239,237,231,.18)}
@media (max-width:1180px){.tl,.tl.n4,.tl.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .hq{min-height:0}
  .hq-center{padding-top:64px;padding-bottom:32px}
  .hq-sub{font-size:16px}
  .hq h1 .lg-note{font-size:.44em}
  .hq-bh h2{font-size:21px}.hq-bh h2 span{display:block}
  .tl,.tl.n3,.tl.n4,.tl.n5{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tl a{gap:8px;padding:10px 11px 10px;border-radius:13px}
  .tl .lo{width:22px;height:22px;border-radius:6px}.tl .lo img{width:17px;height:17px;border-radius:4px}
  .tl .th{gap:6px}.tl .th b{font-size:13.5px}.tl .th .dt{display:none}
  /* 3.321, compact: the dial beside its word, the caption cut to "before the report", no "What
     happened" kicker (the box already marks what is ours, "IV after" says when), and the
     multiple's caption on its line */
  .tl .rkb{display:grid;grid-template-columns:62px 1fr;column-gap:8px;row-gap:5px;align-items:center;padding:7px 8px 8px;border-radius:9px}
  .tl .rkb .own{grid-column:1/3;font-size:8.5px;letter-spacing:.05em;gap:4px}.tl .vm{width:11px;height:11px}
  .tl .dl{width:62px;max-width:none;margin:0}
  .tl .de{display:none}
  .tl .dw{align-items:flex-start;text-align:left;gap:1px}
  .tl .dw b{font-size:14px}.tl .dw>span{font-size:9.5px;line-height:1.2}.tl .dw .fx{display:none}
  .tl .aft{gap:5px}.tl .aft .k{display:none}
  .tl .tx{display:flex;align-items:baseline;gap:5px;font-size:22px;letter-spacing:-.03em}
  .tl .tx small{margin:0;font-size:9.5px;line-height:1.15}
  .tl .bars{grid-template-columns:36px 1fr auto;column-gap:5px;row-gap:3px;font-size:10.5px}
  .tl .tb{height:5px}
  .tl .iv{padding-top:5px;font-size:10.5px}
  .r2-foot{flex-direction:column;margin-top:10px;font-size:12px;gap:8px}
  .r2-foot>span:empty{display:none}
  .s-all{white-space:normal}
}
@media (min-width:520px) and (max-width:700px){.tl,.tl.n4,.tl.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:360px){
  .tl .rkb{grid-template-columns:50px 1fr;column-gap:6px;padding:6px 7px 7px}
  .tl .dl{width:50px}
  .tl .dw b{font-size:12.5px}.tl .dw>span{font-size:9px}
  .tl .tx{font-size:20px}.tl .tx small{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .lg-st i{transition:none}
  .hq-go,.hq-go:hover,.hq-go:active,.tl a,.tl a:hover,.s-all span{transform:none;transition:none}
}

/* 3.318: a visitor's bands are headed by the question they answer, with no kicker */
.band h2.qh{max-width:22ch;text-wrap:balance}

/* 3.318 (view F): "Is this stock just jumpy"'s forks window as clear glass over the sky. The sky
   sits behind the window on `.paper`, full-bleed and faded out; the felt and its cream wash go; the
   fork LABELS darken a step so they hold 4.5:1 on the bluest sky. Dark gets the sky at night. */
.band:has(.pwin){overflow-x:clip}
.paper:has(.pwin){position:relative;isolation:isolate}
.paper:has(.pwin)::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-64px;bottom:-110px;left:50%;width:100vw;transform:translateX(-50%);
  background:url(/img/background.jpg) center 46%/cover no-repeat;opacity:.62;
  filter:saturate(.6) hue-rotate(10deg) sepia(.08);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 22%,#000 64%,transparent 100%);
  mask:linear-gradient(180deg,transparent 0,#000 22%,#000 64%,transparent 100%)}
.win:has(.pwin){border-color:transparent;--muted:#4E4842;
  background:
    linear-gradient(112deg,transparent 0 56%,rgba(255,255,255,.18) 60%,rgba(255,255,255,.05) 63%,transparent 68%),
    linear-gradient(112deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 28%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.07) 100%);
  box-shadow:0 30px 60px -36px rgba(29,26,24,.20)}
html:root .win .pwin{background:none}
:root:not([data-theme="dark"]) .pwin .forks .sum{border-top-color:rgba(29,26,24,.14)}
:root:not([data-theme="dark"]) .pwin .fork .tk{stroke:rgba(29,26,24,.26)}
:root:not([data-theme="dark"]) .pwin .fork .tk.maj{stroke:rgba(29,26,24,.55)}
:root:not([data-theme="dark"]) .pwin .fork text.r{fill:#812c2a}
:root:not([data-theme="dark"]) .pwin .fork text.o{fill:#2B5563}
:root:not([data-theme="dark"]) .pwin .fk-s1{stop-color:#FFFFFF;stop-opacity:.70}
:root:not([data-theme="dark"]) .pwin .fk-s2{stop-color:#FFFFFF;stop-opacity:.30}
:root:not([data-theme="dark"]) .pwin .fk-s3{stop-color:#FFFFFF;stop-opacity:.28}
:root:not([data-theme="dark"]) .pwin .fk-s4{stop-color:#B5C5CB;stop-opacity:.45}
:root[data-theme="dark"] .paper:has(.pwin)::before{opacity:1;
  background:linear-gradient(rgba(21,20,17,.72),rgba(21,20,17,.72)),url(/img/background.jpg) center 46%/cover no-repeat}
:root[data-theme="dark"] .win:has(.pwin){--muted:#ABA89A;box-shadow:0 30px 60px -36px rgba(0,0,0,.6);
  background:
    linear-gradient(112deg,transparent 0 56%,rgba(255,255,255,.07) 60%,rgba(255,255,255,.02) 63%,transparent 68%),
    linear-gradient(112deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 28%,rgba(255,255,255,.01) 50%,rgba(255,255,255,.03) 100%)}

/* 3.318: the expiry-week band's article card, where its small print was */
.wx-art{display:grid;gap:6px;max-width:52ch;margin-top:22px;padding:16px 18px 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);color:var(--ink);text-decoration:none;
  transition:border-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out}
.wx-art:hover{border-color:color-mix(in srgb,var(--report) 45%,var(--line));box-shadow:0 14px 30px -20px rgba(29,26,24,.45);transform:translateY(-1px)}
.wx-art:focus-visible{outline:2px solid var(--report);outline-offset:3px}
.wx-art .k{font:500 11.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wx-art .t{font:600 16px/1.3 var(--ui);letter-spacing:-.01em;text-wrap:balance}
.wx-art .go{justify-self:start;margin-top:4px;font:600 14px var(--ui);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:4px}
.wx-art:hover .go{text-decoration-color:var(--acc)}
.wx-art .ar{display:inline-block;margin-left:4px;transition:transform .18s ease-out}
.wx-art:hover .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.wx-art,.wx-art:hover,.wx-art:hover .ar{transform:none}}

/* cost-table: begin. BUILD_PLAN 3.318 (option H) and 3.319 (option B2): "What does it cost?", the
   table `/` closes on and `/pricing/` is (`views/cost-table.ts`). ONE block, carried verbatim by
   pages/landing.add.css and styles/app.css (unlayered, at its end); check_css.mjs fails if they differ. */
.cx-lede{max-width:56ch;margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--ink2)}
.ck{flex:none;width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.ck.y{stroke:var(--report)}.ck.p{stroke:var(--muted)}.ck.n{stroke:var(--line2)}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font:500 15px var(--ui);
  text-decoration:none;white-space:nowrap;border:1px solid var(--ink);cursor:pointer;
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out}
.cx-btn.solid{background:var(--ink);color:var(--panel)}.cx-btn.line{color:var(--ink);background:transparent}
.cx-btn:hover{transform:translateY(-1px)}
.cx-btn.line:hover{background:var(--ink);color:var(--panel);border-color:var(--ink);box-shadow:0 10px 22px -14px rgba(29,26,24,.55)}
.cx-btn.solid:hover{background:var(--report);border-color:var(--report);color:var(--panel);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--report) 80%,transparent)}
.cx-btn:active{transform:translateY(0);box-shadow:none;transition-duration:.06s}
.cx-btn:focus-visible{outline:2px solid var(--report);outline-offset:3px}
.cx-box{position:relative;margin-top:34px}
.cx-tbl{border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.cx-tbl .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cx-tr{display:grid;grid-template-columns:minmax(0,1.05fr) repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.cx-tr:first-child{border-top:0}
.cx-tr>*{display:flex;gap:10px;padding:15px 20px;font-size:14px;line-height:1.5;color:var(--ink2)}
.cx-tr>:first-child{color:var(--ink);font-weight:600}
.cx-tr>.hi{background:color-mix(in srgb,var(--report) 6%,transparent)}
.cx-tr .off{color:var(--muted)}
.cx-tr b{color:var(--ink)}
.cx-tr a.cx-x{color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:3px}
.cx-tr a.cx-x:hover{color:var(--acc);text-decoration-color:var(--acc)}
/* 3.398: the three report rows link where their reports live (`views/cost-table.ts`, `place`) */
.cx-tr>.cx-rhd{flex-direction:column;gap:2px}
.cx-rh{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:3px}
.cx-rh:hover{color:var(--acc);text-decoration-color:var(--acc)}
.cx-go{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.cx-rh:hover .cx-go{transform:translateX(2px)}
.cx-where{font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}
/* 3.356: one line over the three report rows says what they show, so the rows only say when */
.cx-tr.cx-gp{grid-template-columns:minmax(0,1fr);background:color-mix(in srgb,var(--ink) 3%,transparent)}
.cx-tr.cx-gp>*{flex-direction:column;gap:3px;padding:12px 20px}
.cx-gp .lb{font-size:13.5px}
.cx-gp .sb{font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink2)}
.cx-hd>*{flex-direction:column;gap:4px;padding:22px 20px 18px}
.cx-hd .t{font:600 15px var(--ui);color:var(--ink)}
.cx-hd .pr{font:450 34px/1.05 var(--ui);letter-spacing:-.035em;color:var(--ink)}
.cx-hd .pr small{font:400 13px var(--ui);color:var(--ink2);letter-spacing:0}
.cx-hd .s{font-size:12.5px;color:var(--muted)}
.cx-ft>*{display:block;padding:18px 20px 22px}
.cx-mine{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;box-sizing:border-box;margin:0;
  padding:0 20px;border-radius:999px;border:1px dashed var(--line2);background:color-mix(in srgb,var(--ink) 3%,transparent);
  font-size:13.5px;line-height:1.3;color:var(--ink2)}
.cx-mine b{color:var(--ink)}.cx-mine .ck{margin-top:0}.cx-mine .cx-nw{display:none}
/* 3.399: a free account's column says it is theirs, beside its price (mockups/pricing-align/ A) */
.cx-you{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--panel);
  font:600 11px/1.45 var(--ui);letter-spacing:.01em;white-space:nowrap;vertical-align:middle;position:relative;top:-.12em}
/* 3.319: the subscription's billing, on its title line; Yearly is checked (SPEC §7, annual first) */
.cx-bill{position:absolute;z-index:1;top:18px;right:20px;display:inline-grid;grid-template-columns:1fr 1fr;padding:2px;
  border-radius:999px;border:1px solid var(--line2);background:var(--panel)}
.cx-bill label{position:relative;cursor:pointer}
.cx-bill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cx-bill span{display:block;padding:3px 9px;border-radius:999px;font:500 11.5px var(--ui);color:var(--ink2);text-align:center;
  transition:background-color .15s,color .15s}
.cx-bill input:checked+span{background:var(--ink);color:var(--panel)}
.cx-bill input:focus-visible+span{outline:2px solid var(--report);outline-offset:2px}
.cx-box .cx-mo{display:none}
.cx-box:has(.cx-bill input[value=monthly]:checked) .cx-mo{display:revert}
.cx-box:has(.cx-bill input[value=monthly]:checked) a.cx-mo{display:inline-flex}
.cx-box:has(.cx-bill input[value=monthly]:checked) .cx-ya{display:none}
/* the column cannot hold the title and the switch below 1140px (they touch at 1010) */
@media (max-width:1140px){
  .cx-box{display:flex;flex-direction:column;margin-top:26px}
  .cx-bill{position:static;align-self:flex-end;margin:0 0 10px;padding:3px}
  .cx-bill span{padding:5px 14px;font-size:13px}
}
@media (max-width:760px){
  .cx-tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-tr>:first-child{grid-column:1/-1;padding-bottom:0}
  .cx-tr>.nb{display:none}
  .cx-hd>:first-child,.cx-ft>:first-child{display:none}
  .cx-tr>*{padding:12px 16px}
  .cx-hd .pr{font-size:28px}
  .cx-ft{grid-template-columns:1fr}.cx-ft>*{padding:8px 16px}.cx-ft>:nth-child(3){padding-top:16px}.cx-ft>:last-child{padding-bottom:18px}
  .cx-ft .cx-btn{width:100%}
  .cx-mine{display:flex;width:100%}.cx-mine .cx-nw{display:inline}.cx-mine .cx-wd{display:none}
  .cx-bill{width:50%;box-sizing:border-box}.cx-bill span{padding:5px 6px}
  .cx-tr.cx-gp>*{padding:12px 16px}
}
.cx-fine{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cx-btn,.cx-btn:hover,.cx-btn:active,.cx-rh:hover .cx-go{transform:none}.cx-go{transition:none}}
/* cost-table: end */

/* ---------------------------------------------------------------------------------------------
 * 3.345 — the first screen explains a report (`mockups/landing-plain/`, the operator's picks of
 * 2026-10-29: tiles open card A, section order A, the folded past reports, copy v2). The card and
 * its pictures are scoped to `.rdk`, because their short names (.bar, .key, .rep, .line) exist
 * elsewhere on this page; the page-level additions are `.rx-*` (the fold) and `.lx-*`.
 * ------------------------------------------------------------------------------------------- */

/* the tiles that open a card */
.tl>a[data-card]{cursor:pointer;transition:opacity .25s,box-shadow .25s}
.tl.has-sel>a:not(.sel){opacity:.5}
.tl.has-sel>a:not(.sel):hover{opacity:.85}
.tl>a.sel{box-shadow:0 0 0 2px var(--ink),var(--shadow)}
.tl-rest[hidden]{display:none}
.rdk-wrap{position:relative;margin:22px 0}
.rdk-wrap[hidden]{display:none}
.rdk-wrap.in{animation:rdk-open .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rdk-open{from{opacity:0;transform:translateY(-8px)}}

/* the card: identity bar, the steps, then the sentence and figures beside the picture */
.rdk{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.rdk::before{content:"";position:absolute;top:-9px;left:calc(var(--cx,50%) - 9px);width:16px;height:16px;transform:rotate(45deg);
  background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px 0 0 0;transition:left .35s cubic-bezier(.2,.7,.2,1)}
.rdk svg{flex:none}
.rdk .vm{display:inline-block;width:12px;height:12px;flex:none}
.rdk .vm .vl{fill:var(--report)}
.rdk .vm .vr{fill:var(--ordinary)}
.rdk .short{display:none}
.rdk .p-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.rdk .p-co{display:inline-flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink2);font:500 13.5px var(--ui)}
.rdk .p-co img{width:26px;height:26px;border-radius:7px;background:#fff;object-fit:contain;box-shadow:0 0 0 1px var(--line)}
.rdk .p-co b{font:650 15px var(--ui);letter-spacing:.01em;color:var(--ink)}
.rdk .p-co .dt{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdk .p-co i{font-style:normal;color:var(--muted)}
.rdk .p-co:hover b{text-decoration:underline;text-underline-offset:3px}
.rdk .p-ctl{display:flex;align-items:center;gap:2px}
.rdk .p-play,.rdk .p-x{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 10px;border:0;border-radius:8px;
  background:transparent;color:var(--ink2);font:500 13px var(--ui);cursor:pointer}
.rdk .p-x{width:32px;padding:0}
.rdk .p-play:hover,.rdk .p-x:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.rdk .p-play svg{width:11px;height:11px;fill:currentColor}
.rdk .p-x svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}
.rdk .p-play .i-play,.rdk .p-play.paused .i-pause{display:none}
.rdk .p-play.paused .i-play{display:block}
.rdk .p-play:focus-visible,.rdk .p-x:focus-visible,.rdk .p-step:focus-visible,.rdk .p-co:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* phones only (3.386): the drawn arrow after the ticker. Above 480px the card is unchanged, the ↗
   glyph after the date included. The "Open <SYM>'s earnings page" row 3.386 also put at the card's
   foot was removed on the operator's ask (3.391). */
.rdk .p-co .sy{display:contents}
.rdk .go-ne{display:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
/* the steps: no rust here (operator: "a lot of red"); the V marks say which steps are ours */
.rdk .pa-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 54px minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;padding:14px 18px 2px}
.rdk .ph{display:flex;align-items:center;gap:6px;margin-bottom:8px;font:600 11px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rdk .ph svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.rdk .ph.bf{grid-column:1/4;grid-row:1;color:var(--ink2)}
.rdk .ph.af{grid-column:5;grid-row:1}
.rdk .mk{grid-column:4;grid-row:1/3;position:relative;display:grid;place-items:center}
.rdk .mk::before{content:"";position:absolute;top:2px;bottom:6px;left:50%;border-left:1px dashed var(--line2)}
.rdk .mk em{position:relative;padding:2px 0;background:var(--panel);font:600 10px var(--ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* each bar shares its step's cell rather than sitting inside the <button>, where iOS Safari did not draw it (3.348) */
.rdk .p-step{grid-row:2;display:block;padding:12px 0 14px;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:left}
.rdk .seg{grid-row:2;align-self:start;position:relative;z-index:1;pointer-events:none;display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.rdk [data-i="0"]{grid-column:1}.rdk [data-i="1"]{grid-column:2}.rdk [data-i="2"]{grid-column:3}.rdk [data-i="3"]{grid-column:5}
.rdk .seg i{display:block;height:100%;width:0;background:var(--ink)}
.rdk .nm{display:flex;align-items:center;gap:7px;font:500 14px var(--ui);color:var(--muted);white-space:nowrap}
.rdk .nm b{font:600 12px var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.rdk .p-step:hover .nm,.rdk .p-step[aria-selected="true"] .nm,.rdk .p-step[aria-selected="true"] .nm b{color:var(--ink)}
/* The body is ONE cell holding all four steps (3.395): landing.js draws every pane when the card
   opens and shows one, so the card is as tall as its tallest step at every width and a step change
   moves nothing below it. Each pane carries the two-column layout the body used to. */
.rdk .p-bd{display:grid;padding:24px 28px 26px;min-height:284px;border-top:1px solid var(--line)}
/* only the incoming pane fades: a cross-fade laid two steps' text over each other for .3s */
.rdk .p-pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:center;visibility:hidden;opacity:0}
.rdk .p-pane.on{visibility:visible;opacity:1;transition:opacity .22s ease}
.rdk .p-say{margin:0;max-width:34ch;font:500 19px/1.42 var(--ui);letter-spacing:-.01em;color:var(--ink)}
.rdk .p-say b,.rdk .p-say .own{color:var(--report);font-weight:600}
.rdk .p-facts{margin:20px 0 0;display:grid}
.rdk .pf{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:8px 0;border-top:1px solid var(--line)}
.rdk .pf dt{font:400 13.5px var(--ui);color:var(--muted)}
.rdk .pf dd{margin:0;font:600 15px var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.rdk .pf.key dd{font-size:26px;letter-spacing:-.025em;line-height:1}
.rdk .pf.key dd small{margin-left:2px;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.rdk .pf.own dt,.rdk .pf.past dd{color:var(--report)}
.rdk .p-pic{display:grid;place-items:center;align-content:center;gap:10px;min-height:236px}
.rdk .p-pic>.pp{width:100%;max-width:640px}
.rdk .p-pic[data-step="3"]>.pp{max-width:520px}

/* the pictures, drawn by public/landing.js on a 600-unit width and shown near 1:1 */
.rdk .b-fig,.rdk .p-fig,.rdk .h-fig{display:block;width:100%;height:auto;overflow:visible}
.rdk .b-s1{stop-color:var(--ink);stop-opacity:.16}
.rdk .b-s2{stop-color:var(--ink);stop-opacity:.05}
.rdk .b-tail{fill:var(--ink);fill-opacity:.035}
.rdk .b-curve{fill:none;stroke:var(--ink2);stroke-width:1.4;stroke-linejoin:round}
.rdk .b-grid{stroke:var(--line);stroke-width:1}
.rdk .b-edge{stroke:var(--ink2);stroke-width:1.2;stroke-dasharray:3 3}
.rdk .b-el{font:600 12.5px var(--ui);fill:var(--ink2);font-variant-numeric:tabular-nums}
.rdk .b-lab{font:500 13px var(--ui);fill:var(--ink2)}
.rdk .b-note{font:400 11px var(--ui);fill:var(--muted)}
.rdk .b-axis{stroke:var(--line2);stroke-width:1.2}
.rdk .b-minor{stroke:var(--line2);stroke-width:1}
.rdk .b-tick{font:400 11.5px var(--ui);fill:var(--muted);font-variant-numeric:tabular-nums}
.rdk .b-stem{stroke:var(--ink);stroke-width:2}
.rdk .b-dot,.rdk .b-pill{fill:var(--ink)}
.rdk .b-val{font:600 13px var(--ui);fill:var(--panel);font-variant-numeric:tabular-nums}
.rdk .b-mk.past .b-stem{stroke:var(--report)}
.rdk .b-mk.past .b-dot,.rdk .b-mk.past .b-pill{fill:var(--report)}
.rdk .p-in{stroke:var(--ink);stroke-width:9;stroke-linecap:round}
.rdk .p-rep,.rdk .p-ord{stroke-width:9;stroke-linecap:round}
.rdk .p-br.s0{stop-color:var(--report);stop-opacity:.75}
.rdk .p-br.s1{stop-color:var(--report)}
.rdk .p-bo.s0{stop-color:var(--ordinary);stop-opacity:.75}
.rdk .p-bo.s1{stop-color:var(--ordinary)}
.rdk .p-ticks line{stroke:var(--panel);stroke-width:1.3;stroke-opacity:.85}
.rdk .p-g1{stop-color:var(--panel)}
.rdk .p-g2{stop-color:var(--bg2)}
.rdk .p-tri{stroke:var(--report);stroke-width:2.4;stroke-linejoin:round}
.rdk .p-hi{stroke:#fff;stroke-opacity:.8;stroke-width:2;stroke-linecap:round}
:root[data-theme="dark"] .rdk .p-hi{stroke-opacity:.18}
.rdk .p-shadow{fill:var(--ink);fill-opacity:.09}
.rdk .p-own .vl{fill:var(--report)}
.rdk .p-own .vr{fill:var(--ordinary)}
.rdk .p-ownl{font:600 12.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;fill:var(--report)}
.rdk .p-l{font:500 12.5px var(--ui);fill:var(--muted)}
.rdk .p-v{font:600 19px var(--ui);fill:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rdk .p-l.rep,.rdk .p-v.rep{fill:var(--report)}
.rdk .p-l.ord,.rdk .p-v.ord{fill:var(--ordinary)}
.rdk .p-note{font:400 11px var(--ui);fill:var(--muted)}
.rdk .h-zone{fill:var(--bg2);fill-opacity:.7}
.rdk .h-grid{stroke:var(--line);stroke-width:1}
.rdk .h-z{font:500 12.5px var(--ui);fill:var(--muted)}
.rdk .h-base{stroke:var(--line2);stroke-width:1.2}
.rdk .h-b{fill:var(--line2)}
.rdk .h-b.cur{fill:var(--report)}
.rdk .h-med{stroke:var(--ink2);stroke-width:1.3;stroke-dasharray:5 4}
.rdk .h-medl{font:600 12px var(--ui);fill:var(--ink2);paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.rdk .h-cap{font:600 13px var(--ui);fill:var(--report)}
.rdk .h-tk{stroke:var(--report);stroke-width:1.5}
.rdk .c-row{display:grid;grid-template-columns:84px 1fr 34px;align-items:center;gap:12px;margin:6px 0}
.rdk .c-k{font:500 12.5px var(--ui);color:var(--muted)}
.rdk .c-bar{position:relative;height:14px;border-radius:5px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.rdk .c-bar i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:5px;background:linear-gradient(180deg,color-mix(in srgb,var(--ordinary) 88%,var(--panel)),var(--ordinary))}
.rdk .c-pre{width:100%}
.rdk .c-gap{position:absolute;top:0;bottom:0;right:0;border-radius:0 5px 5px 0;text-decoration:none;opacity:0;transition:opacity .3s;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ordinary) 30%,transparent) 0 2px,transparent 2px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ordinary) 45%,transparent)}
.rdk .c-gap.on{opacity:1}
.rdk .c-gap em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:1px 7px;border-radius:999px;white-space:nowrap;
  font:600 12px var(--ui);font-style:normal;color:var(--ordinary);background:var(--panel);box-shadow:0 0 0 1px color-mix(in srgb,var(--ordinary) 45%,transparent)}
.rdk .c-row b{font:600 14px var(--ui);text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

@media (max-width:900px){
  .rdk .full{display:none}.rdk .short{display:inline}
  /* the short labels drop "VolModel", so the mark is what still says steps 2 and 3 are ours (3.354) */
  .rdk .p-step .nm{gap:5px}.rdk .p-step .vm{width:11px;height:11px}
  .rdk .pa-st{grid-template-columns:repeat(3,minmax(0,1fr)) 40px minmax(0,1fr);padding:12px 14px 0}
  .rdk .p-bd{padding:20px 18px 22px;min-height:0}
  /* one column: the sentence and facts at the top, the picture centred in the room the tallest step leaves */
  .rdk .p-pane{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px;align-items:stretch}
  .rdk .p-say{max-width:none;font-size:17.5px}
  .rdk .p-pic{min-height:0}
  .rdk::before{display:none}
}
@media (max-width:480px){
  .rdk .p-co{display:grid;grid-template-columns:26px auto;column-gap:10px;row-gap:1px;align-items:center}
  .rdk .p-co img{grid-row:1/3}
  .rdk .p-co b{line-height:1.1}
  .rdk .p-co .dt{grid-column:2;font-size:12.5px;line-height:1.2;overflow:visible}
  .rdk .p-co i{display:none}
  .rdk .p-co .sy{display:inline-flex;align-items:center;gap:6px;grid-column:2}
  .rdk .p-co .sy .go-ne{display:block;width:15px;height:15px;color:var(--ink2)}
  .rdk .p-co:hover .go-ne{transform:translate(1.5px,-1.5px)}
  .rdk .p-play .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rdk .nm{font-size:12.5px}.rdk .nm b{display:none}
  .rdk .mk em{display:none}
  .rdk .pf.key dd{font-size:22px}
  /* the pictures are 600 units wide; on a phone their type is set in those units */
  .rdk .b-tick,.rdk .b-el{font-size:18px}.rdk .b-lab{font-size:20px}.rdk .b-note{font-size:16px}.rdk .b-val{font-size:21px}
  .rdk .p-l{font-size:20px}.rdk .p-v{font-size:26px}.rdk .p-ownl{font-size:17px}
  .rdk .h-z{font-size:21px}.rdk .h-cap{font-size:23px}
}
@media (prefers-reduced-motion:reduce){.rdk-wrap.in,.rdk::before,.rdk .c-gap,.rdk .go-ne,.rdk .p-pane,.rdk .p-pane.on,.tl>a[data-card]{animation:none;transition:none}}

/* "Is this stock just jumpy": the argument as numbered facts, aligned with the paragraph beside it */
.lx-facts{margin-top:19px}
.lx-facts ol{margin:0;padding:0;list-style:none;counter-reset:lx}
.lx-facts li{position:relative;padding:0 0 12px 34px;font:400 16px/1.5 var(--ui);color:var(--ink2);counter-increment:lx}
.lx-facts li::before{content:counter(lx);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:600 12px var(--ui);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.lx-facts li b{color:var(--ink);font-weight:600}
.lx-facts .lx-fn{margin:4px 0 0 34px;font:400 13.5px/1.5 var(--ui);color:var(--muted)}
@media (max-width:980px){.lx-facts{margin-top:0}.split>.lede{margin-bottom:0}.split>.lede+.lede{margin-top:0}}

/* "Why should I trust": a worked miss in place of the paragraph */
.lx-miss{margin-top:18px;max-width:440px;padding:16px 18px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.lx-miss .lx-k{margin:0 0 8px;font:600 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lx-r{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font:400 15px var(--ui);color:var(--ink2)}
.lx-r b{font:600 18px var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.lx-r.tot{border-bottom:0}
.lx-r.tot span{color:var(--ink);font-weight:600}
.lx-miss .lx-n{margin:8px 0 0;font:400 13.5px/1.5 var(--ui);color:var(--muted)}

/* the folded past reports: a header row over one column per run length */
.rx-sum{margin-top:18px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.rx-hd{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:16px 18px 16px 20px;border-bottom:1px solid var(--line)}
.rx-hd p{margin:0;font:400 15px/1.5 var(--ui);color:var(--ink2)}
.rx-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);font:600 14px var(--ui);color:var(--ink)}
.rx-btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.rx-btn:focus-visible,.rx-col a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rx-btn svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .25s}
.rx-fold.open .rx-btn svg{transform:rotate(180deg)}
.rx-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.rx-col{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;border-right:1px solid var(--line)}
.rx-col:last-child{border-right:0}
.rx-gl{margin:0 0 2px 2px;font:500 12px var(--ui);color:var(--muted)}
.rx-col a{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 6px;border-radius:10px;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line);font:600 13px var(--ui);letter-spacing:.01em;color:var(--ink);text-decoration:none}
.rx-col a::after{content:"→";margin-left:auto;font-weight:400;color:var(--muted);opacity:0;transition:opacity .15s}
.rx-col a:hover{box-shadow:inset 0 0 0 1px var(--ink2)}
.rx-col a:hover::after{opacity:1}
.rx-col .mono-logo,.rx-col .mono{width:24px;height:24px;flex:none;border-radius:6px}
.rx-col .mono-logo{background:#fff;object-fit:contain}
/* landing.css styles a monogram only inside the tiles, so a mark-less company here drew a black plate */
.rx-col .mono-plate{fill:var(--bg2);stroke:var(--line2);stroke-width:1}
.rx-col .mono-text{fill:var(--ink2);font-family:var(--mono);font-weight:600}
.rx-more{display:flex;justify-content:center;padding:14px 0 0}
.rx-more .rx-less{padding:0 16px;height:36px;font-size:13.5px}
/* closed only once landing.js has run; with scripts off the table shows and the buttons do not */
.rx-fold:not(.rx-on) .rx-btn,.rx-fold:not(.rx-on) .rx-more{display:none}
.rx-fold.rx-on:not(.open) .rx-body{display:none}
.rx-fold.rx-on.open .rx-sum{display:none}
@media (max-width:760px){
  .rx-hd{flex-direction:column;align-items:stretch}
  .rx-hd .rx-btn{justify-content:center}
  .rx-cols{grid-template-columns:minmax(0,1fr)}
  .rx-col{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .rx-col:last-child{border-bottom:0}
  .rx-gl{margin:0}
}

/* the expiry-week chart: a narrower value column, and on a phone one line per group over its lane */
@media (min-width:641px){.ranges{--vcol:72px}.vcol .val{text-align:right}}
@media (max-width:640px){
  .ranges .rkey{margin-bottom:6px}
  .ranges .axis{margin-bottom:2px}
  .rrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who val" "lane lane";row-gap:4px;column-gap:12px;padding:9px 0 8px}
  .rrow .who{grid-area:who;display:flex;align-items:baseline;gap:8px;min-width:0}
  .rrow .who b{display:inline}
  .rrow .who small{white-space:nowrap}
  .rrow .vcol{grid-area:val}
  .rrow .vcol .val{font-size:14px}
  .rrow .lane{grid-area:lane;order:0;height:22px}
  .rrow .lane .zero{top:-4px;bottom:-4px}
  .rrow .lane .rb{top:8px}
  .rrow .lane .pt{top:2px}
}
/* the board teaser's dates: under the name below 1100px, and never cut */
.band.macro .blr .s i{overflow:visible;text-overflow:clip}
@media (max-width:1100px){.band.macro .blr .s{flex-direction:column;align-items:flex-start;gap:1px}.band.macro .blr .s i{line-height:1.35}}
.amore .arr{margin-left:6px}
/* 3.346: the page no longer drifts sideways. The hero sky's slow zoom (`kb`) pushed the document 1-5px wider
   than the window as it grew (scrollX 5 on production at 1440, 2026-10-29); clipping the hero itself did not
   hold it, clipping `main` does. `clip`, not `hidden`, so no scroll container is made and sticky still works. */
main{overflow-x:clip}
/* 3.345: end */

/* 3.358 tidy: a short link's arrow never wraps onto a line of its own on a phone, and the
   expiry-week chart's likely-range track (--bg2, a step off --panel in light) stays visible in dark */
.lx-fn .x{white-space:nowrap}
:root[data-theme="dark"] .lane .rb{background:color-mix(in srgb,var(--ink) 16%,transparent)}

/* 3.398 (the board-journey work, `mockups/board-journey/` option B, the operator's pick over five
   rounds): a visitor's first screen splits, and its right half is the board (`heroBoard` in
   `views/landing.ts`). Three tabs in time order, radios and `:has()` (the cost table's billing
   switch's pattern); the open tab is a raised card on a light track, the company page's Past | Next
   switch (`.vsw`, 3.216), which the operator picked over a folder tab (round 6, T2). The panes share
   one grid cell, so the window keeps one height whichever is open. Stacked and centred below 1101px,
   as production's hero is. */
.hb-copy{display:flex;flex-direction:column;align-items:center}
.hb-ctas{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px}
.hb-ctas .hq-go{margin-top:0}
.hb-sec{font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.hb-sec:hover{color:var(--acc);border-bottom-color:var(--acc)}
.hb-board{width:100%;max-width:640px;margin-top:36px;text-align:left}
.hb-board .win{font-size:13px}
@media (min-width:1101px){
  .hq-center.hb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:48px;align-items:center;text-align:left;padding-top:56px;padding-bottom:36px}
  .hb-hero .hb-copy{align-items:flex-start}
  .hb-hero h1{font-size:clamp(40px,4.3vw,64px);text-align:left}
  .hb-hero .hq-sub{margin-left:0;text-align:left;font-size:16px}
  .hb-hero .hb-ctas{justify-content:flex-start}
  .hb-board{max-width:none;margin-top:0}
}
.hb-i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hb-i.lk{width:13px;height:13px}

.hb-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;background:var(--bg);border-bottom:1px solid var(--line)}
.hb-tab{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--muted);transition:color .15s,background-color .15s}
.hb-tab b{font-weight:500;font-size:13.5px;color:inherit}
.hb-tab small{grid-column:2;font:500 10.5px var(--mono);letter-spacing:.03em;color:inherit;opacity:.85}
.hb-tab.t-next{grid-template-columns:1fr auto}
.hb-tab.t-next small{grid-column:1}
.hb-tab.t-next .hb-i{grid-row:1/3;grid-column:2}
.hb-tab.t-past .hb-i,.hb-tab .hb-cal{grid-row:1/3}
.hb-tab:hover{color:var(--ink2);background:color-mix(in srgb,var(--panel) 55%,transparent)}
.win:has(#hb-past:checked) .t-past,.win:has(#hb-today:checked) .t-today,.win:has(#hb-next:checked) .t-next{color:var(--ink);background:var(--panel);box-shadow:0 0 0 1px var(--line2),0 3px 10px -5px rgba(29,26,24,.35)}
.win:has(#hb-past:checked) .t-past b,.win:has(#hb-today:checked) .t-today b,.win:has(#hb-next:checked) .t-next b{font-weight:600}
.win:has(#hb-past:checked) .t-past small,.win:has(#hb-today:checked) .t-today small,.win:has(#hb-next:checked) .t-next small{color:var(--muted);opacity:1}
.win:has(#hb-past:focus-visible) .t-past,.win:has(#hb-today:focus-visible) .t-today,.win:has(#hb-next:focus-visible) .t-next{outline:2px solid var(--acc);outline-offset:-3px}
/* the date is the "today" marker: a calendar leaf in hairline, inked while Due today is open */
.hb-cal{display:inline-grid;grid-template-rows:9px 16px;width:24px;border:1px solid var(--line2);border-radius:5px;overflow:hidden;text-align:center;background:var(--panel)}
.hb-cal i{font:600 6.5px/9px var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;background:var(--line);color:var(--muted)}
.hb-cal b{font:600 12.5px/16px var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.hb-tab:hover .hb-cal b{color:var(--ink2)}
.win:has(#hb-today:checked) .t-today .hb-cal{border-color:var(--ink2)}
.win:has(#hb-today:checked) .t-today .hb-cal i{background:var(--ink2);color:var(--panel)}
.win:has(#hb-today:checked) .t-today .hb-cal b{color:var(--ink)}

.hb-panes{display:grid}
.hb-pane{grid-area:1/1;display:flex;flex-direction:column;visibility:hidden}
.win:has(#hb-past:checked) .p-past,.win:has(#hb-today:checked) .p-today,.win:has(#hb-next:checked) .p-next{visibility:visible}
.hb-ph,.hb-row{display:grid;grid-template-columns:minmax(0,1fr) 104px 84px 96px;gap:10px;align-items:center;padding:0 14px}
.p-past .hb-ph,.p-past .hb-row{grid-template-columns:minmax(0,1fr) 92px 84px 84px}
.hb-ph{min-height:30px;font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line2)}
.hb-ph .r,.hb-row .r,.hb-mv{text-align:right;justify-self:end}
.hb-row{min-height:44px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.hb-ph + .hb-row{border-top:0}
.hb-row:hover{background:var(--bg)}
.hb-co{display:flex;align-items:center;gap:8px;min-width:0}
.hb-co b{font-weight:600}
.hb-co i{font-style:normal;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-lo{display:inline-flex;width:22px;height:22px;flex:none;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.hb-lo img,.hb-lo svg{width:100%;height:100%;object-fit:contain}
/* a name with no stored mark: the tiles' monogram (`.lo.mono`), whose plate is only styled inside `.tl` */
.hb-lo.mono{background:var(--bg2);box-shadow:0 0 0 1px var(--line2)}
.hb-lo .mono-plate{fill:none;stroke:none}
.hb-lo .mono-text{fill:var(--ink2)}
.hb-ses{font-size:12px;color:var(--ink2)}
.hb-hatch{display:inline-block;width:56px;height:10px;border-radius:2px;vertical-align:middle;background:repeating-linear-gradient(135deg,var(--line2) 0 2px,transparent 2px 5px)}
.hb-rk{font-size:12.5px;font-weight:500}
.hb-rk em{font-size:11px;font-style:normal;color:var(--muted);margin-left:3px;font-variant-numeric:tabular-nums}
.hb-rk.rich{color:var(--acc)}
.hb-mv{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-mv b{font-weight:600;color:var(--ink)}
.hb-none{margin:0;padding:22px 14px;font-size:14px;color:var(--ink2);max-width:none}
.hb-pf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:10px 10px 10px 14px;border-top:1px solid var(--line2);background:var(--bg)}
.hb-pn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.hb-go{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--panel);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.hb-go:hover{background:color-mix(in srgb,var(--ink) 78%,var(--acc))}
/* next 14 days: columns on a wide window, rows on a phone, one baseline either way; the height is a
   5% step class because `style-src 'self'` drops an inline style. The bars are SOLID (3.401): the
   counts are free, and the diagonal hatch is this card's mark for a withheld value (`.hb-hatch`), so
   drawing them in it read as locked. Tomorrow, the day a reader acts on first, is the dark bar. */
.hb-bars{flex:1;display:flex;align-items:flex-end;gap:6px;padding:18px 14px 12px}
.hb-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0;color:var(--ink);text-decoration:none}
.hb-bar.wk{margin-left:10px}
.hb-bc{width:100%;height:calc(var(--h) * 190px);min-height:3px;border-radius:4px 4px 1px 1px;background:color-mix(in srgb,var(--ink) 22%,var(--panel))}
.hb-bar:first-child .hb-bc{background:var(--ink2)}
.hb-bar:hover .hb-bc{background:var(--ink)}
.hb-bn{font:500 11px var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums}
.hb-bd{font-size:11px;color:var(--muted);white-space:nowrap}
.hb-bar:first-child .hb-bd,.hb-bar:first-child .hb-bn{color:var(--ink);font-weight:600}
.hb-bar.h0{--h:0}.hb-bar.h1{--h:0.05}.hb-bar.h2{--h:0.1}.hb-bar.h3{--h:0.15}.hb-bar.h4{--h:0.2}.hb-bar.h5{--h:0.25}.hb-bar.h6{--h:0.3}.hb-bar.h7{--h:0.35}.hb-bar.h8{--h:0.4}.hb-bar.h9{--h:0.45}.hb-bar.h10{--h:0.5}.hb-bar.h11{--h:0.55}.hb-bar.h12{--h:0.6}.hb-bar.h13{--h:0.65}.hb-bar.h14{--h:0.7}.hb-bar.h15{--h:0.75}.hb-bar.h16{--h:0.8}.hb-bar.h17{--h:0.85}.hb-bar.h18{--h:0.9}.hb-bar.h19{--h:0.95}.hb-bar.h20{--h:1}
@media (max-width:620px){
  .hb-ctas{flex-direction:column;gap:16px}
  .hb-wide{display:none}
  .hb-tabs{gap:3px;padding:5px}
  .hb-tab{padding:8px 7px;column-gap:6px}
  .hb-tab b{font-size:12.5px}
  .hb-tab .hb-i,.hb-tab .hb-cal{display:none}
  .hb-tab.t-past,.hb-tab.t-next,.hb-tab.t-today{grid-template-columns:1fr}
  .hb-tab small{grid-column:1}
  /* every column stays on a phone: richness is the product's main reading (operator, round 3) */
  .hb-ph,.hb-row{grid-template-columns:minmax(0,1fr) 74px 46px 58px;gap:8px;padding:0 10px}
  .p-past .hb-ph,.p-past .hb-row{grid-template-columns:minmax(0,1fr) 72px 50px 46px}
  .hb-ph{letter-spacing:.03em}
  .hb-co i{display:none}
  .hb-ses{font-size:11.5px}
  .hb-hatch{width:40px}
  .hb-row .r:last-child .hb-hatch{width:52px}
  .hb-pf{flex-direction:column;align-items:stretch;padding:10px}
  .hb-go{justify-content:center}
  .hb-bars{flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:8px 12px}
  .hb-bar{display:grid;grid-template-columns:70px minmax(0,1fr) 34px;column-gap:10px;align-items:center;min-height:26px}
  .hb-bar.wk{margin:5px 0 0;padding-top:5px;border-top:1px solid var(--line)}
  .hb-bd{grid-area:1/1;font-size:12px;text-align:left}
  .hb-bc{grid-area:1/2;justify-self:start;width:calc(var(--h) * 100%);height:12px;min-width:3px;border-radius:1px 3px 3px 1px}
  .hb-bn{grid-area:1/3;text-align:right}
}
/* 3.407: on a phone "Due today" keeps its noun where it fits. Measured in device emulation: the tab
   leaves 73px of text at 320, 80 at 340 and 87 at 360, and "128 companies" needs 76.2, so the word
   shows from 340 for any count to 999. Below that the count stands alone, as it did. */
@media (min-width:340px) and (max-width:620px){.hb-tab.t-today .hb-wide{display:inline}}
@media (prefers-reduced-motion:reduce){.hb-tab,.hb-go{transition:none}}