/* ============================================================
   ClicksGeek Hub & Spoke — Main Stylesheet
   Design: Outfit font, Green #1DC8EC accent, White/Clean, Dark Footer
   Taste-skill premium design language with cg- prefix
   ============================================================ */

/* ── 0. PREMIUM FONT IMPORT ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── 1. CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
  /* Brand — calibrated accent (single accent, <80% saturation) */
  --cg-green:         #1DC8EC;
  --cg-green-dark:    #12A0BE;
  --cg-green-light:   #E0F8FD;
  --cg-green-muted:   rgba(29,200,236, .12);

  /* Neutrals — off-black, never pure #000 (taste-skill: color calibration) */
  --cg-dark:          #101828;
  --cg-dark-70:       rgba(16, 24, 40, .7);
  --cg-dark-50:       rgba(16, 24, 40, .5);
  --cg-gray-50:       #f9fafb;
  --cg-gray-100:      #f2f4f7;
  --cg-gray-200:      #e4e7ec;
  --cg-gray-300:      #d0d5dd;
  --cg-gray-800:      #1d2939;
  --cg-gray-900:      #101828;
  --cg-white:         #ffffff;

  /* Aliases for template compatibility */
  --cg-text:          var(--cg-dark);
  --cg-text-muted:    var(--cg-dark-50);
  --cg-text-body:     var(--cg-dark-70);
  --cg-text-light:    var(--cg-gray-300);
  --cg-border:        var(--cg-gray-200);
  --cg-border-lt:     var(--cg-gray-100);
  --cg-surface:       var(--cg-gray-50);

  /* Typography — taste-skill: banned Inter, use premium Outfit */
  --cg-font:          'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cg-font-mono:     'JetBrains Mono', 'SF Mono', monospace;

  /* Layout */
  --cg-max-w:         1200px;
  --cg-max-narrow:    800px;
  --cg-gutter:        24px;

  /* Shape — taste-skill: generous radii */
  --cg-radius:        14px;
  --cg-radius-sm:     10px;
  --cg-radius-lg:     20px;
  --cg-radius-xl:     28px;
  --cg-radius-pill:   50px;

  /* Shadows — taste-skill: diffused whisper shadows, tinted to bg hue */
  --cg-shadow-sm:     0 1px 3px rgba(16, 24, 40, .04);
  --cg-shadow:        0 8px 30px -10px rgba(16, 24, 40, .06);
  --cg-shadow-lg:     0 20px 40px -15px rgba(16, 24, 40, .05);
  --cg-shadow-green:  0 12px 36px -8px rgba(29,200,236, .10);
  --cg-shadow-hover:  0 20px 40px -15px rgba(29,200,236, .12);

  /* Transitions — taste-skill: premium cubic-bezier, no linear/ease-in-out */
  --cg-ease:          cubic-bezier(0.32, 0.72, 0, 1);
  --cg-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --cg-duration:      0.4s;
  --cg-duration-fast: 0.2s;

  /* Spacing */
  --cg-section-py:    80px;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--cg-font);
  color: var(--cg-dark-70);
  background: var(--cg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; transition: color .15s; }
a:hover { text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
  color: var(--cg-dark);
  line-height: 1.15;
  letter-spacing: -0.025em;  /* taste-skill: tighter tracking on headlines */
  font-weight: 700;
}
button, input, select, textarea { font: inherit; border: none; background: none; }
button { cursor: pointer; }

/* ── 3. SCROLL ANIMATIONS ─────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--cg-ease), transform .7s var(--cg-ease);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--cg-ease), transform .6s var(--cg-ease);
}
.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger-children.is-visible > *:nth-child(1)  { transition-delay: 0s; }
.stagger-children.is-visible > *:nth-child(2)  { transition-delay: .06s; }
.stagger-children.is-visible > *:nth-child(3)  { transition-delay: .12s; }
.stagger-children.is-visible > *:nth-child(4)  { transition-delay: .18s; }
.stagger-children.is-visible > *:nth-child(5)  { transition-delay: .24s; }
.stagger-children.is-visible > *:nth-child(6)  { transition-delay: .30s; }
.stagger-children.is-visible > *:nth-child(7)  { transition-delay: .36s; }
.stagger-children.is-visible > *:nth-child(8)  { transition-delay: .42s; }
.stagger-children.is-visible > *:nth-child(9)  { transition-delay: .48s; }
.stagger-children.is-visible > *:nth-child(10) { transition-delay: .54s; }
.stagger-children.is-visible > *:nth-child(11) { transition-delay: .60s; }
.stagger-children.is-visible > *:nth-child(12) { transition-delay: .66s; }
.stagger-children.is-visible > *:nth-child(13) { transition-delay: .72s; }
.stagger-children.is-visible > *:nth-child(14) { transition-delay: .78s; }
.stagger-children.is-visible > *:nth-child(15) { transition-delay: .84s; }

/* ── 4. LAYOUT ────────────────────────────────────────────── */
.cg-container {
  max-width: var(--cg-max-w);
  margin: 0 auto;
  padding: 0 var(--cg-gutter);
}
.cg-container--narrow {
  max-width: var(--cg-max-narrow);
  margin: 0 auto;
  padding: 0 var(--cg-gutter);
}

/* Block editor overrides */
.cg-main > *,
.cg-main .cg-hero,
.cg-main .cg-section { max-width: none !important; margin-inline: unset !important; }
body .is-layout-constrained > *,
body .is-layout-flow > *,
body .wp-site-blocks > * { max-width: none !important; }
.wp-block-post-content,
.entry-content { max-width: none !important; width: 100% !important; }

/* ── 5. SECTIONS ──────────────────────────────────────────── */
.cg-section {
  padding: var(--cg-section-py) 0;
  position: relative;
}
.cg-section--gray {
  background: var(--cg-gray-50);
}
.cg-section--green {
  background: var(--cg-green);
  color: var(--cg-white);
}

/* Section head — concept-matched */
.cg-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.cg-section-head--left {
  text-align: left;
  margin-left: 0;
}
.cg-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-green);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.cg-section-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.cg-section-subtitle {
  font-size: 17px;
  color: var(--cg-dark-50);
  margin-top: 12px;
  line-height: 1.6;
}
.cg-section-head:not(.cg-section-head--left) .cg-section-subtitle {
  margin-inline: auto;
}

/* ── 6. HEADER ────────────────────────────────────────────── */
.cg-header {
  background: var(--cg-white);
  border-bottom: 1px solid var(--cg-gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .2s;
}
.cg-header--scrolled {
  box-shadow: 0 4px 20px rgba(16, 24, 40, .06);
}
.cg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--cg-max-w);
  margin: 0 auto;
  padding: 0 var(--cg-gutter);
}
.cg-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cg-header__logo-img {
  height: 36px;
  width: auto;
}
.cg-header__logo-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--cg-dark);
}
.cg-header__logo-text span {
  font-weight: 400;
}
.cg-header__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Nav */
.cg-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.cg-nav__list > li > a {
  font-size: 15px;
  font-weight: 500;
  color: var(--cg-dark-70);
  transition: color .15s;
}
.cg-nav__list > li > a:hover {
  color: var(--cg-dark);
}

/* Desktop sub-menus */
.cg-nav__list > .menu-item-has-children { position: relative; }
.cg-nav__list > .menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
  box-shadow: var(--cg-shadow-lg);
  padding: .5rem 0;
  z-index: 200;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
  list-style: none;
}
.cg-nav__list > .menu-item-has-children.is-open > .sub-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) {
  .cg-nav__list > .menu-item-has-children:hover > .sub-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}
.sub-menu li a {
  display: block;
  padding: .5rem 1.25rem;
  font-size: 14px;
  color: var(--cg-dark-50);
  transition: all .1s;
}
.sub-menu li a:hover {
  color: var(--cg-dark);
  background: var(--cg-gray-50);
}

/* Header CTA */
.cg-header__cta .cg-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 900;
}

/* Hamburger toggle */
.cg-header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.cg-header__toggle span {
  width: 22px;
  height: 2px;
  background: var(--cg-dark);
  border-radius: 2px;
  transition: all .25s;
}
.cg-header__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.cg-header__toggle.is-active span:nth-child(2) { opacity: 0; }
.cg-header__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── 7. MOBILE DRAWER (non-homepage) ──────────────────────── */
/* Mirrors the homepage h26-mobile-drawer design but scoped to
   .cg-header so it works on spoke/niche/service/archive pages. */
.cg-mobile-drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--cg-white);
  border-bottom: 1px solid var(--cg-gray-200);
  box-shadow: 0 16px 32px rgba(0,0,0,.06);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .2s;
  z-index: 49;
}
.cg-mobile-drawer[hidden] { display: none; }
.cg-mobile-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cg-mobile-drawer__inner {
  display: flex;
  flex-direction: column;
  padding: 12px 20px 24px;
  gap: 4px;
}
.cg-mobile-drawer__link {
  font-size: 17px;
  font-weight: 500;
  color: var(--cg-dark);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--cg-gray-100);
  transition: color .2s;
}
.cg-mobile-drawer__link:hover { color: var(--cg-green); }
.cg-mobile-drawer__link:last-of-type { border-bottom: none; }

/* ── 8. BREADCRUMBS ───────────────────────────────────────── */
.cg-breadcrumbs {
  padding: 16px 0;
  font-size: 14px;
  color: var(--cg-dark-50);
}
.cg-breadcrumbs a {
  color: var(--cg-dark-50);
  transition: color .15s;
}
.cg-breadcrumbs a:hover {
  color: var(--cg-green);
}
.cg-breadcrumbs .cg-breadcrumbs__sep {
  margin: 0 8px;
}
.cg-breadcrumbs [aria-current] {
  color: var(--cg-dark-70);
}

/* ── 9. HUB HERO ──────────────────────────────────────────── */
.cg-hero--hub {
  padding: 60px 0 80px;
  text-align: center;
  background: linear-gradient(180deg, var(--cg-white) 0%, var(--cg-gray-50) 100%);
  position: relative;
  overflow: hidden;
}
/* Decorative circle border (NOT filled) — concept-matched */
.cg-hero--hub::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border: 1px solid var(--cg-gray-200);
  background: transparent;
  border-radius: 50%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.cg-hero--hub .cg-container { position: relative; z-index: 1; }

/* Hero badge — concept-matched */
.cg-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cg-hero__badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cg-green);
  border-radius: 50%;
}

/* Hero title — concept-matched */
.cg-hero__title {
  font-size: 52px;
  font-weight: 800;
  color: var(--cg-dark);
  max-width: 800px;
  margin: 0 auto 20px;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* Green highlight underline on key phrase */
.cg-hero__title-highlight {
  position: relative;
  display: inline;
}
.cg-hero__title-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--cg-green);
  opacity: .3;
  border-radius: 4px;
  z-index: -1;
}

/* Hero subtitle & actions — concept-matched */
.cg-hero__subtitle {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 36px;
  color: var(--cg-dark-50);
  line-height: 1.6;
}
.cg-hero__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── 10. SPOKE HERO ───────────────────────────────────────── */
.cg-hero--spoke {
  padding: 56px 0 72px;
  background: linear-gradient(180deg, var(--cg-white) 0%, var(--cg-gray-50) 100%);
  position: relative;
  overflow: hidden;
}
.cg-hero--spoke::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border: 1px solid var(--cg-gray-200);
  border-radius: 50%;
  opacity: .3;
  pointer-events: none;
}
.cg-hero--spoke .cg-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cg-hero--spoke .cg-hero__copy {
  text-align: left;
}
.cg-hero--spoke .cg-hero__badge {
  margin-bottom: 20px;
}
.cg-hero--spoke .cg-hero__title {
  font-size: 44px;
  max-width: none;
  margin: 0 0 16px;
  text-align: left;
  display: block;
}
.cg-hero--spoke .cg-hero__title-highlight::after {
  bottom: 2px;
  height: 10px;
}
.cg-hero--spoke .cg-hero__subtitle {
  margin: 0 0 28px;
  text-align: left;
  font-size: 17px;
}
.cg-hero--spoke .cg-hero__actions {
  justify-content: flex-start;
}

/* ── 11. SIMPLE HERO (problem/learn pages) ────────────────── */
.cg-hero--simple {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cg-white) 0%, var(--cg-gray-50) 100%);
  padding: 48px 0 64px;
  text-align: center;
}
.cg-hero--simple .cg-hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

/* ── 12. PROOF CARD (spoke hero) ──────────────────────────── */
.cg-proof-card {
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  padding: 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .06);
}
.cg-proof-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-green);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.cg-proof-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cg-dark);
  margin-bottom: 20px;
}
.cg-proof-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cg-proof-card__stat {
  background: var(--cg-gray-50);
  border-radius: var(--cg-radius-sm);
  padding: 16px;
}
.cg-proof-card__stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cg-dark);
}
.cg-proof-card__stat-value .up {
  color: var(--cg-green);
  font-size: 14px;
  font-weight: 600;
}
.cg-proof-card__stat-label {
  font-size: 12px;
  color: var(--cg-dark-50);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cg-proof-card__quote {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cg-gray-200);
  font-size: 14px;
  font-style: italic;
  color: var(--cg-dark-70);
}
.cg-proof-card__quote-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-dark);
  margin-top: 8px;
  font-style: normal;
}

/* ── 13. STATS BAR ────────────────────────────────────────── */
/* Template outputs: .cg-container.cg-stats-bar > .cg-stats-bar__inner > .cg-stats-bar__item */
.cg-stats-bar {
  position: relative;
  z-index: 10;
  margin-top: -40px;
  margin-bottom: 60px;
}
.cg-stats-bar__inner {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-lg);
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  box-shadow: var(--cg-shadow-lg);
}
.cg-stats-bar__card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-lg);
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  box-shadow: var(--cg-shadow-lg);
}
.cg-stats-bar__item {
  text-align: center;
}
.cg-stats-bar__value {
  font-size: 32px;
  font-weight: 800;
  color: var(--cg-dark);
}
.cg-stats-bar__value span {
  color: var(--cg-green);
}
.cg-stats-bar__label {
  font-size: 13px;
  color: var(--cg-dark-50);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Spoke stats bar — slightly smaller */
.cg-hero--spoke ~ .cg-stats-bar {
  margin-top: -32px;
}
.cg-hero--spoke ~ .cg-stats-bar .cg-stats-bar__value {
  font-size: 28px;
}
.cg-hero--spoke ~ .cg-stats-bar .cg-stats-bar__label {
  font-size: 12px;
  margin-top: 2px;
}

/* ── 14. BUTTONS ──────────────────────────────────────────── */
.cg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--cg-radius-sm);
  font-family: var(--cg-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: all var(--cg-duration) var(--cg-ease);
  text-decoration: none;
  position: relative;
}
/* taste-skill: tactile press feedback on ALL buttons */
.cg-btn:active {
  transform: scale(0.97) translateY(1px);
  transition-duration: 0.1s;
}
.cg-btn--green {
  background: var(--cg-green);
  color: var(--cg-white);
  box-shadow: 0 4px 14px -4px rgba(29,200,236, .25);
}
.cg-btn--green:hover {
  background: var(--cg-green-dark);
  box-shadow: 0 8px 22px -4px rgba(29,200,236, .3);
  transform: translateY(-1px);
}
.cg-btn--dark {
  background: var(--cg-dark);
  color: var(--cg-white);
  box-shadow: 0 4px 14px -4px rgba(16, 24, 40, .2);
}
.cg-btn--dark:hover {
  background: var(--cg-gray-800);
  box-shadow: 0 8px 22px -4px rgba(16, 24, 40, .25);
  transform: translateY(-1px);
}
.cg-btn--outline {
  background: transparent;
  border: 1.5px solid var(--cg-gray-300);
  color: var(--cg-dark);
}
.cg-btn--outline:hover {
  border-color: var(--cg-dark);
  transform: translateY(-1px);
}
.cg-btn--white {
  background: var(--cg-white);
  color: var(--cg-dark);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}
.cg-btn--white:hover {
  background: var(--cg-gray-100);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
  transform: translateY(-1px);
}
.cg-btn--full {
  width: 100%;
  justify-content: center;
}
.cg-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 15. SPOKE CARD GRID ──────────────────────────────────── */
.cg-spoke-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cg-spoke-card {
  display: flex;
  flex-direction: column;
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.6);
  border-radius: var(--cg-radius-lg);
  padding: 32px;
  transition: all var(--cg-duration) var(--cg-ease);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--cg-shadow-sm);
}
.cg-spoke-card:hover {
  border-color: rgba(29,200,236, 0.3);
  box-shadow: var(--cg-shadow-hover);
  transform: translateY(-3px);
}
.cg-spoke-card__icon {
  width: 48px;
  height: 48px;
  background: var(--cg-green-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.cg-spoke-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cg-spoke-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 8px;
}
.cg-spoke-card__desc {
  font-size: 14px;
  color: var(--cg-dark-50);
  margin-bottom: 20px;
  line-height: 1.5;
  flex: 1;
}
.cg-spoke-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cg-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cg-spoke-card__link:hover {
  color: var(--cg-green);
}
.cg-spoke-card__link::after {
  content: '\2192';
  transition: transform .15s;
}
.cg-spoke-card:hover .cg-spoke-card__link::after {
  transform: translateX(4px);
}

/* ── 16. BENEFIT CARD GRID ────────────────────────────────── */
.cg-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* taste-skill: Double-Bezel card architecture — outer shell + inner feel */
.cg-benefit-card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-lg);
  padding: 30px;
  transition: all var(--cg-duration) var(--cg-ease);
  box-shadow: var(--cg-shadow);
  position: relative;
}
.cg-benefit-card::after {
  /* taste-skill: inner highlight for depth (Double-Bezel inner core) */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.cg-benefit-card:hover {
  border-color: rgba(29,200,236, 0.25);
  box-shadow: var(--cg-shadow-hover);
  transform: translateY(-2px);
}
.cg-benefit-card__icon {
  width: 48px;
  height: 48px;
  background: var(--cg-green-light);
  border-radius: var(--cg-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}
.cg-benefit-card__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cg-green);
  fill: none;
  stroke-width: 2;
}
.cg-benefit-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 8px;
}
.cg-benefit-card__desc {
  font-size: 14px;
  color: var(--cg-dark-50);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 17. PROCESS STEPS ────────────────────────────────────── */
/* Hub: 3-col, Spoke: 4-col with arrows */
.cg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cg-steps--four {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cg-step {
  text-align: center;
  padding: 32px 24px;
  position: relative;
}
/* Arrows between steps (spoke variant) */
.cg-steps--four .cg-step::after {
  content: '\2192';
  position: absolute;
  right: -16px;
  top: 44px;
  font-size: 20px;
  color: var(--cg-gray-300);
}
.cg-steps--four .cg-step:last-child::after {
  display: none;
}
.cg-step__num {
  width: 56px;
  height: 56px;
  background: var(--cg-green);
  color: var(--cg-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0 auto 20px;
}
.cg-steps--four .cg-step__num {
  width: 48px;
  height: 48px;
  font-size: 18px;
  margin-bottom: 16px;
}
.cg-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 8px;
}
.cg-steps--four .cg-step__title {
  font-size: 15px;
  margin-bottom: 6px;
}
.cg-step__desc {
  font-size: 14px;
  color: var(--cg-dark-50);
  line-height: 1.5;
}
.cg-steps--four .cg-step__desc {
  font-size: 13px;
}

/* ── 18. TESTIMONIAL ──────────────────────────────────────── */
.cg-testimonial {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.cg-testimonial__quote {
  font-size: 22px;
  font-weight: 500;
  color: var(--cg-dark);
  max-width: 700px;
  margin: 0 auto 24px;
  font-style: italic;
  line-height: 1.5;
}
.cg-testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cg-testimonial__avatar {
  width: 48px;
  height: 48px;
  background: var(--cg-gray-200);
  border-radius: 50%;
  object-fit: cover;
}
.cg-testimonial__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cg-dark);
}
.cg-testimonial__role {
  font-size: 13px;
  color: var(--cg-green);
}

/* ── 19. DEEP CONTENT ─────────────────────────────────────── */
.cg-content {
  max-width: var(--cg-max-narrow);
  margin: 0 auto;
}
.cg-content h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--cg-dark);
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cg-green);
  position: relative;
  line-height: 1.2;
}
.cg-content h2:first-child { margin-top: 0; }
.cg-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--cg-dark);
  margin: 36px 0 12px;
  padding-left: 16px;
  border-left: 3px solid var(--cg-green);
}
.cg-content p {
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--cg-dark-70);
  line-height: 1.7;
}
.cg-content ul,
.cg-content ol {
  margin: 0 0 20px 0;
  padding-left: 0;
}
.cg-content ul { list-style: none; }
.cg-content ol { list-style: none; counter-reset: ol-counter; }
.cg-content li {
  margin-bottom: 10px;
  font-size: 15.5px;
  color: var(--cg-dark-70);
  line-height: 1.65;
  padding-left: 28px;
  position: relative;
}
.cg-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--cg-green);
  border-radius: 50%;
}
.cg-content ol li { counter-increment: ol-counter; }
.cg-content ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  background: var(--cg-green);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-content blockquote {
  border-left: 4px solid var(--cg-green);
  background: var(--cg-green-light);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
}
.cg-content blockquote p {
  color: var(--cg-dark);
  font-style: italic;
  margin-bottom: 0;
}
.cg-content a {
  color: var(--cg-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(29,200,236, 0.3);
  transition: text-decoration-color .2s;
}
.cg-content a:hover {
  color: var(--cg-green-dark);
  text-decoration-color: var(--cg-green);
}
.cg-content strong {
  color: var(--cg-dark);
  font-weight: 700;
}

/* --- Deep content: table polish --- */
.cg-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
  overflow: hidden;
  margin: 28px 0;
  font-size: 14.5px;
}
.cg-content table thead {
  background: var(--cg-dark);
  color: #fff;
}
.cg-content table th {
  padding: 12px 16px;
  font-weight: 600;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cg-content table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--cg-gray-100);
  color: var(--cg-dark-70);
}
.cg-content table tbody tr:last-child td { border-bottom: none; }
.cg-content table tbody tr:nth-child(even) { background: var(--cg-gray-50); }
.cg-content table tbody tr:hover { background: var(--cg-green-light); }

/* --- Deep content: horizontal rule --- */
.cg-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--cg-green), transparent);
  margin: 40px 0;
}

/* --- Deep content: first paragraph emphasis --- */
.cg-content h2 + p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--cg-dark);
}

/* --- Deep content: H3 subsection cards (taste-skill: Double-Bezel architecture) --- */
.cg-content-card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-lg);
  padding: 30px 34px;
  margin: 28px 0;
  box-shadow: var(--cg-shadow);
  border-left: 3px solid var(--cg-green);
  position: relative;
  transition: box-shadow var(--cg-duration) var(--cg-ease), transform var(--cg-duration) var(--cg-ease);
}
.cg-content-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.cg-content-card:hover {
  box-shadow: var(--cg-shadow-lg);
  transform: translateY(-1px);
}
.cg-content-card h3 {
  margin-top: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
  font-size: 18px !important;
  letter-spacing: -0.02em;
}
.cg-content-card p:last-child { margin-bottom: 0; }

/* --- Deep content: key stat highlight --- */
.cg-content-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cg-green-light);
  color: var(--cg-dark);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 15px;
}

/* --- Deep content: pro tip box --- */
.cg-content-tip {
  background: linear-gradient(135deg, var(--cg-green-light), #f0fdf4);
  border: 1px solid rgba(29,200,236, 0.2);
  border-radius: var(--cg-radius);
  padding: 20px 24px;
  margin: 28px 0;
  position: relative;
  padding-left: 52px;
}
.cg-content-tip::before {
  content: '💡';
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 20px;
}

/* --- Deep content: section divider with icon --- */
.cg-content-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 48px 0;
  color: var(--cg-gray-200);
}
.cg-content-divider::before,
.cg-content-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cg-gray-200);
}
.cg-content-divider__dot {
  width: 8px;
  height: 8px;
  background: var(--cg-green);
  border-radius: 50%;
}

/* --- Deep content: alternating H2 section backgrounds --- */
.cg-content-section--alt {
  background: var(--cg-gray-50);
  margin: 0 -32px;
  padding: 32px 32px;
  border-radius: var(--cg-radius);
}
}

/* ── 20. CONTENT LAYOUT WITH TOC ──────────────────────────── */
.cg-content-layout {
  display: block;
  max-width: var(--cg-max-w);
  margin: 0 auto;
  padding: 0 var(--cg-gutter);
}
.cg-content-layout .cg-content-toc {
  display: none; /* TOC was overlapping content — hidden for now */
  align-items: start;
}
.cg-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}
.cg-toc__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-dark-50);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.cg-toc__list {
  list-style: none;
}
.cg-toc__list li {
  margin-bottom: 10px;
  position: relative;
}
.cg-toc__list li a {
  font-size: 14px;
  color: var(--cg-dark-50);
  transition: color .15s;
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--cg-gray-200);
}
.cg-toc__list li a:hover,
.cg-toc__list li a.active,
.cg-toc__list li.is-active a {
  color: var(--cg-green);
  border-left-color: var(--cg-green);
}
.cg-toc__list li.is-active a {
  font-weight: 600;
}
.cg-toc__list li.is-active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--cg-green);
  border-radius: 1px;
}
.cg-content-layout .cg-content {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}
/* Content collapsed wrapper — match the wider content area */
.cg-content-collapsed {
  max-width: 1040px !important;
  margin: 0 auto !important;
}
/* Content main inside — also wider */
.cg-content-collapsed .cg-content-main {
  max-width: 1040px !important;
}
/* TOC content h2 — spoke style */
.cg-content-layout .cg-content h2 {
  font-size: 26px;
  padding-top: 8px;
}
.cg-content-layout .cg-content h3 {
  font-size: 20px;
  margin: 28px 0 12px;
}

/* ── 21. DATA CALLOUT ─────────────────────────────────────── */
.cg-data-callout {
  background: var(--cg-green-light);
  border-left: 4px solid var(--cg-green);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.cg-data-callout__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 4px;
}
.cg-data-callout__text {
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.6;
}
.cg-data-callout__source {
  font-size: 12px;
  color: var(--cg-dark-50);
  margin-top: 8px;
  font-style: italic;
}
/* Alias for .cg-callout if templates use that */
.cg-callout { background: var(--cg-green-light); border-left: 4px solid var(--cg-green); border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0; padding: 20px 24px; margin: 24px 0; }
.cg-callout__title { font-size: 14px; font-weight: 700; color: var(--cg-dark); margin-bottom: 4px; }
.cg-callout__text { font-size: 14px; color: var(--cg-dark-70); line-height: 1.6; }
.cg-callout__source { font-size: 12px; color: var(--cg-dark-50); margin-top: 8px; font-style: italic; }

/* ── 22. MID CTA ──────────────────────────────────────────── */
.cg-mid-cta {
  padding: 64px 0;
  text-align: center;
}
.cg-mid-cta__inner {
  background: var(--cg-green);
  border-radius: var(--cg-radius-xl);
  padding: 56px 48px;
  box-shadow: 0 20px 50px -15px rgba(29,200,236, .2);
}
.cg-mid-cta h2,
.cg-mid-cta__title {
  font-size: 32px;
  font-weight: 800;
  color: var(--cg-white);
  margin-bottom: 12px;
}
.cg-mid-cta p,
.cg-mid-cta__sub {
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  margin-bottom: 28px;
}
.cg-mid-cta .cg-btn--white {
  background: var(--cg-white);
  color: var(--cg-dark);
}
.cg-mid-cta .cg-btn--white:hover {
  background: var(--cg-gray-100);
}
.cg-mid-cta .cg-btn--dark {
  background: var(--cg-white);
  color: var(--cg-dark);
}
.cg-mid-cta .cg-btn--dark:hover {
  background: var(--cg-gray-100);
}

/* Inline mid-CTA variant (inside content layout) */
.cg-mid-cta--inline {
  background: var(--cg-green);
  border-radius: var(--cg-radius-lg);
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 2rem 0;
  text-align: left;
}
.cg-mid-cta--inline .cg-mid-cta__text {
  color: var(--cg-white);
}
.cg-mid-cta--inline .cg-mid-cta__title {
  font-size: 1.25rem;
  margin-bottom: .35rem;
}
.cg-mid-cta--inline .cg-mid-cta__sub {
  font-size: .9rem;
  opacity: .85;
  margin-bottom: 0;
}
.cg-mid-cta--inline .cg-btn--white {
  flex-shrink: 0;
}

/* ── 23. FAQ ──────────────────────────────────────────────── */
.cg-faq {
  max-width: 720px;
  margin: 0 auto;
}
.cg-faq-item {
  border-bottom: 1px solid var(--cg-gray-200);
}
.cg-faq-item__q {
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cg-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  gap: 1rem;
}
.cg-faq-item__q::after {
  content: '+';
  font-size: 22px;
  color: var(--cg-green);
  font-weight: 300;
  flex-shrink: 0;
}
.cg-faq-item__q:hover {
  color: var(--cg-green);
}
.cg-faq-item__a {
  padding: 0 0 20px;
  font-size: 15px;
  color: var(--cg-dark-50);
  display: none;
  line-height: 1.6;
}
.cg-faq-item.active .cg-faq-item__a,
.cg-faq-item.is-open .cg-faq-item__a {
  display: block;
}
.cg-faq-item.active .cg-faq-item__q::after,
.cg-faq-item.is-open .cg-faq-item__q::after {
  content: '\2212';
}
/* Alternate FAQ markup using __question / __answer / __toggle */
.cg-faq__item { border-bottom: 1px solid var(--cg-gray-200); }
.cg-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cg-dark);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  gap: 1rem;
}
.cg-faq__question:hover { color: var(--cg-green); }
.cg-faq__toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cg-green-light);
  color: var(--cg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all .2s;
}
.cg-faq__item.is-open .cg-faq__toggle {
  background: var(--cg-green);
  color: var(--cg-white);
  transform: rotate(45deg);
}
.cg-faq__answer {
  display: none;
  padding-bottom: 20px;
}
.cg-faq__item.is-open .cg-faq__answer { display: block; }
.cg-faq__answer p {
  font-size: 15px;
  color: var(--cg-dark-50);
  line-height: 1.6;
}

/* ── 24. SIBLING GRID ─────────────────────────────────────── */
.cg-sibling-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cg-sibling-card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius);
  padding: 20px;
  transition: all var(--cg-duration) var(--cg-ease);
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  box-shadow: var(--cg-shadow-sm);
}
.cg-sibling-card:hover {
  border-color: rgba(29,200,236, 0.25);
  box-shadow: var(--cg-shadow-green);
  transform: translateY(-2px);
}
.cg-sibling-card__icon {
  font-size: 20px;
  flex-shrink: 0;
}
.cg-sibling-card__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
}
.cg-sibling-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cg-dark);
}

/* ── 25. RELATED GRID ─────────────────────────────────────── */
.cg-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cg-related-card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius);
  padding: 24px;
  text-align: center;
  transition: all var(--cg-duration) var(--cg-ease);
  text-decoration: none;
  display: block;
  box-shadow: var(--cg-shadow-sm);
}
.cg-related-card:hover {
  border-color: rgba(29,200,236, 0.25);
  box-shadow: var(--cg-shadow-green);
  transform: translateY(-2px);
}
.cg-related-card__icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.cg-related-card__icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cg-green);
  fill: none;
  stroke-width: 2;
  margin: 0 auto;
}
.cg-related-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cg-dark);
}

/* ── 26. COMPARISON TABLE ─────────────────────────────────── */
.cg-comparison {
  width: min(960px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-lg);
  overflow: hidden;
  box-shadow: var(--cg-shadow);
}
.cg-comparison__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cg-comparison__header-col {
  padding: 1rem 1.5rem;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.cg-comparison__header-col--protected {
  background: var(--cg-green);
  color: var(--cg-white);
}
.cg-comparison__header-col--exposed {
  background: var(--cg-dark);
  color: var(--cg-white);
}
.cg-comparison__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--cg-gray-100);
}
.cg-comparison__cell {
  padding: .85rem 1.5rem;
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.6;
}
.cg-comparison__cell--protected {
  background: rgba(29,200,236, .04);
}
.cg-comparison__cell--exposed {
  background: rgba(16, 24, 40, .02);
}
.cg-comparison__check {
  color: var(--cg-green);
  font-weight: 700;
  margin-right: .3rem;
}
.cg-comparison__cross {
  color: #EF4444;
  font-weight: 700;
  margin-right: .3rem;
}

/* ── 27. ECONOMICS / DATA TABLE ───────────────────────────── */
.cg-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
}
.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cg-table thead {
  background: var(--cg-gray-50);
}
.cg-table th {
  padding: .85rem 1.25rem;
  font-weight: 700;
  color: var(--cg-dark);
  text-align: left;
  border-bottom: 2px solid var(--cg-gray-200);
}
.cg-table td {
  padding: .75rem 1.25rem;
  color: var(--cg-dark-70);
  border-bottom: 1px solid var(--cg-gray-100);
}
.cg-table tbody tr:last-child td {
  border-bottom: none;
}
.cg-table tbody tr:hover {
  background: var(--cg-gray-50);
}
.cg-table__source {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--cg-dark-50);
  background: var(--cg-gray-100);
  padding: .15rem .5rem;
  border-radius: var(--cg-radius-pill);
  margin-left: .3rem;
}

/* ── 28. LEAD FORM ────────────────────────────────────────── */
.cg-form {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-xl);
  padding: 2.5rem;
  box-shadow: var(--cg-shadow-lg);
  max-width: 680px;
  margin: 0 auto;
}
.cg-form__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 6px;
  text-align: center;
}
.cg-form__sub {
  font-size: 15px;
  color: var(--cg-dark-50);
  margin-bottom: 1.5rem;
  text-align: center;
}
.cg-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cg-form__field--full {
  grid-column: 1 / -1;
}
.cg-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-dark);
  margin-bottom: 6px;
}
.cg-form__input,
.cg-form__select,
.cg-form__textarea {
  width: 100%;
  padding: .7rem 1rem;
  font-size: 15px;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
  color: var(--cg-dark);
  background: var(--cg-white);
  transition: border-color .15s, box-shadow .15s;
}
.cg-form__input:focus,
.cg-form__select:focus,
.cg-form__textarea:focus {
  outline: none;
  border-color: var(--cg-green);
  box-shadow: 0 0 0 3px rgba(29,200,236, .12);
}
.cg-form__textarea {
  min-height: 100px;
  resize: vertical;
}
.cg-form__hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
.cg-form__submit {
  grid-column: 1 / -1;
  margin-top: .5rem;
}
.cg-form__success {
  display: none;
  text-align: center;
  padding: 2rem;
}
.cg-form__success.is-visible {
  display: block;
}
.cg-form__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cg-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.cg-form__success-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--cg-green);
  fill: none;
  stroke-width: 2.5;
}
.cg-form__success-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 6px;
}
.cg-form__success-text {
  font-size: 15px;
  color: var(--cg-dark-50);
}

/* ── 29. WHY CLICKSGEEK SECTION ───────────────────────────── */
.cg-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cg-why__item {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--cg-radius-lg);
  transition: all var(--cg-duration) var(--cg-ease);
}
.cg-why__item:hover {
  background: var(--cg-gray-50);
  transform: translateY(-2px);
}
.cg-why__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--cg-radius);
  background: var(--cg-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: transform var(--cg-duration) var(--cg-ease-bounce);
}
.cg-why__item:hover .cg-why__icon {
  transform: scale(1.08);
}
.cg-why__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cg-green);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cg-why__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 6px;
}
.cg-why__desc {
  font-size: 14px;
  color: var(--cg-dark-50);
  line-height: 1.5;
}

/* ── 30. FINAL CTA SECTION ────────────────────────────────── */
.cg-final-cta {
  background: var(--cg-gray-50);
  text-align: center;
  padding: var(--cg-section-py) 0;
}
.cg-final-cta__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 12px;
}
.cg-final-cta__sub {
  font-size: 17px;
  color: var(--cg-dark-50);
  max-width: 50ch;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.cg-final-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── 31. FOOTER ───────────────────────────────────────────── */
.cg-footer {
  background: var(--cg-gray-900);
  color: rgba(255, 255, 255, .6);
  padding: 64px 0 32px;
}
.cg-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.cg-footer__brand-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--cg-white);
  margin-bottom: 12px;
}
.cg-footer__brand-text span {
  font-weight: 400;
}
.cg-footer__brand-desc {
  font-size: 14px;
  line-height: 1.6;
}
.cg-footer__social {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.cg-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: var(--cg-radius-sm);
  background: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.cg-footer__social a:hover {
  background: var(--cg-green);
  color: var(--cg-white);
}
.cg-footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.cg-footer__heading {
  color: var(--cg-white);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
  font-weight: 700;
}
/* Support h4 in footer */
.cg-footer h4 {
  color: var(--cg-white);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
}
.cg-footer__links {
  list-style: none;
}
.cg-footer__links li {
  margin-bottom: 10px;
}
.cg-footer__links a {
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
  transition: color .15s;
}
.cg-footer__links a:hover {
  color: var(--cg-green);
}
.cg-footer ul {
  list-style: none;
}
.cg-footer ul li {
  margin-bottom: 10px;
}
.cg-footer ul a {
  font-size: 14px;
  transition: color .15s;
}
.cg-footer ul a:hover {
  color: var(--cg-green);
}

/* Footer bottom bar */
.cg-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.cg-footer__legal {
  display: flex;
  gap: 1.5rem;
}
.cg-footer__legal a {
  color: rgba(255, 255, 255, .4);
  transition: color .15s;
}
.cg-footer__legal a:hover {
  color: rgba(255, 255, 255, .7);
}

/* ── 32. STICKY MOBILE CTA — rebuilt 2026-04-16 as .cg-fab-cta ──
   Old Block A + Block B removed because they collided. The new
   button uses an isolated class so it can't conflict with anything
   historical. Hidden on desktop, hidden on the home-2026 layout
   (which has its own hero CTAs), shown on every other page on
   mobile. */
.cg-fab-cta { display: none; }
@media (max-width: 780px) {
  .cg-fab-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    padding: 16px 24px;
    background: var(--cg-green);
    color: var(--cg-white);
    text-decoration: none;
    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    border-radius: 100px;
    box-shadow: 0 8px 24px rgba(29,200,236, .35),
                0 2px 6px rgba(0, 0, 0, .12),
                inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .3s cubic-bezier(.22,.61,.36,1),
                opacity .3s cubic-bezier(.22,.61,.36,1),
                box-shadow .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
  }
  /* Only apply hover lift on devices with a real pointer — iOS Safari
     treats the first tap as :hover which causes a double-tap-to-click bug. */
  @media (hover: hover) {
    .cg-fab-cta:hover {
      transform: translateY(-2px);
      background: var(--cg-green-dark);
      box-shadow: 0 12px 32px rgba(29,200,236, .45),
                  0 4px 10px rgba(0, 0, 0, .15),
                  inset 0 1px 0 rgba(255, 255, 255, .25);
    }
  }
  .cg-fab-cta:focus-visible {
    background: var(--cg-green-dark);
  }
  .cg-fab-cta:active { background: var(--cg-green-dark); }
  /* Give all mobile pages bottom padding so content can't hide behind
     the floating button. ~96px = button height + safe inset cushion. */
  body:not(.home-2026) { padding-bottom: 96px; }
}
/* FAB button now shows on homepage too — removed the display:none block. */

