/* ===== brand | design system ===== */
/**
 * Constelaciones Circulares — Design System (consolidated)
 *
 * Bundle of:
 *   1) 00-global.css   CSS variables (colour palette, typography, spacing)
 *   2) 01-reset.css    Modern reset
 *   3) 02-geh-clc.css  Components, layout and utilities
 *   4) 03-geh-clc-ghl.css   Overrides for the GHL CMS context
 *
 * GHL-form-specific styles live in components/ghl-form/style.css
 * (loaded only by landings that embed a GHL form).
 *
 * Copyright © 2026 Innki Tech. All rights reserved.
 */

/* ---------------------------------------------------------------- */
/* GLOBAL - Global Variables and Font Imports                       */
/* Design System: GEH-CLC (Constelaciones Circulares )  */
/* Copyright: Innki Tech 2026. All Rights Reserved                  */
/* ---------------------------------------------------------------- */

/* START Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,700;1,700&family=Inter:wght@300;400;500;600;700&display=swap');
/* END Font Imports */

/* START Global Variables */
:root {
  /* Brand Colors */
  --geh-clc-hero-bg:     #EFF5FA;
  --geh-clc-navy:        #004473;
  --geh-clc-navy-hard:   #0C223D;
  --geh-clc-navy-deep:   #003258;
  --geh-clc-accent:      #1A8FD4;
  --geh-clc-accent-deep: #0A7ABF;
  --geh-clc-accent-soft: #9FC8E2;
  --geh-clc-surface:     #F4F8FB;
  --geh-clc-white:       #FFFFFF;
  --geh-clc-text:        #1F2937;
  --geh-clc-text-soft:   #5B6B7A;
  --geh-clc-line:        #D9E3EC;

  /* Typography */
  --geh-clc-font-h: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  --geh-clc-font-b: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tokens */
  --geh-clc-radius: 16px;
  --geh-clc-trans:  0.3s ease;

  /* Alpha variants */
  --geh-clc-accent-a45: rgba(26,143,212,.45);
  --geh-clc-accent-a18: rgba(26,143,212,.18);
  --geh-clc-accent-a08: rgba(26,143,212,.08);
  --geh-clc-accent-a00: rgba(26,143,212,0);
  --geh-clc-navy-a22:   rgba(12,34,61,.22);
  --geh-clc-navy-a12:   rgba(0,68,115,.12);
  --geh-clc-navy-a08:   rgba(0,68,115,.08);
  --geh-clc-navy-a06:   rgba(0,68,115,.06);
  --geh-clc-white-a85:  rgba(255,255,255,.85);
  --geh-clc-white-a70:  rgba(255,255,255,.70);
  --geh-clc-white-a60:  rgba(255,255,255,.60);
  --geh-clc-white-a50:  rgba(255,255,255,.50);
  --geh-clc-white-a35:  rgba(255,255,255,.35);
}

/* END Global Variables */
/* ---------------------------------------------------------------- */
/* RESET - Cross-Browser Normalization and Defaults                 */
/* Design System: GEH-CLC                                           */
/* Copyright: Innki Tech 2026. All Rights Reserved                  */
/* ---------------------------------------------------------------- */

/* START Reset */
html,
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--geh-clc-trans, .3s ease);
}

/* END Reset */


/* ---------------------------------------------------------------- */
/* GEH-CLC DESIGN SYSTEM                                            */
/* Reusable UI primitives and components for the CLC product line   */
/* Copyright: Innki Tech 2026. All Rights Reserved                  */
/* ---------------------------------------------------------------- */

/* ================================================================
   TABLE OF CONTENTS

   — FOUNDATIONS —
     1.  ANIMATIONS & KEYFRAMES
     2.  LAYOUT PRIMITIVES
     6.  COMMON UTILITIES + MOTION UTILITY
    17.  TEXT COLOR UTILITIES
    27.  SPACING FIXES
    31.  EXTRA SPACING FIXES
    32.  HELPERS  (cols-N, closing, note, cta--duo, btn--ghost)

   — CORE COMPONENTS —
     3.  BUTTON SYSTEM
     4.  BADGE
     5.  ICON
     7.  WAVE DIVIDER
     8.  CARD  (fuses learn item + steps item, incl. Feature variant)
     9.  SECTION  (generic structure)
    10.  SECTION VARIANTS  (hero, learn, why-now, …)
    16.  BUTTON ICONS  (HighLevel-friendly — pure CSS)
    18.  FORM COMPONENTS
    19.  LAYOUT GRIDS  (list-2 / list-4 — companions of list-3)

   — CONTENT BLOCKS —
    20.  MODULES  (course curriculum cards — alternating timeline)
    21.  PRICING  (featured price card with CTA, badge, dual currency)
    22.  TESTIMONIALS — Cards subcategory
    26.  TESTIMONIALS — Videos subcategory  (9:16 muted-autoplay)
    23.  FAQ  (native <details> accordion)
    24.  BIO POLAROID CARD  (.geh-clc-bio-card)
    25.  HERO VIDEO BLOCK  (.geh-clc-hero--video)
    28.  ILLUS ROW  (stepping-stones / 4-up / zigzag)
    29.  VIDEO TESTIMONIAL — progress bar + mute fix

   — UI WIDGETS —
    11.  CALENDAR
    12.  TIMEZONE ROTATOR
    13.  BACK-TO-TOP
    14.  WHATSAPP SUPPORT BUTTON  (.geh-clc-wa-btn)
    15.  FOOTER

   — LATER ADDITIONS / ROUND-BASED LAYERS —
    41.  R14 — Notice, Select, Form Step, Trust Strip
    45.  R15 — Testimonials unified naming
    46.  R15 refinements
    47.  R16 adjustments
    48.  R17 adjustments
    50.  R19 — Header parity, confirmation avatar, subtle notice
    51.  R20 — Checkout header parity
    52.  R21 — Polish
    53.  R22 — Header parity + notice tuning + video rename
    54.  R22 — Followups
    55.  R22 — Followups B  (incl. footer minimal variant)
    56.  R23 — Polish
    57.  R23 — Polish (B)  (sticky-footer pattern)
    58.  R23 — Polish (C)
    60.  R23 — Polish (E)  (mobile CTA spacing, FAQ, confirmation)
   ================================================================ */

/* ================================================================
   1. ANIMATIONS & KEYFRAMES
   ================================================================ */

@keyframes geh-clc-badge-pulse {
  0% {
    box-shadow: 0 0 0 0   var(--geh-clc-accent-a45, rgba(26,143,212,.45));
  }

  70% {
    box-shadow: 0 0 0 8px var(--geh-clc-accent-a00, rgba(26,143,212,0));
  }

  100% {
    box-shadow: 0 0 0 0   var(--geh-clc-accent-a00, rgba(26,143,212,0));
  }
}

@keyframes geh-clc-card-shimmer {
  0% {
    opacity: 0;
    background-position: 0% 0%;
  }

  35% {
    opacity: 1;
    background-position: 100% 100%;
  }

  70% {
    opacity: 0;
    background-position: 100% 100%;
  }

  100% {
    opacity: 0;
    background-position: 0% 0%;
  }
}

@keyframes geh-clc-card-halo {
  0% {
    opacity: 0;
    transform: scale(.96);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }

  80% {
    opacity: 0;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes geh-clc-card-pop {
  0% {
    transform: scale(.96);
  }

  60% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(1);
  }
}

/* ================================================================
   2. LAYOUT PRIMITIVES
   ================================================================ */

.geh-clc-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.geh-clc-rule {
  width: 60px;
  height: 3px;
  background: var(--geh-clc-accent, #1A8FD4);
  border: 0;
  margin: 0 auto;
  border-radius: 2px;
}

/* 3-column grid list (cards container). Drops to 1 col on mobile. */
.geh-clc-list-3 {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;

  @media (max-width: 980px) {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 480px;
  }
}

/* Optional decorative separator (dots-line-dots) */
.geh-clc-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  max-width: 520px;
  margin: 0 auto;

  & .geh-clc-sep--line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--geh-clc-accent-soft, #9FC8E2), transparent);
    opacity: .6;
  }

  & .geh-clc-sep--dots {
    display: flex;
    gap: 5px;
    align-items: center;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--geh-clc-accent-soft, #9FC8E2);
      opacity: .5;
    }

    &::before {
      width: 6px;
      height: 6px;
      opacity: .7;
    }
  }
}

/* ================================================================
   3. BUTTON SYSTEM
   ================================================================ */

/* ---------------------------------------------------------------- */
/* 3 Button 1 — Single Accent Blue Lock  (R10)                   */
/* ---------------------------------------------------------------- */
/* Hard-lock all primary CTAs to the same accent blue. Belt-and-braces
   override in case a section-scoped rule shifts the tone. */
