/* ChipAgents CSS — cag prefix — deep navy silicon + copper accent EDA aesthetic */

/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --cag-bg-deep: #09101E;
  --cag-bg-deep-alt: #0D1828;
  --cag-bg-light: #F2F5F9;
  --cag-bg-white: #FFFFFF;
  --cag-bg-card-dark: #141F30;
  --cag-text-on-dark: #DDE5F0;
  --cag-text-muted-dark: #7A96B5;
  --cag-text-on-light: #111827;
  --cag-text-muted-light: #455B7A;
  --cag-accent-blue: #1A6FAB;
  --cag-accent-blue-bright: #3A91CF;
  --cag-accent-copper: #C07830;
  --cag-accent-green: #2DB97A;
  --cag-border-dark: #1E2E45;
  --cag-border-light: #D0D8E4;
  --cag-nav-h: 68px;
  --cag-section-v: clamp(4rem, 8vw, 7rem);
  --cag-container-w: 1200px;
  --cag-prose-w: 720px;
  --cag-radius: 8px;
  --cag-radius-lg: 12px;
  --cag-transition: 220ms ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--cag-bg-white);
  color: var(--cag-text-on-light);
  -webkit-font-smoothing: antialiased;
}

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

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

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow', Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.cag-eyebrow {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cag-accent-copper);
  display: block;
  margin-bottom: 0.75rem;
}

.cag-eyebrow--blue {
  color: var(--cag-accent-blue);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.cag-container {
  width: 100%;
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-container--prose {
  max-width: var(--cag-prose-w);
}

.cag-section {
  padding-block: var(--cag-section-v);
}

.cag-section--dark {
  background: var(--cag-bg-deep);
  color: var(--cag-text-on-dark);
}

.cag-section--dark-alt {
  background: var(--cag-bg-deep-alt);
  color: var(--cag-text-on-dark);
}

.cag-section--light {
  background: var(--cag-bg-light);
  color: var(--cag-text-on-light);
}

.cag-section--white {
  background: var(--cag-bg-white);
  color: var(--cag-text-on-light);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.cag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--cag-radius);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--cag-transition), color var(--cag-transition), border-color var(--cag-transition), opacity var(--cag-transition);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}

.cag-btn--primary {
  background: var(--cag-accent-blue);
  color: #ffffff;
  border-color: var(--cag-accent-blue);
}

.cag-btn--primary:hover {
  background: #146199;
  border-color: #146199;
}

.cag-btn--ghost-on-dark {
  background: transparent;
  color: var(--cag-text-on-dark);
  border-color: var(--cag-border-dark);
}

.cag-btn--ghost-on-dark:hover {
  border-color: var(--cag-accent-blue-bright);
  color: var(--cag-accent-blue-bright);
}

.cag-btn--ghost-on-light {
  background: transparent;
  color: var(--cag-text-on-light);
  border-color: var(--cag-border-light);
}

.cag-btn--ghost-on-light:hover {
  border-color: var(--cag-accent-blue);
  color: var(--cag-accent-blue);
}

.cag-btn--outline-light {
  background: transparent;
  color: var(--cag-accent-blue);
  border-color: var(--cag-accent-blue);
}

.cag-btn--outline-light:hover {
  background: var(--cag-accent-blue);
  color: #ffffff;
}

.cag-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.cag-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--cag-nav-h);
  transition: background var(--cag-transition), box-shadow var(--cag-transition);
}

.cag-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-nav__logo {
  flex-shrink: 0;
  line-height: 1;
}

.cag-nav__logo img {
  height: 28px;
  width: auto;
}

.cag-nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.cag-nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--cag-transition);
  white-space: nowrap;
}

.cag-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cag-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.cag-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  transition: background var(--cag-transition);
}

/* Dark-top pages: transparent nav with light text */
.cag-page--dark-top .cag-nav {
  background: transparent;
}

.cag-page--dark-top .cag-nav .cag-nav__link {
  color: var(--cag-text-on-dark);
}

.cag-page--dark-top .cag-nav .cag-nav__link:hover {
  color: var(--cag-accent-blue-bright);
}

.cag-page--dark-top .cag-nav .cag-nav__hamburger span {
  background: var(--cag-text-on-dark);
}

.cag-page--dark-top .cag-nav .cag-logo-light {
  display: block;
}

.cag-page--dark-top .cag-nav .cag-logo-dark {
  display: none;
}

.cag-page--dark-top .cag-nav .cag-btn--ghost-on-dark {
  color: var(--cag-text-on-dark);
  border-color: rgba(221, 229, 240, 0.35);
}

/* Light-top pages: nav with light bg and dark text */
.cag-page--light-top .cag-nav {
  background: var(--cag-bg-white);
  box-shadow: 0 1px 0 var(--cag-border-light);
}

.cag-page--light-top .cag-nav .cag-nav__link {
  color: var(--cag-text-on-light);
}

.cag-page--light-top .cag-nav .cag-nav__link:hover {
  color: var(--cag-accent-blue);
}

.cag-page--light-top .cag-nav .cag-nav__hamburger span {
  background: var(--cag-text-on-light);
}

.cag-page--light-top .cag-nav .cag-logo-light {
  display: none;
}

.cag-page--light-top .cag-nav .cag-logo-dark {
  display: block;
}

.cag-page--light-top .cag-nav .cag-btn--ghost-on-dark {
  color: var(--cag-text-on-light);
  border-color: var(--cag-border-light);
}

.cag-page--light-top .cag-nav .cag-btn--ghost-on-dark:hover {
  color: var(--cag-accent-blue);
  border-color: var(--cag-accent-blue);
}

/* Scrolled state: always dark nav */
.cag-nav--scrolled {
  background: var(--cag-bg-deep) !important;
  box-shadow: 0 2px 16px rgba(9, 16, 30, 0.5) !important;
}

.cag-nav--scrolled .cag-nav__link {
  color: var(--cag-text-on-dark) !important;
}

.cag-nav--scrolled .cag-nav__link:hover {
  color: var(--cag-accent-blue-bright) !important;
}

.cag-nav--scrolled .cag-logo-light {
  display: block !important;
}

.cag-nav--scrolled .cag-logo-dark {
  display: none !important;
}

.cag-nav--scrolled .cag-nav__hamburger span {
  background: var(--cag-text-on-dark) !important;
}

.cag-nav--scrolled .cag-btn--ghost-on-dark {
  color: var(--cag-text-on-dark) !important;
  border-color: rgba(221, 229, 240, 0.35) !important;
}

.cag-nav--scrolled .cag-btn--ghost-on-dark:hover {
  color: var(--cag-accent-blue-bright) !important;
  border-color: var(--cag-accent-blue-bright) !important;
}

/* Mobile nav drawer */
.cag-nav__mobile-menu {
  display: none;
  position: absolute;
  top: var(--cag-nav-h);
  left: 0;
  right: 0;
  background: var(--cag-bg-deep);
  border-top: 1px solid var(--cag-border-dark);
  padding: 1.5rem;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.cag-nav__mobile-menu.cag-nav__mobile-menu--open {
  display: flex;
}

.cag-nav__mobile-link {
  display: block;
  padding: 0.625rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--cag-text-on-dark);
  border-bottom: 1px solid var(--cag-border-dark);
}

