/* OWN — site v2 · the sign-up page.
   The layout rules are the retired own-site/signup.html's, scoped under
   .signup-page so the site's base element rules (base.css) do not outrank
   them. Colours and fonts come from the tokens in pages.css. */
.signup-page{ margin:0; min-height:100vh; display:flex; flex-direction:column; }

/* ---------- single centered column ---------- */
/* main grows to fill the viewport (ivory) so the compliance band stays pinned
   to the bottom as a slim strip instead of a tall black block. */
.signup-page .auth{ flex:1 0 auto; }
.signup-page .auth-shell{ width:100%; max-width:780px; margin:0 auto; box-sizing:border-box;
  padding:clamp(96px,8vw,128px) clamp(22px,5vw,32px) clamp(48px,6vw,72px);
  display:flex; flex-direction:column; }

/* intro */
.signup-page .auth-head{ text-align:center; margin-bottom:clamp(30px,4vw,42px); }
.signup-page .auth-eyebrow{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.32em; text-transform:uppercase; color:var(--ocean); margin:0 0 16px; }
.signup-page .auth-head h1{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,5vw,50px); letter-spacing:-0.02em; line-height:1.02; color:var(--ink); margin:0 0 14px; }
.signup-page .auth-lede{ font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 auto; max-width:34ch; text-wrap:pretty; }

/* numbered section labels guide the eye down */
.signup-page .step-label{ display:flex; align-items:center; gap:11px; margin:0 0 18px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-soft); }
.signup-page .step-num{ width:23px; height:23px; flex:none; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; font-size:11px; letter-spacing:0; color:var(--ocean); }
.signup-page .step-rule{ flex:1; height:1px; background:var(--line); }

/* ---------- plan picker ---------- */
.signup-page .plan-pick{ display:flex; flex-direction:column; gap:11px; }
.signup-page .plan-swap-note{ font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--ink-soft); margin:0 0 11px; }

.signup-page .plan-opt{ border:1px solid var(--line); border-radius:18px; background:var(--paper-warm); overflow:hidden;
  transition:border-color .2s var(--ease-standard,ease), background .2s var(--ease-standard,ease), box-shadow .2s var(--ease-standard,ease); }
.signup-page .plan-opt:hover{ box-shadow:var(--shadow-card); }
.signup-page .plan-opt.is-chosen{ border-color:var(--sea); box-shadow:var(--shadow-hero);
  background:radial-gradient(150% 130% at 0% 0%, #17211C 0%, var(--obsidian) 60%); }
.signup-page .plan-head{ display:flex; align-items:center; gap:15px; padding:15px 18px; cursor:pointer; }
.signup-page .plan-opt:focus-visible{ outline:2px solid var(--sea); outline-offset:2px; }
.signup-page .plan-radio{ width:20px; height:20px; border-radius:50%; flex-shrink:0; position:relative;
  border:1.5px solid var(--line-strong); transition:border-color .2s; }
.signup-page .plan-opt.is-chosen .plan-radio{ border-color:var(--sea); }
.signup-page .plan-opt.is-chosen .plan-radio::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--sea); }
.signup-page .plan-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.signup-page .plan-name{ font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; transition:color .2s; }
.signup-page .plan-opt.is-chosen .plan-name{ color:var(--ivory); }
.signup-page .plan-tag{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }
.signup-page .plan-opt.is-chosen .plan-tag{ color:var(--paper-soft); }
.signup-page .plan-price{ margin-left:auto; text-align:right; font-family:var(--serif); font-size:21px; color:var(--ink); line-height:1; white-space:nowrap; transition:color .2s; }
.signup-page .plan-opt.is-chosen .plan-price{ color:var(--ivory); }
.signup-page .plan-price small{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); }
.signup-page .plan-price .yr{ display:block; margin-top:4px; font-family:var(--sans); font-size:11px; color:var(--ink-mute); }
.signup-page .plan-opt.is-chosen .plan-price small, .signup-page .plan-opt.is-chosen .plan-price .yr{ color:var(--paper-mute); }

/* max-height, not grid-template-rows 0fr↔1fr: Safari mis-sizes the animated fr
   track → empty gap + scrollbar. The drawer opens declaratively via .is-chosen
   (no toggle JS) and holds only a short bounded highlights list, so a capped
   max-height is safe and needs no script; ease-out hides the cap overshoot. */
