/* =========================================================================
   SECTIONS — page-level composition. Each section is a page experience
   that combines multiple components. Section rules should NOT redefine
   component internals — they lay out where components sit on the page.
   Grouped in scroll order:
     - Hero
     - Spectrum (Seven days, seven colours)
     - Ritual (Soak / Sip / Eat)
     - Products (pricing boxes)
     - Explorer (interactive day-by-day panel)
     - Science (Why it works)
     - Trust (Proof points)
     - FAQ
     - CTA (email capture)
   ========================================================================= */


/* ---------- Hero ----------
   Composition per Sprint 2.5:
   - Two-column asymmetric layout (type left ~48%, photo right ~42%)
   - Vertical mass balance: type block center aligns with photograph center
   - Generous whitespace; hero occupies most of the first viewport
   - Copy per Sprint 3 (frozen), photograph per "The Prepared Room" (Sprint 2)
*/

.hero{
  padding:96px 0 104px;
  min-height:calc(100vh - 96px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
/* Desktop layout uses named grid areas so the hero-heading (eyebrow + h1)
   and hero-body (supporting + CTAs + trust) can be split on mobile.
   Photo spans both rows on desktop; on mobile the heading moves to
   overlay the top of the photo. */
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,40fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "heading photo"
    "body    photo";
  column-gap:5%;
  row-gap:0;
  align-items:center;
  width:100%;
}
.hero-heading{grid-area:heading;align-self:end}
.hero-body{grid-area:body;align-self:start}
.hero-photo{grid-area:photo}

.hero .eyebrow{margin:0}

/* Editorial eyebrow — preserves the mixed-case brand line
   (MEVAYU · Thoughtfully Designed Ritual Nutrition). */
.eyebrow--hero{
  text-transform:none;
  letter-spacing:.08em;
  font-size:.75rem;
  font-weight:500;
  color:var(--green);
}

.hero h1{
  /* Fluid scale: 35px (mobile) → 43px (tablet) → 56px (desktop).
     min=2.2rem prevents mobile from shrinking further; middle formula
     grows smoothly across tablet range; max=3.5rem caps at large screens. */
  font-size:clamp(2.2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height:1.1;
  margin:24px 0 0;
  color:var(--green-deep);
  text-wrap:balance;                /* modern browsers choose even line breaks */
}
.hero h1 em{font-style:italic}
/* Line-break tags used ONLY on mobile to force the 3-line headline
   wrap. Hidden on desktop so the natural balanced wrap survives. */
.br-mobile{display:none}

.hero-supporting{
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--muted);
  margin:28px 0 40px;
  max-width:46ch;
}

.hero-acts{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:32px;
}

.hero-secondary{
  font-family:var(--body);
  font-size:.85rem;
  font-weight:500;
  color:var(--muted);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.hero-secondary:hover{
  color:var(--green-deep);
  border-bottom-color:var(--line);
}

/* Trust indicators — vertical list on all viewports.
   Semantic <ul> stripped of default list appearance. Small SVG
   check-mark before each item, warmer green icon on muted text.
   Deliberately lighter than compliance text. */
.hero-trust{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  font-size:.82rem;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--muted);
  max-width:52ch;
}
.hero-trust li{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
}
.hero-trust__icon{
  flex-shrink:0;
  color:var(--green);
  opacity:.85;
}

/* Photograph column — sized to give the scene room to breathe.
   The container accommodates any 4:5 to 3:4 portrait photograph. */
.hero-photo{
  justify-self:end;
  align-self:center;
  max-width:480px;
  width:100%;
}
.hero-photo picture,
.hero-photo img{
  display:block;
  width:100%;
}
.hero-photo img{
  border-radius:6px;
  box-shadow:0 20px 56px -26px rgba(22,41,26,.32);
}

@media (max-width:940px){
  .hero{
    min-height:auto;
    padding:0 0 40px;
  }
  /* Mobile: single column. Photo full-bleed with a subtle scrim overlaid
     on the top portion, heading absolutely positioned over that scrim,
     body flows below the photo (CTAs only — supporting text and trust
     list hidden on mobile per copy direction). */
  .hero .wrap{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "photo"
      "body";
    column-gap:0;
    row-gap:24px;
    position:relative;
    padding:0 24px;
  }
  .hero-heading{
    position:absolute;
    top:32px;
    left:24px;
    right:24px;
    z-index:2;
    align-self:start;
    grid-area:unset;
    max-width:none;
  }
  /* Force headline into 3 lines on mobile:
     "Healthy choices / should be the / easiest ones."
     via <br class="br-mobile"> tags that are display:none on desktop. */
  .br-mobile{display:initial}
  .hero-heading h1{text-wrap:auto}
  /* Slight weight bump + hairline shadow — improves text definition
     against varied image background without heavy over-darkening */
  .hero-heading h1{
    font-weight:500;
    text-shadow:0 1px 2px rgba(251,250,246,.35);
  }
  .hero-heading .eyebrow--hero{
    text-shadow:0 1px 2px rgba(251,250,246,.35);
  }
  .hero-photo{
    grid-area:photo;
    justify-self:stretch;
    max-width:none;
    margin:0 -24px;
    width:calc(100% + 48px);
    position:relative;
  }
  /* Subtle scrim on top portion of image — brightens the cream wall
     slightly so the deep-green headline reads cleanly. */
  .hero-photo::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:52%;
    background:linear-gradient(
      to bottom,
      rgba(251,250,246,.42) 0%,
      rgba(251,250,246,.18) 55%,
      rgba(251,250,246,0) 100%
    );
    z-index:1;
    pointer-events:none;
  }
  .hero-photo picture,
  .hero-photo img{position:relative;z-index:0}
  .hero-photo img{
    border-radius:0;
    box-shadow:none;
  }
  .hero-body{
    grid-area:body;
    align-self:start;
  }
  /* Hide supporting sentence and trust indicators on mobile.
     Image + heading + CTAs carry the entire mobile hero. */
  .hero-body .hero-supporting,
  .hero-body .hero-trust{display:none}
  .hero-acts{margin:0}
}
@media (max-width:560px){
  .hero{padding:0 0 32px}
  .hero .wrap{row-gap:20px}
  .hero-acts{gap:14px}
  .hero-acts .btn{width:100%;justify-content:center}
}


