/* ============================================================
   SECTION 2 — SIMPLICITY
   One section, three parts, so it never reads as "two identical 3-thing
   grids back to back": A) headline + an interactive product carousel
   (all 3 bottles always partially visible, one centred/active — see
   js/product-stage.js), B) a plain whitespace break (no rule line —
   see the comment above .simplicity-bottom), C) a plainly-
   typeset, STATIC 3-up image gallery ("nothing unnecessary" — see
   css/components/editorial-card.css). Not 100vh — a fixed, content-
   driven band roughly 900-1050px tall on desktop, auto on mobile.
   ============================================================ */
.panel-simplicity {
  /* content-height with the shared rhythm: nav-clear top + the small
     shared bottom (--section-pad-bottom) so the gap to Transparency below
     matches every other section. No min-height band — the section is as
     tall as its own (already tall) content. */
  padding-top: max(124px, clamp(64px, 10svh, 116px));
  padding-bottom: var(--section-pad-bottom);
}
@media (max-width: 767px) {
  .panel-simplicity { padding-top: max(116px, clamp(32px, 4svh, 48px)); }
}

/* ---- A. headline + product stage ---- */
.simplicity-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(40px, 6svh, 64px);
}
/* .simplicity-copy's headline/sub are literally .hero-headline/.hero-sub
   (css/sections/hero.css) — not a lookalike clone of that formula, the
   exact same classes — so this reads as "part of the same editorial
   family" as Hero by construction, and any future tuning of Hero's
   type only has to happen once. */
@media (min-width: 768px) {
  /* align-items:start (was center) — centering the text column against
     the taller carousel added ~40px of extra vertical offset on top of
     the panel's own padding-top, pushing the Hero->Simplicity gap to
     ~205px versus the ~186px rhythm every other "continuous narrative"
     transition on the page uses (Simplicity->Transparency, Transparency
     ->Story). Flush-top matches Transparency's own 2-column grid
     (align-items:start), so the headline now starts exactly where the
     panel's padding says it should — no hidden extra gap. */
  .simplicity-top {
    display: grid;
    grid-template-columns: minmax(0, var(--col-copy-narrow)) 1fr;
    align-items: start;
    gap: clamp(40px, 5vw, 72px);
    text-align: left;
  }
  /* query container for the shared --type-headline token's cqw term
     (css/tokens.css, consumed by .hero-headline in hero.css) — see
     hero.css's matching comment for the large-monitor overflow bug this
     prevents. Every section sharing .hero-headline needs its own copy
     column to be a query container; this was the one still missing it
     that hadn't yet been caught by a live repro. */
  .simplicity-copy { container-type: inline-size; }
}

/* ---- product stage: all three bottles always visible, one active/
   centred. Absolute-positioned (not a real scroller) since there are
   only ever 3 items and every position needs its own exact size/opacity/
   offset — js/product-stage.js toggles each card's [data-pos] between
   active/prev/next (and updates the dots) on click or swipe. ---- */
.product-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3svh, 28px);
}
.stage-track {
  position: relative;
  width: 100%;
  /* height derives from the card's own 4:5 aspect ratio (below) instead
     of an independent clamp — the two can never drift out of sync. */
  height: calc(var(--stage-card-w) * 5 / 4);
  /* mobile: the active card is deliberately narrower (~54vw) so real
     empty gutter space shows on BOTH sides in line with the page grid,
     rather than the active card + side peeks filling edge-to-edge. The
     side cards are pushed further out (bigger shift ratio) so only a
     thin sliver of each peeks in — the rest of the flanks read as
     intentional whitespace. Shrinking the card is an accepted trade. */
  --stage-card-w: min(52vw, 270px);
  --stage-shift: calc(var(--stage-card-w) * 0.42);
  touch-action: pan-y;
}
@media (min-width: 768px) {
  .stage-track {
    --stage-card-w: clamp(230px, 25vw, 290px);
    /* desktop keeps its own peek fraction, pinned here so the tighter
       mobile shift ratio above can't leak into it. prev and next use the
       SAME shift/scale/opacity — side cards read as equally peeking on
       both sides, not "one more visible than the other". */
    --stage-shift: calc(var(--stage-card-w) * 0.62);
  }
  .stage-card { border-radius: 36px; }
}
/* short/landscape viewport (see hero.css's matching query for the full
   iPhone-Air-landscape context) — the card width was still sized off vw
   (25vw), which on a short-but-wide screen barely shrinks at all and the
   resulting card (plus its aspect-ratio-derived height) simply doesn't
   fit the available vertical room. Switch to vh so it actually tracks
   the constraint that matters here. */
