/* ba-li ported */
/* ═══════════════════════════════════════════════════════════
   Blue Arctic · /affiliate/
   Page chrome ONLY, entirely scoped to `.af-*`: loading this file
   cannot move a pixel on another page and it redefines no shared
   component. The hero uses the .bahero contract from hero.css
   unchanged; this file only styles what sits in its media slot.

   SURFACES: every dark surface is --carbon-*. --navy-* is not used
   here, and the shared navy .cta-band is neither used nor modified.

   MOTION: every animation is additive and lives inside a
   `prefers-reduced-motion: no-preference` block, transform/opacity
   only. The static state is the finished design, so reduced-motion
   readers, print and a never-firing observer all get a whole page.

   Mobile-first: base rules are the phone composition, wider steps
   live in min-width queries.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════ 0 · SHARED ═══════════════ */

/* The recurring mark: one glyph at three sizes, used wherever the word
   "recurring" appears. The offsets are optical alignment only. */
.af-recur { flex: none; vertical-align: -.14em; }

.af-cta-inline {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: var(--space-band);
}
.af-cta-inline .btn { width: 100%; }
@media (min-width: 560px) {
  .af-cta-inline { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .8rem; }
  .af-cta-inline .btn { width: auto; }
}

.af-note-small {
  max-width: 44rem;
  margin-top: 1.25rem;
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: var(--ink-3);
}
.af-note-small--center { margin-inline: auto; text-align: center; }


/* ═══════════════ 1 · HERO ═══════════════ */

/* The bonus chip is secondary by construction: below the lead, figure a
   fraction of the H1, blue as accent not surface, so the 25% stays the
   loudest thing in the hero. */
.af-hero-bonus {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1rem;
  border: 1px solid var(--carbon-700);
  border-left: 3px solid var(--sky-400);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(95, 185, 238, .10), rgba(95, 185, 238, 0) 70%);
}
.af-hero-bonus-amt {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sky-400);
  font-variant-numeric: tabular-nums;
}
.af-hero-bonus-txt {
  font-size: var(--fs-tiny);
  line-height: 1.5;
  color: var(--steel-400);
}
.af-hero-bonus-txt strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--silver-100);
}

/* ── Hero illustration ─────────────────────────────────────
   Real DOM, not an exported graphic: figures stay selectable text, it
   reflows on a phone instead of shrinking, and it costs no request. */
.af-viz { margin: 0; }

.af-viz-panel {
  position: relative;
  padding: 1.25rem 1.15rem 1.15rem;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(95, 185, 238, .11), transparent 60%),
    linear-gradient(170deg, var(--carbon-850) 0%, var(--carbon-900) 100%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 var(--carbon-hair);
}
@media (min-width: 560px) {
  .af-viz-panel { padding: 1.6rem 1.5rem 1.4rem; }
}

.af-viz-label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-400);
}

/* Three referral nodes, equal width so the connector geometry below
   lands on their centres at every viewport. */
.af-viz-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .7rem;
}
.af-viz-node {
  display: grid;
  place-items: center;
  gap: .3rem;
  padding: .7rem .35rem;
  min-width: 0;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-sm);
  background: var(--carbon-800);
  color: var(--sky-400);
}
.af-viz-node span {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--steel-400);
}

/* Connectors use preserveAspectRatio="none" on purpose: this is a
   diagram, so distorting the paths to meet the nodes is correct. */
.af-viz-wires {
  display: block;
  width: 100%;
  height: 2.6rem;
  margin: -1px 0;
}
.af-wire {
  fill: none;
  stroke: var(--carbon-700);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.af-wire--trunk { stroke: var(--sky-400); stroke-width: 2; opacity: .8; }

.af-viz-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .5rem .8rem;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(95, 185, 238, .35);
  border-radius: var(--r-pill);
  background: rgba(95, 185, 238, .1);
  color: var(--sky-400);
  font-size: var(--fs-tiny);
  line-height: 1.3;
  text-align: center;
}
.af-viz-rate strong { font-weight: 800; }
.af-viz-rate span { color: var(--steel-200); }
.af-viz-rate strong { color: var(--sky-400); }