/* ---------- Ritual Library (horizontal scroll catalogue) ----------
   Horizontal-scroll carousel of every ritual — live + coming soon.
   Sits between Hero and Spectrum on both mobile and desktop.

   Why horizontal scroll and not a vertical stack:
     - Signals a growing catalogue rather than a two-SKU shop
     - Keeps the fold compact (visitor sees several cards without scroll)
     - Native mobile gesture (swipe) is more comfortable than tall scrolling

   Scroll affordance:
     - Mobile: card 1 fully visible + half of card 2 peeking (see .fb-card width math)
     - Desktop: ~3 cards visible + partial 4th peeking, no edge-to-edge breakout
     - Mobile also gets a right-edge gradient fade as secondary cue

   The desktop pricing section (#boxes) is unchanged and lives below —
   Library is discovery, boxes is conversion. */

.featured-boxes{
  display:block;
  background:var(--boxes-bg);
  padding:48px 0;
  position:relative;
}
.fb-eyebrow{
  font-family:var(--body);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 22px;
  font-weight:600;
}

/* Desktop row: cards flow inside .wrap; the partial card at the right
   edge signals scrollability. No breakout — matches the rest of the
   site's centered layout convention. */
.fb-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0 12px;
}
.fb-row::-webkit-scrollbar{display:none}
.fb-row:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}

.fb-card{
  flex:0 0 320px;
  min-height:196px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px 20px;
  color:var(--green-deep);
  transition:transform .3s, border-color .3s;
  position:relative;
  text-decoration:none;
}
.fb-card:hover{
  transform:translateY(-2px);
  border-color:var(--green-deep);
}

