/* CloudSergeant public site.
   Hand-written, no framework and no build step — see apps/web/CLAUDE.md: "/" is a static
   HTML/CSS site from wwwroot, anonymous and crawlable.

   The chrome (header, footer) is dark navy on every page. Content sits in alternating bands:
   .band--dark for the hero and the trust sections, .band--light for everything else. Colours are
   stated explicitly rather than inherited from a color-scheme, because the page is mixed. */

:root {
  /* Navy family — carried over from the original download page. */
  --navy-900: #07101f;
  --navy-800: #0b1728;
  --navy-700: #0d1d33;
  --navy-600: #14263f;
  --ink-on-navy: #eef5ff;
  --muted-on-navy: #b7c6da;
  --faint-on-navy: #8295ae;
  --rule-on-navy: rgba(154, 196, 244, 0.24);

  /* Light band. */
  --paper: #f6f8fb;
  --paper-raised: #ffffff;
  --ink: #0d1d33;
  --muted: #48566b;
  --faint: #6b7a91;
  --rule: #dde4ee;

  /* Accents. Blue was already the download button. Orange is the desktop app's accent
     (apps/desktop/src/MainWindow.xaml) so the two products agree.
     #F7630C is used as a BACKGROUND with navy text on it; for orange TEXT on navy use
     --orange-lift, because #F7630C on #07101f is too low-contrast for body copy. */
  --blue: #4ea5ff;
  --blue-bright: #79baff;
  --orange: #f7630c;
  --orange-lift: #ffa95c;

  --radius: 0.9rem;
  --radius-lg: 1.25rem;
  --shell: min(72rem, calc(100% - 3rem));

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shared primitives ---------- */

.shell { width: var(--shell); margin: 0 auto; }

/* The cloud backdrop from the desktop app (apps/desktop/src/Assets/cloud.png), same corner and
   the same faint treatment as MainWindow.xaml. Painted over the bands, not behind them, because
   each band has an opaque background of its own. The negative offsets bleed it off the right and
   bottom edges so it reads as a backdrop rather than a sticker.

   ⚠️ overflow-x: clip, never overflow: hidden — `hidden` would make .page-canvas a scroll
   container and silently kill position: sticky on the docs sidebar and on sticky table headers.
   `clip` contains the bleed without creating one. */
.page-canvas { position: relative; overflow-x: clip; }
.content-cloud {
  position: absolute;
  right: -6rem;
  bottom: -7rem;
  width: clamp(16rem, 34vw, 32rem);
  height: auto;
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}

.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band--dark { background: var(--navy-900); color: var(--ink-on-navy); }
.band--light { background: var(--paper); color: var(--ink); }
.band--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
/* A band continuing the one above it, so the two do not stack their padding. */
.band--continues { padding-top: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.7rem 1rem;
  background: var(--orange);
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--orange-lift); outline-offset: 3px; border-radius: 3px; }
.band--light :focus-visible { outline-color: var(--orange); }

