/* ============================================================
   PHREE SKIN — HOME (rebuilt to Seed's craft, in Phree's brand)
   Full-bleed hero + notch · charcoal two-product band w/ lift motion ·
   glass science band w/ reactive microbiome · draggable rail · IG row.
   Cool palette · Stolzl · sky-blue only on price. Braille dot grid.
   ============================================================ */

/* on-media helpers (home-scoped) --------------------------------- */
.tlink--onmedia{ color:#fff; }
.tlink--onmedia .arw{ transition:transform .4s var(--e-out); }
.tlink--onmedia:hover .arw{ transform:translateX(4px); }
.btn--dark .arw{ margin-left:-.15em; }

/* ================================================================
   NODE 1 — HERO  (full-bleed video · dot grid · text on top · NOTCH)
   The hero is calc(100vh - 48px) tall; the products band below has
   rounded top corners and gets pulled up under it, so ~48px of the
   dark band peeks as the "curve". Nav sits transparent over it.
   ================================================================ */
.hero{
  position:relative; overflow:hidden; isolation:isolate; z-index:2;
  min-height:640px; height:calc(100svh - 48px);
  display:flex; align-items:flex-start;          /* text rides the TOP-LEFT (the video's clean deep-blue corner) */
  color:#fff;
  /* pull the top of the hero up under the transparent nav */
  margin-top:calc(-1 * (var(--nav-h, 82px)));
  padding-top:var(--nav-h, 82px);
  /* THE CURVE lives on the TOP section: the hero has a rounded bottom, and the
     section below tucks up behind it (cuts in) — reads as the hero floating over it. */
  border-radius:0 0 2rem 2rem;
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__video{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transform-origin:center; }
/* crisp high-res still hero + slow cinematic zoom so it still "breathes" */
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; transform-origin:center;
  animation:heroZoom 26s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1.05) } to{ transform:scale(1.16) } }
@media (prefers-reduced-motion:reduce){ .hero__img{ animation:none; transform:scale(1.06); } }
/* legibility scrim — deterministic contrast for the WHITE nav (top) + the
   headline (bottom-left), tuned for the bright snow/sky mountain plate. The
   bottom well is deep enough that the display type reads at AA on any frame. */
.hero__tint{ position:absolute; inset:0;
  /* darken the TOP (esp. top-left) for the white nav + the headline that now rides up there */
  background:
    linear-gradient(180deg, rgba(9,15,20,.60) 0%, rgba(9,15,20,.34) 26%, rgba(9,15,20,.06) 52%, rgba(9,15,20,0) 78%, rgba(9,15,20,.10) 100%),
    radial-gradient(120% 82% at 14% 4%, rgba(9,15,20,.52), transparent 58%); }
.hero__dots{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; mix-blend-mode:screen; }

.hero__inner{
  position:relative; z-index:2;
  padding-top:clamp(2.4rem, 7vh, 5rem);          /* dropped a bit lower — off the nav */
  display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem;
}
.hero__title{
  font-size:var(--t-display); color:#fff; max-width:16ch;
  text-shadow:0 2px 40px rgba(6,12,18,.35);
}
.hero__sub{ max-width:46ch; font-size:var(--t-lead); color:rgba(255,255,255,.9); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:.55rem; }

.hero__scrollcue{ position:absolute; right:clamp(1.1rem,3vw,2.4rem); bottom:1.6rem; z-index:2;
  writing-mode:vertical-rl; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.6); display:flex; align-items:center; gap:.9rem; }
.hero__scrollcue::after{ content:""; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7), transparent);
  animation:cueDrop 2s var(--e-inout) infinite; }
@keyframes cueDrop{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0; } 40%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); transform-origin:bottom; opacity:0; } }
@media (max-width:640px){ .hero__scrollcue{ display:none; } }


/* ================================================================
   NODE 3 — QUICK-BUY  (Seed-style: strong cool band · the NOTCH ·
   borderless glassmorphic cards, minimal — bottle · name · price · shop)
   ================================================================ */
