/* =============================================================================
   Pricing — 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-btn, .da-note) lives in marketing/pages.css.

   Rebuilt 2026-09-04 from the pre-rebrand page, which used the v2 blocks
   (.pricing-hero, .p-card, .ptable, .promise, .pfaq, .final-cta). Nothing from
   that vocabulary survives here; the four blocks below are what the .da-* set
   genuinely did not already cover.

   Scoped without a page-root class: marketing_page_stylesheet_tag loads
   marketing/pages/<action>.css, so this file is only ever on the pricing page and
   a bare .pr-* 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.
   ============================================================================= */

/* ═══ THE THREE PLANS ══════════════════════════════════════════════════════
   Cards, not a .da-cols column set. A column set is hairline-separated text in
   a shared band; these are three PRICES a reader compares, and the middle one is
   recommended, which needs a container that can carry a fill and a badge.

   minmax(0, 1fr), never a bare 1fr: a bare 1fr floors at min-content, and
   "Start a Broker Workspace" is a nowrap button label that would set that floor
   and push the grid past the viewport. */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  /* Stretch, NOT `align-items: start`. The cards carry uneven content (only two
     of the three have a note line), so at natural height their actions land at
     three different bottoms: measured 1437 / 1494 / 1493 at a 1440 viewport.
     Equal-height cards plus `margin-top: auto` on the action is what actually
     lines the three buttons up, which is the whole reason the action has an auto
     margin. */
  align-items: stretch;
}

.pr-plan {
  position: relative;
  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);
  /* A tint of the band's own ink, so the card reads as raised on bone AND on
     ink without either value being hardcoded to one band. */
  background: color-mix(in srgb, var(--da-sec-ink) 5%, transparent);
}

/* The recommended plan. A brighter fill and a teal hairline, NOT a coloured
   edge stripe: an accent bar down one side is banned in this codebase (see
   CLAUDE.md). Evenly rounded, bordered on all four sides. */
.pr-plan--featured {
  background: color-mix(in srgb, var(--da-sec-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--da-sec-accent) 55%, transparent);
}

.pr-plan__badge {
  position: absolute;
  top: 0;
  left: var(--sp-8);
  transform: translateY(-50%);
  margin: 0;
  padding: 5px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--da-sec-accent);
  color: var(--da-charcoal);
  font-family: var(--font-brand);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.pr-plan__role {
  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);
}

.pr-plan__name {
  margin: 0;
  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);
}

.pr-plan__tag {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.55;
  color: var(--da-sec-muted);
}

/* The figure and its unit share a baseline, so the unit is a sibling span with
   `align-items: baseline` rather than a <small> inheriting a scaled size. */
.pr-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
}
.pr-plan__figure {
  font-family: var(--font-brand);
  font-size: var(--da-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--da-sec-ink);
}
.pr-plan__unit {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-medium);
  color: var(--da-sec-muted);
}

.pr-plan__sub {
  margin: var(--sp-3) 0 0;
  padding-bottom: var(--sp-6);
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  line-height: 1.6;
  color: var(--da-sec-muted);
}

/* The tick list. The marker is an IconHelper <svg class="ico">, so its size and
   colour are set here and the markup carries no styling. `align-items: start`
   plus a nudge keeps the tick on the first line's cap height when an item
   wraps to two lines. */
.pr-plan__list {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.pr-plan__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.55;
  color: var(--da-sec-body);
}
.pr-plan__list .ico {
  --ico: 16px;
  margin-top: 3px;
  color: var(--da-sec-accent);
  flex: 0 0 auto;
}

.pr-plan__note {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-style: italic;
  color: var(--da-sec-muted);
}

/* Aligning the three actions.
   The body absorbs the card's slack (flex: 1) and reserves the gap with its own
   padding, so every action sits flush at the bottom of an equal-height card and
   the three line up.

   `margin-top: auto` on the action alone does NOT work here, which is worth
   recording because it looks like it should. Two of the three plans carry a note
   line and one does not, so a fixed `margin-top` lands the buttons at three
   different heights (measured 1437 / 1494 / 1493 at 1440), and `auto` on its own
   gives the TALLEST card a zero gap, putting its button against the text. The
   wrapper solves both at once and needs no :has(). */
.pr-plan__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: var(--sp-8);
}
.pr-plan__cta { align-self: start; }

.pr-legal {
  margin-top: var(--sp-10);
  max-width: 62em;
  color: var(--da-sec-muted);
}

/* ═══ COMPARISON TABLE ═════════════════════════════════════════════════════
   It stays a table at every width. The v2 page turned it into stacked cards
   under 767px, which defeats the point: the reader is here to hold two columns
   against each other, and a card shows one at a time. It scrolls inside its own
   container instead, which is also the rule for any wide block in this codebase
   (the page body must never scroll horizontally).

   -webkit-overflow-scrolling for momentum in the iOS webview the native app
   renders these pages in. */
.pr-table-wrap {
  margin-top: var(--sp-12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
}

.pr-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-brand);
}

/* The caption is the accessible name for the scroll region and for anyone
   arriving by screen reader; visually the section heading already says it. */
.pr-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pr-table thead th {
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
  white-space: nowrap;
}

.pr-table tbody th {
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-ink);
}

.pr-table tbody td {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--e-body-sm);
  line-height: 1.55;
  color: var(--da-sec-body);
}

.pr-table tbody tr + tr th,
.pr-table tbody tr + tr td {
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}

/* Our column reads as the answer, theirs as the comparison. A weight and a
   colour step, not a background: a tinted cell in a scrolling table drags the
   eye down one column and stops the row reading across. */
.pr-table__ours { font-weight: var(--fw-semibold); color: var(--da-sec-ink); }
.pr-table__theirs { color: var(--da-sec-muted); }

/* The last row is the one the section title is about, so it carries the weight
   of a summary rather than another comparison. */
.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td {
  border-top-width: 2px;
  border-top-color: color-mix(in srgb, var(--da-sec-accent) 45%, transparent);
}

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

/* ═══ CLOSING ══════════════════════════════════════════════════════════════ */
.pr-cta .da-body { margin-top: var(--sp-5); }
.pr-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 pages.css (1099 / 899 / 639) rather than
   inventing new ones, so a band and its contents change together. */
@media (max-width: 1099px) {
  .pr-plans { gap: var(--sp-4); }
  .pr-plan { padding: var(--sp-6); }
  .pr-plan__badge { left: var(--sp-6); }
}

@media (max-width: 899px) {
  /* Straight from three to one, which is what .da-cols does at this width, so a
     column set and a plan set unstack together on the same page.

     A 2-up step was tried and dropped. Three plans do not halve: one card has to
     span or sit alone, and spanning the featured one needs `order: -1` to look
     deliberate. That changes VISUAL order without changing DOM order, so a
     keyboard user tabs seller, broker, buyer while seeing broker, seller, buyer.
     Two hundred pixels of saved height is not worth a focus-order mismatch. */
  .pr-plans { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .pr-table { min-width: 560px; }
}

@media (max-width: 639px) {
  .pr-plan__figure { font-size: var(--da-h3); }
  /* .da-btn goes full width under 639px (pages.css), and align-self: start
     would fight that. */
  .pr-plan__cta { align-self: stretch; }
  .pr-cta__tagline { padding-top: var(--sp-6); margin-top: var(--sp-8); }
}