.campaign-checkout { --checkout-copy: #47424f; }
.checkout-container { width: min(960px, calc(100% - 96px)); margin: auto; padding: 32px 0 64px; }
.checkout-back { font-size: 14px; }
.campaign-checkout .page-intro { padding: 30px 0 42px; }
.campaign-checkout .page-intro h1 { font-size: clamp(36px, 4.2vw, 54px); }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.checkout-plan, .checkout-summary { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.checkout-plan-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.checkout-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--lavender); color: var(--purple); }
.checkout-plan h2 { font-size: 30px; }
.checkout-allocation { font-size: 14px; margin-top: 10px; }
.checkout-features { list-style: none; padding: 0; margin: 28px 0; }
.checkout-features li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.checkout-features li + li { margin-top: 14px; }
.checkout-features .icon { color: var(--purple); width: 17px; height: 17px; }
.checkout-credit-note { border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 16px; }
.checkout-credit-note h3 { font-size: 16px; letter-spacing: -.02em; }
.checkout-credit-note p { font-size: 13px; line-height: 1.7; margin-top: 9px; }
.checkout-summary { border-color: #d5ccfc; box-shadow: 0 14px 40px #5545ed08; }
.checkout-summary h2 { font-size: 22px; }
.checkout-lines { margin: 25px 0; font-size: 13px; }
.checkout-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 15px; }
.checkout-lines dt { color: var(--muted); }
.checkout-lines dd { margin: 0; text-align: right; font-weight: 600; }
.checkout-total { border-top: 1px solid var(--line); padding-top: 23px; display: flex; align-items: baseline; gap: 7px; }
.checkout-total > span { font-size: 14px; margin-right: auto; }
.checkout-total strong { font-size: 44px; letter-spacing: -.055em; line-height: 1.2; }
.checkout-total small { color: var(--muted); font-size: 11px; }
.checkout-saving { margin-top: 15px; color: var(--green); font-size: 12px; line-height: 1.6; }
.checkout-renewal { margin: 16px 0 24px; font-size: 13px; line-height: 1.7; }
.checkout-payment-note { font-size: 11px; text-align: center; margin-top: 12px; line-height: 1.7; }
.campaign-checkout .checkout-summary .btn:disabled { background: #efedf6; border-color: #e3dff0; color: #857b98; box-shadow: none; transform: none; opacity: 1; }
.campaign-checkout .page-intro > p,
.checkout-allocation,
.checkout-credit-note p,
.checkout-renewal,
.checkout-payment-note,
.checkout-lines dt,
.checkout-total small { color: var(--checkout-copy); }
.checkout-noscript { text-align: center; font-size: 12px; line-height: 1.8; max-width: 600px; margin: 24px auto 0; }
body.campaign-checkout:has(#preview-dark-mode:checked) { --checkout-copy: #d1c9de; }
body.campaign-checkout:has(#preview-dark-mode:checked) .checkout-plan,
body.campaign-checkout:has(#preview-dark-mode:checked) .checkout-summary { background: #211e2b; border-color: var(--line); }
body.campaign-checkout:has(#preview-dark-mode:checked) .checkout-summary { border-color: #51446d; }
body.campaign-checkout:has(#preview-dark-mode:checked) .checkout-icon { background: #342948; }
body.campaign-checkout:has(#preview-dark-mode:checked) .checkout-summary .btn:disabled { background: #393247; border-color: #544761; color: #bfb7ce; }
@media (max-width: 760px) {
  .checkout-container { width: calc(100% - 40px); padding: 24px 0 40px; }
  .checkout-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .checkout-plan, .checkout-summary { padding: 24px; }
}
@media (max-width: 380px) {
  .checkout-plan, .checkout-summary { padding: 20px; }
  .checkout-total strong { font-size: 38px; }
}
