/* ============================================================
   PHARMACOMPARE — SECTION LAYOUTS
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 140px;
  padding-bottom: var(--space-lg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(3px);
  transform: scale(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(8, 194, 150, 0.94) 0%,
    rgba(8, 194, 150, 0.88) 45%,
    rgba(0, 120, 50, 0.80) 100%
  );
  z-index: -1;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
}

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

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: var(--fs-small);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.hero-headline {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  line-height: 1.15;
}

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

.text-gradient-green-hero {
  background: linear-gradient(90deg, #ffffff 0%, #b9ffe0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtext {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  max-width: 480px;
  margin-bottom: var(--space-md);
}

.store-badge-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.store-badge-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-md);
  transition: background var(--transition-medium), transform var(--transition-fast), border-color var(--transition-medium);
  /* Never shrink below natural size — in a narrow column (e.g. the
     footer's brand column) a flex row of two of these would otherwise
     default to flex-shrink:1 and get compressed to fit one line,
     which (combined with the img's fixed height below) squashed the
     badge art out of its native aspect ratio instead of just wrapping. */
  flex-shrink: 0;
}

.store-badge-box img {
  height: 30px;
  width: auto;
}

.store-badge-box:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--color-white);
  transform: translateY(-3px);
}

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

.social-proof-avatars {
  display: flex;
}

.proof-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  object-fit: cover;
  margin-left: -12px;
}

.proof-avatar:first-child {
  margin-left: 0;
}

.social-proof-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-small);
}

.social-proof-text strong {
  color: var(--color-white);
  font-family: var(--font-heading);
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 640px;
}

.hero-backdrop-circle {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-green-bright) 0%,
    var(--color-green-primary) 55%,
    var(--color-green-dark) 100%
  );
  opacity: 0.9;
  z-index: 0;
  animation: heroCirclePulse 6s ease-in-out infinite;
}

@keyframes heroCirclePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.phone-frame {
  position: relative;
  z-index: 1;
  width: 340px;
  aspect-ratio: 383 / 780;
  background: #1a1a1a;
  border-radius: 46px;
  padding: 14px;
  box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255,255,255,0.08);
  box-sizing: border-box;
}

.phone-frame::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 16px 16px;
  z-index: 3;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
}

.phone-screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.phone-screen-img.active {
  opacity: 1;
  transform: translateX(0);
}

.hero-scroll-indicator {
  position: relative;
  margin-top: var(--space-lg);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.hero-scroll-indicator span {
  display: block;
  width: 4px;
  height: 8px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  margin: 8px auto 0;
  animation: scrollBounce 1.8s infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER — shared intro band for every page that isn't Home
   (Home has the full Hero instead). Same brand-gradient background
   and two-tone heading pattern as the rest of the site, just shorter
   — no phone mockup, no CTA row, just eyebrow + heading + subtext.
   Sized to clear the fixed nav the same way .hero does (padding-top),
   and left with no `.hero` class at all so nav.js's `hero` lookup
   correctly falls back to its scrollY-based .scrolled check on every
   page that uses this instead.
   ══════════════════════════════════════════════════════════ */
.page-header {
  padding: 160px 0 var(--space-xl);
  background: var(--gradient-green-brand);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -8%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 252, 179, 0.18) 0%, transparent 70%);
  z-index: 0;
}

.page-header .section-eyebrow.light {
  position: relative;
  z-index: 1;
  /* --color-green-bright is the same green as this gradient's mid-stop,
     so the default .light eyebrow all but vanished here */
  color: var(--color-green-pale);
}

.page-header-title {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  margin: var(--space-xs) auto var(--space-sm);
  max-width: 800px;
}

.page-header-title-green {
  color: var(--color-green-pale);
}

.page-header-subtext {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .page-header {
    padding: 130px 0 var(--space-lg);
  }
}

/* ══════════════════════════════════════════════════════════
   MISSION — 5 PANELS, SCROLL-PINNED HORIZONTAL SEQUENCE
   (with a plain-vertical-stack fallback baked in as the default)

   Structure: .mission-pin > .mission-pin-inner > .mission-track
   > 5x .mission-panel, plus .mission-progress-dots inside
   .mission-pin-inner.

   BASE STATE (below) = normal vertical flow. This is what renders
   if JS never runs at all — a resilient no-JS fallback, not just
   a narrow-screen one.

   .mission-pin.is-pinned (added by mission-scroll.js only when the
   viewport is >900px AND prefers-reduced-motion is NOT set) is
   what actually turns on the sticky/horizontal-translate mechanism.
   responsive.css then forcibly strips .is-pinned's effects back to
   this base state under (max-width: 900px) OR
   (prefers-reduced-motion: reduce), as a CSS-level guarantee that
   holds even if the JS media-query check is ever skipped.
   ══════════════════════════════════════════════════════════ */

.mission-pin {
  background: var(--color-content-bg);
}

.mission-pin-inner {
  display: block;
}

.mission-track {
  display: block;
}

.mission-panel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  overflow: hidden;
  box-sizing: border-box;
  gap: var(--space-xl);
}

/* ── PINNED MODE (desktop/tablet, motion allowed) ── */
.mission-pin.is-pinned {
  position: relative;
  height: calc(5 * 100vh); /* 5 panels — one 100vh scroll "slot" each */
}

.mission-pin.is-pinned .mission-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.mission-pin.is-pinned .mission-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.mission-pin.is-pinned .mission-panel {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
}

/* ── PROGRESS DOTS — only meaningful (and only shown) in pinned mode ── */
.mission-progress-dots {
  display: none;
}

.mission-pin.is-pinned .mission-progress-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  z-index: 5;
}

.mission-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.35);
  transition: background 0.3s ease, transform 0.3s ease;
}

.mission-dot.is-active {
  background: var(--color-green-primary);
  transform: scale(1.25);
}

.mission-panel-content {
  max-width: 560px;
  width: 100%;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.mission-panel-title {
  font-size: clamp(2.1rem, 3.5vw, 2.6rem);  /* ✏️ floor raised from 1.8rem — matches --fs-section-title's floor bump */
  margin: var(--space-xs) 0 var(--space-md);
  color: var(--color-text-dark);
}

.mission-title-green {
  color: var(--color-green-primary);
}

.mission-title-on-green {
  color: var(--color-white);
}

.mission-title-black {
  color: var(--color-text-dark);
}

.mission-text-on-green {
  color: rgba(255, 255, 255, 0.9);
}

.mission-panel-text {
  font-size: 1.05rem;
  color: var(--color-text-body);
  line-height: 1.7;
}

/* ── PANEL 1 — THE PROBLEM ── */
.mission-panel-problem {
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
  flex-direction: column;
}

.mission-panel-problem .mission-panel-title,
.mission-panel-problem .section-eyebrow {
  color: var(--color-white);
}

.mission-panel-problem .mission-panel-text {
  color: rgba(255, 255, 255, 0.75);
}

.mission-panel-problem .mission-panel-content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.mission-panel-problem::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
  animation: urgencyPulse 3s ease-in-out infinite;
  z-index: 0;
}

@keyframes urgencyPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.mission-panel-visual {
  position: relative;
  z-index: 2;
  margin-top: var(--space-lg);
}

/* Big rounded-SQUARE card (not circle), natural sticker colors,
   clock icon as a corner badge on the same card */
.mission-square-card {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 32px;
  background: var(--color-white);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0 auto;
}

/* Entrance-animation wrapper for the sticker: the sticker img itself
   (.mission-square-sticker) gets a continuous inline bounce transform
   from mission-scroll.js, so the .in-view fade/slide is applied here
   instead — a parent element's CSS transform and a child's inline
   transform compose without conflict. */
