@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url("fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/IBMPlexSans-Medium.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");}

    :root {
      color-scheme: dark;
      --black: #000000;
      --near-black: #000000;
      --panel: #000000;
      --panel-raised: #000000;
      --panel-soft: #000000;
      --white: #f4f6f8;
      --gray: #b4bdc8;
      --muted: #949eac;
      --line: #282f37;
      --line-soft: #1b2027;
      --blue: #2878ff;
      --blue-action: #1769f3;
      --blue-action-hover: #0f5fe0;
      --blue-dark: #0b49b6;
      --paper: #000000;
      --paper-ink: #edf0f4;
      --healthy: #77ca98;
      --pending: #e1b866;
      --failed: #e58c8c;
      --max: 1480px;
      --gutter: clamp(22px, 4.5vw, 72px);
      --gap: clamp(18px, 2vw, 30px);
      --section-lg: clamp(80px, 7.5vw, 116px);
      --section-md: clamp(64px, 6vw, 92px);
      --section-sm: clamp(52px, 4.8vw, 72px);
      --sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --ui-ease: cubic-bezier(.2, .8, .2, 1);
      --fast: 180ms;
      --normal: 220ms;
      --editorial: 360ms;
    }

    * { box-sizing: border-box; }
    html { background: var(--black); scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--black);
      color: var(--white);
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.5;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    body.nav-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input { color: inherit; font: inherit; }
    button, a, summary { -webkit-tap-highlight-color: transparent; }
    button { border-radius: 0; }
    img, svg { display: block; max-width: 100%; }
    [hidden] { display: none !important; }
    ::selection { background: var(--blue); color: white; }
    :focus-visible { outline: 2px solid white; outline-offset: 4px; }
    section[id] { scroll-margin-top: 134px; }

    .skip-link {
      position: fixed;
      z-index: 1000;
      top: 12px;
      left: 12px;
      padding: 11px 15px;
      background: white;
      color: black;
      transform: translateY(-180%);
      transition: transform var(--fast) ease;
    }
    .skip-link:focus { transform: translateY(0); }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .shell {
      width: 100%;
      max-width: var(--max);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }
    .grid-12 {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--gap);
    }
    .display {
      margin: 0;
      font-size: clamp(58px, 6vw, 96px);
      font-weight: 500;
      letter-spacing: -.052em;
      line-height: 1.04;
    }
    .peak-title {
      margin: 0;
      max-width: 20ch;
      font-size: clamp(44px, 5.4vw, 82px);
      font-weight: 500;
      letter-spacing: -.045em;
      line-height: 1.07;
    }
    .major-title {
      margin: 0;
      max-width: 20ch;
      font-size: clamp(34px, 3.8vw, 58px);
      font-weight: 500;
      letter-spacing: -.04em;
      line-height: 1.12;
    }
    .editorial-title {
      margin: 0;
      max-width: 24ch;
      font-size: clamp(30px, 3vw, 44px);
      font-weight: 500;
      letter-spacing: -.045em;
      line-height: 1.13;
    }
    .lede {
      margin: 0;
      max-width: 34em;
      color: var(--gray);
      font-size: clamp(17px, 1.35vw, 20px);
      line-height: 1.7;
    }
    .body-copy {
      margin: 0;
      max-width: 44em;
      color: var(--gray);
      font-size: 16px;
      line-height: 1.7;
    }
    .eyebrow {
      margin: 0 0 24px;
      color: var(--gray);
      font-size: 14px;
      font-weight: 680;
    }
    .functional-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .machine {
      font-family: var(--mono);
      font-size: 12px;
    }
    .accent { color: var(--blue); }
    .button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 11px;
      padding: 14px 20px;
      border: 1px solid var(--blue-action);
      background: var(--blue-action);
      color: white;
      cursor: pointer;
      font-size: 15px;
      font-weight: 730;
      transition: background-color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease);
    }
    .button:hover { background: var(--blue-action-hover); border-color: var(--blue-action-hover); transform: translateY(-1px); }
    .button.secondary { border-color: #3a424c; background: transparent; }
    .button.secondary:hover { border-color: white; background: transparent; }
    .button.light { border-color: white; background: white; color: black; }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      font-size: 15px;
      font-weight: 700;
    }
    .text-link .arrow { transition: transform var(--fast) var(--ease); }
    .text-link:hover .arrow { transform: translate(4px, -1px); }
    .state {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--healthy);
      font-size: 12px;
      font-weight: 690;
    }
    .state::before {
      content: "";
      width: 7px;
      height: 7px;
      background: currentColor;
    }
    .state.pending { color: var(--pending); }
    .state.failed { color: var(--failed); }
    .sample-note {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #89929d;
      font-size: 12px;
    }
    .sample-note::before {
      content: "";
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
    }

    /* Header and navigation */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      height: 78px;
      background: #000;
      border-bottom: 1px solid transparent;
      transition: height var(--normal) var(--ease), border-color var(--normal) ease;
    }
    .site-header.is-compact { height: 78px; border-bottom-color: #2b3038; }
    .nav-shell {
      height: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 38px;
    }
    .wordmark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .wordmark::before {
      content: "";
      width: 9px;
      height: 9px;
      background: var(--blue);
    }
    .nav-logo-link {
      position: relative;
      width: 151px;
      height: 30px;
      display: block;
      overflow: hidden;
      flex: 0 0 auto;
    }
    .nav-logo-link img {
      position: absolute;
      top: -35.5px;
      left: -18px;
      width: 182px;
      max-width: none;
      height: 102.375px;
      object-fit: contain;
    }
    .desktop-nav { display: flex; align-items: stretch; justify-content: center; height: 100%; }
    .nav-trigger {
      position: relative;
      height: 100%;
      padding: 0 16px;
      border: 0;
      background: transparent;
      color: #b3bac3;
      cursor: pointer;
      font-size: 14px;
      font-weight: 630;
    }
    .nav-trigger::after {
      content: "";
      position: absolute;
      right: 16px;
      bottom: 14px;
      left: 16px;
      height: 2px;
      background: var(--blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--normal) var(--ease);
    }
    .nav-trigger:hover,
    .nav-trigger[aria-expanded="true"] { color: white; }
    .nav-trigger:hover::after,
    .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
    .nav-actions { display: flex; align-items: center; gap: 20px; }
    .nav-login { color: var(--gray); font-size: 14px; font-weight: 650; }
    .nav-login:hover { color: white; }
    .nav-demo {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      padding: 10px 15px;
      background: var(--blue-action);
      color: white;
      font-size: 13px;
      font-weight: 760;
      transition: background-color var(--fast) ease, transform var(--fast) var(--ease);
    }
    .nav-demo:hover { background: var(--blue-action-hover); transform: translateY(-1px); }
    .mobile-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid #252525;
      background: #070707;
      cursor: pointer;
    }
    .menu-glyph { position: relative; display: block; width: 19px; height: 14px; margin: auto; }
    .menu-glyph::before,
    .menu-glyph::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: currentColor;
      transition: transform var(--fast) ease, top var(--fast) ease;
    }
    .menu-glyph::before { top: 2px; }
    .menu-glyph::after { top: 10px; }
    .mobile-toggle[aria-expanded="true"] .menu-glyph::before { top: 6px; transform: rotate(45deg); }
    .mobile-toggle[aria-expanded="true"] .menu-glyph::after { top: 6px; transform: rotate(-45deg); }
    .mega-wrap {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background: #050505;
      border-top: 1px solid #181818;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-10px);
      transition: opacity var(--normal) ease, transform var(--normal) var(--ease), visibility 0s var(--normal);
    }
    .mega-wrap.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0s;
    }
    .mega-panel { min-height: 328px; padding-block: 54px 62px; }
    .mega-intro { grid-column: 1 / span 4; }
    .mega-intro h2 {
      margin: 0;
      max-width: 10ch;
      font-size: clamp(34px, 3vw, 48px);
      font-weight: 545;
      letter-spacing: -.045em;
      line-height: 1;
    }
    .mega-intro p { max-width: 28em; margin: 22px 0 0; color: var(--gray); font-size: 15px; }
    .mega-groups {
      grid-column: 6 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap);
    }
    .mega-group {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity var(--normal) ease, transform var(--normal) var(--ease);
    }
    .mega-wrap.is-open .mega-group { opacity: 1; transform: translateY(0); }
    .mega-wrap.is-open .mega-group:nth-child(2) { transition-delay: 40ms; }
    .mega-wrap.is-open .mega-group:nth-child(3) { transition-delay: 80ms; }
    .mega-label { margin-bottom: 17px; color: var(--muted); font-size: 13px; font-weight: 680; }
    .mega-link { display: block; padding: 7px 0; font-size: 16px; font-weight: 570; }
    .mega-link:hover { color: var(--blue); }
    .mega-link small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 450; }
    .mobile-drawer {
      position: fixed;
      inset: 78px 0 0;
      overflow-y: auto;
      background: var(--black);
      padding: 26px var(--gutter) 54px;
    }
    .mobile-group { border-bottom: 1px solid #1d1d1d; }
    .mobile-group summary {
      min-height: 64px;
      cursor: pointer;
      padding: 18px 0;
      font-size: 21px;
      font-weight: 580;
      list-style: none;
    }
    .mobile-group summary::-webkit-details-marker { display: none; }
    .mobile-group summary::after { content: "+"; float: right; color: var(--blue); }
    .mobile-group[open] summary::after { content: "−"; }
    .mobile-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 0 0 22px; }
    .mobile-links a { min-height: 42px; padding: 8px 0; color: var(--gray); font-size: 15px; }
    .mobile-actions { display: flex; gap: 16px; align-items: center; margin-top: 34px; }
    .section-nav {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 44px;
      overflow: hidden;
      background: #020202;
      border-top: 1px solid #111;
      border-bottom: 1px solid #1b1b1b;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity var(--normal) ease, transform var(--normal) var(--ease), visibility 0s var(--normal);
    }
    .section-nav.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0s;
    }
    .site-header.is-menu-open .section-nav { opacity: 0; visibility: hidden; pointer-events: none; }
    .section-nav-scroll {
      height: 100%;
      display: flex;
      align-items: stretch;
      gap: clamp(18px, 2.4vw, 38px);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .section-nav-scroll::-webkit-scrollbar { display: none; }
    .section-nav a {
      position: relative;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      color: #a0aab8;
      font-size: 12px;
      font-weight: 660;
      white-space: nowrap;
    }
    .section-nav a::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: var(--blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--normal) var(--ease);
    }
    .section-nav a:hover,
    .section-nav a[aria-current="location"] { color: white; }
    .section-nav a[aria-current="location"]::after { transform: scaleX(1); }

    /* Peak 1: Hero */
    .hero {
      position: relative;
      min-height: auto;
      padding-block: clamp(54px, 5.6vw, 88px) 0;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-main {
      position: relative;
      z-index: 3;
      grid-column: 1 / span 7;
      transform: none;
    }
    .hero-category {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 34px;
      color: #b8bec6;
      font-size: 14px;
      font-weight: 690;
    }
    .hero-category::before { content: ""; width: 38px; height: 2px; background: var(--blue); }
    .hero-main .display { max-width: none; }
    .line-mask { display: block; overflow: visible; padding-bottom: .045em; }
    .line-mask > span { display: block; }
    .hero-copy { position: relative; z-index: 3; grid-column: 9 / -1; align-self: center; padding-bottom: 12px; }
    .hero-copy .lede { margin-bottom: 32px; }
    .hero-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }
    .hero-topology {
      --topology-opacity: .34;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 0;
      width: min(70vw, 1080px);
      height: 620px;
      overflow: visible;
      opacity: var(--topology-opacity);
      pointer-events: none;
      transform: none;
    }
    .hero-topology .topology-plane { fill: #050608; stroke: #181c21; stroke-width: 1; }
    .hero-topology .topology-plane.is-near { fill: #080a0d; stroke: #242a31; }
    .hero-topology .topology-grid,
    .hero-topology .topology-branch { fill: none; stroke: #2d333b; stroke-width: 1; vector-effect: non-scaling-stroke; }
    .hero-topology .topology-grid { opacity: .62; }
    .hero-topology .topology-branch { opacity: .38; }
    .hero-topology .topology-authority {
      fill: none;
      stroke: var(--blue);
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
    }
    .hero-topology .topology-evidence {
      fill: none;
      stroke: #6d7680;
      stroke-width: 1;
      stroke-dasharray: 5 7;
      opacity: .48;
      vector-effect: non-scaling-stroke;
    }
    .hero-topology .topology-junction { fill: #090c10; stroke: #4c5661; stroke-width: 1; vector-effect: non-scaling-stroke; }
    .hero-topology .topology-junction.is-active { fill: var(--blue); stroke: var(--blue); }
    .hero-system-wrap {
      position: relative;
      z-index: 4;
      grid-column: 1 / -1;
      margin: 44px 0 0;
      transform: none;
      opacity: 1;
    }
    .hero-system {
      position: relative;
      overflow: hidden;
      border-top: 0;
      border-bottom: 0;
      background: transparent;
      isolation: isolate;
    }
    .hero-console {
      position: relative;
      display: flex;
      flex-direction: column;
      margin: 0;
      border: 1px solid #323943;
      background: rgba(8,11,15,.96);
      box-shadow: none;
    }
    .hero-console-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 56px;
      padding: 15px 22px;
      border-bottom: 1px solid var(--line);
      background: #0d1117;
    }
    .hero-console-head strong { font-size: 13px; letter-spacing: .02em; }
    .hero-console-head span { color: #89929c; }
    .hero-map {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      padding: 0;
      border-bottom: 1px solid var(--line);
      background: #090d12;
    }
    .hero-map::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 50%;
      height: 2px;
      background: var(--blue);
    }
    .hero-node {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 24px 22px 20px;
      border-right: 1px solid #252c34;
      background: transparent;
    }
    .hero-node:last-child { border-right: 0; }
    .hero-node:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -4px;
      z-index: 3;
      width: 7px;
      height: 7px;
      border: 1px solid #5d6874;
      background: #090d12;
      transform: translateY(-50%);
    }
    .hero-node.is-authority:not(:last-child)::after { border-color: var(--blue); background: var(--blue); }
    .hero-node small { display: block; color: #a0aab8; font: 12px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .hero-node strong { display: block; margin-top: 17px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 560; letter-spacing: -.035em; }
    .hero-node p { max-width: 18em; margin: 14px 0 18px; color: #929ba6; font-size: 14px; 
      line-height: 1.65;}
    .hero-node-state { position: static; margin-top: auto; padding-top: 16px; border-top: 1px solid #252c34; }
    .hero-node-state .state { font-family: var(--mono); font-size: 12px; }
    .hero-operation {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      background: #0b0f14;
    }
    .hero-operation div { min-height: 72px; padding: 16px 18px; border-right: 1px solid var(--line); }
    .hero-operation div:last-child { border-right: 0; }
    .hero-operation span { display: block; color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .hero-operation strong { display: block; min-width: 0; margin-top: 8px; overflow-wrap: anywhere; font: 550 12px/1.35 var(--mono); }
    .hero-caption { margin: 14px 0 0; color: var(--muted); font-size: 12px; }

    /* Quiet problem framing */
    .problem {
      padding-block: var(--section-md);
      background: var(--near-black);
    }
    .problem-title { grid-column: 1 / span 6; }
    .problem-copy { grid-column: 8 / -1; align-self: end; }
    .fragmentation {
      grid-column: 1 / -1;
      margin-top: clamp(48px, 5vw, 72px);
      border-top: 1px solid var(--line);
    }
    .fragment-row {
      display: grid;
      grid-template-columns: minmax(150px, 2fr) minmax(160px, 3fr) minmax(180px, 4fr);
      gap: var(--gap);
      align-items: center;
      min-height: 66px;
      border-bottom: 1px solid var(--line-soft);
    }
    .fragment-row span { color: #89929d; font-size: 14px; }
    .fragment-row strong { font-size: 18px; font-weight: 580; }
    .fragment-row p { margin: 0; color: #a0aab8; font-size: 14px; }
    .fragment-close {
      grid-column: 1 / -1;
      text-align: center;
      margin-top: 34px;
      padding: 24px 0 0;
      border-top: 2px solid var(--blue);
      font-size: clamp(26px, 2.7vw, 42px);
      font-weight: 560;
      letter-spacing: -.04em;
    }

    /* Peak 2: Operating loop */
    .operating-loop {
      padding-block: var(--section-lg);
      background: var(--black);
    }
    .loop-heading { grid-column: 1 / span 8; }
    .loop-copy { grid-column: 9 / -1; align-self: end; }
    .loop-controller {
      grid-column: 1 / -1;
      margin-top: 40px;
      border: 1px solid #313943;
      background: #07090c;
    }
    .loop-top {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: #0d1117;
    }
    .loop-ident { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; }
    .loop-ident strong { font-size: 13px; white-space: nowrap; }
    .loop-ident span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #87919c; text-overflow: ellipsis; white-space: nowrap; }
    .loop-controls { display: flex; align-items: center; gap: 9px; }
    .loop-control {
      min-height: 40px;
      padding: 9px 13px;
      border: 1px solid #3a424d;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 680;
    }
    .loop-control:hover { border-color: white; }
    .loop-control.primary { border-color: var(--blue-action); background: var(--blue-action); color: white; }
    .loop-control.primary:hover { border-color: var(--blue-action-hover); background: var(--blue-action-hover); }
    .loop-stage-rail {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }
    .loop-stage-button {
      position: relative;
      min-height: 78px;
      padding: 15px 14px;
      border: 0;
      border-right: 1px solid var(--line);
      background: #090c10;
      color: #a0aab8;
      cursor: pointer;
      text-align: left;
      font-size: 12px;
      font-weight: 650;
    }
    .loop-stage-button:last-child { border-right: 0; }
    .loop-stage-button::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 2px;
      background: var(--blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--normal) var(--ease);
    }
    .loop-stage-button span { display: block; margin-bottom: 7px; color: #a0aab8; font: 12px/1 var(--mono); }
    .loop-stage-button:hover { color: #aeb4bc; }
    .loop-stage-button[aria-current="step"] { background: #10151c; color: white; }
    .loop-stage-button[aria-current="step"]::before { transform: scaleX(1); }
    .loop-body {
      display: grid;
      grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
      min-height: 430px;
    }
    .loop-narrative {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 32px;
      border-right: 1px solid var(--line);
      background: #080b0f;
    }
    .loop-stage-index { color: var(--blue); font: 12px/1 var(--mono); }
    .loop-narrative h3 {
      margin: 20px 0 0;
      max-width: 18ch;
      font-size: clamp(30px, 3vw, 43px);
      font-weight: 550;
      letter-spacing: -.035em;
      line-height: 1.15;
    }
    .loop-narrative > div > p { max-width: 28em; margin: 24px 0 0; color: var(--gray); font-size: 16px; }
    .loop-event {
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }
    .loop-event span { display: block; color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
    .loop-event strong { display: block; margin-top: 10px; overflow-wrap: anywhere; font: 520 12px/1.5 var(--mono); }
    .loop-visual {
      position: relative;
      display: grid;
      grid-template-rows: 1fr auto;
      padding: 30px;
      overflow: hidden;
      background: #0a0d11;
    }
    .loop-map {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      position: relative;
    }
    .loop-map::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 9%;
      left: 9%;
      height: 2px;
      background: #29313a;
    }
    .loop-map::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 9%;
      width: var(--loop-progress, 0%);
      height: 2px;
      background: var(--blue);
      transition: width 540ms var(--ease);
    }
    .loop-node {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 220px;
      padding: 21px 15px;
      border: 1px solid #343c46;
      background: #0e1319;
      transition: border-color var(--normal) ease, background-color var(--normal) ease, transform var(--normal) var(--ease);
    }
    .loop-node + .loop-node { margin-left: 15px; }
    .loop-node.is-active { border-color: var(--blue); background: #111925; transform: translateY(-5px); }
    .loop-node small { color: #a0aab8; font: 12px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .loop-node strong { display: block; margin-top: 25px; font-size: clamp(20px, 1.65vw, 25px); font-weight: 570; letter-spacing: -.03em; }
    .loop-node p { margin: 14px 0 18px; color: #89939e; font-size: 13px; line-height: 1.55; }
    .loop-node-state {
      position: static;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid #28303a;
      color: #a7afb8;
      font: 12px/1.4 var(--mono);
    }
    .loop-evidence-return {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 34px;
      padding: 17px 0 0;
      border-top: 1px solid #343c46;
      color: #a0aab8;
      font-size: 12px;
    }
    .loop-evidence-return strong { color: white; font-weight: 580; }
    .loop-evidence-return span:last-child { font-family: var(--mono); font-size: 12px; }
    .loop-controller.is-changing .loop-narrative h3,
    .loop-controller.is-changing .loop-narrative > div > p,
    .loop-controller.is-changing .loop-event strong {
      opacity: .72;
      transform: translateY(3px);
      transition: none;
    }

    /* Capabilities: quieter, product-specific */
    .capabilities {
      padding-block: var(--section-md);
      background: var(--near-black);
    }
    .cap-head { grid-column: 1 / span 7; }
    .cap-sub { grid-column: 9 / -1; align-self: end; }
    .cap-layout {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 3.2fr 8.8fr;
      gap: var(--gap);
      margin-top: clamp(46px, 5vw, 70px);
    }
    .cap-index { display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); }
    .cap-button {
      position: relative;
      width: 100%;
      min-height: 64px;
      padding: 15px 8px 15px 0;
      border: 0;
      border-bottom: 1px solid var(--line-soft);
      background: transparent;
      color: #a0aab8;
      cursor: pointer;
      text-align: left;
      font-size: clamp(19px, 1.8vw, 26px);
      font-weight: 590;
      letter-spacing: -.025em;
      line-height: 1.15;
      transition: color var(--normal) ease, transform var(--normal) var(--ease);
    }
    .cap-button:hover { color: #a8afb7; }
    .cap-button[aria-selected="true"] { color: white; transform: translateX(8px); }
    .cap-button[aria-selected="true"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -8px;
      width: 2px;
      height: 24px;
      background: var(--blue);
      transform: translate(-100%, -50%);
    }
    .cap-detail {
      position: relative;
      min-height: 430px;
      overflow: hidden;
      border-top: 1px solid #353d47;
      border-bottom: 1px solid #252c34;
      background: #080b0f;
    }
    .cap-stage-content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      min-height: 430px;
      padding: 32px;
    }
    .cap-kicker { margin: 0; color: #909aa5; font-size: 13px; font-weight: 660; }
    .cap-detail h3 {
      max-width: 23ch;
      margin: 20px 0 0;
      font-size: clamp(30px, 3vw, 44px);
      font-weight: 565;
      letter-spacing: -.046em;
      line-height: 1.13;
    }
    .cap-detail-copy { max-width: 38em; margin: 19px 0 0; color: var(--gray); font-size: 16px; }
    .cap-visual {
      align-self: end;
      margin-top: 38px;
      border-top: 1px solid #3a424d;
    }
    .cap-row,
    .cap-primitive {
      display: grid;
      grid-template-columns: minmax(130px, 1.2fr) minmax(0, 2.8fr);
      gap: 24px;
      align-items: baseline;
      min-height: 47px;
      padding: 12px 0;
      border-bottom: 1px solid #242b33;
    }
    .cap-row span,
    .cap-primitive span { color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .cap-row strong,
    .cap-primitive strong { color: #c1c7ce; font: 520 12px/1.45 var(--mono); }
    .cap-primitive {
      margin-top: 12px;
      border-bottom: 0;
      border-left: 2px solid var(--blue);
      padding-left: 14px;
    }
    .cap-detail.is-changing .cap-stage-content { animation: cap-change 340ms var(--ease); }
    @keyframes cap-change {
      0% { opacity: .72; transform: translateY(5px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Connected operating surface */
    .product {
      padding-block: var(--section-md);
      background: var(--black);
    }
    .product-head { grid-column: 1 / span 6; }
    .product-copy { grid-column: 8 / -1; align-self: end; }
    .dashboard {
      grid-column: 1 / -1;
      margin-top: clamp(50px, 5.5vw, 76px);
      border: 1px solid #2b333d;
      background: #080b0f;
    }
    .dash-top {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
      background: #0d1117;
    }
    .dash-brand { font: 720 12px/1.3 var(--mono); letter-spacing: .05em; }
    .dash-body { display: grid; grid-template-columns: minmax(210px, 2.3fr) minmax(0, 9.7fr); min-height: 550px; }
    .dash-tabs { border-right: 1px solid var(--line); background: #080b0f; }
    .dash-tab {
      width: 100%;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      border: 0;
      border-bottom: 1px solid #20262e;
      background: transparent;
      color: #a0aab8;
      cursor: pointer;
      text-align: left;
      font-size: 14px;
      font-weight: 650;
      transition: color var(--fast) ease, background-color var(--fast) ease, padding var(--normal) var(--ease);
    }
    .dash-tab:hover { color: #b5bbc3; background: #0d1117; }
    .dash-tab[aria-selected="true"] { padding-left: 25px; background: #111720; color: white; }
    .dash-tab[aria-selected="true"]::before { content: ""; width: 7px; height: 7px; margin-left: -13px; background: var(--blue); }
    .dash-tab-code { color: #89929d; font: 12px/1 var(--mono); }
    .dash-content { min-width: 0; padding: clamp(24px, 2.8vw, 40px); }
    .dash-view { min-height: 460px; }
    .dash-view.is-entering { animation: dash-enter 300ms var(--ease); }
    @keyframes dash-enter {
      0% { opacity: .72; transform: translateY(4px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .dash-view-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 28px;
    }
    .dash-view-head h3 { margin: 0; font-size: clamp(26px, 2.5vw, 36px); font-weight: 565; letter-spacing: -.04em; }
    .dash-view-head p { margin: 8px 0 0; color: #a0aab8; font-size: 13px; }
    .metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .metric { padding: 18px 15px; border-right: 1px solid var(--line); }
    .metric:last-child { border-right: 0; }
    .metric span { display: block; color: #a0aab8; font: 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .metric strong { display: block; margin-top: 11px; font: 520 28px/1 var(--mono); }
    .table-scroll { max-width: 100%; overflow-x: auto; outline-offset: 2px; }
    .data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
    .data-table th,
    .data-table td { padding: 15px 13px; border-bottom: 1px solid #20262e; text-align: left; }
    .data-table th { color: #a0aab8; font: 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .data-table td { color: #adb4bc; font-size: 13px; }
    .data-table td:first-child { color: white; font-weight: 650; }
    .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .ui-panel { min-width: 0; min-height: 340px; padding: 22px; overflow-wrap: anywhere; border: 1px solid #2a323c; background: #0d1117; }
    .ui-panel h4 { margin: 0 0 26px; font-size: 15px; font-weight: 680; }
    .trace-row {
      display: grid;
      grid-template-columns: 92px 1fr auto;
      gap: 14px;
      padding: 13px 0;
      border-bottom: 1px solid #222a33;
      font: 12px/1.45 var(--mono);
    }
    .trace-row span:first-child { color: #a0aab8; }
    .trace-row span:last-child { color: #939ca6; text-align: right; }
    .trace-row b { color: #c9ced4; font-weight: 520; }
    .receipt-ui { font: 12px/1.5 var(--mono); }
    .receipt-ui > div {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 16px;
      padding: 13px 0;
      border-bottom: 1px solid #222a33;
    }
    .receipt-ui span:first-child { color: #a0aab8; }
    .receipt-ui span:last-child { color: #c5cbd1; overflow-wrap: anywhere; }
    .incident-mini {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 12px;
      padding: 16px 0;
      border-bottom: 1px solid #222a33;
      color: #858f9a;
      font-size: 13px;
    }
    .incident-mini::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border: 1px solid #59636f; }
    .incident-mini.is-active { color: white; }
    .incident-mini.is-active::before { border-color: var(--pending); background: var(--pending); }
    .product-caption { grid-column: 1 / -1; margin: 18px 0 0; color: var(--muted); font-size: 12px; }

    /* Architecture and safe degradation */
    .architecture {
      padding-block: var(--section-md);
      background: var(--near-black);
    }
    .architecture-head { grid-column: 1 / span 7; }
    .architecture-copy { grid-column: 9 / -1; align-self: end; }
    .architecture-layout {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(260px, 3.3fr) minmax(0, 8.7fr);
      gap: var(--gap);
      margin-top: clamp(50px, 5.5vw, 76px);
    }
    .authority-notes { border-top: 1px solid var(--line); }
    .authority-note { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
    .authority-note strong { display: block; font-size: 17px; font-weight: 620; }
    .authority-note p { margin: 8px 0 0; color: #a0aab8; font-size: 13px; }
    .architecture-stage { border: 1px solid #303842; background: #080b0f; }
    .arch-toolbar {
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: #0d1117;
    }
    .arch-toolbar strong { font-size: 13px; }
    .arch-modes { display: flex; gap: 8px; }
    .arch-mode {
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid #343d47;
      background: transparent;
      color: #8c95a0;
      cursor: pointer;
      font-size: 12px;
      font-weight: 650;
    }
    .arch-mode:hover { color: white; border-color: #6a7480; }
    .arch-mode[aria-pressed="true"] { border-color: var(--blue-action); background: var(--blue-action); color: white; }
    .arch-plane { padding: clamp(26px, 3.3vw, 44px); }
    .arch-control {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      padding: 24px;
      border: 1px solid #313944;
      background: #0c1117;
    }
    .arch-control span,
    .arch-node span { display: block; color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .arch-control strong,
    .arch-node strong { display: block; margin-top: 12px; font-size: 21px; font-weight: 590; letter-spacing: -.025em; }
    .arch-control p,
    .arch-node p { margin: 9px 0 16px; color: #a0aab8; font-size: 12px; }
    .arch-control-state { align-self: center; text-align: right; font: 12px/1.4 var(--mono); color: #aab1ba; }
    .arch-command {
      position: relative;
      width: 2px;
      height: 52px;
      margin: 0 auto;
      background: var(--blue);
    }
    .arch-command::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 50%;
      width: 9px;
      height: 9px;
      background: var(--blue);
      transform: translate(-50%, 50%) rotate(45deg);
    }
    .arch-boundary { border: 1px solid #3a434e; }
    .arch-boundary-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-bottom: 1px solid #343c46;
      background: #11161d;
      color: #9ea6af;
      font-size: 12px;
    }
    .arch-boundary-head i { color: var(--blue); font: 12px/1.2 var(--mono); font-style: normal; }
    .arch-runtime { display: grid; grid-template-columns: repeat(3, 1fr); }
    .arch-node {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 195px;
      padding: 21px;
      border-right: 1px solid #303843;
      background: #0b0f14;
    }
    .arch-node:last-child { border-right: 0; }
    .arch-node-state {
      position: static;
      margin-top: auto;
      padding-top: 11px;
      border-top: 1px solid #28303a;
      color: #b0b7bf;
      font: 12px/1.4 var(--mono);
    }
    .arch-evidence {
      display: grid;
      grid-template-columns: 160px 1fr auto;
      gap: 20px;
      align-items: center;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid #3b444f;
      color: #a0aab8;
      font-size: 12px;
    }
    .arch-evidence-line { height: 2px; background: #3f4954; }
    .arch-evidence strong { color: #c0c6cd; font: 12px/1.3 var(--mono); font-weight: 520; }
    .degradation-readout {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line);
    }
    .degradation-readout div { min-height: 88px; padding: 15px; border-right: 1px solid var(--line); }
    .degradation-readout div:last-child { border-right: 0; }
    .degradation-readout span { display: block; color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .degradation-readout strong { display: block; margin-top: 11px; color: #c4cad1; font: 520 12px/1.45 var(--mono); }
    .architecture-stage .arch-control,
    .architecture-stage .arch-command,
    .architecture-stage .arch-boundary,
    .architecture-stage .arch-node { transition: opacity var(--normal) ease, border-color var(--normal) ease, background-color var(--normal) ease; }
    .architecture-stage[data-arch-mode="outage"] .arch-control { opacity: .42; border-color: #3a4148; }
    .architecture-stage[data-arch-mode="outage"] .arch-command { background: #555e67; }
    .architecture-stage[data-arch-mode="outage"] .arch-command::after { background: #555e67; }
    .architecture-stage[data-arch-mode="outage"] .arch-boundary { border-color: var(--blue); }
    .architecture-stage[data-arch-mode="outage"] .arch-node { background: #0e141b; }
    .architecture-stage[data-arch-mode="failure"] .arch-node:last-child { border-color: var(--failed); background: #151011; }
    .architecture-stage[data-arch-mode="failure"] .degradation-readout div:nth-child(2) strong { color: var(--failed); }

    /* Request + policy */
    .traffic {
      padding-block: var(--section-md);
      background: var(--black);
      overflow: hidden;
    }
    .traffic-grid { min-height: 0; }
    .traffic-statement {
      grid-column: 1 / span 4;
      align-self: start;
      padding: 24px 24px 0 0;
      border-top: 2px solid var(--blue);
      color: white;
    }
    .traffic-statement .eyebrow { color: #a0aab8; }
    .traffic-statement h2 {
      max-width: 9ch;
      margin: 28px 0 0;
    }
    .traffic-statement p:last-child { max-width: 27em; margin: 30px 0 0; color: #8e98a3; font-size: 15px; }
    .traffic-interface { grid-column: 5 / -1; align-self: start; margin: 0; border: 1px solid #2d3540; background: #090d12; }
    .traffic-top {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: #0e1319;
    }
    .traffic-examples { display: flex; gap: 8px; }
    .traffic-example {
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid #343d47;
      background: transparent;
      color: #8d96a1;
      cursor: pointer;
      font-size: 12px;
      font-weight: 650;
    }
    .traffic-example[aria-pressed="true"] { border-color: var(--blue); color: white; }
    .request-line {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 17px;
      margin: 24px;
      padding: 18px;
      background: #111720;
    }
    .request-line span { color: var(--blue); font: 700 12px/1.4 var(--mono); }
    .request-line strong { font-size: 16px; }
    .request-line i { color: #a0aab8; font: 12px/1.5 var(--mono); font-style: normal; }
    .request-path {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      margin: 32px 24px;
      border-top: 1px solid #3b444f;
    }
    .request-step {
      position: relative;
      min-height: 76px;
      padding: 18px 10px 0 0;
      color: #a0aab8;
      font-size: 12px;
      font-weight: 650;
    }
    .request-step::before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 9px;
      height: 9px;
      border: 1px solid #59636f;
      background: #090d12;
    }
    .request-step.is-active { color: white; }
    .request-step.is-active::before { border-color: var(--blue); background: var(--blue); }
    .request-step.is-blocked { color: var(--failed); }
    .request-step.is-blocked::before { border-color: var(--failed); background: var(--failed); }
    .request-step small { display: block; margin-top: 7px; color: #a0aab8; font: 12px/1.4 var(--mono); }
    .traffic-log { margin: 0 24px 22px; border-top: 1px solid var(--line); }
    .traffic-log-row {
      display: grid;
      grid-template-columns: 90px 1fr auto;
      gap: 15px;
      padding: 12px 0;
      border-bottom: 1px solid #222a33;
      font: 12px/1.45 var(--mono);
    }
    .traffic-log-row span { color: #a0aab8; }
    .traffic-log-row b { color: #c7ccd2; font-weight: 520; }
    .traffic-log-row i { color: #9099a3; font-style: normal; text-align: right; }
    .traffic-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 66px;
      padding: 15px 24px;
      border-top: 1px solid var(--line);
      background: #0d1117;
      font-size: 12px;
    }

    /* Recovery + connected decision */
    .recovery {
      padding-block: var(--section-md);
      background: var(--near-black);
    }
    .recovery-stage {
      grid-column: 1 / span 8;
      border: 1px solid #303843;
      background: #090d12;
    }
    .recovery-head {
      min-height: 76px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 22px;
      border-bottom: 1px solid var(--line);
      background: #0e1319;
    }
    .recovery-head span { color: #a0aab8; font-size: 12px; }
    .recovery-head strong { display: block; margin-top: 5px; font-size: 24px; font-weight: 590; letter-spacing: -.03em; }
    .recovery-timeline { padding: 18px 24px; }
    .recovery-event {
      position: relative;
      display: grid;
      grid-template-columns: 150px 1fr auto;
      gap: 18px;
      padding: 15px 0 15px 22px;
      border-bottom: 1px solid #222a33;
      color: #a0aab8;
      font-size: 13px;
    }
    .recovery-event > * { min-width: 0; overflow-wrap: anywhere; }
    .recovery-event::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 0;
      width: 8px;
      height: 8px;
      border: 1px solid #56616d;
    }
    .recovery-event.is-complete { color: #b6bdc5; }
    .recovery-event.is-complete::before { border-color: var(--blue); background: var(--blue); }
    .recovery-event.is-current { color: white; }
    .recovery-event.is-current::before { border-color: var(--pending); background: var(--pending); }
    .recovery-event strong { font-weight: 610; }
    .recovery-event span { color: #a0aab8; }
    .recovery-event i { color: #929ba5; font: 12px/1.4 var(--mono); font-style: normal; text-align: right; }
    .approval-box { padding: 20px 24px 22px; border-top: 1px solid var(--line); background: #0d1117; }
    .approval-context {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-bottom: 18px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .approval-context div { padding: 15px 12px; border-right: 1px solid var(--line); }
    .approval-context div:last-child { border-right: 0; }
    .approval-context span { display: block; color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; }
    .approval-context strong { display: block; margin-top: 8px; font: 530 12px/1.4 var(--mono); }
    .approval-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .ui-button {
      min-height: 46px;
      padding: 11px 15px;
      border: 1px solid #3b444f;
      background: transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
    }
    .ui-button:hover { border-color: white; }
    .ui-button.primary { border-color: var(--blue-action); background: var(--blue-action); color: white; }
    .ui-button.danger { border-color: #6c4646; color: #efb2b2; }
    .ui-button:disabled { opacity: .45; cursor: wait; }
    .approval-result { margin: 18px 0 0; color: #929ba5; font-size: 13px; }
    .recovery-copy { grid-column: 9 / -1; align-self: center; }
    .recovery-copy .body-copy { margin-top: 26px; }
    .recovery-facts { margin-top: 30px; border-top: 1px solid var(--line); }
    .recovery-fact { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
    .recovery-fact strong { display: block; font-size: 17px; font-weight: 620; }
    .recovery-fact span { display: block; margin-top: 7px; color: #a0aab8; font-size: 13px; }

    /* Evidence as payoff */
    .evidence {
      padding-block: var(--section-md);
      background: var(--black);
    }
    .evidence-head { grid-column: 1 / span 6; }
    .evidence-copy { grid-column: 8 / -1; align-self: end; }
    .receipt {
      grid-column: 1 / span 8;
      margin-top: clamp(48px, 5.2vw, 72px);
      padding: clamp(28px, 3.5vw, 48px);
      background: var(--paper);
      color: var(--paper-ink);
    
      border: 1px solid #39424f;}
    .receipt-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid #343c47;
      font: 680 12px/1.3 var(--mono);
    }
    .receipt-head span { color: #a0aab8; }
    .receipt h3 {
      max-width: 20ch;
      margin: 28px 0;
      font-size: clamp(34px, 3.4vw, 50px);
      font-weight: 560;
      letter-spacing: -.04em;
      line-height: 1.1;
    }
    .receipt-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #343c47; }
    .receipt-field { min-height: 80px; padding: 15px 16px 15px 0; border-bottom: 1px solid #343c47; }
    .receipt-field:nth-child(odd) { border-right: 1px solid #343c47; }
    .receipt-field:nth-child(even) { padding-left: 18px; }
    .receipt-field span { display: block; color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .receipt-field strong { display: block; margin-top: 9px; overflow-wrap: anywhere; font: 570 12px/1.45 var(--mono); }
    .receipt-signature {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      margin-top: 34px;
      padding-top: 18px;
      border-top: 2px solid var(--blue);
      font: 540 12px/1.5 var(--mono);
    }
    .receipt-signature span { color: #a0aab8; }
    .evidence-meaning {
      grid-column: 9 / -1;
      align-self: start;
      margin-top: clamp(48px, 5.2vw, 72px);
      border-top: 1px solid var(--line);
    }
    .meaning-block { padding: 19px 0; border-bottom: 1px solid var(--line-soft); }
    .meaning-block strong { display: block; font-size: 17px; font-weight: 620; }
    .meaning-block p { margin: 9px 0 0; color: #a0aab8; font-size: 13px; line-height: 1.6; }
    .evidence-ledger {
      grid-column: 3 / -1;
      margin-top: 46px;
      border: 1px solid #2c343e;
      background: #090d12;
    }
    .ledger-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #0e1319; }
    .ledger-head strong { font-size: 12px; }
    .ledger-row {
      display: grid;
      grid-template-columns: 105px 1fr 120px minmax(180px, 1.2fr);
      gap: 18px;
      padding: 14px 18px;
      border-bottom: 1px solid #212831;
      font: 12px/1.45 var(--mono);
    }
    .ledger-row:last-child { border-bottom: 0; }
    .ledger-row span { color: #a0aab8; }
    .ledger-row b { color: #c8cdd3; font-weight: 520; }
    .ledger-row i { color: #9aa3ad; font-style: normal; }
    .ledger-row em { color: #a0aab8; font-style: normal; overflow-wrap: anywhere; }

    /* Trust boundary and procurement facts */
    .trust {
      padding-block: var(--section-sm);
      background: var(--near-black);
    }
    .trust-head { grid-column: 1 / span 6; }
    .trust-copy { grid-column: 8 / -1; align-self: end; }
    .trust-table-wrap {
      grid-column: 1 / -1;
      margin-top: 44px;
      overflow-x: auto;
      border-top: 1px solid var(--line);
    }
    .trust-table { width: 100%; min-width: 820px; border-collapse: collapse; }
    .trust-table th,
    .trust-table td { padding: 17px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; }
    .trust-table th { color: #a0aab8; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .trust-table td { color: #a6aeb7; font-size: 13px; }
    .trust-table td:first-child { color: white; font-weight: 620; }
    .trust-table td:nth-child(2) { background: #080a0d; }
    .trust-table td:nth-child(3) { background: #0b111a; }
    .trust-notes {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      margin-top: 34px;
    }
    .trust-note { padding-top: 17px; border-top: 2px solid #343c46; }
    .trust-note:first-child { border-top-color: var(--blue); }
    .trust-note strong { display: block; font-size: 17px; font-weight: 620; }
    .trust-note p { margin: 10px 0 0; color: #a0aab8; font-size: 13px; line-height: 1.62; }
    .boundary-details {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: var(--gap);
      margin-top: 32px;
    }
    .boundary-details details { border-top: 1px solid #3a424d; border-bottom: 1px solid #252c34; }
    .boundary-details summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 15px; font-weight: 630; list-style: none; }
    .boundary-details summary::-webkit-details-marker { display: none; }
    .boundary-details summary::after { content: "+"; color: var(--blue); font-size: 19px; }
    .boundary-details details[open] summary::after { content: "−"; }
    .boundary-details p { margin: 0 0 22px; color: #a0aab8; font-size: 13px; line-height: 1.7; }

    /* Consolidation without absolute replacement claims */
    .consolidation {
      padding-block: var(--section-sm);
      background: var(--black);
    }
    .consolidation-head { grid-column: 1 / span 7; }
    .consolidation-copy { grid-column: 9 / -1; align-self: end; }
    .consolidation-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 5fr 7fr;
      margin-top: 40px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .fragmented-stack { padding: 24px 28px 24px 0; border-right: 1px solid var(--line); }
    .fragmented-stack > span,
    .connected-stack > span { color: #a0aab8; font-size: 12px; font-weight: 680; }
    .tool-words { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
    .tool-words strong { color: #a0aab8; font-size: clamp(18px, 1.8vw, 27px); font-weight: 550; letter-spacing: -.025em; }
    .connected-stack { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 24px 32px; }
    .connected-stack h3 { margin: 0; color: var(--blue); font-size: clamp(27px, 3vw, 44px); font-weight: 570; letter-spacing: -.045em; line-height: 1; }
    .integration-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 2fr repeat(6, 1fr);
      gap: 0;
      margin-top: 24px;
      border-top: 1px solid var(--line-soft);
      border-bottom: 1px solid var(--line-soft);
    }
    .integration-row > * { min-height: 58px; display: flex; align-items: center; padding: 11px; border-right: 1px solid var(--line-soft); color: #959da7; font-size: 12px; }
    .integration-row > *:last-child { border-right: 0; }
    .integration-row strong { color: white; font-weight: 620; }

    /* Calm pricing */
    .pricing {
      padding-block: var(--section-sm);
      background: var(--near-black);
    }
    .pricing-head { grid-column: 1 / span 6; }
    .pricing-copy { grid-column: 8 / -1; align-self: end; }
    .plan {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 4fr 3fr 5fr;
      margin-top: 44px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .plan > div { min-height: 250px; padding: 28px 24px; border-right: 1px solid var(--line); }
    .plan > div:last-child { border-right: 0; }
    .plan-name span { color: #a0aab8; font-size: 13px; font-weight: 650; }
    .plan-name strong { display: block; margin-top: 28px; font-size: clamp(48px, 5vw, 72px); font-weight: 555; letter-spacing: -.055em; line-height: .9; }
    .plan-name small { display: block; margin-top: 15px; color: #a0aab8; font-size: 13px; }
    .plan-capacity strong,
    .plan-terms strong { display: block; margin-bottom: 20px; font-size: 16px; font-weight: 640; }
    .plan-list { margin: 0; padding: 0; list-style: none; }
    .plan-list li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: #9ba3ad; font-size: 13px; }
    .plan-list b { color: white; font-weight: 620; }
    .plan-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }

    /* Peak 3: close */
    .final-close {
      position: relative;
      min-height: 0;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--black);
    
      padding-block: 96px;}
    .final-close::after {
      content: "";
      position: absolute;
      top: 64px;
      right: var(--gutter);
      bottom: 64px;
      width: 2px;
      background: var(--blue);
    }
    .final-content { position: relative; z-index: 1; }
    .final-title { grid-column: 1 / span 8; }
    .final-copy { grid-column: 9 / -1; align-self: end; margin-top: 0; }
    .final-copy .lede { margin-bottom: 26px; color: #c5cbd2; }

    .site-footer { padding-block: 76px 34px; border-top: 1px solid #1d1d1d; background: var(--black); }
    .footer-brand { grid-column: 1 / span 4; }
    .footer-brand p { max-width: 24em; margin: 22px 0 0; color: var(--muted); font-size: 14px; }
    .footer-groups { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
    .footer-group strong { display: block; margin-bottom: 16px; font-size: 13px; }
    .footer-group a { display: block; min-height: 35px; padding: 6px 0; color: #a0aab8; font-size: 13px; }
    .footer-group a:hover { color: white; }
    .footer-bottom {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 70px;
      padding-top: 24px;
      border-top: 1px solid #1d1d1d;
      color: #a0aab8;
      font-size: 12px;
    }

    /* Quiet arrival; product state transitions remain user-controlled. */
    @keyframes mature-arrival { from { opacity: .7; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .table-scroll { scrollbar-width: thin; scrollbar-color: #546070 #11151c; overscroll-behavior-x: contain; }
    .data-table th:first-child,.data-table td:first-child { position: sticky; left: 0; z-index: 1; background: #0d1117; }
    .data-table tbody tr:hover td { background-color: #111923; }
    .hero-node:hover { background: #10151c; }
    .ui-button,.loop-control,.arch-mode,.traffic-example { font-size: 13px; }
    .state { line-height: 1.5; }
    @media (max-width: 1180px) {
      .desktop-nav,
      .nav-actions > .nav-login,
      .nav-actions > .nav-demo { display: none; }
      .nav-shell { grid-template-columns: 1fr auto; }
      .mobile-toggle { display: block; }
      .mega-wrap { display: none; }
      .hero-main { grid-column: 1 / span 8; }
      .hero-copy { grid-column: 9 / -1; }
      .hero-topology { --topology-opacity: .46; right: -110px; width: 980px; height: 720px; }
      .hero-map { grid-template-columns: repeat(2, 1fr); }
      .hero-map::before { width: 100%; }
      .hero-node { border-bottom: 1px solid #252c34; }
      .hero-node:nth-child(2n) { border-right: 0; }
      .hero-node:nth-child(n+3) { border-bottom: 0; }
      .hero-node::after { display: none; }
      .loop-map { grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .loop-map::before,
      .loop-map::after { display: none; }
      .loop-node + .loop-node { margin-left: 0; }
      .loop-node { min-height: 210px; }
      .architecture-layout { grid-template-columns: 3fr 7fr; }
      .final-title { grid-column: 1 / -1; }
    }

    @media (max-width: 960px) {
      :root { --section-lg: 112px; --section-md: 88px; --section-sm: 70px; }
      .hero { min-height: auto; }
      .hero-main,
      .hero-copy,
      .problem-title,
      .problem-copy,
      .loop-heading,
      .loop-copy,
      .cap-head,
      .cap-sub,
      .product-head,
      .product-copy,
      .architecture-head,
      .architecture-copy,
      .recovery-stage,
      .recovery-copy,
      .evidence-head,
      .evidence-copy,
      .trust-head,
      .trust-copy,
      .consolidation-head,
      .consolidation-copy,
      .pricing-head,
      .pricing-copy,
      .final-title,
      .final-copy { grid-column: 1 / -1; }
      .hero-copy,
      .problem-copy,
      .loop-copy,
      .cap-sub,
      .product-copy,
      .architecture-copy,
      .evidence-copy,
      .trust-copy,
      .consolidation-copy,
      .pricing-copy { margin-top: 30px; }
      .hero-topology { --topology-opacity: .4; top: 150px; right: -170px; width: 880px; height: 680px; }
      .hero-system-wrap { grid-column: 1 / -1; margin-top: 40px; }
      .hero-map { grid-template-columns: repeat(2, 1fr); }
      .hero-map::before { width: 100%; }
      .hero-node { border-bottom: 1px solid #252c34; }
      .hero-node:nth-child(2n) { border-right: 0; }
      .hero-node:nth-child(n+3) { border-bottom: 0; }
      .hero-node::after { display: none; }
      .hero-operation { grid-template-columns: repeat(3, 1fr); }
      .hero-operation div:nth-child(3) { border-right: 0; }
      .hero-operation div:nth-child(n+4) { border-top: 1px solid var(--line); }
      .fragment-close { grid-column: 1 / -1; }
      .loop-body { grid-template-columns: 1fr; }
      .loop-narrative { min-height: 450px; border-right: 0; border-bottom: 1px solid var(--line); }
      .loop-stage-rail { display: flex; overflow-x: auto; scrollbar-width: thin; }
      .loop-stage-button { flex: 0 0 132px; }
      .cap-layout { grid-template-columns: 1fr; }
      .cap-index { display: grid; grid-template-columns: repeat(3, 1fr); }
      .cap-button { padding-inline: 14px; border-right: 1px solid var(--line-soft); font-size: 19px; }
      .cap-button[aria-selected="true"] { transform: none; }
      .cap-button[aria-selected="true"]::before { top: auto; bottom: 0; left: 14px; width: 28px; height: 2px; transform: none; }
      .dash-body { grid-template-columns: 1fr; }
      .dash-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
      .dash-tabs::-webkit-scrollbar { display: none; }
      .dash-tab { flex: 0 0 185px; border-right: 1px solid #20262e; }
      .dash-tab[aria-selected="true"] { padding-left: 18px; }
      .dash-tab[aria-selected="true"]::before { margin-left: 0; }
      .architecture-layout { grid-template-columns: 1fr; }
      .traffic-statement { grid-column: 1 / -1; padding-right: 0; }
      .traffic-interface { grid-column: 1 / -1; margin-top: 46px; }
      .receipt { grid-column: 1 / -1; }
      .evidence-meaning { grid-column: 1 / -1; margin-top: 48px; }
      .evidence-ledger { grid-column: 1 / -1; }
      .consolidation-grid { grid-template-columns: 1fr; }
      .fragmented-stack { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
      .connected-stack { padding-left: 0; }
      .integration-row { grid-template-columns: repeat(3, 1fr); }
      .integration-row > * { border-bottom: 1px solid var(--line-soft); }
      .integration-row > *:first-child { grid-column: 1 / -1; }
      .plan { grid-template-columns: 1fr 1fr; }
      .plan-name { grid-column: 1 / -1; border-right: 0 !important; border-bottom: 1px solid var(--line); }
      .trust-notes { grid-template-columns: 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-groups { grid-column: 1 / -1; margin-top: 50px; }
      .final-close::after { width: 12%; }
    }

    @media (max-width: 760px) {
      :root {
        --gutter: 20px;
        --gap: 16px;
        --section-lg: 88px;
        --section-md: 72px;
        --section-sm: 58px;
      }
      body { font-size: 16px; }
      section[id] { scroll-margin-top: 134px; }
      .display { font-size: clamp(64px, 19vw, 108px); line-height: .86; }
      .peak-title { font-size: clamp(56px, 16vw, 92px); }
      .major-title { font-size: clamp(42px, 12vw, 68px); }
      .editorial-title { font-size: clamp(32px, 9.5vw, 52px); }
      .hero { padding-top: 60px; }
      .hero-main { grid-column: 1 / -1; }
      .hero-topology { --topology-opacity: .35; top: 240px; right: -250px; width: 720px; height: 520px; }
      .hero-system-wrap { margin-top: 54px; }
      .hero-system { min-height: 0; }
      .hero-console { margin: 22px; }
      .hero-console-head { align-items: flex-start; flex-direction: column; }
      .hero-map { grid-template-columns: 1fr; padding: 0; }
      .hero-node { min-height: 0; padding: 17px 16px; border-bottom: 1px solid #252c34; }
      .hero-node:nth-child(n) { border-right: 0; border-bottom: 1px solid #252c34; }
      .hero-node:last-child { border-bottom: 0; }
      .hero-node strong { margin-top: 8px; font-size: 23px; }
      .hero-node p { margin-top: 8px; font-size: 12px; }
      .hero-node-state { margin-top: 12px; padding-top: 9px; }
      .hero-operation { grid-template-columns: 1fr 1fr; }
      .hero-operation div:nth-child(2n) { border-right: 0; }
      .hero-operation div:nth-child(n+3) { border-top: 1px solid var(--line); }
      .fragment-row { grid-template-columns: 1fr; gap: 7px; padding: 20px 0; }
      .fragment-close { font-size: 32px; }
      .loop-top { align-items: flex-start; flex-direction: column; }
      .loop-controls { width: 100%; }
      .loop-control { flex: 1; }
      .loop-narrative { min-height: 350px; padding: 26px; }
      .loop-visual { padding: 24px; }
      .loop-map { grid-template-columns: 1fr; }
      .loop-node { min-height: 155px; }
      .loop-node p { max-width: 24em; }
      .loop-node-state { margin-top: 19px; }
      .loop-evidence-return { align-items: flex-start; flex-direction: column; }
      .cap-index { grid-template-columns: 1fr 1fr; }
      .cap-button { min-height: 56px; font-size: 18px; }
      .cap-detail,
      .cap-stage-content { min-height: 470px; }
      .cap-detail h3 { font-size: 40px; }
      .cap-row,
      .cap-primitive { grid-template-columns: 1fr; gap: 7px; }
      .dash-top,
      .dash-view-head { align-items: flex-start; flex-direction: column; }
      .dash-tab-code { display: none; }
      .dash-content { padding: 22px; }
      .dash-view { min-height: 460px; }
      .metric-strip { grid-template-columns: 1fr 1fr; }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
      .panel-grid { grid-template-columns: 1fr; }
      .ui-panel { min-height: 0; }
      .trace-row { grid-template-columns: 76px 1fr; }
      .trace-row span:last-child { grid-column: 2; text-align: left; }
      .arch-toolbar { align-items: flex-start; flex-direction: column; }
      .arch-modes { width: 100%; overflow-x: auto; }
      .arch-mode { flex: 0 0 auto; }
      .arch-control { grid-template-columns: 1fr; }
      .arch-control-state { text-align: left; }
      .arch-runtime { grid-template-columns: 1fr; }
      .arch-node { min-height: 170px; border-right: 0; border-bottom: 1px solid #303843; }
      .arch-node:last-child { border-bottom: 0; }
      .arch-node-state { margin-top: 18px; }
      .arch-evidence { grid-template-columns: 1fr; }
      .degradation-readout { grid-template-columns: 1fr 1fr; }
      .degradation-readout div:nth-child(2) { border-right: 0; }
      .degradation-readout div:nth-child(n+3) { border-top: 1px solid var(--line); }
      .traffic-statement { min-height: 0; padding: 20px 0 0; }
      .traffic-interface { margin-inline: 0; border-inline: 0; }
      .traffic-top { align-items: flex-start; flex-direction: column; }
      .traffic-examples { width: 100%; }
      .traffic-example { flex: 1; }
      .request-line { grid-template-columns: 58px 1fr; margin: 22px; }
      .request-line i { grid-column: 2; }
      .request-path { grid-template-columns: 1fr; margin: 30px 22px; border-top: 0; border-left: 1px solid #3b444f; }
      .request-step { min-height: 68px; padding: 0 0 18px 22px; }
      .request-step::before { top: 2px; left: -5px; }
      .traffic-log { margin-inline: 22px; }
      .traffic-log-row { grid-template-columns: 76px 1fr; }
      .traffic-log-row i { grid-column: 2; text-align: left; }
      .traffic-result { align-items: flex-start; flex-direction: column; padding-inline: 22px; }
      .recovery-event { grid-template-columns: 1fr; gap: 7px; padding-left: 22px; }
      .recovery-event i { text-align: left; }
      .approval-context { grid-template-columns: 1fr; }
      .approval-context div { border-right: 0; border-bottom: 1px solid var(--line); }
      .approval-actions { display: grid; grid-template-columns: 1fr; }
      .ui-button { width: 100%; }
      .receipt-grid { grid-template-columns: 1fr; }
      .receipt-field:nth-child(odd) { border-right: 0; }
      .receipt-field:nth-child(even) { padding-left: 0; }
      .receipt-signature { grid-template-columns: 1fr; }
      .ledger-row { grid-template-columns: 1fr 1fr; }
      .ledger-row i,
      .ledger-row em { grid-column: 2; }
      .boundary-details { grid-template-columns: 1fr; }
      .trust-table { min-width: 0; }
      .trust-table thead { display: none; }
      .trust-table tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
      .trust-table td { display: grid; grid-template-columns: minmax(120px, .8fr) 1fr; gap: 18px; padding: 8px 0; border: 0; background: transparent !important; }
      .trust-table td::before { content: attr(data-label); color: #a0aab8; font: 12px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
      .integration-row { grid-template-columns: 1fr 1fr; }
      .integration-row > *:first-child { grid-column: 1 / -1; }
      .plan { grid-template-columns: 1fr; }
      .plan > div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
      .plan > div:last-child { border-bottom: 0; }
      .plan-name { grid-column: auto; }
      .plan-actions { align-items: stretch; flex-direction: column; }
      .footer-groups { grid-template-columns: 1fr 1fr; }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
      .final-close { min-height: 620px; }
      .final-close::after { top: auto; width: 100%; height: 8px; }
    }

    @media (max-width: 430px) {
      .mobile-links { grid-template-columns: 1fr; }
      .mobile-actions { align-items: stretch; flex-direction: column; }
      .hero-system { min-height: 0; }
      .hero-console { inset: auto; margin: 14px; }
      .hero-map { padding: 0; }
      .loop-controls { display: grid; grid-template-columns: 1fr 1fr; }
      .loop-control:first-child { grid-column: 1 / -1; }
      .cap-index { grid-template-columns: 1fr; }
      .cap-button { font-size: 17px; }
      .footer-groups { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .js .hero-category,
      .js .hero-main .line-mask > span,
      .js .hero-copy,
      .js .hero-console { opacity: 1 !important; transform: none !important; }
      .js .hero-topology { opacity: var(--topology-opacity, .4) !important; transform: none !important; clip-path: none !important; }
      .js .hero-topology .topology-authority { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
      .js.scroll-motion-ready .motion-editorial,
      .js.scroll-motion-ready .motion-interface,
      .js.scroll-motion-ready .motion-sequence-architecture .arch-control,
      .js.scroll-motion-ready .motion-sequence-architecture .arch-command,
      .js.scroll-motion-ready .motion-sequence-architecture .arch-boundary,
      .js.scroll-motion-ready .motion-sequence-architecture .arch-evidence,
      .js.scroll-motion-ready .motion-sequence-architecture .degradation-readout,
      .js.scroll-motion-ready .motion-sequence-evidence .receipt-field,
      .js.scroll-motion-ready .motion-sequence-evidence .receipt-signature,
      .js.scroll-motion-ready .motion-sequence-evidence .ledger-row,
      .js.scroll-motion-ready .motion-sequence-recovery .recovery-event,
      .js.scroll-motion-ready .motion-sequence-recovery .approval-box,
      .js.scroll-motion-ready .motion-sequence-architecture .arch-evidence-line {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
      }
      .js.scroll-motion-ready .motion-rule::before { transform: scaleX(1) !important; }
    }

    @media (max-width:1180px) and (min-width:961px) {
      .hero-main { grid-column:1 / span 7; }
      .hero-copy { grid-column:9 / -1; }
      .hero-map { grid-template-columns:repeat(4,minmax(0,1fr)); }
      .hero-node { padding:21px 16px; }
      .hero-node strong { font-size:23px; }
      .hero-node:nth-child(n) { border-bottom:0; border-right:1px solid var(--line); }
      .hero-node:last-child { border-right:0; }
    }
    @media (max-width:960px) {
      :root { --section-lg:88px;--section-md:72px;--section-sm:58px; }
      .hero-main,.hero-copy,.loop-heading,.loop-copy,.final-title,.final-copy { grid-column:1 / -1; }
      .hero-copy { max-width:640px; margin-top:24px; }
      .hero-topology { top:120px; --topology-opacity:.24; }
      .hero-system-wrap { margin-top:36px; }
      .loop-narrative { min-height:250px; padding:28px; }
      .loop-narrative h3 { max-width:24ch; }
      .final-copy { max-width:640px; margin-top:28px; }
      .final-close::after { width:2px; }
    }
    @media (max-width:760px) {
      :root { --section-lg:64px;--section-md:56px;--section-sm:48px; }
      .display { font-size:clamp(40px,10.7vw,70px);line-height:1.08;letter-spacing:-.048em; }
      .peak-title { font-size:clamp(36px,9.2vw,62px);line-height:1.1; }
      .major-title { font-size:clamp(32px,8.2vw,48px);line-height:1.14; }
      .editorial-title { font-size:clamp(30px,7.8vw,44px);line-height:1.15; }
      .hero { padding-top:42px; }
      .hero-category { margin-bottom:24px;font-size:13px; }
      .hero-copy .lede { margin-bottom:24px; }
      .hero-actions { gap:13px 22px; }
      .hero-system-wrap { margin-top:32px; }
      .hero-console { margin:0; }
      .hero-topology { top:170px;right:-220px;--topology-opacity:.2; }
      .hero-node { padding:18px; }
      .hero-node p { font-size:14px; }
      .hero-console-head { padding:17px 18px;gap:8px; }
      .loop-stage-rail { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible; }
      .loop-stage-button { min-height:67px;padding:12px 10px; }
      .loop-stage-button:nth-child(4){border-right:0}
      .loop-stage-button:nth-child(n+5){border-top:1px solid var(--line)}
      .loop-narrative { min-height:240px;padding:24px;gap:28px; }
      .loop-narrative h3 { font-size:32px;line-height:1.14; }
      .loop-visual { padding:20px; }
      .loop-node { min-height:0;padding:20px; }
      .loop-node strong { margin-top:12px; }
      .cap-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .cap-button { min-height:56px;font-size:16px;padding-inline:10px; }
      .cap-detail,.cap-stage-content { min-height:0; }
      .cap-stage-content { padding:24px; }
      .cap-detail h3 { font-size:32px;line-height:1.15; }
      .dash-content { padding:20px; }
      .dash-view { min-height:0; }
      .dash-view-head { gap:12px; }
      .dash-view-head h3 { font-size:27px; }
      .data-table { min-width:690px; }
      .receipt h3 { font-size:36px;line-height:1.1; }
      .receipt-field { min-height:72px; }
      .final-close { min-height:0;padding-block:62px; }
      .final-close::after { top:auto;right:20px;left:20px;width:auto;height:2px;bottom:0; }
      .footer-groups { grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
      .footer-group a { overflow-wrap:anywhere; }
      .footer-bottom { margin-top:40px; }
    }
    .loop-ident { flex:1 1 auto; width:auto; }
    .loop-controls { flex:0 0 auto; }
    .loop-control { white-space:nowrap; }
    @media(max-width:760px){.loop-ident{width:100%;}}
    @media (prefers-reduced-motion:reduce) { .js.motion-ready .hero-main .line-mask>span,.js.motion-ready .hero-copy { animation:none;opacity:1;transform:none; } }

    /* Enterprise motion: structured flow, brief entrances, and local feedback. */
    .hero-particle-field { position:absolute;top:0;left:0;width:100%;height:clamp(430px,42vw,600px);z-index:0;pointer-events:none; }
    .hero[data-atmosphere="ready"] .hero-topology { --topology-opacity:.17; }
    .hero-motion-toggle { display:inline-flex;align-items:center;gap:9px;margin-top:18px;min-height:34px;padding:7px 10px;border:1px solid #323a46;background:#050608;color:#aab5c3;font:500 12px/1.4 var(--sans);cursor:pointer;transition:color 180ms,border-color 180ms; }
    .hero-motion-toggle:hover,.hero-motion-toggle:focus-visible { color:#fff;border-color:#7892b5; }
    .hero-motion-toggle svg { width:12px;height:12px;fill:currentColor; }
    .hero-motion-toggle[hidden] { display:none; }
    .button .arrow,.nav-demo,.ui-button,.loop-control,.arch-mode,.traffic-example { transition:background-color 180ms,border-color 180ms,color 180ms,transform 220ms var(--ease); }
    .button:hover .arrow { transform:translate(3px,-1px); }
    .ui-button:not(:disabled):hover,.loop-control:hover { transform:translateY(-1px); }
    .loop-stage-button { transition:background-color 220ms,color 180ms; }
    .loop-stage-button:hover { background:#121923; }
    .hero-node,.ui-panel,.trust-note { transition:background-color 220ms,border-color 220ms; }
    .hero-node:hover,.ui-panel:hover { border-color:#586d89;background-color:#111820; }
    .trust-note:hover { border-top-color:#739bd1; }
    .state { transition:color 220ms; }
    .loop-narrative h3,.loop-narrative > div > p,.loop-event strong { transition:opacity 180ms,transform 240ms var(--ease); }
    .iv-entry-rule { position:relative; }
    .iv-entry-rule.iv-rule-entered::after { content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:#62758f;pointer-events:none;transform-origin:left;animation:iv-rule-draw 680ms var(--ease) both; }
    @keyframes iv-rule-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    .hero-console.iv-diagram-entered .hero-map::before { transform-origin:left;animation:iv-rule-draw 900ms var(--ease) both; }
    .boundary-details summary { transition:color 180ms; }
    .boundary-details summary:hover { color:#a7c5f3; }
    @media(max-width:760px) {
      .hero-particle-field { height:660px; }
      .hero[data-atmosphere="ready"] .hero-topology { --topology-opacity:.1; }
      .hero-motion-toggle { margin-top:14px; }
    }
    @media(prefers-reduced-motion:reduce) {
      .hero-motion-toggle { display:none!important; }
      .iv-entry-rule.iv-rule-entered::after,.hero-console.iv-diagram-entered .hero-map::before { animation:none;transform:none; }
    }

    /* Directional card detail, informed by the observed reference interaction. */
    .hero-node .component-copy { overflow:hidden;margin-top:14px; }
    .hero-node .component-track { display:grid;grid-template-columns:100% 100%;width:100%;transform:translateX(0);transition:transform 520ms cubic-bezier(.85,0,.1,1); }
    .hero-node .component-track p { min-width:0;max-width:none;margin:0;padding:0 0 14px;grid-row:1; }
    .component-summary { grid-column:1; }
    .component-detail { grid-column:2; }
    .hero-node.is-peeking .component-track { transform:translateX(-100%); }
    .component-more { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 0 14px;color:#9fc0ef;font-size:12px;line-height:1.5; }
    .component-more span { transition:transform 280ms var(--ease); }
    .hero-node.is-peeking .component-more span { transform:translateX(4px); }
    .hero-node::before { content:"";position:absolute;inset:-1px;z-index:4;pointer-events:none;border:1px solid #5886c5;clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 520ms cubic-bezier(.85,0,.1,1),opacity 220ms; }
    .hero-node.is-peeking::before { clip-path:inset(0);opacity:1; }
    @media(prefers-reduced-motion:reduce){.component-track,.component-more span,.hero-node::before{transition:none!important;}}

    /* One embedded Infraveil mark, reused at each brand placement. */
    .brand-assets { position:absolute;width:0;height:0;overflow:hidden;pointer-events:none; }
    .brand-logo { display:block;width:100%;height:100%;overflow:hidden; }
    .connected-stack h3 { flex:0 1 208px;min-width:0; }
    .connected-stack h3 .brand-logo { width:100%;height:auto;aspect-ratio:1593 / 316; }
    .closing-brand { display:inline-block;width:3.65em;height:.724em;vertical-align:-.035em; }
    .footer-logo-link { display:block;width:132px;height:26.18px;max-width:100%; }
    @media(max-width:760px) {
      .connected-stack { flex-wrap:wrap; }
      .connected-stack h3 { flex-basis:180px; }
    }

    /* Calm motion that explains the operating connections. */
    .tool-overview { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px; }
    .tool-overview > span,.connection-topline > span { color:#a0aab8;font-size:12px;font-weight:600; }
    .tool-cycle-control { display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid #303741;padding:6px 8px;background:transparent;color:#a0aab8;font:500 12px/1.4 var(--sans);cursor:pointer;transition:color 180ms,border-color 180ms; }
    .tool-cycle-control[hidden] { display:none; }
    .tool-cycle-control:hover { color:white;border-color:#718198; }
    .tool-cycle-control svg { width:10px;height:10px;fill:currentColor; }
    .tool-words { gap:4px 18px;margin-top:20px; }
    .tool-tab { position:relative;min-height:44px;padding:5px 0 8px;border:0;background:none;color:#8f99a6;font:550 clamp(18px,1.8vw,27px)/1.4 var(--sans);letter-spacing:-.025em;cursor:pointer;transition:color 320ms; }
    .tool-tab::after { content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:#719fe3;transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--ease); }
    .tool-tab:hover { color:#d2dce9; }
    .tool-tab[aria-selected="true"] { color:#c4d9fa; }
    .tool-tab[aria-selected="true"]::after { transform:scaleX(1); }
    .tool-hint { margin:16px 0 0;color:#929da9;font-size:12px;line-height:1.6; }
    .connected-stack { flex-direction:column;align-items:stretch;justify-content:center;gap:22px;min-width:0; }
    .connection-topline { display:flex;align-items:center;justify-content:space-between;gap:20px; }
    .connection-topline h3 { flex:0 0 148px;max-width:45%; }
    .tool-context { min-height:100px; }
    .tool-readout { display:flex;align-items:baseline;gap:15px; }
    #tool-index { color:#8190a4;font:500 12px/1.5 var(--mono);white-space:nowrap; }
    #tool-title { margin:0;color:#e1e7ef;font-size:22px;line-height:1.3;font-weight:550;letter-spacing:-.025em; }
    #tool-description { max-width:49ch;margin:12px 0 0;color:#aab5c3;font-size:14px;line-height:1.7; }
    .tool-cycle-track { height:1px;background:#252f3c;overflow:hidden; }
    .tool-cycle-track > span { display:block;width:100%;height:100%;background:#698dbd;transform:scaleX(0);transform-origin:left; }
    .integration-boundary { grid-column:1 / -1;margin:18px 0 0;color:#939da9;font-size:12px;line-height:1.6; }
    .integration-row { margin-top:18px; }
    .request-step,.recovery-event { transition:color 260ms,background-color 260ms; }
    .request-step::before,.recovery-event::before { transition:background-color 260ms,border-color 260ms,transform 320ms var(--ease); }
    .recovery-event.is-current::before { transform:scale(1.15); }
    .cap-button::before { content:"";position:absolute;top:50%;left:-8px;width:2px;height:24px;background:var(--blue);transform:translate(-100%,-50%) scaleY(0);opacity:0;transition:transform 280ms var(--ease),opacity 180ms; }
    .cap-button[aria-selected="true"]::before { transform:translate(-100%,-50%) scaleY(1);opacity:1; }
    .dash-tab { position:relative; }
    .dash-tab::before { content:"";position:absolute;left:11px;top:50%;width:2px;height:18px;margin:0;background:var(--blue);transform:translateY(-50%) scaleY(0);opacity:0;transition:transform 280ms var(--ease),opacity 180ms; }
    .dash-tab[aria-selected="true"]::before { width:2px;height:18px;margin:0;transform:translateY(-50%) scaleY(1);opacity:1; }
    @keyframes iv-data-enter { from { opacity:.8;transform:translateY(4px); } to { opacity:1;transform:translateY(0); } }
    .cap-detail.is-changing .cap-row,.dash-view.is-entering .metric,.dash-view.is-entering .ui-panel { animation:iv-data-enter 320ms var(--ease) both; }
    .cap-detail.is-changing .cap-row:nth-child(2),.dash-view.is-entering .metric:nth-child(2),.dash-view.is-entering .ui-panel:nth-child(2) { animation-delay:35ms; }
    .cap-detail.is-changing .cap-row:nth-child(3),.dash-view.is-entering .metric:nth-child(3) { animation-delay:70ms; }
    .cap-detail.is-changing .cap-row:nth-child(4),.dash-view.is-entering .metric:nth-child(4) { animation-delay:105ms; }
    .boundary-details details[open] p,.mobile-group[open] .mobile-links,.mobile-drawer:not([hidden]) { animation:iv-data-enter 240ms var(--ease) both; }
    @media(max-width:760px) {
      .connection-topline h3 { flex-basis:132px; }
      .connected-stack { gap:20px; }
      .tool-context { min-height:126px; }
      #tool-title { font-size:21px; }
      .tool-words { gap:3px 16px; }
    }
    @media(prefers-reduced-motion:reduce) {
      .tool-cycle-control { display:none!important; }
      .cap-detail.is-changing .cap-row,.dash-view.is-entering .metric,.dash-view.is-entering .ui-panel,.boundary-details details[open] p,.mobile-group[open] .mobile-links,.mobile-drawer:not([hidden]) { animation:none; }
    }
  
/* Consistent type and a small editorial overview for the local page pair. */
.display,.peak-title { font-weight:400; }
.overview-header .nav-shell { grid-template-columns:auto 1fr; }
.overview-nav { display:flex;justify-content:flex-end;align-items:center;gap:28px;font-size:14px; }
.overview-nav a { padding:10px 0;color:#9faaba;transition:color 180ms; }
.overview-nav a:hover,.overview-nav a[aria-current="page"] { color:#fff; }
.overview-nav a[aria-current="page"] { box-shadow:0 1px #669ce8; }
.overview-hero { display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:70px;padding-block:86px 72px; }
.overview-title { font-size:clamp(48px,5.5vw,82px);font-weight:400;letter-spacing:-.05em;line-height:1.08;margin:26px 0; }
.overview-title span { display:block;color:#81a9e7; }
.overview-lede { max-width:47ch;color:#b3becb;font-size:18px;line-height:1.7;margin-bottom:28px; }
.overview-diagram { border:1px solid #313b48;background:#080b10;padding:28px; }
.overview-diagram .diagram-label { display:block;color:#8e9db0;font-size:12px;margin-bottom:12px; }
.overview-diagram strong { display:block;font-size:21px;font-weight:500;color:#e3eaf4; }
.overview-diagram p { color:#a9b4c2;font-size:14px;line-height:1.7;margin:8px 0 0; }
.overview-connection { height:45px;margin-left:20px;border-left:1px solid #6a9ee6;position:relative; }
.overview-connection::after { content:"";position:absolute;width:5px;height:5px;bottom:0;left:-3px;background:#6a9ee6; }
.overview-runtime { border-top:1px solid #2e3947;padding-top:18px; }
.overview-components { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px; }
.overview-components span { padding-top:12px;border-top:1px solid #3a4656;color:#aab8c9;font:12px/1.5 var(--mono); }
.overview-section { padding-block:70px;border-top:1px solid #26303c; }
.overview-section-title { max-width:23ch;font-size:clamp(30px,3vw,44px);font-weight:400;line-height:1.18;letter-spacing:-.035em;margin:20px 0 34px; }
.overview-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #354251; }
.overview-step { padding:25px 28px 12px 0;border-right:1px solid #27313d; }
.overview-step + .overview-step { padding-left:28px; }
.overview-step:last-child { border-right:0; }
.overview-step > span { font:12px/1.5 var(--mono);color:#89a9d6; }
.overview-step h3 { font-weight:500;font-size:23px;letter-spacing:-.025em;margin:20px 0 12px; }
.overview-step p { font-size:15px;line-height:1.7;color:#aab6c5;margin:0; }
.overview-boundaries { display:grid;grid-template-columns:1fr 1.2fr;gap:80px; }
.overview-boundaries .boundary-details { display:block; }
.overview-boundaries .boundary-details details+details { border-top:0; }
.overview-return { padding-block:46px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px; }
.overview-return p { max-width:42ch;color:#aab6c5;line-height:1.7; }
.overview-footer { border-top:1px solid #252e39;padding-block:32px; }
.overview-footer .shell { display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8c99aa;font-size:12px; }
@media(max-width:960px){.overview-hero{gap:36px;grid-template-columns:1.25fr 1fr}.overview-boundaries{gap:36px}}
@media(max-width:760px){
  .overview-nav{gap:22px;font-size:13px}.overview-nav .overview-extra{display:none}
  .overview-hero{grid-template-columns:1fr;padding-block:46px;gap:32px}.overview-title{font-size:43px}.overview-lede{font-size:16px}
  .overview-section{padding-block:44px}.overview-section-title{font-size:32px}
  .overview-steps,.overview-boundaries{grid-template-columns:1fr;gap:0}.overview-step,.overview-step+.overview-step{padding:24px 0;border-right:0;border-bottom:1px solid #27313d}
  .overview-return{align-items:flex-start;flex-direction:column;padding-block:30px 44px;gap:12px}.overview-footer .shell{align-items:flex-start;flex-direction:column}
}

/* One black canvas across the site, with a full-width organic point surface. */
body { isolation:isolate; }
body > main,body > footer { position:relative;z-index:1; }
.site-atmosphere { position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; }
.has-atmosphere main > section,.has-atmosphere .site-footer,.has-atmosphere .overview-footer { background:transparent; }
.hero-topology { display:none; }
.hero-console,.hero-console-head,.hero-map,.hero-operation,
.loop-controller,.loop-top,.loop-stage-rail,.loop-narrative,.loop-visual,.loop-node,
.cap-detail,.dashboard,.dash-top,.dash-tabs,.ui-panel,
.architecture-stage,.arch-toolbar,.arch-control,.arch-boundary-head,.arch-node,
.traffic-interface,.traffic-top,.request-line,.traffic-result,
.recovery-stage,.recovery-head,.approval-box,.receipt,.evidence-ledger,.ledger-head,
.overview-diagram,.mobile-toggle,.mega-wrap,.section-nav,.hero-motion-toggle { background-color:#000; }
.hero-node:hover,.ui-panel:hover { background-color:#000; }
.trust-table td:nth-child(2),.trust-table td:nth-child(3),
.data-table th:first-child,.data-table td:first-child { background-color:#000; }

/* Color supplies structure; motion illustrates the selected operating state. */
#main { scroll-margin-top:78px; }
.eyebrow { color:#87aee4; }
.hero-console-head,.dash-top,.recovery-head { background:#06101c; }
.hero-console,.dashboard,.recovery-stage { border-top-color:#426b9f; }
.hero-node:nth-child(1) small { color:#7fa9e4; }
.hero-node:nth-child(2) small { color:#93b9ed; }
.hero-node:nth-child(3) small { color:#72c8d2; }
.hero-node:nth-child(4) small { color:#87cdb0; }
.hero-node.is-peeking,.ui-panel:hover { background:#050d16; }
.ui-panel { border-top-color:#355679; }
.ui-panel h4 { color:#bad5f5; }
.cap-detail { border-top-color:#477dac; }
.tool-cycle-track > span { background:#69c8d4; }
#tool-index { color:#80cbd4; }
.receipt { border-top-color:#54979f; }
.receipt-head { color:#8ebfc9; }
.architecture-stage { border-color:#32485e; }
.arch-toolbar { background:#050c14; }
.arch-ident > strong { display:block; }
.arch-caption { display:flex;align-items:center;gap:14px;margin-top:4px;color:#8397ae;font-size:12px;line-height:1.4; }
.arch-motion-toggle { display:inline-flex;align-items:center;gap:6px;min-height:24px;border:0;padding:2px 0;background:transparent;color:#89b6e9;font:500 12px/1.4 var(--sans);cursor:pointer;transition:color 180ms; }
.arch-motion-toggle:hover { color:#d3e7ff; }
.arch-motion-toggle[hidden] { display:none; }
.arch-motion-toggle svg { width:9px;height:9px;fill:currentColor; }
.arch-control { border-color:#365f8b;border-top:2px solid #659ce5;background:#040d18;transition:background-color 280ms,border-color 280ms; }
.arch-control > div > span { color:#8db8ef; }
.arch-control-state { color:#86cdb1; }
.arch-control-state::before { content:"";display:inline-block;width:6px;height:6px;margin-right:8px;background:currentColor;border-radius:50%;vertical-align:1px; }
.arch-command { width:2px;height:58px;background:#3267a5; }
.arch-command::after { background:#6098e4; }
.arch-command::before { content:"";position:absolute;top:0;left:0;width:2px;height:12px;background:#bad8ff;opacity:0;animation:iv-coordinate 3.4s linear infinite;animation-play-state:paused; }
.arch-flow-label { position:absolute;left:15px;top:19px;white-space:nowrap;color:#7398c7;font:12px/1.4 var(--sans); }
@keyframes iv-coordinate { 0%,12% { transform:translateY(-7px);opacity:0; } 24% { opacity:1; } 68% { opacity:1; } 83%,100% { transform:translateY(48px);opacity:0; } }
.arch-boundary { border-color:#345562; }
.arch-boundary-head { background:#041014;border-bottom-color:#28444c; }
.arch-boundary-head i { color:#72c9d5; }
.arch-node { --component-accent:#8eb7ee;--component-surface:#050d18;position:relative;background:var(--component-surface);border-right-color:#2c414d;transition:background-color 240ms,border-color 240ms,transform 260ms var(--ease); }
.arch-node:nth-child(2) { --component-accent:#70c8d3;--component-surface:#041113; }
.arch-node:nth-child(3) { --component-accent:#83cdb0;--component-surface:#05110e; }
.arch-node::before { content:"";position:absolute;left:21px;right:21px;top:0;height:2px;background:var(--component-accent);transform:scaleX(.28);transform-origin:left;transition:transform 320ms var(--ease); }
.arch-node > span { color:var(--component-accent); }
.arch-node-state { color:var(--component-accent);border-top-color:#29424a; }
.arch-node-state::before { content:"";display:inline-block;width:5px;height:5px;margin-right:7px;background:currentColor;vertical-align:1px; }
@media(hover:hover) and (pointer:fine) {
  .arch-node:hover { transform:translateY(-3px); }
  .arch-node:hover::before { transform:scaleX(1); }
  .arch-control:hover { border-color:#80afea;background:#071421; }
}
.authority-note { --note-accent:#78a8eb;padding-left:14px;border-left:2px solid var(--note-accent);transition:border-color 240ms; }
.authority-note:nth-child(2) { --note-accent:#8eb7ee; }
.authority-note:nth-child(3) { --note-accent:#70c8d3; }
.authority-note:nth-child(4) { --note-accent:#83cdb0; }
.authority-note strong { color:var(--note-accent); }
.arch-evidence > span:first-child { color:#85bfcb; }
.arch-evidence-line { position:relative;overflow:hidden;background:#244953; }
.arch-evidence-line::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 32%,#83d9e3 47%,#c1eff2 51%,transparent 68%);transform:translateX(100%);animation:iv-evidence-return 4.2s linear infinite;animation-play-state:paused; }
@keyframes iv-evidence-return { 0%,12% { transform:translateX(100%); } 88%,100% { transform:translateX(-100%); } }
.arch-evidence strong { color:#8fd1d7; }
.architecture-stage[data-diagram-motion="running"] .arch-command::before,
.architecture-stage[data-diagram-motion="running"] .arch-evidence-line::after { animation-play-state:running; }
.degradation-readout div:nth-child(1) strong { color:#9dbfee; }
.degradation-readout div:nth-child(2) strong { color:#8fd1b4; }
.degradation-readout div:nth-child(3) strong { color:#82ced7; }
.architecture-stage[data-arch-mode="outage"] .arch-control { opacity:1;background:#120f08;border-color:#826635; }
.architecture-stage[data-arch-mode="outage"] .arch-control-state,
.architecture-stage[data-arch-mode="outage"] .arch-flow-label,
.architecture-stage[data-arch-mode="outage"] .arch-evidence strong,
.architecture-stage[data-arch-mode="outage"] .degradation-readout div:nth-child(1) strong,
.architecture-stage[data-arch-mode="outage"] .degradation-readout div:nth-child(3) strong { color:#d8b774; }
.architecture-stage[data-arch-mode="outage"] .arch-command { background:transparent;border-left:1px dashed #a38b56; }
.architecture-stage[data-arch-mode="outage"] .arch-command::after { background:#c5a568; }
.architecture-stage[data-arch-mode="outage"] .arch-command::before,
.architecture-stage[data-arch-mode="outage"] .arch-evidence-line::after { animation:none;opacity:0; }
.architecture-stage[data-arch-mode="outage"] .arch-evidence-line { background:#655632; }
.architecture-stage[data-arch-mode="outage"] .arch-node { background:var(--component-surface); }
.architecture-stage[data-arch-mode="failure"] .arch-node { --component-accent:#d6b57b;--component-surface:#100d07; }
.architecture-stage[data-arch-mode="failure"] .arch-node:last-child { --component-accent:#e79a94;--component-surface:#160b0d;background:var(--component-surface);border-color:#805253; }
.architecture-stage[data-arch-mode="failure"] .degradation-readout div:nth-child(2) strong { color:#e79a94; }
.overview-diagram { border-color:#365d86;background:#040c16; }
.overview-runtime { border-top-color:#32636c; }
.overview-runtime > .diagram-label { color:#79cad4; }
.overview-components span:nth-child(1) { color:#94b8ec;border-color:#34587b; }
.overview-components span:nth-child(2) { color:#77c9d1;border-color:#2c6066; }
.overview-components span:nth-child(3) { color:#8fcdb2;border-color:#355e4f; }
.overview-step > span { color:#7eafd9; }
@media(max-width:760px) {
  .arch-flow-label { font-size:11px; }
  .arch-caption { gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .arch-command::before,.arch-evidence-line::after { animation:none!important;opacity:0; }
  .arch-motion-toggle { display:none!important; }
}

@media(max-width:760px){.arch-modes{flex-wrap:wrap;overflow:visible}.arch-mode{flex:1 1 auto}}

/* Slightly larger reading text; headings and the established layout stay familiar. */
body { font-size:18px; }
.lede { font-size:clamp(19px,1.55vw,22px);line-height:1.65; }
.body-copy,.cap-detail-copy,.loop-narrative > div > p { font-size:18px;line-height:1.7; }
.hero-node p { font-size:16px;line-height:1.65; }
.loop-node p,.authority-note p,.arch-control p,.arch-node p,
.dash-view-head p,.meaning-block p,.trust-note p,.boundary-details p,
.recovery-fact span,.overview-diagram p,.footer-brand p { font-size:15px;line-height:1.65; }
.fragment-row p,.fragment-row span,.plan-list li { font-size:15px;line-height:1.65; }
.component-more { font-size:14px; }
.nav-trigger,.nav-login { font-size:15px; }
.nav-demo { font-size:14px; }
.button,.text-link { font-size:16px; }
.section-nav a,.hero-caption,.product-caption,.sample-note,.functional-label,
.hero-node small,.hero-node-state .state,.hero-operation span,.hero-operation strong,
.hero-console-head strong,.hero-console-head span,.loop-control,.loop-stage-button,
.loop-node-state,.cap-kicker,.cap-row span,.cap-row strong,.cap-primitive span,.cap-primitive strong,
.arch-control-state,.arch-node-state,.arch-boundary-head,.arch-evidence,
.arch-evidence strong,.degradation-readout span,.degradation-readout strong,
.request-step,.request-step small,.recovery-event i,.receipt-field span,.receipt-field strong,
.integration-row > *,.tool-overview > span,.connection-topline > span,.tool-hint,
.integration-boundary,.hero-motion-toggle { font-size:13px; }
.hero-operation div { min-width:0; }
.hero-operation strong { overflow-wrap:anywhere; }
.data-table td,.trust-table td,.recovery-event,.approval-result { font-size:14px; }
.ui-button,.arch-mode,.traffic-example,.dash-tab,.footer-group a { font-size:14px; }
#tool-description { font-size:15px; }
.overview-lede { font-size:20px; }
@media(max-width:760px) {
  body { font-size:17px; }
  .lede,.hero-copy .lede,.overview-lede { font-size:18px; }
  .body-copy,.cap-detail-copy,.loop-narrative > div > p { font-size:17px; }
  .hero-node p { font-size:16px; }
  .hero-category { font-size:14px; }
  .hero-console-head { gap:10px; }
}

/* Source Sans: balanced reading weights and display sizes matched to Plex's presence. */
body { font-size:19px;font-weight:400; }
.display { font-size:clamp(64px,6.6vw,102px);font-weight:400;line-height:1.04;letter-spacing:-.047em; }
.peak-title { font-size:clamp(48px,5.8vw,88px);font-weight:350; }
.major-title { font-size:clamp(37px,4.1vw,63px);font-weight:350; }
.editorial-title { font-size:clamp(33px,3.3vw,48px);font-weight:350; }
.overview-title { font-size:clamp(52px,6vw,90px);font-weight:400; }
.overview-section-title { font-size:clamp(33px,3.3vw,48px);font-weight:350; }
.body-copy,.cap-detail-copy,.loop-narrative > div > p { font-size:19px; }
.hero-node p { font-size:17px; }
.loop-node p,.authority-note p,.arch-control p,.arch-node p,
.dash-view-head p,.meaning-block p,.trust-note p,.boundary-details p,
.recovery-fact span,.overview-diagram p,.overview-step p,.footer-brand p,
.fragment-row p,.fragment-row span,.plan-list li,#tool-description { font-size:16px; }
.nav-trigger,.nav-login,.nav-demo,.overview-nav { font-size:16px; }
.nav-trigger,.nav-login,.nav-demo,.overview-nav,.button,.text-link { font-weight:600; }
.component-more,.ui-button,.arch-mode,.traffic-example,.dash-tab,.footer-group a { font-size:15px; }
@media(max-width:760px) {
 body { font-size:18px; }
 .display { font-size:clamp(36px,10.7vw,74px);line-height:1.08;letter-spacing:-.052em; }
 .peak-title { font-size:clamp(39px,10vw,67px); }
 .major-title { font-size:clamp(35px,8.9vw,52px); }
 .editorial-title { font-size:clamp(32px,8.4vw,47px); }
 .overview-title { font-size:47px; }
 .overview-section-title { font-size:35px; }
 .body-copy,.cap-detail-copy,.loop-narrative > div > p { font-size:18px; }
 .overview-nav { font-size:15px;gap:18px; }
}

/* Restrained surface finish: joined layouts, gently softened outer edges. */
:root { --radius-panel:8px;--radius-nested:6px;--radius-control:4px; }
.hero-console,.loop-controller,.dashboard,.architecture-stage,
.traffic-interface,.recovery-stage,.receipt,.evidence-ledger,.overview-diagram {
 border-radius:var(--radius-panel);
}
/* Match the child fills to their parent; keep focus rings and moving details unclipped. */
.hero-console-head,.loop-top,.dash-top,.arch-toolbar,.traffic-top,.recovery-head,.ledger-head {
 border-radius:calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px) 0 0;
}
.hero-operation,.loop-visual,.degradation-readout,.traffic-result,.approval-box {
 border-radius:0 0 calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px);
}
.ui-panel,.loop-node,.arch-control,.arch-boundary { border-radius:var(--radius-nested); }
.arch-boundary-head { border-radius:calc(var(--radius-nested) - 1px) calc(var(--radius-nested) - 1px) 0 0; }
.arch-node:first-child { border-bottom-left-radius:calc(var(--radius-nested) - 1px); }
.arch-node:last-child { border-bottom-right-radius:calc(var(--radius-nested) - 1px); }
.button,.nav-demo,.ui-button,.loop-control,.arch-mode,.traffic-example,
.hero-motion-toggle,.tool-cycle-control,.mobile-toggle { border-radius:var(--radius-control); }
.button,.nav-demo,.ui-button.primary,.loop-control.primary { box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%); }
.button,.nav-demo { transition:background-color 180ms,border-color 180ms,box-shadow 180ms,transform 180ms var(--ease); }
.hero-motion-toggle,.tool-cycle-control,.mobile-toggle {
 transition:color 180ms,border-color 180ms,background-color 180ms,transform 180ms var(--ease);
}
@media(hover:hover) and (pointer:fine) {
 .button:hover,.nav-demo:hover { box-shadow:inset 0 1px 0 rgb(255 255 255 / 22%); }
 .hero-motion-toggle:hover,.tool-cycle-control:hover,.mobile-toggle:hover { border-color:#71849d;color:#e7eef7;background-color:#080f18; }
}
.button:active,.nav-demo:active,.ui-button:not(:disabled):active,
.loop-control:not(:disabled):active,.arch-mode:active,.traffic-example:active,
.hero-motion-toggle:active,.tool-cycle-control:active,.mobile-toggle:active { transform:translateY(1px); }
@media(max-width:760px) {
 .arch-node:first-child { border-bottom-left-radius:0; }
 .arch-node:last-child { border-bottom-left-radius:calc(var(--radius-nested) - 1px); }
}
@media(prefers-reduced-motion:reduce) {
 .button,.nav-demo,.hero-motion-toggle,.tool-cycle-control,.mobile-toggle { transition:none; }
 .button:active,.nav-demo:active,.ui-button:not(:disabled):active,
 .loop-control:not(:disabled):active,.arch-mode:active,.traffic-example:active,
 .hero-motion-toggle:active,.tool-cycle-control:active,.mobile-toggle:active { transform:none; }
}

/* Corner ownership follows the desktop split and mobile stack. */
.nav-logo-link img.brand-logo { position:static;width:100%;height:100%;max-width:100%;object-fit:contain;transform:none;margin:0; }
.loop-narrative,.dash-tabs { border-bottom-left-radius:calc(var(--radius-panel) - 1px); }
.loop-visual { border-bottom-left-radius:0; }
.evidence-ledger.iv-entry-rule::after { left:var(--radius-panel);right:var(--radius-panel); }
@media(max-width:960px) {
 .loop-narrative,.dash-tabs { border-bottom-left-radius:0; }
 .loop-visual { border-bottom-left-radius:calc(var(--radius-panel) - 1px); }
}