/* ============================================================================
   AthenaForms marketing site — fresh minimal shell.
   The palette + type + borders are mirrored DIRECTLY from the athena-lean app's
   token source (src/styles/theme.css.ts, lightValues) and design-system.md.
   This is intentional: the site matches the app, it does not invent its own look.
   Light theme only (owner pref: always light, on-brand, never bespoke dark).
   ========================================================================== */

:root {
  /* --- Color tokens (mirrored from theme.css.ts lightValues.color) --- */
  --color-bg:            #FAFAF9;  /* page field / body background */
  --color-surface:       #FFFFFF;  /* cards / panels / header */
  --color-surface-muted: #F5F5F4;  /* subtle fills, hover */

  --color-border:        #E7E5E4;  /* hairline borders */
  --color-border-strong: #D6D3D1;

  --color-text-primary:   #1C1917; /* headings + body */
  --color-text-secondary: #44403C; /* secondary copy, nav labels */
  --color-text-tertiary:  #6F6A65; /* captions, meta */
  --color-text-inverse:   #FAFAF9; /* text on a saturated band */

  /* Deep forest-green accent — the EHS / safety identity. */
  --color-accent:        #1F4D2E;
  --color-accent-hover:  #2E633E;
  --color-accent-soft:   #E6EFE8;
  --color-accent-700:    #14361F; /* deeper forest, gradient end */

  /* Gold / amber secondary. */
  --color-brand:         #D6451A; /* brand orange, used sparingly */
  --color-warning:       #D88B30;
  --color-warning-text:  #8A6A2E;
  --color-warning-soft:  #FAF4E8;
  --color-warning-border:#E8D9B5;

  /* On-band white (theme-independent, on purpose). */
  --color-band-text:     #FFFFFF;

  /* --- Type scale (mirrored from theme.css.ts sharedScales) --- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-xs:  13px;
  --fs-sm:  15px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-xxl: 28px;
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* --- Space + radius (mirrored) --- */
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* --- Shadow (mirrored from theme.css.ts lightValues.shadow) --- */
  --shadow-sm:  0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(28, 25, 23, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-card-hover: 0 4px 14px rgba(28, 25, 23, 0.08);

  /* layout */
  --max-w: 1320px;
  --max-w-prose: 760px;
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Footer sticks to the bottom even on short pages */
.site-footer { margin-top: auto; }

/* Fluid, large display type (owner pref: large fluid type, generous layout). */
h1, h2, h3 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

p  { margin: 0 0 var(--space-4); }

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

strong, b { font-weight: var(--fw-semibold); }

.muted     { color: var(--color-text-tertiary); }
.secondary { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------------------
   Shared layout containers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: clamp(var(--space-12), 7vw, var(--space-16));
}
.section + .section { border-top: 1px solid var(--color-border); }

.lead {
  font-size: clamp(1.05rem, 1.6vw, var(--fs-lg));
  color: var(--color-text-secondary);
  max-width: var(--max-w-prose);
}

/* ---------------------------------------------------------------------------
   Shared marketing-section helpers — the uppercase eyebrow, the section
   heading size, and the CTA button row. Defined ONCE here so every converted
   marketing page (security, observations, index, the app/science pages) can
   use them without redeclaring in a per-page <style> block.
   ------------------------------------------------------------------------- */
.section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: var(--space-4);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* "What it looks like in practice" example cards (observations, incidents, capa).
   Amber-banded: a record filed/closed as benign, beside what Athena actually sees. */
.obs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.obs-ex { border: 1px solid var(--color-border); border-inline-start: 4px solid var(--color-warning); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; }
.obs-ex__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); }
.obs-ex__pill { display: inline-block; background: var(--color-warning); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 3px 11px; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
.obs-ex__kind { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-inline-start: 8px; }
.obs-ex__flag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-warning-text); }
.obs-ex__body { font-size: var(--fs-sm); line-height: 1.7; color: var(--color-text-primary); margin-bottom: var(--space-4); flex: 1; }
.obs-ex__foot { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.obs-ex__lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 3px; }
.obs-ex__val { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.obs-ex__val--athena { font-weight: 700; color: var(--color-accent); }
.obs-ex__cap { margin-top: var(--space-3); margin-bottom: 0; font-size: var(--fs-sm); color: var(--color-text-tertiary); font-style: italic; }
/* The "what it looks like in practice" section rides a green band so it reads as
   a callout. The white amber-banded cards pop against it. */
.section:has(.obs-grid) {
  background: linear-gradient(135deg, #14110F 0%, var(--color-accent-700) 55%, var(--color-accent) 100%);
  border-top: none;
}
.section:has(.obs-grid) + .section { border-top: none; }
.section:has(.obs-grid) .lead { color: #cddccf; }
.section:has(.obs-grid) .section-label {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-band-text);
  margin-bottom: var(--space-6);
}

/* ---------------------------------------------------------------------------
   Header (logo left, minimal nav). Inlined identically across pages.
   surface background + hairline bottom border (matches the app header).
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-4) var(--space-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
}
.brand:hover { text-decoration: none; }
.brand img { width: 44px; height: 44px; display: block; }
.brand__word {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav a {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.site-nav a:hover { color: var(--color-accent); text-decoration: none; }
/* Current page highlighted in the nav */
.site-nav a[aria-current="page"] { color: var(--color-accent); font-weight: var(--fw-semibold); }
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-band-text) !important;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent);
}
.site-nav__cta:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-band-text) !important;
  text-decoration: none;
}

