/* Home: the month’s number, chart, stats and cards. */
.hero{position:relative;margin-top:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line2) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:radial-gradient(ellipse 60% 100% at 0 0,#000,transparent 72%);mask-image:radial-gradient(ellipse 60% 100% at 0 0,#000,transparent 72%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.hero-in>div:first-child{padding:26px 30px 28px}
.hello{font-size:13px;color:var(--muted)}
.hello b{color:var(--text);font-weight:500}
.big{font-weight:600;font-size:clamp(56px,8.6cqw,92px);line-height:.95;letter-spacing:-.06em;margin-top:22px;font-variant-numeric:tabular-nums}
.cap{font-size:16px;line-height:1.35;font-weight:500;color:var(--ink2);margin-top:10px;max-width:24ch;letter-spacing:-.015em}
.up{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--goodsoft);color:var(--goodtext);font-weight:500;font-size:12.5px;padding:3px 8px;border-radius:6px}
.story{margin-top:20px;font-size:13.5px;line-height:1.6;max-width:50ch;color:var(--muted)}
.story b{color:var(--text);font-weight:500}
.story a{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.story a:hover{text-decoration-color:var(--text)}
.chart{position:relative;background:var(--surface);border-left:1px solid var(--line);padding:22px 24px 12px;display:flex;flex-direction:column;justify-content:center}
.chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.chart-h b{font-weight:500;font-size:13px}
.key{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{width:14px;height:2px;border-radius:1px;background:var(--brand);display:block}
.key .p{background:none;border-top:2px dotted var(--faint);height:0}
.chart svg{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart text{font-family:var(--mono);font-size:10.5px;fill:var(--faint)}
.chart .prev{fill:none;stroke:var(--faint);stroke-width:1.2;stroke-dasharray:2 4;stroke-linecap:round}
.chart .cur{fill:none;stroke:var(--brand);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chart .guide{stroke:var(--line2);stroke-width:1;opacity:0}
.chart .pt{fill:var(--surface);stroke:var(--brand);stroke-width:2}
.ctip{position:absolute;top:48px;background:var(--btn);color:var(--btntext);font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:6px;pointer-events:none;opacity:0;transform:translateX(-50%);white-space:nowrap}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.stat{display:flex;flex-direction:column-reverse;gap:6px;padding:14px 18px 15px;border:0;border-radius:0;background:none;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.stat b{font-weight:600;font-size:22px;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:12.5px}

/* Ready for your OK */

.ic{width:28px;height:28px;border-radius:7px;background:var(--raised);color:var(--ink2);display:grid;place-items:center;flex:none}
.ic svg{width:15px;height:15px}

.chg{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-family:var(--mono);font-size:11.5px;align-self:flex-start;background:var(--raised);border-radius:6px;padding:3px 8px}
.chg s{color:var(--faint)}
.chg span{color:var(--faint)}
.chg b{color:var(--text);font-weight:500}

.acts{display:flex;gap:6px;margin-top:14px}
.btn{font-weight:500;font-size:13px;line-height:18px;padding:6px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);box-shadow:0 1px 1px rgba(10,10,11,.04);transition:background .12s,border-color .12s,opacity .12s}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--btn);color:var(--btntext);border-color:var(--btn)}
.btn.pri:hover{background:var(--btn);opacity:.86}