/* =============================================================================
   Home — Dental Acquisitions
   -----------------------------------------------------------------------------
   Only what is specific to this page. The shared vocabulary (.da-sec, .da-h1/2/3,
   .da-body, .da-rows, .da-row--qa, .da-close, .da-btn, .da-rule) lives in
   marketing/da_system.css.

   Rebuilt three times on the same two days. First off the pre-rebrand page, then
   to the structure of the supplied home page design, then (2026-09-05) to that
   design's SECOND revision. What the third pass deleted, and why it is not
   coming back: .hm-figures (the hero stat row), .hm-trust (six invented
   brokerage names), .hm-quotes (three invented testimonials) and .hm-steps
   (superseded by .hm-stages, which carries a schematic per stage). The
   revision's page claims nothing it cannot show, so the components that existed
   to hold invented proof went with the copy.

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

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

/* ═══ HERO ═════════════════════════════════════════════════════════════════
   The family's split hero: copy left, photograph bleeding off the right edge
   behind an eased fade. Matches /buyers, /sellers and /brokers. */
.hm-hero { padding: 0 0 var(--sp-16); overflow: hidden; }

.hm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-10);
  /* start, not center. The band has no top padding so the photograph can reach
     the nav, which means the copy column begins UNDERNEATH a 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. Same reasoning as
     .buy-hero__grid. */
  align-items: start;
}

.hm-hero__text {
  max-width: 40em;
  padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-10);
}

/* The third action is a text link beside two buttons, so it has to be centred
   against them: .da-actions is a flex row and its default `stretch` would sit
   the link's own underline at the bottom of a 44px button. */
.hm-hero__actions .da-link { align-self: center; }

/* The broker line under the actions: a text action with its promise beneath it,
   which is the one sentence brokers arrive looking for. */
.hm-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.hm-hero__aside .da-note { margin: 0; color: var(--da-sec-muted); }

.hm-hero__media {
  position: relative;
  align-self: stretch;
  height: 100%;
  /* 660px: the source is 828x1030 portrait (the treatment-room photograph). A
     portrait image in a bleeding column wants to be taller than the copy
     beside it. */
  min-height: 660px;
  margin-right: calc(var(--nav-pad) * -1);
}
.hm-hero__media picture { display: block; height: 100%; }
.hm-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Both figures sit CENTRED in this frame, so there is no horizontal bias to
     apply: 50%, not the 38% the previous centre-left photograph needed. A bias
     either way would drag one of the two into the fade.

     BOTH axes do real work, because the container's aspect crosses the source's
     0.80 between tiers, and `cover` crops whichever axis is proportionally
     longer. Measured: 1440 gives a 693x693 box (1.00) and crops 169px of
     HEIGHT; 900 gives 427x824 (0.52, the column is narrow but full-bleed tall)
     and crops 236px of WIDTH; 390 gives 375x340 (1.10) and crops 126px of
     HEIGHT. So do not reason about this as a height-crop only. 42% keeps both
     faces (they sit high, around a third up) clear of the top edge in the two
     height-cropping tiers, and 50% keeps the pair centred in the width-cropping
     one. Re-measure all three if the photograph is replaced. */
  object-position: 50% 42%;
  /* The same eased, narrow fade the three role heroes use. The CURVE hides the
     seam, not the width, so the band stays tight enough to keep the figure in
     the photograph readable. Read docs/marketing-design-system.md before
     widening it.

     This is the FOURTH copy of these stops (buyers.css, sellers.css,
     brokers.css, here). It belongs in da_system.css as a shared .da-hero-media /
     .da-hero-img pair; promoting it means editing three shipped and verified
     pages, so it is recorded as a follow-up rather than done in passing. */
  --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);
}

/* ═══ SPLIT: COPY BESIDE A FIGURE ══════════════════════════════════════════
   Bands 2 and 3, which are the design's central before/after argument. The
   figure is the wider track: it is a seven-node ring, and at parity with the
   copy the labels collide. */
