/* ============ VARIABLES ============ */
:root {
  --font-family-main: 'Inter', -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;
}

/* ============ FONTS ============ */
/* Inter comes from ../../../assets/fonts/fonts.css in <head>. An @import here would
   chain the requests, and is ignored entirely unless it is the first rule. */

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

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

/* ============ TYPOGRAPHY ============ */
h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 54px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 8px;
}

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

p {
  font-family: var(--font-family-main);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}

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

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

/* --- BUTTONS AND INPUTS BASE --- */
button {
  font: inherit;
  cursor: pointer;
}
input, button {
  border: none;
  outline: none;
}
input {
  font-size: var(--font-input);
}

/* --- MOBILE ADAPTIVE HEADINGS --- */
@media (max-width: 768px) {
  h1 {
    font-size: 36px;
  }
  h2, h3 {
    font-size: 22px;
  }
  p {
    font-size: 16px;
  }
}

/* ============ BUTTONS (GLOBAL) ============ */
.btn,
.cta__btn,
.waitlist-form button {
  display: inline-block;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  margin: 0 auto;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.btn:hover,
.cta__btn:hover,
.waitlist-form button:hover {
  background: var(--color-btn-bg-hover);
  color: var(--color-text-light);
}


/* ============ CONTAINER ============ */
.container {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
}
@media (min-width: 576px)   { .container { max-width: 540px; } }
@media (min-width: 768px)   { .container { max-width: 720px; } }
@media (min-width: 992px)   { .container { max-width: 960px; } }
@media (min-width: 1200px)  { .container { max-width: 1140px; } }
@media (min-width: 1400px)  { .container { max-width: 1320px; } }
@media (min-width: 1800px)  { .container { max-width: 1700px; } }

/* ============ HEADER & NAVBAR ============ */
.bg-white {
  background-color: var(--color-bg-main);
}

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

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

.navbar__logo {
  height: 35px;
}

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

/* --- SUPPORT TOOLTIP--- */
.support-tooltip {
  position: relative;
  display: inline-block;
}
.support-tooltip__trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.support-tooltip__trigger img {
  width: 40px;
  height: 40px;
}
.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;
}

@media (max-width: 768px) {
  .navbar__logo-block img {
    height: 22px;
  }
  .support-tooltip__trigger img {
    height: 22px;
    width: 22px;
  }
  .support-tooltip__content {
    right: 30px;
  }
}


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

.countdown-timer__inner {
  background: var(--color-banner);
  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: 22px;
  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: 17px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .countdown-timer__inner {
    padding: 20px;
    gap: 12px;
    font-size: 20px;
    border-radius: 10px;
    justify-content: center;
  }
  .countdown-timer__label {
    font-size: 18px;
    margin-right: 0;
    text-align: center;
  }
  .countdown-timer .timer-clock {
    justify-content: center;
  }
  .countdown-timer .timer-clock .cd {
    font-size: 20px;
  }
  .countdown-timer .timer-clock .cd-label {
    font-size: 15px;
  }
}
@media (max-width: 576px) {
  .countdown-timer .timer-clock {
    justify-content: center;
    gap: 3px;
  }
  .countdown-timer {
    padding: 10px 0 20px;
  }
  .countdown-timer__inner {
    width: 100%;
    padding: 14px 6px;
    gap: 8px;
    margin: 0;
    border-radius: 6px;
  }
  .countdown-timer__divider {
    width: 1px;
    height: 20px;
  }
  .countdown-timer__label {
    font-size: 16px;
  }
  .countdown-timer .timer-clock .cd {
    font-size: 16px;
    margin: 0;
  }
  .countdown-timer .timer-clock .cd-label {
    font-size: 10px;
    margin: 0;
  }
}
@media (max-width: 380px) {
  .countdown-timer .timer-clock {
    justify-content: center;
    gap: 2px;
  }
  .countdown-timer {
    padding: 10px 0 20px;
  }
  .countdown-timer__inner {
    width: 100%;
    padding: 14px 2px;
    margin: 0;
    border-radius: 6px;
  }
  .countdown-timer__divider {
    width: 1px;
    height: 20px;
  }
  .countdown-timer__label {
    font-size: 12px;
  }
  .countdown-timer .timer-clock .cd {
    font-size: 12px;
    margin: 0;
  }
  .countdown-timer .timer-clock .cd-label {
    font-size: 10px;
    margin: 0;
  }
}

/* ============ PAGE HEADING ============ */
.heading {
  text-align: center;
  padding: 0px 0px 32px;
  margin: 0 auto;
}

.heading h1 {
  margin-bottom: 24px;
  color: var(--color-text-light);
}
.heading p {
  font-size: 32px;
  color: var(--color-text-grey);
}