.af-viz-account {
  margin-top: .9rem;
  padding: 1rem .95rem .9rem;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-md);
  background: var(--carbon-800);
}
.af-viz-acct-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.af-viz-acct-total {
  margin-top: .15rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--silver-100);
  font-variant-numeric: tabular-nums;
}

/* Six stepped bars. Heights are authored: this is a picture of a shape,
   not a data set, and the caption says so. */
.af-viz-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: .3rem;
  height: 3rem;
  margin-top: .85rem;
}
.af-viz-bar {
  display: block;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--sky-400), var(--blue-600));
  opacity: .85;
  transform-origin: bottom center;
}
.af-viz-bar:last-child { opacity: 1; }

.af-viz-bonus {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--carbon-700);
  font-size: var(--fs-tiny);
  color: var(--steel-200);
}
.af-viz-bonus .ico { flex: none; color: var(--ok-600); }
.af-viz-bonus em {
  margin-left: auto;
  font-style: normal;
  font-size: .6875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--steel-400);
}

.af-viz-cap {
  margin-top: .7rem;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--steel-400);
  text-align: center;
}
@media (min-width: 901px) {
  .af-viz-cap { text-align: left; }
}


/* ═══════════════ 2 · CARBON BANDS ═══════════════
   The shared .section-* classes assume light surfaces, so the two dark
   bands get their own shell: same rhythm tokens, same container. */
.af-band {
  position: relative;
  padding-block: var(--space-section-lg);
  background-color: var(--carbon-900);
  background-image:
    radial-gradient(900px 420px at 78% -18%, rgba(95, 185, 238, .10), transparent 62%),
    linear-gradient(178deg, var(--carbon-950) 0%, var(--carbon-900) 55%, var(--carbon-850) 100%);
  color: var(--steel-200);
  border-block: 1px solid var(--carbon-800);
}
/* blue-500 is invisible on carbon: match the site-wide dark-surface ring. */
.af-band :focus-visible { outline-color: var(--sky-400); }

/* The commission band butts straight onto the hero. .bahero already
   paints a blue hairline along its bottom edge; a border here doubles it. */
.af-band--rates { border-top: 0; padding-top: var(--space-section-md); }

/* Centred at every width, matching .section-head-center on the light
   sections. */
.af-band-head {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-component);
  text-align: center;
}
.af-band-head h2 { color: var(--silver-100); margin-bottom: .5rem; }
.af-band-head .eyebrow { margin-bottom: .7rem; justify-content: center; }
.af-band-lead { color: var(--steel-400); font-size: var(--fs-small); }

.af-band-note {
  margin-top: var(--space-band);
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: var(--steel-400);
}
.af-band-note a { color: var(--sky-400); font-weight: 600; }
.af-band-note--wide { max-width: 46rem; }
.af-band-note { text-align: center; max-width: 46rem; margin-inline: auto; }


/* ═══════════════ 3 · COMMISSION RATE CARDS ═══════════════
   The core financial offer. Both rates carry equal structural weight:
   the 25% takes the accent as the headline, and the 10% is not shrunk,
   presenting the second rate as a caveat is what would read as untrustworthy. */
.af-rates {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 780px) {
  .af-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

.af-rate {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--carbon-800), var(--carbon-850));
  overflow: hidden;
}
@media (min-width: 560px) {
  .af-rate { padding: 1.9rem 1.75rem 1.7rem; }
}
/* A blue edge and a wash rather than a bigger box, so the 10% card never
   looks like the consolation prize. */
