:root{
  --ink:#222;
  --paper:#ffffff;
  --cardWrap:#f2f0ec;
  --card:#ffffff;
  --edge:rgba(0,0,0,.10);
  --edgeSoft:rgba(0,0,0,.08);
  --shadowLg:0 30px 80px rgba(0,0,0,.12);
  --shadowSm:0 1px 6px rgba(0,0,0,.06);
  --radiusLg:26px;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

.page-card{
  max-width:1200px;
  margin:28px auto;
  background:var(--cardWrap);
  border-radius:var(--radiusLg);
  box-shadow:var(--shadowLg);
  padding:48px 22px 80px;
}

.hero{padding:20px 8px 0;text-align:center;}
.logo{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800; /* Inter ExtraBold */
  font-size: clamp(72px, 12vw, 140px);
  margin: 0;
}
.domain{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600; /* Inter SemiBold */
  opacity: .6;
  margin: 8px 0 12px;
  font-size: clamp(16px, 2.2vw, 20px);
}
.tagline{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700; /* Inter Bold */
  margin: .25rem 0 18px;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.2;
}
.btn{display:inline-block;background:#000;color:#fff;padding:12px 22px;border-radius:14px;text-decoration:none;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.18);}

.divider{border:0;border-top:1px solid var(--edgeSoft);margin:28px auto 26px;max-width:1020px}
.how-title,.who-title{font-weight:700;font-size:clamp(22px,3.2vw,28px);margin:10px 0 18px;text-align:center;}
.steps{display:grid;gap:16px;max-width:1020px;margin:0 auto;}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);}}

.card,.who-card{background:var(--card);border:1px solid var(--edgeSoft);border-radius:var(--radius);box-shadow:var(--shadowSm);padding:16px;text-align:left;}
.step h3,.who-card h3{font-size:18px;margin:0 0 6px;font-weight:700;}
.step p,.who-card p{margin:0 0 6px;}

.hiw-toggle{background:none;border:none;padding:0;margin-top:8px;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer;text-underline-offset:3px;}
.hiw-toggle:hover{opacity:.85;}

.hiw-extra{overflow:hidden;transition:max-height .35s ease,opacity .25s ease,transform .25s ease;max-height:640px;opacity:1;transform:translateY(0);margin-top:8px;background:#fff;border:1px solid var(--edgeSoft);border-radius:10px;padding:12px;}
.hiw-extra.is-collapsed{max-height:0;opacity:0;transform:translateY(-4px);padding-top:0;padding-bottom:0;border-width:0;margin-top:0;}
@media(prefers-reduced-motion:reduce){.hiw-extra{transition:none;}}

.who{margin-top:44px;text-align:center;}
.who-blurb{opacity:.75;margin:0 0 16px;}
.who-grid{display:grid;gap:12px;max-width:1020px;margin:0 auto;}
@media(min-width:900px){.who-grid{grid-template-columns:repeat(4,1fr);}}

.site-foot{text-align:center;margin-top:36px;opacity:.7}
.handle{margin-top:6px;font-weight:700}

/* Animated waitlist form */
.cta{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.cta .field-wrapper{max-width:0;overflow:hidden;transition:max-width .4s ease, margin .4s ease;}
.cta.expanded .field-wrapper{max-width:320px;margin-right:10px;}
.cta input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--edgeSoft, rgba(0,0,0,.08));background:#fff;min-width:0;}
.cta .btn{padding:12px 22px;}


/* === Logo animation === */
.logo{display:inline-flex;gap:.04em;line-height:1;letter-spacing:.01em}
.logo span{
  display:inline-block;
  opacity:0;
  transform: translateY(12px) scale(.96) rotate(.4deg);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}
body.logo-animate .logo span{ animation: frnkLogoIn .7s cubic-bezier(.2,.7,.3,1) forwards; }
body.logo-animate .logo span:nth-child(1){ animation-delay: .00s; }
body.logo-animate .logo span:nth-child(2){ animation-delay: .07s; }
body.logo-animate .logo span:nth-child(3){ animation-delay: .14s; }
body.logo-animate .logo span:nth-child(4){ animation-delay: .21s; }

@keyframes frnkLogoIn{
  0%   { opacity:0; transform: translateY(14px) scale(.94) rotate(.6deg); filter: blur(3px); }
  70%  { opacity:1; transform: translateY(-2px) scale(1.03) rotate(0deg); filter: blur(0); }
  100% { opacity:1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0); }
}

/* Subtle hover flourish without breaking layout */
.logo:hover span{ transform: translateY(-1px) scale(1.02); transition: transform .18s ease; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo span{ opacity:1; transform:none; filter:none; animation:none !important; }
}