/* ============================================================
   GLACÉ — site.css
   Section-level styles. Everything here builds on the tokens and
   components in global.css — no new colours, no new type scale.
   Mobile-first: base = ~390px, desktop layers on at 820px.
   ============================================================ */

:root{
  --header-h: 60px;   /* mobile */
}
@media (min-width:820px){ :root{ --header-h: 76px; } }

/* The overlays below set display:flex / display:grid, which outranks the
   browser's own [hidden] { display:none } — leaving two invisible full-screen
   panels sitting on top of the page and swallowing every click. This puts the
   attribute back in charge, for these and anything added later. */
[hidden]{ display:none !important; }

/* anchor targets clear the sticky header */
section[id]{ scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* global.css caps every <p> at 66ch; inside a centred block that cap makes a
   short line (an eyebrow, say) centre itself inside a left-hugging box
   instead of inside the container. Auto margins put the box back in the middle. */
.center > p{ margin-inline:auto; }

.skip-link{
  position:absolute; left:var(--space-4); top:var(--space-4); z-index:100;
  transform:translateY(-200%);
  background:var(--midnight); color:var(--frost);
  padding:.7rem 1.1rem; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:var(--w-semi); letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.skip-link:focus-visible{ transform:translateY(0); color:var(--frost); }

/* ------------------------------------------------------------
   1 · ANNOUNCEMENT BAR
   ------------------------------------------------------------ */
.announcement{ padding-block:0; }               /* padding lives on the list */
.announcement .container{ padding-inline:var(--space-4); }

.announcement__list{
  display:grid;                                  /* mobile: all items share one cell */
  place-items:center;
  min-height:2.6rem;
}
.announcement__item{
  grid-area:1 / 1;
  display:flex; align-items:center; gap:.3em;
  text-align:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.announcement__item.is-active{ opacity:1; visibility:visible; }
.announcement__count{ color:var(--sky); }
.announcement .stars{ font-size:inherit; letter-spacing:0; margin-left:.15em; }

@media (min-width:820px){
  .announcement__list{
    display:flex; justify-content:center; align-items:center;
    gap:var(--space-4);
    min-height:0; padding-block:.7rem;
  }
  .announcement__item{
    grid-area:auto;
    opacity:1; visibility:visible;
  }
  .announcement__item + .announcement__item::before{
    content:"\00B7"; margin-right:var(--space-4); color:var(--sky); opacity:.7;
  }
}

/* ------------------------------------------------------------
   2 · HEADER
   Grid is 1fr auto 1fr at every width, so the wordmark that sits in
   the middle column on mobile is optically centred whatever flanks it.
   ------------------------------------------------------------ */
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-3);
  min-height:var(--header-h);
}

/* --- burger --- */
.header__menu{
  grid-column:1; justify-self:start;
  width:44px; height:44px; margin-left:-.6rem;   /* optical alignment to the container edge */
  display:grid; place-items:center;
  background:none; border:0; color:var(--midnight);
}
.header__menu-bars,
.header__menu-bars::before,
.header__menu-bars::after{
  content:""; display:block;
  width:20px; height:1.5px; border-radius:2px; background:currentColor;
}
.header__menu-bars{ position:relative; }
.header__menu-bars::before{ position:absolute; top:-6px; }
.header__menu-bars::after{ position:absolute; top:6px; }

/* --- wordmark --- */
.header__brand{ grid-column:2; justify-self:center; display:block; }
.header__brand img{ height:22px; width:auto; }

/* --- right-hand actions --- */
.header__actions{
  grid-column:3; justify-self:end;
  display:flex; align-items:center; gap:var(--space-4);
}
.header__shop{ padding:.7rem 1.5rem; }
.header__bag{
  display:none;                                   /* desktop only — see below */
  align-items:center; gap:.45em;
  font-size:var(--fs-sm); font-weight:var(--w-med); color:var(--midnight);
  white-space:nowrap;
}
.header__bag:hover{ color:var(--marine); }

@media (min-width:820px){
  .header__menu{ display:none; }
  .header__brand{ grid-column:1; justify-self:start; }
  .header__brand img{ height:28px; }
  .header__shop{ padding:.85rem 1.9rem; }
  .header__bag{ display:inline-flex; }
}

/* ------------------------------------------------------------
   3 · NAV — full-screen panel on mobile, inline row on desktop
   ------------------------------------------------------------ */
.nav{
  position:fixed; inset:0; z-index:70;
  display:flex; flex-direction:column;
  background:var(--frost);
  padding:var(--space-4) var(--container-pad) var(--space-6);
  transform:translateX(100%);
  visibility:hidden;
  /* visibility flips only once the panel has slid away, so it stays paintable
     on the way out — but instantly on the way in, so the close button is
     focusable the moment the panel opens */
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y:auto;
}
.nav.is-open{
  transform:translateX(0); visibility:visible;
  transition:transform var(--dur) var(--ease), visibility 0s;
}

.nav__head{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }
.nav__brand{ height:22px; width:auto; }
.nav__close{ width:44px; height:44px; margin-right:-.6rem; display:grid; place-items:center;
  background:none; border:0; color:var(--midnight); }

.nav__list{ display:flex; flex-direction:column; margin-top:var(--space-6); }
.nav__list li + li{ border-top:1px solid var(--line); }
.nav__link{
  display:block; padding:var(--space-4) 0;
  font-family:var(--font-display); font-weight:var(--w-med); font-size:var(--fs-h3);
  color:var(--heading);
}
.nav__link:hover{ color:var(--marine); }

.nav__foot{ margin-top:auto; padding-top:var(--space-6); }
.nav__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); justify-content:center; }
.nav__chips .chip{ font-size:var(--fs-xs); }

