/* The affiliate page (theme/pages/affiliate/, served at /affiliate/): what its parts share. The sections live in parts/
   (top, why, surf, levels, credits, faq, finale), each with its own CSS where it draws something new. The page is
   assembled from the landing kit (theme/assets/css/kit.css): the hero, the section heads, the block, the checks, the
   buttons, the cards, the FAQ and the finale are its k-* parts, and this page restyles none of them. This file holds the
   anchor offset, the list reset, the focus ring for what the kit does not cover, the hidden sprite, the eyebrow tile's
   colour (the nav's Programs rows wear no colour of their own, so the tile takes --ok, the colour of money in the
   product's own statuses) and the still frame under reduced motion. Every rule is scoped to .pg-affiliate, the class
   templates/page-parts.php puts on <main>; every class of the page's own starts with af-. */

main.pg-affiliate{padding-top:0}
.pg-affiliate [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
:where(.pg-affiliate) :where(ul,ol,dl,dd){list-style:none;margin:0;padding:0}
.pg-affiliate :where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.pg-affiliate .af-sprite{position:absolute;width:0;height:0;overflow:hidden}
.pg-affiliate .af-tile{--m:var(--ok)}
/* an Apply that opens partners.getsales.io in a new tab says so with a small glyph after its words */
.pg-affiliate .af-out{display:block;flex:none;width:15px;height:15px;opacity:.75}
@media (prefers-reduced-motion:reduce){
  .pg-affiliate *{transition:none !important;animation:none !important}
}