/**
 * H26 SPOKE PAGE — FULL VISUAL REBUILD (PREVIEW)
 *
 * Loaded only when ?preview=h26 is in the URL (see cg_is_h26_preview()
 * in functions.php). Scoped under body.h26-preview so it NEVER affects
 * the live spoke pages until the rebuild is approved and promoted.
 *
 * Goal: visually redo every section of a spoke page in the 2026 Remix
 * Light homepage aesthetic — bigger Geist typography, iridescent-green
 * serif accents, generous whitespace, soft cards with lift-on-hover,
 * pill CTAs, Geist Mono labels, dark premium sections, balanced heads.
 *
 * Keeps all existing markup + section order intact (user requested
 * "keep all sections, just visually redo everything").
 */

/* ═══════════════════════════════════════════════════════
 * DESIGN TOKENS (inherit from h26-skin + override as needed)
 * ═══════════════════════════════════════════════════════ */
body.h26-preview {
  --h26-bg:            #f6f7f4;
  --h26-bg-tint:       #eef4ed;
  --h26-card:          #ffffff;
  --h26-card-alt:      #fafbfa;
  --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:         #00C546;
  --h26-green-deep:    #008f33;
  --h26-green-darker:  #006b25;
  --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);
  --h26-shadow-xl:     0 32px 80px -20px rgba(15,18,22,0.2), 0 16px 32px -12px rgba(15,18,22,0.12);

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

/* (Preview badge removed 2026-04-15 when the rebuild went live on all
 * spoke pages. If you need it back for future design iteration, restore
 * the body.h26-preview::after block with the "PREVIEW · h26 rebuild" badge.) */

/* ═══════════════════════════════════════════════════════
 * TYPOGRAPHY — aggressive Geist + Instrument Serif gradient accents
 * ═══════════════════════════════════════════════════════ */
body.h26-preview h1,
body.h26-preview h2,
body.h26-preview h3,
body.h26-preview h4 {
  font-family: 'Geist', sans-serif;
  color: var(--h26-text);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body.h26-preview p { text-wrap: pretty; }
body.h26-preview em,
body.h26-preview i { font-style: italic; }

/* When an em/i lives inside a heading on a spoke page, promote it to
 * the iridescent-green Instrument Serif treatment — same as homepage. */
body.h26-preview h1 em, body.h26-preview h1 i,
body.h26-preview h2 em, body.h26-preview h2 i,
body.h26-preview h3 em, body.h26-preview h3 i {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--h26-green) 0%, var(--h26-green-deep) 40%, var(--h26-green-darker) 100%);
  background-size: 180% 180%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: h26p-gradient 10s ease infinite;
  letter-spacing: -0.01em;
}
@keyframes h26p-gradient {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════════════
 * SECTION RHYTHM — OPTION A: SINGLE BG + CHAPTER COUNTER
 * All light sections share the body bg. Dark sections (Why,
 * Comparison, Final CTA) act as chapter anchors. Chapter
 * counter increments on each cg-section__head and renders
 * as a small horizontal-line pill above the kicker label.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview { counter-reset: cg-chapter; }

body.h26-preview .cg-container { max-width: 1320px; padding: 0 32px; }
body.h26-preview .cg-section { padding: 88px 0; background: var(--h26-bg); position: relative; }

/* Kill the legacy gray differentiation — all light sections share body bg.
   Excludes :has(.cg-compare-dark) so the dark comparison override still wins. */
body.h26-preview .cg-section--gray:not(:has(.cg-compare-dark)) {
  background: var(--h26-bg);
  border-top: 0;
  border-bottom: 0;
}

/* Chapter counter — increments on each section head, displays as a small
   horizontal-line pill above the kicker label. */
body.h26-preview .cg-section__head {
  counter-increment: cg-chapter;
}
body.h26-preview .cg-section__head::before {
  content: counter(cg-chapter, decimal-leading-zero);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--h26-green-deep);
  padding: 8px 0;
  border-top: 1px solid rgba(0,197,70,.4);
  border-bottom: 1px solid rgba(0,197,70,.4);
  width: 56px;
  text-align: center;
  margin: 0 auto 22px;
  display: block;
}
/* Dark-section variant — brighter green for contrast */
body.h26-preview .cg-why-dark .cg-section__head::before,
body.h26-preview .cg-section--editorial .cg-section__head::before {
  /* deep editorial sections also get the dark variant so the prefix reads */
}
body.h26-preview .cg-why-dark .cg-section__head::before,
body.h26-preview .cg-section:has(.cg-compare-dark) .cg-section__head::before {
  color: var(--h26-green);
  border-color: rgba(0,197,70,.55);
}
/* Hide chapter prefix on the FAQ — its sidebar carries the chapter context */
body.h26-preview #faq .cg-section__head::before { display: none; }

body.h26-preview .cg-section__head {
  max-width: 1040px;
  margin: 0 auto 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.h26-preview .cg-section__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--h26-green-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border: 1px solid rgba(0,197,70,.25);
  border-radius: 100px;
  background: rgba(0,197,70,.06);
  margin-bottom: 22px;
  display: inline-block;
}
body.h26-preview .cg-section__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 22px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.h26-preview .cg-section__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  max-width: 720px;
  margin: 0;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════
 * HERO — bigger type, richer visual, pulled-up dashboard
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-hero-spoke {
  background:
    radial-gradient(ellipse 1000px 500px at 50% -10%, rgba(0,197,70,.12), transparent 60%),
    linear-gradient(180deg, var(--h26-bg-tint) 0%, var(--h26-bg) 70%);
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--h26-stroke);
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-hero-spoke__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}
body.h26-preview .cg-hero-spoke__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(0,197,70,.22);
  border-radius: 100px;
  background: rgba(0,197,70,.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: 28px;
  align-self: flex-start;
}
body.h26-preview .cg-hero-spoke__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--h26-green);
}
body.h26-preview .cg-hero-spoke__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(44px, 5.8vw, 80px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
  color: var(--h26-text);
  text-wrap: balance;
  max-width: 620px;
}
body.h26-preview .cg-hero-spoke__sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  max-width: 580px;
  margin: 0 0 36px;
  text-wrap: pretty;
}
body.h26-preview .cg-hero-spoke__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
body.h26-preview .cg-hero-spoke__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--h26-stroke);
  flex-wrap: wrap;
}
body.h26-preview .cg-hero-spoke__trust-partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--h26-stroke);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--h26-text-dim);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s ease, color .2s ease;
}
body.h26-preview .cg-hero-spoke__trust-partner:hover {
  border-color: rgba(0,197,70,.4);
  color: var(--h26-green-deep);
}
body.h26-preview .cg-hero-spoke__trust-partner-dot {
  width: 7px; height: 7px;
  background: var(--h26-green);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(0,197,70,.18);
  flex-shrink: 0;
}
/* Mobile: keep both partner chips on a single row, share width 50/50.
   Without this they wrap onto separate lines because the chip text is
   too wide to fit two pills on a 375px viewport. */
@media (max-width: 780px) {
  body.h26-preview .cg-hero-spoke__trust { flex-wrap: nowrap; gap: 8px; }
  body.h26-preview .cg-hero-spoke__trust-partner {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 7px 10px;
    font-size: 9.5px;
    text-align: center;
    letter-spacing: 0.04em;
  }
}
/* Legacy trust-badge / trust-divider / trust-rating / trust-stars classes — hide if any old markup leaks through */
body.h26-preview .cg-hero-spoke__trust-badge,
body.h26-preview .cg-hero-spoke__trust-divider,
body.h26-preview .cg-hero-spoke__trust-rating,
body.h26-preview .cg-hero-spoke__trust-stars,
body.h26-preview .cg-hero-spoke__trust-text { display: none !important; }

/* Hero dashboard mockup — upgrade the whole visual */
body.h26-preview .cg-hero-dashboard {
  background: linear-gradient(145deg, #ffffff 0%, #fafdfa 100%);
  border: 1px solid var(--h26-stroke);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 40px 80px -16px rgba(15,18,22,0.14),
    0 16px 32px -8px rgba(15,18,22,0.06),
    0 0 0 1px rgba(0,197,70,.05);
  position: relative;
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-hero-dashboard:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-4px); }
body.h26-preview .cg-hero-dashboard__header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-hero-dashboard__title {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
body.h26-preview .cg-hero-dashboard__live {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--h26-green-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
body.h26-preview .cg-hero-dashboard__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--h26-green);
  box-shadow: 0 0 0 3px rgba(0,197,70,.2);
  animation: h26p-pulse 1.6s ease-in-out infinite;
}
@keyframes h26p-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
body.h26-preview .cg-hero-dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
body.h26-preview .cg-hero-dashboard__metric {
  background: var(--h26-card-alt);
  border: 1px solid var(--h26-stroke);
  border-radius: 12px;
  padding: 14px 16px;
}
body.h26-preview .cg-hero-dashboard__metric-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}
body.h26-preview .cg-hero-dashboard__metric-value {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--h26-text);
}
body.h26-preview .cg-hero-dashboard__chart {
  background: var(--h26-card-alt);
  border: 1px solid var(--h26-stroke);
  border-radius: 12px;
  padding: 20px 16px;
}
body.h26-preview .cg-hero-dashboard__chart-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
body.h26-preview .cg-hero-dashboard__chart-bars {
  display: flex; gap: 6px; align-items: flex-end; height: 80px;
}
body.h26-preview .cg-hero-dashboard__chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--h26-green), var(--h26-green-deep));
  border-radius: 4px 4px 0 0;
  min-height: 8px;
  transition: transform .2s;
}
body.h26-preview .cg-hero-dashboard__chart-bar:hover { transform: scaleY(1.06); transform-origin: bottom; }

body.h26-preview .cg-hero-floating-card {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: var(--h26-card);
  border: 1px solid var(--h26-green);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 20px 40px -8px rgba(0,197,70,.22), 0 8px 16px rgba(15,18,22,0.08);
  display: flex; align-items: center; gap: 10px;
  font-family: 'Geist', sans-serif;
}
body.h26-preview .cg-hero-floating-card__value { font-weight: 600; color: var(--h26-green-deep); font-size: 18px; }
body.h26-preview .cg-hero-floating-card__label { font-size: 11px; color: var(--h26-text-dimmer); }

/* ═══════════════════════════════════════════════════════
 * CTAs — pill with glow, ghost, dark variants
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .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: 500;
  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-preview .cg-btn--lg { padding: 18px 32px; font-size: 16px; }
body.h26-preview .cg-btn--green {
  background: var(--h26-green);
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(0,197,70,.42), 0 1px 2px rgba(15,18,22,0.08);
}
body.h26-preview .cg-btn--green:hover {
  background: var(--h26-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -4px rgba(0,197,70,.55), 0 1px 2px rgba(15,18,22,0.08);
}
body.h26-preview .cg-btn--outline {
  background: var(--h26-card);
  color: var(--h26-text);
  border-color: var(--h26-stroke);
  box-shadow: var(--h26-shadow-sm);
}
body.h26-preview .cg-btn--outline:hover {
  border-color: var(--h26-green);
  color: var(--h26-green-deep);
  background: rgba(0,197,70,0.04);
  transform: translateY(-1px);
}
body.h26-preview .cg-btn--outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
body.h26-preview .cg-btn--outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); }
body.h26-preview .cg-btn--white {
  background: #fff;
  color: #0f1216;
}
body.h26-preview .cg-btn--dark {
  background: #0f1216;
  color: #fff;
}
body.h26-preview .cg-btn--full { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════════
 * STATS BAR — overlap hero, glass card
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-stats-bar {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 24px;
  margin: -40px 32px 0;
  position: relative;
  z-index: 3;
  box-shadow: var(--h26-shadow-xl);
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}
body.h26-preview .cg-stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px;
  gap: 0;
  /* Reset legacy main.css styling that paints this as a second white card */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  justify-content: initial;
}
body.h26-preview .cg-stats-bar__item {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-stats-bar__item:last-child { border-right: 0; }
body.h26-preview .cg-stats-bar__value {
  font-family: 'Geist', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 8px;
}
body.h26-preview .cg-stats-bar__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
 * CHALLENGES GRID (niche hubs) — kept on the old card layout
 * Spoke "Why X Need Y" benefits use Concept B rows below.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
body.h26-preview .cg-benefit-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--h26-shadow-sm);
  transition: transform .3s cubic-bezier(.22,.61,.36,1),
              box-shadow .3s cubic-bezier(.22,.61,.36,1),
              border-color .3s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--h26-shadow-md);
  border-color: rgba(0,197,70,.25);
}
body.h26-preview .cg-benefit-card__title {
  font-family: 'Geist', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.h26-preview .cg-benefit-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  margin: 0;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════
 * BENEFITS — CONCEPT B: STAT-ANCHORED ROWS
 * Wide horizontal rows: icon left · copy center · stat right
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-benefit-rows {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.h26-preview .cg-benefit-row {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 64px 1fr 200px;
  gap: 28px;
  align-items: center;
  box-shadow: var(--h26-shadow-sm);
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s cubic-bezier(.22,.61,.36,1),
              border-color .25s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-benefit-row:hover {
  transform: translateX(4px);
  box-shadow: var(--h26-shadow-md);
  border-color: rgba(0,197,70,.25);
}
body.h26-preview .cg-benefit-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--h26-green), var(--h26-green-deep));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-benefit-row:hover::before { transform: scaleY(1); }

body.h26-preview .cg-benefit-row__icon {
  width: 64px; height: 64px;
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  border: 1px solid rgba(0,197,70,.25);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--h26-green-deep);
  flex-shrink: 0;
}
body.h26-preview .cg-benefit-row__icon svg { width: 30px; height: 30px; }

body.h26-preview .cg-benefit-row__copy { min-width: 0; }
body.h26-preview .cg-benefit-row__title {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 6px;
  line-height: 1.25;
  color: var(--h26-text);
  text-wrap: balance;
}
body.h26-preview .cg-benefit-row__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  margin: 0;
  text-wrap: pretty;
}

body.h26-preview .cg-benefit-row__stat {
  text-align: right;
  border-left: 1px solid var(--h26-stroke);
  padding-left: 24px;
}
body.h26-preview .cg-benefit-row__stat-num {
  font-family: 'Geist', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
body.h26-preview .cg-benefit-row__stat-label {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--h26-text-dimmer, rgba(15,18,22,0.48));
  text-transform: uppercase;
  font-weight: 600;
}

