/*
Theme Name: S4
Theme URI: https://www.s4.com
Author: Software 4 Retail Solutions
Author URI: https://www.s4.com
Description: Custom WordPress theme for s4.com — Software 4 Retail Solutions. Built on Bootstrap 5.3 with the S4 production design system (Vision Blue palette, Sora marketing font, Ubuntu logo lockup). Migrated from DotNetNuke.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.2
License: Proprietary — S4 internal use
License URI: -
Text Domain: s4
Tags: bootstrap, custom-colors, custom-menu, theme-options, threaded-comments
*/

/* =========================================================
   S4 theme — base stylesheet
   Copied verbatim from current-build/index.html (Phase 1 source-of-truth design)
   so the WordPress build preserves design fidelity.

   For future maintenance: this is meant to be extracted into SCSS
   partials under /assets/scss/ — see _variables.scss for tokens.
   ========================================================= */

/* =========================================================
       S4 BRAND TOKENS — sourced from production design guide
       (Aetheria · Aurora · Vision Balance, palette dated 2026-05-19)
       Edit these to retune the whole site.
       ========================================================= */
    :root {
      /* Vision Blue family — primary brand accent */
      --s4-blue-light:    #5BC5E8;   /* sky blue — light accents, borders, hovers */
      --s4-blue-primary:  #1593CE;   /* primary brand blue — buttons, eyebrows, links */
      --s4-blue-dark:     #0E5FA8;   /* deeper blue — gradients, hover states */

      /* S4 navy / dark surfaces */
      --s4-navy:          #0a1521;   /* primary dark background */
      --s4-navy-panel:    #111b2a;   /* dark panels, footer */
      --s4-navy-card:     #0f1928;   /* card on dark */
      --s4-navy-alt:      #0c1521;   /* alternate dark */
      --s4-brand-from:    #0c1a2e;   /* brand-card gradient start */
      --s4-brand-to:      #162a47;   /* brand-card gradient end */

      /* Light surfaces */
      --s4-bg-light:      #f4f8fc;   /* main light section background */
      --s4-bg-alt:        #f0f6fc;   /* alternate light */
      --s4-panel-light:   #ffffff;   /* card / panel on light */
      --s4-day-active:    #d8e9fb;   /* soft blue highlight */

      /* Text */
      --s4-text:          #0d1b2a;   /* body text on light */
      --s4-text-muted:    #6b7a8c;   /* secondary text on light */
      --s4-text-dark:     #e6eef9;   /* body text on dark */
      --s4-text-dark-muted: #7a8ba0; /* secondary text on dark */
      --s4-border:        #d6e1ec;   /* light borders / rules */
      --s4-border-dark:   #2a3142;   /* dark borders / inactive */

      /* Status colors (preserved from design guide) */
      --s4-success:       #008000;
      --s4-warning:       #ffff00;
      --s4-danger:        #f53d3d;

      /* Typography */
      --s4-font:        'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --s4-font-brand:  'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --s4-font-mono:   'Consolas', 'Monaco', monospace;

      /* Radii — design guide: 12px outer, 8px inner, 4-6px micro */
      --s4-radius-sm:   8px;
      --s4-radius:      12px;
      --s4-radius-lg:   16px;
      --s4-radius-pill: 999px;

      /* Shadows */
      --s4-shadow-sm:   0 2px 8px rgba(13,27,42,0.06);
      --s4-shadow:      0 8px 24px rgba(13,27,42,0.08);
      --s4-shadow-lg:   0 20px 40px rgba(13,27,42,0.12);
    }

    /* =========================================================
       BASE
       ========================================================= */
    body {
      font-family: var(--s4-font);
      color: var(--s4-text);
      background: var(--s4-panel-light);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    h1, h2, h3, h4, h5, h6 { font-family: var(--s4-font); font-weight: 800; color: var(--s4-text); letter-spacing: -0.02em; }
    p { color: var(--s4-text-muted); line-height: 1.65; }
    .eyebrow {
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--s4-blue-primary);
      margin-bottom: 1rem;
    }

    /* Buttons */
    .btn { font-weight: 600; padding: 0.75rem 1.5rem; border-radius: var(--s4-radius-sm); transition: all 0.2s ease; }
    .btn-s4-blue { background: var(--s4-blue-primary); color: #fff; border: 1px solid var(--s4-blue-primary); }
    .btn-s4-blue:hover { background: var(--s4-blue-dark); border-color: var(--s4-blue-dark); color: #fff; transform: translateY(-1px); }
    .btn-s4-outline { background: transparent; color: var(--s4-navy); border: 1px solid var(--s4-border); }
    .btn-s4-outline:hover { background: var(--s4-navy); color: #fff; border-color: var(--s4-navy); }
    .btn-s4-dark { background: var(--s4-navy); color: #fff; border: 1px solid var(--s4-navy); }
    .btn-s4-dark:hover { background: var(--s4-navy-alt); color: #fff; }
    .btn-s4-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
    .btn-s4-outline-light:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5); }

    /* =========================================================
       HEADER
       ========================================================= */
    .s4-header {
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      border-bottom: 2px solid var(--s4-blue-light);
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .s4-logo { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
    .s4-logo-mark {
      width: 52px; height: 45px;
      background-image: url('assets/img/s4-logo-header.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
    }
    .s4-logo-text { line-height: 1.1; font-family: var(--s4-font-brand); }
    .s4-logo-text .name { font-weight: 700; color: #fff; font-size: 1rem; display: block; letter-spacing: 0.5px; }
    .s4-logo-text .tag { font-size: 0.7rem; color: var(--s4-blue-light); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; }
    .s4-nav .nav-link { color: rgba(255,255,255,0.85); font-weight: 500; padding: 0.5rem 1rem; }
    .s4-nav .nav-link:hover { color: var(--s4-blue-light); }
    .s4-nav .dropdown-menu {
      background: var(--s4-navy-card);
      border: 1px solid var(--s4-border-dark);
      border-radius: var(--s4-radius-sm);
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .s4-nav .dropdown-item { color: rgba(255,255,255,0.85); font-size: 0.9375rem; padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .s4-nav .dropdown-item:hover { background: var(--s4-blue-primary); color: #fff; }
    .s4-nav .dropdown-item .dd-tag { font-size: 0.75rem; color: var(--s4-blue-light); font-weight: 400; }
    .s4-nav .dropdown-item:hover .dd-tag { color: rgba(255,255,255,0.85); }
    .s4-nav .dropdown-menu { min-width: 260px; padding: 0.5rem 0; }
    .s4-header .navbar-toggler {
      border-color: rgba(255,255,255,0.3);
    }
    .s4-header .navbar-toggler-icon {
      filter: invert(1) brightness(2);
    }

    /* =========================================================
       HERO
       ========================================================= */
    .s4-hero {
      position: relative;
      min-height: 720px;
      display: flex;
      align-items: center;
      color: #fff;
      background: linear-gradient(120deg, rgba(10,21,33,0.92) 0%, rgba(10,21,33,0.78) 50%, rgba(10,21,33,0.55) 100%),
                  url('assets/img/home-hero.jpg') center/cover no-repeat;
    }
    .s4-hero h1 {
      color: #fff;
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }
    .s4-hero h1 .accent { color: var(--s4-blue-light); display: block; }
    .s4-hero p.lead { color: rgba(232, 238, 247, 0.9); font-size: 1.125rem; max-width: 520px; margin-top: 1.5rem; }
    .s4-hero-pill {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(91,197,232,0.12);
      border: 1px solid rgba(91,197,232,0.35);
      color: var(--s4-blue-light);
      padding: 0.4rem 1rem;
      border-radius: var(--s4-radius-pill);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }
    .s4-hero-pill .dot { width: 6px; height: 6px; background: var(--s4-blue-light); border-radius: 50%; }
    .s4-pos-systems { margin-top: 3rem; }
    .s4-pos-systems .label { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--s4-text-dark-muted); margin-bottom: 0.75rem; }
    .s4-pos-tag {
      display: inline-block;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff;
      padding: 0.4rem 0.9rem;
      border-radius: var(--s4-radius-pill);
      font-size: 0.8125rem;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
    }

    /* =========================================================
       STATS STRIP
       ========================================================= */
    .s4-stats {
      background: var(--s4-navy);
      color: #fff;
      padding: 3rem 0;
    }
    .s4-stat-value { font-size: 2.5rem; font-weight: 800; color: var(--s4-blue-light); line-height: 1; letter-spacing: -0.02em; }
    .s4-stat-label { font-size: 0.875rem; color: var(--s4-text-dark-muted); margin-top: 0.5rem; }

    /* =========================================================
       SECTION DEFAULTS
       ========================================================= */
    section { padding: 6rem 0; }
    .section-header h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.1;
      margin-bottom: 1.25rem;
    }
    .section-header p { font-size: 1.0625rem; max-width: 620px; }
    .section-header.text-center p { margin-left: auto; margin-right: auto; }

    /* =========================================================
       PRODUCT FEATURE ROWS
       ========================================================= */
    .s4-product-row { margin-bottom: 5rem; }
    .s4-product-row:last-child { margin-bottom: 0; }
    .s4-product-img {
      border-radius: var(--s4-radius-lg);
      box-shadow: var(--s4-shadow-lg);
      width: 100%; height: auto;
      display: block;
    }
    .s4-product-icon {
      width: 48px; height: 48px;
      background: var(--s4-bg-light);
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--s4-navy);
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
    }
    .s4-product-row h3 { font-size: 2rem; margin-bottom: 1rem; }
    .s4-feature-list { list-style: none; padding: 0; margin: 1.5rem 0; }
    .s4-feature-list li {
      padding: 0.4rem 0;
      padding-left: 1.75rem;
      position: relative;
      color: var(--s4-text);
    }
    .s4-feature-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 0.7rem;
      width: 10px; height: 10px;
      background: var(--s4-blue-primary);
      border-radius: 50%;
    }
    .s4-learn-more {
      color: var(--s4-blue-primary);
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: gap 0.2s ease;
    }
    .s4-learn-more:hover { color: var(--s4-blue-dark); gap: 0.75rem; }

    /* =========================================================
       MORE SOLUTIONS CARDS
       ========================================================= */
    .s4-solution-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
    .s4-solution-card-link:hover { color: inherit; text-decoration: none; }
    .s4-solution-card {
      background: var(--s4-bg-light);
      border-radius: var(--s4-radius);
      padding: 2rem;
      height: 100%;
      transition: all 0.25s ease;
      border: 1px solid transparent;
    }
    .s4-solution-card-link:hover .s4-solution-card {
      background: #fff;
      border-color: var(--s4-border);
      box-shadow: var(--s4-shadow);
      transform: translateY(-4px);
    }
    .s4-solution-card .icon-wrap {
      width: 48px; height: 48px;
      background: #fff;
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--s4-navy);
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-solution-card-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--s4-radius-sm);
      margin-bottom: 1.25rem;
      display: block;
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-solution-card h4 { font-size: 1.25rem; margin-bottom: 0.75rem; }
    .s4-solution-card p { font-size: 0.9375rem; margin-bottom: 0; }

    /* =========================================================
       HOME PAGE — grocery hero + compact product imagery
       (scoped to .s4-page-home — other pages keep full-size images)
       ========================================================= */
    .s4-page-home .s4-hero {
      min-height: 540px;
      padding: 4.5rem 0;
      background-image: linear-gradient(105deg,
          rgba(10, 21, 33, 0.91) 0%,
          rgba(10, 21, 33, 0.72) 38%,
          rgba(10, 21, 33, 0.28) 68%,
          rgba(10, 21, 33, 0.12) 100%),
        url('assets/img/home-hero.jpg');
      background-position: center center, 72% center;
      background-size: auto, cover;
      background-repeat: no-repeat;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .s4-page-home .s4-hero {
        background-image: linear-gradient(105deg,
            rgba(10, 21, 33, 0.91) 0%,
            rgba(10, 21, 33, 0.72) 38%,
            rgba(10, 21, 33, 0.28) 68%,
            rgba(10, 21, 33, 0.12) 100%),
          url('assets/img/home-hero@2x.jpg');
      }
    }
    .s4-page-home #products-section {
      padding-top: 4.5rem;
      padding-bottom: 5rem;
    }
    .s4-page-home .s4-product-row {
      margin-bottom: 3.25rem;
    }
    .s4-page-home .s4-product-media {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.75rem;
      background: var(--s4-bg-light);
      border-radius: var(--s4-radius-lg);
      border: 1px solid var(--s4-border);
    }
    .s4-page-home .s4-product-img {
      width: 100%;
      max-width: 100%;
      height: auto;
      box-shadow: none;
      border-radius: var(--s4-radius-sm);
    }
    .s4-page-home .s4-product-img--lifestyle {
      display: block;
      aspect-ratio: 4 / 3;
      max-height: 340px;
      object-fit: cover;
      object-position: center;
    }
    .s4-page-home .s4-solution-card {
      padding: 1.35rem;
    }
    .s4-page-home .s4-solution-card-img {
      max-height: 88px;
      aspect-ratio: 16 / 9;
      margin-bottom: 1rem;
    }
    @media (max-width: 991.98px) {
      .s4-page-home .s4-hero { min-height: 460px; }
      .s4-page-home .s4-product-img--lifestyle { max-height: 260px; }
    }

    /* =========================================================
       HOME PAGE V2 — conversion refresh (/?home=v2)
       ========================================================= */
    .s4-page-home-v2 .s4-hero {
      min-height: 660px;
      padding: 5.25rem 0;
      background-image: linear-gradient(105deg,
          rgba(10, 21, 33, 0.91) 0%,
          rgba(10, 21, 33, 0.72) 38%,
          rgba(10, 21, 33, 0.28) 68%,
          rgba(10, 21, 33, 0.12) 100%),
        url('assets/img/home-hero.jpg');
      background-position: center center, 72% center;
      background-size: auto, cover;
      background-repeat: no-repeat;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .s4-page-home-v2 .s4-hero {
        background-image: linear-gradient(105deg,
            rgba(10, 21, 33, 0.91) 0%,
            rgba(10, 21, 33, 0.72) 38%,
            rgba(10, 21, 33, 0.28) 68%,
            rgba(10, 21, 33, 0.12) 100%),
          url('assets/img/home-hero@2x.jpg');
        background-position: center center, 72% center;
        background-size: auto, cover;
      }
    }
    .s4-page-home-v2 .s4-hero h1 .accent {
      display: inline;
      color: var(--s4-blue-light);
    }
    .s4-page-home-v2 .s4-hero p.lead {
      max-width: 560px;
      font-size: 1.2rem;
      line-height: 1.65;
    }
    .s4-page-home-v2 .s4-v2-hero-reassure {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.5rem;
      margin-top: 1.75rem;
      font-size: 0.875rem;
      color: var(--s4-text-dark);
      font-weight: 500;
    }
    .s4-page-home-v2 .s4-v2-hero-reassure i {
      color: var(--s4-blue-light);
      margin-right: 0.25rem;
    }
    .s4-page-home-v2 .s4-home-v2-hero-form {
      position: relative;
      z-index: 1;
      padding: 2rem;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    }
    .s4-page-home-v2 .s4-home-v2-hero-form::before {
      content: "";
      position: absolute;
      inset: -10px;
      z-index: -1;
      border-radius: calc(var(--s4-radius-lg) + 10px);
      border: 1px solid rgba(91, 197, 232, 0.28);
      background: rgba(91, 197, 232, 0.08);
    }
    .s4-page-home-v2 .s4-home-v2-hero-form h2 {
      font-size: clamp(1.35rem, 2vw, 1.65rem);
    }
    .s4-page-home-v2 .s4-home-v2-hero-form .s4-lead-error {
      margin-bottom: 1rem;
      color: #7a2b00;
      background: #fff3e5;
      border-color: #ffd6ad;
    }
    .s4-page-home-v2 .s4-home-v2-trust {
      padding: 2rem 0;
    }
    .s4-page-home-v2 .s4-home-v2-products {
      padding: 5rem 0;
    }
    .s4-home-shelf-edge--embedded {
      margin-top: 3.5rem;
      padding-top: 3.5rem;
      border-top: 1px solid var(--s4-border);
    }
    .s4-home-shelf-edge--embedded .section-header {
      margin-bottom: 2.5rem;
    }
    .s4-home-shelf-edge--embedded .section-header p {
      max-width: 42rem;
      margin-left: auto;
      margin-right: auto;
    }
    .s4-shelf-kicker {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--s4-blue-primary);
      margin-bottom: 0.35rem;
    }
    .s4-page-home .s4-home-shelf-edge--embedded .s4-solution-card h4 {
      margin-top: 0.25rem;
    }

    /* Shelf edge — animated pricebook → tag → print → ESL flow (above product cards) */
    .s4-shelf-flow {
      margin: 0 auto 2.75rem;
      max-width: 52rem;
    }
    .s4-shelf-flow-track {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.35rem 0.5rem;
      padding: 1.35rem 1.25rem;
      background: linear-gradient(135deg, rgba(21, 147, 206, 0.08) 0%, rgba(10, 21, 33, 0.04) 100%);
      border: 1px solid rgba(21, 147, 206, 0.2);
      border-radius: var(--s4-radius-lg);
    }
    .s4-shelf-flow-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      min-width: 5.5rem;
      text-align: center;
      animation: s4-shelf-flow-in 0.65s ease both;
      animation-delay: calc(var(--s4-flow-i, 0) * 0.12s);
    }
    .s4-shelf-flow-node--hub {
      position: relative;
    }
    .s4-shelf-flow-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(21, 147, 206, 0.35);
      color: var(--s4-blue-primary);
      font-size: 1.35rem;
      box-shadow: 0 4px 14px rgba(10, 21, 33, 0.08);
      transition: transform 0.25s ease, border-color 0.25s ease;
    }
    .s4-shelf-flow-node--hub .s4-shelf-flow-icon {
      border-color: var(--s4-blue-primary);
      background: linear-gradient(145deg, #fff 0%, rgba(91, 197, 232, 0.15) 100%);
      animation: s4-shelf-flow-float 3.2s ease-in-out infinite;
    }
    .s4-shelf-flow-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--s4-text-muted);
      line-height: 1.25;
      max-width: 7rem;
    }
    .s4-shelf-flow-pulse {
      position: absolute;
      top: 0.15rem;
      right: 0.15rem;
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: var(--s4-blue-light);
      box-shadow: 0 0 0 0 rgba(91, 197, 232, 0.55);
      animation: s4-shelf-flow-pulse 2s ease-out infinite;
    }
    .s4-shelf-flow-connector {
      display: flex;
      align-items: center;
      color: var(--s4-blue-primary);
      font-size: 1.1rem;
      opacity: 0.55;
      animation: s4-shelf-flow-arrow 1.4s ease-in-out infinite;
    }
    .s4-shelf-flow-connector:nth-of-type(2) { animation-delay: 0.15s; }
    .s4-shelf-flow-connector:nth-of-type(4) { animation-delay: 0.3s; }
    .s4-shelf-flow-connector:nth-of-type(6) { animation-delay: 0.45s; }
    .s4-shelf-flow-caption {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      margin: 1rem 0 0;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--s4-blue-primary);
      text-align: center;
    }
    .s4-shelf-flow-caption .bi-arrow-repeat {
      animation: s4-shelf-flow-spin 2.5s linear infinite;
    }
    @keyframes s4-shelf-flow-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes s4-shelf-flow-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    @keyframes s4-shelf-flow-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(91, 197, 232, 0.55); }
      70%  { box-shadow: 0 0 0 10px rgba(91, 197, 232, 0); }
      100% { box-shadow: 0 0 0 0 rgba(91, 197, 232, 0); }
    }
    @keyframes s4-shelf-flow-arrow {
      0%, 100% { opacity: 0.4; transform: translateX(0); }
      50%      { opacity: 1; transform: translateX(3px); }
    }
    @keyframes s4-shelf-flow-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .s4-shelf-flow-node,
      .s4-shelf-flow-icon,
      .s4-shelf-flow-pulse,
      .s4-shelf-flow-connector,
      .s4-shelf-flow-caption .bi-arrow-repeat {
        animation: none;
      }
      .s4-shelf-flow-connector { opacity: 0.85; }
    }
    @media (max-width: 767.98px) {
      .s4-shelf-flow-track {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.25rem 1rem;
      }
      .s4-shelf-flow-connector {
        transform: rotate(90deg);
      }
      .s4-shelf-flow-node {
        flex-direction: row;
        min-width: 0;
        width: 100%;
        max-width: 16rem;
        justify-content: flex-start;
        gap: 0.75rem;
        text-align: left;
      }
      .s4-shelf-flow-label { max-width: none; }
    }

    .s4-page-home-v2 .s4-home-more-solutions h3 {
      font-size: clamp(1.35rem, 2vw, 1.65rem);
    }
    .s4-page-home-v2 .s4-home-v2-products .eyebrow {
      letter-spacing: 0.12em;
      font-size: 0.8rem;
    }
    .s4-page-home-v2 .s4-home-v2-products h3 {
      font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    }
    .s4-page-home-v2 .s4-home-v2-products p,
    .s4-page-home-v2 .s4-feature-list li {
      font-size: 1.0625rem;
      line-height: 1.65;
    }
    .s4-page-home-v2 .s4-home-v2-midcta {
      padding: 4rem 0;
      background: var(--s4-bg-light);
      border-top: 1px solid var(--s4-border);
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-page-home-v2 .s4-home-v2-midcta-card {
      background: linear-gradient(135deg, var(--s4-navy) 0%, #162a47 100%);
      border: 1px solid rgba(91, 197, 232, 0.22);
      border-radius: var(--s4-radius-lg);
      padding: 2.5rem 2.75rem;
      box-shadow: var(--s4-shadow);
    }
    .s4-page-home-v2 .s4-home-v2-midcta-card h3 {
      color: #fff;
      font-size: clamp(1.35rem, 2.5vw, 1.75rem);
      margin-bottom: 0.75rem;
    }
    .s4-page-home-v2 .s4-home-v2-midcta-card p {
      color: rgba(232, 238, 247, 0.82);
      font-size: 1.0625rem;
      margin-bottom: 0;
      max-width: 52ch;
    }
    .s4-page-home-v2 .s4-home-v2-proof {
      padding: 5rem 0;
      background: #fff;
    }
    .s4-page-home-v2 .s4-home-v2-quote {
      height: 100%;
      margin: 0;
      padding: 2rem;
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      border-left: 4px solid var(--s4-blue-primary);
    }
    .s4-page-home-v2 .s4-home-v2-quote blockquote {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: var(--s4-text);
      margin: 0 0 1.25rem;
      font-style: normal;
    }
    .s4-page-home-v2 .s4-home-v2-quote .name {
      display: block;
      font-weight: 700;
      color: var(--s4-text);
    }
    .s4-page-home-v2 .s4-home-v2-quote .role {
      display: block;
      font-size: 0.9375rem;
      color: var(--s4-text-muted);
      margin-top: 0.2rem;
    }
    .s4-page-home-v2 .s4-home-v2-lead {
      background: #fff;
      border-top: 1px solid var(--s4-border);
      padding: 4.5rem 0 5rem;
    }
    .s4-page-home-v2 .s4-home-v2-lead .s4-lead-form-panel {
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      color: var(--s4-text);
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-page-home-v2 .s4-home-v2-lead .s4-lead-form-panel::before {
      display: none;
    }
    .s4-page-home-v2 .s4-home-v2-lead .eyebrow {
      color: var(--s4-blue-primary);
    }
    .s4-page-home-v2 .s4-home-v2-lead h2 {
      color: var(--s4-text);
    }
    .s4-page-home-v2 .s4-home-v2-lead > .container > .s4-lead-form-panel > .row > .col-lg-5 > p {
      color: var(--s4-text-muted);
    }
    .s4-page-home-v2 .s4-home-v2-contact .s4-on-dark-contact-row .label {
      color: var(--s4-text-muted);
    }
    .s4-page-home-v2 .s4-home-v2-contact .s4-on-dark-contact-row .value,
    .s4-page-home-v2 .s4-home-v2-contact .s4-on-dark-contact-row .value a {
      color: var(--s4-text);
    }
    .s4-page-home-v2 .s4-home-v2-contact .s4-on-dark-contact-row .value a {
      color: var(--s4-blue-primary);
    }
    .s4-page-home-v2 .s4-home-v2-contact .s4-contact-icon.light {
      background: #fff;
      color: var(--s4-navy);
      border: 1px solid var(--s4-border);
    }
    .s4-page-home-v2 .s4-catalog {
      padding: 5rem 0;
    }
    .s4-page-home-v2 .s4-catalog .s4-catalog-item p {
      font-size: 0.9375rem;
      line-height: 1.55;
    }
    @media (max-width: 991.98px) {
      .s4-page-home-v2 .s4-hero {
        min-height: auto;
        padding: 3.5rem 0 3rem;
      }
      .s4-page-home-v2 .s4-hero h1 {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
      }
      .s4-page-home-v2 .s4-hero p.lead {
        font-size: 1.0625rem;
      }
      .s4-page-home-v2 .s4-home-v2-hero-form {
        margin-top: 1.25rem;
      }
      .s4-page-home-v2 .s4-pos-tag {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
      }
      .s4-page-home-v2 .s4-home-v2-midcta-card {
        padding: 1.75rem 1.5rem;
        text-align: center;
      }
      .s4-page-home-v2 .s4-home-v2-midcta-card p {
        margin-left: auto;
        margin-right: auto;
      }
      .s4-page-home-v2 .s4-home-v2-products {
        padding: 3.5rem 0;
      }
      .s4-page-home-v2 .s4-product-row {
        margin-bottom: 3.5rem;
      }
      .s4-page-home-v2 .s4-home-v2-proof {
        padding: 3.5rem 0;
      }
      .s4-page-home-v2 .s4-home-v2-quote {
        padding: 1.5rem;
      }
    }

    /* =========================================================
       HOME PAGE V3 — screenshot-led shorter conversion page
       ========================================================= */
    .s4-page-home-v3 {
      background: #fff;
    }
    .s4-page-home-v3 .s4-v3-hero {
      position: relative;
      overflow: hidden;
      padding: 3.85rem 0 3.35rem;
      color: #fff;
      background-image: linear-gradient(105deg,
          rgba(10, 21, 33, 0.92) 0%,
          rgba(10, 21, 33, 0.78) 40%,
          rgba(10, 21, 33, 0.42) 70%,
          rgba(10, 21, 33, 0.22) 100%),
        url('assets/img/home-hero.jpg');
      background-position: center center, 72% center;
      background-size: auto, cover;
      background-repeat: no-repeat;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .s4-page-home-v3 .s4-v3-hero {
        background-image: linear-gradient(105deg,
            rgba(10, 21, 33, 0.92) 0%,
            rgba(10, 21, 33, 0.78) 40%,
            rgba(10, 21, 33, 0.42) 70%,
            rgba(10, 21, 33, 0.22) 100%),
          url('assets/img/home-hero@2x.jpg');
        background-position: center center, 72% center;
        background-size: auto, cover;
      }
    }
    .s4-page-home-v3 .s4-v3-hero::after {
      content: "";
      position: absolute;
      inset: auto -10% -28% 42%;
      height: 360px;
      background: rgba(21, 147, 206, 0.12);
      filter: blur(70px);
      transform: rotate(-8deg);
      pointer-events: none;
    }
    .s4-page-home-v3 .s4-v3-hero .container {
      position: relative;
      z-index: 1;
    }
    .s4-page-home-v3 .s4-v3-hero h1 {
      font-size: clamp(2.25rem, 3.55vw, 3.35rem);
      line-height: 1.02;
      letter-spacing: -0.042em;
      color: #fff;
      max-width: 650px;
      margin: 0.9rem 0 1rem;
    }
    .s4-page-home-v3 .s4-v3-hero h1 span {
      display: block;
      color: var(--s4-blue-light);
    }
    .s4-page-home-v3 .s4-v3-hero .lead {
      max-width: 610px;
      font-size: 1.04rem;
      line-height: 1.58;
      color: rgba(232, 238, 247, 0.86);
      margin-bottom: 0;
    }
    .s4-page-home-v3 .s4-v3-actions {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem 1.15rem;
      margin-top: 1.35rem;
    }
    .s4-page-home-v3 .s4-v3-actions .btn-s4-blue {
      min-width: 220px;
      box-shadow: 0 14px 34px rgba(21, 147, 206, 0.34);
    }
    .s4-page-home-v3 .s4-v3-text-link {
      color: rgba(232, 238, 247, 0.78);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid rgba(91, 197, 232, 0.35);
      padding-bottom: 0.15rem;
    }
    .s4-page-home-v3 .s4-v3-text-link:hover {
      color: var(--s4-blue-light);
      border-bottom-color: var(--s4-blue-light);
    }
    .s4-page-home-v3 .s4-v3-proof-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1.25rem;
    }
    .s4-page-home-v3 .s4-v3-proof-row span {
      display: inline-flex;
      align-items: center;
      gap: 0.48rem;
      padding: 0.52rem 0.72rem;
      border-radius: var(--s4-radius-pill);
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(91,197,232,0.24);
      color: rgba(232, 238, 247, 0.88);
      font-size: 0.86rem;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    }
    .s4-page-home-v3 .s4-v3-proof-row strong {
      color: #fff;
      font-size: 1rem;
      font-weight: 850;
      letter-spacing: -0.03em;
    }
    .s4-page-home-v3 .s4-v3-proof-row i {
      color: var(--s4-blue-light);
      font-size: 0.95rem;
    }
    .s4-page-home-v3 .s4-v3-visual {
      position: relative;
      max-width: 470px;
      margin-left: auto;
      border-radius: 28px;
      padding: 1.1rem 1.1rem 1.25rem;
      background:
        radial-gradient(circle at 50% 48%, rgba(91,197,232,0.16), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045));
      border: 1px solid rgba(91, 197, 232, 0.32);
      box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
      overflow: hidden;
    }
    .s4-page-home-v3 .s4-v3-visual-top,
    .s4-page-home-v3 .s4-v3-visual-caption {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: rgba(232, 238, 247, 0.78);
      font-size: 0.78rem;
    }
    .s4-page-home-v3 .s4-v3-visual-top strong {
      color: var(--s4-blue-light);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 0.7rem;
    }
    .s4-page-home-v3 .s4-v3-phone-stack {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 390px;
      padding: 0.5rem 0 0.75rem;
    }
    .s4-page-home-v3 .s4-v3-phone-stack .phone {
      position: relative;
      width: auto;
      height: clamp(345px, 54vh, 430px);
      max-width: 86%;
      filter: brightness(1.24) contrast(1.2) saturate(1.12) drop-shadow(0 28px 42px rgba(0,0,0,0.45));
    }
    .s4-page-home-v3 .s4-v3-phone-stack .phone-main {
      z-index: 3;
      width: auto;
      transform: translateY(0);
    }
    .s4-page-home-v3 .s4-v3-phone-stack .phone-back-1 {
      display: none;
    }
    .s4-page-home-v3 .s4-v3-phone-stack .phone-back-2 {
      display: none;
    }
    .s4-page-home-v3 .s4-v3-visual-caption {
      position: relative;
      justify-content: flex-start;
      padding: 0.85rem 0.95rem;
      border-radius: var(--s4-radius);
      background: rgba(7, 17, 31, 0.72);
      border: 1px solid rgba(91, 197, 232, 0.18);
    }
    .s4-page-home-v3 .s4-v3-visual-caption i {
      color: var(--s4-blue-light);
      flex-shrink: 0;
    }
    .s4-page-home-v3 .s4-v3-logo-strip {
      background: #fff;
      padding: 2.25rem 0;
    }
    .s4-page-home-v3 .s4-v3-scale-proof {
      padding: 2.25rem 0;
      background: #fff;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-page-home-v3 .s4-v3-named-proof {
      padding: 0 0 2.25rem;
      background: #fff;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-page-home-v3 .s4-v3-named-proof-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 1.1rem 1.25rem;
      background: linear-gradient(135deg, #f7fbff 0%, #eef7fc 100%);
      border: 1px solid rgba(21,147,206,0.16);
      border-radius: var(--s4-radius);
      color: var(--s4-text);
      box-shadow: var(--s4-shadow-sm);
      text-align: center;
    }
    .s4-page-home-v3 .s4-v3-named-proof-card .label {
      color: var(--s4-blue-primary);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .s4-page-home-v3 .s4-v3-named-proof-card strong {
      font-size: 1.1rem;
      color: var(--s4-navy);
    }
    .s4-page-home-v3 .s4-v3-named-proof-card span:not(.label) {
      color: var(--s4-text-muted);
      font-size: 0.95rem;
    }
    .s4-page-home-v3 .s4-v3-named-proof-card a {
      color: var(--s4-blue-primary);
      font-weight: 800;
      text-decoration: none;
    }
    .s4-page-home-v3 .s4-v3-scale-card {
      min-height: 100%;
      padding: 1.35rem;
      border-radius: var(--s4-radius);
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      box-shadow: var(--s4-shadow-sm);
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "icon value"
        "icon label";
      gap: 0.1rem 0.85rem;
      align-items: center;
    }
    .s4-page-home-v3 .s4-v3-scale-card i {
      grid-area: icon;
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: var(--s4-navy);
      color: var(--s4-blue-light);
      font-size: 1.25rem;
    }
    .s4-page-home-v3 .s4-v3-scale-card strong {
      grid-area: value;
      font-size: clamp(1.85rem, 3vw, 2.5rem);
      line-height: 1;
      letter-spacing: -0.05em;
      color: var(--s4-navy);
      font-weight: 850;
    }
    .s4-page-home-v3 .s4-v3-scale-card span {
      grid-area: label;
      color: var(--s4-text-muted);
      font-size: 0.92rem;
      line-height: 1.35;
      font-weight: 600;
    }
    .s4-page-home-v3 .s4-v3-products {
      padding: 5.25rem 0;
      background: #fff;
    }
    .s4-page-home-v3 .s4-v3-products .section-header {
      margin-bottom: 2.75rem;
    }
    .s4-page-home-v3 .s4-v3-product-card {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 1.15rem 1.15rem 1.45rem;
      border-radius: var(--s4-radius-lg);
      background: #fff;
      border: 1px solid var(--s4-border);
      color: var(--s4-text);
      text-decoration: none;
      box-shadow: var(--s4-shadow-sm);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .s4-page-home-v3 .s4-v3-product-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--s4-shadow);
      border-color: rgba(21,147,206,0.32);
    }
    .s4-page-home-v3 .s4-v3-product-card img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: var(--s4-radius);
      margin-bottom: 1.25rem;
      background: #fff;
      filter: brightness(1.14) contrast(1.08) saturate(1.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    }
    .s4-page-home-v3 .s4-v3-product-card .kicker {
      color: var(--s4-blue-primary);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.45rem;
    }
    .s4-page-home-v3 .s4-v3-product-card h3 {
      font-size: 1.55rem;
      margin-bottom: 0.65rem;
    }
    .s4-page-home-v3 .s4-v3-shelf-edge {
      margin-top: 3rem;
      padding-top: 3rem;
      border-top: 1px solid var(--s4-border);
    }
    .s4-page-home-v3 .s4-v3-shelf-edge .section-header {
      margin-bottom: 2rem;
    }
    .s4-page-home-v3 .s4-v3-shelf-edge .section-header p {
      max-width: 42rem;
      margin-left: auto;
      margin-right: auto;
      color: var(--s4-text-muted);
    }
    .s4-page-home-v3 .s4-shelf-flow {
      margin-bottom: 2.25rem;
    }
    .s4-page-home-v3 .s4-v3-product-card p {
      color: var(--s4-text-muted);
      font-size: 1.05rem;
      line-height: 1.72;
      margin-bottom: 1.15rem;
    }
    .s4-page-home-v3 .s4-v3-product-card .learn {
      margin-top: auto;
      color: var(--s4-blue-primary);
      font-weight: 700;
    }
    .s4-page-home-v3 .s4-v3-tagit-feature-card {
      margin-top: 3rem;
      padding: 2rem;
      border-radius: var(--s4-radius-lg);
      background:
        radial-gradient(circle at 82% 18%, rgba(91,197,232,0.18), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #12243b 100%);
      border: 1px solid rgba(91, 197, 232, 0.22);
      box-shadow: var(--s4-shadow);
      color: #fff;
      overflow: hidden;
    }
    .s4-page-home-v3 .s4-v3-tagit-feature-card .kicker {
      color: var(--s4-blue-light);
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 0.55rem;
    }
    .s4-page-home-v3 .s4-v3-tagit-feature-card h3 {
      color: #fff;
      font-size: clamp(1.65rem, 2.6vw, 2.35rem);
      line-height: 1.12;
      letter-spacing: -0.04em;
      margin-bottom: 0.85rem;
    }
    .s4-page-home-v3 .s4-v3-tagit-feature-card p {
      color: rgba(232,238,247,0.78);
      font-size: 1.04rem;
      line-height: 1.68;
      margin-bottom: 1rem;
    }
    .s4-page-home-v3 .s4-v3-tagit-list {
      list-style: none;
      padding: 0;
      margin: 0 0 1.35rem;
      display: grid;
      gap: 0.55rem;
    }
    .s4-page-home-v3 .s4-v3-tagit-list li {
      color: rgba(232,238,247,0.84);
      position: relative;
      padding-left: 1.5rem;
      line-height: 1.5;
    }
    .s4-page-home-v3 .s4-v3-tagit-list li::before {
      content: "\F26E";
      font-family: "bootstrap-icons";
      position: absolute;
      left: 0;
      top: 0.05rem;
      color: var(--s4-blue-light);
    }
    .s4-page-home-v3 .s4-v3-tagit-visual {
      position: relative;
    }
    .s4-page-home-v3 .s4-v3-tagit-showcase {
      display: flex;
      flex-direction: column;
      gap: 1.15rem;
    }
    .s4-page-home-v3 .s4-v3-tagit-showcase .s4-tgv2-window {
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
    }
    .s4-page-home-v3 .s4-v3-tagit-showcase .s4-tgv2-window-body {
      min-height: 0;
      line-height: 0;
    }
    .s4-page-home-v3 .s4-v3-tagit-showcase .s4-tgv2-window-body img {
      display: block;
      width: 100%;
      height: auto;
    }
    .s4-page-home-v3 .s4-v3-tagit-label-sheet {
      margin: 0;
      padding: 0.75rem;
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
    }
    .s4-page-home-v3 .s4-v3-tagit-label-sheet img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .s4-page-home-v3 .s4-v3-mid-demo {
      padding: 0 0 5.25rem;
      background: #fff;
    }
    .s4-page-home-v3 .s4-v3-mid-demo-card {
      padding: 2.25rem;
      border-radius: var(--s4-radius-lg);
      background: linear-gradient(135deg, var(--s4-navy) 0%, #162a47 100%);
      border: 1px solid rgba(91, 197, 232, 0.28);
      box-shadow: var(--s4-shadow);
      color: #fff;
    }
    .s4-page-home-v3 .s4-v3-mid-demo-card h2 {
      color: #fff;
      font-size: clamp(1.65rem, 2.6vw, 2.25rem);
      letter-spacing: -0.035em;
      margin-bottom: 0.75rem;
    }
    .s4-page-home-v3 .s4-v3-mid-demo-card p {
      color: rgba(232, 238, 247, 0.78);
      line-height: 1.65;
      margin-bottom: 0;
    }
    .s4-page-home-v3 .s4-v3-mid-demo-card .eyebrow {
      color: var(--s4-blue-light);
    }
    .s4-page-home-v3 .s4-v3-inline-form {
      padding: 1.25rem;
      border-radius: var(--s4-radius);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .s4-page-home-v3 .s4-v3-inline-form label {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(232,238,247,0.72);
    }
    .s4-page-home-v3 .s4-v3-inline-form .form-control {
      min-height: 48px;
      border-color: rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.96);
    }
    .s4-page-home-v3 .s4-v3-inline-form small {
      color: rgba(232,238,247,0.7);
    }
    .s4-page-home-v3 .s4-v3-outcomes {
      padding: 5.25rem 0;
      background: var(--s4-bg-light);
      border-top: 1px solid var(--s4-border);
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-page-home-v3 .s4-v3-outcomes h2 {
      font-size: clamp(2rem, 3.4vw, 3rem);
      letter-spacing: -0.04em;
      margin-bottom: 1rem;
    }
    .s4-page-home-v3 .s4-v3-outcomes p {
      font-size: 1.06rem;
      line-height: 1.75;
      color: var(--s4-text-muted);
    }
    .s4-page-home-v3 .s4-v3-outcome-card {
      height: 100%;
      padding: 1.75rem;
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-page-home-v3 .s4-v3-outcome-card i {
      display: inline-flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: rgba(21,147,206,0.1);
      color: var(--s4-blue-primary);
      font-size: 1.28rem;
      margin-bottom: 1rem;
    }
    .s4-page-home-v3 .s4-v3-outcome-card h3 {
      font-size: 1.22rem;
      margin-bottom: 0.55rem;
    }
    .s4-page-home-v3 .s4-v3-outcome-card p {
      font-size: 1.02rem;
      line-height: 1.68;
      margin-bottom: 0;
    }
    .s4-page-home-v3 .s4-v3-proof {
      padding: 5.25rem 0;
      background: var(--s4-navy);
      color: #fff;
    }
    .s4-page-home-v3 .s4-v3-proof .section-header h2 {
      color: #fff;
    }
    .s4-page-home-v3 .s4-v3-proof .section-header p {
      color: rgba(232,238,247,0.72);
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
    }
    .s4-page-home-v3 .s4-v3-proof .eyebrow {
      color: var(--s4-blue-light);
    }
    .s4-page-home-v3 .s4-v3-quote {
      height: 100%;
      margin: 0;
      padding: 2rem;
      border-radius: var(--s4-radius-lg);
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
      border: 1px solid rgba(91, 197, 232, 0.18);
    }
    .s4-page-home-v3 .s4-v3-quote-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }
    .s4-page-home-v3 .s4-v3-quote-head .avatar {
      width: 50px;
      height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(91,197,232,0.16);
      color: var(--s4-blue-light);
      border: 1px solid rgba(91,197,232,0.28);
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .s4-page-home-v3 .s4-v3-quote-head .company {
      color: #fff;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--s4-radius-pill);
      padding: 0.42rem 0.8rem;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .s4-page-home-v3 .s4-v3-quote blockquote {
      color: rgba(232,238,247,0.86);
      font-size: 1.08rem;
      line-height: 1.75;
      margin: 0 0 1.4rem;
    }
    .s4-page-home-v3 .s4-v3-quote strong {
      display: block;
      color: #fff;
    }
    .s4-page-home-v3 .s4-v3-quote span {
      display: block;
      color: rgba(232,238,247,0.64);
      margin-top: 0.2rem;
    }
    .s4-page-home-v3 .s4-v3-lead {
      padding: 5.25rem 0 6rem;
      background: #fff;
    }
    .s4-page-home-v3 .s4-v3-lead h2 {
      font-size: clamp(2.1rem, 3.5vw, 3.1rem);
      letter-spacing: -0.04em;
      margin-bottom: 1rem;
    }
    .s4-page-home-v3 .s4-v3-lead p {
      color: var(--s4-text-muted);
      font-size: 1.06rem;
      line-height: 1.75;
    }
    .s4-page-home-v3 .s4-v3-form-assurance {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
      margin-top: 1.5rem;
      padding: 1rem;
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      color: var(--s4-text);
      font-size: 0.95rem;
      line-height: 1.55;
    }
    .s4-page-home-v3 .s4-v3-form-assurance i {
      color: var(--s4-blue-primary);
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    .s4-page-home-v3 .s4-v3-form-card {
      padding: 2rem;
      border-radius: var(--s4-radius-lg);
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      box-shadow: var(--s4-shadow);
    }
    .s4-page-home-v3 .s4-v3-form-card label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--s4-text-muted);
    }
    .s4-page-home-v3 .s4-v3-form-card .form-control {
      min-height: 48px;
      border-radius: var(--s4-radius-sm);
      border-color: var(--s4-border);
    }
    .s4-page-home-v3 .s4-v3-form-card textarea.form-control {
      min-height: 120px;
    }
    .s4-page-home-v3 .s4-v3-form-card small {
      color: var(--s4-text-muted);
    }
    .s4-v3-sticky-cta {
      background: linear-gradient(180deg, rgba(7, 17, 31, 0.97), rgba(10, 21, 33, 0.99));
      border-top: 2px solid rgba(91, 197, 232, 0.42);
      box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
    }
    .s4-v3-sticky-cta .copy .strong {
      font-size: 1rem;
    }
    .s4-v3-sticky-cta .btn {
      box-shadow: 0 10px 26px rgba(21,147,206,0.35);
    }
    body.s4-home-template-v3 .s4-footer {
      padding-bottom: 5.5rem;
    }
    @media (max-width: 991.98px) {
      .s4-page-home-v3 .s4-v3-hero {
        padding: 3.25rem 0 3rem;
      }
      .s4-page-home-v3 .s4-v3-hero h1 {
        font-size: clamp(2rem, 8.2vw, 2.65rem);
      }
      .s4-page-home-v3 .s4-v3-hero .lead {
        font-size: 1.05rem;
      }
      .s4-page-home-v3 .s4-v3-actions .btn {
        width: 100%;
        justify-content: center;
      }
      .s4-page-home-v3 .s4-v3-text-link {
        display: inline-flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
      }
      .s4-page-home-v3 .s4-v3-visual {
        max-width: 420px;
        margin: 0.5rem auto 0;
      }
      .s4-page-home-v3 .s4-v3-phone-stack {
        min-height: 350px;
      }
      .s4-page-home-v3 .s4-v3-phone-stack .phone-main {
        height: clamp(320px, 48vh, 390px);
        width: auto;
      }
      .s4-page-home-v3 .s4-v3-phone-stack .phone-back {
        display: none;
      }
      .s4-page-home-v3 .s4-v3-products,
      .s4-page-home-v3 .s4-v3-mid-demo,
      .s4-page-home-v3 .s4-v3-outcomes,
      .s4-page-home-v3 .s4-v3-proof,
      .s4-page-home-v3 .s4-v3-lead {
        padding: 3.75rem 0;
      }
      .s4-page-home-v3 .s4-v3-mid-demo {
        padding-top: 0;
      }
      .s4-page-home-v3 .s4-v3-product-card,
      .s4-page-home-v3 .s4-v3-outcome-card,
      .s4-page-home-v3 .s4-v3-quote,
      .s4-page-home-v3 .s4-v3-form-card {
        padding: 1.5rem;
      }
      .s4-page-home-v3 .s4-v3-mid-demo-card {
        padding: 1.5rem;
      }
      .s4-page-home-v3 .s4-v3-inline-form {
        padding: 1rem;
      }
      .s4-page-home-v3 .s4-v3-named-proof-card {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
      }
      .s4-page-home-v3 .s4-v3-tagit-feature-card {
        padding: 1.5rem;
      }
      .s4-page-home-v3 .s4-v3-tagit-showcase {
        gap: 1rem;
      }
      .s4-v3-sticky-cta .btn {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
      }
    }
    @media (max-width: 575.98px) {
      .s4-page-home-v3 .s4-v3-proof-row span {
        width: 100%;
      }
      .s4-page-home-v3 .s4-v3-visual {
        padding: 1rem;
        border-radius: 24px;
      }
      .s4-page-home-v3 .s4-v3-phone-stack {
        min-height: 315px;
        padding-top: 0.35rem;
      }
      .s4-page-home-v3 .s4-v3-phone-stack .phone-main {
        height: clamp(290px, 46vh, 350px);
        width: auto;
      }
      .s4-page-home-v3 .s4-v3-phone-stack .phone-back {
        width: min(48%, 160px);
      }
      .s4-page-home-v3 .s4-v3-visual-caption {
        font-size: 0.8rem;
      }
    }

    /* =========================================================
       ABOUT (dark section with stat cards)
       ========================================================= */
    .s4-about {
      background: var(--s4-navy);
      color: #fff;
    }
    .s4-about h2 { color: #fff; }
    .s4-about p { color: var(--s4-text-dark); }
    .s4-feature-card {
      background: var(--s4-navy-card);
      border: 1px solid var(--s4-border-dark);
      border-radius: var(--s4-radius);
      padding: 1.75rem;
      height: 100%;
    }
    .s4-feature-card .icon-wrap {
      width: 44px; height: 44px;
      background: rgba(21,147,206,0.15);
      border: 1px solid rgba(91,197,232,0.3);
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--s4-blue-light);
      font-size: 1.1rem;
      margin-bottom: 1.25rem;
    }
    .s4-feature-card h5 { color: #fff; font-size: 1.0625rem; margin-bottom: 0.5rem; font-weight: 700; }
    .s4-feature-card p { color: var(--s4-text-dark-muted); font-size: 0.9375rem; margin-bottom: 0; }

    /* =========================================================
       SOLUTION CATALOG (two big numbered cards)
       ========================================================= */
    .s4-catalog { background: var(--s4-bg-light); }
    .s4-catalog-card {
      background: #fff;
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      box-shadow: var(--s4-shadow-sm);
      height: 100%;
    }
    .s4-catalog-header {
      padding: 1.75rem 2rem;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .s4-catalog-header.enterprise { background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to)); }
    .s4-catalog-header.in-store   { background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-dark)); }
    .s4-catalog-header .icon-wrap {
      width: 44px; height: 44px;
      background: rgba(255,255,255,0.12);
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
    }
    .s4-catalog-header h4 { color: #fff; font-size: 1.25rem; margin-bottom: 0.15rem; }
    .s4-catalog-header .subtitle { font-size: 0.875rem; color: rgba(255,255,255,0.75); }
    .s4-catalog-body { padding: 1rem 2rem 2rem; }
    .s4-catalog-item {
      display: flex; gap: 1rem; padding: 1rem 0;
      border-bottom: 1px solid var(--s4-border);
      text-decoration: none;
      color: inherit;
      transition: padding-left 0.2s ease;
    }
    .s4-catalog-item:hover { padding-left: 0.5rem; color: inherit; }
    .s4-catalog-item:hover h6 { color: var(--s4-blue-primary); }
    .s4-catalog-item:last-child { border-bottom: none; }
    .s4-catalog-num {
      flex-shrink: 0;
      width: 28px; height: 28px;
      background: var(--s4-bg-light);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8125rem; font-weight: 700;
      color: var(--s4-navy);
    }
    .s4-catalog-item h6 { font-size: 1rem; margin-bottom: 0.15rem; font-weight: 700; }
    .s4-catalog-item p { font-size: 0.875rem; margin-bottom: 0; }

    /* =========================================================
       TAGIT PROMO
       ========================================================= */
    .s4-tagit-card {
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      border: 2px solid var(--s4-blue-light);
      color: #fff;
      border-radius: var(--s4-radius-lg);
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
    }
    .s4-tagit-card::before {
      content: "";
      position: absolute;
      right: -50px; bottom: -50px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(91,197,232,0.25) 0%, transparent 70%);
      border-radius: 50%;
    }
    .s4-tagit-card h4 { color: #fff; }
    .s4-tagit-card p { color: var(--s4-text-dark-muted); }
    .s4-tagit-icon {
      width: 56px; height: 56px;
      background: rgba(91,197,232,0.15);
      border: 1px solid rgba(91,197,232,0.4);
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--s4-blue-light);
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .s4-tagit-feature {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--s4-radius-sm);
      padding: 0.75rem 1rem;
      font-size: 0.9375rem;
      color: #fff;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .s4-tagit-feature i { color: var(--s4-blue-light); }
    .s4-tagit-badge {
      display: inline-block;
      background: var(--s4-blue-primary);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.4rem 0.9rem;
      border-radius: var(--s4-radius-pill);
      position: absolute;
      bottom: -14px;
      right: 2.5rem;
    }
    .s4-check-list { list-style: none; padding: 0; }
    .s4-check-list li {
      padding: 0.5rem 0;
      padding-left: 1.75rem;
      position: relative;
      color: var(--s4-text);
    }
    .s4-check-list li::before {
      content: "\F26E"; /* bi-check-circle */
      font-family: 'bootstrap-icons';
      position: absolute;
      left: 0; top: 0.5rem;
      color: var(--s4-blue-primary);
      font-size: 1rem;
    }

    /* =========================================================
       CAREERS CTA BANNER
       ========================================================= */
    .s4-careers-banner {
      background: linear-gradient(135deg, var(--s4-brand-from) 0%, var(--s4-brand-to) 100%);
      border: 2px solid var(--s4-blue-light);
      border-radius: var(--s4-radius-lg);
      padding: 3rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .s4-careers-banner h3 { color: #fff; font-size: 1.875rem; }
    .s4-careers-banner p { color: var(--s4-text-dark-muted); margin-bottom: 0; }
    .s4-hiring-pill {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(91,197,232,0.12);
      border: 1px solid rgba(91,197,232,0.35);
      color: var(--s4-blue-light);
      padding: 0.4rem 1rem;
      border-radius: var(--s4-radius-pill);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    /* =========================================================
       CONTACT
       ========================================================= */
    .s4-contact { background: var(--s4-bg-light); }
    .s4-contact h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); }
    .s4-contact-info-card {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem 0;
    }
    .s4-contact-icon {
      width: 48px; height: 48px;
      background: var(--s4-navy);
      color: #fff;
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .s4-contact-icon.green { background: var(--s4-blue-primary); }
    .s4-contact-icon.light { background: #fff; color: var(--s4-navy); border: 1px solid var(--s4-border); }
    .s4-contact-info-card .label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s4-text-muted); }
    .s4-contact-info-card .value { font-weight: 700; color: var(--s4-navy); }
    .s4-form-card {
      background: #fff;
      border-radius: var(--s4-radius-lg);
      padding: 2rem;
      box-shadow: var(--s4-shadow);
    }
    .s4-form-card label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--s4-text-muted);
      margin-bottom: 0.4rem;
    }
    .s4-form-card .form-control {
      border-radius: var(--s4-radius-sm);
      border: 1px solid var(--s4-border);
      padding: 0.6rem 0.9rem;
      font-family: var(--s4-font);
    }
    .s4-form-card .form-control:focus {
      border-color: var(--s4-blue-primary);
      box-shadow: 0 0 0 0.2rem rgba(21,147,206,0.15);
    }
    /* Lead-form submit buttons across all templates carry
       `btn btn-s4-blue btn-lg px-4 py-3` which compounds size; this rule
       brings them back to a sensible visual weight that matches the
       inputs, without having to touch 13 templates. */
    .s4-form-card .btn[type="submit"] {
      padding: 0.7rem 1.4rem;
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1.4;
    }
    .s4-form-card .btn[type="submit"] i {
      font-size: 1em;
    }

    /* =========================================================
       FOOTER
       ========================================================= */
    .s4-footer {
      background: var(--s4-navy-alt);
      color: var(--s4-text-dark);
      padding: 4rem 0 1.5rem;
    }
    .s4-footer h6 {
      color: var(--s4-blue-light);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
    .s4-footer a { color: var(--s4-text-dark-muted); text-decoration: none; display: block; padding: 0.3rem 0; font-size: 0.9375rem; }
    .s4-footer a:hover { color: var(--s4-blue-light); }
    .s4-footer .s4-logo-text .name { color: #fff; }
    .s4-footer .s4-logo-text .tag { color: var(--s4-text-dark-muted); }
    .s4-social-icons { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
    .s4-social-icons a {
      width: 38px; height: 38px;
      background: var(--s4-navy-card);
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--s4-text-dark);
      padding: 0;
    }
    .s4-social-icons a:hover { background: var(--s4-blue-primary); color: #fff; }
    .s4-footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 3rem;
      padding-top: 1.5rem;
      font-size: 0.8125rem;
    }

    /* =========================================================
       SOLUTION (VERTICAL) PAGE — hero, trust strip, value props, gallery, forms
       ========================================================= */
    .s4-vertical-hero {
      position: relative;
      min-height: 760px;
      display: flex;
      align-items: center;
      color: #fff;
      padding: 7rem 0 6rem;
      background-color: var(--s4-navy);
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      overflow: hidden;
    }
    .s4-vertical-hero::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 120px;
      background: linear-gradient(to bottom, transparent, var(--s4-bg-light));
      pointer-events: none;
    }
    .s4-vertical-hero .container { position: relative; z-index: 2; }
    .s4-vertical-hero h1 {
      color: #fff;
      font-size: clamp(2.5rem, 5vw, 4.25rem);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.03em;
      margin-bottom: 1.25rem;
    }
    .s4-vertical-hero h1 .accent { color: var(--s4-blue-light); display: block; }
    .s4-vertical-hero p.lead {
      color: var(--s4-text-dark);
      font-size: 1.1875rem;
      line-height: 1.55;
      max-width: 620px;
      margin-top: 0;
    }
    .s4-vertical-hero p.lead p { color: var(--s4-text-dark); margin-bottom: 0.5rem; }
    .s4-vertical-hero p.lead p:last-child { margin-bottom: 0; }
    .s4-hero-actions {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .s4-hero-pos {
      margin-top: 2.75rem;
    }
    .s4-hero-pos .label {
      font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--s4-text-dark-muted); margin-bottom: 0.75rem;
      font-weight: 700;
    }
    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; border: 0; padding: 0; margin: -1px;
    }

    /* Hero — compact quick-callback form (right column) */
    .s4-hero-form-card {
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(91,197,232,0.4);
      border-radius: var(--s4-radius-lg);
      padding: 2rem;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      color: var(--s4-text);
    }
    .s4-hero-form-card .s4-hf-eyebrow {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: rgba(21,147,206,0.1);
      color: var(--s4-blue-primary);
      padding: 0.3rem 0.75rem;
      border-radius: var(--s4-radius-pill);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    .s4-hero-form-card h2 {
      font-size: 1.375rem;
      line-height: 1.2;
      margin-bottom: 0.5rem;
      color: var(--s4-text);
    }
    .s4-hero-form-card .s4-hf-sub {
      color: var(--s4-text-muted);
      font-size: 0.9375rem;
      margin-bottom: 1.25rem;
    }
    .s4-hero-form-card label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--s4-text-muted);
      margin-bottom: 0.3rem;
    }
    .s4-hero-form-card .form-control {
      border-radius: var(--s4-radius-sm);
      border: 1px solid var(--s4-border);
      padding: 0.6rem 0.85rem;
      font-family: var(--s4-font);
      font-size: 0.9375rem;
    }
    .s4-hero-form-card .form-control:focus {
      border-color: var(--s4-blue-primary);
      box-shadow: 0 0 0 0.2rem rgba(21,147,206,0.15);
    }
    .s4-hero-form-card .btn { width: 100%; padding: 0.85rem 1rem; font-size: 0.95rem; }
    .s4-hero-form-card .s4-hf-fineprint {
      font-size: 0.75rem;
      color: var(--s4-text-muted);
      margin-top: 0.5rem;
      text-align: center;
    }
    .s4-hero-quick-confirm {
      text-align: center;
      padding: 0.5rem 0 0;
    }
    .s4-hero-quick-confirm .icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 56px; height: 56px;
      background: rgba(0,128,0,0.1);
      color: var(--s4-success);
      border-radius: 50%;
      font-size: 1.75rem;
      margin-bottom: 0.75rem;
    }
    .s4-hero-quick-confirm h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--s4-text); }
    .s4-hero-quick-confirm p { font-size: 0.9375rem; color: var(--s4-text-muted); margin-bottom: 0; }

    /* Trust strip (POS partner logos band) */
    .s4-trust-strip {
      background: #fff;
      padding: 2.5rem 0;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-trust-strip .label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--s4-text-muted);
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .s4-trust-logos {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2.5rem 3rem;
    }
    .s4-trust-logos img {
      max-height: 38px;
      width: auto;
      filter: grayscale(1) brightness(0.45) contrast(1.05);
      opacity: 0.75;
      transition: all 0.25s ease;
    }
    .s4-trust-logos img:hover {
      filter: none;
      opacity: 1;
    }

    /* Stats strip on solution pages */
    .s4-vertical-stats { padding: 3.5rem 0; }
    .s4-vertical-stats .s4-stat-value { font-size: 2.25rem; }

    /* Value-prop cards */
    .s4-value-props-section { padding: 6rem 0; background: #fff; }
    .s4-vp-card {
      background: var(--s4-bg-light);
      border: 1px solid transparent;
      border-radius: var(--s4-radius);
      padding: 2rem;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
    }
    .s4-vp-card:hover {
      background: #fff;
      border-color: var(--s4-border);
      box-shadow: var(--s4-shadow);
      transform: translateY(-4px);
    }
    .s4-vp-icon {
      width: 48px; height: 48px;
      background: #fff;
      border-radius: var(--s4-radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--s4-blue-primary);
      font-size: 1.35rem;
      margin-bottom: 1.25rem;
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-vp-card:hover .s4-vp-icon {
      background: var(--s4-blue-primary);
      color: #fff;
    }
    .s4-vp-label {
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: var(--s4-text);
    }
    .s4-vp-desc {
      font-size: 0.9375rem;
      margin-bottom: 1rem;
      flex-grow: 1;
    }

    /* Prose body wrapper on solution pages */
    .s4-solution-body { padding: 4.5rem 0; }
    .s4-solution-body .s4-page-content h2 {
      font-size: 1.75rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    .s4-solution-body .s4-page-content h2:first-child { margin-top: 0; }
    .s4-solution-body .s4-page-content p { font-size: 1.0625rem; }
    .s4-solution-body .s4-page-content a {
      color: var(--s4-blue-primary);
      font-weight: 600;
      text-decoration: none;
    }
    .s4-solution-body .s4-page-content a:hover {
      color: var(--s4-blue-dark);
      text-decoration: underline;
    }

    /* Featured products section */
    .s4-featured-products { padding: 6rem 0; background: var(--s4-bg-light); }
    .s4-featured-products .s4-product-row { margin-bottom: 5.5rem; }
    .s4-featured-products .s4-product-row:last-child { margin-bottom: 0; }
    .s4-featured-products .s4-product-img {
      border-radius: var(--s4-radius-lg);
      box-shadow: var(--s4-shadow-lg);
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
    }
    .s4-product-placeholder {
      width: 100%;
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      border-radius: var(--s4-radius-lg);
      display: flex; align-items: center; justify-content: center;
      color: var(--s4-blue-light);
      font-size: 4rem;
      box-shadow: var(--s4-shadow-lg);
    }

    /* "S4 in action" image gallery — mosaic grid */
    .s4-action-gallery-section {
      padding: 6rem 0;
      background: var(--s4-navy);
      color: #fff;
    }
    .s4-action-gallery-section h2 { color: #fff; }
    .s4-action-gallery-section p { color: var(--s4-text-dark); }
    .s4-action-gallery-section .section-header .eyebrow { color: var(--s4-blue-light); }
    .s4-gallery-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 180px;
      gap: 1rem;
    }
    .s4-gallery-tile {
      position: relative;
      overflow: hidden;
      border-radius: var(--s4-radius);
      background: var(--s4-navy-card);
      border: 1px solid var(--s4-border-dark);
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .s4-gallery-tile img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .s4-gallery-tile:hover img { transform: scale(1.04); }
    .s4-gallery-tile::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(10,21,33,0.85) 0%, rgba(10,21,33,0.1) 55%, transparent 100%);
      pointer-events: none;
    }
    .s4-gallery-caption {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 1rem 1.25rem;
      color: #fff;
      z-index: 1;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.3;
    }
    .s4-gallery-caption .pill {
      display: inline-block;
      background: rgba(91,197,232,0.2);
      border: 1px solid rgba(91,197,232,0.45);
      color: var(--s4-blue-light);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 0.2rem 0.55rem;
      border-radius: var(--s4-radius-pill);
      margin-bottom: 0.4rem;
    }
    /* Tile size variants for masonry feel */
    .s4-gallery-tile.span-6 { grid-column: span 6; grid-row: span 2; } /* large */
    .s4-gallery-tile.span-4 { grid-column: span 4; grid-row: span 2; } /* medium */
    .s4-gallery-tile.span-3 { grid-column: span 3; grid-row: span 1; } /* small */
    .s4-gallery-tile.tall   { grid-row: span 2; }
    .s4-gallery-tile.wide   { grid-column: span 8; grid-row: span 1; }

    /* Customer story callout */
    .s4-customer-story-section { padding: 0 0 2rem; }
    .s4-customer-story-card {
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      border: 1px solid var(--s4-blue-light);
      border-radius: var(--s4-radius-lg);
      padding: 2.5rem;
      color: #fff;
    }
    .s4-customer-story-quote {
      color: #fff;
      font-size: 1.25rem;
      line-height: 1.4;
      font-weight: 500;
      margin-bottom: 0.75rem;
    }
    .s4-customer-story-attribution {
      color: var(--s4-blue-light);
      font-size: 0.875rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
    }

    /* Lead-form section (dark gradient panel containing white form card).
       Bottom padding is 0 so the secondary-cta banner immediately below can
       sit on the same navy canvas — avoids a dead navy gap between the two. */
    .s4-lead-form-section { padding: 4.5rem 0 2.5rem; background: var(--s4-navy); }
    .s4-lead-form-panel {
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      border: 1px solid var(--s4-border-dark);
      border-radius: var(--s4-radius-lg);
      padding: 2.25rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .s4-lead-form-panel::before {
      content: "";
      position: absolute;
      right: -120px; top: -120px;
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(91,197,232,0.18) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .s4-eyebrow-on-dark { color: var(--s4-blue-light); }
    .s4-on-dark-h2 {
      color: #fff;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      line-height: 1.15;
      margin-bottom: 1rem;
    }
    .s4-on-dark-p { color: var(--s4-text-dark); margin-bottom: 0; }
    .s4-on-dark-p p { color: var(--s4-text-dark); margin-bottom: 0.5rem; }
    .s4-on-dark-p p:last-child { margin-bottom: 0; }
    .s4-on-dark-contact-row { padding: 0.75rem 0; }
    .s4-on-dark-contact-row .label {
      color: var(--s4-text-dark-muted);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .s4-on-dark-contact-row .value { color: #fff; font-weight: 600; }
    .s4-on-dark-contact-row .value a { color: #fff; text-decoration: none; }
    .s4-on-dark-contact-row .value a:hover { color: var(--s4-blue-light); }
    .s4-on-dark-contact-row .s4-contact-icon.light { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.18); }

    .s4-lead-form-section .s4-form-card {
      position: relative;
      z-index: 1;
    }
    .s4-lead-form-section .s4-form-card h3 {
      font-size: 1.375rem;
      font-weight: 700;
    }
    .s4-honeypot {
      position: absolute !important;
      left: -9999px !important;
      width: 1px !important; height: 1px !important;
      opacity: 0 !important;
    }
    .s4-form-fineprint { color: var(--s4-text-muted); font-size: 0.8125rem; }

    .s4-lead-confirmation { text-align: center; padding: 1rem 0 0.5rem; }
    .s4-lead-confirmation-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 64px; height: 64px;
      background: rgba(0,128,0,0.1);
      color: var(--s4-success);
      border-radius: 50%;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .s4-lead-confirmation h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
    .s4-lead-confirmation p { color: var(--s4-text-muted); font-size: 1rem; max-width: 460px; margin: 0 auto; }
    .s4-lead-confirmation a { color: var(--s4-blue-primary); font-weight: 600; text-decoration: none; }
    .s4-lead-confirmation a:hover { color: var(--s4-blue-dark); text-decoration: underline; }

    .s4-lead-error {
      background: rgba(245,61,61,0.08);
      border: 1px solid rgba(245,61,61,0.3);
      color: #b91c1c;
      padding: 0.75rem 1rem;
      border-radius: var(--s4-radius-sm);
      font-size: 0.9375rem;
      margin-bottom: 1.25rem;
      display: flex; align-items: center; gap: 0.5rem;
    }

    /* Secondary CTA strip — reuses .s4-careers-banner skin.
       Continues the navy canvas from .s4-lead-form-section above so the two
       read as a single contiguous "talk to S4" zone, with no padding gap and
       no padding gap before the (also-navy) footer below. */
    .s4-secondary-cta-section {
      padding: 0 0 1.5rem;
      background: var(--s4-navy);
    }
    .s4-secondary-cta-banner h3 { color: #fff; font-size: 1.875rem; }

    /* =========================================================
       SINGLE PRODUCT PAGE — hero v2, body, callout, lead form
       ========================================================= */
    .s4-product-hero {
      position: relative;
      min-height: 620px;
      padding: 7rem 0 5rem;
      color: #fff;
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      overflow: hidden;
    }
    .s4-product-hero::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 800px 400px at 85% 30%, rgba(91,197,232,0.18), transparent 60%),
        radial-gradient(ellipse 600px 600px at 15% 90%, rgba(21,147,206,0.12), transparent 60%);
      pointer-events: none;
    }
    .s4-product-hero .container { position: relative; z-index: 2; }
    .s4-product-hero h1 {
      color: #fff;
      font-size: clamp(2.25rem, 4.5vw, 3.5rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 1.25rem;
    }
    .s4-product-hero p.lead {
      color: var(--s4-text-dark);
      font-size: 1.125rem;
      line-height: 1.6;
      max-width: 580px;
      margin-bottom: 1.75rem;
    }
    .s4-product-hero .s4-hero-pill {
      background: rgba(91,197,232,0.15);
      border: 1px solid rgba(91,197,232,0.45);
      color: var(--s4-blue-light);
    }
    .s4-product-hero .s4-product-hero-img-wrap {
      position: relative;
      border-radius: var(--s4-radius-lg);
      box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(91,197,232,0.25) inset;
      overflow: hidden;
      background: var(--s4-navy-card);
      aspect-ratio: 4/3;
      transform: rotate(-1deg);
    }
    .s4-product-hero .s4-product-hero-img-wrap img {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }
    .s4-product-hero .s4-product-hero-img-wrap::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(135deg, transparent 0%, rgba(10,21,33,0.25) 100%);
      pointer-events: none;
    }
    .s4-product-hero-card-tags {
      position: absolute;
      left: 1.25rem; top: 1.25rem;
      z-index: 2;
      display: flex; flex-wrap: wrap; gap: 0.4rem;
    }
    .s4-product-hero-card-tags .pill {
      display: inline-block;
      background: rgba(10,21,33,0.85);
      color: var(--s4-blue-light);
      border: 1px solid rgba(91,197,232,0.35);
      font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
      font-weight: 700;
      padding: 0.3rem 0.6rem;
      border-radius: var(--s4-radius-pill);
    }

    /* Long-form product body — clean readable column, sized like the page rhythm */
    .s4-product-body-section {
      padding: 5rem 0;
      background: #fff;
    }
    .s4-product-body-section .s4-product-body-content {
      max-width: 1080px;
      margin: 0 auto;
      font-size: 1.0625rem;
      line-height: 1.7;
      color: var(--s4-text);
    }
    .s4-product-body-section .s4-product-body-content h2 {
      font-size: 1.75rem;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
    }
    .s4-product-body-section .s4-product-body-content h2:first-child {
      margin-top: 0;
    }
    .s4-product-body-section .s4-product-body-content h3 {
      font-size: 1.25rem;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
    }
    .s4-product-body-section .s4-product-body-content p {
      margin-bottom: 1.25rem;
    }
    .s4-product-body-section .s4-product-body-content ul,
    .s4-product-body-section .s4-product-body-content ol {
      margin-bottom: 1.25rem;
      padding-left: 1.25rem;
    }
    .s4-product-body-section .s4-product-body-content li { margin-bottom: 0.4rem; }
    .s4-product-body-section .s4-product-body-content a {
      color: var(--s4-blue-primary);
      text-decoration: none;
      font-weight: 600;
      border-bottom: 1px solid rgba(21,147,206,0.25);
      transition: all 0.2s ease;
    }
    .s4-product-body-section .s4-product-body-content a:hover {
      color: var(--s4-blue-dark);
      border-bottom-color: var(--s4-blue-primary);
    }
    .s4-product-body-section .s4-product-body-content h1:first-of-type {
      display: none; /* the page H1 already lives in the hero — hide the duplicate */
    }

    /* Inline pull-quote callout that lives within the body — replaces the
       broken-flex sticky sidebar from the old template. */
    .s4-product-inline-callout {
      max-width: 1080px;
      margin: 3rem auto;
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      color: #fff;
      border-radius: var(--s4-radius-lg);
      padding: 2.25rem 2.5rem;
      box-shadow: var(--s4-shadow);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 1.5rem;
    }
    .s4-product-inline-callout .icon {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(91,197,232,0.18);
      color: var(--s4-blue-light);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    .s4-product-inline-callout h3 {
      color: #fff; font-size: 1.25rem; margin-bottom: 0.35rem;
    }
    .s4-product-inline-callout p {
      color: var(--s4-text-dark); margin-bottom: 0; font-size: 0.9375rem;
    }
    .s4-product-inline-callout .btn { flex-shrink: 0; white-space: nowrap; }
    /* Override prose-link styling that bleeds into the spliced-in callout
       button. Without this, .s4-product-body-content a (specificity 0,3,1)
       overrides .btn-s4-blue (0,1,0) and the button text becomes blue-on-blue. */
    .s4-product-body-section .s4-product-body-content .s4-product-inline-callout .btn,
    .s4-product-body-section .s4-product-body-content .s4-product-inline-callout .btn:hover {
      color: #fff;
      border-bottom: 0;
      font-weight: 600;
    }

    /* Key features grid — better spacing/icon treatment than inline-style version */
    .s4-product-key-features { padding: 6rem 0; background: var(--s4-bg-light); }
    .s4-product-key-features .s4-feature-card {
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      padding: 2rem;
      height: 100%;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .s4-product-key-features .s4-feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--s4-shadow);
      border-color: var(--s4-blue-light);
    }
    .s4-product-key-features .s4-feature-card .s4-product-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 52px; height: 52px;
      border-radius: var(--s4-radius-sm);
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      color: var(--s4-blue-light);
      font-size: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .s4-product-key-features .s4-feature-card h5 {
      font-weight: 700; margin-bottom: 0.5rem;
    }

    /* Product gallery — masonry-ish 12-column grid mirroring the solution gallery,
       but on light background for the product page. */
    .s4-product-gallery {
      padding: 6rem 0;
      background: #fff;
      border-top: 1px solid var(--s4-border);
    }
    .s4-product-gallery .s4-pg-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 200px;
      gap: 1rem;
    }
    .s4-product-gallery .s4-pg-tile {
      position: relative;
      overflow: hidden;
      border-radius: var(--s4-radius);
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
    }
    .s4-product-gallery .s4-pg-tile img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .s4-product-gallery .s4-pg-tile:hover img { transform: scale(1.04); }
    .s4-product-gallery .s4-pg-tile.span-6 { grid-column: span 6; grid-row: span 2; }
    .s4-product-gallery .s4-pg-tile.span-4 { grid-column: span 4; grid-row: span 2; }
    .s4-product-gallery .s4-pg-tile.span-3 { grid-column: span 3; grid-row: span 1; }
    .s4-product-gallery .s4-pg-tile.wide   { grid-column: span 6; grid-row: span 1; }

    /* Compact lead form — the solution-page form sized down for product pages */
    .s4-product-lead-form { padding: 6rem 0; background: var(--s4-bg-light); }

    /* =========================================================
       S4VISION V2  (bespoke high-conversion landing page —
       all classes prefixed `.s4-v2-` to avoid collisions)
       ========================================================= */

    /* --- Hero ----------------------------------------------------- */
    .s4-v2-hero {
      position: relative;
      padding: 6.5rem 0 5rem;
      background: linear-gradient(135deg, #0a1521 0%, #0c1f33 55%, #0f2440 100%);
      color: #fff;
      overflow: hidden;
    }
    .s4-v2-hero::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 900px 500px at 80% 25%, rgba(91,197,232,0.16), transparent 60%),
        radial-gradient(ellipse 700px 700px at 5% 100%, rgba(21,147,206,0.15), transparent 60%);
      pointer-events: none;
    }
    .s4-v2-hero .container { position: relative; z-index: 2; }

    /* --- Contact page: data-viz hero (sharp <img>, no zoom animation) --- */
    .s4-page-contact .s4-contact-hero::before {
      display: none;
    }
    .s4-contact-hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      z-index: 0;
      pointer-events: none;
    }
    .s4-page-contact .s4-v2-hero::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(90deg,
        rgba(10,21,33,0.95) 0%,
        rgba(10,21,33,0.74) 30%,
        rgba(10,21,33,0.30) 60%,
        rgba(12,31,51,0.18) 100%);
    }
    @media (max-width: 991.98px) {
      .s4-page-contact .s4-v2-hero::after {
        background: linear-gradient(90deg, rgba(10,21,33,0.96) 0%, rgba(10,21,33,0.78) 55%, rgba(10,21,33,0.55) 100%);
      }
    }

    /* Contact page — white lead-form zone (not navy) */
    .s4-page-contact .s4-lead-form-section {
      background: #fff;
      border-top: 1px solid var(--s4-border);
      padding: 4.5rem 0 5rem;
    }
    .s4-page-contact .s4-lead-form-panel {
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      color: var(--s4-text);
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-page-opt-out .s4-opt-out-body { padding-top: 3rem; padding-bottom: 4rem; }
    .s4-page-opt-out .s4-opt-out-form-card {
        background: #fff;
        border: 1px solid rgba(10, 21, 33, 0.08);
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: 0 12px 40px rgba(10, 21, 33, 0.06);
    }
    .s4-page-opt-out .s4-lead-confirmation { text-align: center; }

    .s4-page-contact .s4-lead-form-panel::before {
      display: none;
    }
    .s4-page-contact .s4-eyebrow-on-dark {
      color: var(--s4-blue-primary);
    }
    .s4-page-contact .s4-on-dark-h2 {
      color: var(--s4-text);
    }
    .s4-page-contact .s4-on-dark-p,
    .s4-page-contact .s4-on-dark-p p {
      color: var(--s4-text-muted);
    }
    .s4-page-contact .s4-on-dark-contact-row .label {
      color: var(--s4-text-muted);
    }
    .s4-page-contact .s4-on-dark-contact-row .value {
      color: var(--s4-text);
    }
    .s4-page-contact .s4-on-dark-contact-row .value a {
      color: var(--s4-blue-primary);
    }
    .s4-page-contact .s4-on-dark-contact-row .value a:hover {
      color: var(--s4-blue-dark);
    }
    .s4-page-contact .s4-on-dark-contact-row .s4-contact-icon.light {
      background: #fff;
      color: var(--s4-navy);
      border: 1px solid var(--s4-border);
    }

    .s4-v2-hero h1 {
      color: #fff;
      font-size: clamp(2.5rem, 5.2vw, 4rem);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.025em;
      margin-bottom: 1.25rem;
    }
    .s4-v2-hero h1 .accent { color: var(--s4-blue-light); }
    .s4-v2-hero .s4-hero-pill {
      background: rgba(91,197,232,0.14);
      border: 1px solid rgba(91,197,232,0.4);
      color: var(--s4-blue-light);
    }
    .s4-v2-hero p.lead {
      color: rgba(232,238,247,0.85);
      font-size: 1.1875rem;
      line-height: 1.6;
      max-width: 560px;
      margin-bottom: 1.75rem;
    }
    .s4-v2-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
    .s4-v2-hero-reassure {
      display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem;
      margin-top: 1rem;
      font-size: 0.875rem;
      color: rgba(232,238,247,0.7);
    }
    .s4-v2-hero-reassure span {
      display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .s4-v2-hero-reassure i { color: var(--s4-blue-light); font-size: 1rem; }

    /* --- Dashboard mockup (CSS-only) ----------------------------- */
    .s4-v2-mock {
      position: relative;
      background: linear-gradient(180deg, #111c2d 0%, #0a1421 100%);
      border-radius: 14px;
      padding: 1rem 1.1rem 1.25rem;
      box-shadow: 0 30px 80px rgba(0,0,0,0.55),
                  0 0 0 1px rgba(91,197,232,0.18) inset,
                  0 0 0 1px rgba(255,255,255,0.04);
      color: #fff;
      font-family: var(--s4-font);
    }
    .s4-v2-mock-hero {
      transform: perspective(1500px) rotateY(-4deg) rotateX(2deg);
      transform-origin: left center;
    }
    .s4-v2-mock-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.25rem 0 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 1rem;
      font-size: 0.75rem;
    }
    .s4-v2-mock-header .left {
      display: flex; align-items: center; gap: 0.5rem;
      color: var(--s4-blue-light); font-weight: 700; letter-spacing: 0.05em;
    }
    .s4-v2-mock-header .right { color: rgba(232,238,247,0.55); font-size: 0.7rem; }
    .s4-v2-mock-header .dot {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: #36c97a;
      box-shadow: 0 0 8px rgba(54,201,122,0.6);
    }
    .s4-v2-mock-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem;
    }
    .s4-v2-mock-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .s4-v2-mock-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .s4-v2-mock-tile {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(91,197,232,0.10);
      border-radius: 10px;
      padding: 0.7rem 0.85rem;
      position: relative;
    }
    .s4-v2-mock-tile.tile-primary {
      background: linear-gradient(135deg, rgba(21,147,206,0.16), rgba(91,197,232,0.06));
      border-color: rgba(91,197,232,0.35);
    }
    .s4-v2-mock-tile .label {
      font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(232,238,247,0.5); font-weight: 700; margin-bottom: 0.25rem;
    }
    .s4-v2-mock-tile .value {
      font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
    }
    .s4-v2-mock-tile.tile-primary .value { font-size: 2rem; color: var(--s4-blue-light); }
    .s4-v2-mock-tile .delta {
      display: inline-flex; align-items: center; gap: 0.2rem;
      font-size: 0.7rem; font-weight: 700;
      padding: 0.1rem 0.35rem; border-radius: 4px;
      margin-top: 0.3rem;
    }
    .s4-v2-mock-tile .delta.up   { color: #36c97a; background: rgba(54,201,122,0.12); }
    .s4-v2-mock-tile .delta.down { color: #f15050; background: rgba(241,80,80,0.12); }
    .s4-v2-mock-spark {
      display: block; width: 100%; height: 28px; margin-top: 0.5rem;
    }
    .s4-v2-mock-bars {
      display: flex; align-items: flex-end; gap: 3px; height: 32px; margin-top: 0.5rem;
    }
    .s4-v2-mock-bars span {
      flex: 1; background: linear-gradient(180deg, var(--s4-blue-light), var(--s4-blue-primary));
      border-radius: 2px 2px 0 0; opacity: 0.85;
    }
    .s4-v2-mock-gauge {
      position: relative;
      height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px;
      margin-top: 0.5rem; overflow: hidden;
    }
    .s4-v2-mock-gauge::before {
      content: "";
      position: absolute; left: 0; top: 0; bottom: 0;
      background: linear-gradient(90deg, var(--s4-blue-primary), var(--s4-blue-light));
      border-radius: 4px;
    }
    .s4-v2-mock-gauge.g-72::before { width: 72%; }
    .s4-v2-mock-gauge.g-88::before { width: 88%; }
    .s4-v2-mock-gauge.g-45::before { width: 45%; }
    .s4-v2-mock-mini-row {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 0.7rem; color: rgba(232,238,247,0.7);
      padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .s4-v2-mock-mini-row:last-child { border-bottom: 0; }
    .s4-v2-mock-mini-row .name { font-weight: 600; color: #fff; }

    /* --- Trust strip (extended copy) ----------------------------- */
    .s4-v2-trust {
      background: #fff;
      padding: 2.5rem 0;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-v2-trust .row-top {
      text-align: center; margin-bottom: 1.25rem;
    }
    .s4-v2-trust .row-top .label {
      font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--s4-text-muted); font-weight: 700;
    }
    .s4-v2-trust .row-top .count {
      font-size: 1.125rem; color: var(--s4-text); font-weight: 700;
      margin-top: 0.35rem;
    }
    .s4-v2-trust .count .num { color: var(--s4-blue-primary); }

    /* --- Numbers strip (above-fold reinforcement) ---------------- */
    .s4-v2-numbers {
      background: var(--s4-bg-light);
      padding: 4rem 0;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-v2-numbers .stat {
      text-align: center;
    }
    .s4-v2-numbers .stat .value {
      font-size: clamp(2.25rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--s4-blue-primary);
      line-height: 1;
    }
    .s4-v2-numbers .stat .value sup {
      font-size: 0.45em; font-weight: 700; color: var(--s4-text-muted); top: -1em;
    }
    .s4-v2-numbers .stat .label {
      color: var(--s4-text-muted); font-size: 0.875rem;
      font-weight: 500; letter-spacing: 0.02em;
      margin-top: 0.5rem; max-width: 240px; margin-left: auto; margin-right: auto;
    }

    /* --- "See the dashboard" — 3-tile screenshot section --------- */
    .s4-v2-screens { padding: 6rem 0; background: var(--s4-navy); color: #fff; }
    .s4-v2-screens .section-header h2 { color: #fff; }
    .s4-v2-screens .section-header p  { color: rgba(232,238,247,0.7); }
    .s4-v2-screens .section-header .eyebrow { color: var(--s4-blue-light); }
    .s4-v2-screens-grid {
      display: grid; gap: 1.5rem;
      grid-template-columns: repeat(3, 1fr);
    }
    .s4-v2-screen-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
      border: 1px solid rgba(91,197,232,0.18);
      border-radius: var(--s4-radius);
      padding: 1.75rem;
      transition: transform 0.25s ease, border-color 0.25s ease;
    }
    .s4-v2-screen-card:hover { transform: translateY(-4px); border-color: rgba(91,197,232,0.4); }
    .s4-v2-screen-card .scard-title {
      font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--s4-blue-light); font-weight: 700; margin-bottom: 0.4rem;
    }
    .s4-v2-screen-card h3 {
      color: #fff; font-size: 1.25rem; margin-bottom: 0.75rem;
      letter-spacing: -0.01em;
    }
    .s4-v2-screen-card p {
      color: rgba(232,238,247,0.75); font-size: 0.9375rem;
      margin-bottom: 1.25rem;
    }
    .s4-v2-screen-card .s4-v2-mock {
      box-shadow: 0 12px 32px rgba(0,0,0,0.4),
                  0 0 0 1px rgba(91,197,232,0.18) inset;
    }

    /* --- Real S4Vision app screenshots (transparent device PNGs) --
       Phones are pre-cropped to the handset with their own dark bezel,
       so we just float them on the dark sections with a Vision-blue
       glow + drop shadow. Used in the hero and the screen cards. */
    .s4-vis-device {
      position: relative;
      display: flex; flex-direction: column; align-items: center;
      margin: 0;
    }
    .s4-vis-device::before {
      content: "";
      position: absolute; left: 50%; top: 46%;
      width: 88%; height: 80%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center,
        rgba(91,197,232,0.42) 0%, rgba(21,147,206,0.16) 42%, transparent 72%);
      filter: blur(28px);
      z-index: 0; pointer-events: none;
    }
    .s4-vis-device img {
      position: relative; z-index: 1;
      display: block; width: auto; max-width: 100%; height: auto;
      filter: drop-shadow(0 26px 48px rgba(0,0,0,0.55));
    }
    /* Hero device — larger, with a gentle float */
    .s4-vis-device-hero img { max-height: 620px; }
    @media (min-width: 992px) {
      .s4-vis-device-hero { animation: s4VisFloat 6.5s ease-in-out infinite alternate; }
    }
    @keyframes s4VisFloat {
      from { transform: translateY(0); }
      to   { transform: translateY(-16px); }
    }
    @media (max-width: 991.98px) {
      .s4-vis-device-hero { margin-top: 2.5rem; }
      .s4-vis-device-hero img { max-height: 480px; }
    }

    /* Card device — anchored to the bottom of each screen card */
    .s4-v2-screen-card.has-shot { display: flex; flex-direction: column; text-align: left; }
    .s4-v2-screen-card.has-shot .s4-vis-device { margin-top: auto; padding-top: 0.75rem; }
    .s4-vis-device-card img { max-height: 460px; }

    @media (prefers-reduced-motion: reduce) {
      .s4-vis-device-hero { animation: none; }
    }

    /* --- "Typical day" timeline (3-column) ----------------------- */
    .s4-v2-timeline { padding: 6rem 0; background: var(--s4-bg-light); }
    .s4-v2-timeline-grid {
      display: grid; gap: 2rem;
      grid-template-columns: repeat(3, 1fr);
    }
    .s4-v2-timeline-col {
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      padding: 1.75rem 2rem 2rem;
      position: relative;
    }
    .s4-v2-timeline-col::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--s4-blue-primary), var(--s4-blue-light));
      border-radius: var(--s4-radius) var(--s4-radius) 0 0;
    }
    .s4-v2-timeline-col .icon-wrap {
      display: inline-flex; align-items: center; justify-content: center;
      width: 52px; height: 52px;
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      color: var(--s4-blue-light);
      border-radius: var(--s4-radius-sm);
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    .s4-v2-timeline-col .time {
      font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--s4-blue-primary); font-weight: 700; margin-bottom: 0.4rem;
    }
    .s4-v2-timeline-col h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
    .s4-v2-timeline-col .ask {
      background: var(--s4-bg-light);
      border-left: 3px solid var(--s4-blue-primary);
      padding: 0.75rem 1rem;
      margin: 1rem 0;
      font-size: 0.9375rem;
      color: var(--s4-text);
      font-style: italic;
    }
    .s4-v2-timeline-col p {
      font-size: 0.9375rem; color: var(--s4-text-muted); margin-bottom: 0;
    }

    /* --- "Typical day" DAY PLAYER (s4-dayplay) ------------------- */
    /* Auto-advancing, interactive. One moment on screen at a time so the
       section reads as a glance, not a wall of text. The stage sky shifts
       dawn -> noon -> dusk per phase; metric tiles animate in; tabs carry
       an autoplay progress bar. JS controller lives in the template. */
    .s4-dp { position: relative; }

    /* phase color token */
    .s4-dp-tab[data-phase="morning"], .s4-dp-panel[data-phase="morning"] { --c: var(--s4-blue-primary); }
    .s4-dp-tab[data-phase="midday"],  .s4-dp-panel[data-phase="midday"]  { --c: var(--s4-blue-dark); }
    .s4-dp-tab[data-phase="closing"], .s4-dp-panel[data-phase="closing"] { --c: var(--s4-blue-light); }

    /* --- Tabs (also the autoplay progress indicators) --- */
    .s4-dp-tabs {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
      margin-bottom: 1.1rem;
    }
    .s4-dp-tab {
      position: relative; overflow: hidden; min-width: 0; cursor: pointer;
      display: flex; align-items: center; gap: 0.75rem; text-align: left;
      background: #fff; border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius); padding: 0.8rem 1rem 0.95rem;
      transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .s4-dp-tab:hover { border-color: var(--c); transform: translateY(-2px); }
    .s4-dp-tab.is-active { border-color: var(--c); box-shadow: var(--s4-shadow); }
    .s4-dp-tab .ic {
      flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c);
      font-size: 1.2rem; transition: background .25s ease, color .25s ease, transform .25s ease;
    }
    .s4-dp-tab.is-active .ic { background: var(--c); color: #fff; transform: scale(1.05); }
    .s4-dp-tab .tl { display: flex; flex-direction: column; min-width: 0; }
    .s4-dp-tab .tl .t {
      font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase;
      font-weight: 700; color: var(--c);
    }
    .s4-dp-tab .tl .h {
      font-size: 0.9rem; font-weight: 600; color: var(--s4-navy); line-height: 1.25;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .s4-dp-tab .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--s4-border); }
    .s4-dp-tab .prog .bar { display: block; height: 100%; width: 0; background: var(--c); }
    .s4-dp.is-started .s4-dp-tab.is-active .prog .bar { animation: s4dpFill var(--dp-dur, 6000ms) linear forwards; }
    .s4-dp.is-paused .s4-dp-tab.is-active .prog .bar { animation-play-state: paused; }
    @keyframes s4dpFill { from { width: 0; } to { width: 100%; } }

    /* --- Stage --- */
    .s4-dp-stage {
      position: relative; border-radius: var(--s4-radius-lg); overflow: hidden;
      border: 1px solid var(--s4-border); box-shadow: var(--s4-shadow); min-height: 232px;
    }
    .s4-dp-panel {
      display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.75rem; align-items: center;
      padding: 2.1rem 2.25rem;
    }
    .s4-dp-panel[hidden] { display: none; }
    .s4-dp-panel[data-phase="morning"] { background: linear-gradient(135deg, #eef8fd 0%, #ffffff 72%); }
    .s4-dp-panel[data-phase="midday"]  { background: linear-gradient(135deg, #dcecfa 0%, #f4faff 72%); background: linear-gradient(135deg, #e0effb 0%, #f5fbff 72%); }
    .s4-dp-panel[data-phase="closing"] { background: linear-gradient(135deg, var(--s4-navy) 0%, #17273f 100%); }

    .s4-dp-ask {
      font-size: 1.55rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em;
      color: var(--s4-navy); margin-bottom: 0.55rem;
    }
    .s4-dp-do { font-size: 0.95rem; color: var(--s4-text-muted); margin-bottom: 1.05rem; }
    .s4-dp-panel[data-phase="closing"] .s4-dp-ask { color: #fff; }
    .s4-dp-panel[data-phase="closing"] .s4-dp-do { color: rgba(255,255,255,0.72); }

    /* metric tiles */
    .s4-dp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
    .s4-dp-metrics .m {
      background: rgba(255,255,255,0.78); border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius-sm); padding: 0.9rem 0.6rem; text-align: center;
    }
    .s4-dp-metrics .m .v {
      display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.05;
      letter-spacing: -0.01em; color: var(--s4-navy);
    }
    .s4-dp-metrics .m .v small { font-size: 0.7rem; font-weight: 600; color: var(--s4-text-muted); margin-left: 1px; }
    .s4-dp-metrics .m .v.up { color: var(--s4-blue-primary); }
    .s4-dp-metrics .m .v.flag { color: var(--s4-blue-dark); }
    .s4-dp-metrics .m .k { display: block; font-size: 0.72rem; color: var(--s4-text-muted); margin-top: 0.3rem; line-height: 1.25; }
    .s4-dp-panel[data-phase="closing"] .m { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
    .s4-dp-panel[data-phase="closing"] .m .v { color: #fff; }
    .s4-dp-panel[data-phase="closing"] .m .v.up { color: var(--s4-blue-light); }
    .s4-dp-panel[data-phase="closing"] .m .k { color: rgba(255,255,255,0.6); }

    /* entrance: copy + tiles slide/fade in (staggered) once started */
    .s4-dp.is-started .s4-dp-panel.is-active .s4-dp-copy,
    .s4-dp.is-started .s4-dp-panel.is-active .m {
      animation: s4dpIn 0.5s cubic-bezier(.22,.61,.36,1) both;
    }
    .s4-dp.is-started .s4-dp-panel.is-active .m:nth-child(1) { animation-delay: 0.10s; }
    .s4-dp.is-started .s4-dp-panel.is-active .m:nth-child(2) { animation-delay: 0.18s; }
    .s4-dp.is-started .s4-dp-panel.is-active .m:nth-child(3) { animation-delay: 0.26s; }
    @keyframes s4dpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    /* win badge (reused) — payoff of each moment */
    .s4-vtl-win {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
      color: var(--s4-blue-dark);
      background: color-mix(in srgb, var(--c, var(--s4-blue-primary)) 12%, #fff);
      border: 1px solid color-mix(in srgb, var(--c, var(--s4-blue-primary)) 28%, #fff);
      border-radius: 999px; padding: 0.35rem 0.8rem;
    }
    .s4-vtl-win i { color: var(--c, var(--s4-blue-primary)); font-size: 1rem; }
    .s4-dp-panel[data-phase="closing"] .s4-vtl-win {
      color: #fff; background: rgba(91,197,232,0.16); border-color: rgba(91,197,232,0.4);
    }
    .s4-dp-panel[data-phase="closing"] .s4-vtl-win i { color: var(--s4-blue-light); }

    /* Closing conversion nudge (reused) */
    .s4-vtl-convert {
      margin-top: 2.5rem; text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    }
    .s4-vtl-convert-text { max-width: 640px; margin: 0; font-size: 1.15rem; color: var(--s4-text-muted); }
    .s4-vtl-convert-text strong { color: var(--s4-navy); }
    .s4-vtl-convert-btn { font-weight: 600; padding: 0.7rem 1.5rem; }

    @media (max-width: 767.98px) {
      .s4-dp-tabs { grid-template-columns: 1fr; gap: 0.5rem; }
      .s4-dp-tab .tl .h { white-space: normal; }
      .s4-dp-panel { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; }
      .s4-dp-ask { font-size: 1.25rem; }
      .s4-dp-metrics { gap: 0.5rem; }
      .s4-dp-metrics .m { padding: 0.7rem 0.4rem; }
      .s4-dp-metrics .m .v { font-size: 1.15rem; }
      .s4-dp-metrics .m .k { font-size: 0.66rem; }
      .s4-vtl-convert-text { font-size: 1.05rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .s4-dp.is-started .s4-dp-panel.is-active .s4-dp-copy,
      .s4-dp.is-started .s4-dp-panel.is-active .m { animation: none !important; }
      .s4-dp.is-started .s4-dp-tab.is-active .prog .bar { animation: none !important; width: 100%; }
    }

    /* --- Comparison table (Reports vs. S4Vision) ----------------- */
    .s4-v2-comparison { padding: 6rem 0; background: #fff; }
    .s4-v2-vs-table {
      max-width: 880px; margin: 0 auto;
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      box-shadow: var(--s4-shadow);
      border: 1px solid var(--s4-border);
    }
    .s4-v2-vs-row {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr;
      align-items: center;
    }
    .s4-v2-vs-row > div {
      padding: 1.1rem 1.25rem;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-v2-vs-row:last-child > div { border-bottom: 0; }
    .s4-v2-vs-row.head {
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      color: #fff;
    }
    .s4-v2-vs-row.head > div { border-bottom: 0; padding: 1.25rem; font-weight: 700; }
    .s4-v2-vs-row.head .col-feature { color: rgba(232,238,247,0.75); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
    .s4-v2-vs-row.head .col-old,
    .s4-v2-vs-row.head .col-new { text-align: center; font-size: 1rem; }
    .s4-v2-vs-row .col-feature { font-weight: 600; color: var(--s4-text); }
    .s4-v2-vs-row .col-old,
    .s4-v2-vs-row .col-new {
      text-align: center; font-size: 0.9375rem;
    }
    .s4-v2-vs-row .col-old   { color: var(--s4-text-muted); background: rgba(0,0,0,0.015); }
    .s4-v2-vs-row .col-new   { color: var(--s4-text); font-weight: 600; }
    .s4-v2-vs-row .col-new .yes {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(54,201,122,0.16); color: #1f9c5b;
      margin-right: 0.5rem;
    }
    .s4-v2-vs-row .col-old .no  {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(0,0,0,0.05); color: var(--s4-text-muted);
      margin-right: 0.5rem;
    }

    /* --- Mid-page conversion banner ----------------------------- */
    .s4-v2-mid-cta { padding: 5rem 0; background: #fff; }
    .s4-v2-mid-cta-card {
      background: var(--s4-navy);
      border-radius: var(--s4-radius-lg);
      padding: 2.5rem 3rem;
      color: #fff;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
      border: 1px solid rgba(91,197,232,0.25);
    }
    .s4-v2-mid-cta-card h3 {
      color: #fff; font-size: 1.625rem; margin-bottom: 0.5rem;
      letter-spacing: -0.01em;
    }
    .s4-v2-mid-cta-card p { color: rgba(232,238,247,0.75); margin-bottom: 0; font-size: 1rem; }

    /* --- Feature value-props ------------------------------------ */
    .s4-v2-vp { padding: 6rem 0; background: var(--s4-bg-light); }
    .s4-v2-vp-card {
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      padding: 1.75rem;
      height: 100%;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .s4-v2-vp-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--s4-shadow);
      border-color: var(--s4-blue-light);
    }
    .s4-v2-vp-card .ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px;
      border-radius: var(--s4-radius-sm);
      background: rgba(91,197,232,0.12);
      color: var(--s4-blue-primary);
      font-size: 1.25rem;
      margin-bottom: 1rem;
    }
    .s4-v2-vp-card h4 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.4rem; }
    .s4-v2-vp-card p { font-size: 0.9375rem; color: var(--s4-text-muted); margin-bottom: 0; }

    /* --- Lead form section overrides for v2 --------------------- */
    .s4-v2-lead-form { padding: 6rem 0 3rem; background: var(--s4-navy); }

    /* --- Sticky bottom CTA bar ---------------------------------- */
    .s4-v2-sticky-cta {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 1040;
      background: rgba(10,21,33,0.96);
      backdrop-filter: blur(8px);
      border-top: 1px solid rgba(91,197,232,0.3);
      padding: 0.875rem 1rem;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
    }
    .s4-v2-sticky-cta.visible { transform: translateY(0); }
    .s4-v2-sticky-cta .wrap {
      max-width: 1140px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem;
    }
    .s4-v2-sticky-cta .copy {
      color: #fff; font-size: 0.9375rem; line-height: 1.3;
    }
    .s4-v2-sticky-cta .copy .strong {
      font-weight: 700; color: #fff;
    }
    .s4-v2-sticky-cta .copy .sub {
      display: block; font-size: 0.75rem; color: rgba(232,238,247,0.65);
      margin-top: 0.1rem;
    }
    .s4-v2-sticky-cta .btn { flex-shrink: 0; white-space: nowrap; }

    /* =========================================================
       S4 UCHEX V2 ADDITIONS  (extends the .s4-v2-* base — only
       components specific to a HARDWARE product, where the value
       is the cabinet on the floor and the throughput math, not a
       SaaS dashboard. All classes prefixed `.s4-uxv2-`)
       ========================================================= */

    /* --- Hero product showcase (transparent product PNG on a polished frame) --- */
    .s4-uxv2-hero-product {
      position: relative;
      padding: 1rem 1rem 0;
      background:
        radial-gradient(ellipse 400px 280px at 50% 60%, rgba(91,197,232,0.22), transparent 65%),
        linear-gradient(180deg, rgba(91,197,232,0.05), rgba(10,21,33,0.0) 60%);
      border-radius: var(--s4-radius-lg);
      border: 1px solid rgba(91,197,232,0.18);
      box-shadow: 0 30px 80px rgba(0,0,0,0.55),
                  0 0 0 1px rgba(255,255,255,0.04) inset;
      min-height: 460px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
    }
    .s4-uxv2-hero-product img {
      display: block;
      max-width: 100%;
      max-height: 540px;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: calc(var(--s4-radius-lg) - 4px);
      filter: none;
    }
    .s4-uxv2-hero-callout {
      position: absolute;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(91,197,232,0.35);
      backdrop-filter: blur(8px);
      border-radius: var(--s4-radius);
      padding: 0.65rem 0.9rem;
      color: #fff;
      font-size: 0.75rem;
      line-height: 1.25;
      max-width: 170px;
      z-index: 2;
    }
    .s4-uxv2-hero-callout .num {
      display: block;
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--s4-blue-light);
      letter-spacing: -0.02em;
      line-height: 1;
      margin-bottom: 0.25rem;
    }
    .s4-uxv2-hero-callout.tl { top: 1.25rem; left: 1.25rem; }
    .s4-uxv2-hero-callout.tr { top: 1.25rem; right: 1.25rem; }
    .s4-uxv2-hero-callout.bl { bottom: 1.25rem; left: 1.25rem; }

    /* --- Customer touch-screen mockup (UCheX customer-facing UI) --- */
    .s4-uxv2-screen-mock {
      background: linear-gradient(180deg, #131e30 0%, #0a1421 100%);
      border-radius: 14px;
      padding: 0.9rem 0.95rem 1rem;
      box-shadow: 0 18px 50px rgba(0,0,0,0.45),
                  0 0 0 1px rgba(91,197,232,0.18) inset;
      color: #fff;
      font-family: var(--s4-font);
    }
    .s4-uxv2-screen-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 0.6rem; margin-bottom: 0.85rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      font-size: 0.7rem;
      letter-spacing: 0.05em;
    }
    .s4-uxv2-screen-bar .brand { font-weight: 700; color: var(--s4-blue-light); }
    .s4-uxv2-screen-bar .step { color: rgba(232,238,247,0.55); }
    .s4-uxv2-screen-prompt {
      background: linear-gradient(135deg, rgba(21,147,206,0.16), rgba(91,197,232,0.06));
      border: 1px solid rgba(91,197,232,0.35);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      margin-bottom: 0.85rem;
    }
    .s4-uxv2-screen-prompt .eyebrow {
      font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--s4-blue-light); font-weight: 700; margin-bottom: 0.35rem;
    }
    .s4-uxv2-screen-prompt h4 {
      color: #fff; font-size: 1.0625rem; margin-bottom: 0.25rem;
      letter-spacing: -0.01em;
    }
    .s4-uxv2-screen-prompt p {
      color: rgba(232,238,247,0.75); font-size: 0.8125rem; margin-bottom: 0;
    }
    .s4-uxv2-screen-row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    }
    .s4-uxv2-screen-key {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 0.5rem 0.4rem;
      text-align: center;
      font-size: 0.7rem;
      color: rgba(232,238,247,0.85);
    }
    .s4-uxv2-screen-key.primary {
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      border-color: rgba(91,197,232,0.4);
      color: #fff;
      font-weight: 700;
    }
    .s4-uxv2-screen-key .ico {
      display: block; font-size: 1.1rem; margin-bottom: 0.15rem;
    }
    .s4-uxv2-screen-total {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 0.85rem; padding-top: 0.65rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .s4-uxv2-screen-total .lbl { font-size: 0.7rem; color: rgba(232,238,247,0.55); letter-spacing: 0.08em; text-transform: uppercase; }
    .s4-uxv2-screen-total .val { font-size: 1.5rem; font-weight: 800; color: var(--s4-blue-light); letter-spacing: -0.02em; }

    /* --- Throughput math visualization (4 lanes : 1 attendant) --- */
    .s4-uxv2-throughput {
      padding: 1.25rem 1.5rem;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(91,197,232,0.15);
      border-radius: 12px;
    }
    .s4-uxv2-th-lanes {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
      margin-bottom: 0.85rem;
    }
    .s4-uxv2-th-lane {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(91,197,232,0.18);
      border-radius: 8px;
      padding: 0.65rem 0.4rem;
      text-align: center;
      font-size: 0.7rem;
      color: rgba(232,238,247,0.7);
      position: relative;
    }
    .s4-uxv2-th-lane .ico {
      display: block; font-size: 1.4rem; color: var(--s4-blue-light); margin-bottom: 0.2rem;
    }
    .s4-uxv2-th-lane .lbl { font-weight: 700; color: #fff; }
    .s4-uxv2-th-arrow {
      text-align: center;
      color: var(--s4-blue-light);
      font-size: 1.25rem;
      margin: 0.4rem 0;
    }
    .s4-uxv2-th-attendant {
      display: flex; align-items: center; justify-content: center; gap: 0.75rem;
      padding: 0.85rem;
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      border-radius: 8px;
      color: #fff;
      font-weight: 700;
      font-size: 0.875rem;
    }
    .s4-uxv2-th-attendant i { font-size: 1.5rem; }

    /* --- Hero supporting copy (tucks below the new tight subheadline) --- */
    .s4-v2-hero-supporting {
      color: rgba(232, 238, 247, 0.72);
      font-size: 0.95rem;
      line-height: 1.6;
      max-width: 540px;
      margin: 0.85rem 0 1.75rem;
    }

    /* --- Feature image gallery: 2 large "featured" rows + 2x2 compact grid --- */
    .s4-uxv2-features-mini {
      padding: 5.5rem 0 4.5rem;
      background: var(--s4-bg-light);
    }

    /* Featured row (image left, text right). On `reverse`, swap sides. */
    .s4-uxv2-fm-feature {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(15, 32, 55, 0.06);
      margin-bottom: 1.5rem;
    }
    .s4-uxv2-fm-feature.reverse { direction: rtl; }
    .s4-uxv2-fm-feature.reverse > * { direction: ltr; }

    .s4-uxv2-fm-feature .fm-feature-img {
      position: relative;
      background:
        radial-gradient(ellipse 360px 280px at 50% 55%, rgba(91,197,232,0.18), transparent 70%),
        linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      min-height: 320px;
      display: flex; align-items: center; justify-content: center;
      padding: 2.5rem 2rem;
    }
    .s4-uxv2-fm-feature .fm-feature-img img {
      max-width: 100%;
      max-height: 280px;
      width: auto; height: auto;
      object-fit: contain;
      filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
    }
    .s4-uxv2-fm-feature .fm-feature-body {
      padding: 2.5rem 2.5rem 2.5rem 0.5rem;
    }
    .s4-uxv2-fm-feature.reverse .fm-feature-body {
      padding: 2.5rem 0.5rem 2.5rem 2.5rem;
    }
    .s4-uxv2-fm-feature .fm-feature-pill {
      display: inline-flex; align-items: center;
      background: rgba(21, 147, 206, 0.1);
      color: var(--s4-blue-primary);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 0.375rem 0.85rem;
      border-radius: 999px;
      margin-bottom: 0.85rem;
    }
    .s4-uxv2-fm-feature h3 {
      font-size: clamp(1.25rem, 2.2vw, 1.625rem);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.25;
      color: var(--s4-text);
      margin-bottom: 0.85rem;
    }
    .s4-uxv2-fm-feature p {
      font-size: 1rem;
      line-height: 1.65;
      color: var(--s4-text-muted);
      margin-bottom: 1.25rem;
    }
    .s4-uxv2-fm-feature .fm-feature-bullets {
      list-style: none;
      margin: 0; padding: 0;
    }
    .s4-uxv2-fm-feature .fm-feature-bullets li {
      display: flex; align-items: flex-start; gap: 0.5rem;
      padding: 0.375rem 0;
      font-size: 0.9375rem;
      color: var(--s4-text);
    }
    .s4-uxv2-fm-feature .fm-feature-bullets li i {
      color: var(--s4-blue-primary);
      font-size: 1.0625rem;
      margin-top: 0.125rem;
      flex-shrink: 0;
    }

    /* Compact horizontal cards for the remaining 4 features */
    .s4-uxv2-fm-card {
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      overflow: hidden;
      height: 100%;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .s4-uxv2-fm-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--s4-shadow);
    }
    .s4-uxv2-fm-card.horizontal {
      display: grid;
      grid-template-columns: 168px 1fr;
      gap: 0;
    }
    .s4-uxv2-fm-card.horizontal .img-wrap {
      width: 100%; height: 100%;
      min-height: 168px;
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
    }
    .s4-uxv2-fm-card.horizontal .img-wrap img {
      max-width: 100%;
      max-height: 140px;
      width: auto; height: auto;
      object-fit: contain;
      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3));
    }
    .s4-uxv2-fm-card.horizontal .body {
      padding: 1.5rem 1.5rem;
      display: flex; flex-direction: column; justify-content: center;
    }
    .s4-uxv2-fm-card.horizontal h4 {
      font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.4rem;
      color: var(--s4-text);
    }
    .s4-uxv2-fm-card.horizontal p {
      font-size: 0.9375rem; line-height: 1.55;
      color: var(--s4-text-muted); margin-bottom: 0;
    }

    /* --- Real product-photo gallery (uniform square shots) --- */
    .s4-uxv2-photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .s4-uxv2-photo-card {
      display: flex; flex-direction: column;
      margin: 0;
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(10, 21, 33, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .s4-uxv2-photo-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--s4-shadow);
    }
    .s4-uxv2-photo-card .img {
      aspect-ratio: 1 / 1;
      background: #eef3f9;
      overflow: hidden;
    }
    .s4-uxv2-photo-card .img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .s4-uxv2-photo-card .body {
      flex: 1 1 auto;
      display: flex; flex-direction: column;
      padding: 1.4rem 1.5rem 1.6rem;
    }
    .s4-uxv2-photo-card .pill {
      align-self: flex-start;
      display: inline-flex; align-items: center;
      background: rgba(21, 147, 206, 0.1);
      color: var(--s4-blue-primary);
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.3rem 0.7rem; border-radius: 999px;
      margin-bottom: 0.8rem;
    }
    .s4-uxv2-photo-card h4 {
      font-size: 1.0625rem; font-weight: 700;
      color: var(--s4-text); margin-bottom: 0.45rem;
    }
    .s4-uxv2-photo-card p {
      font-size: 0.9375rem; line-height: 1.55;
      color: var(--s4-text-muted); margin-bottom: 0;
    }
    @media (max-width: 991.98px) {
      .s4-uxv2-photo-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 575.98px) {
      .s4-uxv2-photo-grid { grid-template-columns: 1fr; }
    }

    /* ============================================================
       S4 eXchange — sync graphic, flow diagram, platform chips
       ============================================================ */

    /* --- Hero "two channels, one pricebook" sync graphic (on dark) --- */
    .s4-xchg-sync {
      position: relative;
      display: flex; flex-direction: column;
      padding: 2.25rem 1.75rem;
      background:
        radial-gradient(ellipse 420px 300px at 50% 50%, rgba(91,197,232,0.20), transparent 65%),
        linear-gradient(180deg, rgba(91,197,232,0.05), rgba(10,21,33,0));
      border: 1px solid rgba(91,197,232,0.18);
      border-radius: var(--s4-radius-lg);
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    .s4-xchg-sync-callout {
      position: absolute; top: 1rem; right: 1rem; z-index: 2;
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(91,197,232,0.35);
      backdrop-filter: blur(8px);
      border-radius: 999px; padding: 0.4rem 0.85rem;
      color: #fff; font-size: 0.75rem; font-weight: 600;
    }
    .s4-xchg-sync-callout .num { color: var(--s4-blue-light); font-weight: 800; font-size: 1rem; }
    .s4-xchg-node {
      display: flex; align-items: center; gap: 1rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--s4-radius);
      padding: 1.1rem 1.25rem;
    }
    .s4-xchg-node .ic {
      flex: 0 0 auto;
      width: 52px; height: 52px; border-radius: 14px;
      display: grid; place-items: center;
      font-size: 1.5rem; color: var(--s4-blue-light);
      background: rgba(91,197,232,0.12);
      border: 1px solid rgba(91,197,232,0.25);
    }
    .s4-xchg-node.online .ic {
      color: #fff;
      background: var(--s4-blue-primary);
      border-color: var(--s4-blue-primary);
    }
    .s4-xchg-node .t { font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: 0.35rem; }
    .s4-xchg-node .rows { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
    .s4-xchg-node .rows span {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.8rem; color: rgba(232,238,247,0.75);
    }
    .s4-xchg-node .rows i { color: var(--s4-blue-light); }
    .s4-xchg-sync-link {
      position: relative;
      display: flex; align-items: center; justify-content: center; gap: 0.7rem;
      padding: 0.65rem 0; margin: 0.15rem 0;
    }
    .s4-xchg-sync-link::before {
      content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
      background: linear-gradient(180deg, rgba(91,197,232,0.5), rgba(91,197,232,0.12));
      transform: translateX(-50%); z-index: 0;
    }
    .s4-xchg-sync-link .bolt {
      position: relative; z-index: 1;
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center; font-size: 1.25rem; color: #fff;
      background: var(--s4-blue-primary);
      box-shadow: 0 0 0 6px rgba(21,147,206,0.15), 0 8px 24px rgba(21,147,206,0.4);
      animation: s4XchgPulse 2.4s ease-in-out infinite;
    }
    .s4-xchg-sync-link .lbl { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
    .s4-xchg-sync-link .lbl small { display: block; color: rgba(232,238,247,0.6); font-weight: 500; font-size: 0.72rem; }
    @keyframes s4XchgPulse {
      0%, 100% { box-shadow: 0 0 0 6px rgba(21,147,206,0.15), 0 8px 24px rgba(21,147,206,0.4); }
      50%      { box-shadow: 0 0 0 12px rgba(21,147,206,0.05), 0 8px 28px rgba(21,147,206,0.55); }
    }
    @media (prefers-reduced-motion: reduce) { .s4-xchg-sync-link .bolt { animation: none; } }

    /* --- "How it works" data-flow diagram --- */
    .s4-xchg-flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: stretch; gap: 1rem;
      max-width: 1000px; margin: 0 auto;
    }
    .s4-xchg-flow-node {
      text-align: center;
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: 16px;
      padding: 2rem 1.5rem;
      box-shadow: 0 1px 2px rgba(10,21,33,0.05);
    }
    .s4-xchg-flow-node .ic {
      width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem;
      display: grid; place-items: center; font-size: 1.75rem;
      color: var(--s4-blue-primary); background: rgba(21,147,206,0.1);
    }
    .s4-xchg-flow-node.accent {
      border-color: rgba(21,147,206,0.35);
      box-shadow: 0 12px 36px rgba(21,147,206,0.12);
    }
    .s4-xchg-flow-node.accent .ic { color: #fff; background: var(--s4-blue-primary); }
    .s4-xchg-flow-node h3 { font-size: 1.1rem; font-weight: 700; color: var(--s4-text); margin-bottom: 0.5rem; }
    .s4-xchg-flow-node p { font-size: 0.9rem; line-height: 1.55; color: var(--s4-text-muted); margin: 0; }
    .s4-xchg-flow-arrow { display: grid; place-items: center; color: var(--s4-blue-primary); font-size: 1.5rem; }
    .s4-xchg-flow-return {
      max-width: 1000px; margin: 1.5rem auto 0;
      display: flex; align-items: center; gap: 0.75rem;
      background: rgba(21,147,206,0.06);
      border: 1px dashed rgba(21,147,206,0.3);
      border-radius: 14px; padding: 1rem 1.25rem;
      font-size: 0.95rem; color: var(--s4-text); line-height: 1.5;
    }
    .s4-xchg-flow-return .ic { flex: 0 0 auto; color: var(--s4-blue-primary); font-size: 1.35rem; }
    @media (max-width: 767.98px) {
      .s4-xchg-flow { grid-template-columns: 1fr; }
      .s4-xchg-flow-arrow { transform: rotate(90deg); padding: 0.25rem 0; }
    }

    /* --- Supported-platform chips --- */
    .s4-xchg-platforms-sec { padding: 5rem 0; background: #fff; }
    .s4-xchg-platforms {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem;
      max-width: 760px; margin: 0 auto;
    }
    .s4-xchg-chip {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      border-radius: 999px; padding: 0.65rem 1.15rem;
      font-size: 0.95rem; font-weight: 600; color: var(--s4-text);
      box-shadow: 0 1px 2px rgba(10,21,33,0.04);
    }
    .s4-xchg-chip i { color: var(--s4-blue-primary); font-size: 1.05rem; }
    .s4-xchg-chip.more { background: transparent; border-style: dashed; color: var(--s4-text-muted); font-weight: 500; }
    .s4-xchg-chip.more i { color: var(--s4-text-muted); }

    /* ============================================================
       S4 ESL Integrations — hero visual, flow, fresh cards, proof
       ============================================================ */
    .s4-v2-hero .s4-hero-text-link {
      display: inline-flex;
      align-items: center;
      gap: 0.15rem;
      color: var(--s4-blue-light);
      font-weight: 650;
      font-size: 1rem;
      text-decoration: none;
      padding: 0.65rem 0.25rem;
    }
    .s4-v2-hero .s4-hero-text-link:hover { color: #fff; }

    .s4-esl-hero-visual {
      position: relative;
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(91, 197, 232, 0.22);
    }
    .s4-esl-hero-visual > img {
      display: block;
      width: 100%;
      height: auto;
    }
    .s4-esl-hero-badge {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.55rem 0.85rem;
      border-radius: 999px;
      background: rgba(10, 21, 33, 0.82);
      border: 1px solid rgba(91, 197, 232, 0.35);
      color: #fff;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .s4-esl-hero-badge img { width: 52px; height: auto; display: block; }

    .s4-esl-flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 1rem;
      align-items: stretch;
    }
    .s4-esl-flow-node {
      padding: 1.35rem 1.25rem;
      border-radius: var(--s4-radius);
      background: #fff;
      border: 1px solid var(--s4-border);
      box-shadow: var(--s4-shadow-sm);
      text-align: center;
    }
    .s4-esl-flow-node .ic {
      display: inline-grid;
      place-items: center;
      width: 48px; height: 48px;
      border-radius: 12px;
      background: var(--s4-bg-light);
      color: var(--s4-blue-primary);
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
    }
    .s4-esl-flow-node.accent {
      border-color: rgba(21, 147, 206, 0.35);
      background: linear-gradient(180deg, #f4fbff 0%, #fff 100%);
    }
    .s4-esl-flow-node.accent .ic { color: #fff; background: var(--s4-blue-primary); }
    .s4-esl-flow-node h3 {
      font-size: 1.08rem;
      font-weight: 700;
      margin-bottom: 0.45rem;
      color: var(--s4-text);
    }
    .s4-esl-flow-node p {
      font-size: 1rem;
      line-height: 1.58;
      color: var(--s4-text-muted);
      margin: 0;
    }
    .s4-esl-flow-arrow {
      display: grid;
      place-items: center;
      color: var(--s4-blue-primary);
      font-size: 1.5rem;
    }

    .s4-esl-fresh {
      padding: 5rem 0;
      background: var(--s4-bg-light);
    }
    .s4-esl-fresh .s4-esl-lead {
      font-size: 1.0625rem;
      line-height: 1.65;
      color: var(--s4-text-muted);
      margin-bottom: 1.35rem;
      max-width: 36rem;
    }
    .s4-esl-photo-stack {
      position: relative;
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      box-shadow: var(--s4-shadow-lg);
    }
    .s4-esl-photo-stack .photo-main {
      display: block;
      width: 100%;
      height: auto;
    }
    .s4-esl-photo-stack .photo-accent {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      width: 88px;
      height: auto;
      filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
    }
    .s4-esl-mini-card {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1.1rem 1.15rem;
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius);
      box-shadow: var(--s4-shadow-sm);
    }
    .s4-esl-mini-card .ico {
      flex: 0 0 auto;
      width: 42px; height: 42px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: var(--s4-bg-light);
      color: var(--s4-blue-primary);
      font-size: 1.15rem;
    }
    .s4-esl-mini-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 0.35rem;
      color: var(--s4-text);
    }
    .s4-esl-mini-card p {
      font-size: 1rem;
      line-height: 1.58;
      color: var(--s4-text-muted);
      margin: 0;
    }

    .s4-esl-proof {
      padding: 5rem 0;
      background: #fff;
    }
    .s4-esl-proof-card {
      height: 100%;
      padding: 1.5rem;
      border-radius: var(--s4-radius-lg);
      background: var(--s4-bg-light);
      border: 1px solid var(--s4-border);
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .s4-esl-proof-card strong {
      font-size: 1.35rem;
      color: var(--s4-blue-primary);
      line-height: 1.2;
    }
    .s4-esl-proof-card span {
      font-size: 1rem;
      line-height: 1.58;
      color: var(--s4-text-muted);
      flex: 1;
    }
    .s4-esl-proof-card a {
      font-weight: 700;
      color: var(--s4-blue-primary);
      text-decoration: none;
      font-size: 0.95rem;
    }
    .s4-esl-proof-card a:hover { text-decoration: underline; }

    .s4-esl-partner-note {
      font-size: 0.9375rem;
      color: var(--s4-text-muted);
    }

    .s4-esl-testimonial {
      padding: 5rem 0;
      background: var(--s4-bg-light);
    }
    .s4-esl-testimonial-lead {
      max-width: 720px;
      margin: 0 auto;
      color: var(--s4-text-muted);
      font-size: 1.0625rem;
      line-height: 1.65;
    }
    .s4-esl-testimonial-card {
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--s4-border);
      box-shadow: 0 12px 32px rgba(10, 21, 33, 0.08);
    }
    .s4-esl-testimonial-card .s4-video-embed {
      max-width: none;
      margin: 0;
      border-radius: 0;
      border: 0;
      box-shadow: none;
    }
    .s4-esl-testimonial-content {
      padding: 2rem 2rem 2.25rem;
    }
    .s4-esl-testimonial-quote-icon {
      display: inline-flex;
      color: var(--s4-blue-light);
      font-size: 1.75rem;
      line-height: 1;
      margin-bottom: 0.75rem;
    }
    .s4-esl-testimonial-quote {
      margin: 0 0 1.5rem;
      padding: 0;
      border: 0;
    }
    .s4-esl-testimonial-quote p {
      margin: 0;
      font-size: 1.125rem;
      line-height: 1.65;
      color: var(--s4-text);
    }
    .s4-esl-testimonial-author .name {
      font-weight: 700;
      color: var(--s4-navy);
      font-size: 1.05rem;
    }
    .s4-esl-testimonial-author .title,
    .s4-esl-testimonial-author .location {
      color: var(--s4-text-muted);
      font-size: 0.95rem;
      margin-top: 0.2rem;
    }
    .s4-esl-testimonial-author .location i {
      margin-right: 0.25rem;
      color: var(--s4-blue-primary);
    }

    .s4-esl-mid-cta {
      padding: 0 0 5rem;
      background: #fff;
    }
    .s4-esl-mid-cta-card {
      padding: 2rem 2.25rem;
      border-radius: var(--s4-radius-lg);
      background: linear-gradient(135deg, #07111f 0%, #0d1c2f 48%, #10243d 100%);
      border: 1px solid rgba(91, 197, 232, 0.22);
      color: #fff;
    }
    .s4-esl-mid-cta-card h2 {
      color: #fff;
      font-size: clamp(1.45rem, 2.4vw, 2rem);
      margin-bottom: 0.65rem;
    }
    .s4-esl-mid-cta-card p {
      color: rgba(232, 238, 247, 0.82);
      font-size: 1.04rem;
      line-height: 1.6;
      margin: 0;
      max-width: 38rem;
    }

    @media (max-width: 991.98px) {
      .s4-esl-flow { grid-template-columns: 1fr; }
      .s4-esl-flow-arrow { transform: rotate(90deg); padding: 0.25rem 0; }
      .s4-esl-mid-cta-card { text-align: center; }
      .s4-esl-mid-cta .text-lg-end { text-align: center !important; }
    }
    @media (max-width: 575.98px) {
      .s4-esl-fresh { padding: 3.5rem 0; }
      .s4-esl-proof { padding: 3.5rem 0; }
      .s4-esl-mini-card h3 { font-size: 1.02rem; }
      .s4-esl-mini-card p,
      .s4-esl-flow-node p,
      .s4-esl-proof-card span { font-size: 1rem; }
    }

    /* --- TagIT proof: real developer note + customer testimonial --- */
    .s4-tg-proof { padding: 5rem 0; background: var(--s4-bg-light); }
    .s4-tg-quote {
      height: 100%; margin: 0;
      display: flex; flex-direction: column;
      background: #fff;
      border: 1px solid var(--s4-border);
      border-top: 4px solid var(--s4-blue-primary);
      border-radius: 18px;
      padding: 2.25rem 2.25rem 2rem;
      box-shadow: 0 10px 30px rgba(10,21,33,0.06);
    }
    .s4-tg-quote-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
    .s4-tg-quote-head .ic {
      flex: 0 0 auto;
      width: 46px; height: 46px; border-radius: 12px;
      display: grid; place-items: center; font-size: 1.3rem;
      color: var(--s4-blue-primary); background: rgba(21,147,206,0.1);
    }
    .s4-tg-quote-head .lbl {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--s4-text-muted);
    }
    .s4-tg-quote blockquote {
      flex: 1 1 auto; margin: 0 0 1.5rem;
      font-size: 1.075rem; line-height: 1.7; font-style: italic;
      color: var(--s4-text);
    }
    .s4-tg-quote figcaption { display: flex; flex-direction: column; }
    .s4-tg-quote figcaption .name { font-weight: 700; color: var(--s4-text); }
    .s4-tg-quote figcaption .role { font-size: 0.9rem; color: var(--s4-text-muted); }

    /* (mid-page inline quick-callback form removed — pages now drive
       users directly to the full lead form at #lead-form) */

    /* =========================================================
       S4 TAGIT V2 ADDITIONS
       Software product — value is the UI itself. Showcase real
       screenshots + a CSS-rendered print-queue mockup, with a
       dedicated editions panel for the two licensing tiers. All
       classes prefixed `.s4-tgv2-`.
       ========================================================= */

    /* --- Hero screenshot showcase: real UI inside a polished window chrome --- */
    .s4-tgv2-hero-showcase {
      position: relative;
      background:
        radial-gradient(ellipse 460px 320px at 50% 60%, rgba(91, 197, 232, 0.25), transparent 65%),
        linear-gradient(180deg, rgba(91, 197, 232, 0.06), rgba(10, 21, 33, 0.0) 60%);
      border-radius: var(--s4-radius-lg);
      padding: 1.5rem;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                  0 0 0 1px rgba(255, 255, 255, 0.04) inset;
      overflow: visible;
    }
    .s4-tgv2-window {
      background: #0e1a2c;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55),
                  0 0 0 1px rgba(91, 197, 232, 0.18) inset;
    }
    .s4-tgv2-window-chrome {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.7rem 0.95rem;
      background: linear-gradient(180deg, #182740 0%, #131e30 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .s4-tgv2-window-chrome .dot {
      width: 11px; height: 11px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
    }
    .s4-tgv2-window-chrome .dot.r { background: #ff5f57; }
    .s4-tgv2-window-chrome .dot.y { background: #febc2e; }
    .s4-tgv2-window-chrome .dot.g { background: #28c840; }
    .s4-tgv2-window-chrome .title {
      flex: 1;
      text-align: center;
      font-size: 0.7rem;
      color: rgba(232, 238, 247, 0.6);
      font-weight: 600;
      letter-spacing: 0.05em;
      padding-right: 2.5rem;
    }
    .s4-tgv2-window-body {
      position: relative;
      background: #fff;
      min-height: 280px;
    }
    .s4-tgv2-window-body img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Floating annotation pins around the hero screenshot */
    .s4-tgv2-pin {
      position: absolute;
      z-index: 3;
      background: rgba(14, 26, 44, 0.95);
      border: 1px solid rgba(91, 197, 232, 0.45);
      backdrop-filter: blur(8px);
      border-radius: 999px;
      padding: 0.45rem 0.85rem 0.45rem 0.45rem;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 600;
      display: inline-flex; align-items: center; gap: 0.5rem;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
      max-width: 220px;
    }
    .s4-tgv2-pin .num {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      color: #fff;
      font-weight: 700;
      font-size: 0.75rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .s4-tgv2-pin .text {
      line-height: 1.25;
      color: rgba(232, 238, 247, 0.92);
    }
    .s4-tgv2-pin.p1 { top: -14px;   left: -18px; }
    .s4-tgv2-pin.p2 { top: 38%;     right: -22px; }
    .s4-tgv2-pin.p3 { bottom: -14px; left: 28%; }

    /* --- See-the-system showcase: 3 cards, real screenshots in window frames --- */
    .s4-tgv2-screen-card {
      background: linear-gradient(160deg, #131e30 0%, #0a1421 100%);
      border-radius: 18px;
      padding: 2rem 1.75rem 2rem;
      border: 1px solid rgba(91, 197, 232, 0.18);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
      display: flex; flex-direction: column;
      height: 100%;
    }
    .s4-tgv2-screen-card .scard-title {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--s4-blue-light);
      font-weight: 700;
      margin-bottom: 0.65rem;
    }
    .s4-tgv2-screen-card h3 {
      color: #fff;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin-bottom: 0.75rem;
    }
    .s4-tgv2-screen-card p {
      color: rgba(232, 238, 247, 0.7);
      font-size: 0.9375rem;
      line-height: 1.6;
      margin-bottom: 1.25rem;
    }
    .s4-tgv2-screen-card .s4-tgv2-window {
      margin-top: auto;
    }

    /* --- See-the-system: alternating feature rows --------------------
       Landscape desktop screenshots need width to stay legible, so each
       view gets a roomy half-width framed window beside its copy, with
       the media side alternating left/right for rhythm. */
    .s4-tgv2-showcase .s4-tgv2-rows {
      display: flex; flex-direction: column; gap: 3.25rem;
      max-width: 1060px; margin: 0 auto;
    }
    .s4-tgv2-row {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      gap: 2.75rem; align-items: center;
    }
    .s4-tgv2-row-reverse .s4-tgv2-row-media { order: 2; }
    .s4-tgv2-row-media { min-width: 0; }
    .s4-tgv2-row-media .s4-tgv2-window { margin-top: 0; }
    .s4-tgv2-row-copy .scard-title {
      font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--s4-blue-light); font-weight: 700; margin-bottom: 0.6rem;
    }
    .s4-tgv2-row-copy h3 {
      color: #fff; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700;
      letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.85rem;
    }
    .s4-tgv2-row-copy p {
      color: rgba(232, 238, 247, 0.72); font-size: 1rem; line-height: 1.65;
      margin-bottom: 0;
    }
    .s4-tgv2-row-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; }
    .s4-tgv2-row-tags span {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: 0.8125rem; font-weight: 600; color: rgba(232, 238, 247, 0.88);
      background: rgba(91, 197, 232, 0.10);
      border: 1px solid rgba(91, 197, 232, 0.28);
      border-radius: 999px; padding: 0.35rem 0.75rem;
    }
    .s4-tgv2-row-tags i { color: var(--s4-blue-light); font-size: 0.9rem; }

    @media (max-width: 991.98px) {
      .s4-tgv2-showcase .s4-tgv2-rows { gap: 2.5rem; }
      .s4-tgv2-row { grid-template-columns: 1fr; gap: 1.4rem; }
      .s4-tgv2-row-reverse .s4-tgv2-row-media { order: 0; }
    }

    /* --- CSS-rendered "print queue" mockup (column 3 of the showcase) --- */
    .s4-tgv2-queue {
      padding: 0.9rem 0.95rem 1rem;
      background: linear-gradient(180deg, #131e30 0%, #0a1421 100%);
      color: #fff;
      font-family: var(--s4-font);
    }
    .s4-tgv2-queue-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 0.6rem;
      margin-bottom: 0.7rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      color: rgba(232, 238, 247, 0.55);
    }
    .s4-tgv2-queue-bar .label { font-weight: 700; color: var(--s4-blue-light); letter-spacing: 0.08em; }
    .s4-tgv2-queue-row {
      display: grid;
      grid-template-columns: 28px 1fr 60px 80px;
      gap: 0.75rem;
      padding: 0.55rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.8rem;
      align-items: center;
    }
    .s4-tgv2-queue-row:last-child { border-bottom: 0; }
    .s4-tgv2-queue-row .chk {
      width: 18px; height: 18px;
      border-radius: 4px;
      background: rgba(91, 197, 232, 0.15);
      border: 1px solid rgba(91, 197, 232, 0.4);
      display: flex; align-items: center; justify-content: center;
      color: var(--s4-blue-light);
      font-size: 0.65rem;
    }
    .s4-tgv2-queue-row .chk.on {
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      border-color: rgba(91, 197, 232, 0.5);
      color: #fff;
    }
    .s4-tgv2-queue-row .item { color: rgba(232, 238, 247, 0.92); font-weight: 500; }
    .s4-tgv2-queue-row .item small { display: block; color: rgba(232, 238, 247, 0.5); font-weight: 400; font-size: 0.7rem; margin-top: 0.15rem; }
    .s4-tgv2-queue-row .qty { color: rgba(232, 238, 247, 0.7); text-align: right; font-variant-numeric: tabular-nums; }
    .s4-tgv2-queue-row .tpl {
      font-size: 0.65rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(232, 238, 247, 0.75);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      padding: 0.25rem 0.4rem;
      text-align: center;
      font-weight: 600;
    }
    .s4-tgv2-queue-foot {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 0.65rem;
      margin-top: 0.45rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.75rem;
      color: rgba(232, 238, 247, 0.65);
    }
    .s4-tgv2-queue-foot .btn-fake {
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      color: #fff;
      padding: 0.45rem 0.85rem;
      border-radius: 8px;
      font-weight: 700;
      font-size: 0.75rem;
    }

    /* --- Editions panel: 2-card commercial section --- */
    .s4-tgv2-editions {
      padding: 5.5rem 0;
      background: var(--s4-bg-light);
    }
    .s4-tgv2-editions-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
    }
    .s4-tgv2-edition-card {
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: 18px;
      padding: 2.5rem;
      position: relative;
      box-shadow: 0 4px 24px rgba(15, 32, 55, 0.06);
      display: flex; flex-direction: column;
    }
    .s4-tgv2-edition-card.featured {
      background: linear-gradient(160deg, #0c1a2e 0%, #162a47 100%);
      color: #fff;
      border-color: rgba(91, 197, 232, 0.3);
      box-shadow: 0 18px 60px rgba(15, 32, 55, 0.22);
    }
    .s4-tgv2-edition-tag {
      display: inline-flex; align-items: center;
      background: rgba(21, 147, 206, 0.1);
      color: var(--s4-blue-primary);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.4rem 0.85rem;
      border-radius: 999px;
      margin-bottom: 1rem;
      width: max-content;
    }
    .s4-tgv2-edition-card.featured .s4-tgv2-edition-tag {
      background: rgba(91, 197, 232, 0.18);
      color: var(--s4-blue-light);
    }
    .s4-tgv2-edition-card h3 {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      margin-bottom: 0.65rem;
    }
    .s4-tgv2-edition-card > p {
      font-size: 0.9375rem;
      line-height: 1.65;
      color: var(--s4-text-muted);
      margin-bottom: 1.5rem;
    }
    .s4-tgv2-edition-card.featured > p { color: rgba(232, 238, 247, 0.78); }
    .s4-tgv2-edition-list {
      list-style: none;
      margin: 0 0 1.5rem;
      padding: 0;
      flex: 1;
    }
    .s4-tgv2-edition-list li {
      display: flex; align-items: flex-start; gap: 0.5rem;
      padding: 0.4rem 0;
      font-size: 0.9375rem;
      line-height: 1.5;
      color: var(--s4-text);
    }
    .s4-tgv2-edition-card.featured .s4-tgv2-edition-list li { color: rgba(232, 238, 247, 0.92); }
    .s4-tgv2-edition-list li i {
      color: var(--s4-blue-primary);
      font-size: 1.0625rem;
      margin-top: 0.125rem;
      flex-shrink: 0;
    }
    .s4-tgv2-edition-card.featured .s4-tgv2-edition-list li i { color: var(--s4-blue-light); }
    .s4-tgv2-edition-foot {
      margin-top: auto;
      padding-top: 1rem;
      border-top: 1px solid var(--s4-border);
      font-size: 0.875rem;
      color: var(--s4-text-muted);
    }
    .s4-tgv2-edition-card.featured .s4-tgv2-edition-foot {
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(232, 238, 247, 0.7);
    }

    /* =========================================================
       S4 VISION + TAGIT — V3 POLISH
        - Visually enhanced comparison table (circle-badge icons,
          color-coded cells)
        - Stronger secondary CTA contrast on the hero
        - Compact bottom form supported with risk-reversal callout
        - Outcome-statement value-prop cards
       All v3-only adjustments are namespaced `.s4-v3-*` or scoped to
       `.s4-product-vision` / `.s4-product-tagit`.
       ========================================================= */

    /* --- Stronger hero secondary CTA — analyst flagged "blends in" --- */
    .s4-product-vision .s4-v2-hero-actions .btn-s4-outline-light,
    .s4-product-tagit .s4-v2-hero-actions .btn-s4-outline-light {
      border-color: rgba(91, 197, 232, 0.6);
      background: rgba(91, 197, 232, 0.08);
      color: #fff;
      backdrop-filter: blur(6px);
    }
    .s4-product-vision .s4-v2-hero-actions .btn-s4-outline-light:hover,
    .s4-product-vision .s4-v2-hero-actions .btn-s4-outline-light:focus,
    .s4-product-tagit .s4-v2-hero-actions .btn-s4-outline-light:hover,
    .s4-product-tagit .s4-v2-hero-actions .btn-s4-outline-light:focus {
      background: rgba(91, 197, 232, 0.18);
      border-color: var(--s4-blue-light);
      color: #fff;
    }

    /* --- Enhanced comparison table: circle-badge icons + color-coded cells
           (shared across all v3 product pages — Vision / TagIT / future)
       The v2 base ships the section with a WHITE background and dark text.
       The v3 cells use a dark-theme treatment (light text, tinted glass cells),
       so v3 flips the whole section to navy so the cells read correctly.
       Both the article-descendant and body:has() selectors below paint the
       same result — :has() lets us tighten specificity when a page-level
       ancestor (e.g. <body>) is what's marked v3. --- */
    .s4-product-vision .s4-v2-comparison,
    .s4-product-tagit  .s4-v2-comparison,
    body:has(.s4-product-vision) .s4-v2-comparison,
    body:has(.s4-product-tagit)  .s4-v2-comparison {
      background: var(--s4-navy);
      color: rgba(232, 238, 247, 0.85);
    }
    .s4-product-vision .s4-v2-comparison .section-header h2,
    .s4-product-tagit  .s4-v2-comparison .section-header h2,
    body:has(.s4-product-vision) .s4-v2-comparison .section-header h2,
    body:has(.s4-product-tagit)  .s4-v2-comparison .section-header h2 {
      color: #fff;
    }
    .s4-product-vision .s4-v2-comparison .section-header p,
    .s4-product-tagit  .s4-v2-comparison .section-header p,
    body:has(.s4-product-vision) .s4-v2-comparison .section-header p,
    body:has(.s4-product-tagit)  .s4-v2-comparison .section-header p {
      color: rgba(232, 238, 247, 0.78);
    }
    .s4-product-vision .s4-v2-comparison .section-header .eyebrow,
    .s4-product-tagit  .s4-v2-comparison .section-header .eyebrow,
    body:has(.s4-product-vision) .s4-v2-comparison .section-header .eyebrow,
    body:has(.s4-product-tagit)  .s4-v2-comparison .section-header .eyebrow {
      color: var(--s4-blue-light);
    }

    .s4-product-vision .s4-v2-vs-table,
    .s4-product-tagit  .s4-v2-vs-table {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      /* v2 base painted a light grey border that's invisible on navy —
         re-render the border + give the table a subtle dark surface. */
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(91, 197, 232, 0.18);
    }
    .s4-product-vision .s4-v2-vs-row,
    .s4-product-tagit  .s4-v2-vs-row {
      padding: 0.85rem 1.25rem;
      column-gap: 0.85rem;
      transition: background 0.2s ease;
    }
    /* v2 paints a border-bottom on each cell; with pill-styled v3 cells this
       reads as ghost-lines underneath the pills. Suppress. */
    .s4-product-vision .s4-v2-vs-row > div,
    .s4-product-tagit  .s4-v2-vs-row > div {
      border-bottom: 0;
    }
    .s4-product-vision .s4-v2-vs-row:not(.head):hover,
    .s4-product-tagit  .s4-v2-vs-row:not(.head):hover {
      background: rgba(255, 255, 255, 0.025);
    }
    .s4-product-vision .s4-v2-vs-row.head,
    .s4-product-tagit  .s4-v2-vs-row.head {
      /* v2 paints the head with a navy brand-card gradient. On v3's now-navy
         section background that looked too low-contrast — bump the inner
         gradient up so the head row reads as its own band. */
      background: linear-gradient(135deg, rgba(91, 197, 232, 0.22), rgba(14, 95, 168, 0.32));
      font-size: 0.9rem;
      letter-spacing: 0.06em;
    }
    .s4-product-vision .s4-v2-vs-row.head .col-feature,
    .s4-product-tagit  .s4-v2-vs-row.head .col-feature,
    .s4-product-vision .s4-v2-vs-row.head .col-old,
    .s4-product-tagit  .s4-v2-vs-row.head .col-old,
    .s4-product-vision .s4-v2-vs-row.head .col-new,
    .s4-product-tagit  .s4-v2-vs-row.head .col-new {
      color: #fff;
      background: transparent;
      border: 0;
      min-height: auto;
      padding: 1.25rem;
    }
    .s4-product-vision .s4-v2-vs-row .col-feature,
    .s4-product-tagit  .s4-v2-vs-row .col-feature {
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
    }
    .s4-product-vision .s4-v2-vs-row .col-old,
    .s4-product-vision .s4-v2-vs-row .col-new,
    .s4-product-tagit  .s4-v2-vs-row .col-old,
    .s4-product-tagit  .s4-v2-vs-row .col-new {
      font-size: 0.95rem;
      padding: 0.85rem 1rem 0.85rem 3.25rem;
      border-radius: 12px;
      position: relative;
      min-height: 56px;
      display: flex;
      align-items: center;
      line-height: 1.45;
    }
    /* Color-coded cells: tinted backgrounds so wins/losses pop at a glance */
    .s4-product-vision .s4-v2-vs-row:not(.head) .col-old,
    .s4-product-tagit  .s4-v2-vs-row:not(.head) .col-old {
      background: rgba(244, 67, 54, 0.06);
      color: rgba(232, 238, 247, 0.72);
      border: 1px solid rgba(244, 67, 54, 0.18);
    }
    .s4-product-vision .s4-v2-vs-row:not(.head) .col-new,
    .s4-product-tagit  .s4-v2-vs-row:not(.head) .col-new {
      background: rgba(91, 197, 232, 0.1);
      color: #fff;
      font-weight: 500;
      border: 1px solid rgba(91, 197, 232, 0.35);
    }
    /* Bigger circle-badge icons replacing the inline X / check */
    .s4-product-vision .s4-v2-vs-row .col-old .no,
    .s4-product-vision .s4-v2-vs-row .col-new .yes,
    .s4-product-tagit  .s4-v2-vs-row .col-old .no,
    .s4-product-tagit  .s4-v2-vs-row .col-new .yes {
      position: absolute;
      left: 0.85rem;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      font-weight: 700;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .s4-product-vision .s4-v2-vs-row .col-old .no,
    .s4-product-tagit  .s4-v2-vs-row .col-old .no {
      background: rgba(244, 67, 54, 0.18);
      color: #ff8a80;
      border: 1px solid rgba(244, 67, 54, 0.45);
    }
    .s4-product-vision .s4-v2-vs-row .col-new .yes,
    .s4-product-tagit  .s4-v2-vs-row .col-new .yes {
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      color: #fff;
      border: 1px solid rgba(91, 197, 232, 0.55);
    }
    /* Section header tweak — the analyst praised this content, so headline larger */
    .s4-product-vision .s4-v2-comparison .section-header h2,
    .s4-product-tagit  .s4-v2-comparison .section-header h2 {
      font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    }

    /* --- Compact bottom-form grid — 4 visible fields, more whitespace --- */
    .s4-product-vision .s4-form-card { padding: 2.5rem; }
    .s4-product-vision .s4-form-card .form-label {
      font-weight: 600;
      font-size: 0.95rem;
    }
    .s4-product-vision .s4-form-card .form-control {
      padding: 0.75rem 1rem;
      font-size: 0.95rem;
    }

    /* =========================================================
       S4 TAGIT V3 ADDITIONS
       UX-analyst tightening of v2 (75 → 85+):
        - Stronger numbers-strip labels (bigger, bolder)
        - More prominent sticky CTA
        - Better mid-page typography (16px / 1.65 line-height)
        - Risk-reversal callout (reuses .s4-v3-risk-callout)
        - Color-coded comparison cells (shared with vision-v3 above)
       ========================================================= */

    /* Numbers-strip — bolder labels so the metrics read as benefit statements */
    .s4-product-tagit .s4-v2-numbers .stat .value {
      font-size: clamp(2.5rem, 4.5vw, 3.25rem);
    }
    .s4-product-tagit .s4-v2-numbers .stat .label {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--s4-text);
      line-height: 1.5;
      letter-spacing: 0.005em;
    }

    /* Mid-page typography bump per analyst HIGH #4 (mobile readability) */
    .s4-product-tagit .s4-v2-screen-card p,
    .s4-product-tagit .s4-v2-timeline-col p,
    .s4-product-tagit .s4-v2-vp-card p,
    .s4-product-tagit .s4-tgv2-edition-card > p {
      font-size: 1rem;
      line-height: 1.65;
    }

    /* Sticky CTA — more prominent for TagIT v3 (analyst CRITICAL #2):
       brighter background, larger button, stronger shadow lift */
    .s4-product-tagit ~ .s4-v2-sticky-cta,
    .s4-product-tagit .s4-v2-sticky-cta,
    body:has(.s4-product-tagit) .s4-v2-sticky-cta {
      background: linear-gradient(180deg, rgba(10, 21, 33, 0.96), rgba(10, 21, 33, 0.98));
      border-top: 2px solid rgba(91, 197, 232, 0.35);
      box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.55);
    }
    .s4-product-tagit .s4-v2-sticky-cta .copy .strong,
    body:has(.s4-product-tagit) .s4-v2-sticky-cta .copy .strong {
      font-size: 1rem;
    }

    /* --- Risk-reversal callout — sits just above the compact form's submit row --- */
    .s4-v3-risk-callout {
      background: linear-gradient(135deg, rgba(91, 197, 232, 0.08), rgba(21, 147, 206, 0.04));
      border: 1px solid rgba(91, 197, 232, 0.25);
      border-radius: 12px;
      padding: 0.85rem 1.1rem;
      margin: 0.25rem 0 0.5rem;
      display: flex; align-items: flex-start; gap: 0.85rem;
    }
    .s4-v3-risk-callout .ico {
      width: 30px; height: 30px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: 0.95rem;
    }
    .s4-v3-risk-callout .copy {
      flex: 1;
      font-size: 0.85rem;
      line-height: 1.5;
      color: var(--s4-text);
    }
    .s4-v3-risk-callout .copy strong {
      color: var(--s4-text);
      font-weight: 700;
      display: block;
      margin-bottom: 0.15rem;
    }

    /* --- Risk-reversal promises list under the full form's left rail --- */
    .s4-uxv2-form-promises {
      list-style: none;
      margin: 1.5rem 0 0;
      padding: 0;
    }
    .s4-uxv2-form-promises li {
      display: flex; align-items: flex-start; gap: 0.65rem;
      padding: 0.5rem 0;
      font-size: 0.9375rem;
      color: rgba(232, 238, 247, 0.85);
      line-height: 1.5;
    }
    .s4-uxv2-form-promises li i {
      color: var(--s4-blue-light);
      font-size: 1.125rem;
      margin-top: 0.125rem;
      flex-shrink: 0;
    }

    /* --- v2 responsive overrides -------------------------------- */
    @media (max-width: 991.98px) {
      .s4-v2-hero { padding: 4rem 0 3rem; }
      .s4-v2-hero h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
      .s4-v2-mock-hero { transform: none; margin-top: 2.5rem; }
      .s4-v2-screens-grid { grid-template-columns: 1fr; }
      .s4-v2-timeline-grid { grid-template-columns: 1fr; }
      .s4-v2-mid-cta-card { grid-template-columns: 1fr; text-align: center; padding: 2rem; }
      .s4-v2-vs-row { grid-template-columns: 1fr; }
      .s4-v2-vs-row > div { text-align: left !important; }
      .s4-v2-vs-row.head { display: none; }
      .s4-v2-vs-row .col-old::before { content: "Today: "; color: var(--s4-text-muted); font-weight: 700; }
      .s4-v2-vs-row .col-new::before { content: "With S4Vision: "; color: var(--s4-blue-primary); font-weight: 700; }
      /* On UCheX-v2 the same .col-new::before should read "With S4 UCheX". */
      .s4-product-uchex .s4-v2-vs-row .col-new::before { content: "With S4 UCheX: "; }
      /* On TagIT pages the prefix should read "With TagIT". */
      .s4-product-tagit-v2 .s4-v2-vs-row .col-new::before,
      .s4-product-tagit .s4-v2-vs-row .col-new::before { content: "With TagIT: "; }
      /* On v3 product pages the section background is now navy, so the
         mobile-stacked prefix labels need light-mode colours instead of the
         default light-mode pair. */
      .s4-product-vision .s4-v2-vs-row .col-old::before,
      .s4-product-tagit  .s4-v2-vs-row .col-old::before {
        color: rgba(232, 238, 247, 0.65);
      }
      .s4-product-vision .s4-v2-vs-row .col-new::before,
      .s4-product-tagit  .s4-v2-vs-row .col-new::before {
        color: var(--s4-blue-light);
      }
      /* UCheX hero — center the product photo, shrink the absolute callouts */
      .s4-uxv2-hero-product { min-height: 380px; margin-top: 2.5rem; }
      .s4-uxv2-hero-callout { font-size: 0.7rem; padding: 0.5rem 0.7rem; max-width: 140px; }
      .s4-uxv2-hero-callout .num { font-size: 1.125rem; }

      /* UCheX feature gallery — collapse the wide featured rows */
      .s4-uxv2-fm-feature,
      .s4-uxv2-fm-feature.reverse {
        grid-template-columns: 1fr;
        gap: 0;
        direction: ltr;
      }
      .s4-uxv2-fm-feature .fm-feature-body,
      .s4-uxv2-fm-feature.reverse .fm-feature-body { padding: 2rem 1.75rem; }
      .s4-uxv2-fm-feature .fm-feature-img { min-height: 240px; padding: 2rem 1.5rem; }
      .s4-uxv2-fm-feature .fm-feature-img img { max-height: 200px; }

      /* TagIT — collapse the screenshot showcase + editions on tablet/mobile */
      .s4-tgv2-hero-showcase { margin-top: 2.5rem; padding: 1rem; }
      .s4-tgv2-pin { font-size: 0.7rem; max-width: 180px; padding: 0.4rem 0.7rem 0.4rem 0.4rem; }
      .s4-tgv2-pin .num { width: 20px; height: 20px; font-size: 0.7rem; }
      .s4-tgv2-pin.p1 { top: -10px; left: 0; }
      .s4-tgv2-pin.p2 { top: 35%; right: 0; }
      .s4-tgv2-pin.p3 { bottom: -10px; left: 10%; }
      .s4-tgv2-editions-grid { grid-template-columns: 1fr; gap: 1.25rem; }
      .s4-tgv2-edition-card { padding: 2rem; }
    }
    @media (max-width: 768px) {
      .s4-v2-hero,
      .s4-v2-numbers,
      .s4-v2-screens,
      .s4-v2-timeline,
      .s4-v2-comparison,
      .s4-v2-mid-cta,
      .s4-v2-vp,
      .s4-uxv2-features-mini,
      .s4-tgv2-editions { padding: 4rem 0; }
      .s4-uxv2-hero-product { min-height: 300px; }
      .s4-uxv2-hero-product img { max-height: 360px; }
      .s4-uxv2-th-lanes { grid-template-columns: repeat(2, 1fr); }
      .s4-uxv2-fm-card.horizontal { grid-template-columns: 1fr; }
      .s4-uxv2-fm-card.horizontal .img-wrap { min-height: 180px; aspect-ratio: 16/9; }
      /* Phones: hide the absolute hero pins so they don't crowd the screenshot */
      .s4-tgv2-pin { display: none; }
      /* V3 comparison table — collapse padding + stack the colored cells nicely */
      .s4-product-vision .s4-v2-vs-row,
      .s4-product-tagit  .s4-v2-vs-row { padding: 0.75rem 0.85rem; row-gap: 0.5rem; }
      .s4-product-vision .s4-v2-vs-row .col-old,
      .s4-product-vision .s4-v2-vs-row .col-new,
      .s4-product-tagit  .s4-v2-vs-row .col-old,
      .s4-product-tagit  .s4-v2-vs-row .col-new { padding: 0.75rem 0.85rem 0.75rem 3rem; min-height: 50px; }
      .s4-product-vision .s4-v2-vs-row .col-old .no,
      .s4-product-vision .s4-v2-vs-row .col-new .yes,
      .s4-product-tagit  .s4-v2-vs-row .col-old .no,
      .s4-product-tagit  .s4-v2-vs-row .col-new .yes { left: 0.65rem; width: 26px; height: 26px; }
      .s4-product-vision .s4-form-card { padding: 1.75rem; }
      /* Per UX report: mid-page mobile body text must be >= 16px. */
      .s4-v2-screen-card p,
      .s4-v2-timeline-col p,
      .s4-v2-vp-card p { font-size: 1rem; line-height: 1.6; }
      .s4-v2-mid-cta-card h3 { font-size: 1.375rem; }
      .s4-v2-sticky-cta { padding: 0.75rem 0.875rem; }
      .s4-v2-sticky-cta .copy .strong { font-size: 0.875rem; }
      .s4-v2-sticky-cta .copy .sub { display: none; }
      .s4-v2-sticky-cta .btn { padding: 0.6rem 1rem; font-size: 0.875rem; }
      /* Leave room at the page bottom so sticky bar doesn't cover the footer. */
      body.single-product-v2 .s4-footer { padding-bottom: 5.5rem; }
    }

    /* =========================================================
       RESPONSIVE TWEAKS
       ========================================================= */
    @media (max-width: 991.98px) {
      .s4-vertical-hero { min-height: auto; padding: 5rem 0 4rem; }
      .s4-hero-form-card { margin-top: 2.5rem; }
      .s4-gallery-grid { grid-auto-rows: 140px; }
      .s4-gallery-tile.span-6 { grid-column: span 12; grid-row: span 2; }
      .s4-gallery-tile.span-4 { grid-column: span 6;  grid-row: span 2; }
      .s4-gallery-tile.span-3 { grid-column: span 6;  grid-row: span 1; }
      .s4-gallery-tile.wide   { grid-column: span 12; grid-row: span 1; }

      .s4-product-hero { min-height: auto; padding: 5rem 0 4rem; }
      .s4-product-hero .s4-product-hero-img-wrap { margin-top: 2.5rem; transform: none; max-width: 480px; margin-left: auto; margin-right: auto; }
      .s4-product-inline-callout { grid-template-columns: 1fr; text-align: center; gap: 1rem; padding: 1.75rem; }
      .s4-product-inline-callout .icon { margin: 0 auto; }
      .s4-product-gallery .s4-pg-grid { grid-auto-rows: 160px; }
      .s4-product-gallery .s4-pg-tile.span-6 { grid-column: span 12; grid-row: span 2; }
      .s4-product-gallery .s4-pg-tile.span-4 { grid-column: span 6;  grid-row: span 2; }
      .s4-product-gallery .s4-pg-tile.span-3 { grid-column: span 6;  grid-row: span 1; }
      .s4-product-gallery .s4-pg-tile.wide   { grid-column: span 12; grid-row: span 1; }
    }
    @media (max-width: 768px) {
      section { padding: 4rem 0; }
      .s4-hero { min-height: 600px; padding: 5rem 0; }
      .s4-page-home .s4-hero { min-height: 420px; padding: 4rem 0; }
      .s4-page-home .s4-product-media { margin-bottom: 1rem; }
      .s4-careers-banner { padding: 2rem; }
      .s4-tagit-card { padding: 2rem; }
      .s4-form-card { padding: 1.5rem; }
      .s4-vertical-hero { padding: 4rem 0 3rem; }
      .s4-vertical-hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
      .s4-hero-form-card { padding: 1.5rem; }
      .s4-trust-strip { padding: 2rem 0; }
      .s4-trust-logos { gap: 1.5rem 2rem; }
      .s4-trust-logos img { max-height: 28px; }
      .s4-value-props-section,
      .s4-featured-products,
      .s4-action-gallery-section { padding: 4rem 0; }
      .s4-lead-form-section { padding: 4rem 0 2rem; }
      .s4-secondary-cta-section { padding: 0 0 1rem; }
      .s4-lead-form-panel { padding: 1.75rem; }
      .s4-customer-story-card { padding: 1.75rem; }
      .s4-gallery-grid { grid-auto-rows: 110px; gap: 0.75rem; }
      .s4-gallery-caption { padding: 0.65rem 0.85rem; font-size: 0.75rem; }

      .s4-product-hero { padding: 4rem 0 3rem; }
      .s4-product-hero h1 { font-size: clamp(1.875rem, 7vw, 2.25rem); }
      .s4-product-body-section,
      .s4-product-key-features,
      .s4-product-gallery,
      .s4-product-lead-form { padding: 3.5rem 0; }
      .s4-product-body-section .s4-product-body-content { font-size: 1rem; }
      .s4-product-body-section .s4-product-body-content h2 { font-size: 1.5rem; }
      .s4-product-gallery .s4-pg-grid { grid-auto-rows: 130px; gap: 0.75rem; }
      .s4-product-inline-callout { padding: 1.5rem; }
    }

    /* =========================================================
       GENERIC PRODUCT TEMPLATE (single-product.php)
       The non-hero products (everything except S4Vision / UCheX /
       TagIT) use the v3 .s4-v2-hero shell but with a simpler
       right-column treatment: a glassmorphic frame around the
       featured image, plus a fallback mark for posts with no
       featured image at all (e.g. /products/new-features/).
       ========================================================= */

    /* Right-column hero image card: glassmorphic frame inside the
       .s4-v2-hero (dark navy) so the existing v3 hero CSS does
       most of the heavy lifting. */
    .s4-v2-hero .s4-product-hero-img-wrap.s4-product-hero-img-glass {
      position: relative;
      padding: 1.25rem;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(91, 197, 232, 0.22);
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(8px);
      transform: none;
    }
    .s4-v2-hero .s4-product-hero-img-wrap.s4-product-hero-img-glass::after {
      display: none;
    }
    .s4-v2-hero .s4-product-hero-img-wrap.s4-product-hero-img-glass img {
      display: block;
      width: 100%;
      border-radius: 14px;
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    }
    .s4-v2-hero .s4-product-hero-img-wrap.s4-product-hero-img-glass .s4-product-hero-card-tags {
      top: -14px;
      right: 1rem;
    }

    /* Fallback when the post has NO featured image (e.g. new-features).
       Renders a tasteful glass placeholder with the product title so the
       hero never looks empty. */
    .s4-v2-hero .s4-product-hero-fallback {
      position: relative;
      padding: 3.5rem 2rem;
      min-height: 280px;
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(91, 197, 232, 0.18), rgba(14, 95, 168, 0.28)),
        radial-gradient(ellipse 500px 280px at 70% 30%, rgba(91, 197, 232, 0.25), transparent 65%);
      border: 1px solid rgba(91, 197, 232, 0.35);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 1rem;
      text-align: center;
    }
    .s4-v2-hero .s4-product-hero-fallback-mark {
      width: 72px; height: 72px;
      border-radius: 22px;
      background: linear-gradient(135deg, var(--s4-blue-primary), var(--s4-blue-light));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.25rem;
      box-shadow: 0 12px 32px rgba(21, 147, 206, 0.45);
    }
    .s4-v2-hero .s4-product-hero-fallback-label {
      color: #fff;
      font-weight: 700;
      font-size: 1.25rem;
      letter-spacing: -0.01em;
      max-width: 320px;
    }

    /* Bullet list section padding (no longer inline-styled in the template) */
    .s4-product-bullets {
      padding: 5rem 0;
      background: var(--s4-bg-light);
    }
    /* The "What's included" list now sits in a wider (col-lg-10) column, so
       split it into two balanced columns on larger screens to use the space
       and keep individual lines short. The section header stays full-width. */
    @media (min-width: 768px) {
      .s4-product-bullets .s4-feature-list {
        column-count: 2;
        column-gap: 3rem;
      }
      .s4-product-bullets .s4-feature-list li {
        break-inside: avoid;
      }
    }
    .s4-product-bullets + .s4-product-gallery,
    .s4-product-bullets + .s4-product-lead-form {
      padding-top: 5rem;
    }

    /* Match the value-prop section header eyebrow to v3 styling on
       the generic product pages (avoids the white-on-white eyebrow). */
    .s4-product-generic .s4-v2-vp .section-header .eyebrow,
    .s4-product-generic .s4-product-bullets .section-header .eyebrow {
      color: var(--s4-blue-primary);
    }

    /* The body section's inline callout was previously placed inside a
       light prose column; on the generic template it still works as a
       splice but we want it to read as a card, not a banner. */
    .s4-product-generic .s4-product-inline-callout {
      margin: 2.25rem 0;
    }

    /* =========================================================
       ABOUT PAGE (page-about.php)
       Bespoke conversion-funnel layout. Most sections reuse v3
       component classes; these rules cover the about-specific glue.
       ========================================================= */
    /* White band directly under the navy hero — trust, stats, value props */
    .s4-page-about .s4-about-intro {
      background: #fff;
      border-top: 1px solid var(--s4-border);
    }
    .s4-page-about .s4-about-intro .s4-v2-trust,
    .s4-page-about .s4-about-intro .s4-v2-numbers,
    .s4-page-about .s4-about-intro .s4-v2-vp {
      background: #fff;
    }
    .s4-page-about .s4-about-intro .s4-v2-trust {
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-page-about .s4-about-intro .s4-v2-numbers {
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-page-about .s4-about-intro .section-header .eyebrow {
      color: var(--s4-blue-primary);
    }
    .s4-page-about .s4-about-intro .section-header h2 {
      color: var(--s4-text);
    }
    .s4-about-midcta-section { padding: 1rem 0 5rem; background: #fff; }
    /* Product-showcase cards on the about page are links — kill the
       inherited underline/color from anchor defaults and keep the
       navy-section card treatment. */
    .s4-page-about .s4-v2-screen-card { display: block; color: inherit; }
    .s4-page-about .s4-v2-screen-card h3 { color: #fff; }
    .s4-page-about .s4-v2-screen-card:hover h3 { color: var(--s4-blue-light); }
    /* The "our story" prose section reuses .s4-product-body-section but
       wants a left-aligned section header rather than the product
       template's centered prose H1 hiding. */
    .s4-page-about .s4-product-body-section .section-header .eyebrow {
      color: var(--s4-blue-primary);
    }
    @media (max-width: 768px) {
      .s4-about-midcta-section { padding: 0.5rem 0 3.5rem; }
      /* Per UX report: mobile form inputs need >=48px touch targets and
         more legible labels. Scoped to the about page to avoid disturbing
         the other 13 lead forms. */
      .s4-page-about .s4-form-card .form-control {
        min-height: 48px;
        font-size: 1rem;
      }
      .s4-page-about .s4-form-card textarea.form-control { min-height: 96px; }
      .s4-page-about .s4-form-card label {
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
      }
    }

    /* =========================================================
       OFFICE MAP EMBED (contact + about pages)
       Navy section so it flows from the navy lead-form section
       above straight into the navy footer below. Responsive via
       aspect-ratio with an absolutely-positioned iframe.
       ========================================================= */
    .s4-map-section {
      padding: 1rem 0 5rem;
      background: var(--s4-navy);
    }
    .s4-map-section .section-header h2 { color: #fff; }
    .s4-map-section .section-header .eyebrow { color: var(--s4-blue-light); }
    .s4-map-section .section-header p { color: rgba(232, 238, 247, 0.7); }
    .s4-map-embed {
      position: relative;
      aspect-ratio: 16 / 7;
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      border: 1px solid var(--s4-border-dark);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }
    .s4-map-embed iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    @media (max-width: 768px) {
      .s4-map-section { padding: 0.5rem 0 3.5rem; }
      .s4-map-embed { aspect-ratio: 4 / 3; }
    }

    /* =========================================================
       VIMEO / VIDEO EMBED (S4Vision demo page)
       ========================================================= */
    .s4-video-section {
      padding: 4rem 0 5rem;
      background: var(--s4-bg);
    }
    .s4-video-embed {
      position: relative;
      aspect-ratio: 16 / 9;
      max-width: 960px;
      margin: 0 auto;
      border-radius: var(--s4-radius-lg);
      overflow: hidden;
      border: 1px solid var(--s4-border);
      box-shadow: 0 12px 32px rgba(10, 21, 33, 0.12);
      background: #000;
    }
    .s4-video-embed iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .s4-product-vision-demo .s4-vision-demo-back a {
      color: rgba(232, 238, 247, 0.85);
      text-decoration: none;
      font-size: 0.9375rem;
    }
    .s4-product-vision-demo .s4-vision-demo-back a:hover {
      color: #fff;
      text-decoration: underline;
    }
    .s4-product-vision-demo .s4-vision-demo-prose {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      color: var(--s4-text-muted);
    }
    .s4-product-vision-demo .s4-vision-demo-prose h1,
    .s4-product-vision-demo .s4-vision-demo-prose h2 {
      display: none;
    }
    .s4-product-vision-demo .s4-vision-demo-cta p {
      color: var(--s4-text-muted);
      font-size: 1.0625rem;
    }

    /* =========================================================
       S4VISION ORDER PAGE — Drip embedded form (543559739)
       ========================================================= */
    .s4-product-vision-order .s4-vision-order-back a {
      color: rgba(232, 238, 247, 0.85);
      text-decoration: none;
      font-size: 0.9375rem;
    }
    .s4-product-vision-order .s4-vision-order-back a:hover {
      color: #fff;
      text-decoration: underline;
    }
    .s4-vision-order-section {
      padding: 3rem 0 5rem;
      background: var(--s4-bg-light);
    }
    .s4-vision-order-card {
      padding: 2rem 2.25rem;
    }
    .s4-vision-order-prose {
      color: var(--s4-text-muted);
      font-size: 1.0625rem;
    }
    .s4-vision-order-prose h1 { display: none; }
    .s4-drip-order-form {
      font: inherit;
      width: 100%;
    }
    .s4-drip-order-form h3 {
      font-size: 1.375rem;
      font-weight: 700;
      margin: 0 0 0.75rem;
      color: var(--s4-navy);
    }
    .s4-drip-order-form > [data-drip-attribute="description"] {
      margin-bottom: 1.5rem;
      color: var(--s4-text-muted);
      font-size: 1rem;
    }
    .s4-drip-order-form > [data-drip-attribute="description"] p {
      margin-bottom: 0.5rem;
    }
    .s4-drip-order-form > [data-drip-attribute="description"] a {
      color: var(--s4-blue-primary);
      word-break: break-all;
    }
    .s4-drip-order-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem 1.25rem;
    }
    @media (min-width: 768px) {
      .s4-drip-order-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .s4-drip-order-form fieldset {
      border: none;
      margin: 0;
      padding: 0;
    }
    .s4-drip-order-form legend {
      margin: 0;
      padding: 0;
    }
    .s4-drip-order-form label {
      display: block;
      font-weight: 600;
      font-size: 0.875rem;
      margin-bottom: 0.35rem;
      color: var(--s4-navy);
    }
    .s4-drip-order-form input[type="email"],
    .s4-drip-order-form input[type="number"],
    .s4-drip-order-form input[type="tel"],
    .s4-drip-order-form input[type="text"],
    .s4-drip-order-form select {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0.625rem 0.875rem;
      font: inherit;
      font-size: 1rem;
      color: var(--s4-text);
      background: #fff;
      border: 1px solid var(--s4-border);
      border-radius: var(--s4-radius-sm);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .s4-drip-order-form input:focus,
    .s4-drip-order-form select:focus {
      outline: none;
      border-color: var(--s4-blue-primary);
      box-shadow: 0 0 0 3px rgba(21, 147, 206, 0.18);
    }
    .s4-drip-order-form input[type="checkbox"],
    .s4-drip-order-form input[type="radio"] {
      margin: 0.1875rem 0.1875rem 0 0;
      padding: 0;
    }
    .s4-drip-order-submit {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--s4-border);
    }
    .s4-drip-order-form input[type="submit"] {
      margin: 0;
      padding: 0.75rem 1.5rem;
      font: inherit;
      font-weight: 600;
      font-size: 1rem;
      color: #fff;
      background: var(--s4-blue-primary);
      border: 1px solid var(--s4-blue-primary);
      border-radius: var(--s4-radius-sm);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .s4-drip-order-form input[type="submit"]:hover {
      background: var(--s4-blue-dark);
      border-color: var(--s4-blue-dark);
      transform: translateY(-1px);
    }
    @media (max-width: 575px) {
      .s4-vision-order-card { padding: 1.5rem 1.25rem; }
    }

    /* =========================================================
       LEGAL PAGES — Cookies / Privacy / Terms
       Table styling for the cookies inventory on /cookies/.
       ========================================================= */
    .s4-cookies-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.5rem 0 2rem;
      font-size: 0.9375rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      border-radius: var(--s4-radius);
      overflow: hidden;
    }
    .s4-cookies-table thead {
      background: linear-gradient(135deg, var(--s4-brand-from), var(--s4-brand-to));
      color: #fff;
    }
    .s4-cookies-table th,
    .s4-cookies-table td {
      padding: 0.85rem 1rem;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--s4-border);
    }
    .s4-cookies-table th {
      font-weight: 600;
      font-size: 0.8125rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .s4-cookies-table tbody tr:nth-child(even) {
      background: var(--s4-bg-light);
    }
    .s4-cookies-table code {
      background: rgba(91, 197, 232, 0.12);
      color: var(--s4-blue-dark);
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      font-size: 0.85rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .s4-cookies-table tbody tr:last-child td { border-bottom: none; }
    @media (max-width: 700px) {
      .s4-cookies-table { font-size: 0.875rem; }
      .s4-cookies-table th,
      .s4-cookies-table td { padding: 0.65rem 0.75rem; }
      .s4-cookies-table code { white-space: normal; word-break: break-all; }
    }