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

   Built from the client's deployed reference (lustrous-haupia-62d2ad.netlify.app),
   the seller page of the same concept the broker and buyer screenshots came from.
   Reads var(--da-*) / var(--da-sec-*) only.
   ============================================================================= */

/* ═══ DISPLAY SIZES ════════════════════════════════════════════════════════
   Matched to the buyer page rather than re-measured, and that is a deliberate
   answer to a trap. The reference's own type is fluid:

     h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem) }   43px up to 74px
     h2 { font-size: clamp(2rem,   4vw,   3.3rem) }   32px up to 53px

   so "the design size" depends entirely on the viewport a screenshot was taken
   at. That is why the broker screenshots implied a 63px H1 and the buyer ones
   57px: they were exported at about 1125px and 1018px. Chasing a third number
   here would make three sibling pages disagree for no reason, so this page pins
   the buyer page's pair. The reference's own H2/H1 ratio (0.72) is within noise
   of the buyer page's (0.74), so the proportions are the design's either way. */
.da-sec {
  --da-h1: clamp(32px, 4vw, 57px);
  --da-h2: clamp(26px, 3vw, 42px);
}

/* ═══ ACCENT COLOUR — AMBER, NOT TEAL ══════════════════════════════════════
   The reference splits the two accents by JOB, not by ground, and the split is
   worth stating once because it is not the split the broker and buyer pages use.

   AMBER (the reference's --gold / --gold-lt) carries every emphasis inside
   display type and every content heading on an ink band:

     .hero h1 em   .defline   .s2pay   .den h3   .vbig   .why h4
     .stage .sk    .s6close h3 em   .finale h2 em   .tag   .qa h3 i
     h2 span (Section 3)   .prow em   .dmid/.pmid .lbl

   TEAL (--teal-dk / #5FBDBD) is reserved for the small LABELS that name a
   structure rather than emphasise a sentence:

     .eyebrow   .tlink   .dcol .dk   .vk   .pk   .badge   .lby span
     .vp .loc   .vmeta .mv   .roles b   .rstep .rk   .thead .t   .trow h4

   And a few headings the reference leaves in plain ink: .three h4, .rstep .num,
   .payoff h3, .tcontrol h3.

   Requested on review ("you have used teal color instead of orange color that
   was in design on many places"), and confirmed against the deploy's own CSS
   rather than by eye.

   NOTE the sibling pages disagree, and deliberately: a pixel census of the
   broker and buyer exports finds 5,000-10,000 teal pixels per section against
   13-1,500 amber, and the amber that is there is the arrow/rule orange. Those
   two pages are teal-accented because their designs are. This block is the
   seller reference's colourway, not a site-wide change. */

/* Emphasis inside display type. Scoped to .da-h*, so the listing card's
   "owner directly" (also a .da-accent, and teal in the reference) is untouched. */
.da-h1 .da-accent,
.da-h2 .da-accent,
.da-h3 .da-accent { color: var(--da-amber); }

/* Content headings on ink: Section 2's three denials, Section 4's four reasons,
   Section 6's three stages. The structural keys stay teal because they are not
   inside a .da-cols set (.sell-split__col) or carry their own class (.sell-vk). */
.da-sec--ink .da-cols .da-col__title,
.sell-why .da-col__title { color: var(--da-amber); }

/* On a light band the same rows are plain ink in the reference (.three h4), not
   an accent at all. */
.da-sec:not(.da-sec--ink) .da-cols .da-col__title { color: var(--da-sec-ink); }

/* ═══ 1. HERO ══════════════════════════════════════════════════════════════ */
/* No top padding: the photograph runs flush to the nav, as on the other two
   pages. The copy column carries the top space itself. */
.sell-hero { padding: 0 0 var(--sp-12); overflow: hidden; }

