/* ============================================================================
   marketing-affiliates.css — THE AFFILIATE HOMEPAGE (`/affiliates`, English), P3-22, plan item 3.22.
   operator-2026-09-25-AFFILIATE-REBUILD: the page is the approved frame `Affiliate/Home/Become an
   Affiliate` (APPROVED-SET.tsv:352), read as a LAYOUT spec — band order and composition from the frame,
   the site's own button and card treatments (as its sibling `/employers` ships them) everywhere else.
   Linked by `components/marketing/affiliate/AffiliateHome.tsx` only, and EVERY rule is scoped under
   `.aff-home`, a class exactly one route renders, so no other page can move. Additive sibling sheet:
   the pinned marketing.css already carries the frame family's `.mkt-*` bands, the `.wm-aff` #181818
   ground and the `.portal-affiliate` rules (steps that open on hover with a brand edge, the tinted
   notched CTA band and its arrow); these rules draw what it does not.
   Breakpoints are the site's: desktop >= 1280 is the frame; 1024-1279 keeps the desktop composition
   narrower; <= 1023.98 (tablet) and <= 599.98 (phone) are P10's own layouts (no approved mobile frame;
   docs/rules/MOBILE.md: body >= 16px, fields >= 16px, taps >= 44px, no sideways scroll).
   ============================================================================ */

/* ---- 0. The page fills the viewport, as /employers does (marketing-employer.css, same reason: the
   site boxes every `.page.mkt` at 1200px; the frame's hero and tinted bands run edge to edge). */
.page.mkt.aff-home { width: 100%; max-width: 100%; margin: 0; }

/* ---- 1. HERO. The frame: #181818 with the tone-on-tone arrow field, square, copy left-set, sign-up card
   right. `.wm-aff` supplies the ground; the site-wide interim hero rule (marketing-cms.css,
   `.page.fin.mkt section.mkt-hero::before`) forces the LR-blue tile at .18, so the frame's own arrow
   tile and opacity are restored here (the /employers fix, for this page). */
.page.fin.mkt.wm-aff.aff-home section.mkt-hero::before { background-image: var(--wm-img); opacity: var(--wm-op, .55); }
.page.aff-home section.mkt-hero { border-radius: 0; }
.page.aff-home .mkt-hero .mkt-hcopy { text-align: start; }
.page.aff-home .mkt-hero .mkt-hcopy p { margin-inline: 0; }
.page.aff-home .mkt-hero .mkt-hbtns { justify-content: flex-start; }

/* The card: the frame's "Email*" label over a real input, the site's solid primary (as on /employers). */
.page.aff-home .mkt-signup .aff-signup-h {
  font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 20px; text-align: start;
}
.page.aff-home .mkt-signup .aff-signup-form { margin: 0; }
.page.aff-home .mkt-signup .aff-signup-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; text-align: start; }
/* NW-08 (2026-10-02, MW-03 44x44): the "Email*" label[for] is 16-20px tall (36 of 290 L2 offenders, all
   widths <1024). 14px block padding taken back by margin (-14px top, 6-14 = -8px bottom): the label's
   box is 44+ tall and the input below does not move. The input is later in the DOM so it still wins
   the overlapped band, and a tap there focuses the same field. Desktop untouched. */
