:root{
  --cream:#F5FFE9;
  --cream-soft:#FBFFF5;
  --cream-deep:#E6F4D4;

  --ink:#10231A;
  --ink-soft:#4D6659;

  --green:#00B34F;
  --green-dark:#008F3F;
  --green-deeper:#006B31;

  --yellow:#FFCC2F;
  --yellow-soft:#FFE49A;

  --sage-light:#CFF3D8;

  --nav-pill:#9FB08F;

  --gold:#F5C518;
  --gold-dark:#E0AF0A;

  --red:#D64545;

  --line:rgba(16,35,26,.14);

  --shadow-soft:0 22px 50px -24px rgba(16,35,26,.30);
  --shadow-green:0 18px 35px -18px rgba(0,179,79,.48);

  --radius-lg:34px;
  --radius-md:20px;

  --nav-h:0px;
}

/* =========================================================
   SQUIRCLE CORNERS

   Native CSS corner-shape (Chromium 139+) draws a true
   continuous-curvature superellipse instead of a circular
   arc -- the same "corner smoothing" math behind iOS icons
   and Figma's smoothing slider. It layers on top of
   border-radius (radius = size of the corner, corner-shape =
   type of curve) and simply falls back to a normal rounded
   corner in browsers that don't recognise it yet, so it's
   safe to ship as progressive enhancement everywhere.
========================================================= */

@supports (corner-shape:squircle){

  /* pill / fully-rounded controls */
  .btn,
  .btn-shop-now,
  .footer-signup-submit,
  .footer-signup-form input,
  .pill,
  .texture-label,
  .active-chip,
  .product-price,
  .reviews-tab,
  .nav-logo,
  .nav-actions-group,

  /* icon circles */
  .social-icon,
  .footer-socials a,
  .nav-icon-btn,
  .side-drawer-close,
  .value-icon,
  .feels-icon-circle,
  .packed-icon-circle,

  /* cards / panels */
  .side-drawer,
  .side-drawer-product,
  .side-drawer-hero,
  .product-visual,
  .texture-stage,
  .value-card,
  .social-card,
  .img-placeholder,
  .story-card,
  .corners-card,
  .review-card,
  .faq-item,
  .final-cta-copy,
  .product-copy,

  /* product illustration (tube/cap/label) */
  .tube-body,
  .tube-label,
  .tube-neck,
  .tube-cap,
  .tube-full-cap,
  .tube-full-neck,
  .tube-full-body{
    /* squircle == superellipse(2): the continuous-curvature superellipse
       that is Apple's actual iOS app-icon curve (not a circular arc). */
    corner-shape:squircle;
  }

}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:150px;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  line-height:1.05;
  margin:0;
  letter-spacing:-.025em;
}

p{
  margin:0;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font-family:inherit;
  cursor:pointer;
}

img,
svg{
  display:block;
  max-width:100%;
}

.wrap{
  width:min(1180px,100%);
  margin:0 auto;
  padding:0 32px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible{
  outline:2.5px solid var(--green);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:15px 30px;
  border-radius:999px;

  font-weight:700;
  font-size:.98rem;

  border:1.5px solid transparent;

  transition:
    transform .25s ease,
    background-color .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}

.btn-primary{
  background-color:var(--green);
  color:#fff;
  box-shadow:var(--shadow-green);
}

.btn-primary:hover{
  background-color:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 20px 36px -18px rgba(0,143,63,.65);
}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}

.btn-ghost:hover{
  background-color:var(--green);
  border-color:var(--green);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--shadow-green);
}

.btn-small{
  padding:11px 22px;
  font-size:.88rem;
}

/* =========================================================
   NAV — Reveal-on-Scroll / Smart Sticky Header

   ".site-header" is the single unit that slides: it holds the
   thin brand strip plus the transparent nav row, and the two
   travel together as one block. It's pinned with
   position:sticky (so it behaves like normal in-flow content
   until it hits the top, exactly like the original nav), and
   scroll direction toggles a transform on top of that sticky
   position:
     - scrolling down past a small threshold -> slides fully
       up and out of view (".site-header--hidden"), with an
       eased transition so the exit reads as a deliberate slide.
     - scrolling up, at any point -> the hidden class is
       removed, using that same eased transition so the reveal
       slides back in rather than snapping. See the SMART STICKY
       HEADER script block for the scroll-direction logic that
       drives this class.
========================================================= */

.site-header{
  position:sticky;
  top:56px;
  z-index:500;

  transition:transform .6s cubic-bezier(.16,.84,.24,1);
  will-change:transform;
}

.site-header--hidden{
  transform:translateY(-100%);
}

/* =========================================================
   ANNOUNCEMENT BAR

   Alternates between a "promo" (luxury gold) message and a
   "brand" (green) message. Timing between swaps is randomised
   on every rotation (10s / 8s / 12s) by the JS below.
========================================================= */
.announcement-bar{
  position:sticky;
  top:0;
  z-index:700;

  display:flex;
  align-items:center;
  justify-content:center;

  height:56px;
  padding:8px 20px;

  text-align:center;

  background:var(--green);
  transition:background-color .5s ease;

  overflow:hidden;
}

.announcement-bar[data-variant="brand"]{
  background:var(--yellow);
}

.announcement-bar-text{
  font-size:.88rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;

  max-width:900px;

  opacity:1;
  transform:translateY(0);
  transition:opacity .4s ease,transform .4s ease;
}

.announcement-bar[data-variant="brand"] .announcement-bar-text{
  color:var(--ink);
}

.announcement-highlight{
  color:var(--ink);
  white-space:nowrap;
}

.announcement-bar-text.swap-out{
  opacity:0;
  transform:translateY(-8px);
}

@media(max-width:560px){
  .announcement-bar-text{
    font-size:.78rem;
  }
}

.site-nav{
  /* fully transparent — every control below carries its own
     background, so the row itself never needs one */
  background:transparent;
}

.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 32px;

  max-width:1180px;
  margin:0 auto;

  position:relative;
}

.nav-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:48px;
  padding:0 26px;
  border-radius:999px;

  background:var(--nav-pill);
  box-shadow:var(--shadow-soft);

  transition:box-shadow .25s ease,transform .25s ease;
}

.nav-logo-word{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:1.65rem;
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;

  transition:color .25s ease;
}

.nav-logo:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(16,35,26,.45);
}

.nav-actions{
  display:flex;
  align-items:center;
}

/* Single compartment: Shop Now + cart + settings share one pill
   so the three controls read as one grouped unit rather than
   three separate floating pieces. */
.nav-actions-group{
  display:flex;
  align-items:center;
  gap:6px;

  padding:6px;
  border-radius:999px;

  background:var(--nav-pill);
  box-shadow:var(--shadow-soft);
}

.btn-shop-now{
  position:relative;
  display:inline-flex;
  align-items:center;

  background:var(--gold);
  color:var(--ink);

  padding:10px 18px;
  border-radius:999px;

  font-weight:800;
  font-size:.86rem;

  transition:transform .18s ease,box-shadow .25s ease,background-color .25s ease;
}

.btn-shop-now:hover{
  background:var(--gold-dark);
  box-shadow:0 14px 26px -14px rgba(16,35,26,.45);
}

.nav-icon-btn{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  background:transparent;
  border:none;
  border-radius:50%;

  transition:transform .25s ease,background-color .25s ease;
}

.nav-icon-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.18);
}

.nav-icon-btn svg{
  width:17px;
  height:17px;
  stroke:#fff;
}

/* Double-line (settings/menu) icon */
.nav-double-lines{
  width:18px;
  height:12px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.nav-double-lines span{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;

  transition:transform .3s ease,opacity .3s ease;
}

.nav-settings[aria-expanded="true"] .nav-double-lines span:first-child{
  transform:translateY(5px) rotate(45deg);
}

.nav-settings[aria-expanded="true"] .nav-double-lines span:last-child{
  transform:translateY(-5px) rotate(-45deg);
}

.nav-cart-dot{
  position:absolute;
  top:8px;
  right:8px;

  width:9px;
  height:9px;
  border-radius:50%;

  background:var(--gold);
  border:1.5px solid var(--nav-pill);
}

/* =========================================================
   SLIDE-OUT SIDE DRAWER
========================================================= */

body.drawer-lock{
  overflow:hidden;
}

.side-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:600;

  background:rgba(16,35,26,.45);
  backdrop-filter:blur(2px);

  opacity:0;
  pointer-events:none;

  transition:opacity .35s ease;
}

.side-drawer-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.side-drawer{
  position:fixed;
  top:70px;
  right:30px;
  bottom:14px;
  z-index:601;

  width:min(400px,88vw);
  overflow-y:auto;

  border-radius:var(--radius-lg);

  background:var(--cream-soft);
  box-shadow:0 24px 60px -20px rgba(16,35,26,.35);

  padding:20px 22px 26px;

  transform:translateX(calc(100% + 44px));
  transition:transform .5s cubic-bezier(.16,.84,.24,1);
}

.side-drawer.open{
  transform:translateX(0);
}

.side-drawer-head{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  margin-bottom:10px;
}

.side-drawer-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  background:var(--sage-light);
  border:none;
  border-radius:50%;

  transition:transform .2s ease,background-color .2s ease;
}

.side-drawer-close svg{
  width:16px;
  height:16px;
  stroke:var(--ink);
}

.side-drawer-close:hover{
  background:var(--cream-deep);
  transform:rotate(90deg);
}

.side-drawer-cta{
  font-family:'Fraunces',serif;
  font-weight:650;
  font-size:1.05rem;
  color:var(--ink);
  margin:4px 0 12px;
}

.side-drawer-product{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:12px 14px;
  border-radius:var(--radius-md);

  background:var(--cream-deep);
  margin-bottom:10px;
}

.side-drawer-product-name{
  font-weight:700;
  color:var(--ink);
  font-size:.96rem;
}

.side-drawer-product-sub{
  color:var(--ink-soft);
  font-size:.82rem;
}

.side-drawer-product-btn{
  padding:9px 18px;
  font-size:.85rem;
  background:var(--green);
  color:#fff;
}

/* Empty placeholder for a Promotional Banner / Hero Graphic —
   swap the background/content for the real product render. */
.side-drawer-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  height:130px;
  margin-bottom:12px;
  border-radius:var(--radius-lg);

  background:repeating-linear-gradient(
    135deg,
    var(--sage-light),
    var(--sage-light) 10px,
    var(--cream-deep) 10px,
    var(--cream-deep) 20px
  );
  border:1.5px dashed var(--nav-pill);

  color:var(--ink-soft);
  font-size:.85rem;
  font-weight:600;
  padding:12px;
}

.side-drawer-links{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  flex-direction:column;
}

.side-drawer-links li + li{
  border-top:1px solid var(--line);
}

