/* =================================================================== */
/* PAGE:      Membership Page                                          */
/* FILE:      membership.css                                           */
/* =================================================================== */

/* * TABLE OF CONTENTS
 * -------------------------------------------------------------------
 * 1.0 BODY & GLOBAL
 * 1.1 Body
 *
 * 2.0 HERO SECTION
 * 2.1 Section Container (.hero-section)
 * 2.2 Nav Gradient (.hero-section_nav-gradient)
 * 2.3 Background Picture (.hero-section__background-picture)
 * 2.4 Hero Title (.hero-section__title)
 *
 * 3.0 COLOR BAR
 * 3.1 Color Bar Shared Styles
 *
 * 4.0 MEMBERSHIP TIERS SECTION
 * 4.1 Section Container & Titles
 * 4.2 Tabs (Shared: Tiers & Comparison)
 * 4.3 Panels Container
 * 4.4 Tier Cards: Layout & Structure
 * 4.5 Tier Cards: Highlights & Titles
 * 4.6 Tier Cards: Price & CTA
 * 4.7 Tier Cards: Details & Lists
 *
 * 5.0 REFERRAL PROGRAM SECTION
 * 5.1 Section Container
 * 5.2 Typography
 *
 * 6.0 COMPARISON TABLE SECTION
 * 6.1 Section Container & Disclosure
 * 6.2 Expandable Content Area
 * 6.3 Grid Container & Navigation
 * 6.4 Rows (Layout & Borders)
 * 6.5 Cells (Sticky & Standard)
 * 6.6 Status Tabs (Pinned/Pin)
 * 6.7 Pricing Pills (Annually/Monthly)
 * 6.8 Icons
 * 6.9 Corner Radius Fixes
 * 6.10 Desktop Overrides (1200px+)
 *
 * 7.0 UTILITIES
 * 7.1 Visually Hidden
 * ------------------------------------------------------------------- */

/* ============================================================ */
/* =================== 1.0 Body & Global ====================== */
/* ============================================================ */

/* 1.1 Body */
body {
  background-color: var(--Navy-Blue-100);
}
main {
  position: relative;
  z-index: 0; /* Establishes the stacking context */
  /* Ensure main doesn't have a solid background color that covers shapes, 
     or if it does, the shapes sit on top of it automatically in this setup. */
}

/* ============================================================ */
/* =================== 2.0 Hero Section ======================= */
/* ============================================================ */

/* 2.1 Section Container */
.hero-section {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
}

/* 2.2 Nav Gradient */
.hero-section_nav-gradient {
  width: 100%;
  height: 73px;
  background: linear-gradient(
    180deg,
    rgba(71, 78, 115, 0.65) 25%,
    rgba(71, 78, 115, 0) 100%
  );
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 576px) {
  .hero-section_nav-gradient {
    height: 75px;
  }
}
@media (min-width: 768px) {
  .hero-section_nav-gradient {
    height: 95px;
  }
}
@media (min-width: 992px) {
  .hero-section_nav-gradient {
    height: 100px;
  }
}
@media (min-width: 1200px) {
  .hero-section_nav-gradient {
    height: 150px;
  }
}
@media (min-width: 1400px) {
  .hero-section_nav-gradient {
    height: 165px;
  }
}
@media (min-width: 1920px) {
  .hero-section_nav-gradient {
    height: 150px;
  }
}

/* 2.3 Background Picture */
.hero-section__background-picture,
.hero-section__background-picture img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2.4 Hero Title */
.hero-section__title {
  color: var(--Neutral-Indigo-100);
  text-shadow: 0 2.187px 7.655px rgba(0, 0, 0, 0.25);
  font-family: "Barlow", sans-serif !important;
  font-size: 5.175rem !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
  letter-spacing: 3.12px;
  text-align: center;
  margin: 0 auto;
  /* POSITIONING */
  grid-area: 1/1;
  z-index: 2;
}
@media (min-width: 576px) {
  .hero-section__title {
    font-size: 4.3rem !important;
  }
}
@media (min-width: 768px) {
  .hero-section__title {
    font-size: 7.235rem !important;
  }
}
@media (min-width: 1200px) {
  .hero-section__title {
    font-size: 8.27rem !important;
  }
}
@media (min-width: 1920px) {
  .hero-section__title {
    font-size: 10.35rem !important;
  }
}