.cag-nav__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Current/active link state */
.cag-nav__link--active {
  color: var(--cag-accent-copper) !important;
}

/* ============================================================
   HERO - INDEX
   ============================================================ */
.cag-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at 50% 40%, #0F2040 0%, var(--cag-bg-deep) 70%);
  overflow: hidden;
  padding-top: var(--cag-nav-h);
}

.cag-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(4rem, 10vw, 7rem);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}

.cag-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cag-hero__eyebrow {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cag-accent-copper);
  margin-bottom: 1.25rem;
}

.cag-hero__h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--cag-text-on-dark);
  line-height: 1.08;
  max-width: 860px;
  margin-bottom: 1.5rem;
}

.cag-hero__sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--cag-text-muted-dark);
  max-width: 640px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.cag-hero__visual {
  max-width: 100%;
  width: 100%;
}

/* ============================================================
   SUBPAGE HERO
   ============================================================ */
.cag-subhero {
  padding-top: calc(var(--cag-nav-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.cag-subhero__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}

.cag-subhero__h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--cag-text-on-light);
}

.cag-subhero__sub {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--cag-text-muted-light);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Dark subhero variant (404, dark-top subpages) */
.cag-page--dark-top .cag-subhero {
  background: var(--cag-bg-deep);
}

.cag-page--dark-top .cag-subhero__h1 {
  color: var(--cag-text-on-dark);
}

.cag-page--dark-top .cag-subhero__sub {
  color: var(--cag-text-muted-dark);
}

/* ============================================================
   PROBLEM STATEMENT SECTION
   ============================================================ */
.cag-problem {
  background: var(--cag-bg-deep-alt);
  padding-block: var(--cag-section-v);
}

.cag-problem__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}

.cag-problem__h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--cag-text-on-dark);
  margin-bottom: 1.25rem;
}

.cag-problem__body {
  font-size: 1.0625rem;
  color: var(--cag-text-muted-dark);
  line-height: 1.75;
}

/* ============================================================
   FEATURE TRIO (Three Agents)
   ============================================================ */
.cag-feature-trio {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-feature-trio__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-feature-trio__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-feature-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cag-feature-trio__card {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
}

.cag-feature-trio__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7A4C0E;
  margin-bottom: 0.75rem;
  display: block;
}

.cag-feature-trio__card-h {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.75rem;
}

.cag-feature-trio__card-body {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.7;
}

/* ============================================================
   NUMBERED STEPS / WORKFLOW
   ============================================================ */
.cag-steps {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-steps__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-steps__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
  max-width: 640px;
  margin-inline: auto;
}

.cag-steps__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 720px;
  margin-inline: auto;
}

.cag-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  align-items: start;
}

.cag-step__num {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--cag-bg-deep);
  color: var(--cag-accent-copper);
  font-family: 'Barlow', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cag-step__text {
  padding-top: 0.5rem;
  font-size: 1rem;
  color: var(--cag-text-on-light);
  line-height: 1.65;
}

/* ============================================================
   SOCIAL PROOF / METRICS
   ============================================================ */
.cag-proof {
  background: var(--cag-bg-deep);
  padding-block: var(--cag-section-v);
}

.cag-proof__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-proof__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-dark);
  text-align: center;
  margin-bottom: 0.75rem;
}

.cag-proof__subhead {
  font-size: 1rem;
  color: var(--cag-text-muted-dark);
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 3rem;
}

.cag-proof__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.cag-proof__metric {
  background: var(--cag-bg-card-dark);
  border: 1px solid var(--cag-border-dark);
  border-radius: var(--cag-radius-lg);
  padding: 1.75rem;
}

.cag-proof__metric-value {
  font-family: 'Barlow', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--cag-accent-blue-bright);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.cag-proof__metric-label {
  font-size: 0.875rem;
  color: var(--cag-text-muted-dark);
  line-height: 1.5;
}

.cag-proof__source {
  font-size: 0.75rem;
  color: var(--cag-text-muted-dark);
  opacity: 0.7;
  margin-top: 0.5rem;
}

.cag-proof__testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.cag-testimonial {
  background: var(--cag-bg-card-dark);
  border: 1px solid var(--cag-border-dark);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
}

.cag-testimonial__quote {
  font-size: 0.9375rem;
  color: var(--cag-text-on-dark);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;
}

.cag-testimonial__quote::before {
  content: "\201C";
  color: var(--cag-accent-copper);
  font-size: 1.25em;
  font-style: normal;
  margin-right: 2px;
}

.cag-testimonial__attribution {
  font-size: 0.8125rem;
  color: var(--cag-text-muted-dark);
  font-style: normal;
}

/* ============================================================
   INTEGRATIONS / TOOL BADGES
   ============================================================ */
.cag-integrations {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-integrations__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}

.cag-integrations__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.75rem;
}

.cag-integrations__body {
  font-size: 1rem;
  color: var(--cag-text-muted-light);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.cag-integrations__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.cag-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cag-text-on-light);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cag-cta-band {
  padding-block: var(--cag-section-v);
  text-align: center;
}

.cag-cta-band--dark {
  background: var(--cag-bg-deep);
}

.cag-cta-band--dark-alt {
  background: var(--cag-bg-deep-alt);
}

.cag-cta-band__inner {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-cta-band__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 2rem;
}

.cag-cta-band--dark .cag-cta-band__heading,
.cag-cta-band--dark-alt .cag-cta-band__heading {
  color: var(--cag-text-on-dark);
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.cag-section-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.cag-section-heading--dark {
  color: var(--cag-text-on-dark);
}

.cag-section-heading--light {
  color: var(--cag-text-on-light);
}

.cag-section-sub {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 640px;
}

.cag-section-sub--dark {
  color: var(--cag-text-muted-dark);
}

.cag-section-sub--light {
  color: var(--cag-text-muted-light);
}

/* ============================================================
   PRODUCT PAGE - ARCHITECTURE DIAGRAM
   ============================================================ */
.cag-arch {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-arch__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-arch__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1rem;
}

.cag-arch__body {
  font-size: 1rem;
  color: var(--cag-text-muted-light);
  max-width: 640px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.cag-arch__visual {
  max-width: 780px;
}

/* ============================================================
   PRODUCT PAGE - FEATURE DETAIL
   ============================================================ */
.cag-feature-detail {
  padding-block: var(--cag-section-v);
}

.cag-feature-detail--white {
  background: var(--cag-bg-white);
}

.cag-feature-detail--light {
  background: var(--cag-bg-light);
}

.cag-feature-detail__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.cag-feature-detail__content {
  max-width: 540px;
}

.cag-feature-detail__h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1rem;
}

.cag-feature-detail__body {
  font-size: 1rem;
  color: var(--cag-text-muted-light);
  line-height: 1.75;
}

.cag-feature-detail__visual {
  background: var(--cag-bg-card-dark);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
  border: 1px solid var(--cag-border-dark);
}

/* Code mock inside feature detail */
.cag-code-mock {
  background: var(--cag-bg-card-dark);
  border-radius: var(--cag-radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--cag-border-dark);
}

.cag-code-mock pre {
  margin: 0;
  overflow-x: auto;
  max-width: 100%;
}

.cag-code-mock code {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--cag-text-on-dark);
}