.sell-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--sp-10);
  /* start, not center: the copy is what a reader lands on, so it stays at the top
     of the band whatever height the photograph resolves to. */
  align-items: start;
}
.sell-hero__text {
  max-width: 40em;
  /* 72px / 88px, the design's own hero padding. NOT nav-height clearance: the
     chrome is position:sticky inside normal flow, so it occupies 90px of layout
     and the hero already begins below it. Adding a nav's height here (as
     buyers.css does) is double clearance and drops the eyebrow 38px too low. */
  padding: var(--sp-18) 0 var(--sp-22);
}
.sell-hero__text .da-note { margin-top: var(--sp-5); color: var(--da-sec-muted); }

.sell-hero__media {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 660px;
  margin-right: calc(var(--nav-pad) * -1);
}
.sell-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The source is portrait (696x880) and the subject's head sits high in it, so
     the crop is taken from the upper third rather than the centre. */
  object-position: 52% 26%;
  /* The broker page's fade, not the buyer page's: 18% is where the requester
     settled it after three rounds of "expose the person more". The CURVE hides
     the seam, the width does not, so read
     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.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);
}

/* The four assurances: on the bone, over a hairline, rules between the cells. */
.sell-assure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--sp-6) 0 0;
  list-style: none;
  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);
}
.sell-assure > li { padding: var(--sp-2) var(--sp-6); }
.sell-assure > li:first-child { padding-left: 0; }
.sell-assure > li + li { border-left: var(--border-hairline) solid var(--da-sec-hairline); }

/* ═══ 2. ASKING ISN'T SELLING ══════════════════════════════════════════════ */
/* The line under the H2 is the section's thesis, so it is set larger than a lede
   and in the accent, which is how the design weights it. */
.sell-defline {
  max-width: 26em;
  font-size: var(--da-h3);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--da-amber);
}
.sell-payoff { font-weight: var(--fw-semibold); color: var(--da-amber); }

/* ── The "you decide" split ─────────────────────────────────────────────────
   Two sides with the owner's decision as the gate between them. Section 2 uses
   it for explore/act and Section 3 for visible/private, so it is one component
   with a stretch modifier rather than two near-identical grids. */
.sell-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
  margin-top: var(--sp-14);
}
.sell-split--stretch { align-items: stretch; }
.sell-split__col { min-width: 0; }
/* The right-hand list reads back toward the gate. Only where the two sides are
   symmetrical lists; the card variant stays left-aligned. */
.sell-split__col--end { text-align: right; }

.sell-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-2);
}
/* A FIXED length, not flex. Stretching the bar to the tallest column made it run
   almost the whole height of the listing card in Section 3, which reads as a
   divider between two panels rather than as a gate between two states. 64px is
   the reference's own value for the same device in Section 2, and with
   justify-content:center the group stays centred whatever the row's height. */
.sell-gate__bar {
  width: 1px; height: var(--sp-16); flex: 0 0 auto;
  background: color-mix(in srgb, var(--da-amber) 55%, transparent);
}
.sell-gate__label {
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--da-amber);
}

.sell-list {
  margin: 0; padding: 0;
  list-style: none;
  font-family: var(--font-brand);
  font-size: var(--da-body);
  color: var(--da-sec-body);
}
.sell-list > li { padding: 5px 0; }

/* ═══ 3. PRIVACY BY DESIGN ═════════════════════════════════════════════════ */
.sell-cardhead {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--da-sec-accent);
}

/* A white card on the bone band. White, never the warm grey: see the hard ban in
   CLAUDE.md. */
.sell-card {
  background: var(--white);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  padding: var(--sp-7);
}
.sell-card--private { padding: var(--sp-4) var(--sp-7); }
.sell-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sell-card__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--da-sec-ink);
}
.sell-card__loc {
  margin: 3px 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-muted);
}
.sell-badge {
  flex: 0 0 auto;
  padding: 4px var(--sp-3);
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-deep-teal) 40%, transparent);
  border-radius: var(--radius-pill);
  font-family: var(--font-brand);
  font-size: var(--e-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--da-deep-teal);
}
.sell-card__rows { margin: 0; }
.sell-card__row,
.sell-priv__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-5);
  padding: 12px 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
}
.sell-card__row { border-top: var(--border-hairline) solid var(--da-sec-hairline); }
.sell-priv__row + .sell-priv__row {
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.sell-card__row dt,
.sell-priv__row dt { margin: 0; color: var(--da-sec-body); }
.sell-card__row dd {
  margin: 0;
  font-weight: var(--fw-semibold);
  text-align: right;
  color: var(--da-sec-ink);
}
.sell-priv__row dd {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: 0;
  flex: 0 0 auto;
}
/* The redaction: a blurred neutral bar, so the field reads as withheld rather
   than as empty. Blur on a 13px block is cheap and degrades to a plain bar
   wherever filter is unsupported. */
.sell-redact {
  display: block;
  width: 108px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--da-slate) 45%, transparent),
    color-mix(in srgb, var(--da-slate) 68%, transparent));
  filter: blur(3px);
}
.sell-priv__tag {
  font-style: normal;
  min-width: 3.4em;
  text-align: right;
  font-size: var(--e-meta);
  font-weight: var(--fw-semibold);
  color: var(--da-amber);
}
.sell-card__by {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-muted);
}

/* A centred statement closing a section. Shared by Sections 3 to 7. */
.sell-payoff-block { margin-top: var(--sp-14); text-align: center; }
.sell-payoff-block .da-body {
  margin-inline: auto;
  max-width: 42em;
  color: var(--da-sec-muted);
}
.sell-payoff-block .da-actions { justify-content: center; }
.sell-payoff-block .da-note { color: var(--da-sec-muted); }

/* ═══ 4. KNOW WHAT YOU'VE BUILT ════════════════════════════════════════════ */
/* Three unequal columns: the practice, its market, and what moves the number.
   The design's own ratios (.78 / .92 / 1.3). */
.sell-value {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 0.92fr) minmax(0, 1.3fr);
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}
.sell-value__col { min-width: 0; }

/* The action that sits directly under the value block. A second route to
   /list-a-practice/location, the same screen .sell-why__cta below opens; the
   point is proximity to the comparables, not a different destination.

   Its own block rather than a cell in .sell-value, because a fourth grid item
   would take a column at every width and land beside the drivers list. */
.sell-value__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
/* The note sits BESIDE the button on a wide band and drops under it when the row
   wraps, so the two never separate. margin:0 because .da-note carries a top
   margin for the stacked case. */
.sell-value__action .da-note { margin: 0; max-width: 34em; }
.sell-vk {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--da-amber) 50%, transparent);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.sell-vloc {
  margin: 4px 0 var(--sp-5);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-accent);
}
.sell-vrows { margin: 0; }
.sell-vrow {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4);
  padding: 12px 0;
  border-bottom: var(--border-hairline) dotted var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
}
.sell-vrow dt { margin: 0; color: var(--da-sec-body); }
.sell-vrow dd { margin: 0; font-weight: var(--fw-semibold); color: var(--da-sec-ink); }

.sell-vsub {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-muted);
}
.sell-vsub--tight { margin-top: 3px; }
/* The two headline numbers. The "to" between them is set small and quiet so the
   pair reads as one range rather than as two figures. */
.sell-vbig {
  margin: 5px 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-num-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--da-amber);
}
.sell-vbig i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: var(--fw-medium);
  padding: 0 5px;
  color: color-mix(in srgb, var(--da-amber) 78%, transparent);
}

.sell-range { margin: var(--sp-5) 0 var(--sp-7); }
.sell-range__ends {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-2);
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  color: var(--da-sec-muted);
}

.sell-vmeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
}
.sell-vmeta dt { margin: 0; font-size: var(--e-body-sm); color: var(--da-sec-muted); }
.sell-vmeta dd {
  margin: 3px 0 0;
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-accent);
}

