/* Subscriptions pages: builds on site.css tokens (--ink, --body, --muted, --grey, --line, --yellow) */
main.sec{padding-top:calc(64px + var(--sec));min-height:70vh}
.sub{max-width:760px;margin:0 auto;padding-inline:var(--gut)}
.sbar{display:flex;justify-content:center;gap:8px;margin:0 0 36px;padding:0;list-style:none;font-size:13px;color:var(--muted);white-space:nowrap}
@media(max-width:479px){.sbar{gap:5px;font-size:12px}.sbar li{gap:4px}.sbar li+li::before{width:8px}}
.sbar li{display:flex;align-items:center;gap:6px}
.sbar li+li::before{content:"";width:18px;height:1px;background:var(--line);margin-right:2px}
.sbar .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:12px}
.sbar [aria-current] {color:var(--ink);font-weight:500}
.sbar [aria-current] .n{background:var(--ink);border-color:var(--ink);color:#fff}
.sbar .done .n{background:var(--yellow);border-color:var(--yellow);color:#000}
.panel{outline:0}
.panel h2{margin:0 0 8px;font-size:clamp(24px,3vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.panel .hint{margin:0 0 28px;color:var(--body);line-height:1.55}
.plans{display:grid;gap:16px}
@media(min-width:720px){.plans{grid-template-columns:1fr 1fr}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--grey);border:2px solid transparent;border-radius:var(--r-sm);padding:26px 24px 24px;cursor:pointer;transition:border-color .2s,background .2s}
.plan:hover{border-color:var(--line)}
.plan input{position:absolute;opacity:0;width:1px;height:1px}
.plan:has(input:focus-visible){outline:2px solid var(--yellow);outline-offset:3px}
.plan.on{border-color:var(--ink);background:#fff}
.plan .tag{font-size:13px;color:var(--muted);margin:0 0 6px}
.plan h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em}
.plan .what{margin:8px 0 0;color:var(--body);font-size:15px;line-height:1.5}
.plan ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:15px;line-height:1.45}
.plan li{position:relative;padding-left:24px}
.plan li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.plan .price{margin:16px 0 0;font-size:17px;font-weight:500}
.tick{position:absolute;top:22px;right:22px;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);display:grid;place-items:center;transition:background .2s,border-color .2s}
.plan.on .tick{background:var(--ink);border-color:var(--ink)}
.plan.on .tick::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.soon{display:inline-block;margin-top:16px;font-size:13px;color:var(--ink-2);background:rgba(245,197,24,.18);border-radius:6px;padding:4px 10px;align-self:flex-start}
.note{min-height:1.5em;margin:18px 0 0;font-size:15px;color:var(--ink-2)}
.err{min-height:1.5em;margin:12px 0 0;font-size:15px;color:#b42318}
.act{display:flex;flex-direction:column;gap:12px;margin-top:28px;align-items:stretch}
@media(min-width:560px){.act{flex-direction:row;align-items:center}}
.btn-k{background:var(--ink);color:#fff;font-weight:500}
.btn-k:hover{background:#000}
.btn[disabled]{opacity:.45;cursor:default}
.link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:15px}
.fld{display:grid;gap:8px;max-width:420px}
.fld label{font-size:15px;font-weight:500}
.fld input{height:52px;border:1px solid rgba(0,0,0,.2);border-radius:10px;padding:0 16px;font:inherit;font-size:17px;color:var(--ink);background:#fff}
.fld input:focus-visible{outline:2px solid var(--yellow);outline-offset:1px;border-color:var(--ink)}
.fld input[aria-invalid=true]{border-color:#b42318}
.fld .code{letter-spacing:.4em;font-variant-numeric:tabular-nums}
.fld small{color:var(--muted);font-size:13.5px}
.hubs{display:grid;gap:12px;margin:0;padding:0;border:0}
.hub{display:flex;align-items:center;gap:14px;background:var(--grey);border:2px solid transparent;border-radius:14px;padding:16px 18px;cursor:pointer}
.hub.on{border-color:var(--ink);background:#fff}
.hub input{accent-color:#1d1d1f;width:18px;height:18px;flex:none}
.hub b{display:block;font-weight:500}
.hub small{display:block;font-size:14px;color:var(--muted)}
.sum{background:var(--grey);border-radius:var(--r-sm);padding:22px 24px;display:grid;gap:12px}
.sum div{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.sum dt{color:var(--muted)}
.sum dd{margin:0;text-align:right;font-weight:500}
.done-card{text-align:center;max-width:560px;margin:0 auto}
.done-card .mark{width:56px;height:56px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin:0 auto 24px}
.done-card .mark::after{content:"";width:20px;height:11px;border-left:2.5px solid #000;border-bottom:2.5px solid #000;transform:translateY(-2px) rotate(-45deg)}
.done-card .mark.svg::after{content:none}
.done-card .mark.dash{background:var(--grey)}
.done-card .mark.dash::after{width:18px;height:0;border-left:0;border-bottom:2.5px solid var(--ink);transform:none}
.done-card h2{margin:0 0 12px}
.done-card p{color:var(--body);line-height:1.6}
.done-card .act{justify-content:center}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}