@media (min-width:820px){
  .nav{
    position:static; grid-column:2; justify-self:center;
    flex-direction:row; align-items:center;
    inset:auto; padding:0; background:none; overflow:visible;
    transform:none; visibility:visible;
  }
  .nav__head,.nav__foot{ display:none; }
  .nav__list{ flex-direction:row; gap:var(--space-6); margin-top:0; }
  .nav__list li + li{ border-top:0; }
  .nav__link{
    padding:0;
    font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--w-med);
    color:var(--text);
  }
}

/* body scroll lock while the panel is open */
body.is-locked{ overflow:hidden; }

/* ------------------------------------------------------------
   4 · HERO
   ------------------------------------------------------------ */
.section--dark .lead{ color:var(--text-on-dark); }

/* global.css turns every <a> inside a dark section Sky — which would repaint
   a button label. Buttons keep their own colours. */
.section--dark .btn{ color:var(--frost); }
.section--dark .btn--light,
.section--dark .btn--light:hover{ color:var(--midnight); }

.hero{
  position:relative; isolation:isolate;
  overflow:hidden;
  display:grid; align-items:end;
  min-height:78svh;
}
@supports not (min-height:1svh){ .hero{ min-height:78vh; } }

.hero__bg{ position:absolute; inset:0; z-index:0; background:var(--midnight); }
.hero__bg video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:62% center;   /* the face sits right of centre in the frame */
}
/* Midnight scrim — bottom-up on mobile, where the copy sits under the video */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(28,42,69,.55) 0%,
    rgba(28,42,69,.72) 38%,
    rgba(28,42,69,.92) 72%,
    rgba(28,42,69,.97) 100%);
}

.hero__inner{ position:relative; z-index:1; }
.hero__copy > * + *{ margin-top:var(--space-4); }
.hero__copy h1{ margin-top:var(--space-3); }

.hero__cta{ margin-top:var(--space-5); }
.hero__micro{
  font-size:var(--fs-xs); line-height:var(--lh-snug);
  color:var(--text-on-dark); opacity:.75;
  margin-top:var(--space-3);
}
.hero__rating{
  display:flex; align-items:center; gap:.55em; flex-wrap:wrap;
  font-size:var(--fs-xs);                 /* keeps stars + line together at 375px */
  color:var(--text-on-dark);
}

@media (min-width:820px){
  .hero{ align-items:center; min-height:min(88svh, 720px); }
  /* the scrim turns horizontal: copy on the dark left, face on the clear right */
  .hero__scrim{
    background:linear-gradient(to right,
      rgba(28,42,69,.95) 0%,
      rgba(28,42,69,.88) 34%,
      rgba(28,42,69,.55) 62%,
      rgba(28,42,69,.22) 100%);
  }
  .hero__bg video{ object-position:70% center; }
  .hero__copy{ max-width:34rem; }
  .hero__rating{ font-size:var(--fs-sm); }
}

/* ------------------------------------------------------------
   5 · TRUST BAR
   ------------------------------------------------------------ */
/* Mobile stacks the four signals so none of them is cut off mid-word;
   desktop lays them out in the single ruled row from the wireframe. */
.trustbar{ background:var(--white); border-bottom:1px solid var(--line); }
.trustbar__list{ display:grid; justify-items:center; padding-block:var(--space-2); }
.trustbar__item{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding-block:var(--space-3);
  font-size:var(--fs-xs); color:var(--text); text-align:center;
}
.trustbar__item + .trustbar__item{ border-top:1px solid var(--line); }
.trustbar__list > *{ width:100%; }
.trustbar__press{
  font-size:var(--fs-xs);                 /* .label sizing, restated past .trustbar__item */
  color:var(--text-muted); background:var(--ice);
  border-radius:var(--r-sm); padding:.5rem .9rem;
}

@media (min-width:820px){
  .trustbar__list{
    display:flex; justify-content:center; align-items:center;
    padding-block:var(--space-4);
  }
  .trustbar__item{
    font-size:var(--fs-sm); white-space:nowrap; padding-block:0;
  }
  .trustbar__list > *{ width:auto; }
  .trustbar__item + .trustbar__item{
    margin-left:var(--space-6); padding-left:var(--space-6);
    border-top:0; border-left:1px solid var(--line);
  }
  .trustbar__press{ font-size:var(--fs-xs); }
}

/* ------------------------------------------------------------
   6 · THE RITUAL
   ------------------------------------------------------------ */
/* Sky is a dark-background accent: it reads 2.6:1 on white and 1.6:1 on Ice,
   well under the 4.5:1 these small uppercase labels need. On every light
   surface they use Marine, which global.css already nominates as the
   primary blue for links and heading accents. */
