/* ── Synaptic Intelligence — marketing site design system ──────────────────
   One stylesheet, shared by the single-page app (site/index.html) and every
   standalone page (pricing.html, security.html, faq.html, guide/*). Before
   this, the SPA carried its CSS in a <helmet><style> block that only it could
   see; a second page meant a second copy that drifted. This is the source of
   truth. Loaded from the real <head> so it applies before support.js runs.

   The tokens are oklch on purpose: every consumer is CSS or SVG, both resolve
   oklch() natively. Kept in step with the product app's
   src/synapticintelligence/web/client/src/styles/tokens.css — a change to the
   brand hue or the dark family belongs in both. */

:root {
  color-scheme: light dark;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'Literata', Georgia, serif;
  /* Two jobs, two faces. --mono is for things that are literally code -- a
     record id, a source string, an arithmetic method -- where fixed-width
     columns make them scannable. --label is the small uppercase meta text:
     eyebrows, statuses, counts. In a typewriter face those read as machine
     output rather than as chrome. */
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --label: 'IBM Plex Sans', system-ui, sans-serif;

  /* Surface ladder. Three levels, not two: the page, a card on the page, and
     a card on a card. Most of the depth on a well-built page is elevation, not
     colour, so the step between --panel and --panel-2 is what stops a nested
     panel reading as a flat rectangle drawn on top. In light it steps toward
     grey; the dark block below steps it toward light, which is the same move
     in the other direction. */
  --bg: oklch(0.976 0.008 248);
  --panel: oklch(1 0 0);
  --panel-2: oklch(0.958 0.011 248);
  --sink: oklch(0.962 0.013 248);
  --header-bg: oklch(1 0 0 / 0.72);

  --ink: oklch(0.250 0.030 258);
  --ink2: oklch(0.475 0.028 255);
  --ink3: oklch(0.625 0.022 255);

  --rule: oklch(0.903 0.014 250);
  --rule2: oklch(0.948 0.010 250);

  /* One accent. The site used to carry five hues -- brand blue plus the
     fact-kind colours (lookup teal, projection amber, alarm red). Those are
     load-bearing *inside the product*, where a badge's colour tells you how a
     figure was derived. On a marketing page they are decoration, and five
     colours on one screen reads as engineered rather than designed. They are
     kept below for the one place they still mean something -- the ask demo,
     which is a faithful screenshot of the product -- and nowhere else. */
  --brand: oklch(0.545 0.145 250);
  --brand-ink: oklch(0.445 0.150 252);
  --soft: oklch(0.958 0.032 250);
  --on-brand: oklch(1 0 0);

  /* The dark surface, as a family rather than one muddy navy. Carries the
     brand's own hue (250) at enough chroma to look deliberate; every dark
     band, gradient and stage is built from these so the CTA, the ask demo and
     the brain are one material. */
  --deep: oklch(0.322 0.082 250);
  --deep-lift: oklch(0.428 0.090 249);
  --deep-sink: oklch(0.243 0.066 252);
  --deep-line: oklch(0.478 0.068 250);
  --on-deep: oklch(0.96 0.010 250);
  --on-deep-dim: oklch(0.84 0.020 250);
  --on-deep-faint: oklch(0.76 0.030 250);
  --deep-eyebrow: oklch(0.78 0.090 220);
  --deep-cta: oklch(0.80 0.13 210);
  --deep-cta-hi: oklch(0.86 0.13 210);
  --deep-cta-ink: oklch(0.16 0.03 258);

  /* Ask-demo only. */
  --lookup: oklch(0.520 0.100 197);
  --calc: oklch(0.545 0.145 250);
  --proj: oklch(0.600 0.110 70);
  --alarm: oklch(0.545 0.155 25);

  --r: 14px;
  --rsm: 10px;
  --shadow: 0 1px 2px oklch(0.30 0.06 255 / 0.05), 0 8px 24px oklch(0.30 0.06 255 / 0.07);
  --shadow-lift: 0 2px 4px oklch(0.30 0.06 255 / 0.05), 0 16px 34px oklch(0.30 0.06 255 / 0.11);

  /* Section rhythm. Every section is the same shape -- an eyebrow, a two-line
     heading, a one-line lede, then the visual -- and the same vertical
     interval between them. These are the numbers that interval is made of, in
     one place, so a section written next month lands on the grid. */
  --pad-x: clamp(18px, 5vw, 32px);
  --pad-y: clamp(46px, 7vw, 76px);
  --measure: 1200px;
  --measure-read: 720px;
}

