/*
  PUBLIC_SITE_PARTIAL_NOT_BLADE_PROVEN
  Surface: oble9
  M0 — temporary static surface. DO NOT promote to final.

  Governance: Blade and Temper are the governing authorities for this surface.
  OBLE9 is NOT built WITH Blade. It is governed BY Blade and Temper doctrine.
  No Blade components, no Blade tokens, no Blade import. Custom standalone surface.

  Gate: ROAD-MAP-OBLE9-SURFACE-STYLE-GOVERNANCE-GATE-2026-07-03
  DO NOT promote to final. Token system is intentionally standalone (custom :root vars).
  Font stack intentionally standalone (Bahnschrift / Aptos).
*/

:root {
  color-scheme: light;
  --ink: #111512;
  --muted: #4c544e;
  --paper: #f8faf7;
  --panel: #ffffff;
  --line: #c8d2c8;
  --field: #edf4ee;
  --signal: #12a150;
  --signal-deep: #087337;
  --caution: #d64b2a;
  --electric: #155cff;
  --shadow: 0 24px 80px rgba(17, 21, 18, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(90deg, rgba(17, 21, 18, 0.05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(17, 21, 18, 0.04) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--paper);
  color: var(--ink);
  font-family: "Aptos", "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgba(17, 21, 18, 0.12);
  background: rgba(248, 250, 247, 0.92);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0;
}

.brand-mark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--signal);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 9px 12px;
}

main {
  min-height: calc(100vh - 150px);
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: clamp(44px, 7vw, 92px) clamp(18px, 5vw, 72px) clamp(28px, 4vw, 56px);
}

.hero-copy {
  max-width: 720px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--signal-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 760px;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: clamp(48px, 9vw, 118px);
  line-height: 0.86;
  letter-spacing: 0;
}

.hero-summary {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 24px);
}

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 28px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--signal);
}

.button-primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 8px 8px 0 var(--signal);
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.button-secondary:hover {
  border-color: var(--signal);
  box-shadow: 4px 4px 0 rgba(18, 161, 80, 0.18);
}

.product-visual {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(17, 21, 18, 0.22);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.product-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-visual figcaption {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0 clamp(18px, 5vw, 72px);
  list-style: none;
}

.status-strip li {
  min-height: 66px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--field);
  padding: 14px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(28px, 4vw, 54px) clamp(18px, 5vw, 72px);
}

.content-card {
  min-height: 230px;
  border: 1px solid rgba(17, 21, 18, 0.14);
  border-radius: 8px;
  background: var(--panel);
  padding: 22px;
}

.content-card h2,
.waitlist-panel h2 {
  margin: 0 0 12px;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0;
}

.content-card p,
.waitlist-panel p {
  margin: 0;
  color: var(--muted);
}

.waitlist-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 clamp(18px, 5vw, 72px) clamp(42px, 5vw, 72px);
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: #e6f7ea;
  padding: clamp(22px, 4vw, 36px);
}

.console-shell {
  padding: 0 clamp(18px, 5vw, 72px) clamp(42px, 5vw, 72px);
}

.insightmap-shell {
  padding: 0 clamp(18px, 5vw, 72px) clamp(42px, 5vw, 72px);
}

.insightmap-intro {
  max-width: 980px;
  margin-bottom: 20px;
}

.insightmap-intro h2 {
  margin: 0;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
}

