/* =============================================================================
   For Professionals — Dental Acquisitions
   -----------------------------------------------------------------------------
   Only what is specific to /professionals. The shared vocabulary (.da-sec,
   .da-h1/2/3, .da-body, .da-lede, .da-cols, .da-rows, .da-row--qa, .da-close,
   .da-prose, .da-btn, .da-rule, .da-lockup) lives in marketing/da_system.css and
   is used as-is: this page introduced no new primitives, only the seven blocks
   below that the design actually needs.

   Scoped without a page-root class: marketing_page_stylesheet_tag loads
   marketing/pages/<action>.css, so this file is only ever on /professionals and
   a bare .pro-* selector is page-local by construction.

   Reads var(--da-*) / var(--da-sec-*) only. Colour literals belong in
   colors_and_type.css. Two exceptions, both #FFFFFF, both on ink where white IS
   the role token's own value.

   MOTION. The shared reveal system (marketing/pages.css) does most of it:
   bands and blocks rise in, .da-stagger cascades a row, and the figure's edges
   draw while its nodes land. Two page-local transitions are added here because
   the design implies them and nothing shared covers them: the step rails draw
   left to right, and the Deal Room roster fills a row at a time. Both are
   neutralised under .da-motion--quiet at the bottom of this file. Read the
   MOTION section of docs/marketing-design-system.md before adding a third.
   ============================================================================= */

/* ═══ HERO: THE AFFILIATE PROGRAM (docs/marketing-design-system.md §29) ═══
   Built in /buyers' system, not this file's .da-* one: the hero sits in .lx
   and uses its stage, type roles, buttons and motion gate as they are
   (marketing/landing.css, loaded by marketing/landing/_head). Only what the
   affiliate story adds is here, under .aff-*.

   LOAD ORDER. This file loads BEFORE landing.css (the layout links the page
   sheet, then yields :head), so a rule here that adjusts an .lx-* rule must
   out-specify it, never rely on order: hence `.aff-hero .lx-hero__stage`.

   The bands below keep their own palette (--da-sec-bg), so landing.css's
   white body only shows behind this hero, which is the point: /buyers' white
   page, glass nav and bone stage. */

/* The stage is inset from the window on three sides by the page's white
   (--lx-inset). On /buyers white follows it too; here band 2 is charcoal and
   full-bleed, so the wrapper adds the same inset below, or the stage's lower
   corners would sit straight on the dark band with white wedges in them. */
.aff { padding-bottom: var(--lx-inset); }

/* /buyers keeps each sentence on one line from 768px. This headline's second
   sentence is longer than any of theirs, so it only holds from 1024px; below
   that the words wrap and balance. */
@media (max-width: 1023px) {
  .aff-hero__title > span { white-space: normal; }
}

/* ONE SCREEN, COPY AND CARDS (owner's notes n103 to n105, 2026-10-21). From
   1024x640 the stage is /buyers' height, one screen under the nav (the same
   calc as /buyers' pinned stage). The copy sits near the top and the journey
   takes the bottom (margin-top: auto), so on a 1470x835 laptop the copy and
   all three cards are on the first screen. min-height, so a short window
   grows the stage rather than clipping anything. */
.aff-hero .lx-hero__stage {
  padding-block: clamp(24px, 2.2vw, 36px) clamp(18px, 1.4vw, 22px);
}
@media (min-width: 1024px) and (min-height: 640px) {
  .aff-hero .lx-hero__stage { min-height: calc(100svh - var(--lx-pin-top, 90px) - var(--lx-inset)); }
}
/* More room between the headline, the lede and the CTAs than the first pass
   gave them. .lx-hero.aff-hero, not .aff-hero: landing.css loads after this
   file and its .lx-hero .lx-actions is the same weight. */
.lx-hero.aff-hero .lx-actions { margin-top: clamp(28px, 2.6vw, 40px); }

/* /buyers' lede follows its deck, so the shared rule gives it no top margin.
   Here it follows the headline directly and needs the room back. */
.aff-hero .aff-hero__lede { margin-top: clamp(20px, 2vw, 30px); }

/* The disclosure under the CTAs: the program's conditions, said plainly and
   small, centred with the copy above it, on one line where it fits. */
