/* ═══════════════════════════════════════════════════════════════════════════
   home-page.css — home template styles (Phase 4 extraction 2026-04-17).
   Consolidates 22 inline <style> blocks down to unique bodies. Browser
   caches once; no more duplicate-style shipping per page load.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ §1 ═══════════════════════════════════ */
/* ── SKIP LINK ─────────────────────────────────────── */
    .skip-link {
      position: absolute; top: -100%; left: 16px; z-index: 9999;
      background: #07192E; color: #fff;
      padding: 12px 24px; border-radius: 0 0 8px 8px;
      font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 600;
      text-decoration: none; transition: top .15s;
    }
    .skip-link:focus { top: 0; }

    /* -- SCREEN READER ONLY --------------------------------------- */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ── RESET ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :focus-visible { outline: 2px solid #1779B8; outline-offset: 3px; border-radius: 6px; }
    /* ── PRO MAX: INTERACTIVE ELEMENTS ──────────────────── */
    a, button, [role="button"], [onclick], .btn-hero-primary, .btn-primary, .btn-orange, .btn-nav-primary, .callback-trigger { cursor: pointer; }
    a, button, [role="button"] { transition: all 0.2s ease; }
    /* ── PRO MAX: LOADING STATE ─────────────────────────── */
    .btn-loading { position: relative; pointer-events: none; opacity: 0.8; }
    .btn-loading::after {
      content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      width: 18px; height: 18px; border: 2px solid transparent;
      border-top-color: #fff; border-radius: 50%;
      animation: btnSpin 0.6s linear infinite;
    }
    @keyframes btnSpin { to { transform: translateY(-50%) rotate(360deg); } }
    /* ── PRO MAX: TOUCH TARGETS ────────────────────────── */
    .mob-sticky-cta a, .mob-sticky-cta button, .callback-trigger { min-height: 44px; }
    @media (max-width: 1024px) {
      button, [role="button"], .btn-hero-primary, .btn-primary, .btn-orange, .btn-nav-primary, .iq-submit, .assess-submit, .callback-submit, .cb-submit, .submit-btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
      input, select, textarea { min-height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal { opacity: 1 !important; transform: none !important; }
      .glass {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, .92) !important;
      }
    }

    /* ── PAGE-UNIQUE TOKENS ─────────────────────────────── */
    /* Removed redundant tokens already defined in site.css (verified 2026-05-05).
       Page-unique kept: --glow-* (shadow), --h2-size/h3-size/sec-pad/etc.
       (page layout system), --radius-lg (24px override of site.css 14px). */
    :root {
      --glow-blue:  0 0 0 1px rgba(41,171,226,.18), 0 8px 32px rgba(41,171,226,.14);
      --glow-orange: 0 0 0 1px rgba(249,115,22,.12), 0 8px 24px rgba(249,115,22,.20);
      /* ── DESIGN SYSTEM TOKENS (unified 2026-04-13) ── */
      --h2-size:    clamp(30px, 3.5vw, 48px);
      --h3-size:    clamp(22px, 2.5vw, 32px);
      --sec-pad:    80px;
      --sec-pad-sm: 56px;
      --sec-gap:    48px;
      --radius-card: 16px;
      --radius-lg:  24px;       /* page-scoped override of site.css/tokens.css 14px */
      /* Apple-inspired shadow layers */
      --glass-shadow:
        0 0 0 0.5px rgba(255,255,255,.6),
        0 0 0 1px rgba(0,0,0,.02),
        0 1px 2px rgba(7,25,46,.03),
        0 4px 12px rgba(7,25,46,.04),
        0 16px 48px rgba(7,25,46,.07),
        0 32px 80px rgba(7,25,46,.04);
      --glass-shadow-hover:
        0 0 0 0.5px rgba(255,255,255,.8),
        0 0 0 1px rgba(41,171,226,.08),
        0 2px 4px rgba(7,25,46,.04),
        0 8px 24px rgba(7,25,46,.06),
        0 24px 64px rgba(7,25,46,.10),
        0 40px 96px rgba(7,25,46,.05);
      --mini-shadow:
        0 0 0 0.5px rgba(255,255,255,.7),
        0 0 0 1px rgba(0,0,0,.02),
        0 2px 8px rgba(7,25,46,.05),
        0 12px 36px rgba(7,25,46,.07);
    }

    /* ── BASE ───────────────────────────────────────────── */
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: var(--font-b); background: var(--white); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.6; }

    /* ── HEADER ─────────────────────────────────────────── */
    header {
      position: sticky; top: 0; z-index: 300;
      background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 100%);
      backdrop-filter: blur(28px) saturate(1.8) brightness(1.02);
      -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.02);
      border-bottom: 1px solid rgba(226,236,244,.5);
      box-shadow: 0 1px 0 rgba(226,236,244,.5), 0 0 0 0.5px rgba(255,255,255,.8), 0 2px 12px rgba(7,25,46,.04), 0 4px 24px rgba(7,25,46,.03), 0 8px 32px rgba(7,25,46,.04);
      overflow: visible;
    }
    header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: rgba(255,255,255,.95);
      pointer-events: none;
      z-index: 1;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 0; right: 0;
      height: 8px;
      background: linear-gradient(180deg, rgba(7,25,46,.04) 0%, transparent 100%);
      pointer-events: none;
      z-index: -1;
    }