@media (max-width: 1023.98px) {
  .page.aff-home .mkt-signup .aff-signup-label { padding-block: 14px; margin: -14px 0 -8px; }
}
.page.aff-home .mkt-signup input.mkt-inp {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-tile); padding: 13px 15px;
  background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; line-height: normal;
}
.page.aff-home .mkt-signup input.mkt-inp:focus-visible { outline: 2px solid #1A52C4; outline-offset: 2px; }
.page.aff-home .mkt-signup .btn-solid.wide { background: var(--cta-fill); color: #fff; }
.page.aff-home .mkt-signup button.wide { width: 100%; justify-content: center; }
.page.aff-home .mkt-signup .mkt-terms { text-align: start; }
.page.aff-home .mkt-signup .mkt-terms a { color: var(--cta-fill); text-decoration: none; }
.page.aff-home .mkt-signup .mkt-terms a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- 2. THE FOUR FIGURES. The frame: one row of four, thin rules between, ink numeral with a brand
   symbol (pinned `.page.fin .mkt-snum .sym`), caption under. No heading. */
.page.aff-home .aff-stats { padding-top: 72px; padding-bottom: 40px; }
.page.aff-home .aff-stats .mkt-srow { gap: 0; }
.page.aff-home .aff-stats .mkt-stat { padding: 4px 12px; text-align: center; }
.page.aff-home .aff-stats .mkt-stat + .mkt-stat { border-inline-start: 1px solid var(--line); }
.page.aff-home .aff-stats .mkt-snum { font-size: 46px; line-height: 1.1; letter-spacing: -.02em; }
.page.aff-home .aff-stats .mkt-slab { font-size: 17px; line-height: 1.4; color: var(--ink); opacity: .8; max-width: 12ch; margin: 10px auto 0; }

/* ---- 3. "PARTNER WITH A PLATFORM…". The frame: heading in a left column, the four cards to its right
   in two rows whose widths alternate (wide|narrow, narrow|wide). */
.page.aff-home .aff-feat {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; align-items: start;
  padding-top: 72px; padding-bottom: 72px;
}
.page.aff-home .mkt-feat.aff-feat > h2 { text-align: start; font-size: 38px; line-height: 1.12; margin: 0; }
.page.aff-home .aff-feat .mkt-fgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.page.aff-home .aff-feat .mkt-fcard { padding: 24px; }
.page.aff-home .aff-feat .mkt-fcard:nth-child(1) { grid-column: 1 / 5; }
.page.aff-home .aff-feat .mkt-fcard:nth-child(2) { grid-column: 5 / 8; }
.page.aff-home .aff-feat .mkt-fcard:nth-child(3) { grid-column: 1 / 4; }
.page.aff-home .aff-feat .mkt-fcard:nth-child(4) { grid-column: 4 / 8; }
.page.aff-home .aff-feat .mkt-fcard h3 { font-size: 19px; margin: 18px 0 8px; }
.page.aff-home .aff-ico { display: inline-flex; color: var(--brand); line-height: 0; }

/* ---- 4. "CLEAR EARNINGS. TRANSPARENT PAYMENTS." The pinned `.mkt-node` band (tint, centred heading and
   sub). The frame's diagram: four boxes, two either side of the LiveRec slab, each wired to it from its
   title line. Five columns — box | wire | hub | wire | box — so every wire scales with its own cell. */
.page.aff-home .aff-earn-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px 150px 64px minmax(0, 1fr); row-gap: 24px;
  max-width: 1004px; margin: 48px auto 0; text-align: start; /* the other bands' content edges: 1100 - 2 x 48 */
}
.page.aff-home .aff-earn-box {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 30px;
}
.page.aff-home .aff-earn-box.left { grid-column: 1; text-align: end; }
.page.aff-home .aff-earn-box.right { grid-column: 5; }
.page.aff-home .aff-earn-box.top { grid-row: 1; }
.page.aff-home .aff-earn-box.bottom { grid-row: 2; }
.page.aff-home .aff-earn-hd { display: flex; align-items: center; gap: 16px; justify-content: flex-end; }
.page.aff-home .aff-earn-box.right .aff-earn-hd { flex-direction: row-reverse; }
.page.aff-home .aff-earn-hd h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin: 0; color: var(--ink); }
.page.aff-home .aff-earn-box p { font-size: 14.5px; line-height: 1.6; color: var(--mut); margin: 10px 0 0; }
.page.aff-home .aff-earn-box.right p { padding-inline-start: 44px; }
.page.aff-home .aff-earn-box.left p { padding-inline-end: 44px; }
.page.aff-home .aff-wire { position: relative; align-self: stretch; }
.page.aff-home .aff-wire.left { grid-column: 2; }
.page.aff-home .aff-wire.right { grid-column: 4; }
.page.aff-home .aff-wire.top { grid-row: 1; }
.page.aff-home .aff-wire.bottom { grid-row: 2; }
.page.aff-home .aff-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page.aff-home .aff-wire line { stroke: #77A0F8; stroke-width: 1.2; }
.page.aff-home .aff-wire circle { fill: var(--brand); }
/* ST-78 (3) (founder 2026-10-03: hovering Payout frequency / Payment methods hid the blue dot where the wire meets
   the card; the left cards kept theirs). CAUSE, read from source: the card-end dot (r=4 at the wire cell's edge)
   overlaps the card by 4px; the hover's `transform: translateY(-2px)` (marketing-motion.css) lifts the box into the
   positioned paint layer, where it and the `position: relative` wires paint in DOM order. Left boxes precede their
   wire (dot on top); right boxes FOLLOW theirs (card on top). z-index 1 on the right wires puts them above a lifted
   box; at rest nothing moves (they already painted after the boxes and after the hub). Hover values untouched.
   Pinned by affEarnDotSt78.test.tsx. */
/* operator 2026-10-04 (screenshot): "the top left dot is half covered by the chip itself, make it like the other 3 dots".
   The same DOM-order rule as above, one more case: the top-left wire comes BEFORE the hub in the DOM, so the hub paints
   over the 4px of its card-end dot that lies on the hub's edge (the other three wires follow the hub, so their dots
   already sat on top). The left wires get z-index 1 too, so every wire paints above the hub and above a lifted box. */
.page.aff-home .aff-wire.left,
.page.aff-home .aff-wire.right { z-index: 1; }
.page.aff-home .aff-earn-hub {
  grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: center;
  position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center;
}
/* operator 2026-10-04 (screenshot of /affiliates): "i want the chip here to be the same theme as affiliate meaning
   matching the chat widget, header and footer main color". MEASURED on :4300: the affiliate chat launcher and the
   footer are both rgb(24, 24, 24) = #181818 (this page's hero ground, `.wm-aff`); the chip was var(--brand) blue.
   The chip is now #181818, and its wordmark is logo-liverec-white-bluearrow.svg: the white wordmark with the small
   arrow in the "R" (the file's LAST path) filled #2164F4, the brand blue, so it reads on the dark chip. */
.page.aff-home .aff-earn-slab { position: absolute; inset: 0; width: 100%; height: 100%; fill: #181818; }
.page.aff-home .aff-earn-mark { position: relative; width: 104px; height: auto; }

/* ---- 5. "START EARNING IN JUST A FEW SIMPLE STEPS". The frame: heading left, intro right; four tall
   cards, a big grey numeral at the top, icon and title at the foot. The pinned `.portal-affiliate` rules
   give the cards their edge, the brand edge on hover and the text that opens on hover; the frame's
   numeral is plain type (grey, brand on hover), not the pinned chip. */
.page.aff-home .aff-steps { text-align: start; padding-top: 72px; padding-bottom: 72px; }
.page.aff-home .aff-steps-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 44px; }
.page.aff-home .aff-steps-head h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-align: start; }
.page.aff-home .aff-steps-head .mkt-stepssub { margin: 6px 0 0; max-width: none; color: var(--ink); font-size: 16px; line-height: 1.65; }
.page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-step {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 300px; padding: 24px 24px 26px;
}
.page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-snum2 {
  width: auto; height: auto; background: none; color: #C9CCD6; font-size: 44px; line-height: 1; letter-spacing: -.02em;
  margin: 0 0 auto; justify-content: flex-start;
}
.page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-step:hover .mkt-snum2 { background: none; color: var(--brand); }
.page.aff-home .aff-steps .mkt-step .aff-ico { margin: 28px 0 14px; }
.page.aff-home .aff-steps .mkt-step h3 { font-size: 21px; line-height: 1.3; margin: 0; }
/* Where nothing can hover (phones, tablets), the text a desktop reveals on hover is simply shown.
   (Restored 2026-10-02: P3-22b had replaced this with an every-width always-shown body for the shared scroll
   sequence; the operator asked for the hover back, autorun/runs/P3-22b/REVERT-20261002.md.) */
@media (hover: none) {
  .page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-step p { max-height: none; opacity: 1; margin-top: 10px; }
}

/* ---- 6. REVIEWS: /about's rail, cards and dots unchanged (marketing-cms.css / marketing-motion.css);
   the band only needs air between it and the steps. */
.page.aff-home .aff-testi { padding-top: 24px; }

/* ---- 7. THE CTA BAND. The pinned `.portal-affiliate .mkt-ctaband.notched` paints the frame's tint, ink
   heading, solid button and the arrow at its left; the frame sets the words and button in one column
   to the arrow's right. */
.page.fin.mkt.aff-home .aff-cta .mkt-ctaband { flex-direction: column; align-items: flex-start; gap: 24px; padding: 56px 56px 56px 176px; border-radius: 0; }
.page.aff-home .aff-cta .mkt-ctatext { flex: none; }

/* ---- 8. FAQ. The frame: heading in a left column, the accordion to its right. */
.page.aff-home .aff-faq {
  max-width: 1100px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; align-items: start;
  padding-top: 64px; padding-bottom: 80px;
}
.page.aff-home .mkt-faq.aff-faq > h2 { text-align: start; font-size: 38px; line-height: 1.12; margin: 0; }

/* ---- 1024-1279: the desktop composition, narrower. */
@media (max-width: 1279.98px) {
  .page.aff-home .mkt-feat.aff-feat > h2,
  .page.aff-home .aff-steps-head h2,
  .page.aff-home .mkt-faq.aff-faq > h2 { font-size: 32px; }
  .page.aff-home .aff-earn-grid { grid-template-columns: minmax(0, 1fr) 40px 120px 40px minmax(0, 1fr); }
  .page.aff-home .aff-earn-hub { width: 120px; height: 120px; }
  .page.aff-home .aff-earn-mark { width: 84px; }
  .page.aff-home .aff-earn-box { padding: 22px 22px; }
  .page.aff-home .aff-earn-box.right p { padding-inline-start: 0; }
  .page.aff-home .aff-earn-box.left p { padding-inline-end: 0; }
  /* MOBILE.md body text >= 16px below the desktop (the /employers P3-11 set). */
  .page.aff-home .cms-qcard p,
  .page.aff-home .mkt-ctaband .mkt-ctasub,
  .page.aff-home .mkt-faqitem .mkt-a,
  .page.aff-home .aff-earn-box p,
  .page.aff-home .mkt-fcard p,
  .page.aff-home .mkt-step p { font-size: 16px; }
  .page.aff-home .mkt-signup input.mkt-inp { font-size: 16px; }
}