.aff-hero .aff-hero__note {
  max-width: 62em;
  margin: 16px auto 0;
  font-size: var(--lx-fs-xs);
  line-height: 1.5;
  text-wrap: balance;
}

/* ── The journey (docs/marketing-design-system.md §29) ─────────────────────
   Three white cards at the foot of the stage, the owner's design
   (2026-10-21):
   1 Introduce, 2 Match, 3 Track & earn, then a quiet note and the "Preview
   closing" toggle. Equal columns from 1100px; below that the four milestone
   labels no longer fit a third of the row, so Track & earn spans under the
   first two, and a phone stacks all three.

   STATE: #aff-closing is a checkbox read through :has(), so the preview
   works with no script. .aff-when--open / --closed are its two faces. */
.aff-journey {
  width: min(1180px, 100%);
  margin: auto auto 0;
  padding-top: clamp(18px, 1.6vw, 24px);
  scroll-margin-top: calc(var(--lx-head) + 16px);
  text-align: left;
}
.aff-journey__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Compact on purpose: the tallest card (Track & earn) is ~213px at 1470, the
   room a one-screen stage leaves under the copy. */
.aff-leg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(16px, 1.2vw, 20px) clamp(18px, 1.7vw, 26px);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-card);
  background: var(--lx-card);
  box-shadow: var(--lx-shadow-sm);
}
.aff-leg__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: var(--lx-fs-card-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}
.aff-leg__num { font-size: var(--lx-fs-xs); font-weight: 400; color: var(--lx-ink-3); }

.aff-ico { width: 18px; height: 18px; flex: none; }
.aff-ico--md { width: 20px; height: 20px; }
.aff-ico--lg { width: 20px; height: 20px; }

/* The object: a tinted tile with a white mark, the product's row anatomy. */
.aff-obj {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--lx-r-sm);
  background: var(--lx-surface);
}
.aff-obj__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: calc(var(--lx-r-sm) - 3px);
  background: var(--lx-card);
  color: var(--lx-ink-3);
  font-size: var(--lx-fs-sm);
  font-weight: 500;
}
.aff-obj__mark--da { color: var(--lx-accent); }
.aff-obj__id { display: grid; gap: 2px; min-width: 0; }
.aff-obj__name { font-size: var(--lx-fs-sm); font-weight: 600; line-height: 1.3; color: var(--lx-ink); }
.aff-obj__sub { font-size: var(--lx-fs-sm); line-height: 1.3; color: var(--lx-ink-3); }

.aff-leg__line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--lx-fs-sm);
  line-height: 1.3;
  color: var(--lx-ink-3);
}
.aff-leg__line--broker { color: var(--lx-ink-2); }
.aff-leg__line--broker .aff-ico { color: var(--lx-ink-3); }

.aff-matched {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 11px 16px;
  border-radius: var(--lx-r-sm);
  background: var(--lx-wash);
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  color: var(--lx-accent);
}

/* The milestones: four dots on one line, each label centred under its dot.
   Each item's ::after is the segment to the next dot, a grey track with an
   accent fill whose width is the transition. */
.aff-miles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.aff-miles__item { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.aff-miles__item::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--lx-line-2);
  transition: background-color 400ms ease 300ms, box-shadow 400ms ease 300ms;
}
.aff-miles__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(var(--lx-accent-2), var(--lx-accent-2)) left / var(--fill, 0%) 100% no-repeat, var(--lx-line);
  transition: background-size 600ms var(--lx-ease-out);
}
.aff-miles__item.is-done::after { --fill: 100%; }
.aff-miles__item:is(.is-done, .is-now)::before { background: var(--lx-accent-2); }
.aff-miles__label { font-size: var(--lx-fs-xs); line-height: 1.3; color: var(--lx-ink-2); transition: color 400ms ease 300ms; }
.aff-miles__item.is-now .aff-miles__label { color: var(--lx-ink); }
.aff-miles__item.is-last .aff-miles__label { color: var(--lx-ink-3); }

/* The earning: locked and quiet until the sale closes. Never a number. */
.aff-earn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: auto 0 0;
  padding: 10px 16px;
  border-radius: var(--lx-r-sm);
  background: var(--lx-surface);
  font-size: var(--lx-fs-sm);
  line-height: 1.3;
  transition: background-color 400ms ease 400ms;
}
.aff-earn__label { display: flex; align-items: center; gap: 10px; color: var(--lx-ink-2); }
.aff-earn__label .aff-ico { color: var(--lx-ink-3); }
.aff-earn__state { justify-items: end; margin-left: auto; text-align: right; color: var(--lx-ink-3); }

