/*
 * brand.css — Sophia KYC Design System
 * Dark-mode-led. Navy canvas. Sparing gold.
 * Pages link this BEFORE their inline <style> block.
 * Page-specific overrides go in the inline block.
 *
 * Tokens follow Sophia brand guidelines (sophia-kyc-brand-guidelines.pptx)
 * and the dark-mode navy scale from the site brief §5.
 */


/* ══════════════════════════════════════
   1. RESET
   ══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}


/* ══════════════════════════════════════
   2. TOKENS
   ══════════════════════════════════════ */
:root {
  /* Navy canvas scale (dark mode) */
  --navy-950: #020E1A;
  --navy-900: #051B2E;
  --navy-800: #0A2744;
  --navy-700: #103456;
  --navy-600: #1A4268;
  --navy-500: #2A5580;
  --navy-400: #4A7EA8;
  --navy-300: #7BA8CC;
  --navy-200: #A8C8E0;
  --navy-100: #D0E2F0;

  /* Brand palette */
  --prussian:       #003153;
  --prussian-light: #004A7A;
  --prussian-dark:  #00243D;
  --cyan:           #00838F;
  --cyan-light:     #00A5B4;
  --teal:           #008080;
  --teal-light:     #009D9D;
  --platinum:       #E5E4E2;
  --gold:           #C9A84C;
  --gold-light:     #D4BA6A;
  --gold-dark:      #A88B3D;

  /* Semantic */
  --bg:           var(--navy-950);
  --surface:      var(--navy-900);
  --surface-elev: var(--navy-800);
  --surface-hov:  var(--navy-700);
  --border:       var(--navy-600);
  --border-soft:  rgba(123, 168, 204, 0.12);
  --text:         var(--navy-100);
  --text-body:    var(--navy-300);
  --text-muted:   var(--navy-500);
  --text-subtle:  var(--navy-400);
  --accent:       var(--gold);
  --accent-hover: var(--gold-light);
  --link:         var(--navy-200);
  --link-hover:   var(--gold-light);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 112px;

  /* Radius & shadow */
  --radius:    12px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* Type stack — system-native, per Sophia brand spec */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --max-w: 1180px;
  --max-w-prose: 720px;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ══════════════════════════════════════
   3. BASE
   ══════════════════════════════════════ */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* Page-wide subtle substrate motif — horizontal lines, navy-on-navy */
  background-image:
    radial-gradient(ellipse 1200px 600px at 50% -200px, rgba(0, 131, 143, 0.06), transparent 70%),
    radial-gradient(ellipse 1000px 500px at 80% 40%, rgba(201, 168, 76, 0.025), transparent 70%);
  background-attachment: fixed;
}

[id] { scroll-margin-top: 64px; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--link-hover); }

::selection { background: var(--gold); color: var(--navy-950); }


/* ══════════════════════════════════════
   4. TYPOGRAPHY
   ══════════════════════════════════════ */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.5vw, 40px); }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
p { line-height: 1.6; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}
.eyebrow.gold { color: var(--gold); }

.lede {
  font-size: 18px;
  color: var(--navy-200);
  line-height: 1.6;
  max-width: var(--max-w-prose);
}

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


/* ══════════════════════════════════════
   5. LAYOUT
   ══════════════════════════════════════ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 720px) {
  .container { padding: 0 var(--space-lg); }
}

section {
  position: relative;
  padding: var(--space-4xl) 0;
}
section + section {
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 720px) {
  section { padding: var(--space-3xl) 0; }
}

.section-head { margin-bottom: var(--space-2xl); }
.section-head h2 { margin-bottom: var(--space-md); }
.section-head .lede { color: var(--navy-300); }


/* ══════════════════════════════════════
   6. NAV
   ══════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(2, 14, 26, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
  transition: border-color var(--transition);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}
.nav-logo img {
  height: 52px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-300);
  text-decoration: none;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--text); }

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

/* Smaller, tighter CTA in nav */
.nav-right .btn,
.mobile-menu .btn {
  padding: 8px 16px;
  font-size: 13px;
  height: auto;
  min-height: 0;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  flex-direction: column;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy-300);
  border-radius: 1px;
  transition: all var(--transition);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--border-soft);
  background: var(--navy-950);
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: var(--shadow-md);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-200);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu a:last-child { border-bottom: none; }
/* Ensure the primary CTA inside the mobile menu keeps its dark-on-gold text
   (without this, the generic .mobile-menu a rule above wins on specificity
   and turns the button text light-blue against the gold fill). */
