/* /showcase/build-account: "One account, every reading".

   A candidate treatment of /what-we-build. Layers on base.css and loads
   on this page only (the route's `css` override), so nothing here can
   reach another page.

   The page is one record and eight lenses over it. The record is the
   site's evidence row, stacked inside one card, so the verdict colour
   lives in the pill alone. A lens opens the rows it reads and folds the
   rest: an open row keeps the white card ground, its detail and a filled
   pill; a folded row keeps only its label, on the tint ground, with an
   outline pill. The state is shape as well as colour.

   The eight readings share one grid cell, so the record's top never moves
   when the lens changes. Each reading is a question, one figure and one
   line; once the record scrolls under it, the band folds to its question
   and line. */

/* ── Hero ───────────────────────────────────────────────────────── */

.wa-hero { padding: 24px 0 24px; }
.wa-hero h1 {
  /* Display section: the page headline on every page below the home. */
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 18em;
}
.wa-lede {
  margin-top: 10px;
  max-width: 46em;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--body);
}

.wa-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

::selection { background: var(--rule); color: var(--ink); }

/* ── The desk ───────────────────────────────────────────────────── */

.wa-desk { padding: 4px 0 84px; }

.wa-desk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  align-items: start;
}

/* ── The rail ───────────────────────────────────────────────────── */

.wa-rail { grid-column: 1 / span 4; align-self: stretch; min-width: 0; }
.wa-rail-inner { position: sticky; top: 60px; padding-top: 16px; }

.wa-tabs { list-style: none; border-top: 1px solid var(--rule); }
.wa-tabs li { border-bottom: 1px solid var(--rule); }

.wa-tab {
  position: relative;
  display: block;
  padding: 6px 44px 7px 18px;
  color: var(--ink);
  transition: background-color 160ms ease;
}
/* The chosen lens: an ink rule down its edge and a pointer at the
   record it is reading. Both are shape, not colour. */
.wa-tab::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-tab::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  transform: translate(-4px, -50%) rotate(45deg);
  opacity: 0;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-tab-title {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -0.016em;
  line-height: 1.22;
}
/* The question this capability answers, in its short form. */
.wa-tab-q {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}
.wa-tab:hover { background: var(--surface); }
.wa-tab:focus-visible { outline-offset: -3px; }
.wa-tab[aria-selected="true"] { background: var(--surface); }
.wa-tab[aria-selected="true"]::before { transform: scaleY(1); }
.wa-tab[aria-selected="true"]::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
.wa-tab[aria-selected="true"] .wa-tab-q { color: var(--body); }

.wa-rail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 18px;
}
.wa-rail-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.wa-rail-link span { display: inline-block; transition: transform 160ms ease; }
.wa-rail-link:hover { color: var(--teal-deep); }
.wa-rail-link:hover span { transform: translateX(3px); }

/* ── The readings ───────────────────────────────────────────────── */

.wa-stage { grid-column: 5 / span 8; min-width: 0; }

.wa-readings {
  display: grid;
  position: sticky;
  top: 60px;
  z-index: 6;
  padding: 16px 0 22px;
  margin-bottom: 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.wa-reading {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
}
.wa-reading:focus-visible { outline-offset: 6px; }

/* Without JavaScript the rail links switch the reading on :target,
   and Rank shows until another is chosen. */
html:not(.wa-js) .wa-reading.is-default,
html:not(.wa-js) .wa-reading:target { visibility: visible; opacity: 1; }
html:not(.wa-js) .wa-readings:has(.wa-reading:target) .wa-reading.is-default:not(:target) { visibility: hidden; opacity: 0; }

.wa-js .wa-reading {
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}
.wa-js .wa-reading.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 70ms, visibility 0s;
}
.wa-js .wa-reading .wa-reading-in {
  transform: translateY(6px);
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1) 70ms;
}
.wa-js .wa-reading.is-on .wa-reading-in { transform: none; }

.wa-reading-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 30px;
  align-items: start;
}

.wa-q {
  font-size: clamp(28px, 2.3vw, 33px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 11em;
}
.wa-go {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-deep);
}
.wa-go span { display: inline-block; transition: transform 160ms ease; }
.wa-go:hover span { transform: translateX(3px); }

/* The answer: one figure in the Figure role, and the line it begins.
   Ink, not teal: most of these are counts and positions, not
   confirmations. */
.wa-answer { margin: 0; }
.wa-fig-n {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wa-line {
  display: block;
  margin-top: 8px;
  max-width: 30em;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.wa-inline {
  display: inline-block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-deep);
  border-bottom: 1px solid transparent;
}
.wa-inline:hover { border-bottom-color: var(--teal-deep); }

/* Compact: once the record scrolls under the band, the band folds to
   its question and its line, so the record gets the room. The script
   adds back the height it loses as margin, so nothing below moves. */
.wa-readings.is-compact { padding: 10px 0 12px; }
.wa-readings.is-compact .wa-reading-in { display: block; }
.wa-readings.is-compact .wa-q { max-width: none; font-size: 22px; line-height: 1.2; letter-spacing: -0.018em; }
.wa-readings.is-compact .wa-go,
.wa-readings.is-compact .wa-inline { display: none; }
.wa-readings.is-compact .wa-answer { margin-top: 4px; }
.wa-readings.is-compact .wa-fig-n,
.wa-readings.is-compact .wa-line { display: inline; }
.wa-readings.is-compact .wa-fig-n { font-size: 17.5px; letter-spacing: -0.02em; }
.wa-readings.is-compact .wa-line { margin: 0; max-width: none; font-size: 15.5px; font-weight: 400; color: var(--body); }
.wa-js .wa-readings.is-compact .wa-reading .wa-reading-in { transform: none; transition: none; }

/* ── The reading's one visual ─────────────────────────────────────
   Each reading carries one compact visual under its figure, bound to the
   same locals. Mono appears only on figures that align in a column. */
.wa-viz { margin-top: 14px; }

/* Rank: two scores, never one, each on a bar showing the whole 100 it is
   scaled against, with the market's mean marked in ink. */
.wa-scores { display: grid; gap: 10px; max-width: 30em; }
.wa-score {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 12px;
}
.wa-score-k {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wa-score-bar { position: relative; height: 8px; border-radius: 3px; background: var(--track); }
.wa-score-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--teal); }
.wa-score-mean {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--ink);
}
.wa-score-v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--teal-deep);
}
.wa-score-m { grid-column: 2; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* Brief: one opener, one person, one thing not to open with. */
.wa-brief { display: grid; gap: 7px; max-width: 34em; }
.wa-brief > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  column-gap: 14px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
}
.wa-brief > div:first-child { padding-top: 0; border-top: 0; }
.wa-brief dt {
  padding-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wa-brief dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.wa-brief dd b { font-weight: 600; color: var(--ink); }

/* Monitor: the record as taken, and the re-read beside it. Slate rule
   over the first read, blue (new or changed) over the second. */
.wa-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wa-diff-col { padding-top: 8px; border-top: 3px solid var(--slate); }
.wa-diff-col.is-now { border-top-color: var(--blue); }
.wa-diff-when {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wa-diff-col p { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.wa-diff-col.is-now p { color: var(--ink); }

/* Group: the maturity ladder, in the ladder's own order. */
.wa-ladder { list-style: none; display: grid; gap: 6px; max-width: 34em; }
.wa-ladder li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px auto;
  align-items: center;
  column-gap: 12px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--body);
}
.wa-ladder-k b { font-weight: 600; color: var(--ink); margin-right: 3px; }
.wa-ladder-bar { display: block; height: 8px; }
.wa-ladder-bar span { display: block; height: 100%; border-radius: 2px; background: var(--track); }
.wa-ladder-v { font-size: 13px; text-align: right; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.wa-ladder li.is-here { color: var(--ink); font-weight: 600; }
.wa-ladder li.is-here .wa-ladder-bar span { background: var(--ink); }
.wa-ladder li.is-here .wa-ladder-v { color: var(--ink); }

/* Find the people: the six at Fountain Trust in the research's order,
   read down the columns, the confidence as a small aligned figure. */
.wa-people {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px 20px;
  max-width: 36em;
}
.wa-people li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.3; color: var(--muted); }
.wa-people-c {
  flex: none;
  min-width: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wa-people-n b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* Ask and Publish: counted bars. Teal fill, because each counts banks
   where a trait was confirmed. */
.wa-funnel, .wa-prev { list-style: none; display: grid; gap: 5px; max-width: 34em; }
.wa-funnel-row, .wa-prev li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 48px;
  align-items: center;
  column-gap: 12px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--body);
}
.wa-funnel-row[hidden] { display: none; }
.wa-funnel-bar, .wa-prev-bar { display: block; height: 8px; border-radius: 2px; background: var(--track); overflow: hidden; }
.wa-funnel-bar span, .wa-prev-bar span { display: block; height: 100%; min-width: 2px; background: var(--teal); }
.wa-funnel-row.is-base .wa-funnel-bar span { background: var(--slate); }
.wa-funnel-v, .wa-prev-v {
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wa-funnel-row.is-last .wa-funnel-k,
.wa-funnel-row.is-last .wa-funnel-v { font-weight: 600; color: var(--ink); }

/* Read a new market: one share of one market. */
.wa-share { display: grid; gap: 7px; max-width: 34em; }
.wa-share-bar { display: block; height: 14px; border-radius: 3px; background: var(--track); overflow: hidden; }
.wa-share-bar span { display: block; height: 100%; background: var(--teal); }
.wa-share-k { font-size: 14px; color: var(--body); }
.wa-share-k b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.wa-share-k::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: -1px;
  background: var(--teal);
}
.wa-share-k.is-rest::before { background: var(--track); border: 1px solid var(--rule); box-sizing: border-box; }

