/* ===================================================
   AAA BROKERS — STYLES.CSS
   Design system: editorial authority, restrained monochrome
   with a single accent colour. Logo and palette are fixed
   brand assets; structure, type scale and motion follow the
   Optimus reference.
   =================================================== */

/* ===================================================
   1. DESIGN TOKENS
   =================================================== */

:root {
  /* COLOR PALETTE — fixed brand colours */
  --color-ink-navy: #0B1B36;
  --color-deep-circuit-blue: #14328A;
  --color-charge-blue: #2E7DFF;
  --color-paper-white: #F7F8FA;
  --color-slate: #5B6472;
  --color-savings-green: #1FA666;

  /* Ink at reduced opacity — the restrained monochrome layer */
  --ink-05: rgba(11, 27, 54, 0.05);
  --ink-08: rgba(11, 27, 54, 0.08);
  --ink-10: rgba(11, 27, 54, 0.1);
  --ink-20: rgba(11, 27, 54, 0.2);
  --ink-30: rgba(11, 27, 54, 0.3);
  --ink-50: rgba(11, 27, 54, 0.5);
  --ink-70: rgba(11, 27, 54, 0.7);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-70: rgba(255, 255, 255, 0.7);

  /* TYPOGRAPHY */
  --font-display: "Clash Display", serif;
  --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* TYPE SCALE — fluid, Optimus-scaled */
  --text-hero: clamp(2.75rem, 8.5vw, 6.5rem);
  --text-hero-line: 0.95;
  --text-h1: clamp(2.5rem, 6vw, 4.5rem);
  --text-h1-line: 1;
  --text-h2: clamp(2rem, 4.5vw, 3.25rem);
  --text-h2-line: 1.05;
  --text-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-h3-line: 1.2;
  --text-body: 17px;
  --text-body-line: 28px;
  --text-lg: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-caption: 13px;
  --text-caption-line: 18px;
  --text-data: 15px;
  --text-data-line: 24px;

  /* SPACING SCALE */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-section: 48px;

  /* ANIMATION */
  --duration-quick: 0.3s;
  --duration-standard: 0.8s;
  --duration-slow: 1.2s;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* BORDERS */
  --border-width: 1px;
  --border-color: var(--ink-10);
  --border-color-strong: var(--ink-20);
  --radius: 8px;
  --radius-pill: 999px;

  /* SHADOWS */
  --shadow-sm: 0 1px 2px rgba(11, 27, 54, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 27, 54, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 27, 54, 0.12);
}

/* ===================================================
   2. GLOBAL RESET & BASE
   =================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Reserve the scrollbar's gutter permanently so toggling overflow:hidden
     (the CTA modal locking scroll) never changes the viewport width — that
     shift is what moved the fixed header when the modal opened. */
  scrollbar-gutter: stable;
  /* Matches the hero, which always sits at the very top of the page — an
     overscroll bounce (pull-to-refresh) reveals this color, and it needs to
     be dark so the header's white logo/hamburger stay visible against it. */
  background-color: var(--color-ink-navy);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-slate);
  background-color: var(--color-paper-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

  /* Durations collapse above, but animation-delay doesn't — without this,
     a reduced-motion visitor would still sit through the full intro
     timeline waiting on instant snaps instead of watching it animate */
  #intro,
  .intro-letter-2,
  .intro-letter-3,
  .intro-subtitle {
    animation-delay: 0s !important;
  }
}

/* ===================================================
   2b. INTRO SEQUENCE
   =================================================== */

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink-navy);
  animation: intro-exit var(--duration-standard) var(--ease-smooth) 2.6s forwards;
}

@keyframes intro-exit {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.intro-mark {
  position: relative;
  width: 2.3em;
  height: 1em;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* All three letters start at the identical position (left:0, no transform) —
   guaranteed exact overlap by construction, not an estimated offset — then
   animate outward via transform only (composite-safe, no layout thrash) */
.intro-letter {
  position: absolute;
  top: 0;
  left: 0;
}

.intro-letter-2 {
  animation: intro-slide-2 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.intro-letter-3 {
  animation: intro-slide-3 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes intro-slide-2 {
  to { transform: translateX(0.72em); }
}

@keyframes intro-slide-3 {
  to { transform: translateX(1.44em); }
}

.intro-subtitle {
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
  letter-spacing: 0.35em;
  color: var(--white-70);
  opacity: 0;
  animation: intro-fade-in var(--duration-standard) var(--ease-smooth) 1.5s forwards;
}

@keyframes intro-fade-in {
  to { opacity: 1; }
}

/* ===================================================
   3. TYPOGRAPHY
   =================================================== */

h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--text-hero-line);
  font-weight: 700;
  color: var(--color-ink-navy);
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  font-weight: 600;
  color: var(--color-ink-navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  font-weight: 600;
  color: var(--color-ink-navy);
}

p {
  color: var(--color-slate);
}

/* Small mono eyebrow label with a leading dash — used above every section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-md);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink-30);
}

.section-dark .eyebrow,
.hero .eyebrow {
  color: var(--white-50);
}

.section-dark .eyebrow::before,
.hero .eyebrow::before {
  background: var(--white-30);
}

.text-muted-block {
  color: var(--ink-50);
}

.section-dark .text-muted-block {
  color: var(--white-50);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--text-caption-line);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate);
}

.text-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-navy);
}

/* ===================================================
   4. LINKS & BUTTONS
   =================================================== */

a {
  color: var(--color-charge-blue);
  text-decoration: none;
  transition: color var(--duration-quick) var(--ease-smooth);
}

a:hover {
  color: var(--color-deep-circuit-blue);
}

.nav-link {
  position: relative;
  color: var(--color-ink-navy);
  font-size: 15px;
  font-weight: 500;
  transition: color var(--duration-quick) var(--ease-smooth);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-ink-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-quick) var(--ease-smooth);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-out);
}

.btn-primary {
  color: white;
  background-color: var(--color-ink-navy);
  border: none;
}

.btn-primary:hover {
  color: white;
  background-color: var(--color-charge-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(46, 125, 255, 0.25);
}

/* Ink-navy fill is invisible on dark (navy) sections — use the accent instead */
.hero .btn-primary,
.section-dark .btn-primary {
  background-color: var(--color-charge-blue);
}

.hero .btn-primary:hover,
.section-dark .btn-primary:hover {
  background-color: var(--color-deep-circuit-blue);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  color: var(--color-ink-navy);
  background-color: transparent;
  border: var(--border-width) solid var(--ink-20);
}

.btn-secondary:hover {
  border-color: var(--color-ink-navy);
  background-color: var(--ink-05);
  transform: translateY(-2px);
}

.hero .btn-secondary {
  color: white;
  border-color: var(--white-30);
}

.hero .btn-secondary:hover {
  border-color: white;
  background-color: var(--white-10);
}

/* ===================================================
   5. LAYOUT — SECTIONS & CONTAINERS
   =================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

section {
  padding: var(--space-2xl) 0;
}

.section-light {
  background-color: var(--color-paper-white);
  padding: var(--space-2xl) var(--space-lg);
}

.section-dark {
  background-color: var(--color-ink-navy);
  color: var(--white-70);
  padding: var(--space-2xl) var(--space-lg);
}

.section-dark h2,
.section-dark h3 {
  color: white;
}

/* ===================================================
   6. THE CURRENT LINE (Signature Element)
   =================================================== */

.current-line {
  height: 2px;
  background: linear-gradient(90deg, var(--color-deep-circuit-blue) 0%, var(--color-charge-blue) 100%);
  box-shadow: 0 0 10px rgba(46, 125, 255, 0.35);
  margin: var(--space-section) 0;
  position: relative;
  overflow: hidden;
}

.current-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
}

.current-line.is-visible::before {
  animation: current-pulse var(--duration-standard) var(--ease-smooth) forwards;
}

@keyframes current-pulse {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ===================================================
   7. SCROLL ANIMATIONS
   =================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-standard) var(--ease-out),
              transform var(--duration-standard) var(--ease-out);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-group] [data-animate-item] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-standard) var(--ease-out),
              transform var(--duration-standard) var(--ease-out);
}

[data-animate-group] [data-animate-item].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   8. NAVIGATION (Floating pill on scroll)
   =================================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-md);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 72px;
  border-radius: var(--radius-pill);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color var(--duration-standard) var(--ease-out),
              border-color var(--duration-standard) var(--ease-out),
              box-shadow var(--duration-standard) var(--ease-out);
}

header.scrolled nav {
  background-color: rgba(247, 248, 250, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink-navy);
  text-decoration: none;
}

.logo-mark {
  height: 20px;
  width: auto;
  flex-shrink: 0;
}

nav .logo {
  font-size: 26px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-cta .btn-primary {
  padding: 10px 24px;
  font-size: 15px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-ink-navy);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform var(--duration-standard) var(--ease-out),
              opacity var(--duration-standard) var(--ease-out);
}

.menu-toggle.open .menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.open .menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open .menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-menu {
    display: grid;
    grid-template-rows: 0fr;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    transition: grid-template-rows var(--duration-standard) var(--ease-out);
  }

  .mobile-menu.open {
    grid-template-rows: 1fr;
    margin-top: var(--space-sm);
  }

  .mobile-menu-content {
    overflow: hidden;
    min-height: 0;
  }

  .mobile-menu-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background-color: rgba(247, 248, 250, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--border-width) solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    list-style: none;
  }

  .mobile-nav-link {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink-navy);
    text-decoration: none;
    padding: var(--space-xs) 0;
  }

  .mobile-menu-cta {
    justify-content: center;
    width: 100%;
  }
}

/* Unscrolled header sits directly on the dark hero — menu bars invert to white too */
header:not(.scrolled) .menu-toggle {
  color: white;
}

/* Unscrolled header sits directly on the dark hero — invert to white */
header:not(.scrolled) .logo,
header:not(.scrolled) .nav-link {
  color: white;
}

header:not(.scrolled) .nav-link::after {
  background-color: white;
}

header:not(.scrolled) .nav-cta .btn-primary {
  background-color: white;
  color: var(--color-ink-navy);
}

header:not(.scrolled) .nav-cta .btn-primary:hover {
  background-color: var(--color-charge-blue);
  color: white;
}

/* ===================================================
   9. HERO
   =================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-ink-navy);
  color: white;
  overflow: hidden;
}

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

.hero-canvas {
  position: absolute;
  top: 42%;
  right: -3%;
  transform: translateY(-50%);
  width: 760px;
  height: 760px;
  opacity: 0.35;
  pointer-events: none;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}

.hero-grid-lines span {
  position: absolute;
  background: var(--white-10);
}

.hero .container {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 140px;
  padding-bottom: var(--space-3xl);
}

.hero h1 {
  color: white;
  max-width: 900px;
  margin-bottom: var(--space-lg);
}

.hero h1 span {
  display: block;
}

.hero h1 .muted {
  color: var(--white-50);
}

.hero-subheading {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--white-70);
  margin-bottom: var(--space-2xl);
  max-width: 560px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Stats marquee strip */
.hero-marquee {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--white-10);
  padding: var(--space-lg) 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

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

.hero-marquee-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-right: var(--space-2xl);
  white-space: nowrap;
}

.hero-marquee-item .stat-number {
  font-size: 28px;
  color: white;
}

.hero-marquee-item .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-50);
}

@media (max-width: 768px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===================================================
   10. NUMBERED FEATURE LIST
   (How It Works / Why AAA Brokers share this pattern)
   =================================================== */

.feature-list {
  margin-top: var(--space-xl);
}

.feature-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-xl) 0;
  border-bottom: var(--border-width) solid var(--border-color);
  transition: opacity var(--duration-quick) var(--ease-smooth);
}

.feature-list .feature-row:first-child {
  border-top: var(--border-width) solid var(--border-color);
}

.feature-number {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-charge-blue);
  line-height: 1;
}

.feature-row h3 {
  margin-bottom: var(--space-sm);
  color: var(--white-30);
  transition: transform var(--duration-quick) var(--ease-out),
              color var(--duration-standard) var(--ease-smooth);
}

.feature-row:hover h3 {
  transform: translateX(8px);
}

.feature-row.active h3 {
  color: white;
}

.feature-row p {
  max-width: 640px;
  color: var(--white-20);
  transition: color var(--duration-standard) var(--ease-smooth);
}

.feature-row.active p {
  color: var(--white-70);
}

.feature-row.active .feature-number {
  color: var(--color-charge-blue);
}

/* Progress bar — fills left to right while a step is the active one */
.feature-progress {
  margin-top: var(--space-md);
  height: 2px;
  max-width: 640px;
  background-color: var(--white-10);
  border-radius: 1px;
  overflow: hidden;
}

.feature-progress-fill {
  display: block;
  height: 100%;
  background-color: var(--color-charge-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-out;
}

.feature-row.active .feature-progress-fill {
  transform: scaleX(1);
  transition: transform 4s linear;
}

/* Step icon — small bordered mark on the right of each How It Works row */
.step-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.step-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--white-10);
  border-radius: 12px;
  color: var(--white-30);
  transition: border-color var(--duration-standard) var(--ease-smooth),
              color var(--duration-standard) var(--ease-smooth);
}

.feature-row.active .step-icon-box {
  border-color: var(--color-charge-blue);
  color: white;
  animation: step-icon-pop 0.5s var(--ease-out);
}

@keyframes step-icon-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.step-icon-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--white-30);
}

@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 56px 1fr;
  }

  .step-icon {
    display: none;
  }
}

/* Bars icon — rotated -90deg so the decreasing-width lines read as a rising bar chart */
.step-icon-bars svg {
  transform: rotate(-90deg);
  transform-origin: center;
}

.step-icon-bars line {
  transform-origin: left center;
  transition: transform var(--duration-quick) var(--ease-out);
}

.feature-row:hover .step-icon-bars line:nth-child(1),
.feature-row.active .step-icon-bars line:nth-child(1) { transform: scaleX(1.15); }
.feature-row:hover .step-icon-bars line:nth-child(2),
.feature-row.active .step-icon-bars line:nth-child(2) { transform: scaleX(0.7); transition-delay: 0.05s; }
.feature-row:hover .step-icon-bars line:nth-child(3),
.feature-row.active .step-icon-bars line:nth-child(3) { transform: scaleX(1.3); transition-delay: 0.1s; }

/* Nodes icon — connection pulses on hover or when the step becomes active */
.step-icon-nodes circle:last-of-type {
  transition: transform var(--duration-quick) var(--ease-out);
  transform-origin: center;
}

.feature-row:hover .step-icon-nodes circle:last-of-type,
.feature-row.active .step-icon-nodes circle:last-of-type {
  transform: scale(1.6);
}

/* Settle icon — arrow drops into the baseline on hover */
/* Wave icon — continuous flowing motion (ambient, not hover-gated) */
.step-icon-wave path {
  stroke-dasharray: 4 3;
  animation: wave-flow 1.4s linear infinite;
}

@keyframes wave-flow {
  to { stroke-dashoffset: -7; }
}

.section-dark .feature-row {
  border-color: var(--white-10);
}

.section-dark .feature-list .feature-row:first-child {
  border-color: var(--white-10);
}

.section-dark .feature-number {
  color: var(--white-30);
}

/* ===================================================
   10b. ICON FEATURE GRID (Why AAA Brokers)
   =================================================== */

.icon-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.icon-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(46, 125, 255, 0.08);
  color: var(--color-charge-blue);
  margin-bottom: var(--space-lg);
  cursor: default;
}

.icon-feature-icon svg {
  transform-origin: center;
}

.icon-feature h3 {
  margin-bottom: var(--space-sm);
}

.icon-feature p {
  max-width: 380px;
}

/* Trending-down icon — draws in and nudges on hover */
.icon-trending polyline {
  stroke-dasharray: 32;
  stroke-dashoffset: 0;
}

.icon-trending:hover polyline {
  animation: icon-draw 0.5s var(--ease-smooth);
}

.icon-trending:hover svg {
  animation: icon-nudge 0.5s var(--ease-smooth);
}

@keyframes icon-draw {
  0% { stroke-dashoffset: 32; opacity: 0; }
  25% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes icon-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, 2px); }
}

/* Badge-alert icon — scale + shake on hover */
.icon-badge:hover svg {
  animation: icon-shake 0.5s var(--ease-smooth);
}

@keyframes icon-shake {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.1) rotate(-4deg); }
  40% { transform: scale(1.1) rotate(4deg); }
  60% { transform: scale(1.1) rotate(-3deg); }
  80% { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Phone-call icon — ring wiggle on hover */
.icon-phone:hover svg {
  animation: icon-ring 0.6s var(--ease-smooth);
}

@keyframes icon-ring {
  0% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(15deg) scale(1.08); }
  40% { transform: rotate(-12deg) scale(1.12); }
  60% { transform: rotate(10deg) scale(1.08); }
  80% { transform: rotate(-4deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 768px) {
  .icon-feature-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ===================================================
   11. STATS BAR
   =================================================== */

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xl);
}

.stat-number {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-charge-blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: var(--text-caption);
  color: var(--color-slate);
  margin-top: var(--space-sm);
}

.stat-source {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-30);
  margin-top: var(--space-xs);
}

.section-dark .stat-source {
  color: var(--white-30);
}

/* Problem stats — 4-up grid */
.problem-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl) var(--space-xl);
}

@media (max-width: 900px) {
  .problem-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .problem-stats {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   12. FORMS & CALCULATOR
   =================================================== */

label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--color-ink-navy);
  font-size: 14px;
}

.form-group {
  margin-bottom: var(--space-md);
}

input,
textarea,
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 14px var(--space-md);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius);
  color: var(--color-ink-navy);
  background-color: white;
  transition: border-color var(--duration-quick) var(--ease-smooth);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-charge-blue);
  box-shadow: 0 0 0 3px rgba(46, 125, 255, 0.12);
}

/* Checkboxes/radios shouldn't inherit the text-input box treatment above —
   reverting to browser defaults here (rather than excluding them from the
   selector above) keeps this a low-specificity attribute selector, so it
   can't outrank more specific input styling elsewhere (e.g. the CTA modal's
   dark fields) the way raising the rule above's specificity once did. */
input[type="checkbox"],
input[type="radio"] {
  all: revert;
}

