/* =============================================================================
   For Brokers — Dental Acquisitions
   -----------------------------------------------------------------------------
   Only what is genuinely specific to this page. The shared vocabulary (.da-sec,
   .da-h1/2/3, .da-rows, .da-cols, .da-btn, .da-link, .da-lockup, diagrams) lives
   in marketing/pages.css so the buyer, seller and home passes inherit it.

   Built from design_handoff/brokers-drive-download-20260902T055708Z-1-001/
   NEW Section 1..7.png. Reads var(--da-*) / var(--da-sec-*) only; colour literals
   belong in marketing/colors_and_type.css.
   ============================================================================= */

/* ═══ 1. HERO ══════════════════════════════════════════════════════════════ */
/* The hero owns its own vertical rhythm: the value band overlaps the photograph's
   lower edge, so the section cannot carry the standard --sp-26 bottom padding. */
/* NO top padding on the section. The design runs the photograph flush against the
   nav (its top edge measures y=107 against a nav ending ~y=106), so the media
   column has to start at the section's own top edge. The copy column carries the
   top space instead, via its own padding below. */
.brk-hero { padding: 0 0 var(--sp-10); overflow: hidden; }

.brk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
}
/* padding-bottom, not a smaller overlap. The value band below rides up over the
   photograph's lower edge, and with align-items:center a text column this tall
   would end BELOW the band's top edge and be covered by it. In the design the
   note clears the card by about 90px (note ink ends y=749, card top y=841).
   The padding keeps that clearance whatever the copy length. */
/* The copy owns the hero's top space, because the section gave it up so the photo
   could reach the nav. padding-bottom clears the value band, which rides up over
   the photograph's lower edge: with align-items:center a text column this tall
   would otherwise end BELOW the band's top edge and be covered by it. In the
   design the note clears the card by ~90px (note ink ends y=749, card top y=841). */
.brk-hero__text { max-width: 40em; padding: var(--sp-10) 0 var(--sp-12); }
.brk-hero__text .da-note { margin-top: var(--sp-6); }

/* The photograph runs to the viewport edge, so it cancels the container's right
   padding and drops its radius on that side. Square, as the design draws it. */
.brk-hero__media {
  position: relative;
  align-self: stretch;
  /* Tall enough to fill the hero rather than float in it. The row's height is set
     by whichever column is taller, so this is a floor, not a fixed height. */
  min-height: 620px;
  /* Cancels the container's right padding so the photo reaches the viewport edge,
     as the design draws it. */
  margin-right: calc(var(--nav-pad) * -1);
}
.brk-hero__media picture { display: block; height: 100%; }
.brk-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  /* The left edge DISSOLVES into the bone rather than butting against it.
     No border-radius: the design's photo is square-cornered and simply fades out.

     EASED, not linear, and this is the whole point. A plain
     `linear-gradient(transparent, #000 26%)` is STEEPEST exactly at the photo's
     edge, so alpha climbs fastest where it sits against flat bone and the eye
     reads the vertical boundary as a line. Measured on a render: a 14-unit colour
     step in the first 5px, against ~2 further in.

     What kills the seam is the CURVE, not the width. This spends its first tenth
     almost transparent (1.5% alpha at 3%), so the onset is imperceptible, then
     does the real work across the middle.

     Width is therefore kept NARROW: 18% of the photo, ~124px. The curve is what
     matters, so the band can be tight and still not show an edge. Iterated with
     the requester, and the trade-off runs one way only: a wider band buys nothing
     once the onset is smooth, and costs the figure on the photo's left edge.
     An attempt at 56% removed the seam but faded that person out of the picture;
     28% was still burying her. Do not widen this to "improve" the blend.

     The shape: the first 4% (~28px) stays under 2.5% alpha, so nothing is
     perceptible where the photo meets flat bone, and the climb to opaque happens
     over the back half of the band where photo detail hides it.

     -webkit- prefix first and kept: mask-image is unprefixed in current browsers
     but older WebKit (which this repo already accommodates for Hotwire Native)
     only honours the prefixed form. Where neither is supported the photo just has
     a hard edge, which is a graceful loss. */
  --da-hero-fade: linear-gradient(to right,
    rgba(0, 0, 0, 0)     0%,
    rgba(0, 0, 0, 0.008) 2%,
    rgba(0, 0, 0, 0.025) 4%,
    rgba(0, 0, 0, 0.05)  6%,
    rgba(0, 0, 0, 0.09)  8%,
    rgba(0, 0, 0, 0.16)  10%,
    rgba(0, 0, 0, 0.27)  11.5%,
    rgba(0, 0, 0, 0.42)  13%,
    rgba(0, 0, 0, 0.60)  14.5%,
    rgba(0, 0, 0, 0.80)  16%,
    rgba(0, 0, 0, 0.92)  17%,
    rgba(0, 0, 0, 1)     18%);
  -webkit-mask-image: var(--da-hero-fade);
          mask-image: var(--da-hero-fade);
}
.brk-hero__media picture { display: block; height: 100%; }