.fb-card--featured{
  background:var(--green-deep);
  color:#fff;
  border-color:var(--green-deep);
}

/* Coming-soon variant: same footprint so the row stays uniform, but
   visually quieter — transparent card sitting on the section bg with
   just a hairline border. Rendered as <article>, not <a>: the whole
   card is non-clickable, only the "Notify me" pill inside is. */
.fb-card--soon{
  background:transparent;
  border-color:var(--line);
  color:var(--green-deep);
}
.fb-card--soon:hover{
  transform:none;
  border-color:var(--line);
}

.fb-tag{
  display:inline-block;
  align-self:flex-start;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--d4);
  color:var(--green-deep);
  padding:.4em .9em;
  border-radius:100px;
  margin-bottom:12px;
}
/* Coming-soon pill: outlined, muted — signals "not yet buyable" without shouting */
.fb-tag--soon{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
}

.fb-name{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:400;
  margin:0 0 6px;
  line-height:1.1;
}
/* Duration subtitle under the ritual name (e.g., "7 Days", "14 Days").
   Body font keeps the numerals as regular Arabic figures — Cormorant
   ships old-style figures where "1" reads as Roman numeral I. */
.fb-name-sub{
  display:block;
  margin-top:4px;
  font-family:var(--body);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--muted);
}
.fb-card--featured .fb-name-sub{color:var(--on-dark-1)}

/* USP bullet list — the meat of each card. Small typography with soft
   green dots. margin:8px 0 auto means the list sits just under the name
   and any following content (notify pill on coming-soon cards) is pushed
   to the bottom by the auto bottom-margin. */
.fb-usps{
  list-style:none;
  padding:0;
  margin:8px 0 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.78rem;
  line-height:1.4;
  color:var(--muted);
}
.fb-usps li{
  padding-left:12px;
  position:relative;
}
.fb-usps li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--green);
}
/* Featured card variant: white cards on dark green — brighten text and use
   the soft yellow dot so bullets read against the dark background */
.fb-card--featured .fb-usps{color:var(--on-dark-1)}
.fb-card--featured .fb-usps li::before{background:var(--d4)}
/* Coming-soon variant: quieter dot color matches the overall muted feel */
.fb-card--soon .fb-usps li::before{background:var(--muted)}

/* Card bottom CTAs — pill buttons. Three semantic variants sharing base:
     .fb-cta    → filled     — primary "Add to cart" on buyable rituals
     .fb-more   → outlined   — secondary "Know more" beside Add to cart
     .fb-notify → outlined   — coming-soon "Notify me" (waitlist)
   Filled reads louder than outlined so the buy action wins the scan. */
