/** Shopify CDN: Minification failed

Line 2834:2 Unexpected "{"
Line 2834:3 Expected identifier but found "%"
Line 2835:8 Unexpected "1199px"
Line 2837:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:ofuel-benefits (INDEX:45) */
.ofuel-benefits {
    background: var(--benefits-bg, #f57379);
  }

  .ofuel-benefits__inner {
    --gutter: clamp(16px, 4vw, 85px);
    max-width: calc(var(--ofuel-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 20px var(--gutter);
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .ofuel-benefits__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 9px;
  }

  .ofuel-benefits[data-dividers="true"] .ofuel-benefits__item:not(:last-child) {
    border-right: 1px solid var(--benefits-divider, rgba(240, 239, 235, 0.3));
  }

  .ofuel-benefits__icon {
    width: 20px;
    height: 20px;
    display: block;
    flex: none;
  }

  .ofuel-benefits__text {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--benefits-fg, #f0efeb);
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .ofuel-benefits__inner {
      flex-wrap: wrap;
      gap: 12px 20px;
      padding-block: 16px;
    }

    .ofuel-benefits__item {
      flex: 0 1 auto;
      border-right: none !important;
    }

    .ofuel-benefits__text {
      white-space: normal;
      font-size: 14px;
    }
  }
/* END_SECTION:ofuel-benefits */

/* START_SECTION:ofuel-bundle-builder (INDEX:46) */
.ofuel-bb {
    background: var(--bb-bg, #f0efeb);
  }

  .ofuel-bb__inner {
    --bb-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--bb-gutter));
    margin-inline: auto;
    padding: 64px var(--bb-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-bb__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-bb__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-bb__heading {
    margin: 0;
    max-width: 672px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-bb__intro {
    margin: 0;
    max-width: 768px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .ofuel-bb__cell {
    display: grid;
  }

  .ofuel-bb__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 32px;
    background: var(--bb-card-bg, #fff);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .ofuel-bb__card.is-selected {
    border-color: var(--bb-accent, #f57379);
    box-shadow: 0 0 0 2px var(--bb-accent, #f57379) inset;
  }

  .ofuel-bb__card--sold {
    opacity: 0.62;
  }

  .ofuel-bb__card--empty {
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.25);
  }

  .ofuel-bb__empty-text {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 18px;
    border-radius: 24px;
    background: var(--ofuel-cream, #f0efeb);
    overflow: hidden;
  }

  .ofuel-bb__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ofuel-bb__ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    background: var(--ofuel-white, #fff);
    color: var(--bb-accent, #f57379);
  }

  .ofuel-bb__ph svg {
    display: block;
    width: 40px;
    height: 40px;
  }

  .ofuel-bb__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Push the stepper to the card floor so every row of steppers lines up. */
    margin-bottom: auto;
  }

  .ofuel-bb__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.4px;
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  .ofuel-bb__subtitle {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 0;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-bb__price-now {
    font-weight: 700;
  }

  .ofuel-bb__price-was {
    font-weight: 400;
    font-size: 14px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__stepper {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 9999px;
    background: var(--ofuel-white, #fff);
  }

  .ofuel-bb__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--ofuel-ebb, #e6e4e2);
    color: var(--ofuel-black, #000);
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
  }

  .ofuel-bb__step svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .ofuel-bb__step[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .ofuel-bb__step:focus-visible {
    outline: 2px solid var(--bb-accent, #f57379);
    outline-offset: 2px;
  }

  .ofuel-bb__qty {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    color: var(--ofuel-black, #000);
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .ofuel-bb__qty::-webkit-outer-spin-button,
  .ofuel-bb__qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .ofuel-bb__qty:focus-visible {
    outline: 2px solid var(--bb-accent, #f57379);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .ofuel-bb__sold {
    margin: 0;
    padding: 12px 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    text-align: center;
    color: var(--ofuel-gray, #565552);
  }

  /* ---------- summary ---------- */
  .ofuel-bb__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 24px 28px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 32px;
    background: var(--bb-card-bg, #fff);
  }

  .ofuel-bb__summary-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .ofuel-bb__summary-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
  }

  .ofuel-bb__count {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__total {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-bb__progress {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__progress.is-met {
    color: var(--bb-accent, #f57379);
  }

  .ofuel-bb__bar {
    display: block;
    width: min(320px, 100%);
    height: 6px;
    border-radius: 9999px;
    background: var(--ofuel-ebb, #e6e4e2);
    overflow: hidden;
  }

  .ofuel-bb__bar-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: var(--bb-accent, #f57379);
    transform: scaleX(var(--bb-progress, 0));
    transform-origin: left center;
    transition: transform 0.25s ease;
  }

  .ofuel-bb__note {
    margin: 0;
    max-width: 46ch;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-bb__actions {
    display: flex;
    flex: none;
  }

  .ofuel-bb__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 8px 8px 24px;
    border: 0;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .ofuel-bb__cta[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .ofuel-bb__cta:focus-visible {
    outline: 2px solid var(--bb-accent, #f57379);
    outline-offset: 3px;
  }

  .ofuel-bb__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--bb-accent, #f57379);
    color: var(--ofuel-white, #fff);
    transition: transform 0.2s ease;
  }

  .ofuel-bb__cta-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .ofuel-bb.is-busy .ofuel-bb__cta-icon {
    animation: ofuel-bb-pulse 0.9s ease-in-out infinite;
  }

  @keyframes ofuel-bb-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45;
    }
  }

  .ofuel-bb__error {
    flex: 1 0 100%;
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    color: #b3261e;
  }

  @media (hover: hover) {
    .ofuel-bb__card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1);
    }

    .ofuel-bb__card--empty:hover {
      transform: none;
      box-shadow: none;
    }

    .ofuel-bb__step:hover:not([disabled]) {
      background: var(--bb-accent, #f57379);
    }

    .ofuel-bb__cta:hover:not([disabled]) {
      transform: translateY(-1px);
      opacity: 0.95;
    }

    .ofuel-bb__cta:hover:not([disabled]) .ofuel-bb__cta-icon {
      transform: translateX(3px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-bb__card,
    .ofuel-bb__cta,
    .ofuel-bb__cta-icon,
    .ofuel-bb__bar-fill,
    .ofuel-bb__step {
      transition: none;
    }

    .ofuel-bb.is-busy .ofuel-bb__cta-icon {
      animation: none;
    }
  }

  /*
    The reduced-motion hover overrides have to repeat the `:not([disabled])` of
    the rules they are cancelling. `.ofuel-bb__cta:hover` is one compound short
    of `.ofuel-bb__cta:hover:not([disabled])` and lost the cascade outright, so
    the CTA and its icon kept sliding under prefers-reduced-motion no matter
    what the reduce block said. Matching the selectors exactly and keeping this
    block after the hover block is what actually makes it win.
  */
  @media (hover: hover) and (prefers-reduced-motion: reduce) {
    .ofuel-bb__card:hover,
    .ofuel-bb__cta:hover:not([disabled]),
    .ofuel-bb__cta:hover:not([disabled]) .ofuel-bb__cta-icon {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-bb__inner {
      padding-block: 80px;
      gap: 40px;
    }

    .ofuel-bb__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
  }

  @media screen and (max-width: 749px) {
    /*
      Sticky summary. It is the last child of the inner flex column, so it
      sticks within the inner's padding box — it stays pinned to the bottom of
      the viewport for as long as any of the builder is on screen, then scrolls
      away with the section. Bleeding to the viewport edges reads as a bar
      rather than a card, so the radius and side borders are dropped here.
    */
    .ofuel-bb__summary {
      position: sticky;
      bottom: 0;
      z-index: 4;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
      margin-inline: calc(-1 * var(--bb-gutter));
      padding: 16px var(--bb-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
      border-radius: 0;
      border-inline: 0;
      border-bottom: 0;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
    }

    .ofuel-bb__actions {
      display: block;
    }

    .ofuel-bb__cta {
      width: 100%;
    }

    .ofuel-bb__note {
      max-width: none;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-bb__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:ofuel-bundle-builder */

/* START_SECTION:ofuel-buy-anchor (INDEX:47) */
.ofuel-buyanchor {
    background: var(--ba-bg, #f0eeeb);
  }

  .ofuel-buyanchor__inner {
    max-width: var(--ofuel-container, 1400px);
    margin-inline: auto;
    padding: clamp(20px, 3vw, 32px) var(--ofuel-container-pad, 24px);
    display: flex;
    justify-content: center;
  }

  .ofuel-buyanchor__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 24px;
    /*
      Pinned so this lands on the site's 52px exactly. Unlike the other CTAs this
      one is outlined, and without border-box the 1px border sits OUTSIDE the
      8 + 36 + 8 content box and makes it 54.
    */
    height: 52px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
    background: transparent;
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  @media (hover: hover) {
  .ofuel-buyanchor__link:hover {
      background: var(--ofuel-white, #fff);
      transform: translateY(-1px);
    }
}

  .ofuel-buyanchor__link:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-buyanchor__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 36px matches the site-standard button icon (ofuel-hero__btn-icon); at 32px
       this pill came out 50px tall against the 52px everything else uses. */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    flex: none;
    transition: transform 0.25s ease;
  }

  @media (hover: hover) {
  .ofuel-buyanchor__link:hover .ofuel-buyanchor__icon {
      transform: translateY(-2px);
    }
}

  .ofuel-buyanchor__icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /*
    The mobile sticky buy bar already covers this job on small screens, so the
    inline link would just be noise there.
  */
  @media screen and (max-width: 989px) {
    .ofuel-buyanchor {
      display: none;
    }
  }
/* END_SECTION:ofuel-buy-anchor */

/* START_SECTION:ofuel-c101-explained (INDEX:48) */
.ofuel-c101-explained {
    background: var(--ce-bg, #000);
  }

  .ofuel-c101-explained__inner {
    --ce-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--ce-gutter));
    margin-inline: auto;
    padding: 64px var(--ce-gutter);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .ofuel-c101-explained__eyebrow {
    margin: 0 0 20px;
    font-family: var(--ofuel-font);
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    /*
      Tracks the section's own text colour, exactly as the heading and body do.
      Without this the eyebrow inherited the global dark body colour and rendered
      near-black on the black band. Kept as var(--ce-fg) rather than a hardcoded
      cream so it stays correct if the section is ever set on a light background.

      No `opacity` here on purpose. This element carries .ofuel-reveal, and
      `.ofuel-reveal.ofuel-reveal--in { opacity: 1 }` is a two-class selector, so
      it outranks any single-class opacity rule — the old `opacity: .55` never
      actually applied once the element scrolled in. Full strength is what every
      other revealed eyebrow on the site already renders at. See the same trap
      documented in sections/ofuel-stockist-apply.liquid.
    */
    color: var(--ce-fg, #f0efeb);
  }

  .ofuel-c101-explained__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ce-fg, #f0efeb);
  }

  .ofuel-c101-explained__body {
    margin: 0;
    padding-top: 8px;
    max-width: 846px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--ce-fg, #f0efeb);
  }

  .ofuel-c101-explained__grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(240, 239, 235, 0.15);
    border-radius: 24px;
    overflow: hidden;
  }

  .ofuel-c101-explained__cell {
    display: flex;
    flex-direction: column;
    /* Number top, copy bottom, so the copy baselines line up across the row. */
    justify-content: space-between;
    gap: 24px;
    min-height: 288px;
    padding: 48px;
    background: var(--ce-bg, #000);
    transition: background-color 0.3s ease;
  }

  /*
    Nothing here moves, and that is the constraint rather than a preference: the
    grid draws its 1px hairlines by letting its own background show through a
    1px gap between opaque cells. Translating a cell even 2px would expose the
    seam below it and cover the one above, tearing the rule the design is built
    on. So the whole interaction is carried by the fill and the numeral.

    Mixing toward `--ce-fg` rather than a hardcoded white means the lift stays
    correct whichever way the section is themed.
  */
  @media (hover: hover) {
    .ofuel-c101-explained__cell:hover {
      background: color-mix(in srgb, var(--ce-bg, #000) 93%, var(--ce-fg, #f0efeb));
    }

    .ofuel-c101-explained__cell:hover .ofuel-c101-explained__num {
      opacity: 0.55;
    }
  }

  .ofuel-c101-explained__num {
    font-family: var(--ofuel-font);
    font-weight: 900;
    font-size: 96px;
    line-height: 1;
    color: #fff;
    opacity: 0.3;
    transition: opacity 0.3s ease;
  }

  .ofuel-c101-explained__cell-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-c101-explained__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.6px;
    color: var(--ce-fg, #f0efeb);
  }

  .ofuel-c101-explained__text {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ce-fg, #f0efeb);
    opacity: 0.7;
  }

  @media screen and (max-width: 989px) {
    .ofuel-c101-explained__inner {
      padding-block: 80px;
    }

    .ofuel-c101-explained__cell {
      padding: 36px;
      min-height: 0;
    }

    .ofuel-c101-explained__num {
      font-size: 72px;
    }

    .ofuel-c101-explained__title {
      font-size: 26px;
      line-height: 32px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-c101-explained__body {
      font-size: 17px;
      line-height: 26px;
    }

    .ofuel-c101-explained__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-c101-explained__cell {
      padding: 28px;
      gap: 16px;
    }

    .ofuel-c101-explained__num {
      font-size: 56px;
    }
  }
/* END_SECTION:ofuel-c101-explained */

/* START_SECTION:ofuel-c101-hero (INDEX:49) */
.ofuel-c101-hero {
    background: var(--ch-bg, #f0efeb);
  }

  /*
    box-sizing is border-box inside .ofuel-section, so the gutter has to be added
    on top of the 1400px Figma column or the content lands narrower than drawn.
  */
  .ofuel-c101-hero__inner {
    --ch-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--ch-gutter));
    margin-inline: auto;
    padding-inline: var(--ch-gutter);
    /* Header pills float over this section; never let the top pad fall under them. */
    padding-block: max(160px, 88px) 96px;
    display: flex;
    flex-direction: column;
    gap: 96px;
  }

  /*
    Figma measures this column at 768px, but its DM Sans renders at the 14 optical
    size and is noticeably narrower than the static faces the theme self-hosts —
    at 768px the 160px heading breaks into four lines instead of the drawn three.
    840px lands the same three lines Figma shows; the subheading keeps its 768px.
  */
  .ofuel-c101-hero__head {
    max-width: 840px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .ofuel-c101-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  /*
    160px display type. px in the clamp minimum on purpose — the theme root is
    62.5%, so a rem minimum would silently render at a tenth of the size.
  */
  .ofuel-c101-hero__heading {
    margin: 0;
    width: 100%;
    font-family: var(--ofuel-font);
    font-weight: 900;
    font-size: clamp(44px, 9.2vw, 160px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ofuel-black, #000);
    overflow-wrap: break-word;
  }

  /* Regular italic here, not the light cut the other page headings use. */
  .ofuel-c101-hero__em {
    font-weight: 400;
    font-style: italic;
  }

  .ofuel-c101-hero__sub {
    margin: 0;
    padding-top: 8px;
    max-width: 768px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-c101-hero__split {
    display: flex;
    align-items: center;
    gap: 48px;
  }

  .ofuel-c101-hero__media {
    flex: 1 1 0;
    min-width: 0;
    /* 676px circle — half the 1400 column less the 48px gap. */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ofuel-black, #000);
  }

  .ofuel-c101-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Landscape source; Figma pushes the crop right so the pile sits centred. */
    object-position: 63% center;
  }

  .ofuel-c101-hero__facts {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ofuel-c101-hero__formula-label {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-c101-hero__formula {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 1;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-hero__body {
    padding-top: 16px;
    max-width: 560px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-c101-hero__body > * {
    margin: 0;
  }

  .ofuel-c101-hero__body > * + * {
    margin-top: 24px;
  }

  .ofuel-c101-hero__cards {
    width: 100%;
    padding-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* Grid item, so the card inside can be full-height without the slot fighting it. */
  .ofuel-c101-hero__card-slot {
    display: grid;
  }

  .ofuel-c101-hero__card {
    display: flex;
    flex-direction: column;
    /*
      Left aligned, not centred. Both properties are needed: text-align handles
      the wrapped body copy, and align-items handles the flex children themselves
      — leaving align-items on `center` would keep the title and body boxes
      centred within the card even with ragged-right text inside them.
    */
    align-items: flex-start;
    gap: 4px;
    min-height: 140px;
    padding: 17px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    text-align: left;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s ease,
      box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
    The three cards land one after another once the facts column has arrived.
    Keyed off the parent's `--in` rather than carrying `.ofuel-reveal` each, so
    a card is never fading inside an already-fading ancestor — nested reveals
    multiply their opacities and read muddy for the first few frames.
  */
  @media (prefers-reduced-motion: no-preference) {
    .ofuel-c101-hero__card-slot {
      opacity: 0;
      transform: translateY(14px);
      transition:
        opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
      transition-delay: var(--card-delay, 0ms);
    }

    .ofuel-c101-hero__facts.ofuel-reveal--in .ofuel-c101-hero__card-slot {
      opacity: 1;
      transform: none;
    }
  }

  /*
    Restrained on purpose — these sit in the hero, next to the headline. The
    border carrying most of the change keeps the eye on the copy.
    Pointer-gated so it cannot latch on touch.
  */
  @media (hover: hover) {
    .ofuel-c101-hero__card:hover {
      transform: translateY(-3px);
      border-color: rgba(0, 0, 0, 0.32);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-c101-hero__card:hover {
      transform: none;
    }
  }

  /*
    Figma sets these on one nowrap line with 36px of leading. In a real 183px card
    they wrap, and 36px leading then reads as a gap — so the leading moves to
    padding, which keeps the single-line rhythm without stretching wrapped titles.
  */
  .ofuel-c101-hero__card-title {
    margin: 0;
    padding-top: 6px;
    font-family: var(--ofuel-font);
    font-weight: 900;
    font-size: 17px;
    line-height: 1.35;
    /*
      These are the tightest headings on the site — three cards across a half
      width column, at weight 900. 17px plus the shortened titles keeps all
      three on one line; balance is the safety net at intermediate widths.
    */
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-hero__card-body {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--ofuel-gray, #565552);
  }

  @media screen and (max-width: 989px) {
    .ofuel-c101-hero__inner {
      padding-block: max(112px, 88px) 72px;
      gap: 64px;
    }

    .ofuel-c101-hero__split {
      flex-direction: column;
      align-items: stretch;
      gap: 48px;
    }

    /* Vertical flex axis once stacked — a 0 basis would collapse the circle. */
    .ofuel-c101-hero__media,
    .ofuel-c101-hero__facts {
      flex: 0 0 auto;
    }

    .ofuel-c101-hero__media {
      align-self: center;
      width: min(520px, 86vw);
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-c101-hero__sub {
      font-size: 17px;
      line-height: 26px;
    }

    .ofuel-c101-hero__cards {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-c101-hero__card {
      min-height: 0;
    }
  }
/* END_SECTION:ofuel-c101-hero */

/* START_SECTION:ofuel-c101-matters (INDEX:50) */
.ofuel-c101-matters {
    background: var(--cm-bg, #f0efeb);
  }

  .ofuel-c101-matters__inner {
    --cm-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cm-gutter));
    margin-inline: auto;
    padding: 64px var(--cm-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-c101-matters__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-c101-matters__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-matters__heading {
    margin: 0;
    max-width: 672px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-matters__intro {
    margin: 0;
    max-width: 768px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-c101-matters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 32px;
  }

  .ofuel-c101-matters__cell {
    display: grid;
  }

  .ofuel-c101-matters__card {
    display: flex;
    flex-direction: column;
    /*
      Top-aligned, not space-between. Bottom-anchoring the copy baselined the
      last line of body text across the row, but it did so by pushing every
      heading to a different height — a five-line card sat its title well above
      a four-line one, so the row of headings read as ragged. The icon is a
      fixed 56px, so aligning from the top puts every heading on exactly the
      same line. The slack now collects at the bottom of the card, where uneven
      edges are far less noticeable than uneven headings.
    */
    justify-content: flex-start;
    gap: 24px;
    min-height: 380px;
    padding: 29px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  @media (hover: hover) {
  .ofuel-c101-matters__card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1);
    }
}

  /* The number sits on the same coral disc the glyph used to. */
  .ofuel-c101-matters__num {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.2px;
    color: var(--ofuel-black, #000);
    font-variant-numeric: tabular-nums;
  }

  .ofuel-c101-matters__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--cm-icon-bg, #f57379);
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-matters__icon svg,
  .ofuel-c101-matters__icon-img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .ofuel-c101-matters__card-body {
    display: flex;
    flex-direction: column;
    gap: 7.25px;
  }

  .ofuel-c101-matters__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /*
      22px rather than 24px pays for the wider column gap. The gap took ~6px off
      each card, which was enough to tip the longest single-line titles
      ("Memory and Cognition", "Strength and Training") onto a second line —
      exactly what the wider spacing was meant to avoid.
    */
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.44px;
    /*
      When a title genuinely is too long for one line, split it evenly instead
      of running the first line full and dropping a single orphan word beneath.
      Ignored by browsers without support, which just wrap as before.
    */
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-matters__text {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--ofuel-gray, #565552);
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-c101-matters__card {
      transition: none;
    }
  }

  @media screen and (max-width: 1199px) {
    .ofuel-c101-matters__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-c101-matters__inner {
      padding-block: 80px;
    }

    .ofuel-c101-matters__card {
      min-height: 0;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-c101-matters__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:ofuel-c101-matters */

/* START_SECTION:ofuel-c101-myths (INDEX:51) */
.ofuel-c101-myths {
    background: var(--cy-bg, #f0efeb);
  }

  /* Figma narrows this section's column to 1200px, not the usual 1400px. */
  .ofuel-c101-myths__inner {
    --cy-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(1200px + 2 * var(--cy-gutter));
    margin-inline: auto;
    padding: 64px var(--cy-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-c101-myths__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-c101-myths__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-myths__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-myths__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-c101-myths__intro {
    margin: 0;
    max-width: 640px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-c101-myths__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20.5px;
  }

  /*
    Container for the claim's type scale below. The longest myth has to fit the
    card, not the window, and those two stopped agreeing at middle widths.
  */
  .ofuel-c101-myths__cell {
    display: grid;
    container-type: inline-size;
  }

  .ofuel-c101-myths__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 32px rather than 40px gives the longest claim another 16px of line. */
    padding: 32px;
    border-radius: 24px;
    background: var(--cy-card-bg, #000);
  }

  .ofuel-c101-myths__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ofuel-c101-myths__num {
    font-family: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--cy-card-fg, #f0efeb);
    opacity: 0.6;
  }

  .ofuel-c101-myths__verdict {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--cy-card-fg, #f0efeb);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cy-card-fg, #f0efeb);
  }

  .ofuel-c101-myths__claim {
    margin: 0;
    padding-top: 4px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /*
      Sized against the card, not the window. The old `2.4vw` tracked the
      viewport while the two-column card tracked the container minus a gap, so
      between roughly 900px and 1200px the type outgrew the space it had to fit
      — which is why only the longest claim ("...people who go to the gym.")
      broke onto a second line while the five shorter ones held.

      The vw line is the fallback for browsers without container query units;
      the cqi line overrides it wherever they are supported.
    */
    font-size: clamp(18px, 2vw, 30px);
    font-size: clamp(18px, 4.35cqi, 30px);
    line-height: 1.25;
    letter-spacing: -0.6px;
    /* If a future claim is longer still, split it evenly rather than orphaning
       a word — a lone "gym." on line two is the worst version of wrapping. */
    text-wrap: balance;
    color: var(--cy-card-fg, #f0efeb);
  }

  .ofuel-c101-myths__text {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--cy-card-fg, #f0efeb);
    opacity: 0.8;
  }

  .ofuel-c101-myths__text > * {
    margin: 0;
  }

  .ofuel-c101-myths__text > * + * {
    margin-top: 26px;
  }

  /*
    Single column from 989px rather than 749px. Two columns below this put each
    card near 400px, and because the 64px of padding is fixed it takes a growing
    share of a shrinking card — the line the claim has left shrinks faster than
    the type does, so the longest one wrapped however the scale was tuned. Full
    width also suits these cards, which carry two paragraphs each.
  */
  @media screen and (max-width: 989px) {
    .ofuel-c101-myths__inner {
      padding-block: 80px;
    }

    .ofuel-c101-myths__grid {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 16px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-c101-myths__card {
      padding: 28px;
    }
  }
/* END_SECTION:ofuel-c101-myths */

/* START_SECTION:ofuel-c101-teaser (INDEX:52) */
.ofuel-c101t {
    background: var(--c101t-bg, #000);
    color: var(--c101t-fg, #f0efeb);
    padding-block: 64px;
    padding-inline: var(--ofuel-container-pad, 24px);
  }

  .ofuel-c101t__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
  }

  /* Heading left, supporting copy + CTA right — the prototype's 1.1fr / 0.9fr split. */
  .ofuel-c101t__top {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }

  /*
    No opacity on this wrapper. It previously carried 0.5 while the rule carried
    its own 0.4 — opacity compounds on descendants, so the rule rendered at an
    effective 0.2 and all but vanished on black. The label and the rule now each
    set their own, so neither is multiplied by the other.
  */
  .ofuel-c101t__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-family: var(--ofuel-font);
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }

  .ofuel-c101t__eyebrow-label {
    opacity: 0.5;
  }

  .ofuel-c101t__rule {
    display: block;
    width: 32px;
    height: 2px;
    background: currentColor;
    opacity: 0.55;
    border-radius: 1px;
    flex: none;
  }

  .ofuel-c101t__heading {
    margin: 0;
    /*
      Dawn's base.css sets `h2 { color: rgb(var(--color-foreground)) }`, which is
      a direct element rule and so beats the cream inherited from the section
      wrapper — the heading would render dark grey on black. `inherit` restores
      it and keeps the authorable Text colour setting in charge.
    */
    color: inherit;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /* px, not rem — the theme sets a 62.5% root, so 1rem is 10px here. */
    font-size: clamp(36px, 5.4vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  .ofuel-c101t__heading-em {
    font-style: italic;
    font-weight: 300;
  }

  .ofuel-c101t__body {
    margin: 0;
    max-width: 46ch;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 26px;
    opacity: 0.75;
  }

  .ofuel-c101t__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--c101t-fg, #f0efeb);
    color: var(--c101t-bg, #000);
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-c101t__cta:hover {
      transform: translateY(-2px);
      opacity: 0.95;
    }
}

  .ofuel-c101t__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    flex: none;
    transition: transform 0.3s ease;
  }

  @media (hover: hover) {
  .ofuel-c101t__cta:hover .ofuel-c101t__cta-icon {
      transform: translateX(4px);
    }
}

  .ofuel-c101t__cta-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-c101t__cta:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  /*
    Hairlines are drawn as per-cell borders rather than the prototype's 1px grid
    gap. The gap technique shows the divider colour through the rounded corners
    as curved slivers, because square cells can't fill a rounded container.
    Borders sit inside the clip, so the corners stay clean.
  */
  .ofuel-c101t__cards {
    list-style: none;
    margin: clamp(48px, 6vw, 80px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* number / title / body — the tracks each card subgrids onto. */
    grid-template-rows: repeat(3, auto);
    gap: 0;
    border: 1px solid var(--c101t-rule, rgba(240, 239, 235, 0.15));
    border-radius: 32px;
    overflow: hidden;
  }

  /* 4-up: a rule before every card except the first. */
  .ofuel-c101t__card + .ofuel-c101t__card {
    border-left: 1px solid var(--c101t-rule, rgba(240, 239, 235, 0.15));
  }

  /*
    Three shared rows — number, title, body — so the same element lines up across
    every card regardless of how long its neighbours' copy is.

    This used to be `flex-direction: column; justify-content: space-between`,
    which pinned the number to the top and the text block to the bottom. A card
    with a three-line body therefore pushed its title HIGHER than a card with a
    two-line body, and the row of headings stepped up and down across the four
    cards.

    Subgrid rather than simply switching to flex-start: flex-start aligns the
    titles (the number is always one line) but the BODIES still only align while
    every title happens to fit on one line. Sharing the parent's row tracks makes
    both rows align by construction, whatever the copy does later.
  */
  .ofuel-c101t__card {
    background: var(--c101t-bg, #000);
    padding: clamp(24px, 2.4vw, 32px);
    min-height: 160px;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    transition: background 0.5s ease;
  }

  /* Lets the title and body take part in the card's grid as their own rows —
     without it they are one block again and the alignment is lost. */
  .ofuel-c101t__card-text {
    display: contents;
  }

  @media (hover: hover) {
  .ofuel-c101t__card:hover {
      background: rgba(240, 239, 235, 0.05);
    }
}

  .ofuel-c101t__num {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.16em;
    opacity: 0.5;
  }

  .ofuel-c101t__card-title {
    margin: 24px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
  }

  .ofuel-c101t__card-body {
    margin: 6px 0 0;
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 19px;
    opacity: 0.6;
  }

  @media screen and (max-width: 989px) {
    .ofuel-c101t__top {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .ofuel-c101t__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 2-up: vertical rule down the middle, horizontal rule between rows. */
    .ofuel-c101t__card + .ofuel-c101t__card {
      border-left: 0;
    }

    .ofuel-c101t__card:nth-child(even) {
      border-left: 1px solid var(--c101t-rule, rgba(240, 239, 235, 0.15));
    }

    .ofuel-c101t__card:nth-child(n + 3) {
      border-top: 1px solid var(--c101t-rule, rgba(240, 239, 235, 0.15));
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-c101t__cards {
      grid-template-columns: minmax(0, 1fr);
      border-radius: 24px;
    }

    /* Stacked: horizontal rules only. */
    .ofuel-c101t__card:nth-child(even),
    .ofuel-c101t__card + .ofuel-c101t__card {
      border-left: 0;
    }

    .ofuel-c101t__card + .ofuel-c101t__card {
      border-top: 1px solid var(--c101t-rule, rgba(240, 239, 235, 0.15));
    }

    .ofuel-c101t__card {
      min-height: 0;
      gap: 16px;
    }
  }
/* END_SECTION:ofuel-c101-teaser */

/* START_SECTION:ofuel-c101-why-women (INDEX:53) */
.ofuel-c101-women {
    background: var(--cw-bg, #fff);
  }

  .ofuel-c101-women__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .ofuel-c101-women__media {
    position: relative;
    /* Only a floor — the text column decides the real height. */
    min-height: 480px;
    overflow: hidden;
    background: var(--ofuel-coral, #f57379);
  }

  /*
    Fade only — the rise is cancelled deliberately.

    This panel is an absolutely-filled image at inset:0 in a stretched grid column,
    so .ofuel-reveal's 22px translateY would drag a 22px band of the section
    background across a full-bleed edge. ofuel-stockist-spaces.liquid:383-390
    documents the same failure and solves it with this identical two-selector
    override; this reuses that fix rather than inventing another.

    Both selectors are needed: the first kills the resting transform, the second
    outranks .ofuel-reveal--in so the landed state matches.
  */
  .ofuel-c101-women__media.ofuel-reveal,
  .ofuel-c101-women__media.ofuel-reveal.ofuel-reveal--in {
    transform: none;
  }

  .ofuel-c101-women__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ofuel-c101-women__content {
    display: flex;
    align-items: center;
    padding: 64px clamp(20px, 4vw, 56px);
  }

  .ofuel-c101-women__text {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
  }

  .ofuel-c101-women__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-women__heading {
    margin: 0;
    max-width: 589px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(32px, 3.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-c101-women__body {
    max-width: 554px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-c101-women__body > * {
    margin: 0;
  }

  .ofuel-c101-women__body > * + * {
    margin-top: 24px;
  }

  /* Light italic, set solid — line-height matches the font size in the design. */
  .ofuel-c101-women__quote {
    margin: 12px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(22px, 2.2vw, 33px);
    line-height: 1;
    letter-spacing: -0.96px;
    color: var(--cw-quote, #f57379);
  }

  .ofuel-c101-women__quote > * {
    margin: 0;
  }

  @media screen and (max-width: 989px) {
    .ofuel-c101-women__split {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-c101-women__media {
      min-height: 0;
      /* Stacked, the artwork reads better as a wide band than a tall panel. */
      aspect-ratio: 4 / 3;
    }

    .ofuel-c101-women__content {
      padding: 80px var(--ofuel-container-pad);
    }

    .ofuel-c101-women__text {
      max-width: 640px;
      margin-inline: auto;
    }
  }
/* END_SECTION:ofuel-c101-why-women */

/* START_SECTION:ofuel-collection-grid (INDEX:54) */
.ofuel-cgrid {
    background: var(--cg-bg, #f0efeb);
  }

  .ofuel-cgrid__inner {
    --cg-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cg-gutter));
    margin-inline: auto;
    padding: 64px var(--cg-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  /* ---------------------------------------------------------------- head */

  .ofuel-cgrid__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* ---------------------------------------------------------------- HERO --- */

  .ofuel-cgrid__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    padding: clamp(56px, 5vw, 72px) var(--ofuel-container-pad) clamp(64px, 8vw, 104px);
  }

  .ofuel-cgrid__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  /*
    Low opacity plus a scrim, rather than the photo carrying the section. The
    shop art is bright and high-contrast; at full strength a display heading
    over it is unreadable no matter where it is placed.
  */
  .ofuel-cgrid__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.28;
  }

  .ofuel-cgrid__hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }

  .ofuel-cgrid__hero-inner {
    width: 100%;
    max-width: var(--ofuel-container);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  /* Inverted for the dark ground — the outlined black pill would vanish. */
  .ofuel-cgrid__hero .ofuel-cgrid__eyebrow {
    border-color: rgba(240, 239, 235, 0.5);
    background: rgba(240, 239, 235, 0.1);
    color: var(--ofuel-cream, #f0efeb);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .ofuel-cgrid__hero .ofuel-cgrid__heading {
    max-width: none;
    font-size: clamp(56px, 11vw, 148px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-cgrid__heading-em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-cgrid__hero .ofuel-cgrid__intro {
    max-width: 60ch;
    color: rgba(240, 239, 235, 0.8);
    font-size: 16px;
    line-height: 26px;
  }

  .ofuel-cgrid__meta {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(240, 239, 235, 0.7);
  }

  @media screen and (max-width: 749px) {
    .ofuel-cgrid__hero {
      padding-block: 64px 56px;
    }

    .ofuel-cgrid__meta {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      letter-spacing: 0.12em;
    }
  }

  .ofuel-cgrid__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__heading {
    margin: 0;
    max-width: 872px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__intro {
    max-width: 768px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  /* collection.description is rich text and arrives with its own <p>s. */
  .ofuel-cgrid__intro > * {
    margin: 0;
  }

  .ofuel-cgrid__intro > * + * {
    margin-top: 12px;
  }

  .ofuel-cgrid__intro a {
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__count {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.26px;
    color: var(--ofuel-gray, #565552);
  }

  /* ---------------------------------------------------------------- grid */

  /*
    Three across, not four. The catalogue is small (5 products), and at four the
    last row was a single orphaned card; three gives 3 + 2. It also buys each
    card enough width for the photo to carry the tile rather than the label —
    which is the point of the design this follows.
  */
  .ofuel-cgrid__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 56px;
  }

  /* The reveal element. Never give this one a transform of its own. */
  .ofuel-cgrid__cell {
    display: grid;
  }

  .ofuel-cgrid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 32px;
    background: var(--cg-card, #fff);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  /* ---------------------------------------------------------------- media */

  .ofuel-cgrid__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--cg-ratio, 1 / 1);
    background: var(--cg-media-bg, #f0efeb);
    overflow: hidden;
  }

  /*
    An <img> is a replaced element: absolute + inset alone leaves width/height
    resolving to the INTRINSIC size, not the inset box. The explicit 100%s are
    load-bearing, and border-box keeps the contain-mode padding inside them.
  */
  .ofuel-cgrid__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--cg-pad, 0px);
    object-fit: var(--cg-fit, cover);
    object-position: center;
    transition: opacity 0.45s ease;
  }

  .ofuel-cgrid__img--primary {
    opacity: 1;
  }

  /*
    The hover image SLIDES DOWN over the base rather than cross-fading. It sits
    fully above the frame (translateY(-100%)) and drops into place on hover; the
    media wrapper is overflow:hidden, so it is invisible until it moves.

    It stays fully opaque throughout — the point is a curtain covering the base
    image, not a dissolve. Opacity is left at 1 and only `transform` animates,
    which is also the cheap property to animate (compositor only, no repaint).

    z-index 1 puts it above the base image, which is its sibling in the same
    absolutely-positioned stack.
  */
  .ofuel-cgrid__img--hover {
    z-index: 1;
    opacity: 1;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* ---------------------------------------------------- hero notice */

  .ofuel-cgrid__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
  }

  .ofuel-cgrid__notice-text {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-cgrid__notice-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 8px 0 22px;
    border-radius: 9999px;
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  .ofuel-cgrid__notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--cg-accent, #f57379);
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__notice-icon svg { width: 16px; height: 16px; }

  @media (hover: hover) {
    .ofuel-cgrid__notice-cta:hover { opacity: 0.9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-cgrid__notice-cta { transition: none; }
  }

  /* ------------------------------------------------------- placeholder */

  .ofuel-cgrid__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(115% 90% at 50% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 62%),
      var(--cg-media-bg, #f0efeb);
  }

  .ofuel-cgrid__ph-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .ofuel-cgrid__ph-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 1px solid var(--cg-accent, #f57379);
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.68px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__ph-mark svg {
    display: block;
    width: 30px;
    height: 30px;
  }

  .ofuel-cgrid__ph-label {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  /* ---------------------------------------------------------------- badge */

  .ofuel-cgrid__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 7px 14px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ofuel-cgrid__badge--sold {
    background: var(--ofuel-black, #000);
    color: var(--ofuel-white, #fff);
  }

  .ofuel-cgrid__badge--sale {
    background: var(--cg-accent, #f57379);
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__card--sold .ofuel-cgrid__media {
    opacity: 0.68;
  }

  /* ---------------------------------------------------------------- body */

  .ofuel-cgrid__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 24px;
  }

  /*
    Hover peek. Pointer devices only: on touch there is no hover, so it would
    either never appear or (worse) stick after a tap and sit over the photo.
    Motion is gated separately so reduced-motion still gets the fade.
  */
  .ofuel-cgrid__peek {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
  }

  @media (hover: hover) {
    .ofuel-cgrid__peek {
      display: flex;
      opacity: 0;
      transform: translateY(8px);
    }

    .ofuel-cgrid__card:hover .ofuel-cgrid__peek,
    .ofuel-cgrid__card:focus-within .ofuel-cgrid__peek {
      opacity: 1;
      transform: none;
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ofuel-cgrid__peek {
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
  }

  .ofuel-cgrid__peek-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 9999px;
    background: var(--ofuel-white, #fff);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  .ofuel-cgrid__peek-pill svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .ofuel-cgrid__tagline {
    margin: 6px 0 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
    /*
      Shown in full — no line clamp. Cards in a row stay level because the grid
      stretches every cell to the tallest, and .ofuel-cgrid__foot is pinned to
      the bottom with margin-top: auto, so the price and Add button still line
      up across the row however many lines the tagline runs to.
    */
    text-wrap: pretty;
  }

  .ofuel-cgrid__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__link {
    color: var(--ofuel-black, #000);
    text-decoration: none;
  }

  /* Stretched link: one link in the a11y tree, whole card clickable. */
  .ofuel-cgrid__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ofuel-cgrid__foot {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ofuel-cgrid__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--ofuel-black, #000);
  }

  /*
    "TBC" sits where a rand figure would. It is lighter and letter-spaced so it
    reads as a status rather than as a number, but keeps the price line's height
    so cards in a row still align along their footer.
  */
  .ofuel-cgrid__price-tbc {
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cgrid__price-from {
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cgrid__price-was {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-decoration: line-through;
    color: var(--ofuel-gray, #565552);
  }

  /* ---------------------------------------------------------------- cta */

  .ofuel-cgrid__add {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 12px 18px;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--ofuel-white, #fff);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .ofuel-cgrid__add--ghost {
    background: transparent;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__add--done {
    background: var(--cg-accent, #f57379);
    border-color: var(--cg-accent, #f57379);
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__add[disabled] {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--ofuel-gray, #565552);
    cursor: not-allowed;
  }

  .ofuel-cgrid__add:focus-visible {
    outline: 2px solid var(--ofuel-black, #000);
    outline-offset: 2px;
  }

  .ofuel-cgrid__link:focus-visible {
    outline: 2px solid var(--ofuel-black, #000);
    outline-offset: 3px;
  }

  /* ---------------------------------------------------------------- empty */

  .ofuel-cgrid__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 32px;
    background: var(--cg-card, #fff);
    padding: clamp(32px, 6vw, 72px);
  }

  .ofuel-cgrid__empty-heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.68px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cgrid__empty-body {
    margin: 0;
    max-width: 560px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cgrid__empty-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ofuel-white, #fff);
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  /* ---------------------------------------------------------------- pager */

  .ofuel-cgrid__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }

  .ofuel-cgrid__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 9999px;
    background: transparent;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    color: var(--ofuel-black, #000);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  .ofuel-cgrid__page svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .ofuel-cgrid__page--current {
    background: var(--ofuel-black, #000);
    border-color: var(--ofuel-black, #000);
    color: var(--ofuel-white, #fff);
  }

  .ofuel-cgrid__page--gap {
    border-color: transparent;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cgrid__page--off {
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.25);
  }

  .ofuel-cgrid__page:focus-visible {
    outline: 2px solid var(--ofuel-black, #000);
    outline-offset: 2px;
  }

  /* ---------------------------------------------------------------- hover */

  @media (hover: hover) {
    .ofuel-cgrid__card:hover {
      transform: translateY(-6px);
      border-color: rgba(0, 0, 0, 0.14);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
    }

    /* Crossfade. Opacity only — nothing here moves or scales. */
    .ofuel-cgrid__card:hover .ofuel-cgrid__img--primary {
      opacity: 0;
    }

    .ofuel-cgrid__card:hover .ofuel-cgrid__img--hover,
    /* Keyboard users get it too — the card's link is what receives focus. */
    .ofuel-cgrid__card:focus-within .ofuel-cgrid__img--hover {
      transform: translateY(0);
    }

    .ofuel-cgrid__add:hover {
      background: var(--cg-accent, #f57379);
      border-color: var(--cg-accent, #f57379);
      color: var(--ofuel-black, #000);
    }

    .ofuel-cgrid__add[disabled]:hover {
      background: transparent;
      border-color: rgba(0, 0, 0, 0.18);
      color: var(--ofuel-gray, #565552);
    }

    .ofuel-cgrid__empty-link:hover {
      background: var(--cg-accent, #f57379);
      color: var(--ofuel-black, #000);
    }

    .ofuel-cgrid__page:hover {
      border-color: var(--ofuel-black, #000);
    }

    .ofuel-cgrid__page--current:hover {
      background: var(--ofuel-black, #000);
      color: var(--ofuel-white, #fff);
    }

    .ofuel-cgrid__page--off:hover,
    .ofuel-cgrid__page--gap:hover {
      border-color: rgba(0, 0, 0, 0.08);
    }
  }

  /* ------------------------------------------------------ reduced motion */

  @media (prefers-reduced-motion: reduce) {
    .ofuel-cgrid__card,
    .ofuel-cgrid__img,
    .ofuel-cgrid__add,
    .ofuel-cgrid__empty-link,
    .ofuel-cgrid__page {
      transition: none;
    }
  }

  /*
    The lift cancel has to stay behind BOTH gates. Written under
    prefers-reduced-motion alone it is still a bare :hover rule, which is the
    exact shape that latches open on a touch tap.
  */
  @media (hover: hover) and (prefers-reduced-motion: reduce) {
    .ofuel-cgrid__card:hover {
      transform: none;
    }
  }

  /* ---------------------------------------------------------- responsive */

  {%- comment -%}
    The 1199px step used to drop 4 -> 3. The base is 3 now, so this tier only
    tightens the gutters; the column change happens at 989px instead.
  {%- endcomment -%}
  @media screen and (max-width: 1199px) {
    .ofuel-cgrid__grid {
      column-gap: 24px;
      row-gap: 44px;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-cgrid__inner {
      padding-block: 80px;
      gap: 40px;
    }

    .ofuel-cgrid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 20px;
      row-gap: 32px;
    }

    .ofuel-cgrid__card {
      border-radius: 26px;
    }

    .ofuel-cgrid__body {
      padding: 18px 18px 20px;
    }

    .ofuel-cgrid__ph-mark {
      width: 68px;
      height: 68px;
      font-size: 28px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-cgrid__title {
      font-size: 16px;
      line-height: 22px;
    }

    .ofuel-cgrid__add {
      /*
        Was 42px here against 46px on desktop — the control shrank at exactly the
        width where it is tapped rather than clicked. 44px is the tap floor; the
        reduced padding/type that make it fit a narrow card are kept.
      */
      min-height: 44px;
      padding: 10px 14px;
      font-size: 12px;
      letter-spacing: 0.36px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-cgrid__grid {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 24px;
    }

    .ofuel-cgrid__card {
      border-radius: 32px;
    }

    .ofuel-cgrid__title {
      font-size: 18px;
      line-height: 24px;
    }
  }
/* END_SECTION:ofuel-collection-grid */

/* START_SECTION:ofuel-comp-dates (INDEX:55) */
.ofuel-comp-dates {
    background: var(--cx-bg, #fff);
  }

  .ofuel-comp-dates__inner {
    --cx-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cx-gutter));
    margin-inline: auto;
    padding: 64px var(--cx-gutter);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 48px;
    align-items: start;
  }

  .ofuel-comp-dates__head {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-comp-dates__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-dates__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    /* Dawn paints bare h2 with --color-foreground, so state the colour outright. */
    color: var(--ofuel-black, #000);
    text-wrap: balance;
  }

  .ofuel-comp-dates__intro {
    margin: 0;
    max-width: 46ch;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-comp-dates__list {
    grid-column: span 8;
    /* Dawn indents ol/ul; class selectors outrank its element rules. */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* No header column rendered, so the timeline takes the whole row. */
  .ofuel-comp-dates__list--full {
    grid-column: span 12;
  }

  .ofuel-comp-dates__item {
    display: block;
  }

  .ofuel-comp-dates__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 4px;
    align-items: baseline;
    padding-block: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  /*
    The first row sits flush with the top of the eyebrow pill opposite it, and the
    last row drops its rule so the hairline does not sit a bare 112px above the
    next section's own edge — a rule against section padding reads as a stray line
    rather than a divider between rows.
  */
  .ofuel-comp-dates__item:first-child .ofuel-comp-dates__row {
    padding-top: 0;
  }

  .ofuel-comp-dates__item:last-child .ofuel-comp-dates__row {
    padding-bottom: 0;
    border-bottom: 0;
  }

  /*
    Explicit start lines, not bare spans. Each of the three cells is optional,
    and with auto-placement a row whose date was left blank slid its title into
    column 1 and its note into column 5 — that one row then read as misaligned
    against every other row in the list. Naming the line each cell starts on
    keeps the three columns registered down the whole timeline no matter which
    cells a given row fills.
  */
  .ofuel-comp-dates__date {
    grid-column: 1 / span 3;
    display: block;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.1px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-dates__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    color: var(--ofuel-coral, #f57379);
    transition: color 0.18s ease;
  }

  .ofuel-comp-dates__title {
    grid-column: 4 / span 4;
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 26px;
    letter-spacing: -0.4px;
    color: var(--ofuel-black, #000);
    text-wrap: balance;
  }

  .ofuel-comp-dates__note {
    grid-column: 8 / span 5;
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--ofuel-gray, #565552);
  }

  @media (hover: hover) {
    .ofuel-comp-dates__row:hover .ofuel-comp-dates__icon {
      color: var(--ofuel-black, #000);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-dates__icon {
      transition: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-comp-dates__inner {
      /*
        Collapse to one column. Left as a 12-column grid, the 11 column gaps
        stayed in the layout as a minimum width the viewport could not satisfy,
        and the section pushed the page sideways.
      */
      grid-template-columns: minmax(0, 1fr);
      padding-block: 80px;
      row-gap: 40px;
    }

    /*
      `1 / -1`, not `span 12` — span 12 regenerates twelve implicit tracks (and
      their gaps) even after the template above is collapsed, which would undo
      the fix. `1 / -1` spans whatever tracks actually exist.
    */
    .ofuel-comp-dates__head,
    .ofuel-comp-dates__list {
      grid-column: 1 / -1;
    }

    .ofuel-comp-dates__intro {
      max-width: 62ch;
    }
  }

  @media screen and (max-width: 749px) {
    /*
      Stack date, then title, then note. The row stays a grid so the hairline is
      still drawn by the row itself and survives the stack; only the tracks
      collapse to one column.
    */
    .ofuel-comp-dates__row {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 6px;
      padding-block: 22px;
    }

    /* Reset the explicit line placement above, which would otherwise point at
       tracks 4 and 8 that no longer exist in a single-column row. */
    .ofuel-comp-dates__date,
    .ofuel-comp-dates__title,
    .ofuel-comp-dates__note {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:ofuel-comp-dates */

/* START_SECTION:ofuel-comp-hero (INDEX:56) */
.ofuel-comp-hero {
    background: var(--cx-bg, #f0efeb);
    overflow: hidden;
  }

  /*
    box-sizing is border-box inside .ofuel-section, so the gutter is added on top
    of the 1400px content column or the text lands narrower than drawn. The block
    padding is the house 112px at the bottom; the top is opened up because the
    floating header pills sit over this hero, matching ofuel-why-hero.
  */
  .ofuel-comp-hero__inner {
    --cx-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cx-gutter));
    margin-inline: auto;
    padding: 160px var(--cx-gutter) 112px;
    display: flex;
    /* Bottom-aligned columns, as drawn — the copy block overflows upward. */
    align-items: flex-end;
    gap: 40px;
  }

  .ofuel-comp-hero__content {
    flex: 7 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-comp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  /*
    Display type. px in the clamp minimum on purpose — the theme root is 62.5%,
    so a rem minimum would silently render at a tenth of the intended size.
    The colour is explicit: Dawn styles headings to its own foreground token.
  */
  .ofuel-comp-hero__heading {
    margin: 0;
    width: 100%;
    font-family: var(--ofuel-font);
    font-weight: 900;
    font-size: clamp(48px, 9vw, 128px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ofuel-black, #000);
    overflow-wrap: break-word;
  }

  .ofuel-comp-hero__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-comp-hero__body {
    width: 100%;
    max-width: 576px;
    padding-top: 8px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-comp-hero__body > * {
    margin: 0;
  }

  .ofuel-comp-hero__body > * + * {
    margin-top: 24px;
  }

  .ofuel-comp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
  }

  .ofuel-comp-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border-radius: 9999px;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  /* 8px right pad so the 36px arrow chip sits flush inside the filled pill. */
  .ofuel-comp-hero__btn--primary {
    padding: 8px 8px 8px 24px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-comp-hero__btn--secondary {
    padding: 12px 24px;
    border: 1px solid var(--ofuel-black, #000);
    background: transparent;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-hero__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    transition: transform 0.3s ease;
  }

  .ofuel-comp-hero__btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .ofuel-comp-hero__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-comp-hero__media {
    flex: 5 1 0;
    min-width: 0;
    max-width: 560px;
  }

  .ofuel-comp-hero__card {
    position: relative;
    /* Square frame, as drawn. */
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ofuel-white, #fff);
    /* Keeps the stacked decoration from interleaving with anything outside. */
    isolation: isolate;
  }

  /* Coral-tinted disc. Pseudo-element, never an empty <div> (see markup note). */
  .ofuel-comp-hero__card::before {
    content: '';
    position: absolute;
    inset: 10%;
    z-index: 0;
    border-radius: 50%;
    background: #fcd5d7;
    background: color-mix(in oklab, var(--ofuel-coral, #f57379) 30%, #fff);
  }

  /*
    The rotating ring sits a little outside the disc so it reads as a separate
    band. Dashed rather than solid: a uniform solid circle is rotationally
    symmetric, so spinning it would produce no visible movement at all.
  */
  .ofuel-comp-hero__card::after {
    content: '';
    position: absolute;
    inset: 6%;
    z-index: 1;
    border-radius: 50%;
    border: 1px dashed rgba(245, 115, 121, 0.55);
    animation: ofuel-comp-hero-spin 48s linear infinite;
  }

  /*
    Circular crop rather than a floating cut-out. The source art is a full
    lifestyle photograph with its own background, not a transparent PNG — laid
    over the coral disc as a rectangle it covered the disc entirely and read as a
    photo pasted on a circle. Clipping it into the disc keeps the composition:
    the coral shows as a rim, and the dashed ring at inset 6% still orbits
    outside the image.

    Swap back to the old contain/drop-shadow treatment only if a genuinely
    transparent product render replaces this.
  */
  /*
    Explicit width/height, not `inset` alone. An <img> is a replaced element, so
    `width/height: auto` resolves to the file's intrinsic size rather than
    stretching to the inset box — the 1122x1402 source came out taller than the
    card and spilled past the bottom edge. Equal percentages also guarantee a
    true circle rather than an ellipse.
  */
  /*
    The circle moved off the <img> and onto this frame so it can clip the hover
    image while that sits above the viewport of the circle. Same geometry the
    image used to carry (13% inset, 74% square), so nothing shifts.
  */
  .ofuel-comp-hero__frame {
    position: absolute;
    top: 13%;
    left: 13%;
    z-index: 2;
    width: 74%;
    height: 74%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.15);
  }

  .ofuel-comp-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /*
    Slides down over the base on hover, matching the shop-all product cards.
    Parked fully above the frame and clipped by it; only `transform` animates.
  */
  .ofuel-comp-hero__img--hover {
    z-index: 1;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @media (hover: hover) {
    .ofuel-comp-hero__card:hover .ofuel-comp-hero__img--hover {
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-hero__img--hover {
      transition: none;
    }
  }

  .ofuel-comp-hero__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    background: var(--ofuel-white, #fff);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  @keyframes ofuel-comp-hero-spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* Hover gated so it can never latch on a touch device. */
  @media (hover: hover) {
    .ofuel-comp-hero__btn:hover {
      transform: translateY(-1px);
    }

    .ofuel-comp-hero__btn:hover .ofuel-comp-hero__btn-icon {
      transform: translateX(3px);
    }

    .ofuel-comp-hero__btn--secondary:hover {
      background: var(--ofuel-black, #000);
      color: var(--ofuel-cream, #f0efeb);
    }
  }

  /* Colour feedback survives; movement does not. Ordered after the hover block. */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-hero__btn,
    .ofuel-comp-hero__btn-icon {
      transition: none;
    }

    .ofuel-comp-hero__card::after {
      animation: none;
    }
  }

  /*
    The movement override is a :hover rule in its own right, so it carries the
    same `hover: hover` gate as the block it cancels — an ungated :hover can
    latch on a touch device after a tap and stay stuck.
  */
  @media (prefers-reduced-motion: reduce) and (hover: hover) {
    .ofuel-comp-hero__btn:hover,
    .ofuel-comp-hero__btn:hover .ofuel-comp-hero__btn-icon {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-comp-hero__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 48px;
      padding-block: 112px 80px;
    }

    /*
      Stacked, the flex axis is vertical — leaving `flex-basis: 0` here would
      hand the media a 0px height and the prize card would vanish.
    */
    .ofuel-comp-hero__content,
    .ofuel-comp-hero__media {
      flex: 0 0 auto;
    }

    .ofuel-comp-hero__media {
      width: 100%;
      max-width: 520px;
      align-self: center;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-comp-hero__content {
      gap: 20px;
    }

    .ofuel-comp-hero__body {
      font-size: 17px;
      line-height: 27px;
    }

    .ofuel-comp-hero__badge {
      top: 16px;
      left: 16px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-comp-hero__btn--primary {
      padding-left: 20px;
    }

    .ofuel-comp-hero__btn--secondary {
      padding-inline: 20px;
    }
  }
/* END_SECTION:ofuel-comp-hero */

/* START_SECTION:ofuel-comp-live (INDEX:57) */
.ofuel-comp-live {
    background: var(--cl-bg, #000000);
  }

  .ofuel-comp-live__inner {
    --cl-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cl-gutter));
    margin-inline: auto;
    padding: 64px var(--cl-gutter);
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .ofuel-comp-live__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* ---------- Status row ---------- */

  .ofuel-comp-live__status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 2.88px;
    text-transform: uppercase;
  }

  .ofuel-comp-live__dot {
    position: relative;
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
  }

  /*
    ::before is the halo and ::after is the solid core, in that order, because
    pseudo-elements paint in document order — the core has to come second or the
    expanding halo would wash over it on every cycle. Putting the core on the
    parent's own background would not work either: a parent background paints
    below both of its pseudo-elements.
  */
  .ofuel-comp-live__dot::before,
  .ofuel-comp-live__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--cl-accent, #f57379);
  }

  .ofuel-comp-live__dot::before {
    opacity: 0.75;
    animation: ofuel-comp-live-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes ofuel-comp-live-ping {
    0% {
      transform: scale(1);
      opacity: 0.75;
    }

    75%,
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  .ofuel-comp-live__status-label {
    /*
      Muted via color-mix rather than opacity. The row is already an
      .ofuel-reveal target, and stacking opacity on top of the reveal's own
      opacity compounds into a dimmer label than intended.
    */
    color: rgba(240, 239, 235, 0.8);
    color: color-mix(in srgb, var(--cl-fg, #f0efeb) 80%, transparent);
  }

  /* ---------- Name ---------- */

  .ofuel-comp-live__name {
    margin: 0;
    max-width: 1040px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 0.95;
    /*
      Tracking is set in em, not px, because this heading spans 40px to 80px.
      A fixed -1.2px that reads correctly at 80px is far too tight at 40px.
    */
    letter-spacing: -0.03em;
    text-wrap: balance;
    /* Dawn sets `h2 { color: rgb(var(--color-foreground)) }`, which would drop
       this to dark grey on a black band. Always state the colour. */
    color: var(--cl-fg, #f0efeb);
  }

  .ofuel-comp-live__blurb {
    margin: 0;
    max-width: 720px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: rgba(240, 239, 235, 0.78);
    color: color-mix(in srgb, var(--cl-fg, #f0efeb) 78%, transparent);
  }

  /* ---------- Stat cards ---------- */

  .ofuel-comp-live__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }

  /*
    The reveal wrapper and the card are separate elements on purpose. The global
    observer animates transform on .ofuel-reveal, so any transform of ours on
    the same node would overwrite it; the card owns the hover treatment instead.
  */
  .ofuel-comp-live__cell {
    display: grid;
  }

  .ofuel-comp-live__stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 28px;
    border: 1px solid rgba(240, 239, 235, 0.15);
    border-color: color-mix(in srgb, var(--cl-fg, #f0efeb) 15%, transparent);
    border-radius: 20px;
    background: rgba(240, 239, 235, 0.05);
    background: color-mix(in srgb, var(--cl-fg, #f0efeb) 5%, transparent);
    transition: border-color 0.18s ease, background-color 0.18s ease;
  }

  .ofuel-comp-live__stat-key {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(240, 239, 235, 0.6);
    color: color-mix(in srgb, var(--cl-fg, #f0efeb) 60%, transparent);
  }

  .ofuel-comp-live__stat-value {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-wrap: balance;
    color: var(--cl-fg, #f0efeb);
  }

  @media (hover: hover) {
    .ofuel-comp-live__stat:hover {
      border-color: rgba(240, 239, 235, 0.32);
      border-color: color-mix(in srgb, var(--cl-fg, #f0efeb) 32%, transparent);
      background: rgba(240, 239, 235, 0.09);
      background: color-mix(in srgb, var(--cl-fg, #f0efeb) 9%, transparent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-live__stat {
      transition: none;
    }

    /*
      Drop the pulse but keep the halo — a static ring still reads as "live",
      which is the only job this dot has.
    */
    .ofuel-comp-live__dot::before {
      animation: none;
      transform: scale(1.9);
      opacity: 0.28;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-comp-live__inner {
      padding-block: 80px;
      gap: 48px;
    }

    .ofuel-comp-live__blurb {
      font-size: 16px;
      line-height: 28px;
    }

    .ofuel-comp-live__stat {
      padding: 24px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-comp-live__stats {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-comp-live__name {
      letter-spacing: -0.02em;
    }
  }
/* END_SECTION:ofuel-comp-live */

/* START_SECTION:ofuel-comp-prizes (INDEX:58) */
.ofuel-comp-prizes {
    background: var(--cx-bg, #f0efeb);
  }

  .ofuel-comp-prizes__inner {
    --cx-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cx-gutter));
    margin-inline: auto;
    padding: 64px var(--cx-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-comp-prizes__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-comp-prizes__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-prizes__heading {
    margin: 0;
    max-width: 672px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    /* Dawn paints bare h2 with --color-foreground; state the colour or it goes grey. */
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-prizes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }

  /*
    The cell is the stagger carrier only. `display: grid` makes the card stretch to the
    full height of the tallest card in the row, which is what lets the Value row baseline
    across all three regardless of how long each description runs.
  */
  .ofuel-comp-prizes__cell {
    display: grid;
  }

  .ofuel-comp-prizes__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ofuel-white, #fff);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .ofuel-comp-prizes__media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cx-panel, #fde0e2);
  }

  /*
    Fills the panel rather than floating inside it. The prize art is lifestyle
    photography with its own background, so `contain` left a hard-edged rectangle
    sitting on the coral panel. `cover` makes the photo the panel; the coral tint
    behind it still shows for any card whose image is missing or transparent.
  */
  .ofuel-comp-prizes__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .ofuel-comp-prizes__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    max-width: calc(100% - 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 6px 13px;
    background: var(--ofuel-white, #fff);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    white-space: nowrap;
    /* Long tags ("Grand prize · 4 winners") clip rather than wrap the pill onto two lines. */
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-prizes__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 28px;
  }

  .ofuel-comp-prizes__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.6px;
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  /*
    margin-bottom here is the minimum gap; the auto margin on the Value row eats whatever
    slack is left over, so short and long descriptions both end with the rule on the same
    line as its neighbours.
  */
  .ofuel-comp-prizes__text {
    margin: 12px 0 24px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-comp-prizes__value {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--ofuel-font);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.98px;
    text-transform: uppercase;
  }

  .ofuel-comp-prizes__value-label {
    font-weight: 400;
    color: var(--ofuel-gray, #565552);
  }

  /*
    margin-left: auto rather than leaning on space-between alone. With the label cleared
    the amount is the only child, and space-between would park it on the left edge under
    the rule; the auto margin keeps it pinned right either way.
  */
  .ofuel-comp-prizes__value-amount {
    margin-left: auto;
    font-weight: 700;
    text-align: right;
    color: var(--ofuel-black, #000);
  }

  /* Gated so the lift can never latch open after a tap on a touch device. */
  @media (hover: hover) {
    .ofuel-comp-prizes__card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    }

    .ofuel-comp-prizes__card:hover .ofuel-comp-prizes__img {
      transform: scale(1.05);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-prizes__card,
    .ofuel-comp-prizes__img {
      transition: none;
    }
  }

  /* Drop the movement but keep the depth cue, which is a paint change, not motion. */
  @media (prefers-reduced-motion: reduce) and (hover: hover) {
    .ofuel-comp-prizes__card:hover {
      transform: none;
    }

    .ofuel-comp-prizes__card:hover .ofuel-comp-prizes__img {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-comp-prizes__inner {
      padding-block: 80px;
      gap: 40px;
    }

    .ofuel-comp-prizes__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-comp-prizes__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-comp-prizes__body {
      padding: 24px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-comp-prizes__inner {
      padding-block: 64px;
    }

    .ofuel-comp-prizes__badge {
      font-size: 10px;
      letter-spacing: 0.8px;
      padding: 5px 11px;
    }
  }
/* END_SECTION:ofuel-comp-prizes */

/* START_SECTION:ofuel-comp-steps (INDEX:59) */
.ofuel-comp-steps {
    background: var(--cx-bg, #f0efeb);
    /* Anchor target: leave a little air above the eyebrow when jumped to. */
    scroll-margin-top: 24px;
  }

  .ofuel-comp-steps__inner {
    --cx-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cx-gutter));
    margin-inline: auto;
    padding: 64px var(--cx-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-comp-steps__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-comp-steps__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  /* Dawn sets `h2 { color: rgb(var(--color-foreground)) }`, so state the colour. */
  .ofuel-comp-steps__heading {
    margin: 0;
    max-width: 672px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-steps__intro {
    margin: 0;
    max-width: 768px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-comp-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }

  .ofuel-comp-steps__cell {
    display: grid;
  }

  .ofuel-comp-steps__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*
      Top-aligned rather than space-between: the icon is a fixed 56px, so aligning
      from the top puts every step number and title on the same line across the
      row. The slack collects at the bottom, where a ragged edge reads far less
      than ragged headings would.
    */
    justify-content: flex-start;
    gap: 24px;
    min-height: 300px;
    padding: 28px;
    border-radius: 24px;
    background: var(--cx-card, #ffffff);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .ofuel-comp-steps__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--cx-icon, #f57379);
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-steps__icon svg,
  .ofuel-comp-steps__icon-img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .ofuel-comp-steps__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /*
    The step number is set wide and tabular so 01 / 02 / 03 sit on an identical
    optical width across the row, the way a mono face would.
  */
  .ofuel-comp-steps__num {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-comp-steps__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.4px;
    /* Split a two-line title evenly rather than orphaning one word. */
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  .ofuel-comp-steps__text {
    margin: 4px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-comp-steps__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 12px;
  }

  .ofuel-comp-steps__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    /* 8px right pad so the 36px arrow chip sits flush inside the pill. */
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .ofuel-comp-steps__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    transition: transform 0.2s ease;
  }

  .ofuel-comp-steps__btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .ofuel-comp-steps__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-comp-steps__microcopy {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ofuel-gray, #565552);
  }

  /* Gated so a tap on touch cannot latch the lift and leave it stuck. */
  @media (hover: hover) {
    .ofuel-comp-steps__card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1);
    }

    .ofuel-comp-steps__btn:hover {
      transform: translateY(-1px);
    }

    .ofuel-comp-steps__btn:hover .ofuel-comp-steps__btn-icon {
      transform: translateX(3px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-steps__card,
    .ofuel-comp-steps__btn,
    .ofuel-comp-steps__btn-icon {
      transition: none;
    }
  }

  /*
    Drop the movement but keep the card shadow, so hover still reads as feedback.
    Gated on (hover: hover) as well: every :hover rule in this file has to be, or
    a tap on touch can latch the state with no pointer-out to release it.
  */
  @media (hover: hover) and (prefers-reduced-motion: reduce) {
    .ofuel-comp-steps__card:hover,
    .ofuel-comp-steps__btn:hover,
    .ofuel-comp-steps__btn:hover .ofuel-comp-steps__btn-icon {
      transform: none;
    }
  }

  @media screen and (max-width: 1199px) {
    .ofuel-comp-steps__card {
      padding: 24px;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-comp-steps__inner {
      padding-block: 80px;
      gap: 40px;
    }

    .ofuel-comp-steps__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ofuel-comp-steps__card {
      min-height: 0;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-comp-steps__inner {
      padding-block: 64px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-comp-steps__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-comp-steps__actions {
      align-items: flex-start;
      flex-direction: column;
    }

    .ofuel-comp-steps__btn {
      width: 100%;
      justify-content: space-between;
    }
  }
/* END_SECTION:ofuel-comp-steps */

/* START_SECTION:ofuel-comp-terms (INDEX:60) */
.ofuel-comp-terms {
    background: var(--cx-bg, #000);
    color: var(--cx-fg, #f0efeb);
    /*
      The hero links straight here with #terms. This theme's header is
      absolutely positioned and scrolls away, so nothing overlaps the landing
      point — the offset is only a sliver of the previous section left in view
      so the jump reads as a scroll rather than a cut. It stays small because
      __inner already contributes 112px of padding above the eyebrow; a larger
      value stacks on top of that and lands the jump short of the heading.
      Matches ofuel-comp-steps, the other anchored section on this page.
    */
    scroll-margin-top: 24px;
  }

  .ofuel-comp-terms__inner {
    --cx-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--cx-gutter));
    margin-inline: auto;
    padding: 64px var(--cx-gutter);
    display: grid;
    /*
      4/8 of a twelve column field. fr rather than fixed widths so the clause
      column keeps a comfortable measure as the gutter grows.
    */
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 64px;
    row-gap: 48px;
    align-items: start;
  }

  .ofuel-comp-terms__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-comp-terms__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Inverted for the dark ground: a solid black hairline would vanish. */
    border: 1px solid rgba(240, 239, 235, 0.35);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-comp-terms__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    /*
      Explicit. Dawn's base.css sets `h2 { color: rgb(var(--color-foreground)) }`,
      which would drop this heading to dark grey on the black ground.
    */
    color: var(--cx-fg, #f0efeb);
  }

  /*
    Every muted tone below is mixed from --cx-fg toward transparent rather than
    set with `opacity`, for two reasons: the tones stay correct if the section is
    re-themed light, and an `opacity` on these elements would be fighting the
    scroll reveal, which animates opacity 0 -> 1 on the very same nodes.
    The plain colour above each mix is the fallback for browsers without
    color-mix(); they get the flat foreground, which is still legible.
  */
  .ofuel-comp-terms__body {
    margin: 0;
    max-width: 46ch;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--cx-fg, #f0efeb);
    color: color-mix(in srgb, var(--cx-fg, #f0efeb) 72%, transparent);
  }

  .ofuel-comp-terms__updated {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--cx-fg, #f0efeb);
    color: color-mix(in srgb, var(--cx-fg, #f0efeb) 50%, transparent);
  }

  .ofuel-comp-terms__claim {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 24px stack gap + 8px = the wider break the design puts above this row. */
    margin: 8px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--cx-fg, #f0efeb);
    color: color-mix(in srgb, var(--cx-fg, #f0efeb) 85%, transparent);
  }

  .ofuel-comp-terms__claim-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
  }

  .ofuel-comp-terms__terms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .ofuel-comp-terms__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  /*
    Grid, not flex, so the numeral sits in its own fixed track. A wrapped clause
    stays inside the second track and every line after the first hangs to the
    right of the circle instead of running back under it.
  */
  .ofuel-comp-terms__item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .ofuel-comp-terms__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border: 1px solid var(--cx-fg, #f0efeb);
    border-color: color-mix(in srgb, var(--cx-fg, #f0efeb) 25%, transparent);
    border-radius: 50%;
    /* Optically centres the 26px circle on the first 24px line of the clause. */
    margin-top: 1px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    /* Keeps 1 and 11 the same width so the circles never look off-centre. */
    font-variant-numeric: tabular-nums;
    color: var(--cx-fg, #f0efeb);
    color: color-mix(in srgb, var(--cx-fg, #f0efeb) 70%, transparent);
    transition: color 0.18s ease, border-color 0.18s ease;
  }

  .ofuel-comp-terms__text {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--cx-fg, #f0efeb);
    color: color-mix(in srgb, var(--cx-fg, #f0efeb) 82%, transparent);
    transition: color 0.18s ease;
  }

  .ofuel-comp-terms__confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 40px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--cx-fg, #f0efeb);
    color: color-mix(in srgb, var(--cx-fg, #f0efeb) 60%, transparent);
  }

  .ofuel-comp-terms__confirm-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
  }

  /*
    Colour only. Nothing moves, so this reads as "you are on this clause" while
    scanning a long list rather than as decoration, and it survives the
    reduced-motion rule below untouched.
  */
  @media (hover: hover) {
    .ofuel-comp-terms__item:hover .ofuel-comp-terms__num {
      border-color: color-mix(in srgb, var(--cx-fg, #f0efeb) 60%, transparent);
      color: var(--cx-fg, #f0efeb);
    }

    .ofuel-comp-terms__item:hover .ofuel-comp-terms__text {
      color: var(--cx-fg, #f0efeb);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-comp-terms__num,
    .ofuel-comp-terms__text {
      transition: none;
    }
  }

  @media screen and (max-width: 1199px) {
    .ofuel-comp-terms__inner {
      column-gap: 48px;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-comp-terms__inner {
      grid-template-columns: minmax(0, 1fr);
      padding-block: 80px;
      row-gap: 40px;
    }

    .ofuel-comp-terms__heading {
      max-width: 12ch;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-comp-terms__item {
      grid-template-columns: 24px minmax(0, 1fr);
      column-gap: 12px;
    }

    .ofuel-comp-terms__num {
      width: 24px;
      height: 24px;
    }

    .ofuel-comp-terms__confirm {
      align-items: flex-start;
      letter-spacing: 1.6px;
    }

    .ofuel-comp-terms__confirm-icon {
      margin-top: 1px;
    }
  }
/* END_SECTION:ofuel-comp-terms */

/* START_SECTION:ofuel-comparison (INDEX:61) */
.ofuel-compare {
    background: var(--compare-bg, #000);
  }

  .ofuel-compare__inner {
    max-width: 1196px;
    margin-inline: auto;
    padding: 64px clamp(20px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
  }

  .ofuel-compare__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .ofuel-compare__sub {
    margin: 0;
    max-width: 660px;
    text-align: center;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: rgba(240, 239, 235, 0.7);
  }

  .ofuel-compare__heading {
    margin: 0;
    max-width: 672px;
    text-align: center;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-compare__scroll {
    width: 100%;
    max-width: 1100px;
    overflow-x: auto;
    /*
      The 680px table is correctly clipped here and never actually scrolled the
      document — but it was poisoning the measurement, which is why this bug was
      hard to find. `.ofuel-reveal` puts a transform on the wrapper, and a
      transform isolates the subtree; once the reveal completes and the transform
      becomes `none`, Chrome starts folding the clipped grid into the ROOT's
      scrollable-overflow rect. documentElement.scrollWidth then pinned at a
      constant 631px, which both invented ~200-300px of phantom overflow AND
      clamped the document's real scroll range to 0 — masking the genuine wheel
      overflow underneath it.

      `contain: paint` restores the isolation the transform used to provide. It
      also makes this a containing block for the absolutely-positioned
      .visually-hidden spans inside the table, which were escaping too.
      No visual change.
    */
    contain: paint;
  }

  /* Cream pill with the coral arrow — same treatment as the other dark bands. */
  .ofuel-compare__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: -16px;
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-compare__cta:hover {
      transform: translateY(-2px);
      opacity: 0.95;
    }
}

  .ofuel-compare__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    flex: none;
    transition: transform 0.3s ease;
  }

  @media (hover: hover) {
  .ofuel-compare__cta:hover .ofuel-compare__cta-icon {
      transform: translateX(4px);
    }
}

  .ofuel-compare__cta-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-compare__cta:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-compare__table {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    min-width: 680px;
    border: 1px solid rgba(240, 239, 235, 0.15);
    border-radius: 20px;
    overflow: hidden;
  }

  .ofuel-compare__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-compare__cell--feature {
    justify-content: flex-start;
    text-align: left;
  }

  .ofuel-compare__cell--head {
    font-weight: 700;
    min-height: 72px;
  }

  .ofuel-compare__cell--highlight {
    background: var(--compare-highlight, #f57379);
    color: #000;
    border-top: 4px solid var(--compare-bg, #000);
    border-bottom: 4px solid var(--compare-bg, #000);
  }

  .ofuel-compare__cell--body:not(.ofuel-compare__cell--highlight) {
    border-top: 1px solid rgba(240, 239, 235, 0.15);
  }

  .ofuel-compare__yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-compare__cell--highlight .ofuel-compare__yes {
    color: #000;
  }

  .ofuel-compare__yes svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .ofuel-compare__no {
    font-size: 18px;
    line-height: 28px;
    color: rgba(240, 239, 235, 0.7);
  }

  .ofuel-compare__dash {
    font-size: 18px;
    line-height: 28px;
    color: rgba(240, 239, 235, 0.5);
  }

  .ofuel-compare__partial {
    font-size: 14px;
    line-height: 20px;
    color: rgba(240, 239, 235, 0.8);
  }

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

  @media screen and (max-width: 749px) {
    .ofuel-compare__inner {
      padding-block: 64px;
    }

    .ofuel-compare__cell {
      padding: 18px 16px;
      font-size: 15px;
    }
  }
/* END_SECTION:ofuel-comparison */

/* START_SECTION:ofuel-contact-form (INDEX:62) */
.ofuel-contact {
    background: var(--cf-bg, #f0efeb);
  }

  /*
    box-sizing is border-box inside .ofuel-section, so the max-width has to carry
    the gutter or the column lands narrower than intended.
  */
  .ofuel-contact__inner {
    --cf-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(720px + 2 * var(--cf-gutter));
    margin-inline: auto;
    padding: var(--cf-pt, 120px) var(--cf-gutter) var(--cf-pb, 120px);
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .ofuel-contact__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .ofuel-contact__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cf-heading, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cf-heading, #000);
  }

  .ofuel-contact__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--cf-heading, #000);
  }

  .ofuel-contact__intro {
    max-width: 560px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--cf-body, #565552);
  }

  .ofuel-contact__intro > * {
    margin: 0;
  }

  .ofuel-contact__intro > * + * {
    margin-top: 12px;
  }

  .ofuel-contact__card {
    background: var(--cf-card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 32px;
    padding: clamp(24px, 3.2vw, 44px);
  }

  .ofuel-contact__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ofuel-contact__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .ofuel-contact__field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  .ofuel-contact__field--full {
    grid-column: 1 / -1;
  }

  .ofuel-contact__label {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-contact__input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
    padding: 14px 22px;
    font-family: var(--ofuel-font);
    font-size: 15px;
    line-height: 22px;
    color: var(--ofuel-black, #000);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  /*
    The chevron is a sibling overlay rather than a background-image, so it
    inherits currentColor and stays correct if the card is ever re-themed.
    padding-right clears it; appearance:none removes the OS control.
  */
  .ofuel-contact__select-wrap {
    position: relative;
    display: block;
  }

  .ofuel-contact__input--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    /* A select inherits neither the page font nor a sane height by default. */
    height: 51px;
    cursor: pointer;
  }

  /*
    The placeholder option reads as placeholder text until a real choice is made.

    This is the one deliberate use of :invalid in this file, and it is not the
    banned pattern: it only greys the text, exactly as a placeholder should look
    before a choice exists. Error styling stays on [aria-invalid='true'], because
    a bare :invalid matches an untouched empty required field and would paint the
    whole form red on first paint.
  */
  .ofuel-contact__input--select:invalid {
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-contact__select-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--ofuel-black, #000);
  }

  .ofuel-contact__select-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ofuel-contact__input--textarea {
    border-radius: 18px;
    resize: vertical;
    min-height: 132px;
  }

  @media (hover: hover) {
  .ofuel-contact__input:hover {
      border-color: rgba(0, 0, 0, 0.34);
    }
}

  .ofuel-contact__input:focus {
    outline: none;
    border-color: var(--ofuel-coral, #f57379);
    box-shadow: 0 0 0 2px rgba(245, 115, 121, 0.28);
  }

  .ofuel-contact__input[aria-invalid='true'] {
    border-color: #b3261e;
  }

  /* iOS zooms the page when a focused input is under 16px. */
  @media screen and (max-width: 749px) {
    .ofuel-contact__input {
      font-size: 16px;
    }
  }

  .ofuel-contact__disclaimer,
  .ofuel-contact__hint,
  .ofuel-contact__captcha-note {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 18px;
    color: var(--ofuel-gray, #565552);
  }

  /*
    The hCaptcha translation emits a real <p>, and this theme has no global
    paragraph reset — that is why the richtext children are zeroed in three
    places already. Without this the injected <p> carries a 1em UA margin on top
    of the form's own gap.
  */
  .ofuel-contact__disclaimer > *,
  .ofuel-contact__captcha-note > * {
    margin: 0;
  }

  .ofuel-contact__captcha-note a {
    color: inherit;
  }

  .ofuel-contact__hint {
    display: block;
    margin-top: 6px;
  }

  .ofuel-contact__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 8px 8px 24px;
    border: none;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-contact__submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
    }
}

  .ofuel-contact__submit:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-contact__submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    transition: transform 0.2s ease;
  }

  .ofuel-contact__submit-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  @media (hover: hover) {
  .ofuel-contact__submit:hover .ofuel-contact__submit-icon {
      transform: translateX(3px);
    }
}

  /*
    ---- Post-submit states ----
    Solid coral rather than a tint: a 10% coral wash is hard to tell apart from
    the red error panel at a glance, and this one has to read as "done".
  */
  .ofuel-contact__success {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 20px;
    background: var(--ofuel-coral, #f57379);
    padding: 24px 28px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-contact__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-contact__success-icon svg {
    display: block;
    width: 14px;
    height: 14px;
  }

  .ofuel-contact__success-text > * {
    margin: 0;
  }

  .ofuel-contact__success-text > * + * {
    margin-top: 8px;
  }

  .ofuel-contact__success:focus,
  .ofuel-contact__errors:focus {
    outline: none;
  }

  .ofuel-contact__errors {
    border: 1px solid #b3261e;
    border-radius: 20px;
    background: rgba(179, 38, 30, 0.07);
    padding: 20px 24px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 22px;
    color: #8c1d18;
  }

  .ofuel-contact__errors-title {
    margin: 0 0 6px;
    font-weight: 700;
  }

  .ofuel-contact__errors ul {
    margin: 0;
    padding-left: 18px;
  }

  .ofuel-contact__field-error {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 18px;
    color: #8c1d18;
  }

  @media screen and (max-width: 749px) {
    .ofuel-contact__inner {
      padding-block: 80px;
      gap: 32px;
    }

    .ofuel-contact__fields {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-contact__submit,
    .ofuel-contact__submit-icon {
      transition: none;
    }
  }
/* END_SECTION:ofuel-contact-form */

/* START_SECTION:ofuel-cta-panel (INDEX:63) */
.ofuel-cta-panel {
    background: var(--cp-bg, #f0efeb);
  }

  .ofuel-cta-panel__panel {
    margin-inline: clamp(8px, 1vw, 16px);
    border-radius: 32px;
    background: var(--cp-panel, #fff);
  }

  .ofuel-cta-panel__inner {
    width: min(96%, 1000px);
    margin-inline: auto;
    padding-block: var(--cp-pt, 64px) var(--cp-pb, 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ofuel-cta-panel__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--cp-heading, #000);
  }

  .ofuel-cta-panel__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-cta-panel__body {
    margin: 24px 0 0;
    max-width: 576px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--cp-body, #565552);
  }

  .ofuel-cta-panel__actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .ofuel-cta-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border-radius: 9999px;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  /* 8px right pad so the 36px arrow chip sits flush inside the pill. */
  .ofuel-cta-panel__btn--primary {
    padding: 8px 8px 8px 24px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-cta-panel__btn--secondary {
    padding: 12px 24px;
    border: 1px solid var(--cp-heading, #000);
    color: var(--cp-heading, #000);
  }

  .ofuel-cta-panel__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    transition: transform 0.2s ease;
  }

  .ofuel-cta-panel__btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  @media (hover: hover) {
  .ofuel-cta-panel__btn:hover {
      transform: translateY(-1px);
    }
}

  @media (hover: hover) {
  .ofuel-cta-panel__btn:hover .ofuel-cta-panel__btn-icon {
      transform: translateX(3px);
    }
}

  @media (hover: hover) {
  .ofuel-cta-panel__btn--secondary:hover {
      background: var(--cp-heading, #000);
      color: var(--ofuel-cream, #f0efeb);
    }
}

  .ofuel-cta-panel__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-cta-panel__btn,
    .ofuel-cta-panel__btn-icon {
      transition: none;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-cta-panel__inner {
      padding-block: 80px;
    }

    .ofuel-cta-panel__actions {
      margin-top: 32px;
    }
  }
/* END_SECTION:ofuel-cta-panel */

/* START_SECTION:ofuel-cta (INDEX:64) */
.ofuel-cta {
    background: var(--cta-bg, #000);
  }

  .ofuel-cta__inner {
    max-width: 1100px;
    margin-inline: auto;
    padding: 64px clamp(20px, 5vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .ofuel-cta__badge {
    display: block;
    width: 118px;
    height: 118px;
  }

  .ofuel-cta__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    animation: ofuel-cta-spin 32s linear infinite;
  }

  @media (hover: hover) {
  .ofuel-cta__badge:hover img {
      animation-play-state: paused;
    }
}

  @keyframes ofuel-cta-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-cta__badge img { animation: none; }
  }

  .ofuel-cta__heading {
    margin: 17px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(48px, 11vw, 144px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-cta__line {
    display: block;
  }

  .ofuel-cta__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-cta__sub {
    margin: 0;
    max-width: 536px;
    font-family: var(--ofuel-font);
    font-size: 18px;
    line-height: 28px;
    color: var(--ofuel-cream, #f0efeb);
    opacity: 0.7;
    /*
      Stops the last word being left alone on its own line. The default copy is
      109 characters, which fits two lines down to a 640px viewport and then
      breaks to three — with "routine." stranded by itself under a full-width
      line, which reads as a mistake rather than a line break.

      `pretty` asks the browser to pull a word down from the preceding line
      instead of orphaning one, so the final line always carries company. It is
      purely a hint: browsers that do not support it fall back to normal
      wrapping, i.e. exactly today's behaviour, so there is nothing to lose.
    */
    text-wrap: pretty;
  }

  .ofuel-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }

  .ofuel-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ofuel-font);
    /*
    Site button standard: 52px tall, 14px/20px type, 24px of text-side padding,
    and a 36px icon circle inset by 8px. Matches ofuel-hero__btn, which 15 other
    CTAs across the site already follow. Deviating here made the closing CTA read
    as a different component to the buttons directly above it.
    */
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    border-radius: 9999px;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .ofuel-cta__btn--primary {
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-black, #000);
    gap: 12px;
    padding: 8px 8px 8px 24px;
  }

  .ofuel-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: #fff;
    flex: none;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-cta__btn--primary:hover .ofuel-cta__btn-icon {
      transform: translateX(3px);
    }
}

  .ofuel-cta__btn-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .ofuel-cta__btn--outline {
    height: 52px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-cream, #f0efeb);
  }

  @media (hover: hover) {
  .ofuel-cta__btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
}

  .ofuel-cta__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }
/* END_SECTION:ofuel-cta */

/* START_SECTION:ofuel-essentials (INDEX:65) */
.ofuel-essentials {
    background: var(--ess-bg, #efede8);
  }

  .ofuel-essentials__inner {
    max-width: var(--ofuel-container);
    margin-inline: auto;
    padding: 64px clamp(20px, 5vw, 85px);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-essentials__heading {
    margin: 0;
    max-width: 672px;
    font-family: var(--ofuel-font);
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-essentials__h-bold { font-weight: 700; }
  .ofuel-essentials__h-italic { font-weight: 300; font-style: italic; }

  .ofuel-essentials__venn {
    --circle: clamp(300px, 30vw, 440px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ofuel-essentials__circle {
    width: var(--circle);
    height: var(--circle);
    flex: none;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 41px;
    box-sizing: border-box;
  }

  .ofuel-essentials__circle + .ofuel-essentials__circle {
    margin-left: calc(var(--circle) * -0.22);
  }

  .ofuel-essentials__circle--z1 { z-index: 1; }
  .ofuel-essentials__circle--z2 { z-index: 2; }
  .ofuel-essentials__circle--z3 { z-index: 3; }

  .ofuel-essentials__circle-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 308px;
  }

  .ofuel-essentials__num {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.5);
  }

  .ofuel-essentials__pill {
    margin-top: 12px;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-essentials__title {
    margin: 16px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.72px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-essentials__desc {
    margin: 12px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  @media screen and (max-width: 989px) {
    .ofuel-essentials__inner { padding-block: 80px; }
  }

  @media screen and (max-width: 749px) {
    .ofuel-essentials__venn {
      --circle: min(78vw, 320px);
      flex-direction: column;
    }
    .ofuel-essentials__circle + .ofuel-essentials__circle {
      margin-left: 0;
      margin-top: calc(var(--circle) * -0.16);
    }
  }
/* END_SECTION:ofuel-essentials */

/* START_SECTION:ofuel-faq-search (INDEX:66) */
.ofuel-faqs {
    background: var(--fs-bg, #f0efeb);
  }

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

  .ofuel-faqs__hero {
    width: 100%;
    max-width: calc(1200px + 2 * var(--ofuel-container-pad));
    margin-inline: auto;
    /* Header pills float over this section; never let the top pad fall under them. */
    padding: max(128px, 88px) var(--ofuel-container-pad) 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .ofuel-faqs__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fs-heading, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fs-heading, #000);
  }

  /*
    px in the clamp minimum on purpose — the theme root is 62.5%, so a rem
    minimum would silently render at a tenth of the intended size.
  */
  .ofuel-faqs__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 900;
    font-size: clamp(48px, 10vw, 160px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--fs-heading, #000);
    overflow-wrap: break-word;
  }

  .ofuel-faqs__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-faqs__sub {
    margin: 0;
    max-width: 640px;
    font-family: var(--ofuel-font);
    font-size: 20px;
    line-height: 28px;
    color: var(--fs-body, #565552);
  }

  .ofuel-faqs__inner {
    width: 100%;
    max-width: calc(1000px + 2 * var(--ofuel-container-pad));
    margin-inline: auto;
    padding: 0 var(--ofuel-container-pad) 64px;
  }

  /* With the hero off, the controls have to carry the top padding themselves. */
  .ofuel-faqs--no-hero .ofuel-faqs__inner {
    padding-top: 96px;
  }

  .ofuel-faqs__controls {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
  }

  .ofuel-faqs__search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    padding: 6px 20px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .ofuel-faqs__search:focus-within {
    border-color: var(--ofuel-coral, #f57379);
    box-shadow: 0 0 0 2px rgba(245, 115, 121, 0.28);
  }

  .ofuel-faqs__search-icon {
    display: inline-flex;
    flex: none;
    color: var(--fs-heading, #000);
    opacity: 0.6;
  }

  .ofuel-faqs__search-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .ofuel-faqs__search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 12px 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--fs-heading, #000);
  }

  .ofuel-faqs__search-input:focus {
    outline: none;
  }

  .ofuel-faqs__search-input::placeholder {
    color: var(--fs-body, #565552);
  }

  /* iOS zooms the page when a focused input is under 16px. */
  @media screen and (max-width: 749px) {
    .ofuel-faqs__search-input {
      font-size: 16px;
    }

  }

  .ofuel-faqs__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .ofuel-faqs__cat {
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 9999px;
    background: transparent;
    padding: 8px 16px;
    /* Raised to the 44px tap floor at <=749px — see the media query at the foot
       of this stylesheet. Kept compact here so the desktop pill row is unchanged. */
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fs-heading, #000);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-faqs__cat:hover {
      background: rgba(0, 0, 0, 0.05);
    }
}

  .ofuel-faqs__cat.is-active {
    background: var(--fs-heading, #000);
    border-color: var(--fs-heading, #000);
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-faqs__cat:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 2px;
  }

  .ofuel-faqs__list {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-faqs__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-faqs__item[hidden] {
    display: none;
  }

  .ofuel-faqs__q-wrap {
    margin: 0;
    font: inherit;
  }

  .ofuel-faqs__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--fs-heading, #000);
  }

  .ofuel-faqs__q:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 2px;
  }

  .ofuel-faqs__q-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ofuel-faqs__q-cat {
    margin-right: 12px;
    font-family: var(--ofuel-font);
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fs-body, #565552);
    white-space: nowrap;
  }

  .ofuel-faqs__q-label {
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(17px, 1.8vw, 24px);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  .ofuel-faqs__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .ofuel-faqs__icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /* Plus collapses into a minus — one icon, no swap. */
  .ofuel-faqs__icon-bar {
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .ofuel-faqs__item.is-open .ofuel-faqs__icon-bar {
    transform: rotate(90deg);
    opacity: 0;
  }

  .ofuel-faqs__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .ofuel-faqs__item.is-open .ofuel-faqs__panel {
    grid-template-rows: 1fr;
  }

  .ofuel-faqs__panel-inner {
    overflow: hidden;
  }

  .ofuel-faqs__a {
    padding: 0 64px 24px 0;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 26px;
    color: var(--fs-body, #565552);
  }

  .ofuel-faqs__a > * {
    margin: 0;
  }

  .ofuel-faqs__a > * + * {
    margin-top: 12px;
  }

  .ofuel-faqs__empty {
    margin: 0;
    padding: 64px 0;
    text-align: center;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--fs-body, #565552);
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-faqs__panel,
    .ofuel-faqs__icon-bar {
      transition: none;
    }
  }

  @media screen and (max-width: 749px) {
    /*
      Category pills are the primary filter on this page and were 34px tall on a
      42px wrapped-row pitch. Vertical padding only — the horizontal padding and
      the 8px gap give the row its shape, and changing those would re-flow which
      pills land on which line.

      This has to live in THIS media block, not the earlier one at :363 — the base
      `.ofuel-faqs__cat { padding: 8px 16px }` rule sits between the two, and a
      media query adds no specificity, so the shorthand there would win.
    */
    .ofuel-faqs__cat {
      padding-block: 14px;
    }

    .ofuel-faqs__hero {
      padding-block: max(104px, 88px) 40px;
      gap: 20px;
    }

    .ofuel-faqs__sub {
      font-size: 17px;
      line-height: 26px;
    }

    .ofuel-faqs__inner {
      padding-bottom: 80px;
    }

    .ofuel-faqs__cats {
      justify-content: flex-start;
    }

    .ofuel-faqs__q {
      gap: 16px;
      padding: 20px 0;
    }

    .ofuel-faqs__a {
      padding-right: 0;
    }
  }
/* END_SECTION:ofuel-faq-search */

/* START_SECTION:ofuel-faq (INDEX:67) */
.ofuel-faq {
    background: var(--faq-bg, #f0efeb);
  }

  .ofuel-faq__inner {
    max-width: 900px;
    margin-inline: auto;
    /*
      Asymmetric, and the top is per-template on purpose — it depends entirely on
      what sits above.

      When the block above is the SAME colour (reviews on the two product
      templates, moments on Why Ofuel) its bottom padding and this one read as a
      single continuous gap, so a small value is right — 96 + 112 put over 200px
      of empty cream above a centred heading. Those templates set padding_top: 32.

      When the colour CHANGES at the boundary there is a hard edge instead of a
      shared gap, and the neighbour's padding does nothing for this heading. That
      is the majority case — measured: home (black -> cream), Creatine 101,
      Become a Stockist and Competitions (all cream -> white) — so 96 is the
      DEFAULT and the small value is the documented exception. Do not lower this
      default to suit the product pages; override per template as they do.

      The bottom keeps its full 112px because what follows is usually a dark CTA,
      where the colour change carries the break.
    */
    padding: var(--fq-pt, 64px) clamp(20px, 5vw, 48px) 64px;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  @media screen and (max-width: 749px) {
    .ofuel-faq__inner {
      /*
        min() so the small per-template value passes through untouched (32 stays
        32) while the 96px default steps down rather than eating a phone screen.
      */
      padding-block: min(var(--fq-pt, 96px), 56px) 80px;
      gap: 32px;
    }
  }

  .ofuel-faq__heading {
    margin: 0;
    text-align: center;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-faq__list {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-faq__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-faq__q {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
  }

  .ofuel-faq__q-text {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.33;
    color: var(--ofuel-black, #000);
  }

  .ofuel-faq__icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ofuel-black, #000);
    flex: none;
    transition: transform 0.3s ease;
  }

  .ofuel-faq__icon::before,
  .ofuel-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--ofuel-black, #000);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
  }

  .ofuel-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .ofuel-faq__item.is-open .ofuel-faq__icon {
    transform: rotate(180deg);
  }

  .ofuel-faq__item.is-open .ofuel-faq__icon::after {
    opacity: 0;
  }

  .ofuel-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }

  .ofuel-faq__item.is-open .ofuel-faq__panel {
    grid-template-rows: 1fr;
  }

  .ofuel-faq__panel-inner {
    overflow: hidden;
    min-height: 0;
  }

  .ofuel-faq__a {
    padding: 2px clamp(0px, 8vw, 64px) 24px 0;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 26px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-faq__a > * {
    margin: 0 0 12px;
  }

  .ofuel-faq__a > *:last-child {
    margin-bottom: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-faq__panel,
    .ofuel-faq__icon,
    .ofuel-faq__icon::before,
    .ofuel-faq__icon::after {
      transition: none;
    }
  }
/* END_SECTION:ofuel-faq */

/* START_SECTION:ofuel-feedback (INDEX:68) */
.ofuel-feedback {
    background: #fff;
  }

  .ofuel-feedback__inner {
    max-width: 1360px;
    margin-inline: auto;
    padding: 64px clamp(20px, 5vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
  }

  .ofuel-feedback__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 576px;
    text-align: center;
  }

  .ofuel-feedback__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -1.44px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-feedback__sub {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-feedback__body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
  }

  .ofuel-feedback__sidebar {
    display: flex;
    flex-direction: column;
    gap: 38px;
    width: 309px;
    flex: none;
  }

  .ofuel-feedback__thumb {
    display: block;
    width: 100%;
    height: 150px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0.7;
    transition: height 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
  }

  .ofuel-feedback__thumb.is-active {
    height: 386px;
    opacity: 1;
    border-radius: 28px;
  }

  .ofuel-feedback__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .ofuel-feedback__cards {
    flex: 1 1 0;
    min-width: 0;
    max-width: 948px;
  }

  .ofuel-feedback__card {
    display: none;
    position: relative;
    flex-direction: column;
    gap: 24px;
    padding: clamp(28px, 4vw, 56px);
    border-radius: 28px;
    background: var(--ofuel-cream, #f0efeb);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }

  .ofuel-feedback__card.is-active {
    display: flex;
  }

  .ofuel-feedback__quotemark {
    position: absolute;
    top: 20px;
    right: 40px;
    font-family: var(--ofuel-font);
    font-style: italic;
    font-size: clamp(90px, 12vw, 192px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.04);
    pointer-events: none;
  }

  .ofuel-feedback__quote {
    margin: 0;
    position: relative;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.9px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-feedback__text {
    margin: 0;
    max-width: 576px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-feedback__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 4px;
    padding-top: 25px;
    border-top: 1px dashed rgba(0, 0, 0, 0.2);
  }

  .ofuel-feedback__cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ofuel-feedback__name {
    font-family: var(--ofuel-font);
    font-size: 18px;
    line-height: 28px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-feedback__role {
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-feedback__stars {
    display: flex;
    gap: 4px;
  }

  .ofuel-feedback__star {
    width: 20px;
    height: 20px;
    color: rgba(0, 0, 0, 0.15);
  }

  .ofuel-feedback__star.is-filled {
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-feedback__star svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ofuel-feedback__body.ofuel-reveal--in .ofuel-feedback__card.is-active .ofuel-feedback__star {
      opacity: 0;
      animation: ofuel-fb-star 0.42s ease forwards;
      animation-delay: calc(var(--star-i, 0) * 80ms + 150ms);
    }
  }

  @keyframes ofuel-fb-star {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: none; }
  }

  @media screen and (max-width: 989px) {
    .ofuel-feedback__inner {
      padding-block: 80px;
    }

    .ofuel-feedback__body {
      flex-direction: column;
      gap: 32px;
    }

    .ofuel-feedback__sidebar {
      flex-direction: row;
      width: 100%;
      max-width: 420px;
      justify-content: center;
      gap: 12px;
    }

    .ofuel-feedback__thumb,
    .ofuel-feedback__thumb.is-active {
      width: 80px;
      height: 80px;
      border-radius: 16px;
    }

    .ofuel-feedback__thumb.is-active {
      opacity: 1;
      outline: 2px solid var(--ofuel-black, #000);
      outline-offset: 2px;
    }

    .ofuel-feedback__cards {
      width: 100%;
    }
  }
/* END_SECTION:ofuel-feedback */

/* START_SECTION:ofuel-footer-image (INDEX:69) */
.ofuel-footerimg {
    background: var(--fi-bg, #000);
  }

  .ofuel-footerimg__frame {
    position: relative;
    width: 100%;
    /*
      Shorter than the source art (1672x941 = 1.777) on purpose: at full width the
      original ratio made this a ~810px slab at 1440px wide. 2.2 brings it to
      ~650px.

      At full width, height can only come out of the frame by cropping — that is
      geometry, not a choice. What is a choice is WHERE it crops from: the crop is
      pinned to the bottom via object-position below, because the top of this shot
      is empty studio backdrop and everything that matters (pouch, glass,
      grapefruit) sits along the lower edge.
    */
    aspect-ratio: 2.2 / 1;
    overflow: hidden;
  }

  .ofuel-footerimg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep the product, drop the empty backdrop above it. */
    object-position: center bottom;
    display: block;
  }

  /*
    Same settle as the Why Ofuel gallery: the photo eases back from a slight
    over-scale as the frame reveals, then stops. Slower here because the image is
    full-bleed — the same duration over a much larger surface would read as fast.

    Only the photo moves; the copy is a sibling of the frame, so it stays put.
    The `::after` scrim is on the frame, not the image, so the wash under the
    copy does not move or change density during the settle.
  */
  @media (prefers-reduced-motion: no-preference) {
    .ofuel-footerimg__img {
      transform: scale(1.06);
      transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .ofuel-footerimg__frame.ofuel-reveal--in .ofuel-footerimg__img {
      transform: none;
    }
  }

  /*
    The wash has to match the photograph, not the other way round. The packaged
    shot is a near-white studio scene, so a dark scrim barely registers and cream
    text vanishes into it — hence two schemes rather than one hardcoded scrim.

    "dark"  = dark type over a light wash  (for bright images — the default)
    "light" = cream type over a dark scrim (for dark or busy images)
  */
  .ofuel-footerimg--dark {
    --fi-fg: var(--ofuel-black, #000);
    --fi-muted: var(--ofuel-gray, #565552);
    --fi-btn-bg: var(--ofuel-black, #000);
    --fi-btn-fg: var(--ofuel-cream, #f0efeb);
    --fi-btn2-border: rgba(0, 0, 0, 0.25);
    --fi-btn2-hover: rgba(0, 0, 0, 0.06);
  }

  .ofuel-footerimg--light {
    --fi-fg: var(--ofuel-cream, #f0efeb);
    --fi-muted: rgba(240, 239, 235, 0.85);
    --fi-btn-bg: var(--ofuel-cream, #f0efeb);
    --fi-btn-fg: var(--ofuel-black, #000);
    --fi-btn2-bg: rgba(240, 239, 235, 0.12);
    --fi-btn2-border: rgba(240, 239, 235, 0.5);
    --fi-btn2-hover: rgba(240, 239, 235, 0.22);
  }

  .ofuel-footerimg--cta .ofuel-footerimg__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  /*
    Fades out well before the product so the photo is never flattened — the copy
    column is the only part that needs to be calm.
  */
  .ofuel-footerimg--dark .ofuel-footerimg__frame::after {
    background: linear-gradient(
      90deg,
      var(--fi-wash, #f4f2ef) 0%,
      var(--fi-wash, #f4f2ef) 26%,
      rgba(244, 242, 239, 0.82) 44%,
      rgba(244, 242, 239, 0.28) 66%,
      rgba(244, 242, 239, 0) 84%
    );
  }

  .ofuel-footerimg--light .ofuel-footerimg__frame::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.55) 38%,
      rgba(0, 0, 0, 0.12) 72%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .ofuel-footerimg__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    max-width: var(--ofuel-container, 1400px);
    margin-inline: auto;
    padding: 64px var(--ofuel-container-pad, 24px);
    color: var(--fi-fg, #000);
  }

  .ofuel-footerimg__eyebrow {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .ofuel-footerimg__heading {
    margin: 0;
    max-width: 16ch;
    /*
      Beats Dawn's `h2 { color: rgb(var(--color-foreground)) }`, which would
      otherwise render this dark against the photograph.
    */
    color: inherit;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 0.98;
    letter-spacing: -0.02em;
  }

  .ofuel-footerimg__heading-em {
    font-style: italic;
    font-weight: 300;
  }

  .ofuel-footerimg__body {
    margin: 0;
    max-width: 44ch;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 26px;
    color: var(--fi-muted, #565552);
  }

  .ofuel-footerimg__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }

  .ofuel-footerimg__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 9999px;
    white-space: nowrap;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .ofuel-footerimg__btn--primary {
    gap: 12px;
    padding: 8px 8px 8px 24px;
    background: var(--fi-btn-bg, #000);
    color: var(--fi-btn-fg, #f0efeb);
  }

  /*
    Solid rather than transparent — matching the hero's secondary, and so it
    stays readable if it ever lands over the photograph rather than the wash.
  */
  .ofuel-footerimg__btn--secondary {
    padding: 15px 24px;
    min-height: 52px;
    background: var(--fi-btn2-bg, var(--ofuel-white, #fff));
    color: var(--fi-fg, #000);
    border: 1px solid var(--fi-btn2-border, rgba(0, 0, 0, 0.15));
  }

  @media (hover: hover) {
  .ofuel-footerimg__btn:hover {
      transform: translateY(-2px);
    }
}

  @media (hover: hover) {
  .ofuel-footerimg__btn--secondary:hover {
      background: var(--fi-btn2-hover, rgba(0, 0, 0, 0.06));
    }
}

  .ofuel-footerimg__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-footerimg__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    flex: none;
    transition: transform 0.25s ease;
  }

  @media (hover: hover) {
  .ofuel-footerimg__btn--primary:hover .ofuel-footerimg__btn-icon {
      transform: translateX(3px);
    }
}

  .ofuel-footerimg__btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-footerimg__microcopy {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 20px;
    color: var(--fi-muted, #565552);
  }

  @media screen and (max-width: 989px) {
    /*
      Below 989px the CTA variant UNSTACKS: photograph band on top, copy beneath
      it on flat ground, instead of copy overlaid on the photograph.

      It used to switch to a 4/5 frame and keep the overlay. That failed for two
      compounding reasons:

      1. WRONG PART OF THE SHOT. The source art is 1672x941 (ratio 1.78) with its
         entire LEFT half empty studio backdrop and every product element in the
         right half. A 4/5 frame is 0.8, so cover fills the height and only
         0.8/1.78 = 45% of the source WIDTH survives — and `object-position:
         center` kept the middle 45%, i.e. mostly backdrop with the sachet clipped
         at the right edge. (The `bottom` keyword was inert here: filling the
         height leaves no vertical overflow to shift.)
      2. NO ROOM. At 390px a 4/5 frame is 488px while the copy block — eyebrow,
         heading, body, two full-width buttons, microcopy — measures ~405px, so
         the copy covered nearly the whole photograph and the wash had to reach
         solid before it. At 768px the same rule produced a 960px-tall slab.

      Unstacked, the band gets a landscape ratio that keeps far more of the frame
      (3/2 shows 84% of the source width, 4/3 shows 75%) and the crop is pinned
      right so the whole product cluster reads as a composition.
    */
    .ofuel-footerimg--cta {
      background: var(--fi-wash, #f4f2ef);
    }

    .ofuel-footerimg--cta .ofuel-footerimg__frame {
      /* Height comes from the two rows now, not from a ratio on the frame. */
      aspect-ratio: auto;
      display: grid;
      grid-template-rows: auto auto;
    }

    .ofuel-footerimg--cta .ofuel-footerimg__img {
      position: relative;
      height: auto;
      aspect-ratio: 3 / 2;
      object-position: 100% center;
    }

    /*
      The scrim exists to lift copy off the photograph. Unstacked there is no copy
      on the photograph, and leaving it would just wash the band out.
      Light/dark variants both go, since neither now has anything to scrim.
    */
    .ofuel-footerimg--cta .ofuel-footerimg__frame::after {
      display: none;
    }

    .ofuel-footerimg--cta .ofuel-footerimg__content {
      position: static;
      inset: auto;
      justify-content: flex-start;
      gap: 16px;
      padding: 40px var(--ofuel-container-pad, 24px) 56px;
    }

    .ofuel-footerimg__heading {
      max-width: 20ch;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-footerimg__frame {
      aspect-ratio: 3 / 4;
    }

    /*
      Phone tier only tweaks the band and the padding — the unstack itself is
      inherited from the 989px block above. A narrower viewport wants a slightly
      taller band so the product is not reduced to a thin strip: 4/3 still keeps
      75% of the source width.
    */
    .ofuel-footerimg--cta .ofuel-footerimg__img {
      aspect-ratio: 4 / 3;
    }

    .ofuel-footerimg--cta .ofuel-footerimg__content {
      padding: 32px var(--ofuel-container-pad, 24px) 48px;
    }

    .ofuel-footerimg__actions {
      width: 100%;
    }

    .ofuel-footerimg__btn {
      flex: 1 1 auto;
      justify-content: center;
    }
  }
/* END_SECTION:ofuel-footer-image */

/* START_SECTION:ofuel-footer (INDEX:70) */
.ofuel-footer {
    background: var(--footer-bg, #000);
  }

  .ofuel-footer__inner {
    --gutter: clamp(20px, 5vw, 40px);
    max-width: calc(var(--ofuel-container) + 2 * var(--gutter));
    margin-inline: auto;
    /*
      The wordmark used to sit flush to the footer edge (bottom padding 0), which
      read as clipped rather than deliberate. It now gets the same breathing room
      as the sides — one --gutter — so the mark is optically inset on all three
      edges instead of being cut off by the viewport bottom.
    */
    padding: 56px var(--gutter) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ofuel-footer__cols {
    display: flex;
    gap: 40px;
  }

  .ofuel-footer__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /*
    h2, not h4. These are the footer's own top-level groupings, and the last
    content heading before them is an h2 — so h4 skipped a level on EVERY page
    of the site (h2 -> h4), which is the one heading-order fault the SEO audit
    found. The visual size is set here, so the level change is invisible.
  */
  .ofuel-footer__col-title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ofuel-cream, #f0efeb);
    opacity: 0.8;
  }

  .ofuel-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ofuel-footer__links a,
  .ofuel-footer__links .ofuel-footer__link-pending {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-cream, #f0efeb);
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-footer__links a:hover {
      opacity: 0.6;
    }
}

  /*
    Three cells: copyright left, credit centred, legal right.

    Grid rather than flex + space-between, because "centred" has to mean centred
    on the footer — with space-between the middle item only ever sits midway
    between its neighbours, so it slides left or right whenever the legal row
    changes width (which it does: two of the three legal labels are non-links
    until those policies are published).

    Columns are assigned explicitly below, so the DOM order (copyright, legal,
    credit) does not have to change to get the visual order.
  */
  .ofuel-footer__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px 24px;
    align-items: center;
    padding-top: 33px;
    border-top: 1px solid rgba(240, 239, 235, 0.2);
    opacity: 0.7;
  }

  /*
    grid-row: 1 on all three is load-bearing. The DOM order is copyright, legal,
    credit, so with only grid-column set, auto-placement puts the credit on a
    SECOND row — the placement cursor has already passed column 2 by the time it
    reaches that element. Pinning the row keeps all three on one line.
  */
  .ofuel-footer__bar .ofuel-footer__meta {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .ofuel-footer__bar .ofuel-footer__credit {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    /* Matches the copyright beside it — it used to sit on its own line at 14px. */
    font-size: 12px;
    line-height: 16px;
  }

  .ofuel-footer__bar .ofuel-footer__legal {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .ofuel-footer__meta {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .ofuel-footer__legal li + li::before {
    content: '·';
    margin-right: 12px;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-footer__legal a,
  .ofuel-footer__legal .ofuel-footer__legal-pending {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--ofuel-cream, #f0efeb);
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  /*
    A label whose policy has not been published yet. Sits at the same weight as its
    siblings so the row still reads as one set, but is not a link and gets no hover —
    nothing here suggests it is clickable.
  */
  .ofuel-footer__legal-pending {
    cursor: default;
  }

  @media (hover: hover) {
  .ofuel-footer__legal a:hover {
      opacity: 0.6;
    }
}

  .ofuel-footer__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .ofuel-footer__col--social {
    align-items: flex-end;
    text-align: right;
  }

  .ofuel-footer__socials a,
  .ofuel-footer__social-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ofuel-cream, #f0efeb);
    transition: opacity 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-footer__socials a:hover {
      opacity: 0.6;
    }
}

  .ofuel-footer__socials svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .ofuel-footer__credit {
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-footer__credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .ofuel-footer__tagline {
    margin: 40px 0 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: var(--ofuel-cream, #f0efeb);
    opacity: 0.7;
    text-align: center;
  }

  .ofuel-footer__link-pending {
    cursor: default;
  }

  .ofuel-footer__wordmark {
    display: block;
    width: var(--wordmark-width, 58%);
    height: auto;
    margin: 8px auto 0;
    fill: var(--ofuel-cream, #f0efeb);
  }

  @media screen and (max-width: 749px) {
    .ofuel-footer__cols {
      flex-wrap: wrap;
      gap: 32px 24px;
    }

    .ofuel-footer__col {
      flex: 1 1 40%;
    }

    /*
      Undo the desktop right-alignment once the columns wrap.

      On desktop the social block is the last of four columns sitting against the
      right edge, so flush-right is correct there. Wrapped into a 2-up grid it
      becomes the right-hand cell of the second row, and right-aligning inside
      that cell pushed "Follow Ofuel" and the icons away from the Learn column
      directly above them — every other heading starts on its column's left edge
      and this one did not.
    */
    .ofuel-footer__col--social {
      align-items: flex-start;
      text-align: left;
    }

    /*
      Tap targets, mobile only — desktop keeps its tighter typographic rhythm.

      The links were 20px tall on a 28px pitch, so both the target and the gap
      between neighbours were under the 44px floor. Padding grows the hit box to
      44px and the gap drops to 0 so adjacent targets meet exactly rather than
      overlapping — overlapping hit areas cause mis-taps, which is worse than
      small ones.
    */
    .ofuel-footer__links {
      gap: 0;
    }

    .ofuel-footer__links a {
      display: block;
      padding-block: 12px;
    }

    /* Legal row is horizontal, so it needs height only — the separators keep the
       horizontal spacing and must not move. */
    .ofuel-footer__legal a,
    .ofuel-footer__legal .ofuel-footer__legal-pending {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    .ofuel-footer__socials a,
    .ofuel-footer__social-placeholder {
      width: 44px;
      height: 44px;
      /* Pull the row back flush left so the enlarged boxes do not indent the
         icons away from the heading above them. */
      margin-inline-start: -12px;
    }

    /*
      Three columns cannot hold copyright + credit + three legal links at 390px,
      so the bar stacks. Everything centres, which keeps the credit's centred
      treatment intact rather than making it a one-off desktop behaviour.
    */
    .ofuel-footer__bar {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      text-align: center;
    }

    /*
      Stacked, and explicitly ordered — the DOM order is copyright, legal, credit,
      which would otherwise leave "Powered by Junctn" stranded below the legal
      list rather than beside the copyright it belongs with.
    */
    .ofuel-footer__bar .ofuel-footer__meta {
      grid-column: 1;
      grid-row: 1;
      justify-self: center;
    }

    .ofuel-footer__bar .ofuel-footer__credit {
      grid-column: 1;
      grid-row: 2;
      justify-self: center;
    }

    .ofuel-footer__bar .ofuel-footer__legal {
      grid-column: 1;
      grid-row: 3;
      justify-self: center;
    }

    /*
      Stack the legal links instead of wrapping them. With 44px tap targets three
      labels cannot share a 390px line, and the "·" separator is a ::before on
      each item after the first — so a wrapped item arrives on its new line led by
      an orphaned dot. Stacking removes the wrap, and the separators go with it.
    */
    .ofuel-footer__legal {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
    }

    .ofuel-footer__legal li + li::before {
      content: none;
      margin-right: 0;
    }
  }
/* END_SECTION:ofuel-footer */

/* START_SECTION:ofuel-formula (INDEX:71) */
.ofuel-formula {
    background: var(--fm-bg, #f0eeeb);
  }

  .ofuel-formula__inner {
    max-width: 1720px;
    margin-inline: auto;
    padding: 64px clamp(20px, 5vw, 85px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: stretch;
  }

  .ofuel-formula__media {
    border-radius: 24px;
    overflow: hidden;
    min-height: 100%;
  }

  .ofuel-formula__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 20 / 19;
    object-fit: cover;
    display: block;
    border-radius: 11px;
  }

  .ofuel-formula__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: center;
  }

  .ofuel-formula__eyebrow {
    align-self: flex-start;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-formula__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-formula__h-bold { font-weight: 700; }
  .ofuel-formula__h-italic { font-weight: 300; font-style: italic; }

  .ofuel-formula__body {
    margin: 0;
    max-width: 602px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-formula__list {
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-formula__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
  }

  .ofuel-formula__row + .ofuel-formula__row {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-formula__icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--ofuel-coral, #f57379);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-formula__icon svg { width: 22px; height: 22px; display: block; }

  .ofuel-formula__row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ofuel-formula__row-title {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.4px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-formula__row-desc {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  @media screen and (max-width: 989px) {
    .ofuel-formula__inner {
      grid-template-columns: 1fr;
      padding-block: 80px;
    }
    .ofuel-formula__img { aspect-ratio: 1 / 1; }
  }
/* END_SECTION:ofuel-formula */

/* START_SECTION:ofuel-header (INDEX:72) */
/*
    Height of the floating bar, in one place: the spacer below reserves it, and
    html's scroll-padding offsets in-page anchors by it. Declared on :root so
    `html` can read it — a custom property on .ofuel-header would be invisible
    to its own ancestor.
  */
  :root {
    --ofuel-header-h: 96px;
  }

  /*
    84, not 80: 12px inner padding top and bottom + the 60px right-hand pill
    (8 + the 44px icon button + 8). It was 80 because the mobile icon buttons were
    raised 40 -> 44px for the tap-target floor and this was never re-measured, so
    non-overlay templates tucked 4px of content under the bar. Desktop is
    20 + (8 + 40 + 8) + 20 = 96.
  */
  @media screen and (max-width: 749px) {
    :root {
      --ofuel-header-h: 84px;
    }
  }

  /*
    Anchor targets (#apply, #partner-benefits on the stockist page, the compare
    steps) would otherwise land underneath the pinned bar.
  */
  html {
    scroll-padding-top: calc(var(--ofuel-header-h, 96px) + 16px);
  }

  .ofuel-header {
    position: relative;
    z-index: 100;
  }

  /*
    fixed, not absolute: the bar stays pinned to the viewport while the page
    scrolls. It leaves the flow either way, so the spacer/overlay split below is
    unchanged. Safe because header-group is a direct <body> child — a transformed
    or filtered ancestor anywhere above would re-anchor the containing block and
    silently turn this back into absolute-ish behaviour.

    z-index 100 sits above every ofuel-* section (highest is 40, the product
    page's sticky buy box) and below the cart drawer's 1000, which must cover it.
  */
  .ofuel-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .ofuel-header__inner {
    max-width: 1770px;
    margin-inline: auto;
    padding: 20px clamp(16px, 4vw, 85px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ofuel-header__pill {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  .ofuel-header__pill--left {
    gap: 24px;
    padding: 8px 24px 8px 20px;
  }

  .ofuel-header__pill--right {
    gap: 8px;
    padding: 8px;
  }

  .ofuel-header__logo {
    display: inline-flex;
    align-items: center;
  }

  .ofuel-header__logo-img {
    display: block;
    height: 29px;
    width: auto;
  }

  /* Desktop nav */
  .ofuel-header__nav {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .ofuel-header__nav a,
  .ofuel-header__mobile-nav a,
  .ofuel-header__dd-toggle,
  .ofuel-header__msub-summary {
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
  }

  /* ---------------- Shop dropdown (desktop) ---------------- */

  /* The panel anchors to this. Nothing in the nav was positioned before. */
  .ofuel-header__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .ofuel-header__dd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .ofuel-header__chev {
    width: 12px;
    height: 12px;
    flex: none;
    transition: transform 0.2s ease;
  }

  .ofuel-header__item.is-open .ofuel-header__chev,
  .ofuel-header__msub[open] .ofuel-header__chev {
    transform: rotate(180deg);
  }

  /*
    visibility rather than display:none so the panel can transition, and so it is
    removed from the tab order while closed. The padding-top is a hover bridge:
    without it the pointer crosses a dead gap between the pill and the panel and
    the menu closes underneath it.
  */
  .ofuel-header__dd {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 18px;
    min-width: 264px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 20;
  }

  .ofuel-header__item.is-open .ofuel-header__dd {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ofuel-header__dd-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  }

  .ofuel-header__dd-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 14px;
    border-radius: 14px;
    transition: background-color 0.15s ease;
  }

  .ofuel-header__dd-note {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--ofuel-gray, #565552);
  }

  /* Shop All is the closing row — a hairline separates it from the products. */
  .ofuel-header__dd-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 12px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 0 14px 14px;
    font-weight: 700;
    transition: background-color 0.15s ease;
  }

  .ofuel-header__dd-all svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
    .ofuel-header__dd-link:hover,
    .ofuel-header__dd-all:hover {
      background: var(--ofuel-cream, #f0efeb);
    }

    .ofuel-header__dd-all:hover svg {
      transform: translateX(3px);
    }
  }

  /* ---------------- Shop dropdown (mobile, inside the burger) ---------------- */

  /*
    A nested <details>. The browser supplies aria-expanded on the summary, so the
    burger stays JS-free exactly as it was. Deliberately NOT reusing
    .ofuel-header__mobile-nav, which is position:absolute and would escape the
    burger panel.
  */
  .ofuel-header__msub {
    width: 100%;
  }

  .ofuel-header__msub-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    list-style: none;
  }

  .ofuel-header__msub-summary::-webkit-details-marker {
    display: none;
  }

  .ofuel-header__msub-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ofuel-header__msub-all {
    font-weight: 700;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-header__dd,
    .ofuel-header__chev,
    .ofuel-header__dd-link,
    .ofuel-header__dd-all,
    .ofuel-header__dd-all svg {
      transition: none;
    }
  }

  @media (hover: hover) {
  .ofuel-header__nav a:hover,
    .ofuel-header__mobile-nav a:hover {
      opacity: 0.6;
    }
}

  /* Mobile disclosure hidden on desktop */
  .ofuel-header__mobile-menu {
    display: none;
  }

  .ofuel-header__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--ofuel-black, #000);
    transition: background-color 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-header__icon-btn:hover {
      background: rgba(0, 0, 0, 0.05);
    }
}

  .ofuel-header__icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Rendered even at zero so the drawer always has a node to write into. */
  .ofuel-header__count.is-empty {
    display: none;
  }

  .ofuel-header__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ofuel-coral, #f57379);
    color: #fff;
    font-family: var(--ofuel-font);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    text-align: center;
  }

  .ofuel-header__signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-header__signin:hover {
      opacity: 0.88;
    }
}

  .ofuel-header__signin svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /*
    Scoped as `.ofuel-header .ofuel-header__spacer` for one specific reason:
    Dawn's base.css:496 has `div:empty { display: none }`, and this spacer has no
    children — so a single-class rule (0,1,0) loses to `div:empty` (0,1,1) and
    the spacer collapsed to 0. It has been collapsed on every page since it was
    written; the hand-built pages only looked right because their own sections
    carry enough top padding to hide it. Two classes (0,2,0) wins.

    Height comes from --ofuel-header-h at the top of this file (96px desktop,
    84px below 749px) so it cannot drift from the bar again — so Dawn content
    starts flush beneath the bar rather than under it.
  */
  .ofuel-header .ofuel-header__spacer {
    display: block;
    height: var(--ofuel-header-h, 96px);
  }

  @media screen and (max-width: 749px) {
    .ofuel-header__inner {
      padding: 12px 16px;
    }

    .ofuel-header__pill--left {
      gap: 12px;
      padding: 6px 16px;
    }

    /*
      Cart and Sign-in were 40x40 — 4px under the tap floor. Raised only at mobile
      so the desktop pill keeps its proportions. Verified afterwards that the
      right-hand pill still fits at 320px without pushing the header wider.
    */
    .ofuel-header__icon-btn {
      width: 44px;
      height: 44px;
    }

    /*
      Height only — Sign in is a text pill with `padding: 0 16px` and an auto
      width, so pinning a width here would clip the label.
    */
    .ofuel-header__signin {
      height: 44px;
    }

    /* Swap desktop nav for the burger disclosure */
    .ofuel-header__nav {
      display: none;
    }

    .ofuel-header__mobile-menu {
      display: flex;
      align-items: center;
      position: relative;
    }

    .ofuel-header__burger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /*
        44px is the Apple HIG tap floor. This is the most-tapped control on every
        mobile page — it was 32x32 with no padding, so nothing lifted it. The
        negative margin keeps the icon optically where it was while the hit area
        grows around it, so the pill layout does not shift.
      */
      width: 44px;
      height: 44px;
      margin: -6px;
      cursor: pointer;
      list-style: none;
      color: var(--ofuel-black, #000);
    }

    /*
      Every destination in the burger panel — 7 links plus the Shop disclosure —
      was exactly 20px tall (line-height only, no padding). That is the entire
      mobile navigation sitting at well under half the 44px tap floor, with
      neighbouring rows close enough to mis-tap. Padding is used rather than a
      height so the rows still wrap correctly if a label ever gets long.

      Scoped to the mobile panel only: the desktop nav shares the base rule at
      :170 but lives in a fixed-height horizontal pill, where vertical padding
      would stretch the pill.
    */
    .ofuel-header__mobile-nav a,
    .ofuel-header__msub-summary,
    .ofuel-header__msub-all {
      display: block;
      padding-block: 12px;
      min-height: 44px;
      box-sizing: border-box;
    }

    .ofuel-header__burger::-webkit-details-marker {
      display: none;
    }

    .ofuel-header__burger svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .ofuel-header__mobile-nav {
      display: none;
      position: absolute;
      top: calc(100% + 12px);
      /*
        Left-anchored to the burger, as before. `right: 0` was tried and is worse:
        the burger sits mid-bar rather than at the screen edge, so right-anchoring
        pushed the panel 47px off-screen to the LEFT and clipped the labels.

        The max-width encodes where the panel starts: its left origin is the
        burger, ~130px in, so the widest it can be without passing the right edge
        is the viewport minus that origin minus a 16px gutter. At 320px this took
        the panel's right edge from 340 to 304 and the page's overflow from 20 to
        0; at 360/390/430 the geometry is unchanged, so nothing moves on a real
        device. The longest label only wraps below ~340px.

        The 146 is admittedly a magic number tied to the logo + burger width. The
        robust equivalent is to drop `position: relative` from
        .ofuel-header__mobile-menu so the panel resolves against
        .ofuel-header__bar (which spans the full width) and use `right: 16px` —
        worth doing if the header layout ever changes.
      */
      left: 0;
      right: auto;
      max-width: calc(100vw - 146px);
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      background: #fff;
      border-radius: 16px;
      padding: 16px 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      z-index: 10;
    }

    .ofuel-header__mobile-menu[open] .ofuel-header__mobile-nav {
      display: flex;
    }

    .ofuel-header__signin span {
      display: none;
    }

    .ofuel-header__signin {
      width: 40px;
      padding: 0;
      justify-content: center;
    }
  }
/* END_SECTION:ofuel-header */

/* START_SECTION:ofuel-hero (INDEX:73) */
.ofuel-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 90svh, var(--hero-min-h, 929px));
    overflow: hidden;
    background: var(--hero-bg, #eeece7);
  }

  .ofuel-hero__media {
    position: absolute;
    inset: 0;
  }

  .ofuel-hero__poster,
  .ofuel-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-focal, center center);
    pointer-events: none;
  }

  /*
    The video sits above the poster but stays invisible until it is actually
    playing, so a buffering or blocked video never shows as a black rectangle
    over the still. .is-playing is added on the first `playing` event.
  */
  .ofuel-hero__video {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .ofuel-hero__video.is-playing {
    opacity: 1;
  }

  /* Autoplay refused, network error, or a connection we chose not to spend. */
  .ofuel-hero__video.is-inert {
    display: none;
  }

  /*
    Single scrim layer above both, so the headline stays legible over a moving
    image. Driven by --hero-scrim; the mobile rules below override it wholesale.
  */
  .ofuel-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--hero-scrim, transparent);
    pointer-events: none;
  }

  /*
    Visitors who ask for reduced motion get the still poster, never the moving
    video. Hiding it also stops it downloading and decoding.
  */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-hero__video {
      display: none;
    }
  }

  .ofuel-hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--ofuel-container, 1400px);
    margin-inline: auto;
    padding: clamp(80px, 12vh, 160px) var(--ofuel-container-pad, 24px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 24px;
  }

  .ofuel-hero__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: -8px;
    border-radius: 999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ofuel-hero__heading {
    margin: 0;
    max-width: 12ch;
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    /* px, not rem — the theme sets a 62.5% root, so 1rem is 10px here. */
    font-size: clamp(36px, 6.2vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.05em;
    text-transform: uppercase;
  }

  .ofuel-hero__line {
    display: block;
  }

  .ofuel-hero__line--top {
    font-weight: 500;
    font-style: normal;
  }

  .ofuel-hero__line--em {
    font-weight: 700;
    font-style: italic;
  }

  .ofuel-hero__line-inner {
    display: block;
  }

  /* Staggered line-by-line rise reveal. */
  @media (prefers-reduced-motion: no-preference) {
    .ofuel-hero__line {
      overflow: hidden;
      padding: 0.05em 0.12em;
      margin: -0.05em -0.12em;
    }

    .ofuel-hero__line-inner {
      transform: translateY(115%);
      animation: ofuel-hero-line-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: calc(var(--line-i, 0) * 0.1s + 0.15s);
    }
  }

  @keyframes ofuel-hero-line-rise {
    from {
      transform: translateY(115%);
    }
    to {
      transform: translateY(0);
    }
  }

  .ofuel-hero__sub {
    margin: 8px 0 0;
    color: var(--ofuel-black, #000);
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .ofuel-hero__body {
    margin: 0;
    max-width: 46ch;
    color: var(--ofuel-gray, #565552);
    font-size: 16px;
    line-height: 26px;
  }

  .ofuel-hero__microcopy {
    margin: -12px 0 0;
    max-width: 42ch;
    color: var(--ofuel-gray, #565552);
    font-size: 13px;
    line-height: 20px;
  }

  .ofuel-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
  }

  .ofuel-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 400;
    white-space: nowrap;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .ofuel-hero__btn--primary {
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    gap: 12px;
    padding: 8px 8px 8px 24px;
  }

  .ofuel-hero__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    flex: none;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-hero__btn--primary:hover .ofuel-hero__btn-icon {
      transform: translateX(3px);
    }
}

  .ofuel-hero__btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-hero__btn--secondary {
    background: var(--ofuel-white, #fff);
    color: var(--ofuel-black, #000);
    height: 52px;
    padding: 12px 24px;
  }

  @media (hover: hover) {
  .ofuel-hero__btn:hover {
      transform: translateY(-1px);
      opacity: 0.95;
    }
}

  .ofuel-hero__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  /*
    Below ~990px the footage can no longer hold the product clear of the copy,
    so scrim the left edge rather than letting the headline land on the sachet.
  */
  @media screen and (max-width: 989px) {
    .ofuel-hero__media::after {
      background: linear-gradient(
        100deg,
        var(--hero-bg, #eeece7) 0%,
        var(--hero-bg, #eeece7) 38%,
        rgba(238, 236, 231, 0) 78%
      );
    }

    .ofuel-hero__heading {
      max-width: 14ch;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-hero__content {
      gap: 20px;
      padding-block: clamp(64px, 14vh, 120px);
    }

    .ofuel-hero__media::after {
      background: linear-gradient(
        170deg,
        var(--hero-bg, #eeece7) 0%,
        var(--hero-bg, #eeece7) 42%,
        rgba(238, 236, 231, 0.55) 70%,
        rgba(238, 236, 231, 0) 100%
      );
    }
  }
/* END_SECTION:ofuel-hero */

/* START_SECTION:ofuel-ingredients (INDEX:74) */
.ofuel-ingredients {
    background: var(--ing-bg, #000);
  }

  .ofuel-ingredients__inner {
    max-width: var(--ofuel-container);
    margin-inline: auto;
    padding: 64px clamp(20px, 5vw, 85px);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-ingredients__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 672px;
  }

  .ofuel-ingredients__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: #fff;
  }

  .ofuel-ingredients__h-bold { font-weight: 700; }
  .ofuel-ingredients__h-italic { font-weight: 300; font-style: italic; }

  .ofuel-ingredients__intro {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.7);
  }

  .ofuel-ingredients__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(48px, 7vw, 128px);
    align-items: stretch;
  }

  .ofuel-ingredients__col {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
  }

  .ofuel-ingredients__list {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .ofuel-ingredients__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .ofuel-ingredients__q {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #fff;
  }

  .ofuel-ingredients__num {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.5);
    flex: none;
  }

  .ofuel-ingredients__name {
    flex: 1;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 32px;
    color: #fff;
  }

  .ofuel-ingredients__toggle {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .ofuel-ingredients__toggle::before,
  .ofuel-ingredients__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease;
  }

  .ofuel-ingredients__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

  .ofuel-ingredients__item.is-open .ofuel-ingredients__toggle {
    background: #fff;
    transform: rotate(45deg);
  }

  .ofuel-ingredients__item.is-open .ofuel-ingredients__toggle::before,
  .ofuel-ingredients__item.is-open .ofuel-ingredients__toggle::after {
    background: #000;
  }

  .ofuel-ingredients__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }

  .ofuel-ingredients__item.is-open .ofuel-ingredients__panel {
    grid-template-rows: 1fr;
  }

  /*
    Cream pill with the coral arrow — the same treatment the other dark bands use
    (ofuel-comparison, ofuel-c101-teaser), so a shopper meets one button style
    across every black section.
  */
  .ofuel-ingredients__cta {
    align-self: flex-start;
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  .ofuel-ingredients__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    transition: transform 0.3s ease;
  }

  .ofuel-ingredients__cta-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-ingredients__cta:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  @media (hover: hover) {
    .ofuel-ingredients__cta:hover {
      transform: translateY(-2px);
      opacity: 0.95;
    }

    .ofuel-ingredients__cta:hover .ofuel-ingredients__cta-icon {
      transform: translateX(4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-ingredients__cta,
    .ofuel-ingredients__cta-icon {
      transition: none;
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: reduce) {
    .ofuel-ingredients__cta:hover,
    .ofuel-ingredients__cta:hover .ofuel-ingredients__cta-icon {
      transform: none;
    }
  }

  .ofuel-ingredients__panel-inner {
    overflow: hidden;
    min-height: 0;
  }

  .ofuel-ingredients__serving {
    display: block;
    padding-left: 34px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #ff777c;
  }

  .ofuel-ingredients__desc {
    margin: 12px 0 0;
    padding-left: 34px;
    padding-bottom: 24px;
    max-width: 520px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.7);
  }

  /* Fills the grid row rather than carrying its own ratio, so it runs the full
     height of the column beside it. */
  .ofuel-ingredients__media {
    border-radius: 24px;
    overflow: hidden;
    min-height: 950px;
    background: rgba(240, 239, 235, 0.05);
  }

  .ofuel-ingredients__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-ingredients__panel,
    .ofuel-ingredients__toggle,
    .ofuel-ingredients__toggle::before,
    .ofuel-ingredients__toggle::after,
    .ofuel-ingredients__img { transition: none; }
  }

  @media screen and (max-width: 989px) {
    .ofuel-ingredients__inner { padding-block: 80px; }
    .ofuel-ingredients__grid {
      grid-template-columns: 1fr;
    }
    .ofuel-ingredients__media {
      order: -1;
      min-height: 0;
      aspect-ratio: 16 / 10;
    }
  }
/* END_SECTION:ofuel-ingredients */

/* START_SECTION:ofuel-main-product (INDEX:75) */
.ofuel-product {
    background: var(--pdp-bg, #f0eeeb);
  }

  .ofuel-product__inner {
    max-width: 1500px;
    margin-inline: auto;
    /*
      Top padding here is HEADER CLEARANCE, not rhythm, so it is a fixed value
      rather than the fluid clamp the bottom still uses.

      The header pills are position: fixed and float over the first section of
      every page. Their bottom edge is a constant 65px (20px bar padding + the
      45px pill), and 56px below 750px where the pill is smaller. The old
      clamp(32px, 5vw, 72px) only reached 72px at 1440 and wider — everywhere
      narrower it shrank while the pill did not, so the nav sat on top of the
      product circle: 64px at 1280 (1px of overlap), 51px at 1024 (14px), 32px
      on a phone (24px). That is the "image looks cropped on a 13-inch screen"
      report — the circle was not cropped, it was covered.

      Measured clearances after this change: 7px at every desktop width, 8px
      below 750px. Do not put this back on a viewport unit: the thing it has to
      clear does not scale with the viewport.
    */
    --pdp-header-clear: 72px;
    padding-block: var(--pdp-header-clear) 64px;
    padding-inline: clamp(20px, 5vw, 85px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: clamp(32px, 6vw, 120px);
    align-items: start;
  }

  /*
    Buy box sticks while the tall gallery scrolls. The offset clears the now-
    fixed header (--ofuel-header-h, set in ofuel-header.liquid) — at a bare 24px
    the top of the buy box parked underneath the floating pills.
  */
  .ofuel-product__buy {
    position: sticky;
    top: calc(var(--ofuel-header-h, 96px) + 24px);
    align-self: start;
  }

  /* Gallery (stacked column — matches the Figma product page) */
  .ofuel-product__gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-product__g-main {
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    overflow: hidden;
    background: #f0efeb;
  }

  .ofuel-product__g-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .ofuel-product__g-cell {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }

  .ofuel-product__g-cell--card {
    background: #f0efeb;
  }

  .ofuel-product__g-main img,
  .ofuel-product__g-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* The hero source is a wide studio shot with the sachet right of centre;
     bias the square crop right so the pack lands inside the circle. */
  .ofuel-product__g-main img {
    object-position: 72% center;
  }

  .ofuel-product__g-cell--card img {
    object-fit: contain;
  }

  /*
    Gallery video. 16/9 matches the source, so the frame never letterboxes, and
    the fixed ratio means the column height is known before the clip loads —
    no layout shift when it starts playing.
  */
  .ofuel-product__g-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #f0efeb;
    line-height: 0;
  }

  .ofuel-product__g-video-poster,
  .ofuel-product__g-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Sits above the poster, revealed only once frames are actually on screen. */
  .ofuel-product__g-video-el {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .ofuel-product__g-video-el.is-playing {
    opacity: 1;
  }

  .ofuel-product__g-video-btn {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: opacity 0.3s ease, background 0.3s ease;
  }

  .ofuel-product__g-video-btn[hidden] {
    display: none;
  }

  @media (hover: hover) {
  .ofuel-product__g-video-btn:hover {
      background: rgba(0, 0, 0, 0.18);
    }
}

  .ofuel-product__g-video-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 56px keeps the tap target well clear of the 44px minimum on mobile. */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-black, #000);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease;
  }

  @media (hover: hover) {
  .ofuel-product__g-video-btn:hover .ofuel-product__g-video-btn-icon {
      transform: scale(1.06);
    }
}

  .ofuel-product__g-video-btn-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    margin-left: 2px;
  }

  .ofuel-product__g-video-btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: -4px;
  }

  /* A real product video uploaded to the product keeps its native controls. */
  .ofuel-product__g-cell--media-video video,
  .ofuel-product__g-cell--media-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /*
    Sticky buy bar — mobile only. The desktop buy box is already sticky in its
    column, so a second fixed bar there would be redundant.
  */
  .ofuel-product__sticky {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .ofuel-product__sticky {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      background: rgba(240, 238, 235, 0.94);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      /* Clear of the iOS home indicator. */
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      transform: translateY(110%);
      visibility: hidden;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
    }

    .ofuel-product__sticky.is-visible {
      transform: translateY(0);
      visibility: visible;
    }

    /*
      Space for the fixed bar, applied to the document rather than any one section
      because the element it was covering (the footer) lives outside this section.
      Matches the bar's own padding formula so the safe-area inset is counted once
      on devices with a home indicator.
    */
    .ofuel-pdp-bar-open body {
      padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }
  }

  .ofuel-product__sticky-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin-inline: auto;
  }

  .ofuel-product__sticky-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .ofuel-product__sticky-name {
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--ofuel-black, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ofuel-product__sticky-meta {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--ofuel-gray, #565552);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ofuel-product__sticky-btn {
    flex: none;
    /* 48px keeps the tap target above the 44px minimum. */
    min-height: 48px;
    padding: 12px 22px;
    border: 0;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .ofuel-product__sticky-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .ofuel-product__sticky-btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  /* "/month" sits alongside the amount without competing with it. */
  .ofuel-product__option-per {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.6;
    margin-left: 2px;
  }

  /*
    A subscription option that has no selling plan yet. Still fully legible —
    the point is to show the offer, not hide it — but visibly held back so the
    disabled Add to cart is not a surprise.
  */
  .ofuel-product__option--pending {
    opacity: 0.72;
  }

  .ofuel-product__option-pending {
    display: block;
    margin-top: 6px;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    font-style: italic;
    color: var(--ofuel-gray, #565552);
  }

  /* Fixed ratio, not the source's — the band art is a tall portrait crop that
     would otherwise blow the gallery column out to several thousand pixels. */
  /* ---------------- Gallery lightbox ---------------- */

  /*
    The affordance is applied by JS (.is-zoomable), never in the stylesheet — with
    JS off there is no lightbox, and a zoom-in cursor promising a viewer that
    cannot open would be a lie.
  */
  .ofuel-product__gallery .is-zoomable {
    cursor: zoom-in;
  }

  .ofuel-product__gallery .is-zoomable:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100; /* above the header (100); below nothing else on the page */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .ofuel-lightbox.is-open {
    opacity: 1;
    visibility: visible;
  }

  .ofuel-lightbox__stage {
    position: relative;
    width: min(92vw, 1200px);
    height: min(86vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ofuel-lightbox__media,
  .ofuel-lightbox__media video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 12px;
  }

  .ofuel-lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    cursor: pointer;
    z-index: 2;
  }

  .ofuel-lightbox__btn svg {
    width: 20px;
    height: 20px;
  }

  .ofuel-lightbox__btn--prev { left: -64px; }
  .ofuel-lightbox__btn--next { right: -64px; }

  .ofuel-lightbox__close {
    position: absolute;
    top: -52px;
    right: 0;
    transform: none;
  }

  .ofuel-lightbox__count {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ofuel-font);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
  }

  /* Below ~900px the side arrows have nowhere to sit outside the stage. */
  @media screen and (max-width: 900px) {
    .ofuel-lightbox__stage {
      width: 100vw;
      height: 78vh;
    }

    .ofuel-lightbox__btn--prev { left: 12px; }
    .ofuel-lightbox__btn--next { right: 12px; }
    .ofuel-lightbox__close { top: -48px; right: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-lightbox {
      transition: none;
    }
  }

  /*
    position: relative added when the band became a video — the poster, the
    <video> and the play button all layer absolutely inside it, exactly as in
    .ofuel-product__g-video above.
  */
  .ofuel-product__g-band {
    position: relative;
    aspect-ratio: 2.8 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #f0efeb;
    line-height: 0;
  }

  .ofuel-product__g-band img,
  .ofuel-product__g-band-poster,
  .ofuel-product__g-band-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Sits above the poster, revealed only once frames are actually on screen. */
  .ofuel-product__g-band-video {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .ofuel-product__g-band-video.is-playing {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-product__g-band-video {
      transition: none;
    }
  }

  /* Buy box */
  .ofuel-product__form {
    display: flex;
    flex-direction: column;
    gap: 17px;
  }

  .ofuel-product__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: clamp(40px, 3.6vw, 62px);
    line-height: 1.02;
    letter-spacing: -1.6px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-product__title-brand {
    display: block;
    font-weight: 700;
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-product__title-name {
    display: block;
    font-weight: 500;
  }

  .ofuel-product__subtitle {
    margin: 4px 0 0;
    max-width: 640px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 26px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__checks {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ofuel-product__check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ofuel-font);
    font-size: 15px;
    line-height: 22px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-product__check {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    color: #fff;
  }

  .ofuel-product__check svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .ofuel-product__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-product__h2 {
    margin: 8px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-product__hint {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-product__option {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 22px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .ofuel-product__option:has(.ofuel-product__radio:checked) {
    border-color: var(--ofuel-coral, #f57379);
    background: rgba(245, 115, 121, 0.1);
  }

  /*
    The real radio is opacity:0 / pointer-events:none, so the whole card is the
    click target — but nothing told a desktop visitor that. Colour only, reusing
    the transition already declared above: no transform and no shadow, because the
    coral :checked state is what should read as selection, not the pointer.

    Scoped to :not(:checked) so hovering the already-selected card does not pull
    its coral border back to grey.
  */
  @media (hover: hover) {
    .ofuel-product__option:not(:has(.ofuel-product__radio:checked)):hover {
      border-color: rgba(0, 0, 0, 0.32);
    }
  }

  .ofuel-product__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .ofuel-product__radio-dot {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    transition: border-color 0.15s ease;
  }

  .ofuel-product__radio-dot--sm {
    width: 16px;
    height: 16px;
    margin-top: 0;
  }

  .ofuel-product__option:has(.ofuel-product__radio:checked) .ofuel-product__radio-dot,
  .ofuel-product__plan:has(.ofuel-product__radio:checked) .ofuel-product__radio-dot {
    border-color: var(--ofuel-black, #000);
    border-width: 6px;
  }

  .ofuel-product__option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .ofuel-product__option-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-product__option-meta {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__option-blurb {
    margin-top: 4px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__badge {
    position: absolute;
    top: -11px;
    left: 21px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
  }

  /* Plans */
  .ofuel-product__plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ofuel-product__plans--single {
    grid-template-columns: 1fr;
  }

  .ofuel-product__plan {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    padding: 16px 17px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .ofuel-product__plan:has(.ofuel-product__radio:checked) {
    border-color: var(--ofuel-coral, #f57379);
    background: rgba(245, 115, 121, 0.1);
  }

  /* Same pattern as .ofuel-product__option above. */
  @media (hover: hover) {
    .ofuel-product__plan:not(:has(.ofuel-product__radio:checked)):hover {
      border-color: rgba(0, 0, 0, 0.32);
    }
  }

  .ofuel-product__plan-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-product__plan--sub:has(.ofuel-product__radio:checked) .ofuel-product__radio-dot {
    background: var(--ofuel-coral, #f57379);
    border-color: var(--ofuel-coral, #f57379);
    border-width: 2px;
  }

  .ofuel-product__plan-note {
    grid-column: 1 / -1;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__plan-price {
    grid-column: 1 / -1;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-product__frequency {
    position: relative;
  }

  .ofuel-product__select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 14px 42px 14px 18px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    background: #fff;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
    cursor: pointer;
  }

  .ofuel-product__select-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ofuel-black, #000);
    pointer-events: none;
  }

  .ofuel-product__select-icon svg { width: 100%; height: 100%; display: block; }

  /* Pre-launch stand-in for the Add to cart button. */
  .ofuel-product__prelaunch {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-product__prelaunch-note {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 21px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__prelaunch-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 16px 24px;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  @media (hover: hover) {
    .ofuel-product__prelaunch-cta:hover {
      opacity: 0.88;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-product__prelaunch-cta {
      transition: none;
    }
  }

  .ofuel-product__atc {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    /*
      52px / 14px is the site button standard (see ofuel-hero__btn). This was
      64px at 16px — it stays full-width, which is what gives it prominence in
      the buy box, but it no longer disagrees in height with every other CTA.
    */
    height: 52px;
    box-sizing: border-box;
    padding: 0 24px;
    font-size: 14px;
    line-height: 20px;
    border: none;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-product__atc:hover { opacity: 0.9; }
}
  .ofuel-product__atc:disabled { opacity: 0.45; cursor: not-allowed; }

  .ofuel-product__atc-compare {
    margin-left: 8px;
    font-weight: 400;
    opacity: 0.55;
  }
  .ofuel-product__atc-compare:empty { display: none; }

  /* Accordions — reuses the home-page FAQ animation (grid-rows reveal, rotating +/− circle, single-open) */
  .ofuel-product__accordions {
    margin-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-product__acc {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .ofuel-product__acc-q {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
  }

  .ofuel-product__acc-label {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  /* The design uses a bare chevron here, not the circled +/− the FAQ uses. */
  .ofuel-product__acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--ofuel-black, #000);
    transition: transform 0.3s ease;
  }

  .ofuel-product__acc-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-product__acc.is-open .ofuel-product__acc-icon { transform: rotate(180deg); }

  /*
    The row is a full-width <button> with cursor:pointer and, until now, no hover
    state at all — the borders made it read as a static spec table. A 2px nudge in
    the direction the panel opens pre-announces what the click does.

    Declared AFTER the .is-open rotate so an open row keeps its 180deg, and inside
    the 20x20 icon box so nothing reflows. It reuses the icon's existing
    transition: transform 0.3s ease.
  */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ofuel-product__acc:not(.is-open) .ofuel-product__acc-q:hover .ofuel-product__acc-icon {
      transform: translateY(2px);
    }
  }

  .ofuel-product__acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }

  .ofuel-product__acc.is-open .ofuel-product__acc-panel {
    grid-template-rows: 1fr;
  }

  .ofuel-product__acc-panel-inner {
    overflow: hidden;
    min-height: 0;
  }

  .ofuel-product__acc-a {
    padding: 0 0 22px;
    font-family: var(--ofuel-font);
    font-size: 15px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-product__acc-a p {
    margin: 0 0 12px;
  }

  .ofuel-product__acc-a > :last-child {
    margin-bottom: 0;
  }

  .ofuel-product__acc-list {
    margin: 0 0 12px;
    padding-left: 20px;
    list-style: disc;
  }

  .ofuel-product__acc-list li {
    margin-bottom: 6px;
  }

  .ofuel-product__acc-list li:last-child {
    margin-bottom: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-product__acc-panel,
    .ofuel-product__acc-icon {
      transition: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-product__inner {
      grid-template-columns: minmax(0, 1fr);
    }
    .ofuel-product__buy {
      position: static;
    }
    .ofuel-product__plans {
      grid-template-columns: 1fr;
    }
  }

  /*
    Below 750px the header switches to its smaller pill, whose bottom edge sits
    at 56px instead of 65px — matching the breakpoint ofuel-header.liquid uses
    for --ofuel-header-h. Clearance is kept the same 8px, not the same padding.
  */
  @media screen and (max-width: 749px) {
    .ofuel-product__inner {
      --pdp-header-clear: 64px;
    }
  }
/* END_SECTION:ofuel-main-product */

/* START_SECTION:ofuel-personas (INDEX:76) */
.ofuel-personas {
    background: var(--personas-bg, #f0efeb);
  }

  /* Figma's content column is 1400px wide; box-sizing is border-box here, so the
     gutter has to be added on top or the grid comes out narrow. */
  .ofuel-personas__inner {
    --gutter: clamp(20px, 5vw, 85px);
    max-width: calc(var(--ofuel-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 64px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ofuel-personas__head {
    max-width: 1010px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ofuel-personas__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-personas__em {
    font-style: italic;
  }

  .ofuel-personas__sub {
    margin: 0;
    max-width: 630px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-personas__outro {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .ofuel-personas__outro-heading {
    margin: 0;
    max-width: 800px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /* A step below the section h2 — this closes the block, it does not open it. */
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.9px;
    text-wrap: balance;
    /* Dawn styles bare headings, so the colour has to be explicit. */
    color: var(--ofuel-black, #000);
  }

  .ofuel-personas__outro-body {
    margin: 0;
    max-width: 620px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--ofuel-gray, #565552);
    text-wrap: pretty;
  }

  .ofuel-personas__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .ofuel-personas__reveal {
    display: grid;
  }

  .ofuel-personas__card {
    --card-fg: var(--ofuel-black, #000);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 29px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
    overflow: hidden;
    transition:
      background-color 0.22s ease,
      border-color 0.22s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
    The permanently-dark card, split out from `:hover`. The two used to share one
    rule, so gating hover on a pointer would have taken this with it and left the
    dark card white on every phone.
  */
  .ofuel-personas__card--dark {
    --card-fg: #f8fafc;
    background: var(--ofuel-black, #000);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .ofuel-personas__card--dark .ofuel-personas__num {
    border-color: rgba(255, 255, 255, 0.22);
  }

  /*
    Gated on a real pointer. This hover inverts the whole card, so latching it on
    touch is worse here than anywhere else on the site — the last card a finger
    passed over would sit black until something else was tapped, reading as a
    selected state that cannot be cleared.
  */
  @media (hover: hover) {
    .ofuel-personas__card:hover {
      --card-fg: #f8fafc;
      background: var(--ofuel-black, #000);
      border-color: rgba(255, 255, 255, 0.08);
      transform: translateY(-6px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
    }

    /* The coral badge carries a dark border tuned for a white card; on black it
       disappears. Swapping it to a light tint keeps the disc reading as a disc. */
    .ofuel-personas__card:hover .ofuel-personas__num {
      border-color: rgba(255, 255, 255, 0.22);
      transform: scale(1.08);
    }
  }

  .ofuel-personas__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .ofuel-personas__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #f8fafc;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    flex: none;
    transition:
      border-color 0.22s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Body sits against the bottom of the card so titles of 1 and 2 lines both
     bottom-align across the row, as in the design. */
  .ofuel-personas__card-body {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 11.25px;
  }

  .ofuel-personas__name {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.48px;
    color: var(--card-fg);
    /*
      Deliberately quicker than the card's 0.22s background. The copy has to
      arrive at near-white before the card finishes arriving at black; at the
      old 0.25s it trailed, leaving dark text on a darkening ground for a couple
      of frames on every hover.
    */
    transition: color 0.16s ease;
  }

  .ofuel-personas__desc {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--card-fg);
    opacity: 0.8;
    /* Leads the background for the same reason as the name above. */
    transition: color 0.16s ease;
  }

  /*
    Reduced motion keeps the colour inversion — that is feedback, not movement —
    and drops the lift and the badge scale. Placed after the hover block so
    `transform: none` wins on equal specificity.
  */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-personas__card,
    .ofuel-personas__num {
      transition: background-color 0.22s ease, border-color 0.22s ease, color 0.16s ease;
    }

    .ofuel-personas__card:hover,
    .ofuel-personas__card:hover .ofuel-personas__num {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-personas__inner {
      padding-block: 80px;
    }

    .ofuel-personas__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-personas__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:ofuel-personas */

/* START_SECTION:ofuel-product-feature (INDEX:77) */
.ofuel-pf {
    background: #fff;
  }

  .ofuel-pf__inner {
    display: flex;
    align-items: center;
  /*
    min-height: 1180px was a Figma FRAME height baked in. With align-items:
    center it padded the section from the inside — the tallest column measures
    808-869px depending on width, so 311-372px of dead space was centred around
    the content, roughly half of it above. That is what read as "too much space
    at the top"; it is not the site's section rhythm, which comes from padding.

    Replaced with real padding: the section is now content-height plus a known
    gap. The visual column's own vertical padding drops to 0 at the same time —
    it only ever existed to compensate for this, and would now stack on top.
  */
    padding-block: 64px;
  }

  .ofuel-pf__visual,
  .ofuel-pf__info {
    flex: 1 1 0;
    min-width: 0;
  }

  /* ---------- Left: radial ---------- */
  .ofuel-pf__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    /* Horizontal only — the inner owns the vertical rhythm now. */
    padding: 0 clamp(24px, 8%, 130px);
  }

  .ofuel-pf__radial {
    position: relative;
    width: min(640px, 100%);
    aspect-ratio: 1 / 1;
  }

  .ofuel-pf__ring {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 97%;
    border: 1.2px solid var(--ofuel-coral, #f57379);
    border-radius: 50%;
  }

  .ofuel-pf__grapefruit {
    position: absolute;
    left: 19.84%;
    right: 19.84%;
    top: 50%;
    transform: translateY(-50%);
    height: 58.6%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
  }

  .ofuel-pf__grapefruit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .ofuel-pf__sachet {
    position: absolute;
    top: 2.13%;
    bottom: 2.09%;
    left: 11.72%;
    right: 11.56%;
    z-index: 2;
  }

  .ofuel-pf__sachet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.14));
  }

  .ofuel-pf__pill {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: #fff;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.12px;
    color: var(--ofuel-black, #000);
    white-space: nowrap;
  }

  /* Six pills evenly spaced around the ring, clockwise from the top. */
  .ofuel-pf__pill--1 { left: 50%; top: 0%; }
  .ofuel-pf__pill--2 { left: 93.3%; top: 25%; }
  .ofuel-pf__pill--3 { left: 93.3%; top: 75%; }
  .ofuel-pf__pill--4 { left: 50%; top: 100%; }
  .ofuel-pf__pill--5 { left: 6.7%; top: 75%; }
  .ofuel-pf__pill--6 { left: 6.7%; top: 25%; }

  /* ---- Orbiting pills ---- */
  .ofuel-pf__orbit {
    position: absolute;
    inset: 0;
    z-index: 3;
  }

  .ofuel-pf--animate-pills .ofuel-pf__orbit {
    animation: ofuel-pf-orbit var(--pf-orbit-dur, 40s) linear infinite;
    will-change: transform;
  }

  .ofuel-pf--animate-pills .ofuel-pf__pill {
    animation: ofuel-pf-pill-upright var(--pf-orbit-dur, 40s) linear infinite;
  }

  /* Pause while hovering the diagram so labels are easy to read */
  @media (hover: hover) {
  .ofuel-pf__radial:hover .ofuel-pf__orbit,
    .ofuel-pf__radial:hover .ofuel-pf__pill {
      animation-play-state: paused;
    }
}

  @keyframes ofuel-pf-orbit {
    to { transform: rotate(360deg); }
  }

  @keyframes ofuel-pf-pill-upright {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-pf--animate-pills .ofuel-pf__orbit,
    .ofuel-pf--animate-pills .ofuel-pf__pill {
      animation: none;
    }
  }

  .ofuel-pf__ingredients {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ofuel-pf__ingredients svg {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-pf__ingredients:hover svg {
      transform: translateX(3px);
    }
}

  @media (hover: hover) {
  .ofuel-pf__ingredients:hover {
      opacity: 0.7;
    }
}

  /* ---------- Right: buy box ---------- */
  .ofuel-pf__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
    padding: 61px clamp(24px, 5vw, 56px) 56px;
  }

  .ofuel-pf__eyebrow {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-pf__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
  }

  .ofuel-pf__title-brand {
    display: block;
    font-weight: 700;
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-pf__title-rest {
    display: block;
    font-weight: 500;
    color: var(--ofuel-black, #000);
  }

  .ofuel-pf__desc {
    margin: 0;
    max-width: 448px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-pf__benefits {
    display: flex;
    gap: 12px;
    max-width: 448px;
    width: 100%;
    margin-top: 4px;
  }

  .ofuel-pf__benefit {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /*
    No background here any more. The packaged icons are complete 64x64 badges —
    each SVG is a coral `rect rx=32` plus its glyph — so the coral disc is part of
    the artwork, not the wrapper. Painting #f9898d underneath as well would put a
    coral disc behind a coral disc and shrink the glyph to the old 28px inset.

    A merchant-picked icon (block.settings.icon) is a bare image with no disc, so
    it gets the disc back via the modifier class below.
  */
  .ofuel-pf__benefit-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
  }

  .ofuel-pf__benefit-circle img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .ofuel-pf__benefit-circle--plain {
    background: #f9898d;
  }

  .ofuel-pf__benefit-circle--plain img {
    width: 28px;
    height: 28px;
  }

  .ofuel-pf__benefit-label {
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 11px;
    line-height: 13.75px;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
    text-align: center;
  }

  .ofuel-pf__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .ofuel-pf__list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-pf__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    color: #fff;
    flex: none;
  }

  .ofuel-pf__check svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .ofuel-pf__buy {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    width: 100%;
    margin-top: 21px;
  }

  .ofuel-pf__price {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 5px;
    flex: none;
  }

  .ofuel-pf__price-prefix {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-pf__price-amount {
    font-family: var(--ofuel-font);
    font-size: 36px;
    line-height: 40px;
    color: var(--ofuel-black, #000);
  }

  /*
    Two CTAs share the space the single button used to take. They wrap to their
    own lines before either gets squeezed below a readable width.
  */
  .ofuel-pf__ctas {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .ofuel-pf__cta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
    will-change: transform;
  }

  @media (hover: hover) {
  .ofuel-pf__cta:hover {
      transform: translateY(-2px) scale(1.015);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    }
}

  /* Secondary: same pill, outlined rather than filled — matches the hero pair. */
  .ofuel-pf__cta--secondary {
    justify-content: center;
    padding: 15px 24px;
    min-height: 52px;
    background: var(--ofuel-white, #fff);
    color: var(--ofuel-black, #000);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }

  @media (hover: hover) {
  .ofuel-pf__cta--secondary:hover {
      background: var(--ofuel-cream, #f0efeb);
    }
}

  .ofuel-pf__cta:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-pf__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: #fff;
    flex: none;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-pf__cta:hover .ofuel-pf__cta-icon {
      transform: translateX(4px);
    }
}

  .ofuel-pf__cta-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 989px) {
    .ofuel-pf__inner {
      flex-direction: column;
      padding-block: 64px;
    }

    .ofuel-pf__visual,
    .ofuel-pf__info {
      width: 100%;
    }

    /*
      The clip has to start HERE, at the same breakpoint the layout stacks — not
      at 749px where it used to live.

      The six pills are centred ON the ring, so half of each always hangs outside
      the ring's box, and the orbit rotates a full turn every 40s. Chrome folds
      the ROTATED orbit's overflow rect into the document, so the leak appears and
      disappears with the animation angle — which is why a single-snapshot check
      reports a clean page. Time-sampled over 3s, the unguarded 750-989px band
      scrolled sideways by up to 108px at 830px, i.e. on iPad portrait (768) and
      iPad Air (820).

      Once .ofuel-pf__visual is width:100% its padding box IS the viewport, so the
      slivers being cut are ones nobody could reach without scrolling sideways
      anyway. `clip` not `hidden`: clip creates no scroll container, so it cannot
      trap scrolling or break position:sticky. Above 989px the pills deliberately
      overhang into the padding, so the desktop layout keeps its overflow.
    */
    .ofuel-pf__visual {
      overflow-x: clip;
    }

    .ofuel-pf__info {
      align-items: center;
      text-align: center;
      padding: 8px clamp(24px, 6vw, 56px) 64px;
    }

    .ofuel-pf__title,
    .ofuel-pf__desc,
    .ofuel-pf__benefits,
    .ofuel-pf__list,
    .ofuel-pf__buy {
      margin-inline: auto;
    }

    .ofuel-pf__list-item {
      justify-content: flex-start;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-pf__visual {
      padding: 40px clamp(48px, 16vw, 90px);
      /* overflow-x: clip is set in the 989px block above — it must cover the whole
         stacked range, not just this tier. Capping pill width does NOT work as an
         alternative (tested: 62-66px still leaked from the rotated union rect). */
    }

    /*
      "See the full formula" is a standalone block-level CTA that was 20px tall
      with no padding. Vertical padding only, so the underline stays tight to the
      text and the centred column layout does not move horizontally.
    */
    .ofuel-pf__ingredients {
      padding-block: 12px;
    }

    .ofuel-pf__radial {
      width: min(420px, 100%);
    }

    .ofuel-pf__pill {
      font-size: 11px;
      letter-spacing: 0.8px;
      padding: 6px 12px;
    }
  }
/* END_SECTION:ofuel-product-feature */

/* START_SECTION:ofuel-product-simple (INDEX:78) */
.ofuel-psimple {
    background: var(--ps-bg, #f0efeb);
  }

  .ofuel-psimple__inner {
    --ps-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--ps-gutter));
    margin-inline: auto;
    padding: 64px var(--ps-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
  }

  /*
    The reveal wrapper never carries layout of its own beyond filling its grid
    cell — .ofuel-reveal owns transform, so anything with its own transform has
    to live one level down.
  */
  .ofuel-psimple__col {
    min-width: 0;
  }

  .ofuel-psimple [hidden] {
    display: none !important;
  }

  /* ---------- Media ---------- */
  .ofuel-psimple__media-card {
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 32px;
    background: var(--ps-card, #ffffff);
  }

  .ofuel-psimple__stage {
    aspect-ratio: var(--ps-ratio, 1 / 1);
    border-radius: 24px;
    overflow: hidden;
    background: var(--ofuel-cream, #f0efeb);
  }

  .ofuel-psimple__track {
    position: relative;
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .ofuel-psimple__track::-webkit-scrollbar {
    display: none;
  }

  .ofuel-psimple__slide {
    flex: 0 0 100%;
    height: 100%;
    min-width: 0;
    scroll-snap-align: start;
    line-height: 0;
  }

  .ofuel-psimple__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ofuel-psimple__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .ofuel-psimple__thumbs::-webkit-scrollbar {
    display: none;
  }

  .ofuel-psimple__thumb {
    flex: 0 0 76px;
    width: 76px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ofuel-cream, #f0efeb);
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }

  .ofuel-psimple__thumb.is-active {
    border-color: var(--ps-accent, #f57379);
  }

  .ofuel-psimple__thumb:focus-visible {
    outline: 2px solid var(--ps-accent, #f57379);
    outline-offset: 2px;
  }

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

  /*
    Empty-media state. Deliberate, not a stand-in: the initial and the title are
    the only content, both straight off the product. The ring is a
    pseudo-element because Dawn collapses childless <div>s.
  */
  .ofuel-psimple__placeholder {
    position: relative;
    aspect-ratio: var(--ps-ratio, 1 / 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px;
    border-radius: 24px;
    overflow: hidden;
    text-align: center;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(245, 115, 121, 0.22) 0%, rgba(245, 115, 121, 0) 60%),
      var(--ofuel-cream, #f0efeb);
  }

  .ofuel-psimple__placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(74%, 420px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    pointer-events: none;
  }

  .ofuel-psimple__ph-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--ps-accent, #f57379);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -1px;
  }

  .ofuel-psimple__ph-title {
    position: relative;
    max-width: 22ch;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-wrap: balance;
    color: var(--ofuel-black, #000);
  }

  .ofuel-psimple__ph-note {
    position: relative;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  /* ---------- Buy box ---------- */
  .ofuel-psimple__buy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 32px;
    background: var(--ps-card, #ffffff);
  }

  .ofuel-psimple__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  /*
    The house heading clamp tops out at 60px, which is sized for a full-bleed
    section head. This title sits in a ~600px column beside the gallery, so the
    ceiling comes down to 46px — every other value is the house heading.
  */
  .ofuel-psimple__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-psimple__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
  }

  .ofuel-psimple__from {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__price {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.9px;
    color: var(--ofuel-black, #000);
  }

  /* Reads as a status, not a number — see the matching rule in the grid. */
  .ofuel-psimple__price--tbc {
    font-weight: 600;
    font-size: clamp(22px, 2.1vw, 28px);
    letter-spacing: 0.06em;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__compare {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
    text-decoration-thickness: 1px;
  }

  .ofuel-psimple__save {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 5px 12px;
    background: var(--ps-accent, #f57379);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ofuel-psimple__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: -4px 0 0;
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ofuel-black, #000);
  }

  /* Status dot as a pseudo-element — an empty <span> would survive Dawn's
     :empty rule, but a pseudo keeps the dot out of the accessibility tree. */
  .ofuel-psimple__stock::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #2f7d4f;
  }

  .ofuel-psimple__stock--out {
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__stock--out::before {
    background: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__desc {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__desc > * {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .ofuel-psimple__desc > *:last-child {
    margin-bottom: 0;
  }

  /* Merchant-authored HTML: headings inside it inherit Dawn's foreground
     colour unless they are claimed here. */
  .ofuel-psimple__desc h1,
  .ofuel-psimple__desc h2,
  .ofuel-psimple__desc h3,
  .ofuel-psimple__desc h4,
  .ofuel-psimple__desc h5,
  .ofuel-psimple__desc h6,
  .ofuel-psimple__desc strong,
  .ofuel-psimple__desc b {
    font-family: var(--ofuel-font);
    color: var(--ofuel-black, #000);
  }

  .ofuel-psimple__desc h1,
  .ofuel-psimple__desc h2,
  .ofuel-psimple__desc h3,
  .ofuel-psimple__desc h4,
  .ofuel-psimple__desc h5,
  .ofuel-psimple__desc h6 {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.2px;
  }

  .ofuel-psimple__desc ul,
  .ofuel-psimple__desc ol {
    padding-left: 20px;
  }

  .ofuel-psimple__desc li {
    margin-bottom: 6px;
  }

  .ofuel-psimple__desc a {
    color: var(--ofuel-black, #000);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ofuel-psimple__desc img {
    max-width: 100%;
    height: auto;
  }

  /* ---------- Variant picker ---------- */
  .ofuel-psimple__options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .ofuel-psimple__opt {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* A <legend> is the accessible label for the radio group, but it shrink-wraps
     and floats by default — width and float are pinned so it behaves like a
     normal flex row. */
  .ofuel-psimple__opt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 20px;
  }

  .ofuel-psimple__opt-name {
    font-weight: 700;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-psimple__opt-sel {
    font-weight: 400;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-psimple__opt-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .ofuel-psimple__vinput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .ofuel-psimple__vlabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px keeps the tap target above the mobile minimum. */
    min-height: 44px;
    padding: 11px 18px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
    background: var(--ofuel-white, #fff);
    cursor: pointer;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .ofuel-psimple__vinput:checked + .ofuel-psimple__vlabel {
    border-color: var(--ps-accent, #f57379);
    background: rgba(245, 115, 121, 0.12);
  }

  .ofuel-psimple__vinput:focus-visible + .ofuel-psimple__vlabel {
    outline: 2px solid var(--ps-accent, #f57379);
    outline-offset: 2px;
  }

  /* Advisory only — the value stays selectable so no combination is a dead end. */
  .ofuel-psimple__vlabel.is-unavailable {
    color: var(--ofuel-gray, #565552);
    border-style: dashed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* ---------- Form ---------- */
  .ofuel-psimple__form {
    width: 100%;
    margin: 0;
  }

  .ofuel-psimple__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }

  .ofuel-psimple__qty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
  }

  .ofuel-psimple__qty-label {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-psimple__qty-field {
    display: flex;
    align-items: center;
    height: 60px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
    background: var(--ofuel-white, #fff);
  }

  .ofuel-psimple__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 9999px;
    color: var(--ofuel-black, #000);
    cursor: pointer;
  }

  .ofuel-psimple__qty-btn svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-psimple__qty-btn:focus-visible {
    outline: 2px solid var(--ps-accent, #f57379);
    outline-offset: -2px;
  }

  .ofuel-psimple__qty-input {
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /* 16px floor — one pixel under still triggers the full iOS focus zoom. */
    font-size: 16px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .ofuel-psimple__qty-input::-webkit-outer-spin-button,
  .ofuel-psimple__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .ofuel-psimple__qty-input:focus-visible {
    outline: 2px solid var(--ps-accent, #f57379);
    outline-offset: -2px;
    border-radius: 9999px;
  }

  .ofuel-psimple__atc {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Also worn by an <a> in pre-launch, which needs the underline removed. */
    text-decoration: none;
    min-height: 60px;
    padding: 18px 28px;
    border: 0;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .ofuel-psimple__atc:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .ofuel-psimple__atc:focus-visible {
    outline: 2px solid var(--ps-accent, #f57379);
    outline-offset: 3px;
  }

  .ofuel-psimple__note {
    margin: 12px 0 0;
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 20px;
    color: var(--ofuel-gray, #565552);
  }

  /* ---------- Trust points ---------- */
  .ofuel-psimple__trust {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-psimple__trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ofuel-psimple__trust-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ps-accent, #f57379);
    color: var(--ofuel-black, #000);
  }

  .ofuel-psimple__trust-icon svg {
    width: 17px;
    height: 17px;
    display: block;
  }

  .ofuel-psimple__trust-text {
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 22px;
    color: var(--ofuel-black, #000);
  }

  @media (hover: hover) {
    .ofuel-psimple__thumb:hover {
      border-color: rgba(0, 0, 0, 0.28);
      transform: translateY(-2px);
    }

    .ofuel-psimple__thumb.is-active:hover {
      border-color: var(--ps-accent, #f57379);
    }

    .ofuel-psimple__vlabel:hover {
      border-color: rgba(0, 0, 0, 0.35);
    }

    .ofuel-psimple__qty-btn:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .ofuel-psimple__atc:hover:not(:disabled) {
      opacity: 0.88;
      transform: translateY(-2px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-psimple__thumb,
    .ofuel-psimple__vlabel,
    .ofuel-psimple__atc {
      transition: none;
    }
  }

  /* The lift is the only motion in the section, so it is dropped rather than
     merely un-transitioned. Kept inside a hover query so nothing can latch on
     touch. */
  @media (hover: hover) and (prefers-reduced-motion: reduce) {
    .ofuel-psimple__thumb:hover,
    .ofuel-psimple__atc:hover:not(:disabled) {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-psimple__inner {
      grid-template-columns: minmax(0, 1fr);
      padding-block: 80px;
      gap: 28px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-psimple__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .ofuel-psimple__qty-field {
      justify-content: space-between;
    }

    .ofuel-psimple__qty-input {
      flex: 1 1 auto;
      width: auto;
    }

    .ofuel-psimple__atc {
      flex: 1 1 auto;
    }
  }
/* END_SECTION:ofuel-product-simple */

/* START_SECTION:ofuel-reviews (INDEX:79) */
.ofuel-reviews {
    background: var(--rv-bg, #f0efeb);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ofuel-reviews__inner {
    max-width: var(--ofuel-container);
    margin-inline: auto;
    padding: 64px clamp(20px, 5vw, 85px);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .ofuel-reviews__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -1px;
    color: var(--ofuel-black, #000);
  }

  /* Summary */
  .ofuel-reviews__summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ofuel-reviews__score-col { display: flex; flex-direction: column; gap: 20px; }

  .ofuel-reviews__score-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

  .ofuel-reviews__score {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: var(--ofuel-black, #000);
  }

  .ofuel-reviews__stars { display: inline-flex; gap: 3px; }
  .ofuel-reviews__stars svg { width: 20px; height: 20px; display: block; }
  .ofuel-reviews__stars--empty { color: rgba(0, 0, 0, 0.2); }

  .ofuel-reviews__based {
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-reviews__hist { max-width: 448px; display: flex; flex-direction: column; gap: 8px; }

  .ofuel-reviews__hist-row { display: flex; align-items: center; gap: 12px; }

  .ofuel-reviews__hist-label {
    width: 10px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
  }

  .ofuel-reviews__hist-star { color: var(--ofuel-coral, #f57379); display: inline-flex; }
  .ofuel-reviews__hist-star svg { width: 14px; height: 14px; display: block; }

  .ofuel-reviews__hist-track {
    flex: 1;
    height: 8px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.1);
  }

  .ofuel-reviews__hist-count {
    width: 14px;
    text-align: right;
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-reviews__reco-col { display: flex; flex-direction: column; gap: 16px; }

  .ofuel-reviews__reco {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-reviews__reco-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    flex: none;
  }

  .ofuel-reviews__tiles { display: flex; flex-wrap: wrap; gap: 8px; }

  .ofuel-reviews__tile {
    width: 104px;
    height: 104px;
    border-radius: 12px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
  }

  /* Tabs */
  .ofuel-reviews__tabs {
    display: flex;
    gap: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ofuel-reviews__actions { padding-top: 4px; }
  .ofuel-reviews__meta { padding-bottom: 4px; }

  .ofuel-reviews__tab {
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: var(--ofuel-gray, #565552);
    padding-bottom: 10px;
  }

  .ofuel-reviews__tab--active {
    font-weight: 600;
    color: var(--ofuel-black, #000);
    box-shadow: inset 0 -2px 0 0 var(--ofuel-black, #000);
  }

  /* Actions */
  .ofuel-reviews__actions { display: flex; justify-content: space-between; gap: 12px; }

  .ofuel-reviews__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 9999px;
    padding: 12px 20px;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  @media (hover: hover) {
  .ofuel-reviews__pill:hover { opacity: 0.9; }
}
  .ofuel-reviews__pill svg { width: 18px; height: 18px; display: block; }

  .ofuel-reviews__pill--soft { background: var(--ofuel-coral, #f57379); color: #fff; }

  .ofuel-reviews__pill--dark { background: var(--ofuel-black, #000); color: var(--ofuel-cream, #f0efeb); padding: 12px 24px; }

  /* Meta */
  .ofuel-reviews__meta { display: flex; justify-content: space-between; align-items: center; }

  .ofuel-reviews__meta-count { font-family: var(--ofuel-font); font-size: 14px; color: var(--ofuel-gray, #565552); }

  .ofuel-reviews__sort { display: inline-flex; align-items: center; gap: 10px; }

  .ofuel-reviews__sort-label { font-family: var(--ofuel-font); font-size: 14px; color: var(--ofuel-gray, #565552); }

  .ofuel-reviews__select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 7px 13px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-reviews__select svg { width: 14px; height: 14px; display: block; }

  /* Empty state */
  .ofuel-reviews__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 80px 24px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    text-align: center;
  }

  .ofuel-reviews__empty-title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 24px;
    line-height: 32px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-reviews__empty-sub {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-reviews__empty .ofuel-reviews__pill { margin-top: 12px; }

  @media screen and (max-width: 749px) {
    .ofuel-reviews__summary { grid-template-columns: 1fr; gap: 32px; }
    .ofuel-reviews__tile { width: 72px; height: 72px; }
  }

  /* Judge.me widget styling lives in the Judge.me app itself
     (Settings → Widgets → Review Widget → Color and styling + Custom CSS),
     not in the theme — theme CSS can't reliably reach its isolated widget. */
/* END_SECTION:ofuel-reviews */

/* START_SECTION:ofuel-section-image (INDEX:80) */
.ofuel-sectionimg {
    position: relative;
    display: grid;
    isolation: isolate;
  }

  .ofuel-sectionimg__media,
  .ofuel-sectionimg__content {
    grid-area: 1 / 1;
  }

  .ofuel-sectionimg__media {
    position: relative;
    overflow: hidden;
  }

  /*
    Absolute so the section's height comes from the content block, not from the
    photo's natural aspect ratio — otherwise a portrait-ish source stretches the
    banner to several times its designed height.
  */
  .ofuel-sectionimg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias low, as the design does — keeps the raised arm clear of the copy
       block instead of running it straight through the body text. */
    object-position: center 78%;
    display: block;
  }

  .ofuel-sectionimg__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--si-scrim, 0.3));
  }

  .ofuel-sectionimg__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(420px, 43vw, 830px);
    padding: 64px clamp(24px, 5vw, 85px);
  }

  .ofuel-sectionimg__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    text-align: center;
    color: var(--si-fg, #f0efeb);
  }

  .ofuel-sectionimg__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: inherit;
  }

  .ofuel-sectionimg__h-bold {
    font-weight: 700;
  }

  .ofuel-sectionimg__h-italic {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-sectionimg__body {
    margin: 0;
    max-width: 560px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: inherit;
    opacity: 0.8;
  }
/* END_SECTION:ofuel-section-image */

/* START_SECTION:ofuel-signup (INDEX:81) */
.ofuel-signup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(560px, 62vw, 822px);
    padding: 64px clamp(16px, 5vw, 48px);
    overflow: hidden;
  }

  .ofuel-signup__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ofuel-signup__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .ofuel-signup__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: clamp(32px, 5vw, 64px);
    border-radius: 32px;
    background: rgba(240, 239, 235, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .ofuel-signup__eyebrow {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 9999px;
    padding: 7px 17px;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-signup__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 1.05;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-signup__heading-line {
    display: block;
  }

  .ofuel-signup__heading-line--em {
    font-style: italic;
  }

  .ofuel-signup__body {
    margin: 0;
    max-width: 764px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-signup__form {
    display: flex;
    /*
      flex-wrap is load-bearing, not cosmetic. The error block below is
      flex-basis: 100%; without wrapping it stays on the same line and takes the
      whole row, squeezing .ofuel-signup__field (flex: 1 1 0; min-width: 0) down
      to 0px — so the customer could not see or correct the address that had just
      been rejected. Wrapping drops the error onto its own line and the input
      keeps its width.
    */
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 448px;
    margin-top: 8px;
  }

  /*
    Wrapper for an app block (Shopify Forms). The app owns its own markup and
    styling, so this only constrains the width to match the native form and
    stops a wide embed breaking the card layout.
  */
  .ofuel-signup__app {
    width: 100%;
    max-width: 448px;
    margin-top: 8px;
  }

  .ofuel-signup__app > * {
    max-width: 100%;
  }

  /*
    Full-row fields. This used to be `flex: 1 1 0` so the single email input sat
    inline beside the button; with a second required field, three controls on one
    448px row left each of them too narrow to read a typed number back. They now
    stack, and the button takes its own row below them.
  */
  .ofuel-signup__field {
    flex: 1 1 100%;
    min-width: 0;
  }

  /*
    Visually hidden but present for assistive tech. Deliberately NOT display:none
    or visibility:hidden — both would remove it from the accessibility tree and
    leave the input unlabelled again.
  */
  .ofuel-signup__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ofuel-signup__input {
    width: 100%;
    height: 100%;
    background: rgba(240, 239, 235, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 9999px;
    padding: 14px 21px;
    font-family: var(--ofuel-font);
    /*
      16px is a functional floor, not a type choice. iOS Safari auto-zooms the
      whole viewport when a user focuses an input under 16px and does not zoom
      back out — on the site's primary conversion field that reads as the page
      breaking on tap. Verified at 390px: this input was 14px and focusable.
    */
    font-size: 16px;
    line-height: 1;
    color: var(--ofuel-cod-gray, #1b1b1b);
  }

  .ofuel-signup__input::placeholder {
    color: rgba(27, 27, 27, 0.6);
  }

  .ofuel-signup__input:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
  }

  /*
    hCaptcha attribution. Deliberately quiet — it is a legal notice, not copy —
    but never `display: none`, which would keep the protection while dropping the
    attribution hCaptcha requires. The card is centred, so this is too.
  */
  .ofuel-signup__captcha-note {
    width: 100%;
    margin-top: 14px;
    font-family: var(--ofuel-font);
    font-size: 11px;
    line-height: 16px;
    color: var(--ofuel-gray, #565552);
    text-align: center;
  }

  .ofuel-signup__captcha-note > * {
    margin: 0;
  }

  .ofuel-signup__captcha-note a {
    color: inherit;
    text-decoration: underline;
  }

  .ofuel-signup__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 100%;
    padding: 13px 24px;
    min-height: 52px;
    border: none;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: #f8fafc;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
    will-change: transform;
  }

  @media (hover: hover) {
  .ofuel-signup__btn:hover {
      transform: translateY(-2px) scale(1.015);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    }
}

  .ofuel-signup__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
  .ofuel-signup__btn:hover .ofuel-signup__btn-icon {
      transform: translateX(4px);
    }
}

  .ofuel-signup__btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ofuel-signup__success {
    margin: 8px 0 0;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
    font-weight: 500;
  }

  .ofuel-signup__error {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-family: var(--ofuel-font);
    font-size: 13px;
    color: #b3261e;
    text-align: left;
  }

  .ofuel-signup__error-item {
    margin: 0;
  }

  .ofuel-signup__error-item + .ofuel-signup__error-item {
    margin-top: 2px;
  }

  /* The focus ring already carries the state; the border echoes it in colour. */
  .ofuel-signup__input[aria-invalid='true'] {
    border-color: #b3261e;
  }

  .ofuel-signup__input[aria-invalid='true']:focus {
    border-color: #b3261e;
    box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.2);
  }

  @media screen and (max-width: 559px) {
    .ofuel-signup__form {
      flex-direction: column;
      align-items: stretch;
    }

    .ofuel-signup__btn {
      justify-content: center;
    }
  }
/* END_SECTION:ofuel-signup */

/* START_SECTION:ofuel-stockist-apply (INDEX:82) */
.ofuel-stockist-apply {
    background: var(--ap-bg, #f0efeb);
  }

  /*
    box-sizing is border-box inside .ofuel-section, so the max-width has to carry
    the gutter or the content column lands narrower than the Figma 1400px.
  */
  /*
    The card used to bleed to the right edge of the viewport, squared off, to
    line up with the photo panel above it (.ofuel-stockist-spaces__media, also
    `flex: 0 0 44.6%`). That alignment was real, but it read as broken: a PHOTO
    running off the edge looks deliberate, a form full of input fields running
    off the edge just looks cut off — the more so because the page keeps a 96px
    gutter on the left, so the section was gutter one side and nothing the other.

    The card has to do two things at once: line its LEFT edge up with the photo
    panel in the section above (.ofuel-stockist-spaces__media), and still keep a
    gutter on the right rather than bleeding off-screen as it originally did.

    So the wrapper stays full-width — that is what makes a percentage here mean
    the same thing as the photo's `flex: 0 0 44.6%` — and the card is sized
    `44.6% - gutter` with a matching `margin-right`. The margin pulls its right
    edge in to the gutter, and subtracting the same amount from its width leaves
    the left edge exactly on 55.4%, which is where the photo starts.

    Using a percentage rather than 44.6vw matters: vw includes the scrollbar,
    the photo's percentage does not, so vw would sit ~15px out on any desktop
    with a visible scrollbar.

    (A centred max-width wrapper was tried and abandoned — it cannot align with
    a full-bleed neighbour. An earlier attempt that mirrored the intro's
    `max(gutter, 50% - 700px)` as padding-right was worse still: that calc
    resolves against the inner's content box, so adding right padding shrank the
    basis and collapsed the LEFT gutter from 260px to 130px at 1920.)
  */
  .ofuel-stockist-apply__inner {
    --ap-gutter: var(--ofuel-container-pad);
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding-block: var(--ap-pt, 64px) var(--ap-pb, 64px);
  }

  .ofuel-stockist-apply__intro {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-left: max(var(--ap-gutter), calc(50% - 700px));
    padding-right: clamp(32px, 6vw, 104px);
    /*
      Keeps the heading beside the card rather than racing ahead of it. The 96px
      here used to be a plain visual offset; it now has to clear the fixed header
      as well, so it reads off --ofuel-header-h (ofuel-header.liquid) plus a gap —
      at a literal 96px the heading parked flush against the floating pills.
    */
    position: sticky;
    top: calc(var(--ofuel-header-h, 96px) + 32px);
  }

  .ofuel-stockist-apply__eyebrow {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ap-heading, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* DM Sans is self-hosted at 300/400/500/700/900 only — 600 would be faux-bolded. */
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--ap-heading, #000);
  }

  .ofuel-stockist-apply__heading {
    margin: 8px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ap-heading, #000);
  }

  .ofuel-stockist-apply__body {
    max-width: 560px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ap-body, #565552);
  }

  .ofuel-stockist-apply__body > * {
    margin: 0 0 12px;
  }

  .ofuel-stockist-apply__body > *:last-child {
    margin-bottom: 0;
  }

  /* ---- The black card ---- */
  /*
    44.6% and edge-anchored — the exact column the photo above occupies, so the
    two share a left edge and a right edge at every width.

    The right corners are squared because the card now meets the viewport edge:
    left them rounded and you get two slivers of cream in the corners against a
    panel that is otherwise flush, which reads as a rendering fault.
  */
  /*
    Rounded on all four corners now that it no longer bleeds off-screen — the
    old `32px 0 0 32px` only made sense while the right edge was outside the
    viewport. Matches the ≤989px rule, so the card is one shape at every width.
  */
  .ofuel-stockist-apply__card {
    /* 44.6% matches the photo above; minus the gutter, which margin-right adds
       back on the outside, so only the RIGHT edge moves in. */
    flex: 0 0 calc(44.6% - var(--ap-gutter));
    margin-right: var(--ap-gutter);
    min-width: 0;
    background: var(--ap-card-bg, #000);
    border-radius: var(--ap-radius, 32px);
    padding: clamp(28px, 3.2vw, 44px);
  }

  /* The photo above steps to 40% here, so the card tracks it. */
  @media screen and (min-width: 990px) and (max-width: 1279px) {
    .ofuel-stockist-apply__card {
      flex-basis: calc(40% - var(--ap-gutter));
    }
  }

  .ofuel-stockist-apply__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /*
    hCaptcha attribution. This card is black, so the muted grey used on the light
    forms would be unreadable — cream at 55% instead. Never `display: none`: that
    keeps the protection but drops the attribution hCaptcha requires.
  */
  .ofuel-stockist-apply__captcha-note {
    font-size: 11px;
    line-height: 16px;
    color: rgba(240, 239, 235, 0.55);
  }

  .ofuel-stockist-apply__captcha-note > * {
    margin: 0;
  }

  .ofuel-stockist-apply__captcha-note a {
    color: inherit;
    text-decoration: underline;
  }

  .ofuel-stockist-apply__card-eyebrow {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ofuel-cream, #f0efeb);
    opacity: 0.55;
  }

  .ofuel-stockist-apply__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .ofuel-stockist-apply__field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  .ofuel-stockist-apply__field--full {
    grid-column: 1 / -1;
  }

  .ofuel-stockist-apply__label {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ap-label, #f57379);
  }

  .ofuel-stockist-apply__input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(240, 239, 235, 0.35);
    border-radius: 9999px;
    padding: 14px 22px;
    font-family: var(--ofuel-font);
    font-size: 15px;
    line-height: 22px;
    color: var(--ap-field, #f0efeb);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .ofuel-stockist-apply__input--textarea {
    border-radius: 18px;
    resize: vertical;
    min-height: 104px;
  }

  /*
    Pointer-gated: ungated, a tap leaves the last field a finger passed over
    sitting in its hover border until something else is touched.

    Position matters as much as the gate. This stays ahead of :focus and of
    [aria-invalid='true'], both of which are the same specificity — move it below
    them and hovering a field that has just failed validation would wash its
    coral error border back to plain grey.
  */
  @media (hover: hover) {
    .ofuel-stockist-apply__input:hover {
      border-color: rgba(240, 239, 235, 0.55);
    }
  }

  .ofuel-stockist-apply__input:focus {
    outline: none;
    border-color: var(--ofuel-coral, #f57379);
    box-shadow: 0 0 0 2px rgba(245, 115, 121, 0.28);
  }

  /* iOS zooms the page when a focused input is under 16px. */
  @media screen and (max-width: 749px) {
    .ofuel-stockist-apply__input {
      font-size: 16px;
    }
  }

  .ofuel-stockist-apply__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
    padding: 8px 8px 8px 24px;
    border: none;
    border-radius: 9999px;
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  @media (hover: hover) {
    .ofuel-stockist-apply__submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
    }
  }

  .ofuel-stockist-apply__submit:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-stockist-apply__submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-white, #fff);
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
    .ofuel-stockist-apply__submit:hover .ofuel-stockist-apply__submit-icon {
      transform: translateX(3px);
    }
  }

  .ofuel-stockist-apply__submit-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .ofuel-stockist-apply__success {
    margin: 0;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: var(--ofuel-cream, #f0efeb);
  }

  /* Both are tabindex="-1" announcement targets, not interactive controls. */
  .ofuel-stockist-apply__success:focus,
  .ofuel-stockist-apply__errors:focus {
    outline: none;
  }

  .ofuel-stockist-apply__success > * {
    margin: 0 0 12px;
  }

  .ofuel-stockist-apply__success > *:last-child {
    margin-bottom: 0;
  }

  .ofuel-stockist-apply__errors {
    border: 1px solid rgba(245, 115, 121, 0.6);
    border-radius: 16px;
    padding: 14px 18px;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 22px;
    color: var(--ofuel-coral, #f57379);
  }

  /*
    Coral, not the contact form's #b3261e: this card is dark, and that red fails
    contrast on black. Coral is already the error colour for the summary above.
    Styling hangs off [aria-invalid='true'], never a bare :invalid — an untouched
    empty required field matches :invalid and would paint the whole form on load.
  */
  .ofuel-stockist-apply__field-error {
    display: block;
    margin-top: 6px;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 18px;
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-stockist-apply__input[aria-invalid='true'] {
    border-color: var(--ofuel-coral, #f57379);
  }

  .ofuel-stockist-apply__errors ul {
    margin: 0;
    padding-left: 18px;
  }

  /*
    Reduced motion: the movement goes, the feedback stays.

    Both of these elements animate only transform, so their transitions come off
    entirely — and the transforms themselves have to be cancelled too, which the
    old block did not do: killing a transition only makes the lift instant, it
    does not remove it.

    .ofuel-stockist-apply__input is deliberately no longer listed. Everything it
    transitions is border-colour and box-shadow — feedback, not motion — and a
    150ms tint on focus is not what a reduced-motion preference is asking to be
    rid of. This also puts it back in step with ofuel-contact-form.liquid.
  */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-stockist-apply__submit,
    .ofuel-stockist-apply__submit-icon {
      transition: none;
    }
  }

  /*
    The cancellation is itself a :hover rule, so it carries the same `hover: hover`
    gate as the rules it overrides — ungated, it would latch on touch. It sits
    after them in the sheet, which is what lets equal specificity win.
  */
  @media (prefers-reduced-motion: reduce) and (hover: hover) {
    .ofuel-stockist-apply__submit:hover,
    .ofuel-stockist-apply__submit:hover .ofuel-stockist-apply__submit-icon {
      transform: none;
    }
  }

  /*
    Stacked below 989px, which is also where the spaces section stops splitting —
    so the edge-anchored treatment above only ever applies while the two columns
    actually sit side by side. Gutters and full rounding come back here.
  */
  @media screen and (max-width: 989px) {
    .ofuel-stockist-apply__inner {
      flex-direction: column;
      gap: 40px;
      padding-inline: var(--ap-gutter);
      /*
        This section was the only one that never stepped its vertical padding
        down: 160/160 held all the way to 375px, so a phone showed 320px of empty
        space around the form. min() keeps a merchant's smaller custom value
        intact while capping the 160px default at the house 80px for this tier.
      */
      padding-top: min(var(--ap-pt, 64px), 80px);
      padding-bottom: min(var(--ap-pb, 160px), 80px);
    }

    .ofuel-stockist-apply__intro {
      position: static;
      max-width: 640px;
      padding-inline: 0;
    }

    .ofuel-stockist-apply__card {
      flex: none;
      width: 100%;
      max-width: 620px;
      /* Stacked: the wrapper's padding-inline is the gutter, so drop the
         desktop margin or the card sits gutter + gutter off the right. */
      margin-right: 0;
      border-radius: var(--ap-radius, 32px);
    }
  }

  @media screen and (max-width: 559px) {
    /* Half-width fields get their own row rather than squeezing to ~40vw. */
    .ofuel-stockist-apply__fields {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-stockist-apply__field--half {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:ofuel-stockist-apply */

/* START_SECTION:ofuel-stockist-hero (INDEX:83) */
.ofuel-stockist-hero {
    background: var(--sh-bg, #f0efeb);
  }

  /*
    Container: the theme sets box-sizing:border-box on everything inside
    .ofuel-section, so max-width has to carry the gutter or the content column
    comes out narrower than the Figma 1400px.
  */
  .ofuel-stockist-hero__inner {
    --sh-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--sh-gutter));
    margin-inline: auto;
    padding-inline: var(--sh-gutter);
    /*
      This is the first section on the page and the header floats over it, so the
      top pad never drops below 88px however the merchant sets it (pills own ~76px).
    */
    padding-block: max(var(--sh-pt, 91px), 88px) var(--sh-pb, 112px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: clamp(24px, 2.6vw, 40px);
  }

  .ofuel-stockist-hero__content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-stockist-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sh-heading, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /*
      Figma calls this SemiBold 600, but ofuel-base.css self-hosts DM Sans at
      300/400/500/700/900 only — there is no 600 face, so the browser resolves 600
      up to the 700 cut anyway. Declared explicitly so the rendered weight is not
      left to font-matching fallback.
    */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sh-heading, #000);
  }

  /*
    128px display type. px in the clamp minimum on purpose — the theme root is
    62.5%, so a rem minimum would silently render at a tenth of the intended size.
  */
  .ofuel-stockist-hero__heading {
    margin: 0;
    width: 100%;
    font-family: var(--ofuel-font);
    font-weight: 900;
    /*
      Same treatment as ofuel-why-hero: words must never split. With the accent
      and the closing word now bound on one line, break-word would have let the
      browser cut mid-word rather than shrink, so it is off and the clamp is
      sized to fit instead.

      7.1vw is measured, not guessed. "Ofuel stockist." is one unbreakable run,
      so it either fits the content column or overflows it. The tightest ratio
      is at 1280 (fits up to 7.23vw) and 1440 (7.25vw); 7.7vw overflowed both by
      ~40px. The 114px cap is safe because 1920 tolerates up to 120px.
    */
    font-size: clamp(42px, 7.1vw, 114px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--sh-heading, #000);
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Two lines now: "Become an" / "Ofuel stockist." */
  .ofuel-stockist-hero__line {
    display: block;
  }

  .ofuel-stockist-hero__accent {
    display: inline;
  }

  .ofuel-stockist-hero__accent {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-stockist-hero__body {
    width: 100%;
    max-width: var(--sh-body-w, 576px);
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--sh-body, #565552);
  }

  .ofuel-stockist-hero__body > * {
    margin: 0;
  }

  /* One blank 28px line between the paragraphs, as per the Figma copy block. */
  .ofuel-stockist-hero__body > * + * {
    margin-top: 28px;
  }

  .ofuel-stockist-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 12px;
    row-gap: 12px;
    padding-top: 16px;
  }

  .ofuel-stockist-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 15px 25px;
    border-radius: 9999px;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  /* Icon variant: 8px right pad so the 36px chip sits flush inside the pill. */
  .ofuel-stockist-hero__btn--has-icon {
    padding: 8px 8px 8px 24px;
  }

  .ofuel-stockist-hero__btn--primary {
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    border: none;
  }

  .ofuel-stockist-hero__btn--secondary {
    background: transparent;
    border: 1px solid var(--ofuel-black, #000);
    color: var(--ofuel-black, #000);
  }

  .ofuel-stockist-hero__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    transition: transform 0.2s ease;
  }

  .ofuel-stockist-hero__btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /*
    Every hover state is gated. Ungated, a finger that passes over a button on the
    way to a tap leaves it latched in its hover state — lifted, and in the
    secondary's case inverted to black — until something else is tapped.
  */
  @media (hover: hover) {
    .ofuel-stockist-hero__btn:hover {
      transform: translateY(-1px);
    }

    .ofuel-stockist-hero__btn:hover .ofuel-stockist-hero__btn-icon {
      transform: translateX(3px);
    }

    .ofuel-stockist-hero__btn--secondary:hover {
      background: var(--ofuel-black, #000);
      color: var(--ofuel-cream, #f0efeb);
    }
  }

  /*
    Press feedback sits OUTSIDE the hover gate on purpose: `:active` is the one
    state that is supposed to fire on touch, and it self-clears on release. Same
    specificity as the `:hover` lift above and declared after it, so it wins for
    the duration of the press on a pointer device too.
  */
  .ofuel-stockist-hero__btn:active {
    transform: translateY(0) scale(0.985);
  }

  .ofuel-stockist-hero__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  /*
    590px circle in the right-hand region. Figma sits it ~50px below the optical
    centre of the text block, hence the margin nudge on top of align-items:center.
  */
  .ofuel-stockist-hero__media {
    flex: 0 0 auto;
    width: min(590px, 40vw);
    align-self: center;
    margin-top: clamp(0px, 5vw, 96px);
  }

  .ofuel-stockist-hero__circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
  }

  .ofuel-stockist-hero__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portrait source with coral headroom up top — bias the square crop to the faces. */
    object-position: center 55%;
    border-radius: 50%;
  }

  /*
    Reduced motion: drop the movement, keep the colour feedback — the secondary
    button's fill inversion is information about what is interactive, not decoration.

    The cancelling selectors have to match the rules they are cancelling exactly.
    The previous version listed only `.ofuel-stockist-hero__btn` (0,1,0), which can
    never override `.ofuel-stockist-hero__btn:hover` (0,2,0), so the translate and
    the icon nudge both still ran — just instantly, which is the worse outcome.
    These are declared after the hover block and at equal specificity, so they win.
  */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-stockist-hero__btn {
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .ofuel-stockist-hero__btn-icon {
      transition: none;
    }

    .ofuel-stockist-hero__btn:hover,
    .ofuel-stockist-hero__btn:active,
    .ofuel-stockist-hero__btn:hover .ofuel-stockist-hero__btn-icon {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-stockist-hero__inner {
      flex-direction: column;
      align-items: flex-start;
      row-gap: 48px;
    }

    .ofuel-stockist-hero__content {
      max-width: 640px;
    }

    .ofuel-stockist-hero__media {
      align-self: center;
      width: min(460px, 72vw);
      margin-top: 0;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-stockist-hero__inner {
      row-gap: 40px;
    }

    .ofuel-stockist-hero__content {
      gap: 20px;
    }

    .ofuel-stockist-hero__body {
      font-size: 17px;
      line-height: 26px;
    }

    .ofuel-stockist-hero__body > * + * {
      margin-top: 24px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-stockist-hero__media {
      width: min(340px, 82vw);
    }

    .ofuel-stockist-hero__btn {
      padding: 15px 20px;
    }

    .ofuel-stockist-hero__btn--has-icon {
      padding: 8px 8px 8px 20px;
    }
  }
/* END_SECTION:ofuel-stockist-hero */

/* START_SECTION:ofuel-stockist-product (INDEX:84) */
.ofuel-stockist-product {
    /* Figma: image group 1002 x 762 inside a 1940-wide frame.
       1002 / 1920 = 52.2vw, 762 / 1002 = 0.7605. */
    --sp-gutter: clamp(20px, 5vw, 40px);
    --sp-frame-w: clamp(420px, 52.2vw, 1010px);
    --sp-frame-ratio: 0.7605;
    position: relative;
    overflow: hidden;
    background: var(--sp-bg, #f0efeb);
    min-height: calc(var(--sp-frame-w) * var(--sp-frame-ratio));
  }

  /* border-box is inherited from .ofuel-section, so the 1400px content column
     has to be widened by the gutters it now contains. */
  .ofuel-stockist-product__inner {
    max-width: calc(var(--ofuel-container) + 2 * var(--sp-gutter));
    margin-inline: auto;
    padding-inline: var(--sp-gutter);
    padding-top: min(var(--sp-pt, 64px), 9vw);
    padding-bottom: min(var(--sp-pb, 64px), 6.4vw);
  }

  /* ---------- Left column ---------- */
  .ofuel-stockist-product__text {
    position: relative;
    z-index: 1;
    /* Figma column is 1040 of 1920 = 54.2vw; keep it proportional so it never
       walks into the product image as the viewport narrows. */
    max-width: min(1040px, 54.2vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-stockist-product__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    background: transparent;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-stockist-product__heading {
    margin: 0;
    max-width: min(var(--sp-heading-max, 910px), 100%);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(32px, 3.15vw, 60px);
    line-height: 1;
    /* Figma tracks this at -5.12px on 60px. Kept in em so it does not collapse
       the letterforms once the heading clamps down. */
    letter-spacing: -0.0853em;
    color: var(--ofuel-black, #000);
  }

  .ofuel-stockist-product__body {
    /* Figma leaves ~34px of air before the checklist, not the 24px column gap. */
    margin-bottom: 10px;
    max-width: min(576px, 100%);
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(17px, 1.05vw, 20px);
    line-height: 1.4;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-stockist-product__body > * {
    margin: 0 0 12px;
  }

  .ofuel-stockist-product__body > *:last-child {
    margin-bottom: 0;
  }

  /* Row-wise flow: items 1–2 on row 1, 3–4 on row 2, 5–6 on row 3. */
  .ofuel-stockist-product__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 668px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ofuel-stockist-product__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-stockist-product__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    /* Figma ships this tick as cream at 10% opacity, which renders as a plain
       black dot. Drawn at full strength instead — see the build notes. */
    color: var(--ofuel-cream, #f0efeb);
    flex: none;
  }

  .ofuel-stockist-product__check svg {
    display: block;
    /* The viewBox already carries the 0.729 stroke padding around the path, so
       the element has to be the full viewBox size for the tick itself to draw
       at the Figma 9.33 x 6.42. Sizing it to the path box shrank it ~13%. */
    width: 10.79px;
    height: 7.88px;
  }

  .ofuel-stockist-product__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 100%;
    padding-top: 16px;
  }

  .ofuel-stockist-product__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  }

  .ofuel-stockist-product__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-stockist-product__btn-label {
    white-space: nowrap;
  }

  .ofuel-stockist-product__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    flex: none;
    transition: transform 0.2s ease;
  }

  .ofuel-stockist-product__btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /* Every hover state on this section lives here. Ungated, the lift would latch
     on touch and stay applied after the tap that triggered it. */
  @media (hover: hover) {
    .ofuel-stockist-product__btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    }

    .ofuel-stockist-product__btn:hover .ofuel-stockist-product__btn-icon {
      transform: translateX(4px);
    }
  }

  /* ---------- Right: layered product image ----------
     Every offset below is a fraction of --sp-frame-w (the Figma 1002px frame
     width), never of the frame height. That way the frame can be made taller
     for the stacked layout without disturbing the composition. */
  /*
    Bottom-anchored, NOT top-anchored. In Figma the frame's bottom edge IS the
    section boundary, and both the circle (bottom 0.806w) and the sachet (bottom
    0.883w) overrun the 0.7605w frame and are clipped by it — so the boundary
    with the black section below is solid artwork, never a cream gap.

    The frame keeps its design height rather than stretching: whenever the left
    column makes the section taller than 0.7605w, stretching would push the
    frame's bottom past where the artwork reaches and reopen the gap (only the
    narrow sachet would still touch). Pinning the bottom instead slides the whole
    composition down and keeps the clipped bleed exactly as drawn.
  */
  .ofuel-stockist-product__media {
    position: absolute;
    bottom: 0;
    right: clamp(0px, 0.5vw, 10px);
    z-index: 0;
    width: var(--sp-frame-w);
    height: calc(var(--sp-frame-w) * var(--sp-frame-ratio));
    overflow: hidden;
    pointer-events: none;
  }

  /* 693 x 672 at (154, 136) in the 1002px frame. */
  .ofuel-stockist-product__circle {
    position: absolute;
    left: 15.37%;
    width: 69.16%;
    top: calc(var(--sp-frame-w) * 0.1357);
    height: calc(var(--sp-frame-w) * 0.6707);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
  }

  /* Figma zooms past cover: bitmap at 1249 x 831 offset (-270, -60). */
  .ofuel-stockist-product__circle img {
    position: absolute;
    left: -39%;
    top: -8.93%;
    width: 180.2%;
    height: 123.65%;
    object-fit: cover;
    display: block;
  }

  /* The packaged PNG is trimmed to the sachet, so it is placed by its own box,
     NOT by the 264 x 988 Figma layer box (that layer carried wide transparent
     margins). Measured off the Figma render: the sachet paints 224.8 x 802 at
     top 82.4 inside the 1002 frame → 22.44% wide, top 0.0822 of the frame
     width, centred on the circle, overhanging it top and bottom and running
     off the bottom edge of the frame. */
  .ofuel-stockist-product__sachet {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--sp-frame-w) * 0.0822);
    width: 22.44%;
    z-index: 2;
  }

  .ofuel-stockist-product__sachet img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 989px) {
    .ofuel-stockist-product {
      /* Taller frame so the sachet stands complete instead of being cut off by
         the bottom of a centred block. The sachet ends at 0.0822 + 0.8006 =
         0.883 of the frame width, so 0.9 clears it without leaving dead air. */
      --sp-frame-w: min(560px, 78vw);
      --sp-frame-ratio: 0.9;
      min-height: 0;
    }

    .ofuel-stockist-product__text {
      max-width: 100%;
    }

    /* Must stay positioned: the circle and the sachet are absolute children, so
       a static parent would hand them to the section as containing block (their
       % offsets would resolve against the whole section) and its overflow:hidden
       would stop clipping them. */
    .ofuel-stockist-product__media {
      position: relative;
      /* Reset the desktop bottom-pin — stacked, the frame flows inline instead. */
      bottom: auto;
      right: auto;
      margin: 48px auto 0;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-stockist-product__text {
      gap: 20px;
    }

    .ofuel-stockist-product__body {
      margin-bottom: 4px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-stockist-product__list {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-stockist-product__btn {
      padding-left: 20px;
    }

    .ofuel-stockist-product__btn-label {
      white-space: normal;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* The shadow is feedback, not decoration — it stays, and keeps its fade.
       Only the movement is dropped. */
    .ofuel-stockist-product__btn {
      transition: box-shadow 0.28s ease;
    }

    .ofuel-stockist-product__btn-icon {
      transition: none;
    }
  }

  /* Mirrors the two selectors in the @media (hover: hover) block above, so the
     lift and the arrow nudge are cancelled and the shadow is left alone. */
  @media (prefers-reduced-motion: reduce) and (hover: hover) {
    .ofuel-stockist-product__btn:hover {
      transform: none;
    }

    .ofuel-stockist-product__btn:hover .ofuel-stockist-product__btn-icon {
      transform: none;
    }
  }
/* END_SECTION:ofuel-stockist-product */

/* START_SECTION:ofuel-stockist-spaces (INDEX:85) */
.ofuel-stockist-spaces {
    --spaces-gutter: clamp(20px, 5vw, 40px);
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--spaces-bg, #f0efeb);
    overflow: hidden;
    /*
      The Figma frame is a fixed 992px tall so the photo reads as a tall portrait
      panel, even though the text column only needs ~803px. A min-height keeps
      that proportion without capping growth when a merchant adds more rows.
      51.2vw resolves to ~992px at the 1940px design width.
    */
    min-height: clamp(760px, 51.2vw, 992px);
  }

  /*
    The text has to line up with the centred 1400px content column while the
    photo bleeds all the way to the right viewport edge. A max-width wrapper
    can't do both (and border-box would eat the gutter — see conventions), so
    the column is produced with padding on the left flex item instead.
    At the 1940px design width this resolves to the Figma 270px gutter.
  */
  .ofuel-stockist-spaces__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    padding-top: var(--spaces-pt, 64px);
    padding-bottom: var(--spaces-pb, 64px);
    /*
      50% resolves against the section's own content box, so this is exactly
      (section - 1400px) / 2 — the identical gutter a centred
      `max-width: calc(1400px + 2 * gutter)` wrapper produces, but without
      100vw's scrollbar error, which would push this section's text ~7px right
      of every other section on the page.
    */
    padding-left: max(var(--spaces-gutter), calc(50% - 700px));
    padding-right: clamp(20px, 2.2vw, 32px);
  }

  .ofuel-stockist-spaces__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-stockist-spaces__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  /*
    Tracking of -5.12px at 60px is -0.0853em. It is intentional (measured off
    the render), expressed in em so it survives the responsive clamp.
  */
  .ofuel-stockist-spaces__heading {
    margin: 0;
    max-width: var(--spaces-heading-max, 791px);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1;
    letter-spacing: -0.0853em;
    color: var(--ofuel-black, #000);
    overflow-wrap: break-word;
  }

  .ofuel-stockist-spaces__intro {
    margin: 0;
    max-width: 576px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.4;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-stockist-spaces__list-wrap {
    width: 100%;
    max-width: 668px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ofuel-stockist-spaces__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /*
    flex-start rather than center: identical for the single-line labels in the
    design, but keeps the chip aligned to the first line once labels wrap on
    narrow viewports (the 24px chip matches the 24px line box exactly).
  */
  .ofuel-stockist-spaces__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-stockist-spaces__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    flex: none;
  }

  .ofuel-stockist-spaces__check svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .ofuel-stockist-spaces__item-text {
    min-width: 0;
  }

  .ofuel-stockist-spaces__disclaimer {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-stockist-spaces__disclaimer > * {
    margin: 0 0 12px;
  }

  .ofuel-stockist-spaces__disclaimer > *:last-child {
    margin-bottom: 0;
  }

  .ofuel-stockist-spaces__cta {
    margin-top: 16px;
    max-width: 100%;
  }

  .ofuel-stockist-spaces__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 8px 8px 8px 24px;
    border-radius: 9999px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .ofuel-stockist-spaces__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  .ofuel-stockist-spaces__btn-label {
    white-space: nowrap;
  }

  .ofuel-stockist-spaces__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    flex: none;
    transition: transform 0.2s ease;
  }

  .ofuel-stockist-spaces__btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /*
    Gated so the lift cannot latch on after a touch. The transforms sit on
    .__btn / .__btn-icon, never on .__cta — that wrapper is the .ofuel-reveal
    carrier and owns its own transform.
  */
  @media (hover: hover) {
    .ofuel-stockist-spaces__btn:hover {
      background: var(--ofuel-cod-gray, #1b1b1b);
      transform: translateY(-1px);
    }

    .ofuel-stockist-spaces__btn:hover .ofuel-stockist-spaces__btn-icon {
      transform: translateX(3px);
    }
  }

  /* ---- Right-hand lifestyle photo (bleeds off the right edge, no radius) ---- */
  .ofuel-stockist-spaces__media {
    position: relative;
    flex: 0 0 44.6%;
    align-self: stretch;
    overflow: hidden;
    /* Placeholder before the photo paints — cream, so it is invisible against
       the band. (The section palette has no #e6e4e2 in it.) */
    background: var(--spaces-bg, #f0efeb);
  }

  /*
    The packaged photo ships pre-cropped and pre-mirrored (1400x1875, portrait):
    the original studio shot is landscape with reception on the left, a giant
    inflatable sachet mid-frame and the corridor on the right, and Figma shows
    the *mirrored* corridor only. Cropping was unavoidable rather than stylistic —
    at this panel's aspect `cover` reveals ~60% of a landscape source's width, and
    no 60% window misses an 18%-wide sachet sitting at 41–56%. Baking the mirror
    into the asset also keeps it working for a merchant-swapped image, which a CSS
    scaleX(-1) would silently flip too.

    Because the asset is now taller than the panel, `cover` crops the VERTICAL
    axis and the horizontal focal no longer does anything — hence the focal
    setting drives object-position's Y. The default keeps the walking figure's
    head and feet inside the frame at every breakpoint.
  */
  .ofuel-stockist-spaces__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--spaces-focal, 60%);
    display: block;
  }

  /*
    Fade the photo in without the shared reveal's rise — a full-bleed panel
    sliding up would expose a strip of cream along the bottom edge.
  */
  .ofuel-stockist-spaces__media.ofuel-reveal,
  .ofuel-stockist-spaces__media.ofuel-reveal.ofuel-reveal--in {
    transform: none;
  }

  /*
    One-shot settle. The panel (.__media) fades; the photo inside it enters a
    touch over-scaled and eases back to 1 — so the reveal's transform stays on
    the carrier and the scale stays on the <img>, two different elements.
    A transition, not an animation: it runs exactly once and never composites
    again. transform-origin tracks the same focal band as object-position so
    the subject holds still while the crop relaxes, and the panel's
    overflow: hidden contains the over-scale at the bleed edge.
    Gated on no-preference, matching the shared reveal, so reduced motion
    never sees a scaled image at all.
  */
  @media (prefers-reduced-motion: no-preference) {
    .ofuel-stockist-spaces__img {
      transform: scale(1.06);
      transform-origin: center var(--spaces-focal, 60%);
      transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .ofuel-stockist-spaces__media.ofuel-reveal--in .ofuel-stockist-spaces__img {
      transform: none;
    }
  }

  /* Small desktop / large tablet: give the text a little more room. */
  @media screen and (min-width: 990px) and (max-width: 1279px) {
    .ofuel-stockist-spaces__media {
      flex-basis: 40%;
    }
  }

  /* Tablet and below: stack, photo full-bleed under the text. */
  @media screen and (max-width: 989px) {
    .ofuel-stockist-spaces {
      display: block;
      min-height: 0;
    }

    .ofuel-stockist-spaces__body {
      display: block;
      padding-top: min(var(--spaces-pt, 160px), 88px);
      padding-bottom: min(var(--spaces-pb, 112px), 56px);
      padding-left: var(--spaces-gutter);
      padding-right: var(--spaces-gutter);
    }

    .ofuel-stockist-spaces__content {
      max-width: 668px;
    }

    /* Squarer than the old 16/11: the packaged photo is portrait (0.747), so a
       landscape panel would crop nearly half its height and cut the figure off. */
    .ofuel-stockist-spaces__media {
      width: 100%;
      aspect-ratio: 1 / 1;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-stockist-spaces__media {
      aspect-ratio: 4 / 5;
    }

    .ofuel-stockist-spaces__btn {
      padding-left: 20px;
    }

    /* Let the long CTA label wrap rather than overflow a 360px viewport. */
    .ofuel-stockist-spaces__btn-label {
      white-space: normal;
    }
  }

  /*
    Reduced motion: colour feedback is information, so the button still darkens
    (and still eases while doing it) — only the movement goes. Last in source
    order on purpose: these cancel the equal-specificity hover transforms above.
    The photo settle needs nothing here; it is gated on no-preference.
  */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-stockist-spaces__btn {
      transition: background-color 0.2s ease;
    }

    .ofuel-stockist-spaces__btn-icon {
      transition: none;
    }

    .ofuel-stockist-spaces__btn:hover,
    .ofuel-stockist-spaces__btn:hover .ofuel-stockist-spaces__btn-icon {
      transform: none;
    }
  }
/* END_SECTION:ofuel-stockist-spaces */

/* START_SECTION:ofuel-stockist-stats (INDEX:86) */
.ofuel-stockist-stats {
    background: var(--stats-bg, var(--ofuel-black, #000000));
    padding-block: var(--stats-pt, 64px) var(--stats-pb, 64px);
  }

  /*
    Gotcha guard: .ofuel-section forces border-box on the subtree, so the gutter
    is baked into max-width. Add it back so the content column is a true 1400px.
  */
  .ofuel-stockist-stats__inner {
    --stats-gutter: clamp(20px, 5vw, 40px);
    max-width: calc(var(--ofuel-container) + 2 * var(--stats-gutter));
    margin-inline: auto;
    padding-inline: var(--stats-gutter);
  }

  .ofuel-stockist-stats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
  }

  .ofuel-stockist-stats__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /*
    The <li> owns .ofuel-reveal and therefore owns its own transform — putting a
    hover transform there too would have the two silently overwrite each other.
    All hover motion happens on this inner card instead.
  */
  .ofuel-stockist-stats__card {
    position: relative;
    /* Establishes the stacking context the halo below sits inside. */
    z-index: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma: 12px row gap between the number and the label. Use gap rather than a
       margin so a block with only one of the two fields sits flush. */
    gap: 12px;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /*
    Hover halo. Drawn by an outward-inset pseudo-element rather than padding +
    background on the card, so the panel can appear without changing the Figma
    spacing of the row. Only its opacity animates.
  */
  .ofuel-stockist-stats__card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -18px -10px;
    border-radius: 14px;
    background: var(--stats-fg, var(--ofuel-cream, #f0efeb));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .ofuel-stockist-stats__value {
    display: block;
    font-family: var(--ofuel-font);
    /* Figma: DM Sans Black 60px / 60px. 900 is a real self-hosted face
       (assets/ofuel-dmsans-900.woff2), so this is not synthesised. */
    font-weight: 900;
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1;
    letter-spacing: 0;
    color: var(--stats-fg, var(--ofuel-cream, #f0efeb));
    overflow-wrap: break-word;
  }

  .ofuel-stockist-stats__label {
    display: block;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stats-fg, var(--ofuel-cream, #f0efeb));
    /* Figma applies 70% to the label wrapper, not the fill — keep it as opacity
       so it stays correct if the background colour is changed. */
    opacity: 0.7;
    overflow-wrap: break-word;
    transition: opacity 0.3s ease;
  }

  @media (hover: hover) {
    .ofuel-stockist-stats__item:hover .ofuel-stockist-stats__card {
      transform: translateY(-4px);
    }

    .ofuel-stockist-stats__item:hover .ofuel-stockist-stats__card::before {
      opacity: 0.07;
    }

    /* Colour, not motion: the label comes up to full strength on hover. The
       persistent 0.7 stays in the base rule so touch is never left dimmed. */
    .ofuel-stockist-stats__item:hover .ofuel-stockist-stats__label {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-stockist-stats__card,
    .ofuel-stockist-stats__card::before,
    .ofuel-stockist-stats__label {
      transition: none;
    }
  }

  /* Drop the lift only — the halo and the label brightening are feedback, not motion. */
  @media (prefers-reduced-motion: reduce) and (hover: hover) {
    .ofuel-stockist-stats__item:hover .ofuel-stockist-stats__card {
      transform: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-stockist-stats__list {
      gap: 16px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-stockist-stats {
      padding-block: calc(var(--stats-pt, 80px) * 0.75) calc(var(--stats-pb, 80px) * 0.75);
    }

    .ofuel-stockist-stats__list {
      flex-direction: column;
      align-items: stretch;
      gap: 40px;
    }

    /* Reset the desktop equal-width flex: once the main axis is vertical,
       flex: 1 1 0 would pad every stat out to the height of the tallest one. */
    .ofuel-stockist-stats__item {
      flex: 0 0 auto;
    }

    .ofuel-stockist-stats__value {
      font-size: clamp(36px, 11vw, 48px);
    }
  }
/* END_SECTION:ofuel-stockist-stats */

/* START_SECTION:ofuel-stockist-steps (INDEX:87) */
.ofuel-stockist-steps {
    background: var(--steps-bg, #ffffff);
  }

  /* Figma's content column is 1400px wide; box-sizing is border-box here, so the
     gutter has to be added on top or the slab comes out narrower than the design. */
  .ofuel-stockist-steps__inner {
    --gutter: clamp(20px, 5vw, 85px);
    max-width: calc(var(--ofuel-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--steps-pt, 64px) var(--gutter) var(--steps-pb, 64px);
    display: flex;
    flex-direction: column;
    /* 32px of trailing slack under the header in Figma reads as the header-to-slab gap. */
    gap: 32px;
  }

  .ofuel-stockist-steps__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .ofuel-stockist-steps__eyebrow {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ofuel-black, #000000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--ofuel-black, #000000);
  }

  /* 60/57 — line-height is deliberately tighter than the font size. Do not "fix". */
  .ofuel-stockist-steps__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ofuel-black, #000000);
  }

  .ofuel-stockist-steps__intro {
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: var(--ofuel-black, #000000);
  }

  .ofuel-stockist-steps__intro > * {
    margin: 0 0 12px;
  }

  .ofuel-stockist-steps__intro > *:last-child {
    margin-bottom: 0;
  }

  .ofuel-stockist-steps__slab {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--steps-cols, 3), minmax(0, 1fr));
    gap: 1px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    overflow: hidden;
  }

  .ofuel-stockist-steps__card {
    grid-column: span var(--card-span, 1);
    display: flex;
    min-width: 0;
    min-height: 368px;
    padding: clamp(28px, 3.4vw, 48px);
    background: var(--steps-card, #000000);
  }

  /* 24px, not 32: Figma's number block ends at y=176 and the text block starts at
     y=200 inside the card. The gap is a floor — margin-top:auto on __text does the
     bottom-anchoring — and 48 + 128 + 24 + 120 + 48 is exactly the 368px card. */
  .ofuel-stockist-steps__card-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-stockist-steps__num {
    display: block;
    font-family: var(--ofuel-font);
    /* DM Sans Black in the design. ofuel-base.css.liquid self-hosts the 900 cut
       (ofuel-dmsans-900.woff2), so this is a real weight, not a synthesised one. */
    font-weight: 900;
    font-size: clamp(72px, 8vw, 128px);
    line-height: 1;
    color: var(--ofuel-white, #ffffff);
  }

  /* Bottom-anchored, so titles line up across the row whatever the number does. */
  .ofuel-stockist-steps__text {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ofuel-stockist-steps__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.111;
    letter-spacing: -0.02em;
    color: var(--ofuel-white, #ffffff);
  }

  .ofuel-stockist-steps__body {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-cream, #f0efeb);
  }

  /* ---------- Motion ----------
     One transform owner per element, never two:
       __card-inner  → the shared .ofuel-reveal (its stagger is the step order)
       __text        → the trailing copy reveal below (NOT .ofuel-reveal)
       __num         → the hover lift only
     --reveal-delay is set inline on __card-inner and inherits down, so the copy
     is always pinned a beat behind its own step number rather than the section. */
  @media (prefers-reduced-motion: no-preference) {
    .ofuel-stockist-steps__text {
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
      transition-delay: calc(var(--reveal-delay, 0ms) + 190ms);
    }

    .ofuel-stockist-steps__card-inner.ofuel-reveal--in .ofuel-stockist-steps__text {
      opacity: 1;
      transform: none;
    }
  }

  /* Nothing moves the card itself: it is a grid cell in the slab and any lift
     would tear the 1px seams that draw the dividers. The number steps up and
     the description brightens instead. */
  @media (hover: hover) {
    .ofuel-stockist-steps__num {
      transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .ofuel-stockist-steps__body {
      transition: color 0.3s ease;
    }

    .ofuel-stockist-steps__card:hover .ofuel-stockist-steps__num {
      transform: translateY(-6px);
    }

    .ofuel-stockist-steps__card:hover .ofuel-stockist-steps__body {
      color: var(--ofuel-white, #ffffff);
    }
  }

  /* Stacking the grid turns the same 1px gaps into horizontal rules — no other change needed. */
  @media screen and (max-width: 989px) {
    .ofuel-stockist-steps__inner {
      padding-top: min(var(--steps-pt, 112px), 80px);
      padding-bottom: min(var(--steps-pb, 112px), 80px);
    }

    .ofuel-stockist-steps__slab {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-stockist-steps__card {
      /* Reset the desktop span — spanning 2 in a 1-column grid would add a column. */
      grid-column: auto;
      min-height: 280px;
      padding: 36px 32px;
    }

    .ofuel-stockist-steps__card-inner {
      gap: 20px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-stockist-steps__inner {
      padding-top: min(var(--steps-pt, 112px), 64px);
      padding-bottom: min(var(--steps-pb, 112px), 64px);
      gap: 28px;
    }

    .ofuel-stockist-steps__card {
      min-height: 0;
      padding: 28px 24px;
    }

    .ofuel-stockist-steps__card-inner {
      gap: 16px;
    }
  }

  /* Movement goes, colour feedback stays — the brightening description still
     tells you which step you are pointing at. Last in the sheet so it outranks
     the (equal-specificity) hover rules above. */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-stockist-steps__text {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .ofuel-stockist-steps__num,
    .ofuel-stockist-steps__card:hover .ofuel-stockist-steps__num {
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:ofuel-stockist-steps */

/* START_SECTION:ofuel-stockist-value (INDEX:88) */
.ofuel-stockist-value {
    background: var(--sv-bg, var(--ofuel-black, #000000));
  }

  /*
    Figma content column is 1400px wide inside a 1940px frame (270px gutters).
    `.ofuel-section` sets box-sizing: border-box, so the gutter has to be added
    on top of 1400px or the column comes out narrower than the design.
    At 1920px the 85px cap reproduces the ~260px gutter exactly.
  */
  .ofuel-stockist-value__inner {
    --gutter: clamp(20px, 5vw, 85px);
    max-width: calc(var(--ofuel-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--sv-pt, 64px) var(--gutter) var(--sv-pb, 64px);
  }

  .ofuel-stockist-value__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /*
    Figma draws this pill black-on-black (invisible). Rendered in the section
    foreground colour instead, matching every other eyebrow pill on the site.
  */
  .ofuel-stockist-value__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border: 1px solid var(--sv-fg, var(--ofuel-white, #ffffff));
    border-radius: 9999px;
    font-family: var(--ofuel-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sv-fg, var(--ofuel-white, #ffffff));
  }

  /*
    No max-width: the Figma headline is 844px on ONE line inside the 1400px
    column (the 672px frame it sits in is overflowed on purpose — see spec).
    Capping the measure here would wrap it to two lines at desktop.
  */
  .ofuel-stockist-value__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--sv-fg, var(--ofuel-white, #ffffff));
  }

  .ofuel-stockist-value__intro {
    max-width: var(--sv-body-max, 1040px);
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: var(--sv-fg, var(--ofuel-white, #ffffff));
  }

  .ofuel-stockist-value__intro > * {
    margin: 0 0 12px;
  }

  .ofuel-stockist-value__intro > *:last-child {
    margin-bottom: 0;
  }

  /* Figma: header block is 233px tall, grid starts immediately after it. */
  .ofuel-stockist-value__grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(var(--sv-cols, 3), minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 46px;
  }

  /* The reveal owns the transform, the card owns the hover lift — keep them
     on separate elements so they never fight. */
  .ofuel-stockist-value__cell {
    display: grid;
    min-width: 0;
  }

  .ofuel-stockist-value__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    min-height: 280px;
    padding: 29px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    background: var(--sv-card-bg, var(--ofuel-white, #ffffff));
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  @media (hover: hover) {
    .ofuel-stockist-value__card:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 0, 0, 0.2);
    }
  }

  .ofuel-stockist-value__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
  }

  .ofuel-stockist-value__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 9999px;
    background: var(--sv-icon-bg, var(--ofuel-coral, #f57379));
    color: var(--sv-card-fg, var(--ofuel-black, #000000));
  }

  .ofuel-stockist-value__icon svg,
  .ofuel-stockist-value__icon-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .ofuel-stockist-value__num {
    font-family: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    color: var(--sv-card-fg, var(--ofuel-black, #000000));
    opacity: 0.5;
  }

  /* Pinned to the bottom of the 280px card so titles bottom-align across a row. */
  .ofuel-stockist-value__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.25px;
    width: 100%;
  }

  .ofuel-stockist-value__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: var(--sv-card-fg, var(--ofuel-black, #000000));
  }

  .ofuel-stockist-value__body {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--sv-card-body, var(--ofuel-gray, #565552));
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-stockist-value__card {
      transition: none;
    }

    .ofuel-stockist-value__card:hover {
      transform: none;
    }
  }

  /* ---- Tablet: at most 2 columns ---- */
  @media screen and (max-width: 1199px) {
    .ofuel-stockist-value__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-stockist-value__inner {
      padding-top: min(var(--sv-pt, 112px), 80px);
      padding-bottom: min(var(--sv-pb, 112px), 80px);
    }

    .ofuel-stockist-value__grid {
      margin-top: 36px;
      column-gap: 20px;
      row-gap: 28px;
    }
  }

  /* ---- Phone: single column unless the merchant asked for two ---- */
  @media screen and (max-width: 749px) {
    .ofuel-stockist-value__inner {
      padding-top: min(var(--sv-pt, 112px), 64px);
      padding-bottom: min(var(--sv-pb, 112px), 64px);
    }

    .ofuel-stockist-value__head {
      gap: 16px;
    }

    .ofuel-stockist-value__intro {
      font-size: 16px;
      line-height: 26px;
    }

    .ofuel-stockist-value__grid {
      grid-template-columns: minmax(0, 1fr);
      column-gap: 16px;
      row-gap: 24px;
    }

    .ofuel-stockist-value__grid[data-mobile-cols="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Bottom-alignment is meaningless in one column — let cards size to content. */
    .ofuel-stockist-value__grid:not([data-mobile-cols="2"]) .ofuel-stockist-value__card {
      min-height: 0;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-stockist-value__grid,
    .ofuel-stockist-value__grid[data-mobile-cols="2"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-stockist-value__card {
      min-height: 0;
      padding: 24px;
      gap: 20px;
    }

    .ofuel-stockist-value__title {
      font-size: 21px;
      line-height: 28px;
    }
  }
/* END_SECTION:ofuel-stockist-value */

/* START_SECTION:ofuel-wall-of-love (INDEX:89) */
/* ---- Rating summary band ---- */
  .ofuel-wol-summary {
    background: var(--ws-bg, #000);
    color: var(--ws-fg, #f0efeb);
  }

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

  .ofuel-wol-summary__inner {
    --ws-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(1200px + 2 * var(--ws-gutter));
    margin-inline: auto;
    padding: 80px var(--ws-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 32px;
  }

  /* No breakdown to show (a fresh Judge.me account): let the score run full width. */
  .ofuel-wol-summary__inner--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ofuel-wol-summary__avg {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 900;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 1;
    color: var(--ws-fg, #f0efeb);
  }

  .ofuel-wol-summary__stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: var(--ws-bar, #f57379);
  }

  .ofuel-wol-summary__stars svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .ofuel-wol-summary__count {
    margin: 8px 0 0;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ws-fg, #f0efeb);
    opacity: 0.7;
  }

  .ofuel-wol-summary__bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ofuel-wol-summary__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--ws-fg, #f0efeb);
  }

  .ofuel-wol-summary__row-star {
    width: 24px;
    opacity: 0.7;
  }

  .ofuel-wol-summary__row-pct {
    width: 32px;
    text-align: right;
    opacity: 0.7;
  }

  .ofuel-wol-summary__track {
    height: 6px;
    border-radius: 9999px;
    background: rgba(240, 239, 235, 0.15);
    overflow: hidden;
  }

  .ofuel-wol-summary__fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--ws-bar, #f57379);
  }

  /* ---- Wall of love ---- */
  .ofuel-wol {
    background: var(--wl-bg, #f0efeb);
  }

  .ofuel-wol__inner {
    --wl-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--wl-gutter));
    margin-inline: auto;
    padding: 64px var(--wl-gutter);
  }

  .ofuel-wol__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
  }

  .ofuel-wol__head-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-wol__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-wol__heading {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-wol__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-wol__count {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-wol__grid {
    columns: 3;
    column-gap: 24px;
  }

  .ofuel-wol__cell {
    break-inside: avoid;
    /* Safari needs the belt as well as the braces to keep cards intact. */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    margin-bottom: 24px;
  }

  .ofuel-wol__card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    background: var(--wl-card-bg, #fff);
    padding: 28px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  @media (hover: hover) {
  .ofuel-wol__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
    }
}

  .ofuel-wol__stars {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--wl-star, #f57379);
  }

  .ofuel-wol__stars svg {
    display: inline-block;
    width: 16px;
    height: 16px;
  }

  .ofuel-wol__title {
    margin: 16px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ofuel-black, #000);
  }

  .ofuel-wol__body {
    margin: 12px 0 0;
    font-family: var(--ofuel-font);
    font-size: 14px;
    line-height: 22.75px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-wol__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ofuel-wol__avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .ofuel-wol__author-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .ofuel-wol__name {
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-wol__role {
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 18px;
    color: var(--ofuel-gray, #565552);
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-wol__card {
      transition: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-wol-summary__inner {
      grid-template-columns: minmax(0, 1fr);
      padding-block: 64px;
    }

    .ofuel-wol__inner {
      padding-block: 80px;
    }

    .ofuel-wol__grid {
      columns: 2;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-wol__grid {
      columns: 1;
    }
  }
/* END_SECTION:ofuel-wall-of-love */

/* START_SECTION:ofuel-why-belief (INDEX:90) */
.ofuel-why-belief {
    background: var(--wb-bg, #fff);
  }

  .ofuel-why-belief__inner {
    width: 100%;
    max-width: calc(1100px + 2 * var(--ofuel-container-pad));
    margin-inline: auto;
    /*
      Asymmetric on purpose, and deliberately tight.

      The top edge meets the beige personas block, so the colour change already
      marks the boundary — this white space is read as "above the heading", and
      144px of it was too much on top of the personas block's own 112px bottom.

      The bottom runs into the gallery on the same white with nothing marking the
      join, so the two paddings read as a single gap: 64+64 was 128px between the
      statement and the images it introduces. Now 40+40.
    */
    padding: 64px var(--ofuel-container-pad) 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
  }

  .ofuel-why-belief__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-belief__statement {
    margin: 0;
    width: 100%;
    /* Figma sets the wrapping text to 938px inside the 1100px container. */
    max-width: 940px;
    margin-inline: auto;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-belief__lead,
  .ofuel-why-belief__rest {
    display: block;
  }

  .ofuel-why-belief__lead {
    font-weight: 700;
  }

  .ofuel-why-belief__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-why-belief__body {
    margin: 0;
    max-width: 760px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  @media screen and (max-width: 989px) {
    .ofuel-why-belief__inner {
      padding-block: 64px 32px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-why-belief__inner {
      padding-block: 64px 28px;
      gap: 24px;
    }
  }
/* END_SECTION:ofuel-why-belief */

/* START_SECTION:ofuel-why-gallery (INDEX:91) */
.ofuel-why-gallery {
    background: var(--wg-bg, #fff);
  }

  .ofuel-why-gallery__inner {
    --wg-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--wg-gutter));
    margin-inline: auto;
    /*
      Matches the belief section's reduced bottom edge — the two share a white
      background with no divider, so the tiles read as that statement's payoff
      rather than a separate block. The bottom keeps its full 144px: below it the
      comparison section is a genuine change of subject.
    */
    padding: 64px var(--wg-gutter) 64px;
  }

  .ofuel-why-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    /* The dropped tile hangs into the bottom padding instead of stretching the row. */
    align-items: start;
  }

  .ofuel-why-gallery__slot--drop {
    transform: translateY(32px);
  }

  .ofuel-why-gallery__tile {
    /* 450.66 x 563.31 in Figma. */
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ofuel-ebb, #e6e4e2);
  }

  .ofuel-why-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--wg-focal, 50% 50%);
  }

  /*
    The photo settles into its frame as the tile reveals — it enters slightly
    over-scaled and eases back to 1. Three things make this cheap:

    - It sits on the <img>, never the tile. The tile's transform belongs to
      `.ofuel-reveal`, and two transforms on one element overwrite each other.
    - It is finite. Once it lands the compositor goes idle, so nothing is moving
      while the section is actually being read.
    - The frame is `overflow: hidden` and the tile is aspect-ratio'd, so the
      scale never reflows anything or shifts the copy below.

    It rides the existing observer: `--in` lands on the tile, we match downward.
    `--reveal-delay` is set on the tile and inherits, so the 90ms stagger is
    picked up for free.
  */
  @media (prefers-reduced-motion: no-preference) {
    .ofuel-why-gallery__img {
      transform: scale(1.06);
      transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
      transition-delay: var(--reveal-delay, 0ms);
    }

    .ofuel-why-gallery__tile.ofuel-reveal--in .ofuel-why-gallery__img {
      transform: none;
    }
  }

  /*
    Hover: the photo eases in slightly inside its frame. Scale only — no lift and
    no shadow, deliberately. These tiles are not links, and a lift plus shadow is
    the visual grammar of "click me"; a gentle scale reads as the image being
    alive without promising a destination that does not exist.

    Scoped to `.ofuel-reveal--in:hover` (0,4,0) so it outranks the settle's
    resting rule (0,3,0) AND can only fire once the settle has finished — the two
    own the same property on the same element, so overlapping them would have the
    1.4s settle curve fighting the hover. The duration and delay are overridden
    for the same reason: inherited, the hover would crawl in over 1.4s after the
    stagger delay.
  */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ofuel-why-gallery__tile.ofuel-reveal--in:hover .ofuel-why-gallery__img {
      transform: scale(1.04);
      transition-duration: 0.6s;
      transition-delay: 0s;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-why-gallery__inner {
      padding-block: 32px 96px;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-why-gallery__inner {
      padding-block: 28px 72px;
    }

    .ofuel-why-gallery__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    /* Stacked, the offset just reads as an uneven gap. */
    .ofuel-why-gallery__slot--drop {
      transform: none;
    }
  }
/* END_SECTION:ofuel-why-gallery */

/* START_SECTION:ofuel-why-hero (INDEX:92) */
.ofuel-why-hero {
    position: relative;
    background: var(--wh-bg, #f0efeb);
    overflow: hidden;
  }

  /*
    box-sizing is border-box inside .ofuel-section, so the gutter has to be added
    on top of the 1400px Figma column or the content lands narrower than drawn.
  */
  /*
    Sits over .ofuel-why-hero__bg. min-height gives the backdrop room to read as a
    photograph — with only the copy setting the height the section collapsed to
    roughly the text block and the shot became a thin strip.
  */
  .ofuel-why-hero__inner {
    --wh-gutter: var(--ofuel-container-pad);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--wh-gutter));
    margin-inline: auto;
    padding-inline: var(--wh-gutter);
    /* Header pills float over this section; never let the top pad fall under them. */
    padding-block: max(160px, 88px) 112px;
    min-height: clamp(560px, 46vw, 720px);
    display: flex;
    align-items: center;
    gap: 40px;
  }

  /*
    Capped at ~54% so the copy never runs across the sachet and glass, which sit
    in the right-hand third of the backdrop.
  */
  .ofuel-why-hero__content {
    flex: 0 1 auto;
    width: min(54%, 720px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-why-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /*
      Figma says SemiBold 600, but ofuel-base.css self-hosts 300/400/500/700/900
      only — 600 resolves up to the 700 cut, so it is declared outright.
    */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  /*
    128px display type. px in the clamp minimum on purpose — the theme root is
    62.5%, so a rem minimum would silently render at a tenth of the size.
  */
  .ofuel-why-hero__heading {
    margin: 0;
    width: 100%;
    font-family: var(--ofuel-font);
    font-weight: 900;
    /*
      Sized so the widow-guarded last pair ("take creatine.") always fits the
      column. Measured: the pair needs <=101px at 1280, <=114px at 1440, <=117px
      at 1920, and the old clamp(42, 8.2vw, 128) exceeded all three — which is
      why it broke mid-word.

      overflow-wrap: break-word is GONE on purpose. With the pair bound by a
      non-breaking space it had nowhere legal to wrap, so it split inside the
      word and rendered "creatin / e." Words must never break here; if a future
      heading genuinely cannot fit, shrink the clamp rather than restoring it.
    */
    font-size: clamp(42px, 7.7vw, 114px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ofuel-black, #000);
    overflow-wrap: normal;
    word-break: normal;
  }

  .ofuel-why-hero__em {
    font-weight: 300;
    font-style: italic;
  }

  .ofuel-why-hero__body {
    width: 100%;
    max-width: 576px;
    padding-top: 8px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-why-hero__body > * {
    margin: 0;
  }

  /* One blank 28px line between paragraphs, as drawn. */
  .ofuel-why-hero__body > * + * {
    margin-top: 28px;
  }

  .ofuel-why-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
  }

  .ofuel-why-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border-radius: 9999px;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  /* 8px right pad so the 36px arrow chip sits flush inside the pill. */
  .ofuel-why-hero__btn--primary {
    padding: 8px 8px 8px 24px;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
  }

  /* Solid white in the design, not an outline — it sits on the cream page. */
  .ofuel-why-hero__btn--secondary {
    padding: 12px 24px;
    background: var(--ofuel-white, #fff);
    color: var(--ofuel-black, #000);
    backdrop-filter: blur(4px);
  }

  .ofuel-why-hero__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    color: var(--ofuel-black, #000);
    transition: transform 0.2s ease;
  }

  .ofuel-why-hero__btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  @media (hover: hover) {
  .ofuel-why-hero__btn:hover {
      transform: translateY(-1px);
    }
}

  @media (hover: hover) {
  .ofuel-why-hero__btn:hover .ofuel-why-hero__btn-icon {
      transform: translateX(3px);
    }
}

  @media (hover: hover) {
  .ofuel-why-hero__btn--secondary:hover {
      background: var(--ofuel-black, #000);
      color: var(--ofuel-cream, #f0efeb);
    }
}

  .ofuel-why-hero__btn:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 3px;
  }

  /*
    Full-bleed backdrop behind the copy. z-index 0 with the inner column at 1 so
    the text sits over it without needing a stacking context on every child.
  */
  .ofuel-why-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--wh-bg, #f0efeb);
  }

  .ofuel-why-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
      Right-aligned. Which axis gets cropped depends on how the section's ratio
      compares to the source's 1.778: the heading is 128px type, so at 1440px the
      section runs ~970px tall (ratio ~1.48) and it is the WIDTH that overflows —
      centred showed 8-92% and sliced the glass off at the right edge. Anchoring
      right shows 16.5-100%, so the sachet and glass stay whole; the 16.5% lost
      on the left is empty cream, and the copy sits over what remains.

      On wider/shorter viewports the width binds instead, there is no horizontal
      overflow, and this degrades to a centred vertical crop on its own.
    */
    object-position: right center;
  }

  @media (prefers-reduced-motion: reduce) {
    .ofuel-why-hero__btn,
    .ofuel-why-hero__btn-icon {
      transition: none;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-why-hero__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 48px;
      padding-block: max(112px, 88px) 80px;
      min-height: clamp(520px, 92vw, 640px);
    }

    /* Stacked: the copy takes the full width over the backdrop. The image is
       already right-anchored in the base rule, which is what narrow screens need
       too — cover crops the sides hard here and that keeps the sachet in frame. */
    .ofuel-why-hero__content {
      flex: 0 0 auto;
      width: 100%;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-why-hero__content {
      gap: 20px;
    }

    .ofuel-why-hero__body {
      font-size: 17px;
      line-height: 26px;
    }

    .ofuel-why-hero__body > * + * {
      margin-top: 24px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-why-hero__btn--primary {
      padding-left: 20px;
    }

    .ofuel-why-hero__btn--secondary {
      padding-inline: 20px;
    }
  }
/* END_SECTION:ofuel-why-hero */

/* START_SECTION:ofuel-why-moments (INDEX:93) */
.ofuel-why-moments {
    background: var(--wm-surround, #f0efeb);
  }

  /* White panel with 32px corners floating on the cream page, as drawn. */
  .ofuel-why-moments__panel {
    background: var(--wm-bg, #fff);
    border-radius: 32px;
  }

  .ofuel-why-moments__inner {
    --wm-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--wm-gutter));
    margin-inline: auto;
    padding: 64px var(--wm-gutter);
    display: flex;
    align-items: center;
    gap: 64px;
  }

  .ofuel-why-moments__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofuel-why-moments__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-moments__heading {
    margin: 0;
    width: 100%;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-moments__list {
    margin: 0;
    padding: 16px 0 0;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ofuel-why-moments__item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .ofuel-why-moments__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    color: var(--ofuel-cream, #f0efeb);
    font-family: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
    font-size: 12px;
    line-height: 16px;
  }

  .ofuel-why-moments__item-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ofuel-why-moments__item-title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-moments__item-text {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  /* 668px square in Figma: circle at 84% of it, sachet centred over the top. */
  /*
    2x2 grid of square tiles. The aspect-ratio moved off the wrapper and onto the
    tiles: the wrapper is no longer one square holding an absolutely-positioned
    composition, it is a grid whose height follows its rows.
  */
  .ofuel-why-moments__media {
    flex: 1 1 0;
    min-width: 0;
    max-width: 668px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ofuel-why-moments__tile {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: var(--ofuel-ebb, #e6e4e2);
  }

  .ofuel-why-moments__tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (max-width: 989px) {
    .ofuel-why-moments__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 56px;
      padding-block: 88px;
    }

    /* Vertical flex axis once stacked — a 0 basis would collapse the square. */
    .ofuel-why-moments__content,
    .ofuel-why-moments__media {
      flex: 0 0 auto;
    }

    .ofuel-why-moments__media {
      align-self: center;
      width: min(520px, 86vw);
      max-width: none;
    }
  }

  @media screen and (max-width: 749px) {
    .ofuel-why-moments__inner {
      padding-block: 72px;
      gap: 48px;
    }

    .ofuel-why-moments__item-text {
      font-size: 15px;
      line-height: 23px;
    }
  }
/* END_SECTION:ofuel-why-moments */

/* START_SECTION:ofuel-why-reasons (INDEX:94) */
.ofuel-why-reasons {
    background: var(--wr-surround, #f0efeb);
  }

  /* White panel with 32px corners floating on the cream page, as drawn. */
  .ofuel-why-reasons__panel {
    background: var(--wr-bg, #fff);
    border-radius: 32px;
  }

  .ofuel-why-reasons__inner {
    --wr-gutter: var(--ofuel-container-pad);
    width: 100%;
    max-width: calc(var(--ofuel-container) + 2 * var(--wr-gutter));
    margin-inline: auto;
    padding: 64px var(--wr-gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  /*
    A closing line needs less room beneath it than a row of cards does — at the
    full 112px it read as a stranded orphan rather than the end of the block.
  */
  .ofuel-why-reasons__inner--has-outro {
    padding-bottom: 72px;
  }

  /* Heading left, pill pinned to the right and baseline-aligned with it. */
  .ofuel-why-reasons__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
  }

  /*
    Figma gives the text a 672px measure with 45px of clearance before the pill.
    box-sizing is border-box in here, so the max-width has to carry the padding
    or the heading wraps a line earlier than drawn.
  */
  .ofuel-why-reasons__heading {
    margin: 0;
    max-width: 717px;
    padding-right: 45px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-reasons__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    /* No 600 face is self-hosted; 600 resolves to the 700 cut, so declare it. */
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-reasons__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .ofuel-why-reasons__reveal {
    display: grid;
  }

  /*
    Only 8px of its own. `__inner` is a flex column with a 48px gap, so the gap
    already separates this from the cards — the two were stacking to 120px.
  */
  .ofuel-why-reasons__outro {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .ofuel-why-reasons__outro-heading {
    margin: 0;
    max-width: 800px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /* A step below the section h2 — this closes the block, it does not open it. */
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.9px;
    text-wrap: balance;
    /* Dawn styles bare headings, so the colour has to be explicit. */
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-reasons__outro-body {
    margin: 0;
    max-width: 620px;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-why-reasons__card {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    background: var(--ofuel-white, #fff);
    /*
      0.3s against the photo's 0.6s. The card leads and the image trails, which
      layers the two into one gesture — the previous 0.18s/0.7s split was far
      enough apart that the card snapped and the photo caught up afterwards.
    */
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
    Image panel. The accent sits behind the photo so a card without an image
    still reads as a designed block rather than an empty frame.
  */
  .ofuel-why-reasons__media {
    position: relative;
    height: 192px;
    flex: none;
    overflow: hidden;
    background: var(--wr-accent, #f0efeb);
  }

  .ofuel-why-reasons__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--wr-focal, center);
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ofuel-why-reasons__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ofuel-why-reasons__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-reasons__chip svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  /*
    Every hover state on this card is gated on a real pointer. Unguarded,
    `:hover` latches on touch — the card a finger last passed over stays lifted
    until something else is tapped, which on a four-card grid reads as a stuck
    selection rather than a hover.

    Four things move, all compositor-only (transform + opacity), all on the same
    curve so they land together as one gesture rather than four effects.
  */
  @media (hover: hover) {
    .ofuel-why-reasons__card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1);
    }

    .ofuel-why-reasons__card:hover .ofuel-why-reasons__img {
      transform: scale(1.05);
    }

    /* The kicker rule draws out from 16px to 28px. scaleX rather than width so
       it stays off the layout path — width would reflow the tag row. */
    .ofuel-why-reasons__card:hover .ofuel-why-reasons__tag-rule {
      transform: scaleX(1.75);
    }

    /* The index lifts out of its resting 0.6 so the card it belongs to is
       unambiguous when several are side by side. */
    .ofuel-why-reasons__card:hover .ofuel-why-reasons__num {
      opacity: 1;
    }
  }

  .ofuel-why-reasons__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--ofuel-black, #000);
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }

  .ofuel-why-reasons__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
  }

  /* Coral kicker under a hairline, as in the reference design. */
  .ofuel-why-reasons__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-family: var(--ofuel-font);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-why-reasons__tag-rule {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    flex: none;
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ofuel-why-reasons__title {
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why-reasons__body {
    margin: 12px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    color: var(--ofuel-black, #000);
    opacity: 0.8;
  }

  /*
    Reduced motion keeps the hover *feedback* but drops the movement — the
    shadow and the index still respond so the card is still obviously live,
    while nothing translates or scales. Sits after the hover block so the
    `transform: none` wins on equal specificity.
  */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-why-reasons__card,
    .ofuel-why-reasons__img,
    .ofuel-why-reasons__tag-rule {
      transition: none;
    }

    .ofuel-why-reasons__card:hover,
    .ofuel-why-reasons__card:hover .ofuel-why-reasons__img,
    .ofuel-why-reasons__card:hover .ofuel-why-reasons__tag-rule {
      transform: none;
    }
  }

  @media screen and (max-width: 1199px) {
    .ofuel-why-reasons__title {
      font-size: 26px;
    }
  }

  @media screen and (max-width: 989px) {
    .ofuel-why-reasons__inner {
      padding-block: 80px;
    }

    .ofuel-why-reasons__inner--has-outro {
      padding-bottom: 56px;
    }

    .ofuel-why-reasons__heading {
      padding-right: 0;
    }

    .ofuel-why-reasons__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-why-reasons__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .ofuel-why-reasons__card {
      min-height: 0;
    }

    .ofuel-why-reasons__card-body {
      padding-top: 40px;
    }
  }
/* END_SECTION:ofuel-why-reasons */

/* START_SECTION:ofuel-why (INDEX:95) */
.ofuel-why {
    background: #fff;
  }

  .ofuel-why__inner {
    max-width: 1648px;
    margin-inline: auto;
    padding: 64px clamp(24px, 7vw, 136px);
    display: flex;
    align-items: stretch;
    gap: clamp(56px, 8vw, 120px);
  }

  /*
    Fixed ratio + centre alignment, NOT the row's `align-items: stretch`.

    Stretching tied this frame's height to the text column, so its aspect ratio —
    and therefore how much of the photo `cover` revealed — changed with every
    viewport: 0.723 at 1440px, 0.636 at 1200px, 0.518 at 990px. That last one
    exposed just 39% of the source width, barely one sachet. 5/6 shows a
    consistent 62.8% at every width, which is what frames three of them.
  */
  .ofuel-why__media {
    flex: 747 1 0;
    min-width: 0;
    align-self: center;
    aspect-ratio: 5 / 6;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--ofuel-ebb, #e6e4e2);
  }

  .ofuel-why__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
      The source is LANDSCAPE (ofuel-why-image.png, 1444x1089) in a portrait
      frame, so height binds and the crop is purely horizontal.

      The photo is four sachets pegged on a line, measured at 8.2-19.3%,
      33.6-44.4%, 59.3-70.1% and 84.9-95.5% across. Three of them span 8.2-70.1%
      = 61.9% of the width, and the 5/6 frame reveals 62.8% — so the window has
      to start at ~7.8% rather than sit centred. Centred it began at 18.6% and
      showed only the middle two.

      `object-position: 21%` puts the window at 7.8-70.6%: sachets one, two and
      three whole, the fourth out of frame. Re-derive this if the photo changes.
    */
    object-position: 21% center;
    display: block;
  }

  .ofuel-why__content {
    flex: 880 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(48px, 6vw, 107px);
  }

  .ofuel-why__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 668px;
    width: 100%;
  }

  .ofuel-why__eyebrow {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 9px 17px;
    font-family: var(--ofuel-font);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why__heading {
    margin: 8px 0 0;
    font-family: var(--ofuel-font);
    font-weight: 500;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 0.95;
    letter-spacing: -1.2px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why__body {
    margin: 0;
    max-width: 640px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-gray, #565552);
  }

  /*
    Column-major to match the design: points 1–3 fill the left column, 4–6 the
    right. `grid-auto-flow: column` + an explicit row count does that; the
    single-column fallback below resets both.
  */
  .ofuel-why__list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 12px;
    width: 100%;
  }

  .ofuel-why__point {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ofuel-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ofuel-black, #000);
    color: #fff;
    flex: none;
  }

  .ofuel-why__check svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  /* ---- Overlapping Venn circles ---- */
  .ofuel-why__venn {
    --circle: clamp(210px, 21vw, 292px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .ofuel-why__circle {
    width: var(--circle);
    height: var(--circle);
    flex: none;
    border-radius: 50%;
    border: 0.05em solid rgba(0, 0, 0, 0.1);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.16em;
    font-family: var(--ofuel-font);
    font-size: calc(var(--circle) * 0.082);
  }

  .ofuel-why__circle:not(:first-child) {
    margin-left: calc(var(--circle) * -0.218);
  }

  .ofuel-why__circle-num {
    font-family: 'Menlo', ui-monospace, SFMono-Regular, monospace;
    font-size: 0.333em;
    line-height: 1.33;
    color: var(--ofuel-black, #000);
    opacity: 0.5;
  }

  .ofuel-why__circle-label {
    margin-top: 1.19em;
    border: 0.1em solid var(--ofuel-black, #000);
    border-radius: 9999px;
    padding: 0.9em 1.7em;
    font-size: 0.278em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why__circle-title {
    margin: 0.44em 0 0;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.11;
    letter-spacing: -0.02em;
    color: var(--ofuel-black, #000);
  }

  .ofuel-why__circle-desc {
    margin: 0.855em 0 0;
    font-size: 0.389em;
    line-height: 1.43;
    color: var(--ofuel-gray, #565552);
  }

  @media screen and (max-width: 989px) {
    .ofuel-why__inner {
      flex-direction: column;
      align-items: center;
      padding-block: 80px;
      gap: 40px;
    }

    .ofuel-why__media {
      flex: none;
      width: 100%;
      max-width: 560px;
      /* Same 5/6 as desktop so the three-sachet framing holds when stacked. */
      aspect-ratio: 5 / 6;
    }

    .ofuel-why__content {
      flex: none;
      width: 100%;
      align-items: center;
    }

    .ofuel-why__text {
      align-items: flex-start;
      max-width: 560px;
    }
  }

  @media screen and (max-width: 559px) {
    .ofuel-why__list {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-auto-flow: row;
    }

    .ofuel-why__venn {
      flex-direction: column;
    }

    .ofuel-why__circle {
      --circle: min(300px, 82vw);
    }

    .ofuel-why__circle:not(:first-child) {
      margin-left: 0;
      margin-top: calc(var(--circle) * -0.12);
    }
  }
/* END_SECTION:ofuel-why */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:ofuel-cart-drawer (INDEX:123) */
/* Dawn's base.css loads AFTER the CSS collected from stylesheet tags
     (content_for_header sits above it in theme.liquid), so it wins every
     specificity tie. Everything here is class-based (0-1-0) to stay ahead of
     Dawn's element selectors, and the [hidden] rule below is !important
     because a bare `[hidden]` UA rule loses to any class that sets display. */
  .ofuel-cart [hidden] {
    display: none !important;
  }

  .ofuel-cart {
    position: fixed;
    inset: 0;
    z-index: 1000;
    font-family: var(--ofuel-font);
    color: var(--ofuel-black, #000);
    visibility: hidden;
    /* Hold visibility until the panel has finished sliding out. */
    transition: visibility 0s linear 340ms;
  }

  .ofuel-cart.is-open {
    visibility: visible;
    transition-delay: 0s;
  }

  .ofuel-cart__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    cursor: default;
    transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .ofuel-cart.is-open .ofuel-cart__scrim {
    opacity: 1;
  }

  .ofuel-cart__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-width: 100%;
    background: var(--ofuel-white, #fff);
    /* Left corners only — the right edge is flush to the viewport. */
    border-radius: 32px 0 0 32px;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.18);
    /* Transform only: no width/left animation, nothing that triggers layout. */
    transform: translateX(100%);
    transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    overflow: hidden;
  }

  .ofuel-cart.is-open .ofuel-cart__panel {
    transform: translateX(0);
  }

  /* ---------- head ---------- */
  .ofuel-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: none;
    padding: 26px 24px 18px;
    border-bottom: 1px solid var(--ofuel-ebb, #e6e4e2);
  }

  .ofuel-cart__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.44px;
    /* Dawn sets `h2 { color: rgb(var(--color-foreground)) }` — declare ours. */
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 9999px;
    background: var(--ofuel-coral, #f57379);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.4px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px tap floor — this is the only way out of the drawer on a phone. */
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--ofuel-black, #000);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
  }

  .ofuel-cart__close svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  /* ---------- body ---------- */
  .ofuel-cart__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 24px 28px;
    overflow-y: auto;
    /* Stop the page behind from scrolling once this list hits its end. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ofuel-cart__items {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
  }

  .ofuel-cart__item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--ofuel-ebb, #e6e4e2);
  }

  .ofuel-cart__item:last-child {
    margin-bottom: 0;
  }

  .ofuel-cart__item-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: 16px;
    background: var(--ofuel-cream, #f0efeb);
    overflow: hidden;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cart__item-img {
    display: block;
    /* An <img> is a replaced element: with inset alone, width/height:auto
       resolves to the intrinsic size, not the box. Percentages are required. */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ofuel-cart__item-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    opacity: 0.55;
  }

  .ofuel-cart__item-ph svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ofuel-cart__item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .ofuel-cart__item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .ofuel-cart__item-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.2px;
    color: var(--ofuel-black, #000);
    text-decoration: none;
  }

  .ofuel-cart__item-total {
    flex: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    color: var(--ofuel-black, #000);
    white-space: nowrap;
  }

  .ofuel-cart__item-variant,
  .ofuel-cart__item-plan,
  .ofuel-cart__item-unit {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cart__item-plan {
    color: var(--ofuel-coral, #f57379);
    font-weight: 700;
  }

  .ofuel-cart__item-was {
    color: var(--ofuel-gray, #565552);
    opacity: 0.7;
  }

  .ofuel-cart__item-discounts {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }

  .ofuel-cart__item-discount {
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    color: var(--ofuel-coral, #f57379);
  }

  .ofuel-cart__item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
  }

  .ofuel-cart__qty {
    display: inline-flex;
    align-items: center;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 9999px;
    overflow: hidden;
  }

  .ofuel-cart__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the Apple HIG tap floor; the theme's bundle-builder stepper already uses it. */
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--ofuel-black, #000);
    cursor: pointer;
    transition: background-color 0.18s ease;
  }

  .ofuel-cart__qty-btn[disabled] {
    opacity: 0.32;
    cursor: default;
  }

  .ofuel-cart__qty-btn svg {
    display: block;
    width: 15px;
    height: 15px;
  }

  .ofuel-cart__qty-input {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: textfield;
    -moz-appearance: textfield;
    background: transparent;
    box-shadow: none;
    font-family: var(--ofuel-font);
    font-weight: 700;
    /*
      16px is a functional floor: iOS Safari zooms the viewport on focus for any
      input below it and never zooms back. This drawer renders on EVERY page
      (layout/theme.liquid), so it is the most exposed text field in the theme.
    */
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__qty-input::-webkit-outer-spin-button,
  .ofuel-cart__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .ofuel-cart__remove {
    /*
      Remove is destructive and irreversible, and it was 19px tall with padding:0
      — under even the WCAG 2.2 AA 24px minimum. The padding lifts the hit area to
      the 24px floor without moving the text, and the negative inline margin keeps
      the underline visually flush with the line items beside it.
    */
    padding: 6px 8px;
    margin-inline: -8px;
    min-height: 24px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font-family: var(--ofuel-font);
    font-size: 13px;
    line-height: 19px;
    color: var(--ofuel-gray, #565552);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.18s ease;
  }

  /* ---------- empty state ---------- */
  .ofuel-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 44px 8px 36px;
  }

  .ofuel-cart__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--ofuel-cream, #f0efeb);
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cart__empty-icon svg {
    display: block;
    width: 30px;
    height: 30px;
  }

  .ofuel-cart__empty-title {
    margin: 0;
    font-weight: 700;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.3px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__empty-text {
    margin: 0;
    max-width: 280px;
    font-size: 14px;
    line-height: 22px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cart__empty-cta {
    margin-top: 10px;
    padding: 12px 24px;
    border: 1px solid var(--ofuel-black, #000);
    border-radius: 9999px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  /* ---------- add something else ---------- */
  .ofuel-cart__recs {
    padding-top: 4px;
  }

  .ofuel-cart__recs-title {
    margin: 0 0 12px;
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__recs-list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 0 6px;
    list-style: none;
    /* Horizontal scroll stays inside the drawer; the panel never grows. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ofuel-cart__rec {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 136px;
    flex: none;
    padding: 10px;
    border: 1px solid var(--ofuel-ebb, #e6e4e2);
    border-radius: 18px;
    background: var(--ofuel-white, #fff);
  }

  .ofuel-cart__rec-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 92px;
    border-radius: 12px;
    background: var(--ofuel-cream, #f0efeb);
    overflow: hidden;
    color: var(--ofuel-gray, #565552);
  }

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

  .ofuel-cart__rec-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    opacity: 0.55;
  }

  .ofuel-cart__rec-ph svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ofuel-cart__rec-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.1px;
    color: var(--ofuel-black, #000);
    /* Two lines maximum, so every card in the row stays the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ofuel-cart__rec-price {
    font-size: 13px;
    line-height: 18px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cart__rec-add {
    margin-top: auto;
    padding: 8px 10px;
    border: 0;
    border-radius: 9999px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ofuel-coral, #f57379);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ofuel-black, #000);
    cursor: pointer;
    transition: filter 0.18s ease;
  }

  .ofuel-cart__rec-add[disabled] {
    opacity: 0.6;
    cursor: default;
  }

  /* ---------- foot ---------- */
  .ofuel-cart__foot {
    flex: none;
    padding: 18px 24px 24px;
    border-top: 1px solid var(--ofuel-ebb, #e6e4e2);
    background: var(--ofuel-white, #fff);
  }

  .ofuel-cart__error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(245, 115, 121, 0.16);
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .ofuel-cart__totals-label {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__totals-value {
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.5px;
    color: var(--ofuel-black, #000);
  }

  .ofuel-cart__fineprint {
    margin: 6px 0 14px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--ofuel-gray, #565552);
  }

  .ofuel-cart__checkout-form {
    margin: 0;
  }

  .ofuel-cart__checkout {
    display: block;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    border: 0;
    border-radius: 9999px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ofuel-black, #000);
    font-family: var(--ofuel-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 54px;
    letter-spacing: 0.3px;
    color: var(--ofuel-white, #fff);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .ofuel-cart__checkout[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  /* While a request is in flight nothing else is clickable, which is the
     double-submit guard made visible. withBusy() always removes .is-busy,
     on the error path as well as the success path. */
  .ofuel-cart.is-busy .ofuel-cart__panel {
    cursor: progress;
  }

  .ofuel-cart.is-busy .ofuel-cart__qty-btn,
  .ofuel-cart.is-busy .ofuel-cart__remove,
  .ofuel-cart.is-busy .ofuel-cart__rec-add,
  .ofuel-cart.is-busy .ofuel-cart__checkout {
    pointer-events: none;
    opacity: 0.55;
  }

  /* ---------- hover (never bare: it latches on touch) ---------- */
  @media (hover: hover) {
    .ofuel-cart__close:hover {
      background: var(--ofuel-cream, #f0efeb);
      border-color: rgba(0, 0, 0, 0.28);
    }

    .ofuel-cart__qty-btn:not([disabled]):hover {
      background: var(--ofuel-cream, #f0efeb);
    }

    .ofuel-cart__item-title:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .ofuel-cart__remove:hover {
      color: var(--ofuel-coral, #f57379);
    }

    .ofuel-cart__empty-cta:hover {
      background: var(--ofuel-black, #000);
      color: var(--ofuel-white, #fff);
    }

    .ofuel-cart__rec-add:not([disabled]):hover {
      filter: brightness(0.94);
    }

    .ofuel-cart__checkout:not([disabled]):hover {
      background: var(--ofuel-coral, #f57379);
      color: var(--ofuel-black, #000);
    }
  }

  .ofuel-cart__close:focus-visible,
  .ofuel-cart__qty-btn:focus-visible,
  .ofuel-cart__qty-input:focus-visible,
  .ofuel-cart__remove:focus-visible,
  .ofuel-cart__item-title:focus-visible,
  .ofuel-cart__empty-cta:focus-visible,
  .ofuel-cart__rec-add:focus-visible,
  .ofuel-cart__checkout:focus-visible {
    outline: 2px solid var(--ofuel-coral, #f57379);
    outline-offset: 2px;
  }

  /* ---------- motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .ofuel-cart,
    .ofuel-cart__scrim,
    .ofuel-cart__panel,
    .ofuel-cart__close,
    .ofuel-cart__qty-btn,
    .ofuel-cart__remove,
    .ofuel-cart__empty-cta,
    .ofuel-cart__rec-add,
    .ofuel-cart__checkout {
      transition: none;
    }

    /* The panel no longer slides; the root's visibility still hides it. */
    .ofuel-cart__panel {
      transform: none;
    }
  }

  /* ---------- breakpoints ---------- */
  @media screen and (max-width: 559px) {
    .ofuel-cart__panel {
      width: 100%;
      /* Flush to both viewport edges, so a left radius would frame page
         content through the corner rather than reading as a sheet edge. */
      border-radius: 0;
    }

    .ofuel-cart__head {
      padding: 20px 18px 16px;
    }

    .ofuel-cart__body {
      padding: 18px 18px 24px;
    }

    .ofuel-cart__foot {
      padding: 16px 18px 20px;
    }
  }
/* END_SNIPPET:ofuel-cart-drawer */