/* Scorecard + directory pages (/company/<slug>, /companies).
   The top bar and footer/buttons come from site.css (.site-nav, .btn, .shell);
   everything here is scoped to these pages so it can't disturb the homepage. */

:root {
  --sc-ink: #000000;
  --sc-body: #000000;
  --sc-muted: #5f6065;
  --sc-line: #e5e5e5;
  --sc-paper: #fdfaf4;
  --sc-card: #ffffff;
  --sc-good: #1f7a4d;
  --sc-good-bg: #e8f6ee;
  --sc-bad: #c0402f;
  --sc-bad-bg: #fdecea;
  --sc-link: #155f9f;
  --sc-brand: var(--orange);        /* one source of truth — defined in site.css */
  /* Orange as TEXT on a light background. It is the BRAND orange, full strength — the
     same value as a surface, so every orange thing on the site is one colour.

     This was a separate, darker step (var(--orange), then #c2560a, then #b25000) chosen as the
     brightest orange clearing WCAG AA on every ground the site puts text on:
         background        #ff7300   #d95500   #c2560a   #b25000
         white   #ffffff     2.73      4.00      4.54      5.20
         paper   #fdfaf4     2.62      3.84      4.35      4.99
         chip    #f3f1ec     2.42      3.55      4.02      4.60
         peach   #fff1e2     2.47      3.62      4.09      4.69
     Nothing brighter than #b25000 passes anywhere, which is the whole problem: any value
     that satisfies the gate is visibly browner than the brand.

     RETIRED ON 2026-07-21 BY EXPLICIT DECISION of the product owner, after the darker
     step had been introduced and reverted four times. Brand consistency won over the
     contrast gain, knowingly: orange text now measures 2.4-2.7:1 against a 4.5:1 floor.
     The cost is real and is not hidden — ops/browser/probe.mjs still fails the build on
     every contrast violation EXCEPT ones whose foreground is exactly this colour, so a
     genuine contrast regression anywhere else is still caught. See DESIGN.md.

     The token keeps its name because ~20 call sites use it and because reintroducing a
     text-safe step means changing one line here. Do not darken it without asking. */
  --sc-brand-deep: var(--orange);
  /* cool-neutral chip system (replaces the old muddy beige) */
  --sc-chip-bg: #f3f1ec;
  --sc-chip-line: #e6e1d8;
  --sc-chip-ink: #44454a;
  --sc-shadow: 0 1px 2px rgba(90, 60, 20, 0.04), 0 10px 30px rgba(90, 60, 20, 0.06);
  /* NOTE: there is deliberately no darkened band token here any more.
     A --sc-band (#b34e00 → #a34600) was introduced so white text on the conversion
     bands would clear WCAG AA; every surface that used it has since been returned to
     site.css's --orange-grad by explicit request, because matching the rest of the
     site's orange won over the contrast gain. White on #ff7c00 is 2.6:1 against a
     4.5:1 requirement, site-wide, and that is now a known and accepted state — see
     PRODUCT.md. Do not reintroduce a second orange without asking. */
}

body.cpage {
  margin: 0;
  color: var(--sc-ink);
  background: var(--sc-paper);
  /* Identical to site.css's stack. These differed only in the FALLBACKS, which is
     invisible while Poppins loads but made the shared top bar measure 1px taller on
     pages that load this file — the chrome must be pixel-identical everywhere. */
  font-family: "Poppins", Arial, sans-serif;
}

.sc { padding-bottom: 8px; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.sc-hero { padding: 40px 0 26px; }
.sc-id { display: flex; align-items: center; gap: 18px; }
.sc-logo {
  position: relative;
  flex: 0 0 auto;
  width: 66px; height: 66px; overflow: hidden;
  border-radius: 18px;
  background: var(--orange-grad);

}
.sc-logo__txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; color: #fff;
}
.sc-logo__img {           /* the real favicon, on a clean white tile; hides the initials */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; padding: 0; background: #fff;
}
.sc-eyebrow {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-brand);
}
/* Hierarchy is weight and size inside ONE family — the site is committed to Poppins and
   the extension mirrors it, so a second face is not on the table. That makes the steps
   between levels the only thing carrying rank, and they have to be decisive: display
   800 / heading 800 / topic 700 / body 400, each step ≥1.25x the next. */
.sc-id__text h1 {
  margin: 2px 0 0;
  font-size: clamp(1.85rem, 4.4vw, 3.1rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.035em;
  text-wrap: balance;
}
/* Sector and domain, directly under the name: the two facts that identify WHICH company
   this is. They were sidebar rows only, so on mobile — where the aside moves above the
   body — the reader met the CTA before they met the company. */
.sc-id__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 7px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--sc-muted);
}
.sc-id__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--sc-chip-line); }
.sc-id__meta a { color: var(--sc-brand-deep); text-decoration: none; }
.sc-id__meta a:hover { text-decoration: underline; }


/* The page.s one statement of what it is. Capped at 58ch: the old lede inherited the
   shell and ran to ~107 characters a line on a wide screen, which is roughly half a
   sentence past where the eye reliably finds the next line. */
.sc-deck {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 1.16rem; line-height: 1.58; color: var(--sc-body);
  text-wrap: pretty;
}
.sc-deck strong { color: var(--sc-ink); font-weight: 700; }

/* Freshness, in the hero. Deliberately quiet — it is a fact the reader checks, not a
   boast, and the moment it is styled like a badge it reads as marketing. Sits directly
   under the deck so "what the record says" and "when it was last true" are one thought. */
.sc-freshness {
  margin: 10px 0 0;
  font-size: 0.9rem; font-weight: 600; color: var(--sc-muted);
}
.sc-freshness time { color: var(--sc-ink); }

/* Trust strip — independence and privacy, immediately after the record. Set at body
   scale rather than as fine print: fine print is what a reader who already distrusts
   rating sites expects to find the catch in. Rule above, nothing else, so it reads as a
   footnote to the findings rather than a fifth section competing with them. */
.sc-trust {
  margin: 26px 0 0; padding-top: 18px;
  border-top: 1px solid var(--sc-line);
  max-width: 68ch;
  font-size: 0.95rem; line-height: 1.6; color: var(--sc-muted);
  text-wrap: pretty;
}
/* --sc-brand-deep IS --orange, so hover changes the underline rather than the colour. */
.sc-trust a { color: var(--sc-brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.sc-trust a:hover { text-decoration-thickness: 2px; }

/* The record's contents. Each chip jumps to its finding, so this is navigation carrying
   real per-company information, not decoration — and it is the only place above the fold
   that says WHAT this company has a record on. Neutral pill, same vocabulary as the
   issue chips on the rails, so the reader learns one shape for "an issue" site-wide. */
.sc-topics {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
.sc-topics a {
  display: inline-block;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--sc-chip-line); background: var(--sc-card);
  font-size: 0.82rem; font-weight: 600; color: var(--sc-chip-ink); text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}
.sc-topics a:hover { border-color: var(--sc-brand); color: var(--sc-brand-deep); }
.sc-topics a:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }

/* neutral at-a-glance chips (no good/bad) */
.sc-signals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sc-signal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sc-chip-line);
  font-size: 0.85rem; font-weight: 600; color: var(--sc-body);
}
.sc-signal i { color: var(--sc-brand); font-size: 0.8rem; }

/* ── two-column layout ────────────────────────────────────────────────────── */
.sc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
  padding-top: 8px;
}
@media (max-width: 900px) {
  .sc-layout { display: flex; flex-direction: column; gap: 26px; }
  .sc-aside { order: -1; }              /* CTA/summary rides up under the H1 on mobile */
}

/* ── sticky summary + CTA card ────────────────────────────────────────────── */
.sc-aside { position: sticky; top: 22px; }
@media (max-width: 900px) { .sc-aside { position: static; } }
.sc-card {
  background: var(--sc-card);
  border: 1px solid var(--sc-line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--sc-shadow);
}
.sc-card__shot {
  display: block; width: 100%; height: auto; margin: -4px 0 16px;
  border-radius: 12px; border: 1px solid var(--sc-line);
  box-shadow: 0 6px 18px rgba(90, 60, 20, 0.08);
}
/* The facts now come FIRST in the panel and the pitch follows, so the separator moves to
   the bottom of each row and the title gets the rule above it. Reversed, this panel read
   as a conversion box with a spec table stapled on — the generic SaaS sidebar. */
.sc-card__title {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--sc-line);
  font-weight: 700; font-size: 1.12rem; line-height: 1.3;
}
/* The first thing in a card needs no rule above it — the card's own edge is the
   separator. Used by both the facts card and the install card, which are now two
   separate cards rather than one card with a rule through the middle. */
.sc-card__title--lead {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px; padding-top: 0; border-top: 0;
}
.sc-card__browser { width: 22px; height: 22px; flex: 0 0 auto; }
.sc-card__sub { margin: 8px 0 16px; font-size: 0.9rem; line-height: 1.5; color: var(--sc-muted); }
.sc-card .btn { width: 100%; }
.sc-aside > .sc-card + .sc-card { margin-top: 14px; }
/* Firefox sits directly under the Chrome button, same width and shape, stepped down in
   colour weight — the same treatment the landing page's browser cards use. */
.sc-card__alt { margin-top: 10px; }
.sc-card .btn { line-height: 1.25; text-align: center; min-height: 52px; padding: 12px 18px; }
.sc-facts { list-style: none; margin: 0; padding: 0; }
.sc-facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--sc-line);
  font-size: 0.9rem;
}
.sc-facts li:first-child { padding-top: 0; }
.sc-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-facts li span { color: var(--sc-muted); flex: 0 0 auto; }
.sc-facts li strong { font-weight: 600; text-align: right; }
.sc-facts li a {
  color: var(--sc-ink);
  font-weight: 600;
  text-decoration: none;
  text-align: right;
  word-break: break-word;
}
.sc-facts li a:hover {
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-card__methodology {
  display: block; margin-top: 16px; padding-top: 15px;
  border-top: 1px solid var(--sc-line);
  color: var(--sc-brand-deep); font-size: 0.82rem; font-weight: 700;
  line-height: 1.5; text-decoration: none;
}
.sc-card__methodology::after { content: " →"; color: var(--sc-brand); }
.sc-card__methodology:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── finding blocks ───────────────────────────────────────────────────────── */
/* Rhythm, not a constant. Every block used to be 34px apart, so the evidence and the
   boilerplate under it were given identical weight; the record now gets a wide gap
   before the rails start, and the rails sit tighter to each other. */
.sc-block { margin-bottom: 30px; }
.sc-block--record { margin-bottom: 56px; }
.sc-block__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sc-block__head h2 {
  margin: 0; font-size: 1.55rem; font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.sc-block__sub { margin: 0 0 16px; max-width: 68ch; color: var(--sc-muted); font-size: 0.94rem; }
.sc-count {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px; font-size: 0.8rem; font-weight: 700;
}
.sc-count--bad { color: var(--sc-bad); background: var(--sc-bad-bg); }
.sc-count--good { color: var(--sc-good); background: var(--sc-good-bg); }

/* Two-up grid of compact cards: topic + date + quote + source.
   Cards in a row are EQUAL HEIGHT (the grid default). They used to be align-items:start,
   which left their bottom edges ragged; the slack is now absorbed inside the card by the
   primary citation, so the "more sources" toggle lands on a shared baseline instead. That
   only became affordable once extra citations collapsed — while all three rendered inline,
   stretching a short card to match a three-source one left a visible hole. */
/* minmax(0, 1fr), NOT 1fr. `1fr` is `minmax(auto, 1fr)`, so a column can never shrink below
   its MIN-CONTENT width — and evidence spans are verbatim quotes that sometimes contain a
   bare URL the article printed inline (an 87-char washingtonpost.com link sits inside one of
   Amazon's NLRB quotes). Expanding the citation that held it forced its column wide and
   squeezed the neighbouring card leftward. overflow-wrap does not help here: it changes how
   text WRAPS, not how the track is SIZED. */
/* ── the record: a ruled table of findings ──────────────────────────────────
   Six columns — issue, date, summary, evidence, source, details — with one border
   around the list and hairlines between rows. Replaced a grid of cards, where the issue
   name, the date and the provenance sat in a different place in every column so the
   reader re-oriented at each one, and a short finding beside a long one left a hole.
   Column ORDER is the point: you can run your eye down the issues, or down the dates,
   or down the provenance, without reading a single quote. */
.sc-rows {
  margin-top: 6px;
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card);
  overflow: hidden;                    /* clips the row tints to the rounded corners */
}
.sc-rows__head,
.sc-row {
  display: grid;
  grid-template-columns:
    minmax(132px, 148px)               /* issue    */
    minmax(74px, 82px)                 /* date     */
    minmax(0, 1fr)                     /* summary  */
    minmax(168px, 176px)               /* evidence — see below */
    minmax(112px, 132px);              /* source   */
  column-gap: 14px;
}
.sc-rows__head {
  padding: 11px 20px; border-bottom: 1px solid var(--sc-line);
  background: var(--sc-chip-bg);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sc-muted);
  text-align: center;
}
/* Every header sits over its own column's alignment. Only Date is centred, because only
   Date's value is centred; a centred label over left-aligned content stops reading as
   that column's heading. */
.sc-rows__head > :nth-child(1),
.sc-rows__head > :nth-child(3),
.sc-rows__head > :nth-child(4),
.sc-rows__head > :nth-child(5) { text-align: left; }
.sc-row {
  row-gap: 12px; padding: 18px 20px;
  align-items: start;
  scroll-margin-top: 18px;
}
.sc-row + .sc-row { border-top: 1px solid var(--sc-line); }

.sc-row__issue { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.sc-row__topic {
  margin: 0; font-size: 0.96rem; font-weight: 700; line-height: 1.28;
  letter-spacing: -0.01em; color: var(--sc-ink);
}
.sc-row__issue .sc-flag { white-space: normal; }
.sc-row__date {
  font-size: 0.8rem; font-weight: 600; color: var(--sc-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center;
}
.sc-row__nodate { color: var(--sc-chip-line); }
/* Three lines, then it stops. A verbatim span can run to eight lines, and one long
   finding beside a two-line one made the list lurch. -webkit-line-clamp is CONDITIONAL —
   a short quote is untouched, so this never draws an ellipsis or a fade on text that
   fits, which is what a flat max-height + mask would have done. The full text stays in
   the DOM; only the box is short. */
/* display: contents so the evidence and source cells stay their own grid columns on a
   wide screen; the wrapper only becomes a real box when the table stacks. */
.sc-row__meta { display: contents; }
.sc-row__body { min-width: 0; }
/* -webkit-line-clamp, for its native ellipsis: the "…" lands immediately after the last
   word, which an absolutely-positioned pseudo-element cannot do — it can only sit at the
   right edge of the box, detached from the text it follows.
   The clamp is PERMANENT. It used to be released when the row opened, which is why it
   had to be a transitionable max-height instead; now the full text lives in the panel
   below, so nothing here has to animate and the clamp can do what it is good at.
   Conditional by nature: a quote shorter than three lines is untouched, so this never
   draws an ellipsis on text that fits. */
.sc-row__body .sc-finding__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Opening the row releases the clamp, so the quote finishes IN PLACE. It used to stay
   clamped forever and the untruncated text was reprinted in the panel below — which on a
   single-source finding showed the same sentence twice, cut off and then whole. Expanding
   text should expand the text. The panel below is now only the additional citations. */
.sc-row:has(.sc-det[open]) .sc-row__body .sc-finding__text {
  -webkit-line-clamp: unset; overflow: visible;
}

.sc-row__evidence,
.sc-row__source {
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start;
  gap: 6px; min-width: 0;
}
.sc-row__evidence .sc-flag { white-space: normal; max-width: 100%; }
.sc-row__source .sc-source { margin-top: 0; max-width: 100%; }

/* ── "View details": a full-width bar under the quote it belongs to ───────────
   It used to occupy a sixth column on the far right — ~143px of table width to say two
   words, with the chevron clipped against the container edge. Here it reads as "there is
   more of THIS quote", and the freed width went to the columns that hold content. */
.sc-det { margin: 12px 0 0; }
/* No box. It sits directly under the quote it belongs to, where a bordered, tinted bar
   read as a second piece of chrome competing with the evidence above it. */
.sc-det > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  list-style: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 700; color: var(--sc-muted);
  transition: color 140ms ease;
}
.sc-det > summary::-webkit-details-marker { display: none; }
.sc-det__label::before { content: "View "; }
.sc-det[open] .sc-det__label::before { content: "Hide "; }
/* Pushed to the far end of the bar, so the count and the chevron read as one group. */
/* No longer pushed to the far end of a full-width bar — the control is now only as
   wide as its own text, so the count sits right beside the label. */
.sc-det__count { font-weight: 600; color: var(--sc-chip-ink); }
.sc-det > summary::after {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; margin: -3px 3px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.sc-det[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.sc-det > summary:hover { color: var(--sc-ink); }
.sc-det > summary:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }

/* The expanded citations. They ANIMATE rather than snapping.

   `display: none` cannot be transitioned, so the panel is always in the layout at height
   0 and the HEIGHT is what moves — which needs `interpolate-size: allow-keywords`,
   because otherwise the only animatable target would be a hard-coded pixel height and
   nothing here knows how tall three citations are. Declared on the element rather than
   :root so a global animation opt-in stays out of the shared stylesheet.

   `content-visibility: hidden` is not decoration: at height 0 the citations would still
   be in the tab order and readable by a screen reader while visually collapsed. It is
   transitioned with `allow-discrete` so it flips at the end of the close instead of
   cutting the content on frame one.

   Browsers without interpolate-size simply snap open, as this did before. */
.sc-row__extra {
  grid-column: 1 / -1; grid-row: 2;
  interpolate-size: allow-keywords;
  height: 0; overflow: hidden; content-visibility: hidden;
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1),
              content-visibility 280ms allow-discrete;
}
.sc-row:has(.sc-det[open]) .sc-row__extra { height: auto; content-visibility: visible; }
/* The inner element carries the separation and the fade; the outer one only animates
   height, so no layout property is transitioned and no sliver of box shows while
   collapsed. No tinted card any more — the citations are sub-rows of the table, and a
   box around them was what broke the column reading. */
.sc-row__extra-in {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--sc-line);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 190ms ease 50ms, transform 240ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}
.sc-row:has(.sc-det[open]) .sc-row__extra-in { opacity: 1; transform: none; }

/* One expanded citation, on the SAME five columns as the finding above it. The template
   is repeated rather than inherited via `subgrid`: this element spans the full content
   width of the same parent grid, so the tracks resolve identically, and it needs no
   subgrid support. */
.sc-subrow {
  display: grid;
  grid-template-columns:
    minmax(132px, 148px) minmax(74px, 82px) minmax(0, 1fr)
    minmax(168px, 176px) minmax(112px, 132px);
  column-gap: 14px; row-gap: 10px; align-items: start;
  padding: 12px 0;
}
.sc-subrow + .sc-subrow { border-top: 1px dashed var(--sc-line); }
.sc-subrow__body { min-width: 0; }
/* Full text here — this IS the untruncated citation the preview above points at. */
.sc-subrow__body .sc-finding__text { font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) {
  .sc-row__extra,
  .sc-row__extra-in { transition: none; }
  .sc-row__extra-in { transform: none; }
}

/* Below the two-column layout's breakpoint the six columns cannot hold: the summary
   would get ~150px and wrap after three words. Stack, and let the issue rail run
   horizontally so a row still reads as one unit. */
/* Stacked, below the width five columns can hold. Not a flat single-column pile — that
   put the date on a line of its own under the topic, then gave the provenance chips and
   the source a full-width row each, so a finding read as six unrelated stripes. This is
   the shape the card layout had and it is the right one for a narrow screen: topic and
   date on one line, the quote under them, and ONE metadata line beneath that. */
