/* ============================================================
   PHREE SKIN — /body  (Moisture Repair Body · coming soon · light)
   Immersive, results-first sibling of the home. Same primitives,
   same palette; sky-blue reserved for price. Real assets only.
   ============================================================ */

/* on-media link helper (page-scoped) ----------------------------- */
.tlink--onmedia{ color:#fff; }
.tlink--onmedia .arw{ transition:transform .4s var(--e-out); }
.tlink--onmedia:hover .arw{ transform:translateX(4px); }

/* ================================================================
   HERO — emotional split: promise (left) + the REAL product (right)
   ================================================================ */
.hero{ position:relative; background:var(--paper); overflow:hidden;
  padding-top:clamp(2rem,4vh,3.5rem); padding-bottom:var(--sp-section); }
.hero__glow{ position:absolute; top:-30%; left:58%; transform:translateX(-50%); width:min(1100px,120%); height:90%;
  background:radial-gradient(ellipse at center, var(--sky-soft), transparent 62%); opacity:.7; z-index:0; pointer-events:none; }

.body-hero__grid{ position:relative; z-index:2;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.body-hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem; }
.hero__title{ font-size:var(--t-display); color:var(--ink); }
.hero__sub{ max-width:46ch; font-size:var(--t-lead); color:var(--ink-2); }

.body-hero__meta{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; margin-top:.2rem; }
.body-hero__meta .price{ font-size:2rem; line-height:1; }   /* sky-blue reserved for PRICE */
.price--soon{ opacity:.92; }
.body-hero__vol{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:.5rem; }

.body-hero__figure{ position:relative; border-radius:var(--r-2xl); overflow:hidden;
  aspect-ratio:4/5; background:var(--stone); box-shadow:var(--sh-xl); }
.body-hero__figure .lift__media{ position:absolute; inset:0; will-change:transform; }
.body-hero__figure img{ width:100%; height:100%; object-fit:cover; }
.body-hero__dots{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:multiply; opacity:.6; }
.body-hero__cap{ position:absolute; left:1.1rem; bottom:1.1rem; display:inline-flex; align-items:center; gap:.6em;
  padding:.6em 1em; border-radius:var(--r-pill); font-size:.78rem; color:var(--ink); }
.body-hero__cap .d{ width:.5em; height:.5em; border-radius:50%; background:var(--sky); flex:none; }

.body-hero__trust{ position:relative; z-index:2; list-style:none; display:flex; flex-wrap:wrap;
  justify-content:center; gap:clamp(1.4rem,4vw,3.4rem); margin-top:clamp(2.6rem,5vw,4rem); }
.body-hero__trust li{ display:flex; flex-direction:column; align-items:center; gap:.15rem; text-align:center; max-width:16ch; }
.body-hero__trust b{ font-size:clamp(1.1rem,.95rem + .8vw,1.45rem); color:var(--ink); font-weight:var(--fw-reg); letter-spacing:-.01em; }
.body-hero__trust span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

/* ================================================================
   THE TEXTURE STORY — editorial split, melt/absorb
   ================================================================ */
.texture__wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.texture__lead{ display:flex; flex-direction:column; gap:1.15rem; }
.texture__lead h2{ font-size:var(--t-h2); font-weight:var(--fw-reg); letter-spacing:var(--track-tight); max-width:18ch; margin:.2rem 0; }
.texture__lead > p{ color:var(--ink-2); font-size:var(--t-lead); max-width:52ch; }
.texture__points{ list-style:none; display:flex; flex-direction:column; gap:.75rem; margin-top:.4rem; }
.texture__points li{ position:relative; padding-left:1.5rem; color:var(--ink-2); font-size:.98rem; max-width:48ch; }
.texture__points li::before{ content:""; position:absolute; left:0; top:.55em; width:.42em; height:.42em;
  border-radius:50%; background:var(--sky); }

.texture__figure{ position:relative; }
.texture__figure .lift__media{ border-radius:var(--r-panel); overflow:hidden; aspect-ratio:4/5; background:var(--stone); box-shadow:var(--sh-lg); }
.texture__figure .lift__media img{ width:100%; height:100%; object-fit:cover; }
.texture__note{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; padding:1.1rem 1.3rem; border-radius:var(--r-card); }
.texture__note p{ color:#fff; font-size:1.02rem; line-height:1.4; }

/* ================================================================
   BENEFITS — media + numbered principle list (willdo scaffold)
   ================================================================ */
.willdo__wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.willdo__media{ position:relative; }
.willdo__media .lift__media{ border-radius:var(--r-panel); overflow:hidden; aspect-ratio:4/5; background:var(--stone); box-shadow:var(--sh-lg); }
.willdo__media .lift__media img{ width:100%; height:100%; object-fit:cover; }
.willdo__list{ list-style:none; display:flex; flex-direction:column; }
.wcard{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.6rem 0; border-top:1px solid var(--line);
  transition:padding-left .5s var(--e-out); }
.wcard:first-child{ border-top:none; padding-top:.4rem; }
.wcard:last-child{ padding-bottom:.2rem; }
.wcard:hover{ padding-left:.4rem; }
.wcard__n{ font-size:.8rem; color:var(--sky-deep); font-weight:var(--fw-med); letter-spacing:.12em; padding-top:.35rem; min-width:2.4ch; }
.wcard__body h3{ font-size:var(--t-h3); font-weight:var(--fw-med); margin-bottom:.4rem; }
.wcard__body p{ color:var(--ink-2); font-size:.98rem; max-width:46ch; }

/* ================================================================
   THE RITUAL — immersive frosted lab-window over living macro
   ================================================================ */
.ritual{ position:relative; min-height:80svh; display:flex; align-items:center; overflow:hidden; background:var(--charcoal); }
.ritual__media{ position:absolute; inset:0; z-index:0; }
.ritual__video, .ritual__still{ width:100%; height:100%; object-fit:cover; }
.ritual__still{ object-position:center 42%; }
.ritual__tint{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,29,41,.64), rgba(14,29,41,.2) 66%), linear-gradient(0deg, rgba(10,14,18,.5), transparent 54%); }
.ritual__in{ position:relative; z-index:2; width:100%; }
.ritual__card{ max-width:min(600px,100%); padding:clamp(1.8rem,4vw,3rem); }
.ritual__card h2{ font-size:var(--t-h2); color:#fff; margin:1.1rem 0; max-width:20ch; }
.ritual__card > p{ color:rgba(255,255,255,.85); font-size:var(--t-lead); margin-bottom:1.4rem; }
.ritual__scent{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; }
.ritual__scent .chip{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff; }
.ritual__scent .chip--sky{ background:var(--sky-soft); border-color:var(--sky); color:var(--sky-deep); }

/* ================================================================
   PAIRS WITH THE SERUM — full-bleed photo cross-link card
   ================================================================ */
.pairs__card{ position:relative; isolation:isolate; display:flex; align-items:flex-end;
  min-height:clamp(400px,52vw,520px); padding:clamp(1.8rem,3.5vw,3.2rem);
  border-radius:var(--r-2xl); color:#fff; overflow:hidden;
  box-shadow:0 44px 84px -52px rgba(0,0,0,.7);
  transition:transform .55s var(--e-lift), box-shadow .55s var(--e-lift); }
.pairs__media{ position:absolute; inset:0; z-index:-2; }
.pairs__media .lift__media{ position:absolute; inset:0; will-change:transform; }
.pairs__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.pairs__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(9,15,20,.78) 0%, rgba(9,15,20,.42) 42%, rgba(9,15,20,.12) 100%),
    linear-gradient(0deg, rgba(9,15,20,.6), transparent 55%); }