/* ── 33. CARD GRID TOGGLE ─────────────────────────────────── */
.cg-grid-toggle-wrap {
  text-align: center;
  margin-top: 24px;
}
.cg-grid-toggle {
  font-size: 14px;
  font-weight: 600;
  color: var(--cg-green);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .5rem 1rem;
  border-radius: var(--cg-radius-pill);
  transition: all .15s;
}
.cg-grid-toggle:hover {
  background: var(--cg-green-light);
}
.cg-grid-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .2s;
}
.cg-grid-toggle.is-expanded svg {
  transform: rotate(180deg);
}
.cg-card--overflow { display: none; }
.cg-grid--expanded .cg-card--overflow { display: block; }

/* ── 34. TEMPLATE ↔ CSS ALIAS RULES ──────────────────────── */
/* These rules map template class names to existing CSS concepts
   where the template PHP outputs different names than the original CSS. */

/* --- HERO: templates use .cg-hero (no modifier) for hub-style hero --- */
.cg-hero {
  padding: 60px 0 80px;
  text-align: center;
  background: linear-gradient(180deg, var(--cg-white) 0%, var(--cg-gray-50) 100%);
  position: relative;
  overflow: hidden;
}
.cg-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border: 1px solid var(--cg-gray-200);
  background: transparent;
  border-radius: 50%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.cg-hero .cg-container,
.cg-hero > .cg-container { position: relative; z-index: 1; }
.cg-hero__badge,
.cg-hero__title,
.cg-hero__sub,
.cg-hero__subtitle,
.cg-hero__ctas,
.cg-hero__actions { position: relative; z-index: 2; }

/* Homepage hero variant */
.cg-hero--home {
  padding: 72px 0 88px;
}

/* --- HERO subtitle: templates use .cg-hero__sub --- */
.cg-hero__sub {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 36px;
  color: var(--cg-dark-50);
  line-height: 1.6;
}

/* --- HERO CTAs: templates use .cg-hero__ctas --- */
.cg-hero__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Highlight: templates use .cg-highlight --- */
.cg-highlight {
  position: relative;
  display: inline;
}
.cg-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--cg-green);
  opacity: .3;
  border-radius: 4px;
  z-index: -1;
}

/* --- SECTION HEAD: templates use double-underscore .cg-section__head --- */
.cg-section__head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 48px;
}
.cg-section__head--left {
  text-align: left;
  margin-left: 0;
}
.cg-section__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-green);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.cg-section__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.cg-section__subtitle {
  font-size: 17px;
  color: var(--cg-dark-50);
  margin-top: 12px;
  line-height: 1.6;
}
.cg-section__head:not(.cg-section__head--left) .cg-section__subtitle {
  margin-inline: auto;
}

/* --- SPOKE HERO: templates use .cg-hero-spoke (hyphen, not BEM modifier) --- */
.cg-hero-spoke {
  padding: 56px 0 72px;
  background: linear-gradient(180deg, var(--cg-white) 0%, var(--cg-gray-50) 100%);
  position: relative;
  overflow: hidden;
}
.cg-hero-spoke::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border: 1px solid var(--cg-gray-200);
  border-radius: 50%;
  opacity: .3;
  pointer-events: none;
}
.cg-hero-spoke__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cg-hero-spoke__copy {
  text-align: left;
}
.cg-hero-spoke__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cg-hero-spoke__badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cg-green);
  border-radius: 50%;
}
.cg-hero-spoke__title {
  font-size: 44px;
  font-weight: 800;
  color: var(--cg-dark);
  max-width: none;
  margin: 0 0 16px;
  text-align: left;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.cg-hero-spoke__sub {
  font-size: 17px;
  color: var(--cg-dark-50);
  margin: 0 0 28px;
  text-align: left;
  line-height: 1.6;
}
.cg-hero-spoke__ctas {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.cg-hero-spoke__proof {
  /* Proof card container on right side of spoke hero */
}

/* --- BENEFITS GRID: templates use .cg-benefits-grid (plural) --- */
.cg-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* --- COMPARISON TABLE (row-based: label + good vs bad) --- */
.cg-compare {
  width: min(1000px, 100%);
  margin: 0 auto;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  overflow: hidden;
}
.cg-compare__header {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  background: var(--cg-gray-50);
  border-bottom: 2px solid var(--cg-gray-200);
}
.cg-compare__header-label {
  padding: 1rem 1.25rem;
}
.cg-compare__header-col {
  padding: 1rem 1.25rem;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cg-compare__header-col--good {
  background: var(--cg-green);
  color: var(--cg-white);
}
.cg-compare__header-col--bad {
  background: var(--cg-dark);
  color: var(--cg-white);
}
.cg-compare__header-col .cg-compare-icon { flex-shrink: 0; }
.cg-compare__header-col--good .cg-compare-icon circle { fill: rgba(255,255,255,.3); }
.cg-compare__header-col--bad .cg-compare-icon circle { fill: rgba(255,255,255,.2); }

.cg-compare__row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  border-bottom: 1px solid var(--cg-gray-100);
}
.cg-compare__row:last-child { border-bottom: none; }
.cg-compare__row--alt { background: var(--cg-gray-50); }

.cg-compare__label {
  padding: 1rem 1.25rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--cg-dark);
  display: flex;
  align-items: flex-start;
  border-right: 1px solid var(--cg-gray-100);
  background: var(--cg-gray-50);
}
.cg-compare__cell {
  padding: 1rem 1.25rem;
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.6;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cg-compare__cell--good {
  background: rgba(29,200,236, .03);
  border-right: 1px solid var(--cg-gray-100);
}
.cg-compare__cell--bad {
  background: rgba(239, 68, 68, .02);
}
.cg-compare__indicator {
  flex-shrink: 0;
  margin-top: 1px;
}
.cg-compare__cell--good span:not(.cg-compare__indicator) { color: var(--cg-dark-70); }
.cg-compare__cell--bad span:not(.cg-compare__indicator) { color: var(--cg-dark-50); }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .cg-compare__header { grid-template-columns: 1fr 1fr; }
  .cg-compare__header-label { display: none; }
  .cg-compare__row { grid-template-columns: 1fr; }
  .cg-compare__label {
    border-right: none;
    border-bottom: 1px solid var(--cg-gray-100);
    padding: .75rem 1.25rem;
  }
  .cg-compare__cell { border-right: none; }
  .cg-compare__cell--good { border-bottom: 1px solid var(--cg-gray-100); }
}

/* Legacy split layout (backwards compat) */
.cg-comparison-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: min(960px, 100%);
  margin: 0 auto;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  overflow: hidden;
}
.cg-comparison-split__col { display: flex; flex-direction: column; }
.cg-comparison-split__col--protected { background: rgba(29,200,236, .02); }
.cg-comparison-split__col--exposed { background: rgba(16, 24, 40, .02); border-left: 1px solid var(--cg-gray-200); }
.cg-comparison-split__header { padding: 1rem 1.5rem; font-size: 14px; font-weight: 700; text-align: center; }
.cg-comparison-split__col--protected .cg-comparison-split__header { background: var(--cg-green); color: var(--cg-white); }
.cg-comparison-split__col--exposed .cg-comparison-split__header { background: var(--cg-dark); color: var(--cg-white); }
.cg-comparison-split__list { list-style: none; padding: 0; margin: 0; }
.cg-comparison-split__item { padding: .85rem 1.5rem; border-top: 1px solid var(--cg-gray-100); font-size: 14px; color: var(--cg-dark-70); line-height: 1.6; }
.cg-comparison-split__item strong { display: block; color: var(--cg-dark); font-size: 13px; margin-bottom: 2px; }

/* --- ECONOMICS TABLE: templates use .cg-economics-table --- */
.cg-economics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
  overflow: hidden;
}
.cg-economics-table thead {
  background: var(--cg-gray-50);
}
.cg-economics-table th {
  padding: .85rem 1.25rem;
  font-weight: 700;
  color: var(--cg-dark);
  text-align: left;
  border-bottom: 2px solid var(--cg-gray-200);
}
.cg-economics-table td {
  padding: .75rem 1.25rem;
  color: var(--cg-dark-70);
  border-bottom: 1px solid var(--cg-gray-100);
}
.cg-economics-table tbody tr:last-child td {
  border-bottom: none;
}
.cg-economics-table tbody tr:hover {
  background: var(--cg-gray-50);
}

/* --- SOURCE TAG: templates use .cg-source-tag --- */
.cg-source-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: var(--cg-radius-pill);
}
.cg-source-tag--internal {
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
}
.cg-source-tag--third_party {
  background: #EFF6FF;
  color: #2563EB;
}
.cg-source-tag--modeled {
  background: var(--cg-gray-100);
  color: var(--cg-dark-50);
}

/* --- FAQ LIST: templates use .cg-faq-list wrapper --- */
.cg-faq-list {
  max-width: 720px;
  margin: 0 auto;
}

/* --- WHY SECTION: templates use .cg-why-grid / .cg-why-card --- */
.cg-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cg-why-card {
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  text-align: center;
  padding: 32px 24px;
  transition: all .2s;
}
.cg-why-card:hover {
  border-color: var(--cg-green);
  box-shadow: var(--cg-shadow-green);
}
.cg-why-card__num {
  font-size: 32px;
  font-weight: 800;
  color: var(--cg-green);
  margin-bottom: 12px;
}
.cg-why-card__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 6px;
}
.cg-why-card__desc {
  font-size: 14px;
  color: var(--cg-dark-50);
  line-height: 1.5;
}

/* --- CTA SECTION: templates use .cg-cta-section --- */
.cg-cta-section {
  text-align: center;
}
.cg-cta-section h2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-white);
  margin-bottom: 12px;
}
.cg-cta-section p {
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  margin-bottom: 28px;
}

/* --- CARD GRID: templates use .cg-card-grid --- */
.cg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cg-card-grid--collapsible .cg-card--overflow {
  display: none;
}
.cg-card-grid--collapsible.is-expanded .cg-card--overflow,
.cg-card-grid.cg-grid--expanded .cg-card--overflow {
  display: flex;
}
.cg-card-toggle {
  /* Inherits .cg-btn .cg-btn--outline styles */
}

/* --- CONTENT TOC: templates use .cg-content-toc --- */
.cg-content-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}
.cg-content-toc__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-dark-50);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.cg-content-toc ul {
  list-style: none;
}
.cg-content-toc ul li {
  margin-bottom: 10px;
  position: relative;
}
.cg-content-toc ul li a {
  font-size: 14px;
  color: var(--cg-dark-50);
  transition: color .15s;
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--cg-gray-200);
}
.cg-content-toc ul li a:hover,
.cg-content-toc ul li a.active,
.cg-content-toc ul li.is-active a {
  color: var(--cg-green);
  border-left-color: var(--cg-green);
}
.cg-content-toc ul li.is-active a {
  font-weight: 600;
}
.cg-content-main {
  width: 100%;
  max-width: var(--cg-max-narrow);
}

/* --- PROOF STAT: templates use .cg-proof-stat (not .cg-proof-card__stat) --- */
.cg-proof-stat {
  background: var(--cg-gray-50);
  border-radius: var(--cg-radius-sm);
  padding: 16px;
}
.cg-proof-stat__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cg-dark);
}
.cg-proof-stat__value .up {
  color: var(--cg-green);
  font-size: 14px;
  font-weight: 600;
}
.cg-proof-stat__label {
  font-size: 12px;
  color: var(--cg-dark-50);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* --- PROOF CARD AUTHOR: templates use .cg-proof-card__author --- */
.cg-proof-card__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-dark);
  margin-top: 8px;
  font-style: normal;
}

/* --- FORM SUCCESS: templates use .cg-form-success (not .cg-form__success) --- */
.cg-form-success {
  display: none;
  text-align: center;
  padding: 2rem;
}
.cg-form-success.is-visible {
  display: block;
}
.cg-form-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cg-green-light);
  color: var(--cg-green);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

/* --- FORM ELEMENTS: templates use bare label/input/select/textarea inside .cg-form --- */
.cg-form .cg-form__field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-dark);
  margin-bottom: 6px;
}
.cg-form .cg-form__field input,
.cg-form .cg-form__field select,
.cg-form .cg-form__field textarea {
  width: 100%;
  padding: .7rem 1rem;
  font-size: 15px;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
  color: var(--cg-dark);
  background: var(--cg-white);
  transition: border-color .15s, box-shadow .15s;
}
.cg-form .cg-form__field input:focus,
.cg-form .cg-form__field select:focus,
.cg-form .cg-form__field textarea:focus {
  outline: none;
  border-color: var(--cg-green);
  box-shadow: 0 0 0 3px rgba(29,200,236, .12);
}
.cg-form .cg-form__field textarea {
  min-height: 100px;
  resize: vertical;
}

/* --- HEADER NAV: templates use .cg-header__nav and .cg-header__brand --- */
.cg-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.cg-header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--cg-dark-70);
  transition: color .15s;
}
.cg-header__nav a:hover {
  color: var(--cg-dark);
}
.cg-header__brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--cg-dark);
}
.cg-header__brand span {
  font-weight: 400;
}

/* --- FOOTER: templates use .cg-footer__brand, .cg-footer__desc, .cg-footer__location --- */
.cg-footer__logo { display: inline-block; margin-bottom: 12px; }
.cg-footer__logo-img {
  display: block;
  height: auto;
  max-height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.cg-footer__brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--cg-white);
  margin-bottom: 12px;
}
.cg-footer__brand span {
  font-weight: 400;
}
.cg-footer__desc {
  font-size: 14px;
  line-height: 1.6;
}
.cg-footer__location {
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  margin-top: 8px;
}

/* --- STICKY CTA BUTTON: templates use .cg-sticky-cta__btn --- */
.cg-sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border-radius: var(--cg-radius-sm);
  font-family: var(--cg-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: all .15s;
  text-decoration: none;
  background: var(--cg-green);
  color: var(--cg-white);
}
.cg-sticky-cta__btn:hover {
  background: var(--cg-green-dark);
}

/* --- LEARN BRIDGE: templates use .cg-learn-bridge --- */
.cg-learn-bridge {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cg-gray-200);
}
.cg-learn-bridge p {
  font-size: 16px;
  color: var(--cg-dark-70);
}
.cg-learn-bridge a {
  color: var(--cg-green);
  font-weight: 600;
}

/* --- VIDEO EMBED: templates use .cg-video-embed --- */
.cg-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
}
.cg-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- UTILITY: .cg-hidden --- */
.cg-hidden {
  display: none !important;
}

/* --- SPOKE GRID: templates use .cg-spoke-grid inside .cg-card-grid contexts too --- */
/* (Already styled above; no additional alias needed) */

/* ── 35. RESPONSIVE ───────────────────────────────────────── */

/* -- 1024px -- */
@media (max-width: 1024px) {
  .cg-content-layout {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
  }
}

/* -- 768px -- */
@media (max-width: 768px) {
  /* Header — hide desktop nav, show hamburger on mobile */
  .cg-nav,
  .cg-header__nav { display: none; }
  .cg-header__toggle { display: flex; }
  .cg-header__cta { display: none; }
  .cg-header { position: relative; } /* for drawer absolute positioning */

  /* Hub hero */
  .cg-hero--hub .cg-hero__title,
  .cg-hero .cg-hero__title,
  .cg-hero__title {
    font-size: 32px;
  }

  /* Spoke hero (both naming conventions) */
  .cg-hero--spoke .cg-hero__grid,
  .cg-hero-spoke__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cg-hero--spoke .cg-hero__copy,
  .cg-hero-spoke__copy {
    text-align: center;
  }
  .cg-hero--spoke .cg-hero__title,
  .cg-hero-spoke__title {
    font-size: 32px;
    text-align: center;
  }
  .cg-hero--spoke .cg-hero__subtitle,
  .cg-hero-spoke__sub {
    margin-inline: auto;
    text-align: center;
  }
  .cg-hero--spoke .cg-hero__actions,
  .cg-hero-spoke__ctas {
    justify-content: center;
  }

  /* Stats bar */
  .cg-stats-bar__inner,
  .cg-stats-bar__card {
    flex-direction: column;
    gap: 24px;
  }

  /* Grids → 2 col */
  .cg-spoke-grid,
  .cg-card-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-benefit-grid,
  .cg-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-sibling-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-related-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-steps { grid-template-columns: repeat(2, 1fr); }
  .cg-steps--four { grid-template-columns: repeat(2, 1fr); }
  .cg-steps--four .cg-step:nth-child(2n)::after { display: none; }
  .cg-why,
  .cg-why-grid { grid-template-columns: repeat(2, 1fr); }

  /* Comparison split → stack */
  .cg-comparison-split {
    grid-template-columns: 1fr;
  }
  .cg-comparison-split__col--exposed {
    border-left: none;
    border-top: 1px solid var(--cg-gray-200);
  }

  /* Content layout — stack TOC */
  .cg-content-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cg-toc,
  .cg-content-toc {
    position: static;
    border-bottom: 1px solid var(--cg-gray-100);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }
  .cg-toc__list,
  .cg-content-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    border-left: none;
  }
  .cg-toc__list li a,
  .cg-content-toc ul li a {
    padding: 4px 10px;
    font-size: 13px;
    background: var(--cg-gray-50);
    border-radius: var(--cg-radius-pill);
    border-left: none;
  }
  .cg-toc__list li.is-active::before,
  .cg-content-toc ul li.is-active::before { display: none; }
  .cg-toc__list li.is-active a,
  .cg-toc__list li a.active,
  .cg-content-toc ul li.is-active a,
  .cg-content-toc ul li a.active {
    background: var(--cg-green-light);
    color: var(--cg-green);
    border-left: none;
  }

  /* Mid-CTA inline */
  .cg-mid-cta--inline {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
  }

  /* Comparison table */
  .cg-comparison__cell {
    padding: .65rem 1rem;
    font-size: 13px;
  }

  /* Form */
  .cg-form__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .cg-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Sticky mobile CTA — removed 2026-04-16 */
}

/* -- 640px -- */
@media (max-width: 640px) {
  .cg-spoke-grid,
  .cg-card-grid { grid-template-columns: 1fr; }
  .cg-benefit-grid,
  .cg-benefits-grid { grid-template-columns: 1fr; }
  .cg-sibling-grid { grid-template-columns: 1fr; }
  .cg-related-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-steps,
  .cg-steps--four { grid-template-columns: 1fr; }
  .cg-steps--four .cg-step::after { display: none !important; }

  .cg-hero__title {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .cg-comparison__header,
  .cg-comparison__row {
    grid-template-columns: 1fr;
  }
  .cg-comparison__header-col--exposed {
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .cg-form {
    padding: 1.5rem;
  }

  .cg-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* -- 480px -- */
@media (max-width: 480px) {
  :root {
    --cg-section-py: 48px;
  }

  .cg-stats-bar__inner,
  .cg-stats-bar__card {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  .cg-stats-bar__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-align: left;
  }

  .cg-related-grid { grid-template-columns: 1fr; }
  .cg-why,
  .cg-why-grid { grid-template-columns: 1fr; }

  .cg-hero--hub,
  .cg-hero { padding: 48px 0 64px; }
  .cg-hero__actions,
  .cg-hero__ctas {
    flex-direction: column;
  }
  .cg-hero__actions .cg-btn,
  .cg-hero__ctas .cg-btn {
    width: 100%;
    justify-content: center;
  }

  .cg-testimonial__quote { font-size: 18px; }

  .cg-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ── 35. PRINT ────────────────────────────────────────────── */
@media print {
  .cg-header,
  .cg-footer,
  .cg-sticky-cta,
  .cg-mid-cta,
  .cg-final-cta,
  .cg-form,
  .cg-hero__actions,
  .cg-hero__ctas,
  .cg-hero-spoke__ctas,
  .cg-grid-toggle-wrap {
    display: none !important;
  }
  .cg-section { padding: 24px 0; }
  .cg-hero,
  .cg-hero--hub,
  .cg-hero--spoke,
  .cg-hero-spoke,
  .cg-hero--simple {
    background: none !important;
    padding: 16px 0;
  }
  .cg-hero::after,
  .cg-hero--hub::after,
  .cg-hero--spoke::after,
  .cg-hero-spoke::after { display: none; }
  .cg-content a { color: var(--cg-dark); text-decoration: underline; }
  .cg-content a::after { content: ' (' attr(href) ')'; font-size: .75em; color: var(--cg-dark-50); }
  body { font-size: 12pt; line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════
   CONVERSION COMPONENTS — Added from clicksgeek.com design
   ═══════════════════════════════════════════════════════════════ */

/* ── STAR RATING ──────────────────────────────────────────────── */
.cg-star-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cg-star-rating__google {
  width: 24px;
  height: 24px;
}
.cg-star-rating__stars {
  display: flex;
  gap: 2px;
}
.cg-star-rating__stars svg {
  width: 20px;
  height: 20px;
}
.cg-star-rating__score {
  font-size: 16px;
  font-weight: 800;
  color: var(--cg-dark);
}
.cg-star-rating__count {
  font-size: 14px;
  color: var(--cg-dark-50);
}

/* ── VIDEO TESTIMONIALS CAROUSEL ──────────────────────────────── */
.cg-video-testimonials {
  background: var(--cg-green);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cg-video-testimonials::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  pointer-events: none;
}
.cg-video-testimonials::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  pointer-events: none;
}
.cg-video-testimonials__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-white);
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}
.cg-video-testimonials__title .cg-highlight {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cg-video-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.cg-video-card {
  text-align: center;
  cursor: pointer;
}
.cg-video-card__thumb {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255,255,255,.1);
  border-radius: var(--cg-radius);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  border: 2px solid rgba(255,255,255,.2);
}
.cg-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: var(--cg-green);
  border: 3px solid var(--cg-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
.cg-video-card:hover .cg-video-card__play {
  transform: translate(-50%, -50%) scale(1.1);
}
.cg-video-card__play svg {
  width: 20px;
  height: 20px;
  fill: var(--cg-white);
  margin-left: 3px;
}
.cg-video-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--cg-white);
}
.cg-video-card__company {
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.cg-video-testimonials__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  color: var(--cg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .2s;
}
.cg-video-testimonials__nav:hover { background: rgba(255,255,255,.3); }
.cg-video-testimonials__nav--prev { left: 24px; }
.cg-video-testimonials__nav--next { right: 24px; }

/* ── TESTIMONIAL PRAISE GRID ─────────────────────────────────── */
.cg-testimonial-praise {
  padding: 80px 0;
}
.cg-testimonial-praise__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 40px;
}
.cg-text-green { color: var(--cg-green); }
.cg-testimonial-praise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cg-praise-card {
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  padding: 28px;
}
.cg-praise-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 8px;
}
.cg-badge-5star {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cg-green);
  color: var(--cg-white);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--cg-radius-pill);
  margin-bottom: 12px;
}
.cg-praise-card__quote {
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.65;
}

/* ── NAMED QUOTE ──────────────────────────────────────────────── */
.cg-named-quote {
  text-align: center;
  padding: 48px 0;
  max-width: 750px;
  margin: 0 auto;
}
.cg-named-quote__text {
  font-size: 18px;
  font-style: italic;
  color: var(--cg-dark-70);
  line-height: 1.7;
  margin-bottom: 24px;
}
.cg-named-quote__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cg-named-quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.cg-named-quote__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cg-dark);
}
.cg-named-quote__role {
  font-size: 13px;
  color: var(--cg-green);
  font-weight: 600;
}

/* ── DASHBOARD SECTION (CRO SPLIT) ───────────────────────────── */
.cg-dashboard-section {
  background: var(--cg-gray-50);
  padding: 80px 0;
}
.cg-dashboard-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cg-dashboard-section__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 8px;
}
.cg-dashboard-section__subtitle {
  font-size: 28px;
  font-weight: 700;
  color: var(--cg-green);
  margin-bottom: 20px;
}
.cg-dashboard-section__desc {
  font-size: 16px;
  color: var(--cg-dark-70);
  line-height: 1.7;
  margin-bottom: 32px;
}
.cg-browser-frame {
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  box-shadow: 0 12px 48px rgba(0,0,0,.1);
  overflow: hidden;
  position: relative;
}
.cg-browser-frame__bar {
  background: var(--cg-dark);
  padding: 10px 16px;
  display: flex;
  gap: 6px;
}
.cg-browser-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cg-browser-frame__dot--red { background: #FF5F57; }
.cg-browser-frame__dot--yellow { background: #FEBC2E; }
.cg-browser-frame__dot--green { background: #28C840; }
.cg-browser-frame__content {
  padding: 0;
}
.cg-browser-frame__content img {
  width: 100%;
  display: block;
}

/* ── SERVICE FEATURE CARDS ────────────────────────────────────── */
.cg-service-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cg-feature-card {
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  padding: 32px;
  transition: all .2s;
}
.cg-feature-card:hover {
  border-color: var(--cg-green);
  box-shadow: var(--cg-shadow-green);
}
.cg-feature-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}
.cg-feature-card__icon svg {
  width: 100%;
  height: 100%;
}
.cg-feature-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 12px;
  line-height: 1.3;
}
.cg-feature-card__desc {
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.65;
}

/* ── PROOF CARDS WITH SCREENSHOTS ─────────────────────────────── */
.cg-proof-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cg-proof-card-v2 {
  background: var(--cg-white);
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius);
  overflow: hidden;
  transition: all .2s;
}
.cg-proof-card-v2:hover {
  box-shadow: var(--cg-shadow-lg);
}
.cg-proof-card-v2__body {
  padding: 28px;
}
.cg-proof-card-v2__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 12px;
}
.cg-proof-card-v2__desc {
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.65;
}
.cg-proof-card-v2__image {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--cg-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--cg-gray-100);
  overflow: hidden;
}
.cg-proof-card-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-proof-card-v2__image--placeholder {
  font-size: 13px;
  color: var(--cg-dark-50);
  font-weight: 500;
}
.cg-team-avatars {
  display: flex;
  margin-top: 16px;
}
.cg-team-avatars img,
.cg-team-avatars__placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--cg-white);
  margin-left: -8px;
  object-fit: cover;
}
.cg-team-avatars img:first-child,
.cg-team-avatars__placeholder:first-child {
  margin-left: 0;
}
.cg-team-avatars__placeholder {
  background: var(--cg-gray-200);
}

/* ── WHAT TO EXPECT SPLIT ─────────────────────────────────────── */
.cg-what-to-expect {
  background: var(--cg-gray-50);
  padding: 80px 0;
}
.cg-what-to-expect__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cg-what-to-expect__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}
.cg-what-to-expect__desc {
  font-size: 16px;
  color: var(--cg-green);
  line-height: 1.7;
  margin-bottom: 24px;
}
.cg-what-to-expect__image {
  max-width: 400px;
  margin: 0 auto;
}
.cg-what-to-expect__image img {
  width: 100%;
}

/* ── CONVERSION HEADLINE ──────────────────────────────────────── */
.cg-conversion-headline {
  text-align: center;
  padding: 64px 0;
}
.cg-conversion-headline__text {
  font-size: 36px;
  font-weight: 800;
  color: var(--cg-dark);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.25;
  letter-spacing: -.02em;
}

/* ── WHY SECTION V2 (SPLIT LAYOUT) ───────────────────────────── */
.cg-why-section {
  background: var(--cg-gray-50);
  padding: 80px 0;
}
.cg-why-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.cg-why-section__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-green);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.cg-why-section__title {
  font-size: 42px;
  font-weight: 800;
  color: var(--cg-dark);
  line-height: 1.1;
  margin-bottom: 16px;
}
.cg-why-section__desc {
  font-size: 16px;
  color: var(--cg-dark-70);
  line-height: 1.7;
  margin-bottom: 24px;
}
.cg-why-section__points {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cg-why-point__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 8px;
}
.cg-why-point__desc {
  font-size: 14px;
  color: var(--cg-dark-70);
  line-height: 1.65;
}

/* ── CONVERSION COMPONENTS: RESPONSIVE ────────────────────────── */
@media (max-width: 768px) {
  .cg-video-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .cg-video-testimonials__nav { display: none; }
  .cg-testimonial-praise__grid {
    grid-template-columns: 1fr;
  }
  .cg-dashboard-section__grid,
  .cg-what-to-expect__grid,
  .cg-why-section__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cg-service-features__grid,
  .cg-proof-cards__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cg-video-testimonials__title,
  .cg-dashboard-section__title,
  .cg-what-to-expect__title,
  .cg-why-section__title,
  .cg-conversion-headline__text,
  .cg-testimonial-praise__title {
    font-size: 28px;
  }
  .cg-dashboard-section__subtitle { font-size: 22px; }
}

@media (max-width: 480px) {
  .cg-video-testimonials__grid {
    grid-template-columns: 1fr;
  }
  .cg-video-testimonials { padding: 48px 0; }
  .cg-testimonial-praise,
  .cg-dashboard-section,
  .cg-what-to-expect,
  .cg-why-section { padding: 48px 0; }
}


/* ═══════════════════════════════════════════════════════
 * PRIORITY 1 DESIGN UPGRADES (2026-04-10)
 * ═══════════════════════════════════════════════════════ */

/* --- E. Section label green dot accent --- */
.cg-section__label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cg-green);
  margin-right: 8px;
  vertical-align: middle;
}

/* --- A. Trust signal strip --- */
.cg-trust-strip {
  background: var(--cg-gray-50);
  padding: 16px 0;
  border-bottom: 1px solid var(--cg-gray-200);
}
.cg-trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.cg-trust-strip__badge--google img {
  display: block;
  height: 140px;
  width: auto;
}
.cg-trust-strip__badge--microsoft img {
  display: block;
  height: 44px;
  width: auto;
  opacity: 0.8;
}
.cg-trust-strip__divider {
  width: 1px;
  height: 60px;
  background: var(--cg-gray-200);
}
.cg-trust-strip__rating {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: var(--cg-dark);
}
.cg-trust-strip__stars {
  display: flex;
  gap: 3px;
}
.cg-trust-strip__stars svg {
  width: 22px;
  height: 22px;
}
.cg-trust-strip__rating-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cg-trust-strip__rating-text strong {
  font-size: 18px;
}
.cg-trust-strip__count {
  font-size: 14px;
  color: rgba(16, 24, 40, 0.55);
  font-weight: 400;
}

/* --- B. Review carousel (9 cards, 3 visible, scroll) --- */
.cg-review-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cg-review-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
}
.cg-review-carousel__track::-webkit-scrollbar { display: none; }
.cg-review-carousel__track > .cg-testimonial-card {
  flex: 0 0 calc(33.333% - 14px);
  scroll-snap-align: start;
}
.cg-review-carousel__arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(228, 231, 236, 0.6);
  background: var(--cg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--cg-duration) var(--cg-ease);
  color: var(--cg-dark);
  box-shadow: var(--cg-shadow-sm);
}
.cg-review-carousel__arrow:hover {
  border-color: var(--cg-green);
  color: var(--cg-green);
  box-shadow: var(--cg-shadow-green);
  transform: scale(1.05);
}
.cg-review-carousel__arrow:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}
.cg-testimonial-card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, 0.5);
  border-radius: var(--cg-radius-lg);
  padding: 28px;
  box-shadow: var(--cg-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--cg-duration) var(--cg-ease), transform var(--cg-duration) var(--cg-ease);
}
.cg-testimonial-card:hover {
  box-shadow: var(--cg-shadow-lg);
  transform: translateY(-1px);
}
.cg-testimonial-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cg-testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cg-green);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cg-testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cg-testimonial-card__meta strong {
  font-size: 15px;
  color: var(--cg-dark);
}
.cg-testimonial-card__meta span {
  font-size: 13px;
  color: rgba(16, 24, 40, 0.55);
}
.cg-testimonial-card__stars {
  display: flex;
  gap: 2px;
}
.cg-testimonial-card__quote {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(16, 24, 40, 0.8);
  margin: 0;
}

/* --- C. Team strip --- */
.cg-team-strip {
  text-align: center;
}
.cg-team-strip__header {
  max-width: 600px;
  margin: 0 auto 40px;
}
.cg-team-strip__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--cg-dark);
  margin: 0 0 12px;
}
.cg-team-strip__sub {
  font-size: 16px;
  color: rgba(16, 24, 40, 0.7);
  margin: 0;
}
.cg-team-strip__grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.cg-team-strip__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cg-team-strip__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cg-green);
}
.cg-team-strip__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--cg-dark);
}
.cg-team-strip__role {
  font-size: 13px;
  color: rgba(16, 24, 40, 0.6);
}

/* --- D. Enhanced mid-CTA trust line --- */
.cg-mid-cta__trust {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════
 * DESIGN POLISH PASS (2026-04-10 round 2)
 * ═══════════════════════════════════════════════════════ */

/* --- Trust strip: tight to hero, clear gap before stats --- */
.cg-trust-strip { padding: 16px 0; margin-bottom: 32px; }

/* --- Sibling grids: uniform cards, centered --- */
.cg-sibling-grid {
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}
.cg-sibling-card {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* When 3 or fewer items, center the row */
.cg-sibling-grid--few {
  grid-template-columns: repeat(3, minmax(200px, 280px));
  justify-content: center;
}

/* --- Show more toggle for sibling grids --- */
.cg-sibling-grid--collapsed .cg-sibling-card:nth-child(n+9) { display: none; }
.cg-sibling-grid--collapsed.is-expanded .cg-sibling-card { display: block; }
.cg-show-more-btn {
  display: block;
  margin: 24px auto 0;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cg-green);
  background: transparent;
  border: 1.5px solid var(--cg-green);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.cg-show-more-btn:hover {
  background: var(--cg-green);
  color: #fff;
}

/* --- Industry Data / Economics: wider title container --- */
.cg-section .cg-container--narrow .cg-section__head {
  max-width: 100%;
}

/* --- Comparison table: center and widen title --- */
.cg-compare { margin: 0 auto; }

/* --- Process steps: center the last row when 5 items (3+2) --- */
.cg-steps {
  justify-content: center;
  justify-items: center;
}

/* --- Benefits grid: ensure even cards --- */
.cg-benefits-grid {
  justify-content: center;
}

/* --- Why ClicksGeek section overhaul --- */
.cg-why-section__grid {
  gap: 40px;
}
.cg-why-section__title {
  font-size: 34px;
}
.cg-why-section__point {
  background: var(--cg-white);
  padding: 24px;
  border-radius: var(--cg-radius);
  border: 1px solid var(--cg-gray-200);
  margin-bottom: 16px;
}
.cg-why-section__point h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

/* --- Breadcrumbs: clean up spacing and style --- */
.cg-breadcrumbs {
  padding: 12px 0;
  font-size: 13px;
  opacity: 0.65;
}
.cg-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}
.cg-breadcrumbs li {
  display: flex;
  align-items: center;
}
.cg-breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  color: rgba(16, 24, 40, 0.35);
}

/* --- Spoke grid (3-column): center when partial row --- */
.cg-spoke-grid {
  justify-content: center;
  justify-items: stretch;
}

/* ============================================================
   TASTE-SKILL PREMIUM LAYER
   Surface texture, typography polish, enhanced interactions
   ============================================================ */

/* ── GRAIN / NOISE OVERLAY (taste-skill: surface texture) ──── */
/* Subtle fixed overlay breaks digital flatness on section backgrounds */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── ENHANCED TYPOGRAPHY (taste-skill: weight hierarchy) ────── */
/* Use 500/600 weights for sub-hierarchy, not just 400/700 */
.cg-section__label {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.cg-section__title {
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: 16px;
}
.cg-section__sub {
  max-width: 60ch;  /* taste-skill: cap line width for readability */
  letter-spacing: -0.005em;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  color: var(--cg-dark-50);
  line-height: 1.65;
}

/* Body content — taste-skill: 65ch max for readability */
.cg-content p,
.cg-content li {
  max-width: 65ch;
}

/* Stats bar values — taste-skill: tabular figures for data */
.cg-stats-bar__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* ── EYEBROW PILL BADGES (taste-skill: microscopic pill badges) */
.cg-section__label {
  display: inline-block;
  background: var(--cg-green-muted);
  padding: 5px 14px;
  border-radius: var(--cg-radius-pill);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--cg-green-dark);
}

/* ── LINK HOVER ENHANCEMENTS ──────────────────────────────── */
.cg-content a:not(.cg-btn) {
  transition: color var(--cg-duration-fast) var(--cg-ease), text-decoration var(--cg-duration-fast);
}
.cg-content a:not(.cg-btn):hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ── FAQ TOGGLE — premium transition ─────────────────────── */
.cg-faq__toggle {
  transition: all var(--cg-duration) var(--cg-ease-bounce);
}

/* ── WHY SECTION POINT CARDS — premium treatment ─────────── */
.cg-why-section__point {
  background: var(--cg-white);
  padding: 28px;
  border-radius: var(--cg-radius-lg);
  border: 1px solid rgba(228, 231, 236, 0.5);
  margin-bottom: 16px;
  box-shadow: var(--cg-shadow-sm);
  transition: all var(--cg-duration) var(--cg-ease);
}
.cg-why-section__point:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-1px);
}

