@import url('./onboarding-fonts.css');
/* Same font and field palette as Mental Health. Scoped to public SaaS pages. */
body:has(.gist-onboarding) { background:#f4f8f6; }
.gist-onboarding { --ink:#183d37; --muted:#526d66; --accent:#2f9a98; --button:#166b58; --line:#d9e5e1; font-family:'IBM Plex Sans Arabic','Segoe UI',Arial,sans-serif; color:var(--ink); max-width:860px; margin:40px auto 64px; text-align:start; }
.gist-onboarding * { box-sizing:border-box; }
.gist-onboarding [hidden] { display:none!important; }
.gist-onboarding h1 { font-size:30px; font-weight:600; margin:18px 0 8px; line-height:1.4; }
.gist-onboarding h2 { font-size:23px; font-weight:600; margin:14px 0 8px; line-height:1.5; }
.gist-onboarding p { line-height:1.8; color:var(--muted); margin:8px 0; }
.gist-onboarding button,.gist-onboarding input,.gist-onboarding select { font:inherit; }
.gist-onboarding button,.gist-onboarding .primary-link { border:0; background:var(--button); color:white; border-radius:12px; min-height:42px; padding:10px 24px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.gist-onboarding button:disabled { opacity:.55; cursor:wait; }
.gist-onboarding :is(button,a,input,select):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.gist-onboarding .language-switch { display:flex; justify-content:flex-end; gap:6px; }
.gist-onboarding .language-switch button { background:transparent; color:var(--muted); border:1px solid var(--line); padding:6px 12px; min-height:36px; }
.gist-onboarding .language-switch [aria-pressed=true] { background:#e8f5ee; color:var(--button); border-color:var(--accent); }
.gist-onboarding .steps { display:flex; list-style:none; padding:30px 24px; margin:32px 0 14px; border:1px solid var(--line); border-radius:18px; background:white; }
.gist-onboarding .steps li { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; color:#718b83; min-width:0; gap:8px; }
.gist-onboarding .steps li:not(:last-child)::after { content:''; position:absolute; top:48px; inset-inline-start:50%; width:100%; height:2px; background:var(--line); }
.gist-onboarding .steps li.done::after { background:var(--accent); }
.gist-onboarding .step-number { font-size:11px; font-weight:600; height:18px; }
.gist-onboarding .icon { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#eef3f1; display:grid; place-items:center; z-index:1; position:relative; }
.gist-onboarding .icon img { width:18px; height:18px; display:block; }
.gist-onboarding .icon .step-result-mark { display:none; font-size:24px; font-weight:600; line-height:1; background:transparent; padding:0; color:inherit; }
.gist-onboarding .step-title { font-size:12px; max-width:135px; padding-inline:5px; line-height:1.6; }
.gist-onboarding .step-status { font-size:11px; }
.gist-onboarding .steps .active { color:var(--ink); font-weight:600; }
.gist-onboarding .steps :is(.active,.done) .icon { background:var(--accent); border-color:var(--accent); color:white; }
.gist-onboarding .steps .active img { filter:brightness(0) invert(1); }
.gist-onboarding .steps .active .icon::before { content:''; position:absolute; inset:-5px; border:2px solid transparent; border-top-color:var(--accent); border-radius:50%; animation:gist-turn 1.4s linear infinite; }
.gist-onboarding .steps .done .icon img,.gist-onboarding .steps .failed .icon img { display:none; }
.gist-onboarding .steps .done .step-result-mark,.gist-onboarding .steps .failed .step-result-mark { display:block; }
.gist-onboarding .steps .done { color:var(--button); }
.gist-onboarding .steps .failed { color:#a33b2c; }
.gist-onboarding .steps .failed .icon { background:#fff1ee; border-color:#ce776d; }
.gist-onboarding .active-panel { position:relative; background:white; padding:28px 32px; border:1px solid #b8ccc6; border-inline-start:4px solid var(--accent); border-radius:16px; min-height:240px; }
.gist-onboarding .active-panel[data-failed=true] { border-inline-start-color:#a33b2c; }
.gist-onboarding .step-badge { display:inline-block; color:var(--button); background:#e8f5ee; border:1px solid var(--line); padding:4px 10px; font-size:12px; border-radius:6px; }
.gist-onboarding .actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px; }
.gist-onboarding .timing { display:grid; grid-template-columns:1fr 1.2fr 2fr 1.2fr; gap:18px; background:white; border:1px solid #e8f0ed; border-radius:12px; padding:18px 24px; margin-top:14px; }
.gist-onboarding .timing>div+div { border-inline-start:1px solid #e8f0ed; padding-inline-start:18px; }
.gist-onboarding .timing dt { color:#718b83; font-size:11px; font-weight:600; margin:0 0 5px; }
.gist-onboarding .timing dd { color:var(--muted); font-size:12px; margin:0; overflow-wrap:anywhere; }
.gist-onboarding .notice { padding:12px 18px; border-radius:12px; background:#fff4dc; }
.gist-onboarding label { display:block; font-weight:500; margin:0 0 8px; }
.gist-onboarding input:not([type=checkbox]),.gist-onboarding select { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#f4f8f6; color:var(--ink); }
.gist-onboarding input:focus,.gist-onboarding select:focus { background:white; border-color:var(--accent); }
.gist-onboarding .password-field { display:flex; gap:8px; align-items:center; }
.gist-onboarding .password-field input { min-width:0; }
.gist-onboarding .password-field button { background:#eef3f1; color:var(--ink); padding:8px 12px; }
.gist-onboarding #password { margin-top:20px; }
.gist-onboarding #password label:not(:first-child) { margin-top:18px; }
.gist-onboarding .grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.gist-onboarding .full { grid-column:1/-1; }
.gist-onboarding .consent-control { display:inline-flex; align-items:flex-start; gap:8px; width:fit-content; margin:0 0 8px; cursor:pointer; }
.gist-onboarding .consent-control input[type=checkbox] { appearance:auto; -webkit-appearance:checkbox; flex:0 0 auto; width:16px; height:16px; margin:5px 0 0; padding:0; accent-color:var(--button); cursor:pointer; }
.gist-onboarding .consent-control span { line-height:1.7; }
.gist-onboarding .registration-card { padding:30px; background:white; border:1px solid var(--line); border-radius:18px; margin-top:24px; }
.gist-onboarding small { color:var(--muted); font-size:12px; }
.gist-onboarding #legal { display:flex; flex-wrap:wrap; gap:12px; }
@keyframes gist-turn { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .gist-onboarding .steps .active .icon::before { animation:none; } }
@media(max-width:640px) {
 .gist-onboarding { margin:20px 0 40px; } .gist-onboarding h1 { font-size:25px; }
 .gist-onboarding .steps { padding:20px 8px; } .gist-onboarding .step-title { font-size:10px; padding-inline:2px; } .gist-onboarding .step-status { font-size:10px; }
 .gist-onboarding .active-panel,.gist-onboarding .registration-card { padding:22px 18px; }
 .gist-onboarding .timing { grid-template-columns:1fr 1fr; padding:16px; gap:16px; }
 .gist-onboarding .timing>div+div { padding-inline-start:0; border:0; }
 .gist-onboarding .grid { grid-template-columns:1fr; }
}

.gist-onboarding .phone-fields { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 8px; }