:root{
  --bg:#F2ECDF;
  --ink:#141318;
  --muted:rgba(20,19,24,.65);
  --hair:rgba(20,19,24,.14);
  --card:rgba(255,255,255,.72);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 20% 12%, rgba(90,46,230,.10), rgba(90,46,230,0) 60%),
    radial-gradient(900px 600px at 86% 88%, rgba(90,46,230,.08), rgba(90,46,230,0) 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.page{width:min(1080px,92vw); margin:0 auto; padding:48px 0 28px;}
.top{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 0 10px;}
.mark{width:min(360px,78vw); height:auto; display:block;}
.micro{font-size:11px; letter-spacing:.32em; color:rgba(20,19,24,.45)}
.grid{display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start; margin-top:14px;}
.kicker{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(20,19,24,.52);
  /* more breathing room between headline, kicker, and body */
  margin:18px 0 18px;
  white-space:normal;
}
h1{margin:0 0 10px; font-size:40px; line-height:1.06; letter-spacing:-.03em;}
p{margin:0 0 16px; font-size:15px; line-height:1.65; max-width:52ch;}
.muted{color:var(--muted)}
.card{
  border:1px solid var(--hair);
  background:var(--card);
  border-radius:22px;
  padding:22px;
  backdrop-filter: blur(10px);
  box-shadow:0 18px 70px rgba(20,19,24,.14);
}
.card h2{margin:0 0 6px; font-size:18px; letter-spacing:-.02em;}
.small{margin:0 0 14px; font-size:13px; color:var(--muted)}
label{display:block; font-size:12px; color:rgba(20,19,24,.58); margin:12px 0 6px;}
label span{opacity:.7}
input{
  width:100%;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.9);
  border-radius:14px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
input:focus{border-color:rgba(90,46,230,.4); box-shadow:0 0 0 4px rgba(90,46,230,.12);}
button{
  width:100%;
  margin-top:14px;
  border:1px solid rgba(20,19,24,.18);
  background:rgba(20,19,24,.96);
  color:#fff;
  border-radius:999px;
  padding:13px 14px;
  font-size:14px;
  font-weight:650;
}
.fine{margin-top:10px; font-size:12px; color:rgba(20,19,24,.50)}
.success{
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid rgba(90,46,230,.22);
  border-radius:14px;
  background:rgba(90,46,230,.08);
  font-size:13px;
  color:rgba(20,19,24,.78);
}
.footer{text-align:center; margin-top:22px; font-size:12px; color:rgba(20,19,24,.50)}
.hidden{display:none}
.thanks{display:grid; place-items:center}
.thanksCard{width:min(640px,92vw); border:1px solid var(--hair); background:var(--card); border-radius:22px; padding:24px; text-align:center}
.back{display:inline-block; margin-top:10px; color:rgba(20,19,24,.78); text-decoration:none; border-bottom:1px solid rgba(20,19,24,.22)}
@media(max-width:920px){
  h1{font-size:32px}
  .grid{grid-template-columns:1fr}
}

/* v13 spacing refinements */
@media (max-width: 700px){
  .hero{ padding-bottom: 18px; }
  .subline{ margin-top: 10px; margin-bottom: 14px; }
  .headline{ margin-top: 10px; }
  .lede{ margin-top: 12px; margin-bottom: 14px; }
  .panel{ margin-top: 16px; }
  .panel .fineprint{ margin-top: 12px; padding-top: 10px; }
}
.panel .fineprint{ line-height:1.4; }

/* v16 spacing polish */
.headline{ margin-bottom: 10px; }
.subline{ margin-top: 6px !important; margin-bottom: 14px !important; }
.lede{ margin-top: 0px !important; }
@media (max-width: 520px){
  .headline{ margin-bottom: 8px; }
  .subline{ margin-top: 4px !important; margin-bottom: 12px !important; }
}

/* v17 spacing between subline and lede */
.subline{ margin-bottom: 20px !important; }
.lede{ margin-top: 10px !important; line-height: 1.55; }
@media (max-width: 520px){
  .subline{ margin-bottom: 18px !important; }
  .lede{ margin-top: 10px !important; }
}