:root {
  --color-cta: #e85d04;
}

/* =========================================
   Design Tokens — projectEureka (Omnibond)
   Muted, sophisticated palette built on #ff6600 (Orange) + #18396b (Navy)
   Claude-inspired spacious & elegant structure, now with true Omnibond color DNA
   Light + Dark modes fully supported
   ========================================= */

/* ---------- LIGHT MODE (default) ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  /* === Core Omnibond Colors (raw) === */
  --color-orange: #ff6600;
  --color-navy-deep: #18396b;
  --color-navy: #18396b;

  /* === Backgrounds & Surfaces — warm, calm, premium === */
  --color-background: #f5f4f0;        /* neutral soft gray (the one you liked before) */
  --color-surface: #ffffff;
  --color-surface-2: #f2efe6;         /* very light warm gray */
  --color-hero-background: #faf9f5;   /* slightly lighter gray for the hero section */
  --color-content-band: #f0efea;      /* slightly darker gray for the section below the hero */
  --color-pill-background: #e9e7e0;   /* darker gray used for bordered pills and test areas */

  /* === Text — anchored to the navy for authority === */
  --color-text: #18396b;              /* primary text = brand navy */
  --color-text-muted: #4a5f7a;        /* readable navy-gray */
  --color-text-subtle: #6f7f94;

  /* === Action & Accent === */
  --color-cta: #ff6600;               /* primary call-to-action */
  --color-cta-hover: #e05c00;         /* richer, slightly darker orange */
  --color-cta-light: #fff4e8;         /* very subtle orange tint */

  /* === Navy scale for various uses === */
  --color-navy-light: #2a4a7d;        /* brighter navy for hover states etc. */

  /* === Path Accents (intentional & distinct) === */
  --color-accent-edu: #ff6600;        /* energetic, optimistic orange for Research & Education */
  --color-accent-enterprise: #18396b; /* deep, trustworthy navy for Enterprise */

  /* === Subtle tints for cards, badges, highlights === */
  --color-tint-edu: #fff4e8;
  --color-tint-enterprise: #e8eef6;

  /* === Borders — warm and quiet === */
  --color-border: #e5e0d6;
  --color-border-strong: #d4cdc0;

  /* === Icon Pill Border (thinner, consistent across all pages) === */
  --pill-border-width: 1.5px;

  /* === Elevation — soft, warm-neutral (never cold) === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.035);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 32px -6px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.05);

  /* Radii, spacing, typography, transitions remain unchanged (excellent Claude-like foundation) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  --space-1: 4px;
  --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;
  --space-20: 80px;

  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 280ms ease;
}

/* ---------- DARK MODE — Warm, soft, Claude-inspired dark (with Omnibond accents) === */
[data-theme="dark"] {
  color-scheme: dark;

  /* === Core Omnibond Colors === */
  --color-orange: #ff6600;
  --color-navy-deep: #141e33;
  --color-navy: #b8cce8;

  /* === Warm Dark Backgrounds — Claude-style soft dark (not cold blue) === */
  --color-background: #181714;
  --color-surface: #22201c;
  --color-surface-2: #2c2a25;
  --color-hero-background: #1c1b17;
  --color-content-band: #1f1e1a;
  --color-pill-background: #32302a;

  /* === Warm, comfortable text === */
  --color-text: #e8e4d9;              /* warm off-white / cream */
  --color-text-muted: #a8a59c;
  --color-text-subtle: #8a877f;

  /* === Action & Accent === */
  --color-cta: #ff6600;
  --color-cta-hover: #ff7a33;
  --color-cta-light: rgba(255, 102, 0, 0.12);

  /* === Navy / Enterprise in dark mode: use light readable versions === */
  --color-navy-light: #3a4d7a;
  --color-accent-enterprise: #8fa8d4;   /* brighter, visible blue for icons & accents in dark */

  /* === Path Accents === */
  --color-accent-edu: #ff7a33;        /* lifted orange for education */

  /* === Subtle tints === */
  --color-tint-edu: rgba(255, 102, 0, 0.12);
  --color-tint-enterprise: rgba(143, 168, 212, 0.18);

  /* === Warm dark borders (no blue cast) === */
  --color-border: #3a3832;
  --color-border-strong: #4a4740;

  /* === Icon Pill Border (thinner, consistent across all pages) === */
  --pill-border-width: 1.5px;

  /* === Elevation === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 32px -6px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
}

/* System preference fallback (when no data-theme is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-orange: #ff6600;
    --color-navy-deep: #141e33;
    --color-navy: #b8cce8;
    --color-background: #181714;
    --color-surface: #22201c;
    --color-surface-2: #2c2a25;
    --color-hero-background: #1c1b17;
    --color-content-band: #1f1e1a;
    --color-pill-background: #32302a;
    --color-text: #e8e4d9;
    --color-text-muted: #a8a59c;
    --color-text-subtle: #8a877f;
    --color-cta: #ff6600;
    --color-cta-hover: #ff7a33;
    --color-accent-edu: #ff7a33;
    --color-accent-enterprise: #5a6d9e;
    --color-tint-edu: rgba(255, 102, 0, 0.12);
    --color-tint-enterprise: rgba(90, 109, 158, 0.16);
    --color-navy-light: #3a4d7a;
    --color-border: #3a3832;
    --color-border-strong: #4a4740;

    /* === Icon Pill Border (thinner, consistent across all pages) === */
    --pill-border-width: 1.5px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 32px -6px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  }
}


/* =========================================
   projectEureka — Custom Styles
   Omnibond muted palette (#ff6600 + #18396b) on Claude-inspired spacious structure
   Fully custom CSS (no Tailwind) — Light + Dark ready
   ========================================= */

/* Tokens are loaded via <link> in HTML (tokens.css before main.css)
   This keeps everything reliable for static hosting and file:// testing. */

/* ---------- Base / Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4) 0;
  letter-spacing: -0.025em;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }

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

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-navy);
}

:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

[data-theme="dark"] a:hover {
  color: #c8d4e8;
}

/* ---------- Layout ---------- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-8);
  }
}

/* Section spacing — generous like Claude */
.section {
  padding: var(--space-16) 0;
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

/* ---------- Navigation ---------- */
.nav {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}

@media (min-width: 768px) {
  .nav-inner {
    padding: var(--space-4) var(--space-8);
  }
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-logo-mark {
  width: 36px;
  height: 36px;
  background-color: var(--color-navy-deep, var(--color-navy));
  color: white;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 1.35rem;
  letter-spacing: -0.04em;
}

.nav-logo-text {
  font-weight: var(--font-weight-semibold);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

.skip-link:focus {
  left: var(--space-4);
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

.nav-menu {
  display: none;
}

@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1;
    justify-content: flex-end;
    margin-right: var(--space-4);
  }
}

body.nav-open .nav-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

body.nav-open .nav {
  position: relative;
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .nav-links {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }
}

.nav-links a {
  padding: var(--space-2) 0;
}

@media (min-width: 768px) {
  .nav-links a {
    padding: 0;
  }
}

.nav-cta-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.nav-cta-desktop {
  display: none;
}

.nav-links a {
  color: var(--color-text-muted);
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-cta {
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: var(--color-pill-background);
  border: 1.5px solid var(--color-cta);
  color: var(--color-cta);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-2xl);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.nav-cta:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-cta-hover);
}

@media (min-width: 768px) {
  .nav-cta.nav-cta-mobile {
    display: none;
  }

  .nav-cta.nav-cta-desktop {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */
.hero {
  background-color: var(--color-hero-background);
  padding: var(--space-20) var(--space-6) var(--space-16);
  text-align: center;
}

.hero-image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-deep, var(--color-navy));
}

.hero-image-wrap .hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: 0;
}

.hero-image-wrap .hero-content {
  position: relative;
  z-index: 1;
}

.hero-image-wrap .hero-title,
.hero-image-wrap .hero-subtitle {
  color: #fff;
}

.hero-image-wrap .hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/* Slightly darker band for the value section directly below the hero */
.hero + .section {
  background-color: var(--color-content-band);
}

.hero-content {
  max-width: 680px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 16px;
  background-color: var(--color-tint-enterprise);
  color: var(--color-navy);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .hero-badge {
  color: #c8d4e8;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-orange);
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: var(--font-size-2xl);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Value Cards (Unifying section) ---------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 860px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .value-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.value-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.value-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.value-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-border-strong);
  color: var(--color-navy);
}

[data-theme="dark"] .value-card-icon {
  background-color: #36332d;   /* stronger lift so the whole pill reads clearly like in light mode */
  border-color: #5c5852;
  color: #c8d4e8;
}

.value-card-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.value-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}

.value-card.span-2 {
  grid-column: 1 / -1;
}

/* ---------- Path Selector ---------- */
.path-section {
  padding: var(--space-16) var(--space-6) var(--space-20);
}

.path-heading {
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}