.cag-code-mock .cag-tok-keyword { color: var(--cag-accent-blue-bright); }
.cag-code-mock .cag-tok-string { color: var(--cag-accent-green); }
.cag-code-mock .cag-tok-comment { color: var(--cag-text-muted-dark); font-style: italic; }
.cag-code-mock .cag-tok-type { color: var(--cag-accent-copper); }
.cag-code-mock .cag-tok-number { color: #e2c08d; }

/* ============================================================
   PRODUCT PAGE - INTEGRATION CALLOUT (dark section)
   ============================================================ */
.cag-integration-callout {
  background: var(--cag-bg-deep);
  padding-block: var(--cag-section-v);
}

.cag-integration-callout__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.cag-integration-callout__content {
  max-width: 540px;
}

.cag-integration-callout__h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--cag-text-on-dark);
  margin-bottom: 1rem;
}

.cag-integration-callout__body {
  font-size: 1rem;
  color: var(--cag-text-muted-dark);
  line-height: 1.75;
  margin-bottom: 2rem;
}

.cag-integration-callout__visual {
  max-width: 480px;
}

/* ============================================================
   CUSTOMERS PAGE - CASE STUDY
   ============================================================ */
.cag-case-study {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-case-study__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-case-study__attribution {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--cag-text-muted-light);
  font-style: italic;
  margin-top: 1.5rem;
}

.cag-case-study__h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1.25rem;
}

.cag-case-study__body {
  max-width: var(--cag-prose-w);
  font-size: 1rem;
  color: var(--cag-text-muted-light);
  line-height: 1.8;
}

/* ============================================================
   CUSTOMERS PAGE - METRIC GRID
   ============================================================ */
.cag-metric-grid {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-metric-grid__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-metric-grid__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-metric-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cag-metric-card {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
  text-align: center;
}

.cag-metric-card__value {
  font-family: 'Barlow', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--cag-accent-blue);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.cag-metric-card__label {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.5;
}

.cag-metric-card__source {
  font-size: 0.75rem;
  color: var(--cag-text-muted-light);
  opacity: 0.7;
  margin-top: 0.5rem;
}

/* ============================================================
   TESTIMONIAL GRID (customers page)
   ============================================================ */
.cag-testimonial-grid {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-testimonial-grid__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-testimonial-grid__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-testimonial-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cag-testimonial-light {
  background: var(--cag-bg-light);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
}

.cag-testimonial-light__quote {
  font-size: 0.9375rem;
  color: var(--cag-text-on-light);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;
}

.cag-testimonial-light__quote::before {
  content: "\201C";
  color: var(--cag-accent-copper);
  font-size: 1.25em;
  font-style: normal;
  margin-right: 2px;
}

.cag-testimonial-light__attribution {
  font-size: 0.8125rem;
  color: var(--cag-text-muted-light);
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.cag-pricing-cards {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-pricing-cards__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-pricing__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cag-text-on-light);
}

.cag-pricing__toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--cag-border-light);
  cursor: pointer;
  border: none;
  transition: background var(--cag-transition);
}

.cag-pricing__toggle-track--active {
  background: var(--cag-accent-blue);
}

.cag-pricing__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform var(--cag-transition);
  pointer-events: none;
}

.cag-pricing__toggle-track--active .cag-pricing__toggle-thumb {
  transform: translateX(20px);
}

.cag-pricing__savings-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cag-accent-green);
  background: rgba(45, 185, 122, 0.12);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.cag-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cag-tier-card {
  background: var(--cag-bg-light);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.cag-tier-card--highlight {
  background: var(--cag-bg-card-dark);
  border: 2px solid var(--cag-accent-blue);
  position: relative;
}

.cag-tier-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cag-accent-blue);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  white-space: nowrap;
}

.cag-tier-card__name {
  font-family: 'Barlow', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--cag-text-on-light);
}

.cag-tier-card--highlight .cag-tier-card__name {
  color: var(--cag-text-on-dark);
}

.cag-tier-card__price {
  font-family: 'Barlow', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--cag-text-on-light);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.cag-tier-card--highlight .cag-tier-card__price {
  color: var(--cag-text-on-dark);
}

.cag-tier-card__price sup {
  font-size: 1.25rem;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

.cag-tier-card__price-period {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cag-text-muted-light);
}

.cag-tier-card--highlight .cag-tier-card__price-period {
  color: var(--cag-text-muted-dark);
}

.cag-tier-card__caps {
  font-size: 0.8125rem;
  color: var(--cag-text-muted-light);
  margin-bottom: 1.5rem;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.cag-tier-card--highlight .cag-tier-card__caps {
  color: var(--cag-text-muted-dark);
}

.cag-tier-card__features {
  list-style: none;
  margin-bottom: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cag-tier-card__feature {
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  line-height: 1.5;
  color: var(--cag-text-on-light);
}

.cag-tier-card--highlight .cag-tier-card__feature {
  color: var(--cag-text-on-dark);
}

.cag-tier-card__feature::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cag-accent-green);
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Pricing price display: monthly/annual toggle */
.cag-price--monthly,
.cag-price--annual {
  transition: opacity var(--cag-transition);
}

body.cag-annual .cag-price--monthly {
  display: none !important;
}

body.cag-annual .cag-price--annual {
  display: inline !important;
}

body:not(.cag-annual) .cag-price--annual {
  display: none !important;
}

body:not(.cag-annual) .cag-price--monthly {
  display: inline !important;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cag-comparison {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-comparison__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-comparison__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 2.5rem;
}

.cag-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cag-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cag-comparison-table th {
  background: var(--cag-bg-white);
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  color: var(--cag-text-on-light);
  border-bottom: 2px solid var(--cag-border-light);
}

.cag-comparison-table th:first-child {
  width: 40%;
}

.cag-comparison-table td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--cag-border-light);
  vertical-align: middle;
  color: var(--cag-text-on-light);
  background: var(--cag-bg-white);
}

.cag-comparison-table tr:last-child td {
  border-bottom: none;
}

.cag-check {
  color: var(--cag-accent-green);
  font-weight: 700;
  font-size: 1rem;
}

.cag-dash {
  color: var(--cag-text-muted-light);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.cag-faq {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-faq__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-faq__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 2.5rem;
}

.cag-faq-item {
  border-bottom: 1px solid var(--cag-border-light);
}

.cag-faq-item:first-of-type {
  border-top: 1px solid var(--cag-border-light);
}

.cag-faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cag-text-on-light);
  transition: color var(--cag-transition);
}

.cag-faq-item__btn:hover {
  color: var(--cag-accent-blue);
}

.cag-faq-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--cag-accent-copper);
  transition: transform var(--cag-transition);
}

.cag-faq-item--open .cag-faq-item__icon {
  transform: rotate(45deg);
}

.cag-faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease;
}

.cag-faq-item--open .cag-faq-item__answer {
  max-height: 400px;
}

