/* ════════════════════════════════════════════════════════════════════
   CELL 8 — WORDS FROM OWNERS → CONTACT
   ALL selectors scoped under #cell-8 (no leak into siblings). Ends with the
   contact block; the shared .site-footer follows FLUSH (base.css) — no footer
   here, no phantom gap (§4 #8).
   Authority: picks.json cell:8 + WOW_CONTRACTS cell:8 + section-08 board slice +
   DESIGN.md. Palette from tokens.css ONLY (base #222222 · accent #C2231B Signal
   Red · support #B7BCC1 Polished Steel · breath #E9E6E1 · ink-deep #141414).
   Radius 0 = machined edge everywhere. The stamped-steel register + corner
   bolts + sheen crawl match cells 2/3 (one shop floor).
   ════════════════════════════════════════════════════════════════════ */

#cell-8 {
  position: relative;
  overflow: clip;                         /* contain the marquee bleed + glows */
  isolation: isolate;
  /* a hair MORE bottom pad than top so the contact block seats cleanly onto the
     flush footer (the seam reads as intentional, T2.20) */
  padding-bottom: calc(var(--section-pad-y) * 0.95); /* R88c: more air before the convo section (David) */
}

/* shared tungsten worklight wash — its own layer, never on content (aliveness
   at rest, T2.33). A soft warm radial anchored upper-right, out of the reading
   columns. Presence raised so the shared idle opacity cycle moves felt luma. */
/* R88c: owners tungsten orange KILLED with the light flip. */
#cell-8 .owners__tungsten { display: none; }

#cell-8 .owners {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION HEAD — eyebrow (Plex Mono caps + steel hairline lead-in) over the
   H2 display-caps head. "WORDS" carries the one Signal Red word (H1A-red).
   ════════════════════════════════════════════════════════════════════ */
#cell-8 .owners__head { margin-bottom: var(--space-l); }
#cell-8 .owners__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  color: var(--stone-500);           /* muted-on-light (R88c white flip) */
  margin-bottom: var(--space-s);
}
#cell-8 .owners__eyebrow-rule {
  display: inline-block;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: var(--stone-500);
  flex: none;
}
#cell-8 .owners__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-section);
  line-height: 0.95;
  letter-spacing: 0.006em;
  color: var(--stone-700);           /* dark ink on the light field (R88c) */
}
#cell-8 .owners__title-accent { color: var(--accent); }   /* #C2231B — "Words" */

/* ════════════════════════════════════════════════════════════════════
   REVIEW MARQUEE — self-driving rail (js/cells/cell-8.js). Always drifting at
   rest; eases to a TRUE stop on hover (hover-capable + touch-guarded in JS).
   Edge fades feather the track into the charcoal ground (T2.19 — no hard edge).
   ════════════════════════════════════════════════════════════════════ */
#cell-8 .owners__marquee {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));   /* full-bleed the rail past the wrap */
  padding-block: var(--space-2xs);
  overflow: hidden;
}
/* edge fades — dissolve to the exact charcoal field, both ends */
#cell-8 .owners__marquee::before,
#cell-8 .owners__marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2.5rem, 8vw, 7rem);
  z-index: 3;
  pointer-events: none;
}
#cell-8 .owners__marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--marble-50) 0%, rgba(233,230,225,0) 100%);
}
#cell-8 .owners__marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--marble-50) 0%, rgba(233,230,225,0) 100%);
}

#cell-8 .owners__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-m);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}

/* ── ONE TESTIMONIAL PLATE — stamped steel, corner bolts, 0px machined edge.
   Content-fit height with a floor so the strip reads uniform (T2.2/T2.5). ── */
