/* ============================================================
   sa-pages.css — the Solutions & About surface vocabulary.

   Both pages were built out of inline `style="…"` attributes: a
   hero, four section headers, twelve cards, four metrics and three
   call-to-action blocks, each carrying its own copy of the same
   declarations with its own hand-typed radius (8px, 10px, 999px)
   and its own idea of what "secondary text" means. Nothing could be
   changed in one place, and nothing lined up with the terminal the
   pages are selling.

   This file is that vocabulary, extracted once and mapped onto the
   v3 tokens (src/shared/tokens.css). Every length is a --space-*,
   every corner a --radius-*, every colour a token from the ink /
   paper / rule ramps. No raw pixel radius survives.

   Load order matters: after tokens.css and chrome.css, so these
   rules win the ties against the shared and legacy stylesheets.

   Naming: .sa-* (Solutions & About). Blocks are
     .sa-hero  .sa-section  .sa-grid  .sa-card
     .sa-metric  .sa-cta-band  .sa-btn
   with element/modifier suffixes on the same stem.
   ============================================================ */

/* ============================================================
   HERO — the fold. The sticky chrome measures 158px to the bottom
   of the ribbon before .tmt-page adds its own 20px, so the hero's
   top padding is deliberately smaller than its bottom: the old
   3rem top pushed the first line of copy a further 48px down a
   page whose whole argument is density.
   ============================================================ */
.sa-hero {
  padding: var(--space-12) 0 var(--space-20);
  text-align: center;
}
.sa-hero--tight { padding-bottom: var(--space-12); }

.sa-kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-micro, 10px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-6);
}

.sa-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--space-8);
  text-wrap: balance;
}
.sa-title em {
  font-style: italic;
  color: var(--brand);
}

.sa-subtitle {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.sa-subtitle--narrow { max-width: 52ch; }

/* ============================================================
   ACTIONS — one primary, one secondary. The primary always opens
   the Dashboard; the secondary always goes to the plans. Both pages
   agree on that pair, which is the point of putting it here.
   ============================================================ */
.sa-actions {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-16);
}

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: var(--control-lg);
  padding: var(--space-8) var(--space-20);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.sa-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}
/* Hover mixes the brand toward the ink of whichever theme is on, so it
   darkens on cream paper and lightens on dark. --brand-ink is NOT the
   token for this: it is a deep forest in both themes, which on dark
   would put the near-black --paper label on a near-black ground. */
.sa-btn--primary:hover {
  background: color-mix(in oklch, var(--brand), var(--ink) 20%);
  border-color: color-mix(in oklch, var(--brand), var(--ink) 20%);
  color: var(--paper);
}
.sa-btn--secondary {
  background: var(--card);
  border-color: var(--rule);
  color: var(--ink-1);
}
.sa-btn--secondary:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

/* ============================================================
   RAIL — the sticky jump nav and the tag filter, in one bar.

   It parks under the chrome, whose stuck height is NOT the sum of
   its tokens. --topbar-h + --subbar-h + --ribbon-h says 144px;
   measured, the stack bottoms out at 156–158px above 820px (the
   ribbon renders 54–58px tall, not 44) and at 110px below it,
   where the ribbon re-sticks under a one-tier topbar. A rail at
   144px sits 14px underneath the ribbon.

   So the offset is a variable with a measured default per regime,
   and sa-pages.js overwrites it with the exact stuck bottom on
   load and on resize. The CSS value is what a no-JS reader gets,
   which is why it is a real measurement and not a guess. z-index
   stays under the ribbon's 50, so if the two ever disagree the
   rail slides beneath rather than over.

   Jump links are plain anchors and work with scripting off. The
   chip group ships `hidden` and sa-pages.js unhides it, so a
   no-JS reader gets the whole catalogue and no dead controls.
   ============================================================ */
:root { --sa-rail-top: 158px; }
/* Below 820px the topbar collapses to one tier and the ribbon re-sticks
   beneath it, so the whole stack bottoms out 48px higher. */
@media (max-width: 820px) {
  :root { --sa-rail-top: 110px; }
}

/* The jump links scroll a section to the top of the viewport, which is
   underneath 215px of sticky chrome unless the section says otherwise.
   scroll-margin-top lands the heading just below the rail instead of
   behind it, and is read from the same variable the rail parks on so the
   two can never disagree. */
