/* ==========================================================================
   Vera & Vine — brand site
   Palette + type locked to the pitch deck. Motion: calm, long, restrained.
   Performance rule: animate ONLY transform + opacity (compositor-friendly).
   ========================================================================== */

:root{
  /* brand */
  --ink:      #04160D;
  --emerald:  #0A2A1B;
  --canopy:   #16482F;
  --fern:     #2F7D4F;
  --dew:      #8FBF86;
  --gold:     #D8B45F;
  --cream:    #F3EFE2;
  --morning:  #F0F6DC;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* motion — long + soft = premium */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur:       1100ms;

  --maxw: 1180px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* NOTE: deliberately NOT `scroll-behavior:smooth`. CSS smooth-scroll silently
   swallowed anchor jumps here (including on-load #hash), leaving the nav dead.
   Smooth scrolling is done in main.js instead, where it is verifiable. */
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* `clip` (not `hidden`) — `hidden` makes body a scroll container and silently
     breaks in-page anchor scrolling / scrollIntoView. */
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:var(--ink); padding:.75rem 1.25rem; border-radius:0 0 6px 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:760px; }
.wrap--split{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .wrap--split{ grid-template-columns:1.15fr .85fr; align-items:start; } }
.center{ text-align:center; }
.narrow{ max-width:62ch; margin-inline:auto; }

.section{ padding-block:clamp(5rem,12vw,10rem); position:relative; }
/* keep the sticky nav from covering a heading when jumping to an anchor */
[id]{ scroll-margin-top:5.5rem; }

/* ---------- type ---------- */
.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,1.4rem + 2.8vw,3.5rem);
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 1.25rem;
  color:var(--morning);
}
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin:0 0 1rem;
}
.lede{
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  line-height:1.7; color:rgba(243,239,226,.86); margin:0 0 1.25rem;
}
p{ margin:0 0 1.15rem; color:rgba(243,239,226,.74); }
em{ font-style:italic; }

.divider{ margin:1.75rem auto 3rem; opacity:.5; width:120px; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(243,239,226,.28);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.95rem 1.9rem;
  font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.02em;
  text-decoration:none; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  position:relative; overflow:hidden;
  transition:transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out),
             background-color 400ms var(--ease-soft), border-color 400ms var(--ease-soft);
  will-change:transform;
}
.btn--gold{ --btn-bg:var(--gold); --btn-fg:var(--ink); --btn-bd:var(--gold); font-weight:600; }
.btn--ghost:hover{ --btn-bd:rgba(216,180,95,.75); }
.btn--lg{ padding:1.1rem 2.4rem; font-size:1rem; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 34px -12px rgba(216,180,95,.5); }
.btn:active{ transform:translateY(-1px); }
/* sheen */
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform 900ms var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(4,22,13,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(243,239,226,.08);
  transform:translateY(-100%);
  transition:transform 700ms var(--ease-out);
}
.nav.is-visible{ transform:translateY(0); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.nav__mark{ width:34px; height:34px; }
.nav__word{
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.06em; color:var(--morning);
}
.nav__word em{ color:var(--gold); font-style:normal; }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2.5vw,2rem); }
.nav__links a{
  font-size:.87rem; text-decoration:none; color:rgba(243,239,226,.78);
  position:relative; padding-block:.25rem;
  transition:color 300ms var(--ease-soft);
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform 450ms var(--ease-out);
}
.nav__links a:hover{ color:var(--morning); }
.nav__links a:not(.nav__cta):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  border:1px solid rgba(216,180,95,.5); border-radius:999px; padding:.45rem 1.1rem !important;
  color:var(--gold) !important;
  transition:background-color 350ms var(--ease-soft), transform 350ms var(--ease-out);
}
.nav__cta:hover{ background:rgba(216,180,95,.14); transform:translateY(-1px); }
@media (max-width:640px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ==========================================================================
   HERO — "the clearing": dark canopy, light centre
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:7rem var(--pad) 5rem;
  text-align:center; overflow:hidden;
  background:var(--ink);
}
/* dense canopy edges */
.hero__canopy{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(47,125,79,.22), transparent 60%),
    radial-gradient(90% 70% at 0% 0%,   rgba(10,42,27,.85), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(10,42,27,.85), transparent 55%),
    linear-gradient(180deg, #04160D 0%, #071c11 45%, #04160D 100%);
}
/* the clearing itself — a soft breathing light */
.hero__glow{
  position:absolute; left:50%; top:46%;
  width:min(105vw,1000px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(216,180,95,.20) 0%,
    rgba(143,191,134,.11) 32%,
    transparent 66%);
  filter:blur(12px);
  animation:breathe 11s var(--ease-soft) infinite;
  will-change:transform;
}
@keyframes breathe{
  0%,100%{ opacity:.82; }
  50%    { opacity:1; }
}
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 60% at 50% 45%, transparent 40%, rgba(4,22,13,.75) 100%);
}
.hero__inner{ position:relative; z-index:2; max-width:940px; }

