/* ============ VARIABLES ============ */

:root {
  --vv-x: 0px;
  --vv-y: 0px;
  --vv-w: 100vw;
  --vv-h: 100vh;
  --font-family-main: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --color-text-main: #111;
  --color-text-light: #fff;
  --color-text-grey: #86868B;
  --color-text-darkgrey: rgba(24, 24, 24, 0.7);
  --color-accent: #fe2c55;
  --color-accent-dark: #b6002a;
  --color-link-hover: #ff4a4a;
  --color-bg-dark: #000000;
  --color-bg-main: #fff;
  --color-bg-muted: #f3f4f6;
  --color-bg-lightgrey: #fbfbfd;
  --color-banner: #262626;
  --color-border: #eee;
  --color-shadow: 0 2px 20px 0 rgba(0,0,0,0.12);
  --color-shadow-card: 0 2px 8px rgba(0,0,0,0.1);
  --color-btn-bg: #ff2f51;
  --color-btn-bg-hover: #b6002a;
  --color-btn-text: #fff;

  /* Dark panel border + glow — reusable on cta-card, hero panels, dark surfaces.
     Override any --panel-* atom on a section/element to vary the look.
     Apply effect: `border: 1px solid var(--panel-border); box-shadow: var(--panel-glow-shadow);` */
  --panel-border: rgba(255, 255, 255, 0.3);
  --panel-highlight: rgba(255, 255, 255, 0.6);
  --panel-glow-shadow:
    inset 0 0 6px var(--panel-highlight);
  --panel-glow-shadow-tiny: 0 0 1px var(--panel-highlight);
}

/* Surface + text + accent tokens. Defaults apply globally and on the newglow page;
   a future page can override any token via body[data-page="..."]. */
:root,
body[data-page="newglow"] {
  --surface-dark: #0a0a0a;
  --surface-cream: #faf6f1;
  --text-primary: #1a1a1a;
  --text-muted: #6b6b70;
  --accent-gradient: linear-gradient(90deg, #d98aa0 0%, #f4a8b8 15%, #ab89d6 80%, #8e6bc4 100%);
}

/* ============ FONTS (Hanken Grotesk loaded via <link> in newglow.html <head>) ============ */

/* ============ RESET ============ */

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

html {
  scrollbar-gutter: stable;
  /* Paint the overscroll (rubber-band) zone dark instead of the default
     white. The bounce area at the very top/bottom is painted with the
     <html> background, not <body>; body→canvas propagation is unreliable
     on iOS Safari during a hard fling, so set it explicitly here. */
  background-color: #1A1A1A;
  /* Block iOS double-tap-to-zoom AND pinch-zoom site-wide. `pan-x pan-y`
     explicitly lists allowed gestures (panning in both axes), which means
     anything NOT listed — pinch-zoom, double-tap-zoom — is disabled.
     iOS Safari ignores <meta viewport user-scalable=no> since iOS 10,
     so this CSS is the reliable way to lock zoom on Safari.
     Swiper rails can still pan natively because pan-x is allowed.
     Lightbox overrides with touch-action: none to fully lock gestures. */
  touch-action: pan-x pan-y;
}

body {
  font-family: var(--font-family-main);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
}

body:not(.glow-schedule-ready) #programStartDate,
body:not(.glow-schedule-ready) .js-start-date,
body:not(.glow-schedule-ready) .js-enroll-dt,
body:not(.glow-schedule-ready) .js-enroll-date,
body:not(.glow-schedule-ready) .js-deadline-date,
body:not(.glow-schedule-ready) .timer-clock:not([data-countdown="offer"]) {
  visibility: hidden;
}

main {
  opacity: 0;
  transition: opacity 0.18s ease;
}

body.page-ready main {
  opacity: 1;
}

h1 {
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 8px;
}

h2,
h3 {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.25px;
  line-height: 1.2;
  margin-bottom: 6px;
}

p,
li,
.faq-answer {
  font-family: var(--font-family-main);
}

p {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: var(--color-accent);
  transition: color 0.2s;
}

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

button {
  font: inherit;
  cursor: pointer;
}

input,
button {
  border: none;
  outline: none;
  font: inherit;
}

/* ============ HEADING HIGHLIGHT ============ */

.heading__highlight {
  font-weight: 700;
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============ BUTTONS ============ */

.btn {
  display: inline-block;
  background-image: var(--accent-gradient);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  padding: 25px 36px;
  border-radius: 999px;
  border: none;
  margin: 0 auto;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

/* Apply hover only on devices with real pointer (desktop mouse).
   iOS Safari otherwise emulates hover on first tap and eats the click —
   user has to tap twice for buttons to actually fire. */
@media (hover: hover) {
  .btn:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
    background-image: var(--accent-gradient);
  }
}

@media (max-width: 767px) {
  .btn {
    width: 100%;
    padding: 22px 28px;
    font-size: 17px;
  }
}

/* ============ CONTAINER ============ */

.container {
  width: 100%;
  padding: 0 12px;
  margin: 0 auto;
  max-width: 1700px;                 /* ≥1800 */
}
@media (max-width: 1799px) { .container { max-width: 1320px; } }  /* 1400–1799 */
@media (max-width: 1399px) { .container { max-width: 1140px; } }  /* 1200–1399 */
@media (max-width: 1199px) { .container { max-width: 960px;  } }  /* 992–1199  */
@media (max-width: 991px)  { .container { max-width: 720px;  } }  /* 768–991   */
@media (max-width: 767px)  { .container { max-width: 540px;  } }  /* 576–767   */
@media (max-width: 575px)  { .container { max-width: 100%;   } }  /* <576      */

/* Constrain the rail/cards cluster of every swiper to .container widths,
   centered. The section background stays full-bleed (cream edge-to-edge),
   only the viewport (rail + nav buttons) is bounded — keeps desktop layout
   from looking edge-to-edge "too wide" on big monitors. */
.image-scroller__viewport,
.video-scroller__viewport {
  margin-left: auto;
  margin-right: auto;
  max-width: 1700px;                 /* ≥1800 */
}
@media (max-width: 1799px) { .image-scroller__viewport, .video-scroller__viewport { max-width: 1320px; } }  /* 1400–1799 */
@media (max-width: 1399px) { .image-scroller__viewport, .video-scroller__viewport { max-width: 1140px; } }  /* 1200–1399 */
@media (max-width: 1199px) { .image-scroller__viewport, .video-scroller__viewport { max-width: 960px;  } }  /* 992–1199  */
@media (max-width: 991px)  { .image-scroller__viewport, .video-scroller__viewport { max-width: 720px;  } }  /* 768–991   */
@media (max-width: 767px)  { .image-scroller__viewport, .video-scroller__viewport { max-width: 540px;  } }  /* 576–767   */
@media (max-width: 575px)  { .image-scroller__viewport, .video-scroller__viewport { max-width: none;  } }  /* <576      */

/* ============ SHARED COMPONENTS ============ */

/* --- Main video container (used by Hero + expert-feature section) --- */
.main__video {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main__video-aspect {
  position: relative;
  width: 100%;
  max-width: 992px;
  background: #000;
  overflow: hidden;
  box-shadow: var(--color-shadow);
}

.main__video-aspect--rounded {
  border-radius: 12px;
}

.main__video--margin-free {
  margin: 0;
}

.main__video-iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  min-height: 480px;
  max-height: 90vh;
  border: 0;
  background: #000;
}

.video-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* --- Section intro (used by expert-feature + Steps + Letter (JS) + Guarantee (JS)) --- */
.section-intro {
  max-width: 980px;
  margin: 0 auto 80px;
  text-align: center;
}

.section-intro__title {
  font-size: 72px;
  line-height: 1.05;
  color: var(--text-primary);
  margin-bottom: 14px;
  font-weight: 700;
}

.section-intro__subtitle {
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1.45;
}

.section-intro--dark .section-intro__title {
  color: #fff;
}

.section-intro--dark .section-intro__subtitle {
  color: #ccc;
}

/* --- Consistency-level base (used by Program + Below-video) --- */
.consistency-level-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.consistency-level-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.consistency-level-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.consistency-level-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.consistency-level-subtitle {
  color: var(--color-text-darkgrey);
  font-size: 22px;
  margin-bottom: 16px;
}

.consistency-level-cover {
  width: 100%;
  margin-bottom: 32px;
}

.consistency-level-image {
  width: 100%;
  margin: 0 auto;
  display: block;
}

.consistency-level-list-box {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}

.consistency-level-list-title {
  text-align: left;
  font-weight: 700;
  margin-bottom: 12px;
}

.consistency-level-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.consistency-level-list-check {
  width: 23px;
  height: 23px;
  margin-top: 2px;
  flex-shrink: 0;
}

.consistency-level-list-item p {
  text-align: left;
  font-weight: 400;
  color: var(--color-text-darkgrey);
}

/* --- Consistency-feature base (used by Letter + Guarantee) --- */
.consistency-feature {
  position: relative;
  width: 100%;
  background: var(--color-bg-muted);
  margin-top: 96px;
  margin-bottom: 0;
  padding: 64px 0 36px 0;
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.consistency-feature--single {
  margin-bottom: 0px;
}

.consistency-feature__icon-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.consistency-feature__icon {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.consistency-feature__meta {
  font-size: 16px;
  color: var(--color-text-darkgrey);
  margin-bottom: 6px;
  margin-top: 20px;
  font-weight: 400;
}

.consistency-feature__logo {
  display: block;
  margin: 10px auto;
  max-width: 240px;
  height: auto;
}

.consistency-feature__title {
  font-size: 32px;
  font-weight: 700;
  margin: 10px 0 10px 0;
  color: #232323;
}

.consistency-feature__desc {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.consistency-feature__desc p {
  color: #5A5A5B;
  font-size: 22px;
  font-weight: 400;
  text-align: left;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .section-intro__title {
    font-size: 56px;
  }

.section-intro__subtitle {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .section-intro__title {
    font-size: 44px;
  }

.section-intro__subtitle {
    font-size: 18px;
  }

  .image-scroller .section-intro,
  .video-scroller .section-intro {
    margin-bottom: 32px;
    text-align: left;
  }
}

@media (max-width: 576px) {
  .section-intro__title {
    font-size: 38px;
  }

.section-intro__subtitle {
    font-size: 13px;
  }
}

/* ============ HERO SECTION ============ */

/* --- Hero structure --- */

.bg-black {
  background-color: var(--color-bg-dark);
}

.hero-section {
  position: relative;
  overflow: hidden;
}

/* A blurred disc is this gradient; drawn straight, it needs no offscreen surface. */
.hero-section__glow {
  position: absolute;
  border-radius: 999px;
}

.hero-section__glow--left {
  width: 1240px;
  height: 1240px;
  top: -520px;
  left: -520px;
  background: radial-gradient(farthest-side,
    rgba(244, 168, 184, 0.3617) 0%,
    rgba(244, 168, 184, 0.3427) 12.5%,
    rgba(244, 168, 184, 0.2846) 25%,
    rgba(244, 168, 184, 0.1959) 37.5%,
    rgba(244, 168, 184, 0.1051) 50%,
    rgba(244, 168, 184, 0.0419) 62.5%,
    rgba(244, 168, 184, 0.012) 75%,
    rgba(244, 168, 184, 0.0024) 87.5%,
    rgba(244, 168, 184, 0.0003) 100%);
}

.hero-section__glow--right {
  width: 1240px;
  height: 1240px;
  top: -303px;
  right: -492px;
  background: radial-gradient(farthest-side,
    rgba(201, 168, 232, 0.3617) 0%,
    rgba(201, 168, 232, 0.3427) 12.5%,
    rgba(201, 168, 232, 0.2846) 25%,
    rgba(201, 168, 232, 0.1959) 37.5%,
    rgba(201, 168, 232, 0.1051) 50%,
    rgba(201, 168, 232, 0.0419) 62.5%,
    rgba(201, 168, 232, 0.012) 75%,
    rgba(201, 168, 232, 0.0024) 87.5%,
    rgba(201, 168, 232, 0.0003) 100%);
}

.hero-section__glow--bottom {
  width: 1140px;
  height: 1140px;
  bottom: -430px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(farthest-side,
    rgba(142, 107, 196, 0.2351) 0%,
    rgba(142, 107, 196, 0.218) 12.5%,
    rgba(142, 107, 196, 0.1714) 25%,
    rgba(142, 107, 196, 0.1108) 37.5%,
    rgba(142, 107, 196, 0.0567) 50%,
    rgba(142, 107, 196, 0.0223) 62.5%,
    rgba(142, 107, 196, 0.0066) 75%,
    rgba(142, 107, 196, 0.0014) 87.5%,
    rgba(142, 107, 196, 0.0002) 100%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content minmax(0, 732px);
  justify-content: center;
  align-items: center;
  gap: 118px;
  margin: 72px auto 142px;
}

.hero__media {
  display: flex;
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
}

/* --- Navbar --- */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0px;
}

.navbar__logo {
  height: 35px;
  width: 152px;
  filter: brightness(0) invert(1);
}

.navbar__support {
  display: flex;
  align-items: center;
}

/* --- Support tooltip --- */

.support-tooltip {
  position: relative;
  display: inline-block;
}

.support-tooltip__trigger {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  box-shadow:
    inset 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.support-tooltip__trigger::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0) 76%);
  filter: blur(4px);
  z-index: -1;
}

.support-tooltip__mark {
  display: block;
  margin: auto;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.support-tooltip__content {
  position: absolute;
  top: 0px;
  right: 50px;
  min-width: unset;
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  padding: 11px 32px;
  border-radius: 6px;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 10;
  white-space: nowrap;
}

.support-tooltip:hover .support-tooltip__content,
.support-tooltip__trigger:focus + .support-tooltip__content {
  opacity: 1;
  visibility: visible;
}

.support-tooltip__text {
  margin-bottom: 0;
  font-size: 14px;
}

.support-tooltip__link {
  display: inline;
  font-size: 14px;
  word-break: break-all;
  color: var(--color-link-hover);
  text-decoration: underline;
  font-weight: bold;
}

/* --- Hero media (video) --- */

.hero__video {
  margin: 0;
  width: auto;
  max-width: none;
}

.hero__video-aspect {
  position: relative;
  width: auto;
  aspect-ratio: 1000 / 1788;
  height: min(569px, 72vh);
  max-height: 569px;
  border-radius: 24px;
  overflow: hidden;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.25), inset -1px -2px 2px rgba(255, 255, 255, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.hero__video-aspect .main__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  cursor: pointer;
}

/* Fill the visible video box without overscaling — no edge cropping, and the
   native Bunny control bar stays inside the frame (so click-to-pause works).
   (Previously forced a 9/16 over-sized frame that the box clipped.) */
.hero__video-crop-frame {
  position: absolute;
  inset: 0;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 18px 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}

.hero__video-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.hero__video-overlay > * {
  pointer-events: none;
}

.hero__video-overlay-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.hero__video-overlay-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.hero__video-kicker {
  display: block;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 12px;
}

.hero__video-label {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.12;
}

.hero__video-play {
  position: relative;
  flex: 0 0 75px;
  width: 75px;
  height: 75px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  z-index: 1;
  background: radial-gradient(
    circle at 50% 36%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(210, 193, 176, 0.2) 30%,
    rgba(126, 96, 68, 0.28) 68%,
    rgba(67, 47, 31, 0.34) 100%
  );
  box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.hero__video-play--large {
  flex-basis: 136px;
  width: 136px;
  height: 136px;
}

.hero__video-play-icon {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 33px solid #ffffff;
}

.hero__video-play--large .hero__video-play-icon {
  margin-left: 8px;
  border-top-width: 24px;
  border-bottom-width: 24px;
  border-left-width: 39px;
}

/* Was a small gradient under blur(100px); this is the same halo, painted directly. */
.hero__video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 691px;
  height: 691px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(farthest-side,
    rgba(237, 229, 220, 0.0108) 0%,
    rgba(237, 229, 220, 0.0098) 12.5%,
    rgba(237, 229, 219, 0.0075) 25%,
    rgba(237, 228, 219, 0.0048) 37.5%,
    rgba(237, 228, 219, 0.0026) 50%,
    rgba(237, 228, 219, 0.0011) 62.5%,
    rgba(236, 228, 219, 0.0004) 75%,
    rgba(236, 228, 218, 0.0001) 87.5%,
    rgba(236, 227, 218, 0) 100%);
  z-index: -1;
}

/* --- Hero content --- */

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 700px;
}

.hero__heading {
  width: 100%;
  padding: 0;
  margin: 0 0 54px;
  text-align: left;
}

.hero__heading h1 {
  color: #fff;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 24px;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.hero__heading p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.hero__subheading {
  color: #fff;
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 36px;
}

.hero__lede {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
}

.hero__actions {
  display: flex;
  align-items: stretch;
  gap: 28px;
  justify-content: flex-start;
}

/* Visual swap of hero CTA + countdown for desktop and @max-1399:
   timer on the LEFT, button on the RIGHT. Resets at @max-1199 where the
   actions stack column-wise and we want source order (button above timer). */
.hero__actions .hero__countdown-cards { order: 1; }
.hero__actions .hero__cta { order: 2; }

.hero__actions-meta {
  display: none;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 299px;
  min-height: 69px;
  padding: 22px 34px;
  white-space: nowrap;
}

.hero__cta-arrow {
  font-size: 24px;
  line-height: 1;
  transform: translateY(-1px);
}

/* --- Hero countdown card --- */

.hero__countdown-cards {
  display: grid;
  grid-template-columns: repeat(4, 70px);
  gap: 10px;
}

.hero__countdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 77px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 248, 248, 0.08);
  gap: 10px;
}

.hero__countdown-card .cd {
  color: #fff;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.5%;
}

.hero__countdown-card .cd-label {
  color: #ccc;
  font-size: 10px;
  letter-spacing: 10%;
  text-transform: uppercase;
}

/* --- Hero countdown timer (base + --hero modifier) --- */

.countdown-timer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 48px 0 32px 0;
}

.countdown-timer__inner {
  color: var(--color-text-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 24px 32px;
  gap: 32px;
  width: fit-content;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.09);
}

.countdown-timer__label {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.countdown-timer__divider {
  width: 1px;
  height: 40px;
  background: #ccc;
  margin-left: 0;
}

.countdown-timer .timer-clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.countdown-timer .timer-clock .cd {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-light);
  text-align: center;
}

.countdown-timer .timer-clock .cd-label {
  color: #bcbcbc;
  font-size: 10px;
  font-weight: 400;
}

.countdown-timer--hero {
  width: auto;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  margin-bottom: 24px;
}

.countdown-timer--hero .countdown-timer__inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 10px 34px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(255, 255, 255, 0.22);
}