.mission-icon-in {
  width: 100%;
  height: 100%;
}

.mission-square-sticker {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* natural colors — no filter */
}

/* Entrance-animation wrapper for the corner badge — same reasoning as
   .mission-icon-in above. This wrapper now owns the absolute
   positioning that used to live on .mission-square-corner-icon
   itself, which is now just the static-flow badge box inside it. */
.mission-corner-icon-in {
  position: absolute;
  bottom: -16px;
  left: -16px;
}

.mission-square-corner-icon {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-square-corner-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* natural colors — no filter */
}

/* ── PANELS 2 & 4 — "STEP" PANELS: exact app-header styling ── */
.mission-panel-consultation,
.mission-panel-delivery {
  background: #08c296;
  max-width: var(--max-width);
  margin: 0 auto;
}

.mission-header-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.mission-blob-large {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -80px;
  left: -60px;
  background: rgba(52, 252, 179, 0.4);
  border-radius: 50%;
}

.mission-blob-small {
  position: absolute;
  width: 170px;
  height: 200px;
  top: -100px;
  right: -70px;
  background: rgba(1, 115, 88, 0.5);
  border-radius: 50%;
}

/* Lighter blob variant for use on white/light backgrounds (Panel 3) */
.mission-blob-alt.mission-blob-large {
  background: rgba(0, 140, 60, 0.12);
  top: -60px;
  left: -40px;
}

.mission-blob-alt.mission-blob-small {
  background: rgba(0, 120, 50, 0.16);
  top: -60px;
  right: -40px;
}

.mission-panel-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.mission-phone-frame {
  width: 280px;
}

.mission-phone-frame .phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* "Crashing" screenshot — no container/circle, just the rounded
   image with a soft grey backdrop card, partially overlapping frame */
.mission-crash-shot {
  position: absolute;
  bottom: 8%;
  left: -14%;
  width: 170px;
  z-index: 3;
}

.mission-crash-shot::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: #f4f4f4;
  border-radius: 20px;
  z-index: -1;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.mission-crash-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.mission-crash-shot-right {
  left: auto;
  right: -14%;
}

/* ── PANEL 3 — STEP TWO: light site-normal background ── */
.mission-panel-lab {
  background: var(--color-content-bg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.mission-panel-lab .mission-panel-title,
.mission-panel-lab .section-eyebrow {
  color: var(--color-text-dark);
}

.mission-panel-lab .mission-panel-text {
  color: var(--color-text-body);
}

.mission-cycle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 1s ease;
}

.mission-cycle-img.active {
  opacity: 1;
}

/* ── PANEL 5 — THE RESULT: light site-normal background ── */
.mission-panel-outcome {
  background: var(--color-content-bg);
}

.mission-outcome-content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.mission-panel-outcome .section-eyebrow,
.mission-panel-outcome .mission-panel-title {
  color: var(--color-text-dark);
}

.mission-panel-outcome .mission-panel-text {
  color: var(--color-text-body);
}

/* ── STAT BOXES — 2x2 rounded-square icon badges (brand green) ── */
.mission-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 50px;
  margin-top: var(--space-lg);
}

/* 3-up variant — home page teaser previews (fewer stats than the
   full 2x2 "By The Numbers" grids on about.html/mission.html). */
.mission-stat-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mission-stat-box {
  background: var(--color-white);
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  min-height: 78px;
  min-width: 0;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.mission-stat-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--color-green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-stat-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.mission-stat-text {
  display: block;
  min-width: 0;
}

.mission-stat-number,
.mission-stat-plus,
.section-teaser-stat-number {
  display: inline;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--color-text-dark);
}

.mission-stat-text p {
  display: block;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

/* ── WHY WE BUILT THIS —
   REBUILT: phone frame, left icons, and right icons are three
   equal-height flex columns sitting SIDE BY SIDE inside one row.
   Nothing overlaps, nothing sits below anything else. The card
   hugs its content tightly (no excess empty space). ── */
.why-built {
  padding: var(--space-xl) 0;   /* ✏️ was --space-2xl (9rem) — tighter section-to-section gap */
  background: var(--color-content-bg);
  text-align: center;
  /* Contains the showcase items' [data-animate="fade-left"/"fade-right"]
     entrance transforms before they scroll into view — see the same
     note on .how-it-works. */
  overflow-x: hidden;
}

.why-built-title {
  color: var(--color-text-dark);
  margin: 0 auto var(--space-md);
  max-width: 800px;
}

.why-built-title-green {
  color: var(--color-green-primary);
}

.why-built-text {
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  font-size: 1.05rem;
  color: var(--color-text-body);
}

.showcase-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-lg);   /* ✏️ tight, symmetric padding — no wasted space */
  margin-top: var(--space-xl);
}

.showcase-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.showcase-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  flex: 1;
  max-width: 300px;
}

.showcase-phone-col {
  flex: 0 0 auto;               /* ✏️ phone column doesn't stretch — sized to its own content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-phone-frame {
  width: 300px;                 /* ✏️ sized to fit comfortably beside icons without dominating */
}

.showcase-phone-frame .phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;  /* ✏️ centers the screenshot horizontally, anchors top vertically */
}

.showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.showcase-icon-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-green-pale);
}

.showcase-icon-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: rgba(0, 120, 50, 0.18);
}

.showcase-icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.showcase-item-text h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--color-text-dark);
}

.showcase-item-text p {
  font-size: 0.85rem;
  color: var(--color-text-body);
  line-height: 1.5;
}

/* ── HOW IT WORKS — vertical timeline with animated connecting line ── */
.how-it-works {
  padding: var(--space-xl) 0;   /* ✏️ was --space-2xl (9rem) — tighter section-to-section gap */
  background: var(--gradient-green-brand);
  text-align: center;
  position: relative;
  /* Contains the timeline steps' [data-animate="fade-left"/"fade-right"]
     entrance transforms (translateX ±80px) before they've scrolled into
     view and reset — locally, not on <html>/<body>, since a shared
     ancestor's overflow breaks Mission's position:sticky (see base.css). */
  overflow-x: hidden;
}

.how-it-works .section-title {
  margin-left: auto;
  margin-right: auto;
}

/* Trailing CTA on how-it-works.html (index.html's trimmed preview
   doesn't render the full timeline, so it never reaches this) */
.how-it-works > .section-container > .btn {
  margin-top: var(--space-xl);
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-md) 0;
}

/* The connecting spine — a vertical line running down the center,
   fills in with a brighter green as the user scrolls (JS-driven) */
.timeline-spine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  z-index: 0;
}

.timeline-spine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--timeline-fill, 0%);   /* ✏️ set dynamically via JS as user scrolls */
  background: var(--color-green-bright);
  transition: height 0.2s ease-out;
}

.timeline-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  z-index: 1;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-step-left {
  flex-direction: row;
}

.timeline-step-right {
  flex-direction: row;
}

.timeline-content {
  flex: 1;
  text-align: left;
}

.timeline-step-right .timeline-content {
  text-align: right;
}

