/* ============================================================================
   35 — Affiliates / Partner Program page
   ----------------------------------------------------------------------------
   Complete, self-contained visual system for /affiliates. Written from scratch;
   replaces the previous 25/30/31/32 stack (those files stay on disk but are no
   longer loaded for this page — see $pageStyles in page.blade.php).

   Scoping: every rule is nested under .aff-page so nothing can leak into other
   pages. The shared CTA (.subscribe-2) at the page foot is intentionally NOT
   restyled here — it is a site-wide component owned by 05-subscribe.css.

   Markup constraint: several groups in the CMS content are FLAT sibling runs
   with no per-item wrapper (hero tiers, hero cards, podium, timeline, tier
   stack). Those are composed with CSS Grid + explicit nth-child placement
   rather than by editing content. Icon spans in the content are empty, so
   icons are supplied here as CSS masks (currentColor-tinted, no icon font).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. tokens */
.aff-page {
    --aff-brand: #60a548;
    --aff-brand-600: #4e8c39;
    --aff-brand-700: #3b6b2b;
    --aff-brand-050: #f3f9f0;
    --aff-brand-100: #e2efda;

    --aff-ink: #101a13;
    --aff-ink-2: #2b3a30;
    --aff-muted: #5f7167;
    --aff-muted-2: #7d8d84;

    --aff-line: #e4eae1;
    --aff-line-2: #eff3ec;
    --aff-surface: #ffffff;
    --aff-surface-2: #f7faf5;
    --aff-deep: #14291a;
    --aff-deep-2: #1c3a24;

    --aff-gold: #c9a227;
    --aff-silver: #97a2ad;
    --aff-bronze: #b87333;

    --aff-r-xs: 8px;
    --aff-r-sm: 12px;
    --aff-r: 16px;
    --aff-r-lg: 22px;
    --aff-r-xl: 30px;

    --aff-sh-1: 0 1px 2px rgba(16, 26, 19, .04), 0 2px 6px rgba(16, 26, 19, .05);
    --aff-sh-2: 0 2px 6px rgba(16, 26, 19, .04), 0 10px 30px rgba(16, 26, 19, .07);
    --aff-sh-3: 0 18px 50px rgba(16, 26, 19, .14);

    --aff-ease: cubic-bezier(.4, 0, .2, 1);

    --aff-hero-h: 660px;

    /* icon masks (inline SVG, tinted with currentColor) */
    --i-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
    --i-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5'/><path d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7L12 19'/></svg>");
    --i-users: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13A4 4 0 0 1 16 11'/></svg>");
    --i-chart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 16v-5'/><path d='M12 16V8'/><path d='M17 16v-9'/></svg>");
    --i-share: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><path d='M8.6 13.5l6.8 4'/><path d='M15.4 6.5l-6.8 4'/></svg>");
    --i-shield: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='M9 12l2 2 4-4'/></svg>");
    --i-bolt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6z'/></svg>");
    --i-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>");
    --i-target: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.4'/></svg>");
    --i-wallet: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='6' width='19' height='13' rx='3'/><path d='M16 12.5h2'/><path d='M2.5 10h19'/></svg>");
    --i-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
    --i-person: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0z'/></svg>");
    --i-trophy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 21h8'/><path d='M12 17v4'/><path d='M7 4h10v5a5 5 0 0 1-10 0z'/><path d='M17 5h3v2a3 3 0 0 1-3 3'/><path d='M7 5H4v2a3 3 0 0 0 3 3'/></svg>");
    --i-list: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11'/><path d='M9 12h11'/><path d='M9 18h11'/><path d='M4.5 6h.01'/><path d='M4.5 12h.01'/><path d='M4.5 18h.01'/></svg>");

    /* Tier-bar silhouette. Bézier path, not a border-radius: the top edge runs
       flat through the centre, then both top corners sweep down in a deep arch
       into the straight sides. The bottom is deliberately a single straight
       line into two square 90° corners — no tuck — which is what gives the
       shape its planted look. preserveAspectRatio='none' + a mask-size of
       100% 100% lets the one path stretch to any bar width. */
    --i-tierbar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48' preserveAspectRatio='none'><path d='M0,48 L0,23 C0,9.5 9.5,0 25,0 L175,0 C190.5,0 200,9.5 200,23 L200,48 Z' fill='%23ffffff'/></svg>");
}

/* --------------------------------------------------------------- 2. shell */
.aff-page {
    position: relative;
    /* clip (not hidden) so the hero backdrop can bleed full-width without a
       horizontal scrollbar, while position:sticky inside still works */
    overflow-x: clip;
    /* own stacking context: lets the hero's full-bleed dark band sit at
       z-index:-1 (above this element's own background, below the decorative
       photo/glow layers) instead of disappearing behind the page background */
    isolation: isolate;
    background: var(--aff-surface);
    color: var(--aff-ink-2);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* every direct .container is a page section; the hero opts out below */
.aff-page > .container {
    position: relative;
    padding-top: clamp(46px, 5.4vw, 86px);
    padding-bottom: 0;
}
/* The theme CTA rendered after this page (.subscribe-container-2 in
   05-subscribe.css) pulls itself up with a flat margin-top:-214px at every
   breakpoint. Reserve that height here, otherwise it rides up over the
   closing panel. Flat value on purpose — the margin it offsets is flat too. */
.aff-page > .container:last-of-type {
    padding-bottom: 254px;
}

.aff-page p { margin: 0 0 14px; color: var(--aff-muted); }
.aff-page p:last-child { margin-bottom: 0; }
.aff-page img { max-width: 100%; height: auto; }
.aff-page a { text-decoration: none; }

.aff-page h1, .aff-page h2, .aff-page h3, .aff-page h4 {
    font-family: "Rubik", "Inter", sans-serif;
    color: var(--aff-ink);
    margin: 0 0 12px;
    line-height: 1.22;
    letter-spacing: -.015em;
    font-weight: 700;
}
.aff-page h2 { font-size: clamp(25px, 2.7vw, 38px); }
.aff-page h3 { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.35; }
.aff-page h4 { font-size: 16px; }

/* <em>/<b> inside headings are accents, not italics */
.aff-page h2 em, .aff-page h3 em {
    font-style: normal;
    color: var(--aff-brand-600);
}
.aff-page h2 b { font-weight: 800; }

/* sections the CMS marks as hidden must stay hidden */
.aff-page .arp-hidden { display: none !important; }

/* focus visibility (accessibility) */
.aff-page a:focus-visible,
.aff-page button:focus-visible {
    outline: 2px solid var(--aff-brand-600);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ------------------------------------------------------- 3. shared pieces */

/* eyebrow pill */
.aff-page .arp-eyebrow,
.aff-page .agvp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
}
.aff-page .arp-eyebrow::before,
.aff-page .agvp-eyebrow > span {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--aff-brand);
}

/* section headings */
.aff-page .arp-head,
.aff-page .arp-intro__head {
    max-width: 760px;
    margin-bottom: clamp(26px, 3vw, 44px);
}
.aff-page .arp-head--center,
.aff-page .arp-intro__head {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aff-page .arp-head p,
.aff-page .arp-intro__head p { font-size: 15.5px; }

/* generic surface panel */
.aff-page .arp-panel {
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-sh-1);
    overflow: hidden;
}
.aff-page .arp-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: var(--aff-surface-2);
    border-bottom: 1px solid var(--aff-line);
}
.aff-page .arp-panel__head h4 { margin: 0; flex: 1 1 auto; }
.aff-page .arp-panel__mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--aff-brand), var(--aff-brand-700));
    box-shadow: 0 2px 6px rgba(96, 165, 72, .35);
}
.aff-page .arp-panel__kicker {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    color: var(--aff-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* buttons — hero "Start", closing actions */
.aff-page .agvp-col-left > a,
.aff-page .arp-actions > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .18s var(--aff-ease), box-shadow .18s var(--aff-ease),
                background-color .18s var(--aff-ease), color .18s var(--aff-ease),
                border-color .18s var(--aff-ease);
}
.aff-page .agvp-col-left > a,
.aff-page .arp-actions > a:first-child {
    background: linear-gradient(145deg, var(--aff-brand), var(--aff-brand-600));
    color: #fff;
    box-shadow: 0 6px 18px rgba(96, 165, 72, .32);
}
.aff-page .agvp-col-left > a::after,
.aff-page .arp-actions > a::after {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--i-chevron) center / contain no-repeat;
    mask: var(--i-chevron) center / contain no-repeat;
    transition: transform .18s var(--aff-ease);
}
.aff-page .agvp-col-left > a:hover,
.aff-page .arp-actions > a:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(96, 165, 72, .42);
    color: #fff;
}
.aff-page .agvp-col-left > a:hover::after,
.aff-page .arp-actions > a:hover::after { transform: translateX(3px); }

.aff-page .arp-actions > a:last-child {
    background: transparent;
    color: var(--aff-ink);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: none;
}

/* ---------------------------------------------------------------- 4. hero */

/* backdrop layers are loose siblings of the hero content (no wrapper in the
   CMS markup), so they are pinned to the top band of .aff-page and fade out
   at the bottom — that way an over/under-shoot of --aff-hero-h is invisible */
.aff-page .agvp__bg,
.aff-page .agvp-photo,
.aff-page .agvp-globe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--aff-hero-h);
    pointer-events: none;
    z-index: 0;
}
/* soft green glows over the dark band; all fade out before the band ends so
   an over/under-shoot of --aff-hero-h is never visible as a hard edge */
