/* /affiliates: Vanta's Affiliate Program. Built from Adam's website build guide (2026-09-30) and the
   approved demo. Tokens, type and layout follow the guide's section 4.

   The page carries the site's own nav, so it loads css/vanta-gold.css first, and this file keeps out of
   that one's way (Luke, Oct 5: one top nav across the whole site):
   - The fonts, --serif, --sans and --mono come from vanta-gold.css. The two tokens it defines for every
     page under the same names as this page's are --a-ink and --a-sec-y here (and --a-ink-2 beside them).
   - Class names vanta-gold.css styles are renamed here (.aff-hero, .aff-marker, .chip-set, .aff-steps,
     .fact-cell, .scn-callout), so none of the site's rules reach the page.
   - The body keeps the site's type; the page's own starts at <main> and the footer. The nav inherits
     exactly what it does on every other page.
   - Below the hero, an "On this page" guide: the /rules contents, see that block. */

/* ============ Tokens ============ */
:root {
  --a-ink: #000000;
  --a-ink-2: #0c0b09;
  --bone: #ffffff;
  --gold: #d9bb68;
  --gold-50: rgba(217,187,104,.5);
  --gold-28: rgba(217,187,104,.28);
  --hair: rgba(238,236,231,.12);
  --hair-2: rgba(238,236,231,.22);
  --body: 23.44px;
  --small: 21.09px;
  --lead: 25px;
  /* The site nav's height: its vertical padding twice plus the 44px menu button, the tallest thing in the
     bar (css/vanta-gold.css .nav). js/affiliates.js replaces it with the measured height. */
  --a-nav: calc(2 * clamp(22px, 2.4vw, 40px) + 44px);
  /* The guide's "current section" bar, below 1200px only (0 without it). */
  --a-bar: 0px;
  /* The page's scroll padding: what anything scrolled into view (focus, anchors) clears. See Base. */
  --a-sp: calc(var(--a-promo) + var(--a-nav) + var(--a-bar) + 16px);
  --pad-x: 40px;
  --a-sec-y: 120px;
  /* The sale bar above the nav (css/vanta-gold.css .promo-bar), stuck to the top while it shows: its measured
     height, --promo-h (js/vanta-promo.js); 0 once dismissed or gone. */
  --a-promo: var(--promo-h, 0px);
  /* Hero fit-to-screen: everything on the first screen that is not the video (sale bar, nav, title, CTA,
     padding). See the hero block below. */
  --chrome: calc(var(--a-promo) + var(--a-nav) + 198px);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top keeps anything scrolled into view (focus, anchors) clear of the sticky site nav and,
   below 1200px, the guide's bar under it.
   Not while focus is in the guide: its own button and links sit in that band (the bar, under the nav, or
   at the very top while the nav is tucked away), so with the padding on, focusing one, by Tab or by
   Escape closing the list, made the browser scroll the page by hundreds of pixels to "reveal" it. With
   it off they are in view and nothing moves, as on /rules. The sections' and sub-blocks' margins below
   subtract --a-sp, so a jump from a guide link lands in the same place either way. */
html { background: var(--a-ink); scroll-behavior: smooth; scroll-padding-top: var(--a-sp); }
html:has(.aff-toc :focus) { --a-sp: 0px; }
body { background: var(--a-ink); }
main, .foot { color: var(--bone); font: 400 var(--body)/1.6 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
/* The site dims every link on hover; this page's links and buttons have their own hovers. */
main a:hover, .foot a:hover { opacity: 1; }
main button { font: inherit; color: inherit; }
main img, main video, main svg, .foot svg { display: block; }
main :focus-visible, .foot :focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
main ::selection, .foot ::selection { background: rgba(217,187,104,.28); }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad-x); }

