/* Vayon AI design language — "instrument" register (brief 2026-07-27-034).
   Sprint 704: this is now the SITEWIDE deep-page design system + Visual Media System, not Home-only. Every
   rule stays scoped under body.theme-instrument, so any page WITHOUT that class keeps the plain stylesheet
   untouched; a deep page opts in by extending templates/_deep_base.html (body.theme-instrument + this sheet).
   Home-specific rules (.ins-hero-*, .hero-canvas, .ins-tilegrid, routing experience) simply do not match on
   a deep page. No CSS is duplicated per page. Dark is the default. Hairlines, not shadows. The accent is one
   colour and it means "act"; --ok/--warn/--stop appear ONLY inside product visuals where they carry their
   real meaning. Monospace for every identifier, clause and number. Motion explains, or it is removed. */

body.theme-instrument {
  /* tokens live in tokens.css (:root) since brief 057 A1 — this block keeps only real properties */
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── chrome (header/footer restyled for this page only) ─────────────────────── */
body.theme-instrument .site-header {
  background:rgba(6,8,13,.88); border-block-end:1px solid var(--line);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
}
body.theme-instrument .site-header .nav-links a,
body.theme-instrument .site-header .nav-toggle { color:var(--tx2); }
body.theme-instrument .site-header .nav-links a:hover,
body.theme-instrument .site-header .nav-links a.active,
body.theme-instrument .site-header .nav-links .lang-opt.is-current { color:var(--tx); }
body.theme-instrument .site-footer {
  background:var(--bg2); border-block-start:1px solid var(--line); color:var(--tx2);
}
body.theme-instrument .site-footer a { color:var(--tx2); }
body.theme-instrument .site-footer a:hover { color:var(--tx); }
body.theme-instrument .site-footer h2 { color:var(--tx2); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; }
body.theme-instrument .skip-link:focus { background:var(--panel2); color:var(--tx); }

/* ── typography ─────────────────────────────────────────────────────────────── */
body.theme-instrument h1, body.theme-instrument h2, body.theme-instrument h3 {
  font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:0; color:var(--tx);
}
body.theme-instrument h1 { font-size:clamp(30px, 4.6vw, 46px); }
body.theme-instrument h2 { font-size:clamp(21px, 2.6vw, 27px); }
body.theme-instrument h3 { font-size:16px; }
body.theme-instrument p { margin:0; }
body.theme-instrument .ins-lead { color:var(--tx2); max-width:62ch; }
body.theme-instrument .ins-muted { color:var(--tx2); }
/* the single choice that does most of the work: identifiers, clauses and numbers are monospace.
   Mono runs are Latin/digits; isolate their direction so RTL text around them never reorders them. */
body.theme-instrument .mono, body.theme-instrument .ins-id, body.theme-instrument .ins-num {
  font-family:var(--mono); font-size:.86em; unicode-bidi:isolate;
}
body.theme-instrument .ins-id, body.theme-instrument .ins-num { direction:ltr; }
body.theme-instrument .ins-num { font-variant-numeric:tabular-nums; }

/* ── layout ─────────────────────────────────────────────────────────────────── */
body.theme-instrument .site-main { max-width:none; padding:0; }
body.theme-instrument .ins-wrap { max-width:1120px; margin-inline:auto; padding-inline:22px; }
body.theme-instrument .ins-section { padding-block:64px; border-block-start:1px solid var(--line); }
body.theme-instrument .ins-section.alt { background:var(--bg2); }
/* every section: heading → one paragraph → one visual → one caption */
body.theme-instrument .ins-head { display:grid; gap:12px; margin-block-end:28px; max-width:70ch; }
body.theme-instrument .ins-kicker { color:var(--acc); font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; }
body.theme-instrument .ins-caption { color:var(--tx2); font-size:13px; margin-block-start:12px;
  padding-inline-start:10px; border-inline-start:2px solid var(--line2); max-width:80ch; }

/* panels: hairlines + layering, radius 6 (10 for large containers), shadow never — except the one
   soft glow reserved for the primary action */
body.theme-instrument .ins-panel { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow-x:auto; }   /* wide tables scroll INSIDE the panel — the page never scrolls sideways */
body.theme-instrument .ins-panel .ins-panel { background:var(--panel2); border-radius:var(--r); }
body.theme-instrument .ins-panel-bar { display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-block-end:1px solid var(--line); color:var(--tx2);
  font-family:var(--mono); font-size:12px; }

/* ── actions: the accent means "act", nothing else ──────────────────────────── */
body.theme-instrument .ins-btn { display:inline-block; background:var(--acc); color:#04121b;
  border:1px solid var(--acc); border-radius:var(--r); padding:11px 20px; font-weight:600;
  font-size:15px; text-decoration:none; box-shadow:0 0 24px rgba(41,197,255,.25); }
body.theme-instrument .ins-btn:hover { background:#4fd2ff; }
body.theme-instrument .ins-btn.ghost { background:transparent; color:var(--tx);
  border:1px solid var(--line2); box-shadow:none; }
body.theme-instrument .ins-btn.ghost:hover { border-color:var(--acc2); color:var(--acc); }
body.theme-instrument .ins-link { color:var(--acc); text-decoration:none; }
body.theme-instrument .ins-link:hover { text-decoration:underline; }
body.theme-instrument a:focus-visible, body.theme-instrument button:focus-visible,
body.theme-instrument [tabindex]:focus-visible {
  outline:2px solid var(--acc); outline-offset:2px; border-radius:2px;
}

/* ── hero ───────────────────────────────────────────────────────────────────── */
body.theme-instrument .ins-hero { padding-block:84px 56px; border-block-start:0; }
body.theme-instrument .ins-hero .ins-claim { max-width:22ch; }
body.theme-instrument .ins-hero .ins-lead { margin-block-start:18px; }
body.theme-instrument .ins-hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin-block-start:28px; }
body.theme-instrument .ins-hero-roles { margin-block-start:18px; font-size:14px; color:var(--tx2); }

/* ── request inspector (centrepiece) ────────────────────────────────────────── */
body.theme-instrument .ins-inspector { display:grid; gap:0; }
body.theme-instrument .ins-request-line { display:flex; flex-wrap:wrap; gap:8px 18px;
  padding:12px 16px; border-block-end:1px solid var(--line); font-family:var(--mono); font-size:12.5px;
  color:var(--tx2); }
body.theme-instrument .ins-stations { list-style:none; margin:0; padding:0; }
body.theme-instrument .ins-station { border-block-end:1px solid var(--line); }
body.theme-instrument .ins-station:last-child { border-block-end:0; }
body.theme-instrument .ins-station-head { display:grid; grid-template-columns:auto auto 1fr auto;
  align-items:center; gap:12px; width:100%; padding:13px 16px; background:none; border:0;
  color:var(--tx2); font:inherit; text-align:start; cursor:pointer; }
body.theme-instrument .ins-station-idx { font-family:var(--mono); font-size:12px; color:var(--tx2); }
body.theme-instrument .ins-station-name { font-weight:600; color:var(--tx); }
body.theme-instrument .ins-station-state { font-family:var(--mono); font-size:12px; color:var(--tx2); }
body.theme-instrument .ins-station-body { display:none; padding:0 16px 16px; }
body.theme-instrument .ins-station[data-open] > .ins-station-body { display:grid; gap:10px; }
body.theme-instrument .ins-station[data-open] .ins-station-head { color:var(--tx); }
body.theme-instrument .ins-station[data-open] .ins-station-idx { color:var(--acc); }
body.theme-instrument .ins-check, body.theme-instrument .ins-whatif {
  border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; font-size:14px;
}
body.theme-instrument .ins-check { color:var(--tx2); }
body.theme-instrument .ins-check .ins-tag { color:var(--ok); }
/* the what-if is what earns the next click — inside a product visual, --stop carries real meaning */
body.theme-instrument .ins-whatif { border-inline-start:2px solid var(--stop); color:var(--tx2); }
body.theme-instrument .ins-whatif .ins-tag { color:var(--stop); }
body.theme-instrument .ins-tag { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; display:block; margin-block-end:4px; }
body.theme-instrument .ins-progress { height:2px; background:var(--line); position:relative; }
body.theme-instrument .ins-progress > span { position:absolute; inset-block:0; inset-inline-start:0;
  width:0; background:var(--acc); transition:width .6s linear; }
/* no JS → every station is open and the control row hides */
body.theme-instrument .no-js .ins-station .ins-station-body { display:grid; gap:10px; }
body.theme-instrument .no-js .ins-inspector-controls { display:none; }
body.theme-instrument .ins-inspector-controls { display:flex; gap:10px; align-items:center;
  padding:10px 16px; border-block-start:1px solid var(--line); }
body.theme-instrument .ins-ctl { background:none; border:1px solid var(--line2); border-radius:var(--r);
  color:var(--tx2); font:inherit; font-size:13px; padding:6px 12px; cursor:pointer; }
body.theme-instrument .ins-ctl:hover { color:var(--tx); border-color:var(--acc2); }

/* ── evidence table ─────────────────────────────────────────────────────────── */
body.theme-instrument .ins-table { width:100%; border-collapse:collapse; font-size:13.5px; }
body.theme-instrument .ins-table th { text-align:start; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx2); font-weight:500;
  padding:9px 14px; border-block-end:1px solid var(--line2); }
