/** Shopify CDN: Minification failed

Line 11248:17 Expected identifier but found whitespace
Line 11248:19 Unexpected "{"
Line 11248:28 Expected ":"
Line 11249:17 Expected identifier but found whitespace
Line 11249:19 Unexpected "{"
Line 11249:28 Expected ":"
Line 11250:21 Expected identifier but found whitespace
Line 11250:23 Unexpected "{"
Line 11250:32 Expected ":"
Line 11251:27 Expected identifier but found whitespace
... and 7 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.cerr {
    padding: var(--cerr-pt, 64px) var(--page-margin, 1.5rem) var(--cerr-pb, 64px);
    /* Fill the space under the sticky header without overlapping it. */
    min-height: calc(100svh - var(--header-height, 6rem));
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cerr-bg, color-mix(in srgb, var(--color-foreground) 4%, var(--color-background)));
    color: var(--cerr-text, var(--color-foreground));
    overflow: hidden;
  }

  .cerr__inner {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 2rem);
  }
  .cerr--center .cerr__inner { align-items: center; text-align: center; }
  .cerr--left   .cerr__inner { align-items: flex-start; text-align: left; }

  /* ── Giant 404 ── */
  .cerr__numwrap { position: relative; line-height: 0.85; width: 100%; }
  .cerr--center .cerr__numwrap { text-align: center; }
  .cerr__num {
    display: inline-block;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 800;
    font-size: clamp(6rem, 4rem + 22vw, 16rem);
    letter-spacing: -0.04em;
    line-height: 0.82;
    background: linear-gradient(155deg, var(--cerr-num-from, #0047ab), var(--cerr-num-to, #1a1c23));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Soft brand glow behind the numerals. */
    filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--cerr-num-from, #0047ab) 22%, transparent));
    animation: cerr-float 6s ease-in-out infinite;
  }
  @keyframes cerr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* ECG / heartbeat divider under the numerals. */
  .cerr__pulse {
    display: block;
    width: min(100%, 26rem);
    height: 2.25rem;
    margin: -0.25rem auto 0;
  }
  .cerr--left .cerr__pulse { margin-left: 0; }
  .cerr__pulse-path {
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: cerr-draw 2.4s ease-out 0.2s forwards;
  }
  @keyframes cerr-draw { to { stroke-dashoffset: 0; } }

  .cerr__box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }
  .cerr--center .cerr__box { align-items: center; }
  .cerr--left   .cerr__box { align-items: flex-start; }

  .cerr__eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0.4em 0.8em;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 2px;
    background: var(--cerr-eyebrow-bg, #0047ab);
    color: var(--cerr-eyebrow-color, #fff);
  }

  .cerr__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
    color: inherit;
  }
  .cerr__title em, .cerr__title i { font-style: italic; }

  .cerr__subtitle {
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 78%, transparent);
  }
  .cerr__subtitle :is(p) { margin: 0 0 0.5rem; }
  .cerr__subtitle :is(p):last-child { margin-bottom: 0; }

  /* ── Search ── */
  .cerr__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 30rem;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.16));
    border-radius: 999px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .cerr__search:focus-within {
    border-color: var(--cerr-accent, #0047ab);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cerr-accent, #0047ab) 20%, transparent);
  }
  .cerr__search-icon {
    flex: 0 0 auto; width: 1.2rem; height: 1.2rem;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }
  .cerr__search-icon svg { width: 100%; height: 100%; }
  .cerr__search-input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; color: inherit;
    font: inherit; font-size: 1rem; min-height: 40px;
  }
  .cerr__search-input:focus { outline: none; }
  .cerr__search-btn {
    flex: 0 0 auto;
    appearance: none; border: 0; cursor: pointer;
    padding: 0 1.1rem; min-height: 40px;
    border-radius: 999px;
    background: var(--cerr-accent, #0047ab); color: #fff;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.9rem; font-weight: 600;
    transition: opacity 150ms ease;
  }
  .cerr__search-btn:hover { opacity: 0.92; }
  .cerr__search-btn:focus-visible { outline: 2px solid var(--cerr-accent, #0047ab); outline-offset: 2px; }

  /* ── Actions ── */
  .cerr__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
  .cerr--center .cerr__actions { justify-content: center; }
  .cerr__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.5rem; min-height: 48px;
    border-radius: var(--style-border-radius-inputs, 4px);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 1rem; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease, color 150ms ease;
  }
  .cerr__btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
  .cerr__btn--primary {
    background: var(--btn-bg, #0047ab); color: var(--btn-fg, #fff);
    border: 1px solid var(--btn-bg, #0047ab);
  }
  .cerr__btn--primary:hover { opacity: 0.92; transform: translateY(-1px); }
  .cerr__btn--ghost {
    background: transparent; color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  }
  .cerr__btn--ghost:hover {
    transform: translateY(-1px);
    border-color: var(--cerr-accent, #0047ab);
    color: var(--cerr-accent, #0047ab);
  }
  .cerr__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background, #fff), 0 0 0 4px var(--cerr-accent, #0047ab);
  }

  /* ── Helpful links ── */
  .cerr__links {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
    margin-top: 0.5rem;
  }
  .cerr--center .cerr__links { justify-content: center; }
  .cerr__links-label {
    width: 100%; margin-bottom: 0.1rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }
  .cerr__chips { display: contents; margin: 0; padding: 0; list-style: none; }
  .cerr__chip {
    display: inline-flex; align-items: center;
    padding: 0.5rem 0.95rem; min-height: 38px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(0,0,0,0.14));
    background: color-mix(in srgb, var(--cerr-accent, #0047ab) 5%, var(--color-background, #fff));
    color: inherit; text-decoration: none;
    font-size: 0.9rem; font-weight: 500; line-height: 1;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
  }
  .cerr__chip:hover {
    transform: translateY(-1px);
    border-color: var(--cerr-accent, #0047ab);
    background: color-mix(in srgb, var(--cerr-accent, #0047ab) 12%, var(--color-background, #fff));
    color: var(--cerr-accent, #0047ab);
  }
  .cerr__chip:focus-visible { outline: 2px solid var(--cerr-accent, #0047ab); outline-offset: 2px; }

  /* ── Tablet / mobile: full-width search, ≥44px touch targets ── */
  @media (max-width: 749px) {
    .cerr__inner { gap: 1.25rem; }
    .cerr__search { max-width: 100%; }
    .cerr__search-input { min-height: 44px; font-size: 16px; } /* 16px avoids iOS zoom-on-focus */
    .cerr__search-btn { min-height: 44px; }
    .cerr__chip { min-height: 44px; padding: 0.6rem 1.05rem; } /* meet 44px tap target */
    .cerr__subtitle { font-size: 1rem; }
  }

  /* ── Small phones: stack actions full-width, ease the numerals ── */
  @media (max-width: 600px) {
    .cerr { padding-left: 1.25rem; padding-right: 1.25rem; }
    .cerr__num { font-size: clamp(4.5rem, 2rem + 24vw, 9rem); }
    .cerr__pulse { height: 1.85rem; }
    .cerr__actions { width: 100%; }
    .cerr__btn { flex: 1 1 100%; justify-content: center; }
    .cerr__search-btn { padding: 0 0.95rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cerr__num { animation: none; }
    .cerr__pulse-path { animation: none; stroke-dashoffset: 0; }
    .cerr__btn, .cerr__chip { transition: none; }
  }
/* END_SECTION:404 */

/* START_SECTION:apps (INDEX:3) */
.apps-section {
    width: 100%;
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }
/* END_SECTION:apps */

/* START_SECTION:benefits-grid-magicmind (INDEX:7) */
.mm-benefits {
    background: var(--mm-bg, transparent);
    color: var(--mm-fg, var(--color-foreground));
    padding-block: 48px;
    /* Contain the behind-card decoration: the image can bleed into this
       section's padding but never overlap the sections above/below. Give the
       section more top/bottom padding to reveal more of a taller image. */
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .mm-benefits { padding-block: var(--mm-pt, 80px) var(--mm-pb, 80px); }
  }
  @media (max-width: 767px) {
    .mm-benefits { padding-block: min(var(--mm-pt, 80px), 48px) min(var(--mm-pb, 80px), 48px); }
  }

  .mm-benefits__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: var(--page-margin, 24px);
  }

  .mm-benefits__head {
    max-width: 46rem;
    margin: 0 auto var(--mm-head-gap, 40px);
    text-align: center;
  }
  .mm-benefits__title { margin: 0; color: inherit; text-wrap: balance; }
  .mm-benefits__intro {
    margin: 0.75rem 0 0;
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--section-subtext-size, 16px);
    line-height: 1.6;
    color: color-mix(in srgb, currentColor 80%, transparent);
    text-wrap: pretty;
  }
  .mm-benefits__intro > * { margin: 0; }

  /* A single decoration image sits BEHIND the card, centred on it. If the image
     is taller than the card it shows equally above and below; the opaque card in
     front covers the middle. */
  .mm-benefits__stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Paper-coloured card, in front of the decorations. */
  .mm-benefits__band {
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: var(--mm-band, #ffffff);
    background-image: var(--mm-band-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid color-mix(in srgb, #1a1a1a 12%, transparent);
    border-radius: var(--mm-card-radius, 24px);
    box-shadow: 0 24px 60px -34px color-mix(in srgb, #1a1a1a 45%, transparent);
    padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  }

  /* Single decoration — absolutely centred on the card, behind it (z-index 0).
     A taller image spills equally above & below; the card (z-index 1) covers the
     middle. Centred both axes so it stays aligned at any image height. */
  .mm-benefits__decor {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: min(var(--mm-decor-w, 420px), 90%);
    height: auto;
    max-width: 90%;
    object-fit: contain;
    pointer-events: none;
  }

  .mm-benefits__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mm-gap, 32px);
    align-items: start;
  }

  .mm-benefits__card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* BIG bold mixed-case benefit heading — a clean geometric SANS (not the
     theme serif), matching the reference type. */
  .mm-benefits__card-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-subheading--family, var(--font-primary--family, sans-serif));
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: balance;
  }
  .mm-benefits__card-body {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--section-subtext-size, 16px);
    line-height: 1.6;
    color: color-mix(in srgb, currentColor 78%, transparent);
    text-wrap: pretty;
  }

  /* Black CTA button (NOT the teal accent). */
  .mm-benefits__actions {
    margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    text-align: center;
  }
  .mm-benefits__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    background: var(--mm-btn, #111);
    color: #fff;
    font-family: var(--font-primary--family, sans-serif);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .mm-benefits__btn:hover {
    transform: translateY(-2px);
    background: #000;
  }

  /* ≤900 → 2 columns. */
  @media (max-width: 900px) {
    .mm-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* ≤600 → 1 column; the centred decoration stays (capped to 90% width). */
  @media (max-width: 600px) {
    .mm-benefits__grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mm-benefits__btn { transition: none; }
    .mm-benefits__btn:hover { transform: none; }
  }
/* END_SECTION:benefits-grid-magicmind */

/* START_SECTION:bmi-calculator (INDEX:9) */
.bmi {
    padding: var(--bmi-pt, 64px) var(--page-margin, 1.5rem) var(--bmi-pb, 64px);
    margin: var(--bmi-mt, 0) 0 var(--bmi-mb, 0);
    background: var(--bmi-section-bg, transparent);
    color: var(--bmi-text, var(--color-foreground));
  }
  .bmi[data-audience-target] { display: none; }
  .bmi[data-audience-target].is-audience-match { display: block; }

  .bmi__inner { max-width: 64rem; margin: 0 auto; }

  .bmi__head { text-align: center; max-width: 40rem; margin: 0 auto 2.25rem; }
  .bmi__eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.4em 0.8em;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; line-height: 1; border-radius: 2px;
    background: var(--bmi-eyebrow-bg, #0047ab);
    color: var(--bmi-eyebrow-color, #fff);
  }
  .bmi__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
    line-height: 1.15; margin: 0 0 0.75rem; text-wrap: balance; color: inherit;
  }
  .bmi__intro { font-size: 1rem; line-height: 1.5; color: color-mix(in srgb, currentColor 80%, transparent); }
  .bmi__intro :is(p) { margin: 0; }

  /* --- Card --- */
  .bmi__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--bmi-card-bg, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: var(--bmi-radius, 12px);
    overflow: hidden;
  }
  @media (min-width: 800px) {
    .bmi__card { grid-template-columns: 1fr 1fr; }
  }

  .bmi__form { padding: clamp(1.5rem, 3vw, 2.5rem); }

  /* Unit toggle */
  .bmi__toggle {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
    border-radius: calc(var(--style-border-radius-inputs, 4px) + 4px);
    margin-bottom: 1.75rem;
  }
  .bmi__toggle-btn {
    appearance: none; border: 0; cursor: pointer;
    padding: 0.5rem 1.1rem;
    font: inherit; font-weight: 600; font-size: 0.9rem;
    color: color-mix(in srgb, currentColor 70%, transparent);
    background: transparent;
    border-radius: var(--style-border-radius-inputs, 4px);
    transition: background 150ms ease, color 150ms ease;
  }
  .bmi__toggle-btn.is-active {
    background: var(--bmi-card-bg, #fff);
    color: var(--bmi-accent, #0047ab);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }

  /* Fields */
  .bmi__fields { display: flex; flex-direction: column; gap: 1.25rem; }
  .bmi__card.is-metric   .bmi__fields--imperial { display: none; }
  .bmi__card.is-imperial .bmi__fields--metric   { display: none; }

  .bmi__field { display: flex; flex-direction: column; gap: 0.5rem; }
  .bmi__label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; }
  .bmi__row { display: flex; gap: 0.75rem; }
  .bmi__row .bmi__input-wrap { flex: 1; }

  .bmi__input-wrap { position: relative; display: block; }
  .bmi__input-wrap input {
    width: 100%;
    padding: 0.85rem 2.75rem 0.85rem 0.9rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.18));
    border-radius: var(--style-border-radius-inputs, 4px);
    background: var(--color-background, #fff);
    color: inherit;
    font-size: 1rem;
  }
  .bmi__input-wrap input:focus {
    outline: none;
    border-color: var(--bmi-accent, #0047ab);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bmi-accent, #0047ab) 22%, transparent);
  }
  .bmi__unit {
    position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
    font-size: 0.85rem; color: color-mix(in srgb, currentColor 55%, transparent);
    pointer-events: none;
  }

  /* --- Result --- */
  .bmi__result {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--bmi-accent) 6%, var(--bmi-card-bg, #fff));
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.12));
    display: flex; flex-direction: column;
    text-align: center;
  }
  @media (min-width: 800px) {
    .bmi__result { border-top: 0; border-left: 1px solid var(--color-border, rgba(0,0,0,0.12)); justify-content: center; }
  }

  .bmi__result-label {
    margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: color-mix(in srgb, currentColor 60%, transparent);
  }
  .bmi__value {
    margin: 0; font-family: var(--font-heading--family, serif);
    font-size: clamp(3rem, 2rem + 5vw, 4.5rem); line-height: 1; color: var(--bmi-cat-color, inherit);
    transition: color 200ms ease;
  }
  .bmi__category {
    margin: 0.5rem 0 0; font-size: 1.05rem; font-weight: 600; color: var(--bmi-cat-color, inherit);
    transition: color 200ms ease;
  }
  .bmi__result[data-state="empty"] .bmi__category { font-weight: 400; color: color-mix(in srgb, currentColor 60%, transparent); }

  /* Scale */
  .bmi__scale { margin-top: 1.5rem; }
  .bmi__scale-bar {
    position: relative; display: flex; height: 8px;
    border-radius: 99px; overflow: visible;
  }
  .bmi__seg { display: block; height: 100%; }
  .bmi__seg:first-child { border-radius: 99px 0 0 99px; }
  .bmi__seg:nth-last-child(2) { border-radius: 0 99px 99px 0; }
  /* widths map the 15-40 BMI window: under<=18.5, normal<=25, over<=30, obese<=40 */
  .bmi__seg--under  { width: 14%; background: #f0b429; }
  .bmi__seg--normal { width: 26%; background: #27a567; }
  .bmi__seg--over   { width: 20%; background: #f0883e; }
  .bmi__seg--obese  { width: 40%; background: #e6492d; }
  .bmi__marker {
    position: absolute; top: 50%; left: 0;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 3px solid var(--bmi-cat-color, var(--color-foreground));
    transform: translate(-50%, -50%); transition: left 300ms ease, border-color 200ms ease;
    opacity: 0;
  }
  .bmi__result:not([data-state="empty"]) .bmi__marker { opacity: 1; }
  .bmi__scale-legend {
    display: flex; justify-content: space-between; margin-top: 0.5rem;
    font-size: 0.7rem; color: color-mix(in srgb, currentColor 55%, transparent);
  }

  .bmi__disclaimer {
    margin: 1.75rem 0 0; font-size: 0.75rem; line-height: 1.4;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }
  .bmi__disclaimer :is(p) { margin: 0; }

  /* --- Action plan (personalised to the BMI category) --- */
  .bmi__plan {
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: left;
    animation: bmi-plan-in 360ms ease both;
  }
  @keyframes bmi-plan-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .bmi__plan { animation: none; } }

  .bmi__plan-eyebrow {
    margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--bmi-cat-color, var(--bmi-accent, #0047ab));
  }
  .bmi__plan-eyebrow:empty { display: none; }
  .bmi__plan-title {
    margin: 0 0 1.4rem; font-family: var(--font-heading--family, serif);
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.15;
  }
  .bmi__plan-intro { margin: -0.8rem 0 1.4rem; font-size: 0.95rem; color: color-mix(in srgb, currentColor 75%, transparent); }
  .bmi__plan-intro :is(p) { margin: 0; }

  /* Only the list matching the active category is shown. */
  .bmi__plan-list { display: none; }
  .bmi__plan[data-active="underweight"] .bmi__plan-list[data-bmi-plan-for="underweight"],
  .bmi__plan[data-active="normal"]      .bmi__plan-list[data-bmi-plan-for="normal"],
  .bmi__plan[data-active="overweight"]  .bmi__plan-list[data-bmi-plan-for="overweight"],
  .bmi__plan[data-active="obese"]       .bmi__plan-list[data-bmi-plan-for="obese"] { display: block; }

  /* Numbered "01, 02 ..." cards, responsive grid. Works with <ol> or <ul>. */
  .bmi__plan-list :is(ol, ul) {
    list-style: none; counter-reset: step; margin: 0; padding: 0;
    display: grid; gap: 1.5rem 2rem; grid-template-columns: 1fr;
  }
  @media (min-width: 640px)  { .bmi__plan-list :is(ol, ul) { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .bmi__plan-list :is(ol, ul) { grid-template-columns: repeat(3, 1fr); } }
  .bmi__plan-list :is(ol, ul) > li {
    counter-increment: step;
    position: relative;
    padding: 1rem 0 0 3.25rem;
    min-height: 2.4rem;
    font-size: 0.95rem; line-height: 1.5;
    border-top: 2px solid color-mix(in srgb, var(--bmi-cat-color, var(--bmi-accent, #0047ab)) 28%, transparent);
  }
  .bmi__plan-list :is(ol, ul) > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; top: 0.85rem; left: 0;
    font-family: var(--font-heading--family, serif);
    font-size: 1.3rem; font-weight: 600; line-height: 1;
    color: var(--bmi-cat-color, var(--bmi-accent, #0047ab));
  }
/* END_SECTION:bmi-calculator */

/* START_SECTION:cart (INDEX:14) */
.cart-page {
    padding: var(--cart-pt, 64px) var(--page-margin, 1.5rem) var(--cart-pb, 80px);
    margin: var(--cart-mt, 0) 0 var(--cart-mb, 0);
    background: var(--cart-section-bg, transparent);
    color: var(--cart-text, var(--color-foreground));
  }
  .cart-page__inner { max-width: var(--page-width, 80rem); margin: 0 auto; }
  .cart-page.is-loading .cart-page__items,
  .cart-page.is-loading .cart-summary__card { opacity: 0.55; pointer-events: none; transition: opacity 120ms ease; }

  /* ─── Head ─── */
  .cart-page__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .cart-page__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
    line-height: 1.1; margin: 0; color: inherit;
  }
  .cart-page__count { color: var(--cart-muted, color-mix(in srgb, currentColor 55%, transparent)); font-size: 0.6em; }
  .cart-page__continue-top {
    flex: 0 0 auto; font-size: 0.95rem; font-weight: 500;
    color: var(--cart-accent, #0047ab); text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color 150ms ease;
  }
  .cart-page__continue-top:hover { border-color: currentColor; }
  @media (max-width: 600px) { .cart-page__continue-top { display: none; } }

  /* ─── Free-shipping bar ─── */
  .cart-fs {
    background: var(--cart-card-bg, color-mix(in srgb, var(--color-foreground) 3%, var(--color-background)));
    border: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.1)));
    border-radius: var(--cart-radius, 12px);
    padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  }
  .cart-fs__msg { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 500; }
  .cart-fs.is-complete .cart-fs__msg { color: var(--cart-fs-fill, #0047ab); }
  .cart-fs__check { font-weight: 700; margin-right: 0.25rem; }
  .cart-fs__track { height: 7px; border-radius: 99px; background: var(--cart-fs-track, #e8edf2); overflow: hidden; }
  .cart-fs__fill { display: block; height: 100%; border-radius: 99px; background: var(--cart-fs-fill, #0047ab); transition: width 400ms cubic-bezier(0.22,1,0.36,1); }

  /* ─── Grid ─── */
  .cart-page__grid {
    display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start;
  }
  @media (min-width: 900px) {
    .cart-page__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; }
  }

  /* ─── Items ─── */
  .cart-items { list-style: none; margin: 0; padding: 0; }
  .cart-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.1)));
  }
  .cart-item:first-child { border-top: 0; padding-top: 0; }
  @media (min-width: 700px) { .cart-item { grid-template-columns: 110px 1fr; gap: 1.5rem; } }

  .cart-item__media { display: block; border-radius: calc(var(--cart-radius, 12px) - 4px); overflow: hidden; background: color-mix(in srgb, currentColor 5%, transparent); aspect-ratio: 1 / 1; padding: 6px; }
  /* contain (not cover) so non-square product shots aren't cropped — the
     whole image is shown, centred within the square thumbnail. */
  .cart-item__img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .cart-item__img--placeholder { display: block; }

  .cart-item__info { display: flex; flex-direction: column; min-width: 0; }
  .cart-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
  .cart-item__title {
    font-family: var(--font-heading--family, serif);
    font-size: 1.15rem; line-height: 1.25; color: inherit; text-decoration: none;
  }
  .cart-item__title:hover { text-decoration: underline; text-underline-offset: 2px; }
  .cart-item__variant,
  .cart-item__plan { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--cart-muted, color-mix(in srgb, currentColor 60%, transparent)); }
  .cart-item__plan { color: var(--cart-accent, #0047ab); font-weight: 500; }
  .cart-item__props { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--cart-muted, color-mix(in srgb, currentColor 60%, transparent)); }
  .cart-item__props span { font-weight: 600; }
  .cart-item__discounts { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--cart-fs-fill, #0047ab); }

  .cart-item__remove-x {
    flex: 0 0 auto; appearance: none; border: 0; background: transparent; cursor: pointer;
    width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
    color: var(--cart-muted, color-mix(in srgb, currentColor 55%, transparent)); border-radius: 50%;
    transition: color 150ms ease, background 150ms ease;
  }
  .cart-item__remove-x:hover { color: var(--color-foreground); background: color-mix(in srgb, currentColor 8%, transparent); }
  .cart-item__remove-x svg { width: 0.95rem; height: 0.95rem; }

  .cart-item__bottom {
    margin-top: auto; padding-top: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }

  .cart-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.18)));
    border-radius: var(--style-border-radius-inputs, 4px); overflow: hidden;
  }
  .cart-qty__btn {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
    color: inherit; transition: background 150ms ease;
  }
  .cart-qty__btn:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
  .cart-qty__btn svg { width: 0.9rem; height: 0.9rem; }
  .cart-qty__input {
    width: 2.75rem; height: 2.4rem; border: 0; text-align: center; font: inherit; font-size: 0.95rem;
    background: transparent; color: inherit;
    border-left: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.12)));
    border-right: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.12)));
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .cart-qty__input::-webkit-outer-spin-button,
  .cart-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .cart-qty__input:focus { outline: none; }

  .cart-item__prices { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
  .cart-item__price { font-size: 1.05rem; font-weight: 600; }
  .cart-item__price-was { font-size: 0.85rem; color: var(--cart-muted, color-mix(in srgb, currentColor 55%, transparent)); text-decoration: line-through; }
  .cart-item__unit { font-size: 0.72rem; color: var(--cart-muted, color-mix(in srgb, currentColor 55%, transparent)); }

  .cart-item__remove {
    align-self: flex-start; margin-top: 0.6rem;
    appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.8rem; color: var(--cart-muted, color-mix(in srgb, currentColor 55%, transparent));
    text-decoration: underline; text-underline-offset: 2px;
  }
  .cart-item__remove:hover { color: var(--color-foreground); }
  /* The corner × is the primary remove on wider screens; the text link is for small screens. */
  @media (min-width: 700px) { .cart-item__remove { display: none; } }
  @media (max-width: 699px) { .cart-item__remove-x { display: none; } }

  /* ─── Order note ─── */
  .cart-note { margin-top: 1.5rem; border-top: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.1))); padding-top: 1.25rem; }
  .cart-note__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
    font-size: 0.95rem; font-weight: 500; color: var(--cart-accent, #0047ab);
  }
  .cart-note__toggle::-webkit-details-marker { display: none; }
  .cart-note__toggle svg { width: 1rem; height: 1rem; }
  .cart-note__field {
    margin-top: 0.75rem; width: 100%; padding: 0.85rem 0.9rem; font: inherit; font-size: 0.95rem;
    border: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.18)));
    border-radius: var(--style-border-radius-inputs, 4px); background: var(--color-background, #fff); color: inherit; resize: vertical;
  }
  .cart-note__field:focus { outline: none; border-color: var(--cart-accent, #0047ab); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cart-accent, #0047ab) 20%, transparent); }

  /* ─── Summary ─── */
  .cart-page--sticky .cart-summary { position: sticky; top: calc(var(--header-height, 7rem) + 1rem); }
  .cart-summary__card {
    background: var(--cart-summary-bg, color-mix(in srgb, var(--color-foreground) 3%, var(--color-background)));
    border: 1px solid var(--cart-divider, var(--color-border, rgba(0,0,0,0.1)));
    border-radius: var(--cart-radius, 12px);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .cart-summary__heading { font-family: var(--font-heading--family, serif); font-size: 1.25rem; margin: 0 0 1rem; }
  .cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1rem; padding: 0.35rem 0; }
  .cart-summary__row span:last-child { font-weight: 600; }
  .cart-summary__row--discount { color: var(--cart-fs-fill, #0047ab); }
  .cart-summary__row--discount span:last-child { font-weight: 600; }
  .cart-summary__note { margin: 0.75rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--cart-muted, color-mix(in srgb, currentColor 60%, transparent)); }

  .cart-summary__express { margin-top: 0.85rem; display: grid; gap: 0.5rem; }
  .cart-summary__express:empty { display: none; }

  .cart-summary__continue {
    display: block; text-align: center; margin-top: 0.85rem; font-size: 0.9rem; font-weight: 500;
    color: var(--cart-accent, #0047ab); text-decoration: none;
  }
  .cart-summary__continue:hover { text-decoration: underline; text-underline-offset: 3px; }

  .cart-summary__secure {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    margin: 1rem 0 0; font-size: 0.78rem; color: var(--cart-muted, color-mix(in srgb, currentColor 55%, transparent));
  }
  .cart-summary__secure svg { width: 0.95rem; height: 0.95rem; }

  /* ─── Buttons ─── */
  .cart-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%; padding: 1rem 1.5rem; border: 0; cursor: pointer;
    border-radius: var(--style-border-radius-inputs, 4px);
    font-family: var(--font-subheading--family, sans-serif); font-size: 1rem; font-weight: 600;
    text-decoration: none; transition: opacity 150ms ease;
  }
  .cart-btn--checkout { margin-top: 1.1rem; background: var(--cart-checkout-bg, #0047ab); color: var(--cart-checkout-text, #fff); }
  .cart-btn--primary { width: auto; background: var(--cart-checkout-bg, #0047ab); color: var(--cart-checkout-text, #fff); }
  .cart-btn:hover { opacity: 0.9; }

  /* ─── Perks ─── */
  .cart-perks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
  .cart-perk { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
  .cart-perk__icon {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cart-accent, #0047ab) 12%, transparent); color: var(--cart-accent, #0047ab);
  }
  .cart-perk__icon svg { width: 1.1rem; height: 1.1rem; }

  /* ─── Empty state ─── */
  .cart-empty { text-align: center; max-width: 32rem; margin: 0 auto; padding: 3rem 1rem; }
  .cart-empty__icon { display: inline-flex; color: var(--cart-accent, #0047ab); margin-bottom: 1.25rem; }
  .cart-empty__icon svg { width: 3rem; height: 3rem; }
  .cart-empty__title { font-family: var(--font-heading--family, serif); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin: 0 0 0.65rem; }
  .cart-empty__text { margin: 0 0 1.5rem; color: var(--cart-muted, color-mix(in srgb, currentColor 65%, transparent)); font-size: 1.05rem; }
/* END_SECTION:cart */

/* START_SECTION:civaq-hero-slider (INDEX:15) */
.civaq-hero-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background-color: #000000;
    padding-top: var(--sec-pt, 0);
    padding-bottom: var(--sec-pb, 0);
  }

  .civaq-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* Desktop Height Modes */
  .civaq-slider-wrapper.size-desk-adapt { height: auto; aspect-ratio: var(--ar-desk, 16/9); }
  .civaq-slider-wrapper.size-desk-small { height: 400px; }
  .civaq-slider-wrapper.size-desk-medium { height: 550px; }
  .civaq-slider-wrapper.size-desk-large { height: 750px; }
  .civaq-slider-wrapper.size-desk-fullscreen { height: 100vh; }
  .civaq-slider-wrapper.size-desk-custom { height: var(--hero-h-desk, 600px); }

  /* Mobile Height Modes */
  @media (max-width: 768px) {
    .civaq-slider-wrapper.size-mob-adapt { height: auto; aspect-ratio: var(--ar-mob, 1); }
    .civaq-slider-wrapper.size-mob-small { height: 300px; }
    .civaq-slider-wrapper.size-mob-medium { height: 450px; }
    .civaq-slider-wrapper.size-mob-large { height: 600px; }
    .civaq-slider-wrapper.size-mob-fullscreen { height: 100vh; }
    .civaq-slider-wrapper.size-mob-custom { height: var(--hero-h-mob, 450px); }
  }

  .civaq-slides-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .civaq-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
  }

  .civaq-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .civaq-slide-link,
  .civaq-slide-picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .civaq-slide-img,
  .civaq-slide-video,
  .civaq-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .civaq-placeholder-img {
    background: #222222;
  }

  /* Navigation Controls */
  .civaq-slider-controls {
    position: absolute;
    bottom: 24px;
    right: 32px;
    z-index: 10;
    display: flex;
    gap: 12px;
  }

  .civaq-nav-btn {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
    color: #111111;
  }

  .civaq-nav-btn:hover {
    background-color: #ffffff;
    transform: scale(1.08);
  }

  .civaq-nav-btn svg {
    width: 20px;
    height: 20px;
  }

  @media (max-width: 768px) {
    .civaq-slider-controls {
      bottom: 16px;
      right: 16px;
      gap: 8px;
    }
  }
/* END_SECTION:civaq-hero-slider */

/* START_SECTION:collection (INDEX:18) */
/* ── Filter & Toolbar Strip ── */
  .collection-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    margin-bottom: 32px;
  }
  .collection-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .collection-filter-chip {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid #d5d5d5;
    background: #ffffff;
    color: #1c1b1b;
    font-family: var(--section-subtext-family, sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .collection-filter-chip:hover {
    border-color: #000000;
    background: #f7f7f7;
  }
  .collection-filter-chip.is-active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
  }
  .collection-toolbar__controls {
    display: flex;
    align-items: center;
  }

  /* Custom Modern Sort Dropdown */
  .collection-sort-custom {
    position: relative;
    display: inline-block;
  }
  .collection-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #ffffff;
    border: 1px solid #d5d5d5;
    border-radius: 20px;
    font-family: var(--section-subtext-family, sans-serif);
    font-size: 13.5px;
    color: #1c1b1b;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .collection-sort-btn:hover {
    border-color: #000000;
    background: #f7f7f7;
  }
  .collection-sort-btn[aria-expanded="true"] {
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
  }
  .collection-sort-btn__label {
    font-weight: 500;
  }
  .collection-sort-btn__label strong {
    font-weight: 700;
  }
  .collection-sort-btn__chevron {
    transition: transform 0.2s ease;
  }
  .collection-sort-btn[aria-expanded="true"] .collection-sort-btn__chevron {
    transform: rotate(180deg);
  }

  .collection-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 100;
    min-width: 210px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  .collection-sort-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .collection-sort-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-family: var(--section-subtext-family, sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .collection-sort-item:hover {
    background: #f5f5f5;
    color: #000000;
  }
  .collection-sort-item.is-active {
    font-weight: 700;
    color: #000000;
    background: #fafafa;
  }
  .collection-sort-check {
    opacity: 0;
    color: #000000;
    transition: opacity 0.15s ease;
  }
  .collection-sort-item.is-active .collection-sort-check {
    opacity: 1;
  }

  @media (max-width: 768px) {
    .collection-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
    .collection-toolbar__controls {
      justify-content: flex-end;
      width: 100%;
    }
  }

  .collection-page {
    padding: 48px var(--page-margin, 24px);
    max-width: 1350px;
    margin: 0 auto;
  }
  .collection-page__title {
    font-family: var(--section-heading-family, var(--font-heading-family, Circular, Roboto, sans-serif));
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    margin: 0 0 16px;
    color: #1c1b1b;
    letter-spacing: -0.02em;
  }
  .collection-page__description {
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 16px;
    line-height: 1.5;
    color: #6a6a6a;
    margin-bottom: 36px;
  }
  .collection-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
    width: 100%;
    margin-top: 24px;
  }

  @media (max-width: 1024px) {
    .collection-products {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
  }

  @media (max-width: 640px) {
    .collection-products {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  /* ── MagicMind Product Card UI Rules ── */
  .mm-product-card {
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .mm-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  /* Top Media Header */
  .mm-product-card__media {
    background: #f7f7f7;
    border-bottom: 1px solid #000000;
    padding: 24px 16px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .mm-product-card__img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }
  .mm-product-card__img {
    max-height: 180px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Card Body */
  .mm-product-card__body {
    padding: 20px 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
  }

  .mm-product-card__title {
    font-family: var(--section-heading-family, var(--font-heading-family, serif));
    font-size: 28px;
    font-weight: 700;
    font-style: italic;
    color: #000000;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .mm-product-card__title a {
    color: inherit;
    text-decoration: none;
  }

  /* Price replacing Ratings */
  .mm-product-card__price {
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }

  /* Badge Line with Edge Bleed & Rounded Pill ON TOP */
  .mm-product-card__badge-line {
    position: relative;
    width: calc(100% + 32px);
    margin: 12px -16px 20px -16px;
    border-top: 1px solid #000000;
    display: flex;
    justify-content: center;
  }
  .mm-product-card__badge {
    position: relative;
    top: -12px;
    background: linear-gradient(135deg, #d8f3b8 0%, #a4db78 100%);
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 3px 14px;
    font-family: var(--font-mono, "Akkurat-Mono-_1_", monospace);
    font-size: 12.5px;
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
  }

  /* Description */
  .mm-product-card__desc {
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 14.5px;
    line-height: 1.45;
    color: #000000;
    margin-bottom: 16px;
  }

  /* Footer Category (Strictly Single Row, No Wrapping) */
  .mm-product-card__footer-specs {
    border-top: 1px solid #000000;
    padding: 12px 14px;
    font-family: var(--font-mono, "Akkurat-Mono-_1_", monospace);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000000;
    text-align: center;
    background: #ffffff;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
  }

  /* CTA Button */
  .mm-product-card__cta-wrap {
    padding: 12px 16px 20px;
    display: flex;
    justify-content: center;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
  }
  .mm-product-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 11px 18px;
    background: #000000;
    color: #ffffff;
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .mm-product-card__btn:hover {
    background: #222222;
    transform: translateY(-2px);
  }

  .collection-pagination {
    grid-column: 1 / -1;
    margin-top: 40px;
    text-align: center;
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:19) */
.collections-page {
    padding: 48px var(--page-margin, 24px);
    max-width: 1350px;
    margin: 0 auto;
  }
  .collections-heading {
    font-family: var(--section-heading-family, Circular, Roboto, sans-serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    margin: 0 0 32px;
    color: #1c1b1b;
  }
  .collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--grid-gap, 24px);
  }
  .collection-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .collection-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f7;
  }
  .collection-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .collection-card__content {
    padding: 16px;
  }
  .collection-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1c1b1b;
  }
  .collection-card__count {
    font-size: 14px;
    color: #6a6a6a;
    margin: 0;
  }
/* END_SECTION:collections */

/* START_SECTION:commitment-banner (INDEX:20) */
.commitment-banner {
    position: relative;
    padding: var(--cb-pt, 0) 0 var(--cb-pb, 80px);
    margin-top: var(--cb-mt, 0);
    margin-bottom: var(--cb-mb, 0);
    color: var(--cb-text, #1a1c23);
    background: var(--cb-section-bg, transparent);
  }

  /* ─── Banner image (single image, full-bleed) ─── */
  .commitment-banner__media {
    display: block;
    width: 100%;
  }
  .commitment-banner__img,
  .commitment-banner__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }
  .commitment-banner__placeholder {
    background:
      linear-gradient(135deg, #d7d2c8 0%, #b9b2a4 100%);
  }
  @media (min-width: 768px) {
    .commitment-banner__img,
    .commitment-banner__placeholder { aspect-ratio: 1.54 / 1; }
  }
  @media (min-width: 1024px) {
    .commitment-banner__img,
    .commitment-banner__placeholder { aspect-ratio: 2 / 1; }
  }

  /* ─── Panel wrap: inset, max-width, pulled up over the banner ─── */
  .commitment-banner__panel-wrap {
    position: relative;
    z-index: 2;
    max-width: var(--page-width, 100rem);
    margin-inline: auto;
    margin-top: calc(var(--cb-overlap, 96px) * -0.5);
    padding: 0 var(--page-margin, 1.5rem);
  }
  @media (min-width: 1024px) {
    .commitment-banner__panel-wrap {
      margin-top: calc(var(--cb-overlap, 96px) * -1);
    }
  }

  .commitment-banner__panel {
    background: var(--cb-panel-bg, #f3f1eb);
    border: 1px solid color-mix(in srgb, var(--cb-text, #1a1c23) 18%, transparent);
    border-radius: var(--cb-panel-radius, 8px);
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 5rem);
  }

  /* ─── Title with underline rule ─── */
  .commitment-banner__head {
    text-align: center;
    padding-bottom: clamp(1.5rem, 3vw, 4rem);
    margin-bottom: clamp(1.5rem, 3vw, 4rem);
    border-bottom: 1px solid color-mix(in srgb, var(--cb-text, #1a1c23) 18%, transparent);
  }
  .commitment-banner__title {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--cb-text, #1a1c23);
    text-wrap: balance;
  }

  /* ─── Body: intro (left) + commitments (right) ─── */
  .commitment-banner__body {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 5rem);
  }
  @media (min-width: 1024px) {
    .commitment-banner__body { flex-direction: row; }
  }
  .commitment-banner__intro {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .commitment-banner__intro { width: var(--cb-intro-w, 35%); flex: 0 0 auto; }
  }
  .commitment-banner__intro-text {
    margin: 0;
    font-size: var(--section-subtext-size, 1.5rem);   /* Subtitle-10-Dia-Normal — 24px */
    line-height: 1.3;
    font-weight: 400;
    color: var(--cb-text, #1a1c23);
    text-wrap: pretty;
  }
  .commitment-banner__commitments { flex: 1 1 auto; min-width: 0; }
  .commitment-banner__commitments-label {
    margin: 0 0 1rem;
    font-size: 1.25rem;   /* Body-30-Dia-Strong — 20px */
    line-height: 1.4;
    font-weight: 600;
    color: var(--cb-text, #1a1c23);
  }

  /* ─── Commitment cards ─── */
  .commitment-banner__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  @media (min-width: 1024px) {
    .commitment-banner__items { flex-direction: row; gap: 1rem; }
  }
  .commitment-banner__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 1 1 0;
    padding: 1rem;
    background: var(--cb-item-bg, #ffffff);
    border: 1px solid color-mix(in srgb, var(--cb-text, #1a1c23) 18%, transparent);
    border-radius: var(--cb-item-radius, 4px);
  }
  @media (min-width: 1024px) {
    .commitment-banner__item { flex-direction: column; align-items: flex-start; }
  }
  .commitment-banner__icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    color: var(--cb-text, #1a1c23);
  }
  .commitment-banner__icon-svg,
  .commitment-banner__icon-img {
    width: 2rem;
    height: 2rem;
    display: block;
  }
  .commitment-banner__item-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1rem;   /* Body-20-Dia-Normal — 16px */
    line-height: 1.4;
    color: var(--cb-text, #1a1c23);
  }
  .commitment-banner__item-text > :first-child { margin-top: 0; }
  .commitment-banner__item-text > :last-child { margin-bottom: 0; }
  .commitment-banner__item-text p { margin: 0 0 0.5rem; }
  .commitment-banner__item-text strong { font-weight: 700; }
/* END_SECTION:commitment-banner */

/* START_SECTION:compare-growth-timeline (INDEX:21) */
.cgt {
    background: var(--cgt-bg, transparent);
    color: var(--cgt-fg, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    padding: 40px var(--page-margin, 24px);
  }
  @media (min-width: 1024px) {
    .cgt { padding: var(--cgt-pt, 80px) var(--page-margin, 24px) var(--cgt-pb, 80px); }
  }

  .cgt__inner { max-width: 1600px; margin: 0 auto; }

  /* ─── Head ─── */
  .cgt__head { text-align: center; margin-bottom: var(--cgt-head-gap, 64px); }
  .cgt__title {
    /* Heading is an <h2>, so the global `.shopify-section :is(h1,h2)` rule
       drives it via the --section-* vars — the GLOBAL theme typography plus the
       per-section "Heading font / size" overrides all apply. These declarations
       mirror those vars as robust fallbacks. */
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--section-heading-size, clamp(1.9rem, 1rem + 2.8vw, 3rem));
    line-height: var(--section-heading-line-height, 1.15);
    letter-spacing: var(--section-heading-tracking, -0.005em);
    text-transform: var(--section-heading-transform, none);
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }
  .cgt__title em, .cgt__title i { font-style: italic; }

  /* ─── Milestones row + timeline ─── */
  .cgt__milestones {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cgt-gap, 40px);
  }

  /* Horizontal line — positioned at the tag row (JS sets --cgt-tag-y to the
     tags' vertical centre, since the photo above pushes them down). */
  .cgt__track--h {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--cgt-tag-y, 60%);
    height: 2px;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
  }
  .cgt__dots--h {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--cgt-line, currentColor) 1px, transparent 1.4px);
    background-size: 9px 100%;
    background-repeat: repeat-x;
    background-position: 0 50%;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .cgt__fill--h {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: calc(var(--cgt-progress, 0) * 100%);
    background: var(--cgt-fill-color, var(--cgt-line, var(--color-brand, #ffdc86)));
    border-radius: 1px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 100%);
  }

  /* Vertical line — mobile only. Runs down the centre of the stacked column. */
  .cgt__track--v {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    display: none;
  }
  .cgt__dots--v {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--cgt-line, currentColor) 1px, transparent 1.4px);
    background-size: 100% 9px;
    background-repeat: repeat-y;
    background-position: 50% 0;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .cgt__fill--v {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(var(--cgt-progress, 0) * 100%);
    background: var(--cgt-fill-color, var(--cgt-line, var(--color-brand, #ffdc86)));
    border-radius: 1px;
  }

  /* Milestones (and their tags) paint ABOVE the track. Shopify wraps theme
     blocks in injected divs, so target any direct child that isn't a track. */
  .cgt__milestones > *:not(.cgt__track) {
    position: relative;
    z-index: 10;
    isolation: isolate;
  }

  /* ─── Disclaimer ─── */
  .cgt__disclaimer { margin-top: 2rem; text-align: center; }
  .cgt__disclaimer p { margin: 0; font-size: calc(var(--section-subtext-size, 1rem) * 0.8); color: color-mix(in srgb, currentColor 60%, transparent); }

  /* ─── Tablet 768–989: three columns are too cramped — go 2-up. The
     horizontal line assumes a single row, so it hides here (the third
     milestone wraps to a second row). ─── */
  @media (min-width: 768px) and (max-width: 989px) {
    .cgt__milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cgt__track--h { display: none; }
  }

  /* ─── Mobile: single column stack with the vertical line ─── */
  @media (max-width: 767px) {
    .cgt__milestones { grid-template-columns: 1fr; gap: 2.5rem; }
    .cgt__track--h { display: none; }
    .cgt__track--v { display: block; }
    .cgt__head { margin-bottom: 1.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cgt-milestone__tag { transition: none; }
  }
/* END_SECTION:compare-growth-timeline */

/* START_SECTION:compare-growth (INDEX:22) */
.compare-growth {
    background: var(--cg-bg, transparent);
    color: var(--cg-fg, #1a1c23);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin: var(--cg-mt, 0) 0 var(--cg-mb, 0);
    /* mobile */
    padding: 40px 24px;
  }
  @media (min-width: 768px) { .compare-growth { padding: 48px 32px; } }
  @media (min-width: 1024px) { .compare-growth { padding: var(--cg-pt, 80px) 48px var(--cg-pb, 80px); } }
  @media (min-width: 1280px) { .compare-growth { padding-left: 112px; padding-right: 112px; } }

  .compare-growth__inner { max-width: 1600px; margin: 0 auto; }

  /* ─── Header ─── */
  .compare-growth__head { margin-bottom: var(--cg-head-gap, 80px); }
  @media (max-width: 1023px) { .compare-growth__head { margin-bottom: clamp(2rem, 5vw, 2.5rem); } }

  /* Font, weight, size & transform are governed sitewide by the unified
     `.shopify-section :is(h1,h2)` rule (driven by --section-*); this section
     only owns the heading's alignment, width, spacing & colour. */
  .compare-growth__title {
    text-align: center;
    text-wrap: balance;
    max-width: 72rem;
    margin: 0 auto;
    color: inherit;
  }
  /* The global rule forces font-style:normal on the h2 but leaves inline <em>
     italic — keep that explicit so the emphasis tail renders slanted. */
  .compare-growth__title-em { font-style: italic; }

  /* ─── Thumbnail navigator ─── */
  .compare-growth__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: clamp(2rem, 4vw, 2.5rem);
  }
  @media (max-width: 767px) {
    .compare-growth__nav { justify-content: space-between; gap: 0.5rem; }
  }

  .compare-growth__arrow {
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--cg-accent, #0047AB);
    transition: transform 150ms ease, opacity 150ms ease;
  }
  @media (min-width: 768px) {
    .compare-growth__arrow:first-child { margin-right: 1rem; }
    .compare-growth__arrow:last-child { margin-left: 1rem; }
  }
  .compare-growth__arrow svg { width: 1.5rem; height: 1.5rem; display: block; }
  .compare-growth__arrow-bg { fill: color-mix(in srgb, var(--cg-fg, #1a1c23) 14%, transparent); transition: fill 150ms ease; }
  .compare-growth__arrow-glyph { fill: var(--cg-fg, #1a1c23); }
  .compare-growth__arrow:hover { transform: scale(1.06); }
  .compare-growth__arrow:hover .compare-growth__arrow-bg { fill: var(--cg-accent, #0047AB); }
  .compare-growth__arrow:hover .compare-growth__arrow-glyph { fill: #fff; }
  .compare-growth__arrow:focus-visible { outline: 2px solid var(--cg-accent, #0047AB); outline-offset: 3px; border-radius: 6px; }

  .compare-growth__thumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    max-width: 192px;
    padding: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .compare-growth__thumbs::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) { .compare-growth__thumbs { max-width: none; } }

  .compare-growth__thumb {
    appearance: none;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    scroll-snap-align: center;
  }
  .compare-growth__thumb-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow 200ms ease;
  }
  .compare-growth__thumb.is-active .compare-growth__thumb-ring {
    box-shadow: inset 0 0 0 2px var(--cg-accent, #0047AB);
  }
  .compare-growth__thumb-img {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    opacity: 0.4;
    transition: opacity 200ms ease;
  }
  .compare-growth__thumb.is-active .compare-growth__thumb-img { opacity: 1; }
  .compare-growth__thumb:hover .compare-growth__thumb-img { opacity: 0.75; }
  .compare-growth__thumb.is-active:hover .compare-growth__thumb-img { opacity: 1; }
  .compare-growth__thumb-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cg-fg, #1a1c23) 8%, transparent);
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 600;
    font-size: 1.1rem;
    opacity: 0.5;
    transition: opacity 200ms ease;
  }
  .compare-growth__thumb.is-active .compare-growth__thumb-initial { opacity: 1; }
  .compare-growth__thumb:focus-visible { outline: 2px solid var(--cg-accent, #0047AB); outline-offset: 2px; }

  /* ─── Slider ─── */
  .compare-growth__viewport { overflow: hidden; }
  .compare-growth__track {
    display: flex;
    will-change: transform;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .compare-growth__slide {
    flex: 0 0 100%;
    min-width: 0;
  }

  /* ─── Card ─── */
  .compare-growth__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  @media (min-width: 1280px) { .compare-growth__card { flex-direction: row; } }

  .compare-growth__shots {
    display: flex;
    width: 100%;
    overflow: hidden;
    border-radius: var(--cg-radius, 6px) var(--cg-radius, 6px) 0 0;
  }
  @media (min-width: 1280px) {
    .compare-growth__shots {
      width: 66.6667%;
      border-radius: var(--cg-radius, 6px) 0 0 var(--cg-radius, 6px);
    }
  }
  .compare-growth__shot {
    position: relative;
    margin: 0;
    width: 50%;
    aspect-ratio: var(--cg-ratio, 3 / 4);
    overflow: hidden;
  }
  .compare-growth__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .compare-growth__shot--ph { background: color-mix(in srgb, var(--cg-fg, #1a1c23) 6%, transparent); }
  .compare-growth__img--ph { opacity: 0.5; }

  .compare-growth__panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    padding: 1rem;
    border-left: 1px solid var(--cg-border, color-mix(in srgb, var(--cg-fg, #1a1c23) 18%, transparent));
    border-right: 1px solid var(--cg-border, color-mix(in srgb, var(--cg-fg, #1a1c23) 18%, transparent));
    border-bottom: 1px solid var(--cg-border, color-mix(in srgb, var(--cg-fg, #1a1c23) 18%, transparent));
    border-radius: 0 0 var(--cg-radius, 6px) var(--cg-radius, 6px);
  }
  @media (min-width: 768px) { .compare-growth__panel { padding: 1.5rem; } }
  @media (min-width: 1024px) { .compare-growth__panel { padding: 2rem; } }
  @media (min-width: 1280px) {
    .compare-growth__panel {
      width: 33.3333%;
      border-left: 0;
      border-top: 1px solid var(--cg-border, color-mix(in srgb, var(--cg-fg, #1a1c23) 18%, transparent));
      border-radius: 0 var(--cg-radius, 6px) var(--cg-radius, 6px) 0;
    }
  }

  /* Per-card swap (desktop only): images on the right, text on the left.
     Mobile keeps the images-over-text stack for both variants. Corners &
     the seam border flip to match the mirrored layout. */
  @media (min-width: 1280px) {
    .compare-growth__card--reverse { flex-direction: row-reverse; }
    .compare-growth__card--reverse .compare-growth__shots {
      border-radius: 0 var(--cg-radius, 6px) var(--cg-radius, 6px) 0;
    }
    .compare-growth__card--reverse .compare-growth__panel {
      border-left: 1px solid var(--cg-border, color-mix(in srgb, var(--cg-fg, #1a1c23) 18%, transparent));
      border-right: 0;
      border-radius: var(--cg-radius, 6px) 0 0 var(--cg-radius, 6px);
    }
  }

  /* Quote = the card's body copy. Uses the global body font (--font-primary,
     driven by Theme settings) so the whole section stays on the site's default
     typeface. It also tracks the theme's subtext scale: --section-subtext-size
     comes from Theme settings (global) and is overridden per-section by
     `subtext_size` (via section-typography); the 1.35x keeps the quote
     emphasised (~22–26px at the 16–19px default) while still responding. */
  .compare-growth__quote {
    margin: 0 0 1rem;
    font-family: var(--font-primary--family, var(--font-subheading--family, sans-serif));
    font-size: calc(var(--section-subtext-size, 19px) * 1.35);
    line-height: 1.3;
    color: inherit;
    text-wrap: pretty;
  }
  @media (min-width: 768px) { .compare-growth__quote { margin-bottom: 1.5rem; } }
  @media (min-width: 1024px) { .compare-growth__quote { margin-bottom: 1rem; } }

  /* Customer name — a display heading. Uses the section heading font SYSTEM:
     --section-heading-family defaults to the theme's global section-heading font
     and is overridden per-section by the "Heading font" control (heading_style,
     via section-typography), so changing/overriding the heading font flows into
     the name too. Size stays a fixed display clamp (not --section-heading-size,
     which is reserved for the section title). */
  .compare-growth__name {
    margin: 0 0 1rem;
    font-family: var(--section-heading-family, var(--font-condensed--family, sans-serif));
    font-weight: var(--section-heading-weight, 700);
    font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: inherit;
  }

  .compare-growth__tags {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .compare-growth__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;
    padding: 0.4375rem 0.5rem;
    border-radius: 2px;
    background: var(--cg-tag-bg, #EEF1F6);
    color: var(--cg-tag-fg, #1a1c23);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  @media (min-width: 1024px) { .compare-growth__badge { padding: 0.5rem 0.625rem; } }

  .compare-growth__badge--shot {
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;
    z-index: 1;
  }
  @media (min-width: 768px) { .compare-growth__badge--shot { bottom: 0.5rem; left: 0.5rem; } }
  @media (min-width: 1024px) { .compare-growth__badge--shot { bottom: 0.75rem; left: 0.75rem; } }

  .compare-growth__taking {
    margin: auto 0 0;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.125rem);
    line-height: 1.4;
  }
  .compare-growth__taking-label { color: color-mix(in srgb, var(--cg-fg, #1a1c23) 70%, transparent); }
  .compare-growth__product {
    color: var(--cg-accent, #0047AB);
    text-decoration: none;
  }
  a.compare-growth__product:hover { text-decoration: underline; }

  /* ─── Footer note ─── */
  /* Caption — tracks the subtext scale at 0.8x so it stays smaller than the
     quote (≈13–15px at the default) while following the same control. */
  .compare-growth__foot {
    padding-top: 1rem;
    text-align: center;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: calc(var(--section-subtext-size, 19px) * 0.8);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--cg-fg, #1a1c23) 70%, transparent);
  }

  .compare-growth__empty {
    text-align: center;
    padding: 2rem;
    border: 1px dashed color-mix(in srgb, var(--cg-fg, #1a1c23) 25%, transparent);
    border-radius: 8px;
    color: color-mix(in srgb, var(--cg-fg, #1a1c23) 65%, transparent);
  }

  /* ─── See All Results CTA ─── */
  .compare-growth__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3rem);
  }
  .compare-growth__results {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--cg-fg, #1a1c23);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 1rem;
    font-weight: 600;
  }
  .compare-growth__results-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 3px;
    background: var(--cg-btn-bg, var(--cg-accent, #0047AB));
    color: var(--cg-btn-fg, #ffffff);
    transition: transform 150ms ease;
  }
  .compare-growth__results-icon svg { width: 0.9rem; height: 0.9rem; display: block; }
  .compare-growth__results-label { line-height: 1.2; }
  .compare-growth__results:hover .compare-growth__results-icon { transform: translateX(2px); }
  .compare-growth__results:hover .compare-growth__results-label { text-decoration: underline; }
  .compare-growth__results:focus-visible { outline: 2px solid var(--cg-accent, #0047AB); outline-offset: 3px; border-radius: 4px; }

  @media (prefers-reduced-motion: reduce) {
    .compare-growth__track { transition: none; }
    .compare-growth__thumbs { scroll-behavior: auto; }
    .compare-growth__results-icon { transition: none; }
  }
/* END_SECTION:compare-growth */

/* START_SECTION:compare-table (INDEX:23) */
.compare-table {
    padding: var(--ct-pt, 80px) var(--page-margin, 1.5rem) var(--ct-pb, 80px);
    color: var(--ct-fg, var(--color-foreground));
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  /* Section-level audience targeting: when a handle is set the
     section is hidden by default and only shown once the JS confirms
     the active audience matches. Same convention as `stats` and the
     other audience-aware sections. */
  .compare-table[data-audience-target] { display: none; }
  .compare-table[data-audience-target].is-audience-match { display: block; }
  .compare-table__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }
  .compare-table__title {
    text-align: center;
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
    color: inherit;
    text-wrap: balance;
  }
  .compare-table__empty {
    text-align: center;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }

  /* Shared cell styling */
  .cmp-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 80px;
    padding: 0.75rem 1rem;
    text-align: center;
    background: var(--ct-cell-bg, #f3f4f2);
  }
  .cmp-cell--corner { background: var(--ct-cell-bg, #f3f4f2); }
  .cmp-cell--head {
    font-size: clamp(0.8rem, 1vw, 0.875rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ct-fg, var(--color-foreground));
  }
  .cmp-cell__label { display: inline-block; }
  .cmp-cell__info {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: help;
    display: inline-flex;
    color: color-mix(in srgb, currentColor 60%, transparent);
    flex-shrink: 0;
  }
  .cmp-cell--rowlabel {
    font-family: var(--font-heading--family, inherit);
    font-weight: 700;
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .cmp-cell--brand {
    background: var(--ct-brand-bg, #1a1c23);
    color: var(--ct-brand-fg, #fff);
  }
  .cmp-mark--check { color: currentColor; }
  .cmp-mark--cross { color: color-mix(in srgb, currentColor 65%, transparent); }
  .cmp-mark--text {
    font-family: var(--font-mono--family, monospace);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ─── Mobile: transposed 3-column grid (label | brand | other) ─── */
  .cmp-grid--desktop { display: none; }
  .cmp-grid--mobile {
    display: grid;
    /* 90px min (was 120px): with two auto value columns beside it, 120px
       forced horizontal overflow on small phones. */
    grid-template-columns: minmax(90px, 1.4fr) 1fr 1fr;
  }
  .cmp-grid--mobile .cmp-cell--head-mobile {
    justify-content: flex-start;
    text-align: left;
  }
  /* Bigger tap area for the (i) info button on the touch layout — padding
     with negative margin grows the hit zone without moving anything. */
  .cmp-grid--mobile .cmp-cell__info {
    padding: 0.6rem;
    margin: -0.6rem;
  }

  /* Small phones (<=400px): the two value tracks above are bare `1fr`, i.e.
     `minmax(auto, 1fr)` — `auto` floors each track at its content's min-content
     width, so they refuse to shrink and the row overflows. Measured in-browser:
     27px of horizontal page scroll at 320px (390px was already clean, which is
     why the earlier 120px->90px label fix looked sufficient). minmax(0,1fr)
     removes the floor and lets the text wrap instead. Scoped to <=400px so the
     tuned 401-1023 layout is untouched; desktop (>=1024) uses a different grid. */
  @media (max-width: 400px) {
    .cmp-grid--mobile {
      grid-template-columns: minmax(72px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    .cmp-grid--mobile > * {
      min-width: 0;
      overflow-wrap: anywhere;
    }
  }

  /* Tap tooltip popover — `title` is hover-only, useless on touch. */
  .cmp-info-pop {
    position: absolute;
    z-index: 30;
    max-width: min(260px, calc(100vw - 2rem));
    padding: 0.6rem 0.8rem;
    background: var(--color-foreground, #1a1c23);
    color: var(--color-background, #fff);
    font-size: 0.8rem;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  }

  /* ─── Desktop: 1 label column + N feature columns ─── */
  @media (min-width: 1024px) {
    .cmp-grid--mobile { display: none; }
    .cmp-grid--desktop {
      display: grid;
      grid-template-columns: minmax(140px, 1.6fr) repeat(var(--ct-cols, 6), minmax(0, 1fr));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cmp-cell { transition: none; }
  }
/* END_SECTION:compare-table */

/* START_SECTION:comparison-cards-magicmind (INDEX:24) */
.mm-compare {
    background: var(--mm-bg, transparent);
    color: var(--mm-fg, #000000);
    padding: 48px var(--page-margin, 24px) 64px;
  }
  @media (min-width: 1024px) {
    .mm-compare { padding-top: var(--mm-pt, 80px); padding-bottom: var(--mm-pb, 100px); }
  }
  @media (max-width: 767px) {
    .mm-compare { padding-top: min(var(--mm-pt, 80px), 48px); padding-bottom: min(var(--mm-pb, 80px), 64px); }
  }
  .mm-compare__inner { max-width: 1320px; margin: 0 auto; }

  /* Header */
  .mm-compare__head { text-align: center; max-width: 56ch; margin: 0 auto 48px; }
  .mm-compare__title { margin: 0; color: inherit; text-wrap: balance; }
  .mm-compare__subtitle {
    margin: 14px auto 0;
    font-family: var(--section-subtext-family, var(--font-primary--family));
    font-size: var(--section-subtext-size);
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 78%, transparent);
  }

  /* Grid Layout: 4 -> 2 -> 1 */
  .mm-compare__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mm-gap, 20px);
    align-items: stretch;
  }
  @media (max-width: 1024px) {
    .mm-compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  }
  @media (max-width: 600px) {
    .mm-compare__grid { grid-template-columns: 1fr; gap: 44px; }
  }

  /* Card Container */
  .mm-compare__card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mm-card-bg, #ffffff);
    border: 1px solid #000000;
    border-radius: var(--mm-radius, 12px);
    padding-bottom: 28px;
    box-sizing: border-box;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .mm-compare__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
  }
  .mm-compare__card.is-featured {
    border-width: 1.5px;
  }

  /* Featured Tag */
  .mm-compare__flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    z-index: 10;
  }

  /* Top Image Box */
  .mm-compare__media {
    width: 100%;
    height: 270px;
    background: #f7f7f7;
    border-bottom: 1px solid #000000;
    border-top-left-radius: calc(var(--mm-radius, 12px) - 1px);
    border-top-right-radius: calc(var(--mm-radius, 12px) - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
  }
  .mm-compare__img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }
  .mm-compare__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  .mm-compare__img--svg {
    height: 220px;
    width: auto;
  }

  /* Middle Body */
  .mm-compare__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 14px 16px;
    flex: 1;
  }

  /* Card Logo / Title */
  .mm-compare__card-logo {
    margin-bottom: 8px;
    max-width: 160px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mm-compare__logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .mm-compare__card-title {
    margin: 0 0 10px;
    font-family: var(--font-heading--family, sans-serif);
    font-weight: 800;
    font-style: italic;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #000000;
    text-align: center;
  }
  .mm-compare__card-title a {
    color: inherit;
    text-decoration: none;
  }

  /* Ratings - Big Stars */
  .mm-compare__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
  }
  .mm-compare__stars {
    color: #000000;
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 1;
  }
  .mm-compare__rating-text {
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .mm-compare__score {
    font-weight: 700;
  }
  .mm-compare__reviews {
    color: #000000;
    font-weight: 400;
  }

  /* Fact Pill Badge — Horizontal Line Across Card with Centered Badge */
  .mm-compare__badge-line {
    position: relative;
    width: 100%;
    margin: 0 0 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mm-compare__badge-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    right: -14px;
    height: 1px;
    background: #000000;
    transform: translateY(-50%);
    z-index: 1;
  }
  .mm-compare__badge {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 5px 16px;
    border-radius: 5px;
    border: 1px solid #000000;
    color: #000000;
    font-family: monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: lowercase;
  }

  /* Subtitle / Description */
  .mm-compare__desc {
    margin: 0 0 20px;
    font-family: var(--font-primary--family, sans-serif);
    font-size: 15px;
    line-height: 1.45;
    color: #000000;
    text-align: center;
    min-height: 48px;
    padding: 0 12px;
    display: block !important;
  }
  .mm-compare__desc p {
    margin: 0;
    display: inline;
  }
  .mm-compare__desc em,
  .mm-compare__desc strong {
    font-style: italic;
    font-weight: 700;
    margin: 0 3px;
    display: inline !important;
  }

  /* Footer / Specs line */
  .mm-compare__footer-box {
    width: 100%;
    padding: 14px 10px 24px;
    border-top: 1px solid #000000;
    margin-top: auto;
    text-align: center;
  }
  .mm-compare__footer {
    font-family: monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000000;
    line-height: 1.45;
    word-break: break-word;
  }

  /* CTA Button */
  .mm-compare__cta {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 26px;
    border: 1px solid #000000;
    border-radius: 5px;
    background: #000000;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    z-index: 5;
  }
  .mm-compare__cta em {
    font-style: italic;
    font-weight: 700;
    margin-left: 3px;
  }
  .mm-compare__cta:hover {
    background: #222222;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  }
/* END_SECTION:comparison-cards-magicmind */

/* START_SECTION:consultation-form (INDEX:26) */
.cform {
    padding: var(--cf-pt, 80px) var(--page-margin, 1.5rem) var(--cf-pb, 80px);
    margin: var(--cf-mt, 0) 0 var(--cf-mb, 0);
    background: var(--cf-section-bg, transparent);
    color: var(--cf-text, var(--color-foreground));
    scroll-margin-top: calc(var(--header-height, 7rem) + 1rem);
  }
  .cform[data-audience-target] {
    display: none;
  }
  .cform[data-audience-target].is-audience-match {
    display: block;
  }

  .cform__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  @media (min-width: 900px) {
    .cform__inner {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 4rem;
      align-items: stretch;
    }
  }

  /* ─── Intro ─── */
  .cform__eyebrow {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.4em 0.8em;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 2px;
    background: var(--cf-eyebrow-bg, #0047ab);
    color: var(--cf-eyebrow-color, #fff);
  }
  .cform__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
    line-height: 1.12;
    margin: 0 0 1rem;
    text-wrap: balance;
    color: inherit;
  }
  .cform__lead {
    font-size: var(--text-subheading, 22px);
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 82%, transparent);
  }
  .cform__lead :is(p) {
    margin: 0 0 0.75rem;
  }
  .cform__lead :is(p):last-child {
    margin: 0;
  }
  /* Reassurance points — icon chip + text rows */
  .cform__points {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .cform__point {
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }
  .cform__point-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cf-accent, #0047ab) 12%, transparent);
    color: var(--cf-accent, #0047ab);
  }
  .cform__point-icon svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .cform__point-text {
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 500;
    color: color-mix(in srgb, currentColor 92%, transparent);
  }

  /* Promo banner (mirrors the PDP promo: rounded card + pill badge on top edge) */
  .cform__promo {
    position: relative;
    margin-top: 1.75rem;
  }
  .cform__promo-frame {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 88px;
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    background: var(--cf-promo-bg, #1a1c23);
  }
  .cform__promo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .cform__promo--image .cform__promo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
  }
  .cform__promo-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--cf-promo-fg, #fff);
  }
  .cform__promo-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .cform__promo-sub {
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.3;
  }
  .cform__promo-badge {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--cf-promo-badge-bg, #0047ab);
    color: var(--cf-promo-badge-fg, #fff);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* ─── Form card ─── */
  .cform__card {
    background: var(--cf-card-bg, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--cf-radius, 12px);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
  }
  /* Form / app block fill the card height so the success state can match the
     form's footprint instead of collapsing to its own content height. */
  .cform__form,
  .cform__app { flex: 1 1 auto; display: flex; flex-direction: column; }
  .cform__form:has(.cform__success) { justify-content: center; min-height: 20rem; }

  .cform__errors {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--style-border-radius-inputs, 4px);
    background: color-mix(in srgb, #e6492d 10%, transparent);
    color: #b3260f;
    font-size: 0.9rem;
  }
  .cform__errors ul {
    margin: 0;
    padding-left: 1.1rem;
  }

  .cform__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }
  @media (max-width: 559px) {
    .cform__grid {
      grid-template-columns: 1fr;
    }
  }
  .cform__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .cform__field--full {
    grid-column: 1 / -1;
  }
  .cform__label {
    font-size: 0.85rem;
    font-weight: 600;
  }
  .cform__req {
    color: var(--cf-accent, #0047ab);
  }

  .cform__field input,
  .cform__field select,
  .cform__field textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.18));
    border-radius: var(--style-border-radius-inputs, 4px);
    background: var(--color-background, #fff);
    color: inherit;
    font-size: 1rem;
  }
  .cform__field textarea {
    resize: vertical;
    min-height: 6.5rem;
  }

  .cform__field input:focus,
  .cform__field textarea:focus {
    outline: none;
    border-color: var(--cf-accent, #0047ab);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent, #0047ab) 22%, transparent);
  }

  /* ─── Custom dropdown ─── */
  .cform__dd {
    position: relative;
  }
  .cform__dd-toggle {
    appearance: none;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.18));
    border-radius: var(--style-border-radius-inputs, 4px);
    background: var(--color-background, #fff);
    color: inherit;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .cform__dd-toggle:focus-visible,
  .cform__dd.is-open .cform__dd-toggle {
    outline: none;
    border-color: var(--cf-accent, #0047ab);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent, #0047ab) 22%, transparent);
  }
  .cform__dd-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cform__dd-chevron {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    color: color-mix(in srgb, currentColor 55%, transparent);
    transition: transform 200ms ease, color 150ms ease;
  }
  .cform__dd.is-open .cform__dd-chevron {
    transform: rotate(180deg);
    color: var(--cf-accent, #0047ab);
  }

  .cform__dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--cf-card-bg, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: calc(var(--style-border-radius-inputs, 4px) + 6px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
    max-height: 15rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }
  .cform__dd.is-open .cform__dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .cform__dd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    border-radius: var(--style-border-radius-inputs, 4px);
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    color: inherit;
    transition: background 120ms ease;
  }
  .cform__dd-option.is-active {
    background: color-mix(in srgb, var(--cf-accent, #0047ab) 10%, transparent);
  }
  .cform__dd-option.is-selected {
    font-weight: 600;
    color: var(--cf-accent, #0047ab);
  }
  .cform__dd-option.is-selected::after {
    content: '';
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.4rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
  }

  .cform__submit {
    appearance: none;
    border: 0;
    cursor: pointer;
    margin-top: 1.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: var(--style-border-radius-inputs, 4px);
    background: var(--cf-btn-bg, #0047ab);
    color: var(--cf-btn-text, #fff);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    transition: opacity 150ms ease;
  }
  .cform__submit:hover {
    opacity: 0.9;
  }

  .cform__footnote {
    margin: 1.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }
  .cform__footnote :is(p) {
    margin: 0;
  }

  /* ─── Success ─── */
  .cform__success {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: var(--cf-accent, #0047ab);
  }
  .cform__success svg {
    margin: 0 auto 1rem;
  }
  .cform__success-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading--family, serif);
    font-size: 1.5rem;
    color: var(--cf-text, var(--color-foreground));
  }
  .cform__success-body {
    margin: 0;
    color: color-mix(in srgb, var(--cf-text, var(--color-foreground)) 78%, transparent);
  }
/* END_SECTION:consultation-form */

/* START_SECTION:consultation-hero (INDEX:27) */
.chero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(var(--chero-mt, 0px) - 1.5rem - var(--header-height, 7rem));
    margin-bottom: var(--chero-mb, 0);
    background: var(--chero-bg, color-mix(in srgb, var(--color-foreground) 5%, var(--color-background)));
    color: var(--chero-text, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
  }

  .chero--media-right .chero__media   { order: 2; }
  .chero--media-right .chero__content { order: 1; }
  .chero[data-audience-target] { display: none; }
  .chero[data-audience-target].is-audience-match { display: grid; }

  .chero__media { position: relative; overflow: hidden; background: color-mix(in srgb, var(--color-foreground) 6%, transparent); line-height: 0; min-height: 280px; }
  .chero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .chero__img--placeholder { background: color-mix(in srgb, var(--color-foreground) 8%, transparent); fill: color-mix(in srgb, var(--color-foreground) 25%, transparent); }

  .chero__content { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 4vw, 4rem); }
  .chero__box { width: 100%; max-width: 40rem; display: flex; flex-direction: column; gap: 1.25rem; }
  .chero--center .chero__box { align-items: center; text-align: center; margin: 0 auto; }
  .chero--left   .chero__box { align-items: flex-start; text-align: left; }

  .chero__eyebrow { display: inline-block; margin: 0; padding: 0.4em 0.8em; font-family: var(--font-subheading--family, sans-serif); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; border-radius: 2px; background: var(--chero-eyebrow-bg, #0047ab); color: var(--chero-eyebrow-color, #fff); }

  .chero__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: var(--chero-h-size, clamp(2rem, 1.2rem + 2.6vw, 3.25rem));
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
    color: inherit;
  }
  .chero--style-condensed .chero__title { letter-spacing: -0.02em; }
  .chero--style-serif .chero__title { font-family: var(--font-heading--serif) !important; }

  .chero__title em, .chero__title i { font-style: italic; }

  .chero__subtitle {
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--chero-sub-size, var(--text-subheading, 22px));
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 85%, transparent);
  }
  .chero__subtitle :is(p) { margin: 0 0 0.5rem; font-size: inherit; }
  .chero__subtitle :is(p):last-child { margin-bottom: 0; }

  .chero__disclaimer { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: color-mix(in srgb, currentColor 70%, transparent); }
  .chero__disclaimer p { margin: 0; }
  .chero__disclaimer a { color: inherit; text-decoration: underline; }

  .chero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
  .chero--center .chero__actions { justify-content: center; }
  .chero--left   .chero__actions { justify-content: flex-start; }
  .chero__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.6rem; min-height: 48px; border-radius: var(--style-border-radius-inputs, 4px); background: var(--btn-bg, #0047ab); color: var(--btn-fg, #fff); border: 1px solid var(--btn-bg, #0047ab); font-family: var(--font-subheading--family, sans-serif); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: opacity 150ms ease, transform 150ms ease; }
  .chero__btn:hover { opacity: 0.92; transform: translateY(-1px); }
  .chero__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-background, #fff), 0 0 0 4px var(--btn-bg, #0047ab); }
  .chero__btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

  @media (max-width: 767px) {
    .chero { grid-template-columns: 1fr; min-height: auto; }
    .chero__media, .chero--media-right .chero__media { order: 0; height: 42vh; min-height: 240px; }
    .chero__content, .chero--media-right .chero__content { order: 1; padding: 2.5rem 1.5rem 3rem; }
    .chero__title { font-size: clamp(1.9rem, 6vw, 2.6rem); }
    .chero__actions { width: 100%; }
    .chero__btn { flex: 1 1 100%; justify-content: center; }
  }
/* END_SECTION:consultation-hero */

/* START_SECTION:contact-cards (INDEX:29) */
.contact-cards {
    padding: var(--cc-pt, 80px) var(--page-margin, 1.5rem) var(--cc-pb, 80px);
    color: var(--cc-fg);
    background: var(--sec-bg, var(--color-background));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .contact-cards__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* Optional head */
  .contact-cards__head {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto 2.25rem;
  }
  .contact-cards__title {
    font-size: var(--text-heading);
    line-height: 1.15;
    margin: 0 0 0.75rem;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
  }
  .contact-cards__intro {
    font-size: 1rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--cc-fg) 80%, transparent);
    margin: 0;
  }
  .contact-cards__intro :is(p, span) { margin: 0; font-size: inherit; }

  /* 2-col grid on desktop, 1-col on mobile */
  .contact-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .contact-cards__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
    }
  }

  /* ─── Card ─── */
  .contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: var(--cc-radius, 4px);
    padding: 2rem 1.5rem;
    gap: 1rem;
    height: 100%;
    box-sizing: border-box;
  }
  @media (min-width: 1024px) {
    .contact-card { padding: 2.5rem; }
  }

  .contact-card--filled {
    background: var(--cc-filled-bg);
    border: 0;
  }
  .contact-card--outlined {
    background: transparent;
    border: 1px solid var(--cc-outline);
  }

  .contact-card__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cc-fg);
  }
  .contact-card__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--cc-fg) 82%, transparent);
    max-width: 22rem;
  }
  .contact-card__body :is(p, span) { margin: 0; font-size: inherit; }

  /* Push the CTA to the bottom so cards with shorter bodies still align. */
  .contact-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--cc-fg);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    transition: opacity 150ms ease;
  }
  .contact-card__cta:hover { opacity: 0.8; }

  .contact-card__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cc-icon-bg);
    flex: 0 0 auto;
  }
  .contact-card__cta--textlink {
    font-size: 1.1rem;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .contact-card__cta--textlink:hover { opacity: 1; text-decoration-thickness: 2px; }

  /* Filled-card cards get more breathing room before the CTA so the
     button looks anchored to the bottom of the tile. */
  .contact-card--filled .contact-card__body { margin-bottom: 1.5rem; }

  /* Outlined-card variant compresses padding on mobile slightly. */
  @media (max-width: 767px) {
    .contact-card--outlined { padding: 1.25rem 1.5rem 1.5rem; }
  }
/* END_SECTION:contact-cards */

/* START_SECTION:custom-section (INDEX:33) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }

  /* ───────── Responsive (≤1024px only — desktop is frozen) ───────── */
  @media (max-width: 1024px) {
    /* Grid children default to min-width:auto, so wide content (tables, long
       unbroken strings) forces the item to its min-content width. The section
       has overflow:hidden, so the excess is CLIPPED rather than scrolling the
       page body — min-width:0 lets the item shrink into the track instead of
       being silently cut off. No max-width here on purpose: blocks are
       "@theme", so a block may deliberately full-bleed out of the content
       column and clamping it would break that. */
    .custom-section__content > * {
      min-width: 0;
    }
    /* width:100% + height:auto leaves a landscape image too short to cover a
       tall phone/tablet viewport, exposing gaps top and bottom. (max-width:100%
       is omitted — critical.css already applies it to every img sitewide.) */
    .custom-section__background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
/* END_SECTION:custom-section */

/* START_SECTION:customer-reviews (INDEX:34) */
.customer-reviews {
    background: var(--cr-bg, transparent);
    color: var(--cr-fg, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    padding: 40px var(--page-margin, 24px);
  }
  @media (min-width: 1024px) {
    .customer-reviews { padding: var(--cr-pt, 80px) var(--page-margin, 24px) var(--cr-pb, 80px); }
  }
  .customer-reviews__inner { max-width: 1600px; margin: 0 auto; }

  /* ─── Header: heading (left) + filter/note (right) ─── */
  .customer-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-bottom: var(--cr-head-gap, 56px);
  }
  .customer-reviews__title {
    flex: 1 1 22rem;
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--section-heading-size, clamp(2rem, 1.1rem + 3vw, 3.25rem));
    line-height: var(--section-heading-line-height, 1.12);
    letter-spacing: var(--section-heading-tracking, -0.005em);
    text-transform: var(--section-heading-transform, none);
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }
  .customer-reviews__title em, .customer-reviews__title i { font-style: italic; }

  .customer-reviews__tools {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    padding-top: 0.35rem;
  }
  .customer-reviews__note {
    margin: 0;
    font-size: 0.85rem;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }

  /* ─── Filter: grouped multi-select disclosure ─── */
  .cr-filter { position: relative; }

  .cr-filter__toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 15rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 8px;
    background: var(--cr-card-bg, #ffffff);
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease;
  }
  .cr-filter__toggle:hover { border-color: color-mix(in srgb, currentColor 40%, transparent); }
  .cr-filter__toggle:focus-visible { outline: 2px solid var(--cr-accent, #0047AB); outline-offset: 2px; }
  .cr-filter__toggle-label { color: color-mix(in srgb, currentColor 75%, transparent); white-space: nowrap; }
  .cr-filter__chevron { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; transition: transform 200ms ease; }
  .cr-filter__toggle[aria-expanded="true"] .cr-filter__chevron { transform: rotate(180deg); }

  .cr-filter__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    width: min(22rem, calc(100vw - 2.5rem));
    max-height: min(70vh, 34rem);
    display: flex;
    flex-direction: column;
    background: var(--cr-card-bg, #ffffff);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
    text-align: left;
  }
  .cr-filter__panel[hidden] { display: none; }

  .cr-filter__groups { overflow-y: auto; padding: 1.25rem; }
  .cr-filter__group + .cr-filter__group {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  }
  .cr-filter__group-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
  }
  .cr-filter__opt {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.4rem 0;
    cursor: pointer;
  }
  .cr-filter__check {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
  }
  .cr-filter__check:checked { background: var(--cr-accent, #0047AB); border-color: var(--cr-accent, #0047AB); }
  .cr-filter__check:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .cr-filter__check:focus-visible { outline: 2px solid var(--cr-accent, #0047AB); outline-offset: 2px; }
  .cr-filter__opt-text { display: flex; flex-direction: column; line-height: 1.25; }
  .cr-filter__opt-main { font-family: var(--font-subheading--family, sans-serif); font-weight: 600; font-size: 0.95rem; }
  .cr-filter__count { color: var(--cr-accent, #0047AB); font-weight: 600; }
  .cr-filter__opt-sub { font-size: 0.8rem; color: color-mix(in srgb, currentColor 55%, transparent); }

  .cr-filter__actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  }
  .cr-filter__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .cr-filter__btn--clear {
    background: transparent;
    color: inherit;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
  }
  .cr-filter__btn--clear:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); }
  .cr-filter__btn--apply { background: var(--cr-accent, #0047AB); color: #fff; }
  .cr-filter__btn--apply svg { width: 1.05rem; height: 1.05rem; }
  .cr-filter__btn--apply:hover { filter: brightness(0.94); }
  .cr-filter__btn:focus-visible { outline: 2px solid var(--cr-accent, #0047AB); outline-offset: 2px; }

  /* ─── List of full-width review cards ─── */
  .customer-reviews__list {
    display: flex;
    flex-direction: column;
    gap: var(--cr-card-gap, 24px);
  }

  .cr-card {
    display: flex;
    flex-direction: column;
    background: var(--cr-card-bg, #ffffff);
    border: 1px solid var(--cr-card-border, color-mix(in srgb, var(--cr-fg, #1a1c23) 14%, transparent));
    border-radius: var(--cr-radius, 6px);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .cr-card { flex-direction: row; }
    /* Per-block "Swap sides" toggle — photos move to the right, text to the
       left. Mobile keeps photos on top regardless. */
    .cr-card--reverse { flex-direction: row-reverse; }
  }
  .cr-card.is-hidden { display: none; }

  /* Media = before/after pair. aspect-ratio reserves space so nothing shifts
     as the (lazy) photos load. */
  .cr-card__media { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  @media (min-width: 1024px) { .cr-card__media { width: 66.6667%; } }
  .cr-card__shot {
    position: relative;
    margin: 0;
    aspect-ratio: var(--cr-ratio, 3 / 4);
    overflow: hidden;
    background: color-mix(in srgb, var(--cr-fg, #1a1c23) 6%, #ffffff);
  }
  .cr-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .cr-card__img--ph { object-fit: contain; opacity: 0.5; }
  .cr-card__shot-label {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 1;
    padding: 0.4rem 0.55rem;
    border-radius: 2px;
    background: var(--cr-label-bg, #ffffff);
    color: var(--cr-label-fg, var(--cr-fg, #1a1c23));
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Info panel */
  .cr-card__info {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.5rem;
  }
  @media (min-width: 1024px) { .cr-card__info { width: 33.3333%; padding: 2rem; } }

  .cr-card__quote {
    margin: 0 0 1.25rem;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.3;
    color: inherit;
    text-wrap: pretty;
  }
  .cr-card__name {
    margin: 0 0 1.25rem;
    /* Reviewer name follows the SECTION heading font (global typography +
       the per-section heading override); size is editable via "Reviewer
       name size". */
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--cr-name-size, 1.25rem);
    line-height: 1.15;
    color: inherit;
  }
  .cr-card__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .cr-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-radius: 2px;
    background: var(--cr-tag-bg, #EEF1F6);
    color: var(--cr-tag-fg, var(--cr-fg, #1a1c23));
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Product + caption pinned to the bottom of the (tall) info panel. */
  .cr-card__foot { margin-top: auto; padding-top: 2rem; }
  .cr-card__product {
    margin: 0;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .cr-card__product a { color: var(--cr-accent, #0047AB); text-decoration: underline; text-underline-offset: 2px; }
  .cr-card__product a:hover { text-decoration: none; }
  .cr-card__caption {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 60%, transparent);
  }

  .customer-reviews__empty {
    text-align: center;
    padding: 2rem;
    color: color-mix(in srgb, currentColor 60%, transparent);
  }

  @media (max-width: 767px) {
    .customer-reviews__head { flex-direction: column; }
    .customer-reviews__tools { align-items: stretch; width: 100%; }
    .cr-filter { width: 100%; }
    .cr-filter__panel { left: 0; right: auto; }
  }
/* END_SECTION:customer-reviews */

/* START_SECTION:disclosure-grid (INDEX:38) */
.disclosure-grid {
    padding: var(--dg-pt, 80px) var(--page-margin, 1.5rem) var(--dg-pb, 80px);
    background: var(--sec-bg, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .disclosure-grid__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Header: title (left) + badge (right) ─── */
  .disclosure-grid__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
  }
  .disclosure-grid__title {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.15;
    color: var(--color-foreground);
    text-wrap: balance;
  }
  .disclosure-grid__badge {
    width: clamp(135px, 14vw, 204px);
    height: auto;
    display: block;
  }
  @media (min-width: 768px) {
    .disclosure-grid__head {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }
  }

  /* ─── Grid of disclosure cells ───
     Container draws the top + left edges, each cell draws its right + bottom
     edge, so every cell is fully boxed and shared borders collapse. */
  .disclosure-grid__items {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
  }
  @media (min-width: 900px) {
    .disclosure-grid__items { grid-template-columns: 1fr 1fr; }
  }

  /* ─── Side drawer ─── */
  .dg-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
  }
  .dg-drawer[hidden] { display: none; }
  .dg-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 28, 27, 0.65);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .dg-drawer.is-open .dg-drawer__overlay { opacity: 1; }

  .dg-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--dg-drawer-bg, #ECF1F5);
    color: var(--color-foreground);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.22);
  }
  .dg-drawer.is-open .dg-drawer__panel { transform: translateX(0); }
  @media (min-width: 768px)  { .dg-drawer__panel { width: 600px; } }
  @media (min-width: 1024px) { .dg-drawer__panel { width: 800px; } }

  .dg-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    background: var(--dg-drawer-bg, #ECF1F5);
  }
  .dg-drawer__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--color-foreground);
  }
  .dg-drawer__close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    background: var(--dg-icon-bg, #1a1c23);
    color: var(--dg-icon-fg, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dg-drawer__close svg { display: block; }

  .dg-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(2.5rem, 6vw, 5rem);
  }

  .dg-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(2rem, 4vw, 2.5rem) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    scroll-margin-top: 96px;
  }
  .dg-row__label p {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.2;
    color: var(--color-foreground);
  }
  .dg-row__body {
    color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .dg-row__body :is(p) { margin: 0 0 0.75rem; }
  .dg-row__body :is(p):last-child { margin-bottom: 0; }
  .dg-row__body :is(ul, ol) { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
  .dg-row__body :is(ul) { list-style: disc; }
  .dg-row__body :is(ol) { list-style: decimal; }
  .dg-row__body li { margin: 0 0 0.4rem; }
  .dg-row__body a { text-decoration: underline; text-underline-offset: 2px; }
  @media (min-width: 1024px) {
    .dg-row { flex-direction: row; gap: 2rem; }
    .dg-row__label { flex: 0 0 291px; }
    .dg-row__body { flex: 1 1 auto; }
  }

  /* Scroll lock while the drawer is open. */
  html.dg-locked { overflow: hidden; }
/* END_SECTION:disclosure-grid */

/* START_SECTION:doctor-quotes (INDEX:39) */
.doctor-quotes {
    background: var(--dq-bg, transparent);
    color: var(--dq-fg, var(--color-foreground));
    padding: var(--dq-pt, 80px) var(--page-margin, 1.5rem) var(--dq-pb, 80px);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .doctor-quotes__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Header ─── */
  .dq-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .dq-head__title {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 700) !important;
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: inherit;
    text-transform: uppercase;
  }
  .dq-head__rec {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-self: flex-end;
    text-align: right;
  }
  .dq-head__rec-strong {
    margin: 0;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: inherit;
  }
  .dq-head__rec-muted {
    margin: 0;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--dq-fg, var(--color-foreground)) 65%, transparent);
  }
  .dq-head__rec-muted sup { font-size: 0.7em; }

  @media (min-width: 900px) {
    .dq-head {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  /* ─── Quotes Container & Cards ─── */
  .dq-quotes {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    border: 1px solid var(--dq-divider, color-mix(in srgb, currentColor 15%, transparent));
    border-radius: 6px;
    overflow: hidden;
  }
  .dq-quote {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    height: 100%;
    box-sizing: border-box;
  }
  .dq-quote + .dq-quote {
    border-top: 1px solid var(--dq-divider, color-mix(in srgb, currentColor 15%, transparent));
  }

  .dq-quote__media { width: 100%; }
  .dq-quote__img,
  .dq-quote__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: var(--dq-img-ratio, 4 / 3);
    object-fit: cover;
    object-position: center top;
    border-radius: 4px;
  }
  .dq-quote__placeholder {
    background:
      linear-gradient(135deg, color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 16%, transparent));
  }

  .dq-quote__text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1 1 auto;
  }
  .dq-quote__body {
    margin: 0;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.55;
    color: inherit;
    text-wrap: pretty;
  }
  .dq-quote__person { 
    display: flex; 
    flex-direction: column; 
    gap: 0.35rem; 
    margin-top: auto; 
  }
  .dq-quote__name {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: inherit;
  }
  .dq-quote__role {
    margin: 0;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--dq-fg, var(--color-foreground)) 65%, transparent);
  }

  /* ─── Desktop: 3-up grid with vertical borders ─── */
  @media (min-width: 1024px) {
    .dq-quotes {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dq-quote {
      padding: 2.25rem 2rem;
    }
    .dq-quote + .dq-quote {
      border-top: 0;
      border-left: 1px solid var(--dq-divider, color-mix(in srgb, currentColor 15%, transparent));
    }
  }

  /* ─── Footnote ─── */
  .dq-footnote {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--dq-fg, var(--color-foreground)) 60%, transparent);
  }
/* END_SECTION:doctor-quotes */

/* START_SECTION:efficacy-banner (INDEX:40) */
.efficacy-banner {
    padding: var(--eb-pt, 0) 0 var(--eb-pb, 80px);
    margin-top: var(--eb-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    color: var(--eb-heading, #1a1c23);
  }

  /* ─── Banner ─────────────────────────────────────────────────────────
     One full-bleed image fills the whole banner edge to edge, starting at
     the very top. The heading is overlaid on top of the image.
     Mobile: image stacked on top, heading below (kept readable). */
  .eb-banner {
    position: relative;
    background: var(--eb-banner-bg, #edebe7);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .eb-banner__media {
    position: relative;
    width: 100%;
    height: 48vh;
    min-height: 280px;
  }
  .eb-banner__img,
  .eb-banner__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .eb-banner__placeholder {
    background:
      radial-gradient(120% 120% at 20% 10%, #5a3a23 0%, #2e1d12 70%);
  }

  .eb-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 6vw, 3.5rem) var(--page-margin, 1.5rem);
  }
  .eb-banner__heading {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(2rem, 5.5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--eb-heading, #1a1c23);
    text-wrap: balance;
  }

  /* ─── Cards ──────────────────────────────────────────────────────────
     Mobile: single column, normal flow, small gap above the banner. */
  .eb-cards-wrap {
    max-width: var(--page-width, 110rem);
    margin-inline: auto;
    margin-top: 1.25rem;
    padding: 0 var(--page-margin, 1.5rem);
  }
  .eb-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.85rem, 1.5vw, 1.25rem);
  }
  .eb-card {
    background: var(--eb-card-bg, #fff);
    color: var(--eb-card-fg, #1a1c23);
    border: 1px solid var(--eb-card-border, #e4e3df);
    border-radius: var(--eb-card-radius, 4px);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .eb-card__heading {
    margin: 0;
    font-family: var(--font-heading--family, inherit);
    font-weight: 600;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    line-height: 1.15;
    color: inherit;
    text-wrap: balance;
  }
  .eb-card__body {
    margin: 0;
    font-size: clamp(1.02rem, 1.2vw, 1.15rem);
    line-height: 1.55;
    color: color-mix(in srgb, var(--eb-card-fg, #1a1c23) 88%, transparent);
  }
  .eb-card__body > :first-child { margin-top: 0; }
  .eb-card__body > :last-child { margin-bottom: 0; }
  .eb-card__body p { margin: 0 0 0.75rem; }

  /* ─── Tablet: cards become a 3-up row ─── */
  @media (min-width: 768px) {
    .eb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ─── Desktop: full-bleed image, heading overlaid on the right ─── */
  @media (min-width: 1024px) {
    .eb-banner {
      display: block;                       /* image fills, content overlays */
      min-height: var(--eb-bh, 90vh);
    }
    /* Image covers the entire banner, edge to edge, top to bottom. */
    .eb-banner__media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      z-index: 0;
    }
    /* Heading overlay pinned to the right portion, vertically centered. */
    .eb-banner__content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--eb-text-w, 52%);
      align-items: flex-start;
      padding: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 6vw, 6rem);
    }

    /* Pull the card row up to overlap the bottom of the banner. */
    .eb-cards-wrap {
      position: relative;
      z-index: 3;
      margin-top: calc(var(--eb-overlap, 90px) * -1);
    }
    .eb-cards {
      gap: clamp(1rem, 1.5vw, 1.5rem);
    }
    .eb-card {
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    }
  }
/* END_SECTION:efficacy-banner */

/* START_SECTION:faq (INDEX:41) */
.faq {
    padding: var(--faq-pt, 80px) var(--page-margin, 1.5rem) var(--faq-pb, 80px);
    background: var(--sec-bg, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .faq__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  .faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .faq__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .faq__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    line-height: 1.15;
    margin: 0;
    color: var(--color-foreground);
    text-wrap: balance;
  }
  /* Mobile: `.faq__head` uses align-items:flex-start, so the heading sized to
     its (max-content) width — ~685px — and spilled off-screen while wrapping
     oddly. Force it to the column width so it wraps cleanly, and trim the
     condensed size a touch. Higher specificity + !important to beat the global
     `.shopify-section :is(h1,h2)` heading rule. */
  @media (max-width: 767px) {
    /* Centre the whole head block (heading + See-all button) on mobile. */
    .faq__head {
      align-items: center;
      text-align: center;
    }
    .faq h2.faq__title {
      /* --faq-title-m = the merchant's "Heading size — mobile" slider (set on
         the section's style attr when > 0); the clamp is the tuned auto
         fallback. This rule only exists ≤767, so the slider is mobile-only. */
      font-size: var(--faq-title-m, clamp(18px, 5vw, 24px)) !important;
      width: 100%;
      align-self: stretch;
      text-align: center;
      text-wrap: balance;
    }
  }
  .faq__intro {
    color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
    font-size: 1rem;
    line-height: 1.5;
  }
  .faq__intro :is(p, span) { margin: 0; }

  .faq__seeall {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
  }
  .faq__seeall-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .faq__seeall-icon svg { display: block; }
  .faq__seeall:hover .faq__seeall-icon { background: color-mix(in srgb, var(--color-foreground) 85%, black); }

  .faq__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  }

  .faq-item.is-collapsed { display: none !important; }

  /* Hide the toggle if every visible FAQ already fits within the initial count */
  .faq__seeall.is-unneeded { display: none; }

  @media (min-width: 900px) {
    .faq__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      gap: 3rem;
    }
    .faq__head { padding-right: 2rem; }
  }
/* END_SECTION:faq */

/* START_SECTION:feature-banner (INDEX:42) */
.feature-banner {
    padding: var(--fb-pt, 80px) var(--page-margin, 1.5rem) var(--fb-pb, 80px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .feature-banner__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  .feature-banner__card {
    background: var(--fb-card-bg, #1a1c23);
    color: var(--fb-fg, #ffffff);
    border-radius: var(--fb-radius, 12px);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
  }

  /* ─── Media / waves ─── (mobile: on top) */
  .feature-banner__media {
    order: 1;
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 260px; /* keep room for the extended marker on narrow screens */
    overflow: hidden;
  }
  /* Soft out-of-focus glow behind the waves for depth (cool light with a
     faint warm spot), like the reference. */
  .feature-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(55% 75% at 70% 42%, rgba(205, 220, 228, 0.22), transparent 68%),
      radial-gradient(34% 46% at 58% 56%, rgba(196, 132, 96, 0.12), transparent 70%);
  }

  .fb-waves {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Waves ease in from the left edge into the dark background. */
    /* Fade harder toward both edges so only the middle three waves
       (crests at 30/50/70%) read clearly; the outer two (10/90%) dissolve. */
    -webkit-mask-image: linear-gradient(to right, transparent 6%, #000 24%, #000 76%, transparent 94%);
            mask-image: linear-gradient(to right, transparent 6%, #000 24%, #000 76%, transparent 94%);
  }
  .fb-wave {
    width: 100%;
    height: 100%;
    display: block;
  }
  .fb-wave path {
    fill: none;
    stroke: var(--fb-wave, #ffffff);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  /* Gentle, subtle float so the waves feel alive. */
  @media (prefers-reduced-motion: no-preference) {
    .fb-wave { animation: fb-wave-float 7s ease-in-out infinite; }
  }
  @keyframes fb-wave-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
  }

  /* ─── Peak marker: label · dot · dashed line · pill ───
     Anchored to the top crest via --fb-crest (= top crest Y / 300). */
  .fb-marker {
    position: absolute;
    left: var(--fb-marker-x, 50%);
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
  }
  .fb-marker__label {
    position: absolute;
    top: calc(var(--fb-crest, 40%) - 1.55rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fb-fg, #ffffff) 68%, transparent);
    white-space: nowrap;
  }
  .fb-marker__dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fb-marker, #ffc942);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--fb-marker, #ffc942) 20%, transparent);
  }
  .fb-marker__dot--top { top: var(--fb-crest, 40%); }
  /* End dot sits at the wave baseline, so the marker length tracks the
     wave height (crest → bottom) instead of dropping into empty space. */
  .fb-marker__dot--end { top: var(--fb-base, 60%); }
  /* Dashed line spans exactly the wave height: crest dot → baseline dot. */
  .fb-marker__line {
    position: absolute;
    top: var(--fb-crest, 40%);
    left: 50%;
    width: 0;
    height: calc(var(--fb-base, 60%) - var(--fb-crest, 40%));
    border-left: 1px dashed color-mix(in srgb, var(--fb-marker, #ffc942) 55%, transparent);
  }
  /* Pill sits just below the baseline dot. */
  .fb-marker__pill {
    position: absolute;
    top: calc(var(--fb-base, 60%) + 0.8rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fb-fg, #ffffff) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--fb-fg, #ffffff) 16%, transparent);
    color: color-mix(in srgb, var(--fb-fg, #ffffff) 92%, transparent);
    font-size: 0.8rem;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }

  /* ─── Content ─── (mobile: below, left-aligned) */
  .feature-banner__content {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: left;
  }
  .feature-banner__heading {
    margin: 0;
    max-width: 22rem;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 500) !important;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: inherit;
    text-wrap: pretty;
  }
  .feature-banner__heading-italic {
    font-family: var(--font-heading--family);
    font-style: italic;
    font-weight: 400;
  }
  .feature-banner__body {
    margin: 0;
    max-width: 24rem;
    font-size: var(--section-subtext-size, clamp(0.82rem, 0.95vw, 0.95rem));
    line-height: 1.55;
    color: color-mix(in srgb, var(--fb-fg, #ffffff) 78%, transparent);
  }
  .feature-banner__body :is(p) { margin: 0 0 0.7rem; }
  .feature-banner__body :is(p):last-child { margin-bottom: 0; }

  /* ─── Desktop: side by side ─── */
  @media (min-width: 768px) {
    .feature-banner__card {
      grid-template-columns: var(--fb-content-col, 38%) 1fr;
      align-items: stretch;
      min-height: var(--fb-minh, 420px);
    }
    .feature-banner__content {
      order: 1;
      justify-content: space-between;
      text-align: left;
      gap: 1.5rem;
      padding: clamp(2.5rem, 4vw, 4.5rem);
    }
    .feature-banner__media {
      order: 2;
      aspect-ratio: auto; /* fill the row height set by the content/min-height */
    }
  }
/* END_SECTION:feature-banner */

/* START_SECTION:feature-highlight-magicmind (INDEX:44) */
.hm-v3-faq {
    position: relative;
    padding-top: var(--sec-pt, 80px);
    padding-bottom: var(--sec-pb, 80px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    background: var(--mm-bg, transparent);
    color: var(--mm-fg, #1c1b1b);
    font-family: var(--section-subtext-family, Circular, Roboto, -apple-system, sans-serif);
  }
  @media (min-width: 1024px) {
    .hm-v3-faq {
      padding-top: var(--sec-pt, 80px);
      padding-bottom: var(--sec-pb, 80px);
    }
  }
  @media (max-width: 767px) {
    .hm-v3-faq {
      padding-top: min(var(--sec-pt, 80px), 48px);
      padding-bottom: min(var(--sec-pb, 80px), 48px);
    }
  }

  .hm-v3-faq__wrapper {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 var(--page-margin, 24px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }

  /* Mobile Header - Hidden on Desktop */
  .hm-v3-faq__mob {
    display: none;
  }
  .hm-v3-faq__desk {
    display: block;
  }

  /* Left Image */
  .hm-v3-faq__img-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hm-v3-faq__img {
    max-width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: contain;
    display: block;
  }

  /* Right Main Content */
  .hm-v3-faq__main {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Title & Subtitle */
  .hm-v3-faq__title {
    font-family: var(--section-heading-family, var(--heading-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-heading-size, clamp(30px, 4vw, 44px));
    text-transform: var(--section-heading-transform, inherit);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mm-fg, #1c1b1b);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
  }
  .hm-v3-faq__subtitle {
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-subtext-size, 16px);
    line-height: 1.5;
    color: var(--mm-fg, #1c1b1b);
    margin: 0 0 32px;
  }

  /* Accordion List & Item Divider Spacing */
  .hm-v3-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .hm-v3-faq__item {
    border-bottom: 1px solid rgba(28, 27, 27, 0.18);
    margin-bottom: 0;
  }

  .hm-v3-faq__item__question {
    display: flex;
    align-items: center;
    padding: 24px 0;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: padding 0.25s ease;
  }
  .hm-v3-faq__item.open .hm-v3-faq__item__question {
    padding-top: 24px;
    padding-bottom: 12px;
  }

  .hm-v3-faq__item__question p {
    margin: 0;
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: clamp(17px, 1.25vw, 19.5px);
    font-weight: 700;
    color: var(--mm-fg, #1c1b1b);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .hm-v3-faq__item__prefix {
    font-size: 20px;
    font-weight: 700;
    color: var(--mm-fg, #1c1b1b);
    display: inline-block;
    width: 18px;
    flex-shrink: 0;
  }

  /* Accordion Answer — Monospace text with generous vertical gap */
  .hm-v3-faq__item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
    padding: 0;
  }
  .hm-v3-faq__item.open .hm-v3-faq__item__answer {
    max-height: 250px;
    opacity: 1;
    padding: 6px 0 28px 0;
  }
  .hm-v3-faq__item__answer p {
    margin: 0;
    font-family: var(--font-mono, "Akkurat-Mono-_1_", "Courier New", monospace);
    font-size: clamp(14.5px, 1.1vw, 16px);
    line-height: 1.6;
    color: var(--mm-fg, #1c1b1b);
    letter-spacing: -0.01em;
    max-width: 95%;
  }

  /* Mobile Responsive Stacking */
  @media (max-width: 900px) {
    .hm-v3-faq__wrapper {
      grid-template-columns: 1fr !important;
      gap: 28px;
    }
    .hm-v3-faq__mob {
      display: block;
    }
    .hm-v3-faq__desk {
      display: none;
    }
    .hm-v3-faq__title {
      font-size: 28px;
      margin-bottom: 12px;
    }
    .hm-v3-faq__subtitle {
      font-size: 15px;
      margin-bottom: 20px;
    }
    .hm-v3-faq__img {
      max-height: 300px;
    }
  }
/* END_SECTION:feature-highlight-magicmind */

/* START_SECTION:feature-split-magicmind (INDEX:46) */
.hm-v3-img-text {
    position: relative;
    padding-top: var(--sec-pt, 80px);
    padding-bottom: var(--sec-pb, 80px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    background: var(--mm-bg, transparent);
    color: var(--mm-fg, #1c1b1b);
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
  }
  @media (min-width: 1024px) {
    .hm-v3-img-text {
      padding-top: var(--sec-pt, 80px);
      padding-bottom: var(--sec-pb, 80px);
    }
  }
  @media (max-width: 767px) {
    .hm-v3-img-text {
      padding-top: min(var(--sec-pt, 80px), 48px);
      padding-bottom: min(var(--sec-pb, 80px), 48px);
    }
  }

  .hm-v3-img-text__wrapper {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 var(--page-margin, 24px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }

  /* Column ordering */
  .hm-v3-img-text.m-reverse .hm-v3-img-text__media { order: 1; }
  .hm-v3-img-text.m-reverse .hm-v3-img-text__content { order: 2; }
  .hm-v3-img-text:not(.m-reverse) .hm-v3-img-text__content { order: 1; }
  .hm-v3-img-text:not(.m-reverse) .hm-v3-img-text__media { order: 2; }

  /* Media Frame with Arched Top */
  .hm-v3-img-text__media {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top-left-radius: var(--media-radius-top, 140px);
    border-top-right-radius: var(--media-radius-top, 140px);
  }
  .hm-v3-img-text__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hm-v3-img-text__media__img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
  }
  .placeholder-svg { background: #f4f4f4; }

  /* Adapt Image to original size */
  .hm-v3-img-text__media.m-adapt-image .hm-v3-img-text__media__img,
  .hm-v3-img-text__media.m-adapt-image .hm-v3-img-text__carousel-slide .hm-v3-img-text__media__img {
    max-height: none;
    object-fit: initial;
  }
  .hm-v3-img-text__media.m-adapt-image picture { height: auto; }

  /* Automatically Scrolling Images (Carousel) */
  .hm-v3-img-text__carousel {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .hm-v3-img-text__carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
  }
  .hm-v3-img-text__carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .hm-v3-img-text__carousel-slide .hm-v3-img-text__media__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /* Grid & Stack Layouts */
  .hm-v3-img-text__multi-layout {
    display: flex;
    gap: 16px;
    width: 100%;
  }
  .hm-v3-img-text__multi-layout--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .hm-v3-img-text__multi-layout--stack {
    flex-direction: column;
  }
  .hm-v3-img-text__multi-item {
    width: 100%;
    height: 100%;
  }
  .hm-v3-img-text__multi-item .hm-v3-img-text__media__img {
    height: 100%;
    object-fit: cover;
  }

  /* Content Column */
  .hm-v3-img-text__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hm-v3-img-text__title {
    font-family: var(--section-heading-family, var(--heading-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-heading-size, clamp(32px, 4.2vw, 48px));
    text-transform: var(--section-heading-transform, inherit);
    font-weight: 700;
    line-height: 1.12;
    color: var(--mm-fg, #1c1b1b);
    margin: 0 0 24px;
    letter-spacing: -0.02em;
  }
  @media (max-width: 767px) {
    .hm-v3-img-text__title { font-size: var(--section-heading-size-mobile, var(--section-heading-size, 32px)); }
  }

  .hm-v3-img-text__text {
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-subtext-size, 16px);
    line-height: 1.5;
    color: var(--mm-fg, #1c1b1b);
    margin: 0 0 24px;
    width: 100%;
  }
  .hm-v3-img-text__text p { margin: 0 0 16px; }
  .hm-v3-img-text__text p:last-child { margin-bottom: 0; }
  .hm-v3-img-text__text ul { margin: 0; padding-left: 22px; list-style-type: disc; }
  .hm-v3-img-text__text li { margin-bottom: 18px; font-size: var(--section-subtext-size, 15.5px); }
  .hm-v3-img-text__text li:last-child { margin-bottom: 0; }
  .hm-v3-img-text__text strong { font-weight: 700; color: #000000; }

  @media (max-width: 767px) {
    .hm-v3-img-text__text, .hm-v3-img-text__text li { font-size: var(--section-subtext-size-mobile, var(--section-subtext-size, 15px)); }
  }

  /* Outline Button */
  .hm-v3-img-text__btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #000000;
    background: transparent;
    color: #000000;
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    margin-top: 8px;
    transition: background 0.2s ease, color 0.2s ease;
    cursor: pointer;
  }
  .hm-v3-img-text__btn:hover { background: #000000; color: #ffffff; }

  /* Mobile Stack */
  @media (max-width: 900px) {
    .hm-v3-img-text__wrapper { grid-template-columns: 1fr !important; gap: 36px; }
    .hm-v3-img-text.m-reverse .hm-v3-img-text__media, .hm-v3-img-text:not(.m-reverse) .hm-v3-img-text__media { order: 1 !important; }
    .hm-v3-img-text.m-reverse .hm-v3-img-text__content, .hm-v3-img-text:not(.m-reverse) .hm-v3-img-text__content { order: 2 !important; }
    .hm-v3-img-text__media { border-top-left-radius: 0; border-top-right-radius: 0; }
  }
/* END_SECTION:feature-split-magicmind */

/* START_SECTION:featured-steps (INDEX:47) */
.featured-steps {
    position: relative;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-top: var(--pt);
    padding-bottom: var(--pb);
    overflow: hidden; /* Contains the absolute positioned edge images */
  }

  /* Secondary Breakout Fallback for Flex/Grid Parent Containers */
  .featured-steps--full-bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .featured-steps__inner {
    position: relative;
    z-index: 2; /* Keeps content above background edge images */
    margin: 0 auto;
    padding: 0 1.5rem;
    max-width: 1200px;
  }

  /* Absolute Corner Images */
  .fs-edge-img {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    max-width: 30vw;
    height: auto;
    object-fit: contain;
  }
  .fs-edge-img--tl {
    top: 0;
    left: 0;
    transform: translate(-30%, -20%);
  }
  .fs-edge-img--bl {
    bottom: 0;
    left: 0;
    transform: translate(-30%, 20%);
  }
  .fs-edge-img--br {
    bottom: 0;
    right: 0;
    transform: translate(30%, 20%);
  }
  .fs-edge-img--tr {
    top: 0;
    right: 0;
    transform: translate(30%, -20%);
  }

  /* Header Typography */
  .featured-steps__header {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .featured-steps__heading {
    font-family: var(--font-heading-family, inherit);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--text-color);
  }
  /* Subtext is wired to the theme's unified subtext vars (Theme settings >
     Typography + this section's "Subtext size/font" overrides).

     NOTE: deliberately NO :where(#shopify-section-…) local default for this
     section. `featured-steps__subheading` already matches the global
     `.shopify-section :is(…[class*="__subhead"])` rule in css-variables.liquid,
     which is (0,3,0) and beats this (0,1,0) rule. So this subheading was ALREADY
     rendering at the global --section-subtext-size before the section was wired
     — the original `clamp(1rem, 1.5vw, 1.15rem)` here never applied. Adding a
     local default would shrink it below the original rendering.

     (Same for the heading: .featured-steps__heading is an <h2>, already governed
     by the global `.shopify-section :is(h1,h2)` rule.)

     This rule is therefore redundant with the global one; it is kept only so the
     section reads self-documenting. It must stay in the plain var() form. */
  .featured-steps__subheading {
    font-family: var(--section-subtext-family);
    font-size: var(--section-subtext-size);
    margin: 0;
    opacity: 0.9;
  }

  /* Grid Layout */
  .featured-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto 4rem;
  }

  /* Block Items */
  .fs-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .fs-block__circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  .fs-block__circle span {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1;
  }
  .fs-block__text {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-color);
  }
  .fs-block__text p {
    margin: 0;
  }

  /* CTA Button */
  .featured-steps__actions {
    text-align: center;
    position: relative;
    z-index: 3;
  }
  .fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--text-color);
    border-radius: 99px; /* Pill shape */
    transition: all 0.3s ease;
  }
  .fs-btn:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-text);
    border-color: var(--btn-hover-bg);
  }

  /* Responsive Adjustments */
  @media screen and (max-width: 1024px) {
    .featured-steps__header {
      margin-bottom: 2.5rem;
    }
    .featured-steps__grid {
      gap: 2rem;
      margin-bottom: 3rem;
    }
  }
  @media screen and (max-width: 768px) {
    /* Merchant padding can be set as high as 150px — cap it on phones/tablets. */
    .featured-steps {
      padding-top: min(var(--pt), 56px);
      padding-bottom: min(var(--pb), 56px);
    }
    .featured-steps__grid {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .fs-edge-img {
      max-width: 45vw; /* Make edge images a bit larger on mobile proportionally */
    }
  }
  @media screen and (max-width: 480px) {
    .featured-steps__inner {
      padding: 0 1.25rem;
    }
    .featured-steps__header {
      margin-bottom: 2rem;
    }
    .featured-steps__grid {
      gap: 2.25rem;
      margin-bottom: 2.5rem;
    }
    /* 45vw corner art sits behind the copy and crowds it on small phones. */
    .fs-edge-img {
      max-width: 34vw;
    }
    .fs-btn {
      /* Full-width pill inside the gutters, comfortably over the 44px target. */
      width: 100%;
      max-width: 320px;
      min-height: 48px;
      padding: 0.9rem 1.5rem;
    }
  }
/* END_SECTION:featured-steps */

/* START_SECTION:footer (INDEX:49) */
.footer {
    background: var(--ft-bg);
    color: var(--ft-fg);
    padding: var(--ft-pt, 64px) 0 var(--ft-pb, 40px);
    width: 100%;
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    
    /* NUTRAFOL FONT STYLING */
    font-family: 'Avenir Next', 'Proxima Nova', 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .footer a { color: inherit; text-decoration: none; }
  .footer a:hover { opacity: 0.75; }

  .footer__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    padding: 0 var(--page-margin, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  /* ─── Top: logo (left-aligned) ─── */
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
  }
  .footer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer__logo-img {
    max-height: 3rem;
    width: auto;
    display: block;
  }
  .footer__logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  /* ─── Main row: info (left) + nav columns (right) ─── */
  .footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  .footer__info {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    text-align: left;
    max-width: 38rem;
  }
  .footer__info-block {
    color: var(--ft-fg);
    font-size: 0.875rem; /* 14px equivalent */
    line-height: 1.6;
    font-weight: 400;
  }
  .footer__info-block :is(p, span) { margin: 0 0 0.5rem; color: inherit; }
  .footer__info-block :is(p, span):last-child { margin-bottom: 0; }
  .footer__info-block strong { font-weight: 600; }

  .footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2.5rem 2rem;
  }

  @media (min-width: 900px) {
    .footer__main {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: 4rem;
    }
  }

  /* ─── Newsletter ─── */
  .footer__newsletter {
    max-width: 28rem;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .footer__newsletter-label {
    margin: 0;
    color: var(--ft-fg);
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .footer__newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ft-fg) 30%, transparent);
  }
  .footer__newsletter-input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: 0.75rem 0.25rem;
    color: var(--ft-fg);
    font: inherit;
    font-size: 0.875rem;
  }
  .footer__newsletter-input::placeholder { color: var(--ft-muted); }
  .footer__newsletter-input:focus { outline: none; }
  .footer__newsletter-submit {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0 0.25rem;
    color: var(--ft-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── Trust row: payment + shipping (left) · socials (far right) ─── */
  .footer__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.75rem 2.5rem;
  }
  .footer__trust-groups {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .footer__trust-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .footer__trust-heading {
    margin: 0;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ft-fg);
  }
  .footer__trust-media { display: flex; }
  .footer__trust-image {
    max-height: 1.75rem;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
  }

  /* ─── Bottom row: copyright + socials ─── */
  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--ft-fg) 12%, transparent);
  }
  .footer__copyright {
    color: var(--ft-muted);
    font-size: 0.75rem;
    line-height: 1.6;
    max-width: 60rem;
    font-weight: 400;
  }
  .footer__copyright p { margin: 0 0 0.25rem; }
  .footer__legal :is(p, span) { margin: 0; }

  .footer__socials {
    display: flex;
    gap: 0.5rem;
    margin-right: 4rem; /* Added to nudge the icons slightly to the left */
  }
  .footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ft-fg) 10%, transparent);
    color: var(--ft-fg);
    transition: background 0.2s ease, opacity 0.2s ease;
  }
  .footer__socials a:hover {
    background: color-mix(in srgb, var(--ft-fg) 20%, transparent);
    opacity: 1;
  }

  @media (max-width: 700px) {
    .footer__trust {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .footer__trust-groups {
      justify-content: center;
      width: 100%;
    }
    .footer__trust-group { align-items: center; }
    .footer__socials {
      margin-right: 0; /* Ensures the icons center correctly on mobile devices */
    }
    .footer__bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .footer__copyright { text-align: center; }
  }
/* END_SECTION:footer */

/* START_SECTION:formula-spotlight (INDEX:50) */
.formula-spotlight {
    background: var(--fs-bg, transparent);
    color: var(--fs-fg, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    padding: 40px var(--page-margin, 24px);
  }
  @media (min-width: 1024px) {
    .formula-spotlight { padding: var(--fs-pt, 80px) var(--page-margin, 24px) var(--fs-pb, 80px); }
  }
  .formula-spotlight__inner { max-width: 1600px; margin: 0 auto; }

  /* ─── Optional heading ─── */
  .formula-spotlight__head { text-align: center; margin-bottom: var(--fs-head-gap, 48px); }
  .formula-spotlight__title {
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--section-heading-size, clamp(1.9rem, 1.1rem + 2.6vw, 3rem));
    line-height: var(--section-heading-line-height, 1.15);
    letter-spacing: var(--section-heading-tracking, -0.005em);
    text-transform: var(--section-heading-transform, none);
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }
  .formula-spotlight__title em, .formula-spotlight__title i { font-style: italic; }

  /* ─── Bento grid ─── */
  .formula-spotlight__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fs-gap, 8px);
    align-items: stretch;
  }
  /* Shopify wraps theme blocks in injected divs — make the wrapper a flex
     shell so every card stretches to the full row height, and hoist the
     per-card "wide" span up onto the wrapper with :has(). */
  .formula-spotlight__grid > * { display: flex; min-width: 0; }
  .formula-spotlight__grid > .fs-card--wide,
  .formula-spotlight__grid > *:has(> .fs-card--wide) { grid-column: span 2; }

  /* ─── Card base ─── */
  .fs-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 2.5rem 1.75rem;
    background: var(--fs-card-bg, var(--fs-card-bg-default, #F7F7F4));
    color: var(--fs-card-fg, inherit);
    border-radius: var(--fs-card-radius, 8px);
    overflow: hidden;
  }

  /* ─── Intro card ─── */
  .fs-card--intro {
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .fs-card__tag {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 2px;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
  }
  .fs-card__lead {
    margin: auto 0;
    max-width: 16em;
    /* This lead deliberately follows the HEADING font (heading_style), not the
       subtext font — !important beats the global subtext-family rule (0,2,0). */
    font-family: var(--section-heading-family, var(--font-heading--family)) !important;
    font-weight: var(--section-heading-weight, 400);
    font-style: italic;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    line-height: 1.3;
    color: inherit;
    text-wrap: balance;
  }
  .fs-card__note {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 65%, transparent);
  }

  /* ─── Ingredient card ─── */
  /* The media box is a FIXED square (--fs-img-size) so names/descriptions
     align across the row; the photo inside scales by the card's own
     --fs-img-zoom without changing the layout. */
  .fs-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--fs-img-size, 190px);
    margin-bottom: 2rem;
  }
  .fs-card__img {
    width: calc(var(--fs-img-size, 190px) * var(--fs-img-zoom, 1));
    max-width: 100%;
    height: auto;
    display: block;
  }
  .fs-card__img--ph { opacity: 0.4; height: 100%; object-fit: contain; }

  .fs-card__name {
    margin: 0 0 1rem;
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--fs-name-size, 28px);
    line-height: 1.15;
    color: inherit;
    text-wrap: balance;
  }
  .fs-card__desc {
    margin: 0;
    max-width: 34em;
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--section-subtext-size, 1rem);
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 85%, transparent);
  }

  /* ─── Responsive: 2 columns on tablet, 1 on mobile ─── */
  @media (max-width: 989px) {
    .formula-spotlight__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 599px) {
    .formula-spotlight__grid { grid-template-columns: 1fr; }
    .formula-spotlight__grid > .fs-card--wide,
    .formula-spotlight__grid > *:has(> .fs-card--wide) { grid-column: auto; }
    .fs-card { padding: 2rem 1.25rem; }
    .fs-card--intro { min-height: 20rem; }
  }
/* END_SECTION:formula-spotlight */

/* START_SECTION:growth-timeline (INDEX:52) */
/* Outer wrapper: bg fills full viewport width. Horizontal padding
     uses the global `--page-margin` (Theme settings → Layout) so this
     section tracks the same edge inset as every other section. */
  .growth-timeline {
    background: var(--gt-bg, transparent);
    color: var(--gt-fg, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    padding: 40px var(--page-margin, 24px);
  }

  @media (min-width: 1024px) {
    .growth-timeline {
      padding: var(--gt-pt, 80px) var(--page-margin, 24px) var(--gt-pb, 80px);
    }
  }

  .growth-timeline__inner {
    max-width: 1600px;
    margin: 0 auto;
  }

  /* ─── Head ─── */
  .growth-timeline__head {
    text-align: center;
    margin-bottom: var(--gt-head-gap, 80px);
  }

  .growth-timeline__title {
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }

  /* ─── Body: milestones row with the track running through it ─── */
  .growth-timeline__body { display: block; }

  .growth-timeline__milestones {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gt-gap, 64px);
  }

  /* Track is now a positioning container only — the dots and fill
     are separate children so they can have independent masks. */
  .growth-timeline__track {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--gt-tag-y, 0.75rem);
    height: 2px;
    z-index: 0;
    pointer-events: none;
  }

  /* Dotted layer: full-width background of evenly-spaced dots. A
     horizontal mask gradient fades the left and right ends so the
     line eases in/out instead of terminating with a hard pixel
     boundary. */
  .growth-timeline__track-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--gt-line, currentColor) 1px, transparent 1.4px);
    background-size: 9px 100%;
    background-repeat: repeat-x;
    background-position: 0 50%;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  }

  /* Solid fill = "progress so far". JS sets `width` every animation
     frame. Both left and right edges fade with the same mask the
     dots use, so the fill bar reads as softly-terminated like the
     dotted layer at both ends. */
  .growth-timeline__track-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: var(--gt-fill, var(--gt-line, var(--color-brand, currentColor)));
    border-radius: 1px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  }

  /* Badges sit ABOVE the track. Shopify wraps theme blocks in
     injected divs — target ANY direct child of the milestones grid
     that isn't the track. Without an explicit position, those
     wrappers are unpositioned and paint BELOW the absolutely-
     positioned track regardless of z-index. */
  .growth-timeline__milestones > *:not(.growth-timeline__track) {
    position: relative;
    z-index: 10;
    isolation: isolate;
  }

  /* Track explicitly below everything. */
  .growth-timeline__track { z-index: 0; }
  .growth-timeline__track-bg,
  .growth-timeline__track-fill { z-index: 0; }

  /* ─── Disclaimer ─── */
  .growth-timeline__disclaimer {
    margin-top: 2rem;
    text-align: center;
  }
  .growth-timeline__disclaimer p {
    margin: 0;
    font-size: 0.8rem;
    color: color-mix(in srgb, currentColor 60%, transparent);
  }

  /* ─── Responsive (mobile = single column stack) ─── */
  @media (max-width: 768px) {
    .growth-timeline__milestones {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    /* No horizontal track when stacking vertically. */
    .growth-timeline__track { display: none; }
    .growth-timeline__head { margin-bottom: 1.75rem; }
  }
/* END_SECTION:growth-timeline */

/* START_SECTION:guarantee-banner-magicmind (INDEX:53) */
.hm-v3-img-text-block {
    position: relative;
    padding-top: var(--sec-pt, 60px);
    padding-bottom: var(--sec-pb, 60px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    background-color: var(--mm-bg, transparent);
    background-image: var(--mm-sec-bg-img, none);
    background-size: cover;
    background-position: center;
    color: var(--mm-fg, #1c1b1b);
    font-family: var(--section-subtext-family, Circular, Roboto, -apple-system, sans-serif);
  }
  @media (min-width: 1024px) {
    .hm-v3-img-text-block {
      padding-top: var(--sec-pt, 60px);
      padding-bottom: var(--sec-pb, 60px);
    }
  }
  @media (max-width: 767px) {
    .hm-v3-img-text-block {
      padding-top: min(var(--sec-pt, 60px), 36px);
      padding-bottom: min(var(--sec-pb, 60px), 36px);
    }
  }

  .hm-v3-img-text-block__container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 var(--page-margin, 24px);
  }

  .hm-v3-img-text-block__wrapper {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    background: #f7f7f7;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }

  /* Reverse layout: Media left, Content right */
  .hm-v3-img-text-block.m-reverse .hm-v3-img-text-block__media {
    order: 1;
  }
  .hm-v3-img-text-block.m-reverse .hm-v3-img-text-block__content {
    order: 2;
  }

  /* Left Content Panel */
  .hm-v3-img-text-block__content {
    padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--mm-card-bg, #f7f7f7);
    background-image: var(--mm-card-bg-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hm-v3-img-text-block__title {
    font-family: var(--section-heading-family, var(--heading-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-heading-size, clamp(30px, 3.6vw, 38px));
    text-transform: var(--section-heading-transform, inherit);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mm-fg, #000000);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
  }

  .hm-v3-img-text-block__text {
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-subtext-size, 15px);
    line-height: 1.48;
    color: var(--mm-fg, #1c1b1b);
    margin: 0 0 20px;
  }
  .hm-v3-img-text-block__text p {
    margin: 0 0 16px;
  }

  /* Checklist with Checkmark ✓ Icon */
  .hm-v3-img-text-block__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hm-v3-img-text-block__checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    color: #1c1b1b;
    line-height: 1.35;
  }
  .hm-v3-img-text-block__check {
    font-size: 15px;
    font-weight: 800;
    color: #000000;
    display: inline-block;
  }

  /* Solid Black Button */
  .hm-v3-img-text-block__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    height: 52px;
    padding: 0 32px;
    background: #000000;
    color: #ffffff;
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border-radius: 4px;
    margin-top: 14px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  .hm-v3-img-text-block__btn:hover {
    background: #222222;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  .hm-v3-img-text-block__btn svg {
    flex: 0 0 auto;
  }

  /* Right Media Column */
  .hm-v3-img-text-block__media {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
  }
  .hm-v3-img-text-block__media__img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
  }

  /* Mobile Stacking */
  @media (max-width: 900px) {
    .hm-v3-img-text-block__wrapper {
      grid-template-columns: 1fr !important;
    }
    .hm-v3-img-text-block.m-reverse .hm-v3-img-text-block__media,
    .hm-v3-img-text-block:not(.m-reverse) .hm-v3-img-text-block__media {
      order: 2 !important;
    }
    .hm-v3-img-text-block.m-reverse .hm-v3-img-text-block__content,
    .hm-v3-img-text-block:not(.m-reverse) .hm-v3-img-text-block__content {
      order: 1 !important;
    }
    .hm-v3-img-text-block__title {
      font-size: 28px;
      margin-bottom: 14px;
    }
    .hm-v3-img-text-block__media__img {
      max-height: 320px;
    }
    .hm-v3-img-text-block__btn {
      width: 100%;
    }
  }
/* END_SECTION:guarantee-banner-magicmind */

/* START_SECTION:hero-carousel-magicmind (INDEX:58) */
.mm-hero-carousel {
    position: relative;
    width: 100%;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    padding-top: var(--sec-pt, 0);
    padding-bottom: var(--sec-pb, 0);
    overflow: hidden;
    background: #000000;
  }

  .mm-hero-carousel__wrapper {
    position: relative;
    width: 100%;
    height: var(--hero-h-desk, 600px);
  }
  @media (max-width: 767px) {
    .mm-hero-carousel__wrapper {
      height: var(--hero-h-mob, 450px);
    }
  }

  .mm-hero-carousel__track {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .mm-hero-carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    z-index: 1;
  }
  .mm-hero-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .mm-hero-carousel__media-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mm-hero-carousel__img,
  .mm-hero-carousel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mm-hero-carousel__ph {
    width: 100%;
    height: 100%;
    background: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mm-hero-carousel__ph svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
  }

  .mm-hero-carousel__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* Content Overlay */
  .mm-hero-carousel__content-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: clamp(24px, 5vw, 64px);
    box-sizing: border-box;
  }
  .mm-hero-carousel__content-wrap--left {
    justify-content: flex-start;
    text-align: left;
  }
  .mm-hero-carousel__content-wrap--center {
    justify-content: center;
    text-align: center;
  }
  .mm-hero-carousel__content-wrap--right {
    justify-content: flex-end;
    text-align: right;
  }

  .mm-hero-carousel__content {
    max-width: 680px;
    color: #ffffff;
  }

  .mm-hero-carousel__eyebrow {
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 12px;
  }

  .mm-hero-carousel__heading {
    font-family: var(--section-heading-family, var(--heading-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-heading-size, clamp(36px, 5vw, 64px));
    text-transform: var(--section-heading-transform, inherit);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
  }

  .mm-hero-carousel__subtext {
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-subtext-size, clamp(16px, 1.5vw, 20px));
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 28px;
  }

  .mm-hero-carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: #ffffff;
    color: #000000;
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
  }
  .mm-hero-carousel__btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
  }

  /* Arrows */
  .mm-hero-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .mm-hero-carousel__arrow:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: translateY(-50%) scale(1.05);
  }
  .mm-hero-carousel__arrow--prev { left: 24px; }
  .mm-hero-carousel__arrow--next { right: 24px; }

  /* Dots */
  .mm-hero-carousel__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mm-hero-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease;
  }
  .mm-hero-carousel__dot.is-active {
    background: #ffffff;
    width: 28px;
    border-radius: 999px;
  }
/* END_SECTION:hero-carousel-magicmind */

/* START_SECTION:hero-ribbon (INDEX:60) */
/* Ribbon overlaps the bottom of the 100vh hero so banner + ribbon
     together fit inside one viewport-height. Its own ~5rem height is
     "absorbed" upward with the negative margin so the next section
     starts cleanly at the 100vh boundary. */
  .hero-ribbon {
    position: relative;
    z-index: 2;
    margin: calc(-5rem + var(--sec-mt, 0px)) 0 var(--sec-mb, 0);
    padding: 1.5rem 0 1.25rem;
    background: var(--sec-bg, color-mix(in srgb, var(--color-background) 70%, transparent));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
  }

  .hero-ribbon__viewport {
    overflow: hidden;
  }

  .hero-ribbon__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: hero-ribbon-marquee 40s linear infinite;
    will-change: transform;
  }

  /* Each logo "owns" its trailing space so every copy of the set has the
     same width, which is what the seamless-loop math requires. */
  .hero-ribbon__track > .hero-logo {
    margin-right: 4rem;
  }

  @keyframes hero-ribbon-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--marquee-shift, -50%)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-ribbon__track { animation: none; }
  }

  .hero-logo[data-audience-target] { display: none; }
  .hero-logo[data-audience-target].is-audience-match { display: inline-flex; }

  @media (max-width: 900px) {
    .hero-ribbon {
      margin: -4.25rem 0 0;
      padding: 1.25rem 0 1rem;
      border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    }
    .hero-ribbon__track > .hero-logo { margin-right: 2.5rem; }
  }
/* END_SECTION:hero-ribbon */

/* START_SECTION:hero-section-2 (INDEX:61) */
.hero2 {
    position: relative;
    background: var(--h2-gradient, linear-gradient(180deg, #053b38 16%, #065954 38%, #fff 72%));
    color: var(--h2-text, #fff);
    border-radius: var(--h2-r-tl, 0) var(--h2-r-tr, 0) var(--h2-r-br, 0) var(--h2-r-bl, 0);
    margin: var(--h2-mt, 0) 0 var(--h2-mb, 0);
    padding: var(--h2-pt, 140px) var(--page-margin, 1.5rem) var(--h2-pb, 80px);
    overflow: hidden;
  }

  /* Sit flush under the floating sticky header (same trick as hero.liquid):
     pull up by the header's height + its 1rem top inset. Top padding keeps
     the badge clear of the header. */
  .hero2--pull {
    margin-top: calc(var(--h2-mt, 0px) - 1.5rem - var(--header-height, 7rem));
  }
  .hero2--pull .hero2__inner {
    padding-top: clamp(2rem, 5vh, 3.5rem);
  }

  /* Audience targeting only narrows when an audience is active. */
  .hero2[data-audience-target] {
    display: none;
  }
  .hero2[data-audience-target].is-audience-match,
  html:not([data-audience]) .hero2[data-audience-target] {
    display: block;
  }

  .hero2__inner {
    position: relative;
    z-index: 1;
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ───────── Badge ───────── */
  .hero2__badge {
    text-align: center;
    margin-bottom: clamp(0.5rem, 1.5vw, 1.25rem);
  }
  .hero2__badge-strong {
    margin: 0 0 3px;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--h2-badge-strong, #fff);
  }
  .hero2__badge-sub {
    margin: 0;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--h2-badge-sub, rgba(255, 255, 255, 0.62));
  }

  /* ───────── 2-column layout (pill|headline over photo|stage) ───────── */
  .hero2__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .hero2__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .hero2__col--left {
    align-items: center;
  }
  .hero2--visual-right .hero2__col--left {
    order: 2;
  }
  .hero2--visual-right .hero2__col--right {
    order: 1;
  }

  /* Top row: pill and headline share a height + the same top offset so they sit
     level near the top, with the empty space falling BELOW (where the drop line
     travels) — not above. The row fills the viewport (minus the header/badge
     offset) so the "every stage" region below it starts AFTER ~100vh, i.e. the
     hero is one full screen and the life-stage row sits below the fold. */
  .hero2__pill-wrap {
    position: relative;
    min-height: calc(var(--h2-rowh, 100svh) - 12rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pill is vertically centred so it sits level with the headline — identical
       min-height + centring + bottom padding to .hero2__top. The drop line is
       absolutely anchored to the pill's bottom, so it never affects this. */
    justify-content: center;
    padding-bottom: clamp(8rem, 22vh, 18rem);
  }
  .hero2__top {
    min-height: calc(var(--h2-rowh, 100svh) - 12rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    max-width: 44rem;
    padding-bottom: clamp(8rem, 22vh, 18rem);
  }

  /* The image is the whole visual — any dotted ring / background is baked into
     the image itself, so there is no CSS circle here. */
  .hero2__circle {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero2__pill {
    width: clamp(190px, 24vw, 340px);
    height: auto;
    object-fit: contain;
    display: block;
  }
  .hero2__pill--placeholder {
    width: clamp(200px, 26vw, 360px);
    opacity: 0.7;
  }

  /* Drop line falls from the bottom of the pill circle straight down toward the
     stage photo. Absolute (anchored to the circle) so it never adds height to
     the pill or shifts its alignment, whatever the row height. */

  /* ───────── Scroll-animated connector line ───────── */
  .hero2__scroll-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* Anchored to the pill's bottom (top: 100% of the circle) and sized by JS
       (--h2-line-h) to reach exactly down to the stage photo. Absolute, so the
       pill stays centred regardless of the line's length. */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: var(--h2-line-h, clamp(160px, 24vh, 320px));
  }
  /* Dot that rides the leading edge of the drop line as it draws from the first
     image down to the circle. JS sets its travel (--h2-drop-dot-y) and opacity
     (--h2-drop-dot-op); it fades out as it arrives at the circle. Colour comes
     from the editor (Connector dot colour → --h2-dot). */
  .hero2__dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--h2-dot, var(--h2-tab-active-bg, #f7c948));
  }
  .hero2__dot--drop {
    position: absolute;
    top: 0;
    left: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--h2-dot, #f7c948) 22%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
  }
  /* Dot rides the first line's leading edge down to the circle, then fades. */
  .hero2.is-playing .hero2__dot--drop {
    animation: hero2-dropdot 650ms ease-out forwards;
  }
  @keyframes hero2-dropdot {
    0% {
      transform: translate(-50%, -50%) translateY(0);
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) translateY(var(--h2-line-h, 200px));
      opacity: 0;
    }
  }
  .hero2__scroll-svg {
    flex: 1 1 auto;
    width: 2px;
    overflow: visible;
  }
  .hero2__scroll-path {
    /* First line uses the editor's Connector line colour (same as the second
       line) so one setting controls both. */
    stroke: var(--h2-stage-line, #0a3b38);
    stroke-width: 1.5;
    stroke-dasharray: var(--h2-line-len, 1000);
    stroke-dashoffset: var(--h2-line-len, 1000); /* hidden until the section plays */
  }
  /* First line draws on its own once the section enters view (.is-playing). */
  .hero2.is-playing .hero2__scroll-path {
    animation: hero2-draw 650ms ease-out forwards;
  }
  @keyframes hero2-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* ───────── Headline ───────── */
  .hero2__title {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.1rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--h2-text, #fff);
    text-wrap: balance;
  }
  .hero2__title em,
  .hero2__title i {
    font-family: var(--font-heading--family);
    font-style: italic;
    font-weight: 400;
  }

  /* ───────── Buttons ───────── */
  /* Compact, content-width buttons (Shop Women / Shop Men side by side, the
     Quiz button on its own row below) — all left-aligned under the headline. */
  .hero2__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .hero2__btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .hero2__btn-row:empty {
    display: none;
  }
  .hero2__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.7rem 0.7rem 0.7rem 1.1rem;
    min-height: 48px;
    border-radius: var(--style-border-radius-inputs, 4px);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease, color 150ms ease;
  }
  .hero2__btn--filled {
    background: var(--btn-bg, #053b38);
    color: var(--btn-fg, #fff);
    border-color: var(--btn-bg, #053b38);
  }
  .hero2__btn--outline {
    background: transparent;
    color: var(--btn-fg, #fff);
    border-color: var(--btn-fg, #fff);
  }
  .hero2__btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  .hero2__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-fg, #fff) 90%, transparent);
  }
  .hero2__btn-label {
    white-space: nowrap;
  }
  .hero2__btn-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
  }
  .hero2__btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ════════ Lower row: "every stage of you" ════════ */
  /* Left side — the per-stage circle photos (crossfaded). */
  .hero2__stage-media {
    position: relative;
    width: clamp(190px, 22vw, 320px);
    aspect-ratio: 1;
    margin: 0 auto;
    /* "Pop out" reveal — plays AFTER the first line reaches the circle (delay),
       springing to full size with a slight overshoot. Triggered by .is-playing
       so it replays every time the section re-enters view. */
    transform: scale(0.7);
    transform-origin: center;
    opacity: 0;
    will-change: transform, opacity;
  }
  .hero2.is-playing .hero2__stage-media {
    animation: hero2-pop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms forwards;
  }
  @keyframes hero2-pop {
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  .hero2__stage-figure {
    position: absolute;
    inset: 0;
    /* Transparent — the life-stage image is a product cut-out (PNG with a
       transparent background), shown floating with no circular crop or fill. */
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms ease, visibility 0s linear 400ms;
  }
  .hero2__stage-figure.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms ease;
  }
  .hero2__stage-img {
    width: 100%;
    height: 100%;
    /* contain (not cover) so the whole transparent product shows, uncropped. */
    object-fit: contain;
    background: transparent;
    display: block;
  }
  .hero2__stage-img--placeholder {
    background: color-mix(in srgb, var(--h2-stage-title) 12%, #fff);
    border-radius: 50%;
  }

  /* Right side — heading + active copy/CTA, with the tab switcher. */
  .hero2__stage {
    position: relative;
    margin-top: clamp(1.5rem, 4vh, 3rem);
  }
  /* Connector line — sits at the ACTIVE tab's vertical centre (JS sets
     --h2-stage-line-y; it falls back to the circle's vertical centre before the
     script runs). It begins behind the circle photo on the left (the opaque
     photo paints over that part, so the line visually emerges from the image's
     right-centre edge) and ends at the active tab on the right. A segment —
     never full-bleed. */
  .hero2__stage::before {
    content: '';
    position: absolute;
    top: var(--h2-stage-line-y, clamp(95px, 11vw, 160px));
    left: -56%;
    right: 9.5rem;
    height: 1px;
    /* Second line — draws left → right AFTER the first line reaches the circle
       (animation delay sequences it). Triggered by .is-playing so it replays on
       re-entry. */
    transform-origin: left center;
    transform: translateY(-50%) scaleX(0);
    background: color-mix(in srgb, var(--h2-stage-line, #0a3b38) 22%, transparent);
    z-index: -1;
    pointer-events: none;
  }
  .hero2.is-playing .hero2__stage::before {
    animation: hero2-hline 760ms cubic-bezier(0.22, 1, 0.36, 1) 760ms forwards;
  }
  @keyframes hero2-hline {
    to {
      transform: translateY(-50%) scaleX(1);
    }
  }
  /* Dot that travels right along the connector line once .is-connected fires
     (after the drop line reaches the circle): it emerges from the circle's
     right edge and fades out at the line's end. JS sets the travel range
     (--hdot-start / --hdot-end) to match the line geometry. */
  .hero2__hdot {
    position: absolute;
    top: var(--h2-stage-line-y, clamp(95px, 11vw, 160px));
    left: var(--hdot-start, 0px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--h2-dot, var(--h2-tab-active-bg, #f7c948));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--h2-dot, #f7c948) 22%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
  }
  /* Same duration/easing/delay as the second line (hero2-hline) so the dot
     travels in lockstep with the line as it draws. */
  .hero2.is-playing .hero2__hdot {
    animation: hero2-hdot 760ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both;
  }
  @keyframes hero2-hdot {
    0% {
      left: var(--hdot-start, 0px);
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    86% {
      opacity: 1;
    }
    100% {
      left: var(--hdot-end, 100%);
      opacity: 0;
    }
  }
  /* Reserve room on the right for the absolutely-positioned tab stack. */
  .hero2__stage-main {
    position: relative;
    min-width: 0;
    padding-right: clamp(10.5rem, 13vw, 12.5rem);
  }
  .hero2 .hero2__stage-title {
    position: relative;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--stage-heading-family, var(--section-heading-family)) !important;
    font-weight: var(--stage-heading-weight, var(--section-heading-weight)) !important;
    font-size: var(--stage-heading-size, var(--section-heading-size)) !important;
    line-height: var(--section-heading-line-height, 1.1) !important;
    letter-spacing: var(--section-heading-tracking, -0.01em) !important;
    text-transform: var(--section-heading-transform, none) !important;
    color: var(--h2-stage-title, #0a3b38);
    text-wrap: balance;
  }
  .hero2__stage-title em,
  .hero2__stage-title i {
    font-style: italic;
  }

  .hero2__stage-panel {
    display: none;
  }
  .hero2__stage-panel.is-active {
    display: block;
    animation: hero2-fade 360ms ease;
  }
  /* Gap that drops the stage copy below the heading. Stepped by viewport
     width with plain rem values (no clamp/calc/vw math, which the CSS
     minifier was mangling): tight on narrow MacBook-width screens, full
     6rem only on wide monitors. */
  .hero2__stage-panels {
    padding-top: 1rem;
  }
  @media (min-width: 1600px) {
    .hero2__stage-panels {
      padding-top: 3rem;
    }
  }
  @media (min-width: 1920px) {
    .hero2__stage-panels {
      padding-top: 4rem;
    }
  }
  @keyframes hero2-fade {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .hero2__stage-text {
    color: var(--h2-stage-text, #1a1c23);
    font-family: var(--section-subtext-family, var(--font-subheading--family, sans-serif));
    font-size: var(--section-subtext-size, 1.1875rem);
    line-height: 1.55;
    max-width: 32rem;
  }
  .hero2__stage-text p {
    margin: 0 0 1rem;
  }
  .hero2__stage-text p:last-child {
    margin-bottom: 0;
  }
  .hero2__stage-text sup {
    font-size: 0.7em;
    vertical-align: super;
  }
  .hero2__stage-cta {
    max-width: max-content;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
  }

  /* Tab switcher — vertical stack on the right. JS slides it vertically (top)
     so the ACTIVE tab lands on the fixed connector line; the line itself never
     moves. Falls back to top:0 before the script runs. */
  .hero2__stage-tabs {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: top 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero2__stage-tab {
    appearance: none;
    cursor: pointer;
    min-width: 9.5rem;
    padding: 0.85rem 1.25rem;
    border: 0;
    border-radius: 4px;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--h2-tab-fg, rgba(26, 28, 35, 0.55));
    background: var(--h2-tab-bg, #e8eef0);
    transition: background 180ms ease, color 180ms ease;
  }
  .hero2__stage-tab.is-active {
    color: var(--h2-tab-active-fg, #1a1c23);
    background: var(--h2-tab-active-bg, #f7c948);
  }
  .hero2__stage-tab:focus-visible {
    outline: 2px solid var(--h2-stage-title, #0a3b38);
    outline-offset: 2px;
  }

  /* ───────── Mobile: one centred column, in reading order ───────── */
  /* ≤1024 (was ≤767): the desktop 2-col stage + absolute tab stack reserves
     ~10.5-12.5rem of padding-right and crushes the stage text to ~100px on
     tablets — the single-column stack is the right layout there too. */
  @media (max-width: 1024px) {
    .hero2 {
      padding-left: var(--page-margin, 1.25rem);
      padding-right: var(--page-margin, 1.25rem);
    }
    .hero2__layout {
      display: flex;
      flex-direction: column;
    }
    /* Unwrap the two columns so all four cells order naturally:
       pill → headline+buttons → photo → every-stage. */
    .hero2__col {
      display: contents;
    }
    .hero2__pill-wrap {
      order: 1;
      min-height: auto;
      padding: 0;
      /* Stacked mode: make sure the pill visual is truly centred — the
         desktop column context left it sitting half-width to the left. */
      width: 100%;
      align-items: center;
      justify-content: center;
    }
    .hero2__circle {
      margin-left: auto;
      margin-right: auto;
    }
    .hero2__top {
      order: 2;
      min-height: auto;
      padding-top: 0;
      /* The desktop clamp(8rem,22vh,18rem) bottom padding leaked into the
         stack — it was ~200px of dead space between the buttons and the
         stage photo. */
      padding-bottom: 0;
      align-items: center;
      text-align: center;
      max-width: 100%;
      margin: 1.5rem auto 0;
    }
    /* No drop line / connector line on mobile, so the circle is always shown
       (no pop dependency on .is-connected). */
    .hero2__stage-media {
      order: 3;
      margin-top: 1.5rem;
      transform: none;
      opacity: 1;
    }
    .hero2__stage {
      order: 4;
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.5rem;
    }

    .hero2__scroll-line {
      display: none;
    }
    .hero2__actions {
      align-items: stretch;
      width: 100%;
      max-width: 26rem;
    }
    .hero2__btn-row {
      flex-direction: column;
    }
    .hero2__btn {
      width: 100%;
    }
    .hero2__stage::before {
      display: none;
    }
    .hero2__hdot {
      display: none;
    }
    .hero2__stage-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-right: 0;
    }
    .hero2__stage-text {
      margin: 0 auto;
    }
    .hero2__stage-cta {
      margin: 1.5rem auto 0;
    }
    .hero2__stage-tabs {
      position: static;
      transform: none;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      order: -1;
    }
    .hero2__stage-tab {
      min-width: 0;
      flex: 0 0 auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero2__btn {
      transition: none;
    }
    .hero2__stage-figure {
      transition: none;
    }
    .hero2__stage-panel.is-active {
      animation: none;
    }
    /* Show the circle + both connector lines outright — no draw / pop. */
    .hero2__stage-media,
    .hero2.is-playing .hero2__stage-media {
      animation: none;
      transform: none;
      opacity: 1;
    }
    .hero2__stage::before,
    .hero2.is-playing .hero2__stage::before {
      animation: none;
      transform: translateY(-50%) scaleX(1);
    }
    .hero2__scroll-path,
    .hero2.is-playing .hero2__scroll-path {
      animation: none;
      stroke-dashoffset: 0;
    }
    .hero2__dot--drop,
    .hero2__hdot {
      display: none;
    }
  }
/* END_SECTION:hero-section-2 */

/* START_SECTION:hero-section-men (INDEX:62) */
/* ───────── Core & Rendering Enhancements ───────── */
  .herom {
    position: relative;
    background: var(--hm-bg, #2b3641);
    color: var(--hm-text, #fff);
    border-radius: var(--hm-r-tl, 0) var(--hm-r-tr, 0) var(--hm-r-br, 0) var(--hm-r-bl, 0);
    margin: var(--hm-mt, 0) 0 var(--hm-mb, 0);
    padding: var(--hm-pt, 140px) var(--page-margin, 1.5rem) var(--hm-pb, 80px);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .herom--bg-gradient {
    background: var(--hm-gradient, linear-gradient(180deg, #1f2a33 0%, #2b3641 55%, #2b3641 100%));
  }

  /* ───────── Entrance Animations ───────── */
  @keyframes hmFadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .herom__badge { animation: hmFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .herom__title { animation: hmFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; opacity: 0; }
  .herom__subtext { animation: hmFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }
  .herom__actions { animation: hmFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; opacity: 0; }

  /* Full-bleed background image */
  .herom__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .herom__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .herom__bg-overlay {
    position: absolute;
    inset: 0;
    background: var(--hm-overlay, #000);
    opacity: var(--hm-overlay-op, 0);
  }

  .herom--pull {
    margin-top: calc(var(--hm-mt, 0px) - 1.5rem - var(--header-height, 7rem));
    /* The pull lifts the hero to ~-1.5rem (top of viewport, behind the
       sticky header), so to reach the viewport BOTTOM the box must be
       100svh + 1.5rem — otherwise the background stops short and leaves a
       gap below (desktop). Applies to every breakpoint. */
    min-height: calc(100svh + 1.5rem);
  }
  .herom--pull .herom__inner {
    padding-top: clamp(2rem, 5vh, 3.5rem);
  }

  .herom[data-audience-target] {
    display: none;
  }
  .herom[data-audience-target].is-audience-match,
  html:not([data-audience]) .herom[data-audience-target] {
    display: block;
  }

  .herom__inner {
    position: relative;
    z-index: 1;
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: calc(var(--hm-rowh, 100svh) - var(--hm-pt, 140px) - var(--hm-pb, 80px));
  }

  /* ───────── Badge (Nutrafol Technical Scale) ───────── */
  .herom__badge {
    text-align: center;
    margin-bottom: clamp(1rem, 2vw, 2rem);
  }
  .herom__badge-strong {
    margin: 0 0 4px;
    font-family: var(--section-badge-family, var(--font-subheading--family, sans-serif));
    font-weight: 700;
    font-size: 0.8125rem; /* ~13px */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hm-badge-strong, #fff);
  }
  .herom__badge-sub {
    margin: 0;
    font-family: var(--section-badge-family, var(--font-subheading--family, sans-serif));
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hm-badge-sub, rgba(255, 255, 255, 0.62));
  }

  /* ───────── Layout ───────── */
  .herom__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    flex: 1 1 auto;
    gap: 3rem;
  }
  .herom__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .herom__col--visual {
    align-items: center;
  }
  .herom--visual-right .herom__col--visual {
    order: 2;
  }
  .herom--visual-right .herom__col--content {
    order: 1;
  }

  /* ───────── Product Image (Capsule) & Float Animation ───────── */
  @keyframes hmFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
  }
  .herom__pill-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .herom__pill,
  .herom__pill--placeholder {
    /* SCALED UP: Now ranges from 260px to 540px based on screen size */
    width: calc(clamp(260px, 38vw, 540px) * var(--hm-img-scale, 1));
    animation: hmFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));
  }
  .herom__pill {
    height: auto;
    object-fit: contain;
    display: block;
  }
  .herom__pill--placeholder {
    opacity: 0.7;
    filter: none;
  }

  /* ───────── Headline + subtext (Nutrafol Scale) ───────── */
  .herom__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    max-width: 48rem;
  }
  .herom__title {
    margin: 0;
    font-family: var(--section-heading-family, var(--heading-family, var(--font-heading--family))) !important;
    font-weight: var(--section-heading-weight, var(--heading-weight, 400)) !important;
    /* MASSIVE SCALE: Now tops out at 7.5rem */
    font-size: var(--section-heading-size, clamp(3.5rem, 7vw, 7.5rem)); 
    line-height: 0.92; /* Ultra tight line-height */
    letter-spacing: -0.02em; 
    text-transform: uppercase;
    color: var(--hm-text, #fff);
    text-wrap: balance;
  }
  .herom__title em,
  .herom__title i {
    font-family: var(--font-heading--family);
    font-style: italic;
    font-weight: 400;
    text-transform: none; 
  }
  .herom__subtext {
    color: var(--hm-subtext, #fff);
    font-family: var(--section-subtext-family, var(--font-subheading--family, sans-serif));
    font-weight: var(--section-subtext-weight, 400);
    /* PERFECT CONTRAST: Exactly 1.25rem (20px) on desktop */
    font-size: var(--section-subtext-size, 1.25rem); 
    line-height: 1.5;
    letter-spacing: 0.01em;
    max-width: 38rem;
  }
  .herom__subtext p {
    margin: 0 0 1rem;
  }
  .herom__subtext p:last-child {
    margin-bottom: 0;
  }

  /* ───────── Buttons (Polished Technical) ───────── */
  .herom__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .herom__btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .herom__btn-row:empty {
    display: none;
  }
  .herom__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 1.1rem 0.9rem 1.6rem;
    min-height: 52px;
    border-radius: var(--style-border-radius-inputs, 4px);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    
    background-size: 200% auto;
    background-position: right center;
    transition: background-position 400ms cubic-bezier(0.25, 0.8, 0.25, 1), transform 200ms cubic-bezier(0.25, 0.8, 0.25, 1), color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  }
  .herom__btn--filled {
    background-image: linear-gradient(to right, var(--btn-fg, #fff) 50%, var(--btn-bg, #0a6b5e) 50%);
    color: var(--btn-fg, #fff);
    border-color: var(--btn-bg, #0a6b5e);
  }
  .herom__btn--filled:hover {
    background-position: left center;
    color: var(--btn-bg, #0a6b5e);
    border-color: var(--btn-fg, #fff);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-bg, #0a6b5e) 30%, transparent);
  }
  .herom__btn--outline {
    background-image: linear-gradient(to right, var(--btn-fg, #fff) 50%, transparent 50%);
    color: var(--btn-fg, #fff);
    border-color: var(--btn-fg, #fff);
  }
  .herom__btn--outline:hover {
    background-position: left center;
    color: var(--btn-bg, #0a6b5e);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-fg, #fff) 30%, transparent);
  }
  .herom__btn:hover {
    transform: translateY(-3px);
  }
  .herom__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-fg, #fff) 60%, transparent);
  }

  /* ───────── Animation Toggle Override ───────── */
  .herom__btn--no-anim {
    background-image: none !important;
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
  }
  .herom__btn--no-anim:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .herom__btn--no-anim.herom__btn--filled {
    background-color: var(--btn-bg, #0a6b5e);
  }
  .herom__btn--no-anim.herom__btn--filled:hover {
    background-color: var(--btn-fg, #fff);
    color: var(--btn-bg, #0a6b5e);
    border-color: var(--btn-fg, #fff);
  }
  .herom__btn--no-anim.herom__btn--outline {
    background-color: transparent;
  }
  .herom__btn--no-anim.herom__btn--outline:hover {
    background-color: var(--btn-fg, #fff);
    color: var(--btn-bg, #0a6b5e);
  }

  .herom__btn-label {
    white-space: nowrap;
  }
  .herom__btn-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
  }
  .herom__btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ───────── Mobile / tablet ───────── */
  @media (max-width: 1024px) {
    .herom {
      padding-left: var(--page-margin, 1.25rem);
      padding-right: var(--page-margin, 1.25rem);
      /* Height/fill is handled by .herom--pull (min-height 100svh + 1.5rem). */
    }
    /* Inner fills the hero; content flows from the top and the buttons anchor
       to the bottom via margin-top:auto. */
    .herom__inner {
      min-height: calc(100svh - var(--header-height, 5.5rem) - 3rem);
      justify-content: flex-start;
    }
    .herom__layout {
      display: flex;
      flex-direction: column;
      /* vh-based gaps shrink on short screens so everything still fits. */
      gap: clamp(0.75rem, 3vh, 2.25rem);
      flex: 1 1 auto;
    }
    .herom__col {
      display: contents;
    }
    .herom__pill-wrap {
      order: 1;
    }
    .herom__pill,
    .herom__pill--placeholder {
      /* Big on tall phones, but the 30vh cap shrinks it on short devices so
         the heading + subtext + CTAs still fit above the fold. Ignore the
         merchant's --hm-img-scale (a 0.5 desktop pref that halved it). */
      width: min(clamp(200px, 58vw, 320px), 30vh);
      animation: hmFloat 5s ease-in-out infinite;
    }
    /* Badge sits high, just under the header. The bigger pill + the flex-fill
       layout handle the vertical spread below it; no extra top shift (which
       also kept the buttons above the fold on shorter phones). */
    .herom__badge {
      margin-top: 0;
    }
    .herom__top {
      order: 2;
      align-items: center;
      text-align: center;
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
      /* Fill the remaining space below the pill so the buttons can drop to
         the bottom. */
      flex: 1 1 auto;
      gap: clamp(1.25rem, 3vh, 2rem);
    }
    /* Mobile/tablet heading: the section sets --section-heading-size inline
       (floors ~53px on phones) and the global `.shopify-section :is(h1,h2)`
       rule applies it with !important — so this must be higher-specificity
       (element + 2 classes) + !important + a size that does NOT read the var,
       or the heading stays huge and pushes the buttons past the fold. */
    .herom h1.herom__title {
      /* --hm-title-m = "Heading size — mobile" slider (emitted ≤767 by the
         scoped <style> in the markup); the clamp is the auto fallback. */
      font-size: var(--hm-title-m, clamp(28px, 8vw, 48px)) !important;
      line-height: 1.1;
    }
    .herom__subtext {
      margin: 0 auto;
      /* Drops to ~18px on mobile for better wrapping */
      font-size: var(--section-subtext-size, 1.125rem);
    }
    .herom__actions {
      align-items: stretch;
      width: 100%;
      max-width: 26rem;
      /* Anchor the buttons to the bottom of the hero. */
      margin-top: auto;
    }
    .herom__btn-row {
      flex-direction: column;
    }
    .herom__btn {
      width: 100%;
      justify-content: space-between;
    }
    .herom__btn-label {
      white-space: normal;
      text-align: left;
      line-height: 1.3;
    }
    .herom--pull {
      padding-top: calc(var(--header-height, 5.5rem) + 2rem);
    }
  }

  @media (max-width: 767px) {
    .herom {
      padding-top: calc(var(--hm-pt, 140px) * 0.6);
      padding-bottom: calc(var(--hm-pb, 80px) * 0.7);
    }
    .herom__layout {
      transform: translateY(10px);
    }
    .herom--pull {
      padding-top: calc(var(--header-height, 5.5rem) + 0.75rem);
    }
  }

  /* Short phones (small / landscape-ish devices): the fixed content stack was
     taller than the viewport, pushing the CTAs below the fold. Shrink the pill,
     heading, subtext, buttons and paddings by viewport height so the whole
     hero fits within 100svh with the CTAs visible. */
  @media (max-width: 1024px) and (max-height: 760px) {
    .herom {
      padding-bottom: 0.75rem;
    }
    .herom--pull {
      padding-top: calc(var(--header-height, 5.5rem) + 0.25rem);
    }
    .herom__pill,
    .herom__pill--placeholder {
      width: min(clamp(150px, 44vw, 300px), 24vh);
    }
    .herom__layout {
      gap: clamp(0.4rem, 1.8vh, 1.2rem);
    }
    .herom h1.herom__title {
      font-size: var(--hm-title-m, clamp(22px, 6vw, 30px)) !important;
    }
    .herom__subtext {
      font-size: var(--section-subtext-size, 0.9rem);
      line-height: 1.4;
    }
    .herom__btn {
      min-height: 42px;
      padding: 0.5rem 0.6rem 0.5rem 1rem;
    }
    .herom__actions { gap: 0.5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .herom__btn {
      transition: none;
    }
    .herom__pill, .herom__pill--placeholder, 
    .herom__badge, .herom__title, .herom__subtext, .herom__actions {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
/* END_SECTION:hero-section-men */

/* START_SECTION:hero-video (INDEX:63) */
.hero-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Fill the viewport. svh keeps it stable on mobile as the URL bar
       shows/hides (vh would jump). */
    min-height: 100vh;
    min-height: 100svh;
    /* Pull the video up behind the floating sticky header so it begins
       flush with the very top of the viewport. The header sits at top:1rem
       with a 1rem margin (desktop), so we offset that 1rem PLUS the header
       height the header script publishes — matching the hero section.
       Pulling by the full header height also keeps the top flush when the
       header's audience bar collapses/expands on scroll (it can only ever
       over-pull, never leave a gap). On mobile the header is flush (top:0),
       so the extra 1rem is a harmless 1rem over-pull. */
    margin: calc(var(--hv-mt, 0px) - 1.5rem - var(--header-height, 7rem)) 0 var(--hv-mb, 0);
    background: var(--hv-section-bg, #000);
    border-radius: var(--hv-r-tl, 0) var(--hv-r-tr, 0) var(--hv-r-br, 0) var(--hv-r-bl, 0);
  }

  /* Audience targeting: a targeted instance is hidden until the active
     audience matches (the matching rule is emitted inline above the
     section). Untargeted instances are unaffected and always show. */
  .hero-video[data-audience-target] { display: none; }

  /* ─── Full-bleed media ─── */
  .hero-video__media {
    position: absolute;
    inset: 0;
    line-height: 0;
  }
  .hero-video__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-video__video--placeholder { background: #1a1c23; }
  .hero-video__scrim {
    position: absolute;
    inset: 0;
    background: var(--hv-overlay, #000);
    opacity: var(--hv-overlay-opacity, 0.2);
    pointer-events: none;
  }

  /* ─── Centred content overlay ─── */
  .hero-video__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--page-width, 96rem);
    margin: 0 auto;
    padding: 2rem var(--page-margin, 1.5rem);
    text-align: center;
  }
  .hero-video__content[data-text-align="left"]  { text-align: left; }
  .hero-video__content[data-text-align="right"] { text-align: right; }

  .hero-video__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--hv-title-color, #fff);
    margin: 0 auto;
    max-width: 22ch;
    text-wrap: balance;
    font-size: var(--hv-title-size-mobile, 32px);
  }
  .hero-video__content[data-text-align="left"]  .hero-video__title,
  .hero-video__content[data-text-align="right"] .hero-video__title { margin-inline: 0; }

  /* The title is an h1/h2, so the GLOBAL `.shopify-section :is(h1,h2)` rule
     applies `font-size: var(--section-heading-size) !important` and the two
     font-size rules on .hero-video__title above/below are dead. Remap the
     variable on the content wrapper instead (a descendant, so it wins over
     the :root/global value) — now the section's Title size (desktop) and
     Title size (mobile) sliders genuinely drive the heading, independently. */
  .hero-video__content {
    --section-heading-size: var(--hv-title-size-mobile, 32px);
  }

  @media (min-width: 768px) {
    .hero-video__title { font-size: var(--hv-title-size, 54px); }
    .hero-video__content { --section-heading-size: var(--hv-title-size, 54px); }
  }

  /* Italic cut of the heading font (GT Super) for <em>…</em> in the richtext. */
  .hero-video__title em,
  .hero-video__title i { font-style: italic; }

  .hero-video__title--shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  }
/* END_SECTION:hero-video */

/* START_SECTION:hero (INDEX:64) */
.hero {
    padding: 0;
    position: relative;
    background: var(--sec-bg, transparent);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    /* Pull the hero up underneath the floating sticky header so it
       begins flush with the top of the viewport. The header's own
       top:1rem inset is captured here (`1rem +`). */
    margin-top: calc(var(--sec-mt, 0px) - 1.5rem - var(--header-height, 7rem));
    margin-bottom: var(--sec-mb, 0);
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__inner {
    position: relative;
    max-width: none;
    margin: 0;
    width: 100%;
  }

  .hero__slider {
    position: relative;
    overflow: hidden;
    border-radius: 0;
  }

  .hero__slider-track {
    display: flex;
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  /* Direct child of the slider track may be the banner OR a Shopify-injected
     block wrapper. Either way, force it to be a full-width flex slide. */
  .hero__slider-track > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-banner[data-audience-target] { display: none; }
  .hero-banner[data-audience-target].is-audience-match { display: flex; }

  .hero__dot {
    width: 1.5rem;
    height: 2px;
    color: inherit;
    background: color-mix(in srgb, currentColor 30%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease, width 200ms ease;
  }

  .hero__dot.is-active {
    background: currentColor;
    width: 2.25rem;
  }

  @media (max-width: 900px) {
    .hero { padding: 0; }
    .hero__slider { border-radius: 0; }
  }
/* END_SECTION:hero */

/* START_SECTION:highlight-bundle (INDEX:65) */
/* Outer wrapper — uses the theme's page margin so the section's side
     gutters match every other section in the theme. */
  .highlight-bundle {
    padding: 0 var(--page-margin, 1.5rem);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }

  /* The visible rounded card with its background color. */
  .highlight-bundle__inner {
    background: var(--hb-bg);
    color: var(--hb-fg);
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    padding: var(--hb-pt, 64px) clamp(1.5rem, 4vw, 3.5rem) var(--hb-pb, 64px);
    border-radius: var(--sec-r-tl, 32px) var(--sec-r-tr, 32px) var(--sec-r-br, 32px) var(--sec-r-bl, 32px);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  /* ─── Left column ─── */
  .highlight-bundle__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 42rem;
  }

  .highlight-bundle__label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hb-fg) 14%, transparent);
    color: var(--hb-fg);
    margin-bottom: 1.5rem;
  }

  .highlight-bundle__heading {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--hb-fg);
    text-wrap: balance;
  }

  .highlight-bundle__body {
    color: color-mix(in srgb, var(--hb-fg) 82%, transparent);
    font-size: var(--section-subtext-size, 1.05rem);
    line-height: 1.55;
    margin-bottom: 1.75rem;
  }
  .highlight-bundle__body :is(p, span) { margin: 0; }
  .highlight-bundle__body p + p { margin-top: 0.75rem; }

  .highlight-bundle__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    background: var(--hb-fg);
    color: var(--hb-bg);
    border-radius: var(--style-border-radius-inputs);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .highlight-bundle__cta:hover { opacity: 0.88; transform: translateY(-1px); }
  .highlight-bundle__cta-arrow { width: 12px; height: 12px; flex: 0 0 12px; }

  /* ─── Right column: hero card on top, 3-card row below ─── */
  .highlight-bundle__cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .highlight-bundle__strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .highlight-bundle__strip[data-count="1"] { grid-template-columns: 1fr; }
  .highlight-bundle__strip[data-count="2"] { grid-template-columns: 1fr 1fr; }

  .highlight-bundle__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--hb-card-radius, 24px);
    background: color-mix(in srgb, var(--hb-fg) 6%, transparent);
  }

  .highlight-bundle__card--hero { aspect-ratio: 16 / 9; }
  .highlight-bundle__card--small { aspect-ratio: 4 / 3; }

  /* Audience filtering — hide if targeted and not matching. */
  .highlight-bundle[data-audience-target] { display: none; }
  .highlight-bundle[data-audience-target].is-audience-match { display: block; }

  .highlight-bundle__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .highlight-bundle__card-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--hb-fg) 8%, transparent),
      color-mix(in srgb, var(--hb-fg) 8%, transparent) 12px,
      transparent 12px,
      transparent 24px
    );
  }

  /* ─── Responsive ─── */
  @media (max-width: 900px) {
    .highlight-bundle { padding: 0 var(--page-margin, 1rem); }
    .highlight-bundle__inner {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: var(--hb-pt, 64px) 1.25rem var(--hb-pb, 64px);
      border-radius: var(--sec-r-tl, 24px) var(--sec-r-tr, 24px) var(--sec-r-br, 24px) var(--sec-r-bl, 24px);
    }
    .highlight-bundle__cards { gap: 0.75rem; }
    .highlight-bundle__strip { gap: 0.75rem; }
    .highlight-bundle__copy { max-width: none; }
    .highlight-bundle__card--hero { aspect-ratio: 4 / 3; }
  }
/* END_SECTION:highlight-bundle */

/* START_SECTION:ingredients-carousel (INDEX:74) */
.igc {
    position: relative;
    background: var(--igc-bg, #1a1c23);
    color: var(--igc-fg, #ffffff);
    padding: var(--igc-pt, 80px) var(--page-margin, 1.5rem) var(--igc-pb, 80px);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    overflow: hidden;
  }
  .igc[data-audience-target] { display: none; }
  .igc[data-audience-target].is-audience-match { display: block; }

  /* Optional blurred/darkened background image */
  .igc__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .igc__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--igc-bg, #1a1c23) calc(var(--igc-overlay, 0.4) * 100%), transparent);
  }
  .igc__inner {
    position: relative;
    z-index: 1;
    max-width: var(--page-width, 96rem);
    margin: 0 auto;
  }

  .igc { --igc-line: var(--igc-border, color-mix(in srgb, var(--igc-fg, #fff) 22%, transparent)); }

  /* ─── Intro ─── */
  .igc__tagwrap { padding-bottom: 16px; }
  .igc__tag {
    display: inline-block;
    background: var(--igc-tag-bg, #ffc942);
    color: var(--igc-tag-fg, #1a1c23);
    font-family: var(--font-primary--family, inherit);
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 11px;
  }
  .igc__split {
    border-top: 1px solid var(--igc-line);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  @media (min-width: 1024px) {
    .igc__split { flex-direction: row; gap: 2rem; justify-content: space-between; }
    .igc__split-heading { flex: 0 1 46%; }
    .igc__split-body { flex: 0 1 40%; }
  }
  .igc__heading {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    /* Title-20-Super (~48px desktop) */
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: inherit;
    text-wrap: balance;
  }
  .igc__body { color: color-mix(in srgb, var(--igc-fg, #fff) 86%, transparent); }
  .igc__body :is(p, span) {
    margin: 0 0 0.75rem;
    /* Body-30 (~18px) */
    font-size: var(--section-subtext-size, clamp(1rem, 1.2vw, 1.125rem));
    line-height: 1.55;
  }
  .igc__body :is(p, span):last-child { margin-bottom: 0; }

  /* ─── Slider ─── */
  .igc__slider {
    position: relative;
    margin-top: 40px;
    /* Full-bleed: span the whole viewport even inside the centered container.
       The section's overflow:hidden clips the 100vw so there's no h-scroll. */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  /* Clip horizontally (slider) but let cards grow downward when expanded. */
  .igc__viewport { overflow-x: clip; overflow-y: visible; }
  .igc__track {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    will-change: transform;
    cursor: grab;
    user-select: none;
  }
  .igc__track.is-dragging { cursor: grabbing; }

  /* Fixed-height card: the body slides up over the image on "Show More". */
  .igc-card {
    --img-h: 280px;
    flex: 0 0 auto;
    position: relative;
    height: 600px;
    overflow: hidden;
    border: 1px solid var(--igc-line);
    border-radius: 2px;
    background: color-mix(in srgb, var(--igc-fg, #fff) 3%, transparent);
  }
  @media (max-width: 640px) { .igc-card { height: 560px; --img-h: 260px; } }

  /* Image pinned to the top, behind the body. */
  .igc-card__media {
    position: absolute;
    top: 24px; left: 24px; right: 24px;
    height: var(--img-h, 280px);
    z-index: 0;
    overflow: hidden;
  }
  .igc-card__img,
  .igc-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
  }
  .igc-card__placeholder { background: color-mix(in srgb, var(--igc-fg, #fff) 10%, transparent); }

  /* Body sits below the image; on open it slides UP to cover the image and the
     detail expands into the freed space. Card height stays fixed. */
  .igc-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: calc(24px + var(--img-h, 280px));
    z-index: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--igc-fg, #fff) 3%, var(--igc-bg, #13271d));
    overflow: hidden;
    transition: top 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .igc-card.is-open .igc-card__body { top: 0; }
  @media (prefers-reduced-motion: reduce) { .igc-card__body { transition: none; } }
  /* Mobile: the card height is fixed (the slide-up animation depends on it),
     so long ingredient copy can exceed the open body — let it scroll inside
     instead of clipping. Closed state keeps overflow hidden. */
  @media (max-width: 640px) {
    .igc-card.is-open .igc-card__body { overflow-y: auto; }
  }

  .igc-card__textbox {
    display: flex;
    flex-direction: column;
  }
  .igc-card__name {
    margin: 0;
    font-family: var(--font-primary--family, inherit);
    /* Body-30-Strong */
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
  }
  .igc-card__desc {
    margin: 16px 0 0;
    /* Body-20 */
    font-size: 16px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--igc-fg, #fff) 88%, transparent);
  }

  /* Expandable "What sets ours apart?" */
  .igc-card__apart {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .igc-card.is-open .igc-card__apart { grid-template-rows: 1fr; }
  /* padding-top = gap after the short description (before the heading) */
  .igc-card__apart-inner { overflow: hidden; min-height: 0; padding-top: 16px; }
  .igc-card__apart-label {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
  }
  /* same gap after the "What sets ours apart?" heading (before the detail) */
  .igc-card__apart-body {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--igc-fg, #fff) 82%, transparent);
  }

  .igc-card__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary--family, inherit);
    /* CTA-20 */
    font-size: 14px;
    font-weight: 500;
    color: var(--igc-accent, #ffffff);
    cursor: pointer;
    border-bottom: 1px solid currentColor;
    line-height: 1.4;
  }
  .igc-card__toggle svg { display: block; }
  .igc-card__toggle-more,
  .igc-card__toggle-less { display: inline-flex; align-items: center; gap: 4px; }
  .igc-card__toggle-less { display: none; }
  .igc-card.is-open .igc-card__toggle-more { display: none; }
  .igc-card.is-open .igc-card__toggle-less { display: inline-flex; }

  /* Reserved-height footer pinned to the bottom: "Show More" sits at a fixed
     height on every card, with "Featured in" directly below it (16px gap).
     Both stay at the same position regardless of tag count / description length. */
  .igc-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 96px;
  }
  /* Label + tags share ONE wrapping row, so tags flow next to "Featured in"
     and wrap individually instead of the whole group dropping to a new line. */
  .igc-card__featured {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .igc-card__featured-label { margin-right: 4px; }
  .igc-card__featured-label {
    /* Body-10 */
    font-size: 13px;
    white-space: nowrap;
    color: color-mix(in srgb, var(--igc-fg, #fff) 70%, transparent);
  }
  /* No box of its own — the tag pills become direct items of the featured row. */
  .igc-card__tags { display: contents; }
  .igc-card__tag {
    border: 1px solid color-mix(in srgb, var(--igc-fg, #fff) 30%, transparent);
    padding: 3px 8px;
    /* Caption-10 — uppercase */
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
  }

  /* ─── Arrows (overlaid left & right, centered on the card image) ─── */
  .igc__arrows { display: contents; }
  .igc__arrow {
    appearance: none;
    position: absolute;
    /* Centered on the card/slider area (the slider's height == the cards),
       not the whole section. */
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 2px;
    background: var(--igc-arrow-bg, #0a7d6b);
    color: var(--igc-arrow-fg, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 160ms ease, opacity 160ms ease;
  }
  .igc__arrow[data-igc-prev] { left: 8px; }
  .igc__arrow[data-igc-next] { right: 8px; }
  .igc__arrow:hover { filter: brightness(1.12); }
  .igc__arrow:disabled { opacity: 0.35; cursor: default; }
  .igc__arrow svg { display: block; }

  /* ─── Edge blur/fade so the peeking cards melt into the background ─── */
  .igc__slider::before,
  .igc__slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .igc__slider::before {
    left: 0;
    background: linear-gradient(to right, var(--igc-bg, #1a1c23) 8%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000, transparent);
    mask-image: linear-gradient(to right, #000, transparent);
  }
  .igc__slider::after {
    right: 0;
    background: linear-gradient(to left, var(--igc-bg, #1a1c23) 8%, transparent);
    -webkit-mask-image: linear-gradient(to left, #000, transparent);
    mask-image: linear-gradient(to left, #000, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .igc-card__apart { transition: none; }
  }
/* END_SECTION:ingredients-carousel */

/* START_SECTION:ingredients-grid (INDEX:75) */
.ingredients-grid {
    padding: var(--ig-pt, 80px) var(--page-margin, 1.5rem) var(--ig-pb, 80px);
    margin: var(--ig-mt, 0) 0 var(--ig-mb, 0);
    color: var(--color-foreground);
    background: var(--ig-section-bg, var(--color-background));
  }
  .ingredients-grid__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Header ─── */
  .ingredients-grid__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
  }
  @media (min-width: 768px) {
    .ingredients-grid__head { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
  }
  .ingredients-grid__title {
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    font-size: clamp(2.25rem, 5vw, 3.6rem);
    line-height: 1.05;
    margin: 0;
    color: var(--color-foreground);
    text-wrap: balance;
  }
  .ingredients-grid__subtitle {
    margin: 0 0 0.9rem;
    font-size: clamp(1.125rem, 1.4vw, 1.35rem);
    line-height: 1.4;
    color: var(--color-foreground);
  }
  .ingredients-grid__shop {
    display: inline-block;
    color: var(--ig-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    font-size: 0.95rem;
  }

  /* ─── Tabs: slightly-rounded rectangle pills in a scrollable row with
     left/right arrow controls and a fade mask on the overflowing edges. ─── */
  .ingredients-grid__tabs-wrap {
    position: relative;
    margin-bottom: 1.75rem;
  }
  .ingredients-grid__tabs-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .ingredients-grid__tabs-scroll::-webkit-scrollbar { display: none; }
  /* Fade out the side(s) where more tabs are hidden — like the reference. */
  .ingredients-grid__tabs-wrap[data-can-scroll-left] .ingredients-grid__tabs-scroll {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 100%);
  }
  .ingredients-grid__tabs-wrap[data-can-scroll-right] .ingredients-grid__tabs-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 110px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 110px), transparent 100%);
  }
  .ingredients-grid__tabs-wrap[data-can-scroll-left][data-can-scroll-right] .ingredients-grid__tabs-scroll {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  }
  .ingredients-grid__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding: 0.25rem 0.25rem 0.5rem;
  }
  .ingredients-grid__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    border-radius: 6px;
    background: var(--color-background, #fff);
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .ingredients-grid__tab.is-active {
    background: var(--ig-active-bg);
    color: var(--ig-active-fg);
    border-color: var(--ig-active-bg);
  }
  .ingredients-grid__tab.is-audience-hidden { display: none; }
  .ingredients-grid__tab-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Left/right scroll arrows — appear only when there's overflow on that side. */
  .ingredients-grid__tabs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: var(--color-background, #fff);
    color: var(--color-foreground);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  .ingredients-grid__tabs-arrow--left  { left: 0;  }
  .ingredients-grid__tabs-arrow--right { right: 0; }
  .ingredients-grid__tabs-wrap[data-can-scroll-left] .ingredients-grid__tabs-arrow--left,
  .ingredients-grid__tabs-wrap[data-can-scroll-right] .ingredients-grid__tabs-arrow--right {
    opacity: 1;
    pointer-events: auto;
  }
  .ingredients-grid__tabs-arrow svg { width: 14px; height: 14px; }
  .ingredients-grid__tabs-arrow:focus-visible {
    outline: 2px solid var(--ig-accent);
    outline-offset: 2px;
  }

  /* ─── Card grid ─── */
  .ingredients-grid__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (min-width: 640px) { .ingredients-grid__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 960px) { .ingredients-grid__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

  .ingredient-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
  }
  .ingredient-card.is-hidden { display: none; }

  .ingredient-card__img {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: #ecf1f5;
    border-radius: 6px;
    overflow: hidden;
  }
  .ingredient-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 250ms ease;
  }
  .ingredient-card:hover .ingredient-card__img img { transform: scale(1.03); }

  .ingredient-card__plus {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1c23;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  .ingredient-card__plus svg { width: 14px; height: 14px; }

  .ingredient-card__foot {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.15rem;
  }
  .ingredient-card__name { font-size: 0.95rem; font-weight: 600; }
  .ingredient-card__tag { font-size: 0.78rem; color: var(--ig-accent); }

  /* Show More + footer */
  .ingredients-grid__more-wrap { display: flex; justify-content: center; padding: 2rem 0 0; }
  .ingredients-grid__more {
    background: transparent;
    border: 0;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
  }
  .ingredients-grid__footer {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    color: var(--color-foreground);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .ingredients-grid__footer svg {
    width: 26px;
    height: 26px;
    background: var(--ig-active-bg);
    color: var(--ig-active-fg);
    border-radius: 4px;
    padding: 5px;
    box-sizing: border-box;
  }

  /* ─── Right-side drawer (popup) ─── */
  .ingredient-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 280ms;
  }
  .ingredient-modal[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
  }
  .ingredient-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 22, 0.5);
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 240ms ease;
  }
  .ingredient-modal[aria-hidden="false"] .ingredient-modal__backdrop { opacity: 1; }
  .ingredient-modal__stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(94vw, 760px);
    background: var(--color-background, #fff);
    color: var(--color-foreground);
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 280ms ease;
  }
  .ingredient-modal[aria-hidden="false"] .ingredient-modal__stage { transform: translateX(0); }

  /* Top: category label on the left, close (yellow square) on the right. */
  .ingredient-modal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
  }
  .ingredient-modal__category {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
  }
  .ingredient-modal__close {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--ig-active-bg);
    color: var(--ig-active-fg);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Scrollable body. */
  .ingredient-modal__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .ingredient-modal__img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: #ecf1f5;
    display: block;
  }
  .ingredient-modal__name {
    font-family: var(--font-heading--family, inherit);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    margin: 0.5rem 0 0;
    line-height: 1.1;
    text-wrap: balance;
  }
  .ingredient-modal__lede {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--color-foreground);
  }
  .ingredient-modal__rule {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
    margin: 0.75rem 0 0.25rem;
    width: 100%;
  }
  .ingredient-modal__sec {
    display: grid;
    grid-template-columns: minmax(120px, 0.45fr) 1fr;
    gap: 1rem;
    padding: 0.5rem 0;
    align-items: start;
  }
  .ingredient-modal__sec-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    width: fit-content;
    line-height: 1.2;
    white-space: nowrap;
  }
  .ingredient-modal__sec-body {
    font-size: 1rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-foreground) 88%, transparent);
  }
  .ingredient-modal__sec-body p { margin: 0 0 0.5rem; }
  .ingredient-modal__sec-body p:last-child { margin-bottom: 0; }
  .ingredient-modal__footnote {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-foreground);
  }

  /* Pager: prev / "n / total" / next at the bottom. */
  .ingredient-modal__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
    background: var(--color-background, #fff);
  }
  .ingredient-modal__pager-btn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .ingredient-modal__pager-btn:hover { background: color-mix(in srgb, var(--color-foreground) 6%, transparent); }
  .ingredient-modal__pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .ingredient-modal__pager-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-foreground);
  }
  /* Hide empty sections / footnotes / rules cleanly. */
  .ingredient-modal__sec.is-empty,
  .ingredient-modal__rule.is-empty,
  .ingredient-modal__footnote.is-empty,
  .ingredient-modal__lede.is-empty { display: none; }

  body.ingredient-modal-open { overflow: hidden; }
/* END_SECTION:ingredients-grid */

/* START_SECTION:ingredients (INDEX:76) */
.ingredients {
    padding: var(--ing-pt, 80px) 1.5rem var(--ing-pb, 80px);
    background: var(--ing-bg, #041420);
    color: var(--ing-fg, #fff);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    width: 100%;
    max-width: none;
  }
  @media (min-width: 768px) {
    .ingredients {
      padding: var(--ing-pt, 80px) 3rem var(--ing-pb, 80px);
    }
  }
  .ingredients__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* Font family / weight / size / transform come from the global section
     heading rule (.shopify-section h1,h2). Only layout + colour are set here. */
  .ingredients__title {
    text-align: center;
    line-height: 1.3;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
    max-width: 80rem;
    color: var(--ing-fg, #fff);
    text-wrap: balance;
  }
  .ingredients__title p {
    margin: 0;
    font: inherit;
    line-height: inherit;
  }

  /* ─── Tab card Layout ─── */
  .ingredients__card-layout {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    align-items: stretch;
  }
  @media (min-width: 768px) {
    .ingredients__card-layout {
      flex-direction: row;
      min-height: clamp(30rem, 40vw, 36rem);
    }
  }
  @media (min-width: 1024px) {
    .ingredients__card-layout {
      min-height: clamp(35rem, 45vw, 45rem);
    }
  }

  .ingredients__left-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: color-mix(in srgb, var(--ing-fg, #fff) 20%, transparent);
  }
  @media (min-width: 768px) {
    .ingredients__left-col {
      width: 50%;
      border-width: 1px 0 1px 1px;
      border-style: solid;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
  }
  @media (min-width: 1024px) {
    .ingredients__left-col {
      justify-content: space-between;
      padding: 1.5rem;
    }
  }
  @media (min-width: 1280px) {
    .ingredients__left-col {
      padding: 5rem;
    }
  }

  .ingredients__right-col {
    display: none;
    position: relative;
    flex-shrink: 0;
  }
  @media (min-width: 768px) {
    .ingredients__right-col {
      display: block;
      width: 50%;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--ing-fg, #fff) 20%, transparent);
    }
  }

  /* ─── Tabs ─── */
  .ingredients__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
  }
  .ingredients__tab {
    position: relative;
    padding: 1rem 0.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ing-fg, #fff) 10%, transparent);
    color: var(--ing-fg, #fff);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .ingredients__tab {
      padding: 1rem 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .ingredients__tab {
      padding: 1.5rem;
    }
  }
  .ingredients__tab:hover {
    background: color-mix(in srgb, var(--ing-fg, #fff) 18%, transparent);
  }
  .ingredients__tab.is-active {
    background: var(--ing-tab-active-bg, #fff);
    color: var(--ing-tab-active-fg, #1a1c23);
  }
  .ingredients__tab:focus-visible {
    outline: 2px solid var(--ing-accent, #0047AB);
    outline-offset: 2px;
  }
  
  .ingredients__tab-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 10;
  }
  .ingredients__tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    display: none;
  }
  @media (min-width: 768px) {
    .ingredients__tab-icon {
      display: block;
    }
  }
  .ingredients__tab-label {
    margin: 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.1;
  }
  .ingredients__tab-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: color-mix(in srgb, var(--ing-tab-active-fg, #000) 10%, transparent);
    width: 0;
    pointer-events: none;
    z-index: 0;
  }
  .ingredients__tab.is-active .ingredients__tab-progress {
    animation: ing-progress var(--ing-tab-interval, 4s) linear forwards;
  }
  @keyframes ing-progress {
    from { width: 0%; }
    to { width: 100%; }
  }

  /* ─── Media (crossfade) ─── */
  .ingredients__media-container {
    position: relative;
    background: color-mix(in srgb, var(--ing-fg, #fff) 4%, transparent);
  }
  .ingredients__media-mobile {
    margin-bottom: 1rem;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
  }
  @media (min-width: 768px) {
    .ingredients__media-mobile {
      display: none;
    }
  }
  .ingredients__media-desktop {
    height: 100%;
    min-height: 16rem;
  }
  .ingredients__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .ingredients__media-item.is-active {
    opacity: 1;
    z-index: 1;
  }
  .ingredients__media-item :is(img, svg) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ingredients__placeholder {
    background: color-mix(in srgb, var(--ing-fg, #fff) 8%, transparent);
    fill: color-mix(in srgb, var(--ing-fg, #fff) 35%, transparent);
  }

  /* ─── Description ─── */
  .ingredients__desc-wrap {
    display: flex;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ing-fg, #fff) 20%, transparent);
    width: 100%;
  }
  @media (min-width: 768px) {
    .ingredients__desc-wrap {
      padding-bottom: 0;
      border-bottom: 0;
      max-width: 234px;
      align-self: center;
    }
  }
  @media (min-width: 1024px) {
    .ingredients__desc-wrap {
      max-width: none;
      align-self: flex-start;
    }
  }
  
  .ingredients__desc {
    width: 100%;
    margin: 0;
  }
  .ingredients__desc[hidden] { display: none; }
  .ingredients__desc.is-active { animation: ingredients-fade 0.45s ease; }
  
  .ingredients__desc-text {
    margin: 0;
    font-size: var(--section-subtext-size, clamp(1rem, 1.4vw, 1.35rem));
    line-height: 1.5;
    color: color-mix(in srgb, var(--ing-fg, #fff) 92%, transparent);
  }
  .ingredients__desc-text :is(p, span) { margin: 0; }

  @media (prefers-reduced-motion: reduce) {
    .ingredients__media-item { transition: none; }
    .ingredients__desc.is-active { animation: none; }
    .ingredients__tab.is-active .ingredients__tab-progress { animation: none; width: 100%; }
  }

  @keyframes ingredients-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  /* ─── CTA ─── */
  .ingredients__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3.5rem);
  }
  .ingredients__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ing-fg, #fff);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }
  .ingredients__cta-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--ing-accent, #0047AB);
    color: #fff;
    flex: 0 0 auto;
  }
  .ingredients__cta-box svg { width: 14px; height: 14px; }
  .ingredients__cta:hover .ingredients__cta-label {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ─── Modal ─── */
  .ing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    max-height: calc(100vh - 50px);
    max-height: calc(100dvh - 50px);
    background: #fff;
    border: 0;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    z-index: 9999;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
  }
  .ing-modal[open] {
    display: flex;
  }
  .ing-modal::backdrop {
    background: rgba(0,0,0,0.5);
  }
  .ing-modal__wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Fill the dialog via flex, NOT `height: 100%`: a percentage height against
       the dialog's auto height collapses to 0 in Safari/WebKit, so the wrapper
       (overflow:hidden) clipped all content and only the grey backdrop showed. */
    flex: 1 1 auto;
    min-height: 0;
  }
  .ing-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem 1.5rem;
    background: #fff;
    flex-shrink: 0;
  }
  @media (min-width: 768px) {
    .ing-modal__header { padding: 2.5rem 1.5rem; }
  }
  .ing-modal__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #000;
  }
  .ing-modal__close {
    appearance: none;
    border: none;
    background: var(--ing-modal-close-bg, #ffc942);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ing-modal-close-fg, #000);
  }
  .ing-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.5rem 2.5rem;
  }
  .ing-modal__content-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .ing-modal__section {
    width: 100%;
  }
  .ing-modal__section-header {
    padding: 1rem;
    text-align: center;
    background: #f4f4f4;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
  }
  .ing-modal__section-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #000;
  }
  .ing-modal__section-body {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 4px 4px;
    background: #fff;
  }
  .ing-modal__item {
    padding: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
  .ing-modal__item:first-child {
    border-top: none;
  }
  .ing-modal__item-header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .ing-modal__item-header img {
    width: 85px;
    height: 57px;
    object-fit: cover;
    border-radius: 4px;
  }
  @media (min-width: 1024px) {
    .ing-modal__item-header img {
      width: 100px;
      height: 67px;
    }
  }
  .ing-modal__item-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: #000;
  }
  .ing-modal__item-desc {
    font-size: 0.9rem;
    margin: 1rem 0 0 0;
    color: #000;
  }
  @media (min-width: 768px) {
    .ing-modal__item-desc {
      margin-left: calc(85px + 1rem);
    }
  }
  @media (min-width: 1024px) {
    .ing-modal__item-desc {
      margin-left: calc(100px + 1rem);
    }
  }
  .ing-modal__section-body--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(0,0,0,0.1);
  }
  .ing-modal__grid-cell {
    background: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #000;
  }
  .ing-modal__grid-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
/* END_SECTION:ingredients */

/* START_SECTION:innovation (INDEX:78) */
.innovation {
    background: var(--inv-bg, #f5f8f8);
    color: var(--inv-fg, var(--color-foreground));
    padding: var(--inv-pt, 80px) var(--page-margin, 1.5rem) var(--inv-pb, 80px);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  /* Section-level audience targeting — same convention as the other sections. */
  .innovation[data-audience-target] { display: none; }
  .innovation[data-audience-target].is-audience-match { display: block; }

  .innovation__inner {
    max-width: var(--page-width, 96rem);
    margin: 0 auto;
  }

  /* Faint line used for the intro divider, fact cells and member cards. */
  .innovation {
    --inv-line: var(--inv-border, color-mix(in srgb, var(--inv-fg, var(--color-foreground)) 18%, transparent));
  }

  /* ─── Intro ─── */
  .innovation__tagwrap { padding-bottom: 40px; }
  .innovation__tag {
    display: inline-block;
    background: var(--inv-tag-bg, #d6e4e0);
    color: var(--inv-tag-fg, var(--inv-fg, var(--color-foreground)));
    font-family: var(--font-primary--family, inherit);
    /* Caption-10 — uppercase */
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 11px;
  }

  .innovation__split {
    border-top: 1px solid var(--inv-line);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  @media (min-width: 1024px) {
    .innovation__split {
      flex-direction: row;
      gap: 2rem;
      justify-content: space-between;
    }
    .innovation__split-heading { flex: 0 1 58%; }
    .innovation__split-body { flex: 0 1 38%; }
  }

  .innovation__heading {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    /* Title-20-Super — large display heading (~48px desktop, 32px mobile) */
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: inherit;
    text-wrap: balance;
  }

  .innovation__body {
    color: color-mix(in srgb, var(--inv-fg, var(--color-foreground)) 88%, transparent);
  }
  .innovation__body :is(p, span) {
    margin: 0 0 0.75rem;
    /* Body-30 (~18px desktop) */
    font-size: var(--section-subtext-size, clamp(1rem, 1.2vw, 1.125rem));
    line-height: 1.55;
  }
  .innovation__body :is(p, span):last-child { margin-bottom: 0; }

  /* ─── Content columns ─── */
  .innovation__cols {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
  }
  @media (min-width: 992px) {
    .innovation__cols {
      flex-direction: row;
      align-items: stretch;
    }
    /* Facts fill the remaining width on the left, members sit in a
       fixed-width column on the right (mirrors the source layout). */
    .innovation__facts { order: 0; flex: 1 1 auto; min-width: 0; }
    .innovation__members { order: 1; flex: 0 0 405px; }
  }

  /* ─── Members list ─── */
  .inv-members__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
  }
  .inv-member {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 0;
    background: var(--inv-card-bg, #ffffff);
    border: 1px solid var(--inv-line);
    /* breathing room on all sides */
    padding: 24px 20px;
  }
  .inv-member__media { flex: 0 0 48px; width: 48px; }
  @media (min-width: 768px) {
    .inv-member__media { flex-basis: 64px; width: 64px; }
  }
  .inv-member__img { display: block; width: 100%; height: auto; }
  .inv-member__name {
    margin: 0;
    font-family: var(--font-primary--family, inherit);
    /* Body-30-Strong — bold */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
  }
  .inv-member__title {
    margin: 6px 0 0;
    /* Caption-10 — uppercase */
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-fg, var(--color-foreground)) 68%, transparent);
  }

  /* ─── Facts grid ─── */
  .inv-facts__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
  }
  .inv-fact {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--inv-line);
    /* breathing room on all sides */
    padding: 28px 24px;
    min-height: 168px;
  }
  .inv-fact__value {
    font-family: var(--font-heading--family, inherit);
    font-weight: 400;
    /* fact-value — large serif number (~52px desktop, ~38px mobile) */
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1;
    color: inherit;
  }
  .inv-fact__desc {
    margin: 0;
    margin-top: auto;
    padding-top: 16px;
    /* Caption-10 — normal (~15px) */
    font-size: 15px;
    line-height: 1.4;
    color: inherit;
  }

  @media (max-width: 480px) {
    .inv-fact { min-height: 132px; padding: 22px 18px; }
  }
  /* Very small phones: 2×2 fact cells drop under ~140px wide — stack them. */
  @media (max-width: 359px) {
    .inv-facts__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:innovation */

/* START_SECTION:lifestage (INDEX:81) */
.lifestage {
    padding: var(--ls-pt, 80px) var(--page-margin, 1.5rem) var(--ls-pb, 80px);
    margin: var(--ls-mt, 0) 0 var(--ls-mb, 0);
    background: var(--ls-bg, var(--color-background));
    border-radius: var(--ls-r-tl, 0) var(--ls-r-tr, 0) var(--ls-r-br, 0) var(--ls-r-bl, 0);
    color: var(--ls-text, inherit);
  }
  /* Section-level audience targeting: the filter only applies when an audience
     is actually active (html[data-audience] is present). With no audience
     active, a tagged section stays visible — the audience just narrows it when
     one is selected. When an audience IS active, hide tagged sections unless
     the inline rule above un-hides them for a match. */
  html[data-audience] .lifestage[data-audience-target] { display: none; }

  .lifestage__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ───────── Intro ───────── */
  .lifestage__intro { margin-bottom: 40px; }
  @media (min-width: 1024px) { .lifestage__intro { margin-bottom: 80px; } }

  .lifestage__eyebrow {
    display: inline-block;
    background: var(--ls-eyebrow-bg, #f7c948);
    color: var(--ls-eyebrow-fg, #1a1c23);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.45em 0.7em;
    border-radius: 3px;
    margin-bottom: 1.75rem;
  }

  .lifestage__intro-grid {
    border-top: 1px solid color-mix(in srgb, var(--ls-text) 20%, transparent);
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  @media (min-width: 1024px) {
    .lifestage__intro-grid {
      flex-direction: row;
      justify-content: space-between;
      gap: 4rem;
      padding-top: 2.25rem;
    }
    .lifestage__intro-headline { flex: 0 1 46%; }
    .lifestage__intro-body { flex: 0 1 38%; }
  }

  .lifestage__headline {
    margin: 0;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ls-text, #1a1c23);
    font-size: clamp(1.75rem, 4.2vw, 40px);
    text-wrap: balance;
  }

  .lifestage__intro-body {
    color: var(--ls-text, #1a1c23);
    font-size: var(--section-subtext-size, 16px);
    line-height: 1.5;
  }
  .lifestage__intro-body :is(p, span) { margin: 0 0 0.75rem; font-size: inherit; }
  .lifestage__intro-body :is(p, span):last-child { margin-bottom: 0; }

  /* ───────── Image panel + waves ───────── */
  .lifestage__panel {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    min-height: 480px;
    display: flex;
  }
  @media (max-width: 767px) { .lifestage__panel { min-height: 380px; border-radius: 4px; } }

  .lifestage__panel-media { position: absolute; inset: 0; line-height: 0; }
  .lifestage__panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .lifestage__panel-img--placeholder { background: #1a1c23; }
  .lifestage__panel-scrim {
    position: absolute;
    inset: 0;
    background: var(--ls-overlay, #000);
    opacity: var(--ls-overlay-op, 0.3);
  }

  .lifestage__panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
    color: var(--ls-panel-fg, #fff);
  }

  /* Category pills */
  .lifestage__cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .lifestage__cat {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.6rem 1rem;
    border-radius: 3px;
    color: var(--ls-cat-fg, #fff);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ls-cat-fg) 25%, transparent);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .lifestage__cat.is-active {
    background: var(--ls-cat-active-bg, #fff);
    color: var(--ls-cat-active-fg, #1a1c23);
    border-color: var(--ls-cat-active-bg, #fff);
  }
  .lifestage__cat:focus-visible { outline: 2px solid var(--ls-panel-fg); outline-offset: 2px; }

  /* Waves row: arrows flank a flexible list of equal-width curves. */
  .lifestage__waves {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
  }
  .lifestage__arrow {
    appearance: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ls-panel-fg, #fff);
    cursor: pointer;
  }
  .lifestage__arrow svg { display: block; width: 100%; height: 100%; }
  .lifestage__arrow:focus-visible { outline: 2px solid var(--ls-panel-fg); outline-offset: 2px; }

  .lifestage__wave-list {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    height: 280px;
    min-width: 0;
  }
  /* Each curve (and any wrapper Shopify injects around the block) shares the
     width equally so the curves butt together into one continuous line. */
  .lifestage__wave-list > * {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
  }
  /* Phones: equal-share curves shrink below ~40px each and become illegible —
     give each a readable minimum and let the row scroll sideways (the curves
     still butt together into one continuous line, just wider than the screen).
     NOTE: must come AFTER the equal-share child rule above (same specificity —
     source order decides). */
  @media (max-width: 767px) {
    .lifestage__wave-list { overflow-x: auto; }
    .lifestage__wave-list > * { flex: 0 0 clamp(84px, 24vw, 130px); }
  }
  .lifestage__wave {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--ls-panel-fg, #fff);
  }
  .lifestage__wave-svg { width: 100%; height: 100%; display: block; }
  /* Morph the curve when the category dataset changes (where `d` is
     animatable — Chromium/Safari; snaps gracefully elsewhere). */
  .lifestage__wave-svg path { transition: d 450ms cubic-bezier(0.22, 1, 0.36, 1); }

  /* Only the active curve is highlighted; the rest are clearly dimmed. */
  .lifestage__wave-svg { opacity: 0.28; transition: opacity 280ms ease; }
  .lifestage__wave.is-active .lifestage__wave-svg { opacity: 1; }

  /* Factor label sits just above its peak; only shown for the active curve.
     --ls-peak is the curve's top Y in the 0–320 viewBox. */
  .lifestage__wave-label {
    position: absolute;
    left: 50%;
    top: calc(var(--ls-peak, 60) * 1% / 3.2);
    transform: translate(-50%, -120%);
    white-space: nowrap;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--ls-panel-fg, #fff);
    opacity: 0;
    transition: opacity 240ms ease, top 450ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .lifestage__wave.is-active .lifestage__wave-label { opacity: 1; }

  .lifestage__desc {
    max-width: 56rem;
    margin: 0 auto;
    min-height: 5.5rem;
    text-align: center;
  }
  .lifestage__desc-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ls-panel-fg, #fff);
    transition: opacity 200ms ease;
  }
  .lifestage__desc-text.is-swapping { opacity: 0; }

  /* ───────── Mobile panel tuning ───────── */
  @media (max-width: 767px) {
    .lifestage__panel-inner { padding: 1.5rem 1rem; gap: 1.25rem; }
    .lifestage__cats { gap: 0.4rem; }
    .lifestage__cat { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
    .lifestage__waves { gap: 0.4rem; }
    .lifestage__arrow { width: 28px; height: 28px; }
    .lifestage__wave-list { height: 200px; }
    .lifestage__wave-label { font-size: 0.95rem; }
    .lifestage__desc { min-height: 7rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lifestage__wave-svg,
    .lifestage__wave-svg path,
    .lifestage__wave-label,
    .lifestage__desc-text { transition: none; }
  }
/* END_SECTION:lifestage */

/* START_SECTION:media-stats (INDEX:84) */
/* Section element itself stays transparent — background, radius and
     the "wrapping" box live on the parent `.shopify-section` wrapper
     (see the inline <style> at the top of the rendered section). That
     way the bg also fills the section's margin area, because margin
     sits *inside* the parent's box. */
  .media-stats {
    padding: var(--ms-pt, 56px) var(--page-margin, 1.5rem) var(--ms-pb, 56px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    overflow: hidden;
  }
  /* Section-level audience targeting: when a handle is set the whole
     section hides by default and only shows once the JS confirms the
     active audience matches. (Per-stat filtering via
     `.ms-stat.is-audience-hidden` is separate, below.) */
  .media-stats[data-audience-target] {
    display: none;
  }
  .media-stats[data-audience-target].is-audience-match {
    display: block;
  }
  .media-stats__inner {
    max-width: var(--page-width, 96rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* No vertical gap — on mobile the dotted divider bridges the
       video and the stats directly; on desktop the divider is hidden
       and __bottom gets its own margin-top (see below). */
  }

  /* ---------- Top row: media + copy ---------- */
  .media-stats__top {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.5rem;
    align-items: stretch;
    justify-content: space-between;
  }
  @media (min-width: 990px) {
    .media-stats__top {
      flex-direction: row-reverse;
      gap: 3.5rem;
      align-items: center;
    }
    [data-media-position='left'] .media-stats__top {
      flex-direction: row;
    }
  }

  .media-stats__media {
    position: relative;
    aspect-ratio: 3 / 2;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    flex: 1 1 auto;
    background: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
  }
  @media (min-width: 990px) {
    .media-stats__media {
      /* Definite width so Safari & Chrome agree. With only height + max-width
         (no width) and aspect-ratio:auto, the box sized to the video/image's
         intrinsic width, which the two engines compute differently (Safari
         wider, Chrome narrower). 510×340 keeps the intended 3:2 proportion. */
      width: 510px;
      height: 340px;
      max-width: 100%;
      flex: 0 0 auto;
      aspect-ratio: auto;
    }
  }
  /* 990–1249: the content column is too narrow for the fixed 510px media —
     the copy column gets crushed to ~260px. Let the media scale with the row;
     ≥1250 keeps the exact 510×340 desktop sizing. */
  @media (min-width: 990px) and (max-width: 1249px) {
    .media-stats__media {
      width: min(510px, 45%);
      height: auto;
      aspect-ratio: 3 / 2;
    }
  }
  .media-stats__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .media-stats__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #fff;
    z-index: 1;
    transition: opacity 200ms ease;
  }
  .media-stats__play svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .media-stats__media.is-playing .media-stats__play {
    opacity: 0;
    pointer-events: none;
  }

  .media-stats__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 50rem;
    flex: 1 1 auto;
  }
  .media-stats__heading {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-foreground);
    margin: 0 0 1rem;
  }
  .media-stats__body {
    color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
    font-size: var(--section-subtext-size, clamp(0.95rem, 1.1vw, 1rem));
    line-height: 1.55;
  }
  .media-stats__body :is(p, span) {
    margin: 0 0 0.75rem;
    font-size: inherit;
  }
  .media-stats__body :is(p, span):last-child {
    margin-bottom: 0;
  }

  /* ---------- Mobile divider (vertical dotted line) ---------- */
  /* Sits between __top and __bottom on mobile with no surrounding
     gap, so its top edge meets the bottom of the video and its bottom
     edge meets the first stat row. */
  .media-stats__mobile-divider {
    width: 1px;
    height: 48px;
    margin: 0 auto;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--ms-accent) 0,
      var(--ms-accent) 6px,
      transparent 6px,
      transparent 9px
    );
    background-size: 1px 9px;
    background-repeat: repeat-y;
  }
  @media (min-width: 990px) {
    .media-stats__mobile-divider {
      display: none;
    }
  }

  /* ---------- Bottom row: stats + decor accent ---------- */
  .media-stats__bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  @media (min-width: 990px) {
    .media-stats__bottom {
      flex-direction: row;
      align-items: stretch;
    }
  }

  .media-stats__stats {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 990px) {
    .media-stats__stats {
      min-width: 32rem;
      max-width: 32rem;
    }
  }

  /* Decorative L-shape dotted accent — desktop only.
     The decor stretches to fill the full height of the bottom row
     (`align-self: stretch`, no fixed height). Because the bottom row
     starts immediately below the top row, the decor's top edge sits
     flush with the bottom of the media — so the vertical dashed line
     visually connects to the picture above with no gap. The L's
     corner lands at the decor's vertical center, which equals the
     stats column's vertical center. */
  .media-stats__decor {
    display: none;
  }
  @media (min-width: 990px) {
    .media-stats__decor {
      display: block;
      position: relative;
      flex: 1 1 auto;
      align-self: stretch;
      min-height: 170px;
      padding-right: 7.8rem;
      width: 100%;
    }
    /* Vertical line: top half of the decor, ending at the corner. */
    .media-stats__decor-vline {
      position: absolute;
      left: 80%;
      top: 0;
      bottom: 50%;
      width: 1px;
      background-image: repeating-linear-gradient(
        0deg,
        var(--ms-accent) 0,
        var(--ms-accent) 6px,
        transparent 6px,
        transparent 9px
      );
      background-size: 1px 100%;
      background-repeat: no-repeat;
    }
    /* Horizontal line: sitting on the decor's vertical center line. */
    .media-stats__decor-hline {
      position: absolute;
      left: 0;
      top: 50%;
      width: 80%;
      height: 1px;
      background-image: repeating-linear-gradient(
        90deg,
        var(--ms-accent) 0,
        var(--ms-accent) 6px,
        transparent 6px,
        transparent 9px
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
    }
  }

  /* ---------- Stat blocks (each row) ---------- */
  /* Each row has top + side borders; the row above it provides the
     divider line (its own border-bottom is removed). This way two
     rows never stack borders into a doubled "bolder" line, regardless
     of whether Shopify wraps each block in its own element. */
  .ms-stat {
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 18%, var(--color-background));
    border-left: 1px solid color-mix(in srgb, var(--color-foreground) 18%, var(--color-background));
    border-right: 1px solid color-mix(in srgb, var(--color-foreground) 18%, var(--color-background));
    background: var(--color-background);
  }
  /* Round the top corners on whichever element is the first child of
     the stats container — whether that's the .ms-stat itself or a
     Shopify per-block wrapper. */
  .media-stats__stats > :first-child .ms-stat,
  .media-stats__stats > .ms-stat:first-child {
    border-top-left-radius: var(--ms-row-radius, 12px);
    border-top-right-radius: var(--ms-row-radius, 12px);
  }
  /* Same idea for the last row: round bottom corners and add the
     row's missing border-bottom so the accordion closes cleanly. */
  .media-stats__stats > :last-child .ms-stat,
  .media-stats__stats > .ms-stat:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 18%, var(--color-background));
    border-bottom-left-radius: var(--ms-row-radius, 12px);
    border-bottom-right-radius: var(--ms-row-radius, 12px);
  }
  .ms-stat.is-audience-hidden {
    display: none;
  }

  .ms-stat__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--color-foreground);
    cursor: pointer;
    text-align: left;
    font: inherit;
  }
  .ms-stat__toggle:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: -2px;
  }
  .ms-stat:not([data-has-body]) .ms-stat__toggle {
    cursor: default;
  }

  .ms-stat__number {
    font-family: var(--font-heading--family, inherit);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1;
    font-weight: 600;
    color: var(--color-foreground);
    padding: 0 1rem 0 0.5rem;
    flex: 0 0 auto;
  }
  .ms-stat__label {
    flex: 1 1 auto;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.4;
    color: var(--color-foreground);
  }
  .ms-stat__chevron {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
    transition: transform 220ms ease;
  }
  .ms-stat.is-open .ms-stat__chevron {
    transform: rotate(180deg);
  }

  .ms-stat__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ms-stat.is-open .ms-stat__body {
    grid-template-rows: 1fr;
  }
  .ms-stat__body > div {
    overflow: hidden;
    padding: 0 1.25rem;
  }
  .ms-stat.is-open .ms-stat__body > div {
    padding-bottom: 1rem;
  }
  .ms-stat__body p {
    margin: 0;
    color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-stat__body,
    .ms-stat__chevron,
    .media-stats__play {
      transition: none;
    }
  }
/* END_SECTION:media-stats */

/* START_SECTION:nutrient-delivery (INDEX:87) */
.nutrient-delivery {
    padding: var(--nd-pt, 80px) var(--page-margin, 1.5rem) var(--nd-pb, 80px);
    background: var(--nd-bg);
    color: var(--nd-fg);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .nutrient-delivery[data-audience-target] { display: none; }
  .nutrient-delivery[data-audience-target].is-audience-match { display: block; }

  .nutrient-delivery__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 3rem;
    align-items: center;
    border-radius: 24px;
  }

  /* ─── Left column ─── */
  .nutrient-delivery__left {
    padding: 1rem 0 1rem 2rem;
  }
  .nutrient-delivery__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: var(--text-heading);
    line-height: 1.1;
    margin: 0 0 1.25rem;
    color: var(--nd-fg);
  }
  .nutrient-delivery__intro {
    font-size: 1.05rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--nd-fg) 88%, transparent);
    margin: 0 0 1.5rem;
    max-width: 28rem;
  }
  .nutrient-delivery__intro :is(p, span) { margin: 0; }

  .nutrient-delivery__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--nd-fg);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .nutrient-delivery__cta svg { width: 1rem; height: 1rem; }

  /* ─── Pill panel (right column) ─── */
  .nutrient-delivery__panel {
    position: relative;
    background: var(--nd-panel);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 12;
    margin: 1.5rem;
  }
  .nutrient-delivery__pill {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 32%;            /* pill image takes ~third of the panel width */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nutrient-delivery__pill-img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* ─── Callout labels ─── */
  .nutrient-delivery__label {
    --line-gap: 8%;           /* gap between label edge and pill edge */
    position: absolute;
    width: 30%;
    color: var(--nd-fg);
    font-size: 0.9rem;
  }
  .nutrient-delivery__label-title {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
  }
  .nutrient-delivery__label-desc {
    margin: 0;
    line-height: 1.35;
    color: color-mix(in srgb, var(--nd-fg) 80%, transparent);
  }
  .nutrient-delivery__label-line {
    position: absolute;
    top: 0.65rem;             /* aligned with title row */
    height: 1px;
    background: var(--nd-fg);
    opacity: 0.85;
  }
  .nutrient-delivery__label-dot {
    position: absolute;
    top: calc(0.65rem - 3.5px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nd-fg);
    opacity: 0.95;
  }

  /* Left-side label: text right-aligned, line extends to the pill on the right. */
  .nutrient-delivery__label--left {
    right: 50%;
    margin-right: 14%;
    text-align: right;
  }
  .nutrient-delivery__label--left .nutrient-delivery__label-line {
    left: 100%;
    width: var(--line-gap);
  }
  .nutrient-delivery__label--left .nutrient-delivery__label-dot {
    left: calc(100% + var(--line-gap) - 3.5px);
  }

  /* Right-side label: text left-aligned, line extends to the pill on the left. */
  .nutrient-delivery__label--right {
    left: 50%;
    margin-left: 14%;
    text-align: left;
  }
  .nutrient-delivery__label--right .nutrient-delivery__label-line {
    right: 100%;
    width: var(--line-gap);
  }
  .nutrient-delivery__label--right .nutrient-delivery__label-dot {
    right: calc(100% + var(--line-gap) - 3.5px);
  }

  /* ─── Responsive ─── */
  @media (max-width: 900px) {
    .nutrient-delivery__inner {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .nutrient-delivery__left { padding: 1rem 1rem 0; }
    .nutrient-delivery__panel {
      aspect-ratio: 4 / 5;
      margin: 1rem;
    }
    .nutrient-delivery__label {
      width: 40%;
      font-size: 0.8rem;
    }
    .nutrient-delivery__label-title { font-size: 0.9rem; }
    .nutrient-delivery__label--left  { margin-right: 18%; }
    .nutrient-delivery__label--right { margin-left: 18%; }
  }

  /* ≤600: the %-anchored callouts (inline top set per-label in the markup)
     can't reflow around long copy on phones and overlap the pill — switch the
     panel to normal flow: pill on top, labels stacked below as a plain list. */
  @media (max-width: 600px) {
    .nutrient-delivery__panel {
      aspect-ratio: auto;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding: 1.25rem;
    }
    .nutrient-delivery__pill {
      position: static;
      transform: none;
      width: 55%;
      height: auto;
      margin: 0 auto;
    }
    .nutrient-delivery__pill-img { max-height: 220px; }
    .nutrient-delivery__label {
      position: static;
      width: 100%;
    }
    .nutrient-delivery__label--left,
    .nutrient-delivery__label--right {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
    }
    .nutrient-delivery__label-line,
    .nutrient-delivery__label-dot { display: none; }
  }
/* END_SECTION:nutrient-delivery */

/* START_SECTION:page-subnav (INDEX:89) */
/* Sticky is applied to the section wrapper via the inline style block above. */
  .subnav {
    /* The card (background, border, shadow) is on the section wrapper above so
       its width matches the header exactly; the nav just holds the links. */
    width: 100%;
    max-width: none;
    margin: 0;
    background: transparent;
  }
  .subnav__inner {
    max-width: var(--page-width, 96rem);
    margin: 0 auto;
    padding: 0 var(--page-margin, 1.5rem);
  }
  .subnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .subnav__list::-webkit-scrollbar {
    display: none;
  }
  [data-align='center'] .subnav__list {
    justify-content: center;
  }
  [data-align='left'] .subnav__list {
    justify-content: flex-start;
  }

  .subnav__item {
    flex: 0 0 auto;
    /* Hidden until the bar reveals, then each item fades + slides in from the
       left - staggered by its index (--stagger, set inline) so the links appear
       one-by-one, left to right. */
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .is-revealed .subnav__item {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--stagger, 0) * 70ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .subnav__item {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-primary--family, inherit);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--subnav-fg, color-mix(in srgb, var(--color-foreground) 55%, transparent));
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
  }
  .subnav__link:hover {
    color: var(--subnav-active, var(--color-foreground));
  }

  /* Dot before the label - hidden until active. */
  .subnav__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--subnav-dot, #f5a623);
    flex: 0 0 auto;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .subnav__link.is-active {
    color: var(--subnav-active, var(--color-foreground));
    font-weight: 600;
  }
  .subnav__link.is-active .subnav__dot {
    opacity: 1;
    transform: scale(1);
  }

  @media (max-width: 900px) {
    .subnav__list {
      justify-content: flex-start;
      gap: 1.25rem;
    }
    .subnav__inner {
      padding: 0 1rem;
    }
    .subnav__link {
      font-size: 0.9rem;
    }
  }
/* END_SECTION:page-subnav */

/* START_SECTION:page (INDEX:90) */
.page-container {
    max-width: 80ch;
    margin: 0 auto;
    padding-top: calc(var(--header-height, 6rem) + 1rem);
    padding-bottom: 8rem;
  }

  .page-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid rgba(26, 28, 35, 0.10);
  }

  .page-title {
    text-align: center;
    margin: 0 auto 0.5rem;
    font-family: var(--section-heading-family, var(--font-heading--family)) !important;
    font-weight: var(--section-heading-weight, 400) !important;
    text-transform: var(--section-heading-transform, none) !important;
    font-size: var(--section-heading-size, clamp(2.2rem, 1.2rem + 3vw, 3.6rem)) !important;
    line-height: var(--section-heading-line-height, 1.1) !important;
    letter-spacing: var(--section-heading-tracking, -0.01em) !important;
    color: #000000 !important;
  }

  .page-body {
    font-family: var(--font-subheading--family), sans-serif;
    font-size: clamp(0.92rem, 0.84rem + 0.25vw, 1rem);
    line-height: 1.75;
    color: #1a1c23;
  }

  .page-body p {
    margin: 0 0 1.25em;
  }
  .page-body p:last-child {
    margin-bottom: 0;
  }

  .page-body h1,
  .page-body h2,
  .page-body h3,
  .page-body h4,
  .page-body h5,
  .page-body h6 {
    color: #000000 !important;
    font-family: var(--font-subheading--family), sans-serif !important;
  }

  .page-body h1 {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
    font-weight: 700 !important;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem) !important;
    line-height: 1.35 !important;
  }

  .page-body h2 {
    margin: clamp(2rem, 4vw, 3rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.3rem) !important;
    line-height: 1.35 !important;
  }

  .page-body a {
    color: var(--color-brand, #0a6b5e);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease;
  }
  .page-body a:hover {
    color: color-mix(in srgb, var(--color-brand, #0a6b5e) 75%, #000);
  }

  .page-body ul,
  .page-body ol {
    margin: 0 0 1.25em;
    padding-left: 1.5rem;
  }
  .page-body li {
    margin-bottom: 0.5em;
    line-height: 1.65;
  }

  .page-body ul { list-style: disc; }
  .page-body ol { list-style: decimal; }

  @media (max-width: 767px) {
    .page-container {
      padding-top: calc(var(--header-height, 6rem) + 0.75rem);
    }
  }
/* END_SECTION:page */

/* START_SECTION:policy (INDEX:93) */
/* ───────── Policy page layout ───────── */
  .policy-page {
    background: var(--pol-bg, #ffffff);
    color: var(--pol-text, #1a1c23);
    margin-top: var(--pol-mt, 0px);
    margin-bottom: var(--pol-mb, 0px);
    /* 8rem base padding to definitively clear the floating header and provide a wide gap */
    padding: calc(8rem + var(--pol-pt, 40px)) var(--page-margin, 1.5rem) var(--pol-pb, 80px);
  }

  .policy-page__inner {
    max-width: 70rem;
    margin: 0 auto;
  }

  /* ───────── Header ───────── */
  .policy-page__header {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--pol-border, rgba(26,28,35,0.10));
  }

  .policy-page .policy-page__title {
    margin: 0 0 0.5rem;
    font-family: var(--section-heading-family, var(--font-heading--family)) !important;
    font-weight: var(--section-heading-weight, 400) !important;
    font-size: var(--section-heading-size, clamp(2.2rem, 1.2rem + 3vw, 3.6rem)) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: var(--pol-heading, #0a3b38);
    text-wrap: balance;
  }

  .policy-page__meta {
    margin: 0;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 600;
    font-size: 1rem;
    color: var(--pol-meta, rgba(26,28,35,0.55));
  }

  /* ───────── Body content (rte) ───────── */
  .policy-page .policy-page__body {
    font-family: var(--font-subheading--family, sans-serif);
    font-size: var(--section-subtext-size, clamp(0.92rem, 0.84rem + 0.25vw, 1rem));
    line-height: 1.75;
    color: var(--pol-text, #1a1c23);
  }

  .policy-page .policy-page__body p {
    margin: 0 0 1.25em;
  }
  .policy-page .policy-page__body p:last-child { margin-bottom: 0; }

  /* Headings inside policy body — must beat .shopify-section :is(h1,h2) */
  .policy-page .policy-page__body h1 {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
    font-family: var(--font-subheading--family, sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--pol-h2, #0a3b38);
  }

  .policy-page .policy-page__body h2 {
    margin: clamp(2rem, 4vw, 3rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
    font-family: var(--font-subheading--family, sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.3rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--pol-h2, #0a3b38);
  }
  .policy-page .policy-page__body h2:first-child { margin-top: 0; }

  .policy-page .policy-page__body h3 {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(0.5rem, 1vw, 0.75rem);
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 600;
    font-size: clamp(1rem, 0.85rem + 0.4vw, 1.15rem);
    line-height: 1.35;
    color: var(--pol-h2, #0a3b38);
  }

  .policy-page .policy-page__body h4,
  .policy-page .policy-page__body h5,
  .policy-page .policy-page__body h6 {
    margin: 1.5rem 0 0.5rem;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 600;
    font-size: 1rem;
    color: var(--pol-h2, #0a3b38);
  }

  /* Links */
  .policy-page .policy-page__body a {
    color: var(--pol-link, #0a6b5e);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease;
  }
  .policy-page .policy-page__body a:hover {
    color: color-mix(in srgb, var(--pol-link, #0a6b5e) 75%, #000);
  }

  /* Lists */
  .policy-page .policy-page__body ul,
  .policy-page .policy-page__body ol {
    margin: 0 0 1.25em;
    padding-left: 1.5rem;
  }
  .policy-page .policy-page__body li {
    margin-bottom: 0.5em;
    line-height: 1.65;
  }
  .policy-page .policy-page__body li:last-child { margin-bottom: 0; }

  .policy-page .policy-page__body ul { list-style: disc; }
  .policy-page .policy-page__body ol { list-style: decimal; }
  .policy-page .policy-page__body ul ul,
  .policy-page .policy-page__body ol ol,
  .policy-page .policy-page__body ul ol,
  .policy-page .policy-page__body ol ul {
    margin-top: 0.4rem;
    margin-bottom: 0;
  }

  /* Bold / underline */
  .policy-page .policy-page__body b,
  .policy-page .policy-page__body strong { font-weight: 700; }
  .policy-page .policy-page__body ins { text-decoration: underline; }

  /* Tables */
  .policy-page .policy-page__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.92em;
  }
  .policy-page .policy-page__body th,
  .policy-page .policy-page__body td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--pol-border, rgba(26,28,35,0.10));
    text-align: left;
    vertical-align: top;
  }
  .policy-page .policy-page__body th {
    font-weight: 700;
    background: color-mix(in srgb, var(--pol-bg, #ffffff) 92%, var(--pol-text, #1a1c23));
  }

  /* Images */
  .policy-page .policy-page__body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
  }

  /* Blockquote */
  .policy-page .policy-page__body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 3px solid var(--pol-link, #0a6b5e);
    background: color-mix(in srgb, var(--pol-bg, #ffffff) 94%, var(--pol-text, #1a1c23));
    font-style: italic;
  }

  /* ───────── Mobile ───────── */
  @media (max-width: 767px) {
    .policy-page {
      padding-left: var(--page-margin, 1.25rem);
      padding-right: var(--page-margin, 1.25rem);
    }
  }
/* END_SECTION:policy */

/* START_SECTION:product-benefits (INDEX:94) */
.product-benefits {
    padding: var(--pb-pt, 80px) var(--page-margin, 1.5rem) var(--pb-pb, 80px);
    background: var(--sec-bg, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .product-benefits__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Head ─── */
  .product-benefits__head {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 3rem;
  }
  .product-benefits__title {
    font-size: var(--text-heading);
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--color-foreground);
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
  }
  .product-benefits__intro {
    color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
    margin: 0;
  }
  .product-benefits__intro :is(p, span) { margin: 0; font-size: inherit; }

  /* ─── Body ─── */
  .product-benefits__body {
    display: grid;
    grid-template-columns: minmax(0, 32rem) minmax(0, 36rem);
    gap: 2.5rem;
    justify-content: center;
    align-items: start;
    padding: 0;
  }

  /* Weeks column */
  .product-benefits__weeks-wrap {
    position: relative;
  }
  .product-benefits__weeks {
    list-style: none;
    margin: 0;
    padding: 0 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: relative;
  }
  /* Vertical dashed timeline line — sits behind the dots. */
  .product-benefits__weeks::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.55rem;
    bottom: 0.55rem;
    border-left: 1.5px dashed color-mix(in srgb, var(--color-foreground) 55%, transparent);
    z-index: 0;
  }

  .benefit-week {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    transition: opacity 220ms ease;
  }
  /* Dot at the head of each milestone, sitting on the vertical line. */
  .benefit-week::before {
    content: "";
    position: absolute;
    left: -1.8rem;
    top: 0.3rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--color-foreground);
    box-shadow: 0 0 0 4px var(--color-background);
    z-index: 1;
  }

  /* Highlight-on-scroll: milestones below the threshold are dimmed. */
  .benefit-week.is-faded { opacity: 0.32; }

  /* Audience filter — tagged blocks hidden until JS confirms a match. */
  .benefit-week[data-audience-target] { display: none; }
  .benefit-week[data-audience-target].is-audience-match { display: list-item; }

  .benefit-week__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .benefit-week__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    flex: 0 0 auto;
  }

  .benefit-week__heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  .benefit-week__bullets {
    margin: 0;
    padding: 0 0 0 1.1rem;
    color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .benefit-week__bullets li { margin: 0.15rem 0; }

  /* How to use */
  .product-benefits__howto {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
    border-radius: 12px;
  }
  .product-benefits__howto-image {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
  }
  .product-benefits__howto-body { flex: 1 1 auto; }
  .product-benefits__howto-body p { margin: 0 0 0.3rem; }
  .product-benefits__howto-list {
    margin: 0;
    padding-left: 1.1rem;
    color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Media column — width comes from the grid cell (36rem cap). */
  .product-benefits__media {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    margin-left: 0;
    align-self: start;
  }
  .product-benefits__media-main {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
  .product-benefits__media-main .product-benefits__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-benefits__media-caption {
    position: absolute;
    left: 1.1rem;
    bottom: 1.1rem;
    right: 1.1rem;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
  }
  .product-benefits__media-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }
  .product-benefits__media-small {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
  .product-benefits__media-small--rounded { border-radius: 0.9rem; }
  .product-benefits__media-small--circle  { border-radius: 999px; }
  .product-benefits__media-small .product-benefits__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ─── Responsive ─── */
  @media (max-width: 900px) {
    .product-benefits__head { margin-bottom: 2rem; }
    .product-benefits__body {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 0;
    }
    .product-benefits__media { order: -1; }
    .product-benefits__media-main { border-radius: 1.25rem; aspect-ratio: 16 / 11; }
    .product-benefits__media-small--rounded { border-radius: 0.75rem; }
    .product-benefits__howto { flex-direction: row; }
  }
/* END_SECTION:product-benefits */

/* START_SECTION:product-carousel-magicmind (INDEX:96) */
.mm-carousel {
    background: var(--mm-bg, transparent);
    color: var(--mm-fg, var(--color-foreground));
    padding: 48px var(--page-margin, 24px);
  }
  @media (min-width: 1024px) {
    .mm-carousel { padding-top: var(--mm-pt, 80px); padding-bottom: var(--mm-pb, 80px); }
  }
  @media (max-width: 767px) {
    .mm-carousel { padding-top: min(var(--mm-pt, 80px), 48px); padding-bottom: min(var(--mm-pb, 80px), 48px); }
  }
  .mm-carousel__inner { max-width: 1400px; margin: 0 auto; }

  /* ── Header ── */
  .mm-carousel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
  }
  .mm-carousel__head-text { min-width: 0; }
  .mm-carousel__title { margin: 0; color: inherit; text-wrap: balance; }
  .mm-carousel__subtitle {
    margin: 12px 0 0;
    max-width: 46ch;
    font-family: var(--section-subtext-family, var(--font-primary--family));
    font-size: var(--section-subtext-size);
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 78%, transparent);
  }

  /* ── Nav arrows ── */
  .mm-carousel__nav { display: flex; gap: 8px; flex: 0 0 auto; }
  .mm-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .mm-carousel__arrow:hover { background: var(--mm-btn, #111); color: #fff; border-color: var(--mm-btn, #111); transform: translateY(-2px); }
  .mm-carousel__arrow:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }
  .mm-carousel__arrow[disabled] { opacity: .35; cursor: default; }
  .mm-carousel__arrow[disabled]:hover { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 22%, transparent); transform: none; }

  /* ── Track (the ONLY horizontal scroller) ── */
  .mm-carousel__track {
    display: flex;
    gap: var(--mm-gap, 20px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    margin: 0;
  }
  .mm-carousel__track::-webkit-scrollbar { display: none; }
  .mm-carousel__track:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 4px; }

  /* ── Card ── */
  .mm-carousel__card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Desktop: 4 cards visible (4 cards + 3 gaps = 100% of the track). */
    width: calc((100% - (var(--mm-gap, 20px) * 3)) / 4);
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
  }
  .mm-carousel__card:hover { transform: translateY(-4px); }

  .mm-carousel__media {
    position: relative;
    border-radius: var(--mm-radius, 8px);
    background: var(--mm-card-bg, #f5f5f3);
    margin-bottom: 16px;
  }
  .mm-carousel__frame {
    overflow: hidden;
    border-radius: var(--mm-radius, 8px);
    aspect-ratio: var(--mm-ratio, 1 / 1);
    border: 1px solid color-mix(in srgb, #1a1a1a 12%, transparent);
  }
  .mm-carousel__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
  }
  .mm-carousel__card:hover .mm-carousel__img { transform: scale(1.04); }
  .mm-carousel__img--ph { object-fit: contain; opacity: .45; background: color-mix(in srgb, currentColor 6%, transparent); }
  .mm-carousel__card:hover { box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35); }

  .mm-carousel__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--mm-badge-bg, var(--mm-accent));
    color: var(--mm-badge-fg, var(--color-brand-contrast, #fff));
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .mm-carousel__body { display: flex; flex-direction: column; gap: 8px; }
  .mm-carousel__card-title {
    margin: 0;
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: 700;
    font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: inherit;
    text-wrap: balance;
  }
  .mm-carousel__card-desc {
    margin: 0;
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--section-subtext-size);
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 75%, transparent);
  }
  .mm-carousel__card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--mm-fg, #1a1a1a);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
  }
  .mm-carousel__card-link span { text-decoration: underline; text-underline-offset: 3px; }
  .mm-carousel__card-link svg { transition: transform .2s ease; }
  .mm-carousel__card-link:hover svg { transform: translateX(3px); }
  .mm-carousel__card-link:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; border-radius: 2px; }

  /* ── Responsive card widths ── */
  @media (max-width: 1023px) {
    /* Tablet: ~2.5 cards visible. */
    .mm-carousel__card { width: calc((100% - (var(--mm-gap, 20px) * 1.5)) / 2.5); }
  }
  @media (max-width: 767px) {
    .mm-carousel__head { flex-direction: column; align-items: flex-start; }
    .mm-carousel__nav { display: none; }
    /* Mobile: ~1.2 cards visible (next card peeks). */
    .mm-carousel__card { width: calc((100% - (var(--mm-gap, 20px) * 0.2)) / 1.2); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mm-carousel__track { scroll-behavior: auto; }
    .mm-carousel__card,
    .mm-carousel__img,
    .mm-carousel__arrow,
    .mm-carousel__card-link svg { transition: none; }
    .mm-carousel__card:hover { transform: none; }
    .mm-carousel__card:hover .mm-carousel__img { transform: none; }
  }
/* END_SECTION:product-carousel-magicmind */

/* START_SECTION:product-compare (INDEX:97) */
.product-compare {
    position: relative;
    overflow: hidden;
    padding: var(--pc-pt, 80px) var(--page-margin, 1.5rem) var(--pc-pb, 80px);
    color: #fff;
    background: #0f1614;
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }

  .product-compare__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .product-compare__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Soften the photo so the table reads as the primary content */
    filter: saturate(0.85) brightness(0.85);
  }
  .product-compare__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(8, 14, 12, calc(var(--pc-overlay, 0.4) * 0.6)) 0%,
        rgba(8, 14, 12, calc(var(--pc-overlay, 0.4) * 1.6)) 100%);
  }

  .product-compare__inner {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    margin: 0 auto;
  }

  .product-compare__title {
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    font-size: clamp(1.85rem, 3.4vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 2.5rem;
    text-align: center;
    color: #fff;
    text-wrap: balance;
  }

  /* Card — almost solid so background image doesn't bleed unevenly
     across rows. A heavy blur softens what little does show. */
  .product-compare__table {
    display: flex;
    flex-direction: column;
    background: rgba(13, 19, 17, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      0 30px 70px -30px rgba(0, 0, 0, 0.6),
      0 1px 0 rgba(255, 255, 255, 0.05) inset;
  }

  .product-compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .product-compare__row:last-child { border-bottom: 0; }

  /* Subtle zebra striping on the feature + competitor cells gives a
     consistent rhythm down the card. The Civaq column overrides this
     with its accent tint below. */
  .product-compare__row:nth-child(odd) .product-compare__cell--feature,
  .product-compare__row:nth-child(odd) .product-compare__cell--competitor {
    background: rgba(255, 255, 255, 0.025);
  }

  .product-compare__cell {
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.45;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.82);
    min-height: 4.25rem;
  }

  .product-compare__cell--feature {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.94);
  }

  .product-compare__cell--our,
  .product-compare__cell--competitor {
    justify-content: center;
    text-align: center;
  }

  /* "Our" column — solid-feel accent tint over a defined dark base
     (color-mix vs. a real colour, NOT transparent) so the tint reads
     consistently regardless of what's underneath. Accent stripes on
     both edges form a continuous vertical band down the column. */
  .product-compare__cell--our {
    position: relative;
    background: color-mix(in srgb, var(--pc-accent, #3d5b34) 26%, #1a2420);
    color: #fff;
    font-weight: 600;
    box-shadow:
      inset  4px 0 0 var(--pc-accent, #3d5b34),
      inset -4px 0 0 color-mix(in srgb, var(--pc-accent, #3d5b34) 55%, transparent);
  }
  /* The header cell already has a solid accent fill — no inner stripes. */
  .product-compare__cell--our.product-compare__cell--head {
    box-shadow: none;
  }

  /* Competitor column — visually recessed */
  .product-compare__cell--competitor {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
  }

  /* Header row */
  .product-compare__row--head {
    background: rgba(255, 255, 255, 0.02);
  }
  .product-compare__cell--head {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .product-compare__cell--our.product-compare__cell--head {
    background: var(--pc-accent, #3d5b34);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
  }
  /* Checkmark — sharper, with soft accent glow */
  .product-compare__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--pc-accent, #3d5b34);
    color: #fff;
    flex: 0 0 auto;
    box-shadow:
      0 6px 18px -6px color-mix(in srgb, var(--pc-accent, #3d5b34) 60%, transparent),
      0 0 0 3px rgba(255, 255, 255, 0.04);
  }
  .product-compare__check::before {
    content: '';
    width: 0.6rem;
    height: 0.32rem;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(-45deg) translate(0.04rem, -0.1rem);
  }

  /* Audience filtering */
  .product-compare[data-audience-target] { display: none; }
  .product-compare[data-audience-target].is-audience-match { display: block; }

  @media (max-width: 720px) {
    .product-compare { padding-left: 1rem; padding-right: 1rem; }
    .product-compare__title { margin-bottom: 2rem; }
    .product-compare__table { border-radius: 16px; }
    .product-compare__row {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    .product-compare__cell {
      padding: 1rem 0.85rem;
      font-size: 0.85rem;
      min-height: 3.5rem;
    }
    .product-compare__cell--head { font-size: 0.7rem; padding-top: 1.15rem; padding-bottom: 1.15rem; }
    .product-compare__cell--our.product-compare__cell--head { font-size: 0.78rem; }
    .product-compare__check { width: 1.6rem; height: 1.6rem; }
    .product-compare__check::before { width: 0.5rem; height: 0.28rem; }
  }
/* END_SECTION:product-compare */

/* START_SECTION:product-essentials (INDEX:99) */
.product-essentials {
    background: var(--pe-bg);
    padding: var(--pe-pt, 48px) var(--page-margin, 1.5rem) var(--pe-pb, 48px);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }

  .product-essentials__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* ─── Hero banner ─── */
  .pe-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--pe-card-radius, 24px);
    min-height: 22rem;
    display: flex;
    align-items: stretch;
    color: var(--pe-hero-fg);
  }
  .pe-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .pe-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pe-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      color-mix(in srgb, #000 25%, transparent) 0%,
      color-mix(in srgb, #000 55%, transparent) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .pe-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    gap: 1rem;
  }
  .pe-hero__title {
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 400);
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    line-height: 1.1;
    margin: 3.5rem 0 3.5rem;
    max-width: 64rem;
    text-wrap: balance;
  }

  /* Single frosted-glass container that wraps all proposition cards. */
  .pe-glass {
    margin-top: 1.5rem;
    padding: 1.75rem 2rem;
    background: color-mix(in srgb, var(--pe-hero-fg) 14%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--pe-hero-fg) 22%, transparent);
    border-radius: 20px;
    box-shadow: 0 8px 22px color-mix(in srgb, #000 18%, transparent);
  }

  .pe-glass__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* Cards themselves are transparent — they sit inside the shared glass panel. */
  .pe-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--pe-hero-fg);
  }
  .pe-card__img {
    flex: 0 0 auto;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    object-position: left center;
    display: block;
  }
  .pe-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
  }
  .pe-card__content {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    opacity: 0.9;
  }

  .pe-hero__dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .pe-dot {
    appearance: none;
    border: 0;
    background: color-mix(in srgb, var(--pe-hero-fg) 35%, transparent);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
  }
  .pe-dot.is-selected {
    background: var(--pe-hero-fg);
    transform: scale(1.15);
  }

  /* ─── Bottom row ─── */
  .pe-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
  }

  .pe-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--pe-card-radius, 24px);
    background: color-mix(in srgb, var(--pe-panel-bg) 10%, transparent);
    min-height: 100%;
  }
  .pe-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
  }
  .pe-tile__video {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .pe-tile__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ─── Nutrient panel ─── */
  .pe-panel {
    border-radius: var(--pe-card-radius, 24px);
    padding: 1.75rem 1.75rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 1.5rem;
    align-items: center;
  }
  .pe-panel__head { display: flex; flex-direction: column; gap: 0.75rem; max-width: 32rem; }
  .pe-panel__title {
    font-family: var(--font-heading--family);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.15;
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }
  .pe-panel__title sup { font-size: 0.55em; vertical-align: super; }
  .pe-panel__content {
    margin: 0;
    color: color-mix(in srgb, var(--pe-panel-fg) 82%, transparent);
    font-size: 1rem;
    line-height: 1.55;
  }
  .pe-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.7rem 1.25rem;
    background: color-mix(in srgb, var(--pe-panel-fg) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pe-panel-fg) 28%, transparent);
    color: var(--pe-panel-fg);
    border-radius: var(--style-border-radius-inputs);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 150ms ease;
  }
  .pe-panel__cta:hover { background: color-mix(in srgb, var(--pe-panel-fg) 20%, transparent); }

  /* ─── Pill illustration (single image + two callout labels) ─── */
  .pe-illustration {
    position: relative;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--pe-panel-fg) 4%, transparent);
    border-radius: 16px;
    overflow: hidden;
  }
  .pe-illustration__pill {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 40%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pe-illustration__pill-img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  .pe-illustration__label {
    --line-gap: 22%;
    position: absolute;
    width: 38%;
    color: var(--pe-panel-fg);
    z-index: 2;
  }
  .pe-illustration__label-title {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .pe-illustration__label-desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--pe-panel-fg) 80%, transparent);
  }
  .pe-illustration__label-line {
    position: absolute;
    top: 0.6rem;
    height: 2px;
    background: var(--pe-panel-fg);
    opacity: 0.95;
  }
  .pe-illustration__label-dot {
    position: absolute;
    top: calc(0.6rem - 5px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pe-panel-fg);
    opacity: 1;
  }
  .pe-illustration__label--left {
    right: 50%;
    margin-right: 12%;
    text-align: right;
  }
  .pe-illustration__label--left .pe-illustration__label-line { left: 100%;  width: var(--line-gap); }
  .pe-illustration__label--left .pe-illustration__label-dot  { left: calc(100% + var(--line-gap) - 6px); }
  .pe-illustration__label--right {
    left: 50%;
    margin-left: 12%;
    text-align: left;
  }
  .pe-illustration__label--right .pe-illustration__label-line { right: 100%; width: var(--line-gap); }
  .pe-illustration__label--right .pe-illustration__label-dot  { right: calc(100% + var(--line-gap) - 6px); }

  /* Audience filtering */
  .product-essentials[data-audience-target] { display: none; }
  .product-essentials[data-audience-target].is-audience-match { display: block; }

  /* ─── Responsive ─── */
  @media (max-width: 1100px) {
    .pe-glass__cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  }
  @media (max-width: 900px) {
    .pe-hero { min-height: 28rem; }
    .pe-hero__content { padding: 2rem 1.25rem 1.5rem; }
    .pe-glass { padding: 1.25rem 1.25rem; margin-top: 1rem; }
    .pe-glass__cards { grid-template-columns: 1fr; gap: 1.25rem; }
    .pe-card { gap: 0.85rem; }
    .pe-card__img {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px;
      min-height: 20px;
      max-width: 20px;
      max-height: 20px;
    }
    .pe-row { grid-template-columns: 1fr; }
    .pe-tile { aspect-ratio: 4 / 3; }
    .pe-panel {
      padding: 1.75rem 1.5rem 1.5rem;
      gap: 1.5rem;
      grid-template-columns: 1fr;
    }
    .pe-illustration { aspect-ratio: 4 / 5; }
    .pe-illustration__label { width: 38%; }
    .pe-illustration__label-title { font-size: 0.85rem; }
    .pe-illustration__label-desc  { font-size: 0.78rem; }
    .pe-illustration__label--left  { margin-right: 16%; }
    .pe-illustration__label--right { margin-left: 16%; }
  }

  /* 901–1099: the 2-col row/panel squeezes the pill illustration so the
     absolute %-positioned callout labels overlap the pill — collapse to a
     single column through the whole tablet band (≤900 already does this). */
  @media (max-width: 1099px) {
    .pe-row { grid-template-columns: 1fr; }
    .pe-panel { grid-template-columns: 1fr; }
  }

  /* ≤600: %-positioned callouts can't reflow around long text on phones —
     switch the illustration to a normal flow: pill on top, labels stacked
     below it as a plain list (lines/dots hidden). */
  @media (max-width: 600px) {
    .pe-illustration {
      aspect-ratio: auto;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding: 1.25rem;
    }
    .pe-illustration__pill {
      position: static;
      transform: none;
      width: 60%;
      height: auto;
      margin: 0 auto;
    }
    .pe-illustration__pill-img { max-height: 220px; }
    .pe-illustration__label {
      position: static;
      width: 100%;
    }
    .pe-illustration__label--left,
    .pe-illustration__label--right {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
    }
    .pe-illustration__label-line,
    .pe-illustration__label-dot { display: none; }
  }
/* END_SECTION:product-essentials */

/* START_SECTION:product-pdp-main (INDEX:102) */
.pdp-main {
    background: var(--pdp-bg, var(--color-background));
    color: var(--color-foreground);
    padding: var(--pdp-pt, 60px) var(--page-margin, 1.5rem) var(--pdp-pb, 60px);
    margin-top: var(--pdp-mt, 0);
    margin-bottom: var(--pdp-mb, 0);
  }

  .pdp-main__inner {
    /* Narrower than the theme-wide --page-width (110rem/1760px) so the
        PDP reads compact left-to-right, matching the reference layout
        (1600px outer − 100px gutters = 1400px content). */
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ─── LEFT column: image ─── */
  .pdp-main__media {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .pdp-main__image-card {
    position: relative;
    background: var(--pdp-card-bg, #f5f3ec);
    border-radius: 6px;
    overflow: hidden;
    /* Lock the main image card to exactly the first visible screen so it is
        the only thing shown on load: its bottom sits on the fold, the caption
        (overlaid just inside that bottom edge) stays on-screen, and the gallery
        — which follows the card — sits just below the fold and is revealed on
        scroll. A FIXED height (not min-height) is deliberate: it also CAPS the
        card so a tall --pdp-main-ratio can no longer push the card — and the
        caption with it — below the fold (which was clipping the caption). This
        replaces the old aspect-ratio sizing for the main card. `svh` = screen
        height with mobile browser chrome shown, so this holds on every device.
        The header is sticky/in-flow, so the only space above the card is the
        header + this section's top padding (and any top margin) — subtract
        exactly those so the card ends right on the fold. */
    height: calc(100svh - var(--header-height, 5.5rem) - var(--pdp-pt, 60px) - var(--pdp-mt, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* When the image card is a clickable <button>, strip default
     button chrome and inherit the divs look. */
  button.pdp-main__image-card {
    width: 100%;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: zoom-in;
    font: inherit;
  }
  .pdp-main__image-card img,
  .pdp-main__image-card svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Zoom the main product image past the contain box to fill the card —
     compensates for landscape source images and baked-in transparent
     padding. The card's overflow:hidden crops the (mostly empty) excess. */
  .pdp-main__image {
    transform: translateY(var(--pdp-image-shift, 0)) scale(var(--pdp-image-zoom, 1));
    transform-origin: center;
  }
  .pdp-main__image { transition: opacity 150ms ease; }

  /* Hover affordance: subtle tint + circular expand icon over clickable
     images, mirroring the lightbox "zoom" cue. */
  .pdp-zoom-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: opacity 160ms ease, background 160ms ease;
    pointer-events: none;
    z-index: 2;
  }
  .pdp-main__gallery-tile:hover .pdp-zoom-hint,
  .pdp-main__gallery-tile:focus-visible .pdp-zoom-hint {
    opacity: 1;
    background: color-mix(in srgb, var(--color-foreground, #1a1c23) 14%, transparent);
  }
  .pdp-zoom-hint__btn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1c23;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transform: scale(0.85);
    transition: transform 160ms ease;
  }
  .pdp-main__gallery-tile:hover .pdp-zoom-hint__btn { transform: scale(1); }
  .pdp-zoom-hint__btn svg { width: 22px; height: 22px; }
  .pdp-zoom-hint--sm .pdp-zoom-hint__btn { width: 34px; height: 34px; }
  .pdp-zoom-hint--sm .pdp-zoom-hint__btn svg { width: 16px; height: 16px; }

  /* Gallery grid below the main image — 2 tiles per row, each a
     square aspect; clicking a tile opens that image in the lightbox. */
  .pdp-main__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0;
  }
  .pdp-main__gallery-tile {
    position: relative;
    aspect-ratio: var(--pdp-media-ratio, 1 / 1);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
    border-radius: 6px;
    background: var(--pdp-card-bg, #f5f3ec);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    width: 100%;
    transition: border-color 150ms ease, transform 150ms ease;
  }
  .pdp-main__gallery-tile--featured-mobile { display: none; }
  .pdp-main__gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Landscape images span the full gallery width at their natural ratio. */
  .pdp-main__gallery-tile--wide {
    grid-column: 1 / -1;
    aspect-ratio: auto;
  }
  .pdp-main__gallery-tile--wide img {
    height: auto;
  }
  /* Video tiles autoplay muted and are sized like image tiles: square by
     default, full-width at natural ratio when landscape. Custom mute button. */
  .pdp-main__gallery-tile--video {
    cursor: default;
    background: #000;
  }
  .pdp-main__gallery-tile--video:hover { transform: none; }
  .pdp-main__gallery-tile--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pdp-main__gallery-tile--wide.pdp-main__gallery-tile--video video {
    height: auto;
    object-fit: contain;
  }
  .pdp-main__gallery-tile--video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: 0;
  }
  .pdp-main__video-mute {
    position: absolute;
    bottom: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1c23;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .pdp-main__video-mute svg { width: 18px; height: 18px; }
  .pdp-main__video-mute .icon-unmute { display: none; }
  .pdp-main__gallery-tile--video:not(.is-muted) .pdp-main__video-mute .icon-mute { display: none; }
  .pdp-main__gallery-tile--video:not(.is-muted) .pdp-main__video-mute .icon-unmute { display: inline-flex; }
  .pdp-main__gallery-tile:hover { transform: translateY(-1px); }
  .pdp-main__gallery-tile:focus-visible {
    outline: 2px solid var(--pdp-accent);
    outline-offset: 2px;
  }
  /* Pinned to the bottom of the image card, sitting over the cream
     space beneath the contained product image (which is nudged up via
     --pdp-image-shift to make room). Stacks the caption + optional
     subtext as a centered column. */
  .pdp-main__caption-block {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    /* Extra bottom padding lifts the caption clear of the fold (the card
        bottom sits on it). Padding only — moving the card bottom instead would
        let the gallery peek back into view. */
    padding: 0.85rem 1rem 3rem;
    text-align: center;
  }
  .pdp-main__image-caption {
    margin: 0;
    font-weight: 600;
    color: var(--color-foreground);
  }
  .pdp-main__image-subtext {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-foreground);
    opacity: 0.7;
  }

  /* ─── RIGHT column: sticky rail ─── */
  .pdp-main__rail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* Promo banner */
  .pdp-main__promo {
    --promo-bg: var(--color-foreground, #1a1c23);
    --promo-fg: #ffffff;
    position: relative;
    margin-top: 0.6rem; /* clearance for the badge that straddles the top edge */
  }
  .pdp-main__promo-frame {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.1rem 1.25rem;
    background: var(--promo-bg, #1a1c23);
  }
  .pdp-main__promo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
    z-index: 0;
  }
  .pdp-main__promo-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: var(--promo-fg, #fff);
  }
  /* "LIMITED TIME ONLY" pill — straddles the top edge, in the SAVE-badge colour. */
  .pdp-main__promo-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--promo-badge-bg, #ffc942);
    color: var(--promo-badge-fg, #1a1c23);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-indent: 0.08em; /* offset trailing letter-spacing so the text sits dead-centre */
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1;
  }
  /* No image tint anymore, so a faint shadow keeps the copy readable on the photo. */
  .pdp-main__promo-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
  .pdp-main__promo-sub   { font-size: 0.85rem; opacity: 0.9; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }
  .pdp-main__promo-link {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Header */
  .pdp-main__head { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
  .pdp-main__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.05;
    margin: 0;
    color: var(--color-foreground);
    text-wrap: balance;
  }
  .pdp-main__stars {
    display: flex;
    align-items: center;
  }
  .pdp-main__stars .jdgm-widget {
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
  }
  .pdp-main__subtitle {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  }

  /* Description */
  .pdp-main__description {
    font-size: var(--section-subtext-size, 0.95rem);
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
    max-width: 38rem;
  }
  .pdp-main__description p { margin: 0 0 0.75rem; }
  .pdp-main__description p:last-child { margin-bottom: 0; }

  .pdp-main__links-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
  }

  .pdp-main__textlink {
    color: var(--pdp-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .pdp-main__row-btn {
    --row-btn-bg: {{ section.settings.row_btn_bg | default: '#1a1c23' }};
    --row-btn-fg: {{ section.settings.row_btn_fg | default: '#ffffff' }};
    --row-btn-border: {{ section.settings.row_btn_border | default: '#000000' }};
    --row-btn-border-width: {{ section.settings.row_btn_border_width | default: 1 }}px;
    --row-btn-radius: {{ section.settings.row_btn_radius | default: 6 }}px;

    flex: 1 1 0%;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.5rem;
    background: var(--row-btn-bg);
    color: var(--row-btn-fg);
    border: var(--row-btn-border-width) solid var(--row-btn-border);
    border-radius: var(--row-btn-radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
  }
  .pdp-main__row-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  /* Form */
  .pdp-main__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
  }

  /* Subscription plans */
  .pdp-main__plans {
    border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-radius: 4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  .pdp-plan {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    padding: 1.7rem 1.6rem;
    cursor: pointer;
    background: var(--color-background);
    transition: background 150ms ease;
  }
  /* Divider BETWEEN rows only. Adjacent-sibling rule so the first row
     gets no top border (it would double against the container's outer
     border). `:first-child` was wrong here — the visually-hidden
     <legend> is the real first child, so it never matched the first
     plan and the first row's border-top was never removed. */
  .pdp-plan + .pdp-plan {
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  }
  .pdp-plan.is-selected { background: var(--pdp-plan-selected-bg, color-mix(in srgb, var(--pdp-accent) 6%, var(--color-background))); }
  /* Sold-out variant rows (variant selector only) — dimmed, not selectable. */
  .pdp-plan.is-unavailable { opacity: 0.5; cursor: not-allowed; }
  .pdp-plan.is-unavailable .pdp-plan__price { text-decoration: line-through; }

  .pdp-plan input { position: absolute; opacity: 0; pointer-events: none; }

  .pdp-plan__radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-foreground) 35%, transparent);
    flex: 0 0 auto;
    position: relative;
    transition: border-color 150ms ease;
    margin-top: 0.1rem;
  }
  .pdp-plan.is-selected .pdp-plan__radio { border-color: var(--pdp-accent); }
  .pdp-plan.is-selected .pdp-plan__radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--pdp-accent);
  }

  .pdp-plan__body { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
  .pdp-plan__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
  }
  /* Big, bold, uppercase row titles — Gotham SSm Black Condensed (declared in
     css-variables.liquid). Tracking opened slightly since the cut is dense. */
  .pdp-plan__title {
    font-family: var(--font-condensed--family, var(--font-subheading--family, inherit));
    font-weight: 700;
    /* Size overridable per-section via "Option title size" (--pdp-plan-title-size);
        falls back to the responsive clamp when the setting is 0. */
    font-size: var(--pdp-plan-title-size, clamp(1.6rem, 1.1rem + 1.6vw, 2.05rem));
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-foreground);
  }
  .pdp-plan__price {
    margin-left: auto;
    font-family: var(--font-subheading--family, var(--font-heading--family, inherit));
    font-weight: 700;
    font-size: clamp(1.35rem, 1rem + 1.1vw, 1.7rem);
    line-height: 1.05;
    color: var(--color-foreground);
  }
  .pdp-plan__meta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.98rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
  }
  .pdp-plan__per { color: inherit; flex: 1 1 auto; min-width: 0; }
  .pdp-plan__compare {
    margin-left: auto;
    font-size: 0.98rem;
    color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
    font-weight: 400;
  }
  .pdp-plan__sub {
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--color-foreground) 58%, transparent);
  }
  .pdp-plan__save {
    background: var(--pdp-save-bg, #ffc942);
    color: var(--pdp-save-fg, #1a1c23);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* CTAs */
  .pdp-main__atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--pdp-accent);
    color: var(--color-brand-contrast, #fff);
    border: 0;
    padding: 1.05rem 1.25rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .pdp-main__atc:hover { opacity: 0.92; transform: translateY(-1px); }
  .pdp-main__buy-once {
    display: block;
    text-align: center;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.9rem;
    padding: 0.4rem 0;
  }

  .pdp-main__disclaimer {
    margin: -1rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
  }

  /* ─── Generic panel ─── */
  .pdp-panel {
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
    padding: 1rem 0 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .pdp-panel__title {
    margin: 0 0 0.25rem;
    font-family: var(--font-subheading--family, inherit);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-foreground);
  }

  /* Subscription includes — row list with icons.
     Divider sits AFTER the title and after every row (none above the panel). */
  .pdp-panel--rows { border-top: 0; gap: 0; }
  .pdp-panel--rows .pdp-panel__title {
    margin: 0;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  }
  .pdp-panel--rows .pdp-panel__row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  }
  .pdp-panel__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
  }
  .pdp-panel__icon img,
  .pdp-panel__icon svg { width: 100%; height: 100%; object-fit: contain; }
  .pdp-panel__row-label {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-foreground);
  }
  .pdp-panel__more {
    align-self: flex-start;
    color: var(--pdp-accent);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 1rem 0 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  /* Callouts row — 3 columns of icon + label */
  .pdp-callouts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 1.25rem 0;
  }
  .pdp-callouts__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--color-foreground);
    text-align: center;
  }
  .pdp-callouts__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pdp-accent);
  }
  .pdp-callouts__icon img,
  .pdp-callouts__icon svg { width: 100%; height: 100%; object-fit: contain; }

  /* ─── Accordions ─── */
  .pdp-accordions {
    display: flex;
    flex-direction: column;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    margin-top: 0.5rem;
  }
  .pdp-accordion {
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  }
  .pdp-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    font-family: var(--font-subheading--family, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-foreground);
    cursor: pointer;
    list-style: none;
  }
  .pdp-accordion__summary::-webkit-details-marker {
    display: none;
  }
  .pdp-accordion__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease;
    color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
  }
  .pdp-accordion[open] .pdp-accordion__icon {
    transform: rotate(180deg);
  }
  .pdp-accordion__content {
    padding-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
  }
  .pdp-accordion__content p {
    margin: 0 0 0.85rem;
  }
  .pdp-accordion__content p:last-child {
    margin-bottom: 0;
  }

  /* Phones: keep the callouts in three compact icon-over-label columns and
     reduce the plan rows' desktop-scale padding. */
  @media (max-width: 599px) {
    .pdp-callouts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem;
      padding: 1.25rem 0 0.75rem;
    }
    .pdp-callouts__item {
      gap: 0.5rem;
      font-size: 0.72rem;
      line-height: 1.25;
      text-transform: uppercase;
    }
    .pdp-callouts__icon {
      width: 42px;
      height: 42px;
    }
    .pdp-plan {
      padding: 1.15rem 1rem;
      gap: 0.85rem;
    }
    /* Compact the row so title + badge + right-aligned price fit one line
       on most phones (price keeps margin-left:auto from the base rule; on
       very narrow screens it wraps but stays right-aligned, forming a
       right price-column with the struck compare directly below it). */
    .pdp-plan__row {
      row-gap: 0.2rem;
    }
    .pdp-plan__title {
      font-size: clamp(1.1rem, 4.8vw, 1.4rem);
    }
    .pdp-plan__price {
      font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    }
    .pdp-plan__save {
      font-size: 0.62rem;
      padding: 0.2rem 0.45rem;
      letter-spacing: 0.04em;
    }
    /* Meta as a strict 2-column band directly under the price: delivery
       note left (wraps in its own cell), struck compare pinned top-right —
       no more floating gaps between price / compare / note. */
    .pdp-plan__meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      column-gap: 0.75rem;
    }
    .pdp-plan__per {
      grid-column: 1;
      grid-row: 1;
      font-size: 0.88rem;
    }
    .pdp-plan__compare {
      grid-column: 2;
      grid-row: 1;
      margin-left: 0;
      font-size: 0.88rem;
    }
    /* Tighter vertical rhythm. */
    .pdp-plan__body {
      gap: 0.3rem;
    }
    /* Subtle selected-pack emphasis (the bg tint alone is faint on small
       screens): an inset accent bar on the left edge. */
    .pdp-plan.is-selected {
      box-shadow: inset 3px 0 0 var(--pdp-accent);
    }
    /* Text-style links sit side by side, centred. Only the DARK button
       variant (.pdp-main__row-btn) stacks — two side-by-side dark buttons
       squeeze to ~119px of text and wrap ("View Supplement / Label"). */
    .pdp-main__links-row {
      justify-content: center;
    }
    .pdp-main__links-row:has(.pdp-main__row-btn) {
      flex-direction: column;
    }
    .pdp-main__row-btn {
      width: 100%;
      min-width: 0;
    }
  }

  /* Mobile: the desktop fold-lock (image card = exactly one viewport tall)
     reads as a huge empty frame on phones — give the card a fixed square
     aspect ratio and size it like the gallery tiles. */
  @media (max-width: 899px) {
    /* Match the mobile PDP hierarchy: offer, product identity, media, then all
       purchase/details content. `display: contents` lets the rail's children
       participate in the outer flex order without duplicating any markup. */
    .pdp-main__inner {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .pdp-main__rail { display: contents; }
    .pdp-main__rail > * { order: 4; }
    .pdp-main__promo { order: 1; }
    .pdp-main__media { order: 3; }
    /* The rating stars belong beside the "View Supplement Label" / "Read
       Reviews" links on mobile, not tucked under the subtitle. `order` only
       works between flex siblings and the stars live inside <header>, so
       flatten the header with `display: contents` (the same trick used on the
       rail above) — title / subtitle / stars then take part in this ordering
       individually. The header box is gone, so its gap + margin-top are
       re-expressed on the children against .pdp-main__inner's 1rem gap.
       NOTE: these three MUST keep an explicit order — they are grandchildren,
       so `.pdp-main__rail > *` never reaches them and they would otherwise
       default to order 0 and jump above the promo banner. */
    .pdp-main__head { display: contents; }
    .pdp-main__title { order: 2; margin-top: 0.25rem; }
    .pdp-main__subtitle { order: 2; margin-top: calc(0.35rem - 1rem); }
    /* These blocks stay early in the desktop DOM, but move together to their
       requested mobile position directly before the callout row. */
    .pdp-main__description { order: 9; }
    .pdp-main__stars { order: 10; }
    .pdp-main__links-row { order: 11; }
    .pdp-callouts { order: 12; }
    .pdp-callouts ~ * { order: 13; }

    /* Trim the (merchant-set, large) section top padding so the main image
       starts just under the header and fills the screen. */
    .pdp-main {
      padding-top: 1rem;
      overflow-x: hidden;
    }
    .pdp-main__promo {
      margin-top: 0.4rem;
    }
    .pdp-main__promo-frame {
      min-height: 84px;
      padding: 0.8rem 1rem;
    }
    /* Of these, only `text-align` still does anything now that the header is
       `display: contents` — it inherits down to the flattened children. The old
       align-items / gap / margin-top are re-expressed on the children above
       (the stars keep centring via their own justify-content). */
    .pdp-main__head {
      text-align: center;
    }
    .pdp-main__title {
      font-size: clamp(1.9rem, 9vw, 2.55rem);
      line-height: 0.98;
      text-wrap: balance;
    }
    .pdp-main__subtitle {
      max-width: 34rem;
      font-size: 0.74rem;
      line-height: 1.35;
    }
    .pdp-main__stars { justify-content: center; }

    /* Fixed square product image card matching the gallery thumbnail sizing */
    .pdp-main__image-card {
      height: auto;
      aspect-ratio: 1 / 1;
      max-height: none;
      border: 1px solid color-mix(in srgb, var(--color-foreground) 16%, transparent);
      border-radius: 4px;
    }
    .pdp-main__caption-block {
      bottom: 0.2rem;
      padding: 0.35rem 1rem;
      background: linear-gradient(to bottom, transparent, var(--pdp-card-bg, #fff) 28%);
    }
    .pdp-main__image {
      transform: translateY(var(--pdp-image-shift, 0)) scale(var(--pdp-image-zoom-m, 1));
      object-fit: contain;
    }
    .pdp-main__image-card.is-gallery-image .pdp-main__image {
      object-fit: contain !important;
      transform: translateY(var(--pdp-image-shift, 0)) scale(var(--pdp-image-zoom-m, 1)) !important;
    }
    .pdp-main__image-card.is-gallery-image .pdp-main__caption-block {
      display: none;
    }

    /* Compact thumbnail rail beneath the hero image. */
    .pdp-main__gallery {
      display: flex;
      grid-template-columns: none;
      gap: 0.45rem;
      margin-top: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-padding: 0 var(--page-margin, 1rem);
    }
    .pdp-main__gallery::-webkit-scrollbar { display: none; }
    .pdp-main__gallery-tile,
    .pdp-main__gallery-tile--wide {
      display: block;
      flex: 0 0 clamp(56px, 17vw, 74px);
      grid-column: auto;
      aspect-ratio: 1 / 1;
      scroll-snap-align: center;
      border-radius: 4px;
    }
    .pdp-main__gallery-tile.is-current {
      border-color: var(--pdp-accent);
      box-shadow: inset 0 0 0 1px var(--pdp-accent);
    }
    .pdp-main__gallery-tile--wide { aspect-ratio: 1 / 1; }
    .pdp-main__gallery-tile--wide img,
    .pdp-main__gallery-tile--video video { height: 100%; object-fit: cover; }
    .pdp-main__video-mute,
    .pdp-zoom-hint { display: none; }
    .pdp-main__dots { display: none !important; }

    /* Keep the recommendation comfortably below the CTA instead of pulling
       it into the button, and open up the transition into the description. */
    .pdp-main__disclaimer {
      margin: 0.25rem 0 0;
      padding-inline: 0.5rem;
      font-size: 0.78rem;
      line-height: 1.4;
    }
    .pdp-main__description {
      margin-top: 1rem;
    }
    /* Pagination dots (pointer) under the swipe gallery. */
    .pdp-main__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.75rem;
    }
    .pdp-main__dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: color-mix(in srgb, var(--color-foreground) 25%, transparent);
      cursor: pointer;
      transition: width 200ms ease, background 200ms ease;
    }
    .pdp-main__dot.is-active {
      width: 22px;
      border-radius: 4px;
      background: var(--pdp-accent, var(--color-foreground));
    }
  }
  /* iPhone-sized usable browser heights can be much shorter than the device's
     advertised screen once Safari chrome is present. Compact only that height
     band so the complete thumbnail rail remains inside the first viewport. */
  @media (max-width: 899px) and (max-height: 750px) {
    .pdp-main__inner {
      gap: 0.75rem;
    }
    .pdp-main__promo-frame {
      min-height: 76px;
      padding-block: 0.65rem;
    }
    /* Header is `display: contents` at this width, so its gap/margin-top are
       inert — tighten the flattened children instead. .pdp-main__inner's gap
       is 0.75rem here, so the subtitle offset differs from the block above. */
    .pdp-main__title { margin-top: 0; }
    .pdp-main__subtitle { margin-top: calc(0.25rem - 0.75rem); }
    .pdp-main__image-card {
      aspect-ratio: 1 / 1;
      height: auto;
    }
    .pdp-main__gallery-tile,
    .pdp-main__gallery-tile--wide {
      flex-basis: clamp(54px, 16vw, 68px);
    }
  }

  /* Dots are a mobile-only affordance — hide from tablet/desktop up. */
  @media (min-width: 900px) {
    .pdp-main__links-row { margin-bottom: 1.5rem; }
    .pdp-main__dots { display: none; }
  }

  /* Tablet band (2-col PDP active but the right rail is only ~380-450px —
     phone-ish): desktop-scale plan typography wraps into a ragged stack.
     Same compact treatment as phones, sized up a notch. ≥1200 untouched. */
  @media (min-width: 900px) and (max-width: 1199px) {
    .pdp-plan__row { row-gap: 0.2rem; }
    .pdp-plan__title { font-size: clamp(1.2rem, 2vw, 1.5rem); }
    .pdp-plan__price { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
    .pdp-plan__save {
      font-size: 0.66rem;
      padding: 0.2rem 0.5rem;
      letter-spacing: 0.04em;
    }
    .pdp-plan__meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      column-gap: 0.75rem;
    }
    .pdp-plan__per { grid-column: 1; grid-row: 1; font-size: 0.9rem; }
    .pdp-plan__compare { grid-column: 2; grid-row: 1; margin-left: 0; font-size: 0.9rem; }
    .pdp-plan__body { gap: 0.3rem; }
    .pdp-plan { padding: 1.3rem 1.2rem; }
    /* Narrow rail: only the DARK button variant stacks (side-by-side dark
       buttons wrap); text links stay in a row. */
    .pdp-main__links-row:has(.pdp-main__row-btn) { flex-direction: column; }
    .pdp-main__row-btn { width: 100%; min-width: 0; }
  }

  /* Short desktop/landscape viewports: the svh fold-lock collapses the card
     and the bottom caption overlay lands ON the product image. Enforce a
     floor so image + caption keep their designed room — on normal-height
     desktops the svh calc is larger, so max() leaves them untouched. */
  @media (min-width: 900px) and (max-height: 700px) {
    .pdp-main__image-card {
      height: max(calc(100svh - var(--header-height, 5.5rem) - var(--pdp-pt, 60px) - var(--pdp-mt, 0px)), 34rem);
    }
  }

  /* Bullet lists (benefits, also reported) */
  .pdp-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pdp-bullets li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-foreground);
  }
  /* Gold dot bullet (matches the SAVE-badge yellow). */
  .pdp-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pdp-save-bg, #ffc942);
  }
  .pdp-bullets--secondary li::before { background: var(--pdp-save-bg, #ffc942); }

  /* Benefits + Reported share one bordered card, split by a divider. */
  .pdp-benefits-box {
    border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-radius: 4px;
    background: var(--color-background);
    overflow: hidden;
  }
  .pdp-benefits-box__sec { padding: 1.75rem; }
  .pdp-benefits-box__sec .pdp-panel__title { margin-bottom: 1rem; }
  .pdp-benefits-box__sec + .pdp-benefits-box__sec {
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  }
  /* Recommended usage — prose paragraphs (not bullets). pre-line keeps the
     line breaks when the rich-text value is a single paragraph that uses
     newlines (rather than separate paragraph blocks), so the copy still reads
     as spaced paragraphs. */
  .pdp-usage {
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
    white-space: pre-line;
  }
  .pdp-usage p { margin: 0 0 0.85rem; white-space: pre-line; }
  .pdp-usage p:last-child { margin-bottom: 0; }

  /* Free-from tags */
  .pdp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.5rem;
    padding: 1rem 0 0;
  }
  .pdp-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    background: var(--tag-bg, color-mix(in srgb, var(--color-foreground) 7%, var(--color-background)));
    color: var(--tag-text, color-mix(in srgb, var(--color-foreground) 60%, transparent));
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
  }

  /* ─── Desktop layout ─── */
  @media (min-width: 900px) {
    .pdp-main__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--pdp-col-gap, 24px);
      align-items: start;
    }
    /* Independent scroll. BOTH columns are sticky, so whichever is the SHORTER
       one PINS while the TALLER column scrolls past it — then the whole page
       scrolls on to the next section. The layout adapts to the content:
         • More images on the left  → the media column is taller, so it scrolls
           (revealing the gallery) while the buy rail pins; then full page.
         • Fewer images on the left → the media column is shorter, so it pins
           (the main image stays put) while the taller rail scrolls; then full
           page.
       Whichever column is the taller one equals the row height, so it has no
       room to stick and scrolls normally — no inner scrollbar either side. */
    .pdp-main__media {
      position: sticky;
      top: calc(var(--header-height, 5.5rem) + 1.5rem);
      align-self: start;
      /* The image column gets only HALF the rail's inset, so the gallery + main
         image read noticeably WIDER than the (more compact) purchase rail. */
      padding-left: calc(var(--pdp-rail-px, 36px) / 2);
      padding-right: calc(var(--pdp-rail-px, 36px) / 2);
    }
    .pdp-main__rail {
      position: sticky;
      top: calc(var(--header-height, 5.5rem) + 1.5rem);
      align-self: start;
      /* Inset the purchase rail's content from the column edges so the
         right side reads more compact in width (matches the reference).
         Driven by the "Rail side padding" setting (--pdp-rail-px). The media
         column above uses the same inset, so left/right stay symmetric. */
      padding-left: var(--pdp-rail-px, 36px);
      padding-right: var(--pdp-rail-px, 36px);
    }
  }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* --- Customer Reviews Modal --- */
  .reviews-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .reviews-modal[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }
  .reviews-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 22, 0.7);
    backdrop-filter: blur(4px);
    border: 0;
    cursor: pointer;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .reviews-modal__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
  }
  .reviews-modal__card {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevents inner content from spilling over border-radius */
  }
  .reviews-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
    background: #ffffff;
  }
  .reviews-modal__title {
    margin: 0;
    font-family: var(--font-subheading--family, var(--font-heading--family, inherit));
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-foreground);
  }
  .reviews-modal__close {
    background: transparent;
    border: 0;
    padding: 0.5rem;
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease;
  }
  .reviews-modal__close:hover {
    transform: scale(1.15);
  }
  .reviews-modal__close svg {
    width: 24px;
    height: 24px;
  }
  .reviews-modal__body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
  }
  
  /* Prevent background scrolling when modal is open */
  body.reviews-modal-open {
    overflow: hidden !important;
    height: 100vh !important;
  }

  /* Hide the widget's built-in title inside our modal so it is not shown twice */
  .reviews-modal .jdgm-rev-widg__title,
  .reviews-modal .jdgm-widget-title,
  .reviews-modal .jdgm-all-reviews__title {
    display: none !important;
  }
/* END_SECTION:product-pdp-main */

/* START_SECTION:product-testing (INDEX:104) */
.product-testing {
    padding: var(--pt-pt, 32px) var(--page-margin, 1.5rem) var(--pt-pb, 32px);
    color: var(--pt-fg);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }

  .product-testing__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    background: var(--pt-bg);
    border-radius: var(--sec-r-tl, 24px) var(--sec-r-tr, 24px) var(--sec-r-br, 24px) var(--sec-r-bl, 24px);
    padding: var(--pt-inner-pt) 2rem var(--pt-inner-pb);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
  }

  /* ─── Left copy ─── */
  .product-testing__content {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
  }
  .product-testing__title {
    font-size: var(--text-heading);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    color: var(--pt-fg);
    text-wrap: balance;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
  }
  .product-testing__description {
    color: color-mix(in srgb, var(--pt-fg) 75%, transparent);
    font-size: var(--section-subtext-size, 1rem);
    line-height: 1.55;
    margin: 0;
  }
  .product-testing__description :is(p, span) { margin: 0; font-size: inherit; }

  /* ─── Cards grid ─── */
  .product-testing__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  /* ─── Card ─── */
  .testing-card {
    --pt-accent: color-mix(in srgb, var(--pt-fg) 10%, transparent);
    --pt-accent-strong: color-mix(in srgb, var(--pt-fg) 25%, transparent);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: var(--pt-card-bg);
    border-radius: var(--pt-card-radius);
    border: 1px solid var(--pt-accent);
    padding: 2.5rem 1.5rem 2rem;
    gap: 1.25rem;
    color: var(--pt-fg);
    text-decoration: none;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  a.testing-card:hover,
  a.testing-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.22);
    border-color: var(--pt-accent-strong);
  }
  a.testing-card:hover .testing-card__icon,
  a.testing-card:focus-visible .testing-card__icon {
    transform: scale(1.04);
  }

  /* Circular icon badge — soft tinted background behind the image. */
  .testing-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pt-fg) 5%, transparent);
    flex: 0 0 auto;
    transition: transform 220ms ease;
  }
  .testing-card__image {
    width: 62%;
    height: 62%;
    object-fit: contain;
    display: block;
  }

  /* Small accent line between icon and caption — visual rhythm. */
  .testing-card__divider {
    width: 2.25rem;
    height: 2px;
    background: var(--pt-accent-strong);
    border-radius: 2px;
    flex: 0 0 auto;
  }

  .testing-card__text {
    margin: 0;
    font-size: 0.975rem;
    line-height: 1.5;
    font-weight: 500;
    color: color-mix(in srgb, var(--pt-fg) 90%, transparent);
    max-width: 17rem;
    text-wrap: balance;
  }

  /* ─── Responsive ─── */
  @media (min-width: 64em) {
    .product-testing__inner {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr);
      gap: 3rem;
      padding-inline: 4rem;
    }
    .product-testing__content {
      text-align: left;
      margin: 0;
      max-width: 42rem;
    }
  }

  @media (max-width: 900px) {
    .product-testing__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 540px) {
    .product-testing__inner {
      padding: 2.5rem 1.25rem;
    }
    .product-testing__cards {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:product-testing */

/* START_SECTION:product-variants-grid (INDEX:105) */
.product-variants-grid {
    padding: var(--pvg-pt) var(--page-margin, 1.5rem) var(--pvg-pb);
    background: var(--pvg-bg, #ffffff);
    margin-top: var(--pvg-mt, 0);
    margin-bottom: var(--pvg-mb, 0);
  }

  .pvg-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }

  .pvg-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    margin: 0 0 16px;
    color: #1a1c23;
  }

  .pvg-subtitle {
    font-size: 18px;
    color: #666;
    margin: 0 0 60px;
    max-width: 700px;
  }

  /* VARIANT CARDS GRID */
  .pvg-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 80px;
  }

  @media (min-width: 1024px) {
    .pvg-cards-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
  }

  @media (max-width: 768px) {
    .pvg-cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 60px;
    }
  }

  .pvg-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #f9f8f6;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .pvg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .pvg-card-image {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
  }

  .pvg-card-img {
    width: 100%;
    height: auto;
    display: block;
  }

  .pvg-badge {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pvg-badge-img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .pvg-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .pvg-rating-stars {
    display: flex;
    gap: 3px;
  }

  .pvg-rating-stars .star {
    color: #ffc942;
  }

  .pvg-rating-stars .star.empty {
    color: #ddd;
  }

  .pvg-rating-count {
    font-size: 13px;
    color: #999;
    font-weight: 500;
  }

  .pvg-variant-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1c23;
  }

  .pvg-variant-desc {
    font-size: 15px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.6;
  }

  .pvg-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pvg-feature-item {
    font-size: 13px;
    color: #666;
    font-weight: 500;
  }

  .pvg-btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--pvg-accent, #0047AB);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s ease;
    cursor: pointer;
    border: none;
    margin-top: auto;
  }

  .pvg-btn:hover {
    background: var(--pvg-accent, #0047AB);
    filter: brightness(0.9);
  }

  /* INGREDIENTS SECTION */
  .pvg-ingredients-section {
    margin-bottom: 80px;
  }

  .pvg-ingredients-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin: 0 0 40px;
    color: #1a1c23;
  }

  .pvg-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }

  @media (max-width: 768px) {
    .pvg-ingredients-grid {
      grid-template-columns: 1fr;
    }
  }

  .pvg-ingredient-card {
    padding: 24px;
    background: #f9f8f6;
    border-radius: 8px;
    border-left: 4px solid var(--pvg-accent, #0047AB);
  }

  .pvg-ingredient-variant-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #1a1c23;
  }

  .pvg-ingredient-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pvg-ingredient-item {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }

  /* IMAGES SECTION */
  .pvg-images-section {
    margin-bottom: 0;
  }

  .pvg-images-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin: 0 0 40px;
    color: #1a1c23;
  }

  .pvg-images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
  }

  @media (max-width: 768px) {
    .pvg-images-gallery {
      grid-template-columns: 1fr;
    }
  }

  .pvg-gallery-item {
    border-radius: 8px;
    overflow: hidden;
    background: #f9f8f6;
  }

  .pvg-gallery-img {
    width: 100%;
    height: auto;
    display: block;
  }

  .pvg-gallery-caption {
    padding: 12px 16px;
    font-size: 13px;
    color: #666;
    margin: 0;
    text-align: center;
  }
/* END_SECTION:product-variants-grid */

/* START_SECTION:promo-banner (INDEX:108) */
.promo-banner {
    background: var(--pb-bg);
    color: var(--pb-fg);
    padding: var(--pb-pt, 0) var(--page-margin, 1.5rem) var(--pb-pb, 0);
    margin-top: var(--pb-mt, 0);
    margin-bottom: var(--pb-mb, 0);
  }
  .promo-banner__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .promo-banner__offer {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .promo-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  .promo-banner__icon img { width: 100%; height: 100%; object-fit: contain; }
  .promo-banner__badge {
    display: inline-block;
    background: var(--pb-badge-bg);
    color: var(--pb-badge-fg);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  @media (max-width: 640px) {
    .promo-banner__inner { padding: 0.55rem 0; justify-content: center; text-align: center; }
    .promo-banner__offer { font-size: 0.85rem; }
  }
/* END_SECTION:promo-banner */

/* START_SECTION:proof-pillars (INDEX:109) */
.proof-pillars {
    color: var(--pp-fg, var(--color-foreground));
    padding: var(--pp-pt, 80px) var(--page-margin, 1.5rem) var(--pp-pb, 80px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  /* Section-level audience targeting: hidden by default when a
     target is set, shown only after JS confirms the current
     audience matches. Same convention as `stats.liquid`. */
  .proof-pillars[data-audience-target] { display: none; }
  .proof-pillars[data-audience-target].is-audience-match { display: block; }

  .proof-pillars__inner {
    max-width: var(--page-width, 96rem);
    margin: 0 auto;
  }

  /* ─── Heading ─── */
  .proof-pillars__heading {
    margin: 0 0 2.5rem;
    text-align: center;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 600) !important;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    color: inherit;
    text-wrap: balance;
  }
  .proof-pillars__heading-italic {
    font-family: var(--font-heading--family);
    font-style: italic;
    font-weight: 400;
  }

  /* ─── Grid ─── */
  .proof-pillars__grid {
    display: grid;
    grid-template-columns: repeat(var(--pp-cols, 4), minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 1.5rem);
  }

  /* ─── Pillar block ─── */
  .pp-pillar {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .pp-pillar.is-audience-hidden { display: none; }

  .pp-pillar__media {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
  .pp-pillar__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pp-pillar__title {
    margin: 1.25rem 0 0;
    /* Floor at 1.5rem (24px) so the title reads as a heading on
       phones — narrow viewports made the previous 1.4vw target
       collapse to the min, which dropped the size to ~17px. */
    font-size: clamp(1.5rem, 1.8vw, 1.6rem);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
  }

  .pp-pillar__body {
    margin: 0.75rem 0 0;
    font-size: clamp(1.125rem, 1.3vw, 1.25rem);
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 80%, transparent);
  }

  /* ─── Responsive: collapse to single column on small screens ─── */
  @media (max-width: 768px) {
    .proof-pillars__grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    .pp-pillar__media { max-width: 22rem; margin: 0 auto; }
    .proof-pillars__heading { margin-bottom: 1.75rem; }
  }
/* END_SECTION:proof-pillars */

/* START_SECTION:quiz (INDEX:111) */
/* Quiz - full-screen weight-management quiz.

     Colour system (4 solid colours, no gradients):
       --qz-bg         section background
       --qz-fg         primary text + icons
       --qz-accent-bg  active/CTA fill (default: black)
       --qz-accent-fg  text on accent (default: white)

     Derived (color-mix) so the look stays cohesive regardless of
     what palette the merchant picks:
       --qz-muted    secondary text
       --qz-soft     selected-state surface tint
       --qz-border   1px outline colour
       --qz-surface  card / chip backgrounds */
  .quiz {
    --qz-muted:   color-mix(in srgb, var(--qz-fg) 60%, transparent);
    --qz-soft:    color-mix(in srgb, var(--qz-fg) 10%, var(--qz-bg));
    --qz-border:  color-mix(in srgb, var(--qz-fg) 18%, var(--qz-bg));
    --qz-surface: color-mix(in srgb, var(--qz-fg) 4%, var(--qz-bg));

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(-1.5rem - var(--header-height, 7rem));
    overflow: hidden;
    isolation: isolate;
    background: var(--qz-bg);
    color: var(--qz-fg);
  }

  /* The intro is a full-bleed split (edge-to-edge media). The question and
     result screens live in .quiz__flow, which re-applies the centered,
     header-offset padding the section used to carry itself. Only one of
     the two (intro vs flow) is ever shown, so they never stack. */
  .quiz__flow {
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--qz-pt, 80px) + 1.5rem + var(--header-height, 7rem)) var(--page-margin, 1.25rem) var(--qz-pb, 80px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quiz.is-intro .quiz__flow { display: none; }

  .quiz__intro[hidden],
  .quiz__question[hidden],
  .quiz__result[hidden] { display: none; }
  .quiz__icons { display: none; }

  /* Old gradient/glow background nodes are still in markup but
     collapsed - section background is the solid --qz-bg only. */
  .quiz__bg-tint,
  .quiz__ambient { display: none; }

  .quiz__shell {
    position: relative; width: 100%; max-width: var(--qz-base-max, 720px);
    transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Result screen is always given the wide canvas regardless of the
     merchant's intro width (two-column report + product card need room). */
  .quiz__shell.is-wide { max-width: max(var(--qz-base-max, 720px), 1140px); }

  /* ───────── Intro — full-bleed split ───────── */
  .quiz__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100svh;
    animation: qz-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* Media side: left (default) or right — `order` flips the two cells. */
  .quiz__intro--media-right .quiz__intro-media   { order: 2; }
  .quiz__intro--media-right .quiz__intro-content { order: 1; }

  .quiz__intro-media {
    position: relative;
    overflow: hidden;
    background: var(--qz-soft);
    line-height: 0;
  }
  .quiz__intro-video,
  .quiz__intro-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quiz__intro-img--placeholder { background: var(--qz-soft); }

  .quiz__intro-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
  }
  .quiz__intro-box {
    width: 100%;
    max-width: 624px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .quiz__intro-title {
    font-size: clamp(2.5rem, 4.5vw, 4.25rem);
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 3rem;
    color: var(--qz-fg); text-wrap: balance;
  }
  .quiz__intro-title em {
    font-style: italic;
    color: var(--qz-muted);
  }
  .quiz__intro-desc {
    font-size: var(--section-subtext-size, clamp(1.0625rem, 1.3vw, 1.1875rem)); line-height: 1.6;
    color: var(--qz-muted);
    margin: 0 0 1.75rem; text-wrap: balance;
  }
  .quiz__intro-desc :is(p, span) { margin: 0 0 0.75rem; }
  .quiz__intro-desc :is(p, span):last-child { margin-bottom: 0; }

  .quiz__intro-disclaimer {
    margin-top: 3.25rem;
    max-width: 100%;
    font-size: 0.8125rem; line-height: 1.5;
    color: var(--qz-muted);
  }
  .quiz__intro-disclaimer p { margin: 0; }
  .quiz__intro-disclaimer a { color: inherit; text-decoration: underline; }

  @media (max-width: 767px) {
    .quiz__intro { grid-template-columns: 1fr; min-height: auto; }
    /* When stacked, the media always sits on top regardless of side setting. */
    .quiz__intro-media,
    .quiz__intro--media-right .quiz__intro-media { order: 0; height: 42vh; min-height: 260px; }
    .quiz__intro-content,
    .quiz__intro--media-right .quiz__intro-content { order: 1; padding: 2.5rem 1.5rem 3rem; }
  }

  .quiz__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px 14px 32px; border-radius: var(--style-border-radius-inputs, 4px); border: 0;
    background: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .quiz__cta:hover { opacity: 0.88; transform: translateY(-1px); }
  .quiz__cta-icon { display: inline-flex; transition: transform 0.3s ease; }
  .quiz__cta-icon svg { width: 18px; height: 18px; }
  .quiz__cta:hover .quiz__cta-icon { transform: translateX(3px); }

  /* Question */
  .quiz__question {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    min-height: calc(100vh - 14rem);
    animation: qz-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .quiz__strip {
    display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; width: 100%;
  }
  .quiz__step {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--qz-bg);
    border: 1px solid var(--qz-border);
    color: var(--qz-muted);
    font-size: 13px; font-weight: 600; flex-shrink: 0;
    transition: transform 0.35s, background 0.35s, color 0.35s, border-color 0.35s;
  }
  .quiz__step.is-done {
    background: var(--qz-soft);
    border-color: var(--qz-fg);
    color: var(--qz-fg);
  }
  .quiz__step.is-current {
    background: var(--qz-accent-bg);
    border-color: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
    transform: scale(1.12);
  }
  .quiz__connector {
    position: relative; flex: 1 1 auto; height: 2px; min-width: 12px; max-width: 38px;
    background: var(--qz-border); border-radius: 999px; overflow: hidden;
  }
  .quiz__connector::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: var(--qz-accent-bg);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .quiz__connector.is-done::after { transform: scaleX(1); }

  .quiz__card {
    position: relative; padding: 2rem 1.75rem; border-radius: 24px;
    background: var(--qz-surface);
    border: 1px solid var(--qz-border);
    animation: qz-card-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes qz-card-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes qz-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes qz-option-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes qz-plan-enter { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

  .quiz__q-title {
    font-size: clamp(1.5rem, 3.4vw, 2.125rem); font-weight: 600;
    letter-spacing: -0.018em; line-height: 1.18;
    color: var(--qz-fg); margin: 0 0 0.5rem; text-wrap: balance;
  }
  .quiz__q-sub {
    font-size: 0.95rem; line-height: 1.5;
    color: var(--qz-muted);
    margin: 0 0 2rem; max-width: 540px;
  }
  .quiz__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; margin-bottom: 2rem;
  }
  @media (min-width: 560px) { .quiz__grid { gap: 14px; } }
  /* Small phones: two columns leave ~150px per option card — stack them. */
  @media (max-width: 419px) { .quiz__grid { grid-template-columns: 1fr; } }

  .quiz__option {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; min-height: 86px; text-align: left;
    cursor: pointer; border-radius: 18px;
    border: 1px solid var(--qz-border);
    background: var(--qz-bg);
    color: var(--qz-fg); font: inherit;
    transition: transform 0.25s, border-color 0.25s, background 0.25s;
    animation: qz-option-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .quiz__option:hover { border-color: var(--qz-fg); background: var(--qz-surface); }
  .quiz__option:active { transform: scale(0.98); transition-duration: 0.1s; }
  .quiz__option.is-on {
    border-color: var(--qz-accent-bg);
    background: var(--qz-soft);
  }
  .quiz__option-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--qz-surface);
    color: var(--qz-fg);
    border: 1px solid var(--qz-border);
    transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .quiz__option-icon svg { width: 22px; height: 22px; }
  .quiz__option.is-on .quiz__option-icon {
    background: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
    border-color: var(--qz-accent-bg);
  }
  .quiz__option-label { flex: 1; font-size: 0.95rem; font-weight: 500; line-height: 1.3; }
  .quiz__option.is-on .quiz__option-label { font-weight: 600; }
  .quiz__option-check {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid var(--qz-border); background: transparent;
    color: transparent;
    transition: all 0.25s;
  }
  .quiz__option-check svg { width: 12px; height: 12px; stroke-width: 3; }
  .quiz__option.is-on .quiz__option-check {
    background: var(--qz-accent-bg);
    border-color: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
  }

  .quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .quiz__back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 18px; border-radius: 999px;
    border: 1px solid var(--qz-border);
    background: var(--qz-bg);
    color: var(--qz-muted);
    font-size: 0.875rem; font-weight: 500; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .quiz__back:hover:not(:disabled) { background: var(--qz-surface); border-color: var(--qz-fg); color: var(--qz-fg); }
  .quiz__back:disabled { opacity: 0; pointer-events: none; }
  .quiz__next {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px 12px 26px; border-radius: 999px; border: 0;
    background: var(--qz-soft);
    color: var(--qz-muted);
    font-size: 0.9375rem; font-weight: 600;
    cursor: not-allowed; opacity: 0.6;
    transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  }
  .quiz__next:not(:disabled) {
    background: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
    opacity: 1; cursor: pointer;
  }
  .quiz__next:not(:disabled):hover { transform: translateY(-1px); opacity: 0.9; }
  .quiz__nav-icon { display: inline-flex; }
  .quiz__nav-icon svg { width: 16px; height: 16px; }

  /* Result */
  .quiz__result {
    position: relative; padding: 1.5rem 2rem; border-radius: 28px;
    background: var(--qz-surface);
    border: 1px solid var(--qz-border);
    display: flex; flex-direction: column; gap: 1.25rem;
    animation: qz-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .quiz__r-header { text-align: center; margin-bottom: 0.5rem; }
  .quiz__r-title {
    font-style: italic; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 600;
    color: var(--qz-fg); margin: 0 0 0.25rem; line-height: 1.1;
  }
  .quiz__r-sub { font-size: 1.05rem; color: var(--qz-muted); margin: 0; }
  .quiz__r-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .quiz__r-left, .quiz__r-right { display: flex; flex-direction: column; gap: 14px; }

  .quiz__r-hero {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.25rem; border-radius: 22px;
    background: var(--qz-accent-bg); color: var(--qz-accent-fg); overflow: hidden;
  }
  .quiz__r-hero-inner { flex: 1; min-width: 0; }
  .quiz__r-eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--qz-accent-fg) 65%, transparent);
    margin: 0 0 8px;
  }
  .quiz__r-profile {
    font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 6px; text-wrap: balance;
  }
  .quiz__r-tag {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--qz-accent-fg) 80%, transparent);
    margin: 0;
  }
  .quiz__dial { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
  .quiz__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .quiz__dial-track {
    stroke: color-mix(in srgb, var(--qz-accent-fg) 18%, transparent);
    stroke-width: 8;
  }
  .quiz__dial-fill { stroke: var(--qz-accent-fg); stroke-width: 8; stroke-linecap: round; }
  .quiz__dial-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  }
  .quiz__dial-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--qz-accent-fg); }
  .quiz__dial-of {
    font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--qz-accent-fg) 55%, transparent);
    margin-top: 2px;
  }

  .quiz__stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .quiz__stat {
    padding: 0.875rem 1rem; border-radius: 16px;
    border: 1px solid var(--qz-border);
    background: var(--qz-bg);
    display: grid; gap: 4px;
  }
  .quiz__stat-icon { width: 18px; height: 18px; color: var(--qz-fg); margin-bottom: 6px; }
  .quiz__stat-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--qz-muted);
  }
  .quiz__stat-value { font-size: 1rem; font-weight: 600; color: var(--qz-fg); line-height: 1.25; }

  .quiz__tag-block {
    padding: 1rem; border-radius: 16px;
    background: var(--qz-bg);
    border: 1px solid var(--qz-border);
  }
  .quiz__tag-block-title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--qz-muted);
    margin: 0 0 12px;
  }
  .quiz__tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .quiz__tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px; border-radius: 999px;
    font-size: 13px; font-weight: 500; line-height: 1;
    border: 1px solid var(--qz-border);
    background: var(--qz-surface);
    color: var(--qz-fg);
  }
  .quiz__tag svg { width: 13px; height: 13px; }
  .quiz__tag--on {
    background: var(--qz-soft);
    border-color: var(--qz-fg);
  }
  .quiz__tag--on svg { color: var(--qz-fg); }
  .quiz__tag--warn {
    background: var(--qz-surface);
    border-color: var(--qz-fg);
    color: var(--qz-fg);
  }
  .quiz__tag--warn svg { color: var(--qz-fg); }

  .quiz__plan {
    padding: 1.25rem; border-radius: 16px;
    background: var(--qz-bg);
    border: 1px solid var(--qz-border);
  }
  .quiz__plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .quiz__plan-item {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 0.9rem; line-height: 1.5;
    color: var(--qz-fg);
    animation: qz-plan-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .quiz__plan-item p { margin: 0; flex: 1; padding-top: 1px; }
  .quiz__plan-num {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; padding: 3px 7px; border-radius: 6px;
    background: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  }

  .quiz__r-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
  .quiz__r-ctas .quiz__cta { justify-content: center; width: 100%; }
  .quiz__cta-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--qz-border);
    background: transparent; color: var(--qz-muted);
    font-size: 0.9375rem; font-weight: 500; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .quiz__cta-ghost:hover { background: var(--qz-surface); border-color: var(--qz-fg); color: var(--qz-fg); }

  /* Product card */
  .quiz__product {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0; border-radius: 24px; overflow: hidden;
    background: var(--qz-bg);
    border: 1px solid var(--qz-border);
    animation: qz-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }
  .quiz__product-media {
    position: relative; min-height: 320px;
    background: var(--qz-surface);
    overflow: hidden;
  }
  .quiz__product-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 1.5rem;
  }
  .quiz__product-badge {
    position: absolute; top: 1rem; left: 1rem;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px; border-radius: 999px;
    background: var(--qz-bg);
    border: 1px solid var(--qz-border);
    color: var(--qz-fg);
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .quiz__product-badge svg { width: 13px; height: 13px; }
  .quiz__product-body { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem 1.75rem 1.5rem; }
  .quiz__product-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--qz-muted);
    margin: 0;
  }
  .quiz__product-title {
    font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1; color: var(--qz-fg); margin: 0;
  }
  .quiz__product-sub {
    font-size: 0.95rem; line-height: 1.55;
    color: var(--qz-muted);
    margin: 0; max-width: 480px;
  }
  .quiz__product-features { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 8px; }
  .quiz__product-feature {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.875rem; font-weight: 500;
    color: var(--qz-fg);
  }
  .quiz__product-feature-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--qz-surface);
    border: 1px solid var(--qz-border);
    color: var(--qz-fg);
  }
  .quiz__product-feature-icon svg { width: 15px; height: 15px; }
  .quiz__product-footer {
    margin-top: auto; padding-top: 1rem;
    border-top: 1px solid var(--qz-border);
    display: flex; flex-direction: column; gap: 1rem;
  }
  .quiz__product-prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .quiz__product-price { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--qz-fg); line-height: 1; }
  .quiz__product-compare { font-size: 0.95rem; font-weight: 500; color: var(--qz-muted); text-decoration: line-through; }
  .quiz__product-save {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    background: var(--qz-soft);
    border: 1px solid var(--qz-fg);
    color: var(--qz-fg); font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .quiz__product-buy {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; padding: 13px 26px; border-radius: 999px; border: 0;
    background: var(--qz-accent-bg);
    color: var(--qz-accent-fg);
    font-size: 0.9375rem; font-weight: 600; cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
  }
  .quiz__product-buy:hover { opacity: 0.88; transform: translateY(-2px); }
  .quiz__product-buy.is-added { background: var(--qz-soft); color: var(--qz-fg); }
  .quiz__product-buy svg { width: 17px; height: 17px; }

  /* Responsive */
  @media (max-width: 850px) {
    .quiz__r-grid { grid-template-columns: 1fr; }
    .quiz__product { grid-template-columns: 1fr; }
    .quiz__product-media { min-height: 240px; aspect-ratio: 4 / 3; }
  }
  @media (max-width: 600px) {
    .quiz { padding: 5rem 1rem 4rem; }
    .quiz__result { padding: 1.5rem 1.25rem; border-radius: 20px; gap: 1.5rem; }
    .quiz__card { padding: 1.5rem 1.25rem; border-radius: 20px; }
    .quiz__step { width: 32px; height: 32px; font-size: 12px; }
    .quiz__connector { min-width: 8px; max-width: 26px; }
  }
  @media (max-width: 380px) {
    .quiz__step { width: 28px; height: 28px; font-size: 11px; }
    .quiz__connector { min-width: 6px; max-width: 18px; }
    .quiz__r-hero { flex-direction: column; align-items: flex-start; text-align: left; padding: 1.5rem; }
    .quiz__dial { width: 100px; height: 100px; align-self: center; }
    .quiz__stat-row { grid-template-columns: 1fr; }
  }
/* END_SECTION:quiz */

/* START_SECTION:references-magicmind (INDEX:113) */
.show-more-content {
    position: relative;
    padding-top: var(--sec-pt, 60px);
    padding-bottom: var(--sec-pb, 60px);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    background: var(--mm-bg, transparent);
    color: var(--mm-fg, #1c1b1b);
    font-family: var(--section-subtext-family, Circular, Roboto, -apple-system, sans-serif);
  }

  .show-more-content__container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 var(--page-margin, 24px);
  }

  .show-more-content__title {
    font-family: var(--section-heading-family, var(--heading-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-heading-size, clamp(32px, 4vw, 42px));
    text-transform: var(--section-heading-transform, inherit);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mm-fg, #000000);
    margin: 0 0 28px;
    letter-spacing: -0.02em;
  }

  /* Citation Copy Typography */
  .show-more-content__text {
    font-family: var(--section-subtext-family, var(--text-font-family, Circular, Roboto, sans-serif));
    font-size: var(--section-subtext-size, 14.5px);
    line-height: 1.55;
    color: var(--mm-fg, #1c1b1b);
  }
  .show-more-content__text p {
    margin: 0 0 18px;
  }
  .show-more-content__text strong {
    font-weight: 700;
    color: #000000;
  }

  /* Collapsible Accordion Content */
  .show-more-content__see-more .accordion__content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  }
  .show-more-content__see-more.open .accordion__content {
    max-height: 25000px;
    opacity: 1;
    margin-top: 18px;
  }

  /* See More / Collapse Toggle Button */
  .show-more-content__see-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 12px 0 0 0;
    font-family: var(--section-subtext-family, Circular, Roboto, sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    user-select: none;
    outline: none;
    margin-top: 8px;
  }
  .show-more-content__see-more-btn:hover {
    opacity: 0.8;
  }
  .show-more-content__icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .show-more-content__see-more.open .show-more-content__icon {
    transform: rotate(180deg);
  }

  /* Disclaimer / Bottom Info */
  .show-more-content__bottom-info {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #6a6a6a;
    line-height: 1.45;
  }
  .show-more-content__bottom-info p {
    margin: 0;
  }
/* END_SECTION:references-magicmind */

/* START_SECTION:results-showcase (INDEX:123) */
.results-showcase {
    background: var(--rs-bg, transparent);
    color: var(--rs-fg, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    padding: 40px var(--page-margin, 24px);
  }
  @media (min-width: 1024px) {
    .results-showcase { padding: var(--rs-pt, 80px) var(--page-margin, 24px) var(--rs-pb, 80px); }
  }

  .results-showcase__inner { max-width: 1600px; margin: 0 auto; }

  /* ─── Head ─── */
  .results-showcase__head { text-align: center; margin-bottom: var(--rs-head-gap, 48px); }

  .results-showcase__title {
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--section-heading-size, clamp(1.9rem, 1.1rem + 2.6vw, 3rem));
    line-height: var(--section-heading-line-height, 1.15);
    letter-spacing: var(--section-heading-tracking, -0.005em);
    text-transform: var(--section-heading-transform, none);
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }
  /* Any <em> in the heading becomes the italic second line (as in the source). */
  .results-showcase__title em,
  .results-showcase__title i { display: block; font-style: italic; }

  /* Counter + arrows — shown only when the cards become a carousel (mobile). */
  .results-showcase__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .results-showcase__count {
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, currentColor 70%, transparent);
    min-width: 3rem;
  }
  .results-showcase__arrow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .results-showcase__arrow:hover { background: var(--rs-accent, #0047AB); color: #fff; border-color: var(--rs-accent, #0047AB); }
  .results-showcase__arrow svg { width: 1.1rem; height: 1.1rem; display: block; }
  .results-showcase__arrow:focus-visible { outline: 2px solid var(--rs-accent, #0047AB); outline-offset: 2px; }

  /* ─── Cards: grid on desktop, snap carousel on mobile/tablet ─── */
  .results-showcase__track {
    display: grid;
    grid-template-columns: repeat(var(--rs-cols, 3), minmax(0, 1fr));
    gap: var(--rs-gap, 24px);
    align-items: stretch;
  }
  .results-showcase__track > * { min-width: 0; }

  @media (max-width: 1023px) {
    .results-showcase__nav { display: flex; }
    .results-showcase__track {
      display: flex;
      grid-template-columns: none;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 0.5rem;
    }
    .results-showcase__track::-webkit-scrollbar { display: none; }
    .results-showcase__track > * {
      flex: 0 0 82%;
      scroll-snap-align: center;
    }
  }
  @media (max-width: 600px) {
    .results-showcase__track > * { flex-basis: 88%; }
  }

  .results-showcase__empty {
    text-align: center;
    padding: 2rem;
    border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 8px;
    color: color-mix(in srgb, currentColor 65%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .results-showcase__track { scroll-behavior: auto; }
  }

  /* ─── Adapt to Image Fix ─── */
  /* Reverts absolute positioning to relative so images can force the container height open naturally */
  .results-showcase--ratio-auto .results-showcase__track img {
    position: relative !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  .results-showcase--ratio-auto .results-showcase__track [class*="wrapper"],
  .results-showcase--ratio-auto .results-showcase__track [class*="media"] {
    position: relative !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }
/* END_SECTION:results-showcase */

/* START_SECTION:root-causes-plain (INDEX:124) */
.rcp {
    padding: var(--rcp-pt, 48px) var(--page-margin, 1.5rem) var(--rcp-pb, 48px);
    margin: var(--rcp-mt, 0) 0 var(--rcp-mb, 0);
    background: var(--rcp-section-bg, transparent);
    color: var(--rcp-text, var(--color-foreground));
  }
  .rcp__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* Audience targeting — a section bound to one or more audience handles
     is hidden until the active audience matches (toggled by the script
     below + on `audience:change`). Untargeted sections show for all. */
  .rcp[data-audience-target] { display: none; }
  .rcp[data-audience-target].is-audience-match { display: block; }

  /* ─── Eyebrow tag ─── */
  .rcp__eyebrow {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: 0.4em 0.8em;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 2px;
    background: var(--rcp-eyebrow-bg, color-mix(in srgb, var(--color-foreground) 8%, transparent));
    color: var(--rcp-eyebrow-color, var(--color-foreground));
  }

  /* ─── Two-column intro (heading | paragraph) ─── */
  .rcp__intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1.75rem;
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  }
  @media (min-width: 900px) {
    .rcp__intro {
      grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
      gap: 4rem;
      align-items: start;
    }
  }

  .rcp__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--text-heading, 48px));
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
    color: inherit;
  }
  .rcp__title em,
  .rcp__title i { font-style: italic; }

  .rcp__body {
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--section-subtext-size, var(--text-subheading, 22px));
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 80%, transparent);
    align-self: center;
  }
  .rcp__body :is(p) { margin: 0 0 0.75rem; font-size: inherit; }
  .rcp__body :is(p):last-child { margin-bottom: 0; }

  /* ─── Image rectangle ─── */
  .rcp__media {
    width: 100%;
    aspect-ratio: var(--rcp-ratio, 16 / 9);
    max-height: var(--rcp-max-h, 360px);
    overflow: hidden;
    border-radius: var(--rcp-radius, 8px);
    background: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background, #fff));
    line-height: 0;
  }
  .rcp__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .rcp__img--placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.35;
  }
/* END_SECTION:root-causes-plain */

/* START_SECTION:root-causes (INDEX:125) */
.root-causes {
    padding: var(--rc-pt, 48px) var(--page-margin, 1.5rem) var(--rc-pb, 48px);
    background: var(--sec-bg, var(--color-background));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    overflow: hidden;
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .root-causes__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* Head */
  .root-causes__head {
    text-align: center;
    max-width: 60rem;
    margin: 0 auto 2.5rem;
  }
  .root-causes__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: var(--text-heading);
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--color-foreground);
  }
  .root-causes__intro {
    color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
    font-size: var(--text-subheading);
    line-height: 1.45;
  }
  .root-causes__intro :is(p, span) { margin: 0; font-size: inherit; }

  /* Body two-column — 40/60 split. Both columns stretch to the same
     height so the accordion's bottom edge aligns exactly with the
     panel's bottom edge, with no extra strip on either side. */
  .root-causes__body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }

  /* Accordion — Flexbox columns. Closed rows stay at natural height (flex: 0 0 auto),
     while the open row expands to fill the remaining height (flex: 1 0 auto).
     There is no trailing empty strip because the open row always grows to fill
     the accordion's full height. */
  .root-causes__accordion {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 40%, var(--color-background));
    border-right: 0;
    overflow: hidden;
  }
  .root-causes__accordion > * {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* No flex-grow transition — rows open/close instantly (direct),
       not with a smooth height/line shift. */
  }
  .root-causes__accordion > *.is-open {
    flex: 1 0 auto;
  }
  /* During JS height measurement we toggle is-open on every row to read
     its expanded height; kill transitions so each read is the settled
     value, not a frame captured mid-animation. */
  .root-causes__accordion.is-measuring,
  .root-causes__accordion.is-measuring * {
    transition: none !important;
  }
  /* Single 1px divider between rows. Targets the wrapper Shopify
     injects around each rendered block (or the row itself if no
     wrapper) — `> * + *` skips the first child either way. */
  .root-causes__accordion > * + * {
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 40%, var(--color-background));
  }
  .root-causes__row {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    background: var(--color-background);
    transition: background 220ms ease;
    overflow: hidden;
  }
  .root-causes__row.is-audience-hidden,
  .root-causes__accordion > .is-audience-hidden {
    display: none !important;
  }
  /* Active row distinguished by background only — borders stay
     identical so the dividers between rows read consistently. */
  .root-causes__row.is-open {
    background: color-mix(in srgb, var(--rc-panel-bg) 8%, var(--color-background));
  }

  .root-causes__row-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rc-row-py, 30px) 1.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-foreground);
    cursor: pointer;
    text-align: left;
  }
  .root-causes__row-toggle svg {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    transition: opacity 150ms ease;
  }
  .root-causes__row.is-open .root-causes__row-toggle svg { opacity: 0; }
  /* When open, pull the title close to its description. The collapsed
     vertical padding (--rc-row-py) is generous so rows read tall, but
     inside an open card that much space between title and body looks
     loose — so cut the toggle's bottom padding once expanded. */
  .root-causes__row.is-open .root-causes__row-toggle { padding-bottom: 0.85rem; }

  .root-causes__row-body {
    display: grid;
    grid-template-rows: 0fr;
    /* No reveal transition — the body shows/hides instantly. */
  }
  .root-causes__row.is-open .root-causes__row-body { grid-template-rows: 1fr; }
  .root-causes__row-body > div {
    overflow: hidden;
    padding: 0 1.5rem;
  }
  .root-causes__row.is-open .root-causes__row-body > div { padding-bottom: var(--rc-row-py, 30px); }
  .root-causes__row-body p {
    margin: 0;
    color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* Panel — label / curves / caption distributed top-to-bottom with
     `justify-content: space-between`. Min-height keeps it from
     collapsing if a template only has a couple of root-cause blocks;
     usually the panel is shorter than the accordion (because we set
     the accordion's min-height to N × row content) and the grid
     stretches the panel to match. Border opacity matches the
     accordion so the whole frame reads as one box. */
  .root-causes__panel {
    position: relative;
    background: var(--rc-panel-bg);
    color: var(--rc-panel-fg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-height: 26rem;
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 40%, var(--color-background));
  }

  /* Cause name (above the curves) — formerly an SVG <text> inside the
     overlay; moved out so it gets its own gap above the curves. */
  .root-causes__cause-label {
    margin: 0;
    color: var(--rc-panel-fg);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    transition: opacity 200ms ease;
  }
  .root-causes__cause-label:empty { display: none; }
  .root-causes__cause-label.is-swapping { opacity: 0; }

  /* Caption (below the curves) — picks up its text from the active block
     via JS. Crossfades during transition so the swap doesn't pop. */
  .root-causes__caption {
    margin: 0;
    max-width: 58rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--rc-panel-fg) 88%, transparent);
    transition: opacity 200ms ease;
  }
  .root-causes__caption:empty { display: none; }
  .root-causes__caption.is-swapping { opacity: 0; }

  .root-causes__viewport {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    height: 18rem;
    width: 100%;
  }
  .root-causes__track {
    display: flex;
    align-items: flex-end;
    height: 100%;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .root-causes__slide {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .root-causes__slide svg { height: 100%; width: auto; display: block; }

  /* Markers live in a single overlay SVG centered in the viewport. The
     active slide's apex always lands at viewport center horizontally (the
     track centers it), so the overlay's x=150 lines up automatically. We
     animate the top dot's cy to morph between active peaks. */
  .root-causes__overlay {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 100%;
    width: auto;
    pointer-events: none;
  }

  .rc-markers line {
    stroke: var(--rc-panel-fg);
    stroke-width: 0.75;
    stroke-dasharray: 2 3;
    opacity: 0.55;
  }
  .rc-markers circle {
    fill: var(--rc-marker);
    stroke: none;
  }

  /* Responsive — single column stack on mobile. The accordion drops
     out of equal-distribution mode (rows go back to natural heights)
     since it's no longer competing with the panel for the same
     stretched height. */
  @media (max-width: 900px) {
    .root-causes__body {
      grid-template-columns: 1fr;
    }
    .root-causes__accordion {
      display: block;
      height: auto;
      border-right: 1px solid color-mix(in srgb, var(--color-foreground) 40%, var(--color-background));
    }
    .root-causes__accordion > * {
      flex: none;
    }
    .root-causes__row {
      flex: none;
    }
    .root-causes__panel { min-height: 18rem; padding: 1.25rem; }
    .root-causes__viewport { height: 13rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rc-label,
    .root-causes__row-body { transition: none; }
  }
/* END_SECTION:root-causes */

/* START_SECTION:science-links (INDEX:127) */
.science-links {
    color: var(--color-foreground);
    padding: var(--sl-pt, 80px) var(--page-margin, 1.5rem) var(--sl-pb, 80px);
    background: var(--sec-bg, var(--color-background));
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }
  .science-links__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Heading ─── */
  .science-links__heading {
    margin: 0 0 2rem;
    text-align: var(--sl-align, left);
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: inherit;
    text-wrap: balance;
  }
  .science-links__heading-italic {
    font-style: italic;
    font-weight: 400;
  }

  /* ─── Grid: 1-up on mobile, one column per card (2–3) from 768px ─── */
  .science-links__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .science-links__grid {
      grid-template-columns: repeat(var(--sl-cols, 3), minmax(0, 1fr));
      gap: clamp(1.25rem, 2.5vw, 2rem);
    }
  }

  /* ─── Card ─── */
  .science-link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
  }
  .science-link__media {
    display: block;
    position: relative;
    aspect-ratio: var(--sl-ratio, 1 / 1);
    width: 100%;
    overflow: hidden;
    border-radius: var(--sl-radius, 8px);
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
  .science-link__media img,
  .science-link__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .science-link__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .science-link__label {
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
  }
  .science-link__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    width: 28px;
    height: 28px;
    color: var(--sl-arrow-bg, #ffc942);
    transition: color 200ms ease;
  }
  .science-link__arrow svg { width: 100%; height: 100%; display: block; }
  /* Subtle color shift on the arrow button on hover — no scaling or movement. */
  .science-link:hover .science-link__arrow { color: color-mix(in srgb, var(--sl-arrow-bg, #ffc942) 82%, #000); }

  .science-link:focus-visible {
    outline: 2px solid var(--sl-arrow-bg, #0047AB);
    outline-offset: 4px;
    border-radius: 4px;
  }
/* END_SECTION:science-links */

/* START_SECTION:search (INDEX:129) */
.cv-search {
    padding: var(--sr-pt, 64px) var(--page-margin, 1.5rem) var(--sr-pb, 96px);
    color: var(--color-foreground);
  }
  .cv-search__inner { max-width: 72rem; margin: 0 auto; }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ── Hero ── */
  .cv-search__hero { max-width: 46rem; margin: 0 auto; text-align: center; }
  .cv-search__eyebrow {
    display: inline-block; margin: 0 0 1rem; padding: 0.4em 0.8em;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; line-height: 1; border-radius: 2px;
    background: var(--sr-eyebrow-bg, var(--color-brand, #0047ab));
    color: var(--sr-eyebrow-color, var(--color-brand-contrast, #fff));
  }
  .cv-search__title {
    font-family: var(--font-heading--family, serif); font-weight: 400;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.1;
    letter-spacing: -0.01em; margin: 0; text-wrap: balance;
  }
  .cv-search__lede {
    margin: 0.85rem auto 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.5;
    color: var(--color-muted, color-mix(in srgb, currentColor 65%, transparent));
  }

  /* ── Search field ── */
  .cv-search__form {
    display: flex; gap: 0.6rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    max-width: 40rem;
  }
  .cv-search__field {
    position: relative; flex: 1 1 auto; display: flex; align-items: center;
  }
  .cv-search__field-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem; pointer-events: none;
    color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent));
  }
  .cv-search__field-icon svg { width: 100%; height: 100%; }
  .cv-search__field input {
    width: 100%; min-height: 52px; padding: 0.85rem 2.9rem 0.85rem 2.9rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.14));
    border-radius: var(--style-border-radius-inputs, 4px);
    background: var(--color-background, #fff); color: inherit;
    font: inherit; font-size: 1.05rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .cv-search__field input::-webkit-search-cancel-button { display: none; }
  .cv-search__field input:focus {
    outline: none; border-color: var(--color-brand, #0047ab);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #0047ab) 22%, transparent);
  }
  .cv-search__clear {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent));
    transition: background 150ms ease, color 150ms ease;
  }
  .cv-search__clear:hover { background: color-mix(in srgb, var(--color-foreground) 8%, transparent); color: var(--color-foreground); }
  .cv-search__clear svg { width: 1.05rem; height: 1.05rem; }

  .cv-search__submit {
    flex: 0 0 auto; appearance: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 1.6rem; min-height: 52px;
    border-radius: var(--style-border-radius-inputs, 4px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand, #0047ab) 92%, #fff), var(--color-brand, #0047ab));
    color: var(--color-brand-contrast, #fff);
    font-family: var(--font-subheading--family, sans-serif); font-size: 1rem; font-weight: 600; line-height: 1;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-brand, #0047ab) 60%, transparent);
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .cv-search__submit:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--color-brand, #0047ab) 65%, transparent); }
  .cv-search__submit:active { transform: translateY(0) scale(0.99); }
  .cv-search__submit:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-background, #fff), 0 0 0 4px var(--color-brand, #0047ab); }

  /* ── Popular searches ── */
  .cv-search__pops {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.5rem 0.75rem; margin-top: 1.5rem;
  }
  .cv-search__pops-label {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent));
  }
  .cv-search__pops-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .cv-search__pops-list--center { justify-content: center; margin-top: 1.5rem; }
  .cv-search__chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0.4rem 0.95rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.14)); border-radius: 999px;
    background: var(--color-background, #fff); color: inherit; text-decoration: none;
    font-size: 0.9rem; line-height: 1;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
  }
  .cv-search__chip:hover {
    border-color: var(--color-brand, #0047ab); color: var(--color-brand, #0047ab);
    background: color-mix(in srgb, var(--color-brand, #0047ab) 6%, var(--color-background, #fff));
    transform: translateY(-1px);
  }

  /* ── Toolbar ── */
  .cv-search__toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.12));
  }
  .cv-search__count { margin: 0; font-size: 1rem; color: var(--color-muted, color-mix(in srgb, currentColor 70%, transparent)); }
  .cv-search__count strong { color: var(--color-foreground); font-weight: 600; }
  .cv-search__count-term { color: var(--color-foreground); }
  .cv-search__toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

  .cv-search__tabs {
    display: inline-flex; padding: 4px; gap: 2px;
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
    border-radius: calc(var(--style-border-radius-inputs, 4px) + 4px);
  }
  .cv-search__tab {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0.4rem 0.9rem;
    border-radius: var(--style-border-radius-inputs, 4px);
    font-family: var(--font-subheading--family, sans-serif); font-size: 0.85rem; font-weight: 600;
    color: var(--color-muted, color-mix(in srgb, currentColor 65%, transparent)); text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
  }
  .cv-search__tab:hover { color: var(--color-foreground); }
  .cv-search__tab.is-active {
    background: var(--color-background, #fff); color: var(--color-brand, #0047ab);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  .cv-search__tab:focus-visible { outline: 2px solid var(--color-brand, #0047ab); outline-offset: 2px; }

  /* Sort select — matches input chrome */
  .cv-search__select-wrap { position: relative; display: inline-flex; align-items: center; }
  .cv-search__select-wrap select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    min-height: 44px; padding: 0.55rem 2.4rem 0.55rem 0.9rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.16));
    border-radius: var(--style-border-radius-inputs, 4px);
    background: var(--color-background, #fff); color: inherit;
    font: inherit; font-size: 0.9rem; font-weight: 500;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .cv-search__select-wrap select:focus-visible {
    outline: none; border-color: var(--color-brand, #0047ab);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #0047ab) 22%, transparent);
  }
  .cv-search__select-chevron {
    position: absolute; right: 0.7rem; width: 1.1rem; height: 1.1rem; pointer-events: none;
    color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent));
  }

  /* ── Result grid ── */
  .cv-search__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none;
  }

  /* Shared card chrome */
  .cv-card {
    display: flex; flex-direction: column;
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.10));
    border-radius: var(--style-border-radius-inputs, 4px);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .cv-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-foreground) 18%, transparent);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.30), 0 6px 14px -10px rgba(0,0,0,0.20);
  }

  /* Product card */
  .cv-card--product .cv-card__media {
    position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
    background: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
  }
  .cv-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.22,1,0.36,1); }
  .cv-card:hover .cv-card__img { transform: scale(1.04); }
  .cv-card__placeholder { display: block; width: 100%; height: 100%; }
  .cv-card__placeholder-svg { width: 100%; height: 100%; opacity: 0.35; }
  .cv-card__badge {
    position: absolute; top: 0.7rem; left: 0.7rem; padding: 0.25rem 0.6rem;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-brand-contrast, #fff); background: var(--color-brand, #0047ab); border-radius: 2px;
  }
  .cv-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem 1.15rem; }
  .cv-card__vendor {
    margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent));
  }
  .cv-card__title {
    margin: 0; font-family: var(--font-subheading--family, sans-serif);
    font-size: 1rem; font-weight: 600; line-height: 1.3;
  }
  .cv-card__title a { color: inherit; text-decoration: none; }
  .cv-card__title a::after { content: ''; position: absolute; inset: 0; }
  .cv-card--product .cv-card__body { position: relative; }
  .cv-card__price { margin: 0.15rem 0 0; display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.98rem; }
  .cv-card__price-from { font-size: 0.78rem; color: var(--color-muted, color-mix(in srgb, currentColor 60%, transparent)); }
  .cv-card__price-now { font-weight: 600; font-variant-numeric: tabular-nums; }
  .cv-card__price-now.is-sale { color: var(--color-brand, #0047ab); }
  .cv-card__price-was {
    font-size: 0.85rem; font-variant-numeric: tabular-nums;
    color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent));
  }

  /* Content (article / page) card */
  .cv-card--content { grid-column: span 2; }
  .cv-card__content-link { display: flex; gap: 0; color: inherit; text-decoration: none; height: 100%; }
  .cv-card__content-media { flex: 0 0 40%; max-width: 14rem; overflow: hidden; background: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background)); }
  .cv-card__content-media .cv-card__img { aspect-ratio: 3 / 2; }
  .cv-card__content-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.3rem; flex: 1 1 auto; }
  .cv-card__kicker {
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-brand, #0047ab);
  }
  .cv-card__content-body .cv-card__title { font-family: var(--font-heading--family, serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
  .cv-card__excerpt {
    font-size: 0.92rem; line-height: 1.5;
    color: var(--color-muted, color-mix(in srgb, currentColor 70%, transparent));
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cv-card__readmore {
    margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--color-brand, #0047ab);
  }
  .cv-card__readmore svg { width: 1.05rem; height: 1.05rem; transition: transform 200ms ease; }
  .cv-card--content:hover .cv-card__readmore svg { transform: translateX(3px); }

  /* ── Empty state ── */
  .cv-search__empty {
    max-width: 36rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  }
  .cv-search__empty-icon {
    width: 4.5rem; height: 4.5rem; display: grid; place-items: center; margin-bottom: 0.5rem;
    border-radius: 50%;
    color: var(--color-brand, #0047ab);
    background: color-mix(in srgb, var(--color-brand, #0047ab) 8%, transparent);
  }
  .cv-search__empty-icon svg { width: 2.1rem; height: 2.1rem; }
  .cv-search__empty-title { margin: 0; font-family: var(--font-heading--family, serif); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }
  .cv-search__empty-body { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--color-muted, color-mix(in srgb, currentColor 70%, transparent)); }

  /* ── Pagination ── */
  .cv-search__pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }
  .cv-search__page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 0.6rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12)); border-radius: var(--style-border-radius-inputs, 4px);
    color: inherit; text-decoration: none; font-size: 0.95rem; font-variant-numeric: tabular-nums;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  }
  a.cv-search__page:hover { border-color: var(--color-brand, #0047ab); color: var(--color-brand, #0047ab); }
  .cv-search__page.is-current { background: var(--color-brand, #0047ab); border-color: var(--color-brand, #0047ab); color: var(--color-brand-contrast, #fff); font-weight: 600; }
  .cv-search__page--gap { border: 0; min-width: 1.5rem; color: var(--color-muted, color-mix(in srgb, currentColor 55%, transparent)); }
  .cv-search__page--arrow svg { width: 1.15rem; height: 1.15rem; }

  /* ── Responsive ── */
  @media (max-width: 640px) {
    .cv-search__form { flex-wrap: wrap; }
    .cv-search__submit { width: 100%; }
    .cv-search__toolbar { align-items: flex-start; }
    .cv-search__toolbar-controls { width: 100%; justify-content: space-between; }
    .cv-search__tabs { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .cv-search__tabs::-webkit-scrollbar { display: none; }
    .cv-card--content { grid-column: 1 / -1; }
    .cv-card__content-link { flex-direction: column; }
    .cv-card__content-media { flex-basis: auto; max-width: none; }
    .cv-card__content-media .cv-card__img { aspect-ratio: 16 / 9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cv-card, .cv-card__img, .cv-search__chip, .cv-search__submit, .cv-card__readmore svg { transition: none; }
    .cv-card:hover { transform: none; }
    .cv-card:hover .cv-card__img { transform: none; }
  }
/* END_SECTION:search */

/* START_SECTION:standards (INDEX:130) */
.standards {
    padding: var(--std-pt, 80px) var(--page-margin, 1.5rem) var(--std-pb, 80px);
    margin: var(--std-mt, 0) 0 var(--std-mb, 0);
    background: var(--std-section-bg, #f5f8f8);
    color: var(--std-text, var(--color-foreground));
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
  }
  .standards[data-audience-target] { display: none; }
  .standards[data-audience-target].is-audience-match { display: block; }

  .standards__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Eyebrow tag (shares the badge colour pattern with the bullets) ─── */
  .standards__eyebrow {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: 0.4em 0.8em;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 2px;
    background: var(--std-badge-bg, #0047ab);
    color: var(--std-badge-text, #fff);
  }

  /* ─── Two-column intro (heading | paragraph) ─── */
  .standards__intro-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1.75rem;
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--std-divider, color-mix(in srgb, currentColor 20%, transparent));
  }
  @media (min-width: 900px) {
    .standards__intro-row {
      grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
      gap: 4rem;
      align-items: start;
    }
  }
  .standards__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--text-heading, 48px));
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
    color: inherit;
  }
  .standards__title em, .standards__title i { font-style: italic; }
  .standards__lead {
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--text-subheading, 22px);
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 80%, transparent);
    align-self: center;
  }
  .standards__lead :is(p) { margin: 0 0 0.75rem; font-size: inherit; }
  .standards__lead :is(p):last-child { margin-bottom: 0; }

  /* ─── Body: image | list+CTA ─── */
  .standards__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  @media (min-width: 900px) {
    .standards__body {
      grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
      gap: 4rem;
      align-items: stretch;
    }
  }

  .standards__media {
    overflow: hidden;
    border-radius: var(--std-img-radius, 12px);
    background: color-mix(in srgb, currentColor 6%, transparent);
    line-height: 0;
    aspect-ratio: 4 / 5;
  }
  @media (min-width: 900px) {
    /* Image fills its column and matches the height of the list + button
       beside it — no fixed ratio; the photo is cropped via object-fit. */
    .standards__media { aspect-ratio: auto; height: 100%; }
  }
  .standards__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .standards__img--placeholder { object-fit: contain; opacity: 0.35; }

  .standards__content {
    display: flex;
    flex-direction: column;
  }

  /* List — numbers come from a CSS counter so they stay sequential
     regardless of how many items are added / removed / hidden. */
  .standards__list {
    counter-reset: standards-counter;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--std-divider, color-mix(in srgb, currentColor 20%, transparent));
  }
  .standards__item {
    counter-increment: standards-counter;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  /* Divider between items only (none above the first) — covers both the
     no-wrapper case and any wrapper Shopify may inject around blocks. */
  .standards__item + .standards__item,
  .standards__list > * + * .standards__item {
    border-top: 1px solid var(--std-divider, color-mix(in srgb, currentColor 20%, transparent));
  }
  /* Per-item audience filtering. */
  .standards__item[data-audience-target] { display: none; }
  .standards__item[data-audience-target].is-audience-match { display: flex; }

  .standards__index {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 4px;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    background: var(--std-badge-bg, #0047ab);
    color: var(--std-badge-text, #fff);
  }
  .standards__index::before { content: counter(standards-counter); }

  .standards__text {
    margin: 0;
    font-family: var(--font-primary--family, sans-serif);
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--std-text, var(--color-foreground));
  }

  /* ─── CTA button ─── */
  .standards__cta-wrap { margin-top: 2rem; }
  .standards__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    border-radius: 4px;
    background: var(--std-btn-bg, #1a1c23);
    color: var(--std-btn-text, #fff);
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 150ms ease;
  }
  .standards__cta:hover { opacity: 0.88; }
  .standards__cta svg { width: 1rem; height: 1rem; }
/* END_SECTION:standards */

/* START_SECTION:statement-hero (INDEX:131) */
.statement-hero {
    padding: var(--sh-pt, 0) 0 var(--sh-pb, 80px);
    margin: var(--sh-mt, 0) 0 var(--sh-mb, 0);
    background: var(--sh-section-bg, transparent);
    color: var(--sh-text, inherit);
  }
  /* Pull the image up behind the floating sticky header so it reaches the
     very top of the viewport. The header sits at top:1rem with a 1rem
     margin (desktop), so we offset that 1rem PLUS the header height the
     header script publishes — matching the hero / hero-video sections.
     Pulling by the full header height also keeps the top flush when the
     header's audience bar collapses/expands on scroll (it can only ever
     over-pull, never leave a gap). The 7rem fallback avoids a flash before
     the header script publishes --header-height. */
  .statement-hero--overlap {
    margin-top: calc(-1.5rem - var(--header-height, 7rem));
  }

  /* ─── Hero media ─── */
  .statement-hero__media {
    width: 100%;
    line-height: 0;
  }
  .statement-hero__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }
  @media (min-width: 768px)  { .statement-hero__img { aspect-ratio: 1.54 / 1; } }
  @media (min-width: 1024px) { .statement-hero__img { aspect-ratio: 2 / 1; } }
  .statement-hero__img--placeholder { background: #ecf1f5; }

  /* ─── Overlapping card ─── */
  .statement-hero__card-wrap {
    max-width: 1600px;
    margin: -48px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
  }
  @media (min-width: 768px)  { .statement-hero__card-wrap { margin-top: -40px; padding: 0 32px; } }
  @media (min-width: 1024px) { .statement-hero__card-wrap { margin-top: -96px; padding: 0 48px; } }
  @media (min-width: 1280px) { .statement-hero__card-wrap { padding: 0 112px; } }

  .statement-hero__card {
    padding: 40px 24px;
    border: 1px solid var(--sh-border, rgba(0, 0, 0, 0.2));
    border-radius: 6px;
    background: var(--sh-card-bg, #ffffff);
  }
  @media (min-width: 768px)  { .statement-hero__card { padding: 40px 32px; } }
  @media (min-width: 1024px) { .statement-hero__card { padding: 80px 80px; } }
  @media (min-width: 1280px) { .statement-hero__card { padding: 80px 112px; } }

  .statement-hero__title-wrap {
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--sh-border, rgba(0, 0, 0, 0.2));
  }
  @media (min-width: 768px)  { .statement-hero__title-wrap { padding-bottom: 40px; margin-bottom: 40px; } }
  @media (min-width: 1024px) { .statement-hero__title-wrap { padding-bottom: 64px; margin-bottom: 64px; } }

  .statement-hero__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    margin: 0 auto;
    max-width: 930px;
    text-wrap: balance;
    color: var(--sh-text);
  }
  .statement-hero__title em,
  .statement-hero__title i { font-style: italic; }

  .statement-hero__body {
    font-size: var(--section-subtext-size, 1rem);
    line-height: 1.45;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
    color: var(--sh-text);
  }
  .statement-hero__body p { margin: 0 0 0.75rem; }
  .statement-hero__body p:last-child { margin-bottom: 0; }
  @media (min-width: 768px)  { .statement-hero__body { font-size: 1.125rem; letter-spacing: -0.18px; } }
  @media (min-width: 1024px) { .statement-hero__body { font-size: 1.375rem; letter-spacing: -0.22px; } }
/* END_SECTION:statement-hero */

/* START_SECTION:stats (INDEX:132) */
.stats {
    padding: var(--st-pt, 64px) var(--page-margin, 1.5rem) var(--st-pb, 64px);
    background: var(--st-section-bg, transparent);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
  }

  .stats__inner {
    max-width: var(--page-width, 80rem);
    margin: 0 auto;
  }

  .stats__head {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 2.5rem;
  }
  .stats__head:has(+ .stats__grid:empty) { margin-bottom: 0; }
  .stats__title {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    color: var(--st-value);
    text-wrap: balance;
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
  }
  .stats__intro {
    color: var(--st-label);
    font-size: 1rem;
    line-height: 1.5;
  }
  .stats__intro :is(p, span) { margin: 0; font-size: inherit; }

  /* Auto-responsive grid — cards lay out as a single row whenever there's
     room (about 160 px per card), and naturally wrap onto multiple rows
     on narrower viewports. No hard column count to maintain. */
  .stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: var(--st-gap, 16px);
  }

  .stats__card {
    background: var(--st-card-bg);
    border-radius: var(--st-radius, 16px);
    padding: clamp(1.5rem, 2.5vw, 2.25rem) 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 9rem;
  }

  .stats__value {
    font-size: clamp(1.9rem, 3.6vw, 2.85rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    display: inline-flex;
    align-items: baseline;
  }
  .stats__value-base   { color: var(--st-value); }
  .stats__value-accent { color: var(--st-accent); }

  .stats__label {
    font-size: clamp(0.85rem, 1vw, 0.98rem);
    color: var(--st-label);
    line-height: 1.3;
    font-weight: 500;
  }

  /* Audience filtering for the whole section. */
  .stats[data-audience-target] { display: none; }
  .stats[data-audience-target].is-audience-match { display: block; }

  /* Audience filtering for individual cards. */
  .stats__card[data-audience-target] { display: none; }
  .stats__card[data-audience-target].is-audience-match {
    display: flex;
  }

  @media (max-width: 900px) {
    .stats__card { min-height: 7.5rem; }
  }
/* END_SECTION:stats */

/* START_SECTION:trust-badges-magicmind (INDEX:136) */
.mm-trust {
    background: var(--mm-bg, #ffffff);
    color: var(--mm-fg, #1a1a1a);
    padding-block: 24px;
  }
  @media (min-width: 1024px) {
    .mm-trust { padding-block: var(--mm-pt, 40px) var(--mm-pb, 40px); }
  }
  @media (max-width: 767px) {
    .mm-trust { padding-block: min(var(--mm-pt, 40px), 28px) min(var(--mm-pb, 40px), 28px); }
  }

  .mm-trust__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: var(--page-margin, 24px);
  }

  /* ── Moving strip (marquee) ── */
  .mm-trust--marquee .mm-trust__inner { max-width: none; padding-inline: 0; }
  /* Slim strip: a compact fixed band regardless of the section padding sliders
     (compound selector wins over the .mm-trust padding rules at every width). */
  .mm-trust.mm-trust--marquee { padding-block: 13px; }
  .mm-trust__marquee {
    overflow: hidden;
    width: 100%;
    /* fade both edges so items enter/leave softly */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .mm-trust__track {
    display: flex;
    width: max-content;
    animation: mm-trust-scroll var(--mm-mq-speed, 32s) linear infinite;
  }
  .mm-trust__marquee:hover .mm-trust__track,
  .mm-trust__marquee:focus-within .mm-trust__track { animation-play-state: paused; }
  .mm-trust__mq-group { display: flex; align-items: center; }
  .mm-trust__mq-item {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0 clamp(1.25rem, 3.5vw, 2.75rem);
    white-space: nowrap;
    font-family: var(--font-mono--family, ui-monospace, monospace);
    font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em;
    color: inherit;
  }
  .mm-trust__mq-check { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: var(--mm-accent); display: inline-flex; }
  .mm-trust__mq-check svg { width: 100%; height: 100%; display: block; }
  @keyframes mm-trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .mm-trust__title {
    margin: 0 0 1.25rem;
    text-align: center;
    color: inherit;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .mm-trust__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }

  .mm-trust__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem clamp(0.75rem, 2vw, 1.75rem);
    min-height: 44px;
    color: inherit;
    text-decoration: none;
  }
  /* Thin vertical divider lines between items on desktop (single non-wrapping row). */
  .mm-trust__list--dividers .mm-trust__item:not(:first-child) {
    border-inline-start: 1px solid var(--mm-divider, color-mix(in srgb, currentColor 12%, transparent));
  }

  .mm-trust__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mm-icon-size, 32px);
    height: var(--mm-icon-size, 32px);
    color: inherit;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .mm-trust__icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .mm-trust__svg { width: 100%; height: 100%; display: block; }

  .mm-trust__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
  }
  .mm-trust__label {
    font-family: var(--font-subheading--family, var(--font-primary--family, sans-serif));
    font-weight: 700;
    font-size: 0.95rem;
    color: inherit;
    transition: color 0.2s ease;
  }
  .mm-trust__subline {
    margin-top: 2px;
    font-family: var(--font-primary--family, sans-serif);
    font-size: var(--section-subtext-size, 14px);
    color: color-mix(in srgb, currentColor 60%, transparent);
  }

  /* Subtle hover: icon nudges up 2px, label shifts to the accent colour. */
  .mm-trust__item:hover .mm-trust__icon { transform: translateY(-2px); color: var(--mm-accent); }
  .mm-trust__item:hover .mm-trust__label { color: var(--mm-accent); }

  /* ≤768: wrap to 2 columns; vertical dividers hidden while stacked. */
  @media (max-width: 768px) {
    .mm-trust__list { gap: var(--mm-gap, 8px) 0; }
    .mm-trust__item { flex: 1 1 45%; }
    .mm-trust__list--dividers .mm-trust__item:not(:first-child) { border-inline-start: 0; }
  }

  /* ≤480: single column; dividers become horizontal. */
  @media (max-width: 480px) {
    .mm-trust__item { flex: 1 1 100%; justify-content: flex-start; }
    .mm-trust__list--dividers .mm-trust__item:not(:first-child) {
      border-inline-start: 0;
      border-top: 1px solid var(--mm-divider, color-mix(in srgb, currentColor 12%, transparent));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mm-trust__icon,
    .mm-trust__label { transition: none; }
    .mm-trust__item:hover .mm-trust__icon { transform: none; }
    .mm-trust__track { animation: none; }
    .mm-trust__marquee { overflow-x: auto; }
    /* one static copy is enough when not animating */
    .mm-trust__mq-group[aria-hidden="true"] { display: none; }
  }
/* END_SECTION:trust-badges-magicmind */

/* START_SECTION:why-it-works (INDEX:141) */
/* Background + corners + vertical padding live on the outer element
     so the color fills the full viewport width. The inner element only
     caps the content at `max-width`. */
  .why-works {
    --ww-inner-px: clamp(1.25rem, 3vw, 2.5rem);
    background: var(--ww-bg, transparent);
    color: var(--ww-fg, var(--color-foreground));
    padding: var(--ww-pt, 80px) var(--page-margin, 1.5rem) var(--ww-pb, 80px);
    border-radius: var(--sec-r-tl, 0) var(--sec-r-tr, 0) var(--sec-r-br, 0) var(--sec-r-bl, 0);
    margin-top: var(--sec-mt, 0);
    margin-bottom: var(--sec-mb, 0);
  }

  .why-works__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
  }

  /* ─── Head: title left, CTA right ─── */
  .why-works__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .why-works__title {
    font-family: var(--heading-family, var(--font-heading--family)) !important;
    font-weight: var(--heading-weight, 400) !important;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    margin: 0;
    color: inherit;
    text-wrap: balance;
  }

  /* Italic serif word, like Huel's "fancy" highlight. */
  .why-works__title-fancy {
    font-style: italic;
    font-family: var(--font-heading--family);
  }

  /* CTA defaults to theme brand tokens directly. Section bg/fg do not
     leak in — the CTA stays whatever color the user picked (or brand). */
  .why-works__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.6rem;
    background: var(--ww-cta-bg, var(--color-brand));
    color: var(--ww-cta-fg, var(--color-brand-contrast, var(--color-background)));
    border-radius: var(--style-border-radius-inputs, 999px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .why-works__cta:hover { opacity: 0.88; transform: translateY(-1px); }

  /* ─── Bento grid (desktop) ─────────────────────────────────────────
     3 columns × 2 equal rows. Slot 1 (tall left) spans both rows;
     slots 2/3 fill the top row of cols 2/3; slots 4/5 fill the
     bottom row of cols 2/3. Exactly 5 blocks, no more.

     `minmax(0, 1fr)` on both axes (NOT bare `1fr`) so the tracks
     don't grow to fit content — they share the grid's height equally.
  */
  .why-works__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(32rem, 45vw, 40rem);
    gap: 1rem;
  }

  .why-works__grid > *:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } /* tall left   */
  .why-works__grid > *:nth-child(2) { grid-column: 2; grid-row: 1;          } /* top middle  */
  .why-works__grid > *:nth-child(3) { grid-column: 3; grid-row: 1;          } /* top right   */
  .why-works__grid > *:nth-child(4) { grid-column: 2; grid-row: 2;          } /* bot middle  */
  .why-works__grid > *:nth-child(5) { grid-column: 3; grid-row: 2;          } /* bot right   */

  /* ─── Carousel (narrow screens) ────────────────────────────────────
     On small viewports, swap the grid for a horizontal scroller. No
     scroll-snap (Lenis-compat). Each card has a fixed min-width.
  */
  @media (max-width: 900px) {
    .why-works__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
    }

    .why-works__grid {
      display: flex;
      grid-template-columns: none;
      grid-template-rows: none;
      gap: 1rem;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 0.5rem;
      /* Carousel bleeds to the inner container's edges by cancelling
         out its horizontal padding. */
      margin-inline: calc(var(--ww-inner-px) * -1);
      padding-inline: var(--ww-inner-px);
      scrollbar-width: none;
    }
    .why-works__grid::-webkit-scrollbar { display: none; }

    .why-works__grid > * {
      flex: 0 0 78%;
      max-width: 22rem;
      grid-column: auto;
      grid-row: auto;
    }
  }

  @media (max-width: 540px) {
    .why-works__grid > * { flex-basis: 82%; }
  }

  /* ─── Carousel controls (mobile only) ──────────────────────────────
     Hidden by default — only revealed alongside the carousel layout.
  */
  .why-works__controls { display: none; }

  @media (max-width: 900px) {
    .why-works__controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.25rem;
    }

    .why-works__dots {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }
    .why-works__dot {
      width: 0.55rem;
      height: 0.55rem;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: color-mix(in srgb, var(--ww-dots, currentColor) 22%, transparent);
      cursor: pointer;
      transition: background-color 150ms ease, transform 150ms ease;
    }
    .why-works__dot.is-active {
      background: var(--ww-dots, currentColor);
      transform: scale(1.15);
    }

    .why-works__arrows {
      display: flex;
      gap: 0.6rem;
    }
    .why-works__arrow {
      width: 2.5rem;
      height: 2.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
      border-radius: 999px;
      background: transparent;
      color: inherit;
      cursor: pointer;
      transition: background-color 150ms ease, border-color 150ms ease;
    }
    .why-works__arrow:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
    .why-works__arrow:disabled { opacity: 0.35; cursor: default; }
    .why-works__arrow svg { width: 1.1rem; height: 1.1rem; }
  }
/* END_SECTION:why-it-works */

/* CSS from block stylesheet tags */
/* START_BLOCK:bento-item (INDEX:143) */
/* The article IS the card. `column-reverse` puts the text row
     visually on top while keeping image-first in the DOM. Explicit
     `height: 100%` is the reliable way to fill the grid cell — the
     previous nested-grid chain wasn't propagating height. */
  /* Card defaults derive from THEME tokens and use a SOLID mix with
     `--color-background` (not transparent), so the section's bg color
     can't bleed through. Cards stay independent of "Section bg" and
     "Section text color" — those only affect the section heading. */
  .bento-item {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--bi-bg, color-mix(in srgb, var(--color-foreground) 6%, var(--color-background)));
    color: var(--bi-fg, var(--color-foreground));
    border: var(--ww-card-border, none);
  }

  /* Text row: content-sized, sits on top (because of column-reverse).
     Same background as the rest of the card — no split. */
  .bento-item__text {
    flex: 0 0 auto;
    padding: 1.5rem 1.5rem 1.25rem;
  }

  .bento-item__title {
    font-family: var(--font-subheading--family);
    font-size: 2.25rem;
    font-weight: var(--bi-title-weight, 500);
    line-height: 1.25;
    margin: 0 0 0.35rem;
    color: inherit;
  }

  .bento-item__title-fancy {
    font-family: var(--font-heading--family);
    font-style: italic;
    font-weight: var(--bi-title-weight, 400);
  }

  .bento-item__subtitle {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: color-mix(in srgb, currentColor 70%, transparent);
  }

  /* Image row: grows to fill the rest of the card and clips its child,
     so the zoomed <img> can never escape the box. */
  .bento-item__media {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The image fits (contain) at zoom 100%, then `--bi-zoom` scales it
     in/out from center while preserving aspect ratio. The parent's
     overflow:hidden trims anything that grows past the card. */
  .bento-item__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(var(--bi-zoom, 1));
    transform-origin: center;
    transition: transform 250ms ease;
    will-change: transform;
  }

  .bento-item__media--placeholder {
    background-image: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, currentColor 8%, transparent),
      color-mix(in srgb, currentColor 8%, transparent) 12px,
      transparent 12px,
      transparent 24px
    );
    background-size: auto;
    background-repeat: repeat;
    background-position: 0 0;
  }

  /* On mobile (carousel mode) the grid no longer constrains height,
     so give every card a definite min-height. */
  @media (max-width: 900px) {
    .bento-item {
      min-height: 22rem;
    }
  }
/* END_BLOCK:bento-item */

/* START_BLOCK:compare-milestone (INDEX:144) */
.cgt-milestone {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  /* ── Result photo ── */
  .cgt-milestone__media {
    order: 0;
    width: 100%;
    max-width: var(--cgt-img-maxw, 360px);
    margin: 0 auto;
  }
  .cgt-milestone__img {
    display: block;
    width: 100%;
    height: auto;
    /* "Natural" → --cgt-img-ratio is `auto`, so the photo keeps its OWN ratio
       and is NOT cropped (object-fit has no fixed box to crop to). A fixed shape
       (square/portrait/…) sets a ratio and object-fit: cover crops to it. */
    aspect-ratio: var(--cgt-img-ratio, auto);
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: color-mix(in srgb, currentColor 5%, var(--color-background));
  }
  .cgt-milestone__img--placeholder { opacity: 0.7; }

  /* ── Month tag (badge) sits ON the timeline line ── */
  .cgt-milestone__tag {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
    background: var(--cgt-tag-bg-inactive, color-mix(in srgb, currentColor 8%, var(--color-background)));
    color: var(--cgt-tag-fg-inactive, color-mix(in srgb, currentColor 55%, var(--color-background)));
    font-family: var(--font-subheading--family);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    transition: background-color 300ms ease, color 300ms ease;
  }
  .cgt-milestone.is-active .cgt-milestone__tag {
    background: var(--cgt-tag-bg, var(--color-brand, #ffdc86));
    color: var(--cgt-tag-fg, var(--color-foreground));
  }

  /* ── Copy ── */
  .cgt-milestone__body {
    order: 2;
    max-width: 22rem;
    opacity: 0.3;
  }
  .cgt-milestone__body p {
    margin: 0;
    /* "Card description size" (--cgt-body-size) wins when set; otherwise the
       per-section / global subtext size; final fallback ~17px. */
    font-size: var(--cgt-body-size, var(--section-subtext-size, 1.0625rem));
    line-height: 1.5;
    color: inherit;
  }

  /* ── Mobile: tag ON TOP, then photo, then copy (matches the reference) ── */
  @media (max-width: 767px) {
    .cgt-milestone { gap: 1rem; }
    .cgt-milestone__tag   { order: 0; margin-bottom: 0.5rem; }
    .cgt-milestone__media { order: 1; }
    .cgt-milestone__body  { order: 2; }
  }
/* END_BLOCK:compare-milestone */

/* START_BLOCK:disclosure-cell (INDEX:147) */
.disclosure-cell {
    border-right: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
  }
  .disclosure-cell__btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 2.4vw, 2.5rem);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
  }
  .disclosure-cell__label {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-foreground);
    text-wrap: balance;
  }
  .disclosure-cell__icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 24px;
    height: 24px;
    transition: transform 150ms ease;
  }
  .disclosure-cell__icon svg { width: 100%; height: 100%; display: block; }
  .disclosure-cell__icon rect { fill: var(--dg-icon-bg, #1a1c23); }
  .disclosure-cell__icon path { stroke: var(--dg-icon-fg, #ffffff); fill: none; }
  .disclosure-cell__btn:hover .disclosure-cell__icon { transform: scale(1.08); }
/* END_BLOCK:disclosure-cell */

/* START_BLOCK:faq-item (INDEX:148) */
.faq-item {
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  }

  .faq-item__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .faq-item__summary::-webkit-details-marker { display: none; }
  .faq-item__summary::marker { content: none; }

  .faq-item__question {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-foreground);
    text-wrap: balance;
    flex: 1 1 auto;
  }

  .faq-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 4px;
    color: var(--color-foreground);
    transition: transform 180ms ease;
  }
  .faq-item__icon-v {
    transform-origin: 10px 10px;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .faq-item[open] .faq-item__icon-v {
    transform: scaleY(0);
    opacity: 0;
  }

  .faq-item__answer {
    padding: 0 0 1.5rem;
    color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .faq-item__answer :is(p, span) { margin: 0 0 0.75rem; }
  .faq-item__answer :is(p, span):last-child { margin-bottom: 0; }
  .faq-item__answer strong { font-weight: 700; }
/* END_BLOCK:faq-item */

/* START_BLOCK:footer-column (INDEX:149) */
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .footer-column__heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ft-fg, #fff) 60%, transparent);
  }

  .footer-column__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .footer-column__list a {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--ft-fg, #fff);
    text-decoration: none;
    transition: opacity 150ms ease;
  }
  .footer-column__list a:hover { opacity: 0.7; }
/* END_BLOCK:footer-column */

/* START_BLOCK:group (INDEX:150) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:growth-milestone (INDEX:151) */
/* Tag dimensions are tuned so the track in growth-timeline.liquid
     (`--gt-tag-y: 0.85rem`) hits the vertical centre of the pill.
     Tag total height = 0.4 (pad-y) + 0.7 (text) + 0.4 (pad-y) = 1.5rem
     → centre = 0.75rem. The 0.85rem track offset adds a 1px nudge so
     the line visually lines up under capital-only text. */
  .growth-milestone {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* Tag default = INACTIVE colors. The default inactive background
     is a SOLID off-white tint (mixed with `--color-background`, NOT
     transparent) so the dotted line is fully hidden behind every
     badge — reached or not. The section's JS adds `.is-active` to
     each milestone as the scroll reaches it, swapping the colors to
     the ACTIVE set with a smooth transition. */
  .growth-milestone__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--gt-tag-bg-inactive, color-mix(in srgb, currentColor 8%, var(--color-background)));
    color: var(--gt-tag-fg-inactive, color-mix(in srgb, currentColor 55%, var(--color-background)));
    font-family: var(--font-subheading--family);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    transition: background-color 300ms ease, color 300ms ease;
  }

  .growth-milestone.is-active .growth-milestone__tag {
    background: var(--gt-tag-bg, var(--color-brand, #ffc942));
    color: var(--gt-tag-fg, var(--color-foreground));
  }

  /* Body opacity is set every animation frame by the section's
     scroll handler. No CSS transition — same reason as the fill bar:
     new target opacities arrive faster than a transition can play,
     so a transition just causes lag. Starts at 0.3 so the first
     paint (before any scroll) doesn't flash full-opacity. */
  .growth-milestone__body {
    max-width: 22rem;
    opacity: 0.3;
  }
  .growth-milestone__body p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: inherit;
  }

  @media (max-width: 768px) {
    .growth-milestone { gap: 0.75rem; }
  }
/* END_BLOCK:growth-milestone */

/* START_BLOCK:hero-banner (INDEX:152) */
.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Image fills the entire banner as a background; text overlays on top.
     The image is force-sized (position + width/height) so smaller uploads
     still scale up to cover the banner at any viewport width — including
     ultrawide and 4K. The global `img { height: auto }` reset in critical.css
     is overridden here for the hero image only. */
  .hero-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: var(--hero-img-pos, center);
    display: block;
  }

  .hero-banner__content {
    position: relative;
    z-index: 1;
    max-width: 50%;
    padding: 3.25rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .hero-banner__title {
    margin: 0;
    line-height: 1.1;
    font-size: clamp(1.6rem, 3.2vw, 2.85rem);
    color: var(--hero-text, var(--color-foreground));
  }
  .hero-banner__title-thin {
    display: block;
    font-weight: 300;
  }
  .hero-banner__title-bold {
    display: block;
    font-family: var(--heading-family, var(--font-heading--family));
    font-weight: var(--heading-weight, 700);
    font-style: italic;
  }

  .hero-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-self: flex-start;
  }
  .hero-banner__button {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 1.85rem;
    background: var(--btn-bg, #000);
    color: var(--btn-fg, #fff);
    border-radius: var(--style-border-radius-inputs);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .hero-banner__button:hover { opacity: 0.88; transform: translateY(-1px); }

  .hero-banner__dots-slot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    color: var(--hero-text, var(--color-foreground));
  }
  .hero-banner__dots-slot:empty { display: none; }

  @media (max-width: 900px) {
    .hero-banner {
      min-height: 100vh;
      align-items: flex-end;
    }
    .hero-banner__content {
      max-width: 100%;
      width: 100%;
      padding: 1.5rem 1.25rem 1.75rem;
      gap: 1.1rem;
    }
    .hero-banner__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  }
/* END_BLOCK:hero-banner */

/* START_BLOCK:hero-logo (INDEX:153) */
.hero-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .hero-logo__image {
    max-height: 2.25rem;
    max-width: 9rem;
    width: auto;
    object-fit: contain;
    display: block;
  }

  .hero-logo__text {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
  }

  @media (max-width: 900px) {
    .hero-logo__image { max-height: 1.6rem; max-width: 6rem; }
    .hero-logo__text { font-size: 0.9rem; }
  }
/* END_BLOCK:hero-logo */

/* START_BLOCK:megamenu-card (INDEX:156) */
/* Editorial card — scoped with :not(--product) so these rules always
     win over the product card's shared base styles, regardless of which
     block's stylesheet loads last. */
  .megamenu-card:not(.megamenu-card--product) {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
    background: var(--color-background);
    /* Sharp corners, always-visible subtle border. On hover the border
       darkens to the audience accent; the accent tint goes on the body
       (title + description) only — see the __body rule below. */
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    transition: border-color 180ms ease;
  }
  .megamenu-card[data-audience-target]:not(.megamenu-card--product) { display: none; }

  /* Hover: accent-coloured border. No lift/zoom/shadow (the
     product-card's unscoped hover rule is neutralised here). */
  .megamenu-card:not(.megamenu-card--product):hover,
  .megamenu-card:not(.megamenu-card--product):focus-visible {
    transform: none;
    box-shadow: none;
    border-color: var(--audience-accent, var(--color-brand));
  }

  .megamenu-card:not(.megamenu-card--product) .megamenu-card__media {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  }
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* No hover zoom. */
    transition: none;
  }
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__placeholder {
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--audience-accent, var(--color-brand)) 14%, transparent);
  }

  /* Body: left-aligned, inset from the card border. On hover the title +
     description area picks up a light tint of the audience accent. */
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.4rem;
    padding: 0.85rem 1rem 1rem;
    /* Grow to fill the card's height. Cards in .nav-item__editorials stretch
       to the tallest one (flex align-items: stretch); without this, a shorter
       card leaves a white strip below the text that the hover tint can't reach. */
    flex: 1 1 auto;
    background: transparent;
    transition: background-color 180ms ease;
  }
  .megamenu-card:not(.megamenu-card--product):hover .megamenu-card__body,
  .megamenu-card:not(.megamenu-card--product):focus-visible .megamenu-card__body {
    background: color-mix(in srgb, var(--audience-accent, var(--color-brand)) 4%, var(--color-background));
  }

  /* Title + arrow on one row. Title takes the free space; the arrow is
     pushed to the right edge via margin-left:auto. Full row width so the
     title's left edge lines up with the description below it. */
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
  }
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__title {
    font-family: var(--section-heading-family, var(--font-condensed--family));
    font-weight: var(--section-heading-weight, 400);
    text-transform: var(--section-heading-transform, uppercase);
    font-size: 1.35rem;
    margin: 0;
    line-height: 1.25;
    color: var(--color-foreground);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Small accent arrow button (~28px). Colour follows the active
     audience accent. */
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0;
    background: var(--audience-accent, var(--color-brand));
    color: var(--audience-accent-fg, var(--color-brand-contrast));
  }
  .megamenu-card:not(.megamenu-card--product) .megamenu-card__cta svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  .megamenu-card:not(.megamenu-card--product) .megamenu-card__description {
    width: 100%;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
    margin: 0;
    line-height: 1.4;
  }

  @media (max-width: 900px) {
    .megamenu-card:not(.megamenu-card--product) {
      flex-direction: row;
      align-items: center;
      /* The drawer accordion shows the card's border — with zero side
         padding the text sat flush against it. */
      padding: 0.85rem 1rem;
    }
    .megamenu-card:not(.megamenu-card--product) .megamenu-card__media,
    .megamenu-card:not(.megamenu-card--product) .megamenu-card__cta { display: none; }
    .megamenu-card:not(.megamenu-card--product) .megamenu-card__body {
      padding: 0;
      gap: 0.2rem;
      flex: 1 1 auto;
    }
    .megamenu-card:not(.megamenu-card--product) .megamenu-card__title { font-size: 1.05rem; }
  }
/* END_BLOCK:megamenu-card */

/* START_BLOCK:megamenu-product-card (INDEX:157) */
/* Product card ships two pieces: a list row (styled inside the nav-item
     list) and a preview panel (styled here, displayed in the preview pane).
     The editorial `megamenu-card` is fully scoped with :not(--product), so
     these rules never collide with it. */
  .megamenu-card--product {
    display: block;
    color: var(--color-foreground);
  }
  .megamenu-card[data-audience-target] { display: none; }

  /* Left-column list title color override (high specificity to beat nav-item.liquid) */
  .megamenu-card.megamenu-card--product .megamenu-card__title {
    color: var(--list-title-color, var(--audience-accent, var(--color-brand)));
  }

  /* The preview is hidden while it still lives inside the card (in the
     list). Once the script moves it into the preview pane it is no longer
     a descendant of the card, so the pane's own rules take over. */
  .megamenu-card--product .megamenu-card__preview { display: none; }

  /* ─── Preview panel: image | details | benefits ─── */
  .megamenu-card__preview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    padding: 1.75rem 0.5rem;
  }

  /* Top row: product image | eyebrow · title · description · CTA */
  .megamenu-card__preview-top {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 2.25rem;
    align-items: center;
  }

  .megamenu-card__preview-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .megamenu-card__preview-image {
    width: 100%;
    height: auto;
    max-height: 15rem;
    object-fit: contain;
    display: block;
    transform: scale(var(--image-scale, 1));
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  .megamenu-card__placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--audience-accent, var(--color-brand)) 14%, transparent),
      color-mix(in srgb, var(--color-foreground) 8%, transparent)
    );
    transform: scale(var(--image-scale, 1));
    transform-origin: center;
    transition: transform 0.3s ease;
  }

  .megamenu-card__preview-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.25rem 0;
  }
  .megamenu-card__eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--eyebrow-bg, color-mix(in srgb, var(--audience-accent, var(--color-brand)) 12%, transparent));
    color: var(--eyebrow-text, var(--audience-accent, var(--color-brand)));
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .megamenu-card__preview-title {
    font-family: var(--font-condensed--family, var(--section-heading-family, sans-serif));
    font-weight: var(--section-heading-weight, 800);
    text-transform: var(--section-heading-transform, uppercase);
    font-size: clamp(1.85rem, 2.2vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--title-color, var(--color-foreground));
  }
  .megamenu-card__preview-desc {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--desc-color, color-mix(in srgb, var(--color-foreground) 70%, transparent));
    margin: 0;
    /* Truncate to three lines. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .megamenu-card__shop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.8rem 1.6rem;
    border-radius: 6px;
    background: var(--btn-bg, var(--audience-accent, var(--color-brand)));
    color: var(--btn-text, var(--audience-accent-fg, var(--color-brand-contrast)));
    text-decoration: none;
    font-weight: 700;
    font-size: 0.98rem;
    transition: background 180ms ease;
  }
  .megamenu-card__shop:hover {
    background: color-mix(in srgb, var(--btn-bg, var(--audience-accent, var(--color-brand))) 85%, black);
  }
  .megamenu-card__shop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
  }
  .megamenu-card__shop-icon svg { width: 100%; height: 100%; }

  /* Bottom block: Benefits | Women also reported — two columns under a
     full-width divider. */
  .megamenu-card__preview-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--aside-border-color, color-mix(in srgb, var(--color-foreground) 12%, transparent));
  }
  .megamenu-card__aside-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    color: var(--aside-title-color, var(--color-foreground));
  }
  .megamenu-card__aside-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .megamenu-card__aside-list li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.96rem;
    line-height: 1.45;
    color: var(--aside-text-color, var(--color-foreground));
  }
  .megamenu-card__aside-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--aside-bullet-color, var(--audience-accent, var(--color-brand)));
  }

  /* The preview pane scales with the viewport (hidden entirely below 901px).
     Tighten the image column as it narrows, then stack the two benefit
     columns when it gets really tight. */
  @media (max-width: 1200px) {
    .megamenu-card__preview-top {
      grid-template-columns: 9rem minmax(0, 1fr);
      gap: 1.75rem;
    }
    .megamenu-card__preview-aside { gap: 1.25rem 2rem; }
  }

  @media (max-width: 1024px) {
    .megamenu-card__preview { padding: 1.25rem 0.25rem; }
    .megamenu-card__preview-top {
      grid-template-columns: 7.5rem minmax(0, 1fr);
      gap: 1.25rem;
    }
    .megamenu-card__preview-title { font-size: 1.5rem; }
    .megamenu-card__preview-aside {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }
/* END_BLOCK:megamenu-product-card */

/* START_BLOCK:nav-item (INDEX:158) */
/* Positioning context for the megamenu panel: the panel opens from
     THIS nav item's left edge (not the header's), so each menu drops
     under the item the user hovered. `display: flex` lets the link
     fill the full header-row height (paired with the header's
     `.primary-nav__items { align-items: stretch }`) so `top: 100%`
     lands flush at the bottom of the header row. */
  .nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
  }

  @media (min-width: 901px) {
    .nav-item {
      position: static;
    }
    .nav-item--relative {
      position: relative;
    }
  }

  .nav-item__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1.4rem 0;
    color: var(--color-foreground);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 150ms ease, color 150ms ease;
  }

  .nav-item__link:hover,
  .nav-item__link:focus-visible {
    color: var(--audience-accent, var(--color-brand));
    border-bottom-color: var(--audience-accent, var(--color-brand));
  }

  .nav-item__indicator {
    position: relative;
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    margin-left: 0.15rem;
  }

  .nav-item__indicator::before,
  .nav-item__indicator::after {
    content: '';
    position: absolute;
    background: currentColor;
  }

  /* horizontal bar */
  .nav-item__indicator::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
  }

  /* vertical bar (the one that hides on expand, turning + into -) */
  .nav-item__indicator::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%) scaleY(1);
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  @media (hover: hover) {
    .nav-item--has-megamenu:hover .nav-item__indicator::after,
    .nav-item--has-megamenu:focus-within .nav-item__indicator::after {
      transform: translateX(-50%) scaleY(0);
      opacity: 0;
    }
  }

  .nav-item__panel {
    position: absolute;
    top: 100%;
    margin-left: -1px;
    background: var(--panel-bg, var(--color-background));
    /* Dynamic border based on settings, falling back to 1px solid default border */
    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-border));
    border-radius: var(--panel-border-radius, 0px);
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    z-index: 50;
  }

  @media (min-width: 901px) {
    /* Stretch Shopify block wrappers so the nested .nav-item reaches full header height */
    .primary-nav__items > * {
      display: flex;
      align-items: stretch;
    }

    /* For the first nav item block: static position to align dropdown to the header wrapper */
    .primary-nav__items > :first-child,
    .primary-nav__items > :first-child > .nav-item {
      position: static !important;
    }
    .primary-nav__items > :first-child .nav-item__panel {
      left: 0 !important;
      right: auto !important;
      max-width: calc(100% + 2px) !important;
    }

    /* For other nav item blocks: relative position to align dropdown to the nav item link */
    .primary-nav__items > :not(:first-child),
    .primary-nav__items > :not(:first-child) > .nav-item {
      position: relative !important;
    }
    .primary-nav__items > :not(:first-child) .nav-item__panel {
      left: 0 !important;
      right: auto !important;
      max-width: calc(100vw - 2 * var(--page-margin, 24px)) !important;
    }

    .nav-item__panel {
      width: max-content;
      transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    }

    .nav-item__panel[data-alignment^='item-'] {
      max-width: calc(100vw - 2 * var(--page-margin, 24px));
    }
    .nav-item__panel:not([data-alignment^='item-']) {
      max-width: calc(100% + 2px);
    }

    /* Header-relative Left alignment */
    .nav-item__panel[data-alignment='left'] {
      left: -1px;
      right: auto;
      transform: translateY(-6px);
    }
    .nav-item--has-megamenu:hover .nav-item__panel[data-alignment='left'],
    .nav-item--has-megamenu:focus-within .nav-item__panel[data-alignment='left'],
    .nav-item--has-megamenu.is-expanded .nav-item__panel[data-alignment='left'] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Header-relative Right alignment */
    .nav-item__panel[data-alignment='right'] {
      right: -1px;
      left: auto;
      transform: translateY(-6px);
    }
    .nav-item--has-megamenu:hover .nav-item__panel[data-alignment='right'],
    .nav-item--has-megamenu:focus-within .nav-item__panel[data-alignment='right'],
    .nav-item--has-megamenu.is-expanded .nav-item__panel[data-alignment='right'] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Header-relative Center alignment */
    .nav-item__panel[data-alignment='center'] {
      left: 50%;
      right: auto;
      transform: translateX(-50%) translateY(-6px);
    }
    .nav-item--has-megamenu:hover .nav-item__panel[data-alignment='center'],
    .nav-item--has-megamenu:focus-within .nav-item__panel[data-alignment='center'],
    .nav-item--has-megamenu.is-expanded .nav-item__panel[data-alignment='center'] {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    /* Nav Item-relative Left alignment */
    .nav-item__panel[data-alignment='item-left'] {
      left: 0;
      right: auto;
      transform: translateY(-6px);
    }
    .nav-item--has-megamenu:hover .nav-item__panel[data-alignment='item-left'],
    .nav-item--has-megamenu:focus-within .nav-item__panel[data-alignment='item-left'],
    .nav-item--has-megamenu.is-expanded .nav-item__panel[data-alignment='item-left'] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Nav Item-relative Right alignment */
    .nav-item__panel[data-alignment='item-right'] {
      right: 0;
      left: auto;
      transform: translateY(-6px);
    }
    .nav-item--has-megamenu:hover .nav-item__panel[data-alignment='item-right'],
    .nav-item--has-megamenu:focus-within .nav-item__panel[data-alignment='item-right'],
    .nav-item--has-megamenu.is-expanded .nav-item__panel[data-alignment='item-right'] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Nav Item-relative Center alignment */
    .nav-item__panel[data-alignment='item-center'] {
      left: 50%;
      right: auto;
      transform: translateX(-50%) translateY(-6px);
    }
    .nav-item--has-megamenu:hover .nav-item__panel[data-alignment='item-center'],
    .nav-item--has-megamenu:focus-within .nav-item__panel[data-alignment='item-center'],
    .nav-item--has-megamenu.is-expanded .nav-item__panel[data-alignment='item-center'] {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
  }

  /* JS-driven expand (touch devices): same visible state as hover. */
  .nav-item--has-megamenu.is-expanded .nav-item__indicator::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }

  .nav-item__panel-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: none;
    margin: 0;
    padding: 2rem 2.25rem;
  }

  /* Editor-only warning (rendered only when request.design_mode). */
  .nav-item__warning {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    background: color-mix(in srgb, #d97706 14%, var(--color-background));
    border: 1px solid color-mix(in srgb, #d97706 45%, transparent);
    color: color-mix(in srgb, #92400e 90%, var(--color-foreground));
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* Editorial cards laid out as a fixed-width row so the panel (which is
     `width: max-content`) sizes cleanly to the number of cards. Max 4
     cards x 210px keeps it within a sensible width. */
  .nav-item__editorials {
    display: flex;
    /* Cards are fixed 210px and the panel is max-width-capped: without
       wrap they poke past the panel on narrow desktops (+5px @1025). */
    flex-wrap: wrap;
    gap: 1rem;
    border: var(--megamenu-border-size, 0px) solid var(--megamenu-border-color, transparent);
    border-radius: var(--megamenu-border-radius, 8px);
    box-sizing: border-box;
    /* Add slight padding if border is set so cards don't touch the edges */
    padding: calc(var(--megamenu-border-size, 0px) * 2);
  }
  .nav-item__editorials .megamenu-card {
    width: 210px;
    flex: 0 0 210px;
    border: var(--card-border-size, 0px) solid var(--card-border-color, transparent);
    border-radius: var(--card-border-radius, 8px);
    box-sizing: border-box;
    overflow: hidden;
  }

  /* --- Product list row - contained width, only the list card carries
     the tinted background. Preview image sits on the right at its
     natural aspect, not stretched. Aligned to the LEFT of the panel. --- */
  /* Definite width so the 2-column `minmax(0,1fr)` body resolves even
     though the panel itself is `width: max-content`. */
  .nav-item__products {
    background: transparent;
    padding: 0;
    width: calc(85rem * (var(--product-list-width, 100) / 100));
    max-width: calc(100vw - 2 * var(--page-margin, 24px) - 3rem);
    margin: 0;
    border: var(--megamenu-border-size, 0px) solid var(--megamenu-border-color, transparent);
    border-radius: var(--megamenu-border-radius, 8px);
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Tablet band (header card is 100% - 6rem here): the 66rem/100vw-based
     widths overshoot the panel by ~37px on the right — pin the products
     block to its panel. ≥1025 is untouched. */
  @media (max-width: 1024px) {
    .nav-item__products {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  }
  /* Tablet band: item-aligned panels overflow the viewport — the panel's
     max-width is computed from 100vw but the panel starts at the nav
     item's x-offset, so offset + width > viewport (editorials menu hit
     +53px @977). Anchor EVERY panel to the header card in the band and
     let the fixed-width editorial cards wrap. ≥1025 untouched; ≤900 is
     the drawer. */
  @media (min-width: 901px) and (max-width: 1024px) {
    /* Selectors mirror the :not(:first-child) !important rules above so we
       tie their 0-3-0 specificity and win on source order. */
    .primary-nav__items > *,
    .primary-nav__items > * > .nav-item,
    .primary-nav__items > :not(:first-child),
    .primary-nav__items > :not(:first-child) > .nav-item {
      position: static !important;
    }
    .nav-item__panel,
    .primary-nav__items > :first-child .nav-item__panel,
    .primary-nav__items > :not(:first-child) .nav-item__panel {
      left: 0 !important;
      right: auto !important;
      /* +1px (not +2): panel sits at left -1px (margin), so +2 would poke
         1px past the viewport and create a 1px horizontal scroll. */
      max-width: calc(100% + 1px) !important;
      transform: translateY(-6px) !important;
    }
    .nav-item--has-megamenu:hover .nav-item__panel,
    .nav-item--has-megamenu:focus-within .nav-item__panel,
    .nav-item--has-megamenu.is-expanded .nav-item__panel {
      transform: translateY(0) !important;
    }
  }
  .nav-item__products-body {
    display: grid;
    grid-template-columns: var(--product-card-left-width, 21rem) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: stretch;
  }

  /* Left Column: Dark Card Box + 2 Action Buttons below it */
  .nav-item__products-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  /* Dark Card Box (matching Image 2 top container) */
  .nav-item__products-card {
    background: var(--mm-top-card-bg, #112032) !important;
    color: var(--mm-top-card-fg, #ffffff) !important;
    padding: 1.5rem 0 1rem;
    border-radius: 8px !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .nav-item__products-heading {
    font-family: var(--heading-font-family, var(--font-condensed--family, var(--section-heading-family, sans-serif))) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: var(--heading-font-size, 1.6rem) !important;
    line-height: 1.15;
    margin: 0 0 1rem 0;
    padding: 0 1.5rem;
    color: #ffffff !important;
    letter-spacing: -0.01em;
  }

  /* Product List inside dark card */
  .nav-item__products-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background: transparent !important;
  }

  /* Individual Product Item Row */
  .nav-item__products-list .megamenu-card--product {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
  }
  .nav-item__products-list .megamenu-card--product:last-child {
    border-bottom: 0 !important;
  }

  .nav-item__products-list .megamenu-card__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.5rem !important;
    transition: background 180ms ease;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .nav-item__products-list .megamenu-card__row:hover,
  .nav-item__products-list .megamenu-card--product.is-active .megamenu-card__row {
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
  }

  /* Force crisp bright white text visibility */
  .nav-item__products-list .megamenu-card__title,
  .nav-item__products-list .megamenu-card__row,
  .nav-item__products-list .megamenu-card__row span,
  .nav-item__products-list a {
    color: #ffffff !important;
    font-family: var(--product-list-font-family, var(--font-condensed--family, var(--font-primary--family, sans-serif))) !important;
    font-weight: 700 !important;
    font-size: var(--product-list-font-size, 1.1rem) !important;
    line-height: 1.25 !important;
  }

  .nav-item__products-list .megamenu-card__row::after {
    display: none !important;
  }

  /* Two CTA Action Buttons below dark card */
  .nav-item__products-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }

  .nav-item__products-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 2.8rem 0.75rem 1.25rem;
    border-radius: 6px !important;
    font-family: var(--font-primary--family, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 150ms ease;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }

  /* Button 1: Solid Primary Background + Text */
  .nav-item__products-cta--primary {
    background: var(--mm-cta1-bg, #046b5c) !important;
    color: var(--mm-cta1-fg, #ffffff) !important;
    border: 1.5px solid var(--mm-cta1-bg, #046b5c) !important;
  }
  .nav-item__products-cta--primary:hover {
    background: color-mix(in srgb, var(--mm-cta1-bg, #046b5c) 85%, #000000) !important;
    border-color: color-mix(in srgb, var(--mm-cta1-bg, #046b5c) 85%, #000000) !important;
    color: var(--mm-cta1-fg, #ffffff) !important;
  }
  .nav-item__products-cta--primary .nav-item__products-cta-icon {
    background: rgba(0, 0, 0, 0.22);
    color: var(--mm-cta1-fg, #ffffff);
    border-radius: 4px;
    width: 24px;
    height: 24px;
  }

  /* Button 2: Secondary Outline Background + Border & Text */
  .nav-item__products-cta--secondary {
    background: var(--mm-cta2-bg, #ffffff) !important;
    color: var(--mm-cta2-border, #046b5c) !important;
    border: 1.5px solid var(--mm-cta2-border, #046b5c) !important;
  }
  .nav-item__products-cta--secondary:hover {
    background: color-mix(in srgb, var(--mm-cta2-border, #046b5c) 8%, #ffffff) !important;
    color: var(--mm-cta2-border, #046b5c) !important;
    border-color: var(--mm-cta2-border, #046b5c) !important;
  }
  .nav-item__products-cta--secondary .nav-item__products-cta-icon {
    background: transparent;
    color: var(--mm-cta2-border, #046b5c);
    width: 24px;
    height: 24px;
  }

  .nav-item__products-cta-icon {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
  }

  /* Right preview pane — pinned to the height of the left column */
  .nav-item__products-preview {
    display: grid;
    align-items: stretch;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--card-border-radius, 8px);
  }
  .nav-item__products-preview > .megamenu-card__preview {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease;
    border: var(--card-border-size, 0px) solid var(--card-border-color, transparent);
    border-radius: var(--card-border-radius, 8px);
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
  }
  .nav-item__products-preview > .megamenu-card__preview.is-active {
    opacity: 1;
    visibility: inherit;
    pointer-events: auto;
  }

  /* Default banner - pinned to 100% height of left column, object-fit cover */
  .nav-item__products-preview > .nav-item__banner {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--card-border-radius, 8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  .nav-item__products-preview > .nav-item__banner.is-active {
    opacity: 1;
    visibility: inherit;
    pointer-events: auto;
  }
  .nav-item__banner-link {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
  }
  .nav-item__banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: var(--card-border-size, 0px) solid var(--card-border-color, transparent);
    border-radius: var(--card-border-radius, 8px);
    box-sizing: border-box;
  }

  /* CTA inside the list card - negative side/bottom margins so it
     escapes the card's 1.5rem padding and runs edge-to-edge along the
     card's bottom. `margin-top: auto` pushes it down when the card
     stretches taller than its content. Bottom corners match the card's
     `border-radius` so they form a single shape. */
  .nav-item__products-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: auto 0 0 0;
    padding: 0.9rem 1.25rem;
    background: var(--audience-accent, var(--color-brand));
    color: var(--audience-accent-fg, var(--color-brand-contrast));
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 0 0 var(--card-border-radius, 8px) var(--card-border-radius, 8px);
    transition: background 180ms ease;
  }
  .nav-item__products-cta:hover {
    background: color-mix(in srgb, var(--audience-accent, var(--color-brand)) 85%, black);
  }
  .nav-item__products-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--audience-accent-fg, var(--color-brand-contrast)) 25%, transparent);
  }
  .nav-item__products-cta-icon svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  @media (max-width: 900px) {
    .nav-item {
      display: block;
      border-bottom: 1px solid var(--color-border);
    }

    .nav-item:first-child {
      border-top: 1px solid var(--color-border);
    }

    .nav-item__link {
      width: 100%;
      padding: 1rem 1.25rem;
      justify-content: space-between;
      border-bottom: 0;
      font-size: 1rem;
      font-weight: 600;
    }

    .nav-item__link:hover,
    .nav-item__link:focus-visible {
      color: var(--color-foreground);
      border-bottom-color: transparent;
    }

    /* Accordion: hover/focus do nothing on mobile; toggling .is-expanded shows the panel. */
    .nav-item__panel {
      position: static;
      box-shadow: none;
      border-top: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none;
      padding: 0;
    }
    .nav-item--has-megamenu:hover .nav-item__panel,
    .nav-item--has-megamenu:focus-within .nav-item__panel {
      /* Disable desktop hover open on touch. */
      display: none;
    }
    .nav-item--has-megamenu.is-expanded .nav-item__panel {
      display: block;
    }

    .nav-item__panel-inner {
      padding: 0 1.25rem 1rem;
      gap: 0.75rem;
    }
    /* The container is display:flex (the old grid-template-columns line did
       nothing), and the base 210px fixed card width still applied — cards
       sat in a row and overflowed the drawer. Stack them full-width. */
    .nav-item__editorials {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    .nav-item__editorials .megamenu-card {
      width: 100%;
      flex: 0 0 auto;
    }
    .nav-item__products {
      background: transparent;
      padding: 0.5rem 0 0;
    }
    .nav-item__products-body {
      grid-template-columns: 1fr;
    }
    .nav-item__products-preview {
      display: none;
    }
    .nav-item__products-heading {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }

    /* Plus -> minus on .is-expanded (replacing the desktop :hover behavior). */
    .nav-item--has-megamenu.is-expanded .nav-item__indicator::after {
      transform: translateX(-50%) scaleY(0);
      opacity: 0;
    }
  }

  /* ───── Product megamenu → full-width dropdown (aligned to the header) ─────
     ONLY the menu that holds product cards (data-product-count > 0) spans the
     full header width. Editorial menus (Science, etc.) have data-product-count
     "0", so they keep their current content-sized dropdown. */
  @media (min-width: 901px) {
    /* Force the product menu's nav item static so its panel anchors to
       .header-row (full width) instead of the nav item — wherever it sits. */
    .primary-nav__items > :has(.nav-item__panel[data-product-count]:not([data-product-count="0"])),
    .primary-nav__items > :has(.nav-item__panel[data-product-count]:not([data-product-count="0"])) > .nav-item {
      position: static !important;
    }
    .nav-item__panel[data-product-count]:not([data-product-count="0"]) {
      /* Full-bleed to the viewport so it can't depend on which ancestor the
         panel anchors to: a 100vw box centred on the (full-width) header. */
      left: 50% !important;
      right: auto !important;
      width: 100vw !important;
      max-width: 100vw !important;
      margin-left: -50vw !important;
    }
    /* Align the dropdown's inner content with the header content, and let the
       product block fill the full width. */
    .nav-item__panel[data-product-count]:not([data-product-count="0"]) .nav-item__panel-inner {
      padding-left: var(--header-px, 24px);
      padding-right: var(--header-px, 24px);
    }
    .nav-item__panel[data-product-count]:not([data-product-count="0"]) .nav-item__products {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
/* END_BLOCK:nav-item */

/* START_BLOCK:proof-stat (INDEX:161) */
.proof-stat {
    display: grid;
    grid-template-columns: var(--pf-num-col, 160px) minmax(0, 1fr);
    align-items: center;
    gap: var(--pf-num-gap, 2rem);
    padding: var(--pf-stat-py, 1.5rem) 0;
    /* Divider above every row — a line sits above the first stat and between
       each, but not below the last (matches the reference). */
    border-top: 1px solid var(--pf-divider, color-mix(in srgb, currentColor 22%, transparent));
  }

  .proof-stat__value {
    font-family: var(--font-condensed--family, sans-serif);
    font-weight: 400;
    line-height: 0.95;
    font-size: var(--pf-num-size, clamp(2.75rem, 2rem + 2.6vw, 4.5rem));
    color: var(--pf-num-color, inherit);
    letter-spacing: 0.005em;
  }

  .proof-stat__label {
    margin: 0;
    font-family: var(--font-subheading--family, sans-serif);
    font-weight: 600;
    font-size: var(--pf-label-size, 1rem);
    line-height: 1.35;
    color: inherit;
  }

  @media (max-width: 767px) {
    .proof-stat {
      grid-template-columns: var(--pf-num-col-m, 7rem) minmax(0, 1fr);
      gap: 1.25rem;
      padding: 1.25rem 0;
    }
    /* The number size (--pf-num-size) is a fixed desktop px from settings
       (e.g. 86px) — far too big on phones. Cap it responsively so it scales
       with the screen and stops wrapping (e.g. "365 Days"). */
    .proof-stat__value {
      font-size: clamp(2.4rem, 12vw, 3.5rem);
    }
  }
/* END_BLOCK:proof-stat */

/* START_BLOCK:result-card (INDEX:162) */
.result-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rs-card-bg, #ffffff);
    border: 1px solid var(--rs-card-border, color-mix(in srgb, var(--rs-fg, #1a1c23) 14%, transparent));
    border-radius: var(--rs-radius, 6px);
    overflow: hidden;
  }

  /* Before / after photos — equal halves. Each figure reserves its space via
     aspect-ratio so the layout never shifts as the (lazy) images load. */
  .result-card__shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .result-card__shot {
    position: relative;
    margin: 0;
    aspect-ratio: var(--rs-ratio, 3 / 4);
    overflow: hidden;
    background: color-mix(in srgb, var(--rs-fg, #1a1c23) 6%, #ffffff);
  }
  .result-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .result-card__img--ph {
    object-fit: contain;
    opacity: 0.5;
  }

  .result-card__shot-label {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    z-index: 1;
    padding: 0.4rem 0.55rem;
    border-radius: 2px;
    background: var(--rs-label-bg, #ffffff);
    color: var(--rs-label-fg, var(--rs-fg, #1a1c23));
    font-family: var(--font-subheading--family, sans-serif);
    font-size: var(--rs-shot-label-size, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
  }

  .result-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
  }
  @media (min-width: 1024px) {
    .result-card__body {
      padding: 1.5rem;
    }
  }

  .result-card__name {
    margin: 0 0 2.75rem;
    /* Reviewer name follows the SECTION heading font — inherits
       --section-heading-* set on the section wrapper by section-typography
       (so the per-section heading override applies), falling back to the
       global heading font. */
    font-family: var(--section-heading-family, var(--font-heading--family));
    font-weight: var(--section-heading-weight, 400);
    font-size: var(--rs-name-size, 1.875rem);
    line-height: 1.1;
    color: inherit;
  }

  .result-card__tags {
    list-style: none;
    margin: 0 0 6.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .result-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    border-radius: 2px;
    background: var(--rs-tag-bg, #eef1f6);
    color: var(--rs-tag-fg, var(--rs-fg, #1a1c23));
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* "Taking ..." flows right after the tags (a fixed gap, NOT pinned to the
     card bottom — the old `margin:auto` pin blew a large uneven gap open when
     a card stretched taller than its content). */
  .result-card__taking {
    margin: 0;
    font-family: var(--font-subheading--family, sans-serif);
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
  }
  .result-card__product {
    color: var(--rs-accent, #0047ab);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  a.result-card__product:hover {
    text-decoration: none;
  }

  .result-card__caption {
    margin: 0.8rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: color-mix(in srgb, currentColor 60%, transparent);
  }
/* END_BLOCK:result-card */

/* START_BLOCK:text (INDEX:172) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image-lightbox (INDEX:176) */
.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 18, 22, 0.78);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .img-lightbox[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  .img-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    border: 0;
    cursor: zoom-out;
    padding: 0;
  }

  .img-lightbox__stage {
    position: relative;
    z-index: 1;
    /* Shrink-wraps the image so the modal matches the image's real shape
       (no background filler / letterboxing). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .img-lightbox__img {
    /* Show the image at its natural size/ratio, capped so it never exceeds
       the viewport (prevents the old full-screen blow-ups). */
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    transition: opacity 160ms ease;
  }
  /* While the full-res image downloads, dim the (placeholder) image a
     touch and show a spinner so it's clearly loading, not broken. */
  .img-lightbox[data-loading="true"] .img-lightbox__img { opacity: 0.45; }
  .img-lightbox__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: img-lightbox-spin 0.7s linear infinite;
  }
  .img-lightbox[data-loading="true"] .img-lightbox__spinner { display: block; }
  @keyframes img-lightbox-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .img-lightbox__spinner { animation-duration: 2s; }
  }

  .img-lightbox__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1c23;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 120ms ease, background 120ms ease;
  }
  .img-lightbox__close:hover { transform: scale(1.06); }
  .img-lightbox__close svg { width: 20px; height: 20px; }

  /* Touch devices / short windows: the -2.75rem offset can push the button
     above the screen edge when the image fills 86vh, and 36px is under the
     44px minimum tap size. Move it inside the image corner and enlarge.
     Desktop with a mouse keeps the original position/size. */
  @media (pointer: coarse), (max-height: 700px) {
    .img-lightbox__close {
      top: 0.5rem;
      right: 0.5rem;
      width: 44px;
      height: 44px;
    }
  }

  /* Mark any element that can open the lightbox so the cursor + a11y hint. */
  [data-lightbox-src] { cursor: zoom-in; }

  /* When the lightbox is open, freeze body scroll. JS toggles this class. */
  body.img-lightbox-open { overflow: hidden; }
/* END_SNIPPET:image-lightbox */

/* START_SNIPPET:image (INDEX:177) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */