/* /showcase/build-output: the "Show the output" candidate for /what-we-build.
   Layers on base.css, and on showcase.css for the shared company slide-in.

   The page is a specimen catalogue. Every capability is a plate: the real
   output first, drawn from the run, then its name, one sentence and the
   page that proves it. Plates sit in three groups, each headed by the
   question the owning team is already asking. Plates take the width their
   output needs, so the catalogue does not run as one equal grid.

   System rules carried from DESIGN.md, not restated there:
   - Teal is a fill or a rule, never type. Where a number or label needs the
     accent it takes --teal-deep.
   - Teal means confirmed or worth engaging, and nothing else. A bar is
     grey by default. Slate is ruled out or not found. Blue is changed.
   - No shadows, no gradients, nothing circular. The market is drawn in
     squares for the same reason the cards are rectangles.
   - Plex Mono only for figures that align and for dates. Captions and
     names are Plex Sans. */

/* ── utilities ───────────────────────────────────────────────────── */

.wo-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: rgba(47, 99, 218, 0.16); color: var(--ink); }

.wo-arrow { flex: none; transition: transform 160ms ease; }
.wo-num { font-variant-numeric: tabular-nums; }

/* Status pills, from the recorded component. */
.wo-pill {
  display: inline-block;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.wo-pill.is-yes { background: var(--pill-yes-bg); color: var(--teal-deep); }
.wo-pill.is-new { background: var(--pill-new-bg); color: var(--blue-deep); }
.wo-pill.is-none { background: var(--pill-none-bg); color: var(--muted); }

/* Legend squares. The market is plotted in squares, so the key is too. */
.wo-sq {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.wo-sq.is-engage { background: var(--teal); }
.wo-sq.is-rest { background: var(--slate); }
.wo-sq.is-named { background: var(--ink); }

/* ── hero ────────────────────────────────────────────────────────── */

.wo-hero { padding: 52px 0 72px; }

/* Copy and note share the left six columns; the map spans both rows on
   the right. Source order is copy, map, note, so a phone reads the
   headline, the actions and then the map, with the note after it. */
.wo-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 30px;
}
.wo-hero-copy { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
.wo-map { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: center; }
.wo-note { grid-column: 1 / span 6; grid-row: 2; align-self: start; }

/* Display section, set a step tighter so a six column measure holds each
   sentence in two lines. */
.wo-hero h1 {
  font-size: clamp(33px, 3.35vw, 48px);
  max-width: 13em;
}
.wo-hero h1 .line { display: block; }
.wo-hero h1 .line + .line { margin-top: 0.14em; }

.wo-lede {
  margin-top: 24px;
  max-width: 29em;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--body);
}
.wo-hero .actions { margin-top: 30px; }

.wo-note {
  padding-top: 16px;
  max-width: 33em;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* One column below 1000px. Twelve columns with 40px gaps need 440px of
   gap alone, which is wider than a phone. */
@media (max-width: 1000px) {
  .wo-hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .wo-hero-copy,
  .wo-map,
  .wo-note { grid-column: auto; grid-row: auto; }
}
/* On a phone the map has to begin inside the first screen, so the hero
   above it is tightened rather than reordered. */
@media (max-width: 700px) {
  .wo-hero { padding: 24px 0 48px; }
  .wo-hero .accent-rule { margin-bottom: 18px; }
  .wo-lede { margin-top: 16px; font-size: 17px; line-height: 1.58; }
  .wo-hero .actions { margin-top: 20px; gap: 10px; }
  .wo-hero .actions .btn-lg { font-size: 15.5px; padding: 12px 20px; }
  .wo-hero-grid { row-gap: 24px; }
}

/* ── the market map ──────────────────────────────────────────────── */

.wo-map {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.wo-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.wo-map-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wo-map-count { font-size: 13.5px; color: var(--muted); }

.wo-map-plot {
  position: relative;
  height: clamp(300px, 31vw, 430px);
}
@media (max-width: 1000px) { .wo-map-plot { height: clamp(290px, 56vw, 440px); } }

/* The plot box. Everything positioned inside it (grid, ticks, the fifteen
   marks and the canvas) reads fit and timing as percentages of this one
   box, so the drawn squares and the real links cannot drift apart. */
.wo-map-area {
  position: absolute;
  top: 20px;
  right: 22px;
  bottom: 40px;
  left: 50px;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* The marks stack by rank inside this box only, so none of them can
     rise above the sticky bar or the company slide-in. */
  isolation: isolate;
}

.wo-grid { position: absolute; pointer-events: none; }
.wo-grid-h { left: 0; right: 0; top: calc((100 - var(--p)) * 1%); border-top: 1px solid var(--track); }
.wo-grid-v { top: 0; bottom: 0; left: calc(var(--p) * 1%); border-left: 1px solid var(--track); }

.wo-tick {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1;
  pointer-events: none;
}
.wo-tick-x { top: 100%; left: calc(var(--p) * 1%); transform: translate(-50%, 9px); }
.wo-tick-y { right: 100%; top: calc((100 - var(--p)) * 1%); transform: translate(-9px, -50%); }

/* Axis titles sit clear of the tick labels: timing above the top of its
   axis, fit under the middle of its own. */
.wo-axis {
  position: absolute;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  line-height: 1;
}
.wo-axis-y { left: 50px; top: 4px; }
.wo-axis-x {
  left: calc(50px + (100% - 72px) / 2);
  bottom: 6px;
  transform: translateX(-50%);
}

/* The canvas overhangs the plot box by 6px at the sides and bottom, so a
   square on an edge is drawn whole, and by 22px at the top, which is where
   the label on the teal marks sits. wwb-output.js uses the same numbers. */
.wo-map-canvas {
  position: absolute;
  top: -22px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 28px);
  display: block;
}

.wo-marks { position: absolute; inset: 0; }

/* A 24px target around the square: the square is the mark, the box is
   what a pointer or a thumb has to find. */
.wo-mk {
  position: absolute;
  left: calc(var(--f) * 1%);
  top: calc((100 - var(--t)) * 1%);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  display: grid;
  place-items: center;
  border-radius: 5px;
}
.wo-mk::before {
  content: "";
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 2px solid var(--surface);
  border-radius: 3px;
  background: var(--ink);
  transition: transform 160ms ease, background-color 160ms ease;
}
.wo-mk:hover::before,
.wo-mk.is-hot::before { transform: scale(1.3); background: var(--blue-deep); }

.wo-tip {
  position: absolute;
  z-index: 120;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 260px;
  padding: 8px 11px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 120ms ease;
}
.wo-tip.on { opacity: 1; }
.wo-tip.is-below { transform: translate(-50%, 16px); }
.wo-tip b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wo-tip span { display: block; color: var(--dark-body); font-size: 12.5px; }
.wo-tip span.is-fig { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }

.wo-map-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 12px 18px 13px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--body);
}
.wo-key { display: inline-flex; align-items: center; gap: 8px; }
.wo-key-note { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }

/* ── the capability groups ───────────────────────────────────────── */

.wo-caps {
  background: var(--tint);
  border-top: 1px solid var(--rule);
}

.wo-group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px;
  padding: 60px 0 62px;
}
.wo-group + .wo-group { border-top: 1px solid var(--rule); }

/* The question stays in view while its plates scroll past it. */
.wo-group-head {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: 96px;
}
.wo-group-head h2 {
  font-size: clamp(28px, 2.45vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.026em;
  max-width: 11em;
}
.wo-team {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* An eight column field for the plates. Each plate takes the span its
   output needs, and none is stretched to match its neighbour. */
.wo-plates {
  grid-column: 5 / span 8;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.wo-plate.is-w8 { grid-column: span 8; }
.wo-plate.is-w5 { grid-column: span 5; }
.wo-plate.is-w4 { grid-column: span 4; }
.wo-plate.is-w3 { grid-column: span 3; }

@media (max-width: 1100px) {
  .wo-group { display: block; padding: 50px 0 52px; }
  .wo-group-head { position: static; margin-bottom: 26px; }
  .wo-group-head h2 { max-width: 20em; }
}
@media (max-width: 760px) {
  .wo-plates { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wo-plates > .wo-plate { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .wo-group { padding: 34px 0 36px; }
  .wo-group-head { margin-bottom: 20px; }
  .wo-team { margin-top: 10px; }
}

/* ── a plate ─────────────────────────────────────────────────────── */

/* The output comes first on screen and the heading first in the source,
   so a screen reader meets the name before the specimen it names. */
.wo-plate {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.wo-spec { order: -1; }

.wo-plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 18px 22px 0;
}
.wo-plate h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.22;
}

/* The one plate marked as the place to begin. Ink rather than teal: it
   is a recommendation, not a verified finding. */
.wo-start {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  color: var(--ink);
  white-space: nowrap;
}

.wo-cap {
  padding: 6px 22px 18px;
  max-width: 34em;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}

/* The plate's one link ends its caption. On a wide plate it takes its own
   line; on a phone it runs on after the sentence. */
.wo-go {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.wo-go:hover { color: var(--teal-deep); }
.wo-go:hover .wo-arrow { transform: translateX(3px); }

.wo-spec {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--rule);
}
.wo-spec-label {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 700px) {
  .wo-plate-head { padding: 14px 18px 0; }
  .wo-plate h3 { font-size: 20px; }
  .wo-cap { padding: 4px 18px 15px; font-size: 15px; }
  .wo-go { display: inline-flex; gap: 6px; margin: 0 0 0 2px; white-space: nowrap; font-size: 14.5px; }
  .wo-spec { padding: 14px 16px 15px; }
}

/* A wide plate with its output on the left and its words on the right. */
@media (min-width: 761px) {
  .wo-plate.is-side {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "spec head" "spec cap";
  }
  .wo-plate.is-side .wo-spec { grid-area: spec; border-bottom: 0; border-right: 1px solid var(--rule); }
  .wo-plate.is-side .wo-plate-head { grid-area: head; padding-top: 22px; }
  .wo-plate.is-side .wo-cap { grid-area: cap; }

  /* A wide plate with its output across the top and its words on one
     line underneath. */
  .wo-plate.is-foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "spec spec" "head cap";
    align-items: center;
  }
  .wo-plate.is-foot .wo-spec { grid-area: spec; }
  .wo-plate.is-foot .wo-plate-head { grid-area: head; padding: 16px 22px 18px; }
  .wo-plate.is-foot .wo-cap {
    grid-area: cap;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: none;
    padding: 16px 22px 18px 0;
  }
  .wo-plate.is-foot .wo-go { margin: 0; }
}

/* Column labels above a list of rows. Micro role. */
.wo-cols {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 90px 90px;
  gap: 12px;
  padding: 0 6px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wo-cols span:first-child { grid-column: 1 / span 2; }

/* ranked rows ── */
.wo-rank { list-style: none; }
.wo-rank li { border-top: 1px solid var(--rule); }
.wo-rank-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 90px 90px;
  gap: 12px;
  align-items: center;
  padding: 9px 6px;
  border-radius: 6px;
  transition: background-color 160ms ease;
}
.wo-rank-row:hover { background: var(--tint); }
@media (max-width: 440px) {
  .wo-cols,
  .wo-rank-row { grid-template-columns: 18px minmax(0, 1fr) 60px 60px; gap: 8px; }
  .wo-bar { grid-template-columns: minmax(0, 1fr) 24px; gap: 4px; }
}
.wo-rank-n {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--teal-deep);
}
.wo-rank-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

/* Scores are grey bars on the full 100. Grey is the default for a bar;
   teal is kept for what was confirmed or is worth engaging. */
.wo-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 6px;
  align-items: center;
}
.wo-bar i {
  position: relative;
  height: 6px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.wo-bar i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--v) * 1%);
  background: var(--muted);
}
.wo-bar b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* evidence rows, the recorded signature component in its stacked form:
   rows inside one card, divided by hairlines, the verdict in the pill. ── */