/* ============ Shared type ============ */
h2 { font: 300 clamp(43.75px, 5.62vw, 59.38px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--bone); max-width: 13.2em; text-wrap: balance; }
.aff-marker { font: 400 42.5px/1.15 var(--serif); color: var(--gold); letter-spacing: -.005em; }
.lead { font-size: var(--lead); line-height: 1.6; max-width: 58ch; }
h2 + .lead { margin-top: 28px; }
.eyebrow, .label { font: 400 15px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.eyebrow { color: var(--gold); }
.label-gold { color: var(--gold); }
.inline-link { color: inherit; border-bottom: 1px solid var(--gold-50); transition: border-color .2s ease-out, color .2s ease-out; }
.inline-link:hover { color: var(--gold); border-color: var(--gold); }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 28px; border: 1px solid var(--gold-28); border-radius: 2px; background: var(--a-ink-2); font: italic 300 34.38px/1.15 var(--serif); letter-spacing: 0; transition: border-color .2s ease-out, background-color .2s ease-out; }
.btn-gold { color: var(--gold); }
.btn-quiet { color: var(--bone); border-color: var(--hair-2); background: transparent; }
.btn:hover { border-color: var(--gold-50); background: #14120d; }

/* ============ Sections ============
   A jump lands a section's top edge just under the nav (its own top padding is the air above the title);
   a sub-block's 26px below the nav and the bar. Margin plus padding gives the landing, so each margin
   takes off the scroll padding (--a-sp), which is 0 while focus is in the guide. */
section { padding: var(--a-sec-y) 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--a-promo) + var(--a-nav) - var(--a-sp)); }
.split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.split + * { margin-top: 64px; }
.split-body > :first-child { margin-top: 0; }
.sub-block { margin-top: 120px; scroll-margin-top: calc(var(--a-promo) + var(--a-nav) + var(--a-bar) + 26px - var(--a-sp)); }
.nw { white-space: nowrap; }

/* ============ "On this page" guide ============
   The /rules contents (css/rules-toc.css and js/rules-toc.js, from PR #113), copied: same design, same
   behaviour, driven by js/affiliates.js. Eight entries, Tiers to Questions.

   Wide (1200px and up): a sticky contents rail in its own left column. The sections from Tiers to
   Questions move into the column beside it, so the rail never sits over content and their hairlines start
   where the text does. The hero above and the closing below stay full width, and the content column keeps
   the page's 1240px measure: on a wider screen the rail and the sections centre together.
   Narrower: one slim "current section" bar that sticks under the nav once the sections begin and opens
   the full list on tap. It takes no height in the flow (it overlays the Tiers section's empty top
   padding), so nothing moves when it appears.

   Gated on html.js (set in the head before first paint): without script the page renders as before. */
.aff-body { --at-w: clamp(184px, 13vw, 212px); --at-gap: clamp(36px, 3vw, 56px); }
/* The site's body type, as /rules has it: the guide's sizes are the ones it uses there. */
.aff-toc { display: none; color: rgb(var(--ink)); font: 400 16px/normal var(--sans); letter-spacing: normal; }
html.js .aff-toc { display: block; }
.aff-toc-list { list-style: none; margin: 0; padding: 0; }
.aff-toc-list a { display: flex; align-items: baseline; font-family: var(--mono); text-transform: uppercase; transition: color .2s ease-out, border-color .2s ease-out; }
.aff-toc-list .n, .aff-toc-cur .n { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.aff-toc-list .l { min-width: 0; }
@media (hover: hover) { .aff-toc-list a:hover { opacity: 1; color: rgba(var(--ink), .92); } }
.aff-toc-list a.is-active, .aff-toc-list a.is-active .n { color: rgb(var(--acc)); }

/* ---------- Wide: the rail ---------- */
@media (min-width: 1200px) {
  html.js .aff-body {
    display: grid; grid-template-columns: calc(var(--gx) + var(--at-w)) minmax(0, 1fr); column-gap: var(--at-gap);
    max-width: calc(2 * var(--gx) + var(--at-w) + var(--at-gap) + 1240px); margin: 0 auto;
  }
  html.js .aff-body > section { grid-column: 2; min-width: 0; }
  html.js .aff-body > section > .wrap { max-width: none; margin: 0; padding: 0 var(--gx) 0 0; }
  /* Spans every section row, so the sticky list inside it travels Tiers to Questions. */
  html.js .aff-toc { grid-column: 1; grid-row: 1 / span 20; min-width: 0; padding-left: var(--gx); }
  .aff-toc-btn { display: none; }
  .aff-toc-in {
    position: sticky; top: calc(var(--a-promo) + var(--a-nav) + 22px); margin: var(--a-sec-y) 0 48px -4px; padding: 4px;
    max-height: calc(100vh - var(--a-promo) - var(--a-nav) - 44px); overflow-y: auto; scrollbar-width: none;
  }
  .aff-toc-in::-webkit-scrollbar { display: none; }
  .aff-toc-kicker { padding-bottom: 14px; font: 400 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink), .5); }
  .aff-toc-list { border-left: 1px solid var(--hairline); }
  .aff-toc-list a { gap: 10px; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 1px solid transparent; font-size: 11px; line-height: 1.4; letter-spacing: .04em; color: rgba(var(--ink), .56); }
  .aff-toc-list .n { color: rgba(var(--ink), .38); }
  .aff-toc-list a.is-active { border-left-color: rgb(var(--acc)); }
  /* Beside the rail the three payout panels run narrower than the page was drawn at: their big line also
     sizes to its panel, so "Your dashboard" stays inside it (unchanged where there is room, as at 1440). */
  html.js .aff-body .panel { container-type: inline-size; }
  html.js .aff-body .panel-big { font-size: clamp(30px, min(3.9vw, calc((100cqi - 32px) / 4.4)), 56.25px); }
}