/* ---- ST-68 (operator 2026-10-02, verbatim: "the text on the left side of the cards should be bigger for
   desktop and laptop and the word success should be liverec blue, just want to fill in the empty space
   under the header without changing the layout or cards"). Band 3's heading ONLY, >= 1024 ONLY; the
   grid, column widths, cards, the FAQ/steps heads and every width below 1024 are untouched (tablet and
   phone keep the 32px set above). Left column, from the sheets (not measured in a browser):
   >= 1280 `.mkt-feat{max-width:1100px;padding:56px 48px}` (marketing.css:377) -> (1004-48)*5/13 = 368px;
   1024-1279 padding 20px (marketing-responsive.css:226) -> at 1024 (984-48)*5/13 = 360px. The sizes keep
   the longest single word of all six headings inside that column; `overflow-wrap` is a guard only.
   This deliberately departs from the frame's 38px on the operator's word (frames-to-routes.tsv HIGH). */
@media (min-width: 1024px) {
  .page.aff-home .mkt-feat.aff-feat > h2 { font-size: 52px; line-height: 1.08; overflow-wrap: break-word; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .page.aff-home .mkt-feat.aff-feat > h2 { font-size: 44px; }
}
/* The accent word, every width: the site's own elected blue (`--brand:#2164F4`, design-system.css:31 and
   marketing.css:685 on `.page`) — 4.9:1 on white, large bold type. Colour only; a plain span, no aria. */
.page.aff-home .aff-feat-accent { color: var(--brand); }

/* ---- TABLET (<= 1023.98): one column per band head; grids of two, so every row is full. */
@media (max-width: 1023.98px) {
  .page.aff-home .mkt-hero .mkt-hwrap { grid-template-columns: 1fr; gap: 32px; }
  /* The sign-up card, capped at 560px, is CENTRED under the copy — ruling
     operator-2026-09-25-SIGNUP-CENTRE, the /employers (10) cure. Measured before (P2-15 lead
     probe, :4300): `justify-self: start` left it 84–211.5px left of the column's centre at
     768–1023. `center` is direction-neutral (/ar the same); the copy above stays left-set.
     Phones: the column is under 560, the card fills it, nothing moves. NO FRAME. */
  .page.aff-home .mkt-hero .mkt-signup { width: 100%; max-width: 560px; justify-self: center; box-sizing: border-box; }
  .page.aff-home .aff-stats .mkt-srow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .page.aff-home .aff-stats .mkt-stat:nth-child(odd) { border-inline-start: 0; }
  .page.aff-home .aff-feat,
  .page.aff-home .aff-faq,
  .page.aff-home .aff-steps-head { grid-template-columns: 1fr; gap: 28px; }
  .page.aff-home .aff-feat .mkt-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .page.aff-home .aff-feat .mkt-fcard:nth-child(n) { grid-column: auto; }
  /* The diagram: the wires would join nothing at these widths, so the LiveRec slab leads as the hub and
     the four boxes follow two by two, in the frame's positions (top pair, then bottom pair). */
  .page.aff-home .aff-earn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; max-width: 760px; }
  .page.aff-home .aff-wire { display: none; }
  .page.aff-home .aff-earn-hub { grid-column: 1 / -1; grid-row: auto; order: -1; width: 104px; height: 104px; margin-bottom: 8px; }
  .page.aff-home .aff-earn-mark { width: 72px; }
  .page.aff-home .aff-earn-box.left,
  .page.aff-home .aff-earn-box.right { grid-column: auto; grid-row: auto; text-align: start; }
  .page.aff-home .aff-earn-box.left .aff-earn-hd { flex-direction: row-reverse; justify-content: flex-end; }
  .page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-step { min-height: 0; }
  .page.fin.mkt.aff-home .aff-cta .mkt-ctaband { padding: 132px 32px 40px; }
}

