/* =============================================================================
   THE DENTAL ACQUISITIONS PAGE SYSTEM
   -----------------------------------------------------------------------------
   Extracted from marketing/pages.css on 2026-09-04, unchanged.

   WHY IT IS ITS OWN FILE ----------------------------------------------------
   /explore needed this vocabulary. Its hero and its "get matched" band are now
   .da-sec bands like every marketing page, but the explore layout does not load
   pages.css and must not start: pages.css also carries ~600 lines of pre-v2
   legacy blocks (.feat-row, .artifact, .val-card, .trust, .chip, .comp) whose
   names would land in the same cascade as explore.css's own 94KB. A stylesheet
   is the only scope a page system has, so splitting the file IS the scoping.

   Loaded by:
     layouts/marketing.html.erb    the four marketing pages plus the role pages
     layouts/onboarding.html.erb   which also loads pages.css
     layouts/explore.html.erb      chrome only, no legacy blocks

   Link it BEFORE pages.css wherever both are loaded: pages.css's legacy block
   is written to lose to this one, and source order is what settles equal
   specificity.

   Everything below this banner is the original block, comments included. Read
   docs/marketing-design-system.md section 10 for the design rules.
   ============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════
   DENTAL ACQUISITIONS PAGE SYSTEM
   ---------------------------------------------------------------------------
   The shared vocabulary for the rebranded marketing pages. Built for the broker
   page (design_handoff/brokers-drive-download-.../NEW Section 1..7.png) and
   deliberately generic, because the buyer, seller and home passes reuse it.

   Lives in pages.css, which ONLY the marketing layout loads. Putting it in
   site.css would also reach the explore layout, which has no new design yet.

   Reads var(--da-*) only. Colour literals belong in colors_and_type.css.
   See docs/marketing-design-system.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Anchored bands ────────────────────────────────────────────────────────
   --sp-4 of air under the nav, so an anchored band's eyebrow clears the sticky
   nav rather than landing underneath it. Fixes EVERY route into an anchor at
   once: a click, a pasted URL, a reload on a hash, the back button, and any
   scrollIntoView from script.

   Moved here from pages.css's IN-PAGE NAVIGATION block on 2026-09-04. It is a
   property of the band, not of the motion system, and /explore loads this file
   without pages.css. The `scroll-behavior: smooth` half stayed behind, because
   that one is gated on .da-motion. */
.da-sec[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }

/* ── Bands ─────────────────────────────────────────────────────────────────
   A page is a stack of full-bleed bands. --da-sec-* are the per-band role
   tokens every child reads, so one modifier class repaints a whole section and
   no child needs to know whether it is on bone or ink. */
.da-sec {
  --da-sec-bg:        var(--da-bone);
  --da-sec-ink:       var(--da-charcoal);
  /* Body copy is CHARCOAL, not slate. Measured off NEW Section 1.png: the darkest
     pixel of the body paragraph matches the darkest pixel of the H1, so the design
     sets body and heading in the same ink. Slate reads visibly washed out beside
     it. Slate keeps the genuinely tertiary jobs via --da-sec-muted. */
  --da-sec-body:      var(--da-charcoal);
  --da-sec-muted:     var(--da-slate);
  --da-sec-accent:    var(--da-deep-teal);
  --da-sec-hairline:  color-mix(in srgb, var(--da-charcoal) 14%, transparent);
  --dgm-node-fill:    transparent;
  --dgm-line:         color-mix(in srgb, var(--da-charcoal) 30%, transparent);
  --dgm-text:         var(--da-charcoal);
  --dgm-known:        color-mix(in srgb, var(--da-charcoal) 40%, transparent);
  --dgm-mesh-line:    color-mix(in srgb, var(--da-deep-teal) 35%, transparent);
  --dgm-mesh-dot:     var(--da-deep-teal);
  /* Buyer-page figures: the criteria rails, the flow curves, a zone heading, the
     three dot tones of a market cloud, and the deal room's halo. */
  --dgm-rail:         color-mix(in srgb, var(--da-charcoal) 30%, transparent);
  --dgm-flow:         color-mix(in srgb, var(--da-deep-teal) 40%, transparent);
  --dgm-zone-text:    var(--da-slate);
  --dgm-dot-dim:      color-mix(in srgb, var(--da-charcoal) 26%, transparent);
  --dgm-dot-bright:   var(--da-charcoal);
  --dgm-dot-ink:      var(--da-charcoal);
  --dgm-halo:         color-mix(in srgb, var(--da-deep-teal) 22%, transparent);

  background: var(--da-sec-bg);
  color: var(--da-sec-body);
  /* --sp-22 (88px), not --sp-26 (104). The taller value was a guess, and it
     pushed the hero plus its value band past a 747px laptop viewport. */
  padding: var(--sp-22) 0;
}
/* The ink band. Accent flips from deep teal to bright teal: deep teal on
   near-black is 1.6:1 and unreadable, bright teal is 8.4:1. */
