/* ==========================================================================
   Mid Group AI: aegis.css
   Styles specific to the Aegis platform page (aegis.html). Loaded in addition
   to styles.css, so it inherits the site tokens, header, footer, buttons, and
   the shared .ledger component. Uses distinct class names to avoid colliding
   with the homepage's .card / .section / .cases styles.
   ========================================================================== */

/* ----- Shared button row ----- */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ----- Hero ----- */
.aegis-hero { padding-block: 80px 64px; border-bottom: 1px solid var(--border); }
.aegis-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.aegis-hero h1 { margin: 16px 0 18px; }
.aegis-hero .accent { color: var(--blue2); }
.aegis-hero .lede { font-size: 19px; color: var(--muted); max-width: 34em; margin: 0; }
.aegis-hero .lede strong { color: var(--ink); font-weight: 600; }
.aegis-proof { margin-top: 24px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.aegis-proof em { font-style: normal; color: var(--blue2); }

/* ----- Generic content section on this page ----- */
.aegis-section { padding-block: 80px; border-bottom: 1px solid var(--border); }
.aegis-section .section-lede { color: var(--muted); max-width: 42em; margin: 10px 0 40px; }

/* ----- Outcomes grid ----- */
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.outcome-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 26px;
}
.outcome-card .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue2);
  display: block;
  margin-bottom: 12px;
}
.outcome-card h3 { font-size: 20px; margin: 0 0 10px; }
.outcome-card p { color: var(--muted); font-size: 16px; margin: 0; }
.outcome-card p b { color: var(--ink); font-weight: 600; }

/* ----- SMB use cases ----- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 26px;
}
.case-who {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
  display: block;
}
.case-card p { color: var(--muted); font-size: 15px; margin: 0; }
.case-does {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.case-does b { color: var(--ink); font-weight: 600; }

/* ----- Security & trust list ----- */
.trust-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 52em;
}
.trust-list li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.trust-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--green);
}
.trust-list b { color: var(--ink); font-weight: 600; }
.trust-list a { color: var(--blue2); font-weight: 600; }

/* ----- Pilot steps ----- */
.pilot-steps {
  list-style: none;
  counter-reset: pilot;
  margin: 8px 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 52em;
}
.pilot-steps li {
  counter-increment: pilot;
  position: relative;
  padding: 4px 0 4px 52px;
  min-height: 34px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.pilot-steps li::before {
  content: counter(pilot, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--blue2);
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pilot-steps b { color: var(--ink); font-weight: 600; }
.pilot-note { color: var(--muted); font-size: 16px; max-width: 52em; margin: 0 0 28px; }
.pilot-note b { color: var(--ink); font-weight: 600; }

/* ----- FAQ ----- */
.aegis-faq details {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 12px;
}
.aegis-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;
}
.aegis-faq summary::-webkit-details-marker { display: none; }
.aegis-faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--blue2);
  font-size: 18px;
  transition: transform 0.15s ease;
}
.aegis-faq details[open] summary::after { transform: rotate(45deg); }
.aegis-faq details p { padding: 0 22px 20px; color: var(--muted); max-width: 54em; margin: 0; }

/* ----- Closing CTA ----- */
.aegis-cta { padding-block: 88px; text-align: center; }
.aegis-cta h2 { margin: 14px auto 12px; }
.aegis-cta p { color: var(--muted); max-width: 36em; margin: 0 auto 28px; }
.aegis-cta .cta-row { justify-content: center; }
.aegis-credit {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .aegis-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
}