.mobile-menu a.btn-primary {
  color: var(--navy-950);
  border-bottom: none;
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* Hide the desktop CTA on mobile — it only appears inside the hamburger menu */
  .nav-right { display: none; }
}


/* ══════════════════════════════════════
   7. BUTTONS
   ══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), color var(--transition),
              box-shadow var(--transition);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy-950);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--navy-950);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.22);
}
.btn-secondary {
  background: transparent;
  color: var(--navy-100);
  border-color: var(--navy-600);
}
.btn-secondary:hover {
  border-color: var(--navy-400);
  background: var(--navy-800);
  color: var(--text);
}
.btn-ghost {
  background: transparent;
  color: var(--navy-200);
  border-color: transparent;
  padding: 10px 4px;
}
.btn-ghost:hover { color: var(--gold-light); }

.btn-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform var(--transition);
}
.btn-arrow:hover::after { transform: translateX(3px); }


/* ══════════════════════════════════════
   8. HERO
   ══════════════════════════════════════ */
.hero {
  padding: var(--space-4xl) 0 var(--space-3xl);
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Configuration lattice — dotted grid behind hero, navy-on-navy */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(123, 168, 204, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
  opacity: 0.7;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 {
  margin-bottom: var(--space-lg);
  max-width: 18ch;
}
.hero .lede {
  font-size: clamp(17px, 1.4vw, 19px);
  max-width: 60ch;
  margin-bottom: var(--space-2xl);
  color: var(--navy-200);
}
.hero-ctas {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.hero-band {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: linear-gradient(135deg, rgba(0, 131, 143, 0.10), rgba(0, 49, 83, 0.20));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 17px;
  color: var(--navy-100);
  line-height: 1.55;
  position: relative;
}
.hero-band::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.hero-who {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-soft);
  color: var(--navy-300);
  font-size: 15px;
  max-width: 76ch;
  line-height: 1.65;
}

.proof-strip {
  margin-top: var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-soft);
}
.proof-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}
.proof-item p {
  font-size: 14px;
  color: var(--navy-300);
  line-height: 1.6;
}
@media (max-width: 820px) {
  .proof-strip { grid-template-columns: 1fr; gap: var(--space-md); }
}


/* ══════════════════════════════════════
   9. CARDS / SUB-SECTIONS
   ══════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-xl);
  transition: border-color var(--transition), transform var(--transition),
              background var(--transition);
}
.card:hover {
  border-color: var(--border);
  background: var(--surface-elev);
}
.card h3 { margin-bottom: var(--space-sm); font-size: 18px; }
.card p { color: var(--navy-300); font-size: 15px; line-height: 1.6; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 900px) {
  .grid-3, .grid-6, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-3, .grid-6, .grid-4, .grid-2 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════
   10. STAT / BIG NUMBER
   ══════════════════════════════════════ */
.stat-big {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.stat-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--navy-400);
  margin-bottom: var(--space-md);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  margin: var(--space-2xl) 0;
}
.stat-row .stat-big { font-size: clamp(32px, 4vw, 44px); }
@media (max-width: 820px) {
  .stat-row { grid-template-columns: 1fr; gap: var(--space-lg); }
}


/* ══════════════════════════════════════
   11. TABLES
   ══════════════════════════════════════ */
.table-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
thead th {
  background: var(--surface-elev);
  color: var(--navy-100);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--navy-300);
  line-height: 1.55;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--navy-100); font-weight: 600; }
tbody td strong { color: var(--navy-100); font-weight: 600; }

@media (max-width: 720px) {
  table { font-size: 14px; }
  thead th, tbody td { padding: 14px 14px; }
}


/* ══════════════════════════════════════
   12. SOPHIA OS ARCHITECTURE DIAGRAM
   ══════════════════════════════════════ */