.path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .path-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 920px;
  }
}

.path-card {
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.path-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.path-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--space-4);
}

.path-card.edu .path-card-icon {
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-accent-edu);
  color: var(--color-accent-edu);
}

.path-card.enterprise .path-card-icon {
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-accent-enterprise);
  color: var(--color-accent-enterprise);
}

[data-theme="dark"] .path-card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .path-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .path-card .path-card-icon {
  background-color: var(--color-surface-2);
}

[data-theme="dark"] .page-label {
  background-color: #36332d;   /* lifted pill background for consistency */
}

[data-theme="dark"] .benefit-card-icon {
  background-color: #36332d;   /* lifted pill background for consistency */
}

[data-theme="dark"] .audience-section .use-case-card-icon {
  background-color: #36332d;   /* same lifted treatment for the "Who this is for" icons */
}

.path-card-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.path-card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}

.path-card.edu .path-card-subtitle {
  color: var(--color-accent-edu);
}

.path-card.enterprise .path-card-subtitle {
  color: var(--color-navy);
}

[data-theme="dark"] .path-card.enterprise .path-card-subtitle {
  color: #d4e0f5;   /* light blue-gray for readability in dark */
}

.path-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

.path-card-link {
  display: inline-block;
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
}

[data-theme="dark"] .path-card.enterprise .path-card-link,
[data-theme="dark"] .path-card-link {
  color: #d4e0f5;   /* light readable version in dark mode */
}

.path-card.edu .path-card-link {
  color: var(--color-orange);
}

.path-card:hover .path-card-link {
  text-decoration: underline;
}

/* ---------- Buttons (used on inner pages) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: 12px 24px;
  border-radius: var(--radius-2xl);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-cta);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-cta-hover);
  color: white;
}

.btn-light {
  background-color: white;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-light:hover {
  background-color: var(--color-surface-2);
}

/* ---------- Inner Page Common Styles ---------- */
.page-header {
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

.page-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  margin-bottom: var(--space-4);
}

.page-label i {
  font-size: 1rem;
}

/* Match the pill treatment from the homepage selector cards */
.page-label.edu {
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-accent-edu);
  color: var(--color-accent-edu);
}

.page-label.enterprise {
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-accent-enterprise);
  color: var(--color-accent-enterprise);
}

/* Intro header: icon + headline at same vertical level, below nav */
.intro-header {
  padding-top: var(--space-10); /* more breathing room below the nav */
}

.intro-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 48rem;
  margin: 0 auto;        /* normal centered content column */
}

.intro-icon {
  flex-shrink: 0;
  margin-left: -48px;    /* hang the icon to the left of the normal content margin (under the 'p' of projectEureka) */
}

.intro-headline {
  max-width: 48rem;
}

.intro-row .page-label {
  flex-shrink: 0;
}

.intro-headline {
  max-width: 48rem; /* keeps the headline and intro text from getting too wide */
}

/* Dark mode icon color now comes from the updated --color-accent-enterprise variable for consistency with the pill treatment */

.page-title {
  font-size: clamp(1.9rem, 4.5vw, 2.4rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.page-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.45;
}

.page-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

/* Benefit / Feature grids on inner pages */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .benefit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.benefit-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.benefit-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.benefit-card-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.benefit-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.benefit-card.span-2 {
  grid-column: 1 / -1;
}

/* Icon pills inside benefit cards - matching the homepage selector style */
.benefit-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-accent-enterprise);
  color: var(--color-accent-enterprise);
}

/* Research & Education page uses different accent */
.research-education .benefit-card-icon {
  border-color: var(--color-accent-edu);
  color: var(--color-accent-edu);
}

/* Use case cards - similar pill icon treatment */
.use-case-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: var(--space-3);
  background-color: var(--color-pill-background);
  border: var(--pill-border-width) solid var(--color-accent-enterprise);
  color: var(--color-accent-enterprise);
  flex-shrink: 0;
}

.research-education .use-case-card-icon {
  border-color: var(--color-accent-edu);
  color: var(--color-accent-edu);
}

.use-case-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Subtle background band for the "Who this is for" section to differentiate it from Core Benefits */
.audience-section {
  background-color: var(--color-content-band);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-10); /* breathing room before the CTA block */
}

