/* ==========================================================================
   Mid Group AI, styles
   ========================================================================== */

/* ----- Tokens ----- */
:root {
  --bg: #f7f9fc;
  --ink: #1a1d26;
  --muted: #5b6270;
  --card: #ffffff;
  --panel: #e4eaf4;
  --border: #d5d9df;
  --blue: #004c9a;
  --blue2: #0078d4;
  --green: #3ba66b;
  --orange: #ff7a00;
  --red: #c53d3d;
  --nav-bg: rgba(247, 249, 252, 0.85);
  --btn-dark-bg: #1a1d26;
  --btn-dark-text: #f7f9fc;
  --field-bg: #f7f9fc;
  --ph-a: #e9edf2;
  --ph-b: #f7f9fc;
  --band-bg: #1a1d26;
  --band-ink: #f7f9fc;
  --band-muted: #c3c8d4;
  --band-card: #20242f;
  --band-line: #2b2f3a;
  --band-sub: #8a90a0;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Dark theme follows the OS preference; there is no in-page toggle. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14;
    --ink: #f2f4f8;
    --muted: #98a1b2;
    --card: #161b24;
    --panel: #131a25;
    --border: #262c38;
    --blue: #2f8ee0;
    --blue2: #5aa9ee;
    --nav-bg: rgba(11, 14, 20, 0.86);
    --btn-dark-bg: #f2f4f8;
    --btn-dark-text: #0d1017;
    --field-bg: #0b0e14;
    --ph-a: #1a1f29;
    --ph-b: #12161e;
    --band-bg: #12161e;
    --band-ink: #f2f4f8;
    --band-muted: #b7bfce;
    --band-card: #1a1f2a;
    --band-line: #262c38;
    --band-sub: #7a8393;
  }
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--blue2); }
img { max-width: 100%; display: block; }
input, textarea, button { font-family: inherit; }
::selection { background: var(--blue2); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue2);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { max-width: 1160px; margin: 0 auto; padding-inline: 28px; }
.section { padding-block: 96px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #f7f9fc;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; color: #f7f9fc; }

/* ----- Typography ----- */
h1 {
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 24px;
}
h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 640px;
}
h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 18px;
}
.eyebrow.small { font-size: 12px; letter-spacing: 0.12em; margin-bottom: 8px; }

.accent { color: var(--blue); }
.accent-link { color: var(--blue); font-weight: 600; }
.lede {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 40px;
  max-width: 640px;
}
.lede strong, #about strong { color: var(--ink); font-weight: 600; }
.section-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 640px;
}
#about p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
#about p:last-child { margin-bottom: 0; }

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--blue); color: #f7f9fc; }
.btn-primary:hover { background: var(--blue2); color: #f7f9fc; }
.btn-secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--blue2); color: var(--ink); }
.btn-dark {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 15px;
}
.btn-dark:hover { background: var(--blue); color: #f7f9fc; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
}
.btn-ghost:hover { border-color: var(--blue2); color: var(--blue2); }
.btn-block { width: 100%; padding: 15px; }

/* ----- Header / Nav ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0a0e18;
  overflow: hidden;
}
.brand-mark img { width: 25px; height: 21px; object-fit: contain; }
/* On desktop the collapse wrapper is transparent: its children (links and
   actions) participate directly in the nav flex, exactly as before. */
.nav-collapse { display: contents; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links > .nav-item > a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 8px; font-size: 15px; color: var(--muted); }
.nav-links > .nav-item > a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* ----- Mega menu (Platform / Services / Company) -----
   Pure-CSS dropdown: opens on hover AND on keyboard focus-within, so no
   JavaScript is needed and the CSP stays intact. On mobile (see the 960px
   block) the panels render inline inside the collapsed menu instead of
   floating, since hover does not exist on touch. */
.nav-item { position: relative; }
.nav-item.has-mega:hover > a,
.nav-item.has-mega:focus-within > a { color: var(--ink); }

.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* Invisible bridge so the pointer can cross the gap from trigger to panel. */
.mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-platform { min-width: 300px; }
.mega-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.aegis-glyph-svg { width: 36px; height: 36px; flex: none; }
.aegis-word { font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.mega-desc { margin: 12px 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 270px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-platform .mega-list { border-top: 1px solid var(--border); padding-top: 10px; }
.mega-list a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink); }
.mega-list a:hover { background: color-mix(in srgb, var(--blue2) 10%, transparent); color: var(--blue2); }

/* Menu button: hidden on desktop, shown below the mobile breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--blue2); }
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ----- Hero ----- */
.hero { padding-block: 96px 72px; }
.hero > * { max-width: 820px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-tertiary {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}
.hero-tertiary a { color: var(--blue); font-weight: 600; }

/* ----- Risk triggers ----- */
.risk-strip {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.risk-strip .container { padding-block: 64px; }
.risk-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.risk-list li {
  background: var(--card);
  padding: 24px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.risk-k { font-weight: 700; font-size: 17px; color: var(--ink); }
.risk-v { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ----- How Aegis works steps ----- */
.how-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.how-steps li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px;
}
.how-n { font-family: var(--font-mono); font-size: 13px; color: var(--green); letter-spacing: 0.1em; }
.how-steps h3 { margin: 12px 0 8px; font-size: 18px; }
.how-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ----- Proof strip ----- */
.proof-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.proof-inner {
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
}
.proof-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.proof-logo { font-size: 17px; font-weight: 600; }
.proof-logo.muted { opacity: 0.55; }

/* ----- Split layouts ----- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.split-about { grid-template-columns: 1fr 1.3fr; align-items: center; }

/* ----- Aegis feature list ----- */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.feature-list li { background: var(--card); padding: 20px 22px; }
.feature-list h3 { font-size: 16px; margin: 0 0 5px; }
.feature-list p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; }
.aegis-login-note { margin: 20px 0 0; font-size: 15px; color: var(--muted); }
.aegis-login-note a { color: var(--blue); font-weight: 600; }

/* ----- Aegis agent activity ledger -----
   Shared by the homepage #aegis teaser and the Aegis platform page. Rows are streamed in */
.ledger {
  margin: 0;
  align-self: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
}
.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ledger-head .live { display: flex; align-items: center; gap: 8px; color: var(--green); }
.ledger .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: ledger-pulse 1.8s infinite; }
@keyframes ledger-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ledger-body {
  font-size: 13px;
  padding: 6px 0 10px;
  min-height: 308px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ledger .row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 18px;
  border-bottom: 1px dashed var(--border);
  animation: ledger-enter 0.4s ease both;
}
@keyframes ledger-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ledger .t { color: var(--muted); }
.ledger .a { color: var(--ink); }
.ledger .a b { color: var(--blue2); font-weight: 600; }
.ledger .chip { font-size: 11px; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.ledger .chip.ok { background: rgba(59, 166, 107, 0.16); color: var(--green); }
.ledger .chip.hold { background: rgba(255, 122, 0, 0.16); color: var(--orange); }
.ledger-foot { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .ledger .dot, .ledger .row { animation: none; }
}
.portrait-frame {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 360px;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--panel); /* shown only while the photo loads */
}
.portrait-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ----- Services band -----
   Theme is user system preference and using the standard surface tokens rather than the always dark band tokens. */
.band { background: var(--panel); color: var(--ink); }
.band h2 { color: var(--ink); }
.band-muted { color: var(--muted); }
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 48px;
}
.card { background: var(--card); padding: 32px 26px; }
.card-index { font-family: var(--font-mono); font-size: 13px; color: var(--green); margin: 0 0 14px; }
.card p:not(.card-index) { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }

/* Client logos with a short engagement note under each. White chips keep the
   logos legible on the dark services band in both light and dark themes. */