/* NAV CSS extracted to assets/site.css — see _scripts/extract_nav_css.py */

    /* ── HERO: gradient mesh, modern ───────────────────────── */
    .hero {
      background: linear-gradient(160deg, #E8F4FD 0%, #F7FBFF 42%, #FEF4ED 100%);
      min-height: calc(100vh - 90px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: stretch;
    }
    .hero-inner {
      /* Holds 1360 through every laptop width (all existing tuning preserved),
         then grows with the viewport on big displays so the device column — and
         thus the hero device — actually scales up instead of looking marooned. */
      max-width: clamp(1360px, 92vw, 1680px);
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 24px;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    /* Big screens (≥1480px): the 1680 inner + a 1.15fr text column (holding only
       ~636px of headline) + a device centered in a wide right column flung the
       iPad ~344px from the text — "super far away". Cap the spread and even the
       columns so the text and device read as one tight, centered unit with
       symmetric side margins instead of drifting to opposite edges. Laptops
       (<1480px, already pinned at the 1360 floor) are untouched. */
    @media (min-width: 1480px) {
      .hero-inner {
        max-width: clamp(1360px, 82vw, 1440px);
        grid-template-columns: 1fr 1.08fr;
        column-gap: 24px;
      }
    }
    /* Vivid mesh gradient orbs */
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 75% 85% at -8% 10%, rgba(41,171,226,.32) 0%, transparent 58%),
        radial-gradient(ellipse 60% 70% at 108% 85%, rgba(249,115,22,.22) 0%, transparent 52%),
        radial-gradient(ellipse 50% 60% at 52% -8%, rgba(23,121,184,.28) 0%, transparent 58%),
        radial-gradient(ellipse 42% 48% at 95% 5%, rgba(123,33,162,.14) 0%, transparent 52%),
        radial-gradient(ellipse 35% 40% at 30% 95%, rgba(232,18,92,.10) 0%, transparent 50%);
      pointer-events: none;
    }
    /* Dot grid */
    .hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(23,121,184,.09) 1px, transparent 1px);
      background-size: 36px 36px;
      pointer-events: none;
    }

    .hero-left {
      padding: 80px 48px 80px 56px;
      position: relative;
    }
    .hero-right {
      padding: 60px 24px 60px 0;
      position: relative;
      display: flex; align-items: center; justify-content: center;
      overflow: visible;
    }



    .hero-h1 {
      font-family: var(--font-h);
      font-size: 44px;
      font-size: clamp(44px, 5.5vw, 78px);
      font-weight: 900;
      line-height: 1.02;
      /* em-relative letter-spacing so it scales with the font.
         Fixed -3px was 7% of 44px which fused adjacent letters
         ("HRthat", "knowsyour", "payroll" reading as "pavroll" at narrow
         viewports). -0.025em = ~1.1px at 44px / ~2px at 78px = clean. */
      letter-spacing: -0.025em;
      color: var(--navy);
      margin-bottom: 24px;
    }
    .hero-h1 .grad {
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-h1 .glow-text {
      background: linear-gradient(135deg, #F7D44C 0%, #F07128 22%, #E8125C 50%, #7B21A2 78%, #1779B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── 21ST.DEV TEXT CYCLE ─────────────────────────────── */
    .hero-cycle-wrap {
      display: inline-block;
      position: relative;
      min-width: 180px;
      /* Follow the H1's alignment so the word stays centered under the centered
         H1 on tablet/mobile (it was text-align:left, which left-shoved the word
         inside the width-locked box ~90px off the H1's centre). Left on desktop
         where the H1 is left-aligned. */
      text-align: inherit;
      /* overflow:visible everywhere (was hidden) so the gradient-prism
         descenders on `payroll.`, `payroll`, etc. don't clip against the
         wrap's tight line-box. The cycle exit/enter animations only translate
         ±14px which is short of any adjacent text — no overlap risk. */
      overflow: visible;
      vertical-align: bottom;
      padding-right: 2px;
    }
    .hero-cycle-word {
      display: inline-block;
      white-space: nowrap;
      background: linear-gradient(135deg, #F7D44C 0%, #F07128 22%, #E8125C 50%, #7B21A2 78%, #1779B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-cycle-word.cycle-exit {
      animation: heroCycleOut .35s cubic-bezier(.4, 0, .2, 1) forwards;
    }
    .hero-cycle-word.cycle-enter {
      animation: heroCycleIn .45s cubic-bezier(.16, 1, .3, 1) forwards;
    }
    @keyframes heroCycleOut {
      0%   { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(14px); }
    }
    @keyframes heroCycleIn {
      0%   { opacity: 0; transform: translateY(-14px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    /* P1 fix 2026-04-15: on the smallest phones the gradient-prism letters
       can clip during the cycle transform. Let the wrap breathe visually. */
    @media (max-width: 480px) {
      .hero-cycle-wrap { overflow: visible; padding-right: 2px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-cycle-word.cycle-exit,
      .hero-cycle-word.cycle-enter {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
      }
    }

    .hero-p {
      font-family: var(--font-b); font-size: 18px; font-weight: 400;
      color: var(--muted); line-height: 1.72;
      max-width: 500px; margin-bottom: 40px;
    }

    /* ── SYNC CAPTION — changes in lockstep with the dashboard tab cycle ── */
    .hero-sync-caption {
      font-family: var(--font-b);
      font-size: 14.5px;
      font-weight: 600;
      color: var(--navy);
      letter-spacing: -.005em;
      line-height: 1.5;
      max-width: 520px;
      margin: -14px 0 22px 0;
      opacity: .88;
      min-height: 44px;
      display: flex;
      align-items: flex-start;
      border-left: 3px solid var(--blue);
      padding-left: 12px;
      will-change: opacity, transform;
    }
    .hero-sync-caption.cycle-exit  { animation: heroCycleOut .35s cubic-bezier(.4,0,.2,1) forwards; }
    .hero-sync-caption.cycle-enter { animation: heroCycleIn  .45s cubic-bezier(.16,1,.3,1) forwards; }
    @media (prefers-reduced-motion: reduce) {
      .hero-sync-caption.cycle-exit,
      .hero-sync-caption.cycle-enter {
        animation: none !important;
        opacity: .88 !important;
        transform: none !important;
      }
    }
    @media (max-width: 768px) {
      .hero-sync-caption { font-size: 13px; min-height: 72px; max-width: 100%; margin: -8px 0 20px 0; }
    }

    .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 52px; }
    .btn-hero-primary, .btn-primary {
      font-family: var(--font-b); font-size: 15.5px; font-weight: 700;
      color: #fff; background: var(--orange);
      padding: 15px 32px; border-radius: 12px; text-decoration: none;
      transition: all .2s var(--ease); min-height: 52px;
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .btn-hero-primary:hover, .btn-primary:hover { background: #EA6C10; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.35); }
    .btn-hero-primary:active, .btn-primary:active { transform: scale(0.97) translateY(1px); }
    .btn-hero-secondary, .btn-secondary {
      font-family: var(--font-b); font-size: 15.5px; font-weight: 700;
      color: var(--navy); background: transparent;
      padding: 15px 32px; border-radius: 12px; text-decoration: none;
      transition: all .2s var(--ease); min-height: 52px;
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 2px solid var(--blue);
      box-shadow: none;
    }
    .btn-hero-secondary:hover, .btn-secondary:hover { background: rgba(41,171,226,.12); color: var(--navy); transform: translateY(-2px); box-shadow: var(--glow-blue); }
    .btn-hero-phone {
      font-family: var(--font-b); font-size: 15px; font-weight: 600;
      color: var(--navy); background: #FFFFFF;
      border: 1.5px solid rgba(23,121,184,.5);
      padding: 15px 28px; border-radius: 12px; text-decoration: none;
      box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 6px 16px -10px rgba(13,24,41,.20);
      transition: all .2s; min-height: 52px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    }
    .btn-hero-phone:hover { background: rgba(41,171,226,.08); border-color: var(--blue);
      box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 8px 20px -10px rgba(23,121,184,.4); }
    .btn-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* Trust row */
    .trust-row { display: flex; flex-wrap: wrap; gap: 20px; }
    .trust-chip{
      display: flex; align-items: center; gap: 7px;
      font-family: var(--font-b); font-size: 13px; font-weight: 500;
      color: var(--muted);
    }
    .trust-chip svg{ width: 14px; height: 14px; stroke: var(--blue); fill: none; stroke-width: 2.5; flex-shrink: 0; }
    a{ text-decoration: none; }
    a.trust-chip:hover { background: rgba(41,171,226,.12); border-color: rgba(41,171,226,.3); transform: translateY(-1px); }

    /* ── HERO RIGHT: Apple-Quality Glassmorphic Dashboard ──── */
    .hero-scene {
      position: relative;
      width: min(740px, 100%);
      max-width: 740px;
      height: 680px;
      perspective: 1200px;
    }
    .hero-scene::before {
      content: '';
      position: absolute;
      inset: -40px;
      background:
        radial-gradient(ellipse 60% 50% at 30% 30%, rgba(41,171,226,.20) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 70% 70%, rgba(168,85,247,.16) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(249,115,22,.10) 0%, transparent 70%);
      filter: blur(40px);
      opacity: .9;
      pointer-events: none;
      z-index: 0;
      animation: auroraShift 12s ease-in-out infinite;
    }
    .hero-scene > * { position: relative; z-index: 2; }
    @keyframes auroraShift {
      0%, 100% { transform: scale(1) translate(0,0); opacity: .85; }
      33%      { transform: scale(1.1) translate(-10px,-8px); opacity: 1; }
      66%      { transform: scale(1.05) translate(8px,6px); opacity: .92; }
    }
    /* Floating proof badges removed 2026-04-08 — proof absorbed into tab-synced caption */
    /* hpFloat keyframe preserved: still used by .ins-orb in the Insurance section */
    @keyframes hpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    .dash-main { isolation: isolate; }
    .dash-main::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(41,171,226,.5), transparent 40%, rgba(168,85,247,.5));
      filter: blur(24px);
      opacity: .35;
      z-index: -1;
      animation: dashGlow 5s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes dashGlow { 0%,100% { opacity: .25; } 50% { opacity: .55; } }

    /* Glass foundation — true glassmorphism */
    .glass {
      background: linear-gradient(
        145deg,
        rgba(255,255,255,.94) 0%,
        rgba(247,251,255,.84) 55%,
        rgba(255,253,252,.88) 100%
      );
      -webkit-backdrop-filter: blur(32px) saturate(1.6);
      backdrop-filter: blur(32px) saturate(1.6);
      border: 1px solid rgba(226,236,244,.72);
      transition: all .4s var(--ease);
    }

    /* Main dashboard card (Hub) */
    .dash-main {
      position: absolute;
      top: 30px; left: 50%;
      transform: translateX(-50%);
      width: 520px;
      border-radius: 28px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 0 0 1px rgba(255,255,255,.55),
        0 2px 4px rgba(7,25,46,.03),
        0 4px 12px rgba(7,25,46,.05),
        0 8px 24px rgba(7,25,46,.07),
        0 20px 48px rgba(7,25,46,.06),
        0 32px 72px rgba(41,171,226,.09),
        0 48px 96px rgba(41,171,226,.05);
      overflow: hidden;
      z-index: 3;
      transition: box-shadow .35s var(--ease);
    }
    .dash-main:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 0 0 1px rgba(255,255,255,.7),
        0 2px 4px rgba(7,25,46,.04),
        0 8px 24px rgba(7,25,46,.06),
        0 24px 64px rgba(7,25,46,.10),
        0 40px 80px rgba(41,171,226,.12),
        0 56px 112px rgba(41,171,226,.07);
    }

    /* Sleek glassmorphic header */
    .dash-header {
      padding: 14px 20px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 10;
      background: linear-gradient(
        180deg,
        rgba(255,255,255,.92) 0%,
        rgba(248,252,255,.78) 100%
      );
      -webkit-backdrop-filter: blur(24px) saturate(1.9);
      backdrop-filter: blur(24px) saturate(1.9);
      border-bottom: 1px solid rgba(226,236,244,.55);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(226,236,244,.30),
        0 1px 3px rgba(7,25,46,.04),
        0 2px 12px rgba(7,25,46,.03);
    }
    .dash-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dash-logo-mark {
      position: relative;
      width: 22px;
      height: 28px;
      overflow: visible;
      flex-shrink: 0;
    }
    .dash-logo-mark img {
      position: absolute;
      height: 28px;
      width: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      border-radius: 0 !important;
    }
    .dash-brand-text {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -.2px;
      color: var(--navy);
    }
    .dash-live {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-b);
      font-size: 10.5px;
      font-weight: 600;
      color: var(--green);
      letter-spacing: .2px;
    }
    .dash-live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px rgba(34,197,94,.4);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* ── Premium Glassmorphic Segmented Control ── */
    .seg-control {
      display: flex;
      gap: 4px;
      padding: 5px;
      margin: 6px 16px 0;
      background:
        linear-gradient(155deg,
          rgba(7,25,46,.06) 0%,
          rgba(41,171,226,.025) 60%,
          rgba(7,25,46,.045) 100%);
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 17px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -1px 0 rgba(7,25,46,.05),
        0 1px 6px rgba(7,25,46,.06),
        0 4px 16px rgba(7,25,46,.05);
      backdrop-filter: blur(20px) saturate(1.8);
      -webkit-backdrop-filter: blur(20px) saturate(1.8);
      position: relative;
    }
    /* Frosted glass inner ring shine */
    .seg-control::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(155deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.04) 50%,
        rgba(255,255,255,.10) 100%);
      pointer-events: none;
      z-index: 0;
    }

    /* Per-tab accent colour tokens */
    #tab-payroll  { --tab-c: #2563EB; --tab-glow: rgba(37,99,235,.18); }
    #tab-benefits { --tab-c: #16A34A; --tab-glow: rgba(22,163,74,.18);  }
    #tab-hr       { --tab-c: #7C3AED; --tab-glow: rgba(124,58,237,.18); }
    #tab-ta       { --tab-c: #EA580C; --tab-glow: rgba(234,88,12,.18);  }

    .seg-btn {
      flex: 1;
      padding: 11px 6px;
      border: 1px solid transparent;
      background: transparent;
      border-radius: 13px;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 600;
      color: rgba(7,25,46,.46);
      cursor: pointer;
      transition: color .24s var(--ease), background .24s var(--ease),
                  box-shadow .24s var(--ease), border-color .24s var(--ease);
      white-space: nowrap;
      position: relative;
      letter-spacing: -.005em;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 42px;
    }
    /* Coloured accent dot */
    .seg-btn::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--tab-c, var(--blue));
      flex-shrink: 0;
      opacity: 0;
      transform: scale(0.4);
      transition: opacity .24s var(--ease), transform .24s var(--spring),
                  box-shadow .24s var(--ease);
    }
    /* Top gloss streak on active/hover */
    .seg-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 13px;
      background: linear-gradient(170deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.0)  55%);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s var(--ease);
    }

    .seg-btn:hover {
      color: rgba(7,25,46,.72);
      background: rgba(255,255,255,.42);
      border-color: rgba(255,255,255,.6);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }
    .seg-btn:hover::before {
      opacity: .55;
      transform: scale(0.9);
    }
    .seg-btn:hover::after { opacity: 1; }

    .seg-btn.active {
      background: linear-gradient(165deg,
        #FFFFFF 0%,
        rgba(241,248,255,.97) 55%,
        rgba(232,245,252,.94) 100%);
      color: var(--tab-c, var(--blue-dark));
      border-color: rgba(255,255,255,.92);
      font-weight: 700;
      box-shadow:
        0 0 0 0.5px var(--tab-glow, rgba(41,171,226,.14)),
        0 1px 3px rgba(7,25,46,.07),
        0 4px 14px rgba(7,25,46,.07),
        0 8px 22px rgba(7,25,46,.05),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -0.5px 0 rgba(7,25,46,.04);
    }
    .seg-btn.active::before {
      opacity: 1;
      transform: scale(1.15);
      box-shadow: 0 0 7px 1px var(--tab-c, var(--blue));
    }
    .seg-btn.active::after { opacity: 1; }

    /* Tab panes */
    .dash-pane {
      display: none;
      padding: 18px 20px 18px;
      height: 568px;
      overflow: hidden;
      position: relative; /* anchor for .dash-pane-link overlay */
    }
    .dash-pane.active {
      display: block;
      animation: pane-in .35s var(--ease);
    }
    @keyframes pane-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .6; transform: scale(1.3); }
    }

    /* KPI block */
    .kpi-block { margin-bottom: 16px; }
    .kpi-row { display: flex; align-items: baseline; gap: 8px; }
    .kpi-val {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1;
      letter-spacing: -1.5px;
    }
    .kpi-trend {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 6px;
    }
    .kpi-trend.up { color: #15803D; background: rgba(34,197,94,.10); }
    .kpi-trend.up::before { content: '↑'; }
    .kpi-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
      font-weight: 400;
      letter-spacing: .05px;
    }

    /* Data rows */
    .d-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid rgba(0,0,0,.03);
    }
    .d-row:last-child { border-bottom: none; }
    .d-av {
      width: 32px; height: 32px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-h); font-size: 11px; font-weight: 800;
      color: #fff; flex-shrink: 0;
    }
    .d-info { flex: 1; min-width: 0; }
    .d-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.2; }
    .d-meta { font-size: 12px; color: var(--muted); font-weight: 400; }
    .d-val {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      white-space: nowrap;
    }
    .d-badge{
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 100px;
      white-space: nowrap;
      letter-spacing: .2px;
    }
    .badge-green{ background: rgba(34,197,94,.10); color: #15803D; }
    .badge-blue{ background: rgba(41,171,226,.10); color: var(--blue-dark); }
    .badge-orange{ background: rgba(249,115,22,.10); color: #9A330A; }
    .badge-gray{ background: rgba(94,122,147,.08); color: var(--muted); }
    .badge-purple{ background: rgba(123,33,162,.08); color: #7B21A2; }

    /* Progress bars (Benefits) */
    .prog-stack { display: flex; flex-direction: column; gap: 10px; }
    .prog-item { display: flex; align-items: center; gap: 10px; }
    .prog-label{
      font-size: 11.5px; font-weight: 500; color: var(--muted);
      width: 72px; flex-shrink: 0;
    }
    .prog-bar {
      flex: 1; height: 8px;
      background: rgba(0,0,0,.04);
      border-radius: 100px;
      overflow: hidden;
      position: relative;
    }
    .prog-fill {
      height: 100%;
      border-radius: 100px;
      transition: width .8s var(--ease);
      position: relative;
    }
    .prog-fill::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 100%);
      border-radius: 100px 100px 0 0;
    }
    .prog-pct {
      font-size: 11.5px; font-weight: 700; color: var(--navy);
      width: 32px; text-align: right; font-family: var(--font-h);
    }

    /* Dashboard footer */
    .dash-footer {
      padding: 10px 20px;
      border-top: 1px solid rgba(0,0,0,.03);
      display: flex;
      align-items: center;
      gap: 6px 10px;
      background: rgba(255,255,255,.4);
      flex-wrap: wrap;
    }
    .dash-foot-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
    }
    .dash-foot-txt {
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
      flex: 1 1 60%;
      min-width: 0;
      line-height: 1.35;
    }

    /* ── Click-through pattern for the dashboard ─────────────────
       • {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      border-radius: inherit;
      background: transparent;
      text-indent: -9999px;
      overflow: hidden;
      white-space: nowrap;
      transition: background .25s var(--ease);
    }
    .dash-pane-link:hover { background: rgba(41,171,226,.025); }
    .dash-pane-link:focus-visible {
      outline: 2px solid rgba(41,171,226,.6);
      outline-offset: -6px;
      border-radius: 14px;
    }
    /* Promoted sub-items sit above the overlay and get their own
       hover affordance — subtle tint + tiny horizontal nudge. */
    a.dash-sublink {
      position: relative;
      z-index: 2;
      text-decoration: none;
      color: inherit;
      transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
    }
    a.dash-sublink:hover {
      background: rgba(41,171,226,.05) !important;
    }
    a.dash-sublink:focus-visible {
      outline: 2px solid rgba(41,171,226,.55);
      outline-offset: 2px;
      border-radius: 10px;
    }
    a.tl-item.dash-sublink { border-radius: 8px; padding-left: 4px; padding-right: 4px; margin-left: -4px; margin-right: -4px; }
    a.tl-item.dash-sublink:hover { transform: translateX(3px); }
    a.d-row.dash-sublink { border-radius: 8px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
    a.enroll-card.dash-sublink { display: block; }

    /* Footer "View [service] →" CTA */
    .dash-view-more {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-b);
      font-size: 10.5px;
      font-weight: 700;
      color: var(--blue-dark);
      text-decoration: none;
      letter-spacing: .01em;
      padding: 4px 10px 4px 11px;
      border-radius: 100px;
      background: rgba(41,171,226,.09);
      border: 1px solid rgba(41,171,226,.22);
      white-space: nowrap;
      flex-shrink: 0;
      margin-left: auto;
      transition: all .22s var(--ease);
    }
    .dash-view-more svg {
      width: 10px; height: 10px;
      stroke: currentColor; fill: none; stroke-width: 2.6;
      transition: transform .22s var(--ease);
    }
    .dash-view-more:hover {
      background: rgba(41,171,226,.16);
      border-color: rgba(41,171,226,.4);
      color: var(--blue-dark);
    }
    .dash-view-more:hover svg { transform: translateX(2px); }
    .dash-view-more:focus-visible {
      outline: 2px solid rgba(41,171,226,.55);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      a.dash-sublink:hover { transform: none; }
      .dash-view-more:hover svg { transform: none; }
    }

    /* Ring chart (Benefits donut) */
    .ring-chart { width: 64px; height: 64px; flex-shrink: 0; }
    .ring-bg { fill: none; stroke: rgba(0,0,0,.04); stroke-width: 5; }
    .ring-fill {
      fill: none; stroke-width: 5; stroke-linecap: round;
      transform: rotate(-90deg); transform-origin: center;
      transition: stroke-dashoffset .8s var(--ease);
    }
    .ring-text { font-family: var(--font-h); font-size: 14px; font-weight: 800; fill: var(--navy); text-anchor: middle; dominant-baseline: central; }
    .ring-sub { font-family: var(--font-b); font-size: 6.5px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; font-weight: 500; }

    /* HR Tab — Timeline */
    .timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 20px; }
    .timeline::before {
      content: '';
      position: absolute; left: 5px; top: 8px; bottom: 8px;
      width: 1.5px;
      background: linear-gradient(180deg, var(--blue) 0%, rgba(41,171,226,.15) 100%);
      border-radius: 100px;
    }
    .tl-item { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; position: relative; }
    .tl-dot {
      position: absolute; left: -20px; top: 12px;
      width: 11px; height: 11px; border-radius: 50%;
      border: 2px solid var(--white); flex-shrink: 0;
    }
    .tl-dot-blue { background: var(--blue); box-shadow: 0 0 0 3px rgba(41,171,226,.15); }
    .tl-dot-green { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
    .tl-dot-orange { background: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
    .tl-content { flex: 1; }
    .tl-title { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
    .tl-desc { font-size: 10.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; }
    .tl-time { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; margin-top: 2px; }

    /* Time Tab — Clock grid */
    .clock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
    .clock-card {
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(12px) saturate(1.3);
      -webkit-backdrop-filter: blur(12px) saturate(1.3);
      border: 1px solid rgba(255,255,255,.8);
      box-shadow: 0 0 0 1px rgba(226,236,244,.45), 0 1px 4px rgba(7,25,46,.04), 0 4px 12px rgba(7,25,46,.03);
      border-radius: 12px; padding: 10px 12px;
      display: flex; align-items: center; gap: 8px;
      transition: all .2s var(--ease);
      position: relative; overflow: hidden;
    }
    .clock-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(155deg, rgba(255,255,255,.45) 0%, transparent 50%);
      pointer-events: none;
    }
    .clock-card:hover { background: rgba(41,171,226,.06); border-color: rgba(41,171,226,.22); box-shadow: 0 0 0 1px rgba(41,171,226,.18), 0 4px 16px rgba(41,171,226,.08); }
    .clock-av {
      width: 28px; height: 28px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-h); font-size: 9.5px; font-weight: 800;
      color: #fff; flex-shrink: 0;
    }
    .clock-info { flex: 1; min-width: 0; }
    .clock-name { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .clock-time { font-size: 10px; color: var(--muted); font-weight: 400; }
    .clock-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .cs-in { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,.3); }
    .cs-out { background: rgba(94,122,147,.25); }

    /* Integration spoke nodes and connector lines removed 2026-04-08 — were display:none dead code. */
    /* Global badge color classes preserved (used by dashboard .d-badge) */
    { color: #991B1B; background: rgba(220,38,38,.10); }
    .badge-blue-dark{ color: #1E3A5F; background: rgba(37,99,235,.10); }
    .badge-orange{ color: #9A3412; background: rgba(249,115,22,.10); }
    .badge-purple{ color: #6B21A8; background: rgba(168,85,247,.10); }
    .badge-cyan{ color: #155E75; background: rgba(8,145,178,.10); }
    .badge-amber{ color: #92400E; background: rgba(245,158,11,.10); }

    /* T&A Timecard Table */
    .timecard-table { width: 100%; border-spacing: 0; margin-top: 12px; }
    .timecard-table thead th {
      font-size: 10px; font-weight: 700;
      color: var(--muted); text-align: left;
      padding: 0 0 8px 0; border-bottom: 1px solid rgba(0,0,0,.05);
      text-transform: uppercase; letter-spacing: .3px;
    }
    .timecard-table tbody td {
      font-size: 11.5px; padding: 8px 0;
      border-bottom: 1px solid rgba(0,0,0,.03);
    }
    .timecard-table tbody tr:last-child td { border-bottom: none; }
    .tc-emp { font-weight: 600; color: var(--text); }
    .tc-time { color: var(--muted); font-weight: 400; }
    .tc-hrs { font-family: var(--font-h); font-weight: 700; color: var(--navy); text-align: right; }
    .tc-badge{ font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 100px; white-space: nowrap; }
    /* OT badge — was orange #F97316 ~3:1 on light bg (AA fail).
       Bumped to #9A330A deep-orange (AA-compliant, NOT banned #C2410C). */
    .tc-badge.ot { background: rgba(249,115,22,.14); color: #9A330A; }
    .tc-badge.reg { background: rgba(34,197,94,.12); color: #15803D; }

    /* Benefits Enrollment UI */
    .enroll-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
    .enroll-card {
      background: rgba(255,255,255,.65);
      backdrop-filter: blur(12px) saturate(1.3);
      -webkit-backdrop-filter: blur(12px) saturate(1.3);
      border: 1px solid rgba(255,255,255,.8);
      box-shadow: 0 0 0 1px rgba(226,236,244,.45), 0 1px 4px rgba(7,25,46,.05), 0 4px 12px rgba(7,25,46,.04);
      border-radius: 12px; padding: 12px;
      transition: all .2s var(--ease);
      position: relative; overflow: hidden;
    }
    .enroll-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(155deg, rgba(255,255,255,.4) 0%, transparent 50%);
      pointer-events: none;
    }
    .enroll-card:hover { background: rgba(168,85,247,.05); border-color: rgba(168,85,247,.25); box-shadow: 0 0 0 1px rgba(168,85,247,.2), 0 4px 16px rgba(168,85,247,.10); }
    .enroll-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .enroll-plan { font-size: 12px; font-weight: 700; color: var(--text); }
    .enroll-pct { font-size: 10px; font-weight: 700; color: var(--green); }
    .enroll-bar {
      height: 5px; background: rgba(0,0,0,.04); border-radius: 100px;
      overflow: hidden; position: relative;
    }
    .enroll-fill {
      height: 100%; background: linear-gradient(90deg, #A855F7, #C084FC);
      border-radius: 100px; transition: width .8s var(--ease);
    }
    .enroll-count { font-size: 10px; color: var(--muted); margin-top: 4px; }

    /* Carrier Logos Row */
    .carrier-logos {
      display: flex; align-items: center; gap: 12px; margin-top: 12px;
      padding: 10px; border-radius: 10px; background: rgba(0,0,0,.02);
    }
    .carrier-logos span {
      font-size: 10px; font-weight: 600; color: var(--muted);
      text-transform: uppercase; letter-spacing: .3px;
    }
    .carrier-mark {
      flex: 1; display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: var(--text);
      padding: 6px 10px; border-radius: 6px;
      background: rgba(255,255,255,.6);
    }

    /* ── SECTION CORE ────────────────────────────────────── */
    .sec { padding: var(--sec-pad) 32px; }
    .wrap { max-width: 1200px; margin: 0 auto; }
    .sec-label{
      font-family: var(--font-b); font-size: 11.5px; font-weight: 700;
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--blue-dark); margin-bottom: 14px; display: block;
    }
    .sec-h2 {
      font-family: var(--font-h); font-size: var(--h2-size);
      font-weight: 800; letter-spacing: -1.5px;
      color: var(--navy); line-height: 1.08; margin-bottom: 18px;
    }
    .sec-p {
      font-family: var(--font-b); font-size: 16px; color: var(--muted);
      max-width: 560px; line-height: 1.72;
    }
    .sec-head { margin-bottom: var(--sec-gap); }


    /* ── SERVICES ───────────────────────────────────────── */
    /* v2 height tune: normalized to --sec-pad (80px) — was 96/96, broke
       the vertical rhythm with the rest of the page. */
    .svc-sec {
      padding-top: var(--sec-pad);
      padding-bottom: var(--sec-pad);
      background: #EEF3F8; /* warm off-white — retreats so cards float */
      position: relative;
    }
    .svc-sec::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 15% 0%, rgba(41,171,226,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 90% 100%, rgba(249,115,22,0.04) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    .svc-sec > .wrap { position: relative; z-index: 1; }
    .svc-sec .sec-head { margin-bottom: 44px; }
    .svc-sec .sec-p { max-width: 580px; font-size: 16px; }
    .svc-sec .sec-label{ color:#1479A3; letter-spacing: .2em; }

    /* Brand gradient text */
    .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── SVC BENTO — 1 hero + 4 peer cards, Golden Card spec ── */
    .svc-bento {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .svc-card {
      position: relative;
      background: #FFFFFF;
      border: 1px solid rgba(13,24,41,.09);
      border-radius: 10px;
      overflow: hidden;
      isolation: isolate;
      text-decoration: none;
      color: inherit;
      display: flex; flex-direction: column;
      box-shadow:
        0 1px 2px rgba(13,24,41,.04),
        0 8px 24px -12px rgba(13,24,41,.18),
        0 16px 40px -20px rgba(13,24,41,.12);
      transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
    }
    /* Left-edge accent rule (Golden Card signature) */
    .svc-card::before {
      content: "";
      position: absolute;
      left: 0; top: 20px; bottom: 20px;
      width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%);
      border-radius: 0 3px 3px 0;
      transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
      z-index: 3;
    }
    /* Soft corner glow in accent color */
    .svc-card::after {
      content: "";
      position: absolute;
      top: -80px; left: -80px;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(var(--accent-rgb), .12) 0%, transparent 65%);
      pointer-events: none;
      opacity: .55;
      transition: opacity 180ms ease-out;
      z-index: 0;
    }
    .svc-card > * { position: relative; z-index: 1; }
    .svc-card:hover {
      transform: translateY(-3px);
      border-color: rgba(var(--accent-rgb), .38);
      box-shadow:
        0 1px 2px rgba(13,24,41,.05),
        0 14px 32px -14px rgba(var(--accent-rgb), .22),
        0 18px 36px -18px rgba(13,24,41,.18);
    }
    .svc-card:hover::before { width: 4px; top: 10px; bottom: 10px; }
    .svc-card:hover::after { opacity: 1; }

    /* HERO card spans full row */
    .svc-hero {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 54% 46%;
      min-height: 440px;
    }
    /* Hero story (LEFT now) */
    .svc-hero-story {
      padding: 44px 48px 36px 48px;
      display: flex; flex-direction: column;
      order: 0;
    }

    /* Product-UI frame (right) — replaces advisor portrait */
    .svc-hero-ui {
      position: relative;
      padding: 44px 48px 44px 20px;
      display: flex; align-items: center; justify-content: center;
      order: 1;
      background:
        linear-gradient(135deg, rgba(23,121,184,0.05) 0%, rgba(41,171,226,0.02) 100%);
    }
    .ui-frame {
      width: 100%; max-width: 420px;
      background: #FFFFFF;
      border: 1px solid rgba(13,24,41,.10);
      border-radius: 12px;
      overflow: hidden;
      box-shadow:
        0 1px 2px rgba(13,24,41,.04),
        0 14px 32px -12px rgba(13,24,41,.18),
        0 28px 56px -20px rgba(13,24,41,.12);
    }
    .ui-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px;
      background: #F8F9FB;
      border-bottom: 1px solid rgba(13,24,41,.06);
    }
    .ui-dot { width: 10px; height: 10px; border-radius: 50%; }
    .ui-title {
      margin-left: 10px;
      font-family: var(--font-b);
      font-size: 11px; font-weight: 600; color: #64748B;
      letter-spacing: .01em;
    }
    .ui-body { padding: 16px 18px 18px; }
    .ui-row--head {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(13,24,41,.05);
      margin-bottom: 12px;
    }
    .ui-cell-l {
      font-family: var(--font-b);
      font-size: 11px; font-weight: 700; color: #07192E;
      letter-spacing: .04em; text-transform: uppercase;
    }
    .ui-cell-r {
      font-family: var(--font-b);
      font-size: 11px; color: #64748B;
    }
    .ui-kpi {
      display: flex; flex-direction: column;
      padding: 6px 0 14px;
      border-bottom: 1px solid rgba(13,24,41,.05);
      margin-bottom: 10px;
    }
    .ui-kpi-val {
      font-family: var(--font-h);
      font-size: 30px; font-weight: 800; color: #07192E;
      letter-spacing: -.02em;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }
    .ui-kpi-lbl {
      font-family: var(--font-b);
      font-size: 11.5px; color: #64748B;
      margin-top: 4px;
    }
    .ui-line {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0;
      font-family: var(--font-b);
      font-size: 12.5px;
    }
    .ui-line + .ui-line { border-top: 1px solid rgba(13,24,41,.04); }
    .ui-lbl { color: #475569; }
    .ui-val {
      font-weight: 700; color: #07192E;
      font-variant-numeric: tabular-nums;
    }
    .ui-val.ok {
      color: #047857;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .ui-val.ok::before {
      content: ""; width: 6px; height: 6px;
      border-radius: 50%; background: #10B981;
    }

    .svc-hero-bullets {
      list-style: none; margin: 0 0 24px; padding: 0;
      display: flex; flex-direction: column; gap: 9px;
    }
    .svc-hero-bullets li {
      position: relative; padding-left: 22px;
      font-family: var(--font-b);
      font-size: 13.5px; color: #3D5266;
      line-height: 1.45;
    }
    .svc-hero-bullets li::before {
      content: "";
      position: absolute;
      left: 0; top: 7px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, var(--accent) 0 3px, transparent 3.5px),
        rgba(var(--accent-rgb), .10);
    }
    .svc-hero-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-b);
      font-size: 11px; font-weight: 800; color: var(--accent);
      letter-spacing: .18em; text-transform: uppercase;
      margin-bottom: 18px;
    }
    .svc-hero-eyebrow .bar { width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
    .svc-hero-h3 {
      font-family: var(--font-h);
      font-size: 34px; font-weight: 800; color: #07192E;
      letter-spacing: -.025em; line-height: 1.08;
      margin: 0 0 16px;
    }
    .svc-hero-h3 .hi { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .svc-hero-h3 .hi-orange { color: #F97316; }
    .svc-hero-p {
      font-family: var(--font-b);
      font-size: 14.5px; color: #5B6B7E;
      line-height: 1.6; margin: 0 0 22px;
      max-width: 52ch;
    }
    .svc-hero-cta {
      font-family: var(--font-b);
      font-size: 14px; font-weight: 700;
      color: var(--accent);
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: auto;
      transition: gap .18s ease-out;
    }
    .svc-hero-cta:hover { gap: 10px; }

    /* PEER cards — 1 col each, stacked UI inset + text */
    .svc-peer {
      grid-column: span 1;
      min-height: 360px;
    }
    .svc-peer-visual {
      background: linear-gradient(135deg, rgba(var(--accent-rgb),.06) 0%, rgba(var(--accent-rgb),.02) 100%);
      border-bottom: 1px solid rgba(13,24,41,.06);
      padding: 24px 22px 20px;
      min-height: 110px;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .svc-peer-ico {
      width: 44px; height: 44px;
      fill: none;
      stroke: var(--accent);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .85;
      transition: transform 180ms ease-out, opacity 180ms ease-out;
    }
    .svc-card:hover .svc-peer-ico { transform: translateY(-2px); opacity: 1; }
    .svc-peer-body {
      padding: 20px 22px 22px;
      display: flex; flex-direction: column;
      flex: 1;
    }
    .svc-peer-eyebrow {
      font-family: var(--font-b);
      font-size: 10px; font-weight: 700;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }
    .svc-peer-h4 {
      font-family: var(--font-h);
      font-size: 19px; font-weight: 800;
      letter-spacing: -.02em; color: #07192E;
      line-height: 1.2; margin: 0 0 6px;
    }
    .svc-peer-p {
      font-family: var(--font-b);
      font-size: 13px; color: #5B6B7E;
      line-height: 1.55; margin: 0 0 14px;
      flex-grow: 1;
    }
    .svc-peer-cta {
      font-family: var(--font-b);
      font-size: 12.5px; font-weight: 700;
      color: var(--accent);
      display: inline-flex; align-items: center; gap: 5px;
      padding-top: 14px;
      margin-top: auto;
      border-top: 1px solid rgba(13,24,41,.06);
      transition: gap 160ms ease-out;
    }
    .svc-peer-cta:hover { gap: 9px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1080px) {
      .svc-bento { grid-template-columns: repeat(2, 1fr); }
      .svc-hero { grid-column: 1 / -1; }
    }
    @media (max-width: 760px) {
      .svc-hero { grid-template-columns: 1fr; min-height: 0; }
      .svc-hero-ui { padding: 24px 24px 32px; order: 1; }
      .svc-hero-story { padding: 28px 24px 16px; order: 0; }
      .svc-hero-h3 { font-size: 26px; }
    }
    @media (max-width: 520px) {
      .svc-bento { grid-template-columns: 1fr; }
      .svc-sec { padding: 64px 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .svc-card { transition: none; }
      .svc-card:hover { transform: none; }
    }

    .arr { transition: transform 160ms ease-out; }

    /* ── MODEL EXPLAINER (full-width bar) ── */
    .svc-model-explainer {
      grid-column: span 6;
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
      border-radius: 20px;
      padding: 44px 56px;
      display: grid;
      grid-template-columns: 1fr 1px 1fr auto;
      gap: 0 48px;
      align-items: center;
      position: relative; overflow: hidden;
    }
    .svc-model-explainer::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(41,171,226,.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .svc-model-explainer > * { position: relative; z-index: 1; }
    .model-divider {
      width: 1px; height: 100%;
      background: rgba(255,255,255,.1);
      align-self: stretch;
    }
    .model-option { display: flex; flex-direction: column; gap: 10px; }
    .model-label{
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-b);
      font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
      color: var(--blue);
      background: rgba(41,171,226,.12);
      border: 1px solid rgba(41,171,226,.22);
      padding: 5px 14px; border-radius: 6px;
      width: fit-content;
    }
    .model-option h4,
    .model-option h5 {
      font-family: var(--font-h); font-size: 18px; font-weight: 700;
      color: #fff; margin: 0; line-height: 1.2;
    }
    .model-option p {
      font-family: var(--font-b); font-size: 14px;
      color: rgba(255,255,255,.88); line-height: 1.6; margin: 0;
    }
    .model-cta {
      display: flex; flex-direction: column;
      align-items: center; gap: 14px;
      padding-left: 8px; text-align: center;
    }
    .model-cta-note {
      font-family: var(--font-b); font-size: 13px;
      color: rgba(255,255,255,.74); line-height: 1.5;
    }

    /* ── TESTIMONIALS ────────────────────────────────────── */
    .testi-sec {
      background: var(--white); padding: var(--sec-pad) 32px;
    }
    .testi-sec .sec-head { margin-bottom: 56px; }
    .testi-sec .sec-label{ color: var(--blue-dark); }
    .testi-sec .sec-h2 { color: var(--navy); }
    .testi-sec .sec-p { color: var(--muted); }

    /* Featured quote card (navy) */
    .testi-featured {
      background: var(--navy);
      border-radius: var(--radius-lg);
      padding: 52px 52px 44px;
      position: relative; overflow: hidden;
      margin-bottom: 20px;
    }
    .testi-featured::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 55% 65% at 5% 50%, rgba(41,171,226,.10) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 95% 80%, rgba(23,121,184,.08) 0%, transparent 50%);
      pointer-events: none;
    }
    .testi-featured > * { position: relative; z-index: 1; }
    .testi-feat-top {
      display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start;
    }
    .testi-feat-mark {
      font-family: Georgia, serif; font-size: 96px; line-height: .7;
      color: var(--blue); opacity: .35; position: absolute; top: 36px; left: 44px;
      pointer-events: none; font-weight: 700; user-select: none;
    }
    .testi-feat-q {
      font-family: var(--font-b);
      font-size: 17px;
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 400; font-style: normal;
      line-height: 1.75; color: rgba(255,255,255,.90);
      padding-top: 32px;
    }
    .testi-feat-metric {
      background: rgba(41,171,226,.12);
      border: 1px solid rgba(41,171,226,.22);
      border-radius: 16px; padding: 20px 24px;
      text-align: center; min-width: 130px; flex-shrink: 0;
    }
    .tfm-num {
      font-family: var(--font-h); font-size: 32px; font-weight: 800;
      color: var(--blue); line-height: 1; display: block; margin-bottom: 4px;
    }
    .tfm-label{
      font-family: var(--font-b); font-size: 10.5px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1px;
      color: rgba(255,255,255,.76);
    }
    .testi-feat-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 36px; padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .testi-feat-author { display: flex; align-items: center; gap: 14px; }
    .testi-feat-avatar {
      width: 48px; height: 48px; border-radius: 14px;
      background: var(--grad-blue); display: flex; align-items: center;
      justify-content: center; font-family: var(--font-h); font-size: 18px;
      font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .tfa-name { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: #fff; }
    .tfa-role { font-family: var(--font-b); font-size: 12.5px; color: rgba(255,255,255,.76); margin-top: 1px; }
    .testi-feat-stars { font-size: 18px; letter-spacing: 3px; color: #F7D44C; }

    /* Supporting cards row */
    .testi-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
    }
    .testi-card {
      background: var(--off);
      border: 1px solid rgba(13,24,41,.06);
      border-radius: var(--radius-card); padding: 32px 36px;
      transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
      position: relative; overflow: hidden;
    }
    .testi-card::before {
      content: '';
      position: absolute; left: 0; top: 20px; bottom: 20px;
      width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--blue) 15%, var(--blue) 85%, transparent 100%);
      border-radius: 0 3px 3px 0;
      opacity: .5;
      transition: opacity 180ms ease-out, width 180ms ease-out;
    }
    .testi-card:hover { border-color: rgba(41,171,226,.20); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .testi-card:hover::before { opacity: 1; width: 4px; }
    .tc-mark {
      font-family: Georgia, serif; font-size: 52px; line-height: .8;
      color: var(--blue); opacity: .2; font-weight: 700;
      margin-bottom: 6px; display: block; user-select: none;
    }
    .testi-q {
      font-family: var(--font-b); font-size: 15px; font-style: normal;
      color: #475569; line-height: 1.75; margin-bottom: 28px; font-weight: 400;
    }
    .stars { font-size: 14px; letter-spacing: 2px; color: #F7D44C; margin-bottom: 16px; display: block; }
    .testi-author { display: flex; align-items: center; gap: 12px; }
    .t-avatar {
      width: 42px; height: 42px; border-radius: 12px;
      background: var(--grad); display: flex; align-items: center;
      justify-content: center; font-family: var(--font-h); font-size: 15px;
      font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .a-name { font-family: var(--font-h); font-size: 14px; font-weight: 700; color: var(--navy); }
    .a-role { font-family: var(--font-b); font-size: 12px; color: var(--muted); margin-top: 1px; }

    /* Trust bar under testimonials */
    .testi-trust {
      display: flex; align-items: center; justify-content: center; gap: 32px;
      margin-top: 36px; padding: 20px 32px;
      background: var(--off); border-radius: var(--radius-card);
      border: 1px solid rgba(13,24,41,.06);
    }
    .ttrust-item { display: flex; align-items: center; gap: 8px; }
    .ttrust-stars { font-size: 14px; letter-spacing: 1px; color: #F7D44C; }
    .ttrust-txt { font-family: var(--font-b); font-size: 13px; font-weight: 600; color: var(--navy); }
    .ttrust-divider { width: 1px; height: 28px; background: var(--border); }

    /* ── CTA — full-width commanding close ── */
    .cta-sec {
      padding: 120px 24px; text-align: center;
      background: var(--navy);
      position: relative; overflow: hidden;
    }
    .cta-sec::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 70% at 15% 25%, rgba(41,171,226,.22) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 85% 75%, rgba(123,33,162,.14) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(249,115,22,.10) 0%, transparent 40%);
      pointer-events: none;
    }
    .cta-sec::after {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 180px;
      mix-blend-mode: soft-light;
      opacity: .15;
      pointer-events: none;
    }
    .cta-inner {
      max-width: 960px; margin: 0 auto;
      padding: 96px 56px;
      position: relative; z-index: 1;
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 28px;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      box-shadow:
        0 40px 80px -20px rgba(0,0,0,0.5),
        0 0 0 1px rgba(41,171,226,0.08) inset;
    }
    .cta-phone-link {
      display: inline-block; margin-top: 14px;
      font-size: .92rem; color: rgba(255,255,255,.55);
      text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18);
      padding-bottom: 1px; transition: color 180ms ease-out;
    }
    .cta-phone-link:hover { color: rgba(255,255,255,.85); }
    .cta-trust-row {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-top: 32px;
      font-family: var(--font-b); font-size: 12px; font-weight: 600;
      color: rgba(255,255,255,.40); letter-spacing: .02em;
    }
    .cta-trust-dot { opacity: .3; }
    .cta-inner h2 {
      font-family: var(--font-h); font-size: var(--h2-size);
      font-weight: 800; letter-spacing: -1px; color: #fff;
      line-height: 1.1; margin-bottom: 16px;
    }
    .cta-inner p {
      font-family: var(--font-b); font-size: 16px;
      color: rgba(255,255,255,.65); line-height: 1.68;
      max-width: 440px; margin: 0 auto 36px;
    }
    .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-cta-a {
      font-family: var(--font-h); font-size: 15px; font-weight: 700;
      color: #fff; background: linear-gradient(135deg,#FB923C 0%,#F97316 55%,#EA580C 100%);
      padding: 16px 36px; border-radius: 12px; text-decoration: none;
      transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
      min-height: 52px; display: inline-flex; align-items: center; cursor: pointer;
      box-shadow: 0 0 40px rgba(249,115,22,.28), 0 4px 16px rgba(249,115,22,.32), inset 0 1px 0 rgba(255,255,255,.25);
      position: relative; overflow: hidden; letter-spacing: .01em;
    }
    .btn-cta-a::after {
      content: '';
      position: absolute; top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      transition: left .4s ease; pointer-events: none;
    }
    .btn-cta-a:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 0 1px rgba(41,171,226,.35), 0 12px 36px rgba(41,171,226,.38);
      filter: brightness(1.06);
    }
    .btn-cta-a:hover::after { left: 140%; }
    .btn-cta-b {
      font-family: var(--font-h); font-size: 15px; font-weight: 600;
      color: rgba(255,255,255,.85); background: rgba(255,255,255,.07);
      border: 1.5px solid rgba(255,255,255,.18);
      padding: 15px 30px; border-radius: 12px; text-decoration: none;
      transition: all .22s var(--ease); min-height: 52px;
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    }
    .btn-cta-b:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; transform: translateY(-3px); }
    .btn-cta-c {
      font-family: var(--font-b); font-size: 15px; font-weight: 600;
      color: #fff; background: rgba(255,255,255,.08);
      border: 1.5px solid rgba(255,255,255,.45); border-radius: 14px;
      padding: 14px 32px; text-decoration: none; cursor: pointer;
      transition: all .22s var(--ease); min-height: 52px;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-cta-c:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.72); transform: translateY(-3px); }

    /* ── FOOTER ──────────────────────────────────────────── */
    footer { background: #040E1A; padding: 64px 32px 32px; color: rgba(255,255,255,.72); position: relative; }
    footer::before {
      content: ''; position: absolute; top: -120px; left: 0; right: 0;
      height: 120px; background: linear-gradient(180deg, transparent 0%, #040E1A 100%);
      pointer-events: none;
    }
    .ft { max-width: 1200px; margin: 0 auto; }
    .ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .ft-logo img { height: 36px; width: auto; display: block; margin-bottom: 14px; }
    .ft-tagline{ font-family: var(--font-b); font-size: 13.5px; color: rgba(255,255,255,.30); line-height: 1.65; margin-bottom: 20px; }
    .ft-phone {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-b); font-size: 14.5px; font-weight: 700;
      color: var(--blue); text-decoration: none; transition: color .15s;
    }
    .ft-phone:hover { color: #7DD4F5; }
    .ft-col h4 {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.4px; text-transform: uppercase;
      color: rgba(255,255,255,.70); margin-bottom: 16px;
    }
    .ft-col a {
      display: block; font-family: var(--font-b); font-size: 14px;
      color: rgba(255,255,255,.88); text-decoration: none;
      margin-bottom: 10px; transition: color .15s;
    }
    .ft-col a:hover { color: #fff; }
    .ft-bottom {
      border-top: 1px solid rgba(255,255,255,.06);
      padding-top: 28px; display: flex;
      justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      font-family: var(--font-b); font-size: 12.5px;
    }
    .ft-legal { display: flex; gap: 20px; }
    .ft-legal a { color: rgba(255,255,255,.66); text-decoration: none; transition: color .15s; }
    .ft-legal a:hover { color: #fff; }

    /* ── SCROLL REVEAL ───────────────────────────────────── */
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity .65s var(--ease), transform .65s var(--ease);
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: .08s; }
    .reveal-d2 { transition-delay: .18s; }
    .reveal-d3 { transition-delay: .28s; }
    .reveal-d4 { transition-delay: .38s; }
    .reveal-d5 { transition-delay: .48s; }
    .reveal-d6 { transition-delay: .58s; }
    .reveal-d7 { transition-delay: .68s; }
    .reveal-d8 { transition-delay: .78s; }

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 1100px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-right {
        padding: 0 24px 48px;
        justify-content: center;
      }
      .hero-scene {
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto;
      }
      .dash-main {
        position: static;
        transform: none;
        width: 100%;
      }
      .hero-left { padding: 72px 40px 32px; }
      .svc-model-explainer { grid-column: span 1; }
      .svc-model-explainer {
        grid-template-columns: 1fr;
        padding: 36px 32px;
        gap: 28px 0;
        text-align: center;
      }
      .model-divider { width: 60%; height: 1px; margin: 0 auto; }
      { margin: 0 auto; }
      .model-cta { padding-left: 0; }
      .testi-scroll { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 1024px) {
      nav { display: none; }
      .btn-nav-ghost { display: none; }
      .ham { display: flex; }
      .mob-overlay { display: block; }
      .hero-left { padding: 56px 24px 48px; }
      .sec { padding: 64px 24px; }
      .testi-sec { padding: 64px 24px; }
      .cta-sec { padding: 72px 16px; }
      .cta-inner { padding: 56px 24px; border-radius: 20px; }
      .pain-cards { grid-template-columns: 1fr; }
      .solution-strip { grid-template-columns: 1fr; padding: 40px 32px; gap: 40px; }
      .svc-model-explainer { padding: 28px 20px; }
      .testi-scroll { grid-template-columns: 1fr; }
      .testi-grid { grid-template-columns: 1fr; }
      .testi-feat-top { grid-template-columns: 1fr; }
      .testi-feat-metric { align-self: flex-start; }
      .testi-trust { flex-wrap: wrap; gap: 16px; }
      .ttrust-divider { display: none; }
      .seg-control { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
      .seg-btn { font-size: 12.5px; padding: 11px 10px; min-height: 44px; }
      .ft-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .stats-in { grid-template-columns: repeat(2,1fr); }
      .stat:nth-child(2) { border-right: none; }
      .cta-inner { padding: 48px 28px; }
      .cases-grid { grid-template-columns: 1fr; }
      :root { --glass-shadow: 0 2px 8px rgba(7,25,46,.04), 0 4px 16px rgba(7,25,46,.03); }
    }
    @media (max-width: 480px) {
      .stats-in { grid-template-columns: 1fr 1fr; }
      .ft-top { grid-template-columns: 1fr; }
      /* Base rule now uses em-relative letter-spacing — no override needed. */
    }

    /* WP/Elementor link color override */
    a.btn-hero-primary,
a.btn-primary,
a.btn-hero-secondary,
a.btn-secondary,
a.btn-hero-phone,
a.btn-cta-a,
a.btn-cta-b,
a.btn-cta-c,
a.btn-nav-primary,
a.btn-orange,
.btn-hero-primary,
.btn-primary,
.btn-cta-a { color: #fff !important; text-decoration: none !important; }
    a.btn-hero-phone, .btn-hero-phone { color: var(--navy) !important; text-decoration: none !important; }
    a.btn-hero-secondary, a.btn-secondary { color: var(--navy) !important; text-decoration: none !important; }
    a.btn-cta-b { color: rgba(255,255,255,.9) !important; text-decoration: none !important; }
    a.btn-cta-c { color: #fff !important; text-decoration: none !important; }
    a { text-decoration: none; }

    /* ── HERO GRADIENT ORB ──────────────────────────────── */
    .hero-orb {
      position: absolute;
      width: 520px; height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(41,171,226,.18) 0%, rgba(249,115,22,.10) 45%, transparent 70%);
      top: -120px; right: -80px;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      animation: orbFloat 8s ease-in-out infinite;
    }
    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-30px, 20px) scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-orb { animation: none; }
    }
    @media (max-width: 1024px) {
      .hero-orb { width: 320px; height: 320px; top: -60px; right: -40px; }
    }

    /* ── STICKY MOBILE CTA ──────────────────────────────── */
    .mob-sticky-cta {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 290;
      padding: 12px 16px;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      border-top: 1px solid rgba(226,236,244,.5);
      box-shadow: 0 -4px 24px rgba(7,25,46,.08);
      gap: 10px;
    }
    @media (max-width: 1024px) {
      .mob-sticky-cta { display: flex; }
    }
    .mob-cta-btn {
      flex: 1; text-align: center; padding: 13px 12px;
      border-radius: 10px; font-family: var(--font-b);
      font-size: 14px; font-weight: 700; text-decoration: none;
      transition: all .15s var(--ease);
    }
    .mob-cta-primary {
      background: var(--orange); color: #fff;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .mob-cta-primary:hover { background: #EA6C10; box-shadow: 0 6px 20px rgba(249,115,22,.35); }
    .mob-cta-primary:active { transform: scale(0.97) translateY(1px); }
    .mob-cta-secondary {
      background: rgba(41,171,226,.10); color: var(--blue-dark);
      border: 1.5px solid rgba(41,171,226,.22);
    }
    .mob-cta-secondary:hover { background: rgba(41,171,226,.18); border-color: var(--blue); }

    /* ── CALLBACK WIDGET ────────────────────────────────── */
    .cb-fab {
      position: fixed; bottom: 28px; right: 28px; z-index: 400;
      width: 60px; height: 60px; border-radius: 50%;
      background: var(--orange); border: none; cursor: pointer;
      box-shadow: 0 4px 20px rgba(249,115,22,.35);
      display: flex; align-items: center; justify-content: center;
      transition: transform .2s var(--ease), box-shadow .2s;
    }
    .cb-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(249,115,22,.45); }
    .cb-fab:active { transform: scale(0.95); }
    .cb-fab svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; }
    .cb-fab .cb-x { display: none; }
    .cb-fab.open .cb-phone { display: none; }
    .cb-fab.open .cb-x { display: block; }

    .cb-panel {
      position: fixed; bottom: 100px; right: 28px; z-index: 399;
      width: 320px; background: var(--white);
      border-radius: 20px; box-shadow: var(--shadow-xl);
      border: 1px solid var(--border);
      padding: 28px 24px;
      transform: translateY(16px) scale(0.95);
      opacity: 0; pointer-events: none;
      transition: all .25s var(--ease);
    }
    .cb-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
    .cb-panel h3 {
      font-family: var(--font-h); font-size: 18px; font-weight: 800;
      color: var(--navy); margin-bottom: 6px;
    }
    .cb-panel p {
      font-family: var(--font-b); font-size: 13.5px; color: var(--muted);
      line-height: 1.6; margin-bottom: 20px;
    }
    .cb-panel input {
      width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
      border-radius: 10px; font-family: var(--font-b); font-size: 14px;
      color: var(--text); margin-bottom: 12px; outline: none;
      transition: border-color .15s;
    }
    .cb-panel input:focus { border-color: var(--blue); }
    .cb-panel .cb-submit {
      width: 100%; padding: 13px; border: none; border-radius: 10px;
      background: var(--orange); color: #fff;
      font-family: var(--font-b); font-size: 14px; font-weight: 700;
      cursor: pointer; transition: background .15s;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .cb-panel .cb-submit:hover { background: #EA6C10; }
    .cb-panel .cb-or {
      text-align: center; font-family: var(--font-b); font-size: 12px;
      color: var(--muted); margin: 14px 0;
    }
    .cb-panel .cb-call-link {
      display: block; text-align: center;
      font-family: var(--font-b); font-size: 14px; font-weight: 600;
      color: var(--blue-dark); text-decoration: none;
    }
    .cb-panel .cb-call-link:hover { color: var(--blue); }
    @media (max-width: 1024px) {
      .cb-fab { bottom: 84px; right: 16px; width: 54px; height: 54px; }
      .cb-panel { bottom: 150px; right: 16px; width: calc(100vw - 32px); }
    }

    /* ── TESTIMONIAL HEADSHOT ───────────────────────────── */
    .testi-feat-avatar-img {
      width: 48px; height: 48px; border-radius: 14px;
      object-fit: cover; flex-shrink: 0;
    }
    .t-avatar-img {
      width: 42px; height: 42px; border-radius: 12px;
      object-fit: cover; flex-shrink: 0;
    }
    .testi-metric-badge{
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.18);
      border-radius: 8px; padding: 5px 10px; margin-top: 12px;
      font-family: var(--font-b); font-size: 12px; font-weight: 600;
      color: #16A34A;
    }
    .testi-metric-badge svg{ width: 13px; height: 13px; stroke: #16A34A; fill: none; stroke-width: 2.5; }

    /* ══════════════════════════════════════════════════════
       GOD MODE POLISH — ADDITIONS
    ══════════════════════════════════════════════════════ */

    /* ── HERO ENTRANCE ANIMATION ────────────────────────── */
    @keyframes heroSlide {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-h1   { animation: heroSlide .72s cubic-bezier(.22,1,.36,1) .05s both; }
    .hero-p    { animation: heroSlide .72s cubic-bezier(.22,1,.36,1) .18s both; }
    .hero-ctas { animation: heroSlide .72s cubic-bezier(.22,1,.36,1) .30s both; }
    .trust-row { animation: heroSlide .72s cubic-bezier(.22,1,.36,1) .42s both; }



    /* ── STAT FADE ANIMATION ────────────────────────────── */
    @keyframes statFade {
      from { opacity: 0; transform: scale(0.8); }
      to   { opacity: 1; transform: scale(1); }
    }
    .stat.revealed .stat-n {
      animation: statFade .55s cubic-bezier(.34,1.56,.64,1) both;
    }

    /* ── TESTIMONIAL CARDS — BORDER + QUOTE MARK ────────── */
    .testi-card {
      border-left: 3px solid var(--blue);
    }
    .tc-mark {
      background: linear-gradient(135deg, var(--blue) 0%, #1779B8 60%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 1;
      font-size: 64px;
    }

    /* ── CTA SECTION — NOISE TEXTURE ───────────────────── */
    .cta-inner::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 200px 200px;
      border-radius: 28px;
      pointer-events: none;
      z-index: 0;
    }

    /* ── GLOBAL BUTTON SHIMMER ──────────────────────────────
       Removed page-scoped .btn-primary shimmer override — canonical
       VSHR gradient + shimmer now lives in public/buttons-v2.css and
       applies sitewide. Kept .btn-hero-primary, .btn-orange overrides
       (different selectors not covered by buttons-v2.css). --- */
    .btn-hero-primary {
      position: relative; overflow: hidden;
    }
    .btn-hero-primary::after {
      content: '';
      position: absolute; top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      transition: left .4s ease; pointer-events: none;
    }
    .btn-hero-primary:hover::after { left: 140%; }
    .btn-orange {
      position: relative; overflow: hidden;
    }
    .btn-orange::after {
      content: '';
      position: absolute; top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
      transition: left .4s ease; pointer-events: none;
    }
    .btn-orange:hover::after { left: 140%; }

    /* ── SECTION BREATHING ROOM ─────────────────────────── */
    @media (min-width: 769px) {
      .sec,
      .testi-sec,
      .cases-sec,
      .resources-sec,
      .cta-sec {
        padding-top: 96px;
        padding-bottom: 96px;
      }
    }
    @media (max-width: 1024px) {
      .sec,
      .testi-sec,
      .cases-sec,
      .resources-sec,
      .cta-sec {
        padding-top: 64px;
        padding-bottom: 64px;
      }
    }

    /* ── INDUSTRY ICONS — COLORED CIRCLES + HOVER LIFT ── */
    .ind-ico {
      width: 52px; height: 52px;
      background: linear-gradient(135deg, rgba(41,171,226,.12) 0%, rgba(23,121,184,.08) 100%);
      border: 1.5px solid rgba(41,171,226,.18);
      box-shadow: 0 2px 8px rgba(41,171,226,.12);
      transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease;
    }
    .ind-card:hover .ind-ico {
      transform: translateY(-4px) scale(1.08);
      box-shadow: 0 8px 20px rgba(41,171,226,.22);
    }

    /* ── YOUR TEAM SECTION ──────────────────────────── */
    .advisor-sec {
      background: linear-gradient(135deg, #07192E 0%, #0D2B45 100%);
      padding: 96px 32px;
      position: relative;
      overflow: hidden;
    }
    .advisor-sec::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 65% 55% at -5% 50%, rgba(41,171,226,.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 105% 50%, rgba(249,115,22,.10) 0%, transparent 50%),
        radial-gradient(ellipse 40% 50% at 50% -10%, rgba(23,121,184,.12) 0%, transparent 55%);
      pointer-events: none;
    }
    .advisor-sec::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(41,171,226,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41,171,226,.04) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    .advisor-sec > .wrap { position: relative; z-index: 2; }

    .advisor-head {
      text-align: center; margin-bottom: 64px;
    }
    .advisor-head .sec-label{
      color: rgba(125,212,245,.85);
      margin-bottom: 16px;
    }
    .advisor-h2 {
      font-family: var(--font-h);
      font-size: 30px;
      font-size: clamp(30px, 4vw, 52px);
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1.08;
      color: #fff;
      margin-bottom: 16px;
    }
    .advisor-h2 .accent {
      background: linear-gradient(135deg, var(--blue) 0%, #1779B8 45%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .advisor-sub {
      font-family: var(--font-b);
      font-size: 17px;
      color: rgba(255,255,255,.68);
      max-width: 540px;
      margin: 0 auto;
      line-height: 1.65;
    }

    .advisor-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 56px;
    }
    .advisor-card {
      background: rgba(255,255,255,.04);
      border: 1.5px solid rgba(41,171,226,.18);
      border-radius: 22px;
      padding: 40px 36px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease;
    }
    .advisor-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(145deg, rgba(41,171,226,.06) 0%, transparent 60%);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }
    .advisor-card:hover {
      transform: translateY(-8px);
      border-color: rgba(41,171,226,.42);
      box-shadow: 0 24px 56px rgba(7,25,46,.40), 0 0 40px rgba(41,171,226,.16);
    }
    .advisor-card:hover::before { opacity: 1; }

    .advisor-avatar {
      width: 84px; height: 84px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(41,171,226,.20) 0%, rgba(23,121,184,.30) 100%);
      border: 1.5px solid rgba(41,171,226,.28);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
      font-family: var(--font-h);
      font-size: 26px; font-weight: 800;
      color: #fff;
      position: relative; z-index: 1;
      overflow: hidden;
    }
    .advisor-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 18px;
    }
    .advisor-role-badge{
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: rgba(125,212,245,.9);
      background: rgba(41,171,226,.12);
      border: 1px solid rgba(41,171,226,.20);
      border-radius: 6px; padding: 5px 11px;
      margin-bottom: 16px;
      position: relative; z-index: 1;
    }
    .advisor-name {
      font-family: var(--font-h);
      font-size: 20px; font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
      position: relative; z-index: 1;
    }
    .advisor-bio {
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255,255,255,.62);
      line-height: 1.65;
      margin-bottom: 24px;
      position: relative; z-index: 1;
    }
    .advisor-tags{
      display: flex; flex-wrap: wrap; gap: 7px;
      position: relative; z-index: 1;
    }
    .advisor-tag{
      font-family: var(--font-b); font-size: 11.5px; font-weight: 600;
      color: rgba(255,255,255,.72);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 100px; padding: 4px 10px;
    }

    .advisor-promise {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(41,171,226,.15);
      border-radius: 18px;
      padding: 32px 40px;
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .advisor-promise-icon {
      width: 56px; height: 56px;
      background: rgba(41,171,226,.12);
      border: 1.5px solid rgba(41,171,226,.22);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .advisor-promise-icon svg {
      width: 26px; height: 26px;
      stroke: #7DD4F5; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .advisor-promise-text {
      font-family: var(--font-b);
      font-size: 15px; color: rgba(255,255,255,.78);
      line-height: 1.65;
    }
    .advisor-promise-text strong {
      color: #fff; font-weight: 700;
    }

    @media (max-width: 1024px) {
      .advisor-cards { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .advisor-cards { grid-template-columns: 1fr; }
      .advisor-promise { flex-direction: column; text-align: center; gap: 20px; }
      .advisor-sec { padding: 64px 24px; }
    }



  /* reduced-motion-v1 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
/* mobile-qa-v1 — fixed 2026-05-14 — [class*="btn-"] was catching .btn-icon
   (the SVG inside buttons), forcing the icon to be 44x44 and bloating the
   primary CTA to 72px tall. Added :not([class*="-icon"]) exclusion. */
@media (max-width: 767px) {
  .btn, button, .btn-primary, .btn-secondary, .btn-outline, .cta, [class*="btn-"]:not([class*="-icon"]):not(svg), a.button, input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 18px !important;
  }
  p, li, span, a, td, th, label, input, select, textarea, button, {
    font-size: max(14px, 1em) !important;
  }
  body, main, section, div, table, .container, .wrap, [class*="-wrap"], [class*="-grid"] {
    max-width: 100% !important;
  }
  img, video, iframe, svg { max-width: 100% !important; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mob-drawer, [class*="drawer"], .nav-drawer { width: 88vw !important; max-width: 320px !important; }
  html { overflow-x: hidden !important; }
}
@media (max-width: 359px) {
  .mob-drawer, [class*="drawer"], .nav-drawer { width: 96vw !important; max-width: 100vw !important; }
}
/* scroll-margin-anchor-v2 */
[id], section[id], h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 130px; }

/* ═══════════════════════════════════════════════════════════════
   HERO EXECUTIVE UPGRADE — CFO/CHRO-tuned motion & proof signals
   Layered over the existing dashboard; nothing below is replaced.
   ═══════════════════════════════════════════════════════════════ */

/* Perspective grid floor — reads as "infrastructure," not consumer app */
.hero-scene::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 150%;
  height: 260px;
  transform: translateX(-50%) perspective(640px) rotateX(64deg);
  transform-origin: top center;
  background-image:
    linear-gradient(rgba(41,171,226,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,171,226,.16) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at center top, #000 25%, transparent 72%);
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}
@media (max-width: 1100px) { .hero-scene::after { display: none; } }

/* Segmented pill — morph indicator that slides between tabs */
.seg-control { position: relative; }
.seg-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 11px;
  background: linear-gradient(165deg, #FFFFFF 0%, rgba(241,248,255,.97) 55%, rgba(232,245,252,.94) 100%);
  box-shadow:
    0 0 0 0.5px var(--active-tab-glow, rgba(41,171,226,.18)),
    0 1px 3px rgba(7,25,46,.07),
    0 4px 14px rgba(7,25,46,.07),
    0 8px 22px rgba(7,25,46,.05),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -0.5px 0 rgba(7,25,46,.04);
  transition:
    transform .58s cubic-bezier(.2,.9,.25,1.12),
    width .58s cubic-bezier(.2,.9,.25,1.12),
    box-shadow .7s ease;
  z-index: 0;
  pointer-events: none;
  will-change: transform, width;
}
/* Let the indicator show through — strip the old active background */
.seg-btn { z-index: 1; }
.seg-btn.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Dash-main: premium light glow — NOT a dark overlay */
.dash-main {
  --active-tab-rgb: 41,171,226;
}
/* Kill my old heavy bloom */
.dash-main::before { display: none !important; }
/* Override the legacy dashGlow (::after) to be a clean, tab-colored bottom bloom */
.dash-main::after {
  inset: -10px -10px -34px -10px !important;
  background: radial-gradient(ellipse 80% 45% at 50% 102%, rgba(var(--active-tab-rgb), .42) 0%, transparent 65%) !important;
  filter: blur(38px) !important;
  opacity: .58 !important;
  animation: none !important;
  transition: background 1s ease, opacity 1s ease !important;
}

/* Kill the legacy pane-in fade; replace with staggered row reveal */
.dash-pane.active { animation: none !important; }
.dash-pane.active > * {
  opacity: 0;
  transform: translateY(8px);
  animation: rowRise .55s cubic-bezier(.2,.9,.3,1) forwards;
}
.dash-pane.active > *:nth-child(1)  { animation-delay: .04s; }
.dash-pane.active > *:nth-child(2)  { animation-delay: .08s; }
.dash-pane.active > *:nth-child(3)  { animation-delay: .12s; }
.dash-pane.active > *:nth-child(4)  { animation-delay: .16s; }
.dash-pane.active > *:nth-child(5)  { animation-delay: .20s; }
.dash-pane.active > *:nth-child(6)  { animation-delay: .24s; }
.dash-pane.active > *:nth-child(7)  { animation-delay: .28s; }
.dash-pane.active > *:nth-child(8)  { animation-delay: .32s; }
.dash-pane.active > *:nth-child(9)  { animation-delay: .36s; }
.dash-pane.active > *:nth-child(10) { animation-delay: .40s; }
@keyframes rowRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Status pill shimmer — reads as "audit trail catching light" */
.dash-pane{ position: relative; overflow: hidden; isolation: isolate; }
.dash-pane::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.72) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: pillShimmer 1.5s cubic-bezier(.2,.8,.3,1) .55s 1;
  pointer-events: none;
}
@keyframes pillShimmer { to { transform: translateX(120%); } }

/* Triple-ring pulse on the Live dot — "real system of record" signal */
.dash-live-dot { position: relative; }
.dash-live-dot::before,
.dash-live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.2px solid rgba(34,197,94,.65);
  animation: liveRing 2.8s cubic-bezier(.2,.75,.3,1) infinite;
  pointer-events: none;
}
.dash-live-dot::after { animation-delay: 1.4s; }
@keyframes liveRing {
  0%   { transform: scale(1);   opacity: .9; }
  80%  { opacity: 0; }
  100% { transform: scale(4.4); opacity: 0; }
}

/* "Last reconciled" stamp — specialist-led accountability, CHRO gold */
.kpi-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 3px 9px 3px 7px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.18);
  border-radius: 100px;
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 600;
  color: #15803D;
  letter-spacing: .1px;
  white-space: nowrap;
}
.kpi-stamp::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px rgba(34,197,94,.65);
  flex-shrink: 0;
}

/* Tab SVG icons — replace the old coloured dot */
.seg-btn::before { display: none !important; }
.seg-btn { gap: 8px; }
.seg-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(7,25,46,.46);
  transition: color .3s var(--ease), transform .35s var(--spring), filter .3s var(--ease);
}
.seg-btn:hover .seg-ico { color: rgba(7,25,46,.76); transform: scale(1.08); }
.seg-btn.active .seg-ico {
  color: var(--tab-c, var(--blue-dark));
  transform: scale(1.08);
  filter: drop-shadow(0 0 4px var(--tab-glow, rgba(41,171,226,.5)));
}

/* Per-plan enrollment bar colors — at-a-glance CFO legibility */
.enroll-card[data-plan="medical"] .enroll-fill { background: linear-gradient(90deg, #2563EB, #60A5FA); }
.enroll-card[data-plan="medical"] .enroll-pct  { color: #2563EB; }
.enroll-card[data-plan="dental"]  .enroll-fill { background: linear-gradient(90deg, #0891B2, #22D3EE); }
.enroll-card[data-plan="dental"]  .enroll-pct  { color: #0891B2; }
.enroll-card[data-plan="vision"]  .enroll-fill { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.enroll-card[data-plan="vision"]  .enroll-pct  { color: #7C3AED; }
.enroll-card[data-plan="retire"]  .enroll-fill { background: linear-gradient(90deg, #16A34A, #4ADE80); }
.enroll-card[data-plan="retire"]  .enroll-pct  { color: #16A34A; }

/* Enrollment bars: fill from 0 when the pane becomes active */
.dash-pane.active .enroll-fill {
  transform-origin: left center;
  animation: barFill 1.1s cubic-bezier(.2,.9,.3,1) .25s both;
}
@keyframes barFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Subtle sheen sweeping across each bar on activation */
.dash-pane.active .enroll-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: barSheen 1.6s cubic-bezier(.2,.8,.3,1) .6s 1;
  pointer-events: none;
}
@keyframes barSheen { to { left: 110%; } }

/* Reduced motion — strip all the theater, keep the content */
@media (prefers-reduced-motion: reduce) {
  .dash-pane.active > * { animation: none; opacity: 1; transform: none; }
  .dash-live-dot::before, .dash-live-dot::after { display: none; }
  .seg-indicator { transition: none; }
  .dash-pane{ display: none; }
  .dash-pane.active .enroll-fill { animation: none; }
  .dash-pane.active .enroll-bar::after { display: none; }
}

/* ═════ HERO LAYOUT — FLUID, SINGLE-SOURCE-OF-TRUTH ═════
   Card width grows more slowly than scene width so the card NEVER
   overflows its container at any viewport between 1100-2560px.
   Below 1100px the layout stacks to a single centered column. */

.hero-inner {
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  /* Vertically CENTER both columns (2026-06-04 · Ryan): the copy is shorter
     than the portrait device, so center-anchoring both makes the device
     overhang the copy equally top + bottom — a symmetric, balanced hero
     instead of the device sitting low. Pairs with the even L/R gutters. */
  align-items: center !important;
}
/* Top alignment: hero-left padding-top sets where the eyebrow pill
   starts. The H1 "HR that" line appears at that value + ~52px (the
   eyebrow row's rendered height). hero-right padding-top is locked
   to that same expression so the dashboard card top always lands
   on the H1 baseline, at every viewport. */
.hero-left {
  /* Mirror the iPad: the copy's LEFT gutter is kept equal to the device's
     RIGHT gutter so the hero reads as even left-vs-right at every viewport
     (2026-06-04 · Ryan). The iPad is JS zoom-fit (its rendered width varies
     per load), so a static value can't mirror it precisely — home-page.js
     measures the device's inset from the hero-inner's right edge and sets this
     padding-left live (see "Hero gutter mirror"). The 40px below is only the
     pre-JS / no-JS fallback (a typical device inset). The iPad is UNCHANGED. */
  padding-left: 40px !important;
  padding-right: 32px !important;
  padding-top: clamp(32px, 3.4vw, 60px) !important;
}
.hero-right {
  align-items: flex-start !important;
  padding-top: calc(clamp(32px, 3.4vw, 60px) + 52px) !important;
}
.hero-h1   { max-width: 580px !important; }
.hero-p    { max-width: 500px !important; }
.hero-ctas { max-width: 560px !important; margin-bottom: 20px !important; }

/* Card width. Uses a lower vw multiplier (34vw) than the scene (38vw)
   so the scene is ALWAYS wider than the card — guarantees the card
   never overflows its container. */
.dash-main {
  width: clamp(420px, 34vw, 540px) !important;
  top: 0 !important;
}

/* Scene: tighter frame, no tile-overhang reservation */
.hero-scene {
  width: min(100%, clamp(460px, 38vw, 600px)) !important;
  height: 720px !important;
  max-width: 100%;
}

/* 14–15" laptop range (1280–1399) */
@media (max-width: 1399px) {
  .dash-main  { width: clamp(400px, 36vw, 500px) !important; }
  .hero-scene { width: min(100%, clamp(440px, 40vw, 560px)) !important; height: 720px !important; }
}

/* 13" laptop / small desktop (1200–1279) */
@media (max-width: 1279px) {
  .dash-main  { width: clamp(380px, 38vw, 470px) !important; }
  .hero-scene { width: min(100%, clamp(420px, 42vw, 520px)) !important; }
  .hero-left  { padding-top: clamp(28px, 3vw, 48px) !important; }
  .hero-right { padding-top: calc(clamp(28px, 3vw, 48px) + 52px) !important; }
}

/* Tablet landscape (1100–1199) — still two columns */
@media (max-width: 1199px) {
  .dash-main  { width: clamp(360px, 40vw, 440px) !important; }
  .hero-scene { width: min(100%, clamp(400px, 44vw, 500px)) !important; }
  .hero-left  { padding-top: 32px !important; }
  .hero-right { padding-top: calc(32px + 52px) !important; }
}

/* STACK POINT (≤ 1100): single column, card centered under the copy */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero-left {
    padding: 56px 32px 0 !important;
  }
  .hero-right {
    padding: 0 32px 56px !important;
    padding-top: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .hero-scene {
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .dash-main {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
}

/* Small tablet / phablet (≤ 768) */
@media (max-width: 768px) {
  .hero-left { padding: 40px 24px 0 !important; }
  .hero-right { padding: 0 24px 48px !important; padding-top: 0 !important; }
  .hero-scene { max-width: 100% !important; }
  .dash-pane { height: 600px !important; padding: 16px 18px 16px !important; }
  /* Tighter H1 line-height on mobile so 3-line stack reads as one block */
  .hero-h1 { line-height: 1.0 !important; margin-bottom: 16px !important; }
  .hero-h1 .h1-sub { margin-top: 14px !important; }
  /* Reduce CTA gap to trustbar; the form is hidden <600 anyway */
  .hero-ctas { margin-bottom: 16px !important; gap: 10px !important; }
  /* Slim CTA paddings - mobile-qa-v1 forces min-height 44, padding 12/18
     with selector [class*="btn-"]:not([class*="-icon"]):not(svg) which has
     specificity (0,3,0). Match it with :not() so we win on source-order. */
  .hero-ctas .btn-primary:not(:disabled),
  .hero-ctas .btn-hero-phone:not(:disabled) {
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }
  .hero-ctas .btn-icon { width: 14px !important; height: 14px !important; }
  /* Trust microbar: single line, tighter gap */
  .hero-trustbar { font-size: 11px !important; gap: 6px !important; margin-top: 14px !important; }
  .hero-trustbar-sep { margin: 0 2px; }
}

/* Phone (≤ 480) */
@media (max-width: 480px) {
  .hero-left { padding: 28px 18px 0 !important; }
  .hero-right { padding: 0 18px 32px !important; padding-top: 0 !important; }
  .dash-pane { height: 620px !important; }

  /* P0 fix 2026-04-15 (reality-check):
     1. Body copy ".hero-p" was being clipped at the right edge on 375px
        — a stale `max-width: 500px !important;` from desktop combined with
        the parent's left padding pushed the right edge of long words past
        the viewport. Reset to fit the column.
     2. ".hero-eyebrow-pill" was forcing nowrap and truncating the
        Utah-HQ ribbon ("...Se"). Allow it to wrap to two lines.
     3. ".hero-h1" same defensive max-width reset.                      */
  .hero-p,
  .hero-h1,
  .hero-h1 .h1-sub,
  .hero-ctas,
  .hero-sync-caption {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .hero-eyebrow-row {
    flex-wrap: wrap !important;
    width: 100%;
  }
  .hero-eyebrow-pill {
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.35;
    text-align: left;
  }
  .hero-eyebrow-pill::before {
    align-self: flex-start;
    margin-top: 6px;
  }
}

/* ═════ TRUST ROW CLEANUP ═════ */
.hero-phone-link {
  margin-top: 14px !important;
  font-size: 12.5px !important;
  font-weight: 500;
  opacity: 1 !important;
  color: var(--muted);
  letter-spacing: .1px;
}
.hero-phone-link a {
  color: var(--navy) !important;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(7,25,46,.25);
  padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.hero-phone-link a:hover {
  color: var(--blue-dark) !important;
  border-bottom-color: var(--blue);
}

.trust-row {
  gap: 8px !important;
  margin-top: 14px !important;
  max-width: 560px;
}
.trust-chip{
  padding: 6px 11px 6px 9px !important;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(41,171,226,.22);
  border-radius: 100px;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  white-space: nowrap;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(7,25,46,.03), inset 0 1px 0 rgba(255,255,255,.9);
}
.trust-chip svg{ width: 12px !important; height: 12px !important; stroke-width: 3 !important; }
a.trust-chip:hover {
  background: #fff;
  border-color: var(--blue);
  color: var(--blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41,171,226,.18), inset 0 1px 0 rgba(255,255,255,1);
}

/* ═══ §2 ═══════════════════════════════════ */
.hero-eyebrow-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 22px;
      }
      .hero-eyebrow-pill{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-b);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -.005em;
        text-transform: none;
        color: var(--navy);
        background: #fff;
        border: 1px solid rgba(7,25,46,.09);
        border-radius: 999px;
        padding: 6px 14px 6px 11px;
        box-shadow:
          0 1px 2px rgba(7,25,46,.04),
          0 6px 16px rgba(7,25,46,.05);
      }
      .hero-eyebrow-pill::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22C55E;
        box-shadow:
          0 0 0 3px rgba(34,197,94,.16),
          0 0 6px rgba(34,197,94,.55);
        flex-shrink: 0;
        animation: eyebrowLivePulse 2.8s ease-in-out infinite;
      }
      @keyframes eyebrowLivePulse {
        0%, 100% { opacity: 1;   transform: scale(1); }
        50%      { opacity: .7;  transform: scale(.92); }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-eyebrow-pill::before { animation: none; }
      }

/* ═══ §3 ═══════════════════════════════════ */
.hero-h1 .h1-sub {
        display: block;
        font-size: 0.42em;
        font-weight: 700;          /* bold, matching the headline's confidence */
        color: var(--navy);        /* same navy as "HR that knows your" */
        opacity: 1;                /* no wash — full-strength color */
        margin-top: 0.6rem;
        line-height: 1.3;
        letter-spacing: -0.01em;
        max-width: 32ch;
        text-transform: none;
      }

/* ═══ §4 ═══════════════════════════════════ */
.svc-tier-divider{display:flex;align-items:center;gap:18px;margin:64px 0 28px;opacity:0;transform:translateY(12px);animation:svcRailIn .7s .1s ease-out forwards}
      .svc-tier-divider .svc-tier-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1366A0;white-space:nowrap}
      .svc-tier-divider .svc-tier-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(23,121,184,.35),rgba(23,121,184,0))}
      .svc-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
      @media (max-width:900px){.svc-rail{grid-template-columns:repeat(2,1fr)}}
      @media (max-width:480px){.svc-rail{grid-template-columns:1fr}}
      .svc-rail-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:16px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(23,121,184,.12);text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;opacity:0;transform:translateY(14px);animation:svcRailIn .6s ease-out forwards}
      .svc-rail-tile::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(41,171,226,.45),rgba(249,115,22,0) 55%,rgba(23,121,184,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none}
      .svc-rail-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(7,25,46,.28);border-color:rgba(23,121,184,.28)}
      .svc-rail-tile:hover::before{opacity:1}
      .svc-rail-tile:nth-child(1){animation-delay:.05s}.svc-rail-tile:nth-child(2){animation-delay:.1s}.svc-rail-tile:nth-child(3){animation-delay:.15s}.svc-rail-tile:nth-child(4){animation-delay:.2s}.svc-rail-tile:nth-child(5){animation-delay:.25s}.svc-rail-tile:nth-child(6){animation-delay:.3s}.svc-rail-tile:nth-child(7){animation-delay:.35s}.svc-rail-tile:nth-child(8){animation-delay:.4s}.svc-rail-tile:nth-child(9){animation-delay:.45s}.svc-rail-tile:nth-child(10){animation-delay:.5s}.svc-rail-tile:nth-child(11){animation-delay:.55s}.svc-rail-tile:nth-child(12){animation-delay:.6s}.svc-rail-tile:nth-child(13){animation-delay:.65s}.svc-rail-tile:nth-child(14){animation-delay:.7s}
      .svc-rail-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(41,171,226,.14),rgba(23,121,184,.08));color:#1366A0;flex-shrink:0}
      .svc-rail-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
      .svc-rail-tile h4{font-size:15px;font-weight:700;color:#07192E;margin:6px 0 0;line-height:1.3}
      .svc-rail-tile p{font-size:12.5px;line-height:1.5;color:#5B6B7E;margin:0}
      .svc-rail-tile .svc-rail-arr{position:absolute;top:18px;right:18px;font-size:14px;color:#1366A0;opacity:.55;transition:transform .35s ease,opacity .35s ease}
      .svc-rail-tile:hover .svc-rail-arr{opacity:1;transform:translateX(3px)}
      .svc-rail-cta-wrap{display:flex;justify-content:center;margin-top:40px}
      .svc-rail-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;background:linear-gradient(135deg,#1779B8,#29ABE2);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 14px 30px -14px rgba(23,121,184,.55);transition:transform .3s ease,box-shadow .3s ease}
      .svc-rail-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(23,121,184,.7)}
      .svc-rail-cta .arr{transition:transform .3s ease}
      .svc-rail-cta:hover .arr{transform:translateX(4px)}
      @keyframes svcRailIn{to{opacity:1;transform:translateY(0)}}
      @media (prefers-reduced-motion:reduce){.svc-rail-tile,.svc-tier-divider{animation:none;opacity:1;transform:none}.svc-rail-tile:hover{transform:none}}

      /* ── DIFFERENTIATOR BRIDGE BAR ── */
      .svc-diff-bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        margin-top: 32px;
        border-radius: 10px;
        background: #FFFFFF;
        border: 1px solid rgba(13,24,41,.09);
        box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 24px -12px rgba(13,24,41,.12);
        overflow: hidden;
        transition: box-shadow 180ms ease-out, transform 180ms ease-out;
      }
      .svc-diff-cell {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 28px 28px;
        text-decoration: none;
        color: inherit;
        position: relative;
        transition: background 180ms ease-out;
      }
      .svc-diff-cell:hover { background: rgba(13,24,41,.02); }
      .svc-diff-divider {
        width: 1px;
        background: rgba(13,24,41,.08);
        margin: 16px 0;
      }
      .svc-diff-ico {
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        color:#1366A0;
      }
      .svc-diff-ico svg {
        width: 24px; height: 24px;
        fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
      }
      .svc-diff-text {
        display: flex; flex-direction: column; gap: 4px;
        flex: 1;
      }
      .svc-diff-text strong {
        font-family: var(--font-h);
        font-size: 15px; font-weight: 700;
        color: #0D1829; line-height: 1.3;
      }
      .svc-diff-text span {
        font-family: var(--font-b);
        font-size: 13px; color: #5B6B7E;
        line-height: 1.5;
      }
      .svc-diff-badge {
        display: inline-flex; align-items: center;
        font-family: var(--font-b);
        font-size: 10px; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase;
        color: #047857;
        background: rgba(16,185,129,.10);
        border: 1px solid rgba(16,185,129,.22);
        padding: 2px 8px; border-radius: 4px;
        white-space: nowrap; align-self: flex-start;
        margin-top: 2px;
      }
      .svc-diff-cell:last-child {
        color:#1366A0;
        background: rgba(23,121,184,.10);
        border-color: rgba(23,121,184,.22);
      }
      .svc-diff-arr {
        font-size: 16px; color:#1366A0;
        opacity: .45; align-self: center;
        transition: opacity 180ms ease-out, transform 180ms ease-out;
      }
      .svc-diff-cell:hover .svc-diff-arr { opacity: 1; transform: translateX(3px); }

      /* ── ADVISOR PREVIEW STRIP — full team, elevated ── */
      .svc-advisor-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        margin-top: 44px;
        padding: 22px 28px;
        background: linear-gradient(135deg, rgba(41,171,226,0.06), rgba(41,171,226,0.01));
        border: 1px solid rgba(41,171,226,0.14);
        border-radius: 20px;
      }
      .svc-advisor-faces {
        display: flex;
        flex-shrink: 0;
      }
      .svc-advisor-faces img {
        width: 56px; height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1.5px rgba(41,171,226,0.25), 0 2px 8px rgba(13,24,41,.12);
      }
      .svc-advisor-faces img + img { margin-left: -14px; }
      .svc-advisor-tagline{
        font-family: var(--font-b);
        font-size: 15px; color: #3D5266;
        line-height: 1.5; margin: 0;
        flex: 1;
      }
      .svc-advisor-tagline b{
        display: block;
        font-size: 16px; font-weight: 800;
        color: var(--navy);
        letter-spacing: -0.01em;
        margin-bottom: 2px;
      }
      .svc-advisor-link {
        font-family: var(--font-b);
        font-size: 13px; font-weight: 700;
        color:#1366A0; text-decoration: none;
        white-space: nowrap;
        display: inline-flex; align-items: center; gap: 5px;
        transition: gap 180ms ease-out;
      }
      .svc-advisor-link:hover { gap: 9px; }

      /* ── SERVICES HUB PREMIUM SHIMMER BUTTON ─────────────────
         Promoted from a text link to a full premium CTA with:
           • Dark navy→brand-blue gradient pill (not flat white)
           • Continuous subtle shimmer pass left→right (6s loop)
           • Arrow slides 4px right on hover with spring curve
           • Magnetic lift on hover with brand-blue glow
           • Conic-gradient brand border (blue→violet→magenta→blue)
             slowly spinning underneath for premium depth
         ─────────────────────────────────────────────────────── */
      .svc-hub-link-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 32px;
      }
      .svc-hub-link-secondary {
        font: 500 13px/1.3 'Inter', system-ui, sans-serif;
        color: var(--muted, #5B6B7E);
        letter-spacing: -.002em;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: rgba(13,24,41,.20);
        transition: color .15s ease, text-decoration-color .15s ease;
      }
      .svc-hub-link-secondary:hover {
        color: var(--navy, #07192E);
        text-decoration-color: var(--orange-bright, #F97316);
      }
      /* .svc-hub-link removed 2026-05-24 — was a custom navy/conic-gradient
         button with spinning border + infinite shimmer (violated the
         "no continuous animation" rule, memory 2026-04-21). Markup now uses
         canonical .btn-primary so it inherits sitewide VSHR gradient
         reveal + shimmer sweep (buttons-v2.css). --- */
      .hero-scene > *{
        position: relative;
        z-index: 2;
      }

      /* ── MOBILE — diff bar, advisor strip, hub link ── */
      @media (max-width: 640px) {
        .svc-sec { padding: 48px 16px; }
        .svc-diff-bar { grid-template-columns: 1fr; margin-top: 20px; }
        .svc-diff-divider { width: auto; height: 1px; margin: 0 16px; }
        .svc-diff-cell { padding: 18px 16px; gap: 12px; }
        .svc-diff-arr { display: none; }
        .svc-advisor-preview { flex-direction: column; text-align: center; gap: 10px; margin-top: 20px; padding: 0; }
        .svc-advisor-faces img { width: 36px; height: 36px; }
        .svc-hub-link-wrap { margin-top: 16px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .svc-diff-bar { transition: none; }
        .svc-diff-cell:hover { background: transparent; }
      }

/* ═══ §5 ═══════════════════════════════════ */
.peo-aso-teaser {
    position: relative;
    background: linear-gradient(180deg, #07192E 0%, #0D2B45 100%);
    color: #FFFFFF;
    padding: 96px 0;
    overflow: hidden;
  }
  .peo-aso-teaser::before,
  .peo-aso-teaser::after,
  .peo-aso-teaser .pat-orb-3 {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
  }
  .peo-aso-teaser::before {
    width: 480px; height: 480px;
    background: rgba(41,171,226,.22);
    top: -12%; right: 6%;
    animation: pat-orb-1 9s ease-in-out infinite;
  }
  .peo-aso-teaser::after {
    width: 360px; height: 360px;
    background: rgba(249,115,22,.20);
    bottom: -10%; left: 8%;
    animation: pat-orb-2 11s ease-in-out infinite;
  }
  .peo-aso-teaser .pat-orb-3 {
    width: 300px; height: 300px;
    background: rgba(123,33,162,.18);
    top: 30%; left: 42%;
    animation: pat-orb-3 13s ease-in-out infinite;
  }
  @keyframes pat-orb-1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(-32px,18px) scale(1.05); }
    66%     { transform: translate(18px,-12px) scale(.96); }
  }
  @keyframes pat-orb-2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(28px,-22px) scale(1.06); }
  }
  @keyframes pat-orb-3 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%     { transform: translate(-20px,-16px) scale(1.04); }
    80%     { transform: translate(14px,18px) scale(.97); }
  }
  .peo-aso-teaser .pat-inner {
    position: relative; z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .peo-aso-teaser .pat-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    color: #7DD4F5;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .peo-aso-teaser .pat-h2 {
    font-family: var(--font-h);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    max-width: 760px;
  }
  .peo-aso-teaser .pat-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,.78);
    max-width: 680px;
    margin: 0 0 44px;
  }
  .peo-aso-teaser .pat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }
  .peo-aso-teaser .pat-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 8px 32px rgba(0,0,0,.25),
      0 24px 64px rgba(0,0,0,.12);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  .peo-aso-teaser .pat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
  }
  .peo-aso-teaser .pat-card.peo::before { background: var(--blue); }
  .peo-aso-teaser .pat-card.aso::before { background: var(--orange); }
  .peo-aso-teaser .pat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 12px 40px rgba(0,0,0,.32),
      0 28px 72px rgba(0,0,0,.18);
  }
  .peo-aso-teaser .pat-tag{
    display: inline-block;
    font-family: var(--font-h);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .peo-aso-teaser .pat-card.peo .pat-tag{
    background: rgba(41,171,226,.18);
    color: #7DD4F5;
    border: 1px solid rgba(41,171,226,.4);
  }
  .peo-aso-teaser .pat-card.aso .pat-tag{
    background: rgba(249,115,22,.18);
    color: #FDBA74;
    border: 1px solid rgba(249,115,22,.4);
  }
  .peo-aso-teaser .pat-card-h {
    font-family: var(--font-h);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #FFFFFF;
  }
  .peo-aso-teaser .pat-card-p {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.78);
    margin: 0 0 18px;
  }
  .peo-aso-teaser .pat-card-fit {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 14px;
  }
  .peo-aso-teaser .pat-help {
    text-align: center;
    color: rgba(255,255,255,.7);
    font-size: 15px;
    margin: 0 0 22px;
  }
  .peo-aso-teaser .pat-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .peo-aso-teaser .pat-cta-primary,
  .peo-aso-teaser .pat-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-radius: 12px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .25s var(--ease);
  }
  .peo-aso-teaser .pat-cta-primary {
    background: var(--orange);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(249,115,22,.35);
  }
  .peo-aso-teaser .pat-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(249,115,22,.45);
  }
  .peo-aso-teaser .pat-cta-secondary {
    background: rgba(255,255,255,.08);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(12px);
  }
  .peo-aso-teaser .pat-cta-secondary:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.35);
    transform: translateY(-2px);
  }
  @media (max-width: 760px) {
    .peo-aso-teaser { padding: 72px 0; }
    .peo-aso-teaser .pat-grid { grid-template-columns: 1fr; gap: 18px; }
    .peo-aso-teaser .pat-card { padding: 28px 24px; }
    .peo-aso-teaser .pat-h2 { font-size: 28px; }
    .peo-aso-teaser .pat-ctas { flex-direction: column; align-items: stretch; }
    .peo-aso-teaser .pat-cta-primary,
    .peo-aso-teaser .pat-cta-secondary { justify-content: center; }
  }