.eyebrow,
.card-kicker {
  margin: 0;
  color: var(--orange-lift);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.band--light .eyebrow { color: #c2490a; } /* darkened for contrast on paper */

code, kbd, .mono {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}
code {
  padding: 0.1em 0.36em;
  border-radius: 0.3rem;
  background: rgba(13, 29, 51, 0.07);
  color: #143a63;
}
.band--dark code {
  background: rgba(154, 196, 244, 0.14);
  color: #cfe4ff;
}

/* ---------- header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--navy-900);
  color: var(--ink-on-navy);
  border-bottom: 1px solid var(--rule-on-navy);
}
.site-header > .shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink-on-navy);
}
.brand-mark { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }

.global-menu { margin-left: auto; }
.global-menu-toggle {
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-on-navy);
  border-radius: 0.65rem;
  color: var(--ink-on-navy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.global-menu-toggle::-webkit-details-marker { display: none; }
.global-menu-toggle:focus-visible { outline: 3px solid var(--orange-lift); outline-offset: 3px; }
.global-menu-icon { display: grid; gap: 4px; width: 1.25rem; }
.global-menu-icon > span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transition: opacity 120ms ease, transform 120ms ease;
}
.global-menu[open] .global-menu-icon > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.global-menu[open] .global-menu-icon > span:nth-child(2) { opacity: 0; }
.global-menu[open] .global-menu-icon > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.global-menu > .site-nav { display: flex; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--muted-on-navy);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink-on-navy); }
.site-nav a[aria-current="page"] {
  color: var(--ink-on-navy);
  border-bottom-color: var(--orange);
}

/* ---------- hero ---------- */

.beta-splash {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 169, 92, 0.46);
  border-radius: var(--radius);
  background:
    linear-gradient(110deg, rgba(247, 99, 12, 0.16), rgba(78, 165, 255, 0.08)),
    var(--navy-800);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.2);
}
.beta-splash__badge {
  flex: 0 0 auto;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: var(--orange);
  color: var(--navy-900);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.beta-splash__copy { flex: 1 1 auto; min-width: 0; }
.beta-splash__title {
  margin: 0;
  color: var(--ink-on-navy);
  font-size: 1.05rem;
  font-weight: 780;
  line-height: 1.3;
}
.beta-splash__copy > p:last-child {
  margin: 0.15rem 0 0;
  color: var(--muted-on-navy);
  font-size: 0.92rem;
  line-height: 1.45;
}
.beta-splash__action {
  flex: 0 0 auto;
  color: var(--ink-on-navy);
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.beta-splash__action:hover { color: var(--orange-lift); }

.hero {
  position: relative;
  max-width: 52rem;
}
h1 {
  margin: 0.5rem 0 1.2rem;
  font-size: clamp(2.5rem, 6.5vw, 4.6rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
  font-weight: 800;
}
.lede {
  max-width: 44rem;
  margin: 0;
  color: var(--muted-on-navy);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.65;
}
.band--light .lede { color: var(--muted); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border-radius: 0.65rem;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--orange); color: var(--navy-900); }
.btn--primary:hover { background: #ff7c2d; }
.btn--ghost { border-color: var(--rule-on-navy); color: var(--ink-on-navy); }
.btn--ghost:hover { border-color: var(--blue); }
.band--light .btn--ghost { border-color: var(--rule); color: var(--ink); background: var(--paper-raised); }

/* ---------- download card (ids consumed by site.js: keep the markup contract) ---------- */

.download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.15rem, 3vw, 1.6rem);
  border: 1px solid var(--rule-on-navy);
  border-radius: var(--radius-lg);
  background: rgba(13, 29, 51, 0.78);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}
.download-card__meta { min-width: 0; }
.download-card h2 { margin: 0.15rem 0 0.3rem; font-size: 1.15rem; }
.download-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Version and size share one line — both inline, so they wrap together as one run of text.
   site.js leaves #release-detail empty until the API answers, and empty on failure, so the
   separator hangs off the text rather than being printed unconditionally. */
.release-status,
.release-detail { display: inline; margin: 0; color: var(--muted-on-navy); line-height: 1.55; }
.release-detail { color: var(--faint-on-navy); font-size: 0.92rem; }
.release-detail:not(:empty)::before { content: "· "; }

.footnote-list {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  max-width: 46rem;
  color: var(--muted-on-navy);
  font-size: 0.88rem;
  line-height: 1.55;
}
.footnote-list li { margin-bottom: 0.3rem; }

.download-button {
  flex: 0 0 auto;
  padding: 0.85rem 1.2rem;
  border-radius: 0.65rem;
  background: var(--blue);
  color: #06101d;
  font-weight: 750;
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease;
}
.download-button:hover { transform: translateY(-1px); background: var(--blue-bright); }

/* ---------- headings in content ---------- */

h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-weight: 780;
}
h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.18rem;
  font-weight: 720;
  letter-spacing: -0.015em;
}
.section-lede {
  max-width: 44rem;
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: 1.05rem;
}
.band--dark .section-lede { color: var(--muted-on-navy); }