.cag-faq-item__answer-body {
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE - NARRATIVE
   ============================================================ */
.cag-narrative {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-narrative__inner {
  max-width: var(--cag-prose-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-narrative__h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1rem;
}

.cag-narrative__body {
  font-size: 1.0625rem;
  color: var(--cag-text-muted-light);
  line-height: 1.8;
}

/* ============================================================
   ABOUT PAGE - TEAM PROFILES
   ============================================================ */
.cag-team {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-team__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-team__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cag-team-card {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
  text-align: center;
}

.cag-team-card__avatar-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.25rem;
  background: var(--cag-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cag-team-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cag-team-card__initials {
  font-family: 'Barlow', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cag-accent-copper);
}

.cag-team-card__name {
  font-family: 'Barlow', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.25rem;
}

.cag-team-card__role {
  font-size: 0.875rem;
  color: var(--cag-accent-blue);
  font-weight: 500;
  margin-bottom: 1rem;
}

.cag-team-card__bio {
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
}

/* ============================================================
   ABOUT PAGE - VALUES
   ============================================================ */
.cag-values {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-values__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-values__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-values__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cag-value-item {
  padding: 2rem;
  background: var(--cag-bg-light);
  border-radius: var(--cag-radius-lg);
  border-left: 4px solid var(--cag-accent-copper);
}

.cag-value-item__heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.75rem;
}

.cag-value-item__body {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.65;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cag-contact-split {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-contact-split__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: start;
}

/* ============================================================
   FORMS (contact + auth)
   ============================================================ */
.cag-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cag-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cag-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cag-text-on-light);
}

.cag-form__input,
.cag-form__select,
.cag-form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--cag-border-light);
  border-radius: var(--cag-radius);
  background: var(--cag-bg-white);
  color: var(--cag-text-on-light);
  font-size: 0.9375rem;
  transition: border-color var(--cag-transition), box-shadow var(--cag-transition);
  outline: none;
  -webkit-appearance: none;
}

.cag-form__input:focus,
.cag-form__select:focus,
.cag-form__textarea:focus {
  border-color: var(--cag-accent-blue);
  box-shadow: 0 0 0 3px rgba(26, 111, 171, 0.15);
}

.cag-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.cag-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23455B7A' d='M5.5 8L10 13 14.5 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}

.cag-form__submit {
  margin-top: 0.5rem;
}

/* Form error state */
.cag-form__input--error,
.cag-form__select--error,
.cag-form__textarea--error {
  border-color: #d32f2f;
}

.cag-form__error-msg {
  font-size: 0.8125rem;
  color: #d32f2f;
  margin-top: 0.25rem;
}

/* Form success / feedback */
.cag-form-feedback {
  display: none;
  background: rgba(45, 185, 122, 0.1);
  border: 1px solid var(--cag-accent-green);
  border-radius: var(--cag-radius);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--cag-text-on-light);
  line-height: 1.55;
}

.cag-form-feedback--visible {
  display: block;
}

/* Auth form feedback (inline invalid-credentials) */
.cag-auth-error {
  display: none;
  background: rgba(211, 47, 47, 0.08);
  border: 1px solid rgba(211, 47, 47, 0.3);
  border-radius: var(--cag-radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #d32f2f;
}

.cag-auth-error--visible {
  display: block;
}

.cag-auth-confirm {
  display: none;
  text-align: center;
  padding: 1.5rem 0;
}

.cag-auth-confirm--visible {
  display: block;
}

.cag-auth-confirm__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cag-auth-confirm__heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.75rem;
}

.cag-auth-confirm__body {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
}

/* ============================================================
   CONTACT INFO BLOCK
   ============================================================ */
.cag-contact-info {
  background: var(--cag-bg-light);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
}

.cag-contact-info__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1.5rem;
}

.cag-contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--cag-text-on-light);
  line-height: 1.55;
}

.cag-contact-info__item:last-child {
  margin-bottom: 0;
}

.cag-contact-info__icon {
  flex-shrink: 0;
  width: 20px;
  color: var(--cag-accent-copper);
  margin-top: 2px;
}

.cag-contact-info__link {
  color: var(--cag-accent-blue);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cag-transition);
}

.cag-contact-info__link:hover {
  text-decoration-color: var(--cag-accent-blue);
}

/* ============================================================
   AUTH PAGES (fullscreen cards)
   ============================================================ */
.cag-page--auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cag-bg-light);
  padding: 2rem 1rem;
}

.cag-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  padding: clamp(2rem, 5vw, 2.5rem);
  box-shadow: 0 4px 32px rgba(9, 16, 30, 0.08);
}

.cag-auth-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.cag-auth-card__heading {
  font-family: 'Barlow', sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.375rem;
  text-align: center;
}

.cag-auth-card__subheading {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  text-align: center;
  margin-bottom: 2rem;
}

.cag-auth-card__footer {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
}

.cag-auth-card__footer a {
  color: var(--cag-accent-blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cag-transition);
}

.cag-auth-card__footer a:hover {
  text-decoration-color: var(--cag-accent-blue);
}

.cag-auth-card__legal {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cag-text-muted-light);
  line-height: 1.55;
}

.cag-auth-card__legal a {
  color: var(--cag-accent-blue);
}

.cag-auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  font-size: 0.8125rem;
  color: var(--cag-text-muted-light);
}

.cag-auth-divider::before,
.cag-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cag-border-light);
}

/* ============================================================
   BLOG / LAB NOTES
   ============================================================ */
.cag-blog-hero {
  background: var(--cag-bg-light);
  padding-top: calc(var(--cag-nav-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cag-blog-hero__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-blog-hero__heading {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--cag-text-on-light);
  margin-bottom: 0.5rem;
}

.cag-blog-hero__sub {
  font-size: 1rem;
  color: var(--cag-text-muted-light);
  max-width: 560px;
}

.cag-blog-filters {
  background: var(--cag-bg-light);
  padding-bottom: 1.5rem;
}

.cag-blog-filters__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cag-filter-btn {
  padding: 0.375rem 0.875rem;
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cag-text-on-light);
  cursor: pointer;
  transition: background var(--cag-transition), border-color var(--cag-transition), color var(--cag-transition);
}

.cag-filter-btn:hover {
  border-color: var(--cag-accent-blue);
  color: var(--cag-accent-blue);
}

.cag-filter-btn.is-active {
  background: var(--cag-accent-blue);
  border-color: var(--cag-accent-blue);
  color: #ffffff;
}

.cag-blog-grid {
  background: var(--cag-bg-light);
  padding-block: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Featured card */
.cag-blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--cag-transition);
}

.cag-blog-featured:hover {
  box-shadow: 0 8px 32px rgba(9, 16, 30, 0.1);
}

.cag-blog-featured__img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.cag-blog-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.cag-blog-featured:hover .cag-blog-featured__img {
  transform: scale(1.03);
}

.cag-blog-featured__content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cag-blog-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cag-blog-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cag-accent-blue);
  background: rgba(26, 111, 171, 0.1);
  border-radius: 999px;
  padding: 0.2rem 0.625rem;
  text-transform: capitalize;
}

.cag-blog-tag--dark {
  color: var(--cag-accent-blue-bright);
  background: rgba(58, 145, 207, 0.12);
}

.cag-blog-featured__title {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.875rem;
  line-height: 1.25;
}

.cag-blog-featured__excerpt {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.cag-blog-featured__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--cag-text-muted-light);
}

/* Blog cards grid (remaining 11) */
.cag-blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.cag-blog-card {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--cag-transition);
}

.cag-blog-card:hover {
  box-shadow: 0 4px 24px rgba(9, 16, 30, 0.1);
}

.cag-blog-card[style*="display: none"],
.cag-blog-card[hidden] {
  display: none !important;
}

