/* =========================================================================
   DermaPure "VITA" VSL Landing Page — clone styles (vanilla)
   All content shown immediately (no .atomicat-delay gate). Video = placeholder.
   Token values + typography extracted from getComputedStyle on the live site.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --purple:        #935094;  /* headline, AS-FEATURED-IN band, card headers, sci-ref pill */
  --purple-dark:   #391739;  /* emphasized headline words, card border, bottle/supply text */
  --purple-light:  #F8EAFC;
  --yellow:        #FCCD15;  /* BUY NOW buttons */
  --yellow-bright: #FFD814;
  --yellow-text:   #FFE400;  /* AS FEATURED IN heading */
  --gold:          #DAA200;  /* "Best Value!" header text + featured YOU SAVE accent */
  --gold-ship:     #FCDD15;  /* featured "+FREE SHIPPING" (live: rgb 252,221,21) */
  --blue:          #2A5BA5;  /* YOU SAVE text */
  --blue-hover-a:  #72C4FF;  /* BUY NOW hover gradient top */
  --blue-hover-b:  rgba(114, 185, 255, 0.91);
  --red:           #D83644;  /* +FREE highlight, play button */
  --ink:           #231F20;  /* BUY NOW text */
  --text:          #000000;
  --grey:          #7F7F7F;
  --ref-grey:      #4a4a4a;
  --white:         #FFFFFF;
  --green:         #2e9e3f;  /* check icons */

  /* motion */
  --motion-base: 300ms;
  --motion-fast: 150ms;
  --ease-in-out: ease-in-out;

  --col: 1140px;       /* centered content column (live: .a-cont max-width:1140px) */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--white);
  color: var(--text);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }

/* ---------- Page shell ---------- */
.page { width: 100%; overflow-x: hidden; }
/* Centered 1140px column. No inner padding at >=1140 so content matches the
   live 1140px wrappers (headline <p>, video, pricing row are all 1140 wide).
   A gutter is applied only when the viewport is narrower than the column. */
.column {
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: 0;
}
@media screen and (max-width: 1172px) {
  .column { padding-inline: 16px; }
}

/* =========================================================================
   1. HEADLINE
   ========================================================================= */
.headline {
  /* Live original: headline top ~42px, headline->video gap ~41px. */
  padding-top: 42px;
  padding-bottom: 0;
}
.headline__text {
  font-family: "Inter Tight", "Roboto", sans-serif;
  font-weight: 900;
  font-size: 51px;
  line-height: normal; /* live original: 'normal' (~61.7px @51px); block ~183px tall */
  color: var(--purple);
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}
.headline__text em {
  font-style: normal;
  color: var(--purple-dark);
  font-weight: 700; /* original emphasized spans are font-weight:bold (700) */
}

/* =========================================================================
   2. VIDEO PLACEHOLDER (16:9 dark box, centered play button)
   Constrained to the 1140px content column (live .a-video = 1140x641 @1440).
   ========================================================================= */
.video {
  /* Live original: headline->video gap ~41px; video bottom->card top ~109px. */
  margin: 41px 0 0;
}
.video__column {
  margin-inline: auto;
}
.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: radial-gradient(120% 120% at 50% 40%, #1c1c1f 0%, #0d0d0d 100%);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}
.video__caption-overlay {
  background: #000;
  color: #fff;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  line-height: 1.5;
  padding: 14px 22px;
  border-radius: 2px;
  width: max-content;
}
.video__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: transform var(--motion-fast) var(--ease-in-out);
}
.video__frame:hover .video__play,
.video__frame:focus-visible .video__play { transform: scale(1.06); }
.video__play::after {
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.video__frame:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.video__below-caption {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  color: #2b2b2b;
  margin: 14px auto 2px;
}

/* =========================================================================
   3. PRICING — 3 cards
   ========================================================================= */
.pricing {
  max-width: var(--col);
  /* Live original: ~109px from video bottom to first card top. */
  margin: 109px auto 0;
}
@media screen and (max-width: 1172px) {
  .pricing { padding-inline: 16px; }
}
.pricing__row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}
.card {
  flex: 1 1 0;
  max-width: 363px;
  background: var(--white);
  /* Basic: 2px solid #391739, radius 16px (live getComputedStyle). */
  border: 2px solid var(--purple-dark);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Most Popular: same border, radius 8px (live). */
.card--popular { border-radius: 8px; }
/* Featured ("Best Value!"): NO visible border, radius 8px, body tinted
   light-purple #F8EAFC (header stays dark). Verified live via getComputedStyle. */
.card--featured {
  border: 0 solid transparent;
  border-radius: 8px;
  background: var(--purple-light);
  /* Featured box is slightly narrower than Basic/Popular (live ≈353 vs ≈363). */
  max-width: 353px;
  /* Emphasis: the featured card overhangs ~14px ABOVE the other two (live top
     ≈1002 vs ≈1016). Pull it up and opt out of stretch; its height matches the
     others (~847) via min-height. */
  align-self: flex-start;
  margin-top: -14px;
  min-height: 847px;
}

/* coloured header bar:
   Basic / Most Popular = #935094, 34px tall, Ubuntu 700 20px white.
   Best Value = #391739, 46px tall, Poppins 700 23px gold, text uppercased. */
.card__header {
  text-align: center;
  padding: 5px 0;
  background: var(--purple);
}
.card--featured .card__header {
  background: var(--purple-dark);
  padding: 6px 0;
}
.card__header-title {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  margin: 0;
}
.card--featured .card__header-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: var(--gold);
  /* DOM text is "Best Value!"; original renders it uppercased -> "BEST VALUE!" */
  text-transform: uppercase;
}

/* media region: bottles + supply + image */
.card__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 18px 0;
}
.card__bottles {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-size: 35px;
  color: var(--purple-dark);
  text-align: center;
  margin: 4px 0 0;
  line-height: 1.05;
}
.card__supply {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--purple-dark);
  text-align: center;
  text-transform: uppercase; /* live: "60 Day Supply" rendered "60 DAY SUPPLY" */
  margin: 0 0 4px;
}
/* On the original, each bottle image element is a tall ~320px square (basic/most
   popular) with the wide artwork centered (big white gap above the price). The
   featured artwork is 353x278. Reproduce with a fixed display height + contain. */
.card__image {
  width: 100%;
  max-width: 320px;
  height: 320px;
  object-fit: contain;
  margin: 4px auto;
}
/* Featured artwork is LARGER (live ≈353px wide vs 320 for Basic/Popular) and
   spans nearly the full card width, so it breaks out of the media padding. */
.card--featured .card__media { padding-left: 0; padding-right: 0; }
.card--featured .card__image { max-width: 353px; height: 278px; }

/* info region: price + benefits. The price block sits LOW in the card (big
   white gap above it on the original); push it down with margin-top:auto so the
   media stays at the top and the price/benefits/button group hugs the bottom. */
.card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  margin-top: auto;
}

/* price assembly: $  NN  PER/BOTTLE */
.card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 4px 0 2px;
}
.card__price-dollar {
  font-family: "Ubuntu", sans-serif;
  font-weight: 900;
  font-size: 45px;
  color: var(--text);
  align-self: flex-start;
  margin-top: 8px;
  line-height: 1;
}
.card__price-num {
  font-family: "Ubuntu", sans-serif;
  font-weight: 900;
  font-size: 80px;
  color: var(--text);
  line-height: 1;
}
.card__price-per {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  text-align: left;
  line-height: 1.05;
  align-self: center;
}

/* small benefit lines with check icons */
.card__benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 7px;
  margin: 0 -16px;
  padding: 7px 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.4);
}
/* Dashed divider lines frame the benefit rows — matches the original, which
   draws a 1px dashed rgba(0,0,0,.4) full-width line above each benefit row and
   one below the last (3 lines on Basic/Popular, 4 on the featured card which
   has the extra BIGGEST DISCOUNT row). */
.card__benefit:last-of-type {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
}
/* Filled circular check badge (Font Awesome circle-check). The disc is the
   currentColor; the check is a knock-out (even-odd) showing the bg through.
   Live colors: YOU SAVE = blue #2A5BA5 (16px); guarantee/discount = black 17px. */
