/* Capstone-style banner: dark green rounded card, two "next" cards, chips. Banner only. */
header.hero{background:#27453a;color:#fff;margin:16px 0 0;padding:22px 24px 6px;border:0;border-radius:18px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.hero .in{max-width:none}
.hero .topline{margin-bottom:10px}
.hero small.k{color:#c9e8d8;letter-spacing:.16em}
.hero h1{color:#fff;font-size:2.1rem}
.hero p.l{color:rgba(255,255,255,.88);max-width:52ch}
.hero .row1{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch;gap:18px 28px}
.hero .nexts{grid-template-columns:1fr 1fr;gap:12px;align-content:stretch}
.hero .next,.hero a.next.meet{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:14px;padding:14px 16px;min-width:0}
.hero .next .t{color:#c9e8d8}
.hero .next .n{font-size:1.25rem;overflow-wrap:anywhere}
.hero .next .w{color:rgba(255,255,255,.88)}
.hero .next.late{border-color:#ffb3a3}
.hero a.next.meet:hover{border-color:#c9e8d8}
.hero .stats{margin:16px 0 14px}
.hero .stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff}
.hero .stat b{color:#c9e8d8}
.hero .themebtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.hero .sub,.hero #saveState{color:rgba(255,255,255,.88)}
@media (max-width:900px){.hero .row1{grid-template-columns:1fr}}
@media (max-width:560px){header.hero{padding:18px 16px 4px;border-radius:14px}.hero h1{font-size:1.7rem}.hero .nexts{grid-template-columns:1fr}.hero .stat{white-space:normal}}
.hero #userChip{color:#fff}.hero #userChip .av{background:rgba(255,255,255,.2);color:#fff}