.aff-page .agvp__bg {
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.aff-page .agvp-glow {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .75;
}
.aff-page .agvp-glow--left {
    width: 520px; height: 520px;
    top: -60px; left: -140px;
    background: radial-gradient(circle, rgba(96, 165, 72, .30), transparent 66%);
}
.aff-page .agvp-glow--center {
    width: 640px; height: 640px;
    top: 120px; left: 38%;
    background: radial-gradient(circle, rgba(120, 190, 96, .16), transparent 66%);
}
.aff-page .agvp-glow--top {
    width: 420px; height: 420px;
    top: -140px; right: 10%;
    background: radial-gradient(circle, rgba(150, 214, 106, .20), transparent 66%);
}
/* faint dot texture */
.aff-page .agvp-particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask: linear-gradient(180deg, #000 0%, transparent 62%);
    mask: linear-gradient(180deg, #000 0%, transparent 62%);
    opacity: .6;
}
/* farm photo anchored to the right edge, dissolved into the dark on its left */
.aff-page .agvp-photo {
    left: auto;
    width: clamp(300px, 46vw, 900px);
    background-image: url(../../images/sunrise-verdant-farmland.jpg);
    background-size: cover;
    background-position: 76% 42%;
    -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 26%, #000 62%),
                  linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
    mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 26%, #000 62%),
          linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    opacity: .5;
}
.aff-page .agvp-globe {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    opacity: .16;
    -webkit-mask: radial-gradient(70% 70% at 72% 34%, #000 26%, transparent 74%);
    mask: radial-gradient(70% 70% at 72% 34%, #000 26%, transparent 74%);
}
.aff-page .agvp-globe img {
    width: min(720px, 58vw);
    max-width: none;
    transform: translate(16%, -12%);
    filter: brightness(0) invert(1);
}

/* hero content.
   NOTE: no z-index here on purpose — adding one would make this element a
   stacking context and trap the ::before band inside it, painting the band
   over the photo/glow layers. The band therefore sits at z-index:-1 relative
   to .aff-page's context, and the grid below is lifted instead. */
.aff-page .container.agvp__inner {
    position: relative;
    padding-top: clamp(40px, 4.6vw, 72px);
    padding-bottom: clamp(38px, 4.4vw, 66px);
}
/* full-bleed dark band, exactly as tall as the hero content */
.aff-page .container.agvp__inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    background:
        radial-gradient(80% 120% at 8% 0%, #0d3318 0%, rgba(13, 51, 24, 0) 60%),
        linear-gradient(180deg, #07240f 0%, #061d0c 55%, #051809 100%);
}
.aff-page .agvp-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: clamp(34px, 5.2vw, 78px);
    align-items: start;
}

/* dark-band typography */
.aff-page .agvp-eyebrow {
    background: rgba(124, 212, 78, .12);
    border-color: rgba(124, 212, 78, .3);
    color: #9fe07a;
}
.aff-page .agvp-eyebrow > span { background: #7cd44e; }
.aff-page .agvp-col-left > h2 {
    font-size: clamp(32px, 4.1vw, 56px);
    line-height: 1.08;
    color: #fff;
    margin-bottom: 16px;
}
.aff-page .agvp-col-left > h2 b {
    display: block;
    font-weight: 700;
    color: #7cd44e;
}
.aff-page .agvp-col-left > p {
    max-width: 50ch;
    font-size: 15.5px;
    color: rgba(255, 255, 255, .68);
    margin-bottom: 28px;
}
/* Start button */
.aff-page .agvp-col-left > a {
    min-height: 40px;
    padding: 0 30px;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(96, 165, 72, .45);
}
.aff-page .agvp-col-left > a::after { display: none; }

/* ---- staggered photo tier cards ------------------------------------------
   The CMS emits a flat run of pct / foot / lvl per tier with no card wrapper,
   so all three elements of a tier are placed into the SAME grid cell and
   layered: the % element IS the photo card (given an explicit height per
   column and bottom-aligned, producing the descending staircase), while the
   green bar and the level chip are overlaid on it via align-self + margins.
   --agvp-card-h drives each column's height so the bar can be offset
   proportionally without hard-coding a second set of numbers. */
.aff-page .agvp-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: end;
    gap: 0 14px;
    margin-top: 40px;
    /* the staircase reads better as a compact cluster than stretched across
       the full column — narrows all three cards proportionally */
    max-width: 78%;
}
/* three elements per tier share one cell */
.aff-page .agvp-tiers > :nth-child(-n + 3)              { grid-column: 1; grid-row: 1; }
.aff-page .agvp-tiers > :nth-child(n + 4):nth-child(-n + 6) { grid-column: 2; grid-row: 1; }
.aff-page .agvp-tiers > :nth-child(n + 7)               { grid-column: 3; grid-row: 1; }

/* the % element is the card */
.aff-page .agvp-tier__pct {
    --agvp-card-h: 300px;
    align-self: end;
    height: var(--agvp-card-h);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background-image:
        linear-gradient(180deg, rgba(6, 26, 13, .12) 0%, rgba(5, 22, 11, .55) 62%, rgba(4, 18, 9, .85) 100%),
        url(../../images/sunrise-green.jpg);
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
    font-family: "Rubik", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    transition: transform .3s var(--aff-ease), box-shadow .3s var(--aff-ease);
}
.aff-page .agvp-tier__pct:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 46px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* descending heights + a different slice of the photo per card */
.aff-page .agvp-tiers > :nth-child(1) { --agvp-card-h: 300px; background-position: center, 18% center; }
.aff-page .agvp-tiers > :nth-child(4) { --agvp-card-h: 252px; background-position: center, 50% center; font-size: 29px; }
.aff-page .agvp-tiers > :nth-child(7) { --agvp-card-h: 208px; background-position: center, 82% center; font-size: 26px; }

/* green bar, floated inside its own card at ~44% of that card's height */
.aff-page .agvp-tier__foot {
    align-self: end;
    z-index: 1;
    min-width: 0;
    /* no side inset: the silhouette's curves meet the card's extreme edges */
    margin: 0 0 calc(var(--agvp-card-h, 300px) * .40);
    padding: 12px 12px;
    /* silhouette comes from the Bézier mask, so no border-radius/border here:
       a border would be sliced by the mask and read as a broken outline, and
       an outer box-shadow would be clipped away entirely (mask is applied
       after the shadow is drawn). The lit top edge is painted into the
       gradient stack instead. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .5) 0px, rgba(255, 255, 255, 0) 2px),
        linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, #7ccf4f 0%, #5cae38 55%, #47922c 100%);
    -webkit-mask-image: var(--i-tierbar);
    mask-image: var(--i-tierbar);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    text-align: center;
}
.aff-page .agvp-tiers > :nth-child(2) { --agvp-card-h: 300px; }
.aff-page .agvp-tiers > :nth-child(5) { --agvp-card-h: 252px; }
.aff-page .agvp-tiers > :nth-child(8) { --agvp-card-h: 208px; }
.aff-page .agvp-tier__sub {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    /* Wraps rather than truncating. It used to be nowrap + ellipsis, which cut
       "Indirect Referrals" to "Indirect Referra…" wherever the card was 10-14px
       too narrow — every width up to 390px, and again around 1024px. The card
       has vertical room, so a second line costs nothing and the label always
       reads in full. */
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* level chip pinned near the bottom of every card (all cards share a baseline) */
.aff-page .agvp-tier__lvl {
    align-self: end;
    z-index: 1;
    margin: 0 10px 12px;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(4, 18, 9, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
}

/* ---- hero affiliate cards: one-at-a-time slideshow -----------------------
   The CMS emits head/body/head/body/head/body with no per-card wrapper, so the
   stack is a 2-row grid: every head shares row 1 and every body shares row 2,
   which overlays the three cards perfectly on top of each other. Each card's
   two halves then run the same fade animation with a shared negative delay, so
   the pair always enters and leaves together. Rows auto-size to the tallest
   card, so the panel never jumps height between slides. */
.aff-page .agvp-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
}
.aff-page .agvp-stack > .agvp-card__head { grid-column: 1; grid-row: 1; }
.aff-page .agvp-stack > .agvp-card__body { grid-column: 1; grid-row: 2; }

.aff-page .agvp-stack > * {
    opacity: 0;
    animation: agvpCardCycle 13.5s var(--aff-ease) infinite;
}
/* pair 1 = children 1-2, pair 2 = 3-4, pair 3 = 5-6 */
.aff-page .agvp-stack > :nth-child(1),
.aff-page .agvp-stack > :nth-child(2) { animation-delay: 0s; }
.aff-page .agvp-stack > :nth-child(3),
.aff-page .agvp-stack > :nth-child(4) { animation-delay: -4.5s; }
.aff-page .agvp-stack > :nth-child(5),
.aff-page .agvp-stack > :nth-child(6) { animation-delay: -9s; }

@keyframes agvpCardCycle {
    0%              { opacity: 0; transform: translateY(10px) scale(.985); }
    3%              { opacity: 1; transform: translateY(0) scale(1); }
    30%             { opacity: 1; transform: translateY(0) scale(1); }
    33%, 100%       { opacity: 0; transform: translateY(-10px) scale(.985); }
}
.aff-page .agvp-card__head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px 14px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 0;
    border-radius: var(--aff-r-lg) var(--aff-r-lg) 0 0;
}
.aff-page .agvp-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 15px 20px 18px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-radius: 0 0 var(--aff-r-lg) var(--aff-r-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
}
.aff-page .agvp-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    border: 2px solid rgba(255, 255, 255, .22);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.aff-page .agvp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aff-page .agvp-card__name {
    display: block;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
.aff-page .agvp-card__loc { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.aff-page .agvp-card__col { min-width: 0; }
.aff-page .agvp-card__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 8px;
}
.aff-page .agvp-card__body > .agvp-card__col:last-child { text-align: right; }
.aff-page .agvp-card__body > .agvp-card__col:last-child .agvp-refs { justify-content: flex-end; }
.aff-page .agvp-earn {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--aff-brand), var(--aff-brand-600));
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(96, 165, 72, .3);
}
.aff-page .agvp-refs { display: flex; align-items: center; }
.aff-page .agvp-refs b {
    width: 32px;
    height: 32px;
    margin-left: -10px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    border: 2px solid #7cd44e;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
}
/* the trailing "+N" chip is a count, not a face */
.aff-page .agvp-refs b:last-child {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
}
.aff-page .agvp-refs b:first-child { margin-left: 0; }
.aff-page .agvp-refs b img { width: 100%; height: 100%; object-fit: cover; }

/* hero steps — sits directly on the dark band, led by a leaf mark */
.aff-page .agvp-steps-wrap {
    /* breathing room between the affiliate card above and this heading */
    margin-top: 56px;
    color: rgba(255, 255, 255, .72);
}
.aff-page .agvp-steps-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 2px 14px;
    margin-bottom: 18px;
}
.aff-page .agvp-steps-head::before {
    content: "";
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    background: url(../../images/leaf-icon.png) center / contain no-repeat;
}
.aff-page .agvp-steps-head h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.aff-page .agvp-steps-head p { color: rgba(255, 255, 255, .62); font-size: 13.5px; }

.aff-page .agvp-steps {
    display: grid;
    gap: 0;
    border-radius: var(--aff-r-lg);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .11);
    overflow: hidden;
}
.aff-page .agvp-step {
    display: grid;
    grid-template-columns: 34px 34px minmax(0, 1fr);
    align-items: start;
    gap: 4px 12px;
    padding: 16px 18px;
    /* solid dark green row fill (per reference) */
    background: #13321c;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: background-color .2s var(--aff-ease);
    counter-increment: agvp-step;
}
.aff-page .agvp-steps { counter-reset: agvp-step; }
.aff-page .agvp-step:last-child { border-bottom: 0; }
.aff-page .agvp-step:hover { background: #1a4326; }
/* numbered badge, generated from the source order */
.aff-page .agvp-step::before {
    content: counter(agvp-step);
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #6fc244, #4b9a2e);
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(79, 156, 49, .4);
}
.aff-page .agvp-step__num {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 212, 78, .13);
    border: 1px solid rgba(124, 212, 78, .24);
}
.aff-page .agvp-step__num img {
    width: 17px;
    height: 17px;
    filter: brightness(0) saturate(100%) invert(72%) sepia(45%) saturate(560%) hue-rotate(56deg) brightness(96%) contrast(89%);
}
/* the CMS leaves an empty unclassed <span> in each step */
.aff-page .agvp-step > span:not([class]) { display: none; }
.aff-page .agvp-step p { grid-column: 3; margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; }
.aff-page .agvp-step p:first-of-type {
    font-family: "Rubik", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

/* ------------------------------------------------------- 5. top 10 podium */
.aff-page .arp-top10-head { max-width: 760px; }
/* trophy replaces the generic dot on this section's eyebrow */
.aff-page .arp-top10-head .arp-eyebrow::before {
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: currentColor;
    -webkit-mask-image: var(--i-trophy);
    mask-image: var(--i-trophy);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Three podium cards side by side. The CMS emits a flat run of
   rank/avatar/id/amt x3 with no per-person wrapper, so the row is a 12-column
   grid (3 groups of 4 fixed-ish tracks) and each group of four cells is welded
   into one card with borders + radii on its first and last cell. Fixed track
   widths keep the three cards identical in width regardless of name/amount
   length; the gap between cards is a margin on each group's last cell. */
.aff-page .arp-top10-podium {
    display: grid;
    grid-template-columns: repeat(3, 34px 44px minmax(0, 1fr) auto);
    align-items: stretch;
    row-gap: 12px;
    margin: 0 0 18px;
}
.aff-page .arp-top10-podium > * {
    padding: 15px 0;
    background: var(--aff-surface);
    border-block: 1px solid var(--aff-line);
    box-shadow: 0 1px 2px rgba(16, 26, 19, .04);
}
.aff-page .arp-top10-podium > :nth-child(4n + 1) {
    /*padding-left: 16px;*/
    border-left: 1px solid var(--aff-line);
    border-radius: var(--aff-r) 0 0 var(--aff-r);
}
.aff-page .arp-top10-podium > :nth-child(4n) {
    padding-right: 18px;
    margin-right: 14px;
    border-right: 1px solid var(--aff-line);
    border-radius: 0 var(--aff-r) var(--aff-r) 0;
}
.aff-page .arp-top10-podium > :last-child { margin-right: 0; }

/* winner card — warm tint + amber rule */
.aff-page .arp-top10-podium > :nth-child(-n + 4) {
    background: linear-gradient(180deg, #fdf6e6, #fffdf8);
    border-color: #efdcb4;
    box-shadow: 0 4px 16px rgba(201, 162, 39, .13);
}

/* rank cell: the number sits centred on a coloured medal disc. The disc is a
   z-index:-1 pseudo and the cell is an isolated stacking context, so the disc
   paints above the cell's own band background but behind the number. */
.aff-page .arp-top10-rank {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--aff-muted);
    font-variant-numeric: tabular-nums;
}
.aff-page .arp-top10-podium > .arp-top10-rank::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
    z-index: -1;
}
.aff-page .arp-top10-podium > :nth-child(1).arp-top10-rank { color: #b57b12; }
.aff-page .arp-top10-podium > :nth-child(1).arp-top10-rank::before { background: #fbeecb; border-color: #edd8a4; }
.aff-page .arp-top10-podium > :nth-child(5).arp-top10-rank { color: #5b6771; }
.aff-page .arp-top10-podium > :nth-child(5).arp-top10-rank::before { background: #eef1f4; border-color: #dde3e8; }
.aff-page .arp-top10-podium > :nth-child(9).arp-top10-rank { color: var(--aff-brand-700); }
.aff-page .arp-top10-podium > :nth-child(9).arp-top10-rank::before { background: var(--aff-brand-050); border-color: var(--aff-brand-100); }

/* The avatar span doubles as a padded grid cell (it supplies part of the row
   band), so the circle lives on the <img> — putting it on the span would let
   the cell's vertical padding crush the image's content box to a few px. */
.aff-page .arp-top10-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.aff-page .arp-top10-avatar img {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--aff-line);
}
.aff-page .arp-top10-id { min-width: 0; padding-left: 12px; }
.aff-page .arp-top10-name {
    display: block;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--aff-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aff-page .arp-top10-loc { display: block; font-size: 12.5px; color: var(--aff-muted-2); }
.aff-page .arp-top10-amt { text-align: right; }
.aff-page .arp-top10-earn {
    display: block;
    font-family: "Rubik", sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--aff-brand-700);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
/* winner's figure picks up the warm accent */
.aff-page .arp-top10-podium > :nth-child(4) .arp-top10-earn { color: #d1891a; }
.aff-page .arp-top10-earn-label {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--aff-muted-2);
}

/* full leaderboard rows */
.aff-page .arp-top10-list-panel { margin: 0 0 8px; border-radius: var(--aff-r-lg); }
/* leaderboard panel header: white, circular outlined glyph, green period pill */
.aff-page .arp-top10-list-panel .arp-panel__head {
    background: var(--aff-surface);
    padding: 20px 24px;
}
.aff-page .arp-top10-list-panel .arp-panel__mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    box-shadow: none;
    color: var(--aff-brand-700);
    position: relative;
}
.aff-page .arp-top10-list-panel .arp-panel__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-image: var(--i-list);
    mask-image: var(--i-list);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.aff-page .arp-top10-list-panel .arp-panel__head h4 { font-size: 17px; }
.aff-page .arp-top10-list-panel .arp-panel__kicker {
    background: var(--aff-brand-050);
    border-color: var(--aff-brand-100);
    color: var(--aff-brand-700);
    padding: 7px 15px;
    font-size: 11px;
}

.aff-page .arp-top10-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 13px 24px;
    border-bottom: 1px solid var(--aff-line-2);
    transition: background-color .18s var(--aff-ease);
}
.aff-page .arp-top10-row:last-child { border-bottom: 0; }
.aff-page .arp-top10-row:hover { background: var(--aff-surface-2); }
.aff-page .arp-top10-row__rank {
    font-family: "Rubik", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--aff-muted-2);
    font-variant-numeric: tabular-nums;
}
.aff-page .arp-top10-row__person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.aff-page .arp-top10-row__avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--aff-line);
}
.aff-page .arp-top10-row__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* name and country share a baseline instead of stacking */
.aff-page .arp-top10-row__id {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
}
.aff-page .arp-top10-row__name {
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--aff-ink);
    line-height: 1.35;
}
.aff-page .arp-top10-row__loc { font-size: 12.5px; color: var(--aff-muted-2); }
.aff-page .arp-top10-row__referred {
    color: var(--aff-muted-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.aff-page .arp-top10-row__earn {
    font-family: "Rubik", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--aff-brand-700);
    text-align: right;
    min-width: 78px;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- 6. intro */
.aff-page .arp-intro__body {
    max-width: 860px;
    margin: 0 auto 16px;
    padding: 22px 26px;
    border-radius: var(--aff-r-lg);
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
    border-left: 3px solid var(--aff-brand);
}
.aff-page .arp-intro__body p { color: var(--aff-ink-2); font-size: 15.5px; }
.aff-page .arp-intro__head + .arp-intro__body + p {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    color: var(--aff-muted-2);
}

/* ------------------------------------------------- 7. how it works / timeline */
/* Dark-green panel carrying a vertical 5-step timeline. Unlike the hero's
   full-bleed band, this one is inset from the container edges and rounded so it
   reads as a distinct premium panel sitting on the page.
   --arp-how-gap is the inset between the container edge and the panel edge; the
   container's own horizontal padding is kept larger than it so content always
   clears the rounded corners. */
.aff-page > .container.arp-how {
    --arp-how-gap: clamp(8px, 1.1vw, 15px);
    padding-top: clamp(36px, 3.9vw, 62px);
    padding-bottom: clamp(36px, 3.9vw, 62px);
    padding-left: calc(var(--arp-how-gap) + clamp(14px, 1.8vw, 26px));
    padding-right: calc(var(--arp-how-gap) + clamp(14px, 1.8vw, 26px));
    margin-top: clamp(40px, 4.6vw, 72px);
}
/* tighter than the page-wide head spacing — this panel is deliberately compact */
.aff-page .arp-how .arp-head { margin-bottom: clamp(20px, 2.2vw, 30px); }
.aff-page > .container.arp-how::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--arp-how-gap);
    right: var(--arp-how-gap);
    z-index: -1;
    border-radius: clamp(20px, 2.2vw, 34px);
    background:
        radial-gradient(78% 116% at 12% 0%, #0e3a1b 0%, rgba(14, 58, 27, 0) 62%),
        linear-gradient(180deg, #07260f 0%, #061e0c 58%, #051708 100%);
    box-shadow: 0 24px 60px rgba(4, 22, 10, .28);
}
/* Soft lime bloom, kept fully inside the panel so it cannot spill past the
   rounded corners onto the light page behind it. */
.aff-page > .container.arp-how::after {
    content: "";
    position: absolute;
    top: 8%;
    right: calc(var(--arp-how-gap) + 1%);
    width: min(440px, 48%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 212, 78, .13) 0%, rgba(124, 212, 78, 0) 68%);
    pointer-events: none;
    z-index: -1;
}

/* the section head inverts for the dark band */
.aff-page .arp-how .arp-eyebrow {
    background: rgba(124, 212, 78, .12);
    border-color: rgba(124, 212, 78, .3);
    color: #9fe07a;
}
.aff-page .arp-how .arp-eyebrow::before { background: #7cd44e; }
.aff-page .arp-how .arp-head h2 { color: #fff; }
.aff-page .arp-how .arp-head h2 em { color: #9be25f; }
.aff-page .arp-how .arp-head p { color: rgba(255, 255, 255, .66); }

/* Fixed rail column keeps every circle on one axis regardless of card height.
   Capped width so the cards stay a comfortable reading measure on wide screens
   instead of stretching the full container. */
.aff-page .arp-tl {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: clamp(14px, 2vw, 24px);
    row-gap: clamp(10px, 1.1vw, 14px);
    align-items: start;
    max-width: 880px;
    margin: 0 auto;
}
/* The CMS ships a decorative line span — used as the actual rail rather than
   faking connectors per node, which cannot know the gap between two cards of
   differing height. Masked at both ends so the endpoints need no measurement. */
.aff-page .arp-tl__line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 23px;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg,
        rgba(124, 212, 78, .5) 0 6px, rgba(124, 212, 78, 0) 6px 15px);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 30px,
                                  #000 calc(100% - 30px), transparent 100%);
    mask: linear-gradient(180deg, transparent 0, #000 30px,
                          #000 calc(100% - 30px), transparent 100%);
    z-index: 0;
}

/* children: 1 = rail, then body/node pairs -> body_k = 2k, node_k = 2k+1.
   One row per step: node in the rail column, card beside it. */
.aff-page .arp-tl > :nth-child(2)  { grid-column: 2; grid-row: 1; }
.aff-page .arp-tl > :nth-child(3)  { grid-column: 1; grid-row: 1; }
.aff-page .arp-tl > :nth-child(4)  { grid-column: 2; grid-row: 2; }
.aff-page .arp-tl > :nth-child(5)  { grid-column: 1; grid-row: 2; }
.aff-page .arp-tl > :nth-child(6)  { grid-column: 2; grid-row: 3; }
.aff-page .arp-tl > :nth-child(7)  { grid-column: 1; grid-row: 3; }
.aff-page .arp-tl > :nth-child(8)  { grid-column: 2; grid-row: 4; }
.aff-page .arp-tl > :nth-child(9)  { grid-column: 1; grid-row: 4; }
.aff-page .arp-tl > :nth-child(10) { grid-column: 2; grid-row: 5; }
.aff-page .arp-tl > :nth-child(11) { grid-column: 1; grid-row: 5; }

.aff-page .arp-tl__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(15px, 1.4vw, 19px) clamp(17px, 1.8vw, 24px);
    border-radius: var(--aff-r);
    background:
        linear-gradient(158deg, rgba(124, 212, 78, .07) 0%, rgba(124, 212, 78, 0) 46%),
        linear-gradient(180deg, #0f3018 0%, #0c2713 100%);
    border: 1px solid rgba(124, 212, 78, .17);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
                0 14px 34px rgba(3, 18, 8, .42);
    transition: transform .2s var(--aff-ease), box-shadow .2s var(--aff-ease),
                border-color .2s var(--aff-ease);
}
.aff-page .arp-tl__body:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 212, 78, .34);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
                0 18px 42px rgba(3, 18, 8, .5);
}
.aff-page .arp-tl__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 11px;
    border-radius: 11px;
    display: inline-flex;
    background: rgba(124, 212, 78, .12);
    border: 1px solid rgba(124, 212, 78, .26);
    color: #9be25f;
    position: relative;
}
.aff-page .arp-tl__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.aff-page .arp-tl__body:nth-child(2)  .arp-tl__icon::after { -webkit-mask-image: var(--i-share);  mask-image: var(--i-share); }
.aff-page .arp-tl__body:nth-child(4)  .arp-tl__icon::after { -webkit-mask-image: var(--i-users);  mask-image: var(--i-users); }
.aff-page .arp-tl__body:nth-child(6)  .arp-tl__icon::after { -webkit-mask-image: var(--i-target); mask-image: var(--i-target); }
.aff-page .arp-tl__body:nth-child(8)  .arp-tl__icon::after { -webkit-mask-image: var(--i-chart);  mask-image: var(--i-chart); }
.aff-page .arp-tl__body:nth-child(10) .arp-tl__icon::after { -webkit-mask-image: var(--i-wallet); mask-image: var(--i-wallet); }