/* ---------- card grids ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.15rem;
}
.card {
  padding: 1.4rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}
.card h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.card-icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.7rem;
  color: var(--orange);
}
.band--dark .card {
  background: var(--navy-700);
  border-color: var(--rule-on-navy);
}
.band--dark .card p { color: var(--muted-on-navy); }

/* Numbered steps. */
.steps { counter-reset: step; display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); list-style: none; padding: 0; margin: 0; }
.steps > li { counter-increment: step; padding-left: 3rem; position: relative; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy-900);
  font-weight: 800;
}
.steps h3 { margin: 0.15rem 0 0.3rem; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.band--dark .steps p { color: var(--muted-on-navy); }

/* ---------- figures (SVG illustrations; swappable for real screenshots) ---------- */

figure {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  overflow-x: auto;
}
.band--dark figure { background: var(--navy-700); border-color: var(--rule-on-navy); }
figure svg, figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
figcaption {
  margin-top: 0.9rem;
  color: var(--faint);
  font-size: 0.86rem;
  text-align: center;
}
.band--dark figcaption { color: var(--faint-on-navy); }
/* Honest labelling: these are drawings, not photographs of the product. */
.fig-tag {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- callouts ---------- */

.callout {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(78, 165, 255, 0.08);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--orange); background: rgba(247, 99, 12, 0.09); }
.callout--stop { border-left-color: #c8371b; background: rgba(200, 55, 27, 0.08); }
.callout-title { font-weight: 750; display: block; margin-bottom: 0.3rem; }

/* ---------- documentation layout ---------- */

.doc-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.doc-nav {
  position: sticky;
  top: 1.5rem;
  /* Groups are collapsible <details> (below), open only for the group the current page belongs to,
     which is what normally keeps this well within any viewport. The cap and internal scroll stay as
     a safety net for whatever a reader opens by hand — nine groups' worth of links all expanded at
     once still runs to ~1200px, taller than most viewports, and a stuck sticky element doesn't move
     with the page, so without this its lower portion would simply sit below the fold with no way to
     reach it short of scrolling the far longer article beside it. */
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  font-size: 0.94rem;
}
.doc-nav details { margin-bottom: 0.9rem; }
.doc-nav details:last-of-type { margin-bottom: 0; }
.doc-nav summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.15rem 0;
}
.doc-nav summary::-webkit-details-marker { display: none; }
.doc-nav summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.4rem;
  border-color: transparent transparent transparent var(--faint);
  transition: transform 0.15s ease;
}
.doc-nav details[open] > summary::before { transform: rotate(90deg); }
.doc-nav summary:hover { color: var(--ink); }
.doc-nav ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.doc-nav li { margin: 0; }
.doc-nav a {
  display: block;
  padding: 0.32rem 0 0.32rem 0.8rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  text-decoration: none;
}
.doc-nav a:hover { color: var(--ink); border-left-color: var(--faint); }
.doc-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  border-left-color: var(--orange);
}

.doc-body { max-width: 46rem; min-width: 0; }
/* /docs/roles/ only: a five-column capability matrix does not fit the prose reading measure.
   The grid column is already minmax(0, 1fr), and .table-scroll still handles narrow viewports. */
.doc-body--wide { max-width: none; }
.doc-body > h2 { margin-top: 2.75rem; padding-top: 0.4rem; }
.doc-body > h2:first-of-type { margin-top: 0; }
.doc-body p, .doc-body li { color: var(--muted); }
.doc-body p { margin: 0 0 1rem; }
.doc-body ul, .doc-body ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.doc-body li { margin-bottom: 0.4rem; }
.doc-body li > strong { color: var(--ink); }
.doc-body dl { margin: 0 0 1.25rem; }
.doc-body dt { font-weight: 720; color: var(--ink); margin-top: 1rem; }
.doc-body dd { margin: 0.25rem 0 0; color: var(--muted); }

/* The support page is deliberately one linear checklist rather than a grid: troubleshooting order
   matters, and the large native numbers keep a long list scannable without turning it into cards. */
.support-checklist {
  margin: 0;
  padding-left: 2rem;
}
.support-checklist > li {
  padding: 0 0 1.6rem 0.45rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.6rem;
}
.support-checklist > li::marker {
  color: #c2490a;
  font-size: 1.15rem;
  font-weight: 800;
}
.support-checklist > li > strong:first-child {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 1.2rem;
}
.support-checklist > li > :last-child { margin-bottom: 0; }

.breadcrumb {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--faint);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.page-head { padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(1.75rem, 4vw, 2.5rem); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.75rem; }

/* Topic index on the docs hub. */
.topic-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.topic {
  display: block;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}
.topic:hover { border-color: var(--orange); transform: translateY(-2px); }
.topic strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 0.25rem; }
.topic span { color: var(--muted); font-size: 0.94rem; }