.geh-clc-btn.geh-clc-btn--accent,
a.geh-clc-btn.geh-clc-btn--accent,
button.geh-clc-btn.geh-clc-btn--accent {
  background: var(--geh-clc-accent, #1A8FD4) !important;
  color: var(--geh-clc-white, #FFFFFF) !important;
}

.geh-clc-btn.geh-clc-btn--accent:hover,
a.geh-clc-btn.geh-clc-btn--accent:hover,
button.geh-clc-btn.geh-clc-btn--accent:hover {
  background: var(--geh-clc-accent-deep, #0A7ABF) !important;
}

/* ---------------------------------------------------------------- */
/* 3 Button 2 — Mobile Sizing Balance  (R9)                      */
/* ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .geh-clc-btn {
    font-size: .98rem !important;
    padding: 13px 24px !important;
    border-radius: 14px !important;
  }

/* ---------------------------------------------------------------- */
/* 3 Button 3 — Sub-480 Compact Sizing  (R9)                     */
/* ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .geh-clc-btn {
    font-size: .92rem !important;
    padding: 12px 20px !important;
  }
}

  .geh-clc-btn.geh-clc-btn--block {
    padding: 14px 18px !important;
    font-size: .95rem !important;
  }
}

.geh-clc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 16px 32px;
  border-radius: var(--geh-clc-radius, 16px);
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  transition:
    transform var(--geh-clc-trans, .3s ease),
    background var(--geh-clc-trans, .3s ease),
    letter-spacing var(--geh-clc-trans, .3s ease);
  text-decoration: none;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;

  & svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  &.geh-clc-btn--accent {
    background: var(--geh-clc-accent, #1A8FD4);
    color: var(--geh-clc-white, #FFFFFF);

    &:hover {
      background: var(--geh-clc-accent-deep, #0a7abf);
      letter-spacing: .8px;
    }

    &:active {
      transform: translateY(1px);
    }
  }

  &.geh-clc-btn--navy {
    background: var(--geh-clc-navy-hard, #0c223d);
    color: var(--geh-clc-white, #FFFFFF);
    box-shadow: 0 4px 12px var(--geh-clc-navy-a22, rgba(12,34,61,.22));

    &:hover {
      background: var(--geh-clc-navy, #004473);
      transform: translateY(-2px);
    }
  }

  &.geh-clc-btn--block {
    width: 100%;
    padding: 16px 22px;
    font-size: 1rem;
    margin-top: 4px;

    &:hover {
      letter-spacing: .4px;
    }
  }
}

@media (max-width: 560px) {
  .geh-clc-btn {
    font-size: 1rem;
    padding: 16px 26px;
  }
}

/* ================================================================
   4. BADGE
   ================================================================ */

.geh-clc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--geh-clc-white, #FFFFFF);
  border: 1px solid var(--geh-clc-accent-soft, #9FC8E2);
  color: var(--geh-clc-navy, #004473);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px var(--geh-clc-navy-a06, rgba(0,68,115,.06));
  margin: 0;

  & .geh-clc-badge--dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--geh-clc-accent, #1A8FD4);
    box-shadow: 0 0 0 4px var(--geh-clc-accent-a18, rgba(26,143,212,.18));
    animation: geh-clc-badge-pulse 2s ease-out infinite;
  }

  & svg {
    width: 14px;
    height: 14px;
    color: var(--geh-clc-accent, #1A8FD4);
    flex-shrink: 0;
  }

  & .geh-clc-badge--sep {
    color: var(--geh-clc-accent-soft, #9FC8E2);
    opacity: .5;
  }

  @media (max-width: 560px) {
    font-size: .68rem;
    padding: 6px 12px;
    letter-spacing: 1px;
  }
}

/* ================================================================
   5. ICON  (navy square with white svg, 3 sizes)
   ================================================================ */

.geh-clc-icon {
  background: var(--geh-clc-navy, #004473);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--geh-clc-white, #FFFFFF);
  flex-shrink: 0;
  transition: transform var(--geh-clc-trans, .3s ease);

  & svg {
    color: var(--geh-clc-white, #FFFFFF);
  }

  /* Sizes */
  &.geh-clc-icon--sm {
    width: 36px;
    height: 36px;

    & svg {
      width: 20px;
      height: 20px;
    }
  }

  &.geh-clc-icon--md {
    width: 72px;
    height: 72px;
    border-radius: 16px;

    & svg {
      width: 36px;
      height: 36px;
    }
  }

  &.geh-clc-icon--lg {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    margin-bottom: 6px;

    & svg {
      width: 40px;
      height: 40px;
    }
  }

  @media (max-width: 560px) {
    &.geh-clc-icon--sm {
      width: 30px;
      height: 30px;
      border-radius: 7px;

      & svg {
        width: 16px;
        height: 16px;
      }
    }

    &.geh-clc-icon--lg {
      width: 72px;
      height: 72px;
      border-radius: 16px;

      & svg {
        width: 34px;
        height: 34px;
      }
    }
  }
}

/* ================================================================
  6. COMMON UTILITIES + MOTION UTILITY
   ================================================================ */

.com-items-start {
  align-items: flex-start !important;
}

.com-items-center {
  align-items: center !important;
}

.com-items-end {
  align-items: flex-end !important;
}

.com-self-start {
  align-self: flex-start !important;
}

.com-self-center {
  align-self: center !important;
}

.com-self-end {
  align-self: flex-end !important;
}

.com-mt-0 {
  margin-top: 0 !important;
}

.com-mt-1 {
  margin-top: 4px !important;
}

.com-mt-2 {
  margin-top: 8px !important;
}

.com-mt-3 {
  margin-top: 12px !important;
}

.com-mt-4 {
  margin-top: 16px !important;
}

.com-mt-5 {
  margin-top: 20px !important;
}

.com-mt-6 {
  margin-top: 24px !important;
}

.com-mt-8 {
  margin-top: 32px !important;
}

.com-mt-10 {
  margin-top: 40px !important;
}

.com-mt-12 {
  margin-top: 48px !important;
}

.com-mt-16 {
  margin-top: 64px !important;
}

.com-mb-0 {
  margin-bottom: 0 !important;
}

.com-mb-1 {
  margin-bottom: 4px !important;
}

.com-mb-2 {
  margin-bottom: 8px !important;
}

.com-mb-3 {
  margin-bottom: 12px !important;
}

.com-mb-4 {
  margin-bottom: 16px !important;
}

.com-mb-5 {
  margin-bottom: 20px !important;
}

.com-mb-6 {
  margin-bottom: 24px !important;
}

.com-mb-8 {
  margin-bottom: 32px !important;
}

.com-mb-10 {
  margin-bottom: 40px !important;
}

.com-mb-12 {
  margin-bottom: 48px !important;
}

.com-mb-16 {
  margin-bottom: 64px !important;
}

.com-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.com-text-left {
  text-align: left !important;
}

.com-text-center {
  text-align: center !important;
}

.com-text-right {
  text-align: right !important;
}

.geh-clc-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;

  &.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   7. WAVE DIVIDER
   ================================================================ */

.geh-clc-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; height: 110px;
  pointer-events: none;

  & svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Two layered paths: navy then white  (hero -> learn) */
  &.geh-clc-wave--two-tone {
    & path:nth-child(1) {
      fill: var(--geh-clc-navy, #004473);
    }

    & path:nth-child(2) {
      fill: var(--geh-clc-white, #FFFFFF);
    }
  }

  /* Single path — fill defaults to white but can be overridden via
     --geh-clc-wave-fill so the wave docks into whatever colour comes
     next (e.g. navy-deep when the next stripe is the footer). */
  &.geh-clc-wave--single {
    & path {
      fill: var(--geh-clc-wave-fill, var(--geh-clc-white, #FFFFFF));
    }
  }

  /* Top-anchored wave: pin to the TOP of the parent section and flip
     vertically so the curve flows DOWN into the section below. */
  &.geh-clc-wave--top {
    bottom: auto;
    top: -1px;
    transform: scaleY(-1);
  }

  @media (max-width: 980px) {
    height: 60px;
  }

  @media (max-width: 560px) {
    height: 42px;
  }
}

/* ================================================================
   8. CARD  (fuses learn item + steps item)
   ================================================================ */

.geh-clc-card {
  position: relative;
  background: var(--geh-clc-surface, #F4F8FB) !important;
  border: 1px solid var(--geh-clc-line, #d9e3ec) !important;
  border-radius: 14px !important;
  padding: 40px 28px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  transition:
    transform var(--geh-clc-trans, .3s ease),
    border-color var(--geh-clc-trans, .3s ease),
    background var(--geh-clc-trans, .3s ease);

  & .geh-clc-card--title {
    font-family: var(--geh-clc-font-h, Georgia, serif) !important;
    font-weight: 700 !important;
    font-size: 1.55rem !important;
    color: var(--geh-clc-navy, #004473) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  & .geh-clc-card--text {
    font-family: var(--geh-clc-font-b, sans-serif) !important;
    font-size: .97rem !important;
    color: var(--geh-clc-text, #1f2937) !important;
    line-height: 1.7 !important;
    margin: 0 !important;

    & strong {
      color: var(--geh-clc-navy, #004473);
      font-weight: 700;
    }
  }

  & .geh-clc-card--cta {
    margin-top: auto;
    padding-top: 18px;
    align-self: stretch;
    text-align: center;
  }

  /* ----- Modifier: --shimmer  (used in Learn cards) ------------- */
  &.geh-clc-card--shimmer {
    gap: 18px;

    &::before {
      content: "";
      position: absolute; inset: -1px;
      border-radius: inherit;
      padding: 1.5px;
      background: linear-gradient(135deg, transparent 25%, var(--geh-clc-accent, #1A8FD4) 50%, transparent 75%);
      background-size: 250% 250%;
      background-position: 0% 0%;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      opacity: 0;
      transition: opacity .8s ease;
      pointer-events: none;
    }

    &::after {
      content: "";
      position: absolute; inset: 0;
      border-radius: inherit;
      background: radial-gradient(circle at 50% -10%, rgba(26,143,212,.22), transparent 55%);
      opacity: 0;
      transition: opacity .8s ease;
      pointer-events: none;
    }

    &.is-visible::before {
      animation: geh-clc-card-shimmer 5.5s ease-in-out infinite;
    }

    &.is-visible::after {
      animation: geh-clc-card-halo 5.5s ease-in-out infinite;
    }

    &:nth-child(1).is-visible::before,
    &:nth-child(1).is-visible::after {
      animation-delay: 0s;
    }

    &:nth-child(2).is-visible::before,
    &:nth-child(2).is-visible::after {
      animation-delay: 1.8s;
    }

    &:nth-child(3).is-visible::before,
    &:nth-child(3).is-visible::after {
      animation-delay: 3.6s;
    }

    &:nth-child(1).is-visible {
      animation: geh-clc-card-pop 1s ease-out .10s both;
    }

    &:nth-child(2).is-visible {
      animation: geh-clc-card-pop 1s ease-out .45s both;
    }

    &:nth-child(3).is-visible {
      animation: geh-clc-card-pop 1s ease-out .80s both;
    }

    &:hover {
      transform: translateY(-6px);
      border-color: var(--geh-clc-accent, #1A8FD4);
      background: var(--geh-clc-white, #FFFFFF);
    }

    &:hover .geh-clc-icon {
      transform: scale(1.06);
    }

    & .geh-clc-card--title,
    & .geh-clc-card--text {
      position: relative;
      z-index: 1;
    }

    & .geh-clc-card--title {
      font-size: 1.7rem;
      margin: 6px 0 2px !important;
    }

    & .geh-clc-card--text {
      font-size: 1rem;
      line-height: 1.65;
      max-width: 30ch;
    }

    & .geh-clc-icon {
      position: relative; z-index: 1;
    }

    @media (max-width: 980px) {
      &:nth-child(n).is-visible {
        animation-delay: .15s;
      }
    }

    @media (max-width: 560px) {
      padding: 32px 22px 28px;

      & .geh-clc-card--title {
        font-size: 1.45rem;
      }

      & .geh-clc-card--text {
        font-size: .98rem;
      }
    }
  }

  /* ----- Modifier: --numbered (used in Steps cards) ------------ */
  &.geh-clc-card--numbered {
    & .geh-clc-card--icon-wrap {
      position: relative;
      display: inline-flex;
    }

    & .geh-clc-card--num {
      position: absolute;
      top: -9px; left: -9px;
      width: 24px; height: 24px;
      background: var(--geh-clc-accent, #1A8FD4) !important;
      color: #fff !important;
      border-radius: 50% !important;
      font-family: var(--geh-clc-font-b, sans-serif) !important;
      font-size: .7rem !important;
      font-weight: 700 !important;
      display: flex; align-items: center; justify-content: center;
      line-height: 1 !important;
      box-shadow: 0 2px 8px rgba(26,143,212,.4);
      z-index: 1;
    }

    /* Min height to align cards with 1 or 2 line titles */
    & .geh-clc-card--title {
      min-height: 3.8rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    @media (max-width: 560px) {
      padding: 30px 22px 28px !important;

      & .geh-clc-card--title {
        font-size: 1.35rem !important;
        min-height: 0 !important;
      }
    }
  }
}

/* ---------------------------------------------------------------- */
/* 8 Card Feature 1 — Feature Variant — Vertical (Icon Above Text)  (R6) */
/* ---------------------------------------------------------------- */
.geh-clc-list-3.geh-clc-list-3--features {
  gap: 22px;

  & .geh-clc-card.geh-clc-card--feature {
    text-align: center;
    align-items: center;
    padding: 32px 24px 28px;
    background: #ffffff;
    border: 1px solid var(--geh-clc-accent-a18);
    border-radius: 18px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 14px 32px -22px rgba(10, 122, 191, .25);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  & .geh-clc-card.geh-clc-card--feature:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 20px 36px -18px rgba(10, 122, 191, .35);
  }

  & .geh-clc-card--feature .geh-clc-icon--lg {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg,
                  var(--geh-clc-accent) 0%,
                  var(--geh-clc-accent-deep) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px -8px rgba(10, 122, 191, .55);
  }

  & .geh-clc-card--feature .geh-clc-icon--lg svg {
    width: 26px;
    height: 26px;
  }

  & .geh-clc-card--feature .geh-clc-card--text {
    font-family: var(--geh-clc-font-b);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--geh-clc-text);
    margin: 0;
  }

  & .geh-clc-card--feature strong {
    color: var(--geh-clc-navy-hard);
    font-weight: 700;
  }
}

/* ---------------------------------------------------------------- */
/* 8 Card Feature 2 — Feature Variant — Horizontal Layout (Icon Left, Text Right)  (R7, overrides R6) */
/* ---------------------------------------------------------------- */
.geh-clc-list-3.geh-clc-list-3--features {
  & .geh-clc-card.geh-clc-card--feature {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    text-align: left !important;
    gap: 18px !important;
    padding: 22px 24px !important;
  }

  & .geh-clc-card--feature .geh-clc-icon--lg {
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  & .geh-clc-card--feature .geh-clc-card--text {
    text-align: left !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  @media (max-width: 720px) {
    & .geh-clc-card.geh-clc-card--feature {
      grid-template-columns: 56px 1fr !important;
      gap: 14px !important;
      padding: 20px 18px !important;
    }

    & .geh-clc-card--feature .geh-clc-icon--lg {
      width: 48px !important;
      height: 48px !important;
    }

    & .geh-clc-card--feature .geh-clc-icon--lg svg {
      width: 22px !important;
      height: 22px !important;
    }

    & .geh-clc-card--feature .geh-clc-card--text {
      font-size: .98rem !important;
    }
  }
}

/* ================================================================
   9. SECTION  (generic structure)
   ================================================================ */

.geh-clc-section {
  position: relative;
  padding: 60px 0;
  background: var(--geh-clc-white, #FFFFFF);
  color: var(--geh-clc-navy-hard, #0c223d);
  overflow: hidden;

  & .geh-clc-section--logo {
    width: 100px;
    margin: 0 auto 12px;

    & img {
      width: 100%;
      height: auto;
    }
  }

  & .geh-clc-section--header {
    text-align: center;
    margin: 0 auto 32px;
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .geh-clc-section--eyebrow {
    display: inline-block;
    font-family: var(--geh-clc-font-b, sans-serif);
    font-weight: 700;
    font-size: .78rem;
    color: var(--geh-clc-accent-deep, #0a7abf);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 22px;
    padding: 6px 14px;
    background: var(--geh-clc-accent-a08, rgba(26,143,212,.08));
    border-radius: 999px;
  }

  & .geh-clc-section--title {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.3;
    color: var(--geh-clc-navy, #004473);
    margin: 0 0 8px !important;

    /* Modifier: underline rule  (used in Learn / Steps headers) */
    &.geh-clc-section--title--with-rule::after {
      content: "";
      display: block;
      width: 56px; height: 3px;
      background: var(--geh-clc-accent, #1A8FD4);
      border-radius: 2px;
      margin: 14px auto 0;
    }
  }

  & .geh-clc-section--subtitle {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    line-height: 1.7;
    color: var(--geh-clc-text-soft, #5b6b7a);
    margin: 0 0 22px;
  }

  & .geh-clc-section--sub {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: 1rem;
    color: var(--geh-clc-text-soft, #5b6b7a);
    max-width: 580px;
    margin: 18px auto 0;
    line-height: 1.85;
  }

  & .geh-clc-section--lede {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--geh-clc-accent-deep, #0a7abf);
    margin: 0 0 14px;
  }

  & .geh-clc-section--desc {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-weight: 400;
    font-size: 1rem;
    color: var(--geh-clc-navy, #004473);
    line-height: 1.55;
    margin: 0 0 26px;
    max-width: 520px;
  }

  & .geh-clc-section--copy {
    display: flex;
    flex-direction: column;
  }

  & .geh-clc-section--cta {
    text-align: center;
    padding-bottom: 28px;
  }

  /* Generic icon-meta list (hero) */
  & .geh-clc-section--meta {
    display: grid;
    gap: 14px;
    margin: 0; padding: 0;
    list-style: none;

    & li {
      display: grid;
      grid-template-columns: 36px 1fr;
      align-items: center;
      gap: 14px;
      font-family: var(--geh-clc-font-b, sans-serif);
      font-weight: 600;
      font-size: 1rem;
      color: var(--geh-clc-navy, #004473);
    }

    @media (max-width: 560px) {
      & li {
        grid-template-columns: 30px 1fr;
        gap: 10px;
        font-size: .92rem;
      }
    }
  }
}

/* ================================================================
   10. SECTION VARIANTS
   ================================================================ */

/* ---- HERO ---------------------------------------------------- */
.geh-clc-section--hero {
  background: var(--geh-clc-hero-bg, #EFF5FA);
  color: var(--geh-clc-navy, #004473);
  padding: 50px 0 0;

  & .geh-clc-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 12px 56px;
    align-items: center;
    padding-bottom: 150px;
  }

  & .geh-clc-section--logo,
  & .geh-clc-section--header {
    grid-column: 1 / -1;
    margin-left: auto;
    margin-right: auto;
  }

  & .geh-clc-section--header {
    max-width: 1080px;
    margin-bottom: 32px;
  }

  /* Badge alignment */
  & .geh-clc-badge {
    align-self: flex-start;
  }

  @media (max-width: 980px) and (min-width: 561px) {
    & .geh-clc-section--title {
      font-size: 2.2rem;
    }
  }

  @media (max-width: 980px) {
    padding: 36px 0 0;

    & .geh-clc-container {
      grid-template-columns: 1fr;
      gap: 12px;
      padding-bottom: 80px;
    }

    & .geh-clc-section--header {
      text-align: center;
      align-items: center;
      margin: 0 auto 12px;
    }

    & .geh-clc-badge {
      margin: 0 auto 18px;
      align-self: center;
    }

    & .geh-clc-section--copy {
      text-align: center;
      align-items: center;
      margin-bottom: 20px;
    }

    & .geh-clc-section--lede,
    & .geh-clc-section--desc {
      margin-left: auto;
      margin-right: auto;
    }

    & .geh-clc-section--meta {
      max-width: 420px;
      margin: 0 auto;
      text-align: left;
    }
  }

  @media (max-width: 560px) {
    padding: 28px 0 0;

    & .geh-clc-container {
      padding-left: 18px;
      padding-right: 18px;
      padding-bottom: 70px;
      gap: 10px;
    }

    & .geh-clc-section--logo {
      width: 90px;
    }

    & .geh-clc-section--header {
      max-width: 100%;
      margin: 0 auto 10px;
    }

    & .geh-clc-section--title {
      font-size: 2rem;
      line-height: 1.25;
      margin: 0 auto 6px !important;
    }

    & .geh-clc-section--subtitle {
      font-size: 1.2rem;
      margin: 0 auto 14px;
    }

    & .geh-clc-tz {
      flex-wrap: wrap;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 10 Hero 1 — Meta as Breathable Cards  (R4)                    */
/* ---------------------------------------------------------------- */
.geh-clc-section--meta.geh-clc-section--meta--cards {
  gap: 12px;
  margin-bottom: 8px;

  & li {
    grid-template-columns: 44px 1fr;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(10, 122, 191, .12);
    border-radius: 12px;
    backdrop-filter: blur(2px);
    transition: background .2s ease, transform .2s ease;
  }

  & li:hover {
    background: rgba(255,255,255,.85);
    transform: translateX(2px);
  }

  & li > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  & li strong {
    font-weight: 700;
    font-size: 1rem;
    color: var(--geh-clc-navy-hard, #0C223D);
  }

  & li em {
    font-style: normal;
    font-weight: 400;
    font-size: .85rem;
    color: var(--geh-clc-text-soft);
    letter-spacing: .01em;
  }

  & .geh-clc-icon--sm {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  @media (max-width: 560px) {
    & li {
      grid-template-columns: 38px 1fr;
      gap: 12px;
      padding: 10px 12px;
    }

    & .geh-clc-icon--sm {
      width: 38px;
      height: 38px;
    }

    & li strong {
      font-size: .95rem;
    }

    & li em {
      font-size: .8rem;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 10 Hero 2 — Lede Color Softer  (R4)                           */
/* ---------------------------------------------------------------- */
.geh-clc-section--lede.geh-clc-section--lede--hero {
  font-family: var(--geh-clc-font-h);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--geh-clc-navy);
  margin: 4px 0 22px;
  letter-spacing: -.005em;

  @media (max-width: 560px) {
    font-size: 1.18rem;
  }
}

/* ---------------------------------------------------------------- */
/* 10 Hero 3 — Grid Breathing + Media Cap  (R6)                  */
/* ---------------------------------------------------------------- */
.geh-clc-section--hero {
  & .geh-clc-container {
    gap: 12px 96px;
  }

  @media (min-width: 981px) {
    & .geh-clc-section--copy {
      padding-right: 16px;
    }

    & .geh-clc-bio-card {
      margin-left: 20px;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 10 Hero 4 — Lede Font (Inter, was Cormorant)  (R6)            */
/* ---------------------------------------------------------------- */
.geh-clc-section--lede.geh-clc-section--lede--hero {
  font-family: var(--geh-clc-font-b);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--geh-clc-navy);
  letter-spacing: 0;

  @media (max-width: 560px) {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------- */
/* 10 Hero 5 — Lede Justified  (R7)                              */
/* ---------------------------------------------------------------- */
.geh-clc-section--lede.geh-clc-section--lede--hero {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------------------------------------------------------------- */
/* 10 Hero 6 — Lede Centered on Mobile  (R9)                     */
/* ---------------------------------------------------------------- */
@media (max-width: 880px) {
  .geh-clc-section--hero .geh-clc-section--lede.geh-clc-section--lede--hero {
    text-align: center !important;
    hyphens: none !important;
  }

  .geh-clc-section--hero .geh-clc-section--copy {
    align-items: center !important;
  }
}

/* ---------------------------------------------------------------- */
/* 10 Hero 7 — Subtitle Gap Tightened                            */
/* ---------------------------------------------------------------- */
.geh-clc-section--hero .geh-clc-section--header .geh-clc-section--subtitle {
  margin-bottom: 8px;
}

/* ---- LEARN --------------------------------------------------- */
.geh-clc-section--learn {
  background: var(--geh-clc-white, #FFFFFF);
  color: var(--geh-clc-navy-hard, #0c223d);
  padding: 72px 0 0;

  & .geh-clc-section--title {
    font-size: clamp(2.1rem, 3.6vw, 2.75rem);
    color: var(--geh-clc-navy-hard, #0c223d);
    margin: 0 auto 20px !important;
    max-width: 720px;
    line-height: 1.35;
  }

  & .geh-clc-section--header {
    margin-bottom: 52px;
  }

  & .geh-clc-list-3 {
    margin-bottom: 40px;
  }

  @media (max-width: 980px) and (min-width: 561px) {
    & .geh-clc-section--title {
      font-size: 2.4rem;
    }
  }

  @media (max-width: 980px) {
    padding: 56px 0 0;

    & .geh-clc-section--header {
      margin-bottom: 38px;
    }
  }

  @media (max-width: 560px) {
    padding: 44px 0 0;

    & .geh-clc-section--header {
      margin-bottom: 28px;
    }

    & .geh-clc-list-3 {
      margin-bottom: 20px;
    }

    & .geh-clc-section--title {
      font-size: 1.95rem;
    }

    & .geh-clc-section--sub {
      font-size: .95rem;
      line-height: 1.75;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 10 Section 1 — "Why Now" Background  (R3)                     */
/* ---------------------------------------------------------------- */
.geh-clc-section--why-now {
  background:
    radial-gradient(ellipse at top left, var(--geh-clc-accent-a08) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, var(--geh-clc-hero-bg) 0%, transparent 60%),
    var(--geh-clc-surface);
}

/* ---- BIO ----------------------------------------------------- */
.geh-clc-section--bio {

/* ---------------------------------------------------------------- */
/* 10 Section 2 — Learn Section — Mobile Padding  (R8)           */
/* ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .geh-clc-section--learn {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

@media (max-width: 560px) {
  .geh-clc-section--learn {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* When a separator/wave follows, separator owns the bottom space */
.geh-clc-section--learn:has(> .geh-clc-sep:last-child),
.geh-clc-section--learn:has(> .geh-clc-wave:last-child) {
  padding-bottom: 0 !important;
}

  background: var(--geh-clc-white, #FFFFFF);
  color: var(--geh-clc-navy-hard, #0c223d);
  padding: 32px 0 48px;

  & .geh-clc-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: center;
    max-width: 960px;
  }

  /* Desktop: text left, photo right */
  & .geh-clc-bio--photo {
    order: 2;
  }

  & .geh-clc-bio--content {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  & .geh-clc-bio--photo-wrap {
    position: relative;
    width: 280px; height: 280px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--geh-clc-surface, #F4F8FB);
    box-shadow: 0 12px 40px var(--geh-clc-navy-a12, rgba(0,68,115,.12));

    & img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      transform: scaleX(-1);
    }
  }

  & .geh-clc-bio--name {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--geh-clc-navy, #004473);
    margin: 0;
    line-height: 1.15;
  }

  & .geh-clc-bio--text {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: 1rem;
    color: var(--geh-clc-text, #1f2937);
    line-height: 1.8;
    margin: 0;
    text-align: justify;
    max-width: 54ch;

    & strong {
      color: var(--geh-clc-navy, #004473);
      font-weight: 600;
    }
  }

  @media (max-width: 980px) {
    & .geh-clc-container {
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center;
    }

    & .geh-clc-bio--photo {
      order: 1;
    }

    & .geh-clc-bio--content {
      order: 2;
    }

    & .geh-clc-bio--photo-wrap {
      width: 220px;
      height: 220px;

      & img {
        transform: none;
      }
    }

    & .geh-clc-bio--text {
      text-align: center;
      max-width: 100%;
      overflow-wrap: break-word;
      word-break: break-word;
    }
  }

  @media (max-width: 560px) {
    & .geh-clc-bio--photo-wrap {
      width: 200px;
      height: 200px;
    }
  }
}

/* ---- CTA ----------------------------------------------------- */
section.geh-clc-section--cta {
  background:
    radial-gradient(circle at 15% 50%, rgba(26,143,212,.10), transparent 55%),
    radial-gradient(circle at 85% 50%, rgba(0,68,115,.08), transparent 60%),
    var(--geh-clc-hero-bg, #EFF5FA);
  color: var(--geh-clc-navy-hard, #0c223d);
  padding: 160px 0 90px;

  & .geh-clc-container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    align-items: center;
    background: var(--geh-clc-white, #FFFFFF);
    border-radius: 24px;
    padding: 56px 64px;
    box-shadow: 0 24px 60px var(--geh-clc-navy-a12, rgba(0,68,115,.12));
    border: 1px solid rgba(0,68,115,.06);
    border-left: 6px solid var(--geh-clc-accent, #1A8FD4);
  }

  & .geh-clc-cta--mark {
    width: 200px; max-width: 100%;
    padding: 18px;
    background: var(--geh-clc-surface, #F4F8FB);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;

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

  & .geh-clc-section--copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  & .geh-clc-section--title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--geh-clc-navy, #004473);
    margin: 0 0 22px !important;
  }

  & .geh-clc-section--eyebrow {
    margin: 0 0 24px;
  }

  & .geh-clc-cta--text {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-weight: 400;
    font-size: 1.02rem;
    color: var(--geh-clc-text, #1f2937);
    line-height: 1.95;
    margin: 0 0 28px;
    max-width: 560px;
  }

  @media (max-width: 980px) and (min-width: 561px) {
    & .geh-clc-section--title {
      font-size: 2.1rem;
    }
  }

  @media (max-width: 980px) {
    padding: 90px 20px 48px;

    & .geh-clc-container {
      grid-template-columns: 1fr;
      gap: 28px;
      text-align: center;
      padding: 38px 28px;
    }

    & .geh-clc-section--copy {
      align-items: center;
    }

    & .geh-clc-cta--mark {
      margin: 0 auto;
      width: 140px;
      padding: 14px;
    }

    & .geh-clc-cta--text {
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (max-width: 560px) {
    padding: 70px 18px 36px;

    & .geh-clc-container {
      padding: 30px 20px;
      border-radius: 18px;
    }

    & .geh-clc-section--title {
      font-size: 1.7rem;
    }

    & .geh-clc-cta--text {
      font-size: .95rem;
      line-height: 1.85;
    }
  }
}

/* ---- CONFIRMATION ---------------------------------- */
.geh-clc-section--confirmation {
  background: var(--geh-clc-hero-bg, #EFF5FA);
  color: var(--geh-clc-navy, #004473);
  padding: 36px 0 0;

  & .geh-clc-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 680px;
    padding-bottom: 140px;
  }

  & .geh-clc-section--copy {
    align-items: center;
    width: 100%;
  }

  @media (max-width: 980px) {
    padding: 28px 0 0;

    & .geh-clc-container {
      padding-bottom: 70px;
    }
  }

  @media (max-width: 560px) {
    & .geh-clc-section--title {
      font-size: 1.9rem;
    }

    & .geh-clc-section--subtitle {
      font-size: 1rem;
      margin-bottom: 32px;
    }
  }
}

/* ---- STEPS --------------------------------------------------- */
.geh-clc-section--steps {
  background: var(--geh-clc-white, #FFFFFF) !important;
  color: var(--geh-clc-navy-hard, #0c223d) !important;
  padding: 42px 0 52px !important;

  & .geh-clc-section--header {
    margin: 0 auto 36px;
    max-width: 620px;
  }

  & .geh-clc-section--title {
    font-size: clamp(2rem, 3.6vw, 2.6rem) !important;
    color: var(--geh-clc-navy-hard, #0c223d) !important;
    margin: 0 !important;
  }

  & .geh-clc-list-3 {
    margin-bottom: 52px;
  }

  @media (max-width: 980px) {
    padding: 36px 0 44px;
  }

  @media (max-width: 560px) {
    & .geh-clc-section--title {
      font-size: 1.85rem;
    }
  }
}

/* ================================================================
   11. CALENDAR
   ================================================================ */

.geh-clc-cal {
  background: var(--geh-clc-white, #FFFFFF);
  border-radius: 16px;
  box-shadow:
    0 4px 6px var(--geh-clc-navy-a06, rgba(0,68,115,.06)),
    0 12px 36px rgba(0,68,115,.13);
  border: 1px solid var(--geh-clc-navy-a08, rgba(0,68,115,.08));
  overflow: hidden;
  width: 210px;
  margin: 20px auto 0;
  flex-shrink: 0;

  & .geh-clc-cal--head {
    background: var(--geh-clc-navy, #004473);
    padding: 11px 16px;
    text-align: center;
  }

  & .geh-clc-cal--month {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
  }

  & .geh-clc-cal--body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 8px;
    gap: 0;
  }

  & .geh-clc-cal--dayname {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--geh-clc-text-soft, #5b6b7a);
  }

  & .geh-clc-cal--num {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 5rem;
    color: var(--geh-clc-navy, #004473);
    line-height: .95;
    letter-spacing: -3px;
    margin-top: 2px;
  }

  & .geh-clc-cal--foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px 11px;
    border-top: 1px solid var(--geh-clc-line, #d9e3ec);
    background: var(--geh-clc-surface, #F4F8FB);
    color: var(--geh-clc-navy, #004473);
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .82rem;
    font-weight: 500;

    & .geh-clc-tz {
      gap: 5px;
    }
  }
}

/* ================================================================
   12. TIMEZONE ROTATOR
   ================================================================ */

.geh-clc-tz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .35s ease;

  &.is-changing {
    opacity: 0;
  }

  & .geh-clc-tz--flag {
    width: 22px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    flex-shrink: 0;
  }

  & .geh-clc-tz--country,
  & .geh-clc-tz--time {
    color: var(--geh-clc-navy, #004473);
  }

  & .geh-clc-tz--time {
    font-weight: 700;
  }

  & .geh-clc-tz--country {
    font-weight: 600;
  }

  & .geh-clc-tz--sep {
    color: var(--geh-clc-text-soft, #5b6b7a);
    margin: 0 3px;
    font-weight: 400;
  }
}

/* ================================================================
   13. BACK-TO-TOP
   ================================================================ */

.geh-clc-btt {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--geh-clc-navy, #004473);
  color: var(--geh-clc-white, #FFFFFF);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--geh-clc-navy-a22, rgba(0,68,115,.22));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s;
  z-index: 9000;
  padding: 0;

  &.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  &:hover {
    background: var(--geh-clc-accent-deep, #0a7abf);
  }

  & .geh-clc-btt--ring {
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 44px;
    transform: rotate(-90deg);
    pointer-events: none;
  }

  & .geh-clc-btt--track {
    fill: none;
    stroke: rgba(255,255,255,.18);
    stroke-width: 2.5;
  }

  & .geh-clc-btt--fill {
    fill: none;
    stroke: var(--geh-clc-white, #FFFFFF);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 113.1;
    stroke-dashoffset: 113.1;
    transition: stroke-dashoffset .1s linear;
  }

  & .geh-clc-btt--arrow {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 560px) {
    bottom: 18px;
    right: 18px;
    width: 40px;
    height: 40px;

    & .geh-clc-btt--ring {
      width: 40px;
      height: 40px;
    }

    & .geh-clc-btt--arrow {
      width: 16px;
      height: 16px;
    }
  }
}

/* ================================================================
   14. WHATSAPP SUPPORT BUTTON  (.geh-clc-wa-btn)
   ================================================================ */

.geh-clc-wa-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  z-index: 8900;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;

  &:hover {
    background: #128C7E;
    transform: scale(1.07);
  }

  & svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  @media (max-width: 560px) {
    width: 46px;
    height: 46px;
    bottom: 18px;
    left: 18px;

    & svg {
      width: 24px;
      height: 24px;
    }
  }
}

/* ================================================================
   15. FOOTER
   ================================================================ */

.geh-clc-footer {
  background: var(--geh-clc-navy, #004473);
  color: var(--geh-clc-white-a85, rgba(255,255,255,.85));
  padding: 14px 0;
  font-family: var(--geh-clc-font-b, sans-serif) !important;
  font-size: .75rem !important;

  & .geh-clc-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
  }

  & .geh-clc-footer--copy {
    font-size: .75rem !important;
    color: var(--geh-clc-white-a60, rgba(255,255,255,.6)) !important;
  }

  & .geh-clc-footer--credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  & .geh-clc-footer--credit-label {
    font-size: .65rem !important;
    color: var(--geh-clc-white-a50, rgba(255,255,255,.5)) !important;
    letter-spacing: .5px;
  }

  & .geh-clc-footer--credit-logo {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    transition: opacity .3s ease;
    text-decoration: none;
  }

  & .geh-clc-footer--credit-logo:hover {
    opacity: .8;
  }

  & .geh-clc-footer--credit-icon {
    height: 24px;
    width: auto;
    max-width: 28px;
    display: block;
  }

  & .geh-clc-footer--credit-text {
    height: 23px;
    width: auto;
    max-width: 110px;
    display: block;
  }

  & .geh-clc-footer--nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  & .geh-clc-footer--nav a {
    font-size: .75rem !important;
    color: var(--geh-clc-white-a70, rgba(255,255,255,.7));
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color .3s ease;
  }

  & .geh-clc-footer--nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--geh-clc-white, #FFFFFF);
    transition: width .3s ease;
  }

  & .geh-clc-footer--nav a:hover {
    color: var(--geh-clc-white, #FFFFFF);
  }

  & .geh-clc-footer--nav a:hover::after {
    width: 100%;
  }

  & .geh-clc-footer--sep {
    color: var(--geh-clc-white-a35, rgba(255,255,255,.35));
    font-size: .75rem !important;
  }

  @media (max-width: 980px) {
    & .geh-clc-container {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 6px;
    }

    & .geh-clc-footer--nav {
      flex-wrap: wrap;
      justify-content: center;
      order: 2;
    }

    & .geh-clc-footer--copy {
      order: 1;
      margin: 0;
    }

    & .geh-clc-footer--credit {
      order: 3;
      margin-top: 12px;
    }
  }

  @media (max-width: 560px) {
    padding: 12px 0;

    & .geh-clc-container {
      gap: 6px;
    }
  }
}

/* ----------------------------------------------------------------
   15.1 — Footer Light variant
   ----------------------------------------------------------------
   `.geh-clc-footer--light` inverts the colour palette so the same
   sticky bar reads as a soft white surface (used when the page
   already has a dark hero or when a lighter chrome is preferred).
   It only repaints the background, text and separator; layout,
   spacing and hover effects stay identical to the default. */
.geh-clc-footer.geh-clc-footer--light {
  background: var(--geh-clc-white, #FFFFFF);
  color: var(--geh-clc-text-soft, #5B6B7A);
  border-top: 1px solid var(--geh-clc-line, #D9E3EC);

  & .geh-clc-footer--copy {
    color: var(--geh-clc-text-soft, #5B6B7A) !important;
  }

  & .geh-clc-footer--credit-label {
    color: var(--geh-clc-text-soft, #5B6B7A) !important;
  }

  & .geh-clc-footer--nav a {
    color: var(--geh-clc-navy, #004473);
  }

  & .geh-clc-footer--nav a::after {
    background: var(--geh-clc-navy, #004473);
  }

  & .geh-clc-footer--nav a:hover {
    color: var(--geh-clc-accent, #1A8FD4);
  }

  & .geh-clc-footer--sep {
    color: var(--geh-clc-line, #D9E3EC);
  }

  /* Wordmark `innki-texto.svg` ships as pure white fill; on a white
     background it would vanish, so we tint it to navy via brightness(0)
     (silhouette → black) which reads cleanly on the light chrome. */
  & .geh-clc-footer--credit-text {
    filter: brightness(0);
  }
}

/* ================================================================
   16. BUTTON ICONS  (HighLevel-friendly — pure CSS, no inline SVG)
   ================================================================ */

.geh-clc-btn[class*="geh-clc-btn--icon-"] {

  &::before,
  &.geh-clc-btn--icon-after::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--geh-clc-btn-icon-url, none) center / contain no-repeat;
            mask: var(--geh-clc-btn-icon-url, none) center / contain no-repeat;
    flex-shrink: 0;
    vertical-align: middle;
  }

  /* When --icon-after is set, the leading ::before should not appear */
  &.geh-clc-btn--icon-after::before {
    content: none;
  }
}

/* Icon URL definitions (data: URIs so they work without extra files) */
.geh-clc-btn--icon-whatsapp {
  --geh-clc-btn-icon-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.52 3.48A11.93 11.93 0 0 0 12.05 0C5.5 0 .2 5.3.2 11.85a11.78 11.78 0 0 0 1.6 5.95L0 24l6.34-1.66a11.86 11.86 0 0 0 5.7 1.45h.01c6.55 0 11.85-5.3 11.85-11.85a11.77 11.77 0 0 0-3.38-8.46zM12.05 21.6h-.01a9.78 9.78 0 0 1-4.98-1.36l-.36-.21-3.76.99 1-3.66-.23-.38a9.74 9.74 0 0 1-1.5-5.13c0-5.4 4.4-9.8 9.83-9.8 2.62 0 5.08 1.02 6.94 2.88a9.74 9.74 0 0 1 2.87 6.93c0 5.4-4.4 9.74-9.8 9.74zm5.38-7.32c-.3-.15-1.74-.86-2-.95-.27-.1-.46-.15-.66.15-.2.3-.76.95-.93 1.15-.17.2-.34.22-.63.07-.3-.15-1.24-.46-2.36-1.46-.87-.78-1.46-1.74-1.63-2.04-.17-.3-.02-.46.13-.6.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.66-1.6-.9-2.18-.24-.58-.48-.5-.66-.5l-.56-.01c-.2 0-.5.07-.77.37-.27.3-1.02 1-1.02 2.45 0 1.45 1.05 2.85 1.2 3.05.15.2 2.07 3.16 5 4.43.7.3 1.25.48 1.67.62.7.22 1.34.19 1.85.12.56-.08 1.74-.71 1.99-1.4.24-.69.24-1.27.17-1.4-.07-.12-.27-.2-.56-.34z'/></svg>");
}

.geh-clc-btn--icon-arrow-right {
  --geh-clc-btn-icon-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
}

.geh-clc-btn--icon-mail {
  --geh-clc-btn-icon-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><polyline points='22,4 12,13 2,4'/></svg>");
}

.geh-clc-btn--icon-calendar {
  --geh-clc-btn-icon-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

.geh-clc-btn--icon-check {
  --geh-clc-btn-icon-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.geh-clc-btn--icon-clock {
  --geh-clc-btn-icon-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

/* ================================================================
   17. TEXT COLOR UTILITIES
   ================================================================ */

/*
   Each entry covers three usage patterns:
     1. Direct:     <span class="geh-clc-text-navy">…</span>
     2. GHL wrapper: <div class="geh-clc-text-navy"><p><a>…</a></p></div>
                    (GHL applies the class to the wrapper, not the inner text)
     3. Force:      add --force modifier to override GHL's own inline styles
*/

/* --- Solid brand colors --------------------------------------- */

.geh-clc-text-navy {
  color: var(--geh-clc-navy, #004473);

  & p,
  & span {
    color: var(--geh-clc-navy, #004473);
  }

  & a {
    color: var(--geh-clc-navy, #004473);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-navy-hard, #0C223D);
    }
  }
}

a.geh-clc-text-navy {
  color: var(--geh-clc-navy, #004473);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-navy-hard, #0C223D);
  }
}

.geh-clc-text-navy--force {
  color: var(--geh-clc-navy, #004473) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-navy, #004473) !important;
  }
}

.geh-clc-text-navy-hard {
  color: var(--geh-clc-navy-hard, #0C223D);

  & p,
  & span {
    color: var(--geh-clc-navy-hard, #0C223D);
  }

  & a {
    color: var(--geh-clc-navy-hard, #0C223D);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-navy-deep, #003258);
    }
  }
}

a.geh-clc-text-navy-hard {
  color: var(--geh-clc-navy-hard, #0C223D);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-navy-deep, #003258);
  }
}

.geh-clc-text-navy-hard--force {
  color: var(--geh-clc-navy-hard, #0C223D) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-navy-hard, #0C223D) !important;
  }
}

.geh-clc-text-navy-deep {
  color: var(--geh-clc-navy-deep, #003258);

  & p,
  & span {
    color: var(--geh-clc-navy-deep, #003258);
  }

  & a {
    color: var(--geh-clc-navy-deep, #003258);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-navy-hard, #0C223D);
    }
  }
}

a.geh-clc-text-navy-deep {
  color: var(--geh-clc-navy-deep, #003258);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-navy-hard, #0C223D);
  }
}

.geh-clc-text-navy-deep--force {
  color: var(--geh-clc-navy-deep, #003258) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-navy-deep, #003258) !important;
  }
}

.geh-clc-text-accent {
  color: var(--geh-clc-accent, #1A8FD4);

  & p,
  & span {
    color: var(--geh-clc-accent, #1A8FD4);
  }

  & a {
    color: var(--geh-clc-accent, #1A8FD4);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-accent-deep, #0A7ABF);
    }
  }
}

a.geh-clc-text-accent {
  color: var(--geh-clc-accent, #1A8FD4);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-accent-deep, #0A7ABF);
  }
}

.geh-clc-text-accent--force {
  color: var(--geh-clc-accent, #1A8FD4) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-accent, #1A8FD4) !important;
  }
}

.geh-clc-text-accent-deep {
  color: var(--geh-clc-accent-deep, #0A7ABF);

  & p,
  & span {
    color: var(--geh-clc-accent-deep, #0A7ABF);
  }

  & a {
    color: var(--geh-clc-accent-deep, #0A7ABF);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-accent, #1A8FD4);
    }
  }
}

a.geh-clc-text-accent-deep {
  color: var(--geh-clc-accent-deep, #0A7ABF);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-accent, #1A8FD4);
  }
}

.geh-clc-text-accent-deep--force {
  color: var(--geh-clc-accent-deep, #0A7ABF) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-accent-deep, #0A7ABF) !important;
  }
}

.geh-clc-text-accent-soft {
  color: var(--geh-clc-accent-soft, #9FC8E2);

  & p,
  & span {
    color: var(--geh-clc-accent-soft, #9FC8E2);
  }

  & a {
    color: var(--geh-clc-accent-soft, #9FC8E2);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-accent, #1A8FD4);
    }
  }
}

a.geh-clc-text-accent-soft {
  color: var(--geh-clc-accent-soft, #9FC8E2);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-accent, #1A8FD4);
  }
}

.geh-clc-text-accent-soft--force {
  color: var(--geh-clc-accent-soft, #9FC8E2) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-accent-soft, #9FC8E2) !important;
  }
}

.geh-clc-text-base {
  color: var(--geh-clc-text, #1F2937);

  & p,
  & span {
    color: var(--geh-clc-text, #1F2937);
  }

  & a {
    color: var(--geh-clc-text, #1F2937);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-navy, #004473);
    }
  }
}

a.geh-clc-text-base {
  color: var(--geh-clc-text, #1F2937);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-navy, #004473);
  }
}

.geh-clc-text-base--force {
  color: var(--geh-clc-text, #1F2937) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-text, #1F2937) !important;
  }
}

.geh-clc-text-soft {
  color: var(--geh-clc-text-soft, #5B6B7A);

  & p,
  & span {
    color: var(--geh-clc-text-soft, #5B6B7A);
  }

  & a {
    color: var(--geh-clc-text-soft, #5B6B7A);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-text, #1F2937);
    }
  }
}

a.geh-clc-text-soft {
  color: var(--geh-clc-text-soft, #5B6B7A);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-text, #1F2937);
  }
}

.geh-clc-text-soft--force {
  color: var(--geh-clc-text-soft, #5B6B7A) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-text-soft, #5B6B7A) !important;
  }
}

/* --- White alpha variants ------------------------------------- */

.geh-clc-text-white {
  color: var(--geh-clc-white, #FFFFFF);

  & p,
  & span {
    color: var(--geh-clc-white, #FFFFFF);
  }

  & a {
    color: var(--geh-clc-white, #FFFFFF);
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-white-a70, rgba(255,255,255,.70));
    }
  }
}

a.geh-clc-text-white {
  color: var(--geh-clc-white, #FFFFFF);
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-white-a70, rgba(255,255,255,.70));
  }
}

.geh-clc-text-white--force {
  color: var(--geh-clc-white, #FFFFFF) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-white, #FFFFFF) !important;
  }
}

.geh-clc-text-white-a85 {
  color: var(--geh-clc-white-a85, rgba(255,255,255,.85));

  & p,
  & span {
    color: var(--geh-clc-white-a85, rgba(255,255,255,.85));
  }

  & a {
    color: var(--geh-clc-white-a85, rgba(255,255,255,.85));
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-white, #FFFFFF);
    }
  }
}

a.geh-clc-text-white-a85 {
  color: var(--geh-clc-white-a85, rgba(255,255,255,.85));
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-white, #FFFFFF);
  }
}

.geh-clc-text-white-a85--force {
  color: var(--geh-clc-white-a85, rgba(255,255,255,.85)) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-white-a85, rgba(255,255,255,.85)) !important;
  }
}

.geh-clc-text-white-a70 {
  color: var(--geh-clc-white-a70, rgba(255,255,255,.70));

  & p,
  & span {
    color: var(--geh-clc-white-a70, rgba(255,255,255,.70));
  }

  & a {
    color: var(--geh-clc-white-a70, rgba(255,255,255,.70));
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-white, #FFFFFF);
    }
  }
}

a.geh-clc-text-white-a70 {
  color: var(--geh-clc-white-a70, rgba(255,255,255,.70));
  transition: color var(--geh-clc-trans, .3s ease);

  &:hover {
    color: var(--geh-clc-white, #FFFFFF);
  }
}

.geh-clc-text-white-a70--force {
  color: var(--geh-clc-white-a70, rgba(255,255,255,.70)) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-white-a70, rgba(255,255,255,.70)) !important;
  }
}

.geh-clc-text-white-a60 {
  color: var(--geh-clc-white-a60, rgba(255,255,255,.60));

  & p,
  & span {
    color: var(--geh-clc-white-a60, rgba(255,255,255,.60));
  }

  & a {
    color: var(--geh-clc-white-a60, rgba(255,255,255,.60));
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-white, #FFFFFF);
    }
  }
}

.geh-clc-text-white-a60--force {
  color: var(--geh-clc-white-a60, rgba(255,255,255,.60)) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-white-a60, rgba(255,255,255,.60)) !important;
  }
}

.geh-clc-text-white-a50 {
  color: var(--geh-clc-white-a50, rgba(255,255,255,.50));

  & p,
  & span {
    color: var(--geh-clc-white-a50, rgba(255,255,255,.50));
  }

  & a {
    color: var(--geh-clc-white-a50, rgba(255,255,255,.50));
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-white, #FFFFFF);
    }
  }
}

.geh-clc-text-white-a50--force {
  color: var(--geh-clc-white-a50, rgba(255,255,255,.50)) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-white-a50, rgba(255,255,255,.50)) !important;
  }
}

.geh-clc-text-white-a35 {
  color: var(--geh-clc-white-a35, rgba(255,255,255,.35));

  & p,
  & span {
    color: var(--geh-clc-white-a35, rgba(255,255,255,.35));
  }

  & a {
    color: var(--geh-clc-white-a35, rgba(255,255,255,.35));
    transition: color var(--geh-clc-trans, .3s ease);

    &:hover {
      color: var(--geh-clc-white, #FFFFFF);
    }
  }
}

.geh-clc-text-white-a35--force {
  color: var(--geh-clc-white-a35, rgba(255,255,255,.35)) !important;

  & p,
  & span,
  & a {
    color: var(--geh-clc-white-a35, rgba(255,255,255,.35)) !important;
  }
}

/* ================================================================
   18. FORM COMPONENTS
   (.geh-clc-form-card, .geh-clc-form-loader,
   ================================================================ */

/* ---------------------------------------------------------------- */
/* Form card — white container with navy shadow                      */
/* ---------------------------------------------------------------- */
.geh-clc-form-card {
  background: var(--geh-clc-white, #FFFFFF);
  border-radius: var(--geh-clc-radius, 16px);
  padding: 28px 24px;
  box-shadow:
    0 1px 2px var(--geh-clc-navy-a06, rgba(0,68,115,.06)),
    0 14px 38px rgba(0,68,115,.10);
  border: 1px solid rgba(0,68,115,.08);
  position: relative;

  @media (max-width: 980px) {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    padding: 28px 22px;
  }

  @media (max-width: 560px) {
    padding: 24px 18px;
    border-radius: 14px;
  }
}

/* ---------------------------------------------------------------- */
/* Form loader — 3 pulsing dots while JS initializes the form        */
/* ---------------------------------------------------------------- */
@keyframes geh-clc-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.65);
    opacity: 0.35;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.geh-clc-form-loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--geh-clc-white, #FFFFFF);
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.4s ease;

  & span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--geh-clc-accent, #1A8FD4);
    opacity: 0.4;
    animation: geh-clc-dot-pulse 1.4s ease-in-out infinite;

    &:nth-child(2) {
      animation-delay: 0.22s;
    }

    &:nth-child(3) {
      animation-delay: 0.44s;
    }
  }
}

.geh-clc-form-loader--out {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* Form grid                                                          */
/* ---------------------------------------------------------------- */
.geh-clc-form {
  display: grid;
  gap: 18px;
  margin: 0;

  & input[type="text"],
  & input[type="email"],
  & input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--geh-clc-navy-hard, #0c223d);
    background: var(--geh-clc-surface, #F4F8FB);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 12px 16px;
    transition: border-color .3s, box-shadow .3s, background .3s;
    appearance: none;
    -webkit-appearance: none;

    &::placeholder {
      color: #8a98a8;
      font-weight: 400;
    }

    /* Use background-color (not background shorthand) to preserve background-image icon */
    &:hover {
      background-color: #ecf2f7;
    }

    &:focus {
      outline: 0;
      background-color: var(--geh-clc-white, #FFFFFF);
      border-color: var(--geh-clc-accent, #1A8FD4);
      box-shadow: 0 0 0 4px var(--geh-clc-accent-a18, rgba(26,143,212,.18));
    }

    &:invalid:not(:placeholder-shown):not(:focus) {
      border-color: #d96b6b;
    }
  }

  /* Icons — inline SVG via background-image */
  & input[name="full_name"] {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    padding-left: 2.6rem;
  }

  & input[name="email"] {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    padding-left: 2.6rem;
  }

  & input[name="phone"] {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.07 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 2.98 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.18 6.18l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    padding-left: 2.6rem;
  }

  /* Autofill — prevent Chrome yellow background */
  & input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #F4F8FB inset;
    -webkit-text-fill-color: #0C223D;
  }
}

/* ---------------------------------------------------------------- */
/* Field wrapper                                                      */
/* ---------------------------------------------------------------- */
.geh-clc-field {
  display: grid;
  gap: 6px;
}

/* ---------------------------------------------------------------- */
/* Checkbox + label row                                               */
/* ---------------------------------------------------------------- */
.geh-clc-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-family: var(--geh-clc-font-b, sans-serif);
  font-size: .82rem;
  color: var(--geh-clc-text-soft, #5b6b7a);
  line-height: 1.45;
  margin: 8px 2px 4px;

  & input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    cursor: pointer;
    border: 1.5px solid rgba(0,68,115,.30);
    border-radius: 5px;
    background: var(--geh-clc-surface, #F4F8FB);
    transition:
      border-color .2s ease,
      background-color .2s ease,
      background-image .15s ease,
      box-shadow .2s ease,
      transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);

    &:hover {
      border-color: var(--geh-clc-accent, #1A8FD4);
      background-color: rgba(26,143,212,.08);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(26,143,212,.20);
      border-color: var(--geh-clc-accent, #1A8FD4);
    }

    &:checked {
      background-color: var(--geh-clc-accent, #1A8FD4);
      border-color: var(--geh-clc-accent, #1A8FD4);
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpolyline points='3,8.5 6.5,12 13,4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 72%;
      box-shadow:
        0 0 0 3px rgba(26,143,212,.18),
        0 2px 8px rgba(26,143,212,.30);
      transform: scale(1.08);
    }

    &:not(:checked) {
      transform: scale(1);
    }
  }

  & a {
    color: var(--geh-clc-accent-deep, #0a7abf);
    text-decoration: underline;
    text-underline-offset: 2px;

    &:hover {
      color: var(--geh-clc-navy, #004473);
    }
  }
}

/* ---------------------------------------------------------------- */
/* Form status message (error / success)                              */
/* ---------------------------------------------------------------- */
.geh-clc-form--msg {
  font-family: var(--geh-clc-font-b, sans-serif);
  font-size: .88rem;
  text-align: center;
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  display: none;

  &.is-error {
    display: block;
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c2c2;
  }

  &.is-success {
    display: block;
    background: #e6f4ec;
    color: #1e7a3c;
    border: 1px solid #bbe1c8;
  }
}

/* ================================================================
   19. LAYOUT GRIDS  (list-2 / list-4 — companions of list-3)
   ================================================================ */

/* 2-column grid list */
.geh-clc-list-2 {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 880px;

  @media (max-width: 720px) {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 480px;
  }
}

/* 4-column grid list (drops to 2 on tablet, 1 on mobile) */
.geh-clc-list-4 {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1180px;

  @media (max-width: 1080px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 720px;
  }

  @media (max-width: 560px) {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 420px;
  }
}

/* ================================================================
   20. MODULES  (course curriculum cards — alternating timeline)
   ================================================================ */

.geh-clc-modules {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 28px;
  max-width: 980px;
  position: relative;

  /* Vertical timeline rail (desktop only) */
  @media (min-width: 721px) {
    &::before {
      content: "";
      position: absolute;
      top: 14px; bottom: 14px;
      left: 50%;
      width: 2px;
      background: linear-gradient(
        to bottom,
        transparent,
        var(--geh-clc-accent-soft, #9FC8E2) 8%,
        var(--geh-clc-accent-soft, #9FC8E2) 92%,
        transparent
      );
      transform: translateX(-50%);
      opacity: .55;
      pointer-events: none;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 20 Modules 1 — Justified Body Text  (R5)                      */
/* ---------------------------------------------------------------- */
.geh-clc-module--text {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.geh-clc-module {
  position: relative;
  background: var(--geh-clc-white, #FFFFFF);
  border: 1px solid var(--geh-clc-line, #d9e3ec);
  border-radius: 16px;
  padding: 28px 30px 26px;
  box-shadow: 0 6px 22px var(--geh-clc-navy-a06, rgba(0,68,115,.06));
  display: grid;
  gap: 12px;
  width: calc(50% - 32px);
  transition: transform var(--geh-clc-trans, .3s ease),
              box-shadow var(--geh-clc-trans, .3s ease),
              border-color var(--geh-clc-trans, .3s ease);

  /* Alternating left/right layout */
  &:nth-child(odd) {
    justify-self: start;
  }

  &:nth-child(even) {
    justify-self: end;
  }

  /* Connector dot on the rail */
  &::before {
    content: "";
    position: absolute;
    top: 28px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--geh-clc-accent, #1A8FD4);
    border: 3px solid var(--geh-clc-white, #FFFFFF);
    box-shadow: 0 0 0 1px var(--geh-clc-accent-a45, rgba(26,143,212,.45));
    z-index: 2;
  }

  &:nth-child(odd)::before {
    right: -39px;
  }

  &:nth-child(even)::before {
    left:  -39px;
  }

  &:hover {
    transform: translateY(-4px);
    border-color: var(--geh-clc-accent, #1A8FD4);
    box-shadow: 0 14px 32px var(--geh-clc-navy-a12, rgba(0,68,115,.12));
  }

  & .geh-clc-module--head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
  }

  & .geh-clc-module--num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 32px;
    padding: 0 12px;
    background: var(--geh-clc-accent, #1A8FD4);
    color: #fff;
    border-radius: 999px;
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(26,143,212,.4);
  }

  & .geh-clc-module--tag {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .78rem;
    font-weight: 500;
    color: var(--geh-clc-text-soft, #5b6b7a);
    line-height: 1.4;
  }

  & .geh-clc-module--title {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--geh-clc-navy, #004473);
    margin: 0;
    line-height: 1.25;
  }

  & .geh-clc-module--text {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .96rem;
    color: var(--geh-clc-text, #1f2937);
    line-height: 1.7;
    margin: 0;
  }

  @media (max-width: 720px) {
    width: 100%;
    justify-self: stretch !important;
    padding: 24px 22px 22px;

    &::before {
      display: none;
    }

    & .geh-clc-module--title {
      font-size: 1.35rem;
    }
  }
}

/* ================================================================
   21. PRICING  (featured price card with CTA)
   ================================================================ */

/* ---------------------------------------------------------------- */
/* 21 Pricing 12 — Desktop — Wider Price Cards  (R8)             */
/* ---------------------------------------------------------------- */
@media (min-width: 981px) {
  .geh-clc-pricing .geh-clc-pricing--prices {
    max-width: 640px !important;
    width: 100% !important;
    gap: 24px !important;
    justify-items: stretch !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price {
    padding: 36px 28px !important;
    border-radius: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price-value {
    font-size: 2.8rem !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price-was {
    font-size: 1.2rem !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price-label {
    font-size: 0.85rem !important;
  }
}

/* ---------------------------------------------------------------- */
/* 21.1 Pricing — Card (Base Structure)                            */
/* ---------------------------------------------------------------- */
.geh-clc-pricing {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  background: var(--geh-clc-white, #FFFFFF);
  border-radius: 24px;
  padding: 36px 32px 32px;
  box-shadow: 0 24px 60px var(--geh-clc-navy-a12, rgba(0,68,115,.12));
  border: 1px solid rgba(0,68,115,.06);
  text-align: center;
  display: grid;
  gap: 18px;

  & .geh-clc-pricing--list {
    list-style: none;
    margin: 8px 0 4px;
    padding: 0;
    display: grid;
    gap: 10px;
    text-align: left;

    & li {
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: start;
      gap: 12px;
      font-family: var(--geh-clc-font-b, sans-serif);
      font-size: .95rem;
      color: var(--geh-clc-text, #1f2937);
      line-height: 1.55;

      &::before {
        content: "";
        width: 18px; height: 18px;
        margin-top: 2px;
        border-radius: 50%;
        background: var(--geh-clc-accent, #1A8FD4);
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpolyline points='3,8.5 6.5,12 13,4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
      }
    }
  }

  & .geh-clc-pricing--cta {
    margin-top: 8px;
  }

  @media (max-width: 560px) {
    padding: 28px 22px 26px;
    border-radius: 18px;
  }
}

/* ---------------------------------------------------------------- */
/* 21.2 Pricing — Dual Currency Boxes  (prices/price/labels/values) */
/* ---------------------------------------------------------------- */
.geh-clc-pricing {
  & .geh-clc-pricing--prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 18px 0 8px;
    max-width: 520px;
    margin-inline: auto;
  }

  & .geh-clc-pricing--price {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 18px 12px;
    border-radius: 12px;
    background: var(--geh-clc-surface);
  }

  & .geh-clc-pricing--price-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--geh-clc-text-soft);
  }

  & .geh-clc-pricing--price-value {
    font-family: var(--geh-clc-font-h);
    font-size: 1.85rem;
    color: var(--geh-clc-navy);
  }

  & .geh-clc-pricing--price-was {
    text-decoration: line-through;
    color: var(--geh-clc-text-soft);
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------- */
/* 21.3 Pricing — CTA Spacing Inside Card                        */
/* ---------------------------------------------------------------- */
.geh-clc-pricing .geh-clc-pricing--cta {
  margin-top: 24px;
}

/* ---------------------------------------------------------------- */
/* 21.4 Pricing — Currency Box — Bordered Variant  (border + tighter padding + mobile 1-col) */
/* ---------------------------------------------------------------- */
.geh-clc-pricing {
  & .geh-clc-pricing--price {
    gap: 6px;
    padding: 22px 14px;
    background: var(--geh-clc-surface);
    border: 1px solid var(--geh-clc-line, rgba(0,68,115,.08));
  }

  & .geh-clc-pricing--price-was {
    font-family: var(--geh-clc-font-h);
    font-size: 1.25rem;
    text-decoration: line-through;
    color: var(--geh-clc-text-soft);
  }

  & .geh-clc-pricing--price-value {
    font-family: var(--geh-clc-font-h);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--geh-clc-accent-deep);
    font-weight: 700;
  }

  @media (max-width: 520px) {
    & .geh-clc-pricing--prices {
      grid-template-columns: 1fr;
      max-width: 280px;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 21.5 Pricing — Currency Box — Visual Variant  (gradient surface, hover lift, gradient title color) */
/* ---------------------------------------------------------------- */
.geh-clc-pricing {
  & .geh-clc-pricing--prices {
    gap: 22px;
    margin: 28px auto 18px;
  }

  & .geh-clc-pricing--price {
    padding: 28px 22px;
    border-radius: 18px;
    background: linear-gradient(160deg,
                  #ffffff 0%,
                  var(--geh-clc-surface) 100%);
    border: 1px solid var(--geh-clc-accent-a18);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 12px 28px -18px rgba(10, 122, 191, .35),
      0 2px 6px rgba(12, 34, 61, .04);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  & .geh-clc-pricing--price:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 18px 36px -16px rgba(10, 122, 191, .45),
      0 4px 10px rgba(12, 34, 61, .06);
  }

  & .geh-clc-pricing--price-label {
    font-family: var(--geh-clc-font-b);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--geh-clc-accent-deep);
    margin-bottom: 4px;
  }

  & .geh-clc-pricing--price-was {
    font-size: 1.35rem;
    color: var(--geh-clc-text-soft);
    opacity: .75;
  }

  & .geh-clc-pricing--price-value {
    font-size: 2.9rem;
    margin-top: 2px;
    background: linear-gradient(135deg,
                  var(--geh-clc-accent-deep) 0%,
                  var(--geh-clc-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------------------------------------------------------------- */
/* 21.6 Pricing — Compact Header → Prices Gap                    */
/* ---------------------------------------------------------------- */
.geh-clc-pricing {
  & .geh-clc-pricing--header {
    margin-bottom: 6px;
  }

  & .geh-clc-pricing--prices {
    margin-top: 14px;
  }
}

/* ---------------------------------------------------------------- */
/* 21.7 Pricing — Mobile 2-col Layout (<520px)                   */
/* ---------------------------------------------------------------- */
.geh-clc-pricing {
  & .geh-clc-pricing--prices {
    @media (max-width: 520px) {
      grid-template-columns: 1fr 1fr;
      max-width: 100%;
      gap: 12px;
    }
  }

  & .geh-clc-pricing--price {
    @media (max-width: 520px) {
      padding: 20px 12px;
    }
  }

  & .geh-clc-pricing--price-value {
    @media (max-width: 520px) {
      font-size: 2.1rem;
    }
  }

  & .geh-clc-pricing--price-was {
    @media (max-width: 520px) {
      font-size: 1.15rem;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 21.8 Pricing — Mobile Full-Width Override (<520px, !important) */
/* ---------------------------------------------------------------- */
@media (max-width: 520px) {
  .geh-clc-pricing .geh-clc-pricing--prices {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price {
    padding: 26px 10px !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price-value {
    font-size: 2.3rem !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price-was {
    font-size: 1.1rem !important;
  }

  .geh-clc-pricing .geh-clc-pricing--price-label {
    font-size: .8rem !important;
  }
}

/* ---------------------------------------------------------------- */
/* 21.9 Pricing — Tight List → CTA Spacing                       */
/* ---------------------------------------------------------------- */
.geh-clc-pricing .geh-clc-pricing--list {
  margin-bottom: 0 !important;
}

.geh-clc-pricing .geh-clc-pricing--cta {
  margin-top: -10px !important;
  padding-top: 0 !important;
}

.geh-clc-pricing .geh-clc-pricing--list + .geh-clc-pricing--cta {
  margin-top: -10px !important;
}

/* ---------------------------------------------------------------- */
/* 21.10 Pricing — Final CTA Breathing                           */
/* ---------------------------------------------------------------- */
.geh-clc-pricing > .geh-clc-pricing--cta {
  margin-top: -6px !important;
  padding-top: 8px !important;
}

/* ---------------------------------------------------------------- */
/* 21.11 Pricing — Pricing-Wrap (Decorative Panel)  (.geh-clc-pricing-wrap) */
/* ---------------------------------------------------------------- */
.geh-clc-pricing-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(26,143,212,.12), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(26,143,212,.10), transparent 55%),
    var(--geh-clc-hero-bg, #EFF5FA);
  box-shadow:
    inset 0 0 0 1px rgba(26,143,212,.18),
    0 18px 50px rgba(12,34,61,.08);
}

.geh-clc-pricing-wrap > .geh-clc-pricing {
  margin: 0 auto;
}

@media (max-width: 560px) {
  .geh-clc-pricing-wrap {
    padding: 18px;
    border-radius: 18px;
  }
}

/* ================================================================
   22. TESTIMONIALS — Cards subcategory  (3-up cards with avatar, quote, name, role)
   ----------------------------------------------------------------
   Canonical: .geh-clc-testimonials.geh-clc-testimonials--cards
   Legacy alias: .geh-clc-testimonials (kept for backwards compat)
   ================================================================ */

:is(.geh-clc-testimonials, .geh-clc-testimonials--cards) {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;

  @media (max-width: 980px) {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 480px;
  }
}

:is(.geh-clc-testimonial, .geh-clc-testimonial--card) {
  position: relative;
  background: var(--geh-clc-white, #FFFFFF);
  border: 1px solid var(--geh-clc-line, #d9e3ec);
  border-radius: 16px;
  padding: 60px 28px 30px;
  box-shadow: 0 6px 22px var(--geh-clc-navy-a06, rgba(0,68,115,.06));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: transform var(--geh-clc-trans, .3s ease),
              border-color var(--geh-clc-trans, .3s ease);

  /* Decorative big quote mark */
  &::before {
    content: "\201C";
    position: absolute;
    top: 6px; left: 22px;
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-size: 5.5rem;
    line-height: 1;
    color: var(--geh-clc-accent-a18, rgba(26,143,212,.18));
    pointer-events: none;
  }

  &:hover {
    transform: translateY(-4px);
    border-color: var(--geh-clc-accent, #1A8FD4);
  }

  & .geh-clc-testimonial--quote {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--geh-clc-text, #1f2937);
    line-height: 1.7;
    margin: 0 0 10px;
    flex: 1;
  }

  & .geh-clc-testimonial--avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--geh-clc-surface, #F4F8FB);
    border: 3px solid var(--geh-clc-white, #FFFFFF);
    box-shadow: 0 4px 14px var(--geh-clc-navy-a12, rgba(0,68,115,.12));

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .geh-clc-testimonial--name {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--geh-clc-navy, #004473);
    margin: 4px 0 0;
    line-height: 1.2;
  }

  & .geh-clc-testimonial--role {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .82rem;
    font-weight: 500;
    color: var(--geh-clc-text-soft, #5b6b7a);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
  }
}

/* ================================================================
   23. FAQ  (native <details> accordion)
   ================================================================ */

.geh-clc-faq {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.geh-clc-faq-item {
  background: var(--geh-clc-white, #FFFFFF);
  border: 1px solid var(--geh-clc-line, #d9e3ec);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--geh-clc-trans, .3s ease),
              box-shadow var(--geh-clc-trans, .3s ease);

  &[open] {
    border-color: var(--geh-clc-accent, #1A8FD4);
    box-shadow: 0 6px 22px var(--geh-clc-navy-a06, rgba(0,68,115,.06));
  }

  & > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--geh-clc-font-b, sans-serif);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--geh-clc-navy, #004473);
    line-height: 1.45;
    transition: background var(--geh-clc-trans, .3s ease);

    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }

    &:hover {
      background: var(--geh-clc-surface, #F4F8FB);
    }

    /* Plus / minus icon */
    &::after {
      content: "";
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--geh-clc-accent, #1A8FD4);
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='8' y1='3' x2='8' y2='13'/%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 70%;
      transition: transform .3s ease, background-color .3s ease;
    }
  }

  &[open] > summary::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3C/svg%3E");
    background-color: var(--geh-clc-navy, #004473);
    transform: rotate(180deg);
  }

  & .geh-clc-faq-body {
    padding: 0 22px 20px;
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .96rem;
    color: var(--geh-clc-text, #1f2937);
    line-height: 1.75;

    & p {
      margin: 0;
    }

    & p + p {
      margin-top: 10px;
    }
  }

  @media (max-width: 560px) {
    & > summary {
      padding: 16px 18px;
      font-size: .96rem;
    }

    & .geh-clc-faq-body {
      padding: 0 18px 18px;
      font-size: .92rem;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 23 FAQ 1 — Open State — Vertical Breathing  (R3)              */
/* ---------------------------------------------------------------- */
.geh-clc-faq-item[open] {
  & .geh-clc-faq-body {
    padding-top: 14px;
    padding-bottom: 22px;
  }

  & .geh-clc-faq-body p {
    margin: 0;
    line-height: 1.65;
  }
}

/* ---------------------------------------------------------------- */
/* 23 FAQ 2 — Body Links — Underlined Accent  (R8)               */
/* ---------------------------------------------------------------- */
.geh-clc-faq-body a,
.geh-clc-faq-body a:link,
.geh-clc-faq-body a:visited {
  color: var(--geh-clc-accent-deep) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  transition: color .2s ease;
}

.geh-clc-faq-body a:hover,
.geh-clc-faq-body a:focus-visible {
  color: var(--geh-clc-accent) !important;
  text-decoration-thickness: 2px !important;
}

/* ================================================================
   24. BIO POLAROID CARD  (.geh-clc-bio-card)
   ================================================================ */

.geh-clc-bio-card {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 380px;
}

/* ---------------------------------------------------------------- */
/* 24 Bio 1 — Mobile — Centered Card  (R6)                       */
/* ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .geh-clc-hero--media {
    display: flex;
    justify-content: center;
  }

  .geh-clc-bio-card {
    margin-left: auto;
    margin-right: auto;
  }
}

.geh-clc-bio-card--photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--geh-clc-surface, #F4F8FB);
  box-shadow: 0 28px 60px rgba(0,68,115,.18);
  border: 6px solid #fff;
  transform: rotate(-1.5deg);
  transition: transform .4s ease;

  & img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  &:hover {
    transform: rotate(0deg) scale(1.01);
  }
}

.geh-clc-bio-card--caption {
  display: grid;
  gap: 4px;
  font-family: var(--geh-clc-font-b, sans-serif);
  color: var(--geh-clc-navy, #004473);

  & strong {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 1.2rem;
  }

  & span {
    font-size: .8rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--geh-clc-text-soft, #5b6b7a);
  }
}

@media (max-width: 980px) {
  .geh-clc-bio-card {
    max-width: 300px;
  }

  .geh-clc-bio-card--photo {
    transform: rotate(0);
  }
}

/* ================================================================
   25. HERO VIDEO BLOCK  (.geh-clc-hero--video)
   ================================================================ */

.geh-clc-hero--video {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.geh-clc-hero--video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 18px;
  overflow: hidden;
  background: var(--geh-clc-navy-hard, #0c223d);
  box-shadow: 0 28px 60px rgba(0,68,115,.22);
  border: 4px solid #fff;

  & iframe,
  & video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
  }
}

.geh-clc-hero--video-caption {
  display: grid;
  gap: 4px;
  text-align: center;
  font-family: var(--geh-clc-font-b, sans-serif);
  color: var(--geh-clc-navy, #004473);

  & strong {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 1.15rem;
  }

  & span {
    font-size: .8rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--geh-clc-text-soft, #5b6b7a);
  }
}

/* ================================================================
   26. TESTIMONIALS — Videos subcategory  (vertical 9:16 muted-autoplay cards)
   ----------------------------------------------------------------
   Canonical: .geh-clc-testimonials.geh-clc-testimonials--videos
   Legacy alias: .geh-clc-video-testimonials (kept for backwards compat)
   ================================================================ */

:is(.geh-clc-video-testimonials, .geh-clc-testimonials--videos) {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1020px;

  @media (max-width: 900px) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
    gap: 22px;
  }

  @media (max-width: 560px) {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

:is(.geh-clc-video-testimonial, .geh-clc-testimonial--video) {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;

  & .geh-clc-video-testimonial--frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    background: var(--geh-clc-navy-hard, #0c223d);
    box-shadow: 0 18px 40px rgba(0,68,115,.22);
    border: 4px solid #fff;
    transition: transform .4s ease, box-shadow .4s ease;

    & video,
    & iframe {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      border: 0;
      display: block;
    }

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 50px rgba(0,68,115,.28);
    }
  }

  & .geh-clc-video-testimonial--mute {
    position: absolute;
    bottom: 12px; right: 12px;
    z-index: 3;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(12,34,61,.72);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .3s ease, transform .3s ease;

    & svg {
      width: 18px;
      height: 18px;
    }

    &:hover {
      background: var(--geh-clc-accent, #1A8FD4);
      transform: scale(1.05);
    }
  }

  /* Icon swap inside mute button: show muted icon by default, unmuted when active */
  & .geh-clc-video-testimonial--mute .geh-clc-vt-icon-unmuted {
    display: none;
  }

  & .geh-clc-video-testimonial--mute .geh-clc-vt-icon-muted {
    display: block;
  }

  &.is-unmuted .geh-clc-video-testimonial--mute .geh-clc-vt-icon-muted {
    display: none;
  }

  &.is-unmuted .geh-clc-video-testimonial--mute .geh-clc-vt-icon-unmuted {
    display: block;
  }

  &.is-unmuted .geh-clc-video-testimonial--mute {
    background: var(--geh-clc-accent, #1A8FD4);
  }

  & .geh-clc-video-testimonial--name {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--geh-clc-navy, #004473);
    margin: 6px 0 0;
    line-height: 1.2;
  }

  & .geh-clc-video-testimonial--role {
    font-family: var(--geh-clc-font-b, sans-serif);
    font-size: .78rem;
    font-weight: 500;
    color: var(--geh-clc-text-soft, #5b6b7a);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0;
  }
}

/* ================================================================
   27. SPACING FIXES  (learn-section bottom + CTA spacing)
   ================================================================ */

/* ---------------------------------------------------------------- */
/* 27 Spacing 1 — Learn Sections — Consistent 96px Gap  (R8)     */
/* ---------------------------------------------------------------- */
.geh-clc-section--learn {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Give learn sections a real bottom padding when no decorative wave/sep follows */
.geh-clc-section--learn {
  padding-bottom: 72px;

  @media (max-width: 980px) { padding-bottom: 56px; }
  @media (max-width: 560px) { padding-bottom: 44px; }
}

/* If a separator follows the learn content, the separator owns the gap */
.geh-clc-section--learn:has(> .geh-clc-sep:last-child),
.geh-clc-section--learn:has(> .geh-clc-wave:last-child) {
  padding-bottom: 0;
}

/* Breathe between content blocks and inline CTA inside any section */
.geh-clc-list-2 + .geh-clc-section--cta,
.geh-clc-list-3 + .geh-clc-section--cta,
.geh-clc-list-4 + .geh-clc-section--cta,
.geh-clc-modules + .geh-clc-section--cta,
.geh-clc-testimonials + .geh-clc-section--cta,
.geh-clc-video-testimonials + .geh-clc-section--cta,
.geh-clc-faq + .geh-clc-section--cta,
.geh-clc-pricing + .geh-clc-section--cta {
  margin-top: 44px;
}

/* Ensure inline section-cta has its own bottom space before sep/wave */
.geh-clc-section--learn .geh-clc-section--cta {
  padding-top: 0;
  padding-bottom: 0;
}

/* Bottom margin for grid components so the next sep/wave doesn't kiss them */
.geh-clc-section--learn .geh-clc-list-2,
.geh-clc-section--learn .geh-clc-list-4,
.geh-clc-section--learn .geh-clc-modules,
.geh-clc-section--learn .geh-clc-testimonials,
.geh-clc-section--learn .geh-clc-video-testimonials,
.geh-clc-section--learn .geh-clc-faq,
.geh-clc-section--learn .geh-clc-pricing {
  margin-bottom: 8px;
}

/* When sep follows directly, add extra breathing room */
.geh-clc-section--learn > .geh-clc-sep {
  margin-top: 64px;
}

/* Section--cta variant: keep the existing reveal/mark area visually centered
   regardless of inner content height */
section.geh-clc-section--cta {
  isolation: isolate;
}

/* ---------------------------------------------------------------- */
/* 27 Spacing 2 — CTA Duo Top Gap  (R3)                          */
/* ---------------------------------------------------------------- */
.geh-clc-section--cta--duo {
  margin-top: 40px;
}

/* ================================================================
   28. ILLUS ROW  (.geh-clc-illus-row + stepping-stones / 4-up / zigzag)
   ================================================================ */

/* ---------------------------------------------------------------- */
/* 28.1 Illus Row — Base (Circle Art, 2-col)                     */
/* ---------------------------------------------------------------- */
.geh-clc-illus-row {
  display: grid;
  gap: 56px 64px;
  margin: 0 auto;
  max-width: 980px;
  padding: 0;
  list-style: none;

  & > .geh-clc-illus {
    display: grid;
    align-items: center;
    gap: 28px 48px;
    grid-template-columns: minmax(180px, 240px) 1fr;
  }

  & > .geh-clc-illus.is-reverse {
    grid-template-columns: 1fr minmax(180px, 240px);

    & .geh-clc-illus--art {
      order: 2;
    }

    & .geh-clc-illus--copy {
      order: 1;
      text-align: right;
    }
  }

  & .geh-clc-illus--art {
    background: var(--geh-clc-hero-bg);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow: hidden;
  }

  & .geh-clc-illus--art img,
  & .geh-clc-illus--art svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  & .geh-clc-illus--copy h3 {
    font-family: var(--geh-clc-font-h);
    font-size: 1.5rem;
    color: var(--geh-clc-navy);
    margin: 0 0 8px;
  }

  & .geh-clc-illus--copy p {
    color: var(--geh-clc-text-soft);
    margin: 0;
    line-height: 1.55;
  }

  @media (max-width: 720px) {
    gap: 36px;

    & > .geh-clc-illus,
    & > .geh-clc-illus.is-reverse {
      grid-template-columns: 1fr;
      text-align: center;
    }

    & > .geh-clc-illus.is-reverse {
      & .geh-clc-illus--art {
        order: 1;
      }

      & .geh-clc-illus--copy {
        order: 2;
        text-align: center;
      }
    }

    & .geh-clc-illus--art {
      width: 200px;
      justify-self: center;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 28.2 Illus Row — Drop Circle Art + Bigger Text  (R3)            */
/* ---------------------------------------------------------------- */
.geh-clc-illus-row {
  gap: 64px 72px;

  & .geh-clc-illus--art {
    background: transparent;
    border-radius: 0;
    padding: 0;
    aspect-ratio: auto;
    width: 100%;
    max-width: 220px;
    justify-self: center;
  }

  & .geh-clc-illus--art img,
  & .geh-clc-illus--art svg {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
  }

  & .geh-clc-illus--copy h3 {
    font-size: 1.7rem;
    line-height: 1.2;
    margin: 0 0 12px;
  }

  & .geh-clc-illus--copy p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--geh-clc-text);
  }

  @media (max-width: 720px) {
    & .geh-clc-illus--copy h3 {
      font-size: 1.4rem;
    }

    & .geh-clc-illus--copy p {
      font-size: 1rem;
    }

    & .geh-clc-illus--art {
      max-width: 180px;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 28.3 Illus Row — Bigger Copy  (R4)                            */
/* ---------------------------------------------------------------- */
.geh-clc-illus-row {
  & .geh-clc-illus--copy h3 {
    font-size: 1.95rem;
    line-height: 1.2;
    margin: 0 0 14px;
  }

  & .geh-clc-illus--copy p {
    font-size: 1.18rem;
    line-height: 1.6;
  }

  @media (max-width: 720px) {
    & .geh-clc-illus--copy h3 {
      font-size: 1.55rem;
    }

    & .geh-clc-illus--copy p {
      font-size: 1.05rem;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 28.4 Illus Row — Body Font for Copy  (R5)                     */
/* ---------------------------------------------------------------- */
.geh-clc-illus-row {
  & .geh-clc-illus--copy h3 {
    font-family: var(--geh-clc-font-b);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.25;
    color: var(--geh-clc-navy-hard, #0C223D);
    letter-spacing: -.005em;
  }

  & .geh-clc-illus--copy p {
    font-family: var(--geh-clc-font-b);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--geh-clc-text);
  }

  @media (max-width: 720px) {
    & .geh-clc-illus--copy h3 {
      font-size: 1.35rem;
    }

    & .geh-clc-illus--copy p {
      font-size: 1rem;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 28.5 Illus Row — Stepping-Stones Path (Cards + Numbered Connector)  (R5) */
/* ---------------------------------------------------------------- */
.geh-clc-illus-row {
  --geh-clc-illus-card-bg: #ffffff;
  --geh-clc-illus-card-border: rgba(10, 122, 191, .14);
  --geh-clc-illus-step-color: var(--geh-clc-accent);

  position: relative;

  & > .geh-clc-illus {
    position: relative;
    padding: 28px 30px;
    background: var(--geh-clc-illus-card-bg);
    border: 1px solid var(--geh-clc-illus-card-border);
    border-radius: 18px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 14px 32px -22px rgba(10, 122, 191, .35),
      0 2px 6px rgba(12, 34, 61, .04);
    align-items: center;
  }

  /* Connector dot (numbered step) on the side */
  & > .geh-clc-illus::before {
    content: counter(geh-illus-step);
    counter-increment: geh-illus-step;
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--geh-clc-illus-step-color);
    color: #fff;
    font-family: var(--geh-clc-font-b);
    font-weight: 700;
    font-size: .95rem;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    box-shadow:
      0 0 0 6px var(--geh-clc-hero-bg, #EFF5FA),
      0 0 0 7px var(--geh-clc-illus-step-color);
    z-index: 2;
  }

  & > .geh-clc-illus:not(.is-reverse)::before {
    right: -18px;
  }

  & > .geh-clc-illus.is-reverse::before {
    left:  -18px;
  }

  /* Counter init */
  counter-reset: geh-illus-step;

  /* Vertical connector line down the middle */
  &::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 50%;
    width: 2px;
    border-left: 2px dashed var(--geh-clc-accent-a18);
    transform: translateX(-1px);
    z-index: 0;
  }

  @media (max-width: 720px) {
    &::before {
      display: none;
    }

    & > .geh-clc-illus::before {
      top: -18px;
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%);
    }

    & > .geh-clc-illus {
      padding: 36px 22px 24px;
      margin-top: 18px;
    }
  }
}

/* ---------------------------------------------------------------- */
/* 28.6 Illus Row — Horizontal 4-up Cards (No Numbers)  (R6)     */
/* ---------------------------------------------------------------- */
.geh-clc-illus-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  padding: 56px clamp(16px, 4vw, 32px) 40px !important;
  align-items: stretch !important;
  position: relative;
  counter-reset: none;
  list-style: none;
  max-width: none !important;
  margin: 0 auto !important;
}

.geh-clc-illus-row::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 6% !important;
  right: 6% !important;
  bottom: auto !important;
  height: 0 !important;
  width: auto !important;
  border-top: 2px dashed var(--geh-clc-accent) !important;
  border-left: 0 !important;
  opacity: .55;
  transform: translateY(-1px);
  z-index: 0;
  background: none !important;
}

.geh-clc-illus-row > .geh-clc-illus,
.geh-clc-illus-row > .geh-clc-illus.is-reverse,
.geh-clc-illus-row > .geh-clc-illus.geh-clc-illus--is-reverse {
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 26px 18px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--geh-clc-accent-a18) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 32px -22px rgba(10, 122, 191, .25) !important;
  position: relative !important;
  z-index: 1 !important;
  grid-column: auto !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.geh-clc-illus-row > .geh-clc-illus::before,
.geh-clc-illus-row > .geh-clc-illus::after {
  content: none !important;
}

.geh-clc-illus-row .geh-clc-illus--art {
  width: 100% !important;
  max-width: 160px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  order: 0 !important;
}

.geh-clc-illus-row .geh-clc-illus--art svg,
.geh-clc-illus-row .geh-clc-illus--art img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
}

.geh-clc-illus-row .geh-clc-illus--copy {
  text-align: center !important;
  padding: 0 6px !important;
  order: 0 !important;
}

.geh-clc-illus-row .geh-clc-illus--copy h3 {
  font-family: var(--geh-clc-font-h) !important;
  font-weight: 700 !important;
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  color: var(--geh-clc-navy-hard) !important;
  margin: 0 0 8px !important;
}

.geh-clc-illus-row .geh-clc-illus--copy p {
  font-family: var(--geh-clc-font-b) !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .geh-clc-illus-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .geh-clc-illus-row::before {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .geh-clc-illus-row {
    grid-template-columns: 1fr !important;
    padding: 24px 0 !important;
  }
}

/* ---------------------------------------------------------------- */
/* 28.7 Illus Row — Zigzag Desktop + Curved Connectors (≥981px)  (R7) */
/* ---------------------------------------------------------------- */
@media (min-width: 981px) {
  .geh-clc-illus-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 8px clamp(16px, 4vw, 32px) 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    counter-reset: none !important;
  }

  .geh-clc-illus-row::before {
    content: none !important;
    display: none !important;
  }

  .geh-clc-illus-row > .geh-clc-illus,
  .geh-clc-illus-row > .geh-clc-illus.is-reverse,
  .geh-clc-illus-row > .geh-clc-illus.geh-clc-illus--is-reverse {
    display: grid !important;
    grid-template-columns: minmax(220px, 320px) 1fr !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 28px 48px !important;
    padding: 28px 36px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid var(--geh-clc-accent-a18) !important;
    border-radius: 20px !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 16px 36px -22px rgba(10, 122, 191, .28) !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Even rows: text left, image right */
  .geh-clc-illus-row > .geh-clc-illus:nth-child(even) {
    grid-template-columns: 1fr minmax(220px, 320px) !important;
  }

  .geh-clc-illus-row > .geh-clc-illus:nth-child(even) .geh-clc-illus--art {
    order: 2 !important;
  }

  .geh-clc-illus-row > .geh-clc-illus:nth-child(even) .geh-clc-illus--copy {
    order: 1 !important;
    text-align: right !important;
  }

  /* Curved connector between rows (skip last) */
  .geh-clc-illus-row > .geh-clc-illus:not(:last-child)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    height: 56px !important;
    width: 38% !important;
    z-index: 0 !important;
    border-style: none dashed dashed none !important;
    border-width: 0 2px 2px 0 !important;
    border-color: var(--geh-clc-accent) !important;
    opacity: .55 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  /* Odd rows (image left): curve goes down-right from right side */
  .geh-clc-illus-row > .geh-clc-illus:nth-child(odd):not(:last-child)::after {
    left: 28% !important;
    right: auto !important;
    border-bottom-right-radius: 56px !important;
    border-style: none dashed dashed none !important;
    border-width: 0 2px 2px 0 !important;
  }

  /* Even rows (image right): mirror curve goes down-left */
  .geh-clc-illus-row > .geh-clc-illus:nth-child(even):not(:last-child)::after {
    right: 28% !important;
    left: auto !important;
    border-bottom-left-radius: 56px !important;
    border-style: none none dashed dashed !important;
    border-width: 0 0 2px 2px !important;
  }

  /* Spacing between rows = connector height */
  .geh-clc-illus-row > .geh-clc-illus:not(:last-child) {
    margin-bottom: 56px !important;
  }

  .geh-clc-illus-row .geh-clc-illus--art {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
  }

  .geh-clc-illus-row .geh-clc-illus--art svg,
  .geh-clc-illus-row .geh-clc-illus--art img {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .geh-clc-illus-row .geh-clc-illus--copy {
    padding: 0 !important;
    text-align: left !important;
  }

  .geh-clc-illus-row .geh-clc-illus--copy h3 {
    font-family: var(--geh-clc-font-h) !important;
    font-weight: 700 !important;
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
    color: var(--geh-clc-navy-hard) !important;
    margin: 0 0 10px !important;
  }

  .geh-clc-illus-row .geh-clc-illus--copy p {
    font-family: var(--geh-clc-font-b) !important;
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
}

/* ---------------------------------------------------------------- */
/* 28.8 Illus Row — Zigzag SVG S-Curve Connectors  (#unico page-leak)  (R8) */
/* ---------------------------------------------------------------- */
@media (min-width: 981px) {
  #unico .geh-clc-illus-row > .geh-clc-illus:not(:last-child)::after {
    border: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 240px 80px !important;
    width: 240px !important;
    height: 80px !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: .8 !important;
  }

  /* Odd row (img | text) → next row (text | img): curve from upper-right to lower-left */
  #unico .geh-clc-illus-row > .geh-clc-illus:nth-child(odd):not(:last-child)::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none'><path d='M220 4 C 220 44, 20 36, 20 76' stroke='%231A8FD4' stroke-width='2' stroke-dasharray='6 6' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") !important;
  }

  /* Even row (text | img) → next row (img | text): curve from upper-left to lower-right */
  #unico .geh-clc-illus-row > .geh-clc-illus:nth-child(even):not(:last-child)::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none'><path d='M20 4 C 20 44, 220 36, 220 76' stroke='%231A8FD4' stroke-width='2' stroke-dasharray='6 6' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") !important;
  }

  #unico .geh-clc-illus-row > .geh-clc-illus:not(:last-child) {
    margin-bottom: 88px !important;
  }
}

/* ================================================================
   29. VIDEO TESTIMONIAL — progress bar + mute fix
   (.geh-clc-video-testimonial)
   ================================================================ */

/* ---------------------------------------------------------------- */
/* 29 VideoTestimonial 1 — Click Hint Overlay  (R3)              */
/* ---------------------------------------------------------------- */
.geh-clc-video-testimonial--frame video {
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* 29 VideoTestimonial 2 — Central Play/Pause Button  (R9)       */
/* ---------------------------------------------------------------- */

.geh-clc-video-testimonial--play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  z-index: 2;
  width: 64px; height: 64px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 34, 61, .42);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .25s ease;
}

.geh-clc-video-testimonial--play svg {
  width: 26px; height: 26px;
  display: block;
  margin-left: 2px; /* optical centering for the play triangle */
}

.geh-clc-video-testimonial--play .geh-clc-vt-icon-pause {
  display: none;
  margin-left: 0;
}

.geh-clc-video-testimonial--play .geh-clc-vt-icon-play {
  display: block;
}

/* Paused → show play, fade in */
.geh-clc-video-testimonial.is-paused .geh-clc-video-testimonial--play {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Playing → keep pause swap available, but hide button (discreet);
   show briefly on hover so users can pause */
.geh-clc-video-testimonial:not(.is-paused) .geh-clc-video-testimonial--play .geh-clc-vt-icon-play {
  display: none;
}

.geh-clc-video-testimonial:not(.is-paused) .geh-clc-video-testimonial--play .geh-clc-vt-icon-pause {
  display: block;
}

.geh-clc-video-testimonial:not(.is-paused):hover .geh-clc-video-testimonial--play {
  opacity: .85;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.geh-clc-video-testimonial--play:hover {
  background: rgba(12, 34, 61, .65);
}

/* Touch devices: keep button visible while paused, hidden while playing */
@media (hover: none) {
  .geh-clc-video-testimonial:not(.is-paused) .geh-clc-video-testimonial--play {
    opacity: 0;
    pointer-events: none;
  }
}

.geh-clc-video-testimonial--frame {
  & .geh-clc-video-testimonial--progress {
    position: absolute;
    left: 12px;
    right: 60px;
    bottom: 18px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    transition: height var(--geh-clc-trans);
  }

  & .geh-clc-video-testimonial--progress::-webkit-progress-bar {
    background: transparent;
    border-radius: 999px;
  }

  & .geh-clc-video-testimonial--progress::-webkit-progress-value {
    background: var(--geh-clc-accent);
    border-radius: 999px;
    transition: width 0.1s linear;
  }

  & .geh-clc-video-testimonial--progress::-moz-progress-bar {
    background: var(--geh-clc-accent);
    border-radius: 999px;
  }

  &:hover .geh-clc-video-testimonial--progress {
    height: 6px;
  }
}

/* ================================================================
   31. EXTRA SPACING FIXES
   (spacing utilities)
   ================================================================ */

/* Button inside .geh-clc-section--cta nested within .learn sections: add gap. */
.geh-clc-section--learn .geh-clc-section--cta {
  margin-top: 36px;
  padding-bottom: 8px;
}

/* Extra breathing room below card lists. */
.geh-clc-list-2,
.geh-clc-list-3,
.geh-clc-list-4 {
  margin-bottom: 12px;
}

/* Final CTA: separate copy from the button. */
.geh-clc-section--cta .geh-clc-cta--text {
  margin-bottom: 24px;
}

/* Test/quote tile spacing inside the same block. */
.geh-clc-section--learn .geh-clc-testimonials + .geh-clc-video-testimonials,
.geh-clc-section--learn .geh-clc-video-testimonials + .geh-clc-testimonials {
  margin-top: 48px;
}

/* ================================================================
   32. HELPERS — cols-N, closing, note, cta--duo, btn--ghost
   (helpers)
   ================================================================ */

/* ---------------------------------------------------------------- */
/* 32 Helpers 1 — Closing — Body Font (no Cormorant)  (R3)       */
/* ---------------------------------------------------------------- */
.geh-clc-section--closing {
  font-family: var(--geh-clc-font-b);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: normal;
  color: var(--geh-clc-text);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- */
/* 32 Helpers 2 — CTA — Button→Text Spacing  (R3)                */
/* ---------------------------------------------------------------- */
.geh-clc-section .geh-clc-section--cta {
  margin-top: 40px;

  @media (max-width: 720px) { margin-top: 32px; }

/* ---------------------------------------------------------------- */
/* 32 Helpers 3 — Closing — Strong Accent Color  (R3)            */
/* ---------------------------------------------------------------- */
.geh-clc-section--closing strong {
  color: var(--geh-clc-accent-deep);
}
}

.geh-clc-video-testimonials--cols-1 {
  grid-template-columns: 1fr;
  max-width: 320px;
}

.geh-clc-video-testimonials--cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 680px;
}

.geh-clc-video-testimonials--cols-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1020px;
}

@media (max-width: 720px) {
  .geh-clc-video-testimonials--cols-2,
  .geh-clc-video-testimonials--cols-3 {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

.geh-clc-section--closing {
  text-align: center;
  font-family: var(--geh-clc-font-h);
  font-size: 1.25rem;
  color: var(--geh-clc-navy);
  margin: 32px auto 8px;
  max-width: 720px;
}

.geh-clc-section--note {
  text-align: center;
  font-size: 0.92rem;
  color: var(--geh-clc-text-soft);
  margin: 28px auto 0;
  font-style: italic;
}

.geh-clc-section--note a {
  color: var(--geh-clc-accent-deep);
  text-decoration: underline;
}

.geh-clc-section--cta--duo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

/* Ghost / secondary button variant */
.geh-clc-btn--ghost {
  background: transparent;
  color: var(--geh-clc-navy);
  border: 1.5px solid var(--geh-clc-navy);
}

.geh-clc-btn--ghost:hover {
  background: var(--geh-clc-navy);
  color: #fff;
}

/* ================================================================
   41. DESIGN SYSTEM ADDITIONS R14
   ----------------------------------------------------------------
   Reusable primitives promoted from the checkout iteration:
     - .geh-clc-notice / .geh-clc-notice--warning / --info
     - .geh-clc-form-step (numbered step row)
     - .geh-clc-select (native <select> styled with accent chevron)
     - .geh-clc-pricing-wrap (decorative wash for the pricing block)
     - .geh-clc-trust-strip (small trust icons row)
   ================================================================ */

/* ---- 41.1 Notice ------------------------------------------- */
.geh-clc-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFF7DB;
  border: 1px solid #F2D77A;
  color: #5A4912;
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  line-height: 1.45;
  box-shadow: 0 2px 6px rgba(120, 95, 0, .04);
}

.geh-clc-notice--icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #F2C84B;
  color: #5A4912;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 1px;
}

.geh-clc-notice strong {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.geh-clc-notice span {
  display: block;
  font-size: .95rem;
}

.geh-clc-notice--info {
  background: var(--geh-clc-accent-a08, rgba(26,143,212,.08));
  border-color: rgba(26,143,212,.35);
  color: var(--geh-clc-navy-hard, #0C223D);
}

.geh-clc-notice--info .geh-clc-notice--icon {
  background: var(--geh-clc-accent, #1A8FD4);
  color: #fff;
}

/* ---- 41.2 Select (native, branded) ------------------------ */
.geh-clc-select {
  display: block;
  width: 100%;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--geh-clc-navy-hard, #0C223D);
  background-color: #fff;
  border: 1.5px solid #d6e2ec;
  border-radius: 12px;
  padding: 14px 44px 14px 16px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A8FD4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.geh-clc-select:hover {
  border-color: var(--geh-clc-accent, #1A8FD4);
}

.geh-clc-select:focus {
  outline: none;
  border-color: var(--geh-clc-accent, #1A8FD4);
  box-shadow: 0 0 0 4px rgba(26,143,212,.16);
}

/* ---- 41.3 Form Step (label + control stacked card) -------- */
/* Markup: <form.geh-clc-form-step> > <div.geh-clc-form-step--card> > <label.geh-clc-form-step--label> + <select.geh-clc-form-step--control>
   The outer <form> is the card chrome; the inner --card lays out label + control vertically. */
.geh-clc-form-step {
  display: block;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid #e4ecf3;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(12,34,61,.02);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.geh-clc-form-step--card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.geh-clc-form-step:hover,
.geh-clc-form-step:focus-within {
  border-color: var(--geh-clc-accent, #1A8FD4);
  box-shadow:
    0 0 0 4px rgba(26,143,212,.10),
    0 6px 18px rgba(12,34,61,.06);
}

.geh-clc-form-step--num {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--geh-clc-accent-a08, rgba(26,143,212,.08));
  color: var(--geh-clc-accent-deep, #0A7ABF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
}

.geh-clc-form-step--label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--geh-clc-navy-hard, #0C223D);
  margin: 0;
}

.geh-clc-form-step--label svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--geh-clc-accent, #1A8FD4);
  flex-shrink: 0;
}

.geh-clc-form-step--control {
  margin: 0;
}

@media (max-width: 560px) {
  .geh-clc-form-step {
    padding: 14px 14px;
  }

  .geh-clc-form-step--label {
    font-size: .95rem;
  }
}

/* ---- 41.3.1 Step button radiogroup (post-JS enhancement) -- */
/* `.geh-clc-step-btns` replaces the native <select> inline (the
   select stays in the DOM, visually hidden via `--enhanced`, so its
   `change` event keeps driving any external reveal logic). Each
   non-placeholder option becomes a `.geh-clc-step-btn`. */
.geh-clc-step-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  width: 100%;
}

.geh-clc-step-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--geh-clc-white, #fff);
  border: 1px solid #dbe2ec;
  border-radius: var(--geh-clc-radius-input, 10px);
  padding: 12px 14px;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--geh-clc-navy-hard, #0C223D);
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  min-height: 44px;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.geh-clc-step-btn:hover {
  border-color: var(--geh-clc-accent, #1A8FD4);
  color: var(--geh-clc-accent, #1A8FD4);
}

.geh-clc-step-btn:focus-visible {
  outline: none;
  border-color: var(--geh-clc-accent, #1A8FD4);
  box-shadow: 0 0 0 3px rgba(26, 143, 212, .18);
}

.geh-clc-step-btn.is-active {
  background: var(--geh-clc-accent, #1A8FD4);
  border-color: var(--geh-clc-accent, #1A8FD4);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 143, 212, .15);
}

.geh-clc-step-btn.is-active:hover {
  color: #fff;
}

.geh-clc-select.geh-clc-select--enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  .geh-clc-step-btns {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
  }

  .geh-clc-step-btn {
    font-size: 14px;
    padding: 10px 12px;
    min-height: 42px;
  }
}

/* ---- 41.4 Trust strip ------------------------------------- */
.geh-clc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 28px;
  margin: 26px auto 0;
  max-width: 720px;
  font-family: var(--geh-clc-font-b, 'Inter', sans-serif);
  font-size: .9rem;
  color: var(--geh-clc-text-soft, #5b6b7a);
}

.geh-clc-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.geh-clc-trust-strip svg {
  width: 18px;
  height: 18px;
  color: var(--geh-clc-accent, #1A8FD4);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .geh-clc-trust-strip {
    gap: 12px 18px;
    font-size: .82rem;
  }
}

/* ================================================================
   45. DESIGN SYSTEM — TESTIMONIALS UNIFIED NAMING (Round 15)
   ----------------------------------------------------------------
   The testimonials block is now a single DS pattern with two
   subcategories selected at the CONTAINER level:

     <ul class="geh-clc-testimonials geh-clc-testimonials--cards">
        <li class="geh-clc-testimonial"> … </li>
     </ul>

     <ul class="geh-clc-testimonials geh-clc-testimonials--videos">
        <li class="geh-clc-video-testimonial"> … </li>
     </ul>

   Legacy class names (.geh-clc-video-testimonials) remain valid
   aliases for backwards compatibility. The 22 and 26 rule blocks
   above were updated to accept both selectors via :is(...).
   This block exists for documentation; it ships no overrides.
   ================================================================ */

/* ================================================================
   46. R15 REFINEMENTS
   ----------------------------------------------------------------
   1) Confirmation hero: re-flip → copy LEFT, photo RIGHT (DS-aligned)
   2) Checkout form-step: numbered badge OUTSIDE the white card
   3) Pricing SECTION (not just block) gets a soft branded wash
   4) Reactivation: bigger thanks line, no heart styling needed
   5) Thrivecart: hide block until embed is rendered
   ================================================================ */

/* ---- 46.5 THRIVECART — hide block until embed has loaded -------- */

/* ================================================================
   47. ROUND 16 ADJUSTMENTS
   ----------------------------------------------------------------
   - 47.1 Notice (yellow) redesign: uppercase, no round badge,
     two-line stack, subtle accent top line.
   - 47.2 Checkout: split title (h1 + subtitle), tighter header,
     reveal animation parity, remove number badges.
   - 47.3 Reactivation: smaller h1.
   - 47.4 Pricing: tighten header → card distance.
   - 47.5 Confirmation hero parity with lesp02 sales hero
     (subtitle + rule + bio card + wave).
   ================================================================ */

/* ---- 47.5 Confirmation hero — parity with lesp02 sales hero -------- */

/* ================================================================
   48. ROUND 17 ADJUSTMENTS
   ----------------------------------------------------------------
   - 48.1 Thrivecart embed: drop min-height (no empty pre-load box).
   - 48.2 Notice: smaller, no decorative top bar.
   - 48.3 Checkout: tighter gap between form steps + breathing room
                    above the thrivecart card.
   - 48.4 Thrivecart: in-card spinner while loading.
   - 48.5 Confirmation: lesp02-style top header (logo + title + Edición 2),
                   smaller bio-card on the right, smaller heading
                   aligned to the left, no in-copy subtitle.
   ================================================================ */

/* ================================================================
   50. ROUND 19 — Header parity, confirmation avatar, subtle notice,
       checkout title colors, reactivation tuning
   ----------------------------------------------------------------
   Resets the confirmation hero header so it inherits the DS look used
   across all other landings (navy color, italic Cormorant subtitle,
   modest sizes). Replaces the confirmation bio-card with a circular
   horizontally-flipped portrait. Restyles .geh-clc-notice as a
   subtle, smaller variant via .geh-clc-notice--subtle. Aligns the
   checkout title color with the sales landing and softens the
   "Edición 2" line to neutral gray. Tightens the reactivation
   title size and adds breathing room before the lede.
   ================================================================ */

/* ---- 50.1 Confirmation hero header — DS parity ---------------------- */

/* ================================================================
   51. ROUND 20 — Checkout header parity (DS classes + rule),
       relocated and restyled notice, confirmation logo/rule spacing
   ----------------------------------------------------------------
   The checkout header now uses the same DS classes as the sales
   landing (`.geh-clc-section--header / .geh-clc-section--title /
   .geh-clc-section--subtitle / <hr class="geh-clc-rule">`), so the
   alignment, sizes and colors are inherited automatically. The
   notice card is moved back above the first form step and restyled
   to match the screenshot — fully uppercase, bold, tight letter
   spacing on a soft yellow card. The confirmation hero recovers the
   landing's logo padding-top and tightens the subtitle/rule rhythm.
   ================================================================ */

/* ---- 51.1 Checkout header — match landing rhythm --------------- */

/* ---- 51.2 Notice — uppercase warm card variant ---------------- */

/* ---- 51.3 Checkout — drop obsolete title overrides ------------ */
/* 50.4 only targeted the legacy `.geh-clc-checkout--*` classes,
   which the page no longer uses. The DS `.geh-clc-section--title`
   already paints in navy. Nothing else needed here. */

/* ---- 51.4 Confirmation — logo padding-top + subtitle/rule rhythm --- */

/* ================================================================
   52. ROUND 21 — POLISH
   ----------------------------------------------------------------
   52.1 Confirmation — shrink avatar + add air between heading and lede
   52.2 Checkout — logo parity (size + margin) + subtitle gap = 8px
                   (match the lesp02 sales hero exactly)
   52.3 Checkout — symmetric gap around the notice (header→notice
                   equals notice→first form step)
   52.4 lesp02 photo hero — shrink the bio-card so the hero height
                   matches the index-video variant
   ================================================================ */

/* ---- 52.3 Checkout — symmetric gap around the notice ---------- */

/* ================================================================
   53. ROUND 22 — HEADER PARITY + NOTICE TUNING + VIDEO RENAME
   ----------------------------------------------------------------
   53.1 Header parity — lesp02 hero / checkout / confirmation share the
        same logo width, logo→header gap, title/sub/rule rhythm
        and padding-top so the three pages stack identically.
   53.2 Notice — tighter typography (strong=.8rem/.04em, span=400)
        plus symmetric vertical padding inside the yellow card.
   53.3 lesp02 photo hero — shift the bio-card to the right so the
        copy column doesn't visually dominate.
   53.4 Video block alias — same rules also reachable via the new
        generic `.geh-clc-video*` class names (the hero-only legacy
        names continue to work).
   ================================================================ */

/* ---- 53.1 Header parity across the 3 pages -------------------- */
.geh-clc-section--hero,
.geh-clc-section--checkout,
.geh-clc-section--confirmation {
  padding-top: 50px !important;
}

@media (max-width: 980px) {
  .geh-clc-section--hero,
  .geh-clc-section--checkout,
  .geh-clc-section--confirmation {
    padding-top: 36px !important;
  }
}

.geh-clc-section--hero .geh-clc-section--logo,
.geh-clc-section--checkout .geh-clc-section--logo,
.geh-clc-section--confirmation .geh-clc-section--logo {
  width: 100px !important;
  margin: 0 auto !important;
}

.geh-clc-section--hero    > .geh-clc-container > .geh-clc-section--header,
.geh-clc-section--checkout > .geh-clc-container > .geh-clc-section--header,
.geh-clc-section--confirmation  > .geh-clc-container > .geh-clc-section--header {
  margin: 24px auto 8px !important;
}

.geh-clc-section--hero    > .geh-clc-container > .geh-clc-section--header .geh-clc-section--title,
.geh-clc-section--checkout > .geh-clc-container > .geh-clc-section--header .geh-clc-section--title,
.geh-clc-section--confirmation  > .geh-clc-container > .geh-clc-section--header .geh-clc-section--title {
  margin: 0 0 8px !important;
}

.geh-clc-section--hero    > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle,
.geh-clc-section--checkout > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle,
.geh-clc-section--confirmation  > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle {
  margin: 0 0 8px !important;
}

.geh-clc-section--hero    > .geh-clc-container > .geh-clc-section--header .geh-clc-rule,
.geh-clc-section--checkout > .geh-clc-container > .geh-clc-section--header .geh-clc-rule,
.geh-clc-section--confirmation  > .geh-clc-container > .geh-clc-section--header .geh-clc-rule {
  margin: 0 auto !important;
}

/* ---- 53.4 Video block — generic `.geh-clc-video*` aliases ----- */
/* The block used to live only inside the hero (`.geh-clc-hero--video`).
   It can now go anywhere via the generic names below. The legacy
   class names continue to render thanks to the shared selectors. */
.geh-clc-video,
.geh-clc-hero--video {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.geh-clc-video-frame,
.geh-clc-hero--video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--geh-clc-radius, 16px);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,68,115,.18);
}

.geh-clc-video-frame > iframe,
.geh-clc-hero--video-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.geh-clc-video-caption,
.geh-clc-hero--video-caption {
  display: grid;
  gap: 4px;
  text-align: center;
  margin-top: 14px;
  font-family: var(--geh-clc-font-b, sans-serif);
  color: var(--geh-clc-navy, #004473);

  & strong {
    font-family: var(--geh-clc-font-h, Georgia, serif);
    font-weight: 700;
    font-size: 1.2rem;
  }

  & span {
    font-size: .8rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--geh-clc-text-soft, #5b6b7a);
  }
}

/* Keep hero layout rules working with the generic class too. */
.geh-clc-section--hero:has(.geh-clc-video) {
  & > .geh-clc-container {
    grid-template-columns: 1fr !important;
  }

  & .geh-clc-section--copy {
    display: contents !important;
  }

  & .geh-clc-section--logo {
    order: 1 !important;
  }

  & .geh-clc-section--header {
    order: 2 !important;
  }

  & .geh-clc-badge {
    order: 3 !important;
    align-self: center !important;
    margin: 6px auto 14px !important;
  }

  & .geh-clc-hero--media {
    order: 4 !important;
    width: 100% !important;
    align-self: stretch !important;
    margin-top: 4px !important;
  }

  & .geh-clc-section--lede {
    order: 5 !important;
    margin-top: 18px !important;
  }

  & .geh-clc-section--cta {
    order: 6 !important;
    margin-top: 16px !important;
  }
}

/* ---- 53.5 Checkout — hide payment block until step answered --- */

/* ================================================================
   54. ROUND 22 — FOLLOWUPS
   ----------------------------------------------------------------
   54.1 index-video regression — keep 2-col hero on desktop when the
        video block is used inside `.geh-clc-section--hero-sales`.
        (The R22 53.4 `:has(.geh-clc-video)` reordering was meant
        only for the standalone single-column video hero; it must
        not collapse the photo-hero into one column.)
   54.2 Notice — even tighter top/bottom padding, vertically
        centered content (almost flush with the card edges).
   54.3 Confirmation — more breathing room between the copy and the
        bio-card photo when the layout stacks.
   ================================================================ */

/* ================================================================
   55. ROUND 22 — FOLLOWUPS B
   ----------------------------------------------------------------
   55.1 Video hero — CTA breathing room: match the photo hero
        (mt:40px) instead of the cramped 16px.
   55.2 Video hero on mobile — restore the original reading order
        (logo → title → BADGE → video → lede → CTA) and hide the
        three meta cards exactly like the legacy hero-video variant.
   55.3 Minimal footer variant — `.geh-clc-footer--minimal` for
        checkout / confirmation / contacto: same brand bar, only copy
        + legal nav, no Innki credit, single line on desktop,
        stacked on small screens.
   ================================================================ */

/* ---- 55.3 Minimal footer variant ----------------------------- */
/* HTML:
   <footer class="geh-clc-footer geh-clc-footer--minimal">
     <div class="geh-clc-container">
       <p class="geh-clc-footer--copy">© 2026 | Strokkur S.L.</p>
       <nav class="geh-clc-footer--nav">
         <a>Privacidad</a><span class="geh-clc-footer--sep">|</span><a>Cookies</a>
       </nav>
     </div>
   </footer>
*/
.geh-clc-footer.geh-clc-footer--minimal {
  padding: 12px 0;

  & .geh-clc-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    grid-template-columns: none;
  }

  & .geh-clc-footer--copy {
    margin: 0;
    flex: 0 0 auto;
  }

  & .geh-clc-footer--nav {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  @media (max-width: 560px) {
    & .geh-clc-container {
      flex-direction: column;
      text-align: center;
      gap: 6px;
    }

    & .geh-clc-footer--nav {
      justify-content: center;
    }
  }
}

/* ================================================================
   56. ROUND 23 — POLISH
   ----------------------------------------------------------------
   56.1 Hero (photo + video sales) CTA — tighter spacing on both
        desktop and mobile. Photo CTA was sitting 40px below the
        meta cards and even further from the photo below on mobile;
        video CTA was sitting too far from the lede.
   56.2 Hero subtitle ("Edición 2") — bump up the floor on mobile
        so it doesn't shrink down to ~1.2rem. Applies to all
        explorando-tu-soberania pages (hero + checkout + confirmation).
   56.3 Footer minimal variant — REWORK: it should not look like a
        full-width navy bar stuck to the bottom. Same content
        (copy + Innki credit + legal nav) but transparent
        background, dark muted text on the page background, and
        sit subtly under the content.
   ================================================================ */

/* ---- 56.2 Hero subtitle — larger floor on mobile ------------- */
.geh-clc-section--hero .geh-clc-section--header .geh-clc-section--subtitle {
  font-size: clamp(1.35rem, 1.9vw, 1.5rem) !important;
}

@media (max-width: 560px) {
  .geh-clc-section--hero .geh-clc-section--header .geh-clc-section--subtitle {
    font-size: 1.35rem !important;
  }
}

/* ---- 56.3 Minimal footer — subtle, inline, transparent ------- */
/* HTML (full structure with credit intact):
   <footer class="geh-clc-footer geh-clc-footer--minimal">
     <div class="geh-clc-container">
       <p class="geh-clc-footer--copy">© 2026 | Strokkur S.L. ...</p>
       <div class="geh-clc-footer--credit">
         <span class="geh-clc-footer--credit-label">Diseño & Desarrollo</span>
         <a class="geh-clc-footer--credit-logo" ...>
           <img class="geh-clc-footer--credit-icon" src=".../innki-isotipo.svg">
           <img class="geh-clc-footer--credit-text" src=".../innki-texto.svg">
         </a>
       </div>
       <nav class="geh-clc-footer--nav">...</nav>
     </div>
   </footer>
*/
.geh-clc-footer.geh-clc-footer--minimal {
  background: transparent !important;
  color: var(--geh-clc-navy-hard, #0c223d) !important;
  padding: 24px 0 14px !important;

  & .geh-clc-container {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 16px !important;
  }

  & .geh-clc-footer--copy {
    color: rgba(12, 34, 61, .55) !important;
    margin: 0 !important;
  }

  & .geh-clc-footer--credit-label {
    color: rgba(12, 34, 61, .45) !important;
  }

  /* Invert the white Innki wordmark to dark on light background */
  & .geh-clc-footer--credit-text {
    filter: invert(1) brightness(.25);
    opacity: .8;
  }

  & .geh-clc-footer--nav a {
    color: rgba(12, 34, 61, .65) !important;
  }

  & .geh-clc-footer--nav a:hover {
    color: var(--geh-clc-navy-hard, #0c223d) !important;
  }

  & .geh-clc-footer--nav a::after {
    background: var(--geh-clc-navy-hard, #0c223d) !important;
  }

  & .geh-clc-footer--sep {
    color: rgba(12, 34, 61, .3) !important;
  }

  @media (max-width: 980px) {
    & .geh-clc-container {
      grid-template-columns: 1fr !important;
      justify-items: center !important;
      text-align: center !important;
      gap: 14px !important;
    }

    & .geh-clc-footer--copy {
      order: 1 !important;
    }

    & .geh-clc-footer--nav {
      order: 2 !important;
    }

    & .geh-clc-footer--credit {
      order: 3 !important;
      margin-top: 4px !important;
    }
  }
}

/* ================================================================
   57. ROUND 23 — POLISH (B)
   ----------------------------------------------------------------
   57.1 Sticky-footer pattern for pages using `.geh-clc-footer--minimal`
        so the minimal footer sits at the bottom of the viewport
        without forcing the section to be 100vh tall (which left
        the footer below the fold on the checkout).
   57.2 Hero sales CTA spacing — symmetric and tighter both on
        desktop and mobile, for both photo and video heroes.
        Photo hero on mobile: the CTA sits visually centered
        between the last meta card and the photo below.
        Video hero on mobile: kills the lede's default 22px
        margin-bottom so the gap lede→CTA is the intended ~18px.
   ================================================================ */

/* ---- 57.1 Sticky minimal footer ------------------------------- */
body:has(> .geh-clc-footer--minimal) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: var(--geh-clc-hero-bg, #EFF5FA) !important;
}

body:has(> .geh-clc-footer--minimal) > *:not(.geh-clc-footer) {
  flex: 1 0 auto;
}

body:has(> .geh-clc-footer--minimal) > .geh-clc-footer--minimal {
  flex: 0 0 auto;
}

/* ================================================================
   58. ROUND 23 — POLISH (C)
   ----------------------------------------------------------------
   58.1 Photo hero CTA — true vertical alignment on mobile.
        Until now the gap above the CTA was 22px (from cta.mt) but
        the gap below was 54px because `.geh-clc-section--copy`
        carries `margin-bottom: 20px` and the `.geh-clc-container`
        grid has `row-gap: 12px`. Zero those out on mobile so the
        only spacing is the CTA's own mt/mb (22/22).
   58.2 Badge "CURSO ONLINE" — normalize mobile position between
        the photo hero and the video hero. Force the same margin
        on both heroes (override 55.2's mt:6 mb:14).
   ================================================================ */

/* ================================================================
   60. ROUND 23 — POLISH (E)
   ----------------------------------------------------------------
   60.1 Mobile CTA spacing — normalize the gap above the CTA across
        learn sections. Previously some sections had cta.mt 32 PLUS
        the previous block's mb (8–20), producing inconsistent gaps
        of 32 / 52 px. Force a uniform 32 px gap by zeroing the prev
        block's bottom margin and keeping cta.mt = 32.
   60.2 Mobile-only <br> utility for forcing line breaks at small
        viewports without altering desktop typography.
   60.3 FAQ — tighter row gap on mobile (8 px instead of 12).
   60.4 Confirmation — add breathing room between the hero rule and the
        the salutation (it was glued to the rule on mobile).
   ================================================================ */

/* ---- 60.2 Mobile <br> utility (works at all viewports) -------- */
.geh-clc-br--mobile {
  display: none;
}

@media (max-width: 720px) {
  .geh-clc-br--mobile {
    display: inline;
  }
}
/* ================================================================
   03-GEH-CLC-GHL.CSS — GoHighLevel compatibility overrides
   ================================================================
   Flat-selector overrides that counteract styles injected by
   GoHighLevel's page builder. Must be loaded AFTER 02-geh-clc.css.

   Real GHL footer DOM (confirmed via devtools):
     .geh-clc-footer.c-section
       > .inner                        ← section inner (max-width)
         > .c-row                      ← GHL row (flex, no .geh-clc-container)
           > .inner                    ← row inner (flex row)
             > .c-column (×3)         ← flex children

   GHL-generated rules we must defeat:
     background-color: var(--black, #000)   ← section level
     padding: 20px 50px                     ← section level
     > .inner { max-width: 1170px }         ← section inner level

   Table of contents
   -----------------
   00. Form card & loader — GHL fixes
   01. Footer — section & font overrides
   02. Footer — mobile responsive + order utilities
   ================================================================ */


/* ================================================================
   00. FORM CARD & LOADER — GHL fixes
   ================================================================
   GHL's form_embed.js assigns the iframe height asynchronously via
   data-height attribute. Until it runs, the iframe has no height
   and the card collapses → the absolute loader looks wrong.

   Fix: give the card a min-height so it has space from the start.
   The loader (position:absolute; inset:0) then covers it correctly
   while the iframe loads, then the JS removes it on "load".

   HTML in GHL (loader INSIDE the card):
   ──────────────────────────────────────
   <div class="geh-clc-form-card geh-clc-reveal" id="formulario">
     <div class="geh-clc-form-loader" id="geh-clc-form-loader"
          aria-hidden="true" aria-label="Cargando formulario">
       <span></span><span></span><span></span>
     </div>
     <iframe src="https://ghl.guillermoechegaray.com/widget/form/..."
       style="width:100%;border:none;border-radius:15px"
       ...></iframe>
     <script src="...form_embed.js"></script>
   </div>
   ================================================================ */

.geh-clc-form-card {
  min-height: 100px; /* cleared by JS after loader is removed */
}

.geh-clc-form-loader {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  border-radius: inherit !important;
  border: none !important;
  box-shadow: none !important;
}


/* ================================================================
   01. FOOTER — section & font overrides
   ================================================================ */

/* Section: defeat GHL's black background and 50px side padding */
.geh-clc-footer.c-section {
  background: var(--geh-clc-navy, #004473) !important;
  padding: 14px 0 !important;
  width: 100% !important;
  max-width: none !important;
  font-family: var(--geh-clc-font-b, sans-serif) !important;
  font-size: .75rem !important;
}

/* Section inner: defeat GHL's max-width:1170px and side padding */
.geh-clc-footer.c-section > .inner {
  width: calc(100% - 48px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* GHL wraps paragraph content in .text-output > p */
.geh-clc-footer.c-section .text-output p {
  margin: 0 !important;
  font-family: var(--geh-clc-font-b, sans-serif) !important;
  font-size: .75rem !important;
}

/* Nav link styles (applied via custom-code class in GHL) */
.geh-clc-footer.c-section .geh-clc-footer--sep a {
  font-family: var(--geh-clc-font-b, sans-serif) !important;
  font-size: .75rem !important;
  color: var(--geh-clc-white-a70, rgba(255,255,255,.7)) !important;
  text-decoration: none !important;
}

.geh-clc-footer.c-section .geh-clc-footer--sep a:hover {
  color: var(--geh-clc-white, #FFFFFF) !important;
}


/* ================================================================
   02. FOOTER — mobile responsive + order utilities
   ================================================================
   GHL's flex row stacks columns automatically below its breakpoint.
   These rules ensure centering and correct visual order.

   Column order utility classes — add to each GHL column via
   Settings → Advanced → CSS class in the page builder:
     • geh-clc-footer-col--copy    → copyright    (order 1, natural)
     • geh-clc-footer-col--nav     → nav links    (order 2)
     • geh-clc-footer-col--credit  → credit (order 3, last)
   ================================================================ */

@media (max-width: 980px) {

  /* Stack columns, center content */
  .geh-clc-footer .c-row > .inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .geh-clc-footer .c-row > .inner > .c-column {
    width: 100% !important;
    text-align: center !important;
  }

  /* Center vertically-stacked column inners */
  .geh-clc-footer .c-column > .vertical.inner {
    align-items: center !important;
  }

  /* Order utilities */
  .geh-clc-footer-col--copy {
    order: 1 !important;
  }

  .geh-clc-footer-col--nav {
    order: 2 !important;
  }

  .geh-clc-footer-col--credit {
    order: 3 !important;
  }
}

@media (max-width: 560px) {
  .geh-clc-footer.c-section {
    padding: 12px 0 !important;
  }

  .geh-clc-footer .c-row > .inner {
    gap: 6px !important;
  }
}


/* ===== landing | overrides ===== */

/* Landing-specific CSS overrides for pesp02-explorando-tu-soberania-gracias.
   Loaded after the brand design system.
   Source: guillermo-echegaray-websites/pesp02-explorando-tu-soberania-gracias/css/overrides.css
*/

/* ================================================================
   pesp02 — EXPLORANDO TU SOBERANÍA   GRACIAS (post-purchase)
   Page-specific overrides on top of the DS (02-geh-clc.css).
   ----------------------------------------------------------------
   Loaded by index.html AFTER styles.css.
   Contains ONLY rules whose selectors are exclusive to this landing
   (.geh-clc-section--confirmation, .geh-clc-confirmation--*).
   Blocks are moved AS-IS from the historical R8–R23 rounds so the
   visual result is identical; a later pass will dedupe the
   accumulated self-overrides.
   ================================================================ */


/* ================================================================
   1. GRACIAS HERO — base (R8 38.1)
   ================================================================ */
.geh-clc-section--confirmation {
  & .geh-clc-container {
    max-width: 1100px !important;
    align-items: stretch !important;
    text-align: left !important;
    padding-bottom: 100px !important;
  }
  & .geh-clc-section--logo {
    align-self: center !important;
    margin-bottom: 36px !important;
  }
  & .geh-clc-confirmation--grid {
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: clamp(28px, 5vw, 64px) !important;
    align-items: center !important;
    width: 100% !important;
  }
  & .geh-clc-confirmation--copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  & .geh-clc-section--header {
    text-align: left !important;
    margin: 0 !important;
    max-width: none !important;
  }
  /* Subtitle styled as accent pill */
  & .geh-clc-section--header .geh-clc-section--eyebrow {
    display: inline-block !important;
    background: var(--geh-clc-accent-a08) !important;
    color: var(--geh-clc-accent-deep) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-family: var(--geh-clc-font-b) !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin: 0 0 18px !important;
  }
  & .geh-clc-section--header .geh-clc-section--title {
    font-family: var(--geh-clc-font-h) !important;
    font-weight: 700 !important;
    font-size: clamp(2.6rem, 5.5vw, 4rem) !important;
    line-height: 1 !important;
    color: var(--geh-clc-navy-hard) !important;
    margin: 0 0 10px !important;
    text-align: left !important;
  }
  & .geh-clc-section--header .geh-clc-rule {
    margin: 4px 0 0 !important;
  }
  & .geh-clc-section--copy:not(.com-items-center) {
    align-items: flex-start !important;
    text-align: left !important;
    margin-top: 20px !important;
  }
  & .geh-clc-section--lede.geh-clc-section--lede--hero {
    text-align: left !important;
    margin: 0 !important;
  }
  & .geh-clc-confirmation--photo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }
  & .geh-clc-confirmation--photo-wrap {
    width: 100% !important;
    max-width: 380px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow:
      0 6px 12px rgba(12, 34, 61, .08),
      0 24px 60px rgba(12, 34, 61, .16) !important;
  }
  & .geh-clc-confirmation--photo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  @media (max-width: 880px) {
    & .geh-clc-container {
      padding-bottom: 70px !important;
      text-align: center !important;
    }
    & .geh-clc-confirmation--grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
    & .geh-clc-confirmation--copy,
    & .geh-clc-section--header,
    & .geh-clc-section--copy {
      align-items: center !important;
      text-align: center !important;
    }
    & .geh-clc-section--header .geh-clc-section--title,
    & .geh-clc-section--lede.geh-clc-section--lede--hero {
      text-align: center !important;
    }
    & .geh-clc-section--header .geh-clc-rule {
      margin-left: auto !important;
      margin-right: auto !important;
    }
    & .geh-clc-confirmation--photo-wrap {
      max-width: 240px !important;
    }
  }
}


/* ================================================================
   2. GRACIAS HERO — R10 logo→title gap tighten (40.2)
   ================================================================ */
.geh-clc-section--confirmation {
  & .geh-clc-section--logo {
    margin-bottom: 14px !important;
  }
}


/* ================================================================
   3. GRACIAS REDESIGN R14 — portrait-dominant left (43)
   ================================================================ */
.geh-clc-section--confirmation {
  & .geh-clc-confirmation--grid {
    grid-template-columns: 1.05fr 1fr !important;
    gap: clamp(32px, 6vw, 80px) !important;
    align-items: center !important;
  }
  & .geh-clc-confirmation--photo { order: 1 !important; }
  & .geh-clc-confirmation--copy  { order: 2 !important; }

  & .geh-clc-confirmation--photo-wrap {
    max-width: 520px !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow:
      0 18px 40px rgba(12, 34, 61, .14),
      0 40px 80px rgba(12, 34, 61, .12) !important;
  }
  & .geh-clc-confirmation--photo-wrap::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 30px;
    background:
      radial-gradient(60% 60% at 0% 0%, rgba(26,143,212,.18), transparent 60%),
      radial-gradient(60% 60% at 100% 100%, rgba(26,143,212,.14), transparent 55%);
    z-index: -1;
  }
  & .geh-clc-confirmation--photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
    pointer-events: none;
  }

  & .geh-clc-section--header .geh-clc-section--title {
    font-size: clamp(2.8rem, 6vw, 4.4rem) !important;
  }
  & .geh-clc-section--header .geh-clc-section--eyebrow {
    margin-bottom: 20px !important;
  }
  & .geh-clc-confirmation--lede {
    font-family: var(--geh-clc-font-b, 'Inter', sans-serif) !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    color: var(--geh-clc-navy-hard, #0C223D) !important;
    margin: 18px 0 0 !important;
  }
  & .geh-clc-confirmation--lede strong { color: var(--geh-clc-accent-deep, #0A7ABF) !important; }

  & .geh-clc-confirmation--signature {
    display: block;
    font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--geh-clc-text-soft, #5b6b7a);
    margin-top: 16px;
  }

  @media (max-width: 880px) {
    & .geh-clc-confirmation--grid {
      grid-template-columns: 1fr !important;
    }
    & .geh-clc-confirmation--photo-wrap {
      max-width: 320px !important;
      margin: 0 auto !important;
    }
    & .geh-clc-section--header .geh-clc-section--title {
      font-size: clamp(2.4rem, 9vw, 3.2rem) !important;
      text-align: center !important;
    }
  }
}


/* ================================================================
   4. GRACIAS R15 — copy LEFT, photo RIGHT (46.1)
   ================================================================ */
.geh-clc-section--confirmation {
  & .geh-clc-confirmation--photo { order: 2 !important; }
  & .geh-clc-confirmation--copy  { order: 1 !important; }

  & .geh-clc-confirmation--grid {
    grid-template-columns: 1fr 1.05fr !important;
    gap: clamp(32px, 6vw, 72px) !important;
    align-items: center !important;
  }

  & .geh-clc-confirmation--copy {
    text-align: left !important;
    align-items: flex-start !important;
  }
  & .geh-clc-confirmation--copy .geh-clc-section--eyebrow {
    margin-bottom: 20px !important;
  }
  & .geh-clc-confirmation--copy .geh-clc-section--title {
    font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif) !important;
    font-size: clamp(3rem, 7vw, 5rem) !important;
    line-height: 1.02 !important;
    margin: 0 0 14px !important;
    color: var(--geh-clc-navy-hard, #0C223D) !important;
  }
  & .geh-clc-confirmation--copy .geh-clc-rule {
    margin: 14px 0 18px !important;
    margin-left: 0 !important;
  }
  & .geh-clc-confirmation--lede {
    font-family: var(--geh-clc-font-b, 'Inter', sans-serif) !important;
    font-size: 1.18rem !important;
    line-height: 1.65 !important;
    color: var(--geh-clc-navy-hard, #0C223D) !important;
    margin: 0 0 18px !important;
    max-width: 520px !important;
  }
  & .geh-clc-confirmation--lede strong {
    color: var(--geh-clc-accent-deep, #0A7ABF) !important;
  }
  & .geh-clc-confirmation--signature {
    display: block;
    font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--geh-clc-text-soft, #5b6b7a);
    margin-top: 14px;
  }

  @media (max-width: 880px) {
    & .geh-clc-confirmation--grid {
      grid-template-columns: 1fr !important;
    }
    & .geh-clc-confirmation--copy {
      text-align: center !important;
      align-items: center !important;
    }
    & .geh-clc-confirmation--lede { margin-left: auto !important; margin-right: auto !important; }
    & .geh-clc-confirmation--photo-wrap {
      max-width: 320px !important;
      margin: 0 auto !important;
    }
  }
}


/* ================================================================
   5. GRACIAS R16 — hero parity with lesp02 sales hero (47.5)
   ================================================================ */
.geh-clc-section--confirmation .geh-clc-confirmation--grid {
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(28px, 5vw, 60px) !important;
  align-items: center !important;
}
.geh-clc-section--confirmation .geh-clc-confirmation--copy  { order: 1 !important; text-align: left !important; }
.geh-clc-section--confirmation .geh-clc-confirmation--photo { order: 2 !important; }

.geh-clc-section--confirmation .geh-clc-section--header { margin-bottom: 14px; }
.geh-clc-section--confirmation .geh-clc-section--header .geh-clc-section--title {
  font-size: clamp(3rem, 6vw, 4.6rem) !important;
  margin: 0 0 4px !important;
}
.geh-clc-section--confirmation .geh-clc-section--header .geh-clc-section--subtitle {
  display: block;
  font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--geh-clc-accent-deep, #0A7ABF);
  margin: 0 0 10px;
  line-height: 1.1;
}
.geh-clc-section--confirmation .geh-clc-section--header .geh-clc-rule {
  margin: 6px 0 0;
}

@media (max-width: 860px) {
  .geh-clc-section--confirmation .geh-clc-confirmation--grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .geh-clc-section--confirmation .geh-clc-confirmation--copy { text-align: center !important; }
  .geh-clc-section--confirmation .geh-clc-section--header .geh-clc-rule { margin-left: auto; margin-right: auto; }
}


/* ================================================================
   6. GRACIAS R17 — top header parity + smaller bio-card (48.5)
   ================================================================ */
.geh-clc-section--confirmation .geh-clc-confirmation--copy .geh-clc-section--header {
  display: none !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header {
  text-align: center;
  margin: 0 auto 28px;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--title {
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  margin: 0 0 4px !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle {
  font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--geh-clc-accent-deep, #0A7ABF);
  margin: 0;
  line-height: 1.1;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-rule {
  margin: 10px auto 0;
}

.geh-clc-section--confirmation .geh-clc-confirmation--copy {
  text-align: left !important;
}
.geh-clc-section--confirmation .geh-clc-confirmation--copy .geh-clc-confirmation--hello {
  display: block;
  font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--geh-clc-navy-hard, #0C223D);
  margin: 0 0 14px;
  text-align: left;
}

.geh-clc-section--confirmation .geh-clc-bio-card {
  max-width: 280px;
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 860px) {
  .geh-clc-section--confirmation .geh-clc-bio-card { margin: 0 auto; max-width: 260px; }
  .geh-clc-section--confirmation .geh-clc-confirmation--copy .geh-clc-confirmation--hello { text-align: center; }
}


/* ================================================================
   7. GRACIAS R18 — hero fine-tuning (was second 49)
   ================================================================ */
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle {
  font-size: 1.15rem !important;
  margin-top: 4px !important;
}
.geh-clc-section--confirmation .geh-clc-confirmation--grid {
  gap: clamp(16px, 2.4vw, 32px) !important;
  align-items: center !important;
}
.geh-clc-section--confirmation .geh-clc-bio-card {
  margin-left: 0 !important;
  margin-right: auto !important;
}
@media (max-width: 860px) {
  .geh-clc-section--confirmation .geh-clc-bio-card { margin: 0 auto !important; }
}


/* ================================================================
   8. GRACIAS R19 — header DS parity + circular avatar (50.1, 50.2)
   ================================================================ */
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 720px !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--title {
  font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  line-height: 1.3 !important;
  color: var(--geh-clc-navy, #004473) !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle {
  font-family: var(--geh-clc-font-h, 'Cormorant Infant', serif) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem) !important;
  line-height: 1.7 !important;
  color: var(--geh-clc-text-soft, #5b6b7a) !important;
  margin: 0 0 14px !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-rule {
  margin: 6px auto 0 !important;
}

/* Circular flipped avatar */
.geh-clc-confirmation--avatar {
  width: clamp(220px, 28vw, 320px);
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
  background: var(--geh-clc-surface, #F4F8FB);
  border: 6px solid #fff;
  box-shadow:
    0 1px 0 rgba(12,34,61,.04),
    0 28px 60px rgba(0,68,115,.18);
}
.geh-clc-confirmation--avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.geh-clc-section--confirmation .geh-clc-confirmation--photo {
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 860px) {
  .geh-clc-section--confirmation .geh-clc-confirmation--photo { justify-content: center; }
}


/* ================================================================
   9. GRACIAS R20 — logo padding-top + subtitle/rule rhythm (51.4)
   ================================================================ */
.geh-clc-section--confirmation {
  padding-top: 50px !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-section--subtitle {
  margin: 0 0 8px !important;
}
.geh-clc-section--confirmation > .geh-clc-container > .geh-clc-section--header .geh-clc-rule {
  margin: 0 auto !important;
}
@media (max-width: 980px) {
  .geh-clc-section--confirmation { padding-top: 36px !important; }
}


/* ================================================================
   10. GRACIAS R21 — avatar + hello margin (52.1)
   ================================================================ */
.geh-clc-confirmation--avatar {
  width: clamp(180px, 22vw, 260px) !important;
}
.geh-clc-section--confirmation .geh-clc-confirmation--copy .geh-clc-confirmation--hello {
  margin: 0 0 22px !important;
}


/* ================================================================
   11. GRACIAS R22 — copy ↔ photo gap mobile (54.3)
   ================================================================ */
@media (max-width: 860px) {
  .geh-clc-section--confirmation .geh-clc-confirmation--grid {
    row-gap: 40px !important;
  }
  .geh-clc-section--confirmation .geh-clc-confirmation--photo {
    margin-top: 8px !important;
  }
}


/* ================================================================
   12. GRACIAS R23 — gap between rule and "¡Gracias!" mobile (60.4)
   ================================================================ */
@media (max-width: 980px) {
  .geh-clc-section--confirmation .geh-clc-confirmation--copy .geh-clc-confirmation--hello {
    margin-top: 16px !important;
  }
}