@media (max-width: 1340px) {
  .sc-rows__head { display: none; }
  .sc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 10px; padding: 18px;
  }
  .sc-row__issue {
    grid-column: 1; grid-row: 1;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  }
  .sc-row__date { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .sc-row__body { grid-column: 1 / -1; }
  /* One metadata line: provenance chips, then the source, wrapping together. */
  .sc-row__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    grid-column: 1 / -1;
  }
  .sc-row__evidence,
  .sc-row__source { justify-content: flex-start; }
  .sc-row__extra { grid-column: 1 / -1; grid-row: auto; }
  .sc-subrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .sc-subrow__gutter { display: none; }
  .sc-subrow .sc-row__date { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .sc-subrow__body { grid-column: 1 / -1; grid-row: 2; }
  .sc-subrow .sc-row__evidence,
  .sc-subrow .sc-row__source { grid-column: 1 / -1; }
}

/* .sc-cite--primary is gone with the card layout: the primary citation is no longer a
   block inside the finding, it IS the row — its quote is column 2 and its provenance and
   source are column 3. Only the COLLAPSED extra citations still render as .sc-cite, and
   they keep display:block so they can float their own dates. */
/* overflow-wrap: extractor spans are verbatim quotes and sometimes contain a bare URL the
   article printed inline (e.g. a washingtonpost.com link inside an NLRB quote). The text is
   NOT edited — the verbatim span is what span_pass verifies and what makes the citation
   checkable — so it must be allowed to break instead of overflowing the card. */
/* The quoted evidence is the reason the page exists, and it used to be set smaller than
   the section heading above it and barely larger than the chips beside it. It is now the
   largest body text on the page. */
.sc-finding__text {
  flex: 1; margin: 0; font-size: 1.04rem; line-height: 1.62; color: var(--sc-body);
  overflow-wrap: break-word; text-wrap: pretty;
}
.sc-source {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; max-width: 100%;
  padding: 5px 11px; border-radius: 9px;
  border: 1px solid var(--sc-chip-line); background: #fff; color: var(--sc-muted); text-decoration: none;
  font-size: 0.8rem; font-weight: 600;
}
.sc-source > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-source i { font-size: 0.66rem; opacity: 0.7; }
.sc-source__fav { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; flex: 0 0 auto; }
.sc-source:hover { border-color: var(--sc-brand); color: var(--sc-brand-deep); }
.sc-empty { color: var(--sc-muted); font-size: 1rem; line-height: 1.6; margin: 0; }

/* ── provenance: WHO says it, and how established it is ────────────────────── */
/* Colour encodes HOW ESTABLISHED and HOW ACCOUNTABLE a claim is — NOT whether it flatters
   the company. Green "Settled" means concluded, not good news; proven misconduct earns the
   same green as proven good practice, and the finding TEXT carries the direction. Read the
   other way round — green = good — this palette would quietly become the global good/bad
   verdict the scorecard exists to refuse.
   Tone tokens are assigned in seo.py (SOURCE_TONE / STATUS_TONE), so the mapping is
   testable rather than living in template conditionals. Tints stay desaturated: a chip row
   is metadata beside a quote and must not out-shout the evidence it labels. */
