/* seraiq.io: the data pages (JP 2026-10-21, revised 2026-10-22; plan parts 5 and 6, the design pass): the box
   ("Screen the market for your raise"), Private capital by state (the night map), the state, class and
   state-and-class pages. Loaded after site.css, only on a page that draws them (scripts/site_build.py --data-pages), so site.css and every other page
   stay as they are. Navy and gold tokens from site.css, plus the night map's ramp. One orchestrated moment per page,
   transform and opacity only (the state's outline draws on stroke-dashoffset, as the plan says), every motion behind
   prefers-reduced-motion, every page whole without script. The box has a FIXED height at every width: a
   pick fills the same box and nothing below it moves. */
:root {
  --nm-0: #1a3050; --nm-1: #3d5673; --nm-2: #6b6a4f; --nm-3: #a2843a; --nm-4: #d9b24c;
  --nm-edge: #5a7190;   /* every state's border: 3.2:1 on the band, so the dim steps still read as shapes */
  --tb-h: 46rem;        /* the box, one column from 720px: its head and ten two-line rows, every glyph whole (the
                           close is outside it); the media rules below set the other widths */
}

/* ---------------------------------------------------------------- the navy hero of a data page */
.s-dh { position: relative; color: var(--on-ink); padding-top: calc(var(--sec) * .7); padding-bottom: calc(var(--sec) * .8);
  background:
    radial-gradient(55% 60% at 78% 45%, rgba(184, 145, 47, .16), rgba(184, 145, 47, 0) 70%),
    radial-gradient(70% 60% at 60% 70%, rgba(80, 116, 160, .18), rgba(80, 116, 160, 0) 70%),
    var(--grain), var(--band); }