.side-drawer-links a{
  display:block;
  padding:10px 4px;

  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);

  transition:color .2s ease,padding-left .2s ease;
}

.side-drawer-links a:hover{
  color:var(--green-dark);
  padding-left:8px;
}

@media(max-width:520px){

  .nav-row{
    padding:14px 18px;
  }

  .nav-logo{
    padding:0 18px;
  }

  .nav-logo-word{
    font-size:1.3rem;
  }

  .nav-actions-group{
    gap:4px;
    padding:5px;
  }

  .btn-shop-now{
    padding:11px 16px;
    font-size:.82rem;
  }

  .nav-icon-btn{
    width:38px;
    height:38px;
  }

  .nav-icon-btn svg{
    width:18px;
    height:18px;
  }

  .side-drawer{
    top:64px;
    right:14px;
    bottom:8px;

    width:calc(100vw - 28px);
    border-radius:var(--radius-md);

    padding:16px 18px 22px;
  }

  .side-drawer-cta{
    font-size:1.15rem;
  }

  .side-drawer-hero{
    height:120px;
  }
}

/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  overflow:hidden;

  /* Top padding trimmed from 90px -> 48px so the whole hero
     (headline, paragraph, animation, buttons) sits noticeably
     higher on the page without crowding the sticky nav. */
  padding:48px 32px 60px;
}

.hero-inner{
  max-width:1180px;
  margin:0 auto;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  position:relative;
  z-index:2;
}

.hero-badge-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;

  margin-bottom:26px;
}

/* Hero pill rows (index.html + our-science.html) always stay on
   a single row: the two badges shrink fluidly with the viewport
   rather than wrapping, and each pill's label is forced to one
   line. Scoped to .hero so it doesn't affect other .hero-badge-row
   instances elsewhere (e.g. the Dr. AURA credential chips). */
.hero .hero-badge-row{
  flex-wrap:nowrap;
  gap:clamp(4px,1.2vw,10px);
}

.hero .hero-badge-row .pill{
  font-size:clamp(.55rem,2.4vw,.8rem);
  padding:clamp(3px,1vw,7px) clamp(5px,1.5vw,16px);
  line-height:1.2;
  white-space:nowrap;
}

.pill{
  display:inline-flex;
  align-items:center;

  background:var(--cream-soft);

  border:1px solid var(--line);

  padding:7px 16px;

  border-radius:999px;

  font-size:.8rem;
  font-weight:600;

  color:var(--ink-soft);
}

/* "Whipped mousse texture" pill — hover reveals a cloud emoji
   inside the pill only. No scale/lift and no text motion. */
.pill-mousse{
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:background-color .3s ease;
}

.pill-mousse:hover{
  background:var(--cream-deep);
}

.pill-mousse-cloud{
  display:inline-block;
  width:0;
  opacity:0;
  margin-left:0;
  transform:scale(.4) rotate(-15deg);

  transition:width .3s ease,opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1),margin-left .3s ease;
}

.pill-mousse:hover .pill-mousse-cloud{
  width:1.1em;
  opacity:1;
  margin-left:6px;
  transform:scale(1) rotate(0deg);
}

.hero h1{
  /*
    "Scoop. Melt. Bloom." always renders on ONE line at every
    viewport width, and on the stacked (non-split) layout it
    stretches to fill the full content width up to the hero's
    side margins. white-space:nowrap forbids wrapping, so the
    font-size is what adapts instead.

    9.2vw is sized against the string's own width (~9.2em in this
    ExtraBold weight at -.025em tracking): 9.2vw × 9.2em ≈ 85vw,
    which lands just inside the viewport minus the hero's side
    padding at every narrow-screen size. The clamp bounds only
    catch the extremes — the 1.5rem floor keeps it readable on
    very small phones, and the 5.5rem ceiling is a safety net
    that effectively never triggers before the split-layout
    override below replaces this rule at 980px.
  */
  font-size:clamp(1.5rem,9.2vw,5.5rem);
  white-space:nowrap;
  max-width:none;

  opacity:0;
  transform:translateY(18px);

  animation:rise .9s cubic-bezier(.2,.8,.2,1) .15s forwards;
}

.hero-sub{
  margin-top:22px;

  max-width:46ch;

  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;

  font-size:1.28rem;

  color:var(--ink-soft);

  opacity:0;
  transform:translateY(18px);

  animation:rise .9s cubic-bezier(.2,.8,.2,1) .32s forwards;
}

.hero-ctas{
  margin-top:34px;

  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;

  opacity:0;
  transform:translateY(18px);

  animation:rise .9s cubic-bezier(.2,.8,.2,1) .48s forwards;
}

/* --- Hero stacking order (narrow screens) --------------------------
   Default layout is a single centred column. `order` puts the
   animated blob visual (order 4) directly under the paragraph and
   the buttons (order 5) underneath it, so on phones the flow reads:

       badges -> heading -> paragraph -> animation -> buttons

   On wide screens .hero-inner switches to a two-column grid (see
   the @media block at the end of this section), where flex `order`
   is ignored and the copy and visual sit side by side instead.
------------------------------------------------------------------- */
.hero-visual{ order:4; }
.hero-ctas{ order:5; }

@keyframes rise{
  to{
    opacity:1;
    transform:none;
  }
}

.hero-visual{
  /*
    Space above the animation block, bumped from the original 56px
    to give the visual a slightly lower resting position below the
    paragraph. Note: this has to be margin (not padding) — the
    visual is a fixed aspect-ratio:1/1 box whose blobs are all
    absolutely positioned with inset:0, so they fill the padding
    box and padding-top on this element would be a visual no-op.
  */
  margin-top:clamp(72px,7vw,84px);

  position:relative;

  width:100%;
  max-width:480px;

  aspect-ratio:1/1;

  opacity:0;

  animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .6s forwards;
}

.blob{
  position:absolute;
  inset:0;

  border-radius:62% 38% 55% 45% / 55% 48% 52% 45%;

  background:var(--green);

  animation:float 7s ease-in-out infinite;

  box-shadow:var(--shadow-soft);
}

.blob-bg-1{
  position:absolute;

  width:60%;
  height:60%;

  top:-8%;
  left:-10%;

  background:var(--sage-light);

  border-radius:60% 40% 40% 60% / 50% 60% 40% 50%;

  animation:float 9s ease-in-out infinite reverse;
}

.blob-bg-2{
  position:absolute;

  width:46%;
  height:46%;

  bottom:-6%;
  right:-8%;

  background:var(--yellow);

  border-radius:46% 54% 62% 38% / 48% 40% 60% 52%;

  animation:float 8s ease-in-out infinite;
}

@keyframes float{
  0%,100%{
    transform:translateY(0) rotate(0);
  }

  50%{
    transform:translateY(-14px) rotate(3deg);
  }
}

.hero-drop-icon{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:2;
}

.hero-drop-icon svg{
  width:34%;
  height:34%;
  color:rgba(255,255,255,.92);
}

/* =========================================================
   HERO — SPLIT LAYOUT (wider screens)

   "Scoop. Melt. Bloom." copy on the left, animated blob visual
   on the right. Below 980px the grid is dropped and the hero
   reverts to the single centred column defined above, where the
   order rules place the animation between the paragraph and the
   buttons.
========================================================= */

@media(min-width:980px){

  .hero-inner{
    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    column-gap:clamp(32px,5vw,80px);

    align-items:center;

    text-align:left;
  }

  .hero .hero-badge-row{
    grid-column:1;
    grid-row:1;

    justify-content:flex-start;

    /* allow the two pills to wrap inside the narrower column */
    flex-wrap:wrap;
  }

  .hero h1{
    grid-column:1;
    grid-row:2;

    /* Restore the tighter, half-column-safe size for the split
       layout — the base rule's 9.2vw is sized for the full
       content width, and would overflow the ~half-width copy
       column here. 4.2vw lands the line just inside the column
       at 980px (the tightest case) and lets it grow to the
       3.4rem ceiling on wider screens. */
    font-size:clamp(1.6rem,4.2vw,3.4rem);
  }

  .hero-sub{
    grid-column:1;
    grid-row:3;
  }

  .hero-ctas{
    grid-column:1;
    grid-row:4;

    justify-content:flex-start;
  }

  .hero-visual{
    grid-column:2;
    grid-row:1 / span 4;

    justify-self:center;

    width:100%;
    max-width:520px;

    margin-top:0;
  }
}

/* =========================================================
   INGREDIENT TICKER
========================================================= */

.marquee-band{
  background:var(--green);
  color:#fff;

  overflow:hidden;

  padding:18px 0;

  border-top:1px solid rgba(0,0,0,.1);
  border-bottom:1px solid rgba(0,0,0,.1);
}

.marquee-track{
  display:flex;
  width:max-content;

  animation:scroll-left 32s linear infinite;
}

.marquee-group{
  display:flex;
  align-items:center;
}

.marquee-item{
  display:flex;
  align-items:center;
  gap:10px;

  font-family:'Fraunces',serif;
  font-style:italic;

  font-size:1.15rem;

  padding:0 28px;

  white-space:nowrap;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    filter .18s ease;
}

.marquee-item:hover{
  transform:translateY(-2px) scale(1.1);
  filter:brightness(.82);
}

.marquee-item svg{
  width:14px;
  height:14px;

  color:var(--yellow);

  flex-shrink:0;
}

@keyframes scroll-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* =========================================================
   SHARED SECTIONS
========================================================= */

section{
  padding:100px 0;
}

.section-head{
  max-width:640px;
  margin-bottom:64px;
}

.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-head h2{
  font-size:clamp(2rem,4vw,2.9rem);
}

.section-head p{
  margin-top:16px;

  font-size:1.08rem;

  color:var(--ink-soft);

  max-width:52ch;
}

.section-head.center p{
  margin-left:auto;
  margin-right:auto;
}

/* Lets a heading inside a normally width-capped .section-head span
   the full section width, so a one-line heading has room to shrink
   via clamp() before it's ever forced to wrap. */
.section-head-wide{
  max-width:none;
}

/* Keeps a heading on one line, sizing the text down fluidly with
   the viewport (rather than wrapping) until the screen is small
   enough that it reflows for readability. */
.ritual-oneline-heading{
  white-space:nowrap;
  font-size:clamp(1.05rem,4.2vw,2.9rem);
}

@media(max-width:480px){
  .ritual-oneline-heading{
    white-space:normal;
  }
}

.text-green{
  color:var(--green);
  font-weight:700;
}

.text-yellow{
  color:var(--yellow);
  font-weight:700;
}

.text-red{
  color:var(--red);
}

.step-tag{
  display:inline-block;

  font-family:'Fraunces',serif;
  font-style:italic;

  color:var(--ink-soft);

  font-size:1rem;

  margin-bottom:10px;
}

/* =========================================================
   MUGTEA PRODUCT
========================================================= */