.pairs__card:hover{ transform:translateY(-4px); box-shadow:0 54px 96px -48px rgba(0,0,0,.78); }
.pairs__body{ position:relative; max-width:38ch; display:flex; flex-direction:column; gap:.9rem; }
.pairs__body h2{ font-size:var(--t-h2); color:#fff; font-weight:var(--fw-reg); letter-spacing:var(--track-tight); max-width:18ch; }
.pairs__body > p{ color:rgba(255,255,255,.86); font-size:var(--t-lead); }
.pairs__foot{ display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; margin-top:.4rem; }
.pairs__price{ display:inline-flex; align-items:baseline; gap:.4rem; }
.pairs__price .price{ font-size:1.5rem; color:var(--sky); }   /* sky-blue reserved for PRICE */
.pairs__per{ font-size:.8rem; color:rgba(255,255,255,.66); }
.pairs__was{ font-size:.78rem; color:rgba(255,255,255,.62); }
.pairs__was s{ color:rgba(255,255,255,.42); }
.pairs__go{ display:inline-flex; align-items:center; gap:.42em; font-size:.95rem; font-weight:var(--fw-med); color:#fff; }
.pairs__go .arw{ transition:transform .4s var(--e-out); }
.pairs__card:hover .pairs__go .arw{ transform:translateX(4px); }

/* ================================================================
   NOTIFY — calm, dotted, contained (honest coming-soon)
   ================================================================ */
.notify__in{ position:relative; overflow:hidden; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-2xl); padding:clamp(2.4rem,5vw,4.5rem) clamp(1.4rem,5vw,4rem); box-shadow:var(--sh-sm); }
.notify__dots{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; }
.notify__content{ position:relative; z-index:2; max-width:56ch; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.notify__content h2{ font-size:var(--t-h2); font-weight:var(--fw-reg); letter-spacing:var(--track-tight); max-width:18ch; }
.notify__content > p{ color:var(--ink-2); font-size:var(--t-lead); max-width:54ch; }
.notify__form{ display:flex; gap:.7rem; width:100%; max-width:460px; margin-top:.5rem; }
.notify__form input{ flex:1; min-width:0; padding:1em 1.3em; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); font-size:.95rem; transition:border-color .35s, box-shadow .35s; }
.notify__form input::placeholder{ color:var(--muted); }
.notify__form input:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 4px var(--sky-soft); }
.notify__form .btn{ flex:none; }
.notify__fine{ font-size:.76rem; color:var(--muted); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:960px){
  .body-hero__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .body-hero__copy{ align-items:flex-start; }
  .body-hero__figure{ aspect-ratio:4/5; max-width:520px; margin-inline:auto; width:100%; }
  .texture__wrap, .willdo__wrap{ grid-template-columns:1fr; }
  .texture__figure .lift__media, .willdo__media .lift__media{ aspect-ratio:16/11; }
  .willdo__media{ order:-1; }
}
@media (max-width:560px){
  .hero{ padding-bottom:clamp(3rem,10vw,4.5rem); }
  .hero__cta{ gap:1rem; width:100%; }
  .hero__cta .btn{ width:100%; }
  /* ≥44px thumb-height on secondary text-links (tap targets) */
  .hero__cta .tlink, .pairs__go{ min-height:44px; }
  .hero__cta .tlink{ display:inline-flex; align-items:center; align-self:flex-start; }
  .body-hero__meta .price{ font-size:1.7rem; }
  .body-hero__trust{ gap:1.2rem 1.8rem; }
  .body-hero__trust li{ max-width:44%; }
  .body-hero__figure{ aspect-ratio:3/4; }
  .wcard{ grid-template-columns:1fr; gap:.5rem; }
  .wcard__n{ padding-top:0; }
  .pairs__card{ min-height:clamp(420px,120vw,500px); }
  .pairs__body > p{ font-size:1.02rem; }
  .notify__form{ flex-direction:column; }
  .notify__form .btn{ width:100%; }
}
@media (max-width:400px){
  .body-hero__trust li{ max-width:46%; }
  .ritual__card{ padding:1.5rem 1.3rem 1.8rem; }
}