.engagements { margin-top: 44px; }
.client-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.client {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  padding: 26px 28px;
}
.client-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 14px 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.client-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.client figcaption {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ----- Contact ----- */
.contact-band { background: var(--panel); border-top: 1px solid var(--border); }
.contact-band .split { gap: 64px; }
.contact-details { display: grid; gap: 18px; margin: 36px 0 0; }
.contact-details dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact-details dd { margin: 0; font-size: 18px; font-weight: 600; }
.contact-details dd a { color: var(--ink); }
.contact-details dd a.accent-link { color: var(--blue); }
.contact-details dd a:hover { color: var(--blue2); }

.contact-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  display: grid;
  gap: 18px;
  align-content: start;
}
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.req { color: var(--red); }
/* Text-like fields only. Checkboxes and radios are excluded so this box
   styling never bleeds onto native controls nested in a .field (e.g. the
   fieldset on request-access.html). */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 15px;
  background: var(--field-bg);
  color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field textarea:focus { outline: none; border-color: var(--blue2); }
.form-note { font-size: 12px; color: var(--muted); margin: 0; font-family: var(--font-mono); }

/* ----- Footer ----- */
.site-footer { background: var(--band-bg); color: var(--band-muted); }
.footer-main {
  padding-block: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}
.brand-footer { color: var(--band-ink); }
.brand-footer:hover { color: var(--band-ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.footer-links a { color: var(--band-muted); font-size: 14px; }
.footer-links a:hover { color: var(--band-ink); }

/* ----- Sitemap footer (modernized pages) ----------------------------------
   Opt-in via .footer-sitemap, so pages still on the flat footer are unaffected.
   Brand + tagline on the left, four link columns on the right. */
.footer-main.footer-sitemap {
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  gap: 40px 48px;
  align-items: start;
  padding-block: 56px 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.footer-tagline { font-size: 14px; line-height: 1.55; color: var(--band-muted); margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-col h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--band-sub);
  font-weight: 600;
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--band-muted); font-size: 14px; }
.footer-col a:hover { color: var(--band-ink); }

.footer-legal { border-top: 1px solid var(--band-line); }
.footer-legal-inner {
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--band-sub);
}
.footer-legal-left { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.footer-legal a { color: var(--band-sub); }
.footer-legal a:hover { color: var(--band-ink); }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social-label { color: var(--band-sub); }
.footer-social a { display: inline-flex; color: var(--band-muted); }
.footer-social a:hover { color: var(--band-ink); }
.footer-social svg { width: 18px; height: 18px; }

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .split, .split-about { grid-template-columns: 1fr; gap: 40px; }
  .footer-main.footer-sitemap { grid-template-columns: 1fr; gap: 36px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
  .cards-3 { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .risk-list { grid-template-columns: 1fr; }

  /* Collapse the nav behind a menu button. The wrapper becomes a dropdown
     panel holding both the section links and the action buttons. */
  .nav-toggle { display: inline-flex; }
  .nav-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    padding: 12px 20px 20px;
  }
  .nav-collapse.is-open { display: flex; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links > .nav-item { width: 100%; }
  .nav-links > .nav-item > a {
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  /* Panels drop their float and sit inline inside the collapsed menu. */
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 4px 0 10px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .mega::before { display: none; }
  .mega-platform .mega-list { border-top: none; padding-top: 0; }
  .mega-brand { padding: 10px 4px; }
  .mega-list a { padding: 11px 4px; font-size: 15px; }
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 14px;
  }
  .nav-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .section { padding-block: 64px; }
  .footer-legal-inner { flex-direction: column; align-items: flex-start; }
  .hero { padding-block: 64px 48px; }
  .how-steps { grid-template-columns: 1fr; }
  .client-logos { grid-template-columns: 1fr; gap: 24px; }
  .contact-form { padding: 24px 20px; }
}

/* ----- Contact form security helpers ----- */
/* Honeypot: removed from visual and AT flow but still submitted by bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status { font-size: 14px; margin: 0; min-height: 1.2em; }
.form-status.is-error { color: var(--red); }
.form-status.is-ok { color: var(--green); }

/* Submit-error fallback: revealed only if the Netlify Forms POST fails, so
   visitors always have a visible address to reach us at. */
.form-fallback { margin-top: 14px; display: grid; gap: 10px; }
.form-fallback p { margin: 0; font-size: 14px; color: var(--muted); }
.form-fallback .btn { justify-self: start; }

/* ----- Legal / long-form content pages ----- */
.legal {
  max-width: 760px;
  padding-block: 80px 96px;
}
.legal h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 44px;
}
.legal h2 {
  font-size: 21px;
  line-height: 1.2;
  margin: 40px 0 12px;
}
.legal p,
.legal li {
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--blue2); }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal-facts {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
}
.legal-facts dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.legal-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

/* ----- Audit report preview (visual validation under the hero) -----
   A static, labeled example of what an Aegis agent audit report looks like.
   Separated from the surrounding bg by its own card border and shadow, so it
   does not depend on section tint for separation. */
.report-intro { max-width: 640px; margin: 0 0 36px; }
.audit-report {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.45);
}
.audit-report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.audit-title { color: var(--muted); }
.audit-tag {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 10px;
  letter-spacing: 0.12em;
}
.audit-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.audit-meta > div {
  background: var(--card);
  padding: 16px 20px;
  display: grid;
  gap: 4px;
}
.audit-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.audit-v { font-size: 15px; font-weight: 600; color: var(--ink); }
.audit-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.audit-stat { background: var(--card); padding: 20px; text-align: center; }
.audit-stat-n { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.audit-stat-l {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.audit-rows { list-style: none; margin: 0; padding: 6px 0; }
.audit-rows li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 20px;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.audit-rows li:last-child { border-bottom: none; }
.audit-row-t { font-family: var(--font-mono); color: var(--muted); font-size: 13px; }
.audit-row-a { color: var(--ink); }
.audit-row-a b { color: var(--blue2); font-weight: 600; }
.audit-report .chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.audit-report .chip.ok { background: rgba(59, 166, 107, 0.16); color: var(--green); }
.audit-report .chip.hold { background: rgba(255, 122, 0, 0.16); color: var(--orange); }
.audit-report .chip.flag { background: rgba(197, 61, 61, 0.16); color: var(--red); }
.audit-report-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

/* ----- "No QA department" strip (time-poverty) -----
   A bordered bg strip (like the risk strip) so it reads as its own callout
   without a tint change against the neighboring sections. */
.qa-strip {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.qa-strip .container { padding-block: 72px; }
.qa-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.qa-points li {
  background: var(--card);
  padding: 24px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.qa-k { font-weight: 700; font-size: 16px; color: var(--ink); }
.qa-v { color: var(--muted); font-size: 15px; line-height: 1.55; }
.qa-more { margin: 28px 0 0; font-size: 15px; }
.qa-more a { color: var(--blue); font-weight: 600; }

/* ----- FAQ (homepage / solutions; mirrors JSON-LD for GEO) ----- */
.faq { max-width: 780px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--blue2);
  font-size: 18px;
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ----- Collapsible FAQ wrapper (homepage) -----
   Keeps the section compact: the full accordion sits one click behind a
   single toggle, so the homepage stays short while every answer is reachable.
   The FAQPage JSON-LD and the questions themselves stay in the DOM. */
.faq-toggle { max-width: 780px; }
.faq-toggle > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.faq-toggle > summary:hover { border-color: var(--blue2); }
.faq-toggle > summary::-webkit-details-marker { display: none; }
.faq-toggle > summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--blue2);
  font-size: 18px;
  transition: transform 0.15s ease;
}
.faq-toggle[open] > summary::after { transform: rotate(45deg); }
.faq-toggle[open] > summary { margin-bottom: 20px; }

/* Responsive tweaks for the new blocks */
@media (max-width: 960px) {
  .audit-meta { grid-template-columns: repeat(2, 1fr); }
  .qa-points { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .audit-meta, .audit-stats { grid-template-columns: 1fr; }
  .audit-rows li { grid-template-columns: 48px 1fr; }
  .audit-rows .chip { grid-column: 2; justify-self: start; }
}