/* =========================================================
   EARNINGS / COMMISSION PLAN — self-contained section
   ========================================================= */
.earn{
  scroll-margin-top:96px;
  --e-dark:#100f0d;
  --e-dark-2:#191712;
  --e-card:#181613;
  --e-gold:#e8ab1c;
  --e-gold-2:#f5c141;
  --e-gold-deep:#c98d09;
  --e-cream:#f4efe6;
  --e-cream-2:#efe9dc;
  --e-panel:#fbf8f2;
  --e-panel-2:#ffffff;
  --e-ink:#141311;
  --e-body:#4d4437;
  --e-serif:"Playfair Display",Georgia,serif;
  --e-script:"Dancing Script","Segoe Script",cursive;
  --e-sans:"Poppins","Segoe UI",system-ui,sans-serif;
  --e-maxw:1560px;

  position:relative;
  isolation:isolate;
  font-family:var(--e-sans);
}

/* =========================================================
   A. DARK BENEFITS BAND
   ========================================================= */
.earn-band{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(232,171,28,.07), transparent 70%),
    linear-gradient(180deg,#131210 0%,var(--e-dark) 55%,#0c0b09 100%);
  padding:44px 0 46px;
}
.earn-band__decor{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.earn-const{ position:absolute; top:50%; width:420px; height:476px; transform:translateY(-50%); opacity:.9; }
.earn-const--l{ left:-92px; }
.earn-const--r{ right:-92px; }

.earn-band__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--e-maxw); margin:0 auto;
  padding:0 clamp(24px,4vw,72px);
}

/* headline */
.earn-band__title{
  margin:0 0 34px;
  text-align:center;
  font-family:var(--e-serif); font-weight:600;
  font-size:clamp(26px,2.55vw,40px); line-height:1.15; letter-spacing:.1px;
  color:#fff;
}
.earn-band__script{
  position:relative;
  display:inline-block;
  margin-left:.22em;
  font-family:var(--e-script); font-weight:700;
  font-size:1.14em; line-height:1;
  color:var(--e-gold-2);
  transform:translateY(.04em);
}
.earn-band__swoosh{ position:absolute; left:6%; bottom:-.34em; width:92%; height:auto; }

/* stat row */
.earn-stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:start;
}
.earn-stat{
  position:relative;
  padding:0 clamp(14px,1.8vw,32px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.earn-stat + .earn-stat::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(224,164,24,.34) 22%,rgba(224,164,24,.34) 78%,transparent);
}

/* gold ring icon */
.earn-ring{
  display:grid; place-items:center;
  width:70px; height:70px; margin-bottom:16px;
  border-radius:50%;
  color:var(--e-gold);
  border:1.8px solid rgba(232,171,28,.85);
  background:radial-gradient(circle at 50% 45%, rgba(232,171,28,.16), rgba(232,171,28,.03) 70%);
  box-shadow:0 0 18px rgba(232,171,28,.30), inset 0 0 14px rgba(232,171,28,.16);
}

/* hero stat (90%) */
.earn-stat__kicker{
  margin:0; font-weight:600; font-size:.86rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff;
}
.earn-stat__big{
  margin:2px 0 4px;
  font-family:var(--e-serif); font-weight:700;
  font-size:clamp(38px,3.4vw,52px); line-height:1; letter-spacing:-.5px;
  color:var(--e-gold-2);
}
.earn-stat__sub{
  margin:0; font-weight:600; font-size:.92rem; line-height:1.42; color:#fff;
}

/* standard stats */
.earn-stat__head{
  margin:0 0 8px;
  font-weight:600; font-size:clamp(15px,1.16vw,18px); line-height:1.32;
  color:#fff; text-wrap:balance;
}
.earn-stat__head span{ color:var(--e-gold-2); }
.earn-stat__copy{
  margin:0; font-weight:300; font-size:clamp(13px,.96vw,15px); line-height:1.5;
  color:#ddd5c6; max-width:222px;
  text-wrap:balance;
}
.earn-stat__copy--wide{ max-width:250px; }

/* =========================================================
   B. CREAM COMMISSION PLAN
   ========================================================= */
.earn-plan{
  position:relative;
  background-color:var(--e-cream);
  background-image:url("../images/earn-plan-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:46px 0 44px;
}
.earn-plan__inner{
  width:100%; max-width:var(--e-maxw); margin:0 auto;
  padding:0 clamp(24px,4vw,72px);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr) minmax(0,.78fr);
  gap:clamp(20px,2.2vw,34px);
  align-items:start;
}

/* ---------- COL 1 — tiers ---------- */
.earn-tiers{ min-width:0; padding-top:4px; }
.earn-tiers__title{
  margin:0 0 6px;
  font-family:var(--e-serif); font-weight:700;
  font-size:clamp(30px,2.75vw,44px); line-height:1.05; letter-spacing:-.6px;
  color:var(--e-ink);
}
.earn-tiers__title span{ color:var(--e-gold-deep); }
.earn-tiers__script{
  position:relative; display:inline-block;
  margin:0 0 26px; padding-bottom:9px;
  font-family:var(--e-script); font-weight:700;
  font-size:clamp(20px,1.62vw,26px); line-height:1;
  color:var(--e-ink);
}
.earn-tiers__script svg{ position:absolute; left:2%; bottom:0; width:96%; height:auto; }

