/* ==========================================================================
   smrt — design system
   Brand: navy-led, generous whitespace, accents used sparingly.
   See rebuild-brief.md and decisions.md in the smrt-docs repository
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Momo Trust Display: display/headings. SIL OFL licensed (assets/Momo_Trust_Display/OFL.txt).
   WOFF2 first at 37KB, TTF kept as the fallback at 91KB. This is the only
   webfont on the site and it renders every H1, so it sits on the LCP path —
   and unlike the CSS and SVGs it barely compresses in transit, which is why
   the format matters here and not much elsewhere. Every page preloads it;
   without that it is discovered only when the CSS parses, two round trips in.
   Body: the system UI font stack -- no webfont. Inter was specified in the
   brief but never shipped, and the site was designed and approved against the
   system font, so this is now a deliberate choice: zero bytes, no swap flash,
   and it renders as whatever the reader's OS uses (Segoe UI, SF Pro, Roboto).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Momo Trust Display';
  src: url('../assets/Momo_Trust_Display/MomoTrustDisplay-Regular.woff2') format('woff2'),
       url('../assets/Momo_Trust_Display/MomoTrustDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand ---------------------------------------------------------------- */
  --navy:        #0B2A4A;  /* dominant: body text, dark surfaces */
  --pink:        #F1A5BA;  /* fills/backgrounds ONLY — fails contrast as text */
  --cyan:        #02ACD9;  /* links, data/systems moments. 2.66:1 on white —
                              fine for the diagram and dark-block accents,
                              NOT safe as text on a light ground */
  --cyan-figure: #029BC3;  /* the same hue 10% darker: 3.24:1 on white, which
                              clears the 3:1 large-text bar. Used only for the
                              big stat numerals, which are content, not decor */
  --yellow:      #FFC845;  /* sparing: small callouts */

  /* GoHighLevel accent — the official colours from GHL's own site. Used on the
     GHL pages only.
     These are correct ON NAVY, where all three clear 3:1 comfortably:
       yellow 7.74   blue 3.81   green 6.14
     On WHITE only the blue survives (3.50); the yellow is 1.72 and the green
     2.17, both unreadable. So light-ground text uses the -text variants below,
     which are the same hues darkened until they clear 3:1. */
  --ghl-yellow:  #FFB902;  /* navy grounds only */
  --ghl-blue:    #178AF6;  /* safe on both */
  --ghl-green:   #37CA37;  /* navy grounds only */

  --ghl-yellow-text: #A67801;  /* 3.96:1 on white */
  --ghl-green-text:  #299829;  /* 3.74:1 on white */

  /* Derived neutrals ----------------------------------------------------- */
  --navy-900:    #071B31;
  --navy-deep:   #10314F;  /* darkened heading blue — the one dark section block */
  --heading:     #215C94;  /* lighter than the logo navy, so headings read as brand blue against the darker mark. 6.95:1 on white */
  --navy-700:    #14395F;
  --navy-400:    #4A6785;
  --ink:         var(--navy);
  --ink-muted:   #52657B;
  --rule:        #DDE4EC;
  --surface:     #FFFFFF;
  --surface-alt: #F1F4F7;  /* the pale band alternating with white */
  --surface-tint: #E7EAED; /* neutral grey, a step darker than --surface-alt */
  --surface-dark: var(--navy-deep);

  /* Type ----------------------------------------------------------------- */
  --font-display: 'Momo Trust Display', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.55rem);

  /* Spacing scale -------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1.25rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* Layout --------------------------------------------------------------- */
  --measure: 62ch;          /* readable line length */
  --container: 1300px;
  --container-wide: 1660px;   /* trust bar: extends past the content edges */
  --container-narrow: 760px;
  --radius: 10px;
  --radius-pill: 999px;

  --transition: 160ms ease;
}

/* --- Base ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-m); max-width: var(--measure); }

a {
  color: var(--cyan);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}
a:hover { color: var(--navy); }

img, svg { max-width: 100%; height: auto; }

/* Visible focus for keyboard users — do not remove */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Layout -------------------------------------------------------------- */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--surface-alt); }
/* Closing CTA: a step darker than the standard pale band, so it reads as its
   own moment rather than another alternating section. */