.da-sec--ink {
  --da-sec-bg:        var(--da-charcoal);
  --da-sec-ink:       #FFFFFF;
  --da-sec-body:      color-mix(in srgb, #FFFFFF 82%, transparent);
  --da-sec-muted:     color-mix(in srgb, #FFFFFF 62%, transparent);
  --da-sec-accent:    var(--da-teal);
  --da-sec-hairline:  color-mix(in srgb, #FFFFFF 16%, transparent);
  --dgm-line:         color-mix(in srgb, #FFFFFF 38%, transparent);
  --dgm-text:         #FFFFFF;
  --dgm-known:        color-mix(in srgb, #FFFFFF 55%, transparent);
  --dgm-rail:         color-mix(in srgb, #FFFFFF 45%, transparent);
  --dgm-flow:         color-mix(in srgb, var(--da-teal) 55%, transparent);
  --dgm-zone-text:    color-mix(in srgb, #FFFFFF 82%, transparent);
  --dgm-dot-dim:      color-mix(in srgb, #FFFFFF 34%, transparent);
  --dgm-dot-bright:   #FFFFFF;
  --dgm-dot-ink:      color-mix(in srgb, #FFFFFF 20%, transparent);
  --dgm-halo:         color-mix(in srgb, var(--da-teal) 30%, transparent);
}
.da-sec--tight { padding: var(--sp-18) 0; }

/* ── Containers ────────────────────────────────────────────────────────────
   Two only. The bands are full-bleed on the nav's own padding; --narrow is the
   centred reading column Sections 2 and 4 use (measured centre 765 against a
   viewport centre of 768). Anything else is a third container and needs a
   reason. */
.da-wrap        { padding: 0 var(--nav-pad); }
.da-wrap--narrow { max-width: 1000px; margin: 0 auto; padding: 0 var(--nav-pad); }

/* ── Type ──────────────────────────────────────────────────────────────────
   Every role is Satoshi. .da-accent is the teal half of a two-tone heading, and
   is a <span>, not a second block, so the lines wrap as one paragraph. */
.da-eyebrow {
  margin: 0 0 var(--sp-4);
  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);
}
.da-h1, .da-h2, .da-h3 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  color: var(--da-sec-ink);
  margin: 0;
  text-wrap: balance;
}
.da-h1 { font-size: var(--da-h1); line-height: 1.04; letter-spacing: -0.03em; }
.da-h2 { font-size: var(--da-h2); line-height: 1.1;  letter-spacing: -0.025em; }
.da-h3 { font-size: var(--da-h3); line-height: 1.2;  letter-spacing: -0.02em; }
.da-accent { color: var(--da-sec-accent); }

.da-lede {
  margin: var(--sp-6) 0 0;
  font-family: var(--font-brand);
  font-size: var(--da-lede);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--da-sec-ink);
  max-width: 34em;
}
.da-body {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-brand);
  font-size: var(--da-body);
  line-height: 1.65;
  color: var(--da-sec-body);
  max-width: 38em;
}
.da-body--wide { max-width: 52em; }
.da-note {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-body);
}

/* ── Two-column prose ───────────────────────────────────────────────────────
   A body block that runs as two columns rather than one narrow measure. CSS
   columns, not a grid: the copy is one continuous argument, so it should reflow
   between the columns rather than being split into two authored halves. Falls
   back to a single column below 900px, where two would be ~40 characters each. */
.da-prose {
  margin-top: var(--sp-8);
  columns: 2;
  column-gap: var(--sp-16);
}
.da-prose > .da-body { margin-top: 0; max-width: none; break-inside: avoid; }
.da-prose > .da-body + .da-body { margin-top: var(--sp-5); }

/* The amber rule that opens a section's closing statement. A short horizontal
   bar on its own line. NOT a left-edge accent stripe on a block, which this
   codebase bans outright. */
.da-rule {
  width: 148px; height: 3px;
  margin: var(--sp-16) 0 var(--sp-6);
  border: 0; background: var(--da-amber);
}
.da-rule--flush { margin-top: 0; }

/* ── Actions ───────────────────────────────────────────────────────────────
   Shares the navbar's 4px radius and 17px/600 label so the page and the chrome
   read as one system. */
.da-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: var(--da-btn-h); padding: 0 var(--da-btn-pad);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-brand);
  font-size: var(--e-nav-link);
  font-weight: var(--fw-semibold);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-hover-out) linear,
              border-color var(--dur-hover-out) linear,
              color var(--dur-hover-out) linear;
}
.da-btn .ico { --ico: 18px; flex: 0 0 auto; }
.da-btn:focus-visible { outline: none; box-shadow: var(--nav-focus-ring); }

.da-btn--primary { background: var(--da-charcoal); color: #FFFFFF; }
.da-btn--primary:hover { background: var(--da-deep-teal); color: #FFFFFF; }

.da-btn--outline {
  background: transparent; color: var(--da-sec-ink);
  border-color: color-mix(in srgb, var(--da-charcoal) 35%, transparent);
}
.da-btn--outline:hover { border-color: var(--da-deep-teal); color: var(--da-deep-teal); }

/* A light action FOR an ink band: bone fill, charcoal label. The buyer page's
   closing CTA uses it where the broker page uses the teal fill, so both are
   available and the page picks. Only legible on ink, hence the scoping below. */
.da-sec--ink .da-btn--light { background: var(--da-bone); color: var(--da-charcoal); }
.da-sec--ink .da-btn--light:hover { background: #FFFFFF; color: var(--da-charcoal); }

/* On ink, the primary action is teal: charcoal-on-charcoal is invisible. */
.da-sec--ink .da-btn--primary { background: var(--da-teal); color: var(--da-charcoal); }
.da-sec--ink .da-btn--primary:hover { background: #FFFFFF; color: var(--da-charcoal); }
/* PROMOTED 2026-09-06 from two page-local copies (the home page's professionals
   strip and closing band, then /professionals' two). The border was
   --da-sec-hairline, white at 16%, which measures ~1.15:1 against charcoal and
   is all but invisible: on an ink band the secondary action read as a floating
   label rather than a button. Both supplied designs draw it with a teal edge.

   60% teal, not the full value: at 100% it competes with the teal PRIMARY
   action sitting beside it, and the outline button is the second choice in
   every band that carries one. */
.da-sec--ink .da-btn--outline {
  border-color: color-mix(in srgb, var(--da-teal) 60%, transparent);
  color: #FFFFFF;
}
.da-sec--ink .da-btn--outline:hover { border-color: var(--da-teal); color: var(--da-teal); }

.da-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* A text action: accent label, arrow, and a rule under both. */
.da-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-bottom: 6px;
  border-bottom: var(--border-hairline) solid var(--da-sec-accent);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-accent);
  transition: opacity var(--dur-hover-out) linear;
}
.da-link:hover { color: var(--da-sec-accent); opacity: 0.72; }
.da-link .ico { --ico: 18px; }

/* ── Product lockup: DENTAL ACQUISITIONS │ MARKETPLACE ─────────────────────
   From the brand sheet's "product lockup examples". The divider is a border on
   the accent half, so it cannot drift from the text. */
.da-lockup {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--da-sec-ink);
}
.da-lockup__product {
  padding-left: var(--sp-3);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
  color: var(--da-sec-accent);
}

/* ── Column sets with vertical rules ───────────────────────────────────────
   gap + a left border on every item but the first, so the rules sit BETWEEN
   columns and none dangles at an edge. Collapses to rows on narrow widths, where
   the border moves to the top edge. */
.da-cols {
  display: grid;
  /* minmax(0, 1fr), never a bare 1fr. A bare 1fr resolves its minimum to
     min-content, so any child with nowrap text (a table, a nav rail) sets a floor
     the track cannot go below and the whole grid overflows the viewport. Measured
     on the broker page: the Deal Room mock pushed .brk-product to 1168px inside a
     1099px viewport, and to 490px inside 375px. min-width:0 on the items is the
     other half of the same fix. */
  grid-template-columns: repeat(var(--da-cols, 3), minmax(0, 1fr));
  gap: var(--sp-10);
  margin-top: var(--sp-12);
}
.da-cols > * { min-width: 0; }
.da-cols > * + * {
  padding-left: var(--sp-10);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}
.da-col__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.da-col__body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

/* ── Definition rows: LABEL | body | TAG ───────────────────────────────────
   Section 4's "stays yours" table and Section 7's Q&A both use this. A real
   <dl>, because it is a term/description set and not tabular data. */
.da-rows { margin: var(--sp-12) 0 0; }
.da-row {
  display: grid;
  grid-template-columns: var(--da-row-label, 15em) 1fr auto;
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-6) 0;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.da-row:last-child { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }
.da-row__label {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.da-row__body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}
.da-row__tag {
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--da-sec-accent);
  white-space: nowrap;
}
/* The Q&A variant: sentence-case question, a rule between the two columns. */
.da-row--qa { grid-template-columns: 22em 1fr; }
.da-row--qa .da-row__label {
  font-size: var(--e-card-title-sm);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--da-sec-ink);
  line-height: 1.4;
}
.da-row--qa .da-row__body {
  padding-left: var(--sp-8);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}