.cag-blog-card__img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}

.cag-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.cag-blog-card:hover .cag-blog-card__img {
  transform: scale(1.04);
}

.cag-blog-card__content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cag-blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}

.cag-blog-card__title {
  font-family: 'Barlow', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.625rem;
  line-height: 1.3;
}

.cag-blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.25rem;
}

.cag-blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--cag-text-muted-light);
  padding-top: 1rem;
  border-top: 1px solid var(--cag-border-light);
  margin-top: auto;
}

/* ============================================================
   ARTICLE PAGE (lab-notes article template)
   ============================================================ */
.cag-article-back {
  background: var(--cag-bg-light);
  padding-top: calc(var(--cag-nav-h) + 1.5rem);
  padding-bottom: 1.5rem;
}

.cag-article-back__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-article-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cag-accent-blue);
  text-decoration: none;
  transition: color var(--cag-transition);
}

.cag-article-back__link:hover {
  color: var(--cag-accent-blue-bright);
}

.cag-article-hero {
  background: var(--cag-bg-light);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cag-article-hero__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-article-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cag-article-hero__title {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 800;
  color: var(--cag-text-on-light);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  max-width: 800px;
}

.cag-article-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  margin-bottom: 2rem;
}

.cag-article-hero__author {
  font-weight: 600;
  color: var(--cag-text-on-light);
}

.cag-article-cover-wrap {
  width: 100%;
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  aspect-ratio: 21/9;
  overflow: hidden;
  border-radius: var(--cag-radius-lg);
  margin-bottom: 0;
}

.cag-article-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article body prose */
.cag-article-body {
  background: var(--cag-bg-white);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.cag-blog-article {
  max-width: var(--cag-prose-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  color: var(--cag-text-on-light);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.cag-blog-article h2 {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.cag-blog-article h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.cag-blog-article p {
  margin-bottom: 1.25rem;
  color: var(--cag-text-on-light);
}

.cag-blog-article ul,
.cag-blog-article ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.cag-blog-article ul {
  list-style: disc;
}

.cag-blog-article ol {
  list-style: decimal;
}

.cag-blog-article li {
  margin-bottom: 0.5rem;
  color: var(--cag-text-on-light);
}

.cag-blog-article a {
  color: var(--cag-accent-blue);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cag-transition);
}

.cag-blog-article a:hover {
  text-decoration-color: var(--cag-accent-blue);
}

.cag-blog-article pre {
  background: var(--cag-bg-card-dark);
  border-radius: var(--cag-radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.cag-blog-article pre code {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--cag-text-on-dark);
  line-height: 1.65;
}

.cag-blog-article code {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.875em;
  background: var(--cag-bg-light);
  color: var(--cag-accent-blue);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

.cag-blog-article blockquote {
  border-left: 4px solid var(--cag-accent-copper);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--cag-text-muted-light);
}

/* Article related / CTA footer */
.cag-article-cta {
  background: var(--cag-bg-light);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.cag-article-cta__inner {
  max-width: var(--cag-prose-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}

.cag-article-cta__heading {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.75rem;
}

.cag-article-cta__body {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.cag-article-related {
  background: var(--cag-bg-light);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--cag-border-light);
}

.cag-article-related__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-article-related__heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1.5rem;
}

.cag-article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cag-article-related__card {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--cag-transition), transform var(--cag-transition);
}

.cag-article-related__card:hover {
  box-shadow: 0 4px 16px rgba(9, 16, 30, 0.10);
  transform: translateY(-2px);
}

.cag-article-related__card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.cag-article-related__card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cag-article-related__card-cat {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cag-accent-blue);
  margin-bottom: 0.375rem;
}

.cag-article-related__card-title {
  font-family: 'Barlow', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  flex: 1;
}

.cag-article-related__card-title a {
  color: var(--cag-text-on-light);
}

.cag-article-related__card-title a:hover {
  color: var(--cag-accent-blue);
}

.cag-article-related__card-meta {
  font-size: 0.75rem;
  color: var(--cag-text-muted-light);
}

.cag-article-related__tail {
  margin-top: 2rem;
  text-align: center;
}

/* ============================================================
   LEGAL / DOCS CONTENT
   ============================================================ */
.cag-legal-page {
  background: var(--cag-bg-light);
  min-height: 100vh;
}

.cag-legal-page main {
  background: var(--cag-bg-white);
}

.cag-legal-content {
  max-width: var(--cag-prose-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(2rem, 5vw, 4rem);
  padding-top: calc(var(--cag-nav-h) + clamp(2rem, 5vw, 3rem));
  color: var(--cag-text-on-light);
  background: var(--cag-bg-white);
}

.cag-legal-content h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--cag-text-on-light);
  margin-bottom: 1rem;
}

.cag-legal-content h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.cag-legal-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.cag-legal-content p {
  margin-bottom: 1rem;
  color: var(--cag-text-on-light);
  font-size: 1rem;
  line-height: 1.75;
}

.cag-legal-content ul,
.cag-legal-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.cag-legal-content ul {
  list-style: disc;
}

.cag-legal-content ol {
  list-style: decimal;
}

.cag-legal-content li {
  margin-bottom: 0.375rem;
  font-size: 1rem;
  color: var(--cag-text-on-light);
  line-height: 1.7;
}

.cag-legal-content a {
  color: var(--cag-accent-blue);
  text-decoration: underline;
}

.cag-legal-content .cag-legal-meta {
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cag-border-light);
}

/* ============================================================
   404 PAGE
   ============================================================ */
.cag-404 {
  background: var(--cag-bg-deep);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--cag-nav-h) + 2rem) 1rem 4rem;
}

.cag-404__inner {
  text-align: center;
  max-width: 500px;
}

.cag-404__code {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(5rem, 15vw, 8rem);
  font-weight: 800;
  color: var(--cag-accent-blue);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cag-404__heading {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--cag-text-on-dark);
  margin-bottom: 1rem;
}

.cag-404__body {
  font-size: 1rem;
  color: var(--cag-text-muted-dark);
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

.cag-404__links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.cag-footer {
  background: var(--cag-bg-deep);
  color: var(--cag-text-on-dark);
  padding-top: clamp(3rem, 7vw, 5rem);
}

.cag-footer__main {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--cag-border-dark);
}

.cag-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cag-footer__logo {
  height: 28px;
  width: auto;
}

.cag-footer__tagline {
  font-size: 0.875rem;
  color: var(--cag-text-muted-dark);
  line-height: 1.6;
}

.cag-footer__col-heading {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cag-text-muted-dark);
  margin-bottom: 1rem;
}

.cag-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cag-footer__link {
  font-size: 0.9rem;
  color: var(--cag-text-muted-dark);
  text-decoration: none;
  transition: color var(--cag-transition);
  line-height: 1.5;
}

.cag-footer__link:hover {
  color: var(--cag-text-on-dark);
}

