/* ============================================================
   STATE AFFAIRS — Shared Stylesheet
   A 50-state policy intelligence platform
   ============================================================ */

/* ------------------------------------------------------------
   0. FONTS — Self-hosted Figtree (variable font)
   One file covers weights 300-800. Self-hosted so all weights are
   reliably available at first paint; Google Fonts only downloaded
   weights actually used at load time, which caused font-weight: 500
   to fall back visually to 400.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   1. CSS RESET & CUSTOM PROPERTIES
   ------------------------------------------------------------ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ---- Colors ---- */
  --color-black:        #000000;
  --color-dark:         #0a0a0a;
  --color-dark-soft:    #0d0d0d;
  --color-dark-card:    #111111;
  --color-dark-border:  rgba(194, 160, 86, 0.15);
  --color-dark-border2: rgba(194, 160, 86, 0.12);
  --color-gold:         #c2a056;
  --color-gold-muted:   rgba(194, 160, 86, 0.2);
  --color-gray-900:     #1a1a1a;
  --color-gray-800:     #2a2a2a;
  --color-gray-700:     #3a3a3a;
  --color-gray-600:     #555555;
  --color-gray-500:     #777777;
  --color-gray-400:     #999999;
  --color-gray-300:     #bbbbbb;
  --color-gray-200:     #d4d4d4;
  --color-gray-100:     #e8e8e8;
  --color-gray-50:      #f0f0f0;
  --color-light:        #f5f1ea;
  --color-light-warm:   #f2ede5;
  --color-white:        #f8f5ef;
  --color-white-pure:   #ffffff;

  /* Primary accent — professional green */
  --color-accent:       #2d7a5f;
  --color-accent-dark:  #1f5e48;
  --color-accent-light: #3d9474;
  --color-accent-muted: rgba(45, 122, 95, 0.10);
  --color-accent-glow:  rgba(45, 122, 95, 0.15);

  /* Secondary accent — muted sage */
  --color-sage:         #5a8a72;
  --color-sage-muted:   rgba(90, 138, 114, 0.10);

  /* Legacy blue/purple kept minimal for tags only */
  --color-blue:         #4a6cf7;
  --color-purple:       #7c5cfc;

  /* Legacy "blue" aliases — map to accent green so older selectors
     resolve to brand colors instead of an undefined value. */
  --color-blue-light:   #3d9474;
  --color-blue-dark:    #1f5e48;
  --color-blue-muted:   rgba(45, 122, 95, 0.10);

  /* Tag colors */
  --color-tag-bill-bg:     rgba(45, 122, 95, 0.12);
  --color-tag-bill-text:   #3d9474;
  --color-tag-hearing-bg:  rgba(234, 179, 8, 0.12);
  --color-tag-hearing-text:#d4a20a;
  --color-tag-news-bg:     rgba(34, 197, 94, 0.12);
  --color-tag-news-text:   #22c55e;
  --color-tag-ai-bg:       rgba(90, 138, 114, 0.12);
  --color-tag-ai-text:     #5a8a72;
  --color-tag-alert-bg:    rgba(220, 80, 60, 0.12);
  --color-tag-alert-text:  #dc503c;

  /* ---- Fonts ---- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;

  /* ---- Font sizes ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */

  /* ---- Spacing ---- */
  --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;
  --space-24: 96px;
  --space-30: 120px;

  /* ---- Layout ---- */
  --container-max:     1340px;
  --container-padding: 48px;
  --nav-max:           1440px;

  /* ---- Borders ---- */
  --radius-sm:  0px;
  --radius-md:  2px;
  --radius-lg:  2px;
  --radius-xl:  2px;
  --radius-2xl: 0px;
  --radius-full: 0px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-800);
  background-color: var(--color-white);
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}


/* ------------------------------------------------------------
   2. TYPOGRAPHY
   ------------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: inherit;
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.12;
}

h3 {
  font-size: clamp(1.375rem, 3vw, 2rem);
  line-height: 1.2;
}

h4 {
  font-size: var(--text-xl);
  line-height: 1.3;
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-md);
}

p {
  margin-bottom: 1em;
  line-height: 1.7;
}

p:last-child {
  margin-bottom: 0;
}

.text-accent {
  font-style: italic;
  color: var(--color-accent);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-accent), var(--color-sage));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.text-muted       { color: var(--color-gray-500); }
.text-muted-light { color: var(--color-gray-400); }
.text-white       { color: var(--color-white); }
.text-center      { text-align: center; }
.text-left        { text-align: left; }
.text-right       { text-align: right; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

strong, .font-semibold { font-weight: 600; }
.font-bold             { font-weight: 700; }
.font-medium           { font-weight: 500; }
.font-normal           { font-weight: 400; }


/* ------------------------------------------------------------
   3. LAYOUT — CONTAINER & SECTIONS
   ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-wide {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

section, .section {
  padding: var(--space-30) 0;
  position: relative;
}

.section-dark {
  background-color: var(--color-dark);
  color: var(--color-gray-200);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--color-white);
}

.section-dark .text-muted {
  color: var(--color-gray-400);
}

.section-light {
  background-color: var(--color-light);
  color: var(--color-gray-800);
}

.section-white {
  background-color: var(--color-white);
  color: var(--color-gray-800);
}

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


/* ------------------------------------------------------------
   4. SECTION HEADERS
   ------------------------------------------------------------ */

.section-header {
  max-width: 720px;
  margin-bottom: var(--space-16);
}

.section-header.text-center {
  margin-left: auto;
  margin-right: auto;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.section-dark .section-tag {
  color: var(--color-blue-light);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.section-subtitle {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-gray-500);
  max-width: 640px;
}

.section-header.text-center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.section-dark .section-subtitle {
  color: var(--color-gray-400);
}


/* ------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Light navbar (default site-wide) — 100% opaque, slightly whiter than
     the body cream so it reads as a distinct strip without being yellow. */
  background-color: #fbfaf6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Reveal transition (when .nav-hidden is removed): longer + ease-out
     so the nav glides back in gently rather than snapping into place. */
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-base), box-shadow var(--transition-base);
}

/* Auto-hide navbar on scroll down, reveal on scroll up.
   The body toggles `nav-hidden` once the user has scrolled roughly past
   the hero (one viewport). Scrolling up at any point removes the class
   and the nav slides back in. On platform pages, the workflow subnav
   slides up with it so the workflow-step strip ends flush against the
   viewport top instead of leaving a 72px gap. The hide direction uses a
   shorter ease-in so it drops away cleanly; the reveal uses the slower
   ease-out on the base .nav rule above.
   IMPORTANT: gated to desktop/tablet only (min-width: 769px). On mobile
   the hamburger button is the only entry point to the nav menu — if the
   nav slides up out of view, users can't open the menu without first
   scrolling back to the top. The JS still toggles the body class on
   mobile, but no CSS responds, so the nav stays visible. */
.workflow-subnav { transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 769px) {
  body.nav-hidden .nav {
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1), background-color var(--transition-base), box-shadow var(--transition-base);
  }
  body.nav-hidden .workflow-subnav {
    top: 0;
    transition: top 0.3s cubic-bezier(0.4, 0, 1, 1);
  }
}

.nav.scrolled,
.nav.nav-scrolled {
  background-color: #fbfaf6;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--nav-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: 72px;
}

.nav-logo {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0a0a0a;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-logo img {
  display: block;
  height: 22px;
  width: auto;
  /* Logo SVG is white-on-transparent; flip to black on the light bar */
  filter: brightness(0);
}

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

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #4a4a4a;
  transition: color var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.nav-link:hover {
  color: #0a0a0a;
}

.nav-link.active,
.nav-link-wrap > .nav-link.active {
  color: #0a0a0a;
  font-weight: 700;
}

/* "Live pulse dot" treatment for the Newsroom nav link.
   Universal "live broadcast" convention — the green dot signals that the
   newsroom is publishing right now, not that the user is on this page
   (the existing .active rule already handles current-page emphasis).
   Treatment chosen from nav-newsroom-options.html (Option A). */
.nav-link-pulse { position: relative; padding-left: 14px; }
.nav-link-pulse::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d7a5f;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(45,122,95,0.55);
  animation: navPulseGreen 2.2s ease-out infinite;
}
@keyframes navPulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(45,122,95,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(45,122,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,122,95,0); }
}

/* Dropdown trigger */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #4a4a4a;
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
}

.nav-dropdown-trigger:hover {
  color: #0a0a0a;
}

.nav-dropdown-trigger svg,
.nav-dropdown-trigger .chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}

.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:hover .nav-dropdown-trigger .chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  transform: translateX(-50%) translateY(8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: #555;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: #0a0a0a;
}

.nav-dropdown-item .item-label {
  display: block;
  font-weight: 500;
  margin-bottom: 2px;
}

.nav-dropdown-item .item-desc {
  display: block;
  font-size: var(--text-xs);
  color: #999;
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-cta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  background-color: var(--color-white);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Mobile hamburger */
.nav-hamburger,
.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-hamburger span,
.nav-mobile-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #0a0a0a;
  border-radius: 0;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-hamburger.active span:nth-child(1),
.nav-mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.active span:nth-child(2),
.nav-mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3),
.nav-mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fbfaf6;
  /* No vertical padding — each row carries its own padding so spacing
     between the top of the drawer and the first item matches the spacing
     between any two consecutive items. */
  padding: 0 var(--container-padding);
  overflow-y: auto;
  z-index: 999;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-mobile.open,
.nav-mobile.active {
  /* Either class shows the menu — different scripts toggle different
     names (script.js used to toggle .active; the new shared logic uses
     .open). Accept both so the menu opens regardless of which script
     binds the click handler first. */
  display: block;
}

.nav-mobile .nav-link {
  display: block;
  font-size: var(--text-lg);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: #0a0a0a;
}

.nav-mobile .nav-cta {
  display: inline-block;
  margin-top: var(--space-6);
}

/* In the mobile drawer the pulse dot must sit AFTER the word — putting
   it before "Newsroom" pushed the text over and the dot itself was
   partially clipped by the link's left padding. Reset .nav-link-pulse
   left-padding and absolute positioning, then float a fresh dot to the
   right via ::after. */
.nav-mobile .nav-link-pulse { padding-left: 0; }
.nav-mobile .nav-link-pulse::before { display: none; }
.nav-mobile .nav-link-pulse::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2d7a5f;
  box-shadow: 0 0 0 0 rgba(45,122,95,0.55);
  animation: navPulseGreen 2.2s ease-out infinite;
}

/* Submenu wrapper — a button row with chevron + a hidden submenu list
   that expands when .expanded is on the wrapper. */
.nav-mobile .nav-mobile-group { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.nav-mobile .nav-mobile-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--text-lg);
  /* Match the visual weight + color of .nav-mobile .nav-link so
     Platform / Customers don't look "muted" next to Newsroom etc. */
  font-weight: 500;
  color: #0a0a0a;
  text-align: left;
  cursor: pointer;
}
.nav-mobile .nav-mobile-submenu-toggle:hover { color: #0a0a0a; }
.nav-mobile .nav-mobile-submenu-toggle .chev {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  opacity: 0.55;
}
.nav-mobile .nav-mobile-group.expanded .nav-mobile-submenu-toggle .chev {
  transform: rotate(180deg);
}
.nav-mobile .nav-mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.35s ease;
  /* Bleed the submenu background to the drawer's inner edges so the
     shading reads as a recessed panel rather than a floating column. */
  margin: 0 calc(var(--container-padding) * -1);
  padding: 0 var(--container-padding);
  background: transparent;
}
.nav-mobile .nav-mobile-group.expanded .nav-mobile-submenu {
  /* Big enough to fit the longest list without measuring; rendered
     inside an already-scrollable parent so a generous cap is fine. */
  max-height: 600px;
  /* Subtle inset shading + top hairline so the expanded panel reads as
     "inside" the Platform / Customers row rather than just more rows. */
  background: rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06),
              inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.nav-mobile .nav-mobile-submenu a {
  display: block;
  padding: 12px 0 12px 18px;
  font-size: 15px;
  color: #4a4a4a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  text-decoration: none;
}
.nav-mobile .nav-mobile-submenu a:last-child { border-bottom: 0; }
.nav-mobile .nav-mobile-submenu a:hover { color: #0a0a0a; }

/* Account row — Support · Sign In · Request Demo. Support and Sign In
   are quiet (text), Request Demo is the prominent button. */
/* Account row — Support / Sign In / Request Demo each stack as their
   own full-width tap target, matching the size of the nav-link rows
   above them. No more crammed inline strip with a vertical divider —
   easier to thumb-tap, fewer stacked dividers. */
.nav-mobile-account {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No extra margin-top — Support sits directly under About with the
     same row-to-row spacing as every other pair in the drawer. */
  margin-top: 0;
  /* No border-top: each item carries its own border-bottom and the
     last About link already has a border below it, so a separate
     account-row divider would just be a duplicate line. */
}
.nav-mobile-account .nav-quiet {
  display: block;
  font-size: var(--text-lg);
  font-weight: 500;
  color: #0a0a0a;
  text-decoration: none;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-mobile-account .nav-quiet:hover { color: #0a0a0a; }
/* Inline divider chip is no longer needed — items are stacked */
.nav-mobile-account .nav-quiet-divider { display: none; }
.nav-mobile-account .btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  margin: var(--space-5) 0 0;
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 600;
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}

/* Desktop nav-actions — Support | Sign In [Request Demo] */
.nav-actions { gap: 14px; }
.nav-actions .nav-link {
  /* Quiet link style for Support / Sign In */
  font-size: 14px;
  color: #555;
  padding: 0;
}
.nav-actions .nav-link:hover { color: #0a0a0a; }
.nav-actions .nav-divider {
  width: 1px;
  height: 14px;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
/* Request Demo button on the light navbar = dark pill for primary contrast */
.nav-actions .btn-primary {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}
.nav-actions .btn-primary:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

/* Body offset for fixed nav */
.has-nav {
  padding-top: 72px;
}


/* ------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary: white bg, dark text */
.btn-primary {
  background-color: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-gray-200);
}

/* Secondary: transparent bg with visible border */
.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-gray-200);
}
.btn-secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.btn-primary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-50);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Ghost: transparent, white border */
.btn-ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Outline: dark border for light sections */
.btn-outline {
  background-color: transparent;
  color: var(--color-gray-800);
  border-color: var(--color-gray-200);
}

.btn-outline:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

/* Outline light: white border for dark sections */
.btn-outline-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Dark fill for light sections */
.btn-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn-dark:hover {
  background-color: var(--color-gray-900);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Blue accent */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-accent:hover {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 108, 247, 0.3);
}

/* Button sizes */
.btn-lg {
  font-size: var(--text-base);
  padding: 16px 36px;
}

.btn-sm {
  font-size: var(--text-xs);
  padding: 8px 18px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Button group */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}


/* ------------------------------------------------------------
   7. CARDS
   ------------------------------------------------------------ */

.card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
}

/* Dark card */
.card-dark {
  background-color: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  color: var(--color-gray-200);
}

.card-dark h3,
.card-dark h4 {
  color: var(--color-white);
}

.card-dark:hover {
  border-color: var(--color-gray-700);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* Light card */
.card-light {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
}

.card-light h3,
.card-light h4 {
  color: var(--color-gray-900);
}

.card-light:hover {
  border-color: var(--color-gray-200);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Card internal elements */
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  font-size: var(--text-xl);
}

.card-dark .card-icon {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-light .card-icon {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray-100);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.card-description {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-gray-500);
}

.card-dark .card-description {
  color: var(--color-gray-400);
}

/* Card with accent top border */
.card-accent-top {
  border-top: 2px solid var(--color-accent);
}

/* Card link arrow */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  margin-top: var(--space-5);
  transition: gap var(--transition-fast);
}

.card-link:hover {
  gap: 10px;
}

/* Stat card */
.card-stat {
  text-align: center;
  padding: var(--space-10) var(--space-8);
}

.card-stat .stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.card-stat .stat-label {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}


/* ------------------------------------------------------------
   8. UI FRAME (Interactive Platform Recreations)
   ------------------------------------------------------------ */

.ui-frame {
  background-color: var(--color-dark-soft);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

/* ---- Live Feed Demo (Newsroom teaser) ---- */
.live-feed-frame {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.live-feed-chrome {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}

.live-feed-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.live-feed-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.live-feed-dots span:nth-child(1) { background: #ff5f57; }
.live-feed-dots span:nth-child(2) { background: #febc2e; }
.live-feed-dots span:nth-child(3) { background: #28c840; }

.live-feed-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}

.live-feed-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.live-feed-body {
  padding: 0;
  min-height: 320px;
  max-height: 420px;
  overflow: hidden;
}

.live-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(-8px);
  animation: feedSlideIn 0.4s ease-out forwards;
}

.live-feed-item.feed-new {
  background: rgba(45, 122, 95, 0.04);
}

@keyframes feedSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

.live-feed-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
}
.live-feed-tag.tag-breaking { background: #dc2626; color: #fff; }
.live-feed-tag.tag-bill     { background: var(--color-accent); color: #fff; }
.live-feed-tag.tag-hearing  { background: #d97706; color: #fff; }
.live-feed-tag.tag-alert    { background: #7c3aed; color: #fff; }
.live-feed-tag.tag-ai       { background: #0ea5e9; color: #fff; }
.live-feed-tag.tag-news     { background: var(--color-gray-700); color: #fff; }

.live-feed-text {
  flex: 1;
  min-width: 0;
}

.live-feed-headline {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-gray-800);
  line-height: 1.45;
  margin-bottom: 3px;
}

.live-feed-meta {
  font-size: 11.5px;
  color: var(--color-gray-400);
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-feed-state {
  font-weight: 600;
  color: var(--color-gray-500);
}

.live-feed-time {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ---- News Cards Demo (Newsroom teaser on homepage) ---- */
.news-cards-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-card-featured {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.news-card-featured:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.news-card-img {
  position: relative;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.news-card-img-overlay {
  opacity: 0.5;
}

.news-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #dc2626;
  color: #fff;
}

.news-card-body {
  padding: 16px 20px 20px;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--color-gray-400);
}

.news-card-state {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.news-card-time {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.news-card-source {
  font-size: 11px;
}

.news-card-headline {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.4;
}

.news-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.news-card-small {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}
.news-card-small:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.news-card-img-sm {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card-badge-sm {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.news-card-body-sm {
  padding: 12px 14px 14px;
}

.news-card-headline-sm {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.4;
}

.news-card-live-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--color-gray-500);
}
.news-card-live-bar strong {
  color: var(--color-dark);
}

/* Interactive news card animations */
.news-card-featured,
.news-card-small,
.news-card-live-bar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s, background 0.3s;
}
.news-card-featured.visible,
.news-card-small.visible,
.news-card-live-bar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Swap transition for cycling cards */
.news-card-featured.swapping,
.news-card-small.swapping {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* New-story flash highlight */
.news-card-featured.new-story,
.news-card-small.new-story {
  animation: newsFlash 0.8s ease;
}
@keyframes newsFlash {
  0% { box-shadow: 0 0 0 0 rgba(45, 122, 95, 0.3); }
  40% { box-shadow: 0 0 0 6px rgba(45, 122, 95, 0.12); }
  100% { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
}

/* Live bar counter tick */
.news-live-count {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  transition: transform 0.3s ease;
}
.news-live-count.tick {
  animation: countTick 0.4s ease;
}
@keyframes countTick {
  0% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* "Just now" time pulse */
.news-card-time.just-now {
  color: var(--color-accent);
  font-weight: 600;
}

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

.ui-frame-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  background-color: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--color-dark-border);
}

.ui-frame-header .ui-frame-dots {
  display: flex;
  gap: 6px;
}

.ui-frame-header .ui-frame-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-gray-700);
}

.ui-frame-header .ui-frame-dots span:nth-child(1) { background-color: #ff5f57; }
.ui-frame-header .ui-frame-dots span:nth-child(2) { background-color: #febc2e; }
.ui-frame-header .ui-frame-dots span:nth-child(3) { background-color: #28c840; }

.ui-frame-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-5);
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-dark-border);
}

.ui-frame-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ui-frame-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-gray-700);
}

.ui-frame-dot.red    { background-color: #ff5f57; }
.ui-frame-dot.yellow { background-color: #febc2e; }
.ui-frame-dot.green  { background-color: #28c840; }

.ui-frame-title {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  font-weight: 500;
}

.ui-frame-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.ui-frame-body {
  padding: var(--space-6);
  min-height: 300px;
}


/* ------------------------------------------------------------
   9. GRID LAYOUTS
   ------------------------------------------------------------ */

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

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

.grid-gap-sm { gap: var(--space-4); }
.grid-gap-md { gap: var(--space-6); }
.grid-gap-lg { gap: var(--space-8); }
.grid-gap-xl { gap: var(--space-12); }

/* Two-column feature layout */
.grid-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.grid-feature.reverse {
  direction: rtl;
}

.grid-feature.reverse > * {
  direction: ltr;
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }


/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */

.footer {
  background-color: var(--color-dark);
  color: var(--color-gray-400);
  border-top: 1px solid var(--color-dark-border);
  padding: var(--space-20) 0 var(--space-12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer-brand {
  max-width: 280px;
}

.footer-logo {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.footer-logo img {
  display: block;
  height: 26px;
  width: auto;
}

.footer-tagline {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-gray-500);
}

.footer-col-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-300);
  margin-bottom: var(--space-5);
}

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

.footer-link {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-white);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-dark-border);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-6);
}

.footer-bottom-links a {
  color: var(--color-gray-600);
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
  color: var(--color-gray-300);
}


/* ------------------------------------------------------------
   11. ANIMATIONS
   ------------------------------------------------------------ */

/* Fade in up on scroll */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > .fade-in-up:nth-child(1) { transition-delay: 0ms; }
.stagger > .fade-in-up:nth-child(2) { transition-delay: 80ms; }
.stagger > .fade-in-up:nth-child(3) { transition-delay: 160ms; }
.stagger > .fade-in-up:nth-child(4) { transition-delay: 240ms; }
.stagger > .fade-in-up:nth-child(5) { transition-delay: 320ms; }
.stagger > .fade-in-up:nth-child(6) { transition-delay: 400ms; }

/* Fade in */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
}

/* Scale in */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Pulse keyframe */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Subtle float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Live dot pulse */
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  animation: live-pulse 2s ease-in-out infinite;
}

/* Shimmer loading */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-dark-border) 25%,
    var(--color-gray-700) 50%,
    var(--color-dark-border) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* Glow ring for interactive elements */
@keyframes glow-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 108, 247, 0); }
}

.glow {
  animation: glow-ring 2.5s ease-in-out infinite;
}


/* ------------------------------------------------------------
   12. FORM STYLES
   ------------------------------------------------------------ */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-300);
  margin-bottom: var(--space-2);
}

