/* =========================================================
   BENEFITS PAGE
   ========================================================= */

.benefits-page{
  background:#f4f1eb;
}

.benefits-page .benefits-hero{
  height:620px !important;
  min-height:620px !important;
}

.benefits-page .benefits-hero .hero-grid{
  height:620px !important;
  min-height:620px !important;
}

.benefits-page .benefits-hero-copy{
  max-width:610px !important;
  padding-top:120px !important;
  padding-bottom:54px !important;
  justify-content:center !important;
}

.benefits-page .benefits-hero-copy h1{
  max-width:610px !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:54px !important;
  line-height:.98 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:uppercase !important;
}

.benefits-page .benefits-hero-copy h1 span{
  color:#e89a20 !important;
}

.benefits-title-rule{
  width:105px;
  height:2px;
  margin:18px 0 20px;
  background:#d88a12;
}

.benefits-page .benefits-hero-copy .hero-lead{
  max-width:590px !important;
  font-size:17px !important;
  line-height:1.65 !important;
}

.benefits-page .benefits-seat-card{
  top:auto !important;
  bottom:54px !important;
  width:270px !important;
}

.benefits-page .benefits-seat-card > span{
  color:#fff !important;
  font-size:12px !important;
}

.benefits-page .benefits-seat-card strong{
  font-size:64px !important;
}

.benefits-page .benefits-seat-card p{
  text-transform:none !important;
  font-size:10px !important;
}

.benefits-intro{
  padding:42px 0 28px;
}

.benefits-section-heading{
  display:grid;
  grid-template-columns:80px auto 80px;
  gap:20px;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.benefits-section-heading h2{
  margin:0;
  text-transform:uppercase;
  font-size:25px;
  letter-spacing:.05em;
}

.heading-line{
  height:1px;
  background:#cf8a22;
}

.benefits-subhead{
  text-align:center;
  margin:8px 0 24px;
  color:#313841;
  font-size:14px;
}

.wealth-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid #d8d0c4;
  border-radius:10px;
  overflow:hidden;
  background:#f7f5f1;
}

.wealth-card{
  min-height:340px;
  padding:20px 26px 18px;
  border-right:1px solid #d8d0c4;
  border-bottom:1px solid #d8d0c4;
  display:flex;
  flex-direction:column;
}

.wealth-card:nth-child(3n){
  border-right:0;
}

.wealth-card:nth-child(n+4){
  border-bottom:0;
}

.wealth-top{
  min-height:58px;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.wealth-number{
  width:46px;
  height:46px;
  border-radius:50%;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border:2px solid #cb8517;
  background:#071521;
  color:#e7a030;
  font-size:24px;
  font-weight:800;
}

.wealth-top h3{
  margin:4px 0 0;
  font-size:18px;
  line-height:1.18;
  text-transform:uppercase;
}

.wealth-rule{
  width:74%;
  height:1px;
  background:#c98a28;
  margin:10px 0 18px 68px;
}

.wealth-body{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:16px;
  align-items:center;
}

.wealth-icon{
  width:58px;
  height:58px;
  color:#bf8429;
}

.wealth-body p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:#2d333a;
}

.wealth-metric{
  margin-top:auto;
  min-height:66px;
  border-radius:8px;
  background:#071521;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 12px;
}

.wealth-metric strong{
  color:#d9932a;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  line-height:1;
}

.wealth-metric span{
  margin-top:5px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.pathway-section{
  padding:22px 0;
  background:#071521;
  color:#fff;
}

.pathway-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:36px;
  align-items:center;
}

.pathway-copy{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:24px;
  align-items:center;
}

.pathway-chart-icon{
  width:82px;
  height:82px;
  color:#d98e1d;
}

.pathway-copy h2{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  line-height:1.08;
  text-transform:uppercase;
}

.pathway-copy h2 span{
  color:#d99832;
}

.pathway-copy p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,.88);
}

.pathway-steps{
  display:grid;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;
  gap:4px;
  align-items:center;
}

.pathway-steps article{
  text-align:center;
}

.pathway-icon{
  width:62px;
  height:62px;
  margin:0 auto 8px;
  padding:12px;
  display:grid;
  place-items:center;
  color:#d89122;
  border:1px solid #d89122;
  border-radius:50%;
}

.pathway-steps strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
}

.pathway-steps p{
  margin:2px 0 0;
  font-size:10px;
  color:rgba(255,255,255,.85);
}

.path-arrow{
  text-align:center;
  color:#d89122;
  font-size:26px;
}

