:root {
    --bg: #0C0E1A;
    --bg-elev: #121523;
    --bg-elev-2: #181c2e;
    --line: #1f2438;
    --line-bright: #2d334a;
    --ink: #EEEDFE;
    --ink-dim: #8890B5;
    --ink-faint: #5F5E7A;
    --violet: #7F77DD;
    --violet-bright: #AFA9EC;
    --violet-dim: #4F4A8A;
    --green: #5DCAA5;
    --orange: #D85A30;
    --display: 'Fraunces', Georgia, serif;
    --mono: 'JetBrains Mono', Menlo, monospace;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  body {
    background-image:
      radial-gradient(ellipse at top, rgba(127, 119, 221, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse at bottom right, rgba(93, 202, 165, 0.025) 0%, transparent 50%);
    min-height: 100vh;
  }

  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(12, 14, 26, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
  }
  .topbar-brand {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
  }
  .topbar-brand .dot { color: var(--violet); margin: 0 6px; }
  .topbar-meta {
    margin-left: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faint);
  }

  .sidenav {
    position: fixed;
    left: 0; top: 56px; bottom: 0;
    width: 240px;
    border-right: 1px solid var(--line);
    background: var(--bg);
    padding: 32px 0;
    overflow-y: auto;
  }
  .sidenav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    padding: 0 32px;
    margin-bottom: 16px;
  }
  .sidenav-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 32px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
    color: var(--ink-dim);
    font-size: 13px;
  }
  .sidenav-item:hover { color: var(--ink); background: var(--bg-elev); }
  .sidenav-item.active {
    color: var(--ink);
    border-left-color: var(--violet);
    background: var(--bg-elev);
  }
  .sidenav-item .num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    min-width: 18px;
  }
  .sidenav-item.active .num { color: var(--violet); }
  .sidenav-item[data-section="5"].active { border-left-color: var(--green); }
  .sidenav-item[data-section="5"].active .num { color: var(--green); }
  .sidenav-item[data-section="6"].active { border-left-color: var(--orange); }
  .sidenav-item[data-section="6"].active .num { color: var(--orange); }

  .sidenav-footer {
    position: absolute;
    bottom: 24px;
    left: 32px; right: 32px;
    font-size: 10px;
    color: var(--ink-faint);
    line-height: 1.8;
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }

  main {
    margin-left: 240px;
    margin-top: 56px;
    min-height: calc(100vh - 56px);
  }
  .section {
    display: block;
    padding: 80px 80px 100px;
    max-width: 1280px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 70px;
  }
  .section:last-of-type { border-bottom: none; }
  @keyframes sectionIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .section-header {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
  }
  .section-header .marker { color: var(--violet); }
  .section-header .rule { flex: 1; height: 1px; background: var(--line); }

  .cold-open {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    max-width: none;
    position: relative;
  }
  .co-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--ink-faint);
    margin-bottom: 32px;
  }
  .co-terrain-wrap {
    width: 100%;
    max-width: 1400px;
    margin-bottom: 8px;
    position: relative;
  }
  .co-terrain-wrap svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .terrain-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawTerrain 2.6s ease-out forwards;
  }
  .terrain-path.t2 { animation-delay: 0.3s; animation-duration: 2.4s; }
  .terrain-path.t3 { animation-delay: 0.6s; animation-duration: 2.2s; }
  @keyframes drawTerrain { to { stroke-dashoffset: 0; } }

  .terrain-dot {
    opacity: 0;
    animation: dotIn 0.5s ease-out forwards;
  }
  @keyframes dotIn { to { opacity: var(--final-opacity, 0.8); } }

  .co-title {
    font-family: var(--display);
    font-size: clamp(72px, 11vw, 168px);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: 0.06em;
    margin-top: 16px;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.4s forwards;
  }
  .co-tagline {
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 300;
    color: var(--ink-dim);
    line-height: 1.5;
    margin-top: 16px;
    font-style: italic;
    max-width: 880px;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.7s forwards;
  }
  .co-tagline span { display: block; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .co-capabilities {
    display: flex;
    gap: 48px;
    margin-top: 56px;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 1.0s forwards;
  }
  .co-cap {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }
  .co-cap .pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .co-cap.violet .pip { background: var(--violet); box-shadow: 0 0 12px rgba(127, 119, 221, 0.6); }
  .co-cap.green .pip { background: var(--green); box-shadow: 0 0 12px rgba(93, 202, 165, 0.5); }
  .co-cap.orange .pip { background: var(--orange); box-shadow: 0 0 12px rgba(216, 90, 48, 0.5); }

  .co-meta {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    gap: 64px;
    justify-content: space-between;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-top: 1px solid var(--line);
    opacity: 0;
    animation: fadeUp 0.8s ease-out 1.3s forwards;
  }
  .co-meta-item strong {
    color: var(--ink-dim);
    font-weight: 400;
    display: block;
    margin-top: 4px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-family: var(--display);
    font-size: 13px;
    font-style: italic;
  }

  .thesis-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    margin-top: 48px;
  }
  .thesis-statement {
    font-family: var(--display);
    font-size: 38px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .thesis-statement em {
    font-style: italic;
    color: var(--violet-bright);
  }
  .thesis-sub {
    margin-top: 40px;
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.7;
    max-width: 480px;
    border-left: 1px solid var(--line-bright);
    padding-left: 20px;
  }
  .postulate-frame {
    border: 1px solid var(--line-bright);
    background: var(--bg-elev);
    padding: 32px;
    position: relative;
  }
  .postulate-frame::before {
    content: 'FIG. 01';
    position: absolute;
    top: -8px;
    right: 24px;
    background: var(--bg);
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
  }
  .postulate-frame .header {
    font-family: var(--display);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-dim);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .postulate-list { list-style: none; counter-reset: postulate; }
  .postulate-list li {
    counter-increment: postulate;
    padding: 14px 0 14px 48px;
    position: relative;
    border-bottom: 1px dotted var(--line);
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.5;
  }
  .postulate-list li:last-child { border-bottom: none; }
  .postulate-list li::before {
    content: counter(postulate, upper-roman) ".";
    position: absolute;
    left: 0;
    top: 14px;
    font-family: var(--display);
    font-style: italic;
    color: var(--violet-bright);
    font-size: 13px;
    width: 36px;
  }
  .postulate-list li strong {
    color: var(--ink);
    font-weight: 500;
    font-family: var(--display);
    font-style: italic;
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
  }
  .thesis-footnote {
    margin-top: 24px;
    font-size: 10px;
    color: var(--ink-faint);
    font-style: italic;
    text-align: right;
    font-family: var(--display);
  }

  /* ===== POSTULATE GRID (v3.1) ===== */
  .thesis-lede {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.7;
    max-width: 720px;
    margin-top: 24px;
    margin-bottom: 48px;
  }
  .postulate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
  }
  .postulate-card {
    border: 1px solid var(--line-bright);
    background: var(--bg-elev);
    padding: 24px 28px;
  }
  .postulate-card.full {
    grid-column: 1 / -1;
    border-color: var(--violet-dim);
    border-left-width: 2px;
    border-left-color: var(--violet);
  }
  .postulate-card .roman {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--violet-bright);
    margin-right: 14px;
  }
  .postulate-card .name {
    font-family: var(--display);
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
  }
  .postulate-card .desc {
    margin-top: 10px;
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.55;
  }

  /* ===== REGULATORY ALIGNMENT (v3.1 §02) ===== */
  .reg-hero {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 880px;
    margin-top: 32px;
  }
  .reg-hero em {
    font-style: italic;
    color: var(--violet-bright);
  }
  .reg-sub {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.7;
    max-width: 760px;
    margin-top: 20px;
    margin-bottom: 40px;
  }
  .reg-panel {
    border: 1px solid var(--line-bright);
    background: var(--bg-elev);
    padding: 28px 32px;
    margin-bottom: 16px;
  }
  .reg-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    gap: 24px;
  }
  .reg-panel-title {
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink);
  }
  .reg-panel-scope {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .reg-panel-subtitle {
    font-family: var(--display);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-dim);
    margin-top: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
  }
  .reg-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .reg-col {
    border-left: 2px solid var(--violet);
    padding-left: 16px;
  }
  .reg-col-head {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--violet-bright);
    margin-bottom: 10px;
  }
  .reg-col-body {
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.6;
  }
  .reg-footnote {
    margin-top: 24px;
    font-size: 10px;
    color: var(--ink-faint);
    font-style: italic;
    text-align: right;
    font-family: var(--display);
  }

  .stub {
    border: 1px dashed var(--line-bright);
    padding: 64px;
    margin-top: 48px;
    text-align: center;
    background: var(--bg-elev);
  }
  .stub.violet { border-color: var(--violet-dim); }
  .stub.green { border-color: rgba(93, 202, 165, 0.3); }
  .stub.orange { border-color: rgba(216, 90, 48, 0.3); }
  .stub .icon {
    font-family: var(--display);
    font-size: 48px;
    color: var(--violet-dim);
    font-style: italic;
    margin-bottom: 16px;
  }
  .stub.green .icon { color: var(--green); opacity: 0.6; }
  .stub.orange .icon { color: var(--orange); opacity: 0.6; }
  .stub .title {
    font-family: var(--display);
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 12px;
  }
  .stub .desc {
    font-size: 13px;
    color: var(--ink-dim);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
  }
  .stub .build-note {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
  }

  /* ===== ICD SECTION ===== */
  .icd-wrap {
    margin-top: 32px;
  }

  .icd-diagram {
    position: relative;
    border: 1px solid var(--line-bright);
    background: var(--bg-elev);
    padding: 64px 36px 44px;
    margin-bottom: 24px;
    overflow: hidden;
  }

  .icd-doc-num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    text-transform: uppercase;
  }

  .icd-zone-labels {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0;
    pointer-events: none;
  }

  .icd-zone-label {
    background: var(--bg-elev);
    padding: 0 14px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .icd-zone-label.customer { color: var(--ink-faint); margin-right: auto; padding-left: 36px; }
  .icd-zone-label.boundary-l { color: var(--orange); }
  .icd-zone-label.drift { color: var(--violet); }
  .icd-zone-label.boundary-r { color: var(--orange); }
  .icd-zone-label.user { color: var(--ink-faint); margin-left: auto; padding-right: 36px; }

  /* The architecture grid: 7 columns including connectors */
  .icd-architecture {
    display: grid;
    grid-template-columns: 0.95fr 24px 0.85fr 24px 1.1fr 24px 0.85fr;
    gap: 0;
    align-items: center;
    position: relative;
    min-height: 320px;
  }

  /* Two dashed boundary lines positioned via the connector cells */
  .icd-boundary {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icd-boundary::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -52px;
    bottom: -52px;
    width: 0;
    border-left: 1px dashed var(--orange);
    opacity: 0.55;
  }

  .icd-boundary .arrow-pair {
    position: relative;
    z-index: 3;
    background: var(--bg-elev);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 80px;
  }

  .icd-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-dim);
  }

  .icd-arrow .label {
    font-size: 8.5px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .icd-arrow .line {
    flex: 1;
    height: 1px;
    position: relative;
  }

  .icd-arrow.req .line {
    background: linear-gradient(90deg, var(--violet-dim) 0%, var(--violet) 100%);
  }
  .icd-arrow.req .line::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid var(--violet);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
  }

  .icd-arrow.res .line {
    background: linear-gradient(270deg, var(--violet-dim) 0%, var(--green) 100%);
  }
  .icd-arrow.res .line::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    width: 0;
    height: 0;
    border-right: 5px solid var(--green);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
  }

  .icd-arrow.req .label { color: var(--violet-bright); }
  .icd-arrow.res .label { color: var(--green); }

  @keyframes arrowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  .icd-arrow .line::after,
  .icd-arrow .line::before {
    animation: arrowPulse 2.4s ease-in-out infinite;
  }
  .icd-arrow.res .line::before { animation-delay: 1.2s; }

  /* Inter-column connector (no boundary) */
  .icd-connect {
    height: 1px;
    background: var(--violet-dim);
    position: relative;
    opacity: 0.6;
  }

  .icd-connect::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid var(--violet-dim);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
  }

  /* Generic column wrapper */
  .icd-col {
    padding: 0 4px;
  }

  /* ===== Source artifacts column ===== */
  .icd-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .icd-source {
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s;
  }

  .icd-source:hover { border-color: var(--line-bright); }

  .icd-source-glyph {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--violet-bright);
    opacity: 0.7;
  }

  .icd-source-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-dim);
    line-height: 1.4;
  }

  .icd-source-label strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 9px;
    margin-bottom: 2px;
  }

  .icd-sources-foot {
    margin-top: 12px;
    font-family: var(--display);
    font-style: italic;
    font-size: 10px;
    color: var(--ink-faint);
    text-align: center;
    line-height: 1.4;
  }

  /* ===== Customer agents (optional) ===== */
  .icd-customer-agents {
    border: 1px dashed var(--line);
    background: var(--bg);
    padding: 16px 14px;
    text-align: center;
    position: relative;
    opacity: 0.85;
  }

  .icd-customer-agents::after {
    content: 'OPTIONAL';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elev);
    padding: 0 8px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
  }

  .icd-customer-agents .name {
    font-family: var(--display);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-dim);
    margin-bottom: 8px;
  }

  .icd-customer-agents .desc {
    font-family: var(--mono);
    font-size: 8.5px;
    color: var(--ink-faint);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ===== DRIFT engine center column ===== */
  .icd-drift-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
  }

  .icd-agent-bay {
    border: 1px solid var(--violet-dim);
    background: rgba(127, 119, 221, 0.04);
    padding: 14px 16px 12px;
    position: relative;
  }

  .icd-agent-bay::before {
    content: attr(data-side);
    position: absolute;
    top: -7px;
    left: 14px;
    background: var(--bg-elev);
    padding: 0 8px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    color: var(--violet);
  }

  .icd-agent-bay .role {
    font-family: var(--display);
    font-style: italic;
    font-size: 11px;
    color: var(--ink-dim);
    margin-bottom: 10px;
    text-align: center;
  }

  .icd-agent-slots {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
  }

  .icd-agent-slot {
    width: 38px;
    height: 38px;
    border: 1px solid var(--violet-dim);
    background: rgba(127, 119, 221, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-bright);
    font-family: var(--mono);
    font-size: 14px;
  }

  .icd-agent-slot.empty {
    border-style: dashed;
    color: var(--ink-faint);
    background: transparent;
  }

  .icd-agent-bay .more {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 8px;
    color: var(--ink-faint);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  /* The sealed engine box, central */
  .icd-engine {
    border: 1px solid var(--violet);
    background: linear-gradient(180deg, rgba(127, 119, 221, 0.08) 0%, rgba(127, 119, 221, 0.02) 100%);
    padding: 16px 18px 14px;
    box-shadow: 0 0 32px rgba(127, 119, 221, 0.1), inset 0 0 32px rgba(127, 119, 221, 0.04);
    position: relative;
    text-align: center;
  }

  .icd-engine::before, .icd-engine::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid var(--violet);
  }
  .icd-engine::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .icd-engine::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  .icd-engine .name {
    font-family: var(--display);
    font-size: 16px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .icd-engine .sub {
    font-family: var(--mono);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--violet-bright);
    margin-top: 1px;
    margin-bottom: 10px;
  }

  /* Tiny terrain inside the engine */
  .icd-engine-terrain {
    width: 100%;
    height: 36px;
    margin-top: 4px;
    opacity: 0.85;
  }

  .icd-engine-terrain svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .icd-engine-caption {
    margin-top: 6px;
    font-family: var(--display);
    font-style: italic;
    font-size: 10px;
    color: var(--violet-bright);
    line-height: 1.3;
  }

  /* ===== User surface column (right) ===== */
  .icd-user-surface {
    border: 1px dashed var(--line-bright);
    background: var(--bg);
    padding: 18px 14px;
    text-align: center;
    position: relative;
  }

  .icd-user-surface::after {
    content: 'BUILT BY PARTNER';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elev);
    padding: 0 8px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
  }

  .icd-user-surface .name {
    font-family: var(--display);
    font-style: italic;
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 12px;
  }

  .icd-surface-glyphs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .icd-surface-glyph {
    width: 26px;
    height: 22px;
    border: 1px solid var(--violet-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-bright);
    font-family: var(--mono);
    font-size: 10px;
  }

  .icd-user-surface .desc {
    font-family: var(--mono);
    font-size: 8.5px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }

  /* The diagram caption beneath everything */
  .icd-caption {
    text-align: center;
    margin-top: 32px;
  }

  .icd-caption .principle {
    font-family: var(--display);
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .icd-caption .principle .em-engine {
    color: var(--violet-bright);
    font-style: normal;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
  }

  .icd-caption .principle .em-ai {
    color: var(--orange);
    font-style: normal;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
  }

  .icd-caption .guarantees {
    font-family: var(--display);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-dim);
  }

  .icd-caption .guarantees .sep {
    color: var(--violet-dim);
    margin: 0 10px;
  }

  /* Inline guarantees section (no tabs) */
  .icd-guarantees-section {
    padding: 32px 36px;
    background: var(--bg-elev);
    border: 1px solid var(--line-bright);
  }

  .icd-guarantees-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px dotted var(--line);
  }

  .icd-guar-list {
    list-style: none;
    counter-reset: guar;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }

  .icd-guar-list li {
    counter-increment: guar;
    padding: 16px 0 16px 56px;
    position: relative;
    border-bottom: 1px dotted var(--line);
  }

  .icd-guar-list li:nth-last-child(-n+2):not(:nth-last-child(odd)) { border-bottom: none; }
  .icd-guar-list li:last-child { border-bottom: none; }

  .icd-guar-list li::before {
    content: counter(guar, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 16px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--violet);
    letter-spacing: 0.1em;
  }

  .icd-guar-list li strong {
    display: block;
    font-family: var(--display);
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    font-style: italic;
    margin-bottom: 4px;
  }

  .icd-guar-list li span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    line-height: 1.6;
  }

  .icd-network-note {
    margin-top: 28px;
    padding: 18px 24px;
    background: rgba(216, 90, 48, 0.05);
    border-left: 2px solid var(--orange);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.7;
  }

  .icd-network-note strong { color: var(--orange); font-weight: 500; }


  /* ===== SWARM SECTION ===== */
  .swarm-wrap { margin-top: 32px; }

  .swarm-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line-bright);
    margin-bottom: 0;
  }

  .swarm-tab {
    padding: 14px 28px;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faint);
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
  }
  .swarm-tab:hover { color: var(--ink-dim); }
  .swarm-tab.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
  }

  .swarm-panel {
    display: none;
    padding: 32px;
    background: var(--bg-elev);
    border: 1px solid var(--line-bright);
    border-top: none;
    min-height: 540px;
  }
  .swarm-panel.active { display: block; }

  /* SIM PANEL: replay viewer */
  .sim-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    margin-bottom: 28px;
  }

  .sim-block {
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 20px 24px;
  }

  .sim-block-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dotted var(--line);
  }

  .sim-state {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
  }

  .sim-state .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sim-state .field .k {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .sim-state .field .v {
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink);
    font-weight: 400;
  }

  .sim-state .field .v.mono {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
  }

  /* Band-colored values */
  .band-SOFT { color: var(--green); }
  .band-FORMING { color: #b0d97a; }
  .band-CONSTRAINED { color: #d9c570; }
  .band-HARDENED { color: var(--orange); }
  .band-LOCKED { color: #e84545; }

  /* Action-colored values */
  .action-CONTINUE_MISSION { color: var(--green); }
  .action-HOLD_POSITION { color: #d9c570; }
  .action-RETURN_TO_BASE { color: var(--orange); }

  /* Sensor DQR pills */
  .sim-sensors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }

  .sim-sensor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
  }

  .sim-sensor .name {
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .sim-sensor .status {
    font-weight: 500;
    letter-spacing: 0.05em;
  }

  .dqr-QUALIFIED { color: var(--green); }
  .dqr-PROVISIONAL { color: #d9c570; }
  .dqr-STALE { color: var(--orange); }
  .dqr-UNQUALIFIED { color: #e84545; }

  /* Battery bar */
  .sim-battery-wrap {
    margin-top: 8px;
  }

  .sim-battery-bar {
    height: 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }

  .sim-battery-fill {
    height: 100%;
    background: var(--green);
    transition: width 0.2s ease, background 0.2s ease;
  }
  .sim-battery-fill.med { background: #d9c570; }
  .sim-battery-fill.low { background: var(--orange); }
  .sim-battery-fill.crit { background: #e84545; }

  /* Mitigations row */
  .sim-mitigations {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dotted var(--line);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .sim-mitigations .pill {
    display: inline-block;
    padding: 3px 10px;
    margin-left: 8px;
    background: rgba(127, 119, 221, 0.1);
    border: 1px solid var(--violet-dim);
    color: var(--violet-bright);
    letter-spacing: 0.05em;
  }

  /* Timeline scrubber */
  .sim-timeline {
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 20px 24px;
  }

  .sim-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }

  .sim-play {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-bright);
    background: var(--bg-elev);
    color: var(--orange);
    font-family: var(--mono);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sim-play:hover { border-color: var(--orange); }

  .sim-tick-display {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    flex: 1;
  }

  .sim-tick-display strong { color: var(--orange); font-weight: 500; }

  .sim-speed-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .sim-speed {
    display: flex;
    gap: 4px;
  }

  .sim-speed button {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .sim-speed button.active {
    border-color: var(--orange);
    color: var(--orange);
  }

  .sim-track-wrap {
    position: relative;
    height: 56px;
  }

  /* The strip showing band/action over time */
  .sim-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    display: flex;
    overflow: hidden;
  }

  .sim-track-cell {
    flex: 1;
    height: 100%;
    position: relative;
  }

  /* Range slider */
  .sim-scrubber {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--line);
    outline: none;
  }

  .sim-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 20px;
    background: var(--orange);
    cursor: pointer;
    border: 1px solid var(--bg);
  }
  .sim-scrubber::-moz-range-thumb {
    width: 14px;
    height: 20px;
    background: var(--orange);
    cursor: pointer;
    border: 1px solid var(--bg);
  }

  .sim-track-legend {
    margin-top: 14px;
    display: flex;
    gap: 18px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .sim-track-legend .swatch {
    display: inline-block;
    width: 10px;
    height: 8px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .sim-jump {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dotted var(--line);
  }

  .sim-jump-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }

  .sim-jump-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .sim-jump-btn {
    padding: 6px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .sim-jump-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
  }

  /* NARRATIVE PANEL */
  .narr-intro {
    font-family: var(--display);
    font-size: 18px;
    font-style: italic;
    color: var(--ink-dim);
    line-height: 1.55;
    margin-bottom: 32px;
    max-width: 720px;
    border-left: 2px solid var(--orange);
    padding: 4px 0 4px 24px;
  }

  .narr-intro .src {
    display: block;
    margin-top: 12px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }

  .narr-beats {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .narr-beat {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 32px;
    padding: 24px 28px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-left: 2px solid var(--violet-dim);
    transition: all 0.2s;
  }

  .narr-beat:hover {
    border-left-color: var(--orange);
  }

  .narr-beat.critical {
    border-left-color: var(--orange);
  }

  .narr-tick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-right: 1px dotted var(--line);
    padding-right: 16px;
  }

  .narr-tick .label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
  }

  .narr-tick .num {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 300;
    color: var(--orange);
    line-height: 1;
    font-style: italic;
  }

  .narr-tick .meta {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.7;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .narr-tick .meta strong {
    display: block;
    color: var(--ink-dim);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-family: var(--display);
    font-style: italic;
    font-size: 11px;
  }

  .narr-body {
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 1.7;
  }

  .narr-body .title {
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink);
    font-weight: 400;
    margin-bottom: 10px;
    font-style: italic;
  }

  .narr-body p {
    margin-bottom: 10px;
  }

  .narr-body p:last-child { margin-bottom: 0; }

  .narr-body .term {
    color: var(--violet-bright);
    font-family: var(--mono);
    font-size: 11.5px;
    font-style: normal;
  }

  .narr-body .term-orange { color: var(--orange); }
  .narr-body .term-green { color: var(--green); }

  .narr-jump {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.15s;
  }
  .narr-jump:hover { color: var(--orange); }

  /* Inversion callout for thesis */
  .inversion-callout {
    grid-column: 1 / -1;
    margin-top: 48px;
    padding: 32px 40px;
    border-top: 1px solid var(--line-bright);
    border-bottom: 1px solid var(--line-bright);
    background: linear-gradient(180deg, rgba(127, 119, 221, 0.03) 0%, transparent 100%);
    text-align: center;
    position: relative;
  }

  .inversion-callout::before {
    content: 'AXIOM';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    padding: 0 16px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.25em;
    color: var(--orange);
  }

  .inversion-line {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ink);
    font-style: italic;
    max-width: 880px;
    margin: 0 auto;
  }

  .inversion-line .em-engine {
    color: var(--violet-bright);
    font-style: normal;
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .inversion-line .em-ai {
    color: var(--orange);
    font-style: normal;
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  /* ===== PROOF LANDING SECTIONS ===== */
  .proof-wrap {
    margin-top: 56px;
    max-width: 820px;
  }

  .proof-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 24px;
  }

  .proof-headline {
    font-family: var(--display);
    font-size: 42px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 32px;
    font-style: italic;
  }

  .proof-headline em {
    font-style: normal;
    color: var(--violet-bright);
  }

  .proof-body {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-dim);
    margin-bottom: 48px;
    max-width: 680px;
    border-left: 1px solid var(--line-bright);
    padding-left: 24px;
  }

  .proof-body p {
    margin-bottom: 14px;
  }
  .proof-body p:last-child { margin-bottom: 0; }

  .proof-launch {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 22px 36px;
    background: linear-gradient(180deg, rgba(127, 119, 221, 0.08) 0%, rgba(127, 119, 221, 0.02) 100%);
    border: 1px solid var(--violet);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--display);
    font-size: 18px;
    font-style: italic;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 0 32px rgba(127, 119, 221, 0.08), inset 0 0 32px rgba(127, 119, 221, 0.03);
  }

  .proof-launch:hover {
    background: linear-gradient(180deg, rgba(127, 119, 221, 0.14) 0%, rgba(127, 119, 221, 0.05) 100%);
    box-shadow: 0 0 48px rgba(127, 119, 221, 0.16), inset 0 0 32px rgba(127, 119, 221, 0.05);
  }

  .proof-launch::before, .proof-launch::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--violet);
  }
  .proof-launch::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .proof-launch::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  .proof-launch .arrow {
    font-family: var(--mono);
    font-size: 22px;
    color: var(--violet);
    font-style: normal;
    line-height: 1;
  }

  .proof-launch-meta {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* Green variant for section 3 */
  .proof-launch.green {
    background: linear-gradient(180deg, rgba(93, 202, 165, 0.08) 0%, rgba(93, 202, 165, 0.02) 100%);
    border-color: var(--green);
    box-shadow: 0 0 32px rgba(93, 202, 165, 0.08), inset 0 0 32px rgba(93, 202, 165, 0.03);
  }

  .proof-launch.green:hover {
    background: linear-gradient(180deg, rgba(93, 202, 165, 0.14) 0%, rgba(93, 202, 165, 0.05) 100%);
    box-shadow: 0 0 48px rgba(93, 202, 165, 0.16), inset 0 0 32px rgba(93, 202, 165, 0.05);
  }

  .proof-launch.green::before, .proof-launch.green::after {
    border-color: var(--green);
  }

  .proof-launch.green .arrow {
    color: var(--green);
  }

  .proof-headline.green em {
    color: var(--green);
  }

  /* ===== CONTACT CARD ===== */
  .contact-wrap {
    min-height: calc(100vh - 56px - 144px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 720px;
  }

  .contact-mark {
    font-family: var(--display);
    font-size: 14px;
    font-style: italic;
    color: var(--violet-bright);
    letter-spacing: 0.02em;
    margin-bottom: 40px;
  }

  .contact-name {
    font-family: var(--display);
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 12px;
  }

  .contact-role {
    font-family: var(--display);
    font-size: 18px;
    font-style: italic;
    color: var(--ink-dim);
    margin-bottom: 56px;
  }

  .contact-lines {
    border-top: 1px solid var(--line-bright);
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .contact-line {
    display: flex;
    align-items: baseline;
    gap: 24px;
    font-family: var(--mono);
    font-size: 13px;
  }

  .contact-line .k {
    min-width: 80px;
    color: var(--ink-faint);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }

  .contact-line .v {
    color: var(--ink);
  }

  .contact-line .v a {
    color: var(--violet-bright);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
  }

  .contact-line .v a:hover {
    border-bottom-color: var(--violet-bright);
  }

  .nav-controls {
    position: fixed;
    bottom: 32px;
    right: 48px;
    display: flex;
    gap: 8px;
    z-index: 50;
  }
  .nav-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-bright);
    background: var(--bg-elev);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .nav-btn:hover { border-color: var(--violet); color: var(--violet); }
  .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  .progress {
    display: flex;
    gap: 6px;
    margin-left: 48px;
  }
  .progress .pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-bright);
    transition: all 0.2s;
  }
  .progress .pip.active {
    background: var(--violet);
    transform: scale(1.3);
  }
  .progress .pip.visited { background: var(--violet-dim); }

  .model-btn.active { border-color: var(--orange) !important; color: var(--orange) !important; }
  .model-btn:hover { border-color: var(--line-bright) !important; color: var(--ink-dim) !important; }
  #replay-export:hover, #replay-import:hover { border-color: var(--violet) !important; color: var(--violet) !important; }

  /* ===== C-UAS OPERATOR VIEW (§06 v3) ===== */
  .cuas-beat-indicator { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.08em; }
  .cuas-beat-indicator strong { color: var(--orange); font-weight: 500; }

  .cuas-wrap { margin-top: 32px; }

  /* Header strip */
  .cuas-header-strip {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1.2fr 0.8fr;
    gap: 0;
    background: var(--bg-elev);
    border: 1px solid var(--line-bright);
    margin-bottom: 16px;
  }
  .cuas-hs-cell {
    padding: 14px 20px;
    border-right: 1px solid var(--line);
  }
  .cuas-hs-cell:last-child { border-right: none; }
  .cuas-hs-cell-right { text-align: right; }
  .cuas-hs-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
  }
  .cuas-hs-value {
    font-family: var(--display);
    font-size: 14px;
    color: var(--ink);
    font-weight: 400;
  }

  /* Playback controls */
  .cuas-playback {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-top: none;
    margin-bottom: 16px;
  }
  .cuas-pb-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-bright);
    background: var(--bg);
    color: var(--orange);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .cuas-pb-btn:hover { border-color: var(--orange); }
  .cuas-pb-status { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); flex: 1; }
  .cuas-pb-status strong { color: var(--orange); font-weight: 500; }
  .cuas-pb-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .cuas-pb-speed, .cuas-pb-jump { display: flex; gap: 4px; }
  .cuas-pb-speed button, .cuas-pb-jump button {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .cuas-pb-speed button.active, .cuas-pb-jump button.active {
    border-color: var(--orange);
    color: var(--orange);
  }
  .cuas-pb-speed button:hover, .cuas-pb-jump button:hover {
    color: var(--ink-dim);
    border-color: var(--line-bright);
  }
  .cuas-pb-jump { margin-left: 12px; }

  /* Six-zone grid */
  .cuas-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 16px;
    margin-bottom: 16px;
  }
  .cuas-col { display: flex; flex-direction: column; gap: 16px; }

  /* Generic card */
  .cuas-card {
    background: var(--bg-elev);
    border: 1px solid var(--line-bright);
    padding: 18px 20px;
  }
  .cuas-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dotted var(--line);
  }
  .cuas-card-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* Drone select */
  .cuas-drone-select {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
  }

  /* Drone cards */
  .cuas-drone {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: all 0.3s;
  }
  .cuas-drone:last-child { margin-bottom: 0; }
  .cuas-drone.expanded { padding: 14px 16px; }
  .cuas-drone.compromised {
    border-color: var(--orange);
    background: rgba(216, 90, 48, 0.06);
  }
  .cuas-drone-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .cuas-drone-name {
    font-family: var(--display);
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 2px;
  }
  .cuas-drone.compromised .cuas-drone-name { color: var(--orange); }
  .cuas-drone-badge {
    padding: 2px 6px;
    font-family: var(--mono);
    font-size: 7.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid;
    flex-shrink: 0;
    line-height: 1.4;
  }
  .cuas-badge-lead {
    background: rgba(232, 69, 69, 0.18);
    color: #e84545;
    border-color: #e84545;
  }
  .cuas-badge-transferring {
    background: rgba(217, 197, 112, 0.15);
    color: #d9c570;
    border-color: #d9c570;
    animation: cuasBadgePulse 1.4s ease-in-out infinite;
  }
  .cuas-badge-receiving {
    background: rgba(93, 202, 165, 0.15);
    color: var(--green);
    border-color: var(--green);
    animation: cuasBadgePulse 1.4s ease-in-out infinite;
  }
  @keyframes cuasBadgePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }
  .cuas-drone-vitals {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    margin-top: 8px;
  }

  /* Mini layer bar (compact + expanded) */
  .cuas-mini-layer-row {
    display: grid;
    grid-template-columns: 16px 1fr 86px;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 9px;
    overflow: hidden;
  }
  .cuas-mini-layer-label {
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cuas-mini-layer-bar {
    display: block;
    height: 4px;
    background: var(--bg-elev-2);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    min-width: 0;
  }
  .cuas-mini-layer-fill {
    display: block;
    height: 100%;
    transition: width 0.4s ease;
  }
  .cuas-mini-layer-meta {
    font-size: 9px;
    color: var(--ink-dim);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Compact drone single-row strip */
  .cuas-drone-strip {
    display: flex;
    gap: 3px;
    margin-top: 8px;
    height: 4px;
  }
  .cuas-drone-strip-cell {
    flex: 1;
  }

  /* Threats list */
  .cuas-threat {
    padding: 10px 0;
    border-bottom: 1px dotted var(--line);
    font-family: var(--mono);
    font-size: 10px;
  }
  .cuas-threat:last-child { border-bottom: none; }
  .cuas-threat-row1 {
    display: flex;
    justify-content: space-between;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .cuas-threat-row2 { color: var(--ink-faint); font-size: 9px; letter-spacing: 0.04em; }
  .cuas-threat-range.elevated { color: var(--orange); font-weight: 500; }

  /* Action card */
  .cuas-action-card { border-color: var(--line-bright); }
  .cuas-action-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
  }
  .cuas-action-countdown {
    font-family: var(--mono);
    font-size: 11px;
    color: #e84545;
    letter-spacing: 0.04em;
    font-weight: 500;
  }
  .cuas-action-primary {
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .cuas-action-reason {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .cuas-action-watching {
    padding-top: 12px;
    border-top: 1px dotted var(--line);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
  }

  /* FI strip */
  .cuas-fi-strip {
    display: flex;
    gap: 18px;
    align-items: center;
    background: rgba(216, 90, 48, 0.04);
    border: 1px solid var(--line);
    padding: 14px 18px;
    margin-bottom: 16px;
  }
  .cuas-fi-text { flex: 1; }
  .cuas-fi-line1 {
    font-family: var(--display);
    font-size: 14px;
    color: var(--ink);
    font-weight: 400;
  }
  .cuas-fi-line2 {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  .cuas-fi-line2.elevated { color: #e84545; font-weight: 500; }

  /* Landscape bars */
  .cuas-layer-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--line);
  }
  .cuas-layer-row:last-child { border-bottom: none; }
  .cuas-layer-row-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
  }
  .cuas-layer-row-meta .layer-label { letter-spacing: 0.04em; }
  .cuas-layer-row.elevated .cuas-layer-row-meta { color: var(--ink); }
  .cuas-layer-row.elevated .cuas-layer-row-meta .layer-label { font-weight: 500; }
  .cuas-layer-row .layer-meta-right { font-size: 10px; }
  .cuas-layer-bar-wrap {
    height: 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  .cuas-layer-bar-fill {
    height: 100%;
    transition: width 0.5s ease, background 0.5s ease;
  }

  /* Color helpers (band) */
  .cuas-band-SOFT { color: var(--green); }
  .cuas-band-FORMING { color: #b0d97a; }
  .cuas-band-CONSTRAINED { color: #d9c570; }
  .cuas-band-HARDENED { color: var(--orange); }
  .cuas-band-LOCKED { color: #e84545; }
  .cuas-fill-SOFT { background: var(--green); }
  .cuas-fill-FORMING { background: #b0d97a; }
  .cuas-fill-CONSTRAINED { background: #d9c570; }
  .cuas-fill-HARDENED { background: var(--orange); }
  .cuas-fill-LOCKED { background: #e84545; }

  /* Drone decisions */
  .cuas-decision {
    padding: 8px 0;
    border-bottom: 1px dotted var(--line);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
  }
  .cuas-decision:last-child { border-bottom: none; }
  .cuas-decision-tick {
    color: var(--ink-faint);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
  }
  .cuas-decision.highlight { color: var(--ink); font-weight: 500; }

  /* Commit options */
  .cuas-commit {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    cursor: pointer;
    transition: all 0.15s;
  }
  .cuas-commit:hover { border-color: var(--line-bright); }
  .cuas-commit:last-child { margin-bottom: 0; }
  .cuas-commit.selected {
    border-width: 2px;
    border-color: var(--line-bright);
    color: var(--ink);
    font-weight: 500;
    padding: 9px 13px;
  }
  .cuas-commit-ru {
    font-size: 9px;
    letter-spacing: 0.04em;
    margin-left: 8px;
  }

  /* Ask the Landscape */
  .cuas-ask-card { padding: 22px 24px; }
  .cuas-ask-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
  }
  .cuas-ask-left { padding-right: 24px; }
  .cuas-ask-right {
    padding-left: 24px;
    border-left: 1px solid var(--line);
    min-height: 180px;
  }
  .cuas-q-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: all 0.15s;
  }
  .cuas-q-btn:hover { border-color: var(--violet); color: var(--violet-bright); }
  .cuas-q-btn.firing { border-color: var(--violet); background: rgba(127, 119, 221, 0.08); color: var(--violet-bright); }

  .cuas-stream-line {
    padding: 6px 0;
    border-bottom: 1px dotted var(--line);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    line-height: 1.55;
    animation: cuasStreamIn 0.3s ease;
  }
  .cuas-stream-line:last-child { border-bottom: none; }
  .cuas-stream-line .tick {
    color: var(--ink-faint);
    font-size: 10px;
    margin-right: 12px;
    letter-spacing: 0.04em;
  }
  .cuas-stream-line.whatif { color: var(--violet-bright); }
  .cuas-stream-line.restored { color: var(--green); font-style: italic; }
  @keyframes cuasStreamIn {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .cuas-stream-mode {
    margin-left: 8px;
    color: var(--violet);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  /* Lead transfer flash */
  @keyframes cuasLeadFlash {
    0% { background: var(--bg); }
    30% { background: rgba(217, 197, 112, 0.25); }
    100% { background: var(--bg); }
  }
  .cuas-drone.flash { animation: cuasLeadFlash 1.4s ease; }

  /* ============================================================ */
  /* MOBILE NAV TOGGLE BUTTON                                     */
  /* ============================================================ */
  .mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 10px 12px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
  }
  .mobile-nav-toggle:hover { background: var(--bg-elev-2); }
  .sidenav-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 90;
  }

  /* ============================================================ */
  /* RESPONSIVE — TABLET (1024px and below)                       */
  /* ============================================================ */
  @media (max-width: 1024px) {
    .topbar-meta { display: none; }
    .section { padding: 56px 48px 64px; }
    .cold-open { padding: 0 48px; }
    .co-title { font-size: 96px !important; }
  }

  /* ============================================================ */
  /* RESPONSIVE — MOBILE (768px and below)                        */
  /* ============================================================ */
  @media (max-width: 768px) {
    /* Show hamburger toggle */
    .mobile-nav-toggle { display: block; }

    /* Topbar adjustments */
    .topbar {
      padding: 0 16px 0 60px;
      height: 56px;
    }
    .topbar-brand { font-size: 16px; }
    .progress { display: none; }

    /* Sidebar becomes off-canvas overlay */
    .sidenav {
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      width: 280px;
      z-index: 100;
      box-shadow: 4px 0 20px rgba(0,0,0,0.4);
    }
    .sidenav.open { transform: translateX(0); }
    .sidenav-overlay.visible { display: block; }

    /* Main content takes full width */
    main { margin-left: 0; }

    /* Section padding tightens for narrow screens */
    .section {
      padding: 40px 20px 56px;
      max-width: 100%;
    }

    /* Cold open shrinks */
    .cold-open {
      padding: 0 20px;
      min-height: calc(100vh - 56px);
    }
    .co-title { font-size: 64px !important; line-height: 0.95 !important; }
    .co-tagline { font-size: 16px !important; line-height: 1.5 !important; }
    .co-eyebrow { font-size: 10px !important; margin-bottom: 20px !important; }
    .co-narrative-strip { margin-top: 20px !important; }
    .co-narrative-strip p { font-size: 11px !important; }
    .co-capabilities { gap: 8px !important; flex-wrap: wrap !important; margin-top: 24px !important; }
    .co-cap { font-size: 10px !important; padding: 8px 12px !important; }
    .co-meta { gap: 16px !important; flex-wrap: wrap !important; margin-top: 24px !important; }
    .co-meta-item { font-size: 10px !important; }
    .co-meta-item strong { font-size: 12px !important; }

    /* Section headers */
    .section-header {
      flex-wrap: wrap;
      gap: 8px;
      font-size: 9px;
    }
    .section-header > span:nth-child(4) { display: none; }

    /* Section H1s shrink */
    .section h1 {
      font-size: 32px !important;
      line-height: 1.1 !important;
      margin-bottom: 16px !important;
    }
    .section p {
      font-size: 14px !important;
    }

    /* Two-column grids collapse to single column */
    [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
    [style*="grid-column: span 2"] {
      grid-column: span 1 !important;
    }

    /* Engine guarantees list */
    .icd-guar-list {
      grid-template-columns: 1fr !important;
    }

    /* ICD architecture diagram needs horizontal scroll on mobile */
    .icd-diagram {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .icd-architecture {
      min-width: 800px;
    }

    /* Terrain Network diagram likewise */
    .tn-diagram, .tn-architecture {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .tn-architecture, .tn-nodes {
      min-width: 700px;
    }

    /* Form fields stack on mobile */
    #demo-form [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }

    /* Footer stacks */
    [style*="display: flex; justify-content: space-between"] {
      flex-direction: column !important;
      gap: 16px !important;
    }
    [style*="text-align: right"] {
      text-align: left !important;
    }

    /* Contact name shrinks */
    .contact-name { font-size: 36px !important; }
  }

  /* ============================================================ */
  /* RESPONSIVE — SMALL MOBILE (480px and below)                  */
  /* ============================================================ */
  @media (max-width: 480px) {
    .co-title { font-size: 52px !important; }
    .section h1 { font-size: 26px !important; }
    .contact-name { font-size: 28px !important; }
    .section { padding: 32px 16px 48px; }
    .cold-open { padding: 0 16px; }
  }
  /* ============================================================ */
  /* TOP NAVIGATION (multi-page)                                  */
  /* ============================================================ */
  .topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    font-family: var(--mono);
  }
  .topnav-brand {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .topnav-brand .dot {
    color: var(--violet);
    margin: 0 6px;
  }
  .topnav-links {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .topnav-link {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
    text-decoration: none;
    letter-spacing: 0.05em;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .topnav-link:hover {
    color: var(--ink);
  }
  .topnav-link.active {
    color: var(--ink);
    border-bottom-color: var(--violet);
  }

  /* Adjust main margin on subpages (no sidebar) */
  .has-topnav-only main {
    margin-left: 0;
    margin-top: 56px;
  }
  .has-topnav-only .section {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* On homepage, topnav stays plus sidebar */
  .has-sidebar main {
    margin-left: 240px;
    margin-top: 56px;
  }

  /* On mobile, even has-sidebar should not push main right (sidebar becomes overlay) */
  @media (max-width: 768px) {
    .has-sidebar main {
      margin-left: 0;
    }
  }

  /* Page footer (used on subpages) */
  .page-footer {
    border-top: 1px solid var(--line);
    padding: 48px 32px;
    margin-top: 64px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    line-height: 1.6;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .page-footer a {
    color: var(--violet);
    text-decoration: none;
  }

  /* Mobile adjustments for topnav */
  @media (max-width: 900px) {
    /* Top nav adjustments at medium screens */
    .topnav {
      padding: 0 16px;
    }
    .topnav-brand .tagline {
      display: none;
    }
    .topnav-links {
      gap: 18px;
    }
    .topnav-link {
      font-size: 11px;
      letter-spacing: 0.04em;
    }
  }

  @media (max-width: 768px) {
    /* On homepage, leave room for hamburger button on left */
    .has-sidebar .topnav {
      padding: 0 12px 0 60px;
    }
    .has-topnav-only .topnav {
      padding: 0 8px 0 16px;
    }
    .topnav {
      height: 56px;
    }
    .topnav-brand {
      font-size: 13px;
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Hide nav links on subpages, show menu button instead */
    .has-topnav-only .topnav-links {
      display: none;
    }
    .has-topnav-only .topnav-menu-toggle {
      display: flex;
    }

    /* On homepage mobile, hide topnav links — sidebar hamburger handles all nav */
    .has-sidebar .topnav-links {
      display: none;
    }

    .has-topnav-only .section {
      padding: 40px 20px 56px;
    }
    .page-footer {
      flex-direction: column;
      gap: 16px;
      padding: 32px 20px;
    }
  }

  /* Topnav menu toggle button (subpages only on mobile) */
  .topnav-menu-toggle {
    display: none;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
  }
  .topnav-menu-toggle:hover {
    background: var(--bg);
  }

  /* Topnav dropdown menu (subpages on mobile when open) */
  .topnav-mobile-menu {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    z-index: 99;
    padding: 12px 0;
  }
  .topnav-mobile-menu.open {
    display: block;
  }
  .topnav-mobile-menu a {
    display: block;
    padding: 14px 24px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-dim);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line);
  }
  .topnav-mobile-menu a:last-child {
    border-bottom: none;
  }
  .topnav-mobile-menu a:hover,
  .topnav-mobile-menu a.active {
    color: var(--ink);
    background: var(--bg);
  }
  .topnav-mobile-menu a.active {
    border-left: 3px solid var(--violet);
    padding-left: 21px;
  }

  @media (max-width: 480px) {
    .topnav {
      padding: 0 8px 0 56px;
    }
    .topnav-brand {
      font-size: 13px;
    }
    .topnav-links {
      gap: 10px;
    }
    .topnav-link {
      font-size: 9px;
    }
  }

  /* ============================================================ */
  /* EQUATION SECTION RESPONSIVE                                  */
  /* ============================================================ */
  @media (max-width: 1100px) {
    .equation-container {
      gap: 16px !important;
    }
    .equation-container .input-card {
      width: 130px !important;
      font-size: 13px !important;
      padding: 9px 14px !important;
    }
    .equation-container .eq-op {
      font-size: 32px !important;
    }
  }

  @media (max-width: 880px) {
    .equation-container {
      flex-direction: column !important;
      gap: 24px !important;
      align-items: center !important;
    }
    .equation-container .eq-op {
      font-size: 36px !important;
      line-height: 1 !important;
      margin: 4px 0 !important;
    }
    .equation-container .input-card {
      width: 200px !important;
    }
    .equation-container .piecewise > div:first-child {
      height: 156px !important;
    }
  }

  /* Sidebar cross-page links (homepage) */
  .sidenav-pages {
    padding: 0 28px;
  }
  .sidenav-page-link {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
    text-decoration: none;
    padding: 8px 0;
    letter-spacing: 0.04em;
    border-bottom: 1px solid transparent;
    transition: color 0.15s;
  }
  .sidenav-page-link:hover {
    color: var(--ink);
  }

  /* Hide sidebar Pages section on desktop (topnav handles cross-page nav).
     Only show on mobile when sidebar opens. */
  @media (min-width: 769px) {
    .sidenav-pages {
      display: none;
    }
  }