.card__benefit .check {
  flex: 0 0 auto;
  fill-rule: evenodd;
}
.card__benefit .check--blue  { width: 16px; height: 16px; color: var(--blue); }
.card__benefit .check--black { width: 17px; height: 17px; color: var(--text); }
.card__save {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
  margin: 0;
}
/* Featured (Best Value) harmonizes its "YOU SAVE" accent to GOLD (live: rgb(218,162,0)):
   both the text and the circle-check icon next to it. Basic/Popular stay blue. */
.card--featured .card__save { color: var(--gold); }
.card--featured .card__benefit .check--blue { color: var(--gold); }
.card__guarantee,
.card__discount {
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin: 0;
}

/* payment-methods row: centered below BUY NOW (DOM order: button -> pay -> total) */
.card__pay {
  width: 100%;
  max-width: 215px;
  margin: 12px auto 4px;
}

/* Total line: whole line is Roboto 20px, centered, line-height normal.
   <strong> stays INLINE so "Total: $594 $158" sits on one line; the <br>
   inside <strong> drops "+9.99 SHIPPING" to the next line. (NOT inline-block.) */
.card__total {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: var(--text);
  text-align: center;
  /* Bottom slack lands here so the card box reaches the live ~848px height while
     the price block stays at its correct y (~1479). Reduced from 70px because the
     dashed benefit dividers now contribute their own vertical structure/height. */
  margin: 2px 18px 44px;
  line-height: 1.2;
}
.card__total s {
  color: var(--text);
  font-size: 20px;
  font-weight: 400;
}
.card__total strong {
  display: inline;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
}
/* "+FREE" highlighted red (Most Popular); "SHIPPING" stays black */
.card__total .ship { font-weight: 700; color: var(--text); }
.card__total .ship-free { color: var(--red); font-weight: 700; }
/* Featured (Best Value) only: the ENTIRE "+FREE SHIPPING" phrase is gold
   (live: rgb(252,221,21)) — both the +FREE span and surrounding SHIPPING text. */
.card--featured .card__total .ship,
.card--featured .card__total .ship-free { color: var(--gold-ship); }

/* BUY NOW button — sits directly under the benefit lines (no margin-top:auto:
   the flexible slack now lives above .card__info via its margin-top:auto). */
.btn-buy {
  margin: 6px 18px 4px;
  display: block;
  text-align: center;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Red Hat Display", sans-serif;
  font-weight: 800;
  font-size: 25px;
  padding: 12px;
  border-radius: 7.5px;
  box-shadow: 0 4px 0 0 rgba(0,0,0,.2);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-in-out),
              color var(--motion-base) var(--ease-in-out);
}
.btn-buy:hover {
  background: linear-gradient(360deg, var(--blue-hover-a) 0%, var(--blue-hover-b) 100%);
  color: #000;
}
.btn-buy:focus-visible {
  outline: 1px auto #101010;
  outline-offset: 1px;
}
/* the featured card's base button uses a subtle yellow gradient (Montserrat 700) */
.card--featured .btn-buy {
  background: linear-gradient(360deg, var(--yellow) 50%, var(--yellow-bright) 51%);
  font-family: "Montserrat", "Red Hat Display", sans-serif;
  font-weight: 700;
  color: #000;
  box-shadow: 0 4px 0 0 rgba(0,0,0,.2);
}
.card--featured .btn-buy:hover {
  background: linear-gradient(360deg, var(--blue-hover-a) 0%, var(--blue-hover-b) 100%);
  color: #000;
}

/* =========================================================================
   4. AS FEATURED IN (full-bleed purple band)
   ========================================================================= */
.featured-band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--purple);
  padding: 30px 16px 36px;
  margin-top: 44px;
}
.featured-band__title {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 51px;
  line-height: normal; /* live: 'normal' -> box ~61px (was ~77px from inherited 1.5) */
  color: var(--yellow-text);
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: .5px;
}
.featured-band__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.featured-band__logos img { height: auto; }
.logo-fox { width: 166px; }
.logo-abc { width: 225px; }
.logo-cbs { width: 130px; }

/* =========================================================================
   5. SCIENTIFIC REFERENCES
   ========================================================================= */
.references {
  padding: 30px 16px 40px;
}
.references__pill-wrap {
  text-align: center;
  /* Live: the seal sits almost flush under the pill -> minimal gap. */
  margin-bottom: 6px;
}
/* Large prominent pill: original renders this as an H1 — 36px white text in a
   #935094 radius-20px pill, fixed 376px wide, padding 10px 0, centered. */