.section--tint { background: var(--surface-tint); }
.section--dark {
  background: var(--surface-dark);
  color: #E8EEF5;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }

.stack > * + * { margin-top: var(--space-m); }

/* The one-line cross-link under a closing CTA. Quieter than the button it
   follows — it is for the reader who is on the wrong page, not the one who is
   about to convert. Lives here rather than with the sections because both GHL
   pages use it and neither owns it. */
.close__aside { font-size: var(--step--1); margin-top: var(--space-l); }
.section--dark .close__aside { color: #B9CBDD; }
.section--dark .close__aside a { color: #fff; text-decoration-thickness: 1px; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.85em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary — navy. The default action. */
.btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* Secondary — outlined. */
.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--secondary:hover { background: var(--navy); color: #fff; }

/* Accent — yellow, for the single highest-intent CTA on a page. Sparing. */
.btn--accent {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
}
.btn--accent:hover { background: #F0B72E; border-color: #F0B72E; }

/* Pink — the accent on dark surfaces, where yellow would clash with the navy
   and the pale card fills. Navy text on pink clears AA comfortably. */
.btn--pink {
  background: var(--pink);
  color: var(--navy);
  border-color: var(--pink);
}
.btn--pink:hover { background: #E88FA8; border-color: #E88FA8; color: var(--navy); }

/* Green — the GHL accent as a fill, on the GHL pages' dark block. Navy on it
   measures 6.69:1, and the fill itself sits 6.14:1 against the navy behind it,
   so both the label and the button's own edge are clear. White text would be
   2.17 and is not an option here. */
.btn--green {
  background: var(--ghl-green);
  color: var(--navy);
  border-color: var(--ghl-green);
}
.btn--green:hover { background: #30B230; border-color: #30B230; color: var(--navy); }

/* On dark surfaces */
.section--dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,.55); }
.section--dark .btn--secondary:hover { background: #fff; color: var(--navy); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
}
.site-header__logo { display: flex; align-items: center; }
/* picture is in the selector for the GHL pages, whose wordmark is a raster
   <picture> rather than a bare SVG — without it the inline picture box sits on
   a text baseline and the header gains a few stray pixels of height. */
.site-header__logo img { width: 140px; height: auto; display: block; }
.site-header__logo picture { display: block; }

.nav { display: flex; align-items: center; gap: var(--space-l); }
.nav a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
}
.nav a:hover { color: var(--cyan); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--navy);
}

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    padding: var(--space-s) 1.25rem var(--space-m);
  }
  .nav[hidden] { display: none; }
  .nav a { padding-block: var(--space-s); }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: #A9BDD1;
  padding-block: var(--space-l);
  font-size: var(--step--1);
}
.site-footer__inner {
  /* Hairline seam marking where the ask ends and the utility links begin —
     kept translucent so the CTA and footer still read as one dark foot. */
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-footer a { color: #D6E3EF; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* --- Utilities ----------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Hero (two-column, per Revenue.io reference) -------------------------- */

/* Hero gets extra breathing room. This fixed padding is the base every hero
   uses; the homepage overrides it with .hero--fold below, which sizes itself
   off the viewport instead. */
.hero { padding-block: 190px calc(clamp(2.5rem, 6vh, 5rem) + 30px); }
/* Below the two-column breakpoint that 190px is a fifth of a phone screen
   standing empty above the headline, on every page carrying a hero. Scoped to
   max-width so .hero--fold and .hero--roomy keep the desktop behaviour they
   were verified against. */
@media (max-width: 899px) {
  .hero { padding-top: clamp(2.5rem, 8vw, 5rem); }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-2xl); }
}
.hero h1 { margin-bottom: var(--space-m); }
.hero__lede { font-size: var(--step-1); color: var(--ink-muted); max-width: 46ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.hero__visual { display: flex; justify-content: center; }

/* --- Homepage hero: sized so the next heading peeks at the fold ----------- */

/* The homepage should show the hero plus just enough of "Is this a smrt fit?"
   to signal there is more below. Everything above that heading used to be a
   fixed ~1078px tall no matter the screen, so it only landed correctly on a
   viewport around 1080px — on a 1440x800 laptop the heading sat 278px below
   the fold, and on a very tall screen it floated 300px above it.

   The fix: reserve the three fixed things between the hero and the fold line,
   and let the hero absorb whatever the viewport has left over. .proof and
   .section--peek are pinned rather than clamped off vh here, because the
   subtraction below needs a known number, not a moving one.

   Scoped to the two-column breakpoint. Below 900px the hero stacks and the
   fold is several screens away, so none of this applies. Browsers without
   svh support (pre-2022) drop these declarations and get the base hero. */
@media (min-width: 900px) {
  :root {
    --fold-header: 88px;  /* sticky, so it never leaves the fold */
    --fold-proof: 203px;  /* trust bar: title + 46px logo row + 44px padding */
    --fold-peek: 133px;   /* #who padding-top 56 + heading 49 + 28 of air */
  }

  .hero--fold {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--fold-header) - var(--fold-proof) - var(--fold-peek));
    /* A floor, not the source of the breathing room — min-height and centring
       supply that, and unlike fixed padding they give it back on a short
       screen. At 1200px+ of viewport this lands within a few px of the 190px
       the hero had before. */
    padding-block: clamp(1.25rem, 5svh, 4.5rem);
  }

  /* The diagram is the tallest thing in the hero and the only one that can
     give — the text column is type and won't compress. 1.3253 is the SVG's own
     440:332 ratio, so capping the height caps the width proportionally
     instead of letterboxing it inside a too-wide box. */
  .hero--fold .sysdiagram {
    max-width: min(560px, calc(clamp(230px, 36svh, 423px) * 1.3253));
  }
}

