/* ==========================================================================
   Affiliate page — Figma "11. Build Affiliate" (Desktop 1440 / Mobile 375)
   Builds on css/style.css (tokens, nav, buttons, CTA, footer, glow).
   ========================================================================== */

/* ---------- Eyebrow / section headings ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:20px;
  line-height:32px;
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:0.14em;
  text-align:center;
  margin-top: 4rem;
}
.a-head{
  font-family:var(--sans);
  font-weight:700;
  font-size:38px;
  line-height:44px;
  color:var(--text);
}
.a-head em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--yellow);
}

/* ---------- Hero (centered, warm background) ---------- */
.ahero{
  position:relative;
  background:#000 url('../assets/img/hero-bg.jpg') no-repeat top center;
  background-size:cover;
  overflow:hidden;
}
.ahero-inner{
  max-width:1048px;
  margin-inline:auto;
  padding:64px clamp(20px,5vw,40px) 60px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ahero .eyebrow{margin-bottom:20px;}
.ahero .display{font-size:63px;line-height:72px;margin-bottom:40px;}
.ahero .lead{margin-bottom:40px;max-width:1008px;}
.store-badge img{height:56px;width:auto;display:block;}

/* ---------- Stats card ---------- */
.stats-card{
  margin-top:100px;
  width:100%;
  max-width:1000px;
  background:#231207;
  border-radius:40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
}
.stat{
  padding:18px 20px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  position:relative;
}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:100px;background:#000;
}
.stat-num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:40px;
  line-height:44px;
  color:var(--yellow);
  display:inline-flex;align-items:center;gap:10px;
}
.stat-star{font-style:normal;font-size:28px;color:var(--yellow);}
.stat-label{
  font-size:24px;
  line-height:40px;
  color:var(--text);
}

/* ---------- Why join us ---------- */
.why{
  background:#000;
  position:relative;
  padding:0 0 40px;
}
.why-head{max-width:980px;margin:0 auto 60px;padding-inline:clamp(20px,6vw,var(--gutter));}
.why-head .eyebrow{margin-bottom:30px;}
.why-body{
  position:relative;
  max-width:var(--content);
  margin-inline:auto;
  padding-inline:clamp(20px,6vw,var(--gutter));
}
/* Dove is decorative — kept in the left margin, never over the text.
   Only shown on wide viewports (see min-width rule below) where the
   left gutter is large enough to hold it clear of the text column. */
.dove{display:none;}
.why-list{
  position:relative;z-index:1;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:50px;
}
.why-item{
  display:flex;
  gap:0;
  max-width:900px;
}
.why-item:nth-child(even){margin-left:158px;}
.why-num{
  flex:0 0 100px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:44px;
  line-height:44px;
  color:var(--yellow);
}
.why-text{padding-top:10px;}
.why-text .why-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:24px;
  line-height:40px;
  color:var(--yellow);
  margin:0 0 20px;
}
.why-text p{
  font-size:24px;
  line-height:40px;
  color:var(--text);
  margin:0;
}

/* Dove sits in the left margin beside points 01–02, clear of the text.
   Its right edge stays left of the text column; the black portion of the
   image blends into the black section. */
@media (min-width:1360px){
  .dove{
    display:block;
    position:absolute;
    left:0;
    top:40px;
    width:380px;
    transform:translateX(-40%);
    pointer-events:none;
    z-index:0;
  }
}

/* ---------- CTA additions (reuses shared .cta) ---------- */
.cta .eyebrow{margin-bottom:30px;}
.cta .a-head{margin-bottom:30px;}

/* ==========================================================================
   MOBILE (Figma "Affiliate Program - Mobile v2", 375px)
   ========================================================================== */
@media (max-width:760px){
  .eyebrow{font-size:16px;}
  .a-head{font-size:36px;line-height:44px;}

  /* Hero */
  .ahero{
    background:#000 url('../assets/img/vm-hero-bg.jpg') no-repeat top center;
    background-size:100% auto;
  }
  .ahero-inner{padding:40px 20px 40px;max-width:100%;}
  .ahero .eyebrow{margin-bottom:20px;}
  .ahero .display{font-size:36px;line-height:44px;margin-bottom:32px;}
  .ahero .lead{margin-bottom:32px;}

  /* Stats card → vertical stack */
  .stats-card{
    margin-top:50px;
    grid-template-columns:1fr;
    border-radius:30px;
  }
  .stat{padding:28px 20px;}
  .stat + .stat::before{
    left:50%;top:0;transform:translateX(-50%);
    width:300px;max-width:90%;height:2px;
  }

  /* Why join us → single column, no dove */
  .why{padding:0 0 20px;}
  .why-head{margin-bottom:30px;padding-inline:20px;}
  .why-head .eyebrow{margin-bottom:20px;}
  .why-body{padding-inline:20px;}
  .why-list{gap:30px;}
  .why-item{flex-direction:column;gap:0;max-width:100%;}
  .why-item:nth-child(even){margin-left:0;}
  .why-num{flex:0 0 auto;font-size:44px;line-height:1;margin-bottom:8px;}
  .why-text{padding-top:0;}
  .why-text .why-title{font-size:18px;line-height:28px;margin-bottom:20px;}
  .why-text p{font-size:18px;line-height:28px;}

  .cta-btn{width:250px;max-width:100%;}
}