.aff-page .arp-tl__body h3 {
    color: #fff;
    margin-bottom: 5px;
    font-size: clamp(15.5px, 1.15vw, 17px);
}
.aff-page .arp-tl__body p {
    font-size: 13.6px;
    margin: 0;
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
}

/* Numbered node. margin-top tracks the card's own top padding so the circle
   lines up with the icon tile beside it. The circle's own opaque fill is what
   hides the rail behind it — no solid ring, which would read as a dark halo
   wherever it failed to match the panel's vertical gradient. */
.aff-page .arp-tl__node {
    position: relative;
    z-index: 1;
    justify-self: center;
    align-self: start;
    margin-top: clamp(13px, 1.4vw, 16px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #14401f 0%, #0a2711 100%);
    border: 1.5px solid rgba(124, 212, 78, .42);
    color: #b6ec86;
    font-family: "Rubik", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 0 22px rgba(124, 212, 78, .22);
}

/* --------------------------------------------------------------- 8. splits */
.aff-page .arp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(26px, 3.6vw, 58px);
    align-items: start;
}
/* copy side */
.aff-page .arp-split > .arp-eyebrow,
.aff-page .arp-split > h2,
.aff-page .arp-split > p,
.aff-page .arp-split > .arp-why__copy,
.aff-page .arp-split > div:not([class]) { grid-column: 1; }
/* visual side */
.aff-page .arp-split > .arp-stack,
.aff-page .arp-split > .arp-list,
.aff-page .arp-split > .arp-flowchart { grid-column: 2; }
/* the illustrative note sits under the copy */
.aff-page .arp-split > .arp-example { grid-column: 1; }

