/* ============================================================================
 * site-pages.css — shared chrome for the Nama INTERNAL pages
 * (Platform / Security / Customers / Company). The one-page home keeps its own
 * inline hero styles; everything an internal page needs that ISN'T already in
 * the section stylesheets lives here: brand tokens, base, the always-on nav,
 * and the compact dark page-hero band that replaces the full-screen graph.
 * ========================================================================== */

@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400;
  src: url('fonts/source-sans-pro-regular.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600;
  src: url('fonts/source-sans-pro-600.woff2') format('woff2'); font-display: swap;
}

:root {
  /* Brand ramp — Nama Design System */
  --brand-50:  #EFF6FF; --brand-100: #CBE0FF; --brand-200: #A6CBFF;
  --brand-300: #80B4FF; --brand-400: #589DFF; --brand-500: #2684FF;
  --brand-600: #006ADF; --brand-700: #004CA3; --brand-800: #002E69; --brand-900: #00163A;
  --ink:   #06090F; --ink-2: #0A0F1A;
  --line:  rgba(159, 176, 199, 0.16);
  --leaf:  #cdd9ec; --muted: #8A99B5; --muted-2: #6B7A96;
  --success: #16A34A; --success-bright: #34D399;
  --warning: #F59E0B; --danger: #EF4444; --info: #0EA5E9;
  --searcher: #06B6D4; --extractor: #14B8A6; --classifier: #EC4899; --comparator: #8B5CF6;
  --lav: #C9BEFF;
  --font-sans: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body.subpage {
  font-family: var(--font-sans);
  background: #FFFFFF;
  color: #09090B;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: #fff; color: #0B1220; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ── always-on nav: reuse .snav but keep it pinned on internal pages ── */
body.subpage .snav { transform: none; }
body.subpage .snav .sn-links a.cur { color: #09090B; font-weight: 600; }
body.subpage .snav .sn-links a.cur::after {
  content: ''; display: block; height: 2px; border-radius: 2px;
  background: var(--brand-500); margin-top: 3px;
}

/* ── page hero — compact dark band that opens every internal page ── */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #EAF0FA;
  padding: 138px 48px 72px;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(78% 80% at 78% 18%, rgba(38,132,255,0.18) 0%, transparent 58%),
    radial-gradient(60% 70% at 88% 30%, rgba(201,190,255,0.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 70%, #04060B 100%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,176,199,0.18), transparent);
}
.ph-const {
  position: absolute; right: 0; top: 0; width: 46%; height: 100%;
  pointer-events: none; opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.ph-wrap {
  position: relative; z-index: 1;
  max-width: 1248px; margin: 0 auto;
}
.ph-crumb {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--muted); text-decoration: none; margin-bottom: 26px;
  transition: color .15s ease;
}
.ph-crumb:hover { color: #C3CEE0; }
.ph-crumb svg { width: 13px; height: 13px; }
.ph-crumb b { color: #C3CEE0; font-weight: 600; }
.ph-eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-300);
  margin-bottom: 18px;
}
.ph-eyebrow .s { color: var(--brand-400); }
.page-hero h1 {
  font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.026em;
  font-weight: 600; color: #F4F8FF; margin: 0 0 20px; max-width: 880px; text-wrap: balance;
}
.page-hero h1 .accent { color: var(--brand-400); }
.page-hero h1 em {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-style: italic; font-weight: 500; color: #DCE6FF;
}
.ph-sub {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: #AEBBD2;
  font-weight: 400; margin: 0; max-width: 620px; text-wrap: pretty;
}
.ph-jump {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px;
}
.ph-jump a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: #C3CEE0; text-decoration: none;
  background: rgba(159,176,199,0.09); border: 1px solid rgba(159,176,199,0.20);
  border-radius: 999px; padding: 7px 15px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ph-jump a:hover { background: rgba(38,132,255,0.16); border-color: rgba(38,132,255,0.42); color: #EAF0FA; }
.ph-jump a svg { width: 13px; height: 13px; color: var(--brand-300); }

/* keep the editorial index spine numbering legible on the first light section */
body.subpage .sec:first-of-type { scroll-margin-top: 76px; }

/* the dark knowledge-graph interlude sits flush after a light section — give it
   a touch more top air on internal pages where it can lead */
body.subpage .s-graph .wrap,
body.subpage .s-sec .wrap { position: relative; }

/* ── cross-page "explore more" cards (home → internals, internals → siblings) ── */
.morenav { background: #F7F8FA; border-top: 1px solid #ECEDF1; }
.morenav .wrap { max-width: 1248px; margin: 0 auto; padding: 64px 48px 72px; }
.morenav .mn-lab {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #71717A; margin-bottom: 22px;
}
.morenav .mn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.morenav a.mn-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px;
  padding: 20px 20px 22px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.morenav a.mn-card:hover {
  border-color: var(--brand-300); box-shadow: 0 12px 30px -18px rgba(11,18,32,0.4); transform: translateY(-2px);
}
.morenav .mn-ic {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px;
  background: var(--brand-50); color: var(--brand-600); margin-bottom: 4px;
}
.morenav .mn-ic svg { width: 20px; height: 20px; }
.morenav .mn-t { font-size: 16px; font-weight: 600; color: #0B1220; display: flex; align-items: center; gap: 6px; }
.morenav .mn-t svg { width: 15px; height: 15px; color: #9CA1AB; transition: transform .15s ease, color .15s ease; }
.morenav a.mn-card:hover .mn-t svg { transform: translateX(3px); color: var(--brand-500); }
.morenav .mn-d { font-size: 13.5px; line-height: 1.5; color: #71717A; text-wrap: pretty; }

@media (max-width: 980px) {
  .page-hero { padding: 118px 24px 56px; }
  .ph-const { display: none; }
  .morenav .mn-grid { grid-template-columns: repeat(2, 1fr); }
  .morenav .wrap { padding: 48px 24px 56px; }
}
@media (max-width: 600px) {
  .morenav .mn-grid { grid-template-columns: 1fr; }
}