:root{--fg:#111213;--muted:#6b6f73;--line:#d9dbdd;--focus:#6b6f73}
*{box-sizing:border-box}
/* `all:unset` on buttons like .toggle would otherwise override the hidden attribute. */
[hidden]{display:none!important}
html,body{margin:0;min-height:100dvh}
body{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:#fff;color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{width:100%;max-width:340px}
h1{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:2rem;line-height:1.15;letter-spacing:-.7px;margin:0}
.sub{margin:12px 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted)}
form{margin-top:32px;display:flex;flex-direction:column;gap:20px}
.field{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:4px;transition:border-color .15s}
.field:focus-within{border-color:var(--focus)}
.field.error{border-color:#d93025}
.phone-wrap{position:relative}
.country{display:flex;align-items:center;gap:4px;margin:0;height:auto;padding:5px 4px 5px 6px;border:0;border-radius:3px;background:none;color:var(--muted);cursor:pointer;position:relative}
.country::after{content:"";position:absolute;right:-6px;top:4px;bottom:4px;border-right:1px solid var(--line)}
.country:focus-visible{background:#f1f2f3;outline:0}
.country img,.opt img{display:block;width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.country[aria-expanded="true"] .chev{transform:rotate(180deg)}
.field input{padding-left:6px}
.menu{position:absolute;z-index:10;top:52px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden}
.search{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;border-bottom:1px solid var(--line);color:#a3a7ab}
.search input{font-size:1rem}
.list{max-height:256px;overflow-y:auto;padding:4px 0}
.opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:.875rem;color:var(--fg);cursor:pointer}
.opt:hover,.opt:focus-visible{background:#f4f5f6}
.opt[aria-selected="true"]{font-weight:600}
.opt .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .code{color:var(--muted)}
.empty{margin:0;padding:14px;font-size:.875rem;color:var(--muted)}
input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:1.05rem;color:var(--fg);background:transparent}
input::placeholder{color:#a3a7ab}
.legal{margin:0;font-size:.8125rem;line-height:1.75;color:var(--muted)}
.legal a{color:var(--muted)}
#btn,.btn{margin-top:4px;text-decoration:none;height:48px;border:0;border-radius:8px;background:var(--fg);color:#fff;font:inherit;font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
#btn:disabled,.btn:disabled{opacity:.5;cursor:default}
.msg{margin:0;font-size:.875rem;min-height:1.2em}
.msg.err{color:#d93025}.msg.ok{color:#137333}
.text{display:flex;align-items:center;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:4px;transition:border-color .15s}
.text:focus-within{border-color:var(--focus)}
.text.error{border-color:#d93025}
.label{display:block;margin-bottom:8px;font-size:.8125rem;font-weight:500;color:var(--fg)}
.hint{margin:6px 0 0;font-size:.8125rem;color:var(--muted)}
.hint.err{color:#d93025}
.toggle{all:unset;cursor:pointer;font-size:.8125rem;color:var(--muted);padding:4px 0 4px 8px}
.toggle:focus-visible{text-decoration:underline}
.sub a{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.actions{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.points{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:.9375rem;line-height:1.5}
.points li{position:relative;padding-left:22px}
.points li::before{content:"";position:absolute;left:4px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--fg)}
.center{text-align:center}
.center .sub strong{color:var(--fg);font-weight:600;white-space:nowrap}
.check{display:block;width:88px;height:88px;margin:0 auto 24px;stroke:#1a8d4b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s ease-out forwards}
.check path{stroke-dasharray:32;stroke-dashoffset:32;animation:draw .35s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
main{animation:enter .25s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.check circle,.check path{animation:none;stroke-dashoffset:0}main{animation:none}}
.btn[aria-disabled]{opacity:.5;pointer-events:none}
#btn[aria-busy="true"],.btn[aria-busy="true"]{position:relative;color:transparent;opacity:1;pointer-events:none}
#btn[aria-busy="true"]::after,.btn[aria-busy="true"]::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{margin:24px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:.9375rem;line-height:1.5}
.steps strong,.sub strong{color:var(--fg);font-weight:600}
.actions .toggle{align-self:center;padding:8px}
.confetti{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}
.qr{margin:28px auto 0;width:220px;height:220px}
.qr svg{display:block;width:100%;height:100%}
.btn-outline{height:48px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--fg);font:inherit;font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;width:100%;transition:border-color .15s}
.btn-outline:hover,.btn-outline:focus-visible{border-color:var(--focus);outline:0}
.btn-outline:disabled{opacity:.5;cursor:default}
.btn-outline[aria-busy="true"]{position:relative;color:transparent;pointer-events:none}
.btn-outline[aria-busy="true"]::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:18px;height:18px;border:2px solid rgba(0,0,0,.15);border-top-color:var(--fg);border-radius:50%;animation:spin .7s linear infinite}
.or{display:flex;align-items:center;gap:12px;margin:24px 0 0;font-size:.8125rem;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
#passkey:not([hidden])+form{margin-top:24px}
.passkey{margin-top:32px}
.label-row{display:flex;justify-content:space-between;align-items:baseline}
.label-row .label{margin-bottom:8px}
.label-row a,.alt a{font-size:.8125rem;color:var(--muted)}
.alt{margin:24px 0 0;font-size:.875rem;color:var(--muted);text-align:center}
.alt a{font-size:inherit;color:var(--fg);font-weight:500}
.signed-in{margin:24px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:4px;font-size:.875rem;color:var(--muted)}
.signed-in strong{color:var(--fg);font-weight:500;overflow-wrap:anywhere}
.signed-in a{color:var(--fg);font-weight:500;white-space:nowrap}
.bio-icon{display:block;width:64px;height:64px;margin:0 0 24px;color:var(--fg)}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0;padding:0;border:0;min-width:0}
.otp input{width:100%;height:56px;padding:0;text-align:center;font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:6px;caret-color:var(--fg);transition:border-color .15s,background-color .15s}
.otp input:focus{border-color:var(--fg);outline:0}
.otp input.filled{background:#f7f8f8}
.otp.error input{border-color:#d93025;animation:shake .32s ease-in-out}
.otp input:disabled{opacity:.6}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.otp.error input{animation:none}}
.resend{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:2px}
.resend .toggle{padding:8px;font-size:.875rem;font-variant-numeric:tabular-nums}
.resend .toggle:disabled{cursor:default;opacity:.7}
.resend .toggle:not(:disabled){color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){#handoff-btn{display:none!important}}
/* Shown only if the page script never runs (it removes this), so an old browser never sees a blank page. */
.fallback{position:fixed;left:24px;right:24px;bottom:48px;max-width:340px;margin:0 auto;opacity:0;visibility:hidden;animation:fallback 0s 3s forwards}
@keyframes fallback{to{opacity:1;visibility:visible}}
/* Signup: personal or business use, two options side by side. */
.choices{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--fg);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.choice svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.choice:hover{border-color:var(--focus)}
.choice:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.choice[aria-checked="true"]{border-color:var(--fg);background:#f4f5f6;box-shadow:inset 0 0 0 1px var(--fg)}
/* Signup's last screen for personal use: the orb (animated by /orb.js). */
.ready-orb{margin:0 auto 24px;width:fit-content;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
.ready-orb .orb{display:block;height:112px;width:auto;overflow:visible}
.orb__eye{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .12s linear}
.orb__happy{opacity:0;transition:opacity .12s linear}
.orb.is-happy .orb__eye{opacity:0;transform:scaleY(.3)}
.orb.is-happy .orb__happy{opacity:1}