.section-light .form-label,
.section-white .form-label {
  color: var(--color-gray-700);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-600);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.15);
}

/* Light variant */
.form-input-light,
.form-select-light,
.form-textarea-light {
  color: var(--color-gray-800);
  background-color: var(--color-white);
  border-color: var(--color-gray-200);
}

.form-input-light::placeholder,
.form-textarea-light::placeholder {
  color: var(--color-gray-400);
}

.form-input-light:focus,
.form-select-light:focus,
.form-textarea-light:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-tag-alert-text);
  margin-top: var(--space-1);
}

.form-input.error,
.form-select.error {
  border-color: var(--color-tag-alert-text);
}

/* Checkbox / Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

/* Form row for inline fields */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-row.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row.form-row-1 { grid-template-columns: 1fr; }
.form-row.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* When a .form-group lives inside a .form-row, drop the default 20px margin —
   the row's own gap / margin-bottom controls vertical rhythm. Without this,
   the grid cell heights become inconsistent and the gap between rows balloons. */
.form-row .form-group { margin-bottom: 0; }


/* ------------------------------------------------------------
   13. LOGO STRIP (Client Logos)
   ------------------------------------------------------------ */

.logo-strip {
  overflow: hidden;
  padding: var(--space-12) 0;
  position: relative;
}

.logo-strip::before,
.logo-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.logo-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--color-dark), transparent);
}

.logo-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--color-dark), transparent);
}

.social-proof .logo-strip::before {
  background: linear-gradient(to right, var(--color-white), transparent);
}

.social-proof .logo-strip::after {
  background: linear-gradient(to left, var(--color-white), transparent);
}

.section-light .logo-strip::before {
  background: linear-gradient(to right, var(--color-light), transparent);
}

.section-light .logo-strip::after {
  background: linear-gradient(to left, var(--color-light), transparent);
}

@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-strip-track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: max-content;
  animation: scroll-logos 30s linear infinite;
}

.logo-strip-track:hover {
  animation-play-state: paused;
}

.logo-strip-item {
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity var(--transition-base);
  filter: grayscale(100%);
}

.logo-strip-item:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}

.logo-strip-item img {
  height: 28px;
  width: auto;
}

.logo-strip-label {
  text-align: center;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray-600);
  margin-bottom: var(--space-8);
}


/* ------------------------------------------------------------
   14. TAGS
   ------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.tag-bill {
  background-color: var(--color-tag-bill-bg);
  color: var(--color-tag-bill-text);
}

.tag-hearing {
  background-color: var(--color-tag-hearing-bg);
  color: var(--color-tag-hearing-text);
}

.tag-news {
  background-color: var(--color-tag-news-bg);
  color: var(--color-tag-news-text);
}

.tag-ai {
  background-color: var(--color-tag-ai-bg);
  color: var(--color-tag-ai-text);
}

.tag-alert {
  background-color: var(--color-tag-alert-bg);
  color: var(--color-tag-alert-text);
}

/* Larger tag variant */
.tag-lg {
  font-size: var(--text-xs);
  padding: 6px 14px;
}

/* Tag with dot indicator */
.tag-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}


/* ------------------------------------------------------------
   15. INTERACTIVE DASHBOARD
   ------------------------------------------------------------ */

.interactive-dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 420px;
  background-color: var(--color-dark-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dashboard-sidebar {
  background-color: rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--color-dark-border);
  padding: var(--space-5) 0;
}

.dashboard-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dashboard-sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--color-gray-300);
}

.dashboard-sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  border-right: 2px solid var(--color-accent);
}

.dashboard-sidebar-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.dashboard-sidebar-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-600);
  padding: var(--space-5) var(--space-5) var(--space-2);
  font-weight: 600;
}

.dashboard-main {
  padding: var(--space-6);
  overflow: hidden;
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-dark-border);
}

.dashboard-topbar-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
}

.dashboard-topbar-actions {
  display: flex;
  gap: var(--space-2);
}

/* Dashboard metric cards row */
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dashboard-metric {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.dashboard-metric-label {
  font-size: 11px;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.dashboard-metric-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white);
}

.dashboard-metric-change {
  font-size: 11px;
  margin-top: var(--space-1);
}

.dashboard-metric-change.up   { color: var(--color-tag-news-text); }
.dashboard-metric-change.down { color: var(--color-tag-alert-text); }


/* ------------------------------------------------------------
   16. INTERACTIVE TABLE
   ------------------------------------------------------------ */

.interactive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.interactive-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.interactive-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-dark-border);
  background-color: var(--color-dark-soft);
  white-space: nowrap;
}

.interactive-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-dark-border);
  color: var(--color-gray-300);
  vertical-align: middle;
}

.interactive-table tbody tr {
  transition: background-color var(--transition-fast);
}

.interactive-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.interactive-table .bill-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-blue-light);
  font-weight: 500;
}

.interactive-table .bill-title {
  color: var(--color-white);
  font-weight: 500;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interactive-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.status-badge.introduced {
  background-color: var(--color-tag-bill-bg);
  color: var(--color-tag-bill-text);
}

.status-badge.committee {
  background-color: var(--color-tag-hearing-bg);
  color: var(--color-tag-hearing-text);
}

.status-badge.passed {
  background-color: var(--color-tag-news-bg);
  color: var(--color-tag-news-text);
}

.status-badge.failed {
  background-color: var(--color-tag-alert-bg);
  color: var(--color-tag-alert-text);
}

/* Table wrapper for scroll */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
}

/* Light table variant */
.interactive-table-light th {
  color: var(--color-gray-600);
  background-color: var(--color-light);
  border-bottom-color: var(--color-gray-100);
}

.interactive-table-light td {
  color: var(--color-gray-700);
  border-bottom-color: var(--color-gray-100);
}

.interactive-table-light tbody tr:hover {
  background-color: var(--color-light);
}


/* ------------------------------------------------------------
   17. INTERACTIVE FEED
   ------------------------------------------------------------ */

.interactive-feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--color-dark-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Terminal feed items — scoped to .live-feed-frame context */
.live-feed-frame .feed-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-dark-soft);
  transition: background-color var(--transition-fast);
}

.live-feed-frame .feed-item:hover {
  background-color: var(--color-dark-card);
}

.live-feed-frame .feed-item-time {
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-gray-600);
  min-width: 52px;
  padding-top: 2px;
}

.live-feed-frame .feed-item-content {
  flex: 1;
  min-width: 0;
}

.live-feed-frame .feed-item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 2px;
  line-height: 1.4;
}