.sell-drivers { margin: 0; }
.sell-driver {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
}
.sell-driver:last-child { border-bottom: 0; }
.sell-driver dt {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--da-sec-ink);
}
.sell-driver dd {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.55;
  color: var(--da-sec-body);
}

/* Four reasons plus the action, on one row over a hairline. The action is the
   fifth cell, wider than the rest, which is how the design keeps "why you would
   want this" and "how to get it" in the same breath. */
.sell-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: 0;
  margin-top: var(--sp-14);
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  align-items: start;
}
.sell-why > * { padding: 0 var(--sp-6); min-width: 0; }
.sell-why > *:first-child { padding-left: 0; }
.sell-why > * + * { border-left: var(--border-hairline) solid var(--da-sec-hairline); }
.sell-why__cta { text-align: center; }
.sell-why__cta .da-btn { width: 100%; justify-content: center; }
.sell-why__cta .da-note { margin-top: var(--sp-3); color: var(--da-sec-muted); }
.sell-why__cta .da-link { margin-top: var(--sp-4); }

/* The two disclaimers. Quiet, and the pair is the reason the illustrative
   numbers above are allowed to be specific. */
.sell-disc {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.sell-disc p {
  margin: 0;
  max-width: 46em;
  font-family: var(--font-brand);
  font-size: var(--e-micro);
  line-height: 1.5;
  color: var(--da-sec-muted);
}

/* ═══ 5. YOUR TRANSITION TEAM ══════════════════════════════════════════════ */
.sell-team {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-14);
  align-items: center;
  margin-top: var(--sp-10);
}
.sell-team__figure { margin: 0; }
.sell-team__figure .da-dgm { max-width: 620px; margin-inline: auto; }

.sell-roles { margin: 0; }
.sell-role {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
}
.sell-role:last-child { border-bottom: 0; }
.sell-role dt {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  /* No text-transform. The labels are sentence case in the design, and a
     component that uppercases cannot be reused for a list holding an acronym:
     "CPAs" becomes "CPAS". Same trap as the broker and buyer participant lists. */
  color: var(--da-sec-accent);
}
.sell-role dd {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.55;
  color: var(--da-sec-body);
}

/* The two states, as cards with an amber TOP rule. A top rule is a card's brow,
   not the banned coloured stripe down a block's leading edge. */
.sell-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-14);
}
/* NO border-radius, and that is not an omission. A 16px radius bent the amber
   top rule down into both corners, which reads as a tab rather than as a rule
   across the top of the card. The reference agrees and has none either:

     .state { background: var(--paper); border: 1px solid var(--ll);
              border-top: 2px solid var(--gold); padding: 30px 30px 28px }

   Do not "tidy" this by adding the radius back to match the other cards. A
   coloured rule along an edge and a rounded corner on that same edge are
   mutually exclusive; pick one. (The top rule is a card's brow, which is fine.
   A coloured bar down the LEADING edge is the thing this codebase bans.) */
.sell-state {
  background: var(--white);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-top: 2px solid var(--da-amber);
  padding: var(--sp-7);
}
.sell-state__title { font-size: var(--e-card-title); }
.sell-state .da-body { margin-top: var(--sp-3); max-width: none; }

.sell-linkrow { margin-top: var(--sp-12); }

/* ═══ 6. WHERE ARE YOU TODAY ═══════════════════════════════════════════════ */
.sell-stages { margin-top: var(--sp-12); }
/* No font-size here: .da-h3 (31px at this width) is what the reference sets these
   at, and the override was rendering them at card-title size. The class carries
   the face, weight and colour; only the rhythm is local. */
.sell-stage__title {
  margin: var(--sp-3) 0 var(--sp-5);
  line-height: 1.25;
}
.sell-stage .da-body { margin-top: var(--sp-4); max-width: none; }
.sell-stage .da-link { margin-top: var(--sp-6); }