.benefit-strip{
  padding:20px 0;
}

.benefit-strip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

/* Why 10K keeps its original five-column benefit strip. */
.why10k-benefit-strip .benefit-strip-grid{
  grid-template-columns:repeat(5,1fr);
}

.benefit-strip-grid article{
  min-width:0;
  display:flex;
  gap:12px;
  padding:10px 18px;
  border-right:1px solid #d6cfc4;
}

.benefit-strip-grid article:last-child{
  border-right:0;
}

.benefit-strip-grid .strip-icon{
  width:40px;
  height:40px;
}

.benefit-strip-grid strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  margin-bottom:3px;
}

.benefit-strip-grid p{
  margin:0;
  font-size:9px;
  line-height:1.35;
  color:#373d43;
}

.benefits-prefooter .prefooter-grid{
  grid-template-columns:75px 1fr auto !important;
}

.benefits-prefooter-seat{
  justify-self:end;
  display:grid;
  justify-items:center;
  gap:4px;
}

.benefits-prefooter-seat .btn{
  min-width:205px;
}

.benefits-prefooter-seat small{
  text-transform:uppercase;
  font-size:10px;
  font-weight:800;
}

.benefits-prefooter-seat p{
  margin:0;
  font-size:9px;
  color:rgba(255,255,255,.8);
}

/* Ensure nav remains a pure hero overlay on this page too */
.benefits-page .benefits-hero > .site-header{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:100 !important;
}

.benefits-page .benefits-hero > .site-header .nav-wrap,
.benefits-page .benefits-hero > .site-header .main-nav,
.benefits-page .benefits-hero > .site-header .nav-cta,
.benefits-page .benefits-hero > .site-header .brand{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
}

@media(max-width:1000px){
  .wealth-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .wealth-card,
  .wealth-card:nth-child(3n){
    border-right:1px solid #d8d0c4;
    border-bottom:1px solid #d8d0c4;
  }

  .wealth-card:nth-child(2n){
    border-right:0;
  }

  .wealth-card:nth-last-child(-n+2){
    border-bottom:0;
  }

  .pathway-grid{
    grid-template-columns:1fr;
  }

  .benefit-strip-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .benefit-strip-grid article{
    border-bottom:1px solid #d6cfc4;
  }

  .benefit-strip-grid article:nth-child(2n){
    border-right:0;
  }
}

@media(min-width:1001px){
  .why10k-benefit-strip .benefit-strip-grid{
    grid-template-columns:repeat(5,1fr);
  }
}

@media(max-width:860px){
  .benefits-page .benefits-hero{
    min-height:760px !important;
    height:auto !important;
  }

  .benefits-page .benefits-hero .hero-grid{
    min-height:760px !important;
    height:auto !important;
  }

  .benefits-page .benefits-hero-copy{
    padding-top:110px !important;
    padding-bottom:30px !important;
  }

  .benefits-page .benefits-hero-copy h1{
    font-size:46px !important;
  }

  .benefits-page .benefits-seat-card{
    top:30px !important;
    bottom:auto !important;
  }
}

@media(max-width:680px){
  .wealth-grid{
    grid-template-columns:1fr;
  }

  .wealth-card,
  .wealth-card:nth-child(2n),
  .wealth-card:nth-child(3n),
  .wealth-card:nth-last-child(-n+2){
    border-right:0;
    border-bottom:1px solid #d8d0c4;
  }

  .wealth-card:last-child{
    border-bottom:0;
  }

  .benefits-section-heading{
    grid-template-columns:35px auto 35px;
    gap:10px;
  }

  .benefits-section-heading h2{
    font-size:20px;
  }

  .pathway-copy{
    grid-template-columns:1fr;
    text-align:center;
  }

  .pathway-chart-icon{
    margin:auto;
  }

  .pathway-steps{
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .path-arrow{
    display:none;
  }

  .benefit-strip-grid{
    grid-template-columns:1fr;
  }

  .benefit-strip-grid article{
    border-right:0;
  }

  .benefits-prefooter .prefooter-grid{
    grid-template-columns:62px 1fr !important;
  }

  .benefits-prefooter-seat{
    grid-column:1/-1;
    justify-self:stretch;
    padding-bottom:14px;
  }

  .benefits-prefooter-seat .btn{
    width:100%;
  }
}


/* =========================================================
   BENEFITS HERO CLEANUP ONLY
   First page is intentionally untouched.
   ========================================================= */

/* The lower caption + icon row were intentionally removed from benefits.html. */

/* The membership card is aligned by the benefits-page-only script so its
   bottom border matches the bottom of the hero description exactly. */
.benefits-page .hero#overview .seat-card{
  right:0 !important;
}