body.theme-instrument .ins-table td { padding:9px 14px; border-block-end:1px solid var(--line);
  color:var(--tx2); vertical-align:top; }
body.theme-instrument .ins-table tr:last-child td { border-block-end:0; }

/* semantic states — ONLY inside product visuals, always with a text label, never colour alone */
body.theme-instrument .ins-state { font-family:var(--mono); font-size:12px; white-space:nowrap; }
body.theme-instrument .ins-state::before { content:"● "; }
body.theme-instrument .ins-state.ok { color:var(--ok); }
body.theme-instrument .ins-state.warn { color:var(--warn); }
body.theme-instrument .ins-state.stop { color:var(--stop); }

/* ── enforcement console ────────────────────────────────────────────────────── */
body.theme-instrument .ins-console-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px;
  border-block-end:1px solid var(--line); }
body.theme-instrument .ins-fw { background:none; border:1px solid var(--line2); border-radius:var(--r);
  color:var(--tx2); font-family:var(--mono); font-size:13px; padding:7px 13px; cursor:pointer; }
body.theme-instrument .ins-fw[aria-pressed="true"] { border-color:var(--acc); color:var(--acc); }
body.theme-instrument .ins-fw-panel[hidden] { display:none; }
body.theme-instrument .no-js .ins-fw-panel[hidden] { display:block; }
body.theme-instrument .no-js .ins-console-tabs { display:none; }
body.theme-instrument .ins-fw-title { padding:12px 16px 0; color:var(--tx2); font-family:var(--mono);
  font-size:12px; }

