/* Subscriptions (W2): the plan picker on /buy and change plan, the billing panel, banners and
   the cancel page. Tokens come from product.css. */
.spick{margin-top:22px}
.sbill{display:inline-flex;gap:4px;padding:4px;margin:0 0 18px;border-radius:999px;background:var(--sunk)}
.sbill label{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
.sbill .save{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:99px;background:var(--proof-wash);color:var(--proof-ink);font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.sb-m:checked~.sbill label[for$="-bm"],.sb-y:checked~.sbill label[for$="-by"]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
.sb-m:focus-visible~.sbill label[for$="-bm"],.sb-y:focus-visible~.sbill label[for$="-by"]{outline:2px solid var(--ink);outline-offset:2px}
.sb-m:checked~.pkgs .by,.sb-y:checked~.pkgs .bm{display:none!important}
.pkg.sp,.pkg.sc{cursor:default}
.pkg.sp.popular{box-shadow:0 0 0 2px var(--coral),0 18px 36px -24px rgba(232,67,42,.45)}
.spr{font:600 34px var(--display);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.spr small{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.spr.sm{font-size:19px}
.spr .was{font-size:20px;color:var(--ink-4);font-weight:500}
.pkg .rf{font-size:13px;color:var(--ink-3);margin-top:2px}
.pkg .pkg-cta{margin-top:auto}
.sent{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:14px;padding:14px 18px;border-radius:16px;background:var(--raised);box-shadow:0 0 0 1px var(--line);color:inherit;text-decoration:none;font-size:14.5px}
.sent span{color:var(--ink-2)}
/* banners */
.sban{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:4px 0 20px;padding:14px 16px 14px 18px;border-radius:16px;font-size:14.5px}
.sban b{font-weight:650}
.sban span{flex:1 1 260px;min-width:0}
.sban form{margin:0}
.sban.bad{background:var(--coral-wash);color:var(--coral-ink)}
.sban.warn{background:var(--amber-wash);color:var(--amber-ink)}
.sban.info,.sban.grey{background:var(--grey-wash);color:var(--ink-2)}
.sban.info b,.sban.grey b{color:var(--ink)}
/* billing panel */
.splan{margin-top:8px;padding:24px 26px;display:grid;gap:18px}
.splan .k,.scancel .k{display:block;font:500 11px var(--mono);letter-spacing:.1em;color:var(--ink-3);margin:0 0 4px}
.sp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sp-nm{display:block;font:600 28px var(--display)}
.sp-host{font-size:13.5px;color:var(--ink-2)}
.splan .pill{height:26px;font-size:12px}
.splan .pill.proof{background:var(--proof-wash);color:var(--proof-ink)}
.splan .pill.coral{background:var(--coral-wash);color:var(--coral-ink)}
.splan .pill.grey{background:var(--grey-wash);color:var(--ink-2)}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.sp-grid b{display:block;font-size:15.5px;font-variant-numeric:tabular-nums}
.sp-grid .sub{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.sweeks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sweeks i{height:6px;border-radius:99px;background:var(--line)}
.sweeks i.done{background:var(--proof-fill)}
.sweeks i.on{background:var(--ink)}
.sannual{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:var(--proof-wash);color:var(--proof-ink);font-size:14.5px}
.sannual>div{flex:1 1 280px;min-width:0}
.sannual b{display:block;color:var(--ink)}
.sannual form{margin:0}
.sp-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-cancel{margin-left:auto;font-size:14px;color:var(--ink-3)}
.sp-fine{font-size:13px;color:var(--ink-3);margin:0}
.sh2{font:600 20px var(--display);margin:30px 0 12px}
/* change plan */
.schange{margin-top:22px}
.pkg.sc.current{box-shadow:0 0 0 2px var(--ink)}
.tagr.cur{background:var(--ink);color:var(--on-ink)}
.scn{font-size:13.5px;color:var(--ink-2);margin:4px 0 6px;padding:10px 12px;border-radius:12px;background:var(--sunk)}
.pkg.sc form,.pkg.sc .btn{margin-top:auto}
/* cancel */
.scancel{margin-top:10px;padding:24px 26px;display:grid;gap:16px}
.sct{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px}
.sct li{display:flex;gap:10px;align-items:flex-start}
.sct li svg{flex:none;margin-top:3px;color:var(--proof)}
.btn.danger{--bg:var(--coral-ink);--fg:#fff}
/* checkout summary for a plan */
.side .sp-today{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px;border-top:1px solid var(--line-2);font-weight:600}
.side .sp-today b{font:600 24px var(--display);font-variant-numeric:tabular-nums}
.side .sp-other{display:block;margin-top:10px;font-size:13.5px;text-align:center;color:var(--coral-ink)}
@media (max-width:820px){.sp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .sbill{display:flex}.sbill label{flex:1;justify-content:center;padding:0 10px}
  .sbill .save{font-size:9.5px;padding:0 5px}
  .sp-grid{grid-template-columns:1fr}
  .sp-cancel{margin-left:0;flex-basis:100%}
  .splan,.scancel{padding:20px}
}
.sc-consent{margin:4px 0 12px;font-size:13.5px}
.sfirst{margin:14px 0 0;font-size:14.5px;color:var(--ink-2)}.sfirst b{color:var(--ink)}