.arch {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl);
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.arch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.arch-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--navy-400);
  font-weight: 600;
  text-align: center;
  margin: var(--space-md) 0 var(--space-sm);
}
.arch-label--gold {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2.5px;
  margin-top: var(--space-md);
  margin-bottom: -2px;
}
.arch-core--transparent {
  background: transparent !important;
  border: 1px dashed rgba(201, 168, 76, 0.35) !important;
}
.arch-node {
  background: var(--navy-800);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--navy-200);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.arch-node svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}
.arch-node.input { background: rgba(0, 131, 143, 0.10); border-color: rgba(0, 131, 143, 0.35); color: var(--navy-100); }
.arch-node.channel { background: rgba(201, 168, 76, 0.08); border-color: rgba(201, 168, 76, 0.30); color: var(--navy-100); }

.arch-core {
  margin: var(--space-md) 0;
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(0, 49, 83, 0.6), rgba(0, 131, 143, 0.18));
  border: 1px solid var(--cyan);
  border-radius: var(--radius);
  position: relative;
}
.arch-core::before {
  content: "Sophia OS";
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--navy-950);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.arch-core .arch-row { gap: var(--space-sm); }
.arch-core .arch-node {
  background: var(--navy-800);
  border-color: var(--navy-600);
}

.arch-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  color: var(--navy-500);
  font-size: 14px;
}
.arch-connector::before {
  content: "";
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--navy-500), transparent);
}


/* ══════════════════════════════════════
   13. PRINCIPLE / FEATURE LIST
   ══════════════════════════════════════ */
.principles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
.principle {
  padding: var(--space-lg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.principle h4 {
  font-size: 14px;
  color: var(--gold);
  margin-bottom: var(--space-sm);
  font-weight: 700;
}
.principle p { font-size: 13px; color: var(--navy-300); line-height: 1.55; }
@media (max-width: 1000px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .principles { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════
   14. SEGMENT CARDS (Reality, Industries)
   ══════════════════════════════════════ */
.segment-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-xl);
  position: relative;
}
.segment-card .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: var(--space-sm);
}
.segment-card h3 { margin-bottom: var(--space-md); }
.segment-card .pull {
  border-left: 2px solid var(--gold);
  padding-left: var(--space-md);
  color: var(--navy-100);
  font-style: italic;
  margin: var(--space-md) 0;
  font-size: 15px;
}
.segment-card p { font-size: 14px; color: var(--navy-300); line-height: 1.6; }
.segment-card .metrics {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ══════════════════════════════════════
   15. CALLOUT BANDS
   ══════════════════════════════════════ */
.callout-band {
  margin: var(--space-2xl) 0 0;
  padding: var(--space-xl);
  background: linear-gradient(135deg, rgba(0, 49, 83, 0.5), rgba(2, 14, 26, 0.4));
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  color: var(--navy-100);
  font-size: 17px;
  line-height: 1.55;
}
.callout-band strong { color: var(--text); font-weight: 600; }


/* ══════════════════════════════════════
   16. CTA BLOCK
   ══════════════════════════════════════ */
.cta-block {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-950));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(201, 168, 76, 0.08), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(0, 131, 143, 0.08), transparent 50%);
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 { margin-bottom: var(--space-md); }
.cta-block p { color: var(--navy-300); max-width: 60ch; margin: 0 auto var(--space-xl); }


/* ══════════════════════════════════════
   17. FOOTER
   ══════════════════════════════════════ */
.footer {
  margin-top: 0;
  padding: var(--space-3xl) 0 var(--space-xl);
  background: var(--navy-950);
  border-top: 1px solid var(--border-soft);
  color: var(--navy-400);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.footer-brand img {
  height: 32px;
  width: auto;
  display: block;
  margin-bottom: var(--space-md);
}
.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy-300);
  max-width: 38ch;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--navy-200);
  margin-bottom: var(--space-md);
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--navy-400);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-md) var(--space-xl) 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--navy-500);
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; }
}