/* Trust callout below the rows */
body.h26-preview .cg-benefit-exclusive {
  max-width: 1100px;
  margin: 24px auto 0;
  background: linear-gradient(145deg, #ffffff, var(--h26-green-tint));
  border: 1px solid rgba(0,197,70,.22);
  border-radius: 20px;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: center;
  box-shadow: var(--h26-shadow-sm);
}
body.h26-preview .cg-benefit-exclusive__icon {
  width: 48px; height: 48px;
  background: linear-gradient(145deg, var(--h26-green), var(--h26-green-deep));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0,197,70,.45);
}
body.h26-preview .cg-benefit-exclusive__title {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--h26-text);
}
body.h26-preview .cg-benefit-exclusive__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  margin: 0;
  text-wrap: pretty;
}

/* Hide the old card grid if it ever renders alongside new markup */
body.h26-preview .cg-benefit-rows + .cg-benefit-grid,
body.h26-preview .cg-benefit-rows + .cg-benefit-card { display: none; }

/* ═══════════════════════════════════════════════════════
 * REVIEW MARQUEE + CARDS
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-review-marquee {
  padding: 12px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
body.h26-preview .cg-review-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--h26-shadow-sm);
  min-width: 380px;
  max-width: 420px;
}
body.h26-preview .cg-review-card__stars svg { fill: #FFB300; width: 14px; height: 14px; }
body.h26-preview .cg-review-card__quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--h26-text);
  margin: 12px 0 16px;
}
body.h26-preview .cg-review-card__author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
body.h26-preview .cg-review-card__name { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 13px; color: var(--h26-text); }
body.h26-preview .cg-review-card__role { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--h26-text-dimmer); letter-spacing: 0.04em; }
body.h26-preview .cg-review-card__result {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--h26-green-deep);
  background: rgba(0,197,70,.06);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(0,197,70,.22);
  white-space: nowrap;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
 * WHY CLICKSGEEK (DARK)
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-why-dark {
  background: #0a0b0d;
  color: #fff;
  padding: 120px 48px;
  border-radius: 28px;
  margin: 60px 16px;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-why-dark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 20% 0%, rgba(0,197,70,.18), transparent 60%),
    radial-gradient(ellipse 600px 300px at 80% 100%, rgba(0,197,70,.14), transparent 60%);
  pointer-events: none;
}
body.h26-preview .cg-why-dark .cg-section__label {
  color: var(--h26-green);
  background: rgba(0,197,70,.12);
  border-color: rgba(0,197,70,.3);
}
body.h26-preview .cg-why-dark .cg-section__title { color: #fff; }
body.h26-preview .cg-why-dark .cg-section__sub { color: rgba(255,255,255,.72); }
body.h26-preview .cg-why-dark__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
body.h26-preview .cg-why-dark__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 30px 26px;
  backdrop-filter: blur(12px);
  transition: all .3s;
}
body.h26-preview .cg-why-dark__card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,197,70,0.3);
  background: rgba(0,197,70,0.04);
}
body.h26-preview .cg-why-dark__icon {
  width: 44px; height: 44px;
  background: rgba(0,197,70,.12);
  border: 1px solid rgba(0,197,70,.28);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--h26-green);
  margin-bottom: 18px;
}
body.h26-preview .cg-why-dark__card-title { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.012em; }
body.h26-preview .cg-why-dark__card-desc { color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ═══════════════════════════════════════════════════════
 * PROCESS — CONCEPT C (Focus Tabs)
 * Left sidebar: compact step list (click to swap featured).
 * Right: big featured card with huge gradient number, icon,
 * title, description, progress ticks. Scoped to .cg-process-
 * focus so the OLD .cg-process-timeline CSS doesn't conflict.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-process-focus {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

/* Left: step list */
body.h26-preview .cg-process-focus__list {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--h26-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 100px;
}
body.h26-preview .cg-process-focus__step {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background .2s;
}
body.h26-preview .cg-process-focus__step:hover {
  background: rgba(0,197,70,.04);
}
body.h26-preview .cg-process-focus__step.is-active {
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  box-shadow: inset 0 0 0 1px rgba(0,197,70,.28);
}
body.h26-preview .cg-process-focus__step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f4f5f3;
  color: var(--h26-text-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: all .25s cubic-bezier(.22,.61,.36,1);
  flex-shrink: 0;
}
body.h26-preview .cg-process-focus__step.is-active .cg-process-focus__step-num {
  background: linear-gradient(145deg, var(--h26-green), var(--h26-green-deep));
  color: #fff;
  box-shadow: 0 6px 14px -3px rgba(0,197,70,.42);
}
body.h26-preview .cg-process-focus__step-label {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--h26-text-dim);
  transition: color .2s, font-weight .2s;
}
body.h26-preview .cg-process-focus__step.is-active .cg-process-focus__step-label {
  color: var(--h26-text);
  font-weight: 600;
}
body.h26-preview .cg-process-focus__step-arrow {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--h26-green-deep);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
body.h26-preview .cg-process-focus__step.is-active .cg-process-focus__step-arrow {
  opacity: 1;
  transform: translateX(0);
}
body.h26-preview .cg-process-focus__step:focus-visible {
  outline: 2px solid var(--h26-green);
  outline-offset: 2px;
}

/* Right: featured detail card */
body.h26-preview .cg-process-focus__featured {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 24px;
  padding: 48px;
  box-shadow: var(--h26-shadow-md);
  min-height: 420px;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-process-focus__featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 500px 300px at 85% 10%, rgba(0,197,70,.08), transparent 60%);
  pointer-events: none;
}
body.h26-preview .cg-process-focus__featured > * { position: relative; z-index: 1; }
body.h26-preview .cg-process-focus__featured-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
body.h26-preview .cg-process-focus__num-big {
  font-family: 'Geist', sans-serif;
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.055em;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .25s;
}
body.h26-preview .cg-process-focus__icon {
  width: 56px; height: 56px;
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  border: 1px solid rgba(0,197,70,.28);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--h26-green-deep);
  flex-shrink: 0;
}
body.h26-preview .cg-process-focus__icon svg { width: 28px; height: 28px; }
body.h26-preview .cg-process-focus__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h26-green-deep);
  margin-bottom: 10px;
}
body.h26-preview .cg-process-focus__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.h26-preview .cg-process-focus__desc {
  font-size: 16.5px;
  color: var(--h26-text-dim);
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 620px;
  text-wrap: pretty;
}
body.h26-preview .cg-process-focus__progress {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.h26-preview .cg-process-focus__tick {
  height: 4px;
  flex: 1;
  background: rgba(15,18,22,0.08);
  border-radius: 100px;
  transition: background .35s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-process-focus__tick.is-active {
  background: linear-gradient(90deg, var(--h26-green), var(--h26-green-deep));
}

/* Subtle swap animation on the featured card content */
body.h26-preview .cg-process-focus__featured.is-swapping
  .cg-process-focus__num-big,
body.h26-preview .cg-process-focus__featured.is-swapping
  .cg-process-focus__icon,
body.h26-preview .cg-process-focus__featured.is-swapping
  .cg-process-focus__label,
body.h26-preview .cg-process-focus__featured.is-swapping
  .cg-process-focus__title,
body.h26-preview .cg-process-focus__featured.is-swapping
  .cg-process-focus__desc {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s;
}
body.h26-preview .cg-process-focus__num-big,
body.h26-preview .cg-process-focus__icon,
body.h26-preview .cg-process-focus__label,
body.h26-preview .cg-process-focus__title,
body.h26-preview .cg-process-focus__desc {
  transition: opacity .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1);
}

/* Hide the OLD focus-tabs-unused selectors (from prior concept) */
body.h26-preview .cg-process-focus .cg-process-step,
body.h26-preview .cg-process-focus .cg-process-step__icon,
body.h26-preview .cg-process-focus .cg-process-step__number,
body.h26-preview .cg-process-focus .cg-process-step__content {
  display: none;
}

/* Responsive */
@media (max-width: 1100px) {
  body.h26-preview .cg-process-focus {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.h26-preview .cg-process-focus__list { position: static; }
  body.h26-preview .cg-process-focus__featured { padding: 36px 28px; min-height: 0; }
}
/* Mobile-only stacked variant of the process steps — desktop hides it,
   mobile hides the tabs UI and shows this instead. */
body.h26-preview .cg-process-focus__stack { display: none; }

@media (max-width: 780px) {
  /* Hide the tabs UI on mobile; show the stacked-list variant instead. */
  body.h26-preview .cg-process-focus {
    display: block;
    grid-template-columns: none;
    max-width: 100%;
    padding: 0;
  }
  body.h26-preview .cg-process-focus__list,
  body.h26-preview .cg-process-focus__featured { display: none !important; }

  body.h26-preview .cg-process-focus__stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Fill the parent cg-container width — the cg-container itself
       already enforces the page-wide max-width + horizontal padding. */
    width: 100%;
    max-width: none;
    margin: 0;
  }
  body.h26-preview .cg-process-focus__stack-item {
    background: var(--h26-card);
    border: 1px solid var(--h26-stroke);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: var(--h26-shadow-sm);
    position: relative;
  }
  body.h26-preview .cg-process-focus__stack-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
  }
  body.h26-preview .cg-process-focus__stack-num {
    font-family: 'Geist', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
  }
  body.h26-preview .cg-process-focus__stack-icon {
    width: 40px; height: 40px;
    background: linear-gradient(145deg, var(--h26-green-tint), #fff);
    border: 1px solid rgba(0,197,70,.25);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--h26-green-deep);
    flex-shrink: 0;
    margin-left: auto;
  }
  body.h26-preview .cg-process-focus__stack-icon svg { width: 20px; height: 20px; }
  body.h26-preview .cg-process-focus__stack-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--h26-green-deep);
    margin-bottom: 6px;
  }
  body.h26-preview .cg-process-focus__stack-title {
    font-family: 'Geist', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--h26-text);
    margin: 0 0 8px;
    text-wrap: balance;
  }
  body.h26-preview .cg-process-focus__stack-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--h26-text-dim);
    margin: 0;
    text-wrap: pretty;
  }
}

/* Legacy horizontal-timeline styles removed — focus tabs is the new
 * process UI. The remaining .cg-process-step rules below are kept as
 * fallback for any template still emitting the old markup. */
body.h26-preview .cg-process-timeline:not(.cg-process-focus) {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
}
body.h26-preview .cg-process-step {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.h26-preview .cg-process-step:hover { transform: none; box-shadow: none; }
/* Step icon chip — sits ABOVE the number in the stacked column */
body.h26-preview .cg-process-step__icon {
  width: 48px; height: 48px;
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  border: 1px solid rgba(0,197,70,.3);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--h26-green-deep);
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}
body.h26-preview .cg-process-step__icon svg { width: 22px; height: 22px; }
body.h26-preview .cg-process-step:hover .cg-process-step__icon {
  transform: translateY(-2px) rotate(-4deg);
  border-color: var(--h26-green);
  box-shadow: 0 8px 20px -6px rgba(0,197,70,.35);
}

body.h26-preview .cg-process-step__number {
  width: 44px; height: 44px;
  background: linear-gradient(145deg, var(--h26-green), var(--h26-green-deep));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px -4px rgba(0,197,70,.4), 0 0 0 6px var(--h26-bg);
  flex-shrink: 0;
  line-height: 1;
}
body.h26-preview .cg-process-step__content {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 16px;
  padding: 20px 18px;
  width: 100%;
  box-shadow: var(--h26-shadow-sm);
  transition: all .25s;
}
body.h26-preview .cg-process-step:hover .cg-process-step__content {
  transform: translateY(-3px);
  box-shadow: var(--h26-shadow-md);
  border-color: rgba(0,197,70,.22);
}
body.h26-preview .cg-process-step__title {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: balance;
}
body.h26-preview .cg-process-step__desc {
  font-size: 13.5px;
  color: var(--h26-text-dim);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}

/* Process timeline — staggered fade-up on scroll. The JS adds
 * .is-revealed to the timeline when it enters the viewport; each
 * step uses --step-i (set inline in PHP) to compute its delay. */
body.h26-preview .cg-process-step {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--step-i, 0) * 130ms);
}
body.h26-preview .cg-process-timeline.is-revealed .cg-process-step {
  opacity: 1;
  transform: translateY(0);
}
/* The connecting green pipe also fades in to match */
body.h26-preview .cg-process-timeline::before {
  opacity: 0;
  transition: opacity .9s ease;
  transition-delay: 200ms;
}
body.h26-preview .cg-process-timeline.is-revealed::before { opacity: 1; }
/* Prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  body.h26-preview .cg-process-step,
  body.h26-preview .cg-process-timeline::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Process timeline — responsive breakpoints */