/* The folded band keeps its question and line; the visual steps aside. */
.wa-readings.is-compact .wa-viz { display: none; }

/* ── The record ─────────────────────────────────────────────────── */

.wa-record {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.wa-rec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--rule);
}
.wa-rec-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
}
.wa-rec-meta { margin-top: 4px; font-size: 14px; color: var(--muted); }
.wa-rec-open { align-self: start; }

.wa-cells {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 0.8fr) minmax(0, 1.5fr);
  column-gap: 28px;
  align-items: end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.wa-cell { position: relative; padding-bottom: 12px; min-width: 0; }
.wa-cell b { transition: color 240ms ease; }
.wa-cell-score b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--teal-deep);
}
.wa-cell-score span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.wa-cell-text { padding-left: 22px; border-left: 1px solid var(--rule); }
.wa-cell-text b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}
.wa-cell-text span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* A header cell the lens reads: a short ink bar under it. */
.wa-js .wa-cell::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-js .wa-cell-text::after { left: 22px; }
.wa-js .wa-cell.is-dim::after { transform: scaleX(0); transition-duration: 160ms; }
.wa-js .wa-cell.is-dim b { color: var(--muted); }

.wa-rec-facts { grid-column: 1 / -1; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.wa-rec-note { grid-column: 1 / -1; margin-top: 3px; font-size: 13.5px; color: var(--muted); }

.wa-group-title {
  padding: 11px 26px 9px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}
.wa-group + .wa-group .wa-group-title { border-top: 1px solid var(--rule); }
/* The row count shows only on a folded group. */
.wa-group-n { display: none; margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--muted); }
.wa-group-n::before { content: "· "; }
.wa-js .wa-group.is-folded .wa-group-n { display: inline; }
.wa-js .wa-group.is-folded .wa-rows { display: none; }
.wa-js .wa-group.is-folded .wa-group-title { border-bottom: 0; }

.wa-rows { list-style: none; }
.wa-row {
  padding: 12px 26px;
  background: var(--surface);
  transition: background-color 260ms ease;
}
.wa-row + .wa-row { border-top: 1px solid var(--rule); }

.wa-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.wa-row-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.014em;
  line-height: 1.3;
  color: var(--ink);
  transition: color 260ms ease;
}

/* The fold. A grid row that runs from its content's height to zero, so
   the detail opens and closes without a measured height. The stagger
   opens the lit rows top to bottom, like a finger down a page. */