.hero__emblem{ width:clamp(64px,9vw,88px); margin:0 auto 2rem; }
.hero__eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.5rem; font-weight:500;
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,1.5rem + 6.6vw,7rem);
  line-height:1.02; letter-spacing:-.03em;
  margin:0 0 1.75rem; color:var(--morning);
}
/* line-mask reveal */
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  animation:lineUp 1300ms var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.22s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.36s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero__sub{
  font-size:clamp(1.02rem,.98rem + .5vw,1.3rem);
  max-width:56ch; margin:0 auto 2.5rem; color:rgba(243,239,226,.82);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.hero__scroll{
  position:absolute; left:50%; bottom:2.25rem; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.hero__scrollline{
  width:1px; height:52px; background:linear-gradient(var(--gold),transparent);
  transform-origin:top; animation:drip 2.6s var(--ease-soft) infinite;
}
@keyframes drip{ 0%,100%{ transform:scaleY(.35); opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }
.hero__scrolltext{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(243,239,226,.5);
}

/* ==========================================================================
   STRIP
   ========================================================================== */
.strip{
  background:var(--canopy);
  border-block:1px solid rgba(243,239,226,.09);
  padding:1.15rem var(--pad);
  text-align:center;
}
.strip__text{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,.95rem + .4vw,1.35rem); color:var(--morning);
}

/* ==========================================================================
   STORY
   ========================================================================== */
.section--story{ background:var(--ink); }
.story__quote{ margin:0; padding-left:clamp(1rem,2vw,1.75rem); position:relative; }
.quote__rule{
  position:absolute; left:0; top:.4rem; bottom:.4rem; width:2px;
  background:linear-gradient(var(--gold),rgba(216,180,95,0));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1200ms var(--ease-out) 200ms;
}
.is-in .quote__rule{ transform:scaleY(1); }
.story__quote blockquote{
  margin:0 0 1rem; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,1.05rem + .7vw,1.6rem); line-height:1.5; color:var(--morning);
}
.story__quote figcaption{ font-size:.85rem; color:var(--gold); letter-spacing:.04em; }

/* ==========================================================================
   THE OIL (product)
   ========================================================================== */
.section--oil{ background:linear-gradient(180deg,var(--ink),var(--emerald)); }
@media (min-width:900px){
  .wrap--split-rev{ grid-template-columns:.8fr 1.2fr; align-items:center; }
}
.bottle{ margin:0; text-align:center; }
.bottle__svg{
  width:min(58vw,250px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  animation:float 7s var(--ease-soft) infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.bottle figcaption{
  margin-top:1.5rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,239,226,.5);
}
.does{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; gap:.7rem;
}
.does li{
  position:relative; padding-left:1.9rem;
  color:rgba(243,239,226,.9); font-size:1rem;
}
.does li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(216,180,95,.14);
}
.note{
  font-size:.9rem; color:rgba(243,239,226,.6);
  border-left:2px solid rgba(216,180,95,.45); padding-left:1rem; margin-top:1.5rem;
}

/* ==========================================================================
   HOW YOU USE IT
   ========================================================================== */
.section--how{ background:var(--emerald); }
.halves{
  margin-top:3rem; display:grid; gap:1.25rem; grid-template-columns:1fr;
}
@media (min-width:800px){ .halves{ grid-template-columns:1fr 1fr; } }
.half{
  border:1px solid rgba(243,239,226,.13); border-radius:16px;
  padding:clamp(1.75rem,3.5vw,2.75rem);
  background:rgba(4,22,13,.35);
  transition:transform 600ms var(--ease-out), border-color 600ms var(--ease-soft);
}
.half:hover{ transform:translateY(-5px); border-color:rgba(216,180,95,.4); }
.half__num{
  font-family:var(--serif); font-size:.85rem; color:var(--gold);
  letter-spacing:.18em; opacity:.7;
}
.half h3{
  font-family:var(--serif); font-weight:400; font-size:1.65rem;
  color:var(--morning); margin:.45rem 0 .8rem;
}
.half p{ margin:0; font-size:.98rem; }

/* ==========================================================================
   HONEST EVIDENCE
   ========================================================================== */
.section--honest{ background:linear-gradient(180deg,var(--emerald),var(--ink)); }
.ledger{
  margin:3rem 0 2.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr;
}
@media (min-width:820px){ .ledger{ grid-template-columns:1fr 1fr; } }
.ledger__col{
  border-radius:16px; padding:clamp(1.6rem,3.5vw,2.5rem);
  border:1px solid rgba(243,239,226,.14);
  background:rgba(243,239,226,.025);
}
.ledger__col--yes{ border-color:rgba(143,191,134,.42); }
.ledger__col--no { border-color:rgba(216,180,95,.34); }
.ledger__col h3{
  font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 1.1rem;
}
.ledger__col--yes h3{ color:var(--dew); }
.ledger__col--no  h3{ color:var(--gold); }
.ledger__col ul{ list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.65rem; }
.ledger__col li{
  position:relative; padding-left:1.75rem; font-size:.97rem; color:rgba(243,239,226,.86);
}
.ledger__col--yes li::before{
  content:"✓"; position:absolute; left:0; top:-.05em; color:var(--dew); font-size:1rem;
}
.ledger__col--no li::before{
  content:"—"; position:absolute; left:0; top:-.05em; color:var(--gold); opacity:.8;
}
.ledger__foot{
  margin:0; font-size:.85rem; font-style:italic; color:rgba(243,239,226,.55);
  border-top:1px solid rgba(243,239,226,.1); padding-top:1rem;
}
.honest__close{
  max-width:64ch; margin-inline:auto; text-align:center;
  font-size:1.02rem; color:rgba(243,239,226,.8);
}
.honest__close strong{
  display:block; margin-top:1rem;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem); color:var(--gold);
}