.section--frost .eyebrow,
.section--white .eyebrow,
.section--ice .eyebrow,
.section--oat .eyebrow{ color:var(--marine); }

.ritual__head{ max-width:44ch; margin-inline:auto; }
.ritual__head h2{ margin-top:var(--space-2); }
.ritual__head .lead{ margin-top:var(--space-3); margin-inline:auto; }

.ritual__grid{ display:grid; gap:var(--space-5); margin-top:var(--space-7); }

/* the video keeps its native 1:1 — nothing of the demo gets cropped away */
.ritual__video-tile{ aspect-ratio:1 / 1; }
.ritual__video-tile video{ width:100%; height:100%; object-fit:cover; }

/* mobile: each step reads as a row — portrait shot beside the copy */
.ritual__step{
  display:grid; grid-template-columns:38% 1fr;
  gap:var(--space-4); align-items:center;
}
.ritual__shot{ aspect-ratio:4 / 5; }      /* the source ratio, so nothing is cropped */
.ritual__shot img{ width:100%; height:100%; object-fit:cover; }
.ritual__body p{ margin-top:var(--space-2); font-size:var(--fs-sm); }

.ritual__cta{ margin-top:var(--space-7); }

@media (min-width:820px){
  /* the numeral joins the heading as "01 · Chill" instead of standing alone */
  .ritual__num{ display:none; }
  .ritual__step h3::before{ content:attr(data-num) " · "; }

  /* the wireframe row: tall video column, then three stacked cards */
  .ritual__grid{
    grid-template-columns:1.05fr repeat(3, 1fr);
    gap:var(--space-5);
    align-items:stretch;
  }
  .ritual__video-tile{ aspect-ratio:auto; height:100%; }

  .ritual__step{
    display:block;                        /* photo on top, copy under it */
  }
  .ritual__step h3{ margin-top:var(--space-4); }
  .ritual__body p{ margin-top:var(--space-2); }
}

/* ------------------------------------------------------------
   7 · THE PROBLEM
   ------------------------------------------------------------ */
.problem{ padding-block:calc(var(--section-y) * 1.15); }

.problem__intro{
  max-width:58ch; margin:var(--space-5) auto 0;
  line-height:1.55;                        /* a centred block needs more air than lh-snug */
}
.problem__statement{
  max-width:24ch; margin:var(--space-7) auto 0;
  font-size:clamp(1.4rem, 3.4vw, 1.9rem);  /* below the section headings — it states, it doesn't title */
}
/* desktop breaks the statement into the wireframe's two lines;
   mobile lets it wrap wherever it needs to */
.problem__line{ display:inline; }
@media (min-width:820px){
  .problem__statement{ max-width:none; }
  .problem__line{ display:block; }
}

/* ------------------------------------------------------------
   8 · WHAT YOU GET
   Every source here is square, so every frame is square — the tools
   are never clipped, which is the whole point of a product shot.
   ------------------------------------------------------------ */
.what__grid{ display:grid; gap:var(--space-5); margin-top:var(--space-6); }

.what__hero{ aspect-ratio:1 / 1; }
.what__hero img{ width:100%; height:100%; object-fit:cover; }

/* mobile: the tools swipe, bleeding to both screen edges so the
   half-visible next card reads as "there is more here" */
.what__tools{
  margin-inline:calc(var(--container-pad) * -1);
  padding-inline:var(--container-pad);
  padding-block:var(--space-1);            /* room for the tile shadow */
  /* without this the snap points sit at the scrollport edge and the first
     card gets yanked under the container padding */
  scroll-padding-inline:var(--container-pad);
}
.what__tool{ width:68vw; max-width:280px; }

.what__shot{ aspect-ratio:1 / 1; }
.what__shot img{ width:100%; height:100%; object-fit:cover; }

.what__tool h3{ margin-top:var(--space-4); }
.what__role{
  margin-top:var(--space-1);
  font-size:var(--fs-xs); font-weight:var(--w-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--marine);
}
.what__tool p:last-child{ margin-top:var(--space-3); font-size:var(--fs-sm); }

.what__note{
  max-width:52ch; margin:var(--space-7) auto 0;
  font-size:var(--fs-sm); color:var(--text-muted);
}

@media (min-width:820px){
  .what__grid{ grid-template-columns:1.6fr 3fr; align-items:start; }
  .what__tools{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5);
    margin-inline:0; padding-inline:0;
    overflow:visible; scroll-snap-type:none;
  }
  .what__tool{ width:auto; max-width:none; }
}

/* ------------------------------------------------------------
   9 · WHY GLACÉ
   ------------------------------------------------------------ */
.why__list{ display:grid; margin-top:var(--space-5); }
.why__item{
  padding-block:var(--space-5);
  border-bottom:1px solid var(--line);
}
.why__item dt{
  font-weight:var(--w-semi); font-size:var(--fs-body); color:var(--heading);
  line-height:var(--lh-snug);
}
.why__item dd{
  margin-top:var(--space-2);
  font-size:var(--fs-sm); color:var(--text-muted); line-height:var(--lh-snug);
}