/* ═══ §6 ═══════════════════════════════════ */
/* === INDUSTRIES BENTO v2 === */
  /* High-specificity selector so we beat body.premium / body main .sec
     rules in vshr-v4.css + svc-components.css that also style .sec on mobile.
     Without `body main` we land at 48px padding from svc-components.css. */
  body main .industry-sec,
  body main section.industry-sec,
  .industry-sec {
    background: linear-gradient(180deg, var(--off) 0%, #EDF4FB 100%) !important;
    padding: 64px 32px 72px !important;
  }
  @media (max-width: 760px) {
    body main .industry-sec,
    body main section.industry-sec,
    .industry-sec { padding: 32px 16px 36px !important; }
  }
  /* Tighter header so the cards are the hero of the section, not the H2 */
  #industries .sec-head { margin-bottom: 32px; text-align: left; max-width: 720px; padding: 0 !important; }
  @media (max-width: 760px) {
    #industries .sec-head { margin-bottom: 14px !important; padding: 0 !important; }
    #industries .sec-h2 {
      font-size: 24px !important;
      line-height: 1.12 !important;
      margin-bottom: 8px !important;
      padding: 0 !important;
    }
    /* Soften the hard <br> on mobile by giving it a margin-right so removing
       its line break doesn't fuse the surrounding words ("foryour"). */
    #industries .sec-h2 br {
      display: inline !important;
      content: " " !important;
      white-space: pre !important;
    }
    #industries .sec-h2 br::after { content: " "; }
    #industries .sec-p {
      font-size: 14px !important;
      line-height: 1.45 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    #industries { font-size: 10px !important; margin-bottom: 8px !important; }
  }
  #industries { font-size: 11px; letter-spacing: .14em; }
  #industries .sec-h2 {
    font-size: clamp(26px, 2.6vw, 38px) !important;
    letter-spacing: -.02em !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
  }
  #industries .sec-p { font-size: 15.5px; line-height: 1.55; max-width: 620px; }
  .ind-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 290px;
    gap: 20px;
    margin-top: 24px;
    perspective: 1400px;
  }
  .ind-card-v2 {
    position: relative;
    display: block;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none !important;
    color: #FFFFFF;
    background: #07192E;
    box-shadow: 0 4px 16px rgba(7,25,46,.08), 0 16px 48px rgba(7,25,46,.08);
    transform-style: preserve-3d;
    transform:
      perspective(1400px)
      rotateX(calc(var(--tilt-x, 0) * 1deg))
      rotateY(calc(var(--tilt-y, 0) * 1deg))
      translateY(0);
    transition:
      transform .45s var(--ease),
      box-shadow .45s var(--ease);
    will-change: transform;
    isolation: isolate;
  }
  .ind-card-v2.ind-flagship { grid-column: span 2; }
  .ind-card-v2:hover {
    box-shadow: 0 10px 28px rgba(7,25,46,.16), 0 28px 72px rgba(41,171,226,.18);
    text-decoration: none !important;
  }
  /* Defeat global `a:hover { text-decoration: underline }` from mobile-first-baseline.css —
     the card is an <a>, and the underline bleeds through to every text child on hover. */
  .ind-card-v2,
  .ind-card-v2:hover,
  .ind-card-v2:focus,
  .ind-card-v2:focus-visible,
  .ind-card-v2 *,
  .ind-card-v2:hover * { text-decoration: none !important; }
  .ind-card-v2:active { transform: scale(.98); }

  /* Ken Burns photo layer */
  .ind-photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1.04);
    animation: indKenBurnsA 20s ease-in-out infinite alternate;
    transition: transform .8s var(--ease), filter .45s var(--ease);
    filter: saturate(1.05);
  }
  .ind-card-v2:nth-child(2n) .ind-photo { animation-name: indKenBurnsB; animation-duration: 24s; }
  .ind-card-v2:nth-child(3n) .ind-photo { animation-duration: 22s; animation-delay: -6s; }
  .ind-card-v2:hover .ind-photo {
    transform: scale(1.10);
    filter: saturate(1.15) brightness(1.05);
  }
  @keyframes indKenBurnsA {
    0%   { transform: scale(1.04) translate(0, 0); }
    100% { transform: scale(1.12) translate(-2%, -1.5%); }
  }
  @keyframes indKenBurnsB {
    0%   { transform: scale(1.06) translate(1%, 1%); }
    100% { transform: scale(1.14) translate(-1%, -2%); }
  }

  /* Gradient + vignette overlay — keeps text legible */
  .ind-photo-overlay {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(7,25,46,0) 0%, rgba(7,25,46,.16) 30%, rgba(7,25,46,.58) 52%, rgba(7,25,46,.88) 78%, rgba(7,25,46,.97) 100%),
      linear-gradient(135deg, rgba(41,171,226,.12) 0%, transparent 45%);
    z-index: 1;
    transition: opacity .45s var(--ease);
  }
  /* deepen the scrim on hover so text stays crisp while the photo brightens */
  .ind-card-v2:hover .ind-photo-overlay { opacity: 1; }

  /* Glare on hover (Aceternity-style) */
  .ind-card-v2::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(
      circle at calc(50% + var(--glare-x, 0px)) calc(50% + var(--glare-y, 0px)),
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,0) 40%
    );
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: overlay;
  }
  .ind-card-v2:hover::after { opacity: 1; }

  /* Body content */
  .ind-body {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
  }
  .ind-card-v2.ind-flagship .ind-body { padding: 32px 32px 28px; }
  .ind-eyebrow {
    font-family: var(--font-h);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7DD4F5;
    margin: 0;
  }
  .ind-name {
    font-family: var(--font-h);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  .ind-card-v2.ind-flagship .ind-name { font-size: 28px; line-height: 1.1; }
  .ind-desc {
    font-family: var(--font-b);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
  }
  .ind-card-v2.ind-flagship .ind-desc { font-size: 14.5px; max-width: 90%; }

  /* Flagship stat row */
  .ind-stat-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .ind-stat-val {
    font-family: var(--font-h);
    font-size: 24px;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 1px 6px rgba(249,115,22,.3);
  }
  .ind-stat-label{
    font-family: var(--font-b);
    font-size: 12px;
    color: rgba(255,255,255,.86);
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
  }

  /* CTA pill */
  .ind-cta-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 10px;
    padding: 8px 14px;
    font-family: var(--font-h);
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  }
  .ind-cta-pill svg{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
  /* On card hover the pill activates: fills bright orange (never burnt) and the
     arrow slides. (Previously this block mis-targeted .ind-card-v2:hover, so the
     pill never lit and a stray translateX fought the 3D tilt.) */
  .ind-card-v2:hover .ind-cta-pill {
    background: #F97316;
    border-color: #F97316;
    box-shadow: 0 6px 18px -6px rgba(249,115,22,.55);
  }
  .ind-card-v2:hover .ind-cta-pill svg { transform: translateX(3px); }

  /* "View all" CTA card — no photo, gradient background */
  .ind-view-all {
    background: linear-gradient(145deg, #0D2B45 0%, #07192E 50%, #061323 100%);
    border: 1px solid rgba(41,171,226,.28);
  }
  .ind-view-all::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(41,171,226,.20) 0%, transparent 45%),
      radial-gradient(circle at 80% 80%, rgba(249,115,22,.14) 0%, transparent 45%);
    opacity: .9;
    pointer-events: none;
    z-index: 0;
  }
  .ind-view-all .ind-body {
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
  }
  .ind-view-all .ind-va-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(41,171,226,.14);
    border: 1px solid rgba(41,171,226,.3);
    display: flex; align-items: center; justify-content: center;
    color: #7DD4F5;
    margin-bottom: 4px;
  }
  .ind-view-all .ind-va-icon svg { width: 22px; height: 22px; }
  .ind-view-all:hover {
    background: rgba(249,115,22,.95);
    border-color: rgba(249,115,22,1);
  }

  /* Swipe hint (mobile only) */
  .ind-swipe-hint {
    display: none;
    margin: 20px auto 0;
    padding: 8px 18px;
    font-family: var(--font-h);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    background: rgba(249,115,22,.10);
    border: 1px solid rgba(249,115,22,.28);
    border-radius: 999px;
    width: max-content;
    text-align: center;
    animation: indSwipeNudge 2.6s ease-in-out infinite;
    transition: opacity .4s ease;
  }
  @keyframes indSwipeNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }
  .ind-swipe-hint.fade-out { opacity: 0; pointer-events: none; }

  /* Responsive — tablet */
  @media (max-width: 1100px) {
    .ind-bento {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: minmax(260px, auto);
      gap: 16px;
      align-items: stretch;
    }
    .ind-card-v2 { min-height: 260px; }
    .ind-card-v2.ind-flagship {
      grid-column: span 2;
      min-height: 320px;
    }
    .ind-card-v2.ind-flagship .ind-name { font-size: 24px; }
  }

  /* Responsive — mobile: horizontal scroll-snap carousel
     v4.3 (2026-04-27): cards bumped 78vw→86vw + snap-align center→start so the
     next card peeks (~14% slim sliver), making the carousel discoverable. Kill
     Ken Burns + 3D on touch — they read as wobble during scroll, not polish.
     v4.3.1 (2026-04-27): scroll-snap mandatory→proximity + touch-action: pan-x
     fix iOS Safari hijacking vertical scroll when finger lands on carousel.
     With `mandatory`, iOS captures the touch for horizontal snap and the page
     stops scrolling vertically. `pan-x` tells iOS this container only owns
     horizontal touches — vertical pans pass through to the page. */
  @media (max-width: 760px) {
    .industry-sec { overflow: hidden; }
    .ind-bento {
      display: flex;
      grid-template-columns: none;
      grid-auto-rows: none;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scroll-padding-left: 16px;
      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 6px 4px 16px;
      margin: 16px -16px 0;
      padding-left: 16px;
      padding-right: 16px;
    }
    .ind-bento::-webkit-scrollbar { display: none; }
    /* Uniform card sizing in the horizontal scroller — flagship and regular
       share the same width AND height so the scroll rhythm reads as a
       consistent carousel, not staggered tiles. */
    .ind-card-v2,
    .ind-card-v2.ind-flagship {
      flex: 0 0 82vw;
      max-width: 320px;
      height: 320px;
      scroll-snap-align: start;
      grid-column: auto;
      /* Drop 3D context on touch — preserve-3d during scroll causes sub-pixel jitter */
      transform-style: flat !important;
      transform: none !important;
    }
    .ind-card-v2:hover { transform: none !important; }
    /* Kill Ken Burns animation on mobile — battery drain + reads as visual noise during scroll */
    .ind-photo,
    .ind-card-v2:nth-child(2n) .ind-photo,
    .ind-card-v2:nth-child(3n) .ind-photo {
      animation: none !important;
      transform: scale(1.04) !important;
    }
    /* All font-sizes use !important + element-scoped selector to beat the
       mobile-qa-v1 catch-all rule (`[class*="-desc"]` etc forces 14px+1em
       which feedback-loops to ~17px on all card text). */
    .ind-card-v2 .ind-body { padding: 16px 16px 14px !important; gap: 4px !important; }
    .ind-card-v2 h3.ind-name { font-size: 16px !important; line-height: 1.2 !important; }
    .ind-card-v2 p.ind-desc { font-size: 12px !important; line-height: 1.38 !important; }
    .ind-card-v2.ind-flagship .ind-body { padding: 18px 18px 16px !important; gap: 5px !important; }
    .ind-card-v2.ind-flagship h3.ind-name { font-size: 19px !important; line-height: 1.15 !important; }
    .ind-card-v2.ind-flagship p.ind-desc { font-size: 12px !important; line-height: 1.38 !important; }
    /* Flagship stat row: compact single line, no flex-wrap to two rows */
    .ind-card-v2.ind-flagship .ind-stat-row {
      margin-top: 2px !important;
      padding-top: 6px !important;
      gap: 6px !important;
      flex-wrap: nowrap !important;
      align-items: baseline !important;
    }
    .ind-card-v2.ind-flagship .ind-stat-row .ind-stat-val,
    .ind-card-v2.ind-flagship .ind-stat-val { font-size: 15px !important; line-height: 1 !important; }
    .ind-card-v2{
      font-size: 10.5px !important;
      line-height: 1.2 !important;
    }
    .ind-cta-pill {
      margin-top: 4px !important;
      padding: 6px 11px !important;
      font-size: 11px !important;
    }
    .ind-swipe-hint {
      display: block;
      font-size: 11px;
      padding: 7px 16px;
      letter-spacing: .08em;
      margin: 14px auto 0;
    }
  }
  @media (max-width: 380px) {
    .ind-card-v2,
    .ind-card-v2.ind-flagship {
      flex: 0 0 84vw;
      height: 300px;
    }
    .ind-card-v2 .ind-name { font-size: 17px; }
    .ind-card-v2.ind-flagship .ind-name { font-size: 20px; }
  }

  /* Reduced motion: kill Ken Burns + tilt + swipe nudge */
  @media (prefers-reduced-motion: reduce) {
    .ind-photo,
    .ind-card-v2:nth-child(2n) .ind-photo,
    .ind-card-v2:nth-child(3n) .ind-photo { animation: none !important; transform: scale(1.04) !important; }
    .ind-card-v2 { transform: none !important; transition: box-shadow .3s ease !important; }
    .ind-swipe-hint { animation: none !important; }
  }