.aff-page .arp-split > h2 { align-self: end; }
.aff-page .arp-why__copy h2 { margin-bottom: 12px; }

.aff-page .arp-example {
    margin-top: 4px;
    padding: 16px 18px;
    border-radius: var(--aff-r);
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
}
.aff-page .arp-example__k {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aff-brand-700);
}
.aff-page .arp-example p { font-size: 13px; margin: 0; }

/* three-tier structure — cascading step cards, each nudged further right than
   the last to echo the referral chain (L1 refers L2 refers L3), joined by a
   dotted drop-connector. Mirrors the .arp-tl timeline's node/connector idea
   but vertical, since this list lives in the narrower right column of a
   .arp-split rather than spanning the full section width. */
.aff-page .arp-stack {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.aff-page .arp-tier {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--aff-r);
    background: linear-gradient(175deg, var(--aff-brand-050) 0%, var(--aff-surface) 65%);
    border: 1px solid var(--aff-brand-100);
    box-shadow: var(--aff-sh-1);
    transition: transform .2s var(--aff-ease), box-shadow .2s var(--aff-ease),
                border-color .2s var(--aff-ease);
}
.aff-page .arp-tier:hover {
    transform: translateY(-3px);
    box-shadow: var(--aff-sh-2);
    border-color: #d3e3cc;
}
.aff-page .arp-tier--2 { margin-left: clamp(18px, 4vw, 40px); }
.aff-page .arp-tier--3 { margin-left: clamp(36px, 8vw, 80px); }

/* dotted connector dropping from one card's badge down into the next */
.aff-page .arp-tier:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 39px;
    bottom: -27px;
    width: 2px;
    height: 26px;
    background: repeating-linear-gradient(180deg, var(--aff-brand-100) 0 5px, transparent 5px 11px);
}

.aff-page .arp-tier__rate {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: var(--aff-r-sm);
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    font-weight: 700;
}
/* Level 3 reads as the "furthest" tier, so it borrows the amber tint used
   elsewhere on this page for a de-emphasized third place (leaderboard rank 1
   disc) rather than the brand green used for levels 1-2. */
.aff-page .arp-tier--3 .arp-tier__rate {
    background: #fbeecb;
    border-color: #edd8a4;
    color: #b57b12;
}
.aff-page .arp-tier__body { min-width: 0; padding-top: 3px; }
.aff-page .arp-tier__lvl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--aff-ink);
}
.aff-page .arp-tier__kind {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.aff-page .arp-tier p { font-size: 14px; margin: 0; color: var(--aff-muted); line-height: 1.6; }

/* ==========================================================================
   8b. SECTION SHELLS

   Two shells share one token contract (--ch-*), so the compositions built on
   top of them (.arp-ben / .arp-play / .arp-net) are written once and simply
   inherit whichever palette their section declares:

     .arp-ch--why   a single full-bleed dark band — the one dark accent between
                    the light Three-Tier section above and the light run below
     .arp-lite      the light run: every section from "Benefits for You" down to
                    "Tools for Your Network", alternating surface --a / --b.
                    .arp-close keeps its own dark treatment and is not tagged.
   ========================================================================== */

/* ---- dark shell (why build a network) ---- */
.aff-page .arp-ch {
    --ch-line: rgba(255, 255, 255, .09);
    --ch-line-str: rgba(255, 255, 255, .16);
    --ch-lime: #9be25f;
    --ch-lime-dim: rgba(155, 226, 95, .22);
    --ch-surface: rgba(255, 255, 255, .028);
    --ch-surface-2: rgba(255, 255, 255, .052);
    --ch-ink: #fff;
    --ch-ink-2: rgba(255, 255, 255, .74);
    --ch-muted: rgba(255, 255, 255, .52);
    --ch-r: 14px;
    --ch-r-lg: 20px;

    position: relative;
    z-index: 0;
    padding-top: clamp(48px, 5vw, 80px);
    padding-bottom: clamp(48px, 5vw, 80px);
    color: var(--ch-ink-2);
}
.aff-page .arp-ch::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -2;
    background: linear-gradient(180deg, #0a2b12 0%, #061d0c 55%, #051708 100%);
}

/* ---- light shell (everything below it) ---- */
/* Same token names as the dark shell, light values — this is what lets the
   three compositions below be authored once instead of twice. */
.aff-page .arp-lite {
    --ch-line: var(--aff-line);
    --ch-line-str: #d5ded0;
    --ch-lime: var(--aff-brand-600);
    --ch-lime-dim: var(--aff-brand-100);
    --ch-surface: var(--aff-surface);
    --ch-surface-2: var(--aff-surface-2);
    --ch-ink: var(--aff-ink);
    --ch-ink-2: var(--aff-ink-2);
    --ch-muted: var(--aff-muted);
    --ch-r: 14px;
    --ch-r-lg: 20px;

    position: relative;
    z-index: 0;
    padding-top: clamp(48px, 5vw, 80px);
    padding-bottom: clamp(48px, 5vw, 80px);
    color: var(--aff-ink-2);
}
/* alternating full-bleed surfaces; --a is the page white, --b a soft green-grey */
.aff-page .arp-lite::before {
    content: "";
    position: absolute;
    top: 0;
    /* 1px overlap so sub-pixel section heights cannot leave a seam between
       two adjacent bands of different colour */
    bottom: -1px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -2;
}
.aff-page .arp-lite--a::before { background: var(--aff-surface); }
.aff-page .arp-lite--b::before { background: var(--aff-surface-2); }
/* the last light band closes onto the page rather than onto another band */
.aff-page .arp-lite:last-of-type::before { bottom: 0; }

/* the page's own section padding rule would otherwise re-add space on top */
.aff-page > .container.arp-ch,
.aff-page > .container.arp-lite { padding-bottom: clamp(48px, 5vw, 80px); }

/* The Three-Tier Structure section sits directly above the dark band, and the
   band's slab starts at the band container's own top edge — so that container's
   padding-top falls INSIDE the dark field and buys no space on the light side.
   Sections elsewhere on the page can lean on the next one's padding-top for
   separation; this one has to carry its own. */
.aff-page > .container.arp-tier-sec { padding-bottom: clamp(44px, 4.6vw, 74px); }

/* shared typography for both shells */
.aff-page .arp-ch .arp-eyebrow {
    background: rgba(124, 212, 78, .1);
    border-color: rgba(124, 212, 78, .26);
    color: var(--ch-lime);
}
.aff-page .arp-ch .arp-eyebrow::before { background: #7cd44e; }
.aff-page .arp-ch h2,
.aff-page .arp-lite h2 { color: var(--ch-ink); }
.aff-page .arp-ch h2 em,
.aff-page .arp-lite h2 em { color: var(--ch-lime); }
.aff-page .arp-ch h3,
.aff-page .arp-lite h3 { color: var(--ch-ink); }
.aff-page .arp-ch p { color: var(--ch-muted); }

/* Trailing footnote — a bare <p> sitting as a direct child of a light section,
   after its content block (the tools grid, the ledger table). It inherits the
   default left-aligned body paragraph otherwise, which read as misaligned under
   a centred section head. Treated as a footnote instead: centred on its own
   measure, a step down in size and colour. */
.aff-page > .container.arp-lite > p {
    max-width: 62ch;
    margin: clamp(20px, 2.2vw, 30px) auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.65;
    color: var(--aff-muted-2);
}

/* -------------------------------------------- 8c. why build a network (split) */
/* Copy on the left, the six reasons as cards on the right — the section's
   original composition, rebuilt in the dark shell's language: layered surfaces,
   hairline lime borders, a counter in place of the repeated checkmark icon. */
.aff-page .arp-ch--why .arp-why__copy {
    grid-column: 1;
    /* the copy tracks the card column rather than sitting flush to the top */
    padding-top: 4px;
}
.aff-page .arp-ch--why .arp-why__copy h2 {
    margin-bottom: 14px;
    font-size: clamp(26px, 2.9vw, 38px);
    line-height: 1.12;
}
.aff-page .arp-ch--why .arp-why__copy p {
    max-width: 44ch;
    font-size: clamp(14.5px, 1.05vw, 15.5px);
    line-height: 1.75;
    color: var(--ch-ink-2);
    margin: 0;
}

.aff-page .arp-ch--why .arp-list {
    grid-column: 2;
    display: grid;
    gap: 10px;
    counter-reset: why;
}
.aff-page .arp-ch--why .arp-list__row {
    counter-increment: why;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 0 14px;
    padding: 16px 18px;
    border-radius: var(--ch-r);
    background: linear-gradient(168deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 100%);
    border: 1px solid var(--ch-line);
    box-shadow: 0 10px 26px rgba(2, 14, 6, .26);
    transition: transform .2s var(--aff-ease), border-color .2s var(--aff-ease),
                box-shadow .2s var(--aff-ease);
}
.aff-page .arp-ch--why .arp-list__row:hover {
    transform: translateY(-2px);
    border-color: rgba(155, 226, 95, .3);
    box-shadow: 0 14px 32px rgba(2, 14, 6, .34);
}
/* counter tile replaces the six identical checkmarks */
.aff-page .arp-ch--why .arp-list__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(155, 226, 95, .1);
    border: 1px solid rgba(155, 226, 95, .24);
    color: var(--ch-lime);
    font-family: "Rubik", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}
.aff-page .arp-ch--why .arp-list__mark::after {
    content: counter(why, decimal-leading-zero);
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
}
.aff-page .arp-ch--why .arp-list__row h3 {
    margin-bottom: 5px;
    font-size: clamp(15px, 1.1vw, 16.5px);
}
.aff-page .arp-ch--why .arp-list__row p {
    font-size: 13.8px;
    margin: 0;
    line-height: 1.65;
    max-width: 42ch;
}

/* --------------------------------------------- 9. benefits (bento showcase) */
/* Not a uniform grid: the three-level structure is the actual product value, so
   it becomes a hero panel with the rate flow inside it, and the five supporting
   benefits sit beside it as a quiet hairline rail. Two different weights of the
   same language rather than six identical tiles. */
.aff-page .arp-adv {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(26px, 3.6vw, 56px);
    align-items: start;
}
.aff-page .arp-adv__intro { position: sticky; top: 100px; }
.aff-page .arp-adv__rule {
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--aff-brand), var(--aff-brand-100));
}
/* Same measure as the "Why Build a Network?" lead paragraph. The type scale has
   to match too: `ch` resolves against the element's own font-size, so 44ch on a
   16px paragraph is 24px wider than 44ch on the 15.12px one next door — the
   declared value would match while the rendered width did not. */
