/* =============================================================================
   For Buyers — Dental Acquisitions
   -----------------------------------------------------------------------------
   Only what is specific to this page. The shared vocabulary (.da-sec, .da-h1/2/3,
   .da-rows, .da-prose, .da-btn, .da-link, .da-lockup, the diagram tokens) lives in
   marketing/pages.css.

   Built from design_handoff/buyer-drive-download-20260902T100716Z-1-001/
   Section 1..7.png. Reads var(--da-*) / var(--da-sec-*) only.
   ============================================================================= */

/* ═══ DISPLAY SIZES ════════════════════════════════════════════════════════
   This page's H1 and H2 are genuinely smaller and larger, respectively, than the
   broker page's, so they are set here rather than moved in the shared roles.

   Solved, not guessed, per docs/marketing-design-system.md §11. Each section
   export is at its own zoom (S1 1.027, S3 1.432, S4 1.384), so the scale is
   derived per section from a body line whose CSS size is already known good, then
   the heading is solved from its own ink width. Both answers REPLICATE, which is
   what separates them from measurement noise:

     H1  56 / 58 / 57 across the hero's three lines  -> 57px
     H2  43 / 44 (Section 3) and 41 / 42 (Section 4) -> 42px

   Body, lede, eyebrow and H3 measured within a pixel of the shared roles, so they
   are left alone: a 1px difference is noise, and consistency across the marketing
   pages is worth more than chasing it. */
/* Scoped to .da-sec, with no :has() and no page-root class needed:
   marketing_page_stylesheet_tag loads marketing/pages/<action>.css, so this file
   is only ever on the buyers page. That makes a bare .da-sec here page-local by
   construction, and avoids :has() which older WebKit (Hotwire Native) lacks. */
.da-sec {
  --da-h1: clamp(32px, 4vw, 57px);
  --da-h2: clamp(26px, 3vw, 42px);
}

/* ═══ 1. HERO ══════════════════════════════════════════════════════════════ */
/* No top padding: the photograph runs flush to the nav, as on the broker page.
   The copy column carries the top space instead. */
.buy-hero { padding: 0 0 var(--sp-10); overflow: hidden; }

.buy-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--sp-10);
  /* start, not center. The section has no top padding so the photograph can reach
     the nav, which means the copy column begins UNDERNEATH a 90px sticky nav and
     has to clear it itself. With align-items:center that only happens by accident,
     while the copy is shorter than the photograph; this page's copy is taller, so
     the eyebrow rendered behind the nav. Top-aligning plus an explicit
     nav-height padding makes the clearance independent of how long the copy is. */
  align-items: start;
}
.buy-hero__text {
  max-width: 40em;
  padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-12);
}
.buy-hero__text .da-note { margin-top: var(--sp-5); color: var(--da-sec-muted); }

.buy-hero__media {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 640px;
  margin-right: calc(var(--nav-pad) * -1);
}
.buy-hero__media picture { display: block; height: 100%; }
.buy-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  /* Same eased, narrow fade as the broker hero. The CURVE hides the seam, not the
     width, so the band stays tight enough to keep the figure in the photo
     readable. See docs/marketing-design-system.md before widening this. */
  --da-hero-fade: linear-gradient(to right,
    rgba(0, 0, 0, 0)     0%,
    rgba(0, 0, 0, 0.015) 3%,
    rgba(0, 0, 0, 0.05)  6%,
    rgba(0, 0, 0, 0.11)  9%,
    rgba(0, 0, 0, 0.20)  12%,
    rgba(0, 0, 0, 0.32)  15%,
    rgba(0, 0, 0, 0.47)  17%,
    rgba(0, 0, 0, 0.63)  19%,
    rgba(0, 0, 0, 0.78)  21%,
    rgba(0, 0, 0, 0.90)  23%,
    rgba(0, 0, 0, 0.97)  25%,
    rgba(0, 0, 0, 1)     28%);
  -webkit-mask-image: var(--da-hero-fade);
          mask-image: var(--da-hero-fade);
}

/* ── Who does what ─────────────────────────────────────────────────────────
   Two columns over a hairline. The vertical rule sits BETWEEN them via a border
   on the second item, so nothing dangles at an edge. */