.qbuy{
  position:relative; z-index:1; color:#fff;
  background:linear-gradient(168deg,#173650 0%,#0E1D29 92%);   /* strong, cool, no green */
  margin-top:-2rem;                                            /* tuck up BEHIND the hero's rounded bottom */
  border-radius:0;
  padding-block:calc(2rem + clamp(3.4rem, 4vw + 2rem, 5.8rem)) clamp(3.4rem, 4vw + 2rem, 5.8rem);
  overflow:hidden;
}
.qbuy__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:clamp(2rem, 2vw + 1.2rem, 3rem); }
.qbuy__title{ font-size:var(--t-h2); color:#fff; max-width:16ch; margin-top:.55rem; }
.qbuy__all{ flex:none; padding-bottom:.35rem; white-space:nowrap; }
.qbuy .eyebrow--onmedia{ color:rgba(255,255,255,.82); }

.qbuy__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem, 2vw, 1.6rem); }

/* the borderless glass card — quick-buy: bottle, name, starting price, shop */
.qcard{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(1.6rem,2.4vw,2.4rem) clamp(1.3rem,2vw,2rem) clamp(1.4rem,2vw,1.8rem);
  border-radius:var(--r-panel);
  background:rgba(255,255,255,.055);                           /* frosted · NO border */
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  /* INDENTED, very slightly — the glass reads as carved into the panel, not floating out */
  box-shadow:inset 0 3px 15px -4px rgba(0,0,0,.32), inset 0 1px 1px rgba(0,0,0,.16),
             inset 0 -1px 0 rgba(255,255,255,.05);
  transition:background .4s, box-shadow .4s var(--e-out);
}
.qcard:hover{ background:rgba(255,255,255,.09);
  box-shadow:inset 0 4px 19px -4px rgba(0,0,0,.38), inset 0 1px 1px rgba(0,0,0,.18),
             inset 0 -1px 0 rgba(255,255,255,.05); }        /* presses in a touch more */
.qcard__tag{ align-self:center; margin-bottom:.9rem; }   /* centered, ABOVE the bottle — never over it */
.qcard--soon .qcard__tag{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
/* bottle shot — bg-removed, contained (no crop), soft glow beneath */
.qcard__shot{ position:relative; width:100%; height:clamp(210px,32vw,290px);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.qcard__shot::after{ content:""; position:absolute; left:50%; bottom:6%; width:60%; height:24%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(115,179,206,.34), transparent 70%); filter:blur(6px); z-index:-1; }
.qcard__shot img{ height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 24px 34px rgba(0,0,0,.45));
  transition:transform .6s var(--e-out); }
.qcard:hover .qcard__shot img{ transform:translateY(-5px) scale(1.02); }
.qcard__meta{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.15rem; }
.qcard__name{ font-size:var(--t-h3); font-weight:var(--fw-med); color:#fff; line-height:1.14; }
.qcard__from{ display:flex; align-items:baseline; gap:.4em; justify-content:center;
  font-size:.9rem; color:rgba(255,255,255,.7); }
.qcard__from .price{ font-size:1.3rem; color:var(--sky); }   /* brighter sky on the dark card; price rule honoured */
.qcard__cta{ margin-top:auto; }


/* ================================================================
   NODE 3B — BENEFITS  (hero-style: the two products' packaging together
   + one honest benefit line; the bridge from "shop" into the science)
   ================================================================ */
.bene{ background:var(--paper-2); padding-block:clamp(3.4rem,5vw,6rem); overflow:hidden; }
.bene__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,4vw,4rem); }
.bene__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.05rem; }
.bene__title{ font-size:var(--t-h2); color:var(--ink); max-width:15ch; }
.bene__sub{ font-size:var(--t-lead); color:var(--ink-2); max-width:40ch; }
.bene__link{ margin-top:.15rem; }
/* a grid of three REAL packaging shots (tall left + two stacked) */
.bene__shots{ display:grid; grid-template-columns:1.14fr 1fr; grid-template-rows:1fr 1fr;
  gap:clamp(.55rem,1.1vw,.95rem); min-height:clamp(340px,40vw,470px); }
.bene__ph{ position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--stone);
  box-shadow:0 24px 46px -30px rgba(20,40,55,.34); }