/* ═══ 7. FIND. QUALIFY. CLOSE. ═════════════════════════════════════════════ */
.sell-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}
.sell-step { min-width: 0; }
.sell-step__top {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sell-step__num {
  font-family: var(--font-brand);
  font-size: var(--e-num-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 0.9;
  /* .rstep .num is re-declared to --navy in the reference's section 7 block, so
     the number is plain ink and the LABEL beside it carries the teal. */
  color: var(--da-sec-ink);
}
.sell-step__label {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--da-sec-accent);
}
/* The connector: a hairline running out of each step with an arrowhead at its
   end, which is what makes the three read as a sequence. The last one keeps the
   rule and drops the head, because it points at nothing. */
.sell-step__line {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--da-amber) 65%, transparent);
}
.sell-step__line::after {
  content: "";
  position: absolute; right: -1px; top: -5px;
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: var(--da-amber);
}
.sell-step:last-child .sell-step__line::after { display: none; }
/* 23px, from the reference's 1.42rem. Smaller than a stage title, because three
   of these sit in one row and each carries a paragraph under it. */
.sell-step__title { margin-bottom: var(--sp-4); font-size: var(--e-heading-lg); }
.sell-step .da-body { max-width: none; }

/* "Owner control: ..." The design draws a coloured bar down this line's left
   edge; that is the accent stripe CLAUDE.md bans outright, so the emphasis is an
   amber label instead. */
.sell-oc {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.55;
  color: var(--da-sec-ink);
}
.sell-oc__label {
  display: block;
  margin-bottom: 3px;
  font-size: var(--e-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-amber);
}

/* A centred label on a rule that runs to both edges. The rules are the ::before
   and ::after of one flex row, so there is no empty markup to keep in sync. */
.sell-thresholds { margin-top: var(--sp-14); }
.sell-thead {
  display: flex; align-items: center; gap: var(--sp-5);
  margin: 0;
}
.sell-thead::before,
.sell-thead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--da-amber) 65%, transparent);
}
.sell-thead span {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--da-sec-accent);
}
.sell-trow { margin-top: var(--sp-8); text-align: center; }
.sell-tk {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-accent);
}

/* ═══ 8. QUESTIONS + CLOSE ═════════════════════════════════════════════════ */
.sell-faq {
  margin: var(--sp-10) 0 0;
  columns: 2;
  column-gap: var(--sp-16);
}
.sell-qa {
  break-inside: avoid;
  padding: var(--sp-6) 0;
  border-bottom: var(--border-hairline) solid var(--da-sec-hairline);
}
.sell-qa__q {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-brand);
  font-size: var(--e-card-title);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--da-sec-ink);
}
.sell-qa__n {
  padding-right: var(--sp-2);
  font-weight: var(--fw-bold);
  color: var(--da-amber);
}
.sell-qa__a {
  margin: 0;
  padding-left: var(--sp-6);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

/* The seam between the questions and the close: one rule with a diamond centred
   on it. An empty decorative div, hence aria-hidden in the markup. */
.sell-seam {
  position: relative;
  height: 1px;
  margin-top: var(--sp-16);
  background: color-mix(in srgb, var(--da-amber) 55%, transparent);
}
.sell-seam::after {
  content: "";
  position: absolute; left: 50%; top: -5px;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--da-amber);
}

.sell-finale { margin-top: var(--sp-16); text-align: center; }
.sell-finale .da-h2 { max-width: 22em; margin-inline: auto; }
.sell-finale .da-body { max-width: 46em; margin-inline: auto; }
.sell-finale .da-actions { justify-content: center; }
.sell-finale .da-note { color: var(--da-sec-muted); }
.sell-finale__second {
  display: block;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-6);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.sell-finale__tagline {
  margin: var(--sp-10) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--da-amber);
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1299px) {
  .sell-hero__grid { gap: var(--sp-8); }
  .sell-team { gap: var(--sp-10); }
  .sell-value { gap: var(--sp-8); }
  .sell-rail { gap: var(--sp-8); }
}

