/* Affiliate page — text & data forward, no hero image. */

.aff-hero { padding: 180px 0 90px; text-align: left; }
.aff-hero h1 { font-size: var(--text-4xl); line-height: 1.15; color: var(--text-primary); max-width: 780px; margin-bottom: 24px; }
.aff-hero .sub { font-size: var(--text-xl); color: var(--text-secondary); max-width: 560px; margin-bottom: 36px; }

/* SECTION 02 — THE NUMBER */
.the-number { text-align: center; background: var(--dark-surface); }
.the-number .big {
  font-family: var(--font-display); font-weight: 700; font-size: 128px; line-height: 1;
  margin: 0;
}
.the-number .lede { font-size: var(--text-xl); color: var(--text-secondary); margin: 16px 0 8px; }
.the-number .fine { color: var(--text-muted); font-size: var(--text-base); max-width: 560px; margin: 0 auto; }

/* Generic grid cards */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.who-card, .highlight-card {
  background: var(--dark-elevated); border: 1px solid var(--ash); padding: 26px;
}
.highlight-card { border: 1px solid var(--ash); border-top: 2px solid var(--gold-dim); }
.who-card .ic { font-size: 24px; }
.who-card h4, .highlight-card h4 { font-family: var(--font-display); color: var(--gold-primary);
  margin: 10px 0 8px; font-size: var(--text-lg); letter-spacing: 0.04em; }
.who-card p, .highlight-card p { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }

/* SECTION 04 — HOW IT WORKS */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; position: relative; }
.step { padding: 8px 10px; }
.step .num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); color: var(--gold-primary); }
.step h4 { font-family: var(--font-display); color: var(--text-primary); font-size: var(--text-xl); margin: 4px 0 10px; }
.step p { color: var(--text-secondary); font-size: var(--text-sm); }

/* SECTION 06 — CALCULATOR */
.calc { background: var(--dark-surface); }
.calc-box { background: var(--dark-elevated); border: 1px solid var(--ash); padding: 32px; max-width: 720px; }
.calc-row { margin-bottom: 28px; }
.calc-row label { display: flex; justify-content: space-between; color: var(--text-secondary);
  font-size: var(--text-sm); margin-bottom: 12px; }
.calc-row label b { color: var(--gold-primary); font-family: var(--font-mono); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  background: var(--ash); outline: none; border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: var(--gold-primary);
  box-shadow: 0 0 14px rgba(201,168,76,0.6); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%;
  background: var(--gold-primary); box-shadow: 0 0 14px rgba(201,168,76,0.6); cursor: pointer; }
.calc-result { border: 1px solid var(--gold-dim); background: var(--dark-base); padding: 28px; text-align: center; margin-top: 8px; }
.calc-result .eq { color: var(--text-secondary); font-size: var(--text-base); }
.calc-result .amt { font-family: var(--font-display); font-weight: 700; color: var(--gold-primary);
  font-size: var(--text-4xl); margin: 12px 0 2px; }
.calc-result .amt.small { font-size: var(--text-xl); color: var(--text-secondary); }
.calc-note { color: var(--text-muted); font-size: var(--text-xs); margin-top: 16px; }

/* SECTION 07 — CTA */
.aff-cta { text-align: center; }
.aff-cta h2 { font-size: var(--text-3xl); color: var(--text-primary); margin-bottom: 28px; }

/* SECTION 08 — FAQ */
.faq { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--ash); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--text-primary); font-family: var(--font-body); font-weight: 500; font-size: var(--text-lg);
  padding: 22px 40px 22px 0; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--gold-primary); font-size: 24px; transition: transform .25s ease; }
.faq-item.open .faq-q::after { content: "\2212"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--text-secondary); font-size: var(--text-base); }
.faq-a p { margin: 0 0 20px; }

@media (max-width: 900px) {
  .grid-3, .steps { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .aff-hero { padding: 140px 0 64px; }
  .aff-hero h1 { font-size: var(--text-3xl); }
  .the-number .big { font-size: 84px; }
}