.hm-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
  margin-top: var(--sp-12);
}
.hm-split__text { min-width: 0; }
.hm-split__text .da-body + .da-body { margin-top: var(--sp-4); }

/* --rev is the mirror: FIGURE FIRST, in the DOM as well as on the screen, so
   the two bands read as one picture rearranged either side of the fold.
   The tracks flip with it. They did not, before this pass, so the reversed
   band handed its figure the NARROWER track and the ring's labels crowded. */
.hm-split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }

.hm-figure-panel { min-width: 0; margin: 0; }

/* ═══ A DERIVED COUNT UNDER A FIGURE ═══════════════════════════════════════
   "21 connections. 7 participants. No central marketplace." Both numbers come
   from MarketingDiagramsHelper, so they cannot go stale against the picture.

   The design brackets this block with a coloured bar down its left edge. This
   codebase bans that outright (CLAUDE.md), so the block is bracketed with a
   hairline across the TOP instead, which is the same move .hm-gains makes and
   reads as the same "here is the number for the thing above" gesture. */
.hm-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: var(--sp-10) 0 0;
  padding-top: var(--sp-6);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.hm-stat__value {
  flex: 0 0 auto;
  font-family: var(--font-brand);
  font-size: var(--da-h1);
  font-weight: var(--fw-bold);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--da-sec-accent);
}
.hm-stat__body { min-width: 0; display: grid; gap: var(--sp-2); }
.hm-stat__label {
  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-ink);
}
.hm-stat__note {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.5;
  color: var(--da-sec-body);
}

/* ═══ THE STATEMENT LINE ═══════════════════════════════════════════════════
   One sentence, set larger than body copy, that closes an argument. The page
   has two of them and they differ ONLY in colour and measure, so the type is
   declared once: retuning the voice is one edit, not two that can drift.

     .hm-payoff  amber, for an INK band. Amber measures 5.16:1 there, so it
                 passes AA at this size; do not reuse it on bone, where it is
                 2.92:1 and only legal at display sizes (section 15 of the doc).
     .hm-claim   the band's accent, for a BONE band: deep teal, 4.9:1 there.
                 Bands 7 and 9.

   --thesis is band 2's payoff, which the design sets larger than band 8's
   because it is the sentence the whole page is built to earn.

   The map module's .dmap__claim (marketing/listings_map.css) is the same block
   a third time. It is NOT merged in here: that file ships to /buyers and
   /brokers as well, and a shared statement class belongs in da_system.css. Do
   that promotion when the three pages next get a pass, and delete all three. */
.hm-payoff,
.hm-claim {
  margin: var(--sp-6) 0 0;
  font-family: var(--font-brand);
  font-size: var(--da-lede);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}
.hm-payoff { max-width: 34em; color: var(--da-amber); }
.hm-claim  { max-width: 46em; color: var(--da-sec-accent); }
.hm-payoff--thesis { font-size: var(--da-h3); line-height: 1.25; letter-spacing: -0.015em; }

/* .da-rule's own top margin is --sp-16 (64px), sized for a closing statement at
   the END of a band. Bands 3 and 7 use the same rule as a heading underline,
   which the design sets close under the type. --flush (margin-top: 0) is the
   other extreme and crowds it, so this is the middle value. */
.hm-rule { margin-top: var(--sp-6); }

/* ═══ THE NETWORK MARK ═════════════════════════════════════════════════════
   Sits inside an eyebrow, so it is sized off the eyebrow's own line rather
   than a fixed pixel value: the mark and the label stay proportional if the
   type role ever moves. */
.hm-eyebrow-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.da-mark {
  flex: 0 0 auto;
  width: 2.4em;
  height: 2.4em;
  display: block;
}

/* ═══ WHAT EACH SIDE GAINS ═════════════════════════════════════════════════
   The role word takes the accent, not the ink: the design colours it, and it is
   what makes the four lines scan as a list of participants rather than prose. */
.hm-gains {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  display: grid;
  gap: var(--sp-3);
}
.hm-gains li {
  font-family: var(--font-brand);
  font-size: var(--da-body);
  line-height: 1.55;
  color: var(--da-sec-body);
}
.hm-gains__who { font-weight: var(--fw-bold); color: var(--da-sec-accent); }

/* ═══ THREE WAYS IN ════════════════════════════════════════════════════════
   Three across, not the four-card 2x2 this band used to be: the professionals
   moved out into .hm-pros below, which left three cards addressed to the people
   who are CHOOSING a marketplace. */
.hm-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  align-items: stretch;
}
.hm-role {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--da-sec-ink) 5%, transparent);
}
/* flex: 1 on the body, so the three actions sit flush at the bottom of
   equal-height cards and line up across the row. See the note on .pr-plan__body
   in pricing.css for why `margin-top: auto` on the action alone does not do it. */
.hm-role__body { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sp-6); }
/* NO text-transform here. One of the three labels is "FOR BUYERS AND DSOs" and
   CSS uppercase renders that "DSOS"; the display string is in the markup. */
.hm-role__who {
  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);
  color: var(--da-sec-accent);
}
.hm-role__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);
}
.hm-role__text {
  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);
}
/* A short teal bar between the copy and the action, from the design. A rule on
   its own line, never an edge stripe on the card. */
.hm-role__rule {
  width: 46px;
  height: 3px;
  margin: 0 0 var(--sp-5);
  border: 0;
  background: var(--da-sec-accent);
}
.hm-role__cta { align-self: start; }

/* ═══ THE PROFESSIONALS STRIP ══════════════════════════════════════════════
   The fourth role, as an ink strip closing a bone band rather than a fourth
   card. It sits outside .da-wrap so it can be full bleed.

   It DECLARES the ink role tokens itself. Bands carry the palette and children
   never ask, so a child that changes surface has to say which surface it is.
   The two .da-btn--outline rules are the other half of that: the ink variants
   in da_system.css are scoped to .da-sec--ink, and without repeating them here
   the button would take the bone treatment (a charcoal border on charcoal, and
   a deep-teal hover at 1.6:1). If a second page ever needs this strip, promote
   the token block to a .da-ink utility rather than copying it. */
.hm-pros {
  --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);

  margin-top: var(--sp-22);
  padding: var(--sp-16) 0;
  background: var(--da-sec-bg);
  color: var(--da-sec-body);
}
.hm-pros__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.hm-pros__text { flex: 1 1 30em; min-width: 0; }
.hm-pros__text .da-body { max-width: 44em; }
/* NO text-transform: the list contains "CPAs". */
.hm-pros__roles {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-brand);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  color: var(--da-sec-accent);
}
/* The ink variants in da_system.css are scoped to .da-sec--ink, and this strip
   is an ink block inside a BONE section, so it does not match them. Without
   this pair the button takes the bone treatment: a charcoal border on charcoal,
   and a deep-teal hover at 1.6:1. The values are the promoted ones, kept in
   step with .da-sec--ink .da-btn--outline. */
.hm-pros .da-btn--outline {
  border-color: color-mix(in srgb, var(--da-teal) 60%, transparent);
  color: #FFFFFF;
}
.hm-pros .da-btn--outline:hover { border-color: var(--da-teal); color: var(--da-teal); }

/* The strip is flush with the bottom of its band, so the band gives up its own
   bottom padding to it. */
.hm-path { padding-bottom: 0; }

/* ═══ THE THREE STAGES ═════════════════════════════════════════════════════
   Find / Qualify / Close, each with a schematic of what that stage holds.

   THE SCHEMATICS ARE FIGURES, NOT PRODUCT MOCKUPS. /brokers' .brk-mock is a
   literal replica of a product surface and therefore always sits on its own
   white card, because the product is light. These say WHAT a stage contains
   (a title, a heading, redacted rows), not what it looks like, so they follow
   the diagram rule and repaint with the band. */
