/* The affiliate page, part "top": the three headline terms on the runway band. The hero, its words, its calls and the
   band are the kit's (.k-hero, .k-hero-txt, .k-btns, .k-hero-stage, .k-hero-sky); this file holds only the row of three
   cards that sits where a product page's demo window sits, lowered so the band shows above it, and the external glyph
   in the hero's first call. The cards are the kit's card ground (--panel, --line, --k-sh-lg), so the dark theme
   follows the tokens. Nothing moves. */

.pg-affiliate .af-hero .k-btn{gap:9px}
.pg-affiliate .af-stats{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  width:min(1120px,100% - 56px);margin:clamp(150px,15vw,222px) auto 0;
}
.pg-affiliate .af-stat{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px 28px 30px;
  border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--k-sh-lg);
}
.pg-affiliate .af-stat-k{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--k-ok-ink);
  font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.pg-affiliate .af-stat-n{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin-top:22px;
  font:600 clamp(44px,4.6vw,64px)/1 var(--display);letter-spacing:-.04em;color:var(--ink2);
}
.pg-affiliate .af-stat-n small{font:500 15px/1 var(--sans);letter-spacing:0;color:var(--mute)}
.pg-affiliate .af-stat-l{margin-top:14px;max-width:30ch;font:400 16.5px/1.5 var(--sans);color:var(--k-text);text-wrap:pretty}

@media (max-width:1000px){
  .pg-affiliate .af-stats{grid-template-columns:minmax(0,1fr);gap:14px;max-width:560px}
  .pg-affiliate .af-stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 20px;padding:22px 24px}
  .pg-affiliate .af-stat-k{grid-column:1/-1;justify-self:start}
  .pg-affiliate .af-stat-n{margin-top:8px;font-size:44px}
  .pg-affiliate .af-stat-l{margin-top:0;max-width:none}
}
@media (max-width:760px){
  .pg-affiliate .af-stats{width:100%;margin-top:150px}
  .pg-affiliate .af-stat{grid-template-columns:minmax(0,1fr);padding:20px 20px 22px}
  .pg-affiliate .af-stat-n{font-size:40px}
  .pg-affiliate .af-stat-l{font-size:16px}
}