/* ============================================================
   MAIN -- design tokens + shared components (nav, buttons, cards,
   footer, section shell) used by every MaintenanceIQ page. Tokens and
   component rules match the live KloudData theme and its sibling
   accelerator microsites (TERRA, CodeForge), so this reads as the same
   design system rather than approximating it. Page-specific hero/section
   layouts live in home.css / how-it-works.css / vertical.css / faq.css /
   contact.css, enqueued conditionally per page template.
   ============================================================ */
:root{
  --bg-primary: #F5F8FF;
  --bg-secondary: #f5f8ff;
  --bg-tertiary: #E4EAFF;
  --bg-card: rgba(255,255,255,0.9);
  --accent-blue: #004195;
  --accent-teal: #00A888;
  --accent-purple: #6D28D9;
  --accent-blue-glow: rgba(0,65,149,0.10);
  --accent-teal-glow: rgba(0,168,136,0.10);
  --accent-purple-glow: rgba(109,40,217,0.10);
  --text-primary: #0D1B2E;
  --text-secondary: #6B7A99;
  --text-muted: #8A97B8;
  /* Heading gradient (normal headings + emphasis spans) vs. the steeper
     hero-title gradient -- both sampled from terra.klouddata.com. Big
     stat numbers (.stat .num) deliberately do NOT use these -- they're
     solid #004195 instead. */
  --grad-heading: linear-gradient(90deg, #004195 0%, #01AEF0 85.58%);
  --grad-hero: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  --border: rgba(0,40,120,0.10);
  --border-active: rgba(0,65,149,0.35);
  --shadow-card: 0 4px 24px rgba(0,40,120,0.10);
  --shadow-glow: 0 0 40px rgba(0,65,149,0.10);

  /* Button colour -- every filled/outline button on the site uses this
     pair (base / hover). */
  --btn-color: #004195;
  --btn-hover: #1B4DFF;
  --btn-glow: rgba(0,65,149,0.12);
  /* Single sitewide font -- no secondary/mono family. */
  --font-main: 'Geist', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);

  /* Footer navy -- matches the live theme's footer background. */
  --kd-navy: #0B1733;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
:target, [id]{ scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-primary);
  /* Sitewide ambient texture -- managed under Settings > Header Settings >
     Site Background Image (see inc/enqueue/styles.php); `none` when no
     image is set there, so the plain background colour above still shows. */
  background-image: var(--miq-body-bg-image, none);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: clip;
  max-width: 100%;
}
@media (max-width: 768px){
  /* iOS Safari repaints a fixed background on every scroll frame -- scroll
     with the page instead below desktop. */
  body{ background-attachment: scroll; }
}
svg{ max-width: 100%; }
img{ height: auto; max-width: 100%; display: block; }

a{ color: var(--accent-blue); text-decoration: none; cursor: pointer; }
a:hover{ text-decoration: none; }
::selection{ background: var(--accent-blue); color: #fff; }

.screen-reader-text,
.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link.screen-reader-text:focus{
  position: fixed; top: 8px; left: 8px; width: auto; height: auto;
  clip: auto; z-index: 100000; background: var(--kd-navy); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-md); font-family: var(--font-main); font-weight: 600;
}

/* Gradient text utility -- the sitewide `em` treatment. Big stat numbers
   (.stat .num below) deliberately do NOT use this -- they're solid
   #004195 instead, kept distinct from heading emphasis. */
em, .gradient-text{
  font-style: normal;
  background: var(--grad-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero titles use the steeper 96.24deg gradient instead of the normal
   90deg heading gradient -- matches terra.klouddata.com exactly. */
.home-hero-title em,
.svc-hero-title em,
.vert-hero h1 em{
  background: var(--grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- typography scale ---------- */
h1, h2, h3, h4, h5{ color: var(--text-primary); font-family: var(--font-main); font-weight: 700; margin: 0; }
h1{ font-size: 60px; line-height: 1.1; letter-spacing: -0.5px; }
h2{ font-size: 48px; line-height: 1.15; letter-spacing: -0.4px; }
h3{ font-size: 22px; line-height: 1.35; letter-spacing: -0.3px; }
h4{ font-size: 20px; line-height: 1.4; }
h5{ font-size: 16px; line-height: 1.4; }
@media (max-width: 1024px){
  h1{ font-size: 40px; line-height: 1.18; }
  h2{ font-size: 30px; line-height: 1.25; }
}
@media (max-width: 640px){
  /* h1/h2 stay at the tablet size (40px / 30px) -- no further reduction
     at mobile, matching terra.klouddata.com. Only h3 steps down. */
  h3{ font-size: 21px; line-height: 1.35; }
}

/* THE BREAK RULE -- a manual line break (an editor pressing Enter, or a
   literal "<br>", inside a heading/lede/body-copy ACF field -- see
   miq_content_html() / miq_render_heading_with_emphasis() in
   inc/helpers/template-functions.php) renders on desktop only. Below
   tablet width it collapses back to a normal wrap, so a break composed
   for a wide screen never forces an awkward line on a narrow one. */
@media (max-width: 1024px){
  h1 br, h2 br, h3 br, h4 br,
  .section-head br, .lede br, p br, li br, td br{ display: none; }
}

/* ---------- layout ---------- */
.container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px){ .container{ padding: 0 16px; } }
main section, .miq-section{ padding: 96px 24px; }
@media (max-width: 768px){ main section, .miq-section{ padding: 64px 20px; } }
main section + section{ padding-top: 0; }

/* A section that wraps its content in .container was getting a doubled
   horizontal inset -- its own left/right padding above, PLUS .container's
   own 24px/16px -- squeezing usable content width badly on phones (a
   360px viewport measured only ~272px of actual content width). .container
   is the single source of horizontal padding for these; the section
   itself only needs to contribute vertical spacing. Sections with no
   .container child (e.g. .quick-options-section, .locations-section,
   which size their own inner grids directly) are unaffected and keep
   their own side padding as before. */
main section:has(> .container){ padding-left: 0; padding-right: 0; }

.section-label{
  display: inline-block;
  font-family: var(--font-main);
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-blue); margin: 0 0 16px;
}

/* ---------- nav (floating pill) ---------- */
#mainNav{
  position: sticky; top: 16px; z-index: 1000;
  display: flex; justify-content: center;
  padding: 0 20px;
  margin-bottom: -73px;
}
.nav-inner{
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(10,17,40,.10), 0 2px 10px rgba(10,17,40,.05);
  display: flex; align-items: center; gap: 0;
}
.nav-logo{
  font-family: var(--font-main);
  color: var(--text-primary); display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
  flex-shrink: 0; text-decoration: none;
}
.nav-logo:hover{ text-decoration: none; }
.nav-logo-text{ font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.nav-logo-tagline{ font-weight: 500; font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; }
.nav-logo--img{ padding: 2px 0; }
.nav-logo-img{ height: 30px; width: auto; max-width: 200px; display: block; }
@media (max-width: 480px){ .nav-logo-img{ height: 24px; } }

.nav-links{ display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; margin-left: 20px; }
.nav-link{
  padding: 8px 14px; font-size: 15px; font-weight: 500;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover{ color: var(--text-primary); background: var(--bg-secondary); text-decoration: none; }
.nav-link.current{ color: var(--text-primary); background: var(--bg-secondary); font-weight: 600; }
@media (max-width: 860px){ .nav-links{ display: none; } }

.nav-back{
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  margin-right: 12px;
  padding: 8px 16px;
  border: 1.5px solid var(--border); border-radius: 999px;
  font-family: var(--font-main); font-size: 14px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.nav-back:hover{ border-color: var(--accent-blue); color: var(--accent-blue); text-decoration: none; }
.nav-back svg{ width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 860px){ .nav-back{ display: none; } }

.nav-cta{
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px;
  background: var(--btn-color); color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover{ background: var(--btn-hover); transform: translateY(-1px); color: #fff; text-decoration: none; }
.nav-cta-icon{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--btn-color); flex-shrink: 0;
}
.nav-cta-icon svg{ width: 15px; height: 15px; }
@media (max-width: 860px){ .nav-cta{ display: none; } }

.hamburger{
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; margin-left: auto; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
}
.hamburger span{
  display: block; width: 22px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px){ .hamburger{ display: flex; } }

@media (max-width: 480px){
  #mainNav{ padding: 0 12px; }
  .nav-inner{ padding: 10px 14px; }
  .nav-logo-text{ font-size: 16px; }
  .nav-logo-tagline{ font-size: 10px; }
  .hamburger{ padding: 6px; }
}

#mobileMenu{
  display: none; flex-direction: column; gap: 4px;
  position: fixed; top: 90px; left: 20px; right: 20px;
  max-height: calc(100vh - 110px); overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 16px; z-index: 999;
}
#mobileMenu.open{ display: flex; }
.mobile-link{
  padding: 14px 16px; font-family: var(--font-main); font-size: 16px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
  border-radius: var(--radius-md); border-bottom: 1px solid var(--border);
}
.mobile-link:last-of-type{ border-bottom: none; }
.mobile-link:hover{ background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; }
.mobile-link.current{ color: var(--text-primary); font-weight: 700; }
.mobile-back{
  margin-top: 12px; padding: 14px; text-align: center; display: block;
  background: transparent; color: var(--text-secondary);
  border: 1.5px solid var(--border); border-radius: 999px;
  font-family: var(--font-main); font-size: 16px; font-weight: 600;
  text-decoration: none !important; transition: border-color var(--transition), color var(--transition);
}
.mobile-back:hover{ border-color: var(--accent-blue); color: var(--accent-blue); }
.mobile-cta{
  margin-top: 12px; padding: 14px; text-align: center;
  background: var(--btn-color); color: #fff;
  border-radius: 999px; font-family: var(--font-main); font-size: 16px; font-weight: 600;
  text-decoration: none !important; transition: background var(--transition);
}
.mobile-cta:hover{ background: var(--btn-hover); color: #fff; }

/* ---------- nav dropdown (Verticals) ---------- */
.nav-dropdown{ position: relative; display: flex; align-items: center; z-index: 10; }
.nav-dropdown > .nav-link{ display: inline-flex; align-items: center; gap: 4px; }
.nav-caret{ width: 12px; height: 12px; transition: transform var(--transition); }
.nav-dropdown.is-open .nav-caret{ transform: rotate(180deg); }
.nav-dropdown-panel{
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  z-index: 10; min-width: 248px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}
.nav-dropdown.is-open .nav-dropdown-panel{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-dropdown-panel a{
  padding: 10px 12px; font-size: 16px; font-weight: 500; color: var(--text-secondary);
  border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-dropdown-panel a:hover{ background: var(--bg-secondary); color: var(--text-primary); }
@media (max-width: 860px){ .nav-dropdown{ display: none; } }

.mobile-submenu{ border-bottom: 1px solid var(--border); }
.mobile-submenu:last-of-type{ border-bottom: none; }
.mobile-submenu-toggle{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none;
  font-family: inherit; cursor: pointer; text-align: left;
}
.mobile-submenu-toggle .nav-caret{ width: 14px; height: 14px; flex-shrink: 0; }
.mobile-submenu-toggle[aria-expanded="true"] .nav-caret{ transform: rotate(180deg); }
.mobile-submenu-panel{ display: flex; flex-direction: column; gap: 2px; padding-left: 12px; padding-bottom: 6px; }
.mobile-submenu-panel[hidden]{ display: none; }
.mobile-sublink{ font-size: 15px; color: var(--text-muted); border-bottom: none; padding: 10px 16px; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  font-family: var(--font-main); font-size: 16px; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none !important;
  transition: all var(--transition);
}
.btn-primary{ background: var(--btn-color); color: #fff; }
.btn-primary:hover{ background: var(--btn-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--btn-glow); color: #fff; }
.btn-outline{ background: transparent; color: var(--btn-color); border: 1.5px solid var(--border); }
.btn-outline:hover{ border-color: var(--btn-hover); color: var(--btn-hover); background: var(--btn-glow); }
.btn-sm{ padding: 11px 18px; font-size: 15px; }

/* Primary button with a trailing circular icon badge -- same visual
   language as .nav-cta / .cta-band-btn, sized up as a page's main hero
   CTA. Used instead of a plain text button with a typed arrow character. */
.btn-primary-icon{
  padding: 14px 8px 14px 28px; gap: 14px;
}
.btn-primary-icon .btn-icon{
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--btn-color); flex-shrink: 0;
  transition: transform var(--transition);
}
.btn-primary-icon .btn-icon svg{ width: 16px; height: 16px; }
.btn-primary-icon:hover .btn-icon{ transform: translateX(2px); }

.btn:focus-visible,
.nav-logo:focus-visible,
.faq-q:focus-visible{
  outline: 2px solid var(--btn-color);
  outline-offset: 2px;
}

.reveal{ opacity: 1; transform: none; }

/* ---------- section shell ---------- */
.section-head{ margin-bottom: 40px; }
.section-head.center{ margin-inline: auto; text-align: center; max-width: 1280px; }
.section-head.center .kicker{ display: flex; justify-content: center; }
.section-head.center p{ margin-inline: auto; }
.kicker{
  font-family: var(--font-main); font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); margin: 0 0 16px;
}
.section-head h2{ margin: 0 0 14px; }
.section-head p{ font-size: 18px; line-height: 1.7; color: var(--text-secondary); }
@media (max-width: 640px){ .section-head p{ font-size: 16px; } }

.section-band{
  background: rgba(3, 27, 66, 0.03);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
main section.section-band,
main section.section-tight,
main section#capabilities{ padding-top: 96px; }
main section.section-tight{ padding-top: 80px; }
main section.cta-section,
main section#compare{ padding-top: 72px; }
@media (max-width: 768px){
  main section.section-band,
  main section#capabilities{ padding-top: 64px; }
  main section.section-tight{ padding-top: 56px; }
  main section.cta-section,
  main section#compare{ padding-top: 52px; }
}

/* Proof Point band: its own tighter top AND bottom padding (the base
   .section-band rule above only restores top) -- it sits between two
   other sections (Use Cases above, Comparison Table below) that also
   contribute their own spacing, so a full 96px on both edges compounded
   into an oversized gap on either side of it. */
main section.proof-band{ padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 768px){ main section.proof-band{ padding-top: 44px; padding-bottom: 44px; } }

/* ---------- eyebrow / hero action row / badges ---------- */
.eyebrow{
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px;
  font-family: var(--font-main); font-size: 14px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--accent-blue);
}
.eyebrow a{ color: var(--accent-blue); font-weight: 600; }
@media (max-width: 640px){ .eyebrow{ font-size: 13px; letter-spacing: 0.8px; } }

.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 520px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}
.hero-badges{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.badge{
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-main); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border);
}

/* ---------- cards ---------- */
.card-grid{ max-width: 1280px; margin-inline: auto; display: grid; gap: 24px; }
.card-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .card-grid.cols-3, .card-grid.cols-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4{ grid-template-columns: 1fr; } }

.feature-card{
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,40,120,0.15); border-color: var(--border-active); }
.feature-card-icon{
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-blue-glow);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.feature-card-icon svg{ width: 24px; height: 24px; stroke: var(--accent-blue); fill: none; }
.feature-card h3{ margin: 0 0 10px; color: var(--text-primary); font-size: 22px; line-height: 1.35; }
.feature-card p{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

.check-card{
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
.check-card-icon{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-teal-glow);
  display: flex; align-items: center; justify-content: center;
}
.check-card-icon svg{ width: 24px; height: 24px; stroke: var(--accent-teal); fill: none; }
.check-card p{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- uploaded icon images (ACF) ---------- */
.miq-icon-img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.feature-card-icon .miq-icon-img,
.check-card-icon .miq-icon-img{ width: 24px; height: 24px; }
.footer-brand-img{ height: 26px; width: auto; max-width: 200px; display: block; margin-bottom: 14px; }

/* ---------- stat strip ---------- */
.stat-strip{ padding: 40px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-card); }
main section.stat-strip{ padding: 40px 24px; }
.stat-grid{ max-width: 1280px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-grid.stat-grid-3{ grid-template-columns: repeat(3, 1fr); max-width: 900px; }
@media (max-width: 900px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 640px){ .stat-grid.stat-grid-3{ grid-template-columns: repeat(3, 1fr); gap: 20px 12px; } }
@media (max-width: 460px){ .stat-grid{ grid-template-columns: 1fr; } .stat-grid.stat-grid-3{ grid-template-columns: 1fr; } }
.stat{ text-align: center; }
.stat .num{
  font-family: var(--font-main); font-size: 34px; font-weight: 700; letter-spacing: -1px;
  line-height: 1.1; color: #004195;
}
.stat .label{ margin-top: 8px; font-size: 16px; color: var(--text-secondary); line-height: 1.6; }

/* ---------- problem / solution split ---------- */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1280px; margin-inline: auto; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }
.panel{
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 36px);
}
.panel > h3{ margin: 0 0 16px; color: var(--text-primary); }
/* Problem/solution panel headings are one uniform colour, start to
   finish -- the emphasis half doesn't get its own colour (accent blue
   or gradient) here, it just inherits the same dark heading colour as
   the rest of the line. */
.panel > h3 em{
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.panel ul{ margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
.panel ul li{ margin-bottom: 10px; }
.panel ul li:last-child{ margin-bottom: 0; }

/* ---------- comparison table ---------- */
.compare-wrap{ overflow-x: auto; padding: 0; }
.compare-table{ width: 100%; border-collapse: collapse; font-size: 16px; min-width: 640px; }
.compare-table th,
.compare-table td{ text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6; }
.compare-table thead th{
  font-family: var(--font-main); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #6B7A99;
  background: var(--bg-secondary);
}
.compare-table thead th:last-child{ color: var(--btn-color); }
.compare-table tbody td:first-child{ font-weight: 600; color: var(--text-primary); width: 26%; }
.compare-table td.legacy{ color: #6B7A99; }
.compare-table td.miq{ color: var(--text-primary); font-weight: 500; background: var(--accent-blue-glow); }
.compare-table tbody tr:last-child td{ border-bottom: none; }

/* ---------- pill row ---------- */
.pill-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill{
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--font-main); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--btn-color);
  background: var(--accent-blue-glow); border: 1px solid var(--border-active);
}

/* ============================================================
   CTA BAND -- dark rounded card. THE CTA BACKGROUND FIELD: every
   cta-band template part accepts a per-page "Background Image" ACF
   field, rendered as the --kd-cta-bg-image custom property via
   miq_cta_bg_style() (inc/helpers/template-functions.php); it falls
   back to the sitewide default set on Settings > Footer Settings > CTA
   Band, and finally to the flat navy gradient below if neither is set.
   ============================================================ */
.cta-band{
  position: relative; overflow: hidden;
  max-width: 1280px; margin-inline: auto;
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  background: var(--kd-cta-bg-image, linear-gradient(135deg, #0B1733 0%, #01122B 100%)) center / cover no-repeat;
  background-color: var(--kd-navy);
}
.cta-band h1, .cta-band h2, .cta-band h3{ color: #fff; -webkit-text-fill-color: #fff; background: none; margin: 0 auto 20px; max-width: 720px; }
.cta-band h2 em{ color: #7fdcff; -webkit-text-fill-color: #7fdcff; background: none; }
.cta-band p{ color: rgba(255,255,255,0.75); line-height: 1.7; max-width: 620px; margin: 0 auto 32px; font-size: 18px; }
.cta-band-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: #fff; color: #101C46;
  border-radius: 999px; font-family: var(--font-main); font-size: 17px; font-weight: 600;
  text-decoration: none !important;
  transition: opacity var(--transition);
}
.cta-band-btn:hover{ opacity: 0.9; color: #101C46; }
.cta-band-btn-icon{
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #101C46; color: #fff; flex-shrink: 0;
}
.cta-band-btn-icon svg{ width: 12px; height: 12px; }
@media (max-width: 1024px){ .cta-band{ padding: 56px 40px; } }
@media (max-width: 640px){ .cta-band{ padding: 40px 24px; border-radius: 24px; } }

/* ---------- footer ---------- */
footer.site-footer{
  background: var(--kd-navy); color: rgba(255,255,255,0.72);
  padding: 56px 24px 0;
}
.footer-inner{ max-width: 1280px; margin: 0 auto; }
.footer-grid{ display: flex; justify-content: space-between; gap: 40px; flex-wrap: nowrap; align-items: flex-start; }
.footer-brand{ flex: 0 0 340px; }
.footer-brand-title{
  font-family: var(--font-main); color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
  text-decoration: none; margin-bottom: 14px;
}
.footer-brand-title:hover{ text-decoration: none; }
.footer-brand-text{ font-size: 22px; font-weight: 700; }
.footer-brand-tagline{ font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.55); letter-spacing: 0.03em; margin-top: 2px; }
.footer-brand-sub{ font-size: 16px; color: rgba(255,255,255,0.72); line-height: 24px; margin: 0; max-width: 420px; }
.footer-links{ display: flex; flex-wrap: wrap; gap: 8px 20px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.footer-links a{ font-size: 16px; color: rgba(255,255,255,0.72); text-decoration: none; transition: color var(--transition); }
.footer-links a:hover{ color: #fff; }
.footer-bottom{
  margin-top: 40px; padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
  font-size: 15px; color: #ffffffb8; text-align: center;
}
@media (max-width: 760px){
  .footer-grid{ flex-wrap: wrap; }
  .footer-brand{ flex-basis: 100%; }
  .footer-links{ justify-content: flex-start; }
}

/* ---------- back to top ---------- */
.kd-back-to-top{
  position: fixed; bottom: 28px; right: 28px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--btn-color); color: #fff; border: none;
  box-shadow: 0 8px 24px rgba(0,40,120,0.28);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2000;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, visibility 0s linear .25s;
}
.kd-back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s ease, transform .25s ease, background .2s ease; }
.kd-back-to-top:hover{ background: transparent; border: 2px solid var(--btn-hover); color: var(--btn-hover); }
.kd-back-to-top:focus-visible{ outline: 2px solid var(--btn-color); outline-offset: 2px; }
@media (max-width: 640px){ .kd-back-to-top{ bottom: 20px; right: 20px; width: 44px; height: 44px; } }