/* ShadowClaw documentation — editorial layer over Material for MkDocs.
 *
 * The visual system is deliberately ruled rather than carded: borders and
 * rules carry hierarchy, radius and shadow are close to absent, and the
 * only saturated colour in the page is the accent and the severity scale.
 * A detector's documentation should read like an instrument panel, and a
 * severity band should be the brightest thing on the screen.
 *
 * Sections, in order:
 *   1. Brand tokens
 *   2. Typography
 *   3. Tables
 *   4. Code, admonitions, and content chrome
 *   5. Editorial primitives (grids, rails, strips, badges)
 *   6. Landing page
 *   7. Responsive + reduced motion
 */

/* ── 1. Brand tokens ─────────────────────────────────────────────── */

:root {
  --sc-ink: #0a0e12;
  --sc-paper: #ffffff;
  --sc-soft: #f4f7f8;
  --sc-rule: #dae1e5;
  --sc-rule-soft: #e8eef1;
  --sc-muted: #566068;

  --sc-accent: #0d7d8c;
  --sc-accent-strong: #096270;
  --sc-accent-bright: #0a94a6;
  --sc-on-accent: #ffffff;

  /* Severity scale. Mirrors shadowclaw/scoring.py bands so a colour in
   * the docs means the same thing it means in a finding. */
  --sc-critical: #c02533;
  --sc-high: #a5460a;
  --sc-medium: #856000;
  --sc-low: #4b5b66;
  --sc-info: #0d7d8c;

  /* Detection planes. Used by the plane rail, the plane badges, and the
   * signal tables so plane membership is legible without reading a label. */
  --sc-plane-a: #5b53b8;
  --sc-plane-b: #0d7d8c;
  --sc-plane-c: #a5460a;

  --md-primary-fg-color: var(--sc-accent);
  --md-primary-fg-color--light: var(--sc-accent-bright);
  --md-primary-fg-color--dark: var(--sc-accent-strong);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: var(--sc-accent-bright);

  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--sc-accent-strong);
  --md-footer-bg-color: var(--sc-ink);
  --md-footer-bg-color--dark: #05080a;
}

[data-md-color-scheme="slate"] {
  --sc-ink: #e2e8ea;
  --sc-paper: #12181c;
  --sc-soft: #182025;
  --sc-rule: #333f46;
  --sc-rule-soft: #262f35;
  --sc-muted: #adb8bf;

  --sc-accent: #45c9d8;
  --sc-accent-strong: #5ed3e0;
  --sc-accent-bright: #6fdbe8;
  --sc-on-accent: #04181c;

  --sc-critical: #ff7b83;
  --sc-high: #f59b52;
  --sc-medium: #dfa93a;
  --sc-low: #a3b1ba;
  --sc-info: #45c9d8;

  --sc-plane-a: #9d93f0;
  --sc-plane-b: #45c9d8;
  --sc-plane-c: #f59b52;

  --md-hue: 205;
  --md-default-bg-color: var(--sc-paper);
  --md-primary-fg-color: #101619;
  --md-primary-bg-color: var(--sc-ink);
  --md-accent-fg-color: var(--sc-accent-bright);
  --md-typeset-a-color: var(--sc-accent);
  --md-footer-bg-color: #0c1114;
  --md-footer-bg-color--dark: #070b0d;
}

/* ── 2. Typography ───────────────────────────────────────────────── */

.md-typeset {
  font-size: 0.795rem;
  line-height: 1.68;
}

