/* Results: one figure, drawn as a confluence. The 18 law firms and litigation funders (the numeral
   and its 18 dots) each feed an equal stream; the streams gather into one ribbon that runs into the
   figure, 2,167,117 verified claims. Four claims rest on every stream at the same places, so no firm
   reads bigger than another. From 52.5rem of content width it reads left to right: 18, its column of
   dots, the streams, the figure. Narrower, 18 and its row of dots sit on top and the streams pour
   down into the figure. The markup is the final state, drawn without JavaScript by the static SVGs;
   results.js redraws it on a canvas fitted to the figure and plays it once.
   15 Oct 2026, James: the book value is already shown above, so it is gone; claims and firms are
   one figure; no dot legends. */

.res {
  --res-lit: #b7cbff;
  --res-claim: #d6e2ff;
  --res-cg: clamp(1rem, 2vw, 1.75rem);
}

/* Heading: the shared section head (shead.css). Its "high-volume" uses a non-breaking hyphen
   (U+2011, in Geist), so it never breaks at the hyphen and the heading can still balance. */

.res__fig { container-type: inline-size; }

/* Narrow first: [18][row of sources], then the figure and the sentence across the full width */
.res__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "k viz"
    "fg fg";
  column-gap: .75rem;
  row-gap: .5rem;
  align-items: start;
}

/* The 18: the figure's face at about 2.6 times the sentence. Geist's digits are centred in a .92
   line box (to within .015em), so .46em down the box is the middle of the digits; here that sits
   on the source row, 22px (1.375rem) down the drawing. */
.res__k {
  grid-area: k;
  margin: calc(1.375rem - .46em) 0 0;
  color: var(--paper);
  font-size: calc(var(--step-1) * 2.6);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .92;
  white-space: nowrap;
}

/* James (15 Oct 2026): "The 18 should specify 18 Law Firms". The label hangs under the numeral without
   changing its box, so the source row still meets the middle of the digits. */
.res__k { position: relative; }
.res__kl {
  position: absolute;
  top: 100%;
  left: .1em;
  margin-top: .75rem;
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.2;
  width: min-content; /* "Law" over "firms": no wider than the numeral, so it never reaches the dots */
  white-space: normal;
  color: rgb(255 255 255 / .62);
}

.res__viz {
  grid-area: viz;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 26rem;
  height: 11rem;
}
.res__cv,
.res__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.res__static { display: block; overflow: visible; }
.res__static--h { display: none; }
.res__lane {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.res__src,
.res__rest {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.res__src { stroke: var(--res-lit); }
.res__rest { stroke: var(--res-claim); }
.res__viz:not(.is-live) .res__cv { display: none; }
.res__viz.is-live .res__static { display: none; }

.res__fg { grid-area: fg; min-width: 0; }
/* The figure: the journey's headline figure (.beat__figure) face, weight and tracking */
.res__n {
  margin: 0;
  color: var(--paper);
  font-size: min(6rem, 21.5cqi);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .92;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res__v { display: inline-block; }
/* A zero-height mark on the figure's baseline: results.js aims the ribbon at the digits from it */
.res__bl {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
.res__l {
  margin: 1.125rem 0 0;
  max-width: 25ch;
  color: rgba(255, 255, 255, .64);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
.res__l b { color: var(--paper); font-weight: 400; font-variant-numeric: tabular-nums; }
.res__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Wide: 18, its column of sources, the streams, the figure, all on one centre line. The figure
   sits in the middle of the drawing's height (the 1fr rows either side), so the ribbon runs
   straight into the middle of the digits. The figure only grows from here (6rem, as narrow). */
@container (min-width: 52.5rem) {
  .res__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "k viz fg";
    column-gap: var(--res-cg);
    row-gap: 0;
    align-items: center;
  }
  .res__k { margin: 0 calc(.875rem - var(--res-cg)) 0 0; }
  .res__viz { max-width: none; height: clamp(15rem, 23cqi, 19.5rem); }
  .res__static--h { display: block; }
  .res__static--v { display: none; }
  .res__fg {
    align-self: stretch;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
  }
  .res__n { grid-row: 2; font-size: clamp(6rem, 9.6cqi, 8.25rem); }
  .res__l { grid-row: 3; align-self: start; margin-top: 1.25rem; }
}

.res__cta { margin-top: clamp(2.5rem, 5vw, 4rem); }
.res__cta .alink { min-height: 44px; align-items: center; }

/* Armed (JavaScript, motion allowed): the figure and its sentence wait hidden together (never a
   zero, never the sentence alone) and appear as the first claims reach the figure; the canvas
   draws the unlit streams until then. */
.res.is-armed :is(.res__v, .res__l) { transition: opacity .45s ease; }
.res.is-armed .res__fig:not(.is-on) :is(.res__v, .res__l) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .res :is(.res__v, .res__l) { transition: none !important; }
  .res.is-armed :is(.res__v, .res__l) { opacity: 1; }
}