.sc-flag {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--sc-chip-line); background: var(--sc-chip-bg); color: var(--sc-muted);
  /* 0.76rem, not 0.72 — 0.72rem lands at 11.5px, under the 12px floor where small text
     starts costing real legibility on high-DPI screens. These chips carry the
     provenance of a claim; they are the last thing that should be hard to read. */
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
/* an official record, and a dated commitment — blue reads institutional, not evaluative */
.sc-flag--record   { border-color: #c5d7ea; background: #eff5fb; color: #2a5c8a; }
.sc-flag--promise  { border-color: #c5d7ea; background: #eff5fb; color: #2a5c8a; }
/* independent reporting */
.sc-flag--press    { border-color: #bfdcd8; background: #eef7f6; color: #1f6b62; }
/* established: adjudicated, or settled and therefore concluded */
.sc-flag--proven   { border-color: #c9dfc6; background: #f1f8f0; color: #35702f; }
/* the company's own account, and filed-but-undecided — both "hold this lightly" */
.sc-flag--self     { border-color: #e7d3b4; background: #fdf4e6; color: #8a6316; }
.sc-flag--pending  { border-color: #e7d3b4; background: #fdf4e6; color: #8a6316; }
/* asserted, not established */
.sc-flag--unproven { border-color: #ecdfa6; background: #fdfaea; color: #7d6510; }
/* the company denies it */
.sc-flag--disputed { border-color: #eecdcd; background: #fdf2f2; color: #9c3c3c; }
/* a source with a stake in the answer */
.sc-flag--partisan { border-color: #d9cee9; background: #f6f2fb; color: #5b4585; }
/* unclassified / tertiary / blog — or reversed, i.e. no longer applies */
.sc-flag--weak     { border-color: var(--sc-chip-line); background: var(--sc-chip-bg); color: var(--sc-muted); }
/* it happened, disclosed — neutral by design, because most findings are this */
.sc-flag--done     { border-color: var(--sc-chip-line); background: #fff; color: var(--sc-body); font-weight: 600; }
.sc-flag--state    { border-color: #e0d6ea; background: #f7f3fa; color: #5f4a75; }

/* The qualifier chip sits under the topic and date in the issue rail. It may wrap —
   "Company's own account only" does not fit a 150px column on one line. */
.sc-row__issue .sc-flag { white-space: normal; }

.sc-cite + .sc-cite { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--sc-line); }
.sc-cite::after { content: ""; display: block; clear: both; }
.sc-cite__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 9px 0 0; clear: both;
}
.sc-cite__meta:empty { display: none; }
.sc-cite__meta .sc-source { margin-top: 0; }
.sc-finding__date { font-size: 0.74rem; font-weight: 600; color: var(--sc-muted); font-variant-numeric: tabular-nums; }

/* Floated rather than a flex row: the quote then wraps around the date instead of losing a
   whole line to it, which matters when three citations stack inside one card. */
.sc-cite__date {
  float: right; margin: 0 0 4px 12px;
  font-size: 0.74rem; font-weight: 700; color: var(--sc-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Extra citations, collapsed. Content stays in the server-rendered HTML — <details> is not
   lazy — so it is still indexed and still verifiable; it just cannot make one
   well-corroborated finding three times taller than a thin one. */
/* A full-width control with a chevron, not a chip. As a small pill it sat in the same row
   as "Court or regulator" and "ftc.gov" and read as one more tag — nothing about it said
   "press me". */
.sc-more { margin-top: 12px; }
.sc-more > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--sc-chip-line); background: var(--sc-chip-bg);
  font-size: 0.8rem; font-weight: 700; color: var(--sc-body);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more__label::before { content: "Show "; }
.sc-more[open] .sc-more__label::before { content: "Hide "; }
/* Chevron drawn in CSS so it needs no icon font and rotates on open. */
.sc-more > summary::after {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; margin: -3px 3px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.sc-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.sc-more > summary:hover { border-color: var(--sc-brand); background: #fff; color: var(--sc-brand-deep); }
.sc-more > summary:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.sc-more[open] > summary { margin-bottom: 12px; }
.sc-more .sc-cite:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Smooth open AND close. <details> snaps by default because its content is not rendered
   while closed, so there is nothing to transition from. ::details-content gives us a box
   that exists in both states, and `interpolate-size: allow-keywords` is what lets a height
   animate to the keyword `auto` — without it the only animatable target would be a
   hard-coded pixel height, which cannot know how tall three citations are.
   Declared HERE rather than on :root: the property inherits, so scoping it to this
   subtree keeps a global animation opt-in out of the shared stylesheet.
   `transition-behavior: allow-discrete` carries content-visibility across the switch, so
   the closing direction animates instead of vanishing on frame one.
   Browsers without ::details-content simply snap, exactly as they do today. */
.sc-more { interpolate-size: allow-keywords; }
.sc-more::details-content {
  block-size: 0;
  overflow: hidden;
  content-visibility: hidden;
  transition: block-size 240ms ease, content-visibility 240ms allow-discrete;
}
.sc-more[open]::details-content { block-size: auto; content-visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .sc-more::details-content { transition: none; }
  .sc-more > summary::after { transition: none; }
}

/* ── say-do: one finding, two rows, a verdict ─────────────────────────────────
   A say-do finding compares what a company SAID with what it DID — two claims, two dates,
   two sources — so it renders as two ordinary rows sharing the table's five columns,
   bracketed by a verdict line. It used to be a single row whose body spanned
   `grid-column: 3 / -1`; that swallowed the Evidence and Source columns (their headers
   stood over nothing) and, because the span released at 1180px while the table only
   stacks at 1340px, painted the issue name on top of the date across that 160px band.
   Two real rows fix both at once: every column is true again, and each half's date lands
   under Date where the eye can scan it.

   The verdict's red/green is the ONE place the scorecard uses either, and it is NOT a
   verdict on the company's values — only the narrow factual question the engine asks: did
   it do what it said? Per DESIGN.md's Rare-Red Rule it tints the verdict LINE alone,
   never a card/border/background spanning the finding — which is exactly what the old
   full-bleed pink slab did, and why it is gone. */
.sc-sd {
  --sd-ink: var(--sc-muted);
  scroll-margin-top: 18px;            /* the topic-chip jump lands on the verdict */
}
.sc-sd--mismatch { --sd-ink: #a8371f; }
.sc-sd--match    { --sd-ink: #2f6629; }
.sc-sd--partial  { --sd-ink: #86620f; }

/* The wrapper is a sibling of the plain rows, so the list's own `.sc-row + .sc-row`
   hairline cannot reach across it — these restore a separator on every say-do boundary.
   Not needed against the header (its own border-bottom serves), and say-do findings lead,
   so a wrapper is almost always the first child after the head: no top border falls there. */
.sc-sd + .sc-row, .sc-row + .sc-sd, .sc-sd + .sc-sd { border-top: 1px solid var(--sc-line); }

/* The verdict brackets the pair. Padded to the row's own 20px inset so the badge sits over
   the issue column, and tight to the SAYS row beneath it. */
.sc-sd__verdict {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  margin: 0; padding: 17px 20px 2px; font-size: 0.92rem; line-height: 1.45;
}
.sc-sd__verdict i { color: var(--sd-ink); font-size: 0.85rem; }
.sc-sd__verdict strong { color: var(--sd-ink); font-weight: 800; }
.sc-sd__verdict span { color: var(--sc-muted); }

/* Each half IS an ordinary row: it inherits the five-column grid, the provenance and
   source cells, the stacking behaviour — everything a normal finding has. Three things
   change. The two rows are grouped (no hairline between them, tighter vertical rhythm);
   the quote is never clamped, because a say-do half IS the comparison and cutting it
   mid-sentence is the one thing this layout must not do; and the SAYS/DOES role is named
   above the quote. */
.sc-sd__row { padding-top: 9px; padding-bottom: 9px; }
.sc-sd__row--said { padding-top: 2px; }
.sc-sd__row--did { padding-bottom: 18px; }
.sc-sd__row + .sc-sd__row { border-top: 0; }
.sc-sd__row .sc-row__body .sc-finding__text { -webkit-line-clamp: unset; overflow: visible; }
.sc-sd__label { margin: 0 0 5px; }
.sc-saydo__label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sd-ink);
}

/* The DOES row names no issue — it is the same finding — so its issue cell carries a small
   elbow tying it back to the SAYS row above, instead of repeating the name. Hidden when
   the table stacks: there the verdict line and the two labels already carry the grouping,
   and a lone elbow on its own line would be noise. */
.sc-sd__cont {
  display: block; width: 13px; height: 22px; margin: 3px 0 0 3px;
  border-left: 2px solid var(--sc-chip-line);
  border-bottom: 2px solid var(--sc-chip-line);
  border-bottom-left-radius: 7px;
}
@media (max-width: 1340px) {
  .sc-sd__cont { display: none; }
  /* Stacked, there is no five-column row under the verdict to align to, so it takes the
     18px inset the stacked rows use. */
  .sc-sd__verdict { padding: 16px 18px 0; }
  /* The DOES row names no issue, so stacked it would strand its date alone on an empty
     first line (the SAYS row pairs its date with the issue name; the DOES row has no
     name to pair with). Drop the empty issue cell and lift the date onto the DOES
     label's line, so it reads "DOES … 2024-07" with the quote beneath — and the two
     dates still align down the right edge for scanning. */
  .sc-sd__row--did .sc-row__issue { display: none; }
  .sc-sd__row--did .sc-row__body { grid-row: 1; }
  .sc-sd__row--did .sc-row__date {
    grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: start;
  }
}

/* ── related companies ──────────────────────────────────────────────────────
   Two stacked blocks, not tabs: alternatives first, then overlapping coverage. */
.sc-related { margin-bottom: 40px; }
.sc-related__sub {
  margin: 34px 0 4px; font-size: 1.18rem; font-weight: 800;
  line-height: 1.25; letter-spacing: -0.015em; color: var(--sc-ink);
}

/* Direct alternatives are an editorial list, not another dashboard-card wall. Each
   whole row is one link; the exact product class explains why it belongs here, and the
   coloured chips show what Choice can actually document about it. */
.sc-altcards {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--sc-line);
}
.sc-altcard {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center; gap: 18px; padding: 18px 4px;
  border-bottom: 1px solid var(--sc-line);
  color: inherit; text-decoration: none;
  transition: background 160ms ease, padding 160ms ease;
}
.sc-altcard:hover { padding-inline: 10px; background: rgb(255 255 255 / 54%); }
.sc-altcard:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.sc-altcard__mark {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 76px; height: 76px; border-radius: 18px;
  background: #fff1e2; border: 1px solid var(--sc-line);
}
.sc-altcard__marktxt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; color: var(--sc-brand-deep);
}
.sc-altcard__mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; background: #fff; }
.sc-altcard__body { min-width: 0; display: grid; justify-items: start; }
.sc-altcard__name {
  font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em; color: var(--sc-ink);
}
.sc-altcard__sector { margin-top: 2px; color: var(--sc-muted); font-size: .84rem; }
.sc-altcard__topics {
  display: flex; flex-wrap: wrap; gap: 5px;
  list-style: none; margin: 9px 0 0; padding: 0;
}
.sc-altcard__topics li {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border: 1px solid var(--dim-line); border-radius: 999px;
  background: var(--dim-bg); color: var(--dim-ink);
  font-size: .7rem; font-weight: 750; line-height: 1.15;
}
.sc-altcard__topics svg { width: .72rem; height: .72rem; }
.sc-altcard__go {
  color: var(--sc-link); font-size: .82rem; font-weight: 800; white-space: nowrap;
}
.sc-related__all {
  display: inline-flex; margin-top: 16px;
  color: var(--sc-link); font-size: .88rem; font-weight: 800; text-decoration: none;
}
.sc-related__all:hover { text-decoration: underline; }

/* Shared issue coverage — the same ruled table as the record, so the page teaches one
   shape for "a list of things with columns" rather than two. */
.sc-shared {
  margin-top: 4px;
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); overflow: hidden;
}
.sc-shared__head,
.sc-shared__row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(104px, 124px) minmax(0, 1fr) 22px;
  column-gap: 16px; align-items: center;
}
.sc-shared__head {
  padding: 11px 20px; border-bottom: 1px solid var(--sc-line);
  background: var(--sc-chip-bg);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sc-muted);
}
.sc-shared__row {
  padding: 14px 20px; text-decoration: none; color: inherit;
  transition: background 140ms ease;
}
.sc-shared__row + .sc-shared__row,
.sc-shared__head + .sc-shared__row { border-top: 1px solid var(--sc-line); }
.sc-shared__row:hover { background: var(--sc-chip-bg); }
.sc-shared__row:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: -2px; }
.sc-shared__co { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sc-shared__name { font-weight: 700; font-size: 0.98rem; color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-shared__count { font-size: 0.86rem; font-weight: 600; color: var(--sc-muted); white-space: nowrap; }
.sc-shared__topics { font-size: 0.88rem; line-height: 1.5; color: var(--sc-body); min-width: 0; }
/* CSS chevron rather than an icon: it is pure affordance on a row that is already a
   link, so it stays out of the icon set and out of the accessibility tree. */
.sc-shared__go {
  justify-self: end; width: 8px; height: 8px;
  border-right: 2px solid var(--sc-muted); border-top: 2px solid var(--sc-muted);
  transform: rotate(45deg); transition: transform 140ms ease, border-color 140ms ease;
}
.sc-shared__row:hover .sc-shared__go { border-color: var(--sc-brand); transform: rotate(45deg) translate(2px, -2px); }
.sc-shared__note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0 0; max-width: 74ch;
  font-size: 0.83rem; line-height: 1.55; color: var(--sc-muted);
}
.sc-shared__note i { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 860px) {
  .sc-shared__head { display: none; }
  .sc-shared__row {
    grid-template-columns: minmax(0, 1fr) 22px;
    row-gap: 6px; align-items: start;
  }
  .sc-shared__co { grid-column: 1; }
  .sc-shared__count { grid-column: 1; }
  .sc-shared__topics { grid-column: 1; }
  .sc-shared__go { grid-column: 2; grid-row: 1; align-self: center; }
  .sc-altcard { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .sc-altcard__mark { width: 64px; height: 64px; border-radius: 15px; }
  .sc-altcard__go { grid-column: 2; margin-top: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-shared__row:hover .sc-shared__go { transform: rotate(45deg); }
}

/* ── alternatives: a row of links, not a second card grid ─────────────────────
   The scorecard's alternatives rail carries a NAME and nothing else. Rendered as
   232px cards it was pixel-identical to the related-companies grid directly beneath
   it, and the two read as one 12-card block; with a single peer it left one card
   marooned in a three-column grid. A wrapping row of chips sizes to its content, so
   one alternative looks deliberate and eight still fit in two lines.
   The hub and alternatives PAGES keep .sc-alt cards — there the card carries a quote,
   a provenance flag and issue chips, so the card is earning its border. */
.sc-peers { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-peer {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  border: 1px solid var(--sc-line); background: var(--sc-card);
  text-decoration: none; color: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.sc-peer:hover { border-color: var(--sc-brand); background: #fff; }
.sc-peer:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.sc-peer__mark {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  background: #fff1e2;
}
.sc-peer__marktxt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 0.66rem; letter-spacing: -0.02em; color: var(--sc-brand-deep);
}
.sc-peer__mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; background: #fff; }
.sc-peer__name { min-width: 0; font-weight: 600; font-size: 0.94rem; color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── company cards (hub + alternatives pages, and the same-issues rail) ────── */
.sc-alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.sc-alt {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 17px; border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); text-decoration: none; color: inherit;
  box-shadow: var(--sc-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sc-alt:hover { transform: translateY(-3px); border-color: #ffc38a; box-shadow: 0 14px 30px rgba(190, 120, 30, 0.16); }
.sc-alt__mark {                       /* cohesive soft-tint tile: white behind a loaded logo, brand initials otherwise */
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 50px; height: 50px;
  border-radius: 14px;
  background: #fff1e2;
  box-shadow: inset 0 0 0 1px var(--sc-chip-line);
}
.sc-alt__marktxt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--sc-brand-deep); font-size: 1.1rem; letter-spacing: -0.02em; }
.sc-alt__mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; background: #fff; }
.sc-alt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-alt__name { font-weight: 700; font-size: 1.04rem; color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-alt__view { font-size: 0.8rem; font-weight: 600; color: var(--sc-muted); transition: color 0.15s ease; }
.sc-alt:hover .sc-alt__view { color: var(--sc-brand-deep); }

/* Related rail: the shared-issue chips replace the "View record" line. Neutral chip
   colours only — the good/bad ramp (--sc-good/--sc-bad) must not leak in here, because
   a shared dimension says both companies have a record on the issue, not that either
   is on the right side of it. */
.sc-alt__shared { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-alt__issue {
  display: inline-block; max-width: 100%;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--sc-chip-line); background: var(--sc-chip-bg);
  font-size: 0.72rem; font-weight: 600; color: var(--sc-chip-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-alt__issue--more { color: var(--sc-muted); }

/* .sc-note is gone with its markup: the scorecard's legal disclaimer paragraph was
   removed by request. No template references the class. */

.sc-card__sub em { font-style: normal; font-weight: 700; color: var(--sc-ink); }

/* The .sc-method block ("How Choice works") lived here and is gone with its markup —
   it restated the deck, sat 200px above a conversion band that restated it again, and
   rendered byte-identical on every scorecard. /about and /issues own the method. */

/* ── conversion band ──────────────────────────────────────────────────────── */
.sc-why {
  display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center;
  margin: 12px 0 46px; padding: 42px;
  border-radius: 24px; color: #fff;
  /* The site ramp, restored by explicit request (2026-07-21) — it reads as the brand
     orange the rest of the site uses, and matching the homepage won here.
     KNOWN AND ACCEPTED: white on #ff7c00 is 2.6:1, below the 4.5:1 AA floor. Every
     orange surface on these pages now agrees. Do not "fix" this back without asking;
     it is a deliberate brand call, not drift. */
  background: var(--orange-grad);
}
.sc-why__text h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.14; letter-spacing: -0.02em; }
.sc-why__text > p { margin: 0 0 22px; font-size: 1.06rem; line-height: 1.6; max-width: 52ch; }
.sc-why em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.sc-why__points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.sc-why__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; line-height: 1.5; }
.sc-why__points i { margin-top: 3px; width: 20px; flex: 0 0 auto; text-align: center; }
.sc-why__points strong { font-weight: 700; }
/* Chrome + Firefox side by side, wrapping to a column on narrow screens rather than
   letting either button shrink below its label. */
.sc-why__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sc-why .btn--dark { background: #fff; color: #1d1408; box-shadow: 0 12px 28px rgba(60, 30, 0, 0.24); }
.sc-why .btn--dark:hover { background: #fff8f0; }
.sc-why__shot img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 22px 54px rgba(60, 30, 0, 0.32); }
@media (max-width: 820px) {
  .sc-why { grid-template-columns: 1fr; gap: 26px; padding: 30px; }
  .sc-why__shot { order: -1; }
}


/* ── issue colour: 9 families, not 24 hues ───────────────────────────────────
   Every dimension carries an icon (topical) and a family colour (which AREA of life the
   issue belongs to). Nine families rather than one hue each, for the same reason the
   icon map lets dimensions share a glyph: past about ten, a categorical palette stops
   being distinguishable and the colour is noise.

   NO RED anywhere in the set, and no family is "worse" than another. A chip states that
   a company has a CITED record on the issue, never which side of it — a palette that
   ranked would be the overall verdict this product refuses to publish.

   Colour is for INDEX surfaces only: the topic rail, the directory, the related rails.
   It must never enter a finding row, where the provenance palette already means
   something precise (how established the claim is). Two colour systems in one row and
   the reader has to guess which is speaking. web/tests/test_verdicts.py re-measures the
   contrast of whatever is generated below, so a new family cannot ship unmeasured.

   Measured: ink on its own fill, on #ffffff, on --sc-paper and on --sc-chip-bg, all
   >= 4.5:1. Chips render on all four grounds. */
/* GENERATED:dim-families — do not edit. Source: choice_engine/data/vocabulary.json,
   written by ops/generate_vocabulary.py. Edits here are overwritten and the deploy
   fails on drift (ops/preflight). */
.dim--land { --dim-bg: #c5f7cf; --dim-ink: #08781e; }
.dim--work { --dim-bg: #fcdbb1; --dim-ink: #7d4803; }
.dim--care { --dim-bg: #c1f5ee; --dim-ink: #067566; }
.dim--safety { --dim-bg: #c5e8f7; --dim-ink: #085d81; }
.dim--data { --dim-bg: #cddaf9; --dim-ink: #0c3188; }
.dim--civic { --dim-bg: #e3d3f8; --dim-ink: #451188; }
.dim--identity { --dim-bg: #f7cff5; --dim-ink: #830b7f; }
.dim--world { --dim-bg: #f8c9e7; --dim-ink: #810855; }
.dim--belief { --dim-bg: #e7f7bb; --dim-ink: #577506; }
/* END GENERATED:dim-families */

/* The chip itself. A dimension with no family keeps the neutral chip it has today —
   an unmapped id must degrade quietly, never render an unstyled or invisible chip. */
.dir-issue[class*="dim--"],
.sc-alt__issue[class*="dim--"],
.cmp-chip[class*="dim--"],
.sc-topics a[class*="dim--"] {
  background: var(--dim-bg);
  border-color: color-mix(in srgb, var(--dim-ink) 24%, transparent);
  color: var(--dim-ink);
}
/* ── directory (/companies) ───────────────────────────────────────────────── */
.dir-hero { padding: 44px 0 4px; }
/* One line, as large as the shell allows. The 16ch cap was what wrapped it after "Know
   who"; without a cap it sets on a single line down to ~560px, and `text-wrap: nowrap`
   is deliberately NOT used — below that the clamp's lower bound lets it wrap rather than
   overflow the viewport. */
.dir-hero h1 {
  margin: 0; font-size: clamp(2.2rem, 7vw, 5.6rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.04em;
}
.dir-hero > p { margin: 14px 0 0; color: var(--sc-body); font-size: 1.12rem; line-height: 1.55; max-width: 60ch; }
.dir-stat { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; color: var(--sc-muted); font-size: 0.92rem; font-weight: 600; }
.dir-stat i { color: var(--sc-brand); }
.dir-stat strong { color: var(--sc-ink); }

/* shared logo/initials tile (uniform white for consistency) */
.dir-mark { position: relative; overflow: hidden; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px;
  background: #fff; }
.dir-mark__txt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--sc-brand-deep); font-size: 0.9rem; }
.dir-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; background: #fff; }

/* A neutral issue chip, shared by the cards and the table. Says the company has a cited
   record on the issue, never which side of it — the same rule as every other issue chip
   on the site. */
.dir-issue {
  display: inline-block; max-width: 100%;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--sc-chip-line); background: var(--sc-chip-bg);
  font-size: 0.72rem; font-weight: 600; color: var(--sc-chip-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dir-issue--more { color: var(--sc-muted); }
.action-chip:not([class*="dim--"]) {
  --dim-bg: var(--sc-chip-bg);
  --dim-ink: var(--sc-body);
}
.action-chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--dim-ink) 24%, transparent);
  border-radius: 999px; background: var(--dim-bg); color: var(--dim-ink);
  font-size: 0.73rem; font-weight: 650; line-height: 1.25;
}
.action-chip small {
  flex: 0 0 auto; font: inherit; font-size: 0.62rem; font-weight: 850;
  letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.82;
}
.dir-card__count--pending,
.dir-pending { color: var(--sc-muted); font-weight: 600; }

/* ── recently researched: four cards ──────────────────────────────────────── */
.dir-recent { padding: 30px 0 6px; }
.dir-recent h2,
.dir-browse > h2,
.dir-hubs h2 { margin: 0 0 14px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; }
.dir-recent__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.dir-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 17px; border: 2px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); text-decoration: none; color: inherit;
  transition: border-color 180ms ease-out;
}
.dir-card:hover { border-color: #000; box-shadow: none; }
.dir-card:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .dir-card { transition: none; }
}
.dir-card__head { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.dir-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-card__mark {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 68px; height: 68px; border-radius: 18px;
  background: #fff1e2;
}
.dir-card__marktxt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--sc-brand-deep); }
.dir-card__mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; background: #fff; }
.dir-card__name { font-weight: 700; font-size: 1.12rem; color: var(--sc-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-card__sector { font-size: 0.84rem; color: var(--sc-muted); }
.dir-card__count { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; color: var(--sc-body); }
.dir-card__count i { color: var(--sc-muted); font-size: 0.8rem; }
.dir-card__issues { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

/* ── browse: filters, letter rail, table ──────────────────────────────────── */
.dir-browse { padding: 34px 0 6px; }
.dir-filters[hidden] { display: none; }
.dir-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dir-search { position: relative; flex: 1 1 260px; min-width: 0; }
.dir-search__icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--sc-muted); font-size: 0.85rem; pointer-events: none; }
.dir-search__input {
  width: 100%; min-height: 46px; padding: 10px 14px 10px 40px;
  border: 1px solid var(--sc-chip-line); border-radius: 12px;
  background: var(--sc-card); color: var(--sc-ink);
  font: inherit; font-size: 0.94rem;
}
.dir-search__input:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 1px; border-color: var(--sc-brand); }
.dir-select {
  flex: 0 1 auto; min-height: 46px; padding: 10px 34px 10px 14px;
  border: 1px solid var(--sc-chip-line); border-radius: 12px;
  background: var(--sc-card); color: var(--sc-ink);
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  /* The native arrow differs per platform and sits too close to the edge; this is the
     same chevron the rest of the page draws, as a data URI so it needs no markup. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23746552' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
}
.dir-select:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 1px; border-color: var(--sc-brand); }

/* Letter rail. Every letter renders whether or not the corpus has it: the gaps are
   honest coverage information, and a rail that reflowed as companies were added would
   move under the reader's cursor. */
.dir-az {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  margin: 0 0 12px; padding: 6px; border-radius: 12px;
  background: var(--sc-chip-bg);
}
.dir-az a,
.dir-az span {
  min-width: 30px; padding: 6px 6px; border-radius: 8px;
  text-align: center; text-decoration: none;
  font-size: 0.86rem; font-weight: 700; color: var(--sc-body);
  transition: background 0.12s ease, color 0.12s ease;
}
.dir-az a:hover { background: var(--sc-card); color: var(--sc-ink); }
/* The BRAND orange, full strength. White on #ff7300 is 2.73:1 and axe fails the build on
   it — the fix for that is darker TEXT, never a darker orange. Ink on #ff7300 is 6.56:1,
   so the selected letter is the real brand colour and still clears AA comfortably. */
.dir-az a.is-active { background: var(--orange-grad); color: #fff; }
.dir-az .is-empty { color: var(--sc-chip-line); cursor: default; }
.dir-az__all { min-width: 44px; }
.dir-az a:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }

/* The table. Same ruled-list vocabulary as the scorecard's record, so the site teaches
   one shape for "a list of things with columns". */
.dir-table {
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); overflow: hidden;
}
/* `minmax(0, …)` on sector, not `minmax(120px, 1fr)`: a bare or min-content-floored track
   can never shrink below its widest cell, which is what pushed the middle columns into
   each other. The header labels were also shortened (see the template), so findings and
   reviewed no longer need a min sized for "SOURCED ACTIONS". */
.dir-table__head,
.dir-row {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr)      /* company */
    minmax(0, 1fr)            /* sector */
    minmax(96px, 0.55fr)      /* findings */
    minmax(200px, 1.6fr)      /* issues */
    minmax(110px, 0.7fr)      /* reviewed */
    minmax(76px, 0.45fr);     /* go */
  column-gap: 20px; align-items: center;
}
/* 0.76rem, not 0.72 — 0.72rem lands at 11.5px, under the same 12px floor documented on
   .sc-flag. These are the labels for every column on the page; they are the last text
   that should be sitting below it. */
.dir-table__head {
  padding: 11px 20px; border-bottom: 1px solid var(--sc-line);
  background: var(--sc-chip-bg);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sc-muted);
}
.dir-group__letter {
  margin: 0; padding: 9px 20px;
  border-bottom: 1px solid var(--sc-line); background: #fdfbf7;
  font-size: 0.82rem; font-weight: 800; color: var(--sc-muted);
}
.dir-group + .dir-group .dir-group__letter { border-top: 1px solid var(--sc-line); }
.dir-row {
  min-height: 78px; padding: 14px 20px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--sc-line);
  transition: background 0.12s ease;
}
.dir-group:last-child .dir-row:last-child { border-bottom: 0; }
.dir-row:hover { background: var(--sc-chip-bg); }
.dir-row:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: -2px; }
.dir-row__co { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dir-row__name { font-weight: 700; font-size: 0.97rem; color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-row__sector { font-size: 0.87rem; color: var(--sc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-row__findings { font-size: 0.87rem; font-weight: 600; color: var(--sc-body); white-space: nowrap; }
.dir-row__issues { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dir-row__reviewed { font-size: 0.84rem; color: var(--sc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ink, not orange — the product owner's call on 2026-07-25. This ran at full-strength
   #ff7300 for a long time as a knowingly-accepted 2.73:1 contrast debt; black is both
   what was asked for and, incidentally, the AA-passing end of that trade. The orange
   rule elsewhere is unchanged: this is one control turning black, NOT permission to
   darken orange text anywhere else on the site (see the note on .cmp__go, which is the
   same control on /alternatives/<slug> and still orange pending its own decision).

   `background: none` and `padding: 0` are stated EXPLICITLY rather than omitted. This was
   briefly a filled pill, and the inlined critical block keeps whatever it was generated
   from: a rule that merely stops setting a property lets the stale declaration win the
   cascade, which left orange text on an orange pill at 1.66:1. Overriding beats omitting
   whenever a property is being retired. */
.dir-row__go {
  justify-self: end; font-size: 0.86rem; font-weight: 700;
  color: var(--sc-ink); white-space: nowrap;
  background: none; padding: 0; border-radius: 0;
}
/* The arrow is the arrow-right icon in the markup now, not a "→" text character, so it
   matches the one on /alternatives/<slug> exactly and can take a stroke weight. The rule
   is kept as an explicit `none` because the critical block still carries the old one. */
.dir-row__go::after { content: none; }
.dir-row__go { display: inline-flex; align-items: center; gap: 6px; }
.dir-empty { margin: 16px 0 0; color: var(--sc-muted); font-size: 0.95rem; }
.dir-empty[hidden] { display: none; }
.dir-group[hidden], .dir-row[hidden] { display: none; }

/* ── category hubs ────────────────────────────────────────────────────────── */
.dir-hubs { padding: 34px 0 6px; }
.dir-hubs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(196px, 100%), 1fr)); gap: 10px; }
.dir-hub {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 13px 16px; border: 1px solid var(--sc-line); border-radius: 14px;
  background: var(--sc-card); text-decoration: none; color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dir-hub:hover { border-color: #ffc38a; background: var(--sc-chip-bg); }
.dir-hub__name { font-weight: 700; font-size: 0.98rem; color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-hub__count { flex: 0 0 auto; font-weight: 700; font-size: 0.8rem; color: var(--sc-muted); background: var(--sc-chip-bg); border-radius: 999px; padding: 2px 9px; }

/* Below the width six columns can hold, a row becomes a stacked block: name and the
   "View" affordance on one line, then sector, findings and date as one metadata line,
   then the issue chips. */
@media (max-width: 1100px) {
  .dir-table__head { display: none; }
  .dir-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px; padding: 15px 18px;
  }
  .dir-row__co { grid-column: 1; grid-row: 1; }
  .dir-row__go { grid-column: 2; grid-row: 1; }
  .dir-row__sector { grid-column: 1 / -1; }
  .dir-row__findings { grid-column: 1 / -1; }
  .dir-row__reviewed { grid-column: 1 / -1; }
  .dir-row__issues { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .dir-filters { gap: 8px; }
  .dir-select { flex: 1 1 calc(50% - 4px); }
  .dir-az a, .dir-az span { min-width: 26px; font-size: 0.8rem; padding: 5px 4px; }
}

/* ── /alternatives/<slug>: the comparison table ───────────────────────────────
   The one page on the site that is a comparison MATRIX rather than a list, so it is the
   one place with a real <table> (see templates/_comparison_table.html for why). The
   vocabulary is still the site's: --sc-line hairlines, 16px radii, the neutral chip
   ramp, one orange affordance per row and no second accent colour.

   This replaced a 232px card grid. Three columns of cards could not answer the question
   the page exists for — the reader had to hold "how many findings did the last one have"
   in their head while scanning to the next card, because no two cards put the same fact
   in the same place. In a table every property is a column you can run your eye down,
   which is the entire reason to compare things side by side. */
.dir-hero--wide h1 { max-width: none; }
.dir-hero--wide > p { max-width: 74ch; }

/* Summary strip: three counts, then the note that says how a company got here. Both are
   cards on the same row so the strip reads as one band under the lede. */
/* The note drops UNDER the counts well before the table stacks. Squeezed into a 300px
   sidebar its four lines of copy set the height of the whole strip, and the stat cells —
   74px of content — inherited 50px of dead space above and below to match it. */
.cmp-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 26%);
  gap: 12px; margin: 24px 0 16px;
}
.cmp-stats {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); box-shadow: var(--sc-shadow);
}
.cmp-stat {
  flex: 1 1 190px; min-width: 0;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px;
}
/* Hairline dividers BETWEEN cells only, and they follow the wrap: a cell that has
   wrapped onto a second line starts a new run, so no divider is ever left hanging at the
   start of a row. */
.cmp-stat + .cmp-stat { box-shadow: inset 1px 0 0 var(--sc-line); }
.cmp-stat__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid #ffd9b3; background: #fff6ec;
  color: var(--sc-brand); font-size: 1.1rem;
}
.cmp-stat__n {
  flex: 0 0 auto;
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--sc-ink); font-variant-numeric: tabular-nums;
}
.cmp-stat__l { min-width: 0; font-size: 0.9rem; line-height: 1.35; color: var(--sc-muted); }

.cmp-how {
  display: flex; gap: 11px; padding: 14px 16px;
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); box-shadow: var(--sc-shadow);
}
.cmp-how__ic { flex: 0 0 auto; color: var(--sc-muted); font-size: 1.05rem; line-height: 1.4; }
.cmp-how h2 { margin: 0 0 4px; font-size: 0.9rem; font-weight: 800; color: var(--sc-ink); }
.cmp-how p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--sc-body); }
.cmp-how em { font-style: normal; font-weight: 700; color: var(--sc-ink); }
.cmp-how a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.86rem; font-weight: 700; color: var(--sc-brand-deep); text-decoration: none;
}
.cmp-how a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-how a i { font-size: 0.85em; }

/* The table itself. `table-layout: fixed` is load-bearing rather than a preference: with
   auto layout a single long company name or an unbroken URL in a quote re-proportions
   every other column, and the columns stop lining up between rows — which is the one
   thing a comparison table has to do. */
.cmp-wrap {
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: var(--sc-card); box-shadow: var(--sc-shadow);
  overflow: hidden;
}
.cmp {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  font-size: 0.9rem;
}
/* Present for screen readers and for the print/no-CSS view; the visible page already
   says the same thing in the lede and in the note beside the counts, so showing it a
   third time would be noise. */
.cmp__caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cmp__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cmp thead th {
  padding: 13px 18px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--sc-line);
  font-size: 0.78rem; font-weight: 600; color: var(--sc-muted);
}
.cmp thead th:last-child { text-align: right; }
.cmp tbody th, .cmp tbody td {
  padding: 16px 18px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--sc-line);
  font-weight: 400; color: var(--sc-body);
  overflow-wrap: anywhere;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr { transition: background 0.12s ease; }
.cmp tbody tr:hover { background: #fdfaf5; }
/* Widths sum to 100. Company and the two prose columns carry the page; Record and Action
   are sized to their content so they never steal width from a wrapping sentence.
   The source column is wider than it looks like it needs to be, and deliberately: a
   publisher is ONE unbreakable token, so a column an em too narrow splits
   'journals.sagepub.com' across two lines. Prose columns can absorb the space it takes
   to keep every realistic hostname whole; a broken citation reads as a typo. */
.cmp thead th:nth-child(1) { width: 18%; }
.cmp thead th:nth-child(2) { width: 11%; }
.cmp thead th:nth-child(3) { width: 12%; }
.cmp thead th:nth-child(4) { width: 16%; }
.cmp thead th:nth-child(5) { width: 15%; }
.cmp thead th:nth-child(6) { width: 15%; }
.cmp thead th:nth-child(7) { width: 13%; }

/* The flex containers are the inner spans, never the cells themselves — `display:flex`
   on a th/td drops it out of the table's column model and the fixed widths stop
   applying. Same reason .cmp-counts and .cmp-src exist. */
.cmp-co { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Bigger than the tiles on the card surfaces, and deliberately: on a table row the logo
   is the thing a reader scans for, and at 52px it read as a favicon sitting beside the
   name rather than as the row's identity. */
.cmp-mark {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 66px; height: 66px; border-radius: 16px;
  background: #fff1e2;
}
.cmp-mark__txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--sc-brand-deep);
}
/* contain, not cover. The tile is square and a great many company logos are not — a
   wordmark or the Nike swoosh cropped to a square loses the half that identifies it. The
   inset is small so the mark still fills nearly the whole 66px tile. */
.cmp-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
.cmp__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmp__name { font-weight: 700; font-size: 1.02rem; color: var(--sc-ink); }
.cmp__sector { font-size: 0.84rem; color: var(--sc-muted); }
.cmp__why { line-height: 1.5; }

/* Two counts with one hairline between them — the same shape as the summary strip
   above, so "findings" and "sources" mean the same thing in both places. */
.cmp-counts { display: flex; align-items: center; gap: 0; }
/* nowrap on the labels is load-bearing, not tidiness. The cell carries
   `overflow-wrap: anywhere` so a long quote or hostname cannot blow the column out, and
   that applies to every word in it — at a narrower window the label broke as "finding"
   with a lone "s" on the next line. These two words must overflow rather than break. */
.cmp-count {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 4px; text-align: center;
}
.cmp-count + .cmp-count { border-left: 1px solid var(--sc-line); }
.cmp-count__n { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--sc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-count__l { font-size: 0.76rem; color: var(--sc-muted); white-space: nowrap; }

/* Neutral chips only. The good/bad ramp (--sc-good/--sc-bad) must never leak in here:
   a chip says the company has a cited record on the issue, not which side of it, and the
   icon is topical for the same reason — no ticks, no crosses, no colour coding. */
.cmp-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
/* A chip WRAPS rather than truncates. "Environment & climate" ellipsised to
   "Environment & climat" at a narrower window, and a half-printed issue name is worse
   than a two-line pill: the reader cannot tell which issue the company has a record on,
   which is the only thing the chip is for. */
.cmp-chip {
  display: inline-block; max-width: 100%;
  padding: 4px 10px; border-radius: 14px;
  border: 1px solid var(--sc-chip-line); background: var(--sc-chip-bg);
  font-size: 0.74rem; font-weight: 600; line-height: 1.35; color: var(--sc-chip-ink);
  /* white-space and text-overflow are RESET, not merely omitted. The critical block in
     <head> is a generated snapshot of these rules, so a property this rule stops
     declaring keeps applying from that inline copy until it is regenerated — dropping
     `nowrap` silently is not the same as turning it off. */
  white-space: normal; text-overflow: clip; overflow: visible; overflow-wrap: break-word;
}
/* inline-block, NOT inline-flex. As a flex container the label is one anonymous flex
   item with `min-width: auto`, so it refuses to wrap and the pill overflows its column
   instead — the icon has to be an inline glyph in normal text flow for the label to
   break across lines at all. */
.cmp-chip i { display: inline-block; margin-right: 5px; vertical-align: -0.08em; color: var(--sc-muted); font-size: 0.88em; }
.cmp-chip--more { color: var(--sc-muted); }

.cmp__finding q { quotes: "\201C" "\201D"; font-size: 0.89rem; line-height: 1.55; color: var(--sc-body); }
.cmp-src { display: flex; flex-direction: column; gap: 4px; }
/* The publisher, as the live citation it is on every other surface. break-word, not the
   cell's `anywhere`: a hostname breaks only when it genuinely cannot fit, rather than at
   whatever character lands on the boundary. */
.cmp__host {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  font-size: 0.85rem; font-weight: 700; color: var(--sc-ink);
  text-decoration: none; overflow-wrap: break-word;
}
a.cmp__host:hover { color: var(--sc-brand-deep); text-decoration: underline; text-underline-offset: 3px; }
a.cmp__host:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 3px; border-radius: 4px; }
.cmp__host i { flex: 0 0 auto; font-size: 0.7em; color: var(--sc-muted); }
a.cmp__host:hover i { color: var(--sc-brand-deep); }
/* Same label the scorecard uses for a company's own account, and it must keep reading as
   a qualifier on the quote rather than as a category of its own. */
.cmp__flag { font-size: 0.74rem; font-weight: 600; color: var(--sc-muted); }
.cmp__reviewed { font-size: 0.8rem; color: var(--sc-muted); line-height: 1.4; }
.cmp__none { color: var(--sc-muted); font-size: 0.86rem; }

.cmp__action { text-align: right; }
/* IDENTICAL to .dir-row__go, the "View →" on /companies — same colour, size, weight and
   arrow. These two are the same control ("open this company's record") on two pages that
   sit one click apart, and they were a filled pill here and a text link there.
   Every declaration is written out rather than shared through a common class because the
   generated critical block in <head> is a snapshot of these rules: a property this one
   stops setting keeps applying from that stale inline copy until it is regenerated, so a
   pill that becomes a link has to switch its background OFF, not merely omit it. */
.cmp__go {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: none; padding: 0; border-radius: 0; box-shadow: none;
  /* Full-strength #ff7300, matching .dir-row__go exactly — see the note there. */
  color: var(--sc-brand-deep); font-size: 0.86rem; font-weight: 700; text-decoration: none;
}
.cmp__go i { transition: transform 0.15s ease; }
.cmp__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp__go:hover i { transform: translateX(3px); }
.cmp__go:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 3px; border-radius: 4px; }

/* The arrow on both of them. A stroke-width here overrides the presentation attribute in
   _icons.html, which draws every other icon on the site at 2 — the arrow is a lone glyph
   next to bold text rather than part of an icon set, and at 2 it read as a hairline. */
.cmp__go i svg, .dir-row__go i svg { stroke-width: 2.75; }
.cmp__go i, .dir-row__go i { font-size: 0.92em; }

@media (prefers-reduced-motion: reduce) {
  .cmp__go:hover { transform: none; }
  .cmp__go:hover i { transform: none; }
}

/* The note drops under the counts before the table does — it is the first thing that
   stops having room to be a sidebar. */
@media (max-width: 1420px) {
  .cmp-summary { grid-template-columns: minmax(0, 1fr); }
}

/* Below the width seven columns can hold, each row becomes a card: the company header
   stays on top, every other cell prints its column name from data-label. A horizontally
   scrolling table would technically fit, but a comparison you have to scroll sideways to
   read is not a comparison. */
@media (max-width: 1200px) {
  .cmp-wrap { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .cmp, .cmp tbody, .cmp tbody tr, .cmp tbody th, .cmp tbody td { display: block; width: auto; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* One field per line, in the same order as the columns it replaces. Deliberately NOT
     a two-column grid: the cells have wildly different heights (a chip row beside a
     four-line quote), so paired cells leave ragged hairlines and the eye loses the
     order. A ruled stack is the same vocabulary .dir-row falls back to. */
  .cmp tbody tr {
    margin: 0 0 12px; padding: 6px 18px 14px;
    border: 1px solid var(--sc-line); border-radius: 16px;
    background: var(--sc-card); box-shadow: var(--sc-shadow);
  }
  .cmp tbody tr:hover { background: var(--sc-card); }
  .cmp tbody th, .cmp tbody td { padding: 12px 0; border-bottom: 1px solid var(--sc-line); }
  .cmp tbody tr th:first-child { padding-top: 14px; }
  .cmp tbody tr td:last-child { border-bottom: 0; padding-bottom: 2px; }
  /* The column name, which the header row is no longer there to supply. */
  .cmp tbody td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 6px;
    font-size: 0.74rem; font-weight: 700; color: var(--sc-muted);
  }
  .cmp-counts { justify-content: flex-start; gap: 26px; }
  .cmp-count { flex: 0 0 auto; align-items: flex-start; padding: 0; text-align: left; }
  .cmp-count + .cmp-count { border-left: 0; }
  .cmp-chips { flex-direction: row; flex-wrap: wrap; }
  .cmp__action { text-align: left; }
}

@media (max-width: 620px) {
  .cmp-stat { flex: 1 1 100%; padding: 16px 18px; }
  /* Stacked, so the divider belongs on the TOP edge, not the left. */
  .cmp-stat + .cmp-stat { box-shadow: inset 0 1px 0 var(--sc-line); }
  .cmp-stat__n { font-size: 1.6rem; }
}

/* ── /issues: the full tag vocabulary behind the homepage's coverage number ─────
   An INDEX, not a cloud. This was 146 pills in one flowing run with a cursor-trail
   effect, which looked alive and answered nothing: you could not find a tag you had
   in mind, could not tell how many there were of anything, and the categories the
   data already carries were thrown away on the way to the page. An index of columns
   under category headings is the shape a reference list wants — you scan a column,
   not a wrapped run of chips of nine different widths.

   The items are deliberately inert: no hover lift, no pointer cursor, no link. They
   are words you read, not controls you click — the selecting happens in the extension,
   and there is no per-issue page to link to. */
/* The standard shell, NOT the near-full-bleed width this page used to take. Edge-to-edge
   was right for a wrapped run of pills, which has no structure to align to; a four-column
   index does, and at 24px gutters the first column sat against the viewport edge while
   the fourth ran under the scrollbar. */
.idx-hero > p { max-width: 66ch; }

/* Search on the left, view switch on the right. */
.idx-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 26px 0 0;
}
.idx-controls[hidden] { display: none; }
.idx-search { position: relative; flex: 1 1 100%; min-width: 0; max-width: none; }
.idx-search__icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--sc-muted); font-size: 0.9rem; pointer-events: none;
}
.idx-search__input {
  width: 100%; min-height: 50px; padding: 12px 16px 12px 42px;
  border: 1px solid var(--sc-chip-line); border-radius: 12px;
  background: var(--sc-card); color: var(--sc-ink);
  font: inherit; font-size: 0.95rem;
}
.idx-search__input::placeholder { color: var(--sc-muted); }
.idx-search__input:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 1px; border-color: var(--sc-brand); }

/* One bordered box split in two, rather than two buttons with a gap: the pair is a
   single control with two states, and a shared border is what says so. */
.idx-toggle {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--sc-chip-line); border-radius: 12px;
  background: var(--sc-card); overflow: hidden;
}
.idx-toggle__btn {
  min-height: 50px; padding: 0 22px; border: 0; background: none;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--sc-muted);
  cursor: pointer; white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.idx-toggle__btn + .idx-toggle__btn { border-left: 1px solid var(--sc-chip-line); }
.idx-toggle__btn:hover { color: var(--sc-ink); }
/* TEXT, so it takes the deep end of the ramp, not the surface colour. --orange (#ff7300)
   as a foreground measured 2.57:1 on this #fff7f0 background — well under AA — and the
   real-browser probe caught it. The brand rule is exactly this: orange surfaces stay
   #ff7300 at full strength, and contrast is fixed by darkening the TEXT. #a94a04 gives
   5.40:1 here. The active background is untouched. */
.idx-toggle__btn.is-active { color: var(--sc-brand-deep); background: #fff7f0; }
.idx-toggle__btn:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: -2px; }

/* Category rail. A ruled row of jump links, with the section you are in underlined —
   the rule under the whole rail is what the active marker sits on, so nothing moves
   when the marker changes. */
/* Chips, not underlined text tabs. 24 undifferentiated links wrapped to three rows
   and read as a tag cloud; tinting each with its family colour ties it to the icons
   in the section it jumps to. No border-bottom — a rail rule fights the pill shape. */
/* The bottom margin is not decorative. The first .idx-group draws a 1px rule as its
   border-top immediately after this rail, and at margin-bottom: 0 the last row of chips
   sat directly on that line — the pills read as if they were sitting on a shelf rather
   than as a block the rule separates from the sections below. It is larger than the 22px
   above because a hard rule needs more clearance than the gap to a search field does. */
.idx-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 26px; padding: 0;
}
/* `display: flex` above beats the browser's [hidden] rule, so hiding the rail while a
   search is narrowing the sections needs saying explicitly. */
.idx-tabs[hidden] { display: none; }
/* --dim-bg/--dim-ink come from the .dim--<tone> class the template puts on each link.
   The fallbacks are required: site.py falls back to a 'neutral' tone and .dim--neutral
   has no token block, the same guard .action-item__icon already uses. */
.idx-tabs a {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 650; text-decoration: none;
  background: var(--dim-bg, var(--sc-chip-bg));
  color: var(--dim-ink, var(--sc-body));
  transition: box-shadow 0.14s ease;
}
.idx-tabs a:hover { box-shadow: inset 0 0 0 1px var(--dim-ink, var(--sc-ink)); }
/* The section you are currently in — site.js scroll-spies this as you scroll. Every
   chip is already tinted, so colour alone cannot say "you are here"; a full-weight
   ring can, and it reads distinctly from the 1px hover ring. */
.idx-tabs a.is-active { box-shadow: inset 0 0 0 2px var(--dim-ink, var(--sc-ink)); }
.idx-tabs a:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; border-radius: 4px; }

/* In-page jump targets. Without this an anchor lands flush at y=0, so the
   heading sits on the very top edge and the eye — which rests nearer the upper
   third — skips past it onto the body copy. Covers the /issues tabs and the
   /methodology section nav. */
.idx-group,
.trust-prose > section[id] {
  scroll-margin-top: clamp(80px, 15vh, 150px);
}

.idx-group { padding: 26px 0 28px; border-bottom: 1px solid var(--sc-line); }
/* border-bottom: 0 — .idx-group already sets one and every group also carries a dim--
   class, so adjacent groups stacked a 1px #d6d6d1 bottom directly against a 1px #b8b8b8
   top: a 2px divider in two different greys. Draw it once. Padding trimmed from 26/32:
   with 24 groups it is the per-group chrome, not the item rows, that made this page
   6185px long. */
.idx-group[class*="dim--"] {
  border-top: 1px solid #b8b8b8;
  border-bottom: 0;
  padding: 20px 18px 24px;
  border-radius: 0;
}
.idx-group[hidden] { display: none; }
.idx-group > h2,
.idx-group > h3 {
  margin: 0 0 12px; font-size: 1.14rem; font-weight: 700;
  letter-spacing: -0.015em; color: var(--sc-ink);
}
/* Multi-column, not a grid: it fills DOWN each column and then across, which is what
   makes an alphabetised list readable — a 4-track grid would run A, B, C, D across the
   first row and leave the reader scanning sideways for the next letter. */
.idx-cols {
  columns: 4; column-gap: 34px;
  margin: 0; padding: 0; list-style: none;
}
.idx-item {
  /* An item must never be split across a column break. */
  break-inside: avoid;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 4px 0; font-size: 0.95rem; line-height: 1.5; color: var(--sc-body);
  overflow-wrap: anywhere;
}
/* `display: flex` above beats the browser's [hidden] rule — same reason .idx-tabs has
   to say this. Without it, searching hides nothing. */
.idx-item[hidden] { display: none; }

.idx-eyebrow {
  margin: 0 0 8px; color: var(--sc-brand-deep);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
}
.idx-summary {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
}
.idx-summary span {
  padding: 9px 13px; border: 1px solid var(--sc-chip-line); border-radius: 999px;
  background: var(--sc-card); color: var(--sc-body); font-size: 0.86rem;
}
.idx-summary strong { color: var(--sc-ink); }
.idx-catalog-section { margin-top: 42px; }
/* No border-top here. This section's h2 became the page h1, and .dir-hero already
   draws a border-bottom immediately above — keeping both left two rules 42px apart
   with nothing between them. .idx-catalog-section's margin-top does the spacing. */
.idx-catalog-section--actions {
  padding-top: 0;
}
.idx-section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 22px;
}
.idx-section-head h2 {
  margin: 0; color: var(--sc-ink); font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -0.035em; line-height: 1.1;
}
.idx-section-head > p {
  max-width: 56ch; margin: 0; color: var(--sc-muted);
  font-size: 0.92rem; line-height: 1.55;
}
.idx-cols--questions { columns: 3; }
.idx-cols--questions .idx-item {
  display: block; padding: 6px 0;
  font-size: 0.96rem; line-height: 1.55;
}
.action-groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; column-gap: 38px; margin-top: 28px;
}
.action-group {
  border: 0; border-top: 1px solid #8f8f8f; border-radius: 0;
  background: transparent; overflow: visible;
}
.action-group[class*="dim--"] { border-top: 1px solid #8f8f8f; }
.action-group[hidden] { display: none; }
.action-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 0; color: var(--sc-ink); cursor: pointer;
  font-size: 0.98rem; font-weight: 600; list-style: none;
}
.action-group summary::-webkit-details-marker { display: none; }
.action-group summary::after {
  content: "+"; order: 3; color: var(--sc-ink);
  font-size: 1.08rem; font-weight: 500; line-height: 1;
  transition: transform 160ms ease;
}
.action-group[open] summary::after { content: "−"; }
.action-group summary > span {
  margin-left: auto; padding: 0;
  color: var(--sc-muted); background: transparent;
  font-size: 0.8rem; font-weight: 500;
}
.action-group summary:hover { background: transparent; }
.action-group summary:hover::after { transform: scale(1.16); }
.action-group summary:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: -2px; }
/* Smooth open AND close, matching .sc-more / .sc-det: a <details> snaps by default because
   its content is not rendered while closed, so there is nothing to transition from.
   ::details-content is a box that exists in both states, and `interpolate-size:
   allow-keywords` (scoped here, never on :root) is what lets its height animate to the
   keyword `auto`. `allow-discrete` carries content-visibility across the switch so the
   closing direction animates instead of vanishing on frame one. Browsers without
   ::details-content simply snap, exactly as this did before. */
.action-group { interpolate-size: allow-keywords; }
.action-group::details-content {
  block-size: 0;
  overflow: hidden;
  content-visibility: hidden;
  transition: block-size 260ms ease, content-visibility 260ms allow-discrete;
}
.action-group[open]::details-content { block-size: auto; content-visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .action-group::details-content { transition: none; }
  .action-group summary::after { transition: none; }
}
.action-list {
  margin: 0; padding: 0 0 10px; list-style: none;
  border-top: 1px solid var(--sc-line);
}
.issues-main .action-item {
  position: static; overflow: visible;
  border: 0; border-bottom: 1px solid var(--sc-line); border-radius: 0;
  background: transparent; box-shadow: none;
  padding: 14px 0;
  color: var(--sc-body); line-height: 1.45;
}
.issues-main .action-item::before { display: none; }
.issues-main .action-item:last-child { border-bottom: 0; }
.issues-main .action-item[hidden] { display: none; }
.issues-main .action-item strong {
  display: block; color: var(--sc-ink); font-size: 0.9rem; font-weight: 650; line-height: 1.35;
}
.issues-main .action-item > span {
  display: block; margin-top: 4px; color: var(--sc-muted); font-size: 0.79rem;
}

/* The mark: the issue's glyph in the issue's family colour.

   A SWATCH, not a filled chip. The list is a four-column index of words, and the shape
   is load-bearing (see the note at the top of this block): 146 pills of nine different
   widths is the ragged run this layout replaced. A fixed 22px mark leaves the columns
   aligned and still carries both halves of the chip a reader meets everywhere else —
   the glyph says which issue, the fill says which area.

   The tint comes from --dim-bg/--dim-ink set by the .dim--<family> class ON THE ITEM.
   The item itself is deliberately NOT in the `[class*="dim--"]` fill list above: an
   index of 146 tinted rows would be a wall of colour, and the point of the colour is to
   group, not to shout. An item with no family keeps the neutral swatch below. */
.idx-mark {
  flex: 0 0 auto; margin-top: 1px;
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-chip-bg); color: var(--sc-muted);
  font-size: 0.78rem;
}
.idx-group[class*="dim--"] .idx-mark { background: var(--dim-bg); color: var(--dim-ink); }

/* ── the key ─────────────────────────────────────────────────────────────────
   Nine rows, one per family: the area's name, then every issue in it as the exact chip
   the directory and the scorecards draw. A grid rather than a flex row so the chips of
   all nine families start at the same x — the names are 12 to 22 characters and a flex
   lead-in would step the chip column in and out down the page. */
.idx-key { margin: 22px 0 0; padding: 4px 18px; border: 1px solid var(--sc-line); border-radius: 16px; background: var(--sc-card); }
.idx-key[open] { padding-bottom: 20px; }
.idx-key__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; cursor: pointer; list-style: none;
  font-size: 0.96rem; font-weight: 700; color: var(--sc-ink);
}
.idx-key__head::-webkit-details-marker { display: none; }
/* Chevron drawn in CSS, same as the FAQ's: pure state affordance for a control the
   browser already exposes to assistive tech, so it earns no place in the icon set. */
