/* =============================================================
   Veloscint customizer CSS — extracted from production
   (formerly lived in WP Customizer Additional CSS, lost on
   theme switch; baked into the theme so it is version-controlled)
   ============================================================= */
/* Veloscint typography override: ensure headings use Inter, matching the original design */
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Veloscint layout: remove the default block-theme top spacing so the site header sits flush */
.wp-site-blocks,
.wp-block-post-content.is-layout-flow {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.wp-block-post-content.is-layout-flow > header.site:first-child,
.wp-block-post-content.is-layout-flow > *:first-child {
  margin-top: 0 !important;
}
header.site {
  margin-top: 0 !important;
}

/* Veloscint vertical-rhythm compression: tighten section padding ~28% for a more efficient page feel */
.wp-block-post-content.is-layout-flow > section,
.wp-block-post-content.is-layout-flow > .hero,
.wp-block-post-content.is-layout-flow > .section,
.wp-block-post-content.is-layout-flow > footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero {
  padding-top: 52px !important;
  padding-bottom: 46px !important;
}
section,
.section,
.pillars-section,
.mission,
.products,
.use-cases,
.faq,
.contact,
.cta-band,
.testimonials,
.features,
.modules,
.benefits {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}
.section-head {
  margin-bottom: 34px !important;
}
.hero p,
.hero .lead,
.hero-sub {
  margin-bottom: 20px !important;
}

/* Mobile: same 28% reduction proportionally */
@media (max-width: 860px) {
  .hero {
    padding-top: 36px !important;
    padding-bottom: 32px !important;
  }
  section,
  .section,
  .pillars-section,
  .mission,
  .products,
  .use-cases,
  .faq,
  .contact,
  .cta-band,
  .testimonials,
  .features,
  .modules,
  .benefits {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .section-head {
    margin-bottom: 24px !important;
  }
}

/* Veloscint mobile: stack the SAP/Custom Modules cards vertically on small screens for readability */
@media (max-width: 860px) {
  .module-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Veloscint mobile header polish: bump logo size and surface the Demo CTA next to the hamburger */
@media (max-width: 860px) {
  header.site .brand {
    flex-shrink: 0 !important;
  }
  header.site .brand img {
    height: 38px !important;
    width: auto !important;
    max-width: none !important;
  }
  header.site .nav-links {
    display: contents !important;
  }
  header.site .nav-links > *:not(.nav-cta) {
    display: none !important;
  }
  header.site .nav-links .nav-cta {
    display: inline-flex !important;
    align-items: center;
    padding: 8px 14px;
    margin-left: auto !important;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background: #0F1B3D;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }
  header.site .nav-links .nav-cta:hover,
  header.site .nav-links .nav-cta:focus {
    background: #1a2a5a;
    color: #fff;
  }
  /* Mobile slide-down menu when hamburger is toggled */
  header.site .nav-links.open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #fff !important;
    padding: 16px 24px !important;
    gap: 14px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 6px 24px rgba(15,27,61,0.10) !important;
    z-index: 100;
  }
  header.site .nav-links.open > * {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }
  header.site .nav-links.open > a {
    color: #0F1B3D;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 0;
  }
  header.site .nav-links.open .nav-cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start;
  }
  header.site .nav-links.open .nav-dropdown {
    flex-direction: column;
  }
  header.site .nav-links.open .nav-dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 8px 0 0 12px !important;
    margin: 0 !important;
  }

  @media (max-width: 380px) {
    header.site .nav-links .nav-cta {
      font-size: 13px;
      padding: 7px 11px;
    }
  }
}


/* Veloscint WPForms styling: match brand (navy primary button, Inter typography) */
.wpforms-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.wpforms-container .wpforms-field-label,
.wpforms-container label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600 !important;
  color: #0F1B3D !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea {
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container textarea:focus {
  border-color: #0F1B3D !important;
  box-shadow: 0 0 0 3px rgba(15, 27, 61, 0.08) !important;
  outline: none !important;
}
.wpforms-container .wpforms-submit-container button[type="submit"],
.wpforms-container button.wpforms-submit,
.wpforms-container input[type="submit"] {
  background: #0F1B3D !important;
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.wpforms-container .wpforms-submit-container button[type="submit"]:hover,
.wpforms-container button.wpforms-submit:hover,
.wpforms-container input[type="submit"]:hover {
  background: #1a2a5a !important;
  transform: translateY(-1px) !important;
}
.wpforms-container .wpforms-required-label {
  color: #DC2626 !important;
}
.wpforms-container .wpforms-field-sublabel {
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.wpforms-confirmation-container-full {
  background: #F0FDF4 !important;
  border: 1px solid #86EFAC !important;
  color: #166534 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  font-family: 'Inter', sans-serif !important;
}

    :root {
      --navy:        #0F1031;
      --navy-2:      #1A1D44;
      --navy-3:      #2A2E5C;
      --blue:        #6699CC;
      --blue-bright: #85B0D9;
      --blue-soft:   #EAF1F8;
      --ink:         #333333;
      --muted:       #6B6F7A;
      --line:        #D6D8DE;
      --bg:          #FFFFFF;
      --bg-alt:      #F7F7F8;
      --bg-dark:     #0F1031;
      --accent:      #6699CC;
      --radius:      14px;
      --radius-sm:   10px;
      --shadow-sm:   0 1px 2px rgba(15,16,49,.06), 0 2px 6px rgba(15,16,49,.05);
      --shadow-md:   0 4px 12px rgba(15,16,49,.08), 0 16px 32px rgba(15,16,49,.08);
      --shadow-lg:   0 10px 30px rgba(15,16,49,.10), 0 30px 60px rgba(15,16,49,.12);
      --maxw:        1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: var(--blue); text-decoration: none; }
    a:hover { color: var(--navy); }
    img { max-width: 100%; display: block; }

    .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    /* ------------ Header ------------ */
    header.site {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.92);
      backdrop-filter: saturate(160%) blur(10px);
      -webkit-backdrop-filter: saturate(160%) blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
    .brand { display: flex; align-items: center; gap: 10px; }
    .brand img { height: 28px; width: auto; }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links > a {
      color: var(--ink); font-weight: 500; font-size: 14.5px;
    }
    .nav-links > a:hover { color: var(--blue); }
    .nav-cta {
      background: var(--navy);
      color: #fff !important;
      padding: 9px 16px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      transition: background .15s ease, transform .15s ease;
    }
    .nav-cta:hover { background: var(--navy-3); transform: translateY(-1px); }
    .mobile-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }

    /* Products dropdown */
    .nav-dropdown { position: relative; }
    .nav-dropdown-trigger {
      background: none; border: 0; cursor: pointer;
      color: var(--ink); font-weight: 500; font-size: 14.5px;
      font-family: inherit;
      padding: 0; display: inline-flex; align-items: center; gap: 4px;
    }
    .nav-dropdown-trigger:hover { color: var(--blue); }
    .nav-dropdown-trigger svg { transition: transform .15s ease; }
    .nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%; left: -14px;
      margin-top: 10px;
      min-width: 280px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .15s ease, transform .15s ease, visibility .15s;
      z-index: 101;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu,
    .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    .nav-dropdown-menu a {
      display: block;
      padding: 10px 14px;
      border-radius: 8px;
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 500;
      transition: background .12s ease, color .12s ease;
    }
    .nav-dropdown-menu a:hover {
      background: var(--blue-soft);
      color: var(--navy);
    }
    .nav-dropdown-title { display: block; font-weight: 600; color: var(--navy); }
    .nav-dropdown-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }

    /* ------------ Hero ------------ */
    .hero {
      position: relative;
      padding: 96px 0 88px;
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 80% -10%, rgba(102,153,204,.22), transparent 60%),
        radial-gradient(800px 400px at -5% 20%, rgba(15,16,49,.06), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 100%);
    }
    .hero-inner { max-width: 880px; margin: 0 auto; text-align: center; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 1px solid var(--line);
      color: var(--navy-3);
      padding: 6px 12px; border-radius: 999px;
      font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
      box-shadow: var(--shadow-sm);
    }
    .eyebrow .dot {
      width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(102,153,204,.22);
    }
    h1 {
      font-size: clamp(36px, 4.8vw, 56px);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 20px 0 20px;
      color: var(--navy);
    }
    h1 .grad {
      color: var(--blue-bright);
    }
    .lede {
      font-size: 18px;
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto 28px;
    }
    .cta-row {
      display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 22px; border-radius: 999px;
      font-weight: 600; font-size: 15px; border: 1px solid transparent;
      cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    }
    .btn-primary { background: var(--navy); color: #fff; }
    .btn-primary:hover { background: var(--navy-3); color: #fff; transform: translateY(-1px); }
    .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

    /* ------------ Section base ------------ */
    section { padding: 88px 0; }
    .section-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 48px;
    }
    .section-head .eyebrow { margin-bottom: 14px; }
    h2 {
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 14px;
      color: var(--navy);
    }
    h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
    .section-head p { color: var(--muted); font-size: 17px; margin: 0; }

    /* ------------ Pillars section (Microsoft + ERP) ------------ */
    .pillars-section { background: var(--bg-alt); }
    .pillar-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .pillar-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 32px;
      box-shadow: var(--shadow-sm);
    }
    .pillar-card .ico {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--blue), var(--blue-bright));
      color: #fff;
      display: grid; place-items: center;
      margin-bottom: 16px;
    }
    .pillar-card h3 { font-size: 22px; margin-bottom: 10px; }
    .pillar-card > p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
    .pillar-card ul {
      list-style: none; padding: 0; margin: 0;
      display: grid; gap: 10px;
    }
    .pillar-card ul li {
      display: flex; gap: 10px; align-items: flex-start;
      color: var(--ink);
      font-size: 14.5px;
    }
    .pillar-card ul li::before {
      content: "";
      flex: 0 0 6px; height: 6px; border-radius: 50%;
      background: var(--blue);
      margin-top: 9px;
    }

    /* ------------ Mission ------------ */
    .mission .mission-wrap {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }
    .mission p {
      color: var(--muted);
      font-size: 18px;
      margin: 0 0 16px;
      line-height: 1.6;
    }

    /* ------------ Products ------------ */
    .products { background: var(--bg-alt); }
    .product-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 36px;
      max-width: 720px;
      margin: 0 auto;
      box-shadow: var(--shadow-sm);
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 24px;
      align-items: start;
    }
    .product-logo {
      width: 72px; height: 72px;
      border-radius: 16px;
      background: var(--navy);
      overflow: hidden;
      display: grid; place-items: center;
    }
    .product-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
    .product-tag {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--blue-soft);
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 10px;
    }
    .product-card h3 { font-size: 22px; margin-bottom: 10px; }
    .product-card p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
    .product-card .btn { padding: 10px 18px; font-size: 14px; }
    .products-aside {
      text-align: center;
      color: var(--muted);
      font-size: 15px;
      margin-top: 28px;
      font-style: italic;
    }

    /* ------------ CTA ------------ */
    .cta {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 70%, var(--blue) 100%);
      color: #fff;
      border-radius: 24px;
      padding: 56px 48px;
      margin: 0 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-wrap { padding: 40px 0 80px; max-width: var(--maxw); margin: 0 auto; }
    .cta h2 { color: #fff; margin-bottom: 10px; }
    .cta p { color: #C7D2E6; max-width: 600px; margin: 0 auto 28px; font-size: 17px; }
    .cta .btn-primary { background: #fff; color: var(--navy); }
    .cta .btn-primary:hover { background: var(--blue-soft); color: var(--navy); }
    .cta .btn-ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
    .cta .btn-ghost:hover { border-color: #fff; color: #fff; }

    /* ------------ Footer ------------ */
    footer.site {
      background: #080924;
      color: #9AA6BE;
      padding: 48px 0 28px;
    }
    .foot {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 36px;
    }
    .foot .brand img { height: 26px; opacity: .95; }
    .foot h5 {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #E8EEF8;
      margin: 0 0 14px;
    }
    .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .foot a { color: #9AA6BE; font-size: 14px; }
    .foot a:hover { color: #fff; }
    .foot p { margin: 10px 0 0; font-size: 14px; color: #9AA6BE; max-width: 340px; }
    .foot-bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,.08);
      font-size: 13px;
      color: #6B778F;
    }
    /* Footer-bottom paragraphs were converted from <div>+wp:html to
       wp:paragraph so they don't show as raw source in the editor.
       Override .foot p (intended for the brand-column tagline) so the
       new bottom paragraphs have no margin, no 340px max-width clip,
       and the small foot-bottom font-size/color. */
    .foot-bottom p { margin: 0; max-width: none; font-size: 13px; color: #6B778F; }
    /* Footer brand block now wraps the logo in a wp:image (figure). Zero
       the figure's default margin so the layout matches the previous bare-img. */
    .foot .brand .wp-block-image { margin: 0; }

    /* ------------ Reveal animation ------------ */
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    /* ------------ Responsive ------------ */
    @media (max-width: 980px) {
      .pillar-grid { grid-template-columns: 1fr; }
      .foot { grid-template-columns: 1fr 1fr; }
      .nav-links { display: none; }
      .mobile-toggle { display: inline-flex; }
      .nav-links.open {
        display: flex;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        padding: 16px 24px;
        gap: 14px;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        align-items: flex-start;
      }
      .nav-dropdown-menu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; padding: 8px 0 0 0;
        margin: 0;
      }
      .cta { padding: 40px 24px; }
      section { padding: 64px 0; }
      .hero { padding: 72px 0 64px; }
      .product-card { grid-template-columns: 64px 1fr; padding: 28px; }
      .product-logo { width: 64px; height: 64px; }
    }

    @media (max-width: 620px) {
      .foot { grid-template-columns: 1fr; }
      .foot-bottom { flex-direction: column; gap: 8px; }
      .product-card { grid-template-columns: 1fr; text-align: left; }
    }

/* =============================================================
   Visual fidelity fixes (matches production veloscint.com pixel-for-pixel
   where staging was drifting due to T24 / theme.json defaults overriding
   our brand classes).
   ============================================================= */

/* (1) Header — T24 wraps our <header class="site"> in an outer
   <header class="wp-block-template-part"> with extra margin/padding
   from block layout. Zero it out so the visible header is just the
   one inside the template part. */
.wp-site-blocks,
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
/* T24 sometimes inlines body root padding via CSS vars; force them to 0
   so the only horizontal indent comes from .container's 24px padding. */
:where(body) {
  --wp--style--root--padding-top: 0 !important;
  --wp--style--root--padding-right: 0 !important;
  --wp--style--root--padding-bottom: 0 !important;
  --wp--style--root--padding-left: 0 !important;
}
header.wp-block-group.site,
footer.wp-block-group.site {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-block: 0 !important;
}

/* Explicit container.nav layout — WP's `.is-layout-constrained > :where(...)`
   selector sets margin-left:auto !important on the container, which mostly
   does what we want, but we also need to pin max-width / padding / flex
   so the logo lines up correctly at every viewport. */
header.wp-block-group.site .wp-block-group.container.nav,
header.wp-block-group.site > .container.nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: var(--maxw, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 16px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* That same `.is-layout-constrained > :where(...)` rule ALSO applies
   `margin-left:auto !important; margin-right:auto !important` to every
   direct child of .container.nav (because .container.nav itself carries
   `is-layout-constrained`). In a flex container, auto margins on the
   children absorb the free space — so `justify-content: space-between`
   stops working and the logo ends up inset from the left edge instead of
   flush with the page's content margin. Zero the margins on direct
   children so flex layout takes over. */
header.wp-block-group.site .container.nav > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
header.wp-block-group.site .brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
header.wp-block-group.site .brand img {
  height: 28px !important;
  width: auto !important;
  max-width: none !important;
}

/* (2,3) Buttons — T24's theme.json injects
   :root :where(.wp-element-button, .wp-block-button__link) {
     padding-top: 0.6rem; padding-right: 1rem; padding-bottom: 0.6rem;
     padding-left: 1rem; background-color: var(--wp--preset--color--contrast);
     color: var(--wp--preset--color--base); border-radius: .33rem; ...
   }
   which gives our buttons extra padding and the wrong colors. Force
   our values with !important so the CSS bridge below wins. */
.wp-block-button.btn .wp-block-button__link,
.wp-block-button.module-link .wp-block-button__link,
.wp-block-button.nav-cta .wp-block-button__link {
  padding: 13px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
}
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--navy) !important;
  color: #fff !important;
}
.wp-block-button.btn-ghost .wp-block-button__link {
  background: #fff !important;
  color: var(--navy) !important;
  border: 1px solid var(--line) !important;
}
.wp-block-button.nav-cta .wp-block-button__link {
  background: var(--navy) !important;
  color: #fff !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
}
.product-card .wp-block-button.btn .wp-block-button__link {
  padding: 10px 18px !important;
  font-size: 14px !important;
}
/* CTA-section (dark gradient) inverted button colors */
.cta-wrap .wp-block-button.btn-primary .wp-block-button__link {
  background: #fff !important;
  color: var(--navy) !important;
}
.cta-wrap .wp-block-button.btn-ghost .wp-block-button__link {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* The CTA Section custom block now wraps `.cta-wrap` in an outer
   `.invitation-section` (renamed so Safari Reader Mode doesn't blacklist
   the outer element by class-name pattern). The outer section should
   be a transparent full-width container — all the visual gradient /
   padding belongs to the `.cta-wrap` inner div. */
.wp-block-veloscint-cta-section,
.invitation-section {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* (4) Eyebrow pill — was rendered as <span> on production; we render
   it as <p> for editor friendliness. <p> picks up WP's default 1.05rem
   font-size; force back to the original 13px small label sizing. */
.eyebrow {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* (5) Card grids — production CSS uses `.pillar-grid { display: grid;
   grid-template-columns: 1fr 1fr; gap: 28px }` but WP's wp:group with
   is-layout-constrained / is-layout-flow on the wrapper overrides
   display, collapsing the grid into stacked rows with no gap. Force
   the grid layout back. Same for cards-grid and the product list. */
.wp-block-group.pillar-grid,
.wp-block-group.cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 28px !important;
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
}
.wp-block-group.pillar-grid > *,
.wp-block-group.cards-grid > * {
  margin-block: 0 !important;
}
@media (max-width: 980px) {
  .wp-block-group.pillar-grid,
  .wp-block-group.cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Vertical gap between Product cards on the home page (the second card
   on production has style="margin-top:20px"). Apply via sibling combinator. */
.wp-block-group.products .wp-block-veloscint-product-card + .wp-block-veloscint-product-card {
  margin-top: 20px !important;
}

/* (6) Footer trademark notice — inline style="font-size:11.5px;
   line-height:1.6;color:var(--muted);" got dropped during the dynamic-
   block migration. Restore as a class rule. */
.tm-notice {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

/* =============================================================
   Editor: make wp:html blocks holding only an inline SVG (decorative
   icons like .ico / .product-logo) render compact rather than as a
   sprawling code preview that pushes content around.
   ============================================================= */
.editor-styles-wrapper .wp-block-html,
.is-root-container .wp-block-html {
  font-size: 11px;
  line-height: 1.3;
}
.editor-styles-wrapper .wp-block-html textarea,
.is-root-container .wp-block-html textarea {
  min-height: 60px;
  max-height: 120px;
}

/* =============================================================
   Editor visibility for .reveal elements

   Every section below the hero uses class="reveal" — the front-end keeps
   them at opacity:0 and an IntersectionObserver in theme/assets/nav.js
   adds the .in class on scroll for a fade-in. The block editor iframe
   doesn't load nav.js, so without this override every reveal section
   stays invisible in the editor and the page looks blank below the hero.
   ============================================================= */
.editor-styles-wrapper .reveal,
.is-root-container .reveal,
.block-editor-iframe__body .reveal,
.editor-styles-wrapper .reveal:not(.in),
.is-root-container .reveal:not(.in) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* =============================================================
   wp:button wrapper -> .btn pill mapping
   The page CSS targets `.btn { ... }` directly on anchors. With the WP block
   editor, our button anchors are wrapped: `<div class="wp-block-button btn ...">
     <a class="wp-block-button__link wp-element-button"></a></div>` — the brand
   class is on the wrapper div, not on the link. These rules forward the styling
   to the inner link so visuals match production without breaking block validation.
   ============================================================= */
/* The wp:button block puts the user's brand classes on the OUTER wrapper div
   AND we route the pill styling to the INNER anchor via the .__link rules
   below. Per-page CSS targets `.btn { padding: 13px 22px; border-radius:
   999px; border: 1px solid; ... }` directly though, which would also style
   the wrapper, producing a double-pill / double-border look. Reset the
   wrapper so only the inner anchor is the visible pill. */
.wp-block-button.btn,
.wp-block-button.btn-primary,
.wp-block-button.btn-ghost,
.wp-block-button.module-link,
.wp-block-button.nav-cta {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  box-shadow: none !important;
}

.wp-block-button.btn .wp-block-button__link,
.wp-block-button.module-link .wp-block-button__link,
.wp-block-button.nav-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--navy);
  color: #fff !important;
}
.wp-block-button.btn-primary:hover .wp-block-button__link {
  background: var(--navy-3);
  color: #fff !important;
  transform: translateY(-1px);
}
.wp-block-button.btn-ghost .wp-block-button__link {
  background: #fff;
  color: var(--navy) !important;
  border: 1px solid var(--line);
}
.wp-block-button.btn-ghost:hover .wp-block-button__link {
  border-color: var(--blue);
  color: var(--blue) !important;
}
.wp-block-button.nav-cta .wp-block-button__link {
  background: var(--navy);
  color: #fff !important;
  padding: 9px 16px;
  font-size: 14px;
}
.wp-block-button.module-link .wp-block-button__link {
  background: transparent;
  color: var(--navy) !important;
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid var(--line);
}
/* Section-specific overrides */
.cta .wp-block-button.btn-primary .wp-block-button__link {
  background: #fff;
  color: var(--navy) !important;
}
.cta .wp-block-button.btn-primary:hover .wp-block-button__link {
  background: var(--blue-soft);
  color: var(--navy) !important;
}
.cta .wp-block-button.btn-ghost .wp-block-button__link {
  background: transparent;
  border-color: rgba(255,255,255,.25);
  color: #fff !important;
}
.cta .wp-block-button.btn-ghost:hover .wp-block-button__link {
  border-color: #fff;
  color: #fff !important;
}
.product-card .wp-block-button.btn .wp-block-button__link {
  padding: 10px 18px;
  font-size: 14px;
}
/* Match the original .cta-row gap/wrapping AND its centered alignment
   (production uses `justify-content: center`). My converter set
   layout.justifyContent="left" on the wp:buttons block, which adds
   `is-content-justification-left` -> `justify-content: flex-start`.
   Force center to match production. */
.cta-row.wp-block-buttons,
.wp-block-buttons.cta-row {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* =============================================================
   Veloscint base design system (extracted from page <style> block)
   ============================================================= */
    :root {
      --navy:        #0F1031;
      --navy-2:      #1A1D44;
      --navy-3:      #2A2E5C;
      --blue:        #6699CC;
      --blue-bright: #85B0D9;
      --blue-soft:   #EAF1F8;
      --ink:         #333333;
      --muted:       #6B6F7A;
      --line:        #D6D8DE;
      --bg:          #FFFFFF;
      --bg-alt:      #F7F7F8;
      --bg-dark:     #0F1031;
      --accent:      #6699CC;
      --radius:      14px;
      --radius-sm:   10px;
      --shadow-sm:   0 1px 2px rgba(15,16,49,.06), 0 2px 6px rgba(15,16,49,.05);
      --shadow-md:   0 4px 12px rgba(15,16,49,.08), 0 16px 32px rgba(15,16,49,.08);
      --shadow-lg:   0 10px 30px rgba(15,16,49,.10), 0 30px 60px rgba(15,16,49,.12);
      --maxw:        1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: var(--blue); text-decoration: none; }
    a:hover { color: var(--navy); }
    img { max-width: 100%; display: block; }

    .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    /* ------------ Header ------------ */
    header.site {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.92);
      backdrop-filter: saturate(160%) blur(10px);
      -webkit-backdrop-filter: saturate(160%) blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
    .brand { display: flex; align-items: center; gap: 10px; }
    .brand img { height: 28px; width: auto; }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links > a {
      color: var(--ink); font-weight: 500; font-size: 14.5px;
    }
    .nav-links > a:hover { color: var(--blue); }
    .nav-cta {
      background: var(--navy);
      color: #fff !important;
      padding: 9px 16px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      transition: background .15s ease, transform .15s ease;
    }
    .nav-cta:hover { background: var(--navy-3); transform: translateY(-1px); }
    .mobile-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }

    /* Products dropdown */
    .nav-dropdown { position: relative; }
    .nav-dropdown-trigger {
      background: none; border: 0; cursor: pointer;
      color: var(--ink); font-weight: 500; font-size: 14.5px;
      font-family: inherit;
      padding: 0; display: inline-flex; align-items: center; gap: 4px;
    }
    .nav-dropdown-trigger:hover { color: var(--blue); }
    .nav-dropdown-trigger svg { transition: transform .15s ease; }
    .nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%; left: -14px;
      margin-top: 10px;
      min-width: 280px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .15s ease, transform .15s ease, visibility .15s;
      z-index: 101;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu,
    .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    .nav-dropdown-menu a {
      display: block;
      padding: 10px 14px;
      border-radius: 8px;
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 500;
      transition: background .12s ease, color .12s ease;
    }
    .nav-dropdown-menu a:hover {
      background: var(--blue-soft);
      color: var(--navy);
    }
    .nav-dropdown-title { display: block; font-weight: 600; color: var(--navy); }
    .nav-dropdown-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }

    /* ------------ Hero ------------ */
    .hero {
      position: relative;
      padding: 96px 0 88px;
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 80% -10%, rgba(102,153,204,.22), transparent 60%),
        radial-gradient(800px 400px at -5% 20%, rgba(15,16,49,.06), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 100%);
    }
    .hero-inner { max-width: 880px; margin: 0 auto; text-align: center; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 1px solid var(--line);
      color: var(--navy-3);
      padding: 6px 12px; border-radius: 999px;
      font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
      box-shadow: var(--shadow-sm);
    }
    .eyebrow .dot {
      width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(102,153,204,.22);
    }
    h1 {
      font-size: clamp(36px, 4.8vw, 56px);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 20px 0 20px;
      color: var(--navy);
    }
    h1 .grad {
      color: var(--blue-bright);
    }
    .lede {
      font-size: 18px;
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto 28px;
    }
    .cta-row {
      display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 22px; border-radius: 999px;
      font-weight: 600; font-size: 15px; border: 1px solid transparent;
      cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    }
    .btn-primary { background: var(--navy); color: #fff; }
    .btn-primary:hover { background: var(--navy-3); color: #fff; transform: translateY(-1px); }
    .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

    /* ------------ Section base ------------ */
    section { padding: 88px 0; }
    .section-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 48px;
    }
    .section-head .eyebrow { margin-bottom: 14px; }
    h2 {
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 14px;
      color: var(--navy);
    }
    h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
    .section-head p { color: var(--muted); font-size: 17px; margin: 0; }

    /* ------------ Pillars section (Microsoft + ERP) ------------ */
    .pillars-section { background: var(--bg-alt); }
    .pillar-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .pillar-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 32px;
      box-shadow: var(--shadow-sm);
    }
    .pillar-card .ico {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--blue), var(--blue-bright));
      color: #fff;
      display: grid; place-items: center;
      margin-bottom: 16px;
    }
    .pillar-card h3 { font-size: 22px; margin-bottom: 10px; }
    .pillar-card > p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
    .pillar-card ul {
      list-style: none; padding: 0; margin: 0;
      display: grid; gap: 10px;
    }
    .pillar-card ul li {
      display: flex; gap: 10px; align-items: flex-start;
      color: var(--ink);
      font-size: 14.5px;
    }
    .pillar-card ul li::before {
      content: "";
      flex: 0 0 6px; height: 6px; border-radius: 50%;
      background: var(--blue);
      margin-top: 9px;
    }

    /* ------------ Mission ------------ */
    .mission .mission-wrap {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }
    .mission p {
      color: var(--muted);
      font-size: 18px;
      margin: 0 0 16px;
      line-height: 1.6;
    }

    /* ------------ Products ------------ */
    .products { background: var(--bg-alt); }
    .product-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 36px;
      max-width: 720px;
      margin: 0 auto;
      box-shadow: var(--shadow-sm);
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 24px;
      align-items: start;
    }
    .product-logo {
      width: 72px; height: 72px;
      border-radius: 16px;
      background: var(--navy);
      overflow: hidden;
      display: grid; place-items: center;
    }
    .product-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
    .product-tag {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--blue-soft);
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 10px;
    }
    .product-card h3 { font-size: 22px; margin-bottom: 10px; }
    .product-card p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
    .product-card .btn { padding: 10px 18px; font-size: 14px; }
    .products-aside {
      text-align: center;
      color: var(--muted);
      font-size: 15px;
      margin-top: 28px;
      font-style: italic;
    }

    /* ------------ CTA ------------ */
    .cta {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 70%, var(--blue) 100%);
      color: #fff;
      border-radius: 24px;
      padding: 56px 48px;
      margin: 0 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-wrap { padding: 40px 0 80px; max-width: var(--maxw); margin: 0 auto; }
    .cta h2 { color: #fff; margin-bottom: 10px; }
    .cta p { color: #C7D2E6; max-width: 600px; margin: 0 auto 28px; font-size: 17px; }
    .cta .btn-primary { background: #fff; color: var(--navy); }
    .cta .btn-primary:hover { background: var(--blue-soft); color: var(--navy); }
    .cta .btn-ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
    .cta .btn-ghost:hover { border-color: #fff; color: #fff; }

    /* ------------ Footer ------------ */
    footer.site {
      background: #080924;
      color: #9AA6BE;
      padding: 48px 0 28px;
    }
    .foot {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 36px;
    }
    .foot .brand img { height: 26px; opacity: .95; }
    .foot h5,
    .foot .footer-col-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #E8EEF8;
      margin: 0 0 14px;
      line-height: 1.3;
    }
    .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .foot a { color: #9AA6BE; font-size: 14px; }
    .foot a:hover { color: #fff; }
    .foot p { margin: 10px 0 0; font-size: 14px; color: #9AA6BE; max-width: 340px; }
    .foot-bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,.08);
      font-size: 13px;
      color: #6B778F;
    }
    /* Footer-bottom paragraphs were converted from <div>+wp:html to
       wp:paragraph so they don't show as raw source in the editor.
       Override .foot p (intended for the brand-column tagline) so the
       new bottom paragraphs have no margin, no 340px max-width clip,
       and the small foot-bottom font-size/color. */
    .foot-bottom p { margin: 0; max-width: none; font-size: 13px; color: #6B778F; }
    /* Footer brand block now wraps the logo in a wp:image (figure). Zero
       the figure's default margin so the layout matches the previous bare-img. */
    .foot .brand .wp-block-image { margin: 0; }

    /* ------------ Reveal animation ------------ */
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    /* ------------ Responsive ------------ */
    @media (max-width: 980px) {
      .pillar-grid { grid-template-columns: 1fr; }
      .foot { grid-template-columns: 1fr 1fr; }
      .nav-links { display: none; }
      .mobile-toggle { display: inline-flex; }
      .nav-links.open {
        display: flex;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        padding: 16px 24px;
        gap: 14px;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        align-items: flex-start;
      }
      .nav-dropdown-menu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; padding: 8px 0 0 0;
        margin: 0;
      }
      .cta { padding: 40px 24px; }
      section { padding: 64px 0; }
      .hero { padding: 72px 0 64px; }
      .product-card { grid-template-columns: 64px 1fr; padding: 28px; }
      .product-logo { width: 64px; height: 64px; }
    }

    @media (max-width: 620px) {
      .foot { grid-template-columns: 1fr; }
      .foot-bottom { flex-direction: column; gap: 8px; }
      .product-card { grid-template-columns: 1fr; text-align: left; }
    }