.calculator-output {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink-navy);
  padding: var(--space-lg);
  border: var(--border-width) solid var(--color-ink-navy);
  border-radius: var(--radius);
  margin-top: var(--space-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.calculator-output .savings-highlight {
  color: var(--color-charge-blue);
}

.max-w-sm {
  max-width: 420px;
}

/* ===================================================
   12b. PRICING CARDS (business size comparison)
   =================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius);
  padding: var(--space-2xl) var(--space-lg);
  transition: transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out);
}

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

.pricing-card-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink-navy);
  margin-bottom: var(--space-xs);
}

.pricing-card-desc {
  font-size: 14px;
  color: var(--color-slate);
  margin-bottom: var(--space-lg);
}

.pricing-card-consumption {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-ink-navy);
  padding: var(--space-md) 0;
  border-top: var(--border-width) solid var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);
  margin-bottom: var(--space-md);
}

.pricing-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-xs) 0;
  font-size: 14px;
}

.pricing-card-row-label {
  color: var(--color-slate);
}

.pricing-card-row-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-ink-navy);
  font-variant-numeric: tabular-nums;
}

.pricing-card-saving {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--border-color);
}

.pricing-card-saving-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 4px;
}

.pricing-card-saving-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-savings-green);
  font-variant-numeric: tabular-nums;
}

.pricing-card .btn-primary {
  margin-top: var(--space-lg);
  justify-content: center;
  width: 100%;
}

.pricing-note {
  font-size: 13px;
  color: var(--ink-50);
  margin-top: var(--space-lg);
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Shine border — slow rotating gradient ring, brand-coloured */
@property --shine-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.shine-border {
  position: relative;
}

.shine-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--shine-angle, 0deg),
    transparent 0%,
    var(--color-charge-blue) 8%,
    transparent 22%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shine-rotate 5s linear infinite;
  pointer-events: none;
}

@keyframes shine-rotate {
  to { --shine-angle: 360deg; }
}

/* Stagger the pricing cards so their shine-borders don't rotate in lockstep */
.pricing-grid .pricing-card:nth-child(2)::before {
  animation-delay: -1.667s;
}

.pricing-grid .pricing-card:nth-child(3)::before {
  animation-delay: -3.333s;
}

/* Border beam — same rotating-ring technique as a real child element,
   for hosts (like .cta-frame) whose own ::before/::after are already spoken for */
.border-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--shine-angle, 0deg),
    transparent 0%,
    var(--color-charge-blue) 10%,
    transparent 28%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shine-rotate 6s linear infinite;
  pointer-events: none;
}

/* Shimmer button — rotating conic "spark" masked to a thin edge ring
   (ported from a React/Tailwind reference component) */
.btn-shimmer {
  --spread: 90deg;
  --shimmer-color: #ffffff;
  --cut: 0.08em;
  --speed: 3s;
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  /* Forces its own compositing layer — without this, iOS Safari can fail to
     paint the label on top of the blurred spark layer until a repaint is
     triggered by scrolling/touch, leaving the button looking blank/textless. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  box-shadow: inset 0 -6px 8px rgba(255, 255, 255, 0.08);
}

.btn-shimmer:hover {
  box-shadow: inset 0 -6px 8px rgba(255, 255, 255, 0.2);
}

/* White backdrop (unscrolled nav CTA) needs a visible, non-white spark */
header:not(.scrolled) .nav-cta .btn-shimmer {
  --shimmer-color: var(--color-charge-blue);
}

.shimmer-spark-container {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: visible;
  filter: blur(2px);
  container-type: size;
  pointer-events: none;
}

.shimmer-spark {
  position: absolute;
  inset: 0;
  height: 100cqh;
  aspect-ratio: 1;
  animation: shimmer-slide var(--speed) ease-in-out infinite alternate;
}

.shimmer-spark::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from calc(270deg - (var(--spread) * 0.5)),
    transparent 0,
    var(--shimmer-color) var(--spread),
    transparent calc(var(--spread) + 1deg));
  animation: spin-around calc(var(--speed) * 2) infinite linear;
}

.shimmer-backdrop {
  position: absolute;
  inset: var(--cut);
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  pointer-events: none;
}

@keyframes shimmer-slide {
  to { transform: translate(calc(100cqw - 100%), 0); }
}

@keyframes spin-around {
  0% { transform: rotate(0deg); }
  15%, 35% { transform: rotate(90deg); }
  65%, 85% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

/* ===================================================
   13. ACCORDION (FAQ)
   =================================================== */

.accordion-item {
  border-bottom: var(--border-width) solid var(--border-color);
}

.accordion-item:first-child {
  border-top: var(--border-width) solid var(--border-color);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-ink-navy);
  transition: color var(--duration-quick) var(--ease-smooth);
}

.accordion-header:hover {
  color: var(--color-charge-blue);
}

.accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--border-width) solid var(--border-color-strong);
  font-family: var(--font-body);
  font-size: 16px;
  transition: transform var(--duration-quick) var(--ease-smooth), border-color var(--duration-quick) var(--ease-smooth);
}

.accordion-item.open .accordion-toggle {
  transform: rotate(180deg);
  border-color: var(--color-charge-blue);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-standard) var(--ease-smooth);
}

.accordion-content > * {
  overflow: hidden;
  min-height: 0;
}

.accordion-item.open .accordion-content {
  grid-template-rows: 1fr;
  padding-bottom: var(--space-lg);
}

.accordion-content p {
  color: var(--color-slate);
  max-width: 640px;
}

/* ===================================================
   13b. TRUST & COMPLIANCE LOGOS
   =================================================== */

/* The testimonial section's own current-line was removed since this section's
   bottom bar already serves as the divider — trims the leftover space so the
   gap to "What people say" isn't doubled up. */
.logos-trust {
  padding-bottom: var(--space-lg);
}

/* Wraps everything between the two bars and clips the rays canvas to exactly
   that area, so the rays start right at the top bar and end at the bottom
   bar instead of bleeding into the section's outer padding above/below them. */
.logos-trust-rays-wrap {
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0;
  margin: 0 calc(var(--space-lg) * -1);
}

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

.logos-trust-rays-wrap .container {
  position: relative;
  z-index: 1;
}

/* These two bars sit outside .container so they can bleed past the section's
   own side padding and reach the true screen edges — framing the full-width
   rays background instead of the rays visibly running past a narrower bar. */
.logos-trust-line {
  position: relative;
  z-index: 1;
  width: calc(100% + var(--space-lg) * 2);
  margin-left: calc(var(--space-lg) * -1);
  margin-right: calc(var(--space-lg) * -1);
}

.logos-trust-line-top,
.logos-trust-line-bottom {
  margin-top: 0;
  margin-bottom: 0;
}

.logos-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: var(--space-lg) 0 var(--space-2xl);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.logos-marquee-track {
  display: flex;
  width: max-content;
  animation: logos-marquee-scroll 32s linear infinite;
}

@keyframes logos-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.3333%); }
}

.logos-marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--space-3xl);
}

.logos-marquee-img {
  height: 64px;
  width: auto;
  object-fit: contain;
}

.logos-trust-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.logos-trust-text h3 {
  margin-bottom: var(--space-sm);
}

/* ===================================================
   14. TESTIMONIAL
   =================================================== */

.testimonial {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-3xl);
  align-items: start;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-ink-navy);
  letter-spacing: -0.01em;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.testimonial-image {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-slate);
  overflow: hidden;
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-author-name {
  font-weight: 600;
  color: var(--color-ink-navy);
  font-size: 15px;
}

.testimonial-author-role {
  font-size: 14px;
  color: var(--color-slate);
}

.testimonial-result {
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.testimonial-result-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-sm);
}

.testimonial-result-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-savings-green);
  line-height: 1;
}

@media (max-width: 900px) {
  .testimonial {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   15. FINAL CTA (bordered frame)
   =================================================== */

.cta-frame {
  position: relative;
  background-color: var(--color-deep-circuit-blue);
  border: var(--border-width) solid var(--white-20);
  border-radius: var(--radius);
  padding: var(--space-3xl) var(--space-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cta-frame::before,
.cta-frame::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.cta-frame::before {
  top: 0;
  right: 0;
  border-bottom: var(--border-width) solid var(--white-20);
  border-left: var(--border-width) solid var(--white-20);
}

.cta-frame::after {
  bottom: 0;
  left: 0;
  border-top: var(--border-width) solid var(--white-20);
  border-right: var(--border-width) solid var(--white-20);
}

.cta-flicker-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(450px circle at center, white, transparent);
  -webkit-mask-image: radial-gradient(450px circle at center, white, transparent);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-frame h2 {
  margin-bottom: var(--space-lg);
}

.cta-frame p {
  color: var(--white-70);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2xl);
  max-width: 480px;
}

.cta-note {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--white-50);
  margin-top: var(--space-lg);
}

/* ===================================================
   16. FOOTER
   =================================================== */

footer {
  background-color: var(--color-ink-navy);
  color: var(--white-70);
  padding: var(--space-3xl) var(--space-lg) var(--space-lg);
}

footer .container {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

footer .logo {
  color: white;
}

footer h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-md);
}

footer a {
  color: var(--white-70);
}

footer a:hover {
  color: var(--color-charge-blue);
}

footer ul {
  list-style: none;
}

footer li {
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  color: var(--white-50);
  max-width: 320px;
  margin-top: var(--space-md);
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--border-width) solid var(--white-10);
}

