/* Final public presentation layer. The core site remains dependency free. */
@media screen {
  body { background: var(--bg-0); color: var(--text-body); font: 16px/1.5 var(--font); }
  h1, h2, h3, h4, h5, h6 { color: var(--text-strong); font-family: var(--display); font-weight: 650; line-height: 1.2; text-wrap: balance; }
  p { text-wrap: pretty; }
  .site-container { width: min(1280px, calc(100% - var(--s8))); }
  .official-bar { border-color: var(--hairline); background: #eef2f6; color: var(--text-dim); font: 11px/1.4 var(--font); letter-spacing: .08em; }
  .official-inner { min-height: 32px; gap: var(--s1); }
  .official-bar .plain-link { color: var(--text-dim); font-family: var(--font); font-size: 11px; letter-spacing: .04em; text-transform: none; }
  .official-bar .plain-link:hover { color: var(--text-strong); }
  .flag-mark { width: 8px; height: 8px; border-radius: 2px; box-shadow: none; }
  .site-header { border-color: var(--hairline); background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(16px); }
  .header-inner { min-height: 72px; gap: var(--s3); }
  .brand { gap: var(--s2); }
  .brand-lockup img { width: auto; height: 40px; }
  .primary-nav { gap: var(--s1); }
  .primary-nav button { min-height: 40px; padding: var(--s1) var(--s2); border: 0; border-radius: var(--radius); color: var(--text-dim); background: transparent; font: 600 13px/1 var(--font); letter-spacing: 0; text-transform: none; }
  .primary-nav button:hover { color: var(--text-strong); background: var(--bg-2); }
  .primary-nav button.active { color: var(--accent); background: var(--accent-dim); }
  .header-actions { gap: var(--s1); }
  .button { min-height: 40px; gap: var(--s1); padding: var(--s1) var(--s2); border-radius: var(--radius); font: 650 13px/1 var(--font); letter-spacing: 0; text-transform: none; }
  .button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
  .button-primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
  .button-secondary { border-color: var(--hairline-strong); background: var(--bg-1); color: var(--text-strong); }
  .button-secondary:hover { border-color: var(--accent); background: var(--accent-dim); }
  .button-quiet { color: var(--text-dim); }
  .button-small { min-height: 32px; padding: var(--s1) var(--s2); font-size: 12px; }
  .hero { border-color: var(--hairline); background: var(--bg-0); }
  .hero::before { opacity: .55; background-size: var(--s8) var(--s8); }
  .hero::after { display: none; }
  .hero-grid { min-height: 640px; gap: var(--s8); padding-block: var(--s12); }
  .eyebrow { gap: var(--s1); margin-bottom: var(--s2); color: var(--accent); font: 700 11px/1.4 var(--font); letter-spacing: .12em; }
  .eyebrow::before { width: var(--s3); }
  .hero h1 { max-width: 760px; font-size: clamp(48px, 6vw, 80px); font-weight: 650; line-height: 1; }
  .hero h1 em { color: var(--accent); font-family: var(--display); font-style: normal; font-weight: 650; }
  .hero-lead { max-width: 640px; margin: var(--s3) 0 var(--s4); color: var(--text-dim); font-size: 18px; line-height: 1.6; }
  .hero-actions, .page-hero-actions { gap: var(--s1); margin-top: var(--s3); }
  .section { padding-block: var(--s12); }
  .section-tight { padding-block: var(--s8); }
  .section-warm { background: var(--bg-2); }
  .section-blue { background: var(--accent-dim); }
  .section-head { margin-bottom: var(--s6); }
  .section-head h2, .page-hero h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 650; line-height: 1.1; }
  .section-head p { margin-top: var(--s2); font-size: 17px; line-height: 1.6; }
  .page-hero { padding: var(--s12) 0 var(--s8); }
  .page-hero p { margin-top: var(--s2); }
  .workflow-grid { gap: var(--s2); }
  .workflow-item { min-height: 112px; padding: var(--s3); border-radius: var(--radius); background: var(--bg-2); }
  .workflow-item span { margin-top: var(--s1); }
  .app-card, .assessment-card, .audience-card, .comparison-card, .department-panel,
  .form-card, .integration-card, .mock-panel, .pillar-card, .question-card,
  .resource-card, .service-card, .settings-panel, .suggested-card, .trust-card,
  .user-card, .ops-capability-grid article, .ops-principle-grid article,
  .ops-graph-shell, .ops-console, .ops-evidence-panel { border-radius: var(--radius); box-shadow: none; }
  .pillar-card, .service-card, .audience-card, .trust-card, .integration-card { padding: var(--s4); }
  .site-footer { padding-top: var(--s8); background: #081426; }
  .footer-grid { gap: var(--s6); padding-bottom: var(--s6); }
  .footer-grid > div:not(:first-child) { gap: var(--s1); }
  .footer-grid > div > strong { margin-bottom: var(--s1); font: 600 11px/1.4 var(--font); letter-spacing: .08em; }
  .footer-grid button { min-height: 32px; font-size: 13px; }
  .footer-bottom { min-height: 64px; font-family: var(--font); font-size: 11px; }
  .modal { border-radius: var(--radius); box-shadow: var(--shadow); }
  .modal-head, .modal-body, .modal-actions { padding: var(--s3); }

  /* Public homepage: calm institutional presentation with one signal color. */
  #main-content[data-route="home"] .ops-home {
    --ops-night: #081426;
    --ops-night-raised: #ffffff;
    --ops-panel: #ffffff;
    --ops-ink: var(--text-strong);
    --ops-muted: var(--text-dim);
    --ops-line: var(--hairline);
    --ops-line-bright: var(--hairline-strong);
    --ops-blue: var(--accent);
    --ops-blue-bright: var(--accent);
    --ops-aqua: var(--accent);
    --ops-lime: var(--green);
    --ops-amber: #8a5b00;
    --ops-red: var(--red);
    background: var(--bg-0);
    color: var(--text-body);
  }
  #main-content[data-route="home"] .ops-hero {
    min-height: 0;
    color: var(--text-body);
    background: #ffffff;
    border-color: var(--hairline);
  }
  #main-content[data-route="home"] .ops-hero::after,
  #main-content[data-route="home"] .ops-hero-gridlines { display: none; }
  #main-content[data-route="home"] .ops-hero-media {
    opacity: .08;
    filter: grayscale(1) contrast(1.05);
    mask-image: linear-gradient(90deg, transparent 28%, #000 74%);
    -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 74%);
  }
  #main-content[data-route="home"] .ops-hero-grid {
    min-height: 640px;
    gap: var(--s8);
    padding-block: var(--s12) var(--s8);
  }
  #main-content[data-route="home"] .ops-system-label {
    margin-bottom: var(--s4);
    padding: var(--s1) var(--s2);
    color: var(--text-dim);
    background: var(--bg-2);
    border-color: var(--hairline);
    font: 600 11px/1.4 var(--font);
    letter-spacing: .08em;
  }
  #main-content[data-route="home"] .ops-system-label i,
  #main-content[data-route="home"] .ops-console-top i,
  #main-content[data-route="home"] .ops-console-foot i {
    width: var(--s1);
    height: var(--s1);
    background: var(--accent);
    border-radius: 2px;
    box-shadow: none;
  }
  #main-content[data-route="home"] .ops-system-label b {
    color: var(--accent);
    border-color: var(--hairline-strong);
  }
  #main-content[data-route="home"] .ops-hero .eyebrow { color: var(--accent); }
  #main-content[data-route="home"] .ops-hero h1 {
    color: var(--text-strong);
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.04em;
  }
  #main-content[data-route="home"] .ops-hero h1 em { color: var(--accent); }
  #main-content[data-route="home"] .ops-hero-copy > p {
    margin: var(--s3) 0 var(--s4);
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1.6;
  }
  #main-content[data-route="home"] .ops-hero .button { border-radius: var(--radius); }
  #main-content[data-route="home"] .ops-hero .button-primary {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
  }
  #main-content[data-route="home"] .ops-hero .button-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }
  #main-content[data-route="home"] .ops-hero .button-secondary {
    color: var(--text-strong);
    background: #ffffff;
    border-color: var(--hairline-strong);
  }
  #main-content[data-route="home"] .ops-value-loop {
    margin-top: var(--s6);
    background: var(--hairline);
    border-color: var(--hairline);
  }
  #main-content[data-route="home"] .ops-value-loop > div {
    min-height: 96px;
    padding: var(--s2);
    background: #ffffff;
  }
  #main-content[data-route="home"] .ops-value-loop span { color: var(--accent); }
  #main-content[data-route="home"] .ops-value-loop strong { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-value-loop small { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-console {
    color: var(--text-body);
    background: #ffffff;
    border-color: var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: none;
  }
  #main-content[data-route="home"] .ops-console::after { display: none; }
  #main-content[data-route="home"] .ops-console-top,
  #main-content[data-route="home"] .ops-console-foot {
    min-height: var(--s6);
    padding: var(--s1) var(--s2);
    color: var(--text-dim);
    border-color: var(--hairline);
    font: 600 10px/1.4 var(--font);
    letter-spacing: .06em;
  }
  #main-content[data-route="home"] .ops-console-top small { color: var(--text-dim); border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-console-boundary {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  #main-content[data-route="home"] .ops-console-tabs {
    padding: var(--s1);
    background: var(--bg-2);
    border-color: var(--hairline);
  }
  #main-content[data-route="home"] .ops-console-tabs button {
    min-height: var(--s5);
    color: var(--text-dim);
    font: 650 11px/1 var(--font);
    letter-spacing: 0;
    text-transform: none;
  }
  #main-content[data-route="home"] .ops-console-tabs button:hover { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-console-tabs button[aria-selected="true"] {
    color: var(--accent);
    background: #ffffff;
    border-color: var(--accent);
  }
  #main-content[data-route="home"] .ops-console-body { min-height: 360px; padding: var(--s3); }
  #main-content[data-route="home"] .ops-console-summary { gap: var(--s3); padding-bottom: var(--s3); border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-console-summary span,
  #main-content[data-route="home"] .ops-console-summary small { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-console-summary strong { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-console-summary p { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-console-row { gap: var(--s2); padding-block: var(--s2); border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-console-row strong { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-console-row small,
  #main-content[data-route="home"] .ops-console-row > b { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-console-foot b { color: var(--accent); }
  #main-content[data-route="home"] .ops-hero-foot {
    min-height: var(--s8);
    color: var(--text-dim);
    font: 600 10px/1.4 var(--font);
    letter-spacing: .06em;
  }
  #main-content[data-route="home"] .ops-hero-foot a { color: var(--accent); }
  #main-content[data-route="home"] .ops-hero-foot a:hover { color: var(--accent-strong); }
  #main-content[data-route="home"] .ops-section { padding-block: var(--s12); }
  #main-content[data-route="home"] .ops-section-head { gap: var(--s6); margin-bottom: var(--s6); }
  #main-content[data-route="home"] .ops-section-head .eyebrow,
  #main-content[data-route="home"] .ops-proof-copy .eyebrow { margin-bottom: var(--s2); }
  #main-content[data-route="home"] .ops-section-head h2,
  #main-content[data-route="home"] .ops-proof-copy h2,
  #main-content[data-route="home"] .ops-final h2 {
    color: var(--text-strong);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.03em;
  }
  #main-content[data-route="home"] .ops-section-head > p { margin-top: var(--s4); color: var(--text-dim); }
  #main-content[data-route="home"] .ops-outcomes { background: var(--bg-2); }
  #main-content[data-route="home"] .ops-outcome-grid { border-color: var(--hairline-strong); }
  #main-content[data-route="home"] .ops-outcome-grid article {
    min-height: 280px;
    padding: var(--s4);
    border-color: var(--hairline-strong);
  }
  #main-content[data-route="home"] .ops-outcome-grid span { color: var(--accent); }
  #main-content[data-route="home"] .ops-outcome-grid strong { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-outcome-grid p { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-graph-section,
  #main-content[data-route="home"] .ops-workflow-lab {
    color: var(--text-body);
    background: var(--bg-1);
    border-color: var(--hairline);
  }
  #main-content[data-route="home"] .ops-section-head-light h2 { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-section-head-light > p,
  #main-content[data-route="home"] .ops-section-head-light .section-index { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-graph-shell {
    min-height: 600px;
    border-color: var(--hairline-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: none;
  }
  #main-content[data-route="home"] .ops-object-tabs { border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-object-tabs button {
    color: var(--text-dim);
    border-color: var(--hairline);
    font: 600 10px/1.4 var(--font);
    letter-spacing: .04em;
  }
  #main-content[data-route="home"] .ops-object-tabs button:hover { color: var(--text-strong); background: var(--bg-2); }
  #main-content[data-route="home"] .ops-object-tabs button[aria-selected="true"] {
    color: var(--accent);
    background: var(--accent-dim);
    box-shadow: inset 2px 0 var(--accent);
  }
  #main-content[data-route="home"] .ops-graph-visual { background: var(--bg-2); }
  #main-content[data-route="home"] .ops-graph-visual::before,
  #main-content[data-route="home"] .ops-graph-visual::after { background: var(--hairline-strong); }
  #main-content[data-route="home"] .ops-orbit { display: none; }
  #main-content[data-route="home"] .ops-graph-visual > strong {
    color: #ffffff;
    background: var(--accent);
    border-radius: var(--radius);
    box-shadow: none;
  }
  #main-content[data-route="home"] .ops-node {
    color: var(--text-body);
    background: #ffffff;
    border-color: var(--hairline-strong);
  }
  #main-content[data-route="home"] .ops-object-panel { background: #ffffff; border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-object-head { color: var(--accent); }
  #main-content[data-route="home"] .ops-object-panel h3 { margin-top: var(--s5); color: var(--text-strong); }
  #main-content[data-route="home"] .ops-object-panel > p { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-object-facts { margin-top: var(--s4); border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-object-facts > div { border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-object-facts dt { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-object-facts dd { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-platform { background: var(--bg-2); }
  #main-content[data-route="home"] .ops-capability-grid { background: var(--hairline-strong); border-color: var(--hairline-strong); }
  #main-content[data-route="home"] .ops-capability-grid article {
    min-height: 288px;
    padding: var(--s4);
    background: #ffffff;
    transition: background var(--transition-fast);
  }
  #main-content[data-route="home"] .ops-capability-grid article:hover {
    background: var(--accent-dim);
    box-shadow: none;
    transform: none;
  }
  #main-content[data-route="home"] .ops-workflow-tabs { border-color: var(--hairline-strong); }
  #main-content[data-route="home"] .ops-workflow-tabs button {
    min-height: var(--s8);
    color: var(--text-dim);
    background: var(--bg-2);
    border-color: var(--hairline);
    font: 650 12px/1 var(--font);
    letter-spacing: 0;
    text-transform: none;
  }
  #main-content[data-route="home"] .ops-workflow-tabs button:hover { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-workflow-tabs button[aria-selected="true"] {
    color: var(--accent);
    background: #ffffff;
    box-shadow: inset 0 -2px var(--accent);
  }
  #main-content[data-route="home"] .ops-workflow-stage {
    min-height: 400px;
    gap: var(--s8);
    padding: var(--s8);
    background: #ffffff;
    border-color: var(--hairline-strong);
  }
  #main-content[data-route="home"] .ops-workflow-copy h3 { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-workflow-copy > p { color: var(--text-dim); }
  #main-content[data-route="home"] .ops-evidence-output { margin-top: var(--s4); padding: var(--s2); background: var(--accent-dim); border-color: var(--accent); }
  #main-content[data-route="home"] .ops-evidence-output span { color: var(--accent); }
  #main-content[data-route="home"] .ops-evidence-output strong { color: var(--text-strong); }
  #main-content[data-route="home"] .ops-workflow-steps::before { background: var(--hairline-strong); }
  #main-content[data-route="home"] .ops-workflow-steps li { color: var(--text-strong); border-color: var(--hairline); }
  #main-content[data-route="home"] .ops-workflow-steps span {
    color: #ffffff;
    background: var(--accent);
    border-radius: var(--radius);
  }
  #main-content[data-route="home"] .ops-workflow-steps i { background: var(--accent); border-radius: 2px; box-shadow: none; }
  #main-content[data-route="home"] .ops-workflow-action {
    min-height: var(--s8);
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    color: var(--text-dim);
    background: var(--bg-2);
    border-color: var(--hairline-strong);
  }
  #main-content[data-route="home"] .ops-proof { background: var(--bg-1); }
  #main-content[data-route="home"] .ops-proof-copy .section-index { margin-bottom: var(--s5); }
  #main-content[data-route="home"] .ops-proof-stack { gap: var(--s1); }
  #main-content[data-route="home"] .ops-proof-stack article {
    min-height: 112px;
    gap: var(--s3);
    padding: var(--s3) var(--s3) var(--s3) var(--s4);
    border-color: var(--hairline);
    box-shadow: none;
  }
  #main-content[data-route="home"] .ops-final { padding-block: var(--s4); background: #081426; }
  #main-content[data-route="home"] .ops-final-panel {
    min-height: 360px;
    gap: var(--s8);
    padding: var(--s8);
    background: #0c1b30;
    border-color: #34445a;
  }
  #main-content[data-route="home"] .ops-final h2 { color: #ffffff; }
  #main-content[data-route="home"] .ops-final p { color: #b9c5d4; }
  #main-content[data-route="home"] .ops-final .button-primary {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
  }
}