/* Two faces in one cell, cross-faded. */
.aff-swap { display: inline-grid; }
.aff-swap > * { grid-area: 1 / 1; transition: opacity 300ms ease; }
.aff-when--closed { opacity: 0; }

/* Closing: the last segment fills, the last dot lights, the earning
   qualifies. */
.aff-journey:has(#aff-closing:checked) .aff-miles__item.is-now::after { --fill: 100%; }
.aff-journey:has(#aff-closing:checked) .aff-miles__item.is-last::before {
  background: var(--lx-accent);
  box-shadow: 0 0 0 4px var(--lx-wash);
}
.aff-journey:has(#aff-closing:checked) .aff-miles__item:is(.is-now, .is-last) .aff-miles__label { color: var(--lx-ink); }
.aff-journey:has(#aff-closing:checked) .aff-earn { background: var(--lx-wash); }
.aff-journey:has(#aff-closing:checked) .aff-earn :is(.aff-earn__state, .aff-ico) { color: var(--lx-accent); }
.aff-journey:has(#aff-closing:checked) .aff-when--open { opacity: 0; }
.aff-journey:has(#aff-closing:checked) .aff-when--closed { opacity: 1; }
.aff-journey:has(#aff-closing:checked) .aff-journey__arrow { transform: rotate(180deg); }

.aff-journey__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 12px;
  padding-inline: 4px;
}
.aff-journey__note { margin: 0; font-size: var(--lx-fs-xs); color: var(--lx-ink-3); }
/* Visually hidden but focusable; its label is the visible control. */
.aff-journey__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}
.aff-journey__preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  color: var(--lx-accent);
  cursor: pointer;
}
.aff-journey__preview .aff-swap { justify-items: end; }
.aff-journey__arrow { transition: transform 300ms var(--lx-ease-out), translate 200ms var(--lx-ease-out); }
@media (hover: hover) {
  .aff-journey__preview:hover { color: var(--lx-ink); }
  .aff-journey__preview:hover .aff-journey__arrow { translate: 3px 0; }
}
.aff-journey__toggle:focus-visible + .aff-journey__preview {
  outline: 2px solid var(--lx-accent);
  outline-offset: 4px;
}

/* The motion gate, after landing.css's: the journey arrives with the intro. */
.lx-armed .lx [data-aff-story] { opacity: 0; }
.lx-armed:not(.lx-quiet) .lx [data-aff-story] { transform: translateY(30px); }

/* Below 1100px a third of the row is too narrow for the milestone labels:
   Track & earn spans under the first two. */
@media (max-width: 1099px) {
  .aff-journey__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aff-leg--track { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .aff-journey__cards { grid-template-columns: minmax(0, 1fr); }
  .aff-journey__foot { justify-content: center; text-align: center; }
}

/* ═══ A TWO-SENTENCE HEADING ═══════════════════════════════════════════════
   Every H2 on this page is two sentences, the second in the accent. They FLOW
   as one paragraph rather than taking a <br> each, because the second sentence
   is the turn in the first one's argument and a hard break sets them up as two
   separate claims. The measure is what controls the wrap. */
.pro-h2 { max-width: 22em; }

/* ═══ THE OPEN-ROLE FIGURE ═════════════════════════════════════════════════
   Two geometries, swapped at 899. An SVG's labels scale with its rendered
   width, so the design's 1080-unit landscape figure puts its 13px labels at
   3.6px on a 299px phone canvas. The 420-unit stacked variant renders the same
   labels at 9.3px, which clears the 6.5px the home page's shipped figures
   manage at that width. Measured, both of them. */
.pro-graph { margin: var(--sp-16) 0 0; }
.pro-graph .da-dgm-caption { max-width: 48em; margin-inline: auto; }
.pro-graph__stacked { display: none; }
.pro-graph__stacked .da-dgm { max-width: 420px; margin-inline: auto; }

/* ═══ A ROW WITH A STATEMENT AND A NOTE ════════════════════════════════════
   .da-row gives the LABEL | body | tag grid; these rows need two things in the
   body, a claim and its explanation, so the body becomes a two-line stack. */
/* A tighter label column than .da-row's 15em default: these labels are one or
   two words ("Broker", "How you get in"), where the default is sized for the
   longer terms on the broker and seller pages. */
.pro-row { --da-row-label: 13em; }
.pro-row__statement,
.pro-row__note { display: block; }
.pro-row__statement {
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--da-sec-ink);
}
.pro-row__note { margin-top: var(--sp-3); color: var(--da-sec-body); }

/* ═══ THE CLOSING ROW OF A BAND ════════════════════════════════════════════
   .da-close plus the hairline and the air that separate it from the band above.
   Six bands end on one, which is what gives the page its rhythm: each band
   states its claim and then hands off to the next. */
.pro-close {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.pro-close .da-body { margin-top: var(--sp-4); }
.pro-close .da-h3 { max-width: 20em; }

/* An eyebrow standing alone as the head of a row set. It needs the air a band's
   own opening block gets, because the figure above it ends on a caption and the
   two would otherwise read as one paragraph. */
.pro-head { margin-top: var(--sp-16); }
.pro-head + .da-rows { margin-top: var(--sp-6); }
/* Same gap where a row set follows the split rather than an eyebrow. */
.pro-split + .da-rows { margin-top: var(--sp-16); }

/* A statement block between the rows and the closing row. */
.pro-note { margin-top: var(--sp-16); }
.pro-note .da-h3 { margin-top: var(--sp-3); max-width: 24em; }
.pro-profile { margin-top: var(--sp-18); }

/* ═══ FOUR STEPS ═══════════════════════════════════════════════════════════
   01 to 04, each with an amber rail running out of the numeral. The rail is a
   1px bar rather than a border on the item, so it can draw itself on reveal. */
.pro-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-10);
  row-gap: 0;
  margin: var(--sp-16) 0 0;
  padding: 0;
}
.pro-step { min-width: 0; }
.pro-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.pro-step__num {
  flex: 0 0 auto;
  font-family: var(--font-brand);
  font-size: var(--da-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--da-sec-accent);
}
.pro-step__rail {
  flex: 1 1 auto;
  height: 1px;
  background: var(--da-amber);
}
.pro-step__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--da-sec-ink);
}
.pro-step__body {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

/* ═══ THE DEAL ROOM ROSTER ═════════════════════════════════════════════════
   A ROSTER, NOT A PRODUCT SCREENSHOT, and that is what decides its colour.
   /brokers' .brk-mock replicas sit on their own white card because they show a
   light product surface. This shows WHO is in a room: it is a figure, so it
   repaints with the band. Same call the home page's stage schematics make; see
   section 23.6 of docs/marketing-design-system.md. */
.pro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-18);
  align-items: start;
}
.pro-split > * { min-width: 0; }
.pro-split .da-body + .da-body { margin-top: var(--sp-4); }