.af-rate--featured {
  border-color: rgba(95, 185, 238, .45);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(95, 185, 238, .16), transparent 58%),
    linear-gradient(165deg, var(--carbon-800), var(--carbon-850));
  box-shadow: 0 0 0 1px rgba(95, 185, 238, .18), 0 30px 70px -40px rgba(45, 121, 245, .8);
}
.af-rate--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--sky-400), var(--blue-600));
}

.af-rate-num {
  display: flex;
  align-items: baseline;
  gap: .04em;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -0.045em;
  color: var(--silver-100);
  font-variant-numeric: tabular-nums;
}
.af-rate-fig { font-size: clamp(4.4rem, 21vw, 6.5rem); }
.af-rate-pct { font-size: clamp(1.9rem, 8vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; color: var(--steel-400); }
@media (min-width: 560px) {
  .af-rate-fig { font-size: clamp(5rem, 9vw, 6.5rem); }
  .af-rate-pct { font-size: clamp(2.1rem, 3.6vw, 2.7rem); }
}
.af-rate--featured .af-rate-fig { color: #fff; }
.af-rate--featured .af-rate-pct { color: var(--sky-400); }

.af-rate-recur {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-top: .75rem;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--carbon-700);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-200);
}
.af-rate--featured .af-rate-recur {
  border-color: rgba(95, 185, 238, .4);
  background: rgba(95, 185, 238, .12);
  color: var(--sky-400);
}

.af-rate-list {
  display: grid;
  gap: .1rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--carbon-700);
}
.af-rate-list li { min-width: 0; }
.af-rate-list a,
.af-rate-list span {
  display: block;
  padding: .42rem 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--steel-200);
}
.af-rate-list a { color: var(--silver-100); text-decoration: none; }
.af-rate-list a:hover { color: var(--sky-400); text-decoration: underline; text-underline-offset: 3px; }

.af-rate-foot {
  margin-top: auto;
  padding-top: 1.3rem;
  font-size: var(--fs-tiny);
  color: var(--steel-400);
}
.af-rate-foot a { color: var(--sky-400); font-weight: 600; white-space: nowrap; }


/* ═══════════════ 4 · $10 HEAD START ═══════════════ */
.af-ladder {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  counter-reset: none;
}
@media (min-width: 720px) {
  .af-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card-gap); }
}

.af-step {
  position: relative;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.af-step--now {
  border-color: var(--blue-500);
  background: linear-gradient(160deg, var(--ice-100), var(--paper) 70%);
  box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-lift);
}
.af-step--goal { border-style: dashed; border-color: var(--line-2); background: var(--mist); box-shadow: none; }

.af-step-k {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.af-step-v {
  margin-top: .25rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.af-step--now .af-step-v { color: var(--blue-600); }
.af-step-d {
  margin-top: .5rem;
  font-size: var(--fs-tiny);
  line-height: 1.55;
  color: var(--ink-2);
}

.af-rail { max-width: 40rem; margin: var(--space-band) auto 0; }
.af-rail-track {
  position: relative;
  height: 2.35rem;
  border-radius: var(--r-pill);
  background: var(--frost);
  border: 1px solid var(--line);
  overflow: hidden;
}
.af-rail-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--pct);
  height: 100%;
  padding-right: .8rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-600), var(--sky-400));
  transform-origin: left center;
}
.af-rail-fill b {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--navy-900);   /* sits on the light sky end of the fill: white failed contrast */
  font-variant-numeric: tabular-nums;
}
.af-rail-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--ink-3);
}


/* ═══════════════ 5 · ONE-TIME v RECURRING ═══════════════ */
.af-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  align-items: start;
}
@media (min-width: 800px) {
  .af-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.af-track {
  min-width: 0;
  padding: 1.4rem 1.35rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.af-track--recur {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-lift);
}

.af-track-h {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: .9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-3);
}
.af-track--recur .af-track-h { color: var(--blue-700); }

.af-track-list { display: grid; gap: 0; }