/* Dark mode follows the machine. No toggle: an enterprise buyer's laptop is
   already set the way they want it, and a control that remembers a choice is a
   second place the preference lives. Only the token values move; every
   selector below is written once. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.181 0.018 258);
    --panel: oklch(0.223 0.021 258);
    --panel-2: oklch(0.272 0.024 258);
    --sink: oklch(0.165 0.016 258);
    --header-bg: oklch(0.223 0.021 258 / 0.72);

    --ink: oklch(0.945 0.010 250);
    --ink2: oklch(0.765 0.020 250);
    --ink3: oklch(0.605 0.022 255);

    --rule: oklch(0.360 0.022 258);
    --rule2: oklch(0.300 0.018 258);

    /* Kept dark enough that white button text still clears contrast on it --
       several brand buttons in the SPA set their text colour inline and cannot
       read a token. --brand-ink is free to go lighter: it is only ever a link
       or a hover, on a dark ground. */
    --brand: oklch(0.635 0.150 252);
    --brand-ink: oklch(0.800 0.115 246);
    --soft: oklch(0.320 0.055 255);

    /* The dark bands have to separate from a page that is now itself dark, so
       they lift toward the light rather than sink. A hairline handles the
       rest (see .band--deep). */
    --deep: oklch(0.285 0.055 255);
    --deep-lift: oklch(0.365 0.065 252);
    --deep-sink: oklch(0.235 0.045 258);
    --deep-line: oklch(0.420 0.045 255);

    --lookup: oklch(0.740 0.095 197);
    --calc: oklch(0.720 0.130 250);
    --proj: oklch(0.780 0.100 75);
    --alarm: oklch(0.700 0.135 25);

    --shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 8px 24px oklch(0 0 0 / 0.40);
    --shadow-lift: 0 2px 4px oklch(0 0 0 / 0.30), 0 20px 40px oklch(0 0 0 / 0.50);
  }
}

/* ── Reset ────────────────────────────────────────────────────────────────*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* overflow-x on body alone does not clip a sticky element's overflow in iOS
   Safari -- the visual viewport there scrolls with <html>. Both need it. */
html { overflow-x: hidden; max-width: 100vw; }
body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  max-width: 100vw;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-ink); text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--soft); }

/* ── Motion ───────────────────────────────────────────────────────────────*/
@keyframes sirise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes sibeat { 0%, 100% { opacity: .35; transform: scale(1) } 50% { opacity: 1; transform: scale(1.35) } }
@keyframes brainflow { to { stroke-dashoffset: -140 } }
.brainflow { animation: brainflow 3.2s linear infinite; }
.brainedge, .brainflow { transition: opacity .22s ease; }
.brainnode { cursor: pointer; }
.brainnode circle { transition: opacity .22s ease, fill-opacity .22s ease; }
.brainlabel { transition: opacity .22s ease, color .22s ease; }
@keyframes brainpulse { 0% { transform: scale(1); opacity: .45 } 70% { opacity: .05 } 100% { transform: scale(8); opacity: 0 } }
.brainpulse { transform-box: fill-box; transform-origin: center; animation: brainpulse 5.6s ease-out infinite; }
@keyframes askflow { to { stroke-dashoffset: -120 } }
.askflow { animation: askflow 1.6s linear infinite; }
.asknode circle, .asknode text, .askedge { transition: opacity .45s ease, fill .45s ease, stroke .45s ease; }
@keyframes askbar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.askbar { transform-origin: left center; animation: askbar linear forwards; }
@keyframes askin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.askin { animation: askin .4s ease both; }
@media (prefers-reduced-motion: reduce) {
  .brainflow, .brainpulse, .askflow, .askbar, .askin { animation: none }
  .askbar { transform: none }
}

/* Scroll-driven reveal, deliberately progressive: a browser without
   animation-timeline never runs it and the content is simply present. No
   IntersectionObserver -- these nodes re-render on every state change and an
   observer would have to be re-attached each time. */
@keyframes sireveal { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: sireveal linear both; animation-timeline: view(); animation-range: entry 2% cover 20%; }
  }
}

/* ── Section rhythm ───────────────────────────────────────────────────────
   .section is the container: one max-width, one horizontal pad, one vertical
   pad, every time. .band wraps it in a full-bleed tinted stripe. .section-head
   is the eyebrow + heading + lede stack with a fixed interval, so the gap
   above a diagram is the same gap on every page. */