/* The four-value band. White card on bone, hairline dividers between cells, and
   it rides up over the hero image's lower edge. */
.brk-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: calc(var(--sp-12) * -1) 0 0;
  padding: var(--sp-6) 0;
  list-style: none;
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.brk-values > li { padding: 0 var(--sp-6); }
.brk-values > li + li {
  border-left: var(--border-hairline) solid
               color-mix(in srgb, var(--da-charcoal) 12%, transparent);
}
.brk-values .da-col__body { color: var(--da-charcoal); }
.brk-values .da-col__title { color: var(--da-deep-teal); }

/* ═══ 3. EXPAND YOUR REACH ═════════════════════════════════════════════════ */
.brk-reach {
  display: grid;
  /* The design gives the figures roughly two thirds of the row (text ~420px against
     ~940px of diagrams at 1536). They carry eleven labelled rings; the copy does
     not need the room and the diagrams do. */
  /* 0.66 / 1.34. The copy column only has to clear the H2's longest intended line
     ("Your network is valuable." = 414px at the corrected 38px), and everything
     left over goes to the figures, which carry eleven labelled rings. Widen the
     copy column and the diagrams shrink; narrow it past ~420px and the headline
     wraps mid-clause. */
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
  gap: var(--sp-10);
  align-items: center;
}
.brk-reach__text .da-lede { margin-top: var(--sp-8); }

/* Two diagrams and the "+ MARKETPLACE" divider between them. The divider is a
   grid column, not a pseudo-element, so it can hold real text. */
/* 1fr / auto / 1.35fr, not equal columns. The marketplace variant carries eleven
   rings against the other's five, and the design gives it about 1.8x the width
   (measured on Section 3: today spans ~275px, marketplace ~490px). Equal columns
   force the busier diagram to render its circles smaller than its own pair. */
.brk-reach__figures {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  gap: var(--sp-5);
  align-items: center;
}
.brk-figure { margin: 0; }
/* 14px. The design sets these labels at roughly 0.3x the node radius; at the
   previous 11px they read as fine print inside oversized rings. Node radius is 48
   and "INDIVIDUAL" is the widest single line, so 14px is the ceiling that still
   fits (verified by a getBBox check against each ring). */
.brk-figure .da-dgm__label { font-size: var(--text-md); }   /* 14px */
.brk-figure__cap {
  margin-bottom: var(--sp-4);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--da-sec-ink);
}
.brk-figure__cap--accent { color: var(--da-sec-accent); }

/* The amber "+ MARKETPLACE" spine. A vertical rule with the sign and label
   centred on it. */
.brk-figure__plus {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  align-self: stretch;
  justify-content: center;
  padding: 0 var(--sp-2);
  position: relative;
}
.brk-figure__plus::before,
.brk-figure__plus::after {
  content: ""; flex: 1 1 auto; width: 1px; min-height: 40px;
  background: var(--da-amber);
}
.brk-figure__plus-sign {
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--da-amber);
}
.brk-figure__plus-label {
  font-family: var(--font-brand);
  font-size: var(--e-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--da-amber);
  writing-mode: horizontal-tb;
  text-align: center;
}

