/* Plan configurator (/pricing/) and beta sign-up (/signup/). Uses the site.css tokens. */
.cfg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.cfg-main{display:grid;gap:24px;min-width:0}
.cfg-block{border:0;padding:0;margin:0;min-width:0}
.cfg-h{display:block;padding:0;margin:0 0 10px;font-size:1.0625rem;font-weight:650;letter-spacing:-.015em}
.cfg [hidden],.cfg-pair[hidden]{display:none!important}
.cfg-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cfg-preset{display:grid;gap:4px;text-align:left;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r2);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
.cfg-preset strong{font-weight:650}
.cfg-preset span{font-size:var(--fs-small);color:var(--ink-2);line-height:1.4}
.cfg-preset:hover{border-color:var(--ink)}
.cfg-preset[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cfg-preset[aria-pressed="true"] span{color:var(--paper);opacity:.85}
.cfg-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cfg-size,.cfg-mode{position:relative;display:block;cursor:pointer}
.cfg-size input,.cfg-mode input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cfg-size-card,.cfg-mode > span{display:grid;gap:3px;height:100%;padding:14px;border:1.5px solid var(--line-strong);border-radius:var(--r2);background:var(--card);font-size:var(--fs-small);color:var(--ink-2);line-height:1.35}
.cfg-size-card strong,.cfg-mode strong{color:var(--ink);font-size:1.125rem;font-weight:650}
.cfg-size-tier{color:var(--vps-deep);font-weight:600}
.cfg-size.is-on .cfg-size-card,.cfg-mode.is-on > span{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cfg-size input:focus-visible + .cfg-size-card,.cfg-mode input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.cfg-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.cfg-count{display:inline-flex;align-items:center;gap:8px}
.cfg-step{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);font:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.cfg-step:hover{background:var(--hover);border-color:var(--ink)}
.cfg input[type=number],.su-form input[type=text],.su-form input[type=email],.su-form select,.su-form textarea{min-height:48px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;max-width:100%}
.cfg input[type=number]{width:7.5rem;text-align:center}
.cfg-pair{display:grid;gap:8px;margin-bottom:18px}
.cfg-pair > label{font-weight:600}
.cfg-pair-inputs{display:flex;align-items:center;gap:14px}
.cfg-pair-inputs input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:32px}
.cfg-sum{position:sticky;top:calc(var(--header-h) + 12px);display:grid;gap:12px;padding:24px;border:1px solid var(--line-strong);border-radius:var(--r3);background:var(--card);box-shadow:var(--shadow)}
.cfg-tag{font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--vps-deep)}
.cfg-total{font-size:clamp(2.4rem,1.6rem + 2.4vw,3.4rem);line-height:1.05;letter-spacing:-.045em;font-weight:650;font-variant-numeric:tabular-nums}
.cfg-total small{font-size:1rem;letter-spacing:0;font-weight:450;color:var(--ink-2)}
.cfg-lines{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px;font-size:var(--fs-small)}
.cfg-lines > div{display:flex;justify-content:space-between;gap:12px}
.cfg-lines dt{color:var(--ink-2)}
.cfg-lines dd{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg-tier{padding:12px 14px;border-radius:var(--r1);background:var(--vps);color:var(--ink)}
.cfg-tier p{margin-top:4px;font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
.cfg-sum .button{white-space:normal;text-align:center}
.cfg-note{color:var(--ink-2)}

/* sign-up */
.su-wrap{width:min(1100px,100% - 2*var(--gutter));margin-inline:auto;padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,96px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.su-wrap h1{font-size:clamp(2rem,1.2rem + 3vw,3.1rem);line-height:1.05;letter-spacing:-.04em;font-weight:640;text-wrap:balance}
.su-wrap .lead{margin-top:14px;max-width:46ch}
.su-form{display:grid;gap:18px;margin-top:28px}
.su-field{display:grid;gap:6px}
.su-field > label,.su-field > .su-label{font-weight:600}
.su-field .opt{font-weight:450;color:var(--ink-2)}
.su-field textarea{min-height:140px;resize:vertical;line-height:1.5}
.su-hint{font-size:var(--fs-small);color:var(--ink-2)}
.su-err{font-size:var(--fs-small);color:#B3261E;font-weight:600}
@media (prefers-color-scheme:dark){.su-err{color:#FF8A80}}
.su-form [aria-invalid="true"]{border-color:#B3261E}
.su-check{display:flex;gap:12px;align-items:flex-start}
.su-check input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--accent)}
.su-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.su-plan{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--r2);background:var(--card)}
.su-plan strong{font-weight:650}
.su-plan p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.5}
.su-privacy{padding:18px 20px;border-radius:var(--r2);background:var(--paper-2);color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.su-privacy h2{font-size:1rem;color:var(--ink);margin-bottom:6px}
.su-status{padding:16px 18px;border-radius:var(--r2);font-weight:600}
.su-status.ok{background:var(--save-bg);color:var(--save)}
.su-status.bad{background:#FBE9E7;color:#8C1D18}
@media (prefers-color-scheme:dark){.su-status.bad{background:#3A1F1D;color:#FFB4AB}}
.su-form .button{justify-self:start}
.su-form .button[disabled]{opacity:.6;cursor:wait}

@media (max-width:63.99em){
  .cfg{grid-template-columns:minmax(0,1fr)}
  .cfg-sum{position:static}
  .su-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:47.99em){
  .cfg-sizes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:35em){
  .cfg-presets,.cfg-modes{grid-template-columns:minmax(0,1fr)}
  .cfg-sum{padding:18px}
  .su-form .button{justify-self:stretch}
}

.nav-cta{min-height:44px;padding:8px 18px;font-size:.9375rem}
@media (max-width:63.99em){.nav-cta{display:none}}
.su-mt{margin-top:16px}

.su-field,.su-form,.su-wrap > div,.su-wrap aside{min-width:0}
.su-form input[type=text],.su-form input[type=email],.su-form select,.su-form textarea{width:100%;min-width:0}