.fb-cta,
.fb-notify,
.fb-more{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  border-radius:100px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Actions container — holds Add-to-cart slot + Know more side-by-side.
   margin-top:auto pushes the row to the card bottom.
   flex:1 on children makes the two buttons split the width evenly. */
.fb-actions{
  margin:auto 0 0;
  display:flex;
  gap:8px;
  align-items:stretch;
}
.fb-actions > *{flex:1 1 0}
/* .fb-slot wraps whatever the JS currently wants to render (Add to cart
   button OR quantity stepper) — its child fills the slot */
.fb-slot{display:flex}
.fb-slot > *{flex:1}

/* Quantity stepper — appears in place of "Add to cart" once an item is
   in the cart. Same visual weight as the button it replaces so the card
   layout stays balanced. Rendered by JS; shared between the Library card
   slot and the cart-item footer. */
.qty-stepper{
  display:inline-flex;
  align-items:stretch;
  justify-content:space-between;
  border:1px solid var(--green-deep);
  border-radius:100px;
  overflow:hidden;
  font-family:var(--body);
  background:#fff;
  min-height:38px;
}
.qty-stepper__btn{
  background:none;
  border:0;
  cursor:pointer;
  width:34px;
  font-size:1.15rem;
  font-weight:400;
  color:var(--green-deep);
  padding:0;
  transition:background .2s ease, color .2s ease;
}
.qty-stepper__btn:hover{background:var(--green-deep);color:#fff}
.qty-stepper__btn:focus-visible{
  outline:2px solid var(--green);
  outline-offset:-2px;
}
.qty-stepper__value{
  min-width:28px;
  display:grid;
  place-items:center;
  font-weight:600;
  font-size:.9rem;
  color:var(--green-deep);
  font-variant-numeric:lining-nums;
}
/* Featured (dark green) card variant — invert so the stepper reads on the dark surface */
.fb-card--featured .qty-stepper{
  background:transparent;
  border-color:#fff;
}
.fb-card--featured .qty-stepper__btn{color:#fff}
.fb-card--featured .qty-stepper__btn:hover{background:#fff;color:var(--green-deep)}
.fb-card--featured .qty-stepper__value{color:#fff}

/* Primary CTA — "Add to cart" is a 2-line label (Add / to cart), so this
   pill is a small vertical flex column. The two <span> children stack. */
.fb-cta{
  flex-direction:column;
  gap:1px;
  line-height:1.05;
  padding:.55em 1em;
  background:var(--green-deep);
  color:#fff;
  border:1px solid var(--green-deep);
}
.fb-cta > span{display:block}
.fb-cta:hover{
  background:var(--green);
  border-color:var(--green);
  transform:translateY(-1px);
}
/* On the featured (dark green) card, invert the fill so the button still
   separates from its surface. */
.fb-card--featured .fb-cta{
  background:#fff;
  color:var(--green-deep);
  border-color:#fff;
}
.fb-card--featured .fb-cta:hover{
  background:var(--d4);
  border-color:var(--d4);
}
.fb-cta:focus-visible{outline:2px solid var(--d4);outline-offset:2px}

/* Secondary CTAs — outlined variant, single-line label */
.fb-more,
.fb-notify{
  padding:.6em 1.1em;
  background:transparent;
  color:var(--green-deep);
  border:1px solid var(--green-deep);
}
.fb-more:hover,
.fb-notify:hover{
  background:var(--green-deep);
  color:#fff;
  transform:translateY(-1px);
}
.fb-more:focus-visible,
.fb-notify:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* On the dark featured card, the outlined secondary needs light borders */
.fb-card--featured .fb-more{
  color:#fff;
  border-color:rgba(255,255,255,.5);
}
.fb-card--featured .fb-more:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
}

/* Coming-soon "Notify me" sits alone (no companion CTA) — needs the same
   push-to-bottom that .fb-actions provides for the Basic/Standard row. */
.fb-notify{
  align-self:flex-start;
  margin:auto 0 0;
}

/* Mobile overrides ----------------------------------------------------
   - Scroll row breaks edge-to-edge for the immersive swipe feel
   - Card width computed so exactly 1 full card + half of the next fit:
       X + gap + X/2 = 100vw - scroll-padding-left
       1.5X = 100vw - 36px  (24px pad + 12px gap)
       X = (100vw - 36px) / 1.5
     min-width 200px is a floor for very small screens. */
@media (max-width:940px){
  .featured-boxes{padding:32px 0 36px}
  .fb-eyebrow{margin:0 0 18px}
  .fb-row{
    gap:12px;
    margin:0 -24px;
    padding:4px 24px 12px;
    scroll-padding-left:24px;
  }
  .fb-card{
    flex:0 0 calc((100vw - 36px) / 1.5);
    min-width:200px;
    max-width:340px;
    min-height:180px;
    padding:22px 18px;
  }
  .fb-name{font-size:1.35rem}
  .fb-usps{font-size:.76rem;gap:5px}
  .fb-cta,
  .fb-notify{font-size:.78rem;padding:.55em 1em}

  /* Right-edge fade — secondary scroll cue for wider phones where the
     card-2 peek is less obvious. Static gradient stays visible at end
     of scroll, a tolerable trade for the simplicity of no JS. */
  .featured-boxes::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:36px;
    background:linear-gradient(to right, transparent, var(--boxes-bg));
    pointer-events:none;
  }
}


/* ---------- Spectrum (Seven days, seven colours) ---------- */

.spectrum{background:var(--green-deep);color:#fff}
.spectrum h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.9rem);margin-top:12px}
.spectrum p.sub{color:var(--on-dark-1);margin:12px 0 0;max-width:46ch;font-size:.95rem}

/* ---------- About (short intro block) ----------
   Sits between the Ritual Library (light cream cards) and the Ritual
   Advantage (dark green section). A quiet editorial pause on the canvas
   background — answers "what does Mevayu make" in 3–4 sentences so a
   first-time visitor grasps the product before they see the benefits. */

.about{background:var(--canvas)}
.about h2{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  max-width:26ch;
  text-wrap:balance;
}
.about-body{
  margin:24px 0 0;
  max-width:58ch;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--green-mid);
}

/* Closing quote — Cormorant italic in a softer color reads as a
   considered postscript rather than another prose sentence. Smaller
   font-size so it visually recedes below the main paragraph. */
.about-quote{
  margin:22px 0 0;
  max-width:58ch;
  font-family:var(--display);
  font-style:italic;
  font-size:1rem;
  line-height:1.5;
  color:var(--muted);
}

@media (max-width:940px){
  .about-body{font-size:.98rem;line-height:1.65}
  .about-quote{font-size:.95rem}
}


/* ---------- Benefit cards (static, horizontal scroll) ----------
   Six small cards, each showing number + title + description on the face.
   Same horizontal-scroll + peek pattern as .fb-row so the row rhythm on
   this page stays consistent. No interactivity — content is scannable
   at a glance rather than hidden behind a tap.

   The list is a plain <ul> of <li> — no button semantics needed since
   there's nothing to activate. Screen readers walk the list in order. */

.benefits-row{
  display:flex;
  gap:16px;
  margin:38px 0 0;
  padding:4px 0 12px;
  padding-inline-start:0;          /* reset <ul> browser default */
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.benefits-row::-webkit-scrollbar{display:none}

.benefit-card{
  flex:0 0 260px;
  scroll-snap-align:start;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}

.benefit-num{
  font-family:var(--body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--d4);
  line-height:1;
}

.benefit-title{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:400;
  line-height:1.15;
  color:#fff;
  margin:0;
  text-wrap:balance;
}

.benefit-desc{
  font-family:var(--body);
  font-size:.94rem;
  line-height:1.5;
  color:var(--on-dark-2);          /* softer than pure white — sits below the title */
  margin:0;
  text-wrap:balance;
}

@media (max-width:940px){
  .benefits-row{
    gap:12px;
    margin:32px -24px 0;
    padding:4px 24px 12px;
    scroll-padding-left:24px;
  }
  .benefit-card{
    flex:0 0 auto;
    width:clamp(220px, 72vw, 280px);
    padding:20px;
    gap:10px;
  }
  .benefit-title{font-size:1.4rem}
  .benefit-desc{font-size:.9rem}
}


/* ---------- Ritual (How to use — two sachet types, icon-driven) ----------
   Two guide cards side by side (Soak & Sip, Eat As-Is), each showing the
   consumption steps as icon-circles with arrows between them. Minimal
   text — most communication is visual so a first-time visitor grasps the
   ritual in one glance without reading a paragraph. */

.ritual h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:12px}

.sachet-guides{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:36px;
}
.sachet-guide{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.sachet-guide__head{display:flex;flex-direction:column;gap:6px}
.sachet-guide__type{
  font-family:var(--body);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green);
}
.sachet-guide__name{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:400;
  line-height:1.1;
  color:var(--green-deep);
  margin:0;
}

/* Steps row — icon circles with arrows between. Flex so both 2-step and
   3-step guides stay visually balanced (icons distribute evenly). */
.sachet-steps{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  gap:6px;
}
.sachet-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:0 1 auto;
  text-align:center;
}
.sachet-step__icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--boxes-bg);
  color:var(--green-deep);
  display:grid;
  place-items:center;
  transition:background .3s ease;
}
.sachet-guide:hover .sachet-step__icon{background:var(--color-primary-100)}
.sachet-step__icon svg{width:28px;height:28px}
.sachet-step__label{
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:400;
  color:var(--green-deep);
  line-height:1;
}
/* Note (overnight / in the morning / anytime) — Cormorant italic keeps it
   in the same typographic family as the label above, just quieter. Body-
   font notes felt like a foreign voice inside a display-font card. */
