/* ============================================================
   COUSSA GROUP — PAGE FRAMEWORKS  ·  Version 1.0
   Book 1 · Part 4 · Prompts 021–030
   Layer order: tokens.css → components.css → pages.css
   Assembles components into governed page sections. Token-only.
   ============================================================ */

/* ---------- LAYOUT PRIMITIVES ---------- */
.cg-container {
  max-width: var(--cg-container-max);
  margin-inline: auto;
  padding-inline: var(--cg-margin-desktop);
}
.cg-section { padding-block: var(--cg-space-8); }
.cg-section--tight { padding-block: var(--cg-space-7); }
.cg-section--dark { background: var(--cg-navy-900); color: var(--cg-text-inverse); }
.cg-section--warm { background: var(--cg-cream-50); }
.cg-section__kicker {
  font-size: var(--cg-fs-caption); text-transform: uppercase;
  letter-spacing: var(--cg-tracking-kicker); color: var(--cg-gold-600);
  margin-bottom: var(--cg-space-3);
}
.cg-section--dark .cg-section__kicker { color: var(--cg-gold-500); }
.cg-section__title {
  font-family: var(--cg-font-display); font-size: var(--cg-fs-h2);
  color: var(--cg-navy-900); line-height: var(--cg-lh-heading);
  margin: 0 0 var(--cg-space-5); max-width: 22ch;
}
.cg-section--dark .cg-section__title { color: var(--cg-text-inverse); }
.cg-section__intro { font-size: var(--cg-fs-body-lg); color: var(--cg-text-secondary);
  max-width: 60ch; margin-bottom: var(--cg-space-6); }

/* ============================================================
   021 · HOMEPAGE FRAMEWORK
   ============================================================ */

/* -- 01 Institutional Hero -- */
.cg-hero {
  min-height: 100vh; display: flex; align-items: center;
  background: var(--cg-navy-900); color: var(--cg-text-inverse);
  padding-block: var(--cg-space-9);
}
.cg-hero__inner { max-width: 900px; }
.cg-hero__eyebrow {
  font-size: var(--cg-fs-caption); text-transform: uppercase;
  letter-spacing: var(--cg-tracking-kicker); color: var(--cg-gold-500);
  margin-bottom: var(--cg-space-4);
}
.cg-hero__headline {
  font-family: var(--cg-font-display); font-weight: 700;
  font-size: clamp(2.625rem, 6vw, 4.5rem); /* 42 → 72px */
  line-height: 1.05; letter-spacing: var(--cg-tracking-display);
  margin: 0 0 var(--cg-space-5);
}
.cg-hero__sub { font-size: var(--cg-fs-body-lg); color: var(--cg-cream-200);
  max-width: 56ch; margin-bottom: var(--cg-space-6); }
.cg-hero__cta { display: flex; gap: var(--cg-space-4); flex-wrap: wrap; }

/* -- 02 Network Statistics -- */
.cg-stats-band { background: var(--cg-cream-50); }
.cg-stats-band .cg-counter-grid { align-items: start; }
.cg-stats-band .cg-counter { color: var(--cg-navy-900); }

/* -- 03 Platform Capabilities -- */
.cg-capabilities__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cg-space-5);
}
.cg-capability {
  border: 1px solid var(--cg-cream-300); padding: var(--cg-space-5);
  display: flex; flex-direction: column; gap: var(--cg-space-3);
  transition: border-color var(--cg-motion-base) var(--cg-ease);
}
.cg-capability:hover { border-color: var(--cg-slate-300); }
.cg-capability__index {
  font-family: var(--cg-font-mono); font-size: var(--cg-fs-caption);
  color: var(--cg-gold-600); letter-spacing: 0.1em;
}
.cg-capability__name { font-family: var(--cg-font-display);
  font-size: var(--cg-fs-h4); color: var(--cg-navy-900); margin: 0; }
.cg-capability__desc { font-size: var(--cg-fs-body-sm); color: var(--cg-text-secondary); }
.cg-capability__tag { align-self: flex-start; margin-top: auto;
  font-size: var(--cg-fs-legal); text-transform: uppercase;
  letter-spacing: var(--cg-tracking-kicker); color: var(--cg-slate-500); }

/* -- 04 Transaction Lifecycle -- */
.cg-lifecycle { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; border-top: 1px solid var(--cg-navy-800); }
.cg-phase { padding: var(--cg-space-5) var(--cg-space-4);
  border-right: 1px solid var(--cg-navy-800); }
.cg-phase:last-child { border-right: 0; }
.cg-phase__num { font-family: var(--cg-font-mono); font-size: var(--cg-fs-caption);
  color: var(--cg-gold-500); margin-bottom: var(--cg-space-3); }