/* ── SHOW MORE BUTTON — premium ──────────────────────────── */
.cg-show-more-btn {
  transition: all var(--cg-duration) var(--cg-ease);
  border-radius: var(--cg-radius-sm);
}
.cg-show-more-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

/* ── PROOF SECTION CARD — premium shadows ────────────────── */
.cg-proof-card {
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow);
  border-color: rgba(228, 231, 236, 0.5);
}

/* ── TEAM STRIP PHOTOS — premium hover ───────────────────── */
.cg-team-strip__photo {
  transition: transform var(--cg-duration) var(--cg-ease-bounce);
}
.cg-team-strip__member:hover .cg-team-strip__photo {
  transform: scale(1.06);
}

/* ── SMOOTH ALL CARD TRANSITIONS GLOBALLY ────────────────── */
.cg-spoke-card__link::after {
  transition: transform var(--cg-duration-fast) var(--cg-ease);
}

/* ── SECTION DIVIDER — upgraded ──────────────────────────── */
.cg-content-divider__dot {
  transition: transform var(--cg-duration) var(--cg-ease);
}
.cg-content-divider:hover .cg-content-divider__dot {
  transform: scale(1.4);
}

/* ── PROCESS STEPS — premium treatment ───────────────────── */
.cg-step {
  transition: all var(--cg-duration) var(--cg-ease);
  border-radius: var(--cg-radius-lg);
}
.cg-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--cg-shadow);
}

/* --- Mobile adjustments for new components --- */
@media (max-width: 768px) {
  .cg-trust-strip__inner { gap: 24px; }
  .cg-trust-strip__badge--google img { height: 100px; }
  .cg-trust-strip__badge--microsoft img { height: 32px; }
  .cg-trust-strip__divider { display: none; }
  .cg-review-carousel__track > .cg-testimonial-card { flex: 0 0 85%; }
  .cg-review-carousel__arrow { display: none; }
  .cg-team-strip__grid { gap: 32px; flex-wrap: wrap; }
  .cg-team-strip__photo { width: 80px; height: 80px; }
  .cg-team-strip__title { font-size: 22px; }
  .cg-sibling-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-steps { grid-template-columns: repeat(2, 1fr); }
  .cg-why-section__grid { grid-template-columns: 1fr; }
}
/* ============================================================
   ClicksGeek Spoke Redesign — Additional CSS Components
   Append to main.css after existing rules.
   Uses existing :root custom properties from main.css.
   ============================================================ */


/* ── STICKY CTA BAR — REMOVED 2026-04-16 ───────────────────────
   Block B (the dark redesign top bar). Element no longer rendered
   anywhere; helpers.php's cg_render_sticky_cta() is stubbed. */


/* ── REVIEW MARQUEE ──────────────────────────────────────────── */

@keyframes cg-scroll-reviews {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.cg-review-marquee {
  overflow: hidden;
  position: relative;
  padding: 32px 0;
}

.cg-review-marquee::before,
.cg-review-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.cg-review-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--cg-white), transparent);
}

.cg-review-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--cg-white), transparent);
}

.cg-review-marquee--dark::before {
  background: linear-gradient(to right, var(--cg-dark), transparent);
}

.cg-review-marquee--dark::after {
  background: linear-gradient(to left, var(--cg-dark), transparent);
}

/* Mobile: shrink the edge fades so they don't cover the card content
   on narrow viewports. Was 80px each side (= 160px total of a ~390px
   screen). Now 24px each. */
@media (max-width: 640px) {
  .cg-review-marquee::before,
  .cg-review-marquee::after { width: 24px; }
}

.cg-review-marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: cg-scroll-reviews 40s linear infinite;
  will-change: transform;
}

/* Pause on hover — desktop only. On touch devices the "hover" state
   gets stuck after a tap (no mouseleave equivalent on mobile), which
   permanently pauses the marquee. `@media (hover: hover)` targets
   devices with real mouse pointers. */
@media (hover: hover) and (pointer: fine) {
  .cg-review-marquee:hover .cg-review-marquee__track {
    animation-play-state: paused;
  }
}


/* ── REVIEW CARD ─────────────────────────────────────────────── */

.cg-review-card {
  flex-shrink: 0;
  width: 380px;
  background: var(--cg-white);
  border: 1px solid var(--cg-border-lt);
  border-radius: var(--cg-radius-lg);
  padding: 28px;
  box-shadow: var(--cg-shadow-sm);
  transition: transform var(--cg-duration) var(--cg-ease),
              box-shadow var(--cg-duration) var(--cg-ease);
  will-change: transform;
}

.cg-review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cg-shadow-lg);
}

.cg-review-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.cg-review-card__stars svg {
  width: 18px;
  height: 18px;
  fill: #f59e0b;
  stroke: none;
}

.cg-review-card__quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--cg-dark-70);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cg-review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cg-review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cg-review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.cg-review-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cg-review-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cg-dark);
  line-height: 1.3;
}

.cg-review-card__role {
  font-size: 12px;
  color: var(--cg-dark-50);
}

.cg-review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--cg-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cg-review-card {
    width: 300px;
    padding: 22px;
  }
  .cg-review-card__quote {
    font-size: 14px;
  }
}


/* ── PROCESS TIMELINE ────────────────────────────────────────── */

.cg-process-timeline {
  position: relative;
  padding-left: 88px;
}

.cg-process-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 27px;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--cg-green),
    var(--cg-green) 80%,
    transparent 100%
  );
}

.cg-process-timeline__step {
  position: relative;
  padding-bottom: 48px;
}

.cg-process-timeline__step:last-child {
  padding-bottom: 0;
}

.cg-process-timeline__number {
  position: absolute;
  left: -88px;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cg-green);
  color: var(--cg-white);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--cg-white),
              0 0 0 8px var(--cg-green-muted),
              0 8px 24px -6px rgba(29,200,236, .2);
  z-index: 1;
}

.cg-process-timeline__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 8px;
  padding-top: 14px;
}

.cg-process-timeline__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--cg-dark-70);
  max-width: 620px;
}

@media (max-width: 768px) {
  .cg-process-timeline {
    padding-left: 64px;
  }
  .cg-process-timeline::before {
    left: 19px;
  }
  .cg-process-timeline__number {
    left: -64px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    box-shadow: 0 0 0 4px var(--cg-white),
                0 0 0 6px var(--cg-green-muted),
                0 6px 18px -4px rgba(29,200,236, .2);
  }
  .cg-process-timeline__title {
    font-size: 17px;
    padding-top: 8px;
  }
  .cg-process-timeline__desc {
    font-size: 14px;
  }
}


/* ── COMPARISON COLUMNS V2 ───────────────────────────────────── */

.cg-comparison-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.cg-comparison-v2__col {
  border-radius: var(--cg-radius-xl);
  padding: 36px 32px;
  border: 1.5px solid var(--cg-border);
  transition: box-shadow var(--cg-duration) var(--cg-ease);
}

.cg-comparison-v2__col--cg {
  border-color: var(--cg-green);
  box-shadow: var(--cg-shadow-green);
}

.cg-comparison-v2__col--other {
  border-color: var(--cg-gray-200);
  box-shadow: var(--cg-shadow-sm);
}

.cg-comparison-v2__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: var(--cg-radius-pill);
  margin-bottom: 16px;
}

.cg-comparison-v2__col--cg .cg-comparison-v2__badge {
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
}

.cg-comparison-v2__col--other .cg-comparison-v2__badge {
  background: var(--cg-gray-100);
  color: var(--cg-dark-50);
}

.cg-comparison-v2__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 20px;
}

.cg-comparison-v2__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cg-comparison-v2__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cg-dark-70);
}

.cg-comparison-v2__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.cg-comparison-v2__icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.cg-comparison-v2__col--cg .cg-comparison-v2__icon {
  background: var(--cg-green-light);
  color: var(--cg-green);
}

.cg-comparison-v2__col--cg .cg-comparison-v2__icon svg {
  stroke: var(--cg-green);
}

.cg-comparison-v2__col--other .cg-comparison-v2__icon {
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
}

.cg-comparison-v2__col--other .cg-comparison-v2__icon svg {
  stroke: #ef4444;
}

@media (max-width: 768px) {
  .cg-comparison-v2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cg-comparison-v2__col {
    padding: 28px 24px;
  }
  .cg-comparison-v2__title {
    font-size: 19px;
  }
}


/* ── DARK FINAL CTA V2 ──────────────────────────────────────── */

.cg-final-cta-v2 {
  background: linear-gradient(160deg, #101828 0%, #0d1117 100%);
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  text-align: center;
}

.cg-final-cta-v2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(29,200,236, .10) 0%, transparent 70%);
  pointer-events: none;
}

.cg-final-cta-v2__inner {
  position: relative;
  z-index: 1;
  max-width: var(--cg-max-narrow);
  margin: 0 auto;
  padding: 0 var(--cg-gutter);
}

.cg-final-cta-v2__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cg-green);
  margin-bottom: 20px;
}

.cg-final-cta-v2__title {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  color: var(--cg-white);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.cg-final-cta-v2__desc {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cg-final-cta-v2__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cg-final-cta-v2 .cg-btn--outline {
  border-color: rgba(255, 255, 255, .2);
  color: var(--cg-white);
}

.cg-final-cta-v2 .cg-btn--outline:hover {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
}

@media (max-width: 768px) {
  .cg-final-cta-v2 {
    padding: 64px 0;
  }
  .cg-final-cta-v2__desc {
    font-size: 15px;
  }
  .cg-final-cta-v2__actions {
    flex-direction: column;
    gap: 10px;
  }
  .cg-final-cta-v2__actions .cg-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── SPLIT LEAD FORM V2 ─────────────────────────────────────── */

.cg-form-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.cg-form-v2__info {
  padding-right: 24px;
}

.cg-form-v2__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cg-green);
  margin-bottom: 16px;
}

.cg-form-v2__heading {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--cg-dark);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.cg-form-v2__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cg-dark-70);
  margin-bottom: 28px;
}

.cg-form-v2__guarantees {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cg-form-v2__guarantee {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--cg-dark);
}

.cg-form-v2__guarantee-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cg-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cg-form-v2__guarantee-icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--cg-green);
  stroke-width: 2.5;
  fill: none;
}

.cg-form-v2__card {
  background: var(--cg-white);
  border: 1px solid rgba(228, 231, 236, .5);
  border-radius: var(--cg-radius-xl);
  padding: 36px 32px;
  box-shadow: var(--cg-shadow-lg);
}

.cg-form-v2__card-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--cg-dark);
  margin-bottom: 6px;
  text-align: center;
}

.cg-form-v2__card-sub {
  font-size: 14px;
  color: var(--cg-dark-50);
  text-align: center;
  margin-bottom: 24px;
}

.cg-form-v2__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cg-form-v2__field--full {
  grid-column: 1 / -1;
}

.cg-form-v2__input,
.cg-form-v2__select,
.cg-form-v2__textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--cg-gray-200);
  border-radius: var(--cg-radius-sm);
  color: var(--cg-dark);
  background: var(--cg-white);
  transition: border-color .15s, box-shadow .15s;
}

.cg-form-v2__input::placeholder,
.cg-form-v2__textarea::placeholder {
  color: var(--cg-dark-50);
}

.cg-form-v2__input:focus,
.cg-form-v2__select:focus,
.cg-form-v2__textarea:focus {
  outline: none;
  border-color: var(--cg-green);
  box-shadow: 0 0 0 3px rgba(29,200,236, .12);
}

.cg-form-v2__textarea {
  min-height: 100px;
  resize: vertical;
}

.cg-form-v2__submit {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .cg-form-v2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cg-form-v2__info {
    padding-right: 0;
    text-align: center;
  }
  .cg-form-v2__guarantees {
    align-items: center;
  }
  .cg-form-v2__card {
    padding: 28px 22px;
  }
  .cg-form-v2__fields {
    grid-template-columns: 1fr;
  }
}


/* ── CONTENT COLLAPSED ───────────────────────────────────────── */

.cg-content-collapsed {
  position: relative;
  max-height: 480px;
  overflow: hidden;
  transition: max-height 0.6s var(--cg-ease);
}

.cg-content-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--cg-white));
  pointer-events: none;
  transition: opacity var(--cg-duration) var(--cg-ease);
}

.cg-content-collapsed.is-expanded {
  max-height: none;
}

.cg-content-collapsed.is-expanded::after {
  opacity: 0;
}

.cg-content-collapsed__toggle {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cg-green-dark);
  background: var(--cg-white);
  border: 1.5px solid var(--cg-green);
  border-radius: var(--cg-radius-pill);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(29,200,236, .12);
  transition: all var(--cg-duration) var(--cg-ease);
}

.cg-content-collapsed__toggle:hover {
  background: var(--cg-green-light);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,200,236, .16);
}

.cg-content-collapsed__toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  transition: transform var(--cg-duration) var(--cg-ease);
}

.cg-content-collapsed.is-expanded .cg-content-collapsed__toggle {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin: 24px auto 0;
  display: flex;
  width: fit-content;
}

.cg-content-collapsed.is-expanded .cg-content-collapsed__toggle svg {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .cg-content-collapsed {
    max-height: 360px;
  }
}


/* ── BENEFIT CARD FEATURED VARIANT ───────────────────────────── */

.cg-benefit-card--featured {
  grid-column: 1 / -1;
  background: var(--cg-dark);
  color: var(--cg-white);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 36px 40px;
  border-radius: var(--cg-radius-xl);
  border: none;
}

.cg-benefit-card--featured::after {
  display: none;
}

.cg-benefit-card--featured .cg-benefit-card__icon {
  background: rgba(29,200,236, .15);
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.cg-benefit-card--featured .cg-benefit-card__icon svg {
  width: 28px;
  height: 28px;
}

.cg-benefit-card--featured .cg-benefit-card__title {
  color: var(--cg-white);
  font-size: 20px;
  margin-bottom: 6px;
}

.cg-benefit-card--featured .cg-benefit-card__desc {
  color: rgba(255, 255, 255, .6);
  font-size: 15px;
}

.cg-benefit-card--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .3);
}

@media (max-width: 768px) {
  .cg-benefit-card--featured {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 24px;
  }
}


/* ── WHY SECTION DARK ────────────────────────────────────────── */

.cg-why-dark {
  background: var(--cg-dark);
  position: relative;
  overflow: hidden;
  padding: var(--cg-section-py) 0;
}

.cg-why-dark::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(29,200,236, .08) 0%, transparent 70%);
  pointer-events: none;
}

.cg-why-dark .cg-section-label {
  color: var(--cg-green);
}

.cg-why-dark .cg-section-title {
  color: var(--cg-white);
}

.cg-why-dark .cg-section-subtitle {
  color: rgba(255, 255, 255, .5);
}

.cg-why-dark__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cg-why-dark__card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--cg-radius-lg);
  padding: 28px 24px;
  transition: background var(--cg-duration) var(--cg-ease),
              border-color var(--cg-duration) var(--cg-ease),
              transform var(--cg-duration) var(--cg-ease);
  will-change: transform;
}

.cg-why-dark__card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  transform: translateY(-3px);
}

.cg-why-dark__card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cg-radius-sm);
  background: rgba(29,200,236, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.cg-why-dark__card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cg-green);
  fill: none;
  stroke-width: 2;
}

.cg-why-dark__card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--cg-white);
  margin-bottom: 8px;
}

.cg-why-dark__card-desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 768px) {
  .cg-why-dark__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cg-why-dark__card {
    padding: 22px 20px;
  }
}

/* ── HERO REDESIGN: Gradient bg, Dashboard mockup, Eyebrow, Inline trust ── */
.cg-hero-spoke {
  background: linear-gradient(135deg, #f8fffe 0%, #edf9f0 30%, #f9fafb 60%, #fff 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px;
}
.cg-hero-spoke::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(29,200,236,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cg-hero-spoke__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cg-green-muted);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cg-green-dark);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
}
.cg-hero-spoke__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cg-green);
  border-radius: 50%;
  animation: cg-pulse-dot 2s ease infinite;
}
@keyframes cg-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.3); }
}
.cg-hero-spoke__visual { position: relative; }
.cg-hero-spoke__trust {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  margin-top: 16px;
  border-top: 1px solid var(--cg-gray-200);
}
.cg-hero-spoke__trust-badge { height: 36px; opacity: .7; }
.cg-hero-spoke__trust-divider { width: 1px; height: 32px; background: var(--cg-gray-200); }
.cg-hero-spoke__trust-rating { display: flex; align-items: center; gap: 8px; }
.cg-hero-spoke__trust-stars { display: flex; gap: 2px; }
.cg-hero-spoke__trust-text { font-size: 13px; color: var(--cg-dark-50); }
.cg-hero-spoke__trust-text strong { color: var(--cg-dark); font-size: 14px; }

/* Dashboard Mockup */
.cg-hero-dashboard {
  background: var(--cg-white);
  border: 1px solid rgba(228,231,236,.5);
  border-radius: var(--cg-radius-xl);
  padding: 28px;
  box-shadow: var(--cg-shadow-lg), 0 0 0 1px rgba(228,231,236,.3);
  position: relative;
}
.cg-hero-dashboard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9);
  pointer-events: none;
}
.cg-hero-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cg-gray-100);
}
.cg-hero-dashboard__title { font-size: 14px; font-weight: 600; color: var(--cg-dark); }
.cg-hero-dashboard__live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-green);
}
.cg-hero-dashboard__live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cg-green);
  border-radius: 50%;
  animation: cg-pulse-dot 2s ease infinite;
}
.cg-hero-dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.cg-hero-dashboard__metric {
  background: var(--cg-gray-50);
  border-radius: var(--cg-radius-sm);
  padding: 18px;
  text-align: center;
}
.cg-hero-dashboard__metric-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cg-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.cg-hero-dashboard__metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cg-dark-50);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}
.cg-hero-dashboard__chart {
  background: var(--cg-gray-50);
  border-radius: var(--cg-radius-sm);
  padding: 20px;
  height: 140px;
  position: relative;
  overflow: hidden;
}
.cg-hero-dashboard__chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  padding-top: 20px;
}
.cg-hero-dashboard__chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--cg-green), rgba(29,200,236,.5));
  border-radius: 6px 6px 0 0;
  min-height: 12px;
}
.cg-hero-dashboard__chart-label {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cg-dark-50);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Floating accent card */
.cg-hero-floating-card {
  position: absolute;
  bottom: -20px;
  left: -30px;
  background: var(--cg-white);
  border: 1px solid rgba(228,231,236,.5);
  border-radius: var(--cg-radius);
  padding: 16px 20px;
  box-shadow: var(--cg-shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: cg-float 4s ease-in-out infinite;
}
@keyframes cg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.cg-hero-floating-card__icon {
  width: 40px;
  height: 40px;
  background: var(--cg-green-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hero-floating-card__icon svg { width: 20px; height: 20px; }
.cg-hero-floating-card__value { font-size: 20px; font-weight: 800; color: var(--cg-dark); }
.cg-hero-floating-card__label { font-size: 11px; color: var(--cg-dark-50); font-weight: 500; }

/* Content collapsed */
.cg-content-collapsed {
  position: relative;
  max-height: 600px;
  overflow: hidden;
  transition: max-height .6s var(--cg-ease);
}
.cg-content-collapsed.is-expanded {
  max-height: none;
}
.cg-content-expand {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 120px;
  background: linear-gradient(transparent, var(--cg-gray-50));
  z-index: 2;
}
.cg-content-collapsed.is-expanded .cg-content-expand {
  display: none;
}

@media (max-width: 768px) {
  .cg-hero-spoke__trust { flex-wrap: wrap; gap: 12px; }
  .cg-hero-dashboard__metrics { grid-template-columns: 1fr; }
  .cg-hero-floating-card { display: none; }
}

/* ── CLASS NAME FIXES — PHP output aliases ──────────────── */

/* Final CTA Dark — PHP outputs cg-final-cta-dark, CSS had cg-final-cta-v2 */
.cg-final-cta-dark {
  background: #0a0b0d;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cg-final-cta-dark::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(29,200,236,.08) 0%, transparent 60%);
  pointer-events: none;
}
.cg-final-cta-dark__headline {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -.03em;
}
.cg-final-cta-dark__sub {
  color: rgba(255,255,255,.65);
  font-size: 18px;
  max-width: 50ch;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.cg-final-cta-dark__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cg-final-cta-dark .cg-btn--outline {
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.cg-final-cta-dark .cg-btn--outline:hover {
  border-color: rgba(255,255,255,.5);
}
.cg-final-cta-dark__risk {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
}

/* Mid CTA v2 — green card with glow */
.cg-mid-cta-v2 {
  padding: 80px 0;
  text-align: center;
}
.cg-mid-cta-v2__inner {
  background: var(--cg-green);
  border-radius: var(--cg-radius-xl);
  padding: 64px 56px;
  box-shadow: 0 24px 56px -16px rgba(29,200,236,.25);
  position: relative;
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
}
.cg-mid-cta-v2__glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
  pointer-events: none;
}
.cg-mid-cta-v2__headline {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.cg-mid-cta-v2__sub {
  color: rgba(255,255,255,.85);
  font-size: 17px;
  margin-bottom: 32px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.cg-mid-cta-v2__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cg-mid-cta-v2 .cg-btn--white {
  background: #fff;
  color: var(--cg-dark);
}
.cg-mid-cta-v2 .cg-btn--dark {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.cg-mid-cta-v2 .cg-btn--dark:hover {
  background: rgba(255,255,255,.25);
}
.cg-mid-cta-v2__risk {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-top: 16px;
}

/* Lead form — uses existing .cg-form but wrap section gets split layout */
#lead-form .cg-form-v2__grid,
#lead-form .cg-form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 768px) {
  .cg-final-cta-dark { padding: 64px 0; }
  .cg-final-cta-dark__headline { font-size: 1.75rem; }
  .cg-mid-cta-v2__inner { padding: 40px 28px; }
  .cg-mid-cta-v2__headline { font-size: 24px; }
  #lead-form .cg-form-v2__grid,
  #lead-form .cg-form-split { grid-template-columns: 1fr; }
}

/* ── PROCESS TIMELINE FIX — PHP uses cg-process-step, CSS had cg-process-timeline__ ── */
.cg-process-step {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  position: relative;
}
.cg-process-step:last-child { padding-bottom: 0; }
.cg-process-step__number {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: var(--cg-green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 6px #fff, 0 4px 16px rgba(29,200,236,.2);
}
.cg-process-step__content { padding-top: 10px; }
.cg-process-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cg-dark);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.cg-process-step__desc {
  font-size: 15px;
  color: var(--cg-dark-50);
  line-height: 1.65;
  max-width: 55ch;
}

/* ── FINAL CTA DARK FIX — ensure gradient applies ── */
.cg-final-cta-dark {
  background: #0a0b0d !important;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cg-final-cta-dark::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(29,200,236,.08) 0%, transparent 60%);
  pointer-events: none;
}
.cg-final-cta-dark .cg-container { position: relative; z-index: 1; }
.cg-final-cta-dark__headline {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -.03em;
}
.cg-final-cta-dark__sub {
  color: rgba(255,255,255,.65);
  font-size: 18px;
  max-width: 50ch;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.cg-final-cta-dark__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cg-final-cta-dark .cg-btn--green {
  font-size: 17px;
  padding: 16px 32px;
}
.cg-final-cta-dark .cg-btn--outline {
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.cg-final-cta-dark .cg-btn--outline:hover {
  border-color: rgba(255,255,255,.5);
}
.cg-final-cta-dark__risk {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
}

@media (max-width: 768px) {
  .cg-process-step__number { width: 44px; height: 44px; min-width: 44px; font-size: 16px; }
  .cg-final-cta-dark { padding: 64px 0; }
}

/* ── WHY DARK FIXES — class name mismatches ──────────────── */
/* PHP uses .cg-section__title (BEM) but CSS had .cg-section-title (single dash) */
.cg-why-dark .cg-section__title {
  color: #fff !important;
}
.cg-why-dark .cg-section__label {
  background: rgba(29,200,236, .15) !important;
  color: var(--cg-green) !important;
}
.cg-why-dark .cg-section__sub,
.cg-why-dark .cg-section__subtitle {
  color: rgba(255, 255, 255, .55) !important;
}
/* PHP outputs .cg-why-dark__icon but CSS had .cg-why-dark__card-icon */
.cg-why-dark__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--cg-radius-sm);
  background: rgba(29,200,236, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.cg-why-dark__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cg-green);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Fix grid to 4 columns and increase padding */
.cg-why-dark {
  padding: 100px 0 !important;
}
.cg-why-dark__grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
.cg-why-dark__card {
  text-align: center;
}
.cg-why-dark__icon {
  margin: 0 auto 18px;
}
@media (max-width: 768px) {
  .cg-why-dark__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── BENEFITS GRID FIX — 5 cards in 3-col looks orphaned ── */
/* Make the grid handle 5 cards cleanly: last 2 center */
.cg-benefits-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  justify-items: center;
}

/* ── COMPARISON V2 FIX — match preview exactly ──────────── */
.cg-comparison-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

/* LEFT column — green border, green shadow */
.cg-comparison-v2__col--with {
  background: var(--cg-white);
  border: 2px solid var(--cg-green) !important;
  border-radius: var(--cg-radius-xl);
  padding: 40px;
  box-shadow: 0 12px 36px -8px rgba(29,200,236, .12) !important;
}

/* RIGHT column — gray, subtle */
.cg-comparison-v2__col--without {
  background: var(--cg-gray-50);
  border: 1px solid var(--cg-gray-200) !important;
  border-radius: var(--cg-radius-xl);
  padding: 40px;
  box-shadow: none !important;
}

/* Badges */
.cg-comparison-v2__badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}
.cg-comparison-v2__col--with .cg-comparison-v2__badge {
  background: var(--cg-green) !important;
  color: #fff !important;
}
.cg-comparison-v2__col--without .cg-comparison-v2__badge {
  background: var(--cg-gray-200) !important;
  color: var(--cg-dark-50) !important;
}

/* Titles */
.cg-comparison-v2__title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -.02em;
}

/* List */
.cg-comparison-v2__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cg-comparison-v2__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cg-dark-70);
  border-bottom: 1px solid rgba(228, 231, 236, .4);
}
.cg-comparison-v2__list li:last-child {
  border-bottom: none;
}

/* Green checkmarks */
.cg-comparison-v2__check {
  color: var(--cg-green) !important;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Red crosses */
.cg-comparison-v2__cross {
  color: #ef4444 !important;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 768px) {
  .cg-comparison-v2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cg-comparison-v2__col--with,
  .cg-comparison-v2__col--without {
    padding: 28px;
  }
}

/* ── BENEFITS GRID FIX — match preview layout ────────────── */
/* 3 cards top row, last 2 centered on bottom row */
.cg-benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
/* Center the last 2 cards when there are 5 total */
.cg-benefits-grid .cg-benefit-card:nth-child(4) {
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: 0;
}
/* Make last row span center: use wrapper approach */
@supports (grid-template-columns: repeat(3, 1fr)) {
  .cg-benefits-grid {
    justify-items: center;
  }
  .cg-benefits-grid .cg-benefit-card {
    width: 100%;
  }
}

/* Better benefit card hover — match preview */
.cg-benefit-card {
  transition: all .4s var(--cg-ease) !important;
}
.cg-benefit-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -15px rgba(29,200,236, .12) !important;
  border-color: rgba(29,200,236, .3) !important;
}

/* Benefit card icon — should have subtle scale on hover */
.cg-benefit-card__icon {
  transition: transform .4s var(--cg-ease-bounce) !important;
}
.cg-benefit-card:hover .cg-benefit-card__icon {
  transform: scale(1.1) !important;
}

/* ── BENEFIT FEATURED DARK CARD ──────────────────────────── */
.cg-benefit-card--featured {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, #101828 0%, #1d2939 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: var(--cg-radius-xl) !important;
  padding: 36px 40px !important;
  margin-top: 32px !important;
  box-shadow: 0 20px 40px -15px rgba(16,24,40,.2) !important;
}
.cg-benefit-card--featured::after { display: none !important; }
.cg-benefit-card--featured .cg-benefit-card__icon {
  background: rgba(29,200,236,.12) !important;
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0;
}
.cg-benefit-card--featured .cg-benefit-card__icon svg {
  stroke: var(--cg-green);
}
.cg-benefit-card--featured .cg-benefit-card__title {
  color: #fff !important;
  font-size: 19px !important;
  margin-bottom: 6px;
}
.cg-benefit-card--featured .cg-benefit-card__desc {
  color: rgba(255,255,255,.6) !important;
}
.cg-benefit-card--featured:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 48px -15px rgba(29,200,236,.15) !important;
  border-color: var(--cg-green) !important;
}
/* Benefit grid — force 3 columns */
.cg-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .cg-benefit-grid { grid-template-columns: 1fr; }
  .cg-benefit-card--featured { flex-direction: column; text-align: center; padding: 28px 24px !important; }
  .cg-benefit-card--featured .cg-benefit-card__icon { margin: 0 auto; }
}

/* ── ECONOMICS TABLE — dark header, rounded, shadow ──────── */
.cg-economics-table {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(228,231,236,.5);
  border-radius: var(--cg-radius-lg);
  overflow: hidden;
  box-shadow: var(--cg-shadow);
  font-size: 15px;
}
.cg-economics-table thead {
  background: var(--cg-dark);
}
.cg-economics-table th {
  padding: 16px 24px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  letter-spacing: .03em;
}
.cg-economics-table td {
  padding: 16px 24px;
  color: var(--cg-dark-70);
  border-bottom: 1px solid var(--cg-gray-100);
}
.cg-economics-table tbody tr:last-child td {
  border-bottom: none;
}
.cg-economics-table tbody tr:hover {
  background: var(--cg-green-light);
}
/* Value column — bold green */
.cg-economics-table td:nth-child(2) {
  font-weight: 700;
  color: var(--cg-green-dark);
}
/* Source tags — styled pills */
.cg-source-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.cg-source-tag--internal {
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
}
.cg-source-tag--third_party {
  background: #dbeafe;
  color: #1d4ed8;
}
.cg-source-tag--modeled {
  background: var(--cg-gray-100);
  color: var(--cg-dark-50);
}

/* ── LEAD FORM V2 — split 2-column layout ────────────────── */
.cg-lead-form-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cg-lead-form-v2__info {
  padding-top: 20px;
}
.cg-lead-form-v2__heading {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 16px;
  color: var(--cg-dark);
}
.cg-lead-form-v2__desc {
  font-size: 17px;
  color: var(--cg-dark-50);
  line-height: 1.65;
  margin-bottom: 28px;
}
.cg-lead-form-v2__guarantees {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cg-lead-form-v2__guarantees li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--cg-dark-70);
  font-weight: 500;
}
.cg-lead-form-v2__guarantees svg {
  flex-shrink: 0;
}
.cg-lead-form-v2__card {
  background: var(--cg-white);
  border: 1px solid rgba(228,231,236,.5);
  border-radius: var(--cg-radius-xl);
  padding: 40px;
  box-shadow: var(--cg-shadow-lg);
}
.cg-lead-form-v2__card .cg-form {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  max-width: none;
}
@media (max-width: 768px) {
  .cg-lead-form-v2 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── ECONOMICS TABLE — override old styles ───────────────── */
.cg-economics-table {
  border-radius: var(--cg-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--cg-shadow) !important;
  border: 1px solid rgba(228,231,236,.5) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.cg-economics-table thead {
  background: var(--cg-dark) !important;
}
.cg-economics-table th {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 16px 24px !important;
  letter-spacing: .03em;
}
.cg-economics-table td {
  padding: 16px 24px !important;
  font-size: 15px !important;
}
.cg-economics-table td:nth-child(2) {
  font-weight: 700 !important;
  color: var(--cg-green-dark) !important;
}
.cg-economics-table tbody tr:hover {
  background: var(--cg-green-light) !important;
}

/* ══════════════════════════════════════════════════════════
   DEEP CONTENT VISUAL OVERHAUL — Premium editorial styling
   ══════════════════════════════════════════════════════════ */

/* Content area — premium background + wider spacing */
.cg-content-collapsed .cg-content,
.cg-content-main.cg-content {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--cg-dark-70);
  letter-spacing: -0.005em;
}

/* H2 — large, bold, with gradient underline accent */
.cg-content h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--cg-dark) !important;
  margin: 48px 0 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg, var(--cg-green), rgba(29,200,236,.15)) 1 !important;
  position: relative;
}
.cg-content h2:first-child {
  margin-top: 0 !important;
}

/* First paragraph after H2 — lede style, larger + darker */
.cg-content h2 + p {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--cg-dark) !important;
  font-weight: 400;
  margin-bottom: 20px;
}

/* H3 inside cards — already styled, but boost */
.cg-content h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--cg-dark) !important;
  letter-spacing: -0.02em;
}

/* Content cards — more premium, thicker accent, better shadow */
.cg-content-card {
  border-left: 4px solid var(--cg-green) !important;
  box-shadow: 0 8px 30px -10px rgba(16,24,40,.06) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  margin: 32px 0 !important;
  background: var(--cg-white) !important;
  border-top: 1px solid rgba(228,231,236,.3) !important;
  border-right: 1px solid rgba(228,231,236,.3) !important;
  border-bottom: 1px solid rgba(228,231,236,.3) !important;
}
.cg-content-card:hover {
  box-shadow: 0 12px 36px -10px rgba(29,200,236,.1) !important;
}

/* Lists — custom green bullets, better spacing */
.cg-content ul,
.cg-content ol {
  padding-left: 0 !important;
  margin: 20px 0 !important;
}
.cg-content ul li,
.cg-content ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.7;
}
.cg-content ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--cg-green);
  border-radius: 50%;
}
.cg-content ol {
  counter-reset: content-counter;
}
.cg-content ol li {
  counter-increment: content-counter;
}
.cg-content ol li::before {
  content: counter(content-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Links — green, prominent */
.cg-content a:not(.cg-btn) {
  color: var(--cg-green-dark) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(29,200,236,.3);
  text-underline-offset: 3px;
  transition: all .2s var(--cg-ease);
}
.cg-content a:not(.cg-btn):hover {
  color: var(--cg-green) !important;
  text-decoration-color: var(--cg-green);
}

/* Tables in content — dark header treatment */
.cg-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(228,231,236,.5) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px -10px rgba(16,24,40,.06) !important;
  margin: 28px 0 !important;
  font-size: 15px !important;
}
.cg-content table thead {
  background: var(--cg-dark) !important;
}
.cg-content table th {
  color: #fff !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  letter-spacing: .03em;
  text-align: left !important;
}
.cg-content table td {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--cg-gray-100) !important;
}
.cg-content table tbody tr:hover {
  background: var(--cg-green-light) !important;
}

/* Blockquotes — premium callout style */
.cg-content blockquote {
  background: linear-gradient(135deg, var(--cg-green-light), #f0fdf4) !important;
  border: 1px solid rgba(29,200,236,.15);
  border-left: 4px solid var(--cg-green) !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 24px 28px !important;
  margin: 28px 0 !important;
  font-style: italic;
  color: var(--cg-dark);
}

/* Dividers — more prominent */
.cg-content-divider {
  margin: 56px 0 !important;
}
.cg-content-divider::before,
.cg-content-divider::after {
  background: linear-gradient(90deg, var(--cg-gray-200), transparent) !important;
}
.cg-content-divider__dot {
  width: 10px !important;
  height: 10px !important;
  box-shadow: 0 0 0 4px rgba(29,200,236,.15);
}

/* Alt sections — stronger contrast */
.cg-content-section--alt {
  background: var(--cg-gray-50) !important;
  border-radius: 20px !important;
  padding: 40px 36px !important;
  margin: 8px -36px !important;
  border: 1px solid rgba(228,231,236,.3);
}

/* Strong text — green accent for emphasis */
.cg-content strong {
  color: var(--cg-dark);
  font-weight: 700;
}

/* HR — gradient line */
.cg-content hr {
  border: none !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--cg-green), var(--cg-green-light), transparent) !important;
  margin: 48px 0 !important;
  border-radius: 2px;
}

/* Inline code */
.cg-content code {
  background: var(--cg-gray-100);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--cg-font-mono);
  color: var(--cg-dark);
}

/* ══════════════════════════════════════════════════════════
   CONCEPT B: Progress Bar Timeline Cards
   Applied by JS content enhancer to sequential H3 sections
   ══════════════════════════════════════════════════════════ */