.sachet-step__note{
  font-family:var(--display);
  font-style:italic;
  font-size:.88rem;
  color:var(--muted);
  line-height:1;
  margin-top:-2px;
}

/* Arrow between steps — sits centered on the icon line, not the labels */
.sachet-step__arrow{
  color:var(--muted);
  display:grid;
  place-items:center;
  margin-top:18px;   /* aligns arrow center with icon center (60/2 - 12) */
  opacity:.5;
  flex:0 0 auto;
}
.sachet-step__arrow svg{width:20px;height:20px}

/* Mobile compression — trim padding, section spacing, and icon size so
   the whole section fits in a single mobile viewport without scroll. */
@media (max-width:940px){
  .ritual{padding-top:44px;padding-bottom:36px}
  .sachet-guides{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .sachet-guide{padding:20px 18px;gap:16px}
  .sachet-guide__name{font-size:1.25rem}
  .sachet-step{gap:6px}
  .sachet-step__icon{width:48px;height:48px}
  .sachet-step__icon svg{width:22px;height:22px}
  .sachet-step__label{font-size:.98rem}
  .sachet-step__note{font-size:.82rem}
  .sachet-step__arrow{margin-top:13px}
  .sachet-step__arrow svg{width:16px;height:16px}
}


/* ---------- Products (pricing boxes) ---------- */

.boxes{background:var(--boxes-bg)}
.boxes h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:12px}
/* Pricing section is now hidden — the pricing cards live inside the cart
   drawer instead (see .cart in components.css). Kept in the DOM so the
   #boxes anchor doesn't 404 from any stray links; can be deleted entirely
   once every reference has been re-pointed. */