/* ── cost panel ─────────────────────────────────────────────────────────────── */
body.theme-instrument .ins-cost-forecast td { color:var(--tx2); font-style:normal; }
body.theme-instrument .ins-bar { display:inline-block; block-size:8px; background:var(--acc2);
  border-radius:2px; vertical-align:middle; }

/* ── developers: setup sequence as a terminal-like sheet ────────────────────── */
body.theme-instrument .ins-seq { list-style:none; margin:0; padding:14px 16px; display:grid; gap:10px;
  font-family:var(--mono); font-size:13.5px; color:var(--tx2); }
body.theme-instrument .ins-seq li { display:grid; grid-template-columns:auto 1fr; gap:12px; }
body.theme-instrument .ins-seq .ins-seq-n { color:var(--tx2); }
body.theme-instrument .ins-seq code { direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ── role paths / deployment / ladder cards ─────────────────────────────────── */
body.theme-instrument .ins-cards { display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
body.theme-instrument .ins-card { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px; display:grid; gap:8px; align-content:start; }
body.theme-instrument .ins-card h3 { font-size:15px; }
body.theme-instrument .ins-card p { color:var(--tx2); font-size:14px; }
body.theme-instrument .ins-card .ins-link { font-size:14px; }
body.theme-instrument .ins-card:hover { border-color:var(--line2); }
body.theme-instrument .ins-ladder .ins-card { border-inline-start:2px solid var(--acc2); }
body.theme-instrument .ins-ladder-note { margin-block-start:14px; }

/* ── motion: it explains the system working, or it is removed ───────────────── */
@media (prefers-reduced-motion: reduce) {
  body.theme-instrument * { transition:none !important; animation:none !important; }
  /* auto-advance is disabled by JS under this query; statically, every station is open */
  body.theme-instrument .ins-station .ins-station-body { display:grid; gap:10px; }
}

@media (max-width: 720px) {
  body.theme-instrument .ins-section { padding-block:44px; }
  body.theme-instrument .ins-hero { padding-block:56px 36px; }
  body.theme-instrument .ins-station-head { grid-template-columns:auto 1fr auto; }
  body.theme-instrument .ins-station-state { display:none; }
}

/* ── Sprint 702 — system-flow map (restored routing experience, instrument-native) ─────────────────
   Entry surfaces → one governed gateway (gates) → eligible outcome (internal/cloud/stopped) →
   metering+audit. Motion is transform/opacity only and explains the flow; state is glyph+label, never
   colour alone; RTL via logical properties; static + fully-open under no-JS and reduced-motion. */
body.theme-instrument .ins-flow-scn { display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px 0; }
body.theme-instrument .ins-flow-diagram {
  display:grid; grid-template-columns:1fr auto 1.1fr auto 1fr; align-items:stretch; gap:10px;
  padding:16px; }
body.theme-instrument .ins-flow-col { background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; }
body.theme-instrument .ins-flow-eyebrow { color:var(--tx2); font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; margin-block-end:8px; }
body.theme-instrument .ins-flow-col ul, body.theme-instrument .ins-flow-gates {
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
body.theme-instrument .ins-flow-col li { font-size:14px; color:var(--tx); }
body.theme-instrument .ins-flow-gwname { font-weight:600; margin-block-end:10px; }
body.theme-instrument .ins-flow-gates li { display:flex; align-items:center; gap:8px; opacity:.4;
  transition:opacity .35s ease; }
body.theme-instrument .ins-flow-gates li[data-lit] { opacity:1; }
body.theme-instrument .ins-flow-tick { color:var(--ok); font-family:var(--mono); }
body.theme-instrument .ins-flow-outcomes li { display:flex; align-items:center; gap:8px;
  padding:6px 0; opacity:.5; transition:opacity .3s ease; }
body.theme-instrument .ins-flow-outcomes li[data-selected] { opacity:1; }
body.theme-instrument .ins-flow-glyph { width:9px; height:9px; border:1px solid var(--line2);
  border-radius:50%; display:inline-block; flex:0 0 auto; }
body.theme-instrument .ins-flow-outcomes li[data-selected] .ins-flow-glyph {
  background:var(--ok); border-color:var(--ok); }
body.theme-instrument .ins-flow-outcomes li[data-flow-out="stopped"] .ins-flow-glyph {
  border-radius:2px; color:var(--stop); border:none; font-family:var(--mono); }
body.theme-instrument .ins-flow-dashed { position:relative; }
body.theme-instrument .ins-flow-state:empty { display:none; }
body.theme-instrument .ins-flow-arrow { position:relative; align-self:center; inline-size:34px;
  block-size:2px; background:linear-gradient(to var(--flow-end,right), var(--line2), var(--acc)); }
body.theme-instrument .ins-flow-arrow::after { content:""; position:absolute; inset-inline-end:-1px;
  inset-block-start:-3px; border:4px solid transparent; border-inline-start-color:var(--acc); }
body.theme-instrument .ins-flow-packet { position:absolute; inset-block-start:-3px; inset-inline-start:0;
  inline-size:8px; block-size:8px; border-radius:50%; background:var(--acc); opacity:0; }
body.theme-instrument .ins-flow[data-enhanced] .ins-flow-packet[data-run] {
  animation:ins-flow-travel 1.4s ease-in-out; }
@keyframes ins-flow-travel {
  0% { transform:translateX(0); opacity:0; } 12% { opacity:1; }
  88% { opacity:1; } 100% { transform:translateX(30px); opacity:0; } }
body.theme-instrument .ins-flow-rail { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:0 16px 14px; }
body.theme-instrument .ins-flow-railitem { border:1px solid var(--line); border-radius:var(--r);
  padding:4px 10px; font-size:13px; color:var(--tx2); }
body.theme-instrument .ins-flow-detail { padding:0 16px 14px; }
body.theme-instrument .ins-flow-detail[hidden] { display:none; }
body.theme-instrument .no-js .ins-flow-detail[hidden] { display:block; }
body.theme-instrument .ins-flow-dl { display:grid; grid-template-columns:1fr 1fr; gap:6px 24px;
  margin:0 0 10px; }
body.theme-instrument .ins-flow-dl div { display:flex; gap:8px; font-size:13px; }
body.theme-instrument .ins-flow-dl dt { color:var(--tx2); margin:0; min-inline-size:104px; }
body.theme-instrument .ins-flow-dl dd { color:var(--tx); margin:0; }
body.theme-instrument .ins-flow-why summary { cursor:pointer; color:var(--acc); font-size:13px; }
body.theme-instrument .ins-flow-why ul { margin:8px 0 0; padding-inline-start:18px; color:var(--tx2);
  font-size:13px; }
body.theme-instrument .ins-flow-why p { color:var(--tx2); font-size:13px; margin-block-start:8px; }
/* ── Sprint 705 §5 — Platform request-flow animation (reuses the .ins-flow grammar above). Adds the four
   destination CLASSES with per-scenario eligibility state, plus the lead + reason lines. Meaning never rests
   on colour alone: each destination carries a text state chip (Selected / Eligible / Ineligible) and an
   ✕ glyph when ineligible. ────────────────────────────────────────────────────────────────────────────── */
body.theme-instrument .ins-flow-lead { color:var(--tx2); font-size:14px; margin:0 16px 14px; padding-top:14px; }
body.theme-instrument .pflow-dests li { opacity:1; padding:4px 8px; border-radius:8px; }
body.theme-instrument .pflow-dests li[data-elig="ineligible"] { opacity:.6; }
body.theme-instrument .pflow-dests li[data-selected] { background:var(--panel);
  box-shadow:inset 2px 0 0 var(--acc); opacity:1; }
body.theme-instrument .pflow-dests li[data-selected] .ins-flow-state { color:var(--acc); }
body.theme-instrument .pflow-dests li[data-elig="eligible"]:not([data-selected]) .ins-flow-state { color:var(--ok); }
body.theme-instrument .pflow-dests li[data-elig="ineligible"] .ins-flow-state { color:var(--stop); }
body.theme-instrument .ins-flow-why-line { color:var(--tx2); font-size:13px; margin:8px 16px 0; }
@media (prefers-reduced-motion: reduce) {
  body.theme-instrument .ins-flow-gates li { opacity:1; }
  body.theme-instrument .ins-flow-packet { display:none; }
}
@media (max-width: 720px) {
  body.theme-instrument .ins-flow-diagram { grid-template-columns:1fr; }
  body.theme-instrument .ins-flow-arrow { display:none; }
  body.theme-instrument .ins-flow-dl { grid-template-columns:1fr; }
}

/* ══ Sprint 703 Part B — buyer-first home + reusable Visual Media System ═════════════════════════════
   Every rule stays scoped under body.theme-instrument (the home is the only instrument surface). Radii
   scale 8/12/16/20; hairlines + surface + spacing carry the design, shadows are reserved for the accent.
   The visual FRAME controls section rhythm — CSS aspect-ratio + object-fit:contain, never asset size. */

/* ── hero: 12-col editorial (copy 6 / visual 6), value line, illustrative canvas ─────────────────── */
body.theme-instrument .ins-hero-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:32px;
  align-items:center; }
body.theme-instrument .ins-hero-copy { grid-column:span 6; }
body.theme-instrument .ins-hero-visual { grid-column:span 6; min-width:0; }
body.theme-instrument .ins-hero-value { margin-block-start:18px; color:var(--tx); font-weight:600;
  font-size:15px; letter-spacing:.005em; }
/* illustrative hero canvas: fragmented entry points → one governed control layer (CSS only, not telemetry) */
body.theme-instrument .hero-canvas .media-body { display:grid; grid-template-columns:1fr auto 1fr;
  gap:14px; align-items:center; }
body.theme-instrument .hero-cluster { display:grid; gap:8px; }
body.theme-instrument .hero-node { border:1px solid var(--line); border-radius:8px; background:var(--panel2);
  padding:8px 10px; font-size:12.5px; color:var(--tx2); }
body.theme-instrument .hero-core { border:1px solid var(--acc2); border-radius:12px; background:var(--panel);
  padding:12px 14px; text-align:center; box-shadow:0 0 24px rgba(41,197,255,.14); }
body.theme-instrument .hero-core strong { color:var(--tx); display:block; font-size:13.5px; }
body.theme-instrument .hero-core span { color:var(--tx2); font-size:12px; }
body.theme-instrument .hero-conv { color:var(--acc); font-family:var(--mono); font-size:18px;
  text-align:center; }

/* ── editorial 12-col split (text 5 / gap 1 / visual 6); alternate reverses, same geometry ────────── */
body.theme-instrument .ins-split { display:grid; grid-template-columns:repeat(12, 1fr); gap:28px;
  align-items:center; }
body.theme-instrument .ins-split > .ins-head { grid-column:1 / span 5; margin-block-end:0; max-width:none; }
body.theme-instrument .ins-split > .ins-visual { grid-column:7 / span 6; min-width:0; }
body.theme-instrument .ins-section.alt .ins-split > .ins-head { grid-column:8 / span 5; }
body.theme-instrument .ins-section.alt .ins-split > .ins-visual { grid-column:1 / span 6; order:-1; }

/* ── the four media families: one frame per family, fixed aspect ratio, object-fit:contain ───────── */
body.theme-instrument .media-frame { border:1px solid var(--line); border-radius:16px;
  background:var(--panel); max-width:100%; overflow:hidden; margin:0; }
body.theme-instrument .media-label { padding:10px 14px 0; color:var(--tx2); font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }
body.theme-instrument .media-caption { color:var(--tx2); font-size:12.5px; padding:10px 14px;
  border-block-start:1px solid var(--line); }
/* System Canvas 16:9 + Data Viz 16:9 — HTML diagrams: aspect-ratio is a MINIMUM so tall content is safe */
body.theme-instrument .media-canvas, body.theme-instrument .media-dataviz {
  display:flex; flex-direction:column; }
body.theme-instrument .media-canvas .media-body, body.theme-instrument .media-dataviz .media-body {
  padding:14px; min-block-size:0; }
body.theme-instrument .media-canvas .media-body { aspect-ratio:16 / 9; }
body.theme-instrument .media-dataviz .media-body { aspect-ratio:16 / 9; }
/* Product Window 16:10 — the video AND screenshots share this identical frame; letterboxed, never cropped */
body.theme-instrument .media-window .media-screen { aspect-ratio:16 / 10; background:var(--bg);
  display:flex; align-items:center; justify-content:center; }
body.theme-instrument .media-video, body.theme-instrument .media-shot {
  inline-size:100%; block-size:100%; object-fit:contain; display:block; background:#000; }
/* Feature Tile 4:3 — equal-height preview; content-safe minimum so a long line never clips */
body.theme-instrument .media-tile { border-radius:12px; padding:16px; display:flex; flex-direction:column;
  gap:8px; min-block-size:0; }
body.theme-instrument .media-tile { aspect-ratio:4 / 3; }
body.theme-instrument .media-tile h3 { font-size:15px; color:var(--tx); }
body.theme-instrument .media-tile p { color:var(--tx2); font-size:13.5px; margin:0; }
body.theme-instrument .is-illustrative .media-label::after { content:" · illustrative"; color:var(--tx3); }

/* ── card grids: pains (4), access surfaces (6), outcomes (6) — equal-height tiles ───────────────── */
body.theme-instrument .ins-tilegrid { display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
/* a fixed aspect ratio would fight long copy in dense grids — tiles equalize by grid row instead, and
   drop the strict ratio so the one-line value is never clipped */
body.theme-instrument .ins-tilegrid .media-tile { aspect-ratio:auto; min-block-size:132px;
  justify-content:flex-start; }

/* ── included platform: two governed-capability lists + the strong "included" line ───────────────── */
body.theme-instrument .ins-included { display:grid; gap:16px; grid-template-columns:repeat(2, 1fr); }
body.theme-instrument .ins-incl-group { border:1px solid var(--line); border-radius:16px;
  background:var(--panel); padding:18px 20px; }
body.theme-instrument .ins-incl-group h3 { font-size:14px; color:var(--tx2); font-family:var(--mono);
  letter-spacing:.04em; text-transform:uppercase; margin-block-end:12px; }
body.theme-instrument .ins-incl-group ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
body.theme-instrument .ins-incl-group li { display:flex; align-items:baseline; gap:9px; font-size:14px;
  color:var(--tx); }
body.theme-instrument .ins-incl-group li::before { content:""; inline-size:6px; block-size:6px;
  border-radius:2px; background:var(--acc2); flex:0 0 auto; transform:translateY(-1px); }
body.theme-instrument .ins-incl-strong { margin-block-start:18px; font-weight:600; color:var(--tx);
  font-size:16px; border-inline-start:2px solid var(--acc); padding-inline-start:12px; }

/* ── sovereignty: control-under-your-control points + integrator line ────────────────────────────── */
body.theme-instrument .ins-points { list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
body.theme-instrument .ins-points li { display:flex; align-items:baseline; gap:9px; color:var(--tx2);
  font-size:14px; }
body.theme-instrument .ins-points li::before { content:"✓"; color:var(--ok); font-family:var(--mono);
  font-size:12px; flex:0 0 auto; }
body.theme-instrument .ins-integrator { margin-block-start:20px; color:var(--tx2); font-size:14px;
  border-block-start:1px solid var(--line); padding-block-start:16px; }

/* ── closing CTA band ────────────────────────────────────────────────────────────────────────────── */
body.theme-instrument .ins-closing { text-align:center; display:grid; gap:16px; justify-items:center; }
body.theme-instrument .ins-closing .ins-hero-actions { justify-content:center; }
body.theme-instrument .ins-closing-link { font-size:13.5px; }

@media (max-width: 860px) {
  body.theme-instrument .ins-hero-grid { grid-template-columns:1fr; gap:24px; }
  body.theme-instrument .ins-hero-copy, body.theme-instrument .ins-hero-visual { grid-column:auto; }
  body.theme-instrument .ins-split { grid-template-columns:1fr; gap:20px; }
  body.theme-instrument .ins-split > .ins-head,
  body.theme-instrument .ins-split > .ins-visual,
  body.theme-instrument .ins-section.alt .ins-split > .ins-head,
  body.theme-instrument .ins-section.alt .ins-split > .ins-visual { grid-column:auto; order:0; }
  body.theme-instrument .ins-included { grid-template-columns:1fr; }
  body.theme-instrument .hero-canvas .media-body { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
  body.theme-instrument .media-tile { aspect-ratio:auto; }
}

/* ── Sprint 705 §10C — Managed Browser server-side decision (Security System Canvas). Static; meaning never
   rests on colour alone (each decision carries its text label; the glyph is decorative). ─────────────────── */
body.theme-instrument .bdec-lead { color:var(--tx2); font-size:14px; margin:0 0 14px; }
body.theme-instrument .bdec-flow { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0;
  margin:0 0 10px; }
body.theme-instrument .bdec-step { flex:1 1 160px; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; font-size:14px; color:var(--tx); }
body.theme-instrument .bdec-arrow { text-align:center; color:var(--tx2); margin:2px 0 10px; font-size:18px; }
body.theme-instrument .bdec-decisions { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; list-style:none; padding:0; margin:0 0 16px; }
body.theme-instrument .bdec-dec { display:flex; align-items:center; gap:8px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; font-size:14px; color:var(--tx); }
body.theme-instrument .bdec-glyph { inline-size:10px; block-size:10px; border-radius:2px; background:var(--tx2);
  flex:none; }
body.theme-instrument .bdec-dec-allow .bdec-glyph { background:var(--ok); }
body.theme-instrument .bdec-dec-mask .bdec-glyph { background:var(--warn); }
body.theme-instrument .bdec-dec-continue .bdec-glyph { background:var(--acc); }
body.theme-instrument .bdec-dec-block .bdec-glyph { background:var(--stop); }
body.theme-instrument .bdec-boundaries { margin:0; padding-inline-start:18px; color:var(--tx2); font-size:13px; }
body.theme-instrument .bdec-boundaries li { margin:4px 0; }

/* ── Sprint 705 §7 — Visual Media System unification for deep-page manifest assets. Screenshots resolved by
   asset_figure adopt the Product Window frame family; architecture diagrams adopt the System Canvas frame —
   centrally, so no page carries its own media CSS. object-fit:contain-equivalent: images keep their natural
   ratio inside the frame (never cropped). ────────────────────────────────────────────────────────────────── */
body.theme-instrument .asset-fig { margin:0; }
body.theme-instrument .asset-fig img { display:block; max-inline-size:100%; block-size:auto; }
body.theme-instrument .asset-fig.frame-screenshot { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:10px; }
body.theme-instrument .asset-fig.frame-screenshot img { border-radius:calc(var(--r) - 3px); }
body.theme-instrument .asset-fig.frame-diagram { background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; }
body.theme-instrument .asset-fig figcaption { color:var(--tx2); font-size:12px; margin-block-start:8px; }
body.theme-instrument .asset-fig figcaption .qual { display:block; color:var(--tx3); font-size:11px; }