.countdown-timer--hero .countdown-timer__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.countdown-timer--hero .countdown-timer__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f2a6b6;
  box-shadow: 0 0 14px rgba(242, 166, 182, 0.7);
  animation: hero-dot-blink 1s steps(1, end) infinite;
}

.countdown-timer--hero .countdown-timer__divider {
  display: block;
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.countdown-timer--hero .timer-clock {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 0;
  white-space: nowrap;
}

.countdown-timer--hero .timer-clock .cd {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.countdown-timer--hero .timer-clock .cd-label {
  margin: 0 8px 0 1px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}

.countdown-timer--hero .timer-clock > :last-child {
  margin-right: 0;
}

/* ============ HERO PRESS STRIP ============ */
.brands__container {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.brands__logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.brands__image {
  height: 28px;
  width: auto;
}

.hero__press-strip {
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
}

.hero__press-strip .container {
  display: flex;
  justify-content: center;
}

.hero__press-strip .brands__container {
  padding: 34px 0;
}

.hero__press-strip img {
  opacity: 1;
}


@keyframes hero-dot-blink {
  0%,
  49.999% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.3;
  }
}

/* --- Hero responsive --- */

@media (max-width: 1399px) {
  .hero__grid {
    grid-template-columns: max-content minmax(0, 640px);
    gap: 60px;
    margin: 40px auto 70px;
  }

  .hero__video-aspect {
    height: min(540px, 68vh);
    max-height: 540px;
  }

  .hero__heading h1 {
    font-size: 64px;
    line-height: 1;
  }

  .hero__subheading {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .hero__lede {
    font-size: 17px;
  }

  .hero__actions {
    gap: 22px;
  }

  .hero__countdown-card {
    min-height: 74px;
  }

  .hero__countdown-card .cd {
    font-size: 30px;
  }
}

@media (max-width: 1199px) {
  .countdown-timer--hero {
    margin-bottom: 10px;
  }

  .hero__grid {
    grid-template-columns: max-content minmax(0, 560px);
    justify-items: stretch;
    gap: 20px;
    margin: 45px auto 70px;
  }

  .hero__heading {
    width: 100%;
    max-width: 560px;
    margin-bottom: 12px;
  }

  .hero__heading h1 {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 15px;
  }

  .hero__subheading {
    font-size: 20px;
    margin-bottom: 18px;
  }

  .hero__lede {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 16px;
    padding: 18px 16px 16px;
    border-radius: 22px;
    border: 1px solid #F4A8B84D;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 18px rgba(255, 255, 255, 0.08),
      0 18px 40px rgba(0, 0, 0, 0.24);
  }

  /* Reset desktop swap — at @max-1199 actions stack column-wise, want source order. */
  .hero__actions .hero__countdown-cards,
  .hero__actions .hero__cta {
    order: 0;
  }

  .hero__actions-meta {
    display: block;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.24),
      0 0 24px rgba(225, 172, 226, 0.18);
  }

  .hero__cta {
    width: 100%;
    min-width: 220px;
    min-height: 63px;
    padding: 20px 28px;
    font-size: 18px;
  }

  .hero__countdown-cards {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: space-between;
  }

  .hero__countdown-card {
    min-height: 56px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08);
  }

  .hero__countdown-card .cd {
    font-size: 22px;
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.55),
      0 0 18px rgba(255, 255, 255, 0.28);
  }

  .hero__countdown-card .cd-label {
    font-size: 8px;
  }
}