.footer-copyright {
  font-size: 13px;
  color: var(--white-50);
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
  color: var(--white-50);
}

.footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-savings-green);
}

.footer-socials {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--border-width) solid var(--white-10);
  font-size: 13px;
  transition: all var(--duration-quick) var(--ease-smooth);
}

.footer-socials a:hover {
  background-color: var(--color-charge-blue);
  border-color: var(--color-charge-blue);
  color: white;
}

/* ===================================================
   17. RESPONSIVE
   =================================================== */

@media (max-width: 768px) {
  section {
    padding: var(--space-xl) 0;
  }

  .section-light,
  .section-dark {
    padding: var(--space-xl) var(--space-lg);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .hero .container {
    padding-top: 120px;
  }

  .hero-canvas {
    width: 480px;
    height: 480px;
    opacity: 0.22;
  }

  .feature-row {
    grid-template-columns: 40px 1fr;
  }

  .feature-number {
    font-size: 24px;
  }

  footer .container {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .cta-frame {
    padding: var(--space-2xl) var(--space-lg);
  }
}

/* ===================================================
   18. UTILITIES
   =================================================== */

.text-center {
  text-align: center;
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.text-light {
  color: var(--white-70);
}

@media print {
  body {
    background-color: white;
  }

  a {
    text-decoration: underline;
  }
}

/* ===================================================
   19. FLUID CTA MODAL
   =================================================== */

.cta-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* height:100vh first as a fallback — 100dvh (dynamic viewport height)
     accounts for mobile browser toolbars showing/hiding, so the modal's
     bottom edge doesn't end up hidden behind them on phones. */
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-quick) var(--ease-smooth),
              visibility 0s linear var(--duration-quick);
}

.cta-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-quick) var(--ease-smooth);
}

.cta-modal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #004FE5;
  border-radius: 0;
  /* transform and border-radius are driven inline from JS (a FLIP animation
     from the exact clicked button's rect/shape to full-screen) — this just
     supplies the transition so those inline changes animate smoothly. */
  transition: transform 0.55s var(--ease-out), border-radius 0.55s var(--ease-out);
  will-change: transform;
}

.cta-modal-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cta-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out);
}

.cta-modal-close:hover {
  background-color: var(--white-10);
}

.cta-modal-scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cta-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  opacity: 0;
  transition: opacity var(--duration-standard) var(--ease-smooth) 0.15s;
}

.cta-modal-overlay.open .cta-modal-content {
  opacity: 1;
}

@media (min-width: 900px) {
  .cta-modal-content {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-3xl);
  }
}

.cta-modal-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cta-modal-info h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.cta-modal-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cta-modal-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.cta-modal-bullet-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--white-10);
  color: white;
}

.cta-modal-bullet p {
  color: white;
  line-height: 1.5;
}

.cta-modal-testimonial {
  padding-top: var(--space-lg);
  border-top: var(--border-width) solid var(--white-20);
}

.cta-modal-quote {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: white;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.cta-modal-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cta-modal-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--white-10);
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.cta-modal-author-name {
  color: white;
  font-weight: 600;
}

.cta-modal-author-role {
  color: var(--white-50);
  font-size: 14px;
}

.cta-modal-form-wrap {
  flex: 1;
}

.cta-modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cta-field-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 500px) {
  .cta-field-row {
    flex-direction: row;
  }

  .cta-field-size {
    width: 130px;
    flex-shrink: 0;
  }
}

.cta-field label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: white;
}

.cta-field input,
.cta-field select,
.cta-field textarea {
  width: 100%;
  padding: 10px var(--space-sm);
  border: none;
  border-radius: 8px;
  background-color: #001F63;
  color: white;
  font-family: var(--font-body);
  font-size: 14px;
  transition: box-shadow var(--duration-quick) var(--ease-out);
}

.cta-field textarea {
  resize: none;
}

.cta-field input::placeholder,
.cta-field textarea::placeholder {
  color: var(--white-50);
}

.cta-field input:focus,
.cta-field select:focus,
.cta-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--white-20);
}

.cta-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 1rem;
  cursor: pointer;
}

.cta-modal-submit {
  width: 100%;
  padding: 12px var(--space-lg);
  border: none;
  border-radius: var(--radius-pill);
  background-color: white;
  color: #0041C1;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out);
}

.cta-modal-submit:hover {
  background-color: var(--white-70);
}

.cta-modal-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.cta-modal-error {
  margin: 0 0 var(--space-sm);
  color: #FF8A70;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.cta-modal-error[hidden] {
  display: none;
}

body.cta-modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  /* iOS blurs whatever is painted directly beneath its keyboard/autofill
     bar. If that spot ever falls just outside the modal overlay's own
     dynamically-sized coverage, it should reveal on-brand navy, not the
     page's default white background. */
  background-color: var(--color-ink-navy);
}