/* Preserve the existing mobile placement. */
@media (max-width:860px){
  .benefits-page .hero#overview .seat-card{
    top:30px !important;
    bottom:auto !important;
    right:10px !important;
  }
}

@media (max-width:620px){
  .benefits-page .hero#overview .seat-card{
    top:74px !important;
    bottom:auto !important;
    right:10px !important;
  }
}


/* =========================================================
   BENEFITS HERO SPACING ONLY
   Reduce the hero to 50px spacing below the navbar and
   50px at the bottom. First page remains untouched.
   ========================================================= */
.benefits-page .hero#overview{
  height:auto !important;
  min-height:0 !important;
}

.benefits-page .hero#overview .hero-grid{
  height:auto !important;
  min-height:0 !important;
  padding-top:132px !important;   /* 82px navbar + 50px gap */
  padding-bottom:50px !important;
}

.benefits-page .hero#overview .hero-copy{
  padding-top:0 !important;
  padding-bottom:0 !important;
  align-self:center !important;
}

.benefits-page .hero#overview .hero-visual{
  min-height:0 !important;
}

/* Keep mobile spacing clean */
@media (max-width:860px){
  .benefits-page .hero#overview .hero-grid{
    padding-top:118px !important; /* 68px mobile navbar + 50px */
    padding-bottom:50px !important;
  }
}


/* =========================================================
   BENEFITS GRID — SEPARATE CARDS
   Benefits page only. Each of the six benefit items is now
   its own individual card instead of one shared grid box.
   ========================================================= */

.benefits-page .wealth-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:18px !important;

  /* Remove the single outer container treatment */
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
}

/* Each benefit is now its own card */
.benefits-page .wealth-card,
.benefits-page .wealth-card:nth-child(2n),
.benefits-page .wealth-card:nth-child(3n),
.benefits-page .wealth-card:nth-child(n+4),
.benefits-page .wealth-card:nth-last-child(-n+2){
  min-height:340px !important;
  padding:22px 26px 20px !important;

  background:#f8f6f2 !important;
  border:1px solid #d8d0c4 !important;
  border-radius:10px !important;

  box-shadow:0 5px 16px rgba(23,31,40,.045) !important;

  display:flex !important;
  flex-direction:column !important;
}

/* Preserve the dark metric bar at the bottom */
.benefits-page .wealth-card .wealth-metric{
  margin-top:auto !important;
  width:100% !important;
}

/* Responsive card layout */
@media (max-width:1000px){
  .benefits-page .wealth-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .benefits-page .wealth-card,
  .benefits-page .wealth-card:nth-child(2n),
  .benefits-page .wealth-card:nth-child(3n),
  .benefits-page .wealth-card:nth-child(n+4),
  .benefits-page .wealth-card:nth-last-child(-n+2){
    border:1px solid #d8d0c4 !important;
  }
}

@media (max-width:680px){
  .benefits-page .wealth-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .benefits-page .wealth-card,
  .benefits-page .wealth-card:nth-child(2n),
  .benefits-page .wealth-card:nth-child(3n),
  .benefits-page .wealth-card:nth-child(n+4),
  .benefits-page .wealth-card:nth-last-child(-n+2){
    border:1px solid #d8d0c4 !important;
  }
}


/* =========================================================
   BENEFIT CARD SPACING — tighter metric bar placement
   Benefits page only.
   ========================================================= */
.benefits-page .wealth-card{
  min-height:0 !important;
}

/* Move the dark metric bar closer to the body copy */
.benefits-page .wealth-card .wealth-metric{
  margin-top:22px !important;
}

/* Keep the icon/text area compact and consistent */
.benefits-page .wealth-body{
  margin-bottom:0 !important;
}


/* =========================================================
   BENEFIT CARDS — EQUAL HEIGHT + BOTTOM-ALIGNED METRIC BARS
   Benefits page only.
   ========================================================= */

/* Make both grid rows the same height and stretch every card */
.benefits-page .wealth-grid{
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
}