.hm-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* head / label / title / body / schematic. Named here so the items can borrow
     these five rows with `subgrid` below. */
  grid-template-rows: auto auto auto auto auto;
  /* COLUMN gap only. A bare `gap` also sets the row gap, and a subgrid child
     inherits it, so 40px landed between every element INSIDE each stage (60px
     between the rail and its label once the head's own margin was added). The
     five rows are one card's worth of copy: their spacing belongs to the
     elements' margins, as it does everywhere else on this page. */
  column-gap: var(--sp-10);
  row-gap: 0;
  margin: var(--sp-12) 0 0;
  padding: 0;
}
/* SUBGRID, so the three schematics start at the same y.
   The design aligns their TOP edges and lets the bottoms run ragged, because
   the middle stage holds an extra row. A column flex box cannot do that: with
   `flex: 1` on the body the panels align at the BOTTOM instead, which leaves a
   different-sized hole above each one and reads as a bug (measured before this
   rule: tops at 4463 / 4386 / 4433, a 77px stagger). Borrowing the parent's
   rows makes every band of the card as tall as its tallest instance, which is
   the actual requirement.

   Where subgrid is missing (WebKit under 16, which this bundle still has to
   serve) the two declarations are dropped together and each stage falls back to
   its own auto rows: the schematic then sits directly under its copy with the
   tops ragged, which is the correct degradation and not a broken layout. */
.hm-stage {
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
}

/* The number and the rail that runs off it. CSS, not an SVG: it is a line and a
   ring, and a helper-built figure for that would be ceremony. */
.hm-stage__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.hm-stage__num {
  flex: 0 0 auto;
  font-family: var(--font-brand);
  font-size: var(--da-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--da-sec-accent);
}
.hm-stage__rail {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: var(--da-amber);
}
/* The ring caps the rail. Filled with the band's own background so it covers
   the line's end rather than being crossed by it. */
.hm-stage__rail::after {
  content: "";
  position: absolute;
  right: 0;
  /* translate, not a negative margin. The ring is 11px on a 1px rail, so
     centring it by margin needs -5.5px; -6px left it half a pixel high, which on
     a hairline is the whole line. */
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border: 1px solid var(--da-amber);
  border-radius: var(--radius-pill);
  background: var(--da-sec-bg);
}
.hm-stage__label {
  margin: 0 0 var(--sp-2);
  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);
}
.hm-stage__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);
}
.hm-stage__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);
}

/* ═══ A SCHEMATIC PANEL ════════════════════════════════════════════════════ */
.hm-panel {
  /* start, not the subgrid row's default stretch. The row is as tall as the
     tallest schematic (the middle one carries an extra row), and a stretched
     3-row panel would show ~77px of empty box under its last row. Tops
     aligned, bottoms ragged, which is how the design draws them. */
  align-self: start;
  margin-top: var(--sp-8);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-input);
  overflow: hidden;
  background: color-mix(in srgb, var(--da-sec-ink) 6%, transparent);
  font-family: var(--font-brand);
}
.hm-panel__bar {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
  background: color-mix(in srgb, var(--da-sec-ink) 8%, transparent);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-ink);
}
.hm-panel__body { padding: var(--sp-4); }
.hm-panel__heading {
  margin: 0 0 var(--sp-4);
  font-size: var(--e-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--da-sec-ink);
}
.hm-panel__rows { margin: 0; display: grid; gap: var(--sp-3); }
.hm-panel__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
}
.hm-panel__rows dt {
  font-size: var(--e-micro);
  color: var(--da-sec-body);
}
.hm-panel__rows dd { margin: 0; min-width: 0; }
/* The redacted value. Deliberately not a fake number: the caption under the row
   says these are placeholders, and a plausible-looking figure would undo that. */