/* tier bars */
.earn-tier-list{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:14px; }
.earn-tier{
  position:relative;
  display:grid;
  grid-template-columns:minmax(104px,.62fr) minmax(0,.86fr) minmax(0,1.14fr);
  align-items:stretch;
  min-height:88px;
  border-radius:11px;
  overflow:hidden;
  background:var(--e-panel);
  box-shadow:0 2px 0 rgba(201,141,9,.55), 0 8px 20px rgba(20,19,17,.09);
}
/* slanted colored chip */
.earn-tier__chip{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:0 clamp(18px,2vw,30px);
  font-weight:700; font-size:clamp(14px,1.06vw,17px); letter-spacing:.09em;
  text-transform:uppercase; color:#fff;
  background:#1c1a17;
  clip-path:polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
  margin-right:-30px;
  z-index:2;
}
.earn-tier__chip svg{ color:var(--e-gold-2); flex:none; }
.earn-tier--gold .earn-tier__chip{
  background:linear-gradient(135deg,var(--e-gold-2) 0%,var(--e-gold) 55%,var(--e-gold-deep) 100%);
  color:#fff;
}
.earn-tier--gold .earn-tier__chip svg{ color:#fff; }

/* percentage block */
.earn-tier__pct{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 10px 12px 34px;
  background:linear-gradient(100deg, #eee7d9 0%, var(--e-panel) 46%);
  z-index:1;
}
.earn-tier__pct b{
  display:block;
  font-family:var(--e-serif); font-weight:700;
  font-size:clamp(32px,2.85vw,44px); line-height:1; letter-spacing:-1px;
  color:var(--e-ink);
}
.earn-tier__pct b i{ font-style:normal; font-size:.62em; margin-left:.06em; }
.earn-tier__pct em{
  font-style:normal; font-weight:700;
  font-size:clamp(12px,.98vw,15px); letter-spacing:.1em; text-transform:uppercase;
  color:var(--e-gold-deep); margin-top:3px;
}
.earn-tier--top .earn-tier__pct b{ color:var(--e-gold-deep); }

/* note block */
.earn-tier__note{
  display:grid; align-content:center;
  padding:12px clamp(16px,1.7vw,26px);
  font-weight:400; font-size:clamp(13px,1.02vw,16px); line-height:1.45;
  color:var(--e-body); text-wrap:balance;
  background:var(--e-panel-2);
  border-left:1px solid rgba(20,19,17,.07);
}
.earn-tier__note strong{ font-weight:600; color:var(--e-ink); }

/* unlimited line */
.earn-tiers__plus{
  display:flex; align-items:center; gap:14px;
  margin:0 0 20px;
  font-weight:600; font-size:clamp(14px,1.08vw,17px); color:var(--e-ink);
}
.earn-tiers__inf{ color:var(--e-gold-deep); flex:none; display:grid; place-items:center; }

/* CTA */
.earn-tiers__cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:12px 12px 12px 28px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--e-gold-2) 0%,var(--e-gold) 52%,var(--e-gold-deep) 100%);
  color:#1a1713; font-weight:600; font-size:clamp(14px,1.06vw,16px);
  box-shadow:0 8px 20px rgba(201,141,9,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.earn-tiers__cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(201,141,9,.36); }
.earn-tiers__cta-arrow{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:#17140f; color:var(--e-gold-2); flex:none;
}

