/* Subscription selection: one shared billing period, three aligned plan cards. */
.subscription-step{max-width:1120px;margin:auto;color:#262626}
.subscription-trial{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;margin:0 0 24px;background:#fff;border:1px solid #dedee4;border-radius:16px}
.subscription-trial h2{font-size:20px;line-height:1.4;margin:0 0 6px;font-weight:500}
.subscription-trial p{font-size:14px;margin:0 0 6px}
.subscription-trial small{font-size:12px;line-height:1.5;color:#71717a}
.subscription-trial .button{white-space:nowrap}
.subscription-trial .button.primary{background:#27272a;border-color:#27272a;color:#fff}
.subscription-trial .button.primary:hover{background:#3f3f46;border-color:#3f3f46}
@media(max-width:680px){.subscription-trial{align-items:stretch;flex-direction:column;gap:16px;padding:20px}.subscription-trial .button{width:100%}}
.subscription-intro{text-align:center;max-width:680px;margin:20px auto 24px}
.subscription-intro h1{font-size:clamp(28px,3vw,38px);letter-spacing:-1.1px;margin-bottom:12px}
.subscription-intro p{color:#737373;font-size:14px;line-height:1.7}
.subscription-period{display:flex;width:fit-content;margin:0 auto 28px;padding:4px;background:#eaeaea;border:1px solid #e4e4e4;border-radius:10px;gap:4px}
.subscription-period label{position:relative;padding:0;cursor:pointer}
.subscription-period input,.subscription-plan>input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.subscription-period label>span{display:block;min-width:112px;padding:8px 18px;text-align:center;font-size:13px;border-radius:7px;color:#686868;transition:background .2s,color .2s}
.subscription-period input:checked+span{background:#fff;color:#252525;box-shadow:0 1px 3px #0000000a}
.subscription-period input:focus-visible+span,.subscription-plan:has(>input:focus-visible){outline:2px solid #505050;outline-offset:3px}
.subscription-period .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.subscription-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.subscription-plan{position:relative;display:grid;grid-template-rows:auto minmax(64px,auto) minmax(120px,auto) auto auto 1fr;align-content:start;gap:14px;border:1px solid #dedede;background:#fff;border-radius:16px;padding:24px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.subscription-plan:hover{border-color:#a3a3a3}
.subscription-plan:has(>input:checked){border-color:#292929;box-shadow:0 0 0 1px #292929}
.subscription-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.subscription-plan-head strong{font-size:22px;font-weight:500;letter-spacing:-.5px}
.plan-selection{width:18px;height:18px;border:1px solid #ccc;border-radius:50%;flex-shrink:0}
.subscription-plan:has(>input:checked) .plan-selection{border:5px solid #292929;background:#fff}
.subscription-audience{font-size:13px;line-height:1.65;color:#737373}
.subscription-price{display:flex;align-items:center;min-width:0}
.subscription-price .price{font-size:clamp(22px,2.35vw,29px);color:#252525;font-weight:500;line-height:1.25;letter-spacing:-.7px}
.subscription-price .price small{font-size:12px;font-weight:400;letter-spacing:0;margin-top:7px}
.subscription-price .quote-price{width:100%}
.subscription-price .quote-price del{font-size:12px;color:#828282}
.subscription-price small{font-size:11px;color:#777}
.subscription-price .saving-badge{background:#f0f0f0;color:#454545;font-size:11px;margin-left:6px;padding:2px 6px}
.subscription-select{display:block;border:1px solid #dcdcdc;border-radius:8px;padding:10px 12px;text-align:center;font-size:13px;min-height:43px}
.plan-selected{display:none}
.subscription-plan:has(>input:checked) .subscription-select{background:#292929;color:#fff;border-color:#292929}
.subscription-plan:has(>input:checked) .plan-selected{display:inline}
.subscription-plan:has(>input:checked) .plan-unselected{display:none}
.subscription-includes{border-top:1px solid #ececec;padding-top:20px;font-size:12px;font-weight:500;margin-top:4px}
.subscription-features{display:grid;gap:10px;align-content:start;font-size:12px;line-height:1.5;color:#555}
.subscription-features>span{display:flex;gap:9px}
.subscription-features>span:before{content:'✓';color:#5f6e64;flex-shrink:0}
.subscription-features>.feature-note{color:#858585}
.subscription-features>.feature-note:before{content:'—';color:#aaa}
.subscription-brief{padding:22px 26px;background:#fff;border:1px solid #e4e4e4;border-radius:12px;margin:20px 0 0}
.subscription-brief[hidden]{display:none}
.subscription-next{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px;padding-top:22px;border-top:1px solid #e4e4e4}
.subscription-next p{font-size:13px;margin:0;line-height:1.7}.subscription-next p span{color:#777}
.subscription-next .button.primary{background:#292929;border-color:#292929;border-radius:9px;min-width:260px;justify-content:space-between}
.subscription-next .button.primary:hover{background:#444}
.account-email-note{font-size:12px!important;line-height:1.7;color:#737373!important}
.page-intro:has(.account-email-note){display:block;text-align:center}.page-intro .account-email-note{margin:8px auto}
body.journey:has(.subscription-step){background:#f8f8f8;color:#262626}
body.journey:has(.subscription-step) .journey-progress li[aria-current]{color:#292929;border-color:#292929}
@media(max-width:900px){.subscription-plan{padding:20px;grid-template-rows:auto minmax(96px,auto) minmax(125px,auto) auto auto 1fr;gap:12px}.subscription-plans{gap:10px}}
@media(max-width:680px){.subscription-plans{grid-template-columns:1fr;gap:16px}.subscription-plan{grid-template-rows:auto auto auto auto auto 1fr;padding:24px;gap:16px}.subscription-price{min-height:70px}.subscription-next{align-items:stretch;flex-direction:column;gap:16px}.subscription-next .button.primary{min-width:0}.subscription-intro{margin-top:12px}.subscription-price .price{font-size:28px}}
@media(prefers-reduced-motion:reduce){.subscription-plan,.subscription-period label>span{transition:none}}

body.journey:has(.subscription-step) .journey-main{padding-top:24px}
body.journey:has(.subscription-step) .journey-progress{margin-bottom:24px}