/* ═══ 5. THE MARKETPLACE ═══════════════════════════════════════════════════ */
.brk-market {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-12);
  margin-top: var(--sp-8);
  align-items: start;
}
.brk-market__figure { margin: var(--sp-12) 0 0; }

/* The seven participants, as a definition list with hairline separators. */
.brk-market__parties { margin: 0; }
.brk-party { padding: var(--sp-5) 0; }
.brk-party + .brk-party {
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.brk-party:first-child { padding-top: 0; }
/* No text-transform. The design sets these in caps but keeps "CPAs" with its
   lowercase plural s, which uppercasing destroys ("CPAS"). The exact display
   strings therefore live in the markup. */
.brk-party__name {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-brand);
  font-size: var(--e-body);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  color: var(--da-sec-accent);
}
/* The broker is the page's subject, so its heading takes amber, matching the ring
   the diagram draws around the BROKERS node. */
.brk-party__name--broker { color: var(--da-amber); }
.brk-party__body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

/* ═══ 6. BUILT AROUND THE TRANSACTION ══════════════════════════════════════ */
.brk-products { align-items: start; }
.brk-product { display: flex; flex-direction: column; }
.brk-product__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--e-card-title-sm);
  line-height: 1.3;
}
.brk-product__figure { margin-top: auto; padding-top: var(--sp-8); }
.brk-product__figure--mesh { padding-top: var(--sp-10); }

/* The closing summary row: three statements, a note, and the action. */
.brk-summary {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr auto;
  gap: var(--sp-8);
  align-items: center;
}
/* Two rows per statement, the accent clause on its own line. The design's summary
   band measures 62px tall over five columns, and its first column is only 165px
   wide; "The marketplace creates reach." needs ~290px on one line, so each
   statement is set as charcoal-then-teal on two rows. Making the accent a block
   is what does it, rather than a <br> in the copy. */
.brk-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);
  text-wrap: balance;
}
.brk-summary__item .da-accent { display: block; }
.brk-summary__item + .brk-summary__item {
  padding-left: var(--sp-8);
  border-left: var(--border-hairline) solid var(--da-sec-hairline);
}
.brk-summary__note {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.5;
  color: var(--da-sec-body);
}
.brk-summary__cta { justify-self: end; }

/* ═══ 7. HOW IT WORKS ══════════════════════════════════════════════════════ */
/* Five steps with amber arrows between them. The arrows are list items so the
   flow survives a reflow, and are aria-hidden because "arrow" is not content. */
.brk-steps {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-5);
  margin: var(--sp-8) 0 0; padding: 0; list-style: none;
}
.brk-step {
  flex: 1 1 0; min-width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center;
}
.brk-step__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px;
  border: var(--border-hairline) solid var(--da-sec-accent);
  border-radius: var(--radius-pill);
  color: var(--da-sec-accent);
}
.brk-step__glyph .ico { --ico: 21px; }
.brk-step__label {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.4;
  color: var(--da-sec-ink);
}
.brk-steps__arrow {
  flex: 0 1 auto;
  align-self: center;
  margin-top: 8px;
  color: var(--da-amber);
  display: inline-flex;
  justify-content: center;
}
/* Its OWN class, not .ico. .ico sets `width: var(--ico); height: var(--ico)`,
   which overrides the svg element's own 2em x 1em and squashes the long arrow back
   into a square (measured 18x18 before this). 36x18 is the design's 32x16
   proportion; the old square :arrow_right could never be longer than it was tall. */
.brk-steps__arrow .brk-arrow { width: 36px; height: 18px; flex: 0 0 auto; }

/* ═══ 7. CLOSING CTA ═══════════════════════════════════════════════════════ */
.brk-cta { text-align: center; }
.brk-cta .da-h2 { margin-inline: auto; }
.brk-cta__body { margin-inline: auto; }
.brk-cta__actions { justify-content: center; }
.brk-cta .da-note { margin-top: var(--sp-5); }
.brk-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);
}