/* ============================================================ */
/* ==================== 3.0 Color Bar ========================= */
/* ============================================================ */

/* 3.1 Color Bar Shared Styles */
.membership-tiers-section__color-bar,
.membership-comparison-section__color-bar {
  width: 100%;
  height: 1rem;
}
@media (min-width: 768px) {
  .membership-tiers-section__color-bar,
  .membership-comparison-section__color-bar {
    width: 424px;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__color-bar,
  .membership-comparison-section__color-bar {
    width: 528px;
  }
}

/* ============================================================ */
/* ============== 4.0 Membership Tiers Section ================ */
/* ============================================================ */

/* 4.1 Section Container & Titles */
.membership-tiers-section {
  margin-top: 8rem;
  width: 81.25%;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .membership-tiers-section {
    width: 260px;
  }
}
@media (min-width: 768px) {
  .membership-tiers-section {
    width: 500px;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section {
    width: 1020px;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section {
    width: 1500px;
  }
}
.membership-tiers-section__title-wrapper {
  width: 100% !important;
  margin: 0 auto;
  text-align: center;
}

.membership-tiers-section__title {
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-size: 2.1rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.1px;
}
@media (min-width: 768px) {
  .membership-tiers-section__title {
    font-size: 2.45rem !important;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__title {
    font-size: 2.8rem !important;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__title {
    font-size: 3.5rem !important;
  }
}
/* 4.2 Tabs (Shared: Tiers & Comparison) */
/* DRY: Grouping selector for both sections here */
.membership-tiers-section__tabs,
.membership-comparison-section__tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 2rem;
  margin-bottom: 4rem;
}

.membership-tiers-section__tab,
.membership-comparison-section__tab,
.membership-tiers-section__tab--active,
.membership-comparison-section__tab--active {
  /* Box Model */
  box-sizing: border-box; /* Crucial for correct sizing */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 125px;
  height: 63px;
  padding: 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 46.588px;
  letter-spacing: 0.621px;
  text-transform: uppercase;
  border: 1px solid var(--Navy-Blue-1000);
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  z-index: 1;
}

.membership-tiers-section__tab,
.membership-comparison-section__tab {
  background: var(--Navy-Blue-100);
  color: var(--Navy-Blue-1000);
}
.membership-tiers-section__tab--active,
.membership-comparison-section__tab--active {
  background: var(--Navy-Blue-600);
  color: var(--Navy-Blue-100);
}

@media (min-width: 768px) {
  .membership-tiers-section__tab,
  .membership-comparison-section__tab,
  .membership-tiers-section__tab--active,
  .membership-comparison-section__tab--active {
    width: 159px;
    height: 65px;
    font-size: 2.45rem;
    border-radius: 15px;
  }
}

@media (min-width: 1200px) {
  .membership-tiers-section__tab,
  .membership-comparison-section__tab,
  .membership-tiers-section__tab--active,
  .membership-comparison-section__tab--active {
    /* Calculated: 141px content + 31px padding + 2px border */
    width: 174px;
    height: 85.412px;

    padding: 0 15.5px;
    font-size: 2.8rem;
    border-radius: 15px; /* Kept same as 768px based on your snippet */
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__tab,
  .membership-comparison-section__tab,
  .membership-tiers-section__tab--active,
  .membership-comparison-section__tab--active {
    /* Calculated: 168px content + 31px padding + 2px border */
    width: 201px;
    height: 85.412px;

    padding: 0 15.529px;
    font-size: 3.5rem; /* Or 34px, adjusted to match your snippet */
    border-radius: 20px;
  }
}

/* 4.3 Panels Container */
.membership-tiers-section__panels {
  width: 260px;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .membership-tiers-section__panels {
    width: 100%;
  }
}

.membership-tiers-section__panel {
  display: none !important;
}

.membership-tiers-section__panel--active {
  display: flex !important;
  flex-direction: column;
}

/* 4.4 Tier Cards: Layout & Structure */
.membership-tiers-section__panel .tier-card {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: 4rem auto;
  background: var(--Navy-Blue-100);
}
@media (min-width: 576px) {
  .membership-tiers-section__panel .tier-card {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card {
    width: 1020px;
    display: flex;
    flex-direction: row;
    margin: 4rem auto;
    border-radius: 15px;
    backdrop-filter: blur(7.263422012329102px);
    overflow: hidden;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card {
    width: 1500px;
  }
}

/* 4.5 Tier Cards: Highlights & Titles */
.membership-tiers-section__panel .tier-card__highlights {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid var(--Navy-Blue-1000);
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__highlights {
    width: 500px;
    display: flex;
    flex-direction: column;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid var(--Navy-Blue-1000);
    overflow: hidden;
  }
}

@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__highlights {
    width: 550px;
  }
}
.membership-tiers-section__panel .tier-card__title {
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Barlow", sans-serif !important;
  font-size: 2.5rem !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
  letter-spacing: 1.7px;
  margin: 1rem 0 4rem 0;
}
@media (min-width: 768px) {
  .membership-tiers-section__panel .tier-card__title {
    font-size: 2.925rem !important;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__title {
    font-size: 3.35rem !important;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__title {
    font-size: 4.175rem !important;
  }
}

.tier-card:not(:first-child) .tier-card__title {
  margin-top: 4rem;
}

.membership-tiers-section__panel .sg-title {
  margin: 1rem 0 0 0;
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .sg-title {
    margin: 1rem 0 3rem 0;
  }
  .membership-tiers-section__panel .tier-card__price.sg-price {
    margin: 3rem 2rem 4rem 2rem;
  }
}

/* 4.6 Tier Cards: Price & CTA */
.membership-tiers-section__panel .tier-card__price {
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-size: 5.2rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 5.2px;
  margin: 1rem auto;
}
@media (min-width: 768px) {
  .membership-tiers-section__panel .tier-card__price {
    font-size: 6.0675rem !important;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__price {
    font-size: 6.934rem !important;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__price {
    font-size: 8.667rem !important;
  }
}

.membership-tiers-section__panel .tier-card__cta {
  border-radius: 20px;
  border: 1px solid var(--Navy-Blue-1000);
  background: var(--Navy-Blue-1000);
  backdrop-filter: blur(7.263422012329102px);
  color: var(--Navy-Blue-100);
  text-align: center;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 2.1rem !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.669px;
  text-decoration: none;
  margin: 1rem 1.5rem 3rem 1.5rem;
  padding: 0.9rem;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .membership-tiers-section__panel .tier-card__cta {
    font-size: 2.45rem !important;
    padding: 1.6rem;
    margin: 1rem 5rem 3rem 5rem;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__cta {
    font-size: 2.8rem !important;
    letter-spacing: 1.7px;
    padding: 1rem 0.5rem;
    margin: 1rem 2rem 3rem 2rem;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__cta {
    font-size: 3.5rem !important;
    padding: 1.5rem 0.25rem;
    margin: 1rem 1rem 3rem 1rem;
  }
}

/* 4.7 Tier Cards: Details & Lists */
.membership-tiers-section__panel .tier-card__details {
  background-color: var(--Navy-Blue-200);
  padding-left: 1.25rem;
  width: calc(260px - 3.2rem);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* 1200px OVERRIDE */
  /* width: 100%; defined in layout section */
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) {
  .membership-tiers-section__panel .tier-card__details {
    width: calc(100% - 1.05rem);
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__details {
    padding: 2rem 2.5rem;
    width: 540px;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__details {
    /* padding: 2rem 2.5rem; */
    width: 950px;
  }
}
.membership-tiers-section__panel .tier-card__details p {
  color: var(--Navy-Blue-1000);
  font-family: "Montserrat", sans-serif !important;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.4px;
}

@media (min-width: 768px) {
  .membership-tiers-section__panel .tier-card__details p {
    font-size: 1.175rem;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__details p {
    font-size: 1.35rem;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__details p {
    font-size: 1.675rem;
  }
}

.tier-card__list {
  width: 200px;
  padding-left: 0.25rem;
}
@media (min-width: 768px) {
  .tier-card__list {
    width: 100%;
  }
}

.membership-tiers-section__panel .tier-card__list-item {
  color: var(--Navy-Blue-1000);
  font-family: "Montserrat", sans-serif !important;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.4px;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  position: relative;
  list-style: none;
}
@media (min-width: 768px) {
  .membership-tiers-section__panel .tier-card__list-item {
    font-size: 1.175rem;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__list-item {
    font-size: 1.35rem;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__list-item {
    font-size: 1.675rem;
  }
}

.membership-tiers-section__panel .tier-card__list-item::before {
  content: ".";
  position: absolute;
  left: -11px;
  top: -26px;
  font-size: 3rem;
}
@media (min-width: 768px) {
  .membership-tiers-section__panel .tier-card__list-item::before {
    left: 0px;
    top: -25px;
    font-size: 3rem;
  }
}
@media (min-width: 1200px) {
  .membership-tiers-section__panel .tier-card__list-item::before {
    top: -23px;
  }
}
@media (min-width: 1920px) {
  .membership-tiers-section__panel .tier-card__list-item::before {
    top: -21px;
  }
}
/* ============================================================ */
/* ============= 5.0 Referral Program Section ================= */
/* ============================================================ */

/* 5.1 Section Container */
.membership-referral-section {
  display: none;
  width: 1115px;
  margin: 12rem auto;
}

/* 5.2 Typography */
.membership-referral__title {
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-size: 42px !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.1px;
}

.membership-referral__subtitle {
  color: var(--Navy-Blue-1000);
  font-family: "Montserrat", sans-serif !important;
  font-size: 34px !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.7px;
}
@media (min-width: 576px) {
  .membership-referral__subtitle {
    font-size: 34px !important;
  }
}
@media (min-width: 768px) {
  .membership-referral__subtitle {
    font-size: 34px !important;
  }
}
@media (min-width: 992px) {
  .membership-referral__subtitle {
    font-size: 34px !important;
  }
}
@media (min-width: 1200px) {
  .membership-referral__subtitle {
    font-size: 34px !important;
  }
}
@media (min-width: 1920px) {
  .membership-referral__subtitle {
    font-size: 34px !important;
  }
}

/* ============================================================ */
/* ============== 6.0 Comparison Table Section ================ */
/* ============================================================ */

/* 6.1 Section Container & Disclosure */
.membership-comparison-section {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto 12rem auto;
}
.membership-comparison-section__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  list-style: none; /* Hide default arrow */
  cursor: pointer;
  margin: 0 auto 3rem auto;
  padding: 3rem auto;
  width: 100%;
}
.mobile-break {
  display: inline;
}
@media (min-width: 768px) {
  .mobile-break {
    display: none;
  }
}

.underline-text {
  display: inline-block;
  padding-bottom: 2px;
  line-height: 1.2;
  text-decoration: underline;
}
.membership-comparison-section__title {
  max-width: 100%;
  width: auto;
  margin: 0;
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-size: 2.1rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.1px;
}
@media (min-width: 768px) {
  .membership-comparison-section__title {
    font-size: 2.45rem !important;
  }
}
@media (min-width: 1200px) {
  .membership-comparison-section__title {
    font-size: 2.8rem !important;
  }
}
.comparison-chevron {
  position: static;
  transform: none;
  width: 17px;
  height: 10px;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M8.5 6.36329L15.1114 0L17 1.819L8.5 10L0 1.819L1.88859 0.00128603L8.5 6.36329Z' fill='%23192147'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
  .comparison-chevron {
    width: 24px;
    height: 14.5px;
    margin-top: 1.5rem;
  }
}

details[open] .comparison-chevron {
  transform: rotate(180deg);
}
@media (min-width: 768px) {
  details[open] .comparison-chevron {
    margin-top: 0.25rem;
  }
}
/* 6.2 Expandable Content Area */
.comparison-expandable-content {
  padding-left: 3.8%;
  padding-right: 3.8%;
  width: 299px; /* was set to 300 px but there was an ever so slight bleed through on the left margin when thecolumns were pushed to the left, 299px seems to have fixed it */
  margin: 0 auto;
}
@media (min-width: 768px) {
  .comparison-expandable-content {
    width: 640px;
  }
}
@media (min-width: 1200px) {
  .comparison-expandable-content {
    width: 1040px;
  }
}
@media (min-width: 1920px) {
  .comparison-expandable-content {
    width: 1700px;
    padding: 0;
  }
}

#comparison-panel-monthly {
  width: 100%;
  min-height: 200px;
}

/* 6.3 Grid Container & Navigation */
.membership-comparison {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border: none;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .membership-comparison {
    display: flex;
    flex-direction: column;
    overflow-x: visible; /* Disable scroll on desktop */
    height: auto;
    margin-bottom: 8rem;
  }
}
.comparison-grid {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding-left: 213px; /* 126px (Label) + 87px (Pinned Col) = 213px */
  scroll-snap-type: x mandatory; /* Force the scroll to land on the end of the row */
}
@media (min-width: 768px) {
  .comparison-grid {
    scroll-padding-left: 343px; /* 240px (Label) + 103px (Pinned Col) = 343px */
  }
}

.comparison-nav {
  position: absolute;
  top: 65px;
  left: 15px;
  z-index: 11;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .comparison-nav {
    display: none;
  }
}

.nav-btn {
  pointer-events: auto;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 6.4 Rows (Layout & Borders) */
.comparison-row {
  display: grid;
  grid-template-columns: 126px repeat(7, 87px) auto;
  width: max-content;
  background-color: transparent !important;
  border-bottom: 3px solid var(--Navy-Blue-100) !important;
}

@media (min-width: 768px) {
  .comparison-row {
    grid-template-columns: 240px repeat(7, 100px) auto;
  }
}
@media (min-width: 1200px) {
  .comparison-row {
    display: grid;
    /* 2 units for label, 1 unit each for the 7 tiers */
    grid-template-columns: 2fr repeat(7, 1fr);
    width: 100%;
  }
}

.comparison-row::after {
  content: "";
  display: block;
  width: 0.1rem;
  flex-shrink: 0; /* Ensures it doesn't get squished */
  scroll-snap-align: end; /* Optional: ensures you can scroll fully to see the gap */
}

.comparison-row:last-child {
  border-bottom: none !important;
}
.comparison-row--header,
.comparison-row--status,
.comparison-row--price {
  background-color: transparent !important;
  border: none !important;
}
.comparison-row--price {
  border-top: none !important;
  padding-top: 0;
}
/* 6.5 Cells (Sticky & Standard) */
.comparison-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Navy-Blue-200) !important;
  min-height: 109px;
  padding: 0.5rem 0.25rem;
  border-right: 3px solid var(--Neutral-Indigo-100);
  box-sizing: border-box;
  scroll-snap-align: start; /* Ensures columns lock to the left edge (after sticky) */
  color: var(--Forest-Green-500);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1.425rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.85px;
}
@media (min-width: 768px) {
  .comparison-cell {
    font-size: 1.625rem;
  }
}
@media (min-width: 1200px) {
  .comparison-cell {
    width: auto; /* Allow grid to dictate width */
    flex-shrink: 1;
    position: static; /* Remove sticky positioning */
    box-shadow: none;
    background-color: var(--Navy-Blue-100);
    font-size: 1.875rem;
  }
}
@media (min-width: 1920px) {
  .comparison-cell {
    font-size: 2.35rem;
  }
}
.comparison-cell p {
  font-size: 1rem;
  color: var(--Navy-Blue-1000);
  text-align: left;
  font-family: "Montserrat", sans-serif !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.4px;
  width: 87px;
  margin-left: 0.5rem;
}
@media (min-width: 768px) {
  .comparison-cell p {
    width: 200px;
    margin-left: 1rem;
    font-size: 1.175rem;
  }
}
@media (min-width: 1200px) {
  .comparison-cell p {
    width: 164px;
    margin: 1rem;
    font-size: 1.35rem;
  }
}
@media (min-width: 1920px) {
  .comparison-cell p {
    width: 330px;
    margin: 1rem;
    font-size: 1.675rem;
  }
}
.comparison-cell--label {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
  line-height: 1.2;
  border: none;
}
@media (min-width: 1920px) {
  .comparison-cell--label {
    font-size: 28px;
    font-weight: 400;
  }
}

/* Sticky Column Behavior */
.comparison-cell.sticky-col {
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: var(--Navy-Blue-200) !important;
  border: none;
  min-width: 126px !important;
  scroll-snap-align: none; /* The sticky column should never capture the scroll */
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
  .comparison-cell.sticky-col {
    min-width: 240px !important;
  }
}
.comparison-row--header .comparison-cell,
.comparison-row--price .comparison-cell,
.comparison-row--status .comparison-cell {
  min-height: auto; /* or 0, depending on your needs */
}

/* Second Column Sticky Behavior */
.comparison-row .comparison-cell:nth-child(2) {
  position: sticky;
  left: 126px;
  z-index: 9;
  background-color: var(--Navy-Blue-200);
  scroll-snap-align: none;
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
  .comparison-row .comparison-cell:nth-child(2) {
    left: 243px;
  }
}

/* Special Row Background Colors */
.membership-tiers-section__panel .comparison-header-group .comparison-cell {
  background-color: var(--Navy-Blue-200) !important;
}

.comparison-row--header .comparison-cell:not(.sticky-col) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 1rem;
  padding-top: 0.5rem;
  color: #192147;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.425rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.12px;
}
@media (min-width: 768px) {
  .comparison-row--header .comparison-cell:not(.sticky-col) {
    font-size: 1.625rem;
  }
}
@media (min-width: 1200px) {
  .comparison-row--header .comparison-cell:not(.sticky-col) {
    font-size: 1.875rem;
  }
}
@media (min-width: 1920px) {
  .comparison-row--header .comparison-cell:not(.sticky-col) {
    font-size: 2.35rem;
  }
}

.comparison-row--status .comparison-cell:not(.sticky-col) {
  padding: 0;
  border-bottom: 3px solid var(--Navy-Blue-100);
}
.comparison-row--header .sticky-col,
.comparison-row--status .sticky-col,
.comparison-row--price .sticky-col {
  background-color: #FBFBFC !important;
  box-shadow: none !important;
}
@media(min-width:1200px){
  .comparison-row--header .sticky-col,
.comparison-row--status .sticky-col,
.comparison-row--price .sticky-col {
  background-color: transparent !important;
}
}
.comparison-row:not(.comparison-row--header):not(.comparison-row--status):not(
    .comparison-row--price
  )
  .sticky-col {
  background-color: var(--Navy-Blue-300) !important;
  z-index: 5;
}

/* 6.6 Status Tabs (Pinned/Pin) */
.status-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  padding: 2px 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .status-tab {
    font-size: 1.4rem;
    padding: 4px 7px;
  }
}
@media (min-width: 1200px) {
  .status-tab {
    display: none;
  }
}
.status-tab.pinned {
  background-color: var(--Navy-Blue-300);
  color: var(--Navy-Blue-800);
}
.status-tab.pin {
  background-color: var(--Cantelope-300);
  color: var(--Neutral-Gray-100);
}
.status-tab.pin:hover {
  opacity: 0.9;
  cursor: pointer;
}
/* 6.7 Pricing Pills (Annually/Monthly) - NOW ANCHOR TAGS */
.price-annually,
.price-monthly {
  /* Box Model */
  display: flex; /* Changed from block to flex to center text vertically/horizontally */
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  /* Dimensions (Mobile - Fits inside 87px column) */
  width: 62px;
  height: auto; /* Allow height to be determined by padding/content */
  min-height: 30px; /* Ensure a minimum clickable area */
  padding: 4px 0;
  margin: 0 auto;

  /* Visuals */
  border-radius: 5px;
  border: 1px solid var(--Navy-Blue-1000);
  background: var(--Navy-Blue-1000);
  backdrop-filter: blur(7.2px);

  /* Typography & Link Reset */
  color: var(--Navy-Blue-100);
  text-decoration: none; /* Removes link underline */
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.7px;

  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover Effect */
.price-annually:hover,
.price-monthly:hover {
  background: var(--Navy-Blue-600); /* Slightly lighter on hover */
  border-color: var(--Navy-Blue-600);
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .price-annually,
  .price-monthly {
    font-size: 1.4rem;
    padding: 6px 0;
    width: 80px; /* Increased slightly for tablet */
  }
}

@media (min-width: 1200px) {
  .price-annually,
  .price-monthly {
    border-radius: 10px;
    padding: 8px 0;
    width: 100px; /* Fits comfortably in desktop columns */
    font-size: 1.6rem;
  }
}

@media (min-width: 1920px) {
  .price-annually,
  .price-monthly {
    padding: 12px 0;
    width: 165px;
    font-size: 2rem;
  }
}

.price-monthly {
  display: none; /* Hidden by default on load, JS toggles this to 'flex' */
}
/* 6.8 Icons */
.tier-card__icon {
  width: 27px;
  height: 20px;
  display: block;
  color: var(--Forest-Green-500);
}

@media (min-width: 1200px) {
  .tier-card__icon {
    width: 33px;
    height: 24px;
  }
}
@media (min-width: 1920px) {
  .tier-card__icon {
    width: 41px;
    height: 30px;
  }
}

.tier-card__icon use[href*="icon-x"] {
  color: #c0392b;
}

.tier-card__icon use[href*="icon-dash"] {
  color: var(--Navy-Blue-500);
}

/* 6.9 Corner Radius Fixes */
.comparison-grid .comparison-row:nth-of-type(4),
.comparison-grid .comparison-row:nth-of-type(14) {
  background-color: transparent !important;
}
.comparison-grid .comparison-row:nth-of-type(4) .sticky-col {
  border-top-left-radius: 0.5rem;
  background-color: var(--Navy-Blue-200) !important;
  box-shadow: none;
}
.comparison-grid .comparison-row:nth-of-type(14) .sticky-col {
  border-bottom-left-radius: 0.5rem;
  background-color: var(--Navy-Blue-200) !important;
  box-shadow: none;
}
.comparison-grid
  .comparison-row:nth-of-type(4)
  .comparison-cell:not(.sticky-col) {
  border-radius: 0 !important;
  background-color: var(--Navy-Blue-200) !important;
}

.comparison-grid
  .comparison-row:nth-of-type(14)
  .comparison-cell:not(.sticky-col) {
  border-radius: 0 !important;
  background-color: var(--Navy-Blue-200) !important;
}

/* ============================================================ */
/* =================== 7.0 Utilities ========================== */
/* ============================================================ */

/* 7.1 Visually Hidden */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================ */
/* =================== 8.0 Deco Shapes ======================== */
/* ============================================================ */

.page-decor-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* Critical: allows clicks to pass through to links below */
  z-index: 0; /* Sits on the base layer */
}
.hero-section,
.tier-card,
.membership-tiers-section__tabs,
.membership-comparison-section__panels,
.membership-referral-section {
  position: relative;
  z-index: 1; /* Lifts them ABOVE the shapes */
}
.deco-shape--membership-hex {
  display: block;
  mask-image: url(/assets/images/global/privacy_shield_node.svg);
  width: 348.327px;
  height: 350.907px;
  transform: rotate(5deg);
  top: 43%;
  right: -52%;
  background: rgba(95, 60, 155, 0.2);
}
@media (min-width: 576px) {
  .deco-shape--membership-hex {
    top: 44%;
    right: -24%;
  }
}
@media (min-width: 768px) {
  .deco-shape--membership-hex {
    width: 474.809px;
    height: 478.326px;
    top: 45%;
    right: -24%;
  }
}
@media (min-width: 992px) {
  .deco-shape--membership-hex {
    width: 599.854px;
    height: 604.298px;
    transform: rotate(6.129deg);
    top: 55%;
    right: -30%;
  }
}
@media (min-width: 1200px) {
  .deco-shape--membership-hex {
    width: 725.025px;
    height: 730.396px;
    top: 45%;
    right: -30%;
  }
}
@media (min-width: 1400px) {
  .deco-shape--membership-hex {
    width: 845.259px;
    height: 851.52px;
    top: 28%;
    right: -29%;
  }
}
@media (min-width: 1920px) {
  .deco-shape--membership-hex {
    width: 1159.212px;
    height: 1167.799px;
    top: 48%;
    right: -29%;
  }
}

.deco-shape--membership-square {
  display: block;
  mask-image: url(/assets/images/global/fairness_diamond_node.svg);
  width: 275px;
  height: 275px;
  top: 25%;
  left: -28%;
  border-radius: 3.122px;
  border: 0.569px solid rgba(0, 0, 0, 0.2);
  background: rgba(56, 73, 156, 0.2);
  transform: rotate(73deg);
}
@media (min-width: 576px) {
  .deco-shape--membership-square {
    width: 325px;
    height: 325px;
    top: 18%;
    left: -25%;
  }
}
@media (min-width: 768px) {
  .deco-shape--membership-square {
    width: 475px;
    height: 475px;
    top: 21%;
    left: -31%;
  }
}
@media (min-width: 992px) {
  .deco-shape--membership-square {
    width: 675px;
    height: 675px;
    top: 19.7%;
    left: -30%;
  }
}
@media (min-width: 1200px) {
  .deco-shape--membership-square {
    top: 21%;
    left: -24%;
  }
}
@media (min-width: 1400px) {
  .deco-shape--membership-square {
    top: 15%;
    left: -18%;
  }
}
@media (min-width: 1920px) {
  .deco-shape--membership-square {
    width: 849.123px;
    height: 849.123px;
    top: 19%;
    left: -9%;
  }
}

.deco-shape--membership-circle {
  display: none;
  mask-image: url(/assets/images/global/Circle.svg);
  width: 475.713px;
  height: 475.713px;
  top: 95%;
  right: -20%;
  border-radius: 648.45px;
  background: var(--Forest-Green-700);
  opacity: 70%;
}
@media (min-width: 768px) {
  .deco-shape--membership-circle {
    display: block;
    mask-image: url(/assets/images/global/Circle.svg);
    width: 475.713px;
    height: 475.713px;
    top: 97%;
    right: -20%;
    border-radius: 648.45px;
  }
}
@media (min-width: 992px) {
  .deco-shape--membership-circle {
    width: 819.225px;
    height: 819.225px;
    top: 89%;
    right: -30%;
  }
}
@media (min-width: 1200px) {
  .deco-shape--membership-circle {
    width: 990.172px;
    height: 990.172px;
    top: 88%;
    right: -38%;
  }
}
@media (min-width: 1400px) {
  .deco-shape--membership-circle {
    width: 1154.376px;
    height: 1154.376px;
    top: 85%;
    right: -38%;
  }
}
@media (min-width: 1920px) {
  .deco-shape--membership-circle {
display: none;
  }
}

.deco-shape--membership-triangle {
  display: block;
  mask-image: url(/assets/images/global/Triangle.svg);
  width: 371.488px;
  height: 405.006px;
  transform: rotate(-1.921deg);
  top: 86%;
  left: -31%;
  background: rgba(231, 171, 73, 0.7);
}
@media (min-width: 576px) {
  .deco-shape--membership-triangle {
    top: 85%;
    left: -18%;
  }
}
@media (min-width: 768px) {
  .deco-shape--membership-triangle {
    width: 506.38px;
    height: 552.069px;
    top: 79%;
    left: -16%;
  }
}
@media (min-width: 992px) {
  .deco-shape--membership-triangle {
    width: 639.74px;
    height: 697.461px;
    top: 74%;
    left: -16%;
  }
}
@media (min-width: 1200px) {
  .deco-shape--membership-triangle {
    width: 773.46px;
    height: 779.607px;
    top: 67%;
    left: -21%;
  }
}
@media (min-width: 1400px) {
  .deco-shape--membership-triangle {
    width: 901.463px;
    height: 982.798px;
    top: 65%;
    left: -17%;
  }
}
@media (min-width: 1920px) {
  .deco-shape--membership-triangle {
    width: 1236.292px;
    height: 1347.837px;
    top: 77%;
    left: -15%;
  }
}

/* Remove the white border between all cells */
/* @media (min-width: 1200px) {
  .comparison-row--status .comparison-cell:not(.sticky-col),
  .comparison-row,
  .comparison-cell {
    border-bottom: none !important;
  }
} */