/* Pyrnova public website. Revision B.
   Design system reuses the canonical product grammar from pyrnova/ops_web
   (material.css / investigation.css): near-black architectural surfaces, restrained
   semantic color, monospaced metadata, observed-vs-assessed panes, evidence chips,
   disposition semantics, AS OF. Canonical brand cyan (#25cfe8) is used as signal only. */
:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --bg-2: #0e1114;
  --panel: #14181d;
  --panel-2: #1a1f26;
  --panel-3: #10141a;
  --line: #262d36;
  --line-2: #333c47;
  --ink: #e7ecf2;
  --ink-dim: #97a2b0;
  --ink-faint: #6a7481;
  --threat: #d66b6b;
  --threat-bg: #241618;
  --opportunity: #6fae8f;
  --opportunity-bg: #14201a;
  --monitoring: #b8a06a;
  --monitoring-bg: #211d13;
  --accent: #8fa9c9;
  --observed: #7fa8c9;
  --assessed: #b79bd0;
  --signal: #25cfe8;
  --signal-dim: #1c7f8f;
  --max: 1180px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sig { color: var(--signal); }

/* ---------- micro-labels (canonical product treatment) ---------- */
.label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.label.accent { color: var(--accent); }
.label.signal { color: var(--signal); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 26px calc(13px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .brandmark { width: 26px; height: 26px; display: block; flex: none; }
.brand .mark { font-weight: 700; letter-spacing: 0.32em; font-size: 15px; color: var(--ink); }
.brand .module {
  color: var(--ink-faint); letter-spacing: 0.16em; font-size: 10px;
  text-transform: uppercase; padding-left: 12px; border-left: 1px solid var(--line-2);
}
.nav-wrap { margin-left: auto; display: flex; align-items: center; gap: 20px; }
nav.primary { display: flex; gap: 22px; }
nav.primary a {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
nav.primary a:hover { color: var(--ink); }
nav.primary a[aria-current] { color: var(--ink); border-bottom-color: var(--signal); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); color: var(--ink);
  padding: 8px 14px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; border-radius: 3px; white-space: nowrap; background: var(--panel);
}
.nav-cta:hover { border-color: var(--signal); }
.nav-cta[aria-current] { border-color: var(--signal); }
.nav-cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }

main { max-width: var(--max); margin: 0 auto; padding: 0 26px; }

/* ---------- shared layout ---------- */
.section {
  padding: 60px 0;
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: 0; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.sec-head h2 {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  font-weight: 650;
}
.sec-head .sec-meta { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; }
.sec-intro { color: var(--ink-dim); max-width: 68ch; font-size: 15px; margin-bottom: 26px; }
.sec-intro strong { color: var(--ink); font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- hero / product theatre ---------- */
.hero {
  position: relative;
  overflow: hidden; /* clip the decorative telemetry field so its bleed never causes page overflow */
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
  padding: 60px 0 66px;
}
.hero-field { position: absolute; inset: -40px -26px auto; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-field svg { width: 100%; height: 460px; opacity: 0.5; display: block; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .status-line {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 5px 11px; background: var(--panel);
}
.hero-copy .status-line .live { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.hero h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.15rem); line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 600; max-width: 15ch;
}
.hero h1 .l2 { color: var(--ink); }
.hero .lead {
  color: var(--ink-dim); font-size: 1.02rem; line-height: 1.6; margin: 22px 0 30px; max-width: 46ch;
}
.hero-spec { position: relative; z-index: 1; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.button {
  display: inline-flex; align-items: center; gap: 12px; justify-content: center;
  background: var(--signal); border: 1px solid var(--signal); color: #04222a;
  /* 18px keeps both hero CTAs on one line in the hero copy column. */
  padding: 12px 18px; font: 600 0.86rem/1.3 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; min-height: 46px; text-decoration: none; border-radius: 3px;
}
.button:hover { background: #55e0f2; }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.button.secondary:hover { border-color: var(--signal); background: var(--panel); }
.button .arrow { font-family: var(--mono); }

/* ---------- Material Change specimen (canonical .change grammar) ---------- */
.spec {
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel);
  border-left: 3px solid var(--line-2); overflow: hidden;
}
.spec.threat { border-left-color: var(--threat); }
.spec.opportunity { border-left-color: var(--opportunity); }
.spec.monitoring { border-left-color: var(--monitoring); }
.spec-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; background: var(--panel-3); border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.spec-caption .synthetic { color: var(--monitoring); }
.spec-body { padding: 16px 18px; }
.spec-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.disposition { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; padding: 3px 9px; border-radius: 3px; }
.disposition.threat { color: var(--threat); background: var(--threat-bg); }
.disposition.opportunity { color: var(--opportunity); background: var(--opportunity-bg); }
.disposition.monitoring { color: var(--monitoring); background: var(--monitoring-bg); }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink-dim);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 8px; white-space: nowrap;
}
.badge b { color: var(--ink); font-weight: 650; margin-left: 5px; }
.spec .headline { font-size: 16px; margin: 13px 0 11px; font-weight: 600; line-height: 1.35; }
.why {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 9px 12px;
  background: var(--panel-2); border-radius: 4px; margin-bottom: 14px;
}
.why-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.why-detail { color: var(--ink); font-size: 13px; }
.relevance-basis { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.05em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pane { border: 1px solid var(--line); border-radius: 4px; padding: 11px 13px; background: var(--panel-3); }
.pane-label { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.pane.observed .pane-label { color: var(--observed); }
.pane.assessed .pane-label { color: var(--assessed); }
.facts { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 5px 12px; }
.facts dt { color: var(--ink-faint); font-size: 12px; overflow-wrap: break-word; }
.facts dd { margin: 0; color: var(--ink); font-size: 12px; text-align: right; overflow-wrap: break-word; }
.facts dd.mono { font-family: var(--mono); font-size: 11px; }
.evidence { margin-top: 13px; font-size: 12px; color: var(--ink-dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.evidence .chip { border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 8px; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; }
.evidence .chip.raw { color: var(--observed); border-color: #2c4256; }
.evidence .chip.single { color: var(--monitoring); border-color: #3a3320; }
.uncertainty { margin-top: 13px; font-size: 12px; color: var(--ink-dim); }
.uncertainty .u-label { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; margin-right: 6px; }
.uncertainty ul { margin: 6px 0 0; padding-left: 18px; }
.uncertainty li { margin: 3px 0; }
.spec-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim); flex-wrap: wrap;
}
.spec-foot .asof { font-family: var(--mono); color: var(--ink); }
.spec-foot .prov { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* ---------- intelligence chain (METHOD) ---------- */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.chain .node {
  padding: 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--panel); position: relative;
}
.chain .node .n-step { font-family: var(--mono); font-size: 11px; color: var(--signal); }
.chain .node h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 10px 0 7px; font-weight: 600; }
.chain .node p { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }

/* ---------- temporal axis (RESEARCH / TRUST AS OF) ---------- */
.temporal { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 20px; }
.temporal svg { width: 100%; height: auto; display: block; }

/* ---------- object cards / register ---------- */
.obj {
  border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 5px;
  background: var(--panel); padding: 16px 18px;
}
.obj.ok { border-left-color: var(--opportunity); }
.obj.hold { border-left-color: var(--monitoring); }
.obj .obj-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.obj.ok .obj-label { color: var(--opportunity); }
.obj.hold .obj-label { color: var(--monitoring); }
.obj h3 { font-size: 14px; margin: 8px 0 8px; font-weight: 600; color: var(--ink); }
.obj p { font-size: 13px; color: var(--ink-dim); line-height: 1.55; }
.obj p + p { margin-top: 8px; }

/* investigation result rows */
.result {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 5px;
  background: var(--panel); padding: 12px 15px; margin-bottom: 10px;
}
.result .r-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.result .r-meta { font-size: 12px; color: var(--ink-dim); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.result .r-type { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.result .r-right { text-align: right; font-size: 11px; color: var(--ink-faint); white-space: nowrap; font-family: var(--mono); }
.idrow { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0; }
.idchip { font-size: 12px; color: var(--ink-dim); border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 10px; font-family: var(--mono); }
.idchip b { color: var(--ink); font-weight: 600; margin-left: 6px; }

/* history / outcome rows */
.hist .h-row { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hist .h-row:last-child { border-bottom: none; }
.hist .h-at { color: var(--ink-faint); font-size: 12px; min-width: 108px; font-family: var(--mono); }
.hist .h-kind { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; min-width: 128px; color: var(--accent); padding-top: 1px; }
.hist .h-sum { color: var(--ink); font-size: 13px; }

/* metadata rows (COMPANY) */
.meta-rows { border-top: 1px solid var(--line); }
.meta-rows > div { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
/* The section's own top border closes the list, so the last row must not add a
   second rule with a full section gap between the two. */
.meta-rows > div:last-child { border-bottom: 0; }
.meta-rows dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.meta-rows dd { margin: 0; color: var(--ink-dim); font-size: 14px; }
.meta-rows dd b { color: var(--ink); font-weight: 600; }

/* notice */
.notice {
  border: 1px solid var(--line-2); border-left: 3px solid var(--signal); border-radius: 5px;
  background: var(--panel); padding: 16px 18px;
}
.notice .n-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.notice p { font-size: 13px; color: var(--ink-dim); line-height: 1.55; margin: 8px 0 0; }
.notice p strong { color: var(--ink); font-weight: 600; }

/* page heading */
.page-head { padding: 46px 0 30px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); line-height: 1.12; letter-spacing: -0.015em; font-weight: 600; margin: 12px 0 0; max-width: 24ch; }
.page-head .lead { color: var(--ink-dim); font-size: 1rem; margin-top: 14px; max-width: 64ch; }
.page-head .review-date { font-size: 11px; color: var(--ink-faint); margin-top: 16px; font-family: var(--mono); }

/* closing */
.closing {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 46px 0 56px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.closing h2 { font-size: 1.3rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; max-width: 34ch; }
.closing p { color: var(--ink-dim); font-size: 13px; margin-top: 8px; max-width: 52ch; }

/* footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  padding: 34px 26px calc(30px + env(safe-area-inset-bottom, 0px));
}
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.footer-inner .f-brand { display: flex; align-items: center; gap: 12px; }
.footer-inner .f-brand .brandmark { width: 24px; height: 24px; }
.footer-inner .f-brand .mark { font-weight: 700; letter-spacing: 0.3em; font-size: 13px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.site-footer nav a { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.f-note { max-width: var(--max); margin: 22px auto 0; font-size: 11px; color: var(--ink-faint); line-height: 1.6; }

.skip-link { position: absolute; left: 14px; top: -60px; z-index: 40; background: var(--signal); color: #04222a; padding: 10px 14px; border-radius: 3px; }
.skip-link:focus { top: 10px; }
#main:focus { outline: none; }

/* ---------- motion (subtle, signal only) ---------- */
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-spec { animation: rise 0.6s ease-out both; }
.live, .nav-cta .dot, .hero-copy .status-line .live { animation: pulse 2.6s ease-in-out infinite; }
.sig-node { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; }
.trace-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 2.4s ease-out 0.3s forwards; pathLength: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .trace-path { stroke-dashoffset: 0; }
  .hero-spec { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  /* The decorative trace scales with its container, so below this width its baked-in
     labels fall under ~9px and stop being legible. It is aria-hidden and the same
     eight steps are stated at full size in the chain cards below, so hide it rather
     than render sub-legible text. */
  .signal-trace { display: none; }
}
@media (max-width: 900px) {
  /* The single-line masthead needs up to ~860px of intrinsic width, so it must wrap
     from here rather than at the content breakpoint below. All routes stay visible:
     wrap the module strip instead of hiding routes in a scroller. */
  html { scroll-padding-top: 128px; }
  .masthead { flex-wrap: wrap; gap: 12px 18px; }
  .nav-wrap { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 12px 16px;
    border-top: 1px solid var(--line); padding-top: 12px; }
  nav.primary { width: auto; flex-wrap: wrap; gap: 12px 16px; }
  .nav-cta { margin-left: auto; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 48px; }
  .hero-field { inset: -20px -26px auto; }
  .hero-field svg { height: 300px; opacity: 0.4; }
  .chain { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  /* Two specimens side by side squeeze the observed/assessment panes until their
     values are clipped by the card, so give each one the full column here. */
  .grid-2 { grid-template-columns: 1fr; }
  /* The AS OF diagram scales with its container, and its labels fall to about 4px
     at phone width. It carries real content and has no prose equivalent beside it,
     so hold it at a legible size and let the panel scroll rather than shrink it. */
  .temporal { overflow-x: auto; }
  .temporal svg { min-width: 820px; }
}
@media (max-width: 720px) {
  .masthead { padding: 12px 18px; }
  .brand .module { display: none; }
  nav.primary a { padding: 2px 0; font-size: 11.5px; }
  main { padding: 0 18px; }
  .section { padding: 44px 0; }
  .grid-2, .grid-3, .split { grid-template-columns: 1fr; }
  .chain { grid-template-columns: 1fr; }
  /* Narrow-screen readability: nudge the smallest product metadata up 1-2px and give the
     specimen more room, without inflating the headline or losing information density. */
  .spec-body { padding: 16px 16px 18px; }
  .spec .headline { font-size: 16.5px; }
  .spec-caption { font-size: 10.5px; letter-spacing: 0.1em; }
  .why-detail { font-size: 14px; }
  .relevance-basis { font-size: 12px; }
  .badge { font-size: 12px; }
  .facts { gap: 7px 12px; }
  .facts dt, .facts dd { font-size: 13px; }
  .facts dd.mono { font-size: 12px; }
  .evidence { font-size: 13px; }
  .evidence .chip { font-size: 12px; padding: 3px 9px; }
  .uncertainty { font-size: 12.5px; }
  .spec-foot { font-size: 12.5px; }
  .spec-foot .prov { font-size: 11.5px; }
  .obj p { font-size: 13.5px; }
  .result .r-meta, .result .r-right { font-size: 12.5px; }
  .idchip { font-size: 12.5px; }
  .hist .h-at { font-size: 12.5px; }
  .hist .h-sum { font-size: 13.5px; }
  .meta-rows dd { font-size: 14.5px; }
  .temporal { padding: 16px; }
  .facts dd { text-align: left; }
  .meta-rows > div { grid-template-columns: 1fr; gap: 6px; }
  .hist .h-row { flex-direction: column; gap: 3px; }
  /* The exposure column is monospaced and unshrinkable, so stack it rather than
     letting it push the row past the viewport. */
  .result { flex-direction: column; align-items: flex-start; gap: 8px; }
  .result .r-right { text-align: left; white-space: normal; }
  .hist .h-at, .hist .h-kind { min-width: 0; }
  .closing { flex-direction: column; align-items: flex-start; gap: 18px; }
  .site-footer nav { gap: 14px 18px; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.95rem; }
  .cta-row .button { width: 100%; }
  .badges { width: 100%; }
}
@media print {
  .masthead, .site-footer, .button, .nav-cta, .hero-field { display: none; }
  body { background: #fff; color: #111; }
  main { max-width: none; }
}