/* ===================================================
   20. LEGAL PAGES
   =================================================== */

.legal-hero {
  padding: 160px var(--space-lg) var(--space-2xl);
  background-color: var(--color-paper-white);
}

.legal-hero h1 {
  max-width: 700px;
}

.legal-updated {
  color: var(--color-slate);
  font-size: var(--text-data);
  margin-top: var(--space-sm);
}

.legal-body {
  padding: 0 var(--space-lg) var(--space-4xl);
  background-color: var(--color-paper-white);
}

/* The wrapper itself spans the full container — only the actual reading
   elements are capped for legibility, so wider components (the step cards,
   the SLA table) can use the extra room instead of getting squeezed into a
   720px column. */
.legal-content > h2,
.legal-content > h3,
.legal-content > p,
.legal-content > ul,
.legal-content > ol,
.legal-content > .legal-callout {
  max-width: 720px;
}

.legal-content h2 {
  font-size: var(--text-h3);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--border-width) solid var(--border-color);
}

.legal-content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content h3 {
  font-size: 1.05rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.legal-content p,
.legal-content li {
  color: var(--color-slate);
}

.legal-content p {
  margin-bottom: var(--space-md);
}

.legal-content ul,
.legal-content ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.legal-content li {
  margin-bottom: var(--space-xs);
}

.legal-content strong {
  color: var(--color-ink-navy);
}

.legal-content a {
  color: var(--color-charge-blue);
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}

.legal-content th,
.legal-content td {
  text-align: left;
  padding: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-color);
  color: var(--color-slate);
}

.legal-content th {
  color: var(--color-ink-navy);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legal-callout {
  padding: var(--space-lg);
  background-color: var(--ink-05);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

/* Complaints process steps */
.legal-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-2xl);
}

.legal-step {
  padding: var(--space-lg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
}

.legal-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-charge-blue);
  color: white;
  font-family: var(--font-mono);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.legal-step h3 {
  font-size: 1rem;
  margin: 0 0 var(--space-xs);
}

.legal-step p {
  font-size: var(--text-data);
  margin-bottom: 0;
}

/* Complaints form */
.legal-form {
  margin-top: var(--space-xl);
}

.legal-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--border-width) solid var(--border-color);
}

.legal-fieldset:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-fieldset legend {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-ink-navy);
  margin-bottom: var(--space-lg);
  padding: 0;
}

.legal-field {
  margin-bottom: var(--space-lg);
}

.legal-field label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--color-ink-navy);
}

.legal-field-hint {
  font-size: var(--text-data);
  color: var(--color-slate);
  margin-bottom: var(--space-sm);
}

.legal-field input[type="text"],
.legal-field input[type="email"],
.legal-field input[type="tel"],
.legal-field input[type="date"],
.legal-field select,
.legal-field textarea {
  width: 100%;
  padding: 12px var(--space-sm);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius);
  background-color: white;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink-navy);
  transition: border-color var(--duration-quick) var(--ease-out),
              box-shadow var(--duration-quick) var(--ease-out);
}

.legal-field textarea {
  resize: vertical;
}

.legal-field input:focus,
.legal-field select:focus,
.legal-field textarea:focus {
  outline: none;
  border-color: var(--color-charge-blue);
  box-shadow: 0 0 0 3px rgba(46, 125, 255, 0.15);
}

.legal-radio-group {
  display: flex;
  gap: var(--space-lg);
}

.legal-radio-group label,
.legal-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-weight: normal;
  color: var(--color-slate);
  cursor: pointer;
}

.legal-radio-group input,
.legal-checkbox input {
  flex-shrink: 0;
  margin-top: 3px;
}

.legal-checkbox {
  margin-bottom: var(--space-md);
}

.legal-form-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.legal-form-success,
.legal-form-error {
  display: none;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius);
}

.legal-form-success.is-visible,
.legal-form-error.is-visible {
  display: block;
}

.legal-form-success h3,
.legal-form-error h3 {
  margin: 0 0 var(--space-sm);
}

.legal-form-success p,
.legal-form-error p {
  margin-bottom: var(--space-xs);
}

.legal-form-success {
  background-color: rgba(31, 166, 102, 0.08);
}

.legal-form-success h3 {
  color: var(--color-savings-green);
}

.legal-form-error {
  background-color: rgba(214, 69, 69, 0.08);
}

.legal-form-error h3 {
  color: #C0392B;
}

@media (max-width: 900px) {
  .legal-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .legal-steps {
    grid-template-columns: 1fr;
  }

  .legal-radio-group {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .legal-form-actions {
    flex-direction: column;
  }
}