:root{
  /* color */
  --cream:#FCF9F5; --plum:#5A1A0B; --rust:#B15538; --brick:#7F2F2B; --sand:#E2C6AC; --olive:#2F3423;

  /* type families: --display is the headline face; the logo wordmark stays Gloock */
  --display:'DM Serif Display', Georgia, serif; --display-weight:400; --display-track:-0.005em; --ds:1;
  --logo:'Gloock', Georgia, serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;

  /* type scale: every size on the site comes from here */
  --fs-display:clamp(48px,6.2vw,92px);   /* hero, join headline */
  --fs-h2:clamp(36px,3.75vw,54px);       /* section headings */
  --fs-h3:clamp(23px,1.9vw,27px);        /* serif sub-heads (Why, FAQ) */
  --fs-num:clamp(48px,4.2vw,60px);       /* step numbers */
  --fs-lede:clamp(18px,1.4vw,20px);      /* intro paragraphs */
  --fs-title:19px;                       /* sans sub-heads (steps) */
  --fs-body:17px;                        /* all running text */
  --fs-ui:16px;                          /* nav, buttons, inputs, footer links */
  --fs-small:14px;                       /* labels, kickers, notes, legal */

  /* spacing */
  --gutter:clamp(20px,5.5vw,80px);
  --section:clamp(64px,6.5vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--plum);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--plum)} a:hover{color:var(--brick)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter);max-width:1600px;margin:0 auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;background:var(--plum);color:var(--cream);padding:10px 14px;z-index:10}

/* one rule for every display heading */
.hero h1,.join h2,.band h2,.providers h2,.h2,.doc h1,.why-grid h3,.faq-list h3,.doc h2,.steps .num{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track)}
.kicker{font-size:var(--fs-small);font-weight:600;line-height:1.4}

/* header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:24px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand svg{width:34px;height:34px;flex-shrink:0}
.brand span{font-family:var(--logo);font-size:32px;line-height:1}
.nav{display:flex;align-items:center;gap:32px;font-size:var(--fs-ui);font-weight:500}
.nav a{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:4px;border:none;font:600 var(--fs-ui)/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-plum{background:var(--plum);color:var(--cream)} .btn-plum:hover{background:var(--brick);color:var(--cream)}
.btn-rust{background:var(--rust);color:var(--cream)} .btn-rust:hover{background:#98452b;color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--brick)} .btn-cream:hover{background:var(--sand);color:var(--brick)}
.btn-outline{background:transparent;color:var(--sand);border:1.5px solid var(--sand)} .btn-outline:hover{background:var(--sand);color:var(--olive)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center;padding-top:16px;padding-bottom:var(--section)}
.hero h1{font-size:calc(var(--fs-display)*var(--ds));line-height:1;letter-spacing:calc(var(--display-track) - .015em)}
.hero .lede{font-size:var(--fs-lede);line-height:1.55;max-width:560px;margin-top:28px}
.hero .waitlist{margin-top:clamp(40px,5.2vw,112px)}
.hero-art{position:relative;width:100%;max-width:640px;aspect-ratio:1;justify-self:end}
.ring{position:absolute;inset:0;border:2px solid currentColor;border-radius:50%}
.hero-art img{position:absolute;inset:7.33%;width:85.33%;height:85.33%;border-radius:50%;object-fit:cover;object-position:50% 34%;filter:sepia(.35) saturate(.85)}

/* waitlist form */
.waitlist{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.fields{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-small);font-weight:500}
.field input{height:52px;padding:0 16px;font:var(--fs-ui) var(--sans);color:inherit;background:transparent;border:1.5px solid currentColor;border-radius:4px}
.field input:focus{outline:2px solid var(--rust);outline-offset:2px}
.field.email input{width:260px} .field.zip input{width:120px}
.waitlist .btn{height:52px}
.waitlist .note{font-size:var(--fs-small)}
.waitlist .status{font-size:var(--fs-ui);font-weight:600}
.waitlist .status:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.waitlist.done .fields{display:none}

/* price band */
.band{background:var(--plum);color:var(--sand)}
.band .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;padding-top:var(--section);padding-bottom:var(--section);align-items:start}
.band h2{font-size:calc(var(--fs-h2)*var(--ds));line-height:1.05}
.band .copy{display:flex;flex-direction:column;gap:20px;max-width:640px;padding-top:6px;font-size:var(--fs-lede);line-height:1.6}

/* shared section heading */
.h2{font-size:calc(var(--fs-h2)*var(--ds));line-height:1.05}

/* how */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center;padding-top:var(--section);padding-bottom:var(--section)}
.how img{width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:70% 40%;border-radius:4px;filter:sepia(.15)}
.steps{list-style:none;margin:44px 0 0;padding:0;max-width:620px;display:flex;flex-direction:column;gap:40px}
.steps li{display:grid;grid-template-columns:72px 1fr;column-gap:20px;align-items:center}
.steps .num{font-size:calc(var(--fs-num)*var(--ds));line-height:1;color:var(--rust);text-align:center}
.steps h3{font-size:var(--fs-title);font-weight:600;line-height:1.3;margin-bottom:6px;font-family:var(--sans)}
.steps p{font-size:var(--fs-body)}