/* ═══ §7 ═══════════════════════════════════ */
/* === INDUSTRY RAIL (Tier 2) === */
  .ind-rail-head { margin: 56px 0 22px; text-align: center; }
  .ind-rail-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent, #c9a34a);
    padding: 6px 14px; border: 1px solid rgba(201,163,74,.35);
    border-radius: 999px; background: rgba(201,163,74,.06); margin-bottom: 14px;
  }
  .ind-rail-title {
    font-size: clamp(20px, 2.4vw, 28px); font-weight: 600;
    color: var(--ink, #0b1220); margin: 0; letter-spacing: -.01em;
  }
  .ind-rail {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  }
  .ind-rail-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px -16px rgba(11,18,32,.18);
    text-decoration: none; color: inherit;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
    position: relative; overflow: hidden;
  }
  .ind-rail-tile::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(201,163,74,0) 0%, rgba(201,163,74,.08) 100%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
  }
  .ind-rail-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(201,163,74,.45);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 38px -20px rgba(11,18,32,.28);
  }
  .ind-rail-tile:hover::before { opacity: 1; }
  .ind-rail-tile:focus-visible { outline: 2px solid var(--accent, #c9a34a); outline-offset: 3px; }
  .ind-rail-icon {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(201,163,74,.16), rgba(201,163,74,.06));
    border: 1px solid rgba(201,163,74,.28);
    color: var(--accent, #c9a34a);
  }
  .ind-rail-icon svg { width: 20px; height: 20px; }
  .ind-rail-body { display: flex; flex-direction: column; min-width: 0; }
  .ind-rail-label{
    font-size: 14.5px; font-weight: 600; color: var(--ink, #0b1220);
    line-height: 1.2; letter-spacing: -.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ind-rail-sub {
    font-size: 11.5px; color: rgba(11,18,32,.58);
    margin-top: 3px; font-weight: 500;
  }

  @media (max-width: 900px) {
    .ind-rail { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  }
  @media (max-width: 480px) {
    .ind-rail-tile { padding: 14px; }
    .ind-rail-icon { flex-basis: 36px; width: 36px; height: 36px; }
    { font-size: 13.5px; }
    .ind-rail-sub { font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ind-rail-tile { transition: none !important; }
    .ind-rail-tile:hover { transform: none !important; }
  }

/* ═══ §8 ═══════════════════════════════════ */
.origin-hook-sec {
    padding: 72px 24px 64px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border-top: 1px solid rgba(13,24,41,.06);
  }
  .origin-hook-wrap {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }
  .origin-hook-eyebrow {
    font-family: var(--font-b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
    display: inline-block;
  }
  .origin-hook-h2 {
    font-family: var(--font-h);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.12;
    color: var(--navy);
    margin: 0 0 18px;
  }
  .origin-hook-h2 .grad-accent {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .origin-hook-p {
    font-family: var(--font-b);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 680px;
    margin: 0 auto 22px;
  }
  .origin-hook-badges{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .origin-hook-badge{
    font-family: var(--font-b);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    background: #FFFFFF;
    border: 1px solid rgba(13,24,41,.09);
    padding: 7px 13px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(13,24,41,.04);
  }
  .origin-hook-link {
    font-family: var(--font-b);
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 180ms ease-out;
  }
  .origin-hook-link:hover { gap: 10px; }
  @media (max-width: 640px) {
    .origin-hook-sec { padding: 52px 16px 48px; }
  }

/* ═══ §9 ═══════════════════════════════════ */
.cw-teaser-sec {
    position: relative;
    padding: 88px 24px;
    background:
      radial-gradient(700px 560px at 8% 14%,  rgba(247,212,76,.22) 0%, transparent 62%),
      radial-gradient(740px 600px at 72% 26%, rgba(232,18,92,.18) 0%, transparent 60%),
      radial-gradient(840px 700px at 90% 86%, rgba(23,121,184,.22) 0%, transparent 62%),
      linear-gradient(180deg, #FAFBFD 0%, #F1F4F9 55%, #FAFBFD 100%);
    border-top: 1px solid rgba(13,24,41,.06);
    overflow: hidden;
  }
  .cw-teaser-sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(13,24,41,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13,24,41,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%);
    pointer-events: none;
  }
  .cw-teaser-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .cw-teaser-left { position: relative; }
  .cw-teaser-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #E8125C;
    background: rgba(232,18,92,.08);
    border: 1px solid rgba(232,18,92,.22);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
  }
  .cw-teaser-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #E8125C;
    box-shadow: 0 0 0 3px rgba(232,18,92,.16), 0 0 8px rgba(232,18,92,.6);
    animation: cwLivePulse 2.6s ease-in-out infinite;
  }
  @keyframes cwLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .65; transform: scale(.88); }
  }
  .cw-teaser-h2 {
    font-family: var(--font-h);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.024em;
    color: #0D1829;
    margin: 0 0 14px;
  }
  .cw-teaser-h2 .grad-accent {
    background: linear-gradient(135deg, #E8125C 0%, #7B21A2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .cw-teaser-p {
    font-family: var(--font-b);
    font-size: 16px;
    line-height: 1.65;
    color: #3D5266;
    max-width: 520px;
    margin: 0 0 22px;
  }
  .cw-teaser-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
  }
  .cw-teaser-meta-chip{
    font-family: var(--font-b);
    font-size: 12px;
    font-weight: 600;
    color: #0D1829;
    background: #FFFFFF;
    border: 1px solid rgba(13,24,41,.09);
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(13,24,41,.04);
  }
  .cw-teaser-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-b);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0D1829 0%, #1A2F52 100%);
    box-shadow: 0 2px 8px rgba(13,24,41,.18), 0 10px 28px -10px rgba(13,24,41,.4);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
    border: 1px solid rgba(255,255,255,.08);
  }
  .cw-teaser-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13,24,41,.24), 0 16px 36px -10px rgba(13,24,41,.5);
  }
  .cw-teaser-cta .arr { transition: transform 180ms ease-out; }
  .cw-teaser-cta:hover .arr { transform: translateX(3px); }
  .cw-teaser-right {
    background: #FFFFFF;
    border: 1px solid rgba(13,24,41,.09);
    border-radius: 12px;
    padding: 24px 26px 20px;
    box-shadow:
      0 1px 2px rgba(13,24,41,.04),
      0 12px 32px -14px rgba(13,24,41,.18),
      0 20px 48px -22px rgba(13,24,41,.14);
    position: relative;
    overflow: hidden;
  }
  .cw-teaser-right::before {
    content: '';
    position: absolute;
    left: 0; top: 24px; bottom: 24px;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, #E8125C 15%, #7B21A2 85%, transparent 100%);
    border-radius: 0 3px 3px 0;
  }
  .cw-issue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px 10px;
    border-bottom: 1px solid rgba(13,24,41,.08);
    margin-bottom: 12px;
  }
  .cw-issue-title {
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 700;
    color: #0D1829;
    margin: 0;
    letter-spacing: -.01em;
  }
  .cw-issue-date {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #5B6B7E;
    letter-spacing: .04em;
  }
  .cw-story {
    display: flex;
    gap: 12px;
    padding: 10px 10px 10px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 140ms ease-out;
  }
  .cw-story:hover { background: rgba(13,24,41,.03); }
  .cw-story + .cw-story { border-top: 1px solid rgba(13,24,41,.06); }
  .cw-story-tag{
    flex-shrink: 0;
    font-family: var(--font-b);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    height: fit-content;
    min-width: 82px;
    text-align: center;
  }
  .cw-story-tag{ color:#1366A0; background: rgba(23,121,184,.10);  border: 1px solid rgba(23,121,184,.22); }
  .cw-story-tag{ color: #E8125C; background: rgba(232,18,92,.08);   border: 1px solid rgba(232,18,92,.22); }
  .cw-story-tag{ color: #7B21A2; background: rgba(123,33,162,.08);  border: 1px solid rgba(123,33,162,.22); }
  .cw-story-body { flex: 1; min-width: 0; }
  .cw-story-head {
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 700;
    color: #0D1829;
    line-height: 1.35;
    margin-bottom: 3px;
  }
  .cw-story-src {
    font-family: var(--font-b);
    font-size: 11.5px;
    color: #5B6B7E;
    line-height: 1.4;
  }
  .cw-issue-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(13,24,41,.08);
    font-family: var(--font-b);
    font-size: 11.5px;
    color: #5B6B7E;
  }
  .cw-issue-foot a {
    color:#1366A0;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 140ms ease-out;
  }
  .cw-issue-foot a:hover { gap: 9px; }
  @media (max-width: 960px) {
    .cw-teaser-sec { padding: 64px 16px; }
    .cw-teaser-wrap { grid-template-columns: 1fr; gap: 32px; }
    .cw-teaser-right { padding: 20px 18px 16px; }
    .cw-teaser-h2 { font-size: 26px; }
    { min-width: 70px; font-size: 9px; }
    .cw-story-head { font-size: 13.5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cw-teaser-eyebrow::before { animation: none; }
  }

/* ═══ §10 ═══════════════════════════════════ */
.faq-sec { padding: var(--sec-pad) 32px; position: relative; background: var(--off); }
  .faq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; max-width: 1100px; margin: 0 auto; }
  .faq-sidebar { position: sticky; top: 100px; position: relative; }
  .faq-sidebar::before {
    content: '';
    position: absolute;
    top: -40px; left: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(41,171,226,.08) 0%, rgba(123,33,162,.04) 40%, transparent 70%);
    pointer-events: none; z-index: 0;
  }
  .faq-sidebar > * { position: relative; z-index: 1; }
  .faq-sidebar .sec-label{ color: var(--orange); margin-bottom: 14px; }
  .faq-sidebar h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; margin: 0 0 14px; }

  /* proof-outcomes — card-based layout, no left bar */

  /* ── SECTION DIVIDERS ── */
  .testi-sec { border-top: 1px solid rgba(13,24,41,.06); }
  .faq-sec { border-top: 1px solid rgba(13,24,41,.06); }
  .faq-sidebar p { font-size: 15px; color: var(--muted); line-height: 1.65; margin: 0 0 24px; }
  .faq-sidebar-cta { font-family: var(--font-b); font-size: 14px; font-weight: 700; color: var(--blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 180ms ease-out; }
  .faq-sidebar-cta:hover { gap: 10px; }
  .faq-list { display: flex; flex-direction: column; gap: 12px; }
  .faq-item { background: #FFFFFF; border: 1px solid rgba(13,24,41,.08); border-radius: var(--radius-card); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 4px 12px -4px rgba(13,24,41,.06); }
  .faq-item:hover { border-color: rgba(249,115,22,.25); box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 20px -6px rgba(13,24,41,.10); }
  .faq-item[open] { border-color: rgba(249,115,22,.35); box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 20px -6px rgba(249,115,22,.08); }
  .faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-h); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--navy); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--orange); flex-shrink: 0; transition: transform .25s ease; line-height: 1; }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item .faq-answer { padding: 0 24px 22px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
  @media (max-width: 768px) {
    .faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .faq-sidebar { position: static; text-align: center; }
    .faq-sidebar p { max-width: 480px; margin: 0 auto 20px; }
  }
  @media (max-width: 640px) {
    .faq-sec { padding: 56px 16px; }
    .faq-item summary { padding: 18px 20px; font-size: 15px; }
    .faq-item .faq-answer { padding: 0 20px 18px; font-size: 14px; }
  }

  /* ── PROOF GRID — outcomes + quote side by side ──
     v3 alignment fix: content-driven sizing on both sides. Every card
     sizes to its own content (no flex:1 stretch), every column sizes to
     its own children (no height:100%). The left→right alignment is
     achieved through a fixed-width .proof-outcome-num column (so all 3
     numbers end at the same x-position) and by trimming the right card's
     natural height closer to the left stack's natural height. */
  .proof-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
  .proof-outcomes { display: flex; flex-direction: column; gap: 12px; }
  .proof-outcome {
    display: flex; align-items: center; gap: 16px;
    padding: 28px 24px;
    border-radius: var(--radius-card);
    background: var(--off);
    border: 1px solid rgba(13,24,41,.05);
    transition: box-shadow 180ms ease-out, transform 180ms ease-out;
  }
  .proof-outcome:hover {
    box-shadow: 0 4px 16px -4px rgba(13,24,41,.10);
    transform: translateY(-1px);
  }
  .proof-outcome-num {
    font-family: var(--font-h); font-size: 44px; font-weight: 800;
    color: var(--blue); line-height: 1; flex-shrink: 0;
    width: 72px;
    text-align: right;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
  }
  .proof-industry {
    font-family: var(--font-b); font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--blue-dark); opacity: .6;
    display: block; margin-bottom: 6px;
  }
  .proof-outcome-text strong {
    font-family: var(--font-h); font-size: 16px; font-weight: 700;
    color: var(--navy); display: block; margin-bottom: 5px; line-height: 1.2;
  }
  .proof-outcome-text span {
    font-family: var(--font-b); font-size: 13.5px; color: var(--muted); line-height: 1.55;
  }
  .proof-outcomes-link {
    font-family: var(--font-b); font-size: 14px; font-weight: 700;
    color: var(--blue-dark); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding-top: 8px;
    transition: gap 180ms ease-out;
  }
  .proof-outcomes-link:hover { gap: 10px; }
  .proof-quote {
    background: var(--navy); border-radius: var(--radius-lg);
    padding: 36px 40px 32px; position: relative; overflow: hidden;
    border: 1px solid rgba(41,171,226,.15);
  }
  .proof-quote::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--orange));
    pointer-events: none; z-index: 2;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .proof-quote::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 55% 65% at 5% 50%, rgba(41,171,226,.10) 0%, transparent 60%),
      radial-gradient(ellipse 45% 55% at 95% 80%, rgba(23,121,184,.08) 0%, transparent 50%);
    pointer-events: none;
  }
  .proof-quote > * { position: relative; z-index: 1; }
  .proof-quote-mark {
    font-family: Georgia, serif; font-size: 72px; line-height: .7;
    color: var(--blue); opacity: .3; position: absolute; top: 28px; left: 36px;
    pointer-events: none; font-weight: 700; user-select: none; z-index: 0;
  }
  .proof-quote-text {
    font-family: var(--font-b); font-size: 17px; font-weight: 400;
    line-height: 1.65; color: rgba(255,255,255,.88);
    margin: 0 0 20px; padding: 0;
    border: none;
  }
  .proof-quote-stars { font-size: 16px; letter-spacing: 2px; color: #F7D44C; margin-bottom: 8px; }
  .proof-quote-name { font-family: var(--font-h); font-size: 14px; font-weight: 700; color: #fff; }
  .proof-quote-role { font-family: var(--font-b); font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
  .proof-quote-second {
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .proof-quote-second blockquote {
    font-family: var(--font-b); font-size: 14px; font-style: italic;
    color: rgba(255,255,255,.70); line-height: 1.55; margin: 0 0 10px; padding: 0; border: none;
  }
  @media (max-width: 768px) {
    .proof-grid { grid-template-columns: 1fr; }
    .proof-quote { margin-top: 8px; }
  }

/* ═══ §11 ═══════════════════════════════════ */
.cta-paths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 840px;
    margin: 22px auto 14px;
  }
  .cta-path {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    border-radius: 12px;
    text-decoration: none;
    text-align: left;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    transition: background 180ms ease-out, transform 180ms ease-out, border-color 180ms ease-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .cta-path:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.22);
  }
  .cta-path-eyebrow {
    font-family: var(--font-b);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }
  .cta-path-head {
    font-family: var(--font-h);
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
  }
  .cta-path-sub {
    font-family: var(--font-b);
    font-size: 12.5px;
    color: rgba(255,255,255,.68);
    line-height: 1.45;
  }
  .cta-path-arr {
    margin-top: 6px;
    font-family: var(--font-b);
    font-size: 12.5px;
    font-weight: 700;
    color:#1479A3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 180ms ease-out;
  }
  .cta-path:hover .cta-path-arr { gap: 9px; }
  .cta-path--primary {
    background: linear-gradient(135deg, rgba(249,115,22,.16) 0%, rgba(232,18,92,.10) 100%);
    border-color: rgba(249,115,22,.34);
  }
  .cta-path--primary:hover {
    background: linear-gradient(135deg, rgba(249,115,22,.24) 0%, rgba(232,18,92,.14) 100%);
    border-color: rgba(249,115,22,.5);
  }
  .cta-path--primary .cta-path-arr { color: #F97316; }
  @media (max-width: 720px) {
    .cta-paths { grid-template-columns: 1fr; gap: 10px; max-width: 420px; }
  }

/* ═══ §12 ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .cb-fab, .callback-trigger { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
  .cb-panel, .callback-panel { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; width: min(320px, 90vw) !important; }
  .mob-sticky-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* Body padding-bottom only at true-mobile widths where .mobile-cta-bar
   is actually shown (now hidden at 600px+ per site.css). Was applied at
   <=1024 which left dead space at 600-1024 after the sticky bar was hidden. */
@media (max-width: 599px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero quick-contact form (2026-05-13)
   Compact name/email/phone capture below the hero CTAs. Glass pill on the
   navy hero, three fields + submit inline at ≥720px, stacks below.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Compact hero quick-form (revised 2026-05-13 PM). Earlier version was a
   tall glass pill with big labeled cards — pulled too much weight off the
   H1. Now: thin inline row, 36px height, transparent ground, small fields,
   subtle but tappable. Sits as a footnote-weight tool below the buttons. */
.hero-quick {
  margin: 12px 0 0;
  max-width: 560px;
}
.hero-quick__row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1fr auto;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.hero-quick__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(13,24,41,.08);
  border-radius: 8px;
  padding: 3px 10px 4px;
  min-width: 0;
  height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
.hero-quick__field:focus-within {
  border-color: var(--orange-bright, #F97316);
  box-shadow: 0 0 0 2px rgba(249,115,22,.18);
}
.hero-quick__label {
  font: 700 8.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(91,107,126,.85);
  margin: 0;
}
.hero-quick__field input {
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 12.5px/1.1 'Inter', system-ui, sans-serif;
  color: var(--navy, #07192E);
  letter-spacing: -.005em;
  padding: 0;
  min-width: 0;
  width: 100%;
}
.hero-quick__field input::placeholder {
  color: rgba(91,107,126,.55);
  font-weight: 400;
}

.hero-quick__submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 38px;
  background: linear-gradient(135deg, var(--orange-bright, #F97316) 0%, #EA580C 100%);
  color: #fff;
  font: 700 13px/1 'Inter', system-ui, sans-serif;
  letter-spacing: -.005em;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 8px rgba(249,115,22,.28);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.hero-quick__submit::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.hero-quick__submit:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 22px rgba(249,115,22,.42);
}
.hero-quick__submit:hover::before { transform: translateX(120%); }
.hero-quick__submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-quick__submit svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Hero button sizing fix (2026-05-31) ──────────────────────────────────
   Bugs: a global touch-target rule inflated the Send button to 48px (fields
   are 38px), the two hero CTAs were unequal (desktop 52 vs 56; mobile 44 vs 62).
   Force the two CTAs to one height, and the Send button to the field height. */
.hero-ctas .btn-primary:not(:disabled),
.hero-ctas .btn-hero-phone:not(:disabled){
  min-height:52px!important;max-height:52px!important;height:52px!important;
  padding-top:0!important;padding-bottom:0!important;box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;
}
.hero-quick__submit{
  min-height:38px!important;height:38px!important;
  padding-top:0!important;padding-bottom:0!important;align-self:stretch;
}
@media (max-width:600px){
  .hero-left .hero-ctas a.btn-primary:not(:disabled),
  .hero-left .hero-ctas a.btn-hero-phone:not(:disabled){
    min-height:48px!important;max-height:48px!important;height:48px!important;
    padding:0 18px!important;box-sizing:border-box!important;line-height:1!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;width:100%!important;
  }
}

.hero-quick__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0 2px;
  font: 500 11px/1.4 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  letter-spacing: -.002em;
  opacity: .85;
}
.hero-quick__meta svg {
  flex-shrink: 0;
  width: 11px; height: 11px;
  color: var(--orange-bright, #F97316);
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero-quick__meta a {
  color: var(--navy, #07192E);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(13,24,41,.30);
}
.hero-quick__meta a:hover { text-decoration-color: var(--orange-bright, #F97316); }

/* Inline validation flash */
.hero-quick__field.is-invalid {
  box-shadow: 0 0 0 2px #EF4444;
  animation: hero-quick-shake .32s cubic-bezier(.22,1,.36,1);
}
@keyframes hero-quick-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* Submitted state (briefly shown right after the demo modal opens) */
.hero-quick.is-submitted .hero-quick__submit {
  background: linear-gradient(135deg, #22C55E 0%, #15803D 100%);
  pointer-events: none;
}

/* Tablet / narrow: name + email on top row, phone full-width, submit full-width.
   The 760px breakpoint is when the inline desktop row stops fitting. */
@media (max-width: 760px) and (min-width: 600px) {
  .hero-quick__row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 6px;
  }
  .hero-quick__field:nth-child(1) { grid-column: 1 / 2; }
  .hero-quick__field:nth-child(2) { grid-column: 2 / 3; }
  .hero-quick__field:nth-child(3) { grid-column: 1 / -1; }
  .hero-quick__submit {
    grid-column: 1 / -1;
    padding: 13px 18px;
    justify-content: center;
  }
}
/* Mobile <600px: hide the form entirely. The primary CTA + tel link in
   the trustbar already handle conversion. Stuffing 3 fields + send + meta
   into the hero buries the H1 and competes with the brand statement. */
@media (max-width: 599px) {
  .hero-quick { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-quick__submit,
  .hero-quick__submit::before,
  .hero-quick__field { transition: none !important; transform: none !important; }
  .hero-quick__field.is-invalid { animation: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Hero sub-element padding reset (2026-05-24).
   site.css has a sitewide `[class*="hero"]:not(...)` reset at <768px
   that applies padding-top:40px; padding-bottom:36px to ANYTHING with
   "hero" in its class name unless excluded. The :not() list misses
   .hero-trustbar, .hero-trustbar-sep, .btn-hero-phone, .vshr-partner-bar__item--hero,
   and hero-quick form fields — so they all get clobbered with 76px of
   forced vertical padding. That makes the "19+ years · 500+ businesses ·"
   strip float in massive empty space and the · separators render 91px
   tall. Kill the reset for the affected sub-elements here.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  body.home .hero-trustbar,
  body.home .hero-trustbar-sep,
  body.home .btn-hero-phone,
  body.home .vshr-partner-bar__item--hero,
  body.home .hero-quick,
  body.home .hero-quick__row,
  body.home .hero-quick__field,
  body.home .hero-quick__label,
  body.home .hero-quick__submit,
  body.home .hero-quick__meta {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Trustbar: small breathing room above only, none below */
  body.home .hero-trustbar {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
  }
  /* Floating phone button: restore its normal button anatomy */
  body.home .btn-hero-phone {
    padding: 12px 18px !important;
  }
  /* Section.hero itself — tighten its outer padding too */
  body.home section.hero {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }
}

/* Trust row on phones (2026-05-29): the 3 signals wrap to two lines at phone
   width, which left a "·" separator dangling at the end of line 1 (unpolished).
   Drop the middot separators on phones and lean on gap spacing instead, so the
   items read as a clean wrapped row. Desktop/tablet keep the single-line dotted
   layout. */
@media (max-width: 480px) {
  body.home .hero-trustbar { gap: 6px 16px !important; }
  body.home .hero-trustbar-sep { display: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Mobile scroll-reduction pass (2026-05-14 QA marathon).
   High-specificity overrides beat the existing
   `body.premium main section.sec` rules (specificity 0,0,4,4 — needs
   `body.home.premium main section.sec` or longhand !important).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 540px) {
  body.home main section.sec,
  body.home.premium main section.sec {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.home main section.rv2-sec,
  body.home main section.faq-block-sec,
  body.home main section.faq-block-sec--standard,
  /* ID-based fallback — beats any class-only competitor */
  body.home #faq,
  body.home #reviews {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.home main section.stats-band.sec {
    padding-bottom: 8px !important;
  }
  /* hco-sec was falling through the override (no .sec class). It's the
     dominant scroll consumer at ~73% of mobile doc height.
     ID-based selector beats any class-only competitor.
     Side gutters: 16px here read as edge-to-edge on the 5 service cards —
     tighter than every sibling section (18px). Bumped to 20px so the
     densest 2-col grid gets real breathing room from the screen edge.
     (Ryan 2026-06-01) */
  body.home main section.hco-sec,
  body.home #services {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.home .hco-card {
    padding: 16px 14px !important;
    margin: 0 6px !important;
  }
  body.home .hco-wrap { gap: 12px !important; }
  /* Industries head — kill the 247px head height (was eating mid-page scroll) */
  body.home #industries .sec-head { margin-bottom: 10px !important; padding: 0 !important; }
  body.home #industries .sec-p { font-size: 14px !important; line-height: 1.55 !important; }
  body.home .industry-sec .svc-hub-link-wrap { padding: 12px 0 !important; margin-top: 8px !important; }
  body.home .industry-sec .ind-swipe-hint { margin: 6px auto 0 !important; padding: 4px 12px !important; }
}
@media (max-width: 380px) {
  body.home main section.sec,
  body.home.premium main section.sec,
  body.home main section.rv2-sec,
  body.home main section.faq-block-sec {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── Home FAQ mobile de-crowd (Ryan 2026-06-01) ───────────────────────────
   Each .faq-item renders as a white card (home-page.css L4005), but the
   trigger inside carries `padding: 18px 0` (zero horizontal) from the
   faq-block component's ≤480 rule — so the question text and chevron pressed
   flush against the card's side edges = crowded. Two fixes:
     1. Kill the double outer gutter (section 18px + wrap 18px = 36px) so the
        cards aren't both crowded AND narrow — let the section gutter alone set
        the inset, giving the cards real width.
     2. Add genuine internal padding to the trigger + answer panel so the text
        breathes inside each card.
   Home-scoped + higher specificity than the component rule, so it wins. */
@media (max-width: 767.98px) {
  body.home .faq-block-sec .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.home .faq-block-sec .faq-trigger {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.home .faq-block-sec .faq-panel {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Hero CTA box-model lock (2026-05-31, end-of-file so it wins source order) ──
   Mobile Pricing was inflating to 62px via stray 32/28 vertical padding. Force
   both hero CTAs to one box model at every width. */
body .hero-left .hero-ctas a.btn-primary:not(:disabled),
body .hero-left .hero-ctas a.btn-hero-phone:not(:disabled){
  min-height:52px!important;max-height:52px!important;height:52px!important;
  padding:0 30px!important;box-sizing:border-box!important;line-height:1!important;
  display:inline-flex!important;align-items:center!important;
}
@media (max-width:600px){
  body .hero-left .hero-ctas a.btn-primary:not(:disabled),
  body .hero-left .hero-ctas a.btn-hero-phone:not(:disabled){
    min-height:48px!important;max-height:48px!important;height:48px!important;
    padding:0 18px!important;width:100%!important;justify-content:center!important;
  }
}

/* ID-level CTA box lock (2026-05-31) — beats the elusive higher-priority rule
   (ID specificity 1,0,0 trumps any class rule regardless of source order). */
#vshHeroPrimary, #vshHeroPricing{
  height:52px!important;min-height:52px!important;max-height:52px!important;
  padding:0 30px!important;box-sizing:border-box!important;line-height:1!important;
  display:inline-flex!important;align-items:center!important;
}
@media (max-width:600px){
  #vshHeroPrimary, #vshHeroPricing{
    height:48px!important;min-height:48px!important;max-height:48px!important;
    padding:0 18px!important;width:100%!important;justify-content:center!important;
  }
}

/* ═══ LEFT HERO PREMIUM PASS (2026-05-31) ═══ */
/* Category kicker: reuse the eyebrow pill but drop the live-dot (it's a label,
   not a status) — also clears the impeccable "no pulsing-dot pill" rule. */
.hero-left .hero-eyebrow-pill--category::before{display:none!important}
.hero-left .hero-eyebrow-pill--category{padding-left:14px}

/* Primary CTA — device-grade material (scoped to .hero-left so the 766+ sitewide
   .btn-primary instances are untouched). Bright orange gradient (no burnt tone),
   hover-only shimmer, layered neutral+brand shadow. */
.hero-left .btn-primary{background:linear-gradient(135deg,#FB8A3C 0%,#F97316 52%,#EA580C 100%);position:relative;overflow:hidden;border-radius:14px;
  /* !important so the protected hero CTA keeps its bespoke device-grade shadow and
     is NOT overridden by the sitewide buttons-v2 orange-glow !important rule. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 6px rgba(234,88,12,.18),0 10px 24px -6px rgba(249,115,22,.34),0 20px 44px -16px rgba(249,115,22,.20)!important}
.hero-left .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.22,1,.36,1);pointer-events:none}
.hero-left .btn-primary>*{position:relative;z-index:1}
.hero-left .btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 16px 34px -8px rgba(249,115,22,.42),0 28px 60px -18px rgba(249,115,22,.24)!important}
.hero-left .btn-primary:hover::after{transform:translateX(130%)}
.hero-left .btn-primary .btn-icon{transition:transform .2s cubic-bezier(.22,1,.36,1)}
.hero-left .btn-primary:hover .btn-icon{transform:translateX(3px)}

/* Extend the EXISTING heroSlide entrance to the new eyebrow + the form + trustbar
   (reuses the @keyframes heroSlide already defined; globally reduced-motion-guarded). */
.hero-eyebrow-row{animation:heroSlide .72s cubic-bezier(.22,1,.36,1) 0s both}
.hero-quick{animation:heroSlide .72s cubic-bezier(.22,1,.36,1) .42s both}
.hero-trustbar{animation:heroSlide .72s cubic-bezier(.22,1,.36,1) .54s both}

/* CTA gradient via ID (beats the elusive high-specificity .btn-primary bg rule) */
#vshHeroPrimary{background:linear-gradient(135deg,#FB8A3C 0%,#F97316 52%,#EA580C 100%)!important;border-radius:14px!important}

/* ═══════════════════════════════════════════════════════════════════════
   STRIKING PASS 1 — Composition + Depth (2026-05-31)
   Page-level ONLY. The device frame/bezel/aurora/shadow are off-limits
   (officially done). Goal: turn the flat-light hero into a luminous,
   dimensional stage — color + light pooled on the device side, the copy
   side calm and bright for legibility.
   ═══════════════════════════════════════════════════════════════════════ */

/* Directional base gradient: light from upper-left, warmth pooling toward
   the device (lower-right). Replaces the flat 3-stop wash. */
body.home .hero{
  background:linear-gradient(155deg,#EAF4FC 0%,#F6FBFF 36%,#FBF7F2 70%,#FCEEE2 100%)!important;
}

/* Confident mesh: one cool anchor (upper-left), warm pool + cool halo on the
   device side, plus an elevated white highlight that lifts the device off
   the page. Fewer, stronger washes instead of five muddy ones. */
body.home .hero::before{
  background:
    radial-gradient(ellipse 62% 72% at 100% 46%, rgba(41,171,226,.22) 0%, transparent 56%),
    radial-gradient(ellipse 52% 58% at 90% 90%, rgba(249,115,22,.20) 0%, transparent 52%),
    radial-gradient(ellipse 58% 66% at -6% 6%, rgba(23,121,184,.20) 0%, transparent 56%),
    radial-gradient(ellipse 40% 52% at 77% 45%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.34) 38%, transparent 70%)!important;
}

/* Dot grid dissolves toward the copy — engineered texture, not uniform noise.
   Anchored behind the device, fading left so it never fights the headline. */
body.home .hero::after{
  background-image:radial-gradient(rgba(23,121,184,.11) 1px, transparent 1px)!important;
  background-size:34px 34px!important;
  -webkit-mask-image:radial-gradient(ellipse 95% 100% at 82% 46%, #000 4%, rgba(0,0,0,.4) 52%, transparent 76%);
          mask-image:radial-gradient(ellipse 95% 100% at 82% 46%, #000 4%, rgba(0,0,0,.4) 52%, transparent 76%);
}

/* ═══════════════════════════════════════════════════════════════════════
   STRIKING PASS 2 — Stacked-hero balance (2026-05-31)
   In the stacked range (601–1100) the copy hugged the left of a wide
   column, leaving a dead right half (looked unfinished). Center the copy
   block so the stacked hero reads as intentional and balanced — the device
   is already centered directly below it. Phones (≤600) keep left-alignment;
   the narrow column fills naturally there.
   NOTE: only applies to the TRUE stack range (601–900) now — 901–1100 keeps
   two columns (device visible) per the block below.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) and (min-width:601px){
  body.home .hero-left{
    text-align:center !important;
    max-width:680px !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  body.home .hero-eyebrow-row{ justify-content:center !important; }
  body.home .hero-ctas{ justify-content:center !important; }
  body.home .hero-trustbar{ justify-content:center !important; flex-wrap:wrap !important; }
  body.home .hero-h1{ margin-left:auto !important; margin-right:auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET / NARROW-LAPTOP HERO (901–1100) — keep it TWO-COLUMN (2026-05-31)
   Previously the hero stacked at ≤1100, which dropped the device (the entire
   hero differentiator) below the fold and left a generic centered text block.
   Hold two columns down to 900 so the device stays beside the copy. The
   inline quick form is hidden below desktop (it cramps in the narrower
   column); the CTAs + contact page carry the action there.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (max-width:1100px){
  body.home .hero{ min-height:0 !important; }
  body.home .hero-inner{
    grid-template-columns:1.04fr .96fr !important;
    gap:28px !important;
    align-items:center !important;
  }
  body.home .hero-left{
    text-align:left !important; max-width:none !important;
    margin:0 !important; padding:52px 6px 52px 32px !important;
  }
  body.home .hero-eyebrow-row,
  body.home .hero-ctas,
  body.home .hero-trustbar{ justify-content:flex-start !important; }
  body.home .hero-h1{ margin-left:0 !important; margin-right:0 !important; }
  body.home .hero-right{
    padding:52px 24px 52px 0 !important;
    justify-content:center !important; align-items:center !important;
  }
  body.home .hero-scene{
    width:min(100%,400px) !important; max-width:400px !important;
    height:auto !important; margin:0 !important;
  }
}
/* Inline quick form cramps below ~1100 — hide it there; desktop keeps it. */
@media (max-width:1100px){
  body.home .hero-quick{ display:none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOME PAGE — MOBILE ISSUE FIXES (390px pass, 2026-06-01)
   Page-LOCAL fixes scoped to max-width:767.98px so desktop is untouched.
   Targets identified via brief: home.json pageSpecific findings.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767.98px) {

  /* ── HERO SUBHEAD (.h1-sub) ─────────────────────────────────────────────
     Measured at 15px (brief: smallText). The em-relative 0.42em falls
     short of 16px when the parent H1 shrinks on phones. Pin to 16px so
     the reading subhead meets the legibility floor. */
  .hero-h1 .h1-sub {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  /* ── HERO TRUSTBAR SIGNALS ──────────────────────────────────────────────
     Child spans ("19+ years in business", "All 50 states covered", etc.)
     measured at 11px (brief: smallText). The parent rule at max-width:768px
     sets font-size:11px !important — raises child spans to 12px. */
  .hero-trustbar,
  .hero-trustbar span,
  .hero-trustbar strong {
    font-size: 12px !important;
  }

  /* ── AVAILABILITY META ──────────────────────────────────────────────────
     .home-availability__meta and its phone-number <a> measured at 11.5px
     (brief: smallText). The inline <style> in the template sets 11.5px at
     max-width:640px. Override to 12.5px (matches the desktop value). */
  .home-availability__meta,
  .home-availability__meta a {
    font-size: 12.5px !important;
  }

  /* ── REVIEW QUOTE BODY (.rv2-quote) ─────────────────────────────────────
     Reading/body text measured at 14.5px (brief: smallText, minor:false).
     The partial's @media(max-width:640px) sets 14.5px !important — override
     to 16px so review prose meets the reading-text floor. */
  .rv2-quote {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* ── REVIEWER TITLE (.rv2-title) ────────────────────────────────────────
     Measured at 11.5px (brief: smallText). Attribution meta, not body copy,
     but 11.5px is below the 12px meta floor. Raise to 12px. */
  .rv2-title {
    font-size: 12px !important;
  }

  /* ── REVIEW SOURCE CREDIT (.rv2-source) ────────────────────────────────
     Measured at 10px (brief: smallText). "via Alignable" attribution.
     Below 10px min; raise to 11px. */
  .rv2-source {
    font-size: 11px !important;
  }

  /* ── CONNECTED-OPS DESCRIPTION (.hco-spine-p) ──────────────────────────
     Reading/body paragraph measured at 14.5px (brief: smallText).
     The partial's @media(max-width:640px) explicitly sets 14.5px !important.
     Override to 16px for reading-text legibility. */
  .hco-spine-p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* ── TRIGGER EVENT HEADLINE (.hco-spine-trigger-text) ──────────────────
     Reading headline inside the product panel measured at 14px (brief).
     The partial's @media(max-width:760px) sets 14px; raise to 15px. */
  .hco-spine-trigger-text,
  .hco-spine-trigger-arrow {
    font-size: 15px !important;
  }

  /* ── ACTIVITY FEED ROW LABELS (.hco-spine-row-label) ───────────────────
     Lane labels ("Payroll & Tax", "HR Compliance", etc.) measured at 10px
     (brief: smallText, data:false). The partial sets 10px at ≤760px.
     These are page-section labels, not device-frame micro-UI.
     Raise to 11px — still compact, now legible. */
  .hco-spine-row-label {
    font-size: 11px !important;
  }

  /* ── ACTIVITY FEED ROW ACTIONS (.hco-spine-row-action) ─────────────────
     Action-summary text measured at 12px (brief: smallText, data:false).
     Raise to 13px to clear the body-text floor for functional copy. */
  .hco-spine-row-action {
    font-size: 13px !important;
  }

  /* ── TAP TARGETS ────────────────────────────────────────────────────────
     Two inline links below their 44px tap-height floor (brief: tap). */

  /* "See how VertiSource HR supports multi-state employers" (35px tall) */
  a.hco-foot-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* "Or browse the industries hub" (17px tall) — plain text link */
  a.svc-hub-link-secondary {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONNECTED-OPS PROOF STRIP — ultra-narrow collapse (≤380px, 2026-06-01)
   The proof strip (.hco-spine-proof — "5 workflows / 0 vendor re-keying /
   1 specialist team") is a 3-col grid defined in the partial's inline
   <style> (home-connected-ops.blade.php). Its ≤720px tweak only shrinks
   gap/font; column count stays 3. At 320–380px each column compresses to
   ~75–85px and the wrapping stat labels ragged-stack to 3–4 lines.
   The supporting rails directly below already drop to 1-col at ≤380px, so
   the section is in tall single-column mode here regardless — collapse the
   proof trio to one centered column so each stat reads as a clean unit.
   The partial's base grid rule isn't !important, so plain class + !important
   wins the cascade despite the inline <style>'s later source order. Lives in
   home-page.css per the page-scoped CSS architecture; end-of-file so it wins
   source order against earlier home-page.css rules too. */
@media (max-width: 380px) {
  .hco-spine-proof {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* The 2-line min-height equalizes column baselines in the 3-col layout;
     in a vertical stack it just adds dead space below 1-line labels. */
  .hco-spine-proof li span {
    min-height: 0 !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PHONE HERO POLISH (≤600px, 2026-06-08)
   Scoped to phones ONLY so nothing else changes:
     • 601–900  = stacked + already centered (untouched)
     • 901–1100 = two-column left (untouched)
     • ≥1101    = desktop two-column left (untouched)
   Two fixes:
   1. Center the copy block so the stacked phone hero reads balanced instead of
      stranded left. The cycling word follows via .hero-cycle-wrap{text-align:
      inherit}, so it centres under the H1 (matches the tablet treatment).
   2. Pull the iPad up to the copy. The sitewide [class*="hero"] <768 reset
      forces ~40px top padding on the device container, leaving a disconnected
      gap (~100px text→device). Tighten the stack so the device feels attached
      (~40px). High-specificity + !important so it beats the sitewide reset.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 600px) {
  body.home .hero-left {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 6px !important;
  }
  body.home .hero-h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.home .hero-eyebrow-row { justify-content: center !important; }
  body.home .hero-ctas { justify-content: center !important; }
  body.home .hero-trustbar { justify-content: center !important; flex-wrap: wrap !important; }
  body.home .h1-sub { text-align: center !important; }

  /* Close the text → iPad gap (kill the sitewide hero top-padding reset). */
  body.home .hero-inner { gap: 10px !important; }
  body.home .hero-right { margin-top: 0 !important; padding-top: 0 !important; }
  body.home #vshHero { padding-top: 8px !important; }
}