/* Design tokens — copied verbatim from the Knead app (static/app.css) so the
   waitlist reads as the same product. */
:root{
  --cream:#F6F1E7; --panel:#FDFBF5; --ink:#21302A; --ink-soft:#5C6B62;
  --euca:#2F6B4F; --euca-deep:#1E4A36; --terra:#C4703F; --terra-soft:#EAD9C9;
  --line:#E3DBCB; --rose:#B05A7A; --slate:#54749E; --grey:#9A9486;
  --card-sh:0 1px 2px rgba(33,48,42,.06),0 6px 18px -8px rgba(33,48,42,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}

/* Grain + soft radial wash — same treatment as the app's body background. */
body{
  font-family:'Karla',sans-serif;color:var(--ink);background:var(--cream);
  background-image:radial-gradient(ellipse 80% 60% at 70% -10%,rgba(47,107,79,.07),transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;
}

/* ---------------- hero ---------------- */
.hero{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center}
.brand{margin-bottom:18px}
.wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:52px;letter-spacing:-.5px;color:var(--euca-deep);line-height:1}
.wordmark em{font-style:italic;color:var(--terra)}
.tagline{font-size:14px;color:var(--ink-soft);margin-top:6px}

.pitch{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:400px;margin-bottom:26px}

/* ---------------- signup card ---------------- */
.card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;box-shadow:var(--card-sh);text-align:left}
.f-label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.card-sub{font-size:13px;color:var(--grey);margin:5px 0 16px}

.field{display:block;margin-bottom:12px}
.field-label{display:block;font-size:12.5px;font-weight:700;color:var(--euca-deep);margin-bottom:5px}
.field input{width:100%;font-family:'Karla',sans-serif;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--grey)}
.field input:focus{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(47,107,79,.12)}
.field input:disabled{opacity:.6;cursor:not-allowed}

/* CTA — same terracotta pill as the app's .book button. */
.book{margin-top:6px;display:block;width:100%;font-family:'Karla',sans-serif;font-size:15px;font-weight:700;
  color:#FBF8F1;background:var(--terra);border:none;padding:12px 15px;border-radius:9px;cursor:pointer;
  transition:background .15s}
.book:hover{background:#A75A30}
.book:disabled{background:var(--grey);cursor:not-allowed}

/* status line — mirrors the app's .loc-status / .hint feel. */
.status{font-size:13px;line-height:1.45;margin-top:12px;min-height:16px;text-align:center;color:var(--ink-soft)}
.status.ok{color:var(--euca-deep);font-weight:700}
.status.err{color:#8A2E2E}

.foot{font-size:12px;color:var(--grey);margin-top:16px}

/* ---------------- QR page (/qr) ----------------
   QR sits directly on the cream body so its cream quiet-zone blends in. */
.qr-img{width:min(340px,82vw);height:auto;display:block;margin:6px auto 0}
.qr-caption{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--euca-deep);margin-top:16px}
.qr-url{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--terra);text-decoration:none}
.qr-url:hover{text-decoration:underline}

/* ---------------- socials page (/socials) ---------------- */
.hero.wide{max-width:720px}
.socials-head{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--euca-deep);margin-bottom:4px}
.socials-sub{font-size:14px;color:var(--ink-soft);margin-bottom:22px}
.socials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
.social{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.social-plat{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);margin-bottom:8px}
.social .qr-img{width:min(200px,44vw);margin:0}
.social-handle{font-size:12.5px;font-weight:700;color:var(--euca-deep);margin-top:8px}
.social:hover .social-handle{text-decoration:underline}

@media (max-width:560px){
  .socials-grid{grid-template-columns:1fr;gap:26px;max-width:300px;margin:0 auto}
  .social .qr-img{width:min(240px,68vw)}
}

@media (max-width:480px){
  .wordmark{font-size:44px}
  .card{padding:18px}
}

/* ================================================================
   HOMEPAGE (body.home) — brand-forward landing.
   Scoped so /qr and /socials keep the centered one-screen layout.
   ================================================================ */
body.home{display:block;min-height:100vh;padding:0;overflow-x:hidden}

/* ---------------- nav ---------------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1120px;margin:0 auto;padding:22px 28px 0}
.nav-mark{font-family:'Fraunces',serif;font-weight:700;font-size:26px;letter-spacing:-.5px;
  color:var(--euca-deep);text-decoration:none}
.nav-mark em{font-style:italic;color:var(--terra)}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:13.5px;font-weight:700;color:var(--ink-soft);text-decoration:none}
.nav-links a:hover{color:var(--euca-deep)}
.nav-cta{color:#FBF8F1!important;background:var(--terra);padding:8px 16px;border-radius:99px;
  transition:background .15s}
.nav-cta:hover{background:#A75A30;color:#FBF8F1!important}

/* ---------------- hero ---------------- */
.hp-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;
  max-width:1120px;margin:0 auto;padding:64px 28px 84px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--euca-deep);background:#EAF2EC;
  padding:5px 13px;border-radius:99px;margin-bottom:20px}
.display{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(40px,5.6vw,68px);
  line-height:1.04;letter-spacing:-1.5px;color:var(--euca-deep)}
.display em{font-style:italic;color:var(--terra)}
.lede{font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:480px;margin:22px 0 30px}
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-actions .book{margin-top:0;width:auto;display:inline-block;font-size:15px;
  padding:13px 26px;border-radius:99px;text-align:center}
.ghost{font-size:14px;font-weight:700;color:var(--euca-deep);text-decoration:none;
  border-bottom:2px solid var(--terra-soft);padding-bottom:2px;transition:border-color .15s}