.benefits-page .wealth-card{
  height:100% !important;
  min-height:340px !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Content stays natural while the metric bar is pinned to the bottom */
.benefits-page .wealth-card .wealth-body{
  flex:0 0 auto !important;
}

.benefits-page .wealth-card .wealth-metric{
  margin-top:auto !important;
  flex:0 0 auto !important;
}

/* Preserve equal-height behavior at responsive breakpoints */
@media (max-width:1000px){
  .benefits-page .wealth-grid{
    grid-auto-rows:1fr !important;
    align-items:stretch !important;
  }

  .benefits-page .wealth-card{
    height:100% !important;
  }
}

@media (max-width:680px){
  .benefits-page .wealth-grid{
    grid-auto-rows:auto !important;
  }

  .benefits-page .wealth-card{
    height:auto !important;
    min-height:0 !important;
  }

  .benefits-page .wealth-card .wealth-metric{
    margin-top:22px !important;
  }
}


/* =========================================================
   BENEFIT CARDS — EQUAL HEIGHT, TIGHTER OVERALL HEIGHT
   Benefits page only.
   ========================================================= */

/* Let the tallest card content determine the shared card height
   instead of forcing a large minimum height. */
.benefits-page .wealth-grid{
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
}

.benefits-page .wealth-card{
  min-height:0 !important;
  height:100% !important;
}

/* Keep all metric bars aligned at the bottom */
.benefits-page .wealth-card .wealth-metric{
  margin-top:auto !important;
}

/* Slightly reduce internal vertical padding without changing the design */
.benefits-page .wealth-card{
  padding-top:20px !important;
  padding-bottom:18px !important;
}


/* =========================================================
   BENEFIT CARDS — METRIC BARS CLOSER TO TEXT
   Keep all cards equal height and all metric bars aligned.
   Extra vertical room is shifted ABOVE the description instead
   of between the description and the metric bar.
   Benefits page only.
   ========================================================= */

.benefits-page .wealth-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
}

/* The body area absorbs any extra height, but its actual icon/text
   content sits at the bottom of that area so it stays close to the bar. */
.benefits-page .wealth-card .wealth-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  align-content:end !important;
  margin-bottom:12px !important;
}

/* Keep the metric bars perfectly aligned at the bottom,
   but remove the large auto-margin gap directly above them. */
.benefits-page .wealth-card .wealth-metric{
  flex:0 0 auto !important;
  margin-top:0 !important;
}

/* Tighten the divider-to-content spacing slightly */
.benefits-page .wealth-card .wealth-rule{
  margin-bottom:12px !important;
}

/* Slightly tighter card padding to reduce dead space overall */
.benefits-page .wealth-card{
  padding-top:18px !important;
  padding-bottom:16px !important;
}

/* Keep equal-height behavior on desktop/tablet */
.benefits-page .wealth-grid{
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
}

@media (max-width:680px){
  /* Let mobile cards size naturally */
  .benefits-page .wealth-card{
    height:auto !important;
  }

  .benefits-page .wealth-card .wealth-body{
    flex:0 0 auto !important;
    margin-bottom:12px !important;
  }
}


/* =========================================================
   BENEFIT CARDS — DESCRIPTION BACK TO TOP + 20PX BAR GAP
   Benefits page only.
   ========================================================= */

/* Keep all cards equal height */
.benefits-page .wealth-grid{
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
}

.benefits-page .wealth-card{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Put the icon + description back at the top naturally */
.benefits-page .wealth-card .wealth-body{
  flex:0 0 auto !important;
  align-content:start !important;
  align-items:center !important;
  margin-bottom:0 !important;
}

/* Keep only a clean 20px gap between the description and metric bar */
.benefits-page .wealth-card .wealth-metric{
  flex:0 0 auto !important;
  margin-top:20px !important;
}

/* Keep card padding compact */
.benefits-page .wealth-card{
  padding-top:18px !important;
  padding-bottom:16px !important;
}

/* Mobile cards size naturally */
@media (max-width:680px){
  .benefits-page .wealth-card{
    height:auto !important;
  }
}


/* =========================================================
   BENEFITS — EQUAL METRIC BAR HEIGHT
   Benefits page only.
   ========================================================= */
.benefits-page .wealth-card .wealth-metric{
  height:70px !important;
  min-height:70px !important;
  max-height:70px !important;
  box-sizing:border-box !important;
  flex:0 0 70px !important;
  margin-top:20px !important;
  padding:8px 12px !important;
  justify-content:center !important;
}

/* Keep labels from changing the bar height */
.benefits-page .wealth-card .wealth-metric span{
  line-height:1.2 !important;
}


/* =========================================================
   BENEFITS — FINAL EQUAL CARD HEIGHT + BOTTOM METRIC BARS
   Benefits page only.
   ========================================================= */

/* Every card in the grid gets the same height. */
.benefits-page .wealth-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
}