#cell-8 .review-plate {
  position: relative;
  flex: 0 0 auto;
  width: clamp(20rem, 27vw, 25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
  padding: 1.6rem 1.7rem 1.5rem;
  background:
    linear-gradient(157deg, #2b2b2b 0%, #232323 46%, #1c1c1c 100%);
  border: 1px solid #3a3a3a;
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 5px rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.35);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
/* the short verbatim ones (Jan / SadTrashDove) become a deliberate PULL-QUOTE
   plate — narrower, and the one-line quote enlarges + vertically centres so it
   FILLS the plate on purpose (T2.5 content-fit + T2.6 disciplined, not
   dead-space-swimming). The stars pin top, the cite pins bottom, the big quote
   owns the middle. Same plate height as the long ones so the strip reads
   uniform (T2.2). */
#cell-8 .review-plate--short { width: clamp(15rem, 19vw, 18rem); }
#cell-8 .review-plate--short .review-plate__quote {
  display: flex;
  align-items: center;
}
#cell-8 .review-plate--short .review-plate__quote p {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.02;
  letter-spacing: 0.004em;
  color: var(--breath);
}
/* in a pull-quote the whole line already carries weight — dial the red-glow
   word back to a plain accent so it doesn't shout (T2.23 sizing to context) */
#cell-8 .review-plate--short .review-plate__hot { color: var(--terracotta-soft); font-weight: 700; }

/* P3 row 10 — STACK: two small reviews share ONE marquee slot (Russell lead over
   Jen S. mini) — David's "two reviews in the place of one". One plate wide; the
   rail's align-items:stretch makes it the same height as the big single plates,
   and the two inner plates split that height (lead a little bigger — "doesn't
   have to be a perfect 50-50"). */
#cell-8 .review-stack {
  flex: 0 0 auto;
  width: clamp(20rem, 27vw, 25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
/* natural (content-fit) heights — NOT a rigid flex-split, which clipped the
   lead plate's cite. Both plates run compact so the two seat inside one slot at
   about the height of a single big plate (the rail's stretch then keeps parity). */
#cell-8 .review-stack .review-plate { width: 100%; flex: 0 0 auto; }
#cell-8 .review-stack .review-plate--lead {
  flex: 1 1 auto;                    /* lead takes the extra when the rail stretches */
  padding: 1.3rem 1.5rem 1.2rem;
  gap: var(--space-xs);
}
#cell-8 .review-stack .review-plate--lead .review-plate__quote p { font-size: 0.98rem; line-height: 1.44; }
#cell-8 .review-stack .review-plate--lead .review-plate__star { width: 1.15rem; height: 1.15rem; }
#cell-8 .review-stack .review-plate--mini {
  padding: 1.1rem 1.4rem 1rem;       /* compact — the smaller of the two */
  gap: var(--space-xs);
}
#cell-8 .review-stack .review-plate--mini .review-plate__star { width: 1.05rem; height: 1.05rem; }
#cell-8 .review-stack .review-plate--mini .review-plate__quote p { font-size: 0.92rem; line-height: 1.42; }

/* corner bolts — machined screw heads, echo the board's plate fixings */
#cell-8 .review-plate__bolt {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6d7075 0%, #3f4144 55%, #232427 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04);
}
#cell-8 .review-plate__bolt--tl { top: 8px; left: 8px; }
#cell-8 .review-plate__bolt--tr { top: 8px; right: 8px; }
#cell-8 .review-plate__bolt--bl { bottom: 8px; left: 8px; }
#cell-8 .review-plate__bolt--br { bottom: 8px; right: 8px; }

/* stars — solid red plate tiles with a punched-out star (the board's exact
   motif: red square, white star). Drawn with clip-path so it's a real star,
   never a font glyph. */
#cell-8 .review-plate__stars {
  display: flex;
  gap: 5px;
}
#cell-8 .review-plate__star {
  width: 1.35rem;
  height: 1.35rem;
  background: var(--accent);           /* #C2231B red tile */
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  position: relative;
}
#cell-8 .review-plate__star::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* the quote — Plex Sans, honest steel-white body; measured for the plate */
#cell-8 .review-plate__quote { flex: 1 1 auto; }
#cell-8 .review-plate__quote p {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  line-height: 1.5;
  color: var(--text-on-dark);        /* Primer Gray #E9E6E1 */
}
/* the belief-word carries the red glow (WOW contract): red type over a soft
   pre-rendered red halo (::after, opacity only — NEVER an animated blur). */
