/* hris-page.css — Phase 4 extraction 2026-04-17. */

/* §1 */
.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}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:2px solid #29ABE2;outline-offset:3px;border-radius:6px}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 .2s ease}.btn-loading{position:relative;pointer-events:none;opacity:.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 .6s linear infinite}@keyframes btnSpin{to{transform:translateY(-50%) rotate(360deg)}}.mob-sticky-cta a,.mob-sticky-cta button,.callback-trigger{min-height:44px}@media(max-width:768px){button,[role="button"],.btn-hero-primary,.btn-primary,.btn-orange,.btn-nav-primary,.iq-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:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}

    :root{--blue:#1479A3;--blue-dark:#1366A0;--navy:#07192E;--navy-2:#0D2B45;--white:#FFFFFF;--off:#F4F8FC;--surface:#FFFFFF;--border:#E2ECF4;--text:#0D1829;--muted:#3D5266;--orange:#F97316;--green:#15803D;--grad-blue:linear-gradient(135deg,#29ABE2 0%,#1779B8 100%);--font-h:'Poppins',system-ui,sans-serif;--font-b:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.175,.885,.32,1.275);--shadow-sm:0 1px 4px rgba(7,25,46,.06),0 1px 2px rgba(7,25,46,.04);--shadow-md:0 4px 24px rgba(7,25,46,.08),0 2px 8px rgba(7,25,46,.04);--shadow-lg:0 16px 56px rgba(7,25,46,.10),0 4px 16px rgba(7,25,46,.06);--shadow-xl:0 32px 80px rgba(7,25,46,.14),0 8px 24px rgba(7,25,46,.08);--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);--glass-shadow: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 .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)}

    /* Brand gradient accent — canonical 5-stop, applied via .grad-word in hero H1s */
    .grad-word {
      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;
      color: transparent;
    }


    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;}a{text-decoration:none}

    /* 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 .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 */

    .breadcrumb{max-width:1200px;margin:0 auto;padding:16px 32px 0;font-family:var(--font-b);font-size:13px;color:var(--muted)}.breadcrumb a{color:var(--blue);text-decoration:none;transition:color .15s}.breadcrumb a:hover{color:var(--blue-dark)}.breadcrumb span{margin:0 6px;opacity:.5}

    /* HERO */
    .page-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);position:relative;overflow:hidden;padding:72px 32px 80px;min-height:500px;display:flex;align-items:center}.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 20% 30%,rgba(41,171,226,.06) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 70%,rgba(249,115,22,.04) 0%,transparent 50%);pointer-events:none}.page-hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(41,171,226,.06) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.hero-bg-img{position:absolute;inset:0;background:image-set(url('/generated-images/hris-hero.avif') type('image/avif'), url('/generated-images/hris-hero.webp') type('image/webp'), url('/generated-images/hris-hero.jpeg') type('image/jpeg')) center center/cover no-repeat;animation:kenBurns 20s ease-in-out infinite alternate;will-change:transform;z-index:0;opacity:.32}@keyframes kenBurns{0%{transform:scale(1)}100%{transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.hero-bg-img{animation:none}}.hero-orb-1{position:absolute;top:-30%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(41,171,226,.15) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0}.hero-orb-2{position:absolute;bottom:-20%;left:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(249,115,22,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0}

    .hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}.hero-h1{font-family:var(--font-h);font-size:52px;font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--white);margin-bottom:16px}.hero-sub{font-family:var(--font-b);font-size:19px;font-weight:400;color:rgba(255,255,255,.75);max-width:560px;line-height:1.65;margin-bottom:32px}.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}.btn-primary{font-family:var(--font-b);font-size:16px;font-weight:600;color:#fff;background:var(--orange);padding:15px 28px;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-primary:hover{background:var(--orange-deep);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.35)}.btn-primary:active{transform:scale(.97) translateY(1px);transition:transform .1s ease}.btn-ghost{font-family:var(--font-b);font-size:16px;font-weight:600;color:#fff;background:transparent;padding:15px 28px;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:1px solid rgba(255,255,255,.3)}.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}

    .hero-stats{display:flex;gap:32px;margin-top:40px}.hero-stat{text-align:center}.hero-stat-num{font-family:var(--font-h);font-size:36px;font-weight:800;background:linear-gradient(135deg,#fff 0%,var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-stat-label{font-family:var(--font-b);font-size:13px;font-weight:500;color:rgba(255,255,255,.5);margin-top:4px}

    /* Hero visual - platform mockup */
    .hero-visual{display:flex;align-items:center;justify-content:center}
    .hero-mockup{width:100%;max-width:460px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 0 0 .5px rgba(255,255,255,.15),0 4px 24px rgba(0,0,0,.2),0 16px 56px rgba(0,0,0,.15);overflow:hidden}
    .mock-top{padding:16px 20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.06)}.mock-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15)}.mock-dot:first-child{background:#EF4444}.mock-dot:nth-child(2){background:#F59E0B}.mock-dot:nth-child(3){background:#22C55E}
    .mock-body{padding:24px 20px}.mock-row{display:flex;gap:12px;margin-bottom:16px}.mock-card-mini{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 12px;text-align:center}.mock-card-mini-num{font-family:var(--font-h);font-size:22px;font-weight:700;color:var(--white)}.mock-card-mini-label{font-family:var(--font-b);font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
    .mock-list{display:flex;flex-direction:column;gap:8px}.mock-list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:8px}.mock-list-avatar{width:28px;height:28px;border-radius:50%;background:rgba(41,171,226,.2)}.mock-list-text{flex:1}.mock-list-name{font-family:var(--font-b);font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}.mock-list-role{font-family:var(--font-b);font-size:10px;color:rgba(255,255,255,.4)}.mock-list-badge{font-family:var(--font-b);font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;background:rgba(34,197,94,.15);color:var(--green)}

    .wave-divider{position:relative;margin-top:-2px;line-height:0;overflow:hidden}.wave-divider svg{display:block;width:100%;height:60px}.wave-divider-bottom{transform:rotate(180deg);margin-top:0;margin-bottom:-2px}

    /* SECTIONS */
    .sec{padding:96px 32px}.wrap{max-width:1200px;margin:0 auto}.sec-label{font-family:var(--font-b);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--blue-dark);margin-bottom:12px}.sec-h2{font-family:var(--font-h);font-size:28px;font-size:clamp(28px,4vw,42px);font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-.02em;margin-bottom:16px}.sec-p{font-family:var(--font-b);font-size:18px;font-weight:400;color:var(--muted);line-height:1.65;max-width:640px;margin-bottom:48px}

    /* GOLDEN CARD pattern */
    .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin-left:auto;margin-right:auto}
    .feat-card{position:relative;padding:30px 28px 26px 36px;border-radius:10px;isolation:isolate;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,.18),0 16px 40px -20px rgba(13,24,41,.12);transition:border-color 180ms ease-out,box-shadow 180ms ease-out,transform 180ms ease-out;overflow:hidden;--card-color:#1366A0;--card-rgb:23,121,184}
    /* FIX-5 2026-04-15: single-tonal cyan for hris (was 6-color rainbow) */
    .feat-card:nth-child(6n+1),
    .feat-card:nth-child(6n+2),
    .feat-card:nth-child(6n+3),
    .feat-card:nth-child(6n+4),
    .feat-card:nth-child(6n+5),
    .feat-card:nth-child(6n+6){--card-color:#0EA5E9;--card-rgb:14,165,233}
    .feat-card::before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:3px;background:linear-gradient(180deg,transparent 0%,var(--card-color) 15%,var(--card-color) 85%,transparent 100%);border-radius:0 3px 3px 0;transition:width 180ms ease-out,top 180ms ease-out,bottom 180ms ease-out;z-index:2}
    .feat-card::after{content:'';position:absolute;top:-80px;left:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(var(--card-rgb),.12) 0%,transparent 65%);pointer-events:none;z-index:0;opacity:.55;transition:opacity 180ms ease-out}
    .feat-card:hover{border-color:rgba(var(--card-rgb),.42);transform:translateY(-2px);box-shadow:0 1px 2px rgba(13,24,41,.05),0 14px 32px -14px rgba(var(--card-rgb),.22),0 18px 36px -18px rgba(13,24,41,.18)}
    .feat-card:hover::before{width:4px;top:10px;bottom:10px}
    .feat-card:hover::after{opacity:1}
    .feat-card > *{position:relative;z-index:1}
    /* Premium gradient SVG art slot — foreground illustration */
    .feat-icon{position:relative !important;top:auto;right:auto;width:64px !important;height:64px !important;background:none !important;border:none;border-radius:0;color:var(--card-color);opacity:1;margin:0 0 18px 0;padding:0;z-index:1;display:block;transition:transform 240ms ease-out}
    .feat-icon svg{width:100% !important;height:100% !important;overflow:visible}
    .feat-card:hover .feat-icon{transform:scale(1.04)}
    .feat-card h3{font-family:var(--font-h);font-size:22px;font-weight:800;letter-spacing:-.022em;color:#0D1829;line-height:1.15;margin:12px 0 10px;max-width:18ch}
    .feat-card p{font-family:var(--font-b);font-size:13.5px;font-weight:500;color:#5B6B7E;line-height:1.6;margin:0;max-width:42ch}

    /* Built Different comparison */
    .sec-diff{background:var(--off)}
    .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
    .diff-col{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:36px 32px;transition:all .3s var(--ease);position:relative;overflow:hidden}.diff-col:hover{box-shadow:var(--glass-shadow-hover);transform:translateY(-2px)}
    .diff-col.diff-vshr{border-top:3px solid var(--blue)}.diff-col.diff-generic{border-top:3px solid var(--border)}
    .diff-col-badge{display:inline-block;font-family:var(--font-b);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding:6px 14px;border-radius:20px;margin-bottom:20px}
    .diff-vshr .diff-col-badge{background:rgba(41,171,226,.1);color:var(--blue-dark)}.diff-generic .diff-col-badge{background:rgba(74,99,117,.08);color:var(--muted)}
    .diff-list{list-style:none;display:flex;flex-direction:column;gap:14px}
    .diff-list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-b);font-size:15px;color:var(--text);line-height:1.55}
    .diff-list li svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
    .diff-vshr .diff-list li svg{stroke:var(--green)}.diff-generic .diff-list li svg{stroke:var(--muted);opacity:.5}

    /* Stats Strip */
    .stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--navy);border-radius:20px;overflow:hidden}.stat-item{padding:40px 24px;text-align:center;position:relative}.stat-item+.stat-item::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.08)}.stat-number{font-family:var(--font-h);font-size:44px;font-weight:800;background:linear-gradient(135deg,#fff 0%,var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}.stat-label{font-family:var(--font-b);font-size:14px;font-weight:500;color:rgba(255,255,255,.5)}

    /* Cross-sell */
    .sec-cross{background:var(--off)}.cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.cross-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .3s var(--ease);text-decoration:none;display:block}.cross-card:hover{box-shadow:var(--glass-shadow-hover);transform:translateY(-4px)}.cross-card h3{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px}.cross-card p{font-family:var(--font-b);font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:12px}.cross-link{font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--blue)}.cross-card:hover .cross-link{color:var(--blue-dark)}

    /* CTA */
    .sec-cta{background:var(--off);border-top:none;padding:80px 32px;text-align:center;position:relative}.sec-cta::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:1200px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--border) 15%,var(--border) 85%,transparent 100%)}.cta-inner{max-width:600px;margin:0 auto}.cta-h2{font-family:var(--font-h);font-size:36px;font-weight:700;color:var(--text);margin-bottom:16px}.cta-sub{font-family:var(--font-b);font-size:17px;font-weight:400;color:var(--muted);margin-bottom:32px;line-height:1.65}.cta-phone, .btn-tel {display:block;margin-top:16px;font-family:var(--font-b);font-size:15px;font-weight:600;color:var(--blue)}.cta-phone:hover, .btn-tel:hover {color:var(--blue-dark)}
    .inline-quote-form{max-width:600px;margin:32px auto 0}.iq-form{display:flex;gap:12px;flex-wrap:wrap}.iq-input{flex:1;min-width:150px;padding:14px 18px;border:1.5px solid var(--border);border-radius:12px;background:var(--white);color:var(--text);font-size:15px;font-family:var(--font-b)}.iq-input::placeholder{color:var(--muted)}.iq-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,171,226,.15);outline:none}.iq-submit{padding:14px 28px;border:none;border-radius:12px;background:var(--orange);color:#fff;font-family:var(--font-h);font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(249,115,22,.25);transition:transform .15s,box-shadow .15s}.iq-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.35)}.iq-note{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}

    /* FOOTER */
    footer{background:#040E1A;padding:64px 32px 32px;color:rgba(255,255,255,.4);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 h3{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:16px}.ft-col a{display:block;font-family:var(--font-b);font-size:14px;color:rgba(255,255,255,.65);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,.26);text-decoration:none;transition:color .15s}.ft-legal a:hover{color:#fff}

    /* CALLBACK */
    .callback-widget{position:fixed;bottom:24px;right:24px;z-index:500}.callback-trigger{width:56px;height:56px;border-radius:50%;background:var(--orange);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(249,115,22,.3);transition:transform .2s ease,box-shadow .2s ease}.callback-trigger:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(249,115,22,.4)}.callback-trigger svg{width:24px;height:24px;stroke:#fff;fill:none}.callback-panel{display:none;position:absolute;bottom:70px;right:0;width:320px;background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(7,25,46,.15);padding:24px;transform-origin:bottom right}.callback-panel.open{display:block;animation:cbSlideUp .3s ease forwards}@keyframes cbSlideUp{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.callback-panel h3{font-family:var(--font-h);font-size:18px;font-weight:700;color:var(--navy);margin-bottom:4px}.callback-panel p{font-size:14px;color:var(--muted);margin-bottom:16px}.callback-panel input{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;margin-bottom:12px;font-family:var(--font-b)}.callback-panel input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,171,226,.15);outline:none}.callback-submit{width:100%;padding:12px;border:none;border-radius:10px;background:var(--orange);color:#fff;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 4px 14px rgba(249,115,22,.18)}.callback-success{text-align:center;padding:20px 0}.callback-success svg{width:48px;height:48px;stroke:#10B981;margin-bottom:12px}

    .mob-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:400;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:12px 16px;box-shadow:0 -4px 20px rgba(7,25,46,.08)}@media(max-width:768px){.mob-sticky-cta{display:flex;gap:10px;align-items:center}body{padding-bottom:72px}}.mob-sticky-cta .mob-cta-btn{flex:1;padding:14px 20px;border-radius:12px;font-family:var(--font-h);font-size:15px;font-weight:700;text-align:center;text-decoration:none;transition:transform .15s ease}.mob-sticky-cta .mob-cta-btn:active{transform:scale(.97)}.mob-sticky-cta .mob-cta-primary{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(249,115,22,.18)}.mob-sticky-cta .mob-cta-secondary{background:transparent;color:var(--navy);border:1.5px solid var(--border)}

    .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}.reveal.revealed{opacity:1;transform:translateY(0)}.page-hero .reveal{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}

    a.btn-primary,a.btn-cta-primary{color:#fff!important;text-decoration:none!important}a.btn-ghost{color:#fff!important;text-decoration:none!important}a.btn-nav-primary{color:#fff!important;text-decoration:none!important}a.mob-cta-primary{color:#fff!important;text-decoration:none!important}

    /* ── YOUR TEAM SECTION ─────────────────────────── */
    .svc-advisor-sec { background: var(--off); }
    .svc-advisor-sec .eyebrow {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue-dark);
      margin-bottom: 10px;
    }
    .svc-advisor-sec .sec-h2 {
      font-family: var(--font-h); font-size: clamp(24px, 3.2vw, 36px);
      font-weight: 800; color: var(--navy); letter-spacing: -.6px; line-height: 1.2;
    }
    .sec-960 {
      max-width: 960px; margin: 0 auto; padding: 0 32px;
    }
    .svc-adv-layout { display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: center; }
        .svc-adv-photo-wrap { display: flex; justify-content: center; position: relative; }
    .svc-adv-photo-bg { display: none; }
    .svc-adv-photo { width: 100%; max-width: 360px; min-height: 380px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(7,25,46,.05), 0 24px 64px rgba(7,25,46,.10); display: flex; flex-direction: column; padding: 28px 26px 24px; position: relative; overflow: hidden; }
    .svc-adv-photo::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-dark) 100%); }
    .svc-adv-photo svg { display:none; }
    .adv-card-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
    .adv-card-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:22px; font-weight:800; flex-shrink:0; overflow:hidden; }
    .adv-card-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
    .adv-card-name { font-family:var(--font-h); font-size:17px; font-weight:700; color:var(--text); margin:0; line-height:1.2; }
    .adv-card-role { font-family:var(--font-b); font-size:13px; color:var(--muted); margin-top:3px; }
    .adv-card-status { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:rgba(34,197,94,.12); color:#15803D; font-family:var(--font-h); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; align-self:flex-start; border:1px solid rgba(34,197,94,.28); }
    .adv-card-status::before { content:''; width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
    .adv-card-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
    .adv-card-stat { background:var(--off); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
    .adv-card-stat-label { font-family:var(--font-b); font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); }
    .adv-card-stat-value { font-family:var(--font-h); font-size:18px; font-weight:800; color:var(--text); margin-top:2px; line-height:1.1; }
    .adv-card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }
    .adv-card-tag { font-family:var(--font-b); font-size:11px; font-weight:600; color:var(--blue-dark); background:rgba(41,171,226,.10); border:1px solid rgba(41,171,226,.22); border-radius:999px; padding:4px 10px; }
    .svc-adv-text h2 { margin-bottom: 24px; }
    .svc-adv-text p { font-family: var(--font-b); font-size: 1rem; font-weight: 400; color: var(--text); line-height: 1.75; margin-bottom: 16px; }
    .svc-adv-pullquote { font-family: var(--font-h); font-weight: 600; font-size: 1.25rem; color: var(--navy); line-height: 1.45; padding-left: 20px; border-left: 3px solid var(--orange); margin: 24px 0; }
    .svc-adv-micro { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
    .svc-adv-micro-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-b); font-size: 0.875rem; font-weight: 500; color: var(--navy); }
    .svc-adv-micro-item svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 2.5; flex-shrink: 0; }
    .svc-adv-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
    .svc-adv-cta .btn-orange-solid {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--orange); color: #fff; border: none; border-radius: 10px;
      padding: 14px 28px; font-family: var(--font-b); font-size: 15px; font-weight: 700;
      text-decoration: none; cursor: pointer; width: fit-content;
      transition: background .2s, transform .2s;
    }
    .svc-adv-cta .btn-orange-solid:hover { background: #EA580C; transform: translateY(-2px); }
    .svc-adv-team-link {
      font-family: var(--font-b); font-size: 13px; font-weight: 600;
      color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    }
    .svc-adv-team-link:hover { color: var(--blue-dark); text-decoration: underline; }

    @media(max-width:1100px){.hero-inner{grid-template-columns:1fr}.hero-visual{padding-top:16px}.hero-mockup{max-width:400px;margin:0 auto}.hero-h1{font-size:42px}}
    @media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}.diff-grid{grid-template-columns:1fr}.stats-strip{grid-template-columns:repeat(3,1fr)}.cross-grid{grid-template-columns:1fr}.svc-adv-layout{grid-template-columns:1fr;gap:32px;text-align:center}.svc-adv-photo-wrap{order:-1}.svc-adv-pullquote{text-align:left}.svc-adv-micro{justify-content:center}.svc-adv-cta{align-items:center}}
    @media(max-width:768px){nav{display:none}.btn-nav-ghost{display:none}.ham{display:flex}.mob-overlay{display:block}.page-hero{padding:40px 24px 48px;min-height:auto}.hero-h1{font-size:30px}.hero-sub{font-size:17px}.hero-ctas{flex-direction:column}.hero-ctas a{width:100%;justify-content:center}.hero-stats{gap:20px}.hero-stat-num{font-size:28px}.sec{padding:64px 20px}.sec-h2{font-size:28px}.cta-h2{font-size:28px}.feat-grid{grid-template-columns:1fr}.ft-top{grid-template-columns:1fr 1fr 1fr;gap:32px}.breadcrumb{padding:12px 24px 0}.sec-cta{padding:56px 24px}:root{--glass-shadow:0 2px 8px rgba(7,25,46,.04),0 4px 16px rgba(7,25,46,.03);--shadow-md:0 2px 12px rgba(7,25,46,.06)}}
    @media(max-width:480px){.ft-top{grid-template-columns:1fr}.stats-strip{grid-template-columns:1fr}.hero-stats{flex-direction:column;gap:16px}.mock-row{flex-direction:column}}

    /* ══════════════════════════════════
       STRIPE-QUALITY VISUAL PASS
    ══════════════════════════════════ */

    /* ── Hero typography: clamp scale ── */
    .hero-h1 { font-size: clamp(32px, 4vw, 52px) !important; }
    .sec-h2  { font-size: clamp(26px, 3vw, 36px) !important; }
    .page-hero { padding: 72px 32px 80px !important; }

    /* ── Gradient text on hero accent word ── */
    .gtxt,
    .grad-word {
      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;
      color: transparent;
    }

    /* 1. Hero grid overlay */
    .page-hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(to right, rgba(41,171,226,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(41,171,226,.05) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, black 60%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, black 60%, transparent 100%);
      pointer-events: none;
    }

    /* 2. .btn-primary shimmer — canonical version now in buttons-v2.css
       (sitewide). Removed legacy infinite shimmer-sweep override that
       violated the no-continuous-animation rule (memory 2026-04-21). */

    /* 3. Product mockup edge (.hero-mockup)
       2026-06-01: the rotating conic "border beam" bled through the 8%-opaque
       ::after cover and swept the card INTERIOR like a disco ball / lighthouse
       (Ryan flagged it twice). Root cause: the beam was never masked to the
       border, so the whole orange/cyan wedge showed through the glass and
       spun 360° every 4s. Replaced with a STATIC lit-from-top gradient glass
       edge via the border-mask trick (paint the ring only, no fill, no spin).
       The card's own CONTENT animations (Active pulse, number flash) carry the
       life — consistent with "animate the screen content, not the chrome". */
    .bb-wrap {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
    }
    .bb-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.25px;
      background: linear-gradient(155deg,
        rgba(255,255,255,.55) 0%,
        rgba(120,200,245,.34) 24%,
        rgba(255,255,255,.05) 56%,
        rgba(255,255,255,.12) 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      z-index: 0;
      pointer-events: none;
    }
    .bb-wrap::after {
      content: '';
      position: absolute;
      inset: 2px;
      border-radius: inherit;
      background: rgba(9,28,48,.30);
      backdrop-filter: blur(20px);
      z-index: 0;
    }
    .bb-wrap > * { position: relative; z-index: 1; }
    @keyframes bb-spin {
      to { --bb-angle: 360deg; }
    }
    @@property --bb-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    /* 4. Spotlight hover on feature cards */
    .spot-card {
      position: relative;
      overflow: hidden;
    }
    .spot-card::before {
      content: '';
      position: absolute;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(41,171,226,.10) 0%, transparent 70%);
      transform: translate(var(--spot-x, -200px), var(--spot-y, -200px));
      pointer-events: none;
      z-index: 0;
      transition: opacity .3s;
      opacity: 0;
    }
    .spot-card:hover::before {
      opacity: 1;
    }
    .spot-card > * { position: relative; z-index: 1; }

    /* 5. Bouncy card hover */
    .feat-card {
      transition: transform .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s ease, border-left-color .3s ease !important;
    }
    .feat-card:hover {
      transform: translateY(-8px) !important;
      box-shadow: 0 20px 40px rgba(7,25,46,.10), 0 0 0 1.5px rgba(41,171,226,.15) !important;
      border-left-color: var(--blue) !important;
    }

    /* 6. Navy/white section rhythm via gflow gradient */
    @keyframes gflow {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* 7. Reduced motion guard */
    @media (prefers-reduced-motion: reduce) {
      .bb-wrap::before     { animation: none !important; }
      .feat-card           { transition: none !important; }
      .spot-card::before   { display: none !important; }
    }

    /* 6. Platform integration node visual */
    .integration-visual {
      display: flex; align-items: center; justify-content: center;
      padding: 48px 0 32px;
      position: relative;
    }
    .int-hub {
      width: 80px; height: 80px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 2;
      box-shadow: 0 0 0 8px rgba(41,171,226,.12), 0 8px 24px rgba(41,171,226,.25);
    }
    .int-hub svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 1.8; }
    .int-nodes {
      display: flex; gap: 0;
      position: relative; align-items: center;
    }
    .int-node {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      position: relative;
    }
    .int-node-circle {
      width: 52px; height: 52px; border-radius: 50%;
      background: #fff; border: 1.5px solid rgba(41,171,226,.2);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(7,25,46,.08);
      position: relative; z-index: 2;
    }
    .int-node-circle svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.8; }
    .int-node-label {
      font-family: var(--font-b); font-size: 11px; font-weight: 600;
      color: var(--muted); text-align: center; max-width: 72px; line-height: 1.3;
    }
    .int-line {
      width: 40px; height: 1.5px;
      background: linear-gradient(90deg, rgba(41,171,226,.3), rgba(41,171,226,.6));
      position: relative; z-index: 1; flex-shrink: 0;
    }
    .int-line::after {
      content: '';
      position: absolute; right: -4px; top: -3px;
      border: 4px solid transparent;
      border-left: 6px solid rgba(41,171,226,.5);
    }
    .int-wrap {
      display: flex; align-items: flex-start; gap: 0;
      flex-wrap: wrap; justify-content: center; gap: 12px;
    }
    @media (max-width: 1024px) {
      .integration-visual { flex-direction: column; }
      .int-line { width: 1.5px; height: 30px;
        background: linear-gradient(180deg, rgba(41,171,226,.3), rgba(41,171,226,.6));
      }
      .int-line::after { display: none; }
    }

    /* Advisor section compact padding */
    .sec--advisor { padding-top: 24px; padding-bottom: 24px; }

    /* 8. Section background alternation.
       Navy-band bands (.svc-midcta / .svc-proof / .svc-cta) excluded so
       white type stays on navy bg — without exclusion, WCAG contrast breaks
       (fixed 2026-05-20 P0 a11y sweep). */
    .sec:not(.sec-diff):not(.svc-midcta):not(.svc-proof):not(.svc-cta):not(.svc-platform):not(.svc-hero) {
      background: linear-gradient(180deg, #fff 0%, var(--off) 100%);
    }
    .sec-diff {
      background: linear-gradient(180deg, var(--off) 0%, #fff 100%);
    }
  
    nav { display: flex; align-items: center; }
    .nav-item { position: relative; display: flex; align-items: center; }
    .nav-item::after { content:''; position:absolute; top:100%; left:-8px; right:-8px; height:12px; }
    .nav-link, .nav-dd-trigger {
      font-family: var(--font-b); font-size: 14px; font-weight: 500;
      color: var(--muted); text-decoration: none;
      padding: 8px 12px; border-radius: 8px; border: 1px solid transparent;
      display: inline-flex; align-items: center; gap: 4px;
      background: none; cursor: pointer;
      transition: color .15s, background .2s, border-color .2s, box-shadow .2s;
      -webkit-tap-highlight-color: transparent; white-space: nowrap;
    }
    .nav-link:hover, .nav-dd-trigger:hover, .nav-item:hover > .nav-dd-trigger {
      color: var(--text); background: rgba(255,255,255,.7);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border-color: rgba(226,236,244,.6); box-shadow: 0 1px 4px rgba(7,25,46,.05);
    }
    .nav-link.active, .nav-dd-trigger.active { color: var(--text); font-weight: 600; }
    .dd-chevron { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; fill: none; transition: transform .2s; flex-shrink: 0; }
    .nav-item:hover .dd-chevron { transform: rotate(180deg); }

    /* ── DROPDOWN PANEL ── */
    .dd-menu {
      position: absolute; top: calc(100% + 10px); left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: var(--white); border: 1px solid rgba(220,232,241,.9);
      border-radius: 16px; padding: 10px;
      box-shadow: 0 20px 60px rgba(7,25,46,.13), 0 4px 16px rgba(7,25,46,.07);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .18s, transform .18s, visibility 0s linear .18s;
      z-index: 400; min-width: 440px;
    }
    .nav-item:hover .dd-menu {
      opacity: 1; visibility: visible; pointer-events: all;
      transform: translateX(-50%) translateY(0);
      transition: opacity .18s, transform .18s, visibility 0s;
    }
    .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .dd-menu a {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: 10px;
      font-size: 13.5px; font-weight: 500; color: var(--text);
      text-decoration: none; transition: background .12s, color .12s; white-space: nowrap;
    }
    .dd-menu a:hover { background: var(--off); color: var(--blue-dark); }
    .dd-menu a.active { color: var(--blue-dark); font-weight: 600; background: rgba(41,171,226,.08); }
    .dd-ico {
      width: 30px; height: 30px; border-radius: 8px;
      background: linear-gradient(135deg, rgba(41,171,226,.13), rgba(23,121,184,.07));
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .dd-ico svg { width: 15px; height: 15px; stroke: var(--blue-dark); stroke-width: 1.8; fill: none; }
    .dd-res .dd-ico { background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(249,115,22,.06)); }
    .dd-res .dd-ico svg { stroke: var(--orange); }
    .dd-divider { height: 1px; background: var(--border); margin: 6px 0; }
    .dd-all {
      display: flex; justify-content: center; align-items: center; gap: 5px;
      padding: 8px 10px 4px; font-size: 13px; font-weight: 600;
      color: var(--blue-dark); text-decoration: none; border-radius: 8px;
      transition: background .12s;
    }
    .dd-all:hover { background: var(--off); }
    .dd-all svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; }
    .dd-res { min-width: 220px; }

    /* ── MOBILE DRAWER SECTIONS ── */
    .mob-section-head {
      padding: 10px 20px 4px; font-size: 12px; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
    }
    .mob-section + .mob-section { border-top: 1px solid var(--off); }
    .mob-nav .mob-view-all { color: var(--blue-dark) !important; font-size: 13px !important; }

    .hd-right { display: flex; align-items: center; gap: 10px; }
    .btn-nav {
      font-family: var(--font-b); font-size: 13.5px; font-weight: 600;
      padding: 9px 18px; border-radius: 8px; cursor: pointer;
      text-decoration: none; transition: all .15s; min-height: 40px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .btn-nav-ghost { color: var(--text); border: 1px solid var(--border); background: var(--white); }
    .btn-nav-ghost:hover { background: var(--off); border-color: #CBD5E1; }
    .btn-nav-primary { color: #fff; background: var(--orange); border: 1px solid transparent; }
    .btn-nav-primary:hover { background: #EA6C10; transform: translateY(-1px); box-shadow: var(--glow-orange); }

    /* ── HAMBURGER ───────────────────────────────────────── */
    .ham {
      display: none; width: 44px; height: 44px;
      border: none; background: none; cursor: pointer;
      border-radius: 10px; align-items: center; justify-content: center;
      transition: background .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .ham:hover { background: var(--off); }
    .ham svg { width: 22px; height: 22px; stroke: var(--text); stroke-width: 2; fill: none; }

    /* ── MOBILE DRAWER ───────────────────────────────────── */
    .mob-overlay {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(7,25,46,.45); backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0; transition: opacity .25s; pointer-events: none;
    }
    .mob-overlay.open { opacity: 1; pointer-events: all; }

    .mob-drawer {
      position: fixed; top: 0; right: -320px; bottom: 0; z-index: 250;
      width: 300px; background: var(--white);
      box-shadow: var(--shadow-xl);
      transition: right .32s var(--ease);
      display: flex; flex-direction: column;
    }
    .mob-drawer.open { right: 0; }

    .mob-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 20px; border-bottom: 1px solid var(--border);
    }
    .mob-head img { height: 34px; }
    .mob-close {
      width: 44px; height: 44px;
      border: 1px solid var(--border); background: var(--off);
      border-radius: 8px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; line-height: 1; color: var(--muted);
      transition: all .15s; font-family: system-ui;
    }
    .mob-close:hover { background: var(--border); color: var(--text); }

    .mob-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
    .mob-nav a {
      display: flex; align-items: center; padding: 15px 20px;
      font-family: var(--font-b); font-size: 15px; font-weight: 500;
      color: var(--text); text-decoration: none;
      border-bottom: 1px solid var(--off); transition: all .15s;
    }
    .mob-nav a:hover { background: var(--off); color: var(--blue-dark); padding-left: 26px; }

    .mob-footer {
      padding: 18px 20px; border-top: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 10px;
    }
    .mob-cta {
      font-family: var(--font-b); font-size: 14.5px; font-weight: 700;
      text-align: center; text-decoration: none;
      padding: 13px 24px; border-radius: 10px;
      min-height: 48px; display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .mob-cta-primary { background: var(--orange); color: #fff; }
    .mob-cta-primary:hover { background: #EA6C10; }
    .mob-cta-secondary { background: var(--off); color: var(--text); border: 1px solid var(--border); }
    .mob-cta-secondary:hover { background: var(--border); }
    /* ── FAQ ACCORDION ────────────────────────────────── */
    .svc-faq { padding: 80px 32px; background: var(--white); }
    .svc-faq .sec-head { margin-bottom: 48px; text-align: center; }
    .svc-faq .sec-head h2 { font-family: var(--font-h); font-size: clamp(24px,3.2vw,36px); font-weight: 800; color: var(--navy); margin-bottom: 12px; }
    .svc-faq .sec-head p { font-family: var(--font-b); font-size: 16px; color: var(--muted); max-width: 600px; margin: 0 auto; }
    .faq-list { max-width: 760px; margin: 0 auto; }
    .faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: box-shadow .2s; }
    .faq-item.open { box-shadow: 0 2px 12px rgba(7,25,46,.06); }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; text-align: left; transition: background .15s; }
    .faq-q:hover { background: var(--off); }
    .faq-q span { font-family: var(--font-b); font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.4; padding-right: 16px; }
    .faq-chevron { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; flex-shrink: 0; transition: transform .2s; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
    .faq-item.open .faq-a { max-height: 400px; }
    .faq-a p { padding: 0 24px 20px; font-family: var(--font-b); font-size: 14.5px; color: var(--muted); line-height: 1.7; }
/*callback-widget-mobile-hide-v1*/
@media (max-width: 767px) {
  .callback-widget { display: none !important; }
  .mob-sticky-cta { display: flex !important; }
}
/* 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 */
@media (max-width: 767px) {
  .btn, button, .btn-primary, .btn-secondary, .btn-outline, .cta, [class*="btn-"], 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, .small, .tag, .badge, .meta, .label, .desc, [class*="-desc"], [class*="-meta"], [class*="-label"], [class*="-tag"], [class*="-badge"], [class*="-time"], [class*="-name"], [class*="-val"], [class*="-num"], [class*="-txt"], [class*="-trend"], [class*="-sub"], [class*="-item"], [class*="-sep"] {
    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; }

/* faq-q text override (markup has text directly in button, no span) — applies to .faq-item children */
.faq-item{background:#fff}
.faq-q{font-family:var(--font-b)!important;font-size:15.5px!important;font-weight:600!important;color:var(--navy)!important;background:#fff!important;line-height:1.45;gap:14px;width:100%;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;text-align:left;transition:background .15s}
.faq-q:hover{background:var(--off)!important}
.faq-q svg{width:18px;height:18px;flex-shrink:0;stroke:var(--blue-dark);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-item.open .faq-a{max-height:600px}
.faq-a-inner{padding:0 24px 22px;font-family:var(--font-b);font-size:15px;line-height:1.65;color:var(--muted)}
.faq-a-inner a{color:var(--blue-dark);text-decoration:underline}
    /* ── BORDER-RADIUS NORMALIZATION ─────────────── */
    .pain-card, .tier1-card, .tier2-card, .diff-card, .cap-card, .cross-card { border-radius: var(--r-md, 12px); }

/* §2 */
on each service page. Safe to ship more than once;
   selectors are scoped so they never collide with other pages. */
:root {
  --svc-sec-py: 96px;
  --svc-sec-py-mobile: 56px;
  --svc-gap: 48px;
  --svc-gap-mobile: 28px;
}

/* Unify the base .sec padding used by service pages. */
main .sec,
main section.sec,
main .svc-section,
main .sec-capabilities,
main .sec-diff,
main .sec-platform,
main .sec-proof,
main .sec-integration,
main .svc-faq,
main .svc-advisor-sec,
main .sec-hero + section,
main .sec-cta {
  padding-top: var(--svc-sec-py);
  padding-bottom: var(--svc-sec-py);
}

/* Tighten the gap between adjacent same-color sections so the page breathes
   at 96/48 cadence instead of 128/64. */
main section + section { margin-top: 0; }

/* Tabular lining figures on every stat number in the service pages. Keeps
   columns aligned and reads like Linear. */
main .stat-number,
main .stat-figure,
main .metric-value,
main .svc-stat-num,
main .svc-kpi-num,
main .diff-card strong,
main .svc-proof-num,
main .svc-pricing-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  letter-spacing: -.015em;
}

/* H1 prominence — service hero H1 sits at clamp(34, 5vw, 56) across pages,
   but a few broke to 28px on mobile. Force the floor. */
@media (max-width: 560px) {
  main .payroll-hero h1,
  main .benefits-hero h1,
  main .hero h1,
  main .svc-hero h1 {
    font-size: clamp(30px, 7vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.022em !important;
  }
  main .payroll-hero,
  main .benefits-hero,
  main .svc-hero {
    padding-top: 72px !important;   /* push H1 above fold on mobile */
    padding-bottom: 40px !important;
    min-height: auto !important;
  }
}

/* Responsive section rhythm on mobile. */
@media (max-width: 720px) {
  main .sec,
  main section.sec,
  main .svc-section,
  main .sec-capabilities,
  main .sec-diff,
  main .sec-platform,
  main .sec-proof,
  main .sec-integration,
  main .svc-faq,
  main .svc-advisor-sec {
    padding-top: var(--svc-sec-py-mobile);
    padding-bottom: var(--svc-sec-py-mobile);
  }
}

/* CTA button consistency — every primary CTA across the 9 pages renders at the
   same height (48px desktop / 44px mobile). Stops the zoo of button heights. */
main a.btn-primary,
main .btn-primary,
main .cta-primary,
main .svc-cta-primary,
main .payroll-hero .cta-primary,
main .benefits-hero .cta-primary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  font-weight: 600;
  letter-spacing: -.005em;
}
@media (max-width: 560px) {
  main a.btn-primary,
  main .btn-primary,
  main .cta-primary,
  main .svc-cta-primary { min-height: 44px; padding: 0 18px; font-size: 15px; }
}

/* Improve the diff-card spec so the three-card "what makes us different"
   row on every service page matches the golden-v2 restraint: hairline
   border, tighter radius, precise metric type. */
main .sec-diff .diff-card,
main .svc-diff .diff-card {
  border-radius: 14px;
  border: 1px solid rgba(13, 24, 41, .08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(13,24,41,.02) inset,
    0 6px 24px -8px rgba(13,24,41,.08),
    0 2px 8px -2px rgba(13,24,41,.06);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
}

/* Final touch — heading leading on H2 across service pages.
   Previously rendered at 1.35 which reads blog-y. */
main section h2 {
  line-height: 1.15;
  letter-spacing: -.018em;
}

/* Hide any residual ghost-number DOM that the HTML scrub missed. */
main .ghost-number { display: none !important; }

/* §3 */
@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; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mob-sticky-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HRIS SIGNATURE DESIGN — 2026-05-19 pass 9.

   The HRIS dashboard mockup is the page's signature. Adding subtle live-
   system motion: pulsing window dots, breathing "Active" badges, staggered
   row fade-in feels like a real platform render.
   ═══════════════════════════════════════════════════════════════════════════ */

/* macOS-style window dots: gentle color pulse to feel "alive" */
.hero-mockup.bb-wrap .mock-top {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-mockup.bb-wrap .mock-top .mock-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: background .3s ease;
}
.hero-mockup.bb-wrap .mock-top .mock-dot:nth-child(1) { background: #FF5F57; }
.hero-mockup.bb-wrap .mock-top .mock-dot:nth-child(2) { background: #FEBC2E; }
.hero-mockup.bb-wrap .mock-top .mock-dot:nth-child(3) { background: #28C840; }

/* "Active" badges on each list row — staggered live-pulse so the whole
   list reads as "currently synced" without being kinetic. */
.mock-list-item .mock-list-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #6FE0AF;
  font-family: var(--font-b); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
}
.mock-list-item .mock-list-badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: hris-active-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
.mock-list-item:nth-child(2) .mock-list-badge::before { animation-delay: .8s; }
.mock-list-item:nth-child(3) .mock-list-badge::before { animation-delay: 1.6s; }
@keyframes hris-active-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

/* "247 Employees" + "12 PTO Requests" — soft data-update flash every 8s
   to suggest the dashboard is pulling fresh numbers. */
.mock-card-mini-num {
  animation: hris-data-flash 8s cubic-bezier(.45, 0, .55, 1) infinite;
}
.mock-card-mini:nth-child(2) .mock-card-mini-num { animation-delay: 2.6s; }
.mock-card-mini:nth-child(3) .mock-card-mini-num { animation-delay: 5.2s; }
@keyframes hris-data-flash {
  0%, 88%, 100% { color: #fff; }
  92%, 96%      { color: #6FE0AF; }
}

@media (prefers-reduced-motion: reduce) {
  .mock-list-item .mock-list-badge::before,
  .mock-card-mini-num { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   HRIS HERO — premium brand-lit stage (2026-06-01)
   ─────────────────────────────────────────────────────────────────────────
   Kills the hris-hero.jpeg stock background (a "laptop of charts" that read
   as a disco ball AND duplicated the glass product card — two dashboards
   fighting). New treatment follows the Deel / Linear / Stripe B2B school: a
   calm dark stage + ONE brand-lit aurora behind the product card, so the live
   dashboard mockup is the single, unmistakable hero visual.

   Scoped with `body.hris #svc-hero` (ID specificity) to beat the shared
   `body.hris .svc-hero-bg` photo rules in svc-components.css without
   !important. The other 19 service pages keep the photo system untouched.
   (hris-page.css is only enqueued on /hris/, but the body.hris prefix keeps
   it inert even if the file is ever loaded elsewhere — #svc-hero is shared.)
   ════════════════════════════════════════════════════════════════════════ */

/* Base stage — deepen the navy and pool a little light up toward the card.
   Replaces .svc-hero's orange dot-grain so the engineered grid below reads
   cleanly (no dot + line moiré). */
body.hris #svc-hero.svc-hero {
  background-image:
    radial-gradient(120% 92% at 80% 4%, rgba(18,54,90,.60) 0%, transparent 58%),
    linear-gradient(168deg, #061528 0%, #0A2740 52%, #0C2F4E 100%);
  background-size: 100% 100%, 100% 100%;
}

/* .svc-hero-bg → the brand aurora that haloes the product card.
   No photo, no Ken Burns. Warm orange→magenta→purple bloom on the right
   (behind the card), cool cyan counter-glow lower-left for balance. */
body.hris #svc-hero .svc-hero-bg {
  background-image:
    radial-gradient(44% 58% at 80% 40%, rgba(249,115,22,.22) 0%, rgba(232,18,92,.12) 36%, transparent 72%),
    radial-gradient(38% 50% at 90% 74%, rgba(123,33,162,.18) 0%, transparent 70%),
    radial-gradient(54% 56% at 4% 94%, rgba(41,171,226,.14) 0%, transparent 64%);
  opacity: 1;
  animation: none;
}

/* .svc-hero-bg::after → one faint engineered grid, masked so it only appears
   on the right behind the card and fades out well before the headline.
   Replaces the photo scrim (no longer needed without an image). */
body.hris #svc-hero .svc-hero-bg::after {
  background:
    linear-gradient(rgba(120,190,240,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,190,240,.06) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 26%, #000 24%, transparent 70%);
          mask-image: radial-gradient(120% 110% at 100% 26%, #000 24%, transparent 70%);
  opacity: .7;
}

/* Retune ambient orbs to the brand glow; pull the warm one toward the card
   so the halo feels deliberate rather than a random blob. */
body.hris #svc-hero .svc-orb-1 { background: #29ABE2; opacity: .26; top: -70px; left: -50px; }
body.hris #svc-hero .svc-orb-2 { background: #F07128; opacity: .30; width: 300px; height: 300px; right: 5%; bottom: -30px; }

/* Mobile: the card stacks below the fold, so re-center the warm bloom behind
   the headline for a subtle premium wash instead of an off-screen-right glow. */
@media (max-width: 900px) {
  body.hris #svc-hero .svc-hero-bg {
    background-image:
      radial-gradient(70% 44% at 60% 8%, rgba(249,115,22,.18) 0%, rgba(232,18,92,.10) 40%, transparent 74%),
      radial-gradient(80% 50% at 50% 100%, rgba(41,171,226,.12) 0%, transparent 70%);
  }
  body.hris #svc-hero .svc-hero-bg::after {
    -webkit-mask-image: radial-gradient(140% 80% at 70% 0%, #000 18%, transparent 66%);
            mask-image: radial-gradient(140% 80% at 70% 0%, #000 18%, transparent 66%);
    opacity: .5;
  }
}