.cg-content-card--progress {
  border-left: none !important;
  border-top: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
  border-radius: var(--cg-radius-lg) !important;
}
.cg-content-card--progress .cg-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--cg-green), rgba(29,200,236,.2));
}
.cg-content-card--progress .cg-progress-inner {
  padding: 24px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.cg-content-card--progress .cg-progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--cg-radius-sm);
  background: var(--cg-green-light);
  color: var(--cg-green-dark);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.cg-content-card--progress .cg-progress-phase {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cg-green-dark);
  margin-bottom: 2px;
}
.cg-content-card--progress h3 {
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 16px !important;
}
.cg-content-card--progress p {
  margin-bottom: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
.cg-content-card--progress:hover {
  box-shadow: 0 12px 32px rgba(29,200,236,.08) !important;
  transform: translateY(-2px) !important;
}

/* ── Deep content variety — differentiate regular cards from timeline cards ── */
/* Regular content cards keep the green left border. Timeline cards (above) get the progress style. */
/* Make alternating sections more visually distinct */
.cg-content-section--alt {
  background: rgba(29,200,236,.03) !important;
  border: 1px solid rgba(29,200,236,.08) !important;
}
/* Non-timeline content cards — slightly different styling for variety */
.cg-content-card:not(.cg-content-card--progress) {
  border-left-width: 4px !important;
  transition: all .3s var(--cg-ease) !important;
}
.cg-content-card:not(.cg-content-card--progress):nth-child(even) {
  border-left-color: var(--cg-dark) !important;
}
.cg-content-card:not(.cg-content-card--progress):nth-child(3n) {
  border-left-color: #3b82f6 !important;
}

/* ═══════════════════════════════════════════════════════
 * SITEWIDE SECTION-HEAD ALIGNMENT HARDENING (2026-04-14)
 * Explicitly force-center every section head + add breathing room.
 * Uses !important to defeat any inherited/plugin CSS overrides.
 * ═══════════════════════════════════════════════════════ */

/* --- Parent container: 860px centered, text-align center, stacks children --- */
.cg-section__head:not(.cg-section__head--left) {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 56px !important;
}

/* --- Label pill: inline-block, auto-centered --- */
.cg-section__head:not(.cg-section__head--left) .cg-section__label {
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* --- Title: full width within head, text centered, NO side margins --- */
.cg-section__head:not(.cg-section__head--left) .cg-section__title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 18px !important;      /* breathing room below pill */
  margin-bottom: 0 !important;      /* space controlled by .cg-section__sub margin-top */
  width: 100%;
}

/* --- Subtitle: max 60ch, text centered, extra top space from title --- */
.cg-section__head:not(.cg-section__head--left) .cg-section__sub,
.cg-section__head:not(.cg-section__head--left) .cg-section__subtitle {
  max-width: 60ch !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 22px !important;      /* breathing room below title */
  margin-bottom: 0 !important;
}

/* --- CTA variants: mid-cta-v2, final-cta-dark, team-strip, final-cta-v2 --- */
.cg-mid-cta-v2,
.cg-final-cta-dark,
.cg-final-cta-v2,
.cg-team-strip {
  text-align: center;
}
.cg-mid-cta-v2 [class*="__headline"],
.cg-mid-cta-v2 [class*="__title"],
.cg-final-cta-dark [class*="__headline"],
.cg-final-cta-dark [class*="__title"],
.cg-final-cta-v2 [class*="__headline"],
.cg-final-cta-v2 [class*="__title"],
.cg-team-strip [class*="__title"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cg-mid-cta-v2 [class*="__sub"],
.cg-final-cta-dark [class*="__sub"],
.cg-final-cta-v2 [class*="__sub"],
.cg-team-strip [class*="__sub"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 18px !important;      /* breathing room below headline */
}

/* --- Dark section head (Why ClicksGeek) — same rules apply --- */
.cg-why-dark .cg-section__head:not(.cg-section__head--left) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════
 * MOBILE AUDIT FIXES (2026-04-14)
 * 4 real mobile issues found at 386px viewport:
 *   1. HIGH   — <table> in deep content overflows 220px
 *   2. MEDIUM — .cg-mid-cta-v2__glow bleeds 100px past viewport
 *   3. LOW    — .cg-content-section--alt extends 12px past edges
 *   4. COSMETIC — Why-Dark 2x2 cards cramped at 157px, stack on small phones
 * ═══════════════════════════════════════════════════════ */

/* 1. HIGH — Deep-content tables: wrap in scrollable container on mobile
 *          (overrides line 5980 which has overflow: hidden !important) */
@media (max-width: 768px) {
  .cg-content table,
  .cg-content-main table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }
}

/* 2. MEDIUM — Mid-CTA v2 decorative glow should be clipped by parent */
.cg-mid-cta-v2,
.cg-final-cta-dark,
.cg-final-cta-v2 {
  overflow: hidden;
}

/* 3. LOW — Content-section--alt: constrain to viewport on mobile */
@media (max-width: 768px) {
  .cg-content-section--alt {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
}

/* 4. COSMETIC — Why-Dark: stack 2x2 to single column on small phones */
@media (max-width: 480px) {
  .cg-why-dark__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cg-why-dark__card {
    padding: 24px 20px !important;
  }
}

/* BONUS — Team strip: tighten to 3 columns on phones so 7 members render 3-3-1 (not 4-3) */
@media (max-width: 480px) {
  .cg-team-strip__grid {
    gap: 12px;
  }
  .cg-team-strip__member {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }
}

/* BONUS — Global safety net: prevent any raw content element from pushing horizontal scroll */
@media (max-width: 768px) {
  .cg-content img,
  .cg-content iframe,
  .cg-content video,
  .cg-content-main img,
  .cg-content-main iframe,
  .cg-content-main video {
    max-width: 100%;
    height: auto;
  }
  .cg-content pre,
  .cg-content-main pre {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════
 * 2026 HOMEPAGE — REMIX LIGHT
 * All selectors prefixed h26- and scoped under body.home-2026
 * so none of this affects spoke/niche/service/archive pages.
 * Design ref: /tmp/cg-home-concepts/mock-2026-remix-light.html
 * ═══════════════════════════════════════════════════════ */

body.home-2026 {
  --h26-bg: #f6f7f4;
  --h26-bg-tint: #eef4ed;
  --h26-card: #ffffff;
  --h26-stroke: rgba(10,11,13,.07);
  --h26-stroke-strong: rgba(10,11,13,.14);
  --h26-text: #0a0b0d;
  --h26-text-soft: #2a2d33;
  --h26-text-dim: rgba(10,11,13,.58);
  --h26-text-dimmer: rgba(10,11,13,.36);
  --h26-green: #1DC8EC;
  --h26-green-deep: #006F8F;
  --h26-green-darker: #005168;
  --h26-green-soft: rgba(29,200,236,.08);
  --h26-green-glow: rgba(29,200,236,.22);
  --h26-green-tint: #e8f8ee;
  --h26-shadow-sm: 0 1px 2px rgba(10,11,13,.04);
  --h26-shadow-md: 0 4px 12px rgba(10,11,13,.06), 0 1px 2px rgba(10,11,13,.04);
  --h26-shadow-lg: 0 12px 32px -8px rgba(10,11,13,.08), 0 2px 8px rgba(10,11,13,.04);
  margin: 0;
  background: var(--h26-bg);
  color: var(--h26-text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Hide legacy sticky-cta + old mobile-nav on the homepage. The shared
   cg-header is rendered via cg_render_concept_a_nav() so it shows here
   too (no need to hide it anymore). */
body.home-2026 > .cg-mobile-nav,
body.home-2026 > .cg-sticky-cta { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
 * CONCEPT A — MEGA-MENU EDITORIAL NAV (sitewide, unified)
 * Rendered by cg_render_concept_a_nav() in inc/header-nav.php.
 * Scoped under .cg-header--v2 so it doesn't collide with the legacy
 * simple-nav styling above (the v1 rules are now dead but harmless).
 * ══════════════════════════════════════════════════════════════════════ */
.cg-header--v2 {
  background: #fff;
  border-bottom: 1px solid #e8ecf1;
  position: sticky;
  top: 0;
  z-index: 100;
}
.cg-header--v2 .cg-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.cg-header--v2 .cg-header__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.cg-header--v2 .cg-header__logo-img { height: 36px; width: auto; display: block; }

/* Nav links row — centered in the grid middle column */
.cg-header--v2 .cg-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
  flex-wrap: nowrap;
}
.cg-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.cg-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #101828;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.cg-nav__trigger:hover,
.cg-nav__trigger:focus-visible { background: #f3f5f8; color: #006F8F; outline: none; }
.cg-nav__caret { width: 11px; height: 11px; opacity: .6; transition: transform .2s; }
.cg-nav__item--has-menu:hover .cg-nav__caret,
.cg-nav__item--has-menu:focus-within .cg-nav__caret { transform: rotate(180deg); }

/* Desktop dropdown card — the hitbox touches the trigger (top: 100%)
   so the cursor never enters a dead zone when moving down. Visual gap
   comes from the transparent padding-top on the wrapper; the inner
   card keeps its rounded-corner card look. */
.cg-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  transition-delay: .1s; /* small grace on hide so small mouse wobble doesn't close it */
  pointer-events: none;
  z-index: 200;
}
.cg-nav__item--has-menu:hover .cg-nav__dropdown,
.cg-nav__item--has-menu:focus-within .cg-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s; /* open immediately */
}
/* Inner card — this is what visually IS the dropdown panel */
.cg-nav__dropdown::before {
  content: "";
  position: absolute;
  inset: 10px 0 0 0;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 16px;
  box-shadow: 0 20px 40px -8px rgba(15,30,50,.18), 0 8px 16px -8px rgba(15,30,50,.1);
  z-index: -1;
}
.cg-nav__dropdown > * { position: relative; }
/* Padding-top combines: 10px hitbox bridge (matches the ::before inset)
   + 28px internal breathing room inside the visible card, so content
   doesn't butt up against the card's top edge. */
.cg-nav__dropdown--solutions,
.cg-nav__dropdown--industries,
.cg-nav__dropdown--learn { padding: 38px 28px 28px; }
.cg-nav__dropdown--solutions { min-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cg-nav__dropdown--industries { min-width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
/* Industries grid — opt out of the negative-margin trick used in single-column
   dropdowns. Grid gap handles spacing here, and the -10px bleed was clipping
   into adjacent cells (made hovered items look larger than their neighbors). */
.cg-nav__dropdown--industries .cg-nav__link { margin: 0; padding: 12px 14px; }
.cg-nav__dropdown--industries .cg-nav__link + .cg-nav__link { margin-top: 0; }
.cg-nav__dropdown--learn { min-width: 380px; }

.cg-nav__group-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8898;
  margin-bottom: 14px;
}

.cg-nav__link {
  display: flex;
  gap: 12px;
  padding: 10px;
  margin: -10px;
  border-radius: 10px;
  text-decoration: none;
  align-items: flex-start;
  transition: background .15s;
}
.cg-nav__link + .cg-nav__link { margin-top: 4px; }
.cg-nav__link:hover { background: #f3faf5; }
.cg-nav__link:hover .cg-nav__link-title { color: #006F8F; }

.cg-nav__link-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eefbf2;
  color: #006F8F;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cg-nav__link-ico svg { width: 16px; height: 16px; }
.cg-nav__link-ico--emoji { background: #f3f5f8; font-size: 15px; }

.cg-nav__link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-nav__link-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #101828;
  letter-spacing: -0.005em;
  line-height: 1.3;
  transition: color .15s;
}
.cg-nav__link-desc {
  font-size: 12.5px;
  color: #4a5a6a;
  line-height: 1.45;
}

/* Right-side CTA — force white text at high specificity so theme-wide
   link color rules don't beat it. Covers visited + hover + active. */
.cg-header--v2 a.cg-nav__cta,
.cg-header--v2 a.cg-nav__cta:link,
.cg-header--v2 a.cg-nav__cta:visited,
.cg-header--v2 a.cg-nav__cta:hover,
.cg-header--v2 a.cg-nav__cta:active,
.cg-header--v2 a.cg-nav__cta:focus {
  color: #ffffff !important;
  text-decoration: none;
}
.cg-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: #1DC8EC;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: 0 6px 16px -4px rgba(29,200,236,.45);
  transition: transform .2s, box-shadow .2s, background .2s;
  white-space: nowrap;
  justify-self: end;
}
.cg-nav__cta:hover {
  background: #006F8F;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -4px rgba(29,200,236,.55);
}

/* Hamburger — hidden on desktop, shown on mobile via the v1 media query at 1000px */

/* Mobile drawer accordion sub-menus (native <details>) */
.cg-mobile-drawer__group { border-bottom: 1px solid #e8ecf1; }
.cg-mobile-drawer__group[open] { background: #fafbfb; }
.cg-mobile-drawer__group summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 17px;
  font-weight: 600;
  color: #101828;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cg-mobile-drawer__group summary::-webkit-details-marker { display: none; }
.cg-mobile-drawer__chev { opacity: .5; transition: transform .2s; font-family: monospace; }
.cg-mobile-drawer__group[open] .cg-mobile-drawer__chev { transform: rotate(180deg); }
.cg-mobile-drawer__sub { padding: 0 4px 14px; display: flex; flex-direction: column; gap: 0; }
.cg-mobile-drawer__sub a {
  padding: 8px 4px;
  font-size: 15px;
  color: #4a5a6a;
  text-decoration: none;
  border-radius: 6px;
}
.cg-mobile-drawer__sub a:hover { color: #006F8F; }
.cg-mobile-drawer__sublabel {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8898;
  margin: 14px 4px 8px; /* bottom: 8px so it doesn't butt into the first link */
}
.cg-mobile-drawer__sublabel:first-child { margin-top: 4px; }
.cg-mobile-drawer__cta {
  display: block;
  background: #1DC8EC;
  color: #fff;
  text-align: center;
  padding: 14px 22px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
  text-decoration: none;
  box-shadow: 0 6px 16px -4px rgba(29,200,236,.45);
}

/* Hide desktop mega dropdowns on narrow screens — the mobile drawer
   handles navigation there instead. The 1000px breakpoint matches the
   existing cg-header responsive cutoff at line ~2775. Also hide the
   desktop CTA (which is a direct grid child of __inner, not inside
   __nav) and collapse the grid so the logo + hamburger sit on opposite
   edges. */
@media (max-width: 1000px) {
  .cg-header--v2 .cg-header__nav,
  .cg-header--v2 .cg-nav__cta {
    display: none;
  }
  .cg-header--v2 .cg-header__inner {
    grid-template-columns: auto 1fr;
  }
  .cg-header--v2 .cg-header__toggle {
    display: inline-flex;
    justify-self: end;
  }
  /* When the mobile drawer is open, hide the sticky FAB so it doesn't
     cover the bottom of the menu. */
  .cg-mobile-drawer.is-open ~ .cg-fab-cta,
  body:has(.cg-mobile-drawer.is-open) .cg-fab-cta {
    display: none !important;
  }
}

/* Subtle green haze from top */
body.home-2026::before {
  content: "";
  position: fixed;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(29,200,236,.22), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(29,200,236,.08), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Fine grain */
body.home-2026::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.home-2026 .h26-container,
body.home-2026 > .h26-announce .h26-container,
body.home-2026 > .h26-header .h26-container,
.h26-footer .h26-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 3;
}

body.home-2026 * { box-sizing: border-box; }

body.home-2026 a { color: inherit; }
/* Sticky mobile CTA stays green-on-white regardless of h26 color inheritance */
body.home-2026 a.cg-fab-cta,
a.cg-fab-cta { color: var(--cg-white) !important; }

/* Sticky-fab visibility states controlled by JS (initFabCta).
   - .is-hidden: hasn't scrolled past hero CTA yet (default)
   - .is-over-form: lead-form visible, get out of the way
*/
a.cg-fab-cta.is-hidden,
a.cg-fab-cta.is-over-form {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
body.home-2026 img { max-width: 100%; display: block; }
body.home-2026 input, body.home-2026 textarea, body.home-2026 select, body.home-2026 button { font-family: inherit; font-size: inherit; }

/* ANNOUNCE */
body.home-2026 .h26-announce {
  text-align: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--h26-stroke);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--h26-text-dim);
  letter-spacing: 0.02em;
  background: rgba(246,247,244,.7);
  backdrop-filter: blur(14px);
  position: relative; z-index: 5;
}
body.home-2026 .h26-announce__chip {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid rgba(29,200,236,.3);
  border-radius: 100px;
  background: rgba(29,200,236,.08);
  color: var(--h26-green-deep);
  font-weight: 600;
  margin-right: 10px;
  font-size: 11px;
}
body.home-2026 .h26-announce a {
  color: var(--h26-text);
  text-decoration: none;
  border-bottom: 1px solid var(--h26-green);
  padding-bottom: 1px;
  margin-left: 14px;
}

/* HEADER */
body.home-2026 .h26-header {
  padding: 22px 0;
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,247,244,.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--h26-stroke);
}
body.home-2026 .h26-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.home-2026 .h26-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
  color: var(--h26-text); text-decoration: none;
}
body.home-2026 .h26-logo__mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; font-weight: 700; color: #fff;
  box-shadow: 0 4px 14px var(--h26-green-glow);
}
body.home-2026 .h26-nav__links {
  display: flex; gap: 32px; align-items: center;
  font-size: 14px; color: var(--h26-text-soft);
}
body.home-2026 .h26-nav__links a {
  color: inherit; text-decoration: none; transition: color .2s;
}
body.home-2026 .h26-nav__links a:hover { color: var(--h26-text); }
body.home-2026 .h26-nav__cta {
  background: var(--h26-text); color: #fff !important;
  padding: 9px 18px; border-radius: 100px;
  font-weight: 600; font-size: 13px;
  transition: all .2s;
}
body.home-2026 .h26-nav__cta:hover { background: var(--h26-green-deep); transform: translateY(-1px); }

/* WP Site-Identity custom logo — when set in Customizer, replaces the
   "CG · ClicksGeek" text mark. Sized to match the existing 28px chip-mark
   visual rhythm; max-height keeps tall logos in line. */
body.home-2026 .h26-logo--custom { gap: 0; }
body.home-2026 .h26-logo__img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  /* CG-Main-Logo.svg renders naturally with black outline strokes (mascot)
     + green fills (wordmark). Let it render as-designed — no filter. */
}
@media (max-width: 780px) {
  body.home-2026 .h26-logo__img { max-height: 32px; max-width: 180px; }
}

/* HAMBURGER (mobile only — desktop default = hidden) */
body.home-2026 .h26-nav__burger {
  display: none;
  background: transparent;
  border: 1px solid var(--h26-stroke-strong);
  border-radius: 12px;
  width: 42px; height: 42px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
body.home-2026 .h26-nav__burger:hover { border-color: rgba(10,11,13,.2); background: rgba(10,11,13,.04); }
body.home-2026 .h26-nav__burger-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--h26-text);
  border-radius: 2px;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .2s;
}
body.home-2026 .h26-nav__burger[aria-expanded="true"] .h26-nav__burger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.home-2026 .h26-nav__burger[aria-expanded="true"] .h26-nav__burger-bar:nth-child(2) {
  opacity: 0;
}
body.home-2026 .h26-nav__burger[aria-expanded="true"] .h26-nav__burger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* MOBILE DRAWER (full-width slide-down panel below header) */
body.home-2026 .h26-mobile-drawer {
  display: block;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(246,247,244,.98);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--h26-stroke);
  box-shadow: 0 16px 32px rgba(10,11,13,.06);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .2s;
  z-index: 49;
}
body.home-2026 .h26-mobile-drawer[hidden] { display: none; }
body.home-2026 .h26-mobile-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.home-2026 .h26-mobile-drawer__inner {
  display: flex;
  flex-direction: column;
  padding: 12px 20px 24px;
  gap: 4px;
}
body.home-2026 .h26-mobile-drawer__link {
  font-size: 17px;
  font-weight: 500;
  color: var(--h26-text);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--h26-stroke);
  transition: color .2s;
}
body.home-2026 .h26-mobile-drawer__link:hover { color: var(--h26-green-deep); }
body.home-2026 .h26-mobile-drawer__link:last-of-type { border-bottom: none; }
body.home-2026 .h26-mobile-drawer__cta {
  margin-top: 12px;
  background: var(--h26-text);
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 16px 20px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  transition: background .2s, transform .15s;
}
body.home-2026 .h26-mobile-drawer__cta:hover { background: var(--h26-green-deep); }
body.home-2026.h26-drawer-open { overflow: hidden; }

/* HERO */
body.home-2026 .h26-hero { padding: 72px 0 64px; position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════
 * HERO SPLIT LAYOUT (2026-04) — copy left, testimonial video right.
 * Replaces the prior 6-tile bento grid on desktop. On mobile the
 * two columns stack (copy on top, video below).
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .h26-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;  /* both columns fill the taller one's height */
  margin-bottom: 48px;
}
body.home-2026 .h26-hero__col--copy,
body.home-2026 .h26-hero__col--video { display: flex; flex-direction: column; }
/* Copy column — keep content at the top, CTAs at the bottom */
body.home-2026 .h26-hero__col--copy {
  justify-content: space-between;
}
/* Video column stack — now contains ONLY the video card (badges moved
 * to the trust band below the hero). Video centers vertically inside
 * the column so tall copy on the left doesn't leave the video stranded
 * at the top with a wall of empty space below it. */
body.home-2026 .h26-hero-video-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0;
}
body.home-2026 .h26-hero-video-stack > .h26-hero-video { flex: 0 0 auto; }

/* 2×2 badge grid under the video — matches copy column height naturally */
body.home-2026 .h26-hero-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
}
body.home-2026 .h26-hero-badges__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 14px;
  box-shadow: var(--h26-shadow-sm);
  min-height: 76px;
  transition: border-color .2s, box-shadow .2s;
}
body.home-2026 .h26-hero-badges__item:hover {
  border-color: var(--h26-stroke-strong);
  box-shadow: var(--h26-shadow-md);
}
/* All 4 badges share a unified "logo-chip" container so the visual
 * weight stays consistent even though each brand logo has different
 * proportions. Each logo sits in a 48×48 soft-gray chip with a thin
 * border. The brand's logo is centered and sized to optical balance. */
body.home-2026 .h26-hero-badges__item img,
body.home-2026 .h26-hero-badges__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfa;
  border: 1px solid rgba(15,18,22,0.08);
  border-radius: 12px;
  padding: 8px;
  object-fit: contain;
  box-sizing: border-box;
}
/* Google Premier is a complex animated GIF — tighten to the chip */
body.home-2026 .h26-hero-badges__item--gpp img { padding: 6px; }
/* Microsoft logo is smaller by default — give it a touch more room */
body.home-2026 .h26-hero-badges__item--ms img { padding: 10px; }
/* Meta / Est-2017 icon chips: center the SVG at ~24px */
body.home-2026 .h26-hero-badges__logo svg {
  width: 26px;
  height: 26px;
}
body.home-2026 .h26-hero-badges__logo--estd {
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  border-color: rgba(29,200,236,.25);
  color: var(--h26-green-deep);
}
body.home-2026 .h26-hero-badges__logo--meta {
  background: linear-gradient(145deg, #f0f4ff, #fff);
  border-color: rgba(8,102,255,0.18);
}

body.home-2026 .h26-hero-badges__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.home-2026 .h26-hero-badges__cap strong {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--h26-text);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
body.home-2026 .h26-hero-badges__cap span {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* Subtle brand-color accent on hover per badge */
body.home-2026 .h26-hero-badges__item:hover { transform: translateY(-1px); }
body.home-2026 .h26-hero-badges__item--gpp:hover { border-color: #4285F4; }
body.home-2026 .h26-hero-badges__item--ms:hover  { border-color: #F25022; }
body.home-2026 .h26-hero-badges__item--meta:hover { border-color: #0866FF; }
body.home-2026 .h26-hero-badges__item--estd:hover { border-color: var(--h26-green); }

/* Mobile — center the video stack */
@media (max-width: 980px) {
  body.home-2026 .h26-hero-video-stack { max-width: 620px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  body.home-2026 .h26-hero-badges { grid-template-columns: 1fr; gap: 10px; }
  body.home-2026 .h26-hero-badges__item { padding: 12px 14px; min-height: 64px; }
}
body.home-2026 .h26-hero__col--copy { min-width: 0; }
body.home-2026 .h26-hero__col--video { min-width: 0; }

/* Hero video card — featured testimonial reel */
body.home-2026 .h26-hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 22px;
  overflow: hidden;
  background: #0a0b0d;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.28),
    0 18px 36px -12px rgba(29,200,236,.12),
    0 0 0 1px rgba(0,0,0,.05);
  cursor: pointer;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s;
}
body.home-2026 .h26-hero-video:hover {
  transform: translateY(-3px);
  box-shadow:
    0 40px 80px -24px rgba(0,0,0,.32),
    0 24px 48px -12px rgba(29,200,236,.18),
    0 0 0 1px rgba(29,200,236,.15);
}
body.home-2026 .h26-hero-video .h26-video__thumb { border-radius: inherit; }
body.home-2026 .h26-hero-video .h26-video__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
body.home-2026 .h26-hero-video:hover .h26-video__img { transform: scale(1.04); }

body.home-2026 .h26-hero-video__chip {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  background: rgba(10, 11, 13, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.home-2026 .h26-hero-video__chip svg {
  fill: var(--h26-green);
  animation: h26-pulse 1.8s ease-in-out infinite;
}
@keyframes h26-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Bigger, bolder play button on the hero video vs carousel cards */
body.home-2026 .h26-hero-video__play {
  width: 84px; height: 84px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 10px rgba(255,255,255,.10);
}
body.home-2026 .h26-hero-video__play svg { width: 28px; height: 28px; }
body.home-2026 .h26-hero-video:hover .h26-hero-video__play {
  box-shadow: 0 20px 48px rgba(0,0,0,.55), 0 0 0 14px rgba(29,200,236,.18);
}

/* Responsive stack at tablet */
@media (max-width: 980px) {
  body.home-2026 .h26-hero__split {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
  body.home-2026 .h26-hero-video { max-width: 620px; margin: 0 auto; }
}
/* Shrink hero H1 cap when inside split layout so the line doesn't dominate */
body.home-2026 .h26-hero__col--copy .h26-hero__title {
  font-size: clamp(44px, 5.2vw, 78px);
  max-width: 640px;
  margin-bottom: 22px;
}
body.home-2026 .h26-hero__col--copy .h26-hero__sub {
  max-width: 560px;
  margin-bottom: 32px;
}
body.home-2026 .h26-hero__col--copy .h26-hero__ctas { margin-bottom: 0; }
/* The old .h26-badges block lived in the copy column; badges now render
 * under the video via .h26-hero-badges (2×2 grid). */

body.home-2026 .h26-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-text-soft);
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border: 1px solid var(--h26-stroke-strong);
  border-radius: 100px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  margin-bottom: 32px;
}
body.home-2026 .h26-hero__eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--h26-green);
  box-shadow: 0 0 10px var(--h26-green-glow);
  animation: h26-pulse 2s ease-in-out infinite;
}
@keyframes h26-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
body.home-2026 .h26-hero__eyebrow strong { color: var(--h26-text); font-weight: 500; }

body.home-2026 .h26-hero__title {
  font-family: 'Geist', 'Geist Fallback', sans-serif;
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 1100px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.home-2026 .h26-hero__title__accent {
  font-family: 'Instrument Serif', 'Instrument Serif Fallback', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
/* Removed h26-gradient keyframe animation — animated background-position
   is non-composited (runs on main thread every frame, blocks TBT).
   Static gradient is visually nearly identical. */

body.home-2026 .h26-hero__sub {
  font-size: 20px;
  color: var(--h26-text-dim);
  max-width: 680px;
  line-height: 1.55;
  margin: 0 0 40px;
  font-weight: 400;
}

body.home-2026 .h26-hero__ctas { display: flex; gap: 12px; margin-bottom: 56px; flex-wrap: wrap; }

body.home-2026 .h26-btn {
  font-family: 'Geist', sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 14px 24px; border-radius: 100px;
  text-decoration: none;
  transition: all .25s cubic-bezier(.22,.61,.36,1);
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer;
  letter-spacing: -0.01em;
}
body.home-2026 .h26-btn--primary {
  background: var(--h26-green); color: #fff;
  box-shadow: 0 4px 20px var(--h26-green-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
body.home-2026 .h26-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--h26-green-glow);
  background: var(--h26-green-deep);
}
body.home-2026 .h26-btn--ghost {
  background: var(--h26-card);
  color: var(--h26-text);
  border: 1px solid var(--h26-stroke-strong);
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-btn--ghost:hover {
  border-color: rgba(10,11,13,.2);
  box-shadow: var(--h26-shadow-md);
}
body.home-2026 .h26-btn--xl { font-size: 16px; padding: 18px 32px; }

/* BENTO GRID */
body.home-2026 .h26-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 14px;
  margin-bottom: 24px;
}
body.home-2026 .h26-tile {
  position: relative;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 22px;
  padding: 28px;
  overflow: hidden;
  transition: all .3s cubic-bezier(.22,.61,.36,1);
  box-shadow: var(--h26-shadow-md);
}
body.home-2026 .h26-tile:hover {
  border-color: var(--h26-stroke-strong);
  transform: translateY(-2px);
  box-shadow: var(--h26-shadow-lg);
}

body.home-2026 .h26-tile__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
body.home-2026 .h26-tile__label__live {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  background: rgba(29,200,236,.08);
  border: 1px solid rgba(29,200,236,.2);
  border-radius: 100px;
  color: var(--h26-green-deep);
  font-size: 10px;
  letter-spacing: 0.08em;
}
body.home-2026 .h26-tile__label__live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--h26-green); box-shadow: 0 0 8px var(--h26-green-glow);
  animation: h26-pulse 2s ease-in-out infinite;
}

/* Tile sizes */
body.home-2026 .h26-tile--dashboard { grid-column: span 4; grid-row: span 2; background: linear-gradient(145deg, #ffffff, #fafdfa); }
body.home-2026 .h26-tile--lead { grid-column: span 2; grid-row: span 2; background: linear-gradient(145deg, #ffffff, var(--h26-green-tint)); border-color: rgba(29,200,236,.18); }
body.home-2026 .h26-tile--quote { grid-column: span 2; }
body.home-2026 .h26-tile--stat-sm { grid-column: span 2; }
body.home-2026 .h26-tile--service { grid-column: span 3; }
body.home-2026 .h26-tile--industries { grid-column: span 6; padding: 0; background: linear-gradient(145deg, #ffffff, #fbfcfb); }

/* DASHBOARD */
body.home-2026 .h26-bignum {
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-feature-settings: "tnum";
  color: var(--h26-text);
  margin-bottom: 8px;
}
body.home-2026 .h26-bignum__cap { color: var(--h26-text-dim); font-size: 14px; margin-bottom: 24px; line-height: 1.5; }
body.home-2026 .h26-bignum__cap strong { color: var(--h26-green-deep); font-weight: 600; }
body.home-2026 .h26-dashboard__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 24px; }
body.home-2026 .h26-dashboard__cell {
  padding: 14px;
  background: rgba(10,11,13,.03);
  border: 1px solid var(--h26-stroke);
  border-radius: 12px;
}
body.home-2026 .h26-dashboard__cell-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; color: var(--h26-text-dimmer);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
body.home-2026 .h26-dashboard__cell-value {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  color: var(--h26-text);
}
body.home-2026 .h26-dashboard__cell-trend {
  font-size: 11px; color: var(--h26-green-deep);
  font-weight: 600; margin-top: 2px;
}
body.home-2026 .h26-chart-wrap {
  height: 96px; position: relative;
  border-top: 1px solid var(--h26-stroke);
  padding-top: 16px;
}
body.home-2026 .h26-chart-wrap svg { width: 100%; height: 100%; }

/* LEAD TILE */
body.home-2026 .h26-lead__headline {
  font-family: 'Geist', sans-serif;
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 14px 0 8px;
  color: var(--h26-text);
}
body.home-2026 .h26-lead__headline em {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 400;
  color: var(--h26-green-deep);
}
body.home-2026 .h26-lead__sub {
  font-size: 13px; color: var(--h26-text-dim);
  line-height: 1.55; margin-bottom: 18px;
}
body.home-2026 .h26-chip-group {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 12px;
}
body.home-2026 .h26-chip {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 5px 9px;
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  color: var(--h26-text-dim);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.home-2026 .h26-chip:hover { border-color: var(--h26-stroke-strong); color: var(--h26-text); }
body.home-2026 .h26-chip--active {
  background: rgba(29,200,236,.1);
  border-color: var(--h26-green);
  color: var(--h26-green-deep);
  font-weight: 600;
}
body.home-2026 .h26-lead__input,
body.home-2026 .h26-lead__select {
  width: 100%; padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--h26-stroke);
  border-radius: 10px;
  color: var(--h26-text);
  font-family: inherit; font-size: 13px;
  margin-bottom: 8px;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-lead__input::placeholder { color: var(--h26-text-dimmer); }
body.home-2026 .h26-lead__submit {
  width: 100%; padding: 12px; margin-top: 4px;
  background: var(--h26-green); color: #fff;
  border: none; border-radius: 100px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--h26-green-glow);
  transition: all .2s;
}
body.home-2026 .h26-lead__submit:hover { background: var(--h26-green-deep); transform: translateY(-1px); }
body.home-2026 .h26-lead__assurance {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; color: var(--h26-text-dimmer);
  letter-spacing: 0.04em;
}
body.home-2026 .h26-lead__reassure {
  margin-top: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-text-dimmer);
  text-align: center;
}

/* PULL QUOTE */
body.home-2026 .h26-quote__text {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px; line-height: 1.35;
  color: var(--h26-text);
  margin: 12px 0 20px;
  letter-spacing: -0.01em;
}
body.home-2026 .h26-quote__author {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
  gap: 12px;
}
body.home-2026 .h26-quote__author-name {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--h26-text);
}
body.home-2026 .h26-quote__author-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-text-dimmer);
  margin-top: 2px;
}
body.home-2026 .h26-quote__result {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(29,200,236,.3);
  border-radius: 100px;
  color: var(--h26-green-deep);
  background: rgba(29,200,236,.08);
  font-weight: 600;
  flex-shrink: 0;
}

/* STAT TILE */
body.home-2026 .h26-stat__big {
  font-family: 'Geist', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 14px 0 6px;
  color: var(--h26-text);
}
body.home-2026 .h26-stat__big-unit {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 0.45em;
  font-weight: 400;
  color: var(--h26-green-deep);
}
body.home-2026 .h26-stat__cap {
  font-size: 12px; color: var(--h26-text-dim);
  line-height: 1.5;
}

/* SERVICE TILE */
body.home-2026 .h26-service { text-decoration: none; color: inherit; display: block; }
body.home-2026 .h26-service__header {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 18px;
}
body.home-2026 .h26-service__num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-text-dimmer);
}
body.home-2026 .h26-service__arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  border: 1px solid var(--h26-stroke);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s;
  color: var(--h26-text-soft);
}
body.home-2026 .h26-service:hover .h26-service__arrow {
  background: var(--h26-green); color: #fff;
  border-color: var(--h26-green);
  transform: translateX(2px);
}
body.home-2026 .h26-service__name {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 8px;
  color: var(--h26-text);
}
body.home-2026 .h26-service__desc {
  font-size: 13px; color: var(--h26-text-dim);
  line-height: 1.55; margin-bottom: 20px;
}
body.home-2026 .h26-service__metric {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-text-dimmer);
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
  display: flex; gap: 20px;
}
body.home-2026 .h26-service__metric-item {
  display: flex; flex-direction: column; gap: 2px;
}
body.home-2026 .h26-service__metric-value {
  font-family: 'Geist', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--h26-green-deep);
}

/* INDUSTRIES MARQUEE */
body.home-2026 .h26-industries__head {
  padding: 28px 28px 0;
  display: flex; justify-content: space-between;
  align-items: center;
  gap: 12px;
}
body.home-2026 .h26-industries__title {
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.02em; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--h26-text);
}
body.home-2026 .h26-industries__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 400;
  color: var(--h26-green-deep);
}
body.home-2026 .h26-industries__link {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-green-deep);
  text-decoration: none; letter-spacing: 0.04em;
  font-weight: 600;
}
body.home-2026 .h26-marquee {
  overflow: hidden; padding: 24px 0 28px;
  position: relative; margin-top: 18px;
}
body.home-2026 .h26-marquee::before,
body.home-2026 .h26-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 100px; z-index: 2; pointer-events: none;
}
body.home-2026 .h26-marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
body.home-2026 .h26-marquee::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
body.home-2026 .h26-marquee__track {
  display: flex; gap: 8px;
  animation: h26-marquee 50s linear infinite;
  white-space: nowrap;
}
@keyframes h26-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.home-2026 .h26-marquee__item {
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(10,11,13,.03);
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--h26-text-soft);
  text-decoration: none;
  transition: all .2s;
}
body.home-2026 .h26-marquee__item:hover {
  background: var(--h26-green-soft);
  color: var(--h26-green-deep);
  border-color: rgba(29,200,236,.3);
}

/* TRUST BAND — horizontal partnership logo bar below the hero. */
body.home-2026 .h26-trust-band {
  margin-top: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--h26-stroke);
  border-bottom: 1px solid var(--h26-stroke);
}
body.home-2026 .h26-trust-band__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--h26-text-dimmer);
  text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center; margin-bottom: 32px;
}