#cell-8 .review-plate__hot {
  position: relative;
  color: var(--terracotta-soft);     /* #d35a53 — readable red on charcoal (large) */
  font-weight: 500;
}
#cell-8 .review-plate__hot::after {
  content: "";
  position: absolute;
  inset: -0.4em -0.55em;
  z-index: -1;
  /* committed halo — reads as a red-hot glow behind the words, not a smudge
     (T2.23 ornaments commit or die). Opacity only, pre-rendered, never animated. */
  background: radial-gradient(58% 130% at 50% 50%,
    rgba(194, 35, 27, 0.42) 0%,
    rgba(194, 35, 27, 0.16) 46%,
    rgba(194, 35, 27, 0.00) 74%);
  pointer-events: none;
}

/* attribution — mono, steel-tinted; name and vehicle SAME size (anti-fail #5 —
   kill the Lane-A step-ladder). The vehicle line ALWAYS takes its own row so
   every plate wraps identically no matter the car-name length (T2.2 sibling
   parity / T2.13 no incidental wraps — a long name like the '37 Chrysler
   Imperial Roadster must not orphan a second line while shorter peers sit on
   one). The dot is a same-row separator only, so it is suppressed here. */
/* P3 row 10 — David's ask: the vehicle sits OPPOSITE the name, right-aligned on
   the SAME line as the name (not stacked on its own row), so the cite baseline is
   consistent whether or not a plate names a car (Jen S. / Jan / SadTrashDove have
   none → their name simply sits alone, left). A long car name wraps gracefully to
   a right-aligned second line rather than orphaning the whole row. */
#cell-8 .review-plate__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  row-gap: 0.3rem;
  column-gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--support);
  padding-top: 0.85rem;
  border-top: 1px solid var(--ink-700);
}
#cell-8 .review-plate__name { color: var(--breath); }
#cell-8 .review-plate__dot { display: none; }
#cell-8 .review-plate__car { color: var(--support); margin-left: auto; text-align: right; }

/* ACTIVE-CARD RED OUTLINE (WOW contract) — the hovered/focused plate gets a
   red machined edge + a lifted stamped drop. hover-capable only. */
@media (hover: hover) {
  #cell-8 .review-plate:hover {
    border-color: var(--accent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -2px 5px rgba(0,0,0,0.45),
      0 0 0 1px rgba(194,35,27,0.55),
      0 3px 0 rgba(0,0,0,0.4);
  }
}
/* keyboard parity — the marquee is focusable content; give focus the red edge */
#cell-8 .review-plate:focus-within {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(194,35,27,0.55),
    0 3px 0 rgba(0,0,0,0.4);
}

/* ════════════════════════════════════════════════════════════════════
   SEAM — one tuned hairline between the belief run and the ask (T2.20).
   ════════════════════════════════════════════════════════════════════ */
#cell-8 .owners__seam {
  height: 1px;
  margin-block: var(--space-l);
  background: linear-gradient(to right,
    rgba(183,188,193,0) 0%,
    rgba(183,188,193,0.28) 14%,
    rgba(183,188,193,0.28) 86%,
    rgba(183,188,193,0) 100%);
}

/* ════════════════════════════════════════════════════════════════════
   START THE CONVERSATION — copy left / stamped work-order form right.
   ════════════════════════════════════════════════════════════════════ */
#cell-convo .convo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ── LEFT: the ask ── */
#cell-convo .convo__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-section);
  line-height: 0.95;
  letter-spacing: 0.006em;
  color: var(--breath);              /* bone on ink — convo stays dark (R88c) */
}
#cell-convo .convo__lede {
  margin-top: var(--space-m);
  max-width: 30rem;
  font-size: var(--step-mini);
  line-height: 1.55;
  color: var(--text-on-dark);
}
/* the private pick-up gem — its own line, quietly lifted (a real logistics
   differentiator, T2.14). Steel-white, mono-adjacent weight. */
#cell-convo .convo__gem {
  display: block;
  margin-top: 0.75rem;
  font-weight: 500;
  color: var(--breath);
}

/* CTA plates — CALL (red license plate) + GHOST (brushed-steel). Corner bolts,
   0px edge, pressed-steel drop; plate-press on hover (scale-not-shift ≤150ms). */
#cell-convo .convo__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
/* P3 row 11 — the relocated "documented builds" credential: a quiet mono line
   directly under the CALL plate (the number gets a subtle steel-white lift),
   replacing the removed standalone closing odometer bookend. */