@media (max-width: 991px) {
  .hero-section {
    min-height: auto;
  }

  .navbar {
    padding: 24px 0;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: normal;
    justify-items: center;
    align-items: start;
    gap: 24px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
  }

  .hero__content {
    display: contents;
  }

  .countdown-timer--hero {
    order: 1;
    width: 100%;
    margin: 0;
    justify-content: center;
  }

  .countdown-timer--hero .countdown-timer__inner {
    width: auto;
    max-width: 100%;
    justify-content: center;
    padding: 8px 24px;
  }

  .countdown-timer--hero .countdown-timer__label,
  .countdown-timer--hero .timer-clock .cd,
  .countdown-timer--hero .timer-clock .cd-label {
    font-size: 16px;
  }

  .hero__heading {
    order: 2;
    max-width: 520px;
    margin: 0;
    text-align: left;
  }

  .hero__heading h1 {
    font-size: 52px;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 12px;
  }

  .hero__subheading {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 14px;
  }

  .hero__lede {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 0;
    padding: 0;
    text-align: left;
  }

  .hero__media {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .hero__video {
    width: 100%;
    max-width: 520px;
  }

  .hero__video-aspect {
    width: 100%;
    height: auto;
    max-width: 520px;
    max-height: none;
    aspect-ratio: 1000 / 1788;
    border-radius: 24px;
  }

  .hero__video-overlay {
    padding: 0 16px 20px;
  }

  .hero__video-overlay-content {
    gap: 12px;
  }

  .hero__video-play {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }

  .hero__video-play::before {
    width: 292px;
    height: 292px;
    background: radial-gradient(farthest-side,
      rgba(238, 230, 221, 0.0497) 0%,
      rgba(237, 229, 221, 0.0447) 12.5%,
      rgba(237, 229, 220, 0.0326) 25%,
      rgba(237, 228, 219, 0.0192) 37.5%,
      rgba(236, 228, 218, 0.0091) 50%,
      rgba(236, 227, 217, 0.0035) 62.5%,
      rgba(235, 226, 216, 0.0011) 75%,
      rgba(234, 225, 215, 0.0003) 87.5%,
      rgba(234, 224, 213, 0) 100%);
  }

  .hero__video-play-icon {
    margin-left: 4px;
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 26px;
  }

  .hero__video-kicker {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .hero__video-label {
    font-size: 14px;
  }

  .hero__actions {
    order: 4;
  }

  .hero__cta {
    width: 100%;
    min-width: 260px;
    min-height: 58px;
    padding: 18px 28px;
    gap: 8px;
  }

  .hero__cta-arrow {
    font-size: 22px;
  }

  .hero__countdown-cards {
    gap: 10px;
  }

  .hero__countdown-card {
    min-height: 70px;
    border-radius: 12px;
    gap: 8px;
  }

  .hero__countdown-card .cd {
    font-size: 24px;
  }

  .hero__countdown-card .cd-label {
    font-size: 10px;
  }
  .hero__actions {
    max-width: 520px;
  }
  .hero__press-strip {
    border-top: none;
  }
}

@media (max-width: 767px) {
  .navbar {
    padding: 24px 0;
  }

  .hero__grid {
    gap: 16px;
    margin: 18px auto 0;
    padding: 0 0 10px;
  }

  .hero__video-overlay {
    inset: 0;
    padding: 0 16px 16px;
    max-width: none;
  }

  .hero__heading {
    max-width: 420px;
  }

  .hero__heading h1 {
    font-size: 40px;
    line-height: 1;
    letter-spacing: normal;
  }

  .hero__subheading {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 14px;
  }

  .hero__lede {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 20px;
    padding: 0;
    text-align: left;
  }

  .hero__video {
    max-width: 420px;
  }

  .hero__video-aspect {
    max-width: 420px;
  }

  .hero__cta {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 18px 22px;
    font-size: 18px;
  }

  .hero__cta-arrow {
    font-size: 24px;
  }

  .hero__countdown-cards {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
  }

  .hero__countdown-card {
    min-height: 68px;
  }
  
  .hero__press-strip .brands__container {
    padding: 12px 12px 48px;
  }

  .hero__press-strip .brands__image {
    height: 20px;
  }

  .hero__press-strip .brands__logos {
    row-gap: 10px;
  }
  .hero__actions {
    max-width: 420px;
  }
}

@media (max-width: 576px) {
  .hero__grid {
    margin: 0;
  }

  .hero__subheading {
    font-size: 13px;
  }

  .countdown-timer--hero .countdown-timer__inner {
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
  }

  /* Press strip — cap brand logos */
  .hero__press-strip img {
    max-height: 14px;
  }
}

@media (max-width: 500px) {
  .hero__subheading {
    margin-bottom: 7px;
  }

  .hero__lede {
    margin-bottom: 0;
  }
}

/* ============ PROGRAM ============ */
/* --- .program-section (Program section) --- */
.program-section {
  background: var(--surface-cream);
  padding: 104px 0 85px;
}

.program-section .consistency-level-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 86px;
  padding: 0 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.program-section .consistency-level-icon-wrap {
  display: none;
}

.program-section .consistency-level-title,
.program-section .consistency-level-subtitle,
.program-section .consistency-level-cta,
.program-section .consistency-level-cover,
.program-section .consistency-level-list-box {
  grid-column: 1 / -1;
  text-align: center;
}

.program-section .consistency-level-title {
  font-size: 72px;
  line-height: 1.04;
  margin-bottom: 25px;
  letter-spacing: -2px;
}

.program-section .consistency-level-subtitle {
  max-width: 938px;
  margin: 0 auto 38px;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 35px;
  letter-spacing: -0.5px;
}

.program-section .consistency-level-cover {
  margin-bottom: 6px;
}

.program-section .consistency-level-image {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.program-section .consistency-level-list-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 150px;
  align-items: center;
  text-align: left;
}

.program-section .consistency-level-list {
  display: contents;
  list-style: none;
}

.program-section .consistency-level-list-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 18px 0 24px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

.program-section .consistency-level-list-copy {
  display: grid;
  gap: 8px;
}

.program-section .consistency-level-list-item-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.program-section .consistency-level-list-item p {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

.program-section .consistency-level-list-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  align-self: start;
  margin-top: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7d7e2 0%, #edd7f1 100%);
}

.program-section .consistency-level-list-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 4px;
  border-left: 2px solid #191919;
  border-bottom: 2px solid #191919;
  transform: translate(-50%, -60%) rotate(-45deg);
}

.program-section .consistency-level-cta-slot {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.program-section .consistency-level-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  margin-top: 0;
  margin-left: 0;
  padding: 20px 32px;
}

.program-section .consistency-level-cta-arrow {
  font-size: 24px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (max-width: 1199px) {
  .program-section {
    padding: 40px 0 60px;
  }

  .program-section .consistency-level-box {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 12px;
  }

  .program-section .consistency-level-title {
    order: -1;
  }

  .program-section .consistency-level-subtitle {
    order: -1;
  }

  .consistency-level-list-item {
    margin: 0;
  }

  .program-section .consistency-level-image {
    max-width: 680px;
  }

  .program-section .consistency-level-list-box {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .program-section .consistency-level-list,
  .program-section .consistency-level-cta-slot {
    max-width: none;
  }

  .program-section .consistency-level-cta-slot {
    padding-top: 28px;
  }

  .program-section .consistency-level-cta {
    margin-top: 0;
  }
}

@media (max-width: 991px) {
  .program-section .consistency-level-title {
    font-size: 56px;
  }

  .program-section .consistency-level-subtitle {
    font-size: 18px;
    margin-bottom: 38px;
  }
}

@media (max-width: 767px) {
  .program-section {
    padding-top: 36px;
    padding-bottom: 36px;
    border-radius: 22px;
  }

  .program-section .consistency-level-box {
    gap: 0 16px;
    padding: 0 6px;
    border-radius: 0;
  }

  .program-section .consistency-level-image {
    max-width: 280px;
  }

  .program-section .consistency-level-cover {
    margin-bottom: 6px;
  }

  .program-section .consistency-level-title {
    font-size: 40px;
    margin-bottom: 14px;
  }

  .program-section .consistency-level-subtitle {
    margin-bottom: 34px;
    font-size: 12px;
    line-height: 1.4;
  }

  .program-section .consistency-level-list-item {
    display: flex;
    gap: 16px;
    padding: 24px 0;
  }

  .program-section .consistency-level-list-copy {
    gap: 2px;
  }

  .program-section .consistency-level-list-item-title {
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  .program-section .consistency-level-list-item p {
    font-size: 12px;
    line-height: 1.45;
  }

  .program-section .consistency-level-cta-slot {
    padding-top: 32px;
  }

  .program-section .consistency-level-cta {
    width: 100%;
    min-height: 42px;
    padding: 12px 14px;
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .program-section .consistency-level-title {
    text-align: left;
  }

  .program-section .consistency-level-subtitle {
    text-align: left;
  }
}

/* ============ EXPERT-FEATURE SECTION ============ */
/* --- testimonials__video base (expert-feature only) --- */
.testimonials__video {
  position: relative;
  padding: 20px 0 20px;
  background: var(--color-bg-lightgrey);
  margin-bottom: 10px;
}

.testimonials__video-grid {
  padding: 84px 20px 88px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
}

/* --- Press grid (Podcasts / Interviews / Press cards above the expert-feature video grid) --- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 415px));
  max-width: 100%;
  gap: 15px;
  padding-bottom: 80px;
  /* justify-content: centers the whole grid block in the container (matters
     on desktop where 3 tracks total < container width).
     justify-items:   centers each card within its track (matters on mobile
     where the single 1fr track is wider than the 415px card max-width). */
  justify-content: center;
  justify-items: center;
}

.press-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 40% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #fff;
  max-width: 415px;
}

.press-card__label {
  color: #D98AA0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.press-card__logo {
  display: block;
  max-width: 216px;
  max-height: 50px;
  width: auto;
  height: auto;
  margin: 0 0 44px;
  object-fit: contain;
  object-position: left center;
}

.press-card__quote {
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 44px;
  flex: 1 1 auto;
}

.press-card__attribution {
  position: relative;
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* Fading pink line above the attribution (was on label, moved per design). */
.press-card__attribution::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(217, 138, 160, 0.5), rgba(217, 138, 160, 0));
}

/* Divider below the press-grid: horizontal pink line fading at BOTH edges
   (transparent → pink → transparent). */
.press-divider {
  height: 1px;
  margin: 0 auto 80px;
  background: linear-gradient(
    to right,
    rgba(217, 138, 160, 0) 0%,
    rgba(217, 138, 160, 0.55) 50%,
    rgba(217, 138, 160, 0) 100%
  );
}

@media (max-width: 1199px) {
  .press-card__logo {
    margin: 0 0 24px;
  }

  .press-card__quote {
    font-size: 16px;
  }
  .press-card__quote {
    margin: 0 0 24px;
  }
}

@media (max-width: 991px) {
  .press-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 32px;
  }

  .press-card {
    min-height: 0;
    padding: 28px 24px;
  }

  .press-card__logo {
    max-height: 52px;
    margin-bottom: 22px;
  }

  .press-card__quote {
    font-size: 17px;
  }
  .press-divider {
    margin: 0 auto 30px;
  }
}

/* --- .expert-feature-section section overrides --- */

.expert-feature-section .section-intro {
  max-width: 100%;
}

.expert-feature-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: var(--surface-dark);
}

.expert-feature-section::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1640px;
  height: 1640px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(farthest-side,
    rgba(142, 107, 196, 0.2949) 0%,
    rgba(142, 107, 196, 0.2886) 12.5%,
    rgba(142, 107, 196, 0.262) 25%,
    rgba(142, 107, 196, 0.2027) 37.5%,
    rgba(142, 107, 196, 0.1206) 50%,
    rgba(142, 107, 196, 0.0505) 62.5%,
    rgba(142, 107, 196, 0.014) 75%,
    rgba(142, 107, 196, 0.0025) 87.5%,
    rgba(142, 107, 196, 0.0003) 100%);
  pointer-events: none;
  z-index: 0;
}

.expert-feature-section > * {
  position: relative;
  z-index: 1;
}

.expert-feature-section .testimonials__video-grid {
  max-width: 1192px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 150px;
}

.expert-feature-section .video-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.expert-feature-section .main__video-aspect--rounded {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  background: #0c0c0f;
  cursor: pointer;
}

.expert-feature-section .main__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  cursor: pointer;
}

.video-quote-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  padding: 26px 28px 30px;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  transition: opacity 0.18s ease;
}

.video-quote-overlay > * {
  pointer-events: none;
}

.video-quote-overlay__top {
  max-width: 72%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
}

.video-quote-overlay__top--spacer {
  min-height: 40px;
  visibility: hidden;
}

.video-quote-overlay .hero__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-quote-overlay__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: end;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.46);
}

.video-quote-overlay__eyebrow {
  color: #eea4b6;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.video-quote-overlay__quote {
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  font-family: "Instrument Serif", "Times New Roman", serif;
}

.video-quote-overlay__author {
  color: rgba(255, 255, 255);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

/* Hide the consistency-feature__icon-wrap inside testimonials__video (legacy) */
.testimonials__video .consistency-feature__icon-wrap {
  display: none;
}

@media (max-width: 1199px) {
  .expert-feature-section .testimonials__video-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 60px;
  }

  .video-quote-overlay__top {
    font-size: 15px;
  }

  .video-quote-overlay__quote {
    font-size: 30px;
  }

  .video-quote-overlay__author {
    font-size: 15px;
  }
  .section-intro {
    margin: 0 auto 32px;
  }
}