/* 3-column grid on desktop for audience cards (feels more like personas) */
@media (min-width: 1024px) {
  .audience-section .use-case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Narrative block */
.narrative {
  max-width: 640px;
  margin-bottom: var(--space-16);
}

.narrative p {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Use case / Who this is for grid */
.use-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .use-case-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.use-case-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.use-case-card-title {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
  font-size: 0.95rem; /* slightly smaller in the audience section for a lighter persona feel */
}

.audience-section .use-case-card-title {
  font-size: 0.92rem; /* even a touch smaller inside the band */
}

.use-case-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Final CTA block */
.cta-block {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Pill style for CTA blocks: darker gray background + strong brand border */
.cta-block.edu {
  background-color: var(--color-pill-background);
  border: 2px solid var(--color-accent-edu);
}

.cta-block.enterprise {
  background-color: var(--color-pill-background);
  border: 2px solid var(--color-accent-enterprise);
}

.cta-block .badge {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  opacity: 0.75;
  color: var(--color-text-muted);
}

.cta-block h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-3);
}

.cta-block p {
  margin-bottom: var(--space-6);
  max-width: 420px;
  opacity: 0.85;
}

/* Dark mode pill style */
[data-theme="dark"] .cta-block.edu {
  background-color: var(--color-pill-background);
  border-color: #ff7a33;
}

[data-theme="dark"] .cta-block.enterprise {
  background-color: var(--color-pill-background);
  border-color: #5a6d9e;
}

/* Buttons and links inside the new faded CTA blocks */
.cta-block .btn {
  background-color: white;
  box-shadow: var(--shadow-sm);
}

.cta-links {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-2);
  font-size: var(--font-size-sm);
}

.cta-links a {
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
}

.cta-block .cta-links a:hover {
  opacity: 1;
}

/* Dark mode button/link adjustments */
[data-theme="dark"] .cta-block .btn {
  background-color: #3a3832;
  color: #e8e4d9;
  border: 1px solid #4a4740;
}

[data-theme="dark"] .cta-block .btn:hover {
  background-color: #45433d;
}

[data-theme="dark"] .cta-links a {
  opacity: 0.8;
}

.cta-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

@media (min-width: 900px) {
  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
    text-align: left;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .footer-brand {
    align-items: flex-start;
    justify-self: start;
  }
}

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  max-width: 28rem;
}

@media (min-width: 900px) {
  .footer-center {
    justify-self: center;
  }
}

.footer-theme {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .footer-theme {
    justify-self: end;
    justify-content: flex-end;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

.footer-links a {
  color: inherit;
}

.footer-links a:hover {
  color: var(--color-text-muted);
}

.footer-ecosystem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  margin-top: var(--space-1);
}

.footer-ecosystem-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  opacity: 0.85;
}

.footer-ecosystem-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
}

.footer-ecosystem-links a {
  color: inherit;
}

.footer-ecosystem-links a:hover {
  color: var(--color-text-muted);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.footer-social-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.footer-social-group-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  opacity: 0.9;
  line-height: 1.2;
}

.footer-social-group-icons {
  display: flex;
  gap: var(--space-2);
}

.footer-social a,
.footer-social-group-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: inherit;
  background: var(--color-surface-2);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.footer-social a:hover,
.footer-social-group-icons a:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.footer-social a i,
.footer-social-group-icons a i {
  font-size: 0.95rem;
}

/* ---------- Theme Toggle (footer) ---------- */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px;
  font-size: 0.8rem;
}

.theme-toggle button {
  background: none;
  border: 0;
  padding: 5px 9px;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: all var(--transition-fast);
}

/* Hide text labels on small screens for compactness */
.theme-toggle .label {
  display: none;
  font-size: 0.82em;
  font-weight: 500;
}
@media (min-width: 640px) {
  .theme-toggle .label {
    display: inline;
  }
}

.theme-toggle button:hover {
  color: var(--color-text);
}

.theme-toggle button.active {
  background-color: var(--color-surface);
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .theme-toggle button.active {
  color: #1c1b18;   /* dark text on the light active pill in dark mode */
}

.theme-toggle .icon {
  font-size: 0.9em;
  width: 1em;
}



/* ---------- Utility / Misc ---------- */
.text-center { text-align: center; }
.max-w-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-14 { margin-bottom: 56px; }

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

.text-sm {
  font-size: var(--font-size-sm);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

/* Small screen tweaks */
@media (max-width: 480px) {
  .hero-title {
    font-size: 2.35rem;
  }
  .hero-subtitle {
    font-size: var(--font-size-xl);
  }
}

/* Shared components across Omnibond properties */

/* ---------- Forms ---------- */
.form-block {
  max-width: 420px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 540px) {
  .form-row {
    flex-direction: row;
    align-items: stretch;
  }
}

.form-label {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  display: block;
}

.form-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.form-input::placeholder {
  color: var(--color-text-subtle);
}

.btn-submit {
  padding: var(--space-3) var(--space-6);
  background: var(--color-cta);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.btn-submit:hover {
  background: var(--color-cta-hover);
}

.btn-secondary {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-navy-deep, var(--color-navy));
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  margin: var(--space-2);
}

.btn-secondary:hover {
  background: var(--color-navy-light);
  color: #fff;
}

[data-theme="dark"] .btn-secondary {
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-cta);
  color: var(--color-text);
}

/* ---------- Hero video ---------- */
.hero-video-wrap {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-navy-deep, var(--color-navy));
}