@media (min-width: 768px) and (max-height: 600px) {
  .stage-track { --stage-card-w: clamp(120px, 24vh, 200px); }
}
.stage-card {
  /* reset <button> defaults — this is a real button for a11y/click
     target, styled as a plain card, not a form control */
  appearance: none;
  border: none;
  font: inherit;
  cursor: pointer;

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--stage-card-w);
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* more generous block padding than a typical card — the extra air
     above/below (on top of the aspect-ratio-driven size bump from the
     bigger --stage-card-w above) is what gives the count/bottle/name
     stack room to breathe instead of feeling packed in. */
  padding: clamp(26px, 3.6vw, 38px) clamp(16px, 2.2vw, 26px);
  /* white, not tinted — the bottle PNGs already have white backgrounds,
     so the card has to read as the same white, not a grey card holding
     a white photo. The barely-there radial (lighter toward 60%, pure
     #fff at the centre-ish point and beyond) is what gives it an
     "illuminated object" quality instead of flat/dead white — a studio
     light, not a background tint. */
  background: radial-gradient(ellipse at 50% 28%, rgba(248, 248, 248, 0.95) 0%, rgba(255, 255, 255, 1) 60%);
  /* two-layer edge instead of one harder line: a near-invisible dark
     hairline (border) plus a near-white inline outline just inside it
     that softens where border meets background — separation without
     a single obvious "card outline" effect. */
  border: 1px solid rgba(0, 0, 0, 0.08);
  outline: 1px solid rgba(255, 255, 255, 0.95);
  outline-offset: -1px;
  border-radius: 32px; /* desktop: 36px, see the min-width:768px override below */
  /* layered depth (contact + mid + far shadow) instead of one flat
     shadow, plus an inset top highlight for a "coated paper" edge —
     pushed noticeably stronger than a first pass (still nowhere near a
     SaaS floating-panel look — every layer stays soft/diffuse, none of
     them a hard dark line). */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 14px 40px rgba(0, 0, 0, 0.06),
    0 50px 110px rgba(0, 0, 0, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard);
  will-change: transform, opacity;
}
/* a very soft light bloom behind the bottle itself (not the whole card)
   — pure CSS, the product PNG is never touched/blurred/filtered. */
.stage-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(248, 248, 248, 0.9), rgba(255, 255, 255, 0));
  filter: blur(24px);
  /* was 0.9 — that much white bloom washed the (already light) bottle out
     on the active slide, especially now that the bottle is larger. A
     quieter bloom keeps the "illuminated object" cue without bleaching
     the product. */
  opacity: 0.5;
  pointer-events: none;
}
.stage-card[data-pos="prev"] {
  transform: translate(calc(-50% - var(--stage-shift)), -50%) scale(0.94);
  opacity: 0.72;
  z-index: 2;
}
.stage-card[data-pos="next"] {
  transform: translate(calc(-50% + var(--stage-shift)), -50%) scale(0.94);
  opacity: 0.72;
  z-index: 2;
}
.stage-card[data-pos="active"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
}
/* one large, extremely soft ambient shadow UNDER the active card only
   (not around it) — the ground-contact cue that makes it read as
   resting above the page instead of printed flat onto it. Side cards
   deliberately don't get this (it would just muddy the peek). */