#boxes{display:none}

/* Horizontal scroll catalogue — same swipe pattern as .fb-row and .flip-row
   so the "cards you can swipe through" behavior is uniform across the page.
   On desktop both cards fit comfortably inside the wrap; scroll only kicks
   in on narrower viewports. */
.boxes-row{
  display:flex;
  gap:22px;
  margin-top:44px;
  padding:4px 0 12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.boxes-row::-webkit-scrollbar{display:none}
.boxes-row:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}

@media (max-width:940px){
  /* Mobile: edge-to-edge scroll with peek so users see there's a second card.
     Card width leaves ~15% peek: 1 card + gap + partial card 2 = 100vw
     → (100vw - 36px) / 1.15 (24px scroll-padding + 12px gap accounted for) */
  .boxes-row{
    gap:14px;
    margin:44px -24px 0;
    padding:4px 24px 12px;
    scroll-padding-left:24px;
  }
}


/* ---------- Explorer (interactive day-by-day panel) ---------- */

.explore{background:var(--canvas)}
.explore h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:12px}

/* Panel is a single vertical card now — colored header (chip-card) at top,
   day-body (meta + tags) below. Both Standard and Basic tabs render into
   this same structure; the phase-split lives in day-body for 14-day. */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  opacity:0;transform:translateY(8px);transition:.4s;
  margin-top:12px;
}
.panel.in{opacity:1;transform:none}