/* ── Closing statement: two-tone line, body, action on the right ───────────── */
.da-close {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--sp-10); flex-wrap: wrap;
}
/* No max-width here. `em` on this wrapper resolves against the INHERITED 16px body
   size, not the 28px heading inside it, so 46em was 736px rather than the ~1290px
   it looks like. That squeezed the closing heading onto two lines when the design
   sets it on one ("The marketplace doesn't replace your network. It extends it.").
   The measure belongs on the paragraph, which .da-body already carries. */
.da-close__text { flex: 1 1 auto; min-width: 0; }
.da-close .da-body { margin-top: var(--sp-3); }

/* ── Diagrams ──────────────────────────────────────────────────────────────── */
.da-dgm { width: 100%; height: auto; display: block; }
.da-dgm__label {
  font-family: var(--font-brand);
  font-size: var(--text-base);   /* 13px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
/* A criteria rail's label: wider tracking, because it reads as a field name
   rather than as a node. */
.da-dgm__label--rail { letter-spacing: 0.12em; font-weight: var(--fw-medium); }
/* A zone heading inside a figure. */
.da-dgm__zone {
  font-family: var(--font-brand);
  font-size: var(--text-lg);     /* 15px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
}
.da-dgm-caption {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-muted);
  text-align: center;
}

/* ── Responsive ────────────────────────────────────────────────────────────
   Column sets unstack first, then the row grids. The vertical rule becomes a
   horizontal one when a column set becomes a row stack, so the grouping still
   reads. */
@media (max-width: 1099px) {
  .da-sec { padding: var(--sp-16) 0; }
  .da-rule { margin-top: var(--sp-12); }
  .da-cols { gap: var(--sp-8); }
  .da-cols > * + * { padding-left: var(--sp-8); }
}
@media (max-width: 899px) {
  /* The single-column fallback the .da-prose comment above promises. It was never
     written, so the two-column prose stayed two columns all the way down: at 375px
     that is two 130px columns of three words a line, on this page and on the buyer
     page. Measured on /sellers at 375. */
  .da-prose { columns: 1; }
  .da-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .da-cols > * + * {
    padding-left: 0; padding-top: var(--sp-6); margin-top: var(--sp-6);
    border-left: 0; border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .da-row, .da-row--qa { grid-template-columns: 1fr; gap: var(--sp-3); }
  .da-row--qa .da-row__body { padding-left: 0; border-left: 0; }
  .da-close { flex-direction: column; align-items: stretch; }
}
@media (max-width: 639px) {
  .da-sec { padding: var(--sp-12) 0; }
  .da-btn { width: 100%; justify-content: center; }
  .da-actions { gap: var(--sp-3); }
  .da-rule { margin-top: var(--sp-10); width: 110px; }
}