@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/HankenGrotesk-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/HankenGrotesk-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/HankenGrotesk-600.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/HankenGrotesk-800.woff2) format("woff2")}

:root{
  --fg:#0a0a0a;
  --accent:#188bf6;
  --accent-dark:#1270cc;
  --muted:#6b7280;
  --border:#e5e7eb;
  --surface:#f7f8fa;
  --danger:#c62828;
  --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);background:var(--white);line-height:1.55;font-size:16px;
  min-height:100vh;display:flex;flex-direction:column;
}
.keyline{height:3px;background:var(--accent);width:100%}

.top{max-width:720px;width:100%;margin:0 auto;padding:36px 24px 0}
.logo{display:block;height:84px;width:auto}

.wrap{max-width:720px;width:100%;margin:0 auto;padding:0 24px 24px;flex:1}

.intro{padding:44px 0 36px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(34px,6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:16px}
h1 span{color:var(--accent)}
.lede{font-size:18px;color:var(--muted);margin-top:18px;max-width:52ch}

.card{
  border:1px solid var(--border);border-radius:24px;padding:40px;background:var(--white);
}
.group-label{
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  padding-top:8px;margin-bottom:22px;
}
.group-label:not(:first-child){margin-top:40px;padding-top:32px;border-top:1px solid var(--border)}

.field{margin-bottom:24px;border:0;min-width:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label,legend{display:block;font-size:15px;font-weight:600;margin-bottom:8px;padding:0}
.opt{font-weight:500;color:var(--muted);font-size:13px;margin-left:6px}

input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;font:inherit;font-size:16px;color:var(--fg);background:var(--white);
  border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  transition:border-color .15s,box-shadow .15s;appearance:none;
}
textarea{resize:vertical;min-height:110px}
input::placeholder,textarea::placeholder{color:#9aa0a8}
input:hover,textarea:hover{border-color:#cfd3d9}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(24,139,246,.15)}
.hint{font-size:13px;color:var(--muted);margin-top:6px}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;margin:0;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.chip span{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;
  border:1px solid var(--border);background:var(--white);font-size:15px;font-weight:500;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s;
}
.chip:hover span{border-color:#cfd3d9;background:var(--surface)}
.chip input:focus-visible + span{outline:none;box-shadow:0 0 0 4px rgba(24,139,246,.2);border-color:var(--accent)}
.chip input:checked + span{border-color:var(--accent);background:rgba(24,139,246,.08);color:var(--accent-dark);font-weight:600}
.chip input[type=checkbox]:checked + span::before{
  content:"";width:14px;height:14px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%231270cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick{position:relative;margin:0;cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.pick-box{
  display:flex;flex-direction:column;gap:4px;height:100%;padding:22px 22px;
  border:1px solid var(--border);border-radius:14px;background:var(--white);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.pick-title{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pick-sub{font-size:14px;color:var(--muted)}
.pick:hover .pick-box{border-color:#cfd3d9;background:var(--surface)}
.pick input:focus-visible + .pick-box{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(24,139,246,.2)}
.pick input:checked + .pick-box{border-color:var(--accent);background:rgba(24,139,246,.06);box-shadow:inset 0 0 0 1px var(--accent)}
.pick input:checked + .pick-box .pick-title{color:var(--accent-dark)}

.reveal{animation:reveal .3s ease both}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.other-wrap{margin-top:14px}
.other-wrap[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.err{display:none;font-size:13px;color:var(--danger);margin-top:7px;font-weight:500}
.field.invalid .err{display:block}
.field.invalid input[type=text],.field.invalid input[type=email],.field.invalid input[type=tel],.field.invalid textarea{border-color:var(--danger)}
.form-err{display:none;color:var(--danger);font-weight:500;margin:4px 0 16px;font-size:15px}
.form-err.show{display:block}

.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:56px;padding:0 32px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:17px;font-weight:600;color:var(--white);background:var(--accent);
  box-shadow:0 10px 28px rgba(24,139,246,.32);
  transition:background .15s,transform .1s,box-shadow .15s;margin-top:8px;
}
.btn:hover{background:var(--accent-dark)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(24,139,246,.3),0 10px 28px rgba(24,139,246,.32)}
.btn[disabled]{opacity:.7;cursor:progress}

.privacy{font-size:13px;color:var(--muted);margin-top:20px;line-height:1.6}
.privacy a,.foot a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}

.done{text-align:center;padding:64px 40px}
.done[hidden]{display:none}
.done:focus{outline:none}
.tick{color:var(--accent);margin:0 auto 20px;display:block}
.done h2{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.done p{color:var(--muted);font-size:17px;max-width:44ch;margin:0 auto}

.doc h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:32px 0 10px}
.doc h2:first-of-type{margin-top:8px}
.doc p,.doc li{color:#374151;font-size:16px}
.doc p{margin-bottom:12px}
.doc ul{margin:0 0 12px 20px}
.doc li{margin-bottom:8px}
.doc a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.doc .updated,.intro .lede a{color:var(--muted)}
.intro .lede a{text-decoration:underline;text-underline-offset:3px}
.top a{display:inline-block}

.foot{
  max-width:720px;width:100%;margin:0 auto;padding:28px 24px 48px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);
}

.assure{list-style:none;margin:36px 0 0;display:grid;gap:14px}
.assure li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:#374151}
.assure svg{flex:none;color:var(--accent)}

/* Desktop: headline on the left stays in view, form fills the right. */
.top.wide,.foot.wide{max-width:1180px;padding-left:40px;padding-right:40px}
.wrap.split{
  max-width:1180px;padding:0 40px 40px;
  display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);column-gap:80px;align-items:start;
}
.split .intro{grid-column:1;grid-row:1 / span 2;position:sticky;top:48px;padding:56px 0 0}
.split .card{grid-column:2}
.split .intro h1{font-size:clamp(36px,4vw,50px)}
.split .intro .lede{font-size:18px}
.split .card{margin-top:56px}

@media (max-width:960px){
  .top.wide,.foot.wide{padding-left:24px;padding-right:24px}
  .wrap.split{display:block;padding:0 24px 24px;max-width:720px}
  .split .intro{position:static;padding:44px 0 36px}
  .assure{display:none}
  .split .card{margin-top:0}
}

@media (max-width:640px){
  .top{padding-top:28px}
  .logo{height:64px}
  .card{padding:24px 20px;border-radius:20px}
  .row{grid-template-columns:1fr;gap:0}
  .picks{grid-template-columns:1fr}
  .intro{padding:32px 0 28px}
  .lede{font-size:17px}
  .done{padding:48px 24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}