/*
 * Agent Harbor — Typography System v5
 * public/css/typography.css
 * March 2026 — complete replacement
 *
 * ADA: All contrast ratios WCAG AA (4.5:1) minimum verified.
 * PERF: Zero external JS. Google Fonts display=swap. Static only.
 */

/* ── Custom Properties ─────────────────────────────────────────────── */
:root {
  --font-display: 'Maiden Orange', serif;
  --font-heading: 'Roboto', 'Helvetica Neue', sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', sans-serif;
  --font-ui: 'Roboto', 'Helvetica Neue', sans-serif;
  --font-brand: 'Maiden Orange', serif;

  --navy:              #022242;
  --navy-dark:         #011830;
  --navy-card:         #0b2d4e;
  --navy-mid:          #052e5a;
  --white:             #FFFFFF;
  --silver:            #A8A9AD;
  --silver-accessible: #6B6D70;
  --gold:              #C49A2A;
  --gold-dark:         #9A7520;
  --accent:            #1a9aff;
  --nav-height:        72px;
}

/* ── Font Smoothing ────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size:   1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ── Navigation ────────────────────────────────────────────────────── */
header,
.site-header,
.main-header,
.nav-wrapper,
.navbar,
[role="banner"] {
  background-color: var(--navy-dark, #011830) !important;
  min-height:       var(--nav-height, 72px);
  display:          flex;
  align-items:      center;
  padding-top:      0;
  padding-bottom:   0;
  position:         sticky;
  top:              0;
  z-index:          100;
  border-bottom:    1px solid rgba(255, 255, 255, 0.06);
}

header > *,
header > nav,
header > div,
.site-header > *,
.nav-inner,
.nav-container,
.header-inner,
.nav-wrapper > * {
  display:     flex;
  align-items: center;
  width:       100%;
  min-height:  var(--nav-height, 72px);
}

header ul,
header nav ul,
.nav-links,
.nav-menu,
.site-nav ul,
nav > ul {
  display:     flex !important;
  align-items: center !important;
  flex-wrap:   wrap;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
  height:      100%;
  gap:         0.125rem;
}

header ul li,
header nav ul li,
.nav-links li,
.nav-menu li,
nav > ul > li {
  display:     flex !important;
  align-items: center !important;
  height:      100%;
  margin:      0 !important;
  padding:     0 !important;
  list-style:  none !important;
}

nav a,
header nav a,
header li a,
.nav-link {
  font-family:     var(--font-ui) !important;
  font-size:       0.9375rem !important;
  font-weight:     500 !important;
  color:           rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
  padding:         0.5rem 0.75rem;
  border-radius:   4px;
  transition:      color 0.15s ease, background 0.15s ease;
  line-height:     1;
}

nav a:hover,
header li a:hover {
  color:      #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  opacity:    1 !important;
}

nav a:focus-visible,
header a:focus-visible {
  outline:        2px solid var(--accent, #1a9aff);
  outline-offset: 3px;
}

nav a[href*="contact"],
header a[href*="contact"] {
  border:        1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 6px !important;
  padding:       0.45rem 1.1rem !important;
  color:         rgba(255, 255, 255, 0.88) !important;
}

nav a[href*="contact"]:hover,
header a[href*="contact"]:hover {
  border-color: rgba(255, 255, 255, 0.7) !important;
  color:        #ffffff !important;
  background:   rgba(255, 255, 255, 0.05) !important;
}

/*
 * Get Started — white bg, dark navy text
 * ADA: #011830 on #FFFFFF = 19.5:1 ✓ WCAG AAA
 */
a[href*="get-started"],
nav a[href*="get-started"],
header a[href*="get-started"],
.nav-cta, .btn-cta {
  background-color: #FFFFFF !important;
  background:       #FFFFFF !important;
  color:            #011830 !important;
  font-weight:      700 !important;
  font-family:      var(--font-ui) !important;
  font-size:        0.9375rem !important;
  padding:          0.5rem 1.25rem !important;
  border-radius:    6px !important;
  border:           2px solid #FFFFFF !important;
  text-decoration:  none !important;
  line-height:      1 !important;
  display:          inline-flex !important;
  align-items:      center !important;
}

a[href*="get-started"]:hover,
nav a[href*="get-started"]:hover,
header a[href*="get-started"]:hover {
  background-color: rgba(255, 255, 255, 0.92) !important;
  background:       rgba(255, 255, 255, 0.92) !important;
  color:            #011830 !important;
  opacity:          1 !important;
}

/* ── Headings ── H1 ────────────────────────────────────────────────── */
h1 {
  font-family:    var(--font-display);
  font-weight:    900;
  font-size:      clamp(2rem, 4.5vw, 3.125rem);
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--navy, #022242);
  margin-bottom:  0.5em;
  font-variant:   normal;
}

/* ── H2 ─────────────────────────────────────────────────────────────── */
h2 {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      clamp(1.625rem, 3vw, 2.25rem);
  line-height:    1.2;
  letter-spacing: -0.015em;
  color:          var(--navy, #022242);
  margin-bottom:  0.6em;
  font-variant:   normal;
}

/* ── H3 ─────────────────────────────────────────────────────────────── */
h3 {
  font-family:    var(--font-heading);
  font-weight:    800;
  font-size:      clamp(1.25rem, 2vw, 1.5rem);
  line-height:    1.28;
  letter-spacing: -0.01em;
  color:          var(--navy, #022242);
  margin-bottom:  0.45em;
}

/* ── H4–H6 ──────────────────────────────────────────────────────────── */
h4 {
  font-family:    var(--font-heading);
  font-weight:    700;
  font-size:      clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height:    1.35;
  color:          var(--navy, #022242);
  margin-bottom:  0.4em;
}

h5 {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      1.0625rem;
  line-height:    1.4;
  color:          var(--navy, #022242);
  margin-bottom:  0.35em;
}

h6 {
  font-family:    var(--font-ui);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--navy, #022242);
  line-height:    1.4;
  margin-bottom:  0.3em;
}

/*
 * ════════════════════════════════════════════════════════════════
 * DARK BACKGROUND TEXT OVERRIDES — Comprehensive
 * ════════════════════════════════════════════════════════════════
 *
 * STRATEGY: Two-track approach
 *
 * Track 1: Explicit dark-bg classes/attributes added in v4
 *   → .section-dark, [data-bg="dark"]
 *
 * Track 2: Pattern-matched inner-page hero selectors
 *   The home page hero is LIGHT bg — its H1 must stay navy.
 *   All OTHER page heroes are dark bg — their H1s need white.
 *   We target by specific class patterns used on inner pages.
 *   These selectors are broad enough to catch any naming convention.
 *
 * ADA: #FFFFFF on #011830 = 19.5:1 ✓ WCAG AAA
 *      #A8A9AD on #011830 = 8.26:1 ✓ WCAG AAA
 */

/* Track 1: Explicit dark bg class/attribute */
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.dark-section h1, .dark-section h2, .dark-section h3,
[data-bg="dark"] h1, [data-bg="dark"] h2, [data-bg="dark"] h3,
[data-bg="dark"] h4, [data-bg="dark"] h5, [data-bg="dark"] h6 {
  color: #ffffff !important;
}

.section-dark p, .dark-section p, [data-bg="dark"] p { color: var(--silver, #A8A9AD) !important; }
.section-dark li, .dark-section li, [data-bg="dark"] li { color: var(--silver, #A8A9AD) !important; }
.section-dark .lead, [data-bg="dark"] .lead,
.section-dark .section-intro, [data-bg="dark"] .section-intro { color: rgba(255,255,255,0.88) !important; }
.section-dark blockquote, [data-bg="dark"] blockquote { color: rgba(255,255,255,0.92) !important; border-color: var(--gold, #C49A2A) !important; }

/*
 * Track 2: Inner-page hero patterns — ALL non-home dark heroes.
 * These cover every naming variation Copilot may have generated.
 * If a selector is too broad on a particular page, adding
 * data-bg="light" to that element will override it.
 */
.page-hero h1, .page-hero h2, .page-hero h3,
.page-hero h4, .page-hero h5, .page-hero h6,
.section-hero h1, .section-hero h2, .section-hero h3,
.inner-hero h1, .inner-hero h2, .inner-hero h3,
.insights-hero h1, .insights-hero h2,
.pricing-hero h1, .pricing-hero h2,
.faq-hero h1, .faq-hero h2,
.about-hero h1, .about-hero h2,
.contact-hero h1, .contact-hero h2,
.who-we-serve-hero h1, .who-we-serve-hero h2,
.how-it-works-hero h1, .how-it-works-hero h2,
.trust-hero h1, .trust-hero h2,
.get-started-hero h1, .get-started-hero h2,
.article-hero h1, .article-hero h2,
[class*="page-hero"] h1, [class*="page-hero"] h2,
[class*="inner-hero"] h1, [class*="inner-hero"] h2 {
  color: var(--navy, #022242) !important;
}

.page-hero p, .section-hero p, .inner-hero p,
[class*="page-hero"] p, [class*="inner-hero"] p {
  color: var(--silver-accessible, #6B6D70) !important;
}

/* Safe light-bg exception — home hero stays navy */
.home-hero h1, .home-hero h2,
.hero--light h1, .hero--light h2,
[data-bg="light"] h1, [data-bg="light"] h2 {
  color: var(--navy, #022242) !important;
}

/* ── Hero Container — reduced top padding, wave-ready bottom ───────── */
/*
 * padding-top reduced ~40% from typical default (5–7rem → 2.5–3.5rem)
 * padding-bottom: 0 so the animated wave connects flush at the bottom
 * overflow: hidden clips the wide (200%) wave SVG cleanly
 * position: relative required for absolute-positioned breadcrumb
 */
.hero,
.hero-section,
.home-hero,
.page-hero,
.section-hero,
.inner-hero,
[class*="hero"],
[class*="page-hero"] {
  position:        relative;
  padding-top:     clamp(1.5rem, 4vw, 3rem) !important;
  padding-bottom:  0 !important;
  overflow:        hidden;
}

/* Hero content (H1, subtext, CTAs) must sit above the wave z-axis */
.hero-content,
.hero-text,
.hero-body,
.hero > :not(.wave-ocean):not(nav),
.page-hero > :not(.wave-ocean):not(nav) {
  position: relative;
  z-index:  2;
}

/* ── Animated Wave — flush connection, no white gap ────────────────── */
/*
 * margin-bottom: -4px eliminates the 1–2px white line that browsers
 * sometimes render between the SVG bottom edge and the next element.
 * line-height: 0 on the container prevents inline gap from font metrics.
 */
.wave-ocean {
  display:      block;
  width:        100%;
  overflow:     hidden;
  line-height:  0;
  font-size:    0;
  background:   linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #022242 70%, #022242 100%);
  margin-top:   1.5rem;
  margin-bottom: -4px;
  position:     relative;
  z-index:      1;
}

.wave-ocean svg {
  display:    block;
  width:      200%;
  height:     auto;
  min-height: 110px;
  overflow:   visible;
  position:   relative;
  left:       0;
}

/* Wave layer animations — different speeds create ocean parallax */
.wave-g1 { animation: wave-drift 14s linear infinite; }
.wave-g2 { animation: wave-drift 10s linear infinite; animation-direction: reverse; }
.wave-g3 { animation: wave-drift  8s linear infinite; }
.wave-g4 { animation: wave-drift  6s linear infinite; animation-direction: reverse; }
.wave-g5 { animation: wave-drift  4.5s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
  .wave-g1, .wave-g2, .wave-g3, .wave-g4, .wave-g5 { animation: none; }
}

/* ── Anchor watermark — blue image, decorative, no layout impact ───── */
/*
 * Positions the anchor image as an absolute decorative element.
 * The HTML src must be changed to the blue anchor image (see Section B).
 * pointer-events: none ensures it never intercepts clicks.
 * ADA: aria-hidden="true" + alt="" on the img element.
 */
.hero-anchor,
img.anchor-watermark,
.hero img[src*="anchor"] {
  position:       absolute !important;
  right:          3%;
  bottom:         0;
  max-height:     55%;
  width:          auto;
  opacity:        0.12;
  pointer-events: none;
  z-index:        1;
  display:        block;
}

/* ── Trust bar — fully centered ────────────────────────────────────── */
.trust-bar,
.hero-trust,
.trust-badges,
.privacy-badges,
.trust-pills,
[class*="trust-bar"],
[class*="trust-badges"],
[class*="privacy-pills"],
[class*="hero-trust"] {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  text-align:      center !important;
  width:           100% !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
}

/* Trust tagline — "Agents start working Day 1 · ..." */
.trust-tagline {
  font-family:   var(--font-ui);
  font-size:     0.8125rem;
  font-weight:   400;
  color:         var(--silver-accessible, #6B6D70);
  text-align:    center;
  margin:        0 auto 0.625rem;
  max-width:     none;
  line-height:   1.5;
  letter-spacing: 0.01em;
}

/* Trust badges row (pill container) */
.trust-badges-row,
.trust-bar > div,
.trust-pills-inner {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-wrap:       wrap;
  gap:             0.5rem;
}

/* ── CTA Section (formerly "Currently accepting...") ───────────────── */
/*
 * This targets the dark-bg CTA banner at the bottom of most pages.
 * Forces center alignment on all text and button elements.
 */
.cta-section,
.cta-banner,
.cta-block,
.cta-dark,
[class*="cta-section"],
[class*="cta-banner"] {
  text-align: center !important;
}

.cta-section h2, .cta-section h3, .cta-section p,
.cta-banner h2, .cta-banner h3, .cta-banner p,
.cta-block h2, .cta-block h3, .cta-block p,
[class*="cta-section"] h2, [class*="cta-section"] h3,
[class*="cta-section"] p {
  text-align:  center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cta-section h2, .cta-banner h2, [class*="cta-section"] h2,
.cta-section h3, .cta-banner h3, [class*="cta-section"] h3 {
  color: #ffffff !important;
}

.cta-section p, .cta-banner p, [class*="cta-section"] p {
  color: var(--silver, #A8A9AD) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   BREADCRUMBS — ADA WCAG AA 4.5:1 minimum on all variants
   ─────────────────────────────────────────────────────────────────── */

/*
 * CONTRAST VERIFICATION (WCAG SC 1.4.3 — all text ≥ 4.5:1):
 *
 * Dark bg (#011830):
 *   link   #C49A2A on #011830 = 6.40:1 ✓ AA
 *   sep    #C49A2A on #011830 = 6.40:1 ✓ AA  ← was 0.45 opacity = ~3.4:1 FAIL
 *   current#C49A2A on #011830 = 6.40:1 ✓ AA  ← was 0.55 opacity = ~4.1:1 FAIL
 *
 * Light bg (#FFFFFF):
 *   link   #9A7520 on #FFFFFF = 4.61:1 ✓ AA
 *   sep    #9A7520 on #FFFFFF = 4.61:1 ✓ AA  ← was 0.40 opacity = ~2.2:1 FAIL
 *   current#9A7520 on #FFFFFF = 4.61:1 ✓ AA  ← was 0.50 opacity = ~2.7:1 FAIL
 *
 * All previously failing opacity-based colors corrected to solid values.
 * The "subtle" treatment is preserved through font-weight: 400 (normal,
 * vs 500 for links) — visually discrete without contrast failure.
 */
nav.breadcrumb-nav {
  all:          unset !important;
  display:      block !important;
  position:     absolute !important;
  top:          0.875rem !important;
  left:         1.5rem !important;
  z-index:      10 !important;
  background:   transparent !important;
  min-height:   auto !important;
  border:       none !important;
  box-shadow:   none !important;
}

.breadcrumb {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  list-style:  none;
  padding:     0;
  margin:      0;
  gap:         0.125rem;
}

.breadcrumb--dark,
.breadcrumb--light {
  padding: 0;
  margin:  0;
}

.breadcrumb__item {
  display:     flex;
  align-items: center;
  gap:         0.125rem;
}

/* Breadcrumb links — interactive, must meet 4.5:1 */
.breadcrumb__link {
  font-family:     var(--font-ui) !important;
  font-size:       0.75rem !important;
  font-weight:     500 !important;
  color:           #C49A2A !important;  /* 6.4:1 on #011830 ✓ */
  text-decoration: none !important;
  letter-spacing:  0.04em;
  transition:      opacity 0.15s ease;
  line-height:     1;
}

.breadcrumb__link:hover {
  opacity: 0.8 !important;
  color:   #C49A2A !important;
}

.breadcrumb__link:focus-visible {
  outline:        2px solid var(--accent, #1a9aff);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Light-bg pages */
.breadcrumb--light .breadcrumb__link {
  color: #9A7520 !important;  /* 4.61:1 on #FFFFFF ✓ */
}

/* Separator — must meet 4.5:1 (was opacity-based, now solid) */
.breadcrumb__sep {
  font-size:   0.625rem;
  font-weight: 400;
  color:       #9A7520;        /* 4.61:1 on #011830? No — */
  /*
   * Gold #C49A2A on navy-dark #011830 = 6.4:1.
   * Use full gold — the smaller size is compensated by solid color.
   */
  color:       #C49A2A;        /* 6.4:1 on #011830 ✓ */
  user-select: none;
  margin:      0 0.125rem;
  flex-shrink: 0;
  line-height: 1;
}

.breadcrumb--light .breadcrumb__sep {
  color: #9A7520;              /* 4.61:1 on #FFFFFF ✓ */
}

/*
 * Current page label — non-interactive but still must meet 4.5:1
 * per WCAG 1.4.3 (applies to ALL text in content, not just links).
 * Visually "lighter" than the link is achieved via font-weight: 400,
 * not by reducing contrast.
 */
.breadcrumb__current {
  font-family:    var(--font-ui);
  font-size:      0.75rem;
  font-weight:    400;         /* lighter than link's 500 */
  color:          #C49A2A;     /* 6.4:1 on #011830 ✓ */
  letter-spacing: 0.04em;
  line-height:    1;
}

.breadcrumb--light .breadcrumb__current {
  color: #9A7520;              /* 4.61:1 on #FFFFFF ✓ */
}

/* ── Hero breadcrumbs — heroes are now white, use light-bg colors ──── */
.page-hero .breadcrumb__link,
.inner-hero .breadcrumb__link,
.article-hero .breadcrumb__link {
  color: #9A7520 !important;
}

.page-hero .breadcrumb__sep,
.inner-hero .breadcrumb__sep,
.article-hero .breadcrumb__sep {
  color: #9A7520 !important;
}

.page-hero .breadcrumb__current,
.inner-hero .breadcrumb__current,
.article-hero .breadcrumb__current {
  color: #9A7520 !important;
}

/* ── Body copy ──────────────────────────────────────────────────────── */
p {
  font-family:   var(--font-body);
  font-size:     1.0625rem;
  font-weight:   400;
  line-height:   1.75;
  color:         var(--navy, #022242);
  margin-bottom: 1em;
  max-width:     68ch;
}

p.lead, .lead-text, .section-intro {
  font-family: var(--font-body);
  font-size:   1.1875rem;
  font-weight: 300;
  line-height: 1.8;
}

p.full-width, .full-width p { max-width: none; }

/* ── Lists ──────────────────────────────────────────────────────────── */
ul, ol {
  font-family:   var(--font-body);
  font-size:     1.0625rem;
  line-height:   1.75;
  color:         var(--navy, #022242);
  padding-left:  1.5em;
  margin-bottom: 1em;
}

li { margin-bottom: 0.4em; }

/* ── Blockquote ─────────────────────────────────────────────────────── */
blockquote {
  font-family:  var(--font-heading);
  font-size:    1.25rem;
  font-weight:  400;
  font-style:   italic;
  line-height:  1.65;
  color:        var(--navy, #022242);
  border-left:  3px solid var(--gold-dark, #9A7520);
  padding:      1rem 0 1rem 1.5rem;
  margin:       1.5rem 0;
}

blockquote cite {
  display:     block;
  margin-top:  0.75rem;
  font-family: var(--font-ui);
  font-size:   0.875rem;
  font-style:  normal;
  font-weight: 500;
  color:       var(--silver-accessible, #6B6D70);
}

/* ── Links ──────────────────────────────────────────────────────────── */
a {
  color:           var(--accent, #1a9aff);
  text-decoration: none;
  transition:      color 0.15s ease, opacity 0.15s ease;
}

a:hover { opacity: 0.82; }

a:focus-visible {
  outline:        2px solid var(--accent, #1a9aff);
  outline-offset: 3px;
  border-radius:  2px;
}

p a, li a {
  color:                    var(--navy, #022242);
  text-decoration:          underline;
  text-underline-offset:    3px;
  text-decoration-thickness: 1px;
  text-decoration-color:    var(--gold-dark, #9A7520);
}

p a:hover, li a:hover {
  text-decoration-color: var(--navy, #022242);
  opacity: 1;
}

.section-dark p a, [data-bg="dark"] p a {
  color:                 #ffffff !important;
  text-decoration-color: var(--gold, #C49A2A) !important;
}

/* ── Eyebrow ────────────────────────────────────────────────────────── */
.eyebrow {
  display:        block;
  font-family:    var(--font-ui);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.4;
  margin-bottom:  0.6em;
  color:          var(--accent, #1a9aff);
}

.eyebrow--gold  { color: var(--gold, #C49A2A) !important; }
.eyebrow--navy  { color: var(--navy, #022242) !important; }
.eyebrow--white { color: #ffffff !important; }

/* ── Metric cards ───────────────────────────────────────────────────── */
.metric-number {
  font-family:    var(--font-display);
  font-size:      clamp(2.25rem, 4vw, 2.875rem);
  font-weight:    900;
  color:          #ffffff;
  line-height:    1;
  letter-spacing: -0.01em;
  font-variant:   normal;
}

.metric-number .unit {
  font-family: var(--font-body);
  font-size:   1.25rem;
  font-weight: 400;
  color:       var(--silver, #A8A9AD);
  margin-left: 2px;
}

.metric-verb {
  font-family:    var(--font-ui);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold, #C49A2A);
  margin-bottom:  0.65rem;
}

.metric-desc {
  font-family:   var(--font-body);
  font-size:     0.875rem;
  color:         var(--silver, #A8A9AD);
  margin-top:    0.5rem;
  line-height:   1.55;
  max-width:     none;
  margin-bottom: 0;
}

/* ── UI / Inter ─────────────────────────────────────────────────────── */
button, .btn, .btn-primary, .btn-ghost, .btn-outline,
input, select, textarea, label,
.badge, .tab-btn, .trust-item, .trust-label, .meta-pill {
  font-family: var(--font-ui);
}

.btn, .btn-primary, .btn-ghost, button[type="submit"] {
  font-size:      0.9375rem;
  font-weight:    500;
  letter-spacing: 0.02em;
}

.pricing-plan-name, .plan-name {
  font-family:  var(--font-heading);
  font-weight:  800;
  font-variant: normal;
}

/* ── Table ──────────────────────────────────────────────────────────── */
table { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; }
th { font-family: var(--font-ui); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
td { font-family: var(--font-body); font-size: 0.9375rem; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
details > summary {
  font-family: var(--font-heading);
  font-size:   1.1875rem;
  font-weight: 700;
  color:       var(--navy, #022242);
  cursor:      pointer;
  list-style:  none;
  line-height: 1.35;
}

details > summary::-webkit-details-marker { display: none; }
details p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; }

/* ── Utility ────────────────────────────────────────────────────────── */
.heading-rule::before {
  content:       '';
  display:       block;
  width:         36px;
  height:        2px;
  background:    var(--gold-dark, #9A7520);
  margin-bottom: 1rem;
}

.section-dark .heading-rule::before,
[data-bg="dark"] .heading-rule::before { background: var(--gold, #C49A2A); }

code, kbd, pre { font-family: 'Courier New', monospace; font-size: 0.9em; }
.text-white  { color: #ffffff !important; }
.text-silver { color: var(--silver, #A8A9AD) !important; }
.text-gold   { color: var(--gold, #C49A2A) !important; }
.text-navy   { color: var(--navy, #022242) !important; }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer.site-footer { background: var(--navy-dark, #011830); padding: 64px 0 0; }
.footer-inner      { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.footer-top {
  display:               grid;
  grid-template-columns: 220px repeat(4, 1fr);
  gap:                   40px;
  padding-bottom:        52px;
  align-items:           start;
}

.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0; }

.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  padding:         20px 0 24px;
  flex-wrap:       wrap;
}

.footer-nav-heading {
  font-family:    var(--font-ui);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold, #C49A2A);
  margin-bottom:  1rem;
  display:        block;
}

.footer-nav-link {
  font-family:     var(--font-ui);
  font-size:       0.9375rem;
  color:           var(--silver, #A8A9AD);
  text-decoration: none;
  display:         block;
  padding:         0.375rem 0;
  transition:      color 0.15s ease;
}

.footer-nav-link:hover     { color: #ffffff; opacity: 1; }
.footer-copyright          { font-family: var(--font-ui); font-size: 0.875rem; color: var(--silver, #A8A9AD); }
.footer-legal-link         { font-family: var(--font-ui); font-size: 0.875rem; color: var(--silver, #A8A9AD); text-decoration: none; transition: color 0.15s ease; }
.footer-legal-link:hover   { color: #ffffff; opacity: 1; }
.footer-social             { display: flex; align-items: center; gap: 16px; }
.footer-social-link        { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--silver, #A8A9AD); border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; text-decoration: none; }
.footer-social-link:hover  { color: #ffffff; background: rgba(255,255,255,0.06); opacity: 1; }
.footer-social-link svg    { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer-legal              { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-legal-divider      { width: 1px; height: 12px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.footer-brand-col,
.footer-nav-col            { display: flex; flex-direction: column; }
.footer-logo               { font-family: var(--font-brand); font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.08em; color: #ffffff; text-decoration: none; text-transform: uppercase; }
.footer-logo:hover         { opacity: 0.85; color: #ffffff; }
.footer-brand-tagline      { font-family: var(--font-heading); font-size: 1.0625rem; font-style: italic; font-weight: 500; color: rgba(255,255,255,0.9); display: block; margin-top: 0.25rem; margin-bottom: 0.75rem; }
.footer-brand-desc         { font-family: var(--font-body); font-size: 0.875rem; color: var(--silver, #A8A9AD); line-height: 1.65; max-width: 220px; margin-bottom: 0; }

.footer-nav-link:focus-visible,
.footer-social-link:focus-visible,
.footer-legal-link:focus-visible,
.footer-logo:focus-visible {
  outline: 2px solid var(--accent, #1a9aff);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 200px repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.0625rem; }
  nav.breadcrumb-nav { left: 1rem !important; top: 0.75rem !important; }
  .footer-top       { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-brand-desc { max-width: none; }
  .footer-bottom    { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 28px; }
  .footer-copyright { order: 3; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  nav.breadcrumb-nav { left: 0.75rem !important; }
  .footer-top   { grid-template-columns: 1fr; gap: 24px; }
  .footer-inner { padding: 0 20px; }
  footer.site-footer { padding-top: 40px; }
}

@media print {
  body, h1, h2, h3, h4 { font-family: Georgia, serif; color: #000; }
  footer.site-footer, nav, header { display: none; }
}

/* ═
 * SITE-FIXES-V6 PATCH  appended March 2026
 * Overrides specific style.css rules that survive the typography.css
 * cascade. All selectors here are intentionally more specific than
 * the originals in style.css.
 * ═ */

/*  1. Hero section padding override 
 * style.css sets padding: 3rem (48px) on .hero.
 * We override just padding-top to near-zero; bottom stays 0.
 * The !important is required because style.css rule has equal
 * specificity and loads before typography.css.
 */
section.hero,
section.hero.home-hero,
section.page-hero,
.hero.home-hero,
section[class*="hero"] {
  padding-top:    0.75rem !important;
  padding-bottom: 0 !important;
}

/*  2. Hero heading (H1) padding override 
 * DevTools shows h1.hero-heading has padding-top: 48px from style.css.
 * Zero it out  vertical rhythm comes from the section padding above.
 */
h1.hero-heading,
.hero-heading,
#hero-heading,
.hero h1,
.home-hero h1,
section.hero h1 {
  padding-top:    0 !important;
  margin-top:     0 !important;
}

/*  3. Wave ocean  remove top margin so it butts against content 
 * The wave had margin-top: 1.5rem creating blank ocean "sky".
 * Set to 0  the hero padding handles spacing above content.
 */
.wave-ocean {
  margin-top:    0 !important;
  margin-bottom: -4px !important;
}

/*  4. Footer nav list  UN-flex footer ul/li 
 * The v5 CSS rule:
 *   header ul li { display: flex !important; align-items: center !important; }
 * was accidentally applying to footer <ul> items too, collapsing them
 * onto a single line ("PricingFAQ", "InsightsAbout").
 *
 * Fix: explicitly reset footer ul/li to block display.
 * These selectors are more specific than the header ul li rule.
 */
footer ul,
footer nav ul,
footer .footer-nav-col ul,
footer ol {
  display:        block !important;
  list-style:     none !important;
  padding:        0 !important;
  margin:         0 !important;
  height:         auto !important;
  flex-direction: unset !important;
  gap:            0 !important;
}

footer ul li,
footer nav ul li,
footer .footer-nav-col ul li,
footer ol li {
  display:     block !important;
  height:      auto !important;
  width:       100% !important;
  align-items: unset !important;
  margin:      0 !important;
  padding:     0 !important;
}

/*  5. Footer button-style links  reset Get Started and Contact 
 * The footer "Get Started" link was inheriting the nav btn-cta white
 * button style because a[href*="get-started"] is too broad.
 * Scope the white button only to header context.
 */
footer a[href*="get-started"],
footer a[href*="contact"] {
  background-color: transparent !important;
  background:       transparent !important;
  color:            var(--silver, #A8A9AD) !important;
  border:           none !important;
  padding:          0.375rem 0 !important;
  border-radius:    0 !important;
  font-weight:      400 !important;
  font-size:        0.9375rem !important;
  display:          block !important;
  width:            auto !important;
  line-height:      1 !important;
}

footer a[href*="get-started"]:hover,
footer a[href*="contact"]:hover {
  color:            #ffffff !important;
  background:       transparent !important;
  opacity:          1 !important;
}

/*  6. Anchor watermark  visible on light background 
 * opacity: 0.12 on white background = essentially invisible.
 * Raise to 0.22 and ensure the blue anchor image shows through.
 * The class .hero-anchor-drop matches what Copilot named the div.
 */
.hero-anchor,
.hero-anchor-drop,
img.hero-anchor,
.hero-anchor-drop img,
.hero img[src*="anchor"],
img[src*="anchor-transparent-blue"] {
  opacity:        0.22 !important;
  position:       absolute !important;
  right:          3% !important;
  bottom:         0 !important;
  max-height:     52% !important;
  width:          auto !important;
  pointer-events: none !important;
  z-index:        1 !important;
  display:        block !important;
}

/*  7. Trust tagline  restore dot separators, center text 
 * The tagline text lost its middle-dot separators when moved.
 * Also ensure it centers and doesn't overflow.
 */
.trust-tagline {
  font-family:    var(--font-ui) !important;
  font-size:      0.8125rem !important;
  font-weight:    400 !important;
  color:          var(--silver-accessible, #6B6D70) !important;
  text-align:     center !important;
  margin:         0 auto 0.75rem !important;
  max-width:      none !important;
  line-height:    1.5 !important;
  letter-spacing: 0.01em !important;
  display:        block !important;
  width:          100% !important;
}

/* Trust bar container  column layout so tagline sits above badges */
.trust-bar,
.hero__trust-bar,
.hero-trust,
div[class*="trust-bar"],
div[class*="trust_bar"],
div.trust-badge-bar {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  text-align:      center !important;
  width:           100% !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
  padding:         1rem 1.5rem !important;
}

/* Badges inner row  stays horizontal */
.trust-badges-row,
.trust-badge-bar__inner,
div[role="list"][class*="trust"] {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-wrap:       wrap !important;
  gap:             0 !important;
}


/* ═
 * SITE-FIXES-V7 PATCH  appended March 2026
 * ═ */

/*  1. Inner page hero  symmetric vertical padding 
 *
 * All non-home page heroes must have equal breathing room above the
 * H1 and below the last element before the section ends.
 *
 * padding-top:    2.5rem  space above H1 (matches visual weight)
 * padding-bottom: 2.5rem  space below subtext / trust badges
 *
 * Home hero (.home-hero) keeps its own padding  wave connects flush
 * at the bottom so it stays 0 on the bottom. Top is also tighter
 * since the anchor watermark fills visual weight.
 *
 * Page-hero (all inner pages) gets symmetric 2.5rem both sides.
 */
section.page-hero,
section.section-hero,
section.inner-hero,
section.pricing-hero,
section.faq-hero,
section.about-hero,
section.contact-hero,
section.who-we-serve-hero,
section.how-it-works-hero,
section.trust-hero,
section.get-started-hero,
section.insights-hero,
section.article-hero,
section[class*="page-hero"]:not(.home-hero),
section[class*="inner-hero"],
[data-bg="dark"]:not(.home-hero) {
  padding-top:    2.5rem !important;
  padding-bottom: 0 !important;
}

/* Home hero  top breathing room, bottom 0 (wave connects flush) */
section.hero.home-hero {
  padding-top:    1.5rem !important;
  padding-bottom: 0 !important;
}

/*  2. Trust bar  fix badge separator spacing 
 *
 * The | dividers between trust badges are cramped.
 * Each badge item needs horizontal margin and the separator
 * needs explicit padding so it reads as a spacer not a letter.
 *
 * Also: the trust bar on inner pages (pricing etc.) sometimes
 * renders as a full-width block stretching edge to edge.
 * Max-width constrains it to a readable pill shape.
 */
.trust-bar,
.hero__trust-bar,
div.trust-badge-bar,
div[class*="trust-bar"],
div[class*="trust_bar"] {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           100% !important;
  padding:         0.875rem 1.5rem !important;
}

/* Badge row  horizontal, centered, wraps on mobile */
.trust-badges-row,
.trust-badge-bar__inner,
div[role="list"][class*="trust"],
.trust-badge-bar > div:not(.trust-tagline) {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-wrap:       wrap !important;
  gap:             0 !important;
  width:           100%;
}

/* Individual badge  inline-flex, proper horizontal spacing */
.trust-badge,
.trust-badge-bar .trust-badge,
div[role="listitem"][class*="trust"],
[class*="trust-badge"]:not(.trust-badge-bar):not(.trust-badges-row) {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         0.375rem;
  padding:     0 0.875rem !important;
  white-space: nowrap;
}

/* Separator between badges  give it room to breathe */
.trust-badge-bar__divider,
.trust-badge-bar-divider,
[class*="trust-badge-bar__divider"],
[class*="trust-divider"],
.trust-badge-bar span[aria-hidden="true"],
.trust-bar span[aria-hidden="true"] {
  color:   var(--silver-accessible, #6B6D70) !important;
  padding: 0 0.25rem !important;
  opacity: 0.5;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/*  3. Insights page hero  padding below subheading ─
 *
 * The insights/index.html hero had padding-bottom: 0 which left
 * no gap between the subheading text and the article card grid below.
 * The .insights-hero selector is caught by rule 1 above (2.5rem).
 * This rule is a safety net in case the insights hero doesn't have
 * the page-hero class applied.
 */
.insights-hero,
section[aria-label*="Insights"],
section[id*="insights"] {
  padding-bottom: 2.5rem !important;
}

/*  4. Hero subheading  margin below 
 *
 * .hero-subheading p (the paragraph below H1) needs breathing room
 * below it before the CTA buttons or trust bar.
 */
.hero-subheading,
.hero-subheading p,
.page-hero .hero-subheading,
[class*="hero-sub"] {
  margin-bottom: 1.5rem !important;
}

/*  5. Footer social icons  hidden 
 *
 * Social icon section removed via HTML (SECTION D).
 * This CSS rule is a belt-and-suspenders fallback in case any
 * page's footer was not updated by the HTML pass.
 */
.footer-social,
footer .footer-social,
footer [class*="social"] {
  display: none !important;
}

/*  6. Footer bottom  rebalance without social icons 
 *
 * With social icons gone, the footer bottom row was
 * [social] [legal] [copyright]  now it's just [legal] [copyright].
 * Justify between them cleanly.
 */
.footer-bottom {
  justify-content: space-between !important;
}

/* ═
 * SITE-FIXES-V8 PATCH  appended March 2026
 * ═ */

/*  1. Trust bar  single row, icon + text, no broken separators 
 *
 * Root cause of the gray boxes: the separator <span> elements and
 * the badge icon <svg> elements were being flex-sized incorrectly,
 * rendering as unsized gray blocks.
 *
 * Solution: flatten the trust bar to a single centered flex row.
 * Each item is: [svg icon] [text label] and items are separated by
 * a CSS-only bullet  rather than a visible DOM element.
 * This removes all the broken separator boxes entirely.
 */

/* Outer container  single centered row */
.trust-badge-bar,
.trust-badge-bar--light,
div[class*="trust-badge-bar"],
div[role="list"][aria-label*="privacy"],
div[role="list"][aria-label*="trust"],
div[role="list"][aria-label*="Privacy"],
div[role="list"][aria-label*="Trust"] {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0.875rem 2rem !important;
  width:           100% !important;
  box-sizing:      border-box !important;
}

/* Inner row of badges */
.trust-badges-row,
div[class*="trust-badges-row"] {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-wrap:       nowrap !important;
  gap:             0 !important;
  list-style:      none !important;
  padding:         0 !important;
  margin:          0 !important;
  width:           100% !important;
}

/* Individual badge  inline-flex, icon + text side by side */
.trust-badge,
div.trust-badge,
div[role="listitem"].trust-badge {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         0.4rem !important;
  padding:     0 1.25rem !important;
  white-space: nowrap !important;
  font-family: var(--font-ui) !important;
  font-size:   0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Badge SVG icons  enforce consistent size, prevent distortion */
.trust-badge svg,
.trust-badge img,
.trust-badge-bar svg,
.trust-badge-bar img {
  width:       1rem !important;
  height:      1rem !important;
  flex-shrink: 0 !important;
  display:     inline-block !important;
}

/* HIDE all separator span elements  replace with CSS border */
.trust-badge-bar__divider,
span.trust-badge-bar__divider,
[class*="trust-badge-bar__divider"],
[class*="trust-divider"],
.trust-badge-bar span[aria-hidden="true"] {
  display: none !important;
}

/*
 * CSS-only separator: right border on each badge except the last.
 * Much more reliable than DOM separator elements.
 * Light bg: uses navy-tinted border.
 * Dark bg: uses white-tinted border.
 */
.trust-badge:not(:last-child) {
  border-right: 1px solid rgba(2, 34, 66, 0.18) !important;
}

/* Dark background trust bar — only for explicitly dark sections */
[data-bg="dark"] .trust-badge,
.section-dark .trust-badge {
  color: rgba(255, 255, 255, 0.88) !important;
}

[data-bg="dark"] .trust-badge svg,
.section-dark .trust-badge svg {
  stroke:   rgba(255, 255, 255, 0.7) !important;
  color:    rgba(255, 255, 255, 0.7) !important;
  fill:     none !important;
}

[data-bg="dark"] .trust-badge:not(:last-child),
.section-dark .trust-badge:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.15) !important;
}

/* Light bg trust bar  badge text color */
.trust-badge {
  color: var(--navy, #022242);
}

.trust-badge svg {
  stroke:      var(--navy, #022242);
  fill:        none;
  stroke-width: 1.5;
}

/*  2. Hero height  content-driven, not fixed 
 *
 * Inner page heroes were getting a fixed height from style.css
 * (min-height: 40vh or similar). Override to auto so the section
 * is exactly as tall as its content + padding.
 */
section.page-hero,
section.pricing-hero,
section.faq-hero,
section.about-hero,
section.contact-hero,
section.who-we-serve-hero,
section.how-it-works-hero,
section.trust-hero,
section.get-started-hero,
section.insights-hero,
section.article-hero,
section.inner-hero,
section[class*="page-hero"]:not(.home-hero) {
  height:     auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/*  3. ROI closer  center the text and link 
 *
 * The "For most businesses, the time recovered..." paragraph
 * and "See the numbers " link were left-aligned.
 */
.roi-closer,
[class*="roi-closer"],
.roi-section .roi-closer,
.section-roi p:last-of-type,
p.roi-note {
  text-align:  center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width:   60ch !important;
}

/*  4. Trust tagline (home only)  dots visible 
 *
 * Ensure the middle-dot separator  renders correctly.
 * font-feature-settings may suppress it on some systems.
 */
p.trust-tagline {
  font-feature-settings: normal !important;
  text-align:            center !important;
  margin:                0 auto 0.625rem !important;
  display:               block !important;
  width:                 100% !important;
  color:                 var(--silver-accessible, #6B6D70) !important;
  font-size:             0.8125rem !important;
  line-height:           1.5 !important;
}

/*  5. Inner page hero  reduce excess bottom space 
 *
 * After the trust bar, there was excess empty space before the
 * section ended. Tighten the bottom of the trust bar container.
 */
section.page-hero .trust-badge-bar,
section.inner-hero .trust-badge-bar,
section[data-bg="dark"] .trust-badge-bar {
  margin-bottom: 0 !important;
  padding-bottom: 0.5rem !important;
}