.idx-key__head::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--sc-brand); border-bottom: 2px solid var(--sc-brand);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.idx-key[open] .idx-key__head::after { transform: rotate(-135deg) translateY(-1px); }
.idx-key__head:hover { color: var(--sc-brand-deep); }
.idx-key__head:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .idx-key__head::after { transition: none; } }
.idx-key__note { margin: 0 0 2px; max-width: 74ch; font-size: 0.9rem; line-height: 1.55; color: var(--sc-muted); }
.idx-key__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.idx-key__row { display: grid; grid-template-columns: 15rem 1fr; align-items: baseline; gap: 6px 14px; }
.idx-key__family { font-size: 0.86rem; font-weight: 700; color: var(--sc-body); }
.idx-key__chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The chips are the site's chips and must stay legible at their own size; the index's
   words around them are 0.95rem, so nothing here overrides .dir-issue's type. */
@media (max-width: 700px) {
  .idx-key { padding: 18px 16px; }
  .idx-key__row { grid-template-columns: 1fr; gap: 5px; }
}
.idx-az { padding: 26px 0 8px; }
.idx-az[hidden] { display: none; }
.idx-empty { margin: 26px 0 0; color: var(--sc-muted); font-size: 0.97rem; }
.idx-empty[hidden] { display: none; }

