/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --page:        #fdfdfc;
  --surface:     #ffffff;
  --alt:         #f7f7f5;
  --hairline:    #eeeeea;
  --hairline-alt:#e6e6e2;
  --ink:         #1a1a18;
  --ink-list:    #33332f;
  --ink-body:    #55554f;
  --ink-muted:   #6b6b66;
  --ink-eyebrow: #8d8d86;
  --ink-faint:   #b5b5ae;
  --violet:      #932de0;

  --display: 'Ysabeau SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad-inline: clamp(20px, 5vw, 64px);
  --pad-block:  clamp(64px, 9vw, 120px);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation: none !important; }
  .bloom img { translate: 0 0; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* Class rules like .waitlist-form{display:flex} out-specify the UA's [hidden]
   rule, so the success swap needs this to actually hide the form. */
[hidden] { display: none !important; }

a { color: var(--ink-muted); text-decoration: none; transition: color 160ms ease; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

section[id] { scroll-margin-top: 90px; }

/* "Get early access" targets #top (<main>), which sits just under the sticky
   header. A scroll margin larger than that offset clamps the jump to 0, so the
   hero heading and its email field land together instead of the form being
   pinned under the header. */
#top { scroll-margin-top: 120px; }

.eyebrow {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.5em;
  text-transform: lowercase;
  color: var(--ink-eyebrow);
}

/* The brand tagline, in the hero and the closing CTA. Same eyebrow treatment,
   but carried in the accent rather than the muted grey. */
.tagline { color: var(--violet); }

/* Decorative halftone fruit — the anchored motifs, breathing in place. */
.deco {
  position: absolute;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: bob var(--bob, 16s) ease-in-out infinite alternate;
}
@keyframes bob {
  from { translate: 0 -9px; }
  to   { translate: 0 9px; }
}

/* Bloom groups — a cut fruit that gathers back together and opens out again.
   The slices arrive as one flat PNG, so each piece is a full copy of that image
   clipped to a band containing exactly one slice. The bands are cut along lines
   perpendicular to the arrangement's axis, so together they reassemble the
   original picture pixel for pixel. Each piece then animates along its own
   vector toward the group's centre (--ax/--ay, measured as a share of the
   image box) and back out, which reads as the fruit closing and opening.

   Per-group position, size, speed, phase and weight come from the
   --x/--rx/--y/--ry/--w/--dur/--delay/--o properties set inline. */
.bloom {
  position: absolute;
  left: var(--x, auto);
  right: var(--rx, auto);
  top: var(--y, auto);
  bottom: var(--ry, auto);
  width: var(--w);
  aspect-ratio: 1 / 1;
  opacity: var(--o, 0.28);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bloom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  animation: expand var(--dur, 17s) ease-in-out var(--delay, 0s) infinite alternate;
}
/* `alternate` runs the piece out and back; ease-in-out puts a natural rest at
   both ends, so the group holds assembled and holds open. */
@keyframes expand {
  from { translate: var(--ax) var(--ay); }
  to   { translate: 0 0; }
}

/* Apple: five pieces on a bottom-left → top-right diagonal, cut by four
   parallel lines of slope 0.718 running across the image. */
.bloom--apple img:nth-child(1) {   /* half apple, bottom left */
  clip-path: polygon(-50% 9.2%, 150% 152.8%, 150% 300%, -50% 300%);
  --ax: 15.3%; --ay: -27.5%;
}
.bloom--apple img:nth-child(2) {
  clip-path: polygon(-50% -13.5%, 150% 130.1%, 150% 152.8%, -50% 9.2%);
  --ax: 6.6%; --ay: -10.6%;
}
.bloom--apple img:nth-child(3) {
  clip-path: polygon(-50% -31.3%, 150% 112.3%, 150% 130.1%, -50% -13.5%);
  --ax: 0.7%; --ay: 0.7%;
}
.bloom--apple img:nth-child(4) {
  clip-path: polygon(-50% -51.4%, 150% 92.2%, 150% 112.3%, -50% -31.3%);
  --ax: -4%; --ay: 12%;
}
.bloom--apple img:nth-child(5) {   /* whole apple, top right */
  clip-path: polygon(-50% -300%, 150% -300%, 150% 92.2%, -50% -51.4%);
  --ax: -19.3%; --ay: 20.6%;
}

/* Guava: three pieces stacked vertically. The lower two interlock, so that
   boundary is a slanted cut rather than a flat one. */
.bloom--guava img:nth-child(1) {   /* top wedge */
  clip-path: polygon(-50% -50%, 150% -50%, 150% 36.9%, -50% 36.9%);
  --ax: 0.4%; --ay: 26.3%;
}
.bloom--guava img:nth-child(2) {   /* middle wedge */
  clip-path: polygon(-50% 36.9%, 112% 36.9%, -50% 108.9%);
  --ax: -1.2%; --ay: -3.1%;
}
.bloom--guava img:nth-child(3) {   /* bottom wedge */
  clip-path: polygon(-50% 108.9%, 150% 20%, 150% 200%, -50% 200%);
  --ax: 0.7%; --ay: -23.4%;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--pad-inline);
  background: rgba(253, 253, 252, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  font-family: var(--display);
  font-weight: 200;
  font-size: 22px;
  letter-spacing: 0.42em;
  color: var(--ink);
}
a.wordmark:hover { color: var(--ink); }
.wordmark--sm { font-size: 18px; }

.site-nav {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav .nav-cta { color: var(--ink); }

/* Under ~600px the four nav items no longer fit beside the wordmark and get
   clipped. Drop the section links and keep the one that matters. */
@media (max-width: 600px) {
  .site-nav a:not(.nav-cta) { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(48px, 7vw, 104px) var(--pad-inline) clamp(40px, 6vw, 88px);
  max-width: 1440px;
  margin: 0 auto;
}


.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 28px; }

.hero h1 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin-bottom: 26px;
}

.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 46ch;
  text-wrap: pretty;
  margin-bottom: 36px;
}

.hero-shot {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.hero-shot img {
  width: 100%;
  max-width: 620px;
  height: auto;
  mix-blend-mode: multiply;
}

/* ── Waitlist form ──────────────────────────────────────────────────── */
.waitlist { max-width: 480px; }
.waitlist--cta { margin: 0 auto; }

.waitlist-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 12px;
}

.waitlist-input {
  flex: 1 1 200px;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  padding: 6px 0;
  text-align: left;
}
.waitlist-input::placeholder { color: var(--ink-faint); }
.waitlist-input:focus { outline: none; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.waitlist-button {
  border: none;
  background: var(--ink);
  color: var(--page);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, opacity 160ms ease;
}
.waitlist-button:hover { background: var(--violet); }
.waitlist-button[disabled] { opacity: 0.55; cursor: default; background: var(--ink); }

.waitlist-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-eyebrow);
  min-height: 18px;
  text-align: left;
}

