/* ───────────────────────────────────────────────────────
   Knowher — hormonal intelligence platform
   Palette (from brand):
     deep    #005780   butter  #F9ECC6   cream #FBF7EE
     tomato  #CE4927   olive   #AFA238   wine  #321126
     lavender #D4C7E0
   Type: Instrument Serif display · DM Sans body ·
         Anonymous Pro mono (matches live site's stand-ins)
   ─────────────────────────────────────────────────────── */

:root{
  --deep:#005780;
  --butter:#F9ECC6;
  --cream:#FBF7EE;
  --tomato:#CE4927;
  --olive:#AFA238;
  --wine:#321126;
  --lavender:#D4C7E0;
  --ink:#170B02;
  --paper:#FBF7EE;

  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --sans:'DM Sans',ui-sans-serif,-apple-system,'Segoe UI',sans-serif;
  --mono:'Anonymous Pro',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--wine);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  font-feature-settings:"ss01","kern";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic;font-family:var(--serif);font-weight:400}

/* ── Reveal animation (only when JS confirms) ─────────── */
.js-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-ready .reveal.is-in{opacity:1;transform:none}

/* ── NAV ──────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  background:rgba(251,247,238,.85);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(50,17,38,.08);
}
.nav-mark{
  font-family:var(--serif);font-size:26px;letter-spacing:-.01em;color:var(--tomato);
}
.nav-links{display:flex;gap:28px;font-size:14px;letter-spacing:.01em}
.nav-links a{color:var(--wine);opacity:.75;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-cta{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--wine);color:var(--butter);padding:11px 18px;border-radius:999px;
  transition:background .25s,transform .25s;
}
.nav-cta:hover{background:var(--tomato);transform:translateY(-1px)}
@media (max-width:820px){
  .nav-links{display:none}
  .nav{padding:14px 20px}
}

/* ── HERO ─────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:120px 32px 100px;
  color:var(--butter);
  overflow:hidden;
  background:var(--wine);
}
.hero{
  background:
    radial-gradient(ellipse 90% 60% at 50% 20%, rgba(206,73,39,.28) 0%, rgba(206,73,39,0) 60%),
    radial-gradient(ellipse 70% 50% at 20% 90%, rgba(212,199,224,.14) 0%, rgba(212,199,224,0) 60%),
    linear-gradient(180deg, #3B1530 0%, var(--wine) 60%, #1E0A18 100%);
}
.hero-orb{
  position:absolute;top:-8%;left:50%;transform:translateX(-50%);
  width:min(70vw,900px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(206,73,39,.45) 0%, rgba(206,73,39,.15) 40%, rgba(206,73,39,0) 70%);
  filter:blur(60px);
  z-index:0;
  animation:orb-drift 18s ease-in-out infinite alternate;
}
@keyframes orb-drift{
  0%{transform:translate(-50%,0) scale(1)}
  100%{transform:translate(-46%,3%) scale(1.08)}
}
.hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95  0 0 0 0 .88  0 0 0 0 .77  0 0 0 .12 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
.hero-inner{
  position:relative;z-index:2;text-align:center;max-width:900px;
}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lavender);opacity:.9;
}
.hero-h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(52px,9.4vw,132px);
  line-height:.98;letter-spacing:-.02em;
  margin:22px 0 26px;color:var(--butter);
}
.hero-h1 em{color:var(--tomato);font-style:italic}
.hero-sub{
  font-size:clamp(16px,1.35vw,20px);
  color:var(--cream);opacity:.88;max-width:560px;margin:0 auto 34px;
}
.hero-form{
  display:flex;gap:8px;max-width:520px;margin:0 auto;
  background:rgba(251,247,238,.08);
  border:1px solid rgba(251,247,238,.25);
  padding:6px;border-radius:999px;
  backdrop-filter:blur(10px);
}
.hero-form input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--butter);font:inherit;font-size:15px;padding:12px 18px;
}
.hero-form input::placeholder{color:rgba(251,247,238,.6)}
.hero-form button{
  background:var(--tomato);color:var(--butter);border:0;
  padding:12px 22px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14px;letter-spacing:.02em;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}
.hero-form button:hover{background:#E15B36;transform:translateY(-1px)}
.hero-note{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lavender);opacity:.7;margin-top:22px;
}
.hero-note.center{text-align:center}

.hero-marquee{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  overflow:hidden;padding:16px 0;
  border-top:1px solid rgba(251,247,238,.14);
  background:rgba(23,10,18,.5);backdrop-filter:blur(6px);
}

/* ── BRAND FILM SECTION ──────────────────────── */
.film{
  background:var(--wine);
  padding:0;overflow:hidden;position:relative;
}
.film-video{
  display:block;width:100%;height:auto;
}
.marquee-track{
  display:flex;gap:36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lavender);white-space:nowrap;
  animation:marquee 42s linear infinite;
}
.marquee-track span{flex-shrink:0}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (max-width:600px){
  .hero-form{flex-direction:column;border-radius:22px;padding:10px}
  .hero-form button{width:100%}
}