@media (max-width: 1199px) {
  /* The value band's third column is eight definition rows; at this width the
     three-up grid gives it about 300px and every row wraps to four lines. Two
     columns with the drivers spanning both is the readable arrangement. */
  .sell-value { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sell-value__col:last-child { grid-column: 1 / -1; }
  .sell-drivers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-10);
  }
  /* Four reasons plus an action do not fit on one row here. The action moves to
     its own full-width row and stops being a column. */
  .sell-why { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .sell-why > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sell-why__cta {
    grid-column: 1 / -1;
    padding-left: 0; border-left: 0;
    text-align: left;
    padding-top: var(--sp-6);
    border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .sell-why__cta .da-btn { width: auto; }
}

@media (max-width: 639px) {
  /* .da-btn goes full width at this step (da_system.css). The note then sits
     under a band-wide button, which is the right stacking for a phone. */
  .sell-value__action { gap: var(--sp-4); }
}

@media (max-width: 1099px) {
  .sell-hero__media { min-height: 480px; }
  .sell-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .sell-assure > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  /* Copy over figure: the hub is wide and the roles list is the argument. */
  .sell-team { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .sell-team__figure .da-dgm { max-width: 520px; }
  .sell-rail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  /* With one step per row the connector points at the step's own right margin,
     which says nothing. */
  .sell-step__line { display: none; }
  .sell-driver { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

@media (max-width: 899px) {
  .sell-hero { padding-top: var(--sp-8); }
  .sell-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sell-hero__text { padding-top: var(--sp-8); padding-bottom: 0; }
  .sell-hero__media { min-height: 340px; order: 2; margin-right: 0; }
  /* Full-width, so a left-edge fade would read as a defect rather than a blend. */
  .sell-hero__img {
    border-radius: var(--radius-card);
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* The gate turns horizontal: with the two sides stacked, a vertical bar between
     them would point along the reading direction instead of across it. */
  .sell-split, .sell-split--stretch { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .sell-split__col--end { text-align: left; }
  .sell-gate { flex-direction: row; padding: 0; }
  .sell-gate__bar { flex: 1 1 auto; width: auto; height: 1px; min-width: 40px; }
  .sell-value { grid-template-columns: minmax(0, 1fr); }
  .sell-drivers { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .sell-states { grid-template-columns: minmax(0, 1fr); }
  .sell-faq { columns: 1; }
  .sell-payoff-block, .sell-trow, .sell-finale { text-align: left; }
  .sell-payoff-block .da-body, .sell-finale .da-body, .sell-finale .da-h2 { margin-inline: 0; }
  .sell-payoff-block .da-actions, .sell-finale .da-actions { justify-content: stretch; }
  .sell-thead::before { display: none; }
}

@media (max-width: 639px) {
  .sell-assure { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-5); }
  .sell-assure > li { padding-inline: 0; }
  .sell-assure > li + li {
    border-left: 0;
    padding-top: var(--sp-4);
    border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .sell-why { grid-template-columns: minmax(0, 1fr); }
  .sell-why > * { padding-left: 0; border-left: 0; }
  .sell-why > * + * {
    padding-top: var(--sp-6);
    border-top: var(--border-hairline) solid var(--da-sec-hairline);
  }
  .sell-card, .sell-state { padding: var(--sp-5); }
  .sell-card--private { padding: var(--sp-3) var(--sp-5); }
  /* At 375px a 108px bar plus its label leaves the field name two words a line.
     The bar shrinks; the label is the part that carries the meaning. */
  .sell-redact { width: 56px; }
  .sell-role { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .sell-vmeta { grid-template-columns: minmax(0, 1fr); }
  .sell-disc { gap: var(--sp-4); }
}