@media (max-width: 980px) {
  body.h26-preview .cg-process-timeline { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  body.h26-preview .cg-process-timeline::before { display: none; }
}
@media (max-width: 560px) {
  body.h26-preview .cg-process-timeline { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
 * MID CTA + FINAL CTA (dark blocks)
 * Mid-CTA and Final-CTA now share the SAME visual treatment:
 * dark rounded card with a subtle green radial glow from the
 * bottom-left, big white headline, gray subtitle, green pill
 * primary + dark ghost secondary, Geist Mono risk text.
 *
 * The mid-CTA's base stylesheet paints an __inner green card;
 * we override it here so the inner becomes transparent and
 * inherits the dark look from its wrapper.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-mid-cta-v2,
body.h26-preview .cg-final-cta-dark {
  background: linear-gradient(145deg, #0a0b0d, #15181c);
  color: #fff;
  border-radius: 28px;
  margin: 80px 16px;
  padding: 0;            /* padding moves to the inner wrapper */
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-mid-cta-v2::before,
body.h26-preview .cg-final-cta-dark::before {
  content: "";
  position: absolute; inset: 0;
  /* Matches the final-cta glow you liked — subtle green radial from bottom-left */
  background: radial-gradient(ellipse 700px 500px at 12% 100%, rgba(0,197,70,.22), transparent 58%);
  pointer-events: none;
}

/* Inner wrapper — override the base bright-green card */
body.h26-preview .cg-mid-cta-v2__inner {
  background: transparent !important;
  box-shadow: none;
  border-radius: 0;
  padding: 96px 48px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
body.h26-preview .cg-mid-cta-v2__glow { display: none; }  /* kill the base glow; we use ::before */

/* Final CTA — full-bleed band that flows directly into the lead-form
   gradient below. No floating-card chrome since it pairs with the form. */
body.h26-preview .cg-final-cta-dark {
  padding: 110px 48px 120px;
  border-radius: 0;
  margin: 0;
}
body.h26-preview .cg-mid-cta-v2__headline,
body.h26-preview .cg-final-cta-dark__headline {
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #fff;
  max-width: 780px;
  margin: 0 auto 18px;
  position: relative; z-index: 2;
  text-wrap: balance;
}
body.h26-preview .cg-mid-cta-v2__headline em,
body.h26-preview .cg-final-cta-dark__headline em,
body.h26-preview .cg-mid-cta-v2__headline i,
body.h26-preview .cg-final-cta-dark__headline i {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--h26-green), #3dffa0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .cg-mid-cta-v2__sub,
body.h26-preview .cg-final-cta-dark__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.72);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.55;
  position: relative; z-index: 2;
}
body.h26-preview .cg-mid-cta-v2__buttons,
body.h26-preview .cg-final-cta-dark__buttons {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 2;
  margin-bottom: 18px;
}
body.h26-preview .cg-mid-cta-v2__risk,
body.h26-preview .cg-final-cta-dark__risk {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  position: relative; z-index: 2;
}

/* Mid-CTA button overrides — base stylesheet paints cg-btn--white as
 * white (made sense on the old green card); on the new dark card we
 * need it to be the primary green pill like the final-CTA's CTA. */
body.h26-preview .cg-mid-cta-v2 .cg-btn--white {
  background: var(--h26-green);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px -6px rgba(0,197,70,.55), 0 0 0 1px rgba(0,197,70,.3);
}
body.h26-preview .cg-mid-cta-v2 .cg-btn--white:hover {
  background: var(--h26-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -6px rgba(0,197,70,.65);
}
/* "Call Us" secondary — dark ghost pill with light stroke */
body.h26-preview .cg-mid-cta-v2 .cg-btn--dark,
body.h26-preview .cg-final-cta-dark .cg-btn--dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
body.h26-preview .cg-mid-cta-v2 .cg-btn--dark:hover,
body.h26-preview .cg-final-cta-dark .cg-btn--dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
}

/* ═══════════════════════════════════════════════════════
 * DEEP CONTENT — sticky TOC sidebar + magazine reading pane
 * Left: 240px sticky TOC auto-generated from H2s.
 * Right: ~720px reading column with magazine-style
 * blockquote / stat-tile / callout treatments for any
 * rich elements in the post_content.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-section--editorial { padding: 88px 0; }
body.h26-preview .cg-editorial__eyebrow,
body.h26-preview .cg-editorial-toc__eyebrow {
  text-align: center;
  margin-bottom: 40px;
  counter-increment: cg-chapter;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.h26-preview .cg-editorial-toc__eyebrow::before,
body.h26-preview .cg-editorial__eyebrow::before {
  content: counter(cg-chapter, decimal-leading-zero);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--h26-green-deep);
  padding: 8px 0;
  border-top: 1px solid rgba(0,197,70,.4);
  border-bottom: 1px solid rgba(0,197,70,.4);
  width: 56px;
  text-align: center;
  margin-bottom: 22px;
}
body.h26-preview .cg-editorial-toc__eyebrow .cg-section__label { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════
 * DEEP CONTENT — COVERAGE AXIS PATTERN
 * Single-column reading pane, ~880px max width centered.
 * H2 = small bold gradient text + 60px gradient underline bar.
 * H3 = small with vertical green gradient bar on the left.
 * Body = 16px / 1.75 line-height for premium readability.
 * Blockquote = green gradient bg + green left border, weight 600.
 * Bullets = round green gradient dots.
 * HR = green gradient bar.
 * ═══════════════════════════════════════════════════════ */

/* Hide all legacy 2-col TOC + collapse markup if any leaks through */
body.h26-preview .cg-editorial-toc,
body.h26-preview .cg-editorial-toc__sidebar,
body.h26-preview .cg-editorial-toc__list,
body.h26-preview .cg-editorial-toc__label,
body.h26-preview .cg-content-collapsed,
body.h26-preview .cg-content-expand,
body.h26-preview .cg-content-expand-btn {
  /* If older pages still ship the 2-col grid, neutralize it */
  display: revert;
}
body.h26-preview .cg-editorial-toc { display: block; max-width: 880px; margin: 0 auto; padding: 0 32px; grid-template-columns: none !important; gap: 0; }
body.h26-preview .cg-editorial-toc__sidebar { display: none !important; }
body.h26-preview .cg-editorial-toc__content { max-width: 100%; padding: 0; }
body.h26-preview .cg-content-collapsed { max-height: none !important; overflow: visible !important; }
body.h26-preview .cg-content-collapsed::after { display: none !important; }
body.h26-preview .cg-content-expand { display: none !important; }

/* The new single-column wrapper */
body.h26-preview .cg-deep-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
  color: var(--h26-text);
  /* Collapsed by default — clipped to a teaser height with a fade-out at the bottom */
  max-height: 720px;
  overflow: hidden;
  position: relative;
  transition: max-height .3s ease;
}
body.h26-preview .cg-deep-content > *:first-child { margin-top: 0; }

/* Fade gradient at the bottom of the clipped article — pulls visually to the
   "Read full guide" button. The bg-stop matches the body bg color. */
body.h26-preview .cg-deep-content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, transparent, var(--h26-bg) 75%);
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Expanded state — show full content, hide the fade */
body.h26-preview .cg-deep-content.is-expanded {
  max-height: none;
  overflow: visible;
}
body.h26-preview .cg-deep-content.is-expanded::after {
  opacity: 0;
  display: none;
}

/* Internal-link footer inside the deep-content article — points to the
   parent service hub + niche hub (or category hub for niches). Adds 1
   inbound link from every spoke to its service, and from every niche to
   its category. Fixes the orphan status flagged in the audit. */
body.h26-preview .cg-deep-content__related {
  margin: 32px 0 0 !important;
  padding: 18px 22px;
  background: var(--h26-green-tint);
  border: 1px solid rgba(0,197,70,.18);
  border-radius: 12px;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--h26-text) !important;
  font-weight: 400;
}
body.h26-preview .cg-deep-content__related strong {
  color: var(--h26-green-deep);
  font-weight: 600;
  margin-right: 4px;
}
body.h26-preview .cg-deep-content__related a {
  color: var(--h26-green-deep);
  font-weight: 500;
}

/* Read full guide button — pill style, sits centered below the article */
body.h26-preview .cg-deep-content__expand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 24px auto 0;
  padding: 14px 26px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--h26-text);
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--h26-shadow-sm);
}
body.h26-preview .cg-deep-content__expand::after {
  content: "↓";
  font-size: 14px;
  line-height: 1;
  transition: transform .25s ease;
}
body.h26-preview .cg-deep-content__expand:hover {
  border-color: rgba(0,197,70,.35);
  color: var(--h26-green-deep);
  background: var(--h26-green-tint);
  box-shadow: 0 6px 16px -6px rgba(0,197,70,.3);
}
body.h26-preview .cg-deep-content.is-expanded + .cg-deep-content__expand::after {
  transform: rotate(180deg);
}

/* H2 — gradient TEXT + 60px gradient underline bar */
body.h26-preview .cg-deep-content h2 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 56px 0 24px;
  background: linear-gradient(135deg, #0a0b0d 0%, var(--h26-green-deep) 55%, var(--h26-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-wrap: balance;
}
body.h26-preview .cg-deep-content h2:first-child { margin-top: 0; }
body.h26-preview .cg-deep-content h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--h26-green), var(--h26-green-deep));
  margin-top: 12px;
  border-radius: 2px;
}

/* H3 — small with vertical gradient bar on the left */
body.h26-preview .cg-deep-content h3 {
  font-family: 'Geist', sans-serif;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  margin: 32px 0 12px;
  color: var(--h26-text);
  position: relative;
  padding-left: 16px;
  text-wrap: balance;
}
body.h26-preview .cg-deep-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: linear-gradient(180deg, var(--h26-green), var(--h26-green-deep));
  border-radius: 3px;
}

/* Body */
body.h26-preview .cg-deep-content p {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(15,18,22,0.78);
  margin: 0 0 20px;
  text-wrap: pretty;
}
body.h26-preview .cg-deep-content strong {
  color: var(--h26-text);
  font-weight: 600;
}
body.h26-preview .cg-deep-content a {
  color: var(--h26-green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,197,70,.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
body.h26-preview .cg-deep-content a:hover {
  text-decoration-color: var(--h26-green-deep);
}

/* Lists with gradient round-dot bullets */
body.h26-preview .cg-deep-content ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
}
body.h26-preview .cg-deep-content ol {
  margin: 20px 0 28px;
  padding-left: 24px;
}
body.h26-preview .cg-deep-content li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  line-height: 1.7;
  color: rgba(15,18,22,0.78);
  font-size: 16px;
}
body.h26-preview .cg-deep-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  border-radius: 50%;
}
body.h26-preview .cg-deep-content ol li { padding-left: 8px; }
body.h26-preview .cg-deep-content ol li::marker { color: var(--h26-green-deep); font-weight: 700; }

/* Blockquote — green gradient bg + green gradient left border */
body.h26-preview .cg-deep-content blockquote {
  margin: 28px 0;
  padding: 20px 24px 20px 28px;
  background: linear-gradient(135deg, rgba(0,197,70,0.04), rgba(0,197,70,0.08));
  border-left: 4px solid;
  border-image: linear-gradient(180deg, var(--h26-green), var(--h26-green-deep)) 1;
  border-radius: 0;
  font-family: 'Geist', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--h26-text);
  line-height: 1.7;
  font-style: normal;
}
body.h26-preview .cg-deep-content blockquote p {
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--h26-text);
  margin: 0;
}
body.h26-preview .cg-deep-content blockquote p + p {
  margin-top: 12px;
  font-weight: 400;
  font-size: 15px;
  color: rgba(15,18,22,0.72);
}
body.h26-preview .cg-deep-content blockquote strong {
  color: var(--h26-green-deep);
}

/* HR — green gradient bar */
body.h26-preview .cg-deep-content hr {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--h26-green), var(--h26-green-deep), transparent);
  margin: 40px 0;
  border-radius: 2px;
}
body.h26-preview .cg-deep-content blockquote + hr { margin-top: 16px; }
body.h26-preview .cg-deep-content hr + h2 { margin-top: 32px; }

/* Tables (rare but supported) */
body.h26-preview .cg-deep-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
body.h26-preview .cg-deep-content th,
body.h26-preview .cg-deep-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-deep-content th {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--h26-text-dim);
  background: rgba(0,197,70,0.04);
}

/* ═══════════════════════════════════════════════════════
 * ECONOMICS — CONCEPT C: EDITORIAL CARD STACK
 * Numbered prefix in italic Instrument Serif iridescent green
 * matches the sibling cards + FAQ identity already shipped.
 * Hides the legacy table, switches to a 2x2 (or 1xN) grid.
 * ═══════════════════════════════════════════════════════ */
/* Hide legacy table under h26-preview */
body.h26-preview .cg-economics-table { display: none !important; }

/* Container for the new editorial card stack — wraps the section */
body.h26-preview .cg-econ-cards {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

body.h26-preview .cg-econ-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 22px;
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s cubic-bezier(.22,.61,.36,1),
              border-color .25s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-econ-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--h26-green), var(--h26-green-deep));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-econ-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,197,70,.25);
  box-shadow: var(--h26-shadow-md);
}
body.h26-preview .cg-econ-card:hover::before { transform: scaleY(1); }

body.h26-preview .cg-econ-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.h26-preview .cg-econ-card__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep) 60%, #0a0b0d 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .cg-econ-card__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
body.h26-preview .cg-econ-card__source-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
}
body.h26-preview .cg-econ-card__source--internal {
  background: rgba(0,197,70,.08);
  color: var(--h26-green-deep);
  border: 1px solid rgba(0,197,70,.22);
}
body.h26-preview .cg-econ-card__source--internal .cg-econ-card__source-dot {
  background: var(--h26-green);
  box-shadow: 0 0 0 3px rgba(0,197,70,.18);
}
body.h26-preview .cg-econ-card__source--third_party {
  background: rgba(15,18,22,.04);
  color: var(--h26-text-dim);
  border: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-econ-card__source--third_party .cg-econ-card__source-dot {
  background: var(--h26-text-dim);
}
body.h26-preview .cg-econ-card__source--modeled {
  background: rgba(255,179,0,.08);
  color: #b8860b;
  border: 1px solid rgba(255,179,0,.22);
}
body.h26-preview .cg-econ-card__source--modeled .cg-econ-card__source-dot {
  background: #d99c1f;
}

body.h26-preview .cg-econ-card__metric {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h26-text-dim);
  margin: 6px 0 0;
}
body.h26-preview .cg-econ-card__value {
  font-family: 'Geist', sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--h26-text);
  text-wrap: balance;
}


/* ═══════════════════════════════════════════════════════
 * FINAL CTA — CONCEPT B: CENTERED HERO + PROOF HALO
 * Concentric green radial glows behind a centered headline
 * with iridescent <em> accent. Single primary CTA + partner
 * badges row. NO secondary CTA. NO star rating.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-final-cta-dark {
  background: #0a0b0d;
  color: #fff;
  padding: 120px 32px 110px;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-final-cta-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 380px at 50% 50%, rgba(0,197,70,.22), transparent 60%),
    radial-gradient(600px 300px at 50% 50%, rgba(0,197,70,.14), transparent 65%),
    radial-gradient(360px 200px at 50% 50%, rgba(0,197,70,.08), transparent 70%);
  pointer-events: none;
}
body.h26-preview .cg-final-cta-dark .cg-container {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}
body.h26-preview .cg-final-cta-dark__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 28px;
  background: rgba(0,197,70,.12);
  border: 1px solid rgba(0,197,70,.3);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--h26-green);
  text-transform: uppercase;
}
body.h26-preview .cg-final-cta-dark__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--h26-green);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(0,197,70,.22);
}
body.h26-preview .cg-final-cta-dark__headline {
  font-family: 'Geist', sans-serif;
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 22px;
  color: #fff;
  text-wrap: balance;
}
body.h26-preview .cg-final-cta-dark__headline em,
body.h26-preview .cg-final-cta-dark__headline i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #6ee7a1, var(--h26-green) 60%, #fff 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .cg-final-cta-dark__sub {
  font-size: 17.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 auto 36px;
  max-width: 560px;
  text-wrap: pretty;
}
body.h26-preview .cg-final-cta-dark__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}
body.h26-preview .cg-final-cta-dark__buttons .cg-btn {
  padding: 18px 32px;
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 12px 28px -8px rgba(0,197,70,.55);
}
body.h26-preview .cg-final-cta-dark__buttons .cg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(0,197,70,.7);
}
/* Hide any secondary button (e.g., "Call Us") under h26 */
body.h26-preview .cg-final-cta-dark__buttons .cg-btn--outline-white,
body.h26-preview .cg-final-cta-dark__buttons .cg-btn:not(.cg-btn--green) {
  display: none !important;
}