/* Each tick is a row on a vertical spine drawn by the dot's ::after, so
   it always spans exactly to the next dot with no fixed heights to sync. */
.af-tick {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem 0;
}
.af-tick-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-2);
  flex: none;
}
.af-track--recur .af-tick-dot { background: var(--blue-600); }
.af-tick:not(:last-child) .af-tick-dot::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: calc(100% + 1.2rem);
  transform: translateX(-50%);
  background: var(--line);
}
.af-track--recur .af-tick:not(:last-child) .af-tick-dot::after { background: var(--blue-100); }

.af-tick-l { font-size: var(--fs-small); color: var(--ink-2); min-width: 0; }
.af-tick-v {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.af-track--recur .af-tick-v { color: var(--blue-700); }

.af-tick--stop .af-tick-dot { background: var(--paper); border: 2px solid var(--line-2); }
.af-tick--stop .af-tick-l,
.af-tick--stop .af-tick-v { color: var(--ink-3); }
.af-tick--stop .af-tick-v { font-weight: 600; }

.af-tick--cont .af-tick-dot {
  background: var(--sky-400);
  box-shadow: 0 0 0 4px rgba(95, 185, 238, .22);
}
.af-tick--cont .af-tick-l { font-weight: 600; color: var(--blue-700); }
.af-tick--cont .af-tick-v { color: var(--blue-600); }

.af-track-f {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}
.af-track--recur .af-track-f { color: var(--ink-2); }


/* ═══════════════ 6 · EARNINGS ═══════════════ */

.af-rungs {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
@media (min-width: 720px) {
  .af-rungs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card-gap); align-items: end; }
  .af-rung { margin-bottom: calc(var(--i) * .9rem); }
}

.af-rung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--carbon-800), var(--carbon-850));
}
@media (min-width: 720px) {
  .af-rung { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; padding: 1.3rem 1.35rem; }
}
.af-rung--top {
  border-color: rgba(95, 185, 238, .4);
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(95, 185, 238, .15), transparent 60%),
    linear-gradient(160deg, var(--carbon-800), var(--carbon-850));
}

.af-rung-n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sky-400);
  font-variant-numeric: tabular-nums;
}
.af-rung-k {
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--steel-400);
}
.af-rung-v {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--carbon-700);
}
@media (min-width: 720px) {
  .af-rung-n { font-size: 2.4rem; }
  .af-rung-v { margin-top: .9rem; padding-top: .9rem; }
}
.af-rung-v strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--silver-100);
  font-variant-numeric: tabular-nums;
}
.af-rung-v span { font-size: var(--fs-small); font-weight: 600; color: var(--steel-400); }


/* ── Calculator ────────────────────────────────────────────
   Ships with the `hidden` attribute; affiliate.js removes it. The
   [hidden] rule is load-bearing: `display` on .af-calc would otherwise
   beat the attribute's UA default. */
.af-calc[hidden] { display: none; }

.af-calc {
  display: block;
  margin-top: var(--space-band);
  overflow: hidden;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--carbon-850), var(--carbon-900));
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.af-calc-head {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--carbon-700);
  background: rgba(255, 255, 255, .025);
}
.af-calc-head h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-h4);
  color: var(--silver-100);
}
.af-calc-head .af-recur { color: var(--sky-400); }

.af-calc-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .af-calc-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.af-calc-controls {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding: 1.4rem 1.25rem;
}
@media (min-width: 880px) {
  .af-calc-controls { padding: 1.9rem 1.75rem; }
}

.af-field label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--steel-200);
}
.af-field-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sky-400);
  font-variant-numeric: tabular-nums;
}

/* Range input: reset per engine, then one shared visual. The track is
   6px but padding keeps a 44px touch target, so the thumb stays
   draggable on a phone without the bar looking heavy. */
