/* /subscribe: the plan cards come from pricing.css; this is only what the page adds around them. */
.subscribe .head { margin-bottom: clamp(26px, 4vw, 44px); text-align: center; }
.subscribe .head p { max-width: 34rem; margin: .6rem auto 0; }
.sub-status { text-align: center; font-weight: 700; }
.sub-card { width: min(100%, 34rem); margin: 0 auto; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.sub-card h3 { margin: .2rem 0 .6rem; font-size: 1.8rem; letter-spacing: -0.04em; }
.sub-card p { margin: .4rem 0; line-height: 1.45; }
.sub-kicker { color: var(--muted); font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sub-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.2rem !important; }
.sub-actions:empty { display: none; }
.plan .per-month { margin: 0; color: var(--muted); font-weight: 600; }
.plan .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.sub-terms { width: min(100%, 44rem); margin: clamp(22px, 3vw, 34px) auto 0; color: var(--muted); font-size: .92rem; line-height: 1.5; text-align: center; }
.sub-terms p { margin: .45rem 0; }
.sub-terms a { color: inherit; font-weight: 700; }
.sub-test { width: min(100%, 44rem); margin: 1.2rem auto 0; padding: .7rem 1rem; border-radius: var(--r-m); background: var(--surface); font-size: .92rem; font-weight: 700; text-align: center; }
.sub-error { width: min(100%, 34rem); margin: 1.2rem auto 0; padding: .8rem 1rem; border-radius: var(--r-m); background: rgba(255,0,184,.12); color: var(--t-pink); box-shadow: inset 0 0 0 1.5px rgba(255,0,184,.5); font-weight: 700; text-align: center; }
@media (max-width: 720px) {
  .subscribe .plans { grid-template-columns: minmax(0, 1fr); }
}