@media (min-width:820px){
  /* two columns, reading across — the DOM order already matches */
  .why__list{ grid-template-columns:1fr 1fr; column-gap:var(--space-8); }
}

/* ------------------------------------------------------------
   10 · PRODUCT AREA
   ------------------------------------------------------------ */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.product__grid{ display:grid; gap:var(--space-6); }

/* --- gallery --- */
.product__stage{
  position:relative; aspect-ratio:1 / 1;
  background:var(--white);
}
.product__media{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.product__media.is-active{ opacity:1; visibility:visible; }
/* the clip is 9:16 — contain keeps all of it rather than cropping the tools out */
.product__media--video{ object-fit:contain; background:var(--frost); }

.product__thumbs{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--space-3); margin-top:var(--space-3);
}
.product__thumb{
  display:block; width:100%; aspect-ratio:1 / 1;
  padding:0; border:1.5px solid transparent; border-radius:var(--r-md);
  overflow:hidden; background:var(--white);
  transition:border-color var(--dur) var(--ease);
}
.product__thumb img{ width:100%; height:100%; object-fit:cover; }
.product__thumb.is-active{ border-color:var(--midnight); }
.product__thumb--video{ display:grid; place-items:center; background:var(--ice); color:var(--midnight); }

/* --- buy panel --- */
.product__buy > * + *{ margin-top:var(--space-4); }
.product__rating{
  display:flex; align-items:center; gap:.5em; flex-wrap:wrap;
  font-size:var(--fs-xs); color:var(--text-muted);   /* keeps stars + line together at 375px */
  margin-top:var(--space-3);
}
.product__price{ margin-top:var(--space-5); }

.product__field{ border:0; padding:0; margin-top:var(--space-6); }
.product__field legend{ padding:0; }

.product__swatches{ display:flex; gap:var(--space-3); margin-top:var(--space-3); }
.swatch{
  position:relative;
  width:32px; height:32px;
  background:var(--swatch, var(--ice));
}
.swatch input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}
/* global.css styles the selected state off aria-checked; these are real
   radios, so the same look is keyed off :checked instead */
.swatch:has(input:checked){ outline:2px solid var(--midnight); outline-offset:2px; }
.swatch:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:4px; }

.product__chosen{
  margin-top:var(--space-3);
  font-size:var(--fs-sm); color:var(--text-muted);
}

.product__option{ position:relative; margin-top:var(--space-3); }
.product__option input{ position:absolute; opacity:0; width:0; height:0; }
.product__option:has(input:checked){ border:2px solid var(--midnight); background:var(--ice); }
.product__option:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }
.product__option--featured{ margin-top:var(--space-5); }

.option__badge{ position:absolute; top:-11px; left:14px; }
.option__main{ display:flex; flex-direction:column; gap:.2em; }
.option__title{ font-weight:var(--w-semi); color:var(--heading); }
.option__sub{ font-size:var(--fs-xs); color:var(--text-muted); }
.option__price{ display:flex; flex-direction:column; align-items:flex-end; gap:.15em; text-align:right; }
.option__price .price{ font-size:1.25rem; }
.option__each{ font-size:var(--fs-xs); color:var(--text-muted); }

.product__cta{ margin-top:var(--space-6); }
.product__cta.is-disabled{
  background:var(--line); border-color:var(--line); color:var(--text-muted);
  pointer-events:none;
}

.product__express-title{ margin-top:var(--space-5); text-align:center; }
.product__methods{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--space-2); margin-top:var(--space-3);
}
/* payment marks are drawn for light ground, so each sits on its own white
   plate — and the plate is the same size whether it holds a logo or a name */
.product__methods li{
  display:flex; align-items:center; justify-content:center;
  min-width:64px; min-height:34px; padding:.35rem .7rem;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:var(--w-med); color:var(--midnight);
}
.pay__mark{ display:block; height:22px; width:auto; }
.product__reassure{
  margin-top:var(--space-4); text-align:center;
  font-size:var(--fs-xs); color:var(--text-muted);
}

@media (min-width:820px){
  .product__grid{ grid-template-columns:1.05fr 1fr; gap:var(--space-8); align-items:start; }
  .product__thumbs{ gap:var(--space-4); }
  .product__rating{ font-size:var(--fs-sm); }
}

/* ------------------------------------------------------------
   11 · GUARANTEE
   ------------------------------------------------------------ */
.guarantee__grid{ display:grid; gap:var(--space-5); justify-items:center; }

/* the supplied gold seal */
.seal-img{ width:140px; height:auto; }

.guarantee__copy h2{ margin-top:var(--space-3); }
.guarantee__copy h2 + p{ margin-top:var(--space-3); }
.guarantee__copy p + p{ margin-top:var(--space-4); }
.guarantee__copy > p:not(.eyebrow){ max-width:56ch; }
.guarantee__kicker{
  font-size:var(--fs-sm); color:var(--marine);   /* Sky would sit at 2.1:1 on Oat */
}

@media (min-width:820px){
  .guarantee__grid{
    grid-template-columns:auto 1fr;
    gap:var(--space-8); align-items:center; justify-items:start;
  }
  .seal-img{ width:180px; }
}