.aff-page .arp-ben .arp-adv__intro p {
    max-width: 44ch;
    font-size: clamp(14.5px, 1.05vw, 15.5px);
    line-height: 1.75;
    color: var(--ch-ink-2);
}

.aff-page .arp-feats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
/* Even 50/50 split: the intro on the left, the benefit list on the right. */
.aff-page .arp-ben .arp-adv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* One hairline column in source order, so the numbered sequence reads 01-05
   top to bottom. Item 03 stays in place and carries the emphasis instead of
   being promoted out of the list. */
.aff-page .arp-ben .arp-feats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-items: start;
}

.aff-page .arp-feat {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 20px 18px;
    border-radius: var(--aff-r);
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    box-shadow: var(--aff-sh-1);
    transition: transform .2s var(--aff-ease), box-shadow .2s var(--aff-ease),
                border-color .2s var(--aff-ease);
}
.aff-page .arp-feat:hover {
    transform: translateY(-3px);
    box-shadow: var(--aff-sh-2);
    border-color: #d3e3cc;
}
/* --ben-ico drives both the tile and the grid track that reserves room for it;
   changing it in one place keeps them from drifting out of step */
.aff-page .arp-ben { --ben-ico: 42px; }

/* ---- supporting rail: flat rows divided by hairlines, no boxes ---- */
.aff-page .arp-ben .arp-feat {
    display: grid;
    grid-template-columns: var(--ben-ico) minmax(0, 1fr);
    gap: 2px 14px;
    padding: clamp(15px, 1.5vw, 19px) 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--ch-line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: border-color .25s var(--aff-ease);
}
.aff-page .arp-ben .arp-feat:hover {
    transform: none;
    box-shadow: none;
    border-top-color: var(--ch-lime-dim);
}
/* every rail row keeps its rule: the hero sits above them, so the first rule is
   what separates the hero from the rail */

/* ---- lead item (Three-Tier Structure) ----
   No panel of its own: no border, background or shadow, and the same
   icon-beside-title row as every other item — the rate flow beneath it is what
   sets it apart, not a different layout. */
.aff-page .arp-ben .arp-feat:nth-child(3) {
    display: grid;
    grid-template-columns: var(--ben-ico) minmax(0, 1fr);
    gap: 2px 14px;
    align-items: start;
    padding: clamp(22px, 2.2vw, 30px) 0;
    border: 0;
    border-top: 1px solid var(--ch-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.aff-page .arp-ben .arp-feat:nth-child(3):hover {
    box-shadow: none;
    border-top-color: var(--ch-lime-dim);
}
.aff-page .arp-ben .arp-feat:nth-child(3) .arp-feat__body p { max-width: 34ch; }
/* no index markers in this section — the numbered reading order carries the
   sequence on its own */
.aff-page .arp-ben .arp-feat__idx { display: none; }

.aff-page .arp-feat__idx {
    position: absolute;
    top: 14px;
    right: 16px;
    font-family: "Rubik", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #cfdac9;
    letter-spacing: .04em;
}
.aff-page .arp-feat__ico {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    position: relative;
}
.aff-page .arp-ben .arp-feat__ico {
    width: var(--ben-ico);
    height: var(--ben-ico);
    border-radius: 12px;
    background: var(--aff-brand-050);
    border-color: var(--aff-brand-100);
    color: var(--aff-brand-700);
}
.aff-page .arp-ben .arp-feat__ico::after { width: 23px; height: 23px; }
.aff-page .arp-feat__ico::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--i-check);
    mask-image: var(--i-check);
}
.aff-page .arp-feat:nth-child(1) .arp-feat__ico::after { -webkit-mask-image: var(--i-link);   mask-image: var(--i-link); }
.aff-page .arp-feat:nth-child(2) .arp-feat__ico::after { -webkit-mask-image: var(--i-chart);  mask-image: var(--i-chart); }
.aff-page .arp-feat:nth-child(3) .arp-feat__ico::after { -webkit-mask-image: var(--i-share);  mask-image: var(--i-share); }
.aff-page .arp-feat:nth-child(4) .arp-feat__ico::after { -webkit-mask-image: var(--i-eye);    mask-image: var(--i-eye); }
.aff-page .arp-feat:nth-child(5) .arp-feat__ico::after { -webkit-mask-image: var(--i-users);  mask-image: var(--i-users); }

.aff-page .arp-feat__body { min-width: 0; padding-right: 28px; }
.aff-page .arp-feat__body h3 { margin-bottom: 5px; }
.aff-page .arp-feat__body p { font-size: 13.5px; margin: 0; }
.aff-page .arp-ben .arp-feat__body { padding-right: 0; }
.aff-page .arp-ben .arp-feat__body h3 {
    font-size: clamp(17px, 1.5vw, 21.5px);
    line-height: 1.25;
    margin-bottom: 7px;
    color: var(--aff-ink-2);
}
/* body copy steps up with the titles so the type ratio stays balanced */
.aff-page .arp-ben .arp-feat__body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ch-ink-2);
}

/* inline 3-stage flow inside a feature card */
.aff-page .arp-tier-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
}
.aff-page .arp-tier-stage {
    flex: 1 1 74px;
    padding: 9px 10px;
    border-radius: var(--aff-r-xs);
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
    text-align: center;
}
.aff-page .arp-tier-stage__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.aff-page .arp-tier-stage__pct {
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--aff-brand-700);
}
.aff-page .arp-tier-flow__arrow {
    width: 12px;
    height: 12px;
    background: #c2cfbb;
    -webkit-mask: var(--i-chevron) center / contain no-repeat;
    mask: var(--i-chevron) center / contain no-repeat;
}
.aff-page .arp-tier-stage__lvl {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--aff-muted-2);
}
/* the rate flow sits tight under item 03's line of copy — no divider rule and
   no extra top margin, so it reads as part of that sentence */
.aff-page .arp-ben .arp-tier-flow {
    margin-top: 0;
    padding-top: 15px;
    border-top: 0;
    gap: 10px;
}
/* Stages carry no box of their own: the figure, a light chevron and a small
   uppercase level label are the whole treatment, so the row reads as one
   continuous 5% → 2% → 1% progression rather than three separate chips.
   Level 3 takes the amber accent already used for the third tier elsewhere. */
.aff-page .arp-ben .arp-tier-stage {
    flex: 0 1 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.aff-page .arp-ben .arp-tier-stage__row { gap: 8px; }
.aff-page .arp-ben .arp-tier-stage__pct {
    font-size: clamp(20px, 1.9vw, 27px);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--aff-brand-700);
}
.aff-page .arp-ben .arp-tier-stage--3 .arp-tier-stage__pct { color: #b57b12; }
.aff-page .arp-ben .arp-tier-stage__lvl {
    margin-top: 6px;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--aff-muted-2);
}
.aff-page .arp-ben .arp-tier-flow__arrow {
    width: 14px;
    height: 14px;
    background: #c2cfbb;
}

/* ------------------------------------- 9b. quality network (playbook rail) */
/* Reads left-to-right as a process, not top-to-bottom as a list. A single
   progress line runs across the top of all five steps with a marker per step;
   the step number is set large and low-contrast so it organises the row
   without competing with the headings. Deliberately box-free — the only
   structure is the shared rule and the column rhythm. */
.aff-page .arp-play .arp-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.aff-page .arp-play .arp-why__copy {
    grid-column: 1;
    max-width: 720px;
    padding-bottom: clamp(34px, 3.6vw, 56px);
}
.aff-page .arp-play .arp-why__copy h2 { margin-bottom: 12px; }
.aff-page .arp-play .arp-why__copy p {
    color: var(--ch-ink-2);
    max-width: 60ch;
    margin: 0;
    line-height: 1.75;
}