.wo-ev { padding: 2px 0 12px; }
.wo-ev + .wo-ev { padding: 12px 0 0; border-top: 1px solid var(--rule); }
.wo-ev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.wo-ev-kind {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wo-ev-claim {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.wo-ev-src {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* the buying group ── */
.wo-people { list-style: none; }
.wo-people li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
.wo-person b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.wo-person > span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.wo-conf {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wo-gap {
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}
.wo-gap .wo-pill { margin-right: 4px; }

/* the re-read, as a diff: the first read struck through, the second
   beside it ── */
.wo-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wo-read { padding-right: 26px; }
.wo-read.is-now { padding: 0 0 0 26px; border-left: 1px solid var(--rule); }
.wo-read-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}
.wo-date {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wo-read-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.wo-read-text del {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--muted);
}
@media (max-width: 760px) {
  .wo-diff { grid-template-columns: minmax(0, 1fr); }
  .wo-read { padding: 0 0 12px; }
  .wo-read.is-now { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* the one grouping that separated the market, at a scale the rest of the
   page does not use ── */
.wo-cut { margin: 0; }
.wo-big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 14px;
}
.wo-big b {
  font-family: var(--display);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wo-big > span:not(.wo-pill) {
  flex: 1 1 9em;
  max-width: 13em;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--body);
}
.wo-big .wo-pill { align-self: center; }

.wo-bars { list-style: none; }
.wo-bars li {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
}
.wo-bars.is-stacked li {
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-areas: "l l" "t v";
  gap: 4px 10px;
  padding: 5px 0;
}
.wo-bars.is-stacked .wo-bars-l { grid-area: l; }
.wo-bars.is-stacked .wo-bars-t { grid-area: t; }
.wo-bars.is-stacked .wo-bars-v { grid-area: v; }
.wo-bars-l {
  font-size: 13px;
  line-height: 1.35;
  color: var(--body);
}
.wo-bars-t {
  height: 8px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.wo-bars-t i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  background: var(--muted);
}
.wo-bars-v {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.wo-rejected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--body);
}
.wo-pub { margin: 0; }

/* one square per bank ── */
.wo-waffle { position: relative; }
.wo-waffle-canvas { display: none; width: 100%; height: 120px; }
.wo-live .wo-waffle-canvas { display: block; }
.wo-waffle-fallback {
  height: 10px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.wo-waffle-fallback i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  background: var(--teal);
}
.wo-live .wo-waffle-fallback { display: none; }

.wo-size {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.wo-size div { padding-top: 9px; border-top: 1px solid var(--rule); }
.wo-size dt {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.wo-size dt .wo-sq { margin-top: 4px; }
.wo-size dd {
  margin-top: 3px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ask the data ── */
.wo-ask-qs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.wo-ask-qs[hidden] { display: none; }
.wo-q {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: var(--body);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.wo-q:hover { border-color: var(--ink); }
.wo-q[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--tint);
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 900px) { .wo-q { min-height: 44px; } }

.wo-ask-static {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.wo-live .wo-ask-static { display: none; }

.wo-ask-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.wo-ask-n b {
  font-family: var(--display);
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wo-ask-n span { font-size: 13.5px; color: var(--muted); }
.wo-ask-named {
  margin-top: 7px;
  min-height: 3em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}
.wo-ask-rec {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--slate);
  text-underline-offset: 3px;
  cursor: pointer;
}
.wo-ask-rec:hover { text-decoration-color: var(--ink); }

/* ── where it lands ──────────────────────────────────────────────── */

.wo-lands h2 { max-width: 14em; }
.wo-lands-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 36px;
  margin-top: 40px;
  align-items: start;
}
.wo-land:first-child { grid-column: 1 / span 5; }
.wo-land:last-child { grid-column: 6 / span 7; }
.wo-land h3 { margin-bottom: 14px; max-width: 18em; }

/* The CRM record is pending a real capture, so the frame is dashed, the
   site's existing mark for something not yet there, and it lists only
   what the capture will show. No values: those would be a mock. */
.wo-slot {
  padding: 22px 24px 24px;
  border: 1px dashed var(--slate);
  border-radius: 12px;
}
.wo-slot-what {
  max-width: 24em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.wo-slot-fields { list-style: none; margin-top: 14px; }
.wo-slot-fields li {
  padding: 9px 0;
  border-top: 1px dashed var(--rule);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.wo-shot { margin: 0; }
.wo-shot-frame {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.wo-shot img { display: block; width: 100%; height: auto; }
.wo-shot figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.wo-shot figcaption span { max-width: 30em; }

@media (max-width: 900px) {
  .wo-lands-grid { grid-template-columns: minmax(0, 1fr); }
  .wo-land:first-child,
  .wo-land:last-child { grid-column: auto; }
}
/* On a phone the four fields sit on two lines instead of four rows. */
@media (max-width: 700px) {
  .wo-lands { padding: 50px 0 54px; }
  .wo-lands-grid { margin-top: 28px; row-gap: 30px; }
  .wo-slot { padding: 18px 18px 20px; }
  .wo-slot-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; }
  .wo-slot-fields li {
    padding: 4px 10px;
    border: 1px dashed var(--slate);
    border-radius: 5px;
    font-size: 14px;
  }
  .wo-shot figcaption { margin-top: 12px; }
}

/* ── close ───────────────────────────────────────────────────────── */

.wo-close-inner { text-align: center; }
.wo-close h2 { max-width: 14em; margin: 0 auto; }
.wo-close-lede {
  max-width: 30em;
  margin: 20px auto 0;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
}
.wo-close .actions { justify-content: center; }
@media (max-width: 700px) {
  .wo-close { padding: 50px 0 54px; }
  .wo-close-lede { margin-top: 16px; font-size: 17px; }
  .wo-close .actions { margin-top: 22px; gap: 10px; }
  .wo-close .actions .btn-lg { font-size: 15.5px; padding: 12px 20px; }
}