/* The card itself fills the entire equal-height grid cell. */
.benefits-page .wealth-card{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}

/* Keep title, divider, icon, and description naturally at the top. */
.benefits-page .wealth-card .wealth-body{
  flex:0 0 auto !important;
  align-content:start !important;
  margin-bottom:0 !important;
}

/* Push the metric/button bar to the true bottom of every equal-height card. */
.benefits-page .wealth-card .wealth-metric{
  margin-top:auto !important;
  height:70px !important;
  min-height:70px !important;
  max-height:70px !important;
  flex:0 0 70px !important;
  box-sizing:border-box !important;
}

/* Responsive equal-height grid */
@media (max-width:1000px){
  .benefits-page .wealth-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows:1fr !important;
  }
}

@media (max-width:680px){
  .benefits-page .wealth-grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
  }

  .benefits-page .wealth-card{
    height:auto !important;
  }
}


/* BENEFITS PAGE ONLY — pathway section spacing */
.benefits-page .pathway-section{
  padding:50px 0 !important;
}


/* =========================================================
   BENEFITS PAGE ONLY — center pathway arrows between icons
   ========================================================= */
.benefits-page .pathway-steps{
  align-items:start !important;
}

.benefits-page .path-arrow{
  align-self:start !important;
  margin-top:18px !important;
  line-height:26px !important;
}


/* =========================================================
   WHY 10K CLUB — SHARED SECTION HEADING TREATMENT
   Match the How It Works / Best Deals section-heading style.
   ========================================================= */
.benefits-page .benefits-section-heading{
  display:grid !important;
  grid-template-columns:minmax(45px,1fr) auto minmax(45px,1fr) !important;
  align-items:center !important;
  gap:25px !important;
  width:100% !important;
  max-width:950px !important;
  margin:0 auto !important;
  text-align:center !important;
}