.aff-page .arp-play .arp-list {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    column-gap: clamp(18px, 2vw, 32px);
    counter-reset: play;
}
.aff-page .arp-play .arp-list__row {
    counter-increment: play;
    position: relative;
    display: block;
    padding: clamp(26px, 2.6vw, 36px) 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
}
/* the rail itself: one hairline per column, joined edge to edge */
.aff-page .arp-play .arp-list__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* overshoot by the column gap so neighbouring rules meet with no break */
    right: calc(-1 * clamp(18px, 2vw, 32px));
    height: 1px;
    background: var(--ch-line-str);
}
.aff-page .arp-play .arp-list__row:last-child::before { right: 0; }
/* progress marker sitting on the rail */
.aff-page .arp-play .arp-list__row::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aff-surface);
    border: 1.5px solid var(--aff-brand-100);
    transition: background-color .25s var(--aff-ease), border-color .25s var(--aff-ease),
                box-shadow .25s var(--aff-ease);
}
.aff-page .arp-play .arp-list__row:hover::after {
    background: var(--ch-lime);
    border-color: var(--ch-lime);
    box-shadow: 0 0 0 4px var(--aff-brand-050);
}
/* large step numeral — the source already ships "01".."05" in the mark span */
.aff-page .arp-play .arp-list__mark {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: clamp(14px, 1.6vw, 22px);
    border: 0;
    border-radius: 0;
    background: none;
    font-family: "Rubik", sans-serif;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #d3ddcd;
    transition: color .25s var(--aff-ease);
}
.aff-page .arp-play .arp-list__mark::after { content: none; }
.aff-page .arp-play .arp-list__row:hover .arp-list__mark { color: var(--ch-lime); }
.aff-page .arp-play .arp-list__row h3 {
    margin-bottom: 7px;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.3;
}
.aff-page .arp-play .arp-list__row p {
    font-size: 13.4px;
    margin: 0;
    line-height: 1.65;
}

/* ----------------------------------------------------------- 10. flowchart */
.aff-page .arp-flowchart { display: grid; gap: 12px; }
.aff-page .arp-fc {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: var(--aff-r);
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    box-shadow: var(--aff-sh-1);
}
/* connector between stacked nodes */
.aff-page .arp-fc:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 100%;
    width: 2px;
    height: 12px;
    background: repeating-linear-gradient(180deg, var(--aff-line) 0 4px, transparent 4px 8px);
}
.aff-page .arp-fc--you {
    background: linear-gradient(150deg, var(--aff-deep-2), var(--aff-deep));
    border-color: transparent;
    box-shadow: var(--aff-sh-2);
}
.aff-page .arp-fc--you .arp-fc__name { color: #fff; }
.aff-page .arp-fc--you p { color: rgba(255, 255, 255, .66); }
.aff-page .arp-fc__lbl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
}
.aff-page .arp-fc__name {
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--aff-ink);
}
.aff-page .arp-fc__rate {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    font-size: 12px;
    font-weight: 700;
}
.aff-page .arp-fc p { font-size: 13.5px; margin: 0; }
.aff-page .arp-figs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 150px; }
.aff-page .arp-figs span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    position: relative;
}
.aff-page .arp-figs span::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 13px;
    height: 13px;
    background: var(--aff-brand-600);
    opacity: .75;
    -webkit-mask: var(--i-person) center / contain no-repeat;
    mask: var(--i-person) center / contain no-repeat;
}
.aff-page .arp-fc--you .arp-figs span {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
}
.aff-page .arp-fc--you .arp-figs span::after { background: #fff; opacity: .9; }

/* ------------------------------------------ 10b. network growth (diagram) */
/* The chapter's visual payoff. Four stages read left-to-right as one connected
   graph: You seeds the chain, then each level fans wider. Growth is encoded
   three ways so it lands before any text is read — the node count rises, the
   glow steps down with the rate, and a proportional bar tracks the reach. */
.aff-page .arp-net .arp-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.aff-page .arp-net .arp-split > div:not([class]) {
    grid-column: 1;
    max-width: 720px;
    padding-bottom: clamp(34px, 3.6vw, 56px);
}
.aff-page .arp-net .arp-split > div:not([class]) h2 { margin-bottom: 12px; }
.aff-page .arp-net .arp-split > div:not([class]) p {
    color: var(--ch-ink-2);
    max-width: 60ch;
    line-height: 1.75;
}
/* the source ships a duplicate restatement of the lead line — one is enough */
.aff-page .arp-net .arp-split > div:not([class]) p + p { display: none; }

.aff-page .arp-net .arp-flowchart {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    align-items: stretch;
    counter-reset: fc;
}
/* Each stage is a zoned data card rather than a padded box: a labelled header
   carrying the rate figure, then the copy, then a tinted footer holding the
   nodes. Both hairlines land at the same height in all four cards (equal header
   min-height, footer pinned to the foot), so the row reads as one table.

   --fc-r-in is the inner radius the header and footer bands need for their own
   rounding: the card cannot use overflow:hidden, because its ::before/::after
   ARE the connectors drawn outside the card and clipping would eat them. */
.aff-page .arp-net .arp-fc {
    counter-increment: fc;
    --fc-r: 14px;
    --fc-r-in: 13px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: var(--fc-r);
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    /* a tight contact shadow plus a soft ambient lift, not one flat blur */
    box-shadow: 0 1px 2px rgba(16, 26, 19, .04),
                0 10px 24px -8px rgba(16, 26, 19, .10);
    transition: border-color .25s var(--aff-ease), transform .25s var(--aff-ease),
                box-shadow .25s var(--aff-ease);
}
.aff-page .arp-net .arp-fc:hover {
    transform: translateY(-3px);
    border-color: #cbe3bf;
    box-shadow: 0 2px 4px rgba(16, 26, 19, .05),
                0 20px 42px -12px rgba(16, 26, 19, .17);
}
/* the copy zone flexes, so the footer band always sits on the card's foot */
.aff-page .arp-net .arp-fc > div:not([class]) {
    flex: 1 1 auto;
    min-width: 0;
}
/* You is the origin: brand edge and a tinted header band mark where to start */
.aff-page .arp-net .arp-fc--you { border-color: var(--aff-brand-100); }
.aff-page .arp-net .arp-fc--you .arp-fc__lbl {
    background: linear-gradient(180deg, var(--aff-brand-050), rgba(243, 249, 240, 0));
    border-radius: var(--fc-r-in) var(--fc-r-in) 0 0;
}
/* horizontal connector: a hairline that brightens toward the next stage, with a
   chevron head. Drawn into the gap, so it scales with the grid's own gap. */
.aff-page .arp-net .arp-fc:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: clamp(14px, 1.6vw, 24px);
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--aff-brand-100), var(--aff-brand));
}
.aff-page .arp-net .arp-fc:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + clamp(14px, 1.6vw, 24px) - 5px);
    width: 9px;
    height: 9px;
    transform: translateY(-50%);
    background: var(--aff-brand);
    -webkit-mask: var(--i-chevron) center / contain no-repeat;
    mask: var(--i-chevron) center / contain no-repeat;
    z-index: 1;
}

/* header zone. The You card carries no rate figure, so left to its natural
   content height its hairline landed a couple of px above the other three and
   the row stopped reading as one table. min-height cannot fix that here — under
   border-box the padding alone satisfies it — so instead the label and the
   figure are given the SAME line box (--fc-fig), which makes the band's height
   identical whether or not a figure is present. */
.aff-page .arp-net .arp-fc { --fc-fig: clamp(20px, 1.9vw, 26px); }
.aff-page .arp-net .arp-fc__lbl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--aff-line-2);
}
/* the stage name is a table-style micro-label, not a heading — it hands the
   visual weight to the rate figure sitting beside it */
.aff-page .arp-net .arp-fc__name {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    /* matches the figure's line box — see the header zone note above */
    line-height: var(--fc-fig);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aff-muted-2);
    white-space: nowrap;
}
.aff-page .arp-net .arp-fc--you .arp-fc__name { color: var(--aff-brand-700); }
/* the rate reads as data, not as a pill */
.aff-page .arp-net .arp-fc__rate {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: "Rubik", sans-serif;
    font-size: var(--fc-fig);
    font-weight: 700;
    line-height: var(--fc-fig);
    letter-spacing: -.02em;
    /* figures line up card-to-card across the row */
    font-variant-numeric: tabular-nums;
    color: var(--aff-brand-700);
}
/* Level 3 takes the amber accent used for the third tier elsewhere on the page,
   so the step down in rate is carried by hue, not just by size */
.aff-page .arp-net .arp-fc--l2 .arp-fc__rate { color: var(--aff-brand-600); }
.aff-page .arp-net .arp-fc--l3 .arp-fc__rate { color: #b57b12; }
/* body zone */
.aff-page .arp-net .arp-fc p {
    font-size: 13.2px;
    line-height: 1.65;
    margin: 0;
    padding: 14px 18px 18px;
}
.aff-page .arp-net .arp-fc--you p { color: var(--ch-ink-2); }

/* footer band — a tinted zone holding the node cluster, whose count is the
   growth signal (1 / 3 / 4 / 5). Pinned to the foot, so the band's top edge is
   level across all four cards. */
.aff-page .arp-net .arp-figs {
    margin-top: auto;
    justify-content: flex-start;
    max-width: none;
    gap: 5px;
    padding: 12px 18px;
    background: var(--aff-surface-2);
    border-top: 1px solid var(--aff-line);
    border-radius: 0 0 var(--fc-r-in) var(--fc-r-in);
}
.aff-page .arp-net .arp-figs span {
    width: 26px;
    height: 26px;
    background: #e0ede0;
    border-color: #dde4d8;
}
.aff-page .arp-net .arp-figs span::after {
    width: 11px;
    height: 11px;
    background: var(--aff-brand-600);
    /* full opacity, so the glyph renders as the brand green it is set to */
    opacity: 1;
}
/* the origin's single node is filled, so the chain visibly starts from one person */
.aff-page .arp-net .arp-fc--you .arp-figs span {
    background: var(--aff-brand-600);
    border-color: var(--aff-brand-600);
}
.aff-page .arp-net .arp-fc--you .arp-figs span::after {
    background: #fff;
    opacity: 1;
}

/* -------------------------------------------------------------- 11. ledger */
.aff-page .arp-ledger {
    max-width: 900px;
    margin: 0 auto;
}
.aff-page .arp-ledger__scroll {
    overflow-x: auto;
    border-radius: var(--aff-r-lg);
    border: 1px solid var(--aff-line);
    background: var(--aff-surface);
    box-shadow: var(--aff-sh-1);
    -webkit-overflow-scrolling: touch;

    /* Fallback for the degraded content form: this block's <table> has been
       stripped to bare text nodes by an editor/sanitiser at least once (see
       notes in the page report). The source still carries a newline per row,
       so pre-line keeps it readable instead of collapsing to one run-on
       paragraph. When real table markup is present the rules below win. */
    white-space: pre-line;
    padding: 4px 20px;
    font-variant-numeric: tabular-nums;
    line-height: 2.5;
    color: var(--aff-ink-2);
}
.aff-page .arp-ledger__scroll:has(table) { white-space: normal; padding: 0; line-height: inherit; }
.aff-page .arp-ledger__table { white-space: normal; line-height: 1.5; }
.aff-page .arp-ledger__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
}
.aff-page .arp-ledger__table th,
.aff-page .arp-ledger__table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--aff-line-2);
    white-space: nowrap;
}
.aff-page .arp-ledger__table thead th {
    background: var(--aff-surface-2);
    border-bottom: 1px solid var(--aff-line);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--aff-muted);
}
.aff-page .arp-ledger__table tbody td:first-child {
    font-family: "Rubik", sans-serif;
    font-weight: 600;
    color: var(--aff-ink);
}
.aff-page .arp-ledger__table tbody tr { transition: background-color .18s var(--aff-ease); }
.aff-page .arp-ledger__table tbody tr:hover { background: var(--aff-surface-2); }
.aff-page .arp-ledger__table td:last-child,
.aff-page .arp-ledger__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.aff-page .arp-ledger__x {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.aff-page .arp-ledger__table tfoot td {
    padding-top: 17px;
    padding-bottom: 17px;
    border-bottom: 0;
    background: var(--aff-surface-2);
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--aff-ink);
}
.aff-page .arp-ledger > p {
    margin-top: 16px;
    font-size: 13px;
    color: var(--aff-muted-2);
}