.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.hero-video-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  max-width: 900px;
}

.hero-video-content .hero-title,
.hero-video-content .hero-subtitle {
  color: #fff;
}

.hero-logo {
  max-height: 64px;
  margin-bottom: var(--space-4);
}

/* ---------- Persona hub (omnibond) ---------- */
.persona-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .persona-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.persona-card {
  display: block;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.persona-card:hover {
  border-color: var(--color-cta);
  box-shadow: var(--shadow-md);
}

.persona-card h3 {
  margin-bottom: var(--space-2);
}

.persona-card p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---------- Logo wall ---------- */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.logo-wall img {
  max-height: 40px;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(20%);
}

[data-theme="dark"] .logo-wall img {
  filter: grayscale(10%) brightness(1.15);
  opacity: 0.92;
}

/* ---------- Collaborations map ---------- */
.collaborations-map-wrap {
  margin-bottom: var(--space-10);
}

.collaborations-map {
  position: relative;
  min-height: 480px;
  height: 72vw;
  max-height: 680px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-surface-2);
  z-index: 0;
  touch-action: pan-y;
}

.collaborations-map .leaflet-container {
  height: 100%;
  width: 100%;
  touch-action: pan-y;
}

@media (min-width: 768px) {
  .collaborations-map {
    height: 600px;
    min-height: 600px;
  }
}

.collaborations-map-caption {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.collaborations-map-caption strong {
  color: var(--color-cta);
  font-weight: var(--font-weight-semibold);
}

.collaborations-map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.collab-labels-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.collab-map-label {
  position: absolute;
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-navy-deep, var(--color-navy));
  background: rgba(255, 255, 255, 0.94);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.collab-map-label-measure {
  visibility: hidden;
  position: absolute;
  left: -9999px;
  top: 0;
}

[data-theme="dark"] .collab-map-label {
  color: var(--color-text);
  background: rgba(34, 32, 28, 0.94);
  border-color: var(--color-border-strong);
}

.collab-marker {
  background: transparent;
  border: 0;
}

.collab-marker span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-cta);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .collab-marker span {
  border-color: #1c1b18;
  box-shadow: 0 0 0 2px rgba(255, 122, 51, 0.45), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.collab-cluster {
  background: transparent;
  border: 0;
}

.collab-cluster span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-cta);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .collab-cluster span {
  border-color: #1c1b18;
}

.collab-popup strong {
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.collab-popup p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.collab-popup-notes {
  margin-top: var(--space-2) !important;
  font-style: italic;
}

.collaborations-map .leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.collaborations-map .leaflet-popup-content {
  margin: var(--space-3) var(--space-4);
  line-height: var(--line-height-snug);
}

.collaborations-map .leaflet-control-zoom a {
  color: var(--color-text);
}

[data-theme="dark"] .collaborations-map .leaflet-control-zoom a {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .collaborations-map .leaflet-control-zoom a:hover {
  background: var(--color-surface-2);
}

/* ---------- FAQ accordion ---------- */
.faq-toc {
  max-width: 720px;
}

.faq-toc-heading {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
}

.faq-toc-list {
  columns: 1;
  gap: var(--space-6);
  padding-left: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .faq-toc-list {
    columns: 2;
  }
}

.faq-toc-list a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-theme="dark"] .faq-toc-list a,
[data-theme="dark"] .page-wayfind a {
  color: var(--color-accent-enterprise);
}

.faq-toc-list ul {
  list-style: none;
  padding-left: var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
}

.faq-section {
  margin-bottom: var(--space-12);
}

.faq-section-title {
  font-size: var(--font-size-2xl);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-6);
}

.faq-section-intro {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--color-navy);
  box-shadow: 0 2px 8px rgba(24, 57, 107, 0.08);
}

.faq-question {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-size: var(--font-size-xl);
  color: var(--color-cta);
  flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
  content: '−';
}

.faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.faq-quote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-cta);
  background: var(--color-surface-2);
  font-style: italic;
  color: var(--color-text-muted);
}

.faq-back {
  margin-top: var(--space-12);
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------- Page wayfinding ---------- */
.page-wayfind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.page-wayfind a {
  color: var(--color-navy);
}

.proof-strip {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.proof-strip strong {
  display: block;
  font-size: var(--font-size-2xl);
  color: var(--color-navy);
  line-height: 1.1;
}

[data-theme="dark"] .proof-strip strong {
  color: var(--color-text);
}

[data-theme="dark"] .product-card {
  background: var(--color-surface);
}

[data-theme="dark"] .product-card:hover {
  border-color: var(--color-cta);
}

[data-theme="dark"] .faq-item[open] {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.proof-strip span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.quick-links-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quick-link-card {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.quick-link-card:hover {
  border-color: var(--color-navy);
  box-shadow: 0 4px 16px rgba(24, 57, 107, 0.08);
  color: inherit;
}

.quick-link-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.quick-link-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.contributor-list {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* ---------- YouTube embeds ---------- */
.video-embed-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.video-embed {
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius-md);
  width: 100%;
}

/* ---------- Articles ---------- */
.article-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.article-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-tint-edu);
  color: var(--color-cta);
  margin-bottom: var(--space-3);
}

/* ---------- Consent banner ---------- */
#consent-notice {
  padding: 0.75rem 1rem;
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  max-width: 400px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  font-size: 0.9rem;
}

#consent-notice .btn-container {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

#consent-notice button {
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

#consent-notice .approve-consent {
  background: var(--color-cta);
  color: #fff;
}

#consent-notice .deny-consent,
#consent-notice .manage-consent {
  background: var(--color-pill-background);
  color: var(--color-text);
}

#consent-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#consent-overlay.active {
  display: flex;
}

#consent-overlay > div {
  background: var(--color-surface);
  max-width: 30rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  color: var(--color-text);
}

#consent-overlay h3 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

#consent-overlay p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

#consent-overlay .pref-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}

/* ---------- Need-based path cards ---------- */
.path-heading-lead {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.path-card.need .path-card-icon {
  background: var(--color-pill-background);
  color: var(--color-navy);
  border: var(--pill-border-width) solid var(--color-border);
}

[data-theme="dark"] .path-card.need .path-card-icon {
  background: var(--color-surface-2);
  color: var(--color-accent-edu);
  border-color: var(--color-border-strong);
}

.path-card-relevance {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  line-height: var(--line-height-relaxed);
}

.path-card-relevance strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.need-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-pill-background);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.need-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.prose {
  max-width: 72ch;
}

.prose p {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.feature-list li strong {
  color: var(--color-text);
}

/* ---------- OmniICAM homepage ---------- */
.hero-pills {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: center;
  color: #fff;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
}

.hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  margin-top: var(--space-4);
}

.stats-band {
  background: var(--color-content-band);
  padding: var(--space-10) 0;
}

.stats-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  text-align: center;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.welcome-grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 900px) {
  .welcome-grid {
    grid-template-columns: minmax(240px, 1fr) 1.5fr;
  }
}

.welcome-intro {
  text-align: center;
}

.welcome-intro h2 {
  margin-bottom: var(--space-2);
}

.welcome-intro h3 {
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
}

.expertise-video {
  width: 100%;
  max-width: 560px;
  display: block;
  margin: var(--space-6) auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.expertise-block {
  scroll-margin-top: var(--space-6);
}

.expertise-block + .expertise-block {
  border-top: 1px solid var(--color-border);
}

.article-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
}

.article-card .read-more {
  color: var(--color-cta);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

/* ---------- Hybrid IA: product-traditional layer ---------- */
.product-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .product-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  display: block;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: inherit;
  text-decoration: none;
}

.product-card:hover {
  border-color: var(--color-cta);
  box-shadow: var(--shadow-md);
}

.product-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-pill-background);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
  font-size: 1.1rem;
}

[data-theme="dark"] .product-card-icon {
  color: var(--color-accent-edu);
}

.product-card-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.product-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-3);
}

.product-card-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-cta);
}

.product-destination {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.product-destination-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
}

.product-destination h3 {
  margin-bottom: var(--space-3);
}

.product-destination p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.product-destination p:last-child {
  margin-bottom: 0;
}

/* ---------- Migrated deep content layouts ---------- */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