@media (max-width: 991px) {
  .expert-feature-section .testimonials__video-grid {
    max-width: 480px;
    gap: 32px;
  }

  .expert-feature-section .section-intro__title {
    font-size: 56px;
  }

  .expert-feature-section .section-intro__subtitle {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .expert-feature-section {
    font-size: 45px;
    line-height: 1.2;
    padding-top: 52px;
    padding-bottom: 56px;
  }

  .expert-feature-section::before {
    display: none;
  }

  .expert-feature-section .section-intro {
    max-width: 420px;
    margin: 0 auto 22px;
    padding: 0 10px;
    text-align: left;
  }

  .expert-feature-section .section-intro__title,
  .expert-feature-section .section-intro__subtitle {
    text-align: left;
  }


  .expert-feature-section .testimonials__video-grid {
    max-width: 420px;
    grid-template-columns: 1fr;
  }

  .video-quote-overlay {
    padding: 22px 20px 24px;
  }

  .video-quote-overlay__top {
    max-width: 100%;
    font-size: 13px;
  }

  .video-quote-overlay__copy {
    max-width: 100%;
    gap: 10px;
  }

  .video-quote-overlay__eyebrow {
    font-size: 10px;
  }

  .video-quote-overlay__quote {
    font-size: 24px;
  }

  .video-quote-overlay__author {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .expert-feature-section .section-intro {
    margin-bottom: 32px;
  }

  .expert-feature-section .section-intro__title {
    font-size: 45px;
    line-height: 1.2;
  }

  .expert-feature-section .section-intro__subtitle {
    font-size: 14px;
    line-height: 1.4;
  }

  .expert-feature-section .main__video-aspect--rounded {
    border-radius: 16px;
  }

  .video-quote-overlay {
    padding: 12px 12px 14px;
  }

  .video-quote-overlay__top {
    font-size: 9px;
  }

  .video-quote-overlay .hero__video-play {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }
}

/* ============ STEPS (.steps-section) ============ */
.steps-section {
  padding: 84px 0 88px;
  background: #fff;
}

.steps-section .section-intro {
  max-width: 860px;
  margin-bottom: 82px;
}

.steps-section .section-intro__title {
  font-size: 72px;
  line-height: 1.05;
}

.steps-section .section-intro__subtitle {
  font-size: 24px;
  color: #6f6f75;
}

.steps-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(465px, 1fr));
  gap: 60px 138px;
  margin: 0 auto;
}

.step-card {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  column-gap: 18px;
  align-items: start;
  max-width: 465px;
  justify-self: center;
}

.step-card::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(142, 107, 196, 0.34) 0%,
    rgba(142, 107, 196, 0.22) 58%,
    rgba(142, 107, 196, 0.08) 82%,
    rgba(142, 107, 196, 0) 100%
  );
}

.step-card__number {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 2px solid #8f6ec7;
  color: #8e6bc4;
  font-size: 20px;
  font-weight: 500;
  display: grid;
  place-items: center;
}

.step-card__title {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 12px;
}

.step-card__text {
  color: var(--text-primary);
  max-width: 430px;
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 26px;
}

.step-card__meta {
  color: #8e6bc4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.step-card__meta-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.step-card__meta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.steps-section__cta {
  margin-top: 48px;
  text-align: center;
}

.steps-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 550px;
  min-height: 76px;
  padding: 22px 44px;
}

.steps-section__button-arrow {
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (max-width: 1199px) {
  .steps-section__grid {
    grid-template-columns: 1fr;
  }

  .step-card {
    min-height: auto;
  }

  .steps-section .section-intro {
    margin-bottom: 54px;
  }

  .steps-section .section-intro__subtitle {
    font-size: 22px;
  }

  .steps-section__grid .step-card:nth-child(1) {
    order: 1;
  }

  .steps-section__grid .step-card:nth-child(2) {
    order: 3;
  }

  .steps-section__grid .step-card:nth-child(3) {
    order: 2;
  }

  .steps-section__grid .step-card:nth-child(4) {
    order: 4;
  }

  .steps-section__button {
    min-width: 0;
    width: 100%;
    max-width: 560px;
  }
}

@media (max-width: 991px) {
  .steps-section .section-intro__title {
    font-size: 56px;
  }

  .steps-section .section-intro__subtitle {
    font-size: 20px;
  }

  .steps-section__grid {
    gap: 42px 48px;
  }

  .step-card__title {
    font-size: 24px;
  }

  .step-card__text {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .steps-section {
    padding-top: 48px;
    padding-bottom: 50px;
    border-radius: 22px;
  }

  .steps-section .section-intro {
    margin-bottom: 32px;
  }

  .steps-section .section-intro__title {
    font-size: 50px;
  }

  .steps-section .section-intro__subtitle {
    font-size: 17px;
  }

  .steps-section__grid {
    gap: 40px;
  }

  .step-card__title {
    font-size: 25px;
    margin-bottom: 12px;
  }

  .step-card__text {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 12px;
  }

  .step-card__meta {
    font-size: 12px;
  }

  .steps-section__cta {
    margin-top: 40px;
  }

  .steps-section__button {
    min-height: 42px;
    padding: 12px 20px;
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .steps-section .section-intro__title {
    font-size: 45px;
    max-width: 365px;
    text-align: left;
    margin: 0 auto 14px;
    line-height: 1;
  }

  .steps-section .section-intro__subtitle {
    font-size: 14px;
    text-align: left;
    max-width: 365px;
    margin: 0 auto 32px;
  }

  .step-card {
    max-width: 365px;
  }
}

/* ============ QUALIFY (.qualify-section + modal + payment) ============ */
/* --- Email qualify banner base (banner is hidden via override below) --- */
.email-qualify-section {
  margin: 30px 0;
  padding: 0;
}

/* --- Qualify modal body lock (used by newglow quiz launcher) --- */

body.qualify-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  left: 0;
  right: 0;
}

/* --- Payment elements (used in modal offers + standalone timer sections) --- */
.payment-offer-box {
  width: 340px;
  padding: 36px 26px 24px 26px;
  background: #fff;
  border-radius: 11px;
  border: 2px solid #e7e7e7;
  box-shadow: 0 2px 14px 0 rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 12px;
}

.payment-offer-box--light {
  border: 2px solid #e49d58;
  box-shadow: 0 0 20px 3px #d4781b;
  transition: box-shadow 0.25s, border-color 0.25s;
  position: relative;
  z-index: 2;
}

.payment-offer-box--light:hover,
.payment-offer-box--light:focus-within {
  border-color: #e49d58;
  box-shadow: 0 0 36px 7px #d4781b;
}

.payment-box-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.payment-offer-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0;
}

.payment-offer-subtitle {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 26px;
}

.payment-offer-divider {
  height: 1px;
  width: 80%;
  background-color: #ccc;
}

.payment-offer-price-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.payment-offer-oldprice-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

.payment-offer-oldprice {
  position: relative;
  color: var(--color-text-grey);
  font-size: 22px;
  font-weight: 400;
  padding: 0 4px;
  display: inline-block;
}

.payment-offer-oldprice::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 53%;
  height: 2px;
  width: 90%;
  margin: 0 auto;
  background: var(--color-text-grey);
  pointer-events: none;
}

.payment-offer-newprice-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.payment-offer-newprice {
  font-size: 42px;
  font-weight: 600;
  display: inline-block;
}

.payment-offer-newprice-unit {
  font-size: 25px;
  font-weight: 600;
  margin-left: 2px;
}

.payment-offer-aftertrial {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

.payment-btn {
  width: 100%;
  max-width: 260px;
  background: #e49d58;
  color: #fff;
  font-size: var(--font-size-btn);
  font-weight: 700;
  border-radius: 7px;
  padding: 16px 0;
  margin: 10px 0 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  text-align: center;
  transition: background 0.19s;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.payment-btn:hover {
  background: #d4781b;
  color: #fff;
}

.payment-methods-row {
  margin: 30px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-methods-img {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.payment-tax-info {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-grey);
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 80%;
}

.payment-secure-info {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 7px;
  color: var(--color-text-grey);
  font-size: 16px;
}

.payment-secure-lock {
  width: 17px;
  height: 17px;
  display: inline-block;
}

.payment-timer-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 30px auto 0 auto;
  text-align: center;
}

.payment-timer-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 12px;
}

.payment-timer-title.heading__highlight {
  font-size: 30px;
}

.payment-timer-block .timer-clock {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
}

.payment-timer-block .timer-clock .cd {
  font-size: 35px;
  font-weight: 700;
  margin: 0 2px 0 0;
  text-align: center;
}

.payment-timer-block .timer-clock .cd-label {
  color: var(--color-text-grey);
  font-size: 24px;
  font-weight: 400;
  margin-right: 7px;
}

/* --- .qualify-section section --- */
.qualify-section {
  position: relative;
  overflow: hidden;
  padding: 84px 0 88px;
  margin: 0;
  background: var(--surface-dark);
}

.qualify-section .container {
  position: relative;
  z-index: 1;
}

.qualify-section::before,
.qualify-section::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.qualify-section::before {
  width: 1240px;
  height: 1240px;
  left: -440px;
  top: -520px;
  background: radial-gradient(farthest-side,
    rgba(244, 168, 184, 0.2261) 0%,
    rgba(244, 168, 184, 0.2142) 12.5%,
    rgba(244, 168, 184, 0.1779) 25%,
    rgba(244, 168, 184, 0.1224) 37.5%,
    rgba(244, 168, 184, 0.0657) 50%,
    rgba(244, 168, 184, 0.0262) 62.5%,
    rgba(244, 168, 184, 0.0075) 75%,
    rgba(244, 168, 184, 0.0015) 87.5%,
    rgba(244, 168, 184, 0.0002) 100%);
}

.qualify-section::after {
  width: 1240px;
  height: 1240px;
  right: -400px;
  bottom: -400px;
  background: radial-gradient(farthest-side,
    rgba(142, 107, 196, 0.2261) 0%,
    rgba(142, 107, 196, 0.2142) 12.5%,
    rgba(142, 107, 196, 0.1779) 25%,
    rgba(142, 107, 196, 0.1224) 37.5%,
    rgba(142, 107, 196, 0.0657) 50%,
    rgba(142, 107, 196, 0.0262) 62.5%,
    rgba(142, 107, 196, 0.0075) 75%,
    rgba(142, 107, 196, 0.0015) 87.5%,
    rgba(142, 107, 196, 0.0002) 100%);
}

.qualify-section__layout {
  max-width: 900px;
  margin: 0 auto;
}

.cta-card {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 64px 54px;
  border-radius: 40px;
  text-align: center;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--panel-glow-shadow-tiny);
}

.cta-card__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
}

.cta-card__eyebrow,
.cta-card__zone,
.cta-card__label {
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}

.cta-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  letter-spacing: 1px;
}

.cta-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f4a8b8;
}

.cta-card__zone,
.cta-card__label {
  color: #f4a8b8;
  font-weight: 500;
  letter-spacing: 1px;
}

.cta-card__label {
  margin-bottom: 16px;
}

.cta-card__date {
  color: #fff;
  font-size: 64px;
  margin-bottom: 110px;
}

.cta-card__text {
  margin: 0 auto 34px;
  color: #d5d2d8;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: 0px;
}

.cta-card__text strong {
  color: #fff;
}

.cta-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  min-height: 86px;
  padding: 22px 32px;
  border-radius: 999px;
}

.cta-card__button-arrow {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  transform: translateY(2px);
}

@media (max-width: 991px) {
  .cta-card {
    max-width: 100%;
    padding: 0 28px 42px;
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-glow-shadow);
  }

  .cta-card__topline {
    padding: 24px 30px 20px;
    margin: 0 -30px 40px;
    border-bottom: 1px solid var(--panel-border);
    box-shadow: var(--panel-glow-shadow);
  }

  .cta-card__date {
    margin-bottom: 44px;
    font-size: 48px;
  }
  .cta-card__button {
    max-width: 90%;
    min-height: 64px;
    padding: 18px 28px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .qualify-section {
    padding-top: 44px;
    padding-bottom: 48px;
  }

  .qualify-section::before,
  .qualify-section::after {
    display: none;
  }

  .qualify-section__layout {
    gap: 34px;
  }

  .cta-card {
    max-width: 360px;
    padding: 0 26px 28px;
    border-radius: 20px;
  }

  .cta-card__topline {
    margin: 0 -30px 20px;
    padding: 16px 20px 14px;
  }

  .cta-card__eyebrow {
    font-size: 10px;
  }
  .cta-card__zone {
    font-size: 12px;
  }

  .cta-card__label {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .cta-card__dot {
    width: 8px;
    height: 8px;
  }

  .cta-card__date {
    font-size: 32px;
    margin-bottom: 23px;
  }

  .cta-card__text {
    margin-bottom: 37px;
    font-size: 13px;
    line-height: 1.4;
  }

  .cta-card__button {
    max-width: none;
    min-height: 42px;
    padding: 12px 18px;
    font-size: 12px;
    gap: 8px;
  }

  .cta-card__button-arrow {
    font-size: 16px;
    transform: translateY(1px);
  }

  /* Payment mobile (merged 576 + 768 — 576 wins where overlap) */
  .payment-offer-box {
    padding: 20px 2vw 18px 2vw;
  }

  .payment-offer-title {
    font-size: 18px;
  }

  .payment-offer-newprice {
    font-size: 34px;
  }

  .payment-methods-row {
    margin: 20px auto 0 auto;
  }

  .payment-timer-block {
    margin-top: 16px;
  }

  .payment-timer-block .timer-clock {
    gap: 2px;
  }

  .payment-timer-block .timer-clock .cd {
    font-size: 20px;
  }

  .payment-timer-block .timer-clock .cd-label {
    font-size: 20px;
    margin-right: 3px;
  }

  .payment-secure-info {
    width: 80%;
    align-items: center;
  }
}

/* ============ REAL TRANSFORMATIONS (.before-after-section + .image-scroller) ============ */
/* --- Generic .image-scroller base (drag, snap, layout) --- */
.image-scroller {
  position: relative;
}

.image-scroller__header {
  margin-bottom: 24px;
}

.image-scroller__viewport {
  position: relative;
  box-sizing: border-box;
  padding-inline: 24px;
  overflow: hidden;
}

.image-scroller__rail {
  --gap: 16px;
  --per-view: 5;
  background: var(--surface-cream);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  gap: var(--gap);
  padding: 4px 0;
  margin: 0;
  list-style: none;
  /* Transform-based pager: the track overflows the viewport and is moved with
     translateX (see JS). No native scroll — pages move via buttons/dots/keyboard
     and (image only) pointer-drag. The viewport (overflow:hidden) clips it. */
  overflow: visible;
  transform: translateX(0);
  transition: transform 400ms ease;
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.image-scroller__rail.is-dragging {
  cursor: grabbing;
}

/* --- Image card --- */
.image-card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-cream);
}

.image-card__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--card-ratio, 3/2);
  object-fit: cover;
}

/* --- Navigation buttons --- */
.image-scroller__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
  z-index: 20;
}

.image-scroller__icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.image-scroller__btn--prev { left: 12px; }
.image-scroller__btn--next { right: 12px; }

/* --- Dots container (individual .image-scroller__dot styles already defined in MEMBER VIDEOS block) --- */
.image-scroller__dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

.image-scroller__dots-track {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  width: max-content;
  will-change: transform;
}

/* --- Lightbox modal (fullscreen image expansion) --- */
.image-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: none;
  z-index: 9999;
  touch-action: none;
  overscroll-behavior: none;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}

.image-lightbox[aria-hidden="false"] {
  display: flex;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.image-lightbox__figure {
  position: relative;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.image-lightbox__img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}

.image-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: auto;
  z-index: 10000;
}

.image-lightbox__close::before,
.image-lightbox__close::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 2px;
  height: 18px;
  background: var(--text-primary);
  margin: auto;
}

.image-lightbox__close::before { transform: rotate(45deg); }
.image-lightbox__close::after  { transform: rotate(-45deg); }

.image-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-primary);
  z-index: 10000;
}

.image-lightbox__nav--prev { left: 16px; }
.image-lightbox__nav--next { right: 16px; }

.image-lightbox__icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* On very small screens, move prev/next buttons below the image instead of
   overlapping the sides — same pattern as /newglow. */
@media (max-width: 480px) {
  .image-lightbox__nav {
    top: auto;
    bottom: 10px;
  }
}

/* --- Section wrapper --- */
.before-after-section {
  padding-top: 115px;
  padding-bottom: 60px;
  background: var(--surface-cream);
}

.before-after-section .image-scroller__rail {
  --per-view: 2;
  --gap: 24px;
}

@media (max-width: 1199px) {
  .before-after-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 991px) {
  .before-after-section .image-scroller__rail {
    --per-view: 1;
  }
}

@media (max-width: 767px) {
  .before-after-section {
    padding-top: 46px;
    padding-bottom: 10px;
  }

  .before-after-section .image-scroller__btn,
  .testimonials-section .image-scroller__btn {
    display: grid;
    width: 42px;
    height: 42px;
    /* Denser instead of frosted: backdrop-filter re-snapshots the slide on every frame. */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    color: #fff;
  }

  .before-after-section .image-scroller__btn--prev,
  .testimonials-section .image-scroller__btn--prev { left: 10px; }
  .before-after-section .image-scroller__btn--next,
  .testimonials-section .image-scroller__btn--next { right: 10px; }
}


/* ============ MEMBER VIDEOS (.member-videos-section + .video-scroller) ============ */
/* --- Generic .video-scroller base (drag, snap, layout) --- */
.video-scroller {
  position: relative;
}

.video-scroller__viewport {
  position: relative;
  box-sizing: border-box;
  padding-inline: 24px;
  /* Clips the transform-moved rail (see JS). */
  overflow: hidden;
}

.video-scroller__rail {
  --gap: 24px;
  --per-view: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  gap: var(--gap);
  /* Transform-based pager (see JS). Clipped by the viewport (overflow:hidden). */
  overflow: visible;
  transform: translateX(0);
  transition: transform 400ms ease;
  will-change: transform;
  touch-action: pan-y;
  padding: 0;
  margin: 0;
}

/* --- Video card --- */
.video-card {
  display: flex;
  flex-direction: column;
  user-select: none;
}

.video-card__caption {
  display: none;  /* hidden on newglow, only the iframe matters */
}

.video-card__media {
  border-radius: 14px;
  overflow: hidden;
}

.video-card__aspect {
  position: relative;
  width: 100%;
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(10, 10, 10, 0.08);
}

.video-card__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}

.video-card__overlay > * {
  pointer-events: none;
}

.video-card__play-visual {
  position: static;
  transform: none;
  pointer-events: none;
}

/* --- Navigation buttons --- */
.video-scroller__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
  z-index: 3;
}

.video-scroller__icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.video-scroller__btn--prev { left: 18px; }
.video-scroller__btn--next { right: 18px; }

/* --- Dots (shared .image-scroller__dot class used by JS for both image and video swipers) --- */
.video-scroller__dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  height: 12px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.video-scroller__dots-track {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  width: max-content;
  will-change: transform;
}

.image-scroller__dot {
  position: relative;
  width: 42px;
  height: 10px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}

.image-scroller__dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #d1d1d6;
  transition: width 0.22s ease, left 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.image-scroller__dot--active::before {
  left: 0;
  width: 42px;
  transform: none;
  background: #0a0a0a;
}

/* --- Section wrapper --- */
.member-videos-section {
  padding-top: 76px;
  padding-bottom: 60px;
  background: var(--surface-cream);
}

.member-videos-section .testimonials__header {
  margin-bottom: 24px;
}

.member-videos-section .video-scroller__rail {
  --per-view: 3;
  --gap: 24px;
}

.member-videos-section .video-card__aspect {
  aspect-ratio: 366 / 478;
  min-height: 0;
}

@media (max-width: 1199px) {
  .member-videos-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 991px) {
  .member-videos-section .video-scroller__rail {
    --per-view: 2;
  }
}

@media (max-width: 767px) {
  .member-videos-section {
    padding-top: 52px;
    padding-bottom: 48px;
  }

  .member-videos-section .testimonials__header {
    margin: 0 auto 18px;
    padding: 0 10px;
  }

  .member-videos-section .video-scroller__rail {
    --per-view: 1;
    --gap: 12px;
  }

  /* One video per view with NO neighbour peek: slide == clip width, so the side
     inset lives OUTSIDE the overflow (margin, see <576), not as viewport padding
     (which the next card would peek into). At 576-767 the shared max-width:540 +
     margin:auto already inset the viewport, so no margin needed there. */
  .member-videos-section .video-scroller__viewport {
    padding-inline: 0;
  }

  .member-videos-section .video-card__aspect {
    border-radius: 22px;
  }

  .member-videos-section .video-scroller__btn {
    width: 42px;
    height: 42px;
    /* Denser instead of frosted: backdrop-filter re-snapshots the slide on every frame. */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    color: #fff;
  }

  .member-videos-section .video-scroller__btn--prev { left: 10px; }
  .member-videos-section .video-scroller__btn--next { right: 10px; }
}

@media (max-width: 576px) {
  .member-videos-section {
    padding-top: 46px;
    padding-bottom: 10px;
  }
}

/* Below 576 the viewport is full-width (shared max-width:none), so the visible
   side inset is applied here as margin — OUTSIDE the overflow clip — keeping the
   slide equal to the clip width (no neighbour peek). */
@media (max-width: 575px) {
  .member-videos-section .video-scroller__viewport {
    margin-inline: 16px;
  }
}

/* ============ FEEDBACK (.testimonials-section + .image-scroller) ============ */
/* Re-uses .image-scroller base (defined in REAL TRANSFORMATIONS block above). */
.testimonials-section {
  padding-top: 76px;
  padding-bottom: 110px;
  background: var(--surface-cream);
}

.testimonials-section .image-scroller__rail {
  --per-view: 3;
  --gap: 24px;
}

.testimonials-section .image-card__img {
  --card-ratio: 4 / 5;
}

.testimonials-section__cta {
  display: none;
}

@media (max-width: 1199px) {
  .testimonials-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 767px) {
  .testimonials-section__cta {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 0 12px;
  }
}

@media (max-width: 991px) {
  .testimonials-section .image-scroller__rail {
    --per-view: 1;
  }
}

@media (max-width: 576px) {
  .testimonials-section {
    padding-top: 46px;
    padding-bottom: 10px;
  }
}

/* ============ SINGLE ENROLLMENT (.single-enrollment-section) ============ */
.single-enrollment-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 130px;
  background:
    radial-gradient(circle at 14% 78%, rgba(135, 92, 72, 0.34) 0%, rgba(135, 92, 72, 0) 36%),
    radial-gradient(circle at 84% 22%, rgba(142, 107, 196, 0.2) 0%, rgba(142, 107, 196, 0) 36%),
    radial-gradient(circle at 45% 0%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 42%),
    #060606;
}

.single-enrollment-section__glow {
  position: absolute;
  border-radius: 999px;
}

.single-enrollment-section__glow--left {
  left: -520px;
  bottom: -440px;
  width: 1280px;
  height: 1220px;
  background: radial-gradient(farthest-side,
    rgba(244, 168, 184, 0.146) 0%,
    rgba(244, 168, 184, 0.1387) 12.5%,
    rgba(244, 168, 184, 0.1158) 25%,
    rgba(244, 168, 184, 0.0802) 37.5%,
    rgba(244, 168, 184, 0.0433) 50%,
    rgba(244, 168, 184, 0.0173) 62.5%,
    rgba(244, 168, 184, 0.0049) 75%,
    rgba(244, 168, 184, 0.001) 87.5%,
    rgba(244, 168, 184, 0.0001) 100%);
}

.single-enrollment-section__glow--right {
  right: -480px;
  top: -440px;
  width: 1340px;
  height: 1340px;
  background: radial-gradient(farthest-side,
    rgba(201, 168, 232, 0.1736) 0%,
    rgba(201, 168, 232, 0.168) 12.5%,
    rgba(201, 168, 232, 0.1476) 25%,
    rgba(201, 168, 232, 0.109) 37.5%,
    rgba(201, 168, 232, 0.0621) 50%,
    rgba(201, 168, 232, 0.0254) 62.5%,
    rgba(201, 168, 232, 0.0071) 75%,
    rgba(201, 168, 232, 0.0013) 87.5%,
    rgba(201, 168, 232, 0.0002) 100%);
}

.single-enrollment-section__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 484px) minmax(0, 720px);
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.single-enrollment-section__card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
}

.single-enrollment-section__card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 22px 40px;
  background-image: var(--accent-gradient);
  color: #202020;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.single-enrollment-section__card-body {
  padding: 50px 24px 80px;
}

.single-enrollment-section__image-wrap {
  margin-bottom: 70px;
}

.single-enrollment-section__image {
  width: 100%;
  display: block;
}

.single-enrollment-section__list {
  width: 340px;
  margin: 0 auto;
  display: grid;
  gap: 34px;
  padding: 0;
}

.single-enrollment-section__list-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  color: #252528;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.single-enrollment-section__list-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #f0a3b9;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transform: translateY(4px);
}

.single-enrollment-section__list-check::before {
  content: "✓";
}

.single-enrollment-section__card-button {
  display: none;
}

.single-enrollment-section__content {
  max-width: 720px;
}

.single-enrollment-section__title {
  color: #fff;
  font-size: 72px;
  line-height: 1.05;
  margin-bottom: 24px;
  font-weight: 700;
  letter-spacing: -2px;
}

.single-enrollment-section__subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 100px;
}

.single-enrollment-section__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Visual swap of timer + button — timer on the LEFT, button on the RIGHT.
   Only applies on default + @max-1399; at @max-1199 .actions has display:none. */
.single-enrollment-section__actions .single-enrollment-section__timer { order: 1; }
.single-enrollment-section__actions .single-enrollment-section__button { order: 2; }

.single-enrollment-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 300px;
  min-height: 76px;
  padding: 20px 36px;
  font-size: 18px;
  font-weight: 600;
  flex: 0 0 auto;
  margin: 0;

}

.single-enrollment-section__button-arrow {
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

.single-enrollment-section__timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 72px));
  justify-content: start;
  gap: 10px;
  margin: 0;
}

.single-enrollment-section__timer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 10px 0 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.single-enrollment-section__timer-item .cd {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-size: 28px;
}

.single-enrollment-section__timer-item .cd-label {
  color: #ccc;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}

@media (max-width: 1399px) {
  .single-enrollment-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .single-enrollment-section__layout {
    gap: 60px;
  }
  .single-enrollment-section__title {
    font-size: 50px;
  }

  .single-enrollment-section__subtitle {
    font-size: 22px;
    margin-bottom: 60px;
  }
  /* List: left-aligned with extra indent from card-body edges (more than image) */
  .single-enrollment-section__list {
    width: auto;
    margin: 0;
    padding: 0 40px;
    gap: 18px;
    justify-items: start;
  }

  /* Drop button min-width so timer-items keep their 72px width instead of
     getting squeezed when content column shrinks at narrower viewports. */
  .single-enrollment-section__button {
    min-width: 0;
  }
}

@media (max-width: 1199px) {
  /* Single-column layout: title → subtitle → card (with in-card button) */
  .single-enrollment-section__layout {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    text-align: center;
  }

  /* List items keep left-aligned text (override .__layout's center) */
  .single-enrollment-section__list {
    text-align: left;
  }

  /* Flatten .__content so its children participate in .__layout grid directly */
  .single-enrollment-section__content {
    display: contents;
  }

  .single-enrollment-section__title    { order: 1; }
  .single-enrollment-section__subtitle { order: 2; }
  .single-enrollment-section__card     { order: 3; max-width: none; margin: 0; }

  .single-enrollment-section__title {
    margin-bottom: 14px;
  }

  .single-enrollment-section__subtitle {
    margin-bottom: 28px;
  }

  /* External actions (button + timer) hidden — button moves into card, timer hidden */
  .single-enrollment-section__actions {
    display: none;
  }

  /* In-card button (defined in JS template, hidden by default at desktop).
     Indent left/right by 40px to match .__list extra padding from @max-1399. */
  .single-enrollment-section__card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: calc(100% - 80px);
    margin: 28px 40px 0;
    min-height: 56px;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 600;
  }
}

@media (max-width: 991px) {
  .single-enrollment-section__title {
    font-size: 60px;
  }

  .single-enrollment-section__subtitle {
    font-size: 20px;
    margin-bottom: 38px;
  }
}

@media (max-width: 767px) {
  .single-enrollment-section {
    padding-top: 48px;
    padding-bottom: 50px;
  }

  .single-enrollment-section__card-top {
    min-height: 48px;
    padding: 12px 40px;
  }

  .single-enrollment-section__card-body {
    padding: 38px 20px 50px;
  }

  .single-enrollment-section__image-wrap {
    margin-bottom: 35px;
  }

  .single-enrollment-section__list {
    gap: 12px;
  }

  .single-enrollment-section__list-item {
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
  }

  .single-enrollment-section__list-check {
    width: 14px;
    height: 14px;
  }

  .single-enrollment-section__title {
    font-size: 36px;
    line-height: 1.05;
    margin-bottom: 14px;
  }

  .single-enrollment-section__subtitle {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 18px;
  }

  .single-enrollment-section__card-button {
    margin-top: 20px;
    min-height: 46px;
    padding: 14px 18px;
    font-size: 14px;
  }
}

/* ============ FAQ (.faq-section + .faq-*) ============ */
.faq-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.faq-section {
  position: relative;
  padding-top: 130px;
  padding-bottom: 130px;
  background: #fff;
}

.faq-icon-wrap {
  display: none;
}

.faq-header {
  margin: 0 auto 58px;
  text-align: center;
}

.faq-title {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 20px;
}

.faq-header .faq-subtitle {
  color: var(--text-muted);
  font-size: 24px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: -1px;
}

.faq-accordion {
  max-width: 1270px;
  margin: 0 auto;
}

.faq-item {
  border-top: 1px solid rgba(10, 10, 10, 0.1);
  padding: 0;
  background: transparent;
  border-bottom: 0;
}

.faq-item:first-child {
  border-top: 0;
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}

.faq-question {
  width: 100%;
  text-align: left;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  /* If anything (scroll-anchor, scrollIntoView) lands on this button,
     leave breathing room above so it isn't glued to the viewport top. */
  scroll-margin-top: 80px;
  padding: 36px 60px 36px 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  transition: background 0.14s;
}

.faq-toggle-icon {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.16);
  flex-shrink: 0;
  box-shadow: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: #1A1A1A;
}

.faq-toggle-icon::before {
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-toggle-icon::after {
  width: 2px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.faq-item.active .faq-toggle-icon {
  background: #1d1d1f;
  border-color: #1d1d1f;
  transform: translateY(-50%) rotate(45deg);
}

.faq-item.active .faq-toggle-icon::before,
.faq-item.active .faq-toggle-icon::after {
  background: #fff;
}

/* Accordion expand/collapse via CSS Grid 0fr → 1fr trick (instant, no
   animation — transition removed because scroll-anchor mis-tracked during
   the 150ms animation on desktop when the open answer was tall enough to
   exceed viewport, leaving the user scrolled past the question on close).
   - minmax(0, ...) forces explicit min-size 0 (default is auto = min-content,
     which would leave content peeking through when closed).
   - overflow: hidden on the INNER grid item (not the container) so the item
     itself clips content when its track is 0 height. */
.faq-answer {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  color: #696970;
  font-size: 22px;
  line-height: 1.8;
}

.faq-answer__inner {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 22px;
  visibility: hidden;
  opacity: 0;
}

.faq-item.active .faq-answer {
  grid-template-rows: minmax(0, 1fr);
}

.faq-item.active .faq-answer__inner {
  visibility: visible;
  opacity: 1;
}

.faq-answer p {
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 18px;
}

.faq-answer__heading {
  font-weight: 700;
  line-height: 1.4;
  margin: 18px 0 18px;
}

.faq-answer ul {
  margin: 0 0 14px;
  padding-left: 18px;
}

.faq-answer li {
  margin-bottom: 8px;
}

/* Images inside an answer — defined here (HTML-order) instead of before .faq-answer */
.faq-answer-imgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
}

.faq-answer-img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.07);
}

.faq-section__cta {
  margin-top: 94px;
  text-align: center;
  min-width: 560px;
}

.faq-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  min-height: 76px;
  padding: 14px 28px;
  font-size: 24px;
  font-weight: 600;
}

.faq-section__button-arrow {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (max-width: 991px) {

  .faq-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .faq-header {
    margin-bottom: 20px;
  }

  .faq-title {
    font-size: 50px;
  }
  

  .faq-header .faq-subtitle {
    font-size: 16px;
    display: none;
  }

  .faq-question {
    padding: 20px 20px 20px 0;
    font-size: 16px;
  }
  .faq-toggle-icon {
    width: 30px;
    height: 30px;
  }

  /* Proportional scale: answer ~0.85 × question (matches default 22/26 ratio) */
  .faq-answer {
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (max-width: 767px) {
  .faq-header {
    margin-bottom: 18px;
  }

  .faq-title {
    font-size: 45px;
    line-height: 1;
    margin-bottom: 32px;
    text-align: left;
  }

  .faq-header .faq-subtitle {
    max-width: 290px;
    margin: 0 auto;
    font-size: 10px;
    line-height: 1.45;
  }

  .faq-question {
    min-height: 48px;
    padding: 12px 30px 12px 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .faq-toggle-icon {
    width: 22px;
    height: 22px;
  }

  .faq-toggle-icon::before {
    width: 14px;
  }

  .faq-toggle-icon::after {
    height: 14px;
  }

  .faq-answer {
    font-size: 13px;
    line-height: 1.4;
  }

  .faq-answer p {
    margin-bottom: 10px;
  }

  .faq-item.active .faq-answer__inner {
    padding-bottom: 14px;
  }

  .faq-answer-imgs {
    gap: 8px;
    margin: 10px 0;
  }

  .faq-section__cta {
    margin-top: 18px;
    min-width: auto;
  }

  .faq-section__button {
    min-width: 150px;
    min-height: 38px;
    padding: 10px 18px;
    font-size: 12px;
  }

  .faq-section__button-arrow {
    font-size: 16px;
  }
}

/* ============ GUARANTEE (.guarantee-section) ============ */
.guarantee-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 100px;
  background: var(--surface-dark);
}

.guarantee-section::before,
.guarantee-section::after {
  content: "";
  position: absolute;
  width: 1321px;
  height: 1393px;
  border-radius: 999px;
}

.guarantee-section::before {
  left: -314px;
  bottom: -420px;
  background: radial-gradient(farthest-side,
    rgba(244, 168, 184, 0.3882) 0%,
    rgba(244, 168, 184, 0.3769) 12.5%,
    rgba(244, 168, 184, 0.334) 25%,
    rgba(244, 168, 184, 0.2497) 37.5%,
    rgba(244, 168, 184, 0.1438) 50%,
    rgba(244, 168, 184, 0.0592) 62.5%,
    rgba(244, 168, 184, 0.0165) 75%,
    rgba(244, 168, 184, 0.003) 87.5%,
    rgba(244, 168, 184, 0.0004) 100%);
}

.guarantee-section::after {
  right: -325px;
  bottom: -420px;
  background: radial-gradient(farthest-side,
    rgba(201, 168, 232, 0.3882) 0%,
    rgba(201, 168, 232, 0.3769) 12.5%,
    rgba(201, 168, 232, 0.334) 25%,
    rgba(201, 168, 232, 0.2497) 37.5%,
    rgba(201, 168, 232, 0.1438) 50%,
    rgba(201, 168, 232, 0.0592) 62.5%,
    rgba(201, 168, 232, 0.0165) 75%,
    rgba(201, 168, 232, 0.003) 87.5%,
    rgba(201, 168, 232, 0.0004) 100%);
}

.guarantee-section .consistency-feature--single {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 44px 50px 56px;
  text-align: center;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.guarantee-section > .section-intro {
  max-width: none;
  margin-bottom: 52px;
}

.guarantee-section > .section-intro .section-intro__title {
  margin-bottom: 0;
}

.guarantee-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guarantee-section .consistency-feature__icon-wrap {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  justify-content: center;
  margin: 0 auto 30px;
}

.guarantee-section .consistency-feature__icon {
  height: 134px;
}

.guarantee-section .consistency-feature__title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  margin: 0 auto 24px;
}

.guarantee-section .consistency-feature__desc p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 auto;
  text-align: center;
}

.guarantee-section .consistency-feature__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 470px;
  min-height: 76px;
  margin-top: 70px;
  padding: 18px 26px;
  font-size: 18px;
  font-weight: 600;
}

.guarantee-section__button-label {
  display: inline-flex;
  align-items: center;
}

.guarantee-section__button-arrow {
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .guarantee-section > .section-intro {
    margin-bottom: 34px;
  }

  .guarantee-section > .section-intro .section-intro__title {
    font-size: 56px;
  }

  .guarantee-section .consistency-feature--single {
    max-width: 500px;
    padding: 38px 40px 40px;
  }

  .guarantee-section .consistency-feature__icon {
    width: 96px;
    height: 96px;
  }

  .guarantee-section .consistency-feature__title {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .guarantee-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #000;
  }

  .guarantee-section::after {
    display: none;
  }
  
  .guarantee-section::before {
    display: none;
  }

  .guarantee-section > .section-intro {
    margin-bottom: 32px;
  }

  .guarantee-section > .section-intro .section-intro__title {
    font-size: 34px;
    line-height: 1;
  }

  .guarantee-section .consistency-feature--single {
    max-width: 360px;
    padding: 26px 22px 26px;
    border-radius: 16px;
  }

  .guarantee-section .consistency-feature__icon-wrap {
    margin-bottom: 18px;
  }

  .guarantee-section .consistency-feature__icon {
    height: 80px;
  }

  .guarantee-section .consistency-feature__title {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 24px;
  }

  .guarantee-section .consistency-feature__desc p {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
  }

  .guarantee-section .consistency-feature__cta {
    min-height: 56px;
    margin-top: 32px;
    padding: 10px 14px;
    font-size: 16px;
  }

  .guarantee-section__button-arrow {
    font-size: 16px;
  }
}

/* ============ LETTER ============ */
/* --- .letter-section section --- */
.letter-section {
  position: relative;
  z-index: 1;
  padding: 80px 0 88px;
  background: var(--surface-cream);
}

.letter-section__note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 16px;
}

.letter-section__note-avatar {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(223, 155, 173, 0.28);
}

.letter-section__note-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.letter-section__note-kicker {
  color: #da94a8;
  font-size: 9px;
  font-weight: 500;
  margin-bottom: 2px;
}

.letter-section__note-name {
  color: #2a2a2a;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -1px;
}

.letter-section .section-intro {
  margin-bottom: 58px;
}

.letter-section .section-intro .section-intro__title {
  font-size: 72px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -2px;
}

.letter-section .section-intro .section-intro__subtitle {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -1px;
}

.letter-section__block {
  width: 100%;
  margin-top: 0;
  margin-bottom: 40px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  align-items: stretch;
  text-align: left;
}

.letter-section__block:last-of-type {
  margin-bottom: 0;
}

.letter-section .consistency-feature__icon-wrap {
  display: none;
}

.letter-section .container {
  max-width: 820px;
}

.letter-section__label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 28px;
  color: #D98AA0;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
}

.letter-section__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 8px;
}

.letter-section__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 14px;
  background: linear-gradient(to right, rgba(223, 155, 173, 0.5), rgba(223, 155, 173, 0));
}

.letter-section .consistency-feature__title {
  font-size: 30px;
  margin-bottom: 18px;
}

.letter-section__subtitle {
  font-size: 22px;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.letter-section .consistency-feature__desc {
  max-width: none;
}

.letter-section .consistency-feature__desc p {
  color: #2f2f32;
  font-size: 16px;
  line-height: 1.6;
}

.letter-section .consistency-feature__desc p:last-child {
  margin-bottom: 0;
}

.letter-section__accent {
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.letter-section__accent--italic {
  font-style: italic;
}

.letter-section__callout {
  padding-left: 12px;
  border-left: 1px solid rgba(223, 155, 173, 0.78);
}

.letter-section__callout p {
  line-height: 1.3;
}

.letter-section__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 80px;
}

.letter-section__signature-line {
  width: 210px;
  height: 1px;
  background: rgba(223, 155, 173, 0.55);
}

.letter-section__signature-name {
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  line-height: 1;
  font-style: italic;
}

@media (max-width: 991px) {
  .letter-section .section-intro .section-intro__title {
    font-size: 56px;
  }

  .letter-section .section-intro .section-intro__subtitle {
    font-size: 18px;
  }

  .letter-section__label {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .letter-section .consistency-feature__title {
    font-size: 25px;
  }

  .letter-section__subtitle {
    font-size: 19px;
    margin-bottom: 18px;
  }

  .letter-section .consistency-feature__desc p {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .letter-section {
    padding-top: 30px;
    padding-bottom: 32px;
    border-radius: 22px;
  }

  .letter-section__note {
    margin-bottom: 26px;
  }

  .letter-section__note-avatar {
    width: 52px;
    height: 52px;
  }

  .letter-section__note-name {
    font-size: 18px;
  }

  .letter-section .section-intro {
    margin-bottom: 40px;
  }

  .letter-section .section-intro .section-intro__title {
    font-size: 40px;
    font-weight: 600;
  }

  .letter-section .section-intro .section-intro__subtitle {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
  }

  .letter-section__label {
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
  }

  .letter-section__label::after {
    margin-left: 10px;
  }

  .letter-section__block {
    margin-bottom: 24px;
  }

  .letter-section .consistency-feature__title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .letter-section__subtitle {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .letter-section .consistency-feature__desc {
    gap: 12px;
  }

  .letter-section .consistency-feature__desc p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 0px;
  }

  .letter-section__callout {
    margin-top: 14px;
    padding-left: 10px;
  }

  .letter-section__signature {
    margin-top: 42px;
  }

  .letter-section__signature-name {
    font-size: 28px;
  }
}

@media (max-width: 576px) {

  .letter-section__note {
    margin: 0 0 26px;
  }

  .letter-section__note-avatar {
    width: 52px;
    height: 52px;
  }

  .letter-section__note-name {
    font-size: 18px;
  }

  .letter-section .section-intro {
    text-align: left;
  }
  
  .letter-section__signature {
    align-items: flex-start;
  }
}

/* ============ FINAL COUNTDOWN  ============ */
.final-countdown-section {
  position: relative;
  
  z-index: 0;
  overflow: hidden;
  margin-top: -20px;            /* pull up under letter's bottom (covers black showing through any border-radius cutouts) */
  padding: 104px 0 170px;           /* compensate margin so content visually stays in place (60 + original 84) */
  background:
    radial-gradient(circle at 18% 88%, rgba(135, 92, 72, 0.34) 0%, rgba(135, 92, 72, 0) 34%),
    radial-gradient(circle at 86% 16%, rgba(142, 107, 196, 0.22) 0%, rgba(142, 107, 196, 0) 34%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 42%),
    #060606;
}

.final-countdown-section__glow {
  position: absolute;
  border-radius: 999px;
}

.final-countdown-section__glow--left {
  left: -480px;
  bottom: -400px;
  width: 1340px;
  height: 1240px;
  background: radial-gradient(farthest-side,
    rgba(244, 168, 184, 0.1505) 0%,
    rgba(244, 168, 184, 0.1441) 12.5%,
    rgba(244, 168, 184, 0.1232) 25%,
    rgba(244, 168, 184, 0.0878) 37.5%,
    rgba(244, 168, 184, 0.0485) 50%,
    rgba(244, 168, 184, 0.0195) 62.5%,
    rgba(244, 168, 184, 0.0055) 75%,
    rgba(244, 168, 184, 0.0011) 87.5%,
    rgba(244, 168, 184, 0.0001) 100%);
}

.final-countdown-section__glow--right {
  right: -450px;
  top: -470px;
  width: 1340px;
  height: 1340px;
  background: radial-gradient(farthest-side,
    rgba(201, 168, 232, 0.1736) 0%,
    rgba(201, 168, 232, 0.168) 12.5%,
    rgba(201, 168, 232, 0.1476) 25%,
    rgba(201, 168, 232, 0.109) 37.5%,
    rgba(201, 168, 232, 0.0621) 50%,
    rgba(201, 168, 232, 0.0254) 62.5%,
    rgba(201, 168, 232, 0.0071) 75%,
    rgba(201, 168, 232, 0.0013) 87.5%,
    rgba(201, 168, 232, 0.0002) 100%);
}

.final-countdown-section__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.final-countdown-section__title {
  color: #fff;
  font-size: 70px;
  line-height: 1.05;
  margin-bottom: 20px;
}

.final-countdown-section__subtitle,
.final-countdown-section__meta {
  color: #ccc;
}

.final-countdown-section__subtitle {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 72px;
}

.final-countdown-section__timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 129px));
  justify-content: center;
  gap: 20px;
  margin-bottom: 72px;
}

.final-countdown-section__timer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 142px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.final-countdown-section__timer-item .cd {
  color: #fff;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.final-countdown-section__timer-item .cd-label {
  color: #ccc;
  font-size: 20px;
  text-transform: uppercase;
}

.final-countdown-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 580px;
  min-height: 76px;
  margin-bottom: 22px;
  padding: 22px 44px;
}

.final-countdown-section__button-arrow {
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

.final-countdown-section__meta {
  color: rgba(255, 255, 255, 0.76);
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 0;
}

.final-countdown-section__meta .js-start-date-md {
  color: #ffffff;
  font-weight: 700;
}


@media (max-width: 1199px) {
  .final-countdown-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  /* Tablet sizing (merged from source range 577-1199) */
  .final-countdown-section__title {
    font-size: 52px;
    line-height: 54px;
    margin-bottom: 18px;
  }

  .final-countdown-section__subtitle {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 37px;
  }

  .final-countdown-section__timer {
    grid-template-columns: repeat(4, minmax(0, 100px));
    gap: 12px;
    margin-bottom: 37px;
  }

  .final-countdown-section__timer-item {
    min-height: 108px;
    border-radius: 11px;
  }

  .final-countdown-section__timer-item .cd {
    font-size: 44px;
  }

  .final-countdown-section__timer-item .cd-label {
    font-size: 11px;
  }

  .final-countdown-section__button {
    min-width: 441px;
    min-height: 59px;
    margin-bottom: 15px;
    padding: 17px 32px;
    font-size: 15px;
  }

  .final-countdown-section__button-arrow {
    font-size: 22px;
  }

  .final-countdown-section__meta {
    font-size: 14px;
    line-height: 1.38;
  }
}

@media (max-width: 991px) {
  .final-countdown-section__title {
    font-size: 48px;
  }

  .final-countdown-section__subtitle {
    font-size: 22px;
  }

  .final-countdown-section__button {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .final-countdown-section {
    padding-top: 78px;
    padding-bottom: 74px;
  }

  .final-countdown-section__glow--left {
    display: none;
  }

  .final-countdown-section__title {
    font-size: 32px;
    line-height: 32px;
  }

  .final-countdown-section__subtitle,
  .final-countdown-section__meta {
    font-size: 13px;
    line-height: 1.4;
  }

  .final-countdown-section__subtitle {
    margin-bottom: 36px;
  }

  .final-countdown-section__timer {
    width: 100%;
    max-width: 420px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 auto;
    margin-bottom: 24px;
  }

  .final-countdown-section__timer-item {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08);
    gap: 6px;
  }

  .final-countdown-section__timer-item .cd {
    font-size: 40px;
  }

  .final-countdown-section__timer-item .cd-label {
    font-size: 10px;
  }

  .final-countdown-section__button {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    min-height: 54px;
    margin: 12px auto;
    padding: 12px 20px;
    font-size: 16px;
  }

  .final-countdown-section__meta {
    font-size: 16px;
    line-height: 1.2;
  }
}


/* ============ Footer ============ */
.footer {
  padding: 30px 0;
  background: #1A1A1A;
}

.footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.footer__brand {
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 6px;
  color: #4E4E4E
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  text-decoration: none;
}

.footer__link {
  color: #4E4E4E;
  font-size: 16px;
  text-decoration: none;
}

.footer__link--highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 77px;
  min-height: 29px;
  padding: 0 16px;
  border-radius: 4px;
  background-image: var(--accent-gradient);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 991px) {
    .footer__container {
      align-items: flex-start;
    }

    .footer__links {
      align-items: flex-start;
      gap: 18px;
    }
}