/* ------------------------------------------------------------
   12 · WHAT'S IN THE BOX
   ------------------------------------------------------------ */
.box__grid{ display:grid; gap:var(--space-6); align-items:center; }

/* the source is 3:4 portrait — kept as-is so the box is never clipped */
.box__shot{ aspect-ratio:3 / 4; }
.box__shot img{ width:100%; height:100%; object-fit:cover; }

.box__copy h2{ margin-top:var(--space-2); }

.box__list{ margin-top:var(--space-5); }
.box__list li{
  position:relative;
  padding:var(--space-4) 0 var(--space-4) 1.6em;
  border-bottom:1px solid var(--line);
  color:var(--heading);
}
.box__list li::before{
  content:"—"; position:absolute; left:0; top:var(--space-4);
  color:var(--text-muted);
}
.box__note{ color:var(--marine); }

@media (min-width:820px){
  .box__grid{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
}

/* ------------------------------------------------------------
   13 · SOCIAL PROOF
   ------------------------------------------------------------ */
.reviews__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); }
.reviews__head h2{ margin-top:var(--space-2); }

.reviews__link{
  background:none; border:0; padding:0;
  font-size:var(--fs-sm); font-weight:var(--w-semi); color:var(--marine);
  white-space:nowrap;
}
.reviews__link:hover{ color:var(--midnight); }

/* --- UGC coverflow: 3D stage, the centre clip plays itself --- */
.cf{
  position:relative;
  margin-top:var(--space-6);
  padding-block:var(--space-4);
  perspective:1400px;
  /* the flanking cards sit outside the container; without this they widen
     the page and the whole site scrolls sideways on a phone */
  overflow-x:hidden;
  overflow-x:clip;
}
.cf__stage{
  position:relative;
  height:clamp(320px, 74vw, 430px);
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
}
.cf__card{
  position:absolute;
  width:calc(clamp(320px, 74vw, 430px) * 9 / 16);
  aspect-ratio:9 / 16;
  padding:0; border:0; border-radius:var(--r-lg);
  overflow:hidden; background:var(--midnight);
  transform-origin:center center;
  transition:transform 700ms var(--ease), opacity 700ms var(--ease), filter 700ms var(--ease);
  box-shadow:var(--shadow-md);
  cursor:pointer;
}
.cf__card img,
.cf__card video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.cf__card video{ opacity:0; transition:opacity var(--dur) var(--ease); }
.cf__card.is-playing video{ opacity:1; }

/* the five visible positions */
.cf__card[data-pos="0"]{
  transform:translateX(0) scale(1) rotateY(0deg);
  opacity:1; z-index:30; filter:none;
  box-shadow:var(--shadow-lg); cursor:zoom-in;
}
.cf__card[data-pos="1"]{  transform:translateX(84%)  scale(.84) rotateY(-24deg); opacity:.72; z-index:20; filter:brightness(.82); }
.cf__card[data-pos="-1"]{ transform:translateX(-84%) scale(.84) rotateY(24deg);  opacity:.72; z-index:20; filter:brightness(.82); }
.cf__card[data-pos="2"]{  transform:translateX(152%) scale(.68) rotateY(-36deg); opacity:.4;  z-index:10; filter:brightness(.65) blur(1px); }
.cf__card[data-pos="-2"]{ transform:translateX(-152%) scale(.68) rotateY(36deg); opacity:.4;  z-index:10; filter:brightness(.65) blur(1px); }
.cf__card[data-pos="hidden"]{ transform:scale(.5); opacity:0; z-index:0; pointer-events:none; }

.cf__badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(243,246,251,.92); color:var(--midnight);
  padding-left:3px; z-index:2;
  transition:opacity var(--dur) var(--ease);
}
.cf__card.is-playing .cf__badge{ opacity:0; }

.cf__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:40;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line); color:var(--midnight);
  box-shadow:var(--shadow-sm);
}
.cf__nav:hover{ background:var(--midnight); color:var(--frost); border-color:var(--midnight); }
.cf__nav--prev{ left:0; }
.cf__nav--next{ right:0; }