/* ---- Section head: "Mugtea" alone as the headline, with the
   old sentence demoted to a small italic tagline beneath it.
   The section is now centred and full-width so the single word
   gets the breathing room it needs instead of being crammed
   into the standard 640px .section-head column. ---- */

.section-head-mugtea{
  max-width:none;

  margin:0 auto 58px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.section-head-mugtea .step-tag{
  margin-bottom:16px;
}

/* Double-class specificity so this reliably beats .section-head h2.
   The "Mugtea" headline was previously oversized (up to 7rem) and
   dominated the section immediately below the ingredient marquee;
   it's now scaled down to sit comfortably alongside the rest of
   the page's h2 rhythm while keeping the tight tracking and
   near-flush line-height that give it its wordmark feel. */
.section-head.section-head-mugtea h2{
  font-size:clamp(2.1rem,6vw,4.4rem);

  line-height:.98;
  letter-spacing:-.045em;
}

.section-head-mugtea .mugtea-tagline{
  margin-top:20px;

  max-width:40ch;

  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.5;

  color:var(--ink-soft);
}

.product-row{
  display:grid;

  grid-template-columns:.85fr 1fr;

  gap:64px;

  align-items:stretch;
}

.product-visual{
  position:relative;

  border-radius:var(--radius-lg);

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.product-visual .backdrop{
  position:absolute;
  inset:0;

  background:var(--yellow);
}

.bottle-holder{
  position:relative;
  z-index:2;

  width:42%;
}

.bottle-holder svg{
  width:100%;
  height:auto;

  filter:drop-shadow(0 22px 30px rgba(42,29,20,.22));
}

.product-copy{
  padding:36px 34px;

  border-radius:var(--radius-lg);

  background:var(--cream-soft);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.product-copy .final-cta-rating{
  margin-bottom:4px;
}

.product-copy h3{
  font-size:clamp(1.7rem,3vw,2.3rem);
}

.product-price{
  display:inline-block;

  margin-top:14px;

  font-weight:700;
  font-size:1.05rem;

  background:var(--cream-deep);

  padding:5px 14px;

  border-radius:999px;
}

.product-copy .desc{
  margin-top:18px;

  color:var(--ink-soft);

  max-width:46ch;

  font-size:1.02rem;
}

.product-copy .btn{
  margin-top:26px;
}

.product-copy .final-cta-trust{
  margin-top:26px;

  flex-wrap:nowrap;
  gap:10px;
}

/* Keep all three trust items on a single row at every width — only
   the wording inside each one wraps to a second line as space
   shrinks, instead of a whole item dropping to a new row. Mirrors
   the same pattern used for .shop-scroll-content .final-cta-trust
   on shop-now.html. Shared by every page whose Mugtea trust row
   sits inside .product-copy (index, our-science, ritual) or
   .final-cta-copy (story). */
.product-copy .final-cta-trust .trust-item,
.final-cta-copy .final-cta-trust .trust-item{
  flex:1 1 0;
  min-width:0;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}

.product-copy .final-cta-trust .trust-item span,
.final-cta-copy .final-cta-trust .trust-item span{
  font-size:clamp(.66rem,2vw,.82rem);
  line-height:1.25;
}

.final-cta-copy .final-cta-trust{
  flex-wrap:nowrap;
  gap:10px;
}

.actives-list{
  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-top:20px;
}

.active-chip{
  position:relative;

  font-size:.82rem;
  font-weight:600;

  border:1px solid var(--line);

  padding:7px 13px;

  border-radius:999px;

  color:var(--ink-soft);

  background:var(--cream-soft);

  will-change:transform;

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.active-chip:hover{
  box-shadow:0 10px 25px -16px rgba(16,35,26,.55);

  border-color:var(--green);

  color:var(--green-dark);

  transform:scale(1.045);
}

/* =========================================================
   INGREDIENT CHIP FLUID SCALING (NARROW SCREENS)

   The active-chip pills inside the product card
   (Gluconolactone · PHA, LHA, Niacinamide, …) look great on
   wide screens, but on phones they wrap into four or five
   rows, stretching the card and pushing the "Shop Mugtea"
   button far below the fold.

   Below the mobile breakpoint we shrink the chips' font-size,
   padding, gap and line-height fluidly with viewport width —
   with sensible min bounds — so the whole list always wraps
   into at most three rows even on the narrowest phones.
   Every other element in the card keeps its existing sizing
   untouched.

   white-space:nowrap is critical here: it forces each chip to
   stay on a single line, so the fluid font-size is what
   actually controls the chip width (instead of the label
   silently wrapping inside a chip and making it taller).
========================================================= */

@media(max-width:620px){

  .actives-list{
    gap:clamp(4px,1.2vw,7px);
  }

  .active-chip{
    font-size:clamp(.6rem,2.6vw,.8rem);
    padding:clamp(4px,1.1vw,7px) clamp(7px,1.8vw,12px);
    line-height:1.2;
    white-space:nowrap;
  }

}

/* ---- Sensory-lifecycle line, moved down to sit between the
   product row (Shop Mugtea card) and the green Whipped /
   Cream / Milk / Foam texture stage, so it now introduces that
   playful block instead of crowding the section heading. ---- */

.product-lifecycle-note{
  margin:64px auto 0;

  max-width:58ch;

  text-align:center;

  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.6;

  color:var(--ink-soft);
}

/* Tighten the gap so the note reads as part of the texture
   stage it introduces, rather than floating on its own. */
.product-lifecycle-note + .texture-experience{
  margin-top:46px;
}

/* =========================================================
   DYNAMIC TEXTURE EXPERIENCE
========================================================= */

.texture-experience{
  margin-top:70px;
}

.texture-stage{
  position:relative;

  min-height:240px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:var(--radius-lg);

  background:var(--green);

  color:#fff;

  box-shadow:var(--shadow-soft);
}

.texture-state{
  position:absolute;

  display:flex;
  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  opacity:0;

  transform:translateY(25px) scale(.96);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);
}

.texture-state.active{
  opacity:1;

  transform:translateY(0) scale(1);
}

.texture-state strong{
  font-family:'Plus Jakarta Sans',sans-serif;

  font-size:clamp(2rem,6vw,4.5rem);

  letter-spacing:-.05em;
}

.texture-state span{
  margin-top:7px;

  font-family:'Fraunces',serif;
  font-style:italic;

  font-size:1.1rem;

  color:rgba(255,255,255,.8);
}

.texture-whipped strong{
  animation:puff 2s ease-in-out infinite;
}

@keyframes puff{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.035);
  }
}

.texture-milk strong{
  animation:milkRipple 2.4s ease-in-out infinite;
}

@keyframes milkRipple{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(7px);
  }
}

.texture-foam{
  position:relative;
}

.texture-foam strong{
  animation:foamPulse 1.8s ease-in-out infinite;
}

@keyframes foamPulse{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.025);
  }
}

.bubbles{
  position:absolute;
  inset:0;

  pointer-events:none;
}

.bubbles i{
  position:absolute;

  width:7px;
  height:7px;

  border-radius:50%;

  background:rgba(255,255,255,.7);

  animation:bubbleUp 2.5s infinite ease-in;
}

.bubbles i:nth-child(1){left:42%;bottom:18%}
.bubbles i:nth-child(2){left:54%;bottom:22%;animation-delay:.5s}
.bubbles i:nth-child(3){left:48%;bottom:14%;animation-delay:.9s}
.bubbles i:nth-child(4){left:60%;bottom:20%;animation-delay:1.2s}

@keyframes bubbleUp{
  from{
    opacity:0;
    transform:translateY(20px) scale(.5);
  }

  30%{
    opacity:1;
  }

  to{
    opacity:0;
    transform:translateY(-70px) scale(1.2);
  }
}

.texture-labels{
  display:flex;

  justify-content:center;
  flex-wrap:wrap;

  gap:9px;

  margin-top:20px;
}

.texture-label{
  border:1px solid var(--line);

  background:var(--cream-soft);

  border-radius:999px;

  padding:8px 16px;

  font-size:.84rem;

  font-weight:700;

  cursor:pointer;

  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.texture-label:hover,
.texture-label.active{
  background:var(--green);
  color:#fff;

  transform:translateY(-2px);
}

/* =========================================================
   VALUE PROP SECTION
========================================================= */

.value-section{
  position:relative;

  background:var(--cream-soft);
}

.value-head{
  max-width:780px;

  margin:0 auto 70px;

  text-align:center;
}

.value-head h2{
  font-size:clamp(2.5rem,6vw,5rem);

  letter-spacing:-.05em;
}

.value-head-title{
  overflow-wrap:break-word;

  word-break:normal;
}

.vh-line1,
.vh-line2{
  display:inline;

  white-space:nowrap;
}

.vh-highlight{
  white-space:nowrap;
}

@media (max-width:700px){

  .vh-line1,
  .vh-line2{
    white-space:normal;

    display:inline;
  }

  .vh-break{
    display:none;
  }

}

@media (max-width:600px){

  .value-head{
    padding:0 16px;
  }

  .value-head h2{
    font-size:clamp(1.9rem,9vw,3rem);

    line-height:1.15;
  }

}

.value-head p{
  margin:22px auto 0;

  max-width:50ch;

  color:var(--ink-soft);

  font-size:1.1rem;
}

.value-cards{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:24px;
}

.value-card{
  min-height:300px;

  padding:34px;

  border-radius:var(--radius-lg);

  background:rgba(255,255,255,.75);

  border:1px solid rgba(16,35,26,.1);

  display:flex;
  flex-direction:column;

  justify-content:space-between;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}

.value-card:hover{
  transform:translateY(-7px);

  box-shadow:0 30px 60px -35px rgba(16,35,26,.55);
}

.value-icon{
  width:58px;
  height:58px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--green);

  color:#fff;
}

.value-icon svg{
  width:27px;
  height:27px;
}

.value-card h3{
  margin-top:35px;

  font-size:1.45rem;
}

.value-card p{
  margin-top:10px;

  color:var(--ink-soft);

  font-size:.96rem;
}

/* =========================================================
   STACKED SCROLL TEXT + PRODUCT REVEAL (pinned section)

   One long pinned section: the stat lines build up one by
   one near their resting position (not from far below), stay
   fixed on screen, and the final line fills with yellow from
   the bottom up as the cleanser finishes extruding from the
   tube. Only once that finishes does the page release the pin
   and scroll on to the full-tube showcase section.
========================================================= */

.stack-reveal{
  position:relative;

  min-height:460vh;

  /*
    Deliberately NOT overflow:hidden — an ancestor with any
    overflow other than visible becomes the containing block
    for a sticky descendant, and since that box itself never
    scrolls, it silently breaks position:sticky (the child
    just behaves as static). The tube-reveal asset stays
    invisible on its own since it starts below the viewport.
  */

  background:
    linear-gradient(
      to bottom,
      var(--green) 0%,
      var(--green) 78%,
      var(--yellow) 100%
    );
}

