/* ============================================================
   PHREE SKIN — /science (light system)
   Microbiome education, restrained & credible (Seed/OneSkin caliber).
   Reuses shared primitives (.science lab-window · .sec-head · .glass
   · .chip · .tlink · .price · .btn). Sky-blue reserved for price.
   Pure dots — the Braille motif — never lines. No teal/green.
   ============================================================ */

/* ---------- HERO — light, editorial, clears fixed nav ---------- */
.sci-hero{ position:relative; background:var(--paper); padding-top:clamp(6.5rem,8vw,9rem); padding-bottom:clamp(3rem,6vw,5rem); overflow:hidden; }
.sci-hero__glow{ position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:min(1100px,130%); height:80%;
  background:radial-gradient(ellipse at center, var(--sky-soft), transparent 62%); opacity:.7; z-index:0; pointer-events:none; }
.sci-hero__in{ position:relative; z-index:2; max-width:880px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.sci-hero__title{ font-size:var(--t-display); color:var(--ink); }
.sci-hero__sub{ max-width:58ch; font-size:var(--t-lead); color:var(--ink-2); }
.sci-hero__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:.5rem; }

/* ---------- lab-window (component lives in home.css; redeclared here so /science stands alone) ---------- */
.science{ position:relative; min-height:86svh; display:flex; align-items:center; overflow:hidden; background:var(--charcoal); }
.science__media{ position:absolute; inset:0; z-index:0; }
.science__video{ width:100%; height:100%; object-fit:cover; object-position:60% 30%; }
.science__tint{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,29,41,.72), rgba(14,29,41,.28) 68%), linear-gradient(0deg, rgba(10,14,18,.5), transparent 55%); }
/* on phones the card stacks over the image centre — deepen the veil so white copy always reads */
@media (max-width:680px){
  .science__video{ object-position:58% 26%; }
  .science__tint{ background:linear-gradient(180deg, rgba(10,17,24,.55), rgba(10,17,24,.35) 30%, rgba(10,17,24,.72)); }
}
.science__in{ position:relative; z-index:2; width:100%; }
.science__card{ max-width:min(560px,100%); padding:clamp(1.8rem,4vw,3rem); }
.science__card h2{ font-size:var(--t-h2); color:#fff; margin:1.1rem 0 1.1rem; }
.science__card p{ color:rgba(255,255,255,.85); font-size:var(--t-lead); margin-bottom:1.4rem; }

/* ============================================================
   1b · THE MICROBIOME MOMENT — signature centrepiece (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 beats. Real skin surface behind the dots, cool-graded.
   Copied identically from home.css so it matches the homepage moment.
   Engine: /common/balance.js. Sky-blue stays reserved for price/progress.
   ============================================================ */
.mbz{ position:relative; height:400vh; background:var(--charcoal-2); }
.mbz__pin{ position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden;
  display:flex; align-items:center; color:#fff; }

/* the surface: her real skin macro, cool-graded + softly blurred so the dots
   read as the microbiome living ON skin (not a generic stock plate) */
.mbz__bg{ position:absolute; inset:0; z-index:0;
  background:url("/assets/img/close-up-back.jpg") center 40% / cover no-repeat;
  filter:saturate(.5) brightness(.62) contrast(1.02) blur(3px); transform:scale(1.08); }
.mbz__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(9,15,20,.82) 0%, rgba(9,15,20,.4) 46%, rgba(9,15,20,.12) 100%),
    radial-gradient(110% 100% at 78% 40%, rgba(23,60,84,.45), transparent 60%),
    linear-gradient(180deg, rgba(9,15,20,.5), rgba(9,15,20,.28) 40%, rgba(9,15,20,.62)); }
.mbz__canvas{ position:absolute; inset:0; z-index:2; width:100%; height:100%; mix-blend-mode:screen; }

.mbz__inner{ position:relative; z-index:3; width:100%;
  display:flex; flex-direction:column; gap:clamp(1.1rem,3vh,2rem);
  padding-block:clamp(2rem,7vh,4.5rem); }
.mbz__eyebrow{ }

/* beats, absolute-stacked, cross-faded by .is-on */
.mbz__beats{ position:relative; min-height:clamp(12rem,30vh,16rem); max-width:44ch; }
.mbz__beat{ position:absolute; top:0; left:0; width:100%;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .55s var(--e-out), transform .55s 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.02; margin-bottom:1rem; max-width:15ch; text-shadow:0 2px 30px rgba(6,12,18,.5); }
.mbz__p{ font-size:var(--t-lead); color:rgba(255,255,255,.88); max-width:40ch; text-shadow:0 1px 20px rgba(6,12,18,.4); }

