/* MonkOS Nodal Root Hero v1 — canonical 2026-08-07 */
.node-hero.nodal-root-hero{
  min-height:clamp(640px,calc(100svh - var(--ecosystem-strip-height) - var(--site-header-height)),860px);
  align-items:center;
  background:#07090d;
  isolation:isolate;
}
.node-hero.nodal-root-hero>img.nodal-hero-media{
  object-fit:cover!important;
  object-position:center center!important;
  filter:none!important;
  opacity:1!important;
}
.node-hero.nodal-root-hero .node-hero-overlay{
  z-index:1!important;
  top:0!important;
  height:100%!important;
  position:absolute!important;
  background:
    linear-gradient(90deg,rgba(5,7,12,.985) 0%,rgba(5,7,12,.94) 33%,rgba(5,7,12,.72) 46%,rgba(5,7,12,.22) 65%,rgba(5,7,12,.05) 100%),
    linear-gradient(180deg,rgba(5,7,12,.08),rgba(5,7,12,.42))!important;
}
.node-hero.nodal-root-hero .node-hero-copy{
  width:100%;
  max-width:780px!important;
  padding:clamp(4rem,7vw,6.5rem) 7vw!important;
  z-index:2!important;
}
.node-hero.nodal-root-hero .kicker{color:#aeb4c2!important;letter-spacing:.15em}
.node-hero.nodal-root-hero h1{
  color:#f5f6f7!important;
  font-family:var(--sans)!important;
  text-transform:none!important;
  letter-spacing:-.055em!important;
  line-height:.94!important;
  font-size:clamp(2.85rem,4.65vw,5.25rem)!important;
  max-width:13ch!important;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
  hyphens:none;
}
.node-hero.nodal-root-hero h1.hero-long{
  font-size:clamp(2.7rem,4.15vw,4.8rem)!important;
  max-width:15ch!important;
}
.node-hero.nodal-root-hero h1.hero-number{
  max-width:none!important;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em!important;
}
.node-hero.nodal-root-hero .motto{
  color:#eef0f2!important;
  max-width:48ch!important;
  font-family:var(--sans)!important;
  font-size:clamp(.8rem,1.1vw,1rem)!important;
  line-height:1.55!important;
  letter-spacing:.10em!important;
  text-transform:uppercase;
}
.node-hero.nodal-root-hero .lead{
  color:#c5cad3!important;
  max-width:56ch!important;
  font-size:clamp(1rem,1.25vw,1.2rem)!important;
  line-height:1.58!important;
}
.node-hero.nodal-root-hero .hero-orientation{
  color:#9ba3b1!important;
  max-width:68ch!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;
  font-size:clamp(.68rem,.9vw,.84rem)!important;
  line-height:1.65!important;
  letter-spacing:.055em!important;
  text-transform:uppercase;
}
.node-hero.nodal-root-hero .primary-action{margin-top:1.5rem!important}
.node-hero.nodal-root-hero:before{opacity:.10!important}
.node-hero.nodal-root-hero .legacy-opening-passage{display:none!important}

/* Neutralize the old fixed Trajon triple-hero behavior. */
.node-hero-triple.nodal-root-hero>img{
  z-index:0!important;top:0!important;height:100%!important;position:absolute!important;
}
.node-hero-triple.nodal-root-hero .node-hero-overlay{
  z-index:1!important;top:0!important;height:100%!important;position:absolute!important;
}
.node-hero-triple.nodal-root-hero .node-hero-copy{
  width:100%!important;max-width:780px!important;padding:clamp(4rem,7vw,6.5rem) 7vw!important;
}

/* Ecosystem root uses the same grammar but lets the graphic occupy its own column. */
.ecosystem-hero.nodal-ecosystem-hero{
  min-height:clamp(620px,calc(100svh - var(--ecosystem-strip-height) - var(--site-header-height)),820px);
  grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr)!important;
  align-items:center;
  gap:2vw!important;
  background:#07090d;
  overflow:hidden;
}
.ecosystem-hero.nodal-ecosystem-hero .hero-copy{z-index:2;max-width:720px}
.ecosystem-hero.nodal-ecosystem-hero .kicker{color:#aeb4c2!important;letter-spacing:.15em}
.ecosystem-hero.nodal-ecosystem-hero h1{
  color:#f5f6f7!important;
  font-family:var(--sans)!important;
  text-transform:none!important;
  letter-spacing:-.055em!important;
  line-height:.94!important;
  font-size:clamp(3rem,5.2vw,5.8rem)!important;
  max-width:11ch!important;
  text-wrap:balance;
  hyphens:none;
}
.ecosystem-hero.nodal-ecosystem-hero .lead{
  color:#c5cad3!important;max-width:52ch;font-size:clamp(1rem,1.25vw,1.2rem)!important;line-height:1.58!important;
}
.ecosystem-hero.nodal-ecosystem-hero .hero-mechanism{
  color:#9ba3b1!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;
  font-size:clamp(.68rem,.9vw,.84rem)!important;
  letter-spacing:.055em!important;
  line-height:1.65!important;
  margin:1.35rem 0 0;
}
.ecosystem-hero.nodal-ecosystem-hero .ecosystem-hero-visual{
  width:100%;height:auto;max-height:650px;object-fit:contain;object-position:center;display:block;z-index:1;
}
.ecosystem-hero.nodal-ecosystem-hero .signal-orbit{display:none!important}

[data-theme="light"] .node-hero.nodal-root-hero,
[data-theme="light"] .ecosystem-hero.nodal-ecosystem-hero{background:#07090d}
[data-theme="light"] .node-hero.nodal-root-hero .node-hero-overlay{
  background:
    linear-gradient(90deg,rgba(5,7,12,.985) 0%,rgba(5,7,12,.94) 33%,rgba(5,7,12,.72) 46%,rgba(5,7,12,.22) 65%,rgba(5,7,12,.05) 100%),
    linear-gradient(180deg,rgba(5,7,12,.08),rgba(5,7,12,.42))!important;
}

@media (max-width:900px){
  .ecosystem-hero.nodal-ecosystem-hero{grid-template-columns:1fr!important;min-height:auto!important}
  .ecosystem-hero.nodal-ecosystem-hero .ecosystem-hero-visual{max-height:500px;margin-top:-1.5rem}
}
@media (max-width:760px){
  /* Mobile: remove the ceremonial black void above the copy. Keep the
     topology present, but bring the statement into the first viewport. */
  .node-hero.nodal-root-hero{
    min-height:max(610px,calc(100svh - var(--ecosystem-strip-height) - var(--site-header-height)))!important;
    align-items:center!important;
  }
  .node-hero.nodal-root-hero>img.nodal-hero-media{object-position:68% 44%!important}
  .node-hero.nodal-root-hero .node-hero-overlay{
    background:linear-gradient(180deg,rgba(5,7,12,.12) 0%,rgba(5,7,12,.72) 46%,rgba(5,7,12,.98) 84%)!important;
  }
  .node-hero.nodal-root-hero .node-hero-copy{padding:2rem 1.3rem 2.9rem!important}
  .node-hero.nodal-root-hero h1{font-size:clamp(2.45rem,11vw,3.8rem)!important;max-width:12ch!important}
  .node-hero.nodal-root-hero h1.hero-long{font-size:clamp(2.35rem,10vw,3.45rem)!important;max-width:13ch!important}
  .node-hero.nodal-root-hero h1.hero-number{white-space:normal!important;max-width:12ch!important}
  .node-hero.nodal-root-hero .lead{max-width:40rem!important}
  .node-hero.nodal-root-hero .hero-orientation{font-size:.67rem!important;letter-spacing:.035em!important}
  .ecosystem-hero.nodal-ecosystem-hero{padding:4.2rem 1.3rem 3rem!important}
  .ecosystem-hero.nodal-ecosystem-hero h1{font-size:clamp(2.65rem,12vw,4rem)!important}
  .ecosystem-hero.nodal-ecosystem-hero .ecosystem-hero-visual{max-height:390px;margin-top:-2rem}
}
/* =========================================================
   FLOW CARD BLUE STANDARD v1
   Visual-only patch. No HTML, links, REST, slugs or reader logic.
   ========================================================= */

.flow-window{
  --flow-blue:#778bff;
  --flow-blue-line:rgba(119,139,255,.58);
  --flow-surface:#171a2a;
  --flow-surface-2:#1b1f33;
  --flow-text:#f5f4f0;
  --flow-muted:#b6bdd7;
  --flow-border:rgba(160,170,220,.18);
}

.flow-window .flow-cards{
  border:0 !important;
  gap:clamp(1rem,2vw,1.5rem) !important;
  background:transparent !important;
}

.flow-window .flow-card{
  min-width:0 !important;
  min-height:360px !important;
  border:1px solid var(--flow-border) !important;
  border-top:3px solid var(--flow-blue-line) !important;
  border-radius:1.25rem !important;
  background:linear-gradient(180deg,var(--flow-surface-2),var(--flow-surface)) !important;
  color:var(--flow-text) !important;
  overflow:hidden !important;
  transform:none !important;
  box-shadow:none !important;
}

.flow-window .flow-card:hover{
  z-index:2;
  background:linear-gradient(180deg,#202540,#191d31) !important;
  transform:translateY(-3px) !important;
}

.flow-window .flow-card-image,
.flow-window .flow-card-signal{
  display:none !important;
}

.flow-window .flow-card-copy{
  padding:clamp(1.45rem,2.5vw,2rem) !important;
  min-height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.flow-window .flow-card-copy small{
  color:var(--flow-blue) !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.flow-window .flow-card-copy strong{
  margin-top:2rem !important;
  color:var(--flow-text) !important;
  font-family:var(--serif) !important;
  font-size:clamp(1.55rem,2.4vw,2.25rem) !important;
  font-weight:600 !important;
  line-height:1.08 !important;
  letter-spacing:-.03em !important;
}

.flow-window .flow-card-copy p{
  margin:1rem 0 0 !important;
  color:var(--flow-muted) !important;
  font-size:.94rem !important;
  font-weight:300 !important;
  line-height:1.72 !important;
  -webkit-line-clamp:4 !important;
}

.flow-window .flow-card-copy em{
  margin-top:auto !important;
  padding-top:2.2rem !important;
  color:var(--flow-blue) !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}

.flow-window .flow-skeleton{
  min-height:360px !important;
  border-radius:1.25rem !important;
  border:1px solid var(--flow-border) !important;
  border-top:3px solid var(--flow-blue-line) !important;
  background:linear-gradient(180deg,var(--flow-surface-2),var(--flow-surface)) !important;
}

@media (max-width:760px){
  .flow-window .flow-card,
  .flow-window .flow-skeleton{
    min-height:300px !important;
  }
  .flow-window .flow-card-copy strong{
    font-size:clamp(1.45rem,7vw,2rem) !important;
  }
}