/* ══════════════════════════════════════
   18. SCROLL REVEAL
   ══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 160ms; }
.reveal.d3 { transition-delay: 240ms; }
.reveal.d4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ══════════════════════════════════════
   19a. Pricing cards (#why-sophia)
   ══════════════════════════════════════ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}
@media (max-width: 540px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-2xl) var(--space-xl);
}
.pricing-card .pricing-card__head h3 {
  font-size: 20px;
  color: var(--navy-300);
  margin-bottom: 4px;
}
.pricing-card__tagline {
  font-size: 13px;
  color: var(--navy-400);
  margin-bottom: var(--space-lg);
}
.pricing-card__price {
  padding: var(--space-md) 0 var(--space-lg);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-lg);
}
.pricing-card__cost {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy-100);
  line-height: 1.1;
  margin-bottom: 6px;
}
.pricing-card__timeline {
  font-size: 14px;
  color: var(--navy-400);
  font-style: italic;
}
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.pricing-card__list li {
  font-size: 14px;
  color: var(--navy-300);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.pricing-card__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--navy-500);
  font-weight: 700;
}

/* ══════════════════════════════════════
   19b. Proof strip — 4 column variant
   ══════════════════════════════════════ */
.proof-strip--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) {
  .proof-strip--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .proof-strip--4 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════
   19c. Problem section — 2-column top + fragmentation carousel
   ══════════════════════════════════════ */
.problem-top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 640px) {
  .problem-top { grid-template-columns: 1fr; }
}

.problem-intro .eyebrow { margin-bottom: var(--space-md); }
.problem-intro h2 { margin-bottom: var(--space-md); }

/* ══════════════════════════════════════
   19d. Problem section — editorial accordion + segment tabs
   ══════════════════════════════════════ */
.problem-detail summary { list-style: none; cursor: pointer; }
.problem-detail summary::-webkit-details-marker { display: none; }

.problem-detail > details { padding: var(--space-md) 0; }
.problem-detail > details > summary {
  padding: 4px 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  color: var(--navy-300);
  font-size: 17px;
  font-weight: 500;
  transition: color var(--transition);
}
.problem-detail > details > summary:hover { color: var(--text); }
.problem-detail > details[open] > summary { color: var(--text); font-weight: 600; }

.acc-tag {
  color: var(--navy-500);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
}
.acc-marker {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  color: var(--navy-500);
  transition: transform 240ms ease, color var(--transition);
}
.problem-detail > details[open] .acc-marker {
  transform: rotate(45deg);
  color: var(--gold);
}
.acc-body {
  padding: var(--space-sm) 0 0 0;
  color: var(--navy-300);
  font-size: 15px;
  line-height: 1.7;
  max-width: 60ch;
}
.acc-group-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy-500);
  padding: var(--space-lg) 0 var(--space-xs);
}

/* Segment tabs (horizontal) */
.seg-tabs {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-md) 0 var(--space-sm);
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.seg-tab {
  background: transparent;
  border: none;
  padding: 8px 0;
  margin-bottom: -1px;
  color: var(--navy-400);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color var(--transition);
}
.seg-tab:hover { color: var(--text); }
.seg-tab__tag {
  color: var(--navy-500);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  margin-right: 10px;
}
.seg-tab.active .seg-tab__tag { color: var(--gold); }
.seg-tab.active { color: var(--text); font-weight: 600; }
.seg-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
}
.seg-panels { padding: var(--space-md) 0 0; }
.seg-panel { display: none; }
.seg-panel.active { display: block; animation: seg-fade 240ms ease; }
@keyframes seg-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.seg-pull {
  color: var(--text);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}
.seg-body {
  color: var(--navy-300);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}
.seg-metric {
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font);
  letter-spacing: 0;
}


/* ══════════════════════════════════════
   19e. Core capabilities — hairline-grid with icons
   ══════════════════════════════════════ */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(123, 168, 204, 0.02);
}
.caps-cell {
  padding: var(--space-xl);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
/* Strip outer-edge borders so only inner hairlines remain */
.caps-cell:nth-child(3n) { border-right: none; }
.caps-cell:nth-last-child(-n+3) { border-bottom: none; }
.caps-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.caps-icon {
  width: 22px;
  height: 22px;
  color: var(--navy-200);
  flex-shrink: 0;
}
.caps-head h4 {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}
.caps-cell p {
  color: var(--navy-300);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps-cell:nth-child(3n) { border-right: 1px solid var(--border-soft); }
  .caps-cell:nth-child(2n) { border-right: none; }
  .caps-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--border-soft); }
  .caps-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 560px) {
  .caps-grid { grid-template-columns: 1fr; }
  .caps-cell { border-right: none !important; border-bottom: 1px solid var(--border-soft) !important; }
  .caps-cell:last-child { border-bottom: none !important; }
}