/* NEW: 4-column horizontal logo bar (replaces the 5-item stat grid) */
body.home-2026 .h26-trust-band__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
body.home-2026 .h26-trust-band__logo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 16px;
  transition: all .25s cubic-bezier(.22,.61,.36,1);
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-trust-band__logo:hover {
  transform: translateY(-2px);
  box-shadow: var(--h26-shadow-md);
  border-color: var(--h26-stroke-strong);
}
/* Logo artwork (either <img> or wrapped SVG) — 64×64 chip */
body.home-2026 .h26-trust-band__logo img,
body.home-2026 .h26-trust-band__logo-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfa;
  border: 1px solid rgba(15,18,22,0.08);
  border-radius: 14px;
  padding: 10px;
  object-fit: contain;
  box-sizing: border-box;
}
body.home-2026 .h26-trust-band__logo--gpp img { padding: 6px; }
body.home-2026 .h26-trust-band__logo--ms img { padding: 14px; }
body.home-2026 .h26-trust-band__logo-icon svg { width: 32px; height: 32px; }
body.home-2026 .h26-trust-band__logo-icon--meta {
  background: linear-gradient(145deg, #f0f4ff, #fff);
  border-color: rgba(8,102,255,0.18);
}
body.home-2026 .h26-trust-band__logo-icon--estd {
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  border-color: rgba(29,200,236,.25);
  color: var(--h26-green-deep);
}
/* Caption block */
body.home-2026 .h26-trust-band__logo-cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.home-2026 .h26-trust-band__logo-cap strong {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--h26-text);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
body.home-2026 .h26-trust-band__logo-cap span {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.02em;
  line-height: 1.35;
}
/* Brand-color hover accents (match the prior hero-badges treatment) */
body.home-2026 .h26-trust-band__logo--gpp:hover  { border-color: #4285F4; }
body.home-2026 .h26-trust-band__logo--ms:hover   { border-color: #F25022; }
body.home-2026 .h26-trust-band__logo--meta:hover { border-color: #0866FF; }
body.home-2026 .h26-trust-band__logo--estd:hover { border-color: var(--h26-green); }

/* Responsive collapse for logo bar */
@media (max-width: 1100px) {
  body.home-2026 .h26-trust-band__logos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  body.home-2026 .h26-trust-band__logos { grid-template-columns: 1fr; gap: 12px; }
  body.home-2026 .h26-trust-band__logo { padding: 14px 16px; gap: 14px; }
  body.home-2026 .h26-trust-band__logo img,
  body.home-2026 .h26-trust-band__logo-icon { width: 52px; height: 52px; }
}

/* ═════════════ STANDARD SECTIONS (below hero) ═════════════ */
body.home-2026 .h26-section { padding: 100px 0; position: relative; z-index: 2; }
body.home-2026 .h26-section--alt { background: rgba(10,11,13,.02); border-top: 1px solid var(--h26-stroke); border-bottom: 1px solid var(--h26-stroke); }

body.home-2026 .h26-section__head {
  max-width: 1040px;           /* was 780px — too narrow, caused orphan-word wrapping */
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.home-2026 .h26-section__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-green-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border: 1px solid rgba(29,200,236,.25);
  border-radius: 100px;
  background: rgba(29,200,236,.06);
  margin-bottom: 20px;
  font-weight: 600;
  display: inline-block;
}
body.home-2026 .h26-section__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--h26-text);
  /* Distribute words evenly across lines so we don't orphan a word
   * like "industry." or "ROI." on a line by itself. Supported in all
   * modern browsers; older ones fall back to normal wrapping. */
  text-wrap: balance;
}
body.home-2026 .h26-section__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .h26-section__sub {
  font-size: 17px; line-height: 1.6;
  color: var(--h26-text-dim);
  max-width: 680px;          /* was 580px — paragraphs were wrapping too tight */
  margin: 0;
  text-wrap: pretty;         /* prevents orphan words in paragraph wrapping */
}
body.home-2026 .h26-section__cta-line {
  text-align: center; margin-top: 40px;
}
body.home-2026 .h26-section__cta-line a {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: var(--h26-green-deep);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--h26-green);
  padding-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════
 * VIDEO TESTIMONIAL CAROUSEL (real YouTube thumbnails,
 * scroll-snap, click-to-play inline via <iframe> swap)
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .h26-video-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* Extra horizontal room so nav buttons can overhang without clipping. */
}
body.home-2026 .h26-video-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 4px;
  padding: 4px 0 16px;
  /* Hide scrollbar — we use nav buttons + drag-swipe */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Reset any prior grid */
  grid-template-columns: none;
}
body.home-2026 .h26-video-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.home-2026 .h26-video {
  flex: 0 0 calc((100% - 40px) / 3); /* 3 visible · 2 gaps × 20px = 40 */
  scroll-snap-align: start;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  box-shadow: var(--h26-shadow-md);
  position: relative;
  min-width: 0;
}
body.home-2026 .h26-video:hover {
  transform: translateY(-4px);
  box-shadow: var(--h26-shadow-lg);
  border-color: var(--h26-stroke-strong);
}
body.home-2026 .h26-video__thumb {
  aspect-ratio: 16/9;           /* native YouTube ratio */
  position: relative;
  background: #0a0b0d;
  overflow: hidden;
  display: block;
}
body.home-2026 .h26-video__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
body.home-2026 .h26-video:hover .h26-video__img {
  transform: scale(1.04);
}
body.home-2026 .h26-video__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.8));
  pointer-events: none;
  transition: background .3s;
  z-index: 1;
}
body.home-2026 .h26-video:hover .h26-video__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.85));
}
body.home-2026 .h26-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--h26-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.08);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s, box-shadow .25s;
}
body.home-2026 .h26-video__play svg {
  width: 22px; height: 22px;
  fill: #fff;
  margin-left: 3px; /* optical center */
}
body.home-2026 .h26-video:hover .h26-video__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--h26-green-deep);
  box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 0 8px rgba(29,200,236,.15);
}
body.home-2026 .h26-video__label {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  color: #fff;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  z-index: 2;
  line-height: 1.35;
}
body.home-2026 .h26-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 5;
}
/* While playing — hide thumb overlay + play button + label (iframe sits on top) */
body.home-2026 .h26-video.is-playing .h26-video__overlay,
body.home-2026 .h26-video.is-playing .h26-video__play,
body.home-2026 .h26-video.is-playing .h26-video__label,
body.home-2026 .h26-video.is-playing .h26-video__img { display: none; }
body.home-2026 .h26-video.is-playing { cursor: default; transform: none; }
body.home-2026 .h26-video.is-playing:hover { transform: none; }

/* ───── Carousel nav arrows ───── */
body.home-2026 .h26-video-carousel__nav {
  position: absolute;
  top: calc(50% - 34px); /* thumb-centered (minus label allowance) */
  transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--h26-stroke);
  color: var(--h26-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.18);
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
body.home-2026 .h26-video-carousel__nav--prev { left: -22px; }
body.home-2026 .h26-video-carousel__nav--next { right: -22px; }
body.home-2026 .h26-video-carousel__nav:hover {
  background: var(--h26-green);
  color: #fff;
  border-color: var(--h26-green);
  transform: translateY(-50%) scale(1.06);
}
body.home-2026 .h26-video-carousel__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
body.home-2026 .h26-video-carousel__nav:focus-visible {
  outline: 2px solid var(--h26-green);
  outline-offset: 3px;
}

/* PROBLEM GRID */
body.home-2026 .h26-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── CATEGORY HUB EDITORIAL — uses cg-deep-content pattern (added 2026-05-08)
 * Now matches the niche-page deep-content treatment — simple magazine prose
 * inside a collapsed <article> with a "Read full guide" button that expands.
 * JS handler in main.js (initDeepContentExpand) toggles is-expanded.
 * The block of CSS that follows used to define an elaborate stat-card /
 * pitfall-card / channel-card accordion. Rolled back per audit feedback —
 * it was too much. Editorial now reads like the niche pages.
 * ───────────────────────────────────────────────────────────────────── */
.cg-section--editorial { padding: 56px 0; background: #fafbfc; }
.cg-section--editorial .cg-deep-content {
  max-width: 760px;
  margin: 0 auto;
}
.cg-section--editorial .cg-editorial-toc__eyebrow {
  max-width: 760px;
  margin: 0 auto 16px;
  text-align: center;
}
.cg-section--editorial .cg-deep-content__expand {
  display: block;
  margin: 24px auto 0;
}

/* (Removed v2/v3 elaborate accordion CSS. Editorial now uses the
   existing cg-deep-content styles already defined elsewhere in this
   file, matching the niche page treatment.) */

/* ── TOP INDUSTRIES priority block (added 2026-05-08) ─────────────────
 * 4×4 grid of curated highest-value niches. Priority-signaling block
 * for Google + AI — sits above the full 8-vertical discovery widget.
 * ───────────────────────────────────────────────────────────────────── */
body.home-2026 .h26-top-industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-top-industries__card {
  display: block;
  position: relative;
  padding: 22px 22px 20px;
  background: var(--h26-card, #fff);
  border: 1px solid var(--h26-stroke);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
body.home-2026 .h26-top-industries__card:hover {
  border-color: rgba(29,200,236,.55);
  background: rgba(29,200,236,.04);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,40,15,.08);
}
body.home-2026 .h26-top-industries__name {
  font: 700 16px/1.25 'Inter', system-ui, sans-serif;
  color: var(--h26-text, #0a0b0d);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
body.home-2026 .h26-top-industries__tagline {
  font: 400 12.5px/1.4 'Inter', system-ui, sans-serif;
  color: var(--h26-text-soft, rgba(10,11,13,.62));
}
body.home-2026 .h26-top-industries__arrow {
  position: absolute;
  top: 22px;
  right: 18px;
  color: rgba(10,11,13,.35);
  transition: color .15s, transform .15s;
}
body.home-2026 .h26-top-industries__card:hover .h26-top-industries__arrow {
  color: #1DC8EC;
  transform: translateX(2px);
}
body.home-2026 .h26-top-industries__footer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
body.home-2026 .h26-top-industries__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  background: transparent;
  color: var(--h26-text, #0a0b0d);
  text-decoration: none;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  transition: border-color .15s, background .15s;
}
body.home-2026 .h26-top-industries__all:hover {
  border-color: rgba(29,200,236,.55);
  background: rgba(29,200,236,.06);
  color: #00627E;
}

/* Responsive — 3 cols on medium, 2 cols on tablet, 1 col on small phones. */
@media (max-width: 980px) {
  body.home-2026 .h26-top-industries__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  body.home-2026 .h26-top-industries__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.home-2026 .h26-top-industries__card { padding: 18px 18px 16px; }
  body.home-2026 .h26-top-industries__name { font-size: 15px; }
  body.home-2026 .h26-top-industries__tagline { font-size: 12px; }
}
@media (max-width: 420px) {
  body.home-2026 .h26-top-industries__grid { grid-template-columns: 1fr; }
}
body.home-2026 .h26-problem {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-problem__num {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(239,68,68,.08);
  color: #dc2626;
  margin-bottom: 14px;
}
body.home-2026 .h26-problem__title {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--h26-text);
  margin-bottom: 10px;
  line-height: 1.25;
}
body.home-2026 .h26-problem__desc {
  font-size: 14px;
  color: var(--h26-text-dim);
  line-height: 1.6;
  margin: 0 0 16px;
}
body.home-2026 .h26-problem__fix {
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
  font-size: 13px;
  color: var(--h26-green-deep);
  font-weight: 600;
}

/* INDUSTRY DISCOVERY */
body.home-2026 .h26-discovery {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-discovery__sidebar {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 18px;
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 100px;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-discovery__sidebar-title {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-text-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  font-weight: 600;
}
body.home-2026 .h26-discovery__cat {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--h26-text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
  margin-bottom: 2px;
}
body.home-2026 .h26-discovery__cat:hover { background: rgba(10,11,13,.04); color: var(--h26-text); }
body.home-2026 .h26-discovery__cat.is-active { background: var(--h26-green); color: #fff; }
body.home-2026 .h26-discovery__cat-count {
  float: right;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  opacity: 0.7;
}
body.home-2026 .h26-discovery__sidebar-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
}
body.home-2026 .h26-discovery__sidebar-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--h26-green-deep);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}
body.home-2026 .h26-discovery__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
body.home-2026 .h26-discovery__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* Cards beyond the 12th are hidden until the user expands the grid. */
body.home-2026 .h26-discovery__list .h26-discovery__item[data-overflow] { display: none; }
body.home-2026 .h26-discovery__list.is-expanded .h26-discovery__item[data-overflow] { display: block; }

/* Show-all / Show-less toggle button (pill under the grid). */
body.home-2026 .h26-discovery__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  background: var(--h26-card);
  color: var(--h26-text);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-discovery__toggle:hover {
  border-color: var(--h26-green);
  background: rgba(29,200,236,.05);
  color: var(--h26-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(29,200,236,.22);
}
body.home-2026 .h26-discovery__toggle:focus-visible {
  outline: 2px solid var(--h26-green);
  outline-offset: 3px;
}
body.home-2026 .h26-discovery__toggle[hidden] { display: none !important; }
body.home-2026 .h26-discovery__item {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  padding: 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--h26-text);
  transition: all .2s;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-discovery__item:hover {
  border-color: var(--h26-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(29,200,236,.2);
}
body.home-2026 .h26-discovery__item-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--h26-text);
}
body.home-2026 .h26-discovery__item-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-text-dimmer);
  margin-top: 4px;
}

/* ROI CALCULATOR */
body.home-2026 .h26-section--roi { }
body.home-2026 .h26-roi {
  background: linear-gradient(135deg, #0095B8 0%, #005A7A 50%, #002E45 100%);
  border-radius: 28px;
  padding: 56px;
  max-width: 1200px;
  margin: 0 auto;
  color: #fff;
  box-shadow: 0 24px 60px -20px rgba(29,200,236,.3);
  position: relative;
  overflow: hidden;
}
body.home-2026 .h26-roi::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
body.home-2026 .h26-roi__head { text-align: center; margin-bottom: 40px; position: relative; }
body.home-2026 .h26-roi__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  margin-bottom: 10px;
  font-weight: 600;
}
body.home-2026 .h26-roi__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}
body.home-2026 .h26-roi__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
}
body.home-2026 .h26-roi__inputs {
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
body.home-2026 .h26-roi__field { display: block; margin-bottom: 18px; }
body.home-2026 .h26-roi__field-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  opacity: 0.95;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
body.home-2026 .h26-roi__field-input {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--h26-text);
  background: #fff;
  font-family: 'Geist', sans-serif;
  letter-spacing: -0.02em;
}
body.home-2026 .h26-roi__output {
  text-align: center;
}
body.home-2026 .h26-roi__output-label {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
body.home-2026 .h26-roi__output-value {
  font-family: 'Geist', sans-serif;
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-feature-settings: "tnum";
}
body.home-2026 .h26-roi__output-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  opacity: 0.85;
  margin-top: 10px;
  letter-spacing: 0.02em;
}
body.home-2026 .h26-roi__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--h26-text);
  padding: 12px 24px;
  border-radius: 100px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-top: 24px;
  text-decoration: none;
  transition: all .2s;
}
body.home-2026 .h26-roi__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* HOW IT WORKS */
body.home-2026 .h26-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-step {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-step__num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--h26-green-deep);
  background: var(--h26-green-soft);
  border: 1px solid rgba(29,200,236,.25);
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 20px;
}
body.home-2026 .h26-step__title {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--h26-text);
}
body.home-2026 .h26-step__desc {
  font-size: 14px;
  color: var(--h26-text-dim);
  line-height: 1.6;
  margin: 0;
}

/* LIVE BANNER */
body.home-2026 .h26-live-banner {
  background: #0a0b0d;
  color: #fff;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body.home-2026 .h26-live-banner__inner {
  display: flex;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
}
body.home-2026 .h26-live-banner__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
body.home-2026 .h26-live-banner__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--h26-green);
  box-shadow: 0 0 10px var(--h26-green-glow);
  animation: h26-pulse 2s ease-in-out infinite;
}
body.home-2026 .h26-live-banner__num {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  color: var(--h26-green);
  font-size: 17px;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* WHY GRID */
body.home-2026 .h26-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-why {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-why__title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--h26-text);
}
body.home-2026 .h26-why__desc {
  font-size: 13px;
  color: var(--h26-text-dim);
  line-height: 1.6;
  margin: 0;
}

/* GUARANTEE */
body.home-2026 .h26-guarantee {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-guarantee__item {
  text-align: center;
  padding: 28px 20px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 18px;
  box-shadow: var(--h26-shadow-sm);
}
body.home-2026 .h26-guarantee__title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--h26-text);
  margin-bottom: 8px;
}
body.home-2026 .h26-guarantee__desc {
  font-size: 13px;
  color: var(--h26-text-dim);
  line-height: 1.55;
  margin: 0;
}

/* FINAL CTA */
body.home-2026 .h26-final-cta {
  background: #0a0b0d;
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
body.home-2026 .h26-final-cta::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(29,200,236,.18), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
body.home-2026 .h26-final-cta__inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
body.home-2026 .h26-final-cta__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border: 1px solid rgba(29,200,236,.3);
  border-radius: 100px;
  background: rgba(29,200,236,.08);
  margin-bottom: 28px;
  font-weight: 600;
  display: inline-block;
}
body.home-2026 .h26-final-cta__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: #fff;
}
body.home-2026 .h26-final-cta__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  background: none;
  -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: #1DC8EC; color: #1DC8EC;
  text-shadow: 0 0 14px rgba(29,200,236,.65), 0 0 36px rgba(29,200,236,.32);
}
body.home-2026 .h26-final-cta__sub {
  font-size: 17px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin: 0 0 36px;
}
body.home-2026 .h26-final-cta__trust {
  margin-top: 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  letter-spacing: 0.04em;
}

/* LEAD FORM SPLIT */
body.home-2026 .h26-section--lead { background: var(--h26-bg-tint); }

/* Homepage uses the shared cg_render_lead_form_v2() layout. The full
   gradient backdrop + radial ambient highlights are defined further
   down in this file under "HOMEPAGE LEAD FORM V2" where they match
   the spoke/hub version exactly. We only set container width here;
   the earlier `background: var(--h26-bg-tint)` override was removed
   because it won the specificity war against the gradient. */
body.home-2026 #lead-form .cg-container {
  max-width: 1200px;
}
body.home-2026 .h26-lead-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
body.home-2026 .h26-lead-split__copy .h26-section__label { margin-bottom: 20px; }
body.home-2026 .h26-lead-split__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--h26-text);
  margin: 0 0 20px;
}
body.home-2026 .h26-lead-split__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--h26-green-deep);
}
body.home-2026 .h26-lead-split__sub {
  font-size: 16px;
  color: var(--h26-text-dim);
  line-height: 1.65;
  margin: 0 0 28px;
}
body.home-2026 .h26-lead-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.home-2026 .h26-lead-split__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--h26-text);
  margin-bottom: 12px;
}
body.home-2026 .h26-lead-split__list li::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--h26-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  flex-shrink: 0;
}
body.home-2026 .h26-lead-split__form {
  background: var(--h26-card);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 24px 60px -12px rgba(10,11,13,.12), 0 2px 8px rgba(10,11,13,.04);
  border: 1px solid var(--h26-stroke);
}
body.home-2026 .h26-lead-split__form textarea.h26-lead__input {
  resize: vertical;
  min-height: 88px;
  font-family: inherit;
}
body.home-2026 .h26-lead-split__form .h26-lead__submit {
  padding: 14px; font-size: 14px;
}

/* FOOTER — Concept E (dark/minimal) */
.h26-footer {
  background: #0a0b0d;
  color: rgba(255,255,255,.7);
  padding: 64px 0 0;
}
.h26-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
}
.h26-footer__col--brand p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin: 18px 0 22px;
  color: rgba(255,255,255,.55);
}
.h26-footer__partners {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.h26-footer__partner {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}
.h26-footer__partner-dot {
  width: 6px; height: 6px;
  background: var(--cg-green, #1DC8EC);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(29,200,236,.15);
  flex-shrink: 0;
}
.h26-footer__heading {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  font-weight: 600;
}
.h26-footer__col a {
  display: block;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
  transition: color .15s;
}
.h26-footer__col a:hover { color: var(--cg-green, #1DC8EC); }
.h26-footer__logo { display: inline-block; margin-bottom: 0; }
.h26-footer__logo-img {
  display: block;
  height: auto;
  max-height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.h26-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
}
.h26-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.h26-footer__bottom-inner a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  margin-left: 18px;
  transition: color .15s;
}
.h26-footer__bottom-inner a:hover { color: #fff; }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1100px) {
  body.home-2026 .h26-bento { grid-template-columns: repeat(4, 1fr); }
  body.home-2026 .h26-tile--dashboard { grid-column: span 4; grid-row: span 1; }
  body.home-2026 .h26-tile--lead { grid-column: span 4; grid-row: span 1; }
  body.home-2026 .h26-tile--quote { grid-column: span 4; }
  body.home-2026 .h26-tile--stat-sm { grid-column: span 2; }
  body.home-2026 .h26-tile--service { grid-column: span 2; }
  body.home-2026 .h26-tile--industries { grid-column: span 4; }
  body.home-2026 .h26-discovery { grid-template-columns: 1fr; }
  body.home-2026 .h26-discovery__sidebar { position: static; }
  .h26-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  body.home-2026 .h26-container,
  body.home-2026 .h26-announce .h26-container,
  body.home-2026 .h26-header .h26-container,
  .h26-footer .h26-container { padding: 0 20px; }
  /* Mobile nav: hide inline links + CTA, show hamburger instead. Hamburger
     toggles the drawer via JS (see initH26Mobile in main.js). */
  body.home-2026 .h26-nav__links { display: none; }
  body.home-2026 .h26-nav__burger { display: inline-flex; }
  /* Hero CTAs: stay side-by-side on mobile, share width 50/50 instead of
     stacking on overflow. Without this they wrap onto separate rows. */
  body.home-2026 .h26-hero__ctas { flex-wrap: nowrap; gap: 10px; }
  body.home-2026 .h26-hero__ctas .h26-btn { flex: 1 1 0; min-width: 0; padding: 14px 14px; justify-content: center; text-align: center; font-size: 13px; white-space: nowrap; }
  body.home-2026 .h26-hero { padding: 48px 0 40px; }
  body.home-2026 .h26-hero__title { font-size: clamp(40px, 10vw, 56px); }
  body.home-2026 .h26-bento { grid-template-columns: 1fr; }
  body.home-2026 .h26-tile--dashboard,
  body.home-2026 .h26-tile--lead,
  body.home-2026 .h26-tile--quote,
  body.home-2026 .h26-tile--stat-sm,
  body.home-2026 .h26-tile--service,
  body.home-2026 .h26-tile--industries { grid-column: span 1; }
  body.home-2026 .h26-dashboard__row { grid-template-columns: 1fr 1fr 1fr; }
  body.home-2026 .h26-trust-band__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  body.home-2026 .h26-problem-grid,
  body.home-2026 .h26-steps,
  body.home-2026 .h26-why-grid,
  body.home-2026 .h26-guarantee { grid-template-columns: 1fr; }
  /* Video carousel at tablet & mobile: show ~1.15 cards for a peek */
  body.home-2026 .h26-video { flex: 0 0 calc(100% - 12px); }
  body.home-2026 .h26-video-carousel__nav { display: none; }
  body.home-2026 .h26-discovery__list { grid-template-columns: repeat(2, 1fr); }
  body.home-2026 .h26-roi { padding: 36px 24px; }
  body.home-2026 .h26-roi__body { grid-template-columns: 1fr; gap: 24px; }
  body.home-2026 .h26-lead-split { grid-template-columns: 1fr; gap: 32px; }
  body.home-2026 .h26-section { padding: 64px 0; }
  body.home-2026 .h26-live-banner__inner { flex-direction: column; gap: 12px; }
  /* Footer mobile (Concept E dark): brand centered with partner chips,
     link cols stack with breathable spacing, bottom bar centered. */
  .h26-footer { padding: 48px 0 0; }
  .h26-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
    text-align: left;
  }
  .h26-footer__col--brand { text-align: center; }
  .h26-footer__col--brand p {
    max-width: none;
    margin: 16px auto 18px;
    font-size: 13.5px;
  }
  .h26-footer__partners { justify-content: center; }
  .h26-footer__logo { margin: 0 auto; }
  .h26-footer__logo-img { margin: 0 auto; }
  .h26-footer__heading { margin-bottom: 12px; }
  .h26-footer__col a { padding: 7px 0; font-size: 14.5px; }
  .h26-footer__bottom { padding: 20px 0 28px; }
  .h26-footer__bottom-inner { flex-direction: column; gap: 14px; text-align: center; }
  .h26-footer__bottom-inner a { margin: 0 8px; }
}

/* ═══════════════════════════════════════════════════════
 * 2026 HOMEPAGE — ICONS + BADGES (visual richness pass)
 * Appended after main 2026 stylesheet
 * ═══════════════════════════════════════════════════════ */

/* HERO PARTNER BADGES ROW */
body.home-2026 .h26-badges {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px 0 8px;
  flex-wrap: wrap;
}
body.home-2026 .h26-badges__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.home-2026 .h26-badges__item img {
  display: block;
  height: auto;
}
body.home-2026 .h26-badges__item--gpp img { width: 76px; height: 76px; object-fit: contain; }
body.home-2026 .h26-badges__item--ms img { width: 56px; height: 56px; object-fit: contain; }
body.home-2026 .h26-badges__stars {
  display: inline-flex;
  gap: 2px;
}
body.home-2026 .h26-badges__stars svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(255, 179, 0, .25));
}
body.home-2026 .h26-badges__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.home-2026 .h26-badges__cap strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--h26-text);
  letter-spacing: -0.01em;
  font-family: 'Geist', sans-serif;
}
body.home-2026 .h26-badges__cap span {
  font-size: 11px;
  color: var(--h26-text-dimmer);
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}
body.home-2026 .h26-badges__divider {
  width: 1px;
  align-self: stretch;
  background: var(--h26-stroke);
  min-height: 56px;
}

/* SERVICE TILE — header now has icon + num + arrow */
body.home-2026 .h26-service__header {
  align-items: center;
  gap: 10px;
}
body.home-2026 .h26-service__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--h26-green-soft);
  border: 1px solid rgba(29,200,236,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h26-green-deep);
  flex-shrink: 0;
}
body.home-2026 .h26-service__icon svg {
  width: 18px; height: 18px;
}
body.home-2026 .h26-service:hover .h26-service__icon {
  background: var(--h26-green);
  color: #fff;
  border-color: var(--h26-green);
  transform: rotate(-3deg);
  transition: all .25s cubic-bezier(.22,.61,.36,1);
}
body.home-2026 .h26-service__num {
  flex: 1;
  margin-left: 4px;
}

/* WHY CARDS — add icon */
body.home-2026 .h26-why { position: relative; padding: 32px 28px 28px; }
body.home-2026 .h26-why__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--h26-green-soft), rgba(29,200,236,.04));
  border: 1px solid rgba(29,200,236,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h26-green-deep);
  margin-bottom: 18px;
}
body.home-2026 .h26-why__icon svg {
  width: 22px; height: 22px;
}

/* RISK REVERSAL — add icon */
body.home-2026 .h26-guarantee__item {
  text-align: left;
  padding: 28px 24px;
}
body.home-2026 .h26-guarantee__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--h26-green-soft), rgba(29,200,236,.04));
  border: 1px solid rgba(29,200,236,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h26-green-deep);
  margin: 0 0 18px;
}
body.home-2026 .h26-guarantee__icon svg {
  width: 22px; height: 22px;
}

/* HOW IT WORKS STEPS — add icon orb */
body.home-2026 .h26-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding-top: 32px;
}
body.home-2026 .h26-step__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px var(--h26-green-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
body.home-2026 .h26-step__icon svg {
  width: 26px; height: 26px;
}
body.home-2026 .h26-step__num {
  position: absolute;
  top: 32px;
  right: 32px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--h26-text-dimmer);
  background: transparent;
  border: 1px solid var(--h26-stroke);
  padding: 4px 10px;
  border-radius: 100px;
}

/* BENTO TILE LABEL — small icon support */
body.home-2026 .h26-tile__label svg {
  width: 14px; height: 14px;
  color: var(--h26-text-dimmer);
}

/* DASHBOARD STAT CELLS — add small trend icons */
body.home-2026 .h26-dashboard__cell-trend::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 4px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--h26-green);
  box-shadow: 0 0 6px rgba(29,200,236,.4);
}

/* INDUSTRY DISCOVERY SIDEBAR — icon next to vertical name */
body.home-2026 .h26-discovery__cat {
  position: relative;
  padding-left: 38px;
}
body.home-2026 .h26-discovery__cat::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: all .15s;
}
body.home-2026 .h26-discovery__cat:hover::before { opacity: 1; }
body.home-2026 .h26-discovery__cat.is-active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  opacity: 1;
}

/* INDUSTRY DISCOVERY CARDS — add tiny pin icon to each item */
body.home-2026 .h26-discovery__item {
  position: relative;
  padding-left: 16px;
  padding-top: 18px;
}
body.home-2026 .h26-discovery__item::before {
  content: "";
  position: absolute;
  left: 16px; top: 18px;
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C546' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
body.home-2026 .h26-discovery__item-name {
  padding-left: 18px;
}
body.home-2026 .h26-discovery__item-meta {
  padding-left: 18px;
}

/* MARQUEE ITEMS — small dot prefix for visual rhythm */
body.home-2026 .h26-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
body.home-2026 .h26-marquee__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--h26-green);
  opacity: 0.55;
  flex-shrink: 0;
}
body.home-2026 .h26-marquee__item:hover::before { opacity: 1; }

/* ANNOUNCE STRIP CHIP — make it pop */
body.home-2026 .h26-announce__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.home-2026 .h26-announce__chip::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--h26-green);
  box-shadow: 0 0 6px var(--h26-green-glow);
  animation: h26-pulse 2s ease-in-out infinite;
}

/* RESPONSIVE — badges row */
@media (max-width: 780px) {
  body.home-2026 .h26-badges {
    gap: 18px;
    padding: 18px 0 4px;
  }
  body.home-2026 .h26-badges__divider { display: none; }
  body.home-2026 .h26-badges__item { flex: 1 1 100%; }
  body.home-2026 .h26-badges__item--gpp img { width: 56px; height: 56px; }
  body.home-2026 .h26-badges__item--ms img { width: 44px; height: 44px; }
  body.home-2026 .h26-step__num { right: 28px; }
}

/* ═══════════════════════════════════════════════════════
 * 2026 HOMEPAGE — WRITTEN REVIEWS (replaces video tiles)
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .h26-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-review {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--h26-shadow-md);
  transition: all .3s cubic-bezier(.22,.61,.36,1);
  display: flex;
  flex-direction: column;
  position: relative;
}
body.home-2026 .h26-review:hover {
  transform: translateY(-4px);
  box-shadow: var(--h26-shadow-lg);
  border-color: var(--h26-stroke-strong);
}
body.home-2026 .h26-review__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
body.home-2026 .h26-review__stars {
  display: inline-flex;
  gap: 2px;
}
body.home-2026 .h26-review__stars svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(255,179,0,.25));
}
body.home-2026 .h26-review__source {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--h26-stroke);
  flex-shrink: 0;
}
body.home-2026 .h26-review__source svg {
  width: 14px;
  height: 14px;
}
body.home-2026 .h26-review__quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--h26-text);
  margin: 0 0 22px;
  flex: 1;
  letter-spacing: -0.005em;
}
body.home-2026 .h26-review__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
}
body.home-2026 .h26-review__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(10,11,13,.08);
}
body.home-2026 .h26-review__person {
  flex: 1;
  min-width: 0;
}
body.home-2026 .h26-review__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--h26-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.home-2026 .h26-review__role {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.04em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.home-2026 .h26-review__result {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid rgba(29,200,236,.25);
  border-radius: 100px;
  color: var(--h26-green-deep);
  background: rgba(29,200,236,.06);
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* Mobile */
@media (max-width: 1100px) {
  body.home-2026 .h26-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  body.home-2026 .h26-reviews-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
 * 2026 HOMEPAGE — BADGE #4 (you-own-everything) + 4 LEVERS
 * ═══════════════════════════════════════════════════════ */

/* 4th hero badge — "You own everything" */
body.home-2026 .h26-badges__item--own .h26-badges__own-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--h26-green-soft), rgba(29,200,236,.04));
  border: 1px solid rgba(29,200,236,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h26-green-deep);
  flex-shrink: 0;
}
body.home-2026 .h26-badges__item--own .h26-badges__own-icon svg {
  width: 26px; height: 26px;
}

/* 4 LEVERS — larger, more concrete */
body.home-2026 .h26-levers-grid {
  grid-template-columns: repeat(4, 1fr);
}
body.home-2026 .h26-lever {
  position: relative;
  padding: 36px 28px 28px;
}
body.home-2026 .h26-lever__num {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--h26-text-dimmer);
  padding: 4px 9px;
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  background: #fff;
}
body.home-2026 .h26-lever .h26-why__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--h26-text);
}
body.home-2026 .h26-lever .h26-why__desc {
  font-size: 13px;
  color: var(--h26-text-dim);
  line-height: 1.6;
}
body.home-2026 .h26-lever .h26-why__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  body.home-2026 .h26-levers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  body.home-2026 .h26-levers-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
 * 2026 HOMEPAGE — ROUTING HUB (3 paths in)
 * Primary job of the homepage: route visitor to right spoke.
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .h26-routing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
body.home-2026 .h26-route {
  position: relative;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 22px;
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: all .3s cubic-bezier(.22,.61,.36,1);
  box-shadow: var(--h26-shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.home-2026 .h26-route::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(29,200,236,.06), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
body.home-2026 .h26-route:hover {
  border-color: var(--h26-green);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(29,200,236,.18), var(--h26-shadow-lg);
}
body.home-2026 .h26-route:hover::before { opacity: 1; }

/* Featured (middle "by industry") tile — subtly elevated */
body.home-2026 .h26-route--featured {
  background: linear-gradient(145deg, #ffffff, var(--h26-green-tint));
  border-color: rgba(29,200,236,.2);
}

body.home-2026 .h26-route__num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
body.home-2026 .h26-route__label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--h26-green-deep);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--h26-green-soft);
  border: 1px solid rgba(29,200,236,.2);
  align-self: flex-start;
}
body.home-2026 .h26-route__title {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--h26-text);
  margin: 0 0 12px;
}
body.home-2026 .h26-route__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--h26-green-deep);
  letter-spacing: 0;
}
body.home-2026 .h26-route__desc {
  font-size: 14px;
  color: var(--h26-text-dim);
  line-height: 1.6;
  margin: 0 0 20px;
}
body.home-2026 .h26-route__chips {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.home-2026 .h26-route__chips li a {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(10,11,13,.03);
  border: 1px solid var(--h26-stroke);
  color: var(--h26-text-soft);
  text-decoration: none;
  transition: all .15s;
}
body.home-2026 .h26-route__chips li a:hover {
  background: var(--h26-green-soft);
  border-color: rgba(29,200,236,.3);
  color: var(--h26-green-deep);
}
body.home-2026 .h26-route__cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--h26-green-deep);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
body.home-2026 .h26-route:hover .h26-route__cta {
  color: var(--h26-green);
}

/* PROBLEM CARD — make the fix a real link */
body.home-2026 .h26-problem__fix {
  display: inline-block;
  text-decoration: none;
  padding-top: 16px;
  border-top: 1px solid var(--h26-stroke);
  font-size: 13px;
  color: var(--h26-green-deep);
  font-weight: 600;
  transition: color .2s, transform .2s;
  margin-top: 4px;
}
body.home-2026 .h26-problem__fix:hover {
  color: var(--h26-green);
  transform: translateX(2px);
}

/* Responsive routing */
@media (max-width: 1100px) {
  body.home-2026 .h26-routing { grid-template-columns: 1fr; }
  /* On mobile, cards render in source order: 01 Service, 02 Industry, 03 Problem.
     (Previously forced featured=02 to grid-row:1, which gave a confusing 02→01→03.) */
}

/* ═══════════════════════════════════════════════════════
 * 2026 HOMEPAGE — DEFENSIVE MOBILE PASS
 * For the new routing + 4 levers + you-own badge sections.
 * ═══════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  /* Partner badges: new "You own everything" tile scales down */
  body.home-2026 .h26-badges__item--own .h26-badges__own-icon {
    width: 44px;
    height: 44px;
  }
  body.home-2026 .h26-badges__item--own .h26-badges__own-icon svg {
    width: 22px;
    height: 22px;
  }

  /* Hero title — prevent overflow on very long words */
  body.home-2026 .h26-hero__title {
    word-break: normal;
    hyphens: none;
  }

  /* Routing cards: tighten padding + chip layout */
  body.home-2026 .h26-route {
    padding: 28px 22px;
  }
  body.home-2026 .h26-route__title {
    font-size: 20px;
  }
  body.home-2026 .h26-route__chips {
    gap: 5px;
  }
  body.home-2026 .h26-route__chips li a {
    font-size: 10.5px;
    padding: 4px 9px;
  }

  /* 4-lever cards: tighter spacing */
  body.home-2026 .h26-lever {
    padding: 32px 24px 24px;
  }
  body.home-2026 .h26-lever__num {
    top: 24px;
    right: 24px;
  }

  /* Bento dashboard cells: prevent number overflow */
  body.home-2026 .h26-dashboard__row {
    gap: 8px;
  }
  body.home-2026 .h26-dashboard__cell {
    padding: 12px 10px;
  }
  body.home-2026 .h26-dashboard__cell-value {
    font-size: 18px;
  }

  /* Partner badges row: stack cleanly */
  body.home-2026 .h26-badges {
    gap: 20px;
    padding: 20px 0 8px;
  }
  body.home-2026 .h26-badges__divider {
    display: none;
  }
  body.home-2026 .h26-badges__item {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  /* Review cards: profile photo + name row doesn't wrap awkwardly */
  body.home-2026 .h26-review__foot {
    flex-wrap: wrap;
  }
  body.home-2026 .h26-review__result {
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  /* Ultra-small: stack partner badges vertically, no side-by-side */
  body.home-2026 .h26-badges {
    flex-direction: column;
    align-items: flex-start;
  }
  body.home-2026 .h26-badges__item {
    flex: none;
    width: 100%;
  }

  /* Trust band: 2-col at tablet becomes better stacked */
  body.home-2026 .h26-trust-band__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Hero bignum: prevent clamp minimum from being too large on tiny screens */
  body.home-2026 .h26-bignum {
    font-size: clamp(56px, 14vw, 84px);
  }
  body.home-2026 .h26-dashboard__row {
    grid-template-columns: 1fr;
  }
}

/* Safety: any SVG inside these new sections gets max-width */
body.home-2026 .h26-route svg,
body.home-2026 .h26-lever svg,
body.home-2026 .h26-badges svg,
body.home-2026 .h26-review svg {
  max-width: 100%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
 * ROUTING HUB — full-card click overlay
 * Outer <a> can't wrap inner <a> (HTML5 rejects nested anchors
 * and the DOM splays into siblings). So we use a <div> card with
 * an absolutely-positioned overlay anchor. Inner chip links
 * z-index above the overlay and stay independently clickable.
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .h26-route { position: relative; }
body.home-2026 .h26-route__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}
body.home-2026 .h26-route__cover:focus-visible {
  outline: 2px solid var(--h26-green);
  outline-offset: 3px;
}
/* Lift the card's visible content above the cover so text stays selectable
   and the chip links inside the card remain independently clickable. */
body.home-2026 .h26-route__num,
body.home-2026 .h26-route__label,
body.home-2026 .h26-route__title,
body.home-2026 .h26-route__desc,
body.home-2026 .h26-route__chips,
body.home-2026 .h26-route__cta {
  position: relative;
  z-index: 2;
}
body.home-2026 .h26-route__chips a { position: relative; z-index: 2; }

