/* Signup site: the marketing site's tokens, kept in a file because the CSP allows no inline styles. */
:root{--paper:#f6f5f1;--white:#fff;--ink:#101722;--muted:#68727c;--line:#dddedb;--red:#e5232e;--red-dark:#b81924;--green:#268568;--night:#111b28;--font:"DM Sans",Arial,sans-serif;--display:"Instrument Sans",Arial,sans-serif;--mono:"IBM Plex Mono",monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit}
.container{width:min(100% - 32px,720px);margin:auto}
.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:8px;font:700 23px/1 var(--display);letter-spacing:-.075em;text-decoration:none}
.brand img{width:26px;height:26px;mix-blend-mode:multiply}
.topbar small{font:500 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
main{padding:48px 0 80px}
.eyebrow{font:600 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
h1{font:600 clamp(34px,6vw,52px)/1.05 var(--display);letter-spacing:-.06em;margin:14px 0 12px}
h2{font:600 24px var(--display);letter-spacing:-.03em;margin:0 0 6px}
.lead{font-size:16px;line-height:1.6;color:#535e68;margin:0 0 32px}
.progress{display:flex;gap:6px;margin:0 0 28px;padding:0;list-style:none;flex-wrap:wrap}
.progress li{flex:1;min-width:100px;border-top:3px solid var(--line);padding-top:8px;font:500 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.progress li.done{border-color:var(--ink);color:var(--ink)}
.progress li.current{border-color:var(--red);color:var(--red)}
.card{background:var(--white);border:1px solid var(--line);padding:28px}
.step[hidden]{display:none}
.field{display:block;margin:0 0 18px}
.field>span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=password],.field select{width:100%;padding:12px 13px;border:1px solid #c9cbc6;background:var(--white);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:0}
h2[tabindex="-1"]:focus{outline:none}
.hint{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}
.hint.ok{color:var(--green)}.hint.bad{color:var(--red-dark)}.hint.warn{color:#8a5a00}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choices{display:grid;gap:10px;margin:0 0 18px;border:0;padding:0}
.choices legend{font-size:13px;font-weight:600;margin-bottom:8px;padding:0}
.choice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);background:var(--white);cursor:pointer}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.choice input{margin-top:3px;accent-color:var(--ink)}
.choice strong{display:block}.choice small{display:block;color:#535e68;line-height:1.5;margin-top:3px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin:0 0 12px}
.check input{margin-top:4px;accent-color:var(--ink)}
.slug-preview{font:500 13px var(--mono);color:var(--muted)}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.button{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:13px 20px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.button[hidden]{display:none}
.button:hover{background:var(--red);border-color:var(--red)}
.button[disabled]{opacity:.5;cursor:not-allowed;background:var(--ink);border-color:var(--ink)}
.button.secondary{background:transparent;color:var(--ink)}
.button.secondary:hover{background:var(--paper)}
.error{background:#fdecec;border:1px solid #f3b9bc;color:var(--red-dark);padding:12px 14px;font-size:14px;margin:0 0 18px}
.error[hidden]{display:none}
.review{margin:0 0 20px;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14px}
.review dt{color:var(--muted)}.review dd{margin:0;overflow-wrap:anywhere}
.notice{font-size:15px;line-height:1.6}
#turnstile{margin:8px 0 4px;min-height:65px}
@media(max-width:560px){.row{grid-template-columns:1fr}.card{padding:20px}.actions{flex-direction:column-reverse}.actions .button{width:100%;text-align:center}}
