@font-face{
  font-family:Hanken Grotesk;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/hanken-grotesk.woff2) format("woff2");
}

:root{
  --ink:#0c142b;
  --ink2:#4a5364;
  --mute:#616d7b;
  --bg:#fff;
  --soft:#f4faf7;
  --line:#dfe8e4;
  --brand:#008644;
  --brand-d:#006e37;
  --brand-t:#e7faef;
  --brand-l:#bcebd1;
  --card-line:#bfe3cf;
  --sh:0 3px 7px #162f2410,0 14px 32px -22px #162f2445;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font:17px/1.5 Hanken Grotesk,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
img,svg{display:block}
a{color:var(--brand-d)}

.skip{
  position:absolute;
  left:-999px;
  top:8px;
  z-index:40;
  background:#fff;
  color:var(--ink);
  padding:8px 12px;
  border-radius:8px;
}
.skip:focus{left:8px}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.top{
  position:sticky;
  top:0;
  z-index:20;
  background:#fffffff2;
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
  backdrop-filter:blur(8px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;min-height:82px}
.brand{
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
}
.brand b{
  color:var(--ink);
  font-family:Hanken Grotesk,system-ui,sans-serif;
  font-size:2.1rem;
  font-weight:900;
  letter-spacing:-.055em;
  white-space:nowrap;
  line-height:1;
}
.brand b span{color:var(--brand)}

main{flex:1}
.hero{padding:64px 0 28px;text-align:center}
.hero .wrap{max-width:820px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  margin:0 0 18px;
  padding:5px 14px;
  background:var(--brand-t);
  color:var(--brand-d);
  border-radius:99px;
  letter-spacing:.025em;
  font-size:.8rem;
  font-weight:800;
}
h1,h2{
  letter-spacing:-.025em;
  margin:0 0 .5em;
  font-family:Hanken Grotesk,system-ui,sans-serif;
  font-weight:800;
  line-height:1.08;
}
h1{
  margin:0 auto 18px;
  font-size:clamp(2.15rem,6vw,3.5rem);
  line-height:1.04;
  letter-spacing:-.03em;
  max-width:16ch;
}
.h1-green{color:var(--brand)}
.lede{
  margin:0 auto 28px;
  max-width:42ch;
  color:var(--ink2);
  font-size:clamp(1.05rem,2vw,1.2rem);
  line-height:1.5;
  font-weight:500;
}

form{max-width:560px;margin:0 auto;text-align:left}
.fields{display:flex;gap:10px}
input[type=email]{
  min-width:0;
  flex:1;
  height:72px;
  min-height:72px;
  padding:0 20px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font:650 18px/1.2 Hanken Grotesk,system-ui,sans-serif;
}
input[type=email]::placeholder{color:var(--mute);font-weight:550}
input[type=email]:focus,button:focus-visible,a:focus-visible,.skip:focus{
  outline:3px solid var(--brand-l);
  outline-offset:3px;
}
input[type=email]:focus{border-color:var(--brand)}
.btn{
  appearance:none;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  border:0;
  border-radius:14px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:72px;
  min-height:72px;
  padding:0 28px;
  font:800 18px Hanken Grotesk,system-ui,sans-serif;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s,transform .12s;
}
.btn:hover{background:var(--brand-d);color:#fff;transform:translateY(-1px)}
.btn:disabled{opacity:.65;cursor:wait;transform:none}
.consent{
  margin:14px 0 0;
  color:var(--mute);
  font-size:.88rem;
  line-height:1.5;
  text-align:center;
}
#status{
  margin:10px 0 0;
  min-height:1.4em;
  color:#b3392a;
  font-size:.95rem;
  font-weight:650;
  text-align:center;
}
.sr-only,.trap{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.benefits{padding:20px 0 64px}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  align-items:stretch;
}
.card{
  background:#fff;
  border:1.5px solid var(--card-line);
  border-radius:16px;
  padding:16px 18px 18px;
  text-align:left;
}
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.card-h .em{font-size:1.5rem;line-height:1;flex:none}
.card h2{margin:0;font-size:1rem;line-height:1.25;letter-spacing:-.02em}
.card p{margin:0;color:#3d4a66;font-size:.92rem;line-height:1.45}

.thanks{padding:72px 0 80px;text-align:center}
.thanks .wrap{max-width:720px}
.thanks h1{max-width:18ch}
.back{
  display:inline-block;
  margin-top:8px;
  color:var(--brand-d);
  font-weight:800;
  text-underline-offset:4px;
}

.foot{
  background:#e7faef;
  color:var(--ink);
  border-top:1px solid #cde8d8;
  padding:28px 0;
  margin-top:auto;
  text-align:center;
}
.foot p{
  margin:0;
  font-weight:800;
  letter-spacing:-.02em;
}

@media (max-width:860px){
  .wrap{padding-left:16px;padding-right:16px}
  .top-in{min-height:68px}
  .brand b{font-size:1.75rem}
  .hero{padding:40px 0 20px}
  .cards{grid-template-columns:1fr;gap:10px}
}
@media (max-width:560px){
  .fields{flex-direction:column}
  .btn{width:100%}
  h1{font-size:clamp(1.85rem,8.5vw,2.6rem);max-width:none}
  .lede{font-size:1.05rem}
}