.stack-reveal-inner{
  position:sticky;

  top:0;

  height:100vh;

  min-height:640px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  padding:32px;
}

.stack-lines{
  display:flex;
  flex-direction:column;

  align-items:center;

  gap:clamp(8px,1.8vw,18px);

  margin-bottom:clamp(20px,6vw,54px);

  width:100%;
}

.stack-line{
  width:100%;

  max-width:1000px;

  opacity:0;

  transform:translateY(26px);
}

.stack-line h3{
  display:inline-block;

  max-width:100%;

  font-size:clamp(1.5rem,4.6vw,4.4rem);

  line-height:1.06;

  letter-spacing:-.04em;

  color:#fff;

  white-space:nowrap;
}

.stack-line-final h3{
  position:relative;
}

/*
  Single glyph raster, filled bottom-up via a hard-stop
  gradient painted through the text (background-clip:text)
  instead of two stacked, separately-antialiased text layers.
  Stacking a white copy under a yellow copy (clipped with
  clip-path) anti-aliases each layer independently against the
  green backdrop, and their edges don't perfectly coincide —
  that mismatch reads as a stray high-saturation gold fringe
  around every letter. Painting one layer removes the seam
  entirely and keeps the fill locked to --yellow.
*/
.stack-line-final .fw-base{
  display:block;

  background-image:
    linear-gradient(
      to top,
      var(--yellow) 0 var(--fw-fill,0%),
      #fff var(--fw-fill,0%) 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  /*
    Soft green glow outside the glyphs only, eased in via
    --fw-glow (set from the fillLocal scroll progress in the
    STACKED SCROLL TEXT script) once the fill has mostly
    finished. The section's own background gradient turns
    yellow right as the fill completes, so the word needs a
    little help staying legible right at that point.

    This has to be filter:drop-shadow rather than text-shadow:
    text-shadow paints behind the glyph and is meant to be
    fully hidden by the opaque fill except at its antialiased
    rim, but combined with background-clip:text, Chromium
    composites it wrong and the shadow washes out the entire
    fill instead of staying behind it. drop-shadow runs as a
    post-process on the already-rendered (opaque) glyphs, so it
    only ever shows up outside their edges, never inside.
  */
  filter:
    drop-shadow(
      0 0 3px
      color-mix(
        in srgb,
        var(--green-dark) calc(var(--fw-glow,0) * 75%),
        transparent
      )
    );
}

.stack-line-final .fw-fill{
  display:none;
}

/* =========================================================
   FINAL STAT / PRODUCT REVEAL
========================================================= */

.tube-reveal{
  position:absolute;

  left:50%;
  bottom:-180px;

  transform:translateX(-50%);

  width:min(240px,42vw);

  opacity:0;

  transition:
    opacity .2s linear,
    transform .2s linear;
}

.tube-body{
  width:140px;
  height:300px;

  margin:0 auto;

  border-radius:34px 34px 26px 26px;

  background:var(--green-dark);

  box-shadow:0 35px 60px -25px rgba(16,35,26,.5);

  position:relative;
}

.tube-label{
  position:absolute;

  top:95px;
  left:20px;
  right:20px;

  height:100px;

  border-radius:18px;

  background:var(--cream-soft);

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  font-weight:800;

  font-size:.95rem;
}

.tube-neck{
  width:80px;
  height:42px;

  background:var(--green-dark);

  margin:-10px auto 0;

  border-radius:12px 12px 5px 5px;

  position:relative;
}

.tube-cap{
  position:absolute;

  left:50%;

  top:-35px;

  transform:translateX(-50%);

  width:82px;
  height:30px;

  background:var(--green-deeper);

  border-radius:8px 8px 5px 5px;
}

.petals{
  position:absolute;

  left:50%;
  top:-23px;

  transform:translateX(-50%);

  width:36px;
  height:22px;
}

.petals span{
  position:absolute;

  width:19px;
  height:12px;

  background:#F5FFE9;

  border-radius:50% 50% 45% 45%;

  transform-origin:bottom center;
}

.petals span:nth-child(1){transform:rotate(-45deg);left:0}
.petals span:nth-child(2){transform:rotate(-22deg);left:7px}
.petals span:nth-child(3){transform:rotate(0);left:15px}
.petals span:nth-child(4){transform:rotate(22deg);left:23px}
.petals span:nth-child(5){transform:rotate(45deg);left:30px}

.extrusion{
  position:absolute;

  left:50%;
  top:-22px;

  transform:translateX(-50%);

  width:34px;

  height:0;

  background:#fff9ef;

  border-radius:50% 50% 40% 40%;

  box-shadow:
    -10px 8px 0 -3px #fff9ef,
    10px 12px 0 -4px #fff9ef;

  transition:height .1s linear;
}

.extrusion::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-22px;

  transform:translateX(-50%);

  width:50px;
  height:35px;

  background:#fff9ef;

  border-radius:50%;
}

/* =========================================================
   FULL SQUEEZE TUBE SHOWCASE

   No borders anywhere in this visual on purpose — edges are
   carried by soft box-shadow/gradient only, and the label
   text is sized down (via fitTextToContainer in JS) so it
   always stays on a single row.
========================================================= */

.tube-showcase{
  position:relative;

  padding:120px 0 140px;

  background:var(--yellow);

  overflow:hidden;
}

.tube-showcase-row{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:center;
}

.tube-showcase-copy .eyebrow{
  font-family:'Fraunces',serif;
  font-style:italic;

  font-size:1.05rem;

  color:var(--green-deeper);

  margin-bottom:16px;
}

.tube-showcase-copy h2{
  font-size:clamp(2.2rem,4.6vw,3.8rem);

  letter-spacing:-.045em;

  color:var(--ink);
}

.tube-showcase-copy p{
  margin-top:20px;

  max-width:44ch;

  font-size:1.05rem;

  color:var(--ink-soft);
}

.tube-showcase-visual{
  display:flex;

  align-items:flex-end;

  justify-content:center;
}

.tube-full{
  position:relative;

  width:min(320px,70vw);
}

.tube-full-cap{
  width:34%;

  height:60px;

  margin:0 auto;

  background:var(--green-deeper);

  border-radius:14px 14px 6px 6px;

  box-shadow:0 12px 20px -10px rgba(16,35,26,.35);
}

.tube-full-neck{
  width:44%;

  height:36px;

  margin:0 auto;

  background:var(--green-dark);

  border-radius:0 0 10px 10px;
}

.tube-full-body{
  position:relative;

  width:100%;

  aspect-ratio:.62;

  margin-top:-2px;

  border-radius:60px 60px 40px 40px;

  background:
    linear-gradient(
      160deg,
      var(--green) 0%,
      var(--green-dark) 100%
    );

  box-shadow:0 45px 80px -35px rgba(16,35,26,.5);

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:24px;
}

.tube-full-label{
  max-width:100%;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;

  font-size:clamp(1.6rem,7vw,3rem);

  letter-spacing:-.03em;

  color:var(--cream-soft);

  white-space:nowrap;
}

.tube-full-sub{
  max-width:80%;

  font-size:.92rem;

  font-weight:600;

  color:rgba(255,255,255,.82);

  text-align:center;
}

/* =========================================================
   SOCIAL SECTION
========================================================= */

.social-section{
  position:relative;

  padding-bottom:130px;

  background:var(--cream);
}

.social-heading-block{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:70px 0 45px;
}

.social-heading{
  text-align:center;
}

.social-heading h2{
  font-size:clamp(2.4rem,6vw,5rem);

  letter-spacing:-.06em;
}

/* "everywhere" sits on the same row as "getting", called out
   in green — no animation, just a static accent color. */
.text-accent{
  color:var(--green-dark);
}

.social-icons{
  display:flex;

  justify-content:center;

  gap:14px;

  margin-bottom:46px;
}

.social-icon{
  width:46px;
  height:46px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--green);

  color:#fff;

  transition:
    transform .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

.social-icon:hover{
  background-color:var(--green-dark);

  transform:scale(1.13) translateY(-3px);

  box-shadow:0 16px 30px -18px rgba(0,143,63,.7);
}

.social-icon svg{
  width:20px;
  height:20px;
}

.social-orbit{
  position:relative;

  height:560px;

  /* Break out of .wrap so the fan spans the full page width */
  width:100vw;
  max-width:100vw;

  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  perspective:1000px;

  /* Crop everything that dips below the visible top arc, so the
     cards rotating through the lower half of the wheel read as
     tucked away beneath the section that follows. */
  overflow:hidden;
}

.social-card{
  position:absolute;

  left:50%;
  bottom:6%;

  width:302px;
  height:392px;

  /* Pivot from the bottom edge of each card so cards fan
     outward at the top and only ever meet near the bottom. */
  transform-origin:50% 100%;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      #F0F0F0,
      #E2E2E2
    );

  border:1px solid rgba(16,35,26,.12);

  box-shadow:0 28px 60px -40px rgba(16,35,26,.5);

  overflow:hidden;

  will-change:transform,opacity;
}

.social-card::before{
  content:"UGC";

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  font-family:'Plus Jakarta Sans',sans-serif;

  font-weight:800;

  font-size:1.5rem;

  letter-spacing:.08em;

  color:rgba(16,35,26,.2);
}

/* =========================================================
   FAQ TOGGLE (plus / minus)
========================================================= */

.faq-summary{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  list-style:none;
}

.faq-summary::-webkit-details-marker{
  display:none;
}

.faq-summary::marker{
  content:"";
}

.faq-toggle{
  position:relative;

  flex:none;

  width:22px;
  height:22px;
}

.faq-toggle::before,
.faq-toggle::after{
  content:"";

  position:absolute;

  top:50%;
  left:50%;

  background:var(--ink);

  border-radius:2px;

  transform:translate(-50%,-50%);

  transition:transform .3s ease;
}

.faq-toggle::before{
  width:16px;
  height:2px;
}

.faq-toggle::after{
  width:2px;
  height:16px;
}

details[open] .faq-toggle::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

/* =========================================================
   FOOTER

   One continuous green panel: the signup card on the left,
   the Shop / Explore / Support link columns on the right,
   then a slim legal bar, then the oversized wordmark strip
   (.brand-flourish) — all sharing the same --green-deeper
   background so there's no visible seam between them.
========================================================= */

footer{
  padding:64px 0 0;

  background:var(--green-deeper);

  color:#fff;
}

.footer-top{
  display:grid;

  grid-template-columns:1.1fr 1fr;

  gap:60px;

  padding-bottom:46px;
}

.footer-signup h2{
  color:#fff;

  font-size:clamp(1.7rem,2.6vw,2.2rem);

  max-width:18ch;
}

.footer-signup > p{
  margin-top:12px;

  color:rgba(255,255,255,.72);

  max-width:42ch;

  font-size:.95rem;
}

