/* ─────────────────────────────────────────────────────────────
   Naturel — Vanjoin Capsules
   Palette sampled from the source design.
   ───────────────────────────────────────────────────────────── */

:root {
  --page:   #e6e6e4;
  --forest: #0e3a32;
  --ink:    #12362b;
  --sand:   #e5e1d8;
  --snow:   #f5f6f5;
  --white:  #ffffff;
  --card:   #fbfaf8;
  --mint:   #ddf7cd;
  --mint-2: #bdeeae;
  --muted:  rgba(18, 54, 43, .62);
  --line:   rgba(18, 54, 43, .16);

  --r-shell: 26px;
  --r-card:  16px;
  --tl-short: clamp(140px, 14vw, 195px);
  --tl-tall:  clamp(200px, 21vw, 290px);
  --pad:     clamp(20px, 4.6vw, 64px);
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

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

/* Section snapping lives in app.js. CSS scroll-snap was tried first and
   dropped: its correction is abrupt and the timing/easing are not authorable,
   which read as rough. (`mandatory` is doubly wrong here — every snapped
   section is taller than the viewport, so it would strand their lower halves.) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-lang="es"]:not([data-ready]) body { visibility: hidden; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--forest); color: #fff; padding: 10px 18px; border-radius: 999px;
}
.skip:focus { left: 16px; }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; }

/* ── Shell ─────────────────────────────────────────────────── */
/* Full-bleed: no outer margin, no corner radius, and deliberately NOT
   overflow:hidden — that would make .shell the nearest scroll container and
   swallow the scroll-snap points below. */
.shell { background: var(--snow); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px; border: 0; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  transition: background .22s, color .22s, transform .22s, box-shadow .22s;
}
.btn--light  { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--mint); }
.btn--forest { background: var(--forest); color: #fff; }
.btn--forest:hover { background: #16513f; }
.btn--mint   { background: var(--mint); color: var(--forest); }
.btn--mint:hover { background: var(--mint-2); }
.btn--ghost-light {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.14); }
.btn--wide { width: 100%; max-width: 200px; }
.btn:active { transform: scale(.975); }

.round {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  transition: background .22s, color .22s, transform .22s, box-shadow .22s;
}
.round svg { width: 20px; height: 20px; }
.round--light   { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.round--light:hover { background: #fff; color: var(--ink); }
.round--forest  { background: var(--forest); color: #fff; }
.round--forest:hover { background: #16513f; }
.round--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.round--outline:hover { background: var(--forest); color: #fff; box-shadow: none; }
.round--mint    { background: var(--mint); color: var(--forest); }
.round--mint:hover { background: var(--mint-2); }
.round:disabled { opacity: .3; cursor: default; }
.round:not(:disabled):active { transform: scale(.94); }

.cta-pair { display: flex; align-items: center; gap: 8px; }
.cta-pair--center { justify-content: center; }

.icon-btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  transition: background .22s;
}
.icon-btn:hover { background: rgba(255,255,255,.16); }

/* ── Typography helpers ────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.eyebrow svg { width: 15px; height: 15px; color: currentColor; }
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: rgba(255,255,255,.92); }

.h2 { font-size: clamp(28px, 3.1vw, 44px); }
.h2--light { color: #fff; }
.lede { max-width: 40ch; margin-inline: auto; color: var(--muted); font-size: 15.5px; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 2vw, 26px) var(--pad);
  color: #fff;
}
.nav__links { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); font-size: 14px; }
.nav__links a { opacity: .88; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__right { display: flex; align-items: center; gap: 10px; }

.brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 500; letter-spacing: -.015em;
}
.brand__mark { width: 22px; height: 21px; }
.brand--footer { position: static; transform: none; }

.langs { display: flex; align-items: center; gap: 4px; font-size: 12.5px; opacity: .8; }
.langs button { background: none; border: 0; padding: 2px 3px; opacity: .65; transition: opacity .2s; }
.langs button[aria-pressed="true"] { opacity: 1; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.langs button:hover { opacity: 1; }

.burger { display: none; width: 40px; height: 40px; background: none; border: 0; padding: 10px; }
.burger span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.burger span + span { margin-top: 6px; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { position: relative; background: var(--forest); }
/* clip-path (not just overflow) is what actually clips the fixed image below —
   overflow on a plain ancestor does not clip fixed descendants. */
.hero__viewport { overflow: hidden; clip-path: inset(0); }
.hero__slide {
  position: relative;
  min-height: clamp(520px, 78vh, 780px);
  display: grid;
}
/* Pinned to the viewport, so the photo holds still while the page scrolls over
   it and the hero's lower edge wipes upward across it. Sized to the viewport
   rather than the hero box, which also means less of the frame is cropped —
   more of the upper half of the photograph is in play. */
.hero__img {
  /* The slide only ever shows the top ~78vh of this 100vh image, which left
     the subject sitting low under a band of dark rock. The lift raises the
     frame; the zoom is where the entrance push-in comes to rest, and both are
     declared here rather than only in the keyframes so the resting crop and
     the animated one cannot drift apart. At 1.1 the image still spans
     -11vh..99vh, so the slide stays covered. */
  --hero-lift: 6vh;
  --hero-zoom: 1.1;
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover; object-position: 50% 50%;
  translate: 0 calc(-1 * var(--hero-lift));
  scale: var(--hero-zoom);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,26,20,.55) 0%, rgba(6,26,20,0) 34%),
    linear-gradient(90deg, rgba(6,26,20,.5) 0%, rgba(6,26,20,0) 55%),
    linear-gradient(0deg, rgba(6,26,20,.42) 0%, rgba(6,26,20,0) 32%);
}
/* Film grain. The same animated noise.gif the marketing homepage lays over
   everything, scoped here to just the hero photo — it rides on the scrim
   rather than the photo so nothing has to re-rasterise the scaled, fixed,
   full-viewport image layer. Treatment matched to the homepage overlay:
   the 200px tile repeated at 9% opacity, plain alpha (no blend mode). */
.hero__scrim::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("img/noise.gif");
  background-repeat: repeat;
  background-size: 200px auto;
  opacity: .09;
}
.hero__inner {
  position: relative; z-index: 2; align-self: stretch;
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(96px, 11vw, 150px) var(--pad) clamp(48px, 6vw, 74px);
  color: #fff;
}
.hero__title {
  max-width: 13ch;
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 400; line-height: 1.03; letter-spacing: -.028em;
}
.hero__aside { justify-self: end; max-width: 300px; display: grid; gap: 22px; }
.hero__aside p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.9); }


