/* Sign in, sign up, verify and recovery: a dedicated, uncluttered page on the site's cream background and blue accent */
*{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#2563eb;--blue-dk:#1d4ed8;--ink:#0f172a;--ink2:#475569;--ink3:#64748b;--line:#d9dee7;--bg:#f8f9f5}
html{-webkit-text-size-adjust:100%}
body.ac-page{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #99b8ff;outline-offset:2px}
.ac-split{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100dvh}
.ac-side{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:34px 48px 34px max(32px,calc((100vw - 1180px)/2));background:linear-gradient(170deg,#f1f4e7 0%,#e8effb 100%);border-right:1px solid #e3e8ef}
.ac-brand{display:inline-flex;align-items:center;gap:11px;align-self:flex-start;color:var(--ink);text-decoration:none!important}
.ac-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;font-size:16px;box-shadow:0 6px 14px rgba(37,99,235,.28)}
.ac-name{display:grid;font-size:16px;font-weight:700;line-height:1.2}.ac-name small{font-size:11.5px;font-weight:500;color:var(--ink3)}
.ac-side-body{max-width:440px}
.ac-side h1{font-size:38px;line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.ac-lede{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink2)}
.ac-points{list-style:none;display:grid;gap:14px;margin-top:28px}
.ac-points li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#1e293b}
.ac-points i{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#dbe7ff;color:var(--blue-dk);font-size:11px}
.ac-back{align-self:flex-start;font-size:13.5px;font-weight:600;color:var(--ink3)}.ac-back:hover{color:var(--blue);text-decoration:none}
.ac-main{display:flex;justify-content:center;align-items:center;padding:48px max(32px,calc((100vw - 1180px)/2)) 48px 56px;background:#fff}
.ac-col{width:100%;max-width:420px}
.ac-col>*:first-child{margin-top:0}
/* type */
.ac-col .pill{display:inline-block;margin:0 0 12px;padding:4px 11px;border-radius:99px;background:#e7eedb;color:#3f5b18;font-size:11px;font-weight:800;letter-spacing:.08em}
.ac-col h2{font-size:28px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.ac-col h3{font-size:19px;font-weight:800}
.ac-col p.muted,.ac-col p{color:var(--ink2)}
.ac-col p.muted{margin-top:8px;font-size:14.5px}
.ac-col strong{color:var(--ink)}
/* forms: one even rhythm */
.ac-col form{display:grid;gap:16px;margin-top:26px}
.ac-col form+form{margin-top:12px}
.ac-col label{display:grid;gap:7px;font-size:13px;font-weight:600;color:#334155}
.ac-col input:not([type=checkbox]):not([type=radio]){width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.ac-col input::placeholder{color:#94a3b8}
.ac-col input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.ac-col input.otp{height:58px;text-align:center;font-size:24px;font-weight:700;letter-spacing:.35em}
.ac-col label.check,.ac-col .check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:500;color:var(--ink2);line-height:1.45}
.ac-col .check input{flex:0 0 18px;width:18px;height:18px;margin-top:2px;padding:0;accent-color:var(--blue)}
.ac-col .check a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ac-col button.primary,.ac-col .primary.wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;padding:0 20px;border:0;border-radius:12px;background:var(--blue);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.26);transition:background .15s}
.ac-col button.primary:hover{background:var(--blue-dk)}
.ac-col button.primary:disabled{opacity:.7;cursor:progress}
.ac-col button.secondary,.ac-col .secondary.wide{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.ac-col button.secondary:hover{background:#f1f5f9}
.ac-col .google-signin{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}
.ac-col .google-signin:hover{background:#f1f5f9;text-decoration:none}
.ac-col .text-button{padding:0;border:0;background:none;color:var(--blue);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.auth-or{display:flex;align-items:center;gap:12px;color:#94a3b8;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-links{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:22px;font-size:13.5px;color:var(--ink3)}
.auth-links a{font-weight:600}
.ac-col .form-bottom{margin-top:14px;text-align:center;font-size:13.5px;color:var(--ink3)}
.ac-col .notice{margin-top:18px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.ac-col .notice.success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.ac-col .submit-status:empty,#signup-error:empty,#verification-error:empty{display:none}
#signup-options{display:grid;gap:14px;margin-top:26px}
#signup-error,#verification-error{font-size:13.5px;color:#b91c1c}
.auth-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* signup steps */
.auth-steps{display:flex;align-items:center;gap:8px;margin:0 0 22px;padding:0;list-style:none;font-size:12px;font-weight:700;color:#94a3b8}
.auth-steps li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.auth-steps li+li::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--line)}
.auth-steps b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e2e8f0;color:var(--ink3);font-size:11px}
.auth-steps li.now{color:var(--blue-dk)}.auth-steps li.now b{background:var(--blue);color:#fff}
.auth-steps li.done{color:#15803d}.auth-steps li.done b{background:#16a34a;color:#fff}
.ac-col .steps{display:flex;gap:10px;margin:0 0 18px;font-size:12px;color:#94a3b8}.ac-col .steps b{color:var(--blue-dk)}
.ac-col .big-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 0 14px;border-radius:15px;background:#eaf1ff;color:var(--blue);font-size:22px}
@media(max-width:900px){.ac-split{grid-template-columns:1fr;min-height:0}.ac-side{padding:22px 22px 20px;gap:16px;border-right:0;border-bottom:1px solid #e3e8ef}.ac-side h1{font-size:24px}.ac-lede{font-size:14.5px;margin-top:8px}.ac-points,.ac-side .ac-back{display:none}.ac-side-body{max-width:none}.ac-main{align-items:flex-start;padding:28px 22px 44px}}
@media(max-width:520px){.ac-col h2{font-size:25px}.auth-pair{grid-template-columns:1fr}.auth-steps{gap:6px}.auth-steps li+li::before{width:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Fit the screen: on desktop the page itself never scrolls; only the form column scrolls if the window is very short */
@media(min-width:901px){
body.ac-page{height:100dvh;overflow:hidden}
.ac-split{height:100dvh;min-height:0}
.ac-side{overflow:hidden}
.ac-main{overflow-y:auto;align-items:center}
.ac-col{margin:auto}
}
@media(min-width:901px) and (max-height:760px){
.ac-side{padding-top:24px;padding-bottom:24px;gap:16px}
.ac-side h1{font-size:32px}.ac-lede{font-size:15px;margin-top:10px}
.ac-points{margin-top:18px;gap:10px}.ac-points li{font-size:14px}
.ac-main{padding-top:20px;padding-bottom:20px}
.ac-col form{gap:12px;margin-top:18px}
.ac-col input:not([type=checkbox]):not([type=radio]){height:44px}
.ac-col button.primary,.ac-col .primary.wide{height:46px}
.ac-col h2{font-size:25px}
.auth-steps{margin-bottom:14px}
.auth-links{margin-top:16px}
}

/* ---- polish: balanced side panel, one divider, even rhythm ---- */
.ac-side{padding:0;align-items:stretch;justify-content:center}
.ac-side-in{display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:100%;max-width:500px;min-height:100%;margin:0 auto;padding:36px 32px}
.ac-side-body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:none;padding:12px 0}
.ac-side h1{font-size:clamp(28px,3.1vw,42px)}
.ac-points{margin-top:clamp(18px,3vh,30px);gap:clamp(10px,1.8vh,16px)}
.ac-mock{display:grid;gap:12px;margin-top:clamp(20px,4vh,36px);max-width:400px}
.ac-mock-card{padding:14px 16px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 10px 26px rgba(15,23,42,.07);backdrop-filter:blur(4px)}
.ac-mock-card-2{margin-left:34px}
.ac-mock-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink)}
.ac-mock-pill{padding:3px 10px;border-radius:99px;background:#dcfce7;color:#166534;font-size:11.5px;font-weight:800}.ac-mock-pill.soft{background:#dbe7ff;color:var(--blue-dk)}
.ac-mock-bar{height:8px;margin:10px 0 8px;border-radius:99px;background:#e2e8f0;overflow:hidden}.ac-mock-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.ac-mock small{display:block;font-size:12.5px;color:var(--ink3)}
.ac-mock-card-2 small{margin-top:6px}
/* the divider the Google button brings with it */
.ac-col .google-signin{margin:0!important;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:700}
.ac-col .google-divider{display:flex;align-items:center;gap:12px;margin:2px 0!important;color:#94a3b8;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ac-col .google-divider::before,.ac-col .google-divider::after{content:"";flex:1;height:1px;background:var(--line)}
#signup-options{gap:16px;margin-top:24px}
#signup-options:empty,#signup-options:not(:has(*)){display:none}
#continue-email{display:none!important}
/* password reveal */
.ac-pw{position:relative;display:block}
.ac-pw input{padding-right:46px!important}
.ac-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:9px;background:none;color:#64748b;font-size:15px;cursor:pointer}
.ac-pw button:hover{background:#f1f5f9;color:var(--ink)}
/* tighter on short or zoomed windows, never hiding content */
@media(min-width:901px) and (max-height:760px){.ac-side-in{padding-top:24px;padding-bottom:24px;gap:14px}.ac-mock{margin-top:16px}.ac-mock-card{padding:11px 14px}}
@media(min-width:901px) and (max-height:640px){.ac-mock{display:none}.ac-side h1{font-size:28px}.ac-lede{font-size:14.5px;margin-top:8px}.ac-points{gap:8px;margin-top:14px}.ac-points li{font-size:13.5px}}
@media(min-width:901px) and (max-height:520px){.ac-side-in{padding-top:16px;padding-bottom:16px}.ac-lede{display:none}}
@media(max-width:900px){.ac-side-in{min-height:0;padding:20px 22px;gap:12px;max-width:none}.ac-side-body{padding:0}.ac-mock{display:none}.ac-side .ac-back{display:none}}
/* ---- landing-page scale: 14px base, 12px radii, 13px gradient buttons, tighter rhythm ---- */
:root{--ink:#0c111d;--r-md:12px;--r-lg:16px}
body.ac-page{font-size:14px;line-height:1.6;color:var(--ink)}
.ac-mark{width:38px;height:38px;border-radius:var(--r-md);font-size:15px;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.ac-name{font-size:14px}.ac-name small{font-size:11px}
.ac-side-in{max-width:460px;padding:30px 28px;gap:18px}
.ac-side h1{font-size:clamp(26px,2.5vw,34px);line-height:1.15;letter-spacing:-1px}
.ac-lede{margin-top:10px;font-size:14.5px;line-height:1.6}
.ac-points{margin-top:clamp(14px,2.4vh,22px);gap:clamp(8px,1.5vh,12px)}
.ac-points li{gap:10px;font-size:14px}
.ac-points i{flex-basis:22px;width:22px;height:22px;font-size:10px}
.ac-mock{gap:10px;margin-top:clamp(16px,3vh,26px);max-width:360px}
.ac-mock-card{padding:11px 14px;border-radius:var(--r-md)}
.ac-mock-card-2{margin-left:28px}
.ac-mock-row{font-size:13px}.ac-mock small{font-size:12px}
.ac-back{font-size:13px}
.ac-main{padding:32px max(28px,calc((100vw - 1180px)/2)) 32px 48px}
.ac-col{max-width:380px}
.ac-col h2{font-size:24px;line-height:1.2;letter-spacing:-.6px}
.ac-col h3{font-size:17px}
.ac-col p.muted{margin-top:6px;font-size:13.5px}
.ac-col .pill{margin-bottom:10px;padding:3px 10px;font-size:10.5px}
.ac-col form{gap:13px;margin-top:20px}
.ac-col label{gap:6px;font-size:12.5px}
.ac-col input:not([type=checkbox]):not([type=radio]){height:44px;border-radius:var(--r-md);font-size:14px;padding:0 13px}
.ac-col input.otp{height:52px;font-size:22px}
.ac-col label.check,.ac-col .check{font-size:13px;gap:9px}
.ac-col button.primary,.ac-col .primary.wide{height:46px;border-radius:13px;font-size:14px;background:linear-gradient(160deg,#2563eb 0%,#1648c0 100%);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 18px rgba(37,99,235,.3)}
.ac-col button.primary:hover{background:linear-gradient(160deg,#2563eb 0%,#1648c0 100%);filter:brightness(1.06)}
.ac-col .google-signin{min-height:44px!important;border-radius:var(--r-md)!important;font-size:14px}
.ac-col .google-divider{font-size:11px;margin:0!important}
.ac-col button.secondary,.ac-col .secondary.wide{height:44px;border-radius:var(--r-md);font-size:14px}
.auth-links{margin-top:16px;font-size:13px}
.ac-col .form-bottom{font-size:13px}
.ac-col .notice{margin-top:14px;padding:10px 12px;font-size:12.5px;border-radius:var(--r-md)}
.auth-steps{margin-bottom:16px;gap:7px;font-size:11.5px}
.auth-steps b{width:20px;height:20px;font-size:10.5px}
.auth-steps li+li::before{width:14px}
#signup-options{margin-top:18px;gap:13px}
.ac-pw button{width:32px;height:32px;right:5px;font-size:14px}

/* ---- v7: the landing page's own tokens and controls, a layout that never shifts while typing, and proper alerts ---- */
:root{--bg:#fbfdff;--line:#e8eaf0;--line-mid:#d1d5db;--ink:#0c111d;--ink2:#475569;--ink3:#64748b;--blue-lt:#eff6ff;--red:#dc2626;--red-lt:#fef2f2;--green-lt:#f0fdf4;--sh-sm:0 1px 3px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.04)}
body.ac-page{background:var(--bg);color:var(--ink)}
.ac-side{background:linear-gradient(170deg,#fbfdff 0%,#eff6ff 100%);border-right:1px solid var(--line)}
.ac-main{background:#fff}
.ac-name{font-size:15px;font-weight:700}.ac-name small{font-size:11.5px}
.ac-side h1{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.14;color:var(--ink)}
.ac-lede{font-size:15px;line-height:1.7;color:var(--ink2)}
.ac-points li{font-size:14px;font-weight:500;color:#1e293b}
.ac-points i{background:var(--blue-lt);color:var(--blue)}
.ac-mock-card{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);backdrop-filter:none}
.ac-mock-pill{background:var(--green-lt);color:#166534}.ac-mock-pill.soft{background:var(--blue-lt);color:var(--blue-dk)}
.ac-mock-bar{background:#e8eaf0}
.ac-col .pill{background:var(--blue-lt);color:var(--blue-dk);letter-spacing:.07em;font-weight:700}
.ac-col h2{font-size:clamp(22px,2.2vw,25px);font-weight:800;letter-spacing:-.5px;line-height:1.25;color:var(--ink)}
.ac-col p.muted{font-size:14px;line-height:1.6;color:var(--ink2)}
.ac-col label{font-size:12.5px;font-weight:700;color:#1e293b;letter-spacing:0}
.ac-col input:not([type=checkbox]):not([type=radio]){height:46px;padding:0 14px;border:1.5px solid var(--line-mid);border-radius:12px;background:#f8fafc;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:400;line-height:normal;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.ac-col input[type=password]{font-family:'Inter',system-ui,sans-serif;letter-spacing:normal;-webkit-text-security:disc}
.ac-col input::placeholder{color:#c0c8d4;font-size:13.5px;letter-spacing:0}
.ac-col input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.ac-col input.is-invalid,.ac-col input[aria-invalid=true]{border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(220,38,38,.10)}
.ac-col input.otp{height:56px;font-size:24px}
.ac-col button.primary,.ac-col .primary.wide{height:48px;border-radius:13px;font-size:14px;font-weight:700}
.ac-col button.secondary,.ac-col .secondary.wide,.ac-col .google-signin{height:46px;border:1.5px solid var(--line-mid);border-radius:12px;font-size:14px}
.auth-links{font-size:13px;color:var(--ink3)}
/* alerts: red for errors, amber for "wait", green for success, blue for information; always visible, never auto-dismissed */
.ac-alert{display:flex;gap:11px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border:1px solid;border-radius:12px;font-size:13.5px;line-height:1.5}
.ac-alert>i{flex:0 0 auto;margin-top:2px;font-size:15px}
.ac-alert strong{display:block;margin-bottom:1px;font-size:13.5px;font-weight:700;color:inherit}
.ac-alert ul{margin:3px 0 0 17px}
.ac-alert:focus{outline:0;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.ac-alert.error{background:var(--red-lt);border-color:#fecaca;color:#991b1b}
.ac-alert.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.ac-alert.success{background:var(--green-lt);border-color:#bbf7d0;color:#166534}
.ac-alert.info{background:var(--blue-lt);border-color:#bfdbfe;color:#1e40af}
/* nothing moves while typing: the column is anchored to the top, the scrollbar space is reserved, and the password hint has a fixed slot */
.ac-pw{display:block;position:relative;height:46px}
.ac-pw input{height:46px!important;padding-right:46px!important}
.ac-pw button{top:50%;margin-top:-16px;transform:none;height:32px;width:32px;right:7px}
.password-feedback{min-height:18px;margin-top:2px;font-size:12px;line-height:18px}
.password-feedback[data-level=weak]{color:#b45309}.password-feedback[data-level=strong]{color:#15803d}
@media(min-width:901px){
.ac-main{align-items:center;scrollbar-gutter:stable;padding-top:32px;padding-bottom:32px}
.ac-col{margin:auto}
}
@media(min-width:901px) and (max-height:760px){.ac-main{padding-top:clamp(16px,5vh,40px)}}
@media(max-width:900px){.ac-side{background:linear-gradient(170deg,#fbfdff,#eff6ff);border-bottom:1px solid var(--line)}}

@media(max-width:900px){.ac-col input:not([type=checkbox]):not([type=radio]){font-size:16px}}
.ac-col input::placeholder{font-weight:400}
.ac-col .ac-alert.success{text-align:center;justify-content:center}