/* ==========================================================================
   EverWell Report — brand theme (BloodPril / blood pressure)
   Loaded after styles.css / styles2.css / vendor-bootstrap.css: overrides the
   teal palette baked into the structural sheets and adds the components this
   layout needs (ad label, headline, article body, evidence cards, safety box,
   CTAs, offer reveal). Does not touch layout/spacing rules that already work
   (header grid, .sh-card grid).
   ========================================================================== */

:root {
  --ew-primary: #143a63;
  --ew-primary-light: #1f5f9e;
  --ew-accent: #e04b3c;
  --ew-accent-deep: #b3271b;
  --ew-gold: #ffb020;
  --ew-ink: #14202c;
  --ew-muted: #5c6b7a;
  --ew-bg-soft: #f3f7fb;
  --ew-border: #dae4ee;
  --ew-col: 680px;
}

/* ---- Advertising disclosure bar ----
   Meta policy requirement. Never hide it, dim it, or push it out of view. */
.ew-adbar {
  background: #f4f4f4;
  border-bottom: 1px solid #e4e4e4;
}

.ew-adbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5px 16px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #666;
  text-align: left;
}

/* ---- Header overrides ---- */
.cnn-header-wrapper {
  z-index: 9998;
  /* Overlap the bar above by 1px to prevent a hairline gap between the two
     full-width bars at non-integer browser zoom levels (subpixel rounding). */
  margin-top: -1px;
}

.thick-black-line {
  background-color: var(--ew-accent);
  height: 3px;
}

.ew-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
}

.ew-logo-word {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 800;
  font-size: 21px;
  color: var(--ew-ink);
  letter-spacing: -.3px;
}

.ew-logo-badge {
  background: var(--ew-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ---- Sponsored badge ---- */
.ew-badge-row {
  text-align: center;
}

.ew-badge {
  background-color: var(--ew-accent-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.ew-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: ew-pulse 1.4s infinite ease-in-out;
}

@keyframes ew-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ---- Headline / subheadline / attribution ---- */
.ew-headline {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.4px;
  color: var(--ew-ink);
}

.ew-headline-accent {
  color: var(--ew-accent-deep);
}

.ew-subhead {
  max-width: var(--ew-col);
  margin: 12px auto 0;
  padding: 0 16px;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #374151;
}

.ew-attrib {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ew-muted);
}

/* Desktop: attribution above the player. Mobile: below it (see 768px block). */
.ew-attrib--below {
  display: none;
}

/* ---- Video block (the player itself is the producer's asset — untouched) ---- */
.ew-video-block {
  max-width: 760px;
  margin: 18px auto 0;
}

.ew-video-caption {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ew-muted);
}

/* ---- Article body ---- */
.ew-lead {
  max-width: var(--ew-col);
  margin: 26px auto 0;
  padding: 0 16px;
}

.ew-lead p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
  color: #1f2933;
}

.ew-lead p:last-child {
  margin-bottom: 0;
}

.ew-h2 {
  max-width: var(--ew-col);
  margin: 0 auto 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ew-ink);
}

/* ---- Mechanism diagram ---- */
.ew-mech {
  max-width: var(--ew-col);
  margin: 34px auto 0;
  padding: 0 16px;
}

.ew-mech-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.ew-mech-step {
  background: var(--ew-bg-soft);
  border: 1px solid var(--ew-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ew-primary);
  text-align: center;
  white-space: nowrap;
}

.ew-mech-step.is-end {
  background: #fdf1ef;
  border-color: #f3cbc5;
  color: var(--ew-accent-deep);
}

.ew-mech-arrow {
  font-size: 17px;
  font-weight: 700;
  color: var(--ew-muted);
  line-height: 1;
}

.ew-mech-note {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #37424e;
}

/* ---- Evidence cards ---- */
.ew-evidence {
  max-width: 900px;
  margin: 34px auto 0;
  padding: 0 16px;
}

.ew-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px) {
  .ew-evidence-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.ew-evidence-card {
  background: #fff;
  border: 1px solid var(--ew-border);
  border-top: 3px solid var(--ew-primary-light);
  border-radius: 10px;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
}

.ew-evidence-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #1f2933;
}

.ew-evidence-card p strong {
  color: var(--ew-primary);
}

.ew-cite {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-style: italic;
  color: var(--ew-muted) !important;
}

/* ---- Safety box (required — never collapse, shrink or move below the offer) ---- */
.ew-safety {
  max-width: var(--ew-col);
  margin: 34px auto 0;
  padding: 20px 22px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-left: 4px solid var(--ew-primary);
  border-radius: 6px;
}

.ew-safety p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #2b3540;
}

.ew-safety p:last-child {
  margin-bottom: 0;
}

.ew-safety-lead {
  font-size: 17px !important;
  font-weight: 800;
  color: var(--ew-ink) !important;
}

/* ---- Guarantee, promoted next to the first CTA ---- */
.ew-guarantee {
  max-width: var(--ew-col);
  margin: 28px auto 0;
  padding: 16px 18px;
  background: #f2f8f2;
  border: 1.5px solid #cbe3cb;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ew-guarantee i {
  font-size: 26px;
  color: #2f7d3a;
  flex-shrink: 0;
  margin-top: 2px;
}

.ew-guarantee-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ew-ink);
  margin-bottom: 3px;
}

.ew-guarantee-copy span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #3d4a57;
}

/* ---- Primary CTA (repeated identically three times) ---- */
.ew-cta {
  display: block;
  max-width: 520px;
  margin: 20px auto 0;
  padding: 18px 20px;
  background: linear-gradient(to top, #b3271b 50%, #d33a2a 51%);
  color: #fff;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.25;
  box-shadow: 0 4px 12px rgba(179, 39, 27, .25);
}

.ew-cta:hover {
  filter: brightness(1.06);
}

.ew-cta-note {
  max-width: 520px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--ew-muted);
}

/* ---- Offer card palette (overrides the teal hard-coded in styles2.css) ---- */
.sh-grid .sh-card {
  border-color: var(--ew-primary);
}

.sh-grid .sh-card.promo {
  border-color: var(--ew-accent-deep);
  background: radial-gradient(ellipse at center, #1c4c80, #102c4c);
}

.sh-grid .sh-header {
  background: var(--ew-primary);
}

.sh-grid .sh-card.promo .sh-header {
  background: #fff;
  color: var(--ew-accent-deep);
}

.sh-grid .sh-card.promo .sh-btn {
  background: linear-gradient(to top, #d33a2a 50%, #e8503e 51%);
  color: #fff;
}

.sh-grid .sh-card.promo .sh-totals .sh-free,
.sh-grid .sh-card.promo .sh-feature.biggest {
  color: var(--ew-gold);
}

/* ---- Trust badge strip ---- */
.ew-trust-strip {
  max-width: var(--ew-col);
  margin: 22px auto 0;
  padding: 14px 16px;
  background: var(--ew-bg-soft);
  border: 1px solid var(--ew-border);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

@media (min-width: 640px) {
  .ew-trust-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ew-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ew-ink);
  line-height: 1.25;
}

.ew-trust-item i {
  color: var(--ew-primary-light);
  font-size: 15px;
  flex-shrink: 0;
}

/* ---- Post-pitch reveal block ---- */
.ew-reveal-intro {
  max-width: 640px;
  margin: 30px auto 14px;
  padding: 0 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ew-ink);
}

.ew-ingredients {
  max-width: var(--ew-col);
  margin: 18px auto 0;
  padding: 0 16px;
}

.ew-ingredients h3 {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ew-muted);
  margin: 0 0 10px;
}

/* Three ingredients, so a single column on phones reads better than an
   orphaned card on a 2-up grid. */
.ew-ingredient-grid {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .ew-ingredient-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ew-ingredient-card {
  background: #fff;
  border: 1px solid var(--ew-border);
  border-left: 3px solid var(--ew-accent);
  border-radius: 10px;
  padding: 10px 12px;
}

.ew-ingredient-card strong {
  display: block;
  font-size: 12.5px;
  color: var(--ew-primary);
  margin-bottom: 3px;
}

.ew-ingredient-card span {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ew-muted);
}

.ew-bonus-banner {
  max-width: 640px;
  margin: 16px auto 4px;
  padding: 10px 16px;
  background: #fff6ec;
  border: 1.5px dashed var(--ew-gold);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ew-ink);
}

/* ---- Sticky mobile CTA ---- */
.ew-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .ew-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, #b3271b 50%, #d33a2a 51%);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .22);
  }
}

/* ---- Offer reveal spacing: keep content clear of the sticky header ---- */
.delay {
  scroll-margin-top: 90px;
}

#gfq-dtc-external {
  padding-top: 8px;
}

.sh-grid {
  padding-top: 16px !important;
  /* The pitch scroll targets this grid, so it owns the offset that keeps the
     sticky header off the top card. */
  scroll-margin-top: 70px;
}

/* ---- Cards arriving at the pitch ----
   Staggered pop so the three offers visibly land on screen instead of simply
   being there. The class is removed once it has played (see the reveal script):
   its fill-mode would otherwise pin a transform and kill .sh-card:hover. */
.sh-grid.ew-cards-pop .sh-card {
  animation: ew-card-pop .5s cubic-bezier(.2, .9, .3, 1.4) both;
}

.sh-grid.ew-cards-pop .sh-card:nth-child(1) { animation-delay: 0s; }
.sh-grid.ew-cards-pop .sh-card:nth-child(2) { animation-delay: .12s; }
.sh-grid.ew-cards-pop .sh-card:nth-child(3) { animation-delay: .24s; }

@keyframes ew-card-pop {
  0%   { opacity: 0; transform: translateY(28px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-7px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Best-offer highlight pulse (plays once, after the cards land) ---- */
.ew-highlight-pulse {
  animation: ew-card-pulse 0.9s ease-out 2;
}

@keyframes ew-card-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 75, 60, .7); }
  70% { box-shadow: 0 0 0 14px rgba(224, 75, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 75, 60, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-grid.ew-cards-pop .sh-card,
  .ew-highlight-pulse,
  .ew-badge .dot {
    animation: none;
  }

  /* !important because the reveal block declares scroll-behavior: smooth from
     an inline <style> further down the document, which would otherwise win. */
  html {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   MOBILE COMPRESSION (~90% of traffic is 9:16)
   Everything above the player has to fit in three lines of text, and the top
   of the player has to be on screen at 375x667 without scrolling.
   ========================================================================== */
@media (max-width: 768px) {

  .content-grid {
    margin: 12px auto 24px;
    gap: 0;
  }

  .ew-badge {
    margin-bottom: 6px;
  }

  /* Subheadline is cut on mobile — the headline already carries the promise,
     and this is the cheapest line to spend on reaching the player sooner. */
  .ew-subhead {
    display: none;
  }

  .ew-attrib--top {
    display: none;
  }

  .ew-attrib--below {
    display: block;
    margin-top: 12px;
  }

  .ew-video-block {
    margin-top: 12px;
  }

  .ew-lead {
    margin-top: 22px;
  }

  .ew-lead p {
    font-size: 17px;
  }

  .ew-mech,
  .ew-evidence,
  .ew-safety,
  .ew-guarantee {
    margin-top: 26px;
  }

  .ew-h2 {
    font-size: 20px;
  }

  /* Stack the pathway and turn the arrows to point down. */
  .ew-mech-flow {
    flex-direction: column;
    gap: 6px;
  }

  .ew-mech-step {
    width: 100%;
  }

  .ew-mech-arrow {
    transform: rotate(90deg);
  }

  .ew-safety {
    padding: 16px;
  }

  .ew-cta {
    font-size: 17px;
    padding: 16px;
  }

  /* Room for the fixed bottom CTA bar once the offer is revealed. */
  #gfq-dtc-external {
    padding-bottom: 76px;
  }
}