.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.hero { text-align: center; padding: 40px 16px; }
.hero h1 { font-size: 22px; }
.notice { border-color: var(--ok); }
.notice.bad { border-color: var(--danger); }
#app { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
#app .wide { grid-column: 1 / -1; }
.plan-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.plan-head .badge { font-size: 14px; padding: 2px 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; }
.seg button[aria-pressed=true] { background: var(--accent); color: #fff; }
.current { font-size: 11px; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.foot { max-width: 1200px; margin: 0 auto; padding: 8px 16px 24px; font-size: 12px; }
.foot a { color: inherit; }
.big { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar.wide-bar { max-width: none; height: 8px; }