@media (max-width: 1180px) { .idx-cols { columns: 3; } }
@media (max-width: 820px) {
  .idx-cols,
  .idx-cols--questions { columns: 2; }
  /* One swipeable row rather than a wrapped block. Fourteen categories wrapped to seven
     rows on a phone, which put ~380px of navigation between the search box and the first
     issue — the rail became the page. */
  .idx-tabs {
    flex-wrap: nowrap; overflow-x: auto; gap: 0 8px;
    /* overflow-y MUST be stated. Per spec, setting one axis to `auto` forces the other
       from `visible` to `auto` — so overflow-x alone made this a VERTICAL scroll
       container too. The active tab's 2px underline sits on margin-bottom:-1px, which
       makes scrollHeight exactly 1px taller than clientHeight, and on touch that 1px is
       enough for the strip to grab the gesture and rubber-band up and down under the
       reader's finger. */
    overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .idx-tabs::-webkit-scrollbar { display: none; }
  .idx-tabs a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  .idx-cols { columns: 1; }
  .idx-cols--questions { columns: 1; }
  .idx-toggle { flex: 1 1 100%; }
  .idx-toggle__btn { flex: 1 1 50%; padding: 0 12px; }
  .idx-section-head { align-items: start; flex-direction: column; gap: 10px; }
  .action-groups { grid-template-columns: 1fr; }
}

/* Request-a-tag block, closing the list: copy on the left, form on the right. */
.issue-request {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 40px; margin: 40px 0 0;
}
.issue-request__copy { flex: 1 1 420px; }
/* A DEFINITE basis, not auto: an <input>'s intrinsic width is ~20 characters, and an
   auto-sized column takes that (193px) rather than the input's flex-basis, so the box
   came out far shorter than asked for. */
.issue-request__side { flex: 0 1 700px; }
.issue-request h2 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; color: var(--sc-ink); }
.issue-request p { margin: 0; max-width: 68ch; color: var(--sc-body); line-height: 1.6; }
/* nowrap matters for sizing, not just layout: a WRAPPING flex container reports its
   largest item as its max-content width, so the side column sized to the input alone
   (348px) and pushed the button onto its own line. */
.issue-request__form { display: flex; flex-wrap: nowrap; gap: 10px; }
.issue-request__input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 18px;
  border: 1px solid var(--sc-chip-line); border-radius: 12px;
  background: var(--sc-card); color: var(--sc-ink);
  font-family: inherit; font-size: 0.95rem;
}
.issue-request__input:focus { outline: 0; border-color: var(--sc-brand); box-shadow: 0 0 0 3px rgba(255, 115, 0, 0.16); }
.issue-request__form .btn { min-height: 48px; flex: 0 0 auto; white-space: nowrap; }
.issue-request__msg { margin-top: 10px; font-size: 0.9rem; font-weight: 600; }
.issue-request__msg--ok { color: var(--sc-good); }
.issue-request__msg--err { color: var(--sc-bad); }
.issue-request a { color: var(--sc-brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* No override. This used to shrink to clamp(2rem, 4vw, 3.4rem) because the heading was
   a sentence ("108 beliefs. 94 company actions.") that set as two ~90px lines and pushed
   the index below the fold. The headings are short enough to fit on one line now, so the
   three index pages — /companies, /issues, /questions — share one scale instead of
   /companies being visibly larger than its siblings. Keep the headings under ~29
   characters or this comes back. */
.issues-main .dir-hero h1 { max-width: none; }

@media (max-width: 720px) {
  /* Stacked here, so the side must be allowed to shrink again or it overflows. */
  .issue-request__side { flex: 1 1 100%; }
  .issue-request__form { flex-wrap: wrap; }
  .issue-request__input { flex: 1 1 100%; }
}

/* CTA band (directory closing block) */
.sc-cta { margin: 36px 0; padding: 34px; border-radius: 22px; text-align: center; color: #fff;
  background: var(--orange-grad); }
.sc-cta h2 { font-size: 1.5rem; margin: 0 0 8px; }
.sc-cta p { margin: 0 auto 18px; max-width: 46ch; line-height: 1.6; }
/* /issues has no paragraph in this band, so the button would sit 8px under the
   heading. Only applies when the button directly follows it. */
.sc-cta h2 + .btn { margin-top: 18px; }
.sc-cta .btn {
  color: #241d18;
  border-color: rgba(255, 255, 255, 0.72);
  background: #fffaf4;
  box-shadow: 0 13px 30px rgba(133, 53, 0, 0.2);
}
.sc-cta .btn:hover { background: #fff; box-shadow: 0 17px 36px rgba(133, 53, 0, 0.26); }

/* ── compact footer (both pages) ──────────────────────────────────────────── */
.cpage-footer { border-top: 1px solid var(--sc-line); padding: 30px 0; margin-top: 12px; }
.cpage-footer .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cpage-footer a { color: var(--sc-muted); text-decoration: none; font-size: 0.9rem; }
.cpage-footer a:hover { color: var(--sc-brand); }
.cpage-footer .cpage-logo { font-weight: 800; color: var(--sc-ink); font-size: 1.15rem; margin-right: auto; letter-spacing: -0.04em; }

/* ── Legacy compact article measure ───────────────────────────────────────── */
.ab { max-width: 820px; padding: 2.5rem 0 4rem; }
.ab h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .75rem; }
.ab__lede { font-size: 1.12rem; line-height: 1.6; opacity: .85; margin: 0 0 2rem; max-width: 68ch; }
.ab h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
.ab p { line-height: 1.68; max-width: 68ch; }
.ab__more { margin-top: 2rem; }

/* ── Trust pages: /about, /methodology and /corrections ───────────────────── */
.trust-main { padding-bottom: 72px; }

/* ── About: one wide, unboxed founder page ───────────────────────────────── */
.about-main {
  padding-top: clamp(46px, 6vw, 92px); padding-bottom: 90px;
  color: #000;
}

.about-main .about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  align-items: start;
  gap: clamp(54px, 9vw, 150px);
  padding: 0 0 clamp(64px, 8vw, 112px);
  border-bottom: 2px solid #000;
}
.about-main .about-hero__copy h1 {
  max-width: 12ch; margin: 0;
  color: #000;
  font-size: clamp(3.4rem, 7vw, 7.4rem);
  font-weight: 800; line-height: 0.96;
  letter-spacing: -0.065em; text-wrap: balance;
}
.about-main .about-lede {
  max-width: 60ch; margin: 34px 0 0;
  color: #000;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.72;
}

.about-main .about-portrait { width: 100%; margin: 0 16px 16px 0; }
.about-main .about-portrait__frame {
  position: relative;
  display: block; width: 100%;
}
.about-main .about-portrait__frame::after {
  content: "";
  position: absolute; z-index: 0;
  inset: 16px -16px -16px 16px;
  background: var(--sc-brand);
}
.about-main .about-portrait picture {
  position: relative; z-index: 1;
  display: block;
}
.about-main .about-portrait img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  aspect-ratio: 288 / 338; object-fit: cover;
  border: 0; border-radius: 0;
}
.about-main .about-portrait__contact {
  margin-top: 38px;
}

/* Inline prose links. The global reset is `a { color: inherit; text-decoration:
   none }`, so without this an in-body link is invisible. Same treatment as
   .trust-page .trust-prose a, which does not reach .about-main. */
.about-main .about-section__body a {
  color: #000;
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.about-main .about-section__body a:hover,
.about-main .about-section__body a:focus-visible {
  color: var(--sc-brand);
  text-decoration-color: var(--sc-brand);
}

.about-main .about-story { width: 100%; }
.about-main .about-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(44px, 8vw, 140px);
  padding: clamp(54px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--sc-line);
}
.about-main .about-section h2 {
  max-width: 10ch; margin: 0;
  color: #000;
  font-size: clamp(2rem, 3.6vw, 4.15rem);
  line-height: 1.03; letter-spacing: -0.055em;
}
.about-main .about-section__body { max-width: none; }
.about-main .about-section__body p {
  max-width: 78ch; margin: 0;
  color: #000;
  font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.78;
}
.about-main .about-section__body p + p { margin-top: 22px; }