/* ═══ PRODUCT MOCKUPS (Deal Team / Deal Room) ══════════════════════════════ */
/* Static illustrations of the real product surfaces. Always on their own light
   card, never inheriting the ink band, because the product itself is light. */
.brk-mock {
  margin-top: auto;
  min-width: 0;
  border-radius: var(--radius-input);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: var(--shadow-card);
  font-family: var(--font-brand);
  /* --text-xs (11px), one rung below --e-micro. At 12px the Deal Team table's
     "Organization" column clipped inside the card's overflow:hidden ("Specialist
     - Compa..."). Both are existing ramp roles; neither is a raw size. */
  font-size: var(--text-xs);
  color: var(--da-charcoal);
}
.brk-mock__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--da-charcoal);
  color: #FFFFFF;
}
.brk-mock__title { font-weight: var(--fw-semibold); font-size: var(--e-meta); }
.brk-mock__bar-meta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: color-mix(in srgb, #FFFFFF 72%, transparent);
}
.brk-mock__pill {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--da-teal); color: var(--da-charcoal);
  font-weight: var(--fw-semibold);
}
.brk-mock .ico { --ico: 13px; flex: 0 0 auto; }
.brk-mock__body { padding: 10px 12px 12px; }

.brk-mock__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: 10px;
}
.brk-mock__search {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 auto;
  padding: 6px 8px;
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 14%, transparent);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--da-charcoal) 55%, transparent);
}
.brk-mock__filter {
  display: inline-flex; align-items: center; gap: 4px;
  color: color-mix(in srgb, var(--da-charcoal) 62%, transparent);
}

.brk-mock__table { width: 100%; border-collapse: collapse; }
.brk-mock__table th {
  text-align: left; font-weight: var(--fw-semibold);
  padding: 6px 3px;
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 14%, transparent);
  color: color-mix(in srgb, var(--da-charcoal) 70%, transparent);
  white-space: nowrap;
}
.brk-mock__table td {
  padding: 7px 3px;
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 8%, transparent);
  white-space: nowrap;
}
.brk-mock__cat { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.brk-mock__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--da-deep-teal) 14%, transparent);
  color: var(--da-deep-teal);
  font-size: 9px; font-weight: var(--fw-bold);   /* type-scale-ignore: 9px has no rung, and the requester approved it explicitly for this mock's micro label */
  vertical-align: middle;
}
/* The placeholder bars that stand in for a real professional's name. */
.brk-mock__blank {
  display: inline-block; width: 100%; min-width: 22px; height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--da-charcoal) 11%, transparent);
}
.brk-mock__foot {
  margin: 10px 0 0;
  font-weight: var(--fw-semibold);
  color: var(--da-deep-teal);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* Deal Room: a nav rail and a content pane. */
.brk-mock__room { display: grid; grid-template-columns: 96px 1fr; }
.brk-mock__rail {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 6px;
  background: color-mix(in srgb, var(--da-charcoal) 4%, transparent);
  border-right: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 10%, transparent);
}
.brk-mock__rail-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px; border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--da-charcoal) 66%, transparent);
  white-space: nowrap;
}
.brk-mock__rail-item.is-current {
  background: #FFFFFF;
  color: var(--da-deep-teal);
  font-weight: var(--fw-semibold);
}
.brk-mock__pane { padding: 10px 12px 12px; }
.brk-mock__pane-title { margin: 0 0 8px; font-size: var(--e-meta); font-weight: var(--fw-semibold); }
.brk-mock__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--sp-4);
  margin: 0 0 10px;
}
.brk-mock__facts > div { display: flex; gap: 8px; }
.brk-mock__facts dt { color: color-mix(in srgb, var(--da-charcoal) 58%, transparent); min-width: 4.5em; }
.brk-mock__facts dd { margin: 0; font-weight: var(--fw-medium); }
.brk-mock__panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  padding-top: 10px;
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 10%, transparent);
}
.brk-mock__panels h4 { margin: 0 0 7px; font-size: var(--e-micro); font-weight: var(--fw-semibold); }
.brk-mock__line { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.brk-mock__box {
  width: 10px; height: 10px; flex: 0 0 auto;
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 24%, transparent);
  border-radius: 2px;
}
.brk-mock__panels .brk-mock__foot { justify-content: flex-start; font-size: var(--text-2xs); }   /* 10px */

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1299px) {
  .brk-market { gap: var(--sp-10); }
  .brk-reach { gap: var(--sp-10); }
  .brk-summary { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-6); }
  .brk-summary__note { grid-column: 1 / -1; }
  .brk-summary__cta { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 1099px) {
  /* Three columns each holding a product mockup stop being legible well before a
     plain three-column text grid does, so .brk-products collapses on its own
     schedule rather than waiting for .da-cols at 899px. The vertical rule between
     columns becomes a horizontal one so the grouping still reads. */
  .brk-products { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .brk-products > * + * {
    padding-left: 0; padding-top: var(--sp-8); margin-top: var(--sp-8);
    border-left: 0; border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .brk-product__figure { max-width: 620px; }

  /* The hero photograph stops earning half the width before the copy does. */
  .brk-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-8); }
  .brk-hero__media { min-height: 420px; }
  .brk-values { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); }
  .brk-values > li:nth-child(3) { border-left: 0; }
  .brk-reach, .brk-market { grid-template-columns: minmax(0, 1fr); }
  .brk-market__parties { margin-top: var(--sp-4); }
  .brk-product__title { font-size: var(--e-card-title-sm); }
}