/* ══════════════════════════════════════
   19j. Reference deployment strip — under principles ticker
   ══════════════════════════════════════ */
.reference-note {
  margin-top: var(--space-xl);
  color: var(--navy-300);
  font-size: 15px;
  line-height: 1.65;
  max-width: 75ch;
}


/* ══════════════════════════════════════
   19i. Quiet table — no container, hairline rows only
   ══════════════════════════════════════ */
.table-wrap--quiet { background: transparent; border: none; padding: 0; }
.table-wrap--quiet table { border: none; }
.table-wrap--quiet th,
.table-wrap--quiet td {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  font-size: 14px;
  color: var(--navy-300);
}
.table-wrap--quiet th {
  color: var(--navy-500);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 0;
}
.table-wrap--quiet td strong { color: var(--text); font-weight: 600; }
.table-wrap--quiet tr:last-child td { border-bottom: none; }

/* Lever row with icon */
.lever {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}
.lever__ico {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}
.lever strong { color: var(--gold); font-weight: 600; }


/* ══════════════════════════════════════
   19k. Product modules — tilted 3D cards
   ══════════════════════════════════════ */
.modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  perspective: 1500px;
}
@media (max-width: 720px) {
  .modules-grid { grid-template-columns: 1fr; perspective: none; }
}
.module-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: transform 700ms cubic-bezier(.7,0,.2,1), border-color 400ms, box-shadow 400ms, background 400ms;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}
.module-card:nth-child(1) { transform: rotateY(8deg) rotateX(2deg); }
.module-card:nth-child(2) { transform: rotateY(-8deg) rotateX(2deg); }
.module-card:hover {
  transform: rotateY(0) rotateX(0) translateZ(20px);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.04), var(--surface) 70%);
  box-shadow: 0 20px 60px rgba(201, 168, 76, 0.15);
}
@media (max-width: 720px) {
  .module-card:nth-child(1),
  .module-card:nth-child(2) { transform: none; }
}
.module-card__num {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  margin-bottom: var(--space-md);
}
.module-card h3 {
  font-size: 26px;
  color: var(--text);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.015em;
}
.module-card__tagline {
  color: var(--gold-light);
  font-size: 15px;
  margin-bottom: var(--space-lg);
}
.module-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
}
.module-card__list li {
  color: var(--navy-200);
  font-size: 14px;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}
.module-card__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--gold);
}


/* ══════════════════════════════════════
   19h. Why Sophia — featured pricing card (gold accent)
   ══════════════════════════════════════ */
.pricing-card--featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.06), var(--surface) 70%);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.10), 0 18px 48px rgba(201, 168, 76, 0.08);
  position: relative;
}
/* Disable hover state on the featured card — it stays in its gold treatment */
.pricing-card--featured:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.06), var(--surface) 70%);
}
.pricing-card--featured .pricing-card__head h3 { color: var(--gold); }
.pricing-card--featured .pricing-card__tagline { color: var(--gold-light); }
.pricing-card--featured .pricing-card__cost { color: var(--gold); }
.pricing-card--featured .pricing-card__list li { color: var(--navy-100); }
.pricing-card--featured .pricing-card__list li::before { color: var(--gold); }


/* ══════════════════════════════════════
   19g. Outcomes card-chart (dummy graphs above each stat)
   ══════════════════════════════════════ */
.card-chart {
  display: block;
  width: 100%;
  height: 80px;
  margin: 0 auto var(--space-md);
  color: var(--navy-300);
}

/* Centered head: chart + big number + label sit centered;
   only the trailing body paragraph stays left-aligned */