@media (max-width: 1400px) {
  .heading h1 {
    font-size: 40px;
    margin-bottom: 4px;
  }
  .heading p {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .heading h1 {
    font-size: 40px;
  }
  .heading p {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .heading h1 {
    font-size: 35px;
  }
  .heading p {
    font-size: 16px;
  }
}
/* ============ VIDEO ============ */
.main__video {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 64px 0 0;
}

.main__video-title {
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: center;
  font-size: 20px;
  max-width: 992px;
  padding: 15px 0 5px;
  margin: 0 auto;
  line-height: 1.3;
}

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

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

@media (max-width: 992px) {
  .main__video {
    margin: 0;
  }
  .main__video-aspect {
    max-width: 100vw;
    border-radius: 0;
  }
  
  .main__video-aspect.main__video-aspect--rounded{
    border-radius: 12px;
  }

  .main__video-iframe {
    min-height: 240px;
    border-radius: 0;
  }
  .main__video-title {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .main__video-title {
    height: auto;
  }
}

/* ============ Video-grid ============ */
.main__video-aspect--rounded {
  border-radius: 12px;
}

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

.testimonials__video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
  margin-top: 32px;
}

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

@media (max-width: 1200px) {
  .main__video-title {
    font-size: 18px;
  }
}

@media (max-width: 992px) {
  .testimonials__video-grid {
    grid-template-columns: 1fr;
    gap: 0 12px;
  }
}

@media (max-width: 768px) {
  .main__video-title {
    font-size: 20px;
  }
  .testimonials__video-grid {
    gap: 10px;
  }
}


/* ============ Consistency-offer-panel ============ */
.consistency-offer-panel {
  width: 100%;
  max-width: 992px;
  margin: 0 auto 35px auto;
  background: #232323;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.09);
  padding: 32px 40px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.consistency-offer-panel__col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 36px;
}
.consistency-offer-panel__col--start {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0px;
  gap: 16px;
}
.consistency-offer-panel__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.consistency-offer-panel__label {
  color: #cfcfcf;
  font-size: 17px;
  font-weight: 500;
}
.consistency-offer-panel__date {
  font-size: 22px;
  color: #fff;
  font-weight: 700;
}
.consistency-offer-panel__divider {
  width: 1px;
  height: 52px;
  background: #ffffff;
  margin: 0 32px;
  flex-shrink: 0;
}
.consistency-offer-panel__col--timer {
  flex: 2 2 0px;
  flex-direction: column;
  align-items: flex-start;
}
.consistency-offer-panel__timer-label {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.consistency-offer-panel__timer-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
}
.consistency-offer-panel__timer-clock {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  gap: 7px;
}
.consistency-offer-panel__timer-clock .cd {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 2px;
  text-align: center;
}
.consistency-offer-panel__timer-clock .cd-label {
  color: #bcbcbc;
  font-size: 16px;
  font-weight: 400;
  margin-right: 9px;
}
.consistency-offer-panel__col--button {
  width: 100%;
  justify-content: center;
  display: flex;
}
@media (max-width: 992px) {
  .consistency-offer-panel {
    align-items: stretch;
    gap: 18px;
    padding: 19px 12px 24px 12px;
  }
  .consistency-offer-panel__col {
    flex-direction: column;
    align-items: start;
    gap: 18px;
  }
  .consistency-offer-panel__divider {
    display: none;
  }
  .consistency-offer-panel__col--button button{
    text-align: center;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .consistency-offer-panel__col--start-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .consistency-offer-panel__timer-clock .cd {
    font-size: 18px;
  }
  .consistency-offer-panel__timer-clock {
    text-align: center;
    justify-content: center;
  }
  .consistency-offer-panel__timer-clock .timer-clock {
    text-align: center;
  }
}

/* ============ BRANDS ============ */
.brands__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: 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: clamp(10px, 4vw, 38px);
  width: auto;
}

/* ============ FEATURES ============ */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 32px 0;
  justify-content: center;
}

.feature-card {
  flex: 1 1 330px;
  max-width: 420px;
  background: var(--color-bg-muted);
  border-radius: 14px;
  padding: 32px 21px;
  box-shadow: var(--color-shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.feature-card__img img {
  width: 54px;
  margin-bottom: 19px;
}

.feature-card__title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

.feature-card__content p {
  color: #333;
}

/* ============ Consistency-feature ============ */
.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__subtitle {
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--color-text-darkgrey);
  margin-top: 0;
}

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

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

@media (max-width: 992px) {
  .consistency-feature__body {
    max-width: 96vw;
    padding: 0 6vw;
  }
}

@media (max-width: 768px) {
  .consistency-feature {
    padding: 38px 0 22px 0;
    margin-top: 50px;
  }
  .consistency-feature__icon {
    width: 60px;
    height: 60px;
  }
  .consistency-feature__title {
    font-size: 26px;
  }
  .consistency-feature__subtitle {
    font-size: 16px;
  }
  .consistency-feature__desc {
    gap: 12px;
  }
  .consistency-feature__desc p{
    font-size: 16px;
  }
}

/* ============ Timer with button ============ */
.timer-wrapper {
  margin-bottom: 20px;
  padding: 50px 0;
}
.join-membership-row {
  display: flex;
  align-items: center;
}

/* ============ Consistency-level-section ============ */
.consistency-level-section {
  padding: 48px 0 36px;
}
.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: 600;
  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;
}
.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;
  margin-bottom: 10px;
}
.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);
}