/* ---------- Narrower: the current-section bar ---------- */
@media (max-width: 1199.98px) {
  html.js { --a-bar: 48px; }
  html.js .aff-toc {
    position: sticky; top: calc(var(--a-promo) + var(--a-nav)); z-index: 38; height: var(--a-bar); margin-bottom: calc(-1 * var(--a-bar));
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: top .42s cubic-bezier(.22,.61,.36,1), opacity .22s ease-out, transform .22s ease-out, visibility 0s .22s;
  }
  /* Follows the nav: under it while it shows, at the top (under the sale bar) while it is tucked away. */
  html.js .aff-toc.is-nav-hidden { top: var(--a-promo); }
  html.js .aff-toc.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: top .42s cubic-bezier(.22,.61,.36,1), opacity .22s ease-out, transform .22s ease-out, visibility 0s 0s; }
  .aff-toc-kicker { display: none; }
  .aff-toc-btn {
    display: flex; align-items: center; gap: 16px; width: 100%; height: var(--a-bar); margin: 0; padding: 0 var(--gx);
    appearance: none; -webkit-appearance: none; border: 0; border-radius: 0;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    background: rgba(0,0,0,.88); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    color: rgba(var(--ink), .9); font: 400 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer;
  }
  .aff-toc-cur { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; }
  .aff-toc-cur .n { color: rgb(var(--acc)); }
  .aff-toc-cur .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aff-toc-btn .plus { flex: 0 0 auto; color: rgba(var(--ink), .48); font: 300 22px/1 var(--serif); letter-spacing: 0; transition: transform .2s ease-out; }
  .aff-toc.is-open .aff-toc-btn .plus { transform: rotate(45deg); }
  .aff-toc-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 2px var(--gx) 14px;
    background: rgba(0,0,0,.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--hairline);
    max-height: calc(100vh - var(--a-promo) - var(--a-nav) - var(--a-bar) - 16px); max-height: calc(100dvh - var(--a-promo) - var(--a-nav) - var(--a-bar) - 16px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .aff-toc.is-nav-hidden .aff-toc-list { max-height: calc(100vh - var(--a-promo) - var(--a-bar) - 16px); max-height: calc(100dvh - var(--a-promo) - var(--a-bar) - 16px); }
  .aff-toc.is-open .aff-toc-list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .aff-toc-list a { gap: 14px; padding: 11px 0; border-top: 1px solid var(--hairline-soft); font-size: 12px; line-height: 1.3; letter-spacing: .1em; color: rgba(var(--ink), .72); }
  .aff-toc-list li:first-child a { border-top: 0; }
  .aff-toc-list .n { color: rgba(var(--acc), .7); }
}
/* Two columns in the open list once there is room, first half down the left (as on /rules). */
@media (min-width: 700px) and (max-width: 1199.98px) {
  .aff-toc.is-open .aff-toc-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 40px; }
  .aff-toc-list li:nth-child(5) a { border-top: 0; }
}

