/* ════════════════════════════════════════
       RESET
    ════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img, svg { display: block; max-width: 100%; }

    /* ════════════════════════════════════════
       DESIGN TOKENS
    ════════════════════════════════════════ */
    :root {
      --navy:       #0B163F;
      --navy-88:    rgba(11,22,63,0.88);
      --blue:       #2B6BE6;
      --blue-bright:#2175F0;
      --white:      #FFFFFF;
      --w80:        rgba(255,255,255,0.80);
      --w10:        rgba(255,255,255,0.10);
      --muted:      #6B7A99;
      --font-h:     'Space Grotesk', sans-serif;
      --font-b:     'Manrope', sans-serif;
      --nav-r:      20px;
      --pill:       40px;
      --icon-r:     8px;
      --dur:        0.2s;
    }

    /* ════════════════════════════════════════
       BASE — body text standard: Manrope 11px/600
    ════════════════════════════════════════ */
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 400;
      color: var(--navy);
      background: linear-gradient(
        180deg,
        #B8D4F0  0%,
        #C6DCF5  6%,
        #D4E6F8 14%,
        #DFECF9 24%,
        #EAF2FB 38%,
        #F2F7FD 56%,
        #F9FCFE 72%,
        #FFFFFF 100%
      );
      background-attachment: fixed;
      min-height: 100vh;
    }

    /* ════════════════════════════════════════
       SECTION CONTAINER — boxes all content
       on large screens, prevents full-width stretch
    ════════════════════════════════════════ */
    .section-inner {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* Sections use full-width bg but inner content is boxed */
    .showcase        { padding-left: 0; padding-right: 0; }
    .trusted         { padding-left: 0; padding-right: 0; }
    .solutions-section { padding-left: 0; padding-right: 0; }

    @media (max-width: 1280px) { .section-inner { padding: 0 40px; } }
    @media (max-width: 1024px) { .section-inner { padding: 0 24px; } }
    @media (max-width: 768px)  { .section-inner { padding: 0 20px; } }
    @media (max-width: 480px)  { .section-inner { padding: 0 16px; } }
    .sticky-top {
      position: sticky;
      top: 0;
      z-index: 900;
      background: transparent;
    }

    /* Header padding area — transparent, nav pill has its own glassmorphism bg */
    .hdr {
      position: relative;
      padding: 10px 32px;
      display: flex;
      justify-content: center;
      background: transparent;
    }

    /* ════════════════════════════════════════
       ANNOUNCEMENT BAR
    ════════════════════════════════════════ */
    .ann {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 9px 52px 9px 24px;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      color: var(--navy);
      position: relative;
      border-bottom: 1px solid rgba(11,22,63,0.10);
      /* Fixed blue — matches the top of the page gradient, never turns white */
      background: #B8D4F0;
      line-height: 1.5;
    }
    .ann a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
    .ann-cta {
      background: linear-gradient(145deg, #4E8CF0 0%, #2B6BE6 100%);
      color: #fff !important;
      padding: 5px 15px;
      border-radius: var(--pill);
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      text-decoration: none !important;
      transition: opacity var(--dur);
      flex-shrink: 0;
    }
    .ann-cta:hover { opacity: 0.9; }
    .ann-x {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(11,22,63,0.4);
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 4px 6px;
      transition: color var(--dur);
      font-family: var(--font-b);
    }
    .ann-x:hover { color: var(--navy); }

    /* ════════════════════════════════════════
       HEADER / NAV
    ════════════════════════════════════════ */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1400px;
      background: rgba(11,22,63,0.40);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: var(--nav-r);
      padding: 9px 22px;
      border: 1px solid rgba(255,255,255,0.13);
      /* Figma multi-layer shadow: #919191 at various opacities */
      box-shadow:
        -2px  4px 10px  0 rgba(145,145,145,0.05),
        -7px 17px 18px  0 rgba(145,145,145,0.04),
        -16px 38px 24px 0 rgba(145,145,145,0.03),
        -28px 67px 28px 0 rgba(145,145,145,0.01),
        -44px 105px 31px 0 rgba(145,145,145,0.00);
      gap: 8px;
      min-height: 52px;
    }

    /* Logo */
    .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
    .logo img { height: 16px; width: auto; }

    /* Nav links */
    .nl {
      display: flex;
      align-items: center;
      list-style: none;
      flex: 1;
      justify-content: center;
      gap: 2px;
    }
    .nl > li {
      position: static; /* menus position relative to .hdr wrapper */
    }
    .nl > li > a {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--w80);
      text-decoration: none;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      padding: 7px 12px;
      border-radius: 10px;
      transition: color var(--dur), background var(--dur);
      white-space: nowrap;
    }
    .nl > li > a:hover,
    .nl > li.mm-open > a { color: #fff; background: var(--w10); }
    .chev { width: 11px; height: 11px; transition: transform 0.22s; opacity: 0.6; flex-shrink: 0; }
    .nl > li.mm-open > a .chev { transform: rotate(180deg); opacity: 1; }

    /* ── MEGA MENU
       position: absolute inside .hdr which is the reference container
       This means no gap — menu is physically connected to the nav
    ── */
    .hdr { position: relative; } /* reference for absolute menus */

    .mm {
      display: none;
      position: absolute;
      top: 100%; /* flush below .hdr bottom */
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(11,22,63,0.15), 0 4px 14px rgba(11,22,63,0.07);
      padding: 20px 18px 16px;
      z-index: 9999;
      /* Small top margin for visual breathing room */
      margin-top: 6px;
    }
    .mm.mm-visible {
      display: block;
      animation: mmFadeIn 0.15s ease forwards;
    }

    @keyframes mmFadeIn {
      from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .mm-p { width: min(960px, 96vw); }
    .mm-s { width: min(620px, 96vw); }
    .g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; }
    .g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; }
    .mh {
      font-family: var(--font-h);
      font-size: 10px !important;
      font-weight: 700;
      color: #9AAABF;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 0 10px 8px;
      border-bottom: 1px solid #EFF2FA;
      margin-bottom: 4px;
      grid-column: 1 / -1;
    }
    .mi {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.15s;
    }
    .mi:hover { background: #F1F5FF; }
    .mico {
      width: 32px;
      height: 32px;
      border-radius: var(--icon-r);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
    }
    .mt { flex: 1; min-width: 0; }
    .mm .mt-u, .mt-u {
      display: block;
      font-family: var(--font-h);
      font-size: 10px !important;
      font-weight: 700;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 2px;
    }
    .mt-n {
      display: block;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 2px;
    }
    .mm .mt-d, .mt-d {
      display: block;
      font-family: var(--font-b);
      font-size: 11px !important;
      font-weight: 500;
      color: var(--navy-88);
      line-height: 1.4;
    }

    /* Icon bg colours */
    .ia{background:#FFF0E6} .ib{background:#FFF8E1} .ic{background:#E8EEFF}
    .id{background:#F3EBFF} .ie{background:#E6F4FF} .ig{background:#E8FFE8}
    .ih{background:#FFE8E8} .ii{background:#FFE6F4} .ij{background:#E6FFF4}
    .ik{background:#E8EDFF} .il{background:#F4E6FF} .im{background:#E6F0FF}
    .in{background:#E0E8FF} .io{background:#F0EFE0} .ip{background:#FFE6E6}
    .iq{background:#E6FFEE} .ir{background:#F0F0F0} .is{background:#EAFFEA}
    .it{background:#FFE8F4} .iu{background:#F3EBFF} .iv{background:#FFE8E8}
    .iw{background:#FFF0E6}

    /* Nav right */
    .nr { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .lb {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--w80);
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      padding: 6px 11px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.22);
      background: transparent;
      cursor: pointer;
      transition: background var(--dur), color var(--dur);
      white-space: nowrap;
    }
    .lb:hover { background: var(--w10); color: #fff; }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
    }
    .hamburger span {
      display: block;
      width: 20px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: transform 0.25s, opacity 0.25s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ════════════════════════════════════════
       MOBILE MENU
    ════════════════════════════════════════ */
    /* ── Mobile menu: floating card ── */
    .mob-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 800;
      pointer-events: none;
    }
    /* Blurred page overlay behind card */
    .mob-menu::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(160,185,220,0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .mob-menu.open {
      pointer-events: auto;
    }
    .mob-menu.open::before { opacity: 1; }
    /* The floating card itself */
    .mob-card {
      position: absolute;
      top: 48px;
      left: 12px;
      right: 12px;
      max-height: calc(100vh - 72px);
      background: rgba(70,90,130,0.82);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-radius: 20px;
      padding: 20px 24px 28px;
      transform: translateY(-12px) scale(0.97);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .mob-menu.open .mob-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .mob-inner { padding: 24px 24px 40px; min-height: 100%; }
    .mob-menu a,
    .mob-menu button.mob-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      text-decoration: none;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 20px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: none;
      cursor: pointer;
      text-align: left;
    }
    .mob-chev { width: 14px; height: 14px; transition: transform 0.22s; opacity: 0.5; flex-shrink: 0; }
    .mob-link.open .mob-chev { transform: rotate(180deg); opacity: 1; }
    .mob-sub { display: none; padding: 4px 0 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .mob-sub.open { display: block; }
    .mob-sub a {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      padding: 9px 0;
      border-bottom: none;
    }
    .mob-cta {
      display: flex !important;
      align-items: center;
      justify-content: center !important;
      margin-top: 24px;
      background: var(--blue) !important;
      color: #fff !important;
      padding: 14px 32px !important;
      border-radius: var(--pill) !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      text-decoration: none !important;
      border: none !important;
    }
    .mob-close {
      position: fixed;
      top: 16px;
      right: 16px;
      background: rgba(255,255,255,0.1);
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #fff;
      font-size: 18px;
      font-family: var(--font-b);
      z-index: 801;
    }

    /* ════════════════════════════════════════
       GLOBAL HEADING SCALE
       h2 → per-section (36px / 43px / 700)
       h3 → 28px / 36px / 700
       h4 → 22px / 30px / 700
       h5 → 18px / 26px / 600
       h6 → 15px / 22px / 600
       All: Space Grotesk (--font-h)
    ════════════════════════════════════════ */
    h3 {
      font-family: var(--font-h);
      font-size: 28px;
      font-weight: 700;
      line-height: 36px;
      letter-spacing: -0.2px;
      color: var(--navy);
      margin: 0;
    }
    h4 {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 700;
      line-height: 30px;
      letter-spacing: -0.1px;
      color: var(--navy);
      margin: 0;
    }
    h5 {
      font-family: var(--font-h);
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
      letter-spacing: 0;
      color: var(--navy);
      margin: 0;
    }
    h6 {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 600;
      line-height: 22px;
      letter-spacing: 0;
      color: var(--navy);
      margin: 0;
    }

    /* ── Mobile heading scale ≤768px ── */
    @media (max-width: 768px) {
      h2,
      .trusted-title, .ai-heading, .trust-heading,
      .stats-heading, .contact-heading, .footer-cta-heading,
      .sol-heading, .msol-heading {
        font-size: 24px !important;
        line-height: 31px !important;
        font-weight: 700 !important;
        font-family: var(--font-h) !important;
        letter-spacing: -0.2px !important;
      }
      .sol-title, .sol-title-blue,
      .msol-title-main, .msol-title-blue {
        font-size: 24px !important;
        line-height: 31px !important;
        font-weight: 700 !important;
        font-family: var(--font-h) !important;
        letter-spacing: -0.2px !important;
      }
      h3, .sol-card-title, .msol-title {
        font-size: 20px !important;
        line-height: 28px !important;
        font-weight: 700 !important;
        font-family: var(--font-h) !important;
        letter-spacing: -0.1px !important;
      }
      h4 {
        font-size: 18px !important;
        line-height: 25px !important;
        font-weight: 700 !important;
      }
      h5 {
        font-size: 16px !important;
        line-height: 22px !important;
        font-weight: 600 !important;
      }
      h6 {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
      }
    }


    /* ── Mobile language selector — inline, no absolute positioning ── */
    .mob-lang {
      margin-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 16px;
    }
    .mob-lang-btn {
      display: flex;
      align-items: center;
      width: 100%;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 40px;
      padding: 13px 20px;
      color: #fff;
      font-family: var(--font-b);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      gap: 0;
    }
    .mob-lang-btn span {
      flex: 1;
      font-size: 15px !important;
      font-weight: 600 !important;
      color: #fff !important;
      text-align: left;
    }
    .mob-lang-btn img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      margin-left: 8px;
      order: 2;
    }
    .mob-lang-chev {
      flex-shrink: 0;
      transition: transform 0.22s ease;
      opacity: 0.7;
      order: 3;
      margin-left: 10px;
    }
    .mob-lang.open .mob-lang-chev { transform: rotate(180deg); opacity: 1; }

    /* The inline list — hidden by default, shown when open */
    .mob-lang-list {
      display: none;
      flex-direction: column;
      margin-top: 8px;
      background: rgba(40,60,100,0.9);
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      overflow: hidden;
    }
    .mob-lang.open .mob-lang-list { display: flex; }
    .mob-lang-opt {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      padding: 13px 20px;
      color: rgba(255,255,255,0.8) !important;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none !important;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: background 0.15s;
    }
    .mob-lang-opt:last-child { border-bottom: none; }
    .mob-lang-opt:hover,
    .mob-lang-opt.active { background: rgba(255,255,255,0.1); color: #fff !important; font-weight: 600; }
    .mob-lang-opt span {
      flex: 1;
      text-align: left;
      font-size: 14px !important;
      color: inherit !important;
    }
    .mob-lang-opt img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      margin-left: 10px;
    }

    /* ════════════════════════════════════════
       HERO SECTION
    ════════════════════════════════════════ */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: calc(60vh - 100px);
      padding: 24px 48px 72px;
      background: transparent;
      text-align: center;
    }
    .hc {
      width: 100%;
      max-width: 860px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* H1 — Figma: Space Grotesk 60px 700 */
    .hl {
      font-family: var(--font-h);
      font-size: 60px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.3;
      letter-spacing: -1.8px;
      text-transform: capitalize;
      margin-bottom: 16px;
    }
    .hl .acc { color: var(--blue); font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

    /* Desktop-only manual line breaks for ES/FR/PT H1 — keeps the heading
       to exactly 3 lines on wide screens without affecting tablet/mobile,
       where these breaks are inert and natural wrapping takes over. */
    .hl-br-d { display: none; }
    @media (min-width: 1025px) {
      .hl-br-d { display: block; content: ""; }
    }

    /* Subtext — Manrope 11px 600 (global standard) */
    .hs {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      color: var(--navy-88);
      line-height: 1.7;
      max-width: 900px;
      margin-bottom: 28px;
    }

    /* ── TAG STRIP + BUTTON ── */
    .tcb {
      position: relative;
      width: 100%;
      max-width: 920px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    /* Gradient pill strip */
    .tso {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: var(--pill);
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0)    0%,
        rgba(33,117,240,0.20) 12%,
        rgba(3,81,194,0.70)   32%,
        rgba(1,38,92,0.88)    50%,
        rgba(3,81,194,0.70)   68%,
        rgba(33,117,240,0.20) 88%,
        rgba(255,255,255,0)  100%
      );
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    /* Scrolling strip text */
    .ts {
      display: flex;
      align-items: center;
      width: max-content;
      height: 100%;
      animation: tagscroll 24s linear infinite;
    }
    @keyframes tagscroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .ti {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 22px;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
    }
    .td {
      width: 5px;
      height: 5px;
      background: var(--blue-bright);
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* CTA button — larger than strip, overflows top & bottom */
    .btn {
      position: relative;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(145deg, #0351C2 0%, #01265C 100%);
      color: #fff;
      padding: 28px 36px;
      border-radius: var(--pill);
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: 0.1px;
      flex-shrink: 0;
      max-width: 100%;
      box-sizing: border-box;
      box-shadow: 0 0 40px rgba(1,38,92,0.55), 0 4px 20px rgba(1,38,92,0.40);
      transition: opacity var(--dur), transform 0.18s, box-shadow var(--dur);
    }
    .btn:hover { opacity: 0.95; }
    .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* ════════════════════════════════════════
       BREAKPOINTS — explicit px, no clamp
    ════════════════════════════════════════ */

    /* ── Large desktop: 1440px+ ── */
    @media (min-width: 1440px) {
      .hdr { padding: 12px 48px; }
      nav  { padding: 10px 28px; }
      .hl  { font-size: 60px; }
      .hero{ padding: 24px 80px 72px; }
    }

    /* ── Standard desktop: 1280px ── */
    @media (max-width: 1280px) {
      .hdr { padding: 10px 32px; }
      .hl  { font-size: 54px; letter-spacing: -1.6px; }
      .hero{ padding: 24px 40px 64px; }
    }

    /* ── Small desktop / tablet landscape: 1024px ── */
    @media (max-width: 1024px) {
      /* Switch to hamburger */
      .nl, .lb, .nr { display: none; }
      .hamburger { display: flex; }
      .mob-menu { display: block; }

      .hdr { padding: 10px 24px; }
      nav  { padding: 9px 18px; min-height: 48px; }
      .logo img { height: 14px; }

      .hl  { font-size: 44px; letter-spacing: -1.2px; }
      .hero{ padding: 20px 32px 56px; }
      .tcb { max-width: 700px; }

      /* Products: 2-col on tablet */
      .g4  { grid-template-columns: repeat(2, 1fr); }
      .mm-p{ width: min(700px, 92vw); }
      .mm-s{ width: min(500px, 92vw); }
    }

    /* ── Tablet portrait: 768px ── */
    /* ══ MOBILE TICKER (announcement bar) ══ */
    .ann-static { display: block; }
    .ann-ticker-wrap  { display: none; overflow: hidden; flex: 1; }
    .ann-ticker {
      display: inline-flex;
      white-space: nowrap;
      will-change: transform;
      animation: ann-scroll 25s linear infinite;
    }
    .ann-ticker span { padding-right: 0; white-space: nowrap; }
    @keyframes ann-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ══ MOBILE HEADER ══ */
    @media (max-width: 768px) {

      /* ── Announcement bar: ticker on mobile ── */
      .ann {
        padding: 8px 44px 8px 12px;
        gap: 0;
        justify-content: flex-start;
      }
      .ann-static { display: none !important; }
      .ann-ticker-wrap  { display: flex !important; overflow: hidden; flex: 1; min-width: 0; width: 0; }
      .ann-cta { display: none; } /* hide Book demo on mobile ann bar */
      .ann-x { right: 10px; }

      /* ── Closed state: pill with logo + hamburger ── */
      .hdr { padding: 8px 16px; }
      nav {
        padding: 10px 16px;
        border-radius: 16px;
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
        width: 100%;
      }
      .logo img { height: 14px; }
      .nl { display: none !important; }
      .nr { display: none !important; }
      .hamburger { display: flex !important; }
      .db { display: none !important; }
      .mob-menu { display: block; }

      /* ── Homepage content ── */
      .hl  { font-size: 34px; letter-spacing: -0.8px; margin-bottom: 12px; }
      .hs  { font-size: 11px; margin-bottom: 20px; }
      .hero{ padding: 20px 20px 48px; }
      .tcb { max-width: 560px; height: 44px; }
      .btn { padding: 16px 26px; }
      .ti  { padding: 0 16px; gap: 12px; }

      /* Longer CTA text (French/Portuguese) needs smaller padding + font
         so the pill button never exceeds the viewport width */
      body.lang-fr .btn,
      body.lang-pt .btn {
        padding: 14px 18px;
        font-size: 10px;
        gap: 6px;
      }
    }

    @media (max-width: 480px) {
      .ann { padding: 7px 36px 7px 10px; }
      .hdr { padding: 7px 12px; }
      nav  { padding: 9px 14px; border-radius: 14px; min-height: 44px; }
      .logo img { height: 12px; }
      .hl  { font-size: 28px; letter-spacing: -0.5px; margin-bottom: 10px; }
      .hero{ padding: 16px 16px 40px; }
      .tcb { max-width: 100%; height: 42px; }
      .btn { padding: 14px 22px; gap: 8px; }
      .btn svg { width: 14px; height: 14px; }
      .ti  { padding: 0 12px; gap: 10px; }
      .td  { width: 4px; height: 4px; }

      /* Even tighter on very narrow phones for FR/PT long CTA text */
      body.lang-fr .btn,
      body.lang-pt .btn {
        padding: 12px 14px;
        font-size: 9px;
        gap: 5px;
        letter-spacing: 0;
      }
      body.lang-fr .btn svg,
      body.lang-pt .btn svg {
        width: 12px;
        height: 12px;
      }
    }

    /* ── Small mobile: 360px ── */
    @media (max-width: 360px) {
      .ann { display: none; }
      .hl  { font-size: 24px; letter-spacing: -0.3px; }
      .tcb { height: 40px; }
      .btn { padding: 12px 18px; font-size: 10px; }
    }

    /* ════════════════════════════════════════
       PRODUCT SHOWCASE SECTION
    ════════════════════════════════════════ */
    .showcase {
      background: #ffffff;
      padding: 96px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    @media (max-width: 1280px) { .showcase { padding: 80px 0; } }
    @media (max-width: 1024px) { .showcase { padding: 72px 0; } }
    @media (max-width: 768px)  { .showcase { padding: 64px 0; } }
    @media (max-width: 480px)  { .showcase { padding: 48px 0; } }

    .sc-wrap {
      position: relative;
      width: 100%;
      max-width: 1140px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Video card — gradient inside, thick white border, light blue shadow */
    .sc-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1038px;
      border-radius: 20px;
      padding: 12px;
      /* Thick white border */
      border: 6px solid #ffffff;
      /* Light blue box shadow */
      box-shadow: 0 0 100px 0 rgba(101,163,255,0.37);
      /* Richer gradient — matches reference: deeper blue top-left, lighter bottom-right */
      background: linear-gradient(
        135deg,
        #C8DFF5 0%,
        #D6E8F8 20%,
        #E2EFF9 45%,
        #EDF5FB 70%,
        #F4F9FF 100%
      );
      overflow: hidden;
    }

    /* Inner video area — fully transparent so card gradient is the video bg */
    .sc-video-wrap {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      background: transparent;
      line-height: 0;
    }
    .sc-video {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      /* Keep transparent — webm alpha channel shows card gradient through */
      background: transparent;
    }

    /* Responsive */
    @media (max-width: 1280px) {
      .sc-card   { max-width: 900px; }
    }
    @media (max-width: 1024px) {
      .sc-card   { max-width: 100%; }
    }
    @media (max-width: 768px) {
      .sc-card   { border-radius: 16px; border-width: 4px; padding: 8px; }
      .sc-video-wrap { border-radius: 8px; }
    }
    @media (max-width: 480px) {
      .sc-card   { border-radius: 12px; border-width: 3px; padding: 6px;
                   box-shadow: 0 0 48px 0 rgba(101,163,255,0.28); }
      .sc-video-wrap { border-radius: 6px; }
    }

    /* ════════════════════════════════════════
       TRUSTED BY SECTION
    ════════════════════════════════════════ */
    .trusted {
      background: #ffffff;
      padding: 96px 0;
      overflow: hidden;
      text-align: center;
    }
    @media (max-width: 1280px) { .trusted { padding: 80px 0; } }
    @media (max-width: 1024px) { .trusted { padding: 72px 0; } }
    @media (max-width: 768px)  { .trusted { padding: 64px 0; } }
    @media (max-width: 480px)  { .trusted { padding: 48px 0; } }

    .trusted-title {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
      text-align: center;
      max-width: 100%;
      margin: 0 auto 48px;
      padding: 0;
      white-space: normal;
    }
    .trusted-title .acc { color: var(--blue); font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

    /* Logo track wrapper — boxed with max width */
    .logo-track-wrap {
      display: flex;
      flex-direction: column;
      gap: 48px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      overflow: hidden;
    }

    /* Each row — overflow hidden, fade edges */
    .logo-row {
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }

    /* Marquee track */
    .logo-marquee {
      display: flex;
      align-items: center;
      width: max-content;
      animation: marquee-ltr 120s linear infinite;
    }
    .logo-marquee-reverse {
      animation: marquee-rtl 120s linear infinite;
    }

    @keyframes marquee-ltr {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes marquee-rtl {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* Individual logo item */
    .logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      flex-shrink: 0;
    }
    .logo-item img {
      height: 48px;
      width: auto;
      max-width: 140px;
      object-fit: contain;
      display: block;
      /* Grayscale on hover reveals color */
      filter: grayscale(20%);
      opacity: 0.85;
      transition: filter 0.2s, opacity 0.2s;
    }
    .logo-item img:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .logo-item img  { height: 40px; }
      .logo-item      { padding: 0 28px; }
    }
    @media (max-width: 768px) {
      .logo-item img  { height: 32px; }
      .logo-item      { padding: 0 20px; }
      .logo-track-wrap{ gap: 40px; }
    }
    @media (max-width: 480px) {
      .trusted-title  { font-size: 18px; line-height: 28px; margin-bottom: 28px; }
      .logo-item img  { height: 26px; }
      .logo-item      { padding: 0 14px; }
    }

    /* ════════════════════════════════════════
       YOUR NEEDS, OUR SOLUTIONS SECTION
    ════════════════════════════════════════ */
    /* ── Solutions Section ── */
    .solutions-section {
      background: #ffffff;
      padding: 96px 48px;
    }
    .solutions-section {
      background: #ffffff;
      padding: 96px 48px;
      position: relative;
      overflow: hidden;
    }
    .solutions-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 420px; height: 420px;
      background: radial-gradient(circle at 0% 0%, rgba(43,107,230,0.35) 0%, transparent 65%);
      pointer-events: none; z-index: 0;
    }
    .solutions-section::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 420px; height: 420px;
      background: radial-gradient(circle at 100% 100%, rgba(43,107,230,0.30) 0%, transparent 65%);
      pointer-events: none; z-index: 0;
    }
    .solutions-section .section-inner {
      position: relative;
      z-index: 1;
      background-color: #ffffff;
      padding: 50px;
      border-radius: 20px;
    }

    /* Header */
    .sol-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 40px;
      gap: 24px;
    }
    .sol-heading-block { flex: 1; }

    /* Solutions section h2 wrapper */
    .sol-heading {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      line-height: 43px;
      letter-spacing: -0.3px;
      margin-bottom: 16px;
    }
    .sol-title {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
    }
    .sol-title-blue {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--blue);
      line-height: 43px;
      letter-spacing: -0.3px;
    }
    .sol-sub {
      font-family: var(--font-b);
      font-size: 14px; font-weight: 500;
      color: var(--navy-88); line-height: 1.7;
      max-width: 580px;
    }
    .sol-arrows {
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0; padding-top: 8px;
    }
    .sol-arrow {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1.5px solid #E0E8F5;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .sol-arrow:hover { background: #EEF4FF; border-color: var(--blue); }
    .sol-arrow svg { width: 16px; height: 16px; color: var(--navy-88); }
    .sol-arrow:hover svg { color: var(--blue); }

    /* Track */
    .sol-track-wrap { overflow: hidden; width: 100%; cursor: grab; user-select: none; }
    .sol-track-wrap.dragging { cursor: grabbing; }
    .sol-track {
      display: flex;
      flex-wrap: nowrap;
      gap: 16px;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
      align-items: stretch;
    }

    /* Card */
    .sol-card {
      flex: 0 0 calc((100% - 32px) / 3.15);
      min-width: 0;
      background: #F2F6FD;
      border-radius: 20px;
      border: 1.5px solid #E0EAFC;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      cursor: pointer;
    }
    .sol-card:hover {
      border-color: #E0EAFC;
    }

    /* Card header row */
    .sol-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px 20px 12px;
      gap: 8px;
    }
    .sol-cat {
      font-family: var(--font-b);
      font-size: 10px; font-weight: 700;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }
    .sol-card-plus {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(43,107,230,0.10);
      border: none;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: background 0.2s;
    }
    .sol-card-plus:hover { background: rgba(43,107,230,0.18); }
    .sol-card-plus svg { width: 14px; height: 14px; color: var(--blue); }

    /* Title */
    .sol-card-title {
      font-family: var(--font-h);
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      line-height: 26px;
      letter-spacing: -0.1px;
      padding: 0 20px 16px;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: calc(18px * 1.44 * 2);
    }

    /* Image area — fills remaining card space */
    .sol-card-img {
      margin: 0 12px 12px;
      border-radius: 14px;
      overflow: hidden;
      flex: 0 0 auto;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #E0EAFC;
    }
    .sol-card-img img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
    }
    .sol-card-img.placeholder {
      background: #EEF4FF;
    }
    .sol-card-img.placeholder img {
      object-fit: contain;
      width: 100%;
      height: auto;
      display: block;
    }

    /* Dots */
    .sol-dots {
      display: flex; justify-content: center;
      gap: 6px; margin-top: 28px;
    }
    .sol-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #D0D9F0;
      cursor: pointer;
      transition: background 0.2s, width 0.2s;
      border: none; padding: 0;
    }
    .sol-dot.active { background: var(--blue); width: 20px; border-radius: 3px; }

    /* Responsive */
    @media (max-width: 1280px) {
      .solutions-section { padding: 80px 40px; }

      .sol-card { flex: 0 0 calc(33.33% - 11px); }
    }
    @media (max-width: 1024px) {
      .solutions-section { padding: 72px 24px; }

      .sol-card { flex: 0 0 calc(50% - 8px); }
    }
    @media (max-width: 768px) {
      .solutions-section { padding: 64px 20px; }

      .sol-header { flex-direction: column; gap: 16px; }
      .sol-card { flex: 0 0 calc(80% - 8px); }
    }
    @media (max-width: 480px) {
      .solutions-section { padding: 48px 16px; }

      .sol-card { flex: 0 0 calc(90% - 8px); }
    }

    /* ── Language Switcher ── */
    .lang-sw { position: relative; }
    .lang-btn {
      display: flex; align-items: center; gap: 6px;
      color: var(--w80); font-family: var(--font-b); font-size: 11px;
      font-weight: 600; padding: 6px 11px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.22); background: transparent;
      cursor: pointer; transition: background var(--dur), color var(--dur);
      white-space: nowrap;
    }

    .lang-btn img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
    .lang-btn .chev { width: 10px; height: 10px; margin-left: 2px; transition: transform var(--dur); }
    .lang-sw.open .lang-btn .chev { transform: rotate(180deg); }
    .lang-drop {
      display: none; position: absolute; top: calc(100% + 8px); left: 50%;
      transform: translateX(-50%); background: #fff; border-radius: 10px;
      box-shadow: 0 8px 32px rgba(11,22,63,0.18); overflow: hidden;
      min-width: 148px; z-index: 9999;
    }
    .lang-sw.open .lang-drop { display: block; }
    .lang-drop a {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 14px; text-decoration: none;
      font-family: var(--font-b); font-size: 12px; font-weight: 500;
      color: var(--navy); transition: background var(--dur);
    }
    .lang-drop a:hover { background: #f0f4ff; }
    .lang-drop a.active { background: #e8eeff; font-weight: 700; }
    .lang-drop a img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

    
    /* ── AI Section ── */
    .ai-section {
      padding: 96px 0;
      background: #fff;
    }
    @media (max-width: 1280px) { .ai-section { padding: 80px 0; } }
    @media (max-width: 1024px) { .ai-section { padding: 72px 0; } }
    .ai-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .ai-card {
      background: linear-gradient(135deg, #ddeaff 0%, #eef4ff 45%, #c8d9ff 100%);
      border-radius: 28px;
      display: flex;
      align-items: center;
      overflow: hidden;
      min-height: 320px;
      position: relative;
    }
    .ai-left {
      flex: 1;
      padding: 56px 40px 56px 56px;
      position: relative;
      z-index: 1;
    }
    .ai-heading {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
      margin-bottom: 16px;
    }
    .ai-heading .ai-accent {
      color: var(--blue);
      font-size: inherit !important;
    }
    .ai-sub {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: var(--navy-88);
      line-height: 1.7;
      margin-bottom: 32px;
      max-width: 340px;
    }
    .ai-cta {
      display: inline-flex;
      align-items: center;
      background: var(--navy);
      color: #fff !important;
      padding: 14px 32px;
      border-radius: var(--pill);
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none !important;
      transition: opacity 0.2s;
    }
    .ai-cta:hover { opacity: 0.88; }
    .ai-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 48px 32px 0;
    }
    .ai-imgbox {
      background: rgba(255,255,255,0.75);
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,0.9);
      box-shadow: 0 8px 40px rgba(43,107,230,0.10);
      width: 100%;
      max-width: 480px;
      aspect-ratio: 16/11;
    }
    @media (max-width: 1024px) {
      .ai-inner { padding: 0 24px; }
      .ai-left  { padding: 48px 32px 48px 40px; }

      .ai-right { padding: 32px 32px 32px 0; }
    }

    
    /* ── Stats Section ── */
    .stats-section {
      padding: 48px 48px 64px;
      background: #fff;
      text-align: center;
    }
    .stats-heading {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
      margin-bottom: 12px;
    }
    .stats-heading .stats-accent { color: var(--blue);  font-size: inherit !important; }
    .stats-sub {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: var(--navy-88);
      line-height: 1.6;
      margin-bottom: 56px;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .stat-card {
      background: #EEF4FF;
      border-radius: 20px;
      padding: 28px 28px 24px;
      text-align: left;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(43,107,230,0.12);
    }
    .stat-card.stat-dark {
      background: linear-gradient(135deg, #2B6BE6 0%, #1a4fc4 100%);
    }
    .stat-label-top {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .stat-card.stat-dark .stat-label-top { color: rgba(255,255,255,0.85); }
    .stat-number {
      font-family: var(--font-b);
      font-size: 64px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1;
      letter-spacing: -2px;
      margin-bottom: 12px;
    }
    .stat-card.stat-dark .stat-number { color: #fff; }
    .stat-label-bot {
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 500;
      color: var(--navy-88);
    }
    .stat-card.stat-dark .stat-label-bot { color: rgba(255,255,255,0.92); }

    @media (max-width: 1280px) {
      .stats-section { padding: 40px 40px 56px; }
    }
    @media (max-width: 1024px) {
      .stats-section { padding: 36px 24px 48px; }

      .stat-number { font-size: 52px; }
    }
    @media (max-width: 768px) {
      .stats-section { padding: 32px 20px 44px; }

      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-number { font-size: 48px; }
    }
    @media (max-width: 480px) {
      .stats-section { padding: 24px 16px 32px; }

      .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .stat-number { font-size: 40px; }
    }

    
    /* ── Trust Section ── */
            .trust-section {
      padding: 96px 0;
      background: #fff;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    @media (max-width: 1280px) { .trust-section { padding: 80px 0; } }
    @media (max-width: 1024px) { .trust-section { padding: 72px 0; } }
    .trust-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 500px; height: 500px;
      background: radial-gradient(circle at 0% 0%, rgba(43,107,230,0.35) 0%, transparent 65%);
      pointer-events: none; z-index: 0;
    }
    .trust-section::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 500px; height: 500px;
      background: radial-gradient(circle at 100% 100%, rgba(43,107,230,0.30) 0%, transparent 65%);
      pointer-events: none; z-index: 0;
    }
    .trust-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      position: relative;
      z-index: 1;
    }
    .trust-heading {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
      margin-bottom: 12px;
    }
    .trust-heading .trust-accent { color: var(--blue); font-size: inherit !important; }
    .trust-sub {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: var(--navy-88);
      line-height: 1.6;
      margin-bottom: 48px;
    }
    .trust-card {
      background: #F2F6FD;
      border-radius: 24px;
      padding: 48px 56px 0;
    }

    /* ── Panel container ── */
    .trust-panels { min-height: 180px; padding-top: 40px; }
    .trust-panel  { display: none; }
    .trust-panel.active {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 0;
    }

    /* ── Milestones: BRCGS | divider | 3 badges ── */
    .tm-brcgs {
      flex: 0 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      padding: 0 48px 0 0;
    }
    .tm-brcgs-word {
      font-family: var(--font-h);
      font-size: 44px;
      font-weight: 900;
      color: var(--navy);
      letter-spacing: -2px;
      line-height: 1;
      white-space: nowrap;
    }
    .tm-brcgs-divline {
      width: 1px;
      height: 44px;
      background: #ccc;
      flex-shrink: 0;
    }
    .tm-brcgs-sub {
      font-family: var(--font-b);
      font-size: 12px !important;
      font-weight: 500;
      color: var(--navy-88) !important;
      line-height: 1.4;
      text-align: left;
      white-space: nowrap;
    }
    .tm-vdivider {
      width: 1px;
      height: 110px;
      background: #E0EAFC;
      flex-shrink: 0;
    }
    .tm-badges {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 48px;
      padding: 0;
    }
    .tm-badge {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tm-badge img {
      height: 70px;
      width: auto;
      object-fit: contain;
      display: block;
      transition: transform 0.2s;
    }


    /* ── Certifications: 3 circular logos ── */
    .tc-row {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 56px;
    }
    .tc-item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tc-item img {
      height: 80px;
      width: auto;
      object-fit: contain;
      display: block;
      transition: transform 0.2s;
    }


    /* ── Tabs ── */
    .trust-tabs {
      display: flex;
      border-top: 1px solid #E0EAFC;
      margin-top: 8px;
    }
    .trust-tab {
      flex: 1;
      padding: 20px 24px;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 600;
      color: #9AAABF;
      cursor: pointer;
      background: none;
      border: none;
      position: relative;
      transition: color 0.2s;
      text-align: center;
    }
    .trust-tab::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 0; height: 3px;
      background: var(--blue);
      border-radius: 0 0 3px 3px;
      transition: width 0.25s;
    }
    .trust-tab.active { color: var(--blue); }
    .trust-tab.active::before { width: 100px; }
    .trust-tab::after { display: none; }

    /* Trust carousel dots — mobile only */
    .trust-carousel-dots { display: none; }
    @media (max-width: 768px) { .trust-carousel-dots { display: flex; } }

    @media (max-width: 1024px) {
      .trust-inner { padding: 0 32px; }
      .trust-card { padding: 40px 32px 0; }

      .tm-brcgs-word { font-size: 36px; }
      .tm-badges { gap: 24px; }
    }
    @media (max-width: 768px) {
      .trust-section { padding: 64px 0; }
      .trust-inner { padding: 0 20px; }

      .trust-card { padding: 32px 24px 0; }
      .tm-brcgs { padding: 0; }
      .tm-vdivider { display: none; }

      /* ── Mobile: trust panel shows as block ── */
      .trust-panel.active {
        display: block;
        position: relative;
      }

      /* Items hidden by default — JS adds .active to show one */
      .tm-badge,
      .tc-item {
        display: none !important;
        align-items: center;
        justify-content: center;
        padding: 24px 0 12px;
        animation: trustfade 0.4s ease;
      }
      .tm-badge.active,
      .tc-item.active {
        display: flex !important;
      }
      @keyframes trustfade {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      .tm-badge img,
      .tc-item img {
        height: 120px;
        width: auto;
        max-width: 80%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
      }

      /* Carousel dots */
      .trust-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 10px 0 20px;
      }
      .trust-cdot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #D0D9F0;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s, width 0.2s;
      }
      .trust-cdot.active { background: var(--blue); width: 20px; border-radius: 3px; }
    }
    @media (max-width: 480px) {
      .trust-section { padding: 48px 0; }
    }

    /* ── Footer ── */
    .site-footer {
      background: linear-gradient(180deg, #ffffff 0%, #EEF4FF 40%, #E2EDFF 100%);
      font-family: var(--font-b);
      position: relative;
    }
    .footer-top {
      padding: 72px 0 64px;
    }
    .footer-top-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      display: flex;
      align-items: flex-start;
      gap: 48px;
    }
    .footer-cta-col {
      flex: 0 0 320px;
    }
    .footer-cta-heading {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
      margin-bottom: 28px;
    }
    .footer-book-btn {
      display: inline-flex;
      align-items: center;
      background: var(--blue);
      color: #fff;
      padding: 13px 28px;
      border-radius: var(--pill);
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.2s, box-shadow 0.2s;
    }

    .footer-nav-cols {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
    .footer-col-title {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 600;
      line-height: 22px;
      color: var(--navy);
      margin-bottom: 20px;
    }
    .footer-col-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-col-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--navy-88);
      text-decoration: none;
      transition: color 0.15s;
      line-height: 1.4;
    }
    .footer-col-links a:hover { color: var(--blue); }
    .footer-prod-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 24px;
    }

    /* Divider */
    .footer-divider {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      border: none;
      border-top: 1px solid rgba(43,107,230,0.12);
    }

    /* Bottom bar */
    .footer-bottom {
      padding: 20px 0;
    }
    .footer-bottom-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
    .footer-social {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .footer-social a {
      color: var(--navy-88);
      display: flex;
      align-items: center;
      transition: color 0.15s;
    }
    .footer-social a:hover { color: var(--blue); }
    .footer-social svg { width: 18px; height: 18px; }
    .footer-legal {
      display: flex;
      align-items: center;
      gap: 36px;
      flex-wrap: wrap;
    }
    .footer-legal a {
      font-size: 12px;
      font-weight: 500;
      color: var(--navy-88);
      text-decoration: none;
      transition: color 0.15s;
    }
    .footer-legal a:hover { color: var(--blue); }

    /* Copyright */
    .footer-copyright {
      padding: 4px 0 32px;
    }
    .footer-copyright-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      font-size: 12px;
      color: #9AA5BA;
    }

    @media (max-width: 1024px) {
      .footer-top-inner { padding: 0 32px; gap: 32px; }
      .footer-cta-col { flex: 0 0 240px; }

      .footer-divider, .footer-bottom-inner, .footer-copyright-inner { padding: 0 32px; }
    }
    @media (max-width: 768px) {
      .footer-top-inner { flex-direction: column; padding: 0 24px; }
      .footer-cta-col { flex: unset; width: 100%; }
      .footer-nav-cols { grid-template-columns: repeat(2,1fr); }
      .footer-bottom-inner { padding: 0 24px; flex-direction: column; align-items: flex-start; }
      .footer-divider, .footer-copyright-inner { padding: 0 24px; }
      .footer-legal {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 6px;
        gap: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
      }
      .footer-legal a {
        font-size: 10px;
        white-space: normal;
        padding: 0 8px;
        position: relative;
      }
      .footer-legal a + a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 10px;
        background: var(--navy-88);
        opacity: 0.3;
      }
    }
    @media (max-width: 480px) {
      .footer-nav-cols { grid-template-columns: 1fr; }
      .footer-top-inner, .footer-bottom-inner, .footer-divider, .footer-copyright-inner { padding: 0 20px; }
    }


    /* ── Contact / Testimonial Section ── */
    .contact-section {
      padding: 96px 0;
      background: #F4F8FF;
      text-align: center;
    }
    
    .contact-section::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 500px; height: 500px;
      background: radial-gradient(circle at 100% 100%, rgba(43,107,230,0.32) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .contact-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      position: relative;
      z-index: 1;
    }
    .contact-heading {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 43px;
      letter-spacing: -0.3px;
      margin-bottom: 14px;
    }
    .contact-heading .contact-accent { color: var(--blue); font-size: inherit !important; font-weight: inherit; }
    .contact-sub {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: var(--navy-88);
      line-height: 1.6;
      margin-bottom: 40px;
    }
    .contact-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 4px 40px rgba(43,107,230,0.08);
      border: 1px solid #E8F0FB;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      min-height: 480px;
    }
    .contact-left {
      flex: 0 0 48%;
      padding: 40px 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: left;
      background: #fff;
    }
    .contact-quote-icon {
      font-family: Georgia, serif;
      font-size: 72px;
      font-weight: 900;
      color: var(--blue);
      opacity: 1;
      line-height: 0.7;
      margin-bottom: 24px;
      display: block;
    }
    .contact-quote-text {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      line-height: 1.8;
      flex: 1;
      margin-bottom: 28px;
    }
    .contact-author {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 36px;
    }
    .contact-author-logo {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: #F0F6FE;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      padding: 6px;
    }
    .contact-author-logo img { width: 100%; height: 100%; object-fit: contain; }
    .contact-author-name {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 4px;
    }
    .contact-author-role {
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 500;
      color: var(--navy-88);
    }
    .contact-clients-label {
      font-family: var(--font-b);
      font-size: 10px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .contact-client-logos {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .contact-client-logo {
      width: 76px; height: 76px;
      border-radius: 50%;
      border: 1.5px solid #E0EAFC;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 10px;
      flex-shrink: 0;
    }
    .contact-client-logo img { width: 100%; height: 100%; object-fit: contain; }
    .contact-right {
      flex: 1;
      padding: 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      background: #fff;
      border-left: 1px solid #E8F0FB;
    }
    .contact-form { display: flex; flex-direction: column; gap: 14px; }
    .contact-form label {
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 4px;
      display: block;
    }
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid #E0EAFC;
      border-radius: 8px;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: var(--navy);
      background: #F8FAFF;
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); background: #fff; }
    .contact-form textarea { resize: none; min-height: 80px; }
    .contact-form-privacy {
      font-family: var(--font-b);
      font-size: 10px !important;
      color: var(--navy-88);
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5;
    }
    .contact-form-privacy input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
    .contact-form-submit {
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: var(--pill);
      padding: 13px 40px;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
      align-self: center;
      margin-top: 4px;
    }

    @media (max-width: 1280px) {
      .contact-section { padding: 80px 0; }
    }
    @media (max-width: 1024px) {
      .contact-inner { padding: 0 32px; }

      .contact-left { padding: 40px 36px; }
      .contact-right { padding: 40px 32px; }
      .contact-section { padding: 72px 0; }
    }
    @media (max-width: 768px) {
      .contact-section { padding: 64px 0; }
      .contact-inner { padding: 0 20px; }
      .contact-card { flex-direction: column; }
      .contact-left { flex: unset; padding: 36px 28px 40px; border-bottom: 1px solid #E8F0FB; }
      .contact-right { padding: 36px 24px 40px; border-left: none; }

      .tcarousel-dots { justify-content: center; }
      .contact-client-logos { justify-content: center; }
      .contact-clients-label { text-align: center; }
    }
    @media (max-width: 480px) {
      .contact-section { padding: 48px 0; }
      .contact-heading { font-size: 24px; }
      .contact-inner { padding: 0 16px; }
    }


    /* ── Contact card gradient overlay ── */
    .contact-card {
      position: relative;
    }
    .contact-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 320px; height: 320px;
      background: radial-gradient(circle at 0% 0%, rgba(43,107,230,0.14) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .contact-card::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 320px; height: 320px;
      background: radial-gradient(circle at 100% 100%, rgba(43,107,230,0.11) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .contact-left, .contact-right { position: relative; z-index: 1; }

    /* ── Testimonial carousel ── */
    .tcarousel { position: relative; margin-bottom: 24px; }
    .tcard {
      display: none;
      flex-direction: column;
      gap: 0;
      animation: tfade 0.5s ease;
    }
    .tcard.active { display: flex; }
    @keyframes tfade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
    .tcard-quote {
      font-family: Georgia, serif;
      font-size: 64px !important;
      font-weight: 900;
      color: var(--blue);
      line-height: 0.7;
      margin-bottom: 24px;
      display: block;
    }
    .tcard-text {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .tcard-author {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 0;
    }
    .tcard-logo {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: #F0F6FE;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      padding: 6px;
      border: 1.5px solid #E0EAFC;
    }
    .tcard-logo img { width: 100%; height: 100%; object-fit: contain; }
    .tcard-name {
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 3px;
    }
    .tcard-role {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 500;
      color: var(--navy-88);
    }

    /* Dots */
    .tcarousel-dots {
      display: flex;
      gap: 6px;
      margin-bottom: 24px;
    }
    .tdot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #D0D9F0;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s, width 0.2s;
    }
    .tdot.active { background: var(--blue); width: 20px; border-radius: 3px; }

    /* Client logos - bigger */
    .contact-clients-wrap { margin-top: 0; }
    .contact-client-logo {
      width: 64px; height: 64px;
      border-radius: 50%;
      border: 1.5px solid #E0EAFC;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 8px;
      flex-shrink: 0;
    }
    .contact-client-logo img { width: 100%; height: 100%; object-fit: contain; }
    .contact-client-logos { gap: 12px; }


    /* ── Sol card open state ── */

    /* Closed view shown by default, open view hidden */
    .sol-card-collapsed-view { display: flex; flex-direction: column; flex: 1; }
    .sol-card-open-view { display: none; flex-direction: column; flex: 1; }
    .sol-card.open .sol-card-collapsed-view { display: none; }
    .sol-card.open .sol-card-open-view { display: flex; }

    /* Open card sizing */
    .sol-card.open {
      flex: 0 0 calc(((100% - 32px) / 3.15) * 2 + 16px);
      background: #F0F5FD;
      border-color: #C8DCFF;
      box-shadow: 0 8px 40px rgba(43,107,230,0.13);
      transform: none;
      cursor: default;
    }
    .sol-card.open:hover { transform: none; border-color: #C8DCFF; }

    /* Open head */
    .sol-card.open .sol-card-head { padding: 20px 20px 16px; }

    /* Close button */
    .sol-card-close {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: #E4EDFB;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .sol-card-close:hover { background: #C8DCFF; }
    .sol-card-close svg { width: 14px; height: 14px; color: var(--blue); }

    /* Body wrap: text-col LEFT | img-col RIGHT */
    .sol-card-body-wrap {
      flex: 1;
      display: flex;
      gap: 20px;
      padding: 0 16px 20px;
      align-items: center;
      min-height: 0;
    }

    /* Text col: title + desc + btn stacked */
    .sol-card-text-col {
      flex: 0 0 44%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }
    /* Title inside text col — no clamp in open state */
    .sol-card-open-view .sol-card-title {
      -webkit-line-clamp: unset;
      overflow: visible;
      min-height: 0;
      padding: 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--navy);
      font-family: var(--font-h);
      line-height: 1.3;
    }

    /* Image col: 70% of remaining space */
    .sol-card-img-col {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #D8E8FF;
    }
    .sol-card-img-col img {
      width: 70%;
      height: auto;
      object-fit: contain;
      display: block;
    }


    .sol-card-desc {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 500;
      color: var(--navy-88);
      line-height: 1.75;
      flex: 1;
      margin-bottom: 24px;
    }
    .sol-card-know {
      display: inline-flex;
      align-items: center;
      background: var(--blue);
      color: #fff;
      padding: 11px 24px;
      border-radius: var(--pill);
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      align-self: flex-start;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .sol-card-know:hover { background: #1a56c4; box-shadow: 0 4px 16px rgba(43,107,230,0.3); }

    .sol-card-img-col {
      flex: 1;
      min-width: 0;
      border-radius: 14px;
      border: 1px solid #D8E8FF;
      overflow: hidden;
      display: flex;
      align-items: stretch;
    }
    .sol-card-img-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Hide image and title in open state (they move to body wrap) */
    .sol-card.open .sol-card-img { display: none; }
    .sol-card.open .sol-card-title { margin-bottom: 0; padding-bottom: 0; }


    /* ── Global 14px for all body/para/button text ── */
    p, span:not(.sol-cat):not(.ann-cta):not(.sol-card-title):not(.acc):not(.contact-accent):not(.stats-accent):not(.trust-accent):not(.ai-accent):not(.mt-u):not(.mt-n):not(.mt-d):not(.mh):not(.res-browse-heading-blue):not(.res-card-dl):not(.res-page-text):not(.res-page-label):not(.hw2-heading-blue):not(.p-hs):not(.hw3-heading-blue):not(.tcard-quote):not(.smcm-sf-heading-blue):not(.smcm-why-heading-blue):not(.smcm-tour-accent):not(.smcm-compare-heading-blue):not(.smcm-hero-title-blue):not(.smcm-faq-heading-blue):not(.smai-hero-title-accent):not(.smai-sf-heading-blue):not(.smcm-faq-question-text):not(.car-hl-accent):not(.car-life-heading-line1):not(.car-life-heading-line2):not(.car-jobs-heading-accent):not(.car-team-heading-accent):not(.car-perk-label):not(.car-job-row__location):not(.car-team-badge):not(.abt-hl-accent):not(.abt-stat-label):not(.accent):not(.abt-icon-label):not(.abt-stat-number):not(.blog-read-more):not(.blog-card-cta):not(.blog-card-date):not(.blog-highlight-date):not(.blog-page-label):not(.blog-page-text), li,
    a:not(.nav-link):not(.logo):not(.sol-card-know):not(.mi):not(.smai-hero-btn):not(.car-job-row__apply):not(.abt-cta-btn):not(.lg-toc-link):not(.res-hero-btn):not(.hw2-cta),
    button:not(.sol-card-plus):not(.sol-card-close):not(.sol-arrow):not(.trust-tab):not(.tdot):not(.sol-dot):not(.hamburger):not(.ann-x):not(.lang-btn):not(.trust-tab),
    input, textarea, select, label,
    .hs, .sol-sub, .sol-card-desc, .sol-card-know, .contact-sub,
    .ai-sub, .stats-sub, .trust-sub, .footer-col-links a,
    .footer-cta-heading, .contact-quote-text, .tcard-text,
    .contact-form label, .contact-form-privacy,
    .footer-legal a, .footer-copyright-inner,
    .sol-cat, .tcard-role, .tcard-name, .contact-clients-label,
    .stat-label-top, .stat-label-bot, .footer-col-title,
    .trust-milestone-label, .sol-card-body, .sol-card-desc,
    .ann span, .mob-cta, .footer-book-btn, .contact-form-submit,
    .sol-know-more, .ai-cta, .footer-book-btn {
      font-size: 14px !important;
    }

    /* Exceptions — keep smaller sizes for labels/badges/micro-text */
    .sol-cat,
    .trust-milestone-label,
    .contact-clients-label,
    .stat-label-top,
    .footer-legal a,
    
    .footer-copyright-inner,
    .tcard-role,
    .ann span { font-size: 12px !important; }

    /* Keep heading sizes untouched — headings are h1-h6 + named title classes */


    /* ── Heading spans always inherit heading size ── */
    h1 span:not(.smcm-faq-question-text), h2 span:not(.smcm-faq-question-text), h3 span:not(.smcm-faq-question-text), h4 span:not(.smcm-faq-question-text),
    .hl span, .hl .acc,
    .tcard-quote,
    .contact-heading span,
    .stats-heading span,
    .trust-heading span,
    .ai-heading span,
    .sol-title span,
    .sol-title-blue span,
    .footer-cta-heading span {
      font-size: inherit !important;
      font-weight: inherit;
      line-height: inherit;
    }



    /* ── Final nav size locks — highest priority ── */
    html body .mm .mt-u, html body .mm-s .mt-u,
    html body .mm .mt-d, html body .mm-s .mt-d,
    html body .mh { font-size: revert !important; }
    html body .mm .mt-u, html body .mm-s .mt-u { font-size: 10px !important; }
    html body .mm .mt-d, html body .mm-s .mt-d { font-size: 11px !important; }
    html body .mh { font-size: 10px !important; }


    /* ── Testimonial quote symbol — force 64px ── */
    html body .tcarousel .tcard .tcard-quote,
    html body .tcard-quote {
      font-size: 64px !important;
      line-height: 0.7 !important;
    }


    /* ── Footer CTA heading size lock ── */
    html body .footer-cta-heading {
      font-size: 30px !important;
      line-height: 1.2 !important;
      letter-spacing: -0.3px !important;
    }


    .mm-c { min-width: 280px; }
    .g1 { display: flex; flex-direction: column; padding: 16px; gap: 2px; }

    /* ── Nav dropdown menus (Products/Solutions/Company) — wider
       panels and slightly bigger text at wide screens, so they don't
       stay pinned to their compact default size while everything
       else on the page is growing. Placed after every base rule
       above (.mm-p/.mm-s/.mm-c/.mh/.mt-u/.mt-n/.mt-d/.mico/.mi) so it
       reliably wins on source order — putting wide-tier overrides
       before their own base rule is what caused the exact same
       "silently does nothing" bug elsewhere on this site before. ── */
    @media (min-width: 1800px) {
      .mm-p { width: min(1160px, 88vw); }
      .mm-s { width: min(760px, 88vw); }
      .mm-c { min-width: 340px; }
      html body .mh   { font-size: 12px !important; }
      html body .mm .mt-u, html body .mm-s .mt-u { font-size: 13px !important; }
      html body .mt-n { font-size: 13px !important; }
      html body .mm .mt-d, html body .mt-d { font-size: 12.5px !important; }
      .mico { width: 38px; height: 38px; }
      .mi   { padding: 11px 12px; gap: 11px; }
    }
    @media (min-width: 2200px) {
      .mm-p { width: min(1320px, 82vw); }
      .mm-s { width: min(860px, 82vw); }
      .mm-c { min-width: 380px; }
      html body .mh   { font-size: 13px !important; }
      html body .mm .mt-u, html body .mm-s .mt-u { font-size: 14px !important; }
      html body .mt-n { font-size: 14px !important; }
      html body .mm .mt-d, html body .mt-d { font-size: 13px !important; }
      .mico { width: 42px; height: 42px; }
      .mi   { padding: 12px 14px; gap: 12px; }
    }


    /* ── Contact section gradients on section ── */
    .contact-section {
      background: #F4F8FF;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .contact-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 500px; height: 500px;
      background: radial-gradient(circle at 0% 0%, rgba(43,107,230,0.38) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .contact-section::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 500px; height: 500px;
      background: radial-gradient(circle at 100% 100%, rgba(43,107,230,0.32) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    /* Contact card — boxed on wide screens */
    .contact-card {
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }


    html body .contact-form .contact-form-privacy,
    html body .contact-form-privacy {
      font-size: 7px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6px !important;
      flex-wrap: nowrap !important;
    }
    html body .contact-form-privacy input[type="checkbox"] {
      flex-shrink: 0;
      margin: 0 !important;
      width: 12px;
      height: 12px;
    }


    /* ── Remove all button hover effects ── */
    .btn:hover, .db:hover, .sol-card-know:hover,
    .ai-cta:hover, .footer-book-btn:hover,
    .contact-form-submit:hover, .lang-btn:hover,
    .sol-know-more:hover, .ann-cta:hover,
    .mob-cta:hover, .footer-book-btn:hover {
      box-shadow: none !important;
      transform: none !important;
    }


    /* ── Manrope overrides ── */
    html body .footer-cta-heading { font-family: var(--font-b) !important; }
    html body .stat-number { font-family: var(--font-b) !important; }


    /* Remove nav box-shadow */
    html body .hdr, html body nav#nav, html body .nav-pill,
    html body .sticky-top { box-shadow: none !important; }


    .mob-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .mob-logo img { height: 16px; filter: brightness(0) invert(1); }
    .mob-close {
      background: rgba(255,255,255,0.18) !important;
      border: 1px solid rgba(255,255,255,0.25) !important;
      border-radius: 50% !important;
      width: 34px !important;
      height: 34px !important;
      color: #fff !important;
      font-size: 18px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      padding: 0 !important;
      flex-shrink: 0 !important;
    }




    /* ── Ann ticker desktop/mobile toggle ── */
    .ann-static       { display: block; }
    .ann-ticker-wrap  { display: none; }

    @media (max-width: 768px) {
      .ann-static       { display: none !important; }
      .ann-ticker-wrap  {
        display: flex !important;
        overflow: hidden;
        flex: 1;
        min-width: 0;
        width: 0;
      }
    }


    @media (max-width: 768px) {
      .hamburger { display: flex !important; }
      .hamburger span {
        display: block !important;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
      }
    }


    .mob-plain-link {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: #fff !important;
      text-decoration: none !important;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 15px 0;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
    }





    /* Hide sticky nav header when mobile menu is open */
    body.mob-open .sticky-top { opacity: 0; pointer-events: none; }


    /* ── Mob lang text size ── */

    html body .mob-menu .lang-btn,
    html body #mlBtn {
      font-size: 16px !important;
    }


    /* ── Mobile menu link fixes ── */
    .mob-link { display: flex !important; align-items: center !important; justify-content: space-between !important; }
    .mob-link span { color: #fff !important; font-family: var(--font-b) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }
    .mob-link--plain { justify-content: flex-start !important; }
    .mob-link--plain span { flex: 1; }

    /* Language dropdown items — center align flag + text */
    .mob-menu .lang-drop a {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      text-align: center !important;
    }
    .mob-menu .lang-drop a img { flex-shrink: 0; }


    /* ── Mobile Video Section ── */
    .mob-showcase {
      display: none;
      padding: 32px 20px 56px;
      background: #F4F8FF;
    }
    .mob-showcase__wrap {
      border-radius: 20px;
      padding: 10px;
      border: 1.5px solid #C8DCFF;
      box-shadow: 0 0 40px 0 rgba(101,163,255,0.30), 0 8px 32px rgba(43,107,230,0.10);
      background: #fff;
    }
    .mob-showcase__video-wrap {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      background: transparent;
      line-height: 0;
    }
    .mob-showcase__video {
      width: 100%;
      height: auto;
      display: block;
    }
    @media (max-width: 768px) {
      .showcase { display: none !important; }
      .mob-showcase { display: block !important; }
    }


    @media (max-width: 768px) {
      /* Show only 3 logos at a time — control item width */
      .logo-item {
        padding: 0 16px !important;
        flex: 0 0 calc(100vw / 3) !important;
        justify-content: center !important;
      }
      .logo-item img { height: 28px !important; width: auto !important; max-width: 80px !important; object-fit: contain !important; }
      .logo-track-wrap { gap: 28px !important; }
      /* Remove fade mask on mobile for cleaner look */
      .logo-row { -webkit-mask-image: none !important; mask-image: none !important; }
    }


    /* ── Mobile Solutions Accordion ── */
    .msol-section { display: none; }

    @media (max-width: 768px) {
      .solutions-section { display: none !important; }
      .msol-section {
        display: block;
        padding: 48px 20px 64px;
        background: #fff;
        position: relative;
        overflow: hidden;
      }
      .msol-section::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 300px; height: 300px;
        background: radial-gradient(circle at 0% 0%, rgba(43,107,230,0.10) 0%, transparent 70%);
        pointer-events: none;
      }
      .msol-inner { position: relative; z-index: 1; }

      /* Mobile solutions section h2 wrapper */
      .msol-heading {
        font-family: var(--font-h);
        font-size: 36px;
        font-weight: 700;
        line-height: 43px;
        letter-spacing: -0.3px;
        margin-bottom: 16px;
      }
      .msol-title-main {
        font-family: var(--font-h);
        font-size: 36px;
        font-weight: 700;
        color: var(--navy);
        line-height: 43px;
        letter-spacing: -0.3px;
      }
      .msol-title-blue {
        font-family: var(--font-h);
        font-size: 36px;
        font-weight: 700;
        color: var(--blue);
        line-height: 43px;
        letter-spacing: -0.3px;
      }
      .msol-sub {
        font-family: var(--font-b);
        font-size: 13px;
        line-height: 1.7;
        color: var(--navy-88);
        margin-bottom: 28px;
      }
      /* Accordion */
      .msol-accordion { display: flex; flex-direction: column; gap: 0; }
      .msol-item {
        border-radius: 14px;
        border: 1.5px solid #E0EAFC;
        background: radial-gradient(ellipse at center, #E8F0FF 0%, #F4F8FF 70%);
        margin-bottom: 10px;
        overflow: hidden;
        transition: border-color 0.2s;
        position: relative;
      }
      .msol-item.open {
        border-color: #1A52C4;
        background: radial-gradient(ellipse at center, #EEF4FF 0%, #ffffff 65%);
      }
      .msol-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
      }
      .msol-cat {
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 700;
        color: #1A52C4;
        letter-spacing: 0.5px;
      }
      .msol-icon { display: flex; align-items: center; flex-shrink: 0; }
      .msol-icon svg { width: 18px; height: 18px; color: #1A52C4; }
      /* Body */
      .msol-body { padding: 0 18px 20px; }
      .msol-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 14px;
        display: block;
      }
      .msol-title {
        font-family: var(--font-h);
        font-size: 18px;
        font-weight: 700;
        color: var(--navy);
        line-height: 26px;
        letter-spacing: -0.1px;
        margin-bottom: 10px;
      }
      .msol-desc {
        font-family: var(--font-b);
        font-size: 13px;
        line-height: 1.65;
        color: var(--navy-88);
        margin-bottom: 16px;
      }
      .msol-btn {
        display: inline-block;
        background: #1A52C4;
        color: #fff !important;
        font-family: var(--font-b);
        font-size: 13px;
        font-weight: 700;
        padding: 10px 22px;
        border-radius: 40px;
        text-decoration: none !important;
      }
    }
    /* ── AI Section — Mobile ── */
    @media (max-width: 768px) {
      .ai-section {
        padding: 64px 0;
        background: #EEF4FF;
      }
      .ai-inner { padding: 0 20px; }
      /* Stack: title → image → desc → button */
      .ai-card {
        flex-direction: column;
        align-items: center;
        padding: 36px 24px 40px;
        min-height: unset;
        gap: 24px;
        background: linear-gradient(160deg, #dce9ff 0%, #eef4ff 55%, #c8d9ff 100%);
      }
      /* ai-left wraps heading, sub, cta — split them visually with order */
      .ai-left {
        padding: 0;
        width: 100%;
        display: contents; /* dissolve so children participate in card flex */
      }
      .ai-heading {
        font-size: 24px;
        text-align: center;
        letter-spacing: -0.3px;
        line-height: 1.3;
        margin-bottom: 0;
        order: 1;
        width: 100%;
      }
      .ai-right {
        padding: 0;
        width: 100%;
        order: 2;
      }
      .ai-imgbox {
        max-width: 100%;
        aspect-ratio: 4/3;
      }
      .ai-sub {
        text-align: center;
        font-size: 13px;
        margin-bottom: 0;
        max-width: 100%;
        order: 3;
        width: 100%;
      }
      .ai-cta {
        font-size: 14px;
        padding: 14px 36px;
        order: 4;
        align-self: center;
      }
    }
    @media (max-width: 480px) {
      .ai-section { padding: 48px 0; }
    }

/* ════════════════════════════════════════
   SOLUTION PAGE — TWO-COLUMN HERO
   Distinct from .p-hero (product pages, centered/single-column).
   Left: headline + copy + CTA. Right: plain image.
════════════════════════════════════════ */

.sol-hero {
  display: flex;
  justify-content: center;
  padding: 64px 48px 96px;
  /* Transparent — relies on the sitewide body gradient, exactly like
     .p-hero on product pages. A solid white fill here painted a hard
     band directly under the sticky header. */
  background: transparent;
  position: relative;
  overflow: hidden;
}
.sol-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -15%;
  width: 55%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(33,115,236,0.16), rgba(33,115,236,0) 72%);
  z-index: 0;
  pointer-events: none;
}
/* ── Responsive: side padding mirrors .hero / .p-hero exactly
   (80 / 48 / 40 / 32 / 20 / 16 across breakpoints) ── */
@media (min-width: 1440px) {
  .sol-hero { padding: 72px 80px 104px; }
}

.sol-hero-inner {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sol-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.sol-hl {
  font-family: var(--font-h);
  font-size: 42px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.22;
  letter-spacing: -1.1px;
  margin-bottom: 20px;
}

/* ── No wide-screen font growth for .sol-hl (unlike .hl and .p-hl).
   Tested: even a modest increase to 46px breaks "Supplier Quality
   Management" (needs 1200px, only ~568-878px is realistically
   available in the two-column hero grid), and some headlines (e.g.
   GFSI's "Global Food Safety Standards (GFSI)") already wrap to 3
   lines at the original 42px baseline — a pre-existing theme
   constraint, not introduced here. Fixing this properly would need
   a structural change to the hero grid (e.g. going single-column
   above a threshold), which is out of scope for a font-size pass.
   .sol-hl stays at the theme's original size at every width. ── */

.sol-hs {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sol-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2173EC;
  color: #fff;
  padding: 18px 34px;
  border-radius: var(--pill);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.1px;
  box-shadow: 0 14px 30px rgba(33,115,236,0.30);
  transition: opacity var(--dur), transform 0.18s, box-shadow var(--dur);
}
.sol-btn:hover { opacity: 0.92; }

/* ── Visual side: plain image ── */
.sol-hero-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}

.sol-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── Responsive ── */
@media (max-width: 1300px) {
  .sol-hero        { padding: 56px 40px 88px; }
  .sol-hero-inner  { gap: 48px; grid-template-columns: 1fr 1fr; }
  .sol-hl          { font-size: 38px; letter-spacing: -0.9px; }
}

@media (max-width: 1024px) {
  .sol-hero        { padding: 48px 32px 72px; }
  .sol-hero-inner  { grid-template-columns: 1fr; gap: 40px; }
  .sol-hero-text   { align-items: flex-start; text-align: left; max-width: 560px; }
  .sol-hl          { font-size: 36px; }
  .sol-hero-visual { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .sol-hero       { padding: 36px 20px 64px; }
  .sol-hl         { font-size: 28px; letter-spacing: -0.6px; margin-bottom: 14px; }
  .sol-hs         { font-size: 12.5px; margin-bottom: 24px; }
  .sol-btn        { padding: 15px 26px; font-size: 12px; }
}

@media (max-width: 480px) {
  .sol-hero        { padding: 28px 16px 48px; }
  .sol-hl          { font-size: 23px; }
  .sol-hs          { font-size: 11.5px; }
  .sol-btn         { padding: 13px 22px; font-size: 11px; }
}

/* ════════════════════════════════════════
   IDENTIFY & RESOLVE PROBLEMS
   Section bg: light blue tint. Each card: white with an internal
   top-to-bottom white → light-blue-tint gradient. Cards alternate
   text/image, image/text. Last card's image sits in a dashed frame
   matching the Solutions We Offer visual treatment.
════════════════════════════════════════ */

.irp-section {
  background: #B8D3FA38;
  display: flex;
  justify-content: center;
  padding: 96px 48px;
}

.irp-inner {
  width: 100%;
  max-width: 1200px;
}

.irp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.irp-eyebrow {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  color: #2173EC;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.irp-heading {
  font-family: var(--font-h);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.6px;
  margin-bottom: 12px;
}
.irp-heading-blue { color: #2173EC; }

.irp-sub {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
}

.irp-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: #2173EC;
  color: #fff;
  padding: 16px 30px;
  border-radius: var(--pill);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(33,115,236,0.25);
  transition: opacity var(--dur);
}
.irp-cta:hover { opacity: 0.92; }

/* ── Cards ── */
.irp-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.irp-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background: linear-gradient(180deg, #ffffff 0%, #B8D3FA38 100%);
  border-radius: 24px;
  padding: 40px;
}

.irp-card--reverse .irp-card-img { order: -1; }

.irp-card-title {
  /* Same font + fluid scaling as .sf-tab-title on product pages
     (Smart Features), so card titles read at the same size sitewide. */
  font-family: var(--font-b);
  font-size: clamp(20px, 1.25vw, 32px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 12px;
}
@media (min-width: 2000px) {
  .irp-card-title { font-size: clamp(29px, 1.42vw, 38px); }
}

.irp-card-desc {
  font-family: var(--font-b);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.irp-card-know {
  display: inline-flex;
  align-items: center;
  background: #2173EC;
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--pill);
  font-family: var(--font-b);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--dur);
}
.irp-card-know:hover { opacity: 0.92; }

.irp-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: transparent; /* image only — no tinted box behind it */
}
.irp-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .irp-frame is a plain wrapper div used by the "framed" card variant
   (irp-card--framed) with no styling of its own — without an explicit
   height it collapses to 0px even though its parent has a locked
   aspect-ratio, since a height:100% child can't resolve against a
   height:auto parent. Stretch it to fill the parent explicitly. */
.irp-frame {
  width: 100%;
  height: 100%;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .irp-section { padding: 80px 40px; }
  .irp-card    { gap: 32px; padding: 32px; }
}

@media (max-width: 1024px) {
  .irp-section    { padding: 72px 32px; }
  .irp-header     { flex-direction: column; align-items: flex-start; gap: 20px; }
  .irp-card       { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .irp-card--reverse .irp-card-img { order: 1; }
.irp-card--reverse .irp-card-text { order: 0; }
}

@media (max-width: 768px) {
  .irp-section     { padding: 64px 20px; }
  .irp-header      { margin-bottom: 36px; }
  .irp-heading     { font-size: 26px; }
  .irp-sub         { font-size: 13px; }
  .irp-cta         { padding: 14px 24px; font-size: 12px; }
  .irp-cards       { gap: 20px; }
  .irp-card        { padding: 22px; border-radius: 20px; }
  .irp-card-title  { font-size: 20px; }
  .irp-card-desc   { font-size: 12.5px; }
  .irp-card-know   { padding: 11px 20px; font-size: 12px; }
}

@media (max-width: 480px) {
  .irp-section     { padding: 48px 16px; }
  .irp-heading     { font-size: 21px; }
  .irp-card        { padding: 18px; border-radius: 16px; }
}

    /* ════════════════════════════════════════
   PRODUCT PAGE — HERO
   Same layout system as homepage hero:
   full-bleed blue gradient (from body bg),
   centered column, section-inner-style max-width,
   identical breakpoints (1440/1280/1024/768/480/360)
════════════════════════════════════════ */

.p-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 48px 0;
  background: transparent;
  text-align: center;
}

.p-hc {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon — standalone, sits above the H1 */
.p-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}

/* H1 — plain text, two lines via <br/> in markup */
.p-hl {
  font-family: var(--font-h);
  font-size: 60px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -1.8px;
  margin-bottom: 16px;
}

.p-hs {
  font-family: var(--font-b);
  font-size: 14px !important;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
  max-width: 900px;
  margin-bottom: 32px;
}

/* CTA — reuse homepage .btn look but standalone (no ticker strip) */
.p-btn {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, #0351C2 0%, #01265C 100%);
  color: #fff;
  padding: 20px 36px;
  border-radius: var(--pill);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.1px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 40px rgba(1,38,92,0.35), 0 4px 20px rgba(1,38,92,0.30);
  transition: opacity var(--dur), transform 0.18s, box-shadow var(--dur);
  margin-bottom: 48px;
}
.p-btn:hover { opacity: 0.95; }

/* ── Dashboard image — floats directly on gradient bg, no card ── */
.p-shot-wrap {
  width: 100%;
  max-width: 1140px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  line-height: 0;
}
.p-shot {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  object-fit: contain;
  transform: scale(0.6); /* initial state before JS takes over — matches
    MIN_SCALE in the scroll-grow script below, so there's no flash of
    full-size content before the animation initializes */
  transform-origin: center top;
  will-change: transform;
}

/* ════════════════════════════════════════
   RESPONSIVE — matches homepage breakpoints exactly
════════════════════════════════════════ */

@media (min-width: 1281px) {
  .p-hc { max-width: 1180px; } /* verified min 1094px (CAPA headline), +~85px margin */
  .p-hs { max-width: 900px; font-size: 15px !important; }
}

@media (min-width: 1440px) {
  .p-hero { padding: 72px 80px 0; }
  .p-hc   { max-width: 1180px; } /* verified min 1094px (CAPA headline), +~85px margin */
  .p-hl   { font-size: 60px; }
  .p-hs   { max-width: 900px; font-size: 15px !important; }
  .p-icon { width: 50px; height: 50px; }
}

/* ── Wide-screen growth beyond 1440px, verified against the longest
   product headline ("Corrective and Preventive Action (CAPA)
   Management Software") so no product page's H1 wraps to 3 lines ── */
@media (min-width: 1600px) {
  .p-hc { max-width: 1370px; } /* verified min 1288px, +~80px margin */
  .p-hl { font-size: 70px; }
  .p-hs { max-width: 1000px; font-size: 16px !important; }
}
@media (min-width: 1800px) {
  .p-hc { max-width: 1530px; } /* verified min 1443px, +~90px margin */
  .p-hl { font-size: 78px; }
  .p-hs { max-width: 1080px; font-size: 17px !important; }
}
@media (min-width: 2100px) {
  .p-hc { max-width: 1770px; } /* verified min 1676px, +~95px margin */
  .p-hl { font-size: 90px; }
  .p-hs { max-width: 1180px; font-size: 18px !important; }
}
@media (min-width: 2400px) {
  .p-hc { max-width: 1895px; } /* verified min 1792px, +~100px margin */
  .p-hl { font-size: 96px; }
  .p-hs { max-width: 1260px; font-size: 19px !important; }
}
@media (min-width: 2700px) {
  .p-hc { max-width: 2170px; } /* verified min 2064px, +~105px margin */
  .p-hl { font-size: 110px; }
  .p-hs { max-width: 1360px; font-size: 20px !important; }
}
@media (min-width: 3000px) {
  .p-hc { max-width: 2405px; } /* verified min 2296px, +~110px margin */
  .p-hl { font-size: 122px; }
  .p-hs { max-width: 1460px; font-size: 21px !important; }
}
@media (min-width: 3300px) {
  .p-hc { max-width: 2715px; } /* verified min 2600px, +~115px margin */
  .p-hl { font-size: 140px; }
  .p-hs { max-width: 1600px; font-size: 22px !important; }
}

@media (max-width: 1280px) {
  .p-hero { padding: 56px 40px 0; }
  .p-hc   { max-width: 1060px; } /* verified min 985px (CAPA headline @54px), +~75px margin */
  .p-hl   { font-size: 54px; letter-spacing: -1.6px; }
  .p-icon { width: 40px; height: 40px; }
}

@media (max-width: 1024px) {
  .p-hero { padding: 48px 32px 0; }
  .p-hc   { max-width: 860px; } /* reset — the wider 1280px-tier value isn't needed or safe below this */
  .p-hl   { font-size: 44px; letter-spacing: -1.2px; }
  .p-icon { width: 36px; height: 36px; }
}

@media (max-width: 768px) {
  .p-hero { padding: 36px 20px 0; }
  .p-hl   { font-size: 40px; letter-spacing: -0.8px; margin-bottom: 12px; }
  .p-hs   { font-size: 12px; margin-bottom: 24px; }
  .p-btn  { padding: 16px 26px; font-size: 12px; margin-bottom: 32px; }
  .p-icon { width: 28px; height: 28px; margin-bottom: 8px; }
}

@media (max-width: 480px) {
  .p-hero { padding: 28px 16px 0; }
  .p-hl   { font-size: 34px; letter-spacing: -0.5px; margin-bottom: 10px; }
  .p-hs   { font-size: 11px; margin-bottom: 20px; }
  .p-btn  { padding: 14px 22px; font-size: 11px; margin-bottom: 24px; }
  .p-icon { width: 24px; height: 24px; margin-bottom: 6px; }
}

@media (max-width: 360px) {
  .p-hl { font-size: 28px; letter-spacing: -0.3px; }
  .p-icon { width: 20px; height: 20px; }
}

/* ════════════════════════════════════════
   PRODUCT PAGE — FEATURES CAROUSEL
════════════════════════════════════════ */

.pf-section {
  background: #ffffff;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pf-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pf-header {
  text-align: center;
  margin-bottom: 40px;
}

.pf-heading {
  font-family: var(--font-h);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.pf-heading-blue {
  color: var(--blue);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.pf-sub {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* ── Panel: rounded card housing the carousel, subtle blue gradient ── */
.pf-panel {
  width: 100%;
  border-radius: 32px;
  padding: 48px 40px;
  background: linear-gradient(135deg, #EAF2FC 0%, #F7FAFE 55%, #FFFFFF 100%);
  box-shadow: 0 20px 60px rgba(43,107,230,0.08);
  overflow: hidden;
}

.pf-track-wrap {
  width: 100%;
  overflow: hidden;
  cursor: grab;
}
.pf-track-wrap.dragging { cursor: grabbing; }

.pf-track {
  display: flex;
  gap: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  user-select: none;
}

/* Each card takes exactly half the panel width (2 visible),
   with a vertical divider between the pair via border-left */
.pf-page {
  display: contents;
}

.pf-card {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 32px;
  box-sizing: border-box;
}
.pf-card--divider {
  border-right: 1px solid rgba(43,107,230,0.16);
}

.pf-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 14px;
}

.pf-body { flex: 1; min-width: 0; }

.pf-card-title {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.2px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.pf-card-desc {
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Dots ── */
.pf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.pf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(43,107,230,0.22);
  cursor: pointer;
  transition: background var(--dur), transform var(--dur);
}
.pf-dot.active {
  background: var(--blue);
  transform: scale(1.3);
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 1280px) {
  .pf-section { padding: 80px 40px; }
}

@media (max-width: 1024px) {
  .pf-section { padding: 72px 32px; }
  .pf-panel   { padding: 40px 32px; border-radius: 28px; }
  .pf-heading { font-size: 33px; }
}

@media (max-width: 768px) {
  .pf-section { padding: 64px 20px; }
  .pf-header  { margin-bottom: 32px; }
  .pf-heading { font-size: 27px; }
  .pf-sub     { font-size: 12px; }
  .pf-panel   { padding: 32px 16px; border-radius: 22px; }

  /* Each page is a full-width column of 3 stacked cards */
  .pf-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .pf-card {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0;
  }
  .pf-card--divider { border-right: none; }
  .pf-icon { width: 48px; height: 48px; }
  .pf-card-title { font-size: 13px; }
  .pf-card-desc  { font-size: 12px; }
}

@media (max-width: 480px) {
  .pf-section { padding: 48px 16px; }
  .pf-heading { font-size: 24px; }
  .pf-panel   { padding: 28px 14px; border-radius: 18px; }
  .pf-icon    { width: 44px; height: 44px; }
}

/* ════════════════════════════════════════
   PRODUCT PAGE — SMART FEATURES (TABS)
════════════════════════════════════════ */

.sf-section {
  background: #ffffff;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sf-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sf-header {
  text-align: center;
  margin-bottom: 48px;
}

.sf-heading {
  font-family: var(--font-h);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.8px;
  line-height: 1.2;
}
.sf-heading-blue {
  color: var(--blue);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.sf-sub {
  /* Optional sentence under the heading (used on solution pages). */
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
  margin: 14px auto 0;
}
.trusted-sub{font-family:var(--font-b);font-weight:500;color:var(--muted);line-height:1.7;max-width:640px;margin:14px auto 0;text-align:center}
.sec-sub{font-family:var(--font-b);font-weight:500;color:var(--muted);line-height:1.7;max-width:640px;margin:14px auto 0;text-align:center}
.footer-cta-sub{font-family:var(--font-b);font-weight:500;line-height:1.6;max-width:420px;margin:12px 0 0;opacity:.85}

.sf-layout {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 56px;
}


/* ── Left: tab list ── */
.sf-tabs {
  flex: 1 1 300px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sf-tab {
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid rgba(11,22,63,0.08);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.25s;
}
.sf-tab:first-child { padding-top: 0; }
.sf-tab.active { border-left-color: var(--blue); }

.sf-tab-title {
  font-family: var(--font-b);
  /* Matches the H3 sizing from .smcm-why-card-title on Smart Change,
     applied here per the same request — bigger and fluid at desktop
     widths instead of the previous flat 15px. */
  font-size: clamp(20px, 1.25vw, 32px);
  font-weight: 700;
  color: var(--muted);
  transition: color var(--dur);
}
.sf-tab.active .sf-tab-title { color: var(--navy); }

.sf-tab-desc {
  display: none;
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 8px;
}
.sf-tab.active .sf-tab-desc { display: block; }

/* Progress bar — track always present under active tab, fills over the auto-advance duration */
.sf-tab-progress {
  display: none;
  width: 100%;
  height: 2px;
  background: rgba(43,107,230,0.15);
  margin-top: 14px;
  border-radius: 2px;
  overflow: hidden;
}
.sf-tab.active .sf-tab-progress { display: block; }

.sf-tab-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--blue);
  border-radius: 2px;
}
.sf-tab-progress-fill.animate {
  animation: sf-progress 5s linear forwards;
}
@keyframes sf-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Per-tab image — hidden on desktop, shown inline below each active tab on mobile */
.sf-tab-mobile-img {
  display: none;
}

/* ── Right: media panel ── */
.sf-panel {
  /* Visually removed per request — no more card/background/shadow/
     padding framing the image. Kept as a layout wrapper only (so the
     HTML across all 64 product-page files doesn't need editing);
     .sf-media now fills it completely and grows larger to fill the
     space the padding used to take up.
     display:flex here (with align/justify-center) was measured to
     leave .sf-media short of the full width at every tier above the
     base size — aspect-ratio interacting with flex-grow sizing.
     Removed; a plain block parent lets width:100% resolve directly
     and reliably against the parent's own width instead. */
  flex: 0 1 540px;
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
}

.sf-media {
  position: relative;
  width: 100%;
  /* No independent max-width here anymore — .sf-panel (the actual
     flex item) already has the correct size at every breakpoint, and
     .sf-media just needs to fill 100% of whatever that is, so the
     image always fully occupies the space instead of being capped
     smaller than its now-larger, now-invisible parent. */
  margin: 0 auto;
  aspect-ratio: 640 / 662;
  overflow: hidden; /* hard clip — a broken image or one with an unexpected
                        aspect ratio can never push this container's size */
  background: transparent;
  border-radius: 20px;
}

.sf-media-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0;
  position: absolute; /* stays absolute even when .active — never switches to
                          a flow-affecting position */
  top: 0; left: 0;
  transition: opacity 0.4s ease;
}
.sf-media-img.active {
  opacity: 1;
}


/* ── Wide-screen enlargement — same tier pattern as the Smart Change
   product page's "Digital Change Management Features" section
   (.smcm-sf-*), so both sections grow in a visually consistent way at
   large desktop widths instead of staying flat past ~1280px. ── */
@media (min-width: 1440px) {
  .sf-tabs  { max-width: 450px; }
  .sf-panel { flex-basis: 600px; max-width: 600px; }
}
@media (min-width: 1600px) {
  .sf-layout { gap: clamp(40px, 3.5vw, 64px); }
  .sf-tabs   { max-width: 480px; }
  .sf-panel  { flex-basis: 700px; max-width: 700px; }
}
@media (min-width: 1800px) {
  .sf-layout { gap: clamp(48px, 3.8vw, 72px); }
  .sf-tabs   { max-width: 510px; }
  .sf-panel  { flex-basis: 800px; max-width: 800px; }
}
@media (min-width: 2100px) {
  .sf-layout { gap: clamp(56px, 4vw, 80px); }
  .sf-tabs   { max-width: 540px; }
  .sf-panel  { flex-basis: 900px; max-width: 900px; }
}
@media (min-width: 2400px) {
  .sf-tabs  { max-width: 570px; }
  .sf-panel { flex-basis: 1000px; max-width: 1000px; }
}
@media (min-width: 2700px) {
  .sf-panel { flex-basis: 1100px; max-width: 1100px; }
}
@media (min-width: 2000px) {
  .sf-tab-title { font-size: clamp(29px, 1.42vw, 38px); }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 1280px) {
  .sf-section { padding: 80px 40px; }
}

@media (max-width: 1024px) {
  .sf-section { padding: 72px 32px; }
  .sf-heading { font-size: 33px; }
  .sf-layout  { gap: 40px; }
  .sf-panel   { border-radius: 28px; }
}

@media (max-width: 900px) {
  .sf-layout  { flex-direction: column; max-width: 520px; margin: 0 auto; align-items: stretch; }
  .sf-panel   { display: none; }
  .sf-tabs    { max-width: 100%; width: 100%; flex: 1 1 auto; }
  .sf-tab     { border-left-color: transparent !important; padding-left: 0 !important; }
  .sf-tab-title, .sf-tab-desc { padding-left: 14px; border-left: 3px solid transparent; }
  .sf-tab.active .sf-tab-title,
  .sf-tab.active .sf-tab-desc { border-left-color: var(--blue); }

  .sf-tab-mobile-img {
    display: none;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 340px; /* defensive cap — aspect-ratio should already
      constrain this correctly, but this guarantees the box can never
      balloon to an oversized height regardless of cause */
    object-fit: cover;
    border-radius: 20px;
    margin-top: 16px;
    box-shadow: 0 12px 30px rgba(43,107,230,0.14);
    background: transparent;
  }
  .sf-tab.active .sf-tab-mobile-img {
    display: block;
  }
}

@media (max-width: 768px) {
  .sf-section { padding: 64px 20px; }
  .sf-header  { margin-bottom: 32px; }
  .sf-heading { font-size: 27px; }
  .sf-layout  { gap: 28px; }
  .sf-panel   { border-radius: 22px; }
  .sf-tab     { padding: 14px 0; }
  .sf-tab-title { font-size: 20px; }
}

@media (max-width: 480px) {
  .sf-section { padding: 48px 16px; }
  .sf-heading { font-size: 24px; }
  .sf-panel   { border-radius: 18px; }
}

/* ════════════════════════════════════════
   PRODUCT PAGE — HOW IT WORKS (STEP CAROUSEL)
════════════════════════════════════════ */

.hw-section {
  position: relative;
  background: #ffffff;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.hw-section::before,
.hw-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 260px;
  z-index: 0;
  pointer-events: none;
}
.hw-section::before {
  left: 0;
  background: linear-gradient(90deg, #E8F0FE 0%, rgba(232,240,254,0) 100%);
}
.hw-section::after {
  right: 0;
  background: linear-gradient(270deg, #E8F0FE 0%, rgba(232,240,254,0) 100%);
}
.hw-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hw-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.hw-heading-block { text-align: left; }

.hw-heading {
  font-family: var(--font-h);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.hw-heading-blue {
  color: var(--blue);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.hw-sub {
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
}

.hw-arrows {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 6px;
}
.hw-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid #E0E8F5;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.hw-arrow:hover { background: #EEF4FF; border-color: var(--blue); }
.hw-arrow svg { width: 16px; height: 16px; color: var(--navy-88); }
.hw-arrow:hover svg { color: var(--blue); }

/* ── Track: peeking cards ── */
.hw-track-wrap {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.hw-track-wrap.dragging { cursor: grabbing; }
.hw-track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hw-card {
  flex: 0 0 calc((100% - 32px) / 3.15);
  min-width: 0;
  background: linear-gradient(160deg, #D2E4FF 0%, #E6F0FE 45%, #F9FBFF 100%);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.hw-card-text { margin-bottom: 20px; }

.hw-card-title {
  font-family: var(--font-b);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 10px;
}

.hw-card-desc {
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 500;
  color: #4C5568;
  line-height: 1.6;
}

.hw-card-img {
  margin-top: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(43,107,230,0.14);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hw-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 1280px) {
  .hw-section { padding: 80px 40px; }
  .hw-card { flex: 0 0 calc((100% - 32px) / 2.15); }
}

@media (max-width: 1024px) {
  .hw-section { padding: 72px 32px; }
  .hw-heading { font-size: 33px; }
  .hw-card { flex: 0 0 calc((100% - 16px) / 1.4); }
}

@media (max-width: 768px) {
  .hw-section { padding: 64px 20px; }
  .hw-header  { flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .hw-heading { font-size: 27px; }
  .hw-sub     { font-size: 12px; }
  .hw-card    { flex: 0 0 calc(100% - 40px); padding: 22px 20px; }
  .hw-card-title { font-size: 14px; }
  .hw-card-desc  { font-size: 12px; }
  .hw-section::before,
  .hw-section::after { width: 120px; }
}

@media (max-width: 480px) {
  .hw-section { padding: 48px 16px; }
  .hw-heading { font-size: 24px; }
  .hw-card    { flex: 0 0 calc(100% - 24px); padding: 18px 16px; }
  .hw-section::before,
  .hw-section::after { width: 70px; }
}

/* ════════════════════════════════════════
   PRODUCT PAGE — DOWNLOAD NOW
   Redesigned: a wide rounded card with a white rim and a soft blue
   gradient (pure CSS, no background image), phone mockup left and text
   plus store badges right. Stacks and centres at 900px and below. The
   card and its contents grow on wide screens. The heading size comes
   from the shared H2 scale, the text from the sitewide body tier.
════════════════════════════════════════ */

.dl-section {
  background: linear-gradient(180deg, #E2EDFF 0%, #EEF4FF 40%, #ffffff 100%);
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dl-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.dl-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 44px 64px;
  border: 10px solid rgba(255, 255, 255, 0.92);
  border-radius: 38px;
  background-color: #E6EFFF;
  background-image:
    linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(120deg, #F4F8FF 0%, #E3EDFE 45%, #D6E5FD 100%);
  background-clip: padding-box;
  box-shadow: 0 28px 70px rgba(33, 115, 236, 0.14), 0 0 0 1px rgba(184, 211, 250, 0.55);
  overflow: hidden;
}

.dl-mockup-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.dl-mockup {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  object-fit: contain;
}

.dl-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.dl-heading {
  font-family: var(--font-h);
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.dl-desc {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  max-width: 34em;
  margin-bottom: 32px;
}

.dl-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.dl-badge-link {
  display: inline-flex;
  line-height: 0;
  transition: transform var(--dur), opacity var(--dur);
}
.dl-badge-link:hover { opacity: 0.88; transform: translateY(-2px); }
.dl-badge-link img {
  height: 48px;
  width: auto;
  display: block;
}

/* ── Wide screens: the card, mockup and badges grow with the screen ── */
@media (min-width: 1281px) {
  .dl-inner { max-width: min(calc(100vw - 96px), 2432px); }
}
@media (min-width: 1441px) {
  .dl-panel { padding: clamp(44px, 3.2vw, 90px) clamp(64px, 4.6vw, 130px); gap: clamp(56px, 4vw, 110px); border-width: clamp(10px, 0.7vw, 18px); border-radius: clamp(38px, 2.6vw, 64px); }
  .dl-mockup { max-width: clamp(480px, 31vw, 900px); }
  .dl-badge-link img { height: clamp(48px, 3.1vw, 84px); }
  .dl-badges { gap: clamp(16px, 1.1vw, 28px); }
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .dl-section { padding: 80px 40px; }
}

@media (max-width: 1024px) {
  .dl-section { padding: 72px 32px; }
  .dl-panel   { padding: 40px 40px; gap: 32px; }
  .dl-mockup  { max-width: 400px; }
}

@media (max-width: 900px) {
  .dl-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 32px 44px;
    border-width: 8px;
    border-radius: 32px;
    max-width: 640px;
    margin: 0 auto;
  }
  .dl-mockup { max-width: min(100%, 420px); }
  .dl-content { align-items: center; text-align: center; }
  .dl-desc { margin-left: auto; margin-right: auto; }
  .dl-badges { justify-content: center; }
}

@media (max-width: 768px) {
  .dl-section { padding: 64px 20px; }
  .dl-heading { margin-bottom: 12px; }
  .dl-desc    { margin-bottom: 24px; }
  .dl-badge-link img { height: 44px; }
}

@media (max-width: 480px) {
  .dl-section { padding: 48px 16px; }
  .dl-panel   { padding: 28px 18px 32px; border-width: 6px; border-radius: 26px; gap: 22px; }
  .dl-mockup  { max-width: min(100%, 320px); }
  .dl-badges  { gap: 12px; }
  .dl-badge-link img { height: 42px; }
}

/* ════════════════════════════════════════
   PRODUCT PAGE — FAQ
════════════════════════════════════════ */

.faq-section {
  background: #ffffff;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-inner {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-heading {
  font-family: var(--font-h);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.8px;
  text-align: center;
  margin-bottom: 40px;
}

.faq-panel {
  width: 100%;
  border-radius: 32px;
  padding: 40px;
  background: linear-gradient(160deg, #E8F0FE 0%, #F4F8FE 55%, #FFFFFF 100%);
  box-shadow: 0 20px 60px rgba(43,107,230,0.08);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(43,107,230,0.06);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, #4E8CF0 0%, #2B6BE6 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur);
}
.faq-icon svg { width: 16px; height: 16px; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

.faq-q-text {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding var(--dur);
  padding: 0 24px 0 72px;
}
.faq-item.active .faq-a {
  max-height: 480px; /* was 240px — .faq-a p can now reach 24px font-size
    at wide screens via var(--fs-body), which needs more vertical room
    than the old fixed 12.5px text did to avoid clipping */
  padding: 0 24px 22px 72px;
}

.faq-a p {
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 1280px) {
  .faq-section { padding: 80px 40px; }
}

@media (max-width: 1024px) {
  .faq-section { padding: 72px 32px; }
  .faq-heading { font-size: 33px; }
  .faq-panel   { padding: 32px; border-radius: 28px; }
}

@media (max-width: 768px) {
  .faq-section { padding: 64px 20px; }
  .faq-heading { font-size: 27px; margin-bottom: 28px; }
  .faq-panel   { padding: 20px; border-radius: 22px; }
  .faq-q       { padding: 16px 18px; gap: 12px; }
  .faq-icon    { width: 28px; height: 28px; border-radius: 8px; }
  .faq-icon svg{ width: 14px; height: 14px; }
  .faq-q-text  { font-size: 13px; }
  .faq-a       { padding-left: 58px; }
  .faq-item.active .faq-a { padding: 0 18px 18px 58px; }
}

@media (max-width: 480px) {
  .faq-section { padding: 48px 16px; }
  .faq-heading { font-size: 24px; }
  .faq-panel   { padding: 14px; border-radius: 18px; }
  .faq-q       { padding: 14px; gap: 10px; }
  .faq-a       { padding-left: 48px; }
  .faq-item.active .faq-a { padding: 0 14px 16px 48px; }
}

/* ════════════════════════════════════════
   CONTACT US PAGE
════════════════════════════════════════ */

.cus-section {
  position: relative;
  background: linear-gradient(
    180deg,
    #B8D4F0  0%,
    #C6DCF5  10%,
    #D4E6F8  22%,
    #DFECF9  36%,
    #EAF2FB  52%,
    #F2F7FD  68%,
    #F9FCFE  84%,
    #FFFFFF  100%
  );
  padding: 64px 48px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cus-inner {
  width: 100%;
  max-width: 1200px;
}

/* Outer card: soft blue gradient "well" that the Calendly pop-up floats on */
.cus-card {
  background: linear-gradient(135deg, #E0EBFC 0%, #EFF4FE 55%, #FBFCFF 100%);
  border-radius: 56px;
  border: 1px solid #E8F0FB;
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding: 40px;
  min-height: 480px;
}

/* ── Left: Calendly embed — its own floating white "pop-up" card ── */
.cus-left {
  flex: 0 0 55%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 32px;
  box-shadow:
    0 20px 50px rgba(43,107,230,0.16),
    0 4px 14px rgba(43,107,230,0.10);
}

.cus-calendly-wrap {
  width: 100%;
  height: 700px;
}
.cus-calendly-wrap .calendly-inline-widget {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box;
}
.cus-calendly-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* ── Right: testimonial carousel + client logos — sits directly on the gradient ── */
.cus-right {
  flex: 1;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background: transparent;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 1024px) {
  .cus-section { padding: 48px 32px 80px; }
  .cus-card  { padding: 28px; gap: 24px; border-radius: 44px; }
  .cus-left  { padding: 28px; border-radius: 28px; }
  .cus-right { padding: 20px 12px; }
}

@media (max-width: 900px) {
  .cus-card  { flex-direction: column; }
  .cus-left  { flex: unset; }
  .cus-right { padding: 28px 12px 8px; }
  .cus-calendly-wrap { height: 700px; }
}

@media (max-width: 768px) {
  .cus-section { padding: 40px 20px 64px; }
  .cus-card    { border-radius: 32px; padding: 20px; gap: 20px; }
  .cus-left    { padding: 20px; border-radius: 24px; }
  .cus-right   { padding: 20px 8px 4px; }
  .cus-calendly-wrap { height: 620px; }
}

@media (max-width: 480px) {
  .cus-section { padding: 32px 16px 56px; }
  .cus-card    { border-radius: 24px; padding: 14px; gap: 14px; }
  .cus-left    { padding: 16px; border-radius: 20px; }
  .cus-right   { padding: 16px 8px 4px; }
  .cus-calendly-wrap { height: 640px; }
}

/* ════════════════════════════════════════
   CONTACT PAGE — EMAIL US / CHAT WITH US
════════════════════════════════════════ */

.cwu-section {
  background: #ffffff;
  padding: 64px 48px 96px;
  display: flex;
  justify-content: center;
}

.cwu-inner {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cwu-card {
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cwu-card--light {
  background: linear-gradient(135deg, #E1EDFF 0%, #E6F0FF 100%);
}
.cwu-card--blue {
  background: #2173EC;
}

.cwu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #2173EC;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.cwu-icon svg { width: 22px; height: 22px; }
.cwu-icon--light {
  background: #ffffff;
  color: var(--blue);
}

.cwu-text {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 420px;
}
.cwu-card--light .cwu-text { color: #1C1D1F; }
.cwu-card--blue  .cwu-text { color: #EEF4FF; }

.cwu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--pill);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--dur), transform 0.18s;
}
.cwu-btn:hover { opacity: 0.9; }

.cwu-btn--dark {
  background: #2173EC;
  color: #ffffff;
}
.cwu-btn--white {
  background: #ffffff;
  color: var(--blue);
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 900px) {
  .cwu-inner { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .cwu-section { padding: 48px 32px 80px; }
}

@media (max-width: 768px) {
  .cwu-section { padding: 40px 20px 64px; }
  .cwu-card    { padding: 24px; border-radius: 16px; }
  .cwu-text    { font-size: 13px; margin-bottom: 22px; }
  .cwu-icon    { width: 40px; height: 40px; margin-bottom: 16px; }
  .cwu-icon svg{ width: 20px; height: 20px; }
}

@media (max-width: 480px) {
  .cwu-section { padding: 32px 16px 56px; }
  .cwu-inner   { gap: 16px; }
  .cwu-card    { padding: 20px; border-radius: 14px; }
  .cwu-btn     { padding: 12px 24px; font-size: 12px; }
}

/* ════════════════════════════════════════
   CONTACT PAGE — OFFICE LOCATIONS
════════════════════════════════════════ */

.offc-section {
  background: #ffffff;
  padding: 0 48px 96px;
  display: flex;
  justify-content: center;
}

.offc-inner {
  width: 100%;
  max-width: 1200px;
}

.offc-card {
  background: linear-gradient(135deg, #F2F6FF 0%, #F9FBFF 100%);
  border-radius: 32px;
  border: 1px solid #E8F0FB;
  padding: 50px 100px 50px 100px;
}

.offc-panel {
  display: none;
  align-items: center;
  gap: 24px;
}
.offc-panel.active {
  display: flex;
}

.offc-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.offc-toprow {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.offc-toprow .offc-row {
  flex: none;
}

.offc-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.offc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.offc-icon {
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}
.offc-icon svg { width: 100%; height: 100%; }

.offc-text {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}

.offc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.offc-link svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 6px;
  padding: 2px;
  box-sizing: content-box;
}
.offc-link:hover { color: var(--blue); }

.offc-imgwrap {
  flex: 0 0 460px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.offc-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offc-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
}

.offc-tab {
  flex: 1;
  text-align: center;
  background: none;
  border: none;
  padding: 0 0 14px;
  cursor: pointer;
  position: relative;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 700;
  color: #C7D5EC;
  transition: color var(--dur);
}
.offc-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  max-width: 80%;
  height: 2px;
  background: #DCE6F7;
  transition: background var(--dur);
}
.offc-tab.active {
  color: var(--navy);
}
.offc-tab.active::after {
  background: var(--blue);
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 1024px) {
  .offc-section { padding: 0 32px 80px; }
  .offc-card    { padding: 32px; border-radius: 28px; }
  .offc-panel   { gap: 24px; }
  .offc-imgwrap { flex: 0 0 340px; }
}

@media (max-width: 900px) {
  .offc-panel   { flex-direction: column-reverse; align-items: stretch; }
  .offc-imgwrap { flex: unset; width: 100%; }
}

@media (max-width: 768px) {
  .offc-section { padding: 0 20px 64px; }
  .offc-card    { padding: 24px; border-radius: 22px; }
  .offc-tabs    { gap: 28px; margin-top: 28px; }
  .offc-tab     { font-size: 13px; }
  .offc-text, .offc-link { font-size: 13px; }
  .offc-toprow  { flex-direction: column; gap: 20px; }
}

@media (max-width: 480px) {
  .offc-section { padding: 0 16px 56px; }
  .offc-card    { padding: 18px; border-radius: 18px; }
  .offc-panel   { gap: 20px; }
  .offc-tabs    { gap: 20px; margin-top: 22px; }
  .offc-tab     { font-size: 12px; padding-bottom: 10px; }
  .offc-text, .offc-link { font-size: 12.5px; }
}


/* ════════════════════════════════════════════════════════════════
   WIDE-SCREEN & TYPE SCALE IMPROVEMENTS
   Fixes container/heading sizing on very wide viewports (1281px+)
   and guarantees the homepage H1 stays on exactly 2 lines at every
   desktop width. Below 1281px nothing here applies — all existing
   responsive rules above are untouched.
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   WIDE-SCREEN FIX — preview-only override, not in the theme files.
   Problem: every content container on the page (nav, hero, sections,
   footer) is capped at a fixed max-width (1100–1400px). On very wide
   viewports (1800px and up) this leaves large empty margins on both
   sides while the actual content stays narrow and centered.
   Fix: at wide breakpoints, let each container's max-width grow
   proportionally with the viewport instead of staying frozen, using
   CSS clamp() so it scales smoothly and never overshoots a sensible
   upper bound. Padding is also nudged up slightly so content doesn't
   run edge-to-edge. Below 1800px, nothing changes — the original
   theme values apply exactly as before.
══════════════════════════════════════════════════════════════ */

/* Product page containers (.pf-inner/.sf-inner/.hw-inner) start
   growing at 1440px, matching Smart Change's actual measured
   behavior — its container is already visibly wider than the 1140px
   floor by that width, not flat until 1800px like the block below. */
@media (min-width: 1440px) {
  .pf-inner, .sf-inner, .hw-inner {
    max-width: min(2600px, 95vw);
  }
}

@media (min-width: 1800px) {

  /* Sticky nav bar */
  nav#nav {
    max-width: clamp(1400px, 62vw, 1800px);
  }

  /* Generic section container reused across most homepage sections */
  .section-inner {
    max-width: clamp(1200px, 60vw, 1720px);
    padding: 0 64px;
  }

  /* Showcase (hero video) card wrapper */
  .sc-wrap {
    max-width: clamp(1140px, 58vw, 1640px);
  }

  /* Trusted-by logo marquee wrapper */
  .logo-track-wrap {
    max-width: clamp(1200px, 60vw, 1720px);
  }

  /* "Bringing the Power of AI" section — increased for a genuinely
     full-width feel on wide screens (was clamp(1200,60vw,1720),
     which stayed noticeably narrower than the viewport past ~2000px). */
  .ai-inner {
    max-width: clamp(1200px, 94vw, 2200px);
    padding: 0 64px;
  }

  /* Stats / "put your food safety on autopilot" number grid */
  .stats-grid {
    max-width: clamp(1100px, 56vw, 1560px);
  }

  /* "Why do industry leaders trust us" section */
  .trust-inner {
    max-width: clamp(1200px, 60vw, 1720px);
    padding: 0 64px;
  }

  /* Testimonials / contact-style card section on homepage */
  .contact-inner {
    max-width: clamp(1200px, 60vw, 1720px);
    padding: 0 64px;
  }

  /* Footer */
  .footer-top-inner,
  .footer-divider,
  .footer-bottom-inner,
  .footer-copyright-inner {
    max-width: clamp(1200px, 60vw, 1720px);
  }

  /* ── Product pages (page-sfs-smart-*.php) ──
     Matched directly against Smart Change's actual rendered width at
     8 different viewports (measured, not estimated) — the previous
     85vw/1640px ceiling here was noticeably narrower than Smart
     Change's real behavior at the same widths, which is what caused
     the "boxed" look at wide screens. min(2600px, 95vw) tracks the
     measured values within ~35px at every point tested. */
  /* .pf-inner/.sf-inner/.hw-inner growth now starts earlier, at
     1440px — see the dedicated block just above this one — matching
     Smart Change's actual measured behavior, which starts growing
     at that width, not 1800px. */
  .faq-inner {
    max-width: clamp(900px, 65vw, 1300px);
  }

  /* ── Solution pages (page-sfs-solution-*.php) ──
     Same fix, same reasoning, tuned for this group's 1200px/1720px
     floor/ceiling: 90vw starts growing past the floor at ~1333px and
     reaches the ceiling by ~1911px. */
  .sol-hero-inner, .irp-inner {
    max-width: clamp(1200px, 90vw, 1720px);
  }
}

/* Slightly larger ceiling for ultra-wide monitors (2200px+) so a
   2560px display doesn't hit the same wall the clamp() upper bound
   would otherwise create right around 2100-2200px viewport width. */
@media (min-width: 2200px) {
  nav#nav                    { max-width: 1900px; }
  .section-inner              { max-width: 1820px; padding: 0 72px; }
  .sc-wrap                    { max-width: 1740px; }
  .logo-track-wrap             { max-width: 1820px; }
  .ai-inner                    { max-width: 2400px; padding: 0 80px; }
  .stats-grid                  { max-width: 1660px; }
  .trust-inner                  { max-width: 1820px; padding: 0 72px; }
  .contact-inner                { max-width: 1820px; padding: 0 72px; }
  .footer-top-inner,
  .footer-divider,
  .footer-bottom-inner,
  .footer-copyright-inner       { max-width: 1820px; }

  /* Product pages — .pf-inner/.sf-inner/.hw-inner already handled by
     the min(2600px, 95vw) rule above at every width, including this
     tier, so no separate override needed here. */
  .faq-inner                                  { max-width: 1380px; }

  /* Solution pages */
  .sol-hero-inner, .irp-inner     { max-width: 1820px; }
}

/* ══════════════════════════════════════════════════════════════
   HERO H1 FIX — preview-only override, not in the theme files.

   Root cause: .hc (hero content wrapper) is fixed at max-width:860px
   while .hl (H1) is fixed at font-size:60px. At that font size the
   second line ("Management Software Should Be.") needs ~900px+ to
   fit on one line, so it wraps onto its own line and pushes the
   heading to 3 lines total instead of the intended 2.

   Fix: widen .hc and scale .hl together as the viewport grows, using
   minimum-width values verified empirically in a live browser layout
   (binary-searched per font size, with a safety margin added) rather
   than assumed — so 2 lines is guaranteed at every step from 1440px
   up through ultra-wide monitors.
══════════════════════════════════════════════════════════════ */

@media (min-width: 1281px) {
  .hc {
    max-width: 960px;   /* verified min for 60px = 901px, +~60px margin */
  }
  .hl {
    font-size: 60px;
    letter-spacing: -1.8px;
  }
  .hs {
    max-width: 900px;
    font-size: 12px;
  }
}
@media (min-width: 1281px) {
  body.lang-fr .hc { max-width: 1100px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 1200px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


/* ── KNOWN, PRE-EXISTING ISSUE (not fixed here): the ES/FR/PT
   homepage H1 is designed as 3 lines (not 2, like English) — see
   .hl-br-d in the base stylesheet. All three translated headlines
   are long enough that, at the fluid font-size scale shared with
   English, they render as more than the intended 3 lines across
   most of the desktop range (confirmed via testing against the
   original, unwidened 860px container — this predates any of this
   round's changes). Widening the container alone isn't sufficient:
   since the font size keeps growing at wider breakpoints too, a
   wider container at one tier just pushes the same wrap problem to
   the next one, and at some widths it gets worse, not better. A
   real fix needs dedicated, independent font-size AND container
   tiers per language (verified separately at every breakpoint, not
   inherited from English's cascade) — a larger, separate piece of
   work, deliberately left alone here rather than shipped half-done. ── */

@media (min-width: 1600px) {
  .hc {
    max-width: 1120px;  /* verified min for 70px = 1062px, +~60px margin */
  }
  .hl {
    font-size: 70px;
    letter-spacing: -2px;
  }
  .hs {
    max-width: 1000px;
    font-size: 13px;
  }
}
@media (min-width: 1600px) {
  body.lang-fr .hc { max-width: 1275px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 1392px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


@media (min-width: 1800px) {
  .hc {
    max-width: 1260px;  /* verified min for 78px = 1191px, +~70px margin */
  }
  .hl {
    font-size: 78px;
    letter-spacing: -2.2px;
  }
  .hs {
    max-width: 1080px;
    font-size: 14px;
  }
}
@media (min-width: 1800px) {
  body.lang-fr .hc { max-width: 1428px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 1559px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


@media (min-width: 2100px) {
  .hc {
    max-width: 1460px;  /* verified min for 90px = 1385px, +~75px margin */
  }
  .hl {
    font-size: 90px;
    letter-spacing: -2.4px;
  }
  .hs {
    max-width: 1180px;
    font-size: 15px;
  }
}
@media (min-width: 2100px) {
  body.lang-fr .hc { max-width: 1657px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 1809px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


@media (min-width: 2400px) {
  .hc {
    max-width: 1560px;  /* verified min for 96px = 1481px, +~80px margin */
  }
  .hl {
    font-size: 96px;
    letter-spacing: -2.6px;
  }
  .hs {
    max-width: 1260px;
    font-size: 16px;
  }
}
@media (min-width: 2400px) {
  body.lang-fr .hc { max-width: 1767px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 1929px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


@media (min-width: 2700px) {
  .hc {
    max-width: 1780px;  /* verified min for 110px = 1695px, +~85px margin */
  }
  .hl {
    font-size: 110px;
    letter-spacing: -2.9px;
  }
  .hs {
    max-width: 1360px;
    font-size: 17px;
  }
}
@media (min-width: 2700px) {
  body.lang-fr .hc { max-width: 2017px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 2202px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


@media (min-width: 3000px) {
  .hc {
    max-width: 2010px;  /* verified min for 122px ≈ interpolated, +~90px margin */
  }
  .hl {
    font-size: 122px;
    letter-spacing: -3.1px;
  }
  .hs {
    max-width: 1460px;
    font-size: 18px;
  }
}
@media (min-width: 3000px) {
  body.lang-fr .hc { max-width: 2269px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 2478px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


@media (min-width: 3300px) {
  .hc {
    max-width: 2270px;  /* verified min for 140px = 2178px, +~90px margin */
  }
  .hl {
    font-size: 140px;
    letter-spacing: -3.4px;
  }
  .hs {
    max-width: 1600px;
    font-size: 19px;
  }
}
@media (min-width: 3300px) {
  body.lang-fr .hc { max-width: 2564px; } /* verified empirically: FR's "Gestion de la Securite Alimentaire" phrase needs ~9% more width than English to hold 3 lines */
  body.lang-pt .hc { max-width: 2799px; } /* verified empirically: PT's "Software de Gerenciamento de Qualidade" phrase needs ~20% more width than English to hold 3 lines */
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL FLUID TYPE SCALE — preview-only override, not in theme files.

   Rebuilt as a tiered system using CSS custom properties instead of
   hand-picking dozens of individual classes one at a time (which is
   exactly how .btn, .ti, and .trusted-title got missed the first
   time round). Every text element on the homepage falls into one of
   six size tiers; each tier is one clamp()-based variable, defined
   once, referenced everywhere. Adding a missed element later means
   adding its selector to the right tier group below — never a new
   one-off font-size value.

   Tiers (desktop-only, min-width 1281px so mobile/tablet is 100%
   untouched — the theme's own responsive rules keep controlling
   everything below that):
     --fs-h1     hero headline                    60 → 96px
     --fs-h2     section headings (H2s)            36 → 56px
     --fs-h3     card/subsection titles (H3s)      18 → 23px
     --fs-stat   big display numbers (stat-number) 64 → 84px
     --fs-body   paragraphs, descriptions, links   14 → 19px
     --fs-label  small caps/badges/meta text       10-12 → 14-16px
     --fs-btn    buttons and pill nav text         10-11 → 14-15px
══════════════════════════════════════════════════════════════ */

:root {
  --fs-h2:    36px;
  --fs-h3:    18px;
  --fs-stat:  64px;
  --fs-body:  14px;
  --fs-label: 11px;
  --fs-btn:   11px;
}

@media (min-width: 1281px) {
  :root {
    --fs-h2:    clamp(36px, 2.3vw, 70px);
    --fs-h3:    clamp(18px, 1.15vw, 28px);
    --fs-stat:  clamp(64px, 4.1vw, 105px);
    --fs-body:  clamp(14px, 0.95vw, 24px);
    --fs-label: clamp(11px, 0.75vw, 18px);
    --fs-btn:   clamp(11px, 0.75vw, 18px);
  }

  /* ── Tier: H1 — intentionally NOT set here. .hl has its own dedicated
     hard-breakpoint scale above (see "HERO H1 FIX") where each font-size
     step is paired with an empirically-verified minimum .hc container
     width, guaranteeing the headline never wraps to 3 lines. A smooth
     clamp() curve can't guarantee that, so H1 stays on fixed steps while
     every other tier below uses clamp() for smoothness. ── */

  /* ── Tier: H2 (every section heading, whatever its class name) ── */
  .sol-heading, .sol-title, .sol-title-blue,
  .ai-heading, .trust-heading, .stats-heading,
  .contact-heading, .trusted-title,
  .pf-heading, .sf-heading, .hw-heading, .dl-heading, .faq-heading,
  .irp-heading {
    font-size: var(--fs-h2) !important;
    line-height: 1.2 !important;
  }

  /* ── Tier: H3 / card titles ── */
  .sol-card-title, .pf-card-title {
    font-size: var(--fs-h3) !important;
    line-height: 1.35 !important;
  }

  /* ── Tier: big display numbers ── */
  .stat-number {
    font-size: var(--fs-stat) !important;
  }

  /* ── Tier: body text — paragraphs, descriptions, form fields, links ── */
  p, span:not(.sol-cat):not(.ann-cta):not(.sol-card-title):not(.acc):not(.contact-accent):not(.stats-accent):not(.trust-accent):not(.ai-accent):not(.mt-u):not(.mt-n):not(.mt-d):not(.mh):not(.res-browse-heading-blue):not(.res-card-dl):not(.res-page-text):not(.res-page-label):not(.hw2-heading-blue):not(.p-hs):not(.hw3-heading-blue):not(.tcard-quote):not(.smcm-sf-heading-blue):not(.smcm-why-heading-blue):not(.smcm-tour-accent):not(.smcm-compare-heading-blue):not(.smcm-hero-title-blue):not(.smcm-faq-heading-blue):not(.smai-hero-title-accent):not(.smai-sf-heading-blue):not(.smcm-faq-question-text):not(.car-hl-accent):not(.car-life-heading-line1):not(.car-life-heading-line2):not(.car-jobs-heading-accent):not(.car-team-heading-accent):not(.car-perk-label):not(.car-job-row__location):not(.car-team-badge):not(.abt-hl-accent):not(.abt-stat-label):not(.accent):not(.abt-icon-label):not(.abt-stat-number):not(.blog-read-more):not(.blog-card-cta):not(.blog-card-date):not(.blog-highlight-date):not(.blog-page-label):not(.blog-page-text), li,
  a:not(.nav-link):not(.logo):not(.sol-card-know):not(.mi):not(.smai-hero-btn):not(.car-job-row__apply):not(.abt-cta-btn):not(.lg-toc-link):not(.res-hero-btn):not(.hw2-cta),
  button:not(.sol-card-plus):not(.sol-card-close):not(.sol-arrow):not(.trust-tab):not(.tdot):not(.sol-dot):not(.hamburger):not(.ann-x):not(.lang-btn):not(.trust-tab):not(.btn),
  input, textarea, select, label,
  .hs, .sol-sub, .sol-card-desc, .sol-card-know, .contact-sub,
  .ai-sub, .stats-sub, .trust-sub, .footer-col-links a,
  .footer-cta-heading, .contact-quote-text, .tcard-text,
  .contact-form label, .contact-form-privacy,
  .footer-legal a, .footer-copyright-inner,
  .tcard-role, .tcard-name, .contact-clients-label,
  .stat-label-bot, .footer-col-title,
  .sol-card-body, .sol-card-desc,
  .ann span, .mob-cta, .footer-book-btn, .contact-form-submit,
  .sol-know-more, .ai-cta {
    font-size: var(--fs-body) !important;
  }

  /* ── Tier: small labels/badges/micro text — one notch below body ── */
  .sol-cat, .trust-milestone-label,
  .stat-label-top, .footer-legal a, .footer-copyright-inner,
  .tcard-role, .ann span {
    font-size: var(--fs-label) !important;
  }

  /* ── Tier: buttons & hero pill nav (Book a demo, Configurable/User
     Friendly/... rotating pills) — previously missed entirely ── */
  .btn, .ti {
    font-size: var(--fs-btn) !important;
  }

  /* The pill track container + button itself were fixed-height/padding,
     so larger pill text had no room to breathe — scale these together
     with --fs-btn using the same clamp() curve. */
  .tcb {
    max-width: clamp(920px, 55vw, 1180px);
    height: clamp(50px, 2.9vw, 64px);
  }
  .btn {
    padding: clamp(28px, 1.6vw, 34px) clamp(36px, 2.1vw, 44px);
  }
}

/* ════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   Blur+fade+rise-in effect for sections/headings/cards as they enter
   the viewport, driven by IntersectionObserver in main.js. See the
   "SCROLL REVEAL" JS block for the observer logic and stagger system.
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL — preview-only addition, not in the theme files.

   A lightweight blur+fade+rise-in effect for sections/headings/cards
   as they enter the viewport while scrolling. Pure CSS transitions
   driven by a small IntersectionObserver in scroll-reveal.js — no
   animation library needed.

   Respects prefers-reduced-motion (users who've asked for less
   motion get an instant, non-animated appearance instead).
══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  transition:
    opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Slightly larger rise + longer blur for big hero-style headlines */
.reveal-hero {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(36px);
  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.reveal-hero.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Subtler version for supporting text (subheads, paragraphs) so the
   hierarchy of motion matches the visual hierarchy of the content */
.reveal-sub {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  transition:
    opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.reveal-sub.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Card-style reveal — slightly more lift, used for grid items that
   stagger in one after another */
.reveal-card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(24px) scale(0.98);
  transition:
    opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.reveal-card.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* Stagger delays — applied via JS as inline transition-delay so grid
   items animate in sequence rather than all at once. These classes
   are a fallback / manual-use option if inline delay isn't set. */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.48s; }

/* Users who've asked for reduced motion get content immediately,
   with no blur/motion animation at all. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-hero, .reveal-sub, .reveal-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   EXTRA ANIMATION IDEAS — preview-only, experimental, not in the
   theme files. Kept subset after review: button glow pulse, logo
   marquee pause-on-hover, ambient hero background drift.
   Removed after feedback: nav link underline, card hover lift,
   button press feedback, trust tab underline glide.
══════════════════════════════════════════════════════════════ */

/* Soft breathing glow on the primary hero CTA, subtle and slow so it
   reads as "alive" rather than distracting. Applies to the homepage
   hero button (.btn), product page hero button (.p-btn), and
   solution page hero button (.sol-btn). */
@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(3,81,194,0.25); }
  50%      { box-shadow: 0 8px 32px rgba(3,81,194,0.45); }
}
.btn, .p-btn, .sol-btn {
  animation: btn-glow-pulse 3.2s ease-in-out infinite;
}

/* Logo marquee pauses on hover so a visitor can read a logo */
.logo-row:hover .logo-marquee,
.logo-row:hover .logo-marquee-reverse {
  animation-play-state: paused;
}

/* Subtle hero background drift — very slow, large-scale ambient
   movement on the radial gradient behind the hero text. Homepage
   hero only: product (.p-hero) and solution (.sol-hero) heroes use
   a different background architecture (gradient lives on a pseudo-
   element or parent, not directly on the hero element), so this
   effect is left homepage-only rather than applied incorrectly. */
@keyframes hero-bg-drift {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 52% 4%; }
  100% { background-position: 50% 0%; }
}
.hero {
  background-size: 140% 140%;
  animation: hero-bg-drift 18s ease-in-out infinite;
}

/* Respect reduced-motion: disable the ambient/looping effects entirely */
@media (prefers-reduced-motion: reduce) {
  .btn, .p-btn, .sol-btn { animation: none; }
  .hero { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   SMART CHANGE PRODUCT PAGE (page-sfs-smart-change.php)
   ════════════════════════════════════════════════════════════════
   Converted from an Elementor-embedded HTML build. All classes/IDs
   use an "smcm-" prefix (Smart Change Management) to avoid any
   collision with the rest of the theme's class names — verified
   zero overlap at conversion time. Colors (--smcm-navy, --smcm-blue,
   etc.) are remapped to the theme's own --navy/--blue/etc. variables
   rather than duplicated, since the values were already identical.
   Fonts are mapped to the theme's Space Grotesk/Manrope rather than
   this page's original Plus Jakarta Sans/Poppins, per explicit
   decision to match the rest of the site.

   The "How Smart Change Works" tour section's CSS is included below
   even though its HTML is currently commented out in the template —
   kept in case it's re-enabled later. Its JS (further down in
   main.js) already no-ops safely when the section's elements don't
   exist in the DOM.
   ════════════════════════════════════════════════════════════════ */



/* Fonts: uses the theme's existing Space Grotesk / Manrope (loaded
   theme-wide via header.php) rather than this page's original
   Plus Jakarta Sans / Poppins — see --smcm-font-h/--smcm-font-b below. */

.smcm-page {

--smcm-navy: var(--navy); /* identical value to theme's --navy, remapped to keep one source of truth */

--smcm-blue: var(--blue);

--smcm-white: var(--white);

--smcm-muted: #6B7A99;

--smcm-pill: var(--pill);

--smcm-font-h: var(--font-h); /* theme's Space Grotesk, not this page's original Plus Jakarta Sans */

--smcm-font-b: var(--font-b); /* theme's Manrope, not this page's original Poppins */

font-family: var(--smcm-font-b);

color: var(--smcm-navy);

width: 100%;

max-width: 100%;

margin: 0;

padding: 0;

box-sizing: border-box;

/* Background gradient removed from here — this wrapper spans the
   ENTIRE page (not just the hero), so its gradient's fixed
   percentage stops were compressed across Smart Change's full page
   height (~7x taller than a page like Smart Audit). Scrolling down
   moved through the gradient's darker range for a long stretch,
   reading as a solid flat blue block instead of a quick fade to
   white. The page now relies on the sitewide body{} gradient
   instead, exactly like every other page (Smart Audit, Smart GPT,
   etc.) — .smcm-hero-dashboard's own background: transparent lets
   it show through cleanly for the actual hero area at the top. */

}

.smcm-page, .smcm-page *, .smcm-page *::before, .smcm-page *::after {

box-sizing: border-box;

}

/* Neutralize theme/Elementor default button & link chrome inside this
widget only.

Zero-specificity :where() so any later, more specific rule in this file
wins. */

.smcm-page :where(button) {

all: unset;

box-sizing: border-box;

cursor: pointer;

font-family: var(--smcm-font-b);

}

.smcm-page :where(a) {

text-decoration: none;

box-sizing: border-box;

}

.smcm-page h1,

.smcm-page h2,

.smcm-page h3,

.smcm-page .smcm-hero-title,

.smcm-page .smcm-tour-heading,

.smcm-page .smcm-tour-intro-title,

.smcm-page .smcm-sf-heading {

font-family: var(--smcm-font-h) !important;

}

.smcm-page .smcm-sf-tab-title,

.smcm-page .smcm-sf-heading-blue {

font-family: var(--smcm-font-h) !important;

}

.smcm-page .smcm-sf-tab-desc {

font-family: var(--smcm-font-b) !important;

}

.smcm-page p,

.smcm-page button,

.smcm-page a,

.smcm-page span,

.smcm-page .smcm-hero-subtitle,

.smcm-page .smcm-tour-intro-desc,

.smcm-page .smcm-tour-callout,

.smcm-page .smcm-tour-counter {

font-family: var(--smcm-font-b) !important;

}

.smcm-hero-dashboard {

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

overflow: hidden;

background: transparent;

}

.smcm-hero {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

width: 100%;

min-height: 52vh;

padding: 132px 48px 8px;

background: transparent;

text-align: center;

}

.smcm-hero-content {

width: 100%;

max-width: clamp(320px, 62vw, 1760px);

display: flex;

flex-direction: column;

align-items: center;

}

.smcm-hero-title {

font-family: var(--smcm-font-h);

font-size: clamp(36px, 4vw, 118px);

font-weight: 700;

color: var(--smcm-navy);

line-height: 1.24;

letter-spacing: -1.2px;

margin-bottom: 16px;

}

.smcm-hero-subtitle {

font-family: var(--smcm-font-b);

font-size: clamp(12px, 1vw, 18px);

font-weight: 500;

color: var(--smcm-muted);

line-height: 1.6;

max-width: clamp(400px, 46vw, 900px);

margin-bottom: 32px;

}

.smcm-hero-btn {

position: relative;

z-index: 5;

display: inline-flex !important;

align-items: center;

gap: 10px;

background: linear-gradient(145deg, #0351C2 0%, #01265C 100%)
!important;

color: #fff !important;

padding: 20px 36px !important;

border-radius: var(--smcm-pill) !important;

font-family: var(--smcm-font-b);

font-size: 13px;

font-weight: 700;

text-decoration: none !important;

white-space: nowrap;

letter-spacing: 0.1px;

margin-bottom: 32px;

border: none !important;

}

@media (min-width: 1440px) {

.smcm-tour-section::before { width: min(1400px, calc(100% - 64px)); }

.smcm-hero { min-height: 54vh; padding: 148px 80px 8px; }

}

@media (max-width: 768px) {

.smcm-hero { min-height: 40vh; padding: 96px 20px 6px; }

.smcm-hero-title { font-size: 36px; }

.smcm-hero-subtitle { font-size: 12px; }

}

/* Dashboard grows in normal document flow, driven purely by scroll

distance from the very top of the page --- no pin/fixed step, so it

starts scaling the instant the user begins scrolling, since hero

and dashboard now live in one continuous section. */

.smcm-reveal-shot {

display: block;

width: 100%;

max-width: clamp(560px, 68vw, 1900px);

height: auto;

object-fit: contain;

border-radius: 16px;

transform: scale(0.6);

transform-origin: center top;

will-change: transform;

}

.smcm-reveal-shot-wrap {

width: 100%;

display: flex;

justify-content: center;

padding: 0 48px 40px;

box-sizing: border-box;

}

@media (min-width: 2200px) {

.smcm-reveal-shot-wrap { padding: 0 64px 48px; }

}

@media (min-width: 1600px) {

.smcm-tour-section::before { width: min(1520px, calc(100% - 72px)); }

}

@media (min-width: 1800px) {

.smcm-tour-section::before { width: min(1680px, calc(100% - 80px)); }

}

@media (min-width: 2400px) {

.smcm-tour-section::before { width: min(2040px, calc(100% - 112px)); }

}

.smcm-sf-section {

background: #ffffff;

padding: 80px 48px;

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

}

.smcm-sf-inner {

width: 100%;

max-width: min(1140px, 92vw);

display: flex;

flex-direction: column;

align-items: center;

}

.smcm-sf-header {

text-align: center;

margin-bottom: 40px;

}

.smcm-sf-heading {

font-family: var(--smcm-font-h);

font-size: var(--fs-h2);

font-weight: 700;

color: var(--smcm-navy);

letter-spacing: -0.8px;

line-height: 1.2;

margin: 0;

}

.smcm-sf-heading-blue {

color: var(--smcm-blue);

font-size: inherit;

font-weight: inherit;

font-family: var(--smcm-font-h);

}

.smcm-sf-subtitle {

margin: 12px auto 0;

max-width: 760px;

font-family: var(--smcm-font-b) !important;

font-size: 13px;

font-weight: 500;

line-height: 1.7;

color: var(--smcm-muted);

text-align: center;

}

.smcm-sf-layout {

width: 100%;

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

gap: clamp(32px, 3.5vw, 64px);

}

.smcm-sf-tabs {

flex: 1 1 300px;

max-width: 380px;

width: 100%;

display: flex;

flex-direction: column;

}

.smcm-sf-tab {

padding: 16px 0 16px 14px;

border-bottom: 1px solid rgba(11,22,63,0.08);

border-left: 3px solid transparent;

cursor: pointer;

transition: border-color 0.25s;

}

.smcm-sf-tab:first-child { padding-top: 0; }

.smcm-sf-tab.smcm-sf-active {

border-left-color: var(--smcm-blue);

}

.smcm-sf-tab-title {

font-family: var(--smcm-font-h);

font-size: 15px;

font-weight: 700;

color: var(--smcm-muted);

margin: 0;

transition: color 0.25s;

}

.smcm-sf-tab.smcm-sf-active .smcm-sf-tab-title { color:
var(--smcm-navy); }

.smcm-sf-tab-desc {

display: none;

font-family: var(--smcm-font-b);

font-size: 12.5px;

font-weight: 500;

color: var(--smcm-muted);

line-height: 1.6;

margin: 8px 0 0;

}

.smcm-sf-tab.smcm-sf-active .smcm-sf-tab-desc { display: block; }

.smcm-sf-tab-progress {

display: none;

width: 100%;

height: 2px;

background: rgba(43,107,230,0.15);

margin-top: 14px;

border-radius: 2px;

overflow: hidden;

}

.smcm-sf-tab.smcm-sf-active .smcm-sf-tab-progress { display: block; }

.smcm-sf-tab-progress-fill {

display: block;

height: 100%;

width: 0%;

background: var(--smcm-blue);

border-radius: 2px;

}

.smcm-sf-tab-progress-fill.smcm-sf-animate {

animation: smcm-sf-progress 5s linear forwards;

}

@keyframes smcm-sf-progress {

from { width: 0%; }

to { width: 100%; }

}

.smcm-sf-tab-mobile-img {

display: none;

}

.smcm-sf-panel {

flex: 0 1 460px;

width: 100%;

max-width: 460px;

border-radius: 28px;

background: linear-gradient(135deg, #EAF2FC 0%, #F7FAFE 55%, #FFFFFF
100%);

box-shadow: 0 20px 60px rgba(43,107,230,0.08);

padding: clamp(18px, 2vw, 28px);

display: flex;

align-items: center;

justify-content: center;

box-sizing: border-box;

}

.smcm-sf-media {

position: relative;

width: 100%;

max-width: 340px;

margin: 0 auto;

aspect-ratio: 4 / 5;

overflow: hidden;

border-radius: 18px;

}

.smcm-sf-media-img {

width: 100%;

height: 100%;

display: block;

object-fit: contain;

opacity: 0;

position: absolute;

top: 0; left: 0;

transition: opacity 0.4s ease;

}

.smcm-sf-media-img.smcm-sf-active { opacity: 1; }

@media (max-width: 1280px) {

.smcm-sf-section { padding: 72px 40px; }

}

@media (max-width: 1024px) {

.smcm-sf-section { padding: 64px 32px; }

.smcm-sf-heading { font-size: 30px; }

.smcm-sf-layout { gap: 36px; }

.smcm-sf-tabs { max-width: 320px; }

.smcm-sf-panel { flex-basis: 360px; max-width: 360px; padding: 22px;
border-radius: 24px; }

.smcm-sf-media { max-width: 300px; }

}

@media (max-width: 900px) {

.smcm-sf-layout {

flex-direction: column;

max-width: 520px;

margin: 0 auto;

align-items: stretch;

}

.smcm-sf-panel { display: none; }

.smcm-sf-tabs { max-width: 100%; width: 100%; flex: 1 1 auto; }

.smcm-sf-tab-mobile-img {

display: none;

width: 100%;

max-width: 360px;

height: auto;

aspect-ratio: 4 / 5;

object-fit: contain;

border-radius: 16px;

margin: 16px auto 0;

box-shadow: 0 12px 30px rgba(43,107,230,0.14);

background: linear-gradient(135deg, #EEF4FF 0%, #E2EDFF 100%);

}

.smcm-sf-tab.smcm-sf-active .smcm-sf-tab-mobile-img { display: block; }

/* On mobile/tablet the image sits inside .smcm-sf-tab itself, so

the active-tab accent border (normally on the whole tab) was

running the full height including alongside the image. Move it

to just the title/description text instead. */

.smcm-sf-tab {

border-left-color: transparent !important;

padding-left: 0 !important;

}

.smcm-sf-tab-title,

.smcm-sf-tab-desc {

padding-left: 14px;

border-left: 3px solid transparent;

}

.smcm-sf-tab.smcm-sf-active .smcm-sf-tab-title,

.smcm-sf-tab.smcm-sf-active .smcm-sf-tab-desc {

border-left-color: var(--smcm-blue);

}

}

@media (max-width: 768px) {

.smcm-sf-section { padding: 48px 20px; }

.smcm-sf-header { margin-bottom: 24px; }

.smcm-sf-heading { font-size: 24px; }

.smcm-sf-layout { gap: 8px; max-width: 100%; }

.smcm-sf-tab { padding: 12px 0; }

.smcm-sf-tab-title { font-size: 14px; }

.smcm-sf-tab-desc { font-size: 12px; }

.smcm-sf-tab-mobile-img { max-width: 100%; }

}

@media (max-width: 480px) {

.smcm-sf-section { padding: 40px 16px; }

.smcm-sf-heading { font-size: 22px; }

.smcm-sf-tab-title { font-size: 13px; }

.smcm-sf-tab-desc { font-size: 11.5px; }

}

.smcm-tour-section {

background: #ffffff;

position: relative;

width: 100%;

padding: 96px clamp(28px, 5vw, 80px) 72px;

overflow: visible;

}

.smcm-tour-section::before {

content: '';

position: absolute;

left: 50%;

top: 24px;

bottom: 24px;

transform: translateX(-50%);

width: min(1280px, calc(100% - 48px));

background-image:
url('https://smartaudits.online/wp-content/uploads/2026/08/background.svg');

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

border-radius: 28px;

z-index: 0;

pointer-events: none;

}

.smcm-tour-section > * {

position: relative;

z-index: 1;

}

.smcm-tour-heading {

text-align: center;

font-family: var(--smcm-font-h);

font-size: var(--fs-h2);

font-weight: 700;

color: var(--smcm-navy);

margin: 0 0 clamp(20px, 2vw, 30px);

}

.smcm-tour-subtitle {

margin: -14px auto 28px;

max-width: 760px;

text-align: center;

font-family: var(--smcm-font-b) !important;

font-size: clamp(13px, 1vw, 16px);

font-weight: 500;

line-height: 1.6;

color: var(--smcm-muted);

}

.smcm-tour-heading .smcm-tour-accent {

color: inherit;

font-family: var(--smcm-font-h) !important;

}

.smcm-tour-card {

position: relative;

width: 100%;

max-width: min(1400px, 94vw);

margin: 0 auto;

background: #fff;

border-radius: clamp(14px, 1.2vw, 20px);

box-shadow: 0 24px 64px rgba(11,22,63,0.14);

overflow: hidden;

}

.smcm-tour-chrome {

display: flex;

align-items: center;

gap: 8px;

padding: 12px 18px;

background: transparent;

border-bottom: 1px solid #E7ECF5;

}

.smcm-tour-dot { width: 11px; height: 11px; border-radius: 50%; }

.smcm-tour-dot.smcm-tour-dot-red { background: #FF5F57; }

.smcm-tour-dot.smcm-tour-dot-yellow { background: #FEBC2E; }

.smcm-tour-dot.smcm-tour-dot-green { background: #28C840; }

.smcm-tour-viewport {

position: relative;

min-height: 0;

overflow: hidden;

}

.smcm-tour-slide {

display: none;

padding: clamp(22px, 2.2vw, 32px);

}

.smcm-tour-slide.smcm-tour-active { display: block; }

.smcm-tour-slide[data-slide="1"] {

padding: clamp(22px, 2.2vw, 32px);

}

.smcm-tour-intro {

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

gap: clamp(24px, 2.4vw, 40px);

min-height: 0;

padding: 0 clamp(24px, 3.5vw, 56px);

box-sizing: border-box;

width: 100%;

max-width: min(1180px, 100%);

margin: 0 auto;

}

.smcm-tour-intro-photo {

position: relative;

flex: 0 1 340px;

width: 100%;

max-width: 340px;

border-radius: clamp(14px, 1.2vw, 20px);

overflow: hidden;

background: #E8F0FE;

aspect-ratio: 4 / 5;

max-height: min(420px, 50vh);

box-shadow:

0 0 0 6px rgba(210, 228, 255, 0.9),

0 0 40px 8px rgba(43, 107, 230, 0.16),

0 16px 40px rgba(11, 22, 63, 0.1);

}

.smcm-tour-portrait {

width: 100%;

height: 100%;

object-fit: cover;

object-position: center top;

display: block;

}

.smcm-tour-intro-copy {

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

flex: 1 1 320px;

max-width: 460px;

padding: clamp(4px, 1vw, 10px) 0;

position: relative;

text-align: left;

box-sizing: border-box;

}

.smcm-tour-intro-title {

font-family: var(--smcm-font-h);

font-size: clamp(17px, 1.7vw, 27px);

font-weight: 700;

color: var(--smcm-navy);

margin: 0 0 clamp(8px, 0.9vw, 12px);

line-height: 1.28;

letter-spacing: -0.35px;

max-width: 28em;

}

.smcm-tour-intro-desc {

font-family: var(--smcm-font-b);

font-size: clamp(12px, 1vw, 15px);

font-weight: 400;

color: #6B7A99;

line-height: 1.6;

margin: 0 0 clamp(14px, 1.6vw, 24px);

max-width: 36em;

}

.smcm-tour-start-btn {

font-size: clamp(13px, 1.05vw, 16px) !important;

padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 28px) !important;

}

.smcm-tour-powered {

margin-top: clamp(16px, 2vw, 28px);

padding-top: 0;

font-family: var(--smcm-font-b);

font-size: clamp(11px, 0.95vw, 14px);

font-weight: 500;

color: #8A97B0;

align-self: flex-start;

}

.smcm-tour-powered span {

color: #2B6BE6;

font-weight: 600;

}

.smcm-tour-start-btn {

display: inline-flex !important;

align-items: center;

justify-content: center;

gap: 8px;

width: auto;

max-width: max-content;

align-self: flex-start;

background: #2B6BE6 !important;

color: #fff !important;

padding: 12px 26px !important;

border-radius: 10px !important;

font-family: var(--smcm-font-b);

font-size: 14px;

font-weight: 600;

text-decoration: none !important;

border: none !important;

cursor: pointer;

box-shadow: 0 6px 18px rgba(43,107,230,0.25) !important;

transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.smcm-tour-start-btn:hover {

transform: translateY(-1px);

box-shadow: 0 8px 22px rgba(43,107,230,0.32) !important;

}

.smcm-tour-hotspot {

position: relative;

display: inline-flex;

cursor: pointer;

z-index: 2;

}

.smcm-tour-hotspot::after {

content: '';

position: absolute;

inset: -4px;

border-radius: inherit;

box-shadow: 0 0 0 0 rgba(43, 107, 230, 0.4);

animation: smcm-tour-pulse 1.8s ease-out infinite;

pointer-events: none;

}

.smcm-tour-hotspot.smcm-tour-hotspot-pill::after {

border-radius: 999px;

}

.smcm-tour-hotspot.smcm-tour-hotspot-rect::after {

border-radius: 14px;

}

@keyframes smcm-tour-pulse {

0% { box-shadow: 0 0 0 0 rgba(43, 107, 230, 0.4); }

70% { box-shadow: 0 0 0 10px rgba(43, 107, 230, 0); }

100% { box-shadow: 0 0 0 0 rgba(43, 107, 230, 0); }

}

/* ── Slide 14: Final CTA --- Book Demo ── */

.smcm-tour-slide14 {

position: relative;

/* Both children here (bg + modal) are position:absolute, so unlike

other slides this one has no in-flow content to size itself by ---

needs a min-height floor or it collapses to 0. This still grows

for more content; it just won't disappear. */

min-height: clamp(280px, 26vw, 420px);

border-radius: 12px;

overflow: hidden;

background: #F4F7FC;

}

.smcm-tour-s14-bg {

position: absolute;

inset: 0;

filter: blur(6px);

opacity: 0.7;

transform: scale(1.05);

pointer-events: none;

display: flex;

}

.smcm-tour-s14-bg-side {

width: 22%;

background: linear-gradient(180deg, #1B4FBF, #163F9A);

}

.smcm-tour-s14-bg-main {

flex: 1;

background: #F7F9FC;

padding: 20px;

display: flex;

flex-direction: column;

gap: 10px;

}

.smcm-tour-s14-bg-row {

height: 36px;

border-radius: 8px;

background: #fff;

box-shadow: 0 1px 3px rgba(11,22,63,0.05);

}

.smcm-tour-s14-modal {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: min(480px, 88%);

background: #0B3A8C;

color: #fff;

border-radius: 20px;

padding: clamp(24px, 3vw, 38px) clamp(22px, 2.6vw, 34px);

text-align: center;

box-shadow: 0 24px 60px rgba(11, 30, 80, 0.35);

z-index: 2;

}

.smcm-tour-s14-title {

font-family: var(--smcm-font-h);

font-size: clamp(19px, 2vw, 26px);

font-weight: 700;

color: #fff;

margin: 0 0 10px;

line-height: 1.3;

}

.smcm-tour-s14-desc {

font-family: var(--smcm-font-b);

font-size: clamp(13px, 1.15vw, 15px);

font-weight: 400;

color: rgba(255,255,255,0.9);

line-height: 1.55;

margin: 0 0 20px;

}

.smcm-tour-s14-btn {

display: inline-flex !important;

align-items: center;

justify-content: center;

background: #3B82F6 !important;

color: #fff !important;

border: none !important;

border-radius: 10px !important;

padding: 12px 28px !important;

font-family: var(--smcm-font-b);

font-size: 14px;

font-weight: 600;

text-decoration: none !important;

cursor: pointer;

box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;

transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.smcm-tour-s14-btn:hover {

transform: translateY(-1px);

box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;

color: #fff !important;

}

.smcm-tour-footer {

display: flex;

align-items: center;

justify-content: space-between;

padding: 10px 20px 14px;

border-top: 1px solid #E7ECF5;

background: #fff;

}

.smcm-tour-nav {

display: flex;

align-items: center;

gap: 12px;

}

.smcm-tour-nav-btn {

width: 36px !important;

height: 36px !important;

min-width: 36px !important;

max-width: 36px !important;

flex: 0 0 36px !important;

border-radius: 50% !important;

border: 1.5px solid #D8E0EE !important;

background: #fff !important;

color: #1A56C4 !important;

font-size: 16px !important;

line-height: 1 !important;

padding: 0 !important;

margin: 0 !important;

cursor: pointer;

display: inline-flex !important;

align-items: center !important;

justify-content: center !important;

transition: background 0.15s, border-color 0.15s;

box-sizing: border-box !important;

}

.smcm-tour-nav-btn:hover:not(:disabled) {

background: #E8F0FE !important;

border-color: #1A56C4 !important;

}

.smcm-tour-nav-btn:disabled {

opacity: 0.35;

cursor: default;

}

.smcm-tour-counter {

font-family: var(--smcm-font-b);

font-size: 13px;

font-weight: 600;

color: #6B7A99;

min-width: 48px;

text-align: center;

}

/* ── Slide 13: Close Change Request + SUBMIT hotspot ── */

.smcm-tour-slide13 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-s13-body {

display: flex;

flex: 1;

min-height: 0;

}

/* CLOSE CHANGE REQUEST floats beneath the action buttons.

The header keeps its normal height, so the callout overlays the content
below

instead of pushing the workflow/content downward. */

.smcm-tour-slide13 .smcm-tour-shell-wizard-top {

position: relative;

overflow: visible;

}

.smcm-tour-s13-content {

flex: 1;

min-width: 0;

padding: 6px 18px 18px;

position: relative;

display: flex;

flex-direction: column;

}

.smcm-tour-s13-blur {

height: 60px;

border-radius: 12px;

background: linear-gradient(180deg, #E8EEF7 0%, #F5F7FB 100%);

filter: blur(5px);

opacity: 0.6;

margin-bottom: 10px;

pointer-events: none;

flex-shrink: 0;

}

.smcm-tour-s13-callout-wrap {

display: flex;

flex-direction: column;

align-items: flex-end;

gap: 8px;

margin: 0;

width: min(300px, calc(100% - 32px));

max-width: 300px;

flex-shrink: 0;

position: absolute;

top: calc(100% + 14px);

right: 16px;

z-index: 50;

pointer-events: none;

}

.smcm-tour-s13-callout {

width: 100%;

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

box-shadow: 0 20px 48px rgba(11, 30, 80, 0.34);

position: relative;

z-index: 51;

pointer-events: none;

}

.smcm-tour-s13-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: 13px;

font-weight: 700;

color: #fff;

}

.smcm-tour-s13-callout p {

margin: 0;

font-size: 12px;

line-height: 1.5;

color: rgba(255,255,255,0.92);

}

.smcm-tour-s13-submit {

background: #F5A623 !important;

color: #fff !important;

border: none !important;

border-radius: 8px !important;

padding: 10px 18px !important;

font-family: var(--smcm-font-b);

font-size: 12px;

font-weight: 700;

letter-spacing: 0.3px;

cursor: pointer;

position: relative;

z-index: 5;

}

.smcm-tour-s13-submit.smcm-tour-hotspot::after {

inset: -6px;

border-radius: 12px;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

/* ── Slide 12: CA-PA Status + circle hotspot ── */

.smcm-tour-slide12 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-s12-body {

display: flex;

flex: 1;

min-height: 0;

}

.smcm-tour-s12-content {

flex: 1;

min-width: 0;

padding: 14px 18px 18px;

position: relative;

display: flex;

flex-direction: column;

gap: 12px;

}

.smcm-tour-s12-blur {

height: 90px;

border-radius: 12px;

background: linear-gradient(180deg, #E8EEF7, #F5F7FB);

filter: blur(4px);

opacity: 0.55;

pointer-events: none;

flex-shrink: 0;

}

.smcm-tour-s12-panel {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 14px 16px 16px;

position: relative;

z-index: 2;

animation: smcm-tour-panel-glow 1.8s ease-out infinite;

}

.smcm-tour-s12-panel-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.3px;

margin: 0 0 12px;

}

.smcm-tour-s12-table {

width: 100%;

border-collapse: collapse;

font-size: 12.5px;

}

.smcm-tour-s12-table th {

text-align: left;

font-size: 11px;

font-weight: 600;

color: #8A97B0;

padding: 10px 12px;

background: #F8FAFD;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s12-table td {

padding: 12px;

border-bottom: 1px solid #F0F3F8;

color: #1A2B4A;

vertical-align: middle;

}

.smcm-tour-s12-select {

display: inline-flex;

align-items: center;

justify-content: space-between;

gap: 8px;

min-width: 100px;

height: 32px;

padding: 0 12px;

border: 1px solid #D8E0EE;

border-radius: 8px;

background: #fff;

font-size: 12px;

font-weight: 600;

color: #1A2B4A;

font-family: inherit;

cursor: default;

}

.smcm-tour-s12-select::after {

content: '▾';

font-size: 10px;

color: #8A97B0;

}

.smcm-tour-s12-hotspot-wrap {

display: flex;

justify-content: flex-end;

padding-right: 4px;

}

.smcm-tour-s12-hotspot-btn {

position: relative;

width: 36px !important;

height: 36px !important;

min-width: 36px !important;

border-radius: 50% !important;

border: 2px solid #3B82F6 !important;

background: rgba(255,255,255,0.95) !important;

cursor: pointer;

z-index: 4;

padding: 0 !important;

margin: 0 !important;

}

.smcm-tour-s12-hotspot-btn.smcm-tour-hotspot::after {

inset: -8px;

border-radius: 50%;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

/* ── Slide 11: Effectiveness Review / Validation + hotspot ── */

.smcm-tour-slide11 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-s11-body {

display: flex;

flex: 1;

min-height: 0;

}

.smcm-tour-s11-content {

flex: 1;

min-width: 0;

padding: 14px 18px 18px;

position: relative;

display: flex;

flex-direction: column;

}

.smcm-tour-s11-panel {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 14px 16px 16px;

position: relative;

z-index: 2;

animation: smcm-tour-panel-glow 1.8s ease-out infinite;

}

.smcm-tour-s11-panel-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.3px;

margin: 0 0 14px;

}

.smcm-tour-s11-block {

display: flex;

gap: 12px;

margin-bottom: 16px;

padding-bottom: 16px;

border-bottom: 1px dashed #D8E0EE;

}

.smcm-tour-s11-block:last-of-type {

border-bottom: none;

margin-bottom: 0;

padding-bottom: 0;

}

.smcm-tour-s11-label {

writing-mode: vertical-rl;

transform: rotate(180deg);

font-size: 10px;

font-weight: 700;

letter-spacing: 0.5px;

color: #8A97B0;

background: #F0F4FA;

padding: 8px 4px;

border-radius: 6px;

text-align: center;

}

.smcm-tour-s11-block-body {

flex: 1;

min-width: 0;

}

.smcm-tour-s11-q {

font-size: 13px;

font-weight: 600;

color: #1A2B4A;

margin: 0 0 6px;

}

.smcm-tour-s11-text {

font-size: 12px;

color: #6B7A99;

line-height: 1.5;

}

.smcm-tour-s11-row {

display: flex;

align-items: center;

justify-content: space-between;

gap: 12px;

margin-bottom: 10px;

flex-wrap: wrap;

}

.smcm-tour-s11-badge-no {

background: #FFECEC;

color: #C62828;

font-size: 12px;

font-weight: 700;

padding: 4px 12px;

border-radius: 6px;

}

.smcm-tour-s11-blur {

margin-top: 14px;

height: 48px;

border-radius: 10px;

background: #E8EEF7;

filter: blur(3px);

opacity: 0.55;

pointer-events: none;

}

.smcm-tour-s11-callout-wrap {

position: relative;

align-self: flex-end;

margin-top: 14px;

width: min(300px, 48%);

max-width: 340px;

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

}

.smcm-tour-s11-callout {

position: relative;

width: 100%;

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

z-index: 3;

box-shadow: 0 16px 40px rgba(11, 30, 80, 0.28);

pointer-events: none;

}

.smcm-tour-s11-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: clamp(12px, 0.95vw, 14px);

font-weight: 700;

color: #fff;

}

.smcm-tour-s11-callout p {

margin: 0;

font-size: clamp(11px, 0.9vw, 13px);

line-height: 1.5;

color: rgba(255,255,255,0.92);

}

.smcm-tour-s11-hotspot-btn {

position: relative;

width: 36px !important;

height: 36px !important;

min-width: 36px !important;

border-radius: 50% !important;

border: 2px solid #3B82F6 !important;

background: rgba(255,255,255,0.95) !important;

cursor: pointer;

z-index: 4;

padding: 0 !important;

margin: 0 !important;

flex-shrink: 0;

}

.smcm-tour-s11-hotspot-btn.smcm-tour-hotspot::after {

inset: -8px;

border-radius: 50%;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

/* ── Slide 10: Smart Docs Review list + row hotspot ── */

.smcm-tour-slide10 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #EEF2F8;

display: flex;

font-family: var(--smcm-font-b);

}

.smcm-tour-s10-sidebar {

width: 200px;

flex-shrink: 0;

background: #1A56C4;

color: #fff;

display: flex;

flex-direction: column;

padding: 12px 0;

}

.smcm-tour-s10-nav-item {

padding: 9px 16px;

font-size: 12.5px;

font-weight: 500;

color: rgba(255,255,255,0.85);

}

.smcm-tour-s10-nav-item.smcm-tour-s10-active {

background: #0F3F9E;

color: #7CFFB2;

font-weight: 600;

position: relative;

}

.smcm-tour-s10-nav-item.smcm-tour-s10-active::before {

content: '';

position: absolute;

left: 0; top: 6px; bottom: 6px;

width: 3px;

background: #7CFFB2;

border-radius: 0 2px 2px 0;

}

.smcm-tour-s10-nav-sub {

padding: 7px 16px 7px 28px;

font-size: 12px;

color: rgba(255,255,255,0.75);

}

.smcm-tour-s10-nav-sub.smcm-tour-s10-active {

background: #0F3F9E;

color: #7CFFB2;

font-weight: 600;

}

.smcm-tour-s10-main {

flex: 1;

min-width: 0;

display: flex;

flex-direction: column;

background: #F5F7FB;

}

.smcm-tour-s10-topbar {

display: flex;

align-items: center;

justify-content: space-between;

padding: 10px 16px;

background: #fff;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s10-top-title {

font-size: 13px;

font-weight: 700;

color: #1A56C4;

}

.smcm-tour-s10-body {

padding: 14px 18px;

flex: 1;

}

.smcm-tour-s10-page-title {

font-size: 18px;

font-weight: 700;

color: #1A3A6E;

margin: 0 0 4px;

}

.smcm-tour-s10-crumb {

font-size: 11px;

color: #8A97B0;

margin-bottom: 12px;

}

.smcm-tour-s10-search {

height: 34px;

border: 1px solid #D8E0EE;

border-radius: 8px;

background: #fff;

margin-bottom: 10px;

padding: 0 12px;

font-size: 12px;

color: #8A97B0;

display: flex;

align-items: center;

}

.smcm-tour-s10-tabs {

display: flex;

gap: 4px;

margin-bottom: 10px;

}

.smcm-tour-s10-tab {

padding: 7px 12px;

font-size: 11px;

font-weight: 600;

color: #8A97B0;

}

.smcm-tour-s10-tab-active {

color: #1A56C4;

border: 1.5px solid #1A56C4;

border-radius: 8px;

}

.smcm-tour-s10-table {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

overflow: hidden;

}

.smcm-tour-s10-thead,

.smcm-tour-s10-row {

display: grid;

grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 0.5fr) minmax(0,
0.5fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0,
0.9fr) minmax(0, 0.9fr);

gap: 6px;

align-items: center;

padding: 11px 12px;

font-size: 11.5px;

}

.smcm-tour-s10-thead {

background: #F8FAFD;

color: #8A97B0;

font-weight: 600;

font-size: 10.5px;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s10-row-active {

background: #F0F7FF !important;

border: none !important;

width: 100%;

text-align: left;

font-family: inherit;

color: #1A2B4A;

cursor: pointer;

position: relative;

z-index: 2;

padding: 11px 12px !important;

}

.smcm-tour-s10-row-active.smcm-tour-hotspot::after {

inset: 2px 4px;

border-radius: 10px;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

.smcm-tour-s10-check {

width: 14px; height: 14px;

border-radius: 50%;

border: 2px solid #3B82F6;

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);

background: #fff;

}

.smcm-tour-s10-blur {

filter: blur(2.5px);

opacity: 0.4;

pointer-events: none;

}

.smcm-tour-s10-blur .smcm-tour-s10-row span {

display: inline-block;

height: 10px;

width: 70%;

border-radius: 4px;

background: #E8EEF7;

}

@media (max-width: 900px) {

.smcm-tour-s10-sidebar { width: 56px; }

.smcm-tour-s10-nav-item, .smcm-tour-s10-nav-sub { font-size: 0; padding:
12px; }

.smcm-tour-s10-thead, .smcm-tour-s10-row {

grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0,
0.8fr) minmax(0, 0.9fr);

}

.smcm-tour-s10-thead span:nth-child(n+6),

.smcm-tour-s10-row span:nth-child(n+6) { display: none; }

}

/* ── Slide 9: Implementation / Acknowledgement + hotspot ── */

.smcm-tour-slide9 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-s9-body {

display: flex;

flex: 1;

min-height: 0;

}

.smcm-tour-s9-content {

flex: 1;

min-width: 0;

padding: 14px 18px 18px;

position: relative;

display: flex;

flex-direction: column;

}

.smcm-tour-s9-blur-top {

height: 40px;

border-radius: 10px;

background: linear-gradient(90deg, #E8EEF7, #F0F4FA 40%, #E8EEF7);

filter: blur(4px);

opacity: 0.5;

margin-bottom: 10px;

pointer-events: none;

flex-shrink: 0;

}

.smcm-tour-s9-callout-wrap {

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

margin: 0 auto 12px;

width: 100%;

max-width: 360px;

flex-shrink: 0;

position: relative;

z-index: 3;

}

.smcm-tour-s9-callout {

width: 100%;

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

box-shadow: 0 16px 40px rgba(11, 30, 80, 0.28);

pointer-events: none;

}

.smcm-tour-s9-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: 13px;

font-weight: 700;

color: #fff;

}

.smcm-tour-s9-callout p {

margin: 0;

font-size: 12px;

line-height: 1.5;

color: rgba(255,255,255,0.92);

}

.smcm-tour-s9-hotspot-btn {

position: relative;

width: 34px !important;

height: 34px !important;

min-width: 34px !important;

border-radius: 50% !important;

border: 2px solid #3B82F6 !important;

background: rgba(255,255,255,0.95) !important;

cursor: pointer;

z-index: 4;

padding: 0 !important;

margin: 0 !important;

flex-shrink: 0;

}

.smcm-tour-s9-hotspot-btn.smcm-tour-hotspot::after {

inset: -8px;

border-radius: 50%;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

.smcm-tour-s9-panel {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 14px 16px 16px;

margin-top: 0;

position: relative;

z-index: 2;

animation: smcm-tour-panel-glow 1.8s ease-out infinite;

}

.smcm-tour-s9-panel-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.3px;

margin: 0 0 12px;

padding: 8px 12px;

background: #E8F0FE;

border-radius: 8px;

}

.smcm-tour-s9-row3 {

display: grid;

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

gap: 12px;

margin-bottom: 14px;

}

.smcm-tour-s9-field label {

display: block;

font-size: 10px;

color: #8A97B0;

margin-bottom: 4px;

}

.smcm-tour-s9-input {

height: 34px;

border: 1px solid #D8E0EE;

border-radius: 8px;

background: #fff;

padding: 0 12px;

font-size: 12.5px;

color: #1A2B4A;

font-weight: 500;

display: flex;

align-items: center;

}

.smcm-tour-s9-tabs {

display: flex;

gap: 8px;

margin-bottom: 12px;

align-items: center;

}

.smcm-tour-s9-tab {

font-size: 12px;

font-weight: 600;

color: #8A97B0;

padding: 6px 12px;

}

.smcm-tour-s9-tab-active {

color: #1A56C4;

border: 1.5px solid #1A56C4;

border-radius: 8px;

}

.smcm-tour-s9-setting {

display: flex;

align-items: center;

justify-content: space-between;

background: #F8FAFD;

border-radius: 8px;

padding: 10px 12px;

margin-bottom: 8px;

font-size: 12.5px;

color: #1A2B4A;

font-weight: 600;

}

.smcm-tour-s9-toggle {

display: flex;

align-items: center;

gap: 8px;

color: #1A56C4;

font-size: 12px;

font-weight: 600;

}

.smcm-tour-s9-toggle-dot {

width: 36px;

height: 20px;

border-radius: 999px;

background: #1A56C4;

position: relative;

}

.smcm-tour-s9-toggle-dot::after {

content: '';

position: absolute;

right: 3px;

top: 3px;

width: 14px;

height: 14px;

border-radius: 50%;

background: #fff;

}

.smcm-tour-s9-hint {

font-size: 12px;

color: #6B7A99;

margin: 8px 0 12px;

}

/* ── Slide 8: Task Details / Action Plan + hotspot ── */

.smcm-tour-slide8 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-s8-body {

display: flex;

flex: 1;

min-height: 0;

}

.smcm-tour-s8-content {

flex: 1;

min-width: 0;

padding: 14px 18px;

position: relative;

display: flex;

flex-direction: column;

gap: 12px;

}

.smcm-tour-s8-panel {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 14px 16px 16px;

}

/* Task Details header. ACTION PLAN & APPROVAL is placed after Review
Comments. */

.smcm-tour-s8-panel-head {

display: flex;

align-items: flex-start;

justify-content: flex-start;

gap: 18px;

margin: 0 0 12px;

}

.smcm-tour-s8-panel-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.3px;

margin: 0;

flex: 0 0 auto;

}

.smcm-tour-s8-field {

margin-bottom: 10px;

}

.smcm-tour-s8-field label {

display: block;

font-size: 10px;

color: #8A97B0;

margin-bottom: 4px;

}

.smcm-tour-s8-input {

height: 34px;

border: 1px solid #D8E0EE;

border-radius: 8px;

background: #fff;

padding: 0 12px;

font-size: 12.5px;

color: #1A2B4A;

font-weight: 500;

display: flex;

align-items: center;

justify-content: space-between;

}

.smcm-tour-s8-input::after {

content: '▾';

font-size: 10px;

color: #8A97B0;

}

.smcm-tour-s8-row3 {

display: grid;

grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr);

gap: 12px;

}

.smcm-tour-s8-comments {

height: 36px;

border: 1px solid #E6EBF4;

border-radius: 8px;

background: #F8FAFD;

}

.smcm-tour-s8-callout-wrap {

display: flex;

flex-direction: column;

align-items: stretch;

gap: 8px;

margin: 24px 0 0;

width: min(360px, 100%);

max-width: 360px;

flex: 0 1 360px;

position: relative;

z-index: 3;

}

.smcm-tour-s8-callout {

width: 100%;

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

box-shadow: 0 16px 40px rgba(11, 30, 80, 0.28);

pointer-events: none;

}

.smcm-tour-s8-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: 13px;

font-weight: 700;

color: #fff;

}

.smcm-tour-s8-callout p {

margin: 0;

font-size: 12px;

line-height: 1.5;

color: rgba(255,255,255,0.92);

}

.smcm-tour-s8-nav-hotspot {

position: relative;

}

.smcm-tour-s8-nav-hotspot.smcm-tour-hotspot::after {

inset: -4px -4px -4px 0;

border-radius: 0 10px 10px 0;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

.smcm-tour-s8-nav-btn {

display: block !important;

width: 100%;

text-align: left;

border: none !important;

background: #1A56C4 !important;

color: #fff !important;

font-weight: 600;

font-size: 11.5px;

padding: 7px 14px 7px 18px !important;

border-radius: 0 6px 6px 0 !important;

margin-right: 8px;

cursor: pointer;

font-family: inherit;

}

/* ── Slide 7: Risk Assessment + callout hotspot ── */

.smcm-tour-slide7 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-s7-body {

display: flex;

flex: 1;

min-height: 0;

}

.smcm-tour-s7-content {

flex: 1;

min-width: 0;

padding: 14px 18px 18px;

position: relative;

display: flex;

flex-direction: column;

}

.smcm-tour-s7-page-title {

font-size: 15px;

font-weight: 700;

color: #1A56C4;

margin: 0 0 2px;

}

.smcm-tour-s7-crumb {

font-size: 11px;

color: #8A97B0;

margin-bottom: 10px;

}

.smcm-tour-s7-blur-top {

height: 40px;

border-radius: 10px;

background: linear-gradient(90deg, #E8EEF7, #F0F4FA 40%, #E8EEF7);

filter: blur(4px);

opacity: 0.55;

margin-bottom: 10px;

pointer-events: none;

flex-shrink: 0;

}

.smcm-tour-s7-callout-wrap {

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

margin: 0 auto 12px;

width: 100%;

max-width: 360px;

flex-shrink: 0;

position: relative;

z-index: 3;

}

.smcm-tour-s7-callout {

width: 100%;

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

box-shadow: 0 16px 40px rgba(11, 30, 80, 0.28);

pointer-events: none;

}

.smcm-tour-s7-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: 13px;

font-weight: 700;

color: #fff;

}

.smcm-tour-s7-callout p {

margin: 0;

font-size: 12px;

line-height: 1.5;

color: rgba(255,255,255,0.92);

}

.smcm-tour-s7-hotspot-btn {

position: relative;

width: 34px !important;

height: 34px !important;

min-width: 34px !important;

border-radius: 50% !important;

border: 2px solid #3B82F6 !important;

background: rgba(255,255,255,0.95) !important;

cursor: pointer;

z-index: 4;

padding: 0 !important;

margin: 0 !important;

flex-shrink: 0;

}

.smcm-tour-s7-hotspot-btn.smcm-tour-hotspot::after {

inset: -8px;

border-radius: 50%;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

.smcm-tour-s7-panel {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 14px 16px 16px;

margin-top: 0;

position: relative;

z-index: 2;

animation: smcm-tour-panel-glow 1.8s ease-out infinite;

}

@keyframes smcm-tour-panel-glow {

0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35), 0 0 0 0 rgba(59, 130,
246, 0.15); }

60% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0), 0 0 0 14px rgba(59,
130, 246, 0); }

100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 0 0 0 rgba(59, 130,
246, 0); }

}

.smcm-tour-s7-panel-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.3px;

margin: 0 0 14px;

padding: 8px 12px;

background: #E8F0FE;

border-radius: 8px;

}

.smcm-tour-s7-qa {

display: flex;

flex-direction: column;

gap: 10px;

}

.smcm-tour-s7-row {

display: flex;

align-items: center;

justify-content: space-between;

gap: 16px;

}

.smcm-tour-s7-q {

flex: 1;

font-size: 12.5px;

color: #1A2B4A;

line-height: 1.4;

}

.smcm-tour-s7-select {

min-width: 72px;

height: 32px;

border: 1px solid #D8E0EE;

border-radius: 8px;

background: #fff;

padding: 0 10px;

font-size: 12px;

color: #1A2B4A;

font-weight: 600;

display: flex;

align-items: center;

justify-content: space-between;

gap: 8px;

flex-shrink: 0;

}

.smcm-tour-s7-select::after {

content: '▾';

font-size: 10px;

color: #8A97B0;

}

.smcm-tour-s7-insight {

margin-top: 12px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 12px;

background: #FFECEC;

border-radius: 8px;

padding: 10px 14px;

flex-wrap: wrap;

}

.smcm-tour-s7-insight-text {

font-size: 12.5px;

color: #C62828;

font-weight: 600;

}

.smcm-tour-s7-level {

display: flex;

align-items: center;

gap: 8px;

font-size: 12px;

color: #1A2B4A;

}

.smcm-tour-s7-level-badge {

border: 1.5px solid #C62828;

color: #C62828;

font-weight: 700;

border-radius: 6px;

padding: 4px 10px;

font-size: 12px;

}

/* ── Slide 6: Impact Assessment + callout hotspot ── */

.smcm-tour-slide6 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #F5F7FB;

display: flex;

flex-direction: column;

font-family: var(--smcm-font-b);

}

.smcm-tour-shell-wizard-top {

display: flex;

align-items: center;

justify-content: space-between;

padding: 10px 16px;

background: #fff;

border-bottom: 1px solid #E6EBF4;

gap: 12px;

}

.smcm-tour-shell-wizard-top-title {

font-size: 14px;

font-weight: 700;

color: #1A56C4;

}

.smcm-tour-shell-wizard-top-actions {

display: flex;

gap: 8px;

}

.smcm-tour-shell-wizard-btn {

border-radius: 8px !important;

padding: 8px 14px !important;

font-size: 11px;

font-weight: 700;

letter-spacing: 0.3px;

font-family: inherit;

cursor: default;

border: 1.5px solid transparent !important;

}

.smcm-tour-shell-wizard-btn-outline {

background: #fff !important;

color: #F5A623 !important;

border-color: #F5A623 !important;

}

.smcm-tour-shell-wizard-btn-solid {

background: #F5A623 !important;

color: #fff !important;

}

.smcm-tour-shell-wizard-steps {

display: flex;

align-items: center;

gap: 6px;

padding: 10px 16px;

background: #fff;

border-bottom: 1px solid #E6EBF4;

flex-wrap: wrap;

font-size: 11px;

}

.smcm-tour-shell-wizard-step {

display: flex;

align-items: center;

gap: 6px;

color: #8A97B0;

font-weight: 500;

}

.smcm-tour-shell-wizard-step.smcm-tour-shell-wizard-done { color:
#22A06B; font-weight: 600; }

.smcm-tour-shell-wizard-step.smcm-tour-shell-wizard-current {

color: #1A56C4;

font-weight: 700;

background: #E8F0FE;

padding: 4px 10px;

border-radius: 8px;

}

.smcm-tour-shell-wizard-step-line {

width: 24px;

height: 1px;

border-top: 1px dashed #C5D0E0;

}

.smcm-tour-s6-body {

display: flex;

flex: 1;

min-height: 0;

}

.smcm-tour-shell-wizard-subnav {

width: 160px;

flex-shrink: 0;

background: #F0F4FA;

padding: 12px 0;

border-right: 1px solid #E6EBF4;

}

.smcm-tour-shell-wizard-subnav-group {

font-size: 11px;

font-weight: 700;

color: #1A2B4A;

padding: 8px 14px 6px;

}

.smcm-tour-shell-wizard-subnav-item {

font-size: 11.5px;

color: #6B7A99;

padding: 7px 14px 7px 18px;

}

.smcm-tour-shell-wizard-subnav-item.smcm-tour-shell-wizard-active {

background: #1A56C4;

color: #fff;

font-weight: 600;

border-radius: 0 6px 6px 0;

margin-right: 8px;

}

.smcm-tour-s6-content {

flex: 1;

min-width: 0;

padding: 14px 16px 16px;

position: relative;

display: flex;

flex-direction: column;

}

.smcm-tour-s6-panel {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 14px 16px;

position: relative;

z-index: 2;

animation: smcm-tour-panel-glow 1.8s ease-out infinite;

}

.smcm-tour-s6-panel-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.3px;

margin: 0 0 12px;

}

.smcm-tour-s6-table {

width: 100%;

border-collapse: collapse;

font-size: 12px;

}

.smcm-tour-s6-table th {

text-align: left;

font-size: 11px;

font-weight: 600;

color: #8A97B0;

padding: 8px 10px;

background: #F8FAFD;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s6-table td {

padding: 10px;

border-bottom: 1px solid #F0F3F8;

color: #1A2B4A;

vertical-align: top;

}

.smcm-tour-s6-table tr.smcm-tour-s6-req {

background: #FFF5F5;

}

.smcm-tour-s6-callout-wrap {

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

margin: 0 auto 12px;

width: 100%;

max-width: 360px;

flex-shrink: 0;

position: relative;

z-index: 3;

}

.smcm-tour-s6-callout {

width: 100%;

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

box-shadow: 0 16px 40px rgba(11, 30, 80, 0.28);

pointer-events: none;

}

.smcm-tour-s6-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: 12.5px;

font-weight: 700;

color: #fff;

}

.smcm-tour-s6-callout p {

margin: 0;

font-size: 11.5px;

line-height: 1.5;

color: rgba(255,255,255,0.92);

}

.smcm-tour-s6-hotspot-btn {

position: relative;

width: 34px !important;

height: 34px !important;

min-width: 34px !important;

border-radius: 50% !important;

border: 2px solid #3B82F6 !important;

background: rgba(255,255,255,0.95) !important;

cursor: pointer;

z-index: 4;

padding: 0 !important;

margin: 0 !important;

flex-shrink: 0;

}

.smcm-tour-s6-hotspot-btn.smcm-tour-hotspot::after {

inset: -8px;

border-radius: 50%;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

/* ── Slide 5: In Progress list + row hotspot ── */

.smcm-tour-slide5 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #EEF2F8;

display: flex;

font-family: var(--smcm-font-b);

}

.smcm-tour-s5-main {

flex: 1;

min-width: 0;

display: flex;

flex-direction: column;

background: #F5F7FB;

}

.smcm-tour-s5-body {

padding: 14px 18px 16px;

flex: 1;

position: relative;

}

.smcm-tour-s5-page-head {

display: flex;

align-items: flex-start;

justify-content: space-between;

margin-bottom: 12px;

}

.smcm-tour-s5-page-title {

font-size: 18px;

font-weight: 700;

color: #1A3A6E;

margin: 0 0 4px;

}

.smcm-tour-s5-crumb {

font-size: 11px;

color: #8A97B0;

}

.smcm-tour-s5-create {

background: #F5A623 !important;

color: #fff !important;

border: none !important;

border-radius: 8px !important;

padding: 10px 16px !important;

font-size: 12px;

font-weight: 700;

letter-spacing: 0.3px;

cursor: default;

}

.smcm-tour-s5-search {

width: 100%;

max-width: 420px;

height: 34px;

border: 1px solid #D8E0EE;

border-radius: 8px;

background: #fff;

margin-bottom: 12px;

padding: 0 12px;

font-size: 12px;

color: #8A97B0;

box-sizing: border-box;

}

.smcm-tour-s5-tabs {

display: flex;

gap: 4px;

margin-bottom: 10px;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s5-tab {

padding: 8px 14px;

font-size: 11px;

font-weight: 600;

color: #8A97B0;

letter-spacing: 0.3px;

position: relative;

}

.smcm-tour-s5-tab.smcm-tour-s5-tab-active {

color: #1A56C4;

}

.smcm-tour-s5-tab.smcm-tour-s5-tab-active::after {

content: '';

position: absolute;

left: 10px; right: 10px; bottom: -1px;

height: 2px;

background: #1A56C4;

border-radius: 2px;

}

.smcm-tour-s5-table {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

overflow: hidden;

}

.smcm-tour-s5-thead,

.smcm-tour-s5-row {

display: grid;

grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0,
0.7fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.85fr) minmax(0,
0.6fr) minmax(0, 0.85fr);

gap: 6px;

align-items: center;

padding: 11px 12px;

font-size: 11.5px;

}

.smcm-tour-s5-thead {

background: #F8FAFD;

color: #8A97B0;

font-weight: 600;

font-size: 10.5px;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s5-row {

border-bottom: 1px solid #F0F3F8;

color: #1A2B4A;

background: #fff;

}

.smcm-tour-s5-row-active {

position: relative;

z-index: 2;

cursor: pointer;

background: #F8FBFF !important;

border: none !important;

width: 100%;

text-align: left;

font-family: inherit;

padding: 11px 12px !important;

}

.smcm-tour-s5-row-active.smcm-tour-hotspot::after {

inset: 2px 4px;

border-radius: 10px;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

.smcm-tour-s5-check {

width: 14px; height: 14px;

border-radius: 50%;

border: 2px solid #3B82F6;

background: #fff;

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);

}

.smcm-tour-s5-status {

color: #F5A623;

font-weight: 600;

}

.smcm-tour-s5-blur-rows {

filter: blur(2.5px);

opacity: 0.45;

pointer-events: none;

}

.smcm-tour-s5-blur-rows .smcm-tour-s5-row span {

display: inline-block;

height: 10px;

border-radius: 4px;

background: #E8EEF7;

width: 70%;

}

@media (max-width: 900px) {

.smcm-tour-s5-thead,

.smcm-tour-s5-row {

grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0,
0.8fr) minmax(0, 0.8fr);

}

.smcm-tour-s5-thead span:nth-child(n+6),

.smcm-tour-s5-row span:nth-child(n+6) { display: none; }

}

/* ── Slide 4: Change initiation detail + SUBMIT hotspot ── */

.smcm-tour-slide4 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #EEF2F8;

display: flex;

font-family: var(--smcm-font-b);

}

.smcm-tour-s4-main {

flex: 1;

min-width: 0;

display: flex;

flex-direction: column;

background: #F5F7FB;

}

.smcm-tour-s4-body {

padding: 10px 16px 14px;

flex: 1;

overflow: hidden;

position: relative;

}

.smcm-tour-s4-page-head {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 12px;

margin-bottom: 8px;

}

.smcm-tour-s4-page-title {

font-size: clamp(15px, 1.35vw, 18px);

font-weight: 700;

color: #1A56C4;

margin: 0 0 4px;

}

.smcm-tour-s4-crumb {

font-size: 11px;

color: #8A97B0;

}

.smcm-tour-s4-actions {

display: flex;

align-items: center;

gap: 8px;

flex-shrink: 0;

}

.smcm-tour-s4-edit {

background: #fff !important;

color: #F5A623 !important;

border: 1.5px solid #F5A623 !important;

border-radius: 8px !important;

padding: 9px 16px !important;

font-family: var(--smcm-font-b);

font-size: 12px;

font-weight: 700;

letter-spacing: 0.3px;

cursor: default;

}

.smcm-tour-s4-submit {

background: #F5A623 !important;

color: #fff !important;

border: none !important;

border-radius: 8px !important;

padding: 10px 18px !important;

font-family: var(--smcm-font-b);

font-size: 12px;

font-weight: 700;

letter-spacing: 0.3px;

cursor: pointer;

box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35) !important;

}

.smcm-tour-s4-submit.smcm-tour-hotspot::after {

inset: -6px;

border-radius: 12px;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

.smcm-tour-s4-card {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

padding: 12px 16px 14px;

}

.smcm-tour-s4-card-title {

font-size: 12px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.4px;

margin: 0 0 10px;

text-transform: uppercase;

}

.smcm-tour-s4-grid {

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 8px 20px;

}

.smcm-tour-s4-field label {

display: block;

font-size: 10px;

color: #8A97B0;

margin-bottom: 2px;

font-weight: 500;

}

.smcm-tour-s4-field div {

font-size: 12.5px;

font-weight: 600;

color: #1A2B4A;

line-height: 1.3;

}

.smcm-tour-s4-wide {

grid-column: 1 / 3;

}

.smcm-tour-s4-ref {

grid-column: 3;

grid-row: span 3;

}

.smcm-tour-s4-ref-img {

width: 100%;

height: 110px;

border-radius: 10px;

object-fit: cover;

background: linear-gradient(135deg, #B8C9E0 0%, #7A9CC0 50%, #4A6FA5
100%);

display: block;

margin-top: 4px;

}

/* ── Slide 3: Change Management list + CREATE hotspot + callout ── */

.smcm-tour-slide3 {

position: relative;

border-radius: 12px;

overflow: hidden;

background: #EEF2F8;

display: flex;

font-family: var(--smcm-font-b);

}

.smcm-tour-shell-sidebar {

width: 200px;

flex-shrink: 0;

background: #1A56C4;

color: #fff;

display: flex;

flex-direction: column;

padding: 0;

}

.smcm-tour-shell-side-brand {

display: flex;

align-items: center;

gap: 8px;

padding: 14px 14px 12px;

font-size: 12px;

font-weight: 600;

border-bottom: 1px solid rgba(255,255,255,0.12);

}

.smcm-tour-shell-side-brand span {

width: 18px; height: 18px; border-radius: 50%;

background: rgba(255,255,255,0.25);

flex-shrink: 0;

}

.smcm-tour-shell-nav {

display: flex;

flex-direction: column;

padding: 10px 0;

gap: 2px;

flex: 1;

}

.smcm-tour-shell-nav-item {

display: flex;

align-items: center;

gap: 10px;

padding: 10px 16px;

font-size: 12.5px;

font-weight: 500;

color: rgba(255,255,255,0.85);

position: relative;

}

.smcm-tour-shell-nav-item.smcm-tour-shell-nav-active {

background: #0F3F9E;

color: #fff;

font-weight: 600;

}

.smcm-tour-shell-nav-item.smcm-tour-shell-nav-active::before {

content: '';

position: absolute;

left: 0; top: 6px; bottom: 6px;

width: 3px;

border-radius: 0 2px 2px 0;

background: #7CFFB2;

}

.smcm-tour-shell-nav-ico {

width: 14px; height: 14px;

border-radius: 3px;

background: rgba(255,255,255,0.3);

flex-shrink: 0;

}

.smcm-tour-shell-side-foot {

padding: 10px 14px 12px;

font-size: 9px;

color: rgba(255,255,255,0.45);

line-height: 1.4;

}

.smcm-tour-s3-main {

flex: 1;

min-width: 0;

display: flex;

flex-direction: column;

background: #F5F7FB;

}

.smcm-tour-shell-topbar {

display: flex;

align-items: center;

justify-content: space-between;

padding: 10px 18px;

background: #fff;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-shell-top-title {

font-size: 13px;

font-weight: 700;

color: #1A56C4;

letter-spacing: 0.2px;

}

.smcm-tour-shell-top-right {

display: flex;

align-items: center;

gap: 10px;

}

.smcm-tour-shell-top-icon {

width: 28px; height: 28px;

border-radius: 8px;

background: #F0F4FA;

}

.smcm-tour-shell-avatar {

width: 28px; height: 28px;

border-radius: 50%;

background: #D6E4FF;

color: #1A56C4;

font-size: 11px;

font-weight: 700;

display: flex;

align-items: center;

justify-content: center;

}

.smcm-tour-s3-body {

padding: 16px 20px 20px;

flex: 1;

position: relative;

display: flex;

flex-direction: column;

gap: 12px;

}

.smcm-tour-s3-page-head {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 12px;

}

.smcm-tour-s3-page-title {

font-size: 18px;

font-weight: 700;

color: #1A3A6E;

margin: 0 0 4px;

}

.smcm-tour-s3-crumb {

font-size: 11px;

color: #8A97B0;

}

.smcm-tour-s3-create-wrap {

position: relative;

flex-shrink: 0;

}

.smcm-tour-s3-create {

display: inline-flex !important;

align-items: center;

gap: 6px;

background: #F5A623 !important;

color: #fff !important;

border: none !important;

border-radius: 8px !important;

padding: 10px 18px !important;

font-family: var(--smcm-font-b);

font-size: 12.5px;

font-weight: 700;

letter-spacing: 0.4px;

cursor: pointer;

box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35) !important;

}

.smcm-tour-s3-create.smcm-tour-hotspot::after {

inset: -6px;

border-radius: 12px;

box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);

animation: smcm-tour-pulse-strong 1.6s ease-out infinite;

}

@keyframes smcm-tour-pulse-strong {

0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }

70% { box-shadow: 0 0 0 14px rgba(59, 130, 246, 0); }

100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }

}

.smcm-tour-s3-table-wrap {

background: #fff;

border-radius: 12px;

border: 1px solid #E6EBF4;

overflow: hidden;

filter: blur(2.5px);

opacity: 0.55;

pointer-events: none;

}

.smcm-tour-s3-table-head {

display: grid;

grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0,
0.7fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0,
0.6fr) minmax(0, 0.7fr);

gap: 8px;

padding: 12px 14px;

background: #F8FAFD;

font-size: 10px;

font-weight: 600;

color: #8A97B0;

border-bottom: 1px solid #E6EBF4;

}

.smcm-tour-s3-table-row {

display: grid;

grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0,
0.7fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0,
0.6fr) minmax(0, 0.7fr);

gap: 8px;

padding: 14px;

border-bottom: 1px solid #F0F3F8;

font-size: 11px;

color: #4A5A78;

}

.smcm-tour-s3-table-row span {

height: 10px;

border-radius: 4px;

background: #E8EEF7;

}

.smcm-tour-s3-callout-wrap {

display: flex;

justify-content: flex-end;

}

.smcm-tour-s3-callout {

position: relative;

width: min(280px, 60%);

background: #0B3A8C;

color: #fff;

border-radius: 14px;

padding: 14px 16px;

z-index: 3;

box-shadow: 0 16px 40px rgba(11, 30, 80, 0.3);

pointer-events: none;

}

.smcm-tour-s3-callout h4 {

margin: 0 0 6px;

font-family: var(--smcm-font-h);

font-size: 13px;

font-weight: 700;

letter-spacing: 0.3px;

color: #fff;

}

.smcm-tour-s3-callout p {

margin: 0;

font-size: 12px;

line-height: 1.5;

color: rgba(255,255,255,0.9);

font-weight: 400;

}

/* ── Slide 2: blurred product shell + centered message modal ── */

.smcm-tour-slide2 {

position: relative;

/* Same reasoning as slide 14: both children are position:absolute,

so this needs a min-height floor to avoid collapsing to 0. */

min-height: clamp(320px, 32vw, 480px);

border-radius: 12px;

overflow: hidden;

background: #F4F7FC;

}

.smcm-tour-slide2-bg {

position: absolute;

inset: 0;

display: flex;

filter: blur(5px);

opacity: 0.85;

transform: scale(1.04);

pointer-events: none;

user-select: none;

}

.smcm-tour-slide2-sidebar {

width: 22%;

min-width: 140px;

background: linear-gradient(180deg, #1B4FBF 0%, #163F9A 100%);

padding: 16px 12px;

display: flex;

flex-direction: column;

gap: 10px;

}

.smcm-tour-slide2-sidebar-item {

height: 12px;

border-radius: 6px;

background: rgba(255,255,255,0.18);

}

.smcm-tour-slide2-sidebar-item.smcm-tour-slide2-active {

background: rgba(255,255,255,0.35);

height: 28px;

}

.smcm-tour-slide2-main {

flex: 1;

padding: 16px 20px;

display: flex;

flex-direction: column;

gap: 12px;

background: #F7F9FC;

}

.smcm-tour-slide2-topbar {

height: 36px;

border-radius: 8px;

background: #fff;

box-shadow: 0 1px 4px rgba(11,22,63,0.06);

display: flex;

align-items: center;

justify-content: flex-end;

padding: 0 12px;

}

.smcm-tour-slide2-pill {

width: 72px;

height: 22px;

border-radius: 999px;

background: #F5A623;

}

.smcm-tour-slide2-rows {

flex: 1;

display: flex;

flex-direction: column;

gap: 8px;

}

.smcm-tour-slide2-row {

height: 40px;

border-radius: 8px;

background: #fff;

box-shadow: 0 1px 3px rgba(11,22,63,0.05);

}

.smcm-tour-modal {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: min(520px, 88%);

background: #0B3A8C;

color: #fff;

border-radius: 20px;

padding: clamp(24px, 3vw, 38px) clamp(22px, 2.6vw, 34px);

text-align: center;

box-shadow: 0 24px 60px rgba(11, 30, 80, 0.35);

z-index: 2;

}

.smcm-tour-modal-text {

font-family: var(--smcm-font-b);

font-size: clamp(14px, 1.35vw, 18px);

font-weight: 400;

line-height: 1.55;

color: rgba(255,255,255,0.95);

margin: 0 0 clamp(18px, 2vw, 24px);

}

.smcm-tour-modal-btn {

display: inline-flex !important;

align-items: center;

justify-content: center;

background: #3B82F6 !important;

color: #fff !important;

border: none !important;

border-radius: 10px !important;

padding: 12px 28px !important;

font-family: var(--smcm-font-b);

font-size: clamp(13px, 1.1vw, 15px);

font-weight: 600;

cursor: pointer;

box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;

transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.smcm-tour-modal-btn:hover {

transform: translateY(-1px);

box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;

}

.smcm-tour-ui {

position: relative;

width: 100%;

min-height: 360px;

background: #F7F9FC;

border-radius: 12px;

overflow: hidden;

}

.smcm-tour-ui-inner {

position: relative;

width: 100%;

min-height: 360px;

padding: 24px;

box-sizing: border-box;

}

.smcm-tour-ui-label {

font-family: var(--smcm-font-b);

font-size: 12px;

font-weight: 600;

color: var(--smcm-muted);

margin-bottom: 12px;

}

.smcm-tour-hint {

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

font-family: var(--smcm-font-b);

font-size: 12px;

font-weight: 500;

color: var(--smcm-muted);

background: rgba(255,255,255,0.92);

padding: 8px 14px;

border-radius: 20px;

box-shadow: 0 4px 16px rgba(11,22,63,0.08);

white-space: nowrap;

pointer-events: none;

}

.smcm-tour-screen-wrap {

position: relative;

width: 100%;

}

.smcm-tour-screen {

width: 100%;

display: block;

border-radius: 8px;

}

.smcm-tour-callout {

position: absolute;

top: 14%;

left: 16%;

max-width: 260px;

background: var(--smcm-navy);

color: #fff;

padding: 16px 18px;

border-radius: 10px;

font-family: var(--smcm-font-b);

font-size: 13px;

font-weight: 600;

box-shadow: 0 12px 30px rgba(11,22,63,0.3);

}

/* ══════════════════════════════════════════════════════════════

MOBILE REDESIGN (≤640px) --- slide height is already natural/auto

everywhere now. On phones, chrome (browser-style sidebars/topbars/

steps) is simplified into simple stacked blocks, and every

grid/row layout collapses to one column top-to-bottom. Nothing

here touches tablet/desktop --- nothing above 640px is affected.

══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

.smcm-tour-viewport { overflow: visible; }

.smcm-tour-slide { padding: 16px; }

/* Any remaining side-by-side "body" rows (sidebar + main content)

stack vertically instead of squeezing into an icon rail. */

.smcm-tour-s3-body,

.smcm-tour-s4-body,

.smcm-tour-s5-body,

.smcm-tour-s6-body,

.smcm-tour-s7-body,

.smcm-tour-s8-body,

.smcm-tour-s9-body,

.smcm-tour-slide10,

.smcm-tour-s11-body,

.smcm-tour-s12-body,

.smcm-tour-s13-body {

flex-direction: column;

}

.smcm-tour-shell-sidebar,

.smcm-tour-shell-wizard-subnav,

.smcm-tour-s10-sidebar {

display: none;

}

.smcm-tour-shell-wizard-steps { display: none; }

/* Multi-column grids/rows collapse to one clean column. */

.smcm-tour-s4-grid { grid-template-columns: 1fr; }

.smcm-tour-s4-wide { grid-column: 1 / -1; }

.smcm-tour-s4-ref { grid-column: 1 / -1; grid-row: auto; }

.smcm-tour-s4-ref-img { height: 90px; max-width: 220px; }

.smcm-tour-s4-page-head { flex-direction: column; align-items:
flex-start; gap: 6px; }

.smcm-tour-s8-row3 { grid-template-columns: 1fr; }

.smcm-tour-s9-row3 { grid-template-columns: 1fr; }

.smcm-tour-s7-row { flex-direction: column; align-items: flex-start;
gap: 6px; }

.smcm-tour-s6-panel { overflow-x: auto; }

.smcm-tour-s12-table,

.smcm-tour-s6-table { display: block; overflow-x: auto; white-space:
nowrap; }

.smcm-tour-s3-table-wrap,

.smcm-tour-s5-table,

.smcm-tour-s10-table { overflow-x: auto; }

.smcm-tour-s3-table-head,

.smcm-tour-s3-table-row,

.smcm-tour-s5-thead,

.smcm-tour-s5-row,

.smcm-tour-s10-thead,

.smcm-tour-s10-row {

grid-template-columns: 24px minmax(120px, 1.4fr) repeat(4, minmax(70px,
0.8fr));

min-width: 560px;

}

.smcm-tour-s3-create-wrap,

.smcm-tour-s3-page-head,

.smcm-tour-s5-page-head {

flex-direction: column;

align-items: flex-start;

gap: 10px;

}

.smcm-tour-s13-callout-wrap { align-items: center; }

}

/* Laptop-height compaction: typical 1024--1440px / shorter-viewport
laptops.

Slide height is now fully natural/auto (no lock) --- this block only

trims the surrounding chrome and internal card padding so laptop

screens don't end up with an unnecessarily tall "How Smart Change

Works" card just because desktop-sized spacing carried over. */

@media (min-width: 1200px) and (max-width: 1440px) {

.smcm-hero { min-height: 44vh; padding-top: 104px; padding-bottom: 8px;
}

.smcm-tour-section { padding: 64px clamp(20px, 4vw, 56px) 48px; }

.smcm-tour-heading { margin-bottom: 16px; }

.smcm-tour-intro-photo { max-height: min(340px, 42vh); }

.smcm-tour-slide { padding: 16px; }

/* Give only the first How Smart Change Works slide more vertical room

on smaller / shorter desktop and laptop screens. */

.smcm-tour-slide[data-slide="1"] {

min-height: 470px;

display: none;

}

.smcm-tour-slide[data-slide="1"].smcm-tour-active {

display: flex;

align-items: center;

}

.smcm-tour-slide[data-slide="1"] .smcm-tour-intro {

min-height: 430px;

}

/* Tighten the densest cards so their natural height stays compact

on laptop widths without losing any content or column layout. */

.smcm-tour-s4-body { padding: 10px 14px 12px; }

.smcm-tour-s4-card { padding: 10px 14px 12px; }

.smcm-tour-s4-grid { gap: 6px 16px; }

.smcm-tour-s6-panel,

.smcm-tour-s7-panel,

.smcm-tour-s9-panel,

.smcm-tour-s11-panel,

.smcm-tour-s12-panel { padding: 10px 14px 12px; }

.smcm-tour-s6-content,

.smcm-tour-s7-content,

.smcm-tour-s8-content,

.smcm-tour-s9-content,

.smcm-tour-s11-content,

.smcm-tour-s12-content,

.smcm-tour-s13-content { padding: 10px 14px 12px; }

.smcm-tour-s9-row3 { gap: 8px; margin-bottom: 10px; }

.smcm-tour-s9-setting { padding: 8px 10px; margin-bottom: 6px; }

.smcm-tour-s7-qa { gap: 8px; }

}

@media (min-width: 1440px) {

.smcm-hero-title { letter-spacing: -1.4px; }

.smcm-sf-inner { max-width: min(1280px, 88vw); }


.smcm-sf-tabs { max-width: 400px; }

.smcm-sf-panel { flex-basis: 460px; max-width: 460px; }

.smcm-sf-media { max-width: 400px; }


.smcm-tour-card { max-width: min(1200px, 92vw); }

.smcm-tour-section { padding: 92px 64px 68px; }

.smcm-tour-intro { max-width: min(1180px, 100%); gap: 32px; }

.smcm-tour-intro-photo { flex-basis: 360px; max-width: 360px;
max-height: min(460px, 52vh); }

.smcm-tour-intro-copy { max-width: 500px; }

.smcm-tour-intro-title { font-size: 26px; }

.smcm-tour-intro-desc { font-size: 14.5px; }

.smcm-tour-start-btn { font-size: 15px !important; padding: 13px 28px
!important; }

}

@media (min-width: 1600px) {

.smcm-hero-title { letter-spacing: -1.6px; }

.smcm-sf-inner { max-width: min(1420px, 84vw); }


.smcm-sf-layout { gap: clamp(40px, 3.5vw, 64px); }

.smcm-sf-tabs { max-width: 420px; }

.smcm-sf-panel { flex-basis: 500px; max-width: 500px; }

.smcm-sf-media { max-width: 440px; }



.smcm-tour-section { padding: 100px 64px 76px; }

.smcm-tour-card { max-width: min(1400px, 92vw); }

.smcm-tour-intro { max-width: min(1280px, 100%); gap: 36px; }

.smcm-tour-intro-photo { flex-basis: 400px; max-width: 400px;
max-height: min(500px, 54vh); }

.smcm-tour-intro-copy { max-width: 540px; }

.smcm-tour-intro-title { font-size: 28px; }

.smcm-tour-intro-desc { font-size: 15px; }

.smcm-tour-start-btn { font-size: 15px !important; padding: 14px 30px
!important; }

.smcm-tour-powered { font-size: 13px; margin-top: 28px; }

}

@media (min-width: 1800px) {

.smcm-hero { min-height: 46vh; padding: 96px 96px 8px; }

.smcm-hero-title { letter-spacing: -1.8px; }

.smcm-sf-section { padding: 96px 64px; }

.smcm-sf-inner { max-width: min(1580px, 80vw); }


.smcm-sf-layout { gap: clamp(48px, 3.8vw, 72px); }

.smcm-sf-tabs { max-width: 440px; }

.smcm-sf-panel { flex-basis: 540px; max-width: 540px; }

.smcm-sf-media { max-width: 480px; }




.smcm-tour-section { padding: 108px 72px 84px; }

.smcm-tour-card { max-width: min(1560px, 94vw); }

.smcm-tour-intro { max-width: min(1400px, 100%); gap: 44px; padding: 0
40px; }

.smcm-tour-intro-photo { flex-basis: 440px; max-width: 440px;
max-height: min(540px, 56vh); }

.smcm-tour-intro-copy { max-width: 580px; }

.smcm-tour-intro-title { font-size: 32px; }

.smcm-tour-intro-desc { font-size: 15.5px; max-width: 40em; }

.smcm-tour-start-btn { font-size: 16px !important; padding: 15px 32px
!important; }

.smcm-tour-powered { font-size: 14px; margin-top: 32px; }

}

@media (min-width: 2100px) {

.smcm-tour-section::before { width: min(1840px, calc(100% - 96px)); }

.smcm-hero-title { letter-spacing: -2px; }

.smcm-sf-inner { max-width: min(1720px, 78vw); }


.smcm-sf-layout { gap: clamp(56px, 4vw, 80px); }

.smcm-sf-tabs { max-width: 460px; }

.smcm-sf-panel { flex-basis: 580px; max-width: 580px; }

.smcm-sf-media { max-width: 520px; }


.smcm-tour-section { padding: 116px 80px 92px; }

.smcm-tour-card { max-width: min(1680px, 94vw); }

.smcm-tour-intro { max-width: min(1520px, 100%); gap: 52px; }

.smcm-tour-intro-photo { flex-basis: 480px; max-width: 480px;
max-height: min(580px, 58vh); }

.smcm-tour-intro-copy { max-width: 620px; }

.smcm-tour-intro-title { font-size: 34px; }

.smcm-tour-intro-desc { font-size: 16px; }

.smcm-tour-start-btn { font-size: 16px !important; padding: 16px 34px
!important; }

}

@media (min-width: 2200px) {

.smcm-hero { min-height: 48vh; padding: 96px 112px 8px; }

.smcm-sf-section { padding: 104px 80px; }

.smcm-sf-inner { max-width: min(1800px, 76vw); }

.smcm-tour-card { max-width: min(1760px, 94vw); }

.smcm-tour-intro { max-width: min(1600px, 100%); gap: 56px; }

.smcm-tour-intro-photo { flex-basis: 500px; max-width: 500px;
max-height: min(600px, 60vh); }

.smcm-tour-intro-title { font-size: 36px; }

.smcm-tour-intro-desc { font-size: 16.5px; }

}

@media (min-width: 2400px) {

.smcm-hero-title { letter-spacing: -2.2px; }


.smcm-sf-inner { max-width: min(1900px, 74vw); }

.smcm-sf-tabs { max-width: 480px; }

.smcm-sf-panel { flex-basis: 620px; max-width: 620px; }

.smcm-sf-media { max-width: 560px; }


.smcm-tour-section { padding: 124px 88px 100px; }

.smcm-tour-card { max-width: min(1900px, 94vw); }

.smcm-tour-intro { max-width: min(1720px, 100%); gap: 60px; }

.smcm-tour-intro-photo { flex-basis: 540px; max-width: 540px;
max-height: min(660px, 62vh); }

.smcm-tour-intro-copy { max-width: 660px; }

.smcm-tour-intro-title { font-size: 40px; }

.smcm-tour-intro-desc { font-size: 17px; }

.smcm-tour-start-btn { font-size: 17px !important; padding: 17px 36px
!important; }

.smcm-tour-powered { font-size: 15px; margin-top: 36px; }

}

@media (min-width: 2700px) {

.smcm-tour-section::before { width: min(2240px, calc(100% - 128px)); }

.smcm-hero-title { letter-spacing: -2.5px; }


.smcm-sf-inner { max-width: min(2100px, 72vw); }


.smcm-tour-section { padding: 132px 96px 108px; }

.smcm-tour-card { max-width: min(2100px, 94vw); }

.smcm-tour-intro { max-width: min(1900px, 100%); gap: 68px; }

.smcm-tour-intro-photo { flex-basis: 600px; max-width: 600px;
max-height: min(740px, 64vh); }

.smcm-tour-intro-copy { max-width: 720px; }

.smcm-tour-intro-title { font-size: 44px; }

.smcm-tour-intro-desc { font-size: 18px; }

.smcm-tour-start-btn { font-size: 18px !important; padding: 18px 40px
!important; }

}

/* ══════════════════════════════════════════════════════════════

WHY CHOOSE SMART FOOD SAFE --- FEATURES-STYLE CAROUSEL

Scoped for Elementor. Mirrors the SFS product Features carousel:

desktop = 2 cards per view / 3 pages; mobile = 3 stacked cards per page.

══════════════════════════════════════════════════════════════ */

.smcm-why-section {

position: relative;

isolation: isolate;

width: 100%;

overflow: hidden;

padding: 96px 48px 104px;

font-family: var(--smcm-font-h) !important;

background:

radial-gradient(circle at 0% 0%, rgba(112,173,255,0.26) 0%,
rgba(112,173,255,0.12) 20%, rgba(255,255,255,0) 42%),

radial-gradient(circle at 100% 100%, rgba(112,173,255,0.28) 0%,
rgba(112,173,255,0.12) 22%, rgba(255,255,255,0) 44%);

}

.smcm-why-section,

.smcm-why-section * {

font-family: var(--smcm-font-h) !important;

}

.smcm-why-inner {

position: relative;

z-index: 1;

width: 100%;

max-width: 1140px;

margin: 0 auto;

}

.smcm-why-header {

text-align: center;

max-width: 780px;

margin: 0 auto 40px;

}

.smcm-why-heading {

margin: 0 0 12px;

font-size: var(--fs-h2);

font-weight: 700;

line-height: 1.2;

letter-spacing: -0.9px;

color: var(--smcm-navy);

}

.smcm-why-eco-line {

display: block;

}

/* Force the full Why-section heading, including the blue span,

to use Plus Jakarta Sans. This selector is intentionally more specific

than the global `.smcm-page span { font-family: var(--smcm-font-b)
!important; }`

rule above, which was overriding the previous font declaration. */

.smcm-page .smcm-why-heading,

.smcm-page .smcm-why-heading .smcm-why-heading-blue {

font-family: var(--smcm-font-h) !important;

}

.smcm-page .smcm-why-heading-blue {

color: var(--smcm-blue);

font-size: inherit;

font-weight: inherit;

line-height: inherit;

letter-spacing: inherit;

}

.smcm-why-sub {

margin: 0 auto;

max-width: 720px;

font-size: 13px;

font-weight: 500;

line-height: 1.7;

color: var(--smcm-navy);

}

.smcm-why-panel {

width: 100%;

border-radius: 32px;

padding: 48px 40px 34px;

background: linear-gradient(135deg, rgba(234,242,252,0.98) 0%,
rgba(247,250,254,0.98) 55%, rgba(255,255,255,0.98) 100%);

overflow: hidden;

border: 1px solid rgba(255,255,255,0.94);

}

.smcm-why-track-wrap {

width: 100%;

overflow: hidden;

cursor: grab;

touch-action: pan-y;

}

.smcm-why-track-wrap.smcm-why-dragging { cursor: grabbing; }

.smcm-why-track {

display: flex;

gap: 0;

transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

will-change: transform;

user-select: none;

}

/* Desktop: page wrappers disappear so exactly 2 cards are visible. */

.smcm-why-page { display: contents; }

.smcm-why-card {

flex: 0 0 50%;

max-width: 50%;

min-width: 0;

display: flex;

align-items: flex-start;

gap: 20px;

padding: 4px 32px;

box-sizing: border-box;

}

.smcm-why-card--divider {

border-right: 1px solid rgba(43,107,230,0.16);

}

.smcm-why-icon {

width: 64px;

height: 64px;

flex: 0 0 64px;

display: inline-flex;

align-items: center;

justify-content: center;

background: transparent !important;

border: 0 !important;

outline: 0 !important;

box-shadow: none !important;

filter: none !important;

border-radius: 0 !important;

}

.smcm-why-icon-svg {

display: block;

width: 56px;

height: 56px;

overflow: visible;

border: 0 !important;

outline: 0 !important;

box-shadow: none !important;

filter: none !important;

}

.smcm-why-body {

flex: 1;

min-width: 0;

}

.smcm-why-card-title {

margin: 0 0 8px;

font-size: 15px;

font-weight: 700;

line-height: 1.35;

letter-spacing: -0.1px;

color: var(--smcm-navy);

}

.smcm-why-card-desc {

margin: 0;

font-size: 12.5px;

font-weight: 500;

line-height: 1.62;

color: var(--smcm-muted);

}

.smcm-why-card-desc + .smcm-why-card-desc {

margin-top: 8px;

}

.smcm-why-card-desc strong {

color: var(--smcm-navy);

font-weight: 500;

}

.smcm-why-ecosystem {

display: block;

margin-top: 9px;

color: var(--smcm-navy);

font-weight: 700;

line-height: 1.65;

}

.smcm-why-dots {

display: flex;

justify-content: center;

align-items: center;

gap: 8px;

margin-top: 32px;

}

.smcm-why-dot {

all: unset;

box-sizing: border-box;

width: 8px;

height: 8px;

border-radius: 50%;

background: rgba(43,107,230,0.22);

cursor: pointer;

transition: background 0.25s ease, transform 0.25s ease;

}

.smcm-why-dot.smcm-why-active {

background: var(--smcm-blue);

transform: scale(1.3);

}

.smcm-why-dot:focus-visible {

outline: 2px solid var(--smcm-blue);

outline-offset: 3px;

}

@media (max-width: 1280px) {

.smcm-why-section { padding: 84px 40px 92px; }

}

@media (max-width: 1024px) {

.smcm-why-section { padding: 72px 32px 80px; }

.smcm-why-panel { padding: 40px 32px 30px; border-radius: 28px; }

.smcm-why-heading { font-size: 30px; }

.smcm-why-card { padding: 4px 24px; gap: 18px; }

.smcm-why-icon { width: 56px; height: 56px; flex-basis: 56px;
background: transparent; }

.smcm-why-icon-svg { width: 50px; height: 50px; }

}

@media (max-width: 768px) {

.smcm-why-section {

padding: 64px 20px 72px;

background:

radial-gradient(circle at 0% 0%, rgba(112,173,255,0.28) 0%,
rgba(112,173,255,0.12) 22%, rgba(255,255,255,0) 46%),

radial-gradient(circle at 100% 100%, rgba(112,173,255,0.30) 0%,
rgba(112,173,255,0.12) 24%, rgba(255,255,255,0) 48%);

}

.smcm-why-header { margin-bottom: 30px; }

.smcm-why-heading { font-size: 27px; letter-spacing: -0.6px; }

.smcm-why-sub { font-size: 12px; line-height: 1.65; }

.smcm-why-panel { padding: 32px 18px 26px; border-radius: 22px; }

/* Same behavior as the theme Features carousel:

one mobile slide = three vertically stacked cards. */

.smcm-why-page {

display: flex;

flex-direction: column;

gap: 24px;

flex: 0 0 100%;

max-width: 100%;

box-sizing: border-box;

}

.smcm-why-card {

flex: 0 0 auto;

max-width: 100%;

width: 100%;

padding: 0;

gap: 16px;

}

.smcm-why-card--divider { border-right: none; }

.smcm-why-icon { width: 52px; height: 52px; flex-basis: 52px;
background: transparent; }

.smcm-why-icon-svg { width: 46px; height: 46px; }

.smcm-why-card-title { font-size: 14px; }

.smcm-why-card-desc { font-size: 12px; line-height: 1.58; }

.smcm-why-dots { margin-top: 28px; }

}

@media (max-width: 480px) {

.smcm-why-section { padding: 52px 16px 60px; }

.smcm-why-heading { font-size: 24px; }

.smcm-why-panel { padding: 28px 16px 24px; border-radius: 18px; }

.smcm-why-page { gap: 22px; }

.smcm-why-icon { width: 48px; height: 48px; flex-basis: 48px;
background: transparent; }

.smcm-why-icon-svg { width: 42px; height: 42px; }

.smcm-why-card-title { font-size: 13.5px; margin-bottom: 6px; }

.smcm-why-card-desc { font-size: 11.5px; }

}

/* ══════════════════════════════════════════════════════════════

WHAT DIFFERENTIATES US --- IMAGE COMPARISON SLIDER

Elementor-friendly: fully scoped to .smcm-page / smcm-* classes.

══════════════════════════════════════════════════════════════ */

.smcm-compare-section {

width: 100%;

background: #ffffff;

padding: 88px 48px 96px;

}

.smcm-compare-inner {

width: 100%;

max-width: 1180px;

margin: 0 auto;

}

.smcm-compare-heading {

margin: 0 0 42px;

text-align: center;

font-family: var(--smcm-font-h) !important;

font-size: var(--fs-h2);

font-weight: 700;

line-height: 1.18;

letter-spacing: -1px;

color: var(--smcm-navy);

}

.smcm-page .smcm-compare-heading,

.smcm-page .smcm-compare-heading span {

font-family: var(--smcm-font-h) !important;

}

.smcm-compare-heading-blue {

color: var(--smcm-blue);

}

.smcm-compare-frame {

--smcm-compare-position: 50%;

position: relative;

width: 100%;

max-width: 960px;

margin: 0 auto;

aspect-ratio: 16 / 9;

border-radius: 28px;

overflow: hidden;

background: #eef4fb;

border: 1px solid rgba(43,107,230,0.12);

isolation: isolate;

touch-action: pan-y;

cursor: ew-resize;

}

.smcm-compare-image,

.smcm-compare-layer {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

}

.smcm-compare-image {

display: block;

object-fit: cover;

object-position: center center;

user-select: none;

-webkit-user-drag: none;

pointer-events: none;

}

.smcm-compare-manual {

z-index: 1;

}

.smcm-compare-layer {

z-index: 2;

overflow: hidden;

width: var(--smcm-compare-position);

}

.smcm-compare-layer .smcm-compare-image {

width: var(--smcm-compare-frame-width, 100%);

max-width: none;

}

.smcm-compare-frame::after {

content: '';

position: absolute;

z-index: 4;

top: 0;

bottom: 0;

left: var(--smcm-compare-position);

width: 3px;

transform: translateX(-50%);

background: rgba(255,255,255,0.96);

box-shadow: 0 0 0 1px rgba(11,22,63,0.08);

pointer-events: none;

}

.smcm-compare-handle {

position: absolute;

z-index: 6;

left: var(--smcm-compare-position);

top: 50%;

width: 68px;

height: 68px;

transform: translate(-50%, -50%);

border-radius: 12px;

background: #ffffff;

border: 1px solid rgba(11,22,63,0.08);

box-shadow: 0 10px 28px rgba(11,22,63,0.18);

display: flex;

align-items: center;

justify-content: center;

pointer-events: none;

}

.smcm-compare-handle-logo {

display: block;

width: 52px;

height: 52px;

object-fit: contain;

border: 0 !important;

outline: 0 !important;

box-shadow: none !important;

filter: none !important;

}

.smcm-compare-range {

position: absolute;

z-index: 7;

inset: 0;

width: 100%;

height: 100%;

margin: 0;

opacity: 0;

cursor: ew-resize;

appearance: none;

-webkit-appearance: none;

}

.smcm-compare-range:focus-visible + .smcm-compare-handle {

outline: 3px solid rgba(43,107,230,0.28);

outline-offset: 4px;

}

@media (max-width: 1024px) {

.smcm-compare-section {

padding: 72px 32px 80px;

}

.smcm-compare-heading {

margin-bottom: 34px;

font-size: clamp(28px, 4vw, 40px);

}

.smcm-compare-frame {

border-radius: 22px;

}

}

@media (max-width: 640px) {

.smcm-compare-section {

padding: 56px 16px 64px;

}

.smcm-compare-heading {

margin-bottom: 26px;

font-size: 28px;

line-height: 1.22;

letter-spacing: -0.6px;

}

.smcm-compare-frame {

aspect-ratio: 4 / 3;

border-radius: 18px;

}

.smcm-compare-handle {

width: 56px;

height: 56px;

border-radius: 10px;

}

.smcm-compare-handle-logo {

width: 42px;

height: 42px;

}

}

/* ══════════════════════════════════════════════════════════════

FAQ

Elementor-friendly and fully scoped to smcm-* classes.

══════════════════════════════════════════════════════════════ */

.smcm-faq-section {

position: relative;

width: 100%;

overflow: hidden;

background: #ffffff;

padding: 92px 48px 104px;

}

.smcm-faq-section::before,

.smcm-faq-section::after {

content: '';

position: absolute;

width: min(480px, 42vw);

height: min(480px, 42vw);

border-radius: 50%;

pointer-events: none;

filter: blur(54px);

opacity: 0.72;

z-index: 0;

}

.smcm-faq-section::before {

left: -210px;

top: 180px;

background: radial-gradient(circle, rgba(128,184,255,0.52) 0%,
rgba(178,214,255,0.28) 44%, rgba(255,255,255,0) 74%);

}

.smcm-faq-section::after {

right: -210px;

bottom: 70px;

background: radial-gradient(circle, rgba(128,184,255,0.52) 0%,
rgba(178,214,255,0.28) 44%, rgba(255,255,255,0) 74%);

}

.smcm-faq-inner {

position: relative;

z-index: 1;

width: 100%;

max-width: 1120px;

margin: 0 auto;

}

.smcm-faq-heading {

margin: 0 0 46px;

text-align: center;

font-family: var(--smcm-font-h) !important;

font-size: var(--fs-h2);

font-weight: 700;

line-height: 1.15;

letter-spacing: -1px;

color: var(--smcm-navy);

}

.smcm-faq-list {

display: flex;

flex-direction: column;

gap: 18px;

}

.smcm-faq-item {

background: rgba(255,255,255,0.96);

border: 1px solid rgba(11,22,63,0.04);

border-radius: 18px;

overflow: hidden;

}

.smcm-faq-question {

width: 100%;

display: flex !important;

align-items: center;

gap: 18px;

padding: 22px 24px !important;

background: #ffffff !important;

color: var(--smcm-navy) !important;

border: 0 !important;

text-align: left;

cursor: pointer;

}

.smcm-faq-icon {

width: 34px;

height: 34px;

min-width: 34px;

border-radius: 8px;

display: inline-flex;

align-items: center;

justify-content: center;

background: linear-gradient(145deg, #2B8DFF 0%, #72B8FF 100%);

position: relative;

flex-shrink: 0;

}

.smcm-faq-icon::before,

.smcm-faq-icon::after {

content: '';

position: absolute;

background: #ffffff;

border-radius: 2px;

transition: transform 0.22s ease, opacity 0.22s ease;

}

.smcm-faq-icon::before {

width: 14px;

height: 2px;

}

.smcm-faq-icon::after {

width: 2px;

height: 14px;

}

.smcm-faq-item.smcm-faq-open .smcm-faq-icon::after {

opacity: 0;

transform: scaleY(0);

}

.smcm-faq-question-text {

font-family: var(--smcm-font-h) !important;

font-size: 18px;

font-weight: 600;

line-height: 1.35;

color: var(--smcm-navy);

}

.smcm-faq-answer {

display: grid;

grid-template-rows: 0fr;

transition: grid-template-rows 0.28s ease;

background: #ffffff;

}

.smcm-faq-item.smcm-faq-open .smcm-faq-answer {

grid-template-rows: 1fr;

}

.smcm-faq-answer-inner {

overflow: hidden;

}

.smcm-faq-answer-copy {

margin: 0;

padding: 0 24px 22px 76px;

font-family: var(--smcm-font-b) !important;

font-size: 15px;

font-weight: 400;

line-height: 1.75;

color: var(--smcm-muted);

}

.smcm-faq-answer-copy strong {

font-family: inherit !important;

font-weight: 700;

color: var(--smcm-navy);

}

@media (max-width: 1024px) {

.smcm-faq-section {

padding: 76px 32px 88px;

}

.smcm-faq-heading {

margin-bottom: 38px;

font-size: 40px;

}

}

@media (max-width: 640px) {

.smcm-faq-section {

padding: 58px 16px 68px;

}

.smcm-faq-section::before,

.smcm-faq-section::after {

width: 320px;

height: 320px;

filter: blur(48px);

}

.smcm-faq-section::before {

left: -190px;

top: 110px;

}

.smcm-faq-section::after {

right: -190px;

bottom: 40px;

}

.smcm-faq-heading {

margin-bottom: 28px;

font-size: 30px;

line-height: 1.2;

}

.smcm-faq-list {

gap: 12px;

}

.smcm-faq-item {

border-radius: 14px;

}

.smcm-faq-question {

gap: 14px;

padding: 17px 16px !important;

}

.smcm-faq-icon {

width: 30px;

height: 30px;

min-width: 30px;

border-radius: 7px;

}

.smcm-faq-question-text {

font-size: 15px;

line-height: 1.4;

}

.smcm-faq-answer-copy {

padding: 0 16px 18px 60px;

font-size: 13.5px;

line-height: 1.65;

}

}

/* ══════════════════════════════════════════════════════════════

GLOBAL SECTION HEADING SYSTEM --- UI TYPOGRAPHY NORMALIZATION

Every H2 now uses one responsive scale at every viewport width.

══════════════════════════════════════════════════════════════ */

.smcm-page {

--smcm-section-h2-size: clamp(30px, 2.8vw, 64px);

--smcm-section-h2-line-height: 1.16;

--smcm-section-h2-letter-spacing: -0.9px;

}

.smcm-page h2 {

font-family: var(--smcm-font-h) !important;

font-weight: 700 !important;

line-height: var(--smcm-section-h2-line-height) !important;

letter-spacing: var(--smcm-section-h2-letter-spacing) !important;

color: var(--smcm-navy);

text-wrap: balance;

}

/* The global .smcm-page span rule uses Poppins + !important.

Force every span inside an H2 to inherit the exact H2 typography. */

.smcm-page h2 span {

font-family: inherit !important;

font-size: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

letter-spacing: inherit !important;

}

/* Keep the same proportional heading system on very small phones. */

@media (max-width: 420px) {

.smcm-page {

--smcm-section-h2-size: clamp(28px, 7.2vw, 30px);

--smcm-section-h2-letter-spacing: -0.65px;

}

}

/* ══════════════════════════════════════════════════════════════

RESPONSIVE COPY + SECTION RHYTHM --- LARGE-SCREEN UI AUDIT FIX

Keeps typography and vertical rhythm proportional as viewport grows.

══════════════════════════════════════════════════════════════ */

.smcm-page {

--smcm-section-space-y: clamp(64px, 4vw, 96px);

--smcm-heading-content-gap: clamp(32px, 2vw, 48px);

/* One shared, fluid paragraph size used everywhere on the page ---

section intros, card copy, FAQ answers, compare/tour subtitles,

and tour callouts all read at the exact same size per screen

width instead of each section having its own slightly-different

value. */

--smcm-body-copy-size: var(--fs-body);

--smcm-section-subtitle-size: var(--smcm-body-copy-size);

--smcm-content-copy-size: var(--smcm-body-copy-size);

--smcm-card-title-size: var(--fs-h3);

--smcm-faq-question-size: var(--fs-h3);

--smcm-faq-answer-size: var(--smcm-body-copy-size);

--smcm-copy-line-height: 1.65;

}

/* One consistent vertical rhythm between all primary content sections.
*/

.smcm-page .smcm-sf-section,

.smcm-page .smcm-tour-section,

.smcm-page .smcm-why-section,

.smcm-page .smcm-compare-section,

.smcm-page .smcm-faq-section {

padding-top: var(--smcm-section-space-y) !important;

padding-bottom: var(--smcm-section-space-y) !important;

}

/* Main section subtitles scale with viewport instead of staying tiny.
*/

.smcm-page .smcm-hero-subtitle,

.smcm-page .smcm-sf-subtitle,

.smcm-page .smcm-tour-subtitle,

.smcm-page .smcm-why-sub {

font-size: var(--smcm-section-subtitle-size) !important;

line-height: 1.65 !important;

text-wrap: pretty;

}

.smcm-page .smcm-hero-subtitle {

max-width: clamp(620px, 46vw, 1100px) !important;

}

.smcm-page .smcm-sf-subtitle,

.smcm-page .smcm-tour-subtitle {

max-width: clamp(720px, 42vw, 1040px) !important;

}

.smcm-page .smcm-why-sub {

max-width: clamp(720px, 42vw, 1020px) !important;

}

/* Feature and editorial copy: readable at 2K/2.5K/3K widths. */

.smcm-page .smcm-sf-tab-desc,

.smcm-page .smcm-why-card-desc {

font-size: var(--smcm-content-copy-size) !important;

line-height: var(--smcm-copy-line-height) !important;

text-wrap: pretty;

}

.smcm-page .smcm-sf-tab-title,

.smcm-page .smcm-why-card-title {

font-size: var(--smcm-card-title-size) !important;

line-height: 1.38 !important;

}

.smcm-page .smcm-tour-intro-desc {

font-size: var(--smcm-body-copy-size) !important;

line-height: 1.65 !important;

max-width: clamp(36em, 38vw, 48em) !important;

}

.smcm-page .smcm-faq-question-text {

font-size: var(--smcm-faq-question-size) !important;

line-height: 1.4 !important;

}

.smcm-page .smcm-faq-answer-copy {

font-size: var(--smcm-faq-answer-size) !important;

line-height: 1.7 !important;

}

.smcm-page .smcm-compare-subtitle {

font-size: var(--smcm-body-copy-size) !important;

line-height: 1.7 !important;

}

/* Normalize heading-cluster-to-content spacing across sections. */

.smcm-page .smcm-sf-header,

.smcm-page .smcm-why-header {

margin-bottom: var(--smcm-heading-content-gap) !important;

}

.smcm-page .smcm-sf-heading,

.smcm-page .smcm-why-heading {

margin-bottom: 12px !important;

}

.smcm-page .smcm-tour-heading {

margin-bottom: 12px !important;

}

.smcm-page .smcm-tour-subtitle {

margin: 0 auto var(--smcm-heading-content-gap) !important;

padding-left: 0 !important;

padding-right: 0 !important;

}

.smcm-page .smcm-compare-heading,

.smcm-page .smcm-faq-heading {

margin-bottom: var(--smcm-heading-content-gap) !important;

}

/* Large canvases need wider content containers, not only larger type.
*/

.smcm-page .smcm-why-inner {

max-width: clamp(1140px, 68vw, 1900px) !important;

}

.smcm-page .smcm-compare-inner {

max-width: clamp(1180px, 68vw, 1900px) !important;

}

/* .smcm-why-header caps the heading/subtitle at a fixed 780px --- fine

on normal screens, but on very wide monitors (2250px+ range) that's

narrower than the heading actually needs, forcing an unnecessary

line break. Let it stretch with the viewport instead, with a

generous side margin still reserved for breathing room; it will

only wrap if the text genuinely can't fit even at that width. */

.smcm-page .smcm-why-header {

max-width: clamp(780px, 52vw, 1500px) !important;

}

.smcm-page .smcm-compare-frame {

max-width: clamp(960px, 58vw, 1380px) !important;

}

.smcm-page .smcm-faq-inner {

max-width: clamp(1120px, 66vw, 1600px) !important;

}

/* Let cards breathe proportionally as their container expands. */

.smcm-page .smcm-why-card {

gap: clamp(18px, 1.15vw, 28px) !important;

padding-left: clamp(24px, 1.6vw, 40px) !important;

padding-right: clamp(24px, 1.6vw, 40px) !important;

}

.smcm-page .smcm-why-panel {

padding-top: clamp(38px, 2.4vw, 56px) !important;

padding-bottom: clamp(30px, 1.8vw, 42px) !important;

}

.smcm-page .smcm-faq-question {

padding-top: clamp(20px, 1.15vw, 28px) !important;

padding-bottom: clamp(20px, 1.15vw, 28px) !important;

}

@media (max-width: 1024px) {

.smcm-page {

--smcm-section-space-y: 64px;

--smcm-heading-content-gap: 32px;

--smcm-body-copy-size: 14px;

--smcm-card-title-size: 14px;

--smcm-faq-question-size: 17px;

}

}

@media (max-width: 768px) {

.smcm-page {

--smcm-section-space-y: 56px;

--smcm-heading-content-gap: 28px;

--smcm-body-copy-size: 13.5px;

--smcm-card-title-size: 14px;

--smcm-faq-question-size: 15px;

}

.smcm-page .smcm-why-card {

padding-left: 0 !important;

padding-right: 0 !important;

gap: 16px !important;

}

.smcm-page .smcm-why-panel {

padding-top: 32px !important;

padding-bottom: 26px !important;

}

}

@media (max-width: 480px) {

.smcm-page {

--smcm-section-space-y: 52px;

--smcm-heading-content-gap: 26px;

--smcm-body-copy-size: 13px;

--smcm-card-title-size: 13.5px;

}

}

/* ══════════════════════════════════════════════════════════════

FINAL WIDE-SCREEN UI FIX

FAQ typography, Why-card body font, and tour background scaling.

══════════════════════════════════════════════════════════════ */

/* FAQ questions:

- force Plus Jakarta Sans over the global span/Poppins rule

- scale more visibly on wider screens */

.smcm-page .smcm-faq-question .smcm-faq-question-text {

font-family: var(--smcm-font-h) !important;

font-size: clamp(18px, 1.08vw, 24px) !important;

font-weight: 600 !important;

line-height: 1.38 !important;

letter-spacing: -0.15px;

}

/* Why-section descriptive copy must use Poppins, including nested

bold text and the three ecosystem lines. */

.smcm-page .smcm-why-card-desc,

.smcm-page .smcm-why-card-desc strong,

.smcm-page .smcm-why-card-desc span {

font-family: var(--smcm-font-b) !important;

}

/* Tour background:

The original wide-screen ::before width rules were declared before

the base ::before block, so the later base 1280px width overrode them.

Re-apply the intended breakpoints here, after every base rule. */

@media (min-width: 1440px) {

.smcm-page .smcm-tour-section::before {

width: min(1400px, calc(100% - 64px)) !important;

}

}

@media (min-width: 1600px) {

.smcm-page .smcm-tour-section::before {

width: min(1520px, calc(100% - 72px)) !important;

}

}

@media (min-width: 1800px) {

.smcm-page .smcm-tour-section::before {

width: min(1680px, calc(100% - 80px)) !important;

}

}

@media (min-width: 2100px) {

.smcm-page .smcm-tour-section::before {

width: min(1840px, calc(100% - 96px)) !important;

}

}

@media (min-width: 2400px) {

.smcm-page .smcm-tour-section::before {

width: min(2040px, calc(100% - 112px)) !important;

}

}

@media (min-width: 2700px) {

.smcm-page .smcm-tour-section::before {

width: min(2240px, calc(100% - 128px)) !important;

}

}

/* Preserve the tighter mobile FAQ scale. */

@media (max-width: 768px) {

.smcm-page .smcm-faq-question .smcm-faq-question-text {

font-size: 15px !important;

letter-spacing: 0;

}

}

/* ══════════════════════════════════════════════════════════════

HOW SMART CHANGE WORKS --- SINGLE DESKTOP LAYOUT AT ALL SIZES

No mobile/tablet redesign. Below 1200px the full desktop tour

is proportionally scaled to the available width.

══════════════════════════════════════════════════════════════ */

.smcm-tour-scale-shell {

width: 100%;

display: flex;

justify-content: center;

align-items: flex-start;

position: relative;

}

@media (max-width: 1199px) {

.smcm-page .smcm-tour-section {

overflow: hidden;

padding-left: 16px;

padding-right: 16px;

}

.smcm-page .smcm-tour-scale-shell {

width: 100%;

height: var(--smcm-tour-scaled-height, auto);

overflow: visible;

}

.smcm-page .smcm-tour-card {

width: 1200px !important;

min-width: 1200px !important;

max-width: none !important;

flex: 0 0 1200px !important;

margin: 0 !important;

transform: scale(var(--smcm-tour-scale, 1));

transform-origin: top center;

}

/* Freeze the opening slide at the same desktop composition.

The whole card is scaled afterward, so nothing stacks or moves. */

.smcm-page .smcm-tour-slide {

padding: 22px;

}

.smcm-page .smcm-tour-viewport {

min-height: 0;

overflow: hidden;

}

.smcm-page .smcm-tour-intro {

flex-direction: row;

flex-wrap: nowrap;

justify-content: center;

align-items: center;

text-align: left;

min-height: 0;

gap: 32px;

padding: 0 40px;

max-width: 1180px;

}

.smcm-page .smcm-tour-intro-photo {

flex: 0 0 360px;

width: 360px;

max-width: 360px;

max-height: 450px;

margin: 0;

aspect-ratio: 4 / 5;

}

.smcm-page .smcm-tour-intro-copy {

flex: 1 1 460px;

max-width: 500px;

align-items: flex-start;

text-align: left;

padding: 8px 0;

}

.smcm-page .smcm-tour-intro-title {

font-size: 26px;

max-width: 28em;

}

.smcm-page .smcm-tour-intro-desc {

font-size: 14.5px !important;

max-width: 36em;

}

.smcm-page .smcm-tour-start-btn {

align-self: flex-start;

font-size: 15px !important;

padding: 13px 28px !important;

}

.smcm-page .smcm-tour-powered {

align-self: flex-start;

text-align: left;

font-size: 13px;

margin-top: 26px;

}

/* Restore the desktop shell structure on every tour screen. */

.smcm-page .smcm-tour-s3-body,

.smcm-page .smcm-tour-s4-body,

.smcm-page .smcm-tour-s5-body,

.smcm-page .smcm-tour-s6-body,

.smcm-page .smcm-tour-s7-body,

.smcm-page .smcm-tour-s8-body,

.smcm-page .smcm-tour-s9-body,

.smcm-page .smcm-tour-slide10,

.smcm-page .smcm-tour-s11-body,

.smcm-page .smcm-tour-s12-body,

.smcm-page .smcm-tour-s13-body {

flex-direction: row;

}

.smcm-page .smcm-tour-shell-sidebar {

display: flex;

width: 200px;

}

.smcm-page .smcm-tour-shell-wizard-subnav {

display: block;

width: 160px;

}

.smcm-page .smcm-tour-s10-sidebar {

display: flex;

width: 200px;

}

.smcm-page .smcm-tour-shell-wizard-steps {

display: flex;

}

.smcm-page .smcm-tour-shell-side-brand span + *,

.smcm-page .smcm-tour-shell-nav-item span:last-child,

.smcm-page .smcm-tour-shell-side-foot {

display: initial;

}

.smcm-page .smcm-tour-shell-nav-item {

justify-content: flex-start;

padding: 10px 16px;

}

.smcm-page .smcm-tour-s4-grid {

grid-template-columns: repeat(3, minmax(0, 1fr));

}

.smcm-page .smcm-tour-s4-wide {

grid-column: 1 / 3;

}

.smcm-page .smcm-tour-s4-ref {

grid-column: 3;

grid-row: span 3;

}

.smcm-page .smcm-tour-s4-ref-img {

height: 110px;

max-width: none;

}

.smcm-page .smcm-tour-s4-page-head,

.smcm-page .smcm-tour-s3-create-wrap,

.smcm-page .smcm-tour-s3-page-head,

.smcm-page .smcm-tour-s5-page-head,

.smcm-page .smcm-tour-s8-panel-head {

flex-direction: row;

}

.smcm-page .smcm-tour-s8-panel-head {

align-items: center;

}

.smcm-page .smcm-tour-s8-row3 {

grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr);

}

.smcm-page .smcm-tour-s9-row3 {

grid-template-columns: repeat(3, minmax(0, 1fr));

}

.smcm-page .smcm-tour-s7-row {

flex-direction: row;

align-items: center;

}

.smcm-page .smcm-tour-s6-panel,

.smcm-page .smcm-tour-s3-table-wrap,

.smcm-page .smcm-tour-s5-table,

.smcm-page .smcm-tour-s10-table {

overflow: hidden;

}

.smcm-page .smcm-tour-s6-table,

.smcm-page .smcm-tour-s12-table {

display: table;

overflow: visible;

white-space: normal;

}

.smcm-page .smcm-tour-s3-table-head,

.smcm-page .smcm-tour-s3-table-row {

grid-template-columns: 28px minmax(0, 1.4fr) repeat(6, minmax(0,
0.8fr));

min-width: 0;

}

.smcm-page .smcm-tour-s3-table-head span,

.smcm-page .smcm-tour-s3-table-row span,

.smcm-page .smcm-tour-s5-thead span,

.smcm-page .smcm-tour-s5-row span,

.smcm-page .smcm-tour-s10-thead span,

.smcm-page .smcm-tour-s10-row span {

display: initial;

}

.smcm-page .smcm-tour-s5-thead,

.smcm-page .smcm-tour-s5-row {

grid-template-columns: 28px minmax(0, 1.4fr) repeat(6, minmax(0,
0.8fr));

}

.smcm-page .smcm-tour-s10-thead,

.smcm-page .smcm-tour-s10-row {

grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 0.5fr) minmax(0,
0.5fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0,
0.9fr) minmax(0, 0.9fr);

}

.smcm-page .smcm-tour-s10-nav-item,

.smcm-page .smcm-tour-s10-nav-sub {

font-size: 12px;

}

.smcm-page .smcm-tour-slide2 {

min-height: 400px;

}

.smcm-page .smcm-tour-slide2-sidebar {

display: flex;

}

.smcm-page .smcm-tour-modal {

width: min(520px, 88%);

border-radius: 20px;

}

.smcm-page .smcm-tour-s11-callout-wrap {

width: min(300px, 48%);

align-self: flex-end;

}

.smcm-page .smcm-tour-s13-callout-wrap {

align-items: flex-end;

}

}

/* ══════════════════════════════════════════════════════════════

TOUR BACKGROUND --- MOBILE / TABLET PORTRAIT FIX

Keep the same desktop tour composition, but make the decorative

background fill the full section behind the scaled tour.

══════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {

.smcm-page .smcm-tour-section::before {

left: 0 !important;

right: 0 !important;

top: 0 !important;

bottom: 0 !important;

width: 100% !important;

transform: none !important;

background-size: cover !important;

background-position: center center !important;

border-radius: 0 !important;

}

}

.smcm-compare-subtitle {

margin: -24px auto 38px;

max-width: 820px;

text-align: center;

font-family: var(--smcm-font-b) !important;

font-size: clamp(14px, 0.95vw, 18px);

font-weight: 500;

line-height: 1.7;

color: var(--smcm-muted);

}

@media (max-width: 768px) {

.smcm-compare-subtitle {

margin: -14px auto 26px;

padding: 0 6px;

font-size: 13px;

line-height: 1.6;

}

}

.smcm-faq-question-heading {

margin: 0;

padding: 0;

font-family: var(--smcm-font-h) !important;

font-size: inherit;

font-weight: 600;

line-height: inherit;

}

.smcm-page .smcm-faq-question-heading .smcm-faq-question,

.smcm-page .smcm-faq-question-heading .smcm-faq-question-text {

font-family: var(--smcm-font-h) !important;

}

.smcm-page .smcm-faq-question-heading .smcm-faq-question-text {

font-size: clamp(18px, 1.08vw, 24px) !important;

font-weight: 600 !important;

line-height: 1.38 !important;

letter-spacing: -0.15px;

}

@media (max-width: 768px) {

.smcm-page .smcm-faq-question-heading .smcm-faq-question-text {

font-size: 15px !important;

line-height: 1.4 !important;

letter-spacing: 0;

}

}

/* ══════════════════════════════════════════════════════════════

TOUR INTRO IMAGE --- SVG FIT / CLEAN WRAPPER FIX

The new Image.svg is 588×532 (landscape-ish), while this wrapper

was still using the old portrait 4:5 ratio. That mismatch caused

the bottom of the SVG to be cropped on shorter laptop screens.

══════════════════════════════════════════════════════════════ */

.smcm-page .smcm-tour-intro-photo {

background: transparent !important;

box-shadow: none !important;

border: 0 !important;

outline: 0 !important;

/* Match the actual SVG dimensions instead of the old portrait ratio.
*/

aspect-ratio: 588 / 532 !important;

max-height: none !important;

/* Keep clipping only for a clean rounded image edge. */

overflow: hidden !important;

border-radius: 22px !important;

}

.smcm-page .smcm-tour-portrait {

width: 100% !important;

height: 100% !important;

/* Show the entire SVG --- no top anchoring and no cover-cropping. */

object-fit: contain !important;

object-position: center center !important;

display: block;

border-radius: 22px !important;

background: transparent !important;

border: 0 !important;

outline: 0 !important;

box-shadow: none !important;

filter: none !important;

}

/* Smaller laptop widths: keep the same image proportions and give

it enough width without using any height cap that can crop it. */

@media (min-width: 1200px) and (max-width: 1440px) {

.smcm-page .smcm-tour-intro-photo {

flex-basis: 360px !important;

width: 360px !important;

max-width: 360px !important;

max-height: none !important;

}

}

/* The mobile/tablet tour uses the scaled desktop composition.

Preserve the exact same SVG ratio before the whole card scales. */

@media (max-width: 1199px) {

.smcm-page .smcm-tour-intro-photo {

flex: 0 0 360px !important;

width: 360px !important;

max-width: 360px !important;

aspect-ratio: 588 / 532 !important;

max-height: none !important;

}

}


/* Elementor-only host-spacing/header-gap fixes removed here — this
   page now renders via get_header()/get_footer() in the real theme,
   so those Elementor-widget-specific selectors never matched anything
   and were confirmed-dead weight. */

/* ══════════════════════════════════════════════════════════════

WIDE-SCREEN TYPE + FULL-WIDTH FEATURES + HERO RHYTHM

Final cascade override.

══════════════════════════════════════════════════════════════ */

.smcm-page {

--smcm-content-h3-size: clamp(20px, 1.25vw, 32px);

--smcm-content-h4-size: clamp(19px, 1.15vw, 30px);

--smcm-feature-copy-size: clamp(14px, 0.78vw, 19px);

--smcm-callout-h4-size: clamp(15px, 0.95vw, 22px);

--smcm-callout-copy-size: var(--smcm-body-copy-size);

}

/* Tour-slide callouts (the navy "explainer" boxes) use bare
<h4>/<p>

tags per slide, each previously locked to a flat \~12-13px with no

growth at all on wide screens. Bring them into the same fluid

scale as the rest of the marketing copy on this page. */

.smcm-page .smcm-tour-s3-callout h4,

.smcm-page .smcm-tour-s6-callout h4,

.smcm-page .smcm-tour-s7-callout h4,

.smcm-page .smcm-tour-s8-callout h4,

.smcm-page .smcm-tour-s9-callout h4,

.smcm-page .smcm-tour-s11-callout h4,

.smcm-page .smcm-tour-s13-callout h4 {

font-size: var(--smcm-callout-h4-size) !important;

line-height: 1.32 !important;

}

.smcm-page .smcm-tour-s3-callout p,

.smcm-page .smcm-tour-s6-callout p,

.smcm-page .smcm-tour-s7-callout p,

.smcm-page .smcm-tour-s8-callout p,

.smcm-page .smcm-tour-s9-callout p,

.smcm-page .smcm-tour-s11-callout p,

.smcm-page .smcm-tour-s13-callout p {

font-size: var(--smcm-callout-copy-size) !important;

line-height: 1.6 !important;

}

/* Meaningful content H3s grow much more on 2K/2.5K displays,

while staying compact automatically on tablets/phones. */

.smcm-page .smcm-sf-tab-title {

font-family: var(--smcm-font-h) !important;

font-size: 15px !important; /* matches the theme's real .sf-tab-title,
  which is intentionally flat with no wide-screen growth — this tab
  list is a compact label list, not a card heading */

font-weight: 700 !important;

line-height: 1.34 !important;

letter-spacing: -0.22px;

}

.smcm-page .smcm-why-card-title {

font-family: var(--smcm-font-h) !important;

font-size: var(--smcm-content-h3-size) !important;

font-weight: 700 !important;

line-height: 1.34 !important;

letter-spacing: -0.22px;

}

/* FAQ questions are semantic H4s: keep them visibly larger on wide
screens. */

.smcm-page .smcm-faq-question-heading,

.smcm-page .smcm-faq-question-heading .smcm-faq-question-text,

.smcm-page .smcm-faq-question .smcm-faq-question-text {

font-family: var(--smcm-font-h) !important;

font-size: var(--smcm-content-h4-size) !important;

font-weight: 600 !important;

line-height: 1.4 !important;

letter-spacing: -0.15px;

}

/* Balance body copy with the larger card/question typography. */

.smcm-page .smcm-sf-tab-desc {

font-size: var(--fs-body) !important; /* the theme's real .sf-tab-desc is
  a <p> tag, so despite its own flat 12.5px base rule, the sitewide
  "p, span:not(...)" rule actually wins via specificity and it renders
  at --fs-body's fluid size in practice — matching that real behavior,
  not the misleading unused base declaration */

line-height: 1.6 !important;

}

.smcm-page .smcm-why-card-desc {

font-size: var(--smcm-feature-copy-size) !important;

line-height: 1.68 !important;

}

/* ── Smart Change Features: use the available page width ── */

.smcm-page .smcm-sf-section {

width: 100% !important;

padding-left: clamp(20px, 4.5vw, 120px) !important;

padding-right: clamp(20px, 4.5vw, 120px) !important;

}

.smcm-page .smcm-sf-inner {

width: 100% !important;

max-width: none !important;

padding: 0 !important;

}

.smcm-page .smcm-sf-header {

width: 100%;

max-width: none !important;

}

.smcm-page .smcm-sf-layout {

width: 100% !important;

max-width: none !important;

margin: 0 !important;

justify-content: space-between !important;

align-items: center !important;

gap: clamp(44px, 6vw, 170px) !important;

}

.smcm-page .smcm-sf-tabs {

width: auto !important;

max-width: none !important;

flex: 1 1 44% !important;

min-width: 0 !important;

}

.smcm-page .smcm-sf-panel {

width: auto !important;

max-width: none !important;

flex: 1 1 46% !important;

min-width: 0 !important;

padding: clamp(20px, 2.2vw, 46px) !important;

}

.smcm-page .smcm-sf-media {

width: 100% !important;

max-width: clamp(420px, 31vw, 760px) !important;

}

.smcm-page .smcm-sf-tab {

padding-top: clamp(14px, 0.9vw, 24px) !important;

padding-bottom: clamp(14px, 0.9vw, 24px) !important;

}

/* Medium screens still use the full available width rather than the
old

320px / 360px boxed columns. */

@media (min-width: 901px) and (max-width: 1199px) {

.smcm-page .smcm-sf-section {

padding-left: 28px !important;

padding-right: 28px !important;

}

.smcm-page .smcm-sf-layout {

gap: clamp(34px, 4.5vw, 58px) !important;

}

.smcm-page .smcm-sf-tabs {

flex-basis: 45% !important;

}

.smcm-page .smcm-sf-panel {

flex-basis: 48% !important;

padding: 20px !important;

}

.smcm-page .smcm-sf-media {

max-width: 100% !important;

}

}

/* Phone/tablet stack remains, but remove the old narrow 520px box.

Each active feature and its image can use the full screen width. */

@media (max-width: 900px) {

.smcm-page .smcm-sf-section {

padding-left: clamp(16px, 4vw, 28px) !important;

padding-right: clamp(16px, 4vw, 28px) !important;

}

.smcm-page .smcm-sf-layout {

width: 100% !important;

max-width: none !important;

margin: 0 !important;

gap: 10px !important;

}

.smcm-page .smcm-sf-tabs {

width: 100% !important;

max-width: none !important;

}

.smcm-page .smcm-sf-tab-mobile-img {

width: 100% !important;

max-width: none !important;

margin-left: 0 !important;

margin-right: 0 !important;

box-shadow: none !important;

background: transparent !important;

}

}

/* ── Hero: reduce excessive top breathing room at every width ── */

.smcm-page .smcm-hero {

padding-top: clamp(40px, 3vw, 72px) !important;

}

/* On very small phones keep it compact but not cramped. */

@media (max-width: 480px) {

.smcm-page .smcm-hero {

padding-top: 32px !important;

}

.smcm-page {

--smcm-content-h3-size: 20px;

--smcm-content-h4-size: 19px;

--smcm-feature-copy-size: 13.5px;

--smcm-callout-h4-size: 15px;

--smcm-callout-copy-size: var(--smcm-body-copy-size);

}

}

/* Extra-wide screens: deliberately increase content scale and width.

2250px+ was the main weak point in the previous UI. */

@media (min-width: 2000px) {

.smcm-page {

--smcm-content-h3-size: clamp(29px, 1.42vw, 38px);

--smcm-content-h4-size: clamp(26px, 1.28vw, 35px);

--smcm-feature-copy-size: clamp(17px, 0.82vw, 21px);

--smcm-callout-h4-size: clamp(20px, 1.05vw, 26px);

--smcm-callout-copy-size: var(--smcm-body-copy-size);

--smcm-body-copy-size: clamp(22px, 1.05vw, 27px);

}

.smcm-page .smcm-sf-section {

padding-left: clamp(90px, 4.5vw, 150px) !important;

padding-right: clamp(90px, 4.5vw, 150px) !important;

}

.smcm-page .smcm-sf-layout {

gap: clamp(110px, 6vw, 190px) !important;

}

.smcm-page .smcm-sf-media {

max-width: clamp(620px, 30vw, 820px) !important;

}

}


/* ════════════════════════════════════════════════════════════════
   SMART GPT / AI PAGE (page-sfs-smart-gpt.php)
   ════════════════════════════════════════════════════════════════
   Converted from a standalone HTML build. All classes/IDs use an
   "smai-" prefix (Smart AI) to avoid collision with the rest of the
   theme — verified zero real overlap at conversion time (some
   comment-text mentions of smcm- and .p- class names appear in code
   comments explaining what was copied from where, not as live
   selectors).

   Three sections deliberately REUSE existing theme classes rather
   than introducing new smai-* ones, since the instruction was to
   copy them exactly, not adapt:
     - Trusted-by logo marquee: .trusted / .logo-* — identical to
       the homepage's own, including real client logo content.
     - FAQ accordion: .smcm-faq-* — identical to Smart Change's,
       and its toggle script (already in this file, see the Smart
       Change section) is REUSED rather than duplicated, since it's
       class-based and already targets these same elements.

   Root variables (--navy, --blue, --font-h, --fs-h2, etc.) are NOT
   redefined here — this page uses the theme's existing sitewide
   ones directly, confirmed to have identical values.
   ════════════════════════════════════════════════════════════════ */

/* ── FAQ variable bridge ──────────────────────────────────────────
   Smart GPT's FAQ reuses Smart Change's exact .smcm-faq-* classes
   (see the note above), but several of those shared rules read
   --smcm-font-h / --smcm-navy / --smcm-faq-question-size / etc.,
   which are normally defined once on Smart Change's .smcm-page
   wrapper. Smart GPT's page structure never had that wrapper, so
   those variables were resolving to nothing — which is why the FAQ
   question text was silently falling back to the browser's default
   font (Arial) instead of the theme's Space Grotesk.
   Deliberately scoped to .smcm-faq-section (which Smart GPT DOES
   have) rather than adding a .smcm-page wrapper — .smcm-page also
   carries its own separate !important H2 sizing system that would
   have fought the --fs-h2 consistency fix already in place. */
.smcm-faq-section {
  --smcm-navy: var(--navy);
  --smcm-muted: var(--muted);
  --smcm-font-h: var(--font-h);
  --smcm-font-b: var(--font-b);
  --smcm-faq-question-size: var(--fs-h3);
  --smcm-faq-answer-size: var(--fs-body);
  --smcm-heading-content-gap: clamp(32px, 2vw, 48px);
  --smcm-section-space-y: clamp(64px, 4vw, 96px);
}

/* ══════════════════════════════════════════════════════════════
   HERO + VIDEO — copied line-for-line from Smart Change's
   .smcm-hero-dashboard / .smcm-hero / .smcm-reveal-shot(-wrap)
   block (assets/css/main.css), renamed smcm-* → smai-* (Smart AI)
   so it can never collide with Smart Change's own classes or the
   theme's real .p-* classes if pages are ever open together.
   Every breakpoint tier below is preserved exactly as in the
   source — nothing invented, nothing dropped.
   ══════════════════════════════════════════════════════════════ */

.smai-hero-dashboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: transparent;
}

.smai-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52vh;
  padding: 132px 48px 8px;
  background: transparent;
  text-align: center;
}

.smai-hero-content {
  width: 100%;
  max-width: clamp(320px, 62vw, 1760px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.smai-hero-title {
  font-family: var(--font-h);
  font-size: clamp(36px, 4vw, 118px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.24;
  letter-spacing: -1.2px;
  margin-bottom: 16px;
}
.smai-hero-title-accent { color: var(--blue); }

.smai-hero-subtitle {
  font-family: var(--font-b);
  font-size: clamp(12px, 1vw, 18px);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
  max-width: clamp(400px, 46vw, 900px);
  margin-bottom: 32px;
}

.smai-hero-btn {
  position: relative;
  z-index: 5;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, #0351C2 0%, #01265C 100%) !important;
  color: #fff !important;
  padding: 20px 36px !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: 0.1px;
  margin-bottom: 32px;
  border: none !important;
}

@media (min-width: 1440px) {
  .smai-hero { min-height: 54vh; padding: 148px 80px 8px; }
}
@media (max-width: 768px) {
  .smai-hero { min-height: 40vh; padding: 96px 20px 6px; }
  .smai-hero-title { font-size: 36px; }
  .smai-hero-subtitle { font-size: 12px; }
  .smai-hero-btn { padding: 16px 26px !important; font-size: 12px !important; }
}

/* ── The video itself — same scale/transform setup as .smcm-reveal-shot,
   generalized to work on a <video> the same way it worked on Smart
   Change's <img>: the JS below only ever reads/writes .style.transform,
   so the element type doesn't matter. ── */
.smai-reveal-shot {
  display: block;
  width: 100%;
  max-width: clamp(560px, 68vw, 1900px);
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  transform: scale(0.6);
  transform-origin: center top;
  will-change: transform;
}

.smai-reveal-shot-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 48px 40px;
  box-sizing: border-box;
}
@media (min-width: 2200px) {
  .smai-reveal-shot-wrap { padding: 0 64px 48px; }
}

/* ── Wide-screen letter-spacing / min-height tiers — copied exactly
   from the .smcm-hero-title / .smcm-hero tier ladder. ── */
@media (min-width: 1200px) and (max-width: 1440px) {
  .smai-hero { min-height: 44vh; padding-top: 104px; padding-bottom: 8px; }
}
@media (min-width: 1440px) {
  .smai-hero-title { letter-spacing: -1.4px; }
}
@media (min-width: 1600px) {
  .smai-hero-title { letter-spacing: -1.6px; }
}
@media (min-width: 1800px) {
  .smai-hero { min-height: 46vh; padding: 96px 96px 8px; }
  .smai-hero-title { letter-spacing: -1.8px; }
}
@media (min-width: 2100px) {
  .smai-hero-title { letter-spacing: -2px; }
}
@media (min-width: 2200px) {
  .smai-hero { min-height: 48vh; padding: 96px 112px 8px; }
}
@media (min-width: 2400px) {
  .smai-hero-title { letter-spacing: -2.2px; }
}
@media (min-width: 2700px) {
  .smai-hero-title { letter-spacing: -2.5px; }
}

/* ── Final-cascade overrides — copied exactly from the .smcm-page
   -scoped rules that win last in the source file. ── */
.smai-hero-subtitle {
  max-width: clamp(620px, 46vw, 1100px) !important;
}
.smai-hero {
  padding-top: clamp(40px, 3vw, 72px) !important;
}
@media (max-width: 480px) {
  .smai-hero { padding-top: 32px !important; }
}
/* ══════════════════════════════════════════════════════════════
   AI-POWERED SOLUTIONS — v3, matching the confirmed reference:
   - "AI-Powered" in blue, "Solutions for Food Safety" in navy
   - Background: the same cloud/wash image used behind Change
     Management's tour section (background.svg)
   - Tab strip + content merged into ONE rounded card, tabs with
     icons sitting at the top, no gap/separate card
   - Bullet rows use small colored icons (doc/refresh/checklist),
     not checkmarks
   - "Expected Output:" as a solid blue pill badge, not an amber
     "Impact:" box
   ══════════════════════════════════════════════════════════════ */

.smai-sf-section {
  position: relative;
  width: 100%;
  padding: 80px clamp(20px, 5vw, 64px);
  overflow: visible;
}
.smai-sf-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 16px;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(1400px, calc(100% - 32px));
  background-image: url('https://smartaudits.online/wp-content/uploads/2026/08/background.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 28px;
  z-index: 0;
  pointer-events: none;
}
.smai-sf-section > * {
  position: relative;
  z-index: 1;
}

.smai-sf-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.smai-sf-header {
  text-align: center;
  margin-bottom: 32px;
  max-width: 760px;
}
.smai-sf-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.smai-sf-heading-blue { color: var(--blue); }
.smai-sf-subtitle {
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
}

/* ── ONE merged card: tab strip at the top, content below, no gap. ── */
.smai-sf-card-outer {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(11,22,63,0.12);
  overflow: hidden;
}

.smai-sf-tabstrip {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(11,22,63,0.08);
}
.smai-sf-tabbtn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  padding: 16px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  transition: background 0.25s, color 0.25s;
}
.smai-sf-tabbtn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
}
.smai-sf-tabbtn-icon svg { width: 100%; height: 100%; }
.smai-sf-tabbtn.smai-sf-active {
  background: linear-gradient(145deg, #0351C2 0%, #01265C 100%);
  color: #fff;
}

.smai-sf-card {
  padding: clamp(24px, 3vw, 40px);
  display: none;
}
.smai-sf-card.smai-sf-active { display: block; }

.smai-sf-card-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.smai-sf-card-text {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.smai-sf-card-title {
  font-family: var(--font-h);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 16px;
}

.smai-sf-card-bullets {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.smai-sf-card-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
}
.smai-sf-bullet-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--blue);
}
.smai-sf-bullet-icon svg { width: 100%; height: 100%; }

/* Expected Output — full-width row below the text+media columns,
   with a rectangular gradient badge (same gradient as Book Demo
   buttons sitewide) and a document icon, matching the confirmed
   reference exactly — not a pill, not confined to the left column. */
.smai-sf-output {
  width: 100%;
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: #F4F8FF;
  border-radius: 10px;
}
.smai-sf-output-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(145deg, #0351C2 0%, #01265C 100%);
  color: #fff;
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  white-space: nowrap;
}
.smai-sf-output-badge-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.smai-sf-output-badge-icon svg { width: 100%; height: 100%; }
.smai-sf-output-text {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
}

.smai-sf-card-media {
  flex: 0 1 360px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smai-sf-card-media-inner {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smai-sf-card-media-inner video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .smai-sf-tabbtn { font-size: 11.5px; padding: 12px 10px; gap: 5px; }
  .smai-sf-card-layout { flex-direction: column; }
}
@media (max-width: 600px) {
  .smai-sf-tabstrip { flex-direction: column; }
  .smai-sf-tabbtn { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .smai-sf-heading { font-size: 24px; }
  .smai-hero-btn { padding: 14px 22px !important; font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════════
   TRUSTED-BY LOGO SECTION — copied exactly as-is from the
   homepage (assets/css/main.css), no renaming, no rework. Class
   names (.trusted, .logo-*) are identical to the homepage's own.
   ══════════════════════════════════════════════════════════════ */

    .trusted {
      background: #ffffff;
      padding: 96px 0;
      overflow: hidden;
      text-align: center;
    }
    @media (max-width: 1280px) { .trusted { padding: 80px 0; } }
    @media (max-width: 1024px) { .trusted { padding: 72px 0; } }
    @media (max-width: 768px)  { .trusted { padding: 64px 0; } }
    @media (max-width: 480px)  { .trusted { padding: 48px 0; } }

    .trusted-title {
      font-family: var(--font-h);
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--navy);
      line-height: 1.2;
      letter-spacing: -0.3px;
      text-align: center;
      max-width: 100%;
      margin: 0 auto 48px;
      padding: 0;
      white-space: normal;
    }
    .trusted-title .acc { color: var(--blue); font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

    /* Logo track wrapper — boxed with max width */
    .logo-track-wrap {
      display: flex;
      flex-direction: column;
      gap: 48px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      overflow: hidden;
    }

    /* Each row — overflow hidden, fade edges */
    .logo-row {
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }

    /* Marquee track */
    .logo-marquee {
      display: flex;
      align-items: center;
      width: max-content;
      animation: marquee-ltr 120s linear infinite;
    }
    .logo-marquee-reverse {
      animation: marquee-rtl 120s linear infinite;
    }

    @keyframes marquee-ltr {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes marquee-rtl {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* Individual logo item */
    .logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      flex-shrink: 0;
    }
    .logo-item img {
      height: 48px;
      width: auto;
      max-width: 140px;
      object-fit: contain;
      display: block;
      /* Grayscale on hover reveals color */
      filter: grayscale(20%);
      opacity: 0.85;
      transition: filter 0.2s, opacity 0.2s;
    }
    .logo-item img:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .logo-item img  { height: 40px; }
      .logo-item      { padding: 0 28px; }
    }
    @media (max-width: 768px) {
      .logo-item img  { height: 32px; }
      .logo-item      { padding: 0 20px; }
      .logo-track-wrap{ gap: 40px; }
    }
    @media (max-width: 480px) {
      .trusted-title  { font-size: 18px; line-height: 28px; margin-bottom: 28px; }
      .logo-item img  { height: 26px; }
      .logo-item      { padding: 0 14px; }
    }

    @media (max-width: 768px) {
      /* Show only 3 logos at a time — control item width */
      .logo-item {
        padding: 0 16px !important;
        flex: 0 0 calc(100vw / 3) !important;
        justify-content: center !important;
      }
      .logo-item img { height: 28px !important; width: auto !important; max-width: 80px !important; object-fit: contain !important; }
      .logo-track-wrap { gap: 28px !important; }
      /* Remove fade mask on mobile for cleaner look */
      .logo-row { -webkit-mask-image: none !important; mask-image: none !important; }
    }

    /* Trusted-by logo marquee wrapper — wide-screen growth */
    @media (min-width: 1800px) {
      .logo-track-wrap {
        max-width: clamp(1200px, 60vw, 1720px);
      }
    }

/* ══════════════════════════════════════════════════════════════
   FAQ SECTION — copied exactly as-is from Smart Change
   (assets/css/main.css), no renaming, no rework, same single
   -column list. Font-size/spacing that Smart Change drives through
   its own --smcm-*-size chain is wired directly to the sitewide
   --fs-h2/--fs-h3/--fs-body variables instead, to avoid re-
   inheriting that override tangle in a page that doesn't share the
   rest of Smart Change's CSS.
   ══════════════════════════════════════════════════════════════ */

.smcm-faq-section {
position: relative;
width: 100%;
overflow: hidden;
background: #ffffff;
padding: 92px 48px 104px;
}

.smcm-faq-section::before,
.smcm-faq-section::after {
content: '';
position: absolute;
width: min(480px, 42vw);
height: min(480px, 42vw);
border-radius: 50%;
pointer-events: none;
filter: blur(54px);
opacity: 0.72;
z-index: 0;
}

.smcm-faq-section::before {
left: -210px;
top: 180px;
background: radial-gradient(circle, rgba(128,184,255,0.52) 0%, rgba(178,214,255,0.28) 44%, rgba(255,255,255,0) 74%);
}

.smcm-faq-section::after {
right: -210px;
bottom: 70px;
background: radial-gradient(circle, rgba(128,184,255,0.52) 0%, rgba(178,214,255,0.28) 44%, rgba(255,255,255,0) 74%);
}

.smcm-faq-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1120px;
margin: 0 auto;
}
@media (min-width: 1800px) {
  .smcm-faq-inner { max-width: clamp(1120px, 66vw, 1600px); }
}

.smcm-faq-heading {
margin: 0 0 46px;
text-align: center;
font-family: var(--font-h);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.15;
letter-spacing: -1px;
color: var(--navy);
}

.smcm-faq-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.smcm-faq-item {
background: rgba(255,255,255,0.96);
border: 1px solid rgba(11,22,63,0.04);
border-radius: 18px;
overflow: hidden;
}

.smcm-faq-question {
width: 100%;
display: flex;
align-items: center;
gap: 18px;
padding: 22px 24px;
background: #ffffff;
color: var(--navy);
border: 0;
text-align: left;
cursor: pointer;
}

.smcm-faq-icon {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #2B8DFF 0%, #72B8FF 100%);
position: relative;
flex-shrink: 0;
}
.smcm-faq-icon::before,
.smcm-faq-icon::after {
content: '';
position: absolute;
background: #ffffff;
border-radius: 2px;
transition: transform 0.22s ease, opacity 0.22s ease;
}
.smcm-faq-icon::before {
width: 14px;
height: 2px;
}
.smcm-faq-icon::after {
width: 2px;
height: 14px;
}
.smcm-faq-item.smcm-faq-open .smcm-faq-icon::after {
opacity: 0;
transform: scaleY(0);
}

.smcm-faq-question-heading {
margin: 0;
padding: 0;
font-family: var(--font-h);
font-size: inherit;
font-weight: 600;
line-height: inherit;
}

.smcm-faq-question-text {
font-family: var(--font-h);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.35;
color: var(--navy);
}

.smcm-faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s ease;
background: #ffffff;
}
.smcm-faq-item.smcm-faq-open .smcm-faq-answer {
grid-template-rows: 1fr;
}
.smcm-faq-answer-inner {
overflow: hidden;
}
.smcm-faq-answer-copy {
margin: 0;
padding: 0 24px 22px 76px;
font-family: var(--font-b);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.75;
color: var(--muted);
}
.smcm-faq-answer-copy strong {
font-family: inherit;
font-weight: 700;
color: var(--navy);
}

@media (max-width: 480px) {
  .smcm-faq-heading { font-size: 26px; }
  .smcm-faq-question { padding: 16px 16px; gap: 12px; }
  .smcm-faq-answer-copy { padding-left: 44px; }
}



/* ══════════════════════════════════════════════════════════════
   FINAL CTA — "AI-Driven Compliance Ecosystem for the Global Food
   Industry". Rebuilt from scratch with simpler, more robust CSS:
   no aspect-ratio-dependent container sizing, no absolutely-
   positioned circles relying on a parent's computed height. The
   circles are now simple background-position decoration on the
   section itself, and the image sits in normal document flow so
   its own natural size always determines the layout — nothing
   collapses or misbehaves if the image is slow to load or fails.
   ══════════════════════════════════════════════════════════════ */

.smai-final-cta {
  position: relative;
  width: 100%;
  padding: 88px 48px 100px;
  background: linear-gradient(180deg, #EAF2FF 0%, #F7FAFE 55%, #FFFFFF 100%);
  text-align: center;
  overflow: hidden;
}

.smai-final-cta-decor {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, #BFDBFF 0%, #8FC0FF 100%);
  z-index: 0;
  pointer-events: none;
}
.smai-final-cta-decor--left {
  width: 220px;
  height: 220px;
  left: -60px;
  bottom: 40px;
}
.smai-final-cta-decor--right {
  width: 180px;
  height: 180px;
  right: -40px;
  top: 60px;
}

.smai-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.smai-final-cta-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  max-width: 780px;
  margin: 0 auto 16px;
}

.smai-final-cta-subtitle {
  font-family: var(--font-b);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 32px;
}

.smai-final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, #0351C2 0%, #01265C 100%);
  color: #fff;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 48px;
}

.smai-final-cta-laptop {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .smai-final-cta { padding: 64px 24px 72px; }
  .smai-final-cta-heading { font-size: 26px; }
  .smai-final-cta-subtitle { font-size: 13px; }
  .smai-final-cta-decor--left { width: 140px; height: 140px; }
  .smai-final-cta-decor--right { width: 110px; height: 110px; }
}

/* ══════════════════════════════════════════════════════════════
   SITE-WIDE SPACING STANDARDIZATION — Smart Change / Smart GPT
   ══════════════════════════════════════════════════════════════
   Per the site-wide font & spacing audit: .smcm-sf-section,
   .smai-sf-section, and .smcm-faq-section each had their own
   scattered, mutually-inconsistent padding values (accumulated
   across many earlier edits), none matching the sitewide 96/48px
   desktop -> 48/16px mobile standard used by every product and
   solution page (.pf-section, .swo-section, etc.).

   Rather than trace and edit the 6+ historical overrides for each
   selector individually (real risk of missing one in the existing
   tangle), this block is placed last in the file and uses
   !important so it deterministically wins regardless of source
   order elsewhere, applying the exact same tier values as the
   sitewide standard to all three shared/reused sections at once —
   which also resolves the Smart Change vs. Smart GPT padding
   mismatch on .smcm-faq-section, since both now get identical
   values from one place instead of depending on which page's
   .smcm-page-scoped rules happen to reach them.
   ══════════════════════════════════════════════════════════════ */
.smcm-page .smcm-sf-section,
.smcm-page .smcm-faq-section,
.smcm-sf-section,
.smai-sf-section,
.smcm-faq-section {
  padding: 96px 48px !important;
}
@media (max-width: 1280px) {
  .smcm-page .smcm-sf-section,
  .smcm-page .smcm-faq-section,
  .smcm-sf-section,
  .smai-sf-section,
  .smcm-faq-section {
    padding: 80px 40px !important;
  }
}
@media (max-width: 1024px) {
  .smcm-page .smcm-sf-section,
  .smcm-page .smcm-faq-section,
  .smcm-sf-section,
  .smai-sf-section,
  .smcm-faq-section {
    padding: 72px 32px !important;
  }
}
@media (max-width: 768px) {
  .smcm-page .smcm-sf-section,
  .smcm-page .smcm-faq-section,
  .smcm-sf-section,
  .smai-sf-section,
  .smcm-faq-section {
    padding: 64px 20px !important;
  }
}
@media (max-width: 480px) {
  .smcm-page .smcm-sf-section,
  .smcm-page .smcm-faq-section,
  .smcm-sf-section,
  .smai-sf-section,
  .smcm-faq-section {
    padding: 48px 16px !important;
  }
}

/* Grid/flex gap standardization — same audit finding: .smcm-sf-layout
   swung from 10px (mobile) to 115px (wide screens), far outside the
   product-page reference (.sf-layout: 28px -> 72px). Align both
   Smart Change and Smart GPT's internal layout gap to that same
   tiered scale. */
.smcm-page .smcm-sf-layout,
.smcm-sf-layout,
.smai-sf-card-layout {
  gap: 28px !important;
}
@media (min-width: 1025px) {
  .smcm-page .smcm-sf-layout,
  .smcm-sf-layout,
  .smai-sf-card-layout {
    gap: 40px !important;
  }
}
@media (min-width: 1441px) {
  .smcm-page .smcm-sf-layout,
  .smcm-sf-layout,
  .smai-sf-card-layout {
    gap: 56px !important;
  }
}
@media (min-width: 1921px) {
  .smcm-page .smcm-sf-layout,
  .smcm-sf-layout,
  .smai-sf-card-layout {
    gap: 72px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CAREERS PAGE (car-*) — Hero, Life at Smart Food Safe, Current
   Opportunities, Team testimonial carousel. Merged in from the
   section-by-section design-confirmation file. Reuses the sitewide
   --navy/--blue/--muted/--font-h/--font-b/--pill/--fs-h2/--fs-h3/--fs-body
   vars already defined at the top of this file — no re-declaration here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── HERO — mirrors the real .p-hero/.p-hc/.p-hl tier system exactly
   (see the tier comment below); renamed car-* to avoid collision. ── */
.car-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 48px 0;
  background: transparent;
  text-align: center;
}
.car-hc {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.car-hl {
  font-family: var(--font-h);
  font-size: 60px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -1.8px;
  margin-bottom: 32px;
}
.car-hl-accent { color: var(--blue); }

/* Tiers mirror the real .p-hl/.p-hc cascade exactly: discrete max-width
   steps in the same order (not overlapping min+max ranges), so
   letter-spacing tapers per-step, and .car-hc gets the 1281-1599px tier. */
@media (min-width: 1281px) {
  .car-hc { max-width: 1180px; }
}
@media (min-width: 1440px) {
  .car-hc { max-width: 1180px; }
  .car-hl { font-size: 60px; }
}
@media (max-width: 1280px) {
  .car-hc { max-width: 1060px; }
  .car-hl { font-size: 54px; letter-spacing: -1.6px; }
}
@media (max-width: 1024px) {
  .car-hc { max-width: 860px; }
  .car-hl { font-size: 44px; letter-spacing: -1.2px; }
}
@media (max-width: 768px) {
  .car-hl { font-size: 34px; letter-spacing: -0.8px; }
}
@media (max-width: 480px) {
  .car-hl { font-size: 28px; letter-spacing: -0.5px; }
}
@media (max-width: 360px) {
  .car-hl { font-size: 24px; letter-spacing: -0.3px; }
}
@media (min-width: 1600px) {
  .car-hc { max-width: 1370px; }
  .car-hl { font-size: 70px; }
}
@media (min-width: 1800px) {
  .car-hc { max-width: 1530px; }
  .car-hl { font-size: 78px; }
}
@media (min-width: 2100px) {
  .car-hc { max-width: 1770px; }
  .car-hl { font-size: 90px; }
}
@media (min-width: 2400px) {
  .car-hc { max-width: 1895px; }
  .car-hl { font-size: 96px; }
}
@media (min-width: 2700px) {
  .car-hc { max-width: 2170px; }
  .car-hl { font-size: 110px; }
}
@media (min-width: 3000px) {
  .car-hc { max-width: 2405px; }
  .car-hl { font-size: 122px; }
}
@media (min-width: 3300px) {
  .car-hc { max-width: 2715px; }
  .car-hl { font-size: 140px; }
}

/* ── Photo collage — single pre-composed graphic (no CSS-layered
   decorative vectors; those are baked into the image asset itself). ── */
.car-collage-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
}
.car-collage-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
@media (max-width: 768px) {
  .car-collage-wrap { max-width: 100%; padding: 0 12px; }
}

/* ── "LIFE AT SMART FOOD SAFE" — inset gradient card, two-column
   layout: heading+copy left, 2x2 perks grid right. ── */
.car-life-section {
  width: 100%;
  padding: 64px 48px 96px;
  display: flex;
  justify-content: center;
}
.car-life-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 56px 48px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  box-shadow: 0 20px 60px rgba(11,22,63,0.06);
}
.car-life-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  align-items: center;
}
.car-life-text { flex: 1 1 420px; min-width: 0; }
.car-life-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}
.car-life-heading-line1 { color: var(--navy); display: block; }
.car-life-heading-line2 { color: var(--blue); display: block; }
.car-life-copy {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
.car-life-copy:last-child { margin-bottom: 0; }

.car-perks-grid {
  flex: 1 1 340px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.car-perk-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(11,22,63,0.05);
}
.car-perk-icon { width: 48px; height: 48px; flex-shrink: 0; }
.car-perk-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.car-perk-label {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .car-life-inner { flex-direction: column; gap: 40px; }
  .car-life-text, .car-perks-grid { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 600px) {
  .car-life-section { padding: 40px 16px 64px; }
  .car-life-card { padding: 40px 24px; border-radius: 24px; }
  .car-perks-grid { gap: 14px; }
  .car-perk-card { padding: 18px 14px; }
}
@media (max-width: 480px) {
  .car-life-heading { font-size: 26px; }
}

/* ── "CURRENT OPPORTUNITIES" — job listing cards. Content comes from
   sfs_render_career_openings() (inc/media-helpers.php), sourced from
   the "Career Openings" admin screen. ── */
.car-jobs-section {
  width: 100%;
  padding: 0 48px 96px;
  display: flex;
  justify-content: center;
}
.car-jobs-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  text-align: center;
  color: var(--navy);
  margin: 0 0 40px;
}
.car-jobs-heading-accent { color: var(--blue); }
.car-jobs-card {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 40px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  box-shadow: 0 20px 60px rgba(11,22,63,0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.car-job-row {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 4px 16px rgba(11,22,63,0.05);
}
.car-job-row__main { min-width: 0; }
.car-job-row__title {
  font-family: var(--font-h);
  font-size: 17px !important;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.car-job-row__location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.car-job-row__pin {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #E7F0FE;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.car-job-row__pin svg { width: 14px; height: 14px; }
.car-job-row__apply {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(145deg, #4E8CF0 0%, #2B6BE6 100%);
  color: #fff;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: var(--pill);
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .car-jobs-section { padding: 0 16px 64px; }
  .car-jobs-card { padding: 24px; border-radius: 24px; gap: 12px; }
  .car-job-row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 20px; }
  .car-job-row__apply { align-self: stretch; justify-content: center; }
}

/* ── "HEAR FROM OUR SMARTFOODSAFE TEAM" — testimonial carousel.
   Content comes from sfs_render_team_carousel($lang) (inc/media-helpers.php),
   sourced from the "Team Members" admin screen; testimonial text is
   the only per-language field, name/photo/position are shared. ── */
.car-team-section {
  width: 100%;
  padding: 0 48px 96px;
  display: flex;
  justify-content: center;
}
.car-team-inner { width: 100%; max-width: 1200px; }
.car-team-head { text-align: center; margin-bottom: 40px; }
.car-team-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
.car-team-heading-accent { color: var(--blue); }
.car-team-sub {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  color: var(--muted);
  margin: 0;
}
.car-team-card {
  position: relative;
  border-radius: 32px;
  padding: 48px 40px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  box-shadow: 0 20px 60px rgba(11,22,63,0.06);
}
.car-team-nav {
  position: absolute;
  top: 28px;
  right: 32px;
  display: flex;
  gap: 10px;
  z-index: 2;
}
.car-team-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(11,22,63,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.car-team-nav-btn svg { width: 18px; height: 18px; }
.car-team-nav-btn:hover { background: var(--blue); color: #fff; }
.car-team-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.car-team-slot {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11,22,63,0.06);
  display: flex;
  flex-direction: column;
  transition: opacity 0.25s ease;
}
.car-team-slot--side {
  flex: 0 1 260px;
  padding: 20px;
  align-items: center;
  text-align: center;
  opacity: 0.6;
}
.car-team-slot--side .car-team-photo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  filter: grayscale(1);
  margin-bottom: 12px;
  background: #E7EDF6;
}
.car-team-slot--side .car-team-name {
  font-family: var(--font-h);
  font-size: 15px !important;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 10px;
}
.car-team-slot--center { flex: 0 1 460px; padding: 28px; }
.car-team-center-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.car-team-slot--center .car-team-photo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: #E7EDF6;
}
.car-team-slot--center .car-team-name {
  font-family: var(--font-h);
  font-size: 19px !important;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.car-team-badge {
  display: inline-block;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(145deg, #4E8CF0 0%, #2B6BE6 100%);
  padding: 5px 14px;
  border-radius: var(--pill);
}
.car-team-slot--side .car-team-badge { background: #DCE8FB; color: var(--muted); }
.car-team-quote {
  font-family: var(--font-b);
  font-size: 14px !important;
  line-height: 1.7;
  color: rgba(11,22,63,0.75);
  margin: 0;
}
@media (max-width: 900px) {
  .car-team-slot--side { display: none; }
  .car-team-track { justify-content: center; }
  .car-team-slot--center { flex: 1 1 100%; max-width: 480px; }
}
@media (max-width: 600px) {
  .car-team-card { padding: 64px 20px 32px; border-radius: 24px; }
  .car-team-nav { top: 20px; right: 20px; }
}


/* ══════════════════════════════════════════════════════════════════════
   ABOUT US PAGE (abt-*) — Hero, CTA banner, Mission + stats, Overview
   scroll-stack, Team grid, Associations, Technology/Industry + reused
   testimonial carousel. Merged in from the section-by-section
   design-confirmation file. Reuses the sitewide --navy/--blue/--muted/
   --font-h/--font-b/--pill/--fs-h2/--fs-h3/--fs-body vars and the real
   .tcarousel/.tcard/.tdot testimonial classes already defined above —
   no re-declaration of either here.
   ══════════════════════════════════════════════════════════════════════ */
.abt-hero {
  position: relative;
  width: 100%;
  padding: 64px 48px 80px;
  background-image: url('https://smartaudits.online/wp-content/uploads/2026/08/background.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abt-hc {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.abt-hl {
  font-family: var(--font-h);
  font-size: 60px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -1.8px;
  margin-bottom: 40px;
}
.abt-hl-accent { color: var(--blue); }

/* Tiers mirror the real .p-hl/.p-hc cascade exactly (same values used
   for the Careers H1) — discrete max-width steps in cascade order. */
@media (min-width: 1281px) {
  .abt-hc { max-width: 1180px; }
}
@media (min-width: 1440px) {
  .abt-hc { max-width: 1180px; }
  .abt-hl { font-size: 60px; }
}
@media (max-width: 1280px) {
  .abt-hc { max-width: 1060px; }
  .abt-hl { font-size: 54px; letter-spacing: -1.6px; }
}
@media (max-width: 1024px) {
  .abt-hc { max-width: 860px; }
  .abt-hl { font-size: 44px; letter-spacing: -1.2px; }
}
@media (max-width: 768px) {
  .abt-hl { font-size: 34px; letter-spacing: -0.8px; }
}
@media (max-width: 480px) {
  .abt-hl { font-size: 28px; letter-spacing: -0.5px; }
}
@media (max-width: 360px) {
  .abt-hl { font-size: 24px; letter-spacing: -0.3px; }
}
@media (min-width: 1600px) {
  .abt-hc { max-width: 1370px; }
  .abt-hl { font-size: 70px; }
}
@media (min-width: 1800px) {
  .abt-hc { max-width: 1530px; }
  .abt-hl { font-size: 78px; }
}
@media (min-width: 2100px) {
  .abt-hc { max-width: 1770px; }
  .abt-hl { font-size: 90px; }
}
@media (min-width: 2400px) {
  .abt-hc { max-width: 1895px; }
  .abt-hl { font-size: 96px; }
}
@media (min-width: 2700px) {
  .abt-hc { max-width: 2170px; }
  .abt-hl { font-size: 110px; }
}
@media (min-width: 3000px) {
  .abt-hc { max-width: 2405px; }
  .abt-hl { font-size: 122px; }
}
@media (min-width: 3300px) {
  .abt-hc { max-width: 2715px; }
  .abt-hl { font-size: 140px; }
}

/* ── Inset card — same gradient recipe used on the Careers page's
   cards (Life-at / Jobs / Team), so cards read as one consistent
   sitewide component rather than a one-off. ── */
.abt-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 56px 48px;
  background: linear-gradient(
    135deg,
    #C6DCF5  0%,
    #DFECF9 30%,
    #F2F7FD 60%,
    #FFFFFF 100%
  );
  box-shadow: 0 20px 60px rgba(11,22,63,0.06);
}
.abt-card-inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}
.abt-text {
  flex: 1 1 380px;
  min-width: 0;
}
.abt-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 20px;
}
.abt-copy {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.abt-image-col {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.abt-image-col img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .abt-card-inner { flex-direction: column-reverse; gap: 32px; }
  .abt-text, .abt-image-col { flex: 1 1 100%; width: 100%; }
  .abt-text { text-align: left; }
}
@media (max-width: 600px) {
  .abt-hero { padding: 40px 20px 56px; }
  .abt-card { padding: 32px 24px; border-radius: 24px; }
  .abt-heading { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL — same system already live in the theme's real
   main.css (.reveal / .reveal-hero / .reveal-sub / .reveal-card),
   copied here only so this standalone file previews the same
   motion the real page will have once merged.
   ══════════════════════════════════════════════════════════════ */
.reveal, .reveal-hero, .reveal-sub, .reveal-card {
  opacity: 0;
  will-change: opacity, filter, transform;
}
.reveal { filter: blur(14px); transform: translateY(28px); transition: opacity 1.5s cubic-bezier(0.16,1,0.3,1), filter 1.5s cubic-bezier(0.16,1,0.3,1), transform 1.5s cubic-bezier(0.16,1,0.3,1); }
.reveal-hero { filter: blur(18px); transform: translateY(36px); transition: opacity 1.8s cubic-bezier(0.16,1,0.3,1), filter 1.8s cubic-bezier(0.16,1,0.3,1), transform 1.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-sub { filter: blur(8px); transform: translateY(16px); transition: opacity 1.3s cubic-bezier(0.16,1,0.3,1), filter 1.3s cubic-bezier(0.16,1,0.3,1), transform 1.3s cubic-bezier(0.16,1,0.3,1); }
.reveal-card { filter: blur(10px); transform: translateY(24px) scale(0.98); transition: opacity 1.25s cubic-bezier(0.16,1,0.3,1), filter 1.25s cubic-bezier(0.16,1,0.3,1), transform 1.25s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible, .reveal-hero.is-visible, .reveal-sub.is-visible, .reveal-card.is-visible {
  opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-hero, .reveal-sub, .reveal-card { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   "MISSION TO CHANGE..." — statement heading + supporting copy +
   4-up stats grid. Cards alternate a strong/light blue gradient
   (odd cards use the same gradient recipe already used for icon
   tiles elsewhere in the theme; even cards use a paler version of
   the same family, not an unrelated new color).
   ══════════════════════════════════════════════════════════════ */
.abt-mission-section {
  width: 100%;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.abt-stats-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.abt-mission-inner {
  width: 100%;
  max-width: 980px;
  text-align: center;
}
.abt-mission-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 24px;
}
.abt-mission-heading .accent { color: var(--blue); }
.abt-mission-copy {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto 56px;
}

.abt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.abt-stat-card {
  border-radius: 20px;
  padding: 28px 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.abt-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(43,107,230,0.12);
}
/* Wide-screen growth, matching the real .stats-grid system exactly
   (same clamp values used on the homepage's "Put your food safety
   management in autopilot" section) — without this, the grid stays
   capped at 1100px forever past 1280px viewport width. */
@media (min-width: 1281px) {
  .abt-stats-grid { max-width: clamp(1100px, 56vw, 1560px); }
}
@media (min-width: 2200px) {
  .abt-stats-grid { max-width: 1660px; }
}
.abt-stat-card--strong {
  background: linear-gradient(135deg, #4E8CF0 0%, #2B6BE6 100%);
}
.abt-stat-card--light {
  background: linear-gradient(135deg, #E4EEFC 0%, #F2F7FD 100%);
}
.abt-stat-number {
  font-family: var(--font-h);
  font-size: 64px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -2px;
}
.abt-stat-label {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 900px) {
  .abt-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1280px) {
  .abt-mission-section { padding: 80px 40px; }
}
@media (max-width: 1024px) {
  .abt-mission-section { padding: 72px 32px; }
}
@media (max-width: 768px) {
  .abt-mission-section { padding: 64px 20px; }
  .abt-mission-copy { margin-bottom: 32px; }
  .abt-stats-grid { gap: 14px; }
  .abt-stat-card { padding: 24px 18px; }
  .abt-stat-number { font-size: 40px; letter-spacing: -1px; }
}
@media (max-width: 420px) {
  .abt-stats-grid { grid-template-columns: 1fr 1fr; }
}
.abt-mission-break { display: none; }
@media (min-width: 700px) {
  .abt-mission-break { display: inline; }
}

/* ══════════════════════════════════════════════════════════════
   CTA BANNER — full-width solid blue bar, text left / pill button
   right, between Hero and Mission. Links to the Careers page.
   ══════════════════════════════════════════════════════════════ */
.abt-cta-bar {
  width: 100%;
  background: var(--blue);
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.abt-cta-text {
  font-family: var(--font-b);
  font-size: 16px !important;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
}
.abt-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  color: var(--blue);
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: var(--pill);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .abt-cta-bar { padding: 20px 24px; justify-content: center; text-align: center; }
  .abt-cta-text { text-align: center; width: 100%; }
  .abt-cta-btn { margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════════
   "SMARTFOODSAFE OVERVIEW" — 4 cards that stack in one-by-one as
   the visitor scrolls, using the theme's existing scroll-reveal
   system (data-reveal-group auto-staggers .reveal-card children —
   same mechanism already used for the perks grid / job rows / stat
   cards, no new JS timer needed). Each card uses the real
   About-us-Card.svg graphic as its background — per instruction,
   the card shell/flags/stack-lines are NOT hand-built in CSS, they
   are baked into that image. Cards are offset so the ones revealed
   later sit visually on top, building a real stack as you scroll.
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   "SMARTFOODSAFE OVERVIEW" — 4 cards that stack in one-by-one as
   the visitor scrolls. This is DELIBERATELY its own separate
   mechanism, not the page's reveal-once-on-enter system used
   everywhere else (perks grid / job rows / stat cards): the stack
   is pinned (position:sticky) inside a tall scroll "track", and a
   dedicated scroll listener (see the script below) maps how far
   the visitor has scrolled through that track directly to how many
   cards are shown — card 1 is visible at rest, and each further
   card arrives as they scroll further into the track. It's
   bidirectional: scrolling back up hides later cards again, unlike
   the reveal-once behavior used elsewhere on this page.
   ══════════════════════════════════════════════════════════════ */
.abt-overview-section {
  width: 100%;
  padding: 96px 48px 0;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
}

/* Tall scroll track — its height determines how much scrolling it
   takes to cycle through all 4 cards. 90vh per card feels like a
   deliberate "scroll a bit to get the next one" pace without
   dragging on too long. */
.abt-stack-track {
  position: relative;
  width: 100%;
  height: 360vh;
}
/* The sticky block now holds ALL THREE elements — heading, subtitle,
   AND the card stack — so they pin and move together, filling the
   full viewport height while pinned. */
.abt-stack-sticky {
  position: sticky;
  top: 104px;
  height: calc(100vh - 104px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 48px;
}
.abt-overview-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin: 0 0 14px;
}
.abt-overview-heading .accent { color: var(--blue); }
.abt-overview-sub {
  font-family: var(--font-b);
  font-size: 14px !important;
  font-weight: 500;
  color: var(--navy);
  text-align: center;
  opacity: 0.8;
  margin: 0 0 64px;
}

/* Fluid width — scales with the viewport instead of snapping to a
   fixed max-width, per instruction ("width should dynamically
   adjust"). Capped at 1100px so it doesn't get absurdly wide on
   ultra-wide monitors. */
.abt-stack-scroll {
  position: relative;
  width: min(94vw, 1240px);
  height: 400px;
}
/* Wide-screen growth tiers — mirrors the same idea as the H1's
   min-width growth tiers elsewhere on this page: without these, the
   card stays capped at 1100px/340px forever past 1280px viewport
   width, so on very wide monitors (2000px+) it looks small and lost
   in a sea of empty side padding instead of using the extra room. */
@media (min-width: 1600px) {
  .abt-stack-scroll { width: min(82vw, 1460px); height: 440px; }
  .abt-stack-item:nth-child(1) { top: -42px; }
  .abt-stack-item:nth-child(2) { top: -28px; }
  .abt-stack-item:nth-child(3) { top: -14px; }
}
@media (min-width: 1900px) {
  .abt-stack-scroll { width: min(78vw, 1680px); height: 480px; }
  .abt-stack-item:nth-child(1) { top: -48px; }
  .abt-stack-item:nth-child(2) { top: -32px; }
  .abt-stack-item:nth-child(3) { top: -16px; }
}
@media (min-width: 2200px) {
  .abt-stack-scroll { width: min(74vw, 1860px); height: 520px; }
  .abt-stack-item:nth-child(1) { top: -54px; }
  .abt-stack-item:nth-child(2) { top: -36px; }
  .abt-stack-item:nth-child(3) { top: -18px; }
  .abt-overview-sub { margin-bottom: 80px; }
}
@media (min-width: 2600px) {
  .abt-stack-scroll { width: min(70vw, 2020px); height: 560px; }
  .abt-stack-item:nth-child(1) { top: -60px; }
  .abt-stack-item:nth-child(2) { top: -40px; }
  .abt-stack-item:nth-child(3) { top: -20px; }
  .abt-overview-sub { margin-bottom: 88px; }
}
/* ALL FOUR cards now use the exact same inset:0 sizing — this is
   deliberate: the earlier version had the last (front) card sized
   via normal document flow while the other three were absolutely
   positioned, and those two different sizing mechanisms produced a
   subtle width mismatch (the front card rendering smaller than the
   others). Giving every card the identical position:absolute;
   inset:0 base, with only `top` nudged for the stack offset,
   guarantees they're all exactly the same size. */
.abt-stack-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.abt-stack-item:nth-child(1) { top: -36px; z-index: 1; }
.abt-stack-item:nth-child(2) { top: -24px; z-index: 2; }
.abt-stack-item:nth-child(3) { top: -12px; z-index: 3; }
.abt-stack-item:nth-child(4) { top: 0;     z-index: 4; }

/* Cards start hidden (except card 1, put into view immediately by
   the script running once on load) and fade/rise in as their stage
   is reached — a plain opacity/transform transition, independent of
   the .reveal/.reveal-card classes used on the rest of the page. */
.abt-stack-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.abt-stack-item.is-stage-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Fixed height per breakpoint (not derived from the image's own wide
   aspect ratio) — that ratio makes the card very short at narrow
   widths, leaving no room for title+paragraph and causing text to
   overflow the card's own bounds. The image fills this box via
   object-fit:cover; overflow:hidden on the same box is a hard safety
   net so text can never escape past this card's edges. */
.abt-stack-item-inner {
  position: relative;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  border: 1px solid #FFFFFF;
}
.abt-stack-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.abt-stack-overlay {
  position: absolute;
  inset: 10% 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.abt-stack-title {
  font-family: var(--font-h);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 18px;
}
.abt-stack-text {
  font-family: var(--font-b);
  font-size: 17px !important;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  max-width: 700px;
}

@media (max-width: 900px) {
  .abt-stack-scroll { height: 360px; }
}
@media (max-width: 700px) {
  .abt-stack-item:nth-child(1) { top: -24px; }
  .abt-stack-item:nth-child(2) { top: -16px; }
  .abt-stack-item:nth-child(3) { top: -8px; }
  .abt-stack-title { font-size: 22px; margin-bottom: 14px; }
  .abt-stack-text { font-size: 14px !important; line-height: 1.6; }
  .abt-stack-scroll { height: 320px; width: 94vw; }
  .abt-stack-track { height: 320vh; }
  .abt-stack-sticky { padding: 24px 24px; }
}
@media (max-width: 480px) {
  .abt-overview-sub { margin-bottom: 44px; }
  .abt-stack-scroll { height: 360px; }
  .abt-stack-overlay { inset: 8% 6%; }
}

/* ══════════════════════════════════════════════════════════════
   "MEET OUR SMARTFOODSAFE TEAM" — dome-photo team grid, paginated
   4-at-a-time with prev/next. Data comes from the SAME shared "Team
   Members" admin list built for the Careers testimonial carousel
   (sfs_get_team_members()) — this section just uses different
   fields from each entry (name, photo, position, linkedin) and a
   different layout, per instruction. No new admin screen needed.
   ══════════════════════════════════════════════════════════════ */
.abt-team-section {
  width: 100%;
  padding: 96px 48px;
  display: flex;
  justify-content: center;
}
.abt-team-inner { width: 100%; max-width: 1200px; }
.abt-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 56px;
}
.abt-team-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.abt-team-heading .accent { color: var(--blue); }
.abt-team-nav { display: flex; gap: 10px; flex-shrink: 0; }
.abt-team-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #DCE8FB;
  background: #ffffff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.abt-team-nav-btn svg { width: 16px; height: 16px; }
.abt-team-nav-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.abt-team-page {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.abt-team-page.active { display: grid; }
.abt-team-tile { min-width: 0; }
/* The "dome" — a rounded-top arch shape (large border-radius on the
   top two corners only, square bottom), per instruction. Background
   is a subtle blue tint so the photo reads as sitting inside a
   soft-lit dome rather than a plain rectangle crop. */
.abt-team-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 140px 140px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #DCE8FB 0%, #F2F7FD 100%);
  margin-bottom: 16px;
}
.abt-team-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.abt-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #E7EDF6;
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.abt-team-name {
  font-family: var(--font-h);
  font-size: 15px !important;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.abt-team-linkedin { flex-shrink: 0; display: flex; align-items: center; }
.abt-team-linkedin img { width: 16px; height: 16px; display: block; }
.abt-team-position {
  font-family: var(--font-b);
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .abt-team-page.active { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 700px) {
  .abt-team-section { padding: 64px 20px; }
  .abt-team-head { margin-bottom: 32px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .abt-team-nav { align-self: flex-end; }
}
@media (max-width: 480px) {
  .abt-team-page.active { grid-template-columns: 1fr 1fr; gap: 16px; }
  .abt-team-photo-wrap { border-radius: 90px 90px 0 0; }
}
/* ══════════════════════════════════════════════════════════════
   "ASSOCIATIONS WE VALUE" — heading/sub + a gradient card holding a
   4-up logo grid. Gradient applied both at the section level (per
   instruction — top-left to bottom-right, same sitewide recipe used
   throughout this page) and on the card itself, matching the
   pattern already used for the Overview section.
   ══════════════════════════════════════════════════════════════ */
.abt-assoc-section {
  width: 100%;
  padding: 96px 48px;
  display: flex;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
}
.abt-assoc-inner { width: 100%; max-width: 1200px; }
.abt-assoc-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
}
.abt-assoc-heading .accent { color: var(--blue); }
.abt-assoc-sub {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.85;
  margin: 0 0 56px;
}
.abt-assoc-card {
  width: 100%;
  border-radius: 32px;
  padding: 56px 48px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  border: 1px solid #FFFFFF;
  box-shadow: 0 20px 60px rgba(11,22,63,0.06);
}
.abt-assoc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
.abt-assoc-tile {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 300 / 113;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}
.abt-assoc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .abt-assoc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .abt-assoc-section { padding: 64px 20px; }
  .abt-assoc-sub { margin-bottom: 32px; }
  .abt-assoc-card { padding: 32px 24px; border-radius: 24px; }
  .abt-assoc-grid { gap: 16px; }
}
/* ══════════════════════════════════════════════════════════════
   TESTIMONIAL + "TECHNOLOGY WE USE" / "INDUSTRY WE SERVE" — left
   side reuses the theme's REAL sitewide testimonial carousel
   classes verbatim (.tcarousel/.tcard/.tcard-quote/.tcard-text/
   .tcard-author/.tcard-logo/.tcard-name/.tcard-role/.tcarousel-dots/
   .tdot — copied here only so this standalone file previews
   correctly; these already exist in the real main.css and the
   auto-advance/dot logic already exists in main.js, so nothing new
   needs to be added there at merge time, just the markup below).
   Data is the SAME shared client-testimonial admin list used
   elsewhere (inc/admin-testimonials.php), not the Team Members list.
   ══════════════════════════════════════════════════════════════ */
.abt-tech-section {
  position: relative;
  width: 100%;
  padding: 96px 48px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
/* Real sitewide corner-gradient pattern, copied exactly from
   .contact-card::before/::after — this is NOT a diagonal linear
   sweep; it's two small, subtle radial glows anchored at each
   corner, fading to transparent well before the middle. A full
   linear-gradient across the whole section (my earlier attempt)
   reads as a much stronger, more spread-out wash than this — which
   is what "reduce the top-left spread" was pointing at. */
.abt-tech-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 0% 0%, rgba(43,107,230,0.14) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.abt-tech-section::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 100% 100%, rgba(43,107,230,0.11) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.abt-tech-card { position: relative; z-index: 1; }
.abt-tech-card {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 48px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  border: 1px solid #FFFFFF;
  box-shadow: 0 20px 60px rgba(11,22,63,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: stretch;
}
.abt-tech-left { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.abt-tech-right { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.abt-tech-subcard {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 36px;
  text-align: center;
}
.abt-tech-subcard h3 {
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.abt-tech-subcard p {
  font-family: var(--font-b);
  font-size: 12px !important;
  color: var(--muted);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px;
}
.abt-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.abt-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: none;
  outline: none;
}
.abt-icon-tile img {
  width: 44px;
  height: 44px;
  display: block;
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
}
.abt-icon-label {
  font-family: var(--font-h);
  font-size: 10px !important;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

/* ── Real sitewide testimonial carousel classes, copied verbatim ── */
@media (max-width: 1024px) {
  .abt-icon-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
  .abt-tech-section { padding: 64px 20px; }
  .abt-tech-card { padding: 32px 24px; border-radius: 24px; }
  .abt-tech-subcard { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .abt-icon-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES (lg-*) — shared template for Terms of Use, Privacy Policy,
   and Data Protection Addendum: hero title band, intro text section,
   sticky scroll-spy Contents sidebar, and numbered content sections.
   All three legal page types reuse this exact same CSS (only the
   PHP template content differs), so it is defined here once. Reuses
   the sitewide --navy/--blue/--muted/--font-h/--font-b vars already
   defined above — no re-declaration of root vars or the html/body
   reset here (scroll-behavior:smooth already set sitewide too).
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   LEGAL PAGE — title/intro/date block, then a two-column layout:
   sticky Contents sidebar (left) + main content (right). Matches
   the shared reference design so future legal pages (Privacy
   Policy, Cookie Policy, etc.) can reuse this same structure.
   ══════════════════════════════════════════════════════════════ */
.lg-hero-band {
  width: 100%;
  padding: 72px 48px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  text-align: center;
}
.lg-title {
  font-family: var(--font-h);
  font-size: 44px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -1px;
}

.lg-intro-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px 0;
}
.lg-intro {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.8;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.lg-intro a { color: var(--blue); }
.lg-updated {
  font-family: var(--font-b);
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
  margin-bottom: 40px;
}

.lg-body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px 96px;
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

/* ── Sticky TOC sidebar ── */
.lg-toc-wrap {
  flex: 0 0 260px;
  position: sticky;
  top: 32px;
}
.lg-toc-title {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.lg-toc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.lg-toc li { display: block; }
.lg-toc-link {
  display: block;
  font-family: var(--font-b);
  font-size: 13px !important;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: var(--pill);
  transition: background 0.15s, color 0.15s;
}
.lg-toc-link:hover { color: var(--navy); }
.lg-toc-link.active {
  background: var(--blue);
  color: #fff;
}

/* ── Main content ── */
.lg-content {
  flex: 1;
  min-width: 0;
}
.lg-section {
  margin-bottom: 40px;
  scroll-margin-top: 32px;
}
.lg-section-title {
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.lg-section-subtitle {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--navy);
  margin: 20px 0 8px;
}
.lg-section p {
  font-family: var(--font-b);
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(11,22,63,0.82);
  margin-bottom: 14px;
}
.lg-section p:last-child { margin-bottom: 0; }
.lg-section ul {
  margin: 0 0 14px 20px;
  padding: 0;
}
.lg-section li {
  font-family: var(--font-b);
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(11,22,63,0.82);
  margin-bottom: 8px;
}
.lg-section a { color: var(--blue); word-break: break-word; }
.lg-section strong { color: var(--navy); font-weight: 700; }

/* ── Data-category callout: a bold mini-label + description, used
   throughout "How We Collect Data About You" ── */
.lg-callout {
  border-left: 3px solid #DCE8FB;
  padding: 4px 0 4px 16px;
  margin: 0 0 16px;
}
.lg-callout-label {
  font-family: var(--font-h);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.lg-callout p {
  margin-bottom: 0;
}

/* ── Data table, used for the IT Rules 2011 rights table ── */
.lg-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 20px;
}
.lg-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
@media (max-width: 700px) {
  .lg-section table { min-width: 560px; }
}
.lg-section table th,
.lg-section table td {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #E7EDF6;
  font-family: var(--font-b);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(11,22,63,0.82);
  vertical-align: top;
}
.lg-section table th {
  font-family: var(--font-h);
  font-weight: 700;
  color: var(--navy);
  background: #F2F7FD;
}
.lg-section table td strong { color: var(--navy); }

@media (max-width: 900px) {
  .lg-body { flex-direction: column; gap: 32px; }
  .lg-toc-wrap {
    position: static;
    flex: 1 1 100%;
    width: 100%;
  }
  .lg-content {
    width: 100%;
    max-width: 100%;
  }
  .lg-toc {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
    gap: 6px;
  }
  .lg-toc-link { padding: 7px 12px; font-size: 12px; }
}
@media (max-width: 600px) {
  .lg-hero-band { padding: 48px 20px; }
  .lg-title { font-size: 30px; }
  .lg-intro-section { padding: 40px 20px 0; }
  .lg-body { padding: 0 20px 64px; }
}


/* ══════════════════════════════════════════════════════════════════════
   BLOG ARCHIVE (blog-*) — hero (featured + 2 highlight cards + search)
   and the 10-per-page post grid + pagination. Shared by all four
   language archive templates (page-sfs-blog.php / -es / -fr / -pt).
   Thumbnails use a 2:1 aspect ratio (not 16:9/16:10/4:3) — wide
   banner-style post images were getting cropped, losing title text,
   at the narrower ratios. Reuses the sitewide --navy/--blue/--muted/
   --font-h/--font-b vars already defined above.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   BLOG ARCHIVE HERO — featured post card (left) + search bar and
   two highlighted post cards (right). All three cards are curated
   via an admin "Blog Archive Settings" screen (post-picker
   dropdowns), not manually entered — content itself lives in real
   WordPress posts.
   ══════════════════════════════════════════════════════════════ */
.blog-hero-section {
  width: 100%;
  padding: 64px 48px;
  display: flex;
  justify-content: center;
}
.blog-hero-inner {
  width: 100%;
  max-width: 1400px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ── Featured post card (left) ── */
.blog-featured-card {
  flex: 1 1 55%;
  min-width: 0;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(11,22,63,0.08);
}
.blog-featured-img-wrap {
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #0B163F 0%, #16224F 100%);
}
.blog-featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-featured-date {
  font-family: var(--font-b);
  font-size: 12px !important;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.blog-featured-title {
  font-family: var(--font-h);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 20px;
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-h);
  font-size: 14px !important;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--blue);
  border: none;
  border-radius: var(--pill);
  padding: 12px 10px 12px 22px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.blog-read-more:hover { background: #1f56c4; }
.blog-read-more .arrow-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-read-more svg { width: 14px; height: 14px; }

/* ── Right column: search + 2 highlighted cards ── */
.blog-hero-right {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.blog-search-form {
  width: 100%;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: var(--pill);
  padding: 6px 6px 6px 24px;
  box-shadow: 0 10px 30px rgba(11,22,63,0.06);
}
.blog-search-form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--navy);
  background: transparent;
}
.blog-search-form input::placeholder { color: var(--muted); }
.blog-search-submit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.blog-search-submit svg { width: 16px; height: 16px; stroke: #fff; }

.blog-highlight-card {
  display: flex;
  gap: 16px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(11,22,63,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.blog-highlight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(11,22,63,0.1);
}
.blog-highlight-img-wrap {
  flex: 0 0 170px;
  aspect-ratio: 2 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0B163F 0%, #16224F 100%);
}
.blog-highlight-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-highlight-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blog-highlight-date {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-b);
  font-size: 11px !important;
  font-weight: 600;
  color: var(--navy);
  background: #EAF1FC;
  border-radius: var(--pill);
  padding: 4px 12px;
  margin-bottom: 10px;
}
.blog-highlight-title {
  font-family: var(--font-h);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .blog-hero-inner { flex-direction: column; }
  .blog-featured-card, .blog-hero-right { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 600px) {
  .blog-hero-section { padding: 40px 20px; }
  .blog-featured-title { font-size: 21px; }
  .blog-highlight-card { flex-direction: column; }
  .blog-highlight-img-wrap { flex: none; width: 100%; aspect-ratio: 2/1; }
}

/* ══════════════════════════════════════════════════════════════
   BLOG ARCHIVE GRID — the "10 posts per page" list, driven by a
   real WP_Query( ['posts_per_page' => 10] ) filtered by the current
   language taxonomy term. Pagination below uses that same query's
   real page count, not a hardcoded number.
   ══════════════════════════════════════════════════════════════ */
.blog-grid-section {
  width: 100%;
  padding: 16px 48px 64px;
  display: flex;
  justify-content: center;
}
.blog-grid-inner { width: 100%; max-width: 1400px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.blog-card {
  display: block;
  text-decoration: none;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11,22,63,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(11,22,63,0.1);
}
.blog-card-img-wrap {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: linear-gradient(135deg, #0B163F 0%, #16224F 100%);
}
.blog-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card-body { padding: 18px 20px 22px; }
.blog-card-date {
  display: inline-block;
  font-family: var(--font-b);
  font-size: 11px !important;
  font-weight: 600;
  color: var(--navy);
  background: #EAF1FC;
  border-radius: var(--pill);
  padding: 4px 12px;
  margin-bottom: 12px;
}
.blog-card-title {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 16px;
}
.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 13px !important;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--blue);
  border-radius: var(--pill);
  padding: 9px 8px 9px 18px;
}
.blog-card-cta .arrow-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-cta svg { width: 11px; height: 11px; }

/* ── Pagination — pill-shaped, icon + text together, matching the
   reference (not a bare icon circle) ── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.blog-page-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--pill);
  text-decoration: none;
  transition: opacity 0.15s;
  padding: 4px;
}
.blog-page-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.blog-page-icon svg { width: 15px; height: 15px; }
.blog-page-text {
  font-family: var(--font-b);
  font-size: 14px !important;
  font-weight: 600;
  padding-right: 6px;
}

/* Prev — muted/disabled tone */
.blog-page-pill--muted {
  background: #EAECF3;
  cursor: default;
  pointer-events: none;
  padding-right: 16px;
}
.blog-page-pill--muted .blog-page-icon { background: #C7CBDA; color: #FFFFFF; }
.blog-page-pill--muted .blog-page-text { color: #9CA3B8; padding-right: 0; }

/* Next — active blue tone. Text sits before the icon, per reference. */
.blog-page-pill--active {
  background: #DCE8FB;
  padding-left: 16px;
}
.blog-page-pill--active .blog-page-icon { background: var(--blue); color: #FFFFFF; }
.blog-page-pill--active .blog-page-text { color: var(--navy); padding-right: 0; }
.blog-page-pill--active:hover { opacity: 0.85; }

.blog-page-label {
  font-family: var(--font-b);
  font-size: 14px !important;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-grid-section { padding: 8px 20px 48px; }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Wide-screen growth — placed after both base rules above so it
   reliably wins regardless of selector source order. Without this,
   the page stays capped at 1400px forever past 1280px viewport
   width, leaving large empty side margins on wide monitors instead
   of growing proportionally. */
@media (min-width: 1600px) {
  .blog-hero-inner, .blog-grid-inner { max-width: min(85vw, 1720px); }
}
@media (min-width: 1900px) {
  .blog-hero-inner, .blog-grid-inner { max-width: min(80vw, 1900px); }
}
@media (min-width: 2200px) {
  .blog-hero-inner, .blog-grid-inner { max-width: min(78vw, 2100px); }
}
@media (min-width: 2600px) {
  .blog-hero-inner, .blog-grid-inner { max-width: min(76vw, 2300px); }
}


/* ══════════════════════════════════════════════════════════════════════
   TECHNOLOGY / INDUSTRY (tech-*) — shared zigzag-section template used
   by both "Technology We Use" and "Industry We Serve" pages: blue
   gradient hero band + alternating image/text rows, with headings and
   body text stepping up at wide-screen tiers. Both pages reuse this
   exact CSS (only content differs), so it is defined here once.
   .tech-text-col p uses !important — without it, the sitewide bare
   p selector's own !important font-size rule (see the exclusion list
   above) silently wins regardless of this selector's specificity,
   since that sitewide rule is also !important.
   ══════════════════════════════════════════════════════════════════════ */
/* ══ HERO — usual blue gradient band ══ */
.tech-hero-band {
  width: 100%;
  padding: 72px 48px;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  text-align: center;
}
.tech-hero-title {
  font-family: var(--font-h);
  font-size: 44px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -1px;
}

/* ══ ZIGZAG SECTIONS ══ */
.tech-zigzag-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.tech-row {
  display: flex;
  align-items: center;
  gap: 64px;
}
.tech-row.reverse { flex-direction: row-reverse; }

.tech-img-col {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
}
.tech-img-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #EAF1FC 0%, #F5F9FE 100%);
  padding: 32px;
}
.tech-img-card::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,107,230,0.12) 0%, rgba(43,107,230,0) 70%);
}
.tech-img-card img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.tech-text-col {
  flex: 1 1 50%;
  min-width: 0;
}
.tech-title {
  font-family: var(--font-h);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
}
.tech-text-col p {
  font-family: var(--font-b);
  font-size: 14.5px !important;
  line-height: 1.85;
  color: rgba(11,22,63,0.75);
  margin-bottom: 16px;
}
.tech-text-col p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .tech-row, .tech-row.reverse { flex-direction: column; gap: 32px; }
  .tech-zigzag-wrap { gap: 64px; padding: 56px 32px; }
}
@media (max-width: 600px) {
  .tech-hero-band { padding: 48px 20px; }
  .tech-hero-title { font-size: 30px; }
  .tech-zigzag-wrap { padding: 40px 20px; gap: 48px; }
  .tech-title { font-size: 22px; }
}

/* Wide-screen growth — placed after every other rule above so it
   reliably wins on source order. Without this the page stays capped
   at 1280px forever past that viewport width, leaving large empty
   side margins on wide monitors instead of growing proportionally.
   Headings and body text step up alongside the container at each
   tier too — matching the pattern used elsewhere on the site (e.g.
   .smcm-tour-intro-title / .smcm-tour-intro-desc), so text doesn't
   look proportionally smaller and smaller as the container widens. */
@media (min-width: 1600px) {
  .tech-zigzag-wrap { max-width: min(85vw, 1720px); }
  .tech-title { font-size: 32px; }
  .tech-text-col p { font-size: 15.5px !important; }
}
@media (min-width: 1900px) {
  .tech-zigzag-wrap { max-width: min(80vw, 1900px); }
  .tech-title { font-size: 36px; }
  .tech-text-col p { font-size: 16.5px !important; }
}
@media (min-width: 2200px) {
  .tech-zigzag-wrap { max-width: min(78vw, 2100px); }
  .tech-title { font-size: 40px; }
  .tech-text-col p { font-size: 17.5px !important; }
}
@media (min-width: 2600px) {
  .tech-zigzag-wrap { max-width: min(76vw, 2300px); }
  .tech-title { font-size: 44px; }
  .tech-text-col p { font-size: 18px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   RESOURCES (res-*) — hero (gradient, left text/CTA, right image) +
   Browse All Resources (heading+search, 4-tab bar, 9-per-page grid,
   pagination). Shared by all four language templates
   (page-sfs-resources.php / -es / -fr / -pt).
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   RESOURCES HERO — blue gradient, left text/CTA, right image.
   ══════════════════════════════════════════════════════════════ */
.res-hero {
  width: 100%;
  background: linear-gradient(135deg, #C6DCF5 0%, #DFECF9 30%, #F2F7FD 60%, #FFFFFF 100%);
  padding: 88px 48px;
  display: flex;
  justify-content: center;
}
.res-hero-inner {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: center;
  gap: 64px;
}
.res-hero-text { flex: 1 1 460px; min-width: 0; }
.res-hero-title {
  font-family: var(--font-h);
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin-bottom: 20px;
}
.res-hero-sub {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: 28px;
}
.res-hero-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-h);
  font-size: 14px !important;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  text-decoration: none;
  transition: background 0.15s;
}
.res-hero-btn:hover { background: #1f56c4; }
.res-hero-media { flex: 1 1 460px; min-width: 0; }
.res-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
}

/* ══════════════════════════════════════════════════════════════
   BROWSE RESOURCES — heading + search, tabs, 3x3 card grid, pager.
   ══════════════════════════════════════════════════════════════ */
.res-browse {
  width: 100%;
  padding: 72px 48px;
  display: flex;
  justify-content: center;
}
.res-browse-inner { width: 100%; max-width: 1240px; }

.res-browse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}
.res-browse-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.6px;
}
.res-browse-heading-blue { color: var(--blue); font-size: inherit !important; }

.res-search-form {
  flex: 0 1 420px;
  min-width: 260px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #E4ECF7;
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  box-shadow: 0 10px 30px rgba(11,22,63,0.06);
}
.res-search-form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--navy);
  background: transparent;
}
.res-search-form input::placeholder { color: var(--muted); }
.res-search-submit {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.res-search-submit svg { width: 15px; height: 15px; stroke: #fff; }

/* ── Card frame + tabs ── */
.res-frame {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(11,22,63,0.07);
  padding: 40px;
}
.res-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  background: #F2F5FA;
  border-radius: 999px;
  padding: 6px;
  margin-bottom: 36px;
  width: 100%;
}
.res-tab {
  font-family: var(--font-h);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  text-align: center;
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.res-tab.res-tab-active { background: var(--blue); color: #fff; }

.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}
.res-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #EEF1F7;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(11,22,63,0.05);
}
.res-card-img-wrap { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #0B163F 0%, #16224F 100%); }
.res-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-card-body { padding: 18px 20px 22px; }
.res-card-title {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 16px;
}
.res-card-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-h);
  font-size: 13px !important;
  font-weight: 700;
  color: var(--blue);
  background: #fff;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  padding: 9px 20px;
  text-decoration: none;
}
.res-card-dl:hover { background: #EAF1FC; }

/* ── Pagination ── */
.res-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.res-page-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  text-decoration: none;
  padding: 4px;
}
.res-page-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.res-page-icon svg { width: 15px; height: 15px; }
.res-page-text { font-family: var(--font-b); font-size: 14px !important; font-weight: 600; }
.res-page-pill--muted { background: #EAECF3; pointer-events: none; padding-right: 16px; }
.res-page-pill--muted .res-page-icon { background: #C7CBDA; color: #fff; }
.res-page-pill--muted .res-page-text { color: #9CA3B8; }
.res-page-pill--active { background: #DCE8FB; padding-left: 16px; }
.res-page-pill--active .res-page-icon { background: var(--blue); color: #fff; }
.res-page-pill--active .res-page-text { color: var(--navy); }
.res-page-label { font-family: var(--font-b); font-size: 14px !important; font-weight: 600; color: var(--navy); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .res-hero-inner { gap: 40px; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .res-hero-inner { flex-direction: column; }
  .res-hero-text, .res-hero-media { flex: 1 1 100%; width: 100%; }
  .res-hero-sub { max-width: 100%; }
  .res-browse-head { flex-direction: column; align-items: stretch; }
  .res-search-form { flex: 1 1 auto; }
}
@media (max-width: 768px) {
  .res-hero { padding: 56px 20px; }
  .res-browse { padding: 48px 20px; }
  .res-frame { padding: 24px; border-radius: 22px; }
  .res-grid { grid-template-columns: 1fr; gap: 20px; }
  .res-tabs { width: 100%; overflow-x: auto; }
}


/* ══════════════════════════════════════════════════════════════════════
   HOW IT WORKS — CAROUSEL (hw2-*) — replaces the older .hw-section
   step-track. Single H3/paragraph swap at the top of a rounded card,
   3-up image carousel below (active center clear, prev/next peeking
   blurred at the sides). Book demo stays static, not per-slide.
   Shared by all 17 product pages, all 4 languages.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS — CAROUSEL (hw2-*). New design: single H3/paragraph
   swap at the top of a big rounded card, with a 3-up image carousel
   below it (active center card clear, prev/next peeking in blurred
   at the sides). Book demo stays static beneath, not per-slide.
   ══════════════════════════════════════════════════════════════ */
.hw2-section {
  width: 100%;
  padding: 88px 48px;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hw2-section::before,
.hw2-section::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hw2-section::before {
  top: -180px;
  left: -180px;
  background: radial-gradient(circle, rgba(43,107,230,0.16) 0%, rgba(43,107,230,0) 70%);
}
.hw2-section::after {
  bottom: -180px;
  right: -180px;
  background: radial-gradient(circle, rgba(43,107,230,0.16) 0%, rgba(43,107,230,0) 70%);
}
.hw2-header, .hw2-carousel-outer, .hw2-cta-wrap {
  position: relative;
  z-index: 1;
}
.hw2-header { text-align: center; max-width: 720px; margin-bottom: 48px; }
.hw2-heading {
  font-family: var(--font-h);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.6px;
}
.hw2-heading-blue { color: var(--blue); font-size: inherit !important; }
.hw2-sub {
  margin-top: 10px;
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--muted);
}

.hw2-carousel-outer {
  position: relative;
  width: 100%;
  max-width: 1280px;
}
.hw2-arrow {
  position: absolute;
  top: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: opacity 0.2s;
}
.hw2-arrow svg { width: 18px; height: 18px; }
.hw2-arrow-prev { left: 0; background: #EAF1FC; color: var(--muted); }
.hw2-arrow-next { right: 0; background: var(--blue); color: #fff; }
.hw2-arrow:disabled { opacity: 0.4; cursor: default; }

.hw2-card {
  margin: 0 76px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(11,22,63,0.09);
  padding: 40px 40px 44px;
}
.hw2-step-header { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.hw2-step-title {
  font-family: var(--font-h);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.hw2-step-desc {
  font-family: var(--font-b);
  font-size: var(--fs-body) !important;
  font-weight: 500;
  color: var(--muted);
}

.hw2-track-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.hw2-track {
  display: flex;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hw2-slide {
  flex: 0 0 72%;
  display: flex;
  justify-content: center;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
  opacity: 0.35;
  filter: blur(3px);
  transform: scale(0.9);
}
.hw2-slide.hw2-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.hw2-slide img {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  background: linear-gradient(135deg, #EAF1FC 0%, #F7FAFE 100%);
}

.hw2-cta-wrap { margin-top: 40px; }
.hw2-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-h);
  font-size: 14px !important;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  text-decoration: none;
}
.hw2-cta:hover { background: #1f56c4; }

@media (max-width: 900px) {
  .hw2-card { margin: 0 56px; padding: 32px 24px 36px; }
  .hw2-arrow { top: 36px; width: 38px; height: 38px; }
}
@media (max-width: 640px) {
  .hw2-section { padding: 56px 20px; }
  .hw2-header { margin-bottom: 32px; }
  .hw2-card { margin: 0 44px; padding: 24px 16px 28px; border-radius: 20px; }
  .hw2-arrow { top: auto; bottom: -56px; }
  .hw2-arrow-prev { left: 30%; }
  .hw2-arrow-next { right: 30%; }
  .hw2-step-title { font-size: 19px; }
  .hw2-cta-wrap { margin-top: 64px; }
}

/* ── Resources page — wide-screen growth, matched against the same
   min(2600px, 95vw) formula measured from Smart Change and already
   used for the Smart Features/Product Features sections, so this
   page grows consistently with the rest of the site instead of
   staying flat past 1240px. Placed at the very end of the file so it
   reliably wins on source order over the base rules above. ── */
@media (min-width: 1440px) {
  .res-browse-inner { max-width: min(2600px, 95vw); }
  .res-hero-inner { max-width: min(2600px, 95vw); } /* was capped at 1240px while
    the section below it grew to 2600px, making the hero look boxed-in/narrow
    by comparison at wide screens even though its background was already full-width */
  .res-search-form { flex: 0 1 560px; }
  .res-card-title { font-size: 17px; }
}
@media (min-width: 1600px) {
  .res-grid { gap: 32px; }
  .res-search-form { flex: 0 1 620px; }
  .res-card-title { font-size: 18px; }
}
@media (min-width: 1900px) {
  .res-grid { gap: 36px; }
  .res-search-form { flex: 0 1 680px; }
  .res-card-title { font-size: 19px; }
}
@media (min-width: 2200px) {
  .res-search-form { flex: 0 1 760px; }
  .res-card-title { font-size: 20px; }
}

/* Pagination — remove the pill background colors, keep alignment
   centered explicitly at every width (was already center via
   justify-content, but re-asserted here at the wide tiers in case
   anything upstream overrides it at those sizes). */
.res-page-pill--muted, .res-page-pill--active {
  background: transparent !important;
}
.res-pagination {
  width: 100%;
  max-width: none;
  justify-content: center !important;
}
@media (min-width: 1440px) {
  .res-pagination { width: 100%; max-width: none; justify-content: center !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   HOW IT WORKS - scroll & fade (hw3-*) - replaces the hw2 carousel on
   all 16 product pages x 4 languages. Sticky image on the left that
   crossfades per step; step cards on the right, active one highlighted.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS - scroll & fade (hw3-*)
   Left: one sticky image that crossfades to the active step's image.
   Right: step cards; the card nearest the middle of the screen is
   the active one (full opacity), the rest fade back.
   ══════════════════════════════════════════════════════════════ */
.hw3-section {
  --hw3-top: 128px;   /* just clear of the sticky header (101-117px tall) */
  --fs-h3: 20px;
  position: relative;
  width: 100%;
  padding: clamp(48px, 5.5vw, 120px) clamp(16px, 3vw, 80px);
  background: #fff;
  display: flex;
  justify-content: center;
}
/* glows live in their own clipped layer so overflow:hidden never ends
   up on an ancestor of the sticky image (that would break sticky) */
.hw3-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hw3-bg::before, .hw3-bg::after {
  content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,107,230,0.17) 0%, rgba(43,107,230,0) 70%);
}
.hw3-bg::before { top: -190px; right: -170px; }
.hw3-bg::after  { bottom: -190px; left: -170px; }

.hw3-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 1240px;
  background: #fff;
  border-radius: clamp(24px, 2.6vw, 56px);
  box-shadow: 0 24px 80px rgba(11,22,63,0.06);
  padding: clamp(32px, 4.4vw, 110px) clamp(20px, 4.4vw, 110px);
}
@media (min-width: 1281px) { .hw3-section { --fs-h3: clamp(20px, 1.25vw, 32px); } }
@media (min-width: 1440px) { .hw3-panel { max-width: min(2600px, 95vw); } }
@media (min-width: 1600px) { .hw3-section { --hw3-top: 136px; } }
@media (min-width: 2000px) { .hw3-section { --fs-h3: clamp(29px, 1.42vw, 38px); } }
@media (min-width: 2100px) { .hw3-section { --hw3-top: 144px; } }

.hw3-header { text-align: center; margin-bottom: clamp(32px, 4vw, 90px); }
.hw3-heading {
  font-family: var(--font-h); font-size: var(--fs-h2); font-weight: 700;
  color: var(--navy); letter-spacing: -0.6px;
}
.hw3-heading-blue { color: var(--blue); font-size: inherit !important; }
.hw3-sub {
  margin: 10px auto 0; max-width: 900px;
  font-family: var(--font-b); font-size: var(--fs-body) !important; font-weight: 500;
  color: var(--muted); line-height: 1.6;
}

.hw3-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 3.8vw, 110px);
  align-items: stretch;
}

/* left - sticky image stack */
.hw3-media-col { position: relative; }
.hw3-media {
  position: sticky; top: var(--hw3-top);
  width: 100%; max-width: clamp(420px, 36vw, 900px);
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - var(--hw3-top) - 40px);
}
.hw3-media-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;            /* plain image - rounding comes from the uploaded file */
  opacity: 0; transition: opacity .55s ease;
}
.hw3-media-img.is-active { opacity: 1; }

/* right - step cards */
.hw3-cards {
  display: flex; flex-direction: column;
  gap: clamp(36px, 9vh, 110px);
  padding: clamp(0px, 5vh, 70px) 0;
}
.hw3-card {
  background: linear-gradient(135deg, #F1F6FE 0%, #DCE9FB 100%);
  border: 1px solid rgba(43,107,230,0.10);
  border-radius: clamp(14px, 1.2vw, 28px);
  padding: clamp(18px, 1.5vw, 38px) clamp(20px, 1.8vw, 44px);
  transform-origin: left center;
}
.hw3-card-img { display: none; }
.hw3-card-num {
  width: clamp(26px, 1.7vw, 40px); height: clamp(26px, 1.7vw, 40px);
  border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 700; font-size: clamp(12px, 0.85vw, 19px);
  margin-bottom: clamp(10px, 0.9vw, 22px);
}
.hw3-card-title {
  font-family: var(--font-h); font-size: var(--fs-h3); font-weight: 700;
  color: var(--navy); line-height: 1.3; margin-bottom: 8px;
}
.hw3-card-desc {
  font-family: var(--font-b); font-size: var(--fs-body) !important; font-weight: 500;
  color: var(--muted); line-height: 1.65;
}

/* scroll & fade - only when JS is running, so no-JS visitors just see every card */
.hw3-js .hw3-card {
  opacity: 0.28; transform: scale(0.965);
  transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.hw3-js .hw3-card.is-active {
  opacity: 1; transform: none;
  border-color: rgba(43,107,230,0.30);
  box-shadow: 0 18px 50px rgba(43,107,230,0.14);
}
@media (prefers-reduced-motion: reduce) {
  .hw3-js .hw3-card, .hw3-js .hw3-card.is-active { opacity: 1; transform: none; transition: none; }
  .hw3-media-img { transition: none; }
}

/* mobile / tablet - single column, each card carries its own image */
@media (max-width: 900px) {
  .hw3-grid { grid-template-columns: 1fr; }
  .hw3-media-col { display: none; }
  .hw3-cards { gap: 28px; padding: 0; }
  .hw3-card-img { display: block; width: 100%; max-height: 300px; object-fit: contain; margin-bottom: 16px; }
  .hw3-card-title { font-size: 20px; }
}
@media (max-width: 480px) {
  .hw3-section { padding: 40px 12px; }
  .hw3-panel { padding: 28px 16px; }
}

/* no images uploaded yet -> cards on their own, centered; image + cards
   layout appears automatically once step images exist */
.hw3-no-media .hw3-media-col { display: none; }
.hw3-no-media .hw3-grid { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: clamp(560px, 50vw, 1200px); margin: 0 auto; }
.hw3-media-img[src=""], .hw3-card-img[src=""] { display: none; }


/* ══════════════════════════════════════════════════════════════
   SOLUTION PAGES – one font and layout system (body.sfs-sol)
   Fixes: H1 was smaller than the H2s (it stayed at 42px while H2s grow
   with the screen and was 23px against a 24px H2 on phones); mobile
   heading sizes differed between sections; the eyebrow label was bigger
   on phones than on desktop; the "Solutions we offer" images were cropped
   and narrow on iPad. H1 is always about 1.3x the H2 at every width.
     width      H1    H2
     <=360      28    22
     <=480      30    24
     <=768      36    28
     <=1024     42    32
     <=1280     44    34
     >=1281     clamp(48px, 3.1vw, 96px) against the sitewide --fs-h2
   Body, buttons and card titles keep following the sitewide tiers.
══════════════════════════════════════════════════════════════ */
body.sfs-sol .sol-hl {
  font-size: clamp(48px, 3.1vw, 96px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: break-word;
}
body.sfs-sol .irp-eyebrow {
  font-size: clamp(12px, 0.8vw, 18px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.6px;
}
@media (max-width: 1280px) {
  body.sfs-sol .sol-hl { font-size: 44px !important; }
  body.sfs-sol .sf-heading,
  body.sfs-sol .irp-heading { font-size: 34px !important; line-height: 1.2 !important; }
}
@media (max-width: 1024px) {
  body.sfs-sol .sol-hl { font-size: 42px !important; }
  body.sfs-sol .sf-heading,
  body.sfs-sol .irp-heading { font-size: 32px !important; }
}
@media (max-width: 768px) {
  body.sfs-sol .sol-hl { font-size: 36px !important; }
  body.sfs-sol .sf-heading,
  body.sfs-sol .irp-heading { font-size: 28px !important; }
}
@media (max-width: 480px) {
  body.sfs-sol .sol-hl { font-size: 30px !important; }
  body.sfs-sol .sf-heading,
  body.sfs-sol .irp-heading { font-size: 24px !important; }
}
@media (max-width: 360px) {
  body.sfs-sol .sol-hl { font-size: 28px !important; }
  body.sfs-sol .sf-heading,
  body.sfs-sol .irp-heading { font-size: 22px !important; }
}

/* iPad portrait and mobile: centred headings and subtitles */
@media (max-width: 1024px) {
  body.sfs-sol .sol-hero-text { align-items: center; text-align: center; max-width: 640px; margin: 0 auto; }
  body.sfs-sol .sol-hs { margin-left: auto; margin-right: auto; }
  body.sfs-sol .sf-header, body.sfs-sol .sf-heading, body.sfs-sol .sf-sub { text-align: center; }
  body.sfs-sol .irp-header { align-items: center; text-align: center; }
  body.sfs-sol .irp-heading-block { text-align: center; }
  body.sfs-sol .irp-sub { margin-left: auto; margin-right: auto; text-align: center; }

  /* "Solutions we offer" / "Smart Features": stacked tabs with a full-width, uncropped image (product and solution pages) */
  .sf-section .sf-layout { flex-direction: column; max-width: none; width: 100%; margin: 0; align-items: stretch; }
  .sf-section .sf-panel { display: none; }
  .sf-section .sf-tabs { max-width: 100%; width: 100%; flex: 1 1 auto; }
  .sf-section .sf-tab { border-left-color: transparent !important; padding-left: 0 !important; }
  .sf-section .sf-tab-title,
  .sf-section .sf-tab-desc { padding-left: 14px; border-left: 3px solid transparent; }
  .sf-section .sf-tab.active .sf-tab-title,
  .sf-section .sf-tab.active .sf-tab-desc { border-left-color: var(--blue); }
  .sf-section .sf-tab-mobile-img {
    display: none; width: calc(100% + 3px) !important; max-width: none !important; margin-left: -3px; height: auto !important; aspect-ratio: auto; max-height: none !important;
    object-fit: contain; border-radius: 20px; margin-top: 16px;
  }
  .sf-section .sf-tab.active .sf-tab-mobile-img { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   WIDE SCREENS – section subtitles
   .sf-sub (640px) and .irp-sub (480px) had a fixed pixel width while
   their font grows with the screen (14px to 24px), so on 2250px and
   wider screens the text broke into 4-6 short lines. The width is now
   in em, so it grows together with the font and the text stays at
   1 to 3 lines at any screen size. Below 1281px nothing changes.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1281px) {
  .sf-sub, .sec-sub, .trusted-sub { max-width: min(100%, 56em); }
  .irp-sub { max-width: min(100%, 52em); }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGES – one H2 size per width
   pf / sf / hw3 / hw / dl / faq headings had different sizes at the same
   width (33, 34, 36 and 40px). They now share the solution-page scale; at
   1281px and wider they keep following the sitewide --fs-h2 tier. The
   H1 (.p-hl) keeps its own tier steps and stays larger than the H2.
══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .pf-heading, .sf-heading, .hw3-heading, .hw-heading, .dl-heading, .faq-heading { font-size: 34px !important; line-height: 1.2 !important; }
}
@media (max-width: 1024px) {
  .pf-heading, .sf-heading, .hw3-heading, .hw-heading, .dl-heading, .faq-heading { font-size: 32px !important; }
}
@media (max-width: 768px) {
  .pf-heading, .sf-heading, .hw3-heading, .hw-heading, .dl-heading, .faq-heading { font-size: 28px !important; }
}
@media (max-width: 480px) {
  .pf-heading, .sf-heading, .hw3-heading, .hw-heading, .dl-heading, .faq-heading { font-size: 24px !important; }
}
@media (max-width: 360px) {
  .pf-heading, .sf-heading, .hw3-heading, .hw-heading, .dl-heading, .faq-heading { font-size: 22px !important; }
}

/* ════════════════════════════════════════
   PRODUCT SHOWCASE — coded animation variant (English homepage)
   No card, border, frame or shadow: only the animation itself.
   Width/scale rules live in assets/showcase/showcase.css.
════════════════════════════════════════ */
.showcase.showcase--anim { padding-left: 0; padding-right: 0; }
.showcase--anim .sc-wrap {
  max-width: none;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}
.showcase--anim .sc-wrap > .reveal-card { width: 100%; }

/* ════ SOLUTION PAGE HERO — full-width background image ════
   The image (uploaded in Media Manager, gradient already baked into it) fills the
   whole hero. No CSS gradient or overlay is added. */
.sol-hero{display:block;position:relative;overflow:hidden;padding:0;background:transparent;isolation:isolate}
.sol-hero--noimg{background:#2173EC}
.sol-hero::before{display:none}
.sol-hero-bg{position:absolute;inset:0;z-index:0}
.sol-hero-bg img{position:absolute;inset:0;width:100%;height:100%;min-width:100%;max-width:none;max-height:none;display:block;object-fit:cover;object-position:center;margin:0;border:0;border-radius:0;transform:none}
.sol-hero-inner{position:relative;z-index:1;display:flex;align-items:center;width:100%;max-width:clamp(1200px,90vw,1720px);min-height:clamp(440px,32vw,780px);margin:0 auto;padding:clamp(56px,5vw,110px) clamp(24px,5.5vw,120px);box-sizing:border-box}
.sol-hero-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:clamp(520px,40vw,900px)}
.sol-hero .sol-hl{color:#fff;margin-bottom:clamp(18px,1.5vw,32px)}
.sol-hero .sol-hl *{color:inherit}
.sol-hero .sol-hs{color:rgba(255,255,255,.94);font-size:clamp(14px,.98vw,20px);line-height:1.75;margin-bottom:clamp(26px,2.2vw,46px)}
.sol-hero .sol-btn{background:#fff;color:#2173EC;box-shadow:0 14px 30px rgba(8,30,100,.22)}
.sol-hero .sol-btn:hover{opacity:1;transform:translateY(-2px);box-shadow:0 18px 36px rgba(8,30,100,.3)}
@media (max-width:1024px){
  .sol-hero-inner{min-height:clamp(420px,56vw,560px);justify-content:center;padding:56px 32px}
  .sol-hero-text{max-width:620px}
}
@media (max-width:768px){
  .sol-hero-inner{min-height:0;padding:56px 20px 60px}
}
@media (max-width:480px){
  .sol-hero-inner{padding:48px 18px 52px}
}

/* full-width hero: text stays left-aligned on every screen size (overrides the earlier iPad/mobile centring) */
@media (max-width:1024px){
  body.sfs-sol .sol-hero-text{align-items:flex-start;text-align:left;margin:0}
  body.sfs-sol .sol-hs{margin-left:0;margin-right:0}
}

/* solution hero: the image runs up behind the (transparent) header row, so no pale band shows around the menu bar.
   --sol-hdr-h is the header row height, measured by main.js (70px fallback). */
.sol-hero:not(.sol-hero--noimg){margin-top:calc(-1 * var(--sol-hdr-h,70px))}
.sol-hero:not(.sol-hero--noimg) .sol-hero-inner{padding-top:calc(clamp(56px,5vw,110px) + var(--sol-hdr-h,70px))}
@media (max-width:1024px){.sol-hero:not(.sol-hero--noimg) .sol-hero-inner{padding-top:calc(56px + var(--sol-hdr-h,70px))}}
@media (max-width:768px){.sol-hero:not(.sol-hero--noimg) .sol-hero-inner{padding-top:calc(48px + var(--sol-hdr-h,70px))}}
@media (max-width:480px){.sol-hero:not(.sol-hero--noimg) .sol-hero-inner{padding-top:calc(40px + var(--sol-hdr-h,70px))}}