body.h26-preview .cg-final-cta-dark__partners {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
body.h26-preview .cg-final-cta-dark__partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
body.h26-preview .cg-final-cta-dark__partner-dot {
  width: 7px; height: 7px;
  background: var(--h26-green);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0,197,70,.5);
}

body.h26-preview .cg-final-cta-dark__risk {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════
 * COMPARISON TABLE
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-comparison-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
body.h26-preview .cg-comparison-v2__col {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--h26-shadow-sm);
}
body.h26-preview .cg-comparison-v2__col--without { background: rgba(15,18,22,.02); }
body.h26-preview .cg-comparison-v2__col--with {
  background: linear-gradient(145deg, #ffffff, var(--h26-green-tint));
  border-color: rgba(0,197,70,.28);
  box-shadow: 0 20px 48px -12px rgba(0,197,70,.18), 0 4px 12px rgba(15,18,22,.06);
}
body.h26-preview .cg-comparison-v2__badge {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 14px;
  font-weight: 600;
}
body.h26-preview .cg-comparison-v2__col--without .cg-comparison-v2__badge { background: rgba(15,18,22,.05); color: var(--h26-text-dim); }
body.h26-preview .cg-comparison-v2__col--with .cg-comparison-v2__badge { background: rgba(0,197,70,.12); color: var(--h26-green-deep); }
body.h26-preview .cg-comparison-v2__title { font-family: 'Geist', sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 20px; letter-spacing: -0.02em; }
body.h26-preview .cg-comparison-v2__list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--h26-stroke); list-style: none; font-size: 14.5px; line-height: 1.5; color: var(--h26-text-dim); }
body.h26-preview .cg-comparison-v2__list li:last-child { border-bottom: 0; }
body.h26-preview .cg-comparison-v2__check { color: var(--h26-green); flex-shrink: 0; }
body.h26-preview .cg-comparison-v2__cross { color: #9ca3af; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
 * TEAM — EDITORIAL SPOTLIGHT (Concept A)
 * Left: big featured co-founder card (portrait + pull quote +
 * credential chips). Right: compact 2×3 mini-grid of the rest.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-team-strip {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
body.h26-preview .cg-team-strip__header { text-align: center; margin-bottom: 56px; }
body.h26-preview .cg-team-strip__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 14px;
  text-wrap: balance;
}
body.h26-preview .cg-team-strip__sub {
  color: var(--h26-text-dim);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 640px;
  text-wrap: pretty;
}

/* ───── Spotlight grid (featured narrower · mini-grid wider) ───── */
body.h26-preview .cg-team-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 40px;
  align-items: start;
}

/* ───── Featured card (left) ───── */
body.h26-preview .cg-team-feature {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--h26-shadow-md);
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-team-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 400px 300px at 100% 0%, rgba(0,197,70,.08), transparent 60%);
  pointer-events: none;
}
body.h26-preview .cg-team-feature > * { position: relative; z-index: 1; }
body.h26-preview .cg-team-feature__head {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 28px;
}
body.h26-preview .cg-team-feature__photo {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 12px 28px -8px rgba(15,18,22,.25);
  flex-shrink: 0;
}
body.h26-preview .cg-team-feature__role {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h26-green-deep);
  font-weight: 600;
  margin-bottom: 6px;
}
body.h26-preview .cg-team-feature__name {
  font-family: 'Geist', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  line-height: 1.15;
}
body.h26-preview .cg-team-feature__tenure {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--h26-text-dimmer);
  line-height: 1.4;
}
body.h26-preview .cg-team-feature__quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--h26-text);
  margin: 0 0 24px;
  padding-left: 20px;
  border-left: 3px solid var(--h26-green);
  text-wrap: pretty;
}
body.h26-preview .cg-team-feature__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.h26-preview .cg-team-feature__chip {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--h26-green-tint);
  border: 1px solid rgba(0,197,70,.25);
  border-radius: 100px;
  color: var(--h26-green-deep);
}

/* ───── Mini grid (right) — 3 cols · 4 rows ───── */
body.h26-preview .cg-team-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
body.h26-preview .cg-team-mini {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--h26-shadow-sm);
  transition: all .25s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-team-mini:hover {
  transform: translateY(-3px);
  box-shadow: var(--h26-shadow-md);
  border-color: rgba(0,197,70,.22);
}
body.h26-preview .cg-team-mini__photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px -4px rgba(15,18,22,.2);
}
body.h26-preview .cg-team-mini__name {
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin: 0 0 3px;
  line-height: 1.25;
}
body.h26-preview .cg-team-mini__role {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--h26-text-dimmer);
  letter-spacing: 0.03em;
  line-height: 1.35;
}

/* Hide the old team-strip grid markup if it still renders
 * somewhere — the new markup uses .cg-team-spotlight. */
body.h26-preview .cg-team-strip__grid { display: none; }

/* Responsive */
@media (max-width: 1100px) {
  body.h26-preview .cg-team-spotlight { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 780px) {
  body.h26-preview .cg-team-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  body.h26-preview .cg-team-feature { padding: 28px 24px; }
  body.h26-preview .cg-team-feature__head { flex-direction: column; text-align: center; gap: 18px; }
  body.h26-preview .cg-team-feature__chips { justify-content: center; }
  body.h26-preview .cg-team-mini-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
 * CHALLENGE CARDS (niche hub "Marketing Challenges" block)
 * Numbered editorial cards with warning icon — non-link variant
 * of the sibling-card pattern. Renders 3-col on desktop.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Concept A — Split Challenge / Solution cards */
body.h26-preview .cg-challenge-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1180px;
}
body.h26-preview .cg-challenge-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s cubic-bezier(.22,.61,.36,1),
              border-color .25s cubic-bezier(.22,.61,.36,1);
  position: relative;
  padding: 0;
  gap: 0;
}
body.h26-preview .cg-challenge-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,197,70,.25);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
body.h26-preview .cg-challenge-card__challenge {
  padding: 24px 26px 22px;
  flex: 1;
}
body.h26-preview .cg-challenge-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body.h26-preview .cg-challenge-card__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep) 60%, #0a0b0d 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .cg-challenge-card__warn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(234,179,8,.12);
  color: #854d0e;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
body.h26-preview .cg-challenge-card__title {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--h26-text);
  text-wrap: balance;
  margin: 0 0 10px 0;
}
body.h26-preview .cg-challenge-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  margin: 0;
  text-wrap: pretty;
}
body.h26-preview .cg-challenge-card__solution {
  background: linear-gradient(180deg, #f6fdf7, #eef9f0);
  padding: 18px 26px 20px;
  border-top: 1px solid rgba(0,197,70,.15);
}
body.h26-preview .cg-challenge-card__solution-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h26-green-deep);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.h26-preview .cg-challenge-card__solution-label::before {
  content: '→';
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
body.h26-preview .cg-challenge-card__solution-text {
  font-size: 13.5px;
  color: var(--h26-text);
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 860px) {
  body.h26-preview .cg-challenge-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
 * SERVICE CARDS (niche hub "4 channels" block)
 * Only rendered on niche hubs — 4 big service cards like homepage.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-spoke-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
body.h26-preview .cg-spoke-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 32px 26px;
  text-decoration: none;
  color: var(--h26-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--h26-shadow-sm);
  transition: all .3s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-spoke-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(0,197,70,.08), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
body.h26-preview .cg-spoke-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--h26-shadow-md);
  border-color: rgba(0,197,70,.3);
}
body.h26-preview .cg-spoke-card:hover::before { opacity: 1; }
body.h26-preview .cg-spoke-card__icon {
  width: 48px; height: 48px;
  background: linear-gradient(145deg, var(--h26-green-tint), #fff);
  border: 1px solid rgba(0,197,70,.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--h26-green-deep);
  position: relative;
  z-index: 1;
}
body.h26-preview .cg-spoke-card__icon svg { width: 24px; height: 24px; }
body.h26-preview .cg-spoke-card__title {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--h26-text);
  position: relative;
  z-index: 1;
}
body.h26-preview .cg-spoke-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  margin: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}
body.h26-preview .cg-spoke-card__link {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h26-green-deep);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--h26-stroke);
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
body.h26-preview .cg-spoke-card__link::after {
  content: "→";
  transition: transform .2s;
}
body.h26-preview .cg-spoke-card:hover .cg-spoke-card__link::after { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════
 * SIBLING GRID — CONCEPT A: NUMBERED EDITORIAL CARDS
 * Numbered prefix (01, 02, 03…) in italic Instrument Serif
 * iridescent green. Services row gets descriptions, industries
 * row uses the compact variant.
 * ═══════════════════════════════════════════════════════ */
/* Section head: left-aligned title with kicker label, optional CTA right */
body.h26-preview .cg-sibling-head {
  max-width: 1100px;
  margin: 0 auto 32px;
  text-align: left;
}
body.h26-preview .cg-sibling-head__row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
body.h26-preview .cg-sibling-head .cg-section__label { margin-bottom: 14px; }
body.h26-preview .cg-sibling-head .cg-section__title {
  font-size: clamp(28px, 3.6vw, 38px);
  text-align: left;
  margin: 0;
}

/* Default grid: 4-column for industries (compact cards) */
body.h26-preview .cg-sibling-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Few-card variant: 3-column for services (full description cards) */
body.h26-preview .cg-sibling-grid--few {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.h26-preview .cg-sibling-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 20px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: var(--h26-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s cubic-bezier(.22,.61,.36,1),
              border-color .25s cubic-bezier(.22,.61,.36,1);
  position: relative;
}
body.h26-preview .cg-sibling-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,197,70,.3);
  box-shadow: var(--h26-shadow-md);
}

/* Card top: number + icon */
body.h26-preview .cg-sibling-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
body.h26-preview .cg-sibling-card__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep) 60%, #0a0b0d 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .cg-sibling-card__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: var(--h26-green-tint);
  border: 1px solid rgba(0,197,70,.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--h26-green-deep);
}
body.h26-preview .cg-sibling-card__icon svg { width: 18px; height: 18px; }

body.h26-preview .cg-sibling-card__title {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--h26-text);
  text-wrap: balance;
  margin: 0;
}

body.h26-preview .cg-sibling-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--h26-text-dim);
  margin: 0;
  text-wrap: pretty;
}

body.h26-preview .cg-sibling-card__arrow {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--h26-stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--h26-text-dimmer);
  transition: color .2s ease;
}
body.h26-preview .cg-sibling-card:hover .cg-sibling-card__arrow {
  color: var(--h26-green-deep);
}
body.h26-preview .cg-sibling-card__arrow svg {
  transition: transform .2s ease;
  width: 14px; height: 14px;
}
body.h26-preview .cg-sibling-card:hover .cg-sibling-card__arrow svg {
  transform: translateX(4px);
}

/* Service-row (few-card variant): bigger numbered prefix and icon */
body.h26-preview .cg-sibling-grid--few .cg-sibling-card {
  padding: 26px 26px 20px;
  gap: 12px;
}
body.h26-preview .cg-sibling-grid--few .cg-sibling-card__num { font-size: 28px; }
body.h26-preview .cg-sibling-grid--few .cg-sibling-card__icon {
  width: 42px; height: 42px; border-radius: 12px;
}
body.h26-preview .cg-sibling-grid--few .cg-sibling-card__icon svg { width: 20px; height: 20px; }
body.h26-preview .cg-sibling-grid--few .cg-sibling-card__title { font-size: 17px; }

/* ═══════════════════════════════════════════════════════
 * GRID LIVE SEARCH — sits above any cg-sibling-grid that
 * would collapse. Filters cards by title match in real time.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-grid-search {
  max-width: 1100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.h26-preview .cg-grid-search__field {
  flex: 1 1 320px;
  position: relative;
  display: flex;
  align-items: center;
}
body.h26-preview .cg-grid-search__icon {
  position: absolute;
  left: 18px;
  color: var(--h26-text-dimmer);
  pointer-events: none;
  transition: color .2s ease;
}
body.h26-preview .cg-grid-search__field:focus-within .cg-grid-search__icon {
  color: var(--h26-green-deep);
}
body.h26-preview .cg-grid-search__input {
  width: 100%;
  padding: 14px 44px 14px 48px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: var(--h26-text);
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
body.h26-preview .cg-grid-search__input::placeholder {
  color: var(--h26-text-dimmer);
}
body.h26-preview .cg-grid-search__input:focus {
  outline: none;
  border-color: rgba(0,197,70,.5);
  box-shadow: 0 0 0 4px rgba(0,197,70,.12);
}
/* Strip native search clear button (we render our own) */
body.h26-preview .cg-grid-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
body.h26-preview .cg-grid-search__clear {
  position: absolute;
  right: 16px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--h26-bg);
  border: 1px solid var(--h26-stroke);
  color: var(--h26-text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
body.h26-preview .cg-grid-search__clear:hover {
  background: var(--h26-text);
  color: #fff;
  border-color: var(--h26-text);
}
body.h26-preview .cg-grid-search__count {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--h26-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
body.h26-preview .cg-grid-search__count[data-active="true"] {
  color: var(--h26-green-deep);
}

/* Empty state when no matches */
body.h26-preview .cg-grid-search__empty {
  max-width: 1100px;
  margin: 32px auto;
  padding: 32px;
  text-align: center;
  background: var(--h26-card);
  border: 1px dashed var(--h26-stroke);
  border-radius: 16px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: var(--h26-text-dim);
}

/* While searching, hide non-matching cards and show all matches regardless
   of the collapsed nth-child rules. */
body.h26-preview .cg-sibling-grid > .cg-sibling-card.is-search-hidden {
  display: none !important;
}
body.h26-preview .cg-sibling-grid.is-searching > .cg-sibling-card:not(.is-search-hidden) {
  display: flex !important;
}
/* Hide the show-more button while searching — search shows all matches */
body.h26-preview .cg-sibling-grid.is-searching + .cg-show-more-btn { display: none !important; }

/* Collapsed industry grid: hide rows past row 2 until expanded */
body.h26-preview .cg-sibling-grid--collapsed > .cg-sibling-card:nth-child(n+9) {
  display: none;
}
body.h26-preview .cg-sibling-grid--collapsed.is-expanded > .cg-sibling-card:nth-child(n+9) {
  display: flex;
}

/* Category hub + industries archive directory: 12-card initial reveal
   (3 rows × 4 cols). Scoped to both #directory (category hub singular)
   and #industries (archive). */
body.h26-preview #directory .cg-sibling-grid--collapsed > .cg-sibling-card:nth-child(n+9),
body.h26-preview #industries .cg-sibling-grid--collapsed > .cg-sibling-card:nth-child(n+9) {
  display: flex;
}
body.h26-preview #directory .cg-sibling-grid--collapsed > .cg-sibling-card:nth-child(n+13),
body.h26-preview #industries .cg-sibling-grid--collapsed > .cg-sibling-card:nth-child(n+13) {
  display: none;
}
body.h26-preview #directory .cg-sibling-grid--collapsed.is-expanded > .cg-sibling-card:nth-child(n+13),
body.h26-preview #industries .cg-sibling-grid--collapsed.is-expanded > .cg-sibling-card:nth-child(n+13) {
  display: flex;
}