.insightmap-summary {
  max-width: 860px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.insightmap-chain {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  border: 1px solid rgba(17, 21, 18, 0.16);
  border-radius: 999px;
  background: var(--panel);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 6px 6px 0 rgba(18, 161, 80, 0.12);
}

.insightmap-chain span:nth-child(odd) {
  color: var(--ink);
}

.insightmap-node-grid-shell {
  display: grid;
  gap: 16px;
}

.insightmap-node {
  border: 1px solid rgba(17, 21, 18, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf6 100%);
  padding: 20px;
}

.insightmap-node.is-primary {
  border-left: 6px solid var(--electric);
  box-shadow: var(--shadow);
}

.insightmap-node-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.insightmap-node-head h3 {
  margin: 0;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 24px;
  line-height: 1.05;
}

.insightmap-node-summary {
  margin: 10px 0 0;
  color: var(--muted);
}

.insightmap-node-pill {
  flex: none;
  border: 1px solid rgba(17, 21, 18, 0.16);
  border-radius: 999px;
  background: #fff;
  padding: 7px 12px;
  color: var(--signal-deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.insightmap-node-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.insightmap-node-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 14px;
}

.insightmap-node-grid dt {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.insightmap-node-grid dd {
  margin: 4px 0 0;
  color: var(--muted);
  word-break: break-word;
}

.insightmap-node-details {
  margin-top: 16px;
  border-top: 1px solid rgba(17, 21, 18, 0.12);
  padding-top: 14px;
}

.insightmap-node-details summary {
  cursor: pointer;
  color: var(--signal-deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.security-event-json {
  overflow: auto;
  margin: 14px 0 0;
  border-radius: 10px;
  background: #111512;
  color: #eff6f0;
  padding: 16px;
  font-size: 12px;
  line-height: 1.5;
}

.security-event-json code {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
}

.console-intro {
  max-width: 900px;
  margin-bottom: 20px;
}

.console-intro h2 {
  margin: 0;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
}

.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 16px;
}

.console-panel {
  border: 1px solid rgba(17, 21, 18, 0.14);
  border-radius: 8px;
  background: var(--panel);
  padding: 20px;
  min-width: 0;
}

.threat-intel-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.threat-intel-table th,
.threat-intel-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.report-shell {
  padding: 0 clamp(18px, 5vw, 72px) clamp(42px, 5vw, 72px);
}

.report-intro {
  max-width: 980px;
  margin-bottom: 20px;
}

.report-intro h2 {
  margin: 0;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
}

.report-summary {
  max-width: 860px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.report-chain {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  border: 1px solid rgba(17, 21, 18, 0.16);
  border-radius: 999px;
  background: var(--panel);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 6px 6px 0 rgba(18, 161, 80, 0.12);
}

.report-proof-callout {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  border: 1px solid rgba(17, 21, 18, 0.14);
  border-radius: 8px;
  background: var(--field);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
}

.report-privacy {
  display: grid;
  gap: 6px;
  margin: 16px 0;
  border: 1px solid rgba(17, 21, 18, 0.12);
  border-radius: 8px;
  background: rgba(18, 161, 80, 0.06);
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.report-privacy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-privacy-stack {
  margin-top: 16px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.report-form {
  display: grid;
  gap: 14px;
}

.report-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.report-form span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-form input,
.report-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
}

.report-form textarea {
  min-height: 120px;
  resize: vertical;
}

.report-form input:focus,
.report-form textarea:focus {
  outline: 2px solid rgba(21, 92, 255, 0.26);
  outline-offset: 1px;
  border-color: var(--electric);
  background: #fff;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.report-actions-column {
  flex-direction: column;
  align-items: stretch;
}

.report-actions-column .button-secondary {
  justify-content: center;
  width: 100%;
}

.report-timeline {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.report-timeline li {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6fbf6;
  padding: 12px 14px;
}

.report-timeline strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.report-timeline span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.report-timeline p {
  margin: 8px 0 0;
  color: var(--ink);
}

.console-panel h3 {
  margin: 0 0 14px;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 22px;
}

.console-copy {
  margin: 0 0 16px;
  color: var(--muted);
}

.event-log {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-row {
  border: 1px solid var(--line);
  border-left: 5px solid var(--signal);
  border-radius: 8px;
  background: #f6fbf6;
  padding: 14px 16px;
}

.event-row strong,
.event-row span,
.event-row p {
  display: block;
}

.event-row strong {
  font-size: 15px;
}

.event-row span {
  color: var(--signal-deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 3px;
}

.event-row p {
  margin: 8px 0 0;
  color: var(--muted);
}

.event-row strong,
.event-row span,
.event-row p,
.proof-metrics dt,
.proof-metrics dd,
.console-copy {
  overflow-wrap: anywhere;
}

.proof-metrics {
  display: grid;
  gap: 12px;
  margin: 0;
}

.proof-metrics div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  padding: 12px 14px;
}

.proof-metrics dt {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.proof-metrics dd {
  margin: 4px 0 0;
  color: var(--muted);
}

.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px clamp(18px, 5vw, 72px);
  border-top: 1px solid rgba(17, 21, 18, 0.12);
  background: var(--ink);
  color: #fff;
}

.site-footer div {
  display: grid;
  gap: 6px;
}

.site-footer span,
.site-footer a {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 980px) {
  .hero-shell,
  .console-grid,
  .report-grid,
  .content-grid,
  .insightmap-node-grid {
    grid-template-columns: 1fr;
  }

  .status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .site-header {
    align-items: flex-start;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 18px;
    right: 18px;
    top: 60px;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 8px;
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .insightmap-node-head {
    flex-direction: column;
  }

  .hero-shell {
    padding-top: 34px;
  }

  .status-strip {
    grid-template-columns: 1fr;
  }

  .waitlist-panel,
  .site-footer {
    flex-direction: column;
  }

  .report-actions {
    flex-direction: column;
    align-items: stretch;
  }
}