.section {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--pad-y) var(--pad-x);
}
.section--tight { padding-block: clamp(34px, 5vw, 52px); }
.section--read { max-width: var(--measure-read); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.band { border-top: 1px solid var(--rule2); border-bottom: 1px solid var(--rule2); background: var(--panel); }
.band--sink { background: var(--sink); }
.band--deep { background: var(--deep); color: var(--on-deep); }
/* In dark mode the deep band and the page are close in lightness; a hairline
   keeps the edge legible. Harmless in light mode. */
@media (prefers-color-scheme: dark) {
  .band--deep { border-block: 1px solid var(--deep-line); }
}
.band--deep a { color: var(--deep-cta); }

.section-head { margin-bottom: clamp(28px, 4vw, 40px); }
.section-head > :last-child { margin-bottom: 0; }

/* ── Type ─────────────────────────────────────────────────────────────────*/
.h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 7vw, 52px); line-height: 1.08;
  letter-spacing: -0.03em; margin: 0 0 20px;
  max-width: 22ch; text-wrap: balance;
}
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 5.6vw, 36px); line-height: 1.14;
  letter-spacing: -0.024em; margin: 0 0 16px;
  max-width: 28ch; text-wrap: balance;
}
.h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 3.2vw, 24px); line-height: 1.25;
  margin: 0 0 10px; text-wrap: pretty;
}
.dek {
  font-size: clamp(16px, 2.3vw, 18px); line-height: 1.6;
  color: var(--ink2); margin: 0 0 8px;
  max-width: 58ch; text-wrap: pretty;
}
.lede {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(19px, 3vw, 24px); line-height: 1.35;
  color: var(--ink); margin: 0;
  max-width: 40ch; text-wrap: balance;
}
.lede--brand {
  color: var(--brand-ink); padding-left: 16px;
  border-left: 2px solid var(--brand);
}

/* The one-line uppercase kicker above a heading. Was seven inline
   declarations repeated at every call site. */
.eyebrow {
  font-family: var(--label); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); max-width: 96px; }
.eyebrow--plain::after { display: none; }
.eyebrow--dark { color: var(--deep-eyebrow); }
.eyebrow--dark::after { background: oklch(1 0 0 / 0.14); }

/* The small uppercase meta line inside a card: a status, a count, a column
   header. Distinct from .eyebrow, which is a section kicker. */
.meta {
  font-family: var(--label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink3); margin: 0 0 8px;
}
.meta--brand { color: var(--brand-ink); }

/* A figure meant to be read at a glance, not a sentence with a number in it. */
.stat__n {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 5.6vw, 46px); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}

/* Prose body for the guide pages. */
.prose { max-width: var(--measure-read); }
.prose > * { max-width: 66ch; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--ink2); margin: 0 0 20px; text-wrap: pretty; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 4vw, 29px); letter-spacing: -0.02em; color: var(--ink); margin: 40px 0 14px; text-wrap: balance; }
.prose h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--ink); margin: 28px 0 10px; }
.prose ul, .prose ol { font-size: 17px; line-height: 1.7; color: var(--ink2); margin: 0 0 20px; padding-left: 22px; }
.prose li { margin: 0 0 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--brand);
  font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink);
}
.prose code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--panel-2); border: 1px solid var(--rule2);
  border-radius: 5px; padding: 1px 5px;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; }

/* ── Surfaces ─────────────────────────────────────────────────────────────*/
.card {
  border: 1px solid var(--rule2); border-radius: var(--r);
  background: var(--panel); box-shadow: var(--shadow);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.card--lift:hover {
  transform: translateY(-3px); border-color: color-mix(in oklch, var(--brand) 45%, var(--rule));
  box-shadow: var(--shadow-lift);
}
.card--dark { background: oklch(1 0 0 / .04); border-color: oklch(1 0 0 / .10); box-shadow: none; }
.card--dark.card--lift:hover { background: oklch(1 0 0 / .07); border-color: oklch(1 0 0 / .2); box-shadow: none; }

/* A card sitting inside a card. Steps to the third surface level and drops the
   shadow -- an inner element that floats reads as detached. */
.subcard {
  background: var(--panel-2); border: 1px solid var(--rule2);
  border-radius: var(--rsm); box-shadow: none;
}

/* A pill that is a control, not a label: segmented switches, question chips,
   tab strips. */
.pill {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink2);
  padding: 8px 15px; font-size: 13.5px; line-height: 1.25; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.pill:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-1px); }