.cag-footer__bottom {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.cag-footer__copyright {
  font-size: 0.8125rem;
  color: var(--cag-text-muted-dark);
}

.cag-footer__contact-blurb {
  font-size: 0.8125rem;
  color: var(--cag-text-muted-dark);
  line-height: 1.6;
}

.cag-footer__contact-blurb a {
  color: var(--cag-text-muted-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cag-transition);
}

.cag-footer__contact-blurb a:hover {
  text-decoration-color: var(--cag-text-muted-dark);
}

.cag-footer__legal-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cag-footer__legal-link {
  font-size: 0.8125rem;
  color: var(--cag-text-muted-dark);
  transition: color var(--cag-transition);
}

.cag-footer__legal-link:hover {
  color: var(--cag-text-on-dark);
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--cag-bg-card-dark);
  border-top: 1px solid var(--cag-border-dark);
  box-shadow: 0 -4px 24px rgba(9, 16, 30, 0.4);
}

.cookie-banner__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.cookie-banner__text {
  font-size: 0.875rem;
  color: var(--cag-text-on-dark);
  line-height: 1.55;
  flex: 1;
  min-width: 200px;
}

.cookie-banner__text a {
  color: var(--cag-accent-blue-bright);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-banner__btn {
  padding: 0.5rem 1.125rem;
  border-radius: var(--cag-radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--cag-transition), color var(--cag-transition), border-color var(--cag-transition);
  white-space: nowrap;
}

.cookie-banner__btn--primary {
  background: var(--cag-accent-blue);
  color: #ffffff;
  border-color: var(--cag-accent-blue);
}

.cookie-banner__btn--primary:hover {
  background: #146199;
  border-color: #146199;
}

.cookie-banner__btn--secondary {
  background: transparent;
  color: var(--cag-text-on-dark);
  border-color: var(--cag-border-dark);
}

.cookie-banner__btn--secondary:hover {
  border-color: var(--cag-text-muted-dark);
  color: var(--cag-text-on-dark);
}

/* ============================================================
   FADE-IN ANIMATION
   ============================================================ */
.cag-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.cag-fade-in.cag-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cag-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */
.cag-skip-link {
  position: absolute;
  top: -999px;
  left: 1rem;
  background: var(--cag-accent-blue);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  z-index: 9999;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.cag-skip-link:focus {
  top: 0;
}

/* ============================================================
   UTILITY HELPERS
   ============================================================ */
.cag-text-center { text-align: center; }
.cag-mt-auto { margin-top: auto; }
.cag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE — TABLET 768px
   ============================================================ */
@media (max-width: 1024px) {
  .cag-feature-detail__inner,
  .cag-integration-callout__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cag-feature-detail__content,
  .cag-integration-callout__content {
    max-width: 100%;
  }

  .cag-feature-detail__visual,
  .cag-integration-callout__visual {
    max-width: 100%;
  }

  .cag-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .cag-contact-split__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .cag-nav__links,
  .cag-nav__actions {
    display: none;
  }

  .cag-nav__hamburger {
    display: flex;
  }

  .cag-feature-trio__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .cag-proof__metrics {
    grid-template-columns: 1fr;
  }

  .cag-proof__testimonials {
    grid-template-columns: 1fr;
  }

  .cag-tier-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cag-tier-card--highlight {
    margin-top: 1rem;
  }

  .cag-metric-grid__cards {
    grid-template-columns: 1fr;
  }

  .cag-testimonial-grid__cards {
    grid-template-columns: 1fr;
  }

  .cag-team__grid {
    grid-template-columns: 1fr;
  }

  .cag-values__list {
    grid-template-columns: 1fr;
  }

  .cag-blog-featured {
    grid-template-columns: 1fr;
  }

  .cag-blog-featured__img-wrap {
    aspect-ratio: 16/9;
  }

  .cag-blog-featured__content {
    padding: 1.5rem;
  }

  .cag-blog-cards-grid {
    grid-template-columns: 1fr;
  }

  .cag-article-related__grid {
    grid-template-columns: 1fr;
  }

  .cag-footer__main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cag-footer__bottom {
    flex-direction: column;
  }

  .cag-cookie-banner__inner {
    flex-direction: column;
  }

  .cag-comparison-table {
    font-size: 0.875rem;
  }

  .cag-comparison-table th,
  .cag-comparison-table td {
    padding: 0.75rem 0.875rem;
  }
}

@media (max-width: 900px) {
  .cag-hero__inner {
    grid-template-columns: 1fr;
  }

  .cag-hero__visual {
    order: 1;
  }

  .cag-hero__text {
    order: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --cag-section-v: 3rem;
  }

  .cag-hero__h1 {
    font-size: 2.25rem;
  }

  .cag-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .cag-btn-group .cag-btn {
    justify-content: center;
  }

  .cag-step {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
  }

  .cag-step__num {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .cag-404__links {
    flex-direction: column;
    align-items: center;
  }

  .cag-comparison-table th:not(:first-child):not(:last-child),
  .cag-comparison-table td:not(:first-child):not(:last-child) {
    display: none;
  }
}


/* ==========================================
   PHASE-2B ADDITIONS: missing component CSS
   ========================================== */

/* Legal hero - NAV-OCCLUSION fix */
.cag-legal-hero {
  background: var(--cag-bg-white);
  padding-top: calc(var(--cag-nav-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--cag-border);
}

.cag-legal-hero__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-legal-hero__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--cag-text-on-light);
  margin-bottom: 0.5rem;
}

.cag-legal-hero__meta {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
}

/* Legal body */
.cag-legal-body {
  background: var(--cag-bg-white);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cag-legal-body__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Subhero light modifier */
.cag-subhero--light {
  background: var(--cag-bg-white);
}

.cag-subhero--light .cag-subhero__h1 {
  color: var(--cag-text-on-light);
}

.cag-subhero--light .cag-subhero__sub {
  color: var(--cag-text-muted-light);
}

/* CTA band subtitle */
.cag-cta-band__sub {
  font-size: 1rem;
  color: rgba(221, 229, 240, 0.8);
  margin-top: 0.75rem;
  margin-bottom: 1.75rem;
}

/* Values grid alias */
.cag-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Value card */
.cag-value-card {
  background: var(--cag-bg-light);
  border: 1px solid var(--cag-border);
  border-radius: var(--cag-radius-lg);
  padding: 2rem;
}

.cag-value-card__icon {
  font-size: 1.75rem;
  color: var(--cag-accent-blue);
  margin-bottom: 1rem;
}

.cag-value-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.75rem;
}

.cag-value-card__body {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
}

/* Origin story section */
.cag-origin-story {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-origin-story__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-origin-story__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1.5rem;
  max-width: 740px;
}

.cag-origin-story__body {
  max-width: 720px;
}

.cag-origin-story__body p {
  font-size: 1rem;
  color: var(--cag-text-muted-light);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.cag-origin-story__body p:last-child {
  margin-bottom: 0;
}

/* Team card extras */
.cag-team-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cag-team-card__info {
  flex: 1;
}

/* Pricing section */
.cag-pricing {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-pricing__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-pricing__toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cag-text-on-light);
}

.cag-pricing__toggle-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cag-text-on-light);
}

.cag-pricing__toggle-label--monthly,
.cag-pricing__toggle-label--annual {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cag-pricing__save-badge {
  display: inline-block;
  background: rgba(192, 120, 48, 0.12);
  color: #9A5E24;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: 999px;
}

.cag-pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cag-pricing-card__header {
  padding: 1.75rem 1.75rem 0;
}

.cag-pricing-card__badge {
  display: inline-block;
  background: var(--cag-accent-copper);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.cag-pricing-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1rem;
}

.cag-pricing-card--highlight .cag-pricing-card__name {
  color: var(--cag-text-on-dark);
}

.cag-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.cag-pricing-card__amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--cag-text-on-light);
  line-height: 1;
}

