/* ============================================================
         VIGORTRIX · Forged Heroic Luxury
         Onyx base · molten gold accent · crimson spark
         ============================================================ */

      :root {
        /* Onyx scale */
        --onyx-900: #0b0b0c;
        --onyx-850: #0e0e10;
        --onyx-800: #131316;
        --onyx-700: #18181c;
        --onyx-600: #202026;
        --onyx-500: #2b2b32;

        /* Gold (grounded in product render: core #A88020, highlight #D0B060) */
        --gold-100: #f6e7b6;
        --gold-300: #e6cd83;
        --gold-500: #c9a24a; /* brand gold */
        --gold-700: #a8801f; /* measured core */
        --gold-900: #6f5314;
        --grad-gold: linear-gradient(
          135deg,
          #f6e7b6 0%,
          #e6cd83 28%,
          #c9a24a 55%,
          #9a7620 100%
        );
        --grad-gold-soft: linear-gradient(135deg, #e6cd83, #b88f2c);

        /* Crimson (product plume #98101A) */
        --crimson: #98101a;
        --crimson-400: #c0303a;
        --grad-red: linear-gradient(135deg, #c0303a 0%, #98101a 52%, #6e0c12 100%);
        --grad-red-soft: linear-gradient(135deg, #b5232c, #7e0d15);

        /* Neutrals */
        --bone: #efe9da; /* body text on dark */
        --bone-dim: #b7b0a1;
        --ash: #87826f;
        --cream: #f6f1e7; /* light section bg */
        --cream-2: #efe7d6;
        --ink: #1b1814; /* text on light */
        --ink-dim: #56503f;

        --line: rgba(201, 162, 74, 0.18);
        --line-soft: rgba(239, 233, 218, 0.09);

        --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.85);
        --shadow-gold: 0 14px 40px -26px rgba(168, 128, 32, 0.32);
        --shadow-red: 0 12px 34px -20px rgba(152, 16, 26, 0.45);
        /* Layered, warm-tinted elevation for dark cards on the cream sections */
        --pack-shadow: 0 2px 4px rgba(24, 17, 8, 0.12),
          0 12px 26px -10px rgba(24, 17, 8, 0.3),
          0 34px 60px -28px rgba(24, 17, 8, 0.42);
        --pack-shadow-hover: 0 3px 6px rgba(24, 17, 8, 0.2),
          0 18px 36px -12px rgba(24, 17, 8, 0.36),
          0 52px 92px -32px rgba(24, 17, 8, 0.5);

        --hair: rgba(201, 162, 74, 0.3);

        --font-display: "Newsreader", Georgia, serif;
        --font-accent: "IBM Plex Sans", system-ui, sans-serif;
        --font-body: "IBM Plex Sans", system-ui, sans-serif;

        --nav-h: 68px;
        --container: 1180px;
        --radius: 4px;
        --radius-btn: 6px;
        --radius-sm: 2px;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--nav-h) + 18px);
        -webkit-text-size-adjust: 100%;
      }

      body {
        margin: 0;
        font-family: var(--font-body);
        background: var(--onyx-900);
        color: var(--bone);
        font-size: 17px;
        line-height: 1.6;
        font-weight: 400;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      /* <picture> wraps optimized <img> (avif/webp + fallback) without
         affecting layout — the inner <img> participates directly. */
      picture {
        display: contents;
      }
      /* With display:contents the <source> elements would otherwise be
         promoted to grid/flex items (phantom 0px row). Keep them out of layout. */
      picture > source {
        display: none;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
        cursor: pointer;
      }

      .container {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 22px;
      }

      /* ---------- Typography ---------- */
      h1,
      h2,
      h3,
      h4 {
        font-family: var(--font-display);
        font-weight: 700;
        font-optical-sizing: auto;
        line-height: 1.1;
        letter-spacing: -0.005em;
        margin: 0;
      }

      .eyebrow {
        font-family: var(--font-accent);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-size: 0.72rem;
        color: var(--gold-500);
        margin: 0 0 18px;
        display: inline-block;
      }

      .gold-text {
        color: var(--gold-300);
        -webkit-text-fill-color: initial;
      }
      .red-text {
        color: #d8232e;
        -webkit-text-fill-color: initial;
      }

      .section-title {
        font-size: clamp(1.8rem, 4.2vw, 3rem);
      }
      .section-lead {
        color: var(--bone-dim);
        max-width: 60ch;
        font-size: 1.06rem;
      }
      .section-lead strong {
        color: var(--bone);
        font-weight: 700;
      }

      .section {
        padding: clamp(76px, 10vw, 132px) 0;
        position: relative;
      }
      .center {
        text-align: center;
      }
      .center .section-lead {
        margin-left: auto;
        margin-right: auto;
      }

      /* ---------- Buttons ---------- */
      .btn {
        --bg: var(--grad-red);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        gap: 0.55em;
        padding: 17px 32px;
        border: 0;
        border-radius: var(--radius-btn);
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: 0.01em;
        color: #fff;
        background: var(--bg);
        box-shadow: var(--shadow-red);
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease,
          filter 0.25s ease;
        text-align: center;
      }
      .btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: 0 18px 44px -22px rgba(152, 16, 26, 0.55);
      }
      .btn:active {
        transform: translateY(0);
      }
      .btn--ghost {
        background: transparent;
        color: var(--gold-300);
        border: 1.5px solid var(--line);
        box-shadow: none;
      }
      .btn--ghost:hover {
        border-color: var(--gold-500);
        background: rgba(201, 162, 74, 0.08);
      }
      .btn--block {
        width: 100%;
        font-size: 0.86rem;
        letter-spacing: 0;
        padding-left: 14px;
        padding-right: 14px;
      }

      :focus-visible {
        outline: 2px solid var(--gold-300);
        outline-offset: 3px;
        border-radius: 6px;
      }

      /* ---------- Top bar ---------- */
      .topbar {
        display: block;
        background: linear-gradient(90deg, #0a0a0b, #1a160c, #0a0a0b);
        color: var(--gold-300);
        text-align: center;
        font-family: var(--font-accent);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-size: 0.66rem;
        padding: 8px 14px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        transition: filter 0.2s ease, background 0.3s ease;
      }
      .topbar:hover {
        filter: brightness(1.2);
      }
      .topbar:focus-visible {
        outline-offset: -3px;
      }
      .topbar b {
        color: var(--bone);
      }

      /* ---------- Nav ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        height: var(--nav-h);
        display: flex;
        align-items: center;
        background: rgba(11, 11, 12, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid transparent;
        transition: background 0.3s ease, border-color 0.3s ease;
      }
      .nav--scrolled {
        background: rgba(11, 11, 12, 0.94);
        border-bottom-color: var(--line);
      }
      .nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 22px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-accent);
        font-weight: 700;
        font-size: 1.32rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        line-height: 1;
        color: var(--bone);
      }
      .brand img {
        height: 38px;
        width: auto;
        flex: none;
      }
      .brand__name {
        color: #d8232e;
        letter-spacing: 0.12em;
        transform: translateY(2px);
        text-shadow: 0 0 10px rgba(216, 35, 46, 0.45),
          0 0 22px rgba(216, 35, 46, 0.2);
      }
      .nav__links {
        display: flex;
        align-items: center;
        gap: 30px;
      }
      .nav__links a:not(.btn) {
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--bone-dim);
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
        position: relative;
      }
      .nav__links a:not(.btn):hover {
        color: var(--bone);
      }
      .nav__links a:not(.btn)::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: var(--grad-red);
        transition: width 0.25s ease;
      }
      .nav__links a:not(.btn):hover::after {
        width: 100%;
      }
      .nav__cta {
        padding: 11px 22px;
        font-size: 0.9rem;
      }
      .nav__toggle {
        display: none;
        background: none;
        border: 0;
        padding: 8px;
        color: var(--bone);
      }
      .nav__toggle svg {
        width: 26px;
        height: 26px;
      }

      /* ---------- Hero ---------- */
      .hero {
        position: relative;
        overflow: hidden;
        background: var(--onyx-900);
        isolation: isolate;
      }
      .hero__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        line-height: 0;
      }
      .hero__art {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 32% center;
        display: block;
      }
      .hero__scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            rgba(8, 8, 9, 0) 38%,
            rgba(8, 8, 9, 0.45) 58%,
            rgba(8, 8, 9, 0.82) 100%
          ),
          radial-gradient(
            70% 100% at 88% 50%,
            rgba(152, 16, 26, 0.16),
            transparent 70%
          );
      }
      .hero > .container {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        min-height: clamp(520px, 54vw, 660px);
        padding-top: 48px;
        padding-bottom: 48px;
      }
      .hero__inner {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
      .hero__copy {
        width: min(540px, 47%);
      }
      .hero h1 {
        font-size: clamp(2rem, 4.7vw, 3.4rem);
        line-height: 1.08;
        margin-bottom: 18px;
      }
      .hero__sub {
        color: var(--bone-dim);
        font-size: clamp(1.02rem, 1.5vw, 1.16rem);
        line-height: 1.62;
        max-width: 46ch;
        margin: 0 0 26px;
      }
      .hero__bullets {
        list-style: none;
        margin: 0 0 30px;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 22px;
      }
      .hero__bullets li {
        position: relative;
        padding-left: 30px;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--bone);
      }
      .hero__bullets li svg {
        position: absolute;
        left: 0;
        top: 1px;
        width: 20px;
        height: 20px;
        color: var(--gold-500);
      }
      .hero__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }
      .hero__assurance {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        color: var(--ash);
        font-size: 0.82rem;
        font-weight: 600;
      }
      .hero__assurance img {
        height: 26px;
        opacity: 0.9;
      }

      /* ---------- Trust pillars ---------- */
      .pillars {
        background: var(--onyx-850);
        border-top: 1px solid var(--hair);
        border-bottom: 1px solid var(--hair);
        padding: 30px 0;
      }
      .pillars__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 18px 44px;
      }
      .pillar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        width: 92px;
      }
      .pillar img {
        height: 50px;
        width: auto;
        filter: grayscale(0.2);
        transition: transform 0.25s ease;
      }
      .pillar:hover img {
        transform: scale(1.08);
      }
      .pillar span {
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--bone-dim);
      }

      /* ---------- Offer ---------- */
      .offer {
        background: radial-gradient(
            90% 60% at 50% 0%,
            rgba(201, 162, 74, 0.1),
            transparent 60%
          ),
          var(--cream);
      }
      .offer__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: stretch;
        margin-top: 66px;
      }
      .pack {
        position: relative;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, var(--onyx-700), var(--onyx-800));
        border: 1px solid rgba(201, 162, 74, 0.35);
        border-radius: var(--radius);
        padding: 30px 24px 26px;
        text-align: center;
        box-shadow: var(--pack-shadow), inset 0 1px 0 rgba(246, 241, 231, 0.06);
        transition: transform 0.3s ease, border-color 0.3s ease,
          box-shadow 0.3s ease;
      }
      .offer__grid .pack:hover {
        transform: translateY(-6px);
        border-color: rgba(201, 162, 74, 0.55);
        box-shadow: var(--pack-shadow-hover),
          inset 0 1px 0 rgba(246, 241, 231, 0.08);
      }
      .pack--featured {
        border: 2px solid var(--gold-500);
        background: linear-gradient(180deg, #1f1a10, var(--onyx-800));
        box-shadow: var(--pack-shadow-hover),
          inset 0 1px 0 rgba(246, 241, 231, 0.08),
          inset 0 0 0 1px rgba(230, 205, 131, 0.22);
      }
      /* Soft pulsing glow to draw attention to the Best Value card */
      .pack--featured::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: calc(var(--radius) + 2px);
        pointer-events: none;
        z-index: -1;
        animation: packPulse 2.8s ease-in-out infinite;
      }
      @keyframes packPulse {
        0%,
        100% {
          box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.2),
            0 0 16px 2px rgba(201, 162, 74, 0.16);
        }
        50% {
          box-shadow: 0 0 0 2px rgba(230, 205, 131, 0.55),
            0 0 36px 9px rgba(201, 162, 74, 0.42);
        }
      }
      .offer__grid .pack--featured:hover {
        transform: translateY(-9px);
        box-shadow: var(--pack-shadow-hover),
          inset 0 1px 0 rgba(246, 241, 231, 0.1);
      }
      /* Make the featured card taller than its siblings — 3-column layout only */
      @media (min-width: 981px) {
        .pack--featured {
          margin-block: -22px;
          padding-top: 50px;
          padding-bottom: 44px;
          z-index: 2;
        }
      }
      .pack__flag {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--grad-gold);
        color: #2a1f06;
        font-weight: 800;
        font-size: 0.82rem;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        padding: 9px 26px;
        border-radius: var(--radius);
        white-space: nowrap;
        overflow: hidden;
        box-shadow: 0 8px 22px -8px rgba(168, 128, 32, 0.65),
          inset 0 1px 0 rgba(255, 255, 255, 0.35);
      }
      /* Subtle gold sheen sweeping across the flag */
      .pack__flag::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 32%,
          rgba(255, 255, 255, 0.55) 50%,
          transparent 68%
        );
        transform: translateX(-120%);
        animation: flagShine 3.8s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes flagShine {
        0%,
        62% {
          transform: translateX(-120%);
        }
        100% {
          transform: translateX(120%);
        }
      }
      .pack__name {
        font-family: var(--font-accent);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-size: 1.05rem;
        color: var(--gold-300);
      }
      .pack__sub {
        color: var(--ash);
        font-size: 0.84rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 4px;
      }
      .pack__bottle {
        height: 188px;
        object-fit: contain;
        margin: 14px auto 22px;
        filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55));
      }
      .pack__price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
        font-family: var(--font-display);
        line-height: 1;
      }
      .pack__price .cur {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--bone);
        align-self: flex-start;
        margin-top: 8px;
      }
      .pack__price .num {
        font-size: 4rem;
        font-weight: 800;
      }
      .pack__price .per {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ash);
        text-align: left;
        line-height: 1.1;
      }
      .pack__save {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 12px 0 4px;
        color: #5ec27e;
        font-weight: 800;
        font-size: 0.88rem;
        letter-spacing: 0.03em;
      }
      .pack__save::before,
      .pack__ship--free::before {
        content: "";
        width: 1.05em;
        height: 1.05em;
        flex: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%235ec27e'/%3E%3Cpath d='M7 12.5l3 3 7-7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          center / contain no-repeat;
      }
      .pack__total {
        font-size: 0.9rem;
        color: var(--bone-dim);
        margin: 20px 0 0;
      }
      .pack__total s {
        color: var(--ash);
      }
      .pack__total b {
        color: var(--bone);
      }
      .pack__ship {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ash);
        margin: 3px 0 18px;
      }
      .pack__ship .free {
        color: #79c08a;
      }
      .pack__ship--off {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-decoration: line-through;
        color: var(--ash);
        opacity: 0.7;
      }
      .pack__ship--off::before {
        content: "";
        width: 1.05em;
        height: 1.05em;
        flex: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2387826f'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")
          center / contain no-repeat;
      }
      .pack__ship--free {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #5ec27e;
        font-weight: 800;
        font-size: 0.88rem;
      }
      /* Free-shipping benefit row shown right below YOU SAVE */
      .pack__feat {
        font-size: 0.88rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 2px 0 0;
      }
      .pack .btn {
        margin-top: 12px;
      }
      /* Move price details (total + shipping) below the CTA and payment icons */
      .pack__total,
      .pack__ship {
        order: 2;
      }
      .pack__ship--after {
        order: 3;
        margin-top: 3px;
      }
      .pack__cards {
        height: 24px;
        width: auto;
        margin: 14px auto 0;
        opacity: 0.7;
        order: 1;
      }
      .offer__note {
        text-align: center;
        color: var(--ash);
        font-size: 0.86rem;
        margin-top: 26px;
      }

      /* ---------- Guarantee ---------- */
      .guarantee {
        background: var(--cream);
      }
      .guarantee__inner {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 44px;
        align-items: center;
      }
      .seal {
        width: 170px;
        height: 170px;
        flex: none;
        filter: drop-shadow(0 12px 30px rgba(168, 128, 32, 0.3));
      }
      .seal text {
        font-family: var(--font-accent);
        fill: var(--gold-300);
      }
      .guarantee h2 {
        font-size: clamp(1.7rem, 3.5vw, 2.5rem);
        margin-bottom: 14px;
        color: var(--ink);
      }
      .guarantee p {
        color: var(--ink-dim);
        max-width: 60ch;
        margin: 0;
      }

      /* ---------- Mechanism / What is ---------- */
      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
      }
      .split__media img {
        border-radius: var(--radius);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        width: 100%;
      }
      .prose p {
        color: var(--bone-dim);
        margin: 0 0 16px;
      }
      .prose p:last-child {
        margin-bottom: 0;
      }
      .prose strong {
        color: var(--bone);
        font-weight: 700;
      }
      .prose .lead-line {
        color: var(--gold-300);
        font-family: var(--font-accent);
        font-weight: 600;
        letter-spacing: 0.04em;
        font-size: 1.05rem;
      }

      .whatis {
        background: var(--cream);
        color: var(--ink);
      }
      .whatis .eyebrow {
        color: var(--gold-700);
      }
      .whatis .prose p {
        color: var(--ink-dim);
      }
      .section--light .prose strong {
        color: var(--ink);
      }
      .whatis .split__media {
        position: relative;
        display: flex;
        justify-content: center;
      }
      .whatis__bottle {
        width: min(330px, 80%);
        filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.25));
      }
      .whoami {
        margin-top: clamp(40px, 6vw, 72px);
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: clamp(24px, 4vw, 50px);
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--cream-2);
        border-radius: var(--radius);
        overflow: hidden;
      }
      .whoami img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 280px;
      }
      .whoami__copy {
        padding: clamp(26px, 4vw, 46px);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .whoami__copy h3 {
        font-size: clamp(1.4rem, 3vw, 2rem);
        margin-bottom: 12px;
        color: var(--ink);
      }
      .whoami__copy p {
        color: var(--ink-dim);
        margin: 0;
      }

      /* ---------- Light sections + section seams ---------- */
      .section--light .eyebrow {
        color: var(--gold-900);
      }
      .section--light .section-title {
        color: var(--ink);
      }
      .section--light .section-lead {
        color: var(--ink-dim);
      }
      .section--light .section-lead strong {
        color: var(--ink);
      }
      .section--light .offer__note {
        color: var(--ink-dim);
      }
      .section--light .btn--ghost {
        color: var(--gold-900);
        border-color: rgba(168, 128, 32, 0.5);
      }

      /* Gold hairline "hinge" at every tonal boundary */
      .section--light,
      .seam-from-light {
        border-top: 1px solid var(--hair);
      }
      /* Soft tonal fold where two sections meet */
      .section--light::before,
      .seam-from-light::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 90px;
        pointer-events: none;
        z-index: 0;
      }
      /* Light section after a dark one -> dark tint folds down */
      .section--light::before {
        background: linear-gradient(180deg, rgba(11, 11, 12, 0.16), transparent);
      }
      /* Dark section after a light one -> light tint folds down */
      .seam-from-light::before {
        background: linear-gradient(180deg, rgba(246, 241, 231, 0.12), transparent);
      }

      /* ---------- Ingredients ---------- */
      .ingredients {
        background: var(--onyx-900);
      }
      .ing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 50px;
      }
      .ing {
        background: linear-gradient(180deg, var(--onyx-700), var(--onyx-850));
        border: 1px solid var(--line-soft);
        border-radius: var(--radius);
        padding: 26px 24px 28px;
        transition: transform 0.3s ease, border-color 0.3s ease;
      }
      .ing-grid .ing:hover {
        transform: translateY(-4px);
        border-color: rgba(201, 162, 74, 0.55);
      }
      .ing__shot {
        position: relative;
        height: 132px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
      }
      .ing__shot img {
        position: relative;
        max-height: 132px;
        width: auto;
        filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.5));
      }
      .ing__name {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.18rem;
        color: var(--bone);
      }
      .ing__latin {
        font-style: italic;
        font-weight: 500;
        color: var(--ash);
        font-size: 0.86rem;
      }
      .ing__epithet {
        font-family: var(--font-accent);
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--gold-500);
        font-size: 0.84rem;
        text-transform: uppercase;
        margin: 8px 0 10px;
        display: block;
      }
      .ing__desc {
        color: var(--bone-dim);
        font-size: 0.94rem;
        margin: 0;
      }
      .ing-footnote {
        margin-top: 30px;
        text-align: center;
        color: var(--ash);
        font-size: 0.82rem;
        max-width: 80ch;
        margin-inline: auto;
      }

      /* ---------- Benefits (Ember-Lit Showcase) ---------- */
      .benefits {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border-top: 1px solid var(--hair);
        background: radial-gradient(
            62% 48% at 16% 6%,
            rgba(201, 162, 74, 0.16),
            transparent 60%
          ),
          var(--onyx-900);
      }
      /* Fine grain for premium texture */
      .benefits::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.06;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }
      .benefits .container {
        position: relative;
        z-index: 1;
      }

      /* Editorial header + lead — asymmetric two-column intro */
      .ben-intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 52px;
        align-items: center;
        margin-bottom: 16px;
      }
      .ben-head {
        max-width: 30ch;
        margin-bottom: 0;
      }
      .ben-lead {
        margin: 0;
        max-width: 46ch;
        padding-left: 24px;
        border-left: 2px solid rgba(201, 162, 74, 0.55);
        color: var(--bone-dim);
        font-size: 1.12rem;
        line-height: 1.72;
      }
      .ben-head .section-title {
        position: relative;
        padding-bottom: 22px;
      }
      .ben-head .section-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 76px;
        height: 2px;
        background: var(--grad-gold);
        border-radius: 2px;
      }

      /* Ledger grid: feature spans full width, rest in 2 columns */
      .ben-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 56px;
        margin-top: 28px;
      }
      .ben--feature {
        grid-column: 1 / -1;
      }

      /* Entry — no box; gold hairline ledger separators */
      .ben {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        padding: 26px 0;
        border-top: 1px solid var(--line);
        background: transparent;
      }
      .ben--feature {
        align-items: center;
        gap: 30px;
        padding: 32px 0 34px;
        border-top: 1px solid var(--hair);
      }

      /* Circular ingredient medallion */
      .ben__media {
        position: relative;
        flex: none;
        width: 66px;
        height: 66px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: radial-gradient(
          circle at 50% 32%,
          rgba(201, 162, 74, 0.22),
          rgba(11, 11, 12, 0.66) 72%
        );
        border: 1px solid var(--line);
        box-shadow: inset 0 1px 0 rgba(246, 241, 231, 0.08),
          0 10px 22px -12px rgba(0, 0, 0, 0.8),
          0 0 0 6px rgba(201, 162, 74, 0.04);
        overflow: hidden;
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
      }
      .ben__ico {
        width: 58%;
        height: 58%;
        display: block;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
      }
      /* Feature: a single larger medallion */
      .ben__media--lg {
        width: 92px;
        height: 92px;
      }

      .ben__body {
        flex: 1;
        min-width: 0;
      }
      .ben__index {
        display: block;
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        color: var(--gold-700);
        margin-bottom: 6px;
      }
      .ben h3 {
        font-size: 1.24rem;
        line-height: 1.18;
        margin-bottom: 8px;
        color: var(--bone);
      }
      .ben--feature h3 {
        font-size: clamp(1.6rem, 3vw, 2.1rem);
        margin-bottom: 10px;
      }
      .ben p {
        color: var(--bone-dim);
        font-size: 0.95rem;
        margin: 0;
        max-width: 50ch;
      }
      .ben--feature p {
        font-size: 1.05rem;
        max-width: 64ch;
      }
      /* Subtle, non-essential hover (content never depends on it) */
      .ben:hover .ben__media {
        border-color: rgba(201, 162, 74, 0.55);
        box-shadow: inset 0 1px 0 rgba(246, 241, 231, 0.1),
          0 12px 26px -12px rgba(0, 0, 0, 0.85),
          0 0 22px -6px rgba(201, 162, 74, 0.3);
      }

      /* Staggered cascade reveal (no interaction needed) */
      .ben-grid .ben {
        transition: opacity 0.6s ease, transform 0.6s ease;
      }
      .ben-grid .ben:nth-child(1) {
        transition-delay: 0s;
      }
      .ben-grid .ben:nth-child(2) {
        transition-delay: 0.07s;
      }
      .ben-grid .ben:nth-child(3) {
        transition-delay: 0.13s;
      }
      .ben-grid .ben:nth-child(4) {
        transition-delay: 0.19s;
      }
      .ben-grid .ben:nth-child(5) {
        transition-delay: 0.25s;
      }
      .ben-grid .ben:nth-child(6) {
        transition-delay: 0.31s;
      }
      .ben-grid .ben:nth-child(7) {
        transition-delay: 0.37s;
      }

      @media (max-width: 820px) {
        .ben-intro {
          grid-template-columns: 1fr;
          gap: 22px;
          align-items: start;
        }
        .ben-lead {
          max-width: 60ch;
        }
      }
      @media (max-width: 680px) {
        .ben-grid {
          grid-template-columns: 1fr;
          column-gap: 0;
        }
      }

      /* ---------- Supplement facts ---------- */
      .facts {
        background: var(--onyx-900);
      }

      /* ---------- Free shipping (benefit strip) ---------- */
      .freeship {
        background: var(--cream);
      }
      .freeship__strip {
        display: flex;
        align-items: center;
        gap: 20px 30px;
        max-width: 940px;
        margin: 0 auto;
        padding: clamp(22px, 3vw, 30px) 4px;
        border-top: 1px solid var(--hair);
        border-bottom: 1px solid var(--hair);
      }
      .freeship__icon {
        flex: none;
        display: grid;
        place-items: center;
        color: var(--crimson-400);
      }
      .freeship__icon svg {
        width: 46px;
        height: 46px;
      }
      .freeship__text {
        flex: 1 1 320px;
      }
      .freeship__title {
        font-size: clamp(1.3rem, 2.6vw, 1.9rem);
        line-height: 1.16;
        color: var(--ink);
      }
      .freeship__title .gold-text {
        color: var(--gold-700);
      }
      .freeship__note {
        margin: 6px 0 0;
        color: var(--ink-dim);
        font-size: 0.98rem;
      }
      .freeship__cta {
        flex: none;
      }

      @media (max-width: 620px) {
        .freeship__strip {
          flex-direction: column;
          text-align: center;
          gap: 16px;
        }
        .freeship__text {
          flex: 0 1 auto;
        }
        .freeship__cta {
          width: 100%;
          max-width: 340px;
        }
      }

      /* ---------- FAQ ---------- */
      .faq {
        background: var(--onyx-850);
        border-top: none;
      }
      /* Benefits -> FAQ seam: thin gold rule that fades at the edges
         (overrides the seam-from-light light fold, which assumed a light
         section above). */
      .faq::before {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(201, 162, 74, 0.65) 50%,
          transparent
        );
      }
      .faq__list {
        max-width: 820px;
        margin: 44px auto 0;
      }
      .faq details {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        margin-bottom: 14px;
        background: var(--onyx-800);
        overflow: hidden;
      }
      .faq summary {
        list-style: none;
        cursor: pointer;
        padding: 20px 56px 20px 24px;
        position: relative;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.04rem;
        color: var(--bone);
      }
      .faq summary::-webkit-details-marker {
        display: none;
      }
      .faq summary::after {
        content: "";
        position: absolute;
        right: 24px;
        top: 50%;
        width: 14px;
        height: 14px;
        margin-top: -7px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0303a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
          center / contain no-repeat;
        transition: transform 0.3s ease;
      }
      .faq details[open] summary::after {
        transform: rotate(135deg);
      }
      .faq__body {
        padding: 0 24px 22px;
        color: var(--bone-dim);
        font-size: 0.96rem;
      }
      .faq__body p {
        margin: 0;
      }

      /* ---------- Final CTA band ---------- */
      .finalcta {
        position: relative;
        overflow: hidden;
        background: radial-gradient(
            80% 120% at 50% 0%,
            rgba(201, 162, 74, 0.16),
            transparent 60%
          ),
          var(--cream);
        text-align: center;
      }
      .finalcta h2 {
        font-size: clamp(2rem, 5vw, 3.4rem);
        max-width: 18ch;
        margin: 0 auto 22px;
        color: var(--ink);
      }
      .finalcta h2 .gold-text {
        color: var(--gold-700);
      }
      /* Scope to the intro paragraph only; avoid bleeding into the pack <p> elements
         (.pack__total/.pack__ship/.pack__sub/.pack__feat) inside .offer__grid. */
      .finalcta > .container > p {
        color: var(--ink-dim);
        max-width: 56ch;
        margin: 0 auto 32px;
      }
      .finalcta > .container > p strong {
        color: var(--ink);
        font-weight: 700;
      }

      /* ---------- Footer ---------- */
      footer {
        background: var(--onyx-900);
        border-top: 1px solid var(--line);
        padding: 56px 0 130px;
        text-align: center;
        overflow-x: hidden;
      }
      footer .container {
        overflow-x: hidden;
      }
      footer .brand {
        justify-content: center;
        margin-bottom: 22px;
      }
      .foot-links {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 26px;
        padding: 0;
        margin: 0 0 26px;
      }
      .foot-links a {
        color: var(--bone-dim);
        font-size: 0.86rem;
        font-weight: 600;
        transition: color 0.2s ease;
      }
      .foot-links a:hover {
        color: var(--gold-300);
      }
      .disclaimer {
        color: var(--ash);
        font-size: 0.78rem;
        max-width: 78ch;
        margin: 0 auto 14px;
        line-height: 1.55;
      }
      #disclaimer-container {
        margin: 0 auto;
        font-size: 0.78rem;
        line-height: 1.55;
        color: var(--ash);
        text-align: center;
      }
      /* The BuyGoods disclaimer is injected at runtime as a fixed-width (~600px)
         <table> with inline styles, so it blows out the mobile viewport. Force it
         fluid — the trio (max-width + min-width + box-sizing, all !important) is
         what makes the injected table finally respect the width. */
      #disclaimer {
        display: block;
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
      }
      #disclaimer * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }
      #disclaimer img {
        height: auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      #disclaimer table,
      #disclaimer tbody,
      #disclaimer tr,
      #disclaimer td,
      #disclaimer div {
        width: 100% !important;
        display: block !important;
      }
      @media (max-width: 767px) {
        #disclaimer td {
          padding: 8px !important;
        }
        #disclaimer img {
          display: block !important;
          margin: 0 auto 8px !important;
        }
      }
      /* Desktop: cap the injected logo so it doesn't stretch to the full
         disclaimer width (mobile keeps its current, good size). */
      @media (min-width: 768px) {
        #disclaimer img {
          max-width: 240px !important;
        }
      }

      /* ---------- Sticky mobile CTA ---------- */
      .mobilecta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(11, 11, 12, 0.96);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--line);
      }
      .mobilecta__price {
        line-height: 1.1;
      }
      .mobilecta__price b {
        display: block;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.05rem;
        color: var(--bone);
      }
      .mobilecta__price span {
        font-size: 0.72rem;
        color: var(--ash);
        font-weight: 600;
      }
      .mobilecta .btn {
        padding: 14px 24px;
        flex: 1;
        max-width: 60%;
      }

      /* ---------- Reveal animation ---------- */
      .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.7s ease, transform 0.7s ease;
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }
      /* Card hover transforms must beat .reveal.in (transform:none); keep hover snappy */
      .offer__grid .pack,
      .ing-grid .ing {
        transition: opacity 0.5s ease, transform 0.3s ease,
          border-color 0.3s ease, box-shadow 0.3s ease;
      }

      /* ============================================================
         RESPONSIVE
         ============================================================ */
      @media (max-width: 980px) {
        .offer__grid,
        .ing-grid {
          grid-template-columns: 1fr 1fr;
        }
        .offer__grid .pack--featured:hover {
          transform: translateY(-4px);
        }
      }

      @media (max-width: 860px) {
        .nav__links {
          position: fixed;
          top: var(--nav-h);
          left: 0;
          right: 0;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          background: rgba(11, 11, 12, 0.98);
          border-bottom: 1px solid var(--line);
          padding: 10px 22px 22px;
          transform: translateY(-130%);
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition: transform 0.35s ease, opacity 0.35s ease,
            visibility 0s linear 0.35s;
          z-index: 99;
        }
        .nav__links.open {
          transform: translateY(0);
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transition: transform 0.35s ease, opacity 0.35s ease,
            visibility 0s;
        }
        .nav__links a:not(.btn) {
          padding: 14px 0;
          border-bottom: 1px solid var(--line-soft);
          font-size: 1rem;
        }
        .nav__links a:not(.btn)::after {
          display: none;
        }
        .nav__cta {
          margin-top: 16px;
          text-align: center;
        }
        .nav__toggle {
          display: inline-flex;
        }

        .hero__bg {
          position: relative;
        }
        .hero > .container {
          position: static;
          min-height: 0;
          padding-top: 34px;
          padding-bottom: 50px;
        }
        .hero__inner {
          justify-content: center;
        }
        .hero__copy {
          width: 100%;
          max-width: 600px;
          margin: 0 auto;
          text-align: center;
        }
        .hero__art {
          height: clamp(300px, 72vw, 440px);
          object-fit: cover;
          object-position: 46% center;
        }
        .hero__scrim {
          background: linear-gradient(
            180deg,
            transparent 40%,
            rgba(8, 8, 9, 0.55) 100%
          );
        }
        .hero__bullets {
          text-align: left;
          max-width: 460px;
          margin-inline: auto;
          margin-bottom: 26px;
        }
        .hero__actions {
          align-items: center;
        }

        .guarantee__inner {
          grid-template-columns: 1fr;
          justify-items: center;
          text-align: center;
          gap: 24px;
        }
        .guarantee p {
          margin-inline: auto;
        }

        .split {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        /* "What Is" (.split--reverse): image after text on mobile */
        .split--reverse .split__media {
          order: 0;
        }
        .whoami {
          grid-template-columns: 1fr;
        }
        /* "Made for Men": text before image on mobile */
        .whoami__copy {
          order: -1;
        }
        .whoami img {
          min-height: 220px;
        }

        .mobilecta {
          display: flex;
        }
      }

      @media (max-width: 560px) {
        body {
          font-size: 16px;
        }
        .offer__grid,
        .ing-grid {
          grid-template-columns: 1fr;
        }
        .hero__bullets {
          grid-template-columns: 1fr;
        }
        .pack--featured {
          order: -1;
        }
        /* Mobile bottle order: 6 (featured) -> 3 -> 1.
           DOM is 1,6,3; featured is already first (order:-1), the 3-bottle
           keeps default order, and the 1-bottle moves last. */
        .offer__grid .pack:nth-child(1) {
          order: 1;
        }
      }

      .whatis .split {
        align-items: center;
      }
      .whatis .split__media img {
        border: none;
        border-radius: 0;
        box-shadow: none;
        width: min(100%, 440px);
      }

      #how .split {
        align-items: stretch;
      }
      #how .split__media {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        min-height: 360px;
      }
      #how .split__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 15%;
        border-radius: 0;
        border: none;
        box-shadow: none;
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
        .pack__flag::after {
          display: none;
        }
      }