.plan-tabs { display: inline-flex; gap: 5px; padding: 5px; margin-top: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); max-width: 100%; }
.plan-tabs button { border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 12px 22px; min-height: 46px; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.plan-tabs button[aria-selected="true"] { background: var(--green); color: white; }
.plan-tabs button:not([aria-selected="true"]):hover { background: #e4ebdf; color: var(--ink); }
.plan-tabs[hidden], .plan-panel[hidden] { display: none; }
.plan-tabs + .pricing-grid { margin-top: 24px; }
.full-plan { background: #edf4ee; border-color: #9dbda6; }
.full-extras { padding-top: 34px; }
@media (max-width: 600px) {
  .plan-tabs { display: flex; width: 100%; }
  .plan-tabs button { padding-inline: 14px; flex: 1; font-size: .82rem; }
  .full-extras { padding-top: 6px; }
}
.plan-panels { position: relative; margin-top: 24px; display: flow-root; }
.plan-panels > .plan-panel { margin-top: 0; }
.plan-panels > .plan-outgoing { position: absolute; inset: 0 0 auto; width: 100%; pointer-events: none; }
.plan-transitioning { overflow: hidden; }
.plan-tabs button { transition: background-color 180ms ease, color 180ms ease; }
@media (prefers-reduced-motion: reduce) { .plan-tabs button { transition: none; } }