/* ============================================================
   Segmental AI — Solution landing pages
   Source of truth for tokens and base components: styles.css

   The shared vocabulary behind the vertical landing pages
   (Fund Onboarding, Collection Operations). Each of those pages
   argues the same way: a split hero where a product specimen
   carries the opening claim, a hairline band, then §-numbered
   document sections built from ledgers, tables, definition lists,
   and one bespoke diagram.

   The spine is platform.html's two-column doc-section grid
   (kicker margin + reading column); the hero borrows index.html's
   split. Everything reads the design-system tokens and never a
   raw hex, so re-theming :root re-themes these pages too.

   Accent discipline: each page holds the steel blue to about three
   zones per viewport — the §N numerals, the primary CTA, and the
   single row or node that the specimen or diagram is actually
   arguing about. Metric figures stay in ink so the accent never
   becomes the page's texture.

   Page-specific layout (hero column ratios, one-off sections)
   stays in the page's own <style> block.
   ============================================================ */
/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.sol-hero {
  padding: var(--sp-air-1) 0 var(--sp-3xl);
}

.sol-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3xl);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: var(--sp-3xl);
  align-items: start;
}

.sol-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sol-hero-headline {
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.016em;
  max-width: 19ch;
  margin-top: var(--sp-md);
}

.sol-hero-lede {
  margin-top: var(--sp-lg);
  max-width: 48ch;
}

.sol-hero-actions {
  display: flex;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  flex-wrap: wrap;
}

/* The three assurances from the prototype's trust row, set as a
   single mono meta line rather than a band of check glyphs. */
.sol-hero-meta {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--paper-divider);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

@media (max-width: 1023px) {
  .sol-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2xl);
    padding: 0 var(--sp-lg);
  }
  .sol-hero { padding: var(--sp-3xl) 0 var(--sp-2xl); }
}

/* ------------------------------------------------------------
   Investor-record specimen

   The product, shown as the product: an application frame with a
   title bar, a breadcrumb, a metric strip, and a two-pane body —
   the same anatomy a user actually sees. What it does not borrow
   from a screenshot is the styling: surfaces are Harbor neutrals,
   corners stay at 0px, and depth is hairlines and tonal steps
   rather than the shadow-and-glow of a marketing mock.

   Everything here is real text, so it survives selection, screen
   readers, and print. The two controls a static page cannot honour
   — the user chip and the "Draft follow-up" action — are inert
   spans marked aria-hidden rather than dead <button>s, so nothing
   focusable does nothing.

   Accent budget: the agent pane is the page's one accent surface.
   The blocking row is marked with an accent glyph and the word
   "Missing", never fill, so status never rests on hue alone.
   ------------------------------------------------------------ */

.sol-specimen { margin: 0; }

.sol-spec-frame {
  border: 1px solid var(--paper-rule);
  background: var(--paper-canvas);
  /* The panes below split on the frame's own width, not the
     viewport's — the frame is a hero column at one breakpoint and
     full-bleed at another, so viewport media queries would guess. */
  container-type: inline-size;
}

/* Title bar — the product's own chrome, in Paper Elevated. */
.sol-spec-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: 10px var(--sp-md);
  background: var(--paper-elevated);
  border-bottom: 1px solid var(--paper-rule);
}

.sol-spec-app {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}

.sol-spec-app img {
  height: 14px;
  width: auto;
  display: block;
  flex: none;
}

/* Decorative user chip. The system's pill radius is reserved for
   live indicators, so this stays square like every other surface. */
.sol-spec-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--paper-rule);
  background: var(--paper-canvas);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
  flex: none;
}

/* Table captions name each specimen and ledger for screen readers.
   Unlike .sol-mini they stay hidden at every width — the visible
   column heads and section labels already carry the same words. */
.sol-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sol-spec-head {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.sol-spec-head span { color: var(--ink-faint); margin: 0 6px; }

.sol-spec-body { padding: var(--sp-md); }
.sol-spec-identity { margin-top: var(--sp-md); }

.sol-spec-identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.sol-spec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.sol-spec-name {
  display: block;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.002em;
  color: var(--ink-primary);
}

/* The live-indicator pill — the system's one rounded shape. */
.sol-spec-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  flex: none;
  background: var(--oxblood-tint);
  color: var(--oxblood-deep);
  border-radius: 9999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sol-spec-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--oxblood);
  flex: none;
}

