.small { font-size: 0.92rem; }
.note { background: var(--note); border-radius: 12px; padding: 12px 16px; }
.test-banner { border-left: 5px solid var(--wine); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.plan-card h2 { margin-top: 0; }
.current { margin: 20px 0; border-width: 2px; border-color: var(--wine); }
.price { font-size: 1.6rem; font-weight: 700; margin: 6px 0; }
.price .muted { font-size: 1rem; font-weight: 400; }
.badge { font-size: 0.8rem; font-weight: 700; background: var(--note); color: var(--ink); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.next-charge { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.btn { font: inherit; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.btn:hover { border-color: var(--wine); }
.btn:focus-visible { outline: 3px solid var(--wine); outline-offset: 2px; }
.btn-primary { background: var(--wine); color: var(--on-wine); border-color: var(--wine); font-weight: 700; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.plan-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.actions .btn { width: auto; margin-top: 0; }
code { font-size: 0.95em; }