.footer-signup-form{
  display:flex;

  gap:10px;

  margin-top:24px;

  max-width:420px;
}

.footer-signup-form input{
  flex:1;

  min-width:0;

  border:none;

  outline:none;

  background:#fff;

  color:var(--ink);

  font-family:inherit;

  font-size:.95rem;

  padding:15px 20px;

  border-radius:999px;
}

.footer-signup-form input::placeholder{
  color:var(--ink-soft);
}

.footer-signup-submit{
  flex:none;

  width:50px;
  height:50px;

  border:none;

  border-radius:50%;

  background:var(--yellow);

  color:var(--ink);

  display:flex;
  align-items:center;
  justify-content:center;

  transition:
    transform .2s ease,
    background-color .2s ease;
}

.footer-signup-submit:hover{
  background-color:var(--yellow-soft);

  transform:translateY(-2px);
}

.footer-signup-submit svg{
  width:19px;
  height:19px;
}

.footer-mode-toggle{
  display:inline-block;

  margin-top:16px;

  background:none;
  border:none;

  padding:0;

  color:#fff;

  font-size:.88rem;
  font-weight:600;

  text-decoration:underline;

  text-underline-offset:3px;

  cursor:pointer;
}

.footer-consent{
  margin-top:16px;

  max-width:46ch;

  color:rgba(255,255,255,.6);

  font-size:.68rem;

  line-height:1.5;
}

.footer-consent a{
  color:rgba(255,255,255,.85);

  text-decoration:underline;
}

.footer-note{
  margin-top:10px;

  min-height:1.2em;

  font-size:.82rem;
  font-weight:600;

  color:var(--yellow);
}

.footer-wordmark-row{
  display:flex;

  align-items:center;

  gap:18px;

  margin-top:32px;

  flex-wrap:wrap;
}

.footer-wordmark{
  font-family:'Plus Jakarta Sans',sans-serif;

  font-weight:800;

  font-size:clamp(2.6rem,4.6vw,3.4rem);

  letter-spacing:-.03em;

  color:var(--yellow);
}

.footer-nav{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:32px;
}

.footer-col h4{
  font-family:'Plus Jakarta Sans',sans-serif;

  font-size:clamp(1.3rem,2.1vw,1.55rem);

  font-weight:800;

  letter-spacing:-.02em;

  color:var(--yellow);

  margin-bottom:20px;
}

.footer-col ul{
  list-style:none;

  margin:0;
  padding:0;

  display:flex;
  flex-direction:column;

  gap:11px;
}

.footer-col a{
  font-size:.92rem;

  color:rgba(255,255,255,.78);

  transition:color .2s ease;
}

.footer-col a:hover{
  color:#fff;
}

.footer-bottom{
  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:26px 0;

  border-top:1px solid rgba(255,255,255,.14);

  flex-wrap:wrap;

  gap:14px;

  font-size:.82rem;

  color:rgba(255,255,255,.6);
}

.footer-legal-links{
  display:flex;

  gap:20px;

  flex-wrap:wrap;
}

.footer-legal-links a{
  color:rgba(255,255,255,.6);

  transition:color .2s ease;
}

.footer-legal-links a:hover{
  color:#fff;
}

.footer-socials{
  display:flex;

  gap:10px;
}

.footer-socials a{
  width:36px;
  height:36px;

  border-radius:50%;

  background:#fff;

  color:var(--green-deeper);

  display:flex;
  align-items:center;
  justify-content:center;

  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.footer-socials a:hover{
  background-color:var(--yellow);

  transform:translateY(-2px);
}

.footer-socials svg{
  width:16px;
  height:16px;
}

/* =========================================================
   BRAND FLOURISH
========================================================= */

.brand-flourish{
  background:var(--green-deeper);

  padding:90px 32px 110px;

  text-align:center;

  overflow:hidden;
}

.brand-flourish .small-line{
  font-family:'Fraunces',serif;

  font-style:italic;

  color:rgba(255,255,255,.7);

  font-size:1.05rem;

  margin-bottom:25px;
}

.brand-flourish h2{
  color:var(--green);

  font-size:clamp(3rem,10vw,9rem);

  line-height:.82;

  letter-spacing:-.075em;
}

.brand-flourish h2 span{
  display:block;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:860px){

  .product-row{
    grid-template-columns:1fr;
  }

  .product-visual{
    max-width:360px;
    aspect-ratio:4/5;

    margin:0 auto;
  }

  .product-copy{
    padding:26px 22px;
  }

  .value-cards{
    grid-template-columns:1fr;
  }

  .value-card{
    min-height:260px;
  }

  .tube-showcase-row{
    grid-template-columns:1fr;

    text-align:center;
  }

  .tube-showcase-copy p{
    margin-left:auto;
    margin-right:auto;
  }

  .tube-showcase-visual{
    margin-top:20px;
  }
}

@media(max-width:780px){

  .wrap{
    padding:0 22px;
  }

  section{
    padding:75px 0;
  }

  .footer-top{
    grid-template-columns:1fr;

    gap:44px;
  }

  .footer-nav{
    grid-template-columns:repeat(3,1fr);

    gap:24px;
  }

  .social-orbit{
    height:430px;
  }

  .social-card{
    width:190px;
    height:245px;
  }

  .stack-reveal-inner{
    min-height:560px;
  }
}

@media(max-width:620px){

  /* Reduced side padding on phones gives the fluid hero pill
     rows a little extra width, so both badges stay on one row
     at the smallest widths. */
  .hero{
    /* Matches the trimmed base padding so the hero stays lifted
       on phones too (was 65px). */
    padding-top:36px;
    padding-left:18px;
    padding-right:18px;
  }

  /* No h1 font-size override here — the base rule's
     clamp(1.5rem, 9.2vw, 5.5rem) already scales the heading down
     fluidly at these widths while keeping it on one line and
     spanning the full content width up to the hero's side
     margins. */

  .hero-sub{
    font-size:1.1rem;
  }

  .hero-ctas{
    flex-direction:column;

    width:100%;
  }

  .hero-ctas .btn{
    width:100%;
  }

  .texture-stage{
    min-height:210px;
  }

  .social-icons{
    gap:8px;
  }

  .social-icon{
    width:40px;
    height:40px;
  }

  .social-icon svg{
    width:17px;
    height:17px;
  }

  .footer-nav{
    grid-template-columns:1fr 1fr;
  }

  .tube-body{
    width:115px;
    height:260px;
  }

  .tube-label{
    top:80px;
  }
}

/* =========================================================================
   STORY PAGE (story.html)
   Sections: green mission hero -> mint "why us" cards -> cream "not
   cutting corners" cards -> black CTA. Footer/header are shared with
   the homepage and use the rules already defined above.
========================================================================= */

:root{
  --mint:#BFDFCF;
}

/* Body background for the story page only — keeps green running
   behind the announcement bar / nav so there's no white gap before
   the mission hero. index.html is untouched (no .story-page there). */
body.story-page,
body.ritual-page{
  background:var(--green);
}

/* Tighter side gutters + section spacing, story/ritual pages only —
   index.html's .wrap/section rhythm is untouched. */
body.story-page .wrap,
body.ritual-page .wrap{
  padding:0 20px;
}

body.story-page section,
body.ritual-page section{
  padding:64px 0;
}

@media(max-width:780px){
  body.story-page .wrap,
  body.ritual-page .wrap{
    padding:0 16px;
  }

  body.story-page section,
  body.ritual-page section{
    padding:48px 0;
  }
}

/* ---- Mission hero (green, half the viewport height) ------------------ */

.story-hero{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:38vh;
  max-height:48vh;

  background:var(--green);
  color:#fff;

  padding:56px 20px;

  text-align:center;
}

.story-hero-inner{
  max-width:1200px;
  width:100%;
  margin:0 auto;

  position:relative;
  z-index:2;
}

.story-hero h1{
  font-size:clamp(1.6rem,3.4vw,2.7rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;

  /* nudges perceived boldness slightly past the loaded 800
     weight without needing an extra font file */
  -webkit-text-stroke:.4px currentColor;

  width:100%;
  margin:0 auto;
}

/* Forces "A ritual your skin looks forward to." onto a single
   line at any width that can reasonably fit it — the vw term in
   the clamp shrinks the text aggressively as the viewport narrows
   rather than letting it wrap, and the min bound only gives up
   and wraps once the screen is genuinely too small to read it. */
.ritual-hero-heading{
  white-space:nowrap;
  font-size:clamp(1.1rem,4.6vw,2.7rem);
}

@media(max-width:420px){
  .ritual-hero-heading{
    white-space:normal;
  }
}

/* ---- "Dynamic Island" ritual pill --------------------------------------
   A pill made of individually-hoverable segments. Hovering one segment
   grows it and nudges the whole bar wider (padding/gap), while the
   JS-applied .is-pushed class shrinks and fades the other segments so
   they visually disperse away from the hovered one — the island morphs
   its size in response to the interaction instead of staying static.

   MODIFICATION: The island is now visually lifted (translateY(-28px))
   so it sits higher in the hero. Because transforms don't affect
   document flow, the heading below keeps its original layout position
   and the clean vertical gap between the two is preserved. */

.ritual-pill-island{
  display:inline-flex;
  align-items:center;
  gap:2px;

  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);

  padding:7px 16px;
  border-radius:999px;

  font-size:.8rem;
  font-weight:600;

  cursor:default;
  user-select:none;

  /* Lifts the island upward without affecting the <h1> below it */
  transform:translateY(-28px);

  transition:
    padding .4s cubic-bezier(.34,1.56,.64,1),
    gap .4s cubic-bezier(.34,1.56,.64,1);
}

.ritual-pill-island.is-flexing{
  padding:7px 20px;
  gap:6px;
}

.ritual-pill-seg{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;

  transition:
    transform .38s cubic-bezier(.34,1.56,.64,1),
    opacity .3s ease,
    background-color .3s ease,
    letter-spacing .3s ease;
}

.ritual-pill-seg.is-hovered{
  transform:scale(1.24);
  background:rgba(255,255,255,.24);
  letter-spacing:.01em;
}

.ritual-pill-seg.is-pushed{
  transform:scale(.9);
  opacity:.58;
}

.ritual-pill-arrow{
  opacity:.7;
  transition:transform .35s ease,opacity .3s ease;
}

.ritual-pill-island.is-flexing .ritual-pill-arrow{
  transform:scale(.88);
  opacity:.45;
}

/* Forces the "Our mission is making your daily" / "skincare struggle
   actually fun." two-line split on wider screens, where the full
   width easily fits each half on its own line. On narrow screens the
   break is removed so the words reflow naturally based on whatever
   width is actually available. */
.mission-break{
  display:block;
}

@media(max-width:620px){
  .mission-break{
    display:none;
  }
}

.story-hero-blob-1{
  position:absolute;
  top:-12%;
  left:-8%;

  width:46%;
  height:60%;

  border-radius:60% 40% 40% 60% / 50% 60% 40% 50%;

  background:rgba(255,255,255,.08);

  z-index:1;
}

.story-hero-blob-2{
  position:absolute;
  bottom:-16%;
  right:-6%;

  width:38%;
  height:55%;

  border-radius:46% 54% 62% 38% / 48% 40% 60% 52%;

  background:rgba(255,255,255,.08);

  z-index:1;
}

/* ---- Shared: empty image-placeholder template -------------------------- */

.img-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  text-align:center;

  width:100%;
  aspect-ratio:4/3;

  border-radius:var(--radius-md);

  background:repeating-linear-gradient(
    135deg,
    var(--cream-deep),
    var(--cream-deep) 10px,
    var(--cream-soft) 10px,
    var(--cream-soft) 20px
  );
  border:1.5px dashed var(--nav-pill);

  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:600;

  overflow:hidden;
}