.pill[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pill[aria-pressed="true"]:hover { background: var(--brand-ink); color: var(--on-brand); }
.pill--dark { border-color: oklch(1 0 0 / .17); background: oklch(1 0 0 / .05); color: oklch(0.86 0.02 250); }
.pill--dark:hover { border-color: var(--deep-cta); color: var(--deep-cta-hi); }
.pill--dark[aria-pressed="true"] { background: var(--deep-cta); border-color: transparent; color: var(--deep-cta-ink); }
.pill--dark[aria-pressed="true"]:hover { background: var(--deep-cta-hi); color: var(--deep-cta-ink); }

/* The small fixed-width chip: a connector name, a scope, a saved-report id. */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  color: var(--ink2); background: var(--sink);
  border: 1px solid var(--rule2); border-radius: 999px; padding: 4px 11px;
}

/* The primary and secondary buttons, as classes rather than a shadow string
   pasted at every call site. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 13px 26px; font-size: 15px; white-space: nowrap;
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 2px 12px oklch(0.55 0.14 250 / .28);
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--brand-ink); color: var(--on-brand); text-decoration: none; transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--ink); box-shadow: none;
  border: 1px solid var(--rule);
}
.btn--ghost:hover { background: var(--sink); color: var(--ink); border-color: var(--brand); }
.btn--on-deep { background: var(--deep-cta); color: var(--deep-cta-ink); box-shadow: none; }
.btn--on-deep:hover { background: var(--deep-cta-hi); color: var(--deep-cta-ink); }

/* ── Glass header ─────────────────────────────────────────────────────────
   The one move that carries most of the "modern" read: a translucent bar the
   page scrolls under, with the content behind it blurred and its colour
   pushed so it does not go grey. */
.siteheader {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  border-bottom: 1px solid var(--rule2);
  box-shadow: 0 1px 3px oklch(0.30 0.06 255 / .04);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .siteheader { background: var(--panel); }
}
.siteheader__inner {
  max-width: var(--measure); margin-inline: auto;
  padding: 13px var(--pad-x); display: flex; align-items: center; gap: 12px;
}

/* ── The connected-systems marquee ───────────────────────────────────────*/
@keyframes railslide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.rail { display: flex; width: max-content; animation: railslide 46s linear infinite; }
.rail-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rail-mask:hover .rail { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rail { animation: none } }

/* ── A row of chips that scrolls rather than wraps ───────────────────────
   Six chips wrapping to two lines strand one on the second, which reads as a
   mistake; a phone's own answer to a chip set is one line pushed sideways. */
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 759px) {
  .chiprow {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); padding-bottom: 2px;
  }
  .chiprow::-webkit-scrollbar { display: none; }
  .chiprow > * { flex: 0 0 auto; scroll-snap-align: start; }
  .pill--wide { width: 100%; justify-content: center; }
}

/* ── Standalone-page chrome (not the SPA) ────────────────────────────────*/
.pagenav {
  display: flex; align-items: center; gap: 18px;
  max-width: var(--measure); margin-inline: auto;
  padding: 16px var(--pad-x); font-size: 14px;
}
.pagenav a { color: var(--ink2); white-space: nowrap; }
.pagenav a:hover { color: var(--brand); text-decoration: none; }
.pagenav a.btn { color: var(--on-brand); }
.pagenav__spacer { flex: 1 1 auto; }
/* On a phone the middle links would push the CTA off the edge. The brand
   mark links home and the standalone pages cross-link in their footers, so
   dropping the row here loses nothing. */
@media (max-width: 599px) {
  .pagenav { gap: 12px; }
  .pagenav > a:not(.brandmark):not(.btn) { display: none; }
  .pagenav .btn { padding: 8px 14px; font-size: 13px; }
}
.brandmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.brandmark svg { color: var(--brand); display: block; }
.brandmark span { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }

.pagefoot {
  border-top: 1px solid var(--rule); background: var(--panel);
  margin-top: clamp(56px, 9vw, 96px);
}
.pagefoot__inner {
  max-width: var(--measure); margin-inline: auto;
  padding: 40px var(--pad-x); display: flex; gap: 28px 40px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink2);
}
.pagefoot a { color: var(--ink2); }
.pagefoot a:hover { color: var(--brand); text-decoration: none; }

@media (max-width: 559px) {
  :root { --pad-y: clamp(38px, 11vw, 52px); }
}