.mbz__foot{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.mbz__progress{ display:flex; 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); }

@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.4rem; }
  .mbz__beat{ position:static; opacity:1; transform:none; }
}
@media (max-width:680px){
  .mbz{ height:380vh; }
  .mbz__scrim{ background:
    linear-gradient(180deg, rgba(9,15,20,.55), rgba(9,15,20,.35) 35%, rgba(9,15,20,.72)),
    radial-gradient(120% 80% at 50% 30%, rgba(23,60,84,.4), transparent 65%); }
  .mbz__beats{ min-height:15rem; }
}

/* ---------- 2 · МИКРОБИОМ 101 ---------- */
.sci101{ position:relative; overflow:hidden; }
.sci101__dots{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55; pointer-events:none; }
.sci101__in{ position:relative; z-index:2; }
.sci101__lead{ max-width:60ch; color:var(--ink-2); font-size:var(--t-lead); }

.sci101__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.s101card{ position:relative; padding:1.5rem 1.6rem 1.8rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper); box-shadow:var(--sh-sm); overflow:hidden; }
/* the box GRAPHIC — a glass chip above the stat (1000-cell grid · pH bar · clock) */
.s101card__viz{ height:clamp(94px,12vw,120px); margin-bottom:1.1rem; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:.5rem;
  background:linear-gradient(158deg, rgba(115,179,206,.13), rgba(115,179,206,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(115,179,206,.16); }
.viz--grid{ width:100%; height:100%; display:block; border-radius:4px; }
.viz--clock{ height:90%; width:auto; }
.viz--ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:0 .3rem; }
.phbar{ display:flex; gap:clamp(3px,.9vw,6px); align-items:center; justify-content:center; }
.phcell{ width:clamp(6px,1.3vw,9px); height:clamp(6px,1.3vw,9px); border-radius:50%; background:var(--line-2); flex:none;
  transition:transform .5s var(--e-out), background .5s; }
.phcell.is-zone{ background:var(--sky); transform:scale(1.55);
  box-shadow:0 0 0 2px var(--sky-soft), 0 4px 10px -3px rgba(78,150,180,.6); }   /* the 4.5–5.5 window */
.s101card__n{ display:block; font-size:clamp(1.8rem,1.2rem + 2.4vw,2.6rem); color:var(--sky-deep); font-weight:var(--fw-reg); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.s101card h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); font-weight:var(--fw-med); margin:.35rem 0 .8rem; }
.s101card p{ color:var(--ink-2); font-size:.95rem; }

/* the microbiome's journey: balanced → disrupted → restored (a numbered sequence) */
.sci101__flow{ padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line); border-radius:var(--r-panel); background:var(--paper-2); }
.sci101__flowk{ text-align:center; text-transform:uppercase; letter-spacing:.15em; font-size:.72rem;
  font-weight:var(--fw-med); color:var(--muted); margin-bottom:1.5rem; }
