/* signup.html — build-your-own picker (js/fx-start.js). Tokens from deep.css only. */

.st-toggle{ display:inline-flex; gap:4px; padding:4px; margin-top:26px; border:1.5px solid var(--border); border-radius:10px; background:#fff; }
.st-toggle button{ font:600 14px/1 var(--font-body); padding:10px 16px; border:0; border-radius:7px; background:transparent; color:var(--text); cursor:pointer; }
.st-toggle button[aria-pressed="true"]{ background:var(--primary); color:#fff; }
.st-toggle button span{ font-weight:400; font-size:12px; opacity:.8; margin-left:4px; }
.st-toggle button:disabled{ opacity:.45; cursor:not-allowed; }

.st-tools{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }
@media (max-width:760px){ .st-tools{ grid-template-columns:1fr; } }
.st-loading{ grid-column:1/-1; }

.st-tool{ border:1.5px solid var(--border); border-radius:14px; background:#fff; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.st-tool.is-on{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14); }
.st-tool-hit{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:14px; align-items:start; padding:20px 20px 20px 18px; cursor:pointer; }
.st-tool.is-soon .st-tool-hit{ cursor:default; }
.st-tool.is-soon{ background:rgba(var(--primary-rgb),.03); border-style:dashed; }
.st-tool-hit input{ position:absolute; opacity:0; width:1px; height:1px; }
.st-check{ width:22px; height:22px; border:1.5px solid var(--border); border-radius:6px; margin-top:2px; position:relative; background:#fff; }
.st-tool.is-on .st-check{ background:var(--primary); border-color:var(--primary); }
.st-tool.is-on .st-check::after{ content:""; position:absolute; left:7px; top:3px; width:5px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.st-tool.is-soon .st-check{ border-style:dashed; opacity:.5; }
.st-tool-hit:has(input:focus-visible){ outline:2px solid var(--primary); outline-offset:3px; border-radius:14px; }
.st-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.st-name{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--text); }
.st-blurb{ font-size:14px; line-height:1.45; color:var(--text-muted); }
.st-soon{ font-size:13px; font-weight:600; color:var(--text-muted); margin-top:4px; }
.st-soon a{ color:var(--primary); text-decoration:underline; }
.st-price{ font-family:var(--font-display); font-weight:800; font-size:20px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text); }
.st-price small{ font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--text-muted); margin-left:2px; }
.st-tool.is-soon .st-name, .st-tool.is-soon .st-price{ color:var(--text-muted); }

.st-total{ position:sticky; bottom:12px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:26px; padding:18px 20px; border-radius:14px; background:var(--dark); color:#fff; box-shadow:0 10px 30px rgba(6,21,32,.22); }
.st-total[hidden]{ display:none; }
.st-total-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.st-sum{ font-family:var(--font-display); font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.st-sum small{ font-family:var(--font-body); font-size:14px; font-weight:400; opacity:.75; margin-left:3px; }
.st-sub{ font-size:14px; opacity:.85; }
.st-go.is-off{ opacity:.45; pointer-events:auto; cursor:not-allowed; }
@media (max-width:560px){ .st-go{ width:100%; justify-content:center; text-align:center; } .st-sum{ font-size:24px; } }

.st-plan-note{ margin-top:22px; padding:14px 18px; border-left:3px solid var(--primary); border-radius:0 12px 12px 0; background:rgba(var(--primary-rgb),.06); font-size:15px; line-height:1.55; color:var(--text); max-width:70ch; }
.st-plan-note a{ color:var(--primary); text-decoration:underline; }
.st-agency-note{ margin-top:22px; padding:18px 20px; border:1.5px solid rgba(var(--primary-rgb),.35); border-radius:14px; background:#fff; max-width:70ch; }
.st-agency-note p{ margin:0; font-size:15px; line-height:1.55; }
.st-agency-note[hidden], .st-plan-note[hidden]{ display:none; }

.st-dfy-card{ cursor:default; padding-right:22px; display:flex; flex-direction:column; }
.st-dfy-card .fp-plan-price{ margin-bottom:18px; }
.st-dfy-btn{ margin-top:auto; justify-content:center; text-align:center; }
.st-dfy-card.is-focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18); }
@media (min-width:900px){ .st-total{ bottom:42px; } }