/* --------------------------------------------------------------- 12. prose */
.aff-page .arp-prose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 46px);
    max-width: 980px;
    margin: 0 auto;
}
.aff-page .arp-prose__col p { font-size: 14.5px; }
.aff-page .arp-prose__col--rule {
    padding-left: clamp(22px, 3vw, 46px);
    border-left: 1px solid var(--aff-line);
}

/* --------------------------------------------------------------- 13. tools */
.aff-page .arp-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.aff-page .arp-tool {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border-radius: var(--aff-r);
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    box-shadow: var(--aff-sh-1);
    transition: transform .2s var(--aff-ease), box-shadow .2s var(--aff-ease),
                border-color .2s var(--aff-ease);
}
.aff-page .arp-tool:hover {
    transform: translateY(-2px);
    box-shadow: var(--aff-sh-2);
    border-color: #d3e3cc;
}
.aff-page .arp-tool__ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--aff-brand-050);
    border: 1px solid var(--aff-brand-100);
    color: var(--aff-brand-700);
    position: relative;
}
.aff-page .arp-tool__ico::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--i-check);
    mask-image: var(--i-check);
}
.aff-page .arp-tool:nth-child(10n+1) .arp-tool__ico::after { -webkit-mask-image: var(--i-link);   mask-image: var(--i-link); }
.aff-page .arp-tool:nth-child(10n+2) .arp-tool__ico::after { -webkit-mask-image: var(--i-chart);  mask-image: var(--i-chart); }
.aff-page .arp-tool:nth-child(10n+3) .arp-tool__ico::after { -webkit-mask-image: var(--i-share);  mask-image: var(--i-share); }
.aff-page .arp-tool:nth-child(10n+4) .arp-tool__ico::after { -webkit-mask-image: var(--i-eye);    mask-image: var(--i-eye); }
.aff-page .arp-tool:nth-child(10n+5) .arp-tool__ico::after { -webkit-mask-image: var(--i-users);  mask-image: var(--i-users); }
.aff-page .arp-tool:nth-child(10n+6) .arp-tool__ico::after { -webkit-mask-image: var(--i-wallet); mask-image: var(--i-wallet); }
.aff-page .arp-tool:nth-child(10n+7) .arp-tool__ico::after { -webkit-mask-image: var(--i-target); mask-image: var(--i-target); }
.aff-page .arp-tool:nth-child(10n+8) .arp-tool__ico::after { -webkit-mask-image: var(--i-shield); mask-image: var(--i-shield); }
.aff-page .arp-tool:nth-child(10n+9) .arp-tool__ico::after { -webkit-mask-image: var(--i-bolt);   mask-image: var(--i-bolt); }
.aff-page .arp-tool:nth-child(10n)   .arp-tool__ico::after { -webkit-mask-image: var(--i-check);  mask-image: var(--i-check); }

.aff-page .arp-tool__t {
    font-size: 14px;
    font-weight: 600;
    color: var(--aff-ink);
    line-height: 1.4;
}

/* --------------------------------------------------------------- 14. close */
.aff-page .arp-close {
    position: relative;
    overflow: hidden;
    margin-top: clamp(10px, 2vw, 26px);
    padding: clamp(30px, 4.2vw, 60px);
    border-radius: var(--aff-r-xl);
    background:
        radial-gradient(90% 120% at 12% 0%, rgba(96, 165, 72, .26), transparent 55%),
        linear-gradient(155deg, var(--aff-deep-2), var(--aff-deep));
    box-shadow: var(--aff-sh-3);
    text-align: center;
}
.aff-page .arp-close h2 { color: #fff; font-size: clamp(26px, 3.2vw, 40px); }
.aff-page .arp-close h2 em { color: #a9d894; }
.aff-page .arp-close > p {
    max-width: 640px;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, .72);
    font-size: 15.5px;
}
.aff-page .arp-close ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.aff-page .arp-close li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .9);
    font-size: 13.5px;
    font-weight: 600;
}
.aff-page .arp-close li::before {
    content: "";
    width: 14px;
    height: 14px;
    background: #a9d894;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
}
.aff-page .arp-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}
.aff-page .arp-actions > a:last-child { color: rgba(255, 255, 255, .92); }
.aff-page .arp-actions > a:last-child:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    transform: translateY(-2px);
}
.aff-page .arp-close__brand {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}
.aff-page .arp-close__brandname {
    display: block;
    font-family: "Rubik", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}
.aff-page .arp-close__tagline {
    display: block;
    margin-bottom: 14px;
    color: #a9d894;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
}
.aff-page .arp-close__brand p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .5);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ====================================================== 15. RESPONSIVE ==== */

/* ---- large desktop: a touch more air, wider hero ---- */
@media (min-width: 1400px) {
    .aff-page { --aff-hero-h: 720px; }
    .aff-page .arp-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aff-page .arp-adv { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}

/* ---- ≤1199px: tablet landscape / small desktop ---- */
@media (max-width: 1199px) {
    .aff-page { --aff-hero-h: 620px; }
    /* timeline is vertical at every width, so it needs no re-flow here */
    .aff-page .arp-adv__intro { position: static; }

    /* CHAPTER — playbook: 5 abreast gets too narrow to read, so it becomes a
       3 + 2 grid. Row rules per cell keep the progression legible. */
    .aff-page .arp-play .arp-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: clamp(22px, 2.4vw, 32px);
    }
    /* the rule must stop at the end of each visual row, not overshoot into it */
    .aff-page .arp-play .arp-list__row:nth-child(3n)::before,
    .aff-page .arp-play .arp-list__row:last-child::before { right: 0; }

    /* network diagram: 4 across is too tight — 2 x 2 keeps the node clusters
       readable. Connectors become vertical between the two rows. */
    .aff-page .arp-net .arp-flowchart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aff-page .arp-net .arp-fc:nth-child(2)::after,
    .aff-page .arp-net .arp-fc:nth-child(2)::before { display: none; }
}

/* ---- ≤991px: tablet portrait — hero and splits go single-column ---- */
@media (max-width: 991px) {
    .aff-page { --aff-hero-h: 560px; }

    .aff-page .agvp-grid { grid-template-columns: minmax(0, 1fr); }
    .aff-page .agvp-globe img { width: min(560px, 90vw); transform: translate(22%, -14%); }
    .aff-page .agvp-photo { width: 100%; opacity: .28; }
    .aff-page .agvp-tiers { margin-top: 34px; }

    .aff-page .arp-split,
    .aff-page .arp-adv { grid-template-columns: minmax(0, 1fr); }
    .aff-page .arp-split > *,
    .aff-page .arp-split > .arp-stack,
    .aff-page .arp-split > .arp-list,
    .aff-page .arp-split > .arp-flowchart,
    .aff-page .arp-split > .arp-example { grid-column: 1; }

    .aff-page .arp-prose { grid-template-columns: minmax(0, 1fr); }
    .aff-page .arp-prose__col--rule { padding-left: 0; border-left: 0; padding-top: 4px; }

    .aff-page .arp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* why: the split collapses (handled by the generic .arp-split rule above),
       so the copy runs full width and the six cards follow beneath it */
    .aff-page .arp-ch--why .arp-list { grid-column: 1; }
    .aff-page .arp-ch--why .arp-why__copy p,
    .aff-page .arp-ben .arp-adv__intro p { max-width: 62ch; }

    /* benefits: intro stacks above; hero + rail already stack, so nothing to
       re-place here beyond the intro column collapsing */
    .aff-page .arp-ben .arp-adv { grid-template-columns: minmax(0, 1fr); }

    /* three podium cards no longer fit abreast — fall back to one full-width
       bar per person (the 4-track grid makes each group wrap to its own row) */
    .aff-page .arp-top10-podium { grid-template-columns: 44px 48px minmax(0, 1fr) auto; }
    .aff-page .arp-top10-podium > :nth-child(4n) { margin-right: 0; }
}