.live-feed-frame .feed-item-meta {
  font-size: 11px;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.live-feed-frame .feed-item-indicator {
  width: 3px;
  flex-shrink: 0;
  border-radius: 0;
  align-self: stretch;
}

.live-feed-frame .feed-item-indicator.blue   { background-color: var(--color-accent); }
.live-feed-frame .feed-item-indicator.amber  { background-color: #eab308; }
.live-feed-frame .feed-item-indicator.green  { background-color: #22c55e; }
.live-feed-frame .feed-item-indicator.red    { background-color: #ef4444; }
.live-feed-frame .feed-item-indicator.purple { background-color: var(--color-sage); }

/* Feed header */
.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-dark-soft);
  border-bottom: 1px solid var(--color-dark-border);
}

.feed-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
}

.feed-header-count {
  font-size: 11px;
  color: var(--color-gray-500);
  font-weight: 400;
}


/* ------------------------------------------------------------
   18. INTERACTIVE CALENDAR
   ------------------------------------------------------------ */

.interactive-calendar {
  background-color: var(--color-dark-soft);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-dark-border);
}

.calendar-header-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
}

.calendar-nav {
  display: flex;
  gap: var(--space-1);
}

.calendar-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-gray-400);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.calendar-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-dark-border);
}

.calendar-day {
  min-height: 80px;
  padding: var(--space-2);
  border-right: 1px solid var(--color-dark-border);
  border-bottom: 1px solid var(--color-dark-border);
  transition: background-color var(--transition-fast);
}

.calendar-day:nth-child(7n) {
  border-right: none;
}

.calendar-day:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.calendar-day-number {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-bottom: var(--space-1);
}

.calendar-day.today .calendar-day-number {
  color: var(--color-accent);
  font-weight: 700;
}

.calendar-event {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 0;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.calendar-event:hover {
  opacity: 0.8;
}

.calendar-event.bill {
  background-color: var(--color-tag-bill-bg);
  color: var(--color-tag-bill-text);
}

.calendar-event.hearing {
  background-color: var(--color-tag-hearing-bg);
  color: var(--color-tag-hearing-text);
}

.calendar-event.news {
  background-color: var(--color-tag-news-bg);
  color: var(--color-tag-news-text);
}

/* Weekly view */
.calendar-week {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
}

.calendar-time-slot {
  padding: var(--space-2);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-gray-600);
  border-right: 1px solid var(--color-dark-border);
  border-bottom: 1px solid var(--color-dark-border);
  text-align: right;
  padding-right: var(--space-3);
  height: 48px;
}

.calendar-week-cell {
  border-right: 1px solid var(--color-dark-border);
  border-bottom: 1px solid var(--color-dark-border);
  min-height: 48px;
  padding: 2px;
  position: relative;
}

.calendar-week-cell:last-child {
  border-right: none;
}


/* ------------------------------------------------------------
   19. INTERACTIVE SEARCH
   ------------------------------------------------------------ */

.interactive-search {
  background-color: var(--color-dark-soft);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-dark-border);
}

.search-bar-icon {
  color: var(--color-gray-500);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.search-bar-input {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-white);
  outline: none;
}

.search-bar-input::placeholder {
  color: var(--color-gray-600);
}

.search-bar-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-gray-600);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 3px 6px;
  border-radius: 0;
  border: 1px solid var(--color-dark-border2);
}

/* Search tabs */
.search-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-dark-border);
  padding: 0 var(--space-5);
}

.search-tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.search-tab:hover {
  color: var(--color-gray-300);
}

.search-tab.active {
  color: var(--color-white);
  border-bottom-color: var(--color-accent);
}

.search-tab-count {
  font-size: 10px;
  color: var(--color-gray-600);
  margin-left: 4px;
}

/* Search results */
.search-results {
  padding: var(--space-4) var(--space-5);
}

.search-result-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-dark-border);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  opacity: 0.8;
}

.search-result-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 2px;
}

.search-result-title mark {
  background-color: rgba(74, 108, 247, 0.25);
  color: var(--color-blue-light);
  padding: 0 2px;
  border-radius: 0;
}

.search-result-snippet {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: 1.5;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-gray-600);
}

/* Search filters */
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-dark-border);
}

.search-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--color-gray-400);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.search-filter:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--color-gray-700);
}

.search-filter.active {
  background-color: var(--color-blue-muted);
  border-color: rgba(74, 108, 247, 0.3);
  color: var(--color-blue-light);
}


/* ------------------------------------------------------------
   20. HERO SECTION PATTERNS
   ------------------------------------------------------------ */

/* (hero styles consolidated below in H1. HERO section) */

.hero-bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 60% 50% at 70% 40%,
    rgba(74, 108, 247, 0.06) 0%,
    transparent 70%
  );
}

/* Subtle grid pattern overlay */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
}


/* ------------------------------------------------------------
   21. BADGES & INDICATORS
   ------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-gray-300);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge-blue {
  background-color: var(--color-blue-muted);
  color: var(--color-blue-light);
  border-color: rgba(74, 108, 247, 0.2);
}

.badge-purple {
  background-color: var(--color-purple-muted);
  color: var(--color-purple-light);
  border-color: rgba(124, 92, 252, 0.2);
}

/* Number indicator */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 0 5px;
}

/* Online / status indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.online  { background-color: #22c55e; }
.status-dot.offline { background-color: var(--color-gray-600); }
.status-dot.busy    { background-color: #eab308; }
.status-dot.error   { background-color: #ef4444; }


/* ------------------------------------------------------------
   22. DIVIDERS & DECORATIVE
   ------------------------------------------------------------ */

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-dark-border);
  border: none;
}

.section-light .divider {
  background-color: var(--color-gray-100);
}

.divider-gradient {
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-dark-border2),
    transparent
  );
}

/* Accent line */
.accent-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-sage));
  border-radius: 0;
}

/* Spacer utility */
.spacer-sm  { height: var(--space-8); }
.spacer-md  { height: var(--space-12); }
.spacer-lg  { height: var(--space-20); }
.spacer-xl  { height: var(--space-30); }


/* ------------------------------------------------------------
   23. TOOLTIP & POPOVER
   ------------------------------------------------------------ */

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-white);
  background-color: var(--color-gray-800);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* ------------------------------------------------------------
   24. PROGRESS BAR
   ------------------------------------------------------------ */

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-sage));
  transition: width 0.5s ease;
}