.cag-pricing-card--highlight .cag-pricing-card__amount {
  color: var(--cag-text-on-dark);
}

.cag-pricing-card__amount--custom {
  font-size: 1.5rem;
}

.cag-pricing-card__period {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
}

.cag-pricing-card--highlight .cag-pricing-card__period {
  color: var(--cag-text-muted-dark);
}

.cag-pricing-card__caps {
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.cag-pricing-card--highlight .cag-pricing-card__caps {
  color: var(--cag-text-muted-dark);
}

.cag-pricing-card__features {
  list-style: none;
  padding: 0 1.75rem 1.5rem;
  margin: 0;
  border-top: 1px solid var(--cag-border);
  padding-top: 1.25rem;
}

.cag-pricing-card--highlight .cag-pricing-card__features {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.cag-pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.5;
  padding-block: 0.35rem;
}

.cag-pricing-card--highlight .cag-pricing-card__feature {
  color: var(--cag-text-muted-dark);
}

.cag-pricing-card__feature .fa-check {
  color: var(--cag-accent-blue);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.cag-pricing-card--highlight .cag-pricing-card__feature .fa-check {
  color: #60c4ff;
}

.cag-pricing-card__cta {
  display: block;
  margin: 0 1.75rem 1.75rem;
  text-align: center;
}

.cag-price--monthly,
.cag-price--annual {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

/* Feature detail heading alias */
.cag-feature-detail__heading {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1rem;
}

/* Feature detail bullets */
.cag-feature-detail__bullets {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.cag-feature-detail__bullets li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

.cag-feature-detail__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cag-accent-blue);
}

/* Arch diagram wrapper */
.cag-arch__diagram {
  margin-top: 2.5rem;
  border-radius: var(--cag-radius);
  overflow: hidden;
  background: var(--cag-bg-deep);
  padding: 1.5rem;
}

/* Integration callout diagram wrapper */
.cag-integration-callout__diagram {
  margin-top: 2rem;
  border-radius: var(--cag-radius);
  overflow: hidden;
  background: var(--cag-bg-deep);
  padding: 1.5rem;
}

/* Auth card extras */
.cag-auth-card__description {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.cag-auth-card__link-row {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
}

.cag-auth-card__link {
  color: var(--cag-accent-blue);
  text-decoration: none;
  font-weight: 500;
}

.cag-auth-card__link:hover {
  text-decoration: underline;
}

.cag-auth-card__legal-link {
  color: var(--cag-text-muted-light);
  text-decoration: none;
  font-size: 0.875rem;
}

.cag-auth-card__legal-link:hover {
  color: var(--cag-accent-blue);
  text-decoration: underline;
}

/* Auth forgot flow */
.cag-auth-forgot-view {
  display: block;
}

.cag-auth-confirm--forgot {
  display: none;
  text-align: center;
  padding: 1.5rem 0;
}

@media (max-width: 900px) {
  .cag-pricing__cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .cag-values__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cag-value-card {
    padding: 1.5rem;
  }
}


/* ==========================================
   CONTRAST FIXES (visual_qa pass 2)
   ========================================== */

/* Pricing card highlight - dark background */
.cag-pricing-card--highlight {
  background: var(--cag-bg-deep);
  border: 2px solid var(--cag-accent-blue);
  position: relative;
}

/* Badge: use blue bg for contrast (white on blue = 5.2:1) */
.cag-pricing-card__badge {
  background: var(--cag-accent-blue);
  color: #fff;
}

/* CTA band sub - dark text on light (base) band, light text on dark band */
.cag-cta-band__sub {
  color: var(--cag-text-muted-light);
}

.cag-cta-band--dark .cag-cta-band__sub,
.cag-cta-band--dark-alt .cag-cta-band__sub {
  color: rgba(221, 229, 240, 0.85);
}

/* 404 page links - need light color on dark bg */
.cag-404__links a {
  color: var(--cag-text-on-dark);
  text-decoration: none;
}

.cag-404__links a:hover {
  color: var(--cag-accent-copper);
}

.cag-404__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}


/* ==========================================
   PRICING + FAQ + TABLE orphan fixes
   ========================================== */

.cag-pricing-card {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border);
  border-radius: var(--cag-radius-lg);
  overflow: hidden;
}

.cag-faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 720px;
  margin-inline: auto;
}

.cag-faq-item__answer-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.7;
}

.cag-minus {
  display: none;
}

.cag-faq-item--open .cag-minus {
  display: inline;
}

.cag-faq-item--open .cag-plus {
  display: none;
}

.cag-comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cag-comparison__table th,
.cag-comparison__table td {
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--cag-border);
  color: var(--cag-text-on-light);
}

.cag-comparison__table th {
  font-weight: 700;
  background: var(--cag-bg-light);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cag-comparison__table .cag-check { color: #2DB97A; }
.cag-comparison__table .cag-dash  { color: var(--cag-text-muted-light); }

/* prose class for legal/blog article body */
.cag-prose {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cag-text-on-light);
}

.cag-prose h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--cag-text-on-light);
}

.cag-prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--cag-text-on-light);
}

.cag-prose p {
  margin-bottom: 1.25rem;
}

.cag-prose ul,
.cag-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.cag-prose li {
  margin-bottom: 0.5rem;
}

.cag-prose a {
  color: var(--cag-accent-blue);
  text-decoration: underline;
}

/* link utility */
.cag-link {
  color: var(--cag-accent-blue);
  text-decoration: underline;
}

.cag-link:hover {
  opacity: 0.85;
}

/* Article classes (Editor-built articles inherit from template) */
.cag-article-hero__cat {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cag-accent-blue);
  display: block;
  margin-bottom: 0.75rem;
}

.cag-article-hero__heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--cag-text-on-light);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.cag-article-cta__sub {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-dark);
  margin-bottom: 1.25rem;
}

.cag-blog-meta__author,
.cag-blog-meta__date,
.cag-blog-meta__read {
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
}

.cag-blog-meta__sep {
  color: var(--cag-text-muted-light);
  margin-inline: 0.25em;
}

.cag-btn--outline-dark {
  border: 1.5px solid var(--cag-accent-blue);
  color: var(--cag-accent-blue);
  background: transparent;
  padding: 0.65em 1.5em;
  border-radius: var(--cag-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, color 0.2s;
}

.cag-btn--outline-dark:hover {
  background: var(--cag-accent-blue);
  color: #fff;
}

.cag-article-body__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-article-cover-wrap__inner {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-article-cover__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--cag-radius);
  display: block;
}


/* ==========================================
   CONTRAST FIX PASS 3: specificity + article CTA
   ========================================== */

/* Highlight card: override base after base is defined */
.cag-pricing-card.cag-pricing-card--highlight {
  background: var(--cag-bg-deep);
  border: 2px solid var(--cag-accent-blue);
}

/* Article CTA sub on light section bg */
.cag-article-cta__sub {
  color: var(--cag-text-muted-light);
}


/* ==========================================
   CONTRAST FIX PASS 4: save badge
   ========================================== */

/* Save badge: darken text to achieve 4.5:1 on warm-light bg */
.cag-pricing__save-badge {
  color: #7A4A1B;
}

