/* Brainwave Neurosim — marketing + legal site styles.
   Self-contained (no external fonts/CDN), matching the app's gold-on-black monitor aesthetic
   so the site and the tool read as one product. Committed to a dark theme (the product IS a
   dark monitor). Served by Cloudflare Pages from web/public/. */

:root {
  --bg: #000000;
  --panel: #0b0b0b;
  --panel-2: #101010;
  --border: #1c1c1c;
  --text: #c9c9c9;
  --text-dim: #8a8a8a;
  --text-faint: #6b6b6b;
  --accent: #e5a83b;
  --accent-dim: #6b5a33;
  --accent-bright: #f0b640;
  --danger: #d98a8a;
  --mono: 'Courier New', Courier, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1000px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── Top navigation ── */
.site-nav {
  border-bottom: 1px solid var(--border);
  background: #050505;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* Logo + descriptor share the left of the bar, as they do in the app's own header. min-width:0
   lets the group shrink before the nav links do, rather than pushing them off-screen. */
.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
/* Mirrors the app's .monitor-title (mono, bold, wide tracking) but in the dimmed gold rather
   than full accent: at 38px the logo beside it is already carrying the gold, and two gold
   elements at different sizes competed. Swap to var(--accent) to match the app exactly. */
.nav-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-dim);
  white-space: nowrap;
}

/* The wordmark is now the app's own masthead SVG (injected as {{BRAND_LOGO}} by build-web.js),
   not styled text — so the landing page and the monitor show the same logo, spike-and-wave I
   and oscillating W included. `color` is what tints it: the SVG paints with currentColor.
   Height drives the size; the viewBox (-1 0 92 28) supplies the aspect, so no width is set. */
.wordmark {
  color: var(--accent);
  display: flex;
  align-items: center;
  flex: none;
}
.wordmark svg {
  display: block;
  height: 38px;
  width: auto;
}
.nav-links { display: flex; align-items: center; gap: 22px; }
/* :not(.btn) matters — a bare `.nav-links a` rule outranks `.btn-solid` on specificity and
   repainted the gold Sign-in button's label grey-on-gold (an unreadable contrast failure). */
.nav-links a:not(.btn) { color: var(--text-dim); font-size: 14px; }
.nav-links a:not(.btn):hover { color: var(--accent); text-decoration: none; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: rgba(229, 168, 59, 0.12); color: var(--accent-bright); text-decoration: none; }
.btn-solid { background: var(--accent); color: #1a1205; border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-bright); color: #1a1205; }
.btn-ghost { border-color: var(--accent-dim); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* ── Hero ── */
.hero { padding: 72px 0 40px; text-align: center; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 18px;
}
/* Headline and lead are both 20% down from where they were (42 -> 34, 19 -> 15). max-width is
   unchanged, so the lead now sets to a longer measure — which suits it, since the copy grew to
   48 words at the same time. */
.hero h1 {
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: #f2f2f2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero p.lead {
  font-size: 15px;
  color: var(--text-dim);
  max-width: 680px;
  margin: 0 auto 28px;
}
/* Kept for 404.html, which still pairs two buttons. The landing page has no button rows left:
   the hero's went, and so did the contact callout's. `.cta-note` went with them — nothing uses
   it now that the contact address sits in the prose. */
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Disclaimer band ── */
.disclaimer-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  padding: 16px 0;
}
.disclaimer-band .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.disclaimer-band .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  padding: 3px 9px;
  white-space: nowrap;
}
.disclaimer-band p { margin: 0; font-size: 14px; color: var(--text-dim); }

/* ── Sections ── */
/* scroll-margin-top keeps a #hash target clear of the sticky bar, which otherwise covers the
   first ~66px of whatever you jumped to. The monitor figure is centred by script instead, so
   this only governs #who and #contact — and it still applies if the script never runs. */
section.block { padding: 44px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 84px; }
/* The h2 carries the section on its own — the 26px `.subhead` line that used to sit beneath it
   ("Anatomy of the monitor.", "Built for the people doing the teaching.") was connective tissue
   and cost 32px of margin each, so it and its rule are gone. Hence the larger margin here: the
   heading now abuts content directly. `.feature-grid` went with it; `.card` / `.audience` are
   back below, since the audience summaries were restored. */
section.block h2 {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}

/* Audience: three cards with their summaries, restored after a spell as a compact one-line
   row. `.card` lives here rather than in a shared block because this is now its only user. */
.audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; color: var(--accent-bright); font-weight: 600; }
.card p { margin: 0; font-size: 14.5px; color: var(--text); }

