/* ============================================================
   DCGI v12 · Inner pages
   Implements the authored page vocabulary natively on the v12
   token system, so styles.css (v11, 89KB, four palettes) and
   shell.css can be dropped entirely rather than overridden.

   Components read ground tokens (--fg / --rule / --surface),
   so a section only has to declare its ground.
   ============================================================ */

/* ============ Shared shell (matches Home exactly) ============ */
.site-header {
  position: relative; z-index: 20;
  background: var(--white); color: var(--black);
  border-bottom: 1px solid var(--grey-15);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 96px;
}
.brand {
  display: flex; align-items: center; gap: 13px;
  font: 500 1.02rem var(--font-display); letter-spacing: -.01em;
  text-decoration: none; color: inherit;
}
.brand-mark { width: 30px; height: 30px; border-radius: 3px; object-fit: cover; flex: none; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font: 400 .88rem var(--font-body); text-decoration: none;
  color: var(--grey-70); transition: color .2s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--black); }
.header-cta {
  font: 500 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: #fff; background: var(--signal);
  border-radius: var(--radius); padding: 13px 20px;
  transition: background .2s var(--ease);
}
.header-cta:hover { background: var(--black); }
@media (max-width: 1080px) {
  .header-inner { flex-wrap: wrap; gap: 14px 24px; padding-block: 20px; min-height: 0; }
  .site-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 8px 22px; }
  .site-nav a { font-size: .82rem; }
}

.site-footer { background: var(--black-deep); color: var(--fg-2); padding: 68px 0 36px; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--rule);
}
.footer-grid h4 {
  font: 500 .64rem var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 15px;
}
.footer-grid a { display: block; color: var(--fg-2); text-decoration: none; font-size: var(--step-small); padding: 4px 0; }
.footer-grid a:hover { color: var(--fg); }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: var(--step-small); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; font: 500 .66rem var(--font-mono); letter-spacing: .1em; color: var(--fg-3);
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }

/* ============ Page rhythm ============ */
.section { position: relative; padding-block: clamp(52px, 6vw, 88px); background: var(--ground); color: var(--fg); }
/* Alternating ground gives the page rhythm without changing voice. */
.section.feature-section { --ground: var(--grey-05); --surface: var(--white); }
.section.section--dark,
.section.final-cta {
  --ground: var(--black-deep); --surface: #101010;
  --fg: var(--white); --fg-2: #A8A8A8; --fg-3: #6E6E6E;
  --rule: var(--grey-88); --rule-strong: #343434;
}

.section-head { max-width: 940px; margin-bottom: clamp(24px, 3vw, 36px); }
.section-head > div:last-child { display: grid; gap: 16px; }
.section-head h2 { font-size: var(--step-1); font-weight: 600; letter-spacing: -.012em; line-height: 1.12; max-width: 24ch; }
.section-head p { font-size: var(--step-lead); color: var(--fg-2); max-width: 62ch; }

h1 { font-size: var(--step-hero); font-weight: 700; letter-spacing: -.014em; line-height: 1.02; max-width: 20ch; }
h2 { font-size: var(--step-1); letter-spacing: -.012em; line-height: 1.12; }
h3 { font-size: var(--step-2); letter-spacing: -.01em; line-height: 1.22; }
h4 { font-size: 1.02rem; }

/* ============ Heroes ============ */
.v1-hero, .page-hero, .article-hero, .collaboration-hero, .cartel-hero {
  position: relative; background: var(--ground); color: var(--fg);
  padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--rule);
}
.v1-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 70px); align-items: center;
}
@media (max-width: 1000px) { .v1-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.page-hero--editorial .container, .page-hero-copy { max-width: 900px; }
.page-hero-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 70px); align-items: center;
}
@media (max-width: 1000px) { .page-hero-layout { grid-template-columns: minmax(0, 1fr); } }
.v1-hero .lead, .page-hero .lead { margin-top: 22px; }

.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 22px;
}
.breadcrumbs a { color: var(--fg-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--fg); }