.cf__dots{ display:flex; gap:6px; justify-content:center; margin-top:var(--space-5); }
.cf__dots button{
  width:6px; height:6px; padding:0; border:0; border-radius:50%;
  background:var(--line);
  transition:width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cf__dots button[aria-selected="true"]{ width:20px; border-radius:4px; background:var(--midnight); }

@media (max-width:819.98px){
  /* full-bleed, so the neighbours can reach the screen edge before clipping */
  .cf{
    margin-inline:calc(var(--container-pad) * -1);
    padding-inline:var(--container-pad);
  }
  /* two flanking cards would be slivers at 375px */
  .cf__card[data-pos="2"],
  .cf__card[data-pos="-2"]{ opacity:0; pointer-events:none; }
  .cf__card[data-pos="1"]{  transform:translateX(72%)  scale(.8) rotateY(-20deg); }
  .cf__card[data-pos="-1"]{ transform:translateX(-72%) scale(.8) rotateY(20deg); }
  .cf__nav{ display:none; }        /* swipe instead */
}

@media (prefers-reduced-motion:reduce){
  .cf__card{ transition-duration:.001ms; }
}

/* --- review cards --- */
/* --- the drifting review columns --- */
.marquee{
  display:flex; justify-content:center; gap:var(--space-4);
  /* without this the columns stretch to the container height, and
     translateY(-50%) then moves half of 460px instead of half of the
     card stack — the loop would visibly jump on every repeat */
  align-items:flex-start;
  margin-top:var(--space-6);
  height:460px; overflow:hidden;
  /* the fade top and bottom is what makes it read as a loop rather
     than a list that got cut off */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.marquee__col{
  flex:1 1 0; max-width:320px;
  animation:marquee-up var(--speed, 40s) linear infinite;
  will-change:transform;
}
/* the gap lives on the cards, not the column: every item then costs the
   same height, so translateY(-50%) lands exactly on the duplicate */
.marquee__col > .review{ margin-bottom:var(--space-4); }
@keyframes marquee-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

/* stop while someone is reading */
.marquee:hover .marquee__col,
.marquee:focus-within .marquee__col{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .marquee{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .marquee__col{ animation:none; }
  .marquee__col > .review:nth-child(n+4){ display:none; }
}
.review{ background:var(--white); border-color:transparent; box-shadow:var(--shadow-sm); }
.review__text{ margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--text); }
.review__meta{ margin-top:var(--space-4); font-size:var(--fs-xs); color:var(--text-muted); }
.review__photos{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.review__photos img{
  width:64px; height:64px; object-fit:cover; border-radius:var(--r-sm);
}

.reviews__foot{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  margin-top:var(--space-7);
}

@media (min-width:820px){
  .reviews__ugc{ margin-inline:0; padding-inline:0; }
  .reviews__ugc > li{ width:clamp(148px, 14.5vw, 180px); max-width:none; }
  .reviews__foot{ flex-direction:row; justify-content:center; gap:var(--space-6); }
}

/* ------------------------------------------------------------
   14 · OVERLAYS — all reviews, and the UGC player
   ------------------------------------------------------------ */
.rv{
  position:fixed; inset:0; z-index:80;
  background:rgba(28,42,69,.45);
  display:flex; justify-content:center; align-items:flex-end;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.rv.is-open{ opacity:1; }
.rv__panel{
  width:100%; max-width:720px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--frost);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(3%);
  transition:transform var(--dur) var(--ease);
}
.rv.is-open .rv__panel{ transform:translateY(0); }
.rv__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-5) var(--space-5) var(--space-4);
  border-bottom:1px solid var(--line);
}
.rv__count{ margin-top:var(--space-1); font-size:var(--fs-sm); color:var(--text-muted); }
.rv__close{
  width:44px; height:44px; margin:-.5rem -.5rem 0 0;
  display:grid; place-items:center;
  background:none; border:0; color:var(--midnight);
}
.rv__list{
  display:grid; gap:var(--space-4);
  padding:var(--space-5);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

@media (min-width:820px){
  .rv{ align-items:center; }
  .rv__panel{ border-radius:var(--r-xl); max-height:82vh; }
}

/* --- UGC lightbox --- */
.vb{
  position:fixed; inset:0; z-index:85;
  background:rgba(20,31,51,.94);
  display:grid; place-items:center; padding:var(--space-5);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.vb.is-open{ opacity:1; }
.vb__video{
  max-width:min(420px, 92vw); max-height:86vh;
  width:auto; border-radius:var(--r-lg); background:#000;
}
.vb__close{
  position:absolute; top:var(--space-4); right:var(--space-4);
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:0; color:var(--frost);
}

/* ------------------------------------------------------------
   15 · OUR STORY
   ------------------------------------------------------------ */
.story__grid{ display:grid; gap:var(--space-6); align-items:center; }
.story__copy h2{ margin-top:var(--space-3); }
.story__copy p + p,
.story__copy h2 + p{ margin-top:var(--space-4); }
.story__copy > p:not(.eyebrow){ max-width:52ch; font-size:var(--fs-sm); }
.story__kicker{ color:var(--marine); }

/* square, matching the source, so the whole photograph shows uncropped */
.story__shot{ aspect-ratio:1 / 1; }
.story__shot img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:820px){
  .story__grid{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .story__copy > p:not(.eyebrow){ font-size:var(--fs-body); }
}

/* ------------------------------------------------------------
   16 · FAQ
   Builds on the .accordion-* components in global.css.
   ------------------------------------------------------------ */
.faq__list{ margin-top:var(--space-6); border-top:1px solid var(--line); }
.faq__item{ max-width:70ch; }

.faq__item .accordion-trigger{
  cursor:pointer; list-style:none;
  font-size:var(--fs-body);
}
/* Safari still draws its own marker without this */
.faq__item .accordion-trigger::-webkit-details-marker{ display:none; }

.faq__item .accordion-trigger::after{
  content:""; flex:0 0 auto;
  width:10px; height:10px;
  border-right:1.5px solid var(--text-muted);
  border-bottom:1.5px solid var(--text-muted);
  /* rotate first, nudge second — otherwise the nudge follows the rotation
     and the chevron drifts off centre when it flips */
  transform:translateY(-3px) rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.faq__item[open] .accordion-trigger::after{
  transform:translateY(3px) rotate(-135deg);
}
.faq__item[open] .accordion-trigger{ color:var(--midnight); }

.faq__item .accordion-panel p{ font-size:var(--fs-sm); color:var(--text-muted); }

/* ------------------------------------------------------------
   16b · VALUE STACK
   ------------------------------------------------------------ */
.value h2{ margin-top:var(--space-3); }

.value__table{
  margin:var(--space-6) auto 0;
  max-width:34rem;
  text-align:left;
  background:var(--line-dark); background:#243554;
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:var(--space-5);
}
.value__row{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  padding-block:var(--space-2);
  border-bottom:1px solid var(--line-dark);
  font-size:var(--fs-sm); color:var(--text-on-dark);
}
.value__row--sum{ color:var(--sky); }
.value__row--today{
  border-bottom:0; padding-top:var(--space-4);
  align-items:baseline;
}
.value__row--today dt{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--frost); }
.value__row--today .price{ font-size:clamp(1.5rem, 6vw, 1.75rem); color:var(--frost); }

.value__cta{ margin-top:var(--space-5); }

/* ------------------------------------------------------------
   17 · FINAL CTA
   ------------------------------------------------------------ */
.finale h2{ margin-top:var(--space-3); }
.finale .lead{ margin-top:var(--space-3); max-width:46ch; }
.finale__cta{ margin-top:var(--space-6); }
.finale__micro{
  margin-top:var(--space-4);
  font-size:var(--fs-xs); color:var(--text-on-dark); opacity:.75;
}

/* ------------------------------------------------------------
   18 · FOOTER
   ------------------------------------------------------------ */
.footer{ padding-block:var(--space-7) var(--space-6); }

.footer__trust{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--line-dark);
}
.footer__trust li{
  display:flex; align-items:flex-start; gap:.5em;
  font-size:var(--fs-xs); color:var(--text-on-dark);
}
.footer__trust li::before{ content:"✓"; color:var(--sky); flex:0 0 auto; }

.footer__bottom{
  display:grid; justify-items:center; gap:var(--space-5);
  padding-top:var(--space-6); text-align:center;
}
.footer__brand img{ height:22px; width:auto; }

/* mobile wraps this list, and a dot separator would then start a line —
   so spacing does the separating there, dots only on the single desktop row */
.footer__nav ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3) var(--space-5); }
.footer a{ color:var(--text-on-dark); font-size:var(--fs-sm); }
.footer a:hover{ color:var(--frost); }