.md-typeset h1 {
  max-width: 24ch;
  margin-bottom: 0.6rem;
  color: var(--sc-ink);
  font-size: 2.1rem;
  font-weight: 570;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

/* The paragraph directly after the page title acts as a standfirst:
 * larger, quieter, and separated from the body by real space. It is the
 * one place a reader decides whether this page answers their question. */
.md-typeset h1 + p {
  max-width: 62ch;
  margin-bottom: 2.4rem;
  color: var(--sc-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.md-typeset h2 {
  position: relative;
  margin-top: 3.4rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--sc-rule);
  font-size: 1.4rem;
  font-weight: 590;
  letter-spacing: -0.032em;
  line-height: 1.14;
}

/* Short accent tick riding the section rule. Cheap, and it gives the eye
 * a scannable anchor when a page runs long. */
.md-typeset h2::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.6rem;
  height: 2px;
  background: var(--sc-accent);
  content: "";
}

.md-typeset h3 {
  margin-top: 2.1rem;
  font-size: 1.06rem;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.md-typeset h4 {
  margin-top: 1.6rem;
  font-size: 0.86rem;
  font-weight: 660;
  letter-spacing: -0.01em;
}

.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  font-size: 0.92em;
}

.md-typeset strong {
  font-weight: 640;
}

.md-typeset a {
  text-underline-offset: 0.18em;
}

/* Table of contents rail — mono label, ruled left edge, same vocabulary
 * as the section headings it indexes. */
.md-nav--secondary .md-nav__title {
  color: var(--sc-accent-strong);
  font-family: var(--md-code-font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.md-nav__link--active,
.md-nav__link--active code {
  color: var(--sc-accent-strong);
  font-weight: 640;
}

.md-sidebar--secondary .md-nav {
  border-left: 1px solid var(--sc-rule);
  padding-left: 0.7rem;
}

/* ── 3. Tables ───────────────────────────────────────────────────── */

/* Reference tables are the primary artefact on half these pages, so they
 * get square corners, a hairline grid, and an accent rail over the header
 * rather than the default rounded card. */
.md-typeset table:not([class]) {
  border: 1px solid var(--sc-rule);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  border-bottom: 1px solid var(--sc-rule);
  background: var(--sc-soft);
  color: var(--sc-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
}

.md-typeset table:not([class]) thead tr {
  box-shadow: inset 0 2px 0 var(--sc-accent);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--sc-rule-soft);
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(in oklab, var(--sc-accent) 4%, transparent);
}

/* Weight columns read far faster right-aligned and tabular. Wrap the
 * table in `<div class="sc-weights" markdown>` to opt in; attr_list has
 * no reliable hook on a Markdown table itself. */
.md-typeset .sc-weights table:not([class]) td:nth-child(2),
.md-typeset .sc-weights table:not([class]) th:nth-child(2) {
  font-family: var(--md-code-font);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ── 4. Code, admonitions, and content chrome ────────────────────── */

.md-typeset pre > code,
.md-typeset .highlight > pre,
.md-typeset .highlighttable {
  border-radius: 0;
}

.md-typeset .highlight {
  border-left: 2px solid var(--sc-accent);
}

.md-typeset code {
  border-radius: 2px;
  font-size: 0.86em;
}

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--sc-rule);
  border-left-width: 3px;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.75rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 660;
  letter-spacing: -0.005em;
}

.md-typeset .tabbed-set > label {
  font-size: 0.7rem;
  font-weight: 650;
}

.md-typeset .tabbed-block {
  font-size: 0.78rem;
}

.md-typeset blockquote {
  border-left: 2px solid var(--sc-accent);
  color: var(--sc-muted);
}

.md-typeset hr {
  border-bottom-color: var(--sc-rule);
}

.md-header {
  border-bottom: 1px solid var(--sc-rule);
  box-shadow: none;
}

[data-md-color-scheme="default"] .md-header {
  background: var(--sc-paper);
  color: var(--sc-ink);
}

[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-icon,
[data-md-color-scheme="default"] .md-search__input {
  color: var(--sc-ink);
}

[data-md-color-scheme="default"] .md-search__form {
  background: var(--sc-soft);
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--sc-muted);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ── 5. Editorial primitives ─────────────────────────────────────── */

/* Mono uppercase kicker. Labels a block without spending a heading level. */
.sc-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  color: var(--sc-accent);
  font-family: var(--md-code-font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sc-kicker > span:first-child {
  padding-right: 0.55rem;
  border-right: 1px solid var(--sc-rule);
  color: var(--sc-ink);
}

/* Ruled grid of links. Replaces Material's rounded grid cards with a
 * single continuous hairline mesh — no gaps, no radius, no shadow. */
.md-typeset .sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.4rem 0 2rem;
  border-top: 1px solid var(--sc-rule);
  border-left: 1px solid var(--sc-rule);
}

/* A cell arrives in one of two shapes, and both have to work.
 *
 *   <a>…</a>        raw HTML, as the landing-page template writes it
 *   <p><a>…</a></p> Markdown, which wraps a link on its own line in a
 *                   paragraph
 *
 * So the border and sizing go on whatever the grid child is, and the
 * padding goes on the anchor, which stretches to fill the cell. That keeps
 * the whole cell clickable in both shapes rather than just the text. */
.md-typeset .sc-grid > * {
  display: flex;
  min-height: 8rem;
  flex-direction: column;
  gap: 0.4rem;
  margin: -1px 0 0 -1px;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--sc-rule);
  color: inherit;
  transition: border-color 160ms ease, background-color 160ms ease;
}

/* The paragraph is a wrapper, not a cell of its own: it owns the border and
 * hands its padding to the link inside. */
.md-typeset .sc-grid > p {
  padding: 0;
}

.md-typeset .sc-grid > a,
.md-typeset .sc-grid > p > a {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.md-typeset .sc-grid > p > a {
  padding: 1.05rem 1.15rem;
}

/* :focus-within so a keyboard user sees the same affordance as a mouse
 * user, since on the wrapped shape the focus lands on a descendant. */
.md-typeset .sc-grid > *:hover,
.md-typeset .sc-grid > *:focus-within {
  position: relative;
  z-index: 1;
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 4%, transparent);
}

.md-typeset .sc-grid strong {
  display: block;
  color: var(--sc-ink);
  font-size: 0.83rem;
  font-weight: 660;
  letter-spacing: -0.012em;
}

/* The description. A `<span>` in link cells, because a block element inside
 * an anchor Markdown has paragraph-wrapped is invalid and gets split out of
 * the link by the parser; a `<p>` in the plain `<div markdown>` cells,
 * where nesting is fine. Deliberately not `.sc-grid p`, which would also
 * match the paragraph wrapping a link and shrink the whole cell. */
.md-typeset .sc-grid a span,
.md-typeset .sc-grid > div p {
  display: block;
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.md-typeset .sc-grid > *:hover strong,
.md-typeset .sc-grid > *:focus-within strong {
  color: var(--sc-accent-strong);
}

/* Three-column ruled rail. The canonical way this documentation shows a
 * sequence of three: the detection planes, the lifecycle, the outputs. */
.md-typeset .sc-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.6rem 0 2.2rem;
  border-block: 1px solid var(--sc-rule);
}

.md-typeset .sc-rail > * {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  padding: 1.15rem 1.5rem 1.4rem;
  border-right: 1px solid var(--sc-rule);
}

.md-typeset .sc-rail > *:first-child {
  padding-left: 0;
}

.md-typeset .sc-rail > *:last-child {
  border-right: 0;
}

/* Card title, not a page section. Authored as a paragraph rather than an
 * `h3` so it keeps this hierarchy without adding three misleading entries
 * per rail to the right-hand table of contents. */
.md-typeset .sc-rail .sc-rail-title {
  margin: 2rem 0 0;
  color: var(--sc-ink);
  font-size: 1.16rem;
  font-weight: 570;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.md-typeset .sc-rail p:not(.sc-rail-title) {
  margin: 0.7rem 0 0;
  color: var(--sc-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.md-typeset .sc-rail ul {
  margin: auto 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--sc-rule);
  list-style: none;
}

.md-typeset .sc-rail li {
  margin: 0.3rem 0 0;
  padding-left: 0.85rem;
  color: var(--sc-muted);
  font-size: 0.7rem;
  text-indent: -0.85rem;
}

.md-typeset .sc-rail li::before {
  display: inline-block;
  width: 0.85rem;
  color: var(--sc-accent);
  content: "\203A";
  font-weight: 700;
  text-indent: 0;
}

/* Per-plane accent on the rail, so plane A/B/C keep one colour across
 * the landing page, the plane pages, and the signal tables. */
.md-typeset .sc-rail > .sc-plane-a { border-top: 2px solid var(--sc-plane-a); }
.md-typeset .sc-rail > .sc-plane-b { border-top: 2px solid var(--sc-plane-b); }
.md-typeset .sc-rail > .sc-plane-c { border-top: 2px solid var(--sc-plane-c); }
.md-typeset .sc-rail > .sc-plane-a .sc-rail-index { color: var(--sc-plane-a); }
.md-typeset .sc-rail > .sc-plane-b .sc-rail-index { color: var(--sc-plane-b); }
.md-typeset .sc-rail > .sc-plane-c .sc-rail-index { color: var(--sc-plane-c); }
.md-typeset .sc-rail > .sc-plane-a li::before { color: var(--sc-plane-a); }
.md-typeset .sc-rail > .sc-plane-b li::before { color: var(--sc-plane-b); }
.md-typeset .sc-rail > .sc-plane-c li::before { color: var(--sc-plane-c); }

.sc-rail-index {
  color: var(--sc-accent);
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Fact strip. Ruled cells of label + value, for counts worth stating
 * once at the top of a page. */
.md-typeset .sc-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 1.5rem 0 2rem;
  padding: 0;
  border-block: 1px solid var(--sc-rule);
}

.md-typeset .sc-strip > div {
  min-width: 0;
  padding: 0.75rem 1rem;
  border-right: 1px solid var(--sc-rule);
}

.md-typeset .sc-strip > div:first-child {
  padding-left: 0;
}

.md-typeset .sc-strip > div:last-child {
  border-right: 0;
}

.md-typeset .sc-strip dt,
.md-typeset .sc-strip .sc-strip-label {
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.md-typeset .sc-strip dd,
.md-typeset .sc-strip .sc-strip-value {
  margin: 0.3rem 0 0;
  color: var(--sc-ink);
  font-family: var(--md-code-font);
  font-size: 0.78rem;
  font-weight: 640;
  line-height: 1.35;
}

/* Numbered list of capabilities — a ruled mesh of "you can do this".
 *
 * Fixed column counts rather than `auto-fit`: a flexible track count would
 * size columns to whatever fits the container regardless of how many items
 * exist, leaving oddly-proportioned cards. 3 columns, then 2, then a single
 * column below `44em`. With a count that is not a multiple of the column
 * count, the last row is simply shorter rather than uneven-width — the item
 * count need not divide evenly for this to read cleanly. */
.md-typeset ol.sc-numbered {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem 0 2rem;
  padding: 0;
  border-top: 1px solid var(--sc-rule);
  border-left: 1px solid var(--sc-rule);
  list-style: none;
  counter-reset: sc-item;
}

.md-typeset ol.sc-numbered > li {
  margin: 0 0 -1px -1px;
  padding: 0;
  border: 1px solid var(--sc-rule);
  counter-increment: sc-item;
}

/* The anchor is the grid, and it fills the cell, so the entire card is the
 * click target rather than just the title. Explicit placement keeps the
 * counter in column one spanning both rows — without it the two text
 * children and the ::before compete for the same two tracks and the
 * description drops below the number. */
.md-typeset ol.sc-numbered > li > a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 0.8rem;
  align-items: start;
  height: 100%;
  padding: 1.05rem 1.2rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

.md-typeset ol.sc-numbered > li > a::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--sc-accent);
  content: counter(sc-item, decimal-leading-zero);
  font-family: var(--md-code-font);
  font-size: 0.64rem;
  font-weight: 700;
  /* Optically seats the counter on the title's first baseline: the title
   * line box is 0.83rem x 1.4, and this reproduces that height at the
   * counter's smaller size. */
  line-height: 1.82;
}

.md-typeset ol.sc-numbered strong {
  grid-column: 2;
  grid-row: 1;
  color: var(--sc-ink);
  font-size: 0.83rem;
  font-weight: 640;
  letter-spacing: -0.012em;
  line-height: 1.4;
}

.md-typeset ol.sc-numbered > li > a > span {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.32rem;
  color: var(--sc-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.md-typeset ol.sc-numbered > li:hover,
.md-typeset ol.sc-numbered > li:focus-within {
  position: relative;
  z-index: 1;
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 4%, transparent);
}

.md-typeset ol.sc-numbered > li:hover strong,
.md-typeset ol.sc-numbered > li:focus-within strong {
  color: var(--sc-accent-strong);
}

/* Severity and plane badges. Inline, mono, uppercase — the same shape a
 * finding uses, so `critical` in prose looks like `critical` on a
 * dashboard. */
.sc-sev,
.sc-plane {
  display: inline-flex;
  align-items: center;
  padding: 0.06rem 0.36rem;
  border: 1px solid currentcolor;
  font-family: var(--md-code-font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-sev-critical { color: var(--sc-critical); }
.sc-sev-high { color: var(--sc-high); }
.sc-sev-medium { color: var(--sc-medium); }
.sc-sev-low { color: var(--sc-low); }
.sc-sev-info { color: var(--sc-info); }
.sc-plane-badge-a { color: var(--sc-plane-a); }
.sc-plane-badge-b { color: var(--sc-plane-b); }
.sc-plane-badge-c { color: var(--sc-plane-c); }

/* Terminal transcript. Distinct from a code block: this is output the
 * sensor produced, not a command you type. */
.md-typeset .sc-terminal {
  margin: 1.3rem 0;
  border: 1px solid var(--sc-rule);
  border-top: 2px solid var(--sc-accent);
  background: var(--sc-soft);
}

.md-typeset .sc-terminal > .highlight {
  border-left: 0;
}

.md-typeset .sc-terminal-label {
  display: block;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--sc-rule);
  color: var(--sc-muted);
  font-family: var(--md-code-font);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── 6. Landing page ─────────────────────────────────────────────── */

/* The landing page renders entirely inside base.html's `hero` block, which
 * sits above `.md-main` and therefore outside `.md-grid`'s width cap. That
 * is what lets these sections span the viewport; `overrides/home.html`
 * empties the article container and both sidebars to match. */
.sc-shell {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}

.sc-hero {
  border-bottom: 1px solid var(--sc-rule);
  background:
    linear-gradient(
      120deg,
      color-mix(in oklab, var(--sc-accent) 6%, transparent),
      transparent 55%
    ),
    var(--sc-paper);
}

.sc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.sc-hero h1 {
  max-width: 15ch;
  margin: 1rem 0 0;
  color: var(--sc-ink);
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  font-weight: 555;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.sc-hero .sc-lede {
  max-width: 42rem;
  margin: 1.3rem 0 0;
  color: var(--sc-muted);
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  line-height: 1.7;
}

.sc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.7rem;
}

.sc-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--sc-rule);
  color: var(--sc-ink);
  font-size: 0.76rem;
  font-weight: 640;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.sc-button:hover,
.sc-button:focus-visible {
  border-color: var(--sc-accent);
  color: var(--sc-accent-strong);
}

.sc-button-primary {
  border-color: var(--sc-accent);
  background: var(--sc-accent);
  color: var(--sc-on-accent);
}

.sc-button-primary:hover,
.sc-button-primary:focus-visible {
  border-color: var(--sc-accent-bright);
  background: var(--sc-accent-bright);
  color: var(--sc-on-accent);
}

/* Hero panel — a static rendering of one real finding. The landing page
 * should show the product's output, not a stock illustration. */
.sc-hero-panel {
  border: 1px solid var(--sc-rule);
  border-top: 2px solid var(--sc-critical);
  background: var(--sc-paper);
}

.sc-hero-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--sc-rule);
  color: var(--sc-muted);
  font-family: var(--md-code-font);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sc-hero-panel pre {
  overflow-x: auto;
  margin: 0;
  padding: 0.9rem;
  color: var(--sc-ink);
  font-family: var(--md-code-font);
  font-size: 0.66rem;
  line-height: 1.7;
}

.sc-hero-panel-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--sc-rule);
}

.sc-hero-panel-foot > div {
  padding: 0.6rem 0.9rem;
  border-right: 1px solid var(--sc-rule);
}

.sc-hero-panel-foot > div:last-child {
  border-right: 0;
}

.sc-hero-panel-foot dt,
.sc-hero-panel-foot .sc-strip-label {
  color: var(--sc-muted);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sc-hero-panel-foot dd,
.sc-hero-panel-foot .sc-strip-value {
  margin: 0.22rem 0 0;
  font-family: var(--md-code-font);
  font-size: 0.68rem;
  font-weight: 640;
}

.sc-section {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--sc-rule);
}

.sc-section-tinted {
  background: var(--sc-soft);
}

.sc-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2.4rem;
}

.sc-section-intro h2 {
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
  color: var(--sc-ink);
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  font-weight: 555;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.sc-section-intro h2::before {
  display: none;
}

.sc-section-intro > div:last-child p {
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.84rem;
  line-height: 1.72;
}

.sc-section-intro > div:last-child p + p {
  margin-top: 0.8rem;
}

/* Closing band. Inverted on light, a raised surface on dark. */
.sc-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--sc-ink);
  color: var(--sc-paper);
}

.sc-cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: end;
}

.sc-cta h2 {
  max-width: 20ch;
  margin: 0.8rem 0 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  font-weight: 540;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.sc-cta h2::before {
  display: none;
}

.sc-cta p {
  max-width: 44rem;
  margin: 1rem 0 0;
  color: color-mix(in oklab, var(--sc-paper) 72%, transparent);
  font-size: 0.82rem;
  line-height: 1.7;
}

.sc-cta .sc-kicker > span:first-child,
.sc-cta .sc-kicker {
  color: var(--sc-accent-bright);
}

.sc-cta .sc-button {
  border-color: color-mix(in oklab, var(--sc-paper) 32%, transparent);
  color: var(--sc-paper);
}

.sc-cta .sc-button-primary {
  border-color: var(--sc-accent);
  background: var(--sc-accent);
  color: var(--sc-on-accent);
}

[data-md-color-scheme="slate"] .sc-cta {
  border-top: 1px solid var(--sc-rule);
  background: var(--sc-soft);
  color: var(--sc-ink);
}

[data-md-color-scheme="slate"] .sc-cta p {
  color: var(--sc-muted);
}

[data-md-color-scheme="slate"] .sc-cta .sc-button {
  border-color: var(--sc-rule);
  color: var(--sc-ink);
}

/* ── 7. Responsive + reduced motion ──────────────────────────────── */

@media screen and (max-width: 76.1875em) {
  .md-typeset ol.sc-numbered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md-typeset .sc-rail {
    grid-template-columns: 1fr;
  }

  .md-typeset .sc-rail > *,
  .md-typeset .sc-rail > *:first-child {
    min-height: auto;
    padding: 1.1rem 0 1.4rem;
    border-right: 0;
    border-bottom: 1px solid var(--sc-rule);
  }

  .md-typeset .sc-rail > *:last-child {
    border-bottom: 0;
  }

  .md-typeset .sc-rail h3 {
    margin-top: 1.2rem;
  }

  .md-typeset .sc-rail ul {
    margin-top: 1.1rem;
  }
}

@media screen and (max-width: 59.9375em) {
  .sc-hero-grid,
  .sc-section-intro,
  .sc-cta-grid {
    grid-template-columns: 1fr;
  }

  .sc-hero-grid {
    gap: 2.2rem;
  }

  .sc-section-intro {
    gap: 1rem;
    margin-bottom: 1.8rem;
  }

  .sc-cta-grid {
    align-items: start;
    gap: 1.6rem;
  }

  .md-typeset .sc-strip > div,
  .md-typeset .sc-strip > div:first-child {
    padding: 0.7rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--sc-rule);
  }

  .md-typeset .sc-strip > div:last-child {
    border-bottom: 0;
  }

  .md-typeset h1 {
    font-size: 1.85rem;
  }
}

@media screen and (max-width: 44em) {
  .md-typeset ol.sc-numbered {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .sc-grid > *,
  .sc-button {
    transition: none;
  }
}

@media print {
  .sc-hero,
  .sc-cta {
    background: none;
    color: var(--sc-ink);
  }
}