/* === Shared Page Hero Banner === */
.page-hero{position:relative;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink);padding:1.75rem 2rem;display:flex;align-items:stretch;gap:2rem;box-shadow:0 2px 14px rgba(32,40,38,.06);max-width:100%;box-sizing:border-box}
.page-hero-greeting{flex:0 0 38%;max-width:38%;display:flex;flex-direction:column;justify-content:center;padding-right:2rem;border-right:1px solid var(--line);gap:.5rem;min-width:0}
.page-hero-kicker{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.2rem}
.page-hero-title{font-size:1.6rem;font-weight:700;margin:0;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.page-hero-subtitle{font-size:.88rem;color:var(--muted);margin:0;line-height:1.4}
.page-hero-actions{margin-top:.75rem}
.page-hero-stats{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem}
.page-hero-stats .hero-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1rem;border-radius:14px;background:var(--paper);border:1px solid var(--line);transition:border-color .2s ease,transform .2s ease;animation:heroStatIn .5s ease-out var(--delay,0s) both;min-width:0;overflow:hidden}
.page-hero-stats .hero-stat:hover{border-color:var(--accent);transform:translateY(-2px)}
/* Tiles that filter the table below. Rendered as <button>, so reset UA styles. */
.page-hero-stats .hero-stat--filter{width:100%;font:inherit;color:inherit;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;position:relative}
.page-hero-stats .hero-stat--filter::after{content:"";position:absolute;left:50%;bottom:.45rem;width:0;height:2px;border-radius:2px;background:var(--accent);transform:translateX(-50%);transition:width .2s ease}
.page-hero-stats .hero-stat--filter:hover::after{width:26px}
.page-hero-stats .hero-stat--filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page-hero-stats .hero-stat--filter.is-active{border-color:var(--accent);background:rgba(239,120,96,.07);box-shadow:inset 0 0 0 1px var(--accent)}
.page-hero-stats .hero-stat--filter.is-active::after{width:26px}
.page-hero-stats .hero-stat-icon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:.15rem;flex-shrink:0}
.page-hero-stats .hero-stat-value{font-size:1.15rem;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;overflow:visible;max-width:100%}
.page-hero-stats .hero-stat-value--wrap{white-space:normal;overflow:visible;text-overflow:clip;font-size:1rem;line-height:1.25;word-break:break-word}
.page-hero-stats .hero-stat-label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wave-emoji{display:inline-block;font-size:1.4rem;animation:bounceIcon 2s ease-in-out infinite;transform-origin:center bottom}
@keyframes bounceIcon{0%,60%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(-6px) scale(1.1)}30%{transform:translateY(0) scale(1)}45%{transform:translateY(-3px) scale(1.05)}}
@keyframes heroStatIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:992px){.page-hero{flex-direction:column;gap:1.5rem}.page-hero-greeting{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:1.25rem;text-align:center;align-items:center;max-width:100%;flex:0 0 auto}.page-hero-title{justify-content:center}.page-hero-subtitle{max-width:420px}}
@media(max-width:480px){.page-hero{padding:1.25rem 1rem}.page-hero-stats{gap:.75rem}.page-hero-stats .hero-stat{padding:.75rem}.page-hero-stats .hero-stat-value{font-size:1.15rem}}
.page-hero-legend{font-size:.76rem;color:var(--muted);margin:-.5rem 0 1.25rem;padding:0 .25rem;line-height:1.5}
.page-hero-legend strong{color:var(--ink);font-weight:700}