.s-dh .crumbs { font-size: var(--t-14); color: var(--on-ink-soft); margin-bottom: 18px; }
.s-dh .crumbs a { color: var(--on-ink-soft); text-decoration-color: rgba(232, 238, 244, .35); }
.s-dh .crumbs a:hover { color: #fff; text-decoration-color: var(--gold); }
.s-dh h1 { color: #fff; font-size: var(--t-44); max-width: 20ch; margin-bottom: 18px; }
.dh-grid { display: grid; gap: 28px; align-items: center; }
.dh-fig { margin: 4px 0 0 !important; }
.dh-fig b { display: block; font: 600 var(--t-64)/1 var(--serif); color: #fff; letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums; }
.s .dh-sub { color: var(--on-ink); font-size: var(--t-20); line-height: 1.5; max-width: 46ch; margin-top: 14px; }
.s .dh-asof { color: var(--on-ink-soft); font-size: var(--t-14); margin-top: 16px; display: flex; gap: 10px;
  align-items: center; }
.dh-asof::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px rgba(184, 145, 47, .18); }
.dh-art { justify-self: center; width: min(100%, 420px); }
.dh-art.dh-none { display: none; }
@media (min-width: 1000px) {
  .dh-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .dh-art { justify-self: end; }
}
/* the state alone, lit: its neighbours dim at the edge */
.sl { width: 100%; height: auto; display: block; overflow: hidden; }
.sl .sl-nb { fill: rgba(31, 58, 92, .55); stroke: rgba(90, 113, 144, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl .sl-me { fill: var(--nm-4); fill-opacity: .92; stroke: #f4dc93; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; filter: drop-shadow(0 0 18px rgba(217, 178, 76, .35)); }

/* ---------------------------------------------------------------- the night map */
.s-map .dh-sub { max-width: 60ch; }
.nm { width: 100%; height: auto; display: block; overflow: visible; }
.nm .nm-s { stroke: var(--nm-edge); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 50% 50%; transition: transform 160ms ease-out, filter 160ms ease-out; }
.nm-r0 { fill: var(--nm-0); stroke-dasharray: 3 2; } .nm-r1 { fill: var(--nm-1); } .nm-r2 { fill: var(--nm-2); }
.nm-r3 { fill: var(--nm-3); } .nm-r4 { fill: var(--nm-4); }
.nm a { outline: none; }
.nm a:hover .nm-s, .nm a:focus-visible .nm-s { transform: translateY(-2px); stroke: #fff; stroke-width: 1.5;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.nm a.pc-sel .nm-s { stroke: #fff; stroke-width: 2.5; }
.nm-key { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px; font-size: var(--t-13); color: var(--on-ink-soft); max-width: 640px; }
.nm-key li { display: grid; gap: 6px; line-height: 1.3; }
.nm-key i { display: block; height: 10px; border-radius: 2px; border: 1px solid var(--nm-edge); }
.nm-key i.nm-r0 { background: var(--nm-0); } .nm-key i.nm-r1 { background: var(--nm-1); }
.nm-key i.nm-r2 { background: var(--nm-2); } .nm-key i.nm-r3 { background: var(--nm-3); }
.nm-key i.nm-r4 { background: var(--nm-4); }
.nm-tag { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; background: #fff; color: var(--ink);
  font: 650 var(--t-13)/1.3 var(--sans); padding: 6px 10px; border-radius: var(--r-chip); white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55); border-top: 2px solid var(--gold); }
.nm-tag[hidden] { display: none; }
/* a class page's map on paper: the night panel */
.nm-paper { background: var(--grain), var(--band); border-radius: var(--r-frame); padding: clamp(14px, 3vw, 28px);
  box-shadow: var(--sh-frame); margin-top: 6px; }
.pc-stage { position: relative; margin-top: 30px; }
.pc-mapcol { position: relative; }
.s .pc-hint { font-size: var(--t-17); color: var(--on-ink); margin-top: 18px; max-width: 34ch;
  border-left: 3px solid var(--gold); padding-left: 16px; }
.pc-open .pc-hint { display: none; }
.pc-drawer { position: relative; margin-top: 18px; background: #fff; color: var(--ink); border-top: 3px solid var(--gold);
  border-radius: var(--r-frame); box-shadow: var(--sh-deep); padding: 20px 22px 22px; z-index: 5; }
.pc-drawer[hidden] { display: none; }
.pc-drawer:focus { outline: none; }
.pc-drawer .pc-dh { font-size: var(--t-25); margin: 0 0 8px; padding-right: 70px; color: var(--ink); }
.s .pc-dfig { font-size: var(--t-14); color: var(--ink-soft); line-height: 1.5; max-width: none; }
.pc-dfig b { display: block; font: 600 var(--t-32)/1.15 var(--serif); color: var(--ink); margin-bottom: 4px;
  font-variant-numeric: tabular-nums; }
.pc-drawer h3 { font-size: var(--t-14); font-family: var(--sans); font-weight: 650; color: var(--muted);
  margin: 18px 0 6px; letter-spacing: .01em; }
.pc-dp { list-style: none; padding: 0; margin: 0; font-size: var(--t-14); }
.pc-dp { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-dp a { display: inline-block; border: 1px solid var(--rule-strong); border-radius: var(--r-chip); padding: 4px 10px;
  text-decoration: none; font-weight: 600; font-size: var(--t-13); }
.pc-dp a:hover { border-color: var(--gold); }
.pc-drawer .pc-open { margin-top: 18px; }
.pc-x { position: absolute; top: 14px; right: 14px; font: 600 var(--t-13)/1 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r-chip); padding: 7px 10px; cursor: pointer; }
.pc-x:hover { border-color: var(--gold); }
@media (min-width: 1000px) {
  /* the map beside its side panel: the hint until a state is chosen, then the drawer in its place */
  .pc-stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 36px; align-items: start; }
  .pc-side { position: sticky; top: calc(var(--bar-h) + 16px); }
  .s .pc-hint { margin-top: 0; }
  .pc-drawer { margin-top: 0; max-height: calc(100vh - var(--bar-h) - 32px); overflow: auto; }
}

/* ---------------------------------------------------------------- figures on paper */
.s-pc h2 { font-size: var(--t-32); margin: 52px 0 16px; max-width: none; }
.s-pc .wrap > h2:first-child, .s-pc .pf-row + h2 { margin-top: 44px; }
/* the secondary figures: one typographic row, a gold hairline between, no boxes */
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.pf { padding: 16px 0; border-top: 1px solid var(--gold-line); }
.pf:first-child { border-top: 0; }
.pf dt { font-size: var(--t-14); color: var(--muted); font-weight: 600; }
.pf-v { margin: 2px 0 0; font: 600 var(--t-32)/1.15 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pf-s { margin: 4px 0 0; font-size: var(--t-14); color: var(--ink-soft); max-width: 38ch; line-height: 1.45; }
@media (min-width: 760px) {
  .pf-row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pf { border-top: 0; border-left: 1px solid var(--gold-line); padding: 4px 28px; }
  .pf:first-child { border-left: 0; padding-left: 0; }
}
/* the year in bars */
.mbars { margin: 6px 0 0; }
.mbars svg { width: 100%; max-width: 900px; height: auto; display: block; overflow: visible; }
.mbars .mb { transform-box: fill-box; transform-origin: 50% 100%; }
.mbars .mb-prev { fill: var(--rule-strong); }
.mbars .mb-cur { fill: var(--ink-2); }
.mbars .mb-new { fill: var(--gold); }
.mbars .mb-held { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; }
.mbars .mb-base { stroke: var(--rule-strong); stroke-width: 1; }
.mbars .mb-axis { font: 500 11px var(--sans); fill: var(--muted); }
.mbars figcaption, .sbar figcaption { font-size: var(--t-13); color: var(--muted); margin-top: 10px; max-width: var(--measure); }
/* where it went: one stacked bar */
.sbar { margin: 6px 0 0; }
.sbar svg { width: 100%; height: 50px; display: block; border-radius: var(--r-chip); overflow: hidden; }
.sbar rect { transform-box: fill-box; transform-origin: 0 50%; }
.sbar { position: relative; container-type: inline-size; }
.sbar .sb-l { position: absolute; top: 0; height: 50px; display: flex; align-items: center; justify-content: center;
  font: 650 var(--t-14)/1.2 var(--sans); color: #fff; text-align: center; overflow: hidden; white-space: nowrap;
  pointer-events: none; padding: 0 6px; }
.sbar .sb-l.sb-dark { color: var(--ink); }
@container (max-width: 560px) { .sbar .sb-l { display: none; } }
.sb-keys { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px 24px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); font-size: var(--t-14); }
.sb-keys li { display: flex; align-items: baseline; gap: 8px; }
.sb-keys i { width: 12px; height: 12px; border-radius: 2px; flex: none; transform: translateY(1px); }
.sb-keys b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sb-keys span { color: var(--muted); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
/* where it went as a list (JP 2026-10-22): each class and its figure as printed, in order only where the printed
   figures give it; a group they do not order sits together behind a gold rule, A to Z, and says so */
.wl-fig { margin: 6px 0 0; max-width: 760px; }
.wl, .wl ul { list-style: none; padding: 0; margin: 0; }
.wl { border-top: 1px solid var(--rule-strong); }
.wl > li { border-bottom: 1px solid var(--rule); }
.wl-r { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; }
.wl-n { display: flex; flex-direction: column; gap: 1px; font-weight: 600; font-size: var(--t-17); min-width: 0; }
.wl-n a { text-decoration-color: var(--rule-strong); }
.wl-n a:hover { text-decoration-color: var(--gold); }
.wl-c { font-size: var(--t-13); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.wl-v { font: 600 var(--t-20)/1.2 var(--serif); color: var(--ink); text-align: right; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; }
.wl-v .fb-range { font-size: .85em; }
.wl-g { border-left: 3px solid var(--gold); padding-left: 14px; margin: 4px 0; }
.wl-g ul > li + li { border-top: 1px dashed var(--rule); }
.s .wl-why, .s .rk-why { font-size: var(--t-13); color: var(--muted); margin: 0 0 9px; font-weight: 600; }
.s .wl-held { font-size: var(--t-14); color: var(--ink-soft); margin-top: 14px; max-width: var(--measure); }
.wl-fig figcaption, .s .rk-cap { font-size: var(--t-13); color: var(--muted); margin-top: 10px; max-width: var(--measure); }
/* the drawer's leading classes: the same list, small */
.wl-sm { font-size: var(--t-14); border-top: 0; }
.wl-sm .wl-r { padding: 6px 0; }
.wl-sm .wl-n { font-size: var(--t-14); }
.wl-sm .wl-v { font: 650 var(--t-14)/1.3 var(--sans); }
.wl-sm .wl-g { padding-left: 10px; }
.s .wl-sm .wl-why, .wl-sm .wl-why { margin: 0 0 6px; font-size: 12px; }
@media (max-width: 480px) {
  .wl-n { font-size: var(--t-14); }
  .wl-v { font-size: var(--t-17); white-space: normal; }
}
.s .sb-note { font-size: var(--t-14); color: var(--ink-soft); margin-top: 12px; }
.sb-table { margin-top: 14px; font-size: var(--t-14); }
.sb-table summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
/* ranked bars: a class's leading states, a pair's firms by raise size */
.rk { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 760px; }
.rk .rk-r { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto; gap: 14px; align-items: center;
  font-size: var(--t-14); }
/* a class's leading states: every row the same geometry (a fixed figure column, and a single row set in as far as
   a group's rows), so every bar is drawn on one scale */
.rk:not(.rk-plain) .rk-r { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 8.5rem; }
.rk:not(.rk-plain) > .rk-r { border-left: 3px solid transparent; padding-left: 12px; }
.rk .rk-bar { position: relative; display: block; height: 14px; background: var(--vellum); border-radius: 2px; overflow: hidden; }
.rk .rk-bar i { display: block; height: 100%; background: var(--ink-2); transform-origin: 0 50%; transform: scaleX(var(--v)); }
/* a range: solid to its low edge, a soft blur from there to its high edge (the bar says no more than the words) */
.rk .rk-rg { position: absolute; top: 0; bottom: 0; left: calc(var(--v) * 100%); width: calc((var(--hi) - var(--v)) * 100%);
  background: repeating-linear-gradient(135deg, rgba(61, 86, 115, .5) 0 3px, rgba(61, 86, 115, .22) 3px 6px); }
.rk > .rk-r:first-child .rk-bar i { background: var(--gold); }
.rk > .rk-r:first-child .rk-rg { background: repeating-linear-gradient(135deg, rgba(184, 145, 47, .6) 0 3px,
  rgba(184, 145, 47, .25) 3px 6px); }
/* states the printed figures do not order: together behind a gold rule, A to Z, saying so */
.rk-g { border-left: 3px solid var(--gold); padding-left: 12px; }
.rk-g ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rk-g .rk-why { margin: 6px 0 0; }
/* the firms by raise size: one colour (a ranked list's leader is gold; sizes are not ranked) */
.rk-plain > .rk-r:first-child .rk-bar i { background: var(--ink-2); }
.rk b { font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }
.pc-table { width: 100%; border-collapse: collapse; font-size: var(--t-14); margin-top: 6px; }
.pc-table th, .pc-table td { text-align: left; padding: 9px 8px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pc-table thead th { font-size: var(--t-13); color: var(--muted); font-weight: 650; border-bottom-color: var(--rule-strong); }
.pc-table td { font-variant-numeric: tabular-nums; }
.pc-table tbody th { font-weight: 600; }
.pc-classes, .pc-pairs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-classes a { display: inline-block; border: 1px solid var(--rule-strong); border-radius: var(--r-chip);
  padding: 6px 12px; font-size: var(--t-14); font-weight: 600; text-decoration: none; background: #fff; }
.pc-classes a:hover { border-color: var(--gold); }
/* a state's firm counts by class (JP 2026-10-22): links without script, buttons with it that choose the class in
   the box; the one the box shows is pressed (a gold edge) */
.pc-chip { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--rule-strong);
  border-radius: var(--r-chip); background: #fff; color: var(--ink); padding: 8px 12px; min-height: 40px;
  font: 600 var(--t-14)/1.3 var(--sans); text-decoration: none; text-align: left; }
.pc-chip b { font-size: var(--t-13); color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.pc-chip { cursor: pointer; }
a.pc-chip:hover, button.pc-chip:hover { border-color: var(--gold); }
button.pc-chip[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
button.pc-chip[aria-pressed="true"] b { color: var(--gold-ink); }
@media (max-width: 719px) {
  .pc-pairs { gap: 6px; }
  .pc-chip { padding: 6px 10px; min-height: 36px; font-size: var(--t-13); gap: 6px; }
  /* a phone shows the first six chips; the button (shown by tryraise.js) shows the rest in place */
  .pc-pairs.pc-folded > .pc-more { display: none; }
}
.s .pc-all-p { margin: 12px 0 0; }
.pc-all { min-height: 40px; padding: 8px 16px; font-size: var(--t-14); width: auto; text-align: center; }
.pc-all[hidden] { display: none; }
@media (min-width: 720px) { .s .pc-all-p { display: none; } }
.s-pc-lead { padding-bottom: 44px; }
.s-pc-lead .wrap > h2:first-child { margin-top: 0; }
/* the hero's one button, to the box */
.s .dh-act { margin-top: 26px; }
/* the page's close, on the navy band: the box's own close (its headline, three ticks, the button, the terms and
   the link to How it works), the headline and ticks on the left and the button on the right where there is room */
.s-pc-close { background: var(--grain), var(--band); color: var(--on-ink); padding: 48px 0 52px; }
.pc-close { display: grid; gap: 14px; }
.s .pc-close-l { font: 600 var(--t-25)/1.3 var(--serif); color: #fff; max-width: 34ch; margin: 0; }
.pc-close-a { display: grid; gap: 18px; }
.pc-close .tb-ticks li { color: var(--on-ink); }
.s .pc-close .tb-terms { color: var(--on-ink-soft); }
.pc-close .tb-inside a { color: var(--on-ink); text-decoration-color: rgba(232, 238, 244, .4); }
.pc-close .tb-inside a:hover { color: #fff; text-decoration-color: var(--gold); }
@media (min-width: 1000px) {
  .pc-close { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .pc-close-a { display: contents; }
  .pc-close .pc-close-l, .pc-close .tb-ticks { grid-column: 1; }
  .pc-close .tb-act { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}

/* ---------------------------------------------------------------- the states, A to Z (the map page, JP 2026-10-22) */
/* a compact, light list on the page's paper: one line a state (name, raises opened this year, the value in a gold bar
   along the line's foot, the 12 months' figure small and quiet), read down each column; 4 columns on a desktop,
   3 on a tablet, 2 on a phone; a column too narrow for one line (each item's own width, a container query) puts
   the figure under the name */
.s-pclist { background: var(--paper); color: var(--ink); padding: 40px 0 44px; border-top: 1px solid var(--rule); }
.s-pclist h2 { font-size: var(--t-32); margin: 0 0 6px; max-width: none; }
.s .pl-top { font-size: var(--t-17); line-height: 1.5; color: var(--ink-soft); max-width: 70ch; }
.s .pl-key { display: flex; flex-wrap: wrap; gap: 4px 24px; max-width: none; margin: 14px 0 6px; font-size: var(--t-13);
  line-height: 1.4; color: var(--muted); }
.pl-key-b { display: inline-flex; align-items: center; gap: 8px; }
.pl-key-b::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 1px; background: var(--gold); }
.pl { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 18px; }
.pl li { break-inside: avoid; container-type: inline-size; }
.pl-st { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem 6.75rem; align-items: baseline;
  column-gap: 6px; padding: 5px 0 6px; color: var(--ink); text-decoration: none; }
/* the line's foot: a hairline, the bar on it from the left */
.pl-st::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.pl-b { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; z-index: 1; }
.pl-b i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--gold); border-radius: 0 1px 1px 0; }
.pl-n { font: 600 13.5px/1.3 var(--sans); }
a.pl-st:hover .pl-n { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a.pl-st:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pl-c { font-size: var(--t-13); text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-f { font-size: 11px; line-height: 1.3; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-f .fb-blur { width: .6em; height: .45em; margin-right: .15em; filter: blur(2px); }
@container (max-width: 263px) {
  .pl-st { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n c" "f f"; row-gap: 1px; }
  .pl-n { grid-area: n; } .pl-c { grid-area: c; } .pl-f { grid-area: f; }
}
.s .pl-cta { margin-top: 22px; }
@media (min-width: 720px) { .pl { columns: 3; column-gap: 26px; } }
@media (min-width: 1200px) { .pl { columns: 4; column-gap: 20px; } }
.s .pc-big { font-size: var(--t-17); color: var(--ink-soft); max-width: 60ch; }
.pc-big b { display: block; font: 600 var(--t-44)/1.1 var(--serif); color: var(--ink); margin-bottom: 4px; }
.s .pc-what, .s .pc-up { font-size: var(--t-14); color: var(--ink-soft); margin-top: 26px; }
/* the four objection lines, one quiet row, each with the gold tick */
.pc-obj { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pc-obj li { position: relative; padding-left: 26px; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.pc-obj li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: var(--tick) center / 18px no-repeat; }
.s .pc-counting, .s .pc-credit { font-size: var(--t-14); color: var(--ink-soft); margin-top: 12px; max-width: var(--measure); }
.s .pc-credit { color: var(--muted); }
.s-pc-foot { padding-top: 40px; }

/* ---------------------------------------------------------------- the box: Screen the market for your raise */
.s-try { background: var(--vellum); border-bottom: 1px solid var(--rule); }
.try { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.try-head h2 { margin-bottom: 12px; }
.s .try-head > p { color: var(--ink-soft); max-width: 50ch; }
.s .try-head > p.try-lede { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.try-pick { display: grid; gap: 12px; margin-top: 22px; }
.try-pick[hidden] { display: none; }
.try-field { display: grid; gap: 4px; }
.try-label { font-size: var(--t-13); font-weight: 650; letter-spacing: .02em; color: var(--muted); }
.try-field select { font: 500 var(--t-17)/1.3 var(--sans); color: var(--ink); background: #fff; width: 100%;
  border: 1px solid var(--rule-strong); border-radius: var(--r-chip); padding: 10px 12px; min-height: 46px; }
.try-f-asset select { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line); }
.try-field select:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.s .try-scope { margin-top: 14px; font-size: var(--t-14); color: var(--ink-2); padding-left: 26px; position: relative; }
.try-scope::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: var(--tick) center / 18px no-repeat; }
.s .try-note { margin-top: 14px; font-size: var(--t-13); line-height: 1.5; color: var(--muted); max-width: 50ch; }
.try-stage { min-width: 0; }
/* the box: the hero specimen's look, a fixed height */
.try-box { position: relative; display: flex; flex-direction: column; overflow: hidden; height: var(--tb-h);
  background: #fff; color: var(--ink); border-radius: var(--r-frame); border-top: 3px solid var(--gold);
  box-shadow: var(--edge), 0 2px 3px rgba(4, 10, 20, .18), 0 40px 80px -30px rgba(10, 22, 40, .55);
  padding: 20px 22px 6px; }
.s .try-box p { max-width: none; }
.try-box[aria-busy="true"] .tb-rows { opacity: .6; }
.tb-head { flex: none; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.tb-for { height: 1.45em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--t-14);
  font-weight: 600; color: var(--ink-soft); }
.tb-count { display: flex; align-items: baseline; gap: 12px; height: 3.2rem; white-space: nowrap; overflow: hidden; margin-top: 2px !important; }
.tb-n { font: 600 var(--t-44)/1.15 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.tb-cw { font-size: var(--t-14); color: var(--ink-soft); }
.od { display: inline-flex; }
.od-c { display: inline-block; height: 1.15em; overflow: hidden; }
.od-s { display: block; transition: transform 520ms cubic-bezier(.2, .7, .2, 1); }
.od-s > span { display: block; height: 1.15em; }
.tb-split { position: relative; height: 8px; border-radius: 4px; background: var(--vellum); overflow: hidden; margin-top: 8px; }
.tb-seg { position: absolute; inset: 0; transform-origin: 0 50%;
  transform: translateX(calc(var(--x, 0) * 1%)) scaleX(var(--s, 0)); transition: transform 520ms cubic-bezier(.2, .7, .2, 1); }
.tb-s0 { background: var(--gold); } .tb-s1 { background: var(--ink-2); } .tb-s2 { background: #6b8bb0; }
.tb-keys { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: var(--t-13); color: var(--ink-soft); min-height: 1.4em; }
.tb-k { display: inline-flex; align-items: center; gap: 6px; }
.tb-k.off { visibility: hidden; }
.tb-k b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tb-rows { flex: 1 1 auto; min-height: 0; list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); }
.tb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "bar type level" "why why why" "meta meta meta";
  grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; align-content: center; padding: 4px 0;
  border-bottom: 1px solid var(--rule); overflow: hidden; min-height: 0; }
.tb-row:last-child { border-bottom: 0; }
/* a box wide enough holds a row in two lines: the name bar, its size or fact, its kind and level; then why */
.try-box { container-type: inline-size; }
@container (min-width: 560px) {
  .tb-row { grid-template-columns: minmax(5rem, 1fr) auto auto auto; grid-template-areas: "bar meta type level" "why why why why";
    grid-template-rows: auto auto; }
  .tb-meta { justify-self: end; }
}
/* where a subscriber reads the firm's name: a plain bar of a seeded width, never text */
.tb-bar { grid-area: bar; display: block; height: .72rem; width: var(--w, 60%); max-width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #cfd6e0, #dfe4eb); transform-origin: 0 50%; align-self: center; }
.tb-type { grid-area: type; font-size: var(--t-13); font-weight: 650; color: var(--ink); white-space: nowrap; }
.tb-level { grid-area: level; font-size: 12px; font-weight: 650; color: var(--ink-2); background: #e8edf4;
  border-radius: var(--r-chip); padding: 1px 7px; white-space: nowrap; line-height: 1.5; }
.tb-level.tb-l1 { background: #f4ecd6; color: var(--gold-ink); }
.tb-level:empty { display: none; }
.tb-why { grid-area: why; font-size: var(--t-13); line-height: 1.35; color: var(--ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tb-meta { grid-area: meta; display: flex; gap: 14px; font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap;
  overflow: hidden; }
.tb-fact:not(:empty) { color: var(--gold-ink); font-weight: 600; padding-left: 16px; position: relative; }
.tb-fact:not(:empty)::before { content: ""; position: absolute; left: 0; top: 1px; width: 13px; height: 13px;
  background: var(--tick) center / 13px no-repeat; }
.tb-meta:has(> :not(:empty)) { min-height: 1em; }
.tb-row.rest .tb-bar { opacity: .5; }
/* modes: before a pick the prompt over ten resting bars; too few: its words and the way to widen */
.tb-prompt, .tb-few { position: absolute; left: 22px; right: 22px; top: 44%; transform: translateY(-50%);
  text-align: center; z-index: 2; display: none; }
.tb-prompt { font: 600 var(--t-20)/1.35 var(--serif); color: var(--ink); background: rgba(255, 255, 255, .92);
  padding: 18px 20px; border-radius: var(--r-frame); box-shadow: 0 10px 30px -14px rgba(10, 22, 40, .35); }
.tb-few { background: rgba(255, 255, 255, .95); padding: 18px 20px; border-radius: var(--r-frame);
  box-shadow: 0 10px 30px -14px rgba(10, 22, 40, .35); }
.s .tb-few p { font: 600 var(--t-17)/1.4 var(--serif); color: var(--ink); }
.tb-widen { margin-top: 12px; font: 650 var(--t-14)/1 var(--sans); color: var(--ink); background: #fff; cursor: pointer;
  border: 1px solid var(--gold); border-radius: var(--r-chip); padding: 10px 14px; }
.tb-widen[hidden] { display: none; }
.tb-norows { position: absolute; left: 22px; right: 22px; top: 50%; transform: translateY(-50%); z-index: 2; display: none;
  text-align: center; font: 600 var(--t-17)/1.4 var(--serif); color: var(--ink); background: rgba(255, 255, 255, .94);
  padding: 18px 20px; border-radius: var(--r-frame); box-shadow: 0 10px 30px -14px rgba(10, 22, 40, .35); }
/* a failed read: never a statement about the raise, only the way to try again */
.tb-err { position: absolute; left: 22px; right: 22px; top: 44%; transform: translateY(-50%); text-align: center; z-index: 2;
  display: none; background: rgba(255, 255, 255, .95); padding: 18px 20px; border-radius: var(--r-frame);
  box-shadow: 0 10px 30px -14px rgba(10, 22, 40, .35); }
.s .tb-err p { font: 600 var(--t-17)/1.4 var(--serif); color: var(--ink); }
[data-mode="prompt"] .tb-prompt, [data-mode="few"] .tb-few, [data-mode="norows"] .tb-norows,
[data-mode="error"] .tb-err { display: block; }
[data-mode="prompt"] .tb-head .tb-count, [data-mode="few"] .tb-head .tb-count,
[data-mode="error"] .tb-head .tb-count { visibility: hidden; }
/* any amount: Find capital's own, shorter list (size not judged), said in one quiet line of a fixed height */
.s .tb-anynote { height: 1.35em; overflow: hidden; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--ink-soft);
  white-space: nowrap; text-overflow: ellipsis; }
.s .tb-anynote:empty { display: none; }
/* without script a box with no class lists each class's firms; with it, the prompt and the bars */
.tb-static { display: none; }
.try:not(.try-js) [data-mode="prompt"] .tb-static { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 10px; }
.try:not(.try-js) [data-mode="prompt"] .tb-rows, .try:not(.try-js) [data-mode="prompt"] .tb-prompt,
.try:not(.try-js) [data-mode="prompt"] .tb-head { display: none; }
.s .tb-static-h { font-size: var(--t-14); font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.tb-static ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 28px; font-size: var(--t-13); }
.tb-static li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--rule);
  break-inside: avoid; }
.tb-static b { font-variant-numeric: tabular-nums; }
/* the close (JP 2026-10-22, third pass): out of the box, a calm block on the band's vellum, never a second card;
   one column reads it after the result, two columns under the pickers. Its parts keep one height on every pick
   (the headline two lines' room, the line of links two), so nothing after it moves */
.try-close { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.s .try-close + .try-note { margin-top: 0; }
.s .tb-all { font: 600 var(--t-20)/1.3 var(--serif); color: var(--ink); height: 2.6em; overflow: hidden;
  text-wrap: balance; }
/* what a subscriber gets beyond the names, three short ticks */
.tb-ticks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 3px; }
.tb-ticks li { position: relative; padding-left: 22px; font-size: var(--t-13); line-height: 1.4; color: var(--ink-2); }
.tb-ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px;
  background: var(--tick) center / 15px no-repeat; }
.tb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.tb-act .btn { flex: none; }
.s .tb-terms { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.s .try-close .tb-terms { color: var(--muted); }
.s .try-close .tb-terms + .tb-terms { margin-top: 4px; }
.s .tb-inside { margin-top: 2px; font-size: 12.5px; line-height: 1.45; font-weight: 600; }
/* the line of links: where the column is too narrow for the longest state's link and See what's inside on one
   line, two lines' room, so a state's pick never moves what follows */
.s .try-close .tb-inside { margin-top: 6px; align-content: flex-start; }
@media (max-width: 719px), (min-width: 1000px) and (max-width: 1199px) { .s .try-close .tb-inside { min-height: 2.9em; } }
.tb-inside a { color: var(--ink-2); text-decoration-color: var(--gold-line); text-underline-offset: 2px; }
.tb-inside a:hover { color: var(--gold-ink); text-decoration-color: var(--gold); }
/* beside the pickers under 1200px the box is narrower than its two-line row, so each row takes three lines */
@media (min-width: 1000px) and (max-width: 1199px) { :root { --tb-h: 61rem; } .try-fixed { --tb-h: 55rem; } }
/* from 1200px the rows take two lines; the box is a little taller than they need, so it ends about where the
   left column (the pickers, the close and the note) does: a state and class page asks only the size, so its left
   column, and its box, are shorter */
@media (min-width: 1200px) { :root { --tb-h: 55rem; } .try-fixed { --tb-h: 47rem; } }
@media (max-width: 719px) {
  :root { --tb-h: 51rem; }
  .try-box { padding: 16px 16px 4px; }
  .s .tb-all { font-size: var(--t-17); }
  .tb-rows { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .tb-row:nth-child(n+6) { display: none; }
  .tb-row:nth-child(5) { border-bottom: 0; }
  .tb-row { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "bar bar bar" "type level ." "why why why" "meta meta meta"; }
  .tb-bar { max-width: 80%; }
  .tb-why { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tb-meta { white-space: normal; }
  .tb-count { height: 2.9rem; }
  .tb-for { height: 2.9em; white-space: normal; line-height: 1.45; }
  .tb-n { font-size: var(--t-32); }
  .tb-prompt, .tb-few, .tb-err { left: 16px; right: 16px; }
  .s .tb-anynote { height: 2.7em; white-space: normal; }
  .tb-static ul { columns: 1; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .try-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .try-pick-one { grid-template-columns: minmax(0, 20rem); }
}
/* two columns: the title, the pickers, the close and the note on the left; the box alone on the right */
@media (min-width: 1000px) {
  .try { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: 52px;
    row-gap: 0; align-items: start;
    grid-template-areas: "head stage" "close stage" "note stage"; }
  .try-head { grid-area: head; }
  .try-stage { grid-area: stage; }
  .try-close { grid-area: close; margin-top: 24px; }
  .try-note { grid-area: note; }
  .s .try-close + .try-note { margin-top: 14px; }
}

/* ---------------------------------------------------------------- motion (one moment a page), never without consent */
@media (prefers-reduced-motion: no-preference) {
  /* the hero figure settles; the state's outline draws, its fill comes up */
  .s-dh .dh-fig { animation: settle 520ms 120ms cubic-bezier(.2, .7, .2, 1) both; }
  .sl .sl-me { stroke-dasharray: 1; animation: sl-draw 900ms 150ms cubic-bezier(.45, 0, .2, 1) both,
    sl-fill 700ms 700ms ease-out both; }
  @keyframes sl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes sl-fill { from { fill-opacity: 0; } to { fill-opacity: .92; } }
  /* the night map lights once: each state from dim to its step, in a scattered fixed order, about 1.4 s */
  .nm-load .nm-s { animation: nm-light 620ms calc(var(--d, 0) * 16ms) ease-out both; }
  .js .nm[data-reveal]:not(.is-in) .nm-s { opacity: .18; }
  .js .nm.is-in:not(.now) .nm-s { animation: nm-light 620ms calc(var(--d, 0) * 16ms) ease-out both; }
  @keyframes nm-light { from { opacity: .18; } to { opacity: 1; } }
  .pc-drawer.in { animation: dr-in 280ms cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes dr-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  /* the bars grow once on reveal, 20 ms apart; the stacked bar and the ranked bars draw from the left */
  .js .mbars[data-reveal]:not(.is-in) .mb { transform: scaleY(0); }
  .js .mbars.is-in:not(.now) .mb { animation: mb-grow 560ms calc(var(--i, 0) * 20ms) cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes mb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .js .sbar[data-reveal]:not(.is-in) rect { transform: scaleX(0); }
  .js .sbar.is-in:not(.now) rect { animation: sb-draw 640ms calc(var(--i, 0) * 70ms) cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes sb-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .js .sbar[data-reveal]:not(.is-in) .sb-l { opacity: 0; }
  .js .sbar.is-in:not(.now) .sb-l { animation: fade 400ms 700ms ease-out both; }
  .js .rk[data-reveal]:not(.is-in) .rk-bar i { transform: scaleX(0); }
  .js .rk[data-reveal]:not(.is-in) .rk-rg { opacity: 0; }
  .js .rk.is-in:not(.now) .rk-rg { animation: fade 400ms calc(var(--i, 0) * 50ms + 500ms) ease-out both; }
  .js .rk.is-in:not(.now) .rk-bar i { animation: rk-draw 600ms calc(var(--i, 0) * 50ms) cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes rk-draw { from { transform: scaleX(0); } to { transform: scaleX(var(--v)); } }
  /* the box: each answer's name bars sweep in left to right, the row's words settle after */
  .tb-swept .tb-row:not(.rest) .tb-bar { animation: tb-sweep 440ms calc(var(--i, 0) * 60ms) cubic-bezier(.2, .7, .2, 1) both; }
  .tb-swept .tb-row:not(.rest) > :not(.tb-bar) { animation: tb-settle 360ms calc(var(--i, 0) * 60ms + 200ms) ease-out both; }
  .tb-swept .tb-n, .tb-swept .tb-for { animation: fade 300ms ease-out both; }
  @keyframes tb-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes tb-settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes settle { from { opacity: 0; transform: translateY(8px); } }
  /* the specimen's resting tilt where the page is wide enough to hold it */
  @media (min-width: 1000px) {
    .try-stage { perspective: 1600px; }
    .try-box { transform: rotateX(1.5deg); transform-origin: 50% 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .od-s, .tb-seg, .nm .nm-s { transition: none; }
}
@media (max-width: 480px) {
  .pc-table th, .pc-table td { padding-right: 6px; }
  .pc-table { font-size: var(--t-13); }
  .nm-key { grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: 11px; }
  .rk .rk-r { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) auto; gap: 8px; }
  .rk:not(.rk-plain) .rk-r { grid-template-columns: 6.5rem minmax(0, 1fr) 8rem; }
  .rk:not(.rk-plain) b { font-size: var(--t-13); white-space: nowrap; }
  .rk:not(.rk-plain) > .rk-r, .rk-g { padding-left: 8px; }
}
/* on the home the band follows the hero, whose specimen hangs past the hero's edge into it; the proof strip
   after it no longer holds the specimen */
.s-hero + .s-try { padding-top: calc(var(--overlap) + 48px); }
.s-try + .s-proof { padding-top: 48px; }
/* a range (tier 2, JP 2026-10-22): the range in words after a blurred smudge drawn here, with no digit in it (the
   page holds the range's two edges and nothing more, so there is nothing to unblur) */
.fb { display: inline; }
.fb-blur { display: inline-block; width: 1.5em; height: .55em; margin-right: .28em; border-radius: .3em; vertical-align: .12em;
  background: currentColor; opacity: .3; filter: blur(3px); }
.fb-range { overflow-wrap: anywhere; }
.dh-fig .fb-range, .pc-big .fb-range { font-size: .62em; letter-spacing: 0; }
.pf-v .fb-range, .pc-dfig .fb-range { font-size: .75em; }
/* "about" before a rounded figure (JP 2026-10-22), set smaller than a large figure so the amount still leads */
.fig-about { font-weight: 500; letter-spacing: 0; }
.dh-fig .fig-about, .pc-big .fig-about { font-size: .5em; }
.pf-v .fig-about, .pc-dfig .fig-about { font-size: .62em; }
.s .pc-dnote { font-size: var(--t-13); color: var(--muted); margin: 6px 0 0; max-width: none; }
/* the states list and By class are both white: one gap between them, not two sections' padding stacked (JP 2026-10-22) */
.s-pclist:has(+ .s-pc) { padding-bottom: 48px; }
.s-pclist + .s-pc { padding-top: 0; }
.s-pclist + .s-pc .wrap > h2:first-child { margin-top: 8px; }
/* ---------------------------------------------------------------- the home's way into the state pages (JP 2026-10-22)
   right under the box, on a navy band: the night map drawn small (aria-hidden, the whole drawing one link that the
   button repeats for the keyboard), lit once on reveal as the map page's, never under reduced motion */
.s-pchome { padding-top: calc(var(--sec) * .75); padding-bottom: calc(var(--sec) * .75); }
.pch-grid { display: grid; gap: 30px; align-items: center; }
.s-pchome h2 { max-width: 16ch; }
.s .pch-line { font-size: var(--t-17); line-height: 1.55; max-width: 42ch; margin-top: 14px; }
.s .pch-act { margin-top: 26px; }
.pch-link { display: block; border-radius: var(--r-frame); }
.pch-map .nm { max-width: 640px; }
.pch-map .nm-key { margin-top: 12px; }
@media (min-width: 1000px) {
  .pch-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; }
  .pch-map .nm, .pch-map .nm-key { margin-left: auto; }
}
/* under the result, the chosen state's page beside See what's inside, on the line that already holds it */
.s .tb-inside { display: flex; flex-wrap: wrap; column-gap: 18px; }
.tb-state[hidden] { display: none; }