/* ------------------------------------------------------------
   25. UTILITY CLASSES
   ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.z-10 { z-index: 10; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.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-16 { margin-bottom: var(--space-16); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }


/* ============================================================
   26. RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --container-padding: 32px;
  }

  section, .section {
    padding: var(--space-20) 0;
  }

  .grid-feature {
    gap: var(--space-10);
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }

  .hero {
    min-height: 70vh;
  }

  .hero-title {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
  }

  .interactive-dashboard {
    grid-template-columns: 180px 1fr;
  }

  .calendar-day {
    min-height: 60px;
  }
}


/* --- Newsroom Teaser Grid (Homepage) --- */
.newsroom-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 768px) {
  .newsroom-teaser-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   27. RESPONSIVE — TABLET SMALL / MOBILE (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --container-padding: 24px;
  }

  section, .section {
    padding: var(--space-16) 0;
  }

  /* Navigation */
  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-hamburger,
  .nav-mobile-toggle {
    display: flex;
  }

  .nav-inner {
    height: 64px;
  }

  .has-nav {
    padding-top: 64px;
  }

  .nav-mobile {
    top: 64px;
    /* Explicit height so it fills viewport — top+bottom constraints alone
       weren't expanding the menu in some browsers (was rendering at 64px). */
    height: calc(100vh - 64px);
  }

  /* Grids */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-feature {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .grid-feature.reverse {
    direction: ltr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: var(--space-20);
    padding-bottom: var(--space-16);
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-description {
    max-width: 100%;
  }

  /* Buttons */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn {
    width: 100%;
  }

  /* Section headers */
  .section-header {
    margin-bottom: var(--space-10);
  }

  /* Dashboard */
  .interactive-dashboard {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    display: none;
  }

  /* Calendar */
  .calendar-week {
    grid-template-columns: 40px repeat(7, 1fr);
  }

  .calendar-day {
    min-height: 56px;
  }

  .calendar-event {
    font-size: 9px;
    padding: 1px 3px;
  }

  /* Forms */
  .form-row,
  .form-row.form-row-1,
  .form-row.form-row-2,
  .form-row.form-row-3 {
    grid-template-columns: 1fr;
  }

  /* Table */
  .interactive-table {
    font-size: var(--text-xs);
  }

  .interactive-table th,
  .interactive-table td {
    padding: var(--space-2) var(--space-3);
  }

  /* Feed (terminal) */
  .live-feed-frame .feed-item {
    padding: var(--space-3) var(--space-4);
  }

  .live-feed-frame .feed-item-time {
    min-width: 44px;
    font-size: 10px;
  }

  /* Logo strip */
  .logo-strip::before,
  .logo-strip::after {
    width: 60px;
  }

  .logo-strip-track {
    gap: var(--space-10);
  }

  .logo-strip-item img {
    height: 22px;
  }
}


/* ============================================================
   28. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
  }

  section, .section {
    padding: var(--space-16) 0;
  }

  .hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .card {
    padding: var(--space-6);
  }

  .btn-lg {
    padding: 14px 28px;
    font-size: var(--text-sm);
  }

  .ui-frame-body {
    padding: var(--space-4);
  }

  .interactive-search .search-tabs {
    overflow-x: auto;
    padding: 0 var(--space-4);
  }

  .search-tab {
    padding: var(--space-3);
    white-space: nowrap;
  }

  .dashboard-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .calendar-grid {
    font-size: 10px;
  }

  .calendar-day-header {
    padding: var(--space-2) 0;
    font-size: 9px;
  }

  /* Stack search filters */
  .search-filters {
    padding: var(--space-2) var(--space-4);
  }

  .logo-strip::before,
  .logo-strip::after {
    width: 32px;
  }

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


/* ============================================================
   29. PRINT STYLES
   ============================================================ */

@media print {
  .nav,
  .footer,
  .nav-mobile,
  .btn,
  .logo-strip {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  section, .section {
    padding: 24pt 0;
  }

  .section-dark {
    background: #fff;
    color: #000;
  }

  .section-dark h1,
  .section-dark h2,
  .section-dark h3 {
    color: #000;
  }

  .has-nav {
    padding-top: 0;
  }
}


/* ============================================================
   HOMEPAGE — Section-specific styles
   ============================================================ */

/* ------------------------------------------------------------
   H1. HERO SECTION
   ------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 140px 0 80px;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.4;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--color-blue) 0%, transparent 70%);
  top: -200px;
  right: -100px;
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-purple) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 600px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-300);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 8px 18px;
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  color: var(--color-white);
}

.hero-title-accent {
  color: var(--color-accent-light);
  font-style: italic;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--color-gray-300);
  margin-bottom: var(--space-10);
  max-width: 540px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  justify-content: flex-end;
}

/* Interactive Terminal */
.hero-terminal {
  width: 100%;
  max-width: 540px;
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--color-dark-border);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dots span:nth-child(1) { background: #ef4444; }
.terminal-dots span:nth-child(2) { background: #eab308; }
.terminal-dots span:nth-child(3) { background: #22c55e; }

.terminal-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  letter-spacing: 0.05em;
}

.terminal-body {
  padding: var(--space-4);
  min-height: 280px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.terminal-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
  overflow: hidden;
}

.terminal-line:hover {
  background: rgba(255,255,255,0.03);
}

.t-time {
  color: var(--color-gray-600);
  font-size: 11px;
  min-width: 58px;
}

.t-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  min-width: 52px;
  text-align: center;
}

.t-tag-bill    { background: var(--color-tag-bill-bg);    color: var(--color-tag-bill-text); }
.t-tag-ai      { background: var(--color-tag-ai-bg);      color: var(--color-tag-ai-text); }
.t-tag-news    { background: var(--color-tag-news-bg);     color: var(--color-tag-news-text); }
.t-tag-hearing { background: var(--color-tag-hearing-bg);  color: var(--color-tag-hearing-text); }
.t-tag-alert   { background: var(--color-tag-alert-bg);    color: var(--color-tag-alert-text); }
.t-tag-report  { background: rgba(74,108,247,0.15);        color: #93b4ff; }

.t-state {
  color: var(--color-gray-400);
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

.t-text {
  color: var(--color-gray-300);
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-text strong {
  color: var(--color-blue-light);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-gray-600), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

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


/* ------------------------------------------------------------
   H2. SOCIAL PROOF STRIP
   ------------------------------------------------------------ */

.social-proof {
  background: var(--color-white);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.social-proof-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-500);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-8);
}

.logo-strip {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.logo-strip-track {
  display: flex;
  gap: var(--space-16);
  animation: scroll-logos 30s linear infinite;
  width: max-content;
}

.client-logo {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-gray-300);
  white-space: nowrap;
  letter-spacing: 0.02em;
  user-select: none;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ------------------------------------------------------------
   H3. STATS BAR
   ------------------------------------------------------------ */

.stats-bar {
  background: var(--color-dark);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-dark-border);
  border-bottom: 1px solid var(--color-dark-border);
}

.stats-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.stat {
  text-align: center;
  min-width: 160px;
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--color-dark-border2);
}


/* ------------------------------------------------------------
   H4. PLATFORM VALUE — Buyer Jobs Grid
   ------------------------------------------------------------ */

.platform-section {
  background: var(--color-light);
  padding: var(--space-24) 0;
}

.buyer-jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-top: var(--space-16);
}

.buyer-job-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-12);
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.buyer-job-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  border-color: var(--color-gray-200);
}

.buyer-job-card:nth-child(even) {
  direction: rtl;
}

.buyer-job-card:nth-child(even) > * {
  direction: ltr;
}

.buyer-job-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.buyer-job-desc {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-gray-600);
  line-height: 1.7;
}

.buyer-job-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Mini Dashboard (Live Bill Feed) --- */
.mini-dashboard {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-dash-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-dark-border);
  background: rgba(255,255,255,0.02);
}

.mini-dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue);
  animation: pulse-dot 2s ease-in-out infinite;
}

.mini-dash-dot-purple { background: var(--color-purple); }
.mini-dash-dot-green { background: #22c55e; }

.mini-dash-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-gray-500);
  letter-spacing: 0.05em;
}

.mini-feed-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0;
  animation: feed-item-in 0.5s ease forwards;
}

@keyframes feed-item-in {
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}

.mini-state {
  color: var(--color-gray-400);
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}

.mini-bill-name {
  color: var(--color-gray-300);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-score {
  font-weight: 700;
  min-width: 28px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.mini-score-high {
  color: #22c55e;
  background: rgba(34,197,94,0.12);
}

.mini-score-med {
  color: #eab308;
  background: rgba(234,179,8,0.12);
}

.mini-score-low {
  color: var(--color-gray-500);
  background: rgba(255,255,255,0.06);
}

/* --- Mini Summary (AI Hearing Summary) --- */
.mini-summary {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-summary-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mini-summary-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-tag-hearing-text);
  background: var(--color-tag-hearing-bg);
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mini-summary-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-gray-600);
}

.mini-summary-body {
  padding: 12px 16px;
}

