:root {
        --cnn-red: #cc0000;
        --cnn-red-dark: #a30000;
        --ink: #0c0c0c;
        --ink-soft: #262626;
        --ink-mid: #404040;
        --ink-faint: #6e6e6e;
        --ink-fainter: #a0a0a0;
        --hair: #d9d9d9;
        --hair-soft: #ececec;
        --bg: #ffffff;
        --sans:
          "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Helvetica, Arial, sans-serif;
        --serif-tight:
          "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, Arial,
          sans-serif;
      }

      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }

      .page {
        background: var(--bg);
        color: var(--ink);
        font-family: var(--sans);
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
      }
      a {
        color: inherit;
        text-decoration: none;
      }

      /* Sticky full-width header (whole bar sticks on desktop + mobile) */
      .site-header {
        position: static;
        z-index: 30;
        width: 100%;
        background: var(--bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      }

      /* ---------- CNN header ---------- */
      .utility {
        border-bottom: 1px solid var(--hair-soft);
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 22px;
        padding: 0 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ink-mid);
      }
      .utility .u-sep {
        width: 1px;
        height: 14px;
        background: var(--hair);
      }

      .masthead {
        display: none;
        align-items: center;
        gap: 18px;
        padding: 12px 24px;
        max-width: 1440px;
        margin: 0 auto;
        width: 100%;
      }
      .menu-btn {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 6px;
        margin: -6px;
        cursor: pointer;
        background: none;
        border: 0;
      }
      .menu-btn span {
        width: 20px;
        height: 2px;
        background: var(--ink);
        display: block;
        transition:
          transform 0.25s ease,
          opacity 0.2s ease;
      }
      .menu-btn.open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      .menu-btn.open span:nth-child(2) {
        opacity: 0;
      }
      .menu-btn.open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      .logo svg {
        display: block;
      }
      .logo-text {
        font-weight: 900;
        font-size: 26px;
        letter-spacing: -0.07em;
        color: var(--cnn-red);
        line-height: 1;
        white-space: nowrap;
        -webkit-text-stroke: 0.6px var(--cnn-red);
      }
      .nav-brand .logo-text {
        font-size: 24px;
        -webkit-text-stroke-width: 0.5px;
      }
      .drawer-head .logo-text {
        font-size: 28px;
      }
      .footer-logo .logo-text {
        color: #fff;
        font-size: 30px;
        -webkit-text-stroke-color: #fff;
      }
      .logo-img {
        height: 22px;
        width: auto;
        display: block;
      }
      .page .site-header .nav-brand .logo-img {
        height: 22px !important;
        width: auto !important;
        max-width: none !important;
      }
      .search-pill {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--hair);
        border-radius: 999px;
        padding: 7px 14px;
        color: var(--ink-faint);
        font-size: 13px;
        min-width: 170px;
      }
      .watch-live {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--cnn-red);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 8px 14px;
        border-radius: 3px;
        white-space: nowrap;
      }
      .watch-live .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
      }

      .section-nav {
        border-top: 1px solid var(--hair-soft);
        border-bottom: 1px solid var(--hair-soft);
        position: relative;
        z-index: 1;
        background: var(--bg);
        display: flex;
        align-items: center;
        width: 100%;
      }
      .scroll-progress {
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 3px;
        width: 100%;
        background: var(--cnn-red);
        transform: scaleX(0);
        transform-origin: left center;
        will-change: transform;
        z-index: 1;
      }
      .nav-brand {
        display: none;
        align-items: center;
        gap: 12px;
        flex: none;
        padding-left: 16px;
      }
      .nav-brand .menu-btn {
        display: flex;
      }
      .nav-brand .logo svg {
        display: block;
      }
      .section-nav ul {
        list-style: none;
        margin: 0 auto;
        padding: 0 32px;
        max-width: 1440px;
        width: 100%;
        display: flex;
        gap: 26px;
        overflow-x: auto;
        height: 48px;
        align-items: center;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-mid);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .section-nav ul::-webkit-scrollbar {
        display: none;
      }
      .section-nav li {
        white-space: nowrap;
        padding: 4px 0;
        border-bottom: 3px solid transparent;
      }
      .section-nav li.active {
        color: var(--ink);
        border-bottom-color: var(--cnn-red);
      }

      /* Mobile menu */
      .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 40;
        visibility: hidden;
      }
      .mobile-menu.open {
        visibility: visible;
      }
      .mobile-menu .scrim {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.25s ease;
      }
      .mobile-menu.open .scrim {
        opacity: 1;
      }
      .mobile-menu .drawer {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 320px;
        background: var(--bg);
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.16);
        overflow-y: auto;
      }
      .mobile-menu.open .drawer {
        transform: translateX(0);
      }
      .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        border-bottom: 1px solid var(--hair-soft);
      }
      .drawer-close {
        background: none;
        border: 0;
        font-size: 26px;
        line-height: 1;
        color: var(--ink);
        cursor: pointer;
        padding: 4px 8px;
      }
      .drawer ul {
        list-style: none;
        margin: 8px 0;
        padding: 0;
      }
      .drawer li {
        padding: 13px 18px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--ink);
        border-bottom: 1px solid var(--hair-soft);
      }
      .drawer li.active {
        color: var(--cnn-red);
      }

      .disclosure {
        background: #fafafa;
        border-bottom: 1px solid var(--hair-soft);
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-faint);
        padding: 9px 20px;
        font-weight: 700;
      }
      .disclosure span {
        color: var(--ink-mid);
      }

      /* ---------- Article grid: left share rail + centered column + lateral sidebar ---------- */
      .l-grid {
        max-width: 1440px;
        margin: 0 auto;
        padding: 24px 32px 60px;
        display: flex;
        justify-content: space-between;
        gap: 40px;
        align-items: flex-start;
      }
      .article-col {
        flex: 1;
        min-width: 0;
        max-width: 880px;
      }
      .sidebar-col {
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 76px;
      }

      .breadcrumb {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink);
        margin-bottom: 14px;
      }
      .rt-dot {
        color: #b1b1b1;
        font-weight: 700;
      }
      .read-time {
        color: #6e6e6e;
        font-weight: 500;
      }
      .breaking {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--cnn-red);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        padding: 4px 9px;
        border-radius: 3px;
        margin-bottom: 12px;
      }
      .breaking-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        animation: breaking-pulse 1.4s ease-in-out infinite;
      }
      @keyframes breaking-pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.25;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .breaking-dot {
          animation: none;
        }
      }
      .kicker {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink-faint);
        margin: 0 0 10px;
      }
      .headline {
        font-family: var(--serif-tight);
        font-size: clamp(34px, 4.2vw, 52px);
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.022em;
        margin: 0 0 18px;
        color: var(--ink);
      }

      .byline {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 6px;
      }
      .byline .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
        display: block;
        border: 1px solid var(--hair-soft);
      }
      .byline .who {
        font-size: 14px;
        color: var(--ink-soft);
        line-height: 1.25;
      }
      .byline .who a,
      .byline .who strong {
        font-weight: 700;
        color: var(--ink);
      }
      .byline .stamp {
        font-size: 13px;
        color: var(--ink-faint);
        margin-top: 0;
        line-height: 1.25;
      }

      .share-inline {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin: -18px 0 8px;
      }
      .share-inline a {
        width: 34px;
        height: 34px;
        border-radius: 7px;
        border: 1px solid var(--hair);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-mid);
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .share-inline a:hover {
        background: #f2f2f2;
        color: var(--ink);
      }

      .rule {
        border: 0;
        border-top: 1px solid var(--hair);
        margin: 18px 0 26px;
      }

      /* Figures — CNN caption + credit */
      figure.fig {
        margin: 26px 0;
      }
      figure.fig img {
        width: 100%;
        height: auto;
        display: block;
      }
      figure.fig.narrow {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
      }
      figcaption {
        font-size: 13px;
        color: var(--ink-faint);
        line-height: 1.45;
        padding-top: 8px;
      }
      figcaption .credit {
        color: var(--ink-fainter);
      }

      /* GIF / image placeholders (for designer) */
      .gif-ph,
      .img-ph {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #f0f0ec;
        border: 2px dashed #c4c4bb;
        border-radius: 4px;
        color: #8a8a7a;
        font-size: 14px;
        font-style: italic;
        letter-spacing: 0.01em;
        padding: 20px;
      }
      .gif-ph-tag,
      .img-ph-tag {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #8a8a7a;
        color: #fff;
        font-style: normal;
        font-weight: 800;
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 3px 7px;
        border-radius: 3px;
      }

      /* Looping video that behaves like a GIF (no controls, no interaction) */
      .gif-video {
        display: block;
        width: 100%;
        height: auto;
        pointer-events: none;
        background: #f0f0ec;
      }

      /* Figure with a red attention bar on the left (matches callouts) */
      figure.fig.quote-img {
        padding: 0;
        font-size: 0;
        line-height: 0;
      }
      figure.fig.quote-img img {
        display: block;
        border-left: 4px solid var(--cnn-red);
      }

      /* Body */
      .body {
        font-size: 18px;
        line-height: 1.62;
        color: var(--ink-soft);
      }
      .body p {
        margin: 0 0 22px;
      }
      .body strong {
        font-weight: 700;
        color: var(--ink);
      }
      .body em {
        font-style: italic;
      }

      /* Red-bullet list */
      .red-list {
        list-style: none;
        margin: 20px 0 22px;
        padding: 0;
      }
      .red-list li {
        position: relative;
        margin: 0 0 12px;
        padding-left: 24px;
        font-size: inherit;
        line-height: 1.6;
        color: var(--ink-soft);
      }
      .red-list li:last-child {
        margin-bottom: 0;
      }
      .red-list li::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 11px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cnn-red);
      }

      /* Numbered factor list (why-veins-leak) */
      .factor-list {
        margin: 20px 0 26px;
      }
      .factor {
        display: flex;
        gap: 16px;
        align-items: baseline;
        padding: 20px 0;
        border-top: 1px solid var(--rule, #e6e4df);
      }
      .factor:first-child {
        border-top: none;
        padding-top: 4px;
      }
      .factor .num {
        flex-shrink: 0;
        min-width: 24px;
        color: var(--cnn-red);
        font-size: 20px;
        font-weight: 900;
      }
      .factor .txt {
        flex: 1;
        min-width: 0;
      }
      .factor h3 {
        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;
        color: var(--ink);
        margin: 0 0 6px;
        letter-spacing: -0.01em;
      }
      .factor p {
        font-size: inherit;
        line-height: 1.6;
        color: var(--body, var(--ink-soft));
        margin: 0;
      }

      h2.sec {
        font-family: var(--serif-tight);
        font-size: clamp(22px, 2.8vw, 27px);
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.22;
        margin: 40px 0 4px;
        color: var(--ink);
      }
      h2.sec + p {
        margin-top: 12px;
      }
      .lead-in {
        font-weight: 700;
        color: var(--ink);
      }

      /* Callout box with left red bar */
      .callout {
        border-left: 4px solid var(--cnn-red);
        background: #f7f7f6;
        padding: 18px 22px;
        margin: 22px 0;
        border-radius: 0 4px 4px 0;
      }
      .callout .callout-title {
        display: block;
        font-weight: 800;
        font-size: 18px;
        color: var(--ink);
        margin-bottom: 6px;
      }
      .callout p {
        margin: 0;
      }
      .callout .gif-ph {
        margin-top: 14px;
      }
      .callout .gif-video {
        margin-top: 14px;
      }

      /* Amazon-style rating (left, just above the product image) */
      .amz-rating {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 14px;
      }
      .amz-score {
        font-size: 14px;
        font-weight: 700;
        color: #0f1111;
      }
      .amz-stars {
        position: relative;
        display: inline-block;
        font-size: 16px;
        line-height: 1;
      }
      .amz-stars-empty {
        color: #d5d9d9;
        letter-spacing: 1px;
      }
      .amz-stars-full {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        white-space: nowrap;
        color: #ffa41c;
        letter-spacing: 1px;
      }
      .amz-count {
        font-size: 14px;
        color: var(--ink);
      }

      /* Pull quote with source logo */
      .pullquote {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 30px 0;
        padding: 20px 24px;
        background: #f6f7f8;
        border-left: 4px solid var(--cnn-red);
      }
      .pullquote .pq-logo {
        flex: 0 0 auto;
        width: 88px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pullquote .pq-logo img {
        max-width: 88px;
        max-height: 66px;
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
      }
      .pullquote .pq-body {
        flex: 1;
        min-width: 0;
      }
      .pullquote blockquote {
        margin: 0;
        font-size: 20px;
        line-height: 1.45;
        font-weight: 400;
        color: #1a1a1a;
      }
      .pullquote cite {
        display: block;
        font-style: normal;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-top: 8px;
      }
      @media (max-width: 560px) {
        .pullquote {
          gap: 14px;
          padding: 16px 16px;
        }
        .pullquote .pq-logo {
          width: 60px;
        }
        .pullquote .pq-logo img {
          max-width: 60px;
          max-height: 54px;
        }
        .pullquote blockquote {
          font-size: 17px;
        }
      }

      /* Fact box */
      .factbox {
        border: 1px solid var(--hair);
        border-top: 3px solid var(--ink);
        padding: 22px 24px;
        margin: 30px 0;
        background: #fbfbfa;
      }
      .factbox .fb-label {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cnn-red);
        margin: 0 0 14px;
      }
      .factbox h4 {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-faint);
        margin: 16px 0 8px;
      }
      .factbox h4:first-of-type {
        margin-top: 0;
      }
      .factbox ul {
        margin: 0;
        padding: 0 0 0 20px;
      }
      .factbox li {
        font-size: 16px;
        line-height: 1.6;
        color: var(--ink-mid);
        margin-bottom: 4px;
      }
      .factbox .fb-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 32px;
      }
      @media (max-width: 520px) {
        .factbox .fb-cols {
          grid-template-columns: 1fr;
        }
      }

      .spec-img {
        width: 100%;
        display: block;
        margin: 0 0 18px;
      } /* used by reader-offer box */

      /* At-a-glance spec card (Linfaflow-style, clean bordered table) */
      .spec-card {
        position: relative;
        background: #fff;
        border: 1px solid var(--hair);
        border-top: none;
        border-radius: 0;
        padding: 32px 26px 28px;
        margin: 32px 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      }
      .spec-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
        height: 4px;
        background: var(--cnn-red);
      }
      .spec-card-header {
        text-align: left;
        margin-bottom: 6px;
      }
      .spec-card-eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--cnn-red);
        margin: 0 0 8px;
      }
      .eyebrow-mark {
        width: 10px;
        height: 10px;
        background: var(--cnn-red);
        display: inline-block;
      }
      .spec-card-title {
        font-size: 28px;
        font-weight: 800;
        color: var(--ink);
        margin: 0 0 6px;
        line-height: 1.18;
      }
      .spec-card-dek {
        font-size: 14px;
        line-height: 1.4;
        color: var(--ink-faint);
        font-weight: 500;
        margin: 0;
      }
      .spec-card-img {
        width: 100%;
        max-width: 195px;
        height: auto;
        display: block;
        margin: 0 auto 20px;
        border-radius: 0;
      }
      /* div/grid layout (no <table> — avoids theme/Elementor table overrides) */
      .spec-list {
        font-size: 15px;
      }
      .spec-list .spec-row {
        display: grid;
        grid-template-columns: 32% 1fr;
        column-gap: 10px;
        padding: 18px 0;
        margin: 0;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        align-items: start;
        background: none;
      }
      .spec-list .spec-row:first-child {
        border-top: 0;
      }
      .spec-list .spec-label {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.8;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .spec-list .spec-value {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-soft);
        font-weight: 500;
      }
      @media (max-width: 480px) {
        .spec-card {
          padding: 28px 20px 24px;
        }
        .spec-list .spec-row {
          grid-template-columns: 32% 1fr;
          column-gap: 10px;
          padding: 14px 0;
        }
        .spec-list .spec-value {
          font-size: 14px;
        }
      }

      /* Glance box offer + CTA (reference box style) */
      .glance-rule {
        height: 1px;
        background: var(--hair-soft);
        margin: 22px 0 18px;
      }
      .glance-anniversary {
        text-align: center;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 700;
        margin: 0 0 14px;
        padding: 0 4px;
      }
      .glance-anniversary b {
        color: var(--ink);
        font-weight: 800;
      }
      .glance-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        background: var(--cnn-red);
        color: #fff;
        text-decoration: none;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 18px 16px;
        border-radius: 0;
        transition:
          background 0.15s ease,
          transform 0.05s ease;
      }
      .glance-cta .arw {
        display: inline-flex;
        align-items: center;
        transition: transform 0.18s ease;
      }
      .glance-cta:link,
      .glance-cta:visited,
      .glance-cta:active,
      .glance-cta:focus {
        color: #fff;
      }
      .glance-cta:hover {
        background: var(--cnn-red-dark);
        color: #fff;
      }
      .glance-cta:hover .arw {
        transform: translateX(4px);
      }
      .glance-cta:active {
        transform: translateY(1px);
      }
      @media (prefers-reduced-motion: reduce) {
        .glance-cta,
        .glance-cta .arw {
          transition: none;
        }
      }
      .cta-standalone {
        margin: 34px 0;
      }

      /* Inline bottle-selector inside the At-a-Glance box (reuses the .qp* quiz styles,
     so it must re-declare the custom props those styles read from .q-overlay). */
      .glance-picker {
        --ink: #0a0a0a;
        --body: #2b2b2b;
        --label: #6b6b6b;
        --rule: #e0e0e0;
        --cnn-red: #cc0000;
        --cnn-red-dark: #a80000;
      }
      .glance-picker .q-choose {
        margin-top: 2px;
      }
      /* wider inline cards make the -8px badge read tighter to the name than in the narrow
     popup — add a little top room so the OFF pill floats off the bottle amount */
      .glance-picker .qp-grid {
        margin-top: 12px;
      }
      .glance-picker .qp {
        padding-top: 16px;
      }

      /* Timeline list */
      .timeline {
        list-style: none;
        margin: 24px 0;
        padding: 0;
      }
      .timeline li {
        padding: 18px 0;
        border-top: 1px solid var(--hair-soft);
      }
      .timeline li:first-child {
        border-top: 0;
      }
      .timeline .wk {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cnn-red);
      }
      .timeline .tt {
        font-weight: 700;
        font-size: 18px;
        color: var(--ink);
        margin: 3px 0 5px;
      }
      .timeline p {
        margin: 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--ink-mid);
      }

      /* Benefits */
      .benefits {
        list-style: none;
        margin: 22px 0;
        padding: 0;
      }
      .benefits li {
        padding: 14px 0;
        border-top: 1px solid var(--hair-soft);
        font-size: 16px;
        line-height: 1.6;
        color: var(--ink-mid);
      }
      .benefits li:first-child {
        border-top: 0;
      }
      .benefits li strong {
        display: block;
        font-size: 18px;
        color: var(--ink);
        margin-bottom: 3px;
      }
      .benefits li strong::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 9px;
        background: var(--cnn-red);
        vertical-align: baseline;
      }

      /* Reader offer */
      .offer {
        border: 1px solid var(--hair);
        border-radius: 4px;
        padding: 24px;
        margin: 34px 0;
      }
      .offer .fb-label {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cnn-red);
        margin: 0 0 14px;
        text-align: center;
      }
      .offer-row {
        display: flex;
        gap: 14px;
        justify-content: center;
        align-items: flex-end;
        margin: 0 0 18px;
      }
      .offer-row a {
        text-align: center;
        flex: 1;
        max-width: 150px;
      }
      .offer-row img {
        width: 100%;
        height: auto;
        display: block;
      }
      .offer-opt {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--ink-mid);
      }
      .offer-opt b {
        display: block;
        color: var(--ink);
        font-size: 15px;
      }
      .offer-opt .was {
        color: var(--ink-faint);
        text-decoration: line-through;
        margin-right: 5px;
      }
      .cta-wrap {
        text-align: center;
        margin-top: 6px;
      }
      .cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--cnn-red);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 14px 30px;
        border-radius: 3px;
        transition: background 0.2s ease;
      }
      .cta-btn:hover {
        background: var(--cnn-red-dark);
      }
      .offer-fine {
        text-align: center;
        font-size: 13px;
        color: var(--ink-faint);
        margin: 14px 0 0;
      }
      @media (max-width: 480px) {
        .offer-row {
          flex-wrap: wrap;
        }
      }

      /* Reader testimonials — editorial voices */
      .voices {
        margin: 44px 0 0;
      }
      .v-kicker {
        color: var(--cnn-red);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        margin: 0 0 3px;
      }
      .voices h2.sec {
        font-size: clamp(22px, 2.8vw, 27px);
        font-weight: 700;
        color: var(--ink);
        line-height: 1.22;
        letter-spacing: -0.01em;
        margin: 0 0 12px;
      }
      .voices .v-intro {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.62;
        color: var(--ink-soft);
        margin: 0 0 22px;
      }
      .tcard {
        position: relative;
        margin: 0 0 14px;
        background: #f7f7f6;
        padding: 18px 22px 16px;
        border-radius: 0 4px 4px 0;
      }
      .tcard::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: var(--cnn-red);
      }
      .tstars {
        color: #f5a623;
        font-size: 14px;
        letter-spacing: 1.5px;
        margin: 0 0 11px;
      }
      .tstars .off {
        color: #d8d5cf;
      }
      .tcard blockquote {
        margin: 0 0 14px;
        font-size: 16.5px;
        line-height: 1.62;
        color: var(--ink-soft);
        font-weight: 400;
      }
      .tcard .t-photo {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0;
        margin: 0 0 14px;
      }
      .tcard figcaption {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }
      .tcard .t-avatar {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
        display: block;
        background: #e3e3e3;
      }
      .tcard .t-meta {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }
      .tname {
        font-size: 14px;
        font-weight: 800;
        color: #0a0a0a;
        line-height: 1.25;
      }
      .tmeta {
        font-size: 13px;
        font-weight: 400;
        color: #6b6b6b;
        line-height: 1.25;
      }
      .tverified {
        font-size: 12px;
        color: #1a7f47;
        font-weight: 700;
        margin-top: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      /* Comments — CNN editorial style */
      .comments {
        margin-top: 46px;
        padding-top: 26px;
        border-top: 3px solid var(--ink);
      }
      .comments-head {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 22px;
      }
      .comments-head h2 {
        font-size: 22px;
        font-weight: 800;
        color: var(--ink);
        margin: 0;
        letter-spacing: -0.01em;
      }
      .comments-count {
        font-size: 14px;
        font-weight: 700;
        color: var(--ink-faint);
      }
      .comment-composer {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
      }
      .composer-av {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e3e3e3;
        flex: none;
      }
      .comment-composer input {
        flex: 1;
        border: 1px solid var(--hair);
        border-radius: 999px;
        padding: 11px 18px;
        font-family: inherit;
        font-size: 14px;
        color: var(--ink);
        background: #fff;
      }
      .comment-composer input:focus {
        outline: none;
        border-color: var(--ink-faint);
      }
      .comment {
        display: flex;
        gap: 12px;
        padding: 16px 0;
        border-top: 1px solid var(--hair-soft);
      }
      .comment.reply {
        margin-left: 52px;
      }
      .comment-av {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
        display: block;
      }
      .comment-main {
        flex: 1;
        min-width: 0;
      }
      .comment-name {
        font-weight: 700;
        font-size: 14px;
        color: var(--ink);
      }
      .comment-text {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin: 3px 0 8px;
      }
      .comment-photo {
        display: block;
        max-width: 220px;
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--hair-soft);
        margin: 0 0 8px;
      }
      .comment-meta {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-faint);
      }
      .comment-meta .c-link:hover {
        color: var(--ink);
      }
      .comment-meta .c-likes {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--ink-mid);
      }
      .comment-meta .c-likes svg {
        color: var(--cnn-red);
      }
      .comment-meta .c-time {
        font-weight: 400;
        color: var(--ink-fainter);
      }
      @media (max-width: 480px) {
        .comment.reply {
          margin-left: 26px;
        }
        .comment-photo {
          max-width: 180px;
        }
      }

      /* Footer */
      .footer {
        background: #0d0d0d;
        color: #b8b8b8;
        padding: 46px 20px;
        margin-top: 34px;
      }
      .footer-inner {
        max-width: 1120px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        text-align: center;
      }
      .footer-logo svg {
        width: 66px;
        height: auto;
        display: block;
      }
      .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 22px;
        max-width: 720px;
      }
      .footer-nav a {
        color: #e6e6e6;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .footer-nav a:hover {
        color: #fff;
      }
      .footer-legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
      }
      .footer-legal a {
        color: #9a9a9a;
        font-size: 12px;
      }
      .footer-legal a:hover {
        color: #d5d5d5;
        text-decoration: underline;
      }
      .footer-copyright {
        font-size: 12px;
        color: #7a7a7a;
      }
      .footer-disclaimer {
        font-size: 11px;
        color: #6f6f6f;
        line-height: 1.6;
        max-width: 780px;
        margin: 4px auto 0;
        border-top: 1px solid #222;
        padding-top: 18px;
      }

      /* ===== Elementor / theme hardening — force layout regardless of host CSS ===== */
      /* Fonts: Inter everywhere, Inter Tight on the headline (beats theme/Elementor global fonts) */
      .page,
      .page * {
        font-family: var(--sans) !important;
      }
      .page .headline,
      .page h2.sec {
        font-family: var(--serif-tight) !important;
      }
      .page .logo-text {
        font-family: var(--serif-tight) !important;
      }
      /* Sticky full-width header — force it regardless of theme/Elementor */
      .page .site-header {
        position: static !important;
        top: auto !important;
        z-index: 30 !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        line-height: normal !important;
        font-size: 0 !important;
      }
      .page .site-header .section-nav {
        flex: none !important;
        min-height: 0 !important;
      }
      .page .site-header .section-nav {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
      }
      .page .site-header .masthead,
      .page .site-header .section-nav ul {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
      }
      /* Header interior — force MY layout/styling over the theme's header/nav/ul/li/svg CSS */
      .page .site-header .masthead {
        display: none !important;
      }
      .page .site-header .menu-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 4px !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px !important;
        margin: -6px !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
      }
      .page .site-header .menu-btn span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--ink) !important;
        border: 0 !important;
        border-radius: 0 !important;
      }
      .page .site-header .logo {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
      }
      .page .site-header .logo svg {
        display: block !important;
        max-width: none !important;
      }
      .page .site-header .masthead > .logo svg {
        width: 58px !important;
        height: 28px !important;
      }
      .page .site-header .nav-brand .logo svg {
        width: 46px !important;
        height: 22px !important;
      }
      .page .site-header a {
        color: inherit !important;
        text-decoration: none !important;
        box-shadow: none !important;
      }
      .page .site-header .search-pill {
        display: flex !important;
        flex: none !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 0 auto !important;
        min-width: 170px !important;
        padding: 7px 14px !important;
        border: 1px solid var(--hair) !important;
        border-radius: 999px !important;
        background: none !important;
        color: var(--ink-faint) !important;
        font-size: 13px !important;
      }
      .page .site-header .search-pill svg {
        width: 15px !important;
        height: 15px !important;
        flex: none !important;
      }
      .page .site-header .watch-live {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        background: var(--cnn-red) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 3px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
      }
      .page .site-header .watch-live .dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #fff !important;
      }
      .page .site-header .section-nav {
        display: flex !important;
        align-items: center !important;
        border-top: 1px solid var(--hair-soft) !important;
        border-bottom: 1px solid var(--hair-soft) !important;
        background: var(--bg) !important;
      }
      .page .site-header .section-nav ul {
        display: flex !important;
        list-style: none !important;
        padding: 0 24px !important;
        gap: 22px !important;
        height: 44px !important;
        align-items: center !important;
        overflow-x: auto !important;
      }
      .page .site-header .section-nav li {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 3px 0 !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        background: none !important;
        color: var(--ink-mid) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
      }
      .page .site-header .section-nav li::marker,
      .page .site-header .section-nav li::before {
        content: "" !important;
        display: none !important;
      }
      .page .site-header .section-nav li.active {
        color: var(--ink) !important;
        border-bottom-color: var(--cnn-red) !important;
      }
      .page .site-header .nav-brand {
        display: none !important;
      }
      @media (max-width: 768px) {
        .page .site-header .masthead {
          display: none !important;
        }
        .page .site-header .nav-brand {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          gap: 12px !important;
          padding-left: 16px !important;
        }
        .page .site-header .section-nav {
          height: 52px !important;
        }
        .page .site-header .section-nav ul {
          display: none !important;
        }
      }
      /* Testimonials: theme resets figure margins → cards glue together */
      .voices .tcard {
        position: relative !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 0 16px !important;
        border: 0 !important;
      }
      .voices .tcard::before {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 4px !important;
        background: var(--cnn-red) !important;
      }
      .voices .tcard:last-child {
        margin-bottom: 0 !important;
      }
      .voices .tcard blockquote {
        margin: 0 0 14px !important;
        padding: 0 !important;
        border: 0 !important;
        quotes: none !important;
      }
      .voices .tcard .t-photo {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 14px !important;
        border-radius: 0 !important;
      }
      .voices .tcard figcaption {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
      }
      .voices .tcard .t-avatar {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        max-width: none !important;
      }
      .voices .tcard .t-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
      }

      /* Standalone testimonial cards (outside .voices — e.g. after the trial timeline) */
      .article-col .tcard {
        position: relative !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 0 14px !important;
        padding: 18px 22px 16px !important;
        background: #f7f7f6 !important;
        border: 0 !important;
        border-radius: 0 4px 4px 0 !important;
      }
      .article-col .tcard::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 4px !important;
        background: var(--cnn-red) !important;
      }
      .article-col .tcard blockquote {
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        quotes: none !important;
        font-style: normal !important;
        font-size: 16.5px !important;
        line-height: 1.62 !important;
        color: var(--ink-soft) !important;
        font-weight: 400 !important;
      }
      .article-col .tcard figcaption {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-style: normal !important;
      }
      .article-col .tcard .t-avatar {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        max-width: none !important;
        background: #e3e3e3 !important;
      }
      .article-col .tcard .t-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .article-col .tcard .tname {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0a0a0a !important;
        line-height: 1.25 !important;
      }
      .article-col .tcard .tmeta {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #6b6b6b !important;
        line-height: 1.25 !important;
      }

      /* Comments: WP/Elementor style .comment & .comment-meta natively → reset ours */
      .comments .comment {
        display: flex !important;
        float: none !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 16px 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--hair-soft) !important;
        background: none !important;
        list-style: none !important;
      }
      .comments .comment.reply {
        margin-left: 52px !important;
      }
      .comments .comment-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .comments .comment-av {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        max-width: none !important;
      }
      .comments .comment-photo {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;
        margin: 8px 0 !important;
        border-radius: 10px !important;
        border: 1px solid var(--hair-soft) !important;
      }
      .comments .comment-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
      }
      .comments .comment-name {
        margin: 0 !important;
      }
      .comments .comment-text {
        margin: 3px 0 8px !important;
      }
      @media (max-width: 480px) {
        .comments .comment.reply {
          margin-left: 26px !important;
        }
        .comments .comment-photo {
          max-width: 180px !important;
        }
      }

      /* Figures & captions: theme italicizes figcaption and resets figure/paragraph margins */
      .article-col figure.fig {
        display: block !important;
        float: none !important;
        margin: 26px 0 !important;
      }
      .article-col figure.fig.quote-img {
        border: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
      }
      .article-col figure.fig.quote-img img {
        display: block !important;
        border-left: 4px solid var(--cnn-red) !important;
      }
      .article-col figure.fig figcaption {
        font-style: normal !important;
        font-weight: 400 !important;
        margin: 0 !important;
        padding-top: 8px !important;
      }
      .article-col .voices .tcard figcaption {
        font-style: normal !important;
      }
      .article-col .body p {
        margin: 0 0 22px !important;
        font-style: normal !important;
      }
      .article-col .body h2.sec {
        margin: 40px 0 4px !important;
      }
      .article-col .body h2.sec + p {
        margin-top: 12px !important;
      }
      /* Red-bullet list — beat theme list resets */
      .article-col .red-list {
        list-style: none !important;
        margin: 20px 0 22px !important;
        padding: 0 !important;
      }
      .article-col .red-list li {
        display: block !important;
        position: relative !important;
        margin: 0 0 12px !important;
        padding-left: 24px !important;
        border: 0 !important;
        background: none !important;
        list-style: none !important;
        font-style: normal !important;
      }
      .article-col .red-list li::marker {
        content: "" !important;
      }
      .article-col .red-list li::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 3px !important;
        top: 11px !important;
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        background: var(--cnn-red) !important;
      }
      /* Numbered factor list — beat .body p / theme h3 margin & border resets */
      .article-col .factor-list {
        margin: 20px 0 26px !important;
      }
      .article-col .factor {
        display: flex !important;
        float: none !important;
        gap: 16px !important;
        align-items: baseline !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--rule, #e6e4df) !important;
        background: none !important;
      }
      .article-col .factor:first-child {
        border-top: 0 !important;
        padding-top: 4px !important;
      }
      .article-col .factor .num {
        flex-shrink: 0 !important;
        min-width: 24px !important;
        margin: 0 !important;
        color: var(--cnn-red) !important;
        font-size: 20px !important;
        font-weight: 900 !important;
      }
      .article-col .factor .txt {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .article-col .factor h3 {
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
        color: var(--ink) !important;
        font-style: normal !important;
      }
      .article-col .factor p {
        margin: 0 !important;
        font-size: inherit !important;
        line-height: 1.6 !important;
        color: var(--ink-soft) !important;
        font-style: normal !important;
      }
      /* At-a-Glance product image — force size/centering over theme img rules */
      .article-col .spec-card .spec-card-img {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 195px !important;
        height: auto !important;
        margin: 0 auto 20px !important;
        border-radius: 0 !important;
      }
      /* Benefits titles — red square marker (matches "At a Glance" eyebrow-mark) */
      .article-col .benefits li strong {
        display: block !important;
      }
      .article-col .benefits li strong::before {
        content: "" !important;
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        margin-right: 9px !important;
        background: var(--cnn-red) !important;
        vertical-align: baseline !important;
        border-radius: 0 !important;
      }
      /* testimonials kicker hugs its heading (override the generic body p / h2 margins above) */
      .article-col .voices .v-kicker {
        margin: 0 0 3px !important;
      }
      .article-col .voices h2.sec {
        margin: 0 0 12px !important;
      }
      .article-col .voices .v-intro {
        margin: 0 0 22px !important;
      }

      @media (max-width: 768px) {
        .masthead {
          display: none;
        }
        .site-header {
          box-shadow: none;
        }
        .nav-brand {
          display: flex;
          padding-left: 16px;
        }
        .section-nav {
          height: 52px;
        }
        .section-nav ul {
          display: none;
        }
        .l-grid {
          padding: 18px 18px 46px;
        }
        .body {
          font-size: 17px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .menu-btn span,
        .mobile-menu .scrim,
        .mobile-menu .drawer {
          transition: none;
        }
      }

      /* ============ QUALIFICATION QUIZ MODAL (opens on CTA click) ============ */
      .q-overlay {
        --ink: #0a0a0a;
        --body: #2b2b2b;
        --label: #6b6b6b;
        --rule: #e0e0e0;
        --gold: #f5a623;
        --cnn-red: #cc0000;
        --cnn-red-dark: #a80000;
        font-family:
          "Inter",
          -apple-system,
          BlinkMacSystemFont,
          "Helvetica Neue",
          Arial,
          sans-serif;
        color: var(--body);
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(15, 15, 15, 0.55);
        -webkit-backdrop-filter: saturate(120%) blur(2px);
        backdrop-filter: saturate(120%) blur(2px);
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 24px 14px;
        overflow-y: auto;
      }
      .q-overlay.open {
        display: flex;
      }
      .q-modal {
        width: 100%;
        max-width: 460px;
        background: #fff;
        border-radius: 4px;
        border-top: 4px solid var(--cnn-red);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        position: relative;
        margin: auto;
        animation: qpop 0.22s ease;
      }
      @keyframes qpop {
        from {
          opacity: 0;
          transform: translateY(10px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .q-modal.qr {
        max-width: 620px;
        background: transparent;
        box-shadow: none;
        border-top: 0;
        border-radius: 0;
        overflow: visible;
      }
      .q-top {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px 0;
      }
      .q-progress {
        flex: 1;
        height: 5px;
        background: #eee;
        border-radius: 99px;
        overflow: hidden;
      }
      .q-progress i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--cnn-red);
        transition: width 0.3s ease;
      }
      .q-close {
        display: none;
        background: none;
        border: none;
        font-size: 22px;
        line-height: 1;
        color: #999;
        cursor: pointer;
        padding: 2px 4px;
        margin: -4px -4px 0 0;
        font-family: inherit;
      }
      .q-close:hover {
        color: #333;
      }
      .q-step {
        padding: 20px 22px 26px;
      }
      .q-kicker {
        color: var(--cnn-red);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        margin: 0 0 10px;
      }
      .q-introtitle {
        font-size: 24px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.015em;
        color: var(--cnn-red);
        margin: 0 0 12px;
      }
      .q-lead {
        font-size: 16px;
        line-height: 1.55;
        color: var(--body);
        font-weight: 500;
        margin: 0 0 22px;
      }
      .q-question {
        font-size: 20px;
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 0 0 18px;
        text-wrap: balance;
      }
      .q-opts {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .q-opt {
        text-align: left;
        width: 100%;
        background: #fff;
        border: 1.5px solid #e2e2e2;
        border-radius: 4px;
        padding: 16px;
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        cursor: pointer;
        font-family: inherit;
        transition:
          border-color 0.12s ease,
          background 0.12s ease,
          transform 0.05s ease;
      }
      .q-opt:hover {
        border-color: var(--cnn-red);
        background: #fff7f6;
      }
      .q-opt:active {
        transform: scale(0.99);
      }
      /* Lock option text color — never let a host theme flip it to white on hover/focus/active */
      .q-overlay .q-opt,
      .q-overlay .q-opt:hover,
      .q-overlay .q-opt:focus,
      .q-overlay .q-opt:active,
      .q-overlay .q-opt.sel {
        color: var(--ink) !important;
        -webkit-text-fill-color: var(--ink) !important;
      }
      .q-overlay .q-opt:focus {
        background: #fff7f6;
      }
      /* While the modal is "armed" (just rendered a step), cancel hover visuals so the
     option/card sitting under a stationary cursor doesn't look pre-hovered. Removed
     on the first real mouse move. */
      .q-overlay.nohover .q-opt:hover:not(.sel) {
        border-color: #e2e2e2 !important;
        background: #fff !important;
      }
      .q-overlay.nohover .qp:hover:not(.sel) {
        border-color: #e2e2e2 !important;
      }
      .q-back {
        background: none;
        border: none;
        color: #888;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 16px;
        padding: 4px 0;
        font-family: inherit;
      }
      .q-back:hover {
        color: #333;
      }
      .q-brand {
        color: var(--cnn-red);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.01em;
        margin: 0 0 10px;
      }
      .q-hint {
        font-size: 12.5px;
        color: var(--label);
        font-weight: 600;
        margin: -8px 0 14px;
      }
      .q-opt.sel {
        border-color: var(--cnn-red);
        background: #fff2f0;
      }
      .q-check {
        padding-left: 46px;
        position: relative;
      }
      .q-check::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border: 1.5px solid #cfcfcf;
        border-radius: 4px;
        background: #fff;
      }
      .q-check.sel::before {
        background: var(--cnn-red);
        border-color: var(--cnn-red);
      }
      .q-check.sel::after {
        content: "\2713";
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
      }
      /* keep the check mark white (the option-text color lock above must not tint it) */
      .q-overlay .q-check.sel::after {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }
      .q-continue {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        background: var(--cnn-red);
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 16px;
        margin-top: 16px;
        transition:
          background 0.15s ease,
          transform 0.05s ease;
      }
      .q-continue .arw {
        display: inline-block;
        transition: transform 0.18s ease;
        font-weight: 400;
      }
      .q-continue:hover {
        background: var(--cnn-red-dark);
      }
      .q-continue:hover .arw {
        transform: translateX(4px);
      }
      .q-continue:active {
        transform: translateY(1px);
      }
      .q-load {
        padding: 52px 24px 60px;
        text-align: center;
      }
      .q-spinner {
        width: 44px;
        height: 44px;
        margin: 0 auto 20px;
        border-radius: 50%;
        border: 4px solid #eee;
        border-top-color: var(--cnn-red);
        animation: qspin 0.8s linear infinite;
      }
      @keyframes qspin {
        to {
          transform: rotate(360deg);
        }
      }
      .q-load p {
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        margin: 0;
      }
      .q-load small {
        display: block;
        color: var(--label);
        font-weight: 500;
        margin-top: 6px;
        font-size: 13.5px;
      }
      .q-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #eafaf0;
        color: #1a7f47;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 7px 12px;
        border-radius: 99px;
        margin: 0 0 14px;
      }
      .q-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22a35a;
      }
      .q-result-h {
        font-size: 25px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 0 0 10px;
      }
      .q-result-p {
        font-size: 15px;
        line-height: 1.55;
        color: var(--body);
        margin: 0 0 20px;
      }
      .q-result-p b {
        color: var(--ink);
      }
      .q-result-p .rx {
        color: var(--cnn-red);
        font-weight: 800;
      }
      .q-choose {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--label);
        margin: 0 0 12px;
      }
      .qp-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0 0 16px;
      }
      /* horizontal row layout for the stacked supply boxes */
      .qp.qp-row {
        display: flex;
        align-items: center;
        gap: 13px;
        text-align: left;
        padding: 12px 14px;
      }
      .qp-row .qp-radio {
        width: 20px;
        height: 20px;
        flex: none;
        border-radius: 50%;
        border: 2px solid #cfcfcf;
        position: relative;
        transition: border-color 0.12s ease;
      }
      .qp.qp-row.sel .qp-radio {
        border-color: var(--cnn-red);
      }
      .qp.qp-row.sel .qp-radio::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--cnn-red);
      }
      .qp-row .qp-img {
        width: 74px;
        height: 74px;
        aspect-ratio: auto;
        flex: none;
        margin: 0 0 0 -10px;
      }
      .qp-row .qp-info {
        min-width: 0;
        margin-left: -15px;
      }
      .qp-row .qp-name {
        font-size: 15px;
        font-weight: 600;
      }
      .qp-row .qp-priceblock {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        text-align: right;
      }
      .qp-row .qp-price {
        display: inline-flex;
        align-items: baseline;
        font-size: 22px;
        line-height: 1;
        white-space: nowrap;
      }
      .qp-row .qp-cur {
        font-size: 50%;
        font-weight: 400;
        line-height: 1;
        margin-right: 1px;
        transform: translateY(-0.6em);
      }
      .qp-row .qp-num {
        font-weight: 600;
        line-height: 1;
      }
      .qp-row .qp-suffix {
        font-weight: 400;
        font-size: 11px;
        line-height: 1;
        align-self: baseline;
        margin-left: 1px;
      }
      .qp-row .qp-free {
        font-size: 11px;
        min-height: 0;
        white-space: nowrap;
      }
      .qp-row .qp-free.qp-ship {
        color: var(--label);
        font-weight: 600;
      }
      .qp-row .qp-badge {
        position: static;
        transform: none;
        margin: 0;
        font-size: 11px;
        padding: 4px 9px;
      }
      .q-expires {
        text-align: center;
        font-size: 13px;
        color: var(--label);
        margin: 11px 0 0;
      }
      .q-expires b {
        color: var(--ink);
        font-weight: 700;
      }
      .qp {
        position: relative;
        border: 1.5px solid #e2e2e2;
        border-radius: 6px;
        padding: 12px 8px;
        cursor: pointer;
        text-align: center;
        background: #fff;
        font-family: inherit;
        transition:
          border-color 0.12s ease,
          background 0.12s ease,
          box-shadow 0.12s ease;
      }
      .qp:hover {
        border-color: var(--cnn-red);
      }
      .qp.sel {
        border-color: var(--cnn-red);
        border-width: 2px;
        background: #fff5f4;
        box-shadow: 0 4px 14px rgba(204, 0, 0, 0.08);
      }
      .qp-badge {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        background: var(--cnn-red);
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 99px;
      }
      .qp-name {
        font-size: 12.5px;
        font-weight: 800;
        color: var(--ink);
        line-height: 1.15;
      }
      .qp-free {
        font-size: 9px;
        font-weight: 600;
        color: #1a7f47;
        line-height: 1.2;
        min-height: 11px;
        margin-top: 1px;
      }
      .qp-img {
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 4px;
        margin: 2px 0 6px;
        overflow: hidden;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .qp-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }
      .qp-price {
        font-size: 18px;
        font-weight: 800;
        color: var(--ink);
        margin-top: 2px;
        line-height: 1;
      }
      .qp-suffix {
        font-size: 10px;
        font-weight: 600;
        color: var(--label);
      }
      .qp-compare {
        font-size: 11px;
        color: var(--label);
        margin-top: 3px;
      }
      .qp-compare s {
        color: #b3b0ab;
        margin-right: 3px;
      }
      .qp-rec {
        text-align: center;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--body);
        background: #fff5f4;
        border: 1px solid #f3d9d6;
        border-radius: 4px;
        padding: 9px 12px;
        margin: 0 0 14px;
      }
      .qp-rec b {
        color: var(--cnn-red);
        font-weight: 800;
      }
      .qp-delivery {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        font-size: 13.5px;
        line-height: 1.4;
        color: var(--body);
        background: #f6f6f5;
        border-radius: 6px;
        padding: 12px;
        margin: 0 0 16px;
      }
      .qp-delivery b {
        color: var(--ink);
        font-weight: 700;
      }
      .qp-delivery svg {
        flex-shrink: 0;
        color: var(--ink);
      }
      .q-final-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        background: var(--cnn-red);
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 19px 16px;
        border-radius: 2px;
        border: none;
        cursor: pointer;
        font-family: inherit;
        transition:
          background 0.15s ease,
          transform 0.05s ease;
      }
      .q-final-cta .arw {
        display: inline-block;
        transition: transform 0.18s ease;
        font-weight: 400;
      }
      .q-final-cta:hover {
        background: var(--cnn-red-dark);
      }
      .q-final-cta:hover .arw {
        transform: translateX(4px);
      }
      .q-final-cta:active {
        transform: translateY(1px);
      }
      .q-guarantee {
        display: flex;
        gap: 11px;
        align-items: flex-start;
        text-align: left;
        font-size: 13px;
        line-height: 1.5;
        color: var(--body);
        background: #f7f7f6;
        border: 1px solid #ececea;
        border-radius: 6px;
        padding: 14px;
        margin: 14px 0 0;
      }
      .q-guarantee b {
        color: var(--ink);
        font-weight: 800;
      }
      .q-guarantee svg {
        flex-shrink: 0;
        margin-top: 1px;
        color: #1a7f47;
      }
      .qp-terms {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        font-size: 12.5px;
        color: var(--label);
        margin: 14px 0 0;
      }
      .qp-terms span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .qp-terms svg {
        color: var(--label);
      }
      @media (prefers-reduced-motion: reduce) {
        .q-modal,
        .q-spinner {
          animation: none;
        }
        .q-progress i,
        .q-opt,
        .qp,
        .q-final-cta .arw {
          transition: none;
        }
      }

      /* =========================================================================
         TABOOLA STYLE LATERAL SIDEBAR & SPONSORED WIDGET (COMPACT)
         ========================================================================= */
      .taboola-widget {
        background: #ffffff;
        border: 1px solid #e5ece8;
        border-radius: 10px;
        padding: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
      }
      .taboola-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        border-bottom: 1px solid #edf2ef;
        margin-bottom: 10px;
      }
      .taboola-title {
        font-size: 11.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #222;
      }
      .taboola-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 9.5px;
        color: #0b6840;
        font-weight: 600;
        background: #eef8f3;
        padding: 2px 6px;
        border-radius: 3px;
      }
      .taboola-feed {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .taboola-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #edf2ef;
        background: #fafcfb;
        transition: all 0.2s ease;
      }
      .taboola-card:hover {
        transform: translateY(-2px);
        border-color: #199b62;
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
      }
      .taboola-thumb {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        max-height: 125px;
        overflow: hidden;
        background: #e8eee9;
      }
      .taboola-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        display: block;
      }
      .taboola-card:hover .taboola-thumb img {
        transform: scale(1.04);
      }
      .taboola-pill {
        position: absolute;
        top: 6px;
        left: 6px;
        background: #085431;
        color: #fff;
        font-size: 8.5px;
        font-weight: 800;
        padding: 1.5px 5px;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }
      .taboola-content {
        padding: 7px 9px 8px;
      }
      .taboola-headline {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        color: #1a1a1a;
        margin-bottom: 4px;
      }
      .taboola-card:hover .taboola-headline {
        color: #085431;
      }
      .taboola-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 10px;
        color: #777;
      }
      .taboola-sponsored {
        color: #0d8253;
        font-weight: 600;
      }
      .taboola-cta-box {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #edf2ef;
        text-align: center;
      }
      .taboola-cta-text {
        font-size: 10.5px;
        color: #444;
        margin-bottom: 7px;
        line-height: 1.35;
      }
      .taboola-cta-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        background: #199b62;
        color: #fff;
        text-decoration: none;
        font-size: 11.5px;
        font-weight: 700;
        padding: 7px 10px;
        border-radius: 6px;
        transition: background 0.2s ease;
      }
      .taboola-cta-button:hover {
        background: #147e4f;
      }

      @media (max-width: 1040px) {
        .l-grid {
          flex-direction: column;
          max-width: 730px;
          align-items: center;
        }
        .sidebar-col {
          width: 100%;
          position: static;
          margin-top: 30px;
        }
        .taboola-feed {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: 14px;
        }
      }

      .footer-meta-disclaimer {
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.12);
        font-size: 11px;
        line-height: 1.6;
        color: #999;
        text-align: center;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
      }