.signup-page .plan-drawer{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out,ease); }
.signup-page .plan-opt.is-chosen .plan-drawer{ max-height:600px; }
.signup-page .plan-drawer-inner{ overflow:hidden; min-height:0; }
.signup-page .plan-hl{ list-style:none; margin:0; padding:2px 18px 17px 53px; display:flex; flex-direction:column; gap:8px; }
.signup-page .plan-hl li{ display:flex; gap:9px; align-items:flex-start; font-family:var(--sans); font-size:13px; line-height:1.4; color:var(--paper-soft); }
.signup-page .plan-hl svg{ color:var(--sea); flex-shrink:0; margin-top:2px; }


/* ---------- card flow stage ---------- */
.signup-page .flow{ position:relative; width:100%; overflow:hidden; transition:height .34s var(--ease-standard,ease); }
.signup-page .flow-card{ position:absolute; top:0; left:0; width:100%;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s var(--ease-standard,ease), transform .34s var(--ease-standard,ease); }
.signup-page .flow-card.is-active{ opacity:1; transform:none; pointer-events:auto; }
.signup-page .flow-card.is-prev{ transform:translateY(-14px); }

/* section spacing inside the sign-up card */
.signup-page .form-section{ margin-top:clamp(34px,4vw,46px); }

/* compact plan recap on later steps (keeps the chosen plan in view without a locked rail) */
.signup-page .plan-recap{ display:flex; align-items:center; gap:13px; padding:13px 16px; margin-bottom:22px;
  border:1px solid var(--line); border-radius:var(--r-card-sm); background:var(--bone); }
.signup-page .plan-recap-ic{ width:34px; height:34px; flex:none; border-radius:9px; background:rgba(14,58,62,0.08); border:1px solid rgba(14,58,62,0.16); display:grid; place-items:center; color:var(--ocean); }
.signup-page .plan-recap-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.signup-page .plan-recap-name{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.signup-page .plan-recap-sub{ font-family:var(--sans); font-size:12px; color:var(--ink-soft); }
.signup-page .plan-recap-price{ margin-left:auto; font-family:var(--serif); font-size:18px; color:var(--ink); white-space:nowrap; }
.signup-page .plan-recap-price small{ font-family:var(--sans); font-size:11px; color:var(--ink-mute); }
.signup-page .auth-back{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:13px; color:var(--ink-mute); margin-bottom:18px; padding:0; transition:color .18s; }
.signup-page .auth-back:hover{ color:var(--ink); }
.signup-page .flow-count{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:var(--ocean); margin:0 0 13px; }
.signup-page .flow-card h1.step-h{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.4vw,40px); letter-spacing:-0.02em; line-height:1.05; color:var(--ink); margin:0 0 12px; }
.signup-page .flow-sub{ font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 26px; }
.signup-page .flow-sub b{ color:var(--ink); font-weight:600; }

/* verify code + 2-step */
.signup-page .code-row{ display:flex; gap:10px; margin-bottom:16px; }
.signup-page .code-row input{ width:100%; height:60px; text-align:center; font-family:var(--serif); font-size:25px; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-input); background:#fff; box-sizing:border-box; transition:border-color .18s, box-shadow .18s; }
.signup-page .code-row input:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(14,58,62,0.12); }
.signup-page .resend{ background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ocean); padding:0; }
.signup-page .resend:hover{ text-decoration:underline; }
.signup-page .code-help{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin:0 0 24px; }
.signup-page .sec-divider{ display:flex; align-items:center; gap:14px; margin:2px 0 15px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); }
.signup-page .sec-divider::before, .signup-page .sec-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.signup-page .opt-list{ display:flex; flex-direction:column; gap:11px; }
.signup-page .opt{ display:flex; gap:14px; align-items:center; text-align:left; width:100%; cursor:pointer; box-sizing:border-box;
  padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-card-sm); background:#fff;
  transition:border-color .2s var(--ease-standard,ease), box-shadow .2s var(--ease-standard,ease); }
