/* =====================================================
   DESIGN TOKENS
===================================================== */
:root {
  /* WhatsApp-green palette */
  --color-primary: #25D366;
  --color-primary-dark: #2abe60;
  --color-primary-darker: #25D366;
  --color-deep: #075E54;
  --color-ink: #0B1F17;
  --color-text: #2B3B34;
  --color-muted: #5F7169;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F3FBF6;
  --color-bg-deep: #06231C;
  --color-border: #E1EEE6;
  --color-white: #FFFFFF;
  --color-warn-bg: #FFF7E6;

  /* Typography */
  --font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Radii & shadows */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(7, 94, 84, 0.06);
  --shadow-md: 0 8px 24px rgba(7, 94, 84, 0.10);
  --shadow-lg: 0 20px 50px rgba(7, 94, 84, 0.14);

  /* Layout */
  --container-w: 1180px;
  --section-pad: 96px;
}

/* =====================================================
   RESET
===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
p { margin: 0 0 16px; }
:focus-visible { outline: 3px solid var(--color-primary-darker); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =====================================================
   LAYOUT UTILITIES
===================================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.container-sm { max-width: 760px; }
.hero-tight { padding-bottom: 20px; }
.section-notop { padding-top: 0; }
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-bg-deep); color: #DCEFE7; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-darker);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.section-dark .eyebrow {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
  color: var(--color-primary);
}
.section-desc { color: var(--color-muted); font-size: 17px; }
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }
.text-center { text-align: center; }

/* =====================================================
   BUTTONS
===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform 0.18s cubic-bezier(.16,.84,.44,1), box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn-outline:hover { border-color: var(--color-primary-darker); color: var(--color-primary-darker); transform: translateY(-2px); }
.btn:active { transform: scale(0.96) !important; }
.section-dark .btn-outline { border-color: rgba(255,255,255,0.25); color: #fff; }
.btn-lg { font-size: 16px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* =====================================================
   HEADER / NAV
===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav-wrap {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-ink);
  min-width: 0; /* allow this flex child to shrink below its content's natural width */
}
.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-darker));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links > * + * { margin-left: 32px; } /* fallback for browsers without flex gap support */
.nav-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--color-primary-darker); }
.nav-actions { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.nav-actions .btn { padding: 11px 22px; font-size: 14px; }
@media (max-width: 400px) {
  .nav-wrap { padding: 12px 14px; gap: 10px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 9px 14px; font-size: 13px; }
  .brand-name { max-width: 96px; }
  .brand-mark { width: 30px; height: 30px; font-size: 14px; }
}
.nav-toggle {
  display: none;
  background: none; border: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 22px; height: 2px; background: var(--color-ink);
  position: relative; transition: 0.2s;
}
.nav-toggle span::before { position: absolute; top: -7px; width: 22px; height: 2px; background: var(--color-ink); transition: transform 0.25s ease, top 0.2s ease; }
.nav-toggle span::after { position: absolute; top: 7px; width: 22px; height: 2px; background: var(--color-ink); transition: transform 0.25s ease, top 0.2s ease; }
.nav-toggle.is-active span { background: transparent; }
.nav-toggle.is-active span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-active span::after { top: 0; transform: rotate(-45deg); }

/* =====================================================
   NAV DROPDOWN / MEGA MENU
===================================================== */
.nav-item { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; font: inherit;
  font-size: 15px; font-weight: 600; color: var(--color-text);
  padding: 0;
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.active { color: var(--color-primary-darker); }
.nav-dropdown-trigger .caret { display: inline-flex; color: var(--color-muted); transition: transform 0.2s ease; }
.nav-dropdown-trigger:hover .caret { color: var(--color-primary-darker); }
.nav-item.open .nav-dropdown-trigger .caret,
.nav-item:hover .nav-dropdown-trigger .caret { transform: rotate(180deg); }

.mega-panel, .dropdown-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 200;
}
.dropdown-panel { left: 0; transform: translateX(0) translateY(8px); width: 250px; padding: 18px; }
.mega-panel { width: 620px; padding: 28px; }

.nav-item:hover .mega-panel, .nav-item:hover .dropdown-panel,
.nav-item.open .mega-panel, .nav-item.open .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-item.open .dropdown-panel, .nav-item:hover .dropdown-panel { transform: translateX(0) translateY(0); }

.mega-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mega-col-title { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 10px; }
.mega-link { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); }
.mega-link:hover { background: var(--color-bg-alt); }
.mega-panel-wide { width: 640px; padding: 24px; }
.mega-panel-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 2px 40px;
}
.mega-panel-grid2 .mega-link { padding: 10px 8px; }
.mega-link-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1180px) {
  .mega-panel-wide { width: 520px; }
  .mega-panel-grid2 { gap: 2px 24px; }
}
.mega-link strong { display: block; font-size: 14px; color: var(--color-ink); }
.mega-link small { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.mega-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.mega-highlight { display: flex; align-items: center; gap: 10px; }
.mega-highlight-badge { background: var(--color-primary); color: #06231C; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); }
.mega-highlight strong { display: block; font-size: 13.5px; color: var(--color-ink); }
.mega-highlight small { display: block; font-size: 12px; color: var(--color-muted); }
.mega-viewall { font-size: 13.5px; font-weight: 700; color: var(--color-primary-darker); white-space: nowrap; }

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
}
.dropdown-link:hover { background: var(--color-bg-alt); color: var(--color-primary-darker); }
.dropdown-panel-compact { width: 200px; padding: 10px; }
.dropdown-badge-new {
  background: #7C3AED;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.dropdown-viewall {
  display: block;
  margin-top: 6px;
  padding: 12px 12px 4px;
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary-darker);
}

@media (max-width: 880px) {
  .mega-panel, .dropdown-panel { display: none; }
}
.mobile-menu {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height 0.35s cubic-bezier(.16,.84,.44,1), opacity 0.25s ease, transform 0.3s cubic-bezier(.16,.84,.44,1);
}
.mobile-menu.open {
  max-height: 700px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
}
.mobile-menu .container {
  max-width: var(--container-w);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(7, 94, 84, 0.14);
  border: 1px solid var(--color-border);
}
/* Hard guard: the mobile menu and its trigger must never render at desktop
   widths, regardless of any .open/.is-active class state (defends against
   stray JS state, not just hiding the button that toggles it). */
@media (min-width: 881px) {
  .mobile-menu, .mobile-menu.open, .nav-toggle {
    display: none !important;
    max-height: 0 !important;
  }
}

/* Mobile accordion (Features / Integrations submenus) */
.mobile-accordion { border-bottom: 1px solid var(--color-border); padding: 4px 0; }
.mobile-accordion summary { padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mobile-accordion summary::-webkit-details-marker { display: none; }
.mobile-accordion summary::after { content: '+'; color: var(--color-primary-darker); font-weight: 800; }
.mobile-accordion[open] summary::after { content: '−'; }
.mobile-accordion a { display: block; padding: 10px 0 10px 14px; font-size: 14px; color: var(--color-muted); }
/* .mega-link items reused inside the mobile accordion (Features) need to win
   over the generic ".mobile-accordion a" rule above, which otherwise has
   higher specificity and would flatten them back to plain text links. */
.mobile-accordion a.mega-link { display: flex; padding: 10px 6px; font-size: inherit; color: inherit; }
.mobile-accordion a.mega-link:hover { background: var(--color-bg-alt); }

.mobile-view-all-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 6px;
  margin: 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-darker);
  cursor: pointer;
}
.mobile-view-all-btn:hover { text-decoration: underline; }
.mobile-feature-extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.16,.84,.44,1), opacity 0.25s ease;
}
.mobile-feature-extra.expanded { max-height: 900px; opacity: 1; }

/* =====================================================
   HERO
===================================================== */
.hero {
  position: relative;
  padding: 88px 0 60px;
  background: radial-gradient(1100px 500px at 80% -10%, rgba(37,211,102,0.14), transparent 60%), var(--color-bg);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -220px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,211,102,0.22), transparent 70%);
  filter: blur(10px);
  animation: heroGlowDrift 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes heroGlowDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-40px, 30px) scale(1.08); }
}
.hero-grid { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: 52px;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--color-primary-darker); }
.hero-lede {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 540px;
  margin-bottom: 32px;
}
/* Page-load stagger entrance (progressive enhancement — visible by default without JS) */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .hero h1,
.js .hero-lede,
.js .hero .btn-row,
.js .hero .badge-row,
.js .hero-art {
  animation: fadeUpIn 0.75s cubic-bezier(.16,.84,.44,1) both;
}
.js .hero h1 { animation-delay: 0.02s; }
.js .hero-lede { animation-delay: 0.12s; }
.js .hero .btn-row { animation-delay: 0.22s; }
.js .hero .badge-row { animation-delay: 0.32s; }
.js .hero-art { animation-delay: 0.18s; }
.badge-row { display: flex; align-items: center; gap: 18px; margin-top: 36px; flex-wrap: wrap; }
.partner-badge {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 8px;
  font-size: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.partner-badge .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: #06231C; font-weight: 800; font-size: 13px; }
.hero-art {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-deep), var(--color-bg-deep));
  padding: 34px;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.chat-mock { background: rgba(255,255,255,0.06); border-radius: var(--radius-md); padding: 20px; }