.bene__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-seed); }
.bene__ph:hover img{ transform:scale(1.05); }
.bene__ph--tall{ grid-row:1 / span 2; }


/* ================================================================
   NODE 4B — THE MICROBIOME MOMENT (pinned scroll-scrub)
   The section is a tall scroll TRACK; .mbz__pin sticks to the viewport so
   the page freezes and only the dot-field scrubs (disrupted → balanced),
   told in 3 beats. Real skin surface behind the dots, cool-graded.
   ================================================================ */
.mbz{ position:relative; height:400vh; background:#0a141b; }   /* taller track = more forgiving scroll */
.mbz__pin{ position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; display:flex; align-items:center; }

/* full-bleed green-moss still — sharp at the edges, blurred THROUGH the glass card */
.mbz__bgimg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(1.06); transform:scale(1.06); }
.mbz__bgtint{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(130% 115% at 50% 42%, rgba(9,20,28,.14), rgba(5,12,18,.56) 84%); }

/* the Seed-style glass card — NO outline (soft drop shadow only) */
.mbz__wrap{ position:relative; z-index:2; width:100%; }
.mbz__glass{ position:relative; border-radius:clamp(22px,2.2vw,32px);
  padding:clamp(1.7rem,3vw,3.2rem) clamp(1.6rem,3vw,3.4rem);
  background:linear-gradient(180deg, rgba(13,24,32,.42), rgba(8,16,22,.56));
  backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:0 46px 100px -46px rgba(0,0,0,.72);
  color:#fff; }
.mbz__grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(1.6rem,3.5vw,3.6rem); align-items:center; }

/* LEFT — the readable story (white on the dark glass) */
.mbz__inner{ display:flex; flex-direction:column; gap:clamp(1rem,2.4vh,1.6rem); min-width:0; }
.mbz__beats{ position:relative; min-height:clamp(11rem,30vh,15rem); max-width:44ch; }
.mbz__beat{ position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .5s var(--e-out), transform .5s var(--e-out); }
.mbz__beat.is-on{ opacity:1; transform:none; pointer-events:auto; }
.mbz__h{ font-size:var(--t-h2); font-weight:var(--fw-reg); letter-spacing:var(--track-tight);
  color:#fff; line-height:1.05; margin-bottom:.9rem; max-width:18ch; }
.mbz__p{ font-size:var(--t-lead); color:rgba(255,255,255,.80); max-width:44ch; }
.mbz__foot{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:clamp(1.2rem,3vh,2.2rem); padding-top:clamp(.9rem,2vh,1.4rem);
  border-top:1px solid rgba(255,255,255,.16); }
.mbz__progress{ display:none; gap:.5rem; }
.mbz__pdot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .4s var(--e-out), transform .4s var(--e-out); }
.mbz__pdot.is-on{ background:var(--sky); transform:scale(1.3); }