/* ==========================================================================
   PILLARS
   ========================================================================== */
.section--pillars{ background:linear-gradient(180deg,var(--ink),var(--emerald)); }
.cards{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  border:1px solid rgba(243,239,226,.13);
  border-radius:14px;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(243,239,226,.025);
  transition:transform 600ms var(--ease-out), border-color 600ms var(--ease-soft),
             background-color 600ms var(--ease-soft);
  will-change:transform;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,180,95,.45);
  background:rgba(216,180,95,.05);
}
.card h3{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  color:var(--gold); margin:0 0 .65rem;
}
.card p{ margin:0; font-size:.98rem; }

/* ==========================================================================
   BOTANICALS
   ========================================================================== */
.section--botanicals{ background:var(--emerald); }
.botanicals{
  list-style:none; margin:3.5rem 0 0; padding:0;
  display:grid; gap:1px; background:rgba(243,239,226,.11);
  border:1px solid rgba(243,239,226,.11); border-radius:14px; overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .botanicals{ grid-template-columns:repeat(2,1fr); } }
.bot{
  background:var(--emerald);
  padding:clamp(1.6rem,3vw,2.5rem);
  position:relative;
  transition:background-color 600ms var(--ease-soft);
}
.bot:hover{ background:#0c3221; }
.bot__idx{
  font-family:var(--serif); font-size:.8rem; color:var(--gold); opacity:.65;
  letter-spacing:.15em;
}
.bot h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,1.2rem + .7vw,1.9rem);
  color:var(--morning); margin:.5rem 0 .15rem;
}
.bot__latin{
  font-style:italic; font-size:.9rem; color:var(--dew); margin:0 0 .9rem; opacity:.85;
}
.bot p:last-child{ margin:0; font-size:.97rem; }

/* ==========================================================================
   RITUAL / CONSULTATION
   ========================================================================== */
.section--ritual{
  background:linear-gradient(180deg,var(--emerald),var(--ink));
  position:relative; overflow:hidden;
}
.ritual__light{
  position:absolute; left:50%; top:20%;
  width:min(120vw,900px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(216,180,95,.13),transparent 62%);
  pointer-events:none; will-change:transform;
}
.section--ritual .wrap{ position:relative; z-index:2; }

.ritual__panel{
  margin:2.5rem auto 2rem;
  padding:clamp(1.75rem,4vw,3rem);
  border:1px solid rgba(216,180,95,.32);
  border-radius:18px;
  background:rgba(4,22,13,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-align:left;
}
.ritual__panel p{ font-size:1rem; }
.ritual__panel strong{ color:var(--morning); font-weight:500; }

.price{
  display:flex; align-items:baseline; justify-content:center; gap:.9rem;
  flex-wrap:wrap; margin:1.75rem 0 1.5rem; text-align:center;
}
.price__now{
  font-family:var(--serif); font-size:clamp(2.4rem,2rem + 2vw,3.4rem);
  color:var(--gold); line-height:1;
}
.price__note{ font-size:.92rem; color:rgba(243,239,226,.8); }
.price__note b{ color:var(--gold); letter-spacing:.06em; }

.ritual__panel .btn{ display:flex; width:100%; }
.microcopy{
  font-size:.85rem; color:rgba(243,239,226,.55); margin:.9rem 0 0; text-align:center;
}
/* prose links inside FAQ answers and panel microcopy — same gold treatment as
   .legal a on the privacy page, so in-copy links read as one system site-wide.
   Gold on this section's emerald/ink grounds is 5.3:1+ (QA §2). */
.qa__a a, .microcopy a{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(216,180,95,.4);
}
.qa__a a:hover, .microcopy a:hover{ border-bottom-color:var(--gold); }
.ritual__expect{ max-width:58ch; margin-inline:auto; }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.section--founder{ background:var(--emerald); }
@media (min-width:900px){
  .wrap--founder{ grid-template-columns:.72fr 1.28fr; align-items:center; }
}
.founder__portrait{ margin:0; text-align:center; }
.portrait{
  position:relative; width:min(62vw,270px); aspect-ratio:1; margin:0 auto 1.5rem;
  border-radius:50%; overflow:hidden;
  border:1px solid rgba(216,180,95,.42);
  background:radial-gradient(circle at 50% 35%, #17402a, #071c11 70%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
/* stand-in until a real headshot lands at assets/founder.jpg */
.portrait__mark{ display:none; }
.portrait--fallback .portrait__mark{
  display:grid; place-items:center; position:absolute; inset:0;
}
.portrait--fallback .portrait__mark img{ width:44%; height:auto; object-fit:contain; opacity:.9; }
.founder__portrait figcaption{
  font-size:.88rem; color:rgba(243,239,226,.62); line-height:1.6;
}
.founder__portrait figcaption strong{
  display:block; font-family:var(--serif); font-weight:400; font-size:1.15rem;
  color:var(--morning); margin-bottom:.15rem;
}
.founder__sign{
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  color:var(--gold); margin-top:1.5rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.section--faq{ background:linear-gradient(180deg,var(--emerald),var(--ink)); }
.faq{ margin-top:3rem; border-top:1px solid rgba(243,239,226,.13); }
.qa{ border-bottom:1px solid rgba(243,239,226,.13); }
.qa summary{
  list-style:none; cursor:pointer;
  padding:1.35rem 2.75rem 1.35rem 0;
  position:relative;
  font-family:var(--serif); font-size:clamp(1.05rem,1rem + .35vw,1.28rem);
  color:var(--morning); line-height:1.4;
  transition:color 300ms var(--ease-soft);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--gold); }
/* + / − indicator */
.qa summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:14px; height:2px;
  background:var(--gold); transform:translateY(-50%);
}
.qa summary::before{
  content:""; position:absolute; right:.35rem; top:50%; width:14px; height:2px;
  background:var(--gold); transform:translateY(-50%) rotate(90deg);
  transition:transform 400ms var(--ease-out), opacity 400ms var(--ease-soft);
}
.qa[open] summary::before{ transform:translateY(-50%) rotate(0deg); opacity:0; }
.qa__a{ padding:0 2.75rem 1.5rem 0; }
.qa__a p{ margin:0; font-size:.98rem; color:rgba(243,239,226,.76); }
.qa__a strong{ color:var(--morning); font-weight:500; }
/* gentle open animation (respects reduced motion via the global block) */
.qa[open] .qa__a{ animation:qaOpen 500ms var(--ease-out); }
@keyframes qaOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   WAITLIST
   ========================================================================== */
.section--waitlist{ background:var(--ink); }
.waitlist__mark{ width:60px; margin:0 auto 1.75rem; opacity:.9; }
.section--waitlist .btn{ margin-top:1rem; }
/* Muted via colour, not opacity: opacity:.7 multiplied .microcopy's own .55 alpha
   down to an effective .385 = 3.29:1 on ink, under the 4.5:1 floor. .50 = 4.74:1
   and still reads as secondary. No consumer on the page today — this class is
   waiting for the Kit form's fallback note, so it is fixed before it is used. */
.microcopy--muted{ color:rgba(243,239,226,.50); }

/* Kit inline form (site/web/index.html "KIT-FORM-SLOT"): styles the embedded
   <form class="waitlist__form"> to match the site rather than Kit's default look.
   Kit forms are a plain <form> + <input type=email> + <button> — this covers that
   shape without fighting anything Kit injects beyond it. */
.waitlist__form{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  max-width:32rem; margin:1.75rem auto 0;
}
.waitlist__form input[type="email"]{
  flex:1 1 14rem; padding:.85rem 1.1rem; border-radius:999px;
  border:1px solid rgba(243,239,226,.25); background:rgba(243,239,226,.06);
  color:var(--cream); font:inherit;
}
.waitlist__form input[type="email"]::placeholder{ color:rgba(243,239,226,.45); }
.waitlist__form button{
  flex:0 0 auto; /* inherits .btn/.btn--gold sizing if Kit's button carries that class too */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:#030f09; border-top:1px solid rgba(243,239,226,.09);
  padding-block:3rem;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.footer__brand{ display:flex; align-items:center; gap:.9rem; }
.footer__brand img{ opacity:.75; flex:none; }
.footer__legal{ margin:0; font-size:.82rem; color:rgba(243,239,226,.45); font-style:italic; }

/* legal bar — company details, privacy, medical disclaimer */
.footer__legalbar{
  margin-top:2.25rem; padding-top:1.5rem;
  border-top:1px solid rgba(243,239,226,.09);
  display:grid; gap:.6rem;
}
/* .55, not .40: company number, registered office and the medical disclaimer
   are legally required text and were the hardest thing on the page to read
   (3.44:1). This clears 4.5:1. */
.footer__legalbar p{ margin:0; font-size:.76rem; color:rgba(243,239,226,.55); line-height:1.65; }
.footer__legalbar a{ color:rgba(243,239,226,.6); text-decoration:none; }
.footer__legalbar a:hover{ color:var(--gold); }
.footer__legalbar span[aria-hidden]{ opacity:.35; margin-inline:.4rem; }
.footer__note{ max-width:70ch; font-style:italic; }
/* the one remaining placeholder (the inert Terms span) — visibly unfinished on
   purpose. The old .todo spans (company number, registered office) were filled
   on 5 Aug 2026 and that class has no user left. */
.todo-link{
  color:rgba(216,180,95,.75) !important;
  border-bottom:1px dashed rgba(216,180,95,.5);
}

/* ==========================================================================
   LEGAL PAGES (privacy.html, and terms.html when it exists)
   Plain prose on the brand's ink ground. Deliberately JS-free: these pages
   load no main.js and use no .reveal, so nothing on a legally required page
   can be hidden by a script that failed to arrive.
   ========================================================================== */
.nav--static{ position:static; transform:none; background:rgba(4,22,13,.9); }
.section--legal{ background:linear-gradient(180deg,var(--ink),var(--emerald)); }
.legal{ max-width:70ch; }
.legal h2{
  font-family:var(--serif); font-weight:400; line-height:1.2;
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  color:var(--morning);
  margin:3rem 0 .9rem;
}
.legal h2:first-of-type{ margin-top:2rem; }
.legal p{ margin:0 0 1.1rem; }
.legal ul{ margin:0 0 1.1rem; padding:0; list-style:none; display:grid; gap:.65rem; }
.legal li{ position:relative; padding-left:1.5rem; }
.legal li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:7px; height:1px; background:var(--gold); opacity:.8;
}
.legal strong{ color:var(--morning); font-weight:500; }
.legal a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(216,180,95,.4); }
.legal a:hover{ color:var(--morning); border-bottom-color:var(--morning); }
.legal__meta{ font-size:.88rem; color:rgba(243,239,226,.6); }
.legal__hr{ border:0; border-top:1px solid rgba(243,239,226,.13); margin:2.5rem 0; }
/* Standing note: the honest counterpart to the ledger, for the things that are
   still open. Marked, not hidden. */
.legal__note{
  border:1px solid rgba(216,180,95,.34); border-radius:14px;
  padding:1.25rem 1.4rem; margin:0 0 1.1rem;
  background:rgba(216,180,95,.05);
  font-size:.95rem;
}

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; gap:.6rem; padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(4,22,13,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(216,180,95,.28);
  transform:translateY(110%);
  /* visibility, not just transform: while the bar is off-screen it is also
     aria-hidden, and a translated-but-visible element still takes keyboard
     focus — a screen-reader user could tab into a bar that is not there. */
  visibility:hidden;
  transition:transform 550ms var(--ease-out), visibility 0s linear 550ms;
}
.stickybar.is-visible{ transform:translateY(0); visibility:visible; transition:transform 550ms var(--ease-out), visibility 0s; }
@media (max-width:760px){ .stickybar{ display:flex; } }
.stickybar a{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:48px;                      /* accessible tap target */
  border-radius:999px; text-decoration:none;
  font-size:.9rem; font-weight:500; letter-spacing:.01em;
}
.stickybar__ghost{
  flex:0 0 38%; color:var(--cream); border:1px solid rgba(243,239,226,.3);
}
.stickybar__go{ background:var(--gold); color:var(--ink); font-weight:600; }
.footer__links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer__links a{
  font-size:.85rem; color:rgba(243,239,226,.6); text-decoration:none;
  transition:color 300ms var(--ease-soft);
}
.footer__links a:hover{ color:var(--gold); }

/* ==========================================================================
   REVEAL — the scroll entrance system (transform + opacity only)
   ========================================================================== */
/* Scoped to html.js: if JS never runs, nothing is hidden and the page still
   works fully (all copy + all CTAs visible), just without the animation. */
html.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change:transform,opacity;
}
/* html.js prefix is load-bearing: the hide rule above is (0,2,1) and a bare
   .reveal.is-in is only (0,2,0), so without the prefix the reveal could NEVER
   win — every element stayed at opacity:0 with JS running (bug present since
   the first commit; only no-JS/static renders ever looked right). (0,3,1). */
html.js .reveal.is-in{ opacity:1; transform:none; will-change:auto; }
/* stagger */
.reveal[data-delay="1"]{ transition-delay:.08s }
.reveal[data-delay="2"]{ transition-delay:.16s }
.reveal[data-delay="3"]{ transition-delay:.24s }
.reveal[data-delay="4"]{ transition-delay:.32s }
.reveal[data-delay="5"]{ transition-delay:.40s }
.reveal[data-delay="6"]{ transition-delay:.48s }
.reveal[data-delay="8"]{ transition-delay:.64s }

/* ==========================================================================
   REDUCED MOTION — replace motion, keep meaning
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .quote__rule{ transform:scaleY(1) !important; }
  .nav{ transform:translateY(0) !important; }
  .btn::after{ display:none; }
}