/* =============================================================================
   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 ═════════════════════════════════════════════════════════════════
   Copy left, the four-role rail right. No photograph: the three sibling role
   pages open on one, and this page's subject is a list of roles rather than a
   person, so a stock photograph of somebody in an office would be decoration
   standing where the argument goes. */
/* The design closes the hero a step tighter than it opens it (72px against the
   band's own 88), because the three-up value row underneath is already a
   boundary. */
.pro-hero { padding-bottom: var(--sp-18); }

.pro-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--sp-18);
  align-items: start;
}
.pro-hero__grid > * { min-width: 0; }
.pro-hero__rail { padding-top: var(--sp-2); }
.pro-hero__values { margin-top: var(--sp-18); }

/* The four roles, as rows on hairlines rather than cards. A card implies detail
   behind it; at this point in the page there is none, and band 5 is where each
   role gets its paragraph. */
.pro-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.pro-role {
  padding: var(--sp-5) 0;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--da-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--da-sec-ink);
}
.pro-roles > li:last-child { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }
.pro-hero__rail .da-note { margin-top: var(--sp-5); color: var(--da-sec-muted); }

/* ═══ 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-role,
.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-hero__grid { gap: var(--sp-12); }
  .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-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .pro-hero__rail { padding-top: 0; }
  .pro-hero__values { margin-top: var(--sp-12); }
  .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-role { font-size: var(--e-card-title); padding: var(--sp-4) 0; }
  .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; }
}