/* ── SECTION KICKER ───────────────────────────────────── */
.section-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tomato);margin-bottom:24px;
}
.section-kicker.light{color:var(--butter)}

/* ── MANIFESTO ────────────────────────────────────────── */
.manifesto{
  padding:140px 32px 120px;background:var(--paper);
}
.manifesto-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:200px 1fr;gap:60px;
}
.manifesto-body h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5.2vw,72px);line-height:1.05;letter-spacing:-.015em;
  color:var(--wine);margin-bottom:32px;
}
.lede{
  font-size:19px;line-height:1.6;color:var(--wine);opacity:.82;
  max-width:640px;margin-bottom:48px;
}
.stats{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  border-top:1px solid rgba(50,17,38,.15);padding-top:32px;
}
.stat-n{
  display:block;font-family:var(--serif);font-size:clamp(36px,4.5vw,60px);
  color:var(--tomato);line-height:1;margin-bottom:6px;
}
.stat-l{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wine);opacity:.7;line-height:1.4;
}
@media (max-width:820px){
  .manifesto-grid{grid-template-columns:1fr;gap:20px}
  .stats{grid-template-columns:1fr;gap:24px}
}

/* ── OFFERING ─────────────────────────────────────────── */
.offering{
  background:var(--wine);color:var(--butter);
  padding:140px 32px;position:relative;
}
.offering-head{max-width:1200px;margin:0 auto 72px}
.offering-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5vw,64px);line-height:1.08;letter-spacing:-.015em;
  color:var(--butter);max-width:900px;
}
.offering-head em{color:var(--lavender)}

.offering-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.card{
  background:rgba(251,236,198,.06);
  border:1px solid rgba(251,236,198,.14);
  border-radius:20px;padding:32px 28px 36px;
  transition:background .3s,transform .3s,border-color .3s;
}
.card:hover{background:rgba(251,236,198,.1);border-color:rgba(251,236,198,.3);transform:translateY(-4px)}
.card-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--tomato);margin-bottom:36px;
}
.card h3{
  font-family:var(--serif);font-weight:400;
  font-size:26px;line-height:1.08;letter-spacing:-.01em;
  color:var(--butter);margin-bottom:14px;
}
.card p{
  font-size:15px;line-height:1.55;color:var(--cream);opacity:.78;
}
.card-wide{
  grid-column:span 4;background:rgba(206,73,39,.14);border-color:rgba(206,73,39,.4);
}
.card-wide h3{font-size:32px;max-width:520px;color:var(--butter)}
.card-wide p{font-size:17px;max-width:820px;opacity:.9}

@media (max-width:1000px){
  .offering-grid{grid-template-columns:repeat(2,1fr)}
  .card-wide{grid-column:span 2}
}
@media (max-width:600px){
  .offering-grid{grid-template-columns:1fr}
  .card-wide{grid-column:auto}
}

