@font-face{font-family:"Archivo";src:url(/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --bg:#ffffff;--fg:#0b0b0d;--dim:#5c5c62;--rule:rgba(8,8,10,.14);--faint:rgba(8,8,10,.05);--card:#ffffff;
  --ink:#08080a;--on-ink:#f2f1ee;--on-ink-dim:#b4b4ba;
  --yolk:#ffc61e;--yolk-2:#e8a400;--on-yolk:#0b0b0c;
  --good:#15803d;--bad:#dc2626;--bad-bg:rgba(220,38,38,.08);
  --good-ink:#4ade80;--bad-ink:#f87171;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:16px;--gap:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111114;--fg:#f2f1ee;--dim:#a9a9b0;--rule:rgba(255,255,255,.13);--faint:rgba(255,255,255,.06);--card:#17171b;
  --ink:#030304;--good:#4ade80;--bad:#f87171;--bad-bg:rgba(248,113,113,.10);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111114;--fg:#f2f1ee;--dim:#a9a9b0;--rule:rgba(255,255,255,.13);--faint:rgba(255,255,255,.06);--card:#17171b;
  --ink:#030304;--good:#4ade80;--bad:#f87171;--bad-bg:rgba(248,113,113,.10);color-scheme:dark}
@media (min-width:768px){:root{--gut:28px;--gap:16px}}
@media (min-width:1400px){:root{--gut:40px}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yolk);outline-offset:3px}
.dim{color:var(--dim)}
.good{color:var(--good)}
.bad{color:var(--bad)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.mark{font-weight:800;font-size:22px;letter-spacing:-.02em;white-space:nowrap}
.mark i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--yolk);margin-left:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:2px;background:var(--yolk);color:var(--on-yolk);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--yolk-2)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:var(--faint)}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px var(--gut);background:var(--ink);color:var(--on-ink);border-bottom:1px solid rgba(255,255,255,.1)}
.top .who{flex:1;min-width:0;font-size:15px;color:var(--on-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top form{margin:0}
.preview{padding:10px var(--gut);background:var(--yolk);color:var(--on-yolk);font-weight:700;font-size:15px}

main{padding:0 0 var(--gut)}
.hero{background:var(--ink);color:var(--on-ink);padding:22px var(--gut) 24px}
.eyebrow{font:400 14px/1.3 var(--mono);color:var(--on-ink-dim);margin-bottom:6px;overflow-wrap:anywhere}
.hero h1{font-size:clamp(34px,8.5vw,72px);line-height:.98;letter-spacing:-.035em;font-weight:800;font-stretch:90%;margin-bottom:16px;overflow-wrap:anywhere}
.lines{display:grid;gap:8px;margin-bottom:18px}
.lines li{font-size:clamp(20px,4.6vw,30px);line-height:1.15;font-weight:650;letter-spacing:-.015em}
.lines .l-good{color:var(--good-ink)}
.lines .l-bad{color:var(--bad-ink)}
.lines .l-yolk{color:var(--yolk)}
.lines .l-dim{color:var(--on-ink-dim)}
.lines small{display:block;font-size:15px;font-weight:400;color:var(--on-ink-dim);letter-spacing:0;margin-top:2px}
.hero-act{display:flex;flex-wrap:wrap;gap:10px}
.hero-act .btn.ghost{color:var(--on-ink)}

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.kpi{background:var(--bg);padding:16px var(--gut) 18px;min-width:0}
.kpi b{display:block;font-size:clamp(34px,9vw,56px);line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:6px;font-size:15px;color:var(--dim);line-height:1.25}
.kpi .chg{display:inline-block;margin-top:6px;font:400 13px/1.3 var(--mono)}
@media (min-width:900px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{background:var(--card);border-bottom:1px solid var(--rule);padding:18px var(--gut) 20px;min-width:0}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card h2{font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:750}
.card .dim{font-size:14px}
.sub{font-size:16px;font-weight:700;margin:18px 0 8px}
.grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid>.card+.card{border-left:1px solid var(--rule)}
}

.chart{width:100%}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .bar{fill:var(--fg)}
.chart .bar.wkend{fill:var(--dim)}
.chart .bar.top{fill:var(--yolk-2)}
.chart .bar:hover{fill:var(--yolk)}
.chart .axis{fill:var(--dim);font:400 11px var(--mono)}
.chart .grid-l{stroke:var(--rule);stroke-width:1}
.chart-say{margin-top:8px;font-size:15px;color:var(--dim);min-height:22px}

.bars{display:grid;gap:9px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.bars .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.bars .val{font:400 14px/1.2 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.bars .track{grid-column:1/-1;height:6px;background:var(--faint);border-radius:1px;overflow:hidden}
.bars .fill{height:100%;background:var(--fg)}
.bars li:first-child .fill{background:var(--yolk-2)}

.split{display:flex;height:14px;border-radius:1px;overflow:hidden;background:var(--faint)}
.split span{height:100%}
.split span:nth-child(1){background:var(--fg)}
.split span:nth-child(2){background:var(--yolk-2)}
.split span:nth-child(3){background:var(--dim)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:16px}
.legend b{font-variant-numeric:tabular-nums}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:1px;vertical-align:baseline}

.changes{display:grid;gap:0}
.changes li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--rule);font-size:16px}
.changes li:first-child{border-top:0;padding-top:0}
.changes time{font:400 13px/1.6 var(--mono);color:var(--dim)}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.facts div{min-width:0}
.facts dt{font-size:14px;color:var(--dim);line-height:1.25}
.facts dd{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}

.plan{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;font-size:17px}
.bill{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:12px;border:1px solid var(--rule);border-radius:2px}
.bill.late{border-color:var(--bad);background:var(--bad-bg)}
.bill p{font-size:16px}
.note-line{margin-top:8px;font-size:15px;color:var(--dim)}

.empty{font-size:16px;color:var(--dim);padding:6px 0}
.foot{padding:18px var(--gut);font-size:15px;color:var(--dim)}
.foot a{color:var(--fg);font-weight:600}
.nojs{padding:24px var(--gut)}

body.gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;background:var(--ink);color:var(--on-ink)}
.gate-box{width:100%;max-width:520px;padding:32px var(--gut) 12vh}
.gate-box>form>button,.gate-form button{width:100%}
.gate h1{font-size:clamp(34px,9vw,48px);line-height:1.02;letter-spacing:-.03em;margin:28px 0 12px}
.gate p{color:var(--on-ink-dim);margin-bottom:16px;font-size:18px}
.gate .note{color:var(--yolk);font-weight:600}
.gate .note a{color:var(--yolk)}
.gate .link{color:var(--on-ink)}
.gate-form{display:grid;gap:10px;margin-top:8px}
.gate-form label{font-weight:700}
.gate-form input{min-height:54px;padding:0 14px;border:1.5px solid rgba(255,255,255,.35);border-radius:2px;background:transparent;color:var(--on-ink);font-size:18px}
.gate-form input:focus{border-color:var(--yolk);outline:none}
.gate button{min-height:54px;padding:0 22px;border:0;border-radius:2px;background:var(--yolk);color:var(--on-yolk);font-weight:700;font-size:18px;cursor:pointer}
.gate button:hover{background:var(--yolk-2)}