/* ============ Hero ============
   Fit-to-screen (guide 3.1): video width = min(100%, 1080px, (100svh - chrome) x 16/9), so the title,
   the video and the CTA all sit on the first screen. --chrome is the site nav's height (--a-nav) plus
   this page's own measure: top pad 16 + title + gap + gap + CTA 56 + bottom pad, plus a little room. */
.aff-hero { padding: 16px 0 24px; text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.aff-hero h1 { font: 300 clamp(38px, 4.2vw, 60px)/1.1 var(--serif); letter-spacing: -.01em; }
.hero-video { margin-top: 16px; width: min(100%, 1080px, calc((100vh - var(--chrome)) * 16 / 9)); width: min(100%, 1080px, calc((100svh - var(--chrome)) * 16 / 9)); }
.aff-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.aff-hero-cta { font-size: 28px; min-height: 56px; padding: 8px 26px; }

/* ============ Video ============ */
.video-box { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--gold-28); border-radius: 4px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgba(217,187,104,.14), rgba(12,11,9,0) 62%), var(--a-ink-2); }
.video-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
/* The box clips the video's own outline, so the focus ring is drawn on the box instead. */
.video-box:has(> video:focus-visible) { outline: 1px solid var(--gold); outline-offset: 3px; }
@supports not selector(:has(*)) { .video-box video:focus-visible { outline-offset: -4px; } }
.coord-video { margin: 24px 0 72px; width: min(100%, 1080px); }
html:not(.js) .video-lazy, html:not(.js) .video-play { display: none; }
/* Load on tap (js/affiliates.js initVideos): the whole poster is the play button. The titled poster draws its
   own play circle, so the button is clear over it; on a phone, whose plain poster has none, it draws one. */
.video-play { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.video-play[hidden] { display: none; }
.video-play svg { display: none; }
.video-play:focus-visible { outline: 1px solid var(--gold); outline-offset: -4px; }
@media (max-width: 639.98px) {
  .video-play svg { display: block; width: 64px; height: 64px; margin: auto; }
  .video-play circle { fill: rgba(12,11,9,.55); stroke: var(--gold); stroke-width: 1.5; }
  .video-play path { fill: var(--gold); }
}

/* ============ Tiers ============ */
.tiers { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair-2); }
.tier { padding: 40px; min-width: 0; }
.tier + .tier { border-left: 1px solid var(--hair-2); }
.tier-name { font: 300 50px/1.1 var(--serif); letter-spacing: -.01em; }
.tier-partner .tier-name, .tier-partner .rate { color: var(--gold); }
.tier-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.rate { font: 300 112.5px/1 var(--serif); letter-spacing: -.02em; }
.rate-label { font: 400 17.19px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.rows > div { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--hair); }
.tier .rows { margin-top: 36px; }
.rows dt { font-size: 19.53px; line-height: 1.55; }
.rows dd { font-size: var(--small); line-height: 1.55; }

/* ============ Recurring steps ============ */
.aff-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 28px; border-top: 1px solid var(--hair); }
.aff-steps h3, .link-card h3, .fact-cell h3 { font: 300 31.25px/1.2 var(--serif); letter-spacing: -.005em; margin-top: 8px; }
.aff-steps li > p:last-child { margin-top: 14px; font-size: var(--small); line-height: 1.6; }