.img-placeholder svg{
  width:30px;
  height:30px;
  opacity:.55;
}

/* ---- "Why Velnaura" three-card section (mint background) -------------- */

.story-why{
  background:var(--mint);
}

.story-why .section-head{
  max-width:780px;
  margin:0 auto 40px;
  text-align:center;
}

.story-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:start;
}

.story-card{
  display:flex;
  flex-direction:column;
  align-items:center;

  width:100%;
  padding:16px;

  border-radius:var(--radius-lg);

  /* same tone as the section itself — no card outline */
  background:var(--mint);
  border:none;

  text-align:center;

  transition:transform .3s ease;
}

.story-card:hover{
  transform:translateY(-6px);
}

.story-card .img-placeholder{
  max-width:420px;
}

.story-card h3{
  margin-top:24px;

  font-size:1.28rem;
  line-height:1.2;
}

.story-card p{
  margin-top:12px;

  max-width:70ch;

  font-size:.95rem;
  line-height:1.65;

  color:var(--ink-soft);
}

/* ---- "Not cutting corners" three-card section (cream background) ------ */

.story-corners{
  background:var(--cream);
}

.story-corners .section-head{
  max-width:640px;
  margin:0 auto 40px;
  text-align:center;
}

.corners-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:start;
}

.corners-card{
  display:flex;
  flex-direction:column;
  align-items:center;

  width:100%;
  padding:16px;

  border-radius:var(--radius-lg);

  /* same tone as the section itself — no card outline */
  background:var(--cream);
  border:none;

  text-align:center;
}

.corners-card .img-placeholder{
  max-width:420px;
}

.corners-card h4{
  margin-top:22px;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.01em;

  color:var(--green-deeper);
}

.corners-card p{
  margin-top:10px;

  max-width:70ch;

  font-size:.93rem;
  line-height:1.65;

  color:var(--ink-soft);
}

/* ---- Black CTA band (short — trimmed vertical padding) ---------------- */

.story-cta{
  background:#0B0F0C;
  color:#fff;

  text-align:center;

  padding:48px 32px;
}

.story-cta-inner{
  max-width:720px;
  margin:0 auto;
}

.story-cta h2{
  font-size:clamp(1.5rem,3.2vw,2.35rem);
  line-height:1.18;

  max-width:22ch;
  margin:0 auto;
}

.story-cta .btn{
  margin-top:26px;
}

/* Yellow variant of the primary button, used on the dark CTA band */
.btn-yellow{
  background-color:var(--yellow);
  color:var(--ink);
  box-shadow:0 18px 35px -18px rgba(255,204,47,.55);
}

.btn-yellow:hover{
  background-color:var(--yellow-soft);
  color:var(--ink);
}

/* ---- Reviews — tabbed testimonials (mint background) ------------------ */

.story-reviews{
  background:var(--mint);
}

.reviews-rating{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;

  text-align:center;
}

.reviews-stars{
  color:var(--green-deeper);
  font-size:1.15rem;
  letter-spacing:-1px;
}

.reviews-score{
  font-weight:700;
  font-size:.95rem;
  color:var(--ink-soft);
}

.reviews-heading{
  margin:22px auto 0;

  max-width:720px;

  font-size:clamp(1.3rem,3vw,2.5rem);
  line-height:1.15;
  text-align:center;
  white-space:nowrap;

  color:var(--green-deeper);
}

@media(max-width:640px){
  .reviews-heading{
    white-space:normal;
  }
}

.reviews-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;

  margin:44px auto 0;
}

.reviews-tab{
  padding:13px 26px;
  border-radius:999px;

  background:var(--mint);
  border:1.5px solid var(--ink);

  font-weight:700;
  font-size:.92rem;
  color:var(--ink);

  transition:
    background-color .25s ease,
    color .25s ease;
}

.reviews-tab:hover{
  background:rgba(16,35,26,.08);
}

.reviews-tab.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.reviews-panels{
  margin-top:48px;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.review-card{
  padding:26px;

  border-radius:var(--radius-lg);

  /* same tone as the section — no card outline, no fill contrast */
  background:var(--mint);
  border:none;
}

.review-stars{
  color:var(--green-deeper);
  font-size:.85rem;
  letter-spacing:-1px;
  text-align:center;
}

.review-punch{
  margin-top:14px;

  font-size:1.02rem;
  font-weight:700;
  line-height:1.4;
  text-align:center;

  color:var(--ink);
}

.review-text{
  margin-top:10px;

  font-size:.95rem;
  line-height:1.6;
  font-weight:400;
  text-align:center;

  color:var(--ink);
}

.review-author{
  margin-top:16px;

  font-weight:700;
  font-size:.88rem;
  text-align:center;

  color:var(--ink-soft);
}

/* ---- Final buy CTA — image left, copy + button right (white bg) ------- */

.story-final-cta{
  background:#fff;
}

.final-cta-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:60px;
}

.final-cta-heading{
  grid-column:1 / -1;

  text-align:center;

  font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.2;
  margin-bottom:36px;
}

.final-cta-line{
  display:block;
  white-space:nowrap;
}

.final-cta-hook{
  color:var(--ink);
}

.final-cta-anchor{
  color:var(--green);
}

/* "Start the ritual with Mugtea." on the dark ritual CTA band,
   in the cream brand tone rather than green/white. */
.ritual-cta-anchor{
  color:var(--cream);
}

.final-cta-btn{
  margin-top:28px;
}

.final-cta-copy{
  padding:36px 34px;

  border-radius:var(--radius-lg);

  background:var(--cream-soft);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.final-cta-media{
  display:flex;
}

.final-cta-media .img-placeholder{
  flex:1;
  aspect-ratio:auto;
}

.final-cta-rating{
  display:flex;
  align-items:center;
  gap:8px;
}

.final-cta-rating .reviews-stars{
  text-align:left;
}

.final-cta-product-name{
  margin-top:16px;
  font-size:1.6rem;
}

.final-cta-copy .product-price{
  margin-top:8px;
}

.final-cta-copy .desc{
  margin-top:14px;

  color:var(--ink-soft);

  max-width:46ch;

  font-size:1.02rem;
  line-height:1.6;
}

.final-cta-copy .actives-list{
  margin-top:20px;
}

.final-cta-trust{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;

  margin-top:22px;
  padding-top:22px;

  border-top:1px solid var(--line);
}

.trust-item{
  display:flex;
  align-items:center;
  gap:8px;

  font-size:.82rem;
  font-weight:600;

  color:var(--ink-soft);
}

.trust-item svg{
  flex-shrink:0;

  width:19px;
  height:19px;

  stroke:var(--green);
}

/* ---- "Why Velnaura?" — sticky FAQ + scrolling "Feels Like" panel ------
   The FAQ column (left) sticks as you scroll, but only for as long as
   the "Feels Like" / "Packed With" column (right) still has content
   below it — since both columns share the same .faq-inner grid box,
   position:sticky naturally releases the FAQ once the shorter/taller
   right column's bottom edge scrolls into view. */
/* -----------------------------------------------------------------------
   Shared by story.html (#storyFaq) and index.html (#faq), so the two
   pages get an identical sticky-FAQ + Feels Like layout from one set
   of rules.
------------------------------------------------------------------------ */

.story-faq{
  background:var(--cream);
}

.faq-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}

.faq-content{
  position:sticky;
  top:120px;
}

.feels-heading{
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.15;
  text-align:center;

  color:var(--ink);
}

.feels-grid{
  display:flex;
  justify-content:center;
  gap:32px;

  margin-top:28px;
}

.feels-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;

  max-width:120px;
}

.feels-icon-circle{
  width:64px;
  height:64px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--mint);
  font-size:1.7rem;
  line-height:1;
}

.feels-label{
  font-weight:700;
  font-size:.92rem;
  text-align:center;

  color:var(--ink);
}

.packed-heading{
  font-size:clamp(1.3rem,2.6vw,1.85rem);
  line-height:1.15;
  text-align:center;

  color:var(--ink);

  margin-top:56px;
}

.packed-list{
  display:flex;
  flex-direction:column;
  gap:14px;

  margin-top:22px;
}

.packed-item{
  display:flex;
  align-items:center;
  gap:12px;
}

.packed-icon-circle{
  flex-shrink:0;

  width:40px;
  height:40px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--mint);
  font-size:1.05rem;
  line-height:1;
}

.packed-label{
  font-weight:600;
  font-size:.88rem;

  color:var(--ink);
}

/* Intro line that replaces the old .section-head p on the homepage
   FAQ — the heading + supporting sentence now live inside the
   left-hand sticky column instead of a centred section head. */
.faq-content .faq-intro{
  margin-top:16px;

  max-width:46ch;

  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.6;
}

.faq-content h2{
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.15;

  color:var(--green-deeper);
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;

  margin-top:32px;
}

.faq-item{
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:18px;
  padding:6px 26px;
}

.faq-item p{
  padding-bottom:22px;
  color:var(--ink-soft);
}

.faq-see-all{
  display:inline-block;
  margin-top:26px;

  color:var(--green-dark);

  font-weight:700;
  font-size:.95rem;

  text-decoration:underline;
  text-underline-offset:3px;
}

/* The homepage FAQ reuses the shared .faq-item / .faq-summary markup,
   but restores the row padding, weight and pointer cursor its rows
   shipped with originally — the shared .faq-summary rule sets none
   of those, and story.html's rows sit in a wider column where the
   tighter default reads fine. Scoped to #faq so story.html is
   completely unaffected. */
#faq .faq-summary{
  padding:20px 0;
  font-weight:600;
  cursor:pointer;
}

/* Keeps the homepage FAQ heading its original ink colour rather than
   the story page's deep-green treatment, so nothing outside the two
   requested changes shifts on index.html. */
#faq .faq-content h2{
  color:var(--ink);
}