.pro-mock {
  margin: 0;
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-family: var(--font-brand);
}
.pro-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--da-sec-ink) 6%, transparent);
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
}
.pro-mock__title {
  font-size: var(--e-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--da-sec-ink);
}
/* The one true fill on this page. A status pill is the one place a tint reads
   as a state rather than as decoration. */
.pro-mock__pill {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--da-teal);
  color: var(--da-charcoal);
  font-size: var(--e-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pro-mock__list { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.pro-mock__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}
.pro-mock__row + .pro-mock__row {
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--da-sec-ink) 8%, transparent);
}
.pro-mock__who {
  font-size: var(--e-body-sm);
  font-weight: var(--fw-medium);
  color: var(--da-sec-ink);
}
.pro-mock__state {
  font-size: var(--e-meta);
  color: var(--da-sec-muted);
  white-space: nowrap;
}
/* The reader's own row. A tint, which is the selected state this codebase
   allows, never a grey. */
.pro-mock__row.is-you {
  background: color-mix(in srgb, var(--da-teal) 10%, transparent);
}
.pro-mock__row.is-you .pro-mock__who {
  font-weight: var(--fw-semibold);
  color: var(--da-teal);
}
.pro-mock__row.is-you .pro-mock__state { color: var(--da-teal); }
/* The open role is quieter than the filled ones, because that is the point of
   it: the seat is empty. */