/* why */
.why{padding-bottom:var(--section)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;row-gap:48px;margin-top:52px}
.why-grid div{padding-top:24px;border-top:1.5px solid var(--plum);min-width:0}
.why-grid h3{font-size:calc(var(--fs-h3)*var(--ds));line-height:1.2;margin-bottom:10px}
.why-grid p{font-size:var(--fs-body)}

/* providers */
.providers{background:var(--olive);color:var(--sand);display:grid;grid-template-columns:1fr 1fr}
.providers img{width:100%;height:100%;min-height:480px;object-fit:cover;object-position:75% 50%}
.providers .copy{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:var(--section) var(--gutter) var(--section) 80px;max-width:680px}
.providers h2{font-size:calc(var(--fs-h2)*var(--ds));line-height:1.05}
.providers .copy p{font-size:var(--fs-lede);line-height:1.6}
.providers .copy .kicker{font-weight:600}
.providers .btn{align-self:flex-start;margin-top:8px}

/* faq */
.faq{display:grid;grid-template-columns:1fr 2fr;gap:80px;padding-top:var(--section);padding-bottom:var(--section)}
.faq-list{display:flex;flex-direction:column;gap:36px;max-width:780px}
.faq-list h3{font-size:calc(var(--fs-h3)*var(--ds));line-height:1.25;margin-bottom:8px}
.faq-list p{font-size:var(--fs-body)}

/* join */
.join{background:var(--brick);color:var(--cream)}
.join .wrap{display:flex;justify-content:space-between;align-items:center;gap:80px;padding-top:var(--section);padding-bottom:var(--section)}
.join .copy{max-width:680px}
.join h2{font-size:calc(var(--fs-display)*var(--ds));line-height:1}
.join .lede{font-size:var(--fs-lede);line-height:1.6;margin-top:24px}
.join .field input{color:var(--cream)}
.join-art{position:relative;width:min(460px,34vw);aspect-ratio:1;flex-shrink:0;color:var(--sand);max-width:100%}
.join-art img{position:absolute;inset:6.52%;width:86.96%;height:86.96%;border-radius:50%;object-fit:cover}

/* footer */
.site-footer{background:var(--plum);color:var(--sand)}
.site-footer .wrap{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:32px}
.site-footer .top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer .brand svg{width:30px;height:30px} .site-footer .brand span{font-size:28px}
.site-footer nav{display:flex;gap:28px;flex-wrap:wrap;font-size:var(--fs-ui)}
.site-footer a{color:var(--sand)} .site-footer a:hover{color:var(--cream)}
.site-footer .legal{font-size:var(--fs-small);max-width:860px}

/* legal pages */
.doc{max-width:760px;padding-top:32px;padding-bottom:var(--section)}
.doc h1{font-size:calc(var(--fs-h2)*var(--ds));line-height:1.05;margin-bottom:10px}
.doc .updated{font-size:var(--fs-small);margin-bottom:36px}
.doc h2{font-size:calc(var(--fs-h3)*var(--ds));margin:36px 0 10px}
.doc p,.doc li{font-size:var(--fs-body)}
.doc p+p{margin-top:14px}
.doc ul{padding-left:22px;margin:12px 0}

/* desktop: keep the Why sub-heads on one line; hero title pinned near the top of the circle, form pinned near the bottom */
@media (min-width:1101px){
  .why-grid h3{white-space:nowrap}
  .hero{align-items:stretch}
  .hero > div:first-child{display:flex;flex-direction:column;padding-top:clamp(48px,4vw,80px);padding-bottom:clamp(12px,1.2vw,24px)}
  .hero .waitlist{margin-top:auto;padding-top:40px}
  .hero-art{align-self:center}
}

/* tablet */
@media (max-width:1100px){
  .nav a:not(.btn){display:none}
  .hero{grid-template-columns:1fr;gap:44px}
  .hero-art{width:min(440px,100%);order:-1;justify-self:center}
  .band .wrap,.faq{grid-template-columns:1fr;gap:32px}
  .how{grid-template-columns:1fr;gap:48px}
  .how img{aspect-ratio:4/3}
  .providers{grid-template-columns:1fr}
  .providers img{min-height:0;height:auto;aspect-ratio:16/10}
  .providers .copy{padding:64px var(--gutter);max-width:none}
  .join .wrap{flex-direction:column-reverse;align-items:flex-start;gap:44px}
  .join-art{width:min(340px,80%);align-self:center}
}
/* phone */
@media (max-width:640px){
  :root{--fs-body:16px;--fs-ui:16px}
  .site-header{padding-top:18px;padding-bottom:18px}
  .brand svg{width:30px;height:30px} .brand span{font-size:28px}
  .nav .btn{min-height:44px;padding:0 16px;font-size:15px}
  .hero{padding-top:4px;gap:32px}
  .hero-art{width:min(300px,78vw)}
  .fields{flex-direction:column;align-items:stretch}
  .field.email input,.field.zip input{width:100%}
  .waitlist .btn{width:100%}
  .why-grid{grid-template-columns:1fr;row-gap:36px}
  .steps{gap:32px}
  .steps li{grid-template-columns:48px 1fr;column-gap:14px;align-items:start}
  .providers .btn{white-space:normal;text-align:center;padding:14px 20px;line-height:1.3}
}