/*
  /affiliates: the page's own pieces, on top of the stage kit
  (stage_pages.css). Same house rules: brand blues on flat light surfaces
  with .dark overrides, motion only on transform and opacity, the markup is
  the finished frame, RTL through logical properties (the orbit and the
  charts are geometry, so they stay physical on purpose).
*/
.af { --af-sprout: #dbe5ff; --af-bloom: #356dff; --af-thrive: #2a57d6; --af-scale: #1e3ea8; --af-money: #16a34a; --af-new: #8fb0ff; }
.dark .af { --af-sprout: #26408a; --af-new: #5b7fd6; --af-money: #22c55e; }

/* ─────────────────────────────────────────────────────────── hero */
.af-hero .st-h1 { font-size: clamp(2.55rem, 5vw, 4.3rem); }
.af-hero .st-h1 em { white-space: nowrap; }
.af-orbit-col { width: 100%; max-width: 33rem; margin: 0 auto; }
.af-orbit { position: relative; margin: 0; padding: .8rem 1.1rem 1.05rem; border-radius: 1.6rem; background: linear-gradient(160deg, #e9efff, #f6f8ff 55%, #edf2ff); box-shadow: 0 0 0 1px rgba(53,109,255,.12), var(--st-lift); }
.dark .af-orbit { background: linear-gradient(160deg, #142246, #0f1a33 60%, #132044); box-shadow: 0 0 0 1px rgba(255,255,255,.07), var(--st-lift); }
.af-orbit-top { display: flex; justify-content: center; }
.af-payday { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; color: var(--st-link); }
.af-payday i { font-size: .85rem; line-height: .55; }
.af-orbit-stage { position: relative; aspect-ratio: 1; container-type: inline-size; }
.af-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.af-ring { fill: none; stroke: rgba(53,109,255,.24); stroke-width: .28; }
.af-ring--year { stroke: rgba(53,109,255,.4); stroke-dasharray: .9 1.1; }
.af-payline { stroke: #356dff; stroke-width: .34; stroke-dasharray: .9 .9; opacity: .6; }
.dark .af-ring { stroke: rgba(122,160,255,.22); } .dark .af-ring--year { stroke: rgba(122,160,255,.38); } .dark .af-payline { stroke: #7aa0ff; }

.af-hub { position: absolute; left: 50%; top: 50%; width: 31cqi; height: 31cqi; margin: -15.5cqi 0 0 -15.5cqi; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35cqi; border-radius: 50%; background: var(--st-card); box-shadow: 0 0 0 1px rgba(53,109,255,.14), 0 0 0 2.2cqi rgba(53,109,255,.06), 0 18px 40px -18px rgba(15,35,95,.45); text-align: center; }
.dark .af-hub { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 0 2.2cqi rgba(107,149,255,.07), 0 18px 40px -18px rgba(0,0,0,.7); }
.af-hub-mark { display: inline-flex; color: #3871e4; }
.dark .af-hub-mark { color: #fff; }
.af-hub-mark .af-bird { width: max(18px, 5.4cqi); height: auto; }
.af-hub-k { font-size: max(9px, 2.05cqi); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); }
.af-hub-v { font-size: max(15px, 5.5cqi); font-weight: 830; letter-spacing: -.035em; line-height: 1.05; color: var(--st-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-hub-s { max-width: 26cqi; font-size: max(9px, 2.1cqi); font-weight: 680; line-height: 1.25; color: var(--st-link); font-variant-numeric: tabular-nums; }
.af-hub.is-bump { animation: af-bump .42s var(--st-ease); }

/* A customer: placed on its ring by angle (--a) and radius (--r, a share
   of the orbit's width); the counter-rotation keeps the initials upright. */
.af-av { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 7.8cqi; height: 7.8cqi; border-radius: 50%; transform-origin: 0 0;
  transform: rotate(var(--a, 0deg)) translateX(calc(var(--r, .3) * 100cqi)) rotate(calc(-1 * var(--a, 0deg))) scale(var(--s, 1)) translate(-50%, -50%);
  background: var(--af-bloom); color: #fff; font-size: max(10px, 3.1cqi); font-weight: 800; box-shadow: 0 0 0 .55cqi var(--st-card), 0 6px 14px -6px rgba(15,35,95,.5); opacity: var(--o, 1); will-change: transform; }
.af-av--sprout { background: var(--af-sprout); color: #1e3ea8; }
.dark .af-av--sprout { color: #dbe5ff; }
.af-av--thrive { background: var(--af-thrive); }
.af-av--scale { background: var(--af-scale); }
.af-av--year { box-shadow: 0 0 0 .55cqi var(--st-card), 0 0 0 .95cqi #356dff, 0 6px 14px -6px rgba(15,35,95,.5); }
.af-av::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(22,163,74,.55); opacity: 0; }
.af-av.is-pay::after { animation: af-ping .75s var(--st-ease); }

/* The commission on its way to the hub (made by affiliates_page.js). */
.af-chip { position: absolute; left: 50%; top: 50%; z-index: 4; padding: .3em .6em; border-radius: 99px; background: var(--af-money); color: #fff; font-size: max(10px, 2.5cqi); font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 6px 14px -6px rgba(21,128,61,.7); pointer-events: none; }

.af-orbit-foot { display: grid; gap: .6rem; margin-top: .55rem; }
.af-months { display: flex; align-items: center; gap: .75rem; }
.af-month { flex: none; min-width: 4.9rem; font-size: .8rem; font-weight: 780; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.af-segs { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.af-segs i { position: relative; height: 6px; border-radius: 9px; background: var(--st-tint-2); overflow: hidden; }
.af-segs i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #356dff; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
[dir="rtl"] .af-segs i::after { transform-origin: 100% 50%; }
.af-feed { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.6rem; margin: 0; padding: .45rem .55rem .45rem .85rem; border-radius: .95rem; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line); font-size: .86rem; font-weight: 650; color: var(--st-ink); }
[dir="rtl"] .af-feed { padding: .45rem .85rem .45rem .55rem; }
.af-feed-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-feed-m { flex: none; padding: .28rem .6rem; border-radius: 99px; background: var(--st-ok-bg); color: var(--st-ok); font-size: .76rem; font-weight: 780; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-feed.is-swap .af-feed-t, .af-feed.is-swap .af-feed-m { animation: af-swap .45s var(--st-ease); }
.af-legend-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; margin: 0; font-size: .72rem; color: var(--st-muted); }
.af-legend-mini span { display: inline-flex; align-items: center; gap: .4rem; }
.af-key { display: inline-block; flex: none; width: .75rem; height: .75rem; border-radius: 99px; border: 1.5px solid #356dff; }
.af-key--year { border-style: dashed; }
.af-orbit-rail { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .8rem; }
.af-orbit-rail .st-caption { margin: 0; }

/* ──────────────────────────────────────────────────── key facts */
.af-meter > span { width: var(--m); }

/* ─────────────────────────────────────── how it works: screens */
.af-sx { max-width: 25.5em; }
@media (min-width: 1024px) { .af-sx { font-size: 16.5px; } }
.af-sx-h { margin: .1em 0 .8em; font-size: 1.02em; font-weight: 780; letter-spacing: -.01em; line-height: 1.3; color: var(--st-ink); }
.af-sx-brand { display: flex; align-items: center; gap: .5em; margin-bottom: .9em; font-size: .9em; }
.af-sx-brand b { font-weight: 800; color: var(--st-ink); }
.af-sx-brand .sx-pill { -webkit-margin-start: auto; margin-inline-start: auto; font-size: .72em; }
.af-sx-birdbox, .af-sx-kit-art--logo { display: inline-flex; color: #3871e4; }
.dark .af-sx-birdbox { color: #fff; }
.af-sx-birdbox .af-bird { width: 1.5em; height: auto; }
.af-sx-field { display: grid; gap: .15em; margin-top: .55em; padding: .55em .8em; border-radius: .75em; background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st-line); }
.af-sx-field small { font-size: .7em; font-weight: 650; color: var(--st-muted); }
.af-sx-field span { font-size: .9em; font-weight: 650; color: var(--st-ink); }
.af-sx-typed { display: inline-block; max-width: -moz-max-content; max-width: max-content; overflow: hidden; white-space: nowrap; }
.af-sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-top: .95em; }
.af-sx-btn { display: inline-flex; align-items: center; justify-content: center; padding: .55em 1.1em; border-radius: .7em; background: linear-gradient(95deg, #2a57d6, #356dff); color: #fff; font-size: .88em; font-weight: 750; box-shadow: 0 6px 14px -8px rgba(30,62,168,.7); }
.af-sx-link { display: flex; align-items: center; gap: .6em; padding: .5em .5em .5em .8em; border-radius: .8em; background: var(--st-soft); box-shadow: inset 0 0 0 1.5px var(--st-tint-3); font-size: .88em; }
[dir="rtl"] .af-sx-link { padding: .5em .8em .5em .5em; }
.af-sx-link > i { color: var(--st-blue); font-size: .85em; }
.af-sx-url { flex: 1; min-width: 0; font-weight: 700; color: var(--st-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-sx-copy { position: relative; display: inline-grid; flex: none; }
.af-sx-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .45em .8em; border-radius: .6em; font-size: .85em; font-weight: 750; white-space: nowrap; }
.af-sx-copy-a { background: var(--st-blue); color: #fff; opacity: 0; }
.af-sx-copy-b { background: var(--st-ok-bg); color: var(--st-ok); }
.st-armed .af-sx-copy-a { opacity: 1; }
.st-armed .af-sx-copy-b { opacity: 0; }
.af-sx-kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin-top: 1em; }
.af-sx-kit { display: grid; gap: .4em; justify-items: center; font-size: .8em; color: var(--st-muted); font-weight: 650; }
.af-sx-kit-art { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; border-radius: .8em; background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st-line); }
.af-sx-kit-art--logo .af-bird { width: 42%; height: auto; }
.af-sx-kit-art--sw { gap: .3em; padding: 0 .6em; }
.af-sx-kit-art--sw i { flex: 1; aspect-ratio: 1 / 1.6; border-radius: .4em; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.af-sx-kit-art--post { flex-direction: column; align-items: stretch; gap: .3em; padding: .7em; background: linear-gradient(160deg, #356dff, #1e3ea8); }
.af-sx-kit-art--post b { height: 40%; border-radius: .35em; background: rgba(255,255,255,.28); }
.af-sx-kit-art--post i { height: .4em; border-radius: 9px; background: rgba(255,255,255,.55); }
.af-sx-kit-art--post i + i { width: 60%; }
.af-sx-video { padding: .8em; }
.af-sx-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7.2; margin-bottom: .75em; border-radius: .8em; background: linear-gradient(135deg, #1e3ea8, #356dff 60%, #7aa0ff); }
@media (max-width: 639px) { .af-sx-thumb { display: none; } }
.af-sx-play { display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255,255,255,.95); color: #1e3ea8; font-size: .85em; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
.af-sx-dur { position: absolute; bottom: .5em; inset-inline-end: .5em; padding: .1em .4em; border-radius: .3em; background: rgba(15,23,42,.75); color: #fff; font-size: .7em; font-weight: 700; }
.af-sx-ava { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--af-bloom); color: #fff; font-size: .85em; font-weight: 800; }
.af-sx-ava--1 { background: var(--af-thrive); } .af-sx-ava--2 { background: var(--af-scale); } .af-sx-ava--3 { background: var(--af-sprout); color: #1e3ea8; }
.af-sx-desc { margin-top: .7em; padding: .6em .75em; border-radius: .7em; background: var(--st-soft); font-size: .8em; line-height: 1.5; color: var(--st-body); }
.af-sx-a { color: var(--st-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.af-sx-hit { margin-top: .8em; }
.af-sx-next { display: grid; text-align: end; }
.af-sx-next small { font-size: .7em; font-weight: 650; color: var(--st-muted); }
.af-sx-next b { font-size: 1.25em; font-weight: 820; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.af-sx-rows { display: grid; gap: .5em; margin-top: .8em; }
.af-sx-r { display: flex; align-items: center; gap: .6em; padding: .45em .55em; border-radius: .7em; background: var(--st-soft); font-size: .86em; }
.af-sx-r .sx-grow b { display: block; font-weight: 750; color: var(--st-ink); }
.af-sx-r .sx-grow small { display: block; font-size: .78em; color: var(--st-muted); }
.af-sx-amt { font-weight: 800; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.af-sx-state { flex: none; min-width: 6.4em; padding: .25em .55em; border-radius: 99px; text-align: center; font-size: .72em; font-weight: 780; white-space: nowrap; }
.af-sx-state--paid { background: var(--st-ok-bg); color: var(--st-ok); }
.af-sx-state--cleared { background: var(--st-tint); color: var(--st-link); }
.af-sx-state--pending { background: var(--st-warn-bg); color: var(--st-warn); }
.af-step-link { margin-top: .9rem; font-size: .95rem; }
/* small loops that play while a screen is showing */
.st-armed .st-screen .af-sx-typed { max-width: 0; }
.st-armed .st-screen.is-active .af-sx-typed { animation: af-type 1s steps(16, end) .8s forwards; }
.st-armed .st-screen.is-active .af-sx-typed--2 { animation-delay: 1.5s; animation-duration: 1.3s; }
.st-armed .st-screen .af-sx-ok { opacity: 0; transform: scale(.7); }
.st-armed .st-screen.is-active .af-sx-ok { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--st-spring); transition-delay: 3.1s; }
.st-armed .st-screen.is-active .af-sx-btn { animation: af-press .35s var(--st-ease) 2.85s; }
.st-armed .st-screen.is-active .af-sx-copy-a { animation: af-out .3s var(--st-ease) 1.6s forwards; }
.st-armed .st-screen.is-active .af-sx-copy-b { animation: af-in .4s var(--st-spring) 1.75s forwards; }
.st-armed .st-screen.is-active .af-sx-a { animation: af-flash 1s var(--st-ease) 1.3s; }
.st-armed .st-screen.is-active .af-sx-state--pending { animation: af-pulse-warn 1.6s var(--st-ease) 1.4s 2; }

/* ───────────────────────────────────────────────── calculator */
.af-calc { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); max-width: 72rem; margin: 0 auto; }
@media (min-width: 1024px) { .af-calc { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1.5rem; } }
.af-calc-in, .af-calc-out { padding: 1.5rem; border-radius: 1.5rem; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow); }
@media (min-width: 640px) { .af-calc-in, .af-calc-out { padding: 1.9rem; } }
.af-calc-in { display: grid; gap: 1.45rem; align-content: start; margin: 0; }
.af-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.af-field legend, .af-field-h label { padding: 0; font-size: .88rem; font-weight: 720; color: var(--st-ink); }
.af-field legend { margin-bottom: .6rem; }
.af-field-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.af-val { flex: none; font-size: 1.35rem; font-weight: 830; letter-spacing: -.02em; color: var(--st-blue); font-variant-numeric: tabular-nums; }
.af-range { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; height: 1.6rem; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.af-range:focus { outline: none; }
.af-range::-webkit-slider-runnable-track { height: 6px; border-radius: 9px; background: linear-gradient(90deg, #356dff var(--p), var(--st-tint-2) var(--p)); }
[dir="rtl"] .af-range::-webkit-slider-runnable-track { background: linear-gradient(270deg, #356dff var(--p), var(--st-tint-2) var(--p)); }
.af-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4rem; height: 1.4rem; margin-top: calc(3px - .7rem); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #356dff, 0 4px 10px -2px rgba(30,62,168,.45); -webkit-transition: transform .25s var(--st-spring), box-shadow .25s; transition: transform .25s var(--st-spring), box-shadow .25s; }
.af-range:hover::-webkit-slider-thumb, .af-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.af-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #356dff, 0 0 0 7px rgba(53,109,255,.22); }
.af-range::-moz-range-track { height: 6px; border-radius: 9px; background: var(--st-tint-2); }
.af-range::-moz-range-progress { height: 6px; border-radius: 9px; background: #356dff; }
.af-range::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #356dff, 0 4px 10px -2px rgba(30,62,168,.45); }
.af-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #356dff, 0 0 0 7px rgba(53,109,255,.22); }
.af-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; padding: .3rem; border-radius: 1rem; background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st-line); }
.af-seg--plans { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .af-seg--plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.af-opt { position: relative; display: block; margin: 0; cursor: pointer; }
.af-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.af-opt > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-height: 2.6rem; padding: .45rem .35rem; border-radius: .75rem; text-align: center; font-size: .88rem; line-height: 1.25; color: var(--st-body); transition: background .25s, color .25s, box-shadow .3s, transform .3s var(--st-spring); }
.af-opt b { font-weight: 720; }
.af-opt small { font-size: .74rem; font-weight: 600; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.af-opt:hover > span { color: var(--st-ink); }
.af-opt input:checked + span { background: var(--st-card); color: var(--st-ink); box-shadow: 0 0 0 1.5px rgba(53,109,255,.55), 0 6px 14px -8px rgba(30,62,168,.45); }
.af-opt input:checked + span small { color: var(--st-link); }
.af-opt input:focus-visible + span { outline: 2px solid var(--st-blue); outline-offset: 2px; }
.af-opt input:active + span { transform: scale(.97); }

.af-calc-out { display: flex; flex-direction: column; }
.af-out-main > span, .af-out-row span { display: block; font-size: .84rem; font-weight: 650; color: var(--st-muted); }
.af-out-main b { display: block; margin-top: .15rem; font-size: clamp(2.6rem, 6.2vw, 4.2rem); font-weight: 840; letter-spacing: -.045em; line-height: 1.02; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.af-out-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--st-line-2); }
.af-out-row b { display: block; margin-top: .15rem; font-size: 1.55rem; font-weight: 820; letter-spacing: -.025em; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.af-out-main b.is-tick, .af-out-row b.is-tick { animation: af-tick .4s var(--st-ease); }

.af-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 12.5rem auto; gap: .45rem .6rem; margin-top: 1.6rem; }
.af-chart-y { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; font-weight: 600; line-height: 1; color: var(--st-faint); text-align: end; font-variant-numeric: tabular-nums; }
.af-chart-y span:first-child { transform: translateY(-50%); } .af-chart-y span:last-child { transform: translateY(50%); }
.af-chart-plot { position: relative; grid-row: 1; border-bottom: 1px solid var(--st-line-2); background: linear-gradient(var(--st-line) 1px, transparent 1px) 0 0 / 100% 50% repeat-y; }
.af-bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 3px; padding-top: 1px; }
.af-bar { position: relative; flex: 1 1 0; min-width: 0; }
.af-bar.is-off { display: none; }
.af-bar i { position: absolute; inset: 0; border-radius: 3px 3px 1px 1px; transform-origin: 50% 100%; transition: transform .75s var(--st-spring); transition-delay: calc(var(--i) * 10ms); }
.af-bar-rec { background: linear-gradient(180deg, #2a57d6, #1e3ea8); transform: scaleY(var(--rec)); }
.af-bar-new { background: var(--af-new); transform: translateY(calc(var(--rec) * -100%)) scaleY(var(--new)); }
.af-bar:hover i { filter: brightness(1.12); }
.st-armed .af-calc:not(.is-in) .af-bar-rec { transform: scaleY(0); }
.st-armed .af-calc:not(.is-in) .af-bar-new { transform: translateY(0) scaleY(0); }
.af-chart-x { grid-column: 2; display: flex; gap: 3px; font-size: .68rem; font-weight: 600; color: var(--st-faint); }
.af-chart-x span { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; white-space: nowrap; }
.af-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--st-muted); }
.af-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.af-legend .af-key { border: 0; border-radius: .2rem; }
.af-key--rec { background: #1e3ea8; } .af-key--new { background: var(--af-new); }
.af-calc-note { margin: auto 0 0; padding-top: .9rem; font-size: .76rem; line-height: 1.55; color: var(--st-faint); }
.af-ptable-wrap { max-width: 72rem; margin: 1.5rem auto 0; }
.af-ptable thead th { padding-block: .75rem; font-size: .74rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--st-muted); background: var(--st-soft); }
.af-ptable th { width: auto; }
.af-ptable tr > :first-child { width: 22%; }
.af-ptable thead th:not(:first-child) { width: 39%; }
.af-ptable tbody th { font-weight: 760; color: var(--st-ink); }
.af-ptable td small { font-variant-numeric: tabular-nums; }
.af-ptable td { font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .af-ptable th, .af-ptable td { padding: .85rem .75rem; font-size: .9rem; } .af-ptable thead th { font-size: .66rem; } }

/* ────────────────────────────────────────── payout journey */
.af-pay-stage { max-width: 72rem; }
.af-pay { position: relative; padding: 2rem 1.5rem 1.7rem; border-radius: 1.5rem; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow); }
.af-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.af-node { display: flex; flex-direction: column; align-items: center; text-align: center; }
.af-node-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--st-card); box-shadow: 0 0 0 1.5px var(--st-line-2); color: var(--st-faint); font-size: 1.05rem; transition: background .45s, color .45s, box-shadow .45s, transform .5s var(--st-spring); }
.af-node.is-on .af-node-ico { background: #356dff; color: #fff; box-shadow: 0 0 0 6px rgba(53,109,255,.14); }
.af-node--3.is-on .af-node-ico { background: var(--st-card); color: var(--st-warn); box-shadow: 0 0 0 1.5px var(--st-line-2); }
.af-node--3.is-done .af-node-ico { color: var(--st-ok); }
.af-node--4.is-on .af-node-ico { background: var(--st-ok); box-shadow: 0 0 0 6px var(--st-ok-bg); }
.af-node--5.is-on .af-node-ico { background: #1e3ea8; }
.af-node.is-pop .af-node-ico { transform: scale(1.12); }
.af-node-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); }
.af-node-ring circle { fill: none; stroke-width: 3; }
.af-node-ring .bg { stroke: var(--st-line); }
.af-node-ring .fg { stroke: var(--st-warn); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--v, 1))); }
.af-node--3.is-done .af-node-ring .fg { stroke: var(--st-ok); }
.af-node h3 { margin: .95rem 0 0; font-size: 1.02rem; font-weight: 770; letter-spacing: -.01em; color: var(--st-ink); }
.af-node p { max-width: 13.5rem; margin: .35rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--st-body); }
.af-node:not(.is-on) h3, .af-node:not(.is-on) p { opacity: .55; }
.af-node h3, .af-node p { transition: opacity .45s; }
.af-days { display: inline-block; margin-top: .55rem; padding: .22rem .6rem; border-radius: 99px; background: var(--st-warn-bg); color: var(--st-warn); font-size: .74rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.af-node--3.is-done .af-days { background: var(--st-ok-bg); color: var(--st-ok); }
/* the lane between the first and the last icon, its fill and the token */
.af-lane { position: absolute; z-index: 0; top: calc(2rem + 1.7rem - 1.5px); left: calc(1.5rem + (100% - 7rem) / 10); right: calc(1.5rem + (100% - 7rem) / 10); height: 3px; border-radius: 9px; background: var(--st-line-2); }
.af-lane-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #356dff, #2a57d6); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
[dir="rtl"] .af-lane-fill { transform-origin: 100% 50%; }
.af-token-run { position: absolute; inset: 0; transform: translateX(calc((var(--p, 1) - 1) * 100%)); }
[dir="rtl"] .af-token-run { transform: translateX(calc((1 - var(--p, 1)) * 100%)); }
.af-token { position: absolute; top: 50%; right: 0; z-index: 3; padding: .3rem .6rem; border-radius: 99px; background: var(--af-money); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; transform: translate(50%, -50%); box-shadow: 0 8px 16px -8px rgba(21,128,61,.8); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .25s; }
.af-pay.is-moving .af-token { opacity: 1; }
[dir="rtl"] .af-token { right: auto; left: 0; transform: translate(-50%, -50%); }
@media (max-width: 759px) {
  .af-pay { padding: 1.4rem 1.1rem; }
  .af-track { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .af-node { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); -moz-column-gap: 1rem; column-gap: 1rem; align-items: start; text-align: start; }
  .af-node-ico { grid-row: span 3; }
  .af-node h3 { margin-top: .2rem; }
  .af-node p { max-width: none; }
  .af-days { justify-self: start; }
  .af-lane { top: calc(1.4rem + 1.7rem); bottom: calc(1.4rem + 1.7rem); left: calc(1.1rem + 1.7rem - 1.5px); right: auto; width: 3px; height: auto; }
  [dir="rtl"] .af-lane { left: auto; right: calc(1.1rem + 1.7rem - 1.5px); }
  .af-lane-fill, [dir="rtl"] .af-lane-fill { transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  .af-token-run, [dir="rtl"] .af-token-run { transform: translateY(calc((var(--p, 1) - 1) * 100%)); }
  .af-token, [dir="rtl"] .af-token { top: auto; bottom: 0; right: auto; left: 50%; transform: translate(-50%, 50%); }
}

/* ───────────────────────────────────────────────── fair play */
.af-rules { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 72rem; margin: 0 auto; }
@media (min-width: 1024px) { .af-rules { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; } }
.af-serp-stage { max-width: 36rem; }
.af-serp { padding: 1.2rem; border-radius: 1.5rem; background: linear-gradient(160deg, #e9efff, #f6f8ff 55%, #edf2ff); box-shadow: 0 0 0 1px rgba(53,109,255,.12), var(--st-lift); }
.dark .af-serp { background: linear-gradient(160deg, #142246, #0f1a33 60%, #132044); box-shadow: 0 0 0 1px rgba(255,255,255,.07), var(--st-lift); }
.af-serp-bar { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: 999px; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line), 0 8px 18px -12px rgba(15,35,95,.4); font-size: .98rem; color: var(--st-ink); }
.af-serp-bar > i { color: var(--st-faint); font-size: .9rem; }
.af-serp-q { flex: 1; min-width: 0; min-height: 1.5em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.af-serp .st-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; -webkit-margin-start: 1px; margin-inline-start: 1px; vertical-align: -.15em; background: var(--st-blue); animation: st-blink 1s steps(1) infinite; }
.af-serp-res { display: grid; gap: .7rem; margin-top: 1rem; }
.af-serp-res .af-ad1, .af-serp-res .af-ad2 { grid-area: 1 / 1; }
.af-serp-res .af-org:nth-of-type(3) { grid-row: 2; } .af-serp-res .af-org:nth-of-type(4) { grid-row: 3; }
.af-ad, .af-org { position: relative; display: grid; gap: .35rem; padding: .95rem 1.05rem; border-radius: 1rem; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line); }
.af-ad small { font-size: .74rem; color: var(--st-muted); }
.af-ad small b { color: var(--st-ink); font-weight: 750; }
.af-ad-t { font-size: 1.02rem; font-weight: 700; color: #1a0dab; }
.dark .af-ad-t { color: #8ab4f8; }
.af-ad-l { display: block; height: .5rem; border-radius: 9px; background: var(--st-line); }
.af-ad-l--s { width: 62%; }
.af-ad-l--t { width: 45%; height: .65rem; background: var(--st-tint-2); }
.af-org { opacity: .7; }
.af-ad-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.af-stamp { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .6rem; border-radius: .55rem; font-size: .74rem; font-weight: 800; white-space: nowrap; transform: rotate(-2deg); }
[dir="rtl"] .af-stamp { transform: rotate(2deg); }
.af-stamp--no { background: var(--st-no-bg); color: var(--st-no); box-shadow: inset 0 0 0 1.5px currentColor; }
.af-stamp--ok { background: var(--st-ok-bg); color: var(--st-ok); box-shadow: inset 0 0 0 1.5px currentColor; }
.af-ad1 .af-ad-t { text-decoration: line-through; text-decoration-color: rgba(185,28,28,.55); text-decoration-thickness: 2px; }
.st-scene.is-live .af-ad1:not(.is-stamped) .af-ad-t { text-decoration-color: transparent; }
.af-ad1.is-stamped .af-ad-t { transition: text-decoration-color .4s; }

.af-rules-lists { display: grid; gap: 1rem; }
.af-list { padding: 1.5rem 1.6rem; border-radius: 1.3rem; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow); }
.af-list h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-size: 1.1rem; font-weight: 780; color: var(--st-ink); }
.af-list--yes h3 i { color: var(--st-ok); } .af-list--no h3 i { color: var(--st-no); }
.af-list ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.af-list li { position: relative; -webkit-padding-start: 1.5rem; padding-inline-start: 1.5rem; font-size: .97rem; line-height: 1.55; color: var(--st-body); }
.af-list li::before { content: ""; position: absolute; inset-inline-start: .2rem; top: .62em; width: .45rem; height: .45rem; border-radius: 99px; }
.af-list--yes li::before { background: var(--st-ok); } .af-list--no li::before { background: var(--st-no); }
.af-penalty { display: flex; gap: .6rem; margin: 1rem 0 0; padding: .75rem .9rem; border-radius: .9rem; background: var(--st-warn-bg); color: var(--st-warn); font-size: .88rem; font-weight: 650; line-height: 1.5; }
.af-penalty i { margin-top: .2rem; }

/* ─────────────────────────────────────────────── who + proof */
.af-who-card .st-card-ico { transition: transform .45s var(--st-spring), background .3s, color .3s; }
.af-who-card:hover .st-card-ico { transform: rotate(-8deg) scale(1.08); background: var(--st-blue); color: #fff; }
.af-who-card p { margin-bottom: 0; }
.af-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; max-width: 72rem; margin: 0 auto 2.75rem; padding: 0; list-style: none; }
@media (min-width: 960px) { .af-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.af-stats li { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4rem 1rem; border-radius: 1.25rem; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow); text-align: center; }
.af-stats li:last-child { grid-column: 1 / -1; }
@media (min-width: 960px) { .af-stats li:last-child { grid-column: auto; } }
.af-stats b { display: inline-flex; align-items: baseline; gap: .25rem; font-size: 2.15rem; font-weight: 830; letter-spacing: -.04em; line-height: 1.1; color: var(--st-ink); }
.af-stats .af-stat-ai { font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.35; }
.af-stats li > span { display: block; margin-top: .4rem; font-size: .86rem; line-height: 1.45; color: var(--st-body); }
.af-star { color: #f5a524; font-size: .5em; transform: translateY(-.45em); }
.af-marquee { margin-bottom: 2.5rem; }
.af-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; }
.af-links-t { width: 100%; margin-bottom: .35rem; text-align: center; font-size: .76rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--st-muted); }
.af-chip-link { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1.05rem; border-radius: 999px; background: var(--st-card); box-shadow: 0 0 0 1px var(--st-line), 0 6px 14px -12px rgba(15,23,42,.4); color: var(--st-ink); font-size: .93rem; font-weight: 650; transition: transform .3s var(--st-ease), box-shadow .3s, color .2s; }
.af-chip-link i { color: var(--st-blue); font-size: .8rem; }
.af-chip-link:hover { color: var(--st-link); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(53,109,255,.5), 0 10px 20px -12px rgba(30,62,168,.5); }

/* ─────────────────────────────────────────────────── toolkit */
.af-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.3rem; }
.af-dash-k { padding: .7rem .8rem; border-radius: .9rem; background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st-line); }
.af-dash-k small { display: block; font-size: .72rem; font-weight: 650; color: var(--st-muted); }
.af-dash-k b { display: block; margin-top: .1rem; font-size: 1.3rem; font-weight: 820; letter-spacing: -.02em; color: var(--st-ink); }
.af-dash-bars { grid-column: 1 / -1; height: 4.2rem; }
.af-brand-art { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st-line); }
.af-brand-logo { display: inline-flex; align-items: center; }
.af-brand-logo img { display: block; width: auto; height: 2.4rem; }
.af-brand-sw { display: flex; gap: .4rem; }
.af-brand-sw i { width: 1.9rem; height: 1.9rem; border-radius: .55rem; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .4s var(--st-spring); }
.st-tile:hover .af-brand-sw i { transform: translateY(-4px); }
.st-tile:hover .af-brand-sw i:nth-child(2) { transition-delay: .05s; } .st-tile:hover .af-brand-sw i:nth-child(3) { transition-delay: .1s; } .st-tile:hover .af-brand-sw i:nth-child(4) { transition-delay: .15s; }
.af-tile-link { margin-top: auto; padding-top: 1.1rem; font-size: .95rem; }
.af-perks { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.af-perks li { display: flex; gap: .55rem; font-size: .92rem; line-height: 1.45; color: var(--st-ink); }
.af-perks i { margin-top: .25rem; color: var(--st-ok); font-size: .75rem; }

/* ──────────────────────────────────────────────────────── cta */
.af-cta-rings { position: absolute; left: 50%; top: 50%; width: 66rem; max-width: none; height: auto; transform: translate(-50%, -50%); opacity: .2; pointer-events: none; }
.af-cta-rings circle { fill: none; stroke: #fff; stroke-width: 1.3; }
.af-cta-rings .af-cta-dash { stroke-dasharray: 3 7; }
.af-cta-rings .af-cta-dot { fill: #fff; stroke: none; }
.af-cta-rings g { transform-origin: 300px 300px; }
.st-armed .af-cta-rings .af-cr1 { animation: st-spin 26s linear infinite; }
.st-armed .af-cta-rings .af-cr2 { animation: st-spin 41s linear infinite; }
.st-armed .af-cta-rings .af-cr3 { animation: st-spin 90s linear infinite; }
.af-cta .st-wrap { position: relative; }
.af-cta-mark { display: inline-flex; margin-bottom: 1.6rem; color: #fff; }
.af-cta-mark .af-bird { width: 3.6rem; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }

/* ────────────────────────────────────────────────── keyframes */
@keyframes af-bump { 40% { transform: scale(1.05); } }
@keyframes af-ping { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,.6); } 100% { opacity: 0; box-shadow: 0 0 0 2.6cqi rgba(22,163,74,0); } }
@keyframes af-swap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes af-tick { 40% { transform: translateY(-2px); color: var(--st-link); } }
@keyframes af-type { to { max-width: 20em; } }
@keyframes af-press { 50% { transform: scale(.92); } }
@keyframes af-out { to { opacity: 0; transform: scale(.85); } }
@keyframes af-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes af-flash { 30% { background: rgba(53,109,255,.18); box-shadow: 0 0 0 4px rgba(53,109,255,.18); border-radius: 4px; } }
@keyframes af-pulse-warn { 50% { box-shadow: 0 0 0 5px rgba(180,83,9,.16); } }

@media (prefers-reduced-motion: reduce) {
  .af-av { will-change: auto; }
}