/* ============ Tools: calculator and estimator ============ */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); border: 1px solid var(--hair-2); }
.tool-in { padding: 36px; display: grid; gap: 40px; align-content: start; min-width: 0; }
.tool-out { padding: 36px; border-left: 1px solid var(--hair-2); min-width: 0; container-type: inline-size; }
.field .label { display: block; margin-bottom: 14px; }
.chip-set { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { appearance: none; cursor: pointer; min-height: 48px; padding: 8px 14px; border: 1px solid var(--hair-2); border-radius: 2px; background: var(--a-ink); color: var(--bone); font: 400 var(--small)/1.2 var(--sans); letter-spacing: .02em; transition: border-color .2s ease-out, color .2s ease-out; }
.chip:hover { border-color: var(--gold-50); }
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--a-ink-2); }
.range-value { margin-top: 10px; font: 300 39.06px/1.15 var(--serif); }
/* The big figure stays on one line: a number is never broken. Its size follows the column (.tool-out is
   the container), and js/affiliates.js (fitFigure) shrinks it further when a long figure, like
   "$217,552.50", is still wider than the column. */
.big { margin-top: 6px; font: 300 84.38px/1 var(--serif); font-size: clamp(40px, 28cqi, 84.38px); letter-spacing: -.02em; color: var(--gold); font-variant-numeric: lining-nums; white-space: nowrap; }
.big-sub { margin-top: 12px; font-size: 19.53px; }
.out-rows { margin-top: 22px; }
.out-rows > div { grid-template-columns: minmax(min-content, 1fr) auto; padding: 14px 0; }
.out-rows dt { font-size: 19.53px; }
.out-rows dd { font: 400 19.53px/1.55 var(--mono); text-align: right; }
.tool-out .note { margin-top: 26px; font-size: 18px; line-height: 1.55; }

/* Range: a gold fill up to the thumb (--fill is set by the page script). */
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 50%; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--gold) 0 var(--fill), rgba(238,236,231,.28) var(--fill) 100%); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(238,236,231,.28); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gold); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--gold); border: 0; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 0; }
.range:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ============ Payouts ============ */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hair-2); }
.panel { padding: 40px 32px 36px; min-width: 0; }
.panel + .panel { border-left: 1px solid var(--hair-2); }
.panel-big { font: 300 clamp(30px, 3.9vw, 56.25px)/1.05 var(--serif); letter-spacing: -.01em; padding: 0 0 0 32px; max-width: 7em; }
.panel-label { margin: 40px 0 24px; padding: 30px 0 30px 32px; border-left: 1px solid var(--hair-2); font: 400 15px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.panel > p:last-child { font-size: var(--small); line-height: 1.6; }

/* ============ Coordinator ============ */
.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hair-2); }
.link-card { padding: 28px 28px 30px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.link-card + .link-card { border-left: 1px solid var(--hair-2); }
.link-card > p:not(.eyebrow) { margin-top: 14px; font-size: var(--small); line-height: 1.6; }
.tag { margin-top: 18px; padding: 3px 8px; border: 1px solid var(--gold-28); border-radius: 2px; font: 400 15px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); }
.fact-num { font: 300 65.63px/1.05 var(--serif); color: var(--gold); letter-spacing: -.01em; }
.fact-cell h3 { margin-top: 10px; }
.fact-cell > p:last-child { margin-top: 14px; font-size: var(--small); line-height: 1.6; }
.marker-spacer { min-height: 1px; }