.about-main .about-points {
  margin: 0 0 28px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.about-main .about-point {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 108px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 3.5vw, 48px) 0;
}
.about-main .about-point + .about-point { border-top: 2px solid #000; }
.about-main .about-point > span {
  color: #000;
  font-size: clamp(2rem, 3.4vw, 3.7rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.about-main .about-point__copy h3 {
  margin: 0 0 12px;
  color: #000;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.about-main .about-point p {
  max-width: 64ch;
  margin: 0 !important;
}
.about-main .about-coverage {
  max-width: 62ch !important;
  font-weight: 600;
}

.about-main .about-links {
  display: flex; flex-wrap: wrap; gap: 13px 28px;
  margin-top: 26px;
}
.about-main .about-links a {
  position: relative;
  color: #000;
  font-weight: 700;
  text-decoration: none;
}
.about-main .about-links a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: #000;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}
.about-main .about-links a:hover::after,
.about-main .about-links a:focus-visible::after {
  transform: scaleX(1);
}
.about-main .about-links a:hover { color: #000; }
.about-main .about-links--social {
  gap: 18px;
}
.about-main .about-links--social a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}
.about-main .about-links--social .social-icon {
  width: 22px;
  height: 22px;
}
.about-main .about-email {
  position: relative;
  color: #000;
  font-weight: 700;
  text-decoration: none;
}
.about-main .about-email::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: #000;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}
.about-main .about-email:hover::after,
.about-main .about-email:focus-visible::after {
  transform: scaleX(1);
}
.about-main .about-email:hover { color: #000; }
.about-main .about-email {
  display: inline-block;
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  word-break: break-word;
}
.about-main .about-portrait__contact .about-links--social {
  justify-content: flex-start;
  margin-top: 18px;
}

.trust-crumb {
  display: flex; align-items: center; gap: 9px;
  padding: 24px 0 0;
  color: var(--sc-muted); font-size: 0.82rem; font-weight: 600;
}
.trust-crumb a { color: var(--sc-muted); text-decoration: none; }
.trust-crumb a:hover { color: var(--sc-ink); text-decoration: underline; }
.trust-crumb span[aria-hidden] { color: var(--sc-line); }

.trust-hero {
  position: relative;
  margin-top: 24px; padding: clamp(36px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid #f2d8bc; border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 115, 0, 0.17), transparent 28%),
    linear-gradient(135deg, #fff9f1 0%, #fff0df 100%);
}
.trust-hero::after {
  content: "";
  position: absolute; width: 210px; height: 210px; right: -90px; bottom: -125px;
  border-radius: 47% 53% 67% 33% / 52% 42% 58% 48%;
  background: var(--orange-grad); opacity: 0.13; transform: rotate(18deg);
}
.trust-hero--founder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 288px);
  align-items: center; gap: clamp(36px, 7vw, 92px);
}
.trust-hero--article { max-width: 980px; }
.trust-hero__copy { position: relative; z-index: 1; }
.trust-kicker {
  margin: 0 0 10px;
  color: var(--sc-brand-deep);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trust-hero h1 {
  max-width: 18ch; margin: 0;
  color: var(--sc-ink);
  font-size: clamp(2.2rem, 5.4vw, 4.65rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.055em; text-wrap: balance;
}
.trust-hero--article h1 {
  max-width: 20ch;
  font-size: clamp(2.15rem, 4.8vw, 4.1rem);
}
.trust-lede {
  max-width: 64ch; margin: 24px 0 0;
  color: var(--sc-body); font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.7;
}

.founder-portrait {
  position: relative; z-index: 1;
  width: min(100%, 288px); margin: 0; justify-self: end;
  overflow: hidden;
  border: 7px solid #fff; border-radius: 24px;
  background: #211b18;
  box-shadow: 0 24px 54px rgba(89, 48, 15, 0.2);
}
.founder-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 288 / 338; object-fit: cover;
}
.founder-portrait figcaption {
  display: grid; gap: 2px; padding: 14px 16px 13px;
  color: var(--sc-ink); background: #fff;
}
.founder-portrait figcaption strong { font-size: 0.95rem; }
.founder-portrait figcaption span { color: var(--sc-muted); font-size: 0.78rem; }

.trust-prose {
  width: min(100%, 920px); margin: 0 auto;
}
.trust-prose > section { padding: 62px 0 0; }
.trust-prose h2 {
  max-width: 24ch; margin: 0 0 18px;
  color: var(--sc-ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.15;
  letter-spacing: -0.035em; text-wrap: balance;
}
.trust-prose h3 {
  margin: 10px 0 9px; color: var(--sc-ink);
  font-size: 1.08rem; line-height: 1.35;
}
.trust-prose p {
  max-width: 72ch; margin: 0;
  color: var(--sc-body); line-height: 1.78;
}
.trust-prose p + p { margin-top: 18px; }
.trust-prose a { color: #a84600; text-underline-offset: 3px; }
.trust-prose p a,
.trust-prose li a { text-decoration: underline; }
.trust-prose a:hover { color: var(--sc-ink); }

.trust-principles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  margin: 26px 0 28px;
}
.trust-principle {
  padding: 26px;
  border: 1px solid var(--sc-line); border-radius: 18px;
  background: #fff; box-shadow: var(--sc-shadow);
}
.trust-principle__number {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: #fff; background: var(--orange-grad);
  font-size: 0.76rem; font-weight: 800;
}
.trust-principle p { color: var(--sc-muted); font-size: 0.91rem; line-height: 1.65; }

.trust-independence {
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 48px;
  width: calc(100% + 80px); margin-left: -40px; padding: 40px !important;
  border: 1px solid #f0d0ae; border-radius: 22px;
  background: #fff5e9;
}
.trust-independence h2 { margin-bottom: 0; }

.trust-link-grid { display: grid; gap: 10px; margin-top: 26px; }
.trust-link {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 18px 20px;
  border: 1px solid var(--sc-line); border-radius: 14px;
  color: var(--sc-ink) !important; background: #fff;
  text-decoration: none; transition: border-color 160ms ease, transform 160ms ease;
}
.trust-link:hover { border-color: #f2b77f; transform: translateX(3px); }
.trust-link span { display: grid; gap: 3px; }
.trust-link strong { font-size: 0.98rem; }
.trust-link small { color: var(--sc-muted); font-size: 0.8rem; }
.trust-link i { color: var(--sc-brand); font-size: 0.85rem; }

.trust-contact {
  padding: 34px !important; margin-top: 62px;
  border-radius: 20px; color: #fff;
  background: #282019;
}
.trust-contact .trust-kicker { color: #ffad68; }
.trust-contact h2 { color: #fff; }
.trust-contact p { color: #f7ede4; }
.trust-contact a { color: #ffb577; }

.method-nav {
  display: flex; flex-wrap: wrap; gap: 9px;
  width: min(100%, 920px); margin: 24px auto 0;
}
.method-nav a {
  padding: 9px 12px;
  border: 1px solid var(--sc-line); border-radius: 999px;
  color: var(--sc-body); background: #fff;
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
}
.method-nav a:hover { border-color: #f2b77f; color: var(--sc-brand-deep); }

.method-note {
  max-width: 72ch; margin-top: 24px; padding: 22px 24px;
  border-left: 4px solid var(--sc-brand); border-radius: 0 15px 15px 0;
  background: #fff4e8;
}
.method-note strong { display: block; margin-bottom: 6px; color: var(--sc-ink); }
.method-note p { color: var(--sc-body); font-size: 0.92rem; line-height: 1.7; }
.method-note--warning { background: #fff0df; }

.method-source-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 28px 0;
}
.method-source-grid > div {
  padding: 22px;
  border: 1px solid var(--sc-line); border-radius: 16px;
  background: #fff;
}
.method-source-grid p,
.method-source-split p {
  color: var(--sc-muted); font-size: 0.89rem; line-height: 1.68;
}

.method-source-split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin: 30px 0;
  overflow: hidden;
  border: 1px solid #f0d0ae; border-radius: 20px;
}
.method-source-split > div { padding: 28px; background: #fff8ef; }
.method-source-split > div + div {
  border-left: 1px solid #f0d0ae; background: #fff1df;
}

.method-steps {
  margin: 28px 0 0; padding: 0; list-style: none; counter-reset: method;
}
.method-steps li {
  position: relative; counter-increment: method;
  padding: 0 0 30px 68px;
  border-left: 1px solid var(--sc-line);
}
.method-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.method-steps li::before {
  content: counter(method, decimal-leading-zero);
  position: absolute; top: -3px; left: -22px;
  display: grid; place-items: center; width: 43px; height: 43px;
  border-radius: 13px; color: #fff; background: var(--orange-grad);
  font-size: 0.72rem; font-weight: 800;
}
.method-steps strong {
  display: block; margin-bottom: 7px; color: var(--sc-ink); font-size: 1.04rem;
}
.method-steps p { color: var(--sc-muted); font-size: 0.93rem; line-height: 1.7; }

.method-threshold {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 28px 0; padding: 0; list-style: none;
}
.method-threshold li {
  min-height: 164px; padding: 24px;
  border: 1px solid #f0d0ae; border-radius: 18px;
  background: #fff5e9;
}
.method-threshold strong {
  display: block; margin-bottom: 12px;
  color: var(--sc-ink); font-size: 1.05rem; line-height: 1.35;
}
.method-threshold span { color: var(--sc-muted); font-size: 0.87rem; line-height: 1.65; }
.trust-prose code {
  padding: 2px 6px; border-radius: 5px;
  color: var(--sc-ink); background: #f4ece5; font-size: 0.9em;
}

.trust-list { display: grid; gap: 12px; max-width: 72ch; margin: 22px 0 0; padding-left: 22px; }
.trust-list li { padding-left: 6px; color: var(--sc-body); line-height: 1.7; }
.trust-list li::marker { color: var(--sc-brand); }
/* A paragraph after a list had no spacing at all: .trust-list carries no bottom margin
   and `.trust-prose p + p` cannot see across the list between them. Never visible on
   /methodology, where every section is a grid and row-gap does the job — only on
   /privacy-policy, which wraps its content in .privacy-section__body, so the two are
   ordinary flow siblings. It hit the waitlist deletion link before it hit anything new. */
.trust-prose .trust-list + p { margin-top: 18px; }
.trust-email-btn { margin-top: 28px; }

@media (max-width: 780px) {
  .about-main { padding-top: 42px; padding-bottom: 56px; }
  .about-main .about-hero {
    grid-template-columns: 1fr; gap: 52px;
    padding-bottom: 62px;
  }
  .about-main .about-hero__copy h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .about-main .about-lede { margin-top: 24px; }
  .about-main .about-portrait { width: min(86vw, 348px); margin-right: 14px; margin-bottom: 14px; }
  .about-main .about-portrait__frame::after { inset: 14px -14px -14px 14px; }
  .about-main .about-section {
    grid-template-columns: 1fr; gap: 24px;
    padding: 48px 0;
  }
  .about-main .about-section h2 { max-width: 13ch; }
  .about-main .about-section__body p { font-size: 1rem; line-height: 1.72; }

  .trust-main { padding-bottom: 50px; }
  .trust-crumb { padding-top: 18px; }
  .trust-hero { margin-top: 18px; padding: 30px 23px; border-radius: 22px; }
  .trust-hero--founder { grid-template-columns: 1fr; gap: 30px; }
  .trust-hero h1, .trust-hero--article h1 { font-size: clamp(2.05rem, 11vw, 3.15rem); }
  .founder-portrait { justify-self: start; width: min(78vw, 288px); }
  .trust-prose > section { padding-top: 48px; }
  .trust-principles { grid-template-columns: 1fr; }
  .trust-independence {
    grid-template-columns: 1fr; gap: 22px;
    width: 100%; margin-left: 0; padding: 27px !important;
  }
  .method-nav { gap: 7px; }
  .method-nav a { padding: 8px 10px; font-size: 0.73rem; }
  .method-source-grid,
  .method-source-split,
  .method-threshold { grid-template-columns: 1fr; }
  .method-source-split > div + div { border-left: 0; border-top: 1px solid #f0d0ae; }
  .method-threshold li { min-height: 0; }
  .trust-contact { padding: 27px !important; }
}

/* ── Wide trust pages: plain type, no cards, no breadcrumb furniture ─────────
   Scoped to .trust-page so none of these generic section names can leak into the
   homepage through the generated critical stylesheet. */
.trust-page {
  padding-top: clamp(46px, 6vw, 92px);
  padding-bottom: 90px;
  color: #000;
}

.trust-page .trust-hero {
  position: static;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(54px, 7vw, 92px);
  overflow: visible;
  border: 0;
  border-bottom: 2px solid #000;
  border-radius: 0;
  background: transparent;
}
.trust-page .trust-hero::after { display: none; }
.trust-page .trust-hero__copy { position: static; }
.trust-page .trust-hero h1,
.trust-page .trust-hero--article h1 {
  max-width: 15ch;
  margin: 0;
  color: #000;
  font-size: clamp(3.35rem, 7vw, 7rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.trust-page .trust-lede {
  max-width: 68ch;
  margin: 30px 0 0;
  color: #000;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.72;
}
.trust-page .privacy-updated {
  margin: 20px 0 0;
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
}

.trust-page .method-nav {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 0;
  gap: 10px 28px;
  border-bottom: 2px solid #000;
}
.trust-page .method-nav a {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #000;
  background: transparent;
  font-size: 0.82rem;
  text-decoration: none;
}
.trust-page .method-nav a:hover { color: #000; }
.trust-page .method-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: #000;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}
.trust-page .method-nav a:hover::after,
.trust-page .method-nav a:focus-visible::after {
  transform: scaleX(1);
}

.privacy-page .method-nav {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  justify-content: space-between;
  column-gap: clamp(24px, 4vw, 80px);
}
.methodology-page .method-nav {
  display: grid;
  grid-template-columns: repeat(7, max-content);
  justify-content: space-between;
  column-gap: clamp(10px, 1.6vw, 36px);
}

.trust-page .trust-prose {
  width: 100%;
  max-width: none;
  margin: 0;
}
.trust-page .trust-prose > section {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  column-gap: clamp(44px, 8vw, 140px);
  row-gap: 18px;
  width: 100%;
  margin: 0;
  padding: clamp(54px, 7vw, 92px) 0 !important;
  border: 0;
  border-bottom: 1px solid var(--sc-line);
  border-radius: 0;
  color: #000;
  background: transparent;
  box-shadow: none;
}
.trust-page .trust-prose > section:last-child { border-bottom: 0; }
.trust-page .trust-prose > section > h2 {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
.trust-page .trust-prose > section > :not(h2) { grid-column: 2; }
.trust-page .trust-prose h2 {
  max-width: 11ch;
  margin: 0;
  color: #000;
  font-size: clamp(2rem, 3.6vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.055em;
}
.trust-page .trust-prose h3 {
  margin: 30px 0 10px;
  color: #000;
  font-size: 1.1rem;
}
.trust-page .trust-prose h3:first-child { margin-top: 0; }
.trust-page .trust-prose p,
.trust-page .trust-prose li,
.trust-page .trust-prose strong,
.trust-page .method-source-grid p,
.trust-page .method-source-split p,
.trust-page .method-steps p,
.trust-page .method-threshold span {
  color: #000;
}
.trust-page .trust-prose p {
  max-width: none;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
}
.trust-page .trust-prose a {
  color: #000;
  text-decoration-color: #000;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.trust-page .trust-prose a:hover { color: #000; }

.trust-page .method-note {
  max-width: none;
  margin-top: 26px;
  padding: 2px 0 2px 22px;
  border: 0;
  border-left: 5px solid var(--sc-brand);
  border-radius: 0;
  background: transparent;
}
.trust-page .method-note strong { margin-bottom: 6px; color: #000; }
.trust-page .method-note p { font-size: 0.95rem; }

.trust-page .method-source-grid {
  gap: 14px 34px;
  margin: 30px 0;
}
.trust-page .method-source-grid > div {
  padding: 18px 0 0;
  border: 0;
  border-top: 2px solid #000;
  border-radius: 0;
  background: transparent;
}
.trust-page .method-source-grid h3 { margin-top: 0; }

.trust-page .method-source-split {
  gap: 42px;
  margin: 34px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
.trust-page .method-source-split > div {
  padding: 0;
  background: transparent;
}
.trust-page .method-source-split > div + div {
  padding-left: 42px;
  border: 0;
  border-left: 2px solid #000;
  background: transparent;
}

.trust-page .method-steps { margin-top: 30px; }
.trust-page .method-steps li {
  padding: 0 0 30px 58px;
  border: 0;
}
.trust-page .method-steps li::before {
  top: -2px;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--sc-brand);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1.2;
}
.trust-page .method-steps strong { color: #000; font-size: 1.05rem; }
.trust-page .method-steps p { font-size: 0.95rem; }

.methodology-page #claim-processing {
  grid-template-columns: 1fr;
  row-gap: clamp(30px, 4vw, 54px);
}
.methodology-page #claim-processing > h2 {
  grid-column: 1;
  grid-row: auto;
  max-width: none;
}
.methodology-page #claim-processing > .method-steps {
  grid-column: 1;
  display: block;
  margin: 0;
}
.methodology-page #claim-processing .method-steps li {
  display: grid;
  grid-template-columns: minmax(64px, 0.16fr) minmax(230px, 0.56fr) minmax(0, 1.28fr);
  column-gap: clamp(26px, 4vw, 68px);
  align-items: baseline;
  padding: clamp(22px, 2.2vw, 34px) 0;
  border-top: 2px solid #000;
}
.methodology-page #claim-processing .method-steps li:last-child { border-bottom: 2px solid #000; }
.methodology-page #claim-processing .method-steps li::before {
  position: static;
  display: block;
  margin: 0;
  color: #000;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.methodology-page #claim-processing .method-steps strong {
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.26rem);
  line-height: 1.35;
}
.methodology-page #claim-processing .method-steps p {
  margin: 0;
  font-size: clamp(0.94rem, 1vw, 1.02rem);
  line-height: 1.7;
}

.trust-page .method-threshold {
  gap: 28px;
  margin: 30px 0;
}
.trust-page .method-threshold li {
  min-height: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 3px solid #000;
  border-radius: 0;
  background: transparent;
}
.trust-page .method-threshold strong { color: #000; }

.trust-page .trust-list {
  max-width: none;
  margin-top: 22px;
}
.trust-page .trust-list li { color: #000; }
.trust-page .trust-list li::marker { color: #000; }

.trust-page .trust-independence {
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr) !important;
  column-gap: clamp(44px, 8vw, 140px) !important;
  row-gap: 18px !important;
  width: 100%;
  margin: 0;
}
.trust-page .trust-independence > div:first-child { grid-column: 1; }
.trust-page .trust-independence > div:last-child { grid-column: 2; }
.trust-page .trust-independence h2 { max-width: 11ch; }
.trust-page .trust-contact {
  margin-top: 0;
  color: #000;
  background: transparent;
}
.trust-page .trust-contact h2,
.trust-page .trust-contact p,
.trust-page .trust-contact a { color: #000; }

.trust-page .trust-email-link {
  display: inline-block;
  margin-top: 26px;
  color: #000;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.trust-page .privacy-section__body { min-width: 0; }
.trust-page .privacy-section__body > p:first-child { margin-top: 0; }
.trust-page .privacy-section__body code,
.trust-page .trust-prose code {
  padding: 1px 5px;
  border-radius: 0;
  color: #000;
  background: #ededed;
}
.trust-page .waitlist-erase {
  max-width: 38rem;
  margin-top: 28px;
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid #000;
}
.trust-page .waitlist-erase input {
  width: 100%;
  margin: 10px 0;
  padding: 11px 12px;
  border: 2px solid #000;
  border-radius: 0;
  color: #000;
  background: #fff;
  font: inherit;
}
.trust-page .waitlist-erase button {
  padding: 11px 16px;
  border: 2px solid #000;
  border-radius: 0;
  color: #fff;
  background: #000;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 780px) {
  .trust-page {
    padding-top: 42px;
    padding-bottom: 56px;
  }
  .trust-page .trust-hero { padding-bottom: 58px; }
  .trust-page .trust-hero h1,
  .trust-page .trust-hero--article h1 {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }
  .trust-page .method-nav { gap: 10px 22px; }
  .privacy-page .method-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 24px;
  }
  .methodology-page .method-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 24px;
  }
  .trust-page .trust-prose > section,
  .trust-page .trust-independence {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px 0 !important;
  }
  .trust-page .trust-prose > section > h2,
  .trust-page .trust-prose > section > :not(h2),
  .trust-page .trust-independence > div:first-child,
  .trust-page .trust-independence > div:last-child {
    grid-column: 1;
    grid-row: auto;
  }
  .trust-page .trust-prose h2 { max-width: 13ch; }
  .trust-page .method-source-grid,
  .trust-page .method-source-split,
  .trust-page .method-threshold {
    grid-template-columns: 1fr;
  }
  .methodology-page #claim-processing .method-steps li {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
    align-items: start;
  }
  .methodology-page #claim-processing .method-steps li::before {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .methodology-page #claim-processing .method-steps strong,
  .methodology-page #claim-processing .method-steps p {
    grid-column: 2;
  }
  .trust-page .method-source-split { gap: 28px; }
  .trust-page .method-source-split > div + div {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 2px solid #000;
  }
}
@media (max-width: 520px) {
  .methodology-page .method-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-page .method-nav a::after { transition: none; }
  .about-main .about-links a::after { transition: none; }
  .about-main .about-email::after { transition: none; }
  .trust-link { transition: none; }
}

/* ── Retired FAQ component ───────────────────────────────────────────────── */
.faq { margin: 1.5rem 0 2.5rem; border-top: 1px solid var(--sc-line); }
.faq__item { border-bottom: 1px solid var(--sc-line); }
.faq__q {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 650; line-height: 1.45;
}
.faq__q::-webkit-details-marker { display: none; }
/* The chevron is drawn in CSS rather than added to the icon set: it is pure state
   affordance for a control the browser already exposes to assistive tech. */
.faq__q::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--sc-brand); border-bottom: 2px solid var(--sc-brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__q:hover { color: var(--sc-brand-deep); }
.faq__a { padding: 0 0 1.15rem; max-width: 68ch; }
.faq__a p { margin: 0; line-height: 1.68; color: var(--sc-muted); }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* ── issue chip layout ───────────────────────────────────────────────────────
   At the END of the file on purpose. The base .dir-issue / .sc-alt__issue rules set
   `display: inline-block`, and they are declared later in the source than the colour
   block; an inline-flex declared before them loses the cascade and the icon ends up
   jammed against its label with no gap. Same specificity, so position is what decides. */
.dir-issue, .sc-alt__issue, .sc-topics a {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 10px; padding-right: 11px;
}
.dir-issue i, .sc-alt__issue i, .sc-topics a i {
  font-size: 0.88em; opacity: 0.85; flex: 0 0 auto;
}
.sc-topics a[class*="dim--"]:hover { border-color: var(--dim-ink); color: var(--dim-ink); }

/* ── Exact-action company record ─────────────────────────────────────────── */
.action-record__hero { padding-bottom: 1.5rem; }
.action-record__deck { max-width: none; font-weight: 700; }
.sc-overview-source { margin: -.6rem 0 .85rem; font-size: .78rem; }
.sc-overview-source a {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--sc-link); font-weight: 750; text-decoration: none;
}
.sc-overview-source a:hover { text-decoration: underline; }
.action-record__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: 2rem; align-items: start; padding: 1.5rem 0 4rem;
}
.action-record__main { min-width: 0; }
.action-record__heading {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1rem; padding-bottom: 1rem;
}
.action-record__heading h2, .action-pending h2 {
  margin: .15rem 0 0; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.08;
}
.action-record__heading > p {
  margin: 0; color: var(--sc-muted); font-weight: 800; white-space: nowrap;
}
.action-record__list {
  display: grid; gap: 0;
  border-top: 1px solid var(--sc-line);
}
.action-item {
  position: relative; overflow: visible; padding: 1.35rem 0;
  border: 0; border-bottom: 1px solid var(--sc-line);
  border-radius: 0; background: transparent; box-shadow: none;
}
.action-item::before { content: none; display: none; }
.action-item__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 0;
}
.action-item__top .action-chip {
  font-size: .76rem; font-weight: 750; text-decoration: none;
}
.action-item__top .action-chip:hover {
  border-color: var(--dim-ink);
}
.action-state {
  border-radius: 999px; padding: .34rem .58rem;
  font-size: .69rem; font-weight: 900; line-height: 1;
}
.action-state--supports { color: #176832; background: #e4f7e8; }
.action-state--opposes { color: #9a321e; background: #fff0e9; }
.action-state--mixed { color: #6d4d08; background: #fff3ca; }
.action-state--unproven { color: #6d4d08; background: #fff3ca; }
.action-state--announced { color: #185e86; background: #e7f4fb; }
.action-state--reversed { color: #5d6572; background: #eef0f3; }
.action-item > h3 {
  margin: .8rem 0 .25rem;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.18;
}
.action-item__definition,
.action-item__summary {
  max-width: 50rem; margin: 0 0 1rem; color: var(--sc-muted); line-height: 1.45;
}
.action-item__summary { color: var(--sc-body); }
.action-evidence { margin-top: .2rem; border: 0; }
.action-evidence__copy {
  position: relative; max-width: 52rem; overflow: hidden;
  transition: height 260ms cubic-bezier(.2, .75, .25, 1);
}
.action-evidence__preview {
  width: 100%; margin: 0; padding: .2rem 0 .85rem;
  color: var(--sc-body); line-height: 1.45;
}
.action-evidence__control {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: .42rem;
  min-height: 32px; padding: .35rem 0;
  border: 0; border-radius: 0;
  background: transparent; color: var(--sc-link); font: inherit;
  font-size: .78rem; font-weight: 700; cursor: pointer;
}
.action-evidence__control strong {
  color: var(--sc-muted); font-size: inherit; font-weight: 650;
}
.action-evidence__control::after {
  width: .48rem; height: .48rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg);
  transition: transform 220ms ease;
}
.action-evidence.is-open .action-evidence__control::after { transform: rotate(225deg); }
.action-evidence__control:hover {
  color: var(--sc-ink); text-decoration: underline;
}
.action-evidence__control:focus-visible {
  outline: 2px solid var(--sc-brand); outline-offset: 2px;
}
.action-evidence__reveal {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition:
    grid-template-rows 280ms cubic-bezier(.2, .75, .25, 1),
    opacity 180ms ease,
    visibility 0s linear 280ms;
}
.action-evidence.is-open .action-evidence__reveal {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition:
    grid-template-rows 280ms cubic-bezier(.2, .75, .25, 1),
    opacity 220ms ease 45ms,
    visibility 0s;
}
.action-evidence__reveal-inner { min-height: 0; overflow: hidden; }
.action-evidence__rows {
  margin-top: .85rem; border-top: 1px solid var(--sc-line);
  background: rgb(255 255 255 / 60%);
}
.action-evidence__row {
  display: grid; grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 1rem; padding: .85rem 0;
}
.action-evidence__row + .action-evidence__row { border-top: 1px solid var(--sc-line); }
.action-evidence__row time {
  color: var(--sc-muted); font-size: .78rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.action-evidence__row p { margin: 0 0 .55rem; line-height: 1.45; }
.action-evidence__row--primary { background: transparent; }
.action-evidence__row a {
  display: inline-flex; align-items: center; gap: .3rem; color: var(--sc-link);
  font-size: .78rem; font-weight: 900; text-decoration: none;
}
.action-evidence__row a:hover { text-decoration: underline; }
.action-evidence__direction {
  display: inline-block; margin-bottom: .42rem; color: var(--sc-muted);
  font-size: .7rem; font-weight: 900; text-transform: uppercase;
}
.action-evidence__status {
  display: inline-block; margin: 0 0 .42rem; padding: .2rem .42rem;
  border-radius: 999px; background: var(--sc-chip-bg); color: var(--sc-muted);
  font-size: .68rem; font-weight: 850; line-height: 1.1;
}
.action-evidence__status--unproven,
.action-evidence__status--pending { background: #fff3ca; color: #6d4d08; }
.action-evidence__status--disputed { background: #fff0e9; color: #9a321e; }
.action-evidence__status--proven { background: #e4f7e8; color: #176832; }
.action-evidence__status--promise,
.action-evidence__status--record { background: #e7f4fb; color: #185e86; }
@media (prefers-reduced-motion: reduce) {
  .action-evidence__copy,
  .action-evidence__preview,
  .action-evidence__reveal,
  .action-evidence__control::after { transition: none; }
}
.action-pending {
  display: flex; gap: 1rem; align-items: flex-start; border: 1px solid #ffd6b4;
  border-radius: 1rem; padding: 1.35rem; background: #fff8f1;
}
.action-pending__mark {
  display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem;
  place-items: center; border-radius: 50%; color: #fff;
  background: var(--sc-brand); font-size: 1.15rem;
}
.action-pending p:last-child {
  max-width: 46rem; margin: .55rem 0 0; color: var(--sc-muted); line-height: 1.5;
}
.action-leaders {
  margin-top: 1.25rem; border-top: 1px solid var(--sc-line); padding: 1.5rem .1rem 0;
}
.action-leaders__heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.action-leaders__heading h2 { margin: .2rem 0 0; }
.action-leaders__count {
  flex: 0 0 auto; color: var(--sc-muted); font-size: .85rem; font-weight: 700;
}
.action-leaders__lede {
  max-width: 48rem; margin: .5rem 0 0; color: var(--sc-muted); line-height: 1.5;
}
.action-leaders__group-title {
  margin: 1.25rem 0 .7rem;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.action-leaders__group-note {
  max-width: 50rem;
  margin: -.3rem 0 .8rem;
  color: var(--sc-muted);
  font-size: .78rem;
  line-height: 1.45;
}
.action-leaders__list {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 18rem));
  gap: .85rem;
}
.action-leader {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--sc-line); border-radius: 1rem; background: #fff;
}
.action-leader__photo {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%; aspect-ratio: 3 / 2;
  background: linear-gradient(145deg, #fff8ef, var(--sc-chip-bg));
  border-bottom: 1px solid var(--sc-line);
  color: var(--sc-brand-deep); font-size: 2rem; font-weight: 850;
}
.action-leader__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #fff;
}
.action-leader__body { min-width: 0; padding: .9rem 1rem 1rem; }
.action-leader__body h3 {
  margin: 0; color: var(--sc-ink); font-size: 1.05rem;
}
.action-leader__role {
  margin: .18rem 0 0; color: var(--sc-body); font-size: .82rem; line-height: 1.35;
}
.action-leader__influence {
  margin: .34rem 0 0;
  color: var(--sc-muted);
  font-size: .74rem;
  line-height: 1.4;
}
.action-leader__photo-state {
  margin: .28rem 0 0; color: var(--sc-muted); font-size: .72rem;
}
.action-leader__portrait-review details {
  margin-top: .35rem; color: var(--sc-muted); font-size: .72rem; line-height: 1.45;
}
.action-leader__portrait-review summary {
  width: fit-content; color: var(--sc-link); font-weight: 750; cursor: pointer;
}
.action-leader__portrait-review details > p { margin: .45rem 0 0; }
.action-leader__portrait-review ul {
  display: grid; gap: .25rem; margin: .45rem 0 0; padding-left: 1rem;
}
.action-leader__portrait-review a {
  color: var(--sc-link); font-weight: 700; text-decoration: none;
}
.action-leader__portrait-review a:hover { text-decoration: underline; }
.action-leader__portrait-review svg { width: .68rem; height: .68rem; }
.action-leader__actions {
  margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--sc-line);
}
.action-leader__actions > p {
  margin: 0; color: var(--sc-muted); font-size: .72rem; font-weight: 800;
}
.action-leader__actions ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.action-leader__actions li {
  display: grid; gap: .15rem; padding: .35rem 0;
  color: var(--sc-body); font-size: .77rem; line-height: 1.35;
}
.action-leader__actions a {
  display: inline-flex; align-items: center; gap: .2rem; width: fit-content;
  color: var(--sc-link); font-size: .72rem; font-weight: 750; text-decoration: none;
}
.action-leader__actions a:hover { text-decoration: underline; }
.action-leader__actions svg { width: .68rem; height: .68rem; }
.action-brands {
  margin-top: 1.25rem; border-top: 1px solid var(--sc-line); padding: 1.5rem .1rem 0;
}
.action-brands__heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.action-brands__heading h2 { margin: .2rem 0 0; }
.action-brands__eyebrow {
  color: var(--sc-brand); font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.action-brands__count {
  flex: 0 0 auto; color: var(--sc-muted); font-size: .85rem; font-weight: 700;
}
.action-brands__lede {
  max-width: 46rem; margin: .5rem 0 0; color: var(--sc-muted); line-height: 1.5;
}
.action-brands__list {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem; border-top: 1px solid var(--sc-line);
}
.action-brands__list > li { min-width: 0; border-bottom: 1px solid var(--sc-line); }
.action-brands__more { margin-top: .8rem; }
.action-brands__more > summary {
  display: grid; grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center; gap: .9rem; width: 100%; cursor: pointer;
  color: var(--sc-link); font-size: .88rem; font-weight: 800;
  list-style: none; text-align: center;
}
.action-brands__more > summary::-webkit-details-marker { display: none; }
.action-brands__more > summary::before,
.action-brands__more > summary::after {
  height: 1px; background: var(--sc-line); content: "";
}
.action-brands__more[open] > summary { margin-bottom: .8rem; }
.action-brands__more .action-brands__list { margin-top: 0; }
.action-brand {
  min-width: 0; display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center; gap: 1rem; padding: 1rem .15rem;
  color: inherit; text-decoration: none;
  transition: color 150ms ease, padding 150ms ease;
}
.action-brand:not(.action-brand--static):hover { padding-inline: .5rem; color: var(--sc-brand); }
.action-brand:not(.action-brand--static):focus-visible {
  outline: 2px solid var(--sc-brand); outline-offset: 2px;
}
.action-brand__mark {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 4.5rem; height: 4.5rem; border-radius: 1rem;
  background: var(--sc-chip-bg); border: 1px solid var(--sc-chip-line);
  color: var(--sc-brand-deep); font-size: .9rem; font-weight: 800;
}
.action-brand__mark img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff;
}
.action-brand__body { min-width: 0; display: grid; gap: .08rem; }
.action-brand__name {
  color: var(--sc-ink); font-weight: 700; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-brand__kind { color: var(--sc-muted); font-size: .77rem; }
.action-brand__go {
  color: var(--sc-link); font-size: 1rem; font-weight: 800;
  transition: transform 150ms ease;
}
.action-brand:hover .action-brand__go { transform: translateX(3px); }
@media (max-width: 680px) {
  .action-leaders__list { grid-template-columns: 1fr; }
  .action-brands__list { grid-template-columns: 1fr; }
}

/* Questions, as collapsed boxes at the foot of the page. <details> rather than a
   description list: the record is what the page is for, and eight open answers under it
   competed with the thing the reader came to read. Collapsed keeps the answers in the
   served HTML — which is all the FAQPage markup and an answer engine need — while
   costing the page almost no height.

   No small label above the heading. */
.action-faq {
  margin-top: 1.25rem; border-top: 1px solid var(--sc-line); padding: 1.5rem .1rem 0;
}
.action-faq__list { display: grid; gap: .5rem; margin-top: .9rem; }
.action-faq__item {
  border: 1px solid var(--sc-line); border-radius: .6rem;
  background: #fff;
}
.action-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; cursor: pointer;
  font-weight: 600; color: var(--sc-ink); line-height: 1.35;
  list-style: none;
}
/* The default disclosure triangle is replaced by a chevron drawn from a border, so the
   marker matches on Safari (which ignores ::marker here) and WebKit alike. */
.action-faq__item summary::-webkit-details-marker { display: none; }
.action-faq__item summary::after {
  content: ""; flex: 0 0 auto; width: .5rem; height: .5rem;
  border-right: 2px solid var(--sc-muted); border-bottom: 2px solid var(--sc-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.action-faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.action-faq__item summary:hover { background: var(--sc-chip-bg); border-radius: .6rem; }
.action-faq__item summary:focus-visible {
  outline: 2px solid var(--sc-brand); outline-offset: -2px; border-radius: .6rem;
}
.action-faq__item > p {
  margin: 0; padding: 0 1rem 1rem; max-width: 46rem;
  color: var(--sc-muted); line-height: 1.55; text-wrap: pretty;
}

/* Lateral rails. Until 24 Jul 2026 the scorecard had no links to any other company —
   the rails lived in a template no route rendered. Two columns on desktop so the
   "same category" and "same issues" rails read as siblings rather than a ranking, and
   one column below 720px where side-by-side would give each name ~14 characters. */
.action-rails {
  margin-top: 1.25rem; border-top: 1px solid var(--sc-line); padding: 1.5rem .1rem 0;
  display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .action-rails { grid-template-columns: 1fr; } }
.action-rail h3 {
  margin: .35rem 0 .8rem; font-size: 1.05rem; line-height: 1.35; color: var(--sc-ink);
}
.action-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.action-rail__list a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; margin: 0 -.6rem;
  border-radius: .5rem; text-decoration: none; color: inherit;
}
.action-rail__list a:hover { background: var(--sc-chip-bg); }
.action-rail__text { display: grid; gap: .1rem; min-width: 0; }
/* Real captured icon where one exists, initials underneath it as the fallback. Every
   company on a rail has been crawled — that is how it earned a cited finding — so the
   icon is usually there; the initials cover the ~37% of domains whose favicon fetch
   failed, and the mark keeps the same footprint either way so the rows do not jump. */
.action-rail__mark {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 6px; overflow: hidden;
  background: var(--sc-chip-bg); border: 1px solid var(--sc-chip-line);
  font-size: .66rem; font-weight: 700; color: var(--sc-brand-deep);
}
.action-rail__marktxt { line-height: 1; }
.action-rail__mark img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff;
}
.action-rail__name { font-weight: 600; color: var(--sc-brand-deep); }
.action-rail__meta { font-size: .85rem; color: var(--sc-muted); line-height: 1.4; }
.action-rail__chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.action-rail__chip {
  display: inline-block; max-width: 100%; padding: .16rem .4rem;
  border: 1px solid var(--sc-chip-line); border-radius: 999px;
  color: var(--sc-muted); font-size: .72rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-rail__more { display: inline-block; margin-top: .7rem; font-weight: 600; }

/* Issue index (/issues/<slug>). Reuses the rail row wholesale — same mark, same two-line
   body — because a company row means the same thing on both surfaces and a second visual
   language for it would imply a difference that is not there. Only the density changes:
   an issue page is a LIST as its main content rather than a sidebar rail, so the rows get
   a rule between them and the grid goes two-up where there is width for it. */
/* The action index on /issues — 94 rows to SCAN, not read.
     * Label only. The definitions used to render under each label and made the page a
       wall of prose: 94 sentences that all begin "The company ..." and restate the label
       above them. They live on each action's own page and in this row's title.
     * The label is ink, not orange. Every row here is a link, so 94 orange labels made
       the page one solid block and the colour stopped signalling anything. Orange stays
       on the icon and the arrow, where it marks the affordance instead.
     * One line per row, ellipsised. Uniform row height is what makes a 94-item list
       scannable; a few long labels truncate, and their full text is one hover away. */
/* Two columns, not the inherited four. Labels run to 67 characters (median 43), so at
   four columns almost every row truncated mid-word — "Funds candidates or campaig…".
   They are not shortened at this layer on purpose: the catalog pairs opposites
   ("Funds abortion restrictions" / "Funds abortion-access organizations"), and clipping
   words is exactly how a neutral pair turns into one visible accusation. */
/* Grid, not multi-column. This rule sits AFTER the responsive @media block that
   sets `.idx-cols { columns: 1 }` at 560px, and both selectors are specificity
   (0,1,0) on the same element — so `columns: 2` won everywhere and the list was
   locked at two columns from 320px to 4000px. That single fact produced both
   symptoms: a ~470px dead gutter down the middle at 1440px (median label is
   344px in a 646px column), and 5-6 line labels breaking mid-word at 390px.
   auto-fill + minmax adapts instead, and `min(320px, 100%)` keeps the track from
   overflowing a container narrower than itself. display:grid also makes the
   inherited `columns` declarations inert, so no media query is needed here. */
.idx-cols--actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  column-gap: 28px;
  row-gap: 0;
}
/* Not `anywhere` (inherited from .idx-item): that breaks inside words rather
   than only between them, which is what produced "commitmen/ts" on mobile. */
.idx-cols--actions .idx-item { overflow-wrap: break-word; }
/* No rule between rows. `.issues-main .action-item` still carries a bottom border from
   the collapsed <details> lists this page used before it became the action index, and
   these rows match that selector too — so it has to be turned off explicitly rather than
   by hoping specificity works out. The colour of the icon tile is what groups a section
   now; ruling every row as well striped the page. */
.idx-cols--actions .idx-item {
  display: block; padding: 0; border-bottom: 0;
}
.idx-cols--actions .action-item__link {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr);
  /* Centre, not start. The icon renders at 1.45rem so its line box is taller than the
     label's; aligning both to the top left the glyph sitting ~7px below the text's
     optical centre on every single-line row. */
  align-items: center; gap: .7rem;
  padding: .32rem 0; text-decoration: none; color: inherit;
}
/* Ink, not orange, and large enough to be the thing the eye lands on. The glyph is what
   makes a 94-row index scannable by shape, so it has to carry more weight than the label
   it sits beside — at .9rem in brand orange it read as decoration next to the text.
   Icons are sized through the font-size cascade (.ic > svg is 1em), and stroke-width is
   authored at 2 on the SVG itself, so both are overridden here rather than in _icons.html
   where every other surface would inherit the change. */
/* Section colour comes from the family palette already generated into this file from
   vocabulary.json (.dim--land, .dim--work, …), which each group carries as
   `class="idx-group dim--{tone}"`. Those rules are GENERATED and guarded by preflight, so
   they are consumed here through their custom properties rather than restated: a pastel
   --dim-bg tile behind the glyph and the matching --dim-ink for the glyph itself.
   Climate lands on `land` (#c5f7cf green), privacy on `data` (indigo), labour on `work`
   (tan), and so on — the mapping is the vocabulary's, not a second one invented here.
   Fallbacks keep a group readable if a new category arrives before it has a family. */
.action-item__icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: .6rem;
  background: var(--dim-bg, var(--sc-chip-bg));
  color: var(--dim-ink, var(--sc-ink));
  font-size: 1.05rem;
  line-height: 1;   /* .idx-item sets line-height 1.5, which pads the glyph's box */
}
.action-item__icon svg { stroke-width: 2.4; }
/* The nav's underline, reused — but drawn as a background gradient rather than an
   ::after. The pseudo-element version was invisible: this label also carries the
   two-line clamp, which needs `overflow: hidden`, and that clips a rule positioned at
   `bottom: -3px`. A background is painted inside the box, so it survives the clamp.
   background-position 50% grows it from the centre out, matching .nav-links a::after,
   and box-decoration-break gives a wrapped label an underline on each line. */
.action-item__cell { min-width: 0; position: relative; }
/* Per-line underlines for WRAPPED labels only, drawn by setupActionUnderlines() in
   site.js. The gradient rule below carries box-decoration-break: clone, which paints the
   same underline on every line fragment and animates them in lockstep — a two-line label
   drew both lines at once. CSS cannot address "the second line box", so site.js measures
   the line rects and emits one absolutely-positioned bar each, with a delay equal to the
   drawing time of every line above it. The result is one pen travelling down the label
   instead of two rules racing.

   Single-line labels never get bars at all; the gradient below is correct for them and
   costs nothing. */
.action-item__rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.action-item__rules i {
  position: absolute;
  height: 2px;
  background: var(--sc-ink);
  transform: scaleX(0);
  transform-origin: left;
  /* Retract: flat and quick, no stagger. Reversing the draw order would erase the first
     line while the second was still on screen, which reads as a glitch rather than an
     undo. The staggered timing lives ONLY in the hover rule below. */
  transition: transform 150ms cubic-bezier(.22, .61, .36, 1);
}
.action-item__link.has-rules:is(:hover, :focus-visible) .action-item__rules i {
  transform: scaleX(1);
  transition: transform var(--rule-ms, 200ms) cubic-bezier(.22, .61, .36, 1) var(--rule-delay, 0ms);
}
/* Once real bars exist the gradient would draw a third, simultaneous rule underneath them.
   `none` is stated rather than the property omitted — the generated critical block carries
   the gradient and would otherwise keep painting it. */
.action-item__link.has-rules .action-item__label {
  background-image: none;
}
@media (prefers-reduced-motion: reduce) {
  .action-item__rules i { transition: none; }
}
.action-item__label {
  color: var(--sc-ink); font-weight: 600; line-height: 1.32;
  background-image: linear-gradient(var(--sc-ink), var(--sc-ink));
  background-repeat: no-repeat;
  /* 100%, not calc(100% + 2px): backgrounds are clipped to the border box, so pushing
     the rule past the bottom edge paints it outside and it vanishes. The gap under the
     text comes from padding-bottom instead, which grows the box the rule sits in. */
  padding-bottom: 3px;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 320ms cubic-bezier(.22,.61,.36,1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.idx-cols--actions .action-item__link:hover .action-item__label,
.idx-cols--actions .action-item__link:focus-visible .action-item__label {
  background-size: 100% 2px;
}
.idx-group__count {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--dim-bg, var(--sc-chip-bg));
  color: var(--dim-ink, var(--sc-muted));
  font-size: .78rem; font-weight: 700;
}
/* No tinted rule under the heading — it was tried and removed. The icon tiles already
   carry the section's colour down the whole list, and a coloured bar on top of that read
   as a second, competing divider next to the neutral group separators. */
.action-issue__list { gap: 0; }
.action-issue__list li + li { border-top: 1px solid var(--sc-line); }
.action-issue__list a { padding: .7rem .6rem; border-radius: 0; }
@media (min-width: 900px) {
  .action-issue__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.75rem;
  }
  /* With two columns the first row of the SECOND column must not draw a top rule — it is
     the top of its column, not a continuation. */
  .action-issue__list li:nth-child(2) { border-top: 0; }
}
/* The category chip on a scorecard action is a link to that action's issue page now.
   Keeps the chip's exact appearance; only the affordance is added. */
a.action-item__category { text-decoration: none; }
a.action-item__category:hover { text-decoration: underline; }

/* Was `.action-method`, a full section in the main column repeating the same two lines
   on all ~550 scorecards. Only the link survived, and it moved into the sidebar fact
   card where it costs the record no vertical space. */
.sc-card__link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sc-line);
  width: 100%; font-size: .9rem; font-weight: 600;
}
.action-record__side {
  position: sticky; top: 1.2rem; display: grid; gap: 1rem;
}
@media (max-width: 840px) {
  .action-record__layout { grid-template-columns: 1fr; }
  .action-record__side { position: static; }
}
@media (max-width: 560px) {
  .action-record__heading, .action-item__top {
    align-items: flex-start; flex-direction: column;
  }
  .action-evidence__row { grid-template-columns: 1fr; gap: .35rem; }
}

/* ── 2026 editorial-grid system ──────────────────────────────────────────────
   Company records and the directory are information products, not dashboards.
   Their shared visual language is therefore a visible modular grid: flat paper,
   hairline rules and decisive type. Rounded surfaces are reserved for a real
   control or conversion ask; they are not the default container for every fact. */
body.cpage {
  --sc-paper: #fdfaf4;
  --sc-card: #ffffff;
  --sc-line: #d6d6d1;
  --sc-grid-ink: #161616;
  background: var(--sc-paper);
}

/* Company identity: aligned to the page grid, without a card around the whole intro. */
.sc-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 34px 0 0;
  padding: 0 0 clamp(28px, 3.2vw, 44px);
  border: 0;
  border-bottom: 1px solid var(--sc-line);
  background: transparent;
}
.sc-id {
  grid-column: 1 / -1;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 34px) 0;
  border: 0;
}
.sc-logo {
  width: clamp(74px, 6.2vw, 94px);
  height: clamp(74px, 6.2vw, 94px);
  border: 1px solid var(--sc-line);
  border-radius: 16px;
  background: #f0f0ed;
}
.sc-logo__txt {
  color: var(--sc-ink);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
}
.sc-id__text h1 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2.45rem, 4.2vw, 4.25rem);
  line-height: .96;
  letter-spacing: -.055em;
}
.sc-id__meta {
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.sc-hero__summary {
  grid-column: 1 / span 9;
  min-width: 0;
  padding: 0;
}
.sc-hero__index {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  min-width: 0;
  padding: 22px 0 0;
  border: 0;
  background: transparent;
}
.sc-hero__label {
  margin: 0;
  color: var(--sc-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.sc-deck {
  max-width: 55ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.58;
}
.sc-freshness {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--sc-line);
  font-size: .77rem;
}
.sc-topics {
  align-content: flex-start;
  gap: 7px;
  margin: 0;
}
.sc-topics a {
  min-height: 31px;
  padding: 5px 11px;
  font-size: .73rem;
  font-weight: 750;
}

/* The record and its facts rail share one vertical rule, like an editorial spread. */
.sc-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  padding-top: 0;
  border-bottom: 1px solid var(--sc-line);
}
.sc-body {
  min-width: 0;
  padding: clamp(34px, 4vw, 58px) clamp(28px, 4vw, 56px) 56px 0;
}
.sc-aside {
  padding: clamp(34px, 4vw, 58px) 0 48px 30px;
  border-left: 1px solid var(--sc-line);
}
.sc-card {
  padding: 21px 0;
  border: 0;
  border-top: 2px solid var(--sc-grid-ink);
  border-bottom: 1px solid var(--sc-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sc-aside > .sc-card + .sc-card {
  margin-top: 30px;
}
/* No outline and no hard offset shadow. The ink border plus the 5px shadow drew a second
   frame inside an aside that is already bounded by its own left rule, so the install ask
   read as a sticker pasted onto the record rather than part of it. The white ground and
   the radius are enough to separate it — and the radius still earns its place, since this
   is the one conversion ask on the page.

   `border` and `box-shadow` are stated as explicit zeroes rather than deleted: .sc-card
   above sets a 2px ink border-top, and the generated critical block keeps whatever it was
   built from, so omitting either property would let the old declaration win. */
.sc-card--cta {
  padding: 23px;
  border: 0;
  border-radius: 16px;
  background: var(--sc-card);
  box-shadow: none;
}
/* Both buttons now lead with a browser mark, and the aside is ~250px wide: at the default
   24px inline padding and 12px gap, "Add to Chrome — Free" broke onto a second line and the
   two buttons stopped matching each other's height. Trimming the padding and the gap here
   — not on .btn, which is the whole site's button — buys back the ~40px the label needs.
   The em dash is the widest character in it, so nowrap is stated too: a two-line install
   button in a 250px column is the failure this is preventing, not a style preference. */
.sc-card--cta .btn {
  gap: 9px;
  padding-inline: 13px;
  font-size: .95rem;
  white-space: nowrap;
}
.sc-card__title {
  font-size: 1.05rem;
}
.sc-card__sub {
  color: #464646;
}
.sc-facts li {
  padding: 12px 0;
}
.sc-facts a {
  color: var(--sc-ink);
}

/* Findings are ruled articles, with no container chrome. */
.action-record__heading {
  min-height: 74px;
  padding: 0 0 19px;
  border-bottom: 2px solid var(--sc-grid-ink);
}
.action-record__heading h2,
.action-pending h2 {
  font-size: clamp(1.7rem, 3.2vw, 3.15rem);
  letter-spacing: -.045em;
}
.action-record__list {
  border-top: 0;
}
.action-item {
  padding: 28px 0 30px;
}
.action-item > h3 {
  max-width: 29ch;
  margin-top: 17px;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -.035em;
}
.action-evidence__preview {
  max-width: 62ch;
  padding: 5px 0 12px;
  font-size: 1rem;
  line-height: 1.6;
}
.action-evidence__control {
  min-height: 34px;
  padding: 6px 0;
  color: var(--sc-link);
  font-size: .82rem;
  letter-spacing: .01em;
  text-decoration: none;
}
.action-evidence__control:hover {
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.action-evidence__rows {
  margin-top: 16px;
  border-top-color: var(--sc-grid-ink);
  background: transparent;
}
.action-evidence__row {
  grid-template-columns: minmax(92px, 1fr) minmax(0, 6fr);
  padding: 17px 0;
}

/* Leadership is a modular photo grid. Ownership and peers are flat ruled lists. */
.action-leaders__list {
  gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  max-width: none;
  border-top: 1px solid var(--sc-line);
  border-left: 1px solid var(--sc-line);
}
.action-leader {
  border: 0;
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
  border-radius: 0;
  background: var(--sc-card);
}
.action-leader a {
  color: inherit;
  text-decoration: none;
}
.action-leader__body h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.action-leader__photo {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--sc-line);
  background: #ecece8;
}
.action-leader__body {
  padding: 15px 16px 17px;
}
.action-leaders__list:has(> .action-leader:only-child) {
  max-width: min(100%, 46rem);
  border: 1px solid var(--sc-line);
}

/* ── First-class people records ───────────────────────────────────────────── */
.person-record {
  padding-top: 34px;
}
.person-hero {
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  align-items: end;
  min-height: 330px;
  border-top: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
}
.person-hero__portrait {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 330px;
  overflow: hidden;
  border-right: 1px solid var(--sc-line);
  background: #ecece8;
  color: var(--choice-orange);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 800;
}
.person-hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person-hero__copy {
  padding: clamp(26px, 4vw, 58px);
}
.person-kicker {
  margin: 0 0 16px;
  color: var(--sc-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.person-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: .91;
  letter-spacing: -.065em;
}
.person-hero__copy > p:last-child {
  max-width: 54ch;
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.5;
}
.person-layout {
  display: block;
}
.person-portrait-review,
.person-portrait-retry {
  max-width: 58ch; margin-top: 18px; color: var(--sc-body);
  font-size: .86rem; line-height: 1.5;
}
.person-portrait-review > p { margin: 5px 0 0; }
.person-portrait-review details { margin-top: 8px; color: var(--sc-muted); }
.person-portrait-review summary {
  width: fit-content; color: var(--sc-link); font-weight: 750; cursor: pointer;
}
.person-portrait-review ul {
  display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px;
}
.person-portrait-review details > p { margin: 8px 0 0; }
.person-portrait-review a { color: var(--sc-link); font-weight: 700; }
.person-portrait-review svg { width: .75rem; height: .75rem; }
.person-actions,
.person-affiliations {
  min-width: 0;
  padding: clamp(44px, 6vw, 76px) 0;
}
.person-actions + .person-affiliations {
  border-top: 1px solid var(--sc-line);
}
.person-section-head {
  padding-top: 15px;
  border-top: 2px solid var(--sc-ink);
}
.person-section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  letter-spacing: -.045em;
}
.person-section-head p {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--sc-muted);
}
.person-action-list {
  margin-top: 34px;
  border-top: 1px solid var(--sc-line);
}
.person-action {
  padding: 30px 0;
  border-bottom: 1px solid var(--sc-line);
}
.person-action__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.person-action__meta time {
  color: var(--sc-muted);
  font-size: .78rem;
  font-weight: 750;
}
.person-action__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 750;
}
.person-action__tag svg {
  width: .82rem;
  height: .82rem;
}
.person-action h3 {
  max-width: 28ch;
  margin: 16px 0 8px;
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.person-action__summary {
  max-width: 62ch;
  margin: 0;
  line-height: 1.58;
}
.person-action__evidence {
  margin-top: 17px;
}
.person-action__evidence summary {
  width: max-content;
  color: var(--sc-link);
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}
.person-action__evidence summary::-webkit-details-marker {
  display: none;
}
.person-action__sources {
  margin-top: 18px;
  border-top: 1px solid var(--sc-ink);
}
.person-action__source {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sc-line);
}
.person-action__source time {
  color: var(--sc-muted);
  font-weight: 750;
}
.person-action__source p {
  margin: 0;
  line-height: 1.55;
}
.person-action__source a {
  grid-column: 2;
  color: var(--sc-link);
  font-weight: 750;
}
.person-affiliations__grid {
  margin-top: 34px;
}
.person-roles ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sc-line);
  border-left: 1px solid var(--sc-line);
  list-style: none;
}
.person-roles li {
  display: grid;
  gap: 5px;
  min-height: 138px;
  align-content: end;
  padding: clamp(18px, 3vw, 30px);
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
}
.person-roles a,
.person-roles strong {
  color: var(--sc-ink);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  text-decoration: none;
}
.person-roles a:hover {
  text-decoration: underline;
}
.person-roles span {
  color: var(--sc-muted);
}
.person-roles .person-role__influence {
  color: var(--sc-body);
  font-size: .78rem;
  line-height: 1.4;
}
.person-profile {
  margin-top: clamp(38px, 6vw, 66px);
  padding-top: 15px;
  border-top: 2px solid var(--sc-ink);
}
.person-profile h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -.035em;
}
.person-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  border-top: 1px solid var(--sc-line);
  border-left: 1px solid var(--sc-line);
}
.person-facts > div {
  display: grid;
  gap: 5px;
  min-height: 112px;
  align-content: end;
  padding: 20px;
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
}
.person-facts dt {
  color: var(--sc-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.person-facts dd {
  margin: 0;
  font-weight: 750;
}
.action-leaders__list:has(> .action-leader:only-child) .action-leader {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  grid-column: 1 / -1;
  width: 100%;
  min-height: 190px;
  border: 0;
}
.action-leaders__list:has(> .action-leader:only-child) .action-leader__photo {
  height: 100%;
  min-height: 190px;
  aspect-ratio: auto;
  border-right: 1px solid var(--sc-line);
  border-bottom: 0;
}
.action-leaders__list:has(> .action-leader:only-child) .action-leader__body {
  align-self: end;
  padding: 22px;
}
.action-brands {
  margin-top: 42px;
  padding-top: 30px;
  border-top: 2px solid var(--sc-grid-ink);
}
.action-brands__heading h2,
.sc-related .sc-block__head h2,
.action-leaders__heading h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
  letter-spacing: -.04em;
}
.action-brands__list {
  column-gap: 0;
  border-left: 1px solid var(--sc-line);
}
.action-brands__list > li {
  border-right: 1px solid var(--sc-line);
}
.action-brand {
  min-height: 104px;
  padding: 14px 16px;
}
.action-brand:not(.action-brand--static):hover {
  padding-inline: 14px 16px;
  background: #eeeeeb;
  color: var(--sc-ink);
}
.action-brand:hover .action-brand__go {
  transform: none;
}
.action-brand__mark {
  border-radius: 10px;
}
.sc-related {
  margin-top: 42px;
  padding-top: 30px;
  border-top: 2px solid var(--sc-grid-ink);
}
.sc-altcards {
  border-left: 1px solid var(--sc-line);
}
.sc-altcard {
  min-height: 116px;
  padding: 18px;
  border-right: 1px solid var(--sc-line);
  background: var(--sc-card);
}
.sc-altcard:hover {
  padding-inline: 18px;
  background: #eeeeeb;
}
.sc-altcard__mark {
  border-radius: 11px;
}

/* Directory hero: a compact editorial masthead. The directory is a working
   index, not a campaign poster, so the headline stays on one line whenever the
   viewport can support it and the supporting copy sits directly beneath it. */
.dir-hero {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0;
  padding: clamp(44px, 6vw, 82px) 0 clamp(24px, 3vw, 40px);
  border: 0;
  border-bottom: 1px solid var(--sc-line);
  background: transparent;
}
.dir-hero__statement {
  min-width: 0;
  padding: 0;
}
.dir-hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  min-width: 0;
  padding: 22px 0 0;
  border: 0;
  background: transparent;
}
.dir-hero h1 {
  max-width: none;
  font-size: clamp(3.4rem, 6.7vw, 6.7rem);
  line-height: .92;
  letter-spacing: -.065em;
}
.dir-hero__meta > p {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.5;
}
.dir-stat {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: .78rem;
  letter-spacing: .02em;
}
/* At zero this is a coverage note, not a metric. The brand-orange icon and ink numerals
   rendered "0 · 0" as a dashboard readout of nothing — the one thing an honest coverage
   line must not look like. The numbers stay; only their weight changes. */
.dir-stat--zero strong {
  color: var(--sc-muted);
  font-weight: 600;
}

.dir-recent,
.dir-browse,
.dir-hubs {
  padding-top: clamp(46px, 6vw, 78px);
}
.dir-recent h2,
.dir-browse > h2,
.dir-hubs h2 {
  margin-bottom: 18px;
  padding-top: 15px;
  border-top: 2px solid var(--sc-grid-ink);
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  letter-spacing: -.04em;
}

/* ── the directory with nothing published ────────────────────────────────────
   The browse chrome is not rendered at all when there is nothing to browse, so none of
   it is styled here — a search box that filters nothing, selects holding one option each
   and a six-column header over an empty table are dead controls and a claim about the
   page's contents that is not true. What replaces them is the /person/<slug> empty
   pattern: a real heading under the 2px rule this section already draws, so an
   unpublished index reads as a section rather than as a failure. */
/* One measure for the prose and the links, stated in rem rather than ch so the two right
   edges are identical by construction — they sit at different font sizes, so matching
   `ch` values would not have aligned. Full-bleed rules were the alternative and they read
   badly here: with two words in the row, the arrow ended up a thousand pixels from its
   own label. */
.dir-browse--blank {
  --dir-blank-measure: 42rem;
}
.dir-browse--blank > h2 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  letter-spacing: -.045em;
}
.dir-blank__lede {
  max-width: var(--dir-blank-measure);
  margin: 18px 0 0;
  color: var(--sc-muted);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.6;
  text-wrap: pretty;
}
/* Ruled rows, not buttons. "Nothing here" with no way onward is the actual failure state;
   these are two things the site can show today, and they carry the same hairline
   vocabulary as every other list of links on a record page. */
.dir-blank__next {
  max-width: var(--dir-blank-measure);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sc-line);
}
.dir-blank__next li {
  border-bottom: 1px solid var(--sc-line);
}
.dir-blank__next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  color: var(--sc-ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
  text-decoration: none;
}
/* The arrow moves, the row does not — same trade as .sc-shared__go, and it keeps the
   "links may change tone on hover but must never shift under the pointer" rule intact. */
.dir-blank__next i {
  color: var(--sc-muted);
  transition: transform 180ms cubic-bezier(.22, .61, .36, 1), color 180ms ease;
}
.dir-blank__next a:hover i {
  color: var(--sc-ink);
  transform: translateX(6px);
}
.dir-blank__next a:focus-visible {
  outline: 2px solid var(--sc-brand);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .dir-blank__next i { transition: none; }
  .dir-blank__next a:hover i { transform: none; }
}

.dir-recent__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--sc-line);
  border-left: 1px solid var(--sc-line);
}
.dir-card {
  min-height: 238px;
  padding: 22px;
  border: 0;
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
  border-radius: 0;
  background: var(--sc-card);
  transition: background 150ms ease, color 150ms ease;
}
/* Hover: the background goes warm. That is the whole treatment.

   Three versions were built here before this one and the first two were rejected — a full
   #ff7300 flood ("ugly"), then that same tint as a sheet rising from the bottom edge over
   460ms, with an orange rule drawing under the company name behind it. The COLOUR survived
   both rounds; the motion did not. A record card is something you sweep past on the way to
   clicking it, and a half-second fill asks to be watched instead. The tone change alone
   says "this one is under the pointer", which is the entire job, and it is the same thing
   .dir-row and .sc-altcard already do everywhere else on the site.

   The pseudo-element sheet, the stacking context it needed (position/isolation above), and
   the name underline are all gone rather than merely switched off. Only the fill is
   restated explicitly, because THIS rule has carried #e8e8e4, var(--orange) and
   var(--sc-card) at different points and the generated critical block keeps whatever it
   was built from — omitting the property would let one of those win. */
.dir-card:is(:hover, :focus-visible) {
  border-color: var(--sc-line);
  background: #fff4ea;
  box-shadow: none;
}
.dir-card__mark {
  width: 76px;
  height: 76px;
  border: 1px solid var(--sc-line);
  border-radius: 11px;
  background: #eeeeeb;
}
.dir-card__name {
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.dir-card__count {
  margin-top: auto;
  padding-top: 18px;
}

/* Filters are one continuous control grid. */
.dir-filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, .75fr));
  gap: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--sc-line);
  border-left: 1px solid var(--sc-line);
}
/* One fewer select when the corpus carries no sectors to filter by. The grid is stated
   rather than made elastic so the search field keeps the same proportion either way. */