.mini-summary-line {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-gray-400);
  line-height: 1.6;
  margin-bottom: 10px;
  opacity: 0;
  animation: typing-in 0.6s ease forwards;
}

.mini-summary-line strong {
  color: var(--color-gray-200);
}

@keyframes typing-in {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

.mini-typing {
  animation: typing-in 0.6s ease forwards;
}

/* --- Mini Report (Auto-Generated Briefing) --- */
.mini-report {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-report-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  padding: 10px 16px 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mini-report-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  padding: 1px 6px;
  border-radius: 3px;
}

.mini-report-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-gray-600);
  padding: 0 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mini-report-section {
  padding: 8px 16px;
}

.mini-report-section-title {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-gray-400);
  margin-bottom: 4px;
}

.mini-report-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.mini-report-bar-fill {
  height: 100%;
  background: var(--color-blue);
  border-radius: 3px;
  width: 0;
  animation: bar-grow 1.5s ease forwards;
}

.mini-report-bar-purple {
  background: var(--color-purple);
}

.mini-report-bar-green {
  background: #22c55e;
}

@keyframes bar-grow {
  from { width: 0; }
}

.mini-report-footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 4px;
}

.mini-report-recipients {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-gray-600);
}

.mini-report-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #22c55e;
  font-weight: 600;
}


/* ------------------------------------------------------------
   H5. AI CAPABILITIES — Dark
   ------------------------------------------------------------ */

.ai-section {
  background: var(--color-dark);
  padding: var(--space-24) 0;
}

.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.ai-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-card:hover {
  border-color: var(--color-dark-border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.ai-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.ai-card-visual {
  order: -1;
}

.ai-relevance-demo {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.ai-demo-header {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-gray-500);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-5);
  text-transform: uppercase;
}

.ai-score-item {
  margin-bottom: var(--space-4);
}

.ai-score-item:last-child {
  margin-bottom: 0;
}

.ai-score-bar-wrap {
  height: 24px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
  position: relative;
}

.ai-score-bar {
  height: 100%;
  width: var(--score, 0%);
  background: linear-gradient(90deg, var(--color-blue), var(--color-purple));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  animation: score-fill 1.5s ease forwards;
  transform-origin: left;
}

@keyframes score-fill {
  0% { width: 0; }
  100% { width: var(--score, 0%); }
}

.ai-score-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-white);
}

.ai-score-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-gray-500);
}

.ai-card-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-light);
  margin-bottom: var(--space-5);
}

.ai-pulse-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(74,108,247,0.2);
  border-radius: 50%;
  animation: ai-pulse 3s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
}

.ai-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.ai-card-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.7;
}


/* ------------------------------------------------------------
   H6. HOW IT WORKS — Workflow Timeline
   ------------------------------------------------------------ */

.workflow-section {
  background: var(--color-light);
  padding: var(--space-24) 0;
}

.workflow-timeline {
  position: relative;
  max-width: 640px;
  margin: var(--space-16) auto 0;
}

.workflow-line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-gray-200), var(--color-gray-100));
}

.workflow-step {
  position: relative;
  padding-left: 56px;
  padding-bottom: var(--space-10);
}

.workflow-step:last-child {
  padding-bottom: 0;
}

.workflow-dot {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border: 2px solid var(--color-blue);
  border-radius: 50%;
  z-index: 1;
}

.workflow-step:first-child .workflow-dot {
  background: var(--color-blue);
}

.workflow-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}

.workflow-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: var(--space-2);
}

.workflow-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.workflow-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.7;
}


/* ------------------------------------------------------------
   H7. NEWSROOM MOAT — Dark
   ------------------------------------------------------------ */

.newsroom-section {
  background: var(--color-dark);
  padding: var(--space-24) 0;
}

.newsroom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.newsroom-content .section-title {
  margin-top: var(--space-6);
}

.newsroom-content .text-gray {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
  line-height: 1.8;
}

.newsroom-stats {
  display: flex;
  gap: var(--space-10);
  margin-bottom: var(--space-8);
}

.newsroom-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-white);
}

.newsroom-stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.newsroom-visual {
  display: flex;
  justify-content: center;
}

.newsroom-map {
  width: 100%;
  max-width: 520px;
}

.us-map {
  width: 100%;
  height: auto;
}

.map-dot {
  fill: rgba(74,108,247,0.25);
  stroke: none;
  transition: fill 0.3s ease;
  cursor: pointer;
}

.map-dot.active {
  fill: var(--color-blue);
}

.map-dot:hover {
  fill: var(--color-blue-light);
}

.pulse-ring {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
  opacity: 0;
  animation: map-pulse 3s ease-in-out infinite;
}

.pulse-ring:nth-child(2) { animation-delay: 0.5s; }
.pulse-ring:nth-child(3) { animation-delay: 1s; }
.pulse-ring:nth-child(4) { animation-delay: 1.5s; }
.pulse-ring:nth-child(5) { animation-delay: 2s; }

@keyframes map-pulse {
  0% { r: inherit; opacity: 0.6; stroke-width: 2; }
  100% { r: 30; opacity: 0; stroke-width: 0.5; }
}


/* ------------------------------------------------------------
   H8. LIVE NEWS FEED
   ------------------------------------------------------------ */

.live-news {
  background: var(--color-light);
  padding: var(--space-24) 0;
}

.live-news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-12);
}

.news-feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.news-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.news-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border-color: var(--color-gray-200);
}

.news-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.news-state {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-time {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}

.news-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.news-card-byline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}


/* ------------------------------------------------------------
   H9. SOLUTIONS — Dark
   ------------------------------------------------------------ */

.solutions-section {
  background: var(--color-dark);
  padding: var(--space-24) 0;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.value-card {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}

.value-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.value-text {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.solution-card {
  display: block;
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border2);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
  border-color: var(--color-gray-700);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.solution-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.solution-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.solution-card-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.solution-card-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-blue-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap 0.2s ease;
}

.solution-card:hover .solution-card-link {
  gap: var(--space-3);
}


/* ------------------------------------------------------------
   H10. TESTIMONIALS
   ------------------------------------------------------------ */

.testimonials-section {
  background: var(--color-light);
  padding: var(--space-24) 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-featured {
  border-color: var(--color-blue-muted);
}

.testimonial-quote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-gray-700);
  line-height: 1.8;
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonial-featured .testimonial-quote {
  font-size: var(--text-md);
}

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

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), var(--color-purple));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
}

.testimonial-role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}


/* ------------------------------------------------------------
   H11. DEMO SECTION / BOTTOM CTA
   ------------------------------------------------------------ */

.demo-section {
  background: var(--color-white);
  padding: var(--space-24) 0;
  border-top: 1px solid var(--color-gray-100);
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.demo-content .section-title {
  margin-bottom: var(--space-6);
}

.demo-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}

.demo-proof {
  background: var(--color-light-warm);
  border: 1px solid #e8e2d8;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.demo-proof-logos {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gray-400);
}

.demo-proof-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  font-style: italic;
}

.demo-form-wrap {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.demo-form-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 28px;
}

/* --- Professional form inputs inside .demo-form --- */
.demo-form .form-group {
  margin-bottom: 18px;
}
.demo-form .form-row {
  margin-bottom: 18px;
}
.demo-form .form-row .form-group {
  margin-bottom: 0;
}

.demo-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form select {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #1a1a1a;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.demo-form input[type="text"]::placeholder,
.demo-form input[type="email"]::placeholder {
  color: #aaa;
}

.demo-form input[type="text"]:focus,
.demo-form input[type="email"]:focus,
.demo-form select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(45, 122, 95, 0.1);
  background: #fff;
}

.demo-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.demo-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.demo-form .btn {
  width: 100%;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0px;
  margin-top: 8px;
}

.demo-form .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(45, 122, 95, 0.25);
}


/* ------------------------------------------------------------
   H12. FOOTER — Dark
   ------------------------------------------------------------ */

.footer {
  background: var(--color-dark);
  color: var(--color-gray-400);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--color-dark-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-dark-border);
}

.footer-brand-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: 1.7;
  margin-top: var(--space-4);
  max-width: 280px;
}

.footer-logo {
  text-decoration: none;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-col a {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--color-white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
}

.footer-links {
  display: flex;
  gap: var(--space-6);
}

.footer-links a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-gray-400);
}


/* ------------------------------------------------------------
   H13. NAV DROPDOWNS
   ------------------------------------------------------------ */

.nav-link-wrap {
  position: relative;
}

.nav-link-wrap > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-link-wrap > .nav-link svg {
  transition: transform 0.2s ease;
}

.nav-link-wrap:hover > .nav-link svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateX(-50%) translateY(8px);
  z-index: 100;
  margin-top: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.nav-link-wrap:hover .nav-dropdown,
.nav-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #555;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  color: #0a0a0a;
  background: rgba(0,0,0,0.04);
}


/* ---- Platform Mega Dropdown ---- */
.nav-mega-wrap {
  position: static;
}

.nav-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: calc(100% - 48px);
  max-width: 1080px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Tightened from 6px to match the editorial corner scale used across
     buttons / cards (--radius-md = 2px). The mega menu used to be the
     one rounded exception; making it match removes that inconsistency. */
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
  z-index: 100;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.nav-mega-wrap:hover .nav-mega,
.nav-mega.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-mega-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 360px;
}

/* Left sidebar */
.nav-mega-sidebar {
  background: #fbfaf6;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;
}

.nav-mega-sidebar-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  padding: 0 var(--space-6) var(--space-4);
}

.nav-mega-cat {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  color: #4a4a4a;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.nav-mega-cat:hover,
.nav-mega-cat.active {
  color: #0a0a0a;
  background: rgba(0,0,0,0.035);
  border-left-color: var(--color-accent);
}

.nav-mega-cat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* One notch tighter than the rest of the site (--radius-md = 2px)
     for these small 36×36 squares — keeps the corners visually crisp. */
  border-radius: 1px;
  color: #555;
  flex-shrink: 0;
}

.nav-mega-cat:hover .nav-mega-cat-icon,
.nav-mega-cat.active .nav-mega-cat-icon {
  background: rgba(45,122,95,0.10);
  border-color: rgba(45,122,95,0.25);
  color: #2d7a5f;
}

.nav-mega-cat-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.nav-mega-cat-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-mega-cat-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
}

.nav-mega-cat-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: #999;
}

.nav-mega-cat:hover .nav-mega-cat-desc,
.nav-mega-cat.active .nav-mega-cat-desc {
  color: #555;
}

/* Elevated Platform Overview link — always visually prominent */
.nav-mega-cat--overview {
  border-left-color: var(--color-gold, #c2a056);
  background: rgba(194, 160, 86, 0.12);
  color: #0a0a0a;
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-mega-cat--overview:hover,
.nav-mega-cat--overview.active {
  background: rgba(194, 160, 86, 0.20);
  border-left-color: var(--color-gold, #c2a056);
  color: #0a0a0a;
}

.nav-mega-cat--overview .nav-mega-cat-name { color: #0a0a0a; }

.nav-mega-cat--overview .nav-mega-cat-icon {
  background: rgba(194, 160, 86, 0.25);
  border-color: rgba(194, 160, 86, 0.55);
  color: #806119;
}

.nav-mega-cat--overview:hover .nav-mega-cat-icon {
  background: rgba(194, 160, 86, 0.35);
  border-color: rgba(194, 160, 86, 0.7);
  color: #5a4313;
}

.nav-mega-cat--overview .nav-mega-cat-name {
  font-weight: 700;
}

.nav-mega-cat--overview .nav-mega-cat-desc {
  color: #6a5012;
}

.nav-mega-cat--overview:hover .nav-mega-cat-desc {
  color: #5a4313;
}

.nav-mega-overview {
  margin-top: auto;
  padding: var(--space-4) var(--space-6) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-mega-overview a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.nav-mega-overview a:hover {
  color: #0a0a0a;
}

/* Right detail panel */
.nav-mega-detail {
  padding: var(--space-8) var(--space-8);
  position: relative;
}

.nav-mega-panel {
  display: none;
}

.nav-mega-panel.active {
  display: block;
}

.nav-mega-panel-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2d7a5f;
  margin-bottom: var(--space-3);
}

.nav-mega-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.nav-mega-panel-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.7;
  margin-bottom: var(--space-6);
  max-width: 520px;
}

.nav-mega-features-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: var(--space-3);
}

.nav-mega-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-6);
}

/* Unified pill style — the old 'highlighted' AI-powered shaded variant
   is intentionally the same as the default now. */
.nav-mega-feature-pill,
.nav-mega-feature-pill.highlighted {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #555;
  background: rgba(0, 0, 0, 0.02);
}

.nav-mega-panel-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #2d7a5f;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.nav-mega-panel-link:hover {
  color: #0a0a0a;
}

/* Responsive: collapse mega dropdown on mobile */
@media (max-width: 1024px) {
  .nav-mega {
    display: none;
  }
}


/* ------------------------------------------------------------
   H14. SECTION HEADER HELPERS (Light on Dark)
   ------------------------------------------------------------ */

.section-header-light .section-tag-light {
  color: var(--color-blue-light);
  background: var(--color-blue-muted);
  border-color: rgba(74,108,247,0.2);
}

.text-white { color: var(--color-white) !important; }
.text-gray  { color: var(--color-gray-400) !important; }

.text-accent {
  color: var(--color-accent);
  font-style: italic;
}


/* ------------------------------------------------------------
   H15. RESPONSIVE — Homepage overrides
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero-visual {
    justify-content: center;
  }

  .hero-terminal {
    max-width: 100%;
  }

  .buyer-job-card {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .buyer-job-card:nth-child(even) {
    direction: ltr;
  }

  .ai-card-featured {
    grid-template-columns: 1fr;
  }

  .newsroom-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .news-feed {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .demo-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 120px 0 60px;
    min-height: auto;
  }

  .hero-title {
    font-size: var(--text-2xl);
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    flex-direction: column;
    gap: var(--space-8);
  }

  .stat-divider {
    width: 48px;
    height: 1px;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .news-feed {
    grid-template-columns: 1fr;
  }

  .live-news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .newsroom-stats {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ====================================================================
   Feature-blade checklist — single source of truth.
   Plain Unicode ✓ rendered via ::before so every list item across the
   site reads identically. Gold on dark blades, green on light. Lifted
   from the Legislator Intelligence treatment per design review (the
   other two variants — rotated-border tick and circle-pill tick — are
   retired). Applies wherever <ul class="blade-checklist"> is used.
   ==================================================================== */
.blade-checklist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blade-checklist li {
  position: relative;
  padding-left: 26px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.blade-checklist li::before {
  content: '\2713';            /* ✓ U+2713 CHECK MARK */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #2d7a5f;              /* default: light-context green */
}
.dark .blade-checklist li { color: #ccc; }
.dark .blade-checklist li::before { color: #c2a056; }   /* gold on dark */
.light .blade-checklist li { color: #444; }
.light .blade-checklist li::before { color: #2d7a5f; }  /* green on light */