.anchor-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.anchor-nav a:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.split-section {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.split-media {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.split-media .media-figure {
  width: 100%;
  max-width: 220px;
  margin: var(--space-4) 0;
}

.split-media .media-figure:first-child {
  margin-top: 0;
}

.split-media .media-figure:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .split-section {
    grid-template-columns: minmax(200px, 240px) 1.5fr;
  }

  .split-section.reverse {
    grid-template-columns: 1.5fr minmax(280px, 1fr);
  }

  .split-section.reverse > :first-child {
    order: 2;
  }

  .split-section.reverse > :last-child {
    order: 1;
  }
}

.split-media .video-embed-grid {
  grid-template-columns: 1fr;
}

.media-figure {
  margin: var(--space-6) 0;
  text-align: center;
}

.media-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.media-figure figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.product-feature-intro {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.product-feature-lead {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.product-feature-lead img {
  width: 88%;
  max-width: 17.6rem;
  margin: 0 auto;
  display: block;
}

.product-feature-examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.product-feature-examples .media-figure {
  width: 100%;
  max-width: none;
  margin: 0;
}

.product-feature-examples .media-figure img {
  width: 100%;
}

@media (min-width: 640px) {
  .product-feature-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 900px) {
  .product-feature-intro {
    grid-template-columns: minmax(280px, 1fr) 1.5fr;
  }

}

.drive-thru-example {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.media-figure-wide {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

.media-figure-wide img {
  width: 100%;
  box-shadow: var(--shadow-md);
}

/* ---------- Path + product merged cards (TrafficVision home) ---------- */
.path-product-section {
  padding-top: var(--space-12);
}

.path-product-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .path-product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.path-product-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  height: 100%;
}

.path-product-card .path-card-icon {
  margin-bottom: var(--space-3);
}

.path-product-card .path-card-title {
  margin-bottom: var(--space-3);
  line-height: var(--line-height-snug);
  min-height: calc(2 * var(--font-size-2xl) * var(--line-height-snug));
}

.path-product-card .path-card-link {
  margin-bottom: var(--space-3);
}

.path-product-card .path-card-relevance {
  margin-bottom: var(--space-3);
}

.path-product-card .path-card-subtitle {
  margin-top: 0;
  margin-bottom: 0;
}

.path-product-media {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.path-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.path-product-choice {
  flex: 0 0 auto;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.path-product-desc {
  flex: 1 1 auto;
  margin-top: auto;
}

.path-product-desc p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.product-showcase-row {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .product-showcase-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.product-showcase-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-showcase-card:hover {
  border-color: var(--color-cta);
  box-shadow: var(--shadow-md);
}

.product-showcase-media {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.product-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.product-showcase-card h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}

.product-showcase-card .prose p {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.product-showcase-card .prose p:last-child {
  margin-bottom: 0;
}

.section-band {
  background: var(--color-content-band);
}

.section-heading-band {
  background: var(--color-surface-2);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-heading-band h2 {
  text-align: center;
  margin: 0;
  font-size: var(--font-size-2xl);
}

.logo-wall-text {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: 56rem;
  margin: 0 auto;
}

.logo-wall-text span {
  white-space: nowrap;
}

.detection-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.detection-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-3);
}

.detection-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* ---------- About / team ---------- */
.team-section-title {
  text-align: center;
  margin-bottom: var(--space-8);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.team-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.team-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.team-card h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-1);
}

.team-card .team-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.team-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ---------- Policy / legal prose ---------- */
.policy-prose {
  max-width: 72ch;
  margin: 0 auto;
}

.policy-prose h2 {
  font-size: var(--font-size-lg);
  margin: var(--space-8) 0 var(--space-4);
}

.policy-prose p,
.policy-prose li {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.policy-prose ul {
  padding-left: var(--space-6);
  margin: var(--space-3) 0 var(--space-5);
}

.policy-prose .policy-updated {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.contact-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.contact-card i {
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.contact-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-3);
}

.contact-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form-wrap .form-row {
  flex-direction: column;
  align-items: stretch;
}

.contact-form-wrap .form-input,
.contact-form-wrap select,
.contact-form-wrap textarea {
  width: 100%;
}

.contact-form-wrap textarea {
  min-height: 120px;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
}

.contact-form-wrap select {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ---------- Pillar detail (projectEureka) ---------- */
.pillar-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.pillar-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .pillar-block {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}

.pillar-block img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.pillar-block h2 {
  margin-bottom: var(--space-4);
}

.pillar-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.pillar-wins {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}

.pillar-wins li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.pillar-wins li:last-child {
  border-bottom: none;
}

.pillar-wins strong {
  color: var(--color-text);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin: var(--space-4) 0;
}

.prose th,
.prose td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.prose th {
  background: var(--color-surface);
}

/* TrafficVision home: orange callouts on all three need cards */
a.path-product-card .path-card-link,
a.path-product-card .path-card-subtitle {
  color: var(--color-orange);
}

a.path-product-card .path-card-subtitle {
  font-weight: var(--font-weight-semibold);
}

a.path-product-card .path-product-desc strong {
  color: var(--color-orange);
  font-weight: var(--font-weight-semibold);
}

[data-theme="dark"] a.path-product-card .path-card-link,
[data-theme="dark"] a.path-product-card .path-card-subtitle,
[data-theme="dark"] a.path-product-card .path-product-desc strong {
  color: var(--color-accent-edu);
}

/* ---------- Ideas (mini-post use cases) ---------- */
.idea-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .idea-grid-highlight {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 640px) {
  .idea-grid-page {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .idea-grid-page {
    grid-template-columns: repeat(3, 1fr);
  }
}

.idea-page-list {
  display: grid;
  gap: var(--space-8);
  max-width: 52rem;
  margin: 0 auto;
}

.idea-card-browse:target {
  border-color: var(--color-orange);
  box-shadow: var(--shadow-md);
}

.idea-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.idea-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.idea-card-link-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.idea-card-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-2);
}

.idea-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idea-card-media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange);
  font-size: 2rem;
}

.idea-card-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.idea-card-style-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0;
}

.idea-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--line-height-snug);
  margin: 0;
}

.idea-card-summary,
.idea-card-body p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.idea-card-product {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-orange);
  text-decoration: none;
}

a.idea-card-product:hover {
  text-decoration: underline;
}

.idea-card-page .idea-card-product {
  align-self: flex-start;
}

.idea-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

.idea-tag {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  background: var(--color-pill-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

.idea-body-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.idea-review-list {
  display: grid;
  gap: var(--space-4);
  max-width: 56rem;
  margin: 0 auto;
}

.idea-review-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
  .idea-review-row {
    grid-template-columns: 1fr;
  }
}

.idea-review-thumb {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-2);
}

.idea-review-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idea-review-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-orange);
  font-size: 1.5rem;
}