.pro-mock__row.is-open .pro-mock__who {
  font-weight: var(--fw-regular);
  color: var(--da-sec-muted);
}
.pro-mock__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-size: var(--e-meta);
  color: var(--da-sec-muted);
}

/* ═══ THE FOUR ROLES, 2x2 ══════════════════════════════════════════════════
   Interior hairlines rather than four bordered cards: these are four parts of
   one list, and four boxes would read as four products. The rules run between
   the cells, never around the block. */
.pro-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-16);
}
.pro-quad__cell {
  min-width: 0;
  padding: var(--sp-8) var(--sp-10) var(--sp-8) 0;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.pro-quad__cell:nth-child(2n) {
  padding-right: 0;
  padding-left: var(--sp-10);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}
.pro-quad__cell:nth-last-child(-n+2) {
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
}
.pro-quad__role {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-brand);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.pro-quad__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--da-sec-ink);
}
.pro-quad__body {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

/* ═══ THE APPLY BAND ═══════════════════════════════════════════════════════ */
.pro-apply { margin-top: var(--sp-18); }
.pro-apply .da-eyebrow { margin-top: var(--sp-6); }
.pro-apply .da-h3 { max-width: 22em; }
.pro-apply .da-body { margin-top: var(--sp-5); }
.pro-apply .da-note { margin-top: var(--sp-5); color: var(--da-sec-muted); max-width: 46em; }

/* ═══ WHAT STAYS YOURS ═════════════════════════════════════════════════════
   The Q&A row grid, with a narrower label column: these labels are two words,
   where a question is a sentence. */
.pro-yours { margin-top: var(--sp-16); }
.pro-yours__row { --da-row-label: 14em; grid-template-columns: 14em 1fr; }

/* The four limits. Each one is "Doesn't <x>", with the lead word carrying the
   emphasis so the four scan as one refrain. */
.pro-limits-block { margin-top: var(--sp-18); }
.pro-limits-block .da-h3 { margin-top: var(--sp-3); max-width: 24em; }
.pro-limits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-10) 0 0;
  padding: 0;
}
.pro-limit {
  min-width: 0;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--da-sec-accent);
  font-family: var(--font-brand);
}
.pro-limit__lead {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.pro-limit__body {
  display: block;
  font-size: var(--e-body-sm);
  line-height: 1.5;
  color: var(--da-sec-ink);
}

/* The answer's first clause carries the verdict, so it takes the weight and the
   ink while the qualification stays body colour. */
.pro-answer__lead {
  font-weight: var(--fw-semibold);
  color: var(--da-sec-ink);
}

/* ═══ CLOSING ══════════════════════════════════════════════════════════════ */
.pro-cta .da-body { margin-top: var(--sp-6); max-width: 44em; }
.pro-cta__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.pro-cta__foot .da-lockup { margin: 0; }
.pro-cta__tagline {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--da-sec-accent);
}

/* ═══ MOTION, page-local ═══════════════════════════════════════════════════
   Two transitions the shared system does not cover. Both are keyed to .is-in,
   which site.js adds to the observed element, and both are written for either
   shape the observer can produce: the element carrying data-reveal itself, or
   an ancestor block that site.js split out of a tall band. */

/* The step rails draw out of their numerals, left to right. scaleX on a 1px bar,
   which is the same move .da-rule makes and does not reflow. Each rail waits for
   its own cell's stagger delay so the four draw in sequence rather than at once. */
.da-motion .pro-steps[data-reveal] .pro-step__rail {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms);
}
.da-motion .pro-steps[data-reveal].is-in .pro-step__rail { transform: none; }

/* The roster fills a row at a time, in seating order. Deliberately slower per
   row than a .da-stagger cascade (90ms against 70): this is a list being read,
   not a row of cards landing.

   🚨 BOTH SELECTOR SHAPES, and this is not belt-and-braces. site.js decides AT
   RUNTIME whether a revealed element is tall enough to split: if it is, the
   element is marked .da-reveal-split (which means "stop hiding yourself"), it
   never receives .is-in, and its CHILDREN become the observed .da-reveal-items
   instead. This figure is one of the ones it splits, so the <ul> is what gets
   .is-in and the <figure> never does.

   The first version of this rule hid the rows via `.pro-mock .pro-mock__row`
   and revealed them via `.pro-mock.is-in`, which meant six rows sat at opacity
   0 permanently: an empty panel with a header and a caption. The shared rules
   for diagram edges and nodes carry this same pair for the same reason. Copy
   the pair, never just the half you happened to observe working. */