#cell-convo .convo__builds {
  margin-top: var(--space-s);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
}
#cell-convo .convo__builds-num { color: var(--breath); font-weight: 500; }
#cell-convo .convo__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out),
              background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
/* corner bolts shared by all plates in this cell */
#cell-convo .convo__plate-bolt,
#cell-convo .convo__submit-bolt {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
#cell-convo .convo__plate-bolt--tl, #cell-convo .convo__submit-bolt--tl { top: 6px; left: 6px; }
#cell-convo .convo__plate-bolt--tr, #cell-convo .convo__submit-bolt--tr { top: 6px; right: 6px; }
#cell-convo .convo__plate-bolt--bl, #cell-convo .convo__submit-bolt--bl { bottom: 6px; left: 6px; }
#cell-convo .convo__plate-bolt--br, #cell-convo .convo__submit-bolt--br { bottom: 6px; right: 6px; }

/* CALL — the red plate. Kicker (mono) over the big display number. */
#cell-convo .convo__plate--call {
  background: linear-gradient(to bottom, #d1291f 0%, #b81f16 52%, #a51a12 100%);
  color: #fff;
  box-shadow: 0 3px 0 var(--terracotta-deep);
  border: 1px solid #7d140e;
}
#cell-convo .convo__plate-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
#cell-convo .convo__plate-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* GHOST — brushed-steel hairline plate, single centered label */
#cell-convo .convo__plate--ghost {
  align-items: flex-start;
  justify-content: center;
  color: var(--breath);
  background: rgba(20,20,20,0.4);
  border: 1px solid var(--support);
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
#cell-convo .convo__plate-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (hover: hover) {
  #cell-convo .convo__plate--call:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 1px 0 var(--terracotta-deep);
  }
  #cell-convo .convo__plate--ghost:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4);
    border-color: var(--breath);
    background: rgba(20,20,20,0.55);
  }
}

/* contact meta — mono spec register; email de-emphasized (legacy inbox) */
#cell-convo .convo__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: var(--space-l);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--support);
}
#cell-convo .convo__meta-line--strong { color: var(--breath); }
#cell-convo .convo__meta-line--muted { text-transform: none; letter-spacing: 0.02em; }
#cell-convo .convo__meta-line--muted a { color: var(--slate-500); transition: color var(--dur-fast) var(--ease-out); }
#cell-convo .convo__meta-line--muted a:hover { color: var(--support); }

/* ── RIGHT: the STAMPED WORK-ORDER intake form ── */
#cell-convo .convo__form {
  position: relative;
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  background: linear-gradient(160deg, #262626 0%, #1e1e1e 100%);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 0 rgba(0,0,0,0.35);
}
/* the work-order header row — a real intake form's masthead */
#cell-convo .convo__form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  padding-bottom: 0.9rem;
  margin-bottom: var(--space-m);
  border-bottom: 1px dashed var(--ink-700);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#cell-convo .convo__form-tag { color: var(--accent); font-weight: 500; }
#cell-convo .convo__form-no { color: var(--slate-500); }

#cell-convo .convo__field { margin-bottom: var(--space-m); }
#cell-convo .convo__ymm { border: none; margin-bottom: var(--space-m); padding: 0; }
#cell-convo .convo__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--support);
}

/* inputs / selects / textarea — machined steel wells, 0px edge, red focus.
   Placeholder = tile placeholder gray. */
#cell-convo .convo__input,
#cell-convo .convo__select,
#cell-convo .convo__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--breath);
  background: #191919;
  border: 1px solid var(--slate-600);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
#cell-convo .convo__textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
#cell-convo .convo__input::placeholder,
#cell-convo .convo__textarea::placeholder { color: var(--slate-500); }
#cell-convo .convo__input:focus,
#cell-convo .convo__select:focus,
#cell-convo .convo__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(194,35,27,0.4);
}

/* YEAR / MAKE / MODEL row — three equal steel wells (T2.2 sibling parity) */
#cell-convo .convo__ymm-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
#cell-convo .convo__select-wrap { position: relative; }
/* mono chevron drawn in CSS (no icon font) */
#cell-convo .convo__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}
#cell-convo .convo__select-arrow {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid var(--support);
  border-bottom: 1.5px solid var(--support);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* SUBMIT — red stamped-steel plate, corner bolts, plate-press hover */
#cell-convo .convo__submit {
  position: relative;
  width: 100%;
  margin-top: var(--space-xs);
  padding: 1rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, #d1291f 0%, #b81f16 52%, #a51a12 100%);
  border: 1px solid #7d140e;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--terracotta-deep);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
@media (hover: hover) {
  #cell-convo .convo__submit:hover {
    transform: translateY(2px) scale(1.005);
    box-shadow: 0 1px 0 var(--terracotta-deep);
  }
}
#cell-convo .convo__submit:active { transform: translateY(3px); box-shadow: 0 0 0 var(--terracotta-deep); }
/* confirmed state (JS toggles) — a stamped ACK, honest step-two, no fake claim */
#cell-convo .convo__submit.is-sent {
  background: linear-gradient(to bottom, #2f2f2f 0%, #232323 100%);
  border-color: var(--accent);
  color: var(--breath);
}
#cell-convo .convo__form-note {
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--slate-400);
}

/* ════════════════════════════════════════════════════════════════════
   CLOSING ODOMETER BOOKEND — the site opens (cell 1) + closes on the same
   machine. "BUILDS DELIVERED" rolls up on scroll-in; true value at t0.
   ════════════════════════════════════════════════════════════════════ */
#cell-8 .owners__bookend {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: calc(var(--section-pad-y) * 0.62);
}
#cell-8 .owners__bookend-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, rgba(58,58,58,0), var(--ink-700), rgba(58,58,58,0));
}
#cell-8 .owners__odo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}
#cell-8 .owners__odo-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
}
#cell-8 .owners__odo-digits { display: inline-flex; align-items: center; gap: 4px; }
/* one boxed steel digit cell — the exact odometer language as cell 1 */
#cell-8 .owners__odo-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  height: 1.55em;
  padding: 0 0.18em;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--breath);
  background: linear-gradient(to bottom, #2f2f2f 0%, #1a1a1a 52%, #262626 100%);
  border: 1px solid #3f3f3f;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 3px rgba(0,0,0,0.5);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
#cell-8 .owners__odo-flap { display: inline-block; will-change: transform, opacity; }
/* no-JS floor — paint the true value as plain mono if the JS never builds cells */
html:not(.js) #cell-8 .owners__odo-digits::before {
  content: attr(data-fallback);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--breath);
  font-variant-numeric: tabular-nums;
}
#cell-8 .owners__odo-label {
  font-family: var(--font-body);
  font-size: clamp(0.66rem, 0.9vw, 0.76rem);
  letter-spacing: 0.06em;
  color: var(--slate-400);
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile is desktop RECOMPOSED, not squished (T2.31).
   ════════════════════════════════════════════════════════════════════ */

/* tablet: form drops under the copy (reading order: ask, then act) */
@media (max-width: 900px) {
  #cell-convo .convo {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  #cell-convo .convo__lede { max-width: 46ch; }
}

/* mobile: tighten plates, stack CTAs full-width, keep the marquee alive */
@media (max-width: 620px) {
  #cell-8 .review-plate { width: min(80vw, 20rem); }
  #cell-8 .review-plate--short { width: min(66vw, 16rem); }
  #cell-convo .convo__cta { gap: 0.6rem; }
  #cell-convo .convo__plate { flex: 1 1 auto; }
  #cell-convo .convo__ymm-row { grid-template-columns: 1fr 1fr; }
  #cell-convo .convo__ymm-row .convo__select-wrap:last-child { grid-column: 1 / -1; }
  #cell-8 .owners__bookend { gap: var(--space-s); }
  #cell-8 .owners__odo-label { max-width: 14ch; }
}

/* ════════════════════════════════════════════════════════════════════
   CELL CONVO (R88c) — the conversation starter in its own ink section.
   ════════════════════════════════════════════════════════════════════ */
#cell-convo {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--section-pad-y) * 0.9);
  padding-bottom: calc(var(--section-pad-y) * 0.82); /* footer seam (T2.20) */
}