/* ============================================================
   Roots With Radiance — “modern apothecary” design system
   Warm parchment ground, deep botanical green ink, hibiscus
   accent, arched frames, editorial serif typography.
   All fonts are system stacks and all assets are local, so the
   site stays within the strict CSP (no external requests).
   ============================================================ */

:root {
  --header-h: 74px;
  --footer-h: 144px;
  --parchment: #f6f1e5;
  --paper: #fdfbf4;
  --ink: #22301f;
  --green: #1d4032;
  --green-deep: #0e281c;
  --hibiscus: #a8434c;
  --hibiscus-deep: #86343c;
  --gold: #9a7b33;
  --gold-soft: #cbb06a;
  --muted: #5d6a58;
  --hairline: rgba(29, 64, 50, .16);
  --hairline-soft: rgba(29, 64, 50, .1);
  --shadow: 0 24px 60px rgba(30, 43, 30, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--parchment);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* height:auto keeps images at their natural aspect ratio when max-width
   shrinks them (without it, HTML height attributes distort them on mobile). */
img { max-width: 100%; height: auto; display: block; }
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
a { color: inherit; }
button, input { font: inherit; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
button, summary, .button, .nav-cta { touch-action: manipulation; }

.sr-only, .skip-link:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed;
  z-index: 1000;
  top: 12px; left: 12px;
  padding: 10px 14px;
  color: white; background: var(--green);
  border-radius: 8px;
}

.shell { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }
/* Page-per-screen: every section fills the viewport under the sticky
   header, content vertically centered, with gentle scroll snapping. */
html { scroll-snap-type: y proximity; }
.section, .launch {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-content: center;
  scroll-snap-align: start;
  scroll-margin-top: var(--header-h);
}
.section { padding: 56px 0; }

/* ---- Type ---- */
h1, h2, h3, p, dl { margin-top: 0; }
h1, h2, h3, .display { font-family: var(--serif); font-weight: 500; line-height: 1.08; }
h2 { margin-bottom: 16px; color: var(--green); font-size: clamp(1.9rem, 4.4vh, 3.1rem); letter-spacing: -.02em; }
h3 { font-size: 1.3rem; color: var(--green); }
p { color: var(--muted); }
em, .accent-italic { font-style: italic; }
.eyebrow {
  margin: 0 0 18px;
  color: var(--hibiscus);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  margin-right: 12px;
  vertical-align: 4px;
  background: var(--gold);
}
.centered { max-width: 760px; margin: 0 auto clamp(26px, 4vh, 52px); text-align: center; }
.centered .eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  margin-left: 12px;
  vertical-align: 4px;
  background: var(--gold);
}