.da-motion .da-reveal-item .pro-mock__row,
.da-motion [data-reveal]:not(.da-reveal-split) .pro-mock__row {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-reveal) var(--ease-reveal) var(--row-delay, 0ms),
              transform var(--dur-reveal) var(--ease-reveal) var(--row-delay, 0ms);
}
.da-motion .da-reveal-item.is-in .pro-mock__row,
.da-motion [data-reveal].is-in .pro-mock__row { opacity: 1; transform: none; }
.pro-mock__row:nth-child(1) { --row-delay:   0ms; }
.pro-mock__row:nth-child(2) { --row-delay:  90ms; }
.pro-mock__row:nth-child(3) { --row-delay: 180ms; }
.pro-mock__row:nth-child(4) { --row-delay: 270ms; }
.pro-mock__row:nth-child(5) { --row-delay: 360ms; }
.pro-mock__row:nth-child(6) { --row-delay: 450ms; }

/* Hover is a BORDER STEP, never a fill: these rows sit on two different
   surfaces across the page and no single fill value works on both. */
.pro-quad__cell { transition: border-color var(--dur-hover-out) linear; }

/* Reduce Motion gets the state change without the travel. The two rules above
   are page-local, so the shared .da-motion--quiet block cannot know about them;
   !important is needed for the same reason it is there, to beat site.css's
   global `transition-duration: 0.01ms !important` reset. */
.da-motion--quiet .pro-step__rail,
.da-motion--quiet .pro-mock__row {
  transform: none !important;
  transition: opacity 360ms linear var(--row-delay, 0ms) !important;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   The shared breakpoints (1099 / 899 / 639), so a band and its contents change
   together. */
@media (max-width: 1099px) {
  .pro-split { gap: var(--sp-12); }
  .pro-steps { column-gap: var(--sp-8); }
  .pro-quad__cell { padding-right: var(--sp-8); }
  .pro-quad__cell:nth-child(2n) { padding-left: var(--sp-8); }
  /* Four "Doesn't…" tiles at this width give each about 230px, which breaks
     "choose the professional for the client." onto five lines. */
  .pro-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
}

@media (max-width: 899px) {
  .pro-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .pro-mock { max-width: 560px; }

  /* The landscape figure stops being readable here, not at 639: at 899 it is
     already down to a 0.6 scale. */
  .pro-graph__wide { display: none; }
  .pro-graph__stacked { display: block; }

  /* The steps stack, and the vertical gap becomes a hairline so the grouping
     still reads. Same move .da-cols makes at this width. */
  .pro-steps { grid-template-columns: minmax(0, 1fr); }
  .pro-steps > li + li {
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
    border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }

  /* One column: the interior vertical rule has nothing left to separate, and the
     third cell's bottom rule would sit directly on the fourth cell's top rule and
     render as a 2px line.

     Both resets have to carry the SAME selector as the rule they undo. A bare
     `.pro-quad__cell { border-left: 0 }` loses to `.pro-quad__cell:nth-child(2n)`
     on specificity, which is what left a stray vertical hairline down the left
     edge of the CPAs and Real estate cells; `:last-child` then wins over
     `:nth-last-child(-n+2)` on source order and keeps the closing rule. */
  .pro-quad { grid-template-columns: minmax(0, 1fr); }
  .pro-quad__cell { padding: var(--sp-6) 0; }
  .pro-quad__cell:nth-child(2n) { padding-left: 0; border-left: 0; }
  .pro-quad__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .pro-quad__cell:last-child { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }

  .pro-yours__row { grid-template-columns: minmax(0, 1fr); }
  .pro-cta__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

@media (max-width: 639px) {
  .pro-limits { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .pro-close { margin-top: var(--sp-12); padding-top: var(--sp-8); }
  .pro-note, .pro-profile, .pro-apply, .pro-limits-block { margin-top: var(--sp-12); }
  .pro-mock__row { padding: var(--sp-3) var(--sp-4); }
  .pro-mock__state { white-space: normal; text-align: right; }
}