.signup-page .opt:hover{ box-shadow:var(--shadow-card); }
.signup-page .opt[aria-checked="true"]{ border-color:var(--ocean); box-shadow:0 0 0 1px var(--ocean); }
.signup-page .opt-ic{ width:36px; height:36px; flex:none; border-radius:10px; background:rgba(14,58,62,0.07); border:1px solid rgba(14,58,62,0.16); display:grid; place-items:center; color:var(--ocean); }
.signup-page .opt[aria-checked="true"] .opt-ic{ background:var(--ocean); border-color:var(--ocean); color:#fff; }
.signup-page .opt-body{ min-width:0; flex:1; }
.signup-page .opt-t{ font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; }
.signup-page .opt-tag{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--forest); }
.signup-page .opt-d{ font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--ink-soft); margin-top:2px; }
.signup-page .opt-radio{ width:20px; height:20px; flex:none; border-radius:50%; border:1.5px solid var(--line-strong); position:relative; transition:border-color .2s; }
.signup-page .opt[aria-checked="true"] .opt-radio{ border-color:var(--ocean); }
.signup-page .opt[aria-checked="true"] .opt-radio::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--ocean); }

/* payment card */
.signup-page .pay-summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; margin-bottom:20px;
  border:1px solid var(--line); border-radius:var(--r-card-sm); background:var(--bone); }
.signup-page .pay-summary-list{ display:block; padding:6px 18px 14px; }
.signup-page .pay-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 0; font-family:var(--sans); font-size:14px; color:var(--ink-soft); }
.signup-page .pay-row + .pay-row{ border-top:1px solid var(--line); }
.signup-page .pay-row span:last-child{ color:var(--ink); white-space:nowrap; }
.signup-page .pay-row small{ display:block; font-weight:400; font-size:11.5px; color:var(--ink-mute); margin-top:3px; max-width: none; white-space:normal; }
.signup-page .pay-row-head{ padding-top:12px; align-items:center; }
.signup-page .pay-row-total{ font-weight:600; color:var(--ink); font-size:15px; }
.signup-page .pay-row-total span:last-child{ font-family:var(--serif); font-size:20px; }
.signup-page .pay-sum-l{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); }
.signup-page .pay-sum-l small{ display:block; font-weight:400; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.signup-page .pay-sum-price{ font-family:var(--serif); font-size:24px; color:var(--ink); white-space:nowrap; line-height:1; }
.signup-page .pay-sum-price small{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); }
.signup-page .pay-row-promo span:last-child{ color:var(--forest); }
.signup-page .pay-sum-price .was{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); text-decoration:line-through; margin-right:7px; }
/* promo / membership code entry on the payment card */
.signup-page .pay-promo{ margin:18px 0 4px; }
.signup-page .pay-promo-row{ display:flex; gap:8px; align-items:stretch; }
.signup-page .pay-promo-row input{ flex:1; min-width:0; }
.signup-page .pay-promo-apply{ flex:none; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ivory); background:var(--obsidian); border:none; border-radius:var(--r-card-sm); padding:0 18px;
  transition:opacity .16s; }
.signup-page .pay-promo-apply:hover{ opacity:.85; }
.signup-page .pay-promo-apply:disabled{ opacity:.5; cursor:default; }
.signup-page .pay-promo-msg{ margin:8px 2px 0; font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--ink-soft); min-height:1px; }
.signup-page .pay-promo-msg.is-ok{ color:var(--forest); }
.signup-page .pay-promo-msg.is-err{ color:#c0392b; }
.signup-page .pay-code{ margin:-6px 0 18px; }
.signup-page .code-toggle{ background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:13px; color:var(--ink-mute); padding:2px 0; white-space:nowrap;
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; transition:color .16s; }
.signup-page .code-toggle:hover{ color:var(--ocean); }
.signup-page .code-field{ display:flex; gap:8px; align-items:center; }
.signup-page .code-field[hidden], .signup-page .code-done[hidden]{ display:none; }
.signup-page .code-field input{ flex:1; min-width:0; box-sizing:border-box; font-family:var(--sans); font-size:14px;
  padding:11px 14px; border:1px solid var(--line-strong); border-radius:var(--r-input); background:#fff; color:var(--ink); transition:border-color .18s, box-shadow .18s; }
.signup-page .code-field input:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(14,58,62,0.12); }
.signup-page .code-apply{ flex:none; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink);
  background:none; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:10px 18px; transition:border-color .16s, background .16s; }