.buy-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-8);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-6);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.buy-split > * + * {
  padding-left: var(--sp-8);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}
.buy-split__who {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--da-sec-muted);
}
/* The buyer's half is amber, because the buyer is this page's subject. Matches
   the amber ring the diagrams draw around BUYERS. */
.buy-split__who--you { color: var(--da-amber); }
.buy-split__what {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--da-body);
  line-height: 1.55;
  color: var(--da-sec-body);
}

/* ── The four-value band ───────────────────────────────────────────────────
   Unlike the broker page's white card, this one sits ON the bone with a hairline
   above it and rules between the cells, which is how the design draws it. */
.buy-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--sp-10) 0 0;
  padding: var(--sp-8) 0 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  text-align: center;
}
.buy-values > li { padding: 0 var(--sp-6); }
.buy-values > li + li {
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}

/* ═══ 3. THE CRITERIA FUNNEL ═══════════════════════════════════════════════ */
.buy-funnel { margin: var(--sp-10) 0 0; }
.buy-funnel .da-dgm { max-width: 1240px; margin-inline: auto; }

/* ═══ 4. WHO'S HERE ════════════════════════════════════════════════════════ */
.buy-buyers { margin: var(--sp-12) 0 0; }
.buy-buyer {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: var(--sp-10);
  padding: var(--sp-8) 0;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.buy-buyer:last-child { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }
.buy-buyer__who {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--da-sec-ink);
}
/* An amber COLUMN RULE, on the content column's leading edge. This is a divider
   between two columns of a row, which is what the design draws; it is not a
   coloured accent stripe decorating a block, which this codebase bans. It only
   exists while the row is two columns, and is dropped when the row stacks. */
.buy-buyer__detail {
  margin: 0;
  padding-left: var(--sp-8);
  /* 65%: sampled off Section 4, the rule reads #DA9B62 over bone, which is amber
     at about two thirds strength rather than the full #D97706. */
  border-left: 2px solid color-mix(in srgb, var(--da-amber) 65%, transparent);
}
.buy-buyer__lead {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--da-sec-ink);
}
.buy-buyer__body,
.buy-buyer__aside {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--da-body);
  line-height: 1.6;
}
.buy-buyer__body { color: var(--da-sec-body); }
.buy-buyer__lead, .buy-buyer__body, .buy-buyer__aside { max-width: 38em; }
/* The closing thought of each row is set quieter, as the design does: it is a
   reflection on the criteria above it, not more criteria. */
.buy-buyer__aside { margin-top: var(--sp-4); color: var(--da-sec-muted); }

/* ═══ 5. THE ECOSYSTEM ═════════════════════════════════════════════════════ */
.buy-ecosystem { margin: var(--sp-12) 0 var(--sp-10); }
.buy-ecosystem .da-dgm { max-width: 860px; margin-inline: auto; }

/* The participants table reuses .da-rows, minus the third column. */
.buy-parties { margin-top: 0; }
.buy-party { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); padding: var(--sp-4) 0; }
/* No text-transform: the caps are carried in the markup so "CPAs" keeps its
   lowercase plural s. .da-row__label uppercases by default, which turned it into
   "CPAS". Same trap as the broker page's participants list. */
.buy-party .da-row__label { text-transform: none; }
.buy-party__label--you { color: var(--da-amber); }
/* A reading measure. Sections 4 to 7 were exported at roughly a 740px viewport,
   so their columns look narrow in the design; at 1436px the same markup runs to
   about 140 characters a line, which is unreadable. Capping the measure keeps the
   design's proportions without pretending the viewport is narrow. */
.buy-party .da-row__body { max-width: 38em; }

/* ═══ 6. THREE PARTS ═══════════════════════════════════════════════════════ */
/* Three stacked ROWS, each copy-left and figure-right, not three columns. */
.buy-parts { margin-top: var(--sp-12); }
.buy-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-10) 0;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.buy-part:last-child { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }
.buy-part__title { margin: var(--sp-3) 0 var(--sp-4); font-size: var(--e-card-title); line-height: 1.25; }
.buy-part__text .da-body { margin-top: var(--sp-4); }
.buy-part__figure { display: flex; justify-content: center; }
.buy-part__figure .da-dgm { max-width: 560px; }
/* 12px, one step down from the shared 13px: these figures are half-width columns,
   so their rings are smaller than a full-width diagram's and the longest label
   ("PROFESSIONALS", one unbreakable word) has to fit inside one. */