/* ── Anatomy of the monitor ──────────────────────────────────────────────────────────────
   Was a responsive rebuild of the A4 print poster's SVG schematic; now a real screenshot of
   the running app at moderate-dose propofol. The `anatomy-` prefix is kept because the print
   poster (EEG-monitor-anatomy.html) is a fixed 1122x794 @page A4 sheet using bare `h1` /
   `.eyebrow` / `.lead` / `.head` / `.foot` selectors that would collide with this stylesheet.
   The poster and the PowerPoint keep their own longer callout copy — do not resync them. */

/* aspect-ratio matches the 1600x724 source, so the browser reserves the exact height before
   the JPEG arrives and the legend below never jumps. The border and radius stand in for the
   removed .anatomy-scroll box so the figure still reads as a framed device, and overflow
   hidden keeps the corners clipped. No horizontal scroll box is needed any more: a photo
   scales down legibly in a way the min-width:660px schematic could not. */
.hero-shot {
  margin: 0 0 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  line-height: 0;             /* kill the inline-image descender gap */
}
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 724;
}

/* Feature legend. Unnumbered since the schematic's 1-12 markers went with it. */
.anatomy-legend {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 24px;
}
/* A gold rule where the numbered disc used to sit — keeps the scanned left edge the numerals
   gave the grid, without implying a reference into the picture that no longer exists. */
.anatomy-legend li {
  border-left: 2px solid var(--accent-dim);
  padding-left: 12px;
}
.anatomy-legend h3 {
  margin: 0 0 2px;
  font-size: 15px;
  color: var(--accent-bright);
  font-weight: 600;
  line-height: 1.4;
}
.anatomy-legend p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; }

/* The band key that sat beneath the legend (delta 0.5-4 Hz … gamma 30-100 Hz, each chip with a
   coloured left edge) was removed by request along with its `.anatomy-bands` rules. The bands
   are still named where they do work: legend item "Manual composition" lists them, and the
   spectrogram in the screenshot shows them. */

/* ── Closing callout ── */
.callout {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
}
.callout h3 { margin: 0 0 10px; font-size: 22px; color: #f2f2f2; }
.callout p { margin: 0 auto 20px; max-width: 620px; color: var(--text-dim); }

/* ── Footer ── */
.site-footer { padding: 40px 0 56px; color: var(--text-faint); font-size: 13px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 16px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); }
.footer-fine { color: var(--text-faint); line-height: 1.6; max-width: 760px; }

/* ── Legal / prose pages ── */
.legal { padding: 48px 0 72px; }
.legal .doc { max-width: 760px; margin: 0 auto; }
.legal .draft-note {
  border: 1px dashed var(--accent-dim);
  border-radius: 6px;
  background: rgba(229, 168, 59, 0.05);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 32px;
}
.legal h1 { font-size: 32px; color: #f2f2f2; margin: 0 0 6px; }
.legal .updated { color: var(--text-faint); font-size: 13px; margin: 0 0 32px; }
.legal h2 { font-size: 19px; color: var(--accent-bright); margin: 34px 0 10px; }
.legal p, .legal li { color: var(--text-dim); font-size: 15.5px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .placeholder { color: var(--danger); font-family: var(--mono); font-size: 0.9em; }
.legal a.back { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }

/* Contact page — the address shown as copyable text beside its buttons, so a visitor with no
   mail client registered can still take the address away. */
.copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
}
.copy-row code {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent-bright);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
  user-select: all;            /* one click selects the whole address */
  word-break: break-all;
}
.copy-row .btn { padding: 9px 14px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 48px 0 32px; }
  /* Both stepped down 20% with their desktop counterparts (32 -> 26, 17 -> 14). */
  .hero h1 { font-size: 26px; }
  .hero p.lead { font-size: 14px; }
  section.block { padding: 34px 0; }

  /* The nav used to overflow the viewport at 375px: the wordmark plus the remaining link and
     the Sign-in button were wider than the screen, so the whole PAGE scrolled sideways. Shrink
     the logo and tighten the button rather than letting it wrap, which would double the sticky
     header's height and eat the viewport. The old `.wordmark { font-size }` rule that used to
     do this no longer bites — the wordmark is an SVG now, so height is the lever. */
  .site-nav .wrap { gap: 10px; }
  .wordmark svg { height: 26px; }
  /* The descriptor is the first thing to go on a phone — the app drops its own header title at
     a breakpoint for the same reason. The <title>, h1 and meta description all still carry it. */
  .nav-title { display: none; }
  .nav-links { gap: 12px; }
  .nav-links a.hide-sm { display: none; }
  .nav-links .btn { padding: 8px 12px; font-size: 11px; letter-spacing: 0.05em; }
}

@media (max-width: 380px) {
  /* Very narrow phones. The old rule hid `.wordmark .tld` (the " NEUROSIM" span); that span is
     gone with the text wordmark, and the SVG's NEUROSIM sub-line cannot be split out, so shrink
     the whole mark instead. */
  .wordmark svg { height: 22px; }
}