/* Keep the section landmark name for screen readers while the offer cards
   carry the visual story. */
html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every locale repeats the first card's price label in its detail line. */
html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:first-child h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The offer is now a single early-bird stage; keep the cashback reminder but
   omit the superseded effective-date line from this visual call to action. */
html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > p:not(.campaign-benefits__terms) > span {
  display: none;
}

@media (min-width: 821px) {
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__cards,
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action {
    position: relative;
    top: auto;
    left: 120px;
    width: 360px;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__cards {
    gap: 14px;
    height: auto;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card {
    box-sizing: border-box;
    flex: none;
    width: 360px;
    height: auto;
    min-height: 0;
    padding: 19px 22px 21px;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card > div {
    width: 100%;
    max-width: 100%;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card__index {
    color: #555961;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.08em;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card h3 {
    margin-top: 7px;
    color: #17191e;
    font-size: 17px;
    line-height: 1.27;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card strong {
    margin-top: 7px;
    color: #cd2c29;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:last-child strong {
    font-size: 20px;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card p {
    margin-top: 7px;
    color: #34373d;
    font-size: 16px;
    line-height: 1.48;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:first-child p {
    color: #17191e;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.38;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action {
    gap: 9px;
    align-items: stretch;
    overflow: visible;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > a {
    flex: none;
    width: 100%;
    min-height: 56px;
    height: auto;
    padding: 12px 20px;
    font-size: 18px;
    line-height: 1.3;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > p:not(.campaign-benefits__terms) {
    width: 100%;
    height: auto;
    color: #f2f2f2;
    font-size: 16px;
    line-height: 1.45;
  }

  /* The archived design canvas scales down at laptop widths. The old 8px
     optical-card eyebrow became roughly 7px at a 1280px viewport. */
  .layout-latest .prescription-ranges__eyebrow {
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: .08em;
  }
}

/* The 1440px design canvas is scaled down for laptops. Compensate its type
   and rail width so the physical text size does not collapse near 821px. */
@media (min-width: 821px) and (max-width: 1279px) {
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 {
    --benefit-rail-width: clamp(360px, calc(1000px - 50vw), 540px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__cards,
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action,
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card {
    width: var(--benefit-rail-width);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__cards,
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action {
    left: clamp(88px, calc(12vw - 20px), 120px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card__index {
    font-size: clamp(12px, calc(23px - 0.85vw), 16px);
    line-height: 1.35;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card h3 {
    font-size: clamp(19px, calc(36px - 1.3vw), 26px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card strong {
    font-size: clamp(23px, calc(45px - 1.6vw), 32px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:last-child strong {
    font-size: clamp(22px, calc(43px - 1.5vw), 31px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card p,
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > p:not(.campaign-benefits__terms) {
    font-size: clamp(18px, calc(38px - 1.56vw), 25px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:first-child p,
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > a {
    font-size: clamp(21px, calc(43px - 1.7vw), 29px);
  }
}

@media (max-width: 820px) {
  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 {
    min-height: 0;
    gap: 14px;
    padding-top: clamp(340px, 44svh, 390px);
    padding-bottom: 36px;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits__backdrop {
    height: clamp(340px, 44svh, 390px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits__backdrop-gradient {
    background: linear-gradient(#0000 0%, #0000000a 26%, #08090b8c 38%, #08090b 49% 100%);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__cards {
    gap: 10px;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 16px 18px 17px;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card__index {
    color: #555961;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.08em;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card h3 {
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.28;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card strong {
    margin-top: 6px;
    color: #cd2c29;
    font-size: clamp(19px, 5.4vw, 22px);
    line-height: 1.28;
    letter-spacing: -0.015em;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:last-child strong {
    font-size: clamp(19px, 5.15vw, 21px);
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card p {
    margin-top: 6px;
    color: #34373d;
    font-size: 16px;
    line-height: 1.46;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefit-card:first-child p {
    color: #17191e;
    font-size: clamp(18px, 4.5vw, 20px);
    font-weight: 700;
    line-height: 1.38;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action {
    gap: 7px;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > a {
    min-height: 52px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.3;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > p:not(.campaign-benefits__terms) {
    color: #e9e9e9;
    font-size: 14px;
    line-height: 1.4;
  }

  html[data-release="v50"] .layout-latest.release-v50 .campaign-benefits--v50 .campaign-benefits__action > p:not(.campaign-benefits__terms) strong {
    color: #ff7772;
  }
}

/* The legacy three-SKU motion override forces spotlight copy to inherit its
   parent's near-black color. These two captions sit on near-black sections. */
html[data-release="v50"] .layout-latest.release-v50 #feature-scenes .section-copy.copy-spotlight {
  color: #b8b8bf !important;
  -webkit-text-fill-color: #b8b8bf !important;
  --burst-color: #b8b8bf;
}

html[data-release="v50"] .layout-latest.release-v50 #battery .mtc__title.copy-spotlight {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  --burst-color: #fff;
}