@media screen and (max-width: 900px) {
  .site-container { width: min(100% - var(--s4), 1280px); }
  .header-inner { flex-wrap: wrap; padding-block: var(--s2); }
  .nav-toggle { min-height: 40px; margin-left: auto; padding: var(--s1) var(--s2); border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--bg-1); }
  .primary-nav { width: 100%; gap: var(--s1); padding-top: var(--s2); }
  .hero-grid { min-height: 0; grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s8); }
  #main-content[data-route="home"] .ops-hero-grid { min-height: 0; grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s8); }
  #main-content[data-route="home"] .ops-console { max-width: none; }
  #main-content[data-route="home"] .ops-section-head { gap: var(--s4); }
  #main-content[data-route="home"] .ops-section-head > p { margin-top: 0; }
  #main-content[data-route="home"] .ops-workflow-stage { padding: var(--s4); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
}

@media screen and (max-width: 600px) {
  .official-help { display: none; }
  .header-actions { width: 100%; }
  .header-actions .button { flex: 1; }
  .primary-nav { display: none; }
  .primary-nav.open { display: grid; }
  .hero-grid { padding-block: var(--s6); }
  .hero h1 { font-size: clamp(40px, 13vw, 56px); }
  #main-content[data-route="home"] .ops-hero h1 { font-size: clamp(40px, 13vw, 56px); }
  #main-content[data-route="home"] .ops-hero-media { display: none; }
  #main-content[data-route="home"] .ops-console { margin-inline: 0; }
  #main-content[data-route="home"] .ops-console-boundary { display: none; }
  #main-content[data-route="home"] .ops-section { padding-block: var(--s8); }
  #main-content[data-route="home"] .ops-final-panel { padding: var(--s4); }
  .section { padding-block: var(--s8); }
  .section-tight { padding-block: var(--s6); }
  .section-head { margin-bottom: var(--s4); }
  .workflow-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { min-height: 96px; align-items: flex-start; flex-direction: column; justify-content: center; gap: var(--s1); }
}