/* ---- Buttons & links ---- */
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: #fdfbf4;
  background: var(--green);
  box-shadow: 0 12px 26px rgba(20, 46, 34, .22);
}
.button-primary:hover { background: var(--green-deep); }
.button-light { color: var(--green-deep); background: var(--gold-soft); }
.button-light:hover { background: #d9c384; }
.text-link {
  display: inline-block;
  padding: 10px 2px;
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(154, 123, 51, .55);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-color: var(--hibiscus); }
.text-link span { color: var(--hibiscus); }

/* ---- Announcement bar ---- */
.announce {
  padding: 9px 16px;
  color: rgba(253, 251, 244, .92);
  background: var(--green-deep);
  font-size: .78rem;
  letter-spacing: .08em;
  text-align: center;
}
.announce a { color: var(--gold-soft); font-weight: 600; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(246, 241, 229, .9);
  border-bottom: 1px solid var(--hairline-soft);
  backdrop-filter: blur(16px);
}
.nav-wrap {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--green);
}
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span { font: 500 1.32rem/1.1 var(--serif); letter-spacing: .01em; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.site-nav a[aria-current="page"] {
  color: var(--hibiscus-deep);
  font-weight: 650;
  border-bottom: 2px solid var(--hibiscus);
}
.site-nav a {
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* Between the tablet menu (≤960px) and full width, the tabbed nav gets
   tight — compact it rather than let items wrap. */
@media (min-width: 961px) and (max-width: 1140px) {
  .brand span { font-size: 1.14rem; }
  .site-nav a { font-size: .8rem; }
  .nav-cta { padding: 9px 14px; }
}
.site-nav a:not(.nav-cta):hover { color: var(--hibiscus-deep); }
.nav-cta {
  padding: 11px 20px;
  color: #fdfbf4;
  background: var(--green);
  border-radius: 999px;
}
.nav-cta:hover { background: var(--green-deep); }

/* ---- Products dropdown ---- */
.nav-dropdown { position: relative; }
.nav-dropdown > a .caret { font-size: .72em; opacity: .7; }
.site-nav .is-current { color: var(--hibiscus-deep); }
.dropdown-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 190px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 60;
}
/* invisible bridge so the menu doesn't close crossing the gap */
.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(10px);
}
.dropdown-menu a { padding: 8px 12px; border-radius: 8px; }
.dropdown-menu a:hover { background: var(--parchment); }
.dropdown-menu a[aria-current="page"] {
  color: var(--hibiscus-deep);
  border-bottom: 0;
  background: rgba(168, 67, 76, .08);
}
.menu-button { display: none; }

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h) - 39px);
  display: grid;
  align-content: center;
  scroll-snap-align: start;
  /* The hero's snap rest position is the very top of the page, so the
     announce bar above the header stays visible on load. */
  scroll-margin-top: calc(var(--header-h) + 39px);
  padding: clamp(16px, 3vh, 36px) 0 clamp(20px, 3.6vh, 44px);
  background:
    radial-gradient(ellipse 70% 55% at 82% 8%, rgba(203, 176, 106, .28), transparent 65%),
    radial-gradient(ellipse 55% 45% at 4% 92%, rgba(168, 67, 76, .1), transparent 60%),
    linear-gradient(180deg, #f8f3e8 0%, #f6f1e5 100%);
}
/* Two pictures flank the centered copy: the logo on the left, the
   product photo on the right. The hero uses a wider shell than the
   text sections so the pictures can breathe on large screens. */
.hero .shell { width: min(1560px, calc(100% - 44px)); }
.hero-grid {
  display: grid;
  grid-template-columns: .88fr 1.3fr .88fr;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
}
/* The copy column starts high (align-self) so the text block sits above
   the vertical midpoint of the flanking pictures. */
.hero-copy { text-align: center; align-self: start; padding-top: 8px; }
.hero h1 {
  margin: 0 0 clamp(10px, 1.8vh, 20px);
  color: var(--green);
  font-size: clamp(1.8rem, 4vh, 2.8rem);
  letter-spacing: -.015em;
  line-height: 1.14;
}
.hero h1 em { color: var(--hibiscus); }
/* The philosophy block: four short paragraphs, scaled to the screen. */
.hero-philosophy {
  max-width: 620px;
  margin-inline: auto;
}
.hero-philosophy p {
  margin: 0 0 clamp(10px, 1.8vh, 18px);
  font-size: clamp(.92rem, 1.75vh, 1.08rem);
  line-height: 1.55;
}
.hero-philosophy strong { color: var(--green); font-weight: 600; }
.hero-tagline {
  margin: clamp(4px, 1vh, 12px) 0 clamp(10px, 1.8vh, 20px);
  color: var(--hibiscus-deep);
  font: italic 600 clamp(1.05rem, 2.1vh, 1.35rem)/1.4 var(--serif);
}

/* Product announcement + register lead-in above the form. */
.hero-coming {
  margin: 0 0 clamp(8px, 1.4vh, 16px);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.45;
}
.hero-coming em {
  display: block;
  color: var(--hibiscus);
  font-style: italic;
}
.hero-coming strong { color: var(--green); font-weight: 600; }
.hero-register {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
}

/* Sign-up lives in the hero: the page's one conversion goal needs no scroll. */
.hero-signup { max-width: 460px; margin-inline: auto; }
.hero-signup .input-row {
  border: 1px solid var(--hairline);
  box-shadow: 0 14px 34px rgba(29, 64, 50, .1);
}
.hero-signup .form-status { min-height: 22px; margin: 8px 0 0; color: var(--green); font-weight: 600; }
.hero-note { max-width: 440px; margin: 12px auto 0; font-size: .8rem; }
.hero-secondary { margin: 18px 0 0; }