/* ==========================================
   BLOG LISTING — lab-notes/index.html class aliases
   HTML uses descriptive BEM names that differ from the
   original CSS names; add rules here so no orphans remain.
   ========================================== */

/* Filter bar */
.cag-blog-filter-bar {
  background: var(--cag-bg-light);
  padding-bottom: 1.5rem;
}
.cag-blog-filter-bar__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Section wrappers */
.cag-blog-section {
  background: var(--cag-bg-light);
  padding-block: clamp(2rem, 5vw, 4rem);
}
.cag-blog-section__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Featured card cover + body aliases */
.cag-blog-featured__cover-link {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.cag-blog-featured__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.cag-blog-featured:hover .cag-blog-featured__cover {
  transform: scale(1.03);
}
.cag-blog-featured__body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cag-blog-featured__cat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cag-accent-blue);
  text-transform: capitalize;
  margin-bottom: 0.75rem;
}
.cag-blog-featured__heading {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.875rem;
  line-height: 1.25;
}
.cag-blog-featured__link {
  color: inherit;
  text-decoration: none;
}
.cag-blog-featured__link:hover {
  color: var(--cag-accent-blue);
}
.cag-blog-featured__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Blog card cover + body aliases */
.cag-blog-card__cover-link {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}
.cag-blog-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.cag-blog-card:hover .cag-blog-card__cover {
  transform: scale(1.04);
}
.cag-blog-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cag-blog-card__cat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cag-accent-blue);
  text-transform: capitalize;
  margin-bottom: 0.625rem;
}
.cag-blog-card__heading {
  font-family: 'Barlow', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.625rem;
  line-height: 1.3;
}
.cag-blog-card__link {
  color: inherit;
  text-decoration: none;
}
.cag-blog-card__link:hover {
  color: var(--cag-accent-blue);
}

@media (max-width: 768px) {
  .cag-blog-featured__img-wrap,
  .cag-blog-featured__cover-link {
    aspect-ratio: 16/9;
  }
  .cag-blog-featured__body,
  .cag-blog-featured__content {
    padding: 1.5rem;
  }
}

@media (max-width: 640px) {
  .cag-blog-section {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* ============================================================
   PASS-2C ORPHAN RESOLUTION — auth / contact / customers / blog
   ============================================================ */

/* AUTH PAGE wrapper (cag-page--auth is the base; cag-auth-page used on <main> in account/*.html) */
.cag-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cag-bg-light);
  padding: 2rem 1rem;
}

/* Auth form wrappers */
.cag-auth-login-form,
.cag-auth-forgot-form,
.cag-auth-register-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

/* Auth submit button — full width */
.cag-auth-card__submit {
  width: 100%;
}

/* Auth register/confirm view states */
.cag-auth-register-view {
  display: block;
}

.cag-auth-confirm--register {
  display: none;
  text-align: center;
  padding: 1.5rem 0;
}
.cag-auth-confirm--register.cag-auth-confirm--visible {
  display: block;
}

.cag-auth-confirm__back {
  display: inline-block;
  margin-top: 1rem;
}

/* cag-auth-error--login is a JS selector hook alongside .cag-auth-error; base handles display */
.cag-auth-error--login {
  color: inherit;
}

/* FORM FIELD aliases (HTML uses cag-form-field; CSS had cag-form__field) */
.cag-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cag-form-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cag-text-on-light);
}

.cag-form-field__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--cag-border-light);
  border-radius: var(--cag-radius);
  background: var(--cag-bg-white);
  color: var(--cag-text-on-light);
  font-size: 0.9375rem;
  transition: border-color var(--cag-transition), box-shadow var(--cag-transition);
  outline: none;
  -webkit-appearance: none;
}

.cag-form-field__input:focus {
  border-color: var(--cag-accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.cag-form-field__select {
  cursor: pointer;
}

.cag-form-field__textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

/* CONTACT SECTION aliases (HTML uses cag-contact-section; CSS had cag-contact-split) */
.cag-contact-section {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-contact-section__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: start;
}

.cag-contact-section__form-col {
  min-width: 0;
}

.cag-contact-section__info-col {
  min-width: 0;
}

/* Contact form */
.cag-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cag-contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cag-contact-form__heading {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.5rem;
}

.cag-contact-form__intro {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  margin-bottom: 1.5rem;
}

.cag-contact-form__submit {
  width: 100%;
  margin-top: 0.5rem;
}

/* Contact info aliases (HTML uses __address/__channels/__channel etc.; CSS had __item/__icon/__link) */
.cag-contact-info__address {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--cag-text-on-light);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.cag-contact-info__channels {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cag-contact-info__channel {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.cag-contact-info__channel-icon {
  flex-shrink: 0;
  color: var(--cag-accent-copper);
  width: 16px;
  text-align: center;
}

.cag-contact-info__channel-link {
  font-size: 0.9375rem;
  color: var(--cag-accent-blue);
  text-decoration: none;
  transition: opacity var(--cag-transition);
}

.cag-contact-info__channel-link:hover {
  opacity: 0.8;
}

.cag-contact-info__note {
  background: var(--cag-bg-white);
  border: 1px solid var(--cag-border-light);
  border-radius: var(--cag-radius);
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  line-height: 1.6;
}

/* Form feedback sub-elements (cag-form-feedback base exists; __icon/__heading/__body were missing) */
.cag-form-feedback__icon {
  font-size: 2rem;
  color: var(--cag-accent-green);
  margin-bottom: 0.75rem;
}

.cag-form-feedback__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 0.5rem;
}

.cag-form-feedback__body {
  font-size: 0.9375rem;
  color: var(--cag-text-muted-light);
  line-height: 1.55;
}

/* CUSTOMERS PAGE aliases (HTML uses cag-metrics; CSS had cag-metric-grid) */
.cag-metrics {
  background: var(--cag-bg-light);
  padding-block: var(--cag-section-v);
}

.cag-metrics__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-metrics__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* CUSTOMERS PAGE aliases (HTML uses cag-testimonials; CSS had cag-testimonial-grid) */
.cag-testimonials {
  background: var(--cag-bg-white);
  padding-block: var(--cag-section-v);
}

.cag-testimonials__inner {
  max-width: var(--cag-container-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.cag-testimonials__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  text-align: center;
  margin-bottom: 3rem;
}

.cag-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Case study outcome stats (HTML uses __heading/__outcomes/__outcome etc.; CSS only had __h2/__attribution) */
.cag-case-study__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--cag-text-on-light);
  margin-bottom: 1.25rem;
}

.cag-case-study__outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--cag-border-light);
}

.cag-case-study__outcome {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cag-case-study__outcome-value {
  font-family: 'Barlow', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--cag-accent-blue);
  line-height: 1;
}

.cag-case-study__outcome-label {
  font-size: 0.875rem;
  color: var(--cag-text-muted-light);
  line-height: 1.5;
}

/* Blog section grid modifier — section already styled by .cag-blog-section; grid child handles layout */
.cag-blog-section--grid {
  display: block;
}

/* Responsive: contact section stack, metrics/testimonials reflow */
@media (max-width: 900px) {
  .cag-contact-section__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cag-testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .cag-case-study__outcomes {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .cag-metrics__grid {
    grid-template-columns: 1fr;
  }
}