/* =========================================================
   RITUAL PAGE — step-by-step walkthrough + Five Pillars

   The step list reuses the FAQ accordion's <details>/<summary>
   pattern (same plus/minus toggle, zero extra JS) with a
   numbered badge standing in for the question mark. The
   texture-experience "Transformation" block on this page
   reuses index.html's exact markup/classes, so script.js's
   existing texture-loop wiring drives it automatically.
========================================================= */

.ritual-steps{
  background:var(--mint);
}

.ritual-steps .section-head{
  max-width:780px;
  margin:0 auto 40px;
  text-align:center;
}

.ritual-step-list{
  display:flex;
  flex-direction:column;
  gap:14px;

  max-width:760px;
  margin:0 auto;
}

.ritual-step{
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:18px;
  padding:6px 26px;
}

.ritual-step-summary{
  display:flex;
  align-items:center;
  gap:16px;

  padding:16px 0;

  list-style:none;
  cursor:pointer;
}

.ritual-step-summary::-webkit-details-marker{
  display:none;
}

.ritual-step-summary::marker{
  content:"";
}

.ritual-step-num{
  flex:none;

  width:34px;
  height:34px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--green);
  color:#fff;

  font-weight:700;
  font-size:.92rem;
}

.ritual-step-name{
  flex:1;

  font-family:'Fraunces',serif;
  font-weight:650;
  font-size:1.15rem;

  color:var(--ink);
}

.ritual-step .faq-toggle{
  flex:none;
}

.ritual-step p{
  padding:0 0 22px 50px;
  color:var(--ink-soft);
}

.pillars-section{
  background:var(--cream);
}

/* Product showcase reusing .product-row/.product-visual/.product-copy
   from the MUGTEA PRODUCT block above — just needs its own section
   background here since it sits below the dark ritual CTA band. */
.ritual-product{
  background:var(--cream-soft);
}

.pillars-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px;
}

.pillar-card{
  padding:30px 26px;

  border-radius:var(--radius-lg);

  background:rgba(255,255,255,.75);
  border:1px solid rgba(16,35,26,.1);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;

  text-align:center;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.pillar-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 55px -32px rgba(16,35,26,.5);
}

.pillar-num{
  width:44px;
  height:44px;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--yellow);
  color:var(--ink);

  font-family:'Fraunces',serif;
  font-weight:650;
}

.pillar-card h3{
  font-size:1.15rem;
}

.pillar-card p{
  color:var(--ink-soft);
  font-size:.94rem;
}

.ritual-manifesto{
  background:#fff;
  text-align:center;
}

.ritual-manifesto-inner{
  max-width:760px;
  margin:0 auto;
}

.ritual-manifesto-heading{
  font-size:clamp(1.5rem,3.2vw,2.35rem);
  line-height:1.2;

  color:var(--ink);

  margin-bottom:22px;
}

.ritual-manifesto-quote{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.6rem);
  line-height:1.5;

  color:var(--ink-soft);
}

/* =========================================================
   RITUAL PAGE — TARGETED LAYOUT MODIFICATIONS
   (applied per latest request)
========================================================= */

/* 1. "Paste. Cream. Milk. Foam." transformation section.
   The section sits on the page's green body background, so the
   grey --ink-soft paragraph was low-contrast. Override it to the
   off-white brand tone for readability. */
#transformation .section-head p{
  color:var(--cream-soft);
}

/* 2. Efficacy pillar section — reduce the vertical gap between
   the five pillar cards and the quote below them. Both sections
   normally inherit `body.ritual-page section { padding:64px 0; }`,
   so trimming each side brings them much closer together while
   keeping a clean, breathable separation. */
#pillars{
  padding-bottom:24px;
}

#manifesto{
  padding-top:24px;
}

/* Trim the heading's own bottom margin slightly too, so the
   quote sits closer to it as well. */
#manifesto .ritual-manifesto-heading{
  margin-bottom:16px;
}

/* ---- Responsive --------------------------------------------------------- */

@media(max-width:900px){

  .story-cards{
    grid-template-columns:1fr;
    gap:24px;
  }

  .corners-cards{
    grid-template-columns:1fr;
    gap:24px;
  }

  .reviews-grid{
    grid-template-columns:1fr;
  }

  .final-cta-inner{
    grid-template-columns:1fr;
  }

  .final-cta-heading{
    order:-2;
  }

  .final-cta-media{
    order:-1;
  }

  .final-cta-line{
    white-space:normal;
  }

  .final-cta-copy{
    padding:26px 22px;
  }

  .final-cta-media .img-placeholder{
    aspect-ratio:4/3;
  }

  .faq-inner{
    grid-template-columns:1fr;
    gap:32px;
  }

  .faq-content{
    position:static;
  }
}

@media(max-width:620px){

  .story-hero{
    padding:48px 18px;
    min-height:34vh;
    max-height:46vh;
  }

  /* Dynamic island on mobile — MODIFICATION:
     The full seven-step trail can't fit on one row at narrow
     widths, so we now keep it as a single non-wrapping row and
     hide the two middle steps (Touch + Breathe) along with their
     following arrows, leaving exactly:

         Cleanse → Feel → Nourish → Soothe

     which fits comfortably on one line and keeps the playful
     "dynamic island" feel. The hidden children are:
       - child 3  : "Touch"   segment
       - child 4  : the arrow that follows it
       - child 7  : "Breathe" segment
       - child 8  : the arrow that follows it */
  .ritual-pill-island{
    flex-wrap:nowrap;
    justify-content:center;
    max-width:100%;
    padding:8px 14px;
    font-size:.72rem;
  }

  .ritual-pill-island.is-flexing{
    padding:8px 16px;
  }

  .ritual-pill-island > :nth-child(3),
  .ritual-pill-island > :nth-child(4),
  .ritual-pill-island > :nth-child(7),
  .ritual-pill-island > :nth-child(8){
    display:none;
  }

  .story-cta{
    padding:36px 22px;
  }

  .reviews-tabs{
    gap:10px;
  }

  .reviews-tab{
    padding:11px 18px;
    font-size:.86rem;
  }

  .feels-grid{
    gap:18px;
  }

  .feels-icon-circle{
    width:56px;
    height:56px;
    font-size:1.5rem;
  }

  .ritual-step{
    padding:6px 18px;
  }

  .ritual-step-summary{
    gap:12px;
  }

  .ritual-step-name{
    font-size:1.02rem;
  }

  .ritual-step p{
    padding-left:0;
    margin-top:4px;
  }

  .pillars-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================================
   OUR SCIENCE PAGE (our-science.html)

   Every rule below is scoped to body.science-page, so none of it can
   leak into index.html, story.html or ritual.html.
========================================================================= */

/* ---- 1. HERO — copy left, visual right ---------------------------------
   .hero-inner is normally a centred flex column (shared with the other
   pages). Here it becomes a two-column grid: headline + CTAs on the
   left, visual on the right. The copy column is vertically centred
   against the visual, so the text block sits in the middle of the
   image it stands beside. Everything collapses back to the stacked,
   centred arrangement once two comfortable columns no longer fit.
------------------------------------------------------------------------ */

body.science-page .hero{
  padding:72px 32px 56px;
}

body.science-page .hero--split .hero-inner{
  display:grid;

  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);

  gap:clamp(28px,4vw,64px);

  align-items:center;

  text-align:left;
}

body.science-page .hero--split .hero-copy{
  min-width:0;

  /* Establishes a sizing context for the headline below, so its
     font-size can be computed as a fraction of this column's own
     width (via cqw units) — not the viewport's. That's what lets
     the heading fill the space up to the image at any width,
     split or stacked, instead of sitting at a fixed small size
     with empty space beside it. */
  container-type:inline-size;
}

body.science-page .hero--split .hero-badge-row,
body.science-page .hero--split .hero-ctas{
  justify-content:flex-start;
}

/* The headline's font-size is driven by the hero-copy container's
   own width (cqw), not the viewport (vw): 12.3cqw makes the wider
   of the two lines ("Serious Science.") span ~97% of the column,
   so the heading occupies the full space up to the image beside
   it — at any column width, because cqw is self-scaling. The
   clamp() floor/ceiling only guard extreme edge cases (a very
   narrow embed, or an unrealistically wide column); in normal use
   the cqw value alone determines the size. Each line is a nowrap
   block, so the headline always renders as exactly two rows —
   "Playful Texture," on top, "Serious Science." below.

   NOTE: the authoritative copy of these headline rules lives in
   an inline <style> block at the top of our-science.html (after
   the stylesheet link, marked !important) so a cached version of
   this file can never override them. These declarations are kept
   here as a matching fallback for any other page that might reuse
   .h1-line. */
body.science-page .hero--split h1{
  font-size:clamp(1.4rem,12.3cqw,4.6rem);

  line-height:1.1;

  max-width:none;

  text-align:left;
}

body.science-page .hero--split h1 .h1-line{
  display:block;

  white-space:nowrap;
}

body.science-page .hero--split .hero-sub{
  margin-top:18px;

  font-size:clamp(1rem,1.4vw,1.15rem);

  max-width:46ch;
}

/* Fill the column instead of inheriting the generic 480px cap */
body.science-page .hero--split .hero-visual{
  margin-top:0;

  width:100%;
  max-width:none;
}

/* ---- 2. MEET DR. AURA --------------------------------------------------
   The portrait and the copy card share one height: the row stretches
   both columns and the portrait fills whatever height the card
   establishes. Its own minimum height scales with the viewport, so
   the image resizes with the page rather than sitting in a fixed box.
------------------------------------------------------------------------ */

body.science-page #meet-aura{
  padding-bottom:56px;
}

body.science-page #meet-aura .product-row{
  align-items:stretch;
}

body.science-page #meet-aura .product-visual{
  width:100%;
  height:100%;
}

body.science-page #meet-aura .product-visual .img-placeholder{
  flex:1;
  align-self:stretch;

  width:100%;
  height:100%;

  aspect-ratio:auto;

  min-height:clamp(280px,32vw,420px);
}

/* Credential chips shrink fluidly with the viewport, so the row wraps
   into at most two or three lines instead of stretching the card.
   These are .active-chip (not .pill) so they inherit the magnetic
   hover behaviour that script.js wires up for the shop card chips. */
body.science-page #meet-aura .hero-badge-row{
  gap:clamp(6px,1.4vw,10px);
}

body.science-page #meet-aura .active-chip{
  font-size:clamp(.62rem,2.4vw,.8rem);

  padding:
    clamp(3px,1vw,7px)
    clamp(6px,1.8vw,16px);

  line-height:1.2;

  white-space:nowrap;
}

/* ---- 3. RESULTS — tighter gap from the card above --------------------- */

body.science-page #results{
  padding-top:56px;
}

/* ---- 4. FORMULATED WITH INTENTION ------------------------------------- */