/* ---- ≤767px: phones — keep 2-up where it reads well, no naive stacking ---- */
@media (max-width: 767px) {
    .aff-page { --aff-hero-h: 520px; font-size: 14.5px; }

    .aff-page > .container { padding-top: 44px; }
    /* padding-bottom stays at the 254px CTA reserve — see the base rule */

    /* hero */
    .aff-page .container.agvp__inner { padding-top: 34px; padding-bottom: 34px; }
    .aff-page .agvp-col-left > h2 { font-size: clamp(28px, 8.4vw, 36px); }
    .aff-page .agvp-col-left > p { font-size: 14.5px; }
    .aff-page .agvp-globe { opacity: .1; }

    /* the staircase is kept on phones (it is the point of the section) —
       only the scale comes down */
    .aff-page .agvp-tiers { gap: 0 8px; margin-top: 28px; }
    .aff-page .agvp-tier__pct { border-radius: 12px; padding-top: 12px; font-size: 21px; }
    .aff-page .agvp-tiers > :nth-child(1) { --agvp-card-h: 176px; }
    .aff-page .agvp-tiers > :nth-child(4) { --agvp-card-h: 146px; font-size: 19px; }
    .aff-page .agvp-tiers > :nth-child(7) { --agvp-card-h: 120px; font-size: 17px; }
    .aff-page .agvp-tiers > :nth-child(2) { --agvp-card-h: 176px; }
    .aff-page .agvp-tiers > :nth-child(5) { --agvp-card-h: 146px; }
    .aff-page .agvp-tiers > :nth-child(8) { --agvp-card-h: 120px; }
    /* radius intentionally not set — the Bézier mask defines the silhouette;
       no side inset either, so the curves reach the card edges */
    .aff-page .agvp-tier__foot { margin-inline: 0; padding: 5px 6px; }
    .aff-page .agvp-tier__sub { font-size: 10px; }
    .aff-page .agvp-tier__lvl { margin: 0 6px 8px; padding: 5px 6px; font-size: 10px; border-radius: 7px; }
    .aff-page .agvp-step { grid-template-columns: 30px 30px minmax(0, 1fr); padding: 14px; gap: 4px 10px; }

    /* timeline: same vertical rail, tightened for a phone-width column */
    .aff-page .arp-tl { grid-template-columns: 38px minmax(0, 1fr); column-gap: 13px; }
    .aff-page .arp-tl__line { left: 19px; }
    .aff-page .arp-tl__node {
        width: 36px;
        height: 36px;
        font-size: 13px;
        margin-top: 13px;
        box-shadow: 0 0 18px rgba(124, 212, 78, .2);
    }
    .aff-page .arp-tl__body { padding: 15px 16px; }
    .aff-page .arp-tl__icon { width: 34px; height: 34px; margin-bottom: 10px; }
    .aff-page .arp-tl__icon::after { width: 17px; height: 17px; }

    /* podium → 2-row bar per person (rank+avatar+name, then earnings) */
    .aff-page .arp-top10-podium {
        grid-template-columns: 40px 42px minmax(0, 1fr);
        row-gap: 10px;
    }
    .aff-page .arp-top10-podium > * { padding: 13px 0; }
    .aff-page .arp-top10-podium > .arp-top10-rank { padding-left: 14px; }
    .aff-page .arp-top10-podium > .arp-top10-rank::before { width: 22px; height: 22px; }
    .aff-page .arp-top10-podium > :nth-child(4n + 1) { border-radius: var(--aff-r) 0 0 0; }
    .aff-page .arp-top10-podium > :nth-child(4n + 3) {
        border-radius: 0 var(--aff-r) 0 0;
        border-right: 1px solid var(--aff-line);
        padding-right: 16px;
    }
    .aff-page .arp-top10-podium > :nth-child(4n) {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 16px 14px;
        border-top: 1px dashed var(--aff-line);
        border-inline: 1px solid var(--aff-line);
        border-radius: 0 0 var(--aff-r) var(--aff-r);
        text-align: left;
    }
    .aff-page .arp-top10-podium > :nth-child(4n) .arp-top10-earn-label { order: -1; }
    .aff-page .arp-top10-podium > :nth-child(-n + 4) { border-color: #f0e4c2; }
    .aff-page .arp-top10-avatar img { width: 34px; height: 34px; }
    .aff-page .arp-top10-id { padding-left: 12px; }

    /* leaderboard rows → 2-line layout, keeps values aligned right */
    .aff-page .arp-top10-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 13px 16px;
    }
    .aff-page .arp-top10-row__referred {
        grid-column: 2 / -1;
        justify-self: start;
        font-size: 11.5px;
        padding: 3px 10px;
    }
    .aff-page .arp-top10-row__earn { grid-row: 1; grid-column: 3; }
    .aff-page .arp-panel__head { padding: 15px 16px; flex-wrap: wrap; }

    /* ledger → label/value cards (no horizontal scrolling) */
    .aff-page .arp-ledger__scroll { overflow-x: visible; border: 0; background: transparent; box-shadow: none; }
    .aff-page .arp-ledger__table,
    .aff-page .arp-ledger__table tbody,
    .aff-page .arp-ledger__table tfoot,
    .aff-page .arp-ledger__table tr,
    .aff-page .arp-ledger__table td { display: block; width: 100%; }
    .aff-page .arp-ledger__table thead { display: none; }
    .aff-page .arp-ledger__table tr {
        margin-bottom: 12px;
        border-radius: var(--aff-r);
        border: 1px solid var(--aff-line);
        background: var(--aff-surface);
        box-shadow: var(--aff-sh-1);
        overflow: hidden;
    }
    .aff-page .arp-ledger__table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 11px 16px;
        white-space: normal;
        text-align: right;
        border-bottom: 1px solid var(--aff-line-2);
    }
    .aff-page .arp-ledger__table td:last-child { border-bottom: 0; }
    .aff-page .arp-ledger__table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--aff-muted-2);
        text-align: left;
    }
    .aff-page .arp-ledger__table tbody td:first-child { background: var(--aff-surface-2); }
    .aff-page .arp-ledger__table tfoot tr { background: var(--aff-brand-050); border-color: var(--aff-brand-100); }
    .aff-page .arp-ledger__table tfoot td { background: transparent; padding: 13px 16px; }

    /* flowchart */
    .aff-page .arp-fc { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
    .aff-page .arp-figs { justify-content: flex-start; max-width: none; }
    .aff-page .arp-fc:not(:last-child)::after { left: 28px; }

    /* keep two-up grids where the content is short enough to read well */
    .aff-page .arp-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .aff-page .arp-tool { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .aff-page .arp-tool__t { font-size: 13px; }

    .aff-page .arp-feats { grid-template-columns: minmax(0, 1fr); }
    .aff-page .arp-feat { padding: 17px 16px; }

    .aff-page .arp-list__row { padding: 15px 16px; }
    .aff-page .arp-intro__body { padding: 18px 18px; }

    /* -------------- SECTIONS: recomposed, not shrunk -------------- */
    .aff-page .arp-ch,
    .aff-page .arp-lite {
        padding-top: clamp(40px, 9vw, 56px);
        padding-bottom: clamp(40px, 9vw, 56px);
    }
    .aff-page > .container.arp-ch,
    .aff-page > .container.arp-lite { padding-bottom: clamp(40px, 9vw, 56px); }

    /* why — cards stack into one column under the copy */
    .aff-page .arp-ch--why .arp-list__row { padding: 15px 16px; }

    /* benefits — hero panel keeps its presence but loses the heavy padding */
    .aff-page .arp-ben .arp-feat { padding: 15px 0; }
    .aff-page .arp-ben .arp-feat:nth-child(3) { padding: 20px 0; }
    /* the flow can wrap on a narrow phone; the chevrons keep the order readable */
    .aff-page .arp-ben .arp-tier-flow { gap: 10px 12px; }

    /* playbook — becomes a vertical rail: the numeral moves beside the copy and
       the progress line runs down the left edge, so the sequence still reads */
    .aff-page .arp-play .arp-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }
    .aff-page .arp-play .arp-list__row {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
        padding: 20px 0 20px 0;
    }
    .aff-page .arp-play .arp-list__row::before {
        /* horizontal rule per row instead of the shared top rail */
        right: 0;
        left: 0;
    }
    .aff-page .arp-play .arp-list__row:first-child::before { display: none; }
    .aff-page .arp-play .arp-list__row::after { display: none; }
    .aff-page .arp-play .arp-list__mark {
        grid-row: 1 / span 2;
        margin-bottom: 0;
        font-size: 30px;
        line-height: .9;
        color: #d3ddcd;
    }

    /* network diagram — one stage per row, connectors turn vertical and sit on
       the left so the chain still reads top-to-bottom */
    .aff-page .arp-net .arp-flowchart {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    .aff-page .arp-net .arp-fc { padding: 0; }
    .aff-page .arp-net .arp-fc:not(:last-child)::after,
    .aff-page .arp-net .arp-fc:nth-child(2)::after {
        display: block;
        top: 100%;
        left: 32px;
        width: 1px;
        height: 26px;
        transform: none;
        background: linear-gradient(180deg, var(--aff-brand), var(--aff-brand-100));
    }
    .aff-page .arp-net .arp-fc:not(:last-child)::before,
    .aff-page .arp-net .arp-fc:nth-child(2)::before {
        display: block;
        top: calc(100% + 26px - 8px);
        left: 28px;
        width: 9px;
        height: 9px;
        transform: rotate(90deg);
    }
    .aff-page .arp-net .arp-fc:last-child::after,
    .aff-page .arp-net .arp-fc:last-child::before { display: none; }
    .aff-page .arp-net .arp-fc p { padding: 13px 16px 16px; }
    .aff-page .arp-net .arp-fc__lbl { padding: 14px 16px 12px; }
    .aff-page .arp-net .arp-figs { padding: 11px 16px; }

    /* hero cards */
    .aff-page .agvp-card__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .aff-page .agvp-steps-wrap { padding: 18px 16px; }

    /* close */
    .aff-page .arp-close { padding: 28px 20px; border-radius: var(--aff-r-lg); }
    .aff-page .arp-actions { flex-direction: column; }
    .aff-page .arp-actions > a { width: 100%; }
}

/* ---- ≤479px: very small phones ---- */
@media (max-width: 479px) {
    .aff-page { --aff-hero-h: 470px; }
    /* tools stay 2-up even here — they are short chips, and a single column
       would turn the section into a plain vertical list */
    .aff-page .arp-tools { gap: 8px; }
    .aff-page .arp-tool { padding: 12px; }
    .aff-page .arp-tool__t { font-size: 12.5px; }
    .aff-page .arp-top10-podium { grid-template-columns: 36px 38px minmax(0, 1fr); }
    .aff-page .arp-top10-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .aff-page .arp-top10-row__earn { font-size: 14px; min-width: 0; }
    .aff-page .arp-tier__rate { width: 52px; height: 52px; font-size: 17px; }
    .aff-page .arp-stack { gap: 20px; }
    .aff-page .arp-tier { padding: 16px; }
    /* stagger reads as premium on the roomier split layout, but on a phone the
       column is already narrow — indenting further would crowd the card text */
    .aff-page .arp-tier--2, .aff-page .arp-tier--3 { margin-left: 0; }
    .aff-page .arp-tier:not(:last-child)::after { left: 33px; bottom: -18px; height: 18px; }
}

/* --------------------------------------------------- 16. motion / a11y --- */
@media (prefers-reduced-motion: reduce) {
    .aff-page *,
    .aff-page *::before,
    .aff-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    /* no cycling: hold the first affiliate card visible instead of collapsing
       every slide to opacity 0 */
    .aff-page .agvp-stack > * { animation: none; opacity: 0; transform: none; }
    .aff-page .agvp-stack > :nth-child(1),
    .aff-page .agvp-stack > :nth-child(2) { opacity: 1; }
    .aff-page .arp-tl__body:hover,
    .aff-page .arp-list__row:hover,
    .aff-page .arp-feat:hover,
    .aff-page .arp-tool:hover,
    .aff-page .agvp-col-left > a:hover,
    .aff-page .arp-actions > a:hover { transform: none; }
}

/* print — drop decoration, keep content legible */
@media print {
    .aff-page .agvp__bg,
    .aff-page .agvp-globe,
    .aff-page .agvp-photo { display: none; }
    .aff-page .arp-close,
    .aff-page .agvp-steps-wrap,
    .aff-page .arp-fc--you { background: #fff !important; color: #000 !important; box-shadow: none; }
    .aff-page .arp-close h2,
    .aff-page .arp-close__brandname { color: #000 !important; }
}