/* ============================================
   EMS Metrics — Website Stylesheet (v3)
   ============================================ */

/* ---------- Fonts (self-hosted IBM Plex Sans, SIL OFL, see assets/fonts/OFL.txt) ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }

/* ---------- CSS Custom Properties ---------- */
:root {
  /* ===== Brand: Green & Slate (anchored on logo-deep green #0A8A3C) ===== */
  --primary: #08803A;        /* brand green, darkened from logo #0A8A3C to pass WCAG AA (5.05:1 on white) */
  --primary-dark: #086E30;   /* pressed / deep green */
  --accent-light: #4ADE80;   /* small details on dark backgrounds only */
  --accent-on-dark: #34C368; /* accent headings on dark surfaces (5.9:1 on #14342a) */

  --gradient-brand: var(--primary);   /* flat: kept as a name so fills stay consistent */
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --gradient-hero: linear-gradient(160deg, #0f172a 0%, #14342a 50%, #0f172a 100%);
  --gradient-cta: var(--primary-dark);

  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);   /* quick start, long soft landing */

  --container-max: 1200px;
  --nav-height: 80px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
ul, ol { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin-bottom: 1rem; }

.text-accent { color: var(--primary); }
.hero .text-accent,
.page-hero .text-accent,
.article-hero .text-accent,
.cta .text-accent { color: var(--accent-on-dark); }

/* Wrap quality: no stranded words, no lopsided headings */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.section { padding: 6rem 0; }
.section--gray { background: var(--gray-50); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 1000;
  transition: all var(--transition-base);
}

.nav--transparent { background: transparent; }

.nav--solid {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  z-index: 1002;
  flex-shrink: 0;
}

.nav__logo img { height: 36px; width: auto; display: block; }

/* Scroll-aware logo swap: light wordmark on the dark hero,
   dark wordmark once the nav turns solid white on scroll. */
.nav__logo .nav__logo--dark { display: none; }
.nav--solid .nav__logo .nav__logo--light { display: none; }
.nav--solid .nav__logo .nav__logo--dark { display: block; }
/* While the mobile overlay menu is open: keep the light logo, and drop backdrop-filter —
   it makes .nav the containing block for the fixed-position overlay, clipping it to 80px. */
.nav--menu-open .nav__logo .nav__logo--dark { display: none !important; }
.nav--menu-open .nav__logo .nav__logo--light { display: block !important; }
.nav--menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.nav__logo-text {
  display: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: color var(--transition-fast);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.nav__link:hover::after, .nav__link--active::after { width: 100%; }
.nav__link:hover { color: var(--white); }
.nav--solid .nav__link { color: var(--gray-600); }
.nav--solid .nav__link:hover, .nav--solid .nav__link--active { color: var(--primary); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: var(--gradient-brand);
  color: var(--white) !important;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.nav__cta:hover { background: var(--primary-dark); }

/* ---------- FireTower dropdown (module links generated by .src/sync_modules.py) ----------
   Opens on hover with a mouse, and on the chevron button for keyboard and touch. */
.nav__item--menu { position: relative; display: flex; align-items: center; gap: 0.25rem; }
.nav__menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: -0.375rem; padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.8); cursor: pointer;
}
.nav__menu-toggle svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.nav--solid .nav__menu-toggle { color: var(--gray-600); }
.nav__menu {
  list-style: none; margin: 0;
  position: absolute; top: calc(100% + 12px); left: 50%;
  min-width: 260px; padding: 0.5rem;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
/* Bridges the gap so the pointer can move from the link to the panel without it closing */
.nav__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item--open .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__item--open .nav__menu-toggle svg { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 1025px) {
  .nav__item--menu:hover .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav__item--menu:hover .nav__menu-toggle svg { transform: rotate(180deg); }
}
.nav__menu-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: var(--radius-md);
  font-size: 0.9375rem; font-weight: 500; color: var(--gray-700); white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav__menu-link:hover, .nav__menu-link[aria-current="page"] { background: var(--gray-50); color: var(--primary); }
.nav__menu-icon { display: inline-flex; color: var(--primary); }
.nav__menu-icon svg { width: 18px; height: 18px; }
.nav .nav__menu :focus-visible { outline-color: var(--primary); }

@media (max-width: 1024px) {
  .nav__links { overflow-y: auto; justify-content: safe center; }
  .nav__item--menu { flex-wrap: wrap; justify-content: center; }
  .nav__links--open .nav__menu-toggle { width: 32px; height: 32px; color: rgba(255,255,255,0.85); }
  .nav__menu-toggle svg { width: 20px; height: 20px; }
  .nav__menu {
    position: static; display: none; flex-basis: 100%;
    min-width: 0; padding: 0; background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__menu::before { content: none; }
  .nav__item--open .nav__menu { display: grid; gap: 0.125rem; margin-top: 0.75rem; transform: none; }
  .nav__menu-link { justify-content: center; padding: 0.375rem 0.75rem; font-size: 1rem; color: rgba(255,255,255,0.75); }
  .nav__menu-link:hover, .nav__menu-link[aria-current="page"] { background: none; color: var(--white); }
  .nav__menu-icon { color: var(--accent-on-dark); }
  .nav .nav__menu :focus-visible { outline-color: var(--accent-light); }
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}

.nav__toggle span {
  display: block;
  width: 26px; height: 3px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.nav--solid .nav__toggle span { background: var(--gray-900); }

/* When menu is open, always show white bars (over dark overlay) */
.nav__toggle--open span { background: var(--white) !important; }

.nav__toggle--open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav__toggle--open span:nth-child(2) { opacity: 0; }
.nav__toggle--open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 1024px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: all var(--transition-base);
  }

  .nav__links--open {
    opacity: 1;
    visibility: visible;
  }

  .nav__links--open .nav__link {
    color: rgba(255,255,255,0.85);
    font-size: 1.375rem;
    font-weight: 600;
  }

  .nav__links--open .nav__link:hover,
  .nav__links--open .nav__link--active {
    color: var(--white);
  }

  .nav__links--open .nav__cta {
    margin-top: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--gradient-brand);
  color: var(--white);
}

.btn--primary:hover { background: var(--primary-dark); }

.btn--secondary {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn--outline:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--white {
  background: var(--white);
  color: var(--primary);
}

.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.btn--lg { padding: 1rem 2.5rem; font-size: 1.125rem; }

.btn-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn svg { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  padding-bottom: 4rem;
  background: var(--gradient-hero);
  background-color: var(--gray-900);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

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

.hero__content {
  position: relative;
  z-index: 1;
}

.hero__title {
  color: var(--white);
  margin-bottom: 1.5rem;
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  line-height: 1.1;
}

.hero__subtitle {
  color: var(--gray-400);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 560px;
}

.hero__stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.hero__stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.hero__stat-label {
  font-size: 0.875rem;
  color: var(--gray-400);
}

@media (max-width: 480px) {
  .hero__stats { gap: 1.5rem; flex-wrap: wrap; }
}


/* ---------- Section Headers ---------- */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.section-header__title { margin-bottom: 1rem; }

.section-header__desc {
  color: var(--gray-500);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ---------- Feature Cards ---------- */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 992px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features__grid { grid-template-columns: 1fr; } }
/* Two cards: a centered pair instead of a three-column row with an empty slot */
.features__grid:has(> .feature-card:nth-child(2)):not(:has(> .feature-card:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
@media (max-width: 600px) { .features__grid:has(> .feature-card:nth-child(2)):not(:has(> .feature-card:nth-child(3))) { grid-template-columns: 1fr; } }

.feature-card {
  position: relative;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.feature-card__icon { display: inline-flex; flex-shrink: 0; color: var(--primary); }

.feature-card__icon svg { width: 22px; height: 22px; }

.feature-card__title { margin-bottom: 0.5rem; font-size: 1.125rem; }
.feature-card__title:has(.feature-card__icon) { display: flex; align-items: center; gap: 0.625rem; }

.feature-card__desc {
  color: var(--gray-500);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.feature-card__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.feature-card:hover .feature-card__link svg { transform: translateX(4px); }

.btn--secondary-dark {
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}

/* ---------- By the numbers (home, FireTower, Dispatch, Rig Checks) ---------- */
.proof { padding: 3.5rem 0; background: var(--gradient-dark); background-color: var(--gray-900); }
.proof__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 6rem; }
.proof__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.proof__num { font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent-on-dark); }
.proof__label { margin-top: 0.625rem; font-size: 1.0625rem; color: var(--gray-300); }

/* ---------- CTA Section ---------- */
.cta {
  padding: 6rem 0;
  background: var(--gradient-hero);
  background-color: var(--gray-900);
  position: relative;
  overflow: hidden;
}

.cta__content {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta__title { color: var(--white); margin-bottom: 1rem; }
.cta__desc { color: var(--gray-400); font-size: 1.125rem; margin-bottom: 2rem; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Two-column variant (per-product pricing) */
.pricing__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .pricing__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .pricing__grid { grid-template-columns: 1fr; max-width: 420px; }
  .pricing__grid--two { grid-template-columns: 1fr; max-width: 420px; }
}

/* Product section headers on pricing page */
.product-head {
  max-width: 760px;
  margin: 0 auto 2rem;
  text-align: center;
}

.product-head--cad { margin-top: 4.5rem; }

.product-head__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 0.75rem; }

.product-head__desc {
  color: var(--gray-500);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- Price calculator ---------- */
.calc { margin: 4rem 0 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.calc__head { padding: 2.5rem 2.5rem 1.5rem; text-align: center; }
.calc__title { margin: 0.25rem 0 0.75rem; }
.calc__desc { color: var(--gray-600); max-width: 640px; margin: 0 auto; }
.calc__body { display: grid; grid-template-columns: 1.2fr 1fr; }
.calc__controls { padding: 1.5rem 2.5rem 2.5rem; display: grid; gap: 1.5rem; }
.calc__field label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem; }
.calc__field label span { color: var(--primary); font-variant-numeric: tabular-nums; }
.calc__field input[type=range] { width: 100%; accent-color: var(--primary); }
.calc__result { background: var(--gradient-hero); color: var(--white); padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.calc__amount { font-size: 3.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.calc__per { font-size: 1.125rem; font-weight: 500; color: var(--gray-400); margin-left: 0.25rem; }
.calc__breakdown { color: var(--gray-300); font-size: 0.9375rem; }
.calc__annual { color: var(--gray-400); font-size: 0.875rem; margin-bottom: 1rem; }
.calc__result .btn { align-self: flex-start; }
@media (max-width: 768px) { .calc__body { grid-template-columns: 1fr; } .calc__head, .calc__controls, .calc__result { padding: 1.5rem; } }

/* ---------- Mission band (pricing) ---------- */
.mission-band {
  padding: 2.5rem 0 0;
}

.mission-band__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  background: #f3f8f5;
  border: 1px solid rgba(8,128,58,0.2);
  border-radius: var(--radius-lg);
}

.mission-band__title { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: 0.75rem; }
.mission-band__text { color: var(--gray-600); font-size: 1rem; line-height: 1.7; margin-bottom: 0; max-width: 62ch; }

@media (max-width: 600px) {
  .mission-band__inner { flex-direction: column; gap: 1rem; padding: 1.5rem; }
}
/* Wide screens: heading left, text right, so the box is filled instead of leaving the
   right third empty beside a reading-width column */
.mission-band__inner > div { flex: 1; min-width: 0; }
@media (min-width: 900px) {
  .mission-band__inner > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2.5rem; align-items: start; }
  .mission-band__inner > div > * { grid-column: 2; }
  .mission-band__inner > div > .mission-band__title { grid-column: 1; grid-row: 1 / span 6; margin-bottom: 0; }
}

.pricing-card {
  padding: 2.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
}

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

.pricing-card__name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.375rem; }

.pricing-card__audience {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.625rem;
  min-height: 2.4em;
  line-height: 1.3;
}

.pricing-card__desc { color: var(--gray-500); font-size: 0.875rem; margin-bottom: 1.5rem; }

.pricing-card__includes {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 0.875rem;
}

.pricing-card__price { margin-bottom: 1.5rem; }
.pricing-card__amount { font-size: 3rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
.pricing-card__amount--xs { font-size: 1.375rem; line-height: 1.3; display: inline-block; padding: 0.35rem 0; }
.pricing-card__period { font-size: 0.875rem; color: var(--gray-500); }

.pricing-card__divider { border: none; border-top: 1px solid var(--gray-200); margin: 1.5rem 0; }

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
}

.pricing-card__feature > span { flex: 1; min-width: 0; }
.pricing-card__feature strong { color: var(--gray-900); }

.pricing-card__check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--success);
  margin-top: 1px;
}

.pricing-card .btn { width: 100%; margin-top: auto; }

/* Pricing extras / scaling info */
.pricing-card__scaling {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}

.pricing-card__scaling-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.pricing-card__scaling-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gray-400);
}

/* ---------- Solutions Feature Blocks ---------- */
.feature-block { padding: 6rem 0; }
.feature-block:nth-child(even) { background: var(--gray-50); }

.feature-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.feature-block:nth-child(even) .feature-block__inner { direction: rtl; }
.feature-block:nth-child(even) .feature-block__inner > * { direction: ltr; }

@media (max-width: 768px) {
  .feature-block__inner { grid-template-columns: 1fr; }
  .feature-block:nth-child(even) .feature-block__inner { direction: ltr; }
}

.feature-block__title { margin-bottom: 1rem; }

.feature-block__desc {
  color: var(--gray-500);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.feature-block__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.feature-block__list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--gray-600);
}

.feature-block__list-item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--success);
}

/* ---------- Page Hero (sub-pages) ---------- */
.page-hero {
  padding-top: 10rem;   /* nav height (5rem) + 5rem */
  padding-bottom: 4rem;
  background: var(--gradient-hero);
  background-color: var(--gray-900);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero h1 { color: var(--white); margin-bottom: 1rem; position: relative; }
.page-hero p { color: var(--gray-400); font-size: 1.25rem; max-width: 560px; margin: 0 auto; position: relative; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
}

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

.contact-info__title { margin-bottom: 1rem; }
.contact-info__desc { color: var(--gray-500); font-size: 1.0625rem; margin-bottom: 2.5rem; }

.contact-info__items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-info__icon { display: inline-flex; flex-shrink: 0; color: var(--primary); padding-top: 0.125rem; }

.contact-info__icon svg { width: 20px; height: 20px; }

.contact-info__label {
  font-size: 0.8125rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.contact-info__value { font-size: 1rem; color: var(--gray-700); font-weight: 500; }
.contact-info__value a { color: var(--primary); }
.contact-info__value a:hover { text-decoration: underline; }

.contact-form {
  padding: 2.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-700);
  background: var(--white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,138,60,0.12);
}

.form-control::placeholder { color: var(--gray-500); }

textarea.form-control { min-height: 120px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

/* Honeypot field — off-screen for humans, still in the DOM for bots */
.form-group--hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-privacy { margin-top: 1rem; font-size: 0.8125rem; color: var(--gray-500); line-height: 1.5; }
.form-privacy a { color: var(--primary); text-decoration: underline; }
.form-hint { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--gray-500); }
.form-status { margin-top: 1rem; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md); }
.form-status[hidden] { display: none; }
.grecaptcha-badge { z-index: 999; }

/* "What happens next" steps on the contact page */
.next-steps { margin-top: 2.5rem; display: grid; gap: 1rem; }
.next-step { display: flex; gap: 1rem; align-items: flex-start; }
.next-step__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-brand); color: var(--white); font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; }
.next-step__title { font-weight: 600; color: var(--gray-900); margin-bottom: 0.125rem; }
.next-step__desc { font-size: 0.9375rem; color: var(--gray-600); margin: 0; }

select.form-control {
  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='%2394a3b8' 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 1rem center;
  padding-right: 2.5rem;
}

/* ---------- FAQ Accordion ---------- */
.faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq__item:hover { border-color: var(--gray-300); }

.faq__question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq__question svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform var(--transition-base);
}

.faq__item--open .faq__question svg { transform: rotate(180deg); }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq__answer > .faq__answer-inner { min-height: 0; overflow: hidden; }

.faq__item--open .faq__answer { grid-template-rows: 1fr; }

.faq__answer-inner {
  padding: 0 1.5rem 1.25rem;
  color: var(--gray-500);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ---------- Thank You ---------- */
.thankyou {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero);
  text-align: center;
  padding: 8rem 2rem 4rem;   /* nav height (5rem) + 3rem */
}

.thankyou__icon {
  width: 80px; height: 80px;
  margin: 0 auto 1.5rem;
  background: rgba(16,185,129,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
}

.thankyou__icon svg { width: 40px; height: 40px; }
.thankyou h1 { color: var(--white); margin-bottom: 1rem; }
.thankyou p { color: var(--gray-400); font-size: 1.125rem; max-width: 480px; margin: 0 auto 1.5rem; }

.thankyou__meta { font-size: 1rem !important; }
.thankyou__meta a { color: var(--accent-light); text-decoration: underline; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.legal p, .legal li { color: var(--gray-600); line-height: 1.8; }
.legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
/* Inline links in section intros and FAQ answers read as links, not body text */
.section-header__desc a, .faq__answer-inner a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--primary-dark); }
.legal strong { color: var(--gray-800); }
.legal h2 { scroll-margin-top: 100px; }
.resource-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* text, then a compact button */
  gap: 2rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow-md);
}
.resource-band__title { margin: 0.25rem 0 0.5rem; }
.resource-band__desc { color: var(--gray-600); margin: 0; max-width: 62ch; }
/* A text-and-button band is as wide as the mission band, so its text column fills it */
.resource-band:not(.resource-band--cover) { max-width: 880px; margin-inline: auto; }
@media (max-width: 768px) { .resource-band { grid-template-columns: 1fr; text-align: left; } }

/* ---------- Footer ---------- */
.footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: 5rem 0 1.5rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand-desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 300px;
}

.footer__heading {
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer__link {
  font-size: 0.9375rem;
  color: var(--gray-400);
  transition: color var(--transition-fast);
}

.footer__link:hover { color: var(--white); }

.footer__bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

@media (max-width: 600px) {
  .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.footer__social a:hover {
  background: var(--primary);
  color: var(--white);
}

.footer__social a svg { width: 18px; height: 18px; }

/* ---------- Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

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

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* ---------- Article / Blog ---------- */
.container--narrow { max-width: 720px; }

.article-hero {
  padding-top: 9rem;   /* nav height (5rem) + 4rem */
  padding-bottom: 2.5rem;
  background-color: var(--gray-900);
  background-image: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-400);
  margin-bottom: 1.25rem;
  position: relative;
}

.article-hero__crumb { color: var(--accent-light); font-weight: 600; }

.article-hero__title {
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  position: relative;
}

.article-hero__sub {
  color: var(--gray-400);
  font-size: 1.1875rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  position: relative;
}

.article-hero__byline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--gray-400);
  position: relative;
}

.article-hero__dot { color: var(--gray-600); }

.article { padding: 3rem 0 5rem; }

.article__lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 1.5rem;
}

.article p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--gray-600);
  margin-bottom: 1.25rem;
}

.article h2 {
  font-size: 1.625rem;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  scroll-margin-top: 100px;
}

.article h3 {
  font-size: 1.1875rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--gray-900);
}

.article__list {
  margin: 0 0 1.5rem;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.article__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gray-600);
}

.article__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 7px; height: 7px;
  background: var(--primary);
  border-radius: 50%;
}

.article__list strong { color: var(--gray-900); }

.article__check {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.article__check li {
  position: relative;
  padding-left: 1.875rem;
  font-size: 0.9875rem;
  line-height: 1.5;
  color: var(--gray-700);
}

.article__check li::before {
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 18px; height: 18px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.article__close {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.0625rem;
}

.article a { color: var(--primary); font-weight: 600; }
/* Keep the dark in-article CTA readable despite the generic article typography rules above */
.article .article-cta__title { color: var(--white); }
.article .article-cta__desc { color: var(--gray-400); }
.article .btn--primary, .article .btn--primary:hover { color: var(--white); }
.article .btn--secondary, .article .btn--secondary:hover { color: var(--white); }
.article a:hover { color: var(--primary-dark); }

/* Table of contents */
.article-toc {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.article-toc__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.875rem;
}

.article-toc__list {
  list-style: none;
  counter-reset: toc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.5rem;
}

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

.article-toc__list li { counter-increment: toc; }

.article-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: color var(--transition-fast);
}

.article-toc__list a::before {
  content: counter(toc);
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(10,138,60,0.1), rgba(32,176,80,0.1));
  color: var(--primary);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  align-self: center;
}

.article-toc__list a:hover { color: var(--primary); }

/* Numbered H2 with kicker */
.article__h2 { position: relative; }

.article__star { color: var(--warning); font-weight: 700; }

/* Checklist cards */
.checkcard {
  margin: 0 0 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.checkcard__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.checkcard__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.9375rem;
  font-weight: 800;
}

.checkcard__title { margin: 0; font-size: 1.0625rem; }

.checkcard .article__check {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--white);
  padding: 1.25rem 1.5rem;
}

.checkcard--accent .checkcard__head {
  background: linear-gradient(135deg, rgba(10,138,60,0.08), rgba(32,176,80,0.08));
}

/* Pull-quote */
.article-quote {
  margin: 2.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--gray-800);
}

.article-quote em { color: var(--primary); font-style: italic; }

/* In-article CTA */
.article-cta {
  text-align: center;
  padding: 2.5rem 2rem;
  margin: 3rem 0;
  background: var(--gradient-dark);
  background-color: var(--gray-900);
  border-radius: var(--radius-xl);
}

.article-cta__title { color: var(--white); font-size: 1.5rem; margin-bottom: 0.75rem; }
.article-cta__desc {
  color: var(--gray-400);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

/* Article FAQ */
.article-faq { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.article-faq__item {
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.article-faq__item h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--gray-900); }
.article-faq__item p { margin: 0; font-size: 0.9875rem; }

/* ---------- Home: pricing-at-a-glance band ---------- */
.mission-band--home { padding: 4.5rem 0; background: var(--white); }
/* Straight after a white section, the section's own bottom padding is the gap. */
.section:not(.section--gray) + .mission-band--home { padding-top: 0; }
.mission-band--home .mission-band__inner { max-width: 960px; }
.mission-band__plans { display: grid; gap: 0.5rem; margin: 1rem 0 0.75rem; }
.mission-band__plans li { position: relative; padding-left: 1.375rem; color: var(--gray-700); font-size: 1rem; line-height: 1.6; }
.mission-band__plans li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.mission-band__plans strong { color: var(--gray-900); }
.mission-band__fine { color: var(--gray-600); font-size: 0.9375rem; line-height: 1.6; margin: 0 0 1rem; max-width: 62ch; }
.mission-band__link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 600; color: var(--primary); }
.mission-band__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.mission-band__link:hover svg { transform: translateX(3px); }
.hero__stat-unit { font-size: 1rem; font-weight: 600; color: var(--gray-400); margin-left: 0.2rem; }
.hero .hero__title { font-size: clamp(2.5rem, 4vw, 3.375rem); }
@media (min-width: 1025px) and (max-width: 1200px) { .nav__links { gap: 1.5rem; } }
.nav__link, .nav__cta { white-space: nowrap; }
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 960px; margin: 0 auto; }
@media (max-width: 768px) { .team { grid-template-columns: 1fr; } }
.team__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.team__name { font-size: 1.25rem; margin: 0 0 0.125rem; }
.team__role { font-size: 0.8125rem; font-weight: 600; color: var(--primary); }
.team__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--gray-600); transition: color var(--transition-fast); }
.team__link svg { width: 16px; height: 16px; }
.team__link:hover { color: var(--primary); }

/* ---------- Print: the rig check guide is meant to be printed ---------- */
@media print {
  .reveal, .reveal--visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav, .footer, .cta, .article-cta, .article-toc, .btn { display: none !important; }
  .article-hero { background: none !important; padding-top: 1rem !important; }
  .article-hero__title, .article-hero__sub { color: #000 !important; }
  .checkcard { break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* ============================================
   Polish & micro-interactions
   Subtle motion layered over the existing design. Nothing here
   changes layout, color, or type — only how things arrive and
   respond. All of it is switched off under prefers-reduced-motion
   (see the very end of this file).
   ============================================ */

/* ---------- Shared keyframes ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes check-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Hero entrance (home) ----------
   Content settles in top-to-bottom. */
.hero__title,
.hero__subtitle,
.hero__content .btn-group,
.hero__stats {
  animation: rise-in 0.8s var(--ease-out-expo) both;
}

.hero__title              { animation-delay: 0.15s; }
.hero__subtitle           { animation-delay: 0.25s; }
.hero__content .btn-group { animation-delay: 0.35s; }
.hero__stats              { animation-delay: 0.45s; }

/* Sub-page heroes (Solutions, Contact, Privacy, Terms) */
.page-hero h1 { animation: rise-in 0.8s var(--ease-out-expo) 0.05s both; }
.page-hero p  { animation: rise-in 0.8s var(--ease-out-expo) 0.18s both; }

/* Thank-you page: checkmark pops, then copy and button follow.
   The button fades only (no transform) so its hover lift still works. */
.thankyou__icon { animation: check-pop 0.6s var(--ease-out-expo) 0.1s both; }
.thankyou h1    { animation: rise-in 0.8s var(--ease-out-expo) 0.25s both; }
.thankyou p     { animation: rise-in 0.8s var(--ease-out-expo) 0.35s both; }
.thankyou .btn  { animation: fade-in 0.6s ease 0.5s both; }

/* Footer links nudge right */
.footer__link { transition: color var(--transition-fast), transform var(--transition-fast); }
.footer__link:hover { transform: translateX(3px); }

/* Form fields acknowledge the pointer before focus */
.form-control:hover:not(:focus) { border-color: var(--gray-400); }

/* ---------- Buttons: tactile press ---------- */
.btn:active,
.nav__cta:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

/* ---------- Keyboard focus: one consistent brand ring ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

                                   
.hero :focus-visible,
.page-hero :focus-visible,
.cta :focus-visible,
.footer :focus-visible,
.thankyou :focus-visible,
.calc__result :focus-visible,
.nav--transparent :focus-visible,
.nav__links--open :focus-visible {
  outline-color: var(--accent-light);
}

/* ---------- FAQ: answer fades in with the expand ---------- */
.faq__answer-inner {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.faq__item--open .faq__answer-inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 60ms;
}
.faq__item--open { border-color: rgba(10,138,60,0.35); }
.faq__item--open .faq__question svg { color: var(--primary); }

/* ---------- Mobile menu: links settle in one after another ---------- */
@media (max-width: 1024px) {
  .nav__links .nav__link,
  .nav__links .nav__item--menu,
  .nav__links .nav__cta {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo), color var(--transition-fast);
  }
  .nav__links--open .nav__link,
  .nav__links--open .nav__item--menu,
  .nav__links--open .nav__cta { opacity: 1; transform: translateY(0); }
  .nav__links .nav__item--menu .nav__link { opacity: 1; transform: none; }
  .nav__links--open > :nth-child(1) { transition-delay: 60ms; }
  .nav__links--open > :nth-child(2) { transition-delay: 100ms; }
  .nav__links--open > :nth-child(3) { transition-delay: 140ms; }
  .nav__links--open > :nth-child(4) { transition-delay: 180ms; }
  .nav__links--open > :nth-child(5) { transition-delay: 220ms; }
  .nav__links--open > :nth-child(6) { transition-delay: 260ms; }
  .nav__links--open > :nth-child(7) { transition-delay: 300ms; }
}

                                                   

                                                                      
.hero__stat-number,
.calc__amount,
.pricing-card__amount { font-variant-numeric: tabular-nums; }

/* Branded text selection */
::selection { background: rgba(10,138,60,0.22); }

/* ---------- Reduced motion: final states, no movement ----------
   Covers everything above plus the earlier reveal/float/pulse effects. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* Fewer-card grid variants (coming-soon items removed) */
.pricing__grid--one { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

/* Founder photos (About, Contact). One CSS treatment unifies two different source photos. */
.team__photo { flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary); }
.team__photo--sm { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--primary); }

/* Contact: who you'll talk to */
.talk-to { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; margin: -1rem 0 2rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 1rem; }
.talk-to__photos { display: flex; flex-shrink: 0; }
.talk-to__photos .team__photo + .team__photo { margin-left: -12px; }
.talk-to__title { font-weight: 600; color: var(--gray-900); margin-bottom: 0.125rem; }
.talk-to__desc { font-size: 0.9375rem; color: var(--gray-600); margin: 0; }
@media (max-width: 480px) { .talk-to { flex-direction: column; align-items: flex-start; } }

.article__figure { margin: 0 0 2.5rem; }
.article__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Long-form reading width */
/* 62ch in IBM Plex Sans is about 75 characters per line */
.legal p, .legal li, .article p, .section-header__desc, .feature-block__desc, .page-hero p, .mission-band__plans li { max-width: 62ch; }
.section-header .section-header__desc, .page-hero p { margin-left: auto; margin-right: auto; }

/* ---------- Home: what a rig check records ----------
   State is driven by .reveal--visible on the section ([data-reveal-state] in main.js). */
.record__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
.record__figure { position: relative; }
.record__figure img { display: block; width: 100%; height: auto; }
.record__marker,
.record__num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; color: var(--white); background: var(--gray-500);
  transition: background-color 0.35s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 120ms);
}
.record__marker { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--white); }
.record__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.record__item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 0.875rem; align-items: start;
  padding: 0.875rem 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white);
  transition: border-color 0.35s var(--ease-out-expo); transition-delay: calc(var(--i) * 120ms);
}
.record__num--icon svg { width: 14px; height: 14px; }
/* Sign-off covers the whole check, so it has no marker on the drawing and sits apart from the numbered rows */
.record__item--signoff { margin-top: 0.5rem; }
.record__label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--gray-500); }
.record__value { display: block; color: var(--gray-900); font-weight: 500; line-height: 1.5; }
.record__check {
  width: 20px; height: 20px; margin-top: 0.25rem; color: var(--primary); opacity: 0; transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out-expo); transition-delay: calc(var(--i) * 120ms + 80ms);
}
.record.reveal--visible .record__marker,
.record.reveal--visible .record__num { background: var(--primary); }
.record.reveal--visible .record__item { border-color: rgba(8,128,58,0.35); }
.record.reveal--visible .record__check { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .record .record__marker, .record .record__num { background: var(--primary); transition: none; }
  .record .record__item { border-color: rgba(8,128,58,0.35); transition: none; }
  .record .record__check { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .record__inner { grid-template-columns: 1fr; gap: 2rem; }
  .record__figure { max-width: 520px; width: 100%; margin: 0 auto; }
}

/* ---------- Home: from demo to first checks ---------- */
.golive { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.golive__num {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  background: var(--primary); color: var(--white); font-weight: 700; font-size: 0.875rem;
  box-shadow: 0 0 0 6px var(--white);   /* ring matches the white section behind the hairline */
}
.golive__title { font-size: 1.0625rem; margin-bottom: 0.375rem; }
.golive__desc { color: var(--gray-600); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
@media (min-width: 993px) {
  /* hairline from the first number to the last */
  .golive::before { content: ''; position: absolute; top: 16px; left: 16px; right: calc((100% - 6rem) / 4 - 16px); height: 1px; background: var(--gray-300); }
}
@media (max-width: 992px) {
  .golive { grid-template-columns: 1fr; gap: 1.25rem; max-width: 560px; margin: 0 auto; }
  .golive__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 1rem; }
  .golive__num { grid-row: span 2; margin: 0; }
  .golive__title { margin-top: 0.25rem; }
}

/* ---------- Checklist cover: home resource band and blog download card ---------- */
.resource-band--cover { grid-template-columns: 150px minmax(0, 1fr) auto; }
.resource-band__cover,
.download-card__cover {
  display: block; transform: rotate(-2deg); overflow: hidden; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.resource-band__cover img { display: block; width: 100%; height: auto; }
.resource-band__actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (max-width: 992px) {
  .resource-band--cover { grid-template-columns: 120px minmax(0, 1fr); }
  .resource-band--cover .resource-band__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .resource-band--cover { grid-template-columns: 1fr; }
  .resource-band__cover { width: 140px; }
}
.download-card {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.75rem; align-items: center;
  margin: 0 0 2.5rem; padding: 1.5rem; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--gray-50);
}
.download-card__cover { width: 100%; height: auto; }
/* .download-card prefix: outranks .article p inside the blog post */
.download-card .download-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: var(--gray-900); margin: 0 0 0.375rem; }
.download-card .download-card__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-600); margin: 0 0 1rem; }
/* The button may wrap: with white-space: nowrap its width would set the column's minimum and overflow the card */
.download-card .btn { white-space: normal; max-width: 100%; text-align: center; }
@media (max-width: 640px) {
  .download-card { grid-template-columns: minmax(0, 1fr); }
  .download-card__cover { max-width: 180px; }
}

/* ---------- Module pages: drawings beside each capability ---------- */
.spot-art { margin: 0; padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--gray-50); border-radius: var(--radius-lg); }
.feature-block:nth-child(even) .spot-art { background: var(--white); border: 1px solid var(--gray-200); }
.spot-art img { display: block; width: 100%; height: auto; }

/* ---------- About: timeline ---------- */
.timeline-band { padding: 3.5rem 0; background: var(--gradient-dark); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.timeline__item { padding-top: 1rem; border-top: 2px solid rgba(52,195,104,0.5); }
.timeline__year { display: block; margin-bottom: 0.375rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--accent-on-dark); }
.timeline__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--gray-300); }
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .timeline { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- FireTower modules (cards rendered by .src/sync_modules.py) ---------- */
.features__grid--modules { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Four cards go 4 → 2×2 → 1, never 3 + 1 with a card left alone on its row */
.features__grid--modules:has(> .feature-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .features__grid--modules:has(> .feature-card:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .features__grid--modules:has(> .feature-card:nth-child(4)) { grid-template-columns: minmax(0, 1fr); } }
/* Three cards ("Other FireTower modules" on a module page) fill the row: no empty fourth slot, no 2 + 1 */
.features__grid--modules:has(> .feature-card:nth-child(3)):not(:has(> .feature-card:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 819px) { .features__grid--modules:has(> .feature-card:nth-child(3)):not(:has(> .feature-card:nth-child(4))) { grid-template-columns: minmax(0, 1fr); } }
/* Five cards go 3 + 2 → 2 + 2 + 1 → 1, the short row centered */
.features__grid--modules:has(> .feature-card:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card { grid-column: span 2; }
.features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card:nth-child(4) { grid-column: 2 / span 2; }
.features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1099px) {
  .features__grid--modules:has(> .feature-card:nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card:nth-child(4) { grid-column: span 2; }
  .features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 559px) {
  .features__grid--modules:has(> .feature-card:nth-child(5)) { grid-template-columns: minmax(0, 1fr); }
  .features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card,
  .features__grid--modules:has(> .feature-card:nth-child(5)) > .feature-card:nth-child(n) { grid-column: auto; }
}
/* Plan line and link sit at the bottom of every card, whatever the summary length */
.features__grid--modules .feature-card { display: flex; flex-direction: column; align-items: flex-start; }
/* Subgrid lines up art, title, summary, plan and link across a row of cards, so a
   two-line title ("Inventory & Purchasing") doesn't push its own summary down */
@supports (grid-template-rows: subgrid) {
  .features__grid--modules .feature-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; justify-items: start; }
  .features__grid--modules .feature-card__art { justify-self: stretch; }
}
.feature-card__plan { margin: auto 0 0; padding-top: 0.875rem; font-size: 0.8125rem; font-weight: 600; color: var(--gray-600); }
.feature-card__plan + .feature-card__link { margin-top: 0.5rem; }
/* Old solutions.html#... links land on these after the 301; keep the card clear of the fixed nav */
.feature-card[id], .anchor-alias { scroll-margin-top: calc(var(--nav-height) + 1.5rem); }
.anchor-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }   /* pinned to the card's top edge, like the card's own id */

/* Module pages: plan note under the page-hero lead */
.page-hero .module-plan {
  display: inline-flex; align-items: center; gap: 0.375rem; max-width: none; margin: 1.5rem auto 0;
  padding: 0.375rem 0.875rem; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--gray-300);
}
.page-hero .module-plan a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Dispatch module: ePCR integrations named under the cards */
.integrations__note { margin: 2rem auto 0; max-width: 62ch; text-align: center; text-wrap: balance; color: var(--gray-600); font-size: 1rem; line-height: 1.6; }
.integrations__note strong { color: var(--gray-900); font-weight: 600; }
.integrations__note a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Dispatch module: capability list */
.feature-list-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; max-width: 960px; margin-inline: auto; }
.feature-list-grid li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--gray-700); font-size: 1rem; line-height: 1.55; }
.feature-list-grid svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; color: var(--primary); }
@media (max-width: 700px) { .feature-list-grid { grid-template-columns: 1fr; } }


/* Screen-reader-only text (keeps a heading in the outline when the design doesn't show it) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Home: compact hero, module cards with drawings ----------
   The cards (modules:home-grid, drawings from "art" in .src/modules.json) rise into the hero
   so every module shows on first load, with equal weight. */
.hero--home { min-height: 0; padding-top: calc(var(--nav-height) + 3.5rem); padding-bottom: 10rem; }
.hero--home .hero__inner { grid-template-columns: 1fr; }
.hero--home .hero__content { max-width: 48rem; margin-inline: auto; text-align: center; }
.hero--home .hero__subtitle { max-width: 40rem; margin-inline: auto; color: var(--gray-300); }
.hero--home .btn-group { justify-content: center; }
.hero--home .hero__stats { justify-content: center; margin-top: 2rem; padding-top: 0; border-top: 0; }
.hero--home .hero__stat-label, .hero--home .hero__stat-unit { color: var(--gray-300); }
.section--modules-home { padding-top: 0; }
.section--modules-home .features__grid { position: relative; z-index: 1; margin-top: -7rem; }
.section--modules-home .feature-card { box-shadow: 0 10px 30px rgba(15,23,42,0.10); }
.feature-card__art { display: block; margin-bottom: 1.25rem; padding: 0.75rem; background: var(--gray-50); border-radius: var(--radius-md); }
.feature-card__art img { display: block; width: 100%; height: auto; }
@media (max-width: 768px) {
  .hero--home { padding-bottom: 8rem; }
  .section--modules-home .features__grid { margin-top: -5rem; }
}