/* RIGHT — the animation, CHROMELESS on the glass (no panel) */
.mbz__viz{ position:relative; min-height:clamp(300px,52vh,520px); }
.mbz__canvas{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; }
.mbz__state{ position:absolute; left:.1rem; top:.1rem; z-index:3; display:inline-flex; align-items:center; gap:.5em;
  padding:.4em .8em; border-radius:var(--r-pill); background:rgba(9,15,20,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:.72rem; letter-spacing:.02em; color:#fff; }
.mbz__statedot{ width:.5em; height:.5em; border-radius:50%; background:#DB8A78; flex:none; transition:background .5s var(--e-seed); }
.mbz.is-healed .mbz__statedot{ background:var(--sky); }
.mbz__bal{ display:none; }
.mbz.is-healed .mbz__dis{ display:none; }
.mbz.is-healed .mbz__bal{ display:inline; }

/* ---- STEP RAIL (far right) — dot progress; the connector draws to the next dot,
   then the baton passes as it lights. Tuned for the dark glass field. ---- */
.mbz__rail{ position:absolute; right:clamp(.7rem,2.2vw,1.7rem); top:50%; transform:translateY(-50%);
  z-index:6; height:clamp(168px,34vh,258px); width:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.mbz__railtrack, .mbz__railfill{ position:absolute; left:50%; top:7px; width:2px; transform:translateX(-50%); border-radius:2px; }
.mbz__railtrack{ bottom:7px; background:rgba(255,255,255,.22); }
.mbz__railfill{ height:calc(100% - 14px); transform-origin:top; transform:translateX(-50%) scaleY(var(--p,0));
  background:linear-gradient(180deg, var(--sky, #73B3CE), var(--sky-deep, #4E96B4));
  box-shadow:0 0 12px rgba(115,179,206,.75); transition:transform .18s linear; }
.mbz__rdot{ position:relative; z-index:2; width:12px; height:12px; border-radius:50%;
  background:rgba(18,30,38,.6); border:2px solid rgba(255,255,255,.3);
  transition:background .45s var(--e-out), border-color .45s var(--e-out), box-shadow .45s var(--e-out), transform .45s var(--e-out); }
.mbz__rdot i{ position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
  font-family:var(--font-mono, "Space Mono", monospace); font-size:.62rem; letter-spacing:.08em; font-style:normal;
  color:rgba(255,255,255,.55); white-space:nowrap; opacity:.6; transition:color .45s var(--e-out), opacity .45s var(--e-out); }
.mbz__rdot.is-passed{ background:var(--sky-deep, #4E96B4); border-color:var(--sky-deep, #4E96B4); }
.mbz__rdot.is-active{ background:var(--sky, #73B3CE); border-color:var(--sky, #73B3CE); transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(115,179,206,.2), 0 0 16px rgba(115,179,206,.8); }
.mbz__rdot.is-active i{ color:#fff; opacity:1; }

@media (prefers-reduced-motion:reduce){
  .mbz{ height:auto; }
  .mbz__pin{ position:relative; height:auto; min-height:0; padding-block:clamp(4rem,10vw,7rem); }
  .mbz__beats{ min-height:0; display:flex; flex-direction:column; gap:2.2rem; }
  .mbz__beat{ position:static; opacity:1; transform:none; }
}
@media (max-width:860px){
  .mbz{ height:340vh; }
  .mbz__grid{ grid-template-columns:1fr; gap:clamp(1.3rem,4vw,1.9rem); }
  .mbz__inner{ order:1; }                     /* text first (top) */
  .mbz__viz{ order:2; min-height:clamp(240px,44vh,360px); }
  .mbz__beats{ min-height:11rem; }
  .mbz__rail{ display:none; }
  .mbz__progress{ display:flex; }
}


/* ================================================================
   NODE 4C — DRAGGABLE CAROUSEL  (full-bleed · scroll-snap · momentum)
   ================================================================ */
.rail{ padding-block:var(--sp-section) clamp(2.5rem,4vw,4rem); background:var(--paper); overflow:hidden; }
.rail__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(1.8rem,2vw+1rem,3rem); }
.rail__title{ font-size:var(--t-h2); max-width:18ch; margin-top:.55rem; }
.rail__drag{ flex:none; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-bottom:.5rem; white-space:nowrap; }

.rail__track{
  display:flex; gap:clamp(1rem,1.6vw,1.6rem);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  padding-inline:var(--gutter); padding-block:.4rem 1.6rem;
  cursor:grab; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail__track.is-dragging a{ pointer-events:none; }
.rail__track.is-dragging .rtile__img img{ transform:none; transition:none; }  /* no hover-scale flicker mid-drag */

.rtile{ flex:0 0 clamp(260px, 30vw, 340px); scroll-snap-align:start;
  display:flex; flex-direction:column; border-radius:var(--r-card); overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--sh-sm); }
.rtile__img{ aspect-ratio:4/5; overflow:hidden; background:var(--stone); }
.rtile__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-seed); }
.rtile:hover .rtile__img img{ transform:scale(1.05); }
.rtile__body{ padding:1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.5rem; }
.rtile__n{ font-size:.72rem; letter-spacing:.16em; color:var(--sky-deep); font-weight:var(--fw-med); }
.rtile__body h3{ font-size:var(--t-h3); font-weight:var(--fw-med); }
.rtile__body p{ font-size:.9rem; color:var(--ink-2); }

.rtile--stat{ background:var(--charcoal); color:#fff; border-color:transparent; }
.rtile__body--stat{ flex:1; justify-content:center; gap:.7rem; padding:2rem 1.6rem; }
.rtile__big{ font-size:clamp(2.6rem,2rem+2.5vw,3.6rem); font-weight:var(--fw-light); color:var(--sky); letter-spacing:-.03em; }
.rtile--stat p{ color:rgba(255,255,255,.7); }
.rtile--stat .btn{ margin-top:.6rem; align-self:flex-start; }


/* ================================================================
   NODE 4D — INSTAGRAM ROW  (compact grid linking out)
   ================================================================ */
.insta{ background:var(--paper); }
.insta__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.4rem,2vw,2.2rem); }
.insta__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.5rem,1vw,1rem); }
.itile{ position:relative; aspect-ratio:1; border-radius:var(--r-card); overflow:hidden; background:var(--stone); }
.itile img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e-seed); }
.itile:hover img{ transform:scale(1.07); }
.itile__ig{ position:absolute; right:.6rem; bottom:.6rem; width:20px; height:16px; color:#fff; opacity:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition:opacity .35s var(--e-out); }
.itile:hover .itile__ig{ opacity:.95; }
.itile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,16,22,.28), transparent 45%);
  opacity:0; transition:opacity .35s; }
.itile:hover::after{ opacity:1; }


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:860px){
  .qbuy__grid{ grid-template-columns:1fr 1fr; gap:.9rem; }   /* keep the pair side-by-side (quick-buy) */
  .qbuy__head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .bene__grid{ grid-template-columns:1fr; gap:1.6rem; }
  .bene__copy{ order:1; }
  .bene__shots{ order:2; min-height:clamp(300px,78vw,420px); }
  .insta__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .hero{ height:calc(100svh - 40px); align-items:flex-start; }
  /* shift the framing to the video's leftmost side (clean deep-blue water) */
  .hero__video{ object-position:12% center; }
  .qbuy{ margin-top:-2rem; }
  .hero__cta{ gap:1.1rem; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  .rail__drag{ display:none; }

  /* ── tap targets: every secondary text-link is thumb-height (≥44px) ── */
  .hero__cta .tlink,
  .qbuy__all,
  .bene__link,
  .science__copy .tlink,
  .insta__head .tlink{ min-height:44px; align-items:center; }
  .hero__cta .tlink{ align-self:flex-start; }
  .qbuy__all,
  .bene__link,
  .science__copy .tlink,
  .insta__head .tlink{ display:inline-flex; }
  .rtile--stat .btn{ padding-block:.85em; }   /* lift the stat CTA to ≥44px */

  /* ── science: let the microbiome centrepiece BREATHE on a phone ──
     trim the frame padding + drop the max-width cap so the stage fills the
     column, and give the labelled chrome enough room to read. */
  .science{ padding-block:clamp(3.6rem,11vw,5.5rem); }
  .science__frame{ padding:1.5rem 1.3rem 1.8rem; gap:1.8rem; border-radius:var(--r-panel); }
  .mbstage.science__graphic{ max-width:none; }
  .mb-state{ font-size:.68rem; }

  /* ── quick-buy band: tighten vertical air; cards stay a compact pair ── */
  .qbuy{ padding-block:clamp(2.8rem,7vw,3.6rem) clamp(2.8rem,7vw,3.6rem); }
  .qcard{ padding:1.3rem 1rem 1.2rem; border-radius:var(--r-card); }
  .qcard__shot{ height:clamp(150px,42vw,210px); }
  .qcard__name{ font-size:1rem; }
  .qcard__tag{ margin-bottom:.6rem; }
  .qcard__cta{ font-size:.8rem; padding:.7em .9em; }
}
@media (max-width:400px){
  /* 360px class: tighten the science glass frame a hair more so the
     stage + caption never crowd the rounded corners */
  .science__frame{ padding:1.3rem 1.05rem 1.6rem; }
}