/* Short screens still don't fit, because the hero runs out of padding to give
   long before the heading reaches the fold: at 1440x780 the header, text
   column, trust bar and heading come to 816px on their own.

   The 65px that closes the gap comes from the headline wrapping to two lines
   instead of three, and the way to get that is width, not a smaller type size.
   The text column needs 746px for "We Architect the Systems" to hold one line
   (measured against the actual font, not estimated); at 1.05fr it gets 625px,
   at 2fr it gets 737px at the narrow end of this range and 813px at the wide
   end. The diagram gives up the width, which costs nothing — it is already
   being capped by height here.

   From 1340px up the container is pinned at 1300px, so every width from a 1366
   laptop to a 4K monitor behaves identically. The floor is 1240px: below that
   the container tracks the window, the column drops under 746px and the
   headline goes back to three lines. Short and narrow together — a 1100x800
   window — is the case this can't serve, and it falls back to the heading
   sitting below the fold rather than to anything broken. */
@media (min-width: 1240px) and (max-height: 928px) {
  .hero--fold .hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* Flat, not fluid. Above about 745px of viewport min-height takes over and
     centring supplies the spacing anyway, so this only bites at the very
     bottom of the range — where a fluid value would just be taking away the
     last pixels that make it work. */
  .hero--fold { padding-block: 1.25rem; }
  /* The reserve has to follow the tightened bands below, or min-height holds
     back space this range doesn't need and the heading floats 80px early. */
  :root {
    --fold-proof: 147px;  /* 24px padding, 16px under the title */
    --fold-peek: 109px;   /* 40 + 49 + 20 of air */
  }
}

/* --- Logo / social-proof bar --------------------------------------------- */

.proof { padding-block: calc(clamp(1.25rem, 3vh, 2.5rem) + 20px); }
/* Pinned on desktop: this band's height is a term in --fold-peek's arithmetic,
   so it has to be a known number rather than one that moves with vh. Must stay
   below the rule above — same specificity, so source order decides. */
@media (min-width: 900px) { .proof { padding-block: 44px; } }
/* And tighter still on a short screen, where every band above the fold is
   competing for the same pixels. Keep in this order — see .hero--fold. */
@media (min-width: 1240px) and (max-height: 928px) { .proof { padding-block: 24px; } }
.proof__title {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: var(--space-l);
}
@media (min-width: 1240px) and (max-height: 928px) { .proof__title { margin-bottom: 16px; } }

/* --- Audience split ------------------------------------------------------- */

.audience-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 700px) { .audience-split { grid-template-columns: 1fr 1fr; } }

.audience-card {
  display: block;
  padding: var(--space-l);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: left;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.audience-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,42,74,.08);
}
.audience-card__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--heading);
  margin-bottom: var(--space-2xs);
}
.audience-card__desc { display: block; color: var(--ink-muted); font-size: var(--step--1); }

/* --- Stats ---------------------------------------------------------------- */

.stats {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 800px) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); } }

.stat__figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--cyan-figure);
  margin-bottom: var(--space-xs);
}
/* Label is navy, not pink — pink on pale bg failed WCAG contrast on the old site */
.stat__label { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.stat p { font-size: var(--step--1); color: var(--ink-muted); }

/* --- Steps ---------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl);
  counter-reset: step;
}
@media (min-width: 800px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }

/* Logo navy, matching the audience and service card titles — section h2s keep
   the lighter heading blue, so the two levels stay distinct. */
.step h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  color: var(--navy);
}
.step__num {
  flex: none;
  font-family: var(--font-display);
  color: var(--pink);
  font-size: var(--step-2);
}
.step p { color: var(--ink-muted); }

/* --- FAQ accordion -------------------------------------------------------- */

.faq { list-style: none; margin: var(--space-l) 0 0; padding: 0; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m);
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--heading);
  text-align: left;
  cursor: pointer;
}
.faq__icon { flex: none; transition: transform var(--transition); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 0 var(--space-m) calc(16px + var(--space-s)); color: var(--ink-muted); }
.faq__a p { margin: 0; font-size: var(--step--1); }
.faq__a[hidden] { display: none; }




/* Buttons inside the nav must keep their own colours — `.nav a` would
   otherwise win on specificity and render the label navy-on-navy. */