.timeline-number {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-green-bright);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.timeline-content h3 {
  color: var(--color-white);
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.timeline-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Center node — sits directly on the spine */
.timeline-node {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  border: 4px solid var(--color-green-bright);
  position: relative;
  z-index: 2;
}

.timeline-node-final {
  width: 26px;
  height: 26px;
  border-width: 5px;
}

/* Card + icon-badge combo on the outer side of each step */
.timeline-visual {
  flex: 1;
  display: flex;
}

.timeline-step-left .timeline-visual {
  justify-content: flex-start;
}

.timeline-step-right .timeline-visual {
  justify-content: flex-end;
}

/* Fixed-size positioning context holding the backdrop blob, the
   mini app-screen card and the (now enlarged) icon badge — same
   layered-overlap technique as .mission-square-card +
   .mission-square-corner-icon in the Mission section. */
.timeline-visual-group {
  position: relative;
  width: 260px;
  height: 400px;
  flex-shrink: 0;
}

/* ✏️ Blob is now deliberately smaller than the card's height, so the
   card visibly overflows past its top and bottom edge (reference:
   phone mockup taller than the soft circle behind it) instead of
   the circle fully enclosing it. Centered on the card. */
.timeline-visual-blob {
  position: absolute;
  top: 50px;
  left: -50px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: var(--color-green-pale);
  opacity: 0.25;
  z-index: 0;
}

/* ✏️ Card is sized to the screenshots' native ~380:814 portrait
   ratio (via aspect-ratio) instead of a fixed landscape box, so the
   full screenshot shows uncropped — object-fit: contain on the img
   below does the same job as a belt-and-suspenders measure. Made
   noticeably larger than the backdrop blob's height so it overflows
   past the blob's top/bottom edge. */
.timeline-card {
  position: absolute;
  top: 23px;
  left: 20px;
  width: 170px;
  aspect-ratio: 380 / 814;
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 1;
}

.timeline-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ✏️ Moved from the card's bottom-right corner to its vertical
   middle, overlapping the right edge — same reference layout as the
   secondary card floating beside the phone's midpoint. */
.timeline-icon-badge {
  position: absolute;
  top: 144px;
  left: 149px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline-icon-badge img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);   /* brand green, same recipe as .mission-stat-icon img */
}

/* ══════════════════════════════════════════════════════════
   FAQ — centered heading + subtext, stacked accordion rows
   ══════════════════════════════════════════════════════════ */
.faq {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
  text-align: center;
}

.faq-title {
  margin-left: auto;
  margin-right: auto;
}

/* two-tone heading — same pattern as .why-built-title / .mission-title-green */
.faq-title-green {
  color: var(--color-green-primary);
}

.faq-subtext {
  max-width: 620px;
  margin: 0 auto var(--space-lg);
  font-size: 1.05rem;
  color: var(--color-text-body);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* white rounded card with soft shadow — radius/shadow reused from
   .function-card (var(--radius-lg) / var(--shadow-sm)) */
.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* keep the scroll-reveal opacity/transform transition (this rule
     would otherwise override the shared [data-animate] one, since it
     loads later) and add box-shadow for the hover lift */
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow var(--transition-medium);
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1.25rem var(--space-md);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text-dark);
  background: none;
  cursor: pointer;
}

/* plus / minus icon — drawn with two bars; the vertical bar rotates
   away (and fades) when expanded, leaving a minus. CSS transform,
   no icon swap. */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--color-green-primary);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-medium), opacity var(--transition-medium);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq-item.is-open .faq-question {
  color: var(--color-green-primary);
}

/* collapsible body — animates max-height + opacity for a smooth
   slide, not an instant snap. JS toggles .is-open on .faq-item. */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium), opacity var(--transition-medium);
}

.faq-item.is-open .faq-answer {
  max-height: 320px;
  opacity: 1;
}

.faq-answer-inner {
  padding: 0 var(--space-md) 1.25rem;
}

.faq-answer-inner p {
  font-size: 0.98rem;
  color: var(--color-text-body);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════
   CORE FUNCTIONS — "Beautiful Interface" auto-scrolling carousel
   ══════════════════════════════════════════════════════════ */
.functions {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
  text-align: center;
  overflow: hidden;
}

.functions-title {
  margin-left: auto;
  margin-right: auto;
}

.functions-title-green {
  color: var(--color-green-primary);
}

.functions-subtext {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--color-text-body);
}

.carousel {
  margin-top: var(--space-lg);
  width: 100%;
  overflow: hidden;
  /* extra vertical room so the focused (scaled-up) item isn't clipped */
  padding: 48px 0;
  /* Manual drag/swipe (carousel.js) — pan-y lets touch still scroll the
     PAGE vertically through the strip; horizontal panning is handled by
     our own pointer-event drag logic instead of the browser's. */
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* Light green wash panel behind the sliding strip — same pattern as
     .built-by-team's wash (pale green + var(--radius-lg)) — instead of
     the old flat black/grey backdrop behind each screenshot. The mask
     below fades this panel's own left/right edges out along with the
     images, so the rounded corners only read at top and bottom. */
  background: linear-gradient(180deg, var(--color-green-pale) 0%, #dcf1e3 100%);
  border-radius: var(--radius-lg);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.carousel.is-dragging {
  cursor: grabbing;
}

.carousel-track {
  display: flex;
  gap: 28px;
  width: max-content;
  will-change: transform;
}

.carousel-item {
  width: 230px;
  /* Matches the source screenshots' actual pixel dimensions (~380×814,
     confirmed across assets/images/1.png–20.png) rather than the old
     383/780 guess — that mismatch was exactly why object-fit: cover
     was cropping the top/bottom off every screenshot. contain (below)
     now shows the full image; this ratio keeps the letterboxing that
     introduces to a sliver for the handful of images with a different
     native ratio (e.g. 12.png/13.png), instead of a large gap. */
  aspect-ratio: 380 / 814;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  /* Base thin green-tinted border on a white card, so each screenshot
     pops against the carousel's pale green wash instead of sitting on
     a flat black/grey box. The "thicker border while focused" is
     added as an INSET box-shadow rather than a real border-width
     change, so it never reflows the flex row — only transform and
     box-shadow animate, both compositor-friendly. */
  border: 2px solid rgba(0, 120, 50, 0.18);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  -webkit-user-drag: none;
  transform: scale(0.92);
  box-shadow: inset 0 0 0 0 rgba(0, 120, 50, 0.4), 0 6px 18px rgba(0, 120, 50, 0.14);
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* will-change is intentionally NOT set here — 20+ permanently
     promoted layers costs more than it saves; only .carousel-track
     (the element transformed every frame) gets it. */
}

.carousel-item.is-focused {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 3px rgba(0, 120, 50, 0.5), 0 20px 45px rgba(0, 120, 50, 0.22);
}

/* Click/tap-to-center: a bigger scale than the passive drift-through
   focus above, held for a few seconds (see carousel.js) so the pick
   is unmistakably "selected" rather than just passing through centre. */
.carousel-item.is-focused.is-active-zoom {
  transform: scale(1.22);
  box-shadow: inset 0 0 0 3px rgba(0, 120, 50, 0.6), 0 26px 55px rgba(0, 120, 50, 0.3);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    /* JS also bails on the rAF loop; this is the CSS-side guarantee */
    transform: none !important;
  }
  .carousel-item,
  .carousel-item.is-focused {
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 120, 50, 0.14);
    transition: none;
  }
  .carousel {
    overflow-x: auto;
  }
}

/* ── CORE FUNCTIONS BREAKDOWN — features.html only, sits under the
   carousel. Uses .function-card/.function-icon/.function-title/
   .function-desc, which have sat ready in components.css without a
   section to belong to until now. ── */
.core-functions {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.functions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: left;
  margin-top: var(--space-xl);
}

/* 2-up variant — our-team.html's culture cards, partners.html's
   become-a-partner grid, anywhere a 3-up grid would leave odd gaps. */
.functions-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.function-card {
  background: var(--color-white);
}

.function-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.built-by {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);   /* now a light section, continuous with Features above */
  text-align: center;
  position: relative;
  overflow: hidden;
}

.built-by::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(8, 194, 150, 0.10) 0%, transparent 70%);
  z-index: 0;
}

/* Bold teal wash (#08c296 — Mission's "Step" panel colour) that pops in
   to cover the FULL section — full width, full height, inset: 0 — only
   while Built-By is actually in view, then fades back out as the user
   scrolls away. animations.js toggles .tint-in via a dedicated
   IntersectionObserver on .built-by itself (not a scroll-percentage
   check), matching the reveal used everywhere else on the site. Text
   sitting directly on the section (not inside the white cards) swaps
   to light colours while .tint-in is active, the same "on-green" swap
   Mission's Step panels already use. */
.built-by::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(8, 194, 150, 0.92);
  opacity: 0;
  transform: scaleY(0.94);
  transform-origin: center;
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.built-by.tint-in::after {
  opacity: 1;
  transform: scaleY(1);
}

.built-by .section-container {
  position: relative;
  z-index: 1;
}

.built-by .section-eyebrow,
.built-by .section-title,
.vision-text,
.built-by-thanks {
  transition: color 0.6s ease;
}

.built-by.tint-in .section-eyebrow {
  color: var(--color-white);
}

.built-by.tint-in .section-title {
  color: var(--color-white);
}

.built-by.tint-in .vision-text,
.built-by.tint-in .built-by-thanks {
  color: rgba(255, 255, 255, 0.92);
}

/* Built-By's heading otherwise defaults to a left-anchored block (no
   auto margins) even though the section itself is text-align:center —
   .why-built-title / .faq-title use the same margin:auto fix. */
.built-by .section-title {
  margin-left: auto;
  margin-right: auto;
}

.vision-text {
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  color: var(--color-text-body);
  font-size: 1.1rem;
}

/* ── BUILT BY — two-column layout: team cards left, download card right
   (same left-content / right-visual split as .mission-panel-consultation) ── */
.built-by-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  text-align: left;
}

.built-by-team {
  flex: 1 1 58%;
  min-width: 0;
  background: var(--color-green-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* white card, radius + shadow reused from .function-card */
.team-member-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  /* keep the [data-animate] reveal transition (this rule loads later
     and would otherwise win) and add box-shadow for the hover */
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow var(--transition-medium);
}

.team-member-card:hover {
  box-shadow: var(--shadow-md);
}

.team-member-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-dark);
  margin-bottom: 2px;
}

.team-member-role {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-green-primary);
  margin-bottom: var(--space-sm);
}

.team-member-desc {
  font-size: var(--fs-small);
  color: var(--color-text-body);
  line-height: 1.6;
}

/* dev-team card: three name/role pairs stacked, then one paragraph */
.team-member-row {
  margin-bottom: var(--space-sm);
}

.team-member-row .team-member-name {
  margin-bottom: 0;
}

.team-member-row .team-member-role {
  margin-bottom: 0;
}

.team-member-row + .team-member-desc {
  margin-top: var(--space-xs);
}

/* ── BUILT BY — right-side download card ── */
.built-by-download {
  position: relative;
  flex: 1 1 38%;
  min-width: 0;
  align-self: flex-start;
  margin-top: 92px;              /* room for the phone frames peeking above */
  background: var(--color-green-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.built-by-download-phones {
  position: absolute;
  top: -92px;
  left: 0;
  right: 0;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* overlapping framed screenshots — same idea as .mission-crash-shot:
   rounded image, dark frame, offset + rotated, peeking past an edge */
.download-phone {
  border-radius: 22px;
  border: 5px solid #14181a;
  background: #14181a;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.download-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.download-phone-back {
  width: 118px;
  height: 165px;
  transform: rotate(-8deg);
  margin-right: -32px;
  margin-bottom: 14px;
}

.download-phone-front {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 200px;
  transform: rotate(5deg);
}

.built-by-download-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-dark);          /* black — sits on the light green card */
  margin-bottom: var(--space-sm);
}

.built-by-download-panel {
  background: var(--color-green-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.built-by-download-title {
  color: var(--color-white);              /* white — sits on the green panel */
  font-size: 1.4rem;
  margin-bottom: var(--space-xs);
}

.built-by-download-title span {
  color: var(--color-green-pale);
}

.built-by-download-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
  margin-bottom: var(--space-md);
}

/* reuse the Hero's .store-badge-row / .store-badge-box exactly —
   they already render white badge art on a coloured background */
.built-by-download .store-badge-row {
  justify-content: center;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.built-by-thanks {
  max-width: 720px;
  margin: var(--space-lg) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════
   BLOG — "Read Our Stories" (placeholder, launching soon)
   ══════════════════════════════════════════════════════════ */
.blog {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
  text-align: center;
  /* Contains the blog cards' [data-animate="fade-left"/"fade-right"]
     entrance transforms before they scroll into view — see the same
     note on .how-it-works. */
  overflow-x: hidden;
}

.blog-title {
  margin-left: auto;
  margin-right: auto;
}

.blog-title-green {
  color: var(--color-green-primary);
}

.blog-subtext {
  max-width: 620px;
  margin: 0 auto var(--space-xl);
  font-size: 1.05rem;
  color: var(--color-text-body);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: left;
}

/* white card, radius + shadow reused from .function-card */
.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* keep the [data-animate] reveal transition; hover only touches
     box-shadow so there's no transform-timing conflict */
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow var(--transition-medium);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
}

.blog-card-media {
  aspect-ratio: 362 / 200;
  overflow: hidden;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  padding: var(--space-md);
}

.blog-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-green-pale);
  color: var(--color-green-primary);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.blog-card-title {
  font-size: 1.15rem;
  color: var(--color-text-dark);
  margin-bottom: var(--space-xs);
}

.blog-card-desc {
  font-size: var(--fs-small);
  color: var(--color-text-body);
  line-height: 1.6;
}

.blog-note {
  margin: var(--space-lg) auto 0;
  max-width: 620px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.download {
  padding: var(--space-xl) 0;   /* ✏️ was --space-2xl (9rem) — tighter section-to-section gap */
  background: var(--color-text-dark);
  text-align: center;
}

.download .section-title {
  margin-left: auto;
  margin-right: auto;
}

.download-subtext {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-lg);
}

.download .hero-cta-row {
  justify-content: center;
}

.site-footer {
  /* Deep-to-mid green gradient instead of plain black, echoing the
     same brand green used everywhere else on the site. */
  background: linear-gradient(180deg, var(--color-green-dark) 0%, var(--color-green-primary) 130%);
  padding: var(--space-lg) 0 var(--space-sm);   /* ✏️ was --space-xl (6rem) top — tighter gap after Download */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--space-sm);
  /* Logo.png is already a white + brand-green wordmark on a
     transparent background (same asset the nav uses) — no invert
     filter needed, just a soft shadow to keep it crisp on green. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  display: block;
  background: transparent;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-small);
  margin-bottom: var(--space-md);
}

.footer-store-badges {
  margin-bottom: var(--space-md);
  /* The footer's brand column is narrower than Hero's, so two natural-
     size badges side by side don't always fit — wrap to a second line
     instead of compressing them (flex-shrink:0 above already stops
     the shrink; this is what lets the overflow go somewhere sane). */
  flex-wrap: wrap;
}

.footer-socials {
  display: flex;
  gap: var(--space-xs);
}

/* Circular badges holding the platform logos (<img class="social-icon">).
   White face so the dark logos (TikTok, X) read against the green
   footer; 6px padding keeps each logo fully inside the ring. When real
   profile URLs exist, just replace href="#" on each link. */
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 2px;      /* Facebook / Instagram logos are already circles — let them fill the ring */
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid rgba(230, 245, 236, 0.5);
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

/* TikTok / X aren't circles — a little more inset keeps their corners
   inside the ring instead of poking through it */
.footer-socials a:nth-child(n + 3) {
  padding: 8px;
}

.footer-socials a:hover {
  background: var(--color-green-pale);
  border-color: var(--color-green-bright);
  transform: translateY(-2px);
}

.footer-links h4,
.footer-contact h4 {
  color: var(--color-green-bright);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-small);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-green-bright);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-sm);
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
}

/* ══════════════════════════════════════════════════════════
   PARTNERS PAGE — three category bands (Doctors / Pharmacies /
   Labs), each a description + a grid of placeholder tiles. Tiles
   reuse .mission-stat-box's exact icon-badge + text shell (just
   without the count-up number), so no new card component is
   introduced for what's visually the same "icon + label" tile.
   ══════════════════════════════════════════════════════════ */
.partner-category {
  padding: var(--space-xl) 0;
  text-align: center;
}

.partner-category-alt {
  background: var(--color-white);
}

.partner-category-text {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--color-text-body);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--space-xl);
  text-align: left;
}

.partner-tile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-dark);
  line-height: 1.3;
}

.partner-tile-type {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.partner-badge-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-lg);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-green-pale);
  color: var(--color-green-primary);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
}

.partner-badge-note img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

@media (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ══════════════════════════════════════════════════════════
   REVIEWS PAGE — placeholder testimonial cards, clearly labeled
   as such. Card shell reuses .team-member-card's radius/shadow.
   ══════════════════════════════════════════════════════════ */
.reviews-section {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
  text-align: center;
}

.reviews-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto var(--space-xl);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-green-pale);
  color: var(--color-green-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

.reviews-notice img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: left;
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow var(--transition-medium);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-sm);
}

.testimonial-stars img {
  width: 16px;
  height: 16px;
}

.testimonial-quote {
  font-size: 0.95rem;
  color: var(--color-text-body);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-avatar img {
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.testimonial-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-dark);
}

.testimonial-role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — form panel + info panel side by side. The form
   panel is a solid green card so it can reuse .contact-form exactly
   as the footer defines it (white-on-dark inputs) — no separate
   light-mode input variant to maintain.
   ══════════════════════════════════════════════════════════ */
.contact-section {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: start;
}

.contact-form-panel {
  background: var(--gradient-green-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

.contact-form-panel h2 {
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.contact-form-panel .contact-form-note {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-small);
  margin-bottom: var(--space-md);
}

.contact-form-panel .contact-form {
  gap: var(--space-sm);
}

.contact-form-panel .contact-form input,
.contact-form-panel .contact-form textarea {
  padding: 14px 18px;
}

.contact-info-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.contact-info-panel h3 {
  margin-bottom: var(--space-md);
}

.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--space-md);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.contact-info-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-dark);
  margin-bottom: 2px;
}

.contact-info-value {
  font-size: 0.92rem;
  color: var(--color-text-body);
  line-height: 1.5;
}

.contact-info-panel .footer-socials {
  margin-top: var(--space-md);
}

.contact-info-panel .footer-socials a {
  background: var(--color-green-pale);
  border-color: rgba(0, 120, 50, 0.25);
}

.contact-info-panel .footer-socials a:hover {
  background: var(--color-white);
  border-color: var(--color-green-primary);
}

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

/* ══════════════════════════════════════════════════════════
   HOME PAGE SECTION TEASERS — trimmed eyebrow + two-tone title +
   2-3 sentences + "Learn More" button, standing in on the home page
   for what's now a full dedicated page. Three background variants
   so the section-to-section rhythm down the page still alternates
   the way the untrimmed sections used to, rather than reading as one
   long grey wall.
   ══════════════════════════════════════════════════════════ */
.section-teaser {
  padding: var(--space-xl) 0;
  text-align: center;
}

.section-teaser-light {
  background: var(--color-content-bg);
}

.section-teaser-white {
  background: var(--color-white);
}

.section-teaser-dark {
  background: var(--gradient-green-brand);
}

.section-teaser-dark .section-eyebrow {
  color: var(--color-green-bright);
}

.section-teaser .section-title {
  margin-left: auto;
  margin-right: auto;
}

.section-teaser-dark .section-title {
  color: var(--color-white);
}

/* two-tone heading — same pattern as .why-built-title-green /
   .mission-title-green / .faq-title-green / .functions-title-green */
.section-teaser-title-green {
  color: var(--color-green-primary);
}

.section-teaser-text {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  font-size: 1.05rem;
  color: var(--color-text-body);
}

.section-teaser-dark .section-teaser-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Card/stat preview grids sit between the intro copy and the "Learn
   More" button on three teasers (Partners/About/Reviews) — give them
   breathing room on both sides so the button doesn't hug the grid.
   Scoped to .section-teaser so features.html/about.html/reviews.html's
   own (last-in-section) copies of these same grids are unaffected. */
.section-teaser .functions-grid,
.section-teaser .mission-stat-grid {
  margin-bottom: var(--space-lg);
}

/* Optional visual half — a couple of teasers pair the text with a
   small phone mockup or icon, same left-content/right-visual split
   .mission-panel-consultation and .built-by-layout already use, just
   lighter. Teasers without a visual just centre their text (no
   .section-teaser-layout wrapper needed). */
.section-teaser-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  text-align: left;
  margin-top: var(--space-lg);
}

.section-teaser-layout .section-teaser-copy {
  flex: 1;
  max-width: 480px;
}

.section-teaser-layout .section-teaser-text {
  margin: 0 0 var(--space-md);
}

.section-teaser-visual {
  flex-shrink: 0;
}

.section-teaser-visual .phone-frame {
  width: 220px;
}

@media (max-width: 900px) {
  .section-teaser-layout {
    flex-direction: column;
    text-align: center;
  }
  .section-teaser-layout .section-teaser-copy {
    max-width: 100%;
  }
}
/* ══════════════════════════════════════════════════════════
   DEDICATED-PAGE HEROES — each dedicated page gets its own hero
   treatment so it reads as a page in its own right rather than the
   Home teaser at a different URL. All built from the same tokens
   (brand greens, Poppins/Inter, radius/shadow scale) — only the
   background, layout and hero visual change per page:

     .page-hero-dark       mission   near-black, echoes the Problem panel
     .page-hero-cream      how-it-works  cream-green + process-flow graphic
     .page-hero-white      features  white + phone-mockup collage
     .page-hero-corporate  partners  solid --color-green-dark + stat strip
     .page-hero-warm       our-team  warm light + photo-forward collage

   Utility pages (contact/faq/blog) keep the plain .page-header, just
   made shorter via .page-header-compact so they stay visibly lighter
   than these. The three light heroes set <body data-nav-solid> (see
   nav.js) so the nav never sits white-on-light.
   ══════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 var(--space-xl);
}

.page-hero > .section-container {
  position: relative;
  z-index: 1;
}

.page-hero-title {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.1;
  margin: var(--space-xs) 0 var(--space-sm);
}

.page-hero-subtext {
  font-size: 1.1rem;
  max-width: 560px;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Outline buttons — secondary sibling of .btn-primary / .btn-white for
   hero CTA pairs. -light is the on-dark variant. */
.btn-outline {
  background: transparent;
  color: var(--color-green-primary);
  border: 2px solid var(--color-green-primary);
}

.btn-outline:hover {
  background: var(--color-green-pale);
  transform: translateY(-3px);
}

.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  transform: translateY(-3px);
}

/* two-column hero: copy left, visual right */
.page-hero-split > .section-container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-lg);
  align-items: center;
}

/* ── MISSION — dark ── */
.page-hero-dark {
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
  text-align: center;
  padding-bottom: var(--space-lg);
}

/* same slow red "urgency" pulse the Problem panel uses (reuses its
   urgencyPulse keyframes), so hero → first panel feels like one tone */
.page-hero-dark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 76, 60, 0.12) 0%, transparent 70%);
  animation: urgencyPulse 3s ease-in-out infinite;
  pointer-events: none;
}

.page-hero-dark .page-hero-title {
  color: var(--color-white);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero-accent {
  color: var(--color-hero-overlay);
}

/* same reason as .page-header's eyebrow above — bright mint reads on
   both the near-black and the deep-green hero */
.page-hero-dark .section-eyebrow.light,
.page-hero-corporate .section-eyebrow.light {
  color: var(--color-hero-overlay);
}

.page-hero-dark .page-hero-subtext {
  color: rgba(255, 255, 255, 0.75);
  margin: 0 auto;
}

.hero-chapters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-md);
}

.hero-chapter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero-chapter span:first-child {
  color: var(--color-hero-overlay);
  font-weight: 800;
}

.hero-chapter:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--color-hero-overlay);
}

/* ── HOW IT WORKS — cream + process-flow graphic ── */
.page-hero-cream {
  background: linear-gradient(180deg, #f6fcf8 0%, var(--color-content-bg) 100%);
}

.page-hero-cream::before {
  content: '';
  position: absolute;
  top: -12%;
  right: -10%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 140, 60, 0.13) 0%, transparent 70%);
}

.page-hero-cream .page-hero-title,
.page-hero-white .page-hero-title,
.page-hero-warm .page-hero-title {
  color: var(--color-text-dark);
}

.page-hero-accent-green {
  color: var(--color-green-primary);
}

/* The graphic: six step "stations" laid out as a snake —
   1 → 2 → 3 across the top, 4 ← 5 ← 6 back along the bottom (so the
   reading order is the path order) — joined by animated dashed lines. */
.flow-graphic {
  --fg-badge: 88px;
  --fg-gap-x: 34px;
  --fg-gap-y: 72px;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

/* The card's white face and the offset pale-green plate behind it are
   both pseudo-elements at negative z-index: [data-animate] gives this
   element its own stacking context, so a z-index:-1 plate on a
   background-painting parent would land ON TOP of that background. */
.flow-graphic::before,
.flow-graphic::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-lg);
}

.flow-graphic::before {
  inset: -22px -22px 22px 22px;
  z-index: -2;
  background: var(--color-green-pale);
}

.flow-graphic::after {
  inset: 0;
  z-index: -1;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.flow-graphic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fg-gap-y) var(--fg-gap-x);
}

.flow-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.flow-node-1 { grid-area: 1 / 1; }
.flow-node-2 { grid-area: 1 / 2; }
.flow-node-3 { grid-area: 1 / 3; }
.flow-node-4 { grid-area: 2 / 3; }
.flow-node-5 { grid-area: 2 / 2; }
.flow-node-6 { grid-area: 2 / 1; }

.flow-node-badge {
  position: relative;
  width: var(--fg-badge);
  height: var(--fg-badge);
  border-radius: 50%;
  background: var(--color-green-pale);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-green-primary), var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-node-badge img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.flow-node-num {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--gradient-green-brand);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-node-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-dark);
  line-height: 1.2;
}

/* connectors — a dashed line whose dashes march in the direction of
   travel (background-position animation, no layout/paint cost beyond
   the 2px strip itself) */
.flow-node::after {
  content: '';
  position: absolute;
  top: calc(var(--fg-badge) / 2 - 1px);
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--color-green-primary) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  opacity: 0.55;
  animation: flowMarchRight 1s linear infinite;
}

.flow-node-1::after,
.flow-node-2::after {
  left: calc(50% + var(--fg-badge) / 2 + 4px);
  width: calc(100% + var(--fg-gap-x) - var(--fg-badge) - 8px);
}

.flow-node-4::after,
.flow-node-5::after {
  right: calc(50% + var(--fg-badge) / 2 + 4px);
  width: calc(100% + var(--fg-gap-x) - var(--fg-badge) - 8px);
  animation-name: flowMarchLeft;
}

.flow-node-3::after {
  top: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: var(--fg-gap-y);
  background-image: repeating-linear-gradient(180deg, var(--color-green-primary) 0 8px, transparent 8px 16px);
  background-size: 2px 16px;
  animation-name: flowMarchDown;
}

.flow-node-6::after {
  display: none;
}

@keyframes flowMarchRight { to { background-position: 16px 0; } }
@keyframes flowMarchLeft  { to { background-position: -16px 0; } }
@keyframes flowMarchDown  { to { background-position: 0 16px; } }

.flow-graphic-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-green-primary);
}

/* ── FEATURES — white + phone collage ── */
.page-hero-white {
  background: var(--color-white);
  padding-bottom: var(--space-md);
}

.page-hero-white::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -12%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-green-pale) 0%, transparent 68%);
}

.phone-collage {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 580px;
  margin: 0 auto;
}

.collage-phone {
  position: absolute;
}

.collage-phone .phone-frame {
  width: 100%;
  border-radius: 34px;
  padding: 10px;
  animation: collageFloat 6s ease-in-out infinite;
}

.collage-phone .phone-screen {
  border-radius: 25px;
}

.collage-phone .phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.collage-phone-center {
  left: 50%;
  top: 0;
  width: 250px;
  margin-left: -125px;
  z-index: 3;
}

.collage-phone-left {
  left: 0;
  top: 84px;
  width: 200px;
  transform: rotate(-8deg);
  z-index: 2;
}

.collage-phone-left .phone-frame { animation-delay: -2s; }

.collage-phone-right {
  right: 0;
  top: 104px;
  width: 200px;
  transform: rotate(8deg);
  z-index: 1;
}

.collage-phone-right .phone-frame { animation-delay: -4s; }

@keyframes collageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.collage-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.collage-chip img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.collage-chip-a { top: 40px; left: 4px; }
.collage-chip-b { bottom: 30px; right: 0; }

/* ── PARTNERS — solid deep green, corporate ── */
.page-hero-corporate {
  background-color: var(--color-green-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  padding-bottom: 0;
}

.page-hero-corporate .page-hero-title {
  color: var(--color-white);
  max-width: 760px;
}

.page-hero-corporate .page-hero-subtext {
  color: rgba(255, 255, 255, 0.8);
  max-width: 620px;
}

.hero-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

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

.hero-stat + .hero-stat {
  padding-left: var(--space-md);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-white);
}

.hero-stat-label {
  margin-top: 6px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ── OUR TEAM — warm, photo-forward ── */
.page-hero-warm {
  background: linear-gradient(135deg, #fff8ee 0%, #fdebd3 48%, #e9f6ee 100%);
}

.page-hero-warm::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -8%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 120, 0.28) 0%, transparent 70%);
}

.page-hero-warm.page-hero-split > .section-container {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.team-hero-photo {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

/* offset pale-green plate behind the photo */
.team-hero-photo::before {
  content: '';
  position: absolute;
  inset: 26px -20px -20px 26px;
  border-radius: 30px;
  background: var(--color-green-pale);
}

/* The photo is very wide (1584x672), so `cover` in a taller card cut
   people off. Instead the WHOLE photo is shown (object-fit: contain)
   and the spare space above/below is filled with a soft blurred copy
   of the same photo, so the card can be larger without cropping. */
.team-hero-photo-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 30px;
  overflow: hidden;
  background: var(--color-green-dark);
  box-shadow: var(--shadow-lg);
}

.team-hero-photo-frame::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: url('../images/hero-background.jpeg') center / cover no-repeat;
  filter: blur(22px) saturate(1.1);
  opacity: 0.85;
}

.team-hero-photo-frame img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.team-hero-badge,
.team-hero-note {
  position: absolute;
  z-index: 2;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.team-hero-badge {
  left: -18px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--radius-pill);
}

.team-hero-avatars {
  display: flex;
}

.team-hero-avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: var(--color-white);
}

.team-hero-avatars img + img {
  margin-left: -12px;
}

.team-hero-badge span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-dark);
  line-height: 1.25;
}

.team-hero-note {
  top: -18px;
  right: -14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-dark);
}

.team-hero-note img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

/* ── UTILITY PAGES — contact / faq / blog: same gradient header, just
   noticeably shorter and quieter than the heroes above ── */
.page-header-compact {
  /* top padding still has to clear the fixed nav (up to two rows tall
     on desktop) — only the space BELOW the text is trimmed */
  padding: 150px 0 var(--space-md);
}

.page-header-compact::before {
  width: 320px;
  height: 320px;
}

.page-header-compact .page-header-title {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

.page-header-compact .page-header-subtext {
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════
   MISSION — "Why This Matters" + before/after comparison
   ══════════════════════════════════════════════════════════ */
.why-matters {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
}

.why-matters-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-xl);
  align-items: start;
}

.why-matters-head .section-title {
  margin-bottom: var(--space-md);
}

.pull-quote {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-green-primary);
}

.pull-quote p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-text-dark);
}

.why-matters-body p {
  font-size: 1.05rem;
  line-height: 1.75;
}

.why-matters-body p + p {
  margin-top: var(--space-sm);
}

.compare {
  padding: var(--space-xl) 0;
  background: var(--color-white);
  text-align: center;
}

.compare .section-title {
  margin-left: auto;
  margin-right: auto;
}

.compare-subtext {
  max-width: 620px;
  margin: 0 auto var(--space-lg);
  font-size: 1.05rem;
}

.compare-grid {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.compare-head,
.compare-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.compare-head h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
}

.compare-head-without h3 {
  background: var(--color-silver);
  color: var(--color-text-dark);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.compare-head-with h3 {
  background: var(--gradient-green-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-green-glow);
}

.compare-area {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.compare-cell {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
}

.compare-cell p {
  font-size: 0.98rem;
  line-height: 1.55;
}

.compare-cell-without {
  background: var(--color-silver);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.compare-cell-without p {
  color: var(--color-text-muted);
}

.compare-cell-with {
  background: var(--color-green-pale);
  box-shadow: inset 0 0 0 1px rgba(0, 120, 50, 0.18);
}

.compare-cell-with p {
  color: var(--color-text-dark);
  font-weight: 500;
}

.compare-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1;
}

.compare-cell-without .compare-mark,
.compare-head-without .compare-mark {
  background: #f6dcd9;
  color: #c0392b;
}

.compare-cell-with .compare-mark {
  background: var(--gradient-green-brand);
  color: var(--color-white);
}

.compare-head-with .compare-mark {
  background: var(--color-white);
  color: var(--color-green-primary);
}

/* per-cell "Without / With" tag — only shown once the two columns
   stack (see the 768px block below), where the column headings are
   no longer alongside the cells */
.compare-tag {
  display: none;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.compare-cell-without .compare-tag { color: #c0392b; }
.compare-cell-with .compare-tag { color: var(--color-green-primary); }

/* ══════════════════════════════════════════════════════════
   HOW IT WORKS — "See It In Action" storyboard + process FAQ
   ══════════════════════════════════════════════════════════ */
.story {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
  text-align: center;
}

.story .section-title {
  margin-left: auto;
  margin-right: auto;
}

.story-intro {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.story-intro-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-intro-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.story-intro p {
  font-size: 1rem;
}

.story-intro strong {
  color: var(--color-text-dark);
  font-family: var(--font-heading);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: left;
}

.story-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* a "peek" of the real screen (top of the screenshot, cropped) on a
   pale-green plate — reads as a storyboard frame, not a second phone */
.story-shot {
  position: relative;
  height: 216px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-green-pale);
  box-shadow: inset 0 0 0 1px rgba(0, 120, 50, 0.16);
}

.story-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.story-card-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-green-bright);
}

.story-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-green-brand);
  color: var(--color-white);
  letter-spacing: 0;
}

.story-card h3 {
  margin-bottom: 6px;
}

.story-card p {
  font-size: 0.95rem;
  line-height: 1.6;
}

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

.process-faq {
  background: var(--color-white);
}

/* ══════════════════════════════════════════════════════════
   FEATURES — preview strip + six mini feature pages
   ══════════════════════════════════════════════════════════ */
.features-preview {
  padding: var(--space-lg) 0 var(--space-md);
  background: var(--color-white);
  text-align: center;
}

.features-preview .section-title {
  margin: 0 auto var(--space-xs);
  font-size: 1.6rem;
}

.features-preview-note {
  max-width: 520px;
  margin: 0 auto;
  font-size: 0.98rem;
}

/* the carousel, shrunk to a supporting visual */
.carousel-compact {
  margin-top: var(--space-sm);
  padding: 26px 0;
}

.carousel-compact .carousel-track {
  gap: 20px;
}

.carousel-compact .carousel-item {
  width: 132px;
  border-radius: var(--radius-sm);
}

.features-intro {
  padding: var(--space-xl) 0 var(--space-lg);
  background: var(--color-content-bg);
  text-align: center;
}

.features-intro .section-title {
  margin-left: auto;
  margin-right: auto;
}

.features-intro-text {
  max-width: 640px;
  margin: 0 auto var(--space-md);
  font-size: 1.05rem;
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-dark);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.feature-chip img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

.feature-chip:hover {
  background: var(--color-green-pale);
  color: var(--color-green-primary);
  transform: translateY(-2px);
}

.feature-block {
  padding: var(--space-xl) 0;
  background: var(--color-content-bg);
}

.feature-block-alt {
  background: var(--color-white);
}

.feature-block > .section-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: center;
}

.feature-block-reverse .feature-copy {
  order: 2;
}

.feature-copy .section-title {
  margin-bottom: var(--space-sm);
}

.feature-lead {
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
}

.feature-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--color-text-body);
}

.feature-point-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-point-icon img {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

/* visual half: one large phone + a smaller one overlapping it, on a
   soft blob, with a floating label chip */
.feature-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-visual-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-green-pale) 0%, transparent 70%);
}

.feature-block-alt .feature-visual-blob {
  background: radial-gradient(circle, var(--color-content-bg) 0%, transparent 70%);
}

.feature-phone {
  position: absolute;
  z-index: 1;
}

.feature-phone .phone-frame {
  width: 100%;
  aspect-ratio: auto;   /* the screenshot sets the phone's height, so nothing is cropped */
  border-radius: 36px;
  padding: 11px;
}

.feature-phone .phone-screen {
  height: auto;
  border-radius: 26px;
  background: var(--color-white);
}

.feature-phone .phone-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* screenshots with a different native ratio (e.g. the tracking screen)
   get the standard phone proportions, letterboxed on white */
.feature-phone-fixed .phone-frame {
  aspect-ratio: 383 / 780;
}

.feature-phone-fixed .phone-screen {
  height: 100%;
}

.feature-phone-fixed .phone-screen img {
  height: 100%;
  object-fit: contain;
}

.feature-phone-main {
  width: 250px;
  left: calc(50% - 150px);
  z-index: 2;
}

.feature-phone-side {
  width: 176px;
  left: calc(50% + 50px);
  top: 60%;
  margin-top: -160px;
  transform: rotate(7deg);
}