/* Metric strip — a bordered panel split by vertical hairlines.
   The no-vertical-rules rule governs data tables; this is product
   chrome, and the dividers are what make it read as one control
   rather than three loose figures. */
.sol-spec-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-md);
  border: 1px solid var(--paper-rule);
}

.sol-spec-metric {
  padding: 10px var(--sp-md);
  border-left: 1px solid var(--paper-rule);
  min-width: 0;
}
.sol-spec-metric:first-child { border-left: none; }

.sol-spec-metric-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.sol-spec-metric-figure {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.01em;
}

/* Two-pane body — stacked by default, side by side once the frame
   can carry both without wrapping the requirement names. The
   requirements pane takes the larger share; it holds the longest
   strings. */
.sol-spec-panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-md);
  align-items: stretch;
}

@container (min-width: 500px) {
  .sol-spec-panes { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
}

.sol-spec-pane {
  border: 1px solid var(--paper-rule);
  min-width: 0;
}

.sol-spec-pane-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--paper-divider);
}

/* Fixed layout: auto layout balances the three columns by content
   and leaves the name column short of its max-content, wrapping
   "Subscription agreement" onto two lines. Fixed widths on the
   marker and status columns hand the remainder to the name. */
.sol-spec-reqs {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sol-spec-reqs th,
.sol-spec-reqs td {
  text-align: left;
  padding: 9px 10px;
  border-top: 1px solid var(--paper-divider);
  vertical-align: middle;
}
.sol-spec-reqs tr:first-child th,
.sol-spec-reqs tr:first-child td { border-top: none; }

/* Marker cell: outlined tick for satisfied, filled accent for the
   blocker. The status word beside it repeats the meaning in text. */
.sol-spec-mark { padding-right: 0; }
.sol-spec-reqs col.sol-spec-col-mark { width: 27px; }
.sol-spec-reqs col.sol-spec-col-state { width: 70px; }

.sol-spec-mark i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--paper-rule);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  color: var(--ink-tertiary);
}

.sol-spec-reqs .is-blocking .sol-spec-mark i {
  border-color: var(--oxblood);
  background: var(--oxblood);
  color: var(--paper-canvas);
}

.sol-spec-req {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-primary);
}

.sol-spec-state {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  white-space: nowrap;
  text-align: right;
}

.sol-spec-reqs .is-blocking .sol-spec-req,
.sol-spec-reqs .is-blocking .sol-spec-state {
  color: var(--oxblood-deep);
  font-weight: 500;
}

/* Agent pane — the page's one accent surface. */
/* A pane whose content is prose rather than a table. The agent pane
   below is this plus the accent skin. */
.sol-spec-pane--text {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* Agent pane — the page's one accent surface. */
.sol-spec-agent {
  background: var(--oxblood-tint);
  border-color: var(--oxblood-soft);
}

.sol-spec-agent-label { color: var(--oxblood-deep); }

.sol-spec-claim {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-primary);
}

.sol-spec-copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

/* Inert depiction of the product's action, not a live control. */
.sol-spec-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-top: 2px;
  padding: 9px 12px;
  background: var(--paper-canvas);
  border: 1px solid var(--oxblood);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oxblood);
}

/* Pushed to the pane's foot so the two panes rule off level. */
.sol-spec-source {
  margin: auto 0 0;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--oxblood-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
}
.sol-spec-source span {
  display: block;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oxblood-deep);
}

/* On a neutral pane the same note drops to neutral ink; the accent
   tones belong to the agent surface only. */
.sol-spec-pane:not(.sol-spec-agent) > .sol-spec-source {
  border-top-color: var(--paper-divider);
}
.sol-spec-pane:not(.sol-spec-agent) > .sol-spec-source span {
  color: var(--ink-tertiary);
}

.sol-spec-caption {
  margin-top: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

@media (max-width: 420px) {
  .sol-spec-metrics { grid-template-columns: 1fr; }
  .sol-spec-metric { border-left: none; border-top: 1px solid var(--paper-rule); }
  .sol-spec-metric:first-child { border-top: none; }
}

/* ------------------------------------------------------------
   Principles index band — the structural sibling of
   .ds-stats-band: Paper Elevated, hairline above and below,
   mono numerals. Text rather than figures, so no ds-stat reuse.
   ------------------------------------------------------------ */

.sol-principles {
  background: var(--paper-elevated);
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  padding: var(--sp-2xl) 0;
}

.sol-principles-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
}

.sol-principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-md);
  align-items: baseline;
  border-top: 1px solid var(--paper-rule);
  padding-top: var(--sp-md);
}

.sol-principle-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums slashed-zero;
}

.sol-principle-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.sol-principle-text strong {
  display: block;
  font-weight: 500;
  color: var(--ink-primary);
}

@media (max-width: 900px) {
  .sol-principles-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    padding: 0 var(--sp-lg);
  }
  .sol-principles { padding: var(--sp-xl) 0; }
}

/* ------------------------------------------------------------
   Document sections — platform.html's spine
   ------------------------------------------------------------ */

.doc-section {
  padding: var(--sp-air-1) 0;
  border-bottom: 1px solid var(--paper-divider);
}
.doc-section:last-of-type { border-bottom: none; }

.doc-section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3xl);
  display: grid;
  grid-template-columns: 200px minmax(0, 720px);
  gap: var(--sp-xl);
}

/* Wide variant for the sections whose content is a ledger or a
   table rather than prose; the 720px reading measure would crush
   a three-column comparison. */
.doc-section-inner--wide {
  grid-template-columns: 200px minmax(0, 1fr);
}

@media (max-width: 1023px) {
  .doc-section-inner,
  .doc-section-inner--wide {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
    padding: 0 var(--sp-lg);
  }
  .doc-section { padding: var(--sp-3xl) 0; }
}

.doc-margin { padding-top: 8px; }
.doc-main { display: flex; flex-direction: column; gap: var(--sp-lg); }

/* The wide variant lets ledgers and tables run past the reading
   column, but headlines and prose must not follow them out — a
   single-line 900px headline reads as a banner, not a section
   head. Prose keeps the 68ch measure via .ds-body / .ds-body-lead. */
.doc-section-inner--wide .doc-main > .ds-headline { max-width: 30ch; }

.doc-section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--oxblood);
  text-transform: uppercase;
}

.doc-section-num-row {
  margin-top: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  /* Full width on purpose: the rule reads as the figure's bottom
     edge, so capping the measure would leave it visibly short of
     the diagram it belongs to. */
  border-top: 1px solid var(--paper-divider);
}

/* ------------------------------------------------------------
   §1 — Today / With Segmental comparison ledger.
   The index.html pattern: hairline horizontal rules only, mono
   column heads, serif cells, a continuous accent-tint band down
   the Segmental column.
   ------------------------------------------------------------ */

.sol-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-sm);
  border-top: 1px solid var(--paper-rule);
}

.sol-compare th,
.sol-compare td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-lg) var(--sp-xl) var(--sp-lg) 0;
  border-bottom: 1px solid var(--paper-divider);
}

.sol-compare thead th,
.sol-compare thead td { border-bottom: 1px solid var(--paper-rule); }
.sol-compare tbody tr:last-child th,
.sol-compare tbody tr:last-child td { border-bottom: 1px solid var(--paper-rule); }

.sol-compare col.sol-col-label { width: 22%; }

.sol-compare .sol-col-seg {
  background: var(--oxblood-tint);
  padding-left: var(--sp-lg);
  padding-right: var(--sp-lg);
}

.sol-colhead-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.sol-col-seg .sol-colhead-label { color: var(--oxblood-deep); }

.sol-colhead-summary {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-secondary);
}
.sol-col-seg .sol-colhead-summary { color: var(--ink-primary); }

.sol-compare-rowlabel {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-primary);
}

.sol-compare-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}
.sol-col-seg .sol-compare-text { color: var(--ink-primary); }

/* Column names for the stacked layout: always read by screen
   readers, visible only once the column heads leave the page. */
.sol-mini {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .sol-compare,
  .sol-compare tbody,
  .sol-compare tr,
  .sol-compare th,
  .sol-compare td { display: block; }
  .sol-compare thead { display: none; }
  .sol-compare th,
  .sol-compare td { padding: var(--sp-md) 0; }
  .sol-compare .sol-col-seg { padding: var(--sp-md); }
  .sol-compare-rowlabel { padding-top: var(--sp-lg); border-bottom: none; }
  .sol-mini {
    position: static;
    width: auto; height: auto;
    margin: 0 0 4px; clip-path: none;
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
  }
  .sol-col-seg .sol-mini { color: var(--oxblood-deep); }
}

/* ------------------------------------------------------------
   §2 — the six-step journey, as a numbered ruled ledger.
   ------------------------------------------------------------ */

.sol-steps {
  margin: var(--sp-sm) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-rule);
  counter-reset: sol-step;
}

.sol-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--sp-md);
  align-items: baseline;
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--paper-divider);
}
.sol-step:last-child { border-bottom: 1px solid var(--paper-rule); }

.sol-step::before {
  counter-increment: sol-step;
  content: "0" counter(sol-step);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums slashed-zero;
}

.sol-step-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-primary);
}

.sol-step-desc {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

@media (max-width: 760px) {
  .sol-step {
    grid-template-columns: 36px minmax(0, 1fr);
    row-gap: 4px;
    padding: var(--sp-md) 0;
  }
  .sol-step-desc { grid-column: 2; }
}

/* ------------------------------------------------------------
   §3 — the three experiences, as a document table.
   ------------------------------------------------------------ */

.sol-roles {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-sm);
  border-top: 1px solid var(--paper-rule);
}

.sol-roles th,
.sol-roles td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-lg) var(--sp-xl) var(--sp-lg) 0;
  border-bottom: 1px solid var(--paper-divider);
}
.sol-roles thead th,
.sol-roles thead td { border-bottom: 1px solid var(--paper-rule); }
.sol-roles tbody tr:last-child th,
.sol-roles tbody tr:last-child td { border-bottom: 1px solid var(--paper-rule); }
.sol-roles td:last-child,
.sol-roles th:last-child { padding-right: 0; }

.sol-roles col.sol-col-role { width: 25%; }
.sol-roles col.sol-col-surface { width: 26%; }

.sol-role-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.sol-role-title {
  display: block;
  margin-top: var(--sp-sm);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-primary);
}

.sol-role-copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.sol-role-surfaces {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
}

@media (max-width: 760px) {
  .sol-roles,
  .sol-roles tbody,
  .sol-roles tr,
  .sol-roles th,
  .sol-roles td { display: block; }
  .sol-roles thead { display: none; }
  .sol-roles th { padding: var(--sp-lg) 0 var(--sp-sm); border-bottom: none; }
  .sol-roles td { padding: 0 0 var(--sp-md); border-bottom: none; }
  .sol-roles tbody tr { border-bottom: 1px solid var(--paper-divider); }
  .sol-roles tbody tr:last-child { border-bottom: 1px solid var(--paper-rule); }
  .sol-role-surfaces { margin-top: var(--sp-sm); }
}

/* ------------------------------------------------------------
   §4 — the layer, as a ruled definition list. Deliberately
   un-numbered so it does not read as a second §2.
   ------------------------------------------------------------ */

.sol-deflist {
  margin: var(--sp-sm) 0 0;
  border-top: 1px solid var(--paper-rule);
}

.sol-deflist-row {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--sp-md) var(--sp-xl);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--paper-divider);
}
.sol-deflist-row:last-child { border-bottom: 1px solid var(--paper-rule); }

.sol-deflist-term {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-primary);
}

.sol-deflist-desc {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

@media (max-width: 760px) {
  .sol-deflist-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------------------
   §5 — the resolution flow diagram + the outcome panel.
   Drawn in platform.html's hand: 1px ink strokes, accent only on
   the path being argued, Fragment Mono labels throughout.
   ------------------------------------------------------------ */

.sol-flow-figure { margin: var(--sp-sm) 0 0; }

.sol-flow {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper-canvas);
}

.sol-node-rect {
  fill: var(--paper-canvas);
  stroke: var(--ink-primary);
  stroke-width: 1;
}
.sol-node-rect.is-hot {
  fill: var(--oxblood-tint);
  stroke: var(--oxblood);
  stroke-width: 1.5;
}
.sol-node-num {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--ink-tertiary);
  letter-spacing: 0.08em;
}
.sol-node-label {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink-primary);
  letter-spacing: 0.02em;
}
.sol-node-rect.is-hot ~ .sol-node-num,
.sol-node-rect.is-hot ~ .sol-node-label { fill: var(--oxblood-deep); }

.sol-flow-edge {
  stroke: var(--oxblood);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1.5 4;
  stroke-linecap: round;
}
.sol-flow-arrow { fill: var(--oxblood); }

/* Entrance: nodes arrive left to right so the eye reads the
   sequence in order. Hidden by default; .is-revealed is applied
   by site.js when the figure scrolls into view. */
.sol-flow .sol-node,
.sol-flow .sol-flow-edge,
.sol-flow .sol-flow-arrow { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sol-flow-figure.is-revealed .sol-node,
  .sol-flow-figure.is-revealed .sol-flow-edge,
  .sol-flow-figure.is-revealed .sol-flow-arrow {
    animation: sol-fade 400ms var(--ease-out-quart) forwards;
  }
  .sol-flow-figure.is-revealed .sol-node:nth-of-type(1) { animation-delay: 0ms; }
  .sol-flow-figure.is-revealed .sol-node:nth-of-type(2) { animation-delay: 110ms; }
  .sol-flow-figure.is-revealed .sol-node:nth-of-type(3) { animation-delay: 220ms; }
  .sol-flow-figure.is-revealed .sol-node:nth-of-type(4) { animation-delay: 330ms; }
  .sol-flow-figure.is-revealed .sol-node:nth-of-type(5) { animation-delay: 440ms; }
  .sol-flow-figure.is-revealed .sol-node:nth-of-type(6) { animation-delay: 600ms; }
  .sol-flow-figure.is-revealed .sol-flow-edge,
  .sol-flow-figure.is-revealed .sol-flow-arrow { animation-delay: 520ms; }
}

/* No observer, no motion preference, or no JS: show the final
   state. The diagram is content, so it must never depend on the
   animation having run. */
@media (prefers-reduced-motion: reduce) {
  .sol-flow .sol-node,
  .sol-flow .sol-flow-edge,
  .sol-flow .sol-flow-arrow { opacity: 1; }
}

@keyframes sol-fade {
  to { opacity: 1; }
}

.sol-result {
  margin: var(--sp-lg) 0 0;
  background: var(--paper-elevated);
  border: 1px solid var(--paper-rule);
  padding: var(--sp-lg) var(--sp-xl);
}

.sol-result-claim {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-primary);
}

.sol-result-body {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

/* ------------------------------------------------------------
   §6 — outcomes, as a ruled index.
   ------------------------------------------------------------ */

.sol-outcomes {
  margin: var(--sp-sm) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-rule);
  counter-reset: sol-outcome;
}

.sol-outcome {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-md);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--paper-divider);
}
.sol-outcome:last-child { border-bottom: 1px solid var(--paper-rule); }

.sol-outcome::before {
  counter-increment: sol-outcome;
  content: "0" counter(sol-outcome);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums slashed-zero;
}

.sol-outcome-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-primary);
}

/* ------------------------------------------------------------
   Demo callout
   ------------------------------------------------------------ */

.sol-demo-section {
  padding: var(--sp-air-1) 0 var(--sp-air-2);
}
.sol-demo-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3xl);
}
@media (max-width: 768px) {
  .sol-demo-inner { padding: 0 var(--sp-lg); }
  .sol-demo-section { padding: var(--sp-3xl) 0; }
}

.sol-demo-notes {
  margin: var(--sp-md) 0 0;
  padding: var(--sp-md) 0 0;
  border-top: 1px solid var(--paper-rule);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
  max-width: 56ch;
}

/* ------------------------------------------------------------
   Print — the specimen and the flow diagram must survive
   monochrome. Tonal fills go, hairlines stay.
   ------------------------------------------------------------ */

@media print {
  .sol-hero { padding: 0 0 18pt; }
  .sol-hero-inner,
  .sol-principles-inner,
  .doc-section-inner,
  .doc-section-inner--wide {
    grid-template-columns: 1fr;
    gap: 12pt;
    padding: 0;
  }
  .sol-spec-frame,
  .sol-result { border: 1px solid #16202a; background: transparent !important; }
  .sol-principles { background: transparent !important; padding: 12pt 0; }
  .sol-compare .sol-col-seg,
  .sol-spec-titlebar,
  .sol-spec-agent { background: transparent !important; }
  .sol-spec-agent { border: 1px solid #284b63; }
  .sol-spec-status { background: transparent !important; border: 1px solid #284b63; }
  /* The blocker's accent-filled tick inverts to white-on-accent on
     screen; in monochrome that would print as an empty box. */
  .sol-spec-reqs .is-blocking .sol-spec-mark i {
    background: transparent !important;
    color: #284b63 !important;
    border-color: #284b63;
  }
  .sol-flow .sol-node,
  .sol-flow .sol-flow-edge,
  .sol-flow .sol-flow-arrow { opacity: 1; }
  .doc-section { padding: 18pt 0; page-break-inside: auto; }
  .sol-compare, .sol-roles { page-break-inside: auto; }
  .sol-step, .sol-outcome, .sol-deflist-row { page-break-inside: avoid; }
}