@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url(fonts/plex-sans-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/plex-mono-600.woff2) format("woff2")}

:root{
  --background:#F1F5F9;--foreground:#272E39;--card:#FFFFFF;
  --primary:#15558B;--primary-hover:#0B4A7D;--primary-foreground:#FFFFFF;
  --muted:#F4F7F9;--muted-foreground:#6C7A87;
  --accent:#E8F4FD;--accent-foreground:#0B4A7D;--eyebrow:#15558B;
  --destructive:#DC2626;--border:#E2E8F0;--input:#E2E8F0;--ring:#15558B;
  --success:#0D9488;--success-bg:#ECFDF5;
  --band:linear-gradient(120deg,#0E4677,#0A3760 55%,#06243D);
  --band-glow:radial-gradient(circle at 35% 35%,rgba(127,182,230,0.20),transparent 70%);
  --band-ink:#E7EEF6;--band-eyebrow:#82B9EA;
  --shadow-md:0 4px 12px rgba(15,23,42,0.06),0 12px 28px rgba(15,23,42,0.06);
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --background:#0B1421;--foreground:#E8EFF7;--card:#111E31;
  --primary:#3B8AD9;--primary-hover:#4F9AE3;
  --muted:#172940;--muted-foreground:#8595A8;
  --accent:rgba(59,138,217,0.14);--accent-foreground:#A7CEF0;--eyebrow:#82B9EA;
  --destructive:#E5564C;--border:rgba(255,255,255,0.08);--input:rgba(255,255,255,0.08);--ring:#3B8AD9;
  --success:#15B8A6;--success-bg:rgba(21,184,166,0.12);
  --band:linear-gradient(120deg,#14365C,#0E2845 55%,#0A1F38);
  --band-glow:radial-gradient(circle at 35% 35%,rgba(127,182,230,0.22),transparent 70%);
  --shadow-md:0 10px 30px rgba(0,0,0,0.4); /* the light 6%-black shadow is invisible on the dark ground */
}}

*{box-sizing:border-box}
[hidden]{display:none!important} /* must outrank .banner/.steps display:flex — the UA rule does not */
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;line-height:1.5}
.shell{display:flex;min-height:100vh}