.af-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: .8rem 0 .3rem;
  padding-block: .6rem;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;      /* vertical scroll still works over the slider */
}
.af-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--carbon-700);
}
.af-range::-moz-range-track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--carbon-700);
}
.af-range::-moz-range-progress {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-600), var(--sky-400));
}
.af-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  margin-top: -8px;         /* centres a 22px thumb on a 6px track */
  border-radius: 50%;
  background: var(--sky-400);
  border: 3px solid var(--carbon-850);
  box-shadow: 0 0 0 1px rgba(95, 185, 238, .5), 0 2px 6px rgba(0, 0, 0, .6);
  transition: transform var(--dur-fast) var(--ease-out);
}
.af-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sky-400);
  border: 3px solid var(--carbon-850);
  box-shadow: 0 0 0 1px rgba(95, 185, 238, .5), 0 2px 6px rgba(0, 0, 0, .6);
  transition: transform var(--dur-fast) var(--ease-out);
}
.af-range:hover::-webkit-slider-thumb,
.af-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.af-range:hover::-moz-range-thumb,
.af-range:active::-moz-range-thumb { transform: scale(1.1); }
/* The thumb is the focus target, so the ring goes on the thumb, not
   around the full-width control where it would read as a bug. */
.af-range:focus { outline: none; }
.af-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(95, 185, 238, .45), 0 2px 6px rgba(0, 0, 0, .6);
}
.af-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(95, 185, 238, .45), 0 2px 6px rgba(0, 0, 0, .6);
}
/* Forced colours does not paint box-shadow and the rule above drops the
   UA outline, so restore a real outline for that mode only. */
@media (forced-colors: active) {
  .af-range:focus-visible { outline: 2px solid ButtonText; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .af-range::-webkit-slider-thumb,
  .af-range::-moz-range-thumb { transition: none; }
  .af-range:hover::-webkit-slider-thumb,
  .af-range:active::-webkit-slider-thumb,
  .af-range:hover::-moz-range-thumb,
  .af-range:active::-moz-range-thumb { transform: none; }
}

.af-field-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-tiny);
  color: var(--steel-400);
}

.af-calc-rate {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: var(--fs-tiny);
  line-height: 1.55;
  color: var(--steel-400);
}
.af-calc-rate .af-recur { margin-top: .15rem; color: var(--sky-400); }

.af-calc-result {
  display: grid;
  align-content: center;
  gap: 1.1rem;
  padding: 1.5rem 1.25rem;
  border-top: 1px solid var(--carbon-700);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(45, 121, 245, .28), transparent 62%),
    linear-gradient(160deg, #0D2A5C 0%, var(--carbon-850) 78%);
}
@media (min-width: 880px) {
  .af-calc-result { padding: 1.9rem 1.75rem; border-top: 0; border-left: 1px solid var(--carbon-700); }
}
.af-calc-k {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #A9C7EC;
}
.af-calc-v {
  margin-top: .15rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 11vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.af-calc-out--yr { padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.af-calc-out--yr .af-calc-v { font-size: clamp(1.6rem, 6vw, 1.95rem); color: #DCE9FB; }

/* Keep --blue-600 on carbon: white on --blue-500 measures 4.07:1, under
   AA. Hover lifts instead, flipping the label to carbon. */
.af-cta-inline--dark .btn-primary:hover { background: var(--sky-400); color: var(--carbon-950); box-shadow: none; }


/* ═══════════════ 7 · GROWTH ═══════════════
   A dot matrix, not a bar chart: each column contains the previous
   column's dots plus the new ones. */
.af-grow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 700px) {
  .af-grow { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.af-grow-col {
  min-width: 0;
  padding: 1.25rem 1.2rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.af-grow-col:last-child { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-lift); }

.af-grow-when {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Fixed 5-across so the three columns read as one growing block, and
   min-height keeps the card tops aligned when dot counts differ. */
.af-grow-dots {
  display: grid;
  grid-template-columns: repeat(5, 12px);
  gap: 7px;
  margin: .9rem 0 1rem;
  min-height: 5.5rem;
  align-content: start;
}
.af-grow-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue-600);
}
.af-grow-col:last-child .af-grow-dot { background: linear-gradient(160deg, var(--blue-600), var(--sky-400)); }

.af-grow-n { font-size: var(--fs-small); color: var(--ink-2); }
.af-grow-n strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.af-grow-v {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--blue-700);
}
.af-grow-v .af-recur { color: var(--blue-600); }


/* ═══════════════ 8 · HOW IT WORKS ═══════════════ */
.af-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  counter-reset: none;
}
@media (min-width: 760px) {
  .af-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.af-how {
  position: relative;
  min-width: 0;
  padding: 1.4rem 1.35rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.af-how h3 { font-size: var(--fs-h4); margin-bottom: .35rem; }
.af-how p { font-size: var(--fs-small); color: var(--ink-2); }
/* The step numeral is a <p>, so it must out-specify the rule above:
   unscoped, `.af-how p` wins and paints the numerals --ink-2 on --ink
   at 2.3:1. */
.af-how .af-how-n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .85rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
}

.af-how-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: var(--blue-100);
  border: 1px solid var(--ice-200);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--blue-700);
}
.af-how-badge--recur .af-recur { color: var(--blue-600); }