/* "How it Works" hover dropdown (Observations / Incidents / CAPA) */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group__label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.nav-caret { width: 13px; height: 13px; flex-shrink: 0; transition: transform 140ms ease; }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
.nav-group__menu {
  position: absolute; top: 100%; inset-inline-start: 50%; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
/* invisible bridge across the gap so the menu does not flicker shut */
.nav-group__menu::before { content: ""; position: absolute; top: -10px; inset-inline: 0; height: 10px; }
.nav-group:hover .nav-group__menu, .nav-group:focus-within .nav-group__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 8px);
}
.nav-group__menu a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; }
.nav-group__menu a:hover { background: var(--color-surface-muted, #F5F5F4); color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Hero band — ink → green-700 gradient with cream text + light-green kicker.
   Mirrors the desk's saturated green band header (bandText = white).
   ------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, #14110F 0%, var(--color-accent-700) 55%, var(--color-accent) 100%);
  color: var(--color-band-text);
}
.hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(var(--space-10), 6vw, 72px) var(--space-6);
}
.hero__kicker {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #BFE0CD; /* light-green kicker, matches engineHeldBorder family */
  margin-bottom: var(--space-4);
}
.hero h1 {
  color: var(--color-band-text);
  max-width: 18ch;
}
.hero__lead {
  color: rgba(250, 250, 249, 0.86);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  max-width: 56ch;
  margin-top: var(--space-5);
}
/* Buzzword banner line across the top of a hero (one bold line per page) */
.hero__banner {
  grid-column: 1 / -1;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(0.95rem, 2.1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: var(--space-10);
}
@media (max-width: 760px) {
  .hero__banner, .hero--home .hero__banner { white-space: normal; font-size: clamp(1.1rem, 5vw, 1.5rem); }
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-band-text);
}
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-band-text); text-decoration: none; }
.btn--ghost {
  background: transparent;
  border-color: rgba(250, 250, 249, 0.4);
  color: var(--color-band-text);
}
.btn--ghost:hover { border-color: var(--color-band-text); color: var(--color-band-text); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Cards / content blocks
   ------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   Page card — the app's "framed surface". The main content block of each
   page sits on this white surface, framed by a hairline + soft shadow,
   floating on the warm-stone page background instead of bare on the bg.
   ------------------------------------------------------------------------- */
.page-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-6), 3.5vw, var(--space-12));
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}

/* On a one-screen page the card lives inside .screen__inner, which already
   centres + caps width. Drop the inner padding so the card edge IS the gutter,
   and let the card own the framed look. */
body.one-screen .screen__inner { padding-block: var(--space-6); }

/* Inner cards INSIDE a page-card lighten to a muted inset so we never stack a
   card-on-a-card. The .problem / .flow__step / inner blocks become subtle
   inset fills (muted bg + hairline, no shadow) when nested in a page-card. */
.page-card .problem,
.page-card .flow__step {
  background: var(--color-surface-muted);
  box-shadow: none;
}

/* The landing apps-web panel reads as its own white card on the warm-stone
   background now that the home's outer box is removed. (Base .signal styling.) */

.grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* A clearly-marked placeholder block, for the content Tim + Jake fill in. */
.placeholder {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
  padding: var(--space-6);
  font-size: var(--fs-sm);
}
.placeholder__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Prose (security + commitment body copy)
   ------------------------------------------------------------------------- */