.signup-page .code-apply:hover{ border-color:var(--ink); background:rgba(10,10,10,0.03); }
.signup-page .code-done{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12.5px; color:var(--forest); }
.signup-page .code-done svg{ flex:none; }
.signup-page .code-close{ flex:none; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border:0; background:none;
  color:var(--ink-mute); font-size:20px; line-height:1; border-radius:50%; transition:color .16s, background .16s; }
.signup-page .code-close:hover{ color:var(--ink); background:rgba(10,10,10,0.05); }
.signup-page .stripe-badge{ display:flex; align-items:flex-start; gap:7px; margin-top:18px; font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-mute); }
.signup-page .stripe-badge svg{ color:var(--forest); flex:none; margin-top:1px; }
.signup-page .stripe-badge b{ color:var(--ink-soft); font-weight:600; }

/* primary advance button */
.signup-page .flow-cta{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-pill); background:var(--obsidian); color:var(--ivory);
  font-family:var(--sans); font-size:15.5px; font-weight:600; padding:14px 24px; margin-top:24px;
  transition:background .18s var(--ease-standard,ease); }
.signup-page .flow-cta:hover{ background:#000; }
.signup-page .flow-cta .arr{ transition:transform .22s var(--ease-standard,ease); }
.signup-page .flow-cta:hover .arr{ transform:translateX(4px); }

/* form fields */
.signup-page .field{ margin-bottom:15px; }
.signup-page .field label{ display:block; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:7px; }
.signup-page .label-opt{ font-weight:400; color:var(--ink-mute); }
.signup-page .field input, .signup-page .field select{ width:100%; box-sizing:border-box; font-family:var(--sans); font-size:15px; padding:13px 15px;
  border:1px solid var(--line-strong); border-radius:var(--r-input); background:#fff; color:var(--ink); transition:border-color .18s, box-shadow .18s; }
.signup-page .field input:focus, .signup-page .field select:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(14,58,62,0.12); }
.signup-page .two{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.signup-page .cta-stack{ display:flex; flex-direction:column; gap:11px; margin:22px 0 16px; }
.signup-page .cta{ width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 18px; cursor:pointer;
  border-radius:var(--r-pill); border:1px solid transparent; font-family:var(--sans);
  transition:background .18s var(--ease-standard,ease), border-color .18s var(--ease-standard,ease); }
.signup-page .cta-main{ font-size:15.5px; font-weight:600; line-height:1.25; }
.signup-page .cta-sub{ font-size:12px; font-weight:400; line-height:1.2; opacity:0.72; }
.signup-page .cta-commit{ background:var(--obsidian); color:var(--ivory); }
.signup-page .cta-commit:hover{ background:#000; }
.signup-page .cta-trial{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
.signup-page .cta-trial:hover{ border-color:var(--ink); }

.signup-page .fineprint{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); line-height:1.55; margin:0; text-align:center; }
.signup-page .fineprint a{ color:var(--ocean); }

.signup-page .auth-alt{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:26px; font-family:var(--sans); font-size:14px; color:var(--ink-soft); }
.signup-page .login-btn{ display:inline-flex; align-items:center; border:1px solid var(--ink); border-radius:var(--r-pill);
  padding:9px 22px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; background:none; cursor:pointer;
  transition:background .18s var(--ease-standard,ease), color .18s var(--ease-standard,ease); }
.signup-page .login-btn:hover{ background:var(--ink); color:var(--ivory); }

/* persistent trust strip below the stage */
.signup-page .auth-trust{ margin-top:clamp(34px,4vw,46px); padding-top:24px; border-top:1px solid var(--line); }
.signup-page .sec-note{ display:flex; align-items:center; gap:9px; justify-content:center; margin:0 0 16px; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }
.signup-page .sec-note svg{ flex-shrink:0; color:var(--forest); opacity:0.85; }
.signup-page .trust-row{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin:0; padding:0; }
.signup-page .trust-row li{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }
.signup-page .trust-row svg{ color:var(--forest); flex-shrink:0; }

/* ---------- legal note above the standard site footer ---------- */
.signup-page .auth-legal{ flex-shrink:0; background:var(--ivory); padding:20px clamp(24px,5vw,64px) 28px; }
.signup-page .auth-legal p{ max-width:none; margin:0; font-family:var(--sans); font-size:12px; line-height:1.62; color:var(--ink-mute); text-align:left; text-wrap:pretty; }
.signup-page .auth-legal b{ color:var(--ink-soft); font-weight:600; }

/* single verification-code input (length-agnostic — matches whatever code the email carries) */
.signup-page .code-single{ width:100%; box-sizing:border-box; text-align:center; font-family:var(--serif);
  font-size:30px; letter-spacing:14px; text-indent:14px; color:var(--ink); padding:16px 12px; margin-bottom:14px;
  border:1px solid var(--line-strong); border-radius:var(--r-input); background:#fff; transition:border-color .18s, box-shadow .18s; }
.signup-page .code-single:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(14,58,62,0.12); }
.signup-page .code-single::placeholder{ letter-spacing:10px; color:var(--line-strong); }

/* segmented verification-code input — one box per digit. Sized for 8 boxes
   (the email OTP length) so the code the member is emailed always fits. */
.signup-page .code-boxes{ display:flex; gap:8px; margin-bottom:14px; }
.signup-page .code-box{ flex:1 1 0; min-width:0; box-sizing:border-box; text-align:center; font-family:var(--serif);
  font-size:24px; color:var(--ink); padding:14px 0; caret-color:var(--ocean);
  border:1px solid var(--line-strong); border-radius:var(--r-input); background:#fff; transition:border-color .18s, box-shadow .18s; }
.signup-page .code-box:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(14,58,62,0.12); }
@media (max-width:480px){ .signup-page .code-boxes{ gap:5px; } .signup-page .code-box{ font-size:18px; padding:11px 0; } }

.signup-page .verify-msg{ font-family:var(--sans); font-size:13.5px; margin:2px 0 18px; min-height:18px; }
.signup-page .verify-msg.err{ color:#c0392b; }
.signup-page .verify-msg.ok{ color:var(--forest); }

.signup-page .verified-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; margin-bottom:22px;
  border:1px solid rgba(20,90,70,0.3); border-radius:var(--r-pill); background:rgba(20,90,70,0.06);
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--forest); }
.signup-page .verified-chip svg{ flex:none; }

.signup-page .optional-tag{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mute); }

/* per-method work area (authenticator QR / passkey status) */
.signup-page .twofa-work{ margin:14px 0 4px; padding:16px; border:1px solid var(--line); border-radius:var(--r-card-sm); background:var(--bone); }
.signup-page .twofa-work[hidden]{ display:none; }
.signup-page .twofa-qr{ display:block; width:168px; height:168px; margin:2px auto 12px; border-radius:10px; background:#fff; padding:8px; box-sizing:border-box; border:1px solid var(--line); }
.signup-page .twofa-secret{ font-family:'Courier New',monospace; font-size:13px; letter-spacing:2px; color:var(--ink-soft); text-align:center; word-break:break-all; margin:0 0 12px; }
.signup-page .twofa-hint{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 12px; text-align:center; }
.signup-page .twofa-code{ display:flex; gap:8px; }
.signup-page .twofa-code input{ flex:1; min-width:0; box-sizing:border-box; text-align:center; font-family:var(--serif); font-size:20px; letter-spacing:6px;
  padding:11px; border:1px solid var(--line-strong); border-radius:var(--r-input); background:#fff; color:var(--ink); }
.signup-page .twofa-code input:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(14,58,62,0.12); }
.signup-page .twofa-verify{ flex:none; cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ivory);
  background:var(--obsidian); border:0; border-radius:var(--r-pill); padding:0 20px; }
.signup-page .twofa-verify:hover{ background:#000; }
.signup-page .opt.is-enrolled{ border-color:var(--forest); box-shadow:0 0 0 1px var(--forest); }
.signup-page .opt.is-enrolled .opt-radio::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--forest); }
.signup-page .opt.is-enrolled .opt-radio{ border-color:var(--forest); }
.signup-page .opt.is-selected{ border-color:var(--ocean); box-shadow:0 0 0 1px var(--ocean); }
/* per-method work area contents (authenticator QR / passkey) */
.signup-page .tfw-body{ display:block; }
.signup-page .tfw-hint{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 12px; text-align:center; }
.signup-page .tfw-qr{ display:block; width:168px; height:168px; margin:2px auto 12px; border-radius:10px; background:#fff; padding:8px; box-sizing:border-box; border:1px solid var(--line); }
.signup-page .tfw-secret{ display:block; font-family:'Courier New',monospace; font-size:13px; letter-spacing:2px; color:var(--ink-soft); text-align:center; word-break:break-all; margin:0 auto 12px; }
.signup-page .tfw-code{ margin:0 0 12px; }
.signup-page .tfw-ok{ display:flex; align-items:center; gap:9px; margin:0; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--forest); }
.signup-page .tfw-ok svg{ flex:none; color:var(--forest); }