.waitlist-success {
  border: 1px solid var(--violet);
  border-radius: 4px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(147, 45, 224, 0.05), rgba(147, 45, 224, 0));
  text-align: left;
}
.waitlist--cta .waitlist-success {
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
  text-align: center;
}

.success-title {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--violet);
}
.waitlist-success .success-title + .success-body { margin-top: 8px; }
.success-body { font-size: 14px; line-height: 1.6; color: var(--ink-body); }

/* ── Spec strip ─────────────────────────────────────────────────────── */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.spec { background: var(--page); padding: 30px clamp(20px, 4vw, 44px); }
.spec-num {
  font-family: var(--display);
  font-weight: 200;
  font-size: 32px;
  margin-bottom: 6px;
}
.spec-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Inside ─────────────────────────────────────────────────────────── */
.inside {
  position: relative;
  overflow: hidden;
  padding: var(--pad-block) var(--pad-inline);
  max-width: 1240px;
  margin: 0 auto;
}
.deco-inside-passion { right: -12%; top: 2%; width: 42%; max-width: 520px; opacity: 0.2; --bob: 15s; }
.deco-inside-apple   { left: -11%; bottom: -8%; width: 34%; max-width: 430px; opacity: 0.16; rotate: -8deg; --bob: 19s; }

.section-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: 0.02em;
}
.section-head p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 34ch;
}

.cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.card {
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.card:hover { border-color: var(--violet); transform: translateY(-3px); }

.card-logo { height: 44px; display: flex; align-items: center; }
.card-logo img { width: auto; mix-blend-mode: multiply; }

.card-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.card-title-row h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 0.06em;
}
.dose { font-size: 11px; letter-spacing: 0.14em; color: var(--violet); }

.card-class {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
}
.rule { height: 1px; background: var(--hairline); }

.benefits { display: flex; flex-direction: column; gap: 12px; }
.benefits li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-list);
}
.benefits li > span:first-child { color: var(--violet); flex: 0 0 auto; }

/* ── Flavors ────────────────────────────────────────────────────────── */
.flavors {
  position: relative;
  border-top: 1px solid var(--hairline);
  padding: var(--pad-block) var(--pad-inline);
  max-width: 1240px;
  margin: 0 auto;
}
/* Lift the section's own content above the bloom layer — but not the blooms
   themselves, which must stay absolutely positioned. */
.flavors > *:not(.bloom) { position: relative; z-index: 1; }
.flavors .eyebrow { margin-bottom: 22px; }
.flavors-title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: 0.02em;
  max-width: 22ch;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.flavor { display: flex; flex-direction: column; gap: 18px; }
.flavor-tile {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
}
.flavor-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.flavor-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.flavor-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}
.flavor-note {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
}

.ultra {
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--violet);
  border-radius: 3px;
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(100deg, rgba(147, 45, 224, 0.06), rgba(147, 45, 224, 0));
}
.ultra-title {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.16em;
  color: var(--violet);
  margin-bottom: 6px;
}
.ultra-body { font-size: 14px; line-height: 1.6; color: var(--ink-body); max-width: 52ch; }
.ultra-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet);
}

/* ── Ritual ─────────────────────────────────────────────────────────── */
.ritual {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  background: var(--alt);
  padding: var(--pad-block) var(--pad-inline);
}
.deco-ritual-guava   { left: 38%; top: -18%; width: 34%; max-width: 460px; opacity: 0.16; rotate: 18deg; --bob: 21s; }
.deco-ritual-passion { right: -9%; bottom: -16%; width: 34%; max-width: 440px; opacity: 0.14; --bob: 16s; }

.ritual-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.ritual h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.ritual p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}
.ritual p + p { margin-top: 18px; }

.timeline {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hairline-alt);
  border: 1px solid var(--hairline-alt);
  border-radius: 3px;
}
.timeline-row {
  background: var(--page);
  padding: 22px clamp(20px, 3vw, 30px);
  display: flex;
  gap: 24px;
  align-items: baseline;
}
.when {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--violet);
  flex: 0 0 76px;
}
.what { font-size: 15px; line-height: 1.55; color: var(--ink-list); }

/* ── Closing CTA ────────────────────────────────────────────────────── */
.cta {
  position: relative;
  padding: clamp(72px, 10vw, 140px) var(--pad-inline);
  text-align: center;
  max-width: 1240px;
  margin: 0 auto;
}

.cta-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.cta .eyebrow { margin-bottom: 24px; }
.cta-title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(34px, 5.5vw, 68px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}
.cta-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 44ch;
  margin: 0 auto 34px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 40px var(--pad-inline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-ingredients {
  display: flex;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
}
.footer-legal { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }