/* ============================================================
   page/affiliate.css — page-scoped styles for affiliate.html

   COMPOSE, DON'T FORK (see components/COMPONENTS.md):
   Shared chrome comes from components/styles.css + home/home-flagship.css
   + components/logo-marquee.css and is NOT redefined here:
     .nav .nav__* .btn .btn--ghost .btn--dark .btn--lg .wrap .section
     .section--tight .kicker .sec-head .footer .footer__* .logo-marquee
     .reveal
   Everything unique to this page is namespaced `aff-` so it can never
   collide with a shared component (the site already ships .steps, .plan,
   .pill and .spec elsewhere).

   Loads LAST, so it wins where it overlaps.
   ============================================================ */

/* ---------- page-local tokens (mirror the mockup's scale) ---------- */
.aff-page {
  --aff-surface-2: #fafafa;
  --aff-muted: #9a9a9a;
  --aff-muted-2: #b9b9b9;
  --aff-pink: #ed3d7f;
  --aff-r-card: 12px;
  --aff-r-frame: 18px;
  --aff-sh-card: 0 1px 2px rgba(11, 11, 11, .04);
  --aff-sh-lift: 0 23px 50px rgba(0, 0, 0, .10);
  --aff-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* tinted band — .section--tint does not exist in the shared sheet */
.aff-page .aff-tint {
  background: var(--aff-surface-2);
  border-block: 1px solid var(--line);
}

/* visually-hidden (not defined in the shared sheet) */
.aff-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- hero ---------- */
.aff-hero {
  padding-top: clamp(44px, 5.4vw, 78px);
  padding-bottom: clamp(30px, 3.6vw, 52px);
  text-align: center;
}
.aff-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  background: var(--white);
  box-shadow: var(--aff-sh-card);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}
.aff-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad);
  display: block;
}
.aff-hero h1 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 51px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.aff-hero__sub {
  margin: 20px auto 0;
  color: var(--text);
  font-size: clamp(16px, 1.4vw, 17.5px);
  line-height: 1.62;
  max-width: 64ch;
}
.aff-hero__btns {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.aff-hero__fine {
  margin-top: 18px;
  color: var(--aff-muted);
  font-size: 14px;
}

/* ---------- logos band caption (.logos-band lives in home-spotlight.css,
     which this page does not load — so the caption is defined here) ---------- */
.aff-logos {
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding-block: clamp(20px, 3vw, 32px) clamp(24px, 3.4vw, 38px);
}
.aff-logos__cap {
  margin: 0 0 clamp(10px, 1.5vw, 16px);
  font-size: 14px;
  color: var(--aff-muted);
}
.aff-logos__cap strong { color: var(--primary); font-weight: 700; }
.aff-logos .logo-marquee { max-width: 1080px; margin-inline: auto; }

/* ---------- value row ----------
   Deliberately NOT a card grid. The page already runs three of them (plans,
   comparison, steps) and R-13 rules out repeating identical card grids down a
   page — this band stays an editorial rule-list, which is also the spacious
   beat R-19 asks for before the dense pricing table.
   What it gains over a bare hairline: a short black marker sitting on the rule
   so each item has an anchor instead of reading as a fragment of one long
   table edge, and an auto-fit track so the four items reflow at whatever width
   the text actually needs rather than snapping 4 -> 2 -> 1 at three fixed
   breakpoints. */
.aff-vals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(26px, 3vw, 38px) clamp(24px, 2.6vw, 40px);
}
.aff-val {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.aff-val::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--primary);
}
.aff-val h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.3;
  margin: 0 0 8px;
  text-wrap: balance;
}
.aff-val p {
  color: var(--text);
  font-size: 14.75px;
  line-height: 1.62;
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}