.idea-review-title {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-2);
}

.idea-review-title a {
  color: inherit;
  text-decoration: none;
}

.idea-review-title a:hover {
  color: var(--color-orange);
}

.idea-review-slug,
.idea-review-path {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.idea-review-summary {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.idea-style-grid {
  display: grid;
  gap: var(--space-6);
  max-width: 52rem;
  margin: 0 auto;
}

.idea-style-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .idea-style-card {
    grid-template-columns: 1fr;
  }
}

.idea-style-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-2);
}

.idea-style-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idea-style-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-orange);
  font-size: 2rem;
}

.idea-style-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.idea-style-title {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.idea-style-title a {
  color: inherit;
  text-decoration: none;
}

.idea-style-title a:hover {
  color: var(--color-orange);
}

.idea-style-slug {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.idea-style-summary {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.idea-style-prompt summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.idea-style-prompt pre {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  max-height: 12rem;
  overflow: auto;
}

.idea-style-empty {
  text-align: center;
  color: var(--color-text-muted);
}

/* TrafficVision product pages: larger UI screenshots, tighter split balance */

.split-section.media-forward {
  align-items: center;
}

.split-section.media-forward .prose {
  max-width: none;
}

.split-section.media-forward .prose > p:first-of-type {
  margin-top: 0;
}

.split-section.media-forward .feature-list li {
  padding: var(--space-2) 0;
}

.split-section.media-forward .split-media {
  width: 100%;
}

.split-section.media-forward .split-media .media-figure {
  max-width: none;
  margin: 0;
}

.split-section.media-forward .split-media > .media-figure + .media-figure {
  margin-top: var(--space-4);
}

.split-section.media-forward .media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
}

.split-section.media-forward .media-pair .media-figure {
  margin: 0;
}

.split-section.media-forward .media-pair figcaption {
  font-size: 0.75rem;
  line-height: 1.35;
}

@media (min-width: 900px) {
  .split-section.media-forward {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
  }

  .split-section.media-forward.reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Intro strip: short lead + capability chips */
.capability-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.capability-chips li {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.section-lead {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.section-lead p {
  color: var(--color-text-muted);
  margin: 0;
}