.wa-row-more {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  transition-delay: calc(var(--wa-i, 0) * 22ms);
}
.wa-row-more-in { min-height: 0; overflow: hidden; }
.wa-row-text {
  padding-top: 3px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
}
.wa-row-src { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.wa-row-src a {
  font-weight: 600;
  color: var(--teal-deep);
  border-bottom: 1px solid transparent;
}
.wa-row-src a:hover { border-bottom-color: currentColor; }

.wa-pill {
  flex: none;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.wa-pill-yes { background: var(--pill-yes-bg); color: var(--teal-deep); }
.wa-pill-changed,
.wa-pill-high { background: var(--pill-new-bg); color: var(--blue-deep); }
.wa-pill-none,
.wa-pill-medium { background: var(--pill-none-bg); color: var(--muted); }

/* Folded: tint ground, muted label, the pill emptied to an outline, and
   the detail closed. Hidden from the tab order once it has closed. */
.wa-js .wa-row.is-dim { background: var(--tint); }
.wa-js .wa-row.is-dim .wa-row-label { color: var(--muted); }
.wa-js .wa-row.is-dim .wa-pill { background: transparent; border-color: var(--rule); color: var(--muted); }
.wa-js .wa-row.is-dim .wa-row-more {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 220ms;
}

/* The first select after load sets the state without animating it. */
.wa-desk.is-settling *,
.wa-desk.is-settling *::before,
.wa-desk.is-settling *::after { transition: none !important; }

/* ── Where it lands ─────────────────────────────────────────────── */

.wa-lands .lede { max-width: 36em; }
.wa-lands-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  margin-top: 36px;
}
.wa-land h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; }
.wa-land > p {
  margin-top: 8px;
  max-width: 34em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

/* A slot, not a mock. Dashed, like every destination on the site that
   does not exist yet, and the same shape as the capture beside it. */
.wa-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 404 / 182;
  margin-top: 22px;
  padding: 20px 28px;
  border: 1.5px dashed var(--slate);
  border-radius: 12px;
  text-align: center;
}
.wa-slot figcaption {
  max-width: 28em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

.wa-shot { margin-top: 22px; }
.wa-shot-link { display: block; border-radius: 12px; }
.wa-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 160ms ease;
}
.wa-shot-link:hover img { border-color: var(--ink); }
.wa-shot figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.wa-lands-map {
  margin-top: 34px;
  padding-top: 18px;
  max-width: 52em;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Closing ────────────────────────────────────────────────────── */

.wa-close h2 { max-width: 15em; }
.wa-close .lede { max-width: 34em; }

/* ── The company slide-in ──────────────────────────────────────────
   The shared partial (partials/showcase-panel.ejs) and its script
   (showcase-panel.js) are reused as they are. Their styles live in
   showcase.css, which this page does not load, so the part the panel
   needs is restated here, without the drop shadow showcase.css gives
   it: this system has none. Closed, it is hidden as well as moved, so
   nothing inside it can take focus or be read. */
.sc-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex; flex-direction: column;
  width: 80vw;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .24s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear .24s;
}
.sc-panel.on {
  transform: translateX(0);
  visibility: visible;
  transition: transform .24s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.sc-scrim {
  position: fixed; inset: 0;
  z-index: 55;
  background: rgba(17, 22, 27, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.sc-scrim.on { opacity: 1; pointer-events: auto; }
html.sc-panel-open, html.sc-panel-open body { overflow: hidden; }
.sc-panel-head { padding: 26px 34px 20px; border-bottom: 1px solid var(--rule); }
.sc-panel-head h2 { margin: 0 0 4px; font-size: 22px; }
.sc-panel-head .dom { font-size: 13.5px; color: var(--muted); }
.sc-panel-close {
  position: absolute; top: 15px; right: 16px;
  width: 44px; height: 44px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface);
  font-size: 18px; line-height: 1; color: var(--muted);
  cursor: pointer;
}
.sc-panel-close:hover { color: var(--ink); border-color: var(--ink); }
.sc-scores { display: flex; gap: 26px; margin-top: 14px; }
.sc-score .k { font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.sc-score .v { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.sc-panel-body { overflow-y: auto; padding: 10px 34px 40px; }
.sc-panel-why { margin: 18px 0 8px; max-width: 80ch; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.sc-findings-grid { display: grid; gap: 0 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-finding { padding: 15px 0; border-bottom: 1px solid var(--rule); }
.sc-finding-top { display: flex; align-items: baseline; gap: 10px; }
.sc-finding-top h3 { flex: 1 1 auto; margin: 0; font-size: 14.5px; }
.sc-pill {
  padding: 2px 9px; border-radius: 5px;
  background: var(--pill-yes-bg); color: var(--teal-deep);
  font-size: 11.5px; white-space: nowrap;
}
.sc-finding-meaning { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sc-finding blockquote {
  margin: 9px 0 0; padding-left: 12px;
  border-left: 1px solid var(--rule);
  font-size: 13.5px; line-height: 1.55; color: var(--body);
}
.sc-finding .src { margin-top: 8px; font-size: 13px; color: var(--muted); }
.sc-finding .src a { color: var(--teal-deep); }
.sc-empty { padding: 28px 0; font-size: 14px; color: var(--muted); }
.sc-panel.is-er2 .sc-panel-head { display: none; }
.sc-panel.is-er2 .sc-panel-body { flex: 1 1 auto; min-height: 0; padding: 0; }
.sc-er2-host { display: block; min-height: 100%; }
.sc-er2-loading { margin: 0; padding: 48px 34px; font-size: 14.5px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────────────── */

/* Laptop screens around 800px tall: the rail tightens so all eight lenses
   and the primary action fit above the fold. */
@media (min-width: 900px) and (max-height: 860px) {
  .wa-hero { padding: 16px 0 16px; }
  .wa-tab { padding: 3px 44px 4px 18px; }
  .wa-tab-title { line-height: 1.2; }
  .wa-tab-q { margin-top: 0; line-height: 1.35; }
  .wa-rail-foot { margin-top: 14px; }
}

/* Short desktop screens: the sticky rail and reading would leave too
   little of the record showing, so both return to the flow. */
@media (min-width: 900px) and (max-height: 699px) {
  .wa-rail-inner, .wa-readings { position: static; }
}

@media (max-width: 1099px) {
  .wa-reading-in { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .wa-q { max-width: 18em; }
  .wa-cells { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 16px; }
  .wa-cells .wa-cell-text:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--rule); }
  .wa-js .wa-cells .wa-cell-text:last-child::after { left: 0; }
  .sc-findings-grid { grid-template-columns: 1fr; }
}

/* Phone and small tablet. All eight lenses show at once as a two-column
   grid; once it has been scrolled past, the script pins the same list
   under the site bar as a strip of chips, holding its place in the flow
   so nothing jumps. The reading comes next, then the primary action,
   then the record. The wrappers stand aside (display: contents) so those
   four can be ordered as one column. */
@media (max-width: 899px) {
  .wa-desk-grid { display: flex; flex-direction: column; align-items: stretch; }
  .wa-rail, .wa-rail-inner, .wa-stage { display: contents; }

  .wa-tabs-wrap { order: 0; }
  .wa-readings { order: 1; }
  .wa-rail-foot { order: 2; margin: 2px 0 26px; }
  .wa-record { order: 3; }

  .wa-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 0;
  }
  .wa-tabs li { border: 0; min-width: 0; }
  .wa-tab {
    display: flex;
    align-items: center;
    min-height: 44px;
    height: 100%;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
  }
  .wa-tab::before, .wa-tab::after { display: none; }
  .wa-tab-q { display: none; }
  .wa-tab-title { font-size: 15px; line-height: 1.25; }
  .wa-tab:focus-visible { outline-offset: 2px; }
  .wa-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

  /* Pinned: the same list, one row of chips under the site bar. */
  .wa-tabs.is-strip {
    position: fixed;
    top: 60px; left: 0; right: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    padding: 10px 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .wa-tabs.is-strip::-webkit-scrollbar { display: none; }
  .wa-tabs.is-strip li { flex: none; }
  .wa-tabs.is-strip .wa-tab-title { white-space: nowrap; }

  .wa-readings { position: static; margin-top: 18px; margin-bottom: 0; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
  /* Each reading takes its own height here: the record sits below the
     fold on a phone, so holding it still buys nothing. */
  .wa-js .wa-reading:not(.is-on) { display: none; }

  .wa-rec-head { grid-template-columns: minmax(0, 1fr); }
  .wa-rec-open { justify-self: start; margin-top: 14px; }
  .wa-lands-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 700px) {
  .wa-hero { padding: 22px 0 20px; }
  .wa-lede { font-size: 17.5px; }
  .wa-tabs.is-strip { padding: 10px 20px; }

  .wa-q { font-size: 28px; }
  .wa-line { font-size: 16.5px; }
  .wa-diff { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wa-brief > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .wa-ladder li { grid-template-columns: minmax(0, 1fr) 56px; row-gap: 2px; }
  .wa-ladder-v { grid-column: 1 / -1; text-align: left; }
  .wa-funnel-row, .wa-prev li { grid-template-columns: minmax(0, 1fr) 56px 44px; }
  .wa-people { gap: 6px 14px; }
  .wa-people-n b { font-size: 14px; }

  .wa-rec-head { padding: 18px 18px 16px; }
  /* Two by two: the scores, then rank and stage side by side. */
  .wa-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: start; }
  .wa-cells .wa-cell-text,
  .wa-cells .wa-cell-text:last-child { grid-column: auto; padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--rule); }
  .wa-js .wa-cells .wa-cell-text::after,
  .wa-js .wa-cells .wa-cell-text:last-child::after { left: 0; }
  .wa-cell-text b { font-size: 16px; }
  .wa-rec-facts, .wa-rec-note { font-size: 13px; }
  .wa-group-title { padding-left: 18px; padding-right: 16px; }
  .wa-row-top { flex-wrap: wrap; row-gap: 4px; }
  /* The source runs on at the end of the detail rather than on a line
     of its own, which keeps an open row short on a phone. */
  .wa-row-text, .wa-row-src { display: inline; }
  .wa-row-text { font-size: 13.5px; line-height: 1.45; }
  .wa-row-src { margin-left: 6px; font-size: 13px; }
  .wa-row { padding: 9px 16px 9px 18px; }
  .wa-row-label { font-size: 15.5px; }

  .sc-panel { width: 100vw; }
  .sc-panel-head { padding: 22px 20px 18px; }
  .sc-panel-body { padding: 8px 20px 32px; }
}