.nav a.btn--primary { color: #fff; }
.nav a.btn--secondary { color: var(--navy); }
.nav a.btn--secondary:hover { color: #fff; }
.nav a.btn--accent { color: var(--navy); }

/* --- Client logo marquee --------------------------------------------------
   Continuous horizontal scroll. The track holds the logo list twice; animating
   it -50% lands the copy exactly where the original started, so the loop is
   seamless. Uniform HEIGHT (not width) is what makes mixed aspect ratios read
   as the same size — capping width instead makes wide logos look small.
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  /* fade the edges so logos enter and leave softly rather than clipping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  /* Fallback for no-JS. When JS runs it takes over via the Web Animations API,
     which is immune to environments that override animation-duration. */
  animation: marquee 46s linear infinite;
}
.marquee__track.js-driven { animation: none; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--space-2xl) / 2);
}
.marquee__list li { flex: none; display: flex; align-items: center; }

/* Height is the constant. --scale trims individual logos whose artwork carries
   extra padding or a tagline, so they read optically equal rather than
   mathematically equal. */
.marquee__list img {
  height: calc(46px * var(--scale, 1));
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* Per-logo optical corrections.
   Keyed on data-logo, not alt: the duplicate copy carries alt="" for
   accessibility, so an [alt=...] selector would skip it and the logos would
   snap back to base size each time the loop wrapped. */
/* Squarer artwork than the rest (2.47 vs ~4.2), so it needs some extra height
   to reach a comparable width — but 1.85 made it 85px tall against everyone
   else's ~45 and it dominated the band. */
.marquee__list img[data-logo="junk-4-good"] { --scale: 1.35; }
.marquee__list img[data-logo="saltzman"]     { --scale: 1.10; }
.marquee__list img[data-logo="jumpstart"]    { --scale: 1.05; }
.marquee__list img[data-logo="redemptive"]   { --scale: 0.95; }
.marquee__list img[data-logo="adatia"]       { --scale: 0.92; }
.marquee__list img[data-logo="nudge"]        { --scale: 0.90; }

/* The banner animates for everyone and autoplays, per Bretton's call — the
   explicit pause/play control this comment used to describe was removed when
   autoplay was requested. Pausing is now hover/focus only (see main.js).
   Worth knowing: hover-pause doesn't help keyboard or touch users, so if
   WCAG 2.2.2 comes up, this is the gap. */
.marquee-wrap { position: relative; }

/* The trust bar deliberately runs wider than the body content, so logos read as
   a band passing behind the page rather than a boxed-in row. */
.proof__bleed {
  width: min(100% - 2.5rem, var(--container-wide));
  margin-inline: auto;
}


.marquee__track.is-paused { animation-play-state: paused; }

/* Mobile value. On desktop this is pinned to 56px and counted in --fold-peek,
   which is what actually puts the heading at the fold — see .hero--fold. */
.section--peek { padding-top: clamp(2.5rem, 6vh, 5rem); }
@media (min-width: 900px) { .section--peek { padding-top: 56px; } }
@media (min-width: 1240px) and (max-height: 928px) { .section--peek { padding-top: 40px; } }

/* --- Audience (who this is for) ------------------------------------------- */

.audience {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
@media (min-width: 760px) { .audience { grid-template-columns: repeat(3, 1fr); } }

/* Rule above each item rather than a boxed card — keeps the section light,
   since it sits between the logo band and the heavier cards below. */
.audience__item { border-top: 2px solid var(--rule); padding-top: var(--space-m); }
/* Logo navy rather than the lighter heading blue: these sit close together in
   a row, and the darker tone keeps them reading as labels for the copy beneath
   rather than as another level of section heading.
   h2 as well as h3: the 404 page reuses this component directly under its h1,
   where h3 would skip a level. */
.audience__item :is(h2, h3) {
  font-size: var(--step-1);
  color: var(--navy);
  margin-bottom: var(--space-2xs);
}
.audience__item p { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }
/* On the 404 these headings are links. They keep the heading colour rather
   than turning brand cyan: three underlined cyan headings in a row read as a
   link list, not as the three routes back that they are. */
.audience__item :is(h2, h3) a {
  color: inherit;
  text-decoration-color: var(--rule);
  transition: color var(--transition), text-decoration-color var(--transition);
}
.audience__item :is(h2, h3) a:hover { color: var(--cyan); text-decoration-color: currentColor; }

.audience__note {
  margin: var(--space-xl) auto 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* --- Hero systems diagram -------------------------------------------------
   The disconnected stack on the left routes through smrt and comes out as one
   connected system. Colour carries the argument: sources are cool/unresolved
   (cyan), the core is the brand navy, outputs are warm (pink fill) — so the
   eye reads left-to-right as "messy in, sorted out".
   Pulses are created in main.js; the SVG alone is a complete static diagram.
   -------------------------------------------------------------------------- */

.sysdiagram { width: 100%; max-width: 560px; overflow: visible; }

.sysdiagram__wire path { stroke: #CBD8E6; }

.sysdiagram__node circle {
  stroke-width: 1.5;
  transition: stroke 220ms ease, fill 220ms ease;
}
.sysdiagram__node--in circle  { fill: #EFFAFE; stroke: #A9DFF1; }
.sysdiagram__node--out circle { fill: #FDF0F4; stroke: #F2BFCD; }

/* Set by main.js as a pulse lands, then cleared */
.sysdiagram__node circle.is-lit { stroke: var(--cyan); fill: #DAF3FB; }
.sysdiagram__node--out circle.is-lit { stroke: #E2799C; fill: #FBE0E8; }

.sysdiagram__icon {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sysdiagram__label text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  fill: var(--ink-muted);
  text-anchor: middle;
}

.sysdiagram__core { fill: var(--navy); }

/* Restored: this was dropped when the diagram CSS was rewritten. The homepage
   core renders an image rather than text, so its absence went unnoticed until
   the white-label diagram used a text label. */
.sysdiagram__coretext {
  font-family: var(--font-display);
  font-size: 23px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* The brand mark is navy artwork; invert it to sit on the navy core. */
.sysdiagram__mark { filter: brightness(0) invert(1); }

/* Ring that expands when the core receives a pulse */
.sysdiagram__halo {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.sysdiagram__pulse { fill: var(--cyan); }
.sysdiagram__pulse--out { fill: #E2799C; }

/* Two sentences, one per line — a <br> would break awkwardly when either
   sentence wraps on a narrow screen. */
.lede-split span { display: block; }

/* --- "What we do" ---------------------------------------------------------
   The page's single dark block. Deliberately not repeated on the closing CTA:
   if both were dark, neither would read as a deliberate break.
   -------------------------------------------------------------------------- */

.do {
  background: var(--navy-deep);
  color: #C9D8E6;
}
.do h2 { color: #fff; }

.dorows {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

/* Full-width rows rather than a three-across grid: keeps the section short
   while giving the service lists room to run horizontally. */
.dorow {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space-l);
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: var(--space-l);
  align-items: center;
}

.dorow__head { display: flex; align-items: center; gap: var(--space-s); }
.dorow__head h3 {
  font-size: var(--step-1);
  color: var(--navy);
  margin: 0;
}

.dorow__icon {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dorow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: var(--step--1);
}
.dorow__list li { display: inline-flex; align-items: baseline; }
.dorow__list li + li::before {
  content: "\00B7";
  margin: 0 0.6em;
  color: #B9C6D4;
}

/* --- Narrow screens -------------------------------------------------------
   Dotted horizontal lists wrap badly once the row loses its side-by-side
   layout, so they become a plain stacked list and the separators are dropped.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .dorow {
    grid-template-columns: 1fr;
    gap: var(--space-m);
    align-items: start;
  }
  .dorow__list { display: block; }
  .dorow__list li { display: block; padding-block: 0.15em; }
  .dorow__list li + li::before { content: none; }
}

.do__cta {
  margin: var(--space-xl) 0 0;
  max-width: none;
  text-align: center;
}

/* --- Header contact icons -------------------------------------------------
   Text and call, replacing the Contact button. Icon-only, so each carries an
   aria-label naming the action and the number — a bare glyph tells a screen
   reader nothing.
   -------------------------------------------------------------------------- */

.nav__contact { display: flex; align-items: center; gap: var(--space-xs); }

/* Bare icons, no circle. The 38px box stays even though nothing is drawn
   around it — it's the tap target, and shrinking to the glyph would leave a
   20px hit area, under the 24px minimum. */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--navy);
  transition: color var(--transition);
}
.iconbtn svg {
  width: 20px;               /* a touch larger, with no ring to frame them */
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Matches the text links beside them, since these now read as links rather
   than as buttons. */
.iconbtn:hover,
.iconbtn:focus-visible { color: var(--cyan); }

/* Desktop: the icon carries it, with the aria-label doing the naming. */
.iconbtn__label { display: none; }

/* Mobile menu. These overrides must sit AFTER the .iconbtn rules above —
   placed with the other nav mobile styles further up the file they lose on
   source order, since the specificity is identical.
   In a stacked text menu two bare glyphs read as orphans, and the fixed 38px
   box left the row shorter than the links above it with no gap before the CTA.
   Here they become labelled rows like every other item. */
@media (max-width: 800px) {
  .nav__contact {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .iconbtn {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: var(--space-s);
  }
  .iconbtn__label { display: inline; }
}

/* --- Testimonials ---------------------------------------------------------
   Three across on desktop, stacking on narrow screens. No card chrome — a rule
   and the quote itself, so they read as words rather than as UI.
   -------------------------------------------------------------------------- */

.quotes {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }

.quote {
  margin: 0;
  height: 100%;
  padding-top: var(--space-m);
  border-top: 2px solid var(--pink);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0 0 var(--space-m);
  max-width: none;
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
}
.quote__by {
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-weight: 600;
}

/* Company sits under the name, lighter — the name is the attribution, the
   company is the corroboration. */
.quote__by span {
  display: block;
  font-weight: 400;
  color: #7C8DA0;
}

/* --- Testimonial carousel -------------------------------------------------
   Only applied once JS adds .is-carousel. Without it the quotes stay a static
   three-across list — nothing is hidden behind a control that never renders.
   -------------------------------------------------------------------------- */

@media (min-width: 860px) {
  .quotes.is-carousel { grid-template-columns: 1fr; }
}

.quotes.is-carousel {
  /* Every slide occupies the same grid cell, so the container is as tall as
     the longest quote and swapping slides never shifts the page. */
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 760px;
  margin-inline: auto;
}
.quotes.is-carousel > li {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms;
}
.quotes.is-carousel > li.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms ease, transform 420ms ease, visibility 0s;
}

.quotes.is-carousel .quote { text-align: center; border-top: none; padding-top: 0; }
.quotes.is-carousel .quote blockquote p { font-size: var(--step-1); line-height: 1.5; }

.quotes__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}
.quotes__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #C3CFDB;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.quotes__dot[aria-selected="true"] { background: var(--pink); transform: scale(1.25); }
.quotes__dot:hover { background: var(--navy-400); }

@media (prefers-reduced-motion: reduce) {
  .quotes.is-carousel > li { transition: opacity 1ms linear, visibility 0s; transform: none; }
}

/* --- Figures (stat callouts on the dark block) ----------------------------- */

.figures {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
/* Column count follows the available width rather than a fixed breakpoint.
   At a hard 3-up from 800px the columns came out 216px, while "10,000+" beside
   its icon needs 246px — the numeral broke out of its card and pushed a
   scrollbar onto the page. auto-fit only forms a column once it can hold that,
   so the cards drop to two-up in the middle range instead of overflowing.
   min(310px, 100%) keeps it from overflowing on phones narrower than the
   track itself. */
@media (min-width: 620px) {
  .figures {
    grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
    gap: var(--space-xl);
  }
}

.figure {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space-l);
}
.figure__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--cyan-figure);
  margin-bottom: var(--space-xs);
}
.figure h3 {
  font-size: var(--step-1);
  color: var(--navy);
  margin-bottom: var(--space-xs);
}
.figure p { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }

/* Dashed link: smrt sits behind the agency's brand rather than beside it. */
.wire--hidden { stroke-dasharray: 5 5; }

/* The mark on a light node, where the inverted white version would vanish. */
.sysdiagram__mark--dark { filter: none; }

/* Word-pair core labels need a smaller size than the single-word "smrt". */
.sysdiagram__coretext--sm { font-size: 17px; }

/* Hero with no visual yet — one column, so the text isn't stranded beside
   an empty half. Remove when the image lands. */
@media (min-width: 900px) {
  .hero__grid--single { grid-template-columns: minmax(0, 760px); }
}

/* --- Service list ---------------------------------------------------------- */

.services {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m) var(--space-xl);
}
@media (min-width: 760px) { .services { grid-template-columns: 1fr 1fr; } }

.services li { border-top: 1px solid var(--rule); padding-top: var(--space-s); }
.services h3 {
  font-size: var(--step-0);
  color: var(--navy);
  margin: 0 0 var(--space-2xs);
}
.services p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

.services__note {
  margin: var(--space-xl) auto 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--heading);
}

/* --- FAQ ------------------------------------------------------------------- */

.faq h3 { margin: 0; font-size: inherit; }

/* The heading holds the button so the accordion still has a heading structure
   to navigate by; the button carries the expanded state. */
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.85rem 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.faq__q span { flex: 1; }

/* Hero image: rounded and lifted so it reads as a screen rather than a
   flat placement on the page. */
.hero__visual picture { display: block; width: 100%; }
.hero__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(11, 42, 74, .14);
}

/* Icon sits beside the figure, baseline-ish aligned so "21x" and its arrow
   read as one unit rather than two stacked elements. */
.figure__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
}
.figure__head .figure__num { margin-bottom: 0; }

/* Sized off --step-4, the same token the numerals use, so the icon tracks the
   digits at every viewport instead of drifting apart from them.
   Every icon's artwork is drawn to fill ~18 of its 24 viewBox units — without
   that they scale inconsistently, which is what made a 30px box look like
   three different sizes depending on how much of it the drawing used.
   Stroke eased back from 1.7: the viewBox scales it with the box, so the
   original weight read heavy once the box grew. */
.figure__icon {
  flex: none;
  width: calc(var(--step-4) * 0.9);
  height: calc(var(--step-4) * 0.9);
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* White-label hero carries an image rather than a diagram, so it needs a
   little more room beneath before the next section. Page-specific: the
   homepage hero keeps its own spacing. */
.hero--roomy { padding-bottom: calc(clamp(2.5rem, 6vh, 5rem) + 60px); }

/* Platform strip on the dark block */
.platforms { margin-top: var(--space-xl); text-align: center; }
.platforms__title {
  margin: 0 0 var(--space-s);
  max-width: none;
  font-size: var(--step--1);
  color: #8FA6BC;
}
.platforms__list {
  margin: 0;
  max-width: none;
  color: #D6E3EF;
  font-size: var(--step-0);
  line-height: 2;
}

/* --- Figures inverted (navy cards on the pale band) ------------------------
   Flipped to navy so the GHL accents can be the real colours. On white the
   true --yellow is 1.54:1 and unusable; on this navy it measures 8.64:1, with
   blue at 3.52 and green at 4.25 — all clear for the large numerals.
   -------------------------------------------------------------------------- */
.figures--light .figure {
  background: var(--navy-deep);
  border: 0;
}
.figures--light .figure h3 { color: #fff; }
.figures--light .figure p { color: #A9BDD1; }

/* Each icon takes its own card's accent, so the mark and the number beside it
   read as one unit rather than two competing colours. Declared for both pages,
   with the navy-card overrides after, mirroring the numerals above. */
.figure__head:has(.figure__num--a) .figure__icon { stroke: var(--ghl-yellow); }
.figure__head:has(.figure__num--b) .figure__icon { stroke: var(--ghl-blue); }
.figure__head:has(.figure__num--c) .figure__icon { stroke: var(--ghl-green); }


/* A single quote outside the carousel */
.quote--solo {
  max-width: 62ch;
  margin: var(--space-2xl) auto 0;
  text-align: center;
  border-top: 2px solid var(--pink);
  padding-top: var(--space-m);
}
.quote--solo blockquote p { font-size: var(--step-1); }

/* --- Legal pages ------------------------------------------------------------
   Privacy policy and terms of service. Long-form prose, one column, no cards.
   Reproduced from the live site verbatim, so the styling has to carry dense
   text and long capitalised clauses without fighting them.
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--surface-alt);
  padding-block: var(--space-2xl) var(--space-xl);
}
.page-head h1 { font-size: var(--step-3); margin-bottom: var(--space-xs); }
.page-head__meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
}
.page-head__meta + .page-head__meta { margin-top: var(--space-2xs); }

.legal { padding-block: var(--space-xl) var(--space-2xl); }

/* Sections are numbered in the source document, so the heading itself carries
   the number — no CSS counter, which would renumber if a section is ever
   removed and silently disagree with the table of contents. */
.legal h2 {
  font-size: var(--step-2);
  color: var(--heading);
  margin-top: var(--space-2xl);
  /* Sticky header would otherwise cover an anchored heading. */
  scroll-margin-top: 90px;
}
.legal > .container > h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: var(--step-0);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy);
  margin: var(--space-l) 0 var(--space-xs);
}
.legal p { max-width: none; }
.legal ul { padding-left: 1.15rem; margin: 0 0 var(--space-m); }
.legal li { margin-bottom: var(--space-xs); }
.legal li:last-child { margin-bottom: 0; }

/* The all-caps liability clauses. Kept at full body size and full-strength ink
   on purpose: the capitals are there to make these clauses conspicuous, and
   shrinking or greying them would work against that. Only the leading and
   letter-spacing are relaxed, so a wall of capitals stays readable. */
.legal__caps {
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.legal__contact {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  font-style: normal;
  line-height: 1.9;
}

/* Table of contents. Two columns on wider screens so 30-odd entries don't
   push the document itself below the fold. */
.legal__toc { margin-bottom: var(--space-l); }
.legal__toc ol {
  columns: 2;
  column-gap: var(--space-xl);
  padding-left: 1.3rem;
  margin: 0;
  font-size: var(--step--1);
}
@media (max-width: 600px) { .legal__toc ol { columns: 1; } }
.legal__toc li { margin-bottom: var(--space-2xs); break-inside: avoid; }

/* --- Hero audit annotations -------------------------------------------------
   Red marks drawn over the workflow screenshot on /gohighlevel-expert/, as if
   someone were auditing the account live.

   The SVG shares the image's aspect ratio and sits on top of it, so annotation
   coordinates are in image space and track their targets at every width with
   no media queries and no JS repositioning.
   -------------------------------------------------------------------------- */

.anno-wrap { position: relative; display: block; }

/* The image must be block-level. Left inline it sits on a text baseline, and
   the descender gap makes the wrapper a few pixels taller than the image —
   the absolutely positioned overlay then stretches to the wrapper and every
   mark drifts down off its target. */
.anno-wrap picture,
.anno-wrap img { display: block; }

.anno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.anno path {
  fill: none;
  stroke: #E5484D;          /* marker red — deliberately outside the brand
                               palette, and distinct from the orange callouts
                               already printed in the screenshot */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Three ways forward (numbered alternatives) -----------------------------
   Numerals are a visual anchor, not a sequence — these are alternatives, and
   the section heading carries that. Cyan to match the stat numerals rather
   than pink, which is fills-only because it fails contrast as text.
   -------------------------------------------------------------------------- */

.ways {
  list-style: none;                /* the numerals are drawn, not list markers */
  counter-reset: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 760px) { .ways { grid-template-columns: repeat(3, 1fr); } }

.way { border-top: 2px solid var(--pink); padding-top: var(--space-m); }

/* Three options, the three GoHighLevel colours, in order. Scoped by position
   rather than by touching .step__num, which the white-label steps also use —
   those stay pink.
   These are the true GHL colours rather than the darkened text variants: the
   numerals are aria-hidden decoration (the heading carries the meaning), and
   against the pink they replace at 1.94:1 on white, green (2.17) and blue
   (3.50) are both better. Only yellow, at 1.72, is marginally fainter. */
.way:nth-child(1) { border-top-color: var(--ghl-yellow); }
.way:nth-child(2) { border-top-color: var(--ghl-blue); }
.way:nth-child(3) { border-top-color: var(--ghl-green); }

.way:nth-child(1) .step__num { color: var(--ghl-yellow); }
.way:nth-child(2) .step__num { color: var(--ghl-blue); }
.way:nth-child(3) .step__num { color: var(--ghl-green); }

/* Numeral inline before the title, same treatment as the white-label steps —
   the .step__num token is shared rather than duplicated, so the two sections
   can't drift apart. */
.way h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-size: var(--step-1);
  color: var(--navy);
  margin: 0 0 var(--space-xs);
}
.way p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* --- Audit & Discovery prose (on the dark block) ---------------------------- */

/* container--narrow centres itself, but nested inside .container it also needs
   its own auto margins or it hangs off the left edge. */
.prose-dark { margin-inline: auto; }
.prose-dark p { color: #D6E3EF; max-width: none; }

/* The paid-audit framing. Lifted slightly off the body copy so it isn't
   skimmed past — it's the line that stops "Start With an Audit" reading as a
   free assessment. */
.audit__paid {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,.16);
  color: #fff;
}


/* Quote on a dark ground — the light .quote--solo rules invert here. */
.quote--dark { border-top-color: var(--pink); }
.quote--dark blockquote p { color: #fff; }
.quote--dark .quote__by { color: #A9BDD1; }
.quote--dark .quote__by span { color: #D6E3EF; }

/* --- Sound Familiar cards --------------------------------------------------
   Outlined white cards on the white band, mirroring the homepage "What we do"
   rows. The outline does the work the navy ground does there: without it a
   white card on a white section has no edge at all.
   -------------------------------------------------------------------------- */

.services--cards { gap: var(--space-m); }

.services--cards li {
  background: #fff;
  border: 1.5px solid var(--navy);
  border-top: 1.5px solid var(--navy);   /* overrides the rule .services sets */
  border-radius: var(--radius);
  padding: var(--space-l);
}

.services__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
}

.services--cards .services__head h3 {
  font-size: var(--step-1);
  color: var(--navy);
  margin: 0;
}
.services--cards p { color: var(--ink-muted); }

.services__icon {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- GoHighLevel wordmark colouring ----------------------------------------
   "GoHighLevel" in the H1 picks up the three arrow colours from the GHL
   wordmark in the header. The spans sit flush with no whitespace between
   them, so the word is still one contiguous string for a screen reader.
   -------------------------------------------------------------------------- */

.ghl-go    { color: var(--ghl-yellow); }
.ghl-high  { color: var(--ghl-blue); }
.ghl-level { color: var(--ghl-green); }

/* Stat numerals in the three GHL colours, in order.
   Default is the light-ground case (the white-label page's white cards), where
   only the blue survives untouched — yellow is 1.72 and green 2.17 there, so
   both fall back to the darkened -text variants. These numerals are content,
   not decoration, so they have to clear 3:1. */
.figure__num--a { color: var(--ghl-yellow); }
.figure__num--b { color: var(--ghl-blue); }
.figure__num--c { color: var(--ghl-green); }

/* The expert page's cards are navy, which is the one ground that can carry the
   true colours: yellow 7.74, green 6.14. */