.footer__line{ font-size:var(--fs-xs); color:var(--text-on-dark); opacity:.6; }

@media (min-width:820px){
  .footer__trust{ grid-template-columns:repeat(4, 1fr); gap:var(--space-5); }
  .footer__bottom{
    grid-template-columns:1fr auto 1fr;
    align-items:center; justify-items:stretch; text-align:left;
  }
  .footer__brand{ justify-self:start; }
  .footer__brand img{ height:26px; }
  .footer__line{ justify-self:end; text-align:right; }
  .footer__nav ul{ flex-wrap:nowrap; gap:var(--space-3); }
  .footer__nav li + li::before{ content:"·"; margin-right:var(--space-3); opacity:.5; }
}

/* ============================================================
   19 · MOBILE LAYOUT — follows glace-wireframe-mobile
   Everything below applies at ≤819px only. Desktop keeps the
   layouts built from the desktop wireframe, untouched.
   ============================================================ */
@media (max-width:819.98px){

  /* --- hero: copy centred over the video --- */
  .hero__inner{ text-align:center; }
  .hero__copy > p:not(.eyebrow){ margin-inline:auto; }
  .hero__cta{ display:flex; width:100%; }
  .hero__rating{ justify-content:center; }

  /* --- trust bar: pills that swipe, not a stacked list --- */
  .trustbar__list{
    display:flex; gap:var(--space-2);
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin-inline:calc(var(--container-pad) * -1);
    padding:var(--space-4) var(--container-pad);
    scroll-padding-inline:var(--container-pad);
  }
  .trustbar__list::-webkit-scrollbar{ display:none; }
  .trustbar__item{
    flex:0 0 auto; scroll-snap-align:start;
    width:auto; padding:.55rem 1rem;
    background:var(--frost); border:1px solid var(--line); border-radius:var(--r-pill);
    font-weight:var(--w-semi); white-space:nowrap;
  }
  .trustbar__item + .trustbar__item{ border-top:1px solid var(--line); }

  /* --- meios de pagamento: os quatro numa só linha ---
     Aos 22px o lockup do Visa é largo o bastante para empurrar a quarta
     placa para uma linha sozinha, o que lê como erro. --- */
  .pay__mark{ height:18px; }

  /* --- ritual: numbered cards, no step photos --- */
  .ritual__shot{ display:none; }
  .ritual__step{
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:var(--space-4);
    background:var(--white);
    border-radius:var(--r-md);
    padding:var(--space-4);
  }
  .ritual__num{
    font-family:var(--font-display); font-size:1.9rem; line-height:1;
    color:var(--sky); width:2ch; text-align:center;
  }
  .ritual__step h3{
    font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--w-semi);
    color:var(--heading);
  }
  .ritual__grid{ gap:var(--space-3); }
  .ritual__video{ margin-bottom:var(--space-3); }

  /* --- what you get: three cards swipe, flat-lay is desktop-only --- */
  .what__hero{ display:none; }
  .what__tool{ background:var(--frost); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--space-4); }
  .what__tool .what__shot{ margin-bottom:var(--space-3); }
  .what__tool h3{ margin-top:0; }

  /* --- why: ticks --- */
  .why__item dt{ position:relative; padding-left:1.5em; }
  .why__item dt::before{ content:"✓"; position:absolute; left:0; color:var(--sky); }
  .why__item dd{ padding-left:1.5em; }

  /* --- guarantee: everything centred under the seal --- */
  .guarantee__copy{ text-align:center; }
  .guarantee__copy > p:not(.eyebrow){ margin-inline:auto; }

  /* --- box + story: image first, copy under --- */
  .box__grid,
  .story__grid{ display:flex; flex-direction:column; }
  .box__shot,
  .story__shot{ order:-1; }

  /* --- reviews: cards swipe like the tools row --- */
  .reviews__head{ align-items:flex-start; }
  /* one column is plenty at 375px — the other two would be slivers */
  .marquee{ height:400px; }
  .marquee__col:nth-child(n+2){ display:none; }
  .marquee__col{ max-width:none; }
  .reviews__all{ display:flex; width:100%; }

  /* --- footer: single centred column, clear of the buy bar --- */
  .footer__trust{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer__trust li{ justify-content:center; }
}