@media (max-width: 767px) {
  /* Footer mobile */
  .footer {
    padding-top: 18px;
    padding-bottom: 18px;
    min-height: 160px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .footer__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .footer__links {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  .footer__brand-name {
    color: #4d4d4d;
    font-size: 16px;
  }

  .footer__year {
    font-size: 14px;
  }
  .footer__link {
    font-size: 8px;
  }

  .footer__link--highlight {
    background: #4e4e4e;
    background-image: none;
    color: #ffffff;
    padding: 0 8px;
    min-width: 0;
  }
}

/* ============ STICKY DEAL BAR (mobile-only sticky CTA) ============ */
/* Fixed bottom bar with countdown + qualify button. Appears on viewport ≤767px
   when .hero__actions leaves the viewport (driven by IntersectionObserver in JS).
   Hidden by default on larger screens — see only @media (max-width: 767px) block. */
.sticky-deal-bar {
  display: none;
}

@media (max-width: 767px) {
  .sticky-deal-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 24px;
    /* Denser instead of frosted: this bar is fixed, so its backdrop was never cacheable. */
    background: rgba(20, 18, 25, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s ease;
  }

  .sticky-deal-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .sticky-deal-bar__timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .sticky-deal-bar__timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
  }

  .sticky-deal-bar__timer-item .cd {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }

  .sticky-deal-bar__timer-item .cd-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 7px;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-transform: uppercase;
  }

  .sticky-deal-bar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    min-height: 0;
    width: 240px;
    margin: 0;
  }

  .sticky-deal-bar__button-arrow {
    font-size: 22px;
    line-height: 1;
  }
}


@media (max-width: 576px) {
  .sticky-deal-bar__timer-item {
    min-width: 30px;
    padding: 4px;
  }
  .sticky-deal-bar__timer {
    gap: 6px;
  }
  .sticky-deal-bar__button {
    width: 160px;
  }
}


/* ============================================================
   DEBUG OVERLAY (mobile debugging, toggle with ?debug=1)
   Fixed at bottom of viewport, scrollable, monospace.
   ============================================================ */
#debug-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  z-index: 99999;
  border-top: 2px solid #ff8888;
  -webkit-overflow-scrolling: touch;
}

#debug-overlay[hidden] {
  display: none;
}

#debug-overlay .debug-line {
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  white-space: pre-wrap;
  word-break: break-word;
}

#debug-overlay .debug-line:first-child {
  border-top: 0;
}

#debug-overlay .debug-line--error {
  color: #ff9090;
}

#debug-overlay .debug-line--warn {
  color: #ffd28a;
}

/* ============================================================================
   BUNNY FACADE — shared by every video on the page
   ============================================================================

   Nothing loads until the first tap: the box shows a poster and our Play button.
   The tap creates .bunny-facade__video off the CDN; the Bunny iframe is only the
   fallback. Why: docs/OPS/bunny-player-facade.md.

   Contract: .bunny-facade goes on the box that already carries the visual class,
   holding __poster, __spinner, __ui and an empty __stage. Appearance stays with
   the visual classes, only mechanics live here. JS hooks: .js-bunny-facade and
   .js-bunny-facade__stage.

   States, all set by JS on the box:
     is-live      a player was created and is booting
     is-revealed  poster and spinner gone: the player is on screen
     is-api-live  the player can be driven (at once for <video>, after the
                  Player.js handshake for the fallback iframe)
     is-playing   playback confirmed by the player's own event
     is-fallback  <video> failed, the iframe owns the whole box

   Last in the file on purpose: state rules must outrank earlier layout rules.
   -------------------------------------------------------------------------- */

.bunny-facade {
  /* 34px control bar plus padding. Overshooting is safe, undershooting means the
     overlay eats taps meant for the bar. Bypassed by data-bunny-full-overlay. */
  --controls-reserve: 52px;
  --play-glyph-fade: 1.5s;
  cursor: pointer;
  /* Poster, overlay and stage all position against this box, and the -video
     pages do not set it on their own aspect class. */
  position: relative;
}

@media (max-width: 768px) {
  .bunny-facade {
    --controls-reserve: 48px;
  }
}

@media (max-width: 400px) {
  .bunny-facade {
    --controls-reserve: 44px;
  }
}

.bunny-facade[data-bunny-full-overlay] {
  --controls-reserve: 0px;
}

.bunny-facade__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* cover, matching how the player scales its own frame: contain framed the
     posters better but the frame jumped on tap. */
  object-fit: cover;
  transition: opacity 0.25s ease;
  /* A native image drag would hijack a swipe before the engine locks the axis. */
  -webkit-user-drag: none;
  user-select: none;
}

/* Older templates where the box had no height of its own and the iframe defined
   it. There the poster takes that role, wearing the page's own iframe class, so
   the geometry comes across without copying any numbers in here. */
.bunny-facade--sized-by-media .bunny-facade__poster {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
}

.bunny-facade__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The stage sizes the player, so neither of these needs anything place-specific.
   The per-page classes would be a trap here: .main__video-iframe carries
   min-height: 480px, right for a quote video in flow, wrong in a swiper card. */
.bunny-facade__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Same object-fit as the poster, so the frame does not jump on start. */
.bunny-facade__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}

/* Tap registered, player still booting. Same recipe as .takedown__spinner and
   the quiz .ng-checking-loader, inverted for a dark video background. */
.bunny-facade__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: bunny-facade-spin 0.8s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@keyframes bunny-facade-spin {
  to {
    transform: rotate(360deg);
  }
}

.bunny-facade.is-live:not(.is-revealed) .bunny-facade__spinner {
  opacity: 1;
}

.bunny-facade.is-revealed .bunny-facade__poster {
  opacity: 0;
}

.bunny-facade.is-live {
  cursor: default;
}

/* Kills the blinking caret on the overlay caption. pointer-events: none does not
   help: it removes the element from hit-testing, not from caret placement. */
.bunny-facade__ui {
  -webkit-user-select: none;
  user-select: none;
}

/* Hidden until the player can actually be driven, so an API that never answers
   cannot leave our overlay on top of a working native player. */
.bunny-facade.is-live .bunny-facade__ui {
  inset: 0 0 var(--controls-reserve) 0;
  opacity: 0;
  pointer-events: none;
}

.bunny-facade.is-api-live .bunny-facade__ui {
  opacity: 1;
}

/* The iframe took over. Our overlay leaves for good: on a phone our button could
   not start that player, and the player's own one can. */
.bunny-facade.is-fallback .bunny-facade__ui {
  display: none;
}

/* Playing: keep the glyph, drop the scrim and the copy. The scrim is a
   background for the card and quote overlays, a ::before for the hero. */
.bunny-facade.is-playing .bunny-facade__ui {
  background: transparent;
}

.bunny-facade.is-playing .bunny-facade__ui::before,
.bunny-facade.is-playing .hero__video-overlay-copy,
.bunny-facade.is-playing .video-quote-overlay__copy,
.bunny-facade.is-playing .video-quote-overlay__top {
  opacity: 0;
}

.hero__video-overlay-copy,
.video-quote-overlay__copy,
.video-quote-overlay__top {
  transition: opacity 0.18s ease;
}

/* --- Bare overlay: older templates with no overlay classes of their own, so the
   centred button lives here instead. The --bare modifier keeps these
   declarations off the pages that do have their own look. ------------------- */

.bunny-facade__ui--bare {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.18s ease;
  /* Without this a click lands on non-editable content and the browser offers an
     I-beam with a blinking caret. */
  -webkit-user-select: none;
  user-select: none;
}

.bunny-facade__ui--bare::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.5);
}

.bunny-facade__button {
  position: relative;
  z-index: 1;
  width: 75px;
  height: 75px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 50% 36%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(210, 193, 176, 0.2) 30%,
    rgba(126, 96, 68, 0.28) 68%,
    rgba(67, 47, 31, 0.34) 100%
  );
  box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, 0.3);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.bunny-facade__button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 691px;
  height: 691px;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(farthest-side,
    rgba(237, 229, 220, 0.0108) 0%,
    rgba(237, 229, 220, 0.0098) 12.5%,
    rgba(237, 229, 219, 0.0075) 25%,
    rgba(237, 228, 219, 0.0048) 37.5%,
    rgba(237, 228, 219, 0.0026) 50%,
    rgba(237, 228, 219, 0.0011) 62.5%,
    rgba(236, 228, 219, 0.0004) 75%,
    rgba(236, 228, 218, 0.0001) 87.5%,
    rgba(236, 227, 218, 0) 100%);
}

.bunny-facade__glyph {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 33px solid #ffffff;
}

@media (max-width: 991px) {
  .bunny-facade__button {
    width: 64px;
    height: 64px;
  }

  .bunny-facade__button::before {
    width: 292px;
    height: 292px;
    background: radial-gradient(farthest-side,
      rgba(238, 230, 221, 0.0497) 0%,
      rgba(237, 229, 221, 0.0447) 12.5%,
      rgba(237, 229, 220, 0.0326) 25%,
      rgba(237, 228, 219, 0.0192) 37.5%,
      rgba(236, 228, 218, 0.0091) 50%,
      rgba(236, 227, 217, 0.0035) 62.5%,
      rgba(235, 226, 216, 0.0011) 75%,
      rgba(234, 225, 215, 0.0003) 87.5%,
      rgba(234, 224, 213, 0) 100%);
  }

  .bunny-facade__glyph {
    margin-left: 4px;
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 26px;
  }
}

/* Every variant builds its glyph from .hero__video-play or .bunny-facade__button,
   so one pair of rules covers all pages. It dissolves slowly on start and comes
   back fast on pause, hence the two transitions. */
.bunny-facade .hero__video-play,
.bunny-facade .bunny-facade__button {
  transition: opacity 0.18s ease;
}

.bunny-facade.is-playing .hero__video-play,
.bunny-facade.is-playing .bunny-facade__button {
  opacity: 0;
  transition: opacity var(--play-glyph-fade) ease;
}

/* The play triangle becomes two bars of the same height. */
.bunny-facade.is-playing .hero__video-play-icon,
.bunny-facade.is-playing .bunny-facade__glyph {
  width: 30px;
  height: 38px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(
    to right,
    #ffffff 0 34%,
    transparent 34% 66%,
    #ffffff 66% 100%
  );
}

/* Not playing: interactive on every input type. Without this the rail could not
   see a drag starting on a stopped card, since it only sees our own DOM. */
.bunny-facade.is-api-live:not(.is-playing) .bunny-facade__ui {
  pointer-events: auto;
}

/* Full coverage on every input type, mouse included: letting a click through in
   the bottom band would land inside the fallback iframe, on the player's own
   control bar, which we can neither drive nor style. Costs seeking, fullscreen
   and volume there; dropping the flag restores the reserved strip. */
.bunny-facade[data-bunny-full-overlay].is-api-live .bunny-facade__ui {
  pointer-events: auto;
}

/* Without the flag the bottom strip stays free for a mouse, so only touch needs
   the catcher. */
@media (pointer: coarse) {
  .bunny-facade.is-api-live .bunny-facade__ui {
    pointer-events: auto;
  }
}