/* Sign-up v2 (SIGNUP_V2): the /signup page. DESIGN.md's dark app tokens (the
   sign-in's: ground #0B1417, card #132126, gold #D8B46A the one primary with
   ink on it, teal #6CC3D3 as text only), Instrument Sans only, one subtle top
   glow. A phone gets one full-height card; from 1024px the brand panel sits
   beside the form, so a desktop is a desktop layout, not a stretched phone. */
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bg: #0B1417; --bg2: #0F1B1F; --card: #132126; --card2: #19292F;
  --hair: rgba(241, 236, 226, .08); --hair2: rgba(241, 236, 226, .14); --hair3: rgba(241, 236, 226, .22);
  --fg: #F1ECE2; --muted: #A3B0B3; --faint: #8E9B9F;
  --gold: #D8B46A; --gold-hi: #E6C78A; --ink: #14201F;
  --teal: #1A7F95; --teal-text: #6CC3D3; --good: #6CC9A6; --bad: #F0A08A;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--fg); font: 400 17px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--teal-text); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .su-choice:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- the frame ---------- */
.su-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.su-side { position: relative; padding: max(20px, env(safe-area-inset-top)) 20px 0; display: flex; flex-direction: column; }
.su-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: 18px; }
.su-brand img { display: block; height: 26px; width: auto; }
.su-side-copy, .su-side-foot { display: none; }
.su-main { display: flex; flex-direction: column; align-items: center; padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
.su-legal { margin: 18px 0 0; color: var(--faint); font-size: 13px; text-align: center; max-width: 460px; }
.su-legal a { color: var(--muted); }

/* the one glow, from the top right of the page */
body::before { content: ""; position: fixed; inset: 0 0 auto auto; width: 70vw; height: 60vh; pointer-events: none; background: radial-gradient(ellipse at 80% 0%, rgba(26, 127, 149, .14), transparent 62%); z-index: 0; }
.su-shell > * { position: relative; z-index: 1; }

/* ---------- the card ---------- */
.su-card { width: 100%; max-width: 480px; background: var(--card); border: 1px solid var(--hair); border-radius: 28px; padding: 28px 22px 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px -24px rgba(0, 0, 0, .6); }
.su-steps { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.su-steps li { flex: 1; height: 4px; border-radius: 4px; background: var(--hair2); overflow: hidden; }
.su-steps li > span { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .52s var(--ease); }
.su-steps li.is-done > span, .su-steps li.is-on > span { transform: scaleX(1); }
.su-steps li.is-on > span { background: var(--gold-hi); }
.su-eyebrow { margin: 0 0 6px; color: var(--teal-text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.su-title { margin: 0 0 8px; font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -.022em; }
.su-lede { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.su-lede b { color: var(--fg); font-weight: 600; }
.su-step { animation: su-in .52s var(--ease) both; }
@keyframes su-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- fields ---------- */
.su-f { display: grid; gap: 8px; margin: 0 0 18px; }
[hidden] { display: none !important; }
.su-label { font-size: 15px; font-weight: 500; }
.su-label .opt { color: var(--faint); font-weight: 400; }
.su-input, .su-select { width: 100%; min-height: 52px; font: 400 16px/1.3 var(--font); color: var(--fg); background: var(--bg2); border: 1px solid var(--hair2); border-radius: 12px; padding: 14px 14px; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.su-input::placeholder { color: var(--faint); }
.su-input:hover, .su-select:hover { border-color: var(--hair3); }
.su-input:focus, .su-select:focus { border-color: var(--teal-text); outline: none; background: #0D191C; }
.su-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A3B0B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.su-select option { background: var(--card); color: var(--fg); }
.su-f.is-bad .su-input, .su-f.is-bad .su-select { border-color: var(--bad); }
.su-err { margin: 0; color: var(--bad); font-size: 14px; }
.su-hint { margin: 0; color: var(--muted); font-size: 13px; }

/* the six code boxes */
.su-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.su-code input { min-width: 0; height: 60px; text-align: center; font: 600 24px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--fg); background: var(--bg2); border: 1px solid var(--hair2); border-radius: 14px; caret-color: var(--gold); }
.su-code input:focus { border-color: var(--gold); outline: none; }
/* the code is right: the sign-in's orbit (signin.css .orbit), then Verified (.verified) */
.su-code { position: relative; }
.su-code.is-orbit { overflow: visible; }
.su-orbit { position: absolute; inset: 0; pointer-events: none; }
.su-orbit .chip { position: absolute; display: grid; place-items: center; font-size: 20px; font-weight: 600; border-radius: 14px; border: 1px solid var(--teal-text); background: var(--card2); color: var(--fg); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px rgba(108, 195, 211, .14); }
.su-orbit svg { position: absolute; left: 50%; top: 50%; overflow: visible; }
.su-orbit .ring { fill: none; stroke: rgba(108, 195, 211, .45); stroke-width: 1.5; }
.su-orbit .dot { fill: var(--teal-text); }
.su-verified { display: grid; justify-items: center; text-align: center; gap: 4px; }
.su-verified .su-title { color: var(--good); margin-top: 4px; }
.su-verified .su-lede { margin-bottom: 18px; }
.su-vstage { position: relative; width: 200px; height: 170px; display: grid; place-items: center; }
.su-vstage .sq { position: absolute; left: 50%; top: 50%; border-radius: 22px; border: 1.5px solid rgba(108, 201, 166, .55); translate: -50% -50%; opacity: 0; }
.su-vstage .core { position: relative; width: 62px; height: 62px; border-radius: 18px; background: rgba(108, 201, 166, .14); border: 1.5px solid var(--good); display: grid; place-items: center; box-shadow: 0 0 28px rgba(108, 201, 166, .35); }
.su-vstage .core svg { width: 28px; height: 28px; stroke: var(--good); stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; }
.su-vstage .p { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--good); opacity: 0; }
.su-help { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.su-help b { color: var(--fg); font-weight: 600; }
.su-sent { margin: 0 0 18px; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.su-sent b { color: var(--fg); font-weight: 600; }

/* what to use first: one choice, as cards */
.su-choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.su-choices legend { padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.su-choice { position: relative; display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 12px 14px; border: 1px solid var(--hair2); border-radius: 14px; background: var(--bg2); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .12s var(--ease); }
.su-choice input { position: absolute; opacity: 0; pointer-events: none; }
.su-choice .tick { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--hair3); display: grid; place-items: center; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.su-choice .tick::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink); transform: scale(0); transition: transform .2s var(--ease); }
.su-choice:has(input:checked) { border-color: var(--gold); background: rgba(216, 180, 106, .08); }
.su-choice input:checked + .tick { background: var(--gold); border-color: var(--gold); }
.su-choice input:checked + .tick::after { transform: scale(1); }
.su-choice:active { transform: scale(.98); }
.su-choice .t { font-size: 15px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .su-choice:hover { border-color: var(--hair3); } }

/* the separate opt-in box */
.su-check { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 22px; padding: 14px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(241, 236, 226, .02); cursor: pointer; font-size: 15px; color: var(--muted); }
.su-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.su-check span { padding-top: 1px; }

/* ---------- buttons ---------- */
.su-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 600 16px/1 var(--font); letter-spacing: -.005em; cursor: pointer; text-decoration: none; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .12s var(--ease), opacity .2s; }
.su-btn:active { transform: scale(.97); }
.su-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.su-primary { background: var(--gold); color: var(--ink); overflow: hidden; }
.su-primary .label { position: relative; z-index: 2; pointer-events: none; }
/* The smoke's own layer (public/assets/js/smoke.js), clipped to the pill.
   Without these rules the canvas sat in the button's flow: on a touch screen
   the smoke warms up once the pill is on screen, sizes its canvas to the
   button, the button grows with it, and so on, frame after frame: the giant
   gold shape on the iPad (staging test, 2 Nov 2026). Absolute, so the canvas
   can never change the button's size. */
.su-btn { isolation: isolate; }
.su-primary .smoke-clip { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; isolation: isolate; background-color: inherit; -webkit-clip-path: inset(0 round 999px); clip-path: inset(0 round 999px); pointer-events: none; }
.su-primary .smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.su-primary .smoke-glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); background: radial-gradient(140px 70px at var(--mx, 50%) var(--my, 50%), rgba(94, 227, 214, .5), transparent 70%); }
.su-primary.no-gl.is-lit .smoke-glow { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .su-primary:hover:not([disabled]) { background: var(--gold-hi); } .su-ghost:hover:not([disabled]) { border-color: var(--hair3); background: rgba(241, 236, 226, .04); } }
.su-ghost { background: transparent; color: var(--fg); border-color: var(--hair2); }
.su-quiet { background: none; border: 0; color: var(--muted); font: 500 15px/1.3 var(--font); min-height: 44px; padding: 0 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.su-quiet:hover { color: var(--fg); }
.su-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.su-alt { margin: 18px 0 0; color: var(--muted); font-size: 15px; text-align: center; }
.su-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font-size: 13px; }
.su-or::before, .su-or::after { content: ""; flex: 1; height: 1px; background: var(--hair2); }
.su-btn svg { width: 20px; height: 20px; flex: none; }
.su-msg { margin: 14px 0 0; font-size: 14px; color: var(--muted); min-height: 1px; }
.su-msg.is-bad { color: var(--bad); }
.su-msg.is-good { color: var(--good); }

/* ---------- the plan ---------- */
.su-plan { border-radius: 22px; border: 1px solid var(--hair2); background: var(--card2); padding: 22px; margin: 0 0 18px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); }
.su-plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.su-plan-name { font-size: 17px; font-weight: 600; }
.su-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gold); background: rgba(216, 180, 106, .12); }
.su-price { margin: 14px 0 4px; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.su-price small { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.su-plan ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.su-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.su-plan li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 999px; background: rgba(108, 201, 166, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236CC9A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center no-repeat; }

/* the done tick */
.su-done-mark { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: rgba(108, 201, 166, .12); margin: 0 0 18px; }
.su-done-mark svg { width: 30px; height: 30px; stroke: var(--good); }

/* ---------- tablet (820) ---------- */
@media (min-width: 640px) {
  .su-side { padding: max(28px, env(safe-area-inset-top)) 36px 0; }
  .su-main { padding: 28px 24px 40px; justify-content: center; flex: 1; }
  .su-card { padding: 36px 36px 32px; }
  .su-title { font-size: 32px; }
}

/* ---------- desktop (1024 and up): the brand panel beside the form ---------- */
@media (min-width: 1024px) {
  .su-shell { grid-template-columns: minmax(380px, 5fr) 7fr; }
  .su-side { min-height: 100vh; min-height: 100dvh; padding: 40px clamp(36px, 4vw, 64px); background: var(--bg2); border-right: 1px solid var(--hair); overflow: hidden; }
  .su-side::after { content: ""; position: absolute; inset: auto -20% -30% auto; width: 90%; height: 70%; background: radial-gradient(ellipse at 70% 70%, rgba(26, 127, 149, .14), transparent 62%); pointer-events: none; }
  .su-side-copy { display: block; margin: auto 0; max-width: 460px; position: relative; z-index: 1; }
  .su-side-title { margin: 0 0 28px; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.06; font-weight: 600; letter-spacing: -.03em; }
  /* What happens next: three numbered steps (staging test fixes, 2 Nov 2026), joined by a hairline */
  .su-next-h { margin: 0 0 18px; font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--fg); }
  .su-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; }
  .su-next::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 34px; width: 1px; background: var(--hair2); }
  .su-next li { position: relative; display: flex; gap: 16px; align-items: flex-start; color: var(--muted); font-size: 16px; line-height: 1.4; }
  .su-next b { display: block; margin: 4px 0 2px; color: var(--fg); font-size: 17px; font-weight: 600; }
  .su-next-n { flex: none; width: 31px; height: 31px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold); background: var(--bg2); border: 1px solid rgba(216, 180, 106, .45); box-shadow: 0 0 0 5px var(--bg2); }
  .su-side-foot { display: block; margin: 0; color: var(--faint); font-size: 14px; position: relative; z-index: 1; }
  .su-main { justify-content: center; padding: 48px clamp(24px, 5vw, 80px); }
  .su-card { max-width: 500px; padding: 40px 40px 36px; }
}
@media (min-width: 1400px) { .su-card { max-width: 520px; } .su-title { font-size: 34px; } }

/* phones: the card fills the screen width, the code boxes keep 44px+ */
@media (max-width: 399px) {
  .su-card { padding: 24px 18px 22px; border-radius: 24px; }
  .su-code { gap: 6px; }
  .su-code input { height: 54px; font-size: 22px; border-radius: 12px; }
  .su-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-step { animation: none; }
  .su-vstage .core svg { stroke-dashoffset: 0; }
  .su-steps li > span, .su-btn, .su-choice, .su-choice .tick::after { transition: none; }
}