/* Subtle fade-in when the industry-discovery grid gets swapped. */
body.home-2026 .h26-discovery__list { transition: opacity .18s ease; }
body.home-2026 .h26-discovery__list.is-fading-in {
  animation: h26-discovery-fadein .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes h26-discovery-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Video testimonial carousel markup/styles now live near the top of the
 * 2026 homepage block (grep "VIDEO TESTIMONIAL CAROUSEL"). The prior
 * <a>-wrapper version is gone — the thumbnail is an <img> inside a <div>
 * card that the JS controller swaps for an <iframe> on click. */

/* ═══════════════════════════════════════════════════════════════════════
 * H26-SKIN DESIGN LANGUAGE — pilot on single spoke pages (2026-04)
 *
 * Opt-in design system that re-skins existing .cg-* components in the
 * 2026 Remix Light aesthetic (Geist typography, warm off-white bg,
 * iridescent-green accents, pill labels + CTAs, soft cards, balanced
 * headings). Markup is untouched — this overlay layers on top.
 *
 * Applied to: body.h26-skin (see cg_uses_h26_skin() in functions.php).
 * Currently: single-spoke.php only. Expand scope by editing that helper.
 * ═══════════════════════════════════════════════════════════════════════ */
body.h26-skin {
  /* Same design tokens as home-2026 — keep in sync when updating */
  --h26-bg:            #f6f7f4;
  --h26-bg-tint:       #eef4ed;
  --h26-card:          #ffffff;
  --h26-stroke:        rgba(15,18,22,0.08);
  --h26-stroke-strong: rgba(15,18,22,0.14);
  --h26-text:          #0f1216;
  --h26-text-dim:      rgba(15,18,22,0.72);
  --h26-text-dimmer:   rgba(15,18,22,0.48);
  --h26-green:         #1DC8EC;
  --h26-green-deep:    #006F8F;
  --h26-green-darker:  #00536B;
  --h26-green-tint:    #e8f8ee;
  --h26-shadow-sm:     0 1px 2px rgba(15,18,22,0.04), 0 1px 3px rgba(15,18,22,0.06);
  --h26-shadow-md:     0 4px 12px -2px rgba(15,18,22,0.08), 0 2px 6px rgba(15,18,22,0.05);
  --h26-shadow-lg:     0 18px 48px -12px rgba(15,18,22,0.16), 0 8px 20px -6px rgba(15,18,22,0.08);

  background: var(--h26-bg);
  color: var(--h26-text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* ───── TOP AMBIENT GLOW (matches home-2026::before/::after) ───── */
body.h26-skin::before {
  content: "";
  position: fixed;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(29,200,236,.08), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(29,200,236,.03), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 10;
}
body.h26-skin::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───── TYPOGRAPHY ───── */
body.h26-skin h1,
body.h26-skin h2,
body.h26-skin h3,
body.h26-skin h4 {
  font-family: 'Geist', sans-serif;
  color: var(--h26-text);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body.h26-skin p { text-wrap: pretty; }

/* Section-level head (label + title + sub) — matches home-2026 exactly */
body.h26-skin .cg-section__head {
  max-width: 1040px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.h26-skin .cg-section__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-green-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border: 1px solid rgba(29,200,236,.25);
  border-radius: 100px;
  background: rgba(29,200,236,.06);
  margin-bottom: 20px;
  font-weight: 600;
  display: inline-block;
}
body.h26-skin .cg-section__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--h26-text);
  text-wrap: balance;
}
/* Italicized em inside a title becomes the iridescent-green serif accent */
body.h26-skin .cg-section__title em,
body.h26-skin .cg-section__title i {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-skin .cg-section__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--h26-text-dim);
  max-width: 680px;
  margin: 0;
  text-wrap: pretty;
}

/* Section rhythm */
body.h26-skin .cg-section { padding: 100px 0; background: transparent; }
body.h26-skin .cg-section--gray { background: rgba(10,11,13,.02); border-top: 1px solid var(--h26-stroke); border-bottom: 1px solid var(--h26-stroke); }

/* ───── HERO (spoke) ───── */
body.h26-skin .cg-hero-spoke {
  background: linear-gradient(180deg, var(--h26-bg-tint), var(--h26-bg) 60%);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--h26-stroke);
}
body.h26-skin .cg-hero-spoke__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(29,200,236,.22);
  border-radius: 100px;
  background: rgba(29,200,236,.06);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--h26-green-deep);
  text-transform: uppercase;
  margin-bottom: 24px;
}
body.h26-skin .cg-hero-spoke__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--h26-green);
}
body.h26-skin .cg-hero-spoke__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.h26-skin .cg-hero-spoke__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-skin .cg-hero-spoke__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  max-width: 620px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
body.h26-skin .cg-hero-spoke__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

/* ───── CTAs (cg-btn family) ───── */
body.h26-skin .cg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
body.h26-skin .cg-btn--green {
  background: var(--h26-green);
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(29,200,236,.38), 0 1px 2px rgba(15,18,22,0.08);
}
body.h26-skin .cg-btn--green:hover {
  background: var(--h26-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -4px rgba(29,200,236,.5), 0 1px 2px rgba(15,18,22,0.08);
}
body.h26-skin .cg-btn--outline {
  background: var(--h26-card);
  color: var(--h26-text);
  border-color: var(--h26-stroke);
  box-shadow: var(--h26-shadow-sm);
}
body.h26-skin .cg-btn--outline:hover {
  border-color: var(--h26-green);
  color: var(--h26-green-deep);
  background: rgba(29,200,236,0.04);
  transform: translateY(-1px);
}

/* ───── Cards: benefits / stats / economics / comparison / sibling grids ───── */
body.h26-skin .cg-benefit-card,
body.h26-skin .cg-stat-card,
body.h26-skin .cg-process-step,
body.h26-skin .cg-sibling-card,
body.h26-skin .cg-faq-item,
body.h26-skin .cg-compare-col {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 18px;
  box-shadow: var(--h26-shadow-sm);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, border-color .25s;
}
body.h26-skin .cg-benefit-card:hover,
body.h26-skin .cg-sibling-card:hover,
body.h26-skin .cg-faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--h26-shadow-md);
  border-color: rgba(29,200,236,.25);
}

/* ───── Stats bar (overlapping hero) ───── */
body.h26-skin .cg-stats-bar {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 22px;
  box-shadow: var(--h26-shadow-lg);
}
body.h26-skin .cg-stat__number {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-skin .cg-stat__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h26-text-dimmer);
}

/* ───── Deep content (long-form body) ───── */
body.h26-skin .cg-content h2 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 2.4em 0 0.6em;
  text-wrap: balance;
}
body.h26-skin .cg-content h3 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 2em 0 0.5em;
  text-wrap: balance;
}
body.h26-skin .cg-content p,
body.h26-skin .cg-content li {
  font-size: 17px;
  line-height: 1.68;
  color: var(--h26-text-dim);
}
body.h26-skin .cg-content a {
  color: var(--h26-green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29,200,236,.4);
  transition: text-decoration-color .2s;
}
body.h26-skin .cg-content a:hover { text-decoration-color: var(--h26-green); }
body.h26-skin .cg-content strong { color: var(--h26-text); font-weight: 600; }
body.h26-skin .cg-content blockquote {
  border-left: 3px solid var(--h26-green);
  padding: 8px 0 8px 22px;
  margin: 32px 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--h26-text);
}

/* ───── FAQ items ───── */
body.h26-skin .cg-faq-item { padding: 4px 4px; }
body.h26-skin .cg-faq-question {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--h26-text);
  letter-spacing: -0.01em;
}

/* ───── Dark sections (why-dark, final-cta-dark) ───── */
body.h26-skin .cg-why-dark,
body.h26-skin .cg-final-cta-dark {
  background: #0a0b0d;
  border-radius: 28px;
  margin: 0 16px;
  padding: 80px 48px;
}
body.h26-skin .cg-why-dark h2,
body.h26-skin .cg-final-cta-dark h2 {
  color: #fff;
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
body.h26-skin .cg-why-dark h2 em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-skin .cg-final-cta-dark h2 em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  background: none;
  -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: #1DC8EC;
  color: #1DC8EC;
  text-shadow: 0 0 18px rgba(29,200,236,.55), 0 0 42px rgba(29,200,236,.28);
}

/* ───── Breadcrumbs ───── */
body.h26-skin .cg-breadcrumbs {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--h26-text-dimmer);
}
body.h26-skin .cg-breadcrumbs a { color: var(--h26-text-dim); text-decoration: none; }
body.h26-skin .cg-breadcrumbs a:hover { color: var(--h26-green-deep); }

/* ───── Trust strip (from single-spoke hero) ───── */
body.h26-skin .cg-trust-strip {
  background: transparent;
  border-top: 1px solid var(--h26-stroke);
  padding-top: 24px;
  margin-top: 28px;
}

/* ───── Sticky CTA + header leave alone, they're global chrome ───── */

/* Responsive tuning */
@media (max-width: 780px) {
  body.h26-skin .cg-hero-spoke { padding: 48px 0 40px; }
  body.h26-skin .cg-hero-spoke__title { font-size: clamp(34px, 9vw, 48px); }
  body.h26-skin .cg-section { padding: 64px 0; }
  body.h26-skin .cg-section__head { margin-bottom: 40px; }
  body.h26-skin .cg-why-dark,
  body.h26-skin .cg-final-cta-dark { padding: 56px 24px; margin: 0 8px; border-radius: 20px; }
}

/* ═══════════════════════════════════════════════════════
 * LEAD FORM — Service-chip multi-select + datalist + helper label
 * Used by both cg_render_lead_form_v2 and homepage split form.
 * ═══════════════════════════════════════════════════════ */
.cg-form__field-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,18,22,.62);
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cg-form__field-label span {
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(15,18,22,.42);
}
.cg-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.cg-form__chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.cg-form__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cg-form__chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f6f7f4;
  border: 1.5px solid rgba(15,18,22,.16);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(15,18,22,.78);
  letter-spacing: -.005em;
  transition: all .15s ease;
  white-space: nowrap;
}
.cg-form__chip span::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(15,18,22,.2);
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  transition: all .15s ease;
  flex-shrink: 0;
}
.cg-form__chip:hover span {
  border-color: rgba(29,200,236,.35);
  color: #057190;
}
.cg-form__chip input:checked + span {
  background: rgba(29,200,236,.08);
  border-color: #1DC8EC;
  color: #057190;
  font-weight: 600;
}
.cg-form__chip input:checked + span::before {
  background: #1DC8EC;
  border-color: #1DC8EC;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5l2.5 2.5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.cg-form__chip input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(29,200,236,.22);
}

/* Radio row — agency / business-owner routing question. Uses the same
   pill aesthetic as the chips above so the form reads as one family. */
.cg-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.cg-form__radio {
  position: relative;
  cursor: pointer;
  user-select: none;
  flex: 1 1 220px;
}
.cg-form__radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cg-form__radio span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #f6f7f4;
  border: 1.5px solid rgba(15,18,22,.16);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(15,18,22,.78);
  letter-spacing: -.005em;
  transition: all .15s ease;
}
.cg-form__radio span::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(15,18,22,.25);
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  transition: all .15s ease;
  flex-shrink: 0;
}
.cg-form__radio:hover span {
  border-color: rgba(29,200,236,.35);
  color: #057190;
}
.cg-form__radio input:checked + span {
  background: rgba(29,200,236,.08);
  border-color: #1DC8EC;
  color: #057190;
  font-weight: 600;
}
.cg-form__radio input:checked + span::before {
  border-color: #1DC8EC;
  background: radial-gradient(circle, #1DC8EC 0 5px, #fff 5px 100%);
}
.cg-form__radio input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(29,200,236,.22);
}

/* Homepage equivalent — h26-lead__radios */
body.home-2026 .h26-lead__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 6px;
}
body.home-2026 .h26-lead__radios-label {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(15,18,22,.85);
  margin-bottom: 6px;
}
body.home-2026 .h26-lead__radios-label span {
  font-weight: 400;
  color: rgba(15,18,22,.5);
}
body.home-2026 .h26-lead__radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid rgba(15,18,22,.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
body.home-2026 .h26-lead__radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.home-2026 .h26-lead__radio span {
  position: relative;
  padding-left: 26px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: rgba(15,18,22,.8);
  font-weight: 500;
}
body.home-2026 .h26-lead__radio span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(15,18,22,.25);
  border-radius: 50%;
  background: #fff;
}
body.home-2026 .h26-lead__radio:hover {
  border-color: rgba(29,200,236,.35);
}
body.home-2026 .h26-lead__radio input:checked ~ span {
  color: #057190;
  font-weight: 600;
}
body.home-2026 .h26-lead__radio:has(input:checked) {
  border-color: #1DC8EC;
  background: rgba(29,200,236,.06);
}
body.home-2026 .h26-lead__radio input:checked ~ span::before {
  border-color: #1DC8EC;
  background: radial-gradient(circle, #1DC8EC 0 5px, #fff 5px 100%);
}

/* Homepage form uses the SAME light chip styling as other pages.
   (Previous dark overrides caused white-on-white invisibility on the
   white form card.) Defaults defined above apply via inheritance. */

/* Dual-column email/phone row */
body.home-2026 .h26-lead__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Datalist arrow cue */
.cg-form__field--float input[list] {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(15,18,22,.35)' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px;
  padding-right: 38px;
}

@media (max-width: 600px) {
  .cg-form__chip span { font-size: 13px; padding: 9px 14px; }
  body.home-2026 .h26-lead__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
 * HOMEPAGE HERO (CONCEPT C-LIGHT) — trust chips + stats strip
 * ═══════════════════════════════════════════════════════ */

/* Primary button: white text (was dark) */
body.home-2026 .h26-btn--primary { color: #fff !important; }

/* Trust row under CTAs (Google Premier / Meta Business chips) */
body.home-2026 .h26-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  align-items: center;
}
body.home-2026 .h26-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,18,22,.68);
}
body.home-2026 .h26-hero__trust-item::before {
  content: '\2713';
  color: var(--h26-green, #1DC8EC);
  font-size: 13px;
  font-weight: 700;
}

/* 4-stat strip under the testimonial video */
body.home-2026 .h26-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 14px;
  background: #fff;
  border: 1px solid rgba(15,18,22,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
}
body.home-2026 .h26-hero-stats__item {
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid rgba(15,18,22,.08);
}
body.home-2026 .h26-hero-stats__item:last-child { border-right: 0; }
body.home-2026 .h26-hero-stats__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 3px;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .h26-hero-stats__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(15,18,22,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 700px) {
  body.home-2026 .h26-hero-stats { grid-template-columns: repeat(2, 1fr); }
  body.home-2026 .h26-hero-stats__item:nth-child(2) { border-right: 0; }
  body.home-2026 .h26-hero-stats__item:nth-child(1),
  body.home-2026 .h26-hero-stats__item:nth-child(2) { border-bottom: 1px solid rgba(15,18,22,.08); }
}

/* ═══════════════════════════════════════════════════════
 * ROUTING SECTION (CONCEPT C) — Interactive Tabs + Panel
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .h26-rtabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto 40px;
  background: rgba(15,18,22,.04);
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(15,18,22,.08);
}
body.home-2026 .h26-rtab {
  background: transparent;
  border: 0;
  padding: 18px 20px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .2s;
  text-align: left;
  font-family: 'Geist', sans-serif;
  color: inherit;
}
body.home-2026 .h26-rtab:hover { background: rgba(255,255,255,.6); }
body.home-2026 .h26-rtab--active {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.04);
}
body.home-2026 .h26-rtab__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: rgba(15,18,22,.3);
  min-width: 32px;
  flex-shrink: 0;
}
body.home-2026 .h26-rtab--active .h26-rtab__num {
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .h26-rtab__label {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(15,18,22,.45);
  margin-bottom: 3px;
}
body.home-2026 .h26-rtab--active .h26-rtab__label { color: var(--h26-green-deep, #057190); }
body.home-2026 .h26-rtab__title {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(15,18,22,.95);
  letter-spacing: -.01em;
  line-height: 1.15;
}

body.home-2026 .h26-rpanel {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(15,18,22,.08);
  border-radius: 24px;
  padding: 48px 48px 40px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.04);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
body.home-2026 .h26-rpanel__title {
  font-family: 'Geist', sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 16px;
  color: rgba(15,18,22,.98);
}
body.home-2026 .h26-rpanel__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .h26-rpanel__desc {
  font-size: 15.5px;
  color: rgba(15,18,22,.65);
  line-height: 1.55;
  margin-bottom: 24px;
}
body.home-2026 .h26-rpanel__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--h26-green, #1DC8EC);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
body.home-2026 .h26-rpanel__cta:hover {
  background: var(--h26-green-deep, #057190);
  transform: translateY(-1px);
  color: #fff;
}
body.home-2026 .h26-rpanel__r {
  background: #fafaf7;
  border: 1px solid rgba(15,18,22,.08);
  border-radius: 16px;
  padding: 24px;
}
body.home-2026 .h26-rpanel__r-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(15,18,22,.45);
  margin-bottom: 14px;
}
body.home-2026 .h26-rpanel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.home-2026 .h26-rchip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgba(15,18,22,.08);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15,18,22,.9);
  white-space: nowrap;
  text-decoration: none;
  transition: all .15s;
}
body.home-2026 .h26-rchip:hover {
  background: rgba(29,200,236,.06);
  border-color: rgba(29,200,236,.25);
  color: var(--h26-green-deep, #057190);
}
body.home-2026 .h26-rchip--more {
  background: var(--h26-green-tint, rgba(29,200,236,.06));
  border-color: rgba(29,200,236,.25);
  color: var(--h26-green-deep, #057190);
  font-weight: 600;
}

@media (max-width: 900px) {
  body.home-2026 .h26-rtabs { grid-template-columns: 1fr; }
  body.home-2026 .h26-rpanel { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
  body.home-2026 .h26-rpanel__title { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════
 * LEAD FORM V2 — strategy-call bullet list
 * (replaces the old 3-step timeline on non-homepage lead forms)
 * ═══════════════════════════════════════════════════════ */
.cg-lead-form-v2__bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cg-lead-form-v2__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(15,18,22,.85);
  line-height: 1.45;
}
.cg-lead-form-v2__bullet-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1DC8EC;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  margin-top: 1px;
  box-shadow: 0 0 0 3px rgba(29,200,236,.12);
}

/* ═══════════════════════════════════════════════════════
 * VIDEO TESTIMONIALS — EDITORIAL QUOTE + 4-THUMB ROW (Concept C)
 * Big pull-quote dominates, 4 thumbnails below, soft green halo bg.
 * ═══════════════════════════════════════════════════════ */
body.home-2026 #video-reviews { position: relative; overflow: hidden; }
body.home-2026 #video-reviews::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  height: 420px;
  background: radial-gradient(ellipse, rgba(29,200,236,.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body.home-2026 #video-reviews .h26-container { position: relative; z-index: 1; }
body.home-2026 .h26-vquote {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 44px;
  position: relative;
}
body.home-2026 .h26-vquote__mark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 90px;
  line-height: .5;
  color: var(--h26-green, #1DC8EC);
  opacity: .35;
  display: block;
  margin-bottom: -16px;
}
body.home-2026 .h26-vquote__text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 26px;
  color: var(--h26-text, #0f1216);
}
body.home-2026 .h26-vquote__text em {
  font-style: italic;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .h26-vquote__person {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
body.home-2026 .h26-vquote__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--h26-green, #1DC8EC), var(--h26-green-deep, #057190));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
}
body.home-2026 .h26-vquote__name {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--h26-text, #0f1216);
  text-align: left;
  line-height: 1.2;
}
body.home-2026 .h26-vquote__meta {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  color: rgba(15,18,22,.45);
  letter-spacing: .06em;
  margin-top: 2px;
}
body.home-2026 .h26-vrow-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,18,22,.45);
  text-align: center;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
body.home-2026 .h26-vrow-label::before,
body.home-2026 .h26-vrow-label::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: rgba(15,18,22,.12);
}
body.home-2026 .h26-vrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Hide the old carousel nav buttons (remnant from previous carousel) */
body.home-2026 .h26-video-carousel__nav { display: none; }

/* ── HORIZONTAL-SCROLL VARIANT: 12-video row with swipe + snap ── */
body.home-2026 .h26-vscroll {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
body.home-2026 .h26-vrow--scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--cg-green) transparent;
  padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
  max-width: none;
}
body.home-2026 .h26-vrow--scroll > .h26-video {
  scroll-snap-align: start;
  min-width: 300px;
}
body.home-2026 .h26-vrow--scroll::-webkit-scrollbar { height: 8px; }
body.home-2026 .h26-vrow--scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; }
body.home-2026 .h26-vrow--scroll::-webkit-scrollbar-thumb { background: rgba(29,200,236,0.6); border-radius: 4px; }
body.home-2026 .h26-vrow--scroll::-webkit-scrollbar-thumb:hover { background: var(--cg-green); }

/* (Right-edge fade gradient removed — it overlaid the last card's artwork.
   Mobile uses the animated "Swipe to see all" pill + 85%-width card peek
   to communicate scrollability; desktop has a visible scrollbar.) */

/* Mobile scroll hint, animated arrow pill above the row */
body.home-2026 .h26-vscroll__hint { display: none; }
@media (max-width: 780px) {
  body.home-2026 .h26-vscroll__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px 12px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cg-green-dark, #057A9B);
    background: rgba(29,200,236,0.1);
    border: 1px solid rgba(29,200,236,0.25);
    border-radius: 100px;
    animation: h26VScrollHint 1.8s ease-in-out infinite;
  }
  body.home-2026 .h26-vscroll__hint svg {
    animation: h26VScrollArrow 1.8s ease-in-out infinite;
  }
  @keyframes h26VScrollHint {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }
  @keyframes h26VScrollArrow {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50%      { transform: translateX(4px); opacity: 1; }
  }
  /* On mobile, show 1.1 cards at a time so a sliver of the next card
     peeks in and users see there's more content to the right */
  body.home-2026 .h26-vrow--scroll {
    grid-auto-columns: 85%;
    gap: 12px;
  }
  body.home-2026 .h26-vrow--scroll > .h26-video { min-width: unset; }
}

@media (max-width: 980px) {
  body.home-2026 .h26-vrow { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.home-2026 .h26-vquote__text { font-size: 22px; }
  body.home-2026 .h26-vquote__mark { font-size: 64px; margin-bottom: -12px; }
}
@media (max-width: 520px) {
  body.home-2026 .h26-vrow { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
 * HOMEPAGE LEAD FORM V2 — copy of the h26-preview form styles, re-scoped
 * to body.home-2026 so the homepage's #lead-form section renders the same
 * polished glass-card + floating-label + gradient-italic headline design
 * that the spokes use. Tokens below are local to this block so we don't
 * depend on h26-preview's scoped custom properties.
 * ══════════════════════════════════════════════════════════════════════ */
body.home-2026 #lead-form {
  --h26-bg-tint:       #eef4ed;
  --h26-green-tint:    #e8f8ee;
  --h26-green:         #1DC8EC;
  --h26-green-deep:    #006F8F;
  --h26-text:          #0f1216;
  --h26-text-dim:      rgba(15,18,22,0.72);
  --h26-text-dimmer:   rgba(15,18,22,0.48);
  --h26-stroke:        rgba(15,18,22,0.08);
  --h26-shadow-xl:     0 32px 80px -20px rgba(15,18,22,0.2), 0 16px 32px -12px rgba(15,18,22,0.12);
}

/* Gradient backdrop — starts deeper green at the top so it visually
   continues the dark final-CTA's green glow, then fades down. */
body.home-2026 #lead-form {
  background: linear-gradient(180deg,
    rgba(29,200,236,0.22) 0%,
    var(--h26-green-tint) 18%,
    #ffffff 70%);
  position: relative;
  overflow: hidden;
}
body.home-2026 #lead-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 80% 0%, rgba(29,200,236,.18), transparent 60%),
    radial-gradient(700px 280px at 10% 100%, rgba(29,200,236,.12), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
body.home-2026 #lead-form .cg-container { position: relative; z-index: 1; }

body.home-2026 .cg-lead-form-v2 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  align-items: start;
}

/* ── Left column: kicker + headline + timeline + trust ── */
body.home-2026 .cg-lead-form-v2__info { padding-top: 8px; }
body.home-2026 .cg-lead-form-v2__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--h26-text-dim);
  text-transform: uppercase;
  margin-bottom: 16px;
}
body.home-2026 .cg-lead-form-v2__label::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--h26-green);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(29,200,236,.18);
}
body.home-2026 .cg-lead-form-v2__heading {
  font-family: 'Geist', sans-serif;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.home-2026 .cg-lead-form-v2__heading em,
body.home-2026 .cg-lead-form-v2__heading i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .cg-lead-form-v2__desc {
  font-size: 16px;
  color: var(--h26-text-dim);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 460px;
  text-wrap: pretty;
}

/* What happens next — 3-step timeline */
body.home-2026 .cg-lead-form-v2__timeline {
  margin: 0 0 32px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(29,200,236,.18);
}
body.home-2026 .cg-lead-form-v2__timeline-label {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--h26-green-deep);
  text-transform: uppercase;
  margin-bottom: 18px;
}
body.home-2026 .cg-lead-form-v2__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
body.home-2026 .cg-lead-form-v2__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
body.home-2026 .cg-lead-form-v2__step-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-2026 .cg-lead-form-v2__step-title {
  font-family: 'Geist', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--h26-text);
  line-height: 1.3;
  margin-bottom: 4px;
}
body.home-2026 .cg-lead-form-v2__step-desc {
  font-size: 14px;
  color: var(--h26-text-dim);
  line-height: 1.5;
  margin: 0;
  max-width: 440px;
}

/* Trust strip — no longer rendered by the PHP. Hide any residual markup. */
body.home-2026 .cg-lead-form-v2__trust {
  display: none;
}
body.home-2026 .cg-lead-form-v2__trust-sep {
  color: var(--h26-text-dimmer);
  margin: 0 4px;
}

/* ── Right column: glass-morphism form card ── */
body.home-2026 .cg-lead-form-v2__card {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: var(--h26-shadow-xl);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Floating-label inputs */
body.home-2026 .cg-form__field--float {
  position: relative;
  margin-bottom: 16px;
}
body.home-2026 .cg-form__field--float label {
  position: absolute;
  left: 18px;
  top: 18px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: var(--h26-text-dimmer);
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
  background: transparent;
  padding: 0 4px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin: 0;
}
body.home-2026 .cg-form__field--float input,
body.home-2026 .cg-form__field--float select,
body.home-2026 .cg-form__field--float textarea {
  width: 100%;
  padding: 22px 18px 12px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--h26-stroke);
  border-radius: 12px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: var(--h26-text);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
body.home-2026 .cg-form__field--float input:focus,
body.home-2026 .cg-form__field--float select:focus,
body.home-2026 .cg-form__field--float textarea:focus {
  outline: none;
  border-color: var(--h26-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(29,200,236,.18);
}
/* Float label up when input has content or focus */
body.home-2026 .cg-form__field--float input:focus + label,
body.home-2026 .cg-form__field--float input:not(:placeholder-shown) + label,
body.home-2026 .cg-form__field--float textarea:focus + label,
body.home-2026 .cg-form__field--float textarea:not(:placeholder-shown) + label {
  top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--h26-green-deep);
}

/* Selects always show their placeholder option text inside the field, so
   the label has to be floated up by default — otherwise both render on
   top of each other. */
body.home-2026 .cg-form__field--select label {
  top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--h26-text-dim);
}
body.home-2026 .cg-form__field--select select:focus + label {
  color: var(--h26-green-deep);
}

/* Select arrow */
body.home-2026 .cg-form__field--select select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2300C546' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}

body.home-2026 .cg-form__submit { margin-top: 22px; }
body.home-2026 .cg-form__submit .cg-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 12px 28px -8px rgba(29,200,236,.5);
}
body.home-2026 .cg-form__submit .cg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(29,200,236,.6);
}

body.home-2026 .cg-form__privacy {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 16px 0 0;
}

/* Success state */
body.home-2026 .cg-form-success {
  text-align: center;
  padding: 32px 0 8px;
}
body.home-2026 .cg-form-success__icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 12px 28px -8px rgba(29,200,236,.5);
}
body.home-2026 .cg-form-success h3 {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  color: var(--h26-text);
}
body.home-2026 .cg-form-success p {
  font-size: 15px;
  color: var(--h26-text-dim);
  line-height: 1.55;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
 * ARCHIVE-LEARN / COURSES PAGE — modeled on clicksgeek.com/courses/
 * ══════════════════════════════════════════════════════════════════════ */

/* HERO: centered title on a soft-blue panel with faint arc line decor */
.cg-learn-hero {
  position: relative;
  padding: 96px 0 128px;
  background: linear-gradient(180deg, #eaf4ff 0%, #f3f8ff 60%, #ffffff 100%);
  border-bottom: 1px solid rgba(15,18,22,.06);
  overflow: hidden;
  text-align: center;
}
.cg-learn-hero__arcs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cg-learn-hero__arcs svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cg-learn-hero__title {
  position: relative;
  z-index: 1;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #15212e;
  margin: 0;
  text-wrap: balance;
}
.cg-learn-hero__title span {
  color: #1DC8EC;
  font-weight: 800;
}

/* COURSES LIST */
.cg-learn-courses {
  padding: 96px 0;
  background: #ffffff;
}
.cg-learn-list {
  display: flex;
  flex-direction: column;
  gap: 120px;
  max-width: 1160px;
  margin: 0 auto;
}
.cg-learn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cg-learn-row--alt .cg-learn-row__media { order: 2; }
.cg-learn-row--alt .cg-learn-row__copy  { order: 1; }

.cg-learn-row__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(15,30,50,.15), 0 8px 24px -8px rgba(15,30,50,.08);
  background: #fff;
}

/* Copy column */
.cg-learn-row__tier {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cg-learn-row__tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cg-learn-row__tier-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #15212e;
}

.cg-learn-row__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: #15212e;
  text-wrap: balance;
}
.cg-learn-row__desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: #5a6470;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.cg-learn-row__rule {
  border: 0;
  border-top: 1px solid #e2e8ee;
  margin: 4px 0 24px;
}

.cg-learn-row__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cg-learn-row__bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15.5px;
  font-weight: 600;
  color: #15212e;
}
.cg-learn-row__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.cg-learn-row__bullet-text {
  flex: 1;
}

/* Visit Course Page CTA — black pill to match source */
.cg-learn-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #15212e;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 100px;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 16px -6px rgba(15,33,46,.3);
}
.cg-learn-row__cta:hover {
  background: #0a1218;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(15,33,46,.4);
}

/* PARTNER BAND */
.cg-section--partner { background: #f6f9fc; }
.cg-partner-band {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.cg-partner-band__badge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-partner-band__badge img {
  max-width: 240px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(29,200,236,0.25));
}

/* TESTIMONIALS */
.cg-section--testimonials { background: #ffffff; padding: 96px 0; }
.cg-learn-vscroll { position: relative; max-width: 1280px; margin: 0 auto; }
.cg-learn-vrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 20px;
  scrollbar-width: thin;
  scrollbar-color: #1DC8EC transparent;
  -webkit-overflow-scrolling: touch;
}
.cg-learn-vrow::-webkit-scrollbar { height: 8px; }
.cg-learn-vrow::-webkit-scrollbar-track { background: rgba(0,0,0,.05); border-radius: 4px; }
.cg-learn-vrow::-webkit-scrollbar-thumb { background: rgba(29,200,236,.6); border-radius: 4px; }

.cg-learn-video { scroll-snap-align: start; min-width: 280px; display: block; text-decoration: none; color: inherit; }
.cg-learn-video__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #15212e;
  box-shadow: 0 14px 30px -10px rgba(15,30,50,.18), 0 4px 10px -4px rgba(15,30,50,.1);
  margin-bottom: 10px;
}
.cg-learn-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cg-learn-video:hover .cg-learn-video__thumb img { transform: scale(1.05); }
.cg-learn-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: #1DC8EC;
  color: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  box-shadow: 0 6px 16px -2px rgba(29,200,236,.55), 0 0 0 4px rgba(255,255,255,.85);
  transition: transform .2s ease;
}
.cg-learn-video:hover .cg-learn-video__play { transform: translate(-50%, -50%) scale(1.08); }
.cg-learn-video__label {
  font-size: 13.5px;
  font-weight: 600;
  color: #15212e;
  line-height: 1.3;
  padding: 0 4px;
}

.cg-learn-vscroll__hint { display: none; }
@media (max-width: 780px) {
  .cg-learn-vscroll__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 12px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #006F8F;
    background: rgba(29,200,236,.1);
    border: 1px solid rgba(29,200,236,.25);
    border-radius: 100px;
    animation: cg-learn-hint 1.8s ease-in-out infinite;
  }
  .cg-learn-vscroll__hint svg { animation: cg-learn-hint-arrow 1.8s ease-in-out infinite; }
  @keyframes cg-learn-hint { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  @keyframes cg-learn-hint-arrow { 0%,100% { transform: translateX(0); opacity: .6; } 50% { transform: translateX(4px); opacity: 1; } }
  .cg-learn-vrow { grid-auto-columns: 82%; }
  .cg-learn-video { min-width: unset; }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .cg-learn-hero { padding: 72px 0 96px; }
  .cg-learn-courses { padding: 72px 0; }
  .cg-learn-row { grid-template-columns: 1fr; gap: 36px; }
  .cg-learn-row--alt .cg-learn-row__media { order: unset; }
  .cg-learn-row--alt .cg-learn-row__copy  { order: unset; }
  .cg-learn-list { gap: 80px; }
  .cg-partner-band { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .cg-partner-band__badge { order: -1; }
}

/* ── Google Ads Agency composite — headshot + floating dashboard card ── */
.cg-learn-row__media--composite {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
}
.cg-learn-row__media--composite img.cg-learn-row__headshot {
  max-height: 560px;
  width: auto;
  height: auto;
  max-width: 85%;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  display: block;
  background: transparent;
  position: relative;
  z-index: 1;
  margin-right: -20px;
}

.cg-learn-dashboard {
  position: absolute;
  left: 0;
  bottom: 60px;
  z-index: 2;
  width: 68%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 24px 48px -12px rgba(15,30,50,.22), 0 8px 20px -8px rgba(15,30,50,.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cg-learn-dashboard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.cg-learn-dashboard__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cg-learn-dashboard__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cg-learn-dashboard__meta { line-height: 1.15; }
.cg-learn-dashboard__label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7580;
  text-transform: uppercase;
}
.cg-learn-dashboard__sub {
  font-size: 8.5px;
  font-weight: 600;
  color: #9aa2ad;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cg-learn-dashboard__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.cg-learn-dashboard__num {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #15212e;
  letter-spacing: -0.01em;
  line-height: 1;
}
.cg-learn-dashboard__delta {
  font-size: 10px;
  font-weight: 700;
  color: #0F7D9D;
  background: #e6f6ec;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .cg-learn-row__media--composite {
    min-height: auto;
    padding-bottom: 24px;
    justify-content: center;
  }
  .cg-learn-row__media--composite img.cg-learn-row__headshot {
    max-height: 440px;
    margin-right: 0;
  }
  .cg-learn-dashboard {
    left: 20px;
    bottom: 20px;
    max-width: 320px;
    padding: 16px 18px;
    gap: 12px;
  }
  .cg-learn-dashboard__num { font-size: 18px; }
}
@media (max-width: 600px) {
  .cg-learn-dashboard__row { gap: 14px; }
  .cg-learn-dashboard__num { font-size: 16px; }
  .cg-learn-dashboard__label { font-size: 8.5px; }
  .cg-learn-dashboard__sub { font-size: 7.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * GOOGLE ADS PPC COURSE (ACADEMY LANDING PAGE)
 * Mirrors clicksgeek.com/google-ads-ppc-course/ — hero, curriculum grid,
 * instructor block, student testimonials, FAQ, final enroll CTA.
 * ══════════════════════════════════════════════════════════════════════ */

.cg-gac-hero {
  position: relative;
  padding: 88px 0 72px;
  background: linear-gradient(180deg, #eaf4ff 0%, #f3f8ff 60%, #ffffff 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(15,18,22,.06);
}
.cg-gac-hero .cg-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  max-width: 1240px;
}
.cg-gac-hero__tag {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #1DC8EC;
  background: rgba(29,200,236,.10);
  border: 1px solid rgba(29,200,236,.25);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.cg-gac-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
  color: #15212e;
  text-wrap: balance;
}
.cg-gac-hero__title span {
  color: #1DC8EC;
}
.cg-gac-hero__sub {
  font-size: 17px;
  line-height: 1.6;
  color: #4a5a6a;
  margin: 0 0 28px;
  max-width: 560px;
}
.cg-gac-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cg-gac-hero__partners { display: flex; gap: 14px; flex-wrap: wrap; }
.cg-gac-hero__media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 32px 64px -20px rgba(15,30,50,.25), 0 12px 24px -10px rgba(15,30,50,.15);
  border: 1px solid rgba(15,18,22,.06);
}

/* Section rhythm */
.cg-gac-section { padding: 96px 0; background: #fff; }
.cg-gac-section__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.08;
  margin: 0 0 16px;
  color: #15212e;
  text-wrap: balance;
}
.cg-gac-section__title em {
  font-style: italic;
  font-weight: 700;
  color: #1DC8EC;
}
.cg-gac-head--center { text-align: center; max-width: 780px; margin: 0 auto 56px; }

/* Who this course is for */
.cg-gac-who {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
}
.cg-gac-who__copy p {
  font-size: 16px;
  line-height: 1.65;
  color: #4a5a6a;
  margin: 0 0 24px;
}
.cg-gac-who__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cg-gac-who__bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15.5px;
  font-weight: 600;
  color: #15212e;
}
.cg-gac-quote {
  padding: 20px 24px;
  border-left: 3px solid #1DC8EC;
  background: #f6faf6;
  border-radius: 0 12px 12px 0;
}
.cg-gac-quote__text { font-size: 17px; line-height: 1.5; color: #15212e; font-style: italic; margin-bottom: 14px; }
.cg-gac-quote__author { display: flex; align-items: center; gap: 12px; }
.cg-gac-quote__author img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; }
.cg-gac-quote__name { font-weight: 700; color: #15212e; font-size: 14px; }
.cg-gac-quote__role { font-size: 12px; color: #6b7580; letter-spacing: 0.02em; }
.cg-gac-who__badge { text-align: center; }
.cg-gac-who__badge img {
  max-width: 320px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(29,200,236,.18));
}

/* Curriculum grid */
.cg-gac-curriculum { background: #f6f9fc; }
.cg-gac-head__sub {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5a6a;
  margin: 16px auto 0;
  max-width: 680px;
  text-wrap: pretty;
}
.cg-gac-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.cg-gac-module {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px 24px 22px;
  border: 1px solid #e4ebf1;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  gap: 16px;
  min-height: 164px;
}
.cg-gac-module:hover {
  transform: translateY(-3px);
  border-color: rgba(29,200,236,.3);
  box-shadow: 0 22px 44px -16px rgba(15,30,50,.14), 0 6px 16px -6px rgba(15,30,50,.08);
}
.cg-gac-module__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(29,200,236,.14), rgba(29,200,236,.04));
  color: #006F8F;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  border: 1px solid rgba(29,200,236,.22);
}
.cg-gac-module__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-gac-module__num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #006F8F;
  text-transform: uppercase;
}
.cg-gac-module__title {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.22;
  margin: 0;
  color: #15212e;
  text-wrap: balance;
}
.cg-gac-module__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a5a6a;
  margin: 4px 0 0;
  text-wrap: pretty;
}
.cg-gac-module__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}
.cg-gac-module__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #4a5a6a;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cg-gac-module__tag svg { flex-shrink: 0; color: #006F8F; }
@media (max-width: 980px) {
  .cg-gac-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cg-gac-modules { grid-template-columns: 1fr; }
}