/* ---- PHONE (<= 599.98): single columns, except the four figures, which stay two by two (no lone figure). */
@media (max-width: 599.98px) {
  .page.aff-home .mkt-hero .mkt-hbtns { flex-direction: column; align-items: stretch; }
  .page.aff-home .mkt-hero .mkt-hbtns > .btn { width: 100%; justify-content: center; white-space: nowrap; }
  .page.aff-home .mkt-hero .mkt-signup { padding: 24px 20px; }
  .page.aff-home .mkt-hero .mkt-signup .btn-google { white-space: nowrap; }
  .page.aff-home .aff-stats { padding-top: 48px; padding-bottom: 24px; }
  .page.aff-home .aff-stats .mkt-snum { font-size: 34px; }
  .page.aff-home .aff-stats .mkt-slab { font-size: 16px; }
  .page.aff-home .aff-feat,
  .page.aff-home .aff-steps,
  .page.aff-home .aff-faq { padding-top: 48px; padding-bottom: 48px; }
  .page.aff-home .aff-feat .mkt-fgrid,
  .page.aff-home .aff-earn-grid,
  .page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-sgrid { grid-template-columns: 1fr; }
  .page.fin.mkt.aff-home .aff-earn { padding: 48px 20px; }
  .page.fin.mkt.aff-home .aff-cta .mkt-ctaband { padding: 124px 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .page.fin.mkt.portal-affiliate.aff-home .aff-steps .mkt-snum2 { transition: none; }
}

/* ST-29 (operator walk 2026-10-01, p20 + p25) — THE PORTAL FOOTER TAKES THE PORTAL'S COLOUR. COLOUR ONLY: no box
   moves (ST-17 owns the footer's layout, after the operator's pick).
   Operator, p25: "footer should match the main banner for affilates marketing page"; p20: the arrow watermark should
   "match with the left nav in the portal arrow watermark".
   MEASURED (source, not browser — browsers were forbidden this pass): the footer is the SiteChrome footer, a SIBLING
   of `<main>` inside the chrome's `.page.fin` wrapper, so `.aff-home` (inside main) cannot be its ancestor; the rule
   keys on the wrapper that CONTAINS this page's root (`:has`), which only /affiliates and its five locale twins
   render. Today `.page.fin .p-foot{background:#2164F4}` (marketing.css:698) paints it LR blue.
   NO FRAME for the footer colour: #181818 is this page's hero ground (`.page.wm-aff{--wm-bg}`, marketing.css:601).
   ARROW: the affiliate portal rail's own watermark colour, the default `.rail-wm{background:#6E6E73}`
   (design-system.css:147; the affiliate rail is the default `.rail`, #424245), painted through the SAME
   footer-arrow.png as a mask (alpha = the arrow, RGB plain white, decoded), at full strength as the rail draws it.
   ⚠ Contrast #6E6E73 on #181818 = 3.501:1 — HEAVIER than the operator's 2026-09-30 "quiet" footer arrow (white .14
   on blue = 1.272:1) and than on its own rail (1.975:1). Built as instructed; flagged for the reviewer's eye.
   Footer ink stays white: 17.76:1 on #181818. Position, size and the < 1200 px hide are untouched.
   §9b: literals only, no var(). Row: queue ST-29. INTERIM DEVIATION · UNRATIFIED (the home-row footer is LR blue). */
.page.fin:has(> main .page.aff-home) > .p-foot { background: #181818; }
.page.fin:has(> main .page.aff-home) > .p-foot .watermark {
  background: #6E6E73;
  -webkit-mask: url(/mocks/assets/footer-arrow.png) left bottom/contain no-repeat;
          mask: url(/mocks/assets/footer-arrow.png) left bottom/contain no-repeat;
  opacity: 1;
}

/* ST-61 (operator walk p32 -> ST-43 audit -> operator APPROVED option A, 2026-10-02): THE CARD CORNERS TAKE THE
   SYSTEM RADIUS. Operator, p32: "make sure all cards have the same corner cutout radius ... a card on the marketing
   page that its corner cutouts were a little too sharp".
   MEASURED (ST-43/measure.json, :4300, 1440x900 dpr2, hydrated; NOT re-read this pass, browsers forbidden):
     · `.aff-cta .mkt-ctaband` 0/0/0/0 here, while the same notched band is 24/0/24/0 on /employers, /recruiter,
       /blog, /help-center, /press — the square corners sit beside two rounded 10px bites (audit Finding 1).
     · `.aff-earn-box` x4 at 10px against `--r-card` 18px.
   FRAME: `Affiliate/Home/Become an Affiliate` (APPROVED-SET.tsv:352; originals-510 PNG, read this pass) DRAWS the
   band square and the earn boxes at a small (~6px) radius. The operator was told so on the decision card ("Changing
   them makes the site differ from those designs. Your OK would be the ruling") and approved A — so this is a
   DEVIATION RATIFIED BY THE OPERATOR (ST-61), not an unratified one.
   VALUES, none minted: the band copies its siblings' own `calc(var(--r-card) + 6px)` (marketing.css:414) on the two
   corners WITHOUT a bite; the bitten corners stay 0 (the notch's 10px draws them). Logical corners, so the /ar twin
   gets the mirror the site's RTL band rule draws (marketing-rtl.css `[dir="rtl"] .page .mkt-cta .mkt-ctaband`),
   which the (0,6,0) `border-radius:0` above was beating. The boxes take `var(--r-card)`.
   §9b: `--r-card` is declared by `.tok-iter3`, which is ON this page's root (AffiliateHome.tsx:431), so every
   element here is in scope (the audit read 18px live on `.page`). CAN IT WIN: same selectors as the rules above,
   later in the sheet; no inline style on either element (grep `style={{` AffiliateHome.tsx: no radius).
   Row: queue ST-61 / ST-43 B17-B20 + Finding 1. */
.page.fin.mkt.aff-home .aff-cta .mkt-ctaband {
  border-start-start-radius: calc(var(--r-card) + 6px);
  border-end-end-radius: calc(var(--r-card) + 6px);
  border-start-end-radius: 0;
  border-end-start-radius: 0;
}
.page.aff-home .aff-earn-box { border-radius: var(--r-card); }