.hm-panel__blank {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--da-sec-ink) 22%, transparent);
}
.hm-panel__foot {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-size: var(--e-micro);
  color: var(--da-sec-body);
}

/* A figure caption for a row of them, rather than for one figure: it sits
   under the whole grid, so it needs the grid's own top gap. */
.hm-caption { margin-top: var(--sp-6); font-style: italic; }

/* ═══ REAL LISTING CARDS ═══════════════════════════════════════════════════
   The design's four cards are grey placeholders. These are four REAL
   buyer-visible listings, one per specialty, masked the way /explore masks
   them. 2x2 rather than four across, which is the design's own arrangement and
   gives each card room for a four-row table.

   Whole-card links, so the target is the card and not a 13px "View listing".
   The affordance moves on hover with a border step, never a fill.

   GRID IS SAFE AT TWO TRACKS, and that is worth saying because the four-across
   version of this band was moved to FLEX for a reason (doc 22.2): the card count
   varies from 0 to 4, and `repeat(4, ...)` reserved four tracks whatever
   arrived, so three cards left a 345px hole at the end of the only row. Two
   tracks cannot produce that hole. Three cards are 2 + 1 with the last one at
   card width, and one card is a half-width card rather than the full-bleed
   banner 22.2 warns about in the other direction. If this band ever goes back to
   three or four across, it goes back to flex with it. */
.hm-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.hm-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-input);
  /* White, not the band's bone: a listing card is a piece of the product, and
     the design lifts it off the page the same way. */
  background: #FFFFFF;
  text-decoration: none;
  transition: border-color var(--dur-hover-out) linear;
}
/* The colour is DECLARED on hover, not left to inherit. colors_and_type.css
   carries a global `a:hover { color: var(--brand-600) }`, and this card is an
   <a>, so without this the whole card's inherited text turns brand-green on
   hover. Caught by `bin/rails marketing:link_button_hovers`, which exists for
   exactly this. */
.hm-card:hover {
  border-color: var(--da-sec-accent);
  color: var(--da-sec-body);
}
.hm-card:focus-visible { outline: none; box-shadow: var(--nav-focus-ring); }
.hm-card__bar {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  background: var(--da-charcoal);
  color: #FFFFFF;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.hm-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
}
.hm-card__rows { margin: 0; display: grid; gap: var(--sp-3); }
.hm-card__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-3);
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 10%, transparent);
}
.hm-card__rows > div:last-child { padding-bottom: 0; border-bottom: 0; }
.hm-card__rows dt {
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  color: color-mix(in srgb, var(--da-charcoal) 62%, transparent);
}
.hm-card__rows dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-charcoal);
}
/* auto margin pins the affordance to the bottom of an equal-height card. */
.hm-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-semibold);
  color: var(--da-deep-teal);
}
.hm-card__more .ico { --ico: 16px; }