/* Next/previous. */
.doc-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-weight: 650;
}
.doc-footer-nav a { color: var(--ink); text-decoration: none; }
.doc-footer-nav a:hover { color: #c2490a; }

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1rem 0;
  color: var(--faint);
  font-size: 0.86rem;
}
th, td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
thead th {
  background: #eef2f8;
  color: var(--ink);
  font-weight: 720;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
}
tbody th { font-weight: 650; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--faint); font-size: 0.85em; margin-top: 0.2rem; }

/* Verdict cells. Text carries the meaning; the dot is decoration only, so nothing
   depends on colour alone. */
.verdict { display: inline-flex; align-items: baseline; gap: 0.4rem; font-weight: 650; }
.verdict::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  transform: translateY(-0.1em);
}
.verdict--yes { color: #16704a; }
.verdict--yes::before { background: #1e9c67; }
.verdict--partial { color: #8a4a06; }
.verdict--partial::before { background: var(--orange); }
.verdict--no { color: #962711; }
.verdict--no::before { background: #c8371b; }

/* Capability matrix section headers: a full-width row inside tbody naming which main desktop
   navigation group the rows below it belong to, so a long table still reads in the app's own
   sections. Not sticky and not thead — this can repeat (the same group's rows aren't always
   contiguous), where a sticky thead must stay unique. */
.matrix-group th {
  background: #eef2f8;
  color: var(--ink);
  font-weight: 720;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- footer ---------- */

.site-footer {
  /* Positioned so it paints above .content-cloud, which is absolutely positioned and would
     otherwise drift over these links — the footer always occupies the corner the cloud bleeds
     into, at every width. The footer's top edge is therefore where the cloud ends. */
  position: relative;
  z-index: 1;
  background: var(--navy-900);
  color: var(--muted-on-navy);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
  border-top: 1px solid var(--rule-on-navy);
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 2rem;
}
.site-footer h2 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint-on-navy);
  margin: 0 0 0.7rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a { color: var(--muted-on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--ink-on-navy); text-decoration: underline; }
.footer-base {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-on-navy);
  color: var(--faint-on-navy);
  font-size: 0.87rem;
}
.footer-base p { margin: 0 0 0.4rem; }

/* ---------- illustration internals ----------
   Shared by the inline SVG figures so their palette tracks the tokens above. */
.ill-panel { fill: var(--navy-800); }
.ill-surface { fill: var(--navy-700); }
.ill-rule { stroke: var(--rule-on-navy); stroke-width: 1; fill: none; }
.ill-text { fill: var(--ink-on-navy); font-size: 11px; font-weight: 600; }
.ill-dim { fill: var(--muted-on-navy); font-size: 10px; }
.ill-accent { fill: var(--orange); }
.ill-accent-text { fill: var(--orange-lift); font-size: 10px; font-weight: 700; }
.ill-blue { fill: var(--blue); }
figure svg text { font-family: inherit; }

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  .site-header > .shell { flex-wrap: nowrap; }
  .global-menu-toggle { display: flex; margin-left: auto; }
  .global-menu > .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    margin-top: 0.65rem;
    padding: 0.55rem 1rem 0.8rem;
    border: 1px solid var(--rule-on-navy);
    border-top-color: rgba(154, 196, 244, 0.12);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--navy-900);
    box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, 0.32);
  }
  .global-menu:not([open]) > .site-nav { display: none; }
  .site-nav a { min-height: 2.75rem; padding: 0.75rem 0.25rem; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2rem;
  }
  .doc-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 1rem;
  }
  .doc-nav a { border-left: 0; padding-left: 0; }
  .doc-nav a[aria-current="page"] { border-left: 0; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
}

@media (max-width: 42rem) {
  :root { --shell: min(100% - 2rem, 72rem); }
  .beta-splash { align-items: flex-start; flex-direction: column; }
  .beta-splash__action { margin-top: 0.15rem; }
  .download-card { align-items: stretch; flex-direction: column; }
  .download-actions { align-items: stretch; flex-direction: column; }
  .download-button { text-align: center; }
  .download-actions .btn { justify-content: center; }
  .content-cloud { display: none; }
  .site-header > .shell { min-height: 0; padding: 0.9rem 0; }
  .steps > li { padding-left: 2.6rem; }
  thead th { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, .download-button:hover, .topic:hover { transform: none; }
}