/* ── COMMUNITY ────────────────────────────────────────── */
.community{
  background:var(--lavender);color:var(--wine);
  padding:140px 32px;
}
.community-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
}
.community-copy h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.6vw,60px);line-height:1.08;letter-spacing:-.015em;
  color:var(--wine);margin-bottom:28px;
}
.community-copy em{color:var(--tomato)}
.pillars{list-style:none;margin-top:28px;border-top:1px solid rgba(50,17,38,.2)}
.pillars li{
  padding:16px 0;border-bottom:1px solid rgba(50,17,38,.15);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wine);
}
.community-photo{position:relative}
.community-photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;
  filter:saturate(.95) contrast(1.02);
}
.community-photo figcaption{
  font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;
  color:var(--wine);margin-top:20px;
}
.community-photo figcaption small{
  display:block;font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tomato);margin-top:8px;
}
@media (max-width:900px){
  .community-inner{grid-template-columns:1fr;gap:48px}
}

/* ── HOW IT WORKS ─────────────────────────────────────── */
.how{
  background:var(--deep);color:var(--butter);
  padding:140px 32px;
}
.how .section-kicker{color:var(--butter);opacity:.9;text-align:center;max-width:1200px;margin:0 auto 20px}
.how-h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.8vw,60px);line-height:1.1;letter-spacing:-.015em;
  color:var(--butter);text-align:center;max-width:900px;margin:0 auto 80px;
}
.how-h2 em{color:var(--lavender)}
.how-steps{
  max-width:1200px;margin:0 auto;
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  counter-reset:step;
}
.how-steps li{
  background:rgba(251,236,198,.06);
  border-top:2px solid var(--tomato);
  padding:32px 24px;
  border-radius:0 0 12px 12px;
}
.step-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lavender);
}
.how-steps h4{
  font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;
  color:var(--butter);margin:14px 0 12px;
}
.how-steps p{font-size:15px;color:var(--cream);opacity:.82;line-height:1.55}
@media (max-width:900px){
  .how-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .how-steps{grid-template-columns:1fr}
}

/* ── ROADMAP ──────────────────────────────────────────── */
.roadmap{background:var(--butter);padding:140px 32px}
.roadmap-inner{max-width:1200px;margin:0 auto}
.roadmap h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.8vw,60px);line-height:1.08;letter-spacing:-.015em;
  color:var(--wine);margin-bottom:20px;
}
.roadmap .lede{max-width:780px;margin-bottom:56px}
.roadmap-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.rc{
  background:var(--cream);
  border:1px solid rgba(50,17,38,.12);
  padding:32px 28px;border-radius:16px;
  transition:transform .3s,border-color .3s;
}
.rc:hover{transform:translateY(-3px);border-color:rgba(50,17,38,.25)}
.rc-tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tomato);
  border:1px solid var(--tomato);padding:5px 10px;border-radius:999px;margin-bottom:20px;
}
.rc h5{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;
  color:var(--wine);margin-bottom:12px;
}
.rc p{font-size:15px;color:var(--wine);opacity:.72;line-height:1.5}
.rc-next{background:var(--wine);border-color:var(--wine)}
.rc-next h5,.rc-next p{color:var(--butter)}
.rc-next p{opacity:.85}
.rc-next .rc-tag{color:var(--butter);border-color:var(--tomato);background:var(--tomato)}
@media (max-width:900px){.roadmap-cards{grid-template-columns:1fr}}

/* ── FOUNDER ──────────────────────────────────────────── */
.founder{
  background:var(--paper);padding:140px 32px;
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;
}
.founder-photo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;border-radius:8px;
  filter:sepia(.06) saturate(1.02);
}
.founder-copy blockquote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(26px,3.2vw,40px);line-height:1.25;letter-spacing:-.005em;
  color:var(--wine);margin:20px 0 24px;
  border-left:0;
}
.signature{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tomato);
}
@media (max-width:900px){
  .founder{grid-template-columns:1fr;gap:48px}
}

/* ── TRUST ────────────────────────────────────────────── */
.trust{
  background:var(--wine);color:var(--butter);padding:80px 32px;
}
.trust-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
}
.trust h6{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tomato);margin-bottom:14px;
}
.trust p{font-size:15px;color:var(--cream);opacity:.85;line-height:1.5}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}

/* ── FAQ ──────────────────────────────────────────────── */
.faq{background:var(--paper);padding:140px 32px}
.faq-inner{max-width:900px;margin:0 auto}
.faq h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,56px);
  line-height:1.1;letter-spacing:-.015em;color:var(--wine);margin-bottom:56px;
}
.faq-list details{
  border-bottom:1px solid rgba(50,17,38,.15);
  padding:24px 0;
}
.faq-list summary{
  font-family:var(--serif);font-size:22px;color:var(--wine);
  cursor:pointer;list-style:none;position:relative;padding-right:40px;
  transition:color .2s;
}
.faq-list summary:hover{color:var(--tomato)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:24px;font-weight:300;
  color:var(--tomato);transition:transform .3s;
}
.faq-list details[open] summary::after{content:'−'}
.faq-list p{
  margin-top:14px;font-size:16px;line-height:1.6;color:var(--wine);opacity:.78;
  max-width:720px;
}

/* ── FINAL CTA ────────────────────────────────────────── */
.final{
  background:var(--tomato);color:var(--butter);
  padding:160px 32px;text-align:center;
}
.final-inner{max-width:720px;margin:0 auto}
.final h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,6.8vw,96px);line-height:1;letter-spacing:-.02em;
  color:var(--butter);margin-bottom:24px;
}
.final h2 em{color:var(--wine)}
.final p{font-size:18px;color:var(--cream);opacity:.9;margin-bottom:32px}
.final-form{
  display:flex;gap:8px;max-width:520px;margin:0 auto;
  background:rgba(50,17,38,.15);border:1px solid rgba(251,236,198,.35);
  padding:6px;border-radius:999px;
}
.final-form input{
  flex:1;background:transparent;border:0;outline:0;color:var(--butter);
  font:inherit;font-size:15px;padding:12px 18px;
}
.final-form input::placeholder{color:rgba(251,236,198,.7)}
.final-form button{
  background:var(--wine);color:var(--butter);border:0;
  padding:12px 22px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14px;transition:background .2s,transform .2s;
  white-space:nowrap;
}
.final-form button:hover{background:var(--ink);transform:translateY(-1px)}
@media (max-width:600px){
  .final-form{flex-direction:column;border-radius:22px;padding:10px}
  .final-form button{width:100%}
}

/* ── CLOSER WORDMARK ──────────────────────────────────── */
.closer{
  background:var(--wine);
  overflow:hidden;padding:60px 0 24px;
  display:flex;justify-content:center;align-items:flex-end;
}
.closer-word{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(90px,22vw,320px);line-height:.85;letter-spacing:-.03em;
  color:var(--tomato);
  padding-bottom:0;
}

/* ── FOOTER ───────────────────────────────────────────── */
.foot{
  background:var(--wine);color:var(--cream);
  padding:40px 32px 48px;border-top:1px solid rgba(251,236,198,.14);
}
.foot-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
}
.foot-mark{
  font-family:var(--serif);font-size:28px;color:var(--tomato);
}
.foot-nav{display:flex;gap:24px;justify-content:center;font-size:14px}
.foot-nav a{color:var(--cream);opacity:.7;transition:opacity .2s}
.foot-nav a:hover{opacity:1;color:var(--butter)}
.foot-legal{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lavender);opacity:.7;text-align:right;line-height:1.7;
}
@media (max-width:820px){
  .foot-inner{grid-template-columns:1fr;text-align:center;gap:20px}
  .foot-legal{text-align:center}
  .foot-nav{flex-wrap:wrap}
}

/* ── Prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}