/* ------------------------------------------------------------
   20 · SWIPE DOTS — added by main.js under [data-swipe] rows
   ------------------------------------------------------------ */
.dots{ display:flex; gap:6px; justify-content:center; margin-top:var(--space-4); }
.dots span{
  width:6px; height:6px; border-radius:50%; background:var(--line);
  transition:width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dots span.is-on{ width:18px; border-radius:4px; background:var(--midnight); }
.swipe-hint{
  display:block; margin-top:var(--space-2); text-align:center;
  font-size:var(--fs-xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-muted);
}
@media (min-width:820px){ .dots, .swipe-hint{ display:none; } }

/* ------------------------------------------------------------
   21 · STICKY BUY BAR (mobile)
   ------------------------------------------------------------ */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
}
.buybar__info{ flex:0 0 auto; }
.buybar__price{ font-size:1.2rem; line-height:1.1; }
.buybar__sub{ font-size:var(--fs-xs); color:var(--text-muted); }
.buybar .btn{ flex:1; padding:.95rem 1rem; }
.buybar .btn.is-disabled{
  background:var(--line); border-color:var(--line); color:var(--text-muted);
  pointer-events:none;
}
/* the footer ends above the bar rather than under it */
body:has(.buybar:not([hidden])) .footer{ padding-bottom:calc(var(--space-9) + env(safe-area-inset-bottom)); }

@media (min-width:820px){ .buybar{ display:none !important; } }

/* --- review card: monogram instead of an invented face --- */
.review__who{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-4); }
.review__mono{
  flex:0 0 auto; display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--ice); color:var(--midnight);
  font-family:var(--font-display); font-size:.95rem; line-height:1;
}
.review__who .review__meta{ margin-top:0; }

/* ============================================================
   22 · STANDALONE PAGES (contact, returns)
   Legal and support pages. Same shell as the shop, narrower measure.
   ============================================================ */
.page{ max-width:70ch; }
.page h1{ font-size:var(--fs-h2); }
.page__intro{ margin-top:var(--space-4); }

.page h2{
  font-size:var(--fs-h3);
  margin-top:var(--space-7);
  padding-top:var(--space-5);
  border-top:1px solid var(--line);
}
.page h2:first-of-type{ margin-top:var(--space-6); }

.page p,
.page li{ margin-top:var(--space-3); font-size:var(--fs-sm); }
.page ul,
.page ol{ margin-top:var(--space-3); padding-left:1.3em; }
.page ol{ list-style:decimal; }
.page ul li{ list-style:disc; }
.page ol li::marker,
.page ul li::marker{ color:var(--sky); }

.page dl{ margin-top:var(--space-4); }
.page dt{ font-weight:var(--w-semi); color:var(--heading); margin-top:var(--space-4); font-size:var(--fs-sm); }
.page dd{ font-size:var(--fs-sm); color:var(--text-muted); }

.page__mail{
  display:inline-block; margin-top:var(--space-3);
  font-size:var(--fs-h3); font-family:var(--font-display); color:var(--marine);
}

/* what still has to be filled in before this page can go live */
.todo{
  margin-top:var(--space-4);
  background:var(--oat);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
.todo strong{
  display:block; font-size:var(--fs-xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--midnight);
}
.todo p{ margin-top:var(--space-2); color:var(--text); }

.page__back{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top:var(--space-7);
  font-size:var(--fs-sm); font-weight:var(--w-semi); color:var(--marine);
}