/* Hallmark · macrostructure: Stat-Led partnership guide · tone: direct technical
 * Genre: modern-minimal · theme: existing Crawlhub Folded · anchor hue: brand blue
 * Nav retained · footer: shared Company category · enrichment: complete partnership illustration
 * Pre-emit critique: P5 H5 E5 S5 R5 V4 · current DESIGN.md owns type and palette.
 * All offer figures are supplied copy; no synthetic performance metrics or dashboard UI.
 */
html:has(.affiliates-page), body.affiliates-page { overflow-x: clip; }
.affiliates-main { padding-bottom: var(--affiliate-space-24); color: var(--affiliate-ink); }
.affiliates-main *, .affiliates-main *::before, .affiliates-main *::after { box-sizing: border-box; }
.affiliates-main :is(h1,h2,h3,p,figure,ul,ol) { margin: 0; }
.affiliates-main :is(h1,h2,h3) { font-family: var(--affiliate-display); font-style: normal; font-weight: 500; letter-spacing: -.035em; min-width: 0; overflow-wrap: anywhere; }
.affiliates-main h2 { font-size: clamp(32px,3.1vw,44px); line-height: 1.15; }
.affiliates-main h3 { font-size: 23px; line-height: 1.3; }
.affiliates-main p { color: var(--affiliate-muted); font: 16px/1.85 var(--affiliate-font); max-width: 68ch; }
.affiliates-main :is(a,summary):focus-visible { outline: 3px solid var(--affiliate-accent); outline-offset: 5px; }
.affiliates-main .button { white-space: nowrap; }
.affiliate-hero { padding-block: var(--affiliate-space-20) var(--affiliate-space-12); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--affiliate-space-16); align-items: center; }
.affiliate-eyebrow { color: var(--affiliate-accent); display: block; font: 12px/1.5 var(--affiliate-mono); margin-bottom: var(--affiliate-space-6); }
.affiliate-hero h1 { font-size: clamp(44px,4.5vw,64px); line-height: 1.07; letter-spacing: -.05em; max-width: 18ch; text-wrap: balance; }
.affiliate-hero .affiliate-lead { font-size: 18px; line-height: 1.8; margin-top: var(--affiliate-space-8); max-width: 52ch; }
.affiliate-contact { display: flex; align-items: center; flex-wrap: wrap; gap: var(--affiliate-space-4) var(--affiliate-space-6); margin-top: var(--affiliate-space-8); }
.affiliate-contact .affiliate-email { display: inline-flex; align-items: center; min-height: 44px; font: 14px/1.5 var(--affiliate-font); color: var(--affiliate-ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--affiliate-accent); }
.affiliate-contact .affiliate-email:hover { color: var(--affiliate-accent); }
.affiliate-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: var(--affiliate-radius); }
.affiliate-commission { display: flex; flex-direction: column; align-items: center; gap: var(--affiliate-space-1); padding-top: var(--affiliate-space-6); color: var(--affiliate-ink); }
.affiliate-commission-value { white-space: nowrap; font: 500 44px/1.15 var(--affiliate-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.affiliate-commission strong { font: inherit; font-weight: 600; }
.affiliate-commission-label { color: var(--affiliate-muted); font: 14px/1.5 var(--affiliate-font); }
.affiliate-highlights { list-style: none; padding: 0 0 var(--affiliate-space-8); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--affiliate-space-8); border-bottom: 1px solid var(--affiliate-line); }
.affiliate-highlights li { border-top: 1px solid var(--affiliate-line); padding-top: var(--affiliate-space-5); font: 14px/1.7 var(--affiliate-font); color: var(--affiliate-muted); }
.affiliate-section { padding-top: var(--affiliate-space-24); scroll-margin-top: var(--affiliate-space-24); }
.affiliate-section-heading { max-width: 780px; margin-bottom: var(--affiliate-space-12); }
.affiliate-section-heading > p { margin-top: var(--affiliate-space-6); font-size: 18px; }
.affiliate-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--affiliate-space-10) var(--affiliate-space-16); }
.affiliate-benefit { border-top: 1px solid var(--affiliate-line); padding-top: var(--affiliate-space-6); }
.affiliate-benefit h3 { margin-bottom: var(--affiliate-space-4); }
.affiliate-benefit p { font-size: 15px; }
.affiliate-audience-list { list-style: none; padding: 0; }
.affiliate-audience-list li { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.5fr); gap: var(--affiliate-space-16); padding-block: var(--affiliate-space-8); border-top: 1px solid var(--affiliate-line); }
.affiliate-audience-list li:last-child { border-bottom: 1px solid var(--affiliate-line); }
.affiliate-audience-list h3 { font-size: 21px; }
.affiliate-audience-list p { font-size: 15px; }
.affiliates-main .affiliate-eligibility { margin-top: var(--affiliate-space-6); font-size: 13px; max-width: 86ch; }
.affiliate-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--affiliate-space-10); }
.affiliate-steps li { border-top: 1px solid var(--affiliate-line); padding-top: var(--affiliate-space-6); }
.affiliate-step-number { display: block; font: 500 34px/1.2 var(--affiliate-display); color: var(--affiliate-accent); margin-bottom: var(--affiliate-space-6); font-variant-numeric: tabular-nums; }
.affiliate-steps h3 { margin-bottom: var(--affiliate-space-4); }
.affiliate-steps p { font-size: 15px; }
.affiliate-closing { margin-top: var(--affiliate-space-24); padding: var(--affiliate-space-12); border-radius: var(--affiliate-radius); background: var(--affiliate-tint); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; gap: var(--affiliate-space-10); }
.affiliate-closing p { margin-top: var(--affiliate-space-6); }
.affiliate-closing .affiliate-contact { margin: 0; justify-content: flex-end; }
.affiliate-faq { max-width: 960px; }
.affiliate-faq details { border-top: 1px solid var(--affiliate-line); }
.affiliate-faq details:last-child { border-bottom: 1px solid var(--affiliate-line); }
.affiliate-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--affiliate-space-6); min-height: 68px; padding-block: var(--affiliate-space-5); cursor: pointer; list-style: none; color: var(--affiliate-ink); font: 500 18px/1.5 var(--affiliate-font); }
.affiliate-faq summary::-webkit-details-marker { display: none; }
.affiliate-faq summary::after { content: '+'; font: 400 25px/1 var(--affiliate-font); flex: 0 0 20px; text-align: center; }
.affiliate-faq details[open] summary::after { content: '−'; }
.affiliate-faq summary:hover { color: var(--affiliate-accent); }
.affiliate-faq details > p { padding-bottom: var(--affiliate-space-6); font-size: 15px; max-width: 80ch; }
@media (max-width:1100px) {
  .affiliate-hero { gap: var(--affiliate-space-10); }
  .affiliate-hero h1 { font-size: 52px; }
  .affiliate-hero .affiliate-lead { font-size: 17px; }
  .affiliate-closing { grid-template-columns: minmax(0,1fr); }
  .affiliate-closing .affiliate-contact { justify-content: flex-start; }
}
@media (max-width:800px) {
  .affiliate-hero { grid-template-columns: minmax(0,1fr); padding-top: var(--affiliate-space-12); }
  .affiliate-hero h1 { max-width: 22ch; }
  .affiliate-hero-art { max-width: 620px; }
  .affiliate-highlights { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .affiliate-section { padding-top: var(--affiliate-space-20); }
  .affiliate-benefits { gap: var(--affiliate-space-10); }
  .affiliate-audience-list li { gap: var(--affiliate-space-8); }
  .affiliate-steps { grid-template-columns: minmax(0,1fr); gap: var(--affiliate-space-8); }
  .affiliate-steps li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: var(--affiliate-space-6); }
  .affiliate-step-number { margin: 0; }
  .affiliate-steps p { max-width: 70ch; }
}
@media (max-width:540px) {
  .affiliates-main { padding-bottom: var(--affiliate-space-16); }
  .affiliates-main .wrap { width: calc(100% - 32px); }
  .affiliate-hero { padding-block: var(--affiliate-space-10); }
  .affiliate-eyebrow { font-size: 11px; margin-bottom: var(--affiliate-space-5); }
  .affiliate-hero h1 { font-size: 40px; max-width: 17ch; }
  .affiliate-hero .affiliate-lead { margin-top: var(--affiliate-space-6); font-size: 16px; }
  .affiliate-contact { gap: var(--affiliate-space-3) var(--affiliate-space-5); margin-top: var(--affiliate-space-6); }
  .affiliate-contact .affiliate-email { font-size: 13px; }
  .affiliate-hero-art img { border-radius: 12px; }
  .affiliate-commission { padding-top: var(--affiliate-space-5); }
  .affiliate-commission-value { font-size: 36px; }
  .affiliate-highlights { gap: var(--affiliate-space-6); }
  .affiliate-highlights li { font-size: 13px; padding-top: var(--affiliate-space-4); }
  .affiliate-section { padding-top: var(--affiliate-space-16); }
  .affiliates-main h2 { font-size: 32px; }
  .affiliate-section-heading { margin-bottom: var(--affiliate-space-8); }
  .affiliate-section-heading > p { font-size: 16px; margin-top: var(--affiliate-space-5); }
  .affiliate-benefits { grid-template-columns: minmax(0,1fr); gap: var(--affiliate-space-8); }
  .affiliate-benefit h3 { font-size: 22px; }
  .affiliate-benefit p { font-size: 14px; }
  .affiliate-audience-list li { grid-template-columns: minmax(0,1fr); gap: var(--affiliate-space-3); padding-block: var(--affiliate-space-6); }
  .affiliate-audience-list h3 { font-size: 21px; }
  .affiliate-audience-list p { font-size: 14px; }
  .affiliate-steps li { grid-template-columns: 32px minmax(0,1fr); gap: var(--affiliate-space-5); }
  .affiliate-step-number { font-size: 28px; }
  .affiliate-steps h3 { font-size: 22px; }
  .affiliate-steps p { font-size: 14px; }
  .affiliate-closing { margin-top: var(--affiliate-space-16); padding: var(--affiliate-space-6); gap: var(--affiliate-space-6); }
  .affiliates-main .affiliate-closing { width: calc(100% - 32px); }
  .affiliate-closing h2 { font-size: 30px; }
  .affiliate-closing p { font-size: 15px; margin-top: var(--affiliate-space-5); }
  .affiliate-faq summary { font-size: 16px; gap: var(--affiliate-space-4); }
  .affiliate-faq details > p { font-size: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .affiliates-main *, .affiliates-main *::before, .affiliates-main *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}