/* ── navy band (AuthGate's hero, verbatim language) ─────────────────────── */
.band{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:40px;flex-basis:46%;padding:48px 40px;background:var(--band);color:var(--band-ink)}
.band::before{content:"";position:absolute;top:-128px;right:-112px;width:380px;height:380px;border-radius:50%;background:var(--band-glow);pointer-events:none}
.band-waves{position:absolute;left:0;right:0;bottom:0;height:80px;width:100%;opacity:.5;pointer-events:none}
.band-logo{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.band-logo-tile{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}
.band-logo-tile img{height:58%;width:auto}
.band-wordmark{font-size:15px;font-weight:700;letter-spacing:.18em;color:#fff}
.band-body{position:relative;z-index:1;margin:auto 0}
.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
.band-eyebrow{color:var(--band-eyebrow)}
.band-title{margin:12px 0 0;max-width:14ch;font-size:30px;line-height:1.14;font-weight:600;letter-spacing:-.01em;color:#fff}
.band-copy{margin:12px 0 0;max-width:34ch;font-size:14px;color:rgba(231,238,246,.75)}
.band-features{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.band-features li{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(231,238,246,.9)}
.tick{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:1px solid rgba(130,185,234,.3);background:rgba(130,185,234,.15);color:#82B9EA}
.ico{width:1em;height:1em;flex:none}
.arrow{display:flex;align-items:center}
.tick .ico{width:11px;height:11px}
.band-foot{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:rgba(231,238,246,.5)}
.band-links{display:flex;gap:12px}
.band-links a{color:inherit;text-decoration:none}
.band-links a:hover{color:rgba(231,238,246,.8)}

/* ── card ───────────────────────────────────────────────────────────────── */
.main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px}
.card{width:100%;max-width:340px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow-md);padding:32px}
h1{margin:10px 0 0;font-size:21px;font-weight:600;letter-spacing:-.01em}
.sub{margin:6px 0 20px;font-size:13.5px;color:var(--muted-foreground)}
.client-name{color:var(--foreground);font-weight:600}
label{display:block;margin:14px 0 6px;font-size:13px;font-weight:500}
input{width:100%;padding:10px 12px;font-family:inherit;font-size:14px;color:var(--foreground);background:var(--background);border:1px solid var(--input);border-radius:9px;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--muted-foreground)}
input:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 25%,transparent)}
input:disabled{opacity:.5;cursor:not-allowed}
form.errored input{border-color:var(--destructive)}
button{font-family:inherit;cursor:pointer}
#signin-btn,#authorize-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:12px 16px;font-size:14px;font-weight:600;color:var(--primary-foreground);background:var(--primary);border:none;border-radius:9px;box-shadow:0 2px 10px rgba(21,85,139,.28);transition:background .15s}
#signin-btn:hover,#authorize-btn:hover{background:var(--primary-hover)}
button:disabled{opacity:.6;cursor:not-allowed}
.secondary{padding:12px 16px;font-size:14px;font-weight:600;color:var(--foreground);background:transparent;border:1px solid var(--border);border-radius:9px}
.btn-row{display:flex;gap:10px;margin-top:16px}
.btn-row .secondary{flex:1}
.btn-row #authorize-btn{flex:2.4;padding:12px 10px;margin-top:0} /* keeps the label on one line in the 340px card */
.banner{display:flex;gap:8px;margin:14px 0 0;padding:10px 12px;font-size:12.5px;border-radius:8px}
.banner.error{color:var(--destructive);border:1px solid color-mix(in srgb,var(--destructive) 30%,transparent);background:color-mix(in srgb,var(--destructive) 8%,transparent)}
.hint{margin:8px 0 0;font-size:12px;color:var(--muted-foreground)}
.divider{height:1px;margin:20px 0;background:var(--border)}
.foot-note{margin:0;text-align:center;font-size:13px;color:var(--muted-foreground)}
.mono-foot{margin:14px 0 0;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.mono{font-family:var(--font-mono);font-size:.92em}
.center{text-align:center}

/* steps indicator */
/* Sized to fit all three labels plus both connectors inside the 340px card. */
.steps{display:flex;align-items:center;gap:5px;margin-bottom:26px}
.step{display:flex;align-items:center;gap:5px}
.dot{display:grid;place-items:center;width:20px;height:20px;font-size:11px;font-weight:700;border-radius:50%;border:1.5px solid var(--border);color:var(--muted-foreground);background:transparent}
.dot .ico{width:12px;height:12px}
.dot .chk{display:none}
.step.done .dot .num{display:none}
.step.done .dot .chk{display:block}
.step-label{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
.bar{flex:1;height:1.5px;background:var(--border)}
.step.active .dot,.step.done .dot{background:var(--primary);border-color:var(--primary);color:#fff}
.step.active .step-label,.step.done .step-label{color:var(--foreground)}
.bar.done{background:var(--primary)}

/* consent */
.chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:5px 10px 5px 6px;font-size:12.5px;border:1px solid var(--border);border-radius:999px;background:var(--muted)}
.chip-avatar{display:grid;place-items:center;width:22px;height:22px;font-size:11px;font-weight:700;color:#fff;background:var(--primary);border-radius:50%}
#switch-btn{padding:0 2px;font-size:12px;font-weight:600;color:var(--primary);background:none;border:none}
.consent-card{margin-top:4px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.consent-head{padding:10px 14px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);background:var(--muted);border-bottom:1px solid var(--border)}
.consent-row{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-bottom:1px solid var(--border)}
.consent-row:last-child{border-bottom:none}
.consent-row b{font-size:13.5px;font-weight:600}
.consent-row span{font-size:12.5px;color:var(--muted-foreground)}
.return-note{margin:16px 0 0;text-align:center;font-size:11.5px;color:var(--muted-foreground)}

/* redirect */
.success-ring{display:grid;place-items:center;width:64px;height:64px;margin:8px auto 20px;border-radius:50%;background:var(--success-bg)}
.success-dot{display:grid;place-items:center;width:44px;height:44px;color:#fff;background:var(--success);border-radius:50%;box-shadow:0 0 0 6px color-mix(in srgb,var(--success) 14%,transparent)}
.success-dot .ico{width:20px;height:20px}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
section:not([hidden]){animation:fadeUp .3s ease both}

@media (max-width:820px){
  .shell{flex-direction:column}
  .band{flex-basis:auto;gap:14px;padding:22px 24px}
  /* The hero copy collapses; the legal chrome does NOT — the entity line and the
     ToS/Privacy links have to be on the page a user signs in on, phone included. */
  .band-body,.band-waves{display:none}
  .band-foot{font-size:9.5px;gap:3px}
  .main{align-items:flex-start;padding:24px 20px 48px}
}

/* ── sign-in page additions ─────────────────────────────────────────────── */
.primary-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:12px 16px;font-size:14px;font-weight:600;color:var(--primary-foreground);background:var(--primary);border:none;border-radius:9px;box-shadow:0 2px 10px rgba(21,85,139,.28);transition:background .15s}
.primary-btn:hover{background:var(--primary-hover)}
.link-btn{padding:0;font-size:12.5px;font-weight:500;color:var(--primary);background:none;border:none;text-decoration:underline;text-underline-offset:2px}
.row-end{display:flex;justify-content:flex-end;margin-top:8px}
.banner.success{color:var(--success);border:1px solid color-mix(in srgb,var(--success) 30%,transparent);background:var(--success-bg)}
.banner a{color:inherit;font-weight:600;margin-left:4px}
.banner .follow{display:block;margin-top:4px;color:var(--muted-foreground)}
.checklist{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.checklist li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--foreground)}
.checklist li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--destructive);flex:none}
.checklist li.ok{color:var(--muted-foreground)}
.checklist li.ok::before{background:var(--success)}
.access-links{display:flex;flex-direction:column;gap:6px;margin:0;text-align:center;font-size:13px;color:var(--muted-foreground)}
.access-links a{color:var(--primary);font-weight:500;text-decoration:none}
.access-links a:hover{text-decoration:underline}
.notice-box{margin-top:16px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:var(--muted-foreground);border:1px solid var(--border);border-radius:10px;background:var(--muted)}