/* ── Hero entrance ─────────────────────────────────────────── */
/* The page opens white; the background rises from mid-page into position, and
   the moment it lands the nav and hero copy arrive left to right.
   All motion uses the independent `translate`/`scale` properties rather than
   `transform`, so it composes with the brand's own translateX(-50%) centring
   instead of fighting it. The pre-state is gated on .hero-armed, which is only
   set when motion is welcome — without it the hero renders normally. */

html.hero-armed .hero { background: #fff; }

html.hero-armed .hero__img,
html.hero-armed .hero__scrim,
html.hero-armed .hero__title,
html.hero-armed .hero__aside,
html.hero-armed .nav__links--left li,
html.hero-armed .brand,
html.hero-armed .nav__right { opacity: 0; }

/* Rises and pushes in: it used to open at 1.06 and settle to 1, which is a
   zoom out. Starting at 1 -- exactly covering the viewport, so nothing shows
   behind it -- and growing into the resting zoom reads as the camera moving
   toward her. */
@keyframes heroRise {
  from { opacity: 0; translate: 0 34%; scale: 1; }
  to   { opacity: 1; translate: 0 calc(-1 * var(--hero-lift)); scale: var(--hero-zoom); }
}
@keyframes heroScrimIn { to { opacity: 1; } }
@keyframes heroGround  { to { background-color: var(--forest); } }
@keyframes chromeIn {
  from { opacity: 0; translate: -16px 0; }
  to   { opacity: 1; translate: none; }
}

html.hero-ready .hero__img {
  animation: heroRise 900ms cubic-bezier(.16,.84,.34,1) both;
}
html.hero-ready .hero__scrim {
  animation: heroScrimIn 650ms 200ms ease-out both;
}
html.hero-ready .hero { animation: heroGround 350ms 600ms linear both; }

/* Chrome follows the landing, staggered across the bar. */
html.hero-ready .nav__links--left li,
html.hero-ready .brand,
html.hero-ready .nav__right,
html.hero-ready .hero__title,
html.hero-ready .hero__aside {
  animation: chromeIn 520ms cubic-bezier(.22,.68,.36,1) both;
}
html.hero-ready .nav__links--left li:nth-child(1) { animation-delay: 820ms; }
html.hero-ready .nav__links--left li:nth-child(2) { animation-delay: 870ms; }
html.hero-ready .nav__links--left li:nth-child(3) { animation-delay: 920ms; }
html.hero-ready .nav__links--left li:nth-child(4) { animation-delay: 970ms; }
html.hero-ready .nav__links--left li:nth-child(5) { animation-delay: 1020ms; }
html.hero-ready .nav__links--left li:nth-child(6) { animation-delay: 1070ms; }
html.hero-ready .brand      { animation-delay: 1090ms; }
html.hero-ready .nav__right { animation-delay: 1140ms; }
html.hero-ready .hero__title { animation-delay: 840ms; animation-duration: 620ms; }
html.hero-ready .hero__aside { animation-delay: 1000ms; }

/* ── Sections ──────────────────────────────────────────────── */
.section { padding: clamp(52px, 6.4vw, 96px) var(--pad); }
.section--snow  { background: var(--snow); }
.section--sand  { background: var(--sand); }
.section--white { background: var(--white); }
.section--center { text-align: center; }

.section__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 48px);
}
.section__head .h2 { max-width: 18ch; margin-top: 10px; }
.section__head .eyebrow { display: flex; margin-bottom: 12px; }