.signup-page .skip-link{ display:block; width:100%; text-align:center; margin-top:14px; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; color:var(--ink-mute); text-decoration:underline; text-underline-offset:3px; }
.signup-page .skip-link:hover{ color:var(--ink); }

/* "choose how to start" options on the pay step */
.signup-page .start-stack{ display:flex; flex-direction:column; gap:11px; margin:4px 0 6px; }
.signup-page .start-opt{ width:100%; text-align:left; cursor:pointer; box-sizing:border-box; padding:16px 18px;
  border:1px solid var(--line-strong); border-radius:var(--r-card-sm); background:#fff;
  transition:border-color .18s, box-shadow .18s, background .18s; }
.signup-page .start-opt:hover{ box-shadow:var(--shadow-card); border-color:var(--ink); }
.signup-page .start-opt-t{ font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.signup-page .start-opt-t .arr{ transition:transform .2s var(--ease-standard,ease); }
.signup-page .start-opt:hover .arr{ transform:translateX(4px); }
.signup-page .start-opt-d{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
.signup-page .start-opt.is-primary{ background:var(--obsidian); border-color:var(--obsidian); }
.signup-page .start-opt.is-primary .start-opt-t{ color:var(--ivory); }
.signup-page .start-opt.is-primary .start-opt-d{ color:var(--paper-soft); }
.signup-page .start-pill{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--forest); }

@media (max-width:860px){
  .signup-page .flow{ height:auto !important; }
  .signup-page .flow-card{ position:relative; transform:none; }
  .signup-page .flow-card:not(.is-active){ display:none; }
  .signup-page .auth-shell{ padding-top:clamp(40px,12vw,64px); }
}
/* phones zoom the page into any field set below 16px */
@media (max-width:600px){
  .signup-page .field input, .signup-page .field select, .signup-page .code-field input{ font-size:16px; }
}

/* ---------- site v2 additions ---------- */
/* the sticky site header sits in the flow, so the column needs less top room */
.signup-page .auth-shell { padding-top: clamp(28px, 4vw, 48px); max-width: 640px; }
.signup-page .auth-head h1 { font-size: clamp(38px, 5vw, 54px); letter-spacing: -.03em; }
.signup-page .su-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.signup-page .su-consent[hidden] { display: none; }
.signup-page .su-consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--ocean); }
.signup-page .su-consent a { color: var(--ocean); text-decoration: underline; text-underline-offset: 2px; }
.signup-page .field input.is-code { text-transform: uppercase; letter-spacing: .06em; }
.signup-page .beta-link { display: block; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.signup-page .beta-link:hover { color: var(--ocean); }
.signup-page .start-pill { color: var(--sea); }
.signup-page .stripe-badge { margin: 18px 0 0; }
.signup-page .code-help { margin-top: 16px; }
.signup-page .flow-cta { border-radius: var(--button-radius); }
.signup-page .cta-commit:hover, .signup-page .flow-cta:hover { background: var(--ocean-deep); }
.signup-page .wl-done { text-align: center; padding: 8px 0; }
.signup-page .wl-done-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--gain-soft); color: var(--gain-ink); }
.signup-page .wl-done-mark svg { width: 28px; height: 28px; }
.signup-page .wl-done .step-h { margin: 4px 0 8px; }
.signup-page .wl-done .flow-cta { display: inline-flex; width: auto; margin-top: 10px; }
.signup-page .auth-legal { background: transparent; padding: 0 0 40px; }
.signup-page .auth-legal p { width: min(640px, calc(100% - var(--gutter))); margin: 0 auto; text-align: center; }

/* ---------- waitlist card (2026-10-23) ---------- */
/* js/signup.js adds .wl-mode to <body> in waitlist mode only (never on
   ?beta=1), so the real sign-up flow keeps the layout above. The form, then
   the confirmation (.wl-joined), sit in one white card. */
.signup-page.wl-mode .auth { background: radial-gradient(60% 50% at 50% 30%, #e6f1ee 0%, transparent 70%); }
.signup-page.wl-mode .auth-shell { width: calc(100% - 32px); max-width: 500px; margin: clamp(28px, 6vw, 64px) auto clamp(48px, 6vw, 80px);
  padding: 44px 44px 0; background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 30px 60px -36px #1d3a3655, 0 2px 6px -2px #1d3a3612; }
.signup-page.wl-mode .auth-head { text-align: left; margin-bottom: 28px; }
.signup-page.wl-mode .auth-head[hidden] { display: none; }
.signup-page.wl-mode .auth-head h1 { font-size: 40px; letter-spacing: -.025em; line-height: 1.04; margin: 0 0 12px; }
.signup-page.wl-mode .auth-lede { max-width: none; font-size: 15.5px; color: var(--muted); }
/* one card on screen at a time, so the stage needs no measured height */
.signup-page.wl-mode .flow { height: auto !important; overflow: visible; }
.signup-page.wl-mode .flow-card { position: relative; }
.signup-page.wl-mode .form-section { margin-top: 0; }
.signup-page.wl-mode .field { margin-bottom: 14px; }
.signup-page.wl-mode .field label { color: var(--ink-2); }
.signup-page.wl-mode .su-consent { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }
.signup-page.wl-mode .su-consent input { width: 18px; height: 18px; margin-top: 1px; }
.signup-page.wl-mode .cta-stack { margin: 22px 0 0; }
.signup-page.wl-mode .cta { padding: 15px 18px; border-radius: var(--button-radius); }
.signup-page.wl-mode .cta-sub[hidden] { display: none; }
.signup-page .wl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px -44px 0; padding: 18px 44px;
  border-top: 1px solid var(--line); border-radius: 0 0 24px 24px; background: #fafbf9; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.signup-page .wl-foot .beta-link { display: inline; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.signup-page .wl-foot .beta-link .arr { color: var(--teal); }
.signup-page .wl-foot .beta-link:hover { color: var(--ocean); }
.signup-page .wl-foot .auth-alt { margin: 0; gap: 6px; font-size: 13.5px; color: var(--muted); }
.signup-page .wl-foot .login-btn { border: 0; border-radius: 0; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.signup-page .wl-foot .login-btn:hover { background: none; color: var(--ocean); }
/* joined: the heading is gone and the card holds only the confirmation */
.signup-page.wl-joined .auth-shell { padding-bottom: 40px; }
.signup-page.wl-mode .wl-done { padding: 6px 0 0; }
.signup-page.wl-mode .wl-done-mark { width: 60px; height: 60px; margin: 0 auto 22px; }
.signup-page.wl-mode .wl-done h1.step-h { font-size: 40px; letter-spacing: -.025em; margin: 0 0 12px; }
.signup-page.wl-mode .wl-done h1.step-h:focus { outline: none; }
.signup-page.wl-mode .wl-done .flow-sub { max-width: 34ch; margin: 0 auto; font-size: 15.5px; color: var(--muted); }
.signup-page.wl-mode .wl-done .flow-cta { display: flex; width: 100%; margin-top: 30px; padding: 15px 20px; }
@media (max-width: 560px) {
  .signup-page.wl-mode .auth-shell { padding: 30px 22px 0; border-radius: 20px; }
  .signup-page.wl-joined .auth-shell { padding-bottom: 30px; }
  .signup-page.wl-mode .auth-head h1, .signup-page.wl-mode .wl-done h1.step-h { font-size: 34px; }
  .signup-page.wl-mode .two { grid-template-columns: 1fr; gap: 0; }
  .signup-page .wl-foot { flex-direction: column; gap: 10px; margin: 24px -22px 0; padding: 16px 22px; border-radius: 0 0 20px 20px; }
}