.references__pill {
  display: inline-block;
  width: 376px;
  max-width: 100%;
  background: var(--purple);
  border-radius: 20px;
  padding: 10px 0;
  margin: 0;
  text-align: center;
}
.references__pill-text {
  display: inline;
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.18;
}
.references__seal {
  display: block;
  width: 388px;
  max-width: 90vw;
  /* Live: seal sits directly under the pill (~touching) and the cred row below
     overlaps the seal's lower edge. Remove the bottom slack here. */
  margin: 0 auto 0;
}
.references__cred {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  /* Pull the Harvard/NIH row UP so it overlaps the (decorative) seal's lower
     portion, matching the live tight layout and removing ~80px of slack. */
  margin: -60px auto 26px;
  max-width: 700px;
}
.logo-harvard { width: 334px; max-width: 80vw; }
.logo-nih { width: 215px; max-width: 60vw; }

/* Live original: 14px grey (#7F7F7F) Roboto 400, left-aligned within the column.
   URLs render as plain grey text (no link color) on the original; kept clickable
   but same grey to match. Citations 3/4/5 break onto separate lines via <br>. */
.references__list {
  list-style: none;
  counter-reset: ref;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--grey);
}
.references__list li {
  margin-bottom: 5px;
  word-break: break-word;
}
.references__list li a {
  color: var(--grey);
  text-decoration: none;
  word-break: break-all;
}
.references__list li a:hover { text-decoration: underline; }

/* =========================================================================
   RESPONSIVE — pricing reflow
   Live original: ROW (3-across) at >=1040px; STACK (single column) at <=1039px,
   reordered Best Value! -> Most Popular -> Basic.
   Between ~640 and 1039 the live original keeps LARGE vertical cards (full
   desktop image scale, ~362px featured bottle); only BELOW ~640 does it drop
   into the tight compact 2-column layout (tiny image). The compact breakpoint
   was raised from 1039 -> 639 to fix the 768 tablet reflow.
   ========================================================================= */
@media screen and (max-width: 1100px) {
  .pricing__row { gap: 14px; }
}

/* Stack + reorder at <=1039, but keep the LARGE vertical card scale. */
@media screen and (max-width: 1039px) {
  .pricing__row {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  /* reorder: Best Value! first, then Most Popular, then Basic */
  .card--featured { order: 1; }
  .card--popular  { order: 2; }
  .card--basic    { order: 3; }

  /* Cards stack full-width (cap ~720, matching live tablet) and keep the
     desktop vertical layout and large bottle image. Cancel the desktop featured
     overhang/narrowing so the stacked featured card sits inline with the others. */
  .card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 720px;
  }
  .card--featured {
    max-width: 720px;
    align-self: center;
    margin-top: 0;
    min-height: 0;
  }
}

/* Compact 2-column layout only below ~640 (the small-phone version). */
@media screen and (max-width: 639px) {
  /* Stacked card = a tight 2-column grid matching the live original at 390
     (card heights ~333 / 339 / 369). Header spans full width on top;
     media (bottles + supply + image) LEFT; price/benefits/total RIGHT; BUY NOW
     spans full width below. Payment-icons row is collapsed (0x0) on the
     original at this width, so it is hidden here. */
  .card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 520px;
    display: grid;
    grid-template-columns: minmax(150px, 0.95fr) 1fr;
    grid-template-areas:
      "header header"
      "media  info"
      "media  total"
      "buy    buy";
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: 4px;
  }
  .card__header { grid-area: header; }

  .card__media {
    grid-area: media;
    padding: 6px 4px 8px 12px;
    justify-content: flex-start;
    gap: 0;
    margin-top: 0;
  }
  .card__bottles { font-size: 23px; margin: 4px 0 0; }
  .card__supply  { font-size: 16px; margin: 0 0 2px; }
  /* mobile: image is ~172px wide in the left column (live), not the 320px square */
  .card__image   { max-width: 100%; height: auto; margin: 6px auto 0; }
  .card--featured .card__image { max-width: 100%; height: auto; }

  .card__info {
    grid-area: info;
    padding: 6px 12px 0 4px;
    align-items: stretch;
    gap: 2px;
    margin-top: 0; /* cancel the desktop margin-top:auto inside the grid */
  }
  .card__price { margin: 2px 0 0; justify-content: flex-start; }
  .card__price-dollar { font-size: 27px; margin-top: 6px; }
  .card__price-num    { font-size: 42px; }
  .card__price-per    { font-size: 13px; }
  /* keep the dashed dividers on mobile, but drop the negative margin/inset so
     the lines don't overflow the narrow grid column */
  .card__benefit { justify-content: flex-start; margin: 0; padding: 7px 0; }

  /* payment row collapsed on the original at narrow widths -> hide it */
  .card__pay { display: none; }

  /* total sits directly under info in the right column (matches original) */
  .card__total {
    grid-area: total;
    align-self: start;
    text-align: left;
    margin: 2px 12px 6px 4px;
    font-size: 16px;
    line-height: 1.3;
  }
  .card__total s,
  .card__total strong { font-size: 16px; }

  /* BUY NOW spans full width below, inset, no extra top slack */
  .btn-buy {
    grid-area: buy;
    align-self: end;
    margin: 4px 18px 16px;
    padding: 10px;
    font-size: 25px;
  }
}