/* ── Why ───────────────────────────────────────────────────── */
.statement {
  max-width: 35ch;
  margin: clamp(20px, 2.4vw, 34px) 0 clamp(24px, 2.8vw, 38px);
  font-size: clamp(24px, 2.85vw, 40px);
  font-weight: 400; line-height: 1.18; letter-spacing: -.022em;
}

.stats {
  display: grid; gap: clamp(20px, 2.4vw, 34px);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(44px, 5.4vw, 78px);
}
.stat__num {
  display: block; font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat h3 {
  margin: 18px 0 6px; padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 14.5px; font-weight: 600; letter-spacing: 0;
}
.stat p { font-size: 12.8px; line-height: 1.5; color: var(--muted); }

/* ── Products ──────────────────────────────────────────────── */
.products {
  /* Generous, because the featured card is scaled 1.1 and overhangs its track
     by ~5% on each side — the gap you set is not the gap you see. */
  display: grid; gap: clamp(24px, 4vw, 66px);
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.product {
  position: relative; text-align: center;
  padding: 22px 22px 30px;
  background: var(--card); border-radius: var(--r-card);
  transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s;
}
/* The middle card is raised by default, but the raise follows the pointer:
   hovering any card hands the emphasis to it and drops the featured one. */
.product--featured { transform: scale(1.1); box-shadow: 0 18px 48px rgba(18,54,43,.15); z-index: 2; }
.products:hover .product--featured:not(:hover) { transform: none; box-shadow: none; z-index: 1; }
.product:hover { transform: scale(1.1); box-shadow: 0 18px 48px rgba(18,54,43,.15); z-index: 3; }
.badge {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--mint); color: var(--forest);
  font-size: 11.5px; font-weight: 500;
}
.product__shot {
  height: clamp(180px, 17vw, 235px); margin: 14px 0 20px;
  display: flex; align-items: center; justify-content: center;
}
.product__shot img { height: 100%; width: auto; object-fit: contain; }
.product h3 { font-size: clamp(17px, 1.45vw, 21px); font-weight: 500; }
.product__price { margin: 7px 0 16px; font-size: 13.5px; color: var(--muted); }
.product__sub { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.product__sub b { font-weight: 600; color: var(--ink); }

/* ── How it works ──────────────────────────────────────────── */
.steps {
  display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(30px, 3.6vw, 52px) 0 clamp(26px, 3vw, 42px);
  text-align: left;
}
.step {
  display: flex; flex-direction: column;
  padding: 26px 22px; background: var(--white); border-radius: var(--r-card);
}
.step h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.step h3 span:first-child { font-weight: 500; color: var(--muted); }
.step p { margin: 14px 0 20px; font-size: 13px; line-height: 1.55; color: var(--muted); }
/* margin-top:auto keeps the four thumbnails on a shared baseline despite
   differing copy lengths — the source design aligns them. */
.step img { margin-top: auto; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }

/* ── Ingredients ───────────────────────────────────────────── */
.ingredients {
  position: relative; isolation: isolate;
  /* Its own inset, tighter than --pad, so the foliage reads as a thin frame
     around the panel the way the source does rather than a wide margin. */
  padding: clamp(28px, 3.6vw, 50px) clamp(16px, 3.2vw, 46px);
  background: var(--forest);
}
.ingredients::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("img/fern.webp") center / cover no-repeat;
  filter: saturate(1.12) contrast(1.06);
}
.ingredients::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,40,30,.20), rgba(10,40,30,.32));
}
.ingredients__glass {
  display: grid; grid-template-columns: minmax(240px, 1fr) 1.45fr;
  gap: clamp(24px, 3vw, 48px); align-items: center;
  padding: clamp(26px, 3.2vw, 46px);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(226,238,226,.30), rgba(180,208,186,.22));
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.ingredients__copy { display: grid; gap: 16px; align-content: start; }
.ingredients__copy .h2 { max-width: 12ch; }
.ingredients__copy p { max-width: 34ch; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.86); }

