/* ── KeyOps shared styles ──
   Loaded by every page in the site. Contains design tokens, reset,
   nav, login dropdown, footer, common helpers and buttons.
   Page-specific section styles (heroes, comparison tables, feature
   grids, etc.) live inline in each page's <style> block. */

/* ── TOKENS ── */
:root {
  --blue: #3376D1;
  --blue-dark: #2c5282;
  --blue-deep: #1A4B7B;
  --blue-pale: #e8f0fa;
  --blue-light: #F5FBFF;
  --arctic: #E0F0FF;
  --teal: #39BDAF;
  --teal-pale: #e6f7f5;
  --gray-25: #F9FAFC;
  --gray-100: #E0E4E8;
  --gray-600: #55636F;
  --orange: #FAAA3C;
  --white: #ffffff;
  --text-dark: #1A4B7B;
  --text-mid: #55636F;
  --text-light: #718096;
  --border: #E0E4E8;
  --red: rgb(214, 69, 69);
}

/* ── RESET / BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 76px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  padding: 0 48px;
  gap: 40px;
}

.nav-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 4px;
  flex: 1;
}

.nav-links li {
  position: relative;
}

.nav-links li>a,
.nav-links li>span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: color .2s, background .2s;
  white-space: nowrap;
  text-decoration: none;
}

.nav-links li>a:hover,
.nav-links li>span:hover {
  color: var(--blue);
  background: var(--blue-pale);
}

.chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  padding: 10px;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(26, 75, 123, 0.12);
}

.nav-links li:hover .nav-dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-dark);
  text-decoration: none;
  line-height: normal;
  transition: background .15s;
}

.nav-dropdown a:hover {
  background: var(--gray-25);
  color: var(--blue);
}

.drop-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}

.drop-label {
  font-weight: 600;
  display: block;
  font-size: 14px;
}

.drop-sub {
  font-size: 11px;
  color: var(--text-light);
  display: block;
  margin-top: 1px;
}

.nav-dropdown-divider {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: 6px 0;
}

.nav-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn-nav-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  padding: 8px 16px;
  border-radius: 6px;
  transition: color .2s;
  text-decoration: none;
}

.btn-nav-login:hover {
  color: var(--blue);
}

.btn-primary-nav {
  background: var(--blue);
  color: var(--white);
  padding: 9px 20px;
  border-radius: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
  text-decoration: none;
}

.btn-primary-nav:hover {
  background: #2a61ab;
}

/* ── LOGIN DROPDOWN ── */
.nav-login-wrap {
  position: relative;
}

.nav-login-wrap .btn-nav-login {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-login-wrap:hover .btn-nav-login {
  color: var(--blue);
  background: var(--blue-pale);
}

.nav-login-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  padding: 8px;
  min-width: 230px;
  box-shadow: 0 12px 40px rgba(26, 75, 123, 0.12);
  z-index: 200;
}

.nav-login-wrap:hover .nav-login-dropdown {
  display: block;
}

.nav-login-opt {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  line-height: normal;
  border-radius: 8px;
  transition: background .15s;
}

.nav-login-opt:hover {
  background: var(--gray-25);
}

.nav-login-opt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.login-chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* ── COMMON HELPERS ── */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-dark);
  letter-spacing: -1.2px;
  margin-bottom: 20px;
}

.section-title em {
  font-style: normal;
  color: var(--blue);
}

.section-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 600px;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  font-size: 12px;
  color: var(--text-mid);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-mid);
  transition: color .2s;
}

.breadcrumb a:hover {
  color: var(--blue);
}

.breadcrumb-sep {
  color: var(--gray-100);
  font-size: 11px;
}

.breadcrumb-current {
  color: var(--blue);
  font-weight: 600;
}

/* ── COMMON BUTTONS ── */
.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: var(--white);
  padding: 13px 26px;
  border-radius: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s, transform .15s;
  justify-content: center;
}

.btn-blue:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-dark);
  border: 1.5px solid var(--border);
  padding: 13px 26px;
  border-radius: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s, color .2s;
}

.btn-outline-dark:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  padding: 13px 26px;
  border-radius: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s, background .2s;
}

.btn-outline-white:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

.btn-teal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--white);
  padding: 13px 28px;
  border-radius: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s, transform .15s;
}

.btn-teal:hover {
  background: #2da898;
  transform: translateY(-1px);
}

/* ── FOOTER ── */
footer {
  background: var(--blue-deep);
  padding: 72px 48px 0;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand img {
  height: 28px;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  max-width: none;
}

.footer-col h5 {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 20px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
  line-height: 1.4;
  transition: color .2s;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--teal);
}

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  border-top: none;
}

.footer-preferred {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.footer-preferred span {
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
}

/* ── SHARED HERO BACKGROUND ──
   Add `class="hero-bg ..."` to a hero <section> to apply the standard
   light-gradient background plus two decorative radial-gradient circles
   (teal top-right + blue bottom-left). Use alongside the page-specific
   hero class which carries padding/layout. Pages with non-standard
   decoration sizes/translates (for-hcps, schedule-a-demo, *-success,
   terms, privacy) skip this helper and define their own. */
.hero-bg {
  background: linear-gradient(145deg, var(--blue-light) 0%, #EBF4FF 55%, var(--arctic) 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  content: ''; position: absolute;
  top: 0; right: 0; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(57,189,175,0.09) 0%, transparent 70%);
  transform: translate(30%, -30%); pointer-events: none;
}
.hero-bg::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(51,118,209,0.07) 0%, transparent 70%);
  transform: translate(-30%, 30%); pointer-events: none;
}

/* ── SHARED ANIMATIONS ──
   Used identically by 2+ pages each. Single-page or variant animations
   (.fadeUp 20px on index, .pulse, .pulseDot, .floatAnim, .hfloat) stay inline. */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── HAMBURGER (mobile only) ── */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}

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

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

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

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* Nav becomes a slide-down panel */
  nav {
    padding: 0 24px;
    gap: 16px;
    flex-wrap: wrap;
    height: auto;
    min-height: 76px;
  }

  body.nav-open nav {
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-toggle {
    display: flex;
    order: 2;
    min-height: 76px;
  }

  .nav-logo {
    order: 1;
    display: flex;
    align-items: center;
    min-height: 76px;
  }

  .nav-links,
  .nav-cta {
    display: none;
    order: 3;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0 16px;
    margin-left: 0;
  }

  body.nav-open .nav-links,
  body.nav-open .nav-cta {
    display: flex;
  }

  .nav-cta {
    border-top: 1px solid var(--gray-100);
    padding-top: 16px;
    gap: 10px;
  }

  .nav-links li > a,
  .nav-links li > span {
    padding: 12px 14px;
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
  }

  /* Auto-expand dropdowns inline inside the mobile panel */
  .nav-dropdown,
  .nav-login-dropdown {
    display: flex !important;
    flex-direction: column;
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--gray-100);
    border-radius: 0;
    margin: 4px 0 8px 14px;
    padding: 4px 0 4px 12px;
    min-width: 0;
    background: transparent;
  }

  .nav-dropdown a,
  .nav-login-opt {
    padding: 10px 12px;
  }

  .btn-nav-login {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 15px;
  }

  .btn-primary-nav,
  .nav-cta .btn-blue,
  .nav-cta .btn-teal {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Footer collapses to single column on mobile */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  footer {
    padding: 56px 24px 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  nav {
    padding: 0 16px;
  }

  footer {
    padding: 48px 16px 0;
  }
}

/* ── COMPARISON TABLE — stacked cards on mobile ──
   Used by solutions-kolab.html and why-keyops.html.
   Cells in cols 2 & 3 should carry data-col="..." for the inline label. */
@media (max-width: 768px) {
  .comparison-table thead {
    display: none;
  }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table td {
    display: block;
    width: 100%;
  }

  .comparison-table tr {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
  }

  .comparison-table tbody tr:hover td {
    background: transparent;
  }

  .comparison-table tbody td {
    border: none !important;
    background: transparent !important;
    padding: 12px 18px;
    font-size: 14px;
  }

  .comparison-table tbody td:first-child {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--white) !important;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 12px 18px;
  }

  .comparison-table tbody td:nth-child(2)::before,
  .comparison-table tbody td:nth-child(3)::before {
    content: attr(data-col);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
  }

  .comparison-table tbody td:nth-child(3)::before {
    color: var(--teal);
  }

  .comparison-table tbody td:nth-child(3) {
    color: var(--teal) !important;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
}

/* ── PAGE-SPECIFIC RESPONSIVE RULES ──
   Mobile/tablet rules for selectors that mostly live on a single page.
   Kept here (rather than inline) so all responsive CSS lives in one file. */

/* ── Shared section padding ladder ──
   Every <section class="section ..."> across the site collapses padding to:
   88px 32px (1024) → 72px 24px (768) → 56px 18px (480).
   Heroes, CTAs, and special-padding sections (.contact-main, .stats-strip,
   .logos-bar, .solutions-section) skip the .section helper and use per-page
   ladders below. */
@media (max-width: 1024px) {
  .section { padding: 88px 32px; }
}

@media (max-width: 768px) {
  .section { padding: 72px 24px; }
}

@media (max-width: 480px) {
  .section { padding: 56px 18px; }
}

/* ── Shared CTA padding ladder ──
   All CTA sections converge to the same mobile ladder at 768 + 480.
   The 1024 step varies per page (kolab keeps it compact at 88, others at 104) —
   defined per-page below. */
@media (max-width: 768px) {
  .cta-section, .solutions-cta, .about-cta-section, .join-section, .contact-cta
  { padding: 88px 24px; }
}

@media (max-width: 480px) {
  .cta-section, .solutions-cta, .about-cta-section, .join-section, .contact-cta
  { padding: 72px 18px; }
}

/* solutions.html */
@media (max-width: 1024px) {
  .solutions-hero { padding: 124px 32px 80px; }
  .solutions-section { padding: 80px 32px 96px; }
  .stats-strip { padding: 64px 32px; }
  .solutions-cta { padding: 104px 32px; }
}

@media (max-width: 768px) {
  .solutions-hero { padding: 108px 24px 64px; }
  .solutions-section { padding: 64px 24px 80px; }
  .solutions-grid { grid-template-columns: 1fr; }
  .stats-strip { padding: 56px 24px; }
  .stats-strip-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .solution-card-header { padding: 36px 32px 0; }
  .solution-bullets { padding: 0 32px; }
  .solution-card-footer { padding: 28px 32px 36px; }
}

@media (max-width: 480px) {
  .solutions-hero { padding: 96px 18px 56px; }
  .solutions-section { padding: 56px 18px 72px; }
  .stats-strip { padding: 48px 18px; }
  .stats-strip-grid { gap: 24px; }
  .stat-num { font-size: 36px; }
  .solution-card-header { padding: 32px 24px 0; }
  .solution-bullets { padding: 0 24px; }
  .solution-card-footer { padding: 24px 24px 32px; }
}

/* solutions-kolab.html
   Most .cta-section pages share this slightly more spongy CTA padding ladder. */
@media (max-width: 1024px) {
  .page-hero { padding: 124px 32px 88px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-section { padding: 88px 32px; }
}

@media (max-width: 768px) {
  .page-hero { padding: 104px 24px 72px; }
  .ai-panel { padding: 40px 28px; }
  .use-cases-grid, .ai-grid, .models-grid { grid-template-columns: 1fr; }
  .activities-chips { grid-template-columns: repeat(2, 1fr); }
  .use-case-card, .model-card { padding: 36px 28px; }
  .ai-card { padding: 32px 24px; }
  .ai-panel::before { width: 280px; height: 280px; top: -60px; right: -60px; }
  .ai-panel::after { width: 220px; height: 220px; bottom: -50px; left: -50px; }
  .cta-section::before { width: 320px; height: 320px; top: -100px; right: -100px; }
  .cta-section::after { width: 240px; height: 240px; bottom: -70px; left: -70px; }
}

@media (max-width: 480px) {
  .page-hero { padding: 96px 18px 56px; }
  .ai-panel { padding: 32px 20px; }
  .use-case-card { padding: 28px 22px; }
  .ai-card { padding: 26px 20px; }
  .model-card { padding: 32px 24px; }
  .activities-chips, .service-grid { grid-template-columns: 1fr; }
  .cta-section::before { width: 240px; height: 240px; top: -80px; right: -80px; }
  .cta-section::after { width: 180px; height: 180px; bottom: -50px; left: -50px; }
}

/* solutions-surveys.html
   Note: .page-hero + .cta-section already covered by solutions-kolab block above. */
@media (max-width: 1024px) {
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .usecases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .diff-grid, .flex-grid, .approach-grid,
  .ai-layout, .cs-grid { grid-template-columns: 1fr; }
  .ai-features { grid-template-columns: 1fr !important; }
  .usecases-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-grid { gap: 40px; }
  .diff-card, .flex-card { padding: 36px 28px; }
  .cs-testimonial { padding: 36px 28px; }
}

@media (max-width: 480px) {
  .usecases-grid { grid-template-columns: 1fr; }
  .diff-card, .flex-card { padding: 32px 22px; }
}

/* solutions-trackers.html */
@media (max-width: 1024px) {
  .continuous-grid, .teams-grid, .suite-grid, .service-grid { grid-template-columns: repeat(2, 1fr); }
  .cadence-options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .trackers-grid, .continuous-compare, .measures-tabs { grid-template-columns: 1fr; }
  .continuous-grid, .teams-grid, .suite-grid, .service-grid { grid-template-columns: 1fr; }
  .cadence-options { grid-template-columns: 1fr 1fr; }
  .cadence-strip { padding: 32px 28px; }
  .continuous-section::before { width: 320px; height: 320px; top: -80px; right: -80px; }
  .continuous-section::after { width: 220px; height: 220px; bottom: -60px; left: -60px; }
  .tracker-card-header { padding: 32px 28px 24px; }
  .tracker-measures { padding: 24px 28px; }
  .compare-col { padding: 28px; }
  .continuous-card { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .cadence-options { grid-template-columns: 1fr; }
  .cadence-strip { padding: 28px 22px; }
  .continuous-card { padding: 28px 22px; }
  .compare-col { padding: 24px 22px; }
}

/* solutions-appraise.html */
@media (max-width: 1024px) {
  .formats-grid, .cme-grid { grid-template-columns: repeat(2, 1fr); }
  .measures-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .how-arrow { display: none; }
}

@media (max-width: 768px) {
  .problem-layout, .dashboard-layout { grid-template-columns: 1fr; }
  .problem-layout { gap: 48px; }
  .problem-stat-row { flex-direction: column; gap: 16px; }
  .how-steps { grid-template-columns: 1fr; }
  .measures-row-2 { grid-template-columns: 1fr; }
  .formats-grid { grid-template-columns: 1fr 1fr; }
  .cme-grid { grid-template-columns: 1fr 1fr; }
  .problem-visual { padding: 36px 28px; }
  .how-step { padding: 32px 28px; }
  .measure-card, .cme-card { padding: 28px 24px; }
  .dashboard-features { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .formats-grid, .measures-grid, .cme-grid { grid-template-columns: 1fr; }
  .problem-visual { padding: 32px 22px; }
  .how-step { padding: 28px 22px; }
}

/* why-keyops.html
   .compare-card here is a div-based comparison, not a <table>. */
@media (max-width: 1024px) {
  .hero { padding: 132px 32px 88px; }
  .stats-section { padding: 72px 32px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero { padding: 120px 24px 72px; }
  .diff-inner { grid-template-columns: 1fr; gap: 48px; }
  .compare-card { position: static; }
  .compare-cols { display: none; }
  .compare-rows { gap: 14px; padding-top: 8px; }
  .compare-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .compare-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
  }
  .compare-cell.good::before {
    content: '✓ KeyOps';
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue);
  }
  .compare-cell.bad::before {
    content: '✕ Traditional';
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #dc3545;
  }
  .stats-section { padding: 64px 24px; }
  .solutions-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 32px; padding-top: 32px; }
  .hero-stat-num { font-size: 32px; }
  .stats-grid { gap: 32px; }
  .stat-num { font-size: 38px; }
}

@media (max-width: 480px) {
  .hero { padding: 104px 18px 56px; }
  .stats-section { padding: 56px 18px; }
  .tcard { padding: 28px 22px; }
}

/* for-hcps.html
   .join-section is the page's CTA section (not .cta-section).
   Hero floats are repositioned + scaled, not hidden. */
@media (max-width: 1024px) {
  .hcp-hero { padding: 132px 32px 96px; }
  .join-section { padding: 104px 32px; }
  .why-join-grid, .engage-grid, .hcp-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .hcp-how-steps { grid-template-columns: repeat(2, 1fr); }
  .rewards-tiers { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hcp-hero { padding: 108px 24px 80px; }
  .hcp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hcp-hero-proof { gap: 32px; }
  .hcp-hero-card { padding: 32px 28px; }
  .hcp-hero-float { bottom: -16px; left: -8px; padding: 14px 18px; gap: 10px; }
  .hcp-hero-float strong { font-size: 16px; }
  .hcp-hero-float-icon { width: 36px; height: 36px; }
  .hcp-hero-float2 { top: -10px; right: -8px; padding: 12px 16px; }
  .hcp-hero-float2 .hf2-val { font-size: 18px; }

  .why-join-grid, .engage-grid, .hcp-testimonials-grid { grid-template-columns: 1fr; }
  .hcp-how-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .hcp-tcard-wide { grid-column: span 1; }
  .tier-points-note { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px 28px; }
  .rewards-tiers { grid-template-columns: 1fr 1fr; }
  .why-join-card { padding: 36px 28px; }
}

@media (max-width: 480px) {
  .hcp-hero { padding: 96px 18px 64px; }
  .hcp-hero-card { padding: 28px 22px; }
  .hcp-card-step { padding: 14px 16px; }
  .hcp-hero-float { padding: 12px 14px; gap: 10px; }
  .hcp-hero-float strong { font-size: 14px; }
  .hcp-hero-float-icon { width: 32px; height: 32px; }
  .hcp-hero-float2 { top: -6px; right: -4px; padding: 10px 14px; }

  .hcp-how-steps { grid-template-columns: 1fr; }
  .rewards-tiers { grid-template-columns: 1fr; }
  .tier-points-note { grid-template-columns: 1fr 1fr; padding: 22px 24px; }
  .why-join-card { padding: 32px 24px; }
  .hcp-how-step { padding: 32px 24px; }
}

/* about.html
   .about-cta-section is the page's CTA (not .cta-section). */
@media (max-width: 1024px) {
  .about-hero { padding: 132px 32px 88px; }
  .about-cta-section { padding: 104px 32px; }
  .values-grid, .highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .about-hero { padding: 108px 24px 80px; }
  .about-hero-stats { gap: 36px; padding-top: 36px; margin-top: 40px; }
  .origin-text { grid-template-columns: 1fr; gap: 24px; }
  .mission-layout, .location-layout { grid-template-columns: 1fr; gap: 48px; }
  .mission-statement { padding: 44px 36px; }
  .mission-text { font-size: 19px; }
  .value-card { padding: 36px 28px; }
  .highlight-card { padding: 32px 28px; }
  .location-map { height: 280px; }
}

@media (max-width: 480px) {
  .about-hero { padding: 96px 18px 64px; }
  .values-grid, .highlights-grid { grid-template-columns: 1fr; }
  .mission-statement { padding: 36px 28px; }
  .mission-text { font-size: 17px; }
  .value-card { padding: 32px 24px; }
  .highlight-card { padding: 28px 22px; }
}

/* contact.html
   .contact-cta is the page's CTA section (not .cta-section). */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .contact-stats-card { grid-column: 1 / -1; }
  .contact-hero { padding: 132px 32px 80px; }
  .contact-main { padding: 0 32px 80px; }
  .logos-section { padding: 56px 32px; }
  .contact-cta { padding: 104px 32px; }
}

@media (max-width: 768px) {
  .contact-hero { padding: 108px 24px 64px; }
  .contact-main { padding: 0 24px 72px; }
  .contact-sidebar { grid-template-columns: 1fr; }
  .logos-section { padding: 48px 24px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .contact-stats-card { padding: 32px 28px; }
  .contact-info-card { padding: 32px 28px; }
}

@media (max-width: 480px) {
  .contact-hero { padding: 96px 18px 56px; }
  .contact-main { padding: 0 18px 56px; }
  .logos-section { padding: 40px 18px; }
  .contact-stats-card { padding: 28px 22px; }
  .contact-info-card { padding: 28px 22px; }
  .contact-stat-num { font-size: 24px; min-width: 60px; }
  .testimonial-card { padding: 28px 24px; }
}

/* index.html
   Hero overlays repositioned (not hidden) per mobile guideline. */
@media (max-width: 1024px) {
  .hero { padding: 116px 32px 96px; }
  .logos-bar { padding: 28px 32px; }
  .stats-section { padding: 72px 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .why-features { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero { padding: 104px 24px 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-stats { gap: 28px; }
  .logos-bar { padding: 28px 24px; }
  .stats-section { padding: 64px 24px; }
  .products-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .how-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-screenshot-overlay { bottom: -24px; left: 0; width: 70%; }
  .hero-ai-badge { top: -8px; right: 8px; padding: 12px 14px; min-width: 110px; }
  .ai-badge-value { font-size: 18px; }
  .product-card-header { padding: 28px 28px 20px; }
  .product-card-link { padding: 16px 28px 24px; }
  .why-feature { padding: 26px 24px; }
  .how-step { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .hero { padding: 96px 18px 64px; }
  .hero-stats { flex-direction: column; gap: 20px; padding-top: 32px; }
  .logos-bar { padding: 24px 18px; }
  .stats-section { padding: 56px 18px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .how-steps { grid-template-columns: 1fr; }
  .stat-num { font-size: 38px; }
  .stat-item { padding: 28px 22px; }
  .hero-screenshot-overlay { bottom: -16px; left: 0; width: 80%; }
  .hero-ai-badge { top: -4px; right: 4px; padding: 10px 12px; min-width: 96px; }
  .ai-badge-value { font-size: 16px; }
  .product-card-header { padding: 26px 22px 18px; }
  .product-card-link { padding: 14px 22px 22px; }
  .why-feature { padding: 24px 22px; }
  .how-step { padding: 28px 22px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
}

/* Article template (.art-* classes — used by 22 article-*.html pages) */
@media (max-width: 1024px) {
  .art-hero { padding: 124px 32px 80px; }
  .art-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .art-hero-visual { max-width: 560px; }
  .art-body { padding: 56px 48px 88px; }
  .art-cta { padding: 104px 32px; }
}

@media (max-width: 768px) {
  .art-hero { padding: 108px 24px 64px; }
  .art-body { padding: 48px 24px 72px; }
  .art-about-grid { grid-template-columns: 1fr; }
  .art-cta { padding: 88px 24px; }
  .art-pull-quote { padding: 36px 28px; }
  .art-section-heading { padding: 18px 22px; }
  .art-pull-quote p { font-size: 17px; }
}

@media (max-width: 480px) {
  .art-hero { padding: 96px 18px 56px; }
  .art-hero-visual img { height: 200px; }
  .art-body { padding: 40px 18px 64px; }
  .art-cta { padding: 72px 18px; }
  .art-pull-quote { padding: 32px 24px; }
  .art-section-heading { padding: 16px 20px; }
  .art-stat-callout { flex-direction: column; gap: 16px; padding: 28px 24px; }
  .art-about-card { padding: 28px 22px; }
}

/* Case-study template (.cs-* classes — used by 5 case-study-*.html + 9 article-* with cs layout) */
@media (max-width: 1024px) {
  .cs-hero { padding: 124px 32px 80px; }
  .cs-stats-strip { padding: 56px 32px; }
  .cs-page-wrap { grid-template-columns: 160px 1fr; gap: 28px; padding: 64px 32px 96px; }
  .cs-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .cs-respondent-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-cta { padding: 104px 32px; }
}

@media (max-width: 768px) {
  .cs-hero { padding: 108px 24px 64px; }
  .cs-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cs-hero-visual { max-width: 480px; }
  .cs-stats-strip { padding: 48px 24px; }
  .cs-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .cs-page-wrap { grid-template-columns: 1fr; padding: 48px 24px 72px; }
  .cs-toc { display: none; }
  .cs-cta { padding: 88px 24px; }
  .cs-pull-quote { padding: 36px 28px; }
  .cs-section-heading { padding: 18px 22px; }
  .cs-pull-quote p { font-size: 17px; }
}

@media (max-width: 480px) {
  .cs-hero { padding: 96px 18px 56px; }
  .cs-hero-visual img { height: 220px; }
  .cs-stats-strip { padding: 40px 18px; }
  .cs-stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cs-page-wrap { padding: 40px 18px 64px; }
  .cs-cta { padding: 72px 18px; }
  .cs-pull-quote { padding: 32px 24px; }
  .cs-section-heading { padding: 16px 20px; }
  .cs-respondent-grid { grid-template-columns: 1fr; }
  .cs-point { padding: 20px 22px; gap: 16px; }
}

/* terms-of-use.html + privacy-policy.html (shared .legal-* classes) */
@media (max-width: 1024px) {
  .legal-hero { padding: 124px 32px 72px; }
  .legal-layout { grid-template-columns: 220px 1fr; gap: 48px; padding: 64px 32px 96px; }
}

@media (max-width: 768px) {
  .legal-hero { padding: 108px 24px 64px; }
  .legal-layout { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 80px; }
  .legal-toc { position: static; max-height: none; }
}

@media (max-width: 480px) {
  .legal-hero { padding: 96px 18px 56px; }
  .legal-layout { padding: 48px 18px 64px; }
  .legal-toc { padding: 24px 20px; }
}

/* resources.html */
.filter-bar-inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-bar-inner::-webkit-scrollbar { display: none; }

@media (max-width: 1024px) {
  .resources-hero { padding: 124px 32px 64px; }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .resources-section { padding: 56px 32px 88px; }
  .filter-bar-inner { padding: 0 32px; }
  .resources-cta { padding: 104px 32px; }
}

@media (max-width: 768px) {
  .resources-hero { padding: 108px 24px 56px; }
  .resources-section { padding: 48px 24px 72px; }
  .filter-bar-inner { padding: 0 24px; }
  .resources-cta { padding: 88px 24px; }
  .resource-card-body { padding: 24px 26px; }
}

@media (max-width: 480px) {
  .resources-hero { padding: 96px 18px 48px; }
  .resources-grid { grid-template-columns: 1fr; }
  .resources-section { padding: 40px 18px 56px; }
  .filter-bar-inner { padding: 0 18px; }
  .resources-cta { padding: 72px 18px; }
}

/* rewards.html
   Note: .faq-section and .join-section already covered by for-hcps block. */
@media (max-width: 1024px) {
  .rewards-hero { padding: 124px 32px 88px; }
  .rewards-hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .earn-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .rewards-hero { padding: 108px 24px 72px; }
  .how-rewards-steps { grid-template-columns: 1fr; gap: 32px; }
  .partners-grid { grid-template-columns: 1fr; }
  .tier-card { padding: 32px 28px; }
  .earn-card { padding: 28px 22px; }
  .partner-card { padding: 32px 28px; }
}

@media (max-width: 480px) {
  .rewards-hero { padding: 96px 18px 64px; }
  .tiers-grid, .earn-grid { grid-template-columns: 1fr; }
  .tier-card { padding: 28px 24px; }
  .earn-card { padding: 24px 20px; }
  .partner-card { padding: 28px 22px; }
}

/* careers.html */
@media (max-width: 1024px) {
  .careers-hero { padding: 124px 32px 88px; }
  .careers-hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .values-strip { padding: 64px 32px; }
  .values-strip-grid { grid-template-columns: repeat(3, 1fr); }
  .why-work-grid { grid-template-columns: repeat(2, 1fr); }
  .apply-layout { grid-template-columns: 1fr; gap: 48px; }
  .careers-cta { padding: 104px 32px; }
}

@media (max-width: 768px) {
  .careers-hero { padding: 108px 24px 72px; }
  .values-strip { padding: 56px 24px; }
  .values-strip-grid { grid-template-columns: repeat(3, 1fr); }
  .why-work-grid { grid-template-columns: 1fr; }
  .careers-cta { padding: 88px 24px; }
  .culture-card { padding: 36px 28px; }
  .why-work-card { padding: 36px 28px; }
  .apply-card { padding: 40px 32px; }
}

@media (max-width: 480px) {
  .careers-hero { padding: 96px 18px 64px; }
  .values-strip { padding: 48px 18px; }
  .values-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .careers-cta { padding: 72px 18px; }
  .culture-card { padding: 28px 22px; }
  .why-work-card { padding: 32px 24px; }
  .apply-card { padding: 32px 24px; }
  .roles-empty { padding: 48px 24px; }
}

/* join-success.html */
@media (max-width: 1024px) {
  .success-hero { padding: 124px 32px 80px; }
  .success-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-confirmation { text-align: center; }
  .hero-next-title { margin-bottom: 28px; }
  .hero-steps::before { display: none; }
  .faq-section { padding: 72px 32px; }
}

@media (max-width: 768px) {
  .success-hero { padding: 108px 24px 72px; }
  .faq-section { padding: 64px 24px; }
}

@media (max-width: 480px) {
  .success-hero { padding: 96px 18px 56px; }
  .faq-section { padding: 56px 18px; }
  .success-hero-actions { flex-direction: column; align-items: stretch; }
  .success-hero-actions a { justify-content: center; }
}

/* join.html */
@media (max-width: 1024px) {
  .join-hero { padding: 124px 32px 80px; }
  .form-section { padding: 80px 32px 96px; }
  .form-section-inner { grid-template-columns: 1fr; gap: 48px; }
  .form-card { position: static; }
}

@media (max-width: 768px) {
  .join-hero { padding: 108px 24px 72px; }
  .join-hero-stats { gap: 32px; padding-top: 36px; margin-top: 40px; }
  .form-section { padding: 64px 24px 80px; }
  .form-card { padding: 32px 28px; }
}

@media (max-width: 480px) {
  .join-hero { padding: 96px 18px 56px; }
  .form-section { padding: 56px 18px 72px; }
  .form-card { padding: 28px 22px; }
  .join-hero-stat-num { font-size: 24px; }
}

/* schedule-a-demo.html + *-success.html (shared .demo-page / .demo-stats classes) */
@media (max-width: 1024px) {
  .demo-inner,
  .success-inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 32px 88px; }
  .demo-form-card,
  .success-card { position: static; }
}

@media (max-width: 768px) {
  .demo-inner,
  .success-inner { padding: 48px 24px 72px; gap: 40px; }
  .success-card { padding: 40px 32px; }
}

@media (max-width: 480px) {
  .demo-inner,
  .success-inner { padding: 40px 18px 64px; }
  .demo-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .demo-stat { padding: 16px 14px; }
  .demo-stat-num { font-size: 22px; }
  .success-card { padding: 32px 24px; }
}

/* ── HUBSPOT FORM (scoped to .keyops-hubspot-form wrapper) ── */
.keyops-hubspot-form,
.keyops-hubspot-form * {
  box-sizing: border-box !important;
  font-family: 'DM Sans', sans-serif !important;
}

.keyops-hubspot-form form {
  margin: 0 !important;
}

.keyops-hubspot-form fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.keyops-hubspot-form .form-columns-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.keyops-hubspot-form .hs-form-field {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}

.keyops-hubspot-form label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--text-dark) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

.keyops-hubspot-form .hs-form-required {
  color: var(--red) !important;
}

.keyops-hubspot-form input[type="text"],
.keyops-hubspot-form input[type="email"],
.keyops-hubspot-form input[type="tel"],
.keyops-hubspot-form select,
.keyops-hubspot-form textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--white) !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}

.keyops-hubspot-form input:focus,
.keyops-hubspot-form select:focus,
.keyops-hubspot-form textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(51, 118, 209, 0.12) !important;
}

.keyops-hubspot-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355636F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

.keyops-hubspot-form .legal-consent-container,
.keyops-hubspot-form .hs-richtext,
.keyops-hubspot-form .hs-dependent-field,
.keyops-hubspot-form .inputs-list.multi-container {
  margin-top: 4px !important;
}

.keyops-hubspot-form .inputs-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.keyops-hubspot-form .hs-form-booleancheckbox {
  margin: 0 0 22px !important;
}

.keyops-hubspot-form .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text-mid) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

.keyops-hubspot-form .hs-form-booleancheckbox-display p {
  margin: 0 !important;
}

.keyops-hubspot-form .hs-form-booleancheckbox-display a {
  color: var(--blue) !important;
  text-decoration: underline !important;
}

.keyops-hubspot-form input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin-top: 2px !important;
  accent-color: var(--blue) !important;
  cursor: pointer !important;
}

.keyops-hubspot-form .hs-button,
.keyops-hubspot-form input[type="submit"] {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 9px !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  border: none !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s !important;
}

.keyops-hubspot-form .hs-button:hover,
.keyops-hubspot-form input[type="submit"]:hover {
  background: var(--blue-dark) !important;
  transform: translateY(-1px) !important;
}