/** Shopify CDN: Minification failed

Line 432:78 Unexpected "}"

**/
/* Accent and muted grey are set for WCAG AA on cream: white-on-berry 5.12,
     berry-text-on-cream 4.55, muted-on-cream 4.54. --berry matches the PDP's
     existing deeper berry so the two templates agree. */
  /* --ink is the same navy as --navy on purpose. Headings were already navy, but
     display-scale text that is not an <h*> tag (the review lead-in, the stat
     numbers, the shipping line) fell back to the old #2A3140 and read black. */
  .lh{--cream:#F6F1E6;--paper:#fff;--ink:#38445C;--muted:#656e82;--navy:#38445C;
      --berry:#DB4A80;--berry-bright:#DB4A80;--berry-deep:#C13A6E;--citrus:#E8A33D;--line:#e7e0d2;
      color:var(--ink);font-family:inherit;}
  .lh *{box-sizing:border-box}
  /* keyboard focus must stay visible — the custom button styles were hiding it */
  .lh a:focus-visible,.lh button:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:6px}
  .lh .goal:focus-visible,.lh .pc:focus-visible,.lh .fmt:focus-visible{outline-offset:2px}
  /* Centred, not edge-to-edge. The theme runs full-width (--container-max-width:100%), which
     on a big monitor stretches everything to ~1900px. Matan's call, having seen both: the page
     reads better pulled in. 1180 is the width he signed off on. The gutter still comes from the
     theme so the two agree on phones, where the cap never bites. */
  .lh .w{max-width:1180px;margin:0 auto;padding:0 var(--container-gutter,22px)}
  .lh h1,.lh h2,.lh h3{color:var(--navy);letter-spacing:-.02em;line-height:1.08;text-wrap:balance;margin:0}
  .lh .eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--berry)}

  /* ---------- HERO ---------- */
  /* Full-bleed right image. The copy column is capped at half the 1180 container so the
     headline stays aligned with every section below it, and the media column is exactly
     50vw — no negative margins, nothing clipped off-screen. */
  .lh .hero{background:var(--cream);color:var(--ink);overflow:hidden}
  .lh .hero-in{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
    gap:0;align-items:center;min-height:min(78vh,640px)}
  /* The image still bleeds to the right edge; the copy lines up with the centred 1180
     column, so the headline sits directly above the section headings below it. max() keeps
     it honest under 1180, where the container is gutter-limited rather than centred. */
  .lh .hero-copy{width:100%;max-width:none;margin:0;padding-block:48px;padding-right:44px;
    padding-left:max(var(--container-gutter,22px),(100vw - 1180px) / 2 + var(--container-gutter,22px))}
  .lh .hero-copy > *{max-width:34rem}
  .lh .hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:700;margin:.3em 0 .32em;color:var(--navy)}
  .lh .hero p{color:var(--muted);font-size:clamp(1rem,1.3vw,1.14rem);max-width:44ch;margin:0}
  .lh .hero .eyebrow{color:var(--berry)}

  /* Past 1500px a 50/50 split turns the photo into a wall. Give the image less of the
     width — it still bleeds to the right edge, nothing is inset or cut off. */
  @media(min-width:1500px){
    .lh .hero-in{grid-template-columns:1fr minmax(0,45%)}

  }

  /* optional offer strip — empty by default so it never lies about a promo */
  .lh .promo{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
    background:var(--berry);color:#fff;border-radius:999px;padding:8px 16px;
    font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
  .lh .promo::after{content:"\2192"}
  .lh .promo:hover{opacity:.9}

  /* social proof: customer faces + rating */
  .lh .proofline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .lh .avs{display:flex;align-items:center}
  /* Faces are circle-cropped here. If the uploaded file is already a circle sitting on a
     white square, set "Face photos" to "Already circles" and we zoom past the white rim. */
  .lh .avs{ }
  .lh .avs span{width:42px;height:42px;border-radius:50%;overflow:hidden;display:block;
    border:2.5px solid var(--cream);box-shadow:0 1px 4px rgba(30,40,70,.16);margin-left:-11px;flex:none}
  .lh .avs span:first-child{margin-left:0}
  .lh .avs img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--av-zoom))}
  .lh .rating{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--ink)}
  .lh .stars{color:var(--citrus);letter-spacing:2px}

  .lh .ctas{display:flex;gap:12px;margin:28px 0 16px;flex-wrap:wrap}
  .lh .btn{border-radius:999px;padding:15px 30px;font-weight:600;text-decoration:none;font-size:.98rem;display:inline-block;transition:transform .15s}
  .lh .btn:hover{transform:translateY(-2px)}
  .lh .btn.p{background:var(--berry-bright);color:#fff;font-weight:800;box-shadow:0 8px 20px rgba(219,74,128,.30)}
  .lh .btn.p:hover{background:var(--berry-deep);box-shadow:0 14px 30px rgba(219,74,128,.42)}
  .lh .btn.s{background:transparent;color:var(--ink);border:1.6px solid var(--ink)}
  /* secondary action reads as a link, not a rival button */
  .lh .ctas .btn.link{background:none;border:0;padding:15px 4px;color:var(--ink);
    text-decoration:none;border-bottom:2px solid var(--berry);border-radius:0}
  .lh .ctas .btn.link:hover{transform:none;opacity:.72}
  .lh .ctas .btn.link::after{content:" \2192"}
  /* Three promises, and the only two acceptable shapes are ONE row or THREE rows. Wrapping
     is what produces the bad result: two across and a third hanging underneath.
     So it stacks by default and only goes inline once the column is provably wide enough.
     Above 1180 the copy column is pinned to the container and measures a constant 498px;
     the row needs ~476. Below that the column shrinks, so it stays stacked. */
  .lh .trust{display:flex;flex-direction:column;gap:9px;color:var(--muted);
    font-size:.85rem;font-weight:500}
  @media(min-width:1180px){
    .lh .trust{flex-direction:row;flex-wrap:nowrap;gap:20px;white-space:nowrap}
  }
  .lh .trust span{display:inline-flex;align-items:center;gap:8px}
  .lh .trust i{color:var(--berry-bright);font-style:normal;font-weight:700}
  /* price anchor under the buttons — the figure is computed, never hand-typed */
  .lh .valueline{margin:6px 0 14px;color:var(--muted);font-size:.95rem;font-weight:500}
  .lh .valueline b{color:inherit;font-weight:600}
  .lh .hero-media{position:relative;align-self:stretch;overflow:hidden}
  .lh .hero-media img{width:100%;height:100%;max-height:680px;object-fit:cover;
    object-position:center var(--hero-focus,center);display:block;border-radius:0}

  /* ---------- BADGE MARQUEE (runs under the hero) ---------- */
  .lh .mq{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;padding:15px 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
  .lh .mq-track{display:flex;width:max-content;animation:lh-mq 34s linear infinite}
  .lh .mq:hover .mq-track{animation-play-state:paused}
  .lh .mq-set{display:flex;align-items:center;flex:none}
  .lh .mq-set span{display:flex;align-items:center;gap:9px;padding:0 15px;
    font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
  /* the icon carries the pink; the separator is muted so it doesn't compete */
  .lh .mq-ic{width:19px;height:19px;flex:none;color:var(--berry)}
  .lh .mq-set span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--berry);opacity:.3;margin-left:6px}
  @keyframes lh-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}


  /* ---------- MOTION ---------- */
  /* The reveal is additive only: nothing is ever held at opacity:0 as a resting
     state. If the animation never runs (frozen rAF, old browser, JS error) the
     content is simply visible. Same for the counters - the final value is always
     written, animated or not. */
  /* transform only, never opacity: if the compositor stalls, the worst case is
     content sitting 16px low - it is never invisible. */
  @keyframes lh-rise-in{from{transform:translateY(16px)}to{transform:none}}
  .lh.motion .lh-rise.seen{animation:lh-rise-in .6s cubic-bezier(.22,.61,.36,1)}
  .lh .proof b{font-variant-numeric:tabular-nums}
  @media(prefers-reduced-motion:reduce){
    .lh.motion .lh-rise.seen{animation:none}
  }

  /* ---------- SECTIONS ---------- */
  .lh .sec{padding:64px 0;scroll-margin-top:90px}   /* clears a sticky header on anchor jumps */
  html:has(.lh){scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){html:has(.lh){scroll-behavior:auto}}
  .lh .sec.alt{background:var(--paper)}
  .lh .sec.cream{background:var(--cream)}
  .lh .sec h2{font-size:clamp(1.55rem,2.8vw,2.2rem);font-weight:700;margin:.3em 0 .2em}
  .lh .sub{color:var(--muted);margin:0 0 28px;max-width:56ch}

  /* ---------- GOALS (photo tiles) ---------- */
  /* 12 tiles: divides evenly by 4, 3 and 2, so no orphan row at any width. */
  .lh .goals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .lh .goal{position:relative;border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;
    display:block;aspect-ratio:1/1;background:var(--cream);transition:transform .18s,box-shadow .18s}
  .lh .goal:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(40,50,80,.16)}
  .lh .goal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center top;transition:transform .5s ease}
  .lh .goal:hover img{transform:scale(1.05)}
  .lh .goal .g-in{position:absolute;inset:auto 0 0 0;padding:16px 15px 15px;
    background:linear-gradient(to top,rgba(18,24,38,.82),rgba(18,24,38,.28) 62%,transparent);
    display:flex;flex-direction:column;gap:2px}
  .lh .goal .g-name{font-weight:600;font-size:1rem;line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.3)}
  .lh .goal .g-n{font-size:.76rem;font-weight:500;opacity:.92}
  /* no photo yet -> readable cream tile instead of a dark empty box */
  .lh .goal.noimg{background:var(--cream);border:1px solid var(--line);color:var(--ink)}
  .lh .goal.noimg .g-in{background:none;position:absolute;inset:auto 0 0 0}
  .lh .goal.noimg .g-name{text-shadow:none}
  .lh .goal.noimg .g-ico{position:absolute;top:16px;left:15px;font-size:1.5rem}
  /* double-width tile. A landscape range shot has to keep its own shape, so this
     one spans two columns and takes its height from the square tiles beside it.
     Its label sits top-left in navy on the light part of the photo instead of
     under the usual dark scrim, which would sit over the bottles. */
  /* 2.05 = (two columns + one gap) / one column, so it lines up with the square
     tiles beside it. Do NOT use aspect-ratio:auto — on a phone this tile sits
     alone on its row with no square to borrow a height from, and collapses to 0. */
  .lh .goal.wide{grid-column:span 2;aspect-ratio:2.05/1}
  /* A translucent panel, not the usual dark scrim: the scrim would sit over the
     bottles, and plain navy on the photo drops below 4.5:1 wherever a bottle
     moves under it (which it does on a phone). */
  .lh .goal.wide .g-in{inset:0 auto auto 0;margin:14px;padding:12px 16px;border-radius:14px;
    background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);gap:2px}
  .lh .goal.wide .g-name{color:var(--navy);text-shadow:none;font-size:1.16rem}
  .lh .goal.wide .g-n{color:var(--muted);font-size:.83rem;opacity:1;font-weight:500}
  /* accent tile - closes the grid instead of leaving a cream hole */
  .lh .goal.accent{background:var(--berry);border:0;color:#fff;
    display:flex;align-items:flex-end}
  .lh .goal.accent .g-in{position:static;background:none;padding:18px 17px 17px}
  .lh .goal.accent .g-name{text-shadow:none;font-size:1.12rem}
  .lh .goal.accent .g-n{opacity:.92}
  .lh .goal.accent .g-ico{position:absolute;top:15px;left:16px;font-size:1.35rem;opacity:.9}

  /* ---------- PRODUCT GRID ---------- */
  .lh .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .lh .pc{background:var(--cream);border:1px solid var(--line);border-radius:18px;overflow:hidden;
    text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
  .lh .pc:hover .pc-cta{background:var(--berry-deep)}
  .lh .pc:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(40,50,80,.12)}
  /* product PNGs are transparent — let the cream card show through */
  /* Top padding clears the BESTSELLER badge (sits at top:11px, ~27px tall) so a tall
     bottle cap never runs into it. Keep it above ~46px if the badge ever grows. */
  .lh .pc-img{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
    padding:52px 12px 12px}
  /* Seed-style status pill, top-left of the pack shot */
  .lh .pc-badge{position:absolute;top:11px;left:11px;z-index:2;border-radius:999px;padding:5px 11px;
    font-size:.6rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1}
  .lh .pc-badge.best{background:var(--navy);color:#fff}
  .lh .pc-badge.new{background:var(--berry);color:#fff}
  .lh .pc-img img{max-width:100%;max-height:100%;object-fit:contain}
  .lh .pc-body{padding:2px 15px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
  .lh .pc-price{font-size:.88rem;font-weight:600;color:var(--ink)}
  .lh .pc-fmt{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .lh .pc h3{font-size:.96rem;font-weight:600}
  .lh .pc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:8px 10px;padding-top:12px}
  .lh .pc-rate{display:flex;align-items:center;gap:5px;font-size:.8rem;font-weight:500;color:var(--ink);
    flex:1 1 auto;min-width:0;white-space:nowrap}
  /* .stars is a span too — colour the COUNT only, or the gold stars turn grey */
  .lh .pc-rate .stars{font-size:.8rem;letter-spacing:0;color:var(--citrus);flex:none}
  .lh .pc-rate .pc-cnt{color:var(--muted);font-weight:400}
  .lh .pc-cta{background:var(--berry);color:#fff;border-radius:999px;padding:7px 15px;font-size:.79rem;box-shadow:0 3px 8px rgba(193,58,110,.22);
    font-weight:600;white-space:nowrap;flex:0 0 auto}
  .lh .seeall{display:inline-flex;align-items:center;margin-top:22px;font-weight:600;color:var(--ink);
    text-decoration:none;padding:11px 2px;min-height:44px;box-shadow:inset 0 -2px 0 0 var(--berry)}

  /* ---------- BUY MORE, GET MORE ---------- */
  .lh .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:6px}
  .lh .tier{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 22px;
    display:flex;align-items:center;gap:16px;transition:transform .15s,box-shadow .15s}
  .lh .tier:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(40,50,80,.10)}
  .lh .tier-n{width:52px;height:52px;flex:none;border-radius:50%;background:var(--cream);
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    font-size:1.35rem;font-weight:700;color:var(--navy);line-height:1}
  /* real bottles beat a number — overlapped so 2 vs 3 reads instantly */
  .lh .tier-pics{display:flex;align-items:flex-end;flex:none}
  .lh .tier-pics img{height:clamp(66px,7.4vw,92px);width:auto;object-fit:contain;margin-left:-34px;filter:drop-shadow(0 7px 14px rgba(40,50,80,.18))}
  .lh .tier-pics img:first-child{margin-left:0}
  .lh .tier-t{display:flex;flex-direction:column;gap:5px;min-width:0}
  .lh .tier-l{font-weight:600;font-size:.95rem;line-height:1.2}
  .lh .tier-s{align-self:flex-start;background:var(--berry);color:#fff;border-radius:999px;
    padding:5px 12px;font-size:.74rem;font-weight:600;letter-spacing:.06em;white-space:nowrap;box-shadow:0 3px 8px rgba(193,58,110,.22)}
  /* free shipping is a headline benefit, not a footnote — centre it and give it room */
  .lh .tier-note{margin:26px auto 0;display:flex;align-items:center;justify-content:center;gap:11px;
    background:var(--paper);border:1px solid var(--line);border-radius:999px;
    padding:14px 26px;width:fit-content;max-width:100%;
    font-weight:600;color:var(--ink);font-size:clamp(.95rem,1.5vw,1.12rem);letter-spacing:-.01em}
  .lh .tier-note svg{width:24px;height:24px;color:var(--berry);flex:none}
  .lh .tier-note b{font-weight:700}

  /* ---------- HOW IT WORKS ---------- */
  .lh .how{background:var(--navy);border-radius:26px;padding:46px;display:grid;grid-template-columns:1fr 1fr;
    gap:34px;align-items:center;color:#F3EEE2}
  .lh .how h2{color:#fff}
  .lh .how p{color:#AEB7C7;max-width:40ch}
  .lh .how .eyebrow{color:var(--citrus)}
  .lh .how video{width:100%;max-width:330px;border-radius:18px;display:block;margin:0 auto;
    -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);
    mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
  .lh .pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
  .lh .pill{border:1px solid rgba(239,233,219,.25);border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:500}

  /* ---------- FORMATS ---------- */
  .lh .fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .lh .fmt{border:1px solid var(--line);border-radius:18px;background:var(--cream);overflow:hidden;
    text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
  .lh .fmt:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(40,50,80,.10)}
  .lh .fmt-img{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
  /* animated format cards: the clips are composited on navy, so the panel matches */
  .lh .fmt-img.vid{background:var(--navy);display:flex;align-items:center;justify-content:center}
  .lh .fmt-img.vid video{width:100%;height:100%;object-fit:cover;display:block;
    -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);
    mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
  .lh .fmt-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
  /* a packshot instead of a lifestyle photo — show the whole product, don't crop it */
  .lh .fmt-img.fit{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:14px}
  .lh .fmt-img.fit img{width:auto;height:100%;object-fit:contain}
  .lh .fmt:hover .fmt-img img{transform:scale(1.05)}
  .lh .fmt-body{padding:22px}
  .lh .fmt h3{font-size:1.1rem;font-weight:700;margin-bottom:5px}
  .lh .fmt p{color:var(--muted);font-size:.9rem;margin:0}

  /* ---------- INSPIRATION STRIP ---------- */
  .lh .insp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .lh .insp figure{margin:0;border-radius:18px;overflow:hidden;position:relative;aspect-ratio:9/16;background:var(--cream)}
  .lh .insp img,.lh .insp video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
  .lh .insp figure:hover img{transform:scale(1.05)}
  .lh .insp .ugc-handle{position:absolute;top:12px;left:12px;background:rgba(18,24,38,.55);
    backdrop-filter:blur(4px);color:#fff;border-radius:999px;padding:5px 11px;
    font-size:.72rem;font-weight:600;letter-spacing:.02em}
  .lh .insp figcaption{position:absolute;inset:auto 0 0 0;padding:16px 15px;color:#fff;font-weight:600;font-size:.92rem;
    background:linear-gradient(to top,rgba(18,24,38,.78),transparent);text-shadow:0 1px 8px rgba(0,0,0,.35)}
  .lh .insp .tall{grid-row:span 1}


  /* ---------- MEET LIVS (brand story) ---------- */
  .lh .meet{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
  .lh .meet-media img{width:100%;height:100%;max-height:560px;object-fit:cover;
    object-position:center 28%;border-radius:22px;display:block}
  .lh .meet h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:400;margin-bottom:.5em}
  .lh .meet h2 b{font-weight:700}
  .lh .meet p{color:var(--muted);font-size:1.02rem;line-height:1.65;margin:0 0 1em;max-width:52ch}
  .lh .meet blockquote{margin:0 0 1em;padding-left:18px;border-left:3px solid var(--berry);
    color:var(--ink);font-size:1.02rem;line-height:1.6}
  .lh .meet blockquote cite{display:block;margin-top:.5em;font-style:normal;font-weight:600;color:var(--muted);font-size:.92rem}
  .lh .meet .seeall{margin-top:6px}

  /* ---------- GUARANTEE ---------- */
  .lh .guar{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .lh .guar h2{margin-bottom:.3em}
  .lh .guar p{color:var(--muted);font-size:1.02rem;max-width:46ch;margin:0}
  .lh .guar-media img{width:100%;height:100%;max-height:430px;object-fit:cover;border-radius:22px;display:block}

  /* ---------- BRAND BAND ---------- */
  .lh .band{position:relative;border-radius:26px;overflow:hidden;min-height:clamp(320px,38vw,460px);display:flex;align-items:flex-end}
  .lh .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Full-bleed vignette. The scrim used to be painted on the text box itself, which cut a
     hard vertical edge across the photo wherever that box ended. */
  .lh .band::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to top,rgba(18,24,38,.80) 0%,rgba(18,24,38,.42) 32%,rgba(18,24,38,.06) 62%,rgba(18,24,38,0) 80%),
      linear-gradient(to right,rgba(18,24,38,.52) 0%,rgba(18,24,38,.16) 46%,rgba(18,24,38,0) 72%)}
  .lh .band .band-in{position:relative;z-index:1;padding:38px;max-width:34rem;color:#fff;width:100%;background:none}
  .lh .band h2{color:#fff;text-shadow:0 1px 14px rgba(10,15,25,.35)}
  .lh .band p{color:rgba(255,255,255,.92);max-width:38ch;margin:.4em 0 0}
  .lh .band .btn{margin-top:20px;background:#fff;color:var(--ink)}

  /* ---------- REVIEWS ---------- */
  .lh .rev-lead{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;letter-spacing:-.025em;line-height:1.06;
    max-width:20ch;margin:.25em 0 .35em}
  .lh .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .lh .rev{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
    margin:0;display:flex;flex-direction:column;gap:11px}
  .lh .rev-stars{color:var(--citrus);letter-spacing:2px;font-size:.95rem}
  .lh .rev h3{font-size:1.02rem;font-weight:700;line-height:1.25}
  .lh .rev blockquote{margin:0;font-size:.97rem;line-height:1.55;color:var(--muted)}
  .lh .rev figcaption{color:var(--ink);font-size:.9rem;font-weight:600}
  .lh .rev-prod{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
    display:flex;align-items:center;gap:11px;text-decoration:none}
  .lh .rev-prod img{width:42px;height:42px;object-fit:contain;background:var(--cream);
    border-radius:9px;padding:3px;flex:none}
  .lh .rev-prod .rp-t{display:flex;flex-direction:column;gap:3px;min-width:0}
  .lh .rev-prod .rp-n{color:var(--berry);font-weight:600;font-size:.9rem;line-height:1.2}
  .lh .rev-prod .rp-r{color:var(--ink);font-weight:600;font-size:.82rem}
  .lh .rev-prod .rp-r i{color:var(--citrus);font-style:normal}
  .lh .rev-prod:hover .rp-n{text-decoration:underline}

  /* ---------- CLOSING TOUT ---------- */
  .lh .close{position:relative;overflow:hidden;background:var(--navy);border-radius:26px;
    padding:64px 44px 58px;text-align:center;color:#F3EEE2}
  /* soft light behind the headline so it is not a flat rectangle */
  .lh .close::before{content:"";position:absolute;left:50%;top:-42%;width:min(760px,120%);aspect-ratio:1;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(circle,rgba(201,162,75,.16),rgba(201,162,75,0) 62%)}
  .lh .close > *{position:relative}
  .lh .close h2{color:#fff;margin-bottom:.3em}
  .lh .close p{color:#C9D2E0;max-width:44ch;margin:0 auto;font-size:1.02rem}
  .lh .close .eyebrow{color:var(--citrus)}
  /* the goals themselves, so the section does what the headline promises */
  .lh .close-goals{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:26px auto 0;max-width:56rem}
  .lh .close-goals a{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 17px;
    color:#F3EEE2;text-decoration:none;font-size:.87rem;font-weight:600;
    transition:background .15s,border-color .15s,transform .15s}
  .lh .close-goals a:hover{background:#fff;border-color:#fff;color:var(--navy);transform:translateY(-2px)}
  .lh .close .ctas{justify-content:center;margin:30px 0 0}
  .lh .close .btn.p{background:var(--berry-bright);color:#fff;font-weight:800;box-shadow:0 8px 22px rgba(12,18,32,.45)}
  .lh .close .btn.p:hover{box-shadow:0 14px 30px rgba(12,18,32,.55)}
  .lh .close .btn.s{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.5)}
  .lh .close .mini{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;align-items:center;
    margin-top:28px;color:#C9D2E0;font-size:.85rem;font-weight:500}
  .lh .close .mini span{display:inline-flex;align-items:center;gap:8px}
  .lh .close .mini span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--citrus)}

  /* ---------- PROOF ---------- */
  .lh .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
  .lh .proof div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 14px}
  .lh .proof b{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
  .lh .proof span{color:var(--muted);font-size:.84rem;font-weight:500}

  @media(max-width:1100px) and (min-width:901px){
    .lh .goals{grid-template-columns:repeat(3,1fr)}
  }
  @media(max-width:900px){
    .lh .hero-in{grid-template-columns:1fr;gap:0;min-height:0}
    .lh .hero-media{order:-1}                    /* lead with the image on phones */
    .lh .hero-media img{max-height:56vh;border-radius:0}
    .lh .hero-copy{max-width:none;margin:0;
      padding:26px var(--container-gutter,22px) 34px}
    .lh .hero-copy > *{max-width:none}
    .lh .goals{grid-template-columns:repeat(2,1fr)}
    .lh .grid{grid-template-columns:repeat(2,1fr);gap:12px}
    /* Two-up cards are ~157px wide, so the rating and the button can't share a row.
       Stack them: rating on top, full-width Shop Now underneath. The whole card links
       to the PDP, the button just makes that obvious and gives a 44px tap target. */
    .lh .pc-foot{flex-direction:column;align-items:stretch;gap:9px}
    .lh .pc-cta{display:block;width:100%;text-align:center;padding:11px 14px;font-size:.82rem}
    .lh .pc-body{padding:2px 12px 14px}
    .lh .pc-rate{font-size:.75rem;gap:4px}
    .lh .pc-rate .stars{font-size:.72rem;letter-spacing:0}
    .lh .pc-foot{padding-top:8px}
    .lh .how{grid-template-columns:1fr;padding:30px}
    .lh .fmts{grid-template-columns:1fr}
    .lh .insp{grid-template-columns:repeat(2,1fr)}
    .lh .meet{grid-template-columns:1fr;gap:28px}
    .lh .guar{grid-template-columns:1fr;gap:26px}
    .lh .proof{grid-template-columns:repeat(2,1fr)}
    .lh .revs{grid-template-columns:1fr}
    .lh .band .band-in{padding:26px}
  }
  @media(max-width:560px){
    /* Two-up tiles are ~151px on a phone. Long names ("Hair, Skin & Nails")
       wrap to three lines at the desktop type size and climb out of the scrim,
       so tighten the type and deepen the gradient here only. */
    .lh .goal .g-name{font-size:.92rem;line-height:1.12}
    .lh .goal .g-n{font-size:.7rem}
    .lh .goal .g-in{padding:12px 11px 11px;
      background:linear-gradient(to top,rgba(18,24,38,.9),rgba(18,24,38,.5) 68%,transparent)}
    .lh .goal.accent .g-name{font-size:1rem}
    .lh .goal.wide .g-in{margin:10px;padding:9px 12px}
    .lh .goal.wide .g-name{font-size:.95rem}
    .lh .goal.wide .g-n{font-size:.7rem}
  }

  /* Hero parallax. Scroll-driven CSS animation — no JS, no scroll listener, so it
     cannot jank or fight the reveal script. Browsers without support simply show
     a static image, which is the correct fallback. The 1.07 scale gives the drift
     somewhere to go without exposing an edge (.hero-media already clips). */
  @keyframes lh-parallax{from{transform:translate3d(0,-3.2%,0) scale(1.07)}
                           to{transform:translate3d(0, 3.2%,0) scale(1.07)}}
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference) and (min-width:901px){
      .lh .hero-media img{
        animation:lh-parallax linear both;
        animation-timeline:view();
        animation-range:entry 0% exit 100%;
        will-change:transform;
      }
    }
  }

  
  /* Staggered reveal: children of a revealed grid come in one after another
     rather than as a block. Same rise language, just sequenced — it reads as
     craft instead of a single lurch. Pure CSS, no extra JS. */
  @keyframes lh-stagger-in{from{transform:translateY(14px)}to{transform:none}}}
  .lh.motion .lh-rise.seen .goals .goal,
  .lh.motion .lh-rise.seen .grid .pc,
  .lh.motion .lh-rise.seen .fmts .fmt,
  .lh.motion .lh-rise.seen .revs .rev,
  .lh.motion .lh-rise.seen .insp figure{animation:lh-stagger-in .55s cubic-bezier(.2,.7,.3,1) backwards}
  .lh.motion .lh-rise.seen :is(.goals,.grid,.fmts,.revs,.insp) > *:nth-child(1){animation-delay:0s}
  .lh.motion .lh-rise.seen :is(.goals,.grid,.fmts,.revs,.insp) > *:nth-child(2){animation-delay:.05s}
  .lh.motion .lh-rise.seen :is(.goals,.grid,.fmts,.revs,.insp) > *:nth-child(3){animation-delay:.1s}
  .lh.motion .lh-rise.seen :is(.goals,.grid,.fmts,.revs,.insp) > *:nth-child(4){animation-delay:.15s}
  .lh.motion .lh-rise.seen :is(.goals,.grid,.fmts,.revs,.insp) > *:nth-child(n+5){animation-delay:.2s}
  @media(prefers-reduced-motion:reduce){
    .lh.motion .goals .goal,.lh.motion .grid .pc,.lh.motion .fmts .fmt,
    .lh.motion .revs .rev,.lh.motion .insp figure{opacity:1;animation:none !important}
  }

  @media(prefers-reduced-motion:reduce){
    .lh *{transition:none !important;animation:none !important}
  }

  /* ---------- LARGE DESKTOP ---------- */
  /* Must sit at the END of the file: the base grids below the hero are declared later
     than the hero rules, and at equal specificity the last declaration wins. Putting
     this block up with the hero silently loses. */
  /* Nothing needed here: the 1180 cap keeps every grid at its intended card size no matter
     how wide the monitor gets. Left as a marker so the next person doesn't re-derive it. */