/** Shopify CDN: Minification failed

Line 2653:19 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:abs-of-mayhem-1 (INDEX:0) */
.abs-mayhem {
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .abs-mayhem__title {
    color: black;
    font-size: 40px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    margin: 0 0 8px 0;
  }
  .abs-mayhem__subtitle {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 24px 0;
    max-width: 720px;
  }
  .abs-mayhem__loading {
    padding: 40px 0;
    color: #6b6b6b;
    font-size: 15px;
  }
  .abs-mayhem__card {
    background: white;
    border-radius: 16px;
    padding: 28px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .abs-mayhem__card--disconnected {
    border: 2px solid #FFD201;
  }
  .abs-mayhem__strava-logo { margin-bottom: 4px; }
  .abs-mayhem__card-title { font-size: 22px; font-weight: 700; margin: 0; }
  .abs-mayhem__card-body { color: #333; font-size: 15px; line-height: 22px; margin: 0; }
  .abs-mayhem__qualifying { color: #6b6b6b; font-size: 13px; margin: 0; }
  .abs-mayhem__connect-btn {
    display: inline-block;
    padding: 12px 20px;
    background: #fc4c02;
    color: white;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    margin-top: 8px;
  }
  .abs-mayhem__connect-btn:hover { background: #d33f01; color: white; }

  .abs-mayhem__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }
  .abs-mayhem__stat {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .abs-mayhem__stat--highlight { background: #FFD201; }
  .abs-mayhem__stat-value { font-size: 30px; font-weight: 700; color: black; }
  .abs-mayhem__stat-label { font-size: 14px; font-weight: 600; color: black; }

  .abs-mayhem__rules {
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    max-width: 720px;
  }
  .abs-mayhem__rules-title { font-size: 16px; font-weight: 700; margin: 0 0 8px 0; }
  .abs-mayhem__rules-body { color: #333; font-size: 14px; line-height: 20px; margin: 0; }

  @media screen and (max-width: 768px) {
    .abs-mayhem__title { font-size: 28px; }
  }
/* END_SECTION:abs-of-mayhem-1 */

/* START_SECTION:affiliate-assets-library-1 (INDEX:1) */
.aal1-section {
  padding-top: 100px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}

.aal1-header {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.aal1-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 56px;
  background: #FFD201;
  border-radius: 12px;
}

.aal1-badge-icon-wrapper {
  width: 21px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.aal1-badge-icon-img {
  width: 21px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.aal1-badge-text {
  color: #212121;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  text-align: center;
  word-wrap: break-word;
  white-space: nowrap;
}

.aal1-heading {
  align-self: stretch;
  text-align: center;
  color: #212121;
  font-size: 52px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  line-height: 65px;
  margin: 0;
}

@media (max-width: 749px) {
  .aal1-section {
    padding-top: 28px;
    padding-bottom: 22px;
    gap: 22px;
  }
  .aal1-header { gap: 14px; }
  .aal1-badge {
    padding: 0 16px;
    height: 44px;
    border-radius: 10px;
  }
  .aal1-badge-text { font-size: 13px; }
  .aal1-heading {
    font-size: 28px;
    line-height: 1.1;
  }
}

@media (max-width: 480px) {
  .aal1-heading { font-size: 24px; }
}
/* END_SECTION:affiliate-assets-library-1 */

/* START_SECTION:affiliate-assets-library-2 (INDEX:2) */
/* ═══════════════════════════════════════════════
   AFFILIATE ASSETS LIBRARY 2 — Section Styles
   Prefix: aal2-
═══════════════════════════════════════════════ */

/* ── Outer Shell ── */
.aal2-section {
    padding: 50px 0;
}

.aal2-section>.page-width {
  background: #212121;
  border-radius: 20px;
  overflow: hidden;
}

/* ── Inner Wrapper (padding + flex column) ── */
.aal2-wrapper {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ═══ SECTION HEADER ═══ */
.aal2-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.aal2-header__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: #D70000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.aal2-header__icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.aal2-header__title {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 65px;
  margin: 0;
}

/* ═══ MAIN CONTENT COLUMN ═══ */
.aal2-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ═══ ACTIVE CAMPAIGN GRADIENT CARD ═══ */
.aal2-active-campaign {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Campaign top row: info (left) + commission (right) */
.aal2-campaign__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.aal2-campaign__info {
  display: flex;
  flex-direction: column;
}

.aal2-campaign__badge {
  display: inline-block;
  align-self: flex-start;
  background: #D70000;
  border-radius: 5px;
  padding: 4px 11px;
  color: white;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 13px;
}

.aal2-campaign__title {
  color: white;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 36px;
  margin: 0 0 8px;
}

.aal2-campaign__period {
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

.aal2-campaign__commission {
  text-align: right;
  flex-shrink: 0;
}

.aal2-campaign__commission-label {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 20px;
  margin: 0;
}

.aal2-campaign__commission-value {
  color: white;
  font-size: 36px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 44px;
  margin: 0;
}

/* ═══ THREE INFO BOXES ═══ */
.aal2-campaign__boxes {
  display: flex;
  gap: 24px;
}

.aal2-info-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 12px;
  padding: 20px;
}

.aal2-info-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.aal2-info-box__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.aal2-info-box__title {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

.aal2-info-box__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.90;
}

.aal2-info-box__item {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 20px;
  margin: 0;
}

/* ═══ SUGGESTED FORMATS ═══ */
.aal2-suggested-formats {
  background: rgba(0, 0, 0, 0.20);
  border-radius: 12px;
  padding: 20px;
}

.aal2-formats__title {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0 0 16px;
}

.aal2-formats__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.aal2-format-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 5px;
  padding: 8px 10px;
}

.aal2-format-tag__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.aal2-format-tag__text {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

/* ═══ UPCOMING CAMPAIGN CARDS ═══ */
.aal2-upcoming-cards {
  display: flex;
  gap: 24px;
}

.aal2-upcoming-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  border: 1px solid white;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.aal2-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.aal2-card__badge {
  background: #D70000;
  border-radius: 5px;
  padding: 4px 11px;
  color: white;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 16px;
}

.aal2-card__date {
  color: #6B7280;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.aal2-card__title {
  color: #212121;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 28px;
  margin: 0 0 8px;
}

.aal2-card__desc {
  color: #000000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 20px;
  margin: 0 0 16px;
}

.aal2-card__btn {
  display: block;
  background: white;
  border-radius: 5px;
  border: 1px solid #FFD201;
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  padding: 11px 0;
  text-decoration: none;
  cursor: pointer;
  margin-top: auto;
}

.aal2-card__btn:hover {
  background: #FFD201;
  color: #212121;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop: dark wrapper (48px padding) + 52px Racing Sans header +
 * gradient campaign card with title row, period, info boxes (3-up),
 * formats row, then 2 upcoming campaign cards side-by-side.
 * Stack everything 1-col, shrink title 52→28, info-boxes wrap.
 */
@media (max-width: 749px) {
  .aal2-section { padding: 28px 0; }
  .aal2-wrapper {
    padding: 24px 18px;
    gap: 22px;
  }
  .aal2-header {
    gap: 14px;
    align-items: flex-start;
  }
  .aal2-header__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
  .aal2-header__icon-img {
    width: 22px;
    height: 22px;
  }
  .aal2-header__title {
    font-size: 26px;
    line-height: 1.1;
  }
  .aal2-active-campaign {
    padding: 22px;
    gap: 16px;
    border-radius: 14px;
  }
  .aal2-campaign__header {
    flex-direction: column;
    gap: 12px;
  }
  .aal2-campaign__title {
    font-size: 22px;
    line-height: 1.2;
  }
  .aal2-campaign__period { font-size: 14px; }
  .aal2-campaign__commission {
    text-align: left;
  }
  .aal2-campaign__commission-value { font-size: 26px; }
  .aal2-campaign__boxes {
    flex-direction: column;
    gap: 12px;
  }
  .aal2-info-box {
    padding: 14px;
  }
  .aal2-format-tag__text {
    font-size: 13px;
    white-space: normal;
  }
  /* Upcoming campaign cards: stack instead of 2-col */
  .aal2-upcoming-cards {
    flex-direction: column;
    gap: 14px;
  }
  .aal2-upcoming-card {
    padding: 18px;
  }
  .aal2-card__title {
    font-size: 17px;
    line-height: 1.2;
  }
  .aal2-card__btn {
    padding: 13px 0;
    min-height: 44px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .aal2-header__title { font-size: 22px; }
}
/* END_SECTION:affiliate-assets-library-2 */

/* START_SECTION:affiliate-assets-library-3 (INDEX:3) */
/* ═══════════════════════════════════════════
   Section wrapper
═══════════════════════════════════════════ */
.aal3-section {
  padding: 60px 0 100px 0;
}

/* ═══════════════════════════════════════════
   Two-column layout
═══════════════════════════════════════════ */
.aal3-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

/* ═══════════════════════════════════════════
   Left panel
═══════════════════════════════════════════ */
.aal3-left {
    width: calc(50% - 30px);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.aal3-left-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aal3-heading {
  color: #000;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1em;
  margin: 0;
}

.aal3-subheading {
  color: #000;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

/* ── Library provides ── */
.aal3-library {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 315px;
}

.aal3-library-label {
  color: #212121;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
}

.aal3-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 235px;
}

.aal3-library-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aal3-library-icon {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aal3-library-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.aal3-library-item-label {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   Right panel
═══════════════════════════════════════════ */
.aal3-right {
  width: 50%;
  height: 545px;
  border-radius: 20px;
  background-color: #F07900;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 60px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 30px;
}

/* ── "You turn that into:" badge ── */
.aal3-right-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 16px;
  background: #FFD201;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  color: #212121;
  font-size: 32px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1em;
  white-space: nowrap;
}

/* ── Benefit bullet list ── */
.aal3-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aal3-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1em;
}

.aal3-benefit-icon {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.aal3-benefit-text {
  color: #fff;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1em;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is 50/50 two-column: left has 52px Racing Sans heading
 * + library list, right is an orange hero panel (545px tall).
 * Stack columns; hero shrinks; library list goes full width.
 */
@media (max-width: 749px) {
  .aal3-section { padding: 28px 0; }
  .aal3-container {
    flex-direction: column;
    gap: 22px;
  }
  .aal3-left {
    width: 100%;
    gap: 20px;
  }
  .aal3-heading {
    font-size: 28px;
    line-height: 1.1;
  }
  .aal3-subheading {
    font-size: 14px;
    line-height: 1.45;
  }
  .aal3-library {
    width: 100%;
    gap: 14px;
  }
  .aal3-library-label { font-size: 16px; }
  .aal3-library-list {
    width: 100%;
    gap: 12px;
  }
  .aal3-library-icon img {
    width: 38px;
    height: 38px;
  }
  .aal3-library-item-label { font-size: 14px; }
  .aal3-right {
    width: 100%;
    height: auto;
    min-height: 360px;
    padding: 24px;
    gap: 20px;
    border-radius: 14px;
  }
  .aal3-right-badge {
    font-size: 22px;
    padding: 8px 14px;
  }
  .aal3-benefits-list { gap: 14px; }
  .aal3-benefit-text { font-size: 14px; }
}

@media (max-width: 480px) {
  .aal3-heading { font-size: 24px; }
}
/* END_SECTION:affiliate-assets-library-3 */

/* START_SECTION:all_blogs (INDEX:4) */
.blogs-all-sec {
  padding: 100px 0;
}

/* Hero */
.blogs-all-sec__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.blogs-all-sec__eyebrow {
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.blogs-all-sec__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #212121;
  margin: 0;
  max-width: 800px;
}

.blogs-all-sec__description {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  max-width: 812px;
  margin: 8px auto 0;
}

/* Filters */
.blogs-all-sec__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}

.blogs-all-sec__filter {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border: 2px solid #212121;
  border-radius: 100px;
  background: transparent;
  color: #212121;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.blogs-all-sec__filter:hover,
.blogs-all-sec__filter.is-active {
  background: #212121;
  color: #fff;
}

/* Grid */
.blogs-all-sec__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 640px) {
  .blogs-all-sec__grid {
    grid-template-columns: 1fr;
  }

  .blogs-all-sec__heading {
    font-size: 36px;
    line-height: 38px;
  }
}

/* Blog Card */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease;
}

.blog-card.is-hidden {
  display: none;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card__image-wrap {
  display: block;
  width: 100%;
  /* height: 376px; */
  aspect-ratio: 632 / 376;
  overflow: hidden;
  background: #D9D9D9;
  flex-shrink: 0;
}

.blog-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: #D9D9D9;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__image {
  transform: scale(1.04);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 15px 10px;
  background: #fff;
}

.blog-card__title {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__title:hover {
  text-decoration: underline;
}

/* Meta row */
.blog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-card__author {
  display: flex;
  align-items: center;
  gap: 11px;
}

.blog-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F1F1F2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #212121;
  flex-shrink: 0;
  text-transform: uppercase;
}

.blog-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.blog-card__author-name {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.blog-card__date {
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #212121;
}

.blog-card__linkedin {
  display: flex;
  flex-shrink: 0;
}

.blog-card__linkedin svg {
  display: block;
}

/* Footer */
.blog-card__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-card__divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
}

.blog-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-card__actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-card__comments {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.56px;
  color: #000;
}

.blog-card__bookmark {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.blog-card__share {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.56px;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.blogs-all-sec__empty {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  color: #666;
  text-align: center;
  padding: 40px 0;
}
/* END_SECTION:all_blogs */

/* START_SECTION:ambassador-application (INDEX:5) */
/* ── Modern Ambassador Application — mirrors campus-application ── */
  .amb-apply {
    padding: 60px 0 80px;
    font-family: 'Montserrat', sans-serif;
    color: #1f2937;
    max-width: 760px;
    margin: 0 auto;
  }
  .amb-apply__header {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E7EB;
    position: relative;
  }
  .amb-apply__header::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 80px; height: 3px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-radius: 2px;
  }
  .amb-apply__title {
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 10px 0;
    color: #1f2937;
  }
  .amb-apply__subtitle {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 640px;
  }
  .amb-apply__rates {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .amb-apply__rate-pill {
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .amb-apply__rate-pill--gray { background: #e5e7eb; color: #374151; }

  /* State card (pending / approved / rejected) */
  .amb-apply__state {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-left: 4px solid #FFD201;
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15,20,33,0.04);
  }
  .amb-apply__state-msg {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #1f2937;
    font-weight: 500;
  }
  .amb-apply__state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .amb-apply__state-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(215,0,0,0.25);
  }
  .amb-apply__state-cta::after { content: '→'; font-size: 16px; }

  /* Form layout */
  .amb-apply__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .amb-apply__group {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 24px 26px 18px;
    box-shadow: 0 1px 2px rgba(15,20,33,0.04);
    transition: box-shadow 0.18s;
  }
  .amb-apply__group:hover { box-shadow: 0 4px 14px rgba(15,20,33,0.06); }
  .amb-apply__group legend {
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    padding: 0 12px;
    font-size: 18px;
    color: #1f2937;
    letter-spacing: 0.02em;
    background: #fff;
    border-radius: 4px;
  }

  /* Fields */
  .amb-apply__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0;
  }
  .amb-apply__field label {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
  }
  .amb-apply__field label small { font-weight: 500; color: #6b7280; }
  .amb-apply__field input,
  .amb-apply__field select,
  .amb-apply__field textarea {
    padding: 11px 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .amb-apply__field input:focus,
  .amb-apply__field select:focus,
  .amb-apply__field textarea:focus {
    outline: none;
    border-color: #FFD201;
    box-shadow: 0 0 0 3px rgba(255,210,1,0.18);
  }
  .amb-apply__field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
    cursor: pointer;
  }
  .amb-apply__field textarea { resize: vertical; min-height: 110px; }
  .amb-apply__field small {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
  }
  #aa-preferredCode {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 15px;
  }
  .amb-apply__inline-note {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fffbeb;
    border-left: 3px solid #FFD201;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
  }

  /* Fitness focus chips + general checks */
  .amb-apply__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .amb-apply__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
  }
  .amb-apply__field .amb-apply__checks .amb-apply__check {
    padding: 8px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    transition: all 0.15s;
  }
  .amb-apply__field .amb-apply__checks .amb-apply__check:hover {
    border-color: #FFD201;
    background: #fffbeb;
  }
  .amb-apply__field .amb-apply__checks .amb-apply__check input { display: none; }
  .amb-apply__field .amb-apply__checks .amb-apply__check:has(input:checked) {
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
  }

  /* Code preview chip */
  .amb-apply__code-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }
  .amb-apply__code-preview-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
  }
  .amb-apply__code-preview-badge {
    font-family: 'Racing Sans One', cursive;
    font-size: 16px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    letter-spacing: 0.05em;
  }

  /* Payouts */
  .amb-apply__payouts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
  }
  .amb-apply__payout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
  }
  .amb-apply__payout:hover { border-color: #FFD201; background: #fffbeb; }
  .amb-apply__payout input { position: absolute; opacity: 0; pointer-events: none; }
  .amb-apply__payout-icon { font-size: 24px; }
  .amb-apply__payout-name { font-size: 13px; font-weight: 600; color: #374151; }
  .amb-apply__payout:has(input:checked) {
    border-color: transparent;
    background: linear-gradient(135deg, #fffbeb, #fff5f5);
    box-shadow: 0 0 0 2px #FFD201 inset, 0 4px 14px rgba(215,0,0,0.12);
  }

  /* Agreements (large checkbox) */
  .amb-apply__group:nth-last-of-type(2) .amb-apply__check,
  .amb-apply__group:last-of-type .amb-apply__check {
    padding: 10px 0;
    font-size: 14px;
    align-items: flex-start;
  }
  .amb-apply__group:nth-last-of-type(2) .amb-apply__check input[type="checkbox"],
  .amb-apply__group:last-of-type .amb-apply__check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #D70000;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .amb-apply__link {
    color: #D70000;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Submit */
  .amb-apply__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    padding: 14px 32px;
    border: 0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: fit-content;
    margin-top: 8px;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  }
  .amb-apply__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(215,0,0,0.25);
  }
  .amb-apply__submit::after { content: '→'; font-size: 18px; }
  .amb-apply__submit:disabled { opacity: 0.55; cursor: not-allowed; }

  .amb-apply__status {
    min-height: 22px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
  }
  .amb-apply__status--error {
    color: #8a1c1c;
    background: #fde8e6;
    border-left: 3px solid #c93030;
    padding: 10px 14px;
    border-radius: 6px;
  }

  /* Logged-out gate */
  .amb-apply__gate {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15,20,33,0.06);
  }
  .amb-apply__gate-icon { font-size: 56px; margin-bottom: 12px; }
  .amb-apply__gate-title {
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    font-size: 32px;
    margin: 0 0 12px;
    color: #1f2937;
  }
  .amb-apply__gate-text {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    max-width: 480px;
    margin: 0 auto 24px;
  }
  .amb-apply__gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }
  .amb-apply__gate-link {
    color: #1f2937;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .amb-apply__gate-link:hover { color: #D70000; }

  @media (max-width: 600px) {
    .amb-apply__title { font-size: 34px; }
    .amb-apply__group { padding: 20px 18px 14px; }
    .amb-apply__payouts { grid-template-columns: 1fr; }
    .amb-apply__gate { padding: 36px 22px; }
    .amb-apply__gate-title { font-size: 26px; }
  }
/* END_SECTION:ambassador-application */

/* START_SECTION:ambassador-leaderboard (INDEX:6) */
.ambassador-leaderboard {
    padding: 64px 0 56px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    color: #1a1a1a;
  }

  .alb-header { margin-bottom: 24px; }
  .alb-title {
    font-family: 'Racing Sans One', 'Bebas Neue', cursive;
    font-size: clamp(32px, 5vw, 48px);
    margin: 0 0 8px;
    color: #1a1a1a;
  }
  .alb-subtitle {
    margin: 0;
    font-size: 15px;
    color: #555;
    max-width: 620px;
  }

  /* "My rank" pill row */
  .alb-mine {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
  }
  .alb-pill {
    background: #FFD201;
    border-radius: 10px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
  }
  .alb-pill__label { letter-spacing: 0.04em; }
  .alb-pill__value { font-weight: 800; }

  .alb-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
    background: #fff;
  }
  .alb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
  }
  .alb-table thead tr {
    background: #1a1a1a;
    color: #FFD201;
    text-align: left;
  }
  .alb-table th,
  .alb-table td {
    padding: 13px 18px;
  }
  .alb-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
  }
  .alb-table tbody tr:last-child { border-bottom: none; }
  .alb-table tbody tr:hover { background: #FFFBE6; }

  .alb-table tbody tr.alb-top3 {
    background: #FFF9D6;
    font-weight: 700;
  }
  .alb-table tbody tr.alb-me {
    background: #FFE8E8;
    font-weight: 800;
  }
  .alb-table tbody tr.alb-me.alb-top3 {
    /* When the caller is also in the top 3, "you" highlight wins. */
    background: #FFE0E0;
  }

  .alb-rank {
    font-size: 17px;
    font-weight: 800;
    color: #D70000;
    width: 60px;
  }
  .alb-code {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    letter-spacing: 0.02em;
  }
  .alb-me-badge {
    background: #D70000;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .alb-loading td,
  .alb-empty {
    text-align: center;
    color: #888;
    padding: 36px 18px;
  }

  .alb-footnote {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    text-align: right;
  }

  @media (max-width: 640px) {
    .alb-table th,
    .alb-table td { padding: 10px 12px; }
    .alb-rank { width: 40px; }
  }
/* END_SECTION:ambassador-leaderboard */

/* START_SECTION:ambassador-state-button (INDEX:7) */
.amb-state { max-width: 560px; margin: 24px auto; font-family: 'Montserrat', sans-serif; }
  .amb-state__box { padding: 20px 24px; border-radius: 10px; border: 1px solid #d0d4de; background: #fff; }
  .amb-state__box--pending { border-color: #f1c40f; background: #fffbe6; }
  .amb-state__box--approved { border-color: #1fa15e; background: #e9f7ef; }
  .amb-state__box--rejected { border-color: #d43131; background: #fdecec; }
  .amb-state__title { font-family: 'Racing Sans One', cursive; font-size: 26px; margin: 0 0 6px; color: #1f2533; }
  .amb-state__copy { margin: 0 0 14px; font-size: 14px; color: #2f384b; line-height: 1.5; }
  .amb-state__btn { display: inline-block; padding: 10px 20px; border-radius: 5px; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; }
  .amb-state__btn--primary { background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff; }
  .amb-state__btn--disabled { background: #e1e4ec; color: #5b6477; cursor: not-allowed; }
  .amb-state__tools { border: 1px solid #b7dfc9; border-radius: 7px; overflow: hidden; margin-bottom: 14px; }
  .amb-state__tool-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f0faf5; border-bottom: 1px solid #b7dfc9; }
  .amb-state__tool-row:last-child { border-bottom: 0; }
  .amb-state__tool-label { font-size: 11px; font-weight: 700; color: #1fa15e; text-transform: uppercase; letter-spacing: 0.06em; min-width: 80px; }
  .amb-state__tool-value { font-size: 13px; font-weight: 700; color: #1f2533; flex: 1; word-break: break-all; }
  .amb-state__tool-value--link { font-weight: 400; font-size: 12px; color: #374151; }
  .amb-state__copy-btn { background: none; border: 1px solid #b7dfc9; border-radius: 5px; padding: 4px 6px; cursor: pointer; color: #1fa15e; flex-shrink: 0; display: flex; align-items: center; }
  .amb-state__copy-btn:hover { background: #e9f7ef; }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * The tool-rows render code/link side-by-side with a copy button.
   * On a 375px viewport the long referral link gets truncated and
   * the button can fall off-row. Stack the rows vertically.
   */
  @media (max-width: 749px) {
    .amb-state { margin: 18px auto; }
    .amb-state__box { padding: 16px 18px; }
    .amb-state__title { font-size: 22px; }
    .amb-state__copy { font-size: 13px; }
    .amb-state__btn {
      display: block;
      width: 100%;
      text-align: center;
      padding: 12px 18px;
      min-height: 44px;
      font-size: 14px;
    }
    .amb-state__tool-row {
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 10px 12px;
      gap: 6px;
    }
    .amb-state__tool-label {
      flex: 0 0 100%;
      min-width: 0;
    }
    .amb-state__tool-value {
      flex: 1 1 calc(100% - 40px);
      font-size: 12px;
    }
    .amb-state__copy-btn { flex-shrink: 0; }
  }
/* END_SECTION:ambassador-state-button */

/* START_SECTION:ambassador_program_1 (INDEX:8) */
.ap1-outer {
  padding-top: 100px;
  padding-bottom: 100px;
}

.ap1-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  border-radius: 15px;
  overflow: hidden;
  background: #ffffff;
}

.ap1-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0 20px 60px;
}

.ap1-heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  word-wrap: break-word;
  margin: 0;
}

.ap1-description {
  color: #000000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  margin: 0;
}

.ap1-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ap1-btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #ffffff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1em;
}

.ap1-btn-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  border-radius: 5px;
  outline: 1px solid #D70000;
  color: #D70000;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1em;
}

.ap1-image-wrap {
  flex-shrink: 0;
  width: 569px;
  height: 100%;
}

.ap1-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap1-placeholder {
  width: 100%;
  height: 100%;
}

/* Status cards (pending / cooldown) — full card layout */
.ap1-status-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  max-width: 460px;
}
.ap1-status-card--pending { border-color: #fde68a; background: #fffbeb; }
.ap1-status-card--cooldown { border-color: #cbd5e1; background: #f1f5f9; }

/* Thin status banner (revoked) — single-line strip with title + inline body.
   Sits above the regular .ap1-buttons row so the Reapply button keeps the
   same visual weight as the non-member primary CTA. */
.ap1-status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  max-width: 560px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.4;
}
.ap1-status-banner__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.ap1-status-banner__body {
  font-size: 13px;
  color: #475569;
}
.ap1-status-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.ap1-status-body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}
.ap1-status-card .ap1-btn-primary,
.ap1-status-card .ap1-btn-secondary {
  align-self: flex-start;
  margin-top: 4px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop layout is a flex card with content on the left and a fixed
 * 569px image on the right. On a 430px iPhone the 569px image alone
 * blows past viewport, and the 60px left padding + 52px heading leave
 * almost no room for actual copy.
 *
 * Fix: stack vertically. Image on top, content below. Image scales to
 * the card width, content fills the remaining space. Headings shrink
 * to fit phone widths. Buttons stretch to full width for chunky tap
 * targets.
 */
@media (max-width: 749px) {
  .ap1-outer {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .ap1-card {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .ap1-content {
    padding: 24px 20px;
    gap: 16px;
    order: 2;
  }
  .ap1-image-wrap {
    width: 100%;
    height: 220px;
    order: 1;
  }
  .ap1-heading {
    font-size: 36px;
    line-height: 38px;
  }
  .ap1-description {
    font-size: 15px;
    line-height: 1.5;
  }
  .ap1-buttons {
    width: 100%;
    gap: 12px;
  }
  .ap1-btn-primary,
  .ap1-btn-secondary {
    flex: 1 1 100%;
    padding: 14px 18px;
    font-size: 15px;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
  .ap1-status-card,
  .ap1-status-banner {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .ap1-heading {
    font-size: 30px;
    line-height: 32px;
  }
  .ap1-image-wrap {
    height: 180px;
  }
}
/* END_SECTION:ambassador_program_1 */

/* START_SECTION:ambassador_program_2 (INDEX:9) */
/* ============================================================
   Ambassador Program 2 — How It Works
   ============================================================ */

.amp2 {
  padding: 60px 0;
}

.amp2__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 35px;
}

/* ----- Heading ----- */
.amp2__heading {
  align-self: stretch;
  text-align: center;
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  word-wrap: break-word;
  margin: 0;
}

/* ----- Two-column layout ----- */
.amp2__layout {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 29px;
  width: 100%;
}

/* ============================================================
   LEFT COLUMN
   ============================================================ */

.amp2__left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
  flex: 1;
  min-width: 0;
  max-width: 725px;
}

.amp2__subtitle {
  align-self: stretch;
  color: var(--black, #212121);
  font-size: 32px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 24.64px;
  word-wrap: break-word;
  margin: 0;
}

/* ----- Accordion container ----- */
.amp2__accordion {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 20px;
}

/* ----- Single accordion item ----- */
.amp2__item {
  padding: 10px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  outline: 1px solid #F8BE00;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ----- Item header row ----- */
.amp2__item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.amp2__item-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

/* ----- Icon (gradient background + image) ----- */
.amp2__item-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.amp2__item-icon img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}

/* ----- Item title ----- */
.amp2__item-title {
  color: var(--black, #212121);
  font-size: 22px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  line-height: 1.25;
}

/* ----- Toggle (+/−) ----- */
.amp2__item-toggle {
  width: 25px;
  height: 25px;
  background: #212121;
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

.amp2__item-toggle::before,
.amp2__item-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: white;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Horizontal bar — always visible */
.amp2__item-toggle::before {
  width: 13px;
  height: 2px;
}

/* Vertical bar — hidden when open */
.amp2__item-toggle::after {
  width: 2px;
  height: 13px;
}

.amp2__item--open .amp2__item-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ----- Item body (expandable with transition) ----- */
.amp2__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  align-self: stretch;
}

.amp2__item--open .amp2__item-body {
  grid-template-rows: 1fr;
}

.amp2__item-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 0 56px; /* 40px icon + 16px gap */
  display: flex;
  align-items: center;
  gap: 10px;
  transition: padding-bottom 0.35s ease;
}

.amp2__item--open .amp2__item-body-inner {
  padding-bottom: 6px;
}

.amp2__item-desc {
  flex: 1 1 0;
  color: var(--black, #212121);
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   RIGHT COLUMN — Swiper Slider
   ============================================================ */

.amp2__right {
  width: 566px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 20px;
  overflow: hidden;
}

.amp2__swiper {
  height: 100%;
  min-height: 491px;
}

.amp2__swiper .swiper-wrapper {
  height: 100%;
}

/* ----- Slide ----- */
.amp2__slide {
  position: relative;
  height: 100%;
}

.amp2__slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

.amp2__slide-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #888;
  z-index: 0;
}

/* ----- Slide caption (gradient bar) ----- */
/* bottom: pagination 20px + dot height 13px + gap 12px = 45px */
.amp2__slide-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 45px;
  padding: 12px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.amp2__slide-caption-text {
  flex: 1 1 0;
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.5;
}

.amp2__slide-caption-text strong {
  font-weight: 700;
}

/* ----- Swiper pagination bullets ----- */
.amp2__swiper .amp2__pagination {
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.amp2__swiper .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  background: rgba(255, 255, 255, 0.30);
  border-radius: 20px;
  opacity: 1;
  margin: 0 !important;
  transition: width 0.3s ease, background 0.3s ease;
}

.amp2__swiper .swiper-pagination-bullet-active {
  width: 56px;
  background: white;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a two-column layout: accordion (max-width 725px) on
 * left, 566px-wide swiper image carousel on right. On a 430px iPhone
 * the row shrinks each column to ~205px which destroys both the
 * accordion text and the image. Stack vertically: accordion first
 * (the actual program info), images below as a visual reinforcement.
 */
@media (max-width: 749px) {
  .amp2 { padding: 28px 0; }
  .amp2__wrapper { gap: 22px; }
  .amp2__heading {
    font-size: 28px;
    line-height: 1.15;
  }
  .amp2__layout {
    flex-direction: column;
    gap: 22px;
  }
  .amp2__left {
    max-width: 100%;
    gap: 18px;
  }
  .amp2__subtitle {
    font-size: 20px;
    line-height: 1.2;
  }
  .amp2__accordion { gap: 12px; }
  .amp2__item-title { font-size: 16px; }
  .amp2__item-body-inner {
    padding: 0 0 0 44px; /* 32px icon + 12px gap */
  }
  .amp2__item-desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .amp2__right {
    width: 100%;
    min-height: 280px;
    border-radius: 14px;
  }
  .amp2__swiper {
    min-height: 280px;
  }
  .amp2__slide-caption {
    bottom: 40px;
    padding: 10px;
    left: 12px;
    right: 12px;
  }
  .amp2__slide-caption-text {
    font-size: 14px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .amp2__heading { font-size: 24px; }
  .amp2__right, .amp2__swiper { min-height: 220px; }
}
/* END_SECTION:ambassador_program_2 */

/* START_SECTION:ambassador_program_3 (INDEX:10) */
.ap3-outer {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .ap3-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  .ap3-image {
    width: 598px;
    min-width: 598px;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  .ap3-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
  }

  .ap3-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .ap3-heading {
    color: #000;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 56px;
    word-wrap: break-word;
    margin: 0;
  }

  .ap3-subheading {
    color: #000;
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    margin: 0;
  }

  .ap3-perks-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ap3-perk-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .ap3-perk-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    object-fit: contain;
  }

  .ap3-perk-text {
    color: #000;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.2em;
  }

  @media screen and (max-width: 1024px) {
    .ap3-inner {
      flex-direction: column;
      align-items: center;
    }

    .ap3-image {
      width: 100%;
      min-width: unset;
      height: auto;
      max-height: 500px;
    }

    .ap3-content {
      width: 100%;
    }

    .ap3-heading {
      font-size: 40px;
      line-height: 44px;
    }
  }

  @media screen and (max-width: 640px) {
    .ap3-outer {
      padding-top: 60px;
      padding-bottom: 60px;
    }

    .ap3-heading {
      font-size: 32px;
      line-height: 36px;
    }

    .ap3-perk-text {
      font-size: 18px;
    }
  }
/* END_SECTION:ambassador_program_3 */

/* START_SECTION:ambassador_program_4 (INDEX:11) */
/* ===== AP4: AMBASSADOR PROGRAM 4 ===== */

.ap4-section {
  padding: 60px 0;
}

/* --- Header --- */
.ap4-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
  text-align: center;
}

.ap4-header__title {
  color: #000;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 56px;
  word-wrap: break-word;
  margin: 0;
}

.ap4-header__subtitle {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* --- Main Layout --- */
.ap4-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* --- Sidebar --- */
.ap4-sidebar {
  width: 363px;
  flex-shrink: 0;
  background: var(--1, #FFD201);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.ap4-sidebar__image-block {
  position: relative;
  height: 419px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.ap4-sidebar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap4-sidebar__overlay {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ap4-sidebar__why-title {
  color: #fff;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0;
}

.ap4-sidebar__bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  width: 317px;
}

.ap4-sidebar__bullet {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.ap4-sidebar__body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap4-sidebar__how-title {
  color: var(--black, #212121);
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0 0 20px;
}

.ap4-sidebar__how-text {
  color: var(--black, #212121);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

.ap4-sidebar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 10px;
  outline: 2px solid var(--black, #212121);
  outline-offset: -2px;
  text-decoration: none;
  color: var(--black, #212121);
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  background: transparent;
  line-height: 1em
}

.ap4-sidebar__btn-icon {
  width: 30px;
  height: 30px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap4-sidebar__btn-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Connector --- */
.ap4-connector {
    width: 3px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    background: linear-gradient(0deg, #D70201, #F8BE00);
    border-radius: 1000px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - (350px / 2));
}


.ap4-levels-grid-wrap {
    flex: 1;
    position: relative
}

/* --- Levels Grid --- */
.ap4-levels-grid {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.ap4-levels-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap4-levels-col--left,
.ap4-levels-col--right {
  display:flex !important;
  position: relative;
}

/* --- Level Card --- */
.ap4-level-card {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  outline: 3px solid var(--1, #FFD201);
  outline-offset: -3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  min-height: 350px;
}

.ap4-level-card--signed {
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  outline: none;
}

.ap4-level-card__label {
  display: inline-block;
  padding: 0px 10px;
  border-bottom: 2px solid #F8BE00;
  color: #F8BE00;
  font-size: 16px;s
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.ap4-level-card--signed .ap4-level-card__label {
  border-bottom-color: var(--1, #FFD201);
  color: var(--1, #FFD201);
}

.ap4-level-card__name {
  color: #000;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1em;
  word-wrap: break-word;
  margin: 0;
  align-self: stretch;
      margin-top: -15px;
    margin-bottom: 5px;
}

.ap4-level-card__badge {
  align-self: stretch;
  padding: 12px;
  border-radius: 5px;
  outline: 1px solid #D70000;
  outline-offset: -1px;
  text-align: center;
  color: #000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  text-transform: uppercase;
  line-height: 1em;
}

.ap4-level-card--signed .ap4-level-card__badge {
  background: var(--1, #FFD201);
  outline: none;
  font-size: 18px;
}

.ap4-level-card__perks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ap4-level-card__perk {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--black, #212121);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
  line-height: 1.1em
}

.ap4-level-card__perk-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--1, #FFD201);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap4-level-card__perk-icon svg {
  width: 12px;
  height: 12px;
}

.circle_pointer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    display: flex !important;
    border-radius: 100px;
    background: linear-gradient(0deg, #D70201, #F8BE00);
    z-index: 1;
}

.circle_pointer.circle_pointer1, .circle_pointer.circle_pointer3 {
    left: -33px;
}

.circle_pointer.circle_pointer2, .circle_pointer.circle_pointer4 {
    right: -33px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 363px-wide yellow sidebar on the left + 2-column
 * tier-card grid on the right with a vertical connector spine
 * between them. None of that layout makes sense at phone widths.
 * Stack everything single-column, hide the connector + pointer dots
 * (decorative artifacts of the desktop spine), shrink imagery.
 */
@media (max-width: 749px) {
  .ap4-section { padding: 28px 0; }
  .ap4-header {
    margin-bottom: 22px;
    gap: 10px;
  }
  .ap4-header__title {
    font-size: 28px;
    line-height: 1.15;
  }
  .ap4-header__subtitle { font-size: 14px; }
  .ap4-main-content {
    flex-direction: column;
    gap: 24px;
  }
  .ap4-sidebar {
    width: 100%;
  }
  .ap4-sidebar__image-block {
    height: 280px;
  }
  .ap4-sidebar__overlay {
    padding: 16px;
  }
  .ap4-sidebar__why-title,
  .ap4-sidebar__how-title {
    font-size: 22px;
    line-height: 1.15;
  }
  .ap4-sidebar__bullets {
    width: 100%;
    gap: 8px;
  }
  .ap4-sidebar__bullet { font-size: 13px; }
  .ap4-sidebar__how-text { font-size: 14px; }
  .ap4-sidebar__btn {
    font-size: 14px;
    padding: 12px 16px;
    min-height: 48px;
  }
  /* Hide the central spine + side dots — they were the visual link
   * between the sidebar and the cards row on desktop. Stacked layout
   * doesn't have that geometric relationship. */
  .ap4-connector,
  .circle_pointer {
    display: none !important;
  }
  .ap4-levels-grid {
    flex-direction: column;
    gap: 16px;
  }
  .ap4-levels-col {
    gap: 14px;
  }
  .ap4-level-card {
    min-height: 0;
    padding: 16px;
    gap: 10px;
  }
  .ap4-level-card__name {
    font-size: 22px;
    margin-top: -10px;
  }
  .ap4-level-card__badge { font-size: 12px; }
  .ap4-level-card--signed .ap4-level-card__badge { font-size: 14px; }
  .ap4-level-card__perks { gap: 10px; }
  .ap4-level-card__perk { font-size: 13px; }
}

@media (max-width: 480px) {
  .ap4-header__title { font-size: 24px; }
  .ap4-sidebar__image-block { height: 220px; }
}
/* END_SECTION:ambassador_program_4 */

/* START_SECTION:ambassador_program_5 (INDEX:12) */
.ap5-section {
  padding-top: 100px;
  padding-bottom: 60px;
}

.ap5-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ap5-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ap5-heading {
  color: #212121;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  max-width: 400px;
  margin: 0;
}

.ap5-payment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  max-width: 410px;
}

.ap5-payment-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ap5-payment-icon-wrap {
  width: 65px;
  height: 65px;
  padding: 8px;
  background: white;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ap5-payment-icon-wrap img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.ap5-payment-note {
  color: #000000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-align: right;
  margin: 0;
}

.ap5-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.ap5-card {
  flex: 1;
  padding: 20px;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap5-card-icon-wrap {
  width: 46px;
  height: 46px;
  padding: 8px 3px;
  background: #D70000;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.ap5-card-icon-wrap img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ap5-card-text {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.4;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop: heading on left + payment-icons cluster on right (space-
 * between row), then a 4-column feature card row below. On mobile
 * the right cluster squeezes the heading and the 4 cards are too
 * narrow. Stack the header vertically and turn the cards into a
 * 2-col grid (or 1-col on tiny phones).
 */
@media (max-width: 749px) {
  .ap5-section {
    padding-top: 32px;
    padding-bottom: 28px;
  }
  .ap5-container { gap: 24px; }
  .ap5-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ap5-heading {
    font-size: 28px;
    line-height: 1.15;
    max-width: 100%;
  }
  .ap5-payment-info {
    align-items: flex-start;
    max-width: 100%;
    gap: 10px;
  }
  .ap5-payment-icons { gap: 12px; }
  .ap5-payment-icon-wrap {
    width: 52px;
    height: 52px;
    padding: 6px;
  }
  .ap5-payment-icon-wrap img {
    width: 32px;
    height: 32px;
  }
  .ap5-payment-note {
    text-align: left;
    font-size: 12px;
  }
  .ap5-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .ap5-card {
    padding: 14px;
    gap: 10px;
  }
  .ap5-card-icon-wrap {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .ap5-card-icon-wrap img {
    width: 24px;
    height: 24px;
  }
  .ap5-card-text {
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .ap5-cards { grid-template-columns: 1fr; }
  .ap5-heading { font-size: 24px; }
}
/* END_SECTION:ambassador_program_5 */

/* START_SECTION:ambassador_program_6 (INDEX:13) */
.ap6-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ap6-heading {
  color: #000;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
  margin: 0;
}

/* Banner */
.ap6-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 340px;
  background-color: #F0F0F0;
  background-size: cover;
  background-position: center;
}

.ap6-banner-overlay-card {
  position: absolute;
  left: 38px;
  top: 63px;
  width: 550px;
  max-width: calc(100% - 76px);
  padding: 35px 30px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ap6-banner-card-title {
  color: #fff;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0;
}

.ap6-banner-card-text {
  color: #fff;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* Audience Section */
.ap6-audience-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ap6-audience-subtitle {
  color: #000;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0;
}

/* White cards box */
.ap6-cards-container {
  width: 100%;
  padding: 20px 20px 40px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}

.ap6-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 17px;
  width: 100%;
}

/* Individual card */
.ap6-card {
  width: 415px;
  padding: 20px;
  background: #F1F1F2;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ap6-card-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 8.33px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap6-card-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ap6-card-label {
  text-align: center;
  color: #000;
  font-size: 24px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.1em;
}

/* CTA row */
.ap6-cta-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.ap6-tagline {
  color: #212121;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
  text-align: center;
}

.ap6-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ap6-cta-btn:hover {
  opacity: 0.9;
  color: #fff;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop padding 100px top+bottom, banner overlay card 550px wide
 * floating left, audience cards 415px each in a wrapped row, CTA at
 * bottom. On mobile the banner overlay overflows + 415px cards force
 * horizontal scroll. Stack everything, shrink card widths.
 */
@media (max-width: 749px) {
  .ap6-section {
    /* Overrides the inline `padding-top/-bottom: {{settings}}px` */
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .ap6-wrapper { gap: 22px; }
  .ap6-heading {
    font-size: 28px;
    line-height: 1.15;
  }
  .ap6-banner {
    min-height: 280px;
    border-radius: 14px;
  }
  .ap6-banner-overlay-card {
    left: 16px;
    top: 16px;
    right: 16px;
    width: auto;
    max-width: calc(100% - 32px);
    padding: 18px;
    gap: 10px;
  }
  .ap6-banner-card-title {
    font-size: 22px;
    line-height: 1.15;
  }
  .ap6-banner-card-text { font-size: 14px; }
  .ap6-audience-section { gap: 14px; }
  .ap6-audience-subtitle {
    font-size: 22px;
    line-height: 1.15;
    text-align: center;
  }
  .ap6-cards-container {
    padding: 16px 14px 24px;
    gap: 14px;
    border-radius: 14px;
  }
  .ap6-cards-grid { gap: 10px; }
  .ap6-card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 14px;
    gap: 12px;
  }
  .ap6-card-icon {
    width: 40px;
    height: 40px;
  }
  .ap6-card-icon img {
    width: 24px;
    height: 24px;
  }
  .ap6-card-label {
    font-size: 15px;
    text-align: left;
  }
  .ap6-tagline { font-size: 14px; }
  .ap6-cta-btn {
    align-self: stretch;
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .ap6-heading { font-size: 24px; }
  .ap6-banner-card-title { font-size: 20px; }
}
/* END_SECTION:ambassador_program_6 */

/* START_SECTION:best-sellers-top-n (INDEX:18) */
.bsn { padding: clamp(24px, 5vw, 56px) 0; font-family: 'Montserrat', sans-serif; }

  .bsn__title {
    margin: 0 0 6px;
    font-family: 'Racing Sans One', 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(24px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #0f1629;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .bsn__sub { margin: 0 0 20px; font-size: 14px; color: #5b6477; }

  .bsn__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .bsn__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(15, 22, 41, 0.05);
  }
  .bsn__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 22, 41, 0.10);
  }

  .bsn__rank {
    position: absolute;
    top: 10px; left: 10px; z-index: 3;
    background: #FFD201;
    color: #0f1629;
    font-weight: 800;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }

  .bsn__media-link { display: block; text-decoration: none; }
  .bsn__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .bsn__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .bsn__noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #9aa0ac; font-size: 12px; }

  .bsn__sale {
    position: absolute;
    bottom: 10px; left: 10px;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.3px;
  }
  .bsn__sold {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 22, 41, 0.85);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  .bsn__body { flex: 1; padding: 0 4px 12px; }
  .bsn__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0f1629;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    margin-bottom: 4px;
    min-height: 39px;
  }
  .bsn__name:hover { text-decoration: underline; }
  .bsn__vendor {
    font-size: 11px;
    font-weight: 600;
    color: #5b6477;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .bsn__price {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
  }
  .bsn__price-now { color: #d43131; }
  .bsn__price-was {
    color: #9aa0ac;
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 500;
  }

  /* Button — orange→red gradient. Override Dawn's quick-add button defaults
     (theme loads quick-add.css which targets `.quick-add__submit`, so use
     the bsn class to win specificity-wise — both have one class so the
     later-loaded inline stylesheet wins). */
  .bsn__form { margin: 0; }
  .bsn__btn,
  .bsn .quick-add__submit.bsn__btn {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    color: #fff;
    border: 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    position: relative;
    box-shadow: none;
  }
  .bsn__btn:hover { filter: brightness(1.05); }
  .bsn__btn:active { transform: translateY(1px); }
  .bsn__btn--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

  .bsn__shopall { text-align: center; margin-top: 28px; }
  .bsn__shopall-link {
    display: inline-block;
    color: #0f1629;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 2px solid #FFD201;
    padding: 4px 2px;
  }
  .bsn__shopall-link:hover { color: #5b6477; }

  .bsn__empty {
    padding: 40px;
    text-align: center;
    color: #5b6477;
    background: #f6f6f8;
    border-radius: 8px;
    font-size: 14px;
  }

  /* Reflow */
  @media (max-width: 989px) {
    .bsn__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  }
  @media (max-width: 749px) {
    .bsn { padding: 28px 0; }
    .bsn__title { font-size: clamp(22px, 6vw, 30px); line-height: 1.1; }
    .bsn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bsn__card { padding: 10px; }
    .bsn__name { font-size: 14px; }
    .bsn__price { font-size: 13px; }
    .bsn__btn { padding: 11px 12px; font-size: 12px; }
    .bsn__rank { font-size: 12px; padding: 2px 8px; top: 8px; left: 8px; }
    .bsn__sale { font-size: 11px; padding: 3px 10px; bottom: 8px; left: 8px; }
  }
  @media (max-width: 480px) {
    .bsn__title { font-size: 22px; }
    .bsn__grid { grid-template-columns: 1fr; gap: 12px; }
    .bsn__name { font-size: 15px; min-height: 0; }
    .bsn__card { padding: 12px; }
    .bsn__btn { padding: 13px 14px; min-height: 44px; }
  }
/* END_SECTION:best-sellers-top-n */

/* START_SECTION:campus-application (INDEX:20) */
/* ── Modern Campus Application — mirrors ambassador-application ── */
  .campus-apply {
    padding: 60px 0 80px;
    font-family: 'Montserrat', sans-serif;
    color: #1f2937;
    max-width: 760px;
    margin: 0 auto;
  }
  .campus-apply__header {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E7EB;
    position: relative;
  }
  .campus-apply__header::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 80px; height: 3px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-radius: 2px;
  }
  .campus-apply__title {
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 10px 0;
    color: #1f2937;
  }
  .campus-apply__subtitle {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
  }

  /* State card (pending / approved / rejected) */
  .campus-apply__state {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-left: 4px solid #FFD201;
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15,20,33,0.04);
  }
  .campus-apply__state-msg {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #1f2937;
    font-weight: 500;
  }
  .campus-apply__state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .campus-apply__state-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(215,0,0,0.25);
  }
  .campus-apply__state-cta::after { content: '→'; font-size: 16px; }

  /* Form layout */
  .campus-apply__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .campus-apply__group {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 24px 26px 18px;
    box-shadow: 0 1px 2px rgba(15,20,33,0.04);
    transition: box-shadow 0.18s;
  }
  .campus-apply__group:hover { box-shadow: 0 4px 14px rgba(15,20,33,0.06); }
  .campus-apply__group legend {
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    padding: 0 12px;
    font-size: 18px;
    color: #1f2937;
    letter-spacing: 0.02em;
    background: #fff;
    border-radius: 4px;
  }

  /* Fields */
  .campus-apply__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0;
  }
  .campus-apply__field label {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
  }
  .campus-apply__field input,
  .campus-apply__field select,
  .campus-apply__field textarea {
    padding: 11px 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .campus-apply__field input:focus,
  .campus-apply__field select:focus,
  .campus-apply__field textarea:focus {
    outline: none;
    border-color: #FFD201;
    box-shadow: 0 0 0 3px rgba(255,210,1,0.18);
  }
  .campus-apply__field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
    cursor: pointer;
  }
  .campus-apply__field textarea { resize: vertical; min-height: 110px; }
  .campus-apply__field small {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
  }
  #ca-preferredCode {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 15px;
  }

  /* Fitness focus chips */
  .campus-apply__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .campus-apply__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
  }
  /* Chip-style checks inside fitness focus */
  .campus-apply__field .campus-apply__checks .campus-apply__check {
    padding: 8px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    transition: all 0.15s;
  }
  .campus-apply__field .campus-apply__checks .campus-apply__check:hover {
    border-color: #FFD201;
    background: #fffbeb;
  }
  .campus-apply__field .campus-apply__checks .campus-apply__check input { display: none; }
  .campus-apply__field .campus-apply__checks .campus-apply__check:has(input:checked) {
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
  }

  /* Agreements (large checkbox style) */
  .campus-apply__group:last-of-type .campus-apply__check {
    padding: 10px 0;
    font-size: 14px;
    align-items: flex-start;
  }
  .campus-apply__group:last-of-type .campus-apply__check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #D70000;
    margin-top: 2px;
    flex-shrink: 0;
  }

  /* Submit */
  .campus-apply__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    padding: 14px 32px;
    border: 0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: fit-content;
    margin-top: 8px;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  }
  .campus-apply__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(215,0,0,0.25);
  }
  .campus-apply__submit::after { content: '→'; font-size: 18px; }
  .campus-apply__submit:disabled { opacity: 0.55; cursor: not-allowed; }

  .campus-apply__status {
    min-height: 22px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
  }
  .campus-apply__status--error {
    color: #8a1c1c;
    background: #fde8e6;
    border-left: 3px solid #c93030;
    padding: 10px 14px;
    border-radius: 6px;
  }

  /* Loading skeleton */
  .campus-apply__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 14px;
  }
  .campus-apply__spinner {
    width: 36px; height: 36px;
    border: 3px solid #f1f5f9;
    border-top-color: #FFD201;
    border-right-color: #D70000;
    border-radius: 50%;
    animation: campusSpin 0.9s linear infinite;
  }
  @keyframes campusSpin { to { transform: rotate(360deg); } }

  /* Logged-out gate */
  .campus-apply__gate {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15,20,33,0.06);
  }
  .campus-apply__gate-icon { font-size: 56px; margin-bottom: 12px; }
  .campus-apply__gate-title {
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    font-size: 32px;
    margin: 0 0 12px;
    color: #1f2937;
  }
  .campus-apply__gate-text {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    max-width: 480px;
    margin: 0 auto 24px;
  }
  .campus-apply__gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }
  .campus-apply__gate-link {
    color: #1f2937;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .campus-apply__gate-link:hover { color: #D70000; }

  @media (max-width: 600px) {
    .campus-apply__title { font-size: 34px; }
    .campus-apply__group { padding: 20px 18px 14px; }
    .campus-apply__gate { padding: 36px 22px; }
    .campus-apply__gate-title { font-size: 26px; }
  }
/* END_SECTION:campus-application */

/* START_SECTION:campus-leaderboard-1 (INDEX:21) */
.campus-leaderboard {
    padding: 80px 0 60px;
    font-family: 'Montserrat', sans-serif;
  }

  .lb-title {
    font-family: 'Racing Sans One', cursive;
    font-size: 48px;
    font-weight: 400;
    color: #212121;
    margin: 0 0 8px;
  }

  .lb-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 32px;
  }

  .my-rank-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
  }

  .rank-pill {
    background: #FFD201;
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }

  .rank-value {
    font-weight: 500;
  }

  .lb-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #D0D0D0;
  }

  .lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }

  .lb-table thead tr {
    background: #212121;
    color: #FFD201;
    text-align: left;
  }

  .lb-table th,
  .lb-table td {
    padding: 14px 20px;
  }

  .lb-table tbody tr {
    border-bottom: 1px solid #EFEFEF;
    transition: background 0.15s;
  }

  .lb-table tbody tr:hover {
    background: #FFFBE6;
  }

  .lb-table tbody tr.lb-top3 {
    background: #FFF9D6;
    font-weight: 700;
  }

  .lb-table tbody tr.lb-me {
    background: #FFF0F0;
    font-weight: 700;
  }

  .lb-rank {
    font-size: 18px;
    font-weight: 700;
    color: #D70000;
  }

  .lb-loading-row td,
  .lb-empty {
    text-align: center;
    color: #888;
    padding: 32px;
  }

  .lb-updated-at {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    text-align: right;
  }

  @media (max-width: 768px) {
    .lb-title { font-size: 32px; }
  }
/* END_SECTION:campus-leaderboard-1 */

/* START_SECTION:campus-state-button (INDEX:22) */
.campus-state-btn { padding: 20px 0; font-family: 'Montserrat', sans-serif; }
  .campus-state-btn__a {
    display: inline-block; background: #FFD201; color: black; padding: 14px 24px; border-radius: 8px;
    font-weight: 700; text-decoration: none; font-size: 16px;
  }
  .campus-state-btn__a:hover { background: #e6bd00; color: black; }
  .campus-state-btn__a--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .campus-state-btn__hint { margin: 8px 0 0 0; font-size: 13px; color: #4a4a4a; }

  @media (max-width: 749px) {
    .campus-state-btn__a {
      display: block;
      width: 100%;
      text-align: center;
      padding: 14px 18px;
      min-height: 48px;
      font-size: 14px;
    }
  }
/* END_SECTION:campus-state-button */

/* START_SECTION:challenge-leaderboard (INDEX:28) */
.cl { padding: 24px 0; font-family: 'Montserrat', sans-serif; }
  .cl__header { margin-bottom: 14px; }
  .cl__title { margin: 0; font-size: 22px; font-weight: 700; }
  .cl__sub { margin: 4px 0 0; font-size: 14px; color: #5b6477; }
  .cl__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e4ec; border-radius: 8px; overflow: hidden; }
  .cl__table th, .cl__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f5; font-size: 14px; }
  .cl__table th { background: #f6f6f8; color: #5b6477; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
  .cl__rank { width: 48px; font-weight: 700; }
  .cl__metric, .cl__sessions { width: 100px; text-align: right; }
  .cl__status { width: 120px; color: #1fa15e; font-weight: 600; }
  .cl__row--me { background: #fffbea; font-weight: 600; }
  .cl__empty { padding: 40px; text-align: center; color: #5b6477; background: #f6f6f8; border-radius: 8px; }
  .cl__me { margin-top: 12px; padding: 10px 12px; background: #fffbea; border: 1px solid #ffd201; border-radius: 8px; font-size: 13px; }
  .cl__me-label { font-weight: 600; margin-right: 8px; color: #1f2533; }

  @media (max-width: 749px) {
    .cl__title { font-size: 18px; }
    .cl__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cl__table th, .cl__table td { padding: 8px 10px; font-size: 13px; }
    .cl__rank { width: 40px; }
    .cl__metric, .cl__sessions { width: 70px; }
  }
/* END_SECTION:challenge-leaderboard */

/* START_SECTION:challenge-strava-connect (INDEX:29) */
/* ── Strava Connect Card — May 2026 redesign ─────────────────────────
   * Theme-aware light panel matching the challenge countdown above.
   * Gradient red+yellow hairline border, bigger padding (matches the
   * countdown's vertical rhythm), account row INSIDE the strip on a
   * second flex-wrap row so it inherits the panel chrome and stays
   * readable. */
  .csc {
    padding: 14px 0;
    font-family: Montserrat, -apple-system, sans-serif;
  }

  .csc__strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 28px;
    /* Theme-aware: use Shopify's --color-foreground / --color-background
       CSS vars when available, falls back to brand-safe defaults. */
    background:
      rgb(var(--color-background, 255 255 255));
    border: 2px solid transparent;
    border-radius: 14px;
    font-size: 14px;
    color: rgb(var(--color-foreground, 33 33 33));
    flex-wrap: wrap;
    position: relative;
    background-image:
      linear-gradient(
        rgb(var(--color-background, 255 255 255)),
        rgb(var(--color-background, 255 255 255))
      ),
      linear-gradient(90deg, #ffd201 0%, #fc4c02 50%, #d70000 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    min-height: 84px;
  }

  .csc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(252, 76, 2, 0.10);
    border: 1px solid rgba(252, 76, 2, 0.25);
    flex-shrink: 0;
  }
  .csc__icon--ok {
    background: rgba(252, 76, 2, 0.10);
    border-color: rgba(252, 76, 2, 0.25);
  }
  .csc__icon svg { width: 22px; height: 22px; }

  .csc__strip-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    font-size: 15px;
    color: rgba(var(--color-foreground, 33 33 33), 0.75);
  }
  .csc__strip-text strong {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-weight: 400;
    font-size: 26px;
    color: rgb(var(--color-foreground, 33 33 33));
    letter-spacing: 0.01em;
    margin-right: 6px;
  }

  .csc__hint {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(var(--color-foreground, 33 33 33), 0.08);
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    cursor: help;
    vertical-align: middle;
  }
  .csc__hint::before { content: 'i'; font-style: italic; font-weight: 600; }

  .csc__sep {
    color: rgba(var(--color-foreground, 33 33 33), 0.25);
    margin: 0 4px;
  }
  .csc__muted { color: rgba(var(--color-foreground, 33 33 33), 0.55); }

  /* Connect button — Strava-branded gradient, prominent enough that
     un-connected customers can't miss it. This is the single highest
     value action on this surface (no Strava connect → zero progress). */
  .csc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(90deg, #fc4c02 0%, #d63f00 100%);
    color: #fff;
    font-family: Montserrat, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;
    flex-shrink: 0;
    box-shadow:
      0 8px 18px rgba(252, 76, 2, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .csc__btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 12px 24px rgba(252, 76, 2, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
  }
  .csc__btn:active { transform: translateY(0); }
  /* Pulse hint — draws the eye to the connect button on first paint */
  .csc__strip--disconnected .csc__btn {
    animation: csc-pulse 2.2s ease-in-out infinite;
  }
  @keyframes csc-pulse {
    0%, 100% { box-shadow: 0 8px 18px rgba(252, 76, 2, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
    50%      { box-shadow: 0 10px 22px rgba(252, 76, 2, 0.6),  inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
  }
  @media (prefers-reduced-motion: reduce) {
    .csc__strip--disconnected .csc__btn { animation: none; }
  }

  /* Progress bar — gold-orange gradient on light strip background.
     Sits flush right of the text on wide screens, wraps to a full-width
     second row on narrow ones. */
  .csc__bar-wrap {
    flex: 0 0 180px;
    height: 10px;
    background: rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.06);
  }
  .csc__bar {
    height: 100%;
    background: linear-gradient(90deg, #ffd201 0%, #fc4c02 100%);
    border-radius: 999px;
    transition: width .4s ease;
    box-shadow: 0 0 14px rgba(252, 76, 2, 0.45);
  }

  /* Account binding row — INSIDE the strip on flex-wrap row 2.
     `flex-basis: 100%` forces a full-row break so it always sits below
     the main strip content regardless of leaderboard button width. */
  .csc__account {
    flex: 0 0 100%;
    margin: 8px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    font-size: 12.5px;
    color: rgba(var(--color-foreground, 33 33 33), 0.6);
    line-height: 1.5;
    text-align: center;
  }
  .csc__account a {
    color: rgba(var(--color-foreground, 33 33 33), 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-foreground, 33 33 33), 0.25);
    transition: color .12s;
  }
  .csc__account a:hover { color: #fc4c02; }
  .csc__disconnect { color: #d70000 !important; }
  .csc__disconnect:hover { color: #fc4c02 !important; text-decoration-color: #fc4c02; }

  /* Leaderboard CTA — theme-aware: brand red (#D70000) gradient with
     yellow (#FFD201) hover-stripe + trophy icon. Sits at the right end
     of the strip (after the progress bar). Sized to match the strip's
     vertical rhythm (26px tall, same as the disconnected Connect btn).
     Resets default <button> chrome explicitly so it doesn't inherit
     theme-wide button styles that would clash. */
  .csc__lb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    background: linear-gradient(135deg, #D70000 0%, #B30000 100%);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(215, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform .08s, box-shadow .12s, background .12s;
    text-decoration: none;
  }
  .csc__lb-btn:hover {
    background: linear-gradient(135deg, #FFD201 0%, #FFB800 100%);
    color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 184, 0, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  .csc__lb-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .csc__lb-btn:focus-visible {
    outline: 2px solid #FFD201;
    outline-offset: 2px;
  }
  .csc__lb-btn-icon { flex-shrink: 0; }

  /* ── Leaderboard modal ───────────────────────────────────────────
     Visual language matches /sections/campus-leaderboard-1.liquid:
     dark header bar, brand yellow accent, top-3 highlighted, "you"
     row in pink. Self-contained — doesn't depend on any global modal
     CSS that might exist elsewhere in the theme. */
  .csc-lb-bg {
    position: fixed; inset: 0;
    background: rgba(15, 22, 41, 0.65);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .csc-lb-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%; max-width: 720px;
    max-height: 88vh; overflow: auto;
    padding: 28px 28px 20px;
    position: relative;
    font-family: 'Montserrat', -apple-system, sans-serif;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }
  .csc-lb-close {
    position: absolute; top: 12px; right: 16px;
    background: transparent; border: 0;
    font-size: 28px; line-height: 1; cursor: pointer;
    color: #6b7280;
    padding: 4px 10px; border-radius: 6px;
  }
  .csc-lb-close:hover { background: #f1f5f9; color: #111; }
  .csc-lb-head { margin-bottom: 18px; padding-right: 32px; }
  .csc-lb-title {
    font-family: 'Racing Sans One', cursive;
    font-size: 32px; font-weight: 400;
    color: #212121;
    margin: 0 0 4px;
  }
  .csc-lb-sub {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
  }
  .csc-lb-tablewrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
  }
  .csc-lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .csc-lb-table thead tr {
    background: #212121;
    color: #FFD201;
    text-align: left;
  }
  .csc-lb-table th,
  .csc-lb-table td { padding: 12px 16px; }
  .csc-lb-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
  }
  .csc-lb-table tbody tr:hover { background: #FFFBE6; }
  .csc-lb-table tbody tr.csc-lb-top3 { background: #FFF9D6; font-weight: 700; }
  .csc-lb-table tbody tr.csc-lb-me { background: #FFF0F0; font-weight: 700; }
  .csc-lb-table tbody tr.csc-lb-top3.csc-lb-me {
    background: linear-gradient(90deg, #FFF9D6 0%, #FFF0F0 100%);
  }
  .csc-lb-rank {
    font-size: 16px; font-weight: 700; color: #D70000;
    white-space: nowrap;
  }
  .csc-lb-medal { font-size: 14px; }
  .csc-lb-you {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #D70000; color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.04em;
  }
  .csc-lb-loading,
  .csc-lb-empty {
    text-align: center;
    color: #94a3b8;
    padding: 32px !important;
  }
  .csc-lb-foot {
    margin: 12px 4px 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
  }

  @media (max-width: 640px) {
    .csc-lb-modal { padding: 22px 18px 16px; }
    .csc-lb-title { font-size: 24px; }
    .csc-lb-table th,
    .csc-lb-table td { padding: 10px 12px; }
  }

  /* "What counts" footnote — slim secondary line, sits below the main strip.
     Plain text rather than a card; visually subordinate to the strip itself. */
  .csc__footnote {
    margin: 8px 4px 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    display: flex;
    gap: 6px;
    align-items: flex-start;
  }
  .csc__footnote > span:first-child { color: #9ca3af; flex-shrink: 0; }

  /* Skeleton — same outer shape as .csc__strip so the swap is invisible.
     Uses a moving gradient for shimmer rather than opacity-pulse because
     shimmer reads as "data loading" while pulse reads as "disabled". */
  .csc__skeleton { gap: 16px; }
  .csc__sk {
    display: inline-block;
    border-radius: 8px;
    background: linear-gradient(
      90deg,
      rgba(var(--color-foreground, 33 33 33), 0.05) 0%,
      rgba(var(--color-foreground, 33 33 33), 0.12) 50%,
      rgba(var(--color-foreground, 33 33 33), 0.05) 100%
    );
    background-size: 200% 100%;
    animation: csc-shimmer 1.4s linear infinite;
  }
  .csc__sk--icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
  .csc__sk--text { flex: 1 1 auto; height: 20px; max-width: 360px; }
  .csc__sk--btn  { width: 140px; height: 36px; border-radius: 8px; flex-shrink: 0; }

  @keyframes csc-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  /* Respect reduced-motion: drop the shimmer, keep the placeholder shape */
  @media (prefers-reduced-motion: reduce) {
    .csc__sk { animation: none; background: #e2e8f0; }
  }

  @media (max-width: 640px) {
    .csc__bar-wrap { flex-basis: 100%; margin-top: 4px; }
    .csc__lb-btn { flex-basis: 100%; justify-content: center; padding: 8px 12px; }
  }
/* END_SECTION:challenge-strava-connect */

/* START_SECTION:footer_custom (INDEX:40) */
.footer-section {
    background-color: #000000;
    padding: 50px 0 0 0;
    color: #ffffff;
}

.footer-row1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 50px
}

.footer-row2 {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid #fff !important;
}

.footer-row2 p {
    font-size: 14px;
    margin: 0 auto;
}

.footer-column1 {
    width: 60%;
    padding-right: 20px;
}

.footer-column2 {
    width: 40%;
    padding-left: 20px;
}

.menu_header {
    color: #FFF;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1em;
    margin: 0 0 20px 0;
}

.categories-grid,
.products-grid {
    display: flex;
    gap: 20px;
}

.categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.categories-list li {
    line-height: 1.5em;
}

.categories-list li a {
    color: #ffffff;
    text-decoration: none;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
}

.categories-list li a:hover {
    text-decoration: underline;
}

/* ── Mobile (< 750px) ───────────────────────────────────────────────
 * Desktop layout was 60% Categories column + 40% Top Products column,
 * each column splitting into multiple sublists side-by-side. On a 430px
 * iPhone that math compounds — Categories ends up with three 60-70px
 * sublists where text breaks at every word ("Black\nFriday\nBundles").
 *
 * Fix: stack the two columns vertically, then collapse each column's
 * internal grid to two side-by-side sublists at most, and one sublist
 * below 480px. Desktop (>= 750px) layout is untouched.
 */
@media (max-width: 749px) {
    .footer-section {
        padding: 32px 0 0 0;
    }
    .footer-row1 {
        margin-bottom: 24px;
        gap: 32px;
    }
    .footer-column1,
    .footer-column2 {
        width: 100%;
        padding: 0;
    }
    /* Two sublists side by side instead of three — gives each ~50%
     * of the column width which is enough for "Pre-Workout" or
     * "100% Whey Protein" to fit on one line. */
    .categories-grid {
        gap: 16px;
    }
    .categories-grid .categories-list {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
    .products-grid {
        gap: 16px;
    }
    .menu_header {
        font-size: 18px;
        margin-bottom: 14px;
    }
    .categories-list li a {
        font-size: 14px;
        line-height: 1.4em;
    }
    .categories-list {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    /* On phones we'd rather have one tall column than two cramped
     * ones — most product/category names need the full row width. */
    .categories-grid,
    .products-grid {
        flex-direction: column;
        gap: 8px;
    }
    .categories-grid .categories-list,
    .products-grid .categories-list {
        flex: 1 1 100%;
    }
    .footer-row2 p {
        font-size: 12px;
        text-align: center;
    }
}
/* END_SECTION:footer_custom */

/* START_SECTION:get_touch_1 (INDEX:41) */
.get-in-touch-1 {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}

.get-in-touch-1__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 905px;
  margin: 0 auto;
}

.get-in-touch-1__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.get-in-touch-1__subtitle {
  text-align: center;
  color: #000;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
}

.get-in-touch-1__title {
  text-align: center;
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  margin: 0;
}

.get-in-touch-1__description {
  text-align: center;
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  margin: 0;
  max-width: 938px;
}

/* Two-column row */
.get-in-touch-1__row {
  display: flex;
  align-items: center;
  gap: 150px;
  margin-top: 40px;
}

/* Left: Form */
.get-in-touch-1__form {
    width: 50%;
    flex-shrink: 0;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
}

/* Right: Contact info */
.get-in-touch-1__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}

.get-in-touch-1__contact-item {
  display: flex;
  align-items: center;
  gap: 0px;
}

.get-in-touch-1__image-wrap {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
}

.get-in-touch-1__contact-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.get-in-touch-1__contact-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

.get-in-touch-1__contact-label {
  color: #000;
  font-size: 22px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  text-transform: capitalize;
}

.get-in-touch-1__contact-value {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
    word-break: break-all;
    line-height: 1.2em;
}

/* Social */
.get-in-touch-1__social {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.get-in-touch-1__social-heading {
  color: #000;
  font-size: 24px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  text-transform: capitalize;
}

.get-in-touch-1__social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.get-in-touch-1__social-link {
  display: block;
  width: 41px;
  height: 41px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.get-in-touch-1__social-link img,
.get-in-touch-1__social-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Responsive */
@media (max-width: 990px) {
  .get-in-touch-1__row {
    flex-direction: column;
    gap: 40px;
  }

  .get-in-touch-1__form {
    width: 100%;
  }

  .get-in-touch-1__title {
    font-size: 36px;
    line-height: 38px;
  }
}
/* END_SECTION:get_touch_1 */

/* START_SECTION:get_touch_4 (INDEX:44) */
.get_in_touch_4 {
    width: 100%;
    padding: 50px 0px 100px 0px;
  }
  
  .get_in_touch_4__container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  
  /* Left Column */
  .get_in_touch_4__left {
    flex: 0 0 50%;
    max-width: 656px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .get_in_touch_4__left img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  /* Right Column */
  .get_in_touch_4__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .get_in_touch_4__heading {
    font-family: 'Racing Sans One', cursive;
    font-size: 32px;
    font-weight: 400;
    line-height: 46px;
    text-transform: capitalize;
    color: #000;
    margin: 0;
  }
  
  .get_in_touch_4__paragraph {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    margin: 0;
  }

  .get_in_touch_4__cta {
    width: 100%;
    max-width: 242px;
    min-height: 42px;
    padding: 10px 18px;
    margin: 0;
    border: none;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
  }

  a.get_in_touch_4__cta:hover,
  button.get_in_touch_4__cta:hover {
    opacity: 0.92;
  }

  .get_in_touch_4__cta:focus-visible {
    outline: 2px solid #212121;
    outline-offset: 2px;
  }

  .get_in_touch_4__cta-text {
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    word-wrap: break-word;
  }
  
  /* List */
  .get_in_touch_4__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .get_in_touch_4__list-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .get_in_touch_4__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  .get_in_touch_4__icon-fallback {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #D70000;
    border-radius: 50%;
  }
  
  .get_in_touch_4__list-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000;
  }
  
  /* Bottom */
  .get_in_touch_4__bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
  }
  
  .get_in_touch_4__bottom-image {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .get_in_touch_4__bottom-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #000;
    margin: 0;
    font-family: 'Racing Sans One', cursive;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .get_in_touch_4__container {
      flex-direction: column;
    }
  
    .get_in_touch_4__left {
      flex: none;
      max-width: 100%;
      width: 100%;
    }
  
    .get_in_touch_4__heading {
      font-size: 30px;
      line-height: 38px;
    }
  
    .get_in_touch_4__bottom-text {
      font-size: 18px;
    }
  }
/* END_SECTION:get_touch_4 */

/* START_SECTION:giveaways-all-active (INDEX:45) */
.gag { padding: 24px 0; font-family: 'Montserrat', sans-serif; }
  .gag__header { margin-bottom: 14px; }
  .gag__title { margin: 0; font-size: 24px; font-weight: 700; }
  .gag__sub { margin: 4px 0 0; font-size: 14px; color: #5b6477; }
  .gag__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
  .gag__card { background: #fff; border: 1px solid #e1e4ec; border-radius: 10px; padding: 16px; position: relative; }
  .gag__badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #fef2c7; color: #8a6d00; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px; }
  .gag__name { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
  .gag__elig { margin: 0 0 10px; color: #5b6477; font-size: 13px; }
  .gag__prizes { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: #2f384b; }
  .gag__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #5b6477; margin-bottom: 12px; }
  .gag__meta b { color: #1f2533; }
  .gag__btn { width: 100%; background: #ffd201; color: #0f1629; border: 0; padding: 10px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; }
  .gag__btn:hover { background: #e6bd00; }
  .gag__btn:disabled { opacity: .6; cursor: not-allowed; }
  .gag__empty { text-align: center; padding: 40px; color: #5b6477; background: #f6f6f8; border-radius: 8px; }

  @media (max-width: 749px) {
    .gag__title { font-size: 20px; }
    .gag__grid { grid-template-columns: 1fr; gap: 10px; }
    .gag__card { padding: 14px; }
    .gag__btn { padding: 12px 14px; min-height: 44px; }
  }
/* END_SECTION:giveaways-all-active */

/* START_SECTION:giveaways_1 (INDEX:46) */
.giveaway_sec_1 {
    padding: 100px 0 0 0;
}

/* --- Row 1 --- */
.giveaway_sec_1 .giveaway_sec_1_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 631;
    display: flex;
    align-items: center;
}

.giveaway_sec_1 .giveaway_sec_1_content {
    width: 660px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-left: 30px;
}

.giveaway_sec_1 .giveaway_sec_1_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.giveaway_sec_1 .giveaway_sec_1_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.giveaway_sec_1 .giveaway_sec_1_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_1 .giveaway_sec_1_title {
    align-self: stretch;
    color: white;
    font-size: 70px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 54px;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_1 .giveaway_sec_1_desc {
    align-self: stretch;
    color: white;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_1 .giveaway_sec_1_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.giveaway_sec_1 .giveaway_sec_1_btn:hover {
    opacity: 0.9;
}

.giveaway_sec_1 .giveaway_sec_1_btn {
    cursor: pointer;
    border: none;
}

.giveaway_sec_1 .giveaway_sec_1_btn.gw-btn--entered,
.giveaway_sec_1 .giveaway_sec_1_btn:disabled {
    opacity: 0.65;
    cursor: default;
}

/* --- CTA row + tier hint --- */
.giveaway_sec_1 .gw-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px; /* never let the hero touch the cards row below */
}

.giveaway_sec_1 .gw-tier-hint {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 210, 1, 0.35);
    color: white;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.giveaway_sec_1 .gw-tier-hint__mult {
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 18px;
    line-height: 1;
}

.giveaway_sec_1 .gw-tier-hint__label {
    color: rgba(255, 255, 255, 0.85);
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

/* --- Per-card entered badge (corner) --- */
.giveaway_sec_1 .giveaway_card {
    position: relative;
}

.giveaway_sec_1 .giveaway_card__entered-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 210, 1, 0.6);
    color: #FFD201;
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    z-index: 2;
}

.giveaway_sec_1 .giveaway_card__entered-badge::before {
    content: '✓';
    font-size: 11px;
    font-weight: 900;
}

/* --- Picker modal --- */
.giveaway_sec_1 .gw-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: Montserrat, sans-serif;
}

.giveaway_sec_1 .gw-modal[hidden] { display: none; }

.giveaway_sec_1 .gw-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.giveaway_sec_1 .gw-modal__panel {
    position: relative;
    background: #141414;
    border: 1px solid rgba(255, 210, 1, 0.25);
    border-radius: 12px;
    padding: 22px;
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.giveaway_sec_1 .gw-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.giveaway_sec_1 .gw-modal__title {
    color: white;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
}

.giveaway_sec_1 .gw-modal__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.giveaway_sec_1 .gw-modal__close:hover { color: #FFD201; }

.giveaway_sec_1 .gw-modal__hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin: 0 0 14px;
}

.giveaway_sec_1 .gw-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.giveaway_sec_1 .gw-modal__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.giveaway_sec_1 .gw-modal__item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.giveaway_sec_1 .gw-modal__item-cadence {
    color: #111;
    background: linear-gradient(90deg, #FFD201 0%, #FFB000 100%);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.giveaway_sec_1 .gw-modal__item-draws {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.giveaway_sec_1 .gw-modal__item-title {
    color: white;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 18px;
    margin: 0;
    line-height: 1.15;
}

.giveaway_sec_1 .gw-modal__item-prizes {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.giveaway_sec_1 .gw-modal__item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.giveaway_sec_1 .gw-modal__item-entries {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.giveaway_sec_1 .gw-modal__item-entries strong {
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.giveaway_sec_1 .gw-modal__enter-btn {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.giveaway_sec_1 .gw-modal__enter-btn:hover { opacity: 0.92; }
.giveaway_sec_1 .gw-modal__enter-btn:disabled,
.giveaway_sec_1 .gw-modal__enter-btn--entered {
    background: transparent;
    border: 1px solid rgba(255, 210, 1, 0.55);
    color: #FFD201;
    cursor: default;
    opacity: 1;
}

/* Tier-locked variant — neutral grey, less inviting than yellow.
   Communicates "available but not for you yet" without being hostile. */
.giveaway_sec_1 .gw-modal__enter-btn--locked {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
}
.giveaway_sec_1 .gw-modal__enter-btn--login {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    text-decoration: none;
}
.giveaway_sec_1 .gw-modal__enter-btn--login:hover { background: rgba(255, 255, 255, 0.08); }

/* Whole row dims when locked, but the title + prizes stay readable so
   the customer knows what they're aiming to unlock. */
.giveaway_sec_1 .gw-modal__item--locked { opacity: 0.78; }
.giveaway_sec_1 .gw-modal__item--locked .gw-modal__item-title,
.giveaway_sec_1 .gw-modal__item--locked .gw-modal__item-prizes { opacity: 1; }

.giveaway_sec_1 .gw-modal__item-lock {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(255, 210, 1, 0.65);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0 6px 6px 0;
}
.giveaway_sec_1 .gw-modal__item-lock a {
    color: #FFD201;
    text-decoration: underline;
}
.giveaway_sec_1 .gw-modal__item-lock a:hover { color: #fff; }

.giveaway_sec_1 .gw-modal__login {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-align: center;
    margin: 14px 0 0;
}

.giveaway_sec_1 .gw-modal__login a {
    color: #FFD201;
    text-decoration: underline;
}

/* --- Row 2 --- */
.giveaway_sec_1 .giveaway_sec_2_row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    max-width: 963px;
    margin: -95px auto 0 auto;
}

.giveaway_sec_1 .giveaway_card {
    flex: 1;
    min-height: 280px;
    padding: 22px 20px 18px;
    background-color: #212121;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    /* Three layered rows: icon (top) · title+paragraph (center) · draws (footer).
       margin-top:auto on the draws line pushes it to the bottom so all
       three cards line up regardless of paragraph length. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.giveaway_sec_1 .giveaway_card_paragraph {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.giveaway_sec_1 .giveaway_card_draws {
    margin: 8px 0 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.22);
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    width: 100%;
}

.giveaway_sec_1 .giveaway_card_icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.giveaway_sec_1 .giveaway_card_label {
    color: white;
    font-size: 18px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.1em;
}

/* Secondary heading line — sits below `.giveaway_card_label`, holds
   the specific prize name (e.g. "$100 SSS Voucher" under the
   "WEEKLY GIVEAWAY" parent heading). Same display family but lighter
   weight + reduced size so the visual hierarchy reads in order:
   cadence > prize > "Win: …" prize list. */
.giveaway_sec_1 .giveaway_card_sublabel {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-style: italic;
    word-wrap: break-word;
    margin: 4px 0 0;
    line-height: 1.15em;
}

.giveaway_sec_1 .giveaway_card_paragraph {
    color: white;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 1.2em;
    word-wrap: break-word;
    margin: 0;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop hero is a 660px content panel inside a fixed 1320:631
 * aspect-ratio bg-image row, with a 70px Racing Sans heading and a
 * 278px-wide CTA. Below sits a row of 3 ticket cards floated up via
 * margin-top: -95px to overlap the hero. On mobile that overlap looks
 * broken — and the 70px heading wraps catastrophically. Stack vertical,
 * swap the bg-image hero for a contained one, drop card overlap, make
 * cards stack 1-col.
 */
@media (max-width: 749px) {
  .giveaway_sec_1 {
    padding: 28px 0 0 0;
  }
  .giveaway_sec_1 .giveaway_sec_1_row {
    aspect-ratio: auto;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    padding: 28px 16px;
  }
  .giveaway_sec_1 .giveaway_sec_1_content {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .giveaway_sec_1 .giveaway_sec_1_text_group { gap: 12px; }
  .giveaway_sec_1 .giveaway_sec_1_inner { gap: 8px; }
  .giveaway_sec_1 .giveaway_sec_1_subtitle { font-size: 14px; }
  .giveaway_sec_1 .giveaway_sec_1_title {
    font-size: 32px;
    line-height: 1.1;
  }
  .giveaway_sec_1 .giveaway_sec_1_desc { font-size: 14px; }
  .giveaway_sec_1 .giveaway_sec_1_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  .giveaway_sec_1 .gw-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }
  .giveaway_sec_1 .gw-tier-hint { align-self: flex-start; }

  /* Cards row: stack vertically, drop the negative margin overlap
   * (no longer needed when the hero isn't floating cards). */
  .giveaway_sec_1 .giveaway_sec_2_row {
    flex-direction: column;
    max-width: 100%;
    margin: 16px 0 28px 0;
    gap: 14px;
    padding: 0 16px;
  }
  .giveaway_sec_1 .giveaway_card {
    min-height: 180px;
    padding: 18px 16px;
  }
  .giveaway_sec_1 .giveaway_card_icon { width: 44px; height: 44px; }
  .giveaway_sec_1 .giveaway_card_label { font-size: 16px; }
  .giveaway_sec_1 .giveaway_card_sublabel { font-size: 13.5px; }
  .giveaway_sec_1 .giveaway_card_paragraph { font-size: 13px; }
  .giveaway_sec_1 .giveaway_card_draws { font-size: 12px; }

  .giveaway_sec_1 .gw-modal { padding: 12px; }
  .giveaway_sec_1 .gw-modal__panel { padding: 18px; }
  .giveaway_sec_1 .gw-modal__title { font-size: 18px; }
}

@media (max-width: 480px) {
  .giveaway_sec_1 .giveaway_sec_1_title { font-size: 28px; }
}
/* END_SECTION:giveaways_1 */

/* START_SECTION:giveaways_2 (INDEX:47) */
.giveaway_sec_2 {
  padding: 50px 0;
}

.giveaway_sec_2_row1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.giveaway_sec_2__heading {
  font-family: Racing Sans One, sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #212121;
  margin: 0;
}

.giveaway_sec_2__description {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 8px auto 0;
}

/* ── Wrapper ── */
.gvwy2-wrap {
  position: relative;
}

/* ── Card ── */
.gvwy2-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #212121;
  min-height: 380px;
}

/* ── Card body ── */
.gvwy2-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 40px;
}

.gvwy2-card__media {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gvwy2-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}

.gvwy2-card__img--ph {
  width: 260px;
  height: 260px;
  opacity: 0.4;
}

.gvwy2-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gvwy2-card__title {
  font-family: Racing Sans One, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: white;
  margin: 0;
  text-transform: capitalize;
  line-height: 1em;
  text-align: center;
}

.gvwy2-card__desc {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 1.5em;
    text-align: center;
    margin: 0 auto;
}

/* ── Arrow buttons ── */
.gvwy2-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.2s ease, border-color 0.2s ease;
  padding: 0;
  backdrop-filter: blur(4px);
}

.gvwy2-btn--prev { left: -30px; }
.gvwy2-btn--next { right: -30px; }

.gvwy2-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  border-color: white;
}

.gvwy2-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Dot indicators ── */
.gvwy2-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.gvwy2-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(33, 33, 33, 0.25);
  opacity: 1;
  transition: background 0.2s ease, transform 0.2s ease;
  margin: 0 !important;
}

.gvwy2-pagination .swiper-pagination-bullet-active {
  background: #212121;
  transform: scale(1.3);
}

.gvwy2-empty {
  text-align: center;
  color: #888;
  padding: 60px 20px;
  font-family: Montserrat, sans-serif;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .giveaway_sec_2__heading {
    font-size: 36px;
    line-height: 1.2;
  }

  .gvwy2-card__body {
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
    gap: 24px;
    min-height: unset;
  }

  .gvwy2-card__media {
    flex: unset;
    width: 100%;
  }

  .gvwy2-card__img {
    max-width: 220px;
    max-height: 220px;
  }

  .gvwy2-card__title {
    font-size: 22px;
  }

  .gvwy2-card__desc {
    font-size: 14px;
  }

  .gvwy2-btn {
    width: 36px;
    height: 36px;
  }
}
/* END_SECTION:giveaways_2 */

/* START_SECTION:giveaways_3 (INDEX:48) */
.giveaway_sec_3 {
    padding: 50px 0;
}

/* --- Row 1 --- */
.giveaway_sec_3 .giveaway_sec_3_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 606;
    display: flex;
    align-items: center;
    border-radius: 20px;
}

.giveaway_sec_3 .giveaway_sec_3_content {
    width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-left: 30px;
}

.giveaway_sec_3 .giveaway_sec_3_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.giveaway_sec_3 .giveaway_sec_3_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.giveaway_sec_3 .giveaway_sec_3_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_3 .giveaway_sec_3_title {
    align-self: stretch;
    color: white;
    font-size: 45px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1em;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_3_list~div {
    margin-bottom: -50px;
}

.giveaway_sec_3 .giveaway_sec_3_desc {
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5em;
}

.giveaway_sec_3 .giveaway_sec_3_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.giveaway_sec_3 .giveaway_sec_3_btn:hover {
    opacity: 0.9;
}

.giveaway_sec_3_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0;
}

.giveaway_sec_3_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU {
    width: 100%;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: -20%;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 1320:606 aspect-ratio bg-image hero with a 560px-wide
 * content panel margined 30px in. On mobile that aspect-ratio gives
 * a tiny ~190px image height, content gets crushed. Switch to a
 * natural min-height with full-width content + centered text.
 */
@media (max-width: 749px) {
  .giveaway_sec_3 { padding: 28px 0; }
  .giveaway_sec_3 .giveaway_sec_3_row {
    aspect-ratio: auto;
    min-height: 320px;
    border-radius: 14px;
    padding: 24px 16px;
  }
  .giveaway_sec_3 .giveaway_sec_3_content {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .giveaway_sec_3 .giveaway_sec_3_title {
    font-size: 28px;
    line-height: 1.1;
  }
  .giveaway_sec_3 .giveaway_sec_3_desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .giveaway_sec_3 .giveaway_sec_3_subtitle { font-size: 15px; }
  .giveaway_sec_3_list_item { font-size: 13px; }
  .giveaway_sec_3 .giveaway_sec_3_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  /* The Shopify forms embed has a hard-coded -20% left margin from
   * the desktop design — kills it on mobile so the form sits aligned
   * with the rest of the content. */
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: 0;
  }
  .giveaway_sec_3_list~div {
    margin-bottom: 0;
  }
}
/* END_SECTION:giveaways_3 */

/* START_SECTION:giveaways_4 (INDEX:49) */
.giveaway_sec_4 {
  padding: 50px 0 100px;
}

/* ── Row 1: heading / description ── */
.giveaway_sec_4_row1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.giveaway_sec_4__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  color: #212121;
  margin: 0;
}

.giveaway_sec_4__description {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 8px auto 0;
  max-width: 680px;
}

/* ── Slider wrapper ── */
.giveaway_sec_4_row2 {
  position: relative;
  padding-bottom: 48px;
}

.giveaway4-swiper {
  overflow: hidden;
}

/* ── Card ── */
.giveaway4-card {
  background: #212121;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  height: 100%;
}

/* Image */
.giveaway4-card__image-wrap {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.giveaway4-card__image {
  width: 100%;
  height: 496px;
  object-fit: cover;
  display: block;
  border-radius: 20px 20px 0 0;
}

/* Body */
.giveaway4-card__body {
  width: calc(100% - 40px);
  padding: 20px;
}

.giveaway4-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.giveaway4-card__meta-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.giveaway4-card__name {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  display: block;
}

.giveaway4-card__location {
  display: flex;
  align-items: center;
  gap: 7px;
}

.giveaway4-card__icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.giveaway4-card__icon-placeholder {
  display: inline-block;
  width: 25px;
  height: 20px;
  background: #fff;
  flex-shrink: 0;
}

.giveaway4-card__icon-placeholder--state {
  width: 20px;
  height: 25px;
}

.giveaway4-card__city,
.giveaway4-card__state {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

/* Gradient bar */
.giveaway4-card__bar {
    width: 100%;
    height: 66px;
    background: url(/cdn/shop/files/Rectangle_40067.png?v=1772923362);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    z-index: 2;
    bottom: 25px;
}

/* Prize label */
.giveaway4-card__prize {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

/* ── Swiper controls ── */
.giveaway4-pagination {
  bottom: 0 !important;
}

.giveaway4-pagination .swiper-pagination-bullet {
  background: #212121;
  opacity: 0.3;
}

.giveaway4-pagination .swiper-pagination-bullet-active {
  background: #D70201;
  opacity: 1;
}

.giveaway4-btn-prev,
.giveaway4-btn-next {
  color: #D70201;
}

.giveaway4-btn-prev::after,
.giveaway4-btn-next::after {
  font-size: 20px;
  font-weight: 700;
}

.swiper-button-next.giveaway4-btn-next,
.swiper-button-prev.giveaway4-btn-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    background: #00000040;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease, border-color .2s ease;
    padding: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.swiper-button-prev.giveaway4-btn-prev {
    left: 0;
}

.swiper-button-next.giveaway4-btn-next {
    right: 0;
}

.swiper-button-next.giveaway4-btn-next:after, .swiper-button-prev.giveaway4-btn-prev:after {
    font-size: 20px;
}

.giveaway_sec_4 .swiper-slide.swiper-slide-next {
    transform: scale(1.1) !important;
}

.giveaway4-swiper .swiper-slide {
    transform-origin: top center;
    transform: scale(1);
    transition: all ease .3s;
}

.giveaway4-swiper .swiper-wrapper {
    padding-bottom: 70px;
}

.giveaway_sec_4_row3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.giveaway_sec_4 .giveaway_sec_4_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.giveaway_sec_4 .giveaway_sec_4_btn:hover {
    opacity: 0.9;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop card image is 496px tall. On mobile that dominates the
 * fold — shrink. Heading 52 → 28, button stretches.
 */
@media (max-width: 749px) {
  .giveaway_sec_4 { padding: 28px 0 32px; }
  .giveaway_sec_4_row1 { margin-bottom: 22px; }
  .giveaway_sec_4__heading {
    font-size: 28px;
    line-height: 1.1;
  }
  .giveaway_sec_4__description {
    font-size: 14px;
  }
  .giveaway4-card__image { height: 360px; }
  .giveaway4-card__body {
    width: calc(100% - 28px);
    padding: 14px;
  }
  .giveaway4-card__meta-left { gap: 10px; }
  .giveaway4-card__name { font-size: 18px; }
  .giveaway4-card__city,
  .giveaway4-card__state { font-size: 14px; }
  .giveaway4-card__prize { font-size: 11px; }
  .swiper-button-next.giveaway4-btn-next,
  .swiper-button-prev.giveaway4-btn-prev {
    width: 36px;
    height: 36px;
  }
  .swiper-button-next.giveaway4-btn-next:after,
  .swiper-button-prev.giveaway4-btn-prev:after { font-size: 14px; }
  /* Featured slide scale-up looks weird at narrow viewport — bail */
  .giveaway_sec_4 .swiper-slide.swiper-slide-next {
    transform: scale(1) !important;
  }
  .giveaway_sec_4 .giveaway_sec_4_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .giveaway_sec_4__heading { font-size: 24px; }
  .giveaway4-card__image { height: 280px; }
}
/* END_SECTION:giveaways_4 */

/* START_SECTION:header_custom (INDEX:51) */
.promo-banner {
  background: var(--promo-bg, #212121);
}

.promo-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 10px 0;
}

.promo-banner__headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.promo-banner__text,
.promo-banner__highlight {
  color: var(--promo-text, #ffffff);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 2.025;
  word-wrap: break-word;
}

.promo-banner__highlight {
  font-weight: 600;
  text-decoration: underline;
  text-transform: uppercase;
}

.promo-banner__milestones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: none
}

.promo-banner__milestone {
  color: var(--promo-text, #ffffff);
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.6px;
  word-wrap: break-word;
}

.promo-banner__progress {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 48px;
  height: 8px;
  background: var(--promo-accent, #FFD201);
  border-radius: 20px;
  display: block !important;
}

/* Main Header */
.main-header {
  background: #f0f0f0;
  border-bottom: 1px solid var(--main-border, #ffffff);
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0px;
}

.main-header__logo {
  flex-shrink: 0;
  text-decoration: none;
}

.main-header__logo-img {
  display: block;
  max-height: 90px;
  width: auto;
}

.main-header__shop-name {
  color: var(--main-text, #ffffff);
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.main-header__search {
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 74px;
  outline: 1px solid #cccccc;
  overflow: hidden;
  padding: 0 8px 0 24px;
  height: 46px;
}

.main-header__search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--main-text, #232222);
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  outline: none !important;
  box-shadow: none !important;
}

.main-header__search-input::placeholder {
  color: rgba(35, 34, 34, 0.75);
}

.main-header__search-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--main-text, #ffffff);
}

.main-header__cart {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--main-text, #ffffff);
  text-decoration: none;
}

.main-header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  /* Hardcoded brand yellow + dark text. Was inheriting from the
     header's --main-text/--main-bg vars, which on light-on-dark
     headers produced a near-black badge with near-black text — the
     count digit disappeared and visually read as a black dot. */
  background: #FFD201;
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Crisp edge against the cart icon — the white outline keeps the
     badge legible on photo-heavy headers (sale banners etc.). */
  box-shadow: 0 0 0 2px var(--main-bg, #ffffff);
}

/* Second Banner */
.second-banner {
  background: var(--second-bg, #FFD201);
}

.second-banner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}

.second-banner__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.second-banner__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--second-text, #212121);
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.85;
}

.second-banner__check {
  flex-shrink: 0;
  color: var(--second-check, #2DBE60);
}

.second-banner__support {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--second-text, #212121);
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.85;
  text-decoration: none;
}

.second-banner__support:hover {
  text-decoration: underline;
}

/* ===================== SIDEBAR PANELS ===================== */

/* Hamburger button */
.main-header__hamburger {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--main-text, #ffffff);
  padding: 0;
}

/* Sidebar overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  display: block !important;
}

/* Sidebar drawer */
.sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 580px;
    max-width: 100vw;
    height: 100%;
    background: #f0f0f0e0;
    z-index: 200;
    transform: translate(-100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.sidebar-drawer.is-open {
  transform: translateX(0);
}

/* Close button */
.sidebar-drawer__close {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 20px 20px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #212121;
}

/* Panel system */
.sidebar-panel {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 30px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transition: transform 0.3s ease, visibility 0.3s;
  visibility: hidden;
}

.sidebar-panel--main {
  transform: translateX(0);
}

.sidebar-panel--main:not(.is-active) {
  transform: translateX(-100%);
}

.sidebar-panel--sub {
  transform: translateX(100%);
}

.sidebar-panel.is-active {
  transform: translateX(0);
  visibility: visible;
}

/* Sub-panel header */
.sidebar-panel__header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.sidebar-panel__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: #212121;
  padding: 0;
  flex-shrink: 0;
}

.sidebar-panel__title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000000;
}

/* Quick action cards */
.sidebar-drawer__quick-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-drawer__action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px;
  flex: 1;
  background: #d9d9d9;
  border-radius: 5px;
  text-decoration: none;
  color: #000000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.2s;
}

.sidebar-drawer__action-card:hover {
  background: #c8c8c8;
}

/* Menu lists */
.sidebar-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.sidebar-drawer__menu-link {
  color: #000000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.sidebar-drawer__menu-link.is-active {
  color: #D70000;
  text-decoration: underline;
  text-decoration-color: #FFD201;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.sidebar-drawer__menu-link:hover {
  opacity: 0.7;
}

.sidebar-drawer__divider {
  border: none;
  border-top: 2px solid #000000;
  margin: 0;
  flex-shrink: 0;
}

/* ---- Best Seller panel ---- */
.sidebar-bestseller__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar-bestseller__item {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.sidebar-bestseller__icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---- Categories panel ---- */
.sidebar-categories__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sidebar-category__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(50% - 10px);
  padding: 15px 20px;
  background: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.sidebar-category__card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.sidebar-category__label {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 22px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.2;
}

.sidebar-category__img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Brands panel ---- */
.sidebar-brands__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sidebar-brand__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 10px);
  height: 110px;
  padding: 15px 20px;
  background: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.sidebar-brand__card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.sidebar-brand__logo {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sidebar-brand__name {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Header layout: hamburger | logo | search input (flex:1) | cart
 * On a 430px iPhone the wide "SUPPLEMENT SUPERSTORE" logo + 24px
 * gaps + cart consume ~370px, leaving the search input no room — it
 * either invisibly squashes to <40px or pushes content off-screen.
 *
 * Fix: collapse the search to icon-only on phones. The form still
 * submits to /search (with no q= param) which lands on the search
 * results page where the user can type their query. Standard mobile
 * pattern. Also shrinks the logo a touch so cart + icon fit comfortably.
 */
@media (max-width: 749px) {
  .main-header__inner {
    gap: 12px;
    padding: 8px 0;
  }
  .main-header__logo-img {
    max-height: 56px;
  }
  /* Search collapses from a 46px-tall input field to a 44px clickable
   * icon — the form's button submits to /search either way, so users
   * tap the magnifying glass and land on the full search page. */
  .main-header__search {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 9999px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    margin-left: auto; /* push the icon + cart to the right edge */
  }
  .main-header__search-input {
    /* Keep the input in the DOM (for accessibility / search submit
     * via Enter on physical keyboards), but visually hidden so the
     * icon is the only mobile target. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .main-header__search-btn {
    width: 44px;
    height: 44px;
  }

  /* Expanded state: the form grows into a full-width inline pill that
   * overlays the header row, with the icon button anchored on the right
   * acting as the submit. Esc / outside-click closes it (see JS). */
  .main-header__search.main-header__search--open {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 44px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  .main-header__search--open .main-header__search-input {
    /* Restore visibility — undo the visually-hidden rule above. */
    position: static;
    width: 100%;
    height: 100%;
    padding: 0 48px 0 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    background: transparent;
    font-size: 16px; /* >=16px prevents iOS zoom on focus */
    color: #0f1629;
    outline: none;
  }
  .main-header__search--open .main-header__search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 9999px;
  }

  .main-header__cart {
    margin-left: 0;
  }
  /* Hamburger should not have the `margin-left: auto` from desktop
   * (if any) on phone — it sits on the far left next to the logo. */
  .main-header__hamburger {
    margin: 0;
  }

  /* ── Sidebar menu drawer (burger menu) mobile sizing ──────────────
   * Desktop sizes: nav items 24px Racing Sans One, action cards 16px,
   * panel titles 24px. On a 375px phone these wrap awkwardly:
   *   - "TRACK ORDER" + "LOG OUT" each break to two lines because
   *     the action card tile is only ~80px wide
   *   - "MONTHLY CHALLENGES" wraps but at 24px it's still huge
   * Drop sizes proportionally and tighten gaps so the whole drawer
   * fits more items per visible viewport without scrolling. */
  .sidebar-panel__title {
    font-size: 18px;
  }
  .sidebar-drawer__action-card {
    font-size: 11px;
    padding: 12px 8px;
    gap: 6px;
    line-height: 1.15;
  }
  .sidebar-drawer__quick-actions {
    gap: 8px;
  }
  .sidebar-drawer__menu {
    gap: 14px;
  }
  .sidebar-drawer__menu-link {
    font-size: 18px;
    line-height: 1.2;
  }
}

@media (max-width: 380px) {
  .main-header__inner { gap: 8px; }
  .main-header__logo-img { max-height: 44px; }
  .sidebar-drawer__action-card {
    font-size: 10px;
    padding: 10px 6px;
  }
  .sidebar-drawer__menu-link { font-size: 16px; }
}
/* END_SECTION:header_custom */

/* START_SECTION:home_sec_1 (INDEX:52) */
.collections-slider-section .page-width {
  position: relative;
  padding: 40px 30px;
}

.collections-swiper {
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.collection-circle {
  display: block;
  text-decoration: none;
}

.collection-circle__inner {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  /* Solid black base. Transparent areas of brand PNGs show through
     as black; non-transparent areas get covered by the overlay below. */
  background-color: #00000090;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  box-sizing: border-box;
  transition: transform 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* ── Universal black overlay (May 2026) ────────────────────────────
   Every circle gets the same heavy black overlay so the look is
   uniform regardless of what's in the brand PNG underneath. Yellow
   XTEND, pink AXE & SLEDGE, dark BUM/C4 — all knocked to near-black.
   The title text sits above this overlay (z-index: 1, text-shadow
   for extra contrast) so the category name reads crisp white on
   every tile.
   The :not() exclusion that used to keep the --first / --last
   "accent" tiles uncovered was removed: those accent classes apply
   to whichever brand happens to land first/last in your collection
   list (XTEND, AXE & SLEDGE in current data), and the accent
   pink/yellow background-colours just happened to match those
   brands' baked-in PNG backgrounds — so they read as "the brand
   showing through" when really they were the accent tile colour.
   Applying the overlay universally fixes both issues at once. */
/* The opacity is set per-tile via the --overlay-opacity CSS custom
   property (defined inline by the Liquid loop above based on which
   brands hit the keyword list). Fallback 0.82 if the variable isn't
   set for any reason. */
.collection-circle__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.82));
  border-radius: 50%;
  pointer-events: none;
}

/* Legacy accent tile colours (#e8636a pink, #f8be00 yellow) removed
   May 2026 — every circle now reads as a uniform dark tile via the
   universal black overlay above. The --first / --last classes still
   render in the Liquid but no longer do anything cosmetically; left
   in place so the markup is unchanged if accent tiles are revived
   later for a campaign. */

.collection-circle__title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  position: relative; /* sits above the filtered brand image */
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* extra readability on busy logos */
}

/* Nav arrows */
.collections-slider-section .swiper-button-prev,
.collections-slider-section .swiper-button-next {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
  color: #222;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.collections-slider-section .swiper-button-prev, .collections-slider-section .swiper-button-next {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    color: #000 !important;
    background: #ffffff3d !important;
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.collections-slider-section .swiper-button-prev {
    left: 0 !important;
}

.collections-slider-section .swiper-button-next {
    right: 0 !important;
}

.collections-slider-section .collections-swiper {
    position: static !important;
}

.collections-slider-section .swiper-button-prev::after, .collections-slider-section .swiper-button-next::after {
    font-size: 20px !important;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Issues on phone:
 *  1. The 50x50 arrow buttons (positioned at left:0 / right:0) overlap
 *     the slider's first/last visible circles, causing the "BUNDLES &
 *     STACKS" / right-edge circles to render partly under the chrome.
 *  2. The .page-width has 30px horizontal padding which combined with
 *     the arrows leaves only ~315px on a 430px viewport for content.
 *  3. 115px circles are oversized for phones — 90px is plenty.
 */
@media (max-width: 749px) {
  .collections-slider-section .page-width {
    padding: 24px 12px;
  }
  .collection-circle__inner {
    width: 92px;
    height: 92px;
    padding: 10px;
  }
  .collection-circle__title {
    /* Use clamp + tight line-height + hyphenation so long brand
     * names like "STRENGTH & PERFORMANCE" wrap inside the circle
     * instead of overflowing horizontally and getting cropped by
     * the circle's overflow:hidden. The clamp scales the text down
     * for narrow viewports where 11px is still too big. */
    font-size: clamp(8px, 2.6vw, 11px);
    line-height: 1.1;
    letter-spacing: 0.15px;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Hard cap so nothing escapes the circle. The 14px subtraction
     * accounts for circle padding on each side. */
    max-width: calc(100% - 4px);
    /* Center text vertically + clip if it still overflows after
     * wrapping. With line-clamp, multi-line wraps look natural and
     * stay inside the circle. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Hide nav arrows on phones — they overlap the visible circles and
   * touch users swipe naturally. Swiper's loop:true means there's no
   * dead-end either direction. */
  .collections-slider-section .swiper-button-prev,
  .collections-slider-section .swiper-button-next {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .collection-circle__inner {
    width: 80px;
    height: 80px;
    padding: 8px;
  }
  .collection-circle__title {
    font-size: 10px;
  }
}
/* END_SECTION:home_sec_1 */

/* START_SECTION:home_sec_11 (INDEX:54) */
.hs11 {
  padding: 100px 0;
}

.hs11__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 50px;
}


.hs11__heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  text-align: center;
  margin: 0;
}

.hs11__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hs11__avatars {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hs11__avatar {
  border-radius: 9999px;
  object-fit: cover;
}

.hs11__avatar--md {
  width: 40px;
  height: 40px;
}

.hs11__avatar--sm {
  width: 30px;
  height: 30px;
}

.hs11__handle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.hs11__handle {
  color: var(--black, #212121);
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

/* ── Mobile (< 750px) ─────────────────────────────────────────────
 * Desktop: 100px section padding + 22px handle text. On a 430px iPhone
 * the handle "@supplementsuperstore.com.au" (30 chars at 22px) blows
 * out the pill to ~640px — overflows viewport, looks broken.
 * Cap section padding, shrink the pill + handle text.
 */
@media (max-width: 749px) {
  .hs11 { padding: 32px 0; }
  .hs11__inner { margin-bottom: 22px; gap: 14px; }
  .hs11__avatar--md { width: 32px; height: 32px; }
  .hs11__avatar--sm { width: 24px; height: 24px; }
  .hs11__handle-pill {
    padding: 8px 18px;
    /* Let pill auto-size to content — no max-width constraint that
     * forces wrapping. The handle stays on one line via nowrap. */
    max-width: 100%;
  }
  .hs11__handle {
    /* No wrapping — keeps "@supplementsuperstore.com.au" on a single
     * line. Font shrinks instead. At 12px the 28-char handle is
     * ~155px wide, fits comfortably on a 375px viewport. */
    font-size: 12px;
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
}

@media (max-width: 380px) {
  /* On the smallest phones, drop further — at 11px Montserrat 700 the
   * handle is ~140px wide. Pill keeps a comfortable 6/14 padding. */
  .hs11__handle { font-size: 11px; }
  .hs11__handle-pill { padding: 6px 14px; }
}
/* END_SECTION:home_sec_11 */

/* START_SECTION:home_sec_12 (INDEX:55) */
.hs12 {
  background-size: cover;
  background-position: center;
}

.hs12__row {
  display: flex;
  align-items: end;
    gap: 20px;
}

.hs12__col--content {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 40px 0;
}

.hs12__heading {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  word-wrap: break-word;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.hs12__subheading {
  max-width: 586px;
  color: white;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.3em;
}

.hs12__benefits-section {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.hs12__benefits-card {
  align-self: stretch;
  padding: 20px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.50) 0%, rgba(215, 2, 1, 0.50) 100%);
  border-radius: 10px;
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.hs12__benefits-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hs12__benefits-title {
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.hs12__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1em;
}

.hs12__benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FEE2E2;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

.hs12__icon {
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}

.hs12__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: #FFD201;
}

.hs12__dot--lg {
  width: 30px;
  height: 30px;
}

.hs12__feature-cards {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: stretch;
}

.hs12__feature-card {
  flex: 1;
  padding: 12px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.50) 0%, rgba(215, 2, 1, 0.50) 100%);
  border-radius: 10px;
  backdrop-filter: blur(15px);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hs12__feature-icon {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hs12__feature-text {
  align-self: stretch;
  text-align: center;
  color: #FEE2E2;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.3em;
}

.hs12__cta {
  width: 100%;
  /* Padding moved onto .hs12__cta-btn so the entire pill (gradient
     background + previously-dead padding) is part of the <a> click
     target. Brad-flagged QA: the previous structure only registered
     clicks on the text glyphs. */
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hs12__col--media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs12__media-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hs12__cta-btn {
  display: block;
  width: 100%;
  padding: 10px 18px;
  box-sizing: border-box;
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * "Become A Supplement Superstore Ambassador" hero — desktop layout
 * is content + media side-by-side, with a 3-up feature-cards row at
 * the bottom (Invitation / Direct comm / Personal tracking dash).
 *
 * On a 430px iPhone the 3 feature cards each get ~120px which makes
 * the third card overflow viewport — that's the "Pers..." cut-off
 * symptom. Plus the 52px heading wraps awkwardly.
 *
 * Fix: stack the row vertically; collapse the 3-card row to a 2x2
 * grid so labels can breathe; then to a 1-column stack below 480px.
 */
@media (max-width: 749px) {
  .hs12__row {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .hs12__col--content {
    width: 100%;
    padding: 24px 0;
  }
  .hs12__col--media {
    width: 100%;
    /* The hero already has a section-level background image — the
     * media column duplicates that visual on desktop and just pushes
     * the layout sideways on mobile. Hide on phones. */
    display: none;
  }
  .hs12__heading {
    font-size: 32px;
    line-height: 1.05em;
    margin-bottom: 10px !important;
  }
  .hs12__subheading {
    font-size: 14px;
    line-height: 1.45em;
    max-width: 100%;
  }
  .hs12__benefits-card {
    padding: 16px;
  }
  .hs12__benefits-title { font-size: 16px; line-height: 22px; }
  .hs12__benefit-item { font-size: 14px; }
  .hs12__benefits-list { gap: 14px; }
  /* Feature cards: 2x2 grid instead of 3-across */
  .hs12__feature-cards {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hs12__feature-card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    padding: 12px 10px;
  }
  .hs12__feature-text { font-size: 13px; line-height: 1.3em; }
  .hs12__feature-icon { width: 32px; height: 32px; }

  .hs12__cta {
    min-height: 48px;
    text-align: center;
    justify-content: center;
  }
  .hs12__cta-btn {
    font-size: 14px;
    padding: 14px 18px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hs12__heading { font-size: 28px; }
  /* Below 480px, even 2x2 is cramped — full single column */
  .hs12__feature-card {
    flex: 1 1 100%;
  }
}
/* END_SECTION:home_sec_12 */

/* START_SECTION:home_sec_13 (INDEX:56) */
.hs13-section {
  padding: 100px 0;
}

.hs13-header {
  text-align: center;
  margin-bottom: 40px;
}

.hs13-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: #212121;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.hs13-panel {
  display: block;
}

.hs13-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs13-track-wrapper {
  flex: 1;
  overflow: hidden;
}

.hs13-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  transition: transform 0.3s ease;
}

.hs13-card-wrap {
    flex: 0 0 calc((100% - (var(--slides-to-show, 5) - 1) * 20px) / var(--slides-to-show, 5));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 10px rgba(92, 96, 106, 0.2);
    padding: 20px 10px;
}

.hs13-card {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hs13-card__image-wrap {
  position: relative;
  margin-bottom: 12px;
}

.hs13-card__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 234 / 191;
}

.hs13-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(215, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hs13-badge__text {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 8px;
  text-align: center;
  line-height: 1.3;
}

.hs13-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.hs13-card__vendor,
.hs13-card__sku {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #7c7c7c;
  margin: 0;
}

.hs13-card__title {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  margin: 0;
}

.hs13-stars {
  color: #F8BE00;
  font-size: 18px;
  letter-spacing: 2px;
}

.hs13-card__stock {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  color: #D70000;
  margin: 0;
}

.hs13-card__price {
  margin-top: auto;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #D70000;
  margin-bottom: 0;
}

.hs13-quick-buy {
  font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    line-height: 1em;
    padding: 10px 10px;
    border-radius: 5px;
    transition: all ease .3s;
}

.hs13-quick-buy:hover {
  opacity: 0.8;
}

.hs13-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f0f054;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background .2s ease;
    z-index: 10;
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 30px;
}

button.hs13-arrow.hs13-arrow--prev {
    left: -30px;
}

button.hs13-arrow.hs13-arrow--next {
    right: -30px;
}

.hs13-panels {
    position: relative;
}

.hs13-arrow:hover {
  background: #f0f0f0;
}

.hs13-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * "You Might Also Like" / related products slider. Section padding
 * 100px desktop → tighten on mobile. Heading 52px capped via the
 * safety-net brand-heading rule but we add a section-specific one
 * for finer control.
 */
@media (max-width: 749px) {
  .hs13-section { padding: 28px 0; }
  .hs13-header { margin-bottom: 22px; }
  .hs13-heading {
    font-size: 28px;
    line-height: 1.1;
  }
}

@media (max-width: 480px) {
  .hs13-heading { font-size: 24px; }
}
/* END_SECTION:home_sec_13 */

/* START_SECTION:home_sec_14 (INDEX:57) */
.hs14 {
  width: 100%;
}

.hs14_row {
  display: flex;
}

.hs14_col {
  display: flex;
  align-items: flex-start;
}

.hs14_col1 {
  width: 60%;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background-size: cover;
  background-position: center;
}

.hs14_col2 {
  width: 40%;
}

.hs14_content {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.hs14_heading {
  width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--black, #212121);
  font-size: 44px;
  font-family: Racing Sans One;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
  margin: 0;
}

.hs14_subheading {
  color: var(--black, #212121);
  font-size: 22px;
  font-family: Montserrat;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

.hs14_btn_wrap {
    width: 100%;
}

/* .hs14_btn_wrap>a {
  padding: 10px 18px;
  background: var(--1, #FFD201);
  border-radius: 5px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
} */

.hs14_btn {
      display: inline-flex;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: clamp(13px, 1.25vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
    transition: opacity 0.2s;
}

.hs14_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs14_col1>* {
    max-width: 720px;
    margin: 0 auto;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 60/40 row with a fixed-width 720px heading on the left
 * and an image on the right. On a 430px iPhone the 720px heading
 * naturally overflows; the row should stack content above image
 * with the heading shrunk to fit.
 */
@media (max-width: 749px) {
  .hs14_row {
    flex-direction: column;
  }
  .hs14_col1,
  .hs14_col2 {
    width: 100%;
  }
  .hs14_col1 {
    /* Switch from `cover` to `contain` so the full bg image is visible
     * on mobile — no cropping. Trade-off: leaves background-color
     * showing in the gaps where the image's aspect ratio doesn't match
     * the column. We set a dark background-color so the gaps blend
     * with the gym/people imagery typical of this section.
     * Combined with min-height to give the image room to breathe. */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #1a1a1a;
    min-height: 320px;
    padding: 32px 18px;
    order: 1;
    /* Center the inner content block — without this `align-items:
     * flex-start` (inherited from desktop) keeps the heading +
     * subheading + button left-aligned in their column. */
    align-items: center;
    text-align: center;
  }
  .hs14_col2 {
    order: 2;
  }
  .hs14_col1 > * {
    max-width: 100%;
  }
  .hs14_content {
    align-items: center;
    text-align: center;
  }
  .hs14_btn_wrap {
    display: flex;
    justify-content: center;
  }
  .hs14_heading {
    width: 100%;
    font-size: 30px;
    line-height: 1.1em;
  }
  .hs14_subheading {
    font-size: 16px;
  }
  .hs14_btn {
    /* Don't stretch full-width — keep it pill-shaped + centered.
     * Original `align-self: stretch` was making the CTA look like a
     * giant bar. Centering with auto width reads as a clear CTA. */
    align-self: center;
    padding: 14px 24px;
    min-height: 48px;
    width: auto;
    max-width: 90%;
  }
  .hs14_img {
    /* Cap side image height so the 3-portrait composite doesn't
     * dominate the screen below the CTA. */
    max-height: 320px;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .hs14_heading { font-size: 26px; }
  .hs14_col1 { min-height: 280px; }
  .hs14_img { max-height: 260px; }
}
/* END_SECTION:home_sec_14 */

/* START_SECTION:home_sec_15 (INDEX:58) */
.hs15-section {
    padding: 80px 0;
    overflow: hidden;
}

.hs15-header {
    text-align: center;
    margin-bottom: 48px;
}

.hs15-heading {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #212121;
    text-transform: capitalize;
    line-height: 1.1;
    margin: 0;
}

.hs15-slider-wrap {
    overflow: hidden;
}

.hs15-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.hs15-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs15-logo-img {
    max-width: 150px;
    height: 80px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .hs15-heading {
        font-size: 36px;
    }
    .hs15-logo-img {
        max-width: 110px;
        height: 60px;
    }
}
/* END_SECTION:home_sec_15 */

/* START_SECTION:home_sec_16 (INDEX:59) */
.hs16 {
  background-size: cover;
  background-position: center;
  aspect-ratio: 1440/659;
      display: flex;
    align-items: center;
}

.hs16__row {
  display: flex;
  align-items: end;
  gap: 20px;
}

.hs16__col--content {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  width: 50%;
  height: 100%;
  padding: 40px 0;
}

.hs16__heading {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  word-wrap: break-word;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.hs16__subheading {
  max-width: 586px;
  color: white;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 30px;
  line-height: 1.3em;
}

.hs16__subheading2 {
  margin-bottom: 20px;
}

.hs16__benefits-section {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.hs16__benefits-card {
  align-self: stretch;
  padding: 20px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.50) 0%, rgba(215, 2, 1, 0.50) 100%);
  border-radius: 10px;
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.hs16__benefits-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hs16__benefits-title {
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.hs16__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1em;
}

.hs16__benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FEE2E2;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

.hs16__icon {
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}

.hs16__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: #FFD201;
}

.hs16__dot--lg {
  width: 30px;
  height: 30px;
}

.hs16__feature-cards {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: stretch;
}

.hs16__feature-card {
  flex: 1;
  padding: 12px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.50) 0%, rgba(215, 2, 1, 0.50) 100%);
  border-radius: 10px;
  backdrop-filter: blur(15px);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hs16__feature-icon {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hs16__feature-text {
  align-self: stretch;
  text-align: center;
  color: #FEE2E2;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.3em;
}

.hs16__cta {
  width: 100%;
}

.hs16__cta>a {
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.hs16__col--media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs16__media-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hs16__cta-btn {
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop renders this as a 50/50 split: content on left, media
 * (the gym + stars background image) on right at flex-shrink:0.
 * On a 430px iPhone the right column tries to keep its natural size
 * which spills past viewport — that's the "image cut off" symptom.
 *
 * Fix:
 *  - Override the 1440/659 aspect-ratio (it's a desktop-friendly 2.18:1
 *    that becomes a 200px-tall sliver on phones, leaving no room for
 *    text). Let height be auto so content drives the box height.
 *  - Stack the row vertically. Content first, media area collapsed.
 *  - Heading shrinks to a phone-friendly 32px so the 4-line title
 *    "Student Ambassador & Future Leaders Program" fits in a card.
 *  - CTA button stretches full width with a 48px tap target.
 */
@media (max-width: 749px) {
  .hs16 {
    aspect-ratio: auto;
    min-height: 0;
    background-position: center;
  }
  .hs16__row {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }
  .hs16__col--content {
    width: 100%;
    padding: 28px 0;
    gap: 14px;
  }
  .hs16__col--media {
    width: 100%;
    /* On mobile the background image already fills the section
     * background, so we don't need a second media column rendering
     * a duplicate. Hide it. */
    display: none;
  }
  .hs16__heading {
    font-size: 32px;
    margin-bottom: 12px !important;
    line-height: 1.05em;
  }
  .hs16__subheading {
    font-size: 14px;
    line-height: 1.4em;
    margin-bottom: 16px;
    max-width: 100%;
  }
  .hs16__subheading2 {
    margin-bottom: 12px;
  }
  .hs16__cta {
    width: 100%;
  }
  .hs16__cta > a {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 18px;
    min-height: 48px;
  }
  .hs16__cta-btn {
    font-size: 14px;
  }
  /* Optional benefit / feature cards — if present, stack at full width */
  .hs16__benefits-card {
    padding: 16px;
  }
  .hs16__benefits-title { font-size: 16px; line-height: 22px; }
  .hs16__benefit-item   { font-size: 14px; }
  .hs16__feature-cards {
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
  }
  .hs16__feature-card {
    flex: 1 1 100%;
    padding: 12px;
  }
  .hs16__feature-text { font-size: 14px; }
}

@media (max-width: 480px) {
  .hs16__heading {
    font-size: 28px;
  }
  .hs16__subheading {
    font-size: 13px;
  }
}
/* END_SECTION:home_sec_16 */

/* START_SECTION:home_sec_17 (INDEX:60) */
.hs17-section {
    padding: 60px 0 100px;
}

.hs17-heading {
    font-family: Racing Sans One, sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #212121;
    text-transform: capitalize;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.linkedin_follow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
    justify-content: center;
}

.linkedin_follow p {
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    color: #212121;
}



.hs17-blog-card {
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F3F3F3;
}

.hs17-blog-card__image-wrap {
    width: 100%;
    aspect-ratio: 441 / 266;
    overflow: hidden;
    position: relative;
    background: rgba(35, 34, 34, 0.10);
}

.hs17-blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs17-blog-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: #ddd;
}

.hs17-blog-card__body {
    padding: 17px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs17-blog-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hs17-blog-card__title {
    width: 254px;
    color: #212121;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 600;
    word-wrap: break-word;
    text-decoration: none;
}

.hs17-blog-card__title:hover {
    text-decoration: underline;
}

.hs17-blog-card__date {
    color: #212121;
    font-size: 12px;
    font-family: Montserrat;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.hs17-blog-card__excerpt {
    color: #212121;
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .hs17_blogs_wrap {
        grid-template-columns: 1fr;
    }
}
/* END_SECTION:home_sec_17 */

/* START_SECTION:home_sec_18 (INDEX:61) */
.hs18-section {
    padding-bottom: 50px;
    padding-top: 50px;
    background-color: #212121;
}

.hs18-paragraph {
    font-size: 12px;
    max-width: 868px;
    margin: 0 auto 50px auto;
    color: #fff;
    text-align: center;
    line-height: 1.5em;
}

.logo_wrapper img {
    margin: 0 auto 15px auto;
    display: block;
}

.payment_wrapper img {
    margin: 0 auto 50px auto;
    display: block;
}

.hs18-follow-head {
    font-family: Racing Sans One, sans-serif;
    font-size: 30px;
    color: #fff;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
}

.social_icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social_icon_link img {
    display: block;
    transition: opacity 0.2s ease;
}

.social_icon_link:hover img {
    opacity: 0.75;
}

@media (max-width: 749px) {
  .hs18-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .hs18-paragraph {
    margin-bottom: 24px;
    font-size: 11px;
    padding: 0 16px;
  }
  .payment_wrapper img {
    margin-bottom: 24px;
    max-width: 280px;
  }
  .hs18-follow-head {
    font-size: 22px;
    margin-bottom: 18px;
  }
  .social_icons { gap: 14px; flex-wrap: wrap; }
  .social_icon_link img { max-width: 32px; }
}
/* END_SECTION:home_sec_18 */

/* START_SECTION:home_sec_19 (INDEX:62) */
.hs19 {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
  }

  .hs19__background,
  .hs19__overlay {
    position: absolute;
    inset: 0;
  }

  .hs19__background-image {
    width: 100%;
    height: 100%;
    min-height: 600px;
    display: block;
    object-fit: cover;
  }

  .hs19__overlay {
    background: linear-gradient(90deg, #000000 17%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }

  .hs19__container {
    position: relative;
    z-index: 1;
  }

  .hs19__content {
    min-height: 600px;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
  }

  .hs19__text-wrap {
    width: 100%;
    max-width: 754px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .hs19__text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hs19__heading {
    margin: 0;
    color: #ffffff;
    font-family: "Racing Sans One", sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 56px;
    text-transform: capitalize;
  }

  .hs19__description,
  .hs19__description p {
    margin: 0;
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .hs19__button {
    min-width: 240px;
    padding: 16px 32px;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow:
      0 10px 24px rgba(215, 0, 0, 0.35),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .hs19__button:hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 30px rgba(215, 0, 0, 0.5),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    color: #fff;
  }
  .hs19__button:active {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .hs19__button { transition: none; }
  }

  .hs19__cards {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
    flex-wrap: wrap;
  }

  .hs19__card {
    flex: 1 1 calc(25% - 12px);
    padding: 10px 35px 10px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #212121;
  }

  /* When the card renders as <a> (block.settings.link is set, or
     it's the featured card defaulting to /pages/never-run-out),
     the browser applies its default link styling:
       - text-decoration: underline
       - color: defaults to #0000EE / #551A8B (visited) — read as
         "purple lines" through the white text overlay.
     Suppress both so the card-as-link reads as a button, not a
     hyperlink. White text + brand backgrounds are already on the
     children — we just need to neutralise the anchor defaults. */
  .hs19__card--link,
  .hs19__card--link:link,
  .hs19__card--link:visited,
  .hs19__card--link:hover,
  .hs19__card--link:focus,
  .hs19__card--link:active {
    text-decoration: none;
    color: inherit;
  }
  .hs19__card--link * {
    text-decoration: none;
  }

  .hs19__card-inner {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .hs19__icon {
    width: 32%;
    max-width: 100px;
    flex: 0 0 32%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hs19__icon-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .hs19__card-title {
    flex: 1 1 0;
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
  }

  .hs19__card--featured {
    flex: 1 1 calc(25% - 12px);
    padding: 15px;
    background: linear-gradient(270deg, #d70201 0%, #f8be00 100%);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
  }

  .hs19__card-featured-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .hs19__badge {
    width: 24%;
    max-width: 87px;
    flex: 0 0 24%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hs19__badge-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .hs19__featured-icon {
    width: 28%;
    max-width: 100px;
    flex: 0 0 28%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hs19__featured-icon-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .hs19__featured-title {
    flex: 1 1 0;
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .hs19__card:nth-child(2) .hs19__card-inner, 
    .hs19__card:nth-child(3) .hs19__card-inner {
        flex-direction: column;
    }

    .hs19__card:nth-child(2) .hs19__card-inner .hs19__icon, 
    .hs19__card:nth-child(3) .hs19__card-inner .hs19__icon {
        width: auto;
    }

  @media screen and (max-width: 1399px) {
    .hs19__cards {
      justify-content: flex-start;
    }

    .hs19__card,
    .hs19__card--featured {
      flex-basis: calc(50% - 8px);
    }
  }

  @media screen and (max-width: 989px) {
    .hs19__content {
      min-height: auto;
      gap: 35px;
    }

    .hs19__heading {
      font-size: 42px;
      line-height: 46px;
    }
  }

  @media screen and (max-width: 767px) {
    .hs19__content {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .hs19__text-wrap {
      gap: 24px;
    }

    .hs19__heading {
      font-size: 34px;
      line-height: 38px;
    }

    .hs19__description,
    .hs19__description p,
    .hs19__card-title {
      font-size: 16px;
    }

    .hs19__button {
      min-width: 100%;
    }

    .hs19__card,
    .hs19__card--featured {
      flex-basis: 100%;
      padding: 16px 20px;
    }

    .hs19__card-inner,
    .hs19__card-featured-inner {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }

    .hs19__featured-title {
      flex-basis: 100%;
      font-size: 20px;
    }
  }
/* END_SECTION:home_sec_19 */

/* START_SECTION:home_sec_2 (INDEX:63) */
.hs2-section {
    padding-bottom: 50px;
}

.hs2-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 448px;
  padding: 105px 80px;
  box-sizing: border-box;
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  margin-bottom: 16px;
}

.hs2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1;
  max-width: 420px;
}

.hs2-brand-logo {
  display: flex;
  align-items: center;
}

.hs2-brand-logo img {
  height: 65px;
  width: auto;
  object-fit: contain;
}

.hs2-product-title {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  color: #FFD001;
}

.hs2-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.hs2-btn,
.hs2-card__btn {
    align-self: flex-start;
    display: inline-block;
    margin-top: 1.39vw;
    padding: 0.69vw 1.25vw;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 0.35vw;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25vw;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.hs2-btn:hover {
  opacity: 0.75;
}

.hs2-product-image {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
  width: 60%;
}

.hs2-product-image img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

.sec1-btn-wrapper {
  text-align: center;
  width: 100%;
}

/* Promo Cards Row */
.hs2-cards-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.hs2-card {
  flex: 1;
  min-height: 334px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #E4E4E4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
}

.hs2-card--has-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 50%);
}

.hs2-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 51px 30px 30px;
  box-sizing: border-box;
  z-index: 1;
}

.hs2-card__media {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 2px 0 0;
}

.hs2-card__title {
  font-size: 52px;
  line-height: 46px;
  font-weight: 400;
  margin: 0;
  color: #ffffff;
  text-transform: capitalize;
}

.hs2-card__desc {
  font-size: 14px;
  line-height: 17px;
  font-weight: 300;
  color: #ffffff;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

/* .hs2-card__btn {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    display: inline-flex;
} */

.hs2-card__product-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}

.hs2-card__product-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

.hs2-card__desc strong {
    font-weight: 700;
}

@media (max-width: 768px) {
  .hs2-cards-row {
    flex-direction: column;
  }

  .hs2-card {
    min-height: 280px;
  }

  .hs2-card--has-image {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 40%);
  }

  .hs2-card__title {
    font-size: 38px;
    line-height: 36px;
  }
}

@media (max-width: 480px) {
  .hs2-card__title {
    font-size: 30px;
    line-height: 30px;
  }

  .hs2-card__content {
    padding: 32px 20px 24px;
  }

  .hs2-card--has-image {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 38%);
  }

  .hs2-card__media {
    padding: 20px 16px 0 0;
  }
}

@media (max-width: 768px) {
  .hs2-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 32px 220px;
    min-height: 400px;
  }

  .hs2-product-title {
    font-size: 36px;
  }

  .hs2-product-image {
    height: 50%;
    right: 0;
    bottom: 0;
  }

  .hs2-product-image img {
    max-width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {
  .hs2-banner {
    padding: 40px 24px 200px;
  }

  .hs2-product-title {
    font-size: 30px;
  }

  .hs2-product-image {
    height: 45%;
  }
}
/* END_SECTION:home_sec_2 */

/* START_SECTION:home_sec_3 (INDEX:64) */
.hs3-section {
  padding: 50px 0;
}

.hs3-heading {
  font-size: 52px;
  line-height: 56px;
  font-weight: 400;
  color: #212121;
  text-align: center;
  margin: 0 0 50px;
  text-transform: capitalize;
}

.hs3-list-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.hs3-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 0 10px;
}

.hs3-list::-webkit-scrollbar {
  display: none;
}

.hs3-card {
    position: relative;
    flex: 0 0 254px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease;
}

/* Gradient background */
.hs3-card__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: var(--hs3-bg, none);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: block !important;
}

/* Bottom orange fade overlay */
.hs3-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(242,79,0,0) 86%, #f24f00 99%);
  z-index: 2;
  pointer-events: none;
}

.hs3-card__product {
    position: relative !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 70px 20px 15px;
    box-sizing: border-box;
}

.hs3-card__product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hs3-card__label {
    position: relative;
    z-index: 3;
    color: #fff;
    font-size: 39px;
    line-height: normal;
    text-align: center;
    text-transform: capitalize;
    padding-bottom: 0px;
    width: 100%;
}

/* Nav arrows */
.hs3-arrow {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(240, 240, 240, 0.33);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s ease;
  z-index: 10;
}

.hs3-arrow:hover {
  background: rgba(240, 240, 240, 0.6);
}

.hs3-arrow svg {
  width: 28px;
  height: 28px;
}

button.hs3-arrow {
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

button.hs3-arrow.hs3-arrow--prev {
    left: -30px;
}

button.hs3-arrow.hs3-arrow--next {
    right: -30px;
}

@media (max-width: 768px) {
  .hs3-heading {
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 32px;
  }

  .hs3-card {
    flex: 0 0 200px;
    width: 200px;
    height: 250px;
  }

  .hs3-card__label {
    font-size: 30px;
  }

  .hs3-arrow {
    display: none;
  }

  /* Single-card edge case: when only one collection block is added,
   * Swiper sets translate3d(0) on the wrapper and the slide sits
   * left-aligned with massive empty space on the right. Detect via
   * :only-child + override Swiper's flex layout to center. */
  .hs3-list .swiper-wrapper:has(.swiper-slide:only-child) {
    justify-content: center !important;
    transform: none !important;
  }
  .hs3-list .swiper-slide:only-child {
    margin: 0 auto;
  }
}
/* END_SECTION:home_sec_3 */

/* START_SECTION:home_sec_4 (INDEX:65) */
.hs4-section {
    margin: 50px 0;
    background: linear-gradient(90deg, var(--4, #D70000) 0%, #FFD201 100%);
    padding: 0 20px;
    overflow: hidden;
}

.hs4-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    animation: hs4-marquee 30s linear infinite;
    will-change: transform;
}

.hs4-col {
    display: flex;
    margin: 22px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    flex: 0 0 25vw;
    width: 25vw;
    min-width: 280px;
    border-right: 1px solid #fff;
}

.hs4-col-inner {
    padding: 0 0px;
}

.hs4-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.hs4-section .page-width {
    max-width: 1600px;
}

@keyframes hs4-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 989px) {
    .hs4-col {
        flex-basis: 33.3333vw;
        width: 33.3333vw;
        min-width: 240px;
    }
}

@media (max-width: 749px) {
    .hs4-section {
        padding: 0 12px;
    }

    .hs4-col {
        flex-basis: 70vw;
        width: 70vw;
        min-width: 220px;
        margin: 18px 0;
    }

    .hs4-title {
        font-size: 14px;
    }
}
/* END_SECTION:home_sec_4 */

/* START_SECTION:home_sec_5 (INDEX:66) */
.hs5-section {
  padding: 60px 0;
}

.hs5-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hs5-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: #212121;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.hs5-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hs5-tab {
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  background: #fff;
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.hs5-tab.is-active {
  background: #FFD201;
}

.hs5-panel {
  display: none;
}

.hs5-panel.is-active {
  display: block;
}

.hs5-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs5-track-wrapper {
  flex: 1;
  overflow: hidden;
}

.hs5-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  transition: transform 0.3s ease;
}

.hs5-card-wrap {
  flex: 0 0 calc((100% - (var(--slides-to-show, 5) - 1) * 20px) / var(--slides-to-show, 5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 10px rgba(92, 96, 106, 0.2);
  padding: 20px 10px;
}

.hs5-card {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hs5-card__image-wrap {
  position: relative;
  margin-bottom: 12px;
}

.hs5-card__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 234 / 191;
}

.hs5-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(215, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hs5-badge__text {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 8px;
  text-align: center;
  line-height: 1.3;
}

.hs5-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.hs5-card__vendor,
.hs5-card__sku {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #7c7c7c;
  margin: 0;
}

.hs5-card__title {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  margin: 0;
}

.hs5-stars {
  color: #F8BE00;
  font-size: 18px;
  letter-spacing: 2px;
}

.hs5-card__stock {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  color: #D70000;
  margin: 0;
}

.hs5-card__price {
  margin-top: auto;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #D70000;
  margin-bottom: 0;
}

.hs5-quick-buy {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    line-height: 1em;
    padding: 10px 10px;
    border-radius: 5px;
    transition: all ease .3s;
}

.hs5-quick-buy:hover {
    opacity: 0.8;
}

.hs5-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f0f054;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background .2s ease;
    z-index: 10;
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 30px;
}

button.hs5-arrow.hs5-arrow--prev {
    left: -30px;
}

button.hs5-arrow.hs5-arrow--next {
    right: -30px;
}

.hs5-panels {
    position: relative;
}

.hs5-arrow:hover {
  background: #f0f0f0;
}

.hs5-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Mirror home_sec_13's minimal mobile pattern: section padding,
 * header margin, heading font-size. The slider/card/arrow/badge
 * styling auto-adapts via the existing --slides-to-show CSS variable
 * (which the editor sets to 1 on mobile) and percentage-based widths.
 *
 * The only hs5-specific addition is the tabs-strip horizontal scroll —
 * hs13 has no tabs, but hs5 has 7 (All + 6 categories) which would
 * wrap to 3 rows on phones without a scroll container.
 */
@media (max-width: 749px) {
  .hs5-section { padding: 28px 0; }
  .hs5-header {
    margin-bottom: 22px;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hs5-heading {
    font-size: 28px;
    line-height: 1.1;
  }

  /* Tab strip: scroll horizontally instead of wrapping to 3 rows. */
  .hs5-tabs {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .hs5-tabs::-webkit-scrollbar { display: none; }
  .hs5-tab {
    font-size: 13px;
    padding: 8px 14px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .hs5-heading { font-size: 24px; }
}
/* END_SECTION:home_sec_5 */

/* START_SECTION:home_sec_6 (INDEX:67) */
/*
  All fluid values derived from Figma canvas: 1440 × 608 px
  Formula: clamp(min, X / 1440 * 100vw, X)
  e.g. 85px → clamp(32px, 5.903vw, 85px)
*/

/* ─── Section ─────────────────────────────────────────── */
.hs6-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
    padding: 4.93% 2.08%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* ─── Diagonal gold gradient ──────────────────────────── */
/* clip: top-left 54%, bottom-left 39% (from Figma diagonal) */
.hs6-diagonal {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    151.54deg,
    #8C421D 26.66%,
    #FBE67B 46.28%,
    #F3F0B2 58.97%,
    #F7D14E 73.11%,
    #D4A041 86.99%
  );
  clip-path: polygon(54% 0%, 100% 0%, 100% 100%, 39% 100%);
  z-index: 0;
}

/* ─── Background image (right side) ──────────────────── */
.hs6-bg-image {
  position: absolute;
  inset: 0;
  background-image: var(--hs6-bg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  z-index: 1;
  display: block !important;
}

/* ─── Content panel ───────────────────────────────────── */
/* Figma: 990 / 1440 = 68.75% width, gap 35px → 2.43vw */
.hs6-content {
    position: relative;
    z-index: 2;
    width: calc(50% + 10vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(30px, 2.43vw, 80px);
}

/* ─── Heading + subheading group ─────────────────────── */
/* gap 18px → 1.25vw */
.hs6-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.25vw, 18px);
  width: 100%;
}

/* ─── Heading ─────────────────────────────────────────── */
/* 85px → 5.903vw, line-height 81px → 5.625vw */
.hs6-heading {
    font-family: Racing Sans One, sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 5.903vw, 85px);
    line-height: clamp(30px, 5.625vw, 81px);
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(151.54deg, #ffd201 46.28%, #f3f0b2 58.97%, #ffe25c 73.11%, #d70000 107%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Subheading ──────────────────────────────────────── */
/* 16px → 1.111vw, max-width 846px → 58.75% */
.hs6-subheading {
    font-family: Montserrat, sans-serif;
    font-size: clamp(12px, 1.111vw, 16px);
    line-height: 1.5em;
    color: #fff;
    margin: 0;
}

/* ─── Prize grid ──────────────────────────────────────── */
/*
  Figma columns: 265px | 300px | auto
  265/1440 = 18.4vw  |  300/1440 = 20.83vw
  row-gap 24px → 1.667vw
*/
.hs6-prizes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: clamp(140px,18.4vw,350px) clamp(150px,20.83vw,350px) auto;
    row-gap: clamp(20px, 3.667vw, 44px);
    column-gap: 0;
    align-items: center;
}

/* Explicit placement: 3 | 2 | 2 | 1 */
.hs6-prize-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.hs6-prize-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.hs6-prize-item:nth-child(3) { grid-column: 3; grid-row: 1; }
.hs6-prize-item:nth-child(4) { grid-column: 1; grid-row: 2; }
.hs6-prize-item:nth-child(5) { grid-column: 2; grid-row: 2; }
.hs6-prize-item:nth-child(6) { grid-column: 1; grid-row: 3; }
.hs6-prize-item:nth-child(7) { grid-column: 2; grid-row: 3; }
.hs6-prize-item:nth-child(8) { grid-column: 1; grid-row: 4; }

/* ─── Prize item ──────────────────────────────────────── */
/* gap 20px → 1.389vw */
.hs6-prize-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 1.389vw, 20px);
}

/* ─── Icon wrapper 56×56 ─────────────────────────────── */
/* 56px → 3.889vw */
.hs6-icon-wrap {
  position: relative;
  width: clamp(28px, 3.889vw, 56px);
  height: clamp(28px, 3.889vw, 56px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs6-icon-glow {
  position: absolute;
  inset: 0;
  background: #EDBD13;
  border-radius: 50%;
  filter: blur(clamp(6px, 1.042vw, 15px));
}

/* 50px → 3.472vw */
.hs6-icon {
  position: relative;
  z-index: 1;
  width: clamp(24px, 3.472vw, 50px);
  height: clamp(24px, 3.472vw, 50px);
  object-fit: contain;
}

.hs6-icon-placeholder {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(24px, 3.472vw, 50px);
  height: clamp(24px, 3.472vw, 50px);
  border-radius: 50%;
  background: rgba(237, 189, 19, 0.3);
}

/* ─── Prize label ─────────────────────────────────────── */
/* 18px → 1.25vw */
.hs6-prize-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1.22;
  color: #fff;
}

/* ─── CTA Button ──────────────────────────────────────── */
/*
  307px → 21.32vw  |  42px → 2.917vw
  font 18px → 1.25vw
*/
.hs6-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 0.694vw, 10px) clamp(10px, 1.25vw, 18px);
  width: clamp(180px, 21.32vw, 307px);
  height: clamp(28px, 2.917vw, 42px);
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: clamp(3px, 0.347vw, 5px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.hs6-btn:hover {
  opacity: 0.88;
  color: #fff;
}

/* ─── Tablet ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hs6-section {
    aspect-ratio: unset;
    min-height: 520px;
    padding: 30px 24px;
    align-items: center;
  }
  .hs6-content {
    width: 100%;
    gap: 20px;
  }
  .hs6-heading {
    font-size: 52px;
    line-height: 1;
  }
  .hs6-subheading {
    font-size: 14px;
    max-width: 100%;
  }
  .hs6-prizes {
    grid-template-columns: repeat(2, auto);
    row-gap: 16px;
  }
  .hs6-prize-label {
    font-size: 15px;
  }
  .hs6-bg-image {
    opacity: 0.35;
  }
}

/* ─── Mobile ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .hs6-heading {
    font-size: 36px;
  }
  .hs6-prizes {
    grid-template-columns: 1fr;
  }
  .hs6-btn {
    width: 100%;
    font-size: 14px;
    height: 44px;
  }
}
/* END_SECTION:home_sec_6 */

/* START_SECTION:home_sec_7 (INDEX:68) */
.hs7-section {
  padding: 50px 0;
}

.hs7-banner {
  position: relative;
  width: 100%;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.hs7-banner::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: linear-gradient(90deg, #F8BE00, #D70201);
  z-index: -1;
}

.hs7-banner:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    top: 0;
    left: 0;
    border-radius: inherit;
    z-index: -1;
}

.hs7-heading {
    text-align: center;
    color: #f8be00;
    font-size: 40px;
    font-family: Racing Sans One, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    word-break: break-word;
    background: linear-gradient(90deg, #D70201, #F8BE00);
    line-height: 1em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hs7-countdown {
  display: flex;
  align-items: center;
  gap: 21px;
}

.hs7-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hs7-value {
  text-align: center;
  color: #D70000;
  font-size: 30px;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
}

.hs7-label {
  text-align: center;
  color: #D70000;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 1;
}

.hs7-sep {
  color: #D70000;
  font-size: 26px;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  line-height: 1;
  align-self: center;
  padding-bottom: 22px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop: 40px heading + 30px countdown numbers + 21px gap, all on
 * one line. On a 430px iPhone the heading wraps to 3 lines ("HURRY!" /
 * "CHALLENGE" / "ENDS IN:") and the countdown numbers stay huge.
 * Whole banner ends up taking half the viewport for what's just a
 * countdown timer.
 *
 * Fix: shrink heading to 22px (single line "HURRY! CHALLENGE ENDS IN:"
 * mostly fits, wraps gracefully if not). Countdown numbers down to
 * 22px, labels to 11px, separator gaps tightened. Still readable,
 * roughly half the vertical real estate.
 */
@media (max-width: 749px) {
  .hs7-section {
    padding: 28px 0;
  }
  .hs7-banner {
    padding: 18px 14px;
    gap: 12px;
    border-radius: 14px;
    flex-direction: column;
  }
  .hs7-banner::before {
    border-radius: 17px;
  }
  .hs7-heading {
    font-size: 22px;
    line-height: 1.1em;
  }
  .hs7-countdown {
    gap: 8px;
  }
  .hs7-value {
    font-size: 22px;
  }
  .hs7-label {
    font-size: 11px;
    letter-spacing: 0.3px;
  }
  .hs7-sep {
    font-size: 18px;
    padding-bottom: 16px;
  }
}

@media (max-width: 380px) {
  .hs7-heading {
    font-size: 18px;
  }
  .hs7-value { font-size: 20px; }
  .hs7-label { font-size: 10px; }
  .hs7-countdown { gap: 4px; }
  .hs7-sep { font-size: 16px; padding-bottom: 14px; }
}
/* END_SECTION:home_sec_7 */

/* START_SECTION:home_sec_8 (INDEX:69) */
.hs8 {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 704;
  overflow: hidden;
}

/* Background — one image covers everything (left portrait, right hex images, dark bg) */
.hs8__bg {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block !important;
}

/*
  Center content column
  Left edge aligned to row-1 position (359/1440 = 24.93%)
  Width matches benefit row width   (551/1440 = 38.26%)
  Top aligned to title              ( 44/ 704 =  6.25%)
*/
.hs8__content {
  position: absolute;
  left: 24.93%;
  top: 6.25%;
  width: 38.26%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Title */
.hs8__title {
  width: 100%;
  margin: 0 0 1.39vw; /* ~20px gap before first row */
  text-align: center;
  color: #fff;
  font-family: 'Racing Sans One', cursive;
  font-size: 3.61vw;  /* 52px @ 1440 */
  font-weight: 400;
  line-height: 1.08;
  text-transform: capitalize;
}

/* Benefit list */
.hs8__list {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.83vw; /* 12px @ 1440 */
}

/*
  Staircase: each row shifts 30px (2.08vw) left vs the row above.
  Original left positions: 359 → 328 → 300 → 271 → 241px
*/
.hs8__item:nth-child(2) { transform: translateX(-2.08vw); }
.hs8__item:nth-child(3) { transform: translateX(-4.17vw); }
.hs8__item:nth-child(4) { transform: translateX(-6.25vw); }
.hs8__item:nth-child(5) { transform: translateX(-8.33vw); }

/* Benefit row card */
.hs8__item-inner {
    display: flex;
    align-items: center;
    gap: 1.39vw;
    padding: 1.32vw 2vw 1.32vw 2.5vw;
    background: url(/cdn/shop/files/Frame_2087329157.png?v=1772800664);
    border-radius: .69vw;
    border: 1px solid rgba(0, 0, 0, .2);
    position: relative;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Icon */
.hs8__icon {
  flex-shrink: 0;
  width: 2.22vw;  /* 32px */
  height: 2.22vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hs8__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text */
.hs8__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.hs8__name {
  display: block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw; /* 18px */
  font-weight: 700;
  line-height: 1.56;
}

.hs8__desc {
  display: block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1vw; /* 16px */
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Locked badge */
.hs8__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.69vw;        /* 10px */
  padding: 0.69vw 1.11vw; /* 10px 16px */
  background: #FFD201;
  border-radius: 20px;
  outline: 0.6px solid #D70201;
  outline-offset: -0.6px;
  position: relative;
  z-index: 1;
}

.hs8__badge span {
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.97vw; /* 14px */
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}

.hs8__badge svg {
  flex-shrink: 0;
  width: 1.25vw;
  height: 1.39vw;
}

/* CTA button */
.hs8__cta {
  align-self: flex-start;
  display: inline-block;
  margin-top: 1.39vw;    /* 20px gap after last row */
  padding: 0.69vw 1.25vw; /* 10px 18px */
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 0.35vw;  /* 5px */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw; /* 18px */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop layout uses absolute positioning + a "staircase" of
 * translateX offsets per item, all sized in vw. On a 430px iPhone
 * vw becomes too small and the absolute-positioned content column
 * (38.26% width, 24.93% left) gets pushed off-canvas.
 *
 * Fix: drop the absolute positioning, drop the staircase offsets,
 * stack everything in normal flow with px-based sizes.
 */
@media (max-width: 749px) {
  .hs8 {
    aspect-ratio: auto;
    min-height: 0;
    padding: 32px 16px;
  }
  .hs8__bg {
    background-position: center top;
  }
  .hs8__content {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }
  .hs8__title {
    font-size: 30px;
    margin-bottom: 18px;
    text-align: left;
  }
  .hs8__list {
    gap: 10px;
  }
  /* Kill the staircase offsets — they put each row 2-8% off-screen */
  .hs8__item:nth-child(2),
  .hs8__item:nth-child(3),
  .hs8__item:nth-child(4),
  .hs8__item:nth-child(5) {
    transform: none;
  }
  .hs8__item-inner {
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
  }
  .hs8__icon {
    width: 28px;
    height: 28px;
  }
  .hs8__cta {
    align-self: stretch;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .hs8__title {
    font-size: 26px;
  }
}
/* END_SECTION:home_sec_8 */

/* START_SECTION:home_sec_9 (INDEX:70) */
.hs9 {
  padding: 60px 0;
}

.hs9__header {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hs9__title {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: capitalize;
  margin: 0;
}

.hs9__subtitle {
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.hs9__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.hs9__card {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 420 / 286;
  background-size: cover;
  background-position: center;
  background-color: #ccc;
  text-decoration: none;
}

.hs9__card:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(270deg, #ffd201c2, #d70201c2);
    transition: all ease .3s;
    opacity: 1;
}

.hs9__card:hover:before {
    opacity: 0.8;
}

.hs9__card-label {
    position: absolute;
    bottom: 16px;
    color: #fff;
    font-family: Racing Sans One, sans-serif;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, .3);
    width: 100%;
    text-align: center;
    left: 0;
    padding: 0 10px;
}

@media (max-width: 900px) {
  .hs9__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs9__title {
    font-size: 36px;
  }

  .hs9__card-label {
    font-size: 32px;
  }
}

@media (max-width: 749px) {
  /* Cap section padding — was 60px top+bottom on desktop, ridiculous
   * on mobile where the next section is already visible above the
   * fold. Tighten to ~28px so the card grid breathes without dead
   * white space. Header margin shrinks too. */
  .hs9 {
    padding: 28px 0;
  }
  .hs9__header {
    margin-bottom: 18px;
  }
  .hs9__subtitle {
    font-size: 14px;
    line-height: 1.4;
  }
  .hs9__grid {
    gap: 16px;
  }
  .hs9__card-label {
    font-size: 24px;
  }
}

@media (max-width: 560px) {
  .hs9__grid {
    grid-template-columns: 1fr;
  }
  .hs9__card {
    aspect-ratio: 16 / 9;  /* Wider on phone — cards too tall as 420:286 */
  }
}
/* END_SECTION:home_sec_9 */

/* START_SECTION:inner_page_banner (INDEX:73) */
.inner_banner_section {
    aspect-ratio: 1440/383;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.inner_banner_content>* {
    color: #FFF;
    font-family: "Racing Sans One";
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 1440:383 aspect-ratio bg-image hero with a 70px Racing
 * Sans page title. Tighten heading + use min-height instead of fixed
 * aspect-ratio so the title doesn't get squashed on phones.
 */
@media (max-width: 749px) {
  .inner_banner_section {
    aspect-ratio: auto;
    min-height: 180px;
    padding: 24px 16px;
  }
  .inner_banner_content > * {
    font-size: 32px;
    line-height: 1.05;
  }
}

@media (max-width: 480px) {
  .inner_banner_section { min-height: 140px; }
  .inner_banner_content > * { font-size: 26px; }
}
/* END_SECTION:inner_page_banner */

/* START_SECTION:inner_page_banner2 (INDEX:74) */
.inner_banner_section {
    aspect-ratio: 1440/383;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.inner_banner_content>h1 {
    color: #FFF;
    font-family: "Racing Sans One";
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    margin-top:0;
    margin-bottom:20px;
}

.page_desc {
    color: #FFF;
    font-family: "Racing Sans One";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    margin-top:0;
    margin-bottom:0;
}

@media (max-width: 749px) {
  .inner_banner_section {
    aspect-ratio: auto;
    min-height: 200px;
    padding: 28px 16px;
  }
  .inner_banner_content > h1 {
    font-size: 32px;
    line-height: 1.05;
    margin-bottom: 12px;
  }
  .page_desc {
    font-size: 16px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .inner_banner_section { min-height: 160px; }
  .inner_banner_content > h1 { font-size: 26px; }
  .page_desc { font-size: 14px; }
}
/* END_SECTION:inner_page_banner2 */

/* START_SECTION:login_1 (INDEX:75) */
.login-hub-section {
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: transparent;
  }

  .login-hub-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
  }

  .login-hub-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
  }

  .login-hub-subtitle {
    color: #000000;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
  }

  .login-hub-title {
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
    margin: 0;
  }

  .login-hub-actions {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 593px;
  }

  .login-hub-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .login-hub-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .login-hub-footer {
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #000000;
  }

  .login-hub-footer a {
    font-weight: 600;
    text-decoration: underline;
    color: #000000;
    margin-left: 4px;
  }

  .login-hub-logged-in { width: 100%; max-width: 600px; }
  .login-hub-links { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
  .login-hub-logout { font-size: 13px; color: #5b6477; text-align: center; text-decoration: underline; cursor: pointer; }
  .login-hub-logout:hover { color: #d43131; }

  /* Responsive Adjustments */
  @media screen and (max-width: 768px) {
    .login-hub-section {
      padding: 60px 20px;
    }
    .login-hub-title {
      font-size: 36px;
    }
    .login-hub-subtitle {
      font-size: 18px;
    }
  }
/* END_SECTION:login_1 */

/* START_SECTION:loyalty_program_2 (INDEX:77) */
.loyalty-program-section {
  padding: 80px 0;
  background-color: transparent;
}

.loyalty-program-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.loyalty-header { text-align: center; max-width: 800px; }

.loyalty-subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.loyalty-main-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  margin: 0 0 15px 0;
  text-transform: capitalize;
}

.loyalty-description {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
      margin: 0;
}

.loyalty-cards-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  width: 100%;
}

.loyalty-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-visual-header {
  padding: 15px 15px 0;
  height: 180px;
}

.card-img-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.card-body { 
  padding: 20px 30px 30px; 
}

.card-body--accelerators {
    padding-top: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

ul.accelerator-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-accent-text {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
  margin-top: 0px;
}

.card-separator {
  border: none;
  border-top: 1px solid #541B76;
  margin-bottom: 20px;
  margin-top: 0px;
}

.card-title-racing {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 26px;
  margin-bottom: 15px;
  margin-top: 0px;
  font-weight: 400;
}

.progression-list, .accelerator-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color:#000;
}

.progression-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progression-list li {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  margin-bottom: 0px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.accelerator-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.acc-icon-wrapper {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acc-custom-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.acc-icon-placeholder {
  width: 20px;
  height: 20px;
  background: #eee;
  border-radius: 4px;
}

.acc-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.btn-loyalty {
  display: inline-block;
  background-color: #541B76;
  color: #fff;
  padding: 16px 40px;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

@media (max-width: 768px) {
  .loyalty-card { max-width: 100%; }
}
/* END_SECTION:loyalty_program_2 */

/* START_SECTION:loyalty_program_3 (INDEX:78) */
.lp-container {
    padding: 60px 0 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .lp-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-subheading {
    margin: 0;
    color: black;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .lp-main-heading {
    margin: 0;
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .lp-description {
    margin: 8px 0 0 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  .lp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }
  .lp-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 20px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    transition: transform 0.3s ease;
  }
  .lp-icon-wrapper {
    width: 80px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .lp-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .lp-card-title {
    margin: 0;
    color: black;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .lp-card-text {
    margin: 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .lp-footer {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
        margin-top: 5px;
  }
  .lp-button {
    width: 100%;
    max-width: 406px;
    height: 52px;
    background: #9a9a9a; /* Match the grey background from image */
    background: linear-gradient(180deg, #b0b0b0 0%, #888888 100%);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border-radius: 5px;
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .lp-button:hover {
    opacity: 0.9;
  }

  @media screen and (max-width: 749px) {
    .lp-main-heading {
      font-size: 36px;
      line-height: 1.2;
    }
    .lp-container {
      padding: 40px 15px;
    }
  }
/* END_SECTION:loyalty_program_3 */

/* START_SECTION:loyalty_program_4 (INDEX:79) */
.lp4-container {
    padding: 60px 0 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .lp4-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp4-subheading {
    margin: 0;
    color: black;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .lp4-main-heading {
    margin: 0;
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .lp4-description {
    margin: 8px 0 0 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  .lp4-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }
  .lp4-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 20px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
  }
  .lp4-icon-wrapper {
    width: 60px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .lp4-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .lp4-card-title {
    margin: 0;
    color: black;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .lp4-card-text {
    margin: 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .lp4-footer {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
        margin-top: 5px;
  }
  .lp4-button {
    width: 100%;
    max-width: 406px;
    height: 52px;
    background: linear-gradient(99deg, #FEFEF1 -11.35%, #FFF500 -6.41%, #FCBC01 1.98%, #EE8F00 9.26%, #D67A00 19.18%, #C76C00 26.95%, #B75E00 37.21%, #B15800 41.23%, #AA5300 45.34%, #933E00 60.8%, #411B00 86.67%, #110700 107.6%);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border-radius: 5px;
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .lp4-button:hover {
    opacity: 0.9;
  }

  @media screen and (max-width: 749px) {
    .lp4-main-heading {
      font-size: 36px;
      line-height: 1.2;
    }
    .lp4-container {
      padding: 40px 15px;
    }
  }
/* END_SECTION:loyalty_program_4 */

/* START_SECTION:loyalty_program_5 (INDEX:80) */
.lp5-container {
    padding: 60px 0 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .lp5-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp5-subheading {
    margin: 0;
    color: black;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .lp5-main-heading {
    margin: 0;
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .lp5-description {
    margin: 8px 0 0 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  .lp5-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }
  .lp5-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 20px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
  }
  .lp5-icon-wrapper {
    width: 60px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .lp5-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .lp5-card-title {
    margin: 0;
    color: black;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .lp5-card-text {
    margin: 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .lp5-footer {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
        margin-top: 5px;
  }
  .lp5-button {
    width: 100%;
    max-width: 406px;
    height: 52px;
    background: url(/cdn/shop/files/Background_1523233f-3b75-4c39-9837-696fc2f6fd35.png);
    background-size: cover;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .lp5-button:hover {
    opacity: 0.9;
  }

  @media screen and (max-width: 749px) {
    .lp5-main-heading {
      font-size: 36px;
      line-height: 1.2;
    }
    .lp5-container {
      padding: 40px 15px;
    }
  }
/* END_SECTION:loyalty_program_5 */

/* START_SECTION:loyalty_program_7 (INDEX:82) */
.loyalty-program-7 {
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .loyalty-header2 {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: flex;
  }

  .loyalty-title {
    margin: 0;
    align-self: stretch;
    text-align: center;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 46px;
    word-wrap: break-word;
  }

  .loyalty-subtitle {
    margin: 0;
    align-self: stretch;
    text-align: center;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    word-wrap: break-word;
  }

  .loyalty-cards-container {
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 34px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .vault-card2 {
    width: calc(50% - (34px/2));
    padding: 20px;
    background: rgba(255, 255, 255, 0.60);
    border-radius: 10px;
    border: 1px solid white;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .vault-card2-left {
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: flex;
  }

  .vault-main-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
  }

  .vault-icon-placeholder {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ddd;
  }

  .vault-card2-title {
    color: black;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 39px;
    word-wrap: break-word;
  }

  .vault-right-icon {
    width: 55px;
    height: 55px;
    object-fit: contain;
  }

  .loyalty-cta {
    text-decoration: none;
    padding: 14px 25px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .loyalty-cta span {
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word;
  }

  @media screen and (max-width: 749px) {
    .vault-card2 {
      width: 100% !important;
    }
    .loyalty-title {
      font-size: 32px !important;
    }
  }
/* END_SECTION:loyalty_program_7 */

/* START_SECTION:loyalty_program_8 (INDEX:83) */
.loyalty-program-8 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.lp8-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

/* Left Column Styling */
.lp8-left-col {
  width: 100%;
  max-width: 665px;
  height: 510px;
  padding: 40px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.10);
}

/* The Yellow Diagonal Shape */
.lp8-overlay-shape {
  position: absolute;
  width: 400px;
  height: 300px;
  right: -50px;
  bottom: -80px;
  background: #FFF500;
  transform: rotate(-15deg);
  z-index: 2;
}

.lp8-content-wrap {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lp8-heading {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0 0 16px 0;
}

.lp8-subtext {
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.lp8-subtext a {
  color: white;
  text-decoration: underline;
  margin-right: 5px;
}

.lp8-button {
  display: inline-block;
  width: 100%;
  padding: 12px 25px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
  text-align: center;
}

/* Right Column Styling */
.lp8-right-col {
  width: 100%;
  max-width: 595px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp8-accordion-item {
  border-radius: 10px;
  outline: 1px solid #B8B8B8;
  background: white;
  overflow: hidden;
}

.lp8-accordion-header {
  width: 100%;
  padding: 20px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.lp8-q-text {
  color: black;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.lp8-icon {
  width: 12px;
  height: 12px;
  position: relative;
  transition: transform 0.3s;
}

/* Plus/X Icon creation */
.lp8-icon::before, .lp8-icon::after {
  content: '';
  position: absolute;
  background: black;
  transition: transform 0.3s;
}
.lp8-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.lp8-icon::after { height: 100%; width: 2px; left: 50%; top: 0; transform: translateX(-50%); }

.lp8-accordion-header[aria-expanded="true"] .lp8-icon {
  transform: rotate(45deg);
}

.lp8-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.lp8-a-text {
  padding: 0 20px 20px 20px;
  color: #333;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .lp8-container { flex-direction: column; align-items: center; }
  .lp8-left-col, .lp8-right-col { max-width: 100%; }
}
/* END_SECTION:loyalty_program_8 */

/* START_SECTION:loyalty_program_9 (INDEX:84) */
.loyalty-vault-section {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Added image specific styles */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #541B76; /* Fallback color */
}

.loyalty-vault-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.loyalty-vault-title {
  align-self: stretch;
  text-align: center;
  margin: 0;
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
}

.loyalty-vault-button-group {
  width: 100%;
  max-width: 950px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.loyalty-vault-btn {
  padding: 14px 25px;
  background: white;
  border-radius: 5px;
  color: #541B76;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  min-width: 200px;
  text-align: center;
  line-height: 1em;
}

.loyalty-vault-btn:hover {
  opacity: 0.9;
}

@media screen and (max-width: 768px) {
  .loyalty-vault-title {
    font-size: 36px;
    line-height: 42px;
  }
  .loyalty-vault-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
/* END_SECTION:loyalty_program_9 */

/* START_SECTION:main-404 (INDEX:85) */
.ss404 {
    background:
      radial-gradient(ellipse at top right, rgba(215, 0, 0, 0.10), transparent 60%),
      radial-gradient(ellipse at bottom left, rgba(255, 210, 1, 0.10), transparent 60%),
      #0a0a0a;
    color: #fff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    font-family: 'Montserrat', -apple-system, sans-serif;
  }
  .ss404__inner { max-width: 720px; text-align: center; }

  .ss404__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFD201;
    margin: 0 0 20px;
  }

  .ss404__code {
    font-family: 'Racing Sans One', 'Bebas Neue', cursive;
    font-size: clamp(110px, 22vw, 220px);
    line-height: 0.9;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
  }
  .ss404__digit {
    background: linear-gradient(180deg, #FF3300 0%, #D70000 50%, #FFD201 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    text-shadow: 0 6px 30px rgba(215, 0, 0, 0.25);
  }
  /* Middle 0 spins playfully — the gym-floor wink. Respects reduced-motion. */
  .ss404__digit:nth-child(2) { animation: ss404-rotate 6s linear infinite; }
  @keyframes ss404-rotate { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .ss404__digit:nth-child(2) { animation: none; }
  }

  .ss404__title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.15;
  }
  .ss404__lede {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 540px;
  }

  .ss404__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
  }
  .ss404__cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s, color 0.15s;
  }
  .ss404__cta--primary {
    background: linear-gradient(135deg, #D70000 0%, #B30000 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(215, 0, 0, 0.35);
  }
  .ss404__cta--primary:hover {
    background: linear-gradient(135deg, #FFD201 0%, #FFB800 100%);
    color: #1a1a1a;
    transform: translateY(-1px);
  }
  .ss404__cta--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .ss404__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #FFD201;
    color: #FFD201;
  }

  .ss404__help {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
  }
  .ss404__help a {
    color: #FFD201;
    text-decoration: underline;
  }
  .ss404__help a:hover { color: #fff; }

  /* ── Mobile (< 750px) ────────────────────────────────────────── */
  @media (max-width: 749px) {
    .ss404 {
      padding: 48px 0;
      min-height: 60vh;
    }
    .ss404__inner { padding: 0 16px; }
    .ss404__eyebrow {
      font-size: 11px;
      margin-bottom: 14px;
    }
    .ss404__lede {
      font-size: 14px;
      margin-bottom: 24px;
    }
    .ss404__ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-bottom: 24px;
    }
    .ss404__cta {
      justify-content: center;
      padding: 14px 20px;
      min-height: 48px;
      font-size: 13px;
    }
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-subscriptions (INDEX:105) */
.ssa-subs-page {
    padding: 40px 0 80px;
  }
  /* Guest-state — shown when this section is embedded on a public
     surface (e.g. /pages/never-run-out) and the visitor is logged out. */
  .ssa-subs-page--guest { padding: 60px 0 80px; }
  .ssa-subs-guest {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 32px;
    background: rgba(var(--color-background, 255 255 255), 0.04);
    border: 1.5px dashed rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 14px;
  }
  .ssa-subs-guest__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 12px;
    color: rgb(var(--color-foreground, 33 33 33));
    line-height: 1.05;
  }
  .ssa-subs-guest__sub {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(var(--color-foreground, 33 33 33), 0.7);
    margin: 0 0 24px;
  }
  .ssa-subs-guest__btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    font-family: Montserrat, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .ssa-subs-guest__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
    color: #fff;
  }
  /* Section heading — mirrors `.nro-section__title` (the "Everything
     subscribers get" heading lower on the same page) so the two
     sections feel like a pair. Same Racing Sans family + size scale,
     but uses `--color-foreground` so it adapts to dark/light schemes
     instead of being hard-coded white like the NRO landing version. */
  .ssa-subs-intro-title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    letter-spacing: 0.005em;
    text-align: center;
    margin: 0 auto 12px;
    color: rgb(var(--color-foreground, 33 33 33));
    text-transform: uppercase;
    line-height: 1.05;
    padding-top: 24px;
  }
  .ssa-subs-intro-sub {
    font-family: Montserrat, -apple-system, sans-serif;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(var(--color-foreground, 33 33 33), 0.70);
    /* padding-top was 28px when this was the FIRST element in the
       section (the title now owns the top spacing). Drop to a small
       gap below the title. */
    padding-top: 0;
  }

  /* ── Skeleton ───────────────────────────────────────────────── */
  .ssa-subs-skel {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ssa-subs-skel__card {
    height: 180px;
    border-radius: 14px;
    background: linear-gradient(90deg,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.10) 50%,
      rgba(0,0,0,0.04) 100%);
    background-size: 200% 100%;
    animation: ssa-subs-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes ssa-subs-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ── Empty state ────────────────────────────────────────────── */
  .ssa-subs-empty {
    text-align: center;
    padding: 56px 24px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 14px;
    border: 1.5px dashed rgba(var(--color-foreground, 33 33 33), 0.15);
  }
  .ssa-subs-empty__icon {
    color: #d70000;
    margin-bottom: 12px;
  }
  .ssa-subs-empty__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 10px;
    color: rgb(var(--color-foreground, 33 33 33));
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .ssa-subs-empty__sub {
    font-family: Montserrat, -apple-system, sans-serif;
    max-width: 440px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .ssa-subs-empty__cta {
    display: inline-block;
    padding: 12px 22px;
    margin: 6px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ssa-subs-empty__cta--secondary {
    background: #fff;
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.2);
    text-shadow: none;
  }

  /* ── Subscription card ──────────────────────────────────────── */
  .ssa-subs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ssa-subs-card {
    background: #fff;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
  }
  .ssa-subs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  }
  .ssa-subs-card--paused { opacity: 0.7; }
  .ssa-subs-card__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .ssa-subs-card__img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.04);
    flex: none;
  }
  .ssa-subs-card__body {
    flex: 1;
    min-width: 0;
  }
  .ssa-subs-card__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: 19px;
    font-weight: 400;
    margin: 0 0 6px;
    color: rgb(var(--color-foreground, 33 33 33));
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.15;
  }
  .ssa-subs-card__meta {
    font-size: 12.5px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ssa-subs-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ssa-subs-card__status--active { background: rgba(34, 139, 34, 0.1); color: #1e7b1e; }
  .ssa-subs-card__status--paused { background: rgba(255, 165, 0, 0.12); color: #b86200; }
  .ssa-subs-card__status--cancelled { background: rgba(0, 0, 0, 0.06); color: #5a5a5a; }
  .ssa-subs-card__next {
    font-size: 13px;
    color: rgba(var(--color-foreground, 33 33 33), 0.7);
    margin: 10px 0 0;
  }
  .ssa-subs-card__next strong {
    color: rgb(var(--color-foreground, 33 33 33));
  }

  /* Cadence row */
  .ssa-subs-card__cadence {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    flex-wrap: wrap;
  }
  .ssa-subs-card__cadence-label {
    font-size: 12.5px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
    font-weight: 600;
  }
  .ssa-subs-card__cadence-select {
    padding: 6px 10px;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    flex: 1;
    min-width: 140px;
  }

  /* Backup row */
  .ssa-subs-card__backup {
    margin-top: 10px;
    font-size: 12.5px;
    padding: 10px 12px;
    background: rgba(255, 210, 1, 0.06);
    border-left: 3px solid #ffd201;
    border-radius: 0 6px 6px 0;
  }
  .ssa-subs-card__backup strong {
    color: rgb(var(--color-foreground, 33 33 33));
  }

  /* Actions */
  .ssa-subs-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .ssa-subs-card__btn {
    padding: 9px 16px;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    background: #fff;
    color: rgb(var(--color-foreground, 33 33 33));
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
  }
  .ssa-subs-card__btn:hover { background: rgba(0, 0, 0, 0.04); }
  .ssa-subs-card__btn:active { transform: scale(0.97); }
  .ssa-subs-card__btn--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ssa-subs-card__btn--danger {
    color: #d70000;
    border-color: rgba(215, 0, 0, 0.3);
  }
  .ssa-subs-card__btn--danger:hover {
    background: rgba(215, 0, 0, 0.06);
  }

  /* ── Recommended grid ───────────────────────────────────────── */
  .ssa-subs-recs {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.08);
  }
  .ssa-subs-recs__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 6px;
    color: rgb(var(--color-foreground, 33 33 33));
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .ssa-subs-recs__sub {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 14px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
    margin: 0 0 20px;
  }
  .ssa-subs-recs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
  .ssa-subs-rec {
    background: #fff;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .ssa-subs-rec:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  }
  .ssa-subs-rec__img {
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.04);
    object-fit: cover;
    width: 100%;
    display: block;
  }
  .ssa-subs-rec__body {
    padding: 12px;
  }
  .ssa-subs-rec__title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
  }
  .ssa-subs-rec__price {
    font-size: 13px;
    color: rgba(var(--color-foreground, 33 33 33), 0.7);
  }

  @media (max-width: 749px) {
    .ssa-subs-intro-title { padding-top: 16px; }
    .ssa-subs-intro-sub { font-size: 14px; padding-top: 0; }
    .ssa-subs-card { padding: 16px; }
    .ssa-subs-card__img { width: 52px; height: 52px; }
    .ssa-subs-card__header { gap: 14px; }
    .ssa-subs-card__title { font-size: 17px; line-height: 1.3; }

    /* Cadence + status pill row stacks vertically below the title on
       narrow screens — avoids horizontal scroll on iPhone SE width. */
    .ssa-subs-card__meta {
      flex-wrap: wrap;
      gap: 6px 10px;
    }

    /* Cadence label + select share a row on desktop; on mobile the label
       takes a full line and the select expands so the touch target is
       comfortable (≥ 44px tall). */
    .ssa-subs-card__cadence {
      flex-wrap: wrap;
      gap: 6px 12px;
    }
    .ssa-subs-card__cadence-label {
      flex-basis: 100%;
    }
    .ssa-subs-card__cadence-select {
      flex: 1 1 auto;
      min-height: 44px;
    }

    /* Action buttons stack to full-width so each is reachable by thumb
       at the bottom edge — sub-44px targets are an a11y violation per WCAG. */
    .ssa-subs-card__actions {
      flex-wrap: wrap;
      gap: 10px;
    }
    .ssa-subs-card__btn {
      flex: 1 1 100%;
      min-height: 44px;
      padding: 12px 14px;
    }

    /* Confirm modal — make sure long bodies don't push the buttons off
       the visible viewport on small phones. */
    .ssa-subs-confirm {
      max-height: 86vh;
      overflow-y: auto;
      width: calc(100% - 32px);
      max-width: 420px;
    }
  }

  /* Reduced-motion respect — disable the .show transition on toast +
     modal overlay for users who prefer no motion. */
  @media (prefers-reduced-motion: reduce) {
    .ssa-subs-toast,
    .ssa-subs-confirm-overlay,
    .ssa-subs-card,
    .ssa-subs-card__btn {
      transition: none !important;
    }
  }

  /* ── "Build another bundle" CTA ─────────────────────────────────── */
  /* Sits at the end of the subscription cards list. Only rendered by JS
     when there's at least one card — never shown to customers with zero
     subscriptions (they see the existing empty-state CTAs instead). */
  .ssa-subs-add-another {
    list-style: none;
    margin-top: 16px;
  }
  .ssa-subs-add-another__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    background: rgba(var(--color-background, 255 255 255), 0.04);
    border: 1.5px dashed rgba(var(--color-foreground, 33 33 33), 0.22);
    border-radius: 14px;
    text-decoration: none;
    color: rgb(var(--color-foreground, 33 33 33));
    font-family: Montserrat, -apple-system, sans-serif;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    cursor: pointer;
  }
  .ssa-subs-add-another__btn:hover {
    background: rgba(var(--color-background, 255 255 255), 0.08);
    border-color: #d70000;
    transform: translateY(-1px);
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .ssa-subs-add-another__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(215, 0, 0, 0.3);
  }
  .ssa-subs-add-another__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ssa-subs-add-another__body strong {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .ssa-subs-add-another__body small {
    font-size: 13px;
    color: rgba(var(--color-foreground, 33 33 33), 0.6);
    line-height: 1.3;
  }
  .ssa-subs-add-another__arrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: rgba(var(--color-foreground, 33 33 33), 0.5);
    transition: transform 0.15s, color 0.15s;
  }
  .ssa-subs-add-another__btn:hover .ssa-subs-add-another__arrow {
    transform: translateX(4px);
    color: #d70000;
  }
  @media (max-width: 480px) {
    .ssa-subs-add-another__btn { padding: 14px 14px; gap: 12px; }
    .ssa-subs-add-another__body strong { font-size: 16px; }
    .ssa-subs-add-another__body small { font-size: 12px; }
  }
/* END_SECTION:main-subscriptions */

/* START_SECTION:monthly_challenges_1 (INDEX:106) */
.mc1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px 0 50px 0;
  max-width: 1330px;
  margin: 0 auto;
}

/* ── Header ── */
.mc1__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 868px;
  text-align: center;
}

.mc1__tagline {
  color: #212121;
  font-size: 22px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  margin: 0;
}

.mc1__title {
  color: #212121;
  font-size: clamp(36px, 5vw, 52px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.mc1__description {
  color: #212121;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  max-width: 812px;
  margin: 0;
}

/* ── Card ── */
.mc1__card {
  display: flex;
  align-items: center;
  width: 100%;
  background: #212121;
  border-radius: 20px;
  overflow: hidden;
  padding: 0px 60px 0px 60px;
  position: relative;
  aspect-ratio: 1320 / 631;
}

/* ── Card content ── */
.mc1__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  max-width: 670px
}

.mc1__card-title {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.3;
  margin: 0;
}

.mc1__card-desc {
  color: #fff;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  margin: 0;
}

/* ── Challenge meta (points / end date / completion) ── */
.mc1__challenge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mc1__points-badge {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  color: #fff;
  font-size: 13px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}

.mc1__points-badge:empty { display: none; }

/* Hide stale Liquid placeholders until the API fetch resolves (or 4s safety). */
.mc1[data-mc-loading="1"] .mc1__card-title,
.mc1[data-mc-loading="1"] .mc1__card-desc,
.mc1[data-mc-loading="1"] .mc1__challenge-meta,
.mc1[data-mc-loading="1"] .mc1__stat-value,
.mc1[data-mc-loading="1"] .mc1__stat-label { visibility: hidden; }
.mc1[data-mc-loading="1"] .mc1__stat-arc { opacity: 0; }


.mc1__completed-badge {
  background: rgba(0, 200, 100, 0.85);
  color: #fff;
  font-size: 13px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

/* ── Stats ── */
.mc1__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mc1__stat {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.mc1__stat-ring {
  width: 100%;
  height: 100%;
}

.mc1__stat-track {
  fill: none;
  stroke: #3a3a3a;
  stroke-width: 10;
}

.mc1__stat-arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.mc1__stat-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.mc1__stat-value {
  color: #fff;
  font-size: 22px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1;
}

.mc1__stat-label {
  color: #fff;
  font-size: 12px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
}

/* ── Card image ── */
.mc1__card-image {
    flex-shrink: 0;
    width: calc(100% - 670px);
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
}

.mc1__card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .mc1__card {
    flex-direction: column;
    padding: 40px 30px;
  }

  .mc1__card-image {
    width: 100%;
    max-width: 400px;
  }

  .mc1__card::before,
  .mc1__card::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .mc1 {
    padding: 60px 16px;
    gap: 40px;
  }

  .mc1__stats {
    justify-content: center;
  }
}
/* END_SECTION:monthly_challenges_1 */

/* START_SECTION:monthly_challenges_2 (INDEX:107) */
.mc_sec_3 {
    padding: 50px 0;
}

/* --- Row 1 --- */
.mc_sec_3 .mc_sec_3_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 450;
    display: flex;
    align-items: center;
    border-radius: 20px;
}

.mc_sec_3 .mc_sec_3_content {
    width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin-left: 30px;
}

.mc_sec_3 .mc_sec_3_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.mc_sec_3 .mc_sec_3_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.mc_sec_3 .mc_sec_3_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.mc_sec_3 .mc_sec_3_title {
    align-self: stretch;
    color: white;
    font-size: 32px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1em;
    word-wrap: break-word;
    margin: 0;
}

.mc_sec_3 .mc_sec_3_desc {
    align-self: stretch;
    color: white;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5em;
}

.mc_sec_3 .mc_sec_3_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.mc_sec_3 .mc_sec_3_btn:hover {
    opacity: 0.9;
}

.mc_sec_3_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0;
}

.mc_sec_3_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU {
    width: 100%;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: -20%;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Same pattern as giveaways_3 / partner_collab_1: 1320:450 aspect-
 * ratio bg-image hero with 560px content panel. Stack everything,
 * use min-height instead of aspect-ratio.
 */
@media (max-width: 749px) {
  .mc_sec_3 { padding: 28px 0; }
  .mc_sec_3 .mc_sec_3_row {
    aspect-ratio: auto;
    min-height: 280px;
    border-radius: 14px;
    padding: 22px 16px;
  }
  .mc_sec_3 .mc_sec_3_content {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .mc_sec_3 .mc_sec_3_subtitle { font-size: 14px; }
  .mc_sec_3 .mc_sec_3_title {
    font-size: 22px;
    line-height: 1.1;
  }
  .mc_sec_3 .mc_sec_3_desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .mc_sec_3 .mc_sec_3_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: 0;
  }
}
/* END_SECTION:monthly_challenges_2 */

/* START_SECTION:monthly_challenges_3 (INDEX:108) */
.mc3c {
  padding: 50px 0;
}

.mc3c__grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
}

/* --- Card --- */
.mc3c__card {
  position: relative;
  flex: 1;
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mc3c__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.mc3c__card-img--placeholder {
  background: #212121;
}

.mc3c__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 20px;
}

.mc3c__card-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Title --- */
.mc3c__card-title {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0;
  word-wrap: break-word;
}

/* --- Feature List --- */
.mc3c__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc3c__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 48px;
}

.mc3c__list-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* --- Button --- */
.mc3c__btn-wrap {
  display: flex;
  flex-direction: column;     /* button on top, badge below — was inline before */
  align-items: center;        /* center both horizontally */
  gap: 14px;                  /* breathing room between button and badge */
  margin-top: 30px;
}

.mc3c__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.mc3c__btn:hover {
  opacity: 0.9;
}

.mc3c__btn {
  cursor: pointer;
  border: none;
}

.mc3c__btn.mc-btn--completed,
.mc3c__btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.mc3c__points-notify {
  /* Sits in a column-flex parent now — gap handles vertical spacing,
     so margin-top is no longer needed. */
  text-align: center;
  color: #212121;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;            /* dialled back from 700 — was competing with the button */
  letter-spacing: 0.01em;
}

.mc_sec_3 .mc_sec_3_desc~div {
    margin-bottom: -40px;
}

.mc_sec_3 .mc_sec_3_text_group {
    gap: 10px !important;
}

/* --- Modal (manual session log) --- */
.mc3c-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.mc3c-modal__panel {
  background: #fff; color: #212121;
  border-radius: 16px; padding: 28px;
  width: 100%; max-width: 460px;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  font-family: Montserrat, sans-serif;
}
.mc3c-modal__close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 28px; line-height: 1;
  cursor: pointer; color: #888;
}
.mc3c-modal__title { margin: 0 0 6px; font-family: 'Racing Sans One', sans-serif; font-size: 24px; line-height: 1.2; }
.mc3c-modal__hint { margin: 0 0 18px; font-size: 13px; color: #666; }
.mc3c-modal__form { display: flex; flex-direction: column; gap: 12px; }
.mc3c-modal__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.mc3c-modal__form input,
.mc3c-modal__form textarea {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid #ccc; border-radius: 6px; background: #fafafa;
}
.mc3c-modal__form textarea { resize: vertical; }
.mc3c-modal__opt { font-weight: 400; color: #888; font-size: 11px; }
.mc3c-modal__msg { font-size: 13px; min-height: 18px; }
.mc3c-modal__msg--ok { color: #0a7d2e; }
.mc3c-modal__msg--err { color: #c0392b; }
.mc3c-modal__submit { margin-top: 6px; }

/* --- Responsive --- */
@media screen and (max-width: 900px) {
  .mc3c__grid {
    flex-direction: column;
  }

  .mc3c__card {
    min-height: 420px;
  }
}

@media (max-width: 749px) {
  .mc3c__card {
    min-height: 0;
    padding: 22px;
  }
  .mc3c__card-content {
    padding: 0;
    gap: 14px;
  }
  .mc3c__card-title {
    font-size: 18px;
    line-height: 1.15;
  }
  .mc3c__list-item {
    font-size: 13px;
    padding: 10px 12px;
    min-height: 44px;
  }
  .mc3c__btn-wrap { margin-top: 18px; gap: 10px; }
  .mc3c__btn {
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  .mc3c__points-notify { font-size: 12px; }
  .mc3c-modal__panel {
    padding: 22px;
    border-radius: 14px;
  }
  .mc3c-modal__title { font-size: 20px; }
}
/* END_SECTION:monthly_challenges_3 */

/* START_SECTION:monthly_challenges_4 (INDEX:109) */
.mc4 {
  padding: 50px 0 100px 0;
}

.mc4__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ── Heading ── */
.mc4__heading {
  color: var(--black, #212121);
  font-size: clamp(36px, 4vw, 52px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* ── Slider wrapper (arrows + swiper) ── */
.mc4__slider-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.mc4__swiper {
  flex: 1;
  min-width: 0;
}

/* ── Arrow buttons ── */
.mc4__arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #ffffff94;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    z-index: 2;
    position: absolute;
    backdrop-filter: blur(5px);
}

.mc4__inner button.mc4__arrow.mc4__arrow--prev {
    left: -25px;
}

.mc4__inner button.mc4__arrow.mc4__arrow--next {
    right: -25px;
}

.mc4__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Hide arrows / dots based on settings */
[data-show-arrows="false"] .mc4__arrow { display: none; }
[data-show-dots="false"] .mc4__dots   { display: none; }

/* ── Swiper pagination dots ── */
.mc4__dots {
  margin-top: 20px;
  position: static;
  text-align: center;
}

/* ── Champion card ── */
.mc4__card {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 320 / 448;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: auto !important;
}

/* Background image */
.mc4__card-media {
  position: relative;
  inset: 0;
}

.mc4__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Card overlay ── */
.mc4__card-overlay {
    z-index: 1;
    padding: 14px 18px 16px;
    background: linear-gradient(90deg, rgba(200, 10, 0, 0.6) 0%, rgba(220, 155, 0, 0.6) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    bottom: 0;
    width: calc(100% - 18px - 18px);
}


.mc4__champion-name {
  color: #fff;
  font-size: 20px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
}

/* ── Location row ── */
.mc4__locations {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mc4__location {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mc4__location-svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #fff;
}

.mc4__location-text {
  color: #fff;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mc4 {
    padding: 60px 0;
  }

  .mc4__arrow {
    width: 36px;
    height: 36px;
  }

  .mc4__location-text {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mc4__inner {
    padding: 0 12px;
  }

  .mc4__slider-wrap {
    gap: 10px;
  }
}
/* END_SECTION:monthly_challenges_4 */

/* START_SECTION:nro-bundle-builder (INDEX:113) */
.nro-bundle {
  background: linear-gradient(180deg, #15151b 0%, #0f0f12 100%);
  padding: 80px 0;
  color: #fff;
}
.nro-bundle__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.nro-bundle__title {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
  color: #fff;
}
.nro-bundle__sub {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.nro-bundle__empty-state {
  padding: 48px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-family: Montserrat, -apple-system, sans-serif;
}

.nro-bundle__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.nro-bundle__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.nro-bundle__card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
  /* Whole card is clickable — anywhere except the Add to Bundle
     button opens the Quick-Add modal (variant picker + reviews +
     full product info). Same UX as Shopify's "Choose options" on
     collection cards. */
  cursor: pointer;
}
/* The `display: flex` above has higher specificity than the browser's
   default `[hidden] { display: none }` user-agent rule, so toggling the
   `hidden` attribute on a card alone wouldn't actually hide it. Restore
   the intent explicitly — this is what makes the search filter visible. */
.nro-bundle__card[hidden] {
  display: none !important;
}
.nro-bundle__card:hover {
  border-color: rgba(255, 210, 1, 0.4);
  transform: translateY(-2px);
}
.nro-bundle__card-img-wrap {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* anchor for .nro-bundle__card-info */
}
/* ⓘ info chip — top-LEFT mirror of the decrement chip. Always visible
   (no hover-reveal) so customers know it's there on touch devices too. */
.nro-bundle__card-info {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.nro-bundle__card-info:hover {
  background: rgba(255, 210, 1, 0.92);
  color: #15151b;
  transform: scale(1.08);
}
.nro-bundle__card-info:focus-visible {
  outline: 2px solid #ffd201;
  outline-offset: 2px;
}
.nro-bundle__card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.nro-bundle__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nro-bundle__card-title {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.nro-bundle__card-price {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffd201;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.nro-bundle__card-add {
  margin-top: auto;
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  border: 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 10px rgba(215, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nro-bundle__card-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(215, 0, 0, 0.4);
}
.nro-bundle__card-add--added {
  background: #1e7b1e;
  box-shadow: 0 4px 10px rgba(30, 123, 30, 0.4);
}

/* In-bundle state — card visibly reflects "this product is in your
   bundle" with a gold border + subtle inner glow. Persistent across
   page lifetime (sidebar removal also clears it). */
.nro-bundle__card.nro-bundle__card--in-bundle {
  border-color: rgba(255, 210, 1, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 210, 1, 0.35),
    0 10px 24px rgba(255, 210, 1, 0.08);
}
.nro-bundle__card.nro-bundle__card--in-bundle .nro-bundle__card-add {
  background: linear-gradient(90deg, #1e7b1e 0%, #2d9a2d 100%);
  box-shadow: 0 4px 10px rgba(30, 123, 30, 0.3);
}
.nro-bundle__card.nro-bundle__card--in-bundle .nro-bundle__card-add:hover {
  background: linear-gradient(90deg, #2d9a2d 0%, #34b834 100%);
  box-shadow: 0 8px 16px rgba(30, 123, 30, 0.4);
}
.nro-bundle__card-add-check {
  display: inline-block;
  margin-right: 4px;
  font-weight: 900;
}

/* Sold-out fallback — applied at runtime when /cart/add.js returns 422
   "sold out" between page load and click. The Liquid filter already
   hides products that were oos at render, so this only fires for the
   between-state. Mute the card visually so it's clearly inactive but
   still informative (the customer can see what was sold out). */
.nro-bundle__card.nro-bundle__card--sold-out {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.nro-bundle__card.nro-bundle__card--sold-out .nro-bundle__card-add {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  box-shadow: none;
  text-shadow: none;
}
.nro-bundle__card.nro-bundle__card--sold-out .nro-bundle__card-add:hover {
  /* No interactive feedback on a disabled button. */
  transform: none;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Decrement chip — small "−" pill in the top-right corner of an
   in-bundle card. Clicking removes one quantity (or fully if qty=1). */
.nro-bundle__card-decrement {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s, transform 0.1s;
  backdrop-filter: blur(4px);
  /* Eliminate browser's ~300ms double-tap-zoom detection delay on
     touch devices — that latency was the "sometimes takes a moment
     to take effect" issue Cleo flagged 2026-05-16. With this set, the
     tap fires immediately. Also prevents iOS's tap-highlight overlay
     from flashing grey on press. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-bundle__card-decrement:hover {
  background: #d70000;
  transform: scale(1.08);
}
/* Pressed state — fires instantly on mousedown/touchstart so the
   customer sees acknowledgement BEFORE the DOM rebuild completes.
   `:active` is the synchronous CSS hook for "click is happening". */
.nro-bundle__card-decrement:active {
  background: #b30000;
  transform: scale(0.92);
  transition-duration: 0s;
}

.nro-bundle__rate-banner {
  background: linear-gradient(90deg, #d70000 0%, #b30000 100%);
  color: #fff;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  margin: 0 auto 24px;
  max-width: 720px;
  box-shadow: 0 8px 24px rgba(215, 0, 0, 0.3);
}
.nro-bundle__card-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(60%);
}

.nro-bundle__grid-empty {
  padding: 36px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-family: Montserrat, -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Sticky bundle sidebar ──────────────────────────────────────── */
.nro-bundle__cart {
  position: sticky;
  top: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 210, 1, 0.25);
  border-radius: 14px;
  padding: 20px;
  font-family: Montserrat, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.nro-bundle__cart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nro-bundle__cart-title {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: #fff;
  line-height: 1;
}
.nro-bundle__cart-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.nro-bundle__cart-empty p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 18px 0;
}

.nro-bundle__cart-item {
  display: flex;
  gap: 10px;
  align-items: center;
  /* Vertical breathing room between items + a faint divider so the
     boundary between rows reads at a glance. Previously rows abutted
     each other directly which made multi-item bundles look cramped
     (see the "5150 + ABE" stacked screenshot Cleo flagged 2026-05-16). */
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nro-bundle__cart-item:first-child {
  padding-top: 4px;
}
.nro-bundle__cart-item:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.nro-bundle__cart-item-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}
.nro-bundle__cart-item-body {
  flex: 1;
  min-width: 0;
}
.nro-bundle__cart-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nro-bundle__cart-item-price {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 6px;
  font-weight: 600;
}
.nro-bundle__cart-item-unit {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}
.nro-bundle__cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 2px;
}
.nro-bundle__cart-item-qbtn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.12s, color 0.12s, transform 0.08s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-bundle__cart-item-qbtn:hover {
  background: rgba(255, 210, 1, 0.18);
  color: #ffd201;
}
.nro-bundle__cart-item-qbtn:active {
  background: rgba(255, 210, 1, 0.32);
  transform: scale(0.88);
  transition-duration: 0s;
}
.nro-bundle__cart-item-qval {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.nro-bundle__cart-item-remove {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.08s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-bundle__cart-item-remove:hover {
  background: rgba(215, 0, 0, 0.15);
  color: #ff7a7a;
}
.nro-bundle__cart-item-remove:active {
  background: rgba(215, 0, 0, 0.32);
  color: #ff7a7a;
  transform: scale(0.88);
  transition-duration: 0s;
}

.nro-bundle__cart-cadence {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Defeat `display: flex` overriding the [hidden] attribute. Without
   this, hiding via JS (`.hidden = true`) leaves the element visible
   because the cascaded `display: flex` wins. */
.nro-bundle__cart-cadence[hidden],
.nro-bundle__cart-totals[hidden] {
  display: none !important;
}
.nro-bundle__cart-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}
.nro-bundle__cart-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
}
.nro-bundle__cart-select:focus {
  outline: 0;
  border-color: #ffd201;
  box-shadow: 0 0 0 3px rgba(255, 210, 1, 0.15);
}

.nro-bundle__cart-totals {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nro-bundle__cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.nro-bundle__cart-row--save {
  color: #ffd201;
}
.nro-bundle__cart-row--total {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.005em;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4px;
}

.nro-bundle__cart-submit {
  width: 100%;
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  border: 0;
  padding: 14px 16px;
  border-radius: 8px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.nro-bundle__cart-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
}
.nro-bundle__cart-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nro-bundle__cart-fine {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 989px) {
  .nro-bundle__layout {
    grid-template-columns: 1fr;
  }
  .nro-bundle__cart {
    position: static;
    max-height: none;
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nro-bundle__card,
  .nro-bundle__card-add,
  .nro-bundle__cart-submit {
    transition: none;
  }
}

/* ── Duplicate-subscription warning modal ─────────────────────────── */
/* Lives outside .nro-bundle scope because it's appended to <body>.
   Same visual language as the section (dark card, gradient CTA) so it
   feels native to the bundle UX. */
.nro-dup-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nro-dup-fade 0.18s ease-out;
}
@keyframes nro-dup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nro-dup-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 18, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .nro-dup-modal__backdrop { background: rgba(0, 0, 0, 0.75); }
}
.nro-dup-modal__card {
  position: relative;
  background: #15151b;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  font-family: Montserrat, -apple-system, sans-serif;
}
.nro-dup-modal__title {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: #fff;
}
.nro-dup-modal__list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  font-weight: 600;
}
.nro-dup-modal__list li { margin-bottom: 4px; }
.nro-dup-modal__body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 24px;
}
.nro-dup-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nro-dup-modal__btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nro-dup-modal__btn--primary {
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
}
.nro-dup-modal__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
}
.nro-dup-modal__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nro-dup-modal__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 420px) {
  .nro-dup-modal__card { padding: 24px 20px; }
  .nro-dup-modal__title { font-size: 19px; }
  .nro-dup-modal__actions { flex-direction: column; }
  .nro-dup-modal__btn { width: 100%; }
}

/* ── Toolbar (search + count) ─────────────────────────────────────── */
.nro-bundle__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.nro-bundle__search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background 0.15s;
  /* Two-layer background-clip trick: the inner padding-box fill is the
     translucent grey idle state; the outer border-box fill is the
     trademark red→orange→yellow gradient. On idle we hide the gradient
     by setting border-color transparent + a matching neutral border
     layer. On focus we swap in the gradient. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) padding-box,
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) border-box;
  border: 1.5px solid transparent;
}
.nro-bundle__search:focus-within {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) padding-box,
    linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%) border-box;
  box-shadow: 0 0 0 3px rgba(215, 0, 0, 0.12);
}
/* Suppress the browser's default focus outline on the input itself —
   the gradient border on the parent carries the focus signal now. */
.nro-bundle__search-input:focus {
  outline: none;
  box-shadow: none;
}
.nro-bundle__search-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}
.nro-bundle__search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 14px;
  padding: 2px 0;
}
.nro-bundle__search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.nro-bundle__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='black' d='M7 5.6L11.2 1.4l1.4 1.4L8.4 7l4.2 4.2-1.4 1.4L7 8.4l-4.2 4.2-1.4-1.4L5.6 7 1.4 2.8l1.4-1.4z'/></svg>") center / contain no-repeat;
  cursor: pointer;
}
.nro-bundle__count {
  margin: 0;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  flex: 0 0 auto;
}
.nro-bundle__count [data-nro-bundle-count-rendered],
.nro-bundle__count [data-nro-bundle-count-total] {
  color: #fff;
  font-weight: 600;
}

/* ── Load more ─────────────────────────────────────────────────────── */
.nro-bundle__load-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.nro-bundle__load-more[hidden] { display: none; }
.nro-bundle__load-more-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 12px 28px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.nro-bundle__load-more-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(215, 0, 0, 0.5);
  transform: translateY(-1px);
}
.nro-bundle__load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── No-results message ────────────────────────────────────────────── */
.nro-bundle__no-results {
  margin-top: 24px;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 14px;
}
.nro-bundle__no-results[hidden] { display: none; }
.nro-bundle__no-results p { margin: 0; }
.nro-bundle__no-results-clear {
  background: none;
  border: 0;
  color: #ffd201;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.nro-bundle__no-results-clear:hover { color: #fff; }

@media (max-width: 749px) {
  .nro-bundle__toolbar {
    gap: 10px;
  }
  .nro-bundle__count {
    width: 100%;
    text-align: left;
  }
}
/* END_SECTION:nro-bundle-builder */

/* START_SECTION:nro-intro (INDEX:115) */
.nro-landing--intro-only {
    background: #0f0f12 !important;
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;
  }
  .nro-landing--intro-only .nro-intro {
    padding: 56px 0 40px;
    text-align: center;
  }
  .nro-landing--intro-only .nro-intro__tagline {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.85);
  }
  .nro-landing--intro-only .nro-intro__cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nro-landing--intro-only .nro-intro__cta {
    font-family: Montserrat, -apple-system, sans-serif;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .nro-landing--intro-only .nro-intro__cta--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.3);
  }
  .nro-landing--intro-only .nro-intro__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.4);
  }
  .nro-landing--intro-only .nro-intro__cta--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .nro-landing--intro-only .nro-intro__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
  }
/* END_SECTION:nro-intro */

/* START_SECTION:nro-landing (INDEX:116) */
/* Never Run Out Landing — Branded design (May 2026)
     Strong red→yellow gradient hero, racing-style typography,
     bold cards. No plain Amazon look anywhere. */

  .nro-landing,
  .nro-landing.color-scheme-1,
  .nro-landing.color-scheme-2,
  .nro-landing.color-scheme-3,
  .nro-landing.color-scheme-4,
  .nro-landing.color-scheme-5 {
    background: #0f0f12 !important;
    color: #fff;
  }

  /* ── Intro (slim band under the brand banner) ─────────────── */
  .nro-intro {
    padding: 56px 0 40px;
    text-align: center;
  }
  .nro-intro__tagline {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.85);
  }
  .nro-intro__cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nro-intro__cta {
    font-family: Montserrat, -apple-system, sans-serif;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .nro-intro__cta--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.3);
  }
  .nro-intro__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.4);
  }
  .nro-intro__cta--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .nro-intro__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* ── Generic section ──────────────────────────────────────── */
  .nro-section {
    padding: 80px 0;
  }
  .nro-section--alt {
    background: linear-gradient(180deg, #15151b 0%, #0f0f12 100%);
  }
  .nro-section__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    letter-spacing: 0.005em;
    text-align: center;
    margin: 0 0 10px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
  }
  .nro-section__sub {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    margin: 0 auto 40px;
    max-width: 540px;
    line-height: 1.55;
  }

  /* ── 5 pillars grid ───────────────────────────────────────── */
  .nro-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }
  .nro-pillar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 22px;
    transition: transform 0.2s, border-color 0.2s;
  }
  .nro-pillar:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 210, 1, 0.4);
  }
  .nro-pillar__icon {
    font-size: 32px;
    margin-bottom: 14px;
    display: inline-block;
  }
  .nro-pillar__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .nro-pillar__body {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  /* ── 3-step how-it-works ──────────────────────────────────── */
  .nro-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: start;
  }
  .nro-step {
    text-align: center;
    padding: 20px;
  }
  .nro-step__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .nro-step__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .nro-step__body {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .nro-faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .nro-faq__item {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 18px;
    transition: border-color 0.2s;
  }
  .nro-faq__item[open] {
    border-color: rgba(255, 210, 1, 0.3);
  }
  .nro-faq__q {
    font-family: Montserrat, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nro-faq__a {
    font-family: Montserrat, -apple-system, sans-serif;
  }
  .nro-faq__q::-webkit-details-marker { display: none; }
  .nro-faq__q::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s;
  }
  .nro-faq__item[open] .nro-faq__q::after {
    content: '−';
    color: #ffd201;
  }
  .nro-faq__a {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ── Final CTA ────────────────────────────────────────────── */
  /* Trademark orange — same hue as the middle stop of the brand
     gradient (#ff6b00). Tonal sweep adds depth without leaning red or
     yellow: a touch lighter on the left (#ff8a4c), pure trademark
     orange in the middle (#ff6b00), and slightly deeper on the right
     (#e85a00). The yellow radial wash from before is kept — it
     warms the centre and ties back to the brand's yellow stop. */
  .nro-final-cta {
    background:
      radial-gradient(ellipse at center, rgba(255, 210, 1, 0.32) 0%, transparent 70%),
      linear-gradient(90deg, #ff8a4c 0%, #ff6b00 50%, #e85a00 100%);
    padding: 64px 0;
    text-align: center;
  }
  .nro-final-cta__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.005em;
    margin: 0 0 22px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  .nro-final-cta__btn {
    font-family: Montserrat, -apple-system, sans-serif;
    display: inline-block;
    padding: 16px 36px;
    background: #fff;
    color: #e85a00;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .nro-final-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 749px) {
    .nro-hero { padding: 64px 0 56px; }
    .nro-section { padding: 56px 0; }
  }
/* END_SECTION:nro-landing */

/* START_SECTION:nro-post-checkout-banner (INDEX:117) */
.nro-postco-banner {
  background: linear-gradient(90deg, #15151b 0%, #1f1f25 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
  color: #fff;
  font-family: Montserrat, -apple-system, sans-serif;
  /* Smooth slide-in. Default state is fade-out; .is-visible flips it on. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nro-postco-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.nro-postco-banner[hidden] { display: none; }

.nro-postco-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.nro-postco-banner__copy {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.nro-postco-banner__icon {
  font-size: 24px;
  line-height: 1;
}
.nro-postco-banner__copy strong {
  display: block;
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 2px;
}
.nro-postco-banner__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.35;
}

.nro-postco-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.nro-postco-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nro-postco-banner__btn--primary {
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 16px rgba(215, 0, 0, 0.32);
}
.nro-postco-banner__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(215, 0, 0, 0.48);
  color: #fff;
}
.nro-postco-banner__btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nro-postco-banner__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.nro-postco-banner__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nro-postco-banner__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 749px) {
  .nro-postco-banner__inner {
    gap: 12px;
  }
  .nro-postco-banner__actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .nro-postco-banner__btn {
    flex: 1 1 140px;
  }
  .nro-postco-banner__close {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .nro-postco-banner__inner {
    position: relative;
    padding-right: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nro-postco-banner { transition: none; }
}
/* END_SECTION:nro-post-checkout-banner */

/* START_SECTION:nsc-dashboard-1 (INDEX:118) */
.nsc-dashboard {
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .nsc-dashboard__title {
    color: black;
    font-size: 40px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    margin: 0 0 8px 0;
  }
  .nsc-dashboard__subtitle {
    color: #4a4a4a;
    font-size: 16px;
    margin: 0 0 24px 0;
  }
  .nsc-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
  }
  .nsc-dashboard__card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .nsc-dashboard__card--highlight { background: #FFD201; }
  .nsc-dashboard__card-value { font-size: 24px; font-weight: 700; color: black; }
  .nsc-dashboard__card-label { font-size: 14px; font-weight: 600; color: black; }

  .nsc-dashboard__benefits {
    background: #fafafa;
    border-radius: 16px;
    padding: 24px;
  }
  .nsc-dashboard__benefits-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
  }
  .nsc-dashboard__benefits-list {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
    color: #333;
  }
  .nsc-dashboard__benefit { margin-bottom: 6px; }

  .nsc-dashboard__denied {
    background: #fafafa;
    border: 1px dashed #d1d1d1;
    border-radius: 16px;
    padding: 32px;
    max-width: 640px;
  }
  .nsc-dashboard__denied-msg { margin: 0 0 16px 0; font-size: 15px; line-height: 22px; }
  .nsc-dashboard__denied-link { color: black; font-weight: 600; text-decoration: underline; }

  @media screen and (max-width: 768px) {
    .nsc-dashboard__title { font-size: 28px; }
  }
/* END_SECTION:nsc-dashboard-1 */

/* START_SECTION:nsc-nominate-1 (INDEX:119) */
.nsc-nominate-section {
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .nsc-nominate__title {
    color: black;
    font-size: 40px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    margin: 0 0 12px 0;
  }
  .nsc-nominate__subtitle {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 32px 0;
    max-width: 720px;
  }
  .nsc-nominate__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
  }
  .nsc-nominate__field { display: flex; flex-direction: column; gap: 6px; }
  .nsc-nominate__label { font-size: 14px; font-weight: 600; color: black; }
  .nsc-nominate__input,
  .nsc-nominate__textarea {
    padding: 12px 14px;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
  }
  .nsc-nominate__input:focus,
  .nsc-nominate__textarea:focus { outline: 2px solid #FFD201; border-color: #FFD201; }
  .nsc-nominate__hint { font-size: 12px; color: #6b6b6b; }
  .nsc-nominate__submit {
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    background: #FFD201;
    color: black;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    width: fit-content;
    font-family: inherit;
  }
  .nsc-nominate__submit:disabled { opacity: 0.5; cursor: not-allowed; }
  .nsc-nominate__submit:hover:not(:disabled) { background: #e6bd00; }
  .nsc-nominate__status { font-size: 14px; margin: 8px 0 0 0; min-height: 20px; }
  .nsc-nominate__status--success { color: #1d7a1d; }
  .nsc-nominate__status--error   { color: #a32020; }

  .nsc-nominate__gated {
    padding: 24px;
    border: 1px dashed #d1d1d1;
    border-radius: 12px;
    max-width: 640px;
    background: #fafafa;
  }
  .nsc-nominate__gated-msg { color: #333; font-size: 15px; line-height: 22px; margin: 0 0 12px 0; }
  .nsc-nominate__gated-link {
    color: black;
    font-weight: 600;
    text-decoration: underline;
  }

  @media screen and (max-width: 768px) {
    .nsc-nominate__title { font-size: 28px; }
  }
/* END_SECTION:nsc-nominate-1 */

/* START_SECTION:our_story_1 (INDEX:120) */
.our_story_sec_1_row1 {
    display: flex;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
}

.our_story_sec_1_col1 {
    width: 60%;
}

.our_story_sec_1_col1>div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 626px;
    margin: 0 auto;
    padding: 30px 0;
}

.our_story_sec_1_col2 {
    width: 40%;
}

.our_story_sec_1_subtitle {
    color: black;
    font-size: 20px;
    font-family: Montserrat;
    font-weight: 700;
    word-wrap: break-word;
    line-height: 1em;
    margin: 0;
}

.our_story_sec_1 {
    padding: 100px 0 50px 0;
}

.our_story_sec_1 img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    display: block;
}

.our_story_sec_1_heading {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--black, #212121);
    font-size: 52px;
    font-family: Racing Sans One;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 46px;
    word-wrap: break-word;
    margin: 0;
}

.our_story_sec_1_body {
    width: 100%;
    color: black;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 400;
    word-wrap: break-word;
    line-height: 1.5em;
    margin: 0;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 60/40 row — text on left, image on right. Stack
 * vertically and put image on top so the visual leads the story.
 */
@media (max-width: 749px) {
  .our_story_sec_1 { padding: 28px 0; }
  .our_story_sec_1_row1 {
    flex-direction: column-reverse;
    border-radius: 14px;
  }
  .our_story_sec_1_col1,
  .our_story_sec_1_col2 {
    width: 100%;
  }
  .our_story_sec_1_col1 > div {
    max-width: 100%;
    padding: 22px 18px;
    gap: 10px;
  }
  .our_story_sec_1_col2 img {
    max-height: 240px;
  }
  .our_story_sec_1_subtitle { font-size: 14px; }
  .our_story_sec_1_heading {
    font-size: 28px;
    line-height: 1.1;
  }
  .our_story_sec_1_body {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .our_story_sec_1_heading { font-size: 24px; }
}
/* END_SECTION:our_story_1 */

/* START_SECTION:our_story_2 (INDEX:121) */
.our_story_sec_2_row1 {
        display: flex;
        overflow: hidden;
        align-items: center;
    }

    .our_story_sec_2_col1 {
        width: 60%;
    }

    .our_story_sec_2_col1>div {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding-left: 50px;
    }

    .our_story_sec_2_col2 {
        width: 40%;
    }

    .our_story_sec_2_col2>img {
        border-radius: 10px;
        overflow: hidden;
    }

    .our_story_sec_2_subtitle {
        color: #000;
        font-size: 18px;
        font-family: Montserrat;
        font-weight: 700;
        word-wrap: break-word;
        line-height: 1em;
        margin: 0 0 12px 0;
    }

    .our_story_sec_2_3_4_wrap {
        padding: 50px 0;
        display: flex;
        flex-direction: column;
        gap: 100px;
        position: relative;
    }

    .our_story_sec_2_3_4_wrap .our_story_sec_2_col2 img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        display: block;
    }

    .our_story_sec_2_heading {
        width: 100%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        color: var(--black, #212121);
        font-size: 52px;
        font-family: Racing Sans One;
        font-weight: 400;
        text-transform: capitalize;
        line-height: 46px;
        word-wrap: break-word;
        margin: 0 0 20px 0;
    }

    .our_story_sec_2_body {
        width: 100%;
        color: black;
        font-size: 16px;
        font-family: Montserrat;
        font-weight: 400;
        word-wrap: break-word;
        line-height: 1.5em;
        margin: 0 0 20px 0;
    }

    .our_story_sec_2_body2, .our_story_sec_2_body3, .our_story_sec_2_body4 {
        max-width: unset;
    }

    .our_story_sec_2_body2 {
        margin: 0 0 12px 0;
    }

    .our_story_sec_2_body4 {
        margin: 0;
    }

    .our_story_sec_2_body4 ul {
        padding-left: 20px;
        margin: 0;
    }

    ul.our_story_sec_3_body_ul {
        padding-left: 0;
        list-style: none;
        margin-top: 0;
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: #000
    }

    ul.our_story_sec_3_body_ul>li {
        line-height: 1em;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .our_story_sec_3_quote {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .our_story_sec_3_quote>p {
        margin: 0;
        font-size: 24px;
        color: #000;
        font-weight: 600;
    }

    .our_story_sec_4_body2 {
        font-size: 20px;
        font-weight: 600;
    }

    .our_story_sec_4_body_ul {
        margin-top: 0;
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: #000;
    }

    .our_story_sec_2_3_4_wrap:before {
        content: '';
        background-image: url(/cdn/shop/files/our_story_sec_2_3_4_wrap_bg.png?v=1772963715);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-position: 85% 10%;
        z-index: -1;
    }

    /* ── Mobile (< 750px) ────────────────────────────────────────
     * Three stacked 60/40 rows on desktop. On mobile each row stacks
     * vertically; gap between rows shrinks. The decorative background
     * image is faded to avoid clashing with stacked photos.
     */
    @media (max-width: 749px) {
      .our_story_sec_2_3_4_wrap {
        padding: 28px 0;
        gap: 32px;
      }
      .our_story_sec_2_3_4_wrap:before {
        opacity: 0.3;
        background-size: contain;
        background-position: center;
      }
      .our_story_sec_2_row1 {
        flex-direction: column-reverse;
        gap: 20px;
      }
      .our_story_sec_2_col1,
      .our_story_sec_2_col2 {
        width: 100%;
      }
      .our_story_sec_2_col1 > div {
        padding-left: 0;
      }
      .our_story_sec_2_subtitle { font-size: 14px; }
      .our_story_sec_2_heading {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 14px;
      }
      .our_story_sec_2_body { font-size: 14px; }
      .our_story_sec_3_quote > p { font-size: 18px; }
      .our_story_sec_4_body2 { font-size: 16px; }
      ul.our_story_sec_3_body_ul,
      .our_story_sec_4_body_ul {
        gap: 14px;
      }
    }

    @media (max-width: 480px) {
      .our_story_sec_2_heading { font-size: 24px; }
    }
/* END_SECTION:our_story_2 */

/* START_SECTION:our_story_5 (INDEX:122) */
.our_story_sec_5 {
        margin: 100px 0;
    }

    .our_story_sec_5_row1:before {
        content: '';
        background: #fff;
        position: absolute;
        width: 100%;
        height: 75%;
        bottom: 0;
        left: 0;
        z-index: -1;
        border-radius: 15px;
    }

    .our_story_sec_5_row1 {
        display: flex;
        align-items: end;
        overflow: hidden;
        position: relative;
        padding: 0 100px;
    }

    .our_story_sec_5_col1 img {
        margin-left: 0;
        margin-right: auto;
    }

    .our_story_sec_5_col2 img {
        margin-right: 0;
        margin-left: auto;
    }

    .our_story_sec_5_col1,
    .our_story_sec_5_col3 {
        width: 15%;
    }

    .our_story_sec_5_col1 img,
    .our_story_sec_5_col3 img {
        width: auto;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .our_story_sec_5_col2 {
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 20px 45px 20px;
    }

    .our_story_sec_5_heading {
        color: var(--black, #212121);
        font-size: 52px;
        font-family: Racing Sans One;
        font-weight: 400;
        text-transform: capitalize;
        line-height: 46px;
        word-wrap: break-word;
        margin: 0 0 24px 0;
    }

    .our_story_sec_5_btn_wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .our_story_sec_5_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
        border-radius: 5px;
        color: white;
        font-size: 20px;
        font-family: Montserrat;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        word-wrap: break-word;
    }

    /* ── Mobile (< 750px) ────────────────────────────────────────
     * Desktop is a 3-column row: 15% photo / 70% text+CTA / 15% photo.
     * On mobile the 15% side photos render at ~55px wide which is
     * useless — hide them. Center column expands to full width.
     */
    @media (max-width: 749px) {
      .our_story_sec_5_row1 {
        padding: 0 16px;
        flex-direction: column;
      }
      .our_story_sec_5_col1,
      .our_story_sec_5_col3 {
        display: none;
      }
      .our_story_sec_5_col2 {
        width: 100%;
        padding: 28px 16px;
      }
      .our_story_sec_5_heading {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 18px;
      }
      .our_story_sec_5_btn {
        align-self: stretch;
        padding: 14px 18px;
        min-height: 48px;
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      .our_story_sec_5_heading { font-size: 24px; }
    }
/* END_SECTION:our_story_5 */

/* START_SECTION:partner_collab_1 (INDEX:124) */
.pc_sec_3 {
    padding: 50px 0;
}

/* --- Row 1 --- */
.pc_sec_3 .pc_sec_3_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 590;
    display: flex;
    align-items: center;
    border-radius: 20px;
    align-items: center
}

.pc_sec_3 .pc_sec_3_content {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-left: 30px;
}

.pc_sec_3_image {
    width: 50%;
}

.pc_sec_3_image img {
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.pc_sec_3 .pc_sec_3_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.pc_sec_3 .pc_sec_3_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.pc_sec_3 .pc_sec_3_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.pc_sec_3 .pc_sec_3_title {
    align-self: stretch;
    color: white;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1em;
    word-wrap: break-word;
    margin: 0;
}

.pc_sec_3 .pc_sec_3_desc {
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5em;
}

.pc_sec_3 .pc_sec_3_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.pc_sec_3 .pc_sec_3_btn:hover {
    opacity: 0.9;
}

.pc_sec_3_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0;
}

.pc_sec_3_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU {
    width: 100%;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: -20%;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 1320:590 aspect-ratio bg-image hero with a 48%-wide
 * content panel + 50% image column. Stack vertically; switch
 * aspect-ratio to natural min-height; image moves below text.
 */
@media (max-width: 749px) {
  .pc_sec_3 .pc_sec_3_row {
    aspect-ratio: auto;
    min-height: 320px;
    border-radius: 14px;
    flex-direction: column;
    padding: 24px 16px;
    gap: 18px;
    align-items: stretch;
  }
  .pc_sec_3 .pc_sec_3_content {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .pc_sec_3_image {
    width: 100%;
    max-height: 220px;
  }
  .pc_sec_3 .pc_sec_3_subtitle { font-size: 14px; }
  .pc_sec_3 .pc_sec_3_title {
    font-size: 28px;
    line-height: 1.1;
  }
  .pc_sec_3 .pc_sec_3_desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .pc_sec_3 .pc_sec_3_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
  .pc_sec_3_list_item { font-size: 13px; }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: 0;
  }
}
/* END_SECTION:partner_collab_1 */

/* START_SECTION:partner_collab_2 (INDEX:125) */
.partner-collab-2 {
  width: 100%;
  padding: 40px 0px;
}

.partner-collab-2__container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Left Column */
.partner-collab-2__left {
  flex: 0 0 50%;
  max-width: 656px;
  border-radius: 10px;
  overflow: hidden;
}

.partner-collab-2__left img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Right Column */
.partner-collab-2__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partner-collab-2__heading {
  font-family: 'Racing Sans One', cursive;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #000;
  margin: 0;
}

.partner-collab-2__paragraph {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 0;
}

/* List */
.partner-collab-2__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-collab-2__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-collab-2__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.partner-collab-2__icon-fallback {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: #D70000;
  border-radius: 50%;
}

.partner-collab-2__list-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

/* Bottom */
.partner-collab-2__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.partner-collab-2__bottom-image {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.partner-collab-2__bottom-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .partner-collab-2__container {
    flex-direction: column;
  }

  .partner-collab-2__left {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .partner-collab-2__heading {
    font-size: 36px;
    line-height: 38px;
  }

  .partner-collab-2__bottom-text {
    font-size: 18px;
  }
}
/* END_SECTION:partner_collab_2 */

/* START_SECTION:partner_collab_3 (INDEX:126) */
.vault-section {
  background-color: #f0f0f0;
  padding: 60px 0;
}

.vault-header {
  text-align: center;
  max-width: 765px;
  margin: 0 auto 28px;
}

.vault-title {
  font-family: 'Racing Sans One', cursive;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #000;
  margin: 0 0 20px;
}

.vault-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.vault-cards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.vault-card {
  position: relative;
  flex: 1;
  min-height: 210px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vault-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 12px;
}

.vault-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 20px;
  text-align: center;
}

.vault-card__icon {
  width: 50px;
  height: 50px;
}

.vault-card__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.vault-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.vault-quote__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  flex-shrink: 0;
}

.vault-quote__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .vault-title {
    font-size: 32px;
    line-height: 34px;
  }

  .vault-cards {
    flex-wrap: wrap;
  }

  .vault-card {
    flex: 1 1 calc(50% - 16px);
    min-height: 180px;
  }

  .vault-quote__text {
    font-size: 18px;
  }
}
/* END_SECTION:partner_collab_3 */

/* START_SECTION:partner_collab_4 (INDEX:127) */
.partner-collab-4 {
  padding: 40px 0;
}

.partner-collab-4__header {
  text-align: center;
  margin-bottom: 30px;
}

.partner-collab-4__heading {
  font-family: 'Racing Sans One', cursive;
  font-size: 52px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  color: #000;
  margin: 0 0 12px;
}

.partner-collab-4__subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.partner-collab-4__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.partner-collab-4__card {
  position: relative;
  overflow: hidden;
}

.partner-collab-4__card-image {
  display: block;
  width: 100%;
  height: auto;
}

.partner-collab-4__card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-collab-4__card-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0;
}

.partner-collab-4__card-text {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.partner-collab-4__card:nth-child(1)>.partner-collab-4__card-content {
    padding: 20px 40px 20px 10px;
}

.partner-collab-4__card:nth-child(2)>.partner-collab-4__card-content {
    padding: 20px 40px 20px 20px;
}

.partner-collab-4__card:nth-child(3)>.partner-collab-4__card-content {
    padding: 20px 50px 20px 10px;
}

.partner-collab-4__card:nth-child(4)>.partner-collab-4__card-content {
    padding: 20px 10px 20px 40px;
}

@media (max-width: 990px) {
  .partner-collab-4__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-collab-4__heading {
    font-size: 36px;
  }
}

@media (max-width: 600px) {
  .partner-collab-4__grid {
    grid-template-columns: 1fr;
  }

  .partner-collab-4__heading {
    font-size: 28px;
  }
}
/* END_SECTION:partner_collab_4 */

/* START_SECTION:partner_collab_5 (INDEX:128) */
.partner-promise {
  padding: 40px 0;
}

.partner-promise__header {
  text-align: center;
  margin-bottom: 30px;
}

.partner-promise__heading {
  font-family: 'Racing Sans One', cursive;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  margin: 0 0 12px;
}

.partner-promise__subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.partner-promise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px;
}

.partner-promise__card {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  aspect-ratio: 277 / 233;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-promise__card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 13px;
  display: block !important;
}

.partner-promise__card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  border-radius: 13px;
}

.partner-promise__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 25px;
  text-align: center;
}

.partner-promise__icon {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
}

.partner-promise__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.partner-promise__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 990px) {
  .partner-promise__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .partner-promise__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .partner-promise__heading {
    font-size: 26px;
  }

  .partner-promise__text {
    font-size: 18px;
  }
}
/* END_SECTION:partner_collab_5 */

/* START_SECTION:partner_collab_6 (INDEX:129) */
.partner-collab-6 {
  display: flex;
  align-items: stretch;
  background: var(--black, #212121);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1320/467;
  margin-bottom: 100px;
  margin-top: 100px;
}

.partner-collab-6__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 50px 40px;
}

.partner-collab-6__heading {
  color: #fff;
  font-family: "Racing Sans One", cursive;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  margin: 0;
}

.partner-collab-6__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.partner-collab-6__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.partner-collab-6__text {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.partner-collab-6__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
}

.partner-collab-6__button-icon {
  width: 24px;
  height: 24px;
}

.partner-collab-6__right {
  flex: 1;
}

.partner-collab-6__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partner-collab-6__text>p {
    margin: 0;
}

@media (max-width: 768px) {
  .partner-collab-6 {
    flex-direction: column;
  }

  .partner-collab-6__left {
    padding: 30px 20px;
  }

  .partner-collab-6__heading {
    font-size: 36px;
    line-height: 36px;
  }

  .partner-collab-6__text {
    font-size: 16px;
  }

  .partner-collab-6__button {
    font-size: 16px;
  }
}

/* Reset native <button> styling so the trigger looks identical to the old <a> */
button.partner-collab-6__button { cursor: pointer; }

/* ── Partner-apply modal ──────────────────────────────────────────── */
.pn-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pn-modal[hidden] { display: none; }
/* Universal `[hidden]` defense for every descendant. Several elements
   below (.pn-modal__state, .pn-modal__submit, .pn-modal__form, .pn-modal__login-link)
   have explicit `display: flex/inline-flex/block` rules that win over
   the browser's default `[hidden] { display: none }` from the user-
   agent stylesheet. Without this override, the JS-controlled hidden
   state callout shows up empty (just the `—` placeholder) on first
   paint instead of being invisible until the inquiry-status fetch
   resolves. !important ensures it beats any explicit display rule. */
.pn-modal [hidden] { display: none !important; }
.pn-modal__backdrop { position: absolute; inset: 0; background: rgba(15,20,33,0.55); backdrop-filter: blur(2px); }
.pn-modal__panel {
  position: relative; max-width: 520px; width: 100%;
  background: #fff; border-radius: 18px; padding: 36px 32px 30px;
  box-shadow: 0 20px 60px rgba(15,20,33,0.35);
  font-family: 'Montserrat', sans-serif; max-height: 90vh; overflow-y: auto;
}
.pn-modal__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #6b7280; padding: 4px 10px; border-radius: 6px; }
.pn-modal__close:hover { background: #f3f4f6; color: #1f2937; }
.pn-modal__title { font-family: 'Racing Sans One', 'Impact', sans-serif; font-weight: 400; font-size: 30px; color: #1f2937; margin: 0 0 6px; }
.pn-modal__lede { font-size: 14.5px; color: #4b5563; margin: 0 0 20px; line-height: 1.5; }
.pn-modal__form { display: flex; flex-direction: column; gap: 12px; }
.pn-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .pn-modal__row { grid-template-columns: 1fr; } }
.pn-modal__form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1f2937; }
.pn-modal__form input, .pn-modal__form textarea {
  padding: 10px 12px; border: 1.5px solid #E5E7EB; border-radius: 8px;
  font-family: inherit; font-size: 14px; color: #1f2937; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box;
}
.pn-modal__form input:focus, .pn-modal__form textarea:focus { outline: none; border-color: #FFD201; box-shadow: 0 0 0 3px rgba(255,210,1,0.18); }
.pn-modal__form textarea { resize: vertical; min-height: 90px; }
.pn-modal__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff;
  padding: 12px 22px; border: 0; border-radius: 8px; font-weight: 700; font-size: 14.5px;
  cursor: pointer; text-decoration: none; margin-top: 6px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.pn-modal__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(215,0,0,0.25); }
.pn-modal__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.pn-modal__status { min-height: 18px; font-size: 13px; margin: 4px 0 0; }
.pn-modal__status--ok { color: #0a6b3a; font-weight: 600; }
.pn-modal__status--err { color: #8a1c1c; font-weight: 600; }
.pn-modal__login-gate { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pn-modal__login-link { color: #1f2937; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.pn-modal__login-link:hover { color: #D70000; }
.pn-modal__state {
  background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
  border: 1px solid #f1dd7a;
  border-left: 4px solid #FFD201;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.pn-modal__state-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #1f2937;
  font-weight: 500;
}
/* END_SECTION:partner_collab_6 */

/* START_SECTION:performance-network-1 (INDEX:130) */
.perf-network {
    padding: 80px 0 60px;
    font-family: 'Montserrat', sans-serif;
  }

  .pn-title {
    font-family: 'Racing Sans One', cursive;
    font-size: 48px;
    font-weight: 400;
    color: #212121;
    margin: 0 0 8px;
  }

  .pn-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 36px;
  }

  .pn-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
  }

  .pn-pill {
    background: #FFD201;
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }

  .pn-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
  }

  .pn-card {
    background: #fff;
    border: 1px solid #7C7C7C;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pn-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pn-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
  }

  .pn-card-month {
    font-size: 13px;
    color: #888;
  }

  .pn-card-value {
    font-size: 32px;
    font-weight: 700;
    color: #D70000;
  }

  .pn-card-sub {
    font-size: 13px;
    color: #666;
  }

  .pn-action {
    display: flex;
    justify-content: center;
  }

  .pn-btn {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 44px;
    display: inline-block;
    transition: opacity 0.2s;
  }

  .pn-btn:hover { opacity: 0.9; }

  .pn-access-denied {
    text-align: center;
    color: #888;
    padding: 60px 0;
    font-size: 16px;
  }

  @media (max-width: 1024px) {
    .pn-cards { grid-template-columns: 1fr; }
    .pn-title  { font-size: 32px; }
  }

  @media (max-width: 749px) {
    .perf-network { padding: 28px 0; }
    .pn-title { font-size: 26px; line-height: 1.1; }
    .pn-subtitle { font-size: 14px; margin-bottom: 22px; }
    .pn-pills { gap: 10px; margin-bottom: 22px; }
    .pn-pill { font-size: 13px; padding: 8px 14px; }
    .pn-cards { gap: 14px; margin-bottom: 28px; }
    .pn-card { padding: 18px; }
    .pn-card-value { font-size: 24px; }
    .pn-btn {
      align-self: stretch;
      width: 100%;
      text-align: center;
      padding: 14px 18px;
      min-height: 48px;
      font-size: 14px;
    }
    .pn-gate { padding: 32px 16px; }
    .pn-gate__card { padding: 32px 22px; border-radius: 14px; }
    .pn-gate__title { font-size: 24px; }
    .pn-gate__text { font-size: 14px; }
    .pn-gate__btn { padding: 12px 18px; min-height: 44px; }
  }

  /* ── Non-partner gate ─────────────────────────────────────────── */
  .pn-gate { padding: 80px 20px; font-family: 'Montserrat', sans-serif; }
  .pn-gate__card {
    max-width: 560px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a; border-radius: 18px;
    padding: 56px 36px; box-shadow: 0 8px 28px rgba(15,20,33,0.08);
  }
  .pn-gate__icon { font-size: 56px; margin-bottom: 14px; }
  .pn-gate__title {
    font-family: 'Racing Sans One', 'Impact', sans-serif; font-weight: 400;
    font-size: 32px; line-height: 1.1; color: #1f2937; margin: 0 0 12px;
  }
  .pn-gate__text {
    font-size: 15.5px; line-height: 1.6; color: #4b5563;
    margin: 0 auto 24px; max-width: 440px;
  }
  .pn-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .pn-gate__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 8px; font-weight: 700;
    font-size: 14px; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .pn-gate__btn--primary { background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff; }
  .pn-gate__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(215,0,0,0.25); }
  .pn-gate__btn--ghost { background: #fff; color: #1f2937; border: 1.5px solid #E5E7EB; }
  .pn-gate__btn--ghost:hover { border-color: #1f2937; }
/* END_SECTION:performance-network-1 */

/* START_SECTION:performance-network-landing (INDEX:131) */
.pnl { font-family: 'Montserrat', sans-serif; color: #1f2937; max-width: 1180px; margin: 0 auto; padding: 60px 24px 80px; }
  .pnl__h2 { font-family: 'Racing Sans One', 'Impact', sans-serif; font-weight: 400; font-size: 36px; color: #1f2937; margin: 0 0 24px; letter-spacing: 0.01em; }

  /* Hero */
  .pnl__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-bottom: 64px; border-bottom: 1px solid #E5E7EB; }
  .pnl__hero-inner { padding-right: 12px; }
  .pnl__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: #D70000; text-transform: uppercase; margin-bottom: 16px; padding: 4px 12px; background: linear-gradient(90deg, #fffbeb, #fff5f5); border-radius: 999px; }
  .pnl__title { font-family: 'Racing Sans One', 'Impact', sans-serif; font-weight: 400; font-size: 56px; line-height: 1.05; margin: 0 0 18px; color: #1f2937; }
  .pnl__lede { font-size: 17px; line-height: 1.6; color: #4b5563; margin: 0 0 28px; max-width: 540px; }
  .pnl__cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .pnl__partner-pill { margin: 18px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #e6f7ec; color: #0a6b3a; font-weight: 700; font-size: 13px; border-radius: 999px; }

  .pnl__btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 8px; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; cursor: pointer; }
  .pnl__btn--primary { background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff; }
  .pnl__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(215,0,0,0.25); }
  .pnl__btn--ghost { background: #fff; color: #1f2937; border: 1.5px solid #E5E7EB; }
  .pnl__btn--ghost:hover { border-color: #1f2937; }
  .pnl__btn--lg { padding: 16px 32px; font-size: 16px; }
  .pnl__btn-arrow { font-size: 17px; }

  .pnl__hero-art img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(15,20,33,0.12); object-fit: cover; }
  .pnl__hero-art-fallback { aspect-ratio: 4/3; border-radius: 16px; background: linear-gradient(135deg, #FFD201 0%, #D70000 100%); display: flex; align-items: center; justify-content: center; font-family: 'Racing Sans One', 'Impact', sans-serif; color: #fff; font-size: 96px; }

  /* Benefits grid */
  .pnl__benefits { padding: 64px 0; }
  .pnl__benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pnl__benefit { background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(15,20,33,0.04); transition: box-shadow 0.18s, transform 0.18s; }
  .pnl__benefit:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(15,20,33,0.08); }
  .pnl__benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #fffbeb, #fff5f5); font-size: 22px; margin-bottom: 12px; }
  .pnl__benefit h3 { font-family: 'Racing Sans One', 'Impact', sans-serif; font-weight: 400; font-size: 19px; margin: 0 0 6px; color: #1f2937; letter-spacing: 0.01em; }
  .pnl__benefit p { font-size: 14px; line-height: 1.55; color: #4b5563; margin: 0; }

  /* How it works */
  .pnl__how { padding: 32px 0 64px; border-top: 1px solid #E5E7EB; }
  .pnl__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .pnl__steps li { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; }
  .pnl__step-num { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #FFD201, #D70000); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'Racing Sans One', 'Impact', sans-serif; font-size: 18px; }
  .pnl__steps h3 { font-family: 'Racing Sans One', 'Impact', sans-serif; font-weight: 400; font-size: 18px; margin: 0 0 4px; color: #1f2937; }
  .pnl__steps p { font-size: 13.5px; line-height: 1.55; color: #4b5563; margin: 0; }

  /* Bottom CTA */
  .pnl__bottom-cta { background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%); border: 1px solid #f1dd7a; border-radius: 18px; padding: 48px 32px; text-align: center; }
  .pnl__bottom-cta .pnl__h2 { margin-bottom: 12px; }
  .pnl__bottom-cta p { font-size: 16px; line-height: 1.6; color: #4b5563; margin: 0 0 24px; max-width: 560px; margin-left: auto; margin-right: auto; }

  /* Responsive */
  @media (max-width: 880px) {
    .pnl__hero { grid-template-columns: 1fr; gap: 32px; }
    .pnl__title { font-size: 42px; }
    .pnl__benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .pnl__steps { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .pnl__title { font-size: 34px; }
    .pnl__benefit-grid, .pnl__steps { grid-template-columns: 1fr; }
    .pnl__bottom-cta { padding: 36px 22px; }
    .pnl__h2 { font-size: 28px; }
  }
/* END_SECTION:performance-network-landing */

/* START_SECTION:product-reviews (INDEX:134) */
/* ── Layout root ─────────────────────────────────────────────── */
  .product-reviews {
    padding: clamp(28px, 5vw, 56px) 0;
    color: rgb(var(--color-foreground, 33 33 33));
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  }
  .product-reviews__inner { position: relative; }
  .product-reviews__anchor { display: block; height: 0; visibility: hidden; }

  .product-reviews__heading {
    margin: 0 0 18px;
    font-family: 'Racing Sans One', 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(24px, 3.5vw, 36px);
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* ── Aggregate grid ──────────────────────────────────────────── */
  .product-reviews__aggregate {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.3fr) minmax(220px, 1fr);
    gap: 32px;
    align-items: start;
    padding: 26px 28px;
    background: rgba(var(--color-foreground, 33 33 33), 0.03);
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 14px;
    margin-bottom: 28px;
  }
  .product-reviews__aggregate[hidden] { display: none; }
  @media (max-width: 989px) {
    .product-reviews__aggregate {
      grid-template-columns: 1fr 1fr;
    }
    .product-reviews__aggregate-right { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .product-reviews__aggregate { grid-template-columns: 1fr; }
  }
  .product-reviews__aggregate-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .product-reviews__aggregate-mid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .product-reviews__aggregate-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  /* Customer photo placeholder — for v2 photo uploads. Renders a
     light bordered tile with helper text so the right column has
     visible content even when photo uploads aren't shipped yet. */
  .product-reviews__photos-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 7;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    border: 1px dashed rgba(var(--color-foreground, 33 33 33), 0.20);
    border-radius: 10px;
    color: rgba(var(--color-foreground, 33 33 33), 0.45);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .product-reviews__photos-placeholder[hidden] { display: none; }

  /* Big % would recommend block for the right column. */
  .product-reviews__recommend-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px;
    background: rgba(31, 122, 58, 0.06);
    border-radius: 10px;
  }
  .product-reviews__recommend-big[hidden] { display: none; }
  .product-reviews__recommend-big strong {
    font-family: 'Racing Sans One', 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    color: #1f7a3a;
  }
  .product-reviews__recommend-big-label {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #1f7a3a;
    font-weight: 700;
  }

  .product-reviews__avg-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
  }
  .product-reviews__avg {
    font-family: 'Racing Sans One', 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 48px;
    line-height: 1;
    color: #f6b419;
  }
  .product-reviews__stars-svg { width: 110px; height: 22px; display: block; }
  .product-reviews__count {
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__write-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: rgb(var(--color-foreground, 33 33 33));
    color: rgb(var(--color-background, 255 255 255));
    border: 0;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s ease;
    background-image: none !important;
  }
  .product-reviews__write-btn:hover { transform: translateY(-1px); }

  /* ── Histogram ───────────────────────────────────────────────── */
  .product-reviews__hist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .product-reviews__hist-row {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  .product-reviews__hist-label {
    font-weight: 700;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__hist-bar {
    background: rgba(var(--color-foreground, 33 33 33), 0.10);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    position: relative;
  }
  .product-reviews__hist-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
  }
  .product-reviews__hist-count {
    text-align: right;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }

  /* ── Attribute summary rows ──────────────────────────────────── */
  .product-reviews__aggregate-attrs {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .product-reviews__attr-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-reviews__attr-label {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .product-reviews__attr-track {
    display: grid;
    grid-template-columns: minmax(40px, auto) 1fr minmax(40px, auto);
    gap: 8px;
    align-items: center;
  }
  .product-reviews__attr-scale-low,
  .product-reviews__attr-scale-high {
    font-size: 10px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .product-reviews__attr-scale-high { text-align: right; }
  .product-reviews__attr-bar {
    position: relative;
    background: repeating-linear-gradient(90deg,
      rgba(var(--color-foreground, 33 33 33), 0.18) 0 2px,
      transparent 2px 12px);
    height: 12px;
    border-radius: 999px;
  }
  .product-reviews__attr-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #d70000;
    border: 2px solid rgb(var(--color-background, 255 255 255));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
  }
  .product-reviews__recommend-pill {
    margin-top: 6px;
    padding: 8px 14px;
    background: rgba(31, 122, 58, 0.10);
    color: #1f7a3a;
    border-radius: 999px;
    font-size: 13px;
    text-align: center;
  }
  .product-reviews__recommend-pill strong {
    font-size: 16px;
    margin-right: 6px;
  }

  /* ── Empty state ─────────────────────────────────────────────── */
  .product-reviews__empty {
    text-align: center;
    padding: 36px 20px;
    background: rgba(var(--color-foreground, 33 33 33), 0.03);
    border: 1px dashed rgba(var(--color-foreground, 33 33 33), 0.20);
    border-radius: 14px;
  }
  .product-reviews__empty-headline {
    margin: 0 0 6px;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 24px;
    text-transform: uppercase;
  }
  .product-reviews__empty-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }

  /* ── Filter chips ────────────────────────────────────────────── */
  .product-reviews__filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    border-bottom: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    margin-bottom: 14px;
  }
  .product-reviews__filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .product-reviews__chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    background: rgb(var(--color-background, 255 255 255));
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .product-reviews__chip-btn:hover { border-color: #d70000; }
  .product-reviews__chip-btn.is-active {
    background: #d70000;
    color: #fff;
    border-color: #d70000;
  }
  .product-reviews__chip-stars {
    color: #f6b419;
    line-height: 1;
    font-size: 11px;
  }
  .product-reviews__chip-btn.is-active .product-reviews__chip-stars { color: #fff; }
  .product-reviews__filter-empty {
    list-style: none;
    padding: 24px;
    text-align: center;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    font-size: 13px;
  }

  /* ── List ────────────────────────────────────────────────────── */
  .product-reviews__list-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .product-reviews__sort-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__sort {
    padding: 6px 28px 6px 12px;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: inherit;
    background: rgb(var(--color-background, 255 255 255));
  }
  .product-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .product-reviews__rev {
    padding: 22px 0;
    border-bottom: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
  }
  /* Two-column row: author meta on left, review body + sliders + helpful + reply on right.
     Matches the Figma layout where SHABAN A. + verified + recommend
     stack vertically beside the review content. */
  .product-reviews__rev-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
  @media (max-width: 749px) {
    .product-reviews__rev-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
  /* Author column: 56px circular avatar (gradient + initial) on the
     left, name + verified-buyer badge stacked on the right. Mirrors
     the Figma design where SHABAN A. sits next to a photo bubble. */
  .product-reviews__rev-author-col {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-reviews__rev-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
  }
  .product-reviews__rev-avatar-initial {
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .product-reviews__rev-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .product-reviews__rev-author-badge { display: inline-flex; }
  .product-reviews__rev-main { min-width: 0; }
  .product-reviews__rev-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .product-reviews__inline-stars {
    display: inline-flex;
    gap: 1px;
  }
  .product-reviews__inline-stars svg { width: 14px; height: 14px; }
  .product-reviews__rev-author {
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #d70000;
    font-weight: 700;
  }
  .product-reviews__verified-tick {
    flex: none;
    display: block;
  }
  @media (max-width: 480px) {
    .product-reviews__rev-author-col {
      grid-template-columns: 44px 1fr;
      gap: 10px;
    }
    .product-reviews__rev-avatar { width: 44px; height: 44px; }
    .product-reviews__rev-avatar-initial { font-size: 18px; }
    .product-reviews__rev-author { font-size: 13px; }
    .product-reviews__verified { font-size: 12px; }
  }
  .product-reviews__rev-recommend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    color: #d70000;
    background: rgba(215, 0, 0, 0.06);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.6;
  }
  .product-reviews__rev-date {
    margin-left: auto;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.50);
  }
  .product-reviews__rev-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
  }
  .product-reviews__rev-body {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: rgb(var(--color-foreground, 33 33 33));
  }

  /* ── Per-review attribute slider visualizations ────────────── */
  /* Mirrors the aggregate slider style — same dotted track + red
     marker — but compact (single-row per attribute). Matches the
     Figma design where each review's attribute scores are shown
     as horizontal yellow→red gradient bars with a marker. */
  .product-reviews__rev-attrs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 12px;
    max-width: 360px;
  }
  .product-reviews__rev-attr-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    align-items: center;
  }
  .product-reviews__rev-attr-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--color-foreground, 33 33 33), 0.85);
  }
  .product-reviews__rev-attr-bar {
    position: relative;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    height: 8px;
    border-radius: 999px;
  }
  .product-reviews__rev-attr-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #d70000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* ── Merchant reply (Judge.me-style avatar + body) ──────────── */
  .product-reviews__reply {
    margin-top: 16px;
    padding-top: 14px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
    border-top: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
  }
  .product-reviews__reply-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 4px;
    box-sizing: border-box;
  }
  .product-reviews__reply-avatar-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .product-reviews__reply-avatar-fallback {
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.02em;
  }
  .product-reviews__reply-content {
    min-width: 0;
    padding-top: 2px;
  }
  .product-reviews__reply-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .product-reviews__reply-author {
    font-weight: 800;
    font-size: 14px;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__reply-date {
    margin-left: auto;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    white-space: nowrap;
  }
  .product-reviews__reply-body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  @media (max-width: 480px) {
    .product-reviews__reply { grid-template-columns: 36px 1fr; gap: 10px; }
    .product-reviews__reply-avatar { width: 36px; height: 36px; padding: 3px; }
    .product-reviews__reply-avatar-fallback { font-size: 15px; }
    .product-reviews__reply-author { font-size: 13px; }
    .product-reviews__reply-date { font-size: 11px; }
  }
  .product-reviews__rev-helpful {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__vote {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.12s ease;
  }
  .product-reviews__vote:hover { background: rgba(var(--color-foreground, 33 33 33), 0.06); }
  .product-reviews__vote:disabled { opacity: 0.5; cursor: not-allowed; }

  .product-reviews__loadmore {
    display: block;
    margin: 18px auto 0;
    padding: 10px 22px;
    background: transparent;
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.30);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .product-reviews__loadmore:hover { border-color: rgb(var(--color-foreground, 33 33 33)); }

  /* ── Form panel ──────────────────────────────────────────────── */
  .product-reviews__form-panel {
    margin-top: 32px;
    padding: 22px 24px;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    border-radius: 14px;
  }
  .product-reviews__form-panel[hidden] { display: none; }
  .product-reviews__form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .product-reviews__form-title {
    margin: 0;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 22px;
    text-transform: uppercase;
  }
  .product-reviews__form-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }
  .product-reviews__form-close:hover { background: rgba(var(--color-foreground, 33 33 33), 0.08); }
  .product-reviews__form-close svg { width: 16px; height: 16px; }

  .product-reviews__elig-msg {
    margin: 0;
    padding: 12px 14px;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    border-radius: 8px;
    font-size: 14px;
  }
  .product-reviews__elig-link {
    color: #d70000;
    font-weight: 700;
  }

  .product-reviews__form { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
  .product-reviews__field { display: flex; flex-direction: column; gap: 6px; }
  .product-reviews__field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground, 33 33 33), 0.75);
  }
  .product-reviews__req { color: #d70000; }
  .product-reviews__input,
  .product-reviews__textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgb(var(--color-background, 255 255 255));
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
  }
  .product-reviews__input:focus,
  .product-reviews__textarea:focus {
    outline: 2px solid #d70000;
    outline-offset: 1px;
    border-color: #d70000;
  }
  .product-reviews__textarea { resize: vertical; min-height: 90px; }
  .product-reviews__field-hint {
    margin: 0;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
  }
  .product-reviews__field-hint.is-error { color: #d70000; }

  .product-reviews__rating-input {
    display: inline-flex;
    gap: 4px;
  }
  .product-reviews__rating-star {
    background: transparent;
    color: rgba(var(--color-foreground, 33 33 33), 0.30);
    border: 0;
    padding: 4px;
    cursor: pointer;
    transition: color 0.12s ease, transform 0.12s ease;
  }
  .product-reviews__rating-star svg { width: 32px; height: 32px; }
  .product-reviews__rating-star.is-hover,
  .product-reviews__rating-star.is-filled {
    color: #f6b419;
  }
  .product-reviews__rating-star.is-filled svg { fill: #f6b419; stroke: #f6b419; }
  .product-reviews__rating-star.is-hover svg { fill: #f6b419; stroke: #f6b419; }
  .product-reviews__rating-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
  }

  .product-reviews__attrs-input {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .product-reviews__attr-input-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-reviews__attr-input-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .product-reviews__attr-input-track {
    display: grid;
    grid-template-columns: minmax(40px, auto) 1fr minmax(40px, auto);
    gap: 10px;
    align-items: center;
  }
  .product-reviews__attr-input-track input[type="range"] {
    width: 100%;
    accent-color: #d70000;
  }
  .product-reviews__attr-input-scale {
    font-size: 10px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .product-reviews__field--recommend .product-reviews__recommend-toggle {
    display: inline-flex;
    gap: 8px;
  }
  .product-reviews__recommend-btn {
    padding: 8px 22px;
    background: transparent;
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.30);
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .product-reviews__recommend-btn.is-active {
    background: #d70000;
    color: #fff;
    border-color: #d70000;
  }

  /* ── Photo upload dropzone (May 2026) ─────────────────────────── */
  .product-reviews__photo-dropzone {
    display: block;
    padding: 22px 14px;
    background: rgba(var(--color-foreground, 33 33 33), 0.03);
    border: 1.5px dashed rgba(var(--color-foreground, 33 33 33), 0.30);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .product-reviews__photo-dropzone:hover {
    border-color: #d70000;
    background: rgba(215, 0, 0, 0.04);
  }
  .product-reviews__photo-dropzone.is-dragover {
    border-color: #d70000;
    background: rgba(215, 0, 0, 0.08);
    border-style: solid;
  }
  .product-reviews__photo-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .product-reviews__photo-dropzone-icon {
    width: 28px;
    height: 28px;
    color: rgba(var(--color-foreground, 33 33 33), 0.50);
  }
  .product-reviews__photo-dropzone-content strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__photo-dropzone-content span {
    font-size: 11px;
    color: rgba(var(--color-foreground, 33 33 33), 0.60);
  }
  /* Preview thumbnails grid below the dropzone — shown as the customer
     adds files. Spinner overlays the thumb while uploading; red border
     overlays on error. Remove button (X) is always present. */
  .product-reviews__photo-previews {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-reviews__photo-previews:empty { display: none; }
  .product-reviews__photo-preview {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: visible;
  }
  .product-reviews__photo-preview-img-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
  }
  .product-reviews__photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-reviews__photo-preview.is-loading .product-reviews__photo-preview-img {
    opacity: 0.55;
  }
  .product-reviews__photo-preview-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,0.55);
    border-top-color: #d70000;
    border-radius: 50%;
    animation: pr-spin 0.7s linear infinite;
  }
  .product-reviews__photo-preview.is-error .product-reviews__photo-preview-img-wrap {
    border-color: #d70000;
  }
  .product-reviews__photo-preview-remove {
    position: absolute;
    top: -6px; right: -6px;
    width: 22px;
    height: 22px;
    background: #212121;
    color: #fff;
    border: 2px solid rgb(var(--color-background, 255 255 255));
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
  }
  .product-reviews__photo-preview-remove:hover { background: #d70000; }

  /* ── Per-review photo strip (display in the list) ─────────────── */
  .product-reviews__rev-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
  }
  .product-reviews__rev-photo {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    cursor: zoom-in;
    transition: transform 0.12s ease, border-color 0.12s ease;
  }
  .product-reviews__rev-photo:hover {
    transform: translateY(-1px);
    border-color: #d70000;
  }
  .product-reviews__rev-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Aggregate customer photo gallery ─────────────────────────── */
  /* Replaces the "Customer photos coming soon" placeholder. Shown in
     the aggregate right column, capped at 6 visible thumbnails with a
     "+N more" overlay on the last when there are more than 6 photos. */
  .product-reviews__photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    background: rgba(var(--color-foreground, 33 33 33), 0.02);
  }
  .product-reviews__photos-grid-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    cursor: zoom-in;
    transition: transform 0.12s ease;
    border: 0;
    padding: 0;
  }
  .product-reviews__photos-grid-tile:hover { transform: scale(1.03); }
  .product-reviews__photos-grid-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-reviews__photos-grid-overflow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
  }

  /* ── Lightbox (shared by per-review + aggregate photo clicks) ─── */
  .product-reviews__lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
  }
  .product-reviews__lightbox[hidden] { display: none; }
  .product-reviews__lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  }
  .product-reviews__lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .product-reviews__lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
  .product-reviews__lightbox-close svg { width: 20px; height: 20px; }

  .product-reviews__form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .product-reviews__form-error {
    margin: 0;
    padding: 8px 12px;
    background: rgba(179, 38, 30, 0.08);
    color: #b3261e;
    border-radius: 6px;
    font-size: 13px;
  }
  .product-reviews__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.12s ease;
  }
  .product-reviews__submit:hover { filter: brightness(1.05); }
  .product-reviews__submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .product-reviews__submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pr-spin 0.7s linear infinite;
  }
  .product-reviews__submit.is-loading .product-reviews__submit-spinner {
    display: inline-block;
  }
  @keyframes pr-spin { to { transform: rotate(360deg); } }

  .product-reviews__thanks {
    text-align: center;
    padding: 28px 20px;
  }
  .product-reviews__thanks-title {
    margin: 0 0 8px;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 28px;
    text-transform: uppercase;
    color: #1f7a3a;
  }
/* END_SECTION:product-reviews */

/* START_SECTION:progress-photo-submit (INDEX:135) */
.pps { padding: 24px 0; font-family: 'Montserrat', sans-serif; max-width: 620px; }
  .pps__header { margin-bottom: 16px; }
  .pps__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
  .pps__sub { margin: 0; color: #5b6477; font-size: 14px; }
  .pps__form { background: #fff; border: 1px solid #e1e4ec; border-radius: 10px; padding: 18px; }
  .pps__field { margin-bottom: 14px; }
  .pps__field label { display: block; font-size: 13px; color: #1f2533; font-weight: 600; margin-bottom: 4px; }
  .pps__field small { display: block; margin-top: 4px; font-size: 12px; color: #5b6477; }
  .pps__field input, .pps__field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #d0d4de; border-radius: 6px; font: inherit;
  }
  .pps__submit { background: #ffd201; color: #0f1629; border: 0; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; }
  .pps__submit:hover { background: #e6bd00; }
  .pps__status { margin: 10px 0 0; font-size: 13px; color: #5b6477; }
  .pps__status--ok  { color: #1fa15e; font-weight: 600; }
  .pps__status--err { color: #d43131; font-weight: 600; }

  @media (max-width: 749px) {
    .pps { padding: 16px; }
    .pps__title { font-size: 18px; }
    .pps__form { padding: 14px; }
    .pps__submit {
      width: 100%;
      padding: 13px 16px;
      min-height: 44px;
    }
  }
/* END_SECTION:progress-photo-submit */

/* START_SECTION:scroll-coupon-popup (INDEX:139) */
.ssa-scroll-coupon {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ssa-coupon-fade 0.25s ease-out;
}
@keyframes ssa-coupon-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ssa-scroll-coupon[hidden] { display: none; }

.ssa-scroll-coupon__backdrop {
  position: absolute;
  inset: 0;
  /* Lighter tint than before (was 0.75) so the blur effect reads
     clearly — too dark and the underlying page disappears entirely,
     defeating the point of blurring it. */
  background: rgba(15, 15, 18, 0.55);
  /* Frost the page content behind the modal. Vendor-prefixed for
     Safari (-webkit-) which still requires it as of iOS 17. */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
}
/* Browsers that don't support backdrop-filter (e.g. older Firefox)
   keep the original solid dim overlay so the modal still has contrast. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .ssa-scroll-coupon__backdrop {
    background: rgba(0, 0, 0, 0.75);
  }
}
.ssa-scroll-coupon__modal {
  position: relative;
  background: #0f0f12;
  color: #fff;
  border-radius: 22px;
  max-width: 1040px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.ssa-scroll-coupon__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.ssa-scroll-coupon__close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.ssa-scroll-coupon__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 520px;
}
.ssa-scroll-coupon__media {
  position: relative;
  overflow: hidden;
  /* Background image is set via inline style on the element itself —
     `{% stylesheet %}` blocks don't process Liquid `| asset_url`. The
     inline style passes a real CDN URL; this stylesheet block only
     handles layout + the gradient fallback (which lives in the inline
     style too, as the second background-image layer). */
  background-color: #d70000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssa-scroll-coupon__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ssa-scroll-coupon__product {
  position: absolute;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  user-select: none;
}
/* OXY WHEY — dominant, dropped lower (top 65%) per Cleo's hand-tuning
   so the bottle sits visually anchored to the bottom of the panel. */
.ssa-scroll-coupon__product--left {
  top: 65%;
  left: 2%;
  height: 96%;
  width: auto;
  transform: translateY(-50%) rotate(-2deg);
  z-index: 2;
}
/* PRIDE — smaller than OXY, dropped lower (top 60%) so it sits flush
   alongside OXY WHEY's bottle silhouette, touching visually. */
.ssa-scroll-coupon__product--right {
  top: 60%;
  right: 4%;
  height: 76%;
  width: auto;
  transform: translateY(-50%) rotate(3deg);
  z-index: 1;
}

.ssa-scroll-coupon__copy {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #0f0f12;
}
.ssa-scroll-coupon__title {
  font-family: 'Racing Sans One', Impact, sans-serif;
  /* Keep "CONGRATS !" on a single line. Size clamped so that even at
     the narrowest desktop modal width (~520px right column), the
     12-character title fits horizontally without wrapping. */
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0 0 24px;
  color: #fff;
  white-space: nowrap;
}
.ssa-scroll-coupon__sub {
  /* Match the "beautiful text under CONGRATS" reference — larger, bold
     italic Montserrat in solid white, slightly more weight so it reads
     as a confident promise rather than fine print. */
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 36px;
  max-width: 380px;
  font-weight: 700;
  font-style: italic;
}
/* Match the site-wide button gradient (same as `.hs19__button` on the
   homepage Never Run Out section + BUILD MY BUNDLE CTA): yellow on
   the left, sliding through orange to red on the right. Padded
   slightly smaller than the homepage CTA so it doesn't dominate the
   modal — same visual language, modal-appropriate scale. */
.ssa-scroll-coupon__cta {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
  color: #fff;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 10px 24px rgba(215, 0, 0, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ssa-scroll-coupon__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(215, 0, 0, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
}
.ssa-scroll-coupon__cta:active { transform: translateY(0); }
.ssa-scroll-coupon__finea {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin: 18px 0 0;
  max-width: 280px;
}

@media (max-width: 749px) {
  .ssa-scroll-coupon__modal {
    /* Slightly less aggressive corner radius reads better at small
       widths where the modal nearly fills the viewport. */
    border-radius: 16px;
    max-height: 88vh;
  }
  .ssa-scroll-coupon__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* Compact "header band" media panel instead of a tall hero strip.
     Bounded with both min and max so the products sit cleanly inside
     the band without being chopped by overflow: hidden. */
  .ssa-scroll-coupon__media {
    min-height: 170px;
    max-height: 200px;
  }
  /* Cap product heights in absolute px so they CAN'T grow taller than
     the band itself (overflow: hidden was clipping them at the top —
     hence the "cropped" look in the screenshot). Heights ratio'd so
     OXY stays visually dominant over PRIDE. */
  .ssa-scroll-coupon__product--left {
    top: 50%;
    left: 6%;
    height: auto;
    max-height: 220px;
    max-width: 42%;
    transform: translateY(-50%) rotate(-2deg);
  }
  .ssa-scroll-coupon__product--right {
    top: 50%;
    right: 6%;
    height: auto;
    max-height: 175px;
    max-width: 32%;
    transform: translateY(-50%) rotate(3deg);
  }
  .ssa-scroll-coupon__copy {
    padding: 28px 20px 32px;
  }
  .ssa-scroll-coupon__title {
    font-size: 32px;
    margin-bottom: 16px;
  }
  .ssa-scroll-coupon__sub {
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 280px;
  }
  .ssa-scroll-coupon__cta {
    padding: 12px 28px;
    font-size: 13px;
  }
  .ssa-scroll-coupon__close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* Phones < 420px — tighten further so the band doesn't dominate the
   short viewport and the CTA stays comfortably above the keyboard /
   browser chrome. */
@media (max-width: 420px) {
  .ssa-scroll-coupon__media {
    min-height: 150px;
    max-height: 175px;
  }
  .ssa-scroll-coupon__product--left  { max-height: 190px; max-width: 44%; }
  .ssa-scroll-coupon__product--right { max-height: 150px; max-width: 34%; }
  .ssa-scroll-coupon__title { font-size: 28px; margin-bottom: 12px; }
  .ssa-scroll-coupon__sub   { font-size: 15px; margin-bottom: 20px; max-width: 260px; }
  .ssa-scroll-coupon__copy  { padding: 24px 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssa-scroll-coupon { animation: none; }
  .ssa-scroll-coupon__cta { transition: none; }
}
/* END_SECTION:scroll-coupon-popup */

/* START_SECTION:student-portal-1 (INDEX:141) */
.student_portal_1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .student_portal_1__header { position: relative; }

  .student_portal_1__title {
    color: black;
    font-size: 52px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    line-height: 65px;
    word-wrap: break-word;
    margin: 0;
  }

  .student_portal_1__subtitle {
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 28px;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .student_portal_1__subtitle[hidden] { display: none; }

  /* Status / Campus chips — small branded pills under the welcome heading.
     Stays inside the existing palette: #FFD201 (primary), #212121 (dark),
     #D70000 (alert). No new theme colours introduced. */
  .student_portal_1__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0 0;
  }
  .student_portal_1__chips[hidden] { display: none; }

  .student_portal_1__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .student_portal_1__chip-label { letter-spacing: 0.2px; }

  /* Status states */
  .student_portal_1__chip--status {
    background: rgba(255, 210, 1, 0.18);
    color: #212121;
    border-color: rgba(255, 210, 1, 0.6);
  }
  .student_portal_1__chip--status[data-state="active"] {
    background: #FFD201;
    color: #212121;
    border-color: #FFD201;
  }
  .student_portal_1__chip--status[data-state="pending"] {
    background: #212121;
    color: white;
    border-color: #212121;
  }
  .student_portal_1__chip--status[data-state="suspended"],
  .student_portal_1__chip--status[data-state="inactive"] {
    background: rgba(215, 0, 0, 0.10);
    color: #D70000;
    border-color: rgba(215, 0, 0, 0.5);
  }
  .student_portal_1__chip--status[data-state="loading"] {
    background: rgba(33, 33, 33, 0.06);
    color: rgba(33, 33, 33, 0.6);
    border-color: rgba(33, 33, 33, 0.15);
  }

  /* The dot in the status chip — colour mirrors the chip's state */
  .student_portal_1__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #5BA300; /* default = "live"/active green */
    display: block;
    box-shadow: 0 0 0 2px rgba(91, 163, 0, 0.18);
  }
  .student_portal_1__chip--status[data-state="active"] .student_portal_1__status-dot {
    background: #2E7D00;
    box-shadow: 0 0 0 2px rgba(46, 125, 0, 0.28);
  }
  .student_portal_1__chip--status[data-state="pending"] .student_portal_1__status-dot {
    background: #FFD201;
    box-shadow: 0 0 0 2px rgba(255, 210, 1, 0.35);
  }
  .student_portal_1__chip--status[data-state="suspended"] .student_portal_1__status-dot,
  .student_portal_1__chip--status[data-state="inactive"] .student_portal_1__status-dot {
    background: #D70000;
    box-shadow: 0 0 0 2px rgba(215, 0, 0, 0.18);
  }
  .student_portal_1__chip--status[data-state="loading"] .student_portal_1__status-dot {
    background: rgba(33, 33, 33, 0.35);
    box-shadow: none;
  }

  /* Campus chip — dark with subtle yellow accent on the icon */
  .student_portal_1__chip--campus {
    background: #212121;
    color: white;
    border-color: #212121;
  }
  .student_portal_1__chip--campus[hidden] { display: none; }
  .student_portal_1__chip--campus .student_portal_1__chip-icon {
    color: #FFD201;
    flex-shrink: 0;
  }

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

  .student_portal_1__card {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .student_portal_1__card--highlight {
    background: var(--1, #FFD201);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    min-height: 161px;
  }

  .student_portal_1__card--stat {
    background: white;
    min-height: 147px;
  }

  .student_portal_1__card-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .student_portal_1__card-icon { display: flex; align-items: center; }
  .student_portal_1__card-icon img { display: block; }

  .student_portal_1__card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .student_portal_1__card-value {
    color: black;
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
  }

  .student_portal_1__card-label {
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    word-wrap: break-word;
  }

  @media screen and (max-width: 768px) {
    .student_portal_1__cards { flex-direction: column; }
    .student_portal_1__card { width: 100%; }
    .student_portal_1__title { font-size: 36px; line-height: 44px; }
  }
/* END_SECTION:student-portal-1 */

/* START_SECTION:student-portal-2 (INDEX:142) */
.student_portal_2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.student_portal_2__earnings-card {
  flex: 1;
  padding: 20px 26px;
  background: var(--black, #212121);
  border-radius: 16px;
  outline: 2px #FFD201 solid;
  outline-offset: -2px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.student_portal_2__earnings-header { display: flex; flex-direction: column; gap: 16px; }

.student_portal_2__earnings-title {
  color: white;
  font-size: 24px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
}

.student_portal_2__earnings-subtitle {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.student_portal_2__stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.student_portal_2__stat { display: flex; flex-direction: column; gap: 4px; }

.student_portal_2__stat-label {
  color: var(--1, #FFD201);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 20px;
}

.student_portal_2__stat-pill {
  height: 39px;
  padding: 3px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.student_portal_2__stat-circle {
  width: 33px;
  height: 33px;
  border-radius: 9999px;
  background: rgba(255, 245, 0, 0.50);
  display: block !important;
  flex-shrink: 0;
}

.student_portal_2__stat-value {
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 29.6px;
  text-align: center;
  padding-right: 14px;
}

.student_portal_2__table {
  border-radius: 10px;
  outline: 1px var(--1, #FFD201) solid;
  outline-offset: -1px;
  overflow: hidden;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.50);
}

.student_portal_2__table-header { display: flex; }

.student_portal_2__table-header .student_portal_2__table-col {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 30px;
}

.student_portal_2__table-col--gradient {
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  color: white;
}

.student_portal_2__table-col--white { background: white; color: black; }
.student_portal_2__table-col--date { flex: 0 0 20%; }
.student_portal_2__table-col--product { flex: 0 0 26%; border-left: 0.5px var(--1, #FFD201) solid; border-right: 0.5px var(--1, #FFD201) solid; }
.student_portal_2__table-col--sale { flex: 0 0 26%; }
.student_portal_2__table-col--commission { flex: 0 0 28%; }

.student_portal_2__table-row { display: flex; }

.student_portal_2__table-row + .student_portal_2__table-row .student_portal_2__table-cell {
  border-top: 0.5px var(--1, #FFD201) solid;
}

.student_portal_2__table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px 10px;
  height: 50px;
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.student_portal_2__table-cell--bordered { border-left: 0.5px var(--1, #FFD201) solid; border-right: 0.5px var(--1, #FFD201) solid; }
.student_portal_2__table-cell--bordered-left { border-left: 0.5px var(--1, #FFD201) solid; }

.student_portal_2__table-empty {
  padding: 20px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-align: center;
}

.student_portal_2__earnings-footer {
  text-align: center;
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
  text-decoration: underline;
}

.student_portal_2__rewards-card {
  width: 419px;
  min-height: 457px;
  flex-shrink: 0;
  border-radius: 16px;
  outline: 2px #FFD201 solid;
  outline-offset: -2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.student_portal_2__rewards-inner {
  width: 100%;
  height: 100%;
  min-height: 457px;
  padding: 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  align-items: center;
}

.student_portal_2__rewards-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 417px;
}

.student_portal_2__rewards-title {
  color: white;
  font-size: 20px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

.student_portal_2__giveaways { display: flex; flex-direction: column; gap: 16px; }
.student_portal_2__giveaways-title { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 700; margin: 0; }
.student_portal_2__giveaways-list { display: flex; flex-direction: column; gap: 8px; }
.student_portal_2__giveaway-item {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.student_portal_2__giveaway-item--placeholder,
.student_portal_2__giveaway-item--empty {
  display: block; /* placeholder/empty states are single-string */
  opacity: 0.85;
}
.student_portal_2__giveaway-name { flex: 1; min-width: 0; }
.student_portal_2__giveaway-meta {
  color: #FFD201;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.student_portal_2__merch-card {
  background: rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student_portal_2__merch-title { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.student_portal_2__merch-progress-row { display: flex; justify-content: space-between; align-items: center; }
.student_portal_2__merch-progress-label,
.student_portal_2__merch-progress-count { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }

.student_portal_2__merch-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.10);
  border-radius: 9999px;
  overflow: hidden;
}

.student_portal_2__merch-bar-fill {
  height: 8px;
  background: linear-gradient(270deg, rgba(248,190,0,0.80) 0%, rgba(215,2,1,0.80) 100%);
  border-radius: 9999px;
  display: block !important;
  transition: width 0.5s ease;
}

.student_portal_2__merch-description { color: white; font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 600; }

.student_portal_2__rewards-footer { padding: 13px 12px; border-radius: 12px; backdrop-filter: blur(6px); }
.student_portal_2__rewards-footer-text { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; }

@media (max-width: 990px) {
  .student_portal_2 { flex-direction: column; }
  .student_portal_2__rewards-card { width: 100%; }
  .student_portal_2__stats-row { flex-wrap: wrap; }
  .student_portal_2__stat { flex: 1 1 45%; }
}

@media (max-width: 575px) {
  .student_portal_2__stat { flex: 1 1 100%; }
  .student_portal_2__table-header .student_portal_2__table-col,
  .student_portal_2__table-cell { font-size: 14px; padding: 10px 5px; }
}
/* END_SECTION:student-portal-2 */

/* START_SECTION:student-portal-3 (INDEX:143) */
.student_portal_3-section { padding: 50px 0; }

.student_portal_3-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.student_portal_3-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 817px;
}

.student_portal_3-header { display: flex; flex-direction: column; gap: 16px; }

.student_portal_3-heading {
  color: #212121;
  font-size: 30px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
}

.student_portal_3-current-tier {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.student_portal_3-progress-card {
  background: #212121;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.student_portal_3-progress-next-tier {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
}

.student_portal_3-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.student_portal_3-progress-label { color: rgba(255,255,255,0.70); font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }
.student_portal_3-progress-count { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }

.student_portal_3-progress-bar-track {
  height: 12px;
  background: rgba(255,255,255,0.60);
  border-radius: 9999px;
  overflow: hidden;
}

.student_portal_3-progress-bar-fill {
  height: 100%;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 9999px;
  transition: width 0.6s ease;
  display: block !important;
}

/* When next tier is invite-only (Partner→Director / Director→NSC), the
   numeric bar would be misleading — there's no quantitative metric to
   measure against. Hide the track and show the qualitative review badge
   instead. The card still keeps its Next-tier title at the top. */
.student_portal_3-progress-card[data-mode="review"] .student_portal_3-progress-info,
.student_portal_3-progress-card[data-mode="review"] .student_portal_3-progress-bar-track,
.student_portal_3-progress-card[data-mode="top"]    .student_portal_3-progress-info,
.student_portal_3-progress-card[data-mode="top"]    .student_portal_3-progress-bar-track {
  display: none;
}

/* Show the review badge only in those modes */
.student_portal_3-progress-review { display: none; }
.student_portal_3-progress-card[data-mode="review"] .student_portal_3-progress-review,
.student_portal_3-progress-card[data-mode="top"]    .student_portal_3-progress-review {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 210, 1, 0.16);
  border: 1px solid rgba(255, 210, 1, 0.55);
}

.student_portal_3-progress-review-icon {
  color: #FFD201;
  font-size: 14px;
  line-height: 1;
}
.student_portal_3-progress-review-text {
  color: white;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 18px;
}

/* Loading state: keep bar at 0 with a subtle shimmer hint */
.student_portal_3-progress-card[data-mode="loading"] .student_portal_3-progress-bar-fill,
.student_portal_3-progress-card[data-mode="empty"]   .student_portal_3-progress-bar-fill {
  background: rgba(255, 255, 255, 0.25);
}

.student_portal_3-cards-row { display: flex; justify-content: space-between; gap: 20px; }

.student_portal_3-card {
  flex: 1;
  background: white;
  border-radius: 20px;
  border: 1px solid #F8BE00;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.student_portal_3-card-title {
  color: #212121;
  font-size: 18px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

.student_portal_3-indicators-list { display: flex; flex-direction: column; gap: 8px; }

.student_portal_3-indicator-item { display: flex; align-items: center; gap: 12px; height: 24px; }

.student_portal_3-indicator-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block !important;
}

.student_portal_3-dot-active { background: #FFD201; }
.student_portal_3-dot-inactive { background: rgba(33,33,33,0.40); }

.student_portal_3-indicator-text { font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 24px; }
.student_portal_3-text-active { color: #212121; }
.student_portal_3-text-inactive { color: rgba(33,33,33,0.70); }

.student_portal_3-benefits-list { display: flex; flex-direction: column; gap: 11px; }

.student_portal_3-benefit-item { color: #212121; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.student_portal_3-benefit-item::before { content: "\2022\00a0"; }

.student_portal_3-cta-banner {
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 12px;
  padding: 12px;
  margin-top: auto;
}

.student_portal_3-cta-text { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 700; }

/* Leaderboard */
.student_portal_3-leaderboard {
  width: 419px;
  flex-shrink: 0;
  padding: 20px;
  background: linear-gradient(180deg, rgba(248,190,0,0.76) 0%, rgba(215,2,1,0.76) 100%);
  border-radius: 16px;
  border: 2px solid #FFD201;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.student_portal_3-leaderboard-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 430px;
}

.student_portal_3-leaderboard-header { display: flex; align-items: center; gap: 12px; }

.student_portal_3-leaderboard-icon {
  width: 48px;
  height: 48px;
  background: #D70000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.student_portal_3-leaderboard-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

.student_portal_3-leaderboard-title { color: white; font-size: 20px; font-family: 'Racing Sans One', cursive; font-weight: 400; line-height: 28px; margin: 0; }
.student_portal_3-leaderboard-subtitle { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; }

.student_portal_3-leaderboard-entries { display: flex; flex-direction: column; gap: 13px; }

.student_portal_3-lb-loading { color: rgba(255,255,255,0.7); font-size: 14px; font-family: 'Montserrat', sans-serif; text-align: center; padding: 20px 0; }

.student_portal_3-lb-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid #FFD201;
}

.student_portal_3-lb-entry .student_portal_3-lb-name { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.student_portal_3-lb-entry .student_portal_3-lb-amount { color: #FFD201; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 700; }

.student_portal_3-lb-first { background: #FFD201; border: none; }
.student_portal_3-lb-first .student_portal_3-lb-name { color: #212121; }
.student_portal_3-lb-first .student_portal_3-lb-amount { color: #D70000; }

.student_portal_3-lb-user { background: white; border: 0.5px solid #D70000; }
.student_portal_3-lb-user .student_portal_3-lb-name { color: #D70000; }
.student_portal_3-lb-user .student_portal_3-lb-amount { color: #D70000; }

.student_portal_3-leaderboard-note { padding: 13px 12px; border-radius: 12px; backdrop-filter: blur(6px); }
.student_portal_3-note-text { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; }

@media screen and (max-width: 990px) {
  .student_portal_3-main { flex-direction: column; align-items: stretch; }
  .student_portal_3-left { max-width: 100%; }
  .student_portal_3-leaderboard { width: 100%; }
}

@media screen and (max-width: 749px) {
  .student_portal_3-cards-row { flex-direction: column; }
  .student_portal_3-heading { font-size: 24px; line-height: 28px; }
}
/* END_SECTION:student-portal-3 */

/* START_SECTION:student-portal-4 (INDEX:144) */
.student_portal_4-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  padding: 50px 0;
}

/* ===================== SPONSORSHIP CARD ===================== */
.student_portal_4-sponsorship-card {
  width: 419px;
  min-height: 408px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.student_portal_4-sponsorship-bg { position: absolute; inset: 0; z-index: 0; display: block !important; }
.student_portal_4-sponsorship-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.student_portal_4-sponsorship-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,210,1,0.76) 0%, rgba(215,0,0,0.76) 100%);
  z-index: 1; display: block !important;
}

.student_portal_4-sponsorship-content {
  position: relative; z-index: 2;
  padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 408px; box-sizing: border-box;
}

.student_portal_4-sponsorship-header { display: flex; align-items: center; gap: 16px; }
.student_portal_4-sponsorship-icon-wrap { width: 48px; height: 48px; background: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.student_portal_4-sponsorship-icon-img { width: 25px; height: 28px; object-fit: contain; }
.student_portal_4-sponsorship-icon-placeholder { width: 25px; height: 20px; background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%); border-radius: 2px; display: block !important; }
.student_portal_4-sponsorship-label { color: white; font-size: 20px; font-family: 'Racing Sans One', cursive; font-weight: 400; line-height: 28px; }
.student_portal_4-sponsorship-body { display: flex; flex-direction: column; gap: 16px; }
.student_portal_4-sponsorship-heading { color: white; font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 700; margin: 0; }
.student_portal_4-sponsorship-list { display: flex; flex-direction: column; gap: 8px; }
.student_portal_4-sponsorship-list-item { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }

.student_portal_4-sponsorship-cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.student_portal_4-sponsorship-btn {
  display: flex; align-items: center; justify-content: center; align-self: stretch;
  height: 42px; padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px; color: white;
  font-size: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600;
  text-transform: uppercase; text-decoration: none; text-align: center;
  border: none; cursor: pointer; box-sizing: border-box;
  gap: 10px;
}
.student_portal_4-sponsorship-btn[hidden] { display: none; }
.student_portal_4-sponsorship-btn-icon { font-size: 18px; line-height: 1; }

/* Inert (disabled) variants — keep the shape of the eligible CTA but
   strip the gradient and lower contrast so the user can tell it's not
   actionable. State-specific colour is set below per data-state. */
.student_portal_4-sponsorship-btn--inert {
  cursor: not-allowed;
  text-transform: none;
  font-size: 16px;
}

/* State: locked (Associate) — neutral dark on yellow rim */
.student_portal_4-sponsorship-cta[data-state="locked"] .student_portal_4-sponsorship-btn--inert {
  background: rgba(33, 33, 33, 0.45);
  color: white;
  border: 1px dashed rgba(255, 210, 1, 0.65);
}

/* State: pending (under review) — soft yellow tint, dark text */
.student_portal_4-sponsorship-cta[data-state="pending"] .student_portal_4-sponsorship-btn--inert {
  background: rgba(255, 210, 1, 0.85);
  color: #212121;
  border: 1px solid #FFD201;
}

/* State: approved — solid yellow with checkmark */
.student_portal_4-sponsorship-cta[data-state="approved"] .student_portal_4-sponsorship-btn--inert {
  background: #FFD201;
  color: #212121;
  border: 1px solid #FFD201;
  opacity: 1;
}

/* State: loading — barely-visible placeholder so it doesn't flash bright */
.student_portal_4-sponsorship-cta[data-state="loading"] .student_portal_4-sponsorship-btn--inert {
  background: rgba(33, 33, 33, 0.18);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.student_portal_4-sponsorship-note {
  align-self: stretch; padding: 13px 12px;
  background: rgba(255,255,255,0.10); border-radius: 5px;
  display: flex; justify-content: center; align-items: center;
}

.student_portal_4-sponsorship-note-text {
  text-align: center; color: #FFD201;
  font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600;
}

/* ===================== CAMPUS CODE CARD ===================== */
.student_portal_4-campus-card {
  flex: 1; min-height: 408px; background: #212121;
  border-radius: 16px; padding: 48px 59px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-sizing: border-box; position: relative; overflow: hidden;
}

.student_portal_4-campus-card:before, .student_portal_4-campus-card:after {
  content: ''; background: #f0f0f0; position: absolute; top: 55%;
  transform: translateY(-50%); width: 80px; height: 80px;
}
.student_portal_4-campus-card:before { left: -40px; border-top-right-radius: 100%; border-bottom-right-radius: 100%; }
.student_portal_4-campus-card:after  { right: -40px; border-top-left-radius: 100%; border-bottom-left-radius: 100%; }

.student_portal_4-campus-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.student_portal_4-campus-text { display: flex; flex-direction: column; gap: 24px; max-width: 636px; flex: 1; }
.student_portal_4-campus-heading { color: white; font-size: 24px; font-family: 'Racing Sans One', cursive; font-weight: 400; margin: 0; }
.student_portal_4-campus-description { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; line-height: 1.5; }
.student_portal_4-campus-icon-wrap { flex-shrink: 0; }
.student_portal_4-campus-icon-img { width: 90px; height: 90px; object-fit: contain; border-radius: 30px; }
.student_portal_4-campus-icon-circle { width: 90px; height: 90px; background: #FFD201; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.student_portal_4-campus-icon-diamond { width: 47px; height: 42px; background: white; clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%); display: block !important; }

.student_portal_4-campus-divider { border: none; border-top: 3px dashed rgba(255,255,255,0.4); margin: 0; display: block !important; }

.student_portal_4-campus-code-row { display: flex; flex-direction: column; gap: 20px; }

.student_portal_4-campus-code-box {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: #FFD201; border-radius: 12px;
}

.student_portal_4-campus-code-text {
  color: #212121; font-size: 22px;
  font-family: 'Racing Sans One', cursive; font-weight: 400;
  line-height: 36px; letter-spacing: 1px;
}

.student_portal_4-campus-copy-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 113px; height: 48px;
  background: linear-gradient(90deg, #F8BE00 0%, #D70201 100%);
  border-radius: 15px; border: 1px solid #D30B0B;
  color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600;
  cursor: pointer; padding: 0;
  transition: opacity 0.2s ease;
}

.student_portal_4-campus-copy-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.student_portal_4-copy-icon { flex-shrink: 0; }

@media screen and (max-width: 900px) {
  .student_portal_4-wrapper { flex-direction: column; gap: 24px; }
  .student_portal_4-sponsorship-card { width: 100%; }
  .student_portal_4-campus-card { width: 100%; padding: 32px 24px; }
  .student_portal_4-campus-top { flex-direction: column; }
}
/* END_SECTION:student-portal-4 */

/* START_SECTION:student-portal-5 (INDEX:145) */
.student_portal_5-wrapper {
    width: 100%;
    padding: 20px;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

  .student_portal_5-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }

  .student_portal_5-heading {
    align-self: stretch;
    color: #212121;
    font-size: 30px;
    font-family: Racing Sans One;
    font-weight: 400;
    word-wrap: break-word;
  }

  .student_portal_5-subheading {
    color: rgba(33, 33, 33, 0.70);
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word;
  }

  .student_portal_5-cards-row {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .student_portal_5-card {
    width: 300px;
    height: 193px;
    padding: 12px 20px;
    background: white;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }

  .student_portal_5-card--highlighted {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  }

  /* Linked variant — when an <a> is rendered, give it an obvious
     interactive affordance so users can tell it's clickable rather
     than purely decorative. */
  a.student_portal_5-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  a.student_portal_5-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.18);
  }
  a.student_portal_5-card--link:focus-visible {
    outline: 2px solid #D70000;
    outline-offset: 3px;
  }

  .student_portal_5-card__icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .student_portal_5-card__title {
    align-self: stretch;
    color: #212121;
    font-size: 24px;
    font-family: Racing Sans One;
    font-weight: 400;
    word-wrap: break-word;
  }

  .student_portal_5-card--highlighted .student_portal_5-card__title {
    color: white;
  }

  .student_portal_5-card__desc {
    align-self: stretch;
    color: black;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word;
  }

  .student_portal_5-card--highlighted .student_portal_5-card__desc {
    color: white;
  }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * Desktop is a wrap-flex of 4 fixed-300px cards. On mobile the
   * fixed width forces overflow / awkward wrapping. Drop fixed width
   * and let cards take full row, stacked.
   */
  @media (max-width: 749px) {
    .student_portal_5-wrapper {
      padding: 18px;
      gap: 22px;
      margin-top: 28px !important;
      margin-bottom: 28px !important;
      border-radius: 14px;
    }
    .student_portal_5-header { gap: 10px; }
    .student_portal_5-heading {
      font-size: 24px;
      line-height: 1.1;
    }
    .student_portal_5-subheading {
      font-size: 14px;
      line-height: 1.4;
    }
    .student_portal_5-cards-row {
      gap: 12px;
    }
    .student_portal_5-card {
      width: 100%;
      height: auto;
      min-height: 0;
      padding: 14px 18px;
    }
    .student_portal_5-card__title {
      font-size: 18px;
      line-height: 1.15;
    }
    .student_portal_5-card__desc {
      font-size: 13px;
      line-height: 1.4;
    }
  }
/* END_SECTION:student-portal-5 */

/* START_SECTION:student-program-1 (INDEX:146) */
/* ============================================================
   Student Program 1 — sp1
   ============================================================ */

.sp1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 100px !important;
    margin-bottom: 50px !important;
}

/* ---- Header ---- */
.sp1__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sp1__eyebrow {
  color: #212121;
  font-size: 22px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

.sp1__title {
  max-width: 824px;
  color: #212121;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  text-align: center;
  margin: 0;
}

.sp1__description {
  max-width: 1040px;
  color: #212121;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* ---- Banner card ---- */
.sp1__banner {
    width: 100%;
    background-color: #212121;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 30px 50px;
    box-sizing: border-box;
}

/* ---- Banner left column ---- */
.sp1__banner-left {
  flex: 0 0 532px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp1__banner-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp1__banner-heading {
  color: #ffffff;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 46px;
  margin: 0;
}

.sp1__banner-subtext {
  color: #ffffff;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  margin: 0;
}

/* ---- Quote row ---- */
.sp1__quote-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sp1__quote-logo {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: contain;
  flex-shrink: 0;
}

.sp1__quote-text {
  color: #ffffff;
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin: 0;
}

/* ---- Claim area ---- */
.sp1__claim-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp1__claim-label {
  color: #ffffff;
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin: 0;
}

.sp1__cards {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sp1__card {
  width: 151px;
  min-height: 130px;
  background: linear-gradient(135deg, #D70000 0%, #FFD201 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.sp1__card-icon {
  width: 40px;
  height: 32px;
  object-fit: contain;
}

.sp1__card-icon-placeholder {
  width: 40px;
  height: 32px;
  background: #ffffff;
}

.sp1__card-label {
    color: #ffffff;
    font-size: 16px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 1em;
    text-align: center;
}

/* ---- Gallery (right column) ---- */
.sp1__gallery {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 160px);
  gap: 8px;
  align-self: center;
}

.sp1__gallery-item {
  border-radius: 8px;
  overflow: hidden;
}

.sp1__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp1__gallery-item:first-child {
  grid-row: span 2;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a header (52px Racing Sans) + a two-column banner —
 * 532px claim area on the left + a 3×2 image gallery on the right.
 * On mobile both columns get squashed to ~160px each and the imagery
 * obscures the text. Stack vertically; banner heading shrinks; cards
 * row becomes a 2x2 grid.
 */
@media (max-width: 749px) {
  .sp1 {
    gap: 24px;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }
  .sp1__eyebrow { font-size: 14px; }
  .sp1__title {
    font-size: 28px;
    line-height: 1.1;
  }
  .sp1__description {
    font-size: 14px;
    line-height: 1.45;
  }
  .sp1__banner {
    flex-direction: column;
    gap: 22px;
    padding: 22px 18px;
    border-radius: 14px;
  }
  .sp1__banner-left {
    flex: none;
    width: 100%;
    gap: 14px;
  }
  .sp1__banner-heading {
    font-size: 26px;
    line-height: 1.1;
  }
  .sp1__banner-subtext { font-size: 14px; }
  .sp1__quote-text { font-size: 14px; }
  .sp1__claim-label { font-size: 14px; }
  /* Cards: was a row of 3 × 151px wide. Two-up grid fits comfortably. */
  .sp1__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .sp1__card {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    gap: 10px;
  }
  .sp1__card-icon { width: 32px; height: 24px; }
  .sp1__card-label { font-size: 13px; }
  /* Gallery: 3×2 grid with 160px rows = 320px tall. Mobile reduces
   * to a 2-row × 2-col grid with shorter rows. */
  .sp1__gallery {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 6px;
  }
  .sp1__gallery-item:first-child {
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  .sp1__title { font-size: 24px; }
  .sp1__banner-heading { font-size: 22px; }
  .sp1__cards { grid-template-columns: 1fr; }
  .sp1__gallery {
    grid-template-rows: repeat(2, 80px);
  }
}
/* END_SECTION:student-program-1 */

/* START_SECTION:student-program-10 (INDEX:147) */
.sp10-wrapper {
    padding: 50px 0;
  }

  .sp10-banner {
    display: flex;
    align-items: stretch;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    overflow: hidden;
    min-height: 394px;
  }

  .sp10-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    padding: 58px 40px 58px 60px;
    max-width: 626px;
  }

  .sp10-text-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sp10-heading {
    color: #ffffff;
    font-size: 32px;
    font-family: 'Racing Sans One', cursive;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 34px;
    margin: 0;
  }

  .sp10-subtitle {
    color: #ffffff;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 0;
  }

  .sp10-bullet-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .sp10-bullet-item {
    color: #ffffff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  }

  .sp10-description {
    color: #ffffff;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 0;
  }

  .sp10-cta-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    min-height: 42px;
  }

  .sp10-image-wrapper {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    flex-shrink: 0;
  }

  .sp10-image {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    max-width: 100%;
}

  @media screen and (max-width: 990px) {
    .sp10-banner {
      flex-direction: column;
      min-height: auto;
    }

    .sp10-content {
      padding: 40px 30px;
      max-width: 100%;
    }

    .sp10-image-wrapper {
      justify-content: center;
    }

    .sp10-image {
      width: 100%;
      max-width: 449px;
      height: auto;
    }
  }

  @media screen and (max-width: 575px) {
    .sp10-content {
      padding: 30px 20px;
    }

    .sp10-heading {
      font-size: 26px;
      line-height: 30px;
    }

    .sp10-subtitle,
    .sp10-description {
      font-size: 16px;
    }

    .sp10-bullet-item {
      font-size: 14px;
    }

    .sp10-cta-button {
      font-size: 16px;
      width: 100%;
    }
  }
/* END_SECTION:student-program-10 */

/* START_SECTION:student-program-2 (INDEX:148) */
.sp2-section {
  background-color: #f0f0f0;
  padding: 50px 0;
}

.sp2-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.sp2-image-wrap {
  flex: 0 0 auto;
  width: 55%;
  max-width: 694px;
  padding: 20px;
}

.sp2-image {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  object-fit: cover;
}

.sp2-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp2-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp2-heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 46px;
  margin: 0;
  word-wrap: break-word;
}

.sp2-subheading {
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 0;
  word-wrap: break-word;
}

.sp2-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp2-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp2-benefit-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp2-benefit-text {
  color: var(--black, #212121);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.sp2-tagline {
  color: #D70201;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  margin: 0;
  word-wrap: break-word;
  line-height: 1.1em;
}

@media screen and (max-width: 768px) {
  .sp2-container {
    flex-direction: column;
    gap: 24px;
  }

  .sp2-image-wrap {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }

  .sp2-heading {
    font-size: 36px;
    line-height: 34px;
  }

  .sp2-tagline {
    font-size: 20px;
  }
}
/* END_SECTION:student-program-2 */

/* START_SECTION:student-program-3 (INDEX:149) */
/* === Student Program 3 === */

.sp3 {
  padding: 50px 0;
}

.sp3__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ── Header ── */

.sp3__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp3__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp3__tagline {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #212121;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

.sp3__title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: #212121;
  text-align: center;
  margin: 0;
}

.sp3__subtitle {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin: 0;
}

/* ── Cards Grid ── */

.sp3__cards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
  width: 100%;
}

.sp3__card {
  flex: 1;
  padding: 20px 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp3__card--gradient {
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
}

.sp3__card--white {
  background: #fff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  outline: 4px solid #F8BE00;
  outline-offset: -4px;
}

/* ── Icon Box ── */

.sp3__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 5px;
  width: fit-content;
}

.sp3__icon-box--white {
  background: #fff;
}

.sp3__icon-box--gradient {
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
}

.sp3__icon-box img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.sp3__icon-box--wide img {
  width: 30px;
  height: 24px;
}

/* ── Card Heading ── */

.sp3__card-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.sp3__card-heading--white { color: #fff; }
.sp3__card-heading--dark  { color: #212121; }

/* ── Card 1 ── */

.sp3__card-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sp3__badge {
  padding: 19px 20px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.sp3__bullet-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp3__bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp3__bullet {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp3__bullet-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__bullet-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.sp3__bullet-icon--fallback {
  width: 16px;
  height: 16px;
  background: #FFD201;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.sp3__bullet-text {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.sp3__from-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp3__from-heading {
  color: #FFD201;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.sp3__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp3__action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp3__action-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__action-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sp3__action-icon--fallback {
  width: 18px;
  height: 15px;
  background: #FFD201;
  display: block;
}

.sp3__action-text {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

/* ── Card 2 ── */

.sp3__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp3__benefit {
  padding: 12px;
  background: #fff;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sp3__benefit-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__benefit-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sp3__benefit-icon--fallback {
  width: 35px;
  height: 35px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  display: block;
}

.sp3__benefit-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sp3__benefit-title {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.sp3__benefit-desc {
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 10.62px;
  font-weight: 700;
  margin: 0;
}

/* ── Card 3 ── */

.sp3__card-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp3__card-subheading {
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.sp3__card-lower {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1;
}

.sp3__unlock-badge {
  padding: 20px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 12px;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.sp3__merch-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
}

.sp3__apparel-text {
  color: #212121;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.sp3__quote {
  border-left: 4px solid #F8BE00;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

.sp3__quote-line1 {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.sp3__quote-line2 {
  color: #FFD201;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 0;
}

.sp3__incentives {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp3__incentives-heading {
  color: #000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0;
}

.sp3__incentive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp3__incentive {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp3__incentive-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__incentive-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sp3__incentive-icon--fallback {
  width: 20px;
  height: 20px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp3__incentive-icon--fallback::after {
  content: '';
  width: 7.5px;
  height: 7.5px;
  background: #fff;
}

.sp3__incentive-text {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Two-card row at desktop (gradient + white). Stack vertically on
 * mobile, shrink padding + heading sizes.
 */
@media (max-width: 749px) {
  .sp3 { padding: 28px 0; }
  .sp3__wrapper { gap: 24px; }
  .sp3__header { gap: 12px; }
  .sp3__tagline { font-size: 16px; }
  .sp3__title {
    font-size: 28px;
    line-height: 1.1;
  }
  .sp3__subtitle { font-size: 14px; }
  .sp3__cards {
    flex-direction: column;
    gap: 16px;
  }
  .sp3__card {
    padding: 18px;
    gap: 14px;
  }
  .sp3__card-heading { font-size: 20px; }
  .sp3__card-body { gap: 16px; }
  .sp3__badge {
    padding: 14px 16px;
    font-size: 14px;
  }
  .sp3__bullet-group { gap: 14px; }
  .sp3__bullets { gap: 10px; }
  .sp3__bullet-text {
    font-size: 13px;
    line-height: 1.4;
  }
  .sp3__from-heading { font-size: 14px; }
  .sp3__action-text { font-size: 13px; }
}

@media (max-width: 480px) {
  .sp3__title { font-size: 24px; }
}
/* END_SECTION:student-program-3 */

/* START_SECTION:student-program-4 (INDEX:150) */
.sp4-section {
    background-color: #212121;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 60px 48px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto !important;
}

.sp4-inner {
  width: 100%;
  max-width: 896px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp4-heading {
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 28px;
  margin: 0;
}

.sp4-banner {
  width: 100%;
  min-height: 122px;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  outline: 2px solid #FFD201;
  outline-offset: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp4-banner-overlay {
  width: 100%;
  min-height: 122px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sp4-banner-title-row {
  display: flex;
  align-items: center;
  gap: 17px;
}

.sp4-icon {
  width: 18px;
  height: 24px;
  object-fit: contain;
}

.sp4-banner-title {
  text-align: center;
  color: #FFD201;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

.sp4-banner-subtitle {
  text-align: center;
  color: #FFD201;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  margin: 0;
}

.sp4-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 438px;
}

.sp4-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #ffffff;
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.sp4-btn:hover {
  opacity: 0.9;
}

.sp4-footer-text {
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a dark CTA panel with banner + button (60/48 padding).
 * Tighten padding and button + banner sizes for phones.
 */
@media (max-width: 749px) {
  .sp4-section {
    padding: 28px 18px;
    margin: 28px auto !important;
    border-radius: 14px;
  }
  .sp4-inner { gap: 16px; }
  .sp4-heading {
    font-size: 14px;
    line-height: 1.45;
  }
  .sp4-banner-overlay {
    padding: 16px;
    gap: 8px;
  }
  .sp4-banner-title {
    font-size: 18px;
    line-height: 1.2;
  }
  .sp4-banner-subtitle { font-size: 13px; }
  .sp4-btn {
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  .sp4-footer-text {
    font-size: 13px;
    line-height: 1.4;
  }
}
/* END_SECTION:student-program-4 */

/* START_SECTION:student-program-5 (INDEX:151) */
/* ============================================
   SP5 — Student Program 5 (Tier 2 Campus Partner)
   ============================================ */

.sp5-section {
  padding: 60px 0;
}

/* Container */
.sp5-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---- Header ---- */

.sp5-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp5-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp5-eyebrow {
  text-align: center;
  color: var(--black, #212121);
  font-size: 24px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-title {
  text-align: center;
  color: var(--black, #212121);
  font-size: 52px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-subtitle {
  text-align: center;
  color: #212121;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* ---- Content Row ---- */

.sp5-content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
  width: 100%;
}

/* ---- Left Column ---- */

.sp5-left {
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* How You Unlock It */

.sp5-unlock {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sp5-unlock-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp5-unlock-heading {
  color: var(--black, #212121);
  font-size: 32px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-unlock-description {
  color: var(--black, #212121);
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

.sp5-unlock-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp5-unlock-item {
  padding: 15px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-unlock-icon {
    width: 20px;
    height: 20px;
    background-image: url(/cdn/shop/files/Vector_9fdb6475-6836-4ba9-8d3d-07fe0be082fc.png?v=1775577848);
    border-radius: 50%;
    flex-shrink: 0;
}

.sp5-unlock-item-text {
  color: var(--black, #212121);
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* Cash & Incentives Card */

.sp5-incentives-card {
  padding: 20px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp5-incentives-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp5-incentives-heading {
  color: var(--black, #212121);
  font-size: 24px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-incentive-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp5-incentive-bar {
  height: 37px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 5px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-incentive-badge {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  background: white;
  border-radius: 5.44px;
  outline: 1px #F8BE00 solid;
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp5-incentive-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.sp5-incentive-badge-icon {
  width: 13.88px;
  height: 13.88px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  display: block;
}

.sp5-incentive-bar-text {
  color: white;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  word-wrap: break-word;
  margin: 0;
}

/* Incentives Tagline */

.sp5-incentives-tagline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-brand-logo {
  width: 31px;
  height: 31px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.sp5-brand-logo-fallback {
  width: 31px;
  height: 31px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 9999px;
  flex-shrink: 0;
  display: block;
}

.sp5-brand-image {
  width: 31px;
  height: 31px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.sp5-incentives-tagline-text {
  color: #212121;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

/* ---- Right Column — What You Get ---- */

.sp5-right {
  flex: 1;
  border-radius: 20px;
  background-color: #222;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.sp5-right-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sp5-wyg-card {
  padding: 20px;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp5-wyg-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp5-wyg-heading {
  color: white;
  font-size: 32px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-wyg-subtitle {
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 28px;
  word-wrap: break-word;
  margin: 0;
}

/* Benefits List */

.sp5-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp5-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-benefit-arrow {
  width: 12px;
  height: 14px;
  background: #FFD201;
  flex-shrink: 0;
  display: block;
  clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
}

.sp5-benefit-text {
  color: white;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 24px;
  word-wrap: break-word;
  margin: 0;
}

.sp5-wyg-quote {
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

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

.sp5-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp5-footer-text {
  text-align: center;
  color: #212121;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  white-space: pre-line;
  margin: 0;
}

.sp5-cta-btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: white;
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  min-width: 358px;
}

.sp5-cta-btn:hover {
  opacity: 0.9;
  color: white;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a header + 2-column content row (left 46% / right 54%).
 * On mobile stack vertically, shrink heading from 52px → 28px,
 * unlock-heading + incentives-heading 32→20, body sizes from 18→14.
 */
@media (max-width: 749px) {
  .sp5-section { padding: 28px 0; }
  .sp5-container { gap: 22px; }
  .sp5-header { gap: 12px; }
  .sp5-eyebrow { font-size: 16px; }
  .sp5-title {
    font-size: 28px;
    line-height: 1.1;
  }
  .sp5-subtitle { font-size: 14px; }
  .sp5-content {
    flex-direction: column;
    gap: 18px;
  }
  .sp5-left {
    flex: none;
    width: 100%;
    gap: 18px;
  }
  .sp5-unlock-heading {
    font-size: 22px;
    line-height: 1.15;
  }
  .sp5-unlock-description { font-size: 14px; }
  .sp5-unlock-item { padding: 12px; }
  .sp5-unlock-item-text { font-size: 13px; }
  .sp5-incentives-card {
    padding: 16px;
    gap: 14px;
  }
  .sp5-incentives-heading {
    font-size: 18px;
    line-height: 1.15;
  }
}

@media (max-width: 480px) {
  .sp5-title { font-size: 24px; }
}
/* END_SECTION:student-program-5 */

/* START_SECTION:student-program-6 (INDEX:152) */
.sp6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* ── Header ── */

.sp6__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 766px;
}

.sp6__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sp6__subtitle {
  color: var(--black, #212121);
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-align: center;
  text-transform: capitalize;
  margin: 0;
}

.sp6__heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.sp6__description {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

/* ── Body ── */

.sp6__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  width: 100%;
}

.sp6__quote {
  color: #000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 8px 10px;
  margin: 0;
}

/* ── Cards Row ── */

.sp6__cards-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ── Base Card ── */

.sp6__card {
  flex: 1;
  min-height: 371px;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* ── Card 1: Unlock ── */

.sp6__card--unlock {
  background-image:
    linear-gradient(180deg, rgba(255, 210, 1, 0.76) 0%, rgba(215, 0, 0, 0.76) 100%),
    var(--sp6-card1-bg, none);
  background-color: rgba(215, 0, 0, 0.76);
  background-size: cover;
  background-position: center;
}

.sp6__card-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sp6__card-title {
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0;
  color: #000;
}

.sp6__card-title--light {
  color: #fff;
}

.sp6__card-desc {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.sp6__card-desc--light {
  color: #fff;
}

/* Card 1 Checklist */

.sp6__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sp6__checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp6__checklist-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp6__checklist-item span:last-child {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ── Card 2: Incentives ── */

.sp6__card--incentives {
  background: var(--1, #FFD201);
}

.sp6__card--incentives .sp6__card-top {
  gap: 20px;
}

.sp6__badge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sp6__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(215, 2, 1, 0.50);
  border-radius: 5px;
  backdrop-filter: blur(10px);
  min-height: 37px;
}

.sp6__badge-icon-wrap {
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  background: #D70201;
  border-radius: 5px;
  outline: 1px solid #D70201;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp6__badge-icon-wrap img,
.sp6__badge-icon-wrap svg {
  display: block;
}

.sp6__badge-text {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding-right: 8px;
}

.sp6__card-footer {
  color: #000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
  width: 100%;
}

/* ── Card 3: Benefits ── */

.sp6__card--benefits {
  background: #D70201;
  gap: 20px;
  justify-content: flex-start;
}

.sp6__benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sp6__benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp6__benefit-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp6__benefit-item span:last-child {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

/* ── Arrow connector ── */

.sp6__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── CTA ── */

.sp6__cta-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sp6__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  min-width: 502px;
  height: 42px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.sp6__cta-btn:hover {
  opacity: 0.92;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 3-card row (each ~371px tall, ~33% wide). On mobile
 * stack vertically. Heading 52 → 28, card titles 24 → 20.
 */
@media (max-width: 749px) {
  .sp6 {
    padding-top: 28px;
    padding-bottom: 28px;
    gap: 22px;
  }
  .sp6__header {
    gap: 12px;
    max-width: 100%;
  }
  .sp6__subtitle { font-size: 16px; }
  .sp6__heading {
    font-size: 28px;
    line-height: 1.05;
  }
  .sp6__description {
    font-size: 14px;
    line-height: 1.45;
  }
  .sp6__cards-row {
    flex-direction: column;
    gap: 14px;
  }
  .sp6__card {
    min-height: 0;
    padding: 18px;
  }
  .sp6__card-top { gap: 12px; }
  .sp6__card-title {
    font-size: 20px;
    line-height: 1.15;
  }
  .sp6__card-desc { font-size: 14px; }
  .sp6__checklist { gap: 10px; }
  .sp6__checklist-item span:last-child { font-size: 13px; }
  .sp6__cta-btn {
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .sp6__heading { font-size: 24px; }
}
/* END_SECTION:student-program-6 */

/* START_SECTION:student-program-9 (INDEX:155) */
.sp9-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #F8BE00;
    font-family: 'Montserrat', sans-serif;
    margin: 50px 0;
  }

  .sp9-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .sp9-table th,
  .sp9-table td {
    padding: 20px 10px;
    border-bottom: 0.5px solid #F8BE00;
    border-right: 1px solid #F8BE00;
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
  }

  .sp9-table th:last-child,
  .sp9-table td:last-child {
    border-right: none;
  }

  .sp9-table thead th {
    padding: 20px 10px;
    height: 75px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    border-bottom: 1px solid #F8BE00;
  }

  .sp9-header--gradient {
    background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  }

  .sp9-header--dark {
    background: #212121;
  }

  .sp9-table thead th:first-child {
    font-size: 24px;
    text-align: left;
    padding-left: 37px;
  }

  .sp9-table tbody td:first-child {
    text-align: left;
    padding-left: 37px;
    font-weight: 600;
  }

  .sp9-table tbody td {
    font-weight: 500;
  }

  .sp9-table tbody tr:first-child td {
    padding-top: 20px;
  }

  .sp9-table tbody .sp9-icon-row td:not(:first-child) {
    font-weight: 400;
  }

  @media screen and (max-width: 768px) {
    .sp9-wrapper {
      overflow-x: auto;
      border-radius: 12px;
    }

    .sp9-table {
      table-layout: auto;
      min-width: 900px;
    }
  }
/* END_SECTION:student-program-9 */

/* START_SECTION:the-ambassador-lounge-1 (INDEX:156) */
.ambassador-lounge {
    padding-top: 100px;
    padding-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
  }

  .lounge-title {
    font-family: 'Racing Sans One', cursive;
    font-size: 52px;
    font-weight: 400;
    color: #212121;
    margin: 0 0 10px 0;
    text-transform: capitalize;
  }

  .lounge-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 40px;
  }

  .stats-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }

  .stats-pill {
    background: #FFD201;
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .pill-label {
    font-weight: 700;
    font-size: 18px;
    color: black;
  }

  .pill-value {
    font-weight: 500;
    font-size: 18px;
    color: black;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
  }

  .lounge-card {
    background: white;
    border-radius: 10px;
    border: 1px solid #7C7C7C;
    padding: 20px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .card-title {
    font-size: 18px;
    font-weight: 500;
    color: black;
  }

  .card-date {
    font-size: 18px;
    color: #535353;
  }

  .card-body2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
  }

  .card-value {
    font-size: 30px;
    font-weight: 600;
    color: black;
  }

  .commission-list ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
  }

  .commission-list li {
    font-size: 20px;
    font-weight: 600;
    color: black;
    line-height: 1.2em;
  }

  .card-graph {
    width: 110px;
    height: auto;
    object-fit: contain;
  }

  /* Replicating the gradient placeholder from the original style */
  .graph-placeholder {
    width: 110px;
    height: 80px;
    background: linear-gradient(180deg, #DE2501 0%, rgba(233, 96, 1, 0.08) 100%);
    /* Use a mask or clip-path if you want to mimic the wave shape without an image */
    clip-path: polygon(0% 70%, 20% 80%, 40% 60%, 60% 85%, 80% 40%, 100% 10%, 100% 100%, 0% 100%);
  }

  .action-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .share-button {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 40px;
    display: inline-block;
    transition: opacity 0.3s ease;
  }

  .share-button:hover {
    opacity: 0.9;
  }

  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .cards-grid {
      grid-template-columns: 1fr;
    }
    .lounge-title {
      font-size: 40px;
    }
  }
/* END_SECTION:the-ambassador-lounge-1 */

/* START_SECTION:the-ambassador-lounge-11 (INDEX:158) */
.tal11-section {
    padding: 40px 0 60px;
    font-family: 'Montserrat', sans-serif;
  }

  .tal11-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 32px 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .tal11-header {
    margin-bottom: 24px;
  }

  .tal11-title {
    font-family: 'Racing Sans One', cursive;
    font-style: italic;
    font-size: 28px;
    color: #0F1629;
    margin-bottom: 6px;
  }

  .tal11-subtitle {
    font-size: 14px;
    color: #6b7280;
  }

  /* Balance row */
  .tal11-balance-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #ffffff;
    padding: 24px 28px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .tal11-balance-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
    margin-bottom: 6px;
  }
  .tal11-balance-value {
    font-family: 'Racing Sans One', cursive;
    font-size: 44px;
    line-height: 1.1;
  }
  .tal11-balance-meta {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 4px;
  }

  .tal11-balance-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .tal11-request-btn {
    background: #0F1629;
    color: #ffffff;
    border: 0;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
  }
  .tal11-request-btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }
  .tal11-request-btn:disabled {
    background: rgba(15, 22, 41, 0.4);
    cursor: not-allowed;
  }

  .tal11-balance-method {
    font-size: 12px;
    opacity: 0.9;
  }

  /* Stripe Connect block */
  .tal11-stripe {
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
  }
  .tal11-stripe__inner {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
  }
  .tal11-stripe__title { font-size: 14px; font-weight: 700; color: #0f1629; }
  .tal11-stripe__sub   { font-size: 12px; color: #4b5563; margin-top: 2px; line-height: 1.4; }
  .tal11-stripe__btn {
    border: 0;
    background: #635BFF;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.15s;
  }
  .tal11-stripe__btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
  .tal11-stripe__btn:disabled             { opacity: 0.55; cursor: not-allowed; }
  .tal11-stripe--action {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
  }
  .tal11-stripe--ok {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
  }
  .tal11-stripe--ok .tal11-stripe__btn {
    background: transparent;
    color: #065f46;
    border: 1px solid #6ee7b7;
  }
  @media (max-width: 600px) {
    .tal11-stripe__inner {
      grid-template-columns: 36px 1fr;
      grid-row-gap: 12px;
    }
    .tal11-stripe__action {
      grid-column: 1 / -1;
    }
    .tal11-stripe__btn { width: 100%; }
  }

  /* Status banner */
  .tal11-status {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
  }
  .tal11-status--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
  .tal11-status--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
  .tal11-status--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

  /* History */
  .tal11-history {
    margin-top: 20px;
  }
  .tal11-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .tal11-history-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F1629;
  }

  .tal11-history-table {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
  }
  .tal11-history-header-row,
  .tal11-history-row {
    display: grid;
    grid-template-columns: 110px 110px 120px 100px 1fr;
    align-items: center;
    padding: 12px 14px;
    font-size: 13px;
  }
  .tal11-history-header-row {
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .tal11-history-row + .tal11-history-row,
  .tal11-history-header-row + .tal11-history-row {
    border-top: 1px solid #e5e7eb;
  }
  .tal11-history-cell--amount { font-weight: 700; color: #0F1629; }
  .tal11-history-cell--ref    { font-family: monospace; font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .tal11-history-empty {
    padding: 28px 14px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
  }

  /* Status badges */
  .tal11-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .tal11-badge--paid     { background: #d1fae5; color: #065f46; }
  .tal11-badge--approved { background: #dbeafe; color: #1e40af; }
  .tal11-badge--pending  { background: #fef3c7; color: #92400e; }
  .tal11-badge--rejected { background: #fee2e2; color: #991b1b; }

  @media screen and (max-width: 720px) {
    .tal11-card { padding: 22px 18px 26px; }
    .tal11-balance-row {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 20px;
    }
    .tal11-balance-action { align-items: flex-start; }
    .tal11-request-btn { width: 100%; }
    .tal11-balance-value { font-size: 36px; }
    .tal11-history-header-row,
    .tal11-history-row {
      grid-template-columns: 80px 90px 1fr 80px;
      font-size: 12px;
    }
    .tal11-history-cell--ref { display: none; }
  }
/* END_SECTION:the-ambassador-lounge-11 */

/* START_SECTION:the-ambassador-lounge-2 (INDEX:159) */
/* ─────────────────────────────────────────────────
   OUTER SHELL
───────────────────────────────────────────────── */
.amb-outer {
  width: 100%;
  padding: 60px 100px;
  background: var(--black, #212121);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  margin-top: 50px;
  margin-bottom: 50px;
}

.amb-inner {
  width: 100%;
  max-width: 1054px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ─────────────────────────────────────────────────
   HEADING
───────────────────────────────────────────────── */
.amb-heading {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 52px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   MAIN CONTENT COLUMN
───────────────────────────────────────────────── */
.amb-body-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─────────────────────────────────────────────────
   TOP ROW — tier progress (left) + hero image (right)
───────────────────────────────────────────────── */
.amb-top-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.amb-progress-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─────────────────────────────────────────────────
   TIER ICONS ROW
───────────────────────────────────────────────── */
.amb-tiers-icons-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.amb-tier-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
}

.amb-tier-circle {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amb-tier-circle--active {
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
}

.amb-tier-circle--inactive {
  background: white;
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.44),
    0px 5px 5px rgba(0,0,0,0.38),
    0px 10px 6px rgba(0,0,0,0.23),
    0px 18px 7px rgba(0,0,0,0.07),
    0px 28px 8px rgba(0,0,0,0.01),
    0px -6px 4px rgba(0,0,0,0.25) inset;
}

.amb-tier-circle img,
.amb-tier-circle svg {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.amb-tier-name {
  text-align: center;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.amb-tier-name--active   { color: #FFD201; }
.amb-tier-name--inactive { color: white; }

.amb-tier-price {
  text-align: center;
  color: white;
  font-size: 12px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────────── */
.amb-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.amb-bar-track {
  width: 100%;
  height: 16px;
  background: white;
  border-radius: 9999px;
  overflow: visible;
  position: relative;
}

.amb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 9999px;
  position: relative;
  /* Smooth slide from 0 → hydrated width when ambassador-api.js sets
     the real value. Without this, the bar snaps. */
  transition: width 0.6s ease-out;
}

.amb-bar-thumb {
  width: 16px;
  height: 16px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.10), 0px 4px 6px rgba(0,0,0,0.10);
  border-radius: 9999px;
  border: 4px solid #FFD201;
  position: absolute;
  right: -8px;
  top: 0;
  box-sizing: border-box;
  display: block !important;
}

.amb-bar-labels {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.amb-bar-label {
  color: white;
  font-size: 12px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 16px;
}

/* ─────────────────────────────────────────────────
   HERO IMAGE
───────────────────────────────────────────────── */
.amb-hero-img {
  width: 330px;
  height: 330px;
  object-fit: cover;
  border-radius: 16px;
  flex-shrink: 0;
  display: block;
}

/* ─────────────────────────────────────────────────
   STAT CARDS ROW
───────────────────────────────────────────────── */
.amb-cards-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: -40px;
}

.amb-card {
  flex: 1 1 0;
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 130px;
  box-sizing: border-box;
}

.amb-card__tier-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.amb-card__tier-badge {
  width: 48px;
  height: 48px;
  background: #FFD201;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amb-card__tier-badge img,
.amb-card__tier-badge svg {
  width: 22px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.amb-card__tier-name {
  color: #FFD201;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.amb-card__value {
  text-align: center;
  font-size: 30px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.amb-card__value--black { color: black; }
.amb-card__value--red   { color: #D70000; }

.amb-card__label {
  text-align: center;
  color: black;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   MOTIVATION BANNER
───────────────────────────────────────────────── */
.amb-banner {
  width: 100%;
  background: linear-gradient(90deg, rgba(255,210,1,0.10) 0%, rgba(215,0,0,0.10) 100%);
  border-radius: 16px;
  outline: 1px solid rgba(255,210,1,0.30);
  outline-offset: -1px;
  padding: 32px 33px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.amb-banner__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.amb-banner__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.amb-banner__title {
  color: #FFD201;
  font-size: 24px;
  font-family: Racing Sans One, sans-serif;
  font-weight: 400;
  line-height: 32px;
}

.amb-banner__sub {
  text-align: center;
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   CTA BUTTON
───────────────────────────────────────────────── */
.amb-cta {
  display: inline-flex;
  padding: 10px 18px;
  min-width: 287px;
  height: 42px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.amb-cta__text {
  color: white;
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 60/100 padded shell with heading + 2-col top row
 * (tier-progress meter on left + hero image on right). Mobile stacks
 * everything single-column and shrinks the tier circles.
 */
@media (max-width: 749px) {
  .amb-outer {
    padding: 28px 18px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 14px;
  }
  .amb-inner { gap: 22px; max-width: 100%; }
  .amb-heading {
    font-size: 26px;
    line-height: 1.15;
  }
  .amb-top-row {
    flex-direction: column;
    gap: 18px;
  }
  .amb-progress-col {
    width: 100%;
    flex: none;
    gap: 12px;
  }
  /* Tier icons row — 4-5 circles on a phone need to shrink hard */
  .amb-tier-item { width: 56px; }
  .amb-tier-circle {
    width: 44px;
    height: 44px;
  }
  .amb-tier-circle img,
  .amb-tier-circle svg {
    width: 18px;
    height: 18px;
  }
  .amb-tier-name {
    font-size: 11px;
    line-height: 1.15;
  }
  .amb-tier-price { font-size: 10px; }
  .amb-bar-track { height: 12px; }
  .amb-cta__text {
    font-size: 14px;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .amb-tier-circle { width: 38px; height: 38px; }
  .amb-tier-name { font-size: 10px; }
  .amb-tier-price { display: none; } /* too tight on small phones */
}
/* END_SECTION:the-ambassador-lounge-2 */

/* START_SECTION:the-ambassador-lounge-3 (INDEX:160) */
/* =============================================
   THE AMBASSADOR LOUNGE 3 — COMMISSIONS SECTION
   ============================================= */

.tal3-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
}

/* --- Page Title --- */
.tal3-page-title {
  align-self: stretch;
  text-align: center;
  color: black;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
}

/* --- Top Row (Breakdown card + Right panel) --- */
.tal3-top-row {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

/* --- Commission Breakdown Card --- */
.tal3-breakdown-card {
  flex: 1 1 560px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10), 0px 4px 6px rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  border-left: 4px solid #FFD201;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tal3-breakdown-card__title {
  color: #111827;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

/* Commission tiles row */
.tal3-commission-tiles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tal3-tile {
  flex: 1 1 180px;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tal3-tile--yellow {
  background: linear-gradient(90deg, #FFD201 0%, #FDE047 100%);
}

.tal3-tile--red {
  background: linear-gradient(90deg, #D70000 0%, #DC2626 100%);
}

.tal3-tile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.tal3-tile__label {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.tal3-tile--yellow .tal3-tile__label {
  color: #111827;
}

.tal3-tile--red .tal3-tile__label {
  color: white;
}

.tal3-tile__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.tal3-tile__icon--dark {
  filter: brightness(0);
}

.tal3-tile__icon--light {
  filter: brightness(0) invert(1);
}

.tal3-tile__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tal3-tile__amount {
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.tal3-tile--yellow .tal3-tile__amount {
  color: #111827;
}

.tal3-tile--red .tal3-tile__amount {
  color: white;
}

.tal3-tile__rate {
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  opacity: 0.80;
}

.tal3-tile--yellow .tal3-tile__rate {
  color: #111827;
}

.tal3-tile--red .tal3-tile__rate {
  color: white;
  font-weight: 500;
}

/* Total commission dark bar */
.tal3-total-bar {
  padding: 24px;
  background: #111827;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tal3-total-bar__label {
  text-align: center;
  color: #FFD201;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  width: 100%;
}

.tal3-total-bar__amount {
  text-align: center;
  color: white;
  font-size: 36px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  width: 100%;
}

.tal3-total-bar__change {
  text-align: center;
  color: #FFD201;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  width: 100%;
}

/* --- Right panel: image + insights --- */
.tal3-right-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 0 0 390px;
  max-width: 390px;
}

.tal3-feature-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.tal3-insights {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tal3-insights__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tal3-insights__title {
  color: black;
  font-size: 20px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 28px;
}

.tal3-insights__arrow-btn {
  width: 50px;
  height: 50px;
  background: rgba(240, 240, 240, 0.33);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tal3-insights__arrow-btn svg {
  width: 20px;
  height: 20px;
}

.tal3-insights__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tal3-insights__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tal3-insights__row-label {
  color: black;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 24px;
}

.tal3-insights__row-value {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

.tal3-insights__row-value--red {
  color: #D70000;
}

.tal3-insights__row-value--yellow {
  color: #FFD201;
}

/* --- Bottom Row (Products + Customers) --- */
.tal3-bottom-row {
    align-self: stretch;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Shared panel card */
.tal3-panel-card {
  flex: 1 1 300px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10), 0px 4px 6px rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  padding: 32px 52px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tal3-panel-card__title {
  color: #111827;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

.tal3-panel-card__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- List Row (shared by products + customers) --- */
.tal3-list-row {
  background: #F9FAFB;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 80px;
}

.tal3-list-row__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Product icon badge */
.tal3-product-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tal3-product-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Customer avatar */
.tal3-customer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.tal3-list-row__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tal3-list-row__name {
  color: #111827;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

.tal3-list-row__sub {
  color: #4B5563;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.tal3-list-row__value {
  color: #D70000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a wrap-flex top row with a 560px breakdown card +
 * sidebar panel, with a 2-tile commission row inside the card.
 * On mobile collapse to single column, stack the tiles too.
 */
@media (max-width: 749px) {
  .tal3-section {
    padding: 28px 0;
    gap: 22px;
  }
  .tal3-page-title {
    font-size: 28px;
    line-height: 1.1;
  }
  .tal3-top-row { gap: 16px; }
  .tal3-breakdown-card {
    flex-basis: 100%;
    padding: 22px;
    gap: 22px;
    border-radius: 14px;
  }
  .tal3-breakdown-card__title {
    font-size: 20px;
    line-height: 1.15;
  }
  .tal3-commission-tiles {
    flex-direction: column;
    gap: 12px;
  }
  .tal3-tile {
    padding: 18px;
    gap: 12px;
    border-radius: 14px;
  }
  .tal3-tile__label { font-size: 14px; }
  .tal3-tile__amount {
    font-size: 24px;
  }
  .tal3-tile__rate { font-size: 12px; }
  .tal3-list-row__value { font-size: 14px; }
}

@media (max-width: 480px) {
  .tal3-page-title { font-size: 24px; }
}
/* END_SECTION:the-ambassador-lounge-3 */

/* START_SECTION:the-ambassador-lounge-4 (INDEX:161) */
.tal4-section {
    padding: 20px 0;
  }

  .tal4-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 28px 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .tal4-card__title {
    font-family: 'Racing Sans One', cursive;
    font-size: 22px;
    font-style: italic;
    color: #0F1629;
    margin-bottom: 18px;
  }

  .tal4-chart-wrap {
    background: #E5E7EB;
    border-radius: 10px;
    padding: 22px 18px 24px;
  }

  .tal4-chart-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 14px;
  }

  .tal4-chart {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tal4-chart svg {
    width: 100%;
    height: auto;
    max-height: 380px;
    display: block;
  }

  .tal4-chart__empty {
    color: #6B7280;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 40px 20px;
  }

  @media screen and (max-width: 640px) {
    .tal4-card { padding: 18px 14px 20px; }
    .tal4-chart-wrap { padding: 14px 8px 16px; }
    .tal4-card__title { font-size: 18px; }
  }
/* END_SECTION:the-ambassador-lounge-4 */

/* START_SECTION:the-ambassador-lounge-5 (INDEX:162) */
.amb-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 60px 20px;
    box-sizing: border-box;
  }

  .amb-headingg {
    text-align: center;
    color: #000;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 56px;
    word-wrap: break-word;
  }

  .amb-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .amb-row {
    width: 100%;
    max-width: 1320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  /* ── Left column ── */
  .amb-left {
    flex: 0 0 640px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
  }

  /* Shared card styles */
  .amb-card2 {
    background: #212121;
    border-radius: 20px;
    outline: 2px #F8BE00 solid;
    outline-offset: -2px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .amb-card2-header {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .amb-icon-circle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .amb-icon-circle svg {
    width: 20px;
    height: 20px;
    fill: #fff;
  }

  .amb-card2-title {
    color: #FFD201;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word;
  }

  .amb-card2-inner {
    background: rgba(255, 255, 255, 0.20);
    border-radius: 15px;
    outline: 1px rgba(255, 210, 1, 0.20) solid;
    outline-offset: -1px;
    padding: 24px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .amb-code-value {
    color: #FFD201;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .amb-code-label {
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 24px;
    margin-top: 7px;
  }

  .amb-link-value {
    color: #FFD201;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    word-break: break-all;
    word-wrap: break-word;
  }

  .amb-link-label {
    color: #D1D5DB;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 24px;
    margin-top: 7px;
  }

  .amb-copy-btn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 20px;
    background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
    border-radius: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    white-space: nowrap;
  }

  .amb-copy-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    flex-shrink: 0;
  }

  /* Stats row */
  .amb-stats {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .amb-stat-card {
    flex: 1;
    padding: 20px;
    background: #212121;
    border-radius: 20px;
    outline: 1px #F8BE00 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .amb-stat-value {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .amb-stat-value--yellow { color: #FFD201; }
  .amb-stat-value--red    { color: #D70000; }

  .amb-stat-label {
    width: 100%;
    text-align: center;
    color: #D1D5DB;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
  }

  /* ── Right column – hero image ── */
  .amb-right {
    max-width: 640px;
    height: 706px;
    border-radius: 20px;
    outline: 4px #F8BE00 solid;
    outline-offset: -4px;
    overflow: hidden;
    position: relative;
  }

  .amb-hero-imgg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .amb-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 210, 1, 0.30) 0%, rgba(215, 0, 0, 0.30) 100%);
    border-radius: 20px;
  }

  .amb-hero-caption {
    position: absolute;
    bottom: 44px;
    left: 44px;
    right: 44px;
  }

  .amb-hero-title {
    color: #fff;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word;
  }

  .amb-hero-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 24px;
  }

  .amb-hero-subtitle svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: #fff;
  }

  /* ── Share button ── */
  .amb-share-btn {
    height: 42px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
  }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * Desktop is a 640px-wide left column (cards) + 640x706 hero on
   * the right. On mobile stack everything; shrink the hero; collapse
   * code+copy rows so the long URL doesn't push the copy button off.
   */
  @media (max-width: 749px) {
    .amb-section { padding: 28px 16px; gap: 24px; }
    .amb-headingg {
      font-size: 28px;
      line-height: 1.1;
    }
    .amb-body { gap: 22px; }
    .amb-row {
      flex-direction: column;
      gap: 18px;
      max-width: 100%;
    }
    .amb-left {
      flex: none;
      max-width: 100%;
      gap: 18px;
    }
    .amb-card2 {
      padding: 22px;
      gap: 16px;
      border-radius: 14px;
    }
    .amb-card2-title {
      font-size: 18px;
      line-height: 1.15;
    }
    /* Code + copy row stacks instead of side-by-side, keeping the
     * full URL on its own line and the copy button as a wide tap
     * target below. */
    .amb-card2-inner {
      flex-direction: column;
      align-items: stretch;
      padding: 18px;
      gap: 14px;
    }
    .amb-code-value { font-size: 22px; }
    .amb-link-value { font-size: 13px; }
    .amb-code-label, .amb-link-label { font-size: 13px; }
    .amb-copy-btn {
      align-self: stretch;
      justify-content: center;
      height: 44px;
    }
    .amb-stats {
      gap: 10px;
    }
    .amb-stat-card { padding: 14px 8px; }
    .amb-stat-value { font-size: 20px; }
    .amb-stat-label { font-size: 11px; }
    .amb-right {
      max-width: 100%;
      height: 360px;
    }
    .amb-hero-caption {
      bottom: 24px;
      left: 20px;
      right: 20px;
    }
    .amb-hero-title {
      font-size: 18px;
      line-height: 1.2;
    }
    .amb-hero-subtitle { font-size: 13px; }
    .amb-share-btn {
      align-self: stretch;
      width: 100%;
      height: 48px;
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .amb-headingg { font-size: 24px; }
    .amb-stats { flex-wrap: wrap; }
    .amb-stat-card { flex: 1 1 30%; }
    .amb-right { height: 280px; }
  }
/* END_SECTION:the-ambassador-lounge-5 */

/* START_SECTION:the-ambassador-lounge-6 (INDEX:163) */
.tal6-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 60px 20px;
    box-sizing: border-box;
  }

  .tal6-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .tal6-title {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 46px;
    word-wrap: break-word;
  }

  .tal6-subtitle {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .tal6-body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .tal6-cards-row {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .tal6-card {
    height: 361px;
    overflow: hidden;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    flex-grow: 1;
}

  .tal6-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background: linear-gradient(270deg, rgba(248, 190, 0, 0.70) 0%, rgba(215, 2, 1, 0.70) 100%);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    justify-content: flex-start;
    transform: translateY(100%);
    transition: all 0.35s ease;
    opacity: 0;
  }

  .tal6-card:hover .tal6-card-content {
    transform: translateY(0);
    opacity: 1 !important;
  }

  .tal6-card-title {
    color: white;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    line-height: 1em;
  }

  .tal6-card-desc {
    color: #fff;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    flex: 1 1 0;
    line-height: 1.4em;
}

  .tal6-btn-wrap {
    display: flex;
    justify-content: center;
  }

  .tal6-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    min-width: 255px;
    height: 42px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
  }

  .tal6-btn-text {
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: nowrap;
  }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * Desktop is a 5-card row of 361px-tall hover-reveal cards. On
   * mobile the row crushes each card to ~70px wide. Switch to a
   * scroll-snap horizontal scroller so cards keep their natural
   * size, AND make the hover-reveal-on-tap behaviour by showing
   * the title overlay always (mobile users can't hover).
   */
  @media (max-width: 749px) {
    .tal6-section { padding: 28px 16px; gap: 22px; }
    .tal6-title {
      font-size: 28px;
      line-height: 1.1;
    }
    .tal6-subtitle {
      font-size: 14px;
      line-height: 1.45;
    }
    .tal6-body { gap: 18px; }
    /* Horizontal scroll for cards, with snap so each card lands
     * neatly when user swipes. */
    .tal6-cards-row {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      gap: 12px;
      justify-content: flex-start;
      padding-bottom: 8px;
    }
    .tal6-card {
      flex: 0 0 220px;
      height: 280px;
      scroll-snap-align: start;
    }
    /* Always show overlay on mobile (no hover capability) */
    .tal6-card-content {
      transform: translateY(0);
      opacity: 1;
      min-height: auto;
      padding: 12px;
    }
    .tal6-card-title { font-size: 18px; }
    .tal6-card-desc { font-size: 13px; line-height: 1.35; }
    .tal6-btn {
      align-self: stretch;
      width: 100%;
      min-width: 0;
      height: 48px;
    }
    .tal6-btn-text {
      font-size: 14px;
      white-space: normal;
    }
  }

  @media (max-width: 480px) {
    .tal6-title { font-size: 24px; }
    .tal6-card { flex: 0 0 180px; height: 240px; }
  }
/* END_SECTION:the-ambassador-lounge-6 */

/* START_SECTION:the-ambassador-lounge-7 (INDEX:164) */
.tal7-section {
    background: var(--black, #212121);
    border-radius: 20px;
    padding: 65px;
    font-family: inherit;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.tal7-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Heading */
.tal7-heading {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* Slider wrapper — holds arrows + swiper */
.tal7-slider-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.tal7-swiper {
  width: 100%;
  overflow: hidden;
}

/* Cards */
.tal7-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
  aspect-ratio: 209 / 297;
  background: #fff;
}

.tal7-card__image-wrap {
  width: 100%;
  height: 100%;
  display: block;
}

.tal7-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tal7-card:hover .tal7-card__img {
  transform: scale(1.04);
}

/* Non-active slides */
.swiper-slide:not(.swiper-slide-active) .tal7-card {
  opacity: 0.8;
}

.swiper-slide.swiper-slide-active .tal7-card {
  opacity: 1;
  filter: none;
}

/* Hover content overlay */
.tal7-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
}

.tal7-card:hover .tal7-card__content {
  opacity: 1;
}

.tal7-card__title {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.tal7-card__btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
  border-radius: 5px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.tal7-card__btn:hover {
  opacity: 0.88;
}

/* Arrows */
.tal7-arrow {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(240, 240, 240, 0.50);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10;
  transition: background 0.2s ease;
  position: absolute;
}

.tal7-arrow:hover {
  background: rgba(240, 240, 240, 0.75);
}

.tal7-arrow svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.tal7-arrow--prev {
  left: -30px;
}

.tal7-arrow--next {
  right: -30px;
}

/* Pagination dots */
.tal7-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.tal7-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.30) 0%, rgba(215, 2, 1, 0.30) 100%);
  border-radius: 9999px;
  opacity: 1;
  margin: 0;
}

.tal7-pagination .swiper-pagination-bullet-active {
  width: 21px;
  height: 21px;
  background: linear-gradient(270deg, #F8BE00 0%, #D70201 100%);
}

/* Responsive */
@media (max-width: 1100px) {
  .tal7-section {
    padding: 40px 30px;
  }
  .tal7-heading {
    font-size: 40px;
  }
  .tal7-arrow--prev { left: -20px; }
  .tal7-arrow--next { right: -20px; }
}

@media (max-width: 768px) {
  .tal7-section {
    padding: 30px 20px;
  }
  .tal7-heading {
    font-size: 30px;
  }
  .tal7-arrow {
    width: 38px;
    height: 38px;
  }
  .tal7-arrow--prev { left: -15px; }
  .tal7-arrow--next { right: -15px; }
}

.tal7-slider-wrapper .swiper-slide {
    scale: 0.9 0.9;
    transition: all ease .3s;
}

.tal7-slider-wrapper .swiper-slide.swiper-slide-active {
    scale: 1 1;
}
/* END_SECTION:the-ambassador-lounge-7 */

/* START_SECTION:vault-2 (INDEX:168) */
.vault2 {
  width: 100%;
  padding: 50px 0;
}

.vault2__container {
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
}

.vault2__heading {
  color: #212121;
  font-size: 30px;
  font-family: 'Racing Sans One', cursive;
  font-weight: 400;
  word-wrap: break-word;
  margin: 0 0 40px 0;
}

/* ── Progress Bar ── */

.vault2__progress-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.vault2__progress-track {
  width: 100%;
  height: 16px;
  background: #F0F0F0;
  border-radius: 9999px;
  position: relative;
}

.vault2__progress-fill {
  height: 16px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 9999px;
  position: relative;
  min-width: 16px;
  transition: width 0.6s ease-out;
}

.vault2__progress-indicator {
  width: 16px;
  height: 16px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10), 0px 4px 6px rgba(0, 0, 0, 0.10);
  border-radius: 9999px;
  border: 4px solid #FFD201;
  box-sizing: border-box;
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Tier Milestones ── */

.vault2__tiers {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vault2__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vault2__tier-badge {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vault2__tier-badge img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Inline tick + lock SVGs share the badge slot. Visibility is driven
   by classes set on the parent badge from vault-api.js. Default state
   (the SSR'd HTML before JS hydrates) is "locked" — see the comment
   in the section markup. */
.vault2__tier-icon { display: none; }
.vault2__tier-badge--achieved .vault2__tier-icon--tick { display: block; }
.vault2__tier-badge--locked   .vault2__tier-icon--lock { display: block; }
.vault2__tier-badge--locked {
  /* Slightly muted so the visual difference between locked + achieved
     is obvious at a glance even before reading the icon. */
  filter: grayscale(0.35) opacity(0.8);
}

.vault2__tier-badge--silver {
  background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);
  box-shadow:
    0px 1px 3px rgba(156, 163, 175, 0.44),
    0px 5px 5px rgba(156, 163, 175, 0.38),
    0px 11px 7px rgba(156, 163, 175, 0.23),
    0px 20px 8px rgba(156, 163, 175, 0.07),
    0px 32px 9px rgba(156, 163, 175, 0.01),
    0px -4px 4px rgba(0, 0, 0, 0.25) inset;
}

.vault2__tier-badge--gold {
  background: linear-gradient(135deg, #FFD201 0%, #FBBF24 100%);
  box-shadow:
    0px 1px 2px rgba(216, 8, 1, 0.34),
    0px 4px 4px rgba(216, 8, 1, 0.30),
    0px 9px 5px rgba(216, 8, 1, 0.18),
    0px 16px 6px rgba(216, 8, 1, 0.05),
    0px 25px 7px rgba(216, 8, 1, 0.01),
    0px -4px 4px rgba(0, 0, 0, 0.25) inset;
}

.vault2__tier-badge--platinum {
  background: #E5E7EB;
  box-shadow:
    0px 1px 3px rgba(0, 0, 0, 0.10),
    0px 5px 5px rgba(0, 0, 0, 0.09),
    0px 12px 7px rgba(0, 0, 0, 0.05),
    0px 21px 8px rgba(0, 0, 0, 0.01),
    0px 33px 9px rgba(0, 0, 0, 0),
    0px -4px 4px rgba(0, 0, 0, 0.25) inset;
}

.vault2__tier-name {
  text-align: center;
  color: #212121;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.vault2__tier-points {
  text-align: center;
  color: #6B7280;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

/* ── Info Cards ── */

.vault2__cards {
  display: flex;
  gap: 24px;
  margin-bottom: 30px;
}

.vault2__card {
  flex: 1;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault2__card--maintenance {
  background: #F0F0F0;
}

/* ── Pace card: status-driven colour ──
   data-pace-status:
     "ok"   → green (default — customer is on track / ahead)
     "warn" → amber (slightly behind, but recoverable)
     "crit" → red   (real risk of demotion — needs action)
   JS that knows the customer's actual progress can flip the attribute
   value at runtime; the static "on track" copy keeps it green by default. */
.vault2__card--pace {
  background: rgba(15, 157, 88, 0.08);
  outline: 1px solid #0f9d58;
  outline-offset: -1px;
}
.vault2__card--pace[data-pace-status="warn"] {
  background: rgba(184, 134, 11, 0.10);
  outline-color: #b8860b;
}
.vault2__card--pace[data-pace-status="crit"] {
  background: rgba(215, 0, 0, 0.10);
  outline-color: #D70000;
}

.vault2__card-label {
  color: #4B5563;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.vault2__card-value {
  color: #212121;
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.vault2__pace-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault2__pace-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.vault2__pace-label {
  color: #0f9d58;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}
.vault2__card--pace[data-pace-status="warn"] .vault2__pace-label { color: #b8860b; }
.vault2__card--pace[data-pace-status="crit"] .vault2__pace-label { color: #D70000; }

.vault2__pace-value {
  color: #0a6b3a;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}
.vault2__card--pace[data-pace-status="warn"] .vault2__pace-value { color: #6e5400; }
.vault2__card--pace[data-pace-status="crit"] .vault2__pace-value { color: #8a1c1c; }

/* ── CTA Button ── */

.vault2__cta-wrapper {
  display: flex;
  justify-content: center;
}

.vault2__cta-button {
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  word-wrap: break-word;
}

/* ── Mobile (< 750px) ────────────────────────────────────────────── */
@media (max-width: 749px) {
  .vault2 {
    padding: 24px 0;
  }
  .vault2__container {
    padding: 20px 16px;
    border-radius: 14px;
  }
  .vault2__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }
  /* Tier milestones can crowd on phone widths — let them wrap if
   * there are 4+ tiers and shrink badge size for the row to fit. */
  .vault2__tiers {
    gap: 4px;
  }
  .vault2__tier-badge {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .vault2__heading {
    font-size: 22px;
  }
  .vault2__tier-badge {
    width: 32px;
    height: 32px;
  }
}
/* END_SECTION:vault-2 */

/* START_SECTION:vault-3 (INDEX:169) */
.vault3__container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .vault3__inner {
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* History Section */
  .vault3__history {
    flex: 1;
    padding: 32px;
    width: calc(100% - 430px);
  }
  
  .vault3__history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .vault3__history-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    color: #212121;
    margin: 0;
  }
  
  .vault3__history-view-all {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #D70000;
    text-decoration: none;
  }

  .vault3__orders {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .vault3__order-card {
    display: flex;
    align-items: center;
    background: #F0F0F0;
    padding: 16px;
    border-radius: 12px;
    gap: 16px;
  }

  .vault3__order-icon-box {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .vault3__order-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .vault3__img-icon {
    width: 24px;
    height: auto;
    object-fit: contain;
  }

  .vault3__order-extras {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f3f7;
    color: #5b6477;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
  }

  .vault3__order-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .vault3__order-id {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: #212121;
  }

  .vault3__order-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #6B7280;
    margin: 4px 0 0 0;
  }

  .vault3__order-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    margin: 0;
  }

  .vault3__order-points {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #D70000;
    text-align: right;
    margin: 4px 0 0 0;
  }

  .vault3__order-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 100px;
  }

  .vault3__status-badge {
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 12px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
  }

  .vault3__details-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #D70000;
    text-decoration: none;
  }

  /* Benefits Section */
  .vault3__benefits {
    width: 424px;
    padding: 32px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: #000000;
    border-radius: 20px;
    overflow: hidden;
  }

  .vault3__benefits-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
  }

  .vault3__header-icon {
    width: 34px;
    height: auto;
  }

  .vault3__benefits-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    margin: 0;
    color: #fff;
  }

  .vault3__benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .vault3__benefit-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .vault3__check-icon {
    width: 18px;
    height: 18px;
  }

  .vault3__benefit-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
  }

  .vault3__next-tier {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
  }

  .vault3__next-tier-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin: 0 0 8px 0;
  }

  .vault3__next-tier-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 4px 0;
    color: #fff;
  }

  .vault3__next-tier-progress {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin: 0 0 12px 0;
  }

  .vault3__next-tier-details {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
  }

  @media (max-width: 990px) {
    .vault3__inner {
      flex-direction: column;
    }
    .vault3__benefits {
      width: 100%;
    }
    .vault3__order-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    .vault3__order-total, .vault3__order-points {
      text-align: left;
    }
  }
/* END_SECTION:vault-3 */

/* START_SECTION:vault-4 (INDEX:170) */
.the-vault-4 {
    position: relative;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    padding: 32px;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

  .the-vault-4__content {
    width: calc(100% - 288px); /* Adjust based on image container width and gap */
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .the-vault-4__header {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .the-vault-4__header-icon {
    width: 40.5px;
    height: 36px;
  }

  .the-vault-4__header-text {
    color: white;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 36px;
    margin: 0;
  }

  .the-vault-4__details {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .the-vault-4__points-text {
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
  }

  .the-vault-4__points-count {
    color: #FFD201;
    font-weight: 700;
  }

  .the-vault-4__perks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .the-vault-4__perk {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    padding: 9px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .the-vault-4__perk-text {
    color: white;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }

  .the-vault-4__button {
    width: fit-content;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
  }

  .the-vault-4__image-container {
    width: 256px;
    height: 256px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .the-vault-4__main-image {
    max-width: 96px;
    max-height: 98px;
  }

  /* ── Mobile (< 750px) ──────────────────────────────────────────
   * Desktop: content on left at calc(100% - 288px), image container
   * 256x256 fixed on right. On a 430px iPhone the calc subtracts
   * 288px from the available width — leaving content squeezed into
   * ~110px of room while the 256px image overflows. Stack vertically.
   */
  @media (max-width: 749px) {
    .the-vault-4 {
      flex-direction: column;
      padding: 22px;
      gap: 22px;
      margin-top: 24px !important;
      margin-bottom: 24px !important;
      border-radius: 14px;
    }
    .the-vault-4__content {
      width: 100%;
      gap: 18px;
    }
    .the-vault-4__header-text {
      font-size: 24px;
      line-height: 1.15em;
    }
    .the-vault-4__header-icon {
      width: 32px;
      height: auto;
    }
    .the-vault-4__points-text {
      font-size: 15px;
      line-height: 1.45em;
    }
    .the-vault-4__perks {
      gap: 8px;
    }
    .the-vault-4__perk {
      padding: 8px 12px;
    }
    .the-vault-4__perk-text {
      font-size: 12px;
    }
    .the-vault-4__button {
      align-self: stretch;
      width: auto;
      padding: 14px 18px;
      font-size: 14px;
      min-height: 48px;
    }
    .the-vault-4__image-container {
      align-self: center;
      width: 180px;
      height: 180px;
    }
    .the-vault-4__main-image {
      max-width: 72px;
      max-height: 74px;
    }
  }

  @media (max-width: 480px) {
    .the-vault-4__header-text { font-size: 20px; }
    .the-vault-4__image-container { width: 140px; height: 140px; }
  }
/* END_SECTION:vault-4 */

/* START_SECTION:vault-5 (INDEX:171) */
/* ========== Vault 5 Section ========== */

.vault5 {
  padding: 40px 0;
}

/* Grid Layout */
.vault5__grid {
  display: flex;
  gap: 24px;
}

/* Card Base */
.vault5__card {
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Challenge Card (Left) */
.vault5__card--challenge {
  background: #ffffff;
  padding: 32px;
}

/* Giveaway Card (Right) */
.vault5__card--giveaway {
  background-size: cover;
  background-position: center;
  padding: 29px 32px 32px;
}

/* ---- Card Header ---- */
.vault5__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vault5__header-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.vault5__heading {
  font-family: 'Racing Sans One', cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  color: #212121;
  margin: 0;
}

.vault5__heading--light {
  color: #ffffff;
}

/* ---- Card Body ---- */
.vault5__card-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}

/* Info Group (text block + preview/status) */
.vault5__info-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Text Block */
.vault5__text-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault5__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #212121;
  margin: 0;
}

.vault5__title--light {
  color: #ffffff;
}

.vault5__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #4B5563;
  margin: 0;
}

/* ---- Reward Preview Box (Challenge Card) ---- */
.vault5__preview {
  background: #F0F0F0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault5__preview-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #4B5563;
}

.vault5__preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vault5__preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault5__preview-item-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.vault5__preview-item-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #000000;
}

/* ---- Benefits List (Giveaway Card) ---- */
.vault5__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault5__benefit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault5__benefit-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.vault5__benefit-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
}

/* ---- Status Advantage Box (Giveaway Card) ---- */
.vault5__status {
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 5px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault5__status-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.vault5__tiers {
  display: flex;
  gap: 8px;
}

.vault5__tier {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 4px;
}

.vault5__tier--active {
  background: rgba(255, 210, 1, 0.30);
}

.vault5__tier-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.vault5__tier-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

/* ---- CTA Button ---- */
.vault5__cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* Actions Row (Giveaway Card) */
.vault5__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---- Responsive ---- */
@media screen and (max-width: 899px) {
  .vault5__grid {
    flex-direction: column;
  }

  .vault5__preview-grid {
    grid-template-columns: 1fr;
  }

  .vault5__actions {
    flex-wrap: wrap;
  }

  .vault5__cta-btn {
    font-size: 16px;
  }
}

@media (max-width: 749px) {
  .vault5 { padding: 28px 0; }
  .vault5__grid { gap: 16px; }
  .vault5__card--challenge,
  .vault5__card--giveaway {
    padding: 22px;
    border-radius: 14px;
  }
  .vault5__heading {
    font-size: 22px;
    line-height: 1.2;
  }
  .vault5__card-body {
    margin-top: 22px;
    gap: 22px;
  }
  .vault5__title {
    font-size: 18px;
    line-height: 1.2;
  }
  .vault5__desc { font-size: 14px; line-height: 1.5; }
  .vault5__preview { padding: 16px; }
  .vault5__preview-item-text { font-size: 13px; }
  .vault5__benefit-text { font-size: 14px; }
  .vault5__status { padding: 14px; }
}
/* END_SECTION:vault-5 */

/* START_SECTION:vault-6 (INDEX:172) */
.vault6-section {
  padding: 40px 0;
}

.vault6-section .page-width {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Header row */
.vault6-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vault6-heading {
  color: #212121;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 36px;
  margin: 0;
}

.vault6-view-all {
  color: #D70000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.vault6-view-all:hover {
  text-decoration: underline;
}

/* Cards row */
.vault6-cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Individual card */
.vault6-card {
  flex: 1;
  min-height: 152px;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Icon circle */
.vault6-card__icon-wrap {
  width: 48px;
  height: 48px;
  background: #D70000;
  border-radius: 9999px;
  box-shadow:
    0px 1px 2px rgba(215, 0, 0, 0.29),
    0px 4px 4px rgba(215, 0, 0, 0.26),
    0px 9px 5px rgba(215, 0, 0, 0.15),
    0px 16px 6px rgba(215, 0, 0, 0.04),
    0px 25px 7px rgba(215, 0, 0, 0.01),
    inset 0px -4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

.vault6-card__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Card title */
.vault6-card__title {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 24px;
}

/* Card description */
.vault6-card__description {
  color: #4B5563;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 20px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop renders the cards row as N cards × flex:1, so they share the
 * row equally. With 4+ cards on a 430px iPhone they get ~85px each
 * which can't fit "16px title + 14px desc + 48px icon". Switch to a
 * 2-column grid that lets each card breathe.
 */
@media (max-width: 749px) {
  .vault6-section { padding: 24px 0; }
  .vault6-section .page-width { gap: 22px; }
  .vault6-header {
    align-items: flex-start;
    gap: 12px;
  }
  .vault6-heading {
    font-size: 24px;
    line-height: 1.15em;
  }
  .vault6-view-all {
    font-size: 14px;
  }
  .vault6-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .vault6-card {
    min-height: 0;
    padding: 16px;
  }
  .vault6-card__icon-wrap {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  .vault6-card__icon-img { width: 20px; height: 20px; }
  .vault6-card__title { font-size: 14px; line-height: 20px; }
  .vault6-card__description { font-size: 13px; line-height: 18px; }
}

@media (max-width: 380px) {
  .vault6-cards {
    grid-template-columns: 1fr;
  }
}
/* END_SECTION:vault-6 */

/* START_SECTION:vault-7 (INDEX:173) */
.vault7__container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .vault7__inner {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* ─── Left Panel ─── */
  .vault7__left {
    flex: 1;
    background: #212121;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center right;
}

  .vault7__left-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    box-sizing: border-box;
  }

  .vault7__left-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .vault7__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    max-width: 510px;
  }

  .vault7__points-badge {
    background: #FFD201;
    color: #212121;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─── Subscription Cards ─── */
  .vault7__subscriptions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* the [hidden] attribute is display:none by default, but a more
     specific display rule (like display:flex above) wins. force it
     so JS toggling .hidden actually hides the element. */
  .vault7 [hidden] { display: none !important; }

  .vault7__sub-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.30);
    border-radius: 12px;
    padding: 20px;
    gap: 16px;
  }

  .vault7__sub-icon-box {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .vault7__sub-icon {
    width: 24px;
    height: auto;
    object-fit: contain;
  }

  .vault7__sub-info {
    flex: 1;
    min-width: 0;
  }

  .vault7__sub-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin: 0;
  }

  .vault7__sub-frequency {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin: 4px 0 0 0;
  }

  .vault7__sub-multiplier {
    text-align: center;
    min-width: 300px;
  }

  .vault7__sub-mult-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    margin: 0;
    text-align: center;
  }

  .vault7__sub-mult-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    margin: 4px 0 0 0;
    text-align: center;
  }

  .vault7__sub-next {
    min-width: 110px;
    text-align: right;
  }

  .vault7__sub-next-date {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #212121;
    margin: 0;
    text-align: right;
  }

  .vault7__sub-next-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #212121;
    margin: 4px 0 0 0;
    text-align: right;
  }

  /* ─── Subscription empty / loading copy ─── */
  /* Bumped from 14px to 17px so the value prop ("Start one to earn 2×")
     reads as a real selling line, not a footnote. line-height generous
     so the strong-tagged second sentence breathes. */
  .vault7__subs-empty,
  .vault7__subs-loading {
    color: #cbd2db;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    padding: 24px 0 8px;
    margin: 0;
    max-width: 540px;
  }
  .vault7__subs-empty strong {
    color: #fff;
  }

  /* ─── CTA Button ─── */
  /* margin-top: auto pins this to the bottom of .vault7__left-content
     (which is a flex column), filling the empty space below the empty
     state on customers without subscriptions. Full-width + bumped font
     for a stronger primary action. */
  .vault7__cta {
    display: block;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 24px;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.5px;
    margin-top: auto;
    box-shadow: 0 6px 20px rgba(215, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .vault7__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(215, 0, 0, 0.35);
  }

  /* ─── Right Panel ─── */
  .vault7__right {
    width: 424px;
    flex-shrink: 0;
    background-color: #212121;
    background-size: cover;
    background-position: center;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 0 20px 20px 0;
  }

  .vault7__earn-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    margin: 0;
  }

  /* ─── Earn Way Rows ─── */
  .vault7__earn-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }

  .vault7__earn-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 12px;
    gap: 10px;
  }

  .vault7__earn-icon-wrap {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .vault7__earn-icon {
    width: 18px;
    height: auto;
    object-fit: contain;
  }

  .vault7__earn-label {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
  }

  .vault7__earn-points {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFD201;
    white-space: nowrap;
  }

  .vault7__see-all {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFD201;
    text-decoration: none;
    text-align: center;
    display: block;
  }

  /* ─── Responsive ─── */
  @media (max-width: 990px) {
    .vault7__inner {
      flex-direction: column;
    }

    .vault7__right {
      width: 100%;
      border-radius: 0 0 20px 20px;
    }

    .vault7__left {
      border-radius: 20px 20px 0 0;
    }

    .vault7__sub-card {
      flex-wrap: wrap;
    }

    .vault7__sub-next {
      text-align: left;
    }

    .vault7__sub-next-date,
    .vault7__sub-next-price {
      text-align: left;
    }

    .vault7__cta {
      width: 100%;
      box-sizing: border-box;
    }
  }

  @media (max-width: 480px) {
    .vault7__title {
      font-size: 22px;
    }

    .vault7__sub-card {
      gap: 12px;
      padding: 16px;
    }

    .vault7__sub-mult-value {
      font-size: 16px;
    }

    .vault7__cta {
      font-size: 16px;
    }
  }
/* END_SECTION:vault-7 */

/* START_SECTION:vault-8 (INDEX:174) */
.v8-section {
    padding: 40px 0;
  }

  .v8-wrapper {
    background: #ffffff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 32px;
  }

  .v8-heading {
    color: #212121;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 40px 0;
  }

  .v8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .v8-card {
    display: block;
    text-decoration: none;
    background: transparent;
    border-radius: 12px;
    outline: 2px solid #E5E7EB;
    outline-offset: -2px;
    padding: 23px 22px 22px;
  }

  .v8-card--vip {
    background: rgba(255, 210, 1, 0.10);
    outline-color: #FFD201;
  }

  .v8-card__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .v8-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .v8-card__label {
    color: #212121;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
  }

  .v8-card__subtitle {
    color: #6B7280;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 1.33;
    margin: 4px 0 0 0;
  }

  @media screen and (max-width: 1024px) {
    .v8-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .v8-grid {
      grid-template-columns: 1fr;
    }

    .v8-heading {
      font-size: 24px;
    }
  }
/* END_SECTION:vault-8 */

/* START_SECTION:vault-9 (INDEX:175) */
.vault9-wrapper {
  padding: 90px 48px;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
    margin: 50px 0 100px 0;
}

.vault9-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}

.vault9-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.vault9-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.vault9-heading {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  word-wrap: break-word;
  margin: 0;
}

.vault9-subheading {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 1.4;
  word-wrap: break-word;
  margin: 0;
}

.vault9-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.vault9-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  word-wrap: break-word;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.vault9-btn:hover {
  opacity: 0.9;
  color: #fff;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop CTA section: 90px / 48px padding around a 52px heading +
 * 20px subheading + side-by-side buttons. On a 430px iPhone the
 * 52px heading wraps awkwardly, the 90px vertical padding wastes
 * the viewport, and inline buttons crowd each other.
 */
@media (max-width: 749px) {
  .vault9-wrapper {
    padding: 36px 18px;
    margin: 24px 0 36px 0;
    border-radius: 14px;
  }
  .vault9-content { gap: 22px; }
  .vault9-text-group { gap: 10px; }
  .vault9-heading {
    font-size: 30px;
    line-height: 1.1em;
  }
  .vault9-subheading {
    font-size: 15px;
    line-height: 1.45em;
  }
  /* Stack buttons full-width so each is a chunky 48px tap target */
  .vault9-buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .vault9-btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    min-height: 48px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .vault9-heading { font-size: 26px; }
}
/* END_SECTION:vault-9 */

/* START_SECTION:vault-redeem (INDEX:176) */
.the-vault-redeem {
    position: relative;
    background: #0b0f1a;
    border-radius: 20px;
    padding: 32px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    color: #fff;
  }

  .the-vault-redeem__header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }

  .the-vault-redeem__header-icon {
    width: 40px;
    height: 36px;
    flex: 0 0 auto;
  }

  .the-vault-redeem__header-text {
    flex: 1 1 320px;
    min-width: 0;
  }

  .the-vault-redeem__heading {
    color: #fff;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 36px;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
  }

  .the-vault-redeem__subheading {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
  }

  .the-vault-redeem__balance {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(255, 210, 1, 0.08);
    border: 1px solid rgba(255, 210, 1, 0.25);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: 'Montserrat', sans-serif;
    flex: 0 0 auto;
  }

  .the-vault-redeem__balance-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  .the-vault-redeem__balance-value {
    color: #FFD201;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .the-vault-redeem__balance-suffix {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
  }

  .the-vault-redeem__signed-out {
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
  }

  .the-vault-redeem__signed-out p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
  }

  .the-vault-redeem__signed-out-cta {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFD201 0%, #FFB800 100%);
    color: #0b0f1a;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .the-vault-redeem__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .the-vault-redeem__card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .the-vault-redeem__card--unlocked {
    border-color: rgba(255, 210, 1, 0.45);
    background: rgba(255, 210, 1, 0.06);
  }

  .the-vault-redeem__card--unlocked:hover {
    transform: translateY(-2px);
    border-color: #FFD201;
    background: rgba(255, 210, 1, 0.1);
  }

  .the-vault-redeem__card--locked {
    opacity: 0.55;
  }

  .the-vault-redeem__card-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
  }

  .the-vault-redeem__card--unlocked .the-vault-redeem__card-icon {
    background: #FFD201;
    color: #0b0f1a;
  }

  .the-vault-redeem__card-icon-tick { display: none; }
  .the-vault-redeem__card-icon-lock { display: block; }
  .the-vault-redeem__card--unlocked .the-vault-redeem__card-icon-tick { display: block; }
  .the-vault-redeem__card--unlocked .the-vault-redeem__card-icon-lock { display: none; }

  .the-vault-redeem__card-points {
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
  }

  .the-vault-redeem__card-value {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
  }

  .the-vault-redeem__card-meta {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
  }

  .the-vault-redeem__card-cta {
    margin-top: auto;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFD201 0%, #FFB800 100%);
    color: #0b0f1a;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
  }

  .the-vault-redeem__card-cta:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }

  .the-vault-redeem__card-cta:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
  }

  .the-vault-redeem__fineprint {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    max-width: 720px;
  }

  .the-vault-redeem__fineprint p { margin: 0; }

  /* ── Modal ─────────────────────────────────────────────────── */
  .the-vault-redeem-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 26, 0.72);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
  }

  .the-vault-redeem-modal.is-open { display: flex; }

  .the-vault-redeem-modal__card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    animation: the-vault-redeem-pop 0.18s ease-out;
    color: #0b0f1a;
  }

  @keyframes the-vault-redeem-pop {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  .the-vault-redeem-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #5b6477;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
  }

  .the-vault-redeem-modal__close:hover {
    color: #0b0f1a;
    background: rgba(0, 0, 0, 0.05);
  }

  .the-vault-redeem-modal__heading {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 26px;
    font-weight: 400;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    color: #0b0f1a;
  }

  .the-vault-redeem-modal__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #1f2533;
    margin: 0 0 22px;
  }

  .the-vault-redeem-modal__error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 10px 14px;
    color: #991b1b;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 18px;
  }

  .the-vault-redeem-modal__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .the-vault-redeem-modal__btn {
    flex: 1 1 140px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s, background 0.15s, color 0.15s;
  }

  .the-vault-redeem-modal__btn--primary {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
  }

  .the-vault-redeem-modal__btn--primary:hover:not(:disabled) { filter: brightness(1.05); }
  .the-vault-redeem-modal__btn--primary:disabled { opacity: 0.6; cursor: progress; }

  .the-vault-redeem-modal__btn--secondary {
    background: #f1f5f9;
    color: #0b0f1a;
  }

  .the-vault-redeem-modal__btn--secondary:hover { background: #e2e8f0; }

  /* Success state */
  .the-vault-redeem-modal__success-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD201 0%, #FFB800 100%);
    color: #0b0f1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    margin: 0 auto 14px;
  }

  .the-vault-redeem-modal__code {
    background: #0b0f1a;
    color: #FFD201;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .the-vault-redeem-modal__code code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.06em;
    word-break: break-all;
    flex: 1 1 0;
    min-width: 0;
  }

  .the-vault-redeem-modal__copy {
    background: #FFD201;
    color: #0b0f1a;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex: 0 0 auto;
    transition: filter 0.15s;
  }

  .the-vault-redeem-modal__copy:hover { filter: brightness(1.05); }
  .the-vault-redeem-modal__copy--copied { background: #21682d; color: #fff; }

  /* ── Responsive ──────────────────────────────────────────── */
  @media screen and (max-width: 1024px) {
    .the-vault-redeem__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media screen and (max-width: 749px) {
    .the-vault-redeem { padding: 24px; margin-top: 32px; margin-bottom: 32px; }
    .the-vault-redeem__heading { font-size: 24px; line-height: 30px; }
    .the-vault-redeem__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .the-vault-redeem__card { padding: 18px 16px 16px; }
    .the-vault-redeem__card-points { font-size: 18px; }
    .the-vault-redeem__card-value { font-size: 22px; }
    .the-vault-redeem-modal__card { padding: 28px 22px 22px; }
    .the-vault-redeem-modal__heading { font-size: 22px; }
  }

  @media screen and (max-width: 480px) {
    .the-vault-redeem__grid { grid-template-columns: 1fr; }
    .the-vault-redeem__balance { width: 100%; justify-content: center; }
  }
/* END_SECTION:vault-redeem */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:ssa-button-polish (INDEX:216) */
/* ── 1. Idle state (transition + base shadow + text shadow) ──────── */
.aal2-active-campaign,
.amb-apply__state-cta,
.amb-apply__submit,
.amb-cta,
.amb-share-btn,
.amb-state__btn--primary,
.ap1-btn-primary,
.ap6-cta-btn,
.bsn__btn,
.bsn .quick-add__submit.bsn__btn,
.campus-apply__state-cta,
.campus-apply__submit,
/* Shopify Dawn "Choose options" / quick-add button on product cards.
   Site-wide gradient applied in `theme/assets/hz_custom.css`. */
.card-wrapper.product-card-wrapper > .card .card__content .quick-add button,
.get_in_touch_4__cta,
.giveaway_sec_1 .giveaway_sec_1_btn,
.giveaway_sec_1 .gw-modal__enter-btn,
.giveaway_sec_3 .giveaway_sec_3_btn,
.giveaway_sec_4 .giveaway_sec_4_btn,
.hs2-btn,
.hs2-card__btn,
.hs5-quick-buy,
.hs6-btn,
.hs8__cta,
.hs10-btn,
.hs12__cta,
.hs13-quick-buy,
.hs14_btn,
.hs16__cta > a,
.login-hub-button,
.lp8-button,
.mc_sec_3 .mc_sec_3_btn,
.mc3c__btn,
.nro-bundle__card-add,
.nro-bundle__cart-submit,
.nro-dup-modal__btn--primary,
.nro-final-cta,
.nro-intro__cta--primary,
.nro-landing--intro-only .nro-intro__cta--primary,
.nro-postco-banner__btn--primary,
.our_story_sec_5_btn,
.partner-collab-6__button,
.pc_sec_3 .pc_sec_3_btn,
.pn-btn,
.pn-gate__btn--primary,
.pn-modal__submit,
.pnl__btn--primary,
/* PDP Add to Cart + Shop Pay buttons (Dawn full-width primary). */
.product-form__submit.button.button--full-width.button--secondary,
button.shopify-payment-button__button.shopify-payment-button__button--unbranded,
.product-reviews__submit,
.share-button,
.sp1__card,
.sp4-btn,
.sp5-cta-btn,
.sp6__cta-btn,
.sp7-cta,
.sp10-cta-button,
.ss-cc__btn--primary,
.ss404__cta--primary,
.ssa-auth__card button,
.ssa-auth__card button[type='submit'],
.ssa-auth__card button:not([type]),
.ssa-btn-primary,
.ssa-guest button,
.ssa-notify-modal__submit,
.ssa-scroll-coupon__cta,
.ssa-subs-card__btn--primary,
.ssa-subs-empty__cta,
.ssa-subs-guest__btn,
.ssa-subsave-dup__btn--primary,
.student_portal_4-sponsorship-btn,
.tal6-btn,
.the-vault-4__button,
.the-vault-redeem__card-cta,
.the-vault-redeem__signed-out-cta,
.the-vault-redeem-modal__btn--primary,
.vault2__cta-button,
.vault5__cta-btn,
.vault7__cta,
.vault9-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow:
    0 10px 24px rgba(215, 0, 0, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important;
  /* Cursor + decoration cleanups — some <a> based buttons inherit
     underline from theme link defaults; this keeps them flat. Doesn't
     change layout. */
  text-decoration: none !important;
}

/* ── 2. Hover — the lift + stronger glow ─────────────────────────── */
.aal2-active-campaign:hover,
.amb-apply__state-cta:hover,
.amb-apply__submit:hover,
.amb-cta:hover,
.amb-share-btn:hover,
.amb-state__btn--primary:hover,
.ap1-btn-primary:hover,
.ap6-cta-btn:hover,
.bsn__btn:hover,
.bsn .quick-add__submit.bsn__btn:hover,
.campus-apply__state-cta:hover,
.campus-apply__submit:hover,
.card-wrapper.product-card-wrapper > .card .card__content .quick-add button:hover,
.get_in_touch_4__cta:hover,
.giveaway_sec_1 .giveaway_sec_1_btn:hover,
.giveaway_sec_1 .gw-modal__enter-btn:hover,
.giveaway_sec_3 .giveaway_sec_3_btn:hover,
.giveaway_sec_4 .giveaway_sec_4_btn:hover,
.hs2-btn:hover,
.hs2-card__btn:hover,
.hs5-quick-buy:hover,
.hs6-btn:hover,
.hs8__cta:hover,
.hs10-btn:hover,
.hs12__cta:hover,
.hs13-quick-buy:hover,
.hs14_btn:hover,
.hs16__cta > a:hover,
.login-hub-button:hover,
.lp8-button:hover,
.mc_sec_3 .mc_sec_3_btn:hover,
.mc3c__btn:hover,
.nro-bundle__card-add:hover,
.nro-bundle__cart-submit:hover:not(:disabled),
.nro-dup-modal__btn--primary:hover,
.nro-final-cta:hover,
.nro-intro__cta--primary:hover,
.nro-landing--intro-only .nro-intro__cta--primary:hover,
.nro-postco-banner__btn--primary:hover,
.our_story_sec_5_btn:hover,
.partner-collab-6__button:hover,
.pc_sec_3 .pc_sec_3_btn:hover,
.pn-btn:hover,
.pn-gate__btn--primary:hover,
.pn-modal__submit:hover,
.pnl__btn--primary:hover,
.product-form__submit.button.button--full-width.button--secondary:hover,
button.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.product-reviews__submit:hover,
.share-button:hover,
.sp1__card:hover,
.sp4-btn:hover,
.sp5-cta-btn:hover,
.sp6__cta-btn:hover,
.sp7-cta:hover,
.sp10-cta-button:hover,
.ss-cc__btn--primary:hover,
.ss404__cta--primary:hover,
.ssa-auth__card button:hover,
.ssa-auth__card button[type='submit']:hover,
.ssa-auth__card button:not([type]):hover,
.ssa-btn-primary:hover,
.ssa-guest button:hover,
.ssa-notify-modal__submit:hover,
.ssa-scroll-coupon__cta:hover,
.ssa-subs-card__btn--primary:hover,
.ssa-subs-empty__cta:hover,
.ssa-subs-guest__btn:hover,
.ssa-subsave-dup__btn--primary:hover,
.student_portal_4-sponsorship-btn:hover,
.tal6-btn:hover,
.the-vault-4__button:hover,
.the-vault-redeem__card-cta:hover,
.the-vault-redeem__signed-out-cta:hover,
.the-vault-redeem-modal__btn--primary:hover,
.vault2__cta-button:hover,
.vault5__cta-btn:hover,
.vault7__cta:hover,
.vault9-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 30px rgba(215, 0, 0, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important;
  /* Keep text white on hover — some link-based buttons would otherwise
     pick up the theme's visited/hover link colour. */
  color: #fff !important;
}

/* ── 3. Active (pressed) — snap back to baseline ─────────────────── */
.aal2-active-campaign:active,
.amb-apply__state-cta:active,
.amb-apply__submit:active,
.amb-cta:active,
.amb-share-btn:active,
.amb-state__btn--primary:active,
.ap1-btn-primary:active,
.ap6-cta-btn:active,
.bsn__btn:active,
.campus-apply__state-cta:active,
.campus-apply__submit:active,
.card-wrapper.product-card-wrapper > .card .card__content .quick-add button:active,
.get_in_touch_4__cta:active,
.giveaway_sec_1 .giveaway_sec_1_btn:active,
.giveaway_sec_1 .gw-modal__enter-btn:active,
.giveaway_sec_3 .giveaway_sec_3_btn:active,
.giveaway_sec_4 .giveaway_sec_4_btn:active,
.hs2-btn:active,
.hs2-card__btn:active,
.hs5-quick-buy:active,
.hs6-btn:active,
.hs8__cta:active,
.hs10-btn:active,
.hs12__cta:active,
.hs13-quick-buy:active,
.hs14_btn:active,
.hs16__cta > a:active,
.login-hub-button:active,
.lp8-button:active,
.mc_sec_3 .mc_sec_3_btn:active,
.mc3c__btn:active,
.nro-bundle__card-add:active,
.nro-bundle__cart-submit:active,
.nro-dup-modal__btn--primary:active,
.nro-final-cta:active,
.nro-intro__cta--primary:active,
.nro-landing--intro-only .nro-intro__cta--primary:active,
.nro-postco-banner__btn--primary:active,
.our_story_sec_5_btn:active,
.partner-collab-6__button:active,
.pc_sec_3 .pc_sec_3_btn:active,
.pn-btn:active,
.pn-gate__btn--primary:active,
.pn-modal__submit:active,
.pnl__btn--primary:active,
.product-form__submit.button.button--full-width.button--secondary:active,
button.shopify-payment-button__button.shopify-payment-button__button--unbranded:active,
.product-reviews__submit:active,
.share-button:active,
.sp1__card:active,
.sp4-btn:active,
.sp5-cta-btn:active,
.sp6__cta-btn:active,
.sp7-cta:active,
.sp10-cta-button:active,
.ss-cc__btn--primary:active,
.ss404__cta--primary:active,
.ssa-auth__card button:active,
.ssa-auth__card button[type='submit']:active,
.ssa-auth__card button:not([type]):active,
.ssa-btn-primary:active,
.ssa-guest button:active,
.ssa-notify-modal__submit:active,
.ssa-scroll-coupon__cta:active,
.ssa-subs-card__btn--primary:active,
.ssa-subs-empty__cta:active,
.ssa-subs-guest__btn:active,
.ssa-subsave-dup__btn--primary:active,
.student_portal_4-sponsorship-btn:active,
.tal6-btn:active,
.the-vault-4__button:active,
.the-vault-redeem__card-cta:active,
.the-vault-redeem__signed-out-cta:active,
.the-vault-redeem-modal__btn--primary:active,
.vault2__cta-button:active,
.vault5__cta-btn:active,
.vault7__cta:active,
.vault9-btn:active {
  transform: translateY(0) !important;
}

/* ── 4. Reduced-motion users get no animation ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aal2-active-campaign,
  .amb-apply__state-cta,
  .amb-apply__submit,
  .amb-cta,
  .amb-share-btn,
  .amb-state__btn--primary,
  .ap1-btn-primary,
  .ap6-cta-btn,
  .bsn__btn,
  .campus-apply__state-cta,
  .campus-apply__submit,
  .card-wrapper.product-card-wrapper > .card .card__content .quick-add button,
  .get_in_touch_4__cta,
  .giveaway_sec_1 .giveaway_sec_1_btn,
  .giveaway_sec_1 .gw-modal__enter-btn,
  .giveaway_sec_3 .giveaway_sec_3_btn,
  .giveaway_sec_4 .giveaway_sec_4_btn,
  .hs2-btn,
  .hs5-quick-buy,
  .hs6-btn,
  .hs8__cta,
  .hs10-btn,
  .hs12__cta,
  .hs13-quick-buy,
  .hs14_btn,
  .hs16__cta > a,
  .login-hub-button,
  .lp8-button,
  .mc_sec_3 .mc_sec_3_btn,
  .mc3c__btn,
  .nro-bundle__card-add,
  .nro-bundle__cart-submit,
  .nro-dup-modal__btn--primary,
  .nro-final-cta,
  .nro-intro__cta--primary,
  .nro-postco-banner__btn--primary,
  .our_story_sec_5_btn,
  .partner-collab-6__button,
  .pc_sec_3 .pc_sec_3_btn,
  .pn-btn,
  .pn-gate__btn--primary,
  .pn-modal__submit,
  .pnl__btn--primary,
  .product-form__submit.button.button--full-width.button--secondary,
  button.shopify-payment-button__button.shopify-payment-button__button--unbranded,
  .product-reviews__submit,
  .share-button,
  .sp1__card,
  .sp4-btn,
  .sp5-cta-btn,
  .sp6__cta-btn,
  .sp7-cta,
  .sp10-cta-button,
  .ss-cc__btn--primary,
  .ss404__cta--primary,
  .ssa-auth__card button,
  .ssa-auth__card button[type='submit'],
  .ssa-auth__card button:not([type]),
  .ssa-btn-primary,
  .ssa-guest button,
  .ssa-notify-modal__submit,
  .ssa-scroll-coupon__cta,
  .ssa-subs-card__btn--primary,
  .ssa-subs-empty__cta,
  .ssa-subs-guest__btn,
  .ssa-subsave-dup__btn--primary,
  .student_portal_4-sponsorship-btn,
  .tal6-btn,
  .the-vault-4__button,
  .the-vault-redeem__card-cta,
  .the-vault-redeem__signed-out-cta,
  .the-vault-redeem-modal__btn--primary,
  .vault2__cta-button,
  .vault5__cta-btn,
  .vault7__cta,
  .vault9-btn {
    transition: none !important;
  }
}

/* ── 5. Opt-out escape hatch ─────────────────────────────────────── */
/* Add `.no-ssa-polish` to any button's class list to disable the
   polish — useful for icon-only utility buttons that shouldn't lift,
   or one-off design experiments. */
.no-ssa-polish,
.no-ssa-polish:hover,
.no-ssa-polish:active {
  transform: none !important;
  text-shadow: none !important;
}
/* END_SNIPPET:ssa-button-polish */

/* START_SNIPPET:subscribe-save-toggle (INDEX:218) */
/* Never Run Out — Subscribe & Save toggle (May 2026)
     Branded design per CEO directive — gradient red→yellow accents,
     bold typography, clear visual hierarchy. Replaces Amazon's
     plain radio buttons. */
  .ssa-subsave {
    margin: 20px 0;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.02);
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
  }
  .ssa-subsave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  }
  .ssa-subsave__heading {
    font-family: 'Racing Sans One', Impact, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground, 33 33 33));
    margin-bottom: 12px;
    line-height: 1.1;
  }
  .ssa-subsave__heading-icon {
    display: inline-flex;
    align-items: center;
    color: #d70000;
  }
  .ssa-subsave__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ssa-subsave__opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 14px;
    background: #fff;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .ssa-subsave__opt:hover {
    border-color: rgba(var(--color-foreground, 33 33 33), 0.32);
  }
  .ssa-subsave__opt input[type="radio"] {
    flex: none;
    margin: 2px 0 0;
    accent-color: #d70000;
    width: 18px;
    height: 18px;
  }
  /* Selected state — trademark red → orange → yellow gradient fill,
     applied identically to BOTH One-time and Subscribe options so the
     selected card always reads as "the chosen one" with the same
     visual weight. Outer border is transparent + a slightly darker
     gradient via background-clip so the card has a clean edge against
     the page background regardless of theme palette. */
  .ssa-subsave__opt:has(input:checked) {
    border: 1.5px solid transparent;
    background:
      /* Inner fill — the vibrant gradient customers actually see */
      linear-gradient(90deg, #ffe9c2 0%, #ffd6a5 30%, #ffb273 60%, #ff8a4c 100%) padding-box,
      /* Outer edge — slightly darker version of the same gradient */
      linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%) border-box;
    box-shadow:
      0 8px 20px rgba(215, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  /* Keep text legible on the gradient fill. Both label + price stay
     dark — they already pop on the warm gradient without colour
     changes. The subtle sub-line gets a slight text-shadow on
     selected state so it stays readable. */
  .ssa-subsave__opt:has(input:checked) .ssa-subsave__opt-sub {
    color: rgba(33, 33, 33, 0.78);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .ssa-subsave__opt--locked {
    opacity: 0.72;
    cursor: not-allowed;
  }
  .ssa-subsave__opt--locked .ssa-subsave__opt-badge {
    background: rgba(0, 0, 0, 0.55);
    text-shadow: none;
  }
  .ssa-subsave__opt-content {
    flex: 1;
    min-width: 0;
  }
  .ssa-subsave__opt-label {
    font-family: Montserrat, -apple-system, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: rgb(var(--color-foreground, 33 33 33));
    margin-bottom: 2px;
    flex-wrap: wrap;
  }
  .ssa-subsave__opt-badge {
    font-family: Montserrat, -apple-system, sans-serif;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ssa-subsave__opt-price {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: rgb(var(--color-foreground, 33 33 33));
    margin-top: 2px;
    letter-spacing: 0.005em;
    line-height: 1;
  }
  .ssa-subsave__opt-sub {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 11.5px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
    margin-top: 4px;
    line-height: 1.4;
  }
  .ssa-subsave__cadence {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background:
      #fff padding-box,
      linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%) border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ssa-subsave__cadence-label {
    font-weight: 700;
    font-size: 13px;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .ssa-subsave__cadence-select {
    flex: 1;
    min-width: 160px;
    padding: 9px 12px;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.2);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--color-foreground, 33 33 33));
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
  }
  .ssa-subsave__cadence-select:focus {
    outline: 0;
    border-color: transparent;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"),
      linear-gradient(#fff, #fff),
      linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%);
    background-clip: padding-box, padding-box, border-box;
    background-origin: padding-box, padding-box, border-box;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: right 10px center, 0 0, 0 0;
    background-size: 14px, auto, auto;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
  }
  .ssa-subsave__learn {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #d70000;
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  .ssa-subsave__learn:hover {
    text-decoration: underline;
  }

  /* Mobile (≤ 749px) — keep tap targets comfortable and avoid the
     price label overflowing on narrow product pages. */
  @media (max-width: 749px) {
    .ssa-subsave__opt {
      padding: 12px;
      min-height: 64px;
    }
    .ssa-subsave__opt-label {
      font-size: 14px;
      flex-wrap: wrap;
    }
    .ssa-subsave__opt-price {
      font-size: 18px;
    }
    .ssa-subsave__opt-badge {
      margin-top: 2px;
    }
    .ssa-subsave__cadence-select {
      min-height: 44px;
      font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ssa-subsave__opt,
    .ssa-subsave__opt-content,
    .ssa-subsave__cadence-select {
      transition: none !important;
    }
  }

  /* ── Duplicate-subscription warning modal (PDP toggle) ─────────── */
  /* Appended to <body> by subscribe-save.js when a customer tries to
     subscribe to a product they're already subscribed to. Matches the
     bundle builder's nro-dup-modal styling so the UX feels native
     whether the customer hits the warning from a PDP or the bundle. */
  .ssa-subsave-dup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ssa-subsave-dup-fade 0.18s ease-out;
  }
  @keyframes ssa-subsave-dup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .ssa-subsave-dup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 18, 0.55);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    cursor: pointer;
  }
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .ssa-subsave-dup__backdrop { background: rgba(0, 0, 0, 0.75); }
  }
  .ssa-subsave-dup__card {
    position: relative;
    background: #15151b;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    font-family: Montserrat, -apple-system, sans-serif;
  }
  .ssa-subsave-dup__title {
    font-family: 'Racing Sans One', Impact, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #fff;
  }
  .ssa-subsave-dup__body {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 24px;
  }
  .ssa-subsave-dup__body strong { color: #fff; font-weight: 700; }
  .ssa-subsave-dup__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ssa-subsave-dup__btn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: Montserrat, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .ssa-subsave-dup__btn--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
  }
  .ssa-subsave-dup__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
  }
  .ssa-subsave-dup__btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ssa-subsave-dup__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  @media (max-width: 420px) {
    .ssa-subsave-dup__card { padding: 24px 20px; }
    .ssa-subsave-dup__title { font-size: 19px; }
    .ssa-subsave-dup__actions { flex-direction: column; }
    .ssa-subsave-dup__btn { width: 100%; }
  }
/* END_SNIPPET:subscribe-save-toggle */