.cg-phase__name { font-family: var(--cg-font-display); font-size: var(--cg-fs-h5);
  color: var(--cg-text-inverse); margin: 0 0 var(--cg-space-2); }
.cg-phase__desc { font-size: var(--cg-fs-body-sm); color: var(--cg-cream-200);
  line-height: var(--cg-lh-body); }

/* -- 05 Research Center -- */
.cg-research-grid { display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--cg-space-6); align-items: start; }
.cg-research-feature { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--cg-space-4); }
.cg-newsletter { background: var(--cg-navy-900); color: var(--cg-text-inverse);
  padding: var(--cg-space-6); }
.cg-newsletter h3 { font-family: var(--cg-font-display); font-size: var(--cg-fs-h4);
  color: var(--cg-text-inverse); margin: 0 0 var(--cg-space-3); }
.cg-newsletter p { font-size: var(--cg-fs-body-sm); color: var(--cg-cream-200);
  margin-bottom: var(--cg-space-4); }

/* -- 06 Institutional CTA -- */
.cg-cta-band { background: var(--cg-navy-900); color: var(--cg-text-inverse);
  padding-block: var(--cg-space-9); text-align: center; }
.cg-cta-band__title { font-family: var(--cg-font-display);
  font-size: clamp(2rem, 4vw, var(--cg-fs-h1)); color: var(--cg-text-inverse);
  max-width: 24ch; margin: 0 auto var(--cg-space-5); line-height: 1.1; }
.cg-cta-band__sub { font-size: var(--cg-fs-body-lg); color: var(--cg-cream-200);
  max-width: 52ch; margin: 0 auto var(--cg-space-6); }

/* ============================================================
   022–025 · EXPERIENCE FRAMEWORKS (shared scaffolds)
   ============================================================ */
/* journey stepper — seller/buyer flows (no startup progress bars) */
.cg-journey { display: grid; gap: var(--cg-space-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cg-journey__stage {
  border-top: 2px solid var(--cg-cream-300); padding-top: var(--cg-space-3);
}
.cg-journey__stage.is-active { border-top-color: var(--cg-gold-500); }
.cg-journey__num { font-family: var(--cg-font-mono); font-size: var(--cg-fs-caption);
  color: var(--cg-slate-500); }
.cg-journey__label { font-size: var(--cg-fs-body-sm); font-weight: 600;
  color: var(--cg-navy-900); margin-top: var(--cg-space-1); }

/* confidentiality tier badges — marketplace (024) */
.cg-tier { display: inline-flex; align-items: center; gap: var(--cg-space-2);
  font-size: var(--cg-fs-caption); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--cg-tracking-kicker); padding: var(--cg-space-1) var(--cg-space-3);
  border: 1px solid currentColor; }
.cg-tier--public   { color: var(--cg-slate-500); }
.cg-tier--teaser   { color: var(--cg-blue-600); }
.cg-tier--nda      { color: var(--cg-gold-700); }
.cg-tier--full     { color: var(--cg-navy-900); }

/* research center layout (025) */
.cg-research-center { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--cg-space-5); }

/* ============================================================
   026 · MOBILE / RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .cg-container { padding-inline: var(--cg-margin-tablet); }
  .cg-capabilities__grid { grid-template-columns: repeat(2, 1fr); }
  .cg-lifecycle { grid-template-columns: repeat(2, 1fr); }
  .cg-phase { border-bottom: 1px solid var(--cg-navy-800); }
  .cg-research-grid { grid-template-columns: 1fr; }
  .cg-research-center { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cg-container { padding-inline: var(--cg-margin-mobile); }
  .cg-section { padding-block: var(--cg-space-7); }
  .cg-hero { min-height: 90vh; }
  .cg-capabilities__grid,
  .cg-lifecycle,
  .cg-research-feature,
  .cg-research-center { grid-template-columns: 1fr; }
  .cg-hero__cta .cg-btn { width: 100%; }
}

/* ============================================================
   027 · ACCESSIBILITY (page-level)
   ============================================================ */
.cg-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cg-bg-primary); color: var(--cg-navy-900); padding: var(--cg-space-3);
}
.cg-skip-link:focus { left: var(--cg-space-3); }
:target { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  .cg-hero, .cg-counter { animation: none !important; }
}

/* ============================================================
   029 · TRUST SURFACES
   ============================================================ */
.cg-trust-strip { display: flex; flex-wrap: wrap; gap: var(--cg-space-6);
  align-items: center; padding-block: var(--cg-space-5);
  border-block: 1px solid var(--cg-cream-300); }
.cg-trust-strip__item { font-size: var(--cg-fs-caption);
  text-transform: uppercase; letter-spacing: var(--cg-tracking-kicker);
  color: var(--cg-slate-500); }