/* ═══════════════ 9 · AUDIENCE ═══════════════ */
.af-agency {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--ice-200);
  border-radius: var(--r-xl);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(95, 185, 238, .18), transparent 58%),
    var(--ice-100);
}
@media (min-width: 900px) {
  .af-agency { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.75rem; padding: 2.4rem 2.25rem; }
}
.af-agency-copy h2 { margin-bottom: .6rem; }
.af-agency-copy .lead { margin-bottom: .8rem; }
.af-agency-copy p { color: var(--ink-2); }
.af-agency-copy a { font-weight: 600; }

.af-flow { display: grid; gap: .6rem; min-width: 0; }
.af-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
  padding: .55rem .6rem;
  border: 1px solid var(--paper);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-soft);
}
.af-flow-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 0;
  padding: .4rem .3rem;
  border-radius: var(--r-sm);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.af-flow-node .ico, .af-flow-node .af-recur { flex: none; }
.af-flow-node--client { background: var(--frost); color: var(--ink-2); }
.af-flow-node--ba     { background: var(--ink); color: #fff; }
.af-flow-node--pay    { background: var(--blue-600); color: #fff; }
.af-flow-arrow {
  width: 12px; height: 2px;
  border-radius: 1px;
  background: var(--line-2);
}
@media (max-width: 430px) {
  /* Three labels plus two arrows on a narrow phone: the arrows give up
     their width first and the type tightens, so nothing hides or clips. */
  .af-flow-row { grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr); gap: .25rem; padding: .5rem .45rem; }
  .af-flow-node { font-size: .625rem; gap: .22rem; padding: .4rem .2rem; }
  .af-flow-node .ico, .af-flow-node .af-recur { width: 13px; height: 13px; }
  .af-flow-arrow { width: 8px; }
}

.af-who {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: var(--space-band);
  justify-content: center;
}
.af-who-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--shadow-soft);
}
.af-who-chip .ico { color: var(--blue-600); flex: none; }


/* ═══════════════ 10 · WHY RECOMMEND ═══════════════ */
.af-why {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 620px) { .af-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .af-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.af-why-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: .85rem;
  align-items: center;
  min-width: 0;
  padding: 1.25rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.af-why-card:hover {
  transform: translateY(-3px);
  border-color: var(--ice-200);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
}
.af-why-card:hover .af-why-go { color: var(--blue-600); transform: translateX(3px); }
/* Every cell is placed explicitly. Two of the four children span both
   rows, and auto-placement flows the other two around them, so putting the
   heading in the arrow's column and squeezing the description. Three
   columns, two rows, nothing left to inference. */
.af-why-ico {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-md);
  background: var(--ice-100);
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
}
.af-why-card strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.3;
}
.af-why-d {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: .2rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.5;
}
.af-why-go {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--line-2);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .af-why-card, .af-why-go { transition: none; }
  .af-why-card:hover { transform: none; }
  .af-why-card:hover .af-why-go { transform: none; }
}


/* ═══════════════ 11 · REVIEWS ═══════════════ */
.af-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 820px) { .af-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.af-review {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 1.4rem 1.35rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.af-review-stars { display: flex; gap: .1rem; margin-bottom: .8rem; }
.af-review .af-star { color: #F5A623; fill: currentColor; }
.af-review blockquote { margin: 0; }
.af-review blockquote p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-2);
}
.af-review figcaption {
  display: grid;
  gap: .1rem;
  margin-top: auto;
  padding-top: 1.1rem;
}
.af-review figcaption strong { font-size: var(--fs-small); color: var(--ink); }
.af-review figcaption span { font-size: var(--fs-tiny); color: var(--ink-3); }
.af-review-src { font-weight: 600; }

/* The platform row is .trust-row from hero.css, authored for a dark hero;
   on this light section it needs its own colours and centring. Scoped to
   .af-trust so no other page is affected. */
.af-trust {
  display: flex;
  justify-content: center;
  margin-top: var(--space-band);
  --trust-name-color: var(--ink);
  --trust-rule-color: var(--line-2);
  --trust-star-empty: var(--line);
}
.af-trust .trust-row { justify-content: center; flex-wrap: wrap; gap: .75rem 1.75rem; }
.af-trust .trust-name { color: var(--ink); }
.af-trust .trust-meta,
.af-trust .trust-score,
.af-trust .trust-linktext { color: var(--ink-3); }
.af-trust .trust-item:hover .trust-name,
.af-trust .trust-item:hover .trust-meta { color: var(--blue-600); }


/* ═══════════════ 12 · TOOLKIT ═══════════════ */
.af-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 620px) { .af-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .af-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.af-tool {
  min-width: 0;
  padding: 1.3rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.af-tool-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: .8rem;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--sky-400);
}
.af-tool strong { display: block; font-size: 1.0625rem; color: var(--ink); margin-bottom: .3rem; }
.af-tool p { font-size: var(--fs-small); color: var(--ink-2); }
.af-tool .link-arrow { margin-top: .75rem; font-size: var(--fs-tiny); }


/* ═══════════════ 13 · DISCLOSURE ═══════════════
   One quiet paragraph: the earnings warning lives once, beside the
   numbers it qualifies. */
.af-disclosure {
  max-width: 58rem;
  margin-inline: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-tiny);
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}
.af-disclosure a { font-weight: 600; color: var(--blue-600); }


/* ═══════════════ 14 · CLOSING ═══════════════
   Page-scoped: the shared navy .cta-band is not used and not modified. */
.af-close {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-section-lg);
  background-color: var(--carbon-950);
  background-image:
    radial-gradient(760px 380px at 50% 8%, rgba(45, 121, 245, .20), transparent 66%),
    linear-gradient(178deg, var(--carbon-950) 0%, var(--carbon-900) 60%, var(--carbon-850) 100%);
  color: var(--steel-200);
  text-align: center;
}
.af-close :focus-visible { outline-color: var(--sky-400); }

.af-close-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(46rem, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .5;
}
.af-close-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(95, 185, 238, .16);
}
.af-close-ring--2 { inset: 14%; border-color: rgba(95, 185, 238, .12); }
.af-close-ring--3 { inset: 28%; border-color: rgba(95, 185, 238, .09); }

.af-close-inner { max-width: 44rem; margin-inline: auto; }
.af-close .eyebrow { justify-content: center; margin-bottom: .9rem; }
.af-close h2 {
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: .9rem;
}
.af-close h2 em { font-style: normal; color: var(--sky-400); }
.af-close-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--steel-400);
  max-width: 38rem;
  margin-inline: auto;
}
.af-close-ctas {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.9rem;
}
.af-close-ctas .btn { width: 100%; }
@media (min-width: 560px) {
  .af-close-ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .8rem; }
  .af-close-ctas .btn { width: auto; }
}
.af-close .btn-primary:hover { background: var(--sky-400); color: var(--carbon-950); box-shadow: none; }

.af-close-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .65rem;
  margin-top: 1.6rem;
}
.af-close-chips span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border: 1px solid var(--carbon-700);
  border-radius: var(--r-pill);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--steel-200);
}
.af-close-chips .af-recur { color: var(--sky-400); }


/* ═══════════════ 15 · MOTION ═══════════════
   Additive only: every rule here has a static counterpart above. The
   reveal classes come from affiliate.js via an IntersectionObserver and
   fire on .is-in; .js gates them so a browser without JS never has
   content stuck at opacity 0. */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: the diagram assembles top to bottom, in reading order. */
  /* These start at opacity 0, so they are gated on .js AND on a CSS
     animation that always runs to completion on load, with no observer in
     this path, nothing that can fail to fire. `forwards` holds the end state. */
  .js .af-viz-node { opacity: 0; animation: af-pop var(--dur-slow) var(--ease-out) forwards; animation-delay: calc(120ms + var(--n) * 90ms); }
  .js .af-viz-rate { opacity: 0; animation: af-pop var(--dur-slow) var(--ease-out) .45s forwards; }
  .js .af-viz-account { opacity: 0; animation: af-pop var(--dur-slow) var(--ease-out) .6s forwards; }
  .js .af-viz-bar { transform: scaleY(0); animation: af-rise var(--dur-slow) var(--ease-out) forwards; animation-delay: calc(750ms + var(--i) * 70ms); }

  .af-wire--trunk {
    stroke-dasharray: 5 7;
    animation: af-flow 1.5s linear infinite;
  }

  /* Sections that reveal on scroll.
     ⚠ Hiding is gated on .af-reveal, which affiliate.js adds to a
     container only AT THE MOMENT it starts observing it. That ordering is
     the safety property: if the script never parses, IntersectionObserver
     is missing, or the observer never fires, the class is never added and
     the content renders normally. Gating on .js instead would leave whole
     sections at opacity 0. affiliate.js also force-reveals after a
     backstop timeout. */
  .af-reveal .af-step,
  .af-reveal .af-rung,
  .af-reveal .af-grow-col,
  .af-reveal .af-track { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .af-reveal .af-step { transition-delay: calc(var(--i, 0) * 80ms); }
  .af-reveal.is-in .af-step,
  .af-reveal.is-in .af-rung,
  .af-reveal.is-in .af-grow-col,
  .af-reveal.is-in .af-track { opacity: 1; transform: none; }
  .af-reveal.is-in .af-rung { transition-delay: calc(var(--i) * 90ms); }

  .af-reveal.af-rail .af-rail-fill { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
  .af-reveal.af-rail.is-in .af-rail-fill { transform: scaleX(1); }

  .af-reveal .af-grow-dot { opacity: 0; transform: scale(.4); }
  .af-reveal.is-in .af-grow-dot {
    animation: af-dot 380ms var(--ease-out) forwards;
    animation-delay: calc(var(--g) * 260ms + var(--d) * 26ms);
  }

  .js .af-close-ring { animation: af-breathe 9s ease-in-out infinite alternate; }
  .js .af-close-ring--2 { animation-duration: 11s; }
  .js .af-close-ring--3 { animation-duration: 13s; }
}

@keyframes af-pop    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes af-rise   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes af-dot    { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes af-flow   { to { stroke-dashoffset: -24; } }
@keyframes af-breathe{ from { transform: scale(1); } to { transform: scale(1.045); } }