/* Pull the five accordion layers closer to the intro sentence above. */
body.science-page #formulation .section-head{
  margin-bottom:26px;
}

/* Make "The Stuff We Leave Out" read as a proper section heading, and
   give it clear breathing room before the free-from row beneath it. */
body.science-page .packed-heading{
  font-size:clamp(1.9rem,3.8vw,2.6rem);

  line-height:1.15;

  margin-top:52px;
  margin-bottom:36px;
}

/* ---- 5. SHOP THE RITUAL — tighter gap from the section above ---------- */

body.science-page #formulation{
  padding-bottom:56px;
}

body.science-page #shop{
  padding-top:56px;
  padding-bottom:56px;
}

/* Tube visual sized from its own column width, so it tracks the page */
body.science-page .ritual-product .product-visual{
  width:100%;
  max-width:100%;

  aspect-ratio:4/5;
}

body.science-page .ritual-product .ritual-tube-visual{
  width:100%;
  height:100%;
  max-width:100%;

  aspect-ratio:auto;
}

/* ---- 6. FAQ — tighter gap from the section above ---------------------- */

body.science-page #faq{
  padding-top:56px;
}

/* ---- 7. "THE STUFF WE LEAVE OUT" --------------------------------------
   Free-from list on the left, infographic on the right. On narrow
   screens the infographic moves above the list.
------------------------------------------------------------------------ */

body.science-page .packed-row{
  display:grid;

  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

  gap:clamp(24px,4vw,60px);

  align-items:center;

  max-width:900px;
  margin:0 auto;
}

/* The list's own top margin is for a stacked layout — the grid gap
   handles spacing here. */
body.science-page .packed-row .packed-list{
  margin-top:0;
}

body.science-page .packed-row .packed-visual{
  width:100%;
}

/* ---- Responsive -------------------------------------------------------- */

@media(max-width:900px){

  /* Hero collapses back to a stacked, centred block */
  body.science-page .hero--split .hero-inner{
    grid-template-columns:1fr;

    gap:0;

    text-align:center;

    /* .hero-copy becomes display:contents below, so it stops
       being the nearest sizing context for the cqw-based
       headline — this ancestor takes over that role instead. */
    container-type:inline-size;
  }

  /* Dissolves the .hero-copy wrapper as a box (its own layout
     rules — the split-view grid column sizing — no longer apply
     once stacked) so its children become direct items of the
     .hero-inner grid above, alongside .hero-visual. That lets the
     image be placed between the subhead and the CTAs by `order`
     alone, instead of being stuck after the whole copy block. */
  body.science-page .hero--split .hero-copy{
    display:contents;
  }

  body.science-page .hero--split .hero-badge-row{
    order:1;
  }

  body.science-page .hero--split h1{
    order:2;
  }

  body.science-page .hero--split .hero-sub{
    order:3;
  }

  body.science-page .hero--split .hero-visual{
    order:4;
  }

  body.science-page .hero--split .hero-ctas{
    order:5;
  }

  body.science-page .hero--split .hero-badge-row,
  body.science-page .hero--split .hero-ctas{
    justify-content:center;
  }

  body.science-page .hero--split h1,
  body.science-page .hero--split .hero-sub{
    margin-left:auto;
    margin-right:auto;
  }

  /* Image now sits below the copy instead of beside it, so the
     headline no longer needs to stay left-anchored against it —
     centre it like the rest of the stacked block. */
  body.science-page .hero--split h1{
    text-align:center;
  }

  /* Sits between the subhead and the CTAs now (see `order`
     above), so its own top margin — previously set against the
     end of the whole copy block — is trimmed to match the
     spacing used between the other stacked elements. */
  body.science-page .hero--split .hero-visual{
    margin:32px auto 0;
    max-width:480px;
  }

  body.science-page .hero--split .hero-ctas{
    margin-top:32px;
  }
}

@media(max-width:860px){

  /* Once the portrait is stacked, it returns to a portrait aspect
     instead of stretching to an unrelated card height. */
  body.science-page #meet-aura .product-visual .img-placeholder{
    flex:none;

    aspect-ratio:4/5;

    min-height:0;
  }
}

@media(max-width:780px){

  /* Infographic above the free-from list */
  body.science-page .packed-row{
    grid-template-columns:1fr;
    gap:28px;
  }

  body.science-page .packed-row .packed-visual{
    order:-1;
  }
}

/* Narrow phones: trim the science hero's horizontal padding so the
   fluid, non-wrapping hero pill row still fits on one line. Needs
   the same body.science-page specificity to beat the base rule
   above, so it's declared last in source order. */
@media(max-width:620px){

  body.science-page .hero{
    padding-left:18px;
    padding-right:18px;
  }
}

/* =========================================================
   LEGAL / POLICY PAGES
   (Privacy, Terms, Shipping, Returns, Accessibility)

   Reuses existing tokens (--cream/--ink/--green/--line/
   --radius-lg/--shadow-soft), the .story-hero header pattern,
   .wrap container, and the .faq-item accordion component —
   no new color or type system introduced.
========================================================= */

.legal-hero{
  min-height:26vh;
  max-height:34vh;
  padding:48px 20px 40px;
}


.legal-hero h1{
  font-size:clamp(1.5rem,3.2vw,2.4rem);
}

.legal-updated{
  margin-top:14px;
  font-size:.9rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
}

.legal-disclaimer{
  background:var(--yellow-soft);
  border:1px solid rgba(16,35,26,.12);
  border-radius:var(--radius-md);
  padding:18px 24px;
  margin:32px auto 0;
  max-width:900px;
}

.legal-disclaimer p{
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink);
}

.legal-disclaimer strong{
  font-weight:800;
}

.legal-section{
  background:var(--cream);
  padding:56px 0 90px;
}

.legal-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:56px;
  align-items:start;
}

.legal-toc{
  position:sticky;
  top:130px;

  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 22px;
}

.legal-toc h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
}

.legal-toc ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  counter-reset:legal-toc;
}

.legal-toc li{
  counter-increment:legal-toc;
}

.legal-toc a{
  display:flex;
  gap:10px;
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-soft);
  line-height:1.35;
  transition:color .2s ease;
}

.legal-toc a::before{
  content:counter(legal-toc);
  flex:0 0 auto;
  color:var(--green-dark);
  font-weight:800;
}

.legal-toc a:hover,
.legal-toc a:focus-visible{
  color:var(--green-deeper);
}

.legal-content{
  max-width:74ch;
}

/* =========================================================
   LEGAL ACCORDION

   Each policy section is a <details class="legal-accordion-item">
   card — same visual language and plus/minus .faq-toggle used by
   the homepage FAQ and the ritual steps, so it matches the rest
   of the site with no new component language. Native <details>
   also means a #hash link from the "On this page" nav auto-opens
   the right card in modern browsers, with no extra JS required.
========================================================= */

.legal-accordion{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.legal-accordion-item{
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:18px;
  padding:6px 26px;
  scroll-margin-top:150px;
}

.legal-accordion-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:20px 0;

  list-style:none;
  cursor:pointer;
}

.legal-accordion-summary::-webkit-details-marker{
  display:none;
}

.legal-accordion-summary::marker{
  content:"";
}

.legal-accordion-item .faq-toggle{
  flex:none;
}

.legal-accordion-summary h2{
  font-family:'Fraunces',serif;
  font-weight:650;
  font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--green-deeper);
  letter-spacing:-.01em;
  margin:0;
  line-height:1.3;
}

.legal-accordion-body{
  padding-bottom:26px;
}

.legal-accordion-body h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.02rem;
  font-weight:800;
  margin:22px 0 10px;
}

.legal-accordion-body p{
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.7;
  margin-bottom:14px;
}

.legal-accordion-body p:last-child{
  margin-bottom:0;
}

.legal-accordion-body ul,
.legal-accordion-body ol{
  margin:0 0 14px;
  padding-left:22px;
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.7;
}

.legal-accordion-body ul:last-child,
.legal-accordion-body ol:last-child{
  margin-bottom:0;
}

.legal-accordion-body li{
  margin-bottom:8px;
}

.legal-accordion-body a{
  color:var(--green-deeper);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-accordion-body strong{
  color:var(--ink);
}

.legal-callout{
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px 24px;
  margin:18px 0;
}

.legal-callout p{
  margin-bottom:0;
  color:var(--ink);
  font-size:.94rem;
}

.legal-callout p + p{
  margin-top:10px;
}

.legal-callout.warn{
  background:#FBEAEA;
  border-color:rgba(214,69,69,.28);
}

.legal-callout.warn p{
  color:#7A2B2B;
}

.legal-table-wrap{
  overflow-x:auto;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}

.legal-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  background:var(--cream-soft);
}

.legal-table caption{
  caption-side:top;
  text-align:left;
  font-weight:700;
  padding:14px 18px 0;
}

.legal-table th,
.legal-table td{
  text-align:left;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  color:var(--ink-soft);
}

.legal-table th{
  color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:var(--cream-deep);
}

.legal-table tr:last-child td{
  border-bottom:none;
}

.legal-contact-card{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
}

.legal-contact-card div h3{
  margin:0 0 4px;
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:800;
}

.legal-contact-card div p{
  margin:0;
  font-weight:700;
  color:var(--ink);
}

@media(max-width:900px){
  .legal-layout{
    grid-template-columns:1fr;
    gap:32px;
  }

  /* On the stacked mobile/tablet layout the TOC moves above the
     accordion (instead of trailing it, as it did on desktop) so a
     visitor sees the full list of sections — and what's covered —
     before they start scrolling through the content itself. */
  .legal-toc{
    position:static;
    order:1;
  }

  .legal-content{
    order:2;
    max-width:none;
  }
}

@media(max-width:620px){
  .legal-section{
    padding:40px 0 64px;
  }

  .legal-disclaimer{
    margin:20px 0 0;
    padding:16px 18px;
  }

  .legal-toc{
    padding:18px;
  }

  .legal-toc ol{
    gap:8px;
  }

  .legal-toc a{
    font-size:.85rem;
  }

  /* Cards lose their side padding on phones so text gets full width
     instead of being squeezed into a narrow column; the toggle stays
     a fixed, easy-to-tap size instead of shrinking with the heading. */
  .legal-accordion-item{
    padding:4px 18px;
    border-radius:16px;
  }

  .legal-accordion-summary{
    gap:14px;
    padding:16px 0;
  }

  .legal-accordion-body{
    padding-bottom:20px;
  }

  .legal-table th,
  .legal-table td{
    padding:12px 14px;
    font-size:.86rem;
  }

  .legal-contact-card{
    flex-direction:column;
    gap:14px;
  }
}

@media(max-width:420px){
  .legal-accordion-item{
    padding:2px 14px;
  }

  .legal-accordion-summary{
    gap:10px;
  }

  .legal-accordion-summary h2{
    font-size:1rem;
  }
}