:root{color-scheme:light;--ink:#102e42;--gold:#b88b46;--line:#d2dee3}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 90% 10%,#1c4257 0%,transparent 40%),#0a2335;color:#e9eff1;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible{outline:3px solid #efca8c;outline-offset:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;color:#102e42;padding:12px;z-index:9}
.masthead{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px clamp(18px,4vw,40px);border-bottom:1px solid #416073}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:900;letter-spacing:.12em;font-size:1.05rem}.logo:first-letter{color:#dbb579}
.testing{color:#e2bc78;letter-spacing:.1em;font-size:.76rem;font-weight:800}
.shell{max-width:1200px;margin:clamp(20px,6vh,76px) auto;padding:0 clamp(18px,4vw,40px) 45px;display:grid;grid-template-columns:1fr minmax(320px,510px);column-gap:clamp(20px,5vw,90px);row-gap:25px;align-items:start}
.eyebrow{color:#c8a062;font-weight:850;letter-spacing:.12em;font-size:.75rem;margin:0 0 14px}
.intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.8rem,6.5vw,5.5rem);line-height:1.08;margin:0 0 24px;letter-spacing:-.035em}
.intro h1 em{color:#e0b574;font-style:italic}
.intro>p:last-child{max-width:48ch;line-height:1.75;color:#d0dce3;font-size:1.08rem}
.sign-in{background:#fff;color:var(--ink);border-radius:13px;padding:clamp(22px,3vw,34px);box-shadow:0 20px 50px #00142355;border-top:5px solid var(--gold);min-height:280px}
.sign-in h2{font-family:Georgia,'Times New Roman',serif;font-size:1.65rem;margin:0 0 18px}
.loading,.error,.result{padding:15px;border-radius:9px;line-height:1.6}
.loading{background:#f4f6f7;color:#426070}
.error{background:#fff0ee;color:#8a2424}
.result{background:#f0f6f4;color:#143f35}
.result strong{font-size:1.2rem}
.result button{font:inherit;font-weight:800;background:#123d51;color:white;border:0;border-radius:7px;padding:12px 14px;cursor:pointer}
.important{grid-column:1/-1;border:1px solid #406077;padding:20px 25px;border-radius:11px;background:#0e3044}
.important h2{font-size:1rem;margin:0 0 8px;color:#e8c184}
.important p{line-height:1.7;color:#d1e0e5;margin:8px 0}
footer{padding:25px;text-align:center;font-size:.85rem;color:#bed2dc;border-top:1px solid #385363}
@media(max-width:780px){.shell{grid-template-columns:1fr}.masthead{flex-wrap:wrap}.intro h1{font-size:3rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:0s!important}}

/* First-time Hanko enrollment must not be mistaken for an existing account login. */
.setup-explainer{margin:0 0 17px;font-size:.93rem;line-height:1.65;color:#345366}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0;padding:5px;border-radius:11px;background:#eaf0f2}
.auth-tab{border:1px solid transparent;background:transparent;border-radius:8px;padding:12px 9px;color:#24485c;font:inherit;font-weight:750;line-height:1.4;cursor:pointer}
.auth-tab[aria-pressed="true"]{background:#fff;border-color:#c2d1d9;color:#0f344a;box-shadow:0 3px 8px #183c4a15}
.auth-panel[hidden]{display:none!important}
.auth-hint{background:#f8f4ec;border-left:3px solid #be904b;color:#3c4e55;padding:12px 14px;line-height:1.55;font-size:.91rem;border-radius:0 6px 6px 0}
.result hanko-profile{display:block;margin:20px 0;max-width:100%}
button[disabled]{opacity:.6;cursor:wait}
@media(max-width:380px){.auth-tabs{grid-template-columns:1fr}}