body.h26-preview .cg-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px auto 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h26-text-dim);
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
body.h26-preview .cg-show-more-btn:hover {
  border-color: rgba(0,197,70,.4);
  color: var(--h26-green-deep);
  background: var(--h26-green-tint);
}

/* ═══════════════════════════════════════════════════════
 * FAQ — CONCEPT A: TWO-COLUMN MAGAZINE
 * Sticky left sidebar (title + intro + Talk-to-us CTA)
 * Right: clean hairline-separator accordion (no card chrome)
 * ═══════════════════════════════════════════════════════ */
/* Hide the legacy section header — sidebar carries the title now */
body.h26-preview #faq .cg-section__head { display: none !important; }

/* Kill the legacy "+/−" pseudo-element from main.css — we render our own SVG icon now */
body.h26-preview .cg-faq-item__q::after { content: none !important; display: none !important; }

body.h26-preview .cg-faq-magazine {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}

/* Sidebar */
body.h26-preview .cg-faq-magazine__side {
  position: sticky;
  top: 32px;
}
body.h26-preview .cg-faq-magazine__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.h26-preview .cg-faq-magazine__label::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--h26-green);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(0,197,70,.18);
}
body.h26-preview .cg-faq-magazine__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--h26-text);
  text-wrap: balance;
}
body.h26-preview .cg-faq-magazine__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep) 60%, #0a0b0d 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .cg-faq-magazine__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--h26-text-dim);
  margin: 0 0 28px;
  text-wrap: pretty;
}
body.h26-preview .cg-faq-magazine__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: #0a0b0d;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.h26-preview .cg-faq-magazine__cta:hover {
  background: var(--h26-green-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(0,197,70,.5);
}

/* Right: accordion list (no per-item card chrome — hairline separators) */
body.h26-preview .cg-faq-magazine__list { max-width: 100%; }
body.h26-preview .cg-faq-magazine__list .cg-faq-list {
  max-width: 100%;
  margin: 0;
  display: block;
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--h26-stroke);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: background .2s ease;
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item:first-child {
  border-top: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item:hover {
  border-color: var(--h26-stroke);
  box-shadow: none;
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--h26-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color .2s ease;
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item__q:hover {
  color: var(--h26-green-deep);
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--h26-bg);
  border: 1px solid var(--h26-stroke);
  color: var(--h26-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item.active .cg-faq-item__icon {
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  border-color: transparent;
  color: #fff;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px -4px rgba(0,197,70,.5);
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item__a {
  display: none;
  padding: 0 0 24px;
  margin: 0;
  border-top: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--h26-text-dim);
  max-width: 640px;
  text-wrap: pretty;
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item.active .cg-faq-item__a,
body.h26-preview .cg-faq-magazine__list .cg-faq-item.is-open .cg-faq-item__a {
  display: block;
}
body.h26-preview .cg-faq-magazine__list .cg-faq-item__a p:first-child { margin-top: 0; }
body.h26-preview .cg-faq-magazine__list .cg-faq-item__a p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════
 * LEAD FORM — CONCEPT A: GLASS ON GRADIENT
 * Section gets a soft green-tint gradient backdrop. Form sits
 * in a glass-morphism card with floating-label inputs.
 * Left column carries a 3-step "what happens next" timeline.
 * ═══════════════════════════════════════════════════════ */
/* Gradient backdrop — starts deeper green at the top so it visually
   continues the dark final-CTA's green glow, then fades down. */
body.h26-preview #lead-form {
  background: linear-gradient(180deg,
    rgba(0,197,70,0.22) 0%,
    var(--h26-green-tint) 18%,
    #ffffff 70%);
  position: relative;
  overflow: hidden;
}
body.h26-preview #lead-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 80% 0%, rgba(0,197,70,.18), transparent 60%),
    radial-gradient(700px 280px at 10% 100%, rgba(0,197,70,.12), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
body.h26-preview #lead-form .cg-container { position: relative; z-index: 1; }

body.h26-preview .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.h26-preview .cg-lead-form-v2__info { padding-top: 8px; }
body.h26-preview .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.h26-preview .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(0,197,70,.18);
}
body.h26-preview .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.h26-preview .cg-lead-form-v2__heading em,
body.h26-preview .cg-lead-form-v2__heading i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep) 60%, #0a0b0d 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .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.h26-preview .cg-lead-form-v2__timeline {
  margin: 0 0 32px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(0,197,70,.18);
}
body.h26-preview .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.h26-preview .cg-lead-form-v2__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
body.h26-preview .cg-lead-form-v2__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
body.h26-preview .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, var(--h26-green), var(--h26-green-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.h26-preview .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.h26-preview .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 — now unused (the PHP no longer renders the partner-badge
   div inside the lead form). Rule kept minimal in case any legacy markup
   still carries the class. Border + padding removed. */
body.h26-preview .cg-lead-form-v2__trust {
  display: none;
}
body.h26-preview .cg-lead-form-v2__trust-sep {
  color: var(--h26-text-dimmer);
  margin: 0 4px;
}

/* ── Right column: glass-morphism form card ── */
body.h26-preview .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.h26-preview .cg-form__field--float {
  position: relative;
  margin-bottom: 16px;
}
body.h26-preview .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.h26-preview .cg-form__field--float input,
body.h26-preview .cg-form__field--float select,
body.h26-preview .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.h26-preview .cg-form__field--float input:focus,
body.h26-preview .cg-form__field--float select:focus,
body.h26-preview .cg-form__field--float textarea:focus {
  outline: none;
  border-color: var(--h26-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,197,70,.18);
}
/* Float label up when input has content or focus */
body.h26-preview .cg-form__field--float input:focus + label,
body.h26-preview .cg-form__field--float input:not(:placeholder-shown) + label,
body.h26-preview .cg-form__field--float textarea:focus + label,
body.h26-preview .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.h26-preview .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.h26-preview .cg-form__field--select select:focus + label {
  color: var(--h26-green-deep);
}

/* Select arrow */
body.h26-preview .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.h26-preview .cg-form__submit { margin-top: 22px; }
body.h26-preview .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(0,197,70,.5);
}
body.h26-preview .cg-form__submit .cg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(0,197,70,.6);
}

body.h26-preview .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.h26-preview .cg-form-success {
  text-align: center;
  padding: 32px 0 8px;
}
body.h26-preview .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(0,197,70,.5);
}
body.h26-preview .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.h26-preview .cg-form-success p {
  font-size: 15px;
  color: var(--h26-text-dim);
  line-height: 1.55;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════
 * BREADCRUMBS, STICKY CTA
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-breadcrumbs {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--h26-text-dimmer);
  padding: 20px 0 10px;
}
body.h26-preview .cg-breadcrumbs a { color: var(--h26-text-dim); text-decoration: none; transition: color .15s; }
body.h26-preview .cg-breadcrumbs a:hover { color: var(--h26-green-deep); }
body.h26-preview .cg-sticky-cta__btn {
  background: var(--h26-green);
  color: #fff;
  border-radius: 100px;
  padding: 14px 22px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  box-shadow: 0 10px 24px -6px rgba(0,197,70,.5);
}

/* ═══════════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  body.h26-preview .cg-hero-spoke__grid { grid-template-columns: 1fr; gap: 48px; }
  body.h26-preview .cg-benefit-grid,
  body.h26-preview .cg-why-dark__grid { grid-template-columns: repeat(2, 1fr); }
  body.h26-preview .cg-benefit-row {
    grid-template-columns: 56px 1fr 160px;
    gap: 22px;
    padding: 24px 26px;
  }
  body.h26-preview .cg-benefit-row__icon { width: 56px; height: 56px; }
  body.h26-preview .cg-benefit-row__icon svg { width: 26px; height: 26px; }
  body.h26-preview .cg-benefit-row__stat-num { font-size: 28px; }
  body.h26-preview .cg-sibling-grid { grid-template-columns: repeat(3, 1fr); }
  body.h26-preview .cg-sibling-grid--few { grid-template-columns: 1fr; }
  body.h26-preview .cg-faq-magazine { grid-template-columns: 1fr; gap: 40px; }
  body.h26-preview .cg-faq-magazine__side { position: static; }
  body.h26-preview .cg-faq-magazine__title { font-size: 30px; }
  body.h26-preview .cg-team-strip__grid { grid-template-columns: 1fr; }
  body.h26-preview .cg-lead-form-v2 { grid-template-columns: 1fr; gap: 40px; }
  body.h26-preview .cg-stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  body.h26-preview .cg-stats-bar__item { border-right: 0; border-bottom: 1px solid var(--h26-stroke); }
  body.h26-preview .cg-stats-bar__item:nth-child(2n) { border-right: 0; }
  body.h26-preview .cg-stats-bar__item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 780px) {
  body.h26-preview .cg-container { padding: 0 20px; }
  body.h26-preview .cg-section { padding: 72px 0; }
  body.h26-preview .cg-section__head { margin-bottom: 40px; }
  body.h26-preview .cg-hero-spoke { padding: 56px 0 48px; }
  body.h26-preview .cg-hero-spoke__title { font-size: clamp(36px, 10vw, 52px); }
  body.h26-preview .cg-benefit-grid,
  body.h26-preview .cg-why-dark__grid,
  body.h26-preview .cg-sibling-grid,
  body.h26-preview .cg-comparison-v2 { grid-template-columns: 1fr; }
  body.h26-preview .cg-benefit-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
    text-align: left;
  }
  body.h26-preview .cg-benefit-row__stat {
    border-left: 0;
    border-top: 1px solid var(--h26-stroke);
    padding-left: 0;
    padding-top: 16px;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  body.h26-preview .cg-benefit-row__stat-num { margin-bottom: 0; font-size: 26px; }
  body.h26-preview .cg-benefit-exclusive {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 20px 24px;
  }
  body.h26-preview .cg-stats-bar { margin: -20px 12px 0; border-radius: 18px; }
  body.h26-preview .cg-stats-bar__inner { grid-template-columns: 1fr; }
  body.h26-preview .cg-stats-bar__item { border-bottom: 1px solid var(--h26-stroke); }
  body.h26-preview .cg-stats-bar__item:last-child { border-bottom: 0; }
  body.h26-preview .cg-why-dark,
  body.h26-preview .cg-mid-cta-v2,
  body.h26-preview .cg-final-cta-dark { padding: 64px 24px; margin: 40px 8px; border-radius: 20px; }
}


/* ═══════════════════════════════════════════════════════
 * COMPARISON — CONCEPT D: DARK PREMIUM ROW-ALIGNED TABLE
 * Hides the legacy 2-column markup, inverts the section to
 * dark, and renders a glass-morphism table with glowing
 * green winner column + muted red losing column.
 * ═══════════════════════════════════════════════════════ */
/* Hide legacy columns under h26-preview */
body.h26-preview .cg-comparison-v2 { display: none !important; }