.hero-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hero-marks li { display: flex; align-items: center; }
.hero-marks li + li::before {
  content: "✦";
  margin: 0 11px;
  color: var(--gold);
  font-size: .66rem;
}

/* The full logo (transparent) floats over the parchment with a soft
   radiant glow behind it — no frame needed. */
.hero-logo {
  position: relative;
  width: min(100%, 54vh);
  margin: 0;
  justify-self: center;
}
.hero-logo::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(203, 176, 106, .38), transparent 70%);
  filter: blur(4px);
}
.hero-logo img {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 18px 34px rgba(30, 43, 30, .16));
}
/* The product photo mirrors the logo on the other side, in the
   design's signature arched frame. */
.hero-product {
  width: min(100%, 48vh);
  margin: 0;
  justify-self: center;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  border: 1px solid rgba(154, 123, 51, .4);
  outline: 10px solid rgba(253, 251, 244, .75);
  box-shadow: var(--shadow);
}
.hero-product img { width: 100%; object-fit: cover; }

@media (max-height: 820px) {
  .hero-note { display: none; }
  .botanicals { padding-block: 14px; }
  .botanicals .centered { margin-bottom: 18px; }
}

/* ---- Botanicals (photo cards, 7 + 6) ---- */
.botanicals { background: var(--parchment); padding-block: clamp(20px, 3.4vh, 44px); }
.botanicals .centered { max-width: 900px; }
.botanicals .shell { width: min(1500px, calc(100% - 44px)); }
/* 14-track grid: 7 cards per row (each spans 2 tracks); the second
   row of 6 starts one track in, so it sits centered. */
.botanical-cards {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: clamp(8px, 1vw, 16px);
}
.bcard {
  grid-column: span 2;
  padding-bottom: clamp(8px, 1.3vh, 14px);
  background: var(--paper);
  border: 1px solid rgba(154, 123, 51, .3);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 10px 26px rgba(30, 43, 30, .07);
}
/* Center the second row of six by starting it one track in. */
.bcard:nth-child(8) { grid-column: 2 / span 2; }
.bcard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid rgba(154, 123, 51, .25);
}
.bcard h3 {
  position: relative;
  margin: clamp(6px, 1.1vh, 12px) 8px clamp(6px, 1vh, 10px);
  padding-bottom: clamp(5px, .9vh, 9px);
  font-size: clamp(.9rem, 1.75vh, 1.16rem);
  line-height: 1.15;
}
/* Tiny gold diamond divider under each name, like the reference art. */
.bcard h3::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 5px; height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
}
.bcard p {
  margin: 0 10px;
  font-size: clamp(.66rem, 1.28vh, .82rem);
  line-height: 1.4;
}
.botanicals-note {
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(.92rem, 1.8vh, 1.15rem);
  font-style: italic;
}
.botanicals-note::before, .botanicals-note::after {
  content: "—";
  color: var(--gold);
  margin: 0 12px;
}

/* ---- Ritual: photo steps ---- */
.ritual { background: var(--parchment); padding-block: clamp(24px, 3.6vh, 52px); }
.ritual .shell { width: min(1320px, calc(100% - 44px)); }
.ritual-heading { position: relative; }
/* The bowl of blend sits beside the heading on wide screens, echoing
   the reference art's top-right medallion. */