.chat-bubble { background: #fff; color: var(--color-ink); padding: 12px 16px; border-radius: 14px 14px 14px 4px; max-width: 80%; margin-bottom: 12px; font-size: 14px; box-shadow: var(--shadow-sm); }
.chat-bubble.out { background: var(--color-primary); color: #06231C; margin-left: auto; border-radius: 14px 14px 4px 14px; }

/* =====================================================
   LOGO STRIP
===================================================== */
.logo-strip { padding: 48px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.logo-strip .kicker { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 28px; }
.logo-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.logo-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 140px; height: 44px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  background: var(--color-bg-alt);
}

/* =====================================================
   STATS
===================================================== */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.stat-card {
  text-align: center;
  padding: 28px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.stat-num { font-family: var(--font-heading); font-size: 34px; font-weight: 800; color: var(--color-primary-darker); }
.stat-label { font-size: 14px; color: var(--color-muted); margin-top: 4px; }
.stats-bar-3col { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
@media (max-width: 640px) { .stats-bar.stats-bar-3col { grid-template-columns: 1fr; } }

/* =====================================================
   TESTIMONIAL (large single)
===================================================== */
.testimonial-feature {
  margin-top: 64px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: flex;
  gap: 28px;
  align-items: center;
}
.testimonial-feature .avatar { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--color-primary-darker); }
.testimonial-feature.centered { flex-direction: column; text-align: center; }
.testimonial-feature.centered .avatar { margin-bottom: 8px; }
.testimonial-stars { color: #F5B400; font-size: 15px; letter-spacing: 3px; margin-top: 14px; }
.testimonial-feature blockquote { font-size: 19px; font-style: italic; color: var(--color-ink); margin: 0 0 10px; }
.testimonial-feature cite { font-weight: 700; font-style: normal; color: var(--color-muted); font-size: 14px; }

/* =====================================================
   SCROLL-REVEAL (progressive enhancement, JS-gated)
   Targets existing component classes directly — no markup
   changes needed, works the same on every page.
===================================================== */
.js .feature-card,
.js .checklist-card,
.js .method-copy,
.js .method-visual,
.js .testimonial-feature,
.js .stat-card,
.js .section-head {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1);
}
.js .feature-card.in-view,
.js .checklist-card.in-view,
.js .method-copy.in-view,
.js .method-visual.in-view,
.js .testimonial-feature.in-view,
.js .stat-card.in-view,
.js .section-head.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* plan-card gets an opacity-only reveal — it has its own permanent transform
   (the "Most Popular" card is lifted -8px) that a translateY reveal would
   otherwise clobber back to 0 once revealed. */
.js .plan-card { opacity: 0; transition: opacity 0.7s cubic-bezier(.16,.84,.44,1); }
.js .plan-card.in-view { opacity: 1; }
/* Stagger cards within a grid row */
.grid > *:nth-child(1) { transition-delay: 0s; }
.grid > *:nth-child(2) { transition-delay: 0.06s; }
.grid > *:nth-child(3) { transition-delay: 0.12s; }
.grid > *:nth-child(4) { transition-delay: 0.18s; }
.grid > *:nth-child(5) { transition-delay: 0.24s; }
.grid > *:nth-child(6) { transition-delay: 0.3s; }
.stats-bar > *:nth-child(1) { transition-delay: 0s; }
.stats-bar > *:nth-child(2) { transition-delay: 0.06s; }
.stats-bar > *:nth-child(3) { transition-delay: 0.12s; }
.stats-bar > *:nth-child(4) { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .js .feature-card, .js .checklist-card, .js .method-copy, .js .method-visual,
  .js .testimonial-feature, .js .plan-card, .js .stat-card, .js .section-head,
  .js .hero h1, .js .hero-lede, .js .hero .btn-row, .js .hero .badge-row, .js .hero-art {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero::before { animation: none !important; }
}

/* =====================================================
   TESTIMONIAL MARQUEE (single row, auto-scroll)
===================================================== */
.testimonial-marquee-wrap {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.testimonial-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.testimonial-card-mini {
  flex: 0 0 360px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px;
}
.testimonial-card-mini p { font-style: italic; color: var(--color-text); font-size: 14.5px; margin-bottom: 16px; }
.testimonial-card-mini .who { display: flex; align-items: center; gap: 10px; }
.testimonial-card-mini .who-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-primary-darker); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testimonial-card-mini .who strong { display: block; font-size: 13.5px; color: var(--color-ink); }
.testimonial-card-mini .who span { font-size: 12px; color: var(--color-muted); }
@media (max-width: 720px) {
  .testimonial-track { animation-duration: 26s; }
  .testimonial-card-mini { flex-basis: 280px; }
}

/* =====================================================
   FEATURE GRID (6 cards)
===================================================== */
.feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover { 
  transform: translateY(-6px);
  border-color: #C8EEDB;
  box-shadow: 0 24px 54px rgba(15, 30, 25, 0.14); 
}

.feature-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--color-bg-alt);
  color: var(--color-primary-darker);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 20px;
}
.feature-card h3 { font-size: 24px; margin-bottom: 8px; }
.feature-card p { color: var(--color-muted); font-size: 15px; margin: 0; }
.feature-card.text-center .feature-icon { margin-left: auto; margin-right: auto; }

/* =====================================================
   3-COLUMN CHECKLIST BLOCK
===================================================== */
.checklist-card {
  background: var(--color-bg-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
}
.checklist-card h3 { color: #fff; font-size: 19px; }
.checklist-card ul { margin-top: 18px; }
.checklist-card li { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; color: #C9E4D8; }
.checklist-card li::before { content: '✓'; color: var(--color-primary); font-weight: 800; flex-shrink: 0; }

/* =====================================================
   TABBED METHOD SECTION
===================================================== */
.method-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 64px 0; }
.method-block:nth-child(even) .method-copy { order: 2; }
.method-tag { font-size: 13px; font-weight: 700; color: var(--color-primary-darker); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.method-copy h2 { font-size: 36px; }
.method-copy ul { margin: 20px 0 26px; }
.method-copy li { display: flex; gap: 10px; padding: 6px 0; color: var(--color-text); }
.method-copy li::before { content: '›'; color: var(--color-primary-darker); font-weight: 800; }
.method-visual {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* aspect-ratio: 4/3; */
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted);
  font-size: 14px;
  overflow: hidden;
}

/* Videos fill their frame instead of using a fixed pixel size
   (was: height 300px / width 536px, which cannot be responsive). */
.method-visual .video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-deep);
}

/* =====================================================
   CTA BAND
===================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--color-deep), var(--color-bg-deep));
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  color: #fff;
  margin: 0 24px;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #C9E4D8; max-width: 520px; margin: 0 auto 30px; }
.cta-band .btn-row { justify-content: center; }

/* =====================================================
   FOOTER
===================================================== */
.site-footer { background: var(--color-bg-deep); color: #C9E4D8; padding: 72px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand .brand { color: #fff; }
.footer-brand p { color: #9FC2B2; font-size: 14px; margin-top: 14px; max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 18px; }
.footer-col li { padding: 6px 0; }
.footer-col a { color: #9FC2B2; font-size: 14.5px; transition: color 0.15s; }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: #7FA396; flex-wrap: wrap; gap: 12px; }

/* =====================================================
   PRICING PAGE
===================================================== */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 5px;
  margin: 0 auto 48px;
}
.billing-toggle button {
  border: none; background: transparent;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14px;
  color: var(--color-muted);
}
.billing-toggle button.active { background: var(--color-primary); color: #06231C; }
.save-tag { font-size: 11px; background: var(--color-bg-deep); color: var(--color-primary); padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 6px; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.plan-card {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan-card.popular { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-8px); }
.plan-badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--color-primary); color: #06231C;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.plan-name { font-size: 18px; font-weight: 800; color: var(--color-ink); margin-bottom: 6px; }
.plan-price { font-family: var(--font-heading); font-size: 34px; font-weight: 800; color: var(--color-ink); }
.plan-price span { font-size: 14px; font-weight: 600; color: var(--color-muted); }
.plan-desc { font-size: 14px; color: var(--color-muted); margin: 10px 0 22px; min-height: 44px; }
.plan-features { flex: 1; margin-bottom: 24px; }
.plan-features li { display: flex; gap: 8px; padding: 7px 0; font-size: 13.5px; color: var(--color-text); }
.plan-features li::before { content: '✓'; color: var(--color-primary-darker); font-weight: 800; flex-shrink: 0; }
.plan-card.enterprise { background: var(--color-bg-deep); border-color: var(--color-bg-deep); color: #fff; }
.plan-card.enterprise .plan-name, .plan-card.enterprise .plan-price { color: #fff; }
.plan-card.enterprise .plan-desc { color: #B9D8CB; }
.plan-card.enterprise .plan-features li { color: #DCEFE7; }

.compare-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.compare-table th, .compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-border); text-align: center; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--color-muted); }
.compare-table thead th { font-family: var(--font-heading); font-weight: 800; color: var(--color-ink); background: var(--color-bg-alt); }
.compare-table .group-row td { background: var(--color-bg-alt); font-weight: 700; color: var(--color-primary-darker); text-align: left; }
.compare-table td.yes { color: var(--color-primary-darker); font-weight: 800; }

.faq-item { border-bottom: 1px solid var(--color-border); padding: 22px 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 16px; color: var(--color-ink); }
.faq-q .icon { transition: transform 0.2s; color: var(--color-primary-darker); }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; color: var(--color-muted); font-size: 14.5px; }
.faq-item.open .faq-a { max-height: 240px; padding-top: 12px; }

/* =====================================================
   ANALYTICS DASHBOARD MOCKUP
===================================================== */
.dash-mock {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.dash-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.dash-tab {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.dash-tab.active { color: var(--color-primary-darker); border-bottom-color: var(--color-primary-darker); }
.dash-panel { padding: 24px; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.dash-panel-head h4 { margin: 0; font-size: 17px; }
.dash-daterange { font-size: 12.5px; color: var(--color-muted); background: var(--color-bg-alt); padding: 6px 12px; border-radius: var(--radius-pill); }
.dash-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.dash-stat-card { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 20px; }
.dash-stat-label { display: block; font-size: 12.5px; color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.dash-stat-value { display: block; font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: var(--color-ink); margin: 4px 0 14px; }
.dash-breakdown-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--color-text); }
.dash-breakdown-value { margin-left: auto; font-weight: 700; color: var(--color-ink); }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-chart-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dash-chart-card { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 20px; }
.dash-chart-title { display: block; font-size: 13px; font-weight: 700; color: var(--color-ink); margin-bottom: 16px; }
.donut-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.donut-chart {
  width: 150px; height: 150px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.donut-hole {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-hole strong { font-size: 16px; color: var(--color-ink); }
.donut-hole small { font-size: 10.5px; color: var(--color-muted); }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); }
.chart-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.line-chart-svg { width: 100%; height: auto; margin-bottom: 10px; }
@media (max-width: 720px) {
  .dash-stat-row, .dash-chart-row { grid-template-columns: 1fr; }
}

/* Category cards (Messaging / Conversation / Template Analytics) */
.analytics-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--accent, var(--color-primary));
  padding: 26px;
}
.analytics-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.analytics-card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.analytics-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
/* Reusable color variants: .accent-* sets the card's top border via the
   --accent custom property; .badge-* sets background+color for icon chips
   and badge pills. Kept separate so the accent class never tints the card's
   white background. */
.accent-blue { --accent: #3B82F6; }
.accent-green { --accent: #1FAE56; }
.accent-purple { --accent: #A855F7; }
.accent-gold { --accent: #CA8A04; }
.accent-red { --accent: #EF4444; }
.accent-navy { --accent: #1E293B; }
.badge-blue { background: #DBEAFE; color: #3B82F6; }
.badge-green { background: #DCFCE7; color: #1FAE56; }
.badge-purple { background: #F3E8FF; color: #A855F7; }
.badge-gold { background: #FEF3C7; color: #CA8A04; }
.badge-red { background: #FEE2E2; color: #EF4444; }
.badge-navy { background: #E2E8F0; color: #1E293B; }
.analytics-card h3 { font-size: 20px; margin-bottom: 8px; }
.analytics-card p { color: var(--color-muted); font-size: 14px; margin-bottom: 16px; }
.check-list li { display: flex; gap: 8px; padding: 5px 0; font-size: 13.5px; color: var(--color-text); }
.check-list li::before { content: '✓'; color: #1FAE56; font-weight: 800; flex-shrink: 0; }

/* =====================================================
   MCP PAGE
===================================================== */
.eyebrow-warn { background: var(--color-warn-bg); border-color: #F0D9A0; color: #8A6416; }

.hero-title-md { font-size: 44px; }
@media (max-width: 900px) { .hero-title-md { font-size: 34px; } }
@media (max-width: 480px) { .hero-title-md { font-size: 27px; } }

.feature-card-lg { padding: 36px; }
@media (max-width: 480px) { .feature-card-lg { padding: 24px; } }

.mcp-chat-card { padding: 22px; }
.chat-mock-plain { background: transparent; padding: 0; }
.chat-label {
  color: #9FC2B2; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px;
}

.mcp-icon-heading { display: flex; align-items: center; gap: 10px; font-size: 20px; }
@media (max-width: 480px) { .mcp-icon-heading { font-size: 17px; } }

.callout-warn {
  background: var(--color-warn-bg);
  border: 1px solid #F0D9A0;
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 20px 0;
  color: #8A6416;
  font-size: 14px;
}

.info-box {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.info-box + .info-box { margin-top: 12px; }
.info-box strong { font-size: 14px; display: block; }
.info-box p { color: var(--color-muted); font-size: 13.5px; margin: 6px 0 0; }

.code-block {
  background: var(--color-bg-deep);
  color: #DCEFE7;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  overflow-x: auto;
  white-space: pre;
}
@media (max-width: 480px) { .code-block { font-size: 11.5px; padding: 12px; } }

.mcp-step-label { color: var(--color-muted); font-size: 14.5px; }
.mcp-step-note { color: var(--color-muted); font-size: 13px; }
.mcp-spaced-top { margin-top: 18px; }

.mcp-auth-list { color: var(--color-text); padding-left: 20px; }
.mcp-auth-list li { padding: 4px 0; }

.mcp-tabs { margin-top: 24px; }
.mcp-tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 22px; flex-wrap: wrap; }
.mcp-tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--color-muted);
  margin-bottom: -1px;
}
.mcp-tab-btn:hover { color: var(--color-primary-darker); }
.mcp-tab-btn.active { color: var(--color-primary-darker); border-bottom-color: var(--color-primary-darker); }
.mcp-tab-panel h4 { font-size: 16px; margin-bottom: 14px; }
.mcp-tab-panel p { font-size: 14.5px; }
@media (max-width: 480px) {
  .mcp-tab-btn { padding: 8px 10px; font-size: 13px; }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .grid-3, .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .method-block { grid-template-columns: 1fr; }
  .method-block:nth-child(even) .method-copy { order: 0; }
}
@media (max-width: 880px) {
  :root { --section-pad: 64px; }
  .nav-links, .nav-actions .btn-outline { display: none; }
  .nav-toggle { display: flex; }
  .grid-2, .grid-3, .grid-6 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-card.popular { transform: none; }
  .testimonial-feature { flex-direction: column; text-align: center; padding: 30px; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; margin: 0 12px; }
  .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Forms */

/* =====================================================
   CENTERED HERO (hero-tight / container-sm)
===================================================== */
.hero-tight { padding: 88px 0 72px; }

.container-sm { max-width: 820px; }

/* Center the paragraph block and the button row */
.hero .text-center .hero-lede {
  margin-left: auto;
  margin-right: auto;
}
.text-center .btn-row {
  justify-content: center;
}

/* Let .hero-title-md actually win over the generic ".hero h1" size */
.hero h1.hero-title-md { font-size: 44px; }

/* Tablet */
@media (max-width: 900px) {
  .hero-tight { padding: 64px 0 56px; }
  .hero h1.hero-title-md { font-size: 36px; }
  .hero-tight .hero-lede { font-size: 17px; }
}

/* Mobile */
@media (max-width: 480px) {
  .hero-tight { padding: 48px 0 44px; }
  .hero h1.hero-title-md { font-size: 29px; }
  .hero-tight .hero-lede { font-size: 16px; margin-bottom: 26px; }
  .hero-tight .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 340px;
    margin: 0 auto;
  }
  .hero-tight .btn-row .btn { width: 100%; }
}

/* =====================================================
   WHATSAPP CALLING PAGE
===================================================== */
.chat-contact-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.chat-contact-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #06231C;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.chat-contact-header strong { display: block; font-size: 14px; color: #fff; }
.chat-contact-header span { font-size: 12px; color: #9FC2B2; }

.call-progress-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
}
.call-progress-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #06231C;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin: 0 auto 18px;
}
.call-progress-card h4 { font-size: 16px; margin-bottom: 4px; }
.call-progress-meta { font-size: 13px; color: var(--color-muted); margin-bottom: 22px; }
.call-controls { display: flex; justify-content: center; gap: 16px; }
.call-control-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-ink);
}
.call-control-btn.end { background: #EF4444; border-color: #EF4444; color: #fff; }

.progress-row { margin-bottom: 16px; }
.progress-row:last-child { margin-bottom: 0; }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.progress-label .value { font-weight: 700; color: var(--color-primary-darker); }
.progress-track { height: 8px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }
.progress-fill.w-68 { width: 68%; }
.progress-fill.w-92 { width: 92%; }
.progress-fill.w-96 { width: 96%; }

/* =====================================================
   RE-TARGETING PAGE
===================================================== */
.flow-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.flow-row .feature-card { flex: 1 1 200px; }
.flow-arrow { display: flex; align-items: center; color: var(--color-primary-darker); font-size: 20px; font-weight: 800; }
@media (max-width: 900px) { .flow-arrow { display: none; } }

.cta-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.cta-card h2 { color: var(--color-ink); }
.cta-card p { color: var(--color-muted); max-width: 520px; margin: 0 auto 30px; }
.cta-card .btn-row { justify-content: center; }
@media (max-width: 880px) { .cta-card { padding: 40px 24px; margin: 0 12px; } }

/* =====================================================
   PAYMENTS PAGE
===================================================== */
.logo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.logo-row .logo-placeholder { width: auto; height: auto; padding: 8px 14px; }
.mini-stat-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.mini-stat-row .dash-stat-label { margin-bottom: 2px; }
.mini-stat-row .dash-stat-value { font-size: 18px; margin: 0; }

/* =====================================================
   CHATBOTS PAGE
===================================================== */
.mini-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--accent, var(--color-primary));
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.mini-card strong { font-size: 14px; color: var(--color-ink); }
.mini-card p { font-size: 13px; color: var(--color-muted); margin: 0; }

.template-card {
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
}
.tint-blue { background: linear-gradient(160deg, #DBEAFE, #EFF6FF); }
.tint-green { background: linear-gradient(160deg, #DCFCE7, #F0FDF4); }
.tint-purple { background: linear-gradient(160deg, #F3E8FF, #FAF5FF); }
.tint-pink { background: linear-gradient(160deg, #FCE7F3, #FDF2F8); }
.template-card-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
}
.template-card h3 { font-size: 20px; }
.template-card ul { text-align: left; margin: 16px 0 22px; }
.template-card li { font-size: 13.5px; padding: 4px 0; color: var(--color-text); }
.template-card .btn { width: 100%; border: none; }
.template-btn-blue { background: #3B82F6; color: #fff; }
.template-btn-green { background: #1FAE56; color: #fff; }
.template-btn-purple { background: #A855F7; color: #fff; }

/* =====================================================
   DRIP CAMPAIGN PAGE
===================================================== */
.step-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 24px;
}
.step-card .mega-link,
.step-card .dash-breakdown-item { background: rgba(255,255,255,0.5); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.step-card .mega-link:last-child,
.step-card .dash-breakdown-item:last-child { margin-bottom: 0; }
.step-card .info-box { background: rgba(255,255,255,0.7); margin-bottom: 10px; }
.step-card .info-box:last-child { margin-bottom: 0; }

.stat-highlight { font-size: 13px; font-weight: 700; color: var(--color-primary-darker); margin-top: 10px; }

.timeline { position: relative; padding-left: 56px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 19px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--color-border);
}
.timeline-item { position: relative; margin-bottom: 24px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-badge {
  position: absolute;
  left: -56px; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #06231C;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
}
.timeline-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; }
.timeline-card h4 { font-size: 15px; margin-bottom: 6px; }
.timeline-card p { font-size: 13.5px; color: var(--color-text); margin-bottom: 8px; font-style: italic; }
.timeline-meta { font-size: 12px; color: var(--color-primary-darker); font-weight: 600; }
@media (max-width: 480px) {
  .timeline { padding-left: 44px; }
  .timeline-badge { left: -44px; width: 32px; height: 32px; font-size: 10px; }
}

/* =====================================================
   APPS PAGE
===================================================== */
.feature-icon-badge { position: relative; }
.feature-icon-badge::after {
  content: '+';
  position: absolute;
  bottom: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #3B82F6;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.section-divider { border-top: 1px solid var(--color-border); }

/* =====================================================
   INTEGRATIONS PAGE (Webhooks / API)
===================================================== */
.flow-diagram { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.flow-node { text-align: center; max-width: 140px; }
.flow-node-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary-darker);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto 10px;
}
.flow-node-icon.center {
  width: 84px; height: 84px;
  border: 3px solid var(--color-primary);
  background: #fff;
  font-size: 28px;
}
.flow-node strong { display: block; font-size: 14px; color: var(--color-primary-darker); }
.flow-node small { font-size: 12px; color: var(--color-muted); }
.flow-connector { font-size: 22px; color: var(--color-muted); }
@media (max-width: 640px) { .flow-connector { transform: rotate(90deg); } }

.highlight-band {
  background: var(--color-primary-darker);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.highlight-band-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.highlight-band h3 { color: #fff; margin-bottom: 8px; }
.highlight-band p { color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.highlight-band p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .highlight-band { flex-direction: column; text-align: center; } .highlight-band-icon { margin: 0 auto; } }

.setup-card { border-radius: var(--radius-lg); padding: 28px; }
.setup-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.setup-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: #fff;
  flex-shrink: 0;
}
.setup-card-header h3 { margin: 0; font-size: 19px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .setup-grid { grid-template-columns: 1fr; } }
.setup-col { background: rgba(255,255,255,0.7); border-radius: var(--radius-md); padding: 20px; }
.setup-col h4 { font-size: 14px; margin-bottom: 14px; }
.setup-step { display: flex; gap: 12px; margin-bottom: 14px; }
.setup-step:last-child { margin-bottom: 0; }
.setup-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: var(--color-ink);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.setup-step strong { display: block; font-size: 13.5px; }
.setup-step small { font-size: 12.5px; color: var(--color-muted); }
.dot-list li { position: relative; padding: 5px 0 5px 16px; font-size: 13.5px; color: var(--color-text); }
.dot-list li::before { content: '•'; position: absolute; left: 0; color: var(--color-primary-darker); font-weight: 800; }

/* =====================================================
   MCP PAGE — TERMINAL MOCKUP, GUIDE CARD, CODE BLOCKS
===================================================== */
.terminal-mock {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 12px;
  color: var(--color-muted);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.red { background: #FF5F57; }
.terminal-dot.yellow { background: #FEBC2E; }
.terminal-dot.green { background: #28C840; }
.terminal-title { margin-left: 6px; }
.terminal-body {
  padding: 4px 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}
.terminal-line { padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; color: var(--color-text); overflow-wrap: anywhere; }
.terminal-line.user { background: #F1F5F3; }
.terminal-line .tag { color: #3B82F6; font-weight: 700; }
.terminal-ok { display: block; color: var(--color-primary-darker); }
@media (max-width: 480px) { .terminal-body { font-size: 11.5px; padding: 4px 12px 16px; } }

.text-center .mcp-icon-heading { justify-content: center; }
.compare-table-center th:first-child,
.compare-table-center td:first-child { text-align: center; color: inherit; }
.compare-table-center tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.6); }
/* 2-column tables should wrap on small screens instead of scrolling sideways
   (the generic .compare-table rule is meant for wide, many-column tables). */
@media (max-width: 880px) {
  .compare-table.compare-table-center { display: table; overflow: visible; white-space: normal; }
  .compare-table-center th, .compare-table-center td { padding: 12px 10px; }
}

.guide-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.guide-card-header {
  padding: 16px 28px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
}
.guide-card-body { padding: 28px; }
.guide-card-footer { padding: 24px 28px; border-top: 1px solid var(--color-border); text-align: center; }
@media (max-width: 480px) {
  .guide-card-header, .guide-card-body, .guide-card-footer { padding-left: 18px; padding-right: 18px; }
}

.code-wrap { position: relative; }
.code-wrap .code-block { padding-right: 76px; }
.code-block-light { background: #F6F8F7; color: var(--color-ink); border: 1px solid var(--color-border); }
.code-copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.code-copy-btn:hover { color: var(--color-primary-darker); border-color: var(--color-primary-darker); }

.cred-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.cred-box h5 { font-size: 15px; margin: 0 0 8px; }
.cred-box p { font-size: 13.5px; margin-bottom: 8px; }
.cred-box ol { padding-left: 18px; font-size: 13.5px; }
.cred-box li { padding: 2px 0; }
.cred-note { background: rgba(255,255,255,0.7); border-radius: var(--radius-sm); padding: 8px 12px; }
.text-link { color: #2563EB; text-decoration: underline; overflow-wrap: anywhere; }

/* =====================================================
   INTEGRATIONS PAGE — TAB SWITCHER & EXTRAS
===================================================== */
.mt-32 { margin-top: 32px; }
.tab-switch { display: flex; justify-content: center; margin-bottom: 44px; }
.tab-switch-inner {
  display: inline-flex;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 6px;
  max-width: 100%;
}
.tab-switch-btn {
  border: none;
  background: transparent;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-text);
}
.tab-switch-btn:hover { color: var(--color-primary-darker); }
.tab-switch-btn.active { background: var(--color-bg-alt); color: var(--color-primary-darker); }
@media (max-width: 480px) { .tab-switch-btn { padding: 10px 14px; font-size: 13.5px; } }

.setup-card-icon.blue { background: #3B82F6; }
.setup-card-icon.green { background: #1FAE56; }

.endpoint-code {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.integration-note { font-size: 13.5px; color: var(--color-muted); margin: 22px 0 14px; }

/* Grid items default to min-width:auto, so a long unbroken string (like a webhook
   URL) can force the whole track wider than the viewport. Let them shrink, and let
   long URLs wrap instead of scrolling sideways. */
.integration-panel .grid > * { min-width: 0; }
.code-block-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
/* The stacked-box spacing rule (.info-box + .info-box) is for vertical lists; side-by-side
   grid items must stay aligned. */
.integration-panel .grid > .info-box + .info-box { margin-top: 0; }


/* =====================================================
   HOME PAGE — SIZES MATCHED TO THE REFERENCE
   The Snapto screenshots are captured at a 1600px-wide viewport. The homepage
   image was downscaled (1140/1600 = 0.7125) to fit its height cap, so every
   value below is the TRUE size (measured value / 0.7125):
     content column 1104 · wide column 1216 · hero column 1024
     bulk video 520x292 (16:9) · night card ~341x275 · solution card ~341x435
     logo card ~205x132 · testimonial card ~352x230 · CTA card 1104x~424
===================================================== */
:root { --ref-w: 1104px; --ref-w-lg: 1216px; --ref-w-hero: 1024px; }
.container-xl { max-width: 1264px; }   /* 1216px content column (chatbot section) */

.btn-sm { padding: 7px 22px; font-size: 15px; line-height: 1.4; }

/* Own wrapper so :nth-child(even) alternation starts at block 1:
   text-left/video-right, video-left/text-right, text-left/video-right. */
.method-stack { max-width: var(--ref-w); margin: 0 auto; }
.method-stack-wide { max-width: var(--ref-w-lg); }
.method-stack .method-block { gap: 64px; padding: 42px 0; }

.method-stack .method-copy h3 { font-size: 30px; line-height: 1.2; margin-bottom: 16px; }
.method-stack .method-copy p { font-size: 18px; line-height: 1.5; margin-bottom: 20px; }
.method-stack .method-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: #DCFCE7;
  color: var(--color-primary-darker);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.method-stack .method-copy ul { margin: 0 0 26px; }
.method-stack .method-copy li { align-items: center; gap: 12px; padding: 5px 0; font-size: 17px; line-height: 1.5; }
.method-stack .method-copy li::before {
  content: '✓';
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* The video frame itself: 16:9, fills its column (520 x 292 at full width). */
.method-visual-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 8px 32px rgba(15, 30, 25, 0.12);
}

/* Image visuals (chatbot / MCP / voice): the column width sets the size. */
.method-visual-frame { border: 0; background: transparent; border-radius: 16px; box-shadow: 0 12px 40px rgba(15, 30, 25, 0.14); }
.method-visual-frame img { width: 100%; height: 390px; }

/* Small pills */
.section-head h2 .accent { color: var(--color-primary-darker); }
.pill-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.pill-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-dark); }
.pill-green { background: #DCFCE7; border-color: transparent; box-shadow: none; color: var(--color-primary-darker); font-weight: 600; }
.pill-green::before { display: none; }

/* Large section headings (reference: ~48px, tight leading) */
.section-head-lg { margin-bottom: 72px; }
.section-head-lg h2 { font-size: 48px; line-height: 1.15; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-head-lg .section-desc { font-size: 18px; }

/* Hero */
.hero-home .hero-lede { max-width: 900px; }
.hero-home .btn { padding: 10px 26px; }
.hero-home .btn-outline { background: #fff; border-color: #f1eff0; box-shadow: var(--shadow-sm); }
@media (min-width: 901px) { .hero-home h1.hero-title-md { font-size: 60px; line-height: 1.15; } }
.partner-banner,
.hero-visual { max-width: var(--ref-w-hero); margin-left: auto; margin-right: auto; text-align: left; }
.partner-banner {
  margin-top: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 35px 56px;
  border-radius: 24px;
  background: linear-gradient(135deg, #CFF1DE, #E7F9EF);
  box-shadow: var(--shadow-md);
}
.partner-banner-item { display: flex; align-items: center; gap: 20px; }
.partner-banner-logo {
  width: 76px; height: 76px;
  border-radius: 16px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-primary-darker);
  flex-shrink: 0;
}
.partner-banner strong { display: block; font-size: 20px; color: var(--color-primary-darker); }
.partner-banner small { font-size: 16px; color: var(--color-primary-darker); }
.hero-visual { margin-top: 45px; }

/* Client logo grid (5 x 205x132 cards) + plain stats + plain quote */
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: var(--ref-w); margin: 0 auto; }
.logo-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  min-height: 132px;
  padding: 20px 14px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 30, 25, 0.07);
  text-align: center;
}
.logo-card .logo-placeholder { width: 100%; max-width: 140px; height: 48px; }
.logo-card small { font-size: 13px; color: var(--color-muted); }

.stats-plain {
  max-width: var(--ref-w);
  margin: 78px auto 0;
  padding-top: 50px;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stats-plain .stat-num { font-size: 30px; color: var(--color-ink); }
.stats-plain .stat-label { font-size: 14px; }

.quote-plain { max-width: 640px; margin: 100px auto 0; text-align: center; }
.quote-plain-mark {
  width: 68px; height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--color-primary-darker);
}
.quote-plain blockquote { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1.4; color: var(--color-ink); }
.quote-plain cite { font-style: normal; font-size: 15px; color: #2563EB; }

/* Dark "Engage Effortlessly" section (3 x ~341x275 cards) */
.section-night { background: linear-gradient(180deg, #0B1220 0%, #03060C 100%); color: #C7D3DC; }
.section-night .section-head h2 { color: #fff; }
.section-night .section-head h2 .accent { color: var(--color-primary); }
.section-night .section-desc { color: #B7C4CE; }
.night-visual { max-width: 730px; margin: 0 auto 78px; }
.night-grid { max-width: var(--ref-w); margin: 0 auto; gap: 40px; }
.night-card {
  min-height: 275px;
  padding: 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
}
.night-icon {
  width: 48px; height: 48px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1FAE7A, #0E7C5A);
  display: flex; align-items: center; justify-content: center;
}
.night-icon img { width: 26px; height: 26px; filter: brightness(0) invert(1); }
.night-card h3 { color: #fff; font-size: 20px; margin-bottom: 12px; }
.night-card p { color: #AEBBC6; font-size: 15px; line-height: 1.6; margin: 0; }

/* Light "Enterprise-Grade" solution cards (3 x ~341x435) */
.solution-grid { max-width: var(--ref-w); margin: 0 auto; gap: 40px; }
.solution-card {
  min-height: 435px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 48px 40px 44px;
  box-shadow: 0 16px 44px rgba(15, 30, 25, 0.09);
}
.solution-icon {
  width: 44px; height: 44px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #DCFCE7;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.solution-card h3 { text-align: center; font-size: 26px; line-height: 1.2; margin-bottom: 22px; }
.solution-card li { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; font-size: 15px; line-height: 1.5; color: var(--color-text); }
.solution-card li::before {
  content: '✓';
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Chatbot rows */
.tint-row {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 14px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.tint-row strong { display: block; font-size: 15px; color: var(--color-ink); }
.tint-row small { font-size: 13px; color: var(--color-muted); }
.tint-row-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  flex-shrink: 0;
}
.tint-row-icon.green { background: #34C38F; }
.tint-row-icon.blue { background: #3B82F6; }
.tint-row-icon.purple { background: #A855F7; }
.method-stack .tint-row + .btn { margin-top: 14px; }

/* Testimonial marquee cards (scoped: the E-Commerce page reuses .testimonial-card-mini) */
.testimonial-marquee-wrap .testimonial-card-mini {
  flex: 0 0 352px;
  min-height: 230px;
  padding: 26px 24px;
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(15, 30, 25, 0.08);
  display: flex;
  flex-direction: column-reverse;   /* name/handle on top, quote below */
  justify-content: flex-end;
  gap: 14px;
}
.testimonial-marquee-wrap .testimonial-card-mini p { font-size: 14px; font-style: normal; line-height: 1.6; margin: 0; }
.testimonial-marquee-wrap .testimonial-card-mini .who strong { font-size: 15px; }
.testimonial-marquee-wrap .testimonial-card-mini .who span { font-size: 12.5px; }

/* Closing CTA (scoped: five feature pages share .cta-card) — 1104 x ~424 */
.cta-card-ref { max-width: var(--ref-w); margin: 0 auto; padding: 83px 48px; border-radius: 22px; }
.cta-card-ref .btn { padding: 8px 26px; font-size: 15px; }
.cta-card-ref h2 { font-size: 48px; line-height: 1.05; max-width: 640px; margin-left: auto; margin-right: auto; }
.cta-card-ref p { font-size: 20px; line-height: 1.6; max-width: 640px; }

.donut-sample { background: conic-gradient(#1FAE56 0% 59%, #6366F1 59% 84%, #F0B429 84% 95%, #EF4444 95% 100%); }

/* Solid legend dots (the .badge-* classes are pale backgrounds meant for chips) */
.dot-green { background: #1FAE56; }
.dot-blue { background: #6366F1; }
.dot-gold { background: #F0B429; }
.method-copy h3 .accent { color: var(--color-primary-darker); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .method-stack, .method-stack-wide { max-width: 640px; }
  .method-stack .method-block { gap: 24px; padding: 24px 0; }
  .method-stack .method-copy h3 { font-size: 26px; }
  .method-stack .method-copy p { font-size: 16px; }
  .method-stack .method-copy li { font-size: 15px; }
  .btn-sm { padding: 9px 20px; font-size: 14px; }
  .section-head-lg { margin-bottom: 48px; }
  .section-head-lg h2 { font-size: 36px; }
  .night-card, .solution-card { min-height: 0; }
  .night-grid, .solution-grid { gap: 20px; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .quote-plain { margin-top: 64px; }
  .quote-plain blockquote { font-size: 20px; }
  .cta-card-ref { padding: 56px 28px; }
  .cta-card-ref h2 { font-size: 34px; }
  .cta-card-ref p { font-size: 17px; }
}
@media (max-width: 640px) {
  .partner-banner { flex-direction: column; align-items: flex-start; padding: 24px; margin-top: 32px; }
  .stats-plain { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .testimonial-marquee-wrap .testimonial-card-mini { flex-basis: 280px; }
}
@media (max-width: 480px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head-lg h2 { font-size: 28px; }
  .cta-card-ref h2 { font-size: 28px; }
}

/* =====================================================
   FEATURES HUB PAGE (features.php)
   Measured from the reference at 1600px: 1230px grid, 3 columns,
   34px gaps, 387px cards, 56px icon chips, 20px titles, 16/26 body.
   Scoped to .hero-features / .features-hub / .features-cta.
===================================================== */

/* Extra icon tints used by the hub cards (same pattern as .badge-*) */
.badge-orange { background: #FFEDD5; color: #EA580C; }
.badge-cyan   { background: #CFFAFE; color: #0891B2; }
.badge-pink   { background: #FCE7F3; color: #DB2777; }
.badge-indigo { background: #E0E7FF; color: #4F46E5; }

/* Hero */
.hero-features .hero-lede { max-width: 660px; font-size: 18px; line-height: 1.5; margin-bottom: 0; }
@media (min-width: 901px) {
  .hero-features { padding-bottom: 58px; }
  .hero-features h1.hero-title-md { font-size: 64px; line-height: 1; margin-bottom: 28px; }
}

/* Card grid: 1230px column (container widened only here so it fits) */
.features-hub .container { max-width: 1278px; }
.features-hub-grid {
  max-width: 1230px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.features-hub .feature-card {
  display: block;
  min-width: 0;
  padding: 24px 24px 26px;
  text-align: center;
  color: inherit;
  background: #fff;
  border: 1px solid #EEF2F0;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(15, 30, 25, 0.07);
}
.features-hub .feature-icon {
  width: 56px; height: 56px;
  margin: 0 auto 24px;
  border-radius: 12px;
}
.features-hub .feature-icon svg { width: 22px; height: 22px; stroke-width: 2.4; }
.features-hub .feature-card h3 { font-size: 20px; line-height: 1.3; margin: 0 0 14px; }
.features-hub .feature-card p { font-size: 16px; line-height: 26px; color: #4B5563; margin: 0; }

/* Hover: lift + stronger shadow. The scroll-reveal rule (.js .feature-card.in-view)
   pins transform to 0 after reveal, so the hover needs higher specificity. */
.features-hub .feature-card:hover,
.js .features-hub .feature-card.in-view:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15, 30, 25, 0.12);
  border-color: #CDEBDA;
}
.js .features-hub .feature-card.in-view {
  transition: opacity 0.7s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.features-hub .feature-card:focus-visible { outline: 3px solid var(--color-primary-darker); outline-offset: 3px; }

/* CTA: divider line, then centered heading and small button */
.features-cta { padding: 0 0 80px; }
.features-cta .container { max-width: 1278px; }
.features-cta-inner {
  max-width: 1230px;
  margin: 0 auto;
  padding-top: 88px;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--color-border) 15%, var(--color-border) 85%, transparent) 1;
}
.features-cta h2 { font-size: 38px; line-height: 1.2; margin: 0 0 48px; }
.features-cta .btn { padding: 9px 24px; font-size: 15px; }

/* Tablet */
@media (max-width: 1023px) {
  .features-hub-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  .features-cta { padding-bottom: 64px; }
  .features-cta-inner { padding-top: 64px; }
  .features-cta h2 { font-size: 30px; margin-bottom: 32px; }
}

/* Mobile */
@media (max-width: 640px) {
  .hero-features .hero-lede { font-size: 16px; }
  .features-hub-grid { grid-template-columns: 1fr; gap: 16px; }
  .features-hub .feature-card { padding: 22px 20px 24px; }
  .features-hub .feature-card h3 { font-size: 18px; }
  .features-hub .feature-card p { font-size: 15px; line-height: 24px; }
  .features-cta h2 { font-size: 24px; }
}

/* =====================================================
   HOME PAGE — ROUND 3 REFINEMENTS (index.php)
   Compared section-by-section with the reference at 1600px.
   Everything is scoped to the homepage (.hero-home, .night-phones,
   .voice-*, .section-testimonials) so no other page changes.
===================================================== */

/* Off-white page background with white cards on top (reference ≈ #F9FAFB).
   :has() limits this to the page that contains the homepage hero. */
body:has(.hero-home) { background: #F9FAFB; }

/* Hero: soft green glows on both sides, slightly larger heading, framed dashboard */
.hero-home {
  background:
    radial-gradient(900px 520px at 88% -5%, rgba(37, 211, 102, 0.16), transparent 62%),
    radial-gradient(700px 620px at 4% 58%, rgba(37, 211, 102, 0.10), transparent 62%),
    #F9FAFB;
}
@media (min-width: 901px) {
  .hero-home h1.hero-title-md { font-size: 62px; line-height: 1.15; letter-spacing: -0.03em; }
}

/* Dark section: two tilted phone mockups (replaces the single chat card) */
.section-night { overflow: hidden; }   /* rotated phones must never cause sideways scroll */
.night-phones { position: relative; max-width: 520px; height: 500px; margin: 0 auto 78px; }
.phone {
  position: absolute;
  width: 236px; height: 460px;
  border-radius: 32px;
  border: 7px solid #111A24;
  background: #ECE5DD;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.phone-back  { left: 36px;  top: 44px; transform: rotate(-12deg); }
.phone-front { right: 36px; top: 0;    transform: rotate(8deg); }
.phone-head { background: var(--color-deep); color: #fff; font-size: 13px; font-weight: 700; padding: 16px 16px 12px; }
.phone-screen { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.phone .chat-bubble { margin: 0; max-width: 92%; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.phone-product { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #fff; }
.phone-product span { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.phone-product:nth-child(even) span { background: linear-gradient(135deg, #BFDBFE, #3B82F6); }
.phone-product strong { display: block; font-size: 12px; color: var(--color-ink); }
.phone-product small { font-size: 11px; color: var(--color-muted); }

/* Voice Calling visual: grey frame > white card > green call panel + controls + stats */
.voice-frame {
  padding: 14px;
  border-radius: 18px;
  background: #EEF2F5;
  border: 1px solid #E3E8EC;
}
.voice-card {
  padding: 20px 20px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(15, 30, 25, 0.08);
}
.voice-card .call-progress-card {
  padding: 56px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, #D5F5E3, #EAFBF1);
}
.voice-card .call-progress-icon { width: 64px; height: 64px; font-size: 24px; margin-bottom: 16px; }
.voice-card .call-progress-card h4 { font-size: 16px; }
.voice-card .call-progress-meta { margin: 0; }
.voice-card .call-controls { margin: 24px 0; gap: 12px; }
.voice-card .call-control-btn { width: 38px; height: 38px; font-size: 14px; }
.voice-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.voice-stats .stat-num { font-size: 17px; }
.voice-stats .stat-label { margin-top: 2px; font-size: 11.5px; }

/* Testimonials band: soft grey-to-off-white fade with a faint green glow */
.section-testimonials {
  background:
    radial-gradient(ellipse 45% 55% at 50% 42%, rgba(37, 211, 102, 0.10), transparent 70%),
    linear-gradient(180deg, #EDF1F3 0%, #F9FAFB 100%);
}

/* Responsive */
@media (max-width: 640px) {
  .night-phones { max-width: 320px; height: 380px; margin-bottom: 48px; }
  .phone { width: 160px; height: 330px; border-radius: 24px; border-width: 6px; }
  .phone-back { left: 14px; top: 34px; }
  .phone-front { right: 14px; }
  .voice-frame { padding: 10px; }
  .voice-card { padding: 16px 14px 14px; }
}

/* =====================================================
   HOME PAGE — HERO IMAGE + HOVER STATES (index.php)
   Hero image: the provided dashboard screenshot, cropped to its frame
   (1025x578, frame is part of the image). Dark-card hover measured from
   the reference hover screenshot: scale 1.03, #00AF86 border + title.
===================================================== */
:root { --hover-green: #00AF86; }

/* Hero image (max 1024px wide, scales down with the viewport) */
.hero-visual-img { max-width: var(--ref-w-hero, 1024px); }
.hero-visual-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15, 30, 25, 0.10);
}
@media (max-width: 640px) { .hero-visual-img img { border-radius: 10px; } }

/* Cards in .grid get staggered transition-delays for the scroll reveal;
   hover must respond immediately, so cancel the delay on these cards. */
.night-grid > .night-card,
.solution-grid > .solution-card { transition-delay: 0s; }

/* Dark "Engage" cards: grow slightly, green border + green title */
.night-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.night-card h3 { transition: color 0.3s ease; }
.night-card:hover {
  transform: scale(1.03);
  border-color: var(--hover-green);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.night-card:hover h3 { color: var(--hover-green); }

/* Enterprise solution cards: lift + deeper shadow + soft green edge */
.solution-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.solution-card:hover {
  transform: translateY(-6px);
  border-color: #C8EEDB;
  box-shadow: 0 24px 54px rgba(15, 30, 25, 0.14);
}

/* Client logo cards */
.logo-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.logo-card:hover {
  transform: translateY(-4px);
  border-color: #C8EEDB;
  box-shadow: 0 12px 28px rgba(15, 30, 25, 0.12);
}

/* Chatbot feature rows */
.tint-row { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.tint-row:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 30, 25, 0.08); }

/* Testimonial cards (the marquee already pauses on hover) */
.testimonial-marquee-wrap .testimonial-card-mini { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.testimonial-marquee-wrap .testimonial-card-mini:hover {
  transform: translateY(-4px);
  border-color: #C8EEDB;
  box-shadow: 0 16px 36px rgba(15, 30, 25, 0.12);
}

/* Video + image visuals: lift + deeper shadow on hover.
   These are also scroll-reveal targets (.js .method-visual.in-view pins transform
   and sets its own transition), so the hover rules need matching specificity. */
.method-visual-video:hover,
.method-visual-frame:hover { box-shadow: 0 18px 44px rgba(15, 30, 25, 0.18); }
.js .method-stack .method-visual.in-view { transition: opacity 0.7s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.js .method-stack .method-visual-video.in-view:hover,
.js .method-stack .method-visual-frame.in-view:hover { transform: translateY(-3px); }

/* Buttons: the hero's white "Explore Features" button hides its border,
   so give it an explicit hover (the generic .btn-outline hover can't show). */
.hero-home .btn-outline:hover { border-color: var(--color-primary-darker); color: var(--color-primary-darker); box-shadow: var(--shadow-md); }
.btn-sm:hover { box-shadow: var(--shadow-md); }

/* Touch screens have no hover: skip the scale so tapped cards don't stick enlarged */
@media (hover: none) {
  .night-card:hover, .solution-card:hover, .logo-card:hover, .tint-row:hover,
  .testimonial-marquee-wrap .testimonial-card-mini:hover,
  .js .method-stack .method-visual-video.in-view:hover,
  .js .method-stack .method-visual-frame.in-view:hover { transform: none; }
}

/* =====================================================
   NAVBAR — FLOATING CARD + DROPDOWNS (includes/header.php)
   Matched to the reference screenshots:
   desktop card 1102x56, 12px radius, 20px from top; menu text #3F4859 15px;
   Login white 60x36, Register #00BA8E 100x38 (8px radius);
   Features panel 600px (2x5, 48px icon chips, 80px row pitch);
   Integrations panel 180px; NEW badge #B138FF -> #5774FF.
   Mobile: card inset 16px, dropdown card sized to its content.
===================================================== */
:root {
  --nav-green: #25D366;
  --nav-green-hover: #2abe60;
  --nav-text: #3F4859;
  --nav-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.07);
  --nav-panel-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), 0 14px 36px rgba(15, 23, 42, 0.13);
}

/* Header shell: transparent sticky strip; only the card itself is clickable */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 24px 24px 0;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
.site-header .nav-wrap {
  pointer-events: auto;
  position: relative;
  max-width: 1102px;
  min-height: 56px;
  margin: 0 auto;
  padding: 8px 10px 8px 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* keeps the menu centred in the card */
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  box-shadow: var(--nav-shadow);
}

/* Logo */
.site-header .brand { justify-self: start; gap: 8px; font-size: 17px; font-weight: 700; }
.site-header .brand-mark { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }

/* Menu */
.site-header .nav-links { justify-self: center; gap: 51px; }
.site-header .nav-links > * + * { margin-left: 0; }   /* the old flex-gap fallback would double the spacing */
.site-header .nav-links > a,
.site-header .nav-dropdown-trigger {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--nav-text);
  transition: color 0.15s ease;
}
.site-header .nav-links > a:hover,
.site-header .nav-links > a.active,
.site-header .nav-dropdown-trigger:hover,
.site-header .nav-dropdown-trigger.active,
.site-header .nav-item:hover .nav-dropdown-trigger,
.site-header .nav-item.open .nav-dropdown-trigger { color: var(--nav-green); }
.site-header .nav-dropdown-trigger .caret { color: #9CA3AF; transition: transform 0.2s ease, color 0.15s ease; }
.site-header .nav-item:hover .caret,
.site-header .nav-item.open .caret { color: var(--nav-green); }

/* Buttons */
.site-header .nav-actions { justify-self: end; gap: 12px; }
.site-header .nav-actions .btn {
  border-radius: 8px;
  font-size: 15px;
  line-height: 20px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.site-header .nav-actions .btn:hover { transform: none; }
.site-header .nav-actions .btn-outline {
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #E5E7EB;
  color: #111827;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.site-header .nav-actions .btn-outline:hover { background: #F9FAFB; border-color: #D1D5DB; color: #111827; }
.site-header .nav-actions .btn-primary {
  padding: 9px 19px;
  border: 0;
  background: var(--nav-green);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.site-header .nav-actions .btn-primary:hover { background: var(--nav-green-hover); box-shadow: 0 6px 16px rgba(0, 186, 142, 0.28); }

/* Dropdown panels: attached under the card, left-aligned with their trigger,
   fade + 8px slide. Visibility is delayed on close so the fade-out plays. */
.site-header .nav-item .mega-panel,
.site-header .nav-item .dropdown-panel {
  top: calc(100% + 15px);
  transform: translateY(8px);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  box-shadow: var(--nav-panel-shadow);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.site-header .nav-item .mega-panel { left: -4px; }
.site-header .nav-item .dropdown-panel { left: -3px; }
.site-header .nav-item:hover .mega-panel,
.site-header .nav-item.open .mega-panel,
.site-header .nav-item:hover .dropdown-panel,
.site-header .nav-item.open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
/* invisible bridge so the cursor can travel from the trigger into the panel */
.site-header .nav-item .mega-panel::before,
.site-header .nav-item .dropdown-panel::before { height: 20px; }

/* Features mega panel: 600px, two columns of five */
.site-header .mega-panel-wide { width: 600px; padding: 12px; }
.site-header .mega-panel-grid2 { gap: 16px 8px; }
.site-header .mega-panel-grid2 .mega-link {
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.site-header .mega-panel-grid2 .mega-link:hover { background: #F5F7F9; }
.site-header .mega-link-icon { width: 48px; height: 48px; border-radius: 10px; transition: transform 0.2s ease; }
.site-header .mega-link:hover .mega-link-icon { transform: scale(1.05); }
.site-header .mega-link-icon svg { width: 22px; height: 22px; }
.site-header .mega-link strong { font-size: 14.5px; font-weight: 600; line-height: 22px; letter-spacing: -0.01em; color: #111727; }
.site-header .mega-link small { margin-top: 2px; font-size: 12.5px; line-height: 18px; letter-spacing: -0.01em; color: #4A5464; }

/* Integrations panel: 180px, plain rows */
.site-header .dropdown-panel-compact { width: 180px; padding: 4px 6px; }
.site-header .dropdown-link {
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #364052;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-header .dropdown-link:hover { background: #F3F4F6; color: #111827; }
.site-header .dropdown-badge-new {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #B138FF, #5774FF);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.02em;
}

/* Narrower desktops: tighten the menu so it never collides with logo/buttons */
@media (max-width: 1100px) and (min-width: 881px) { .site-header .nav-links { gap: 28px; } }
@media (max-width: 1023px) and (min-width: 881px) {
  /* on narrow desktops share the spare room evenly instead of dead-centring the menu */
  .site-header .nav-wrap { display: flex; justify-content: space-between; }
  .site-header .nav-links { gap: 18px; }
  .site-header .brand { font-size: 16px; }
}

/* ---------- Mobile / tablet (hamburger) ---------- */
@media (max-width: 880px) {
  .site-header { padding: 10px 16px 0; }
  .site-header .nav-wrap {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: 8px 8px 8px 12px;
  }
  .site-header .brand { font-size: 15px; }
  .site-header .brand-mark { width: 28px; height: 28px; font-size: 13px; }
  .site-header .nav-actions { gap: 8px; }
  .site-header .nav-actions .btn-outline { display: inline-flex; padding: 6px 11px; }   /* Login stays visible, as in the reference */
  .site-header .nav-actions .btn-primary { padding: 8px 18px; }
  .site-header .nav-toggle { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  .site-header .nav-actions { gap: 6px; }
  .site-header .nav-actions .btn { font-size: 14px; }
  .site-header .nav-actions .btn-outline { padding: 5px 9px; }
  .site-header .nav-actions .btn-primary { padding: 7px 13px; }
  .site-header .nav-toggle { width: 30px; }
}

/* Mobile dropdown card: sits under the nav card, sized to its content */
.site-header .mobile-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 90px);
  margin: 0;
  padding: 6px 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-header .mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  margin-top: 0;
  max-height: calc(100vh - 90px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 15px;
  font-size: 15px;
  line-height: 22px;
  color: #374151;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mm-link::-webkit-details-marker { display: none; }
@media (hover: hover) { .mm-link:hover { background: #F9FAFB; color: #111827; } }   /* no sticky highlight after a tap */
.mm-link .caret { display: inline-flex; color: #9CA3AF; transition: transform 0.2s ease; }
.mm-acc[open] > .mm-link .caret { transform: rotate(180deg); }
.mm-sub {
  margin: 2px 8px 6px;
  padding-top: 8px;
  border-top: 1px solid #EEF0F2;
  animation: mmReveal 0.22s ease;
}
@keyframes mmReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.mm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 7px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
@media (hover: hover) { .mm-item:hover { background: #F5F7F9; } }
.mm-item:active { background: #F5F7F9; }   /* brief feedback on tap */
.mm-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.mm-icon svg { width: 16px; height: 16px; }
.mm-item strong { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; line-height: 20px; color: #1F2937; }
.mm-item small { display: block; font-size: 12.5px; line-height: 18px; color: #6B7280; }
.mm-item .dropdown-badge-new { padding: 1px 7px; border-radius: 999px; background: linear-gradient(90deg, #B138FF, #5774FF); color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; }
.mm-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 0 4px;
  border-top: 1px solid #EEF0F2;
  font-size: 14.5px;
  font-weight: 500;
  color: #2563EB;
  transition: color 0.15s ease;
}
.mm-viewall span { transition: transform 0.2s ease; }
.mm-viewall:hover { color: #1D4ED8; }
.mm-viewall:hover span { transform: translateX(3px); }

/* =====================================================
   NAVBAR v2 — original design (includes/header.php)
   Full-width frosted bar with a primary accent line, pill-track menu,
   centred mega panel with intro column, slide-in mobile drawer.
   Everything is scoped under .hdr and uses the existing colour
   variables (--color-primary, --color-deep, --color-bg-alt, ...).
===================================================== */

/* ---------- Bar ---------- */
.hdr {
  --hdr-h: 68px;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Frosted background + accent line live on a pseudo-element, so the mobile
   drawer (position: fixed) is not trapped by backdrop-filter. */
.hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* linear-gradient(90deg, var(--color-primary), rgba(37, 211, 102, 0.35) 45%, transparent 80%) top / 100% 3px no-repeat, */
    rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.25s ease;
}
.hdr.is-scrolled { --hdr-h: 60px; }
.hdr.is-scrolled::before { box-shadow: 0 14px 34px -20px rgba(6, 35, 28, 0.4); }

.hdr-inner {
  position: relative;
  max-width: var(--container-w);
  height: var(--hdr-h);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: height 0.25s ease;
}
.hdr-brand { justify-self: start; }

/* ---------- Menu: pill track ---------- */
.hdr-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2px;
  /* padding: 4px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px; */
}
.hdr .hdr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.hdr .hdr-link:hover,
.hdr .nav-item:hover > .hdr-link,
.hdr .nav-item.open > .hdr-link,
.hdr .nav-item:focus-within > .hdr-link {
  background: #fff;
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(6, 35, 28, 0.08), 0 3px 10px rgba(6, 35, 28, 0.06);
}
.hdr .hdr-link.active {
  background: #fff;
  color: var(--color-deep);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(37, 211, 102, 0.15);
}
.hdr .hdr-link .caret { color: var(--color-muted); transition: transform 0.25s ease; }
.hdr .nav-item:hover > .hdr-link .caret,
.hdr .nav-item:focus-within > .hdr-link .caret { transform: rotate(180deg); }

/* ---------- Dropdown panels ---------- */
.hdr-panel {
  position: absolute;
  z-index: 200;
  left: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 26px 60px -22px rgba(6, 35, 28, 0.32), 0 4px 14px rgba(6, 35, 28, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px) scale(0.98);
  transform-origin: top center;
  /* the 0.12s delay on close is a grace period: a wobbly cursor won't snap it shut */
  transition: opacity 0.2s ease 0.12s, transform 0.2s ease 0.12s, visibility 0s linear 0.32s;
}
.hdr .nav-item:hover > .hdr-panel,
.hdr .nav-item.open > .hdr-panel,
.hdr .nav-item:focus-within > .hdr-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
/* green accent on the top edge */
.hdr-panel::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  /* background: linear-gradient(90deg, transparent, var(--color-primary), transparent); */
}
/* invisible bridge between the trigger and the panel, so moving the cursor down never closes it */
.hdr-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 36px;
}

/* Features: wide panel centred under the bar, intro column + two-column list */
.hdr .nav-item-mega { position: static; }
.hdr-panel-mega {
  top: calc(100% + 10px);
  width: min(620px, calc(100vw - 48px));
  padding: 14px;
  display: grid;
  /* grid-template-columns: 230px 1fr; */
  gap: 14px;
}
/* .hdr-mega-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(37, 211, 102, 0.16), rgba(37, 211, 102, 0.04));
} */
.hdr-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-deep);
}
/* .hdr-mega-intro strong { font-family: var(--font-heading); font-size: 18px; line-height: 1.3; color: var(--color-ink); }
.hdr-mega-intro p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-muted); } */
.hdr-viewall {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.hdr-viewall span { transition: transform 0.2s ease; }
.hdr-viewall:hover { background: var(--color-primary-dark); }
.hdr-viewall:hover span { transform: translateX(3px); }
.hdr-mega-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 2px 8px;
}

/* Integrations: compact card under its own label */
.hdr-panel-sm { top: calc(100% + 26px); width: 300px; padding: 8px; }

/* Items (shared by both panels) */
.hdr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  transition: background 0.18s ease;
}
.hdr-item:hover,
.hdr-item:focus-visible { background: var(--color-bg-alt); }
.hdr-ico {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.hdr-ico svg { width: 18px; height: 18px; }
.hdr-item:hover .hdr-ico { transform: rotate(-6deg) scale(1.06); }
.hdr-item-text { min-width: 0; }
.hdr-item-text strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-ink);
  transition: color 0.18s ease;
}
.hdr-item:hover .hdr-item-text strong { color: var(--color-deep); }
.hdr-item-text small { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-muted); }
.hdr-new {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.hdr-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.hdr .hdr-login {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.hdr .hdr-login:hover { background: var(--color-bg-alt); color: var(--color-deep); transform: none; }
.hdr .hdr-register {
  gap: 8px;
  padding: 9px 16px 9px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(37, 211, 102, 0.75);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hdr .hdr-register svg { transition: transform 0.2s ease; }
.hdr .hdr-register:hover { background: var(--color-primary-dark); transform: none; box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.85); }
.hdr .hdr-register:hover svg { transform: translateX(3px); }

/* ---------- Narrower desktops ---------- */
@media (max-width: 1100px) and (min-width: 881px) { .hdr .hdr-link { padding: 8px 12px; } }
@media (max-width: 1023px) and (min-width: 881px) {
  .hdr-inner { display: flex; justify-content: space-between; gap: 12px; }
  .hdr .hdr-link { padding: 7px 10px; font-size: 14px; }
  .hdr .hdr-login { padding: 8px 10px; }
  .hdr .hdr-register { padding: 9px 16px; }
  .hdr .hdr-register svg { display: none; }
}

/* ---------- Mobile: slide-in drawer ---------- */
@media (min-width: 881px) { .hdr-drawer { display: none; } }

@media (max-width: 880px) {
  .hdr { --hdr-h: 62px; }
  .hdr.is-scrolled { --hdr-h: 56px; }
  .hdr-inner { display: flex; justify-content: space-between; padding: 0 16px; }
  .hdr-menu,
  .hdr-actions .hdr-login,
  .hdr-actions .hdr-register { display: none; }
  .hdr .hdr-toggle {
    position: relative;
    z-index: 3;                 /* stays above the open drawer so it can close it */
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    transition: background 0.2s ease;
  }
  .hdr .hdr-toggle.is-active { background: #fff; }

  /* dimmed backdrop; tapping it closes the drawer (existing outside-click handler) */
  .hdr::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(6, 35, 28, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .hdr:has(.hdr-drawer.open)::after { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
  body:has(.hdr-drawer.open) { overflow: hidden; }

  .hdr-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(380px, 100vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -24px 0 60px -20px rgba(6, 35, 28, 0.4);
    transform: translateX(100%);
    visibility: hidden;
    overscroll-behavior: contain;
    transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.35s;
  }
  .hdr-drawer.open {
    transform: none;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s;
  }
  .hdr-drawer-head {
    flex-shrink: 0;
    height: var(--hdr-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .hdr-drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px; }

  .hdr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 12px;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
    list-style: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .hdr-row::-webkit-details-marker { display: none; }
  .hdr-row:active { background: var(--color-bg-alt); }
  .hdr-row .caret {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-deep);
    transition: transform 0.25s ease, background 0.2s ease;
  }
  .hdr-acc[open] > .hdr-row { color: var(--color-deep); }
  .hdr-acc[open] > .hdr-row .caret { transform: rotate(180deg); background: rgba(37, 211, 102, 0.18); }

  .hdr-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 4px 14px;
    animation: hdrTilesIn 0.3s ease;
  }
  .hdr-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
  .hdr-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 118px;
    padding: 14px;
    border-radius: 16px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    transition: transform 0.15s ease, border-color 0.2s ease;
  }
  .hdr-tile:active { transform: scale(0.97); border-color: var(--color-primary); }
  .hdr-tile .hdr-ico { width: 34px; height: 34px; }
  .hdr-tile strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--color-ink); }
  .hdr-tile small { font-size: 12px; line-height: 1.4; color: var(--color-muted); }
  .hdr-tile-all { background: var(--color-primary); border-color: transparent; }
  .hdr-tile-all strong { color: #fff; }
  .hdr-tile-all small { color: rgba(255, 255, 255, 0.85); }
  .hdr-tile-all .hdr-ico { background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 18px; font-weight: 700; }

  .hdr-drawer-foot {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
  }
  .hdr-drawer-foot .btn { justify-content: center; padding: 12px 16px; border-radius: 999px; font-size: 15px; }
  .hdr-drawer-foot .hdr-login { border: 1.5px solid var(--color-border); color: var(--color-ink); background: #fff; }

  /* rows slide in one after another when the drawer opens */
  .hdr-drawer.open .hdr-drawer-body > * { animation: hdrRowIn 0.4s ease both; }
  .hdr-drawer.open .hdr-drawer-body > :nth-child(2) { animation-delay: 0.04s; }
  .hdr-drawer.open .hdr-drawer-body > :nth-child(3) { animation-delay: 0.08s; }
  .hdr-drawer.open .hdr-drawer-body > :nth-child(4) { animation-delay: 0.12s; }
  .hdr-drawer.open .hdr-drawer-body > :nth-child(5) { animation-delay: 0.16s; }
}
@keyframes hdrRowIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes hdrTilesIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
  /* the bar now only holds the logo + toggle, so the brand name has room (an older rule caps it at 96px) */
  .hdr .brand-name { max-width: calc(100vw - 150px); }
}
@media (max-width: 440px) {
  .hdr-drawer { width: 100vw; }   /* full-width sheet on phones instead of a thin strip of backdrop */
}
@media (max-width: 380px) {
  .hdr-row { font-size: 17px; }
  .hdr-tile { min-height: 108px; padding: 12px; }
}

.method-visual--forms {
  width: 100%;
  max-width: 750px;          /* desktop width */
  aspect-ratio: 750 / 400;   /* keeps 750x400 proportions on smaller screens */
  margin-inline: auto;

  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Center the card (only affects this section, not every .grid) */
.forms-showcase {
  display: flex;
  justify-content: center;
}

/* Card: rounded corners with a soft shadow */
.forms-showcase-card {
  width: 100%;
  max-width: 750px;
  margin: 32px auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Image: the whole image shows and scales down on mobile */
.forms-showcase-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Center the card (only affects this section, not every .grid) */
.forms-showcase-wp {
  display: flex;
  justify-content: center;
}

/* Card: rounded corners with a soft shadow */
.forms-showcase-card-wp {
  width: 100%;
  max-width: 576px;
  margin: 32px auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Image: the whole image shows and scales down on mobile */
.forms-showcase-img-wp {
  display: block;
  width: 100%;
  height: auto;
}