.stage-card[data-pos="active"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -36px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0));
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
}
.stage-count {
  font-weight: 300;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
/* short/landscape viewport (see hero.css's matching query) — padding and
   the count number are both sized off vw, so shrinking --stage-card-w
   alone (the earlier max-height:600 override, above) didn't shrink
   them: content no longer fit inside the aspect-ratio:4/5 box at a
   120px-wide card, forcing the card ~35% taller than its own track and
   overflowing into whatever the next section renders at that scroll
   position. Lives here (after the base .stage-card/.stage-count rules,
   not next to the --stage-card-w override above) so it wins the
   cascade at equal specificity — the same rule this codebase follows
   everywhere else for breakpoint overrides. */
@media (min-width: 768px) and (max-height: 600px) {
  .stage-card { padding: clamp(10px, 3vh, 18px) clamp(8px, 2vh, 14px); }
  .stage-count { font-size: clamp(16px, 4vh, 24px); }
}
/* smaller than .type-label's own default (var(--t-feature-label), up to
   21px) — var(--t-label) is the same small-caption size used for
   .eyebrow/.card-title's old scale, still part of the existing type
   scale, just its smallest rung instead of the feature-label one. */
.stage-ingredients,
.stage-name {
  font-size: var(--t-label);
}
.stage-ingredients {
  margin-top: 12px;
  color: var(--text-muted);
}
.stage-bottle {
  margin-block: auto;
  /* sized as a fraction of the card's own width (not an svh clamp, which
     starved the bottle on tall phones — it rendered ~100px there while
     the card was huge, leaving the active slide looking mostly empty).
     0.62x the card width makes the bottle occupy the same visual share of
     the card on mobile as it does on desktop. */
  height: calc(var(--stage-card-w) * 0.54);
  width: auto;
  object-fit: contain;
  display: block;
}
.stage-name {
  color: var(--text-primary);
}
/* mobile: the white-background bottle PNGs sit dead-centre, so the card's
   centre must read as the SAME white — otherwise the bottle's white plate
   floats on a faintly grey disc. Here the gradient is pure #fff through
   the middle (well past where the bottle sits) and only picks up the
   barely-there tint right at the outer edge, as a soft vignette, so it
   still reads as an illuminated object rather than flat dead white. */
@media (max-width: 767px) {
  .stage-card {
    background: radial-gradient(ellipse at 50% 42%, #fff 0%, #fff 54%, rgba(248, 248, 248, 0.9) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage-card { transition: none; }
}

.stage-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* modern "expanding" pagination: inactive dots are small, quiet circles; the
   active one stretches into a short pill (no scale bump — that read as the
   dated, heavy "big dot" style). Width + colour animate together on the
   shared easing. */
.stage-dot {
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.16);
  transition: width var(--duration-slow) var(--ease-standard),
    background var(--duration-slow) var(--ease-standard);
}
.stage-dot:hover { background: rgba(0, 0, 0, 0.32); }
.stage-dot[aria-current="true"] {
  width: 22px;
  background: var(--text-primary);
}

/* ---- B. section break — a plain whitespace gap, not a rule line.
   A literal hairline here (the old .simplicity-divider) read more like
   a UI/dashboard separator than an editorial page break — this
   codebase already made the same call for membership's benefit rows
   ("no decorative elements," pure rhythm instead of borders, see
   css/components/benefit-row.css history). The carousel and the photo
   gallery are different enough in kind (interactive vs. static, bottles
   vs. macro photography) that whitespace alone reads as a clear break;
   "NOTHING UNNECESSARY" — already styled as a tracked-caps label, the
   same treatment Apple uses for a new eyebrow — is what actually signals
   "new subsection," not a line above it. */
.simplicity-bottom {
  margin-top: clamp(64px, 9svh, 112px);
}

/* ---- C. "nothing unnecessary".
   MOBILE: a single-column stack — the editorial-intro text, then three
   HORIZONTAL cards (image left, title+caption right on a plain
   background).
   DESKTOP: the original composition — editorial-intro as the first of
   four equal columns, followed by three tall 4:5 image cards with the
   caption overlaid on the photo (see css/components/editorial-card.css). */
.simplicity-bottom .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 768px) {
  /* four equal columns: intro + the 3 cards, all one row. align-items:
     start so the 4:5 cards keep their own height rather than stretching
     to the (taller) intro column. */
  .simplicity-bottom .cards {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: clamp(24px, 3vw, 40px);
  }
  .simplicity-bottom .card-media { aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  /* horizontal card: image left, caption right. No frame/hairline — the
     card background is instead set to each photo's own background tone
     (sampled from the image corners, see the card--* variants below) so
     the caption half reads as a seamless continuation of the photo rather
     than a bordered panel sitting beside it. */
  .simplicity-bottom .card {
    display: grid;
    grid-template-columns: minmax(0, 42%) 1fr;
    align-items: stretch;
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  /* per-photo fills — each matches the near-white background of its own
     macro photo so image and caption share one continuous field. */
  .simplicity-bottom .card--fragrance { background: #f7f5f4; }
  .simplicity-bottom .card--sulfates { background: #f6f4f4; }
  .simplicity-bottom .card--dyes { background: #f6f4f4; }
  /* 5:4 landscape crop of the source photo — the horizontal card is wide,
     so a landscape image reads better than a tall one; its own width ×
     this ratio gives the card a definite height for the caption to centre
     within (no circular %-height). Overrides editorial-card.css's mobile
     `.card-media { height: clamp(...) }` overlay height. */
  .simplicity-bottom .card-media {
    aspect-ratio: 5 / 4;
    height: auto;
    border-radius: 0;
  }
  .simplicity-bottom .card-scrim { display: none; }
  .simplicity-bottom .card-caption {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(16px, 4.5vw, 24px);
    text-align: left;
  }
  .simplicity-bottom .card-text { max-width: none; }
}

/* ---- C.1 "editorial-intro" — plain text (label + headline + two body
   paragraphs), no border/background/shadow, occupying the left column on
   desktop and opening the stack on mobile. Left-aligned, calm and quiet
   next to the cards. The old "cap the height to one card and clip the
   overflow" machinery is gone now that the cards are horizontal (short)
   and the intro sits in its own tall left column with all the room it
   needs — so the text is sized generously instead of squeezed. */
/* matches "Join the waitlist" (.cta-head + .cta-head-lg combined, see
   css/components/cta-form.css) exactly — same size/tracking as the
   site's other tracked-caps label, not a one-off value. */
/* same style as the product-stage carousel's ".stage-name .type-label"
   (SHAMPOO): weight 500, --t-label (12px), 0.16em, uppercase, dark. */
.editorial-intro-label {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.editorial-intro-body {
  margin-top: clamp(14px, 1.8vw, 20px);
}
/* Body tier (--t-body, ~14-16) — one consistent smaller body size shared
   with the transparency/story/card supporting copy. */
.editorial-intro-body p {
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}