#outcomes .grid-3 > .card { text-align: center; }
#outcomes .grid-3 > .card .stat-big,
#outcomes .grid-3 > .card .stat-label { text-align: center; }
#outcomes .grid-3 > .card .stat-big {
  font-style: italic;
  letter-spacing: -0.02em;
}
#outcomes .grid-3 > .card .stat-big .stat-conn {
  font-size: 0.4em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--navy-400);
  text-transform: uppercase;
  vertical-align: middle;
  padding: 0 2px;
}
#outcomes .grid-3 > .card p { text-align: left; margin-top: var(--space-md); }

/* Animated gold trace running around the border (rotating conic gradient
   masked to a 1px ring). Subtle: card itself reads normally; the trace adds
   a quiet moving highlight that signals "live" without being noisy. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
#outcomes .grid-3 > .card {
  position: relative;
  overflow: hidden;
}
#outcomes .grid-3 > .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 70%, var(--gold) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: card-trace 7.2s linear infinite;
  pointer-events: none;
  z-index: 1;
}
#outcomes .grid-3 > .card:nth-child(2)::before { animation-delay: -2s; }
#outcomes .grid-3 > .card:nth-child(3)::before { animation-delay: -4s; }
@keyframes card-trace {
  to { --angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  #outcomes .grid-3 > .card::before { animation: none; }
}


/* ══════════════════════════════════════
   19f. Platform principles — calm horizontal ticker
   ══════════════════════════════════════ */
.principles-ticker {
  overflow: hidden;
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.principles-ticker__rail {
  display: flex;
  gap: var(--space-3xl);
  width: max-content;
  animation: principles-scroll 60s linear infinite;
}
.principles-ticker:hover .principles-ticker__rail { animation-play-state: paused; }
@keyframes principles-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.principle-card {
  width: 320px;
  flex-shrink: 0;
}
.principle-card__head {
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}
.principle-card__sub {
  color: var(--navy-300);
  font-size: 14px;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .principles-ticker__rail { animation: none; }
}


/* ══════════════════════════════════════
   19m. Contact form (Formsubmit-driven inline submission)
   ══════════════════════════════════════ */
.contact-form {
  margin-top: var(--space-2xl);
  text-align: left;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}
.form-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy-400);
}
.form-field__optional {
  color: var(--navy-500);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  background: rgba(2, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(2, 14, 26, 0.75);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--navy-500);
}
.form-field textarea {
  resize: vertical;
  min-height: 84px;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-300) 50%),
                    linear-gradient(135deg, var(--navy-300) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-2xl);
}

/* Passive disclosure — sits between the last field and the Send button,
   left-aligned in line with the other form labels.
   Override the inherited `.cta-block p` rule (which forces max-width 60ch + margin auto). */
.cta-block .form-disclosure,
.form-disclosure {
  margin: 0 0 var(--space-lg) 0;
  max-width: none;
  font-family: var(--font);
  font-size: 12px;
  font-style: italic;
  color: var(--navy-500);
  line-height: 1.5;
  text-align: left;
}
.form-disclosure a {
  color: var(--navy-200);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
}
.form-disclosure a:hover { color: var(--gold); }

/* "Or email us directly" line — uses body font (was mono) */
.form-contact-direct {
  margin-top: var(--space-lg);
  font-family: var(--font);
  font-size: 14px;
  color: var(--navy-400);
  text-align: center;
}
.form-contact-direct a {
  color: var(--navy-200);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.form-contact-direct a:hover { color: var(--gold); }

.form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-lg);
}
.form-submit button[disabled] { opacity: 0.5; cursor: not-allowed; }
.form-feedback {
  color: var(--navy-300);
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.4px;
}
.form-feedback.error { color: #E5837A; }

/* Inline success state — replaces the form after submission */
.form-success {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--space-xl);
  border: 1px dashed rgba(201, 168, 76, 0.45);
  border-radius: var(--radius);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  animation: form-success-fade 320ms ease;
}
@keyframes form-success-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-success__eyebrow {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.form-success__title {
  color: var(--text);
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-sm);
}
.form-success a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ══════════════════════════════════════
   20. UTILITIES
   ══════════════════════════════════════ */
.text-gold { color: var(--gold); }
.text-cyan { color: var(--cyan-light); }
.text-bright { color: var(--text); }
.text-muted { color: var(--text-muted); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }