:root {
  /* Dimagi brand palette — canonical CommCare HQ B5 styleguide
     (commcarehq.org/styleguide/b5/atoms/colors) */
  --deep-purple: #16006D;
  --indigo: #3843D0;
  --indigo-deep: #2D36A6;   /* official indigo-600 */
  --indigo-soft: #D7D9F6;   /* official indigo-100 */
  --sky: #8EA1FF;
  --sky-tint: #F0F3FF;
  --marigold: #FEAF31;
  --marigold-tint: #FFF6E0;
  --mango: #FC5F36;
  /* Text-safe mango. --mango itself is only 3.08:1 on white, so it fails WCAG
     AA as small text; this darker step is 4.87:1. Use --mango for fills and
     gradients, --mango-ink whenever mango is the color of words on a light
     background. */
  --mango-ink: #CC4019;
  --sunset: #E44434;

  /* Official indigo scale (B5) */
  --indigo-100: #D7D9F6;
  --indigo-200: #AFB4EC;
  --indigo-300: #888EE3;
  --indigo-400: #6069D9;
  --indigo-500: #3843D0;
  --indigo-600: #2D36A6;
  --indigo-700: #22287D;
  --indigo-800: #161B53;

  /* Official Dimagi gradient ramp accents (B5): indigo → purple → pink → salmon */
  --purple-100: #E1DBEE;
  --purple-300: #A592CC;
  --purple: #694AAA;        /* purple-500 */
  --purple-700: #3F2C66;
  --pink-100: #EBDCE6;
  --pink: #9A5183;          /* pink-500 */
  --pink-700: #5C314F;
  --salmon-100: #F5DEDF;
  --salmon: #CB585D;        /* salmon-500 */
  --salmon-700: #7A3538;

  /* Ink */
  --ink: #0D0825;
  --ink-2: #16006D;

  /* Surfaces */
  --paper: #FAFBFF;
  --paper-2: #FFFFFF;
  --paper-warm: #FFF9F2;
  --paper-cool: #F0F3FF;
  --line: #E6E7F0;
  --rule: #C9CCE0;

  /* Muted */
  --muted: #646B80;       /* AA: 4.96:1 on #F5F7FF lavender, 5.31:1 on white */
  --muted-soft: #6A7084;  /* AA: 4.60:1 lavender, 4.93:1 white — used for dates/labels/breadcrumbs */

  /* Semantic / state colors (B5) */
  --success: #358623; --success-subtle: #D9ECD4;
  --warning: #EEAE00; --warning-subtle: #FCEFCC;
  --danger:  #E13019; --danger-subtle:  #FAD8D4;
  --info:    #01A2A9; --info-subtle:    #CCECEE;

  /* Gradients — official Dimagi ramp (indigo → purple → pink → salmon) */
  --grad: linear-gradient(135deg, var(--indigo) 0%, var(--purple) 45%, var(--pink) 78%, var(--salmon) 100%);
  --grad-warm: linear-gradient(135deg, var(--purple) 0%, var(--pink) 55%, var(--salmon) 100%);
  --grad-text: linear-gradient(90deg, var(--indigo) 0%, var(--indigo-deep) 45%, var(--deep-purple) 100%);
  --grad-text-on-dark: linear-gradient(90deg, #FFFFFF 0%, var(--sky) 100%);
  --grad-deep: linear-gradient(135deg, #0A0620 0%, var(--deep-purple) 55%, var(--indigo) 100%);

  /* Fonts */
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  /* Labels/eyebrows/chips use Work Sans, not a monospace "AI font".
     `--mono` is aliased to the sans stack so every existing var(--mono)
     caller resolves to Work Sans; caps + letter-spacing still read as a
     label. `--code` preserves a real monospace stack (system fonts only)
     for any genuine code/tabular display — no webfont is loaded. */
  --mono: var(--sans);
  --code: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Radii */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Elevation scale — one cohesive, navy-tuned shadow family so cards read as a
     single material instead of many hand-rolled values. Prefer these on new/refined
     surfaces. */
  --shadow-sm: 0 1px 2px rgba(13,8,37,0.04), 0 2px 8px rgba(13,8,37,0.05);
  --shadow-md: 0 2px 6px rgba(13,8,37,0.05), 0 12px 28px -10px rgba(13,8,37,0.12);
  --shadow-lg: 0 8px 24px rgba(13,8,37,0.07), 0 32px 60px -20px rgba(13,8,37,0.18);
  --shadow-indigo: 0 18px 42px -22px rgba(45,54,166,0.45);

  /* Section-role backgrounds — semantic bands that give a page rhythm.
     --featured-bg : deep indigo for the one "featured proof" band.
     --closer-bg   : near-black navy for the final CTA sign-off (not pure black
                     on purpose — reads as a deliberate close, not an error). */
  --featured-bg: var(--indigo-deep);
  --closer-bg: #0D0825;

  /* Responsive vertical rhythm — replaces flat 120px so spacing scales down on
     small screens and reads tighter/more refined on large ones. Page-specific
     overrides still win at higher specificity. */
  --section-pad: clamp(72px, 8vw, 120px);
}

* { box-sizing: border-box; }

.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 100;
  background: #fff; color: var(--indigo);
  padding: 10px 18px; border-radius: 8px;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: top 150ms ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Accessibility: consistent, high-contrast keyboard focus ring on interactive elements.
   :where() keeps specificity 0 so element-specific :focus-visible rules still win.
   On dark surfaces (.section.dark / .hero.hero-dark / .cta-band / .on-dark) and inside
   <footer> the ring switches to white so it stays visible. */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
:where(.on-dark, .hero.hero-dark, .cta-band, .section.dark) :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
footer :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #fff;
}

html, body { margin: 0; padding: 0; }
/* Offset in-page anchor jumps so the sticky nav (76px) never covers the target heading */
html { scroll-padding-top: 96px; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
a:not(.btn):hover { color: var(--indigo); }
img, svg { max-width: 100%; display: block; }
/* Keep aspect ratio when max-width shrinks an attribute-sized image
   (every <img> carries width/height for CLS; see Context/seo/add_img_dimensions.py).
   Rules that set an explicit height (.logo-img, .footer-cert img, etc.) still win. */
img { height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---- HEADINGS ---- */
h1, h2 {
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 300;
}
h3 { margin: 0; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; font-weight: 400; }
h4 { margin: 0; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }

h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--deep-purple);
  background: none;
  -webkit-text-fill-color: var(--deep-purple);
}
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em,
.section.dark h1 em, .section.dark h2 em, .section.dark h3 em {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

/* ---- EYEBROW ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--indigo); margin-bottom: 20px;
}
.eyebrow.on-dark { color: rgba(142,161,255,0.85); }
.eyebrow.warm { color: var(--mango); }
.eyebrow.muted { color: var(--muted); }

/* ---- NAV ---- */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  background: var(--deep-purple);
  border-bottom: none;
}
nav.primary {
  display: flex; align-items: center; gap: 30px;
  height: 76px;
}
/* Logo sits at the far left; nav links + CTA group together on the right */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
  color: #fff;
  flex-shrink: 0;
  margin-right: auto;
}
.logo-wordmark {
  font-family: var(--sans);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.logo-img { height: 36px; width: auto; display: block; }
.logo-img.invert { filter: brightness(0) invert(1); opacity: 0.95; }

.nav-links {
  display: flex; gap: 28px; align-items: center;
  font-size: 14px; font-weight: 300;
  letter-spacing: -0.005em;
}
.nav-links a { color: rgba(255,255,255,0.75); transition: color 120ms, font-weight 120ms; text-decoration: none; }
.nav-links a:hover { color: #fff; font-weight: 700; text-decoration: none; }
.nav-links a:active { color: rgba(255,255,255,0.6); }
.nav-links a.nav-active { color: #fff; border-bottom: 2px solid rgba(255,255,255,0.55); padding-bottom: 2px; }

.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-wrap .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.nav-wrap .btn-ghost:hover { border-color: #fff; }
.nav-wrap .btn-primary { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.nav-wrap .btn-primary:hover { background: var(--indigo); color: #fff; transform: translateY(-1px); }

/* ---- MOBILE NAV HAMBURGER ---- */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 8px; margin-left: 8px; border-radius: 6px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.9); border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- DROPDOWNS ---- */
.nav-dropdown-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-chevron {
  display: inline-block; margin-left: 5px; vertical-align: middle; flex-shrink: 0;
  transition: transform 200ms ease;
}
.nav-dropdown-wrap.is-open .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  width: max-content; min-width: 180px;
  transform: translateX(-50%) translateY(-8px);
  background: var(--deep-purple); border-radius: 12px;
  box-shadow: 0 4px 6px rgba(10,6,32,0.18), 0 20px 48px -8px rgba(10,6,32,0.45);
  padding: 16px 0 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms;
  z-index: 100;
}
.nav-dropdown-wrap.is-open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav-dropdown::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 8px solid var(--deep-purple);
}
.nav-dropdown-inner { display: grid; grid-template-columns: 1fr 1fr; padding: 0 4px; }
.nav-dropdown-inner.cols-3 { grid-template-columns: 1.2fr 1fr 0.9fr; }
.nav-dropdown-col { padding: 0 20px; }
.nav-dropdown-col + .nav-dropdown-col { border-left: 1px solid rgba(255,255,255,0.12); }
.nav-dropdown-heading {
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(255,255,255,0.40); margin-bottom: 8px;
}
/* Second+ group in a dropdown (e.g. "Dimagi Labs" under "Our Products"):
   a thin rule sets it apart so the items below read as a distinct family. */
.nav-dropdown-heading--sub {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.nav-links .nav-dropdown a {
  display: block; font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.80); text-decoration: none;
  padding: 6px 0; line-height: 1.3; white-space: nowrap;
  transition: color 120ms; border-bottom: none;
}
.nav-links .nav-dropdown a:hover { color: #fff; font-weight: 400; }
.nav-links .nav-dropdown .nav-dropdown-all {
  font-size: 12px; font-weight: 600; color: var(--marigold); margin-top: 10px;
}
.nav-links .nav-dropdown .nav-dropdown-all:hover { color: #F0A820; }
.nav-dropdown--sm { width: max-content; min-width: 160px; }
.nav-dropdown--sm .nav-dropdown-inner { grid-template-columns: 1fr; }
/* Right-aligned dropdown (Sign In CTA) */
.nav-signin-wrap { align-self: center; }
.nav-signin-wrap .nav-chevron { color: var(--ink); }
.nav-dropdown--right { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
.nav-dropdown-wrap.is-open .nav-dropdown--right { transform: translateX(0) translateY(0); }
.nav-dropdown--right::before { left: auto; right: 26px; transform: none; }
.nav-signin-wrap .nav-dropdown a {
  display: block; font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.80); text-decoration: none;
  padding: 6px 0; line-height: 1.3; white-space: nowrap;
  transition: color 120ms; border-bottom: none;
}
.nav-signin-wrap .nav-dropdown a:hover { color: #fff; }

/* External-link arrow appended to menu items that leave dimagi.com
   (Products + Sign In). Sits inline just after the label. */
.nav-ext-icon {
  display: inline-block; width: 11px; height: 11px;
  margin-left: 6px; vertical-align: -1px;
  color: currentColor; opacity: 0.4;
  transition: opacity 120ms;
}
.nav-links .nav-dropdown a:hover .nav-ext-icon,
.nav-signin-wrap .nav-dropdown a:hover .nav-ext-icon { opacity: 0.85; }

/* ---- SITE SEARCH ---- */
.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85); cursor: pointer; flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.nav-search-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); color: #fff; }
.nav-search-btn svg { width: 17px; height: 17px; display: block; }

.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,6,32,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.search-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
.search-panel {
  width: 100%; max-width: 580px;
  background: var(--paper-2); border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(10,6,32,0.45);
  overflow: hidden; transform: translateY(-8px);
  transition: transform 160ms ease;
}
.search-overlay.is-open .search-panel { transform: translateY(0); }
.search-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.search-input-wrap > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 17px; color: var(--ink); padding: 0;
}
.search-input::placeholder { color: var(--muted-soft); }
.search-esc {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--muted-soft); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 7px; flex-shrink: 0;
}
.search-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.search-result {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; border-radius: 10px;
  text-decoration: none; cursor: pointer;
}
.search-result:hover, .search-result.is-active { background: var(--paper-cool); }
.search-result-section {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--indigo);
}
.search-result-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.search-result-desc {
  font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-result mark { background: transparent; color: var(--indigo); font-weight: 700; }
.search-empty { padding: 30px 22px; text-align: center; color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-panel { transition: none; }
}

/* ---- UTILITY ICON GROUP (language flag + search) ---- */
.nav-icon-group { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.nav-lang { display: inline-flex; align-items: center; }

/* GTranslate widget. dwf.js renders into .gtranslate_wrapper and defaults to
   position:fixed at the bottom of the viewport, so its inline styles need
   !important overrides to pin it into the nav as a flag-only round button that
   matches .nav-search-btn. */
.nav-lang .gt_switcher_wrapper {
  position: relative !important; bottom: auto !important; left: auto !important;
  z-index: 5 !important; width: 38px !important;
}
.nav-lang .gt_switcher { font-family: inherit !important; width: 100% !important; border: none !important; }
.nav-lang .gt_selected { border: none !important; background: transparent !important; width: 100% !important; }
.nav-lang .gt_selected a {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important; padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.28) !important; border-radius: 999px !important;
  background: transparent !important;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  overflow: hidden !important; text-decoration: none !important; box-sizing: border-box !important;
  transition: background 150ms ease, border-color 150ms ease !important;
}
.nav-lang .gt_selected a:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.55) !important; }
.nav-lang .gt_selected a img { width: 20px !important; height: 20px !important; display: block !important; border-radius: 2px !important; }
/* Language menu: open downward, anchored to the trigger's right edge. The
   .gt_switcher_wrapper prefix bumps specificity past GTranslate's own !important. */
.nav-lang .gt_switcher_wrapper .gt_option {
  position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; bottom: auto !important;
  height: auto !important; margin-top: 8px !important; width: 210px !important; max-height: 60vh !important; overflow-y: auto !important;
  background: #fff !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(10,6,32,0.28) !important; padding: 6px 0 !important;
}
.nav-lang .gt_switcher_wrapper .gt_option a {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 7px 14px !important; color: var(--ink) !important; font-size: 13px !important; line-height: 1.3 !important; text-decoration: none !important;
}
.nav-lang .gt_switcher_wrapper .gt_option a:hover { background: var(--paper-cool) !important; }
.nav-lang .gt_switcher_wrapper .gt_option a img { width: 18px !important; height: 18px !important; border-radius: 2px !important; }
/* Suppress the Google Translate top banner that otherwise pushes the page down. */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Mobile drawer language row — created by nav.js inside the open drawer; the
   flag node is moved here on phones. Hidden on desktop (where the flag lives
   in .nav-icon-group). */
.nav-drawer-lang { display: none; }
@media (max-width: 980px) {
  /* Sign-in dropdown stays hidden on phones; the button falls back to the
     /sign-in/ page (which lists the product logins). */
  .nav-cta .nav-dropdown { display: none !important; }
  .nav-cta .nav-chevron  { display: none; }

  /* The three content dropdowns (Products, Professional Services, Company)
     can't hover-open on touch, so in the drawer they become inline
     accordions: tapping the trigger expands its child links. nav.js toggles
     .is-expanded on the wrap. */
  .nav-links .nav-chevron { display: inline-block; margin-left: auto; }
  .nav-links .nav-dropdown-wrap { display: block; width: 100%; }
  .nav-links.is-open .nav-dropdown-wrap > a {
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-links .nav-dropdown {
    display: none;
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; width: 100%; min-width: 0; z-index: auto;
    background: transparent; box-shadow: none; border-radius: 0;
    padding: 0; margin: 0;
  }
  .nav-links .nav-dropdown::before { display: none; }
  .nav-links .nav-dropdown-wrap.is-expanded .nav-dropdown { display: block; }
  .nav-links .nav-dropdown-wrap.is-expanded .nav-chevron { transform: rotate(180deg); }
  .nav-links .nav-dropdown-inner { display: block; padding: 0; }
  .nav-links .nav-dropdown-col { padding: 2px 0 8px 14px; }
  .nav-links .nav-dropdown-col + .nav-dropdown-col { border-left: none; }
  .nav-links.is-open .nav-dropdown a {
    width: auto; font-size: 15px; padding: 11px 0; white-space: normal;
    border-bottom: none;
  }
  .nav-links .nav-dropdown-heading--sub { margin-top: 8px; padding-top: 10px; }
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 500; font-size: 14px; font-family: inherit;
  transition: all 150ms ease; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; letter-spacing: -0.005em;
}
.btn-lg { padding: 15px 32px; font-size: 15px; gap: 10px; }
.btn-primary { background: var(--ink); color: var(--paper); font-weight: 500; }
.btn-primary:hover { background: var(--indigo); color: var(--paper); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-indigo { background: var(--indigo); color: var(--paper); }
.btn-indigo:hover { background: var(--indigo-deep); transform: translateY(-1px); }
.btn-on-dark { background: var(--paper); color: var(--ink); font-weight: 600; }
.btn-on-dark:hover { background: var(--sky); color: var(--ink); }
.btn-ghost-on-dark {
  background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.32);
}
.btn-ghost-on-dark:hover { border-color: var(--paper); background: rgba(255,255,255,0.06); }
.btn-arrow::after { content: "→"; font-weight: 500; transition: transform 150ms; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---- HERO ---- */
.hero { padding: 120px 0 96px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -300px; right: -200px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(56,67,208,0.12) 0%, transparent 60%); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; bottom: -300px; left: -200px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(142,161,255,0.10) 0%, transparent 60%); pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center;
  position: relative; z-index: 1;
}
h1.hero-title {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.06; letter-spacing: -0.03em;
  font-weight: 200; margin: 0 0 28px;
}
.hero-sub {
  font-size: 19px; color: var(--muted); margin: 0 0 28px; max-width: 560px; font-weight: 400;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero.hero-dark {
  background: linear-gradient(160deg, #0A0620 0%, var(--deep-purple) 40%, var(--indigo) 80%, var(--indigo-400) 100%);
  color: var(--paper); padding: 104px 0 96px;
}
.hero.hero-dark::before {
  background: radial-gradient(circle, rgba(254,175,49,0.08) 0%, transparent 60%);
  top: -200px; right: -100px;
}
.hero.hero-dark::after {
  background: radial-gradient(circle, rgba(142,161,255,0.12) 0%, transparent 60%);
  bottom: -200px; left: -100px;
}
.hero.hero-dark h1.hero-title { color: var(--paper); }
.hero.hero-dark h1.hero-title em {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  font-weight: 600;
}
.hero.hero-dark .hero-sub { color: rgba(255,255,255,0.75); max-width: 620px; }

/* Hero image */
.hero-image { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.hero-image img { width: 100%; height: auto; max-width: 560px; display: block; }

/* ---- HERO STATS BAND ---- */
.hero-stats { padding: 0 0 80px; background: var(--paper); }
.hero-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-stats-cell { padding: 32px 24px; border-right: 1px solid var(--line); }
.hero-stats-cell:last-child { border-right: 0; }
.hero-stats-num {
  font-size: clamp(34px, 3.4vw, 44px); font-weight: 200; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px;
  font-feature-settings: "tnum";
}
.hero-stats-num span { color: var(--indigo); font-weight: 300; }
.hero-stats-lbl { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.4; }

.hero-stats--on-dark { padding: 0; margin-top: 72px; background: transparent; }
.hero-stats--on-dark .hero-stats-grid {
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.hero-stats--on-dark .hero-stats-cell { border-right: 1px solid rgba(255,255,255,0.14); }
.hero-stats--on-dark .hero-stats-cell:last-child { border-right: 0; }
.hero-stats--on-dark .hero-stats-num { color: var(--paper); }
.hero-stats--on-dark .hero-stats-num span { color: var(--marigold); }
.hero-stats--on-dark .hero-stats-lbl { color: rgba(255,255,255,0.62); }

/* ---- SECTIONS ---- */
.section { padding: var(--section-pad) 0; }
.section.dark {
  background: var(--ink);
  background-image: var(--grad-deep);
  color: var(--paper); position: relative; overflow: hidden;
}
.section.dark::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 80% at 100% 50%, rgba(56,67,208,0.35), transparent 65%),
    radial-gradient(40% 70% at 0% 50%, rgba(142,161,255,0.12), transparent 70%);
  pointer-events: none;
}
.section.dark > .container { position: relative; z-index: 1; }
.section.warm { background: var(--paper-warm); }
.section.marigold { background: var(--marigold-tint); }
.section.cool { background: var(--paper-cool); }

/* Featured band — the one deep-indigo "featured proof" moment on a page. */
.section.featured {
  background: var(--featured-bg);
  color: var(--paper); position: relative; overflow: hidden;
}
.section.featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(142,161,255,0.22), transparent 62%),
    radial-gradient(45% 70% at 0% 100%, rgba(254,175,49,0.10), transparent 65%);
}
.section.featured > .container { position: relative; z-index: 1; }
.section.featured h2.section-title { color: var(--paper); }
.section.featured .section-lede { color: rgba(255,255,255,0.78); }

/* Near-black final sign-off (final CTA). Reuses .cta-band; just swaps the bg. */
.cta-band.closer { background: var(--closer-bg); }
.cta-band.closer::before {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(56,67,208,0.28), transparent 62%);
}
.section-head { max-width: 760px; margin-bottom: 64px; }
h2.section-title {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.06; letter-spacing: -0.03em;
  font-weight: 300; margin: 0 0 24px;
}
.section.dark h2.section-title { color: var(--paper); }
.section-lede { font-size: 19px; color: var(--muted); max-width: 640px; }
.section.dark .section-lede { color: rgba(255,255,255,0.70); }

/* ---- PRODUCT CARDS (homepage 4-up grid) ---- */
.product-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  margin-top: 16px;
}
.product-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms, box-shadow 200ms;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(10,6,32,0.16);
  border-color: var(--rule);
}
.product-card-visual {
  height: 140px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.product-card-visual--commcare { background: linear-gradient(135deg, #1F1955 0%, #3843D0 60%, #5D6FE8 100%); }
.product-card-visual--connect  { background: linear-gradient(135deg, #003055 0%, #005B99 60%, #50C4FF 100%); }
.product-card-visual--sureadhere { background: linear-gradient(135deg, #003B38 0%, #0DA89D 60%, #4DBBBA 100%); }
.product-card-visual--ocs       { background: linear-gradient(135deg, #3A1800 0%, #FC5F36 60%, #FEAF31 100%); }
.product-card-visual-label {
  font-family: var(--sans); font-size: 20px; font-weight: 700;
  color: rgba(255,255,255,0.95); letter-spacing: -0.03em;
  position: relative; z-index: 1;
}
.product-card-visual::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12) 0%, transparent 55%);
  pointer-events: none;
}
.product-card-body { padding: 32px 36px 36px; display: flex; flex-direction: column; flex: 1; gap: 16px; }
.product-card-name {
  font-size: 22px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.product-card-desc { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.product-card-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-soft);
  padding: 4px 0; border-top: 1px solid var(--line);
}
.product-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--indigo);
  margin-top: 4px;
  transition: gap 150ms;
}
.product-card-link:hover { color: var(--indigo-deep); gap: 10px; }
.product-card-link::after { content: "→"; }

/* ---- SERVICES CARDS (3-up) ---- */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 16px;
}
.service-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 32px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(10,6,32,0.14);
  border-color: var(--marigold);
}
.service-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--marigold-tint); border: 1px solid rgba(254,175,49,0.25);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-card-name { font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.service-card-desc { font-size: 15px; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.service-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--mango);
  margin-top: 4px; transition: gap 150ms;
}
.service-card-link:hover { color: var(--sunset); gap: 10px; }
.service-card-link::after { content: "→"; }

/* ---- STATS DARK BAND ---- */
.stats {
  padding: 120px 0; background: var(--ink);
  background-image: var(--grad-deep);
  color: var(--paper); position: relative; overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(254,175,49,0.12), transparent 60%); pointer-events: none;
}
.stats::after {
  content: ""; position: absolute; bottom: -200px; left: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(142,161,255,0.15), transparent 60%); pointer-events: none;
}
.stats > .container { position: relative; z-index: 1; }
.stats h2 { color: var(--paper); }
.stats-lede { font-size: 19px; color: rgba(255,255,255,0.70); max-width: 620px; margin-bottom: 64px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card {
  padding: 36px 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  transition: all 200ms;
}
.stat-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(254,175,49,0.40);
}
.stat-num {
  font-size: 64px; font-weight: 200; line-height: 1;
  letter-spacing: -0.04em; color: var(--paper); font-feature-settings: "tnum";
}
.stat-num span { color: var(--marigold); font-weight: 300; }
.stat-lbl {
  margin-top: 16px; font-size: 14px; color: rgba(255,255,255,0.70);
  line-height: 1.5; font-family: var(--mono); letter-spacing: 0.02em;
}

/* ---- LOGO MARQUEE ---- */
.logo-strip {
  padding: 72px 0 80px; background: var(--paper-warm);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden;
}
.logo-strip-label {
  text-align: center; font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 44px;
}
.logo-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-track {
  display: flex; gap: 0; animation: marquee 70s linear infinite; width: max-content;
}
.logo-set { display: flex; align-items: center; gap: 72px; flex-shrink: 0; padding-right: 72px; }
.logo-org {
  font-size: 20px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap; letter-spacing: -0.01em; opacity: 0.85;
  transition: opacity 200ms, color 200ms;
}
.logo-org:hover { opacity: 1; color: var(--indigo); }
.logo-org-img {
  height: 48px; width: auto; max-width: 180px; object-fit: contain;
  filter: grayscale(1) contrast(0.85); opacity: 0.55;
  transition: filter 250ms ease, opacity 250ms ease; flex-shrink: 0;
}
.logo-org-img:hover { filter: grayscale(0) contrast(1); opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- MISSION SECTION (about dimagi) ---- */
.mission-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.mission-copy { max-width: 540px; }
.mission-copy h2.section-title { margin-bottom: 24px; }
.mission-body { font-size: 18px; color: var(--muted); line-height: 1.65; margin: 0 0 32px; }
.mission-pillars { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.mission-pillar {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; background: var(--paper-cool);
  border-radius: var(--radius); border-left: 3px solid var(--indigo);
}
.mission-pillar-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--indigo);
  flex-shrink: 0; margin-top: 6px;
}
.mission-pillar-text { font-size: 15px; color: var(--ink); line-height: 1.5; }
.mission-pillar-text strong { color: var(--ink); font-weight: 600; }
.mission-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.mission-stat-box {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.mission-stat-box:first-child { grid-column: span 2; background: var(--grad-deep); border-color: transparent; }
.mission-stat-num {
  font-size: 48px; font-weight: 200; line-height: 1; letter-spacing: -0.03em;
  background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-feature-settings: "tnum";
}
.mission-stat-box:first-child .mission-stat-num {
  background: linear-gradient(90deg, #fff 0%, var(--marigold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: 52px;
}
.mission-stat-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.mission-stat-box:first-child .mission-stat-label { color: rgba(255,255,255,0.55); }

/* ---- CTA BAND ---- */
.cta-band {
  padding: 120px 0; text-align: center;
  background: var(--grad-deep); color: var(--paper);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(254,175,49,0.10), transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(56,67,208,0.30), transparent 65%);
  pointer-events: none;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--paper); font-size: clamp(32px, 4vw, 54px); margin-bottom: 20px; }
.cta-band p { font-size: 18px; color: rgba(255,255,255,0.72); max-width: 560px; margin: 0 auto 48px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---- FOOTER ---- */
footer {
  background: #0A0620; color: rgba(255,255,255,0.80);
  padding: 80px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
  display: grid; grid-template-columns: auto auto auto auto auto 1fr;
  column-gap: 56px; row-gap: 40px; padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-brand p {
  font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 20px 0 0; max-width: 260px;
}
.footer-logo {
  height: 32px; width: auto; display: block;
  filter: brightness(0) invert(1); opacity: 0.92;
}
.footer-col .footer-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  /* 0.40 alpha over #0a0620 measured 3.74:1 — below the 4.5:1 WCAG AA floor
     for text this size, on all 245 pages. 0.55 is 6.2:1 and still sits below
     the 0.65 column links, so the hierarchy reads the same. */
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin: 0 0 16px;
}
/* Visually-hidden heading, used to keep the heading outline nesting without
   skipping a level where a visible heading does not fit the design. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.footer-col li a {
  font-size: 13.5px; color: rgba(255,255,255,0.65);
  transition: color 120ms; text-decoration: none;
}
.footer-col li a:hover { color: #fff; }
/* Nested sub-items in the footer (e.g. Awards + Press under About Us): indented,
   slightly smaller, with a subtle guide rule so they read as children. */
.footer-col li.footer-subitem { padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,0.14); }
.footer-col li.footer-subitem a { font-size: 12.5px; color: rgba(255,255,255,0.52); }
.footer-col li.footer-subitem a:hover { color: #fff; }
/* "Dimagi Labs" sub-label in the footer Products column: a muted divider
   above Open Chat Studio so it doesn't read as a core Dimagi product. */
.footer-col li.footer-sublabel {
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  /* Same 3.74:1 AA failure as .footer-col-title above. */
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  /* 0.35 over #0a0620 is 3.11:1 — under the 4.5:1 AA floor for 11px text, and
     this row is not decoration: it holds Privacy, Terms, Business Agreement,
     Acceptable Use, Financial Conflict, Transparency and Trust Center. 0.55
     matches the column headings and reads 6.22:1. */
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.55); transition: color 120ms; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* Social icons — brand colors */
.footer-social { margin-top: 22px; display: flex; gap: 10px; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: #fff;
  transition: transform 140ms, filter 140ms;
}
.footer-social-link.linkedin { background: #0A66C2; }
.footer-social-link.youtube  { background: #FF0000; }
.footer-social-link:hover { transform: translateY(-2px); filter: brightness(1.08); }
.footer-social-link svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

/* Certification badges — white chips */
.footer-certs { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.footer-cert {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px; padding: 9px 12px;
  transition: transform 140ms, box-shadow 140ms;
}
.footer-cert:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4); }
.footer-cert img { display: block; width: auto; max-width: none; }
.footer-cert.bcorp img { height: 60px; }
.footer-cert.climate img { height: 42px; border-radius: 2px; }

/* Newsletter — compact, under Contact */
.footer-news { margin-top: 18px; }
.footer-news-label { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0 0 10px; }
.footer-news-form { display: flex; flex-direction: column; gap: 8px; width: 184px; }
.footer-news-input {
  width: 100%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 7px;
  padding: 9px 11px; font-family: inherit; font-size: 13px; color: #fff;
}
.footer-news-input::placeholder { color: rgba(255,255,255,0.40); }
/* Solid white outline + brighter border so the focus indicator clears 3:1 on the indigo footer. */
.footer-news-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.09); }
.footer-news-btn { width: 100%; text-align: center; justify-content: center; }

/* ---- UTILITIES ---- */
.on-dark { color: var(--paper); }
.text-center { text-align: center; }
.section-head.centered { text-align: center; max-width: none; }
.section-head.centered .eyebrow { justify-content: center; }
.section-head.centered .section-lede { margin: 0 auto; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mission-grid { gap: 48px; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* The 30px desktop gap plus the hamburger's own 8px margin pushed the nav row
     to 362px inside a 335px container, so every page scrolled ~7px sideways on
     a 375px phone and the hamburger sat half off-screen. Tighten both here. */
  nav.primary { gap: 14px; }
  .nav-hamburger { margin-left: 0; }
  /* The drawer must live in the SAME breakpoint that reveals the hamburger.
     These rules used to sit in the 400px block below, so from 401px to 980px
     the hamburger rendered and nav.js added .is-open, but the panel kept
     display:none and tapping it did nothing. That dead zone covered iPhone
     Plus/Pro Max (428/430), iPhone XR/11 (414), every iPad in portrait
     (744/768/810/834) and any phone in landscape. */
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    background: var(--deep-purple); padding: 24px 32px; overflow-y: auto;
    z-index: 49;
  }
  .nav-links.is-open a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; font-size: 17px; }
  /* Language flag relocates into the drawer on phones. */
  .nav-drawer-lang {
    display: flex; align-items: center; gap: 14px;
    width: 100%; margin-top: 10px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .nav-drawer-lang-label { font-size: 15px; color: rgba(255,255,255,0.80); }
  .nav-drawer-lang-slot { display: inline-flex; align-items: center; }
}
/* Narrowest supported phones (320px, e.g. iPhone SE 1st gen): the logo + Sign
   In + search + hamburger still total more than the 280px of usable width, so
   step the logo and the Sign In pill down rather than let the row overflow. */
@media (max-width: 400px) {
  nav.primary { gap: 10px; }
  .logo-img { height: 28px; }
  .nav-wrap .btn-primary { padding: 9px 15px; font-size: 13px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { display: none; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-visual { display: none; }
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .container { padding: 0 20px; }
  /* .btn is white-space:nowrap by default, which is right on desktop but on a
     phone a long label ("Read our Annual Benefit Report", "View SureAdhere's
     Privacy Policy") sets a min-content width that grid tracks cannot shrink
     below, pushing whole pages sideways. Let long labels wrap instead. */
  .btn { white-space: normal; }
  .product-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0,…) so the tracks can shrink past their content's min-content
     width: plain 1fr let the brand column hold 207px and, with the inherited
     56px gutter, the footer ran 39px wider than a 320px phone. */
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .hero-stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal { gap: 12px; }
}