*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #0B1220; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #2563EB; text-decoration: none; }
a:hover { color: #1D4ED8; }
img, video, svg { max-width: 100%; height: auto; }
svg[width] { width: 100%; max-width: 560px; }
input, textarea, select, button { font: inherit; max-width: 100%; }
input[type="text"], input[type="email"], textarea { width: 100%; }
table { max-width: 100%; }
@keyframes pd-dash { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes pd-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes pd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pd-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pd-tick { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
[data-reveal] { animation: pd-reveal .8s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
@supports not (animation-timeline: view()) { [data-reveal] { animation: none; opacity: 1; transform: none; } }
[data-draw] { animation: pd-dash 1.1s cubic-bezier(.4,0,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
@supports not (animation-timeline: view()) { [data-draw] { animation: none; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Fallback reveals when animation-timeline is unsupported and inline opacity:0 was used */
html.pd-no-view-timeline [data-reveal].pd-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Shared header / mobile nav ---------- */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #DBE5FA;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
  z-index: 60;
}
.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #0B1220;
  transition: transform .2s ease, opacity .2s ease;
}
.site-header.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.site-cta--mobile { display: none !important; }

/* Brand mark when logo image is missing */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0B1220 !important;
  flex: 0 0 auto;
  padding: 12px 0;
}
.site-brand img {
  height: 30px;
  width: auto;
  display: block;
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, .42);
  z-index: 40;
}
body.nav-open { overflow: hidden; }
body.nav-open .nav-backdrop { display: block; }

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .site-header__inner {
    gap: 14px !important;
  }
  .site-nav {
    gap: 14px !important;
    font-size: 13px !important;
  }
  /* Soften sticky side columns that fight short viewports */
  [style*="position:sticky;top:100px"],
  [style*="position:sticky;top:100px "] {
    position: static !important;
    top: auto !important;
  }
}

/* ---------- Mobile + large phone / small tablet (≤900px) ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-header__inner {
    flex-wrap: nowrap !important;
    min-height: 60px !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }

  .site-nav {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 12px 16px 20px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E8EDF7 !important;
    box-shadow: 0 18px 40px rgba(11, 18, 32, .12);
    z-index: 55;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-header.is-open .site-nav {
    display: flex !important;
  }

  .site-nav > a {
    color: #0B1220 !important;
    padding: 14px 4px !important;
    border-bottom: 1px solid #EEF2F8;
    font: 600 15px/1.2 Inter, sans-serif !important;
  }

  .site-nav > a:last-child { border-bottom: none; }

  .site-cta:not(.site-cta--mobile) { display: none !important; }

  .site-cta--mobile {
    display: block !important;
    margin-top: 12px !important;
    text-align: center !important;
    background: #2563EB !important;
    color: #FFFFFF !important;
    font: 600 15px/1 Inter, sans-serif !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border-bottom: none !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
  }

  /* Force single-column where auto-fit minmax would overflow phones */
  [style*="grid-template-columns:repeat(auto-fit,minmax"] {
    grid-template-columns: 1fr !important;
  }

  /* Keep compact metric / logo strips as 2–3 cols when tiny minmax */
  [style*="minmax(120px"],
  [style*="minmax(150px"],
  [style*="minmax(180px"],
  [style*="minmax(190px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  section[style*="padding:clamp"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer[style*="padding:clamp"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Prevent long unbreakable content from blowing layout */
  h1, h2, h3, p {
    overflow-wrap: anywhere;
  }

  /* CTA rows: full-width buttons */
  a[data-magnetic],
  a[style*="padding:15px 26px"],
  a[style*="padding:15px 24px"] {
    text-align: center;
  }
}

/* ---------- Phones (≤640px) ---------- */
@media (max-width: 640px) {
  [style*="minmax(120px"],
  [style*="minmax(150px"] {
    grid-template-columns: 1fr !important;
  }

  [style*="minmax(180px"],
  [style*="minmax(190px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Hero eyebrow pills can wrap awkwardly */
  [style*="border-radius:999px"][style*="letter-spacing"] {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    height: auto;
  }

  /* Marquee / logo strips */
  [style*="animation:pd-marquee"] {
    animation-duration: 28s !important;
  }

  /* Form card spacing */
  form[data-contact-form] {
    gap: 14px !important;
  }

  /* Pricing comparison tables */
  [style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
    margin-left: -4px;
    margin-right: -4px;
    padding-bottom: 4px;
  }

  table {
    font-size: 13px;
  }
}

/* ---------- Very small phones (≤380px) ---------- */
@media (max-width: 380px) {
  .site-header__inner {
    padding: 0 12px !important;
  }

  section[style*="padding:clamp"],
  footer[style*="padding:clamp"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  [style*="minmax(180px"],
  [style*="minmax(190px"] {
    grid-template-columns: 1fr !important;
  }
}