@media (max-width: 899px) {
  .brk-hero { padding-top: var(--sp-8); }
  .brk-hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* The desktop padding exists only to clear the overlapping value band. Once the
     hero stacks, the band no longer overlaps the copy and the padding is dead space. */
  .brk-hero__text { padding-bottom: 0; }
  /* Photograph above the copy would push the headline below the fold, so it goes
     under the copy and loses its right-edge bleed. */
  .brk-hero__media { min-height: 320px; order: 2; margin-right: 0; }
  /* Stacked, the photo is full-width, so a left-edge fade would read as a defect
     rather than as a blend. It gets a card radius and a hard edge instead. */
  .brk-hero__img {
    border-radius: var(--radius-card);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .brk-values { margin-top: var(--sp-10); }
  .brk-reach__figures { grid-template-columns: minmax(0, 1fr); }
  /* The "+ MARKETPLACE" spine turns horizontal between the stacked diagrams. */
  .brk-figure__plus { flex-direction: row; padding: var(--sp-6) 0; }
  .brk-figure__plus::before,
  .brk-figure__plus::after { width: auto; height: 1px; min-height: 0; min-width: 40px; }
  .brk-summary { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .brk-summary__item + .brk-summary__item {
    padding-left: 0; padding-top: var(--sp-5);
    border-left: 0; border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .brk-summary__cta { width: 100%; }
  /* Five steps in a row cannot survive a tablet, so the arrows are dropped and
     the steps become a two-then-three grid. */
  .brk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .brk-steps__arrow { display: none; }
}

@media (max-width: 639px) {
  .brk-values {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-6) 0;
    text-align: left;
  }
  .brk-values > li + li {
    border-left: 0; padding-top: var(--sp-5);
    border-top: var(--border-hairline) solid
                color-mix(in srgb, var(--da-charcoal) 12%, transparent);
  }
  .brk-steps { grid-template-columns: repeat(2, 1fr); }
  .brk-mock__room { grid-template-columns: minmax(0, 1fr); }
  .brk-mock__rail {
    flex-direction: row; overflow-x: auto;
    border-right: 0;
    border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 10%, transparent);
  }
  .brk-mock__panels, .brk-mock__facts { grid-template-columns: minmax(0, 1fr); }
  /* The Deal Team table is the one thing here that must scroll rather than reflow:
     it is a real table and squeezing five columns onto a phone makes it unreadable. */
  .brk-mock__body { overflow-x: auto; }
  .brk-mock__table { min-width: 380px; }
}