.ingredients__diagram {
  position: relative; display: grid; place-items: center;
  min-height: clamp(300px, 34vw, 430px);
}
.ingredients__bottle {
  width: clamp(160px, 16vw, 232px); height: auto;
  filter: drop-shadow(0 26px 44px rgba(6,26,20,.45));
}
.pin { position: absolute; width: min(30%, 190px); color: #fff; }
.pin h3 { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.pin p { margin-top: 6px; font-size: 11.8px; line-height: 1.45; color: rgba(255,255,255,.78); }
.pin::after {
  content: ""; position: absolute; top: 14px; width: clamp(24px, 4vw, 62px);
  border-top: 1px dashed rgba(255,255,255,.6);
}
.pin--tl, .pin--bl { left: 0; }
.pin--tr, .pin--br { right: 0; }
.pin--tl, .pin--tr { top: 6%; }
.pin--bl, .pin--br { bottom: 10%; }
.pin--tl::after, .pin--bl::after { left: 100%; margin-left: 10px; }
.pin--tr::after, .pin--br::after { right: 100%; margin-right: 10px; }

/* ── Rails (timeline + reviews) ────────────────────────────── */
.rail {
  display: flex; gap: clamp(12px, 1.5vw, 22px);
  /* `clip`, not `visible` or `hidden`: left visible it computes to auto against
     the auto x-axis, and hidden still makes a y scroll container — either way
     the rail swallows vertical wheel gestures. `clip` creates no scroll
     container, so the wheel reaches the page. */
  overflow-x: auto; overflow-y: clip;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 6px;
}
.rail::-webkit-scrollbar { display: none; }
/* Wide enough that the four cards overflow the viewport — the arrows are only
   meaningful if there is somewhere to scroll, and the source design lets the
   edge cards bleed off. */
.rail > * { scroll-snap-align: center; flex: 0 0 clamp(240px, 30%, 400px); }

.arrows { display: flex; gap: 8px; }

/* Timeline cards. The four custom properties below carry the resting state;
   whichever card is emphasised overrides them. Who that is gets decided
   further down — hover on desktop, scroll position on the mobile rail. */
.tl {
  --tl-h: var(--tl-short);
  --tl-fade: 0;
  --tl-img: .6;
  --tl-ink: var(--muted);
  --tl-weight: 500;
}
.tl__shot {
  /* Container fixed at the tall size with the image pinned to its bottom, so
     all four share a baseline and the emphasised one grows upward only. */
  height: var(--tl-tall);
  display: flex; align-items: flex-end;
}
.tl__shot img {
  width: 100%; height: var(--tl-h);
  object-fit: cover; object-position: 50% 45%;
  border-radius: 12px; background: var(--white);
  /* Held back at rest so the row reads as one quiet block and the card the
     pointer picks out is the only one at full strength. */
  opacity: var(--tl-img);
  transition: height .38s cubic-bezier(.4,0,.2,1), opacity .38s;
}
.tl__when {
  margin: 14px 0 0; font-size: 15px;
  color: var(--tl-ink); font-weight: var(--tl-weight);
  transition: color .3s;
}
.tl__body { margin-top: 10px; opacity: var(--tl-fade); transition: opacity .35s; }
.tl__body h3 { font-size: 15.5px; font-weight: 500; }
.tl__body p { margin-top: 6px; font-size: 12.8px; line-height: 1.5; color: var(--muted); }

.tl.is-active { --tl-h: var(--tl-tall); --tl-fade: 1; --tl-img: 1; --tl-ink: var(--ink); --tl-weight: 600; }

.rail--reviews {
  /* stretch, not center: every card takes the height of the tallest, so a
     short quote does not leave a stubby card in the row. */
  align-items: stretch;
  /* Room for the hover scale and its shadow to paint. The rail clips on the
     block axis (it has to — see .rail), so without this the lifted card gets
     sliced along the top and bottom edges. The negative margin cancels the
     padding, leaving the surrounding rhythm untouched. */
  padding: 30px 14px; margin: -30px -14px;
}
/* Continuous drift and mandatory snap cannot share a scroller: the snap keeps
   hauling the strip back to the nearest card centre, so a per-frame scrollLeft
   turns into a stutter. The marquee opts out; the arrows still land on card
   boundaries because they page by exactly one card width. */
.rail--marquee { scroll-snap-type: none; }
.quote {
  position: relative; text-align: center;
  padding: 38px 26px 26px;
  background: var(--white); border-radius: var(--r-card);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  /* Column so the quote body absorbs the slack and the attribution stays
     pinned to the bottom across cards of differing text length. */
  display: flex; flex-direction: column;
}
.quote:hover { transform: scale(1.045); box-shadow: 0 16px 42px rgba(18,54,43,.13); }
.quote__mark {
  display: block;
  font: 600 76px/.62 var(--serif);
  color: var(--forest);
}
.quote blockquote {
  flex: 1; display: flex; align-items: center; justify-content: center;
  margin: 26px 0 20px; font: 400 16.5px/1.5 var(--serif); font-style: italic;
}
.quote__who { padding-top: 16px; border-top: 1px dashed var(--line); font-size: 14.5px; font-weight: 500; }
.quote__tag {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
}

/* ── Rails become grids once there is room ─────────────────── */
/* Horizontal scrolling hid most of the detail — only a couple of steps could
   show their description at a time. Above 900px every card fits, so the rail
   stops scrolling, the arrows go away, and emphasis follows the pointer. */
@media (min-width: 900px) {
  /* Only the timeline flattens out — five reviews stay a rail you page through. */
  .rail--timeline {
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: visible; scroll-snap-type: none; padding-bottom: 0;
  }
  .rail--timeline > * { flex: none; }

  /* Nothing left to page through here. */
  [data-carousel-nav="tlTrack"] { display: none; }

  /* Second step carries the emphasis at rest, matching the source. */
  .rail--timeline .tl:nth-child(2) {
    --tl-h: var(--tl-tall); --tl-fade: 1; --tl-img: 1; --tl-ink: var(--ink); --tl-weight: 600;
  }
}

@media (hover: hover) and (min-width: 900px) {
  /* Hovering the group hands emphasis to the pointer: everything else drops
     back, then the hovered card takes it. Both selectors are (0,3,0), and they
     never match the same element, so source order settles the rest. */
  .rail--timeline:hover .tl:not(:hover) {
    --tl-h: var(--tl-short); --tl-fade: 0; --tl-img: .6; --tl-ink: var(--muted); --tl-weight: 500;
  }
  .rail--timeline .tl:hover {
    --tl-h: var(--tl-tall); --tl-fade: 1; --tl-img: 1; --tl-ink: var(--ink); --tl-weight: 600;
  }
}

/* ── CTA band ──────────────────────────────────────────────── */
.band {
  margin: clamp(40px, 5vw, 72px) calc(var(--pad) * -1) calc(clamp(52px, 6.4vw, 96px) * -1);
  padding: clamp(40px, 4.6vw, 64px) var(--pad);
  background: var(--forest); color: #fff; text-align: center;
}
.band h2 { font-size: clamp(26px, 3vw, 42px); font-weight: 400; letter-spacing: -.025em; }
.band p { margin: 14px 0 26px; font-size: 14.5px; color: rgba(255,255,255,.82); }
/* Headline first, then the line under it, then the button. */
.band > :nth-child(1) { transition-delay: 0ms; }
.band > :nth-child(2) { transition-delay: 110ms; }
.band > :nth-child(3) { transition-delay: 220ms; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq {
  display: grid; grid-template-columns: minmax(260px, .82fr) 1.18fr;
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.faq__shot { width: 100%; border-radius: var(--r-card); }
.faq__body .h2 { max-width: 20ch; margin: 12px 0 clamp(22px, 2.6vw, 34px); }

.acc { border-top: 1px dashed var(--line); }
.acc li { border-bottom: 1px dashed var(--line); }
.acc button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; background: none; border: 0; text-align: left;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
}
.acc button i {
  position: relative; flex: none; width: 14px; height: 14px;
}
.acc button i::before, .acc button i::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px;
  background: currentColor; transition: transform .28s;
}
.acc button i::after { transform: rotate(90deg); }
.acc button[aria-expanded="true"] i::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.acc__panel > p {
  overflow: hidden; font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.acc li.is-open .acc__panel { grid-template-rows: 1fr; }
.acc li.is-open .acc__panel > p { padding-bottom: 18px; }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  padding: clamp(44px, 5.4vw, 74px) var(--pad) clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-shell) var(--r-shell) 0 0;
  background: var(--forest); color: #fff;
}
.footer__top {
  display: grid; grid-template-columns: minmax(260px, .9fr) 1.6fr;
  gap: clamp(30px, 4vw, 60px);
}
.footer__lead .brand { margin-bottom: 22px; }
.footer__lead h2 { max-width: 12ch; font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; }

.signup { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; max-width: 380px; }
.signup input {
  flex: 1; min-width: 0; height: 48px; padding: 0 22px;
  border: 1px solid rgba(255,255,255,.32); border-radius: 999px;
  background: transparent; color: #fff; font: inherit; font-size: 14px;
}
.signup input::placeholder { color: rgba(255,255,255,.55); }
.signup input:focus { outline: none; border-color: var(--mint-2); }
.footer__note { font-size: 12.5px; color: rgba(255,255,255,.55); }
.footer__note.is-ok { color: var(--mint-2); }

.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.footer__cols h3 { margin-bottom: 16px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.9); }
.footer__cols li + li { margin-top: 9px; }
.footer__cols a { font-size: 13px; color: rgba(255,255,255,.62); transition: color .2s; }
.footer__cols a:hover { color: #fff; }

.footer__legal {
  margin-top: clamp(34px, 4vw, 54px);
  font-size: 11.5px; color: rgba(255,255,255,.42);
}
.footer__bar {
  display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2.4vw, 34px);
  margin-top: 16px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; color: rgba(255,255,255,.6);
}
.footer__bar a:hover { color: #fff; }

/* ── Reveal on scroll ──────────────────────────────────────── */
/* Uses the independent `translate` property, not `transform`, so it composes
   with element-level transforms (e.g. the scaled product card) instead of
   clobbering them. */
.reveal { opacity: 0; translate: 0 18px; transition: opacity .6s, translate .6s; }
.reveal.in { opacity: 1; translate: none; }
/* Longer travel, for copy that should climb into place rather than just fade. */
.reveal--rise { translate: 0 52px; transition: opacity .7s, translate .75s cubic-bezier(.2,.7,.3,1); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav__links--left { display: none; }
  .burger { display: block; }
  .brand { position: static; transform: none; margin-right: auto; }
  .nav { justify-content: flex-start; }
  .nav__right { margin-left: auto; }

  .nav__links--left.is-open {
    position: absolute; top: 100%; left: var(--pad); right: var(--pad);
    display: grid; gap: 4px; padding: 16px 20px;
    background: rgba(10,40,32,.94); backdrop-filter: blur(12px); border-radius: 16px;
  }

  .stats, .steps { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: 1fr; }
  .faq__shot { max-width: 460px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }

  .ingredients__glass { grid-template-columns: 1fr; }
  .ingredients__diagram { min-height: 0; grid-template-columns: 1fr; gap: 22px; }
  .ingredients__bottle { width: 150px; }
  .pin { position: static; width: 100%; }
  .pin::after { display: none; }
  .ingredients__diagram { display: grid; grid-template-columns: repeat(2, 1fr); place-items: start; }
  .ingredients__bottle { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 780px) {
  .hero__inner { padding-top: clamp(110px, 22vw, 150px); }
  .hero__aside { justify-self: start; max-width: 340px; }
  .hero__title { max-width: 100%; }
  .langs { display: none; }
  .btn--ghost-light { display: none; }

  .products { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .product--featured { transform: none; }
  .product:hover { transform: none; }
  .rail > * { flex-basis: 78%; }
  .section__head { flex-direction: column; }
}

@media (max-width: 560px) {
  .stats, .steps, .footer__cols, .ingredients__diagram { grid-template-columns: 1fr; }
  .band { text-align: left; }
  .cta-pair--center { justify-content: flex-start; }
  .section--center { text-align: left; }
  .eyebrow--center { justify-content: flex-start; }
  .lede { margin-inline: 0; }
}

/* ── Cursor ring ──────────────────────────────────────────────
   A small decorative circle that trails the pointer with a touch
   of lag. Added by app.js, so it is absent without JS; the blend
   mode keeps it legible over both the pale page and the dark
   forest sections. Pointer devices only. */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  mix-blend-mode: difference;
  will-change: transform;
  transition: opacity .3s ease, width .18s ease, height .18s ease, margin .18s ease;
}
.cursor-ring.is-visible { opacity: .55; }
.cursor-ring.is-active {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  opacity: .8;
}

@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor-ring { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; translate: none; }
  /* The drift never starts under reduced motion, so the rail goes back to
     being an ordinary snapping carousel. */
  .rail--marquee { scroll-snap-type: x mandatory; }
  /* An animated GIF cannot be paused from CSS; drop the flickering grain. */
  .hero__scrim::after { display: none; }
}