/* ============ Scenario ============ */
.scenario { margin-top: 72px; border: 1px solid var(--hair-2); }
.scn-head { padding: 30px 32px 0; }
.scn-title { margin-top: 4px; font: 300 34.38px/1.2 var(--serif); letter-spacing: -.005em; }
.scn-package { margin-top: 10px; }
.sellers { margin-top: 20px; }
.swipe-hint { display: none; margin: 18px 32px 0; font: 400 15px/1.5 var(--mono); letter-spacing: .06em; color: var(--bone); }
.scenario.is-overflow .swipe-hint { display: block; }
.tree-scroll { position: relative; margin-top: 18px; padding: 8px 32px 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-color: rgba(238,236,231,.3) transparent; }
.tree { position: relative; width: 100%; height: 840px; min-width: 840px; }
.scenario.is-wide .tree { min-width: 1100px; }
.tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.tree-lines line { stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.tree-lines .e-recruit { stroke: rgba(238,236,231,.34); }
.tree-lines .e-trader { stroke: rgba(238,236,231,.3); stroke-dasharray: 2 5; }
.tree-lines .e-buyer { stroke: var(--bone); stroke-width: 2; stroke-dasharray: 6 6; animation: flow 1.1s linear infinite; }
.tree-lines .e-paid { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 6; animation: flow 1.1s linear infinite; }
.tree-lines .e-cut { stroke: rgba(238,236,231,.45); stroke-width: 1.5; stroke-dasharray: 3 6; }
@keyframes flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

.node { position: absolute; z-index: 1; transform: translateX(-50%); appearance: none; cursor: pointer; margin: 0; background: var(--a-ink-2); color: var(--bone); border: 1px solid var(--hair-2); border-radius: 4px; text-align: center; transition: border-color .25s ease-out, box-shadow .25s ease-out; }
.node:hover { border-color: rgba(238,236,231,.5); }
.node > * { transition: opacity .25s ease-out; }
.person { display: flex; flex-direction: column; align-items: center; padding: 10px 16px 12px; min-width: 132px; }
.n-name { font: 300 26px/1.15 var(--serif); }
.n-role { margin-top: 4px; font: 400 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.n-role.is-coord { color: var(--gold); }
.n-rate { margin-top: 2px; font: 400 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.n-badge { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 55%); padding: 3px 9px; border-radius: 2px; font: 700 13px/1.35 var(--mono); letter-spacing: .04em; white-space: nowrap; visibility: hidden; }
.cluster { padding: 12px 14px 10px; width: 210px; }
.cluster-icons { display: grid; grid-template-columns: repeat(5, 16px); gap: 6px 10px; justify-content: center; }
.cluster-icons svg, .single-icon svg { width: 16px; height: 16px; }
.icon-body { fill: none; stroke: rgba(238,236,231,.7); stroke-width: 1.4; }
.n-label { display: block; margin-top: 8px; font: 300 18px/1.2 var(--serif); white-space: nowrap; }
.n-sub { display: block; margin-top: 3px; font: 400 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.single { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; }
.single-text { display: flex; flex-direction: column; }
.single .n-label { margin-top: 0; }
.single-icon svg { width: 20px; height: 20px; }
.trader { border-style: dashed; }

/* Sale states, set by the page script on each node. */
.node.is-seller { border: 2px solid var(--bone); }
.node.is-seller .n-badge { visibility: visible; background: var(--bone); color: #000; }
.node.is-paid { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(217,187,104,.25), 0 0 28px rgba(217,187,104,.32); }
.node.is-paid .n-badge { visibility: visible; background: var(--gold); color: #000; }
.node.is-cut > :not(.n-badge) { opacity: .45; }
.node.is-cut { border-color: rgba(238,236,231,.14); }
.node.is-cut .n-badge { visibility: visible; background: var(--a-ink); color: rgba(255,255,255,.75); border: 1px dashed rgba(238,236,231,.4); font-weight: 400; }
.node.is-buyer { border: 2px solid var(--bone); }
.node.is-buyer .icon-pick .icon-body { fill: var(--bone); stroke: var(--bone); }
.node.is-seller .n-badge, .node.is-paid .n-badge, .node.is-cut .n-badge { animation: pop .38s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes pop { from { transform: translate(-50%, 55%) scale(.6); opacity: 0; } to { transform: translate(-50%, 55%) scale(1); opacity: 1; } }

.edge-label { position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 2px; font: 700 13px/1.35 var(--mono); letter-spacing: .03em; white-space: nowrap; pointer-events: none; }
.edge-label.l-buyer { background: var(--bone); color: #000; }
.edge-label.l-paid { background: var(--gold); color: #000; }
.edge-label.l-cut { background: var(--a-ink); color: var(--bone); border: 1px dashed rgba(238,236,231,.5); font-weight: 400; }

.legend { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 18px 32px 24px; font: 400 14px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.legend li { display: inline-flex; align-items: center; gap: 9px; }
.sw { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.sw-buyer { border: 1px dashed var(--bone); }
.sw-seller { background: var(--bone); }
.sw-paid { background: var(--gold); }
.sw-cut { background: #3a3936; }

.scn-callout { margin: 0 32px 32px; padding: 22px 24px; border: 1px solid var(--gold-28); border-radius: 2px; background: var(--a-ink-2); }
.callout-title { font: 300 28.13px/1.25 var(--serif); }
.callout-body { margin-top: 12px; font-size: 20px; line-height: 1.6; }
.callout-body .hl { color: var(--gold); }
.callout-total { margin-top: 12px; font: 400 17px/1.5 var(--mono); letter-spacing: .03em; color: var(--gold); }

/* ============ Apply ============ */
.apply-cta { margin-top: 32px; }

/* ============ Forms: the Coordinator application and /affiliates/join ============
   Posted to HubSpot by js/affiliates.js. Errors and the failure line are role="alert" and take no
   room until they have text. On success the form is hidden and .form-done is filled. */
.aff-form { display: grid; gap: 28px; max-width: 560px; margin-top: 40px; }
.aff-form[hidden] { display: none; }
.form-field .label { display: block; margin-bottom: 12px; }
.input { display: block; width: 100%; min-height: 56px; margin: 0; padding: 12px 16px; border: 1px solid var(--hair-2); border-radius: 2px; background: var(--a-ink-2); color: var(--bone); font: 400 var(--small)/1.3 var(--sans); letter-spacing: .01em; transition: border-color .2s ease-out; }
.input::placeholder { color: rgba(238,236,231,.42); }
.input:hover { border-color: var(--gold-28); }
.input:focus { border-color: var(--gold); }
.input[aria-invalid="true"] { border-color: #e0816f; }
.form-err, .form-fail { font-size: 18px; line-height: 1.5; color: #e0816f; }
.form-err { margin-top: 10px; }
.form-err:empty, .form-fail:empty { display: none; }
.form-submit { justify-self: start; cursor: pointer; }
.form-submit:disabled { cursor: progress; opacity: .7; }
.form-done:empty { display: none; }
.form-done { max-width: 560px; margin-top: 40px; padding: 24px 26px; border: 1px solid var(--gold-28); border-radius: 2px; background: var(--a-ink-2); }
.form-done:focus { outline: 0; }
.form-done-title { font: 300 31.25px/1.2 var(--serif); color: var(--gold); }
.form-done-body { margin-top: 12px; font-size: var(--small); line-height: 1.6; overflow-wrap: anywhere; }
.form-done-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.form-code { font: 400 .95em/1.4 var(--mono); letter-spacing: .06em; color: var(--gold); }

/* ============ /affiliates/join ============ */
.aff-join { border-top: 0; padding: clamp(48px, 8vw, 120px) 0 var(--a-sec-y); }
.aff-join h1 { font: 300 clamp(38px, 4.2vw, 60px)/1.1 var(--serif); letter-spacing: -.01em; max-width: 18em; text-wrap: balance; }
.aff-join h1 + .lead { margin-top: 28px; }

/* ============ FAQ ============ */
.faq { border-bottom: 1px solid var(--hair); }
.faq details { border-top: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; font: 300 29.69px/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 30px/1 var(--sans); color: var(--bone); transition: transform .2s ease-out; }
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq details > p { max-width: 60ch; padding: 0 0 26px; font-size: var(--small); line-height: 1.65; }

/* ============ Closing ============ */
.close { text-align: center; }
.close h2 { margin: 0 auto; }
.close-line { margin: 24px auto 0; max-width: 100ch; font-size: var(--small); text-wrap: balance; }
.close-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

/* ============ Footer ============ */
.foot { border-top: 1px solid var(--hair); padding: 48px 0 56px; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.foot-logo { display: inline-flex; padding: 4px 0; }
.foot-legal { flex: 1 1 420px; font-size: 17px; line-height: 1.6; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 17px; }
.foot-links a { border-bottom: 1px solid transparent; transition: border-color .2s ease-out, color .2s ease-out; }
.foot-links a:hover { color: var(--gold); border-color: var(--gold-50); }

/* No prices from the pricing config (its script failed): hide the blocks that need one. */
.no-prices .needs-prices { display: none; }

/* ============ Breakpoints: 1000, 980, 860, 800 tall, 760, 640 ============ */
@media (max-width: 999.98px) {
  .panel { padding: 32px 22px 30px; }
  .panel-big, .panel-label { padding-left: 20px; }
  .links { grid-template-columns: 1fr; }
  .link-card + .link-card { border-left: 0; border-top: 1px solid var(--hair-2); }
  .scenario .swipe-hint { display: block; }
  .scenario .tree { min-width: 1100px; }
}
@media (max-width: 979.98px) {
  .tool { grid-template-columns: 1fr; }
  .tool-out { border-left: 0; border-top: 1px solid var(--hair-2); }
}
@media (max-width: 859.98px) {
  .split { grid-template-columns: 1fr; gap: 20px; }
  .marker-spacer { display: none; }
  .facts { grid-template-columns: 1fr; }
  .aff-steps { gap: 28px; }
  .tier .rows > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .tier .rows dt { font: 400 15px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
}
@media (max-height: 800px) {
  :root { --chrome: calc(var(--a-promo) + var(--a-nav) + 174px); }
  .aff-hero { padding: 12px 0 16px; }
  .hero-video { margin-top: 12px; }
  .aff-hero-ctas { margin-top: 14px; }
}
@media (max-width: 759.98px) {
  .tiers, .panels { grid-template-columns: 1fr; }
  .tier + .tier, .panel + .panel { border-left: 0; border-top: 1px solid var(--hair-2); }
  .panel-big { font-size: 48px; max-width: none; }
  .aff-steps { grid-template-columns: 1fr; }
}
@media (max-width: 639.98px) {
  :root { --pad-x: 16px; --a-sec-y: 72px; --chrome: calc(var(--a-promo) + var(--a-nav) + 316px); --body: 18px; --small: 18px; --lead: 20px; }
  h2 { font-size: 36px; }
  .aff-marker { font-size: 32px; }
  .aff-hero h1, .aff-join h1 { font-size: 34px; }
  .btn { font-size: 22px; min-height: 50px; padding: 8px 20px; }
  .aff-hero-cta { font-size: 22px; min-height: 50px; }
  .sub-block { margin-top: 80px; }
  .split + * { margin-top: 40px; }
  .tier { padding: 28px 20px; }
  .tier-name { font-size: 40px; }
  .rate { font-size: 84px; }
  .rate-label { font-size: 14px; }
  .out-rows > div { gap: 16px; }
  .out-rows dt { font-size: 17px; }
  .out-rows dd { font-size: 17px; }
  .aff-steps h3, .link-card h3, .fact-cell h3 { font-size: 27px; }
  .tool-in, .tool-out { padding: 24px 20px; }
  .tool-in { gap: 32px; }
  .big { font-size: 64px; font-size: clamp(36px, 21cqi, 64px); }
  .range-value { font-size: 32px; }
  .panel { padding: 28px 20px; }
  .panel-big { font-size: 44px; padding-left: 20px; }
  .panel-label { margin: 24px 0 18px; padding: 18px 0 18px 20px; }
  .link-card { padding: 24px 20px; }
  .fact-num { font-size: 56px; }
  .scenario { margin-top: 48px; }
  .scn-head { padding: 24px 20px 0; }
  .scn-title { font-size: 27px; }
  .swipe-hint { margin: 16px 20px 0; }
  .tree-scroll { padding: 8px 20px 4px; }
  .legend { padding: 16px 20px 20px; gap: 10px 20px; font-size: 13px; }
  .scn-callout { margin: 0 20px 20px; padding: 18px; }
  .callout-title { font-size: 24px; }
  .callout-body { font-size: 18px; }
  .callout-total { font-size: 15px; }
  .faq summary { font-size: 24px; padding: 18px 0; }
  .eyebrow, .label { font-size: 14px; letter-spacing: .12em; }
  .foot-legal { flex-basis: 100%; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tree-lines .e-buyer, .tree-lines .e-paid { animation: none; }
  .node.is-seller .n-badge, .node.is-paid .n-badge, .node.is-cut .n-badge { animation: none; }
  html.js .aff-toc, html.js .aff-toc.is-shown { transform: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}