/* Invert the parent section (catches the gray section that wraps the table) */
body.h26-preview .cg-section:has(.cg-compare-dark) {
  background: #0a0b0d;
  color: #fff;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-section:has(.cg-compare-dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 280px at 25% 20%, rgba(0,197,70,.18), transparent 65%),
    radial-gradient(500px 220px at 80% 80%, rgba(239,68,68,.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body.h26-preview .cg-section:has(.cg-compare-dark) .cg-container { position: relative; z-index: 1; }
body.h26-preview .cg-section:has(.cg-compare-dark) .cg-section__title { color: #fff; }
body.h26-preview .cg-section:has(.cg-compare-dark) .cg-section__label { color: rgba(255,255,255,0.6); }
body.h26-preview .cg-section:has(.cg-compare-dark) .cg-section__sub { color: rgba(255,255,255,0.7); }

/* The table itself */
body.h26-preview .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.h26-preview .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.h26-preview .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.h26-preview .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.h26-preview .cg-compare-dark__col--good {
  color: #00C546;
  text-shadow: 0 0 24px rgba(0,197,70,.4);
}
body.h26-preview .cg-compare-dark__col--bad {
  color: rgba(255,255,255,0.45);
}
body.h26-preview .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.h26-preview .cg-compare-dark__chip--good {
  background: linear-gradient(135deg, #00C546, #008f33);
  color: #fff;
  box-shadow: 0 0 18px rgba(0,197,70,.55);
}
body.h26-preview .cg-compare-dark__chip--bad {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
}

body.h26-preview .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.h26-preview .cg-compare-dark__row:last-child { border-bottom: 0; }
body.h26-preview .cg-compare-dark__row:hover { background: rgba(255,255,255,0.02); }

body.h26-preview .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.h26-preview .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.h26-preview .cg-compare-dark__cell--good {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
}
body.h26-preview .cg-compare-dark__cell--bad {
  color: rgba(255,255,255,0.5);
}
body.h26-preview .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.h26-preview .cg-compare-dark__icon--good {
  background: linear-gradient(135deg, #00C546, #008f33);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,197,70,.5);
}
body.h26-preview .cg-compare-dark__icon--bad {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
}

/* Responsive */
@media (max-width: 980px) {
  body.h26-preview .cg-compare-dark__head,
  body.h26-preview .cg-compare-dark__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 24px;
  }
  body.h26-preview .cg-compare-dark__label { display: none; }
  body.h26-preview .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);
  }
}



/* ═══════════════════════════════════════════════════════
 * WEB DESIGN HERO VISUAL — Concept C: Portfolio Card Stack
 * Three fanned browser-frame cards showing real client sites.
 * ═══════════════════════════════════════════════════════ */

body.h26-preview .cg-wd-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  padding: 20px 0;
}

body.h26-preview .cg-wd-stack {
  position: relative;
  width: 100%;
  height: 420px;
  display: flex;
  justify-content: center;
  perspective: 900px;
}

/* Individual cards */
body.h26-preview .cg-wd-card {
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--h26-shadow-md, 0 4px 16px rgba(0,0,0,.06));
  position: absolute;
  width: 300px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
body.h26-preview .cg-wd-card:hover {
  box-shadow: var(--h26-shadow-lg, 0 24px 64px rgba(0,0,0,.1));
  z-index: 10 !important;
}

/* Card positions — fanned out wide */
body.h26-preview .cg-wd-card--1 {
  transform: rotate(-12deg) translateX(-210px) translateY(30px);
  z-index: 1;
}
body.h26-preview .cg-wd-card--1:hover {
  transform: rotate(-12deg) translateX(-210px) translateY(22px);
}
body.h26-preview .cg-wd-card--2 {
  transform: rotate(0deg) translateY(-18px);
  z-index: 3;
}
body.h26-preview .cg-wd-card--2:hover {
  transform: rotate(0deg) translateY(-24px);
}
body.h26-preview .cg-wd-card--3 {
  transform: rotate(11deg) translateX(210px) translateY(35px);
  z-index: 2;
}
body.h26-preview .cg-wd-card--3:hover {
  transform: rotate(6deg) translateX(140px) translateY(14px);
}

/* Card toolbar (browser chrome) */
body.h26-preview .cg-wd-card__toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #f0f1ee;
  border-bottom: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-wd-card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(15,18,22,.1);
}
body.h26-preview .cg-wd-card__url {
  flex: 1;
  height: 16px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--h26-stroke);
  margin-left: 6px;
}

/* Card screenshot area */
body.h26-preview .cg-wd-card__screen {
  height: 240px;
  overflow: hidden;
  background: #fff;
}
body.h26-preview .cg-wd-card__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Card footer */
body.h26-preview .cg-wd-card__footer {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--h26-stroke);
}
body.h26-preview .cg-wd-card__niche {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--h26-text-dim);
}
body.h26-preview .cg-wd-card__tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--h26-green-tint, rgba(0,197,70,.06));
  color: var(--h26-green-deep, #059033);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Floating badges */
body.h26-preview .cg-wd-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--h26-text-dim);
  box-shadow: var(--h26-shadow-sm);
  z-index: 5;
  white-space: nowrap;
}
body.h26-preview .cg-wd-badge svg {
  color: var(--h26-green);
  flex-shrink: 0;
}
body.h26-preview .cg-wd-badge--fast {
  top: 2%;
  right: 0;
}
body.h26-preview .cg-wd-badge--managed {
  bottom: 5%;
  left: 0;
}

@media (max-width: 780px) {
  body.h26-preview .cg-wd-hero-visual { min-height: 360px; }
  body.h26-preview .cg-wd-stack { height: 340px; }
  body.h26-preview .cg-wd-card { width: 210px; }
  body.h26-preview .cg-wd-card__screen { height: 170px; }
  body.h26-preview .cg-wd-card--1 { transform: rotate(-10deg) translateX(-100px) translateY(10px); }
  body.h26-preview .cg-wd-card--3 { transform: rotate(9deg) translateX(100px) translateY(15px); }
  body.h26-preview .cg-wd-badge--fast { top: -2%; right: 5px; }
  body.h26-preview .cg-wd-badge--managed { left: 5px; bottom: 2%; }
}

/* ═══════════════════════════════════════════════════════
 * FACEBOOK ADS HERO VISUAL
 * Three fanned phones showing real Meta placements:
 * IG Story (Plumbing), FB Feed (Junk Removal), Reel (Roofing).
 * ═══════════════════════════════════════════════════════ */

body.h26-preview .cg-fb-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px;
  padding: 20px 0;
}

body.h26-preview .cg-fb-phone-trio {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Phone base */
body.h26-preview .cg-fb-phone {
  position: absolute;
  width: 240px;
  height: 490px;
  background: #1a1a1a;
  border-radius: 38px;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 40px 80px rgba(0,0,0,.08);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-fb-phone:hover { z-index: 10 !important; }

body.h26-preview .cg-fb-phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 20px;
  z-index: 5;
}

body.h26-preview .cg-fb-phone__screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

/* Phone positions — fanned */
body.h26-preview .cg-fb-phone--1 {
  transform: rotate(-10deg) translateX(-230px) translateY(10px);
  z-index: 1;
}
body.h26-preview .cg-fb-phone--1:hover {
  transform: rotate(-10deg) translateX(-250px) translateY(-5px);
}
body.h26-preview .cg-fb-phone--2 {
  transform: translateY(-20px);
  z-index: 3;
}
body.h26-preview .cg-fb-phone--2:hover {
  transform: translateY(-32px);
}
body.h26-preview .cg-fb-phone--3 {
  transform: rotate(10deg) translateX(230px) translateY(10px);
  z-index: 2;
}
body.h26-preview .cg-fb-phone--3:hover {
  transform: rotate(10deg) translateX(250px) translateY(-5px);
}

/* ============ IG Story (Plumbing) ============ */
body.h26-preview .cg-fb-ig-story {
  height: 100%;
  padding: 40px 12px 12px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
}
body.h26-preview .cg-fb-ig-story__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
}
body.h26-preview .cg-fb-ig-story__bar {
  position: absolute;
  top: 34px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  z-index: 2;
}
body.h26-preview .cg-fb-ig-story__bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
body.h26-preview .cg-fb-ig-story__header {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
body.h26-preview .cg-fb-ig-story__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1e40af;
  border: 2px solid rgba(255,255,255,.5);
}
body.h26-preview .cg-fb-ig-story__name { font-size: 10px; font-weight: 600; }
body.h26-preview .cg-fb-ig-story__sp { font-size: 8px; opacity: .85; }
body.h26-preview .cg-fb-ig-story__body {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 140px;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
body.h26-preview .cg-fb-ig-story__sub {
  font-size: 11px;
  margin-top: 8px;
  opacity: .95;
  position: relative;
  z-index: 2;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
body.h26-preview .cg-fb-ig-story__cta {
  margin-top: 90px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.4);
  padding: 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ============ Facebook Feed (Junk Removal) ============ */
body.h26-preview .cg-fb-fb-feed {
  padding: 40px 0 0;
  font-size: 10px;
  height: 100%;
  background: #fff;
  color: #050505;
}
body.h26-preview .cg-fb-fb-feed__topbar {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e4e6eb;
}
body.h26-preview .cg-fb-fb-feed__logo {
  font-weight: 800;
  color: #0866FF;
  font-size: 16px;
  letter-spacing: -0.03em;
}
body.h26-preview .cg-fb-fb-feed__icons { color: #65676b; font-size: 11px; }
body.h26-preview .cg-fb-fb-feed__post { padding: 10px 0 0; }
body.h26-preview .cg-fb-fb-feed__header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 12px;
}
body.h26-preview .cg-fb-fb-feed__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ea580c;
  flex-shrink: 0;
}
body.h26-preview .cg-fb-fb-feed__name { font-weight: 600; font-size: 10px; }
body.h26-preview .cg-fb-fb-feed__sp { color: #65676b; font-size: 8px; }
body.h26-preview .cg-fb-fb-feed__copy {
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: 8px;
  padding: 0 12px;
}
body.h26-preview .cg-fb-fb-feed__media {
  width: 100%;
  aspect-ratio: 1.1;
  background-size: cover;
  background-position: center;
  background-color: #ea580c;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  overflow: hidden;
}
body.h26-preview .cg-fb-fb-feed__chip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  color: #ea580c;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
  letter-spacing: -.02em;
}
body.h26-preview .cg-fb-fb-feed__footer {
  padding: 8px 12px;
  background: #f7f8fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.h26-preview .cg-fb-fb-feed__domain { font-size: 9px; color: #65676b; }
body.h26-preview .cg-fb-fb-feed__cta {
  background: #e7f3ff;
  color: #0866FF;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
}

/* ============ Reel (Roofing) ============ */
body.h26-preview .cg-fb-reel {
  height: 100%;
  padding: 40px 0 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1c1917;
}
body.h26-preview .cg-fb-reel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
body.h26-preview .cg-fb-reel__header {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
body.h26-preview .cg-fb-reel__title { font-size: 12px; font-weight: 700; }
body.h26-preview .cg-fb-reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.h26-preview .cg-fb-reel__info {
  position: absolute;
  bottom: 40px;
  left: 12px;
  right: 50px;
  z-index: 2;
}
body.h26-preview .cg-fb-reel__avatar-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
body.h26-preview .cg-fb-reel__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #44403c;
  border: 2px solid rgba(255,255,255,.4);
}
body.h26-preview .cg-fb-reel__name { font-size: 10px; font-weight: 600; }
body.h26-preview .cg-fb-reel__sp { font-size: 8px; opacity: .8; }
body.h26-preview .cg-fb-reel__copy {
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 10px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
body.h26-preview .cg-fb-reel__cta {
  background: #fff;
  color: #000;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
}

/* ============ Floating Badges ============ */
body.h26-preview .cg-fb-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--h26-stroke);
  border-radius: 100px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--h26-text-dim);
  box-shadow: var(--h26-shadow-sm);
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;
}
body.h26-preview .cg-fb-badge svg { color: var(--h26-green); flex-shrink: 0; }
body.h26-preview .cg-fb-badge--setup { top: 2%; right: 0; }
body.h26-preview .cg-fb-badge--area  { bottom: 3%; left: 0; }