.dir-filters--3col {
  grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(150px, .75fr));
}
.dir-search,
.dir-select {
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
  border-radius: 0;
  background-color: var(--sc-card);
}
.dir-search__input {
  min-height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.dir-az {
  gap: 0;
  margin: 14px 0;
  padding: 0;
  border: 1px solid var(--sc-line);
  border-radius: 0;
  background: var(--sc-card);
}
.dir-az a,
.dir-az span {
  flex: 1 1 32px;
  min-width: 32px;
  padding: 10px 5px;
  border-right: 1px solid #ecece8;
  border-radius: 0;
}
.dir-az a.is-active {
  border-radius: 0;
}
.dir-table {
  border-color: var(--sc-line);
  border-radius: 0;
}
/* The column header and the letter dividers were both #eeeeeb with ink text, so running
   down the table you got a grey bar (the columns), rows, an identical grey bar (letter B),
   rows — and the header stopped reading as a header at all. The grey fill belongs to the
   dividers, because there are many of them and they are a repeating landmark. The header
   gets the mark this site already uses for a boundary everywhere else: 2px ink, as on
   .sc-card, .action-record__heading and every section h2. Two marks, two jobs.

   `background` is restated rather than dropped: the inlined critical block still carries
   the older --sc-chip-bg fill, and a rule that merely stops setting a property lets the
   stale declaration win. */
.dir-table__head {
  min-height: 48px;
  padding: 13px 18px;
  border-bottom: 2px solid var(--sc-grid-ink);
  background: var(--sc-card);
  color: var(--sc-muted);
}
.dir-group__letter {
  padding: 11px 18px;
  background: #eeeeeb;
  color: var(--sc-ink);
}
.dir-row {
  min-height: 94px;
  padding: 16px 18px;
}
.dir-row:hover {
  background: #eeeeeb;
}
.dir-row .dir-mark {
  width: 60px;
  height: 60px;
  border: 1px solid var(--sc-line);
  border-radius: 10px;
}
.dir-row__name {
  font-size: 1.02rem;
}
.dir-hubs__grid {
  gap: 0;
  border-top: 1px solid var(--sc-line);
  border-left: 1px solid var(--sc-line);
}
.dir-hub {
  min-height: 64px;
  border: 0;
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
  border-radius: 0;
}
.dir-hub:hover {
  border-color: var(--sc-line);
  background: #e8e8e4;
}

/* Company links may change tone on hover, but must never shift under the pointer. */
.sc-alt:hover {
  transform: none;
}
.sc-shared__row:hover .sc-shared__go {
  transform: rotate(45deg);
}

@media (max-width: 1080px) {
  .dir-recent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-search { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sc-hero__summary,
  .sc-hero__index { grid-column: 1 / -1; }
  .sc-layout {
    display: flex;
    border-bottom: 0;
  }
  .sc-body { width: 100%; padding: 34px 0; }
  .sc-aside {
    order: 0;
    width: 100%;
    padding: 0 0 34px;
    border-left: 0;
  }
  .person-layout { display: block; }
}
@media (max-width: 760px) {
  .person-roles ul,
  .person-facts {
    grid-template-columns: 1fr;
  }
  .sc-id {
    gap: 18px;
    padding: 22px 0;
  }
  .sc-id__text h1 { font-size: clamp(2.25rem, 11vw, 4rem); }
  .sc-hero__summary,
  .sc-hero__index {
    grid-column: 1 / -1;
    padding: 0;
  }
  .sc-hero__index {
    padding-top: 20px;
    border: 0;
  }
  .dir-hero {
    grid-template-columns: 1fr;
  }
  .dir-hero__statement,
  .dir-hero__meta {
    padding-inline: 0;
  }
  .dir-hero__meta {
    grid-template-columns: 1fr;
    gap: 16px;
    border: 0;
  }
  .dir-stat { justify-content: flex-start; }
  .dir-hero h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .dir-recent__grid { grid-template-columns: 1fr; }
  .dir-card { min-height: 204px; }
  .action-brands__list { grid-template-columns: 1fr; }
  .action-brands__list > li { border-right: 1px solid var(--sc-line); }
  .sc-altcard {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .sc-altcard__mark { width: 62px; height: 62px; }
  .sc-altcard__go { grid-column: 2; }
  .person-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .person-hero__portrait {
    min-height: 360px;
    border-right: 0;
    border-bottom: 1px solid var(--sc-line);
  }
  .person-action__source {
    grid-template-columns: 1fr;
  }
  .person-action__source a { grid-column: 1; }
}
@media (max-width: 560px) {
  .sc-hero { margin-top: 20px; }
  .sc-id { align-items: flex-start; }
  .sc-logo { width: 68px; height: 68px; border-radius: 11px; }
  .dir-hero { margin-top: 0; }
  .dir-filters { grid-template-columns: 1fr; }
  .dir-search { grid-column: auto; }
  .dir-select { width: 100%; }
  .action-evidence__row { grid-template-columns: 1fr; }
  .action-leaders__list:has(> .action-leader:only-child) .action-leader {
    grid-template-columns: 1fr;
  }
  .action-leaders__list:has(> .action-leader:only-child) .action-leader__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-right: 0;
    border-bottom: 1px solid var(--sc-line);
  }
}