/* ---------- plans ---------- */
.aff-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.aff-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--aff-r-frame);
  padding: 30px 21px 26px;
  box-shadow: var(--aff-sh-card);
}
.aff-plan__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
.aff-plan__blurb {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 63px;
}
.aff-plan__price {
  margin: 18px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aff-plan__fig {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.aff-plan__unit { color: var(--aff-muted); font-size: 13.5px; }
.aff-plan__specs { margin: 0; padding: 16px 0 20px; display: flex; flex-direction: column; }
.aff-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}
.aff-spec dt { color: var(--text); font-size: 13px; line-height: 1.35; min-width: 0; }
.aff-spec dd {
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.btn--block { width: 100%; margin-top: auto; }
.aff-footnote {
  margin-top: 22px;
  color: var(--aff-muted);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 86ch;
}

/* ---------- comparison ---------- */
.aff-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aff-cmp__col {
  border: 1px solid var(--line);
  border-radius: var(--aff-r-frame);
  padding: 26px 24px 28px;
  background: var(--white);
  box-shadow: var(--aff-sh-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aff-cmp__col--ours { border-color: rgba(11, 11, 11, .9); box-shadow: var(--aff-sh-lift); }
.aff-cmp__col h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
}
.aff-cmp__col p { color: var(--text); font-size: 15px; line-height: 1.58; margin: 0; }
.aff-cmp__catch {
  color: var(--primary) !important;
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.aff-cmp__col--ours .aff-cmp__catch { border-top-color: rgba(11, 11, 11, .12); }

/* ---------- steps ----------
   A connected sequence, not a fourth card grid. "Four steps" is an ordered
   process and the card treatment said nothing about order — four identical
   bordered boxes read as four parallel features, and stacked a third
   card-grid rhythm onto a page that already has two (R-13, R-19).
   The connector is drawn per item (number's right edge -> across the column
   gap) rather than as one line behind the row, so it never has to be trimmed
   at the ends and it disappears cleanly wherever the grid wraps.
   --aff-n: the number disc's size; the connector's vertical centre and the
   mobile rail's left offset are both derived from it, so one value moves the
   whole treatment. */
.aff-steps {
  --aff-n: 34px;
  --aff-steps-gap: clamp(20px, 2.4vw, 34px);
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--aff-steps-gap);
  row-gap: clamp(28px, 3.4vw, 42px);
}
.aff-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* connector into the next step */
.aff-step::after {
  content: "";
  position: absolute;
  top: calc(var(--aff-n) / 2);
  left: calc(var(--aff-n) + 10px);
  right: calc(-1 * var(--aff-steps-gap));
  height: 1px;
  background: var(--line);
}
.aff-step:last-child::after { content: none; }
.aff-step__n {
  width: var(--aff-n);
  height: var(--aff-n);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.aff-step h3 {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.28;
  margin: 0;
  text-wrap: balance;
}
.aff-step p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.58;
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.aff-amplify {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--aff-r-card);
  padding: 18px 22px;
  color: var(--text);
  font-size: 15.5px;
  background-image: linear-gradient(var(--white), var(--white)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.aff-amplify b { color: var(--primary); font-weight: 600; }

/* ---------- feature matrix ---------- */
/* Segmented plan switch — the same control as the pricing page's
   .matrix-toggle (page/pricing.css), reproduced here under `aff-` names
   because page/pricing.css is not loaded on this page. Four segments instead
   of three, so the thumb steps in 25% increments. Hidden above 900px, where
   all four plans read fine side by side. */
.aff-matrix { position: relative; }
.aff-matrix__toggle {
  display: none;
  position: relative;
  width: 100%;
  background: var(--aff-surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  padding: 4px;
  margin: 0 0 16px;
}
.aff-matrix__tab {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  padding: 10px 4px;
  border-radius: var(--r-pill, 999px);
  color: var(--text);
  transition: color .25s ease;
}
.aff-matrix__tab.is-active { color: var(--white); }
.aff-matrix__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.aff-matrix__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(25% - 2px);
  height: calc(100% - 8px);
  background: var(--primary);
  border-radius: var(--r-pill, 999px);
  transition: transform .3s cubic-bezier(.65, 0, .35, 1);
}
.aff-matrix__toggle[data-active-plan="growth"] .aff-matrix__thumb { transform: translateX(100%); }
.aff-matrix__toggle[data-active-plan="scale"] .aff-matrix__thumb { transform: translateX(200%); }
.aff-matrix__toggle[data-active-plan="enterprise"] .aff-matrix__thumb { transform: translateX(300%); }

.aff-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--aff-r-frame);
  background: var(--white);
  box-shadow: var(--aff-sh-card);
}
.aff-tablewrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
  font-size: 14px;
}
.aff-col--feature { width: 32%; }
.aff-tablewrap colgroup col:not(.aff-col--feature) { width: 17%; }
.aff-tablewrap thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
  text-align: left;
  vertical-align: bottom;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.aff-tablewrap thead th:first-child {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aff-muted);
  width: 32%;
}
.aff-tablewrap tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  color: var(--primary);
  padding: 12px 16px;
  border-bottom: 1px solid #f4f4f4;
  vertical-align: top;
}
.aff-tablewrap td {
  padding: 12px 16px;
  border-bottom: 1px solid #f4f4f4;
  color: var(--text);
  vertical-align: top;
}
.aff-tablewrap .aff-band th {
  padding: 14px 16px 12px;
  background: #fbfbfb;
  border-block: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--primary);
  box-shadow: inset 3px 0 0 var(--aff-pink);
}
.aff-tick { color: var(--primary); display: inline-flex; }
.aff-tick svg { display: block; }
.aff-no { color: var(--aff-muted-2); }
.aff-tablewrap tbody tr:last-child th,
.aff-tablewrap tbody tr:last-child td { border-bottom: 0; }