/* tablet / phone type scaling within the stacked layout */
@media screen and (max-width: 768px) {
  .headline__text { font-size: 28px; }
  /* live @390: cards end ~1524, band top ~1572 (gap ~48..78); band ~183px tall */
  .featured-band { padding: 30px 16px 30px; margin-top: 62px; }
  .featured-band__title { font-size: 40px; margin-bottom: 14px; }
  /* keep all three press logos on ONE row at mobile (no wrap), matching the
     live original (Fox 73px, ABC, CBS 57px all on one line). */
  .featured-band__logos { gap: 22px; flex-wrap: nowrap; }
  .logo-fox { width: 73px; }
  .logo-abc { width: 96px; }
  .logo-cbs { width: 57px; }
  .video__caption-overlay { font-size: 11px; padding: 10px 14px; }
  .video__play { width: 48px; height: 48px; }
  .video__play::after { border-width: 9px 0 9px 15px; }
  .video__overlay { gap: 12px; }
}

/* References compaction on mobile: original is 13px, line-height ~1.2,
   ~10px between items (matches live original at 390). */
@media screen and (max-width: 768px) {
  .references { padding: 24px 16px 30px; }
  .references__list { font-size: 13px; line-height: 1.35; }
  .references__list li { margin-bottom: 11px; }
  /* Mayo seal is collapsed (0x0) on the original at <=768/390 -> hide it. */
  .references__seal { display: none; }
  /* Harvard + NIH shrink and sit on one row (live: ~185x61 / ~122x42). */
  .references__cred { gap: 16px; margin: 6px auto 18px; flex-wrap: nowrap; }
  .logo-harvard { width: 185px; }
  .logo-nih { width: 122px; }
}

@media screen and (max-width: 480px) {
  /* Live original at 390 rhythm (getComputedStyle): headline block ~190px tall
     (video top 190), video ~211px (bottom 401), first card top 437 (gap ~36),
     last card bottom ~1524, AS FEATURED top ~1602 (gap ~78), docH ~2716. */
  .headline { padding-top: 36px; padding-bottom: 0; }
  .headline__text { font-size: 21px; line-height: 1.25; }
  .video { margin: 44px 0 0; }
  .pricing { margin-top: 36px; }
  /* taller stacked cards + larger inter-card gap to match the original block height */
  .pricing__row { gap: 28px; }
  /* Card type matches the live original at 390 (price number 42px, $ 27px).
     Keep these aligned with the stacked-layout block above — do NOT re-inflate. */
  .card__bottles { font-size: 23px; }
  .card__supply { font-size: 16px; }
  .card__price-dollar { font-size: 27px; margin-top: 6px; }
  .card__price-num { font-size: 42px; }
  .card__price-per { font-size: 13px; }
  .card__header-title { font-size: 20px; }
  .card--featured .card__header-title { font-size: 23px; }
  .card__save { font-size: 14px; }
  .card__guarantee, .card__discount { font-size: 12px; }
  .btn-buy { font-size: 25px; }
}

/* ---------- Reduced motion safety gate ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}