.flowsteps{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:1rem; }
.flowstep{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.flowstep__num{ display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--sky); color:#0b2531; font-size:.85rem; font-weight:var(--fw-med); box-shadow:0 0 0 5px var(--sky-soft); margin-bottom:.35rem; }
.flowstep--bad .flowstep__num{ background:var(--line-2); color:var(--ink-2); box-shadow:0 0 0 5px var(--stone); }
.flowstep--good .flowstep__num{ background:var(--sky-deep); color:#fff; box-shadow:0 0 0 5px var(--sky-soft); }
.flowstep h4{ font-size:1.05rem; font-weight:var(--fw-med); color:var(--ink); }
.flowstep p{ font-size:.88rem; color:var(--ink-2); }
.flowstep__arrow{ align-self:start; margin-top:.55rem; color:var(--sky-deep); width:22px; }
.flowstep__arrow svg{ width:100%; height:auto; display:block; }

/* ---------- 3 · БАРИЕРАТА ---------- */
.barrier__wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.barrier__media{ position:relative; border-radius:var(--r-panel); overflow:hidden; aspect-ratio:4/5; background:var(--stone); box-shadow:var(--sh-lg); }
.barrier__media .lift__media{ width:100%; height:100%; }
.barrier__media img{ width:100%; height:100%; object-fit:cover; }
.barrier__badge{ position:absolute; left:1rem; bottom:1rem; padding:.6em 1.05em; font-size:.76rem; max-width:72%;
  border-radius:var(--r-pill); letter-spacing:.01em; }

/* brick-and-mortar micro-diagram — a living wall keyed to the macro image */
.brickwall{ position:absolute; top:1rem; right:1rem; z-index:3; width:min(160px,42%);
  padding:.7rem .75rem .6rem; border-radius:var(--r-card);
  background:var(--glasslab-bg); backdrop-filter:blur(var(--glasslab-blur)); -webkit-backdrop-filter:blur(var(--glasslab-blur));
  border:1px solid var(--glasslab-border); color:#fff; box-shadow:var(--sh-md); }
.brickwall__k{ display:block; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:.45rem; }
.brickwall__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:2px;
  border-radius:var(--r-xs); background:var(--sky-deep); /* the lipid "mortar" shows through the gaps */ }
.brickwall__grid i{ aspect-ratio:8/5; border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,241,245,.86)); }
/* offset every other row so it reads as staggered brickwork */
.brickwall__grid i:nth-child(4n+1){ margin-left:0; }
.brickwall figcaption{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.28rem .45em; margin-top:.55rem; font-size:.6rem; color:rgba(255,255,255,.85); }
.brickwall__c{ width:.62em; height:.62em; border-radius:2px; flex:none; }
.brickwall__c--brick{ background:#EAF1F5; }
.brickwall__c--mortar{ background:var(--sky-deep); }
.barrier__text h2{ font-size:var(--t-h2); margin:1.1rem 0 1.2rem; }
.barrier__text > p{ color:var(--ink-2); font-size:var(--t-lead); max-width:48ch; margin-bottom:1.6rem; }
.barrier__list{ list-style:none; display:flex; flex-direction:column; gap:1rem; margin-bottom:1.6rem; }
.barrier__list li{ display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; align-items:baseline; padding-left:1.4rem; position:relative; }
.barrier__list li::before{ content:""; position:absolute; left:0; top:.55rem; width:.55rem; height:.55rem; border-radius:50%; background:var(--sky); }
.barrier__list b{ font-weight:var(--fw-med); color:var(--ink); min-width:7ch; }
.barrier__list span{ color:var(--ink-2); font-size:.95rem; grid-column:2; }

/* ---------- 4 · АКТИВИТЕ ---------- */
.actives__lead{ max-width:62ch; color:var(--ink-2); font-size:var(--t-lead); }
.actives__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2rem; }
.acard{ position:relative; padding:2rem 1.7rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper); box-shadow:var(--sh-sm); overflow:hidden;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out); }
.acard:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--sky); }
.acard__dots{ position:absolute; top:1.5rem; right:1.5rem; width:40px; height:26px;
  background-image:radial-gradient(var(--sky) 1.7px, transparent 1.8px); background-size:11px 11px; opacity:.55; }
.acard__tag{ margin-bottom:1.1rem; }
.acard h3{ font-size:var(--t-h3); font-weight:var(--fw-med); }
.acard__role{ font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin:.2rem 0 .9rem; }
.acard__mech{ color:var(--ink-2); font-size:.95rem; margin-bottom:1.2rem; }
.acard__list{ list-style:none; display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--line); padding-top:1.1rem; }
.acard__list li{ position:relative; padding-left:1.3rem; font-size:.88rem; color:var(--ink-2); }
.acard__list li::before{ content:""; position:absolute; left:0; top:.5rem; width:.4rem; height:.4rem; border-radius:50%; background:var(--sky-deep); }
.actives__foot{ max-width:64ch; margin-inline:auto; text-align:center; color:var(--ink-2); font-size:var(--t-lead); }

/* ---------- 5 · ЛАБОРАТОРИЯТА ---------- */
.lab__lead{ max-width:62ch; color:var(--ink-2); font-size:var(--t-lead); }
.lab__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:clamp(2rem,4vw,3rem); }
.lab__frame{ position:relative; border-radius:var(--r-panel); overflow:hidden; background:var(--stone); box-shadow:var(--sh-md); aspect-ratio:4/3; }
.lab__frame--tall{ aspect-ratio:auto; }
.lab__frame img{ width:100%; height:100%; object-fit:cover; }
.lab__frame figcaption{ position:absolute; left:1rem; bottom:1rem; right:1rem; max-width:max-content; padding:.65em 1.05em; font-size:.78rem; border-radius:var(--r-pill); color:var(--ink); }
.lab__pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.lpill{ position:relative; padding:1.7rem 1.5rem; border-top:2px solid var(--sky); background:var(--paper); border-radius:0 0 var(--r-card) var(--r-card); box-shadow:var(--sh-sm); }
.lpill__dot{ display:block; width:.7rem; height:.7rem; border-radius:50%; background:var(--sky); box-shadow:0 0 0 4px var(--sky-soft); margin-bottom:1rem; }
.lpill h4{ font-size:1.1rem; font-weight:var(--fw-med); color:var(--ink); margin-bottom:.5rem; }
.lpill p{ color:var(--ink-2); font-size:.92rem; }