/* Bonus grid — flex-based so 1 or 2 cards center, 3+ cards wrap nicely. */
.cg-gac-bonus { background: linear-gradient(135deg, #f6faf6 0%, #eef4ed 100%); }
.cg-gac-bonus__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  max-width: 1160px;
  margin: 0 auto;
}
.cg-gac-bonus__card {
  flex: 0 1 360px;
  max-width: 380px;
  min-width: 280px;
  background: #fff;
  border: 1px solid rgba(29,200,236,.22);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cg-gac-bonus__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -14px rgba(29,200,236,.22), 0 8px 18px -8px rgba(15,30,50,.12);
}
.cg-gac-bonus__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef4ed, #ffffff);
  overflow: hidden;
}
.cg-gac-bonus__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cg-gac-bonus__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.cg-gac-bonus__kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #006F8F;
  text-transform: uppercase;
}
.cg-gac-bonus__name {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: #15212e;
  margin: 0;
}
.cg-gac-bonus__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5a6a;
  margin: 0;
}
.cg-gac-bonus__value {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(29,200,236,.12);
  color: #006F8F;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cg-gac-bonus__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.cg-gac-bonus__inner p {
  font-size: 17px;
  line-height: 1.65;
  color: #4a5a6a;
  margin: 16px auto 0;
  max-width: 680px;
}
/* Flex grid auto-wraps; only adjust card width at narrow breakpoints. */
@media (max-width: 600px) {
  .cg-gac-bonus__card { flex-basis: 100%; max-width: 420px; }
}

/* Instructor */
.cg-gac-instructor { background: #fff; }
.cg-gac-instructor__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
}
.cg-gac-instructor__media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 32px 64px -20px rgba(15,30,50,.2), 0 12px 24px -10px rgba(15,30,50,.12);
}
.cg-gac-instructor__copy p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #4a5a6a;
  margin: 0 0 24px;
}
.cg-gac-instructor__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid #e4ebf1;
}
.cg-gac-instructor__stat strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #1DC8EC;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.cg-gac-instructor__stat span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #6b7580;
  text-transform: uppercase;
}