.ritual-bowl {
  position: absolute;
  top: -8px;
  right: min(-14vw, -170px);
  width: clamp(96px, 15vh, 150px);
  border-radius: 50%;
  border: 1px solid rgba(154, 123, 51, .4);
  outline: 7px solid rgba(253, 251, 244, .75);
  box-shadow: var(--shadow);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, clamp(240px, 42vh, 420px));
  justify-content: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.step {
  background: var(--paper);
  border: 1px solid rgba(154, 123, 51, .3);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  padding-bottom: clamp(12px, 2vh, 20px);
  box-shadow: 0 10px 26px rgba(30, 43, 30, .07);
}
.step-photo { position: relative; margin: 0 0 clamp(20px, 3vh, 28px); }
.step-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid rgba(154, 123, 51, .25);
}
/* Number badge straddling the photo's bottom edge. */
.step-number {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: grid;
  place-items: center;
  width: clamp(30px, 4.6vh, 40px);
  height: clamp(30px, 4.6vh, 40px);
  color: #fdfbf4;
  background: var(--green);
  border: 2px solid var(--paper);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.9vh, 1.2rem);
}
.step h3 {
  margin: 0 12px clamp(4px, .8vh, 8px);
  font-size: clamp(1.15rem, 2.3vh, 1.5rem);
}
.step p {
  margin: 0 clamp(12px, 1.6vw, 22px);
  font-size: clamp(.8rem, 1.55vh, .95rem);
  line-height: 1.5;
}
.step-time {
  margin-top: clamp(4px, .8vh, 8px) !important;
  color: var(--green);
  font-weight: 600;
}
.formula-note {
  max-width: 780px;
  margin: clamp(12px, 2vh, 28px) auto 0;
  padding: 15px 20px;
  color: #6c5a2c;
  background: rgba(203, 176, 106, .16);
  border: 1px solid rgba(154, 123, 51, .3);
  border-radius: 12px;
  font-size: .84rem;
  text-align: center;
}

/* ---- Founders (Mala & Ravi, side by side) ---- */
.story { background: var(--paper); padding-block: clamp(30px, 4.2vh, 56px); }
.founder-solo { max-width: min(1360px, calc(100% - 44px)); }
.founders-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
/* Hairline between the two bios on desktop. */
.founder-bio + .founder-bio {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(30px, 4vw, 64px);
}
.founder-bio h3 {
  position: relative;
  margin: 0 0 clamp(10px, 1.8vh, 18px);
  padding-bottom: clamp(8px, 1.2vh, 12px);
  font-size: clamp(1.35rem, 2.6vh, 1.7rem);
}
/* Small gold diamond under each name, echoing the botanical cards. */
.founder-bio h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
}
.founder-bio p {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  font-size: clamp(.88rem, 1.6vh, 1.02rem);
  line-height: 1.55;
}
.founder-bio .founder-lede {
  color: var(--green);
  font: 500 clamp(1.02rem, 1.9vh, 1.22rem)/1.5 var(--serif);
}
.founder-bio strong { color: var(--green); font-weight: 600; }
.founder-bio em { color: var(--hibiscus-deep); }
.founder-bio blockquote {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--gold);
  color: var(--green);
  font: italic clamp(1.02rem, 1.9vh, 1.25rem)/1.5 var(--serif);
}

/* ---- FAQ ---- */
.faq { background: var(--parchment); }
.faq .shell { width: min(1280px, calc(100% - 44px)); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 80px); }
.faq-intro { position: sticky; top: 120px; align-self: start; }
.accordion details { border-top: 1px solid var(--hairline); }
.accordion details:last-child { border-bottom: 1px solid var(--hairline); }
.accordion summary {
  position: relative;
  padding: clamp(22px, 3vh, 30px) 48px clamp(22px, 3vh, 30px) 0;
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(1.22rem, 2.3vh, 1.45rem);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 17px;
  color: var(--hibiscus);
  font-family: var(--sans);
  font-size: 1.7rem;
  font-weight: 300;
}
.accordion details[open] summary::after { content: "–"; }
.accordion details p { max-width: 660px; padding: 0 30px 22px 0; margin: 0; font-size: clamp(.95rem, 1.7vh, 1.05rem); }

