:root{
  --ink:#0f1c2e; --slate:#2c4a6e; --sky:#4a90c4; --ice:#dbeeff;
  --frost:#f4f8fc; --gold:#c9924a; --rule:#d0dde8; --body:#3a4f66;
}

body.affiliateprogram-body{ background:#fff; color:var(--body); }

/* ── Nav — same pattern as .press-nav in page-press.css ────────── */
/* Sticky: the public nav stays pinned while the page scrolls, and compacts
   once scrolled (nav-shrink.js toggles `scrolled`; loaded site-wide from
   foot.php). z-index 100 matches .home-nav — above page content, below the
   fixed overlays (sticky CTA 900, exit-intent 1000, consent banner 9999).
   scroll-padding-top offsets in-page anchor jumps by the bar's measured
   height (--hv-nav-h, set by nav-shrink.js); 68px is the pre-JS fallback. */
html{ scroll-padding-top:calc(var(--hv-nav-h, 68px) + 8px); }
.affp-nav{ position:sticky; top:0; z-index:100; border-bottom:1px solid var(--rule); background:#fff; }
.affp-nav-inner{ max-width:920px; margin:0 auto; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; transition:padding .18s ease; }
.affp-nav.scrolled .affp-nav-inner{ padding-block:10px; }
.affp-brand img{ display:block; height:38px; width:auto; }
/* wrap: five items (Guides / Tools / Press / Affiliate sign in / Become an
   affiliate) overflow a 390px viewport on one row. */
.affp-nav-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.affp-nav-actions a{ font-size:13px; text-decoration:none; padding:9px 16px; letter-spacing:.02em; }
.affp-ghost{ color:var(--slate); }
.affp-ghost:hover{ color:var(--ink); }
.affp-cta{ background:var(--sky); color:#fff; font-weight:600; border-radius:2px; }
.affp-cta:hover{ background:var(--slate); }

/* ── Page wrap + typography — same conventions as .press-wrap ──── */
.affp-wrap{ max-width:880px; margin:0 auto; padding:56px 24px 0; }
.affp-wrap .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); margin-bottom:10px; }
/* Hero headline and standfirst run the full .affp-wrap measure, matching the
   video and the CTA below them. No max-width: any fixed number here would have
   to be kept in sync with .affp-wrap by hand, and the whole point is that the
   left and right edges of the hero line up. */
.affp-wrap h1{ font-family:'Playfair Display',Georgia,serif; font-size:40px; font-weight:800; color:var(--ink); line-height:1.08; letter-spacing:-.5px; margin:0; }
.affp-wrap h1 em{ color:var(--sky); font-style:normal; }
.affp-wrap .sub{ font-size:17px; color:var(--slate); margin-top:16px; }

/* Recruitment video, between the hero paragraph and the CTA.
   No max-width on purpose: app.css sets .btn-primary { width:100% }, which this
   file overrides for colour but not for width, so the CTA fills the wrap. The
   video takes the same 100% of the same containing block, which is what keeps
   the two edges aligned at every viewport without hard-coding a number that
   would drift the moment .affp-wrap changes. */
.hero-video{ display:block; width:100%; aspect-ratio:16/9; margin-top:26px;
  border:1px solid var(--rule); border-radius:3px; background:var(--ink); object-fit:contain; }

.hero-cta{ display:flex; gap:14px; margin-top:28px; align-items:center; flex-wrap:wrap; }
.btn-primary{ background:var(--ink); color:#fff; font-weight:600; font-size:15px; padding:13px 26px; text-decoration:none; border-radius:2px; display:inline-block; }
.btn-primary:hover{ background:var(--slate); }
.btn-primary.btn-alt{ background:var(--sky); }
.btn-primary.btn-alt:hover{ background:var(--slate); }
.hero-fine{ font-size:12px; color:var(--slate); }

.affp-wrap h2{ font-family:'Playfair Display',Georgia,serif; font-size:26px; font-weight:700; color:var(--ink); margin:56px 0 6px; }
.affp-wrap .h-accent{ width:34px; height:2.5px; background:var(--gold); margin-bottom:20px; }
/* Body copy runs the full wrap measure too, so every left-aligned block on the
   page shares one left and right edge with the hero, the video, and the CTA.
   .final-cta p is deliberately NOT changed: it is centred text inside the dark
   band, where a narrow measure is what makes centring legible rather than a
   misalignment. */
.affp-wrap .body-p{ font-size:15px; color:var(--body); margin-bottom:14px; }
.affp-wrap .body-p.fine{ font-size:13px; color:var(--slate); margin-top:16px; }

/* ── Audience grid ───────────────────────────────────────────── */
.audience-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.audience-tile{ border:1px solid var(--rule); border-left:3px solid var(--sky); background:var(--frost); padding:16px 18px; font-size:14px; color:var(--ink); }

/* ── 4-step process ──────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
.step{ border:1px solid var(--rule); padding:18px 16px; }
.step .num{ font-family:'Playfair Display',Georgia,serif; font-size:22px; font-weight:800; color:var(--sky); margin-bottom:8px; }
.step .t{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.step .d{ font-size:12.5px; color:var(--body); line-height:1.5; }

/* ── Numbers row ─────────────────────────────────────────────── */
.numbers-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.num-tile{ border:1px solid var(--rule); border-top:3px solid var(--gold); padding:20px 18px; text-align:center; }
.num-tile .big{ font-family:'Playfair Display',Georgia,serif; font-size:34px; font-weight:800; color:var(--ink); }
.num-tile .lab{ font-size:12px; color:var(--slate); margin-top:6px; }

/* ── Compliance box ──────────────────────────────────────────── */
.compliance-box{ background:var(--frost); border:1px solid var(--rule); padding:22px 24px; margin-top:20px; }
.compliance-box ul{ margin:10px 0 0 18px; }
.compliance-box li{ font-size:13.5px; color:var(--body); margin-bottom:8px; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-item{ border-bottom:1px solid var(--rule); padding:18px 0; }
.faq-q{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.faq-a{ font-size:14px; color:var(--body); }

/* ── Final CTA band ──────────────────────────────────────────── */
.final-cta{ background:var(--ink); color:#fff; text-align:center; padding:48px 24px; margin:60px -24px 0; }
.final-cta h2{ color:#fff; margin-top:0; }
.final-cta .h-accent{ margin-left:auto; margin-right:auto; }
.final-cta p{ color:#c8d6e6; max-width:560px; margin:0 auto 22px; }

@media (max-width: 720px){
  .affp-wrap h1{ font-size:30px; }
  .audience-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .numbers-row{ grid-template-columns:1fr; }
}
@media (max-width: 460px){
  .steps{ grid-template-columns:1fr; }
}