.ghost:hover{border-color:var(--terra)}

/* staggered load reveal */
.r1,.r2,.r3,.r4{animation:rise .55s both}
.r2{animation-delay:.08s}.r3{animation-delay:.16s}.r4{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- hero art: floating slot cards ---------------- */
.hp-hero-art{position:relative;height:430px;animation:rise .6s .2s both}
.slot-card{position:absolute;width:min(320px,86%);background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;box-shadow:var(--card-sh)}
.sc1{top:26px;right:8%;transform:rotate(-2.2deg);z-index:3;animation:bob 7s ease-in-out infinite}
.sc2{top:186px;right:22%;transform:rotate(1.6deg);z-index:2;animation:bob 8.5s .6s ease-in-out infinite}
.sc3{top:322px;right:2%;transform:rotate(-1deg);z-index:1;animation:bob 9.5s 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.slot-card .top{display:flex;align-items:baseline;gap:9px}
.t-when{font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:var(--euca-deep);letter-spacing:-.3px}
.t-day{font-size:11px;font-weight:700;color:var(--terra);text-transform:uppercase;letter-spacing:.08em}
.t-km{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-soft);background:var(--cream);
  padding:2px 9px;border-radius:99px}
.t-clinic{font-size:13.5px;font-weight:700;margin-top:6px;color:var(--ink)}
.t-disc{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--euca-deep);
  background:#EAF2EC;padding:1px 7px;border-radius:99px;white-space:nowrap;vertical-align:middle}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.opt{font-size:11.5px;font-weight:700;color:var(--euca-deep);background:#EAF2EC;
  padding:3px 9px;border-radius:7px}
.opt small{font-weight:600;color:var(--ink-soft)}
.t-fresh{margin-top:9px;font-size:11px;font-weight:700;color:var(--euca)}
.pin-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--terra);
  border:2.5px solid #FBF8F1;box-shadow:0 1px 6px rgba(33,48,42,.3)}
.pin-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(196,112,63,.35);animation:ping 2.6s ease-out infinite}
.pd1{top:8px;left:12%}.pd2{top:150px;left:2%}.pd3{top:392px;left:30%}
.pd2::after{animation-delay:.9s}.pd3::after{animation-delay:1.7s}
@keyframes ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.8);opacity:0}}

/* ---------------- discipline strip ---------------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);overflow:hidden;padding:13px 0}
.strip-track{display:flex;align-items:center;gap:26px;width:max-content;
  animation:slide 36s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.strip-chip{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}
.strip-dot{color:var(--terra);font-weight:700}

/* ---------------- how it works (deep band) ---------------- */
.how{background:var(--euca-deep);color:#FBF8F1;
  background-image:radial-gradient(ellipse 70% 90% at 85% 10%,rgba(47,107,79,.55),transparent)}
.how-inner{max-width:1120px;margin:0 auto;padding:84px 28px 72px}
.how-head{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,3.8vw,46px);
  line-height:1.1;letter-spacing:-1px;max-width:620px}
.how-head em{font-style:italic;color:var(--terra-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:52px}
.step-num{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:44px;
  color:var(--terra-soft);line-height:1}
.step h3{font-family:'Karla',sans-serif;font-size:16.5px;font-weight:700;margin:12px 0 8px}
.step p{font-size:14px;line-height:1.65;color:#CBD9CB}
.how-foot{margin-top:52px;font-size:13.5px;font-weight:700;color:var(--terra-soft);
  border-top:1px dashed rgba(251,248,241,.25);padding-top:22px}

/* ---------------- join section ---------------- */
.join{background:var(--cream)}
.join-inner{max-width:1120px;margin:0 auto;padding:84px 28px 92px;
  display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.join-head{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(34px,4.4vw,54px);
  letter-spacing:-1px;line-height:1.05;color:var(--euca-deep)}
.join-head em{font-style:italic;color:var(--terra)}
.join-sub{font-size:15.5px;line-height:1.65;color:var(--ink-soft);max-width:420px;margin-top:18px}
.join-count{margin-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terra)}
.join .card{width:100%}

/* ---------------- footer ---------------- */
.foot-bar{border-top:1px solid var(--line);background:var(--panel)}
.foot-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:1120px;margin:0 auto;padding:26px 28px}
.foot-mark{font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--euca-deep)}
.foot-mark em{font-style:italic;color:var(--terra)}
.foot-tag{font-size:12px;color:var(--grey)}
.foot-links{margin-left:auto;display:flex;gap:18px}
.foot-links a{font-size:12.5px;font-weight:700;color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--euca-deep)}
.foot-fine{font-size:12px;color:var(--grey)}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  .r1,.r2,.r3,.r4,.hp-hero-art,.slot-card,.pin-dot::after,.strip-track{animation:none}
}

/* ---------------- homepage responsive ---------------- */
@media (max-width:920px){
  .hp-hero{grid-template-columns:1fr;padding:44px 24px 56px;gap:44px}
  .lede{max-width:none}
  .hp-hero-art{height:400px;max-width:440px;margin:0 auto;width:100%}
  .steps{grid-template-columns:1fr;gap:30px}
  .join-inner{grid-template-columns:1fr;gap:40px;padding:60px 24px 68px}
  .join .card{max-width:440px}
  .how-inner{padding:60px 24px 52px}
}
@media (max-width:520px){
  .nav{padding:18px 20px 0}
  .nav-links a:not(.nav-cta){display:none}
  .hp-hero-art{height:360px}
  .slot-card{padding:12px 13px}
  .sc2{right:auto;left:0}
  .foot-bar{padding:22px 20px}
}