/* Mobile */
@media (max-width: 780px) {
  body.h26-preview .cg-fb-hero-visual { min-height: 400px; }
  body.h26-preview .cg-fb-phone-trio { height: 380px; }
  body.h26-preview .cg-fb-phone { width: 190px; height: 380px; border-radius: 30px; padding: 6px; }
  body.h26-preview .cg-fb-phone__notch { width: 62px; height: 18px; top: 6px; }
  body.h26-preview .cg-fb-phone__screen { border-radius: 24px; }
  body.h26-preview .cg-fb-phone--1 { transform: rotate(-10deg) translateX(-100px) translateY(10px); }
  body.h26-preview .cg-fb-phone--3 { transform: rotate(10deg) translateX(100px) translateY(15px); }
  body.h26-preview .cg-fb-ig-story__body { font-size: 18px; margin-top: 100px; }
  body.h26-preview .cg-fb-ig-story__cta { margin-top: 60px; }
  body.h26-preview .cg-fb-badge--setup { top: -2%; right: 5px; font-size: 9px; padding: 6px 10px; }
  body.h26-preview .cg-fb-badge--area  { left: 5px; bottom: 1%; font-size: 9px; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════
 * GOOGLE ADS HERO VISUAL
 * Focused phone with mock Google Search Ads SERP
 * plus 4 floating capability badges.
 * ═══════════════════════════════════════════════════════ */

body.h26-preview .cg-ga-hero-visual {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

body.h26-preview .cg-ga-phone {
  width: 280px;
  height: 560px;
  background: #1a1a1a;
  border-radius: 42px;
  padding: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 40px 80px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;
}
body.h26-preview .cg-ga-phone__screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
}
body.h26-preview .cg-ga-phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 94px;
  height: 26px;
  background: #1a1a1a;
  border-radius: 20px;
  z-index: 5;
}

/* SERP */
body.h26-preview .cg-ga-serp {
  font-family: 'Roboto', arial, sans-serif;
  height: 100%;
  background: #fff;
  color: #202124;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  padding-top: 46px;
}
body.h26-preview .cg-ga-serp__status {
  padding: 4px 14px 2px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  color: #202124;
}
body.h26-preview .cg-ga-serp__search {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ebebeb;
}
body.h26-preview .cg-ga-serp__google-g {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(from 90deg at 50% 50%, #EA4335 0deg, #FBBC04 90deg, #34A853 180deg, #4285F4 270deg);
}
body.h26-preview .cg-ga-serp__google-g::after {
  content: 'G';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #4285F4;
  font-family: 'Roboto', arial, sans-serif;
}
body.h26-preview .cg-ga-serp__searchbar {
  flex: 1;
  background: #f1f3f4;
  border-radius: 24px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #202124;
}
body.h26-preview .cg-ga-serp__searchbar-icons {
  color: #70757a;
  font-size: 12px;
}
body.h26-preview .cg-ga-serp__tabs {
  padding: 6px 12px;
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: #70757a;
  border-bottom: 1px solid #ebebeb;
  overflow: hidden;
}
body.h26-preview .cg-ga-serp__tab { padding: 4px 0; white-space: nowrap; }
body.h26-preview .cg-ga-serp__tab--active {
  color: #1A73E8;
  border-bottom: 2px solid #1A73E8;
  padding-bottom: 3px;
  font-weight: 500;
}
body.h26-preview .cg-ga-serp__sponsored-header {
  padding: 10px 12px 4px;
  font-weight: 700;
  font-size: 12px;
  color: #202124;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.h26-preview .cg-ga-serp__sponsored-header::after {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px; height: 11px;
  font-style: italic;
  font-size: 8px;
  color: #70757a;
  border: 1px solid #70757a;
  border-radius: 50%;
  font-weight: 400;
}

body.h26-preview .cg-ga-serp__ad {
  padding: 8px 12px 10px;
  border-bottom: 1px solid #f1f1f1;
}
body.h26-preview .cg-ga-serp__ad:last-of-type { border-bottom: 1px solid #ebebeb; }
body.h26-preview .cg-ga-serp__ad-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
body.h26-preview .cg-ga-serp__ad-fav {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,.04);
}
body.h26-preview .cg-ga-serp__ad-fav--plumb  { background-color: #1e40af; background-image: url("https://images.unsplash.com/photo-1607472829166-bd2d39b6c50b?w=60&h=60&fit=crop"); }
body.h26-preview .cg-ga-serp__ad-fav--plumb2 { background-color: #1e3a8a; }
body.h26-preview .cg-ga-serp__ad-url-block { flex: 1; min-width: 0; }
body.h26-preview .cg-ga-serp__ad-brand { font-size: 10px; color: #202124; font-weight: 400; line-height: 1.2; }
body.h26-preview .cg-ga-serp__ad-path  { font-size: 10px; color: #70757a; line-height: 1.2; }
body.h26-preview .cg-ga-serp__ad-title { font-size: 14px; color: #1A0DAB; font-weight: 400; margin: 4px 0; line-height: 1.25; letter-spacing: -0.1px; }
body.h26-preview .cg-ga-serp__ad-desc  { font-size: 11px; color: #4d5156; line-height: 1.45; margin-bottom: 4px; }
body.h26-preview .cg-ga-serp__ad-rating { font-size: 10px; color: #4d5156; margin-top: 4px; }
body.h26-preview .cg-ga-serp__ad-rating-stars { color: #FBBC04; }

body.h26-preview .cg-ga-serp__ad-sitelinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-top: 6px;
}
body.h26-preview .cg-ga-serp__ad-sitelink {
  font-size: 11px;
  color: #1A0DAB;
  font-weight: 400;
  line-height: 1.3;
  padding: 1px 0;
}
body.h26-preview .cg-ga-serp__ad-callouts {
  font-size: 10px;
  color: #4d5156;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
body.h26-preview .cg-ga-serp__ad-callouts span::after {
  content: '·';
  margin-left: 8px;
  color: #70757a;
}
body.h26-preview .cg-ga-serp__ad-callouts span:last-child::after { content: ''; margin: 0; }

/* Capability badges (floating around phone) */
body.h26-preview .cg-ga-badge {
  position: absolute;
  background: #fff;
  border: 1px solid var(--h26-stroke);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
  transition: transform .4s ease;
  pointer-events: none;
}
body.h26-preview .cg-ga-badge:hover { transform: scale(1.05); }
body.h26-preview .cg-ga-badge__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--h26-green-tint, rgba(0,197,70,.06));
  color: var(--h26-green-deep, #059033);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.h26-preview .cg-ga-badge__icon svg { color: var(--h26-green-deep, #059033); }
body.h26-preview .cg-ga-badge__text { font-size: 12px; }
body.h26-preview .cg-ga-badge__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--h26-text-dim);
  font-weight: 600;
}
body.h26-preview .cg-ga-badge__title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--h26-text);
  white-space: nowrap;
}

/* Badge positions — surround the phone */
body.h26-preview .cg-ga-badge--1 { top: 8%;  left: 0; }
body.h26-preview .cg-ga-badge--2 { top: 25%; right: 0; }
body.h26-preview .cg-ga-badge--3 { bottom: 25%; left: 0; }
body.h26-preview .cg-ga-badge--4 { bottom: 8%;  right: 0; }

/* Mobile */
@media (max-width: 780px) {
  body.h26-preview .cg-ga-hero-visual { min-height: 440px; }
  body.h26-preview .cg-ga-phone { width: 220px; height: 440px; border-radius: 34px; padding: 8px; }
  body.h26-preview .cg-ga-phone__notch { width: 74px; height: 20px; top: 8px; }
  body.h26-preview .cg-ga-phone__screen { border-radius: 28px; }
  body.h26-preview .cg-ga-serp { padding-top: 38px; }
  body.h26-preview .cg-ga-badge { padding: 8px 12px; }
  body.h26-preview .cg-ga-badge__label { font-size: 8px; }
  body.h26-preview .cg-ga-badge__title { font-size: 11px; }
  body.h26-preview .cg-ga-badge__icon { width: 26px; height: 26px; border-radius: 8px; }
  body.h26-preview .cg-ga-badge--1 { top: 2%; left: 2%; }
  body.h26-preview .cg-ga-badge--2 { top: 18%; right: 2%; }
  body.h26-preview .cg-ga-badge--3 { bottom: 18%; left: 2%; }
  body.h26-preview .cg-ga-badge--4 { bottom: 2%; right: 2%; }
}

/* ═══════════════════════════════════════════════════════
 * GBP / LOCAL SEO HERO VISUAL
 * Phone trio with realistic Google Map Pack mockups
 * for Plumbing, HVAC, and Roofing niches.
 * ═══════════════════════════════════════════════════════ */

body.h26-preview .cg-gbp-hero-visual {
  position: relative;
  width: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
body.h26-preview .cg-gbp-phone-trio {
  position: relative;
  width: 100%;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone frames */
body.h26-preview .cg-gbp-phone {
  position: absolute;
  width: 240px;
  height: 490px;
  background: #1a1a1a;
  border-radius: 38px;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 40px 80px rgba(0,0,0,.08);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-gbp-phone:hover { z-index: 10 !important; }
body.h26-preview .cg-gbp-phone__screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
body.h26-preview .cg-gbp-phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 20px;
  z-index: 5;
}
body.h26-preview .cg-gbp-phone--1 {
  transform: rotate(-10deg) translateX(-230px) translateY(10px);
  z-index: 1;
}
body.h26-preview .cg-gbp-phone--1:hover {
  transform: rotate(-10deg) translateX(-250px) translateY(-5px);
}
body.h26-preview .cg-gbp-phone--2 {
  transform: translateY(-20px);
  z-index: 3;
}
body.h26-preview .cg-gbp-phone--2:hover {
  transform: translateY(-32px);
}
body.h26-preview .cg-gbp-phone--3 {
  transform: rotate(10deg) translateX(230px) translateY(10px);
  z-index: 2;
}
body.h26-preview .cg-gbp-phone--3:hover {
  transform: rotate(10deg) translateX(250px) translateY(-5px);
}

/* SERP chrome */
body.h26-preview .cg-gbp-serp {
  font-family: 'Roboto', arial, sans-serif;
  height: 100%;
  background: #fff;
  color: #202124;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  padding-top: 34px;
}
body.h26-preview .cg-gbp-serp__status {
  padding: 4px 14px 2px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
body.h26-preview .cg-gbp-serp__search {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ebebeb;
}
body.h26-preview .cg-gbp-serp__google-g {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(from 90deg at 50% 50%, #EA4335 0deg, #FBBC04 90deg, #34A853 180deg, #4285F4 270deg);
}
body.h26-preview .cg-gbp-serp__google-g::after {
  content: 'G';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #4285F4;
  font-family: 'Roboto', arial, sans-serif;
}
body.h26-preview .cg-gbp-serp__searchbar {
  flex: 1;
  background: #f1f3f4;
  border-radius: 24px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
body.h26-preview .cg-gbp-serp__searchbar-icons { color: #70757a; font-size: 12px; }

/* Map */
body.h26-preview .cg-gbp-serp__map {
  height: 130px;
  background: #f0ebe0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ebebeb;
}
body.h26-preview .cg-gbp-serp__map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.h26-preview .cg-gbp-serp__map-pin {
  position: absolute;
  width: 16px;
  height: 22px;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  z-index: 2;
}
body.h26-preview .cg-gbp-serp__map-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #EA4335;
  clip-path: path('M8 0 C3.6 0 0 3.6 0 8 C0 14 8 22 8 22 C8 22 16 14 16 8 C16 3.6 12.4 0 8 0 Z');
}
body.h26-preview .cg-gbp-serp__map-pin::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  top: 5px; left: 5.5px;
  z-index: 1;
}
body.h26-preview .cg-gbp-serp__map-pin--active {
  width: 22px;
  height: 30px;
  z-index: 3;
}
body.h26-preview .cg-gbp-serp__map-pin--active::before { background: #1A73E8; }
body.h26-preview .cg-gbp-serp__map-pin--active::after {
  width: 7px; height: 7px;
  top: 7px; left: 7.5px;
}
body.h26-preview .cg-gbp-serp__map-pin--p1 { top: 28%; left: 30%; }
body.h26-preview .cg-gbp-serp__map-pin--p2 { top: 62%; left: 54%; }
body.h26-preview .cg-gbp-serp__map-pin--p3 { top: 45%; left: 78%; }
body.h26-preview .cg-gbp-serp__map-ctrl {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  z-index: 4;
  font-size: 12px;
  color: #5f6368;
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
}
body.h26-preview .cg-gbp-serp__map-ctrl span {
  padding: 4px 6px;
  border-bottom: 1px solid #ebebeb;
  width: 18px;
  text-align: center;
}
body.h26-preview .cg-gbp-serp__map-ctrl span:last-child { border-bottom: none; }

/* Map Pack cards */
body.h26-preview .cg-gbp-serp__mappack-label {
  padding: 8px 12px 4px;
  font-size: 11px;
  color: #5f6368;
  font-weight: 500;
}
body.h26-preview .cg-gbp-serp__mp-card {
  display: flex;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f1f1;
  gap: 10px;
  align-items: flex-start;
}
body.h26-preview .cg-gbp-serp__mp-card:last-child { border-bottom: 1px solid #ebebeb; }
body.h26-preview .cg-gbp-serp__mp-card--active {
  background: rgba(26,115,232,.04);
  border-left: 3px solid #1A73E8;
  padding-left: 9px;
}
body.h26-preview .cg-gbp-serp__mp-num {
  width: 20px;
  height: 20px;
  background: #EA4335;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
body.h26-preview .cg-gbp-serp__mp-card--active .cg-gbp-serp__mp-num { background: #1A73E8; }
body.h26-preview .cg-gbp-serp__mp-info { flex: 1; min-width: 0; }
body.h26-preview .cg-gbp-serp__mp-name {
  font-size: 13px;
  color: #202124;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
}
body.h26-preview .cg-gbp-serp__mp-rating {
  font-size: 11px;
  color: #5f6368;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 4px;
}
body.h26-preview .cg-gbp-serp__mp-stars { color: #FBBC04; font-size: 10px; }
body.h26-preview .cg-gbp-serp__mp-meta { font-size: 10px; color: #5f6368; line-height: 1.4; }
body.h26-preview .cg-gbp-serp__mp-status { color: #34A853; font-weight: 500; }

/* Business avatars (unique per listing) */
body.h26-preview .cg-gbp-mp-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Roboto', arial, sans-serif;
  letter-spacing: -.02em;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-gbp-mp-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(0,0,0,.08));
  pointer-events: none;
}
body.h26-preview .cg-gbp-mp-img--reliable  { background: linear-gradient(135deg, #1e40af, #1e3a8a); }
body.h26-preview .cg-gbp-mp-img--apex      { background: linear-gradient(135deg, #0369a1, #075985); }
body.h26-preview .cg-gbp-mp-img--precision { background: linear-gradient(135deg, #d97706, #b45309); }
body.h26-preview .cg-gbp-mp-img--comfort   { background: linear-gradient(135deg, #b91c1c, #7f1d1d); }
body.h26-preview .cg-gbp-mp-img--summit    { background: linear-gradient(135deg, #44403c, #1c1917); }
body.h26-preview .cg-gbp-mp-img--ironclad  { background: linear-gradient(135deg, #78716c, #44403c); }

/* Mobile */
@media (max-width: 780px) {
  body.h26-preview .cg-gbp-hero-visual { min-height: 440px; }
  body.h26-preview .cg-gbp-phone-trio { height: 440px; }
  body.h26-preview .cg-gbp-phone { width: 200px; height: 400px; border-radius: 30px; padding: 6px; }
  body.h26-preview .cg-gbp-phone__notch { width: 66px; height: 18px; top: 6px; }
  body.h26-preview .cg-gbp-phone__screen { border-radius: 24px; }
  body.h26-preview .cg-gbp-phone--1 { transform: rotate(-10deg) translateX(-105px) translateY(10px); }
  body.h26-preview .cg-gbp-phone--3 { transform: rotate(10deg) translateX(105px) translateY(10px); }
}

/* ═══════════════════════════════════════════════════════
 * MARKETING / LEAD GEN HERO — COMMAND CENTER DASHBOARD
 * Dark premium 4-quadrant dashboard showing all services
 * running in concert.
 * ═══════════════════════════════════════════════════════ */

body.h26-preview .cg-cmd {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: #0f1216;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 40px 80px rgba(0,0,0,.12);
  overflow: hidden;
  color: #fff;
  font-family: 'Geist', sans-serif;
}
body.h26-preview .cg-cmd__chrome {
  background: #1a1f26;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body.h26-preview .cg-cmd__dots {
  display: flex;
  gap: 6px;
}
body.h26-preview .cg-cmd__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: .75;
  display: inline-block;
}
body.h26-preview .cg-cmd__dots span:nth-child(1) { background: #ff5f57; }
body.h26-preview .cg-cmd__dots span:nth-child(2) { background: #ffbd2e; }
body.h26-preview .cg-cmd__dots span:nth-child(3) { background: #28c840; }
body.h26-preview .cg-cmd__title {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.h26-preview .cg-cmd__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--h26-green, #00C546);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.h26-preview .cg-cmd__live::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--h26-green, #00C546);
  border-radius: 50%;
  animation: cg-cmd-pulse 1.5s ease-in-out infinite;
}
@keyframes cg-cmd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

body.h26-preview .cg-cmd__body { padding: 20px; }
body.h26-preview .cg-cmd__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.h26-preview .cg-cmd__cell {
  background: #1a1f26;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}
body.h26-preview .cg-cmd__cell-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
body.h26-preview .cg-cmd__cell-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}
body.h26-preview .cg-cmd__cell-icon--google { background: linear-gradient(135deg, #4285F4, #1A73E8); }
body.h26-preview .cg-cmd__cell-icon--meta   { background: linear-gradient(135deg, #0866FF, #1d4ed8); }
body.h26-preview .cg-cmd__cell-icon--gbp    { background: linear-gradient(135deg, #34A853, #1E7E34); font-size: 12px; }
body.h26-preview .cg-cmd__cell-icon--web    { background: linear-gradient(135deg, #fff, #e8e8e8); color: #111; }
body.h26-preview .cg-cmd__cell-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
body.h26-preview .cg-cmd__cell-sub {
  font-size: 9px;
  color: rgba(255,255,255,.45);
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.h26-preview .cg-cmd__cell-live {
  margin-left: auto;
  font-size: 8px;
  color: var(--h26-green, #00C546);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.h26-preview .cg-cmd__cell-label {
  font-size: 9px;
  color: rgba(255,255,255,.55);
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 6px;
}

/* Bar chart */
body.h26-preview .cg-cmd__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
  margin-top: 8px;
}
body.h26-preview .cg-cmd__bar {
  flex: 1;
  background: linear-gradient(to top, #059033, #00C546);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

/* Spark line */
body.h26-preview .cg-cmd__spark {
  display: block;
  height: 48px;
  width: 100%;
  margin-top: 8px;
}

/* Pie chart */
body.h26-preview .cg-cmd__pie-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
body.h26-preview .cg-cmd__pie {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(#4285F4 0 30%, #0866FF 30% 55%, #34A853 55% 80%, rgba(255,255,255,.4) 80% 100%);
}
body.h26-preview .cg-cmd__pie::before {
  content: '';
  position: absolute;
  inset: 12px;
  background: #1a1f26;
  border-radius: 50%;
}
body.h26-preview .cg-cmd__pie-legend {
  font-size: 10px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
}
body.h26-preview .cg-cmd__pie-legend > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
body.h26-preview .cg-cmd__pie-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
body.h26-preview .cg-cmd__pie-dot--blue   { background: #4285F4; }
body.h26-preview .cg-cmd__pie-dot--meta   { background: #0866FF; }
body.h26-preview .cg-cmd__pie-dot--gbp    { background: #34A853; }
body.h26-preview .cg-cmd__pie-dot--direct { background: rgba(255,255,255,.4); }

/* Checklist */
body.h26-preview .cg-cmd__checklist {
  margin-top: 10px;
  font-size: 10px;
  color: rgba(255,255,255,.7);
  font-family: 'Geist Mono', ui-monospace, monospace;
  line-height: 1.8;
}
body.h26-preview .cg-cmd__checklist > div {
  color: rgba(255,255,255,.7);
}

/* Mobile */
@media (max-width: 780px) {
  body.h26-preview .cg-cmd__body { padding: 14px; }
  body.h26-preview .cg-cmd__grid { gap: 10px; }
  body.h26-preview .cg-cmd__cell { padding: 12px; min-height: 140px; }
  body.h26-preview .cg-cmd__cell-name { font-size: 11px; }
  body.h26-preview .cg-cmd__pie { width: 44px; height: 44px; }
  body.h26-preview .cg-cmd__pie::before { inset: 10px; }
}

/* ═══════════════════════════════════════════════════════
 * SERVICE TAG STRIP (Marketing / Lead Gen umbrella pages)
 * Shows all 4 channels as chips under the CTAs.
 * ═══════════════════════════════════════════════════════ */

.cg-hero-spoke__svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,18,22,.08);
}
.cg-svc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,18,22,.08);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f1216;
  white-space: nowrap;
}
.cg-svc-tag__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cg-svc-tag--google .cg-svc-tag__dot { background: #1A73E8; }
.cg-svc-tag--meta   .cg-svc-tag__dot { background: #0866FF; }
.cg-svc-tag--gbp    .cg-svc-tag__dot { background: #34A853; }
.cg-svc-tag--web    .cg-svc-tag__dot { background: #0f1216; }

@media (max-width: 600px) {
  .cg-hero-spoke__svc-tags { gap: 6px; }
  .cg-svc-tag { font-size: 10px; padding: 5px 10px; }
}

/* ═══════════════════════════════════════════════════════
 * INDUSTRIES ARCHIVE HERO — LIVE ACTIVITY FEED (Concept E)
 * Dark ops-style panel with scrolling client event list
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-feed {
  background: linear-gradient(180deg, #0a0d12, #131820);
  border-radius: 22px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  max-width: 560px;
  margin-left: auto;
}
body.h26-preview .cg-feed__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.h26-preview .cg-feed__title {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
body.h26-preview .cg-feed__sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
}
body.h26-preview .cg-feed__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(0,197,70,.12);
  border: 1px solid rgba(0,197,70,.3);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--h26-green, #00C546);
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
body.h26-preview .cg-feed__live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--h26-green, #00C546);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--h26-green, #00C546);
  animation: cg-feed-pulse 2s infinite;
}
@keyframes cg-feed-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
body.h26-preview .cg-feed__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.h26-preview .cg-feed__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  transition: background .22s, border-color .22s, transform .22s;
}
body.h26-preview .cg-feed__row:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(0,197,70,.15);
  transform: translateX(2px);
}
body.h26-preview .cg-feed__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
body.h26-preview .cg-feed__icon--blue   { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
body.h26-preview .cg-feed__icon--orange { background: linear-gradient(135deg, #f97316, #c2410c); }
body.h26-preview .cg-feed__icon--purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
body.h26-preview .cg-feed__icon--green  { background: linear-gradient(135deg, var(--h26-green, #00C546), var(--h26-green-deep, #059033)); }
body.h26-preview .cg-feed__icon--pink   { background: linear-gradient(135deg, #ec4899, #be185d); }
body.h26-preview .cg-feed__icon--yellow { background: linear-gradient(135deg, #eab308, #b45309); }
body.h26-preview .cg-feed__main { flex: 1; min-width: 0; }
body.h26-preview .cg-feed__name {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
  letter-spacing: -.005em;
  line-height: 1.25;
}
body.h26-preview .cg-feed__name b {
  color: var(--h26-green, #00C546);
  font-weight: 700;
}
body.h26-preview .cg-feed__meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  letter-spacing: .03em;
  line-height: 1.2;
}
body.h26-preview .cg-feed__time {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: .05em;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 900px) {
  body.h26-preview .cg-feed { max-width: 100%; margin: 20px 0 0; }
}
@media (max-width: 600px) {
  body.h26-preview .cg-feed { padding: 20px 18px; }
  body.h26-preview .cg-feed__row { padding: 10px 12px; gap: 10px; }
  body.h26-preview .cg-feed__icon { width: 30px; height: 30px; }
  body.h26-preview .cg-feed__name { font-size: 12px; }
  body.h26-preview .cg-feed__meta { font-size: 9.5px; }
  body.h26-preview .cg-feed__time { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════
 * PROBLEM PAGE HERO — DIAGNOSTIC MONITOR
 * Dark panel with broken metrics / warning indicators.
 * Matches visual language of .cg-feed but shows alerts
 * instead of success events. Red/amber over green accents.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-diag {
  background: linear-gradient(180deg, #0a0d12, #131820);
  border-radius: 22px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  max-width: 560px;
  margin-left: auto;
}
body.h26-preview .cg-diag__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.h26-preview .cg-diag__title {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
body.h26-preview .cg-diag__sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
}
body.h26-preview .cg-diag__alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(234,179,8,.14);
  border: 1px solid rgba(234,179,8,.35);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #fbbf24;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
body.h26-preview .cg-diag__alert::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 8px #fbbf24;
  animation: cg-diag-pulse 1.5s infinite;
}
@keyframes cg-diag-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
body.h26-preview .cg-diag__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.h26-preview .cg-diag__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  position: relative;
}
body.h26-preview .cg-diag__row--red {
  border-left: 3px solid #ef4444;
  padding-left: 12px;
}
body.h26-preview .cg-diag__row--amber {
  border-left: 3px solid #fbbf24;
  padding-left: 12px;
}
body.h26-preview .cg-diag__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.3);
}
body.h26-preview .cg-diag__row--amber .cg-diag__icon {
  background: rgba(234,179,8,.18);
  border-color: rgba(234,179,8,.3);
  color: #fbbf24;
}
body.h26-preview .cg-diag__row--red .cg-diag__icon {
  color: #ef4444;
}
body.h26-preview .cg-diag__main { flex: 1; min-width: 0; }
body.h26-preview .cg-diag__label {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
  letter-spacing: -.005em;
  line-height: 1.25;
}
body.h26-preview .cg-diag__meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  letter-spacing: .03em;
  line-height: 1.25;
}
body.h26-preview .cg-diag__val {
  text-align: right;
  flex-shrink: 0;
}
body.h26-preview .cg-diag__num {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  margin-bottom: 3px;
}
body.h26-preview .cg-diag__val--red .cg-diag__num { color: #ef4444; }
body.h26-preview .cg-diag__val--amber .cg-diag__num { color: #fbbf24; }
body.h26-preview .cg-diag__delta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(255,255,255,.45);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.h26-preview .cg-diag__footer {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(0,197,70,.08);
  border: 1px solid rgba(0,197,70,.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body.h26-preview .cg-diag__footer-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--h26-green, #00C546);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
body.h26-preview .cg-diag__footer-text {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  text-align: right;
}
@media (max-width: 900px) {
  body.h26-preview .cg-diag { max-width: 100%; margin: 20px 0 0; }
}
@media (max-width: 600px) {
  body.h26-preview .cg-diag { padding: 20px 18px; }
  body.h26-preview .cg-diag__row { padding: 10px 12px; gap: 10px; }
  body.h26-preview .cg-diag__icon { width: 28px; height: 28px; }
  body.h26-preview .cg-diag__label { font-size: 12px; }
  body.h26-preview .cg-diag__meta { font-size: 9.5px; }
  body.h26-preview .cg-diag__num { font-size: 14px; }
  body.h26-preview .cg-diag__footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.h26-preview .cg-diag__footer-text { text-align: left; }
}

/* ═══════════════════════════════════════════════════════
 * PARTNER TAGS — Google Premier + Meta Business chips
 * Rendered below hero CTA buttons. Matches eyebrow pill.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-partner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
body.h26-preview .cg-partner-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--h26-stroke, rgba(15,18,22,.1));
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h26-text, #0f1216);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
body.h26-preview .cg-partner-tag__dot {
  width: 7px;
  height: 7px;
  background: var(--h26-green, #00C546);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,197,70,.12);
}
@media (max-width: 600px) {
  body.h26-preview .cg-partner-tags { gap: 8px; margin-top: 18px; }
  body.h26-preview .cg-partner-tag { font-size: 10px; padding: 5px 12px; }
}

/* ═══════════════════════════════════════════════════════
 * NICHE HUB HERO — CUSTOMER JOURNEY TIMELINE (Concept C)
 * Vertical 5-step path rendered next to niche hub H1.
 * Uses site green, Instrument Serif italic, Geist Mono.
 * ═══════════════════════════════════════════════════════ */
body.h26-preview .cg-journey {
  position: relative;
  padding: 10px 4px;
  max-width: 560px;
  margin-left: auto;
}
body.h26-preview .cg-journey__title {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--h26-text-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 22px;
  text-align: center;
  font-weight: 500;
}
body.h26-preview .cg-journey__path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.h26-preview .cg-journey__step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--h26-card);
  border: 1px solid var(--h26-stroke);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--h26-shadow-sm);
  position: relative;
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              border-color .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s cubic-bezier(.22,.61,.36,1);
}
body.h26-preview .cg-journey__step:hover {
  transform: translateX(4px);
  border-color: rgba(0,197,70,.22);
  box-shadow: var(--h26-shadow-md);
}
body.h26-preview .cg-journey__step:nth-child(odd)  { margin-right: 38px; }
body.h26-preview .cg-journey__step:nth-child(even) { margin-left: 38px; }
body.h26-preview .cg-journey__step::after {
  content: '';
  position: absolute;
  left: 38px;
  bottom: -14px;
  width: 2px;
  height: 14px;
  background: repeating-linear-gradient(to bottom, var(--h26-green) 0 3px, transparent 3px 6px);
  z-index: 1;
}
body.h26-preview .cg-journey__step:last-child::after { display: none; }
body.h26-preview .cg-journey__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}
body.h26-preview .cg-journey__icon--fb {
  background: linear-gradient(135deg, #1877f2, #0a5bc4);
  color: #fff;
  font-family: Georgia, serif;
}
body.h26-preview .cg-journey__icon--ga {
  background: linear-gradient(135deg, #fff, #f5f6f4);
  border: 1px solid var(--h26-stroke);
  color: #1a73e8;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
}
body.h26-preview .cg-journey__icon--gbp {
  background: linear-gradient(135deg, var(--h26-green), var(--h26-green-deep));
  color: #fff;
}
body.h26-preview .cg-journey__icon--web {
  background: #0a0d12;
  color: #fff;
  font-size: 15px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 600;
}
body.h26-preview .cg-journey__icon--call {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
}
body.h26-preview .cg-journey__text { flex: 1; min-width: 0; }
body.h26-preview .cg-journey__num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--h26-text-dimmer, rgba(15,18,22,.4));
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
body.h26-preview .cg-journey__step-title {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--h26-text);
  margin-bottom: 2px;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
body.h26-preview .cg-journey__step-desc {
  font-size: 11.5px;
  color: var(--h26-text-dim);
  line-height: 1.4;
  margin: 0;
}
body.h26-preview .cg-journey__tag {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--h26-green-deep);
  background: var(--h26-green-tint);
  border: 1px solid rgba(0,197,70,.2);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.h26-preview .cg-journey__step:nth-child(odd)  .cg-journey__tag { right: -44px; }
body.h26-preview .cg-journey__step:nth-child(even) .cg-journey__tag { left: -44px; }

@media (max-width: 900px) {
  body.h26-preview .cg-journey { max-width: 100%; margin: 20px 0 0; }
  body.h26-preview .cg-journey__step:nth-child(odd),
  body.h26-preview .cg-journey__step:nth-child(even) { margin-left: 0; margin-right: 0; }
  body.h26-preview .cg-journey__tag { display: none; }
  body.h26-preview .cg-journey__step::after { left: 29px; }
}
@media (max-width: 600px) {
  body.h26-preview .cg-journey__step { padding: 12px 14px; gap: 12px; }
  body.h26-preview .cg-journey__icon { width: 36px; height: 36px; font-size: 15px; }
  body.h26-preview .cg-journey__step::after { left: 26px; }
  body.h26-preview .cg-journey__step-title { font-size: 13px; }
  body.h26-preview .cg-journey__step-desc { font-size: 11px; }
}