/* Testimonials (reuses .cg-learn-vscroll styles) */
.cg-gac-testimonials { background: #f6f9fc; }

/* FAQ */
.cg-gac-faq { background: #fff; }
.cg-gac-faq__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  max-width: 1180px;
}
.cg-gac-faq__head p {
  font-size: 16px;
  line-height: 1.65;
  color: #4a5a6a;
  margin: 0 0 22px;
}
.cg-gac-faq__list { display: flex; flex-direction: column; gap: 12px; }
.cg-gac-faq__item {
  border: 1px solid #e4ebf1;
  border-radius: 14px;
  padding: 0 22px;
  background: #fff;
  transition: border-color .2s;
}
.cg-gac-faq__item[open] { border-color: rgba(29,200,236,.3); background: #f9fbf9; }
.cg-gac-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #15212e;
}
.cg-gac-faq__item summary::-webkit-details-marker { display: none; }
.cg-gac-faq__chev { flex-shrink: 0; transition: transform .25s; color: #1DC8EC; }
.cg-gac-faq__item[open] .cg-gac-faq__chev { transform: rotate(180deg); }
.cg-gac-faq__ans {
  padding: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a5a6a;
}

/* Final enroll CTA */
.cg-gac-enroll { background: #0a0b0d; color: #fff; padding: 112px 0; }
.cg-gac-enroll__inner {
  position: relative;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.cg-gac-enroll__glow { display: none; }
.cg-gac-enroll__inner > *:not(.cg-gac-enroll__glow) { position: relative; z-index: 1; }
.cg-gac-enroll__headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0 0 20px;
  text-wrap: balance;
  /* Force white — global h2 selectors elsewhere in main.css set this to
     dark navy (#15212e etc), which makes the non-italic text invisible
     on the black enroll panel. */
  color: #ffffff !important;
}
.cg-gac-enroll__headline em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, #1DC8EC, #7AD7F2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cg-gac-enroll__sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0 0 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cg-gac-enroll__trust {
  margin-top: 22px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.cg-btn--lg { padding: 18px 36px; font-size: 16px; }

/* Responsive */
@media (max-width: 1000px) {
  .cg-gac-hero .cg-container { grid-template-columns: 1fr; gap: 40px; }
  .cg-gac-hero__media { order: -1; max-width: 600px; margin: 0 auto; }
  .cg-gac-who { grid-template-columns: 1fr; gap: 40px; }
  .cg-gac-who__badge { order: -1; }
  .cg-gac-instructor__inner { grid-template-columns: 1fr; gap: 36px; }
  .cg-gac-instructor__media { max-width: 360px; margin: 0 auto; }
  .cg-gac-modules { grid-template-columns: repeat(2, 1fr); }
  .cg-gac-faq__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .cg-gac-modules { grid-template-columns: 1fr; }
  .cg-gac-instructor__stats { grid-template-columns: 1fr; gap: 14px; }
  .cg-gac-section { padding: 72px 0; }
  .cg-gac-enroll { padding: 88px 0; }
}

/* ── WHAT YOU'LL LEARN section (benefit grid) ── */
.cg-gac-whatyoullearn { background: #f6f9fc; }
.cg-gac-wyl__head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.cg-gac-wyl__sub {
  font-size: 17px;
  line-height: 1.65;
  color: #4a5a6a;
  margin: 16px auto 0;
  max-width: 640px;
}
.cg-gac-wyl__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}
.cg-gac-wyl__card {
  background: #fff;
  border: 1px solid #e4ebf1;
  border-radius: 16px;
  padding: 28px 26px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cg-gac-wyl__card:hover {
  transform: translateY(-3px);
  border-color: rgba(29,200,236,.3);
  box-shadow: 0 18px 40px -16px rgba(15,30,50,.14), 0 6px 16px -6px rgba(15,30,50,.08);
}
.cg-gac-wyl__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(29,200,236,.12), rgba(29,200,236,.04));
  color: #1DC8EC;
  margin-bottom: 18px;
}
.cg-gac-wyl__title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #15212e;
  margin: 0 0 10px;
}
.cg-gac-wyl__copy {
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a5a6a;
  margin: 0;
}
.cg-gac-wyl__cta {
  margin-top: 48px;
  text-align: center;
}
@media (max-width: 900px) {
  .cg-gac-wyl__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cg-gac-wyl__card { padding: 24px 22px; }
}
@media (max-width: 560px) {
  .cg-gac-wyl__grid { grid-template-columns: 1fr; }
}

/* ── Standalone .h26-video styles for the PPC course hero + any page that
   needs the click-to-play YouTube pattern outside of home-2026. The JS
   (initFab + click-to-play delegation in main.js) is already global. ── */
.cg-gac-hero__video {
  position: relative;
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: #0a0b0d;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 32px 64px -20px rgba(15,30,50,.28), 0 12px 24px -10px rgba(15,30,50,.16);
  border: 1px solid rgba(15,18,22,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Safari < 15 / older browsers that don't support aspect-ratio — fall back to
   a padding-bottom spacer so the card still reserves 16:9 height on mobile. */
@supports not (aspect-ratio: 16 / 9) {
  .cg-gac-hero__video::before { content: ''; display: block; padding-bottom: 56.25%; }
  .cg-gac-hero__video .h26-video__thumb { position: absolute; inset: 0; }
}
/* Mobile: ensure media column + video stay visible, never collapse. */
@media (max-width: 1000px) {
  .cg-gac-hero__media { display: block !important; width: 100%; }
  .cg-gac-hero__video { display: block; min-height: 200px; }
}
.cg-gac-hero__video:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px -24px rgba(15,30,50,.34), 0 16px 30px -12px rgba(15,30,50,.2);
}
.cg-gac-hero__video .h26-video__thumb {
  position: absolute;
  inset: 0;
  display: block;
}
.cg-gac-hero__video .h26-video__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.cg-gac-hero__video:hover .h26-video__img { transform: scale(1.03); }
.cg-gac-hero__video .h26-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.cg-gac-hero__video .h26-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 999px;
  background: #1DC8EC;
  color: #fff;
  border: 0;
  padding-left: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -4px rgba(29,200,236,.55), 0 0 0 6px rgba(255,255,255,.9);
  transition: transform .2s ease, background .2s ease;
}
.cg-gac-hero__video .h26-video__play svg { width: 34px; height: 34px; }
.cg-gac-hero__video:hover .h26-video__play { transform: translate(-50%, -50%) scale(1.06); background: #0081A6; }
.cg-gac-hero__video .h26-video__label {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  color: #fff;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.cg-gac-hero__video .h26-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cg-gac-hero__video.is-playing .h26-video__overlay,
.cg-gac-hero__video.is-playing .h26-video__play,
.cg-gac-hero__video.is-playing .h26-video__label,
.cg-gac-hero__video.is-playing .h26-video__img { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
 * ABOUT PAGE — inherits all shared .cg-hero-spoke / .cg-section / etc.
 * styling from h26-spoke-preview.css (auto-loaded because this page is
 * in cg_is_h26_preview()). Only adds the bits specific to About:
 * hero visual cluster, vision/mission split, featured quote, team grid.
 * ══════════════════════════════════════════════════════════════════════ */

/* HERO right-column visual cluster: Premier Partner badge + 3 team faces
   + corner stat card, fanned around a soft glow. */
body.h26-preview .cg-about-herovis {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin: 0 auto;
}
body.h26-preview .cg-about-herovis::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 50% 45%, rgba(29,200,236,.16), transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}
body.h26-preview .cg-about-herovis__badge {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 48%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 24px 48px -16px rgba(15,30,50,.18), 0 8px 18px -6px rgba(15,30,50,.1);
  border: 1px solid rgba(15,18,22,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.h26-preview .cg-about-herovis__badge img { width: 100%; height: auto; }
body.h26-preview .cg-about-herovis__face {
  position: absolute;
  width: 28%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 14px 32px -10px rgba(15,30,50,.25), 0 4px 12px -4px rgba(15,30,50,.15);
  background: linear-gradient(135deg, #e8f8ee, #f6faf6);
}
body.h26-preview .cg-about-herovis__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.h26-preview .cg-about-herovis__face--0 { bottom: 24%; left: 4%;  animation: cgAboutFloat 4s ease-in-out infinite; }
body.h26-preview .cg-about-herovis__face--1 { bottom: 6%;  left: 40%; animation: cgAboutFloat 5s ease-in-out infinite 0.4s; }
body.h26-preview .cg-about-herovis__face--2 { bottom: 24%; right: 4%; animation: cgAboutFloat 4.5s ease-in-out infinite 0.8s; }
@keyframes cgAboutFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
body.h26-preview .cg-about-herovis__stat {
  position: absolute;
  top: 30%;
  right: -6%;
  background: linear-gradient(135deg, #0a1218, #15212e);
  color: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(29,200,236,.28);
  box-shadow: 0 18px 36px -12px rgba(29,200,236,.35), 0 6px 14px -6px rgba(15,30,50,.2);
  text-align: left;
  min-width: 130px;
}
body.h26-preview .cg-about-herovis__stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  background: linear-gradient(135deg, #00C6FF, #1DC8EC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
body.h26-preview .cg-about-herovis__stat-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  line-height: 1.2;
}
@media (max-width: 1100px) {
  body.h26-preview .cg-about-herovis { max-width: 380px; }
  body.h26-preview .cg-about-herovis__stat { right: 0; }
}

/* VISION + MISSION split */
body.h26-preview .cg-about-vm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
body.h26-preview .cg-about-vm__card {
  padding: 44px 40px;
  border-radius: 22px;
  border: 1px solid var(--h26-stroke);
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-about-vm__card--light {
  background: linear-gradient(160deg, var(--h26-green-tint, #e8f8ee) 0%, #ffffff 100%);
  border-color: rgba(29,200,236,.2);
}
body.h26-preview .cg-about-vm__card--dark {
  background: linear-gradient(160deg, #0a0b0d, #15212e);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}
body.h26-preview .cg-about-vm__card--dark::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(29,200,236,.28), transparent 70%);
  pointer-events: none;
}
body.h26-preview .cg-about-vm__kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h26-green-deep, #006F8F);
  margin-bottom: 14px;
  position: relative;
}
body.h26-preview .cg-about-vm__card--dark .cg-about-vm__kicker { color: #00C6FF; }
body.h26-preview .cg-about-vm__card p {
  font-family: 'Inter', sans-serif;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--h26-text-dim, rgba(15,18,22,.72));
  margin: 0;
  position: relative;
  font-weight: 400;
  text-wrap: pretty;
}
body.h26-preview .cg-about-vm__card--dark p { color: rgba(255,255,255,.82); }

/* FEATURED QUOTE */
body.h26-preview .cg-about-quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
body.h26-preview .cg-about-quote__mark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 140px;
  line-height: 0.8;
  color: rgba(29,200,236,.3);
  margin-bottom: -24px;
}
body.h26-preview .cg-about-quote__text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.35;
  color: var(--h26-text, #0f1216);
  font-style: normal;
  font-weight: 400;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  text-wrap: balance;
}
body.h26-preview .cg-about-quote__text em {
  background: linear-gradient(135deg, #1DC8EC 0%, #1DC8EC 30%, #0095B8 52%, #006F8F 70%, #000000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
body.h26-preview .cg-about-quote__author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
body.h26-preview .cg-about-quote__avatar {
  width: 54px; height: 54px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
body.h26-preview .cg-about-quote__name {
  font-weight: 700;
  color: var(--h26-text);
  font-size: 16px;
  letter-spacing: -0.01em;
}
body.h26-preview .cg-about-quote__role {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--h26-text-dim);
  text-transform: uppercase;
}

/* TEAM GRID */
body.h26-preview .cg-about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}
body.h26-preview .cg-about-team__card {
  margin: 0;
  background: var(--h26-card, #fff);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--h26-stroke);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.h26-preview .cg-about-team__card:hover {
  transform: translateY(-4px);
  border-color: rgba(29,200,236,.3);
  box-shadow: var(--h26-shadow-lg, 0 20px 40px -12px rgba(15,30,50,.14));
}
body.h26-preview .cg-about-team__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--h26-green-tint, #e8f8ee), #f6faf6);
}
body.h26-preview .cg-about-team__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
body.h26-preview .cg-about-team__card:hover .cg-about-team__photo img { transform: scale(1.05); }
body.h26-preview .cg-about-team__meta { padding: 20px 22px; }
body.h26-preview .cg-about-team__name {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--h26-text);
  margin-bottom: 4px;
}
body.h26-preview .cg-about-team__role {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--h26-text-dim);
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  body.h26-preview .cg-about-vm { grid-template-columns: 1fr; }
  body.h26-preview .cg-about-team__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  body.h26-preview .cg-about-team__grid { grid-template-columns: repeat(2, 1fr); }
  body.h26-preview .cg-about-vm__card { padding: 32px 28px; }
}

/* Suppress the sitewide h26 chapter-counter pill on the About page.
   The 01/02/03 section numbering fits sequential content (niche hubs,
   services) but reads as noise on About where sections are thematic. */
body.h26-preview.page-template-page-about .cg-section__head::before,
body.h26-preview.page-template-page-about-php .cg-section__head::before {
  content: none !important;
  display: none !important;
}

/* About page only has 3 stats instead of the usual 4, so collapse the
   stats-bar grid from 4 columns to 3 — otherwise the empty 4th slot
   leaves a big gap of whitespace on the right. */
body.h26-preview.page-template-page-about .cg-stats-bar__inner,
body.h26-preview.page-template-page-about-php .cg-stats-bar__inner {
  grid-template-columns: repeat(3, 1fr);
}
/* Narrow the overall bar so 3 wide numbers (15,150/mo, etc.) feel
   anchored rather than marooned across the full 1260px. */
body.h26-preview.page-template-page-about .cg-stats-bar,
body.h26-preview.page-template-page-about-php .cg-stats-bar {
  max-width: 960px;
}
/* The About-specific 3-column rule above has higher specificity than
   the generic h26 responsive stack rules, so on mobile the stats stay
   as 3 squeezed columns (with long labels like "Contact Form
   Submissions" cramming and the value "/ mo" wrapping). Re-assert the
   stack at the same specificity — AND force a clean centered flex
   layout inside each item so the number sits cleanly above the label
   instead of being stretched across the full row width.  */
@media (max-width: 900px) {
  body.h26-preview.page-template-page-about .cg-stats-bar__inner,
  body.h26-preview.page-template-page-about-php .cg-stats-bar__inner {
    grid-template-columns: 1fr;
  }
  body.h26-preview.page-template-page-about .cg-stats-bar__item,
  body.h26-preview.page-template-page-about-php .cg-stats-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 16px;
    text-align: center;
  }
  body.h26-preview.page-template-page-about .cg-stats-bar__value,
  body.h26-preview.page-template-page-about-php .cg-stats-bar__value {
    font-size: 30px;
    white-space: nowrap;
    margin: 0;
    line-height: 1.1;
  }
  body.h26-preview.page-template-page-about .cg-stats-bar__label,
  body.h26-preview.page-template-page-about-php .cg-stats-bar__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    margin: 0;
    text-align: center;
  }
  /* About has a -40px negative top margin to tuck the stats bar up
     under the hero on desktop — on mobile there's no hero above, so
     drop the negative margin to avoid clipping into the preceding
     section's content. */
  body.h26-preview.page-template-page-about .cg-stats-bar,
  body.h26-preview.page-template-page-about-php .cg-stats-bar {
    margin-top: 24px;
    margin-bottom: 24px;
    max-width: 100%;
    padding: 0 16px;
  }
}

/* ── Course-landing optional bonus band (used on Agency Accelerator, REI, Landing Page) ── */
.cg-gac-bonus { background: linear-gradient(135deg, #f6faf6, #eef4ed); }
.cg-gac-bonus__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.cg-gac-bonus__inner p {
  font-size: 17px;
  line-height: 1.65;
  color: #4a5a6a;
  margin: 16px auto 0;
  max-width: 680px;
}
.cg-gac-section__title span {
  color: #1DC8EC;
  font-weight: 800;
}

/* ══════════════════════════════════════════════════════════════════════
 * ABOUT — 3 HERO CONCEPTS (previewable via ?concept=a|b|c on /about/)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── CONCEPT A — Editorial full-width team banner ── */
.cg-about-heroA {
  position: relative;
  padding: 112px 0 88px;
  background: linear-gradient(180deg, #eaf4ff 0%, #f3f8ff 55%, #ffffff 100%);
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(15,18,22,.06);
}
.cg-about-heroA__inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.cg-about-heroA__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(29,200,236,.25);
  border-radius: 100px;
  background: rgba(29,200,236,.06);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #006F8F;
  margin-bottom: 24px;
}
.cg-about-heroA__dot {
  width: 7px; height: 7px;
  background: #1DC8EC;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(29,200,236,.18);
}
.cg-about-heroA__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0 auto 22px;
  color: #15212e;
  text-wrap: balance;
  max-width: 920px;
}
.cg-about-heroA__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cg-about-heroA__sub {
  font-size: 17px;
  line-height: 1.6;
  color: #4a5a6a;
  margin: 0 auto 40px;
  max-width: 680px;
}
.cg-about-heroA__roster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 32px;
  flex-wrap: wrap;
  max-width: 860px;
}
.cg-about-heroA__face {
  width: 58px; height: 58px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px -8px rgba(15,30,50,.25), 0 3px 8px -3px rgba(15,30,50,.15);
  background: linear-gradient(135deg, #e8f8ee, #f6faf6);
  flex-shrink: 0;
  animation: cgAboutFaceFloat 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
}
.cg-about-heroA__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes cgAboutFaceFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.cg-about-heroA__rosterlabel {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a5a6a;
  padding: 8px 14px;
  border-radius: 100px;
  background: #ffffff;
  border: 1px solid rgba(15,30,50,.08);
  white-space: nowrap;
}
.cg-about-heroA__chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cg-about-heroA__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid rgba(15,30,50,.08);
  border-radius: 14px;
  min-width: 140px;
  box-shadow: 0 8px 18px -8px rgba(15,30,50,.1);
}
.cg-about-heroA__chip strong {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #15212e;
  letter-spacing: -0.015em;
  line-height: 1;
}
.cg-about-heroA__chip span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5a6a;
}
.cg-about-heroA__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .cg-about-heroA { padding: 88px 0 72px; }
  .cg-about-heroA__face { width: 48px; height: 48px; }
  .cg-about-heroA__chip { min-width: 120px; padding: 12px 18px; }
}

/* ── CONCEPT B — Story timeline hero ── */
.cg-about-heroB {
  position: relative;
  padding: 96px 0 80px;
  background: linear-gradient(180deg, #f0f8f2 0%, #f6f9fc 70%, #ffffff 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(15,18,22,.06);
}
.cg-about-heroB__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
}
.cg-about-heroB__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.02;
  color: #15212e;
  margin: 14px 0 20px;
  text-wrap: balance;
}
.cg-about-heroB__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cg-about-heroB__sub {
  font-size: 17px;
  line-height: 1.6;
  color: #4a5a6a;
  margin: 0 0 28px;
  max-width: 500px;
}
.cg-about-heroB__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cg-about-heroB__timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 52px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cg-about-heroB__timeline::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, rgba(29,200,236,.5), rgba(29,200,236,.15));
  border-radius: 2px;
}
.cg-about-heroB__step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 18px 22px 18px 0;
  background: #fff;
  border: 1px solid rgba(15,30,50,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(15,30,50,.1), 0 4px 12px -4px rgba(15,30,50,.06);
  margin-left: 36px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cg-about-heroB__step:hover {
  transform: translateX(4px);
  border-color: rgba(29,200,236,.3);
  box-shadow: 0 16px 34px -14px rgba(15,30,50,.16);
}
.cg-about-heroB__year {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 22px;
  align-self: center;
}
.cg-about-heroB__step-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #15212e;
  margin: 0 0 4px;
}
.cg-about-heroB__step-body p {
  font-size: 14px;
  line-height: 1.55;
  color: #4a5a6a;
  margin: 0;
}
.cg-about-heroB__dot {
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 999px;
  background: #1DC8EC;
  box-shadow: 0 0 0 4px rgba(29,200,236,.18), 0 0 0 8px #fff;
}
@media (max-width: 900px) {
  .cg-about-heroB__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── CONCEPT C — Founder-led ── */
.cg-about-heroC {
  position: relative;
  padding: 96px 0 80px;
  background: linear-gradient(180deg, #eef4ed 0%, #f3f8ff 50%, #ffffff 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(15,18,22,.06);
}
.cg-about-heroC__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
}
.cg-about-heroC__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #15212e;
  margin: 14px 0 20px;
  text-wrap: balance;
}
.cg-about-heroC__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cg-about-heroC__sub {
  font-size: 17px;
  line-height: 1.6;
  color: #4a5a6a;
  margin: 0 0 28px;
  max-width: 500px;
}
.cg-about-heroC__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cg-about-heroC__feature {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 480px;
  margin-left: auto;
}
.cg-about-heroC__portrait {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1218, #15212e);
  box-shadow: 0 32px 64px -20px rgba(15,30,50,.32), 0 12px 24px -10px rgba(15,30,50,.18);
}
.cg-about-heroC__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: saturate(.9) contrast(1.02);
}
.cg-about-heroC__card {
  position: absolute;
  bottom: 32px;
  left: -24px;
  right: 40px;
  background: #ffffff;
  padding: 22px 24px 20px;
  border-radius: 18px;
  border: 1px solid rgba(15,30,50,.06);
  box-shadow: 0 24px 48px -14px rgba(15,30,50,.28), 0 10px 22px -10px rgba(15,30,50,.15);
}
.cg-about-heroC__card-mark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 64px;
  line-height: 0.8;
  color: rgba(29,200,236,.35);
  position: absolute;
  top: -16px;
  left: 20px;
}
.cg-about-heroC__card blockquote {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: #15212e;
  margin: 0 0 14px;
  padding: 0;
}
.cg-about-heroC__card blockquote em {
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.cg-about-heroC__sig { border-top: 1px solid rgba(15,30,50,.08); padding-top: 12px; }
.cg-about-heroC__sig-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #15212e;
  letter-spacing: -0.01em;
}
.cg-about-heroC__sig-role {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7580;
  margin-top: 2px;
}
.cg-about-heroC__cluster {
  position: absolute;
  top: -24px;
  right: -16px;
  display: flex;
  align-items: center;
  gap: -8px;
}
.cg-about-heroC__chip {
  width: 52px; height: 52px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px -6px rgba(15,30,50,.25);
  background: linear-gradient(135deg, #e8f8ee, #f6faf6);
  margin-left: -14px;
  flex-shrink: 0;
}
.cg-about-heroC__chip:first-child { margin-left: 0; }
.cg-about-heroC__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-about-heroC__chip--count {
  background: linear-gradient(135deg, #0a1218, #15212e);
  color: #00C6FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  border-color: rgba(29,200,236,.35);
}
@media (max-width: 900px) {
  .cg-about-heroC__grid { grid-template-columns: 1fr; gap: 40px; }
  .cg-about-heroC__feature { margin: 0 auto; max-width: 400px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * BLOG — archive (home.php) + single post (single.php) + sidebar rail
 * Mirrors the preview at /blog-concepts.html.
 * ══════════════════════════════════════════════════════════════════════ */

/* ─── Archive hero ─── */
.cg-blog-hero { padding: 80px 0 56px; background: linear-gradient(180deg, #eefbf2 0%, #fff 70%); text-align: center; }
.cg-blog-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(29,200,236,.25); border-radius: 100px;
  background: rgba(29,200,236,.06);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #006F8F;
  margin-bottom: 18px;
}
.cg-blog-hero__dot { width: 7px; height: 7px; background: #1DC8EC; border-radius: 999px; box-shadow: 0 0 0 4px rgba(29,200,236,.18); }
.cg-blog-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.04;
  max-width: 900px; margin: 0 auto 18px;
  color: #101828; text-wrap: balance;
}
.cg-blog-hero__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: #006F8F;
}
.cg-blog-hero__sub { font-size: 18px; line-height: 1.6; color: #4a5a6a; max-width: 620px; margin: 0 auto; }

/* ─── Archive category filter ─── */
.cg-blog-filter {
  padding: 20px 0;
  border-bottom: 1px solid #e8ecf1;
  position: sticky; top: 78px; z-index: 40;
  background: rgba(250, 251, 251, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.cg-blog-filter__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cg-blog-filter__pill {
  padding: 9px 16px; border-radius: 100px;
  background: #f3f5f8;
  font-size: 13.5px; font-weight: 500;
  color: #4a5a6a;
  text-decoration: none;
  transition: all .15s;
}
.cg-blog-filter__pill:hover { color: #006F8F; }
.cg-blog-filter__pill.is-active { background: #101828; color: #fff; }
.cg-blog-filter__search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid #e8ecf1; border-radius: 100px;
  background: #fff; min-width: 240px;
}
.cg-blog-filter__search svg { width: 14px; height: 14px; color: #7a8898; }
.cg-blog-filter__search input { border: 0; outline: 0; font-family: inherit; font-size: 13.5px; background: transparent; color: #101828; width: 100%; }

/* ─── Archive featured hero card ─── */
.cg-blog-featured { padding: 56px 0 32px; }
.cg-blog-featured__card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  background: #fff; border-radius: 24px; padding: 12px;
  box-shadow: 0 8px 18px -6px rgba(15,30,50,.12);
}
.cg-blog-featured__media {
  aspect-ratio: 16/11; overflow: hidden; border-radius: 16px;
  background: linear-gradient(135deg, #15212e, #243445);
  position: relative; display: block;
}
.cg-blog-featured__media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(800px circle at 80% 20%, rgba(29,200,236,.18), transparent 50%);
  pointer-events: none;
}
.cg-blog-featured__media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.cg-blog-featured__body { padding: 20px 36px 20px 0; }
.cg-blog-featured__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(29,200,236,.10); color: #006F8F;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 16px; text-decoration: none;
}
.cg-blog-featured__title { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 16px; color: #101828; }
.cg-blog-featured__title a { color: inherit; text-decoration: none; transition: color .15s; }
.cg-blog-featured__title a:hover { color: #006F8F; }
.cg-blog-featured__excerpt { font-size: 16px; line-height: 1.6; color: #4a5a6a; margin-bottom: 22px; }
.cg-blog-featured__meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #7a8898; }
.cg-blog-featured__avatar { width: 32px !important; height: 32px !important; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.cg-blog-featured__author-name { color: #101828; font-weight: 500; }
.cg-blog-featured__sep { color: #7a8898; }

/* ─── Archive post grid ─── */
.cg-blog-grid { padding: 24px 0 100px; }
.cg-blog-grid__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; }
.cg-blog-grid__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #7a8898;
}
.cg-blog-grid__count { font-size: 13.5px; color: #4a5a6a; }
.cg-blog-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.cg-blog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8ecf1; border-radius: 16px;
  overflow: hidden; transition: all .2s;
}
.cg-blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(15,30,50,.12); border-color: rgba(29,200,236,.25); }
.cg-blog-card__media { aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #e8ecf1, #f3f5f8); display: block; }
.cg-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-blog-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.cg-blog-card__tag {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #006F8F; margin-bottom: 12px; text-decoration: none;
}
.cg-blog-card__title { font-size: 19px; font-weight: 700; letter-spacing: -.012em; line-height: 1.28; color: #101828; margin-bottom: 10px; }
.cg-blog-card__title a { color: inherit; text-decoration: none; }
.cg-blog-card:hover .cg-blog-card__title a { color: #006F8F; }
.cg-blog-card__excerpt {
  font-size: 13.5px; line-height: 1.55; color: #4a5a6a; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cg-blog-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #7a8898; margin-top: auto; }

.cg-blog-more { text-align: center; margin-top: 48px; }
.cg-blog-more a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; background: #101828; color: #fff !important;
  border-radius: 100px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
.cg-blog-more a:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(15,30,50,.2); }

.cg-blog-empty { text-align: center; padding: 80px 0; color: #4a5a6a; }
.cg-blog-empty h2 { font-size: 28px; color: #101828; margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════════
 * SINGLE POST
 * ══════════════════════════════════════════════════════════════════════ */

.cg-post-hero { padding: 64px 0 40px; text-align: center; }
.cg-post-crumbs {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; color: #7a8898; margin-bottom: 24px; letter-spacing: .03em;
}
.cg-post-crumbs a { color: #4a5a6a; text-decoration: none; transition: color .15s; }
.cg-post-crumbs a:hover { color: #006F8F; }
.cg-post-crumbs__sep { margin: 0 8px; color: #7a8898; }
.cg-post-hero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 100px;
  background: rgba(29,200,236,.10); color: #006F8F;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 22px;
}
.cg-post-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06;
  color: #101828; max-width: 780px; margin: 0 auto 22px;
  text-wrap: balance;
}
.cg-post-hero__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400; color: #006F8F;
}
.cg-post-hero__dek { font-size: 19px; line-height: 1.55; color: #4a5a6a; max-width: 680px; margin: 0 auto 36px; }
.cg-post-hero__meta { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13.5px; color: #7a8898; margin-bottom: 44px; flex-wrap: wrap; }
.cg-post-hero__avatar { width: 36px !important; height: 36px !important; border-radius: 50%; overflow: hidden; }
.cg-post-hero__author { color: #101828; font-weight: 500; }
.cg-post-hero__sep { color: #7a8898; }
.cg-post-hero__media {
  aspect-ratio: 16/9; max-width: 1120px; margin: 0 auto;
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, #15212e, #243445);
  box-shadow: 0 20px 40px -8px rgba(15,30,50,.18), 0 8px 16px -8px rgba(15,30,50,.10);
  position: relative;
}
.cg-post-hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px circle at 70% 30%, rgba(29,200,236,.15), transparent 55%);
  z-index: 1;
}
.cg-post-hero__media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; }

/* Body + sidebar grid */
.cg-post-body { padding: 64px 0 40px; }
.cg-post-body__grid {
  display: grid; grid-template-columns: minmax(0, 720px) 280px; gap: 64px;
  align-items: start; margin: 0 auto; max-width: 1096px;
}
.cg-post-body__content { font-size: 18px; line-height: 1.75; color: #101828; min-width: 0; }
.cg-post-body__content > *:first-child { margin-top: 0; }
.cg-post-body__content p { margin: 0 0 22px; }
.cg-post-body__content h2 { font-size: 28px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin: 40px 0 14px; color: #101828; scroll-margin-top: 120px; }
.cg-post-body__content h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 32px 0 10px; color: #101828; scroll-margin-top: 120px; }
.cg-post-body__content a { color: #006F8F; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(0,111,143,.4); transition: text-decoration-color .15s; }
.cg-post-body__content a:hover { text-decoration-color: #006F8F; }
.cg-post-body__content ul, .cg-post-body__content ol { margin: 22px 0; padding-left: 24px; }
.cg-post-body__content li { margin-bottom: 10px; }
.cg-post-body__content blockquote { border-left: 4px solid #1DC8EC; padding: 8px 0 8px 22px; margin: 28px 0; font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; font-style: italic; line-height: 1.45; color: #101828; }
.cg-post-body__content blockquote cite { display: block; margin-top: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; font-style: normal; color: #7a8898; letter-spacing: .08em; text-transform: uppercase; }
.cg-post-body__content code { background: #f3f5f8; padding: 2px 8px; border-radius: 4px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 15px; }
.cg-post-body__content figure { margin: 30px 0; }
.cg-post-body__content figure img { border-radius: 12px; }
.cg-post-body__content figcaption { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: #7a8898; text-align: center; margin-top: 10px; letter-spacing: .03em; text-transform: uppercase; }

/* Sidebar */
.cg-post-rail { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.cg-post-rail__card { background: #fff; border: 1px solid #e8ecf1; border-radius: 14px; padding: 22px; }
.cg-post-rail__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #006F8F; margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.cg-post-rail__label-dot { width: 6px; height: 6px; border-radius: 50%; background: #1DC8EC; }

/* TOC — list scrolls independently when it exceeds viewport so the
   Related / CTA cards below the rail stay visible on long articles. */
.cg-post-toc ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cdd4dc transparent;
  padding-right: 6px;
  margin-right: -6px;
}
.cg-post-toc ul::-webkit-scrollbar { width: 6px; }
.cg-post-toc ul::-webkit-scrollbar-track { background: transparent; }
.cg-post-toc ul::-webkit-scrollbar-thumb { background: #cdd4dc; border-radius: 3px; }
.cg-post-toc ul::-webkit-scrollbar-thumb:hover { background: #a8b2bd; }
.cg-post-toc a {
  display: block; padding: 8px 10px; border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.45; color: #4a5a6a;
  transition: all .15s; border-radius: 0 6px 6px 0;
  margin-left: -10px; text-decoration: none;
}
.cg-post-toc a:hover { color: #006F8F; background: #eefbf2; }
.cg-post-toc a.is-active { color: #101828; font-weight: 600; border-left-color: #1DC8EC; background: #eefbf2; }
.cg-post-toc a.is-sub { padding-left: 26px; font-size: 12.5px; }

/* Sidebar related */
.cg-post-rail__related { display: flex; flex-direction: column; gap: 14px; }
.cg-post-rail__related-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: flex-start; text-decoration: none; }
.cg-post-rail__related-thumb { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e8ecf1, #f3f5f8); }
.cg-post-rail__related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-post-rail__related-title {
  font-size: 13px; line-height: 1.35; color: #101828; font-weight: 600;
  letter-spacing: -.005em; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cg-post-rail__related-item:hover .cg-post-rail__related-title { color: #006F8F; }
.cg-post-rail__related-meta { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #7a8898; text-transform: uppercase; letter-spacing: .08em; }

/* Sidebar pricing CTA */
.cg-post-rail__cta { background: linear-gradient(135deg, #002e10, #00495E); color: #fff; border: 0; }
.cg-post-rail__cta .cg-post-rail__label { color: #B8E7F5; }
.cg-post-rail__cta h4 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 8px; color: #fff; }
.cg-post-rail__cta p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.78); margin: 0 0 14px; }
.cg-post-rail__cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; background: #1DC8EC; color: #fff !important;
  border: 0; border-radius: 100px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.cg-post-rail__cta-btn:hover { background: #00B9EE; transform: translateY(-1px); }

/* Share rail */
.cg-post-share {
  margin: 40px 0 0; padding-top: 28px;
  border-top: 1px solid #e8ecf1;
  display: flex; align-items: center; gap: 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #7a8898;
}
.cg-post-share__link {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f3f5f8; color: #4a5a6a;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cg-post-share__link:hover { background: #006F8F; color: #fff; }
.cg-post-share__link svg { width: 15px; height: 15px; }

/* Author card (soft-green band) */
.cg-post-author { padding: 56px 0; background: #eefbf2; }
.cg-post-author__card { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.cg-post-author__avatar { width: 72px !important; height: 72px !important; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 8px 18px -6px rgba(15,30,50,.12); }
.cg-post-author__label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #006F8F; font-weight: 700; margin-bottom: 6px; }
.cg-post-author__name { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #101828; }
.cg-post-author__bio { font-size: 14.5px; line-height: 1.55; color: #4a5a6a; margin: 0; }

/* Full related posts grid at bottom */
.cg-post-related { padding: 72px 0 96px; }
.cg-post-related__head { text-align: center; margin-bottom: 36px; }
.cg-post-related__label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #006F8F; font-weight: 700; margin-bottom: 10px; }
.cg-post-related__title { font-size: 32px; font-weight: 800; letter-spacing: -.015em; color: #101828; }
.cg-post-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ─── Blog responsive ─── */
@media (max-width: 1000px) {
  .cg-post-body__grid { grid-template-columns: 1fr; gap: 40px; }
  .cg-post-rail { position: static; }
  .cg-blog-filter { top: 70px; }
}
@media (max-width: 900px) {
  .cg-blog-featured__card { grid-template-columns: 1fr; gap: 0; }
  .cg-blog-featured__body { padding: 28px; }
  .cg-blog-grid__cards,
  .cg-post-related__grid { grid-template-columns: 1fr; gap: 24px; }
  .cg-blog-filter__search { margin-left: 0; min-width: auto; flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
 * LEAD MODAL — rendered in footer, triggered by [data-open-lead-modal]
 * ══════════════════════════════════════════════════════════════════════ */
.cg-lead-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 30, 50, .62);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  opacity: 0; transition: opacity .2s;
}
.cg-lead-modal.is-open { display: flex; opacity: 1; }
.cg-lead-modal[hidden] { display: none !important; }
.cg-lead-modal__card {
  position: relative; width: 100%; max-width: 640px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border-radius: 22px;
  box-shadow: 0 20px 40px -8px rgba(15,30,50,.18), 0 8px 16px -8px rgba(15,30,50,.10);
  padding: 44px 40px 36px;
  animation: cgLeadModalRise .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes cgLeadModalRise { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cg-lead-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #f3f5f8; color: #4a5a6a;
  display: grid; place-items: center;
  cursor: pointer; transition: all .15s;
}
.cg-lead-modal__close:hover { background: #101828; color: #fff; }
.cg-lead-modal__close svg { width: 16px; height: 16px; }
.cg-lead-modal__label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #006F8F; font-weight: 700; margin-bottom: 12px; }
.cg-lead-modal__title { font-size: 28px; font-weight: 800; letter-spacing: -.018em; line-height: 1.15; color: #101828; margin-bottom: 10px; text-wrap: balance; }
.cg-lead-modal__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #006F8F; }
.cg-lead-modal__sub { font-size: 15.5px; line-height: 1.55; color: #4a5a6a; margin: 0 0 22px; }
.cg-lead-modal__bullets { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.cg-lead-modal__bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: rgba(15,18,22,.85); }
.cg-lead-modal__check { width: 18px; height: 18px; border-radius: 50%; background: #1DC8EC; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; margin-top: 1px; box-shadow: 0 0 0 3px rgba(29,200,236,.12); }

.cg-lead-modal__form { display: flex; flex-direction: column; gap: 10px; }
.cg-lead-modal__input,
.cg-lead-modal__select {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 15.5px;
  border: 1.5px solid #e8ecf1; border-radius: 10px;
  background: #fff; color: #101828;
  transition: border-color .15s;
}
.cg-lead-modal__input::placeholder { color: #7a8898; }
.cg-lead-modal__input:focus,
.cg-lead-modal__select:focus { outline: 0; border-color: #1DC8EC; }
.cg-lead-modal__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-lead-modal__radios { display: flex; gap: 8px; margin-top: 4px; }
.cg-lead-modal__radios label { flex: 1; position: relative; cursor: pointer; }
.cg-lead-modal__radios input { position: absolute; opacity: 0; pointer-events: none; }
.cg-lead-modal__radios span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 14px; border: 1.5px solid #e8ecf1; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: #4a5a6a; transition: all .15s; }
.cg-lead-modal__radios input:checked + span { border-color: #1DC8EC; background: rgba(29,200,236,.08); color: #006F8F; font-weight: 600; }

/* Field label (above radios / chips) */
.cg-lead-modal__field-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4a5a6a;
  margin-top: 8px;
  margin-bottom: -2px;
}
.cg-lead-modal__field-label span {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #7a8898;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}
/* Field-label modifiers — first label has no top gap, gap label has extra
   spacing to visually separate the contact block from the industry block. */
.cg-lead-modal__field-label--first { margin-top: 0; }
.cg-lead-modal__field-label--gap   { margin-top: 22px; }

/* ── LEAD MODAL — 2026-04-26 "Plan A" REDESIGN ────────────────────────
 * Industry-first Step 1, popular chips, slim mobile intro, optional
 * website toggle. Only the additive rules — base modal styles untouched.
 * ───────────────────────────────────────────────────────────────────── */

/* Title swap — show desktop variant ≥720px, mobile variant <720px.
   Both inline by default; CSS hides the wrong one per breakpoint.
   Wrapper .cg-lead-modal__title sets size + weight; spans are content. */
.cg-lead-modal__title--mobile { display: none; }
.cg-lead-modal__title--desktop { display: inline; }
@media (max-width: 720px) {
  .cg-lead-modal__title--desktop { display: none; }
  .cg-lead-modal__title--mobile  { display: inline; }
  /* Mobile intro — hide bullets + desktop subhead. Action-first feel. */
  .cg-lead-modal__sub--desktop { display: none; }
  .cg-lead-modal__bullets      { display: none; }
  /* Tighter mobile title — current 28px is good but on cramped phones
     (≤375 wide) it pushes the Step 1 fields off-screen. Slim it. */
  .cg-lead-modal__title { font-size: 22px; line-height: 1.2; margin-bottom: 14px; }
  .cg-lead-modal__label { margin-bottom: 6px; }
}

/* Industry block — search-first layout (2026-04-26 redesign).
 * Hierarchy is communicated visually:
 *   1. Search input (primary)  → standard size, visible affordance
 *   2. "Common industries" chips (secondary) → small, muted background
 *   3. "Other / Not listed" link (fallback) → tiny muted text link
 */
.cg-industry-block { display: flex; flex-direction: column; gap: 4px; }

/* Mini-headings inside the industry block. These are smaller + softer
   than the main field-label so the hierarchy reads as: page label →
   sub-section labels. */
.cg-industry-block__sublabel {
  font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
  color: #6a7585;
  margin: 2px 0 4px;
  letter-spacing: 0;
  text-transform: none;
}
.cg-industry-block__sublabel--gap {
  margin-top: 14px;
}

/* "Common industries" chip row — secondary visual treatment. Smaller,
   more subdued than the previous "primary affordance" styling so the
   search input above reads as the main path. */
.cg-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}
.cg-popular-chips--small {
  /* hook for any future extra-small variants — currently same as base */
}
.cg-popular-chip {
  appearance: none;
  background: #f4f6f9;
  border: 1px solid transparent;
  color: #4a5566;
  border-radius: 999px;
  padding: 6px 12px;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: all .15s;
  min-height: 30px;
}
.cg-popular-chip:hover {
  background: rgba(29,200,236,.08);
  color: #006F8F;
}
.cg-popular-chip.is-active {
  background: rgba(29,200,236,.14);
  border-color: rgba(29,200,236,.35);
  color: #00627E;
  font-weight: 600;
}

/* "Other / Not listed" — muted text link below chips, visually de-
   emphasized so users perceive search + chips as the primary paths. */
.cg-industry-block__other {
  margin-top: 10px;
  font-size: 13px;
  color: #8a94a4;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cg-industry-block__other-prefix {
  font-weight: 400;
}
.cg-industry-block__other-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: #5a6473;
  text-decoration: underline;
  text-decoration-color: rgba(90,100,115,.35);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .15s;
}
.cg-industry-block__other-link:hover { color: #006F8F; text-decoration-color: rgba(0,111,143,.5); }

/* Custom-entry mode — when "Other" is active. Hide the chip row to focus
   the user on the free-text field. The free-text field becomes the
   primary input. */
.cg-industry-block.is-other-mode .cg-popular-chips,
.cg-industry-block.is-other-mode .cg-industry-block__sublabel:nth-of-type(2) {
  /* nth-of-type(2) targets the "Common industries" sublabel. */
  display: none;
}
.cg-industry-block.is-other-mode .cg-industry-block__other-link {
  color: #006F8F;
  text-decoration-color: rgba(0,111,143,.5);
  font-weight: 600;
}
.cg-industry-block__custom {
  margin-top: 10px;
}

@media (max-width: 480px) {
  /* On narrow phones, chips stay small but get a slightly bigger tap target. */
  .cg-popular-chip { padding: 8px 12px; font-size: 13px; min-height: 36px; }
}

/* ── PICKER CARDS — Step 1 of the branched lead form (2026-04-28) ───────
 * Two large tappable cards: Business Owner / Marketing Agency. Click
 * auto-advances to step 2 + sets the hidden is_agency value. Side-by-side
 * on desktop, stacked on mobile.
 * ───────────────────────────────────────────────────────────────────── */
.cg-picker-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 4px;
}
.cg-picker-card {
  appearance: none;
  background: #fff;
  border: 1.5px solid #e8ecf1;
  border-radius: 14px;
  padding: 22px 18px 20px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  font: inherit;
  color: inherit;
}
.cg-picker-card:hover {
  border-color: rgba(29,200,236,.55);
  background: rgba(29,200,236,.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,40,15,.08);
}
.cg-picker-card.is-active {
  border-color: #1DC8EC;
  background: rgba(29,200,236,.10);
  box-shadow: 0 0 0 3px rgba(29,200,236,.18);
}
.cg-picker-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(29,200,236,.10);
  color: #006F8F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.cg-picker-card__title {
  font: 700 16px/1.2 'Inter', system-ui, sans-serif;
  color: #0a1f12;
}
.cg-picker-card__sub {
  font: 400 13px/1.4 'Inter', system-ui, sans-serif;
  color: #5a6473;
}
.cg-form-step__note--centered { text-align: center; }

/* Mobile: stack vertically — full-width cards. */
@media (max-width: 560px) {
  .cg-picker-cards { grid-template-columns: 1fr; gap: 10px; }
  .cg-picker-card { padding: 18px 16px; flex-direction: row; align-items: center; gap: 14px; }
  .cg-picker-card__icon { width: 40px; height: 40px; flex-shrink: 0; margin-bottom: 0; }
  .cg-picker-card__title { font-size: 15.5px; }
  .cg-picker-card__sub { font-size: 12.5px; }
  /* Title + sub stacked in the right column on mobile. */
  .cg-picker-card { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "icon title" "icon sub"; gap: 0 14px; }
  .cg-picker-card__icon  { grid-area: icon; align-self: center; }
  .cg-picker-card__title { grid-area: title; }
  .cg-picker-card__sub   { grid-area: sub; }
}

/* Quad-radio variant for "How many clients need white-label services?" —
   four equal-width pill options in a 2-column grid that becomes 4-column
   on wider screens (matches the modal's roomier desktop layout). */
.cg-lead-modal__radios--quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
@media (min-width: 560px) {
  .cg-lead-modal__radios--quad { grid-template-columns: repeat(4, 1fr); }
}

/* Agency-only sub-line under the "Tell us about your agency" header.
   Lives where the industry block would have lived on the retail path. */
.cg-lead-modal__sub-line {
  font: 400 13.5px/1.5 'Inter', system-ui, sans-serif;
  color: #5a6473;
  margin: 4px 0 6px;
}

/* Bottom spacing fix — the form's submit button area felt cramped against
   the modal card edge. Adds breathing room so tapping doesn't feel like
   you're hitting the edge of the screen.
   Step 2 (split Back+Submit nav) gets extra room because there's no
   "30 seconds, no spam" note below it to provide implicit padding,
   so the button sits closer to the card edge by default. */
.cg-form-step .cg-form-nav { margin-top: 18px; }
.cg-form-step__note { margin-top: 12px; padding-bottom: 8px; }
.cg-form-step .cg-form-nav--split {
  margin-top: 22px;
  padding-bottom: 28px;
}
@media (max-width: 720px) {
  /* Mobile gets extra bottom space — the on-screen keyboard pushes the
     viewport, and a too-tight bottom edge feels claustrophobic. Step 2
     gets even more room since the submit is the only thing visible
     above the card edge after the keyboard closes. */
  .cg-form-step .cg-form-nav { padding-bottom: 14px; }
  .cg-form-step .cg-form-nav--split { padding-bottom: 40px; }
  .cg-lead-modal__card { padding-bottom: 32px; }
}

/* Clearable text inputs — × button positioned inside the input on the
 * right side. Makes it obvious users can change/clear their selection.
 * Hidden when input is empty (toggled via JS via the [hidden] attribute).
 *
 * The wrapper (.cg-autocomplete OR .cg-input-wrap) needs position:relative
 * so the absolutely-positioned button anchors correctly.
 */
.cg-autocomplete,
.cg-input-wrap {
  position: relative;
}
.cg-input--clearable {
  /* Make room on the right for the × button so text doesn't run under it. */
  padding-right: 40px;
}
.cg-input-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(138,148,164,.10);
  border: 0;
  border-radius: 50%;
  color: #6a7585;
  cursor: pointer;
  transition: background .15s, color .15s;
  padding: 0;
  /* Above the dropdown so click always lands on the button, not an option. */
  z-index: 3;
}
.cg-input-clear:hover {
  background: rgba(138,148,164,.22);
  color: #1a2230;
}
.cg-input-clear:focus-visible {
  outline: 2px solid rgba(29,200,236,.35);
  outline-offset: 2px;
}
.cg-input-clear[hidden] { display: none; }
@media (max-width: 480px) {
  /* Bigger tap target on mobile — easier to hit one-handed. */
  .cg-input-clear { width: 36px; height: 36px; right: 8px; }
  .cg-input--clearable { padding-right: 48px; }
}

/* Quiet autocomplete — when used inside [data-cg-autocomplete-mode="quiet"],
   the input doesn't auto-open a giant dropdown. Style it like a regular
   search field rather than a "click to see options" affordance. */
.cg-autocomplete--quiet .cg-autocomplete__input {
  /* match standard inputs — no special "this opens a list" affordance */
}

/* Optional website toggle — a <details> styled to look like a soft inline
   "+ Add website (optional)" link. Used to be a required-looking inline
   field, which created friction at exactly the wrong moment. */
.cg-lead-modal__optional {
  margin-top: 4px;
}
.cg-lead-modal__optional-toggle {
  display: inline-block;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: #5a6a7a;
  padding: 8px 0;
  list-style: none;
  outline: none;
  transition: color .15s;
}
.cg-lead-modal__optional-toggle::-webkit-details-marker { display: none; }
.cg-lead-modal__optional-toggle::marker { display: none; }
.cg-lead-modal__optional-toggle:hover { color: #006F8F; }
.cg-lead-modal__optional[open] .cg-lead-modal__optional-toggle { color: #006F8F; }
.cg-lead-modal__optional-input { margin-top: 6px; }

/* Services-of-interest chips */
.cg-lead-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.cg-lead-modal__chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.cg-lead-modal__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cg-lead-modal__chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f6f7f4;
  border: 1.5px solid rgba(15,18,22,.14);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(15,18,22,.78);
  letter-spacing: -.004em;
  transition: all .15s ease;
  white-space: nowrap;
}
.cg-lead-modal__chip span::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(15,18,22,.2);
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  transition: all .15s ease;
  flex-shrink: 0;
}
.cg-lead-modal__chip:hover span { border-color: rgba(29,200,236,.35); color: #006F8F; }
.cg-lead-modal__chip input:checked + span {
  background: rgba(29,200,236,.08);
  border-color: #1DC8EC;
  color: #006F8F;
  font-weight: 600;
}
.cg-lead-modal__chip input:checked + span::before {
  background: #1DC8EC url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5l2.5 2.5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: #1DC8EC;
}
.cg-lead-modal__chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(29,200,236,.22); }
.cg-lead-modal__submit {
  margin-top: 10px; padding: 16px 24px;
  background: #1DC8EC; color: #fff !important;
  border: 0; border-radius: 100px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(29,200,236,.45);
  transition: all .2s;
}
.cg-lead-modal__submit:hover { background: #006F8F; transform: translateY(-1px); box-shadow: 0 10px 24px -4px rgba(29,200,236,.55); }
.cg-lead-modal__submit:disabled { opacity: .6; cursor: wait; }

/* ─── Two-step lead form ──────────────────────────────────────────
   Used by sitewide modal AND homepage inline form. Step 1 = qualifier
   fields only; step 2 = deeper qualification. */
.cg-form-progress {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 18px; padding: 0 2px;
}
.cg-form-progress__label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: #4a5a6a; text-transform: uppercase;
}
.cg-form-progress__label b { color: #1DC8EC; font-weight: 700; }
.cg-form-progress__track {
  height: 4px; background: #e8ecf1; border-radius: 999px; overflow: hidden;
}
.cg-form-progress__fill {
  height: 100%; background: linear-gradient(90deg, #1DC8EC, #0083A8);
  border-radius: 999px; transition: width .35s ease;
}
.cg-form-step[hidden] { display: none; }
.cg-form-step { display: flex; flex-direction: column; gap: 12px; }
.cg-form-step__note {
  margin-top: 4px; text-align: center;
  font-size: 12.5px; color: #6a7785;
}
.cg-form-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cg-form-nav--split { flex-direction: row; align-items: center; gap: 12px; }
.cg-form-nav--split .cg-form-back { flex: 0 0 auto; }
.cg-form-nav--split .cg-lead-modal__submit,
.cg-form-nav--split .h26-lead__submit { flex: 1 1 auto; margin-top: 0; }
.cg-form-back {
  background: transparent; border: 0; color: #4a5a6a;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  padding: 12px 14px; border-radius: 100px; cursor: pointer;
  transition: color .15s, background .15s;
}
.cg-form-back:hover { color: #0c1116; background: rgba(0,0,0,.04); }

/* ─── Custom autocomplete ──────────────────────────────────────
   Replaces native HTML datalists for a properly mobile-friendly
   experience. Used by the industry field on every form. */
.cg-autocomplete { position: relative; }
.cg-autocomplete__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
}
.cg-autocomplete__dropdown[hidden] { display: none; }
.cg-autocomplete__option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #1f2937;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .12s;
  /* Min height so every row is a comfortable tap target on mobile */
  min-height: 44px;
}
.cg-autocomplete__option:hover,
.cg-autocomplete__option.is-active {
  background: rgba(29,200,236, .08);
  color: #006F8F;
}
.cg-autocomplete__option:focus { outline: none; }
.cg-autocomplete__option[hidden] { display: none; }

/* Mobile: bigger dropdown, fills more of the viewport, larger tap
   targets. The increased z-index + shadow help the list stay above
   nearby form elements when the virtual keyboard is open. */
@media (max-width: 640px) {
  /* Bottom-sheet picker on mobile — pinned to viewport, slides up from
     the bottom with a backdrop. Feels like a native iOS/Android picker
     instead of a tiny inline dropdown fighting the keyboard. */
  .cg-autocomplete.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 10000;
    animation: cgAcFade .18s ease;
  }
  .cg-autocomplete.is-open .cg-autocomplete__dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    max-height: 70vh;
    border-radius: 18px 18px 0 0;
    border: 0;
    padding: 10px 10px 24px;
    z-index: 10001;
    box-shadow: 0 -12px 40px -6px rgba(15, 23, 42, .30);
    animation: cgAcSlideUp .22s cubic-bezier(.22,.61,.36,1);
  }
  /* Grab-handle at the top of the sheet so users read it as a sheet. */
  .cg-autocomplete.is-open .cg-autocomplete__dropdown::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: #d4d9e0;
    border-radius: 4px;
    margin: 8px auto 12px;
  }
  .cg-autocomplete__option {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 16px 18px;
    min-height: 52px;
    line-height: 1.3;
    border-bottom: 1px solid #f1f3f6;
    border-radius: 0;
  }
  .cg-autocomplete__option:last-child { border-bottom: 0; }
}
@keyframes cgAcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cgAcSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Invalid state for required checkbox groups (services chips). The
   .is-invalid class is added by JS when the user submits without
   picking at least one chip. Cleared on next change event. */
[data-cg-required-group].is-invalid {
  outline: 2px solid #d92626;
  outline-offset: 6px;
  border-radius: 8px;
  animation: cgShake .35s ease;
}
@keyframes cgShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ─── YouTube thumbnail branded fallback ──────────────────────────
   When initCgVideoThumbFallback() detects YouTube's 120×90 grey
   placeholder it swaps the src to a branded SVG and adds this class. */
.h26-video__thumb--fallback { background: linear-gradient(135deg, #0a1f12, #1DC8EC); }
.h26-video__thumb--fallback .h26-video__img { object-fit: cover; }
/* Pre-load gradient — covers the millisecond between empty <img> paint
   and the real YouTube thumb arriving. Removes the "grey YouTube box"
   flash even on cards that DO get a real thumbnail. */
.h26-video__thumb { background: linear-gradient(135deg, #0a1f12 0%, #1DC8EC 120%); }

.cg-lead-modal__success { text-align: center; padding: 16px 0; }
.cg-lead-modal__success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: #1DC8EC; color: #fff;
  display: inline-grid; place-items: center;
  font-size: 26px; font-weight: 800;
  margin-bottom: 16px;
  box-shadow: 0 0 0 6px rgba(29,200,236,.12);
}
.cg-lead-modal__success h3 { font-size: 22px; font-weight: 700; color: #101828; margin: 0 0 8px; }
.cg-lead-modal__success p { font-size: 14px; line-height: 1.55; color: #4a5a6a; margin: 0 auto; max-width: 440px; }

/* "How did you hear about us?" — Other reveal. Hidden until dropdown === 'other' */
.cg-heard-about-other[hidden] { display: none !important; }

@media (max-width: 600px) {
  .cg-lead-modal { padding: 0; }
  .cg-lead-modal__card { border-radius: 0; max-height: 100vh; padding: 60px 24px 28px; }
  .cg-lead-modal__row2 { grid-template-columns: 1fr; }
  .cg-lead-modal__close {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: #101828;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    z-index: 10000;
  }
  .cg-lead-modal__close svg { width: 20px; height: 20px; stroke-width: 2.2; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 404 SOFT LANDING
 * ══════════════════════════════════════════════════════════════════════ */
.cg-404 { padding: 80px 0 100px; background: linear-gradient(180deg, #fff 0%, #f8faf9 100%); }
.cg-404__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.cg-404__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #006F8F; font-weight: 700; margin-bottom: 14px;
}
.cg-404__title { font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #101828; margin: 0 0 18px; text-wrap: balance; }
.cg-404__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #006F8F; }
.cg-404__sub { font-size: 17px; line-height: 1.6; color: #4a5a6a; margin: 0 0 28px; max-width: 520px; }
.cg-404__sub a { color: #006F8F; text-decoration: underline; text-underline-offset: 3px; }
.cg-404__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cg-404__services { background: #fff; border: 1px solid #e8ecf1; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 24px -8px rgba(15,30,50,.08); }
.cg-404__services-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7a8898; font-weight: 700; padding: 8px 4px 12px; border-bottom: 1px solid #f1f3f6; margin-bottom: 4px;
}
.cg-404__service { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s; }
.cg-404__service:hover { background: #eefbf2; }
.cg-404__service-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(29,200,236,.1); color: #006F8F; display: grid; place-items: center; }
.cg-404__service-ico svg { width: 22px; height: 22px; }
.cg-404__service-text { display: flex; flex-direction: column; gap: 2px; }
.cg-404__service-title { font-size: 15.5px; font-weight: 700; color: #101828; letter-spacing: -.005em; }
.cg-404__service-desc { font-size: 13px; color: #7a8898; }
.cg-404__service--all { justify-content: center; border-top: 1px solid #f1f3f6; margin-top: 6px; padding-top: 16px; }
.cg-404__service--all .cg-404__service-title { color: #006F8F; font-weight: 600; font-size: 14px; }
@media (max-width: 900px) {
  .cg-404__grid { grid-template-columns: 1fr; gap: 40px; }
  .cg-404__title { font-size: 32px; }
  .cg-404__sub { font-size: 15.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * MOBILE UX — Section 1 "Three ways in" → Expanded Stack
 * ══════════════════════════════════════════════════════════════════════ */
body.home-2026 .h26-rstack { display: none; }
@media (max-width: 760px) {
  body.home-2026 .h26-rtabs,
  body.home-2026 .h26-rpanel { display: none !important; }
  body.home-2026 .h26-rstack { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
  body.home-2026 .h26-rstack__card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 20px;
    padding: 22px;
    position: relative;
  }
  body.home-2026 .h26-rstack__card--featured {
    border: 2px solid #1DC8EC;
    box-shadow: 0 10px 30px -10px rgba(29,200,236, .2);
  }
  body.home-2026 .h26-rstack__badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: #1DC8EC;
    color: #fff;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
  }
  body.home-2026 .h26-rstack__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  body.home-2026 .h26-rstack__num-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #e0f6fd;
    color: #006F8F;
    display: grid;
    place-items: center;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
  }
  body.home-2026 .h26-rstack__lab {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4a5a6a;
    font-weight: 700;
  }
  body.home-2026 .h26-rstack__tit {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
    color: #101828;
    letter-spacing: -.015em;
    text-wrap: balance;
  }
  body.home-2026 .h26-rstack__tit em {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: #006F8F;
  }
  body.home-2026 .h26-rstack__desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: #4a5a6a;
    margin: 0 0 16px;
  }
  body.home-2026 .h26-rstack__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  body.home-2026 .h26-rstack__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #101828;
    color: #fff;
    padding: 11px 16px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
  }
  body.home-2026 .h26-rstack__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(16,24,40,.3);
  }
  body.home-2026 .h26-rstack__card--featured .h26-rstack__cta {
    background: #1DC8EC;
  }
  body.home-2026 .h26-rstack__card--featured .h26-rstack__cta:hover {
    background: #006F8F;
    box-shadow: 0 8px 18px -6px rgba(29,200,236,.45);
  }
  body.home-2026 .h26-rstack__hint {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * MOBILE UX — Section 2 "Browse by Vertical" → Accordion
 * ══════════════════════════════════════════════════════════════════════ */
body.home-2026 .h26-discovery__acc-chev { display: none; }
body.home-2026 .h26-discovery__acc-body  { display: none; }

@media (max-width: 760px) {
  /* Hide the right-column niche list on mobile — accordion bodies show niches inline */
  body.home-2026 .h26-discovery__main { display: none !important; }

  /* Sidebar becomes the full accordion */
  body.home-2026 .h26-discovery__sidebar { padding-bottom: 6px; }

  /* Each vertical row */
  body.home-2026 .h26-discovery__acc { border-bottom: 1px solid #f1f3f6; }
  body.home-2026 .h26-discovery__acc:last-of-type { border-bottom: 0; }

  /* Neutralize the active background — accordion handles visual state */
  body.home-2026 .h26-discovery__cat,
  body.home-2026 .h26-discovery__cat.is-active {
    background: transparent !important;
    color: #101828 !important;
    padding-right: 40px;
    position: relative;
  }
  body.home-2026 .h26-discovery__cat::before { opacity: 0 !important; }

  body.home-2026 .h26-discovery__acc.is-open .h26-discovery__cat {
    color: #006F8F !important;
    font-weight: 700;
  }

  body.home-2026 .h26-discovery__acc-chev {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #7a8898;
    transition: transform .25s, color .25s;
  }
  body.home-2026 .h26-discovery__acc.is-open .h26-discovery__acc-chev {
    transform: translateY(-50%) rotate(180deg);
    color: #006F8F;
  }

  body.home-2026 .h26-discovery__acc-body {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(.22,.61,.36,1);
  }
  body.home-2026 .h26-discovery__acc.is-open .h26-discovery__acc-body {
    max-height: 1200px;
  }
  body.home-2026 .h26-discovery__acc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px 14px 14px;
  }
  body.home-2026 .h26-discovery__acc-niche {
    display: block;
    background: #eefbf2;
    color: #006F8F;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.3;
  }
  body.home-2026 .h26-discovery__acc-niche:hover { background: #d9f5e3; }
  body.home-2026 .h26-discovery__acc-more {
    display: block;
    margin: 4px 14px 14px;
    padding: 12px 14px;
    background: #101828;
    color: #fff;
    border-radius: 100px;
    text-align: center;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * INDUSTRY SMART SEARCH  (archive-category_hub.php)
 * ══════════════════════════════════════════════════════════════════════ */
.cg-ind-search { max-width: 640px; margin: 0 auto 28px; position: relative; }
.cg-ind-search__field {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #e8ecf1; border-radius: 100px;
  padding: 12px 18px; box-shadow: 0 6px 18px -10px rgba(15,30,50,.08);
  transition: border-color .15s, box-shadow .15s;
}
.cg-ind-search__field:focus-within {
  border-color: #1DC8EC;
  box-shadow: 0 8px 24px -8px rgba(29,200,236,.18);
}
.cg-ind-search__icon { color: #7a8898; flex-shrink: 0; }
.cg-ind-search__input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15.5px; color: #101828;
  padding: 2px 0;
}
.cg-ind-search__input::placeholder { color: #7a8898; }
.cg-ind-search__clear {
  background: #f3f5f8; border: 0; width: 24px; height: 24px;
  border-radius: 50%; color: #4a5a6a; cursor: pointer;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.cg-ind-search__clear:hover { background: #e8ecf1; color: #101828; }
.cg-ind-search__results {
  margin-top: 14px; background: #fff;
  border: 1px solid #e8ecf1; border-radius: 18px;
  box-shadow: 0 12px 32px -12px rgba(15,30,50,.18);
  padding: 8px;
  max-height: 520px; overflow-y: auto;
}
.cg-ind-search__group { padding: 6px 4px 10px; }
.cg-ind-search__group + .cg-ind-search__group { border-top: 1px solid #f1f3f6; }
.cg-ind-search__group[hidden] { display: none; }
.cg-ind-search__group-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #7a8898; font-weight: 700; padding: 8px 12px 6px;
}
.cg-ind-search__group-list { display: flex; flex-direction: column; gap: 2px; }
.cg-ind-search__item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  text-decoration: none; color: #101828;
  transition: background .12s;
}
.cg-ind-search__item:hover,
.cg-ind-search__item:focus-visible {
  background: #eefbf2; color: #006F8F; outline: none;
}
.cg-ind-search__item-name { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.cg-ind-search__item-name mark {
  background: rgba(29,200,236, .22); color: inherit;
  padding: 0 2px; border-radius: 3px; font-weight: 700;
}
.cg-ind-search__item-sub {
  font-size: 12px; color: #7a8898;
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .02em;
}
.cg-ind-search__item svg { color: #7a8898; flex-shrink: 0; }
.cg-ind-search__item:hover svg { color: #006F8F; transform: translateX(2px); transition: transform .15s, color .15s; }
.cg-ind-search__empty {
  padding: 24px 18px; text-align: center;
  color: #4a5a6a; font-size: 14.5px; line-height: 1.5;
}
.cg-ind-search__empty a {
  display: inline-block; margin-top: 8px;
  color: #006F8F; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(0,111,143,.4);
}
.cg-ind-search__empty a:hover { border-bottom-color: #006F8F; }

@media (max-width: 640px) {
  .cg-ind-search__field { padding: 10px 14px; border-radius: 14px; }
  .cg-ind-search__input { font-size: 16px; /* prevent iOS zoom */ }
  .cg-ind-search__results { max-height: 60vh; }
  .cg-ind-search__item { padding: 14px; }
}

/* Lead modal success state — hide the marketing copy so only the
   confirmation message ("Got it, talk soon") shows. Cleaner UX. */
.cg-lead-modal__card.is-success .cg-lead-modal__label,
.cg-lead-modal__card.is-success .cg-lead-modal__title,
.cg-lead-modal__card.is-success .cg-lead-modal__sub,
.cg-lead-modal__card.is-success .cg-lead-modal__bullets {
  display: none !important;
}
.cg-lead-modal__card.is-success .cg-lead-modal__success {
  padding: 60px 0 40px;
}

/* ── DIRECT ANSWER BLOCK ────────────────────────────────────
 * "Premium Two-Column with Accent Bar" treatment, selected 2026-04-27.
 * Featured-snippet + AI-overview-friendly Q&A near the top of major
 * pages. Visually consistent with the rest of the h26 design system —
 * italic Instrument Serif for questions (matches hero accent), green
 * left edge for brand reinforcement, soft gradient card.
 *
 * Layout:
 *   • Desktop (>=760px): two columns — Q on left, A on right
 *   • Mobile  (<760px):  single column — Q above A
 */
.cg-direct-answer {
  padding: 48px 0 16px;
}
.cg-direct-answer__card {
  max-width: 880px;
  margin: 0 auto;
  background: linear-gradient(180deg, #f8faf9 0%, #f3f7f5 100%);
  border-radius: 20px;
  padding: 44px 48px;
  position: relative;
  overflow: hidden;
}
.cg-direct-answer__card::before {
  /* Green left-edge accent bar — brand color, runs full height. */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #1DC8EC 0%, #006F8F 100%);
}
.cg-direct-answer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #006F8F;
  margin: 0 0 18px;
}
.cg-direct-answer__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1DC8EC;
}
.cg-direct-answer__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cg-direct-answer__item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}
.cg-direct-answer__item + .cg-direct-answer__item {
  border-top: 1px solid rgba(0,111,143,0.12);
  padding-top: 32px;
}
.cg-direct-answer__q-wrap {
  position: relative;
}
.cg-direct-answer__q-bar {
  width: 24px;
  height: 3px;
  background: #1DC8EC;
  border-radius: 2px;
  margin-bottom: 12px;
}
.cg-direct-answer__q {
  font: italic 400 26px/1.2 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  color: #101828;
  margin: 0;
  letter-spacing: -0.01em;
}
.cg-direct-answer__a {
  font: 400 16px/1.7 'Inter', system-ui, sans-serif;
  color: rgba(16,24,40,0.78);
  margin: 0;
}
@media (max-width: 760px) {
  .cg-direct-answer { padding: 32px 0 8px; }
  .cg-direct-answer__card { padding: 28px 22px; border-radius: 14px; }
  .cg-direct-answer__eyebrow { margin-bottom: 14px; }
  .cg-direct-answer__list { gap: 24px; }
  .cg-direct-answer__item {
    /* Stack vertically: Q above A, no two-column on mobile. */
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cg-direct-answer__item + .cg-direct-answer__item { padding-top: 24px; }
  .cg-direct-answer__q { font-size: 22px; }
  .cg-direct-answer__a { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════
 * COMPARISON TABLE — Us vs Big Agency (homepage)
 * ═══════════════════════════════════════════════════════ */
body.home-2026 .cg-section:has(.cg-compare-dark) {
  background: transparent;
  position: relative;
}
body.home-2026 .cg-section:has(.cg-compare-dark) .cg-container {
  background: #0a0b0d;
  border-radius: 28px;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
body.home-2026 .cg-section:has(.cg-compare-dark) .cg-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 280px at 25% 20%, rgba(29,200,236,.18), transparent 65%),
    radial-gradient(500px 220px at 80% 80%, rgba(239,68,68,.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body.home-2026 .cg-section:has(.cg-compare-dark) .cg-container > * { position: relative; z-index: 1; }
body.home-2026 .cg-section:has(.cg-compare-dark) .cg-section__title { color: #fff; }
body.home-2026 .cg-section:has(.cg-compare-dark) .cg-section__label { color: rgba(255,255,255,0.6); }
body.home-2026 .cg-section:has(.cg-compare-dark) .cg-section__sub { color: rgba(255,255,255,0.7); }
body.home-2026 .cg-compare-dark {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  z-index: 1;
}
body.home-2026 .cg-compare-dark__head {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: center;
  background: rgba(255,255,255,0.02);
}
body.home-2026 .cg-compare-dark__label {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
body.home-2026 .cg-compare-dark__col {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
body.home-2026 .cg-compare-dark__col--good { color: #1DC8EC; text-shadow: 0 0 24px rgba(29,200,236,.4); }
body.home-2026 .cg-compare-dark__col--bad { color: rgba(255,255,255,0.45); }
body.home-2026 .cg-compare-dark__chip {
  width: 26px; height: 26px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
body.home-2026 .cg-compare-dark__chip--good {
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  color: #fff;
  box-shadow: 0 0 18px rgba(29,200,236,.55);
}
body.home-2026 .cg-compare-dark__chip--bad { background: rgba(239,68,68,0.18); color: #fca5a5; }
body.home-2026 .cg-compare-dark__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  padding: 22px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
  transition: background .2s ease;
}
body.home-2026 .cg-compare-dark__row:last-child { border-bottom: 0; }
body.home-2026 .cg-compare-dark__row:hover { background: rgba(255,255,255,0.02); }
body.home-2026 .cg-compare-dark__row-label {
  font-family: 'Geist', sans-serif;
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.012em;
  padding-right: 24px;
}
body.home-2026 .cg-compare-dark__cell {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
}
body.home-2026 .cg-compare-dark__cell--good { color: rgba(255,255,255,0.95); font-weight: 500; }
body.home-2026 .cg-compare-dark__cell--bad { color: rgba(255,255,255,0.5); }
body.home-2026 .cg-compare-dark__icon {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 700; font-size: 12px; margin-top: 1px;
}
body.home-2026 .cg-compare-dark__icon--good {
  background: linear-gradient(135deg, #1DC8EC, #006F8F);
  color: #fff;
  box-shadow: 0 0 12px rgba(29,200,236,.5);
}
body.home-2026 .cg-compare-dark__icon--bad { background: rgba(239,68,68,0.15); color: #fca5a5; }
@media (max-width: 980px) {
  body.home-2026 .cg-compare-dark__head,
  body.home-2026 .cg-compare-dark__row { grid-template-columns: 1fr; gap: 12px; padding: 20px 24px; }
  body.home-2026 .cg-compare-dark__label { display: none; }
  body.home-2026 .cg-compare-dark__row-label {
    font-size: 16px; font-weight: 600;
    padding-right: 0; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}
}