/* ArtiBrex / HW / ML01 — CNN Health skin over the H&W VSL kit
   (assets/main/css/vsl-kit.css, loaded first): top bar, headline with the
   red rule and the "available until" line, 4:5 player, the kit's single
   green button and stock line under it at the pitch, viewers counter,
   Facebook-style comments, guarantee and footer. The kit runs the stage;
   this file is the look.

   Where the page departs from the kit, same calls as the Oculume, Lunorell
   and Neusarena pages:
     - on stage the top bar stays and the headline shrinks a little; the
       player only widens (to the screen edges on phones) with a slight zoom
     - at the pitch the comments (.vsl-comments) fade out and leave the
       page, as the kit does, and the page goes back to the top with top bar,
       headline, player, button and stock line all on screen: the player
       shrinks only as much as the screen asks (--vsl-pitch-reserve), so the
       button never needs a scroll */

:root {
  /* Inter for the page; the comments borrow Facebook's system stack. The
     original loaded Inter, Nunito Sans, Poppins and Sora. */
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-fb: Helvetica, Arial, sans-serif;

  --vsl-top-h: 46px;

  /* 4:5 video. --landing-reserve is this page's own: the screen height top
     bar + headline + "available until" line take, so the whole player fits
     under them on landing. On stage the headline shrinks, so the kit's
     --vsl-stage-reserve is smaller and the player widens into that room.
     At the pitch the kit caps the player at the screen height left after
     --vsl-pitch-reserve: everything but the player (top bar, headline at
     its landing size, "available until" line, button, stock line and
     their gaps). With the sound on the headline is smaller, so the reserve
     too (body.is-stripped, below). */
  --landing-reserve: 250px;
  --vsl-stage-reserve: 220px;
  --landing-w: min(var(--vsl-player-w), (var(--vsl-screen-h) - var(--landing-reserve)) * var(--vsl-player-ratio));

  --vsl-pitch-reserve: 350px;

  /* On stage the headline shrinks a little; at the pitch it stays. Sized to
     the width so it holds 4 lines at most on phones and 3 on desktop. */
  --vsl-headline: clamp(24px, 3.4vw, 30px);
  --vsl-headline-stage: 24px;
  --vsl-headline-pitch: var(--vsl-headline-stage);
  --vsl-headline-m: clamp(17px, 5.3vw, 22px);
  --vsl-headline-stage-m: clamp(15px, 4.6vw, 19px);
  --vsl-headline-pitch-m: var(--vsl-headline-stage-m);

  --ink: #0c0c0c;
  --red: #cc0000;
  /* the original's #8c8c8c gave 3.4:1 on white; this one holds 5.3:1 */
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --live: #4caf50;
}

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

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrap {
  width: 100%;
  max-width: var(--vsl-maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- Top bar (CNN Health look) ----------------------------------------- */

.topbar {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* The kit folds .vsl-top away on stage; this page keeps it. */
body.is-stripped .vsl-top {
  height: var(--vsl-top-h);
  border-bottom-color: var(--line);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--vsl-top-h);
  color: var(--ink);
}

.topbar__burger {
  font-size: 22px;
  line-height: 1;
}

.topbar__logo {
  width: 46px;
  height: 22px;
}

.topbar__section {
  font-size: 20px;
  font-weight: 800;
}

.topbar__search {
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
}

.topbar__signin {
  padding: 4px 8px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ---- Headline ----------------------------------------------------------- */

.headline {
  padding: 14px 0 0;
}

/* The red rule runs down the left of the headline, as on the original. */
.headline h1 {
  position: relative;
  padding-left: 18px;
  color: #000;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
}

.headline h1::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--red);
}

/* Sound never turned on: at the pitch the headline keeps its landing size
   (the kit's pitch size is the stage one here). */
body.is-revealed:not(.is-stripped) .vsl-headline h1 {
  font-size: var(--vsl-headline);
}

@media (max-width: 640px) {
  body.is-revealed:not(.is-stripped) .vsl-headline h1 {
    font-size: var(--vsl-headline-m);
  }
}

.headline__deadline {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.headline__deadline strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---- Player ------------------------------------------------------------- */

.vsl-video {
  padding: 12px 0 0;
}

/* On landing the whole player is on screen (--landing-w); the kit copies that
   width when the stage opens. At the pitch the kit's own rules cap it by
   --vsl-pitch-reserve, so the button fits under it without a scroll. */
.vsl-video__box {
  --stage-w: var(--landing-w);
}

body.is-stripped {
  --vsl-pitch-reserve: 315px;
}

/* Sound on: the player widens to the screen edges (the kit drops the gutter
   on phones) with a slight zoom that peaks and settles as it lands. Box and
   gutter share one duration, so the growth reads as one move. */
.vsl-video__gutter,
.vsl-video__box {
  transition-duration: 0.7s;
}

body.is-stage .vsl-video__box {
  animation: abZoom 0.8s var(--vsl-ease);
}

@keyframes abZoom {
  0%,
  100% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.02);
  }
}

/* ---- Offer (the kit's button and stock line) ---------------------------- */

.vsl-cta {
  padding-top: 14px;
  padding-bottom: 10px;
}

.vsl-cta__button {
  font-size: 30px;
}

.vsl-cta__stock {
  margin-top: 12px;
  font-size: clamp(15px, 4.4vw, 20px);
}

/* ---- Viewers ------------------------------------------------------------ */

.watching {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.watching strong {
  display: inline-block;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The kit tags the number on every change; a short lift marks the tick. */
.watching strong.is-changing {
  animation: abTick 0.42s ease;
}

@keyframes abTick {
  45% {
    transform: translateY(-1px) scale(1.08);
  }
}

.watching__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
}

/* ---- Comments (Facebook look) ------------------------------------------- */

/* The metrics here are copied from the real Facebook comment UI on purpose;
   they don't follow this page's spacing rhythm. */
.comments {
  padding: 24px 0;
}

.fb {
  padding: 8px 0 16px;
  font-family: var(--font-fb);
}

.fb__count {
  padding: 8px 0 20px;
  border-bottom: 1px solid #e9ebee;
  font-size: 14px;
  font-weight: 600;
}

.fb__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 16px;
}

.fb__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.fb__col {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f0f2f5;
}

.fb__name {
  color: #385898;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.358;
}

.fb__text {
  margin: 4px 0 6px;
  color: #1c1e21;
  font-size: 14px;
  line-height: 19px;
  overflow-wrap: break-word;
}

.fb__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #4267b2;
  font-size: 12px;
  line-height: 16px;
}

.fb__dot,
.fb__time {
  color: #90949c;
}

.fb__likes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 2px 4px;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  color: #1c1e21;
}

.fb__likes img {
  width: 14px;
  height: 14px;
}

/* ---- Guarantee ---------------------------------------------------------- */

.guarantee {
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.guarantee__seal {
  width: 150px;
  margin: 0 auto 16px;
}

.guarantee h2 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  line-height: 1.2;
}

.guarantee h3 {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.guarantee p {
  max-width: 560px;
  margin: 0 auto 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.guarantee a {
  color: var(--ink);
}

.guarantee__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* House seals (Selos/All Type): GMP, FDA Registered, GMO Free, USA. */
.guarantee__badges img {
  width: 64px;
  height: 64px;
}

/* ---- Footer ------------------------------------------------------------- */

.foot {
  padding: 36px 0 40px;
  background: #000;
  color: #9a9a9a;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-bottom: 20px;
  list-style: none;
  font-size: 13px;
}

.foot__links a {
  color: #c9c9c9;
  text-decoration: none;
  white-space: nowrap;
}

.foot p + p {
  margin-top: 10px;
}

/* .foot .foot__copy outranks .foot p + p, which would set 10px */
.foot .foot__copy {
  margin-top: 18px;
  color: #c9c9c9;
}

/* ---- Desktop ------------------------------------------------------------ */

@media (min-width: 768px) {
  :root {
    --landing-reserve: 260px;
  }

  body.is-stripped {
    --vsl-pitch-reserve: 300px;
  }

  .headline h1 {
    padding-left: 24px;
  }
}

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.is-stage .vsl-video__box,
  .watching strong.is-changing {
    animation: none;
  }
}