/* The closing row of bands 7 and 9: a statement with its action on the right. */
.hm-view, .hm-ask {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
/* No `.hm-view .da-body` rule here: da_system.css already sets that margin on
   `.da-close .da-body`, and .hm-view is only ever rendered alongside .da-close. */
.hm-ask .hm-claim { margin: 0; }

/* ═══ HOW WE MAKE MONEY ════════════════════════════════════════════════════
   Copy on the left, the three terms on the right, then the marketplace's role
   across the foot of the band. */
.hm-econ {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: start;
  margin-top: var(--sp-12);
}
.hm-econ__text { min-width: 0; }
.hm-econ__text .da-body + .da-body { margin-top: var(--sp-4); }
.hm-econ__cta { margin-top: var(--sp-8); }

.hm-terms { margin: 0; min-width: 0; }
.hm-term { padding: var(--sp-6) 0; }
.hm-term:first-child { padding-top: 0; }
.hm-term:last-child { padding-bottom: 0; }
.hm-term + .hm-term { border-top: var(--border-hairline) solid var(--da-sec-hairline); }
.hm-term__label {
  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);
}
.hm-term__body { margin: 0; display: grid; gap: var(--sp-3); }
.hm-term__statement {
  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);
}
.hm-term__note {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

.hm-role-note {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.hm-role-note .da-body { margin-top: var(--sp-5); }

/* ═══ INLINE LINK ══════════════════════════════════════════════════════════
   Inside running copy, so it underlines rather than becoming a .da-link (which
   is a block-level action with its own rule and arrow). */
.hm-inline-link {
  color: var(--da-sec-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}
.hm-inline-link:hover { opacity: 0.72; }

/* ═══ CLOSING ══════════════════════════════════════════════════════════════
   Centred, which the revision changed: the closing band is the only one on the
   page with no second column and nothing to align a left edge against. */
.hm-cta { text-align: center; }
.hm-cta .da-body { margin: var(--sp-6) auto 0; max-width: 44em; }
.hm-cta .da-actions { justify-content: center; }
.hm-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);
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   Matches the shared breakpoints in da_system.css (1099 / 899 / 639) rather
   than inventing new ones, so a band and its contents change together. */
@media (max-width: 1099px) {
  .hm-hero__grid { gap: var(--sp-8); }
  .hm-hero__media { min-height: 560px; }
  .hm-split { gap: var(--sp-8); }
  .hm-roles { gap: var(--sp-4); }
  .hm-role { padding: var(--sp-6); }
  .hm-stages { column-gap: var(--sp-8); }
  .hm-econ { gap: var(--sp-10); }
  .hm-pros { margin-top: var(--sp-16); padding: var(--sp-12) 0; }
  .hm-cards { gap: var(--sp-4); }
  /* The label column gives way first: "Opportunity profile" needs 9em and the
     value beside it needs somewhere to go. */
  .hm-card__rows > div { grid-template-columns: minmax(0, 9em) minmax(0, 1fr); }
}

@media (max-width: 899px) {
  /* The photograph goes under the copy and full width, and loses its fade: the
     mask reads as a smudge along the top edge once the image is no longer
     bleeding off the side it was fading into. */
  .hm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-hero__text { max-width: none; padding-bottom: var(--sp-8); }
  .hm-hero__media {
    min-height: 340px;
    order: 2;
    margin-right: calc(var(--nav-pad) * -1);
    margin-left: calc(var(--nav-pad) * -1);
  }
  .hm-hero__img {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Stacked, a figure above its own explanation reads as an unlabelled picture,
     so the copy leads in BOTH bands. --rev only exists to mirror the two
     figures side by side, which stops being true once they stack. */
  .hm-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .hm-split--rev { grid-template-columns: minmax(0, 1fr); }
  .hm-split--rev > .hm-figure-panel { order: 1; }

  .hm-roles { grid-template-columns: minmax(0, 1fr); }
  .hm-econ { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .hm-cards { grid-template-columns: minmax(0, 1fr); }

  /* The vertical gap becomes a hairline when a column set becomes a row stack,
     so the grouping still reads. Same move as .da-cols at this width. */
  .hm-stages { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hm-stages > li + li {
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
    border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  /* Stacked, there is nothing left to align across: each stage takes its own
     five rows, so the schematic sits directly under the copy it belongs to. */
  .hm-panel { max-width: 560px; }

  .hm-pros__inner { align-items: stretch; }
}

@media (max-width: 639px) {
  .hm-gains { margin-top: var(--sp-5); }
  .hm-stat { gap: var(--sp-4); }
  .hm-role { padding: var(--sp-5); }
  .hm-card__body { padding: var(--sp-4); }
  /* A two-column row of label and value has ~150px a side at 375px, which
     wraps "Broker represented" onto three lines. Stack them. */
  .hm-card__rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .hm-panel__rows > div { grid-template-columns: minmax(0, 8em) minmax(0, 1fr); }
  .hm-cta__tagline { padding-top: var(--sp-6); margin-top: var(--sp-8); }
}