[data-sa-section] { scroll-margin-top: calc(var(--sa-rail-top) + 64px); }

.sa-rail {
  position: sticky;
  top: var(--sa-rail-top);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  padding: var(--space-6) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.sa-rail-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sa-rail-group::-webkit-scrollbar { display: none; }
.sa-rail-group--jump { flex: 1 1 auto; }

.sa-rail-sep {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: var(--rule);
}

.sa-jump {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.sa-jump:hover { color: var(--ink); background: var(--paper-2); }
/* Scrollspy marks the section in view. aria-current is the state, so the
   style hangs off it rather than off a second class that could disagree. */
.sa-jump[aria-current="true"] {
  color: var(--brand);
  font-weight: 600;
  background: var(--brand-soft);
}

.sa-chip-btn {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.sa-chip-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
.sa-chip-btn[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}

/* The filter hides whole cards and whole sections. */
.sa-hidden { display: none !important; }

/* ============================================================
   EMPTY — what a filter that matches nothing says. Front office
   voice: name what was asked for and the nearest thing we have,
   never "No results found."
   ============================================================ */
.sa-empty {
  padding: var(--space-24) var(--space-16);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  text-align: center;
}
.sa-empty-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-6);
}
.sa-empty-text {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 auto var(--space-12);
}

/* A page-level footnote, set quiet. */
.sa-note {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: var(--space-12);
  text-wrap: pretty;
}
.sa-note b { color: var(--ink-2); font-weight: 600; }

/* ============================================================
   SECTION — a ruled header and its grid.
   ============================================================ */
.sa-section { padding: var(--space-16) 0 var(--space-8); }
.sa-section--flush { padding-top: var(--space-8); }
.sa-section--close { padding-bottom: var(--space-16); }

.sa-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.sa-section-head--center {
  flex-direction: column;
  text-align: center;
  gap: var(--space-4);
}

.sa-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-md);
  height: var(--control-md);
  background: var(--brand-soft);
  border-radius: var(--radius-md);
  color: var(--brand);
}

.sa-section-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sa-section-title--sm { font-size: 1.25rem; }

.sa-section-note {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}
.sa-section-head--center .sa-section-note { margin-inline: auto; }

/* ============================================================
   GRID — explicit column ladders, not auto-fit.

   auto-fit is what leaves a four-item row as 3 + 1 at the exact
   widths this site is read at: the track count follows the
   container, so every breakpoint is an accident. The ladder steps
   2 → 1, so a row is either full or halved and never orphans its
   last card.
   ============================================================ */
.sa-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(var(--sa-cols, 1), minmax(0, 1fr));
}
.sa-grid--2 { --sa-cols: 2; }

/* A catalogue section holds 1, 3 or 4 cards depending on how much of the
   product it covers, so the odd one out always landed beside dead tracks —
   the Markets section shipped a single card stranded on a row of three.
   Letting the last card of an odd set span what is left turns that gap into
   a deliberately wider card. Only ever applied to the 2-track grids, where
   "odd" means exactly one leftover track. */
.sa-grid--fill-odd.sa-grid--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 559px) {
  .sa-grid { --sa-cols: 1; }
}

/* ============================================================
   CARD — a flat surface with a ruled head. Borders do the work
   (--shadow-card is none by design); hover states lift the border
   to --rule-strong rather than moving the card.
   ============================================================ */
.sa-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
a.sa-card:hover {
  border-color: var(--rule-strong);
  background: var(--card-2);
}

.sa-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-10);
  background: var(--paper-1);
  border-bottom: 1px solid var(--rule-soft);
}

.sa-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.sa-card-title > svg {
  flex: 0 0 auto;
  color: var(--ink-3);
}

.sa-card-body {
  flex: 1 1 auto;
  padding: var(--space-10);
}

.sa-card-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   The tile foot — what makes a catalogue card read like a desk
   cell instead of a feature bullet: a figure set in the mono
   face, the unit it is in, and the source that published it.

   The figure is a SAMPLE and says so, in every tile that carries
   one. This page cannot show a live number without taking an API
   dependency on a marketing surface, and a static figure passed
   off as current is exactly the vapor the rest of the site is
   built to refuse. The word is small but it is never dropped.
   ------------------------------------------------------------ */
.sa-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: auto;
  padding: var(--space-6) var(--space-10);
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-1);
}

.sa-stat {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.sa-stat b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  margin-right: var(--space-2);
}

.sa-prov {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}
.sa-prov i {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-4);
  margin-right: var(--space-3);
}

/* Values / feature cards: no ruled head, copy carries the block. */
.sa-card--plain { padding: var(--space-12); }
.sa-card--plain .sa-section-icon { margin-bottom: var(--space-10); }
.sa-card-label {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

/* ============================================================
   CHIP — the entitlement badge (PRO / DESK). vapor-check.mjs
   reads these out of the markup, so the `>PRO<` / `>DESK<` text
   node has to stay inside the card title.
   ============================================================ */
.sa-chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
}
/* .sa-card-title is a flex row and spaces the chip with its own gap; the
   plain card's label is not, so the chip needs the gap spelled out. */
.sa-card-label .sa-chip { margin-left: var(--space-3); }

/* ============================================================
   METRIC — a figure and what it counts. The figure is set in the
   mono face with tabular figures (.tabnum in tokens.css), so a
   column of them lines up on the decimal instead of drifting.
   ============================================================ */
.sa-metric {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-10);
  text-align: center;
}

.sa-metric-value {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin-bottom: var(--space-6);
}
/* A named source is a label, not a figure — it keeps the mono face
   for kinship but drops to a size that does not wrap at 2 columns. */
.sa-metric-value--text {
  font-size: 1.125rem;
  letter-spacing: 0;
}

.sa-metric-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================
   PROSE — the About mission panel, set as a research note: the
   heading in a left rail, the argument in a measured column
   beside it.

   A single full-width column here is the trap. The panel is 848px
   of content inside the 960px prose page, which is ~95 characters
   a line — unreadable — and capping the paragraphs instead just
   ends the text at 55% and leaves the rest of the card blank. The
   rail spends that width on the heading, so the column lands at a
   real measure and the card still fills its edges.
   ============================================================ */
.sa-prose {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: var(--space-16);
  row-gap: var(--space-10);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
}
.sa-prose > h2 {
  grid-column: 1;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.sa-prose > p {
  grid-column: 2;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .sa-prose { grid-template-columns: minmax(0, 1fr); }
  .sa-prose > h2,
  .sa-prose > p { grid-column: 1; }
}

/* ============================================================
   CTA BAND — the closing ask.
   ============================================================ */
.sa-cta-band {
  background: var(--brand-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-16);
  text-align: center;
}

.sa-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--space-8);
  text-wrap: balance;
}
.sa-cta-title em { font-style: italic; color: var(--brand); }

.sa-cta-text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.sa-cta-band .sa-actions { margin-top: var(--space-16); }

/* ============================================================
   MOBILE — the hero and bands give back their generous padding
   first, since a phone has none to spare.
   ============================================================ */
@media (max-width: 599px) {
  .sa-hero { padding: var(--space-8) 0 var(--space-16); }
  .sa-section { padding: var(--space-12) 0 var(--space-6); }
  .sa-cta-band { padding: var(--space-16) var(--space-10); }
  .sa-prose { padding: var(--space-12) var(--space-10); }
  .sa-actions { gap: var(--space-6); }
  .sa-btn { width: 100%; }
}

/* ============================================================
   PROVENANCE DEMO (SA-6) — the argument, shown instead of
   asserted. One figure in three destinations: the screen, the
   export and the committee packet, carrying its as-of, source
   and unit each time.

   The three panels are literal. The stamp shows the as-of,
   source and unit of the live figure beside it, and the export
   panel mirrors the header block
   src/shared/export-csv.js writes (# The Market Terminal, #
   Data as of, # Exported, # Source, # Units). A demo of a
   provenance feature that invented its own formats would be the
   one thing this page cannot afford.

   Tabs are an enhancement. With no JS the tablist stays hidden
   and all three panels render stacked, each under its own
   heading, which is the whole argument in a longer form rather
   than a dead control.
   ============================================================ */
.sa-demo {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sa-demo-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--paper-1);
  border-bottom: 1px solid var(--rule);
}

.sa-demo-tab {
  flex: 1 1 0;
  padding: var(--space-5) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.sa-demo-tab:hover { color: var(--ink); background: var(--paper-2); }
.sa-demo-tab[aria-selected="true"] {
  background: var(--card);
  border-color: var(--rule);
  color: var(--ink);
}

.sa-demo-panel { padding: var(--space-16); }
/* Only shown with JS off, where the panels stack and each needs naming. */
.sa-demo-panel > h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-10);
}
.sa-demo[data-sa-tabbed] .sa-demo-panel > h3 { display: none; }
.sa-demo[data-sa-tabbed] .sa-demo-panel + .sa-demo-panel { border-top: 0; }
.sa-demo-panel + .sa-demo-panel { border-top: 1px solid var(--rule-soft); }

/* The figure, as the desk draws it. */
.sa-fig-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}
.sa-fig-value {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-8);
}

/* The stamp — as of · source · unit, set quiet. */
.sa-stamp {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-2);
}
.sa-stamp k {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9.5px;
  color: var(--ink-4);
}
.sa-stamp v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sa-stamp s { color: var(--ink-4); text-decoration: none; }

/* The export and the packet, shown as the artefacts they are. */
.sa-slip {
  padding: var(--space-10);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-1);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}
.sa-slip b { color: var(--ink-3); font-weight: 400; }

.sa-packet {
  padding: var(--space-12) var(--space-12) var(--space-10);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
}
.sa-packet p {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.sa-packet sup { color: var(--brand); font-weight: 600; }
.sa-packet hr {
  width: 96px;
  height: 1px;
  margin: var(--space-10) 0 var(--space-6);
  border: 0;
  background: var(--rule);
}
.sa-packet footer {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ============================================================
   LATEST READINGS STRIP (SA-7) — a glance at the numbers, above
   the catalogue, so the page shows the product before it lists it.
   Scrolls sideways under its own overflow rather than wrapping.
   ============================================================ */
.sa-ic {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sa-ic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-10);
  background: var(--paper-1);
  border-bottom: 1px solid var(--rule-soft);
}
.sa-ic-head .sa-kicker { margin-bottom: 0; }

.sa-ic-link {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--cool);
  text-decoration: none;
  white-space: nowrap;
}
.sa-ic-link:hover { text-decoration: underline; }

.sa-ic-strip {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.sa-ic-strip::-webkit-scrollbar { display: none; }

.sa-ic-tile {
  flex: 1 0 auto;
  min-width: 0;
  padding: var(--space-10);
  border-right: 1px solid var(--rule-soft);
}
.sa-ic-tile:last-child { border-right: 0; }

.sa-ic-label {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
  white-space: nowrap;
}
.sa-ic-value {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-3);
  white-space: nowrap;
}
.sa-ic-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink-4);
  white-space: nowrap;
}

/* ============================================================
   FEATURE ROW (SA-7) — the platform capabilities, demoted from
   four cards to a line each. They are table stakes, not the
   argument, and a card apiece gave them the same weight as a
   Desk-gated tool.
   ============================================================ */
.sa-feat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--rule-soft);
}
/* Every item carries its own rule, including the first. The grid is two
   columns wide, so a :first-child exception would leave the item beside it
   ruled and this one not; and the filter can hide any of them, which makes
   "first" a moving target. */
.sa-feat > svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--brand);
}
.sa-feat-body { min-width: 0; }
.sa-feat-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.sa-feat-text {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (max-width: 599px) {
  .sa-demo-panel { padding: var(--space-10); }
  .sa-demo-tabs { flex-wrap: wrap; }
  .sa-demo-tab { flex: 1 1 auto; }
}

/* ============================================================
   BULLETIN (SA-8) — the free digest, set to recede.

   It used to be a band: a centred serif heading and standfirst
   in its own bordered block, three sections from the end. That
   gave a no-account email opt-in the same weight as the ask the
   page is actually for. It is a strip now — copy on one side,
   the form on the other, no serif, no accent ground — so the
   closing CTA below it is unmistakably the last word.
   ============================================================ */
.sa-bulletin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  padding: var(--space-12) var(--space-16);
  background: var(--paper-1);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
}

.sa-bulletin-copy { flex: 1 1 260px; min-width: 0; }

.sa-bulletin-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.sa-bulletin-text {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}

/* bulletin-subscribe.js caps its own mount at 520px and centres it;
   inside the strip it just needs a track of its own to sit in. */
.sa-bulletin > [data-tmt-bulletin] { flex: 1 1 320px; min-width: 0; }

@media (max-width: 599px) {
  .sa-bulletin { gap: var(--space-10); padding: var(--space-12); }
}