@media (max-width: 768px) {
  .consistency-level-section.consistency-level-section--below-video {
    padding-top: 0;
    margin-top: -40px;
  }
  .consistency-level-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .consistency-level-subtitle {
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  .consistency-level-title {
    font-size: 26px;
    margin-bottom: 0;
  }
  .consistency-level-section {
    padding: 20px 0 20px
  }
  .consistency-level-box {
    padding: 26px 4vw 20px 4vw;
  }
  .consistency-level-image {
    max-width: 96vw;
  }
  .consistency-level-icon {
    width: 80px;
    height: 80px;
  }
  .consistency-level-list-item p{
    font-size: 16px;
  }
  .consistency-level-list-check {
    width: 18px;
    height: 18px;
  }
}


/* ============ Payment ============ */
.consistency-payment-section {
  width: 100%;
  background: var(--color-bg-main, #fff);
  margin: 0;
  padding: 32px 0px;
}

.payment-offer-box {
  flex: 1 1 320px;
  min-width: 290px;
  max-width: 420px;
  padding: 36px 26px 24px 26px;
  background: #fff;
  border-radius: 11px;
  border: 1.5px 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: 2.5px 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: stretch;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

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

.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;
  gap: 12px;
  width: 100%;
}

.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-offer-or {
  font-size: 16px;
  margin: 13px 0 8px 0;
  color: var(--color-text-grey);
}

.payment-offer-paypal {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  color: #0c57a3;
  text-decoration: none;
  gap: 10px;
}

.payment-offer-paypal img {
  width: 110px;
  height: auto;
  display: inline-block;
}

.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-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-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;
}

@media (max-width: 576px) {
  .payment-offer-box {
    padding: 20px 2vw 18px 2vw;
  }
  .payment-offer-newprice {
    font-size: 25px;
  }
  .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;
  }
  .payment-offer-newprice {
    font-size: 34px;
  }
}

/* ============ FAQ ============ */
.faq-section {
  position: relative;
  background: var(--color-bg-muted);
  margin: 96px 0 60px 0;
}

.faq-icon-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: none;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.faq-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.faq-header {
  text-align: center;
  margin: 0 0 36px 0;
  padding-top: 48px;
}

.faq-title {
  margin: 10px 0 6px 0;
  font-size: 36px;
  font-weight: 600;
  color: var(--color-text-main);
}

.faq-subtitle {
  color: var(--color-text-darkgrey);
  font-weight: 600;
  font-size: 19px;
}

.faq-accordion {
  background: transparent;
  padding-bottom: 36px;
}

.faq-item {
  border-bottom: 1px solid #e2e2e2;
}

.faq-question {
  width: 100%;
  text-align: left;
  color: var(--color-text-main);
  background-color: transparent;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 8px 0 8px 0;
  cursor: pointer;
  transition: background 0.14s;
  position: relative;
  gap: 14px;
}

.faq-toggle-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  position: relative;
  flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

.faq-toggle-icon::before {
  width: 10px;
  height: 2px;
}

.faq-toggle-icon::after {
  width: 2px;
  height: 10px;
}

.faq-item.active .faq-toggle-icon::after {
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  background-color: transparent;
  line-height: 1.6;
  transition:
    max-height 0.39s cubic-bezier(0.67,0,0.33,1),
    padding 0.39s cubic-bezier(0.67,0,0.33,1);
}

.faq-answer-imgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 14px 0;
}

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

.faq-item.active .faq-answer {
  max-height: 3000px;
}

.faq-answer p {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--color-text-darkgrey);
}
.faq-answer ul {
  color: var(--color-text-darkgrey);
  margin: 0 0 0 10px;
  padding: 0;
}
.faq-answer li {
  margin: 0 0 10px 10px;
  font-size: 16px;
}