.feature-block-reverse .feature-phone-main { left: calc(50% - 100px); }
.feature-block-reverse .feature-phone-side { left: calc(50% - 226px); transform: rotate(-7deg); }

.feature-visual-chip {
  position: absolute;
  z-index: 3;
  top: 34px;
  right: 6%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.feature-block-reverse .feature-visual-chip {
  right: auto;
  left: 6%;
}

.feature-visual-chip img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1749%) hue-rotate(140deg) brightness(94%) contrast(103%);
}

/* ══════════════════════════════════════════════════════════
   PARTNERS — "How Partnership Works" 4-step mini process
   ══════════════════════════════════════════════════════════ */
.partner-process {
  padding: var(--space-xl) 0;
  background: var(--color-white);
  text-align: center;
}

.partner-process .section-title {
  margin-left: auto;
  margin-right: auto;
}

.partner-process-text {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
}

.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  text-align: left;
}

/* the connecting line runs behind the number badges (same idea as
   the How It Works spine, turned horizontal) */
.process-steps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-green-pale), var(--color-green-bright), var(--color-green-pale));
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-xs);
  text-align: center;
}

.process-step-number {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: var(--gradient-green-brand);
  box-shadow: 0 0 0 6px var(--color-white), var(--shadow-green-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-white);
}

.process-step-card {
  flex: 1;   /* equal-height cards across the row */
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-content-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.process-step-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.process-step-card h3 {
  margin-bottom: 6px;
}

.process-step-card p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   OUR TEAM — values + careers teaser
   ══════════════════════════════════════════════════════════ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  text-align: left;
}

.values-grid .function-card {
  padding: var(--space-md) var(--space-sm);
  background: var(--color-white);
}

.values-grid .function-desc {
  font-size: 0.95rem;
}

.join-team {
  padding: 0 0 var(--space-xl);
  background: var(--color-content-bg);
}

.join-team-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--gradient-green-brand);
  box-shadow: var(--shadow-lg);
}

.join-team-panel::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 252, 179, 0.2) 0%, transparent 70%);
}

.join-team-copy,
.join-team-roles {
  position: relative;
  z-index: 1;
}

.join-team-copy .section-eyebrow.light {
  color: var(--color-green-pale);
}

.join-team-copy .section-title {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.join-team-copy p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
}

.join-team-roles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.join-role {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-white);
}

.join-role img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════
   ABOUT — "What Makes Us Different"
   ══════════════════════════════════════════════════════════ */
.different {
  padding: var(--space-xl) 0;
  background: var(--color-white);
  text-align: center;
}

.different .section-title {
  margin-left: auto;
  margin-right: auto;
}

.different-text {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  font-size: 1.05rem;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  text-align: left;
}

.diff-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-content-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.diff-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.diff-card .function-icon {
  margin-bottom: 4px;
  width: 52px;
  height: 52px;
  background: var(--color-white);
}

.diff-card h3 {
  font-size: 1.1rem;
}

.diff-line {
  font-size: 0.9rem;
  line-height: 1.5;
}

.diff-tag {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.diff-old {
  color: var(--color-text-muted);
}

.diff-old .diff-tag {
  color: #c0392b;
}

.diff-new {
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 120, 50, 0.3);
  color: var(--color-text-dark);
  font-weight: 500;
}

.diff-new .diff-tag {
  color: var(--color-green-primary);
}

/* ══════════════════════════════════════════════════════════
   REVIEWS — aggregate rating block + category filter tabs
   ══════════════════════════════════════════════════════════ */
.reviews-summary {
  max-width: 900px;
  margin: 0 auto var(--space-lg);
}

.reviews-summary .mission-stat-grid {
  margin-top: 0;
}

.reviews-summary .mission-stat-icon img.is-star {
  filter: none;
}

.review-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.review-filter {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-body);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.review-filter:hover {
  color: var(--color-green-primary);
  transform: translateY(-2px);
}

.review-filter.is-active {
  background: var(--gradient-green-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-green-glow);
}

/* ── RESPONSIVE — new sections ── */
@media (max-width: 1100px) {
  .values-grid,
  .diff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }

  .process-steps::before {
    display: none;
  }

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

@media (max-width: 900px) {
  .page-hero {
    padding: 120px 0 var(--space-lg);
  }

  .page-hero-split > .section-container,
  .page-hero-warm.page-hero-split > .section-container,
  .feature-block > .section-container,
  .why-matters-layout,
  .join-team-panel {
    grid-template-columns: 1fr;
  }

  .page-hero-split > .section-container {
    gap: var(--space-xl);
  }

  .why-matters-layout {
    gap: var(--space-md);
  }

  .feature-block > .section-container {
    gap: var(--space-md);
  }

  /* copy always above its visual once stacked, whichever side it sat on */
  .feature-block-reverse .feature-copy {
    order: 0;
  }

  .join-team-panel {
    padding: var(--space-md);
  }

  .hero-stat-strip {
    grid-template-columns: 1fr;
  }

  .hero-stat,
  .hero-stat + .hero-stat {
    padding: var(--space-sm) 0;
    border-left: none;
  }

  .hero-stat + .hero-stat {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 768px) {
  .page-header-compact {
    padding: 118px 0 var(--space-md);
  }

  .compare-head {
    display: none;
  }

  .compare-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .compare-tag {
    display: block;
  }

  .phone-collage {
    height: 460px;
    max-width: 380px;
  }

  .collage-phone-center { width: 200px; margin-left: -100px; }
  .collage-phone-left { width: 150px; top: 70px; left: 14px; }
  .collage-phone-right { width: 150px; top: 88px; right: 14px; }
  .collage-chip-a { top: 20px; left: 0; }
  .collage-chip-b { bottom: 10px; }

  .feature-visual {
    min-height: 460px;
  }

  .feature-phone-main { width: 210px; left: calc(50% - 125px); }
  .feature-phone-side { width: 150px; left: calc(50% + 30px); margin-top: -130px; }
  .feature-block-reverse .feature-phone-main { left: calc(50% - 85px); }
  .feature-block-reverse .feature-phone-side { left: calc(50% - 190px); }
}

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

  /* 4-step process becomes a vertical thread on the left */
  .process-steps {
    gap: var(--space-md);
  }

  .process-steps::before {
    display: block;
    top: 26px;
    bottom: 26px;
    left: 26px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, var(--color-green-pale), var(--color-green-bright), var(--color-green-pale));
  }

  .process-step {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 0;
    text-align: left;
  }

  .process-step-number {
    flex-shrink: 0;
    margin: 0;
  }

  .process-step-card {
    flex: 1;
    min-width: 0;
  }

  .story-card {
    grid-template-columns: 1fr;
  }

  .story-shot {
    height: 190px;
  }

  .story-intro {
    flex-direction: column;
    text-align: center;
  }

  .flow-graphic {
    --fg-badge: 60px;
    --fg-gap-x: 14px;
    --fg-gap-y: 50px;
    padding: var(--space-sm);
  }

  .flow-node-badge img {
    width: 28px;
    height: 28px;
  }

  .flow-node-label {
    font-size: 0.78rem;
  }

  .flow-graphic::before {
    inset: -12px -10px 12px 10px;
  }

  .flow-graphic {
    padding-top: var(--space-md);
  }

  .team-hero-photo::before {
    inset: 16px -10px -10px 16px;
  }

  .team-hero-badge {
    left: -6px;
    bottom: -34px;
  }

  .team-hero-note {
    right: -6px;
  }

  .pull-quote p {
    font-size: 1.2rem;
  }

  .carousel-compact .carousel-item {
    width: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-node::after,
  .collage-phone .phone-frame,
  .page-hero-dark::before {
    animation: none;
  }
}

.reviews-summary-note {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}