.prose { max-width: var(--max-w-prose); }
.prose h2 { margin-top: var(--space-12); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-8); font-size: var(--fs-lg); }
.prose ul { padding-inline-start: var(--space-6); margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.prose p  { color: var(--color-text-secondary); }

.note {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
}

.kv {
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.kv b { color: var(--color-text-secondary); }

/* status chips on the security page */
.chip {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-inline-start: var(--space-2);
  vertical-align: middle;
}
.chip--now {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid #BFE0CD;
}
.chip--roadmap {
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
}

/* ---------------------------------------------------------------------------
   Footer — EI LLC contact line only (per the sales-copy convention).
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
}
.site-footer__brand img { width: 22px; height: 22px; }
.site-footer__brand span { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.site-footer__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.site-footer__links a {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.site-footer__links a:hover { color: var(--color-accent); text-decoration: none; }
.site-footer__social { display: inline-flex; align-items: center; color: var(--color-text-secondary); }
.site-footer__social:hover { color: var(--color-accent); }
.site-footer__social svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .site-nav { gap: var(--space-4); }
  .site-nav a { font-size: var(--fs-xs); }
}

/* ===========================================================================
   ONE-SCREEN PAGES (owner discipline: one idea per page, no vertical scroll).
   `body.one-screen` pins header + content + footer to a single ~100vh stack.
   Pages target ~1440x900 desktop; content lives in .screen between the bars.
   ========================================================================== */
body.one-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* no scroll — the discipline, enforced */
}
body.one-screen .site-header { position: static; flex: 0 0 auto; }
body.one-screen .site-footer { flex: 0 0 auto; }
body.one-screen .screen {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}
.screen__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
}

/* Home: content sits directly on the warm-stone background (no white box),
   vertically centered in the viewport (scrolls if it ever grows taller). */
body.home { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-surface); }
body.home .home-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Compact footer for one-screen pages */
body.one-screen .site-footer__inner { padding-block: var(--space-5); }

/* ---------------------------------------------------------------------------
   Two-column hero (landing): copy left, graphic right, on the gradient band.
   ------------------------------------------------------------------------- */
.hero--split { display: flex; align-items: center; }
.hero--split .hero__grid {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
@media (min-width: 880px) {
  .hero--split .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero--split h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  max-width: 16ch;
  margin-bottom: var(--space-4);
}
.hero--split .hero__lead {
  margin-top: var(--space-4);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  max-width: 54ch;
}
.hero-close {
  margin-top: var(--space-5);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.hero-close-sub {
  margin-top: var(--space-2);
  max-width: 58ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
}
/* Second-column graphic + highlighted differentiator (home hero). */
.hero-graphic { width: 100%; max-width: 420px; margin: 0 auto var(--space-5); }
.hero-graphic svg { width: 100%; height: auto; display: block; }
.hero-highlight {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.hero-highlight .hero-close-sub { margin-top: 0; max-width: none; }
/* The Athena Learning Loop (home hero, right column). */
.loopgraphic { width: 100%; max-width: 480px; margin: 0 auto var(--space-2); }
.loopgraphic svg { width: 100%; height: auto; display: block; }
.loop-title { text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-accent); letter-spacing: 0.02em; margin-bottom: var(--space-2); }
.loop-ring { stroke: var(--color-accent); stroke-width: 2; opacity: 0.5; }
.loop-arrow { fill: var(--color-accent); }
.loop-hub { fill: var(--color-accent); }
.loop-hub__t { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; letter-spacing: -0.01em; }
.loop-node rect { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(28, 25, 23, 0.10)); }
.loop-node__t { fill: var(--color-accent); font-size: 13px; font-weight: var(--fw-semibold); text-anchor: middle; }
.loop-node__s { fill: var(--color-text-tertiary); font-size: 10px; text-anchor: middle; }
/* App cards under the left-column copy (home hero). */
.appcards { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.appcards .bullet {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.appcards .bullet:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent); text-decoration: none; }
.appcards .bullet__title { color: var(--color-text-primary); font-weight: var(--fw-semibold); margin-bottom: 2px; }
.appcards .bullet__body { color: var(--color-text-secondary); font-size: var(--fs-xs); line-height: 1.4; }
.card-ico { width: 22px; height: 22px; color: var(--color-accent); margin-bottom: var(--space-2); display: block; }
/* Build-your-own card, highlighted */
.appcards .bullet--hot { background: var(--color-accent); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.appcards .bullet--hot .bullet__title { color: #fff; }
.appcards .bullet--hot .bullet__body { color: rgba(255, 255, 255, 0.85); }
.appcards .bullet--hot .card-ico { color: #fff; }
.appcards .bullet--hot:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
/* Header nav icons */
.site-nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav-ico { width: 16px; height: 16px; flex-shrink: 0; }
.nav-toggle, .nav-burger { display: none; }
/* Home gutter, responsive so content never sits edge-to-edge */
.home-inner { padding-block: var(--space-7); padding-inline: var(--space-10); }
@media (max-width: 880px) { .home-inner { padding-inline: var(--space-6); } }
@media (max-width: 760px) {
  .home-inner { padding-inline: var(--space-5); }
  .appcards { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile nav: CSS-only hamburger toggle.
   Breakpoint is 980px so we switch to the burger before the inline nav gets
   cramped enough to wrap "How it Works" onto two lines. */
@media (max-width: 980px) {
  .site-header__inner { position: relative; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-inline-start: auto;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text-primary); cursor: pointer;
  }
  .nav-burger svg { width: 22px; height: 22px; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; inset-inline: 0; z-index: 50;
    margin-top: var(--space-2);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) var(--space-4);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { padding: var(--space-3) var(--space-2); }
  .site-nav__cta { margin-top: var(--space-2); justify-content: center; }
  /* In the burger menu the dropdown flattens: items shown inline, indented */
  .nav-group { display: block; }
  .nav-group__label { padding: var(--space-3) var(--space-2); }
  .nav-caret { display: none; }
  .nav-group__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 0; padding: 0 0 var(--space-1) var(--space-6);
    background: transparent; border: none; box-shadow: none;
  }
  .nav-group__menu::before { display: none; }
}

/* ---------------------------------------------------------------------------
   Signal-in-the-noise panel (landing hero graphic, hand-built, no asset).
   Faint record rows = the noise; one lit forest-green row = the signal.
   ------------------------------------------------------------------------- */
.signal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
.signal__ailine {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
}
.signal__aisub {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  margin-top: 4px;
  margin-bottom: var(--space-3);
}
/* Apps-web: Athena at the hub, hairline spokes out to the four apps (incl.
   "Your Process" = the customer's own forms). Reads as Athena reading ACROSS
   all of them, not a linear flow. Hand-built HTML/CSS/SVG, no raster asset. */
.appsweb {
  position: relative;
  width: 100%;
  height: 200px;
  margin-block: var(--space-3) var(--space-2);
}
.appsweb__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.appsweb__lines line {
  stroke: var(--color-border-strong);
  stroke-width: 1;
}
.appsweb__node {
  position: absolute;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px var(--space-3);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.appsweb__node--tl { inset-block-start: 8px;  inset-inline-start: 0; }
.appsweb__node--tr { inset-block-start: 8px;  inset-inline-end: 0; }
.appsweb__node--bl { inset-block-end: 8px;    inset-inline-start: 0; }
.appsweb__node--br { inset-block-end: 4px;    inset-inline-end: 0; }
/* "Your Process" = build-your-own: dashed, lighter so it reads as "and whatever you build." */
.appsweb__node--yours {
  border-style: dashed;
  border-color: var(--color-border-strong);
  color: var(--color-text-tertiary);
  background: var(--color-surface-muted);
  text-align: end;
}
.appsweb__sub {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary);
  line-height: 1.2;
}
.appsweb__hub {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
[dir="rtl"] .appsweb__hub { transform: translate(50%, -50%); }
/* White helmet on the green circle — Athena is always green. */
.appsweb__hubimg {
  width: 56%;
  height: 56%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.signal__callout {
  margin-top: var(--space-3);
  margin-bottom: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-text-primary);
}
.signal__callout b { color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Landing bullet strip (5 value bullets under the hero, each links to a page).
   ------------------------------------------------------------------------- */
.bullets {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.bullets__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .bullets__inner { grid-template-columns: repeat(5, 1fr); }
}
.hero-kicker {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto var(--space-3);
  padding-inline: 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--color-accent);
}
.bullet {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bullet:hover {
  text-decoration: none;
  border-color: #BFE0CD;
  box-shadow: var(--shadow-card-hover);
}
.bullet__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  margin-bottom: 6px;
}
.bullet__body {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------------
   Compact problem cards (sub-pages: reads-everything, the-loop).
   ------------------------------------------------------------------------- */
.problem {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.problem h3 { margin: 0 0 var(--space-3); font-size: var(--fs-xl); }
.problem p  { color: var(--color-text-secondary); margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: 1.55; }
.problem .cost {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
}
.problem .cost b { color: var(--color-accent); }
/* A .problem card can also be a link (hover lift, no underline). */
a.problem { display: block; text-decoration: none; color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
a.problem:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }

/* Page lead block used on one-screen sub-pages */
.screen__head { max-width: var(--max-w-prose); margin-bottom: var(--space-8); }
.screen__head .eyebrow { display: block; }
.screen__head h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: var(--space-4); }
.screen__head .lead { color: var(--color-text-secondary); }

/* Numbered flow (how-athena-decides) */
.flow { display: grid; gap: var(--space-4); }
@media (min-width: 820px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow__step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-surface);
}
.flow__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.flow__ttl { font-weight: var(--fw-semibold); font-size: var(--fs-md); margin-bottom: 6px; }
.flow__body { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   SIFp "Same scene. Change one thing." physics demo (science.html).
   Two side-by-side cards: left = as it happened (amber/risk), right = one thing
   changed (green/controlled). Same vocabulary, opposite verdict.
   ------------------------------------------------------------------------- */
.demo__head { max-width: 72ch; margin: 0 auto var(--space-8); text-align: center; }
.demo__head .eyebrow { display: block; }
.demo__head h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-inline: auto; }
.demo__head .lead { margin-inline: auto; }

.demo__grid {
  display: grid;
  gap: var(--space-6);
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 820px) { .demo__grid { grid-template-columns: 1fr 1fr; } }

.demo__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.demo__card--risk { border-color: var(--color-warning-border); }
.demo__card--ok   { border-color: #BFE0CD; }

.demo__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.demo__body {
  font-size: clamp(1.05rem, 1.6vw, var(--fs-lg));
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
  flex: 1 1 auto;
}

/* inline highlight marks: soft amber (risk) + soft green (controlled) */
mark.mk-risk {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border-radius: var(--radius-sm);
  padding: 1px 3px;
  font-weight: var(--fw-medium);
}
mark.mk-ok {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 1px 3px;
  font-weight: var(--fw-medium);
}

/* verdict chips */
.demo__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  letter-spacing: 0.01em;
}
.demo__chip--risk {
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
}
.demo__chip--ok {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid #BFE0CD;
}

.demo__close {
  max-width: 64ch;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: clamp(1.05rem, 1.6vw, var(--fs-lg));
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* SIFp stat / pull-line */
.pull {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
  max-width: 22ch;
  letter-spacing: -0.01em;
}
.pull .accent { color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Big page icon (app pages: Observations / Incidents / CAPA). A large, clean
   forest-green line-art mark beside the page head, filling space with room for
   future copy beneath. Mirrors the app icon style (currentColor stroke).
   ------------------------------------------------------------------------- */
.page-head--iconed {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: center;
  margin-bottom: 0;
  max-width: none;
}
.page-icon {
  flex: 0 0 auto;
  width: clamp(96px, 11vw, 148px);
  height: clamp(96px, 11vw, 148px);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  border: 1px solid #BFE0CD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.page-icon svg {
  width: 58%;
  height: 58%;
  display: block;
}
@media (max-width: 640px) {
  .page-head--iconed { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Energy Wheel (science page). A circular SVG with the 10 canonical energy
   sources as labelled spokes; the lit spoke reads in the brand green, the rest
   are dim. Mirrors src/components/desk/EnergyWheel.tsx aesthetic.
   ------------------------------------------------------------------------- */
.wheel-layout {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: center;
}
@media (min-width: 860px) {
  .wheel-layout { grid-template-columns: 1fr 1fr; }
}

.energy-wheel { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; }
.energy-wheel .ew-seg-dim  { fill: var(--color-border); stroke: var(--color-surface); stroke-width: 3.5; stroke-linejoin: round; }
.energy-wheel .ew-seg-lit  { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 3.5; stroke-linejoin: round; }
.energy-wheel .ew-label    { fill: var(--color-text-tertiary); font-size: 13px; font-family: var(--font-sans); }
.energy-wheel .ew-label-lit { fill: var(--color-accent); font-weight: var(--fw-semibold); }
.energy-wheel .ew-center   { fill: var(--color-text-tertiary); font-size: 12px; letter-spacing: 0.12em; font-family: var(--font-sans); }
.energy-wheel .ew-area     { fill: var(--color-text-primary); font-size: 17px; font-weight: var(--fw-semibold); font-family: var(--font-sans); }

.wheel-read { max-width: 44ch; }
.wheel-read .eyebrow { display: block; }
.wheel-states { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 var(--space-5); }
.energy-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  letter-spacing: 0.01em;
}
.energy-chip--ok {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid #BFE0CD;
}
.energy-chip--risk {
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
}
.wheel-line {
  font-size: clamp(1.02rem, 1.5vw, var(--fs-lg));
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin: 0;
}
.wheel-line b { color: var(--color-accent); }