@media (max-width: 576px) {
  .faq-section {
    margin-top: 35px;
  }
  .faq-icon-wrap {
    width: 54px;
    height: 54px;
  }
  .faq-header {
    padding-top: 24px;
    margin-bottom: 20px;
  }
  .faq-title {
    font-size: 19px;
  }
  .faq-subtitle {
    font-size: 16px;
  }
  .faq-question {
    font-size: 16px;
  }
  .faq-answer {
    font-size: 16px;
  }
}

/* ============ TESTIMONIALS ============ */
.testimonials {
  position: relative;
  padding: 50px 0 40px;
  background: var(--color-bg-lightgrey);
  margin-bottom: 80px;
}

.testimonials__video {
  position: relative;
  padding: 50px 0 40px;
  background: var(--color-bg-lightgrey);
  margin-bottom: 10px;
}

.testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.testimonials .consistency-feature__icon {
  width: 100px;
  height: 100px;
}

.testimonials__video .consistency-feature__icon {
  width: 100px;
  height: 100px;
}

.testimonials__title-group {
  text-align: center;
  line-height: 1.3;
}
.testimonials__title {
  margin-bottom: 8px;
  font-size: 40px;
  font-weight: 700;
}
.testimonials__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.testimonials__icon {
  height: 30px;
}
.testimonials__subtitle {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-darkgrey);
  width:60%;
  margin: 0 auto;
}
.testimonials__slider {
  position: relative;
  width: 100%;
  overflow: hidden;

}
.testimonials__wrapper {
  display: flex;
  height: auto;
  transition: transform 0.4s cubic-bezier(.7, 0, .3, 1);
  will-change: transform;

}
.testimonials__slide {
  min-width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  column-gap: 8px;
  padding: 0 8px;
}

.testimonials__slide--5cols { column-count: 5; }
.testimonials__slide--4cols { column-count: 4; }
.testimonials__slide--3cols { column-count: 3; }
.testimonials__slide--2cols { column-count: 2; }
.testimonials__slide--1cols { column-count: 1; }

.testimonials__item {
  break-inside: avoid;
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  flex: 0 1 auto;
  max-height: 100%;
}
.testimonials__img {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.testimonials__wrapper,
.testimonials__slide,
.testimonials__item,
.testimonials__slider {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.testimonials__pagination {
  display: flex;
  justify-content: center;
  padding: 0 10px;
  margin-top: 10px;
  gap: 10px;
  flex-wrap: wrap;

}
.testimonials__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #d3d3d3;
  cursor: pointer;
  transition: background-color 0.3s;
}
.testimonials__dot_active {
  background-color: red;
}

@media (max-width: 992px) {
  .testimonials__title {
    font-size: 35px;
  }
  .testimonials__subtitle {
    width: 100%;
  }
  /* .testimonials__slide {
    column-count: 2;
  } */
}

@media (max-width: 768px) {
  .testimonials__slide {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    column-count: 1;
  }
  .testimonials {
    padding: 20px 0 40px;
  }
  .testimonials__slide {
    padding: 0px;
  }
  .testimonials__title {
    font-size: 32px;
  }
  .testimonials__subtitle {
    font-size: 18px;
    line-height: 1.3;
  }
  .testimonials .consistency-feature__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  .testimonials__video .consistency-feature__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  } 
}

/* ============ FOOTER ============ */
.footer {
  background: var(--color-bg-main);
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 48px;
  font-size: 16px;
  color: var(--color-text-grey);
}
.footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.footer__brand {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__logo {
  margin-bottom: -2px;
  height: 20px;
  display: block;
}
.footer__year {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__link {
  color: var(--color-text-grey);
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.footer__link--highlight {
  color: var(--color-text-light);
  background: var(--color-btn-bg);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.footer__link:hover {
  color: var(--color-link-hover);
}
.footer__link--highlight:hover {
  color: var(--color-text-light);
  background: var(--color-btn-bg-hover);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .footer__container {
    gap: 10px;
  }
  .footer__logo {
    height: 14px;
    display: block;
  }
  .footer__year {
    font-size: 10px;
    display: block;
  }
  .footer__links {
    gap: 20px;
    margin-left: 0;
  }
  .footer__link {
    font-size: 10px;
  }
  .footer__link--highlight {
    padding: 4px 12px;
  }
}
@media (max-width: 576px) {
  .footer__links {
    gap: 12px;
  }
}

/* ============================================================================
   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;
  inset: -8px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(231, 220, 208, 0.14) 42%,
    rgba(255, 255, 255, 0) 76%
  );
  filter: blur(100px);
}

.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 {
    inset: -6px;
    filter: blur(36px);
  }

  .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;
  }
}