:root { color-scheme: light; --navy:#1e3a5f; --blue:#2b6cb0; --text:#2d3748; --muted:#52667e; --border:#d8e1ec; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f5f7fb; color:var(--text); line-height:1.5; }
a { color:#21578e; text-underline-offset:3px; }
a:hover { color:#163c65; }
a:focus-visible, button:focus-visible { outline:3px solid #2b6cb0; outline-offset:4px; }
.skip-link { position:absolute; top:-80px; left:16px; padding:12px 18px; background:white; z-index:2; border-radius:8px; }
.skip-link:focus { top:16px; }
.onboarding { display:grid; grid-template-columns:minmax(320px, .85fr) minmax(540px, 1.15fr); min-height:100vh; }
.brand-panel { background:radial-gradient(ellipse at top left, #2b527f, transparent 65%), #142b47; color:white; padding:42px clamp(28px,4vw,72px); display:flex; flex-direction:column; align-items:flex-start; position:sticky; top:0; height:100vh; min-height:740px; }
.brand { font-size:30px; font-weight:750; letter-spacing:-1.3px; line-height:1; }
.brand span { color:#91bdf0; }
.brand-content { margin:auto 0; padding:44px 0; max-width:430px; width:100%; }
.brand-tag { font-size:10px; letter-spacing:1.5px; font-weight:700; color:#b9d4f3; }
.brand-content h2 { font-size:clamp(32px,3vw,46px); line-height:1.15; letter-spacing:-1.6px; margin:18px 0; }
.brand-content > p { color:#d3e0ef; font-size:16px; line-height:1.8; margin:0; }
.service-preview { margin:30px 0; padding:20px; border:1px solid #4c6480; background:#ffffff08; border-radius:16px; box-shadow:0 20px 40px #081b3026; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:#dbe7f5; margin-bottom:22px; }
.preview-label { letter-spacing:1.5px; font-size:9px; color:#a7c7ec; }
.preview-step { display:flex; align-items:center; gap:12px; position:relative; }
.preview-step + .preview-step { margin-top:22px; }
.preview-step:not(:last-child)::after { content:""; position:absolute; top:33px; left:14px; height:26px; border-left:1px solid #607690; }
.preview-step strong { font-size:13px; font-weight:600; display:block; }
.preview-step small { font-size:11px; color:#c3d2e4; display:block; margin-top:2px; }
.step-dot { width:30px; height:30px; border-radius:50%; border:1px solid #8298b1; display:grid; place-items:center; color:#d4e5fa; flex-shrink:0; font-size:12px; }
.step-dot.done { color:#c9f4dc; background:#2d675f; border-color:#4c8b7f; }
.step-dot.current { background:#dceafb; color:#1e3a5f; border-color:#dceafb; }
.preview-pulse { margin-left:auto; width:7px; height:7px; background:#91bdf0; border-radius:50%; flex-shrink:0; }
.benefits { list-style:none; padding:0; margin:0; color:#dbe6f2; font-size:13px; }
.benefits li + li { margin-top:12px; }
.benefits li::before { content:"✓"; margin-right:10px; color:#a9c9ee; }
.brand-footer { font-size:11px; color:#b8c9dd; margin:0; }
.signup-panel { padding:36px clamp(24px,5vw,84px) 24px; background:#fff; }
.signup-content { max-width:620px; margin:auto; }
.signup-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.signup-top a { text-decoration:none; font-weight:600; }
.pilot-badge { padding:6px 10px; border-radius:20px; background:#eaf4ee; color:#246145; font-weight:600; white-space:nowrap; }
.signup-header { margin:34px 0 20px; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:1.6px; color:var(--blue); margin:0 0 10px; }
h1 { font-size:clamp(26px,2.4vw,34px); color:var(--navy); line-height:1.2; letter-spacing:-1px; margin:0 0 12px; }
.signup-header > p:last-child { margin:0; color:var(--muted); font-size:14px; max-width:420px; }
.invitation-note { display:flex; gap:12px; background:#f0f5fc; border:1px solid #dce7f4; border-radius:10px; padding:14px 16px; margin-bottom:24px; }
.invitation-note p { font-size:12px; color:var(--muted); margin:0; line-height:1.7; }
.invitation-note strong { font-weight:650; color:var(--navy); }
.note-icon { display:grid; place-items:center; background:#dbe9fa; color:var(--blue); border-radius:50%; width:26px; height:26px; flex-shrink:0; }
.required-note { font-size:11px; color:var(--muted); margin:0 0 22px; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
fieldset + fieldset { margin-top:26px; padding-top:24px; border-top:1px solid #e6edf5; }
legend { font-size:16px; font-weight:700; color:var(--navy); padding:0; float:left; width:100%; margin-bottom:6px; }
.section-number { color:var(--blue); font-size:11px; background:#edf4fc; border-radius:6px; padding:5px 7px; margin-right:6px; vertical-align:2px; }
.section-help { clear:both; font-size:12px; color:var(--muted); margin:0 0 20px; }
.field { margin-bottom:16px; min-width:0; }
label { font-size:13px; display:block; font-weight:650; margin-bottom:7px; color:#33465d; }
.optional { color:var(--muted); font-weight:400; font-size:11px; }
.label-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; }
.field-tag { font-size:10px; color:var(--muted); margin-bottom:7px; }
input { width:100%; min-height:46px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); padding:11px 13px; font:inherit; font-size:14px; transition:border-color .15s, box-shadow .15s; }
input::placeholder { color:#6a798c; opacity:1; font-size:13px; }
input:focus { border-color:var(--blue); outline:2px solid #c1d7ef; outline-offset:1px; }
input[readonly] { background:#f4f7fa; color:#52667e; }
input[aria-invalid=true] { border-color:#b13838; }
.field-help { font-size:11px; color:var(--muted); margin:6px 0 0; line-height:1.6; }
.field-error { font-size:12px; color:#a32525; margin:6px 0 0; }
.field-error:empty { display:none; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.error-summary { background:#fff4f3; color:#892c2c; border:1px solid #edc3bf; border-radius:10px; padding:16px; margin-bottom:22px; font-size:13px; }
.error-summary p { margin:6px 0 0; }
.error-summary ul { padding-left:18px; margin:8px 0 0; }
.error-summary a { color:#892c2c; }
.submit-area { margin-top:12px; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; background:var(--blue); color:white; border:1px solid var(--blue); border-radius:9px; padding:14px 18px; min-height:50px; font:inherit; font-size:14px; font-weight:650; cursor:pointer; text-decoration:none; }
.primary-button:hover { background:#21578e; color:white; }
.submit-area p { font-size:11px; text-align:center; color:var(--muted); margin:12px 0 0; }
.signup-footer { text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid #e6edf5; font-size:11px; color:var(--muted); }
.status-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at top, #e4edf9, transparent 70%), #f5f7fb; }
.status-card { width:100%; max-width:500px; padding:36px; border:1px solid var(--border); border-radius:20px; background:white; box-shadow:0 20px 60px #1e3a5f0a; }
.status-card .brand { color:var(--navy); margin-bottom:38px; }
.status-card h1 { font-size:28px; }
.status-card p { color:var(--muted); font-size:14px; }
.status-card .primary-button { margin-top:24px; }
.status-tip { border-radius:10px; background:#edf4fc; padding:16px; margin-top:24px; }
@media (min-width:1600px) { .brand-panel { align-items:center; } .brand-content { max-width:480px; } .brand-panel > .brand, .brand-footer { width:480px; } }
@media (max-width:1000px) { .onboarding { grid-template-columns: minmax(280px,.8fr) minmax(440px,1.2fr); } .brand-panel { padding:32px 24px; } .signup-panel { padding:28px; } .brand-content h2 { font-size:34px; } .service-preview { padding:16px; } }
@media (max-width:760px) { .onboarding { display:block; } .brand-panel { position:static; height:auto; min-height:0; padding:22px 24px; } .brand { font-size:26px; } .brand-content { padding:0; max-width:none; margin:0; } .brand-content h2 { font-size:23px; letter-spacing:-.5px; margin:14px 0 0; } .brand-content h2 br { display:none; } .brand-tag, .brand-content > p, .service-preview, .benefits, .brand-footer { display:none; } .signup-panel { padding:24px 20px; } .signup-header { margin-top:26px; } .signup-top { font-size:11px; } input { font-size:16px; } .field-grid { grid-template-columns:1fr; gap:0; } .signup-footer { margin-top:26px; } .status-card { padding:28px 22px; } }
@media (prefers-reduced-motion:reduce) { input { transition:none; } }