.buy-part__figure .da-dgm__label { font-size: var(--text-sm); }   /* 12px */

.buy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  text-align: center;
}
.buy-summary__item {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--da-sec-ink);
}
/* Two rows per statement, the accent clause on its own line, as the design sets
   them. display:block on the accent rather than a <br> in the copy. */
.buy-summary__item .da-accent { display: block; }
.buy-summary__item + .buy-summary__item {
  padding-left: var(--sp-8);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}
.buy-summary__note {
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-6);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--da-body);
  color: var(--da-sec-body);
  text-align: center;
}
.buy-summary__cta {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ═══ 7. QUESTIONS + CTA ═══════════════════════════════════════════════════ */
/* No vertical rule between question and answer here; the design uses row
   hairlines alone, unlike the broker page's Q&A. */
.buy-qa__row { grid-template-columns: minmax(0, 20em) minmax(0, 1fr); }
.buy-qa__row .da-row__body { padding-left: 0; border-left: 0; }
.buy-qa__row .da-row__label { font-size: var(--e-card-title); line-height: 1.35; }
.buy-qa__row .da-row__body { max-width: 38em; }

/* Left-aligned, unlike the broker page's centred closing CTA. */
.buy-cta .da-body { margin-top: var(--sp-5); }
.buy-cta .da-note { margin-top: var(--sp-5); color: var(--da-sec-muted); }
.buy-cta__tagline {
  margin: var(--sp-10) 0 0;
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  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);
  text-align: center;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1299px) {
  .buy-hero__grid { gap: var(--sp-8); }
  .buy-part { gap: var(--sp-8); }
  .buy-funnel .da-dgm { max-width: none; }
}

@media (max-width: 1099px) {
  .buy-hero__media { min-height: 480px; }
  .buy-values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .buy-values > li:nth-child(3) { border-left: 0; }
  /* Copy over figure: the figures are wide and the copy is the argument. */
  .buy-part { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .buy-buyer { grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: var(--sp-6); }
  .buy-qa__row { grid-template-columns: minmax(0, 16em) minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .buy-hero { padding-top: var(--sp-8); }
  .buy-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .buy-hero__text { padding-top: var(--sp-8); padding-bottom: 0; }
  .buy-hero__media { min-height: 320px; order: 2; margin-right: 0; }
  /* Full-width, so a left-edge fade would read as a defect rather than a blend. */
  .buy-hero__img {
    border-radius: var(--radius-card);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .buy-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .buy-split > * + * {
    padding-left: 0; padding-top: var(--sp-5);
    border-left: 0; border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  /* The amber rule was a COLUMN divider; with one column there are no columns to
     divide, and a coloured bar down the edge of a stacked block is exactly the
     accent stripe the codebase bans. */
  .buy-buyer { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .buy-buyer__detail { padding-left: 0; border-left: 0; }
  .buy-party, .buy-qa__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .buy-summary { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); text-align: left; }
  .buy-summary__item + .buy-summary__item {
    padding-left: 0; padding-top: var(--sp-6);
    border-left: 0; border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .buy-summary__note { text-align: left; }
  .buy-summary__cta { align-items: stretch; }
  .buy-cta__tagline { text-align: left; }
}

@media (max-width: 639px) {
  .buy-values {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
    padding-top: var(--sp-6);
  }
  .buy-values > li + li {
    border-left: 0; padding-top: var(--sp-5);
    border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .buy-values > li { padding-inline: 0; }
  /* The funnel is the one figure that cannot usefully shrink to a phone: at 375px
     its four rails and two flow bundles collapse into noise. It scrolls instead,
     inside its own container, at a legible size. */
  .buy-funnel { overflow-x: auto; }
  .buy-funnel .da-dgm { min-width: 720px; }
  .buy-part__figure .da-dgm { min-width: 0; }
}