:root{
  --blue:#0A66C2; --blue-dark:#004182; --blue-soft:#E7F0FA;
  --ink:#1A1A1A; --muted:#5F6B76; --border:#E1E5EA;
  --paper:#FFFFFF; --wash:linear-gradient(180deg,#F0F6FC 0%,#FFFFFF 55%,#F4F6F8 100%);
  --shadow:0 10px 34px rgba(10,102,194,.09);
  --font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#EDF1F5; --muted:#9AA7B4; --border:#263444;
    --paper:#141D28; --blue-soft:#17273A;
    --wash:linear-gradient(180deg,#0E1620 0%,#101a26 60%,#0E1620 100%);
    --shadow:0 24px 70px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--wash);
  min-height:100vh; -webkit-font-smoothing:antialiased;
  display:flex; align-items:flex-start; justify-content:center;
  padding:32px 20px 64px; line-height:1.55;
}
.wrap{width:100%; max-width:560px}
.brand{
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin:0 0 22px;
}
.card{
  background:var(--paper); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); padding:32px 28px;
}
h1{font-size:27px; line-height:1.25; font-weight:800; letter-spacing:-.02em; margin:0 0 12px}
.lede{color:var(--muted); margin:0 0 28px; font-size:16px}
.lede em{color:var(--ink); font-style:normal; font-weight:600}
fieldset{border:0; padding:0; margin:0 0 26px}
legend{font-size:15px; font-weight:600; margin:0 0 12px; padding:0}
.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{position:relative}
/* Visually hidden but still focusable and announced. A zero-sized opacity:0 input
   gets dropped from the accessibility tree entirely, which locks keyboard and
   screen-reader users out of the form. */
.opt input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.opt span{
  display:block; cursor:pointer; user-select:none;
  border:1.5px solid var(--border); border-radius:999px;
  padding:9px 16px; font-size:15px; font-weight:500;
  transition:border-color .12s, background .12s, color .12s;
}
.opt input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.opt span:hover{border-color:var(--blue)}
.opt input:checked + span{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600}
.hint{font-size:14px; color:var(--muted); margin:-6px 0 12px}
.known{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  font-size:15px; color:var(--muted);
  background:var(--blue-soft); border-radius:8px; padding:12px 14px;
}
.known b{color:var(--ink); font-weight:600; word-break:break-all}
.known a{color:var(--blue)}
label.field{display:block; font-size:15px; font-weight:600; margin:0 0 10px}
input[type=email]{
  width:100%; font-family:var(--font); font-size:16px; color:var(--ink);
  background:transparent; border:1.5px solid var(--border); border-radius:8px;
  padding:13px 14px;
}
input[type=email]:focus{outline:0; border-color:var(--blue)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
button{
  width:100%; margin-top:26px; font-family:var(--font); font-size:16px; font-weight:700;
  color:#fff; background:var(--blue); border:0; border-radius:8px; padding:15px;
  cursor:pointer; transition:background .12s, opacity .12s;
}
button:hover:not(:disabled){background:var(--blue-dark)}
button:disabled{opacity:.4; cursor:not-allowed}
.note{font-size:13.5px; color:var(--muted); margin:16px 0 0; text-align:center}
.err{color:#B45309; font-size:14px; margin:14px 0 0; text-align:center}
.foot{
  font-size:13.5px; color:var(--muted); margin:24px 4px 0;
  padding-top:20px; border-top:1px solid var(--border);
}
.foot p{margin:0 0 10px}
.foot p:last-child{margin:0}
.tick{
  width:44px; height:44px; border-radius:999px; background:var(--blue-soft);
  color:var(--blue); display:flex; align-items:center; justify-content:center;
  font-size:23px; font-weight:800; margin:0 0 18px;
}
[hidden]{display:none !important}
@media(max-width:480px){
  body{padding:24px 14px 48px}
  .card{padding:26px 20px}
  h1{font-size:23px}
}