/* ---------- COL 2 — three ways to earn ---------- */
.earn-ways{
  min-width:0;
  background:linear-gradient(180deg,#1b1915 0%,var(--e-card) 40%,#121110 100%);
  border:1px solid rgba(232,171,28,.16);
  border-radius:15px;
  padding:26px clamp(20px,2vw,30px) 22px;
  box-shadow:0 16px 38px rgba(20,19,17,.18);
}
.earn-ways__title{
  position:relative;
  margin:0 0 26px; padding-bottom:12px;
  text-align:center;
  font-family:var(--e-serif); font-weight:600;
  font-size:clamp(23px,1.95vw,31px); line-height:1;
  color:#fff;
}
.earn-ways__num{
  font-family:var(--e-script); font-weight:700;
  font-size:1.22em; color:var(--e-gold-2); margin-right:.08em;
}
.earn-ways__swoosh{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:62%; max-width:200px; height:auto; }

.earn-ways__list{ list-style:none; margin:0 0 18px; padding:0; }
.earn-way{
  display:grid; grid-template-columns:auto auto minmax(0,1fr);
  align-items:center; gap:clamp(12px,1.2vw,18px);
  padding:18px 4px;
  border-top:1px solid rgba(255,255,255,.07);
}
.earn-way:first-child{ border-top:none; padding-top:6px; }
.earn-way:last-child{ padding-bottom:8px; }
.earn-way__num{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(140deg,var(--e-gold-2),var(--e-gold-deep));
  color:#17140f;
  font-family:var(--e-serif); font-weight:700; font-size:20px; line-height:1;
  flex:none;
}
.earn-way__icon{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  border:1.6px solid rgba(232,171,28,.7);
  color:var(--e-gold);
  background:radial-gradient(circle at 50% 45%, rgba(232,171,28,.12), transparent 72%);
  flex:none;
}
.earn-way__body{
  min-width:0;
  font-weight:300; font-size:clamp(12.5px,.95vw,14.5px); line-height:1.5;
  color:#ddd5c6;
}
.earn-way__body strong{
  display:block; margin-bottom:3px;
  font-family:var(--e-sans); font-weight:600;
  font-size:clamp(14px,1.1vw,17px); line-height:1.25;
  color:var(--e-gold-2);
}
.earn-ways__foot{
  margin:0; text-align:center;
  font-family:var(--e-script); font-weight:700;
  font-size:clamp(17px,1.42vw,23px); line-height:1.15;
  color:var(--e-gold-2);
}

/* ---------- COL 3 — photos ---------- */
.earn-photos{ min-width:0; display:grid; gap:clamp(8px,.85vw,13px); }
.earn-photo{
  position:relative; margin:0;
  border-radius:11px; overflow:hidden;
  border:1.4px solid rgba(232,171,28,.55);
  box-shadow:0 10px 26px rgba(20,19,17,.16);
}
.earn-photo img{
  width:100%; height:100%;
  aspect-ratio:16/7.4;
  object-fit:cover; object-position:center;
  display:block;
  transition:transform .55s ease;
}
.earn-photo:hover img{ transform:scale(1.05); }
.earn-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(12,11,9,.34) 62%,rgba(12,11,9,.76) 100%);
  pointer-events:none;
}
.earn-photo figcaption{
  position:absolute; left:clamp(14px,1.5vw,22px); bottom:clamp(10px,1.1vw,16px);
  z-index:2; display:flex; flex-direction:column; line-height:1.1;
}
.earn-photo__t{
  font-weight:600; font-size:clamp(14px,1.12vw,17px); color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.earn-photo__s{
  font-family:var(--e-script); font-weight:700;
  font-size:clamp(16px,1.32vw,21px); color:var(--e-gold-2);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* =========================================================
   C. VALUE STRIP
   ========================================================= */
.earn-strip{
  width:100%; max-width:calc(var(--e-maxw) - 200px); margin:clamp(26px,2.6vw,40px) auto 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  background:var(--e-panel);
  border-radius:16px;
  padding:16px clamp(14px,1.6vw,26px);
  box-shadow:0 10px 28px rgba(20,19,17,.08);
}
.earn-strip__item{
  position:relative;
  display:flex; align-items:center; gap:clamp(12px,1.2vw,18px);
  padding:4px clamp(12px,1.5vw,24px);
}
.earn-strip__item + .earn-strip__item::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:rgba(20,19,17,.13);
}
.earn-strip__icon{ color:var(--e-gold-deep); flex:none; display:grid; place-items:center; }
.earn-strip__text{
  margin:0; font-weight:400; font-size:clamp(13px,1vw,15.5px); line-height:1.4;
  color:var(--e-ink);
}
.earn-strip__text--lead{
  font-family:var(--e-sans); font-weight:700;
  font-size:clamp(16px,1.35vw,21px); line-height:1.22; letter-spacing:-.2px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1240px){
  .earn-plan__inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .earn-photos{ grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .earn-photo img{ aspect-ratio:16/10; }
  .earn-strip{ max-width:100%; }
}
@media (max-width:1080px){
  .earn-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:34px; }
  .earn-stat + .earn-stat::before{ display:none; }
  .earn-stat{ padding:0 14px; }
}
@media (max-width:900px){
  .earn-plan__inner{ grid-template-columns:minmax(0,1fr); }
  .earn-photos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .earn-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px; }
  .earn-strip__item:nth-child(odd)::before{ display:none; }
}
@media (max-width:720px){
  .earn-band{ padding:34px 0 36px; }
  .earn-const{ display:none; }
  .earn-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; }
  .earn-stat--hero{ grid-column:1 / -1; }
  .earn-tier{ grid-template-columns:minmax(104px,.9fr) minmax(0,1fr); grid-template-rows:auto auto; min-height:0; }
  .earn-tier__note{ grid-column:1 / -1; border-left:none; border-top:1px solid rgba(20,19,17,.07); }
  .earn-tier__chip{ clip-path:polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); margin-right:-20px; }
  .earn-tier__pct{ padding-left:26px; }
  .earn-photos{ grid-template-columns:minmax(0,1fr); }
  .earn-photo img{ aspect-ratio:16/7.6; }
}
@media (max-width:520px){
  .earn-stats{ grid-template-columns:minmax(0,1fr); row-gap:28px; }
  .earn-strip{ grid-template-columns:minmax(0,1fr); }
  .earn-strip__item::before{ display:none !important; }
  .earn-band__title{ font-size:24px; }
  .earn-way{ grid-template-columns:auto minmax(0,1fr); row-gap:8px; }
  .earn-way__icon{ display:none; }
}