.article-kicker, .product-kicker, .article-meta {
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

/* ============ Buttons — v11 markup (.btn.primary) on v12 styling ============ */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.actions--center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 28px; overflow-wrap: anywhere;
  border-radius: var(--radius);
  font: 500 var(--step-small) var(--font-body);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn.primary, .btn--primary { background: var(--signal); color: #fff; }
.btn.primary:hover, .btn--primary:hover { background: var(--fg); color: var(--ground); }
.btn.secondary, .btn--ghost {
  color: var(--fg); background: transparent;
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.btn.secondary:hover, .btn--ghost:hover { background: var(--fg); color: var(--ground); border-color: var(--fg); }

/* ============ Cards — one language ============ */
.dcg-card, .v1-card, .problem-card, .app-card, .case-card, .spectrum-card,
.loop-card, .engagement-card, .publication, .concept-entry, .field-study-card,
.work-card, .arch-item, .assessment:not(.epistemic-badge), .panel:not(main > *) {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px 26px;
  transition: border-color .2s var(--ease);
}
a.dcg-card:hover, a.v1-card:hover, a.publication:hover,
a.case-card:hover, a.work-card:hover, a.field-study-card:hover { border-color: var(--rule-strong); }
.dcg-card h3, .v1-card h3, .problem-card h3, .work-card h3, .arch-item h3 {
  font-size: var(--step-3); font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px;
}
.dcg-card p, .v1-card p, .problem-card p, .arch-item p, .assessment p { color: var(--fg-2); font-size: var(--step-small); }
.dcg-card .eyebrow, .v1-card .eyebrow { margin-bottom: 14px; }

/* Dark panels adopt the dark ground rather than a v11 navy */
.dcg-instrument--dark, .instrument-panel, .pilot-panel, .detail-panel,
.decision-brief, .work-card.dark, .work-card.navy, .power-orbit,
.triangulation-panel, .power-projection-panel, .research-interface, .portal-preview {
  --ground: var(--black-deep); --surface: #101010;
  --fg: var(--white); --fg-2: #A8A8A8; --fg-3: #6E6E6E;
  --rule: var(--grey-88); --rule-strong: #343434;
  background: var(--ground); color: var(--fg);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
}
.pilot-panel {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { .pilot-panel { grid-template-columns: minmax(0,1fr); } }

/* ============ Grids ============ */
.v1-ladder, .v1-ladder--compact, .problem-grid, .outcome-grid, .artifact-groups,
.v1-topic-list, .question-grid, .cluster-grid, .engagement-grid, .work-grid,
.field-study-grid, .article-grid, .publication-grid, .evidence-grid,
.v1-capability-grid, .arch-grid, .loop-grid, .shift-grid,
.system-boundary-grid, .triangulation-grid, .sgm-domain-grid, .affiliation-groups,
.application-priorities, .pilot-deliverables, .infrastructure-pair,
.v1-application-pair, .edge-research, .portal-grid,
.product-visual-grid, .output-matrix, .v1-output-grid, .future-branches,
.control-stack, .integration-flow, .failure-rail, .source-audit, .evidence-ledger,
.profile-facts, .pillar-list, .field-grid, .atlas-tabs {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  margin-top: clamp(28px, 3.5vw, 44px);
}
.infrastructure-pair, .v1-application-pair, .edge-research,
.product-visual-grid--two, .triangulation-grid, .portal-grid, .research-interface {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.v1-ladder article, .problem-grid article, .outcome-grid article,
.artifact-groups article, .v1-topic-list article, .question-grid article,
.cluster-grid article, .pilot-deliverables article, .application-priorities article,
.evidence-ledger article, .arch-grid article, .shift-grid article,
.loop-grid article, .system-boundary-grid article, .future-branches article,
.control-stack article, .failure-rail article, .source-audit article,
.field-grid article, .sgm-domain-grid article {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px 24px;
}
.v1-ladder article > span:first-child,
.artifact-groups article > span:first-child,
.pilot-deliverables article > span:first-child,
.num, .case-id {
  display: block; font: 400 .74rem var(--font-mono);
  letter-spacing: .08em; color: var(--fg-3); margin-bottom: 12px;
}
.v1-ladder h3, .artifact-groups h3, .outcome-grid h3, .problem-grid h3 {
  font-size: var(--step-3); font-weight: 600; margin-bottom: 9px;
}
.v1-ladder p, .artifact-groups p, .outcome-grid p, .v1-topic-list p,
.question-grid p, .cluster-grid p { color: var(--fg-2); font-size: var(--step-small); }
.field-title, .signal-label, .work-type, .label,
.pub-meta, .pub-status, .epistemic-badge, .product-state {
  display: inline-block;
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.epistemic-badge, .pub-status, .product-state {
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 5px 10px; color: var(--fg-2);
}
.v1-topic-list strong {
  color: var(--fg); font-size: var(--step-3); letter-spacing: -.01em;
  font-family: var(--font-display); font-weight: 600; display: block; margin-bottom: 8px;
}

.publication { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.publication h3 { margin-block: 10px 8px; }

/* ============ Editorial devices ============ */
/* .insight-article wraps an entire page on the applied-work cases, so it
   must not take a reading measure — that squeezed every section, grid and
   instrument on the page into a 76ch column. */
.prose, .article { max-width: 76ch; }
.insight-article { max-width: none; display: block; }
.prose p, .article p { margin-bottom: 1.1em; color: var(--fg-2); }
.prose h2, .article h2 { margin-block: 1.6em .5em; }
.prose h3, .article h3 { margin-block: 1.4em .4em; }
.prose ul, .prose ol, .article ul, .article ol { color: var(--fg-2); padding-left: 20px; margin-bottom: 1.1em; }
.prose li, .article li { margin-bottom: .5em; }

.v1-thesis, .v1-callout, .uniqueness-callout, blockquote {
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rule); border-left: 3px solid var(--signal);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem); letter-spacing: -.012em;
  line-height: 1.28; color: var(--fg); max-width: 46ch;
}
.v1-callout { border-left-color: var(--flare); }

.framework-chain, .flow, .cascade-line, .ecosystem-flow, .sgm-visual-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: clamp(26px, 3vw, 38px);
}
.framework-chain span, .flow span, .cascade-line span, .ecosystem-flow span {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px 14px; background: var(--surface);
  font: 500 .74rem var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-2);
}
.framework-chain i, .flow i, .cascade-line i { font-style: normal; color: var(--fg-3); }

.v1-figure, .product-visual, .product-shot, .darovel-primary-shot,
.map-wrap, .profile-photo, .institute-logo, .sgm-hero-visual, .context-visual {
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0;
}
.v1-figure img, .product-visual img, .product-shot img,
.darovel-primary-shot img, .profile-photo img {
  width: 100%; height: auto; display: block;
}
.v1-figure figcaption {
  padding: 12px 16px; border-top: 1px solid var(--rule);
  font: 500 .66rem var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.v1-photo-credit, .source-note {
  padding: 12px 0 0; font-size: var(--step-small); color: var(--fg-3);
}
.v1-photo-credit a, .source-note a { color: var(--fg-2); }

.profile-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 4vw, 60px); align-items: start; }
@media (max-width: 900px) { .profile-layout { grid-template-columns: minmax(0,1fr); } }

/* ============ Instrument hosts ============ */
.instrument-art, .dcg-instrument, .cartel-instrument, .sgm-small,
.context-visual, .power-orbit, .orbit {
  position: relative; border-radius: var(--radius);
}
.instrument-art svg, .dcg-instrument svg, .cartel-instrument svg { width: 100%; height: auto; display: block; }
.dcg-instrument--dark, .instrument-art--dark { padding: clamp(18px, 2.4vw, 30px); }
.instrument-art--light, .dcg-instrument--light { background: var(--surface); border: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 30px); }

/* ============ Final CTA ============ */
.final-cta .pilot-panel { border: 0; padding: 0; }
.final-cta h2 { font-size: var(--step-1); }

/* ============ Utility ============ */
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--black); color: #fff;
  font: 500 var(--step-small) var(--font-mono);
  padding: 10px 16px; border-radius: var(--radius);
  transform: translateY(-300%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
th { font: 500 .64rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
td { color: var(--fg-2); }

/* ============================================================
   Authored inline diagrams
   Several pages ship hand-drawn SVG whose geometry carries the
   argument (the SGM conversion field, the cartel loops, the
   power orbit). Their elements are largely unclassed, so without
   explicit rules the SVG default of fill:black turns every path
   into a blob. These give them the v12 vocabulary: greyscale
   structure, SGM primaries for modality, flare for consequence.
   ============================================================ */
.sgm-hero-visual, .sgm-live-field, .cartel-instrument, .power-projection,
.power-orbit, .orbit, .context-visual, .sgm-spectrum, .spectral-core,
.triangulation-core, .research-interface {
  --dgm-line: color-mix(in srgb, var(--fg) 16%, transparent);
  --dgm-edge: color-mix(in srgb, var(--fg) 42%, transparent);
  --dgm-node: var(--fg);
  --dgm-text: var(--fg-3);
}

/* Sane defaults: strokes are strokes, not fills. */
.sgm-hero-visual svg, .sgm-live-field svg, .cartel-instrument svg,
.power-projection svg, .power-orbit svg, .orbit svg, .context-visual svg,
.sgm-spectrum svg, .triangulation-core svg, .research-interface svg {
  width: 100%; height: auto; display: block; overflow: visible;
}
/* Only unclassed elements take the defaults. A container+element selector
   outranks a single class, so styling every path here would override the
   generated instruments' own .ins-* colours. */
.sgm-hero-visual path:not([class]), .sgm-live-field path:not([class]),
.cartel-instrument path:not([class]), .power-projection path:not([class]),
.power-orbit path:not([class]), .orbit path:not([class]),
.context-visual path:not([class]), .sgm-spectrum path:not([class]),
.triangulation-core path:not([class]) {
  fill: none; stroke: var(--dgm-edge); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.sgm-hero-visual circle:not([class]), .sgm-live-field circle:not([class]),
.cartel-instrument circle:not([class]), .power-projection circle:not([class]),
.power-orbit circle:not([class]), .orbit circle:not([class]),
.context-visual circle:not([class]), .sgm-spectrum circle:not([class]),
.triangulation-core circle:not([class]) {
  fill: var(--dgm-node);
}
.sgm-hero-visual rect:not([class]), .sgm-live-field rect:not([class]),
.cartel-instrument rect:not([class]), .power-projection rect:not([class]),
.context-visual rect:not([class]) {
  fill: none; stroke: var(--dgm-edge); stroke-width: 1.2;
}
.sgm-hero-visual text:not([class]), .sgm-live-field text:not([class]),
.cartel-instrument text:not([class]), .power-projection text:not([class]),
.power-orbit text:not([class]), .orbit text:not([class]),
.context-visual text:not([class]), .sgm-spectrum text:not([class]),
.triangulation-core text:not([class]) {
  fill: var(--dgm-text); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em;
}

/* Diagram chrome: the header strip and the readout under a live field.
   Both ship as bare spans, so they collide without explicit layout. */
.context-head, .context-readout {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 26px; margin-bottom: 18px;
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.context-readout { margin: 18px 0 0; }
.context-head b, .context-readout b { color: var(--fg); font-weight: 500; }
.context-head span:first-child { margin-right: auto; }

/* Reference grids sit behind everything and must stay quiet. */
.sgm-visual-grid path, .field-grid path, .sgm-visual-grid line, .field-grid line {
  stroke: var(--dgm-line); stroke-width: 1;
}
/* Structural edges: the couplings themselves. */
.sgm-visual-edges path, .signal-edge path { stroke: var(--dgm-edge); stroke-width: 1.4; }

/* Modality of power — the SGM primaries, and only here.
   fill:none is required: these carry a class, so the unclassed default
   above skips them and an SVG path with no fill declaration paints black. */
path.flow-red, path.spectral-red, path.spectrum-red,
path.flow-yellow, path.spectral-yellow, path.spectrum-yellow,
path.flow-blue, path.spectral-blue, path.spectrum-blue,
polyline[class], polygon.spectrum-light { fill: none; }
.flow-red, .spectral-red, .spectrum-red { stroke: var(--sgm-red); stroke-width: 2.2; }
.flow-yellow, .spectral-yellow, .spectrum-yellow { stroke: var(--sgm-yellow); stroke-width: 2.2; }
.flow-blue, .spectral-blue, .spectrum-blue { stroke: var(--sgm-blue); stroke-width: 2.2; }
circle.spectral-red, circle.spectrum-red { fill: var(--sgm-red); stroke: none; }
circle.spectral-yellow, circle.spectrum-yellow { fill: var(--sgm-yellow); stroke: none; }
circle.spectral-blue, circle.spectrum-blue { fill: var(--sgm-blue); stroke: none; }
.spectrum-light, .sgm-luminosity {
  fill: none; stroke: var(--dgm-node); stroke-width: 1.2;
  stroke-opacity: .5; stroke-dasharray: 3 5;
}

/* Nodes that carry a name, and the domains a conversion projects into. */
.spectral-node, .sgm-spectrum-node, .spectral-core { fill: var(--dgm-node); }
.sgm-source, .sgm-conversion { fill: var(--signal); }
.sgm-domain, .sgm-defense, .sgm-geopolitics, .sgm-security, .sgm-option {
  fill: none; stroke: var(--dgm-edge); stroke-width: 1.2;
}
.signal-flow path { stroke: var(--signal); stroke-width: 2; }

/* Labels authored inside the drawings. */
.field-title { fill: var(--fg-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sgm-small { fill: var(--dgm-text); font-size: 10px; letter-spacing: .08em; }

/* Cartel field study: reinforcing and balancing loops, and the pulse
   marking where pressure is applied. */
.cartel-instrument .flow { stroke: var(--sgm-red); stroke-width: 2; fill: none; }
.cartel-instrument .pulse { fill: var(--flare); }
.cartel-loop { fill: none; stroke: var(--dgm-edge); stroke-width: 1.5; stroke-dasharray: 26 8; }

/* A few pages label diagram parts with spans rather than SVG text. */
.signal-label, .case-link, .work-link {
  display: inline-block; font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.work-link, .case-link { color: var(--fg-2); text-decoration: none; }
.work-link:hover, .case-link:hover { color: var(--signal); }

/* Inline emphasis inside diagram captions was carrying v11 colour. */
.field-title b, .product-state b, .context-readout b { color: var(--fg); font-weight: 500; }

/* ============================================================
   Components rendered by site.js
   The governed value cycle and the per-page context visual are
   built in JS, so their markup never appeared in the page source
   the rest of this sheet was written against.
   ============================================================ */

/* The eleven-stage cycle: a list of stages beside a sticky brief. */
.cycle-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
  margin-top: clamp(28px, 3.5vw, 44px);
}
@media (max-width: 940px) { .cycle-layout { grid-template-columns: minmax(0, 1fr); } }

.cycle-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cycle-step {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  background: var(--surface); border: 0; color: var(--fg);
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 14px; align-items: baseline; padding: 15px 18px;
  font-family: var(--font-body); font-size: var(--step-small);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cycle-step:hover { background: var(--grey-05); }
.cycle-step .step-no {
  font: 400 .74rem var(--font-mono); letter-spacing: .08em; color: var(--fg-3);
}
.cycle-step strong { font-weight: 500; letter-spacing: -.005em; }
.cycle-step > span:last-child { color: var(--fg-3); justify-self: end; }
.cycle-step.active { background: var(--fg); color: var(--ground); }
.cycle-step.active .step-no,
.cycle-step.active > span:last-child { color: var(--ground); opacity: .7; }

/* The brief for the selected stage sits on the dark ground. */
.detail-panel { position: sticky; top: 24px; }
.detail-panel .tag {
  display: inline-block; margin-bottom: 14px;
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.detail-panel h3 { font-size: var(--step-2); font-weight: 600; margin-bottom: 10px; color: var(--fg); }
.detail-panel > p { color: var(--fg-2); font-size: var(--step-small); }
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 26px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.detail-grid h4 {
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 6px;
}
.detail-grid p { color: var(--fg-2); font-size: var(--step-small); }

/* Per-page context visual: a structural field, not a chart. */
.cv-grid path, .cv-grid line { fill: none; stroke: var(--dgm-line, color-mix(in srgb, var(--fg) 16%, transparent)); stroke-width: 1; }
.cv-edges path, .cv-edges line { fill: none; stroke: var(--dgm-edge, color-mix(in srgb, var(--fg) 42%, transparent)); stroke-width: 1.4; }
.cv-flow path { fill: none; stroke: var(--signal); stroke-width: 2; }
.cv-nodes circle { fill: var(--fg); }
.cv-core { fill: var(--signal); }
.cv-labels text { fill: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }

/* Readouts the visual prints along its base. */
.context-readout span { white-space: nowrap; }

/* ============================================================
   Editorial flow fixes
   Several pages place a prose block directly inside a section
   instead of wrapping it in .container. In v11 the prose class
   carried its own centring; here .container owns that, so those
   blocks were rendering flush against the viewport edge.
   ============================================================ */
.section > .article,
.section > .prose,
.section > .affiliation-group,
.section > .article-facts {
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
  max-width: calc(72ch + 2 * var(--gutter));
  box-sizing: border-box;
}
.section > .article.prose { max-width: calc(72ch + 2 * var(--gutter)); }

/* Reading rhythm inside an editorial block. */
.article h2, .prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-block: 0 .55em;
}
.article > p + h2, .prose > p + h2 { margin-top: 1.5em; }
.article h3, .prose h3 { margin-block: 1.4em .35em; }

/* Facts strip under an article kicker: three separate claims,
   not one run-on sentence. */
.article-facts {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(24px, 3vw, 34px);
}
.article-facts span {
  display: block; background: var(--ground);
  padding: 16px 18px;
  font-size: var(--step-small); color: var(--fg-2);
}
.article-facts strong {
  display: block; color: var(--fg); font-weight: 600;
  font-family: var(--font-display); font-size: 1.12rem;
  letter-spacing: -.01em; margin-bottom: 4px;
}

/* Affiliation lists on the profile page. */
.affiliation-group > span {
  display: block; margin-bottom: 12px;
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.affiliation-group ul { margin: 0 0 26px; padding-left: 18px; color: var(--fg-2); font-size: var(--step-small); }
.affiliation-group li { margin-bottom: .85em; color: var(--fg); }
/* The acronym and its expansion are two lines, not one word.
   Both were inheriting the inline default, so the list read
   "RUSIRoyal United Services Institute". */
.affiliation-group li small {
  display: block; margin-top: 1px;
  font-size: var(--step-micro); line-height: 1.45; color: var(--fg-3);
}

/* ============================================================
   Founder profile
   This page keeps its own v11 vocabulary. Every block below
   pairs a label with a description; with the global p/strong
   defaults they collapsed into run-on text.
   ============================================================ */
.profile-copy > p { margin-bottom: 1em; }
.profile-copy > p:last-of-type { margin-bottom: 0; }
.profile-copy .lead { margin-bottom: 1.15em; }

.profile-facts { margin: 28px 0; gap: 22px 34px; }
.profile-facts > div { border-top: 1px solid var(--rule); padding-top: 13px; }
.profile-facts strong {
  display: block; margin-bottom: 5px;
  font: 600 1.05rem/1.2 var(--font-display);
  letter-spacing: -.01em; color: var(--fg);
}
.profile-facts span {
  display: block; font-size: var(--step-small);
  line-height: 1.5; color: var(--fg-2);
}

.profile-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; }
.profile-links a {
  font: 500 var(--step-small) var(--font-mono); letter-spacing: .03em;
  color: var(--fg); border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px;
}
.profile-links a:hover { color: var(--signal); border-bottom-color: var(--signal); }

/* The portrait is 540px wide. Once the two-column profile collapses
   it would stretch to the full measure and upscale, so cap it. */
@media (max-width: 900px) {
  .profile-photo { max-width: 460px; }
  .profile-layout { gap: 26px; }
}

/* Feedback loops: identity comes from the mono label, not from a
   v11 accent colour injected inline. */
.loop-card { border-left: 3px solid var(--rule-strong); }
.loop-card > span:first-child {
  display: block; margin-bottom: 10px;
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

/* Epistemic badges carry a status, so the status must be legible. */
.epistemic-badge.fact { color: var(--fg); border-color: var(--fg); }
.epistemic-badge.assessment { color: var(--fg-2); }
.epistemic-badge.contested { color: var(--flare); border-color: color-mix(in srgb, var(--flare) 45%, transparent); }
.source-audit article { display: grid; gap: 10px; align-content: start; }
.source-audit a { color: var(--fg-2); font-size: var(--step-small); word-break: break-word; }
.source-audit a:hover { color: var(--signal); }

/* A section that is only an instrument needs breathing room, and the
   instrument itself should not sit flush to the panel edge. */
.section > .container.cartel-instrument,
.section > .container.instrument-panel { padding-block: clamp(20px, 3vw, 36px); }

/* ============================================================
   Cartel Systems hero instrument
   The SVG was authored for a dark panel and carries v11 colours
   as presentation attributes (navy grid, neon flows, light text).
   Presentation attributes lose to CSS, so the panel is restored to
   the dark ground it was drawn for and the flows are remapped onto
   the SGM primaries they already meant.
   ============================================================ */
.cartel-instrument {
  --ground: var(--black-deep); --surface: #101010;
  --fg: var(--white); --fg-2: #A8A8A8; --fg-3: #6E6E6E;
  --rule: var(--grey-88); --rule-strong: #343434;
  background: var(--ground); color: var(--fg);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 40px);
}
.cartel-instrument svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Reference rails behind the field. */
.cartel-instrument > svg > g:first-of-type path { stroke: var(--grey-88); stroke-width: 1; fill: none; }

/* The three modalities of power, in the order the drawing declares them:
   resources, coercion, legitimacy. */
.cartel-instrument .flow path { fill: none; stroke-width: 2.4; }
.cartel-instrument .flow path:nth-of-type(1) { stroke: var(--sgm-yellow); }
.cartel-instrument .flow path:nth-of-type(2) { stroke: var(--sgm-red); }
.cartel-instrument .flow path:nth-of-type(3) { stroke: var(--sgm-blue); }
.cartel-instrument marker path { fill: var(--fg-3); }

/* Nodes: dark discs so the label inside stays legible. A pulse marks
   where pressure is applied, as a ring rather than a solid fill. */
/* :not([class]) matches the generic diagram default's specificity, and this
   block comes later, so the instrument's own treatment wins. */
.cartel-instrument circle:not([class]) {
  fill: #101010; stroke: var(--rule-strong); stroke-width: 1.4;
}
/* the earlier .cartel-instrument .pulse rule sets a flare fill, which
   buries the label inside the disc; the ring carries the accent instead */
.cartel-instrument circle.pulse { fill: #101010; stroke: var(--flare); stroke-width: 2.4; }

/* Labels sit inside the discs, so they must be light and small. */
.cartel-instrument text:not([class]) {
  fill: var(--white); font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .06em;
}
.cartel-instrument text[text-anchor="start"]:not([class]) {
  fill: var(--fg-3); font-size: 12px; letter-spacing: .14em;
}

/* ============================================================
   Lens switch — shared with the Home page so an inner page can
   host the same three-lens instrument.
   ============================================================ */
/* ============ Lens switch — the one interaction on the page ============ */
.lens-bar {
  display: flex; flex-wrap: wrap; gap: 18px 26px;
  align-items: center; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.lens-set { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-strong); }
.lens-set button {
  appearance: none; background: none; cursor: pointer;
  border: 0; border-right: 1px solid var(--rule-strong);
  color: var(--fg-2); padding: 11px 18px;
  font: 500 .68rem var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lens-set button:last-child { border-right: 0; }
.lens-set button:hover { color: var(--fg); }
.lens-set button[aria-pressed="true"] { background: var(--fg); color: var(--ground); }
.lens-readout {
  font: 400 .8rem var(--font-body); color: var(--fg-2); max-width: 46ch;
}
.geo-frame { border: 1px solid var(--rule); padding: clamp(14px, 2vw, 26px); }
/* Below a certain width the model stops being readable. Rather than ship a
   simplified figure that misrepresents it, let the real one scroll. */
.geo-hint { display: none; margin-top: 12px; }
@media (max-width: 820px) {
  .geo-hint { display: block; }
  [data-instrument="geometry"] { overflow-x: auto; overscroll-behavior-x: contain; }
  [data-instrument="geometry"] .geo-svg { min-width: 700px; }
  .lens-set { width: 100%; }
  .lens-set button { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .lens-set button:last-child { border-bottom: 0; }
}
.geo-foot {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
  font: 500 .64rem var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
}
/* Explicit columns: with a 1px gap acting as the divider, an auto-fit
   remainder would show up as empty grey cells. 4 / 2 / 1 always divides. */
.hero-verbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(52px, 7vw, 88px);
  background: var(--grey-15);
  border-top: 1px solid var(--grey-15);
}
@media (max-width: 1000px) { .hero-verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hero-verbs { grid-template-columns: minmax(0, 1fr); } }
.hero-verbs div { background: var(--white); padding: 24px 22px 26px; }
.hero-verbs b {
  display: block; font-family: var(--font-display); font-size: 1.16rem;
  font-weight: 600; letter-spacing: -.01em; color: var(--black); margin-bottom: 6px;
}
.hero-verbs span { font-size: .84rem; color: var(--grey-50); }

/* A .panel used as the page wrapper is structure, not a card. */
main > .panel { max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--act-pad);
  background: none; border: 0; }

/* The brand mark is a dark PNG. On the near-black footer it disappears,
   so it is inverted to white there — the header keeps the original. */
.site-footer .brand-mark { filter: brightness(0) invert(1); }

/* ============================================================
   Runtime screenshots
   Captured from the live SGM presentation runtime rendering the
   published Cartel Systems model. The bar names the source and
   version so a reader can tell a product view from a drawing.
   ============================================================ */
.runtime-shot {
  margin: 0; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.runtime-bar {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--rule);
  font: 500 .62rem var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3);
}
.runtime-shot img { display: block; width: 100%; height: auto; background: #fff; }
.runtime-shot figcaption {
  padding: 13px 16px; border-top: 1px solid var(--rule);
  font-size: var(--step-small); line-height: 1.5; color: var(--fg-3);
}

/* Editorial component contracts: layouts follow the role of the content. */
.editorial-context{max-width:76ch;margin:24px 0 36px;padding-left:18px;border-left:2px solid var(--dcg-green);color:var(--fg-2);font-size:var(--step-small);line-height:1.7}
.editorial-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.editorial-work{display:flex;flex-direction:column;align-items:flex-start;gap:16px;border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(24px,3vw,36px);background:var(--surface)}
.editorial-work h3{margin:0;font-size:clamp(1.5rem,2.2vw,2rem)}
.editorial-work h3 a{color:inherit;text-decoration:none}
.editorial-work h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.editorial-work>p{color:var(--fg-2);max-width:65ch}
.editorial-work>.case-id{margin:0}
.editorial-work .editorial-work-note{font-size:.82rem;line-height:1.6}
.editorial-work--featured{grid-column:1/-1;border-top:3px solid var(--dcg-green)}
.editorial-work-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:auto}
.editorial-work .case-link,.editorial-work-links a{font-size:.9rem;color:var(--dcg-green);text-decoration:none}
.editorial-work a:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.editorial-work a:hover{text-decoration:underline}
.publication{min-width:0;gap:20px}
.publication>div{flex:1 1 240px;min-width:0}
.publication p{line-height:1.7}
.publication .pub-status{flex:0 0 auto;max-width:100%;overflow-wrap:anywhere}
.concept-universe{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.concept-index{display:flex;flex-direction:column;position:sticky;top:24px;gap:4px;border-left:1px solid var(--rule);padding-left:16px}
.concept-index a{display:block;padding:7px 0;color:var(--fg-2);font-size:.85rem;text-decoration:none}
.concept-index a.active,.concept-index a:hover{color:var(--dcg-green)}
.concept-entry{padding:clamp(24px,3vw,38px);scroll-margin-top:24px}
.concept-entry+.concept-entry{margin-top:24px}
.concept-entry>.label{margin-bottom:14px}
.concept-entry h2{font-size:clamp(1.65rem,2.7vw,2.25rem);margin-bottom:18px;max-width:none}
.concept-entry .lead{font-size:1rem;line-height:1.75}
.concept-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--font-body);font-size:.9rem;line-height:1.7;letter-spacing:normal;text-transform:none}
.concept-meta strong{display:block;margin-bottom:8px;color:var(--fg);font-size:.8rem}
.concept-meta p{margin:0}
.pipeline-13{counter-reset:pipeline;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pipeline-13 article{counter-increment:pipeline;padding:26px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.pipeline-13 article::before{content:counter(pipeline,decimal-leading-zero);display:block;font:500 .74rem var(--font-mono);color:var(--dcg-green);margin-bottom:18px}
.pipeline-13 h3{font-size:1.35rem;margin-bottom:10px}
.pipeline-13 p{font-size:.9rem;color:var(--fg-2)}
.arch-column{padding:22px;border:1px solid var(--rule);border-radius:var(--radius)}
.arch-column>header{padding-bottom:18px}
.arch-column .arch-item+.arch-item{margin-top:12px}
.arch-column small{display:block;margin-top:8px;color:var(--fg-2)}
.darovel-feature{margin:0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.darovel-gallery{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin:0;padding:12px;background:var(--black-deep)}
.darovel-secondary-shots{display:grid;gap:12px;align-content:start}
.darovel-gallery img{display:block;width:100%;height:auto}
.darovel-feature>figcaption{display:flex;flex-wrap:wrap;gap:24px;align-items:start;padding:clamp(24px,3vw,36px)}
.darovel-feature>figcaption>div{flex:1 1 420px}
.darovel-feature h3{margin:12px 0}
.darovel-feature p{color:var(--fg-2);max-width:78ch}
.ecosystem-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ecosystem-flow>b{display:none}
.ecosystem-flow>div{border-top:1px solid var(--rule);padding-top:18px}
.ecosystem-flow h2{font-size:1.5rem;margin:12px 0}
.ecosystem-flow p{font-size:.9rem;color:var(--fg-2)}
.engagement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.engagement-card{scroll-margin-top:24px}
.engagement-card h3{margin:14px 0}
.engagement-card p{margin-bottom:22px}
.reachability-signature{font:500 .82rem/1.8 var(--font-mono);padding:24px;border:1px solid var(--rule);margin:28px 0;overflow-wrap:anywhere}
.app-feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);align-items:start}
.app-feature>div{min-width:0}
:where(.concept-universe,.darovel-gallery,.editorial-work-grid,.pipeline-13,.engagement-grid)>*{min-width:0}
@media(max-width:900px){.pipeline-13{grid-template-columns:repeat(2,minmax(0,1fr))}.concept-universe{grid-template-columns:1fr}.concept-index{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px;border-left:0;border-bottom:1px solid var(--rule);padding:0 0 24px}.concept-meta{grid-template-columns:1fr;gap:18px}.darovel-gallery{grid-template-columns:1fr}.darovel-secondary-shots{grid-template-columns:repeat(2,minmax(0,1fr))}.ecosystem-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.editorial-work-grid,.pipeline-13,.engagement-grid,.app-feature,.ecosystem-flow{grid-template-columns:1fr}.editorial-work--featured{grid-column:auto}.darovel-secondary-shots{grid-template-columns:1fr}}

.compat-redirect{max-width:900px;margin:64px auto;padding-inline:clamp(20px,4vw,52px)}
.compat-redirect h1{margin-bottom:24px}
.compat-redirect .panel{padding:clamp(24px,4vw,48px)}

/* Inner-page rhythm: a heading owns the gap to the block it introduces.
   These selectors only apply below <main>; Home doesn't load this file. */
main .section-head + :is(.artifact-groups,.problem-grid,.outcome-grid,.v1-ladder,.question-grid,.cluster-grid,.work-grid,.field-study-grid,.publication-grid,.evidence-grid,.v1-capability-grid,.arch-grid,.loop-grid,.shift-grid,.system-boundary-grid,.triangulation-grid,.sgm-domain-grid,.future-branches,.control-stack,.integration-flow,.failure-rail,.source-audit,.evidence-ledger,.engagement-grid,.v1-topic-list){margin-top:0}
main :is(.dcg-card,.app-card,.case-card,.loop-card,.field-study-card,.work-card,.spectrum-card)>h3{margin-block:12px}
main :is(.system-boundary-grid,.future-branches,.control-stack,.field-grid,.sgm-domain-grid)>article>h3{margin-block:12px;font-size:var(--step-3)}
main :is(.system-boundary-grid,.future-branches,.control-stack,.field-grid,.sgm-domain-grid)>article>p{font-size:var(--step-small);color:var(--fg-2);line-height:1.7}
main :is(.dcg-card,.app-card,.case-card,.work-card,.field-study-card)>p+p{margin-top:12px}
main :is(.dcg-card,.app-card,.case-card,.work-card,.field-study-card)>:is(.work-link,.case-link){display:inline-block;margin-top:20px}
main .epistemic-badge{max-width:100%;justify-self:start;line-height:1.5}
main .source-audit p{font-size:.9rem;line-height:1.7}
main .source-audit{grid-template-columns:repeat(2,minmax(0,1fr))}
main .source-audit>article:last-child:nth-child(odd){grid-column:1/-1}
main .integration-flow{display:flex;flex-wrap:wrap;gap:16px}
main .integration-flow>div{flex:1 1 190px;padding:20px;border-top:2px solid var(--dcg-green);background:var(--surface);font:600 1.2rem/1.3 var(--font-display)}
main .integration-flow>span{display:none}
main .triangulation-grid{gap:24px}
main .triangulation-grid>article{padding:24px;border:1px solid var(--rule);border-radius:var(--radius)}
main .triangulation-grid>article>strong{display:block;margin-block:16px 12px;font:600 1.3rem/1.3 var(--font-display)}
main .triangulation-grid>article>p{font-size:.9rem;line-height:1.7}
main .triangulation-core{grid-column:1/-1}
main .triangulation-core strong{display:block;margin-block:12px}
main .triangulation-core>span{display:block;margin-top:24px;font-size:.8rem}
main .dominance-compare{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:28px;align-items:center;margin-top:32px}
main .dominance-compare>article{align-self:stretch;border:1px solid var(--rule);padding:28px}
main .dominance-compare h3{margin-bottom:14px}
main .dominance-compare p{margin-bottom:20px;color:var(--fg-2)}
main .dominance-compare>b{text-align:center;color:var(--fg-3)}
main .portal-copy>p{margin-top:20px}
main .diff-wrap{overflow-x:auto;overscroll-behavior-inline:contain;max-width:100%}
main :is(.app-feature,.v1-hero-grid,.page-hero-layout,.profile-layout,.power-projection)>*{min-width:0}
main :is(.prose,.article)>blockquote + :is(p,h2){margin-top:24px}
main .power-orbit:has(>.core){position:relative;width:min(100%,300px);aspect-ratio:1;margin-inline:auto;padding:0;border:0;background:transparent;display:grid;place-items:center}
main .power-orbit:has(>.core)>.orbit{position:absolute;inset:20%;display:block;padding:0;background:none;border:1px solid var(--grey-50);border-radius:50%}
main .power-orbit:has(>.core)>.o1{transform:translateX(-22%);border-color:var(--sgm-red)}
main .power-orbit:has(>.core)>.o2{transform:translateX(22%);border-color:var(--sgm-yellow)}
main .power-orbit:has(>.core)>.o3{transform:translateY(-22%);border-color:var(--sgm-blue)}
main .power-orbit:has(>.core)>.core{z-index:1;font:500 .7rem/1.4 var(--font-mono);letter-spacing:.14em;color:var(--fg)}
main .power-orbit:has(>.core)>.node{display:none}
@media(max-width:640px){
 main .source-audit{grid-template-columns:1fr}
 main .dominance-compare{grid-template-columns:1fr;gap:16px}
 main .dominance-compare>article{padding:24px}
 main .integration-flow>div{flex-basis:calc(50% - 16px);min-width:120px;padding:16px}
}