/* scroll affordance — only shown while the table can actually scroll, and
   only above 900px, since below that the plan switch replaces the scroll
   entirely (see the breakpoint further down).
   The [hidden] rule must be stated explicitly: the breakpoint below sets
   display:block, and an author declaration outranks the UA's
   [hidden]{display:none}, so affiliate.js toggling .hidden would otherwise
   have no visible effect. */
.aff-scrollhint {
  display: none;
  margin-top: 10px;
  color: var(--aff-muted);
  font-size: 13px;
}
.aff-scrollhint[hidden] { display: none !important; }

/* ---------- faq ----------
   Accordion, same mechanics as faq.html's .faq-item (page/faq.css): a real
   <button> with aria-expanded, .is-open on the item, plus-to-minus icon, and
   the grid-template-rows 0fr -> 1fr height animation so no JS measurement is
   needed. Copied, not forked — page/faq.css is not loaded on this page. */
.aff-faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 48px); }
.aff-faq-col { border-top: 1px solid var(--line); }
.aff-faq { border-bottom: 1px solid var(--line); }
.aff-faq__q { margin: 0; font-weight: normal; }
.aff-faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 19px 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--primary);
}
.aff-faq__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.aff-faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
.aff-faq__icon::before,
.aff-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--primary);
  transform: translate(-50%, -50%);
  transition: transform .3s ease, opacity .3s ease;
}
.aff-faq__icon::before { width: 100%; height: 1.6px; }
.aff-faq__icon::after { width: 1.6px; height: 100%; }
.aff-faq.is-open .aff-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.aff-faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.aff-faq__panel > div { overflow: hidden; }
.aff-faq.is-open .aff-faq__panel { grid-template-rows: 1fr; }
.aff-faq__a { color: var(--text); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; max-width: 56ch; }

/* ---------- closing panel ---------- */
.aff-close {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--aff-r-frame);
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 32px);
  text-align: center;
}
.aff-close h2 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(25px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
}
.aff-close p {
  margin: 16px auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  max-width: 60ch;
}
.aff-close__btns {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.aff-close .btn--dark { background: var(--white); color: var(--primary); }
.aff-close .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .3); }
.aff-close .btn--ghost:hover { border-color: rgba(255, 255, 255, .7); }
.aff-close__fine { margin-top: 20px; color: rgba(255, 255, 255, .5); font-size: 13.5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* NOTE: the 901–1080px nav-spacing fix for the 6-item nav now lives in the
   shared home/home-flagship.css, because every page carries the Affiliate
   item — it is no longer page-specific. Do not re-add it here. */

/* The matrix only ever scrolls sideways in one narrow band: 901–1040px, where
   the plan switch has not taken over yet but the wrap is already narrower than
   the table's 920px minimum. Scoped exactly there so the sticky column's
   separator hairline never shows up on a desktop table that fits. The hint
   lives in the same band; affiliate.js hides it again once the table fits or
   the reader has scrolled to the end. */
@media (min-width: 901px) and (max-width: 1040px) {
  .aff-scrollhint { display: block; }

  /* keep the feature name visible while the matrix scrolls sideways */
  .aff-tablewrap thead th:first-child,
  .aff-tablewrap tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 1;
    box-shadow: 1px 0 0 var(--line);
  }
  .aff-tablewrap thead th:first-child { z-index: 3; }
  .aff-tablewrap .aff-band th { position: static; }
}

@media (max-width: 1000px) {
  .aff-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aff-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the connector would point off the right edge of every second item once
     the grid wraps to two columns */
  .aff-steps .aff-step:nth-child(2n)::after { content: none; }
}

/* ---- Matrix: plan switch takes over (<=900px) ----
   Five columns cannot read on a phone: the sticky feature column eats most of
   the viewport and the visible sliver of Starter gives no cue that Growth,
   Scale and Enterprise exist off-screen. Below 900px the table renders
   Feature + the active plan only, at full width, with no scrolling in either
   direction. Column order is fixed by the markup — 1 = feature, 2 = Starter,
   3 = Growth, 4 = Scale, 5 = Enterprise — so nth-child maps straight to a
   plan. Both the cells AND their <col> need hiding: a hidden column's
   declared width still reserves space under table-layout, leaving a dead gap
   where the other plans used to sit. */
