/* =====================================================================
   Home page — new design (Steven Saldana wireframe, Oct 2026).
   Everything is prefixed hv2- so it never touches the rest of the store.
   Tokens come straight from the Figma file.
   ===================================================================== */
:root {
    --hv2-teal: #3FA7C2;
    --hv2-teal-deep: #32879D;
    --hv2-teal-pale: #DDF8FF;
    --hv2-teal-wash: #F0FAFC;
    --hv2-teal-soft: #D3F1F9;
    --hv2-ink: #383838;
    --hv2-body: #4C4C4C;
    --hv2-muted: #737373;
    --hv2-line: #C5C5C5;
    --hv2-cream: #FFF8F0;
    --hv2-cream-2: #FCF4EA;
    --hv2-green: #1CAE23;
    --hv2-green-deep: #12851A;
    --hv2-green-pale: #E0F5E3;
    --hv2-star: #ECC63D;
    --hv2-font: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --hv2-wrap: 1110px;
}

/* ---------- base inside the page ----------
   Specificity note: style.css (Bootstrap + the store) is loaded AFTER this
   file on the home page, so every rule here needs at least one class or
   attribute. Base rules use `section[class^="hv2-"] :where(x)` = (0,1,0) so
   any single-class rule below still wins over them. */
.hv2-header, .hv2-header *, .hv2-footer, .hv2-footer *,
section[class^="hv2-"], section[class^="hv2-"] *, .hv2-strip, .hv2-strip * {
    box-sizing: border-box;
    font-family: var(--hv2-font);
}
.hv2-wrap { width: 100%; max-width: var(--hv2-wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1200px) { .hv2-wrap { padding: 0; } }
section[class^="hv2-"] { padding: 88px 0; color: var(--hv2-body); background: #fff; overflow-x: clip; }
section[class^="hv2-"] :where(h1, h2, h3) { margin: 0; color: var(--hv2-ink); line-height: 1.25; font-family: var(--hv2-font); }
section[class^="hv2-"] :where(h2) { font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.01em; }
section[class^="hv2-"] :where(h3) { font-size: 22px; font-weight: 700; }
section[class^="hv2-"] :where(h2) span { color: var(--hv2-teal); }
section[class^="hv2-"] :where(p) { margin: 0; font-size: 16px; line-height: 1.6; }
section[class^="hv2-"] :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
section[class^="hv2-"] :where(a) { text-decoration: none; color: inherit; }
section[class^="hv2-"] :where(a):hover { text-decoration: none; }
section[class^="hv2-"] :where(img) { max-width: 100%; height: auto; display: block; }
section[class^="hv2-"] :where(hr) { opacity: 1; }
.hv2-center { text-align: center; margin-top: 48px !important; }
.hv2-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.hv2-head .hv2-pill { margin-bottom: 18px; }
.hv2-head h2 { margin-bottom: 14px; }
.hv2-head p { font-size: 18px; line-height: 1.7; font-weight: 500; }
.hv2-watercolor { background: #fff url("../../img/home-v2/watercolor-bg.jpg") center / cover no-repeat !important; }

/* pills */
.hv2-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 18px; height: 40px; border-radius: 999px;
    border: 1px solid var(--hv2-teal); color: var(--hv2-teal);
    font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: transparent;
}
.hv2-pill svg { flex: none; }
@media (max-width: 600px) { .hv2-pill { height: auto; min-height: 40px; padding: 8px 16px; white-space: normal; text-align: center; max-width: 100%; } }
.hv2-pill--white { background: #fff; border-color: #fff; color: var(--hv2-ink); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; font-size: 14px; }
.hv2-pill--white svg { color: var(--hv2-teal); }
.hv2-pill--cream { background: var(--hv2-cream-2); border-color: var(--hv2-cream-2); color: #000; font-weight: 500; letter-spacing: .06em; }
.hv2-pill--cream svg { color: var(--hv2-teal); }
.hv2-pill--dark { border-color: var(--hv2-teal); color: var(--hv2-teal); text-transform: uppercase; letter-spacing: .06em; }

/* buttons */
.hv2-btn, .hv2-btn:hover, .hv2-btn:focus {
    text-decoration: none !important;
}
.hv2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 57px; padding: 0 30px; border-radius: 8px; border: 0;
    background: var(--hv2-teal); color: #fff !important; font-size: 16px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap; transition: background .15s ease, transform .15s ease;
}
.hv2-btn:hover { background: var(--hv2-teal-deep); color: #fff; transform: translateY(-1px); }
.hv2-btn.is-busy { opacity: .6; pointer-events: none; }
.hv2-btn--block { width: 100%; }
.hv2-btn--cart { flex: 1; text-transform: uppercase; letter-spacing: .04em; }

/* stars */
.hv2-stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.hv2-stars i { width: 14px; height: 14px; background: var(--hv2-star); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* =====================================================================
   HEADER
   ===================================================================== */
body.hv2-no-scroll { overflow: hidden; }
.hv2-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid transparent; transition: box-shadow .2s ease; }
.hv2-header.is-stuck { box-shadow: 0 6px 24px rgba(20, 33, 31, .08); }
.hv2-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 82px; }
.hv2-logo img { height: 52px; width: auto; display: block; }
@media (min-width: 1024px) { .hv2-logo img { height: 78px; } .hv2-header__row { height: 96px; } }
.hv2-nav { flex: 1; display: none; }
.hv2-nav__list { display: flex; align-items: center; justify-content: center; gap: 36px; margin: 0; padding: 0; list-style: none; }
.hv2-nav__item { position: relative; }
.hv2-nav__link {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 0;
    background: none; border: 0; color: var(--hv2-ink); font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.hv2-nav__link:hover, .hv2-has-mega.is-open > .hv2-nav__link { color: var(--hv2-teal); }
.hv2-has-mega.is-open > .hv2-nav__link svg:last-child { transform: rotate(180deg); }
.hv2-nav__link svg { transition: transform .15s ease; }
.hv2-header__actions { display: flex; align-items: center; gap: 22px; }
.hv2-cart { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--hv2-teal); color: #fff !important; font-size: 16px; font-weight: 600; text-decoration: none !important; }
.hv2-cart:hover { background: var(--hv2-teal-deep); }
.hv2-login { color: var(--hv2-ink) !important; text-decoration: none !important; }

/* mega menus */
.hv2-mega {
    position: absolute; top: calc(100% + 8px); left: -24px; z-index: 50;
    display: none; min-width: 520px; padding: 22px; border-radius: 14px; background: #fff;
    box-shadow: 0 18px 50px rgba(20, 33, 31, .16); border: 1px solid #EEF2F3;
}
.hv2-has-mega.is-open > .hv2-mega { display: flex; gap: 22px; }
.hv2-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.hv2-mega__cats { flex: 0 0 170px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #EEF2F3; padding-right: 14px; }
.hv2-mega__cat { text-align: left; background: none; border: 0; padding: 12px 14px; border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--hv2-ink); cursor: pointer; }
.hv2-mega__cat.is-active, .hv2-mega__cat:hover { background: var(--hv2-teal-wash); color: var(--hv2-teal); }
.hv2-mega__panels { flex: 1; }
.hv2-mega__panel { display: none; }
.hv2-mega__panel.is-active { display: block; }
.hv2-mega__panel ul { list-style: none; margin: 0; padding: 0; }
.hv2-mega__panel li a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--hv2-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.hv2-mega__panel li a:hover { background: var(--hv2-teal-wash); color: var(--hv2-teal); }
.hv2-mega__all { display: inline-block; margin: 10px 12px 0; color: var(--hv2-teal); font-weight: 600; font-size: 15px; text-decoration: none; }
/* the account menu opens under "Hi, NAME", not at the screen edge (Paul, 20 Oct 2026) */
.hv2-account { position: relative; }
.hv2-mega--account { left: auto; right: 0; min-width: 240px; padding: 10px; }
.hv2-has-mega.is-open > .hv2-mega--account { display: block; }
.hv2-mega--account ul { list-style: none; margin: 0; padding: 0; }
.hv2-mega--account li { display: block; }
.hv2-mega--account li a, .hv2-mega--account li.hv2-ref { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; color: var(--hv2-ink); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; }
.hv2-mega--account li a:hover, .hv2-mega--account li.hv2-ref:hover { background: var(--hv2-teal-wash); color: var(--hv2-teal); }
.hv2-ref__icon { color: var(--hv2-teal); }

/* burger + mobile */
.hv2-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px; border: 0; background: none; cursor: pointer; }
.hv2-burger span { display: block; height: 2px; background: var(--hv2-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hv2-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hv2-burger.is-open span:nth-child(2) { opacity: 0; }
.hv2-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hv2-mobile { position: fixed; inset: 82px 0 0 0; z-index: 1029; background: #fff; overflow-y: auto; }
.hv2-mobile__inner { padding: 12px 20px 40px; }
.hv2-mobile__link, .hv2-acc > summary { display: block; padding: 16px 0; border-bottom: 1px solid #EEF2F3; color: var(--hv2-ink); font-size: 18px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.hv2-acc > summary::-webkit-details-marker { display: none; }
.hv2-acc > summary::after { content: "+"; float: right; color: var(--hv2-teal); font-weight: 600; }
.hv2-acc[open] > summary::after { content: "\2212"; }
.hv2-acc--sub { padding-left: 16px; }
.hv2-acc--sub > summary { font-size: 16px; font-weight: 500; }
.hv2-acc ul { margin: 0; padding: 4px 0 8px 16px; list-style: none; }
.hv2-acc ul a { display: block; padding: 10px 0; color: var(--hv2-body); font-size: 16px; text-decoration: none; }
.hv2-mobile__link--sub { padding-left: 16px; font-size: 16px; font-weight: 500; }
.hv2-mobile__account { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.hv2-mobile__account a { flex: 1 1 120px; text-align: center; padding: 13px 10px; border-radius: 8px; background: var(--hv2-teal-wash); color: var(--hv2-teal); font-weight: 600; text-decoration: none; }
.hv2-mobile__langs { display: flex; flex-wrap: wrap; gap: 8px; }
.hv2-mobile__langs a { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--hv2-line); color: var(--hv2-body); font-size: 14px; text-decoration: none; }
.hv2-mobile__langs a.is-active { border-color: var(--hv2-teal); color: var(--hv2-teal); }
/* full menu from 1200px: it needs ~1180px with Log In and Cart; iPads held sideways (1024-1180) got Cart cut off (Ollie, 17 Oct 2026) */
@media (min-width: 1200px) {
    .hv2-nav { display: block; }
    .hv2-burger, .hv2-mobile { display: none !important; }
}
@media (max-width: 1199px) {
    .hv2-cart span { display: none; }
    .hv2-cart { padding: 0 14px; }
    .hv2-login span, .hv2-account { display: none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hv2-hero { padding: 72px 0 60px; background: #DCEFF6 url("../../img/home-v2/hero-sky-bg.jpg") center / cover no-repeat !important; }
.hv2-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hv2-hero__grid > * { min-width: 0; }
.hv2-hero__left { max-width: 540px; }
.hv2-hero .hv2-pill--white { margin-bottom: 18px; }
.hv2-hero__sold { display: flex; align-items: center; gap: 9px; margin: 0 0 22px !important; font-size: 16px; letter-spacing: .06em; text-transform: none; color: var(--hv2-ink); }
.hv2-hero__sold b { font-weight: 700; }
.hv2-hero h1 { font-size: clamp(42px, 4.6vw, 55px); font-weight: 700; line-height: 1.18; margin-bottom: 12px; }
.hv2-hero h1 sup { font-size: .4em; }
.hv2-hero__sub { font-size: 18px; line-height: 1.6; font-weight: 500; margin-bottom: 30px !important; }
.hv2-hero__sub b { color: var(--hv2-ink); }
.hv2-member { font-weight: 700; color: var(--hv2-teal); margin-bottom: 10px !important; }

.hv2-buy { max-width: 460px; }
.hv2-buy--wide { max-width: 540px; }
.hv2-option { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 20px; border: 1px solid var(--hv2-line); border-radius: 12px; background: #fff; margin: 0; cursor: default; }
.hv2-option.is-selected { border-color: var(--hv2-teal); border-width: 2px; }
.hv2-option__radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hv2-line); background: #fff; position: relative; flex: none; }
.hv2-option.is-selected .hv2-option__radio { border-color: var(--hv2-teal); }
.hv2-option.is-selected .hv2-option__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--hv2-teal); }
.hv2-option__title { flex: 1; font-size: 16px; font-weight: 700; color: var(--hv2-ink); }
.hv2-option__price { font-size: 16px; font-weight: 700; color: var(--hv2-ink); white-space: nowrap; }
.hv2-option__price del { font-weight: 500; color: #999; margin-right: 8px; }
.hv2-buy__row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 12px; }
.hv2-buy__row .hv2-btn--cart { min-width: 200px; }
.hv2-qty { display: inline-flex; align-items: stretch; height: 57px; width: 166px; flex: none; border: 1px solid var(--hv2-body); border-radius: 12px; background: #fff; overflow: hidden; }
.hv2-qty__btn { flex: 1; border: 0; background: none; font-size: 22px; color: var(--hv2-ink); cursor: pointer; }
.hv2-qty__btn:hover { background: var(--hv2-teal-wash); }
.hv2-qty__input { width: 56px; border: 0; border-left: 1px solid var(--hv2-body); border-right: 1px solid var(--hv2-body); text-align: center; font-size: 20px; font-weight: 600; color: var(--hv2-ink); font-family: var(--hv2-font); background: #fff; }
.hv2-qty__input:focus { outline: none; background: var(--hv2-teal-wash); }
.hv2-qty--sm { height: 44px; width: 100%; border-radius: 8px; border-color: var(--hv2-line); margin-bottom: 12px; }
.hv2-qty--sm .hv2-qty__input { border-color: var(--hv2-line); font-size: 18px; }
.hv2-buy__na { font-weight: 700; color: var(--hv2-ink); }
.hv2-buy__na a { color: var(--hv2-teal); text-decoration: underline; }

.hv2-hero__right { position: relative; display: flex; flex-direction: column; align-items: center; }
.hv2-hero__stage { position: relative; height: 440px; display: flex; align-items: flex-end; justify-content: center; }
.hv2-hero .hv2-hero__stage img { height: 420px !important; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 18px 24px rgba(26, 64, 77, .25)); }
.hv2-hero__shadow { position: absolute; bottom: 6px; left: 50%; width: 180px; height: 22px; transform: translateX(-50%); border-radius: 50%; background: #1A404D; filter: blur(12px); opacity: .55; }
.hv2-rating { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; height: 81px; padding: 0 28px 0 14px; border-radius: 999px; background: var(--hv2-teal-pale); border: 1px solid #E5E5E5; }
.hv2-rating__g { width: 50px; height: 50px; border-radius: 50%; background: var(--hv2-cream-2); display: grid; place-items: center; flex: none; }
.hv2-rating__g img { width: 27px; height: auto; }
.hv2-rating__body { display: flex; flex-direction: column; gap: 6px; }
.hv2-rating__top { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--hv2-ink); }
.hv2-rating__sub { font-size: 17px; font-weight: 500; color: var(--hv2-body); }
.hv2-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; margin-top: 24px !important; }
.hv2-benefits li { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--hv2-ink); }
.hv2-benefits i, .hv2-truth__icons i { width: 65px; height: 65px; border-radius: 50%; background: var(--hv2-teal-pale); display: grid; place-items: center; }
.hv2-benefits svg { width: 32px; height: 32px; color: var(--hv2-teal); }
@media (min-width: 900px) {
    .hv2-hero__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .hv2-hero { padding: 82px 0 52px; }
}

/* =====================================================================
   AS SEEN IN + TRUST ROW
   ===================================================================== */
.hv2-press { padding: 36px 0; background: var(--hv2-cream) !important; }
.hv2-press__label { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hv2-ink); margin-bottom: 22px !important; }
.hv2-press__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 24px 40px; }
.hv2-press__logos img { height: auto; max-height: 39px; width: auto; max-width: 46%; }
.hv2-trust { padding: 48px 0; }
.hv2-trust__list { margin: 0 auto !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 24px; }
.hv2-trust__list li { flex: 1 1 150px; max-width: 210px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--hv2-ink); }
.hv2-trust__list i { width: 63px; height: 63px; border-radius: 50%; border: 2px solid var(--hv2-teal); display: grid; place-items: center; color: var(--hv2-teal); }
.hv2-trust__list svg { width: 32px; height: 32px; }

/* =====================================================================
   PROOF
   ===================================================================== */
.hv2-proof { padding-top: 60px; }
.hv2-proof__rating { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px !important; }
.hv2-videos { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; }
.hv2-video { position: relative; aspect-ratio: auto; border-radius: 21px; overflow: hidden; background: #111; cursor: pointer; }
.hv2-video::before { content: ""; display: block; padding-top: 62.5926%; pointer-events: none; }
.hv2-video img { width: 100%; height: 100%; object-fit: cover; }
.hv2-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.hv2-video__play { position: absolute; left: 50%; top: 50%; width: 91px; height: 91px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hv2-video__play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-left: 30px solid var(--hv2-teal); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.hv2-video__cap { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: .04em; max-width: 220px; line-height: 1.2; }
.hv2-video.is-playing::after, .hv2-video.is-playing .hv2-video__play, .hv2-video.is-playing .hv2-video__cap { display: none; }
.hv2-video iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; } /* on top of the poster, whatever script added it */
.hv2-reviews { position: relative; }
.hv2-reviews__track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.hv2-reviews__track::-webkit-scrollbar { display: none; }
.hv2-review { flex: 0 0 100%; scroll-snap-align: start; min-height: 404px; padding: 24px 20px 26px; border-radius: 15px; background: var(--hv2-cream-2); display: flex; flex-direction: column; }
.hv2-review__date { font-size: 16px; font-weight: 500; margin-bottom: 16px !important; }
.hv2-review__date::first-letter, .hv2-review__date { color: var(--hv2-body); }
.hv2-review__text { flex: 1; font-size: 16px; line-height: 1.95; font-weight: 500; }
.hv2-review__who { display: flex; align-items: center; gap: 10px; margin-top: 20px !important; font-size: 16px; font-weight: 600; color: var(--hv2-ink); }
.hv2-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--hv2-teal); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.hv2-reviews__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--hv2-ink); font-size: 30px; line-height: 1; box-shadow: 0 6px 18px rgba(20,33,31,.14); cursor: pointer; display: block; }
.hv2-reviews__arrow--prev { left: 4px; }
.hv2-reviews__arrow--next { right: 4px; }
@media (min-width: 1200px) { .hv2-reviews__arrow--prev { left: -22px; } .hv2-reviews__arrow--next { right: -22px; } }
.hv2-explore > * { min-width: 0; }
.hv2-explore { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; margin-top: 30px; padding: 40px 36px; border-radius: 15px; background: var(--hv2-cream-2); }
.hv2-explore__text h3 { font-size: 32px; font-weight: 800; line-height: 1.4; margin-bottom: 14px; }
.hv2-explore__text p { font-size: 18px; line-height: 1.9; font-weight: 500; margin-bottom: 20px !important; }
.hv2-explore__collage { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 170px; }
.hv2-explore__collage img { width: 97px; height: 102px; object-fit: cover; border-radius: 18px; }
.hv2-explore__collage img.c2, .hv2-explore__collage img.c3 { width: 123px; height: 129px; }
.hv2-explore__card { width: 150px; height: 158px; border-radius: 18px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 16px 30px rgba(0,0,0,.12); text-align: center; }
.hv2-explore__card .g { width: 36px; height: auto; }
.hv2-explore__card b { font-size: 18px; color: var(--hv2-ink); }
.hv2-explore__card span { font-size: 13px; font-weight: 500; line-height: 1.3; padding: 0 10px; }
@media (min-width: 768px) {
    .hv2-videos { grid-template-columns: 1fr 1fr; }
    .hv2-review { flex-basis: calc(50% - 15px); }
}
@media (min-width: 1024px) {
    .hv2-review { flex-basis: calc((100% - 60px) / 3); }
    .hv2-explore { grid-template-columns: 1.1fr 1fr; padding: 48px 60px; }
}

/* =====================================================================
   THREE WAYS
   ===================================================================== */
.hv2-ways__grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.hv2-way { position: relative; display: flex; flex-direction: column; padding: 24px 22px 28px; border-radius: 19px; background: #fff; text-align: center; min-height: 515px; }
.hv2-way--featured { border: 2px solid var(--hv2-teal); box-shadow: 0 20px 50px rgba(63,167,194,.22); }
.hv2-way > img { width: 100%; height: 160px; object-fit: cover; border-radius: 11px; margin-bottom: 20px; }
.hv2-tag-green { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); height: 40px; padding: 0 22px; border-radius: 999px; background: var(--hv2-green); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; white-space: nowrap; }
.hv2-way__kicker { font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--hv2-ink); margin-bottom: 10px !important; }
.hv2-way__kicker--teal { color: var(--hv2-teal); font-weight: 600; }
.hv2-way__kicker del { margin-right: 6px; opacity: .6; }
.hv2-way h3 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.hv2-way > p:not(.hv2-way__kicker):not(.hv2-way__rating) { flex: 1; font-size: 16px; line-height: 1.9; font-weight: 500; }
.hv2-way__rating { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; margin: 14px 0 0 !important; }
.hv2-way__rating b { color: var(--hv2-ink); }
.hv2-way .hv2-btn { margin-top: 22px; }
@media (min-width: 900px) { .hv2-ways__grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   SPOTLIGHT
   ===================================================================== */
.hv2-spot__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hv2-spot__grid > * { min-width: 0; }
.hv2-spot__img img { width: 100%; border-radius: 23px; }
.hv2-spot__body .hv2-pill { margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em; }
.hv2-spot__body h2 { margin-bottom: 14px; }
.hv2-spot__body > p:first-of-type { font-size: 16px; line-height: 1.9; font-weight: 500; }
.hv2-spot__body .hv2-way__rating { justify-content: flex-start; margin-bottom: 24px !important; }
@media (min-width: 900px) { .hv2-spot__grid { grid-template-columns: 508px 1fr; gap: 60px; } }

/* =====================================================================
   TOXIC TRUTH
   ===================================================================== */
.hv2-truth { padding: 0; background: var(--hv2-ink) !important; color: #fff; overflow: hidden; }
.hv2-truth__grid { display: grid; grid-template-columns: 1fr; }
.hv2-truth__grid > * { min-width: 0; }
.hv2-truth__body { padding: 72px 0 60px; }
.hv2-truth__body .hv2-pill { margin-bottom: 20px; }
.hv2-truth .hv2-truth__body h2 { color: #fff; margin-bottom: 20px; max-width: 520px; }
.hv2-truth__body > p { font-size: 18px; line-height: 1.75; font-weight: 500; max-width: 510px; color: #fff; }
.hv2-truth__icons { display: flex; flex-wrap: wrap; gap: 28px 40px; margin: 40px 0 44px !important; }
.hv2-truth__icons li { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.hv2-truth__img { position: relative; margin: 0 -20px; }
.hv2-truth__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 900px) {
    .hv2-truth__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .hv2-truth__body { padding: 76px 0; }
    .hv2-truth__img { margin: 0; }
    .hv2-truth__img img { position: absolute; inset: 0; width: calc(100% + (min(100vw, 1440px) - var(--hv2-wrap)) / 2); max-width: none; }
}

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.hv2-ingredients { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 48px; border-bottom: 1px solid var(--hv2-body); }
.hv2-ingredient { display: flex; align-items: flex-start; gap: 24px; }
.hv2-ingredient img { width: 105px; height: 105px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: inset 0 4px 10px rgba(0,0,0,.08); border: 1px solid var(--hv2-teal-soft); }
.hv2-ingredient h3 { font-size: 24px; font-weight: 700; color: var(--hv2-teal); margin-bottom: 10px; }
.hv2-ingredient p { font-size: 18px; line-height: 1.9; font-weight: 500; }
.hv2-steps { display: grid; grid-template-columns: 1fr; gap: 40px 30px; margin-top: 56px !important; text-align: center; }
.hv2-steps li { position: relative; }
.hv2-step__icon { position: relative; width: 100px; height: 100px; margin: 0 auto 26px; border-radius: 50%; background: var(--hv2-cream); border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(20,33,31,.06); }
.hv2-step__icon svg { width: 50px; height: 50px; color: var(--hv2-teal); }
.hv2-step__icon b { position: absolute; right: -4px; top: -2px; width: 33px; height: 33px; border-radius: 50%; background: var(--hv2-ink); border: 2px solid #fff; color: #fff; font-size: 16px; display: grid; place-items: center; }
.hv2-steps h3 { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.hv2-steps p { font-size: 16px; line-height: 1.9; font-weight: 500; }
@media (min-width: 900px) {
    .hv2-ingredients { grid-template-columns: 1fr 1fr; gap: 60px; }
    .hv2-ingredient + .hv2-ingredient { border-left: 1px solid var(--hv2-body); padding-left: 60px; }
    .hv2-steps { grid-template-columns: repeat(4, 1fr); }
    .hv2-steps li:not(:last-child)::after { content: ""; position: absolute; top: 50px; left: calc(50% + 62px); width: calc(100% - 124px); height: 1.5px; background: var(--hv2-body); }
}

/* =====================================================================
   FOUNDER
   ===================================================================== */
.hv2-founder { position: relative; min-height: 592px; padding: 72px 0; background-color: #0C1F30 !important; background-size: cover; background-position: right center; background-repeat: no-repeat; color: #fff; display: flex; align-items: center; }
.hv2-founder::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,22,33,.92) 0%, rgba(10,22,33,.75) 45%, rgba(10,22,33,0) 75%); }
.hv2-founder .hv2-wrap { position: relative; }
.hv2-founder__body { max-width: 475px; }
.hv2-founder__body .hv2-pill { margin-bottom: 22px; }
.hv2-founder .hv2-founder__body h2 { color: #fff; margin-bottom: 12px; }
.hv2-founder__quote { font-size: 18px; font-weight: 600; line-height: 2; color: #fff; }
.hv2-founder hr { width: 65px; height: 2px; margin: 24px 0; border: 0; background: var(--hv2-teal); opacity: 1; }
.hv2-founder__body > p:not(.hv2-founder__quote) { font-size: 16px; line-height: 1.9; font-weight: 500; color: #fff; margin-bottom: 36px !important; }
@media (max-width: 899px) { .hv2-founder::before { background: rgba(10,22,33,.8); } }

/* =====================================================================
   PROTOCOL
   ===================================================================== */
.hv2-protocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.hv2-product { text-align: center; display: flex; flex-direction: column; }
.hv2-product__img { display: block; height: 200px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 20px; }
.hv2-product__img img { max-height: 200px; width: auto; filter: drop-shadow(0 12px 18px rgba(26,64,77,.18)); }
.hv2-product h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.hv2-product__price { font-size: 20px; font-weight: 600; color: var(--hv2-ink); margin-bottom: 14px !important; }
.hv2-product__price del { font-size: 16px; font-weight: 500; color: var(--hv2-body); margin-right: 8px; }
.hv2-product__blurb { flex: 1; font-size: 16px; line-height: 1.5; font-weight: 500; min-height: 48px; margin-bottom: 20px !important; }
@media (min-width: 900px) { .hv2-protocol__grid { grid-template-columns: repeat(4, 1fr); gap: 30px; } }

/* =====================================================================
   BENEFITS STRIP (marquee)
   ===================================================================== */
.hv2-strip { height: 88px; overflow: hidden; background: var(--hv2-teal); color: #fff; display: flex; align-items: center; }
.hv2-strip__track { display: flex; gap: 56px; width: max-content; animation: hv2-marquee 40s linear infinite; }
.hv2-strip span { display: inline-flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 600; white-space: nowrap; }
.hv2-strip i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; }
@keyframes hv2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hv2-strip__track { animation: none; } }

/* =====================================================================
   ARTICLES
   ===================================================================== */
.hv2-articles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.hv2-articles__head .hv2-pill { margin-bottom: 18px; }
.hv2-articles__grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.hv2-article { padding: 16px 16px 28px; border-radius: 19px; background: var(--hv2-cream); min-height: 480px; display: flex; flex-direction: column; }
.hv2-article img { width: 100%; height: 230px; object-fit: cover; border-radius: 12px; margin-bottom: 22px; }
.hv2-article h3 { font-size: 20px; font-weight: 700; line-height: 1.6; margin: 0 10px 12px; }
.hv2-article h3 a:hover { color: var(--hv2-teal); }
.hv2-article p { margin: 0 10px !important; font-size: 16px; line-height: 1.9; font-weight: 500; }
@media (min-width: 900px) { .hv2-articles__grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.hv2-footer { background: var(--hv2-ink); color: #fff; padding: 80px 0 48px; }
.hv2-footer a { color: #fff; text-decoration: none; }
.hv2-footer a:hover { color: var(--hv2-teal); }
.hv2-footer h2, .hv2-footer h3, .hv2-footer p, .hv2-footer ul { margin: 0; padding: 0; color: #fff; }
.hv2-footer ul { list-style: none; }
.hv2-footer__connect { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.hv2-footer__connect h2 { font-size: 36px; font-weight: 800; margin-bottom: 16px; }
.hv2-footer__connect > p { font-size: 17px; line-height: 1.65; font-weight: 500; margin-bottom: 24px; }
.hv2-newsletter__row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hv2-newsletter__input { flex: 1 1 200px; min-width: 0; height: 56px; padding: 0 20px; border-radius: 8px; border: 1.5px solid #fff; background: transparent; color: #fff; font-size: 16px; font-family: var(--hv2-font); font-weight: 500; }
.hv2-newsletter__input::placeholder { color: rgba(255,255,255,.85); }
.hv2-newsletter__input:focus { outline: none; border-color: var(--hv2-teal); }
.hv2-newsletter__btn { flex: 0 0 180px; height: 56px; border: 0; border-radius: 8px; background: var(--hv2-teal); color: #fff; font-size: 16px; font-weight: 700; font-family: var(--hv2-font); cursor: pointer; }
.hv2-newsletter__btn:hover { background: var(--hv2-teal-deep); }
.hv2-newsletter__captcha { display: flex; justify-content: center; margin: 16px 0 0; }
.hv2-newsletter__captcha:empty { margin: 0; }
/* Disclaimer: always open, a bordered teal-edged card on the ink footer (Paul, 18 Oct 2026). White 15px text on
   #383838 is 10.7:1, the pale-teal label 9.6:1; the teal lives in the border, the bar and the icon only. */
.hv2-footer__disclaimer { max-width: 940px; margin: 0 auto 64px; padding: 22px 26px 24px; border: 1px solid rgba(63, 167, 194, .55); border-left: 4px solid var(--hv2-teal); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.hv2-footer__disclaimer-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.hv2-footer__disclaimer-head svg { flex: none; width: 22px; height: 22px; color: var(--hv2-teal); }
.hv2-footer__disclaimer-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hv2-teal-pale); }
.hv2-footer__disclaimer p { margin: 0; padding: 0; font-size: 15px; line-height: 1.65; font-weight: 500; color: #fff; text-align: left; }
.hv2-footer__logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 56px; font-size: 26px; font-weight: 600; letter-spacing: .01em; }
.hv2-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-bottom: 64px; }
.hv2-footer__col h3 { font-size: 20px; font-weight: 700; margin-bottom: 22px; }
.hv2-footer__col li { margin-bottom: 18px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.hv2-footer__social a { display: inline-flex; align-items: center; gap: 10px; }
.hv2-footer__social i { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--hv2-ink); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; flex: none; }
.hv2-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; padding-top: 25px; border-top: 1px solid #fff; }
.hv2-footer__copy { font-size: 14px; font-weight: 500; }
.hv2-footer__trust { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 20px; white-space: nowrap; border: 1px solid #fff; border-radius: 999px; font-size: 13px; font-weight: 600; }
.hv2-footer__trust b { color: var(--hv2-teal); }
.hv2-footer__right { display: flex; align-items: center; gap: 18px; }
.hv2-footer__cookies { font-size: 14px; font-weight: 500; }
.hv2-footer__cards { height: 25px; width: auto; }
.hv2-footer .footer-language-switcher .language-toggle { border-color: rgba(255,255,255,.35); font-family: var(--hv2-font); font-size: 14px; }
@media (min-width: 900px) { .hv2-footer__cols { grid-template-columns: repeat(5, 1fr); gap: 30px; } }
@media (max-width: 599px) { .hv2-footer__bottom { justify-content: center; text-align: center; } .hv2-footer__right { flex-wrap: wrap; justify-content: center; } }

/* ---------- newsletter popup ---------- */
.np2 { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--hv2-font); }
.np2[hidden] { display: none; }
.np2__backdrop { position: absolute; inset: 0; background: rgba(12,38,46,.62); }
.np2__card { position: relative; display: grid; grid-template-columns: minmax(0, 533px) 418px; width: min(951px, 100%); max-height: calc(100vh - 40px); background: #fff; border: 2px solid var(--hv2-teal); border-radius: 30px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.np2__close { position: absolute; top: 13px; right: 13px; z-index: 3; width: 41px; height: 41px; border: 0; border-radius: 50%; background: #D55858; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.np2__close:hover { background: #C24A4A; }
.np2__body { padding: 44px 68px 40px; text-align: center; overflow-y: auto; }
.np2__logo { display: block; margin: 0 auto 10px; width: 60px; height: auto; }
.np2__body h2 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 40px); line-height: 1.22; font-weight: 700; color: var(--hv2-ink); font-family: var(--hv2-font); }
.np2__sub { margin: 0 0 18px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--hv2-body); }
.np2__benefits { display: flex; justify-content: center; gap: 14px; margin: 0 0 22px !important; padding: 0; list-style: none; }
.np2__benefits li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--hv2-ink); line-height: 1.2; }
.np2__benefits li i { width: 65px; height: 65px; border-radius: 50%; background: var(--hv2-teal-pale); color: var(--hv2-teal); display: grid; place-items: center; }
.np2__benefits li i svg { width: 30px; height: 30px; }
.np2__form { max-width: 404px; margin: 0 auto; }
.np2__field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border: 1px solid #DFDFDF; border-radius: 9px; background: #fff; color: var(--hv2-body); margin-bottom: 12px; }
.np2__field:focus-within { border-color: var(--hv2-teal); }
.np2__field input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--hv2-ink); background: transparent; }
.np2__captcha { display: flex; justify-content: center; margin-bottom: 12px; min-height: 0; }
.np2__captcha:empty { display: none; }
.np2__msg { margin: 0 0 10px; font-size: 13px; color: #c0392b; }
.np2__btn.hv2-btn { height: 47px; line-height: 47px; border-radius: 8px; font-size: 16px; padding: 0 20px; width: 100%; }
.np2__consent { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--hv2-body); }
.np2__media { position: relative; min-height: 100%; }
.np2__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.np2-open { overflow: hidden; }
@media (max-width: 899px) {
    .np2__card { grid-template-columns: 1fr; max-width: 520px; }
    .np2__media { display: none; }
    .np2__body { padding: 40px 24px 28px; }
    .np2__benefits { gap: 8px; }
    .np2__benefits li { width: 76px; font-size: 10px; }
    .np2__benefits li i { width: 52px; height: 52px; }
    .np2__benefits li i svg { width: 24px; height: 24px; }
}

/* ---------- Oct 2026: match Steven's Homepage (Desktop) frame: announcement bar, plain cart link, Subscribe & Save ---------- */
.hv2-announce { position: relative; background: var(--hv2-teal); color: #fff; font-family: var(--hv2-font); }
.hv2-announce[hidden] { display: none; }
.hv2-announce p { margin: 0; min-height: 51px; padding: 12px 56px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; color: #fff; }
.hv2-announce p b { font-weight: 800; letter-spacing: .02em; }
.hv2-announce a { color: #fff !important; text-decoration: underline; font-weight: 600; }
.hv2-announce svg { flex: none; }
.hv2-announce__close { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.hv2-cart { height: 44px; padding: 0 6px; border-radius: 0; background: transparent !important; color: var(--hv2-ink) !important; font-weight: 500; }
.hv2-cart:hover { background: transparent !important; color: var(--hv2-teal) !important; }
.hv2-cart__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--hv2-teal); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.hv2-options { display: grid; gap: 12px; }
.hv2-option { cursor: pointer; }
.hv2-option__input { position: absolute; opacity: 0; pointer-events: none; }
.hv2-option--sub { display: block; height: auto; padding: 0; overflow: hidden; }
.hv2-option--sub.is-selected { background: var(--hv2-teal-wash); box-shadow: 0 6px 18px rgba(63, 167, 194, .18); }
.hv2-option__banner { display: block; background: var(--hv2-green); color: #fff; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; line-height: 25px; }
.hv2-option__body { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.hv2-option__text { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hv2-option__text .hv2-option__title { flex: none; }
.hv2-option__chip { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 10px; background: var(--hv2-green-pale); color: var(--hv2-green-deep); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; vertical-align: 2px; }
.hv2-option__note { font-size: 13px; font-weight: 500; color: var(--hv2-muted); }
.hv2-option__price--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 18px; }
.hv2-option__price--stack del { margin: 0; font-size: 13px; }
.hv2-option.is-selected .hv2-option__radio { border-color: var(--hv2-teal); }
.hv2-option:not(.is-selected) .hv2-option__radio::after { content: none; }
.hv2-option:focus-within { outline: 2px solid var(--hv2-teal); outline-offset: 2px; }
@media (max-width: 599px) {
    .hv2-announce p { font-size: 13px; padding: 10px 44px; }
    .hv2-cart > span:not(.hv2-cart__count) { display: none; }
    .hv2-option__body { padding: 14px; gap: 10px; }
}

/* Oct 2026 (Ollie): on very wide screens nothing grows past Steven's 1440px frame.
   The toxic-truth photo stops at the frame edge (above) and the founder banner keeps its frame size. */
@media (min-width: 1441px) {
    section.hv2-founder { background-size: 1440px auto; background-position: center center; }
    .hv2-founder::before { background: linear-gradient(90deg, rgba(10,22,33,.92) 0, rgba(10,22,33,.92) calc(50% - 720px), rgba(10,22,33,.75) calc(50% - 72px), rgba(10,22,33,0) calc(50% + 360px)); }
}

/* Oct 2026 (Ollie): toxic-truth band exactly as Steven's frame: 731px tall, photo flush top and bottom,
   photo column starts 778px into the 1440px frame and ends at the frame edge, three-line heading. */
section.hv2-truth { padding: 0; }
.hv2-truth .hv2-truth__body h2 span { display: block; }
@media (min-width: 900px) {
    section.hv2-truth { min-height: 731px; }
    .hv2-truth__grid { grid-template-columns: minmax(0, 573px) minmax(0, 1fr); gap: 40px; min-height: 731px; }
    .hv2-truth__body { padding: 75px 0 77px; }
    .hv2-truth .hv2-truth__body h2 { max-width: 512px; }
}

/* The generic section rule (background: #fff) outranks .hv2-founder, so the photo was tiling at its natural
   size (twice across a very wide screen). Same settings, stronger selector. */
section.hv2-founder { background-size: cover; background-position: right center; background-repeat: no-repeat; }
@media (min-width: 1441px) { section.hv2-founder { background-size: 1440px auto; background-position: center center; } }

/* Oct 2026 (Ollie: "everything must look like the Figma"): the generic section rule
   (section[class^="hv2-"] { padding: 88px 0 }) outranked every section's own spacing, so all
   sections were taller than Steven's frame. Same values, selectors that win. */
section.hv2-hero { padding: 72px 0 60px; }
section.hv2-press { padding: 36px 0; }
section.hv2-trust { padding: 48px 0; }
section.hv2-proof { padding-top: 60px; }
section.hv2-founder { padding: 72px 0; }
@media (min-width: 900px) { section.hv2-hero { padding: 82px 0 52px; } }

/* ---------- Second pass against Steven's Homepage (Desktop) frame (12 Oct) ---------- */
/* Hero: text pinned 82px from the top of the hero (not centred against the bottle column). */
@media (min-width: 900px) {
    section.hv2-hero { padding: 52px 0 52px; }
    .hv2-hero__grid { align-items: start; }
    .hv2-hero__left { padding-top: 30px; }
}
.hv2-hero .hv2-pill--white { font-size: 16px; }
.hv2-benefits li { font-size: 14px; }
/* Proof -> three ways spacing */
section.hv2-proof { padding-bottom: 70px; }
/* Toxic truth: icons sit right under the paragraph, 44px above the button */
.hv2-truth .hv2-truth__icons { margin: 0 0 44px !important; }
/* How it works: narrower step columns as drawn, more room above the button */
@media (min-width: 900px) {
    .hv2-steps h3, .hv2-steps p { max-width: 215px; margin-left: auto; margin-right: auto; }
}
.hv2-how .hv2-steps + .hv2-center { margin-top: 64px !important; }
section.hv2-how { padding-bottom: 85px; }
/* Founder quote size */
.hv2-founder__quote { font-size: 18px; }
/* Footer: Steven's single email field; the reCAPTCHA box appears once someone uses the form */
.hv2-newsletter__row { max-width: 564px; margin: 0 auto; flex-wrap: nowrap; }
.hv2-newsletter__btn { flex: 0 0 140px; }
.hv2-newsletter__captcha { max-height: 0; overflow: hidden; margin: 0 !important; transition: max-height .25s ease; }
.hv2-newsletter.is-engaged .hv2-newsletter__captcha { max-height: 120px; margin-top: 16px !important; }
.hv2-footer__logo { margin-bottom: 56px; }
.hv2-footer__logo img { height: 48px; width: auto; display: block; }
@media (min-width: 1100px) {
    .hv2-footer > .hv2-wrap { max-width: 1440px; padding: 0 80px; }
    .hv2-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 599px) {
    .hv2-newsletter__row { flex-wrap: wrap; }
    .hv2-newsletter__btn { flex: 1 1 100%; }
}

/* fine spacing to the frame: trust row -> proof pill 72px; How It Works heading gap; footer columns -> bottom row */
section.hv2-trust { padding: 47px 0 24px; }
section.hv2-proof { padding-top: 48px; }
.hv2-how .hv2-head { margin-bottom: 69px; }
.hv2-footer__cols { margin-bottom: 30px; }

.hv2-footer__trust { flex: none; }

/* phones: Steven's mobile header = one-line sale bar, logo, Cart (with label + bubble), menu; log-in lives in the menu */
.hv2-announce__short { display: none; }
@media (max-width: 599px) {
    .hv2-announce p { min-height: 40px; padding: 9px 44px; font-size: 14px; flex-wrap: nowrap; }
    .hv2-announce__long { display: none; }
    .hv2-announce__short { display: inline; color: #fff !important; text-decoration: none !important; font-weight: 500; }
    .hv2-header .hv2-login { display: none; }
    .hv2-cart > span:not(.hv2-cart__count) { display: inline; font-size: 15px; }
}

@media (max-width: 420px) { .hv2-announce p { font-size: 13px; padding: 9px 34px; gap: 6px; } .hv2-announce p svg { width: 16px; height: 16px; } .hv2-announce__close { right: 6px; } }
/* review cards (Home + product frames): 18px / 35px copy in #4C4C4C */
.hv2-review .hv2-review__text { font-size: 18px; line-height: 35px; color: #4C4C4C; }
/* proof rating: stars + one line of text, never split (phones) */
.hv2-proof__rating { flex-wrap: wrap; color: #383838; }
.hv2-proof__rating > span { white-space: nowrap; color: #383838; }
/* current page in the main menu (Steven: teal, SemiBold) */
.hv2-nav .hv2-nav__link.is-current { color: #3FA7C2; font-weight: 600; }

/* ===== Account menu to Steven's 'Account Menu Open' frame (13 Oct 2026) ===== */
.hv2-mega.hv2-mega--account { width: 300px; min-width: 300px; padding: 0 0 8px; border-radius: 8px; overflow: hidden; }
.hv2-acct__who { padding: 16px 18px 14px; border-bottom: 1px solid #E6E6E6; }
.hv2-acct__who small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: #737373; }
.hv2-acct__who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #383838; }
.hv2-acct__group { margin: 0 !important; padding: 11px 18px 4px; border-top: 1px solid #E6E6E6; font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8C8C8C; }
.hv2-acct__who + .hv2-acct__group { border-top: 0; }
.hv2-mega--account ul { padding: 0 !important; }
.hv2-mega--account li a, .hv2-mega--account li.hv2-ref { min-height: 40px; padding: 0 18px !important; gap: 12px !important; border-radius: 0 !important; font-size: 16px !important; font-weight: 500 !important; color: #383838 !important; }
.hv2-mega--account li a svg, .hv2-mega--account li.hv2-ref svg { flex: none; color: #4C4C4C; }
.hv2-mega--account li a:hover svg { color: var(--hv2-teal); }
.hv2-mega--account li.hv2-ref { justify-content: space-between; min-height: 47px; }
.hv2-ref__label { display: inline-flex; align-items: center; gap: 12px; }
.hv2-ref__pill { display: inline-flex; align-items: center; height: 27px; padding: 0 14px; border: 1px solid var(--hv2-teal); border-radius: 999px; background: #EDF7FA; font-size: 12px; font-weight: 600; color: var(--hv2-teal); }
.hv2-mega--account li a.hv2-acct__out { color: #737373 !important; }
.hv2-mobile__account .hv2-acc--account { flex: 1 1 100%; }
.hv2-mobile__account .hv2-acc--account summary { color: var(--hv2-teal); }
.hv2-mobile__account .hv2-acc--account a { display: block; flex: none; padding: 12px 4px; border-radius: 0; background: none; text-align: left; font-weight: 500; color: #383838; }
.hv2-mobile__account .hv2-acc--account .hv2-acct__group { padding: 12px 4px 2px; border-top: 0; }
.hv2-mega--account li.referalBlock.hv2-ref { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
/* Steven: 15px inside each end of the trust badge (the general .hv2-footer p { padding: 0 } rule was winning) */
.hv2-footer p.hv2-footer__trust { padding: 0 15px; gap: 8px; }

/* Footer "Stay Connected": 28px in all 39 of Steven's phone frames (was 36) */
@media (max-width: 899px) { .hv2-footer .hv2-footer__connect h2 { font-size: 28px !important; line-height: 34px !important; } }

/* =====================================================================
   Footer to Steven's Footer (Mobile) frame, 13 Oct 2026. Desktop unchanged.
   ===================================================================== */
.hv2-footer__acc { all: unset; display: inline; cursor: default; }
.hv2-footer__acc i { display: none; }
.hv2-footer__mail-addr { display: none; }
@media (max-width: 899px) {
    .hv2-footer { padding: 56px 0 40px; }
    .hv2-footer > .hv2-wrap { padding-left: 20px; padding-right: 20px; }
    .hv2-footer__connect { margin-bottom: 40px; }
    .hv2-footer__connect h2 { margin-bottom: 14px; }
    .hv2-footer__connect > p { font-size: 15px; line-height: 24px; margin-bottom: 14px; }
    .hv2-footer .hv2-newsletter__row { flex-direction: column; gap: 12px; }
    .hv2-footer .hv2-newsletter__input, .hv2-footer .hv2-newsletter__btn { flex: 0 0 52px; width: 100%; height: 52px; font-size: 15px; }
    .hv2-footer .hv2-newsletter__btn { font-size: 16px; }
    .hv2-footer__disclaimer { margin-bottom: 40px; padding: 18px 18px 20px; border-radius: 10px; }
    .hv2-footer__disclaimer p { font-size: 14px; line-height: 1.6; }
    .hv2-footer__logo { margin-bottom: 32px; }
    .hv2-footer__logo img { height: 38px; }
    /* link lists: 63px rows, + / − in teal, Shop open */
    .hv2-footer__cols { display: block; margin-bottom: 0; }
    .hv2-footer__col--links h3 { margin: 0; }
    .hv2-footer__acc { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 63px; cursor: pointer; font-size: 18px; font-weight: 700; color: #fff; }
    .hv2-footer__acc i { display: block; font-style: normal; font-size: 22px; font-weight: 600; color: var(--hv2-teal); }
    .hv2-footer__acc i::before { content: "+"; }
    .hv2-footer__col.is-open .hv2-footer__acc i::before { content: "\2212"; }
    .hv2-footer__acc:focus-visible { outline: 2px solid var(--hv2-teal); outline-offset: 2px; }
    .hv2-footer__col--links ul { display: none; padding-bottom: 6px; }
    .hv2-footer__col--links.is-open ul { display: block; }
    .hv2-footer__col--links li { margin: 0 0 14px; font-size: 15px; line-height: 18px; }
    /* Follow Us: centred, round icons, the help@ address under them */
    .hv2-footer__col--follow { padding-top: 0; text-align: center; }
    .hv2-footer__col--follow h3 { font-size: 18px; line-height: 22px; margin: 0 0 16px; }
    .hv2-footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .hv2-footer__social li { margin: 0; }
    .hv2-footer__social a { font-size: 0; gap: 0; }
    .hv2-footer__social i { width: 37px; height: 37px; font-size: 15px; }
    .hv2-footer__social i svg { width: 15px; height: 15px; }
    .hv2-footer__social li.hv2-footer__mail { flex: 0 0 100%; margin-top: 16px; }
    .hv2-footer__social .hv2-footer__mail i, .hv2-footer__social .hv2-footer__mail-label { display: none; }
    .hv2-footer__social .hv2-footer__mail-addr { display: inline; font-size: 15px; font-weight: 600; color: var(--hv2-teal); }
    /* bottom: divider, trust badge, cards, language, copyright */
    .hv2-footer__bottom { flex-direction: column; justify-content: flex-start; gap: 16px; margin-top: 30px; padding-top: 16px; text-align: center; }
    .hv2-footer__trust { order: 1; }
    .hv2-footer__right { order: 2; flex-direction: column; gap: 16px; }
    .hv2-footer__right .hv2-footer__cards { order: 1; }
    .hv2-footer__right .footer-language-switcher, .hv2-footer__right > :not(.hv2-footer__cards):not(.hv2-footer__cookies) { order: 2; }
    .hv2-footer__right .hv2-footer__cookies { order: 3; font-size: 13px; }
    .hv2-footer__copy { order: 3; max-width: 290px; font-size: 13px; line-height: 20px; }
}
@media (max-width: 899px) { .hv2-footer__col--follow { margin-top: 32px; } }

/* old style.css gives <main> min-height:100vh, which leaves an empty band above the footer on short pages
   (Log In, Forgot / Reset Password, 404 on a phone). Steven's frames put the footer straight after the content. */
main { min-height: 0 !important; }

/* =====================================================================
   Home on phones = Steven's Homepage (Mobile) frame, 13 Oct 2026 deep check
   ===================================================================== */
@media (max-width: 899px) {
    /* hero: title, then the bottle with two benefits each side, then the buy box */
    section.hv2-hero { padding: 40px 0 48px; }
    .hv2-hero__grid { display: flex; flex-direction: column; gap: 0; }
    .hv2-hero__left { display: contents; }
    .hv2-hero__left > .hv2-pill { order: 1; align-self: center; max-width: 100%; white-space: nowrap; font-size: clamp(11px, 3.2vw, 15px) !important; letter-spacing: 0; padding: 0 14px; height: 35px; margin-bottom: 14px; }
    .hv2-hero__sold { order: 2; justify-content: center; margin: 0 0 22px !important; }
    .hv2-hero h1 { order: 3; font-size: 44px; line-height: 52px; margin-bottom: 10px; text-align: center; }
    .hv2-hero__sub { order: 4; font-size: 18px; line-height: 28px; margin-bottom: 20px !important; text-align: center; }
    .hv2-hero__right { order: 5; display: grid; grid-template-columns: 1fr 110px 1fr; grid-template-rows: auto auto; align-items: start; column-gap: 8px; margin: 0 0 20px; }
    .hv2-hero__stage { grid-column: 2; grid-row: 1 / span 2; height: 300px; }
    .hv2-hero .hv2-hero__stage img { height: 290px !important; }
    .hv2-hero__shadow { width: 110px; height: 16px; }
    .hv2-hero__right .hv2-benefits { display: contents; }
    .hv2-hero__right .hv2-benefits li { margin: 48px 0 0; }
    .hv2-hero__right .hv2-benefits li:nth-child(1) { grid-column: 1; grid-row: 1; }
    .hv2-hero__right .hv2-benefits li:nth-child(2) { grid-column: 3; grid-row: 1; }
    .hv2-hero__right .hv2-benefits li:nth-child(3) { grid-column: 1; grid-row: 2; margin-top: 48px; }
    .hv2-hero__right .hv2-benefits li:nth-child(4) { grid-column: 3; grid-row: 2; margin-top: 48px; }
    .hv2-hero__right .hv2-rating { grid-column: 1 / -1; grid-row: 3; margin: 20px auto 0; }
    .hv2-member { order: 6; text-align: center; }
    .hv2-hero__left > .hv2-buy { order: 7; }

    /* How it works: ingredients stacked and centred, four tall steps joined by short lines */
    .hv2-how .hv2-head p { font-size: 18px; line-height: 35px; }
    .hv2-ingredients { gap: 28px; padding-bottom: 0; border-bottom: 0; }
    .hv2-ingredient { flex-direction: column; align-items: center; text-align: center; gap: 27px; }
    .hv2-ingredient h3 { font-size: 24px; line-height: 22px; margin-bottom: 13px; }
    .hv2-ingredient p { font-size: 18px; line-height: 35px; }
    .hv2-steps { gap: 110px; margin-top: 123px !important; }
    .hv2-step__icon { margin-bottom: 18px; }
    .hv2-steps h3 { line-height: 35px; margin-bottom: 13px; }
    .hv2-steps p { line-height: 31px; }
    .hv2-steps li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -86px; width: 1.5px; height: 62px; background: var(--hv2-body); }

    /* founder: his portrait with the name over it, fading into a dark panel with the quote */
    section.hv2-founder { padding: 26px 0 64px; background: linear-gradient(180deg, rgba(10,18,40,0) 0, rgba(10,18,40,0) 40%, rgba(10,18,40,.94) 58%, rgba(10,18,40,.97) 100%), url("../../img/home-v2/dr-robert-young-portrait.jpg") top center / 100% auto no-repeat, #0B1630 !important; }
    .hv2-founder::before { display: none; }
    .hv2-founder__body { max-width: none; }
    .hv2-founder__body .hv2-pill { margin-bottom: 19px; max-width: 100%; white-space: nowrap; font-size: clamp(10px, 2.9vw, 14px) !important; letter-spacing: 0 !important; padding-left: 14px; padding-right: 14px; }
    .hv2-founder .hv2-founder__body h2 { font-size: 32px; line-height: 55px; text-align: center; }
    .hv2-founder__quote { margin-top: calc(141vw - 140px) !important; font-size: 18px; line-height: 37px; text-align: center; }
    .hv2-founder hr { margin: 25px auto; }
    .hv2-founder__body > p:not(.hv2-founder__quote) { text-align: center; line-height: 31px; margin-bottom: 46px !important; }
    .hv2-founder__body .hv2-btn { display: flex; width: 100%; justify-content: center; }

    /* protocol: one product per row, as drawn */
    .hv2-protocol__grid { grid-template-columns: minmax(0, 237px); justify-content: center; gap: 53px; }

    /* articles: one card at a time, swipe for the next */
    .hv2-articles__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
    .hv2-articles__grid::-webkit-scrollbar { display: none; }
    .hv2-article { flex: 0 0 min(350px, calc(100% - 20px)); scroll-snap-align: center; }
}
@media (max-width: 899px) { .hv2-articles__head { flex-direction: column; align-items: center; text-align: center; } .hv2-articles__head h2 { font-size: 32px; line-height: 47px; } }
/* Home desktop: hero intro + founder quote 18px as drawn (a generic p rule had them at 16px) */
section.hv2-hero .hv2-hero__sub, section.hv2-founder .hv2-founder__quote { font-size: 18px !important; }

/* 15 Oct 2026 phone check: the footer trust pill and the "Three ways" rating line stay inside their boxes on small phones */
@media (max-width: 480px) {
    .hv2-footer p.hv2-footer__trust { max-width: 100%; height: auto; min-height: 34px; padding: 6px 12px; font-size: 12px; letter-spacing: 0; white-space: normal; text-align: center; justify-content: center; }
    .hv2-way__rating { gap: 6px; font-size: 13px; white-space: nowrap; }
}
/* 15 Oct 2026 iPad check: below 900px the three cards stack; keep them a readable card width, centred,
   with no stretched photos or empty space inside (the 515px desktop min-height only applies side by side) */
@media (max-width: 899px) {
    .hv2-ways__grid { max-width: 480px; margin-left: auto; margin-right: auto; }
    .hv2-way { min-height: 0; }
    .hv2-way > p:not(.hv2-way__kicker):not(.hv2-way__rating) { flex: none; }
    .hv2-way > img { height: auto; aspect-ratio: 305 / 160; }
}
/* the rating line never breaks inside "2,400+ verified reviews": when tight, the review count moves whole to its own centred line */
.hv2-way__rating { flex-wrap: wrap; white-space: nowrap; row-gap: 2px; }
.hv2-ways .hv2-way p.hv2-way__rating { gap: 6px; font-size: 13.5px !important; line-height: 1.4; }
.hv2-ways .hv2-way__rating .hv2-stars { zoom: .86; }

/* very narrow phones (320-359, e.g. the first iPhone SE): the "Three ways" cards fit the screen */
@media (max-width: 359px) {
    .hv2-ways .hv2-way { min-width: 0; padding-left: 16px; padding-right: 16px; }
    .hv2-ways .hv2-way .hv2-btn { white-space: normal; text-align: center; padding-left: 12px; padding-right: 12px; }
}

/* very narrow phones (320-359): the long "See what is being done to..." button in the dark section wraps inside the screen */
@media (max-width: 359px) {
    .hv2-truth .hv2-truth__body .hv2-btn { max-width: 100%; height: auto; min-height: 50px; padding: 12px 18px; line-height: 1.35; white-space: normal; text-align: center; }
}

/* reviews carousel on phones/iPads: the arrows sat on top of the review text; they now sit under the cards, centred */
@media (max-width: 1199px) {
    .hv2-reviews { padding-bottom: 64px; }
    /* both placed from the left with a 24px gap, Safari's own button look switched off and the size locked: on Ollie's
       iPad the two circles overlapped (17 Oct 2026) */
    .hv2-reviews__arrow { top: auto; bottom: 0; transform: none; -webkit-appearance: none; appearance: none; padding: 0; margin: 0; box-sizing: border-box; width: 44px !important; min-width: 44px; max-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
    .hv2-reviews__arrow--prev { left: calc(50% - 56px); right: auto; }
    .hv2-reviews__arrow--next { left: calc(50% + 12px); right: auto; }
}

/* ---------------------------------------------------------------------------------------------------------
   Robust picture boxes (17 Oct 2026, after Ollie's iPad check). The boxes below used to get their height from
   aspect-ratio while the picture inside filled them; on the iPad that let pictures spill over the next text.
   Each now gets an invisible spacer (its ::before, or ::after where ::before was taken, padding-top = the
   same shape, set right after its own rules above) and the picture sits on top of it. Same idea as the fix
   confirmed on Ollie's iPad on /sarah.
   --------------------------------------------------------------------------------------------------------- */
.hv2-video > img,
.hv2-video > picture,
.hv2-video > video,
.hv2-video > iframe {
    position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; max-width: none; }
.hv2-video > picture > img { width: 100%; height: 100%; }

/* iPad fixes (17 Oct 2026, from Ollie's iPad photos) */
@media (min-width: 600px) and (max-width: 899px) {
    /* how-it-works steps: two by two instead of one tall column with big gaps */
    .hv2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 48px 30px !important; margin-top: 56px !important; }
    .hv2-steps li:not(:last-child)::after { display: none !important; }
    .hv2-steps p { max-width: 300px; margin-left: auto; margin-right: auto; }
    /* trust badges: all five on one row instead of four plus one */
    .hv2-trust__list { flex-wrap: nowrap; gap: 14px; }
    .hv2-trust__list li { flex: 1 1 0; min-width: 0; max-width: none; font-size: 15px; }
    /* Dr. Young: the computer layout (copy left, his photo right) instead of the phone portrait stretched to the full
       width (it made his photo ~1100px tall) */
    section.hv2-founder { padding: 64px 0 !important; min-height: 560px; background: url("../../img/home-v2/dr-robert-young.jpg") 56% center / cover no-repeat, #0C1F30 !important; }
    .hv2-founder::before { display: block !important; background: linear-gradient(90deg, rgba(10,22,33,.94) 0, rgba(10,22,33,.86) 40%, rgba(10,22,33,0) 66%) !important; }
    .hv2-founder__body { max-width: 380px; }
    .hv2-founder .hv2-founder__body h2 { text-align: left; font-size: 32px; line-height: 1.3; }
    .hv2-founder__quote { margin-top: 0 !important; text-align: left; line-height: 1.8 !important; }
    .hv2-founder hr { margin: 22px 0; }
    .hv2-founder__body > p:not(.hv2-founder__quote) { text-align: left; line-height: 1.8; margin-bottom: 32px !important; }
    .hv2-founder__body .hv2-btn { display: inline-flex; width: auto; }
    .hv2-founder__body .hv2-pill { max-width: none; font-size: 12px !important; letter-spacing: .03em !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
    section.hv2-founder { background-position: 42% center !important; }
    .hv2-founder__body { max-width: 330px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
    /* toxic-truth photo: reach the right edge of the screen (the page column is narrower than 1110px here) */
    .hv2-truth__img img { width: calc(100% + (100vw - min(100vw, var(--hv2-wrap))) / 2 + 20px); }
}