.benefits-page .benefits-section-heading .heading-line{
  width:100% !important;
  height:2px !important;
  background:linear-gradient(90deg,transparent,#cf8d20) !important;
}

.benefits-page .benefits-section-heading .heading-line:last-child{
  background:linear-gradient(90deg,#cf8d20,transparent) !important;
}

.benefits-page .benefits-section-heading h2{
  margin:0 !important;
  color:#071d3e !important;
  font-size:clamp(25px,2vw,34px) !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.benefits-page .benefits-subhead{
  margin:8px auto 24px !important;
  max-width:850px !important;
  color:#25384e !important;
  text-align:center !important;
  font-size:14px !important;
}

@media (max-width:760px){
  .benefits-page .benefits-section-heading{
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    gap:10px !important;
  }

  .benefits-page .benefits-section-heading h2{
    white-space:normal !important;
    font-size:23px !important;
    line-height:1.08 !important;
  }
}


/* =========================================================
   INSIDE PAGE SECTION HEADINGS — EXACT SHARED TREATMENT
   ========================================================= */
.benefits-page .benefits-section-heading,
.how-page .how-heading-row,
.best-deals-page .deal-heading-row{
  display:grid !important;
  grid-template-columns:minmax(45px,1fr) auto minmax(45px,1fr) !important;
  align-items:center !important;
  gap:25px !important;
  width:100% !important;
  max-width:780px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.benefits-page .benefits-section-heading .heading-line,
.how-page .how-heading-row > span,
.best-deals-page .deal-heading-row > span{
  width:100% !important;
  height:2px !important;
  background:linear-gradient(90deg,transparent,#cf8d20) !important;
}

.benefits-page .benefits-section-heading .heading-line:last-child,
.how-page .how-heading-row > span:last-child,
.best-deals-page .deal-heading-row > span:last-child{
  background:linear-gradient(90deg,#cf8d20,transparent) !important;
}

.benefits-page .benefits-section-heading h2,
.how-page .how-heading h2,
.best-deals-page .deal-section-heading h2{
  margin:0 !important;
  color:#071d3e !important;
  font-size:clamp(25px,2vw,34px) !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

@media (max-width:760px){
  .benefits-page .benefits-section-heading,
  .how-page .how-heading-row,
  .best-deals-page .deal-heading-row{
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    gap:10px !important;
    max-width:100% !important;
  }

  .benefits-page .benefits-section-heading h2,
  .how-page .how-heading h2,
  .best-deals-page .deal-section-heading h2{
    white-space:normal !important;
    font-size:23px !important;
    line-height:1.08 !important;
  }
}


/* =========================================================
   INNER PAGE SECTION HEADINGS — FINAL SHARED SYSTEM
   Exact same side-line geometry and title typography.
   ========================================================= */
.benefits-page .benefits-section-heading,
.how-page .how-heading-row,
.best-deals-page .deal-heading-row{
  display:grid !important;
  grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr) !important;
  align-items:center !important;
  column-gap:28px !important;
  width:100% !important;
  max-width:1040px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.benefits-page .benefits-section-heading .heading-line,
.how-page .how-heading-row > span,
.best-deals-page .deal-heading-row > span{
  display:block !important;
  width:100% !important;
  height:2px !important;
  min-width:0 !important;
  background:linear-gradient(90deg,transparent 0%,#cf8d20 100%) !important;
}

.benefits-page .benefits-section-heading .heading-line:last-child,
.how-page .how-heading-row > span:last-child,
.best-deals-page .deal-heading-row > span:last-child{
  background:linear-gradient(90deg,#cf8d20 0%,transparent 100%) !important;
}

.benefits-page .benefits-section-heading h2,
.how-page .how-heading h2,
.best-deals-page .deal-section-heading h2{
  margin:0 !important;
  color:#071d3e !important;
  font-size:34px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.025em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* How It Works headings must remain one line on desktop. */
.how-page .how-heading-row h2{
  white-space:nowrap !important;
}

/* Let the shared line container be wide enough for the longer How It Works title. */
.how-page .how-heading{
  max-width:1180px !important;
}

@media (max-width:1000px){
  .benefits-page .benefits-section-heading,
  .how-page .how-heading-row,
  .best-deals-page .deal-heading-row{
    grid-template-columns:minmax(45px,1fr) auto minmax(45px,1fr) !important;
    column-gap:18px !important;
    max-width:100% !important;
  }

  .benefits-page .benefits-section-heading h2,
  .how-page .how-heading h2,
  .best-deals-page .deal-section-heading h2{
    font-size:28px !important;
  }
}

@media (max-width:760px){
  .benefits-page .benefits-section-heading,
  .how-page .how-heading-row,
  .best-deals-page .deal-heading-row{
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    column-gap:10px !important;
  }

  .benefits-page .benefits-section-heading h2,
  .how-page .how-heading h2,
  .best-deals-page .deal-section-heading h2{
    white-space:normal !important;
    font-size:23px !important;
    line-height:1.08 !important;
  }
}


/* =========================================================
   INNER PAGE SECTION HEADINGS — EXACT SAME SIDE-LINE LENGTH
   Why 10K Club / How It Works / Best Deals
   ========================================================= */
.benefits-page .benefits-section-heading,
.how-page .how-heading-row,
.best-deals-page .deal-heading-row{
  display:grid !important;
  grid-template-columns:100px auto 100px !important;
  align-items:center !important;
  column-gap:28px !important;
  width:max-content !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.benefits-page .benefits-section-heading .heading-line,
.how-page .how-heading-row > span,
.best-deals-page .deal-heading-row > span{
  display:block !important;
  width:100px !important;
  min-width:100px !important;
  max-width:100px !important;
  height:2px !important;
}

.benefits-page .benefits-section-heading .heading-line,
.how-page .how-heading-row > span,
.best-deals-page .deal-heading-row > span{
  background:linear-gradient(90deg,transparent 0%,#cf8d20 100%) !important;
}

.benefits-page .benefits-section-heading .heading-line:last-child,
.how-page .how-heading-row > span:last-child,
.best-deals-page .deal-heading-row > span:last-child{
  background:linear-gradient(90deg,#cf8d20 0%,transparent 100%) !important;
}

@media (max-width:760px){
  .benefits-page .benefits-section-heading,
  .how-page .how-heading-row,
  .best-deals-page .deal-heading-row{
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    width:100% !important;
    column-gap:10px !important;
  }

  .benefits-page .benefits-section-heading .heading-line,
  .how-page .how-heading-row > span,
  .best-deals-page .deal-heading-row > span{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }
}


/* Current Deals: four-column benefit strip, scoped to this page only. */
.current-deals-benefit-strip .benefit-strip-grid{
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1000px){
  .current-deals-benefit-strip .benefit-strip-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:680px){
  .current-deals-benefit-strip .benefit-strip-grid{
    grid-template-columns:1fr;
  }
}