.plans-main { max-width: 68rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 3rem; }
.plans-main h1 { margin: 0 0 0.5rem; }
.plans-main .lead { margin-bottom: 1.5rem; }
.plan-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-block-end: 1.25rem; }
.plan-switch button { appearance: none; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; padding: 0.4rem 1.1rem; border-radius: 999px; cursor: pointer; }
.plan-switch button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.plan-switch .save { margin-inline-start: 0.35rem; font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--q720); color: #0d111f; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.plan-card { --c: var(--q480); display: grid; grid-template-rows: auto auto auto auto 1fr; align-content: start; gap: 0.9rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); position: relative; }
.plan-card[data-plan="free"] { --c: var(--q360); }
.plan-card[data-plan="pro"] { --c: var(--q720); border-color: var(--c); box-shadow: 0 14px 34px color-mix(in srgb, var(--c) 22%, transparent); }
.plan-card.is-current::after { content: attr(data-current); position: absolute; inset-block-start: 0.8rem; inset-inline-end: 0.8rem; font-size: 0.74rem; font-weight: 800; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--ink); color: var(--surface); }
.plan-head { display: flex; align-items: center; gap: 0.75rem; }
.plan-head h2 { margin: 0; font-size: 1.15rem; }
.plan-price { font-size: 2rem; font-weight: 800; line-height: 1; }
.plan-price small { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.plan-price-sub { margin: -0.4rem 0 0; color: var(--muted); font-size: 0.88rem; min-block-size: 1.3em; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.plan-list li { display: grid; gap: 0.1rem; padding-block-end: 0.6rem; border-block-end: 1px dashed var(--line); }
.plan-list li:last-child { border: 0; padding: 0; }
.plan-list .k { color: var(--muted); font-size: 0.82rem; }
.plan-list .v { font-weight: 700; }
.plan-cta { align-self: end; }
.plan-cta .btn { inline-size: 100%; justify-content: center; }
.plan-cta .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.plans-note { margin-block-start: 1.25rem; color: var(--muted); max-inline-size: 46rem; }
.plans-soon { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--muted); text-align: center; }
@media (max-width: 55rem) { .plan-grid { grid-template-columns: 1fr; } }