@media (max-width: 900px) {
  .aff-matrix__toggle { display: flex; }
  .aff-tablewrap { overflow-x: visible; }
  .aff-tablewrap table { min-width: 0; }
  .aff-col--feature { width: 56%; }
  .aff-tablewrap colgroup col:not(.aff-col--feature) { width: 44%; }
  .aff-tablewrap thead th { position: static; }

  .aff-matrix[data-active-plan="starter"] col:nth-child(3),
  .aff-matrix[data-active-plan="starter"] tr > *:nth-child(3),
  .aff-matrix[data-active-plan="starter"] col:nth-child(4),
  .aff-matrix[data-active-plan="starter"] tr > *:nth-child(4),
  .aff-matrix[data-active-plan="starter"] col:nth-child(5),
  .aff-matrix[data-active-plan="starter"] tr > *:nth-child(5),

  .aff-matrix[data-active-plan="growth"] col:nth-child(2),
  .aff-matrix[data-active-plan="growth"] tr > *:nth-child(2),
  .aff-matrix[data-active-plan="growth"] col:nth-child(4),
  .aff-matrix[data-active-plan="growth"] tr > *:nth-child(4),
  .aff-matrix[data-active-plan="growth"] col:nth-child(5),
  .aff-matrix[data-active-plan="growth"] tr > *:nth-child(5),

  .aff-matrix[data-active-plan="scale"] col:nth-child(2),
  .aff-matrix[data-active-plan="scale"] tr > *:nth-child(2),
  .aff-matrix[data-active-plan="scale"] col:nth-child(3),
  .aff-matrix[data-active-plan="scale"] tr > *:nth-child(3),
  .aff-matrix[data-active-plan="scale"] col:nth-child(5),
  .aff-matrix[data-active-plan="scale"] tr > *:nth-child(5),

  .aff-matrix[data-active-plan="enterprise"] col:nth-child(2),
  .aff-matrix[data-active-plan="enterprise"] tr > *:nth-child(2),
  .aff-matrix[data-active-plan="enterprise"] col:nth-child(3),
  .aff-matrix[data-active-plan="enterprise"] tr > *:nth-child(3),
  .aff-matrix[data-active-plan="enterprise"] col:nth-child(4),
  .aff-matrix[data-active-plan="enterprise"] tr > *:nth-child(4) { display: none; }
  /* The band rows are a single colspan=5 <th>, so they are never an
     nth-child(2..5) match and keep spanning whatever columns remain. */
}

@media (max-width: 860px) {
  .aff-cmp { grid-template-columns: 1fr; }
  .aff-faqs { grid-template-columns: 1fr; }
  .aff-faq-col + .aff-faq-col { border-top: 0; }
}

@media (max-width: 760px) {
  .aff-brk { display: none; }
  .aff-tablewrap table { font-size: 13.5px; }
  .aff-tablewrap td,
  .aff-tablewrap tbody th[scope="row"] { padding: 11px 13px; }
}

@media (max-width: 620px) {
  .aff-plans,
  .aff-vals { grid-template-columns: 1fr; }
  .aff-plan { padding: 26px 18px 22px; }
  .aff-plan__blurb { min-height: 0; }
  .aff-hero__btns .btn,
  .aff-close__btns .btn { width: 100%; }
  .aff-amplify { padding: 16px 18px; font-size: 15px; }
  .aff-matrix__tab { font-size: 12px; padding: 10px 2px; }

  /* Steps become a vertical timeline rather than four stacked blocks: the
     number moves beside the copy and the connector runs down the rail
     through it, so the sequence still reads on a phone. */
  .aff-steps {
    grid-template-columns: 1fr;
    row-gap: clamp(22px, 5vw, 30px);
  }
  .aff-step {
    display: grid;
    grid-template-columns: var(--aff-n) 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
  }
  .aff-step__n { grid-column: 1; grid-row: 1 / span 2; }
  .aff-step h3 { grid-column: 2; grid-row: 1; align-self: center; min-height: var(--aff-n); display: flex; align-items: center; }
  .aff-step p  { grid-column: 2; grid-row: 2; max-width: none; }
  .aff-steps .aff-step::after,
  .aff-steps .aff-step:nth-child(2n)::after { content: ""; }
  .aff-steps .aff-step:last-child::after { content: none; }
  .aff-step::after {
    top: calc(var(--aff-n) + 8px);
    bottom: calc(-1 * clamp(22px, 5vw, 30px) - 8px);
    left: calc(var(--aff-n) / 2);
    right: auto;
    width: 1px;
    height: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 380px) {
  .aff-spec { flex-direction: column; align-items: flex-start; gap: 2px; }
  .aff-spec dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .aff-page *,
  .aff-page *::before,
  .aff-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}