.day-body{padding:26px 30px 30px}

/* Meta row — sachet count left, weight+method right. Hairline underneath
   separates it from the ingredient tags that follow. */
.day-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.day-meta__l{
  font-family:var(--body);
  font-size:.92rem;
  font-weight:600;
  color:var(--green-deep);
  letter-spacing:.02em;
}
.day-meta__r{
  font-family:var(--body);
  font-size:.86rem;
  color:var(--muted);
  letter-spacing:.02em;
  text-align:right;
}

@media (max-width:940px){
  .day-body{padding:22px 22px 26px}
  .day-meta{padding-bottom:14px;margin-bottom:18px;gap:8px}
  .day-meta__l{font-size:.88rem}
  .day-meta__r{font-size:.82rem}
}

/* Coming-soon placeholder — benefits list + Notify me CTA. Renders inside
   .day-body when a not-yet-launched ritual is selected. */
.coming-benefits{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.coming-benefits li{
  position:relative;
  padding-left:22px;
  color:var(--green-deep);
  font-size:.95rem;
  line-height:1.5;
}
.coming-benefits li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
}
.coming-notify{align-self:flex-start}

@media (max-width:940px){
  .coming-benefits li{font-size:.9rem}
}


/* ---------- Science (Why it works) ---------- */

.why{background:var(--green-mid);color:#fff}
.why .wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.why h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:12px}
.why p{color:var(--on-dark-2);margin:16px 0 0;font-size:.95rem}
/* Citation italicized so it reads as a source attribution rather than a
   plain sentence — same pattern the About section's closing quote uses. */
.why .citation{
  font-size:.75rem;
  color:var(--on-dark-4);
  margin-top:14px;
  font-style:italic;
}

/* Number cards — compact side-by-side layout: big number left, short
   description right, vertically centered so cards don't look ragged when
   descriptions wrap differently. Numbers right-aligned in a narrow column
   so the description text starts at the same x-offset in every card. */
.nums{display:grid;gap:10px}
.num{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:20px;
}
.num b{
  font-family:var(--display);
  font-size:2.3rem;
  font-weight:500;
  color:#fff;
  min-width:70px;
  line-height:1;
  text-align:right;
  font-variant-numeric:lining-nums;
}
.num span{
  font-size:.92rem;
  color:var(--on-dark-2);
  line-height:1.4;
}

@media (max-width:940px){
  .why .wrap{grid-template-columns:1fr;gap:28px}
  .num{padding:14px 18px;gap:16px}
  .num b{font-size:2rem;min-width:60px}
  .num span{font-size:.88rem}
}


/* ---------- Trust (Proof points) ---------- */

.trust h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:12px}

/* Proof grid — auto-fit adapts to any card count. With 4 cards this
   naturally renders as 2×2 on typical desktop widths and single column
   on narrow screens. minmax(240px, 1fr) prevents cards from getting
   too narrow to read. */
.proof{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:26px;
  margin-top:42px;
}
.pf h3{font-size:1.35rem;margin-bottom:8px}
.pf p{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}

@media (max-width:940px){
  .proof{grid-template-columns:1fr;gap:22px;margin-top:32px}
}


/* ---------- FAQ ---------- */

.faq h2{font-size:clamp(1.9rem,3.8vw,2.6rem);margin-top:12px}
.faq .wrap{display:grid;grid-template-columns:.6fr 1.4fr;gap:46px;align-items:start}

@media (max-width:940px){
  .faq .wrap{grid-template-columns:1fr;gap:32px}
}


/* ---------- CTA (email capture) ---------- */

.cta{background:var(--d1);color:#fff}
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cta .eyebrow{color:rgba(255,255,255,.8)}
.cta h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:12px}
.cta p{color:rgba(255,255,255,.85);margin:14px 0 0;font-size:.92rem}

@media (max-width:940px){
  .cta .wrap{grid-template-columns:1fr;gap:32px}
}