/* ---------- 6 · ВИЖ ПРОУЧВАНИЯТА ---------- */
.studies__in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem); align-items:start; }

.studies__gate h2{ font-size:var(--t-h2); margin:1rem 0 1rem; }
.studies__gate > p{ color:var(--ink-2); font-size:var(--t-lead); max-width:52ch; margin-bottom:1.8rem; }

.studies__list{ list-style:none; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.sref{ display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.sref__dot{ width:.7rem; height:.7rem; border-radius:50%; background:var(--sky); box-shadow:0 0 0 4px var(--sky-soft); flex:none; }
.sref__body{ display:flex; flex-direction:column; gap:.15rem; }
.sref__body b{ font-weight:var(--fw-med); color:var(--ink); font-size:1rem; }
.sref__body span{ color:var(--ink-2); font-size:.88rem; }
.sref__link{ font-size:.9rem; white-space:nowrap; }
.studies__note{ margin-top:1.4rem; font-size:.8rem; color:var(--muted); max-width:56ch; }

/* CTA — glass panel, dot texture, sky price */
.studies__cta{ position:relative; overflow:hidden; padding:clamp(1.8rem,3.5vw,2.6rem); position:sticky; top:clamp(5.5rem,8vw,7rem); }
.studies__dots{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none; }
.studies__ctain{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1rem; }
.studies__cta h3{ font-size:var(--t-h3); color:var(--ink); }
.studies__cta p{ color:var(--ink-2); font-size:.98rem; }
.studies__ctarow{ display:flex; align-items:baseline; gap:.9rem; margin-top:.3rem; }
.studies__price{ font-size:1.7rem; }
.studies__price small{ font-size:.72rem; color:var(--muted); font-weight:var(--fw-book); }
.studies__was{ font-size:.85rem; color:var(--muted); }
.studies__ctabtns{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; margin-top:.5rem; }

/* keyboard focus — visible ring on this page's interactive links
   without touching the mouse hover states. */
.mbz__link:focus-visible,
.sci101 a:focus-visible,
.barrier__text a:focus-visible,
.studies a:focus-visible,
.science__card a:focus-visible{
  outline:2px solid var(--sky-deep); outline-offset:3px; border-radius:var(--r-xs);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .sci101__grid, .actives__grid, .lab__pillars{ grid-template-columns:1fr 1fr; }
  .flowsteps{ grid-template-columns:1fr; gap:.5rem; }
  .flowstep__arrow{ justify-self:center; align-self:center; margin:.2rem 0; transform:rotate(90deg); width:20px; }
  .barrier__wrap, .studies__in{ grid-template-columns:1fr; }
  .barrier__media{ aspect-ratio:16/10; max-height:60vh; }
  .lab__gallery{ grid-template-columns:1fr; }
  .lab__frame--tall{ aspect-ratio:4/3; }
  .studies__cta{ position:static; }
}
@media (max-width:640px){

  /* THUMB TARGETS — the standalone text links ("How the microbiome works →",
     "See the actives →", "Take the quiz →") are only ~25px tall as inline text.
     Give each a full 44px hit area on touch; the negative margin-block keeps the
     visual rhythm identical to desktop (the box grows, the layout doesn't). */
  .science__card .tlink,
  .barrier__text .tlink,
  .studies__ctabtns .tlink,
  .mbz__link,
  .sci101 .tlink{
    min-height:44px; padding-block:.5rem; margin-block:-.5rem;
    display:inline-flex; align-items:center;
  }
}
@media (max-width:560px){
  .sci101__grid, .actives__grid, .lab__pillars{ grid-template-columns:1fr; }
  .barrier__list li{ grid-template-columns:1fr; }
  .barrier__list span{ grid-column:1; }
  .sref{ grid-template-columns:auto 1fr; }
  .sref__link{ grid-column:2; justify-self:start;
    /* on its own row now — give the "Read →" link a real 44px thumb target */
    min-height:44px; padding-block:.55rem; margin-top:-.15rem; }
  .studies__ctabtns{ gap:.9rem; }
  .studies__ctabtns .btn{ width:100%; }
  .brickwall{ width:min(130px,46%); }
}