/* ---- Launch CTA ---- */
.launch .shell { width: min(1320px, calc(100% - 44px)); }
.launch {
  min-height: calc(100svh - var(--header-h) - var(--footer-h, 140px));
  padding: 56px 0;
  background: var(--parchment);
}
.launch-card {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 7vh, 68px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(36px, 5vw, 70px);
  color: #fdfbf4;
  background:
    radial-gradient(circle at 88% 6%, rgba(203, 176, 106, .22), transparent 45%),
    radial-gradient(circle at 4% 98%, rgba(168, 67, 76, .25), transparent 40%),
    linear-gradient(140deg, #1d4032 0%, #0e281c 100%);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.launch-card::after {
  content: "";
  position: absolute;
  right: -110px; top: -130px;
  width: 300px; height: 300px;
  border: 1px solid rgba(203, 176, 106, .25);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(203, 176, 106, .05), 0 0 0 72px rgba(203, 176, 106, .03);
}
.launch-card > div, .launch-card form { position: relative; z-index: 1; }
.launch-card h2 { color: #fdfbf4; font-size: clamp(2.1rem, 4vw, 3.4rem); }
.launch-card p { color: rgba(253, 251, 244, .75); }
.launch-card .eyebrow { color: var(--gold-soft); }
.launch-card .eyebrow::before { background: var(--gold-soft); }

/* ---- Forms ---- */
.signup-form label { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 7px;
  background: white;
  border-radius: 999px;
}
.input-row input {
  min-width: 0;
  padding: 0 16px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}
.input-row input:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 999px; }
.form-status { min-height: 24px; margin: 10px 0 0; font-size: .88rem; }
.privacy-note { margin: 0; font-size: .72rem; color: rgba(253, 251, 244, .6); }

/* Honeypot field — visually removed but still submitted, so bots trip it. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Hidden POST target so submitting never navigates the page. */
.signup-frame { display: none; }

/* ---- Footer ---- */
.site-footer { padding: 46px 0; color: rgba(253, 251, 244, .8); background: var(--green-deep); }
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.footer-brand { color: #fdfbf4; }
.site-footer .brand img {
  padding: 4px;
  background: var(--parchment);
  border-radius: 50%;
}
.footer-grid p { margin: 0; color: rgba(253, 251, 244, .55); font-size: .82rem; }
.footer-grid > p:nth-child(2) { text-align: center; }
.footer-end { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: rgba(253, 251, 244, .85); text-decoration: none; font-size: .84rem; }
.footer-links a:hover { color: #fff; }

/* ---- Sub-pages: legal & contact ---- */
.subpage-header { background: var(--parchment); border-bottom: 1px solid var(--hairline-soft); }
.subpage-header .nav-wrap {
  min-height: 74px; display: flex; align-items: center; justify-content: space-between;
}
.back-link { color: var(--green); text-decoration: none; font-weight: 700; font-size: .9rem; }
.back-link:hover { color: var(--hibiscus-deep); }

.legal { padding: 60px 0 90px; }
.legal .shell { max-width: 760px; }
.legal h1 {
  font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3rem);
  letter-spacing: -.02em; color: var(--green); margin: 8px 0 6px;
}
.legal .updated { color: var(--muted); font-size: .85rem; margin: 0 0 36px; }
.legal .lead { font-size: 1.08rem; color: #3c473a; }
.legal h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--green); margin: 36px 0 10px; }
.legal h3 { font-size: 1.05rem; color: var(--green); margin: 22px 0 6px; }
.legal p, .legal li { color: #3c473a; font-size: 1rem; line-height: 1.72; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--hibiscus-deep); }
.legal .callout {
  margin: 26px 0; padding: 16px 18px; background: rgba(29, 64, 50, .08);
  border-radius: 14px; font-size: .95rem;
}
.contact-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin: 30px 0 6px;
}
.contact-card {
  background: var(--paper); border: 1px solid var(--hairline-soft);
  border-radius: 18px; padding: 22px 20px;
}
.contact-card h3 { margin: 0 0 6px; }
.contact-card p { margin: 0; }

/* ---- Motion ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  html { scroll-snap-type: none; }
  .hero, .section, .launch { min-height: 0; display: block; }
  .section { padding: 78px 0; }
  .menu-button {
    display: grid;
    width: 44px; height: 44px;
    place-content: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 50%;
  }
  .menu-button span:not(.sr-only) { width: 19px; height: 2px; background: var(--green); }
  .site-nav {
    position: absolute;
    top: 74px; left: 20px; right: 20px;
    padding: 20px;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
    background: var(--paper);
    border: 1px solid var(--hairline-soft);
    border-radius: 20px;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .site-nav .nav-cta { text-align: center; }
  /* In the phone menu the dropdown flattens into an indented group.
     Selectors match the desktop hover/focus rule's specificity so the
     translateX centering can't win and shift the links off-panel. */
  .nav-dropdown { display: flex; flex-direction: column; gap: 12px; }
  .nav-dropdown::after { display: none; }
  .nav-dropdown .dropdown-menu,
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    display: flex; flex-direction: column; gap: 12px;
    padding: 0 0 0 18px;
    background: transparent;
    border: 0; border-left: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
  }
  .dropdown-menu a { padding: 0; }

  .hero { padding: 40px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-logo { width: min(62vw, 300px); }
  .hero-product { width: min(78vw, 360px); }

  .faq-grid, .launch-card { grid-template-columns: 1fr; }
  .botanical-cards { grid-template-columns: repeat(2, 1fr); }
  .bcard { grid-column: auto; }
  .bcard:nth-child(8) { grid-column: auto; }
  .founders-duo { grid-template-columns: 1fr; }
  .founder-bio + .founder-bio { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 24px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .ritual-bowl { display: none; }
  .faq-intro { position: static; }

  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-end { align-items: center; }
  .footer-links { justify-content: center; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 32px, 1160px); }
  .section { padding: 64px 0; }
  .nav-wrap { min-height: 68px; }
  .brand span { font-size: 1.14rem; }
  .site-nav { top: 68px; left: 14px; right: 14px; }

  .hero { padding: 30px 0 52px; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .hero-signup .button { width: 100%; }
  .hero-marks { font-size: .74rem; }
  .hero-marks li + li::before { margin: 0 10px; }

  .launch-card { padding: 40px 24px; border-radius: 24px; }
  .input-row { grid-template-columns: 1fr; border-radius: 20px; }
  .input-row input { min-height: 48px; }
  .input-row .button { width: 100%; }
}

/* ============================================================
   Product pages (generated — see artifacts/README.md) and the
   homepage product cards.
   ============================================================ */

/* ---- Homepage: the three product cards ---- */
.products-section { background: var(--parchment); }
.product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.pcard {
  display: block;
  background: var(--paper);
  border: 1px solid rgba(154, 123, 51, .3);
  border-radius: 16px;
  padding: clamp(22px, 3vh, 34px);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(30, 43, 30, .07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(30, 43, 30, .12); }
.pcard h3 { margin: 0 0 4px; font-size: 1.4rem; }
.pcard .pcard-form {
  margin: 0 0 12px;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.pcard p { margin: 0 0 14px; }
.pcard .pcard-link { color: var(--hibiscus); font-weight: 600; }

/* ---- Product page: hero ---- */
.product-page .section {
  min-height: auto;
  padding: clamp(48px, 8vh, 88px) 0;
}
.product-subnav { gap: 22px; }
.phero-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.phero-media {
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  border: 1px solid rgba(154, 123, 51, .4);
  outline: 10px solid rgba(253, 251, 244, .75);
  box-shadow: var(--shadow);
}
.phero-media img { width: 100%; object-fit: cover; }
.phero-illust {
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vh, 64px) 0;
  min-height: 380px;
}
.phero-svg { width: min(56%, 220px); height: auto; }
.phero-copy h1 {
  margin-bottom: 8px;
  color: var(--green);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -.02em;
}
.phero-tagline {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--hibiscus);
}
.phero-form {
  margin: 0 0 18px;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.claim-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 12px; padding: 0; list-style: none;
}
.claim-chips li {
  padding: 5px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--paper);
  color: var(--green);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.net-line { margin: 0 0 24px; color: var(--muted); font-size: .9rem; }
.phero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.phero-cta em { font-family: var(--serif); font-size: 1.1rem; color: var(--hibiscus); }

/* ---- Product page: ritual steps (flexible count, photo optional) ---- */
.product-steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
}
.step-text { padding: clamp(22px, 3.4vh, 32px) 22px clamp(16px, 2.4vh, 24px); }
.step-number-inline {
  position: static;
  transform: none;
  margin: 0 auto clamp(12px, 2vh, 18px);
}

/* ---- Product page: botanicals grid (flexible count) ---- */
.inside-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.inside-cards .bcard { grid-column: auto; }

@media (max-width: 860px) {
  .phero-grid { grid-template-columns: 1fr; }
  .phero-media { max-width: 380px; margin-inline: auto; }
  .phero-copy { text-align: center; }
  .claim-chips, .phero-cta { justify-content: center; }
}