@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* phrhome.css Complete stylesheet for PeoplesHR Website Includes: Homepage styles + Solutions page styles Last updated: April 2026 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Visually hides content while keeping it in the accessibility tree —
   used for accessible H1s on pages whose visual hero has no text
   (e.g. a pure image/video hero) so page structure stays correct
   without changing what's on screen. */
.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;}
.wnp-caps-title{font-size:1.6rem;font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:24px;}
.wnp-form-caption{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:20px;}
:root{
  --navy:#0d1b3e;
  --blue:#2563eb;
  --blue-light:#3b82f6;
  --blue-bright:#1d9bf0;
  --text-dark:#0d1b3e;
  --text-body:#374151;
  --text-muted:#6b7280;
  --bg-white:#ffffff;
  --bg-light:#f8fafc;
  --bg-card:#f1f5f9;
  --border:#e2e8f0;
  --radius:16px;
}
html{scroll-behavior:smooth;}
/* overflow-x:clip (not hidden) -- hidden here would make body a scroll
   container, which breaks position:sticky on .nv-bar (the site header)
   everywhere it's used; clip prevents the same horizontal bleed without
   that side effect. */
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text-dark);background:#fff;overflow-x:clip;overflow-y:visible;}

/* NAV */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 48px;
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
}.hero
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.logo-text{font-weight:600;font-size:18px;color:#3d3d3d;letter-spacing:-0.2px;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-dark);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--blue);}
.btn-demo{
  background:var(--blue);color:#fff;
  font-size:14px;font-weight:600;
  padding:10px 22px;border-radius:8px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s,transform .15s;
}
.btn-demo:hover{background:#1d4ed8;transform:translateY(-1px);}

/* MEGA DROPDOWN */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-item > a{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--text-dark);text-decoration:none;transition:color .2s;padding:4px 0;}
.nav-item > a:hover,.nav-item:hover > a{color:var(--blue);}
.nav-item > a .caret{width:14px;height:14px;transition:transform .25s;opacity:0.5;}
.nav-item:hover > a .caret{transform:rotate(180deg);}

.mega-dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid #e2e8f0;border-radius:16px;
  box-shadow:0 20px 60px rgba(13,27,62,0.12),0 4px 16px rgba(13,27,62,0.06);
  padding:28px;width:600px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  transform:translateX(-50%) translateY(8px);
  z-index:200;
}
.nav-item:hover .mega-dropdown{
  opacity:1;visibility:visible;pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.mega-dropdown::before{
  content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;background:#fff;
  border-left:1px solid #e2e8f0;border-top:1px solid #e2e8f0;
  border-radius:2px;rotate:45deg;
}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;}
.mega-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;border-radius:10px;cursor:pointer;
  text-decoration:none;transition:background .15s;
}
.mega-item:hover{background:#f0f6ff;}
.mega-icon{
  width:40px;height:40px;border-radius:10px;
  background:#f8fafc;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mega-text h4{font-size:14px;font-weight:600;color:#0d1b3e;margin-bottom:3px;line-height:1.3;}
.mega-text p{font-size:12px;color:var(--text-muted);line-height:1.4;}
.mega-divider{grid-column:1/-1;height:1px;background:#f1f5f9;margin:8px 0;}
.mega-footer{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  background:#f8fafc;border-radius:10px;padding:14px 18px;margin-top:4px;
}
.mega-footer-text{font-size:13.5px;font-weight:600;color:#0d1b3e;}
.mega-footer-cta{
  display:flex;align-items:center;gap:6px;
  background:#0d1b3e;color:#fff;
  font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;
  text-decoration:none;transition:background .2s;white-space:nowrap;
}
.mega-footer-cta:hover{background:var(--blue);}

/* Solutions dropdown overrides */
.solutions-dropdown{width:860px;left:0;transform:translateX(-20%) translateY(8px);}
.nav-item:hover .solutions-dropdown{transform:translateX(-20%) translateY(0);}
.solutions-grid{display:flex;gap:0;}
.solutions-col{flex:1;padding:0 4px;}
.solutions-col-mid{flex:0 0 240px;}
.solutions-col-heading{
  display:block;font-size:13px;font-weight:600;color:var(--blue);
  text-decoration:underline;text-underline-offset:3px;
  margin-bottom:12px;padding:0 12px;letter-spacing:0.2px;
}
.solutions-divider{width:1px;background:#f1f5f9;margin:0 8px;flex-shrink:0;}
.solutions-dropdown .mega-item{padding:8px 10px;}
.solutions-dropdown .mega-icon{width:36px;height:36px;border-radius:8px;}
.solutions-dropdown .mega-text h4{font-size:13px;}
.solutions-dropdown .mega-text p{font-size:11px;}

/* Simple single-col dropdowns */
.simple-dropdown{width:320px;left:50%;transform:translateX(-50%) translateY(8px);}
.nav-item:hover .simple-dropdown{transform:translateX(-50%) translateY(0);}
.simple-col{display:flex;flex-direction:column;gap:2px;}
.simple-divider{height:1px;background:#f1f5f9;margin:8px 4px;}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding:80px 48px 60px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,#f0f6ff 100%);
}
.hero-left{flex:1;max-width:540px;z-index:2;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid #cbd5e1;border-radius:100px;
  padding:6px 16px;font-size:11px;font-weight:600;
  letter-spacing:1.2px;color:var(--text-body);
  margin-bottom:36px;
  background:rgba(255,255,255,0.8);
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);}
.hero h1{
  font-size:58px;font-weight:600;line-height:1.08;
  letter-spacing:-2px;color:#0d1b3e;
  margin-bottom:28px;
}
.hero h1 .accent{color:var(--blue);}
.hero-body{font-size:17px;color:var(--text-body);line-height:1.65;margin-bottom:40px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
.btn-primary{
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:600;
  padding:14px 28px;border-radius:10px;
  text-decoration:none;display:flex;align-items:center;gap:8px;
  transition:all .2s;box-shadow:0 4px 16px rgba(37,99,235,0.3);
}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,0.4);}
.btn-outline{
  background:#fff;color:#0d1b3e;
  font-size:15px;font-weight:600;
  padding:14px 28px;border-radius:10px;
  text-decoration:none;border:1.5px solid #cbd5e1;
  transition:all .2s;
}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}
.trust-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-body);}
.trust-avatars{display:flex;align-items:center;}
.trust-avatar{
  width:36px;height:36px;border-radius:50%;
  border:2.5px solid #fff;overflow:hidden;
  margin-left:-10px;flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
  background:#f1f5f9;
}
.trust-avatar:first-child{margin-left:0;}
.trust-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.trust-line b{color:#0d1b3e;}

/* hero right image */
.hero-right{
  flex:1;display:flex;justify-content:flex-end;
  position:relative;z-index:2;padding-left:48px;
}
.hero-banner-img{
  width:100%;
  border-radius:20px;
  object-fit:contain;
  filter:drop-shadow(0 20px 60px rgba(13,27,62,0.14));
}

/* LEXI SECTION */
.lexi-section{
  padding:100px 48px;
  background:#fff;
  display:flex;align-items:center;gap:80px;
}
.lexi-ui-img{
  flex:0 0 420px;width:420px;
  border-radius:20px;
  object-fit:contain;
  filter:drop-shadow(0 8px 48px rgba(13,27,62,0.12));
}

.lexi-copy{flex:1;}
.section-label{
  font-size:11px;font-weight:600;letter-spacing:1.5px;
  color:var(--blue);margin-bottom:16px;
}
.lexi-copy h2{
  font-size:42px;font-weight:600;line-height:1.1;letter-spacing:-1.5px;
  color:#0d1b3e;margin-bottom:24px;
}
.lexi-copy h2 span{color:var(--blue);}
.lexi-copy p{font-size:15px;color:var(--text-body);line-height:1.7;margin-bottom:16px;}
.lexi-chips{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.lexi-chip{
  display:flex;align-items:center;gap:10px;
  background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;
  padding:12px 18px;font-size:13.5px;font-weight:600;color:#0d1b3e;
  cursor:pointer;transition:all .2s;
}
.lexi-chip:hover{border-color:var(--blue);background:#eff6ff;color:var(--blue);}
.chip-icon{
  width:28px;height:28px;border-radius:7px;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}

/* MODULES TAB LAYOUT */
.modules-section{padding:100px 48px;background:#f8fafc;}
.section-center{text-align:center;margin-bottom:60px;}
.section-center h2{font-size:40px;font-weight:600;letter-spacing:-1.5px;color:#0d1b3e;margin-bottom:14px;}
.section-center p{font-size:16px;color:var(--text-muted);}
.explore-link{font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:4px;transition:gap .2s;}
.explore-link:hover{gap:8px;}

.modules-tab-wrap{display:flex;gap:28px;align-items:flex-start;}
.module-tabs{flex:0 0 188px;display:flex;flex-direction:column;gap:4px;}
.module-tab{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:12px;cursor:pointer;
  transition:all .2s;color:var(--text-muted);
  font-size:14.5px;font-weight:600;
  border:1.5px solid transparent;position:relative;
}
.module-tab:hover{background:#fff;color:#0d1b3e;border-color:#e2e8f0;}
.module-tab.active{background:#fff;color:var(--blue);border-color:#bfdbfe;box-shadow:0 2px 12px rgba(37,99,235,0.1);}
.mtab-icon{width:20px;height:20px;flex-shrink:0;display:flex;}
.module-tab span{flex:1;}
.mtab-arrow{flex-shrink:0;opacity:0;transition:opacity .2s;}
.module-tab.active .mtab-arrow{opacity:1;color:var(--blue);}
.module-tab.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:2px;background:var(--blue);}

.module-preview-panel{flex:1;background:#fff;border-radius:20px;border:1px solid #e2e8f0;overflow:visible;box-shadow:0 8px 40px rgba(13,27,62,0.08);}

.preview-content{display:none;}
.preview-content.active{display:block;}
.preview-img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:0 0 16px 16px;
}

.preview-sidebar{width:140px;flex-shrink:0;background:#1e293b;padding:16px 0;display:flex;flex-direction:column;gap:2px;}
.psb-logo{padding:8px 16px 14px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:6px;}
.psb-item{padding:9px 16px;font-size:12px;color:rgba(255,255,255,0.5);cursor:pointer;transition:all .15s;}
.psb-item.active{background:rgba(37,99,235,0.3);color:#fff;}
.psb-item:hover:not(.active){background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.8);}

.preview-main{flex:1;overflow:hidden;display:flex;flex-direction:column;background:#fff;}
.prev-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #f1f5f9;}
.prev-title{font-size:15px;font-weight:600;color:#0d1b3e;}
.prev-btn-blue{background:var(--blue);color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:8px;cursor:pointer;}

.prev-stats-row{display:flex;gap:10px;padding:12px 20px;}
.prev-stat-card{flex:1;background:#f8fafc;border:1px solid #f1f5f9;border-radius:10px;padding:11px;}
.psc-num{font-size:20px;font-weight:600;letter-spacing:-0.5px;}
.psc-label{font-size:10px;color:var(--text-muted);margin-top:2px;font-weight:500;}

.prev-table{flex:1;overflow:hidden;margin:0 20px 14px;border:1px solid #f1f5f9;border-radius:10px;}
.prev-table-head{display:grid;grid-template-columns:32px 1fr 1fr 1fr 80px;padding:8px 12px;background:#f8fafc;font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:0.5px;border-bottom:1px solid #f1f5f9;align-items:center;gap:6px;}
.prev-table-row{display:grid;grid-template-columns:32px 1fr 1fr 1fr 80px;padding:8px 12px;align-items:center;gap:6px;font-size:12px;color:var(--text-body);border-bottom:1px solid #f8fafc;transition:background .15s;}
.prev-table-row:hover{background:#fafbfc;}
.prev-avatar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;}
.status-chip{display:inline-block;padding:3px 8px;border-radius:100px;font-size:10px;font-weight:600;text-align:center;}
.status-chip.green{background:#dcfce7;color:#15803d;}
.status-chip.amber{background:#fef3c7;color:#92400e;}

.prev-week{flex:1;padding:12px 20px;}
.prev-week-label{font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:12px;}
.prev-week-bars{display:flex;gap:12px;height:110px;align-items:flex-end;}
.pwb-day{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;}
.pwb-bar{width:100%;border-radius:6px 6px 0 0;}
.pwb-day span{font-size:11px;color:var(--text-muted);font-weight:500;}

.prev-lexi-chat{margin:0 20px 14px;background:#f8fafc;border-radius:12px;padding:14px;flex:1;overflow:hidden;}
.plc-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.plc-avatar{width:24px;height:24px;border-radius:6px;background:var(--blue);display:flex;align-items:center;justify-content:center;}
.plc-header span:nth-child(2){font-size:13px;font-weight:600;color:#0d1b3e;}
.plc-status{font-size:11px;color:#16a34a;margin-left:auto;}
.plc-msg{font-size:12.5px;line-height:1.55;padding:10px 12px;border-radius:10px;margin-bottom:8px;}
.plc-msg.user{background:#fff;border:1px solid #e2e8f0;color:var(--text-body);}
.plc-msg.lexi{background:var(--blue);color:#fff;}

/* Mobile only */
.modules-mobile-only{display:none;}

/* INDUSTRIES */
.industries-section{padding:5px 48px 0;background:#fff;}
.industries-section .section-center p{color:var(--text-muted);}
.industry-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}
.industry-tab{
  padding:10px 22px;border-radius:100px;
  border:1.5px solid #e2e8f0;font-size:14px;font-weight:500;
  color:var(--text-body);cursor:pointer;transition:all .2s;background:#fff;
}
.industry-tab.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.industry-tab:hover:not(.active){border-color:var(--blue);color:var(--blue);}
/* Industry Logo Slider */
.client-logos{
  overflow:hidden;
  position:relative;
  padding:0 0 72px;
  min-height:140px;
  display:flex;
  align-items:center;
}
.client-logos::before,
.client-logos::after{
  content:'';position:absolute;top:0;bottom:72px;width:120px;z-index:2;pointer-events:none;
}
.client-logos::before{left:0;background:linear-gradient(to right,#fff,transparent);}
.client-logos::after{right:0;background:linear-gradient(to left,#fff,transparent);}

@keyframes logo-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-slider-track{
  display:flex;
  align-items:center;
  gap:48px;
  width:max-content;
  animation:logo-scroll 20s linear infinite;
  padding:8px 0;
}
.client-logo{
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;letter-spacing:1.5px;
  color:#94a3b8;cursor:default;
  opacity:0.65;
  transition:opacity .25s ease;
  flex-shrink:0;
}
.client-logo:hover{opacity:1;}
.client-logos .client-logo img{
  height:64px !important;
  max-width:130px !important;
  width:auto !important;
  object-fit:contain !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border:none !important;
  display:block;
}
.stats-bar{
  background:#0d1b3e;padding:56px 48px;
  display:flex;align-items:center;justify-content:space-around;
  gap:20px;
}
.stat-item{text-align:center;flex:1;position:relative;}
.stat-item:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:60px;background:rgba(255,255,255,0.15);
}
.stat-num{font-size:52px;font-weight:600;color:#fff;letter-spacing:-2px;line-height:1;}
.stat-label{font-size:11px;font-weight:600;letter-spacing:1.5px;color:rgba(255,255,255,0.5);margin-top:8px;text-transform:uppercase;}

/* PERSONAS */
.personas-section{padding:100px 48px;background:#fff;}
.section-tag{
  display:inline-block;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:100px;
  padding:6px 18px;font-size:11px;font-weight:600;
  letter-spacing:1.2px;color:var(--blue);
  margin-bottom:20px;
}
.personas-section h2{
  font-size:50px;font-weight:600;letter-spacing:-2px;
  color:#0d1b3e;max-width:700px;margin:0 auto 60px;
  text-align:center;line-height:1.1;
}
.personas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.persona-card{
  background:#f8fafc;border-radius:var(--radius);
  border:1px solid #e2e8f0;padding:28px;
  transition:all .25s;
}
.persona-card:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 40px rgba(13,27,62,0.1);}
.persona-emoji{margin-bottom:16px;display:block;line-height:0;}
.persona-card h3{font-size:17px;font-weight:600;color:#0d1b3e;margin-bottom:14px;}
.persona-card p{font-size:13.5px;color:var(--text-body);line-height:1.65;margin-bottom:24px;}
.more-info{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:4px;}
.more-info:hover{gap:8px;}

/* CASE STUDIES */
.case-studies-section{padding:100px 48px;background:#f8fafc;}
.case-studies-section .section-center{text-align:center;}
.case-studies-section .section-label{text-align:center;display:block;margin-bottom:12px;}
.case-studies-section .section-center h2{font-size:40px;}
.case-studies-section .section-center p{font-size:15px;color:var(--text-muted);max-width:560px;margin:0 auto;}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.cs-card{
  background:#fff;border-radius:var(--radius);
  border:1px solid #e2e8f0;overflow:hidden;
  transition:all .25s;
}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(13,27,62,0.12);}
.cs-img{
  height:345px;position:relative;
  display:flex;align-items:flex-end;padding:20px;
}
.cs-img-1{background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%);}
.cs-img-2{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);}
.cs-img-3{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#ec4899 100%);}
.cs-img::before{
  content:'';position:absolute;
  width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  top:-20px;right:20px;
}
.cs-tag{
  background:rgba(255,255,255,0.9);
  border-radius:6px;padding:5px 12px;
  font-size:11px;font-weight:600;letter-spacing:0.8px;color:#0d1b3e;
  position:relative;z-index:1;
}
.cs-content{padding:28px;}
.cs-company{font-size:11px;font-weight:600;letter-spacing:1.2px;color:var(--blue);margin-bottom:10px;}
.cs-content h3{font-size:17px;font-weight:600;color:#0d1b3e;line-height:1.35;margin-bottom:14px;}
.cs-content p{font-size:13.5px;color:var(--text-body);line-height:1.65;margin-bottom:24px;}
.read-more{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:4px;}
.read-more:hover{gap:8px;}
.cs-cta-row{text-align:center;margin-top:48px;}
.cs-cta-row p{font-size:15px;color:var(--text-body);margin-bottom:20px;}
.btn-outline-blue{
  display:inline-block;padding:14px 32px;border-radius:10px;
  border:1.5px solid var(--blue);color:var(--blue);
  font-size:14px;font-weight:600;text-decoration:none;
  transition:all .2s;
}
.btn-outline-blue:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}

/* DOMAIN EXPERIENCE */
.domain-section{
  padding:100px 48px;background:#fff;
  display:flex;gap:80px;align-items:flex-start;
}
.domain-left{flex:0 0 400px;}
.domain-badge-wrap{display:flex;gap:16px;align-items:center;margin-bottom:28px;}
.domain-num{
  font-size:64px;font-weight:600;color:var(--blue);
  line-height:1;letter-spacing:-3px;
}
.domain-badge{
  background:#0d1b3e;border-radius:12px;padding:14px 18px;
}
.domain-badge p:first-child{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;}
.domain-badge p:last-child{font-size:12px;color:rgba(255,255,255,0.5);}
.domain-left h2{
  font-size:38px;font-weight:600;letter-spacing:-1.5px;
  color:#0d1b3e;margin-bottom:20px;line-height:1.15;
}
.domain-left p{font-size:15px;color:var(--text-body);line-height:1.7;}
.domain-right{flex:1;}
.feature-list{display:flex;flex-direction:column;gap:0;}
.feature-item{
  display:flex;gap:16px;padding:24px 0;
  border-bottom:1px solid #f1f5f9;
}
.feature-item:first-child{border-top:1px solid #f1f5f9;}
.feature-icon-wrap{
  width:48px;height:48px;border-radius:12px;
  background:#f8fafc;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.feature-item h3{font-size:15px;font-weight:600;color:#0d1b3e;margin-bottom:6px;}
.feature-item p{font-size:13.5px;color:var(--text-body);line-height:1.6;}

/* ACCREDITATIONS */
.accreditations-section{
  padding:64px 80px;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  text-align:center;
}
.accred-text{
  font-size:15px;font-weight:600;color:var(--text-body);
  max-width:700px;margin:0 auto 48px;line-height:1.6;
}
.accred-badges{
  display:flex;align-items:center;justify-content:center;
  gap:40px;flex-wrap:wrap;
}
.accred-badge{
  display:flex;flex-direction:column;align-items:center;
  transition:transform .2s;cursor:default;
}
.accred-badge:hover{transform:translateY(-4px);}
.accred-badges .accred-badge img {
  height: 90px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.accred-badge span{display:none;}

/* TESTIMONIAL CAROUSEL */
.testimonial-section{
  padding:100px 80px;
  background:#f0f6ff;
  position:relative;overflow:hidden;
}
.testimonial-section::before{
  content:'"';font-size:280px;font-weight:600;
  color:rgba(37,99,235,0.08);position:absolute;
  top:-40px;left:40px;line-height:1;font-family:Georgia,serif;
  pointer-events:none;
}
.testimonial-track-wrap{overflow:hidden;position:relative;z-index:1;}
.testimonial-track{
  display:flex;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.testimonial-slide{
  min-width:100%;text-align:center;padding:0 60px;
  box-sizing:border-box;
}
.testimonial-quote{
  font-size:26px;font-weight:600;color:#0d1b3e;
  line-height:1.5;max-width:820px;margin:0 auto 36px;
  letter-spacing:-0.5px;
}
.testimonial-author{font-size:15px;font-weight:600;color:#0d1b3e;margin-bottom:4px;}
.testimonial-title{font-size:12px;font-weight:600;letter-spacing:0.5px;color:var(--text-muted);word-break:break-word;}

.testimonial-meta{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-top:0;
  max-width:680px;margin-left:auto;margin-right:auto;
}
.t-avatar{
  width:56px;height:56px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  border:3px solid #fff;
  box-shadow:0 2px 12px rgba(13,27,62,0.12);
}
.t-avatar svg{display:block;}
.t-meta-text{text-align:left;min-width:0;flex-shrink:1;}
.t-company-logo{
  border-left:1px solid #e2e8f0;
  padding-left:16px;
  display:flex;align-items:center;
  margin-left:auto;
}

.testimonial-controls{
  display:flex;align-items:center;justify-content:center;
  gap:20px;margin-top:48px;position:relative;z-index:1;
}
.t-arrow{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid #cbd5e1;background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#0d1b3e;
  transition:all .2s;flex-shrink:0;
}
.t-arrow:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff;}
.t-dots{display:flex;gap:8px;align-items:center;}
.t-dot{
  width:8px;height:8px;border-radius:50%;
  background:#cbd5e1;border:none;cursor:pointer;padding:0;
  transition:all .3s;
}
.t-dot.active{background:var(--blue);width:24px;border-radius:4px;}

/* CTA BANNER */
.cta-banner{
  padding:90px 80px;
  background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);
  text-align:center;
}
.cta-banner h2{
  font-size:48px;font-weight:600;color:#fff;
  letter-spacing:-1.5px;line-height:1.15;
  max-width:700px;margin:0 auto 32px;
}
.cta-pills{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;margin-bottom:44px;
}
.cta-pill{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid rgba(255,255,255,0.35);border-radius:100px;
  padding:10px 22px;font-size:14px;font-weight:500;color:#fff;
  background:rgba(255,255,255,0.08);
}
.pill-check{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.5);
  display:flex;align-items:center;justify-content:center;
}
.cta-btns{display:flex;gap:16px;justify-content:center;}
.cta-btn-white{
  background:#fff;color:var(--blue);
  font-size:15px;font-weight:600;
  padding:15px 32px;border-radius:10px;
  text-decoration:none;transition:all .2s;
}
.cta-btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.cta-btn-ghost{
  background:transparent;color:#fff;
  font-size:15px;font-weight:600;
  padding:15px 32px;border-radius:10px;
  text-decoration:none;border:1.5px solid rgba(255,255,255,0.4);
  transition:all .2s;
}
.cta-btn-ghost:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);}

/* FOOTER */
footer{padding:64px 48px 36px;background:#fff;border-top:1px solid #e2e8f0;}
.footer-top{display:flex;gap:48px;margin-bottom:48px;}
.footer-brand{flex:0 0 260px;}
.footer-brand .nav-logo{margin-bottom:16px;}
.footer-brand > p{font-size:13px;color:var(--text-muted);line-height:1.65;}
.footer-office-label{font-size:12px;font-weight:600;color:var(--blue);margin-bottom:4px;}
.footer-office-text{font-size:13px;color:var(--text-muted);line-height:1.6;}
.footer-email{display:block;font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;margin-top:16px;margin-bottom:20px;}
.footer-email:hover{text-decoration:underline;}
.footer-socials{display:flex;gap:10px;margin-top:4px;}
.social-icon{
  width:34px;height:34px;border-radius:8px;
  border:1px solid #e2e8f0;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .2s;
}
.social-icon:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff;}
.footer-cols{display:flex;gap:28px;flex:1;flex-wrap:wrap;}
.footer-col{min-width:100px;}
.footer-col h4{font-size:12px;font-weight:600;letter-spacing:1.2px;color:#0d1b3e;text-transform:uppercase;margin-bottom:14px;}
.footer-col a{display:block;font-size:13px;color:var(--text-muted);text-decoration:none;margin-bottom:9px;transition:color .2s;line-height:1.4;}
.footer-col a:hover{color:var(--blue);}
.footer-col-sublabel{font-size:11px;font-weight:600;letter-spacing:0.8px;color:#0d1b3e;text-transform:uppercase;margin-bottom:8px;margin-top:4px;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid #e2e8f0;padding-top:24px;
}
.footer-bottom p{font-size:13px;color:var(--text-muted);}
.footer-bottom-links{display:flex;gap:28px;align-items:center;}
.footer-bottom-links a{font-size:13px;color:var(--text-muted);text-decoration:none;transition:color .2s;white-space:nowrap;}
.footer-bottom-links a:hover{color:var(--blue);}
.footer-certs{display:flex;gap:16px;}
.cert-badge{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:0.5px;}

/* SVG icons inline */
svg{display:block;}

/* HAMBURGER */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;cursor:pointer;background:none;border:none;padding:4px;
  border-radius:8px;transition:background .15s;flex-shrink:0;
}
.hamburger:hover{background:#f1f5f9;}
.hamburger span{
  display:block;width:22px;height:2px;background:#0d1b3e;
  border-radius:2px;transition:transform .3s ease,opacity .3s ease;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile nav drawer */
.mobile-nav{
  display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
  background:#fff;z-index:99;overflow-y:auto;
  padding:20px 24px 40px;
  transform:translateX(100%);transition:transform .3s ease;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid #f1f5f9;
  font-size:16px;font-weight:600;color:#0d1b3e;text-decoration:none;cursor:pointer;
}
.mobile-nav-link svg{width:16px;height:16px;opacity:0.4;transition:transform .25s;}
.mobile-nav-link.open svg{transform:rotate(180deg);}
.mobile-sub{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.mobile-sub.open{max-height:600px;}
.mobile-sub-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 0 12px 8px;text-decoration:none;
}
.mobile-sub-icon{width:36px;height:36px;border-radius:9px;background:#f0f6ff;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.mobile-sub-item h4{font-size:14px;font-weight:600;color:#0d1b3e;}
.mobile-sub-item p{font-size:12px;color:var(--text-muted);}
.mobile-cta{
  display:block;width:100%;text-align:center;
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:600;padding:15px;
  border-radius:10px;text-decoration:none;margin-top:24px;
}
.new-tag{background:#2563eb;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.5px;padding:2px 6px;border-radius:100px;line-height:1.4;}

/* RESPONSIVE */

/* Tablet ( 1200px) */
@media(max-width:1200px){
  nav{padding:0 28px;}
  .nav-links{gap:20px;}
  .nav-links a,.nav-item>a{font-size:13px;}
  .hero{padding:60px 32px 48px;}
  .hero h1{font-size:46px;}
  .hero-banner-img{max-width:380px;}
  .lexi-section{padding:80px 32px;gap:40px;}
  .lexi-ui-img{flex:0 0 300px;width:300px;}
  .modules-section{padding:80px 32px;}
  .modules-tab-wrap{gap:20px;}
  .module-tabs{flex:0 0 170px;}
  .industries-section{padding:80px 32px 0;}
  .personas-section{padding:80px 32px;}
  .personas-grid{grid-template-columns:repeat(2,1fr);}
  .case-studies-section{padding:80px 32px;}
  .domain-section{padding:80px 32px;gap:40px;}
  .domain-left{flex:0 0 280px;}
  .testimonial-section{padding:80px 40px;}
  .cta-banner{padding:72px 40px;}
  footer{padding:48px 32px 28px;}
  .footer-top{gap:32px;}
  .footer-cols{gap:20px;}
}

/* Tablet portrait / large mobile ( 1024px) */
@media(max-width:1024px){
  /* Nav: hide low-priority items */
  .nav-links{gap:16px;}
  .hero h1{font-size:40px;}
  .hero-right{padding-left:28px;}
  .hero-banner-img{max-width:340px;}
  /* Modules tab: compress */
  .module-tabs{flex:0 0 150px;}
  .module-tab{padding:11px 12px;font-size:13.5px;}

  .preview-sidebar{width:120px;}
  .psb-item{font-size:11px;padding:8px 12px;}
  .prev-title{font-size:13px;}
  .psc-num{font-size:16px;}
  /* Solutions dropdown: shift left */
  .solutions-dropdown{left:0;transform:translateX(-10%) translateY(8px);}
  .nav-item:hover .solutions-dropdown{transform:translateX(-10%) translateY(0);}
}

/* Mobile ( 768px) */
@media(max-width:768px){
  /* Nav */
  nav{padding:0 20px;}
  .nav-links,.btn-demo{display:none;}
  .hamburger{display:flex;}
  .mobile-nav{display:block;}

  /* Hero */
  .hero{flex-direction:column;align-items:flex-start;padding:48px 20px 40px;min-height:auto;gap:32px;}
  .hero-left{max-width:100%;}
  .hero h1{font-size:34px;letter-spacing:-1px;}
  .hero-body{font-size:15px;}
  .hero-right{padding-left:0;width:100%;justify-content:center;}
  .hero-banner-img{max-width:100%;}

  /* Trust line */
  .trust-line{flex-wrap:wrap;gap:8px;font-size:13px;}
  .trust-avatars{flex-shrink:0;}

  /* Lexi */
  .lexi-section{flex-direction:column;padding:60px 20px;gap:36px;}
  .lexi-ui-img{flex:none;width:100%;max-width:480px;margin:0 auto;}
  .lexi-copy h2{font-size:28px;letter-spacing:-0.8px;}
  .lexi-chips{gap:8px;}
  .lexi-chip{padding:10px 14px;font-size:13px;}

  /* Modules tab layout stacked */
  .modules-section{padding:60px 20px;}
  .section-center h2{font-size:26px;letter-spacing:-0.5px;}
  .section-center p{font-size:14px;}
  .modules-tab-wrap{flex-direction:column;gap:0;}
  .module-tabs{
    display:grid;grid-template-columns:repeat(3,1fr);
    flex:none;gap:0;
    border-bottom:2px solid #e2e8f0;
    padding-bottom:0;width:100%;
  }
  .module-tab{
    flex-direction:column;gap:4px;
    padding:12px 8px;min-width:0;text-align:center;
    border:none;border-radius:0;border-bottom:3px solid transparent;
    margin-bottom:-2px;font-size:11px;
  }
  .module-tab.active{
    border-color:var(--blue);border-bottom-color:var(--blue);
    box-shadow:none;background:transparent;
  }
  .module-tab::before{display:none;}
  .mtab-arrow{display:none;}
  .mtab-icon{width:22px;height:22px;margin:0 auto;}
  .module-preview-panel{width:100%;border-radius:0 0 16px 16px;border-top:none;}
  .preview-content.active{display:block;}
  .preview-sidebar{width:100%;height:44px;flex-direction:row;align-items:center;gap:0;padding:0;}
  .psb-logo{display:none;}
  .psb-item{padding:0 14px;height:44px;display:flex;align-items:center;font-size:11px;white-space:nowrap;}
  .preview-main{min-height:300px;}
  .prev-stats-row{flex-wrap:wrap;gap:8px;padding:10px 12px;}
  .prev-stat-card{min-width:calc(33% - 8px);}
  .psc-num{font-size:15px;}
  .prev-table{margin:0 12px 12px;}
  .prev-table-head{grid-template-columns:28px 1fr 1fr 64px;font-size:10px;padding:7px 10px;}
  .prev-table-row{grid-template-columns:28px 1fr 1fr 64px;font-size:11px;padding:7px 10px;}
  .prev-table-head span:nth-child(4),.prev-table-row span:nth-child(4){display:none;}
  .prev-week{padding:10px 12px;}
  .prev-week-bars{height:80px;}
  .prev-lexi-chat{margin:0 12px 12px;padding:10px;}
  .plc-msg{font-size:11.5px;}

  /* Industries */
  .industries-section{padding:60px 20px 0;}
  .industry-tabs{gap:8px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;}
  .industry-tabs::-webkit-scrollbar{display:none;}
  .industry-tab{white-space:nowrap;flex-shrink:0;padding:8px 16px;font-size:13px;}
  .client-logos{padding:0 0 40px;}
  .client-logos::before,.client-logos::after{width:60px;bottom:40px;}
  .logo-slider-track{gap:32px;}
  .client-logos .client-logo img{height:48px !important;max-width:100px !important;}
  .stats-bar{padding:32px 20px;display:grid;grid-template-columns:1fr 1fr;gap:0;}
  .stat-item:not(:last-child)::after{display:none;}
  .stat-item{padding:16px;border-bottom:1px solid rgba(255,255,255,0.1);}
  .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,0.1);}
  .stat-num{font-size:36px;}

  /* Personas */
  .personas-section{padding:60px 20px;}
  .personas-section h2{font-size:28px;letter-spacing:-0.8px;margin-bottom:36px;}
  .personas-grid{grid-template-columns:1fr;}

  /* Case Studies */
  .case-studies-section{padding:60px 20px;}
  .case-studies-section .section-center h2{font-size:26px;}
  .cs-grid{grid-template-columns:1fr;}

  /* Domain */
  .domain-section{flex-direction:column;padding:60px 20px;gap:36px;}
  .domain-left{flex:none;width:100%;}
  .domain-left h2{font-size:26px;}
  .domain-num{font-size:44px;}

  /* Testimonial */
  .testimonial-section{padding:60px 20px;}
  .testimonial-slide{padding:0 4px;}
  .testimonial-quote{font-size:16px;letter-spacing:0;}
  .testimonial-section::before{font-size:140px;top:-10px;left:8px;}
  .testimonial-meta{gap:10px;}
  .t-company-logo{display:none;}

  /* CTA Banner */
  .cta-banner{padding:56px 20px;}
  .cta-banner h2{font-size:26px;letter-spacing:-0.5px;}
  .cta-btns{flex-direction:column;align-items:center;}
  .cta-btn-white,.cta-btn-ghost{width:100%;max-width:300px;text-align:center;}
  .cta-pill{font-size:12px;padding:7px 14px;}

  /* Accreditations */
  .accreditations-section{padding:48px 20px;}
  .accred-badges{gap:20px;}

  /* Footer */
  footer{padding:48px 20px 24px;}
  .footer-top{flex-direction:column;gap:32px;}
  .footer-brand{flex:none;}
  .footer-cols{gap:20px;}
  .footer-col{min-width:calc(50% - 10px);}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center;}
  .footer-bottom-links{flex-wrap:wrap;justify-content:center;gap:16px;}

  /* Dropdowns handled by mobile drawer */
  .mega-dropdown,.solutions-dropdown,.simple-dropdown{display:none;}
}

/* Small mobile ( 480px) */
@media(max-width:480px){
  .hero h1{font-size:28px;}
  .hero-ctas{flex-direction:column;}
  .btn-primary,.btn-outline{width:100%;justify-content:center;text-align:center;}
  .lexi-copy h2{font-size:24px;}
  .personas-section h2{font-size:24px;}
  .module-tab{min-width:64px;padding:10px 10px;font-size:10px;}
  .prev-stat-card{min-width:calc(50% - 4px);}
  .footer-col{min-width:100%;}
  .footer-bottom-links{gap:12px;}
  .footer-bottom-links a{font-size:12px;}
}

/* ==========================================================================
   SOLUTIONS PAGES
   Additional styles for industry-specific Solutions pages (BFSI, Hospitality,
   Manufacturing, Professional Services, etc.)
   ========================================================================== */

/* phrsolutions.css Additional styles for PeoplesHR Solutions pages Add this file AFTER phrhome.css in WordPress (Appearance > Theme Editor or enqueue with a higher priority). No additional JS is required all interactions are CSS-only. */

/* BUTTON HOVER CLASSES (replaces all inline onmouseover JS) */
.btn-cta-blue {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .9rem;
  box-shadow: 0 6px 24px rgba(37,99,235,.35);
  transition: background .2s, transform .15s;
}
.btn-cta-blue:hover { background: #1d4ed8; transform: translateY(-1px); }

.btn-cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 14px 30px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .92rem;
  box-shadow: 0 6px 24px rgba(37,99,235,.3);
  transition: background .2s, transform .15s;
}
.btn-cta-pill:hover { background: #1d4ed8; transform: translateY(-1px); }

.btn-cta-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue); text-decoration: none;
  padding: 12px 24px; border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .88rem;
  transition: background .2s;
}
.btn-cta-white:hover { background: #eff6ff; }
.governance-metrics { display: grid; grid-template-columns: repeat(4,1fr); }
@media (max-width: 1024px) {
  .governance-metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .governance-section { padding: 56px 24px !important; }
  .governance-metrics { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .why-section { padding: 60px 28px !important; }
  .why-grid-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .why-grid-inner > div:first-child { order: 2; }
  .why-grid-inner > div:last-child  { order: 1; }
}

/* PROVEN TRANSFORMATION RESPONSIVE */
.proven-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .proven-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding: 40px !important; }
  .proven-grid > div:last-child { order: 2; }
  .proven-grid > div:first-child { order: 1; }
}

/* CASE STUDY RESPONSIVE */
.casestudy-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .casestudy-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .casestudy-grid > div:last-child { order: 2; }
  .casestudy-grid > div:first-child { order: 1; }
}

/* OUTCOMES 3-COL RESPONSIVE */
@media (max-width: 768px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
}
:root {
  --navy: #0d1b3e;
  --blue: #2563eb;
  --blue-light: #3b82f6;
  --bg-light: #f8fafc;
  --bg-card: #f1f5f9;
  --border: #e2e8f0;
  --muted: #6b7280;
  --text-body: #374151;
}
.hero-wrap { background: linear-gradient(160deg, #fff 0%, #f0f6ff 100%); border-bottom: 1px solid var(--border); overflow: hidden; }
.hero { min-height: 100vh; padding: 88px 0 88px 64px; display: flex; align-items: center; gap: 64px; max-width: 100%; margin: 0 auto; }
.hero h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.08; letter-spacing: -2px; color: var(--navy); margin-bottom: 12px; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-sub { font-size: 1rem; color: var(--text-body); max-width: 460px; line-height: 1.75; margin-bottom: 0; }
.hero-subtitle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--navy); opacity: 0.65; margin-bottom: 14px; letter-spacing: -0.01em; }
.hero-left-col { flex: 0 0 auto; width: 50%; max-width: 640px; z-index: 2; padding-right: 40px; }
.hero-img-placeholder {
  flex: 1; display: flex; align-items: stretch; align-self: stretch;
}
.hero-img-placeholder > div {
  width: 100%; max-width: 560px;
}
@media (max-width: 1024px) {
  .hero { flex-direction: column; padding: 60px 28px; gap: 40px; min-height: auto; }
  .hero-left-col { width: 100%; max-width: 100%; padding-right: 0; }
  .hero-img-placeholder { justify-content: center; width: 100%; align-self: auto; }
  .hero-img-placeholder > div { max-width: 100%; }
}
@media (max-width: 768px) {
  .hero { padding: 48px 20px 40px; gap: 32px; }
  .hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -1px; }
}

.lexi-av { width: 34px; height: 34px; border-radius: 9px; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.lexi-name { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.5); margin-bottom: 3px; }
.lexi-msg { font-size: .82rem; color: rgba(255,255,255,.88); line-height: 1.5; }
.cursor { display: inline-block; width: 2px; height: 13px; background: var(--blue-light); margin-left: 2px; vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--blue) 0%, #22c55e 100%); display: flex; align-items: center; justify-content: center; }
.logo-mark svg { width: 16px; height: 16px; fill: white; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.nav-cta { background: var(--blue); color: #fff; text-decoration: none; padding: 9px 20px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; transition: background .2s; white-space: nowrap; }
.nav-cta:hover { background: var(--navy); }

.s-wrap { max-width: 1280px; margin: 0 auto; padding: 100px 64px; }
.s-chip { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 100px; padding: 4px 13px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; color: var(--blue); text-transform: uppercase; margin-bottom: 18px; }
.s-title { font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--navy); margin-bottom: 14px; }
.s-title em { font-style: normal; color: var(--blue); }
.s-lead { font-size: .98rem; color: var(--text-body); max-width: 540px; line-height: 1.75; margin-bottom: 56px; }

.ops-grid { display: flex; flex-direction: column; gap: 16px; }
.ops-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  box-sizing: border-box;
}
.ops-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #2563eb, #22c55e);
  opacity: 0;
  transition: opacity .25s;
}
.ops-card:hover { transform: translateX(4px); box-shadow: 0 8px 32px rgba(37,99,235,.1); }
.ops-card:hover::before { opacity: 1; }
.ops-card:last-child { flex-direction: row; }
.ops-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  background: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(37,99,235,.3));
}
.ops-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.ops-card > div[style*="flex:1"] {
  flex: 1;
  min-width: 0;
}
.ops-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #0d1b3e;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.ops-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .87rem;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 14px;
}
.ops-outcome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .77rem;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 6px 14px;
  border-radius: 8px;
  line-height: 1.4;
}
.ops-outcome::before {
  content: 'Outcome';
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2563eb;
  opacity: 0.55;
  padding-right: 8px;
  border-right: 1px solid #bfdbfe;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .ops-card { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .ops-card:last-child { flex-direction: column; }
}

.ai-wrap { max-width: 1280px; margin: 0 auto 100px; padding: 0 64px; }
.ai-panel { background: #0d1b3e; border-radius: 20px; padding: 72px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 1024px) { .ai-panel { grid-template-columns: 1fr; gap: 40px; padding: 48px 32px; } }
.ai-chip { background: rgba(255,255,255,.09); color: rgba(255,255,255,.65); border-color: transparent; }
.ai-title { color: #fff; }
.ai-lead { color: rgba(255,255,255,.5); margin-bottom: 0; }
.ai-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ai-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.65; }
.ai-dot { width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; flex-shrink: 0; margin-top: 8px; }
.ai-outcome-tag { margin-top: 28px; display: inline-flex; align-items: flex-start; gap: 10px; background: rgba(37,99,235,.25); color: #93c5fd; padding: 9px 18px; border-radius: 10px; font-size: .83rem; font-weight: 600; line-height: 1.5; }
.ai-outcome-tag::before { content: 'Outcome'; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #93c5fd; opacity: 0.6; padding-right: 10px; border-right: 1px solid rgba(147,197,253,.3); white-space: nowrap; margin-top: 2px; }

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.proof-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; }
.proof-card::after { content: '"'; position: absolute; top: 16px; right: 28px; font-size: 8rem; line-height: 1; color: #f1f5f9; font-family: Georgia, serif; pointer-events: none; }
.proof-client-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.proof-av { width: 50px; height: 50px; border-radius: 12px; background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.proof-client-name { font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.proof-client-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.proof-quote { font-size: .93rem; color: var(--text-body); line-height: 1.8; font-style: italic; margin-bottom: 22px; position: relative; }
.proof-author { font-weight: 800; font-size: .88rem; color: var(--navy); }
.proof-author-title { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.proof-stats { display: flex; flex-direction: column; gap: 14px; }
.proof-stat { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; display: flex; gap: 14px; align-items: center; }
.proof-bar { width: 4px; height: 42px; border-radius: 4px; background: linear-gradient(180deg, var(--blue), #22c55e); flex-shrink: 0; }
.proof-num { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.proof-lbl { font-size: .8rem; color: var(--muted); line-height: 1.45; }

.footer-cta { background: var(--navy); text-align: center; padding: 88px 64px 72px; }
.footer-cta h2 { font-size: clamp(1.9rem,3vw,2.7rem); font-weight: 700; color: #fff; letter-spacing: -.025em; margin-bottom: 14px; }
.footer-cta p { font-size: .97rem; color: rgba(255,255,255,.5); margin-bottom: 36px; }
.footer-ctas { display: flex; gap: 12px; justify-content: center; }
.btn-wht { background: #fff; color: var(--blue); text-decoration: none; padding: 13px 26px; border-radius: 10px; font-weight: 700; font-size: .9rem; transition: all .2s; }
.btn-wht:hover { background: var(--blue); color: #fff; }
.btn-outl { background: transparent; color: rgba(255,255,255,.75); text-decoration: none; padding: 13px 26px; border-radius: 10px; font-weight: 600; font-size: .9rem; border: 1.5px solid rgba(255,255,255,.22); transition: all .2s; }
.btn-outl:hover { border-color: #fff; color: #fff; }
.footer-bar { background: var(--navy); border-top: 1px solid rgba(255,255,255,.07); padding: 22px 64px; display: flex; align-items: center; justify-content: space-between; }
.footer-bar p { font-size: .78rem; color: rgba(255,255,255,.3); }
.cert-tags { display: flex; gap: 10px; }
.ctag { font-size: .7rem; font-weight: 700; padding: 3px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: rgba(255,255,255,.38); }

@media (max-width: 1024px) {
  nav { padding: 0 28px; }
  .hero { grid-template-columns: 1fr; padding: 60px 28px; gap: 44px; }
  .s-wrap { padding: 72px 28px; }
  .ai-wrap { padding: 0 28px; }
  .proof-grid { grid-template-columns: 1fr; }
  .footer-cta { padding: 64px 28px; }
  .footer-bar { padding: 20px 28px; }
}

.logo-scroller { overflow: hidden; position: relative; }
    .logo-scroller::before,
    .logo-scroller::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
    }
    .logo-scroller::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
    .logo-scroller::after  { right: 0; background: linear-gradient(to left, #fff, transparent); }
    .logo-track {
      display: flex; align-items: center; gap: 56px;
      width: max-content;
      animation: scroll-logos 50s linear infinite;
    }
    .logo-track:hover { animation-play-state: paused; }
    @keyframes scroll-logos {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .logo-item {
      display: flex; align-items: center; gap: 10px;
      opacity: 0.6;
      transition: opacity .25s;
      flex-shrink: 0; cursor: default;
    }
    .logo-item:hover { opacity: 1; }
    .logo-icon {
      width: 38px; height: 38px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; flex-shrink: 0;
    }
    .logo-name {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 700; font-size: .92rem;
      color: #0d1b3e; white-space: nowrap;
    }

/* Static logo band variant -- for pages with too few logos to justify a
   scrolling marquee (e.g. IT & ITES, only 4). No duplicated logo set in
   the markup, no scroll-logos animation; the track just centers and wraps.
   Selectors are doubled up (.logo-scroller.logo-scroller--static) to
   out-specificity the plain .logo-scroller/.logo-track rules -- this
   component's base CSS is copy-pasted at several later points in this
   file, and a same-specificity override placed earlier would lose to
   whichever duplicate happens to come after it in source order. */
.logo-scroller.logo-scroller--static {
  overflow: visible;
  display: flex;
  justify-content: center;
}
.logo-scroller.logo-scroller--static::before,
.logo-scroller.logo-scroller--static::after {
  display: none;
}
.logo-track.logo-track--static {
  width: auto;
  animation: none;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-track.logo-track--static .logo-img {
  height: 60px;
  max-width: 200px;
}

/* BFSI PAGE Extracted inline styles All rules below are additions only; no existing rules were modified. Appended: April 2026 */

/* SHARED: image placeholder text helpers */

.img-placeholder-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.img-placeholder-hint {
  font-size: 0.72rem;
  font-weight: 400;
}

/* HERO (BFSI page overrides / additions) */

/* AI-tagline under h1 */
.hero-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #0d1b3e;
  opacity: 0.75;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* Wrapper that adds top-margin before the CTA button */
.hero-cta-wrap {
  margin-top: 28px;
}

/* Hero image fills the right column edge-to-edge */
.hero-img-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px 0 0 20px;
}

/* LOGO BAND */

.logo-band {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  overflow: hidden;
}

.logo-band-label {
  text-align: center;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 28px;
}

/* GOVERNANCE SECTION */

/* Base layout the responsive override already in file uses !important so it will correctly override these values at small breakpoints. */
.governance-section {
  background: #0d1b3e;
  padding: 80px 64px;
}

.governance-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.governance-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.governance-lead {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  max-width: 860px;
  line-height: 1.7;
}
.governance-lead strong { color: #ffffff; }

.governance-body {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 44px;
  max-width: 1100px;
  line-height: 1.7;
}

/* Individual metric cards inside .governance-metrics grid */
.governance-metric-card {
  background: rgba(255, 255, 255, 0.04);
  padding: 28px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.governance-metric-card + .governance-metric-card {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.governance-metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* First card uses a slightly brighter blue */
.governance-metric-icon--primary {
  background: rgba(26, 91, 255, 0.25);
}

.governance-metric-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}
.governance-metric-text strong { color: #ffffff; }

.governance-summary {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 900px;
}
.governance-summary strong { color: rgba(255, 255, 255, 0.8); font-style: normal; }

/* SECTION TITLE MODIFIER centered variant */

/* Use on any .s-title that needs full-width centered layout */
.s-title--center {
  text-align: center;
  max-width: 100%;
  margin-bottom: 48px;
}

/* OPS CARDS body wrapper (replaces inline style="flex:1") */

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

/* AI SECTION additions */

/* Italic coloured span inside .ai-title */
.ai-em { color: #6fa4ff; }

/* Image placeholder inside .ai-panel */
.ai-img-placeholder {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

/* PROVEN TRANSFORMATION */

.proven-wrap {
  padding: 0 64px 100px;
  max-width: 1280px;
  margin: 0 auto;
}

/* .proven-grid base layout already declared in file; adding inner styles here */
.proven-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 10px;
}

.proven-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
}

.proven-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.proven-list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}
.proven-list-item .list-arrow {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.proven-quote {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 28px;
}

.proven-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.proven-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.proven-img-inner {
  width: 80%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

/* Proven wrap responsive */
@media (max-width: 900px) {
  .proven-wrap {
    padding: 0 24px 60px;
  }
}
@media (max-width: 480px) {
  .proven-wrap {
    padding: 0 16px 48px;
  }
  .proven-grid {
    padding: 28px 24px !important;
    gap: 32px !important;
  }
  .proven-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .proven-cta-row .btn-cta-white {
    text-align: center;
    justify-content: center;
  }
}

/* CASE STUDY SECTION */

/* .casestudy-grid base layout already declared in file */
.casestudy-section {
  background: #ffffff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 72px 64px;
}

.casestudy-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #0d1b3e;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.casestudy-desc {
  font-size: 0.92rem;
  color: #6b7280;
  line-height: 1.75;
  margin-bottom: 28px;
}

.casestudy-img-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.casestudy-img-inner {
  width: 100%;
  max-width: 560px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.14));
}

/* TESTIMONIAL additions */

/* Dark navy avatar variant (bank icon) */
.t-avatar--bank {
  background: #0d1b3e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* Company name text inside .t-company-logo */
.t-company-name {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1px;
}

/* MEASURABLE OUTCOMES TABLE */

.outcomes-section {
  padding-top: 80px;
  padding-bottom: 100px;
}

.outcomes-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 28px rgba(11, 31, 74, 0.06);
}

.outcomes-col {
  padding: 32px 28px;
}
.outcomes-col + .outcomes-col {
  border-left: 1px solid var(--border);
}

.outcomes-col-header {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #0d1b3e;
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.outcomes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.outcomes-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #6b7280;
}
.outcomes-item .outcomes-dot { font-size: 1rem; flex-shrink: 0; }

.outcomes-cta-wrap {
  text-align: center;
  margin-top: 40px;
}

/* Responsive: stack outcomes columns on mobile
   (replaces the div[style*=] attribute selector already in the file) */
@media (max-width: 768px) {
  .outcomes-table {
    grid-template-columns: 1fr;
  }
  .outcomes-col + .outcomes-col {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* WHY PEOPLESHR SECTION */

/* Base layout responsive override already in file uses !important */
.why-section {
  background: #0d1b3e;
  padding: 80px 64px;
}

/* .why-grid-inner responsive already in file; base layout here */
.why-grid-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.why-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-img-inner {
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.why-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 28px;
}

.why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.why-list-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.why-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  display: inline-block;
  flex-shrink: 0;
}

/* PROVEN GRID inner styles (background/padding/gap) .proven-grid already declared as a base grid; extend here. */
.proven-grid {
  background: linear-gradient(135deg, #1a5bff 0%, #0b3bbf 40%, #22c55e 100%);
  border-radius: 24px;
  padding: 64px;
  gap: 64px;
  align-items: center;
}

/* CASESTUDY GRID inner styles .casestudy-grid already declared as a base grid; extend here. */
.casestudy-grid {
  max-width: 1280px;
  margin: 0 auto;
  gap: 80px;
  align-items: center;
}

/* END BFSI PAGE ADDITIONS *//* phrhome-additions.css Additions for Transportation & Logistics solutions page. Append this block to the end of phrhome.css. All rules are additions only no existing rules were modified. */

/* SOLUTIONS PAGES: constrain hero to 1280px (.hero alone is 100% wide on the homepage; .hero-wrap only exists on solutions pages, so this override is safely scoped.) */
.hero-wrap .hero { max-width: 100%; }

/* GOVERNANCE METRICS GRID visual wrapper styles (Base grid columns already declared in phrhome.css; these properties extend that definition.) */
.governance-metrics {
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 44px;
}

/* Icon background colour variants */
.governance-metric-icon--yellow { background: rgba(234, 179, 8, 0.15); }
.governance-metric-icon--green  { background: rgba(34, 197, 94, 0.15); }
.governance-metric-icon--orange { background: rgba(251, 146, 60, 0.15); }
/* blue variant already covered by .governance-metric-icon--primary */

/* LIGHT SECTION WRAPPER Used for casestudy and proven-transformation sections. */
.section-light {
  background: var(--bg-light);
  padding: 80px 64px;
  border-top: 1px solid var(--border);
}
@media (max-width: 1024px) { .section-light { padding: 60px 28px; } }

/* SECTION TYPOGRAPHY h2 and subhead inside light sections */
.section-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.section-subhead {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* ARROW BULLET LIST */
.arrow-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.arrow-list-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.6;
}

.arrow-list-item strong { color: var(--navy); }

.arrow-list-icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 1px;
}

/* DASHED BOX (outcome / quote) */
.dashed-box {
  border: 1.5px dashed #bfdbfe;
  border-radius: 12px;
  padding: 16px 20px;
  background: #fff;
  margin-bottom: 20px;
}

.dashed-box p {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 0;
}

.dashed-box strong { color: var(--navy); }

/* Italic variant used for pull-quotes */
.dashed-box--quote p { font-style: italic; }

/* Increased bottom margin when used in proven section */
.dashed-box--mb { margin-bottom: 24px; }

/* IMAGE PLACEHOLDERS light and dark panel variants */
.img-wrap-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.img-placeholder-light {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #94a3b8;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.08));
}

/* OPS CARD BULLET LIST */
.ops-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ops-list-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ops-list-arrow {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}

/* AI SECTION ADDITIONS */

/* Bold text inside .ai-lead (subhead) */
.ai-lead strong { color: rgba(255, 255, 255, 0.85); }

/* Top-margin variant for .ai-list */
.ai-list--mt { margin-top: 28px; }

/* CTA wrapper below .ai-list */
.ai-cta-wrap { margin-top: 28px; }

/* Top-margin variant for .ai-wrap (solutions pages add space above panel) */
.ai-wrap--mt { margin-top: 100px; }

/* S-TITLE MODIFIERS */

/* Reduced bottom margin used when a lead paragraph follows the title */
.s-title--mb-sm { margin-bottom: 12px; }

/* SECTION LEAD centred variant (outcomes section intro) */
.section-lead-center {
  text-align: center;
  font-size: 0.97rem;
  color: var(--text-muted);
  margin-bottom: 48px;
}

/* OUTCOMES CTA WRAP top margin (.outcomes-cta-wrap already declared; this adds margin-top only) */
.outcomes-cta-wrap { margin-top: 40px; }

/* WHY SECTION ADDITIONS */

/* Bold subhead under .why-title (dark section) */
.why-subhead {
  font-size: 0.97rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Reduced bottom margin on .why-title when followed by .why-subhead */
.why-title--with-subhead { margin-bottom: 12px; }

/* Reduced bottom margin on .why-list when CTA follows closely */
.why-list--mb { margin-bottom: 28px; }

/* Small top-offset for CTA buttons inside sections */
.btn-mt-sm { margin-top: 8px; }

/* END TRANSPORT & LOGISTICS PAGE ADDITIONS */

/* SOLUTIONS PAGES Hero layout for 2:1 images Appended: April 2026 All rules scoped to .hero-wrap (solutions pages only). Homepage hero is untouched. */

/* Remove full-viewport height; use content height instead */
.hero-wrap .hero {
  min-height: auto;
  padding: 80px 64px;
  align-items: center;
  gap: 32px;
}

/* Wider text column (55%) leaves 45% for the 2:1 image */
.hero-wrap .hero-left-col {
  width: 55%;
  max-width: 780px;
  padding-right: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Zero out individual child margins gap handles all spacing */
.hero-wrap .hero h1           { margin-bottom: 0; }
.hero-wrap .hero-tagline      { margin-bottom: 0; }
.hero-wrap .hero-subtitle     { margin-bottom: 0; }
.hero-wrap .hero-sub          { margin-bottom: 0; max-width: 100%; }
.hero-wrap .hero-cta-wrap     { margin-top: 0; }

/* Image column: centred vertically and horizontally */
.hero-wrap .hero-img-placeholder {
  align-items: center;
  align-self: auto;
  justify-content: center;
}

/* Image: natural height (respects 2:1 source ratio), rounded, soft shadow */
.hero-wrap .hero-img-inner {
  height: auto;
  max-width: 450px;
  border-radius: 20px;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.14));
}

@media (max-width: 1024px) {
  .hero-wrap .hero { padding: 60px 28px; }
  .hero-wrap .hero-left-col { width: 100%; max-width: 100%; padding-right: 0; }
  .hero-wrap .hero-img-placeholder { justify-content: center; }
}

@media (max-width: 768px) {
  .hero-wrap .hero { padding: 48px 20px; }
}

/* T&L PAGE Section image utility classes */

.section-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 20px;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.08));
}

.ai-section-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.why-section-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 20px;
  display: block;
}

/* END SOLUTIONS PAGE ADDITIONS */
/* HOSPITALITY PAGE ADDITIONS Appended: April 2026 All rules are additions only no existing rules were modified. */

/* Mobile line-break helper */
.mobile-break { display: none; }
@media (max-width: 768px) { .mobile-break { display: block; } }

/* Dark image placeholder (dark-panel backgrounds) */
.img-placeholder-dark {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.3);
  width: 100%;
}

/* Ops bullets checklist inside ops cards */
.ops-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.ops-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.6;
}
.ops-bullet-dot {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ops-bullet-dot svg { display: block; }

/* Governance subtitle ("The Hospitality Reality.") */
.governance-subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 44px;
}

/* Reality cards grid (3-col inside governance section) */
.reality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 44px;
}
@media (max-width: 900px) { .reality-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reality-grid { grid-template-columns: 1fr; } }

.reality-card {
  background: rgba(255, 255, 255, 0.04);
  padding: 28px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.reality-card--bl  { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.reality-card--bt  { border-top:  1px solid rgba(255, 255, 255, 0.07); }
.reality-card--empty { background: rgba(255, 255, 255, 0.02); }

.reality-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.reality-text { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); line-height: 1.65; }
.reality-text strong { color: #ffffff; }

/* Governance impact quote */
.governance-impact {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  max-width: 900px;
}
.governance-impact strong { color: rgba(255, 255, 255, 0.85); }

/* s-wrap modifiers */
.s-wrap--light    { background: var(--bg-light); }
.s-wrap--spacious { padding-top: 100px; padding-bottom: 100px; }

/* Proven grid: solid dark variant (overrides gradient) */
.proven-grid--dark {
  background: #0d1b3e;
  border-radius: 20px;
}

/* Title inside dark proven card */
.proven-dark-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 32px;
}

/* AI section: aspect-ratio wrapper for image placeholder */
.ai-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Why section tagline (short bold line before CTA) */
.why-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* END HOSPITALITY PAGE ADDITIONS */

/* GOVERNANCE SECTION Hospitality page fixes Appended: April 2026 */

/* Modifier: governance-body when followed by a subtitle (reduces bottom gap) */
.governance-body--with-subtitle {
  margin-bottom: 28px;
}

/* Tablet responsive: reduce governance section padding */
@media (max-width: 1024px) {
  .governance-section {
    padding: 60px 28px;
  }
  .governance-inner {
    max-width: 100%;
  }
}

/* Mobile: reset horizontal borders on reality cards (irrelevant in 1-col layout) */
@media (max-width: 600px) {
  .reality-card--bl { border-left: none; }
  .reality-card--bt { border-top: none; }
  .reality-card + .reality-card { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .reality-card--empty { display: none; }
}

/* Tablet: hide empty filler cell so it doesn't appear as a blank row */
@media (max-width: 900px) {
  .reality-card--empty { display: none; }
}

/* END GOVERNANCE FIXES */
/* IT & ITES PAGE ADDITIONS Appended: April 2026 All rules are additions only no existing rules were modified. */

/* Hero image column base layout (solutions pages) */
.hero-wrap .hero-img-placeholder {
  flex: 1;
  display: flex;
}

/* Pain card accent icon colour variants */
.governance-metric-icon--teal   { background: rgba(99,  179, 237, 0.15); }
.governance-metric-icon--purple { background: rgba(159, 122, 234, 0.15); }

/* Proven gradient variant IT & ITES page */
.proven-grid--it {
  background: linear-gradient(135deg, #1a5bff 0%, #0b8f5e 100%);
}

/* AI section: flex image cell wrapper */
.ai-img-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Why section: arrow bullet */
.why-arrow {
  color: #60a5fa;
  font-weight: 700;
  flex-shrink: 0;
}

/* Why section: SEO anchor box dark panel variant */
.why-seo-box {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
}
.why-seo-box strong { color: #fff; }

/* Ops bullets: bottom margin variants */
.ops-bullets--mb    { margin-bottom: 20px; }
.ops-bullets--mb-lg { margin-bottom: 24px; }

/* Ops outcome: bottom margin modifier */
.ops-outcome--mb { margin-bottom: 32px; }

/* Aspect-ratio helper for dark image placeholders */
.ph-ar-16-11 { aspect-ratio: 16 / 11; }

/* Connecting HR section wrapper */
.connecting-section {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 64px;
}
@media (max-width: 1024px) {
  .connecting-section { padding: 60px 28px; }
}

/* END IT & ITES PAGE ADDITIONS */
/* MANUFACTURING PAGE ADDITIONS Appended: April 2026 All rules are additions only no existing rules were modified. */

/* Hero: bold subtitle line beneath h1 */
.hero-subtitle-line {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.75;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* Hero sub paragraph spacing modifiers */
.hero-sub--mb-sm { margin-bottom: 20px; }
.hero-sub--mb    { margin-bottom: 32px; }

/* Logo band */
.logo-band {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  overflow: hidden;
}
.logo-band-label {
  text-align: center;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 28px;
}
.logo-scroller { overflow: hidden; position: relative; }
.logo-scroller::before,
.logo-scroller::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.logo-scroller::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.logo-scroller::after  { right: 0; background: linear-gradient(to left, #fff, transparent); }
.logo-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: scroll-logos 50s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0.6;
  transition: opacity .25s;
  flex-shrink: 0; cursor: default;
}
.logo-item:hover { opacity: 1; }
.logo-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.logo-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.92rem;
  color: var(--navy); white-space: nowrap;
}

/* Governance inner wrapper */
.governance-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.governance-body {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 1000px;
  line-height: 1.7;
  margin-bottom: 44px;
}
/* All <strong> inside governance dark section defaults to white */
.governance-section strong { color: #fff; }

/* Governance metrics 3-top / 2-bottom split grid (Manufacturing) */
.governance-metrics-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: none;
}
.governance-metrics-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 44px;
}
@media (max-width: 1024px) {
  .governance-metrics-top    { grid-template-columns: repeat(2, 1fr); border-radius: 16px 16px 0 0; }
  .governance-metrics-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .governance-metrics-top    { grid-template-columns: 1fr; }
  .governance-metrics-bottom { grid-template-columns: 1fr; }
}

/* Governance impact italic summary line */
.governance-impact--mfg {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 960px;
}
.governance-impact--mfg strong {
  color: rgba(255, 255, 255, 0.8);
  font-style: normal;
}

/* ops-card inner body wrapper */
.ops-body { flex: 1; }

/* Connecting HR to factory floor section (spacious variant) */
.connecting-section--spacious {
  padding-top: 100px;
  padding-bottom: 100px;
}
.connecting-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.connecting-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 28px;
}
.connecting-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.connecting-bullet {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.6;
}
.connecting-bullet-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #ede9fe;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem; font-weight: 700;
  color: #6d28d9;
}
.connecting-outcome-box {
  border: 1.5px dashed #86efac;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #f0fdf4;
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.6;
}
.connecting-outcome-box strong { color: var(--navy); }
.connecting-quote-box {
  border: 1.5px dashed #a5b4fc;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  background: #f5f3ff;
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.7;
  font-style: italic;
}
.connecting-quote-source {
  font-style: normal;
  font-weight: 600;
  color: var(--text-muted);
}
.connecting-img-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* AI section: manufacturing subtitle modifier */
.ai-lead--strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  margin-bottom: 28px;
}
/* All <strong> inside ai-panel defaults to white */
.ai-panel strong { color: #fff; }
.ai-cta-row { margin-top: 32px; }

/* Image placeholders */
.ph-light {
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: #94a3b8;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.14));
  width: 100%;
}
.ph-light--shadow-sm { filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.1)); }
.ph-dark {
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: rgba(255, 255, 255, 0.5);
  width: 100%;
}
.ph-dark-ai {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: rgba(255, 255, 255, 0.3);
}
.ph-dark-why {
  width: 100%; max-width: 480px;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px dashed rgba(255, 255, 255, 0.25);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.ph-label {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
}
.ph-sublabel {
  font-size: 0.72rem; font-weight: 400; opacity: 0.7;
}

/* Proven section */
.proven-outer {
  padding: 0 64px 100px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1024px) { .proven-outer { padding: 0 28px 72px; } }
@media (max-width: 768px)  { .proven-outer { padding: 0 20px 60px; } }

.proven-grid--mfg {
  background: linear-gradient(135deg, #1a5bff 0%, #0b3bbf 40%, #22c55e 100%);
  border-radius: 24px;
  padding: 64px;
}
@media (max-width: 900px) { .proven-grid--mfg { padding: 40px; } }

.proven-title {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800; color: #fff;
  letter-spacing: -0.02em; line-height: 1.08;
  margin-bottom: 10px;
}
.proven-meta {
  font-size: 0.9rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
}
.proven-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 32px;
}
.proven-bullet {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6;
}
.proven-bullet-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.proven-quote {
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.8);
  font-style: italic; line-height: 1.7; margin-bottom: 28px;
}
.proven-img-col {
  display: flex; align-items: center; justify-content: center;
}

/* Outcomes table */
.outcomes-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 28px rgba(11, 31, 74, 0.06);
}
@media (max-width: 768px) {
  .outcomes-table { grid-template-columns: 1fr; }
  .outcomes-col--border-r { border-right: none; border-bottom: 1px solid var(--border); }
}
.outcomes-col { padding: 32px 28px; }
.outcomes-col--border-r { border-right: 1px solid var(--border); }
.outcomes-col-header {
  font-weight: 700; font-size: 1rem; color: var(--navy);
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.outcomes-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 18px;
}
.outcomes-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; color: var(--text-muted);
}
.outcomes-cta { text-align: center; margin-top: 40px; }

/* Why section (manufacturing) */
.why-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800; color: #fff;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 16px;
}
.why-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 32px;
}
.why-bullet {
  display: flex; gap: 14px; align-items: center;
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); line-height: 1.6;
}
.why-bullet-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem; font-weight: 700; color: #a5b4fc;
}
.why-img-col {
  display: flex; justify-content: center; align-items: center;
}

/* END MANUFACTURING PAGE ADDITIONS */

/* Manufacturing page: section images */
.mfg-img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.mfg-img--hero {
  border-radius: 20px;
  aspect-ratio: 16 / 11;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.14));
  max-width: 560px;
}
.mfg-img--section {
  border-radius: 20px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.1));
}
.mfg-img--proven {
  border-radius: 16px;
  height: auto;
}
.mfg-img--ai {
  border-radius: 16px;
  height: auto;
}
.mfg-img--why {
  border-radius: 20px;
  height: auto;
  max-width: 480px;
}

/* Manufacturing hero: fixes */
/* Prevent flex-column stretching the CTA button to full width */
.hero-wrap .hero-left-col {
  align-items: flex-start;
}
/* Hero image: show full image without cropping */
.mfg-img--hero {
  aspect-ratio: unset;
  object-fit: contain;
  height: auto;
}

/* P&B SERVICES PAGE NEW CLASSES Added: April 2026 */

/* Hero */
.hero-subtitle {
  font-size: 1.15rem; font-weight: 600;
  color: #0d1b3e; opacity: 0.75;
  margin-bottom: 16px; letter-spacing: -0.01em;
}
.hero-cta-row { margin-top: 32px; }

/* Logo band */
.logo-band {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0; overflow: hidden;
}
.logo-band-label {
  text-align: center; font-size: 0.69rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 28px;
}
.logo-scroller { overflow: hidden; position: relative; }
.logo-scroller::before,
.logo-scroller::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 2; pointer-events: none;
}
.logo-scroller::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.logo-scroller::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }
.logo-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: scroll-logos 50s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0.6;
  transition: opacity .25s;
  flex-shrink: 0; cursor: default;
}
.logo-item:hover { opacity: 1; }
.logo-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.logo-name { font-weight: 700; font-size: .92rem; color: #0d1b3e; white-space: nowrap; }

/* Dark section (workforce reality / governance) */
.dark-section { background: #0d1b3e; padding: 80px 64px; }
.dark-section-inner { max-width: 1280px; margin: 0 auto; }
.dark-section-h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700;
  color: #fff; letter-spacing: -.02em; margin-bottom: 14px;
}
.dark-section-lead {
  font-size: .93rem; color: rgba(255,255,255,.6);
  max-width: 900px; line-height: 1.7; margin-bottom: 44px;
}
.dark-summary {
  font-size: .95rem; color: rgba(255,255,255,.55);
  font-style: italic; line-height: 1.75;
  margin-bottom: 28px; max-width: 960px;
}
.gov-metrics-wrap {
  display: grid; gap: 1px;
  background: rgba(255,255,255,.07);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 44px;
}
.gov-card {
  background: rgba(255,255,255,.04);
  padding: 28px 24px;
  display: flex; gap: 14px; align-items: flex-start;
}
.gov-card--border-l { border-left: 1px solid rgba(255,255,255,.07); }
.gov-card-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.gov-card-icon--amber  { background: rgba(234,179,8,.15); }
.gov-card-icon--green  { background: rgba(34,197,94,.15); }
.gov-card-icon--orange { background: rgba(251,146,60,.15); }
.gov-card-icon--blue   { background: rgba(37,99,235,.25); }
.gov-card-text { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.65; }
@media (max-width: 1024px) { .dark-section { padding: 60px 28px; } }
@media (max-width: 768px)  { .dark-section { padding: 48px 20px; } }

/* Ops card inner body & bullets */
.ops-body { flex: 1; }
.ops-bullets {
  list-style: none; display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 14px;
}
.ops-bullet {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .82rem; color: var(--text-muted); line-height: 1.5;
}
.ops-bullet-arrow { color: var(--blue); flex-shrink: 0; margin-top: 1px; }

/* Connecting HR section */
.connecting-section {
  background: #f8fafc;
  padding: 80px 64px;
  border-top: 1px solid var(--border);
}
.connecting-inner {
  max-width: 1280px; margin: 0 auto;
}
.connecting-h2 {
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700;
  color: #0d1b3e; line-height: 1.08;
  letter-spacing: -.025em; margin-bottom: 16px;
}
.connecting-subtitle {
  font-size: .97rem; font-weight: 700;
  color: #0d1b3e; line-height: 1.6; margin-bottom: 28px;
}
.connecting-bullets {
  list-style: none; display: flex; flex-direction: column;
  gap: 14px; margin-bottom: 24px;
}
.connecting-bullet {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: .92rem; color: var(--text-body); line-height: 1.6;
}
.connecting-bullet-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #eff6ff; border: 1px solid #bfdbfe;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--blue);
  font-size: .75rem; font-weight: 700; margin-top: 1px;
}
.connecting-img { width: 100%; border-radius: 20px; filter: drop-shadow(0 20px 60px rgba(13,27,62,0.08)); }
@media (max-width: 1024px) { .connecting-section { padding: 60px 28px; } }
@media (max-width: 768px)  { .connecting-section { padding: 48px 20px; } }

/* AI section image wrapper & subtitle */
.ai-img-wrap { width: 100%; border-radius: 16px; }
.ai-img-wrap img { width: 100%; height: auto; border-radius: 16px; }
.ai-lead--strong { font-weight: 700; color: rgba(255,255,255,.85); font-size: 1rem; margin-bottom: 0; }
.ai-list--mt { margin-top: 28px; }
.ai-cta-row { margin-top: 28px; }

/* Proven transformation section */
.proven-section-header { text-align: center; margin-bottom: 40px; }
.proven-section-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700;
  color: #0d1b3e; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px;
}
.proven-section-meta { font-size: .9rem; font-weight: 600; color: var(--text-muted); }
.proven-table-wrap {
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 24px; overflow: hidden;
}
.proven-table-header {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 20px 40px; border-bottom: 1px solid var(--border); background: #fff;
}
.proven-col-label {
  font-size: .78rem; font-weight: 700; color: #94a3b8;
  letter-spacing: .08em; text-transform: uppercase;
}
.proven-col-label--right { text-align: right; }
.proven-footer {
  padding: 32px 40px; background: #fff; border-top: 1px solid var(--border);
}
.proven-quote-box {
  border: 1.5px dashed #6ee7b7; border-radius: 12px;
  padding: 18px 24px; margin-bottom: 28px; background: #f0fdf4;
}
.proven-quote-text { font-size: .95rem; color: #374151; font-style: italic; line-height: 1.7; }
.proven-cta-row { text-align: center; }
.metric-num-note { font-size: .82rem; font-weight: 600; color: #6b7280; }

/* Outcomes section */
.s-wrap--outcomes { padding-top: 80px; padding-bottom: 100px; }
.s-title--center { text-align: center; max-width: 100%; margin-bottom: 12px; }
.outcomes-subtitle {
  text-align: center; font-size: .97rem;
  color: var(--text-muted); margin-bottom: 48px;
}

/* Why section additions */
.why-subtitle {
  font-size: .97rem; font-weight: 700;
  color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: 28px;
}
.why-bullet-dot {
  display: flex; gap: 12px; align-items: center;
  font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.6;
}
.why-bullet-dot-icon {
  width: 6px; height: 6px; border-radius: 50%;
  background: #60a5fa; display: inline-block; flex-shrink: 0;
}
.why-summary-box {
  border: 1.5px dashed rgba(255,255,255,.25);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 28px;
}
.why-summary-text { font-size: .92rem; color: rgba(255,255,255,.8); line-height: 1.7; }
.why-img-wrap { width: 100%; max-width: 480px; }
.why-img-wrap img { width: 100%; border-radius: 20px; }

/* END P&B SERVICES PAGE ADDITIONS */

/* CHRO PAGE NEW CLASSES Added: April 2026 */

/* Image placeholders */
.img-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; border-radius: 20px;
}
.img-placeholder--light {
  background: #f1f5f9; border: 2px dashed #cbd5e1; color: #94a3b8;
}
.img-placeholder--navy {
  background: rgba(255,255,255,.08);
  border: 2px dashed rgba(255,255,255,.25);
  color: rgba(255,255,255,.4);
}
.img-placeholder span { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.img-placeholder small { font-size: .72rem; font-weight: 400; opacity: .7; }
.img-placeholder--navy span { color: rgba(255,255,255,.5); }
.img-placeholder--navy small { color: rgba(255,255,255,.35); opacity: 1; }

/* Buttons (CHRO) */
.btn-blue {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 10px;
  font-weight: 700; font-size: .9rem;
  box-shadow: 0 6px 24px rgba(37,99,235,.35);
  transition: background .2s, transform .15s;
}
.btn-blue:hover { background: #1d4ed8; transform: translateY(-1px); }
.btn-blue-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 14px 30px; border-radius: 100px;
  font-weight: 700; font-size: .92rem;
  box-shadow: 0 6px 24px rgba(37,99,235,.3);
  transition: background .2s, transform .15s;
}
.btn-blue-pill:hover { background: #1d4ed8; transform: translateY(-1px); }

/* CHRO Hero image placeholder */
.chro-hero-img { aspect-ratio: 16 / 11; }

/* The Reality section (dark) */
.chro-reality {
  background: var(--navy); padding: 72px 64px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.reality-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.chro-reality-h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800;
  color: #fff; margin-bottom: 20px; letter-spacing: -.02em;
}
.chro-reality-lead {
  font-size: .97rem; color: rgba(255,255,255,.78);
  line-height: 1.8; max-width: 480px;
}
.chro-reality-lead strong { color: #fff; }
.chro-reality-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; }

/* Reality Check section (white) */
.reality-check-wrap { background: #fff; padding: 100px 64px; }
.section-inner { max-width: 1280px; margin: 0 auto; }
.chro-rc-header { text-align: center; max-width: 860px; margin: 0 auto 72px; }
.chro-rc-h2 {
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700;
  color: var(--navy); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px;
}
.chro-rc-subtitle {
  font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 20px;
}
.chro-rc-body { font-size: .95rem; color: var(--text-body); line-height: 1.8; }
.reality-check-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.chro-rc-img {
  width: 100%; min-height: 320px; align-self: stretch;
  border-radius: 20px;
  filter: drop-shadow(0 12px 40px rgba(13,27,62,.1));
}
.chro-rc-sfh {
  font-size: 1.7rem; font-weight: 800; color: var(--navy);
  margin-bottom: 28px; letter-spacing: -.02em;
}
.familiar-list { list-style: none; display: flex; flex-direction: column; gap: 22px; }
.familiar-item { display: flex; gap: 14px; align-items: flex-start; }
.familiar-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: #eff6ff; border: 1.5px solid #bfdbfe;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 4px;
  font-size: 1rem; font-weight: 700; color: var(--blue);
}
.familiar-text { font-size: .92rem; color: var(--text-body); line-height: 1.7; }
.familiar-text strong { color: var(--navy); }

/* Pillars accordion section */
.pillars-wrap { background: var(--navy); padding: 100px 64px; }
.pillars-inner { max-width: 900px; margin: 0 auto; }
.pillars-h2 {
  font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 700;
  color: #fff; letter-spacing: -.03em; line-height: 1.12;
  margin-bottom: 64px;
}
.pillar-top-divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0 40px; }
.pillar-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; margin-bottom: 16px;
  overflow: hidden; transition: background .2s;
}
.pillar-item[open] { background: rgba(255,255,255,.07); }
.pillar-item[open] .pillar-icon { transform: rotate(180deg); }
.pillar-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 28px 32px; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.5;
}
.pillar-summary::-webkit-details-marker { display: none; }
.pillar-summary::marker { content: none; }
.pillar-summary:hover { background: rgba(255,255,255,.04); }
.pillar-summary > span:first-child { flex: 1; }
.pillar-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; align-self: center; transition: transform .25s;
}
.pillar-body { padding: 0 32px 28px; }
.pillar-subsection {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center; margin-bottom: 8px;
}
.pillar-sub-left { display: flex; flex-direction: column; justify-content: center; }
.pillar-sub-title {
  font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: 16px;
}
.pillar-sub-body { font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.75; }
.pillar-sub-body strong { color: #fff; }
.pillar-sub-body--mt { margin-top: 12px; }
.pillar-sub-header { text-align: center; margin-bottom: 32px; }
.pillar-sub-h {
  font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; color: #fff;
  letter-spacing: -.02em; margin-bottom: 10px;
}
.pillar-sub-lead { font-size: .92rem; color: rgba(255,255,255,.55); line-height: 1.6; }
.pillar-sub-img { display: flex; align-items: stretch; }
.pillar-sub-divider { height: 1px; background: rgba(255,255,255,.08); margin: 40px 0; }
.pillar-img { width: 100%; min-height: 260px; align-self: stretch; border-radius: 14px; }
.pillar-img--tall { min-height: 280px; }
.pillar-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.pillar-bullets li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: .9rem; color: rgba(255,255,255,.78); line-height: 1.7;
}
.pillar-bullets li p { margin: 0; }
.pillar-bullets strong { color: #fff; }
.pb-arrow {
  min-width: 28px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(37,99,235,.35); border: 1.5px solid rgba(99,147,255,.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #93c5fd;
  flex-shrink: 0; margin-top: 2px;
}

/* CHRO Section images */
.chro-section-img {
  width: 100%; display: block; border-radius: 16px;
}
.chro-reality-img {
  width: 100%; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(13,27,62,.2));
}
.chro-rc-img {
  min-height: 320px; align-self: stretch;
  object-fit: cover; border-radius: 20px;
  filter: drop-shadow(0 12px 40px rgba(13,27,62,.1));
}
.pillar-section-img {
  width: 100%; display: block;
  border-radius: 14px; object-fit: cover;
  min-height: 260px; align-self: stretch;
}
.case-logo-img {
  width: 160px; height: 72px; object-fit: contain;
  display: block; border-radius: 6px;
}

/* Case studies section */
.case-studies-section {
  background: #fff; border-top: 1px solid var(--border); padding: 80px 64px;
}
.case-cards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.case-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s, box-shadow .25s;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(13,27,62,.1);
}
.case-card-logo { margin-bottom: 4px; }
.case-logo-placeholder { width: 160px; height: 72px; border-radius: 10px; }
.case-logo-text { font-size: .72rem; }
.case-card-industry { font-size: .85rem; color: var(--text-body); }
.case-card-industry span { color: var(--blue); font-weight: 600; }
.case-card-title {
  font-size: 1.25rem; font-weight: 800; color: var(--navy);
  line-height: 1.3; letter-spacing: -.02em;
}
.case-card-body { font-size: .9rem; color: var(--text-muted); line-height: 1.75; flex: 1; }
.case-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 12px 22px; border-radius: 100px;
  font-size: .88rem; font-weight: 700; width: fit-content; margin-top: 8px;
  transition: background .2s, transform .15s;
}
.case-card-cta:hover { background: #1d4ed8; transform: translateY(-1px); }

/* CTA Banner */
.cta-banner-section {
  background: var(--bg-light); border-top: 1px solid var(--border); padding: 72px 64px;
}
.cta-final-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.cta-final-copy { max-width: 560px; }
.cta-final-h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700;
  color: var(--navy); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px;
}
.cta-final-lead { font-size: .97rem; color: var(--text-muted); line-height: 1.75; }
.cta-final-btn { flex-shrink: 0; }

/* CHRO Responsive */
@media (max-width: 1024px) {
  .chro-reality { padding: 56px 28px; }
  .reality-inner { grid-template-columns: 1fr; gap: 36px; }
  .reality-check-wrap { padding: 72px 28px; }
  .reality-check-grid { grid-template-columns: 1fr; gap: 40px; }
  .pillars-wrap { padding: 72px 28px; }
  .pillar-subsection { grid-template-columns: 1fr; gap: 28px; }
  .case-studies-section { padding: 56px 28px; }
  .cta-banner-section { padding: 56px 28px; }
}
@media (max-width: 768px) {
  .chro-reality { padding: 48px 20px; }
  .reality-check-wrap { padding: 56px 20px; }
  .chro-rc-header { margin-bottom: 40px; }
  .reality-check-grid { grid-template-columns: 1fr; gap: 32px; }
  .pillars-wrap { padding: 56px 20px; }
  .pillar-summary { padding: 22px 20px; font-size: .92rem; }
  .pillar-body { padding: 0 20px 24px; }
  .pillar-sub-h { font-size: 1.3rem; }
  .cert-badges { justify-content: center; }
  .case-studies-section { padding: 48px 20px; }
  .case-cards-grid { grid-template-columns: 1fr; }
  .cta-banner-section { padding: 48px 20px; }
  .cta-final-inner { flex-direction: column; text-align: center; align-items: center; }
}

/* END CHRO PAGE */
/* CIO PAGE ADDITIONS */

/* HERO HELPERS */
.hero-sub--tight          { margin-top: -12px; }
.img-placeholder--ar-16-11{ aspect-ratio: 16 / 11; }
.img-placeholder--ar-4-3  { aspect-ratio: 4 / 3; }
.img-placeholder--ar-16-10{ aspect-ratio: 16 / 10; }
.img-placeholder--shadow-lg{ filter: drop-shadow(0 20px 60px rgba(13,27,62,.14)); }
.img-placeholder--shadow-sm{ filter: drop-shadow(0 12px 40px rgba(13,27,62,.08)); }

/* UTILITIES */
.text-navy { color: var(--navy); }

/* INTEGRATION PROBLEM SECTION */
.integration-section { background: var(--bg-light); padding: 88px 64px; border-bottom: 1px solid var(--border); }
.integration-inner   { max-width: 1280px; margin: 0 auto; }

/* Centred header */
.integration-header  { text-align: center; margin-bottom: 60px; }
.integration-header h2 {
  font-size: clamp(2rem,3.5vw,3rem); font-weight: 700;
  color: var(--navy); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px;
}
.integration-subtitle { font-size: 1rem; font-weight: 700; color: var(--blue); margin-bottom: 16px; }
.integration-header > p {
  font-size: .95rem; color: var(--text-body); line-height: 1.75;
  max-width: 640px; margin: 0 auto 10px;
}
.integration-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 100px; padding: 5px 14px; margin-top: 20px;
}

/* Interactive card grid */
.integration-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.integration-card {
  display: flex; align-items: flex-start; gap: 20px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.integration-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--blue), #22c55e);
  opacity: 0; transition: opacity .25s;
}
.integration-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(13,27,62,.1);
  border-color: #bfdbfe;
}
.integration-card:hover::before { opacity: 1; }
.integration-icon {
  width: 56px; height: 56px; min-width: 56px;
  border-radius: 14px; background: #f0f6ff; border: 1px solid #bfdbfe;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.integration-card:hover .integration-icon { background: #dbeafe; }
.integration-card-body h3 {
  font-size: 1rem; font-weight: 800; color: var(--navy);
  margin-bottom: 8px; letter-spacing: -.01em;
}
.integration-card-body p { font-size: .9rem; color: var(--text-body); line-height: 1.75; }

/* Centered icon-top variant (e.g. "Who Benefits from Our Services?") */
.benefit-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; max-width: 1100px; margin: 0 auto; padding: 0 64px 88px; }
/* people-engagement.html nests .benefit-cards inside .phr-container (fixed
   a bug where it rendered outside the container, misaligned with the
   heading above it) -- .phr-container already centers and pads the
   content, so .benefit-cards' own centering/padding here would just
   double up and narrow it further. */
.phr-container .benefit-cards { max-width: none; padding: 0 0 88px; }
.benefit-card  { text-align: center; }
.benefit-card .integration-icon { margin: 0 auto 20px; color: var(--blue); }
.benefit-card .integration-card-body h3 { font-size: 1.05rem; }
@media (max-width: 900px) {
  .benefit-cards { grid-template-columns: 1fr; max-width: 420px; padding: 0 20px 56px; }
}

/* INTEGRATION ADVANTAGE (navy) */
.int-advantage        { background: var(--navy); padding: 88px 64px; }
.int-advantage-inner  { max-width: 1280px; margin: 0 auto; }
.int-advantage-header { text-align: center; margin-bottom: 64px; }
.int-advantage-header h2 { font-size: clamp(2rem,3.5vw,3rem); font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.int-sub              { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.int-advantage-header > p { font-size: .95rem; color: rgba(255,255,255,.5); line-height: 1.75; max-width: 680px; margin: 0 auto; }
.int-advantage-body   { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.int-connect-list     { display: flex; flex-direction: column; gap: 28px; }
.int-connect-list h3  { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.int-connect-item     { display: flex; gap: 16px; align-items: flex-start; }
.int-connect-icon     { width: 36px; height: 36px; border-radius: 50%; background: rgba(99,102,241,.25); border: 1.5px solid rgba(129,140,248,.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.int-connect-icon svg { width: 16px; height: 16px; }
.int-connect-item p      { font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.75; }
.int-connect-item strong { color: #fff; }
.img-placeholder--navy span  { color: rgba(255,255,255,.5); }
.img-placeholder--navy small { color: rgba(255,255,255,.35); }

/* PILLARS LAYOUT */
.pillars-max   { max-width: 1280px; margin: 0 auto; }
.pillars-inner { max-width: 900px;  margin: 0 auto; }
.pillars-intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; margin-bottom: 72px;
}
.cio-eyebrow   { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #60a5fa; margin-bottom: 16px; }
.pillars-h2    { font-size: clamp(1.9rem,3vw,2.8rem); font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px; text-align: left; }
.pillars-intro-img { width: 100%; max-width: 100%; border-radius: 16px; display: block; object-fit: cover; aspect-ratio: 16/10; }
.pillars-subtitle { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.85); line-height: 1.5; margin-bottom: 12px; }
.pillars-lead  { font-size: .97rem; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 480px; }
.pillar-divider{ height: 1px; background: rgba(255,255,255,.08); margin: 8px 0 28px; }
.pillar-intro  { font-size: .93rem; color: rgba(255,255,255,.6); line-height: 1.75; margin-bottom: 32px; }

/* CERT BADGES */
.cert-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); }
.cert-badge  { width: 80px; height: 80px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1.5px dashed rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.cert-badge span { font-size: .6rem; color: rgba(255,255,255,.3); font-weight: 600; }

/* CIO SECTION WRAPPER */
.cio-section        { padding: 88px 64px; border-top: 1px solid var(--border); }
.cio-section--white { background: #fff; }
.cio-section--light { background: var(--bg-light); }
.cio-section-inner  { max-width: 1280px; margin: 0 auto; }
.cio-section-header { text-align: center; margin-bottom: 64px; }
.cio-section-h2     { font-size: clamp(2rem,3.5vw,3rem); font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.cio-section-sub    { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.cio-section-lead   { font-size: .95rem; color: var(--text-muted); line-height: 1.75; max-width: 680px; margin: 0 auto; }
.cio-two-col        { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* CONNECT LIST (white sections) */
.cio-connect-list     { display: flex; flex-direction: column; gap: 28px; }
.cio-connect-list h3  { font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.cio-connect-item     { display: flex; gap: 16px; align-items: flex-start; }
.cio-connect-icon     { width: 36px; height: 36px; border-radius: 50%; background: #eff6ff; border: 1.5px solid #bfdbfe; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.cio-connect-icon svg { width: 16px; height: 16px; }
.cio-connect-item p      { font-size: .9rem; color: var(--text-body); line-height: 1.75; }
.cio-connect-item strong { color: var(--navy); }

/* IT STRATEGY SECTION */
.cio-strategy-h2      { font-size: clamp(2rem,3.5vw,3rem); font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; text-align: center; margin-bottom: 56px; }
.cio-strategy-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cio-strategy-list    { display: flex; flex-direction: column; }
.cio-strategy-item    { display: flex; gap: 20px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--border); }
.cio-strategy-item:last-child { border-bottom: none; }
.cio-strategy-icon    { width: 40px; height: 40px; border-radius: 50%; background: #eff6ff; border: 1.5px solid #bfdbfe; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.cio-strategy-icon svg{ width: 16px; height: 16px; }
.cio-strategy-item p      { font-size: .92rem; color: var(--text-body); line-height: 1.75; }
.cio-strategy-item strong { color: var(--navy); }

/* IT TEAM SECTION */
.cio-team-h2   { font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 20px; }
.cio-body-text { font-size: .95rem; color: var(--text-body); line-height: 1.8; margin-bottom: 16px; }
.cio-body-bold { font-size: .95rem; font-weight: 700; color: var(--navy); line-height: 1.75; }

/* RESPONSIVE: CIO */
@media(max-width:1024px){
  .integration-section   { padding: 72px 28px; }
  .integration-grid      { grid-template-columns: 1fr; gap: 32px; }
  .int-advantage         { padding: 72px 28px; }
  .int-advantage-body    { grid-template-columns: 1fr; gap: 40px; }
  .pillars-intro-grid    { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }
  .cio-section           { padding: 72px 28px; }
  .cio-two-col           { grid-template-columns: 1fr; gap: 40px; }
  .cio-strategy-two-col  { grid-template-columns: 1fr; gap: 40px; }
}
@media(max-width:768px){
  .integration-section  { padding: 60px 20px; }
  .int-advantage        { padding: 60px 20px; }
  .cio-section          { padding: 60px 20px; }
  .cio-connect-list h3  { font-size: 1.2rem; }
  .cio-strategy-h2      { font-size: 1.6rem; }
  .cio-team-h2          { font-size: 1.4rem; }
}

/* Centered icon + label row (e.g. "Our Services") */
.services-row-wrap  { padding: 88px 64px 56px; text-align: center; }
.services-row-title { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 700; color: var(--navy); margin-bottom: 56px; }
.services-row       { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; }
.services-row-item  { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 160px; }
.services-row-item img  { width: 64px; height: 64px; object-fit: contain; }
.services-row-item span { font-size: 1rem; font-weight: 700; color: var(--navy); }
@media (max-width: 768px) {
  .services-row-wrap { padding: 56px 20px 40px; }
  .services-row      { gap: 36px; }
}

/* CFO PAGE CLASS-BASED STYLES */

/* Layout helpers */
.section-inner { max-width: 1280px; margin: 0 auto; }
.pillars-accordion-wrap { max-width: 900px; margin: 0 auto; }
.pillars-wrap--navy { background: #0d1b3e; }

/* Hero */
.hero-img-box { aspect-ratio: 16/11; filter: drop-shadow(0 20px 60px rgba(13,27,62,.14)); }
.hero-sub--overlap { margin-top: -12px; }

/* Text utilities */
.text-navy { color: var(--navy); }
.text-white { color: #fff; }

/* Pillars intro header */
.pillars-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #60a5fa; margin-bottom: 16px; }
.pillars-heading { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px; }
.pillars-lead { font-size: .97rem; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 480px; }
.pillar-intro-img { width: 100%; border-radius: 16px; display: block; object-fit: cover; }

/* Pillar body helpers */
.pillar-body-divider     { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0 40px; }
.pillar-body-divider--sm { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0 28px; }
.pillar-body-divider--md { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0 36px; }
.pillar-intro-text { font-size: .97rem; color: rgba(255,255,255,.78); line-height: 1.75; margin-bottom: 36px; }
.pillar-sub-text { font-size: .93rem; color: rgba(255,255,255,.6); line-height: 1.8; margin-bottom: 36px; }
.pillar-bullets--mb    { margin-bottom: 40px; }
.pillar-bullets--mb-sm { margin-bottom: 32px; }
.pillar-callout { font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.75; background: rgba(37,99,235,.2); border: 1px solid rgba(99,147,255,.25); border-radius: 12px; padding: 18px 22px; }
.pillar-callout strong, .pillar-callout .text-white { color: #fff; }

/* Pillar pill label */
.pillar-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 6px 16px; font-size: .82rem; font-weight: 700; color: #fff; margin-bottom: 24px; }

/* Pillars intro grid */
.pillars-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 72px; }

/* CTA row */
.pillars-cta { text-align: center; margin-top: 48px; }
.btn-blue-pill--lg { font-size: 1rem !important; padding: 16px 40px !important; }

/* Finance leaders section */
.cfo-finance-section { background: #fff; padding: 80px 64px; border-top: 1px solid var(--border); }
.cfo-finance-section .reality-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cfo-finance-title { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1.08; margin-bottom: 24px; }
.cfo-finance-body { font-size: 1rem; color: var(--text-body); line-height: 1.8; margin-bottom: 28px; }
.cfo-finance-bold { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.75; margin-bottom: 40px; }
.cfo-finance-img { width: 100%; aspect-ratio: 4/3; border-radius: 20px; filter: drop-shadow(0 12px 40px rgba(13,27,62,.08)); }

/* Responsive: CFO additions */
@media (max-width: 1024px) {
  .pillars-intro-grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }
  .cfo-finance-section { padding: 64px 28px; }
  .cfo-finance-section .reality-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .cfo-finance-section { padding: 56px 20px; }
  .pillars-wrap--navy { padding: 56px 20px; }
}

/* Logo band: image-based logo sizing (T&L page) */
.logo-img {
  height: 36px;
  width: auto;
  display: block;
  max-width: 140px;
  object-fit: contain;
}

/* Logo slider: remove grayscale filter */
.logo-item {
  filter: none;
  opacity: 1;
}
.logo-item:hover {
  filter: none;
  opacity: 0.8;
}

/* Remove click outline on links */
a:focus:not(:focus-visible){
  outline:none;
}

/* Proven metrics table rows (missing classes added April 2026) */
.metrics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  transition: background .15s;
}
.metrics-row:hover { background: #fafbff; }
.metrics-row:last-of-type { border-bottom: none; }

.metric-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .9rem;
  color: #374151;
  font-weight: 500;
}

.metric-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid #bfdbfe;
  background: #eff6ff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.metric-value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid #ede9fe;
  background: #f5f3ff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.metric-num {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0d1b3e;
}

@media (max-width: 768px) {
  .metrics-row { padding: 16px 20px; }
  .metric-num  { font-size: .92rem; }
  .proven-table-header { padding: 14px 20px; }
  .proven-footer { padding: 24px 20px; }
}

/* WEBINAR REGISTRATION PAGE phrhome.css addendum */

/* Webinar Hero */
.wbr-hero {
  padding: 80px 48px 72px;
  background: linear-gradient(160deg, #0a1628 0%, #0d1b3e 45%, #1a2d6b 100%);
  position: relative;
  overflow: hidden;
}
.wbr-hero::before {
  content: '';
  position: absolute;
  top: -140px; right: 10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(249,115,22,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.wbr-hero-inner {
  max-width: 780px;
  margin: 0 auto;
}
.wbr-dual-logo {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}
.wbr-dual-logo-item img {
  display: block;
  object-fit: contain;
}
.wbr-dual-logo-item.phr img   { height: 50px; filter: brightness(0) invert(1); }
.wbr-dual-logo-item.pratesis img { height: 28px; filter: brightness(0) invert(1) opacity(0.9); }
.wbr-dual-logo-divider {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.25);
  margin: 0 18px;
  flex-shrink: 0;
}
.wbr-hero h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
  word-break: break-word;
}
.wbr-hero h1 .accent { color: #f97316; }
.wbr-hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 500px;
}

/* Event meta chips */
.wbr-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}
.wbr-event-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.wbr-event-chip svg { color: #f97316; flex-shrink: 0; }

/* Agenda Section */
.wbr-agenda-section {
  padding: 88px 48px;
  background: #f8fafc;
}
.wbr-section-center {
  text-align: center;
  margin-bottom: 52px;
}
.wbr-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #2563eb;
  margin-bottom: 14px;
}
.wbr-section-center h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #0d1b3e;
  margin-bottom: 12px;
}
.wbr-section-center p {
  font-size: 16px;
  color: #6b7280;
  max-width: 520px;
  margin: 0 auto;
}
.wbr-agenda-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.wbr-agenda-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.wbr-agenda-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}
.wbr-agenda-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.wbr-agenda-num {
  font-size: 36px;
  font-weight: 900;
  color: #2563eb;
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 10px;
}
.wbr-agenda-card h3 { font-size: 15px; font-weight: 800; color: #0d1b3e; margin-bottom: 8px; }
.wbr-agenda-card p  { font-size: 13px; color: #6b7280; line-height: 1.65; }

/* Speaker Section */
.wbr-speaker-section {
  padding: 60px 48px 88px;
  background: #f8fafc;
}
.wbr-speaker-wrap {
  max-width: 1200px;
  margin: 0 auto;
  background: #1e3a8a;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.wbr-speaker-photo {
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
}
.wbr-speaker-photo img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.wbr-speaker-info {
  flex: 1;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wbr-speaker-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.wbr-speaker-name {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.wbr-speaker-role {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 22px;
}
.wbr-speaker-bio {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  max-width: 810px;
}
.wbr-speaker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.wbr-speaker-tag {
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

/* What You're Getting */
.wbr-getting-section {
  padding: 88px 48px;
  background: radial-gradient(ellipse at top left, #1e3a8a 0%, #0d1b3e 60%);
}
.wbr-getting-inner { max-width: 1100px; margin: 0 auto; }
.wbr-getting-section .wbr-section-label { color: rgba(249,115,22,0.9); }
.wbr-getting-section .wbr-section-center h2 { color: #fff; }
.wbr-getting-section .wbr-section-center p  { color: rgba(255,255,255,0.6); }
.wbr-getting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.wbr-getting-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  transition: all .25s;
}
.wbr-getting-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.wbr-getting-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  margin-bottom: 18px;
  background: rgba(249,115,22,0.15);
  display: flex; align-items: center; justify-content: center;
}
.wbr-getting-card h3 { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.wbr-getting-card p  { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.65; }
.wbr-getting-cta { text-align: center; padding-top: 16px; }
.wbr-getting-cta p { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 24px; }
.wbr-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f97316;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 15px 36px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(249,115,22,0.4);
  transition: all .2s;
  text-decoration: none;
}
.wbr-btn-orange:hover { background: #ea6c04; transform: translateY(-2px); }

/* CTA Spotlight */
.wbr-cta-spotlight {
  padding: 100px 48px;
  background: #060d24;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wbr-cta-spotlight::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.wbr-cta-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.wbr-cta-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 28px;
}
.wbr-cta-spotlight h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 0;
}
.wbr-cta-spotlight h2 .hl { color: #3b82f6; }
.wbr-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 16px 36px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(37,99,235,0.45);
  transition: all .2s;
  text-decoration: none;
  margin-top: 36px;
}
.wbr-cta-btn:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,99,235,0.5); }
.wbr-trust-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.wbr-trust-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}
.wbr-trust-chip::before { content: '\2713'; color: #3b82f6; font-weight: 900; }

/* Accreditations (webinar page) */
.wbr-accred-section {
  padding: 56px 48px;
  background: #f8fafc;
  text-align: center;
  border-top: 1px solid #e2e8f0;
}
.wbr-accred-text {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 28px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.wbr-accred-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.wbr-accred-badges img { height: 76px; object-fit: contain; }

/* Webinar page responsive */
@media (max-width: 1200px) {
  .wbr-hero               { padding: 60px 32px 56px; }
  .wbr-hero h1            { font-size: 40px; }
  .wbr-agenda-section,
  .wbr-speaker-section,
  .wbr-getting-section    { padding: 72px 32px; }
}
@media (max-width: 1024px) {
  .wbr-hero h1            { font-size: 36px; }
  .wbr-agenda-grid        { grid-template-columns: repeat(2, 1fr); }
  .wbr-getting-grid       { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .wbr-hero               { padding: 56px 20px 48px; }
  .wbr-hero h1            { font-size: 30px; letter-spacing: -1px; }
  .wbr-hero-sub           { font-size: 15px; }
  .wbr-event-chips        { gap: 8px; }
  .wbr-event-chip         { font-size: 12px; padding: 7px 12px; }
  .wbr-agenda-section,
  .wbr-speaker-section,
  .wbr-getting-section    { padding: 60px 20px; }
  .wbr-section-center h2  { font-size: 26px; }
  .wbr-agenda-grid        { grid-template-columns: 1fr; }
  .wbr-getting-grid       { grid-template-columns: 1fr; }
  .wbr-speaker-wrap       { flex-direction: column; border-radius: 16px; }
  .wbr-speaker-photo      { width: 100%; height: 220px; }
  .wbr-speaker-photo img  { object-position: top center; }
  .wbr-speaker-info       { padding: 28px 24px; }
  .wbr-cta-spotlight      { padding: 72px 20px; }
  .wbr-cta-spotlight h2   { font-size: 32px; letter-spacing: -1px; }
  .wbr-trust-chips        { gap: 14px; flex-direction: column; align-items: center; }
  .wbr-accred-section     { padding: 48px 20px; }
  .wbr-accred-badges      { gap: 16px; }
}
@media (max-width: 400px) {
  .wbr-hero h1            { font-size: 26px; }
  .wbr-hero .hero-badge   { font-size: 10px; }
}

/* WEBINAR HERO two-column layout with HubSpot form card Appended; overrides the single-column .wbr-hero-inner above */

/* Widen the hero and switch inner to two columns */
.wbr-hero {
  padding: 72px 48px 80px;
}
.wbr-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

/* Left column copy */
.wbr-hero-left {
  min-width: 0;
}
.wbr-hero-left .wbr-hero-sub {
  max-width: 100%;
}

/* Right column registration card */
.wbr-register-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.wbr-register-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f97316, #2563eb);
}
.wbr-register-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.wbr-register-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  line-height: 1.5;
}
.wbr-form-note {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* HubSpot form overrides scoped to .wbr-register-card */
.wbr-register-card .hs-form fieldset           { max-width: 100% !important; }
.wbr-register-card .hs-form .hs-form-field     { margin-bottom: 14px !important; }

.wbr-register-card .hs-form .hs-form-field label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.wbr-register-card .hs-form input[type="text"],
.wbr-register-card .hs-form input[type="email"],
.wbr-register-card .hs-form input[type="tel"],
.wbr-register-card .hs-form select,
.wbr-register-card .hs-form textarea {
  width: 100% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  outline: none !important;
  transition: border-color 0.2s, background 0.2s !important;
  appearance: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}
.wbr-register-card .hs-form input::placeholder,
.wbr-register-card .hs-form textarea::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.wbr-register-card .hs-form input[type="text"]:focus,
.wbr-register-card .hs-form input[type="email"]:focus,
.wbr-register-card .hs-form input[type="tel"]:focus,
.wbr-register-card .hs-form select:focus,
.wbr-register-card .hs-form textarea:focus {
  border-color: rgba(249,115,22,0.5) !important;
  background: rgba(249,115,22,0.06) !important;
}

/* Two-column first/last name row */
.wbr-register-card .hs-form .form-columns-2 .hs-form-field {
  width: 48% !important;
  float: left !important;
}
.wbr-register-card .hs-form .form-columns-2 .hs-form-field:first-child {
  margin-right: 4% !important;
}
.wbr-register-card .hs-form .form-columns-2::after {
  content: ''; display: table; clear: both;
}

/* Submit button */
.wbr-register-card .hs-form .hs-submit .hs-button,
.wbr-register-card .hs-form input[type="submit"] {
  width: 100% !important;
  background: #f97316 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 14px !important;
  border-radius: 100px !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  letter-spacing: -0.01em !important;
  transition: background 0.2s, transform 0.2s !important;
  box-shadow: 0 4px 20px rgba(249,115,22,0.35) !important;
}
.wbr-register-card .hs-form .hs-submit .hs-button:hover,
.wbr-register-card .hs-form input[type="submit"]:hover {
  background: #ea6c04 !important;
  transform: translateY(-1px) !important;
}

/* Error messages */
.wbr-register-card .hs-form .hs-error-msgs label {
  color: #fc8181 !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

/* Hide HubSpot branding */
.wbr-register-card .hs-form .hs_recaptcha,
.wbr-register-card .hubspot-link__container { display: none !important; }

/* Responsive: hero two-column */
@media (max-width: 1200px) {
  .wbr-hero-inner {
    grid-template-columns: 1fr 380px;
    gap: 40px;
  }
}
@media (max-width: 1024px) {
  .wbr-hero-inner {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
  .wbr-register-card { order: -1; } /* form above copy on tablet */
}
@media (max-width: 768px) {
  .wbr-hero-inner { gap: 32px; }
  .wbr-register-card { padding: 28px 20px 24px; }
  .wbr-register-card .hs-form .form-columns-2 .hs-form-field {
    width: 100% !important;
    float: none !important;
  }
  .wbr-register-card .hs-form .form-columns-2 .hs-form-field:first-child {
    margin-right: 0 !important;
  }
}

/* Accred badges: specificity fix for Hub theme image overrides */
.wbr-accred-section .wbr-accred-badges img {
  height: 76px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: inline-block;
}
/* Dual logo: remove invert filters for webp/png logos */
.wbr-dual-logo-item.phr img,
.wbr-dual-logo-item.pratesis img {
  filter: none !important;
}/* Speaker photo: full height fix */
.wbr-speaker-wrap {
  align-items: stretch !important;
}
.wbr-speaker-photo {
  display: flex;
  align-items: stretch;
}
.wbr-speaker-photo img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
/* Trust chip checkmark: unicode escape fix for encoding issues */
.wbr-trust-chip::before {
  content: '\2713' !important;
  color: #3b82f6;
  font-weight: 900;
}

/* ==========================================================
   products - new classes
   All tokens use :root custom properties from master above.
   Naming: phr-[component]__[element]--[modifier]
   ========================================================== */
:root{--phr-navy:#0A1F44;--phr-blue-900:#0D47A1;--phr-blue-700:#1565C0;--phr-blue-600:#1976D2;--phr-blue-500:#2196F3;--phr-blue-200:#90CAF9;--phr-blue-50:#E3F2FD;--phr-blue-30:#F0F7FF;--phr-white:#fff;--phr-text-dark:#0A1F44;--phr-text-mid:#3D5A80;--phr-text-light:#6B87A8;--phr-border:#D0E4F7;--phr-radius-sm:10px;--phr-radius-md:16px;--phr-radius-lg:24px;--phr-shadow-card:0 4px 20px rgba(13,71,161,.10);--phr-shadow-hover:0 12px 36px rgba(13,71,161,.18);--phr-transition:.22s ease;--phr-font:'Plus Jakarta Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--phr-font);background:var(--phr-white);color:var(--phr-text-dark);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.phr-container{max-width:1120px;margin:0 auto;padding:0 28px}
.phr-hero{background:linear-gradient(160deg,#EEF3FA 0%,#F5F8FE 55%,#EBF2FF 100%);padding:0;position:relative;overflow:hidden;min-height:620px;display:flex;align-items:stretch}
.phr-hero::before{content:'';position:absolute;top:-20%;right:-5%;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(33,150,243,.10) 0%,transparent 70%);pointer-events:none}
.phr-hero__split{display:flex;align-items:center;justify-content:center;width:100%;max-width:1120px;margin:0 auto;padding:0 28px}
.phr-hero__copy{padding:96px 0;max-width:680px;width:100%;position:relative;z-index:2}
.phr-hero__eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--phr-blue-600);background:rgba(25,118,210,.08);border:1px solid rgba(25,118,210,.20);padding:5px 14px;border-radius:100px;margin-bottom:24px;letter-spacing:.2px}
.phr-hero__title{font-size:clamp(34px,4vw,54px);font-weight:800;color:var(--phr-navy);line-height:1.1;letter-spacing:-1.5px;margin-bottom:20px}
.phr-hero__title em{font-style:normal;color:var(--phr-blue-500)}
.phr-hero__sub{font-size:17px;color:var(--phr-text-mid);line-height:1.65;max-width:none}
.phr-hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.phr-section{padding:88px 0}
.phr-section--alt{background:var(--phr-blue-30)}
.phr-section__label{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--phr-blue-600);margin-bottom:14px}
.phr-section__title{font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--phr-text-dark);letter-spacing:-.6px;line-height:1.2;margin-bottom:14px}
.phr-section__sub{font-size:16px;color:var(--phr-text-mid);line-height:1.65;max-width:580px}
.phr-section__header{margin-bottom:52px}
.phr-section__header--center{text-align:center}
.phr-section__header--center .phr-section__sub{margin:0 auto}
.phr-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.phr-module-card{background:var(--phr-white);border:1px solid var(--phr-border);border-radius:var(--phr-radius-md);padding:32px 28px 28px;position:relative;overflow:hidden;transition:transform var(--phr-transition),box-shadow var(--phr-transition),border-color var(--phr-transition)}
.phr-module-card:hover{transform:translateY(-6px);box-shadow:var(--phr-shadow-hover);border-color:var(--phr-blue-200)}
.phr-module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--phr-blue-700),var(--phr-blue-500));opacity:0;transition:opacity var(--phr-transition)}
.phr-module-card:hover::before{opacity:1}
.phr-module-card__icon{width:48px;height:48px;border-radius:12px;background:var(--phr-blue-50);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background var(--phr-transition)}
.phr-module-card:hover .phr-module-card__icon{background:var(--phr-blue-700)}
.phr-module-card:hover .phr-module-card__icon svg path,.phr-module-card:hover .phr-module-card__icon svg circle,.phr-module-card:hover .phr-module-card__icon svg rect,.phr-module-card:hover .phr-module-card__icon svg polyline,.phr-module-card:hover .phr-module-card__icon svg line{stroke:var(--phr-white)}
.phr-module-card__name{font-size:20px;font-weight:800;color:var(--phr-text-dark);letter-spacing:-.3px;margin-bottom:8px}
.phr-module-card__tagline{font-size:13px;font-weight:600;color:var(--phr-blue-600);margin-bottom:14px}
.phr-module-card__desc{font-size:14.5px;color:var(--phr-text-mid) !important;line-height:1.6}
.phr-module-card__link{display:inline-flex;align-items:center;gap:5px;margin-top:20px;font-size:13.5px;font-weight:600;color:var(--phr-blue-700);transition:gap var(--phr-transition),color var(--phr-transition)}
.phr-module-card__link:hover{gap:8px;color:var(--phr-blue-900)}
.phr-lexi-wrapper{padding:0 0 88px}
.phr-lexi{background:linear-gradient(130deg,#0D47A1 0%,#1B7E4F 50%,#E65100 100%);border-radius:var(--phr-radius-lg);padding:52px 56px;display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center;margin:0 28px;position:relative;overflow:hidden}
.phr-lexi::before{content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.phr-lexi__brand{position:relative;z-index:1;min-width:160px}
.phr-lexi__logo-img{display:block;width:140px;height:52px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.12);border:1.5px dashed rgba(255,255,255,.35)}
.phr-lexi__items{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;z-index:1}
.phr-lexi-item__name{font-size:15px;font-weight:700;color:var(--phr-white);margin-bottom:10px}
.phr-lexi-item__desc{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.6}
.phr-arch{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.phr-arch__visual{border-radius:var(--phr-radius-lg);overflow:hidden;position:relative;background:var(--phr-blue-50);border:1.5px dashed var(--phr-border);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px}
.phr-arch__visual::after{content:'';display:block;width:48px;height:48px;border-radius:12px;background:var(--phr-border);margin-bottom:6px}
.phr-arch__visual-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--phr-radius-lg);opacity:0;position:absolute;inset:0}
.phr-arch__visual-img[src]:not([src=""]){opacity:1;position:static}
.phr-arch__visual-placeholder-label{font-size:12px;font-weight:600;color:var(--phr-text-light);letter-spacing:.5px;text-transform:uppercase;margin-top:10px}
.phr-arch__points{display:flex;flex-direction:column;gap:28px;margin-top:32px}
.phr-arch-point__icon{width:42px;height:42px;border-radius:10px;background:var(--phr-blue-50);display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}
.phr-arch-point__title{font-size:16px;font-weight:700;color:var(--phr-text-dark);margin-bottom:6px}
.phr-arch-point__desc{font-size:14.5px;color:var(--phr-text-mid);line-height:1.65}
.phr-support{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.phr-support-card{background:var(--phr-white);border:1px solid var(--phr-border);border-radius:var(--phr-radius-md);padding:32px;transition:box-shadow var(--phr-transition)}
.phr-support-card:hover{box-shadow:var(--phr-shadow-card)}
.phr-support-card__icon{width:44px;height:44px;border-radius:10px;background:var(--phr-blue-50);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.phr-support-card__title{font-size:17px;font-weight:700;color:var(--phr-text-dark);margin-bottom:10px}
.phr-support-card__desc{font-size:14.5px;color:var(--phr-text-mid);line-height:1.65}
.phr-getstarted-wrapper{padding-bottom:88px}
.phr-getstarted{background:linear-gradient(135deg,var(--phr-navy) 0%,var(--phr-blue-900) 100%);border-radius:var(--phr-radius-lg);padding:64px 56px;margin:0 28px;position:relative;overflow:hidden}
.phr-getstarted::before{content:'';position:absolute;bottom:-30%;left:-5%;width:500px;height:500px;border-radius:50%;background:rgba(33,150,243,.1);pointer-events:none}
.phr-getstarted__title{font-size:clamp(22px,2.8vw,30px);font-weight:800;color:var(--phr-white);letter-spacing:-.5px;margin-bottom:8px;position:relative;z-index:1}
.phr-getstarted__sub{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:44px;position:relative;z-index:1}
.phr-getstarted__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1}
.phr-gs-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--phr-radius-md);padding:28px;transition:background var(--phr-transition)}
.phr-gs-card:hover{background:rgba(255,255,255,.12)}
.phr-gs-card__num{font-size:13px;font-weight:700;color:var(--phr-blue-200);letter-spacing:.5px;margin-bottom:12px}
.phr-gs-card__title{font-size:16px;font-weight:700;color:var(--phr-white);margin-bottom:10px}
.phr-gs-card__desc{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.6}
.phr-getstarted__cta{margin-top:36px;position:relative;z-index:1}
.phr-btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--phr-blue-500);color:var(--phr-white);font-size:14.5px;font-weight:700;padding:14px 28px;border-radius:10px;transition:background var(--phr-transition),transform var(--phr-transition)}
.phr-btn-primary:hover{background:#1E88E5;transform:translateY(-1px)}
.phr-btn-primary--dark{background:var(--phr-navy)}
.phr-btn-primary--dark:hover{background:var(--phr-blue-900)}
.phr-btn-primary--pill{border-radius:100px;padding:16px 36px;font-size:15.5px}
.phr-cta-banner__eyebrow{font-size:17px;font-weight:700;color:#fff;margin-bottom:10px}
.phr-cta-banner__desc{font-size:16px;color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 32px;line-height:1.65}
.phr-faq{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.phr-faq-item{background:var(--phr-white);border:1px solid var(--phr-border);border-radius:var(--phr-radius-sm);overflow:hidden}
.phr-faq-item__trigger{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--phr-font);font-size:15.5px;font-weight:600;color:var(--phr-text-dark);transition:color var(--phr-transition)}
.phr-faq-item__trigger:hover{color:var(--phr-blue-700)}
.phr-faq-item__icon{width:26px;height:26px;border-radius:50%;background:var(--phr-blue-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--phr-transition),transform var(--phr-transition)}
.phr-faq-item--open .phr-faq-item__icon{background:var(--phr-blue-700);transform:rotate(45deg)}
.phr-faq-item--open .phr-faq-item__icon svg path{stroke:var(--phr-white)}
.phr-faq-item__body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.phr-faq-item__body-inner{padding:0 24px 22px;font-size:14.5px;color:var(--phr-text-mid);line-height:1.7}
@media(max-width:960px){.phr-hero{min-height:auto}.phr-hero__split{grid-template-columns:1fr;padding:0 20px}.phr-hero__copy{padding:72px 0 56px;max-width:100%}.phr-hero__title{font-size:clamp(28px,5vw,40px)}.phr-modules{grid-template-columns:repeat(2,1fr);gap:18px}.phr-arch{grid-template-columns:1fr;gap:40px}.phr-arch__visual{display:none}.phr-lexi{grid-template-columns:1fr;gap:32px;margin:0 20px;padding:40px 36px}.phr-lexi__items{grid-template-columns:1fr;gap:0}.phr-lexi__brand{text-align:center}.phr-lexi__logo-img{margin:0 auto}.phr-lexi-item{padding:18px 0}.phr-lexi-item:first-child{padding-top:0}.phr-lexi-item:last-child{padding-bottom:0}.phr-lexi-item+.phr-lexi-item{border-top:1px solid rgba(255,255,255,.15)}.phr-support{grid-template-columns:repeat(2,1fr)}.phr-getstarted{margin:0 20px;padding:44px 32px}.phr-getstarted__cards{grid-template-columns:repeat(2,1fr);gap:16px}.phr-section{padding:64px 0}.phr-faq{max-width:100%}}
@media(max-width:640px){.phr-container{padding:0 16px}.phr-hero__split{padding:0 16px}.phr-hero__copy{padding:52px 0 44px}.phr-hero__title{font-size:30px;letter-spacing:-.8px}.phr-hero__sub{font-size:15px}.phr-hero__eyebrow{font-size:12px}.phr-modules{grid-template-columns:1fr;gap:14px}.phr-module-card{padding:24px 20px}.phr-section{padding:52px 0}.phr-section__title{font-size:24px}.phr-section__sub{font-size:15px}.phr-section__header{margin-bottom:36px}.phr-arch__points{gap:20px}.phr-arch-point__title{font-size:15px}.phr-arch-point__desc{font-size:13.5px}.phr-lexi{margin:0 12px;padding:32px 20px;gap:24px}.phr-lexi__items{grid-template-columns:1fr;gap:0}.phr-lexi__logo-img{width:120px;height:44px}.phr-lexi-item__name{font-size:14px}.phr-lexi-item__desc{font-size:13px}.phr-lexi-item{padding:18px 0}.phr-lexi-item:first-child{padding-top:0}.phr-lexi-item:last-child{padding-bottom:0}.phr-lexi-item+.phr-lexi-item{border-top:1px solid rgba(255,255,255,.15)}.phr-support{grid-template-columns:1fr;gap:14px}.phr-support-card{padding:24px 20px}.phr-support-card__title{font-size:15px}.phr-support-card__desc{font-size:13.5px}.phr-getstarted{margin:0 12px;padding:32px 20px}.phr-getstarted__title{font-size:22px}.phr-getstarted__sub{font-size:14px}.phr-getstarted__cards{grid-template-columns:1fr;gap:12px}.phr-gs-card{padding:20px}.phr-btn-primary{font-size:14px;padding:12px 22px}.phr-faq-item__trigger{font-size:14.5px;padding:16px 18px}.phr-faq-item__body-inner{font-size:13.5px;padding:0 18px 18px}}
@media(max-width:400px){.phr-hero__title{font-size:26px}.phr-lexi{margin:0 8px;padding:28px 16px}.phr-getstarted{margin:0 8px;padding:28px 16px}}
 
/* arch visual remove placeholder bg, border, and grey square once real image is present */
.phr-arch__visual{background:transparent;border:none}
.phr-arch__visual::after{display:none}

/* PHILIPPINES HRIS PAGE Appended styles All rules below are new additions. No existing rules modified. */

/* Page wrapper */
.page-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1200px) { .page-wrap { padding: 0 32px; } }
@media (max-width: 768px)  { .page-wrap { padding: 0 20px; } }

/* Trust badges row */
.trust-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.trust-badge-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-badge-item svg { flex-shrink: 0; }

/* Hero form card (right column) */
.hero-form-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(13,27,62,0.12);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.hero-form-header {
  background: var(--navy);
  padding: 22px 28px 18px;
  text-align: center;
}
.hero-form-header h2, .hero-form-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.hero-form-body {
  padding: 20px 28px 28px;
}
.hero-form-body .hs-form-frame { display: block; width: 100%; }

/* Mobile demo form section (desktop hidden) */
.mobile-form-section {
  display: none;
  padding: 0 0 40px;
  background: linear-gradient(160deg, #fff 0%, #f0f6ff 100%);
}
.mobile-form-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(13,27,62,0.10);
  overflow: hidden;
  border: 1px solid var(--border);
}
@media (max-width: 768px) {
  .mobile-form-section { display: block; }
  .hero-right { display: none; }
}

/* Hero layout for PH page (split with form) */
.hero-ph {
  min-height: 100vh;
  padding: 80px 0 60px;
  background: linear-gradient(160deg, #fff 0%, #f0f6ff 100%);
  display: flex;
  align-items: center;
}
.hero-ph .page-wrap {
  display: flex;
  align-items: center;
  gap: 60px;
}
@media (max-width: 768px) {
  .hero-ph { flex-direction: column; padding: 56px 0 0; min-height: auto; }
  .hero-ph .page-wrap { flex-direction: column; gap: 0; }
}

/* Warning Signs section */
.warning-section {
  padding: 50px 0;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.warning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.warn-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.warn-card:hover { box-shadow: 0 8px 32px rgba(13,27,62,0.08); transform: translateY(-2px); }
.warn-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 36px;
  background: #ef4444;
  border-radius: 0 2px 2px 0;
}
.warn-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #94a3b8;
  display: block;
  margin-bottom: 12px;
}
.warn-icon { margin-bottom: 14px; }
.warn-card h3 { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.warn-card p  { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.warn-card.cta-card {
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
  border: none;
}
.warn-card.cta-card::before { display: none; }
.warn-card.cta-card h3 { color: #fff; font-size: 20px; margin-bottom: 12px; }
.warn-card.cta-card p  { color: rgba(255,255,255,0.75); margin-bottom: 20px; }
.warn-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}
.warn-cta-link:hover { background: rgba(255,255,255,0.25); }
/* Accordion expand */
.warn-card .warn-body { display: none; margin-top: 10px; }
.warn-card .warn-body p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.warn-card.cta-card .warn-body { display: block; }
.warn-card.cta-card .warn-body p { color: rgba(255,255,255,0.75); }
.warn-card.open .warn-body { display: block; }
.warn-card:not(.cta-card) { cursor: pointer; }
.warn-card:not(.cta-card) h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.warn-expand-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  color: var(--text-muted);
}
.warn-card.open .warn-expand-icon {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: rotate(45deg);
}
.warn-card.open { box-shadow: 0 8px 32px rgba(13,27,62,0.1); }

/* Capability Tabs (module showcase) */
.capability-section { padding: 100px 0; background: var(--bg-light); }
.cap-tabs-header { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.cap-tab {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
}
.cap-tab.active, .cap-tab:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.cap-panel { display: none; width: 100%; box-sizing: border-box; }
.cap-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.cap-panel-left h3 { font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 14px; letter-spacing: -0.5px; }
.cap-panel-left p  { font-size: 16px; color: var(--text-body); line-height: 1.65; margin-bottom: 24px; }
.cap-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cap-feature-tag {
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
}
.cap-panel-right { display: flex; flex-direction: column; align-items: stretch; }
.cap-module-img {
  width: 100%; height: auto;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(13,27,62,0.12);
  border: 1px solid var(--border);
  display: block;
}

/* Lexi AI tab panel (new tabbed UI) */
.lexi-ph-section { padding: 100px 0; background: radial-gradient(ellipse at top right, #1e3a8a 0%, #0d1b3e 55%); }
.lexi-ph-section .section-center { margin-bottom: 56px; }
.lexi-meet-line {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lexi-inline-logo {
  height: 52px;
  width: auto;
  mix-blend-mode: screen;
  vertical-align: middle;
}
.lexi-tabs-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  overflow: hidden;
  min-height: 400px;
}
.lexi-tab-nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.lexi-tab-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  text-align: left;
  transition: background .2s;
  font-family: inherit;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.lexi-tab-btn:last-child { border-bottom: none; flex: 1; align-items: flex-start; padding-top: 28px; }
.lexi-tab-btn:hover { background: rgba(255,255,255,0.04); }
.lexi-tab-btn.active { background: rgba(37,99,235,0.2); }
.lexi-tab-btn.active::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 3px;
  background: #60a5fa;
  border-radius: 2px 0 0 2px;
}
.ltb-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(96,165,250,0.12);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ltb-icon--green { background: rgba(52,211,153,0.12); color: #34d399; }
.lexi-tab-btn.active .ltb-icon { background: rgba(96,165,250,0.25); }
.ltb-text { flex: 1; min-width: 0; }
.ltb-label { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.ltb-sub { display: block; font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.4; }
.lexi-tab-btn.active .ltb-sub { color: rgba(255,255,255,0.6); }
.ltb-arrow { color: rgba(255,255,255,0.15); flex-shrink: 0; transition: color .2s; }
.lexi-tab-btn.active .ltb-arrow { color: #60a5fa; }
.lexi-tab-content { padding: 44px 48px; }
.lexi-tab-panel { display: none; }
.lexi-tab-panel.active { display: block; }
.ltp-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #60a5fa;
  background: rgba(96,165,250,0.1);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.ltp-tag--green { color: #34d399; background: rgba(52,211,153,0.1); }
.lexi-tab-panel h3 { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 14px; }
.lexi-tab-panel p  { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.65; margin-bottom: 28px; }
.ltp-query {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid #60a5fa;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ltp-query-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.25); }
.ltp-query-text  { font-size: 14px; color: rgba(255,255,255,0.6); font-style: italic; line-height: 1.5; }
.ltp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ltp-chip {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 12px;
  border-radius: 20px;
}
@media (max-width: 980px) {
  .lexi-tabs-wrap { grid-template-columns: 1fr; }
  .lexi-tab-nav { flex-direction: row; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); overflow-x: auto; }
  .lexi-tab-btn { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 160px; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.06); }
  .lexi-tab-btn:last-child { flex: none; align-items: flex-start; }
  .lexi-tab-btn.active::after { right: 0; left: 0; top: auto; bottom: -1px; width: auto; height: 3px; }
  .lexi-tab-content { padding: 28px 24px; }
  .lexi-tab-panel h3 { font-size: 20px; }
}
@media (max-width: 768px) {
  .lexi-ph-section { padding: 60px 0; }
}

/* Stat callout (case study dark block) */
.stat-callout-section {
  padding: 100px 0;
  background: radial-gradient(ellipse at top left, #1e3a8a 0%, #0d1b3e 60%);
}
.stat-callout-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
.stat-label-top {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.stat-value {
  font-size: 110px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -4px;
  line-height: 1;
}
.stat-value .plus { color: #4ade80; }
.stat-sub  { font-size: 18px; color: rgba(255,255,255,0.6); margin-top: 12px; }
.stat-from { font-size: 15px; color: rgba(255,255,255,0.5); margin-top: 8px; margin-bottom: 24px; }
.stat-pills { display: flex; flex-direction: column; gap: 8px; }
.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.stat-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.stat-copy h3 { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: -0.5px; }
.stat-copy p  { font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.65; margin-bottom: 20px; }
.stat-before-after {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.stat-ba-item { flex: 1; min-width: 0; }
.stat-ba-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-ba-label.after { color: #4ade80; }
.stat-ba-text { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.stat-ba-arrow { font-size: 20px; color: #4ade80; padding-top: 18px; flex-shrink: 0; }
.stat-quote {
  border-left: 3px solid rgba(96,165,250,0.4);
  padding-left: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}
.stat-case-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4ade80;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: gap .2s;
}
.stat-case-link:hover { gap: 10px; }
@media (max-width: 1024px) {
  .stat-callout-wrap { grid-template-columns: 1fr; gap: 40px; }
  .stat-value { font-size: 88px; }
}
@media (max-width: 768px) {
  .stat-callout-section { padding: 60px 0; }
  .stat-value { font-size: 72px; }
  .stat-before-after { flex-direction: column; gap: 8px; }
  .stat-ba-arrow { display: none; }
}

/* Domain section override for PH page (light background) */
.domain-section--light {
  background: #fff;
  padding: 50px 0;
}
.domain-section--light .domain-inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.domain-section--light .domain-left h2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
  letter-spacing: -1px;
}
.domain-section--light .domain-left > p { font-size: 16px; color: var(--text-body); line-height: 1.65; }
.domain-section--light .domain-num { font-size: 80px; font-weight: 900; color: var(--navy); letter-spacing: -3px; line-height: 1; }
.domain-section--light .domain-badge p:first-child { font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; }
.domain-section--light .domain-badge p:last-child  { font-size: 12px; color: var(--text-muted); }
.domain-section--light .feature-icon-wrap { background: #eff6ff; }
.domain-section--light .feature-item h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.domain-section--light .feature-item p  { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 1024px) {
  .domain-section--light .domain-inner { flex-direction: column; gap: 40px; }
}
@media (max-width: 768px) {
  .domain-section--light { padding: 60px 0; }
  .domain-section--light .domain-left h2 { font-size: 28px; }
  .domain-section--light .domain-num { font-size: 56px; }
}

/* FAQ section */
.faq-section { padding: 100px 0; background: var(--bg-light); }
.faq-wrap { max-width: 680px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: inherit;
}
.faq-icon { flex-shrink: 0; transition: transform .25s; color: var(--blue); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.65;
  padding-bottom: 20px;
  display: none;
}
.faq-item.open .faq-answer { display: block; }
@media (max-width: 768px) { .faq-section { padding: 60px 0; } }

/* HubSpot Modal */
.hs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,62,0.72);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  transition: opacity .25s ease, visibility .25s ease;
}
.hs-modal-overlay.active { opacity: 1; visibility: visible; }
.hs-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.96) translateY(12px);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hs-modal-overlay.active .hs-modal { transform: scale(1) translateY(0); }
.hs-modal-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.hs-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .2s;
}
.hs-modal-close:hover { background: var(--bg-card); }
.hs-modal-header h3 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.hs-modal-header p  { font-size: 15px; color: var(--text-muted); }
.hs-modal-body { padding: 28px 32px 32px; }

/* Responsive patches (warning, cap, misc) */
@media (max-width: 980px) {
  .warning-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-panel.active { grid-template-columns: 1fr; }
  .cap-panel-right { display: none; }
}
@media (max-width: 768px) {
  .warning-section { padding: 60px 0; }
  .warning-grid { grid-template-columns: 1fr; gap: 12px; }
  .capability-section { padding: 60px 0; }
}

/* Lexi PH section heading/body text */
.lexi-ph-heading { color: #fff !important; }
.lexi-ph-body    { color: rgba(255,255,255,0.65); }
.domain-badge p{color: #fff !important;}

/* btn-primary reset for <button> elements (PH page) The shared .btn-primary was authored for <a> tags (display:flex is fine there). On <button> elements the browser default styling bleeds through. This scoped rule resets only the properties that differ without touching the shared rule above. */
button.btn-primary {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  display: inline-flex;
}.page-wrap

/* DEMOS PAGE phrdemos.css additions All classes below are new and scoped to the Interactive Demos page. No existing rules were modified. Last updated: May 2026 */

/* DEMO HERO */
.demo-hero {
  background: linear-gradient(160deg, #fff 0%, #f0f6ff 100%);
  padding: 80px 48px 72px;
  overflow: hidden;
  position: relative;
}
.demo-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 64px;
}
.demo-hero-left { flex: 0 0 480px; z-index: 2; }
.demo-hero-h1 {
  font-size: 54px; font-weight: 700; line-height: 1.08;
  letter-spacing: -2px; color: #0d1b3e; margin-bottom: 24px;
}
.demo-hero-h1 .accent { color: var(--blue); }
.demo-hero-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 12px;
}
.demo-meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-body); font-weight: 500;
}
.demo-meta-dot {
  width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1;
}

/* Hero right */
.demo-hero-right {
  flex: 1; position: relative; display: flex;
  justify-content: flex-end; align-items: center;
  min-height: 460px;
}

/* Floating stat cards */
.demo-float-card {
  position: absolute; z-index: 10;
  background: #fff; border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px rgba(13,27,62,0.10);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  min-width: 168px;
  animation: floatCard 4s ease-in-out infinite;
}
.demo-float-1 { top: 10px; left: -20px; animation-delay: 0s; }
.demo-float-2 { bottom: 60px; left: -10px; animation-delay: 1.4s; }
.demo-float-3 { top: 50%; right: -16px; transform: translateY(-50%); animation-delay: 0.7s; }
@keyframes floatCard {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.demo-float-3 { animation-name: floatCard3; }
@keyframes floatCard3 {
  0%,100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 6px)); }
}
.demo-float-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.demo-float-num { font-size: 17px; font-weight: 800; color: #0d1b3e; line-height: 1.1; }
.demo-float-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Hero browser mockup */
.demo-hero-mockup {
  width: 100%; max-width: 500px;
  background: #fff; border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 72px rgba(13,27,62,0.14);
  overflow: hidden;
  position: relative; z-index: 5;
}
.demo-mockup-chrome {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.dmc-dots { display: flex; gap: 5px; }
.dmc-dots span {
  width: 10px; height: 10px; border-radius: 50%;
}
.dmc-url {
  flex: 1; font-size: 11px; color: #6b7280;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 4px 10px;
  text-align: center;
}
.dmc-secure {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.demo-mockup-body { display: flex; height: 320px; }

/* Miniature sidebar in hero mockup */
.dmb-sidebar {
  width: 52px; background: #1e293b;
  display: flex; flex-direction: column;
  align-items: center; padding: 12px 0; gap: 6px;
}
.dmb-logo-strip {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  margin-bottom: 10px;
}
.dmb-nav-item {
  width: 32px; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.15);
}
.dmb-active-nav { background: rgba(37,99,235,0.5) !important; }

/* Miniature main area in hero mockup */
.dmb-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.dmb-topbar-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #f1f5f9;
}
.dmb-title-strip { width: 90px; height: 9px; background: #e2e8f0; border-radius: 4px; }
.dmb-topbar-actions { display: flex; gap: 6px; align-items: center; }
.dmb-search-strip { width: 80px; height: 22px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.dmb-avatar-strip { width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; }

.dmb-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; padding: 10px 12px;
}
.dmb-kpi {
  background: #f8fafc; border-radius: 8px;
  border: 1px solid; padding: 8px 10px;
}
.dmb-kpi-n { font-size: 13px; font-weight: 800; line-height: 1.1; }
.dmb-kpi-l { font-size: 9px; color: #9ca3af; margin-top: 2px; }

.dmb-charts-area {
  flex: 1; display: flex; gap: 8px;
  padding: 0 12px 12px; overflow: hidden;
}
.dmb-chart-block { flex: 3; background: #f8fafc; border-radius: 8px; padding: 8px; }
.dmb-activity-block { flex: 2; background: #f8fafc; border-radius: 8px; padding: 8px; }
.dmb-chart-label-strip { width: 60px; height: 7px; background: #e2e8f0; border-radius: 3px; margin-bottom: 8px; }
.dmb-bars { display: flex; gap: 4px; height: 72px; align-items: flex-end; }
.dmb-bar-col { flex: 1; position: relative; background: #e2e8f0; border-radius: 3px 3px 0 0; }
.dmb-bar-fill-blue { position: absolute; bottom: 0; left: 0; right: 0; background: #2563eb; border-radius: 3px 3px 0 0; height: 100%; opacity: 0.85; }
.dmb-activity-list { display: flex; flex-direction: column; gap: 8px; }
.dmb-activity-row { display: flex; align-items: center; gap: 6px; }
.dmb-activity-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dmb-activity-line { height: 6px; background: #e2e8f0; border-radius: 3px; width: 100%; }

/* DEMO CHROME BAR (inside preview panel) */
.demo-chrome-bar {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  border-radius: 20px 20px 0 0;
}
.dcb-dots { display: flex; gap: 5px; }
.dcb-dots span {
  display: block; width: 10px; height: 10px; border-radius: 50%;
}
.dcb-dots span:nth-child(1) { background: #ef4444; }
.dcb-dots span:nth-child(2) { background: #f59e0b; }
.dcb-dots span:nth-child(3) { background: #22c55e; }
.dcb-url {
  flex: 1; font-size: 11px; color: #6b7280;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 4px 10px; text-align: center; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.dcb-secure {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #16a34a; font-weight: 600; flex-shrink: 0;
}

/* DEMO APP FRAME (daf) */
.daf {
  display: flex;
  height: 430px;
  overflow: hidden;
}
.daf-sidebar {
  width: 148px; flex-shrink: 0;
  background: #1e293b;
  display: flex; flex-direction: column;
  padding: 14px 0; gap: 2px;
  overflow: hidden;
}
.daf-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
}
.daf-logo-mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  flex-shrink: 0;
}
.daf-logo span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); }
.daf-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 11.5px; color: rgba(255,255,255,0.55);
  cursor: pointer; transition: all .15s;
  text-decoration: none; border-radius: 0;
}
.daf-item:hover:not([style]) { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.daf-active { background: rgba(37,99,235,0.25) !important; color: #fff !important; }

/* Main area */
.daf-main {
  flex: 1; display: flex; flex-direction: column;
  background: #fff; overflow: hidden;
}
.daf-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0; gap: 12px;
}
.daf-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.daf-page-title { font-size: 14px; font-weight: 700; color: #0d1b3e; }
.daf-breadcrumb { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.daf-search {
  display: flex; align-items: center; gap: 6px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 12px; font-size: 12px; color: #9ca3af;
  min-width: 140px;
}
.daf-btn-blue {
  background: var(--blue); color: #fff;
  font-size: 11.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.daf-btn-green {
  background: #16a34a; color: #fff;
  font-size: 11.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* Filter chips */
.daf-filters {
  display: flex; gap: 8px; padding: 12px 20px 8px;
  border-bottom: 1px solid #f8fafc; flex-shrink: 0;
}
.daf-chip {
  padding: 5px 12px; border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.daf-chip-active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}

/* CORE HR: Employee grid */
.daf-emp-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px; padding: 12px 20px; overflow-y: auto; flex: 1;
}
.daf-emp-card {
  border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; display: flex; align-items: center; gap: 10px;
  background: #fff; transition: all .2s; cursor: default;
}
.daf-emp-card:hover { box-shadow: 0 4px 16px rgba(13,27,62,0.08); border-color: #bfdbfe; }
.daf-avatar {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.daf-emp-info { flex: 1; min-width: 0; }
.daf-emp-name { font-size: 12px; font-weight: 700; color: #0d1b3e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daf-emp-role { font-size: 10.5px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daf-emp-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }

/* PAYROLL */
.payroll-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; padding: 12px 20px; flex-shrink: 0;
}
.payroll-kpi {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 10px 14px; text-align: center;
}
.pkpi-emoji { font-size: 18px; margin-bottom: 4px; }
.pkpi-val { font-size: 13px; font-weight: 800; color: #0d1b3e; line-height: 1.2; }
.pkpi-lbl { font-size: 10px; color: #6b7280; margin-top: 3px; }
.payroll-table { flex: 1; overflow-y: auto; padding: 0 20px 14px; }
.payroll-thead {
  display: grid; grid-template-columns: 1.6fr .7fr .9fr .9fr .8fr .9fr .8fr;
  padding: 8px 12px; background: #f8fafc; border: 1px solid #f1f5f9;
  border-radius: 10px 10px 0 0;
  font-size: 10.5px; font-weight: 700; color: #9ca3af;
  letter-spacing: .4px; align-items: center; gap: 6px;
}
.payroll-trow {
  display: grid; grid-template-columns: 1.6fr .7fr .9fr .9fr .8fr .9fr .8fr;
  padding: 9px 12px; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-body);
  border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f8fafc; transition: background .15s;
}
.payroll-trow:last-child { border-radius: 0 0 10px 10px; border-bottom: 1px solid #f1f5f9; }
.payroll-trow:hover { background: #fafbfc; }
.payroll-emp { display: flex; align-items: center; gap: 7px; font-weight: 500; min-width: 0; overflow: hidden; }

/* LEAVE */
.leave-balances {
  display: flex; gap: 8px; padding: 12px 20px; flex-shrink: 0;
}
.leave-bal-card {
  flex: 1; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 10px 14px;
}
.lbc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.lbc-type { font-size: 11.5px; font-weight: 700; color: #0d1b3e; }
.lbc-counts { font-size: 10.5px; color: #6b7280; }
.lbc-track { height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.lbc-fill { height: 100%; border-radius: 3px; }
.leave-section-label {
  padding: 10px 20px 8px;
  font-size: 12.5px; font-weight: 700; color: #0d1b3e;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.leave-count-badge {
  background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
}
.leave-requests { flex: 1; overflow-y: auto; padding: 0 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.leave-req-row {
  display: flex; align-items: center; gap: 12px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 10px 14px;
}
.leave-req-info { flex: 1; }
.leave-req-name { font-size: 12.5px; font-weight: 700; color: #0d1b3e; }
.leave-req-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.leave-req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.leave-action-btn {
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: opacity .15s;
}
.leave-action-btn:hover { opacity: 0.85; }
.leave-approve { background: #16a34a; color: #fff; }
.leave-decline { background: #fee2e2; color: #ef4444; }

/* RECRUITMENT: Kanban */
.kanban-board {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; padding: 10px 16px; flex: 1; overflow-y: auto;
}
.kanban-col { display: flex; flex-direction: column; gap: 7px; }
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px; margin-bottom: 2px;
}
.kch-label { font-size: 11px; font-weight: 700; color: #6b7280; }
.kch-count {
  font-size: 10px; font-weight: 700;
  background: #f1f5f9; color: #6b7280;
  padding: 1px 7px; border-radius: 20px;
}
.kanban-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 9px; padding: 10px 12px;
  cursor: default; transition: all .2s;
}
.kanban-card:hover { box-shadow: 0 4px 12px rgba(13,27,62,0.08); }
.kc-new { border-color: #bfdbfe; }
.kc-highlight { border-color: #c4b5fd; background: #faf5ff; }
.kc-name { font-size: 11.5px; font-weight: 700; color: #0d1b3e; }
.kc-meta { font-size: 10.5px; color: #6b7280; margin-top: 3px; }
.kc-score {
  margin-top: 5px; font-size: 10.5px; font-weight: 700;
  color: #7c3aed; background: #ede9fe;
  display: inline-block; padding: 2px 7px; border-radius: 6px;
}

/* ANALYTICS */
.analytics-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; padding: 12px 20px; flex-shrink: 0;
}
.analytics-kpi {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 10px 14px;
}
.akpi-label { font-size: 10.5px; color: #6b7280; margin-bottom: 4px; }
.akpi-val { font-size: 20px; font-weight: 800; line-height: 1.1; }
.akpi-trend { font-size: 10.5px; font-weight: 600; margin-top: 3px; }
.analytics-charts {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 0 20px 14px; overflow: hidden;
}
.analytics-chart-card {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 14px; overflow: hidden;
}

/* Hire vs Exit bar chart */
.analytics-bar-chart {
  display: flex; gap: 6px; height: 96px; align-items: flex-end; margin-bottom: 8px;
}
.abc-group {
  display: flex; gap: 2px; align-items: flex-end; flex: 1;
  flex-direction: column; position: relative; padding-bottom: 16px;
}
.abc-hire {
  width: 100%; background: #2563eb; border-radius: 3px 3px 0 0;
  flex-shrink: 0;
}
.abc-exit {
  width: 100%; background: #fca5a5; border-radius: 3px 3px 0 0;
  flex-shrink: 0;
}
.abc-lbl {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: #9ca3af;
}
.abc-legend {
  display: flex; gap: 12px; font-size: 10px; color: #6b7280;
}
.abc-legend span { display: flex; align-items: center; gap: 4px; }
.abc-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* Department breakdown */
.dept-breakdown { display: flex; flex-direction: column; gap: 8px; }
.dept-row {
  display: grid; grid-template-columns: 72px 1fr 32px;
  align-items: center; gap: 8px; font-size: 11px; color: #374151;
}
.dept-bar-wrap { background: #e2e8f0; border-radius: 3px; height: 7px; overflow: hidden; }
.dept-bar { height: 100%; border-radius: 3px; }

/* LEXI AI */
.lexi-main { background: #fff; }
.lexi-chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.lexi-chat-av {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.lexi-online { font-size: 11px; color: #16a34a; font-weight: 600; margin-top: 2px; }
.lexi-chat-body {
  flex: 1; overflow-y: auto; padding: 14px 20px;
  display: flex; flex-direction: column; gap: 10px;
  background: #f8fafc;
}
.lexi-msg {
  max-width: 80%; padding: 10px 14px; border-radius: 12px;
  font-size: 12px; line-height: 1.6;
}
.lexi-bot {
  background: #fff; border: 1px solid #e2e8f0;
  color: var(--text-body); align-self: flex-start;
  border-radius: 4px 12px 12px 12px;
}
.lexi-user {
  background: var(--blue); color: #fff;
  align-self: flex-end;
  border-radius: 12px 4px 12px 12px;
}
.lexi-table {
  width: 100%; border-collapse: collapse;
  margin: 8px 0 4px; font-size: 11.5px;
}
.lexi-table tr { border-bottom: 1px solid #f1f5f9; }
.lexi-table tr:last-child { border: none; }
.lexi-table td { padding: 5px 8px; }
.lexi-table td:first-child { color: #374151; font-weight: 500; }
.lexi-chat-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid #e2e8f0;
  background: #fff; flex-shrink: 0;
}
.lexi-input-field {
  flex: 1; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 9px; padding: 8px 14px;
  font-size: 12px; color: #9ca3af;
}
.lexi-send {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

/* DEMO FEATURE BADGES */
.demo-feature-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 20px; background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 20px 20px;
}
.demo-fbadge {
  font-size: 12px; font-weight: 600; color: #374151;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 100px; padding: 5px 14px;
}
.demo-fbadge-cta {
  margin-left: auto; background: transparent; border: none; padding: 5px 0;
}
.demo-fbadge-cta a {
  font-size: 12.5px; font-weight: 700; color: var(--blue);
  text-decoration: none; display: flex; align-items: center; gap: 4px;
}
.demo-fbadge-cta a:hover { text-decoration: underline; }

/* HOW IT WORKS */
.how-section {
  padding: 100px 48px; background: #fff;
  border-top: 1px solid #e2e8f0;
}
.how-steps-grid {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0; max-width: 900px; margin: 64px auto 0;
}
.how-step {
  flex: 1; text-align: center; padding: 0 32px;
}
.how-connector {
  flex-shrink: 0; padding-top: 52px; opacity: 0.5;
}
.how-step-number {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--blue); margin-bottom: 16px;
}
.how-step-icon-wrap {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(37,99,235,0.25);
}
.how-step h3 {
  font-size: 18px; font-weight: 700; color: #0d1b3e;
  margin-bottom: 12px; letter-spacing: -0.3px;
}
.how-step p {
  font-size: 14px; color: var(--text-body); line-height: 1.7;
}

/* RESPONSIVE: DEMOS PAGE */
@media (max-width: 1200px) {
  .demo-hero-inner { gap: 40px; }
  .demo-hero-left { flex: 0 0 400px; }
  .demo-hero-h1 { font-size: 44px; }
}
@media (max-width: 1024px) {
  .demo-hero { padding: 64px 32px 56px; }
  .demo-hero-inner { flex-direction: column; gap: 40px; }
  .demo-hero-left { flex: none; max-width: 100%; }
  .demo-hero-right { width: 100%; min-height: auto; justify-content: center; }
  .demo-float-1 { top: -10px; left: 0; }
  .demo-float-2 { bottom: 10px; left: 0; }
  .demo-float-3 { top: auto; bottom: -10px; right: 0; transform: none; }
  @keyframes floatCard3 {
    0%,100% { transform: none; }
    50%      { transform: translateY(-6px); }
  }
  .demo-hero-mockup { max-width: 600px; }

  .daf { height: 380px; }
  .daf-sidebar { width: 120px; }

  .payroll-thead,
  .payroll-trow { grid-template-columns: 1.6fr .7fr .9fr .8fr .9fr .8fr; }
  .payroll-thead span:nth-child(4),
  .payroll-trow span:nth-child(4) { display: none; }

  .kanban-board { grid-template-columns: repeat(2,1fr); }
  .analytics-kpi-row { grid-template-columns: repeat(2,1fr); }
  .analytics-charts { grid-template-columns: 1fr; overflow-y: auto; }

  .how-section { padding: 72px 32px; }
  .how-steps-grid { flex-direction: column; align-items: center; gap: 32px; }
  .how-connector { padding-top: 0; transform: rotate(90deg); }
  .how-step { padding: 0 16px; max-width: 480px; }
}
@media (max-width: 768px) {
  .demo-hero { padding: 48px 20px 40px; }
  .demo-hero-h1 { font-size: 32px; letter-spacing: -1px; }
  .demo-hero-right { display: none; } /* hide mockup on small screens */

  .daf { height: 420px; }
  .daf-sidebar { width: 100%; height: 42px; flex-direction: row; padding: 0; gap: 0; overflow-x: auto; }
  .daf-logo { display: none; }
  .daf-item { padding: 0 12px; height: 42px; white-space: nowrap; font-size: 10.5px; flex-shrink: 0; }
  .daf-main { overflow-y: auto; }

  .daf-emp-grid { grid-template-columns: 1fr 1fr; }
  .payroll-kpi-row { grid-template-columns: 1fr 1fr; }
  .payroll-thead,
  .payroll-trow { grid-template-columns: 1.4fr .7fr .9fr .8fr; font-size: 10px; padding: 7px 10px; }
  .payroll-thead span:nth-child(4),.payroll-trow span:nth-child(4),
  .payroll-thead span:nth-child(5),.payroll-trow span:nth-child(5) { display: none; }

  .leave-balances { flex-direction: column; }
  .kanban-board { grid-template-columns: 1fr 1fr; }
  .analytics-kpi-row { grid-template-columns: 1fr 1fr; }
  .dmb-kpi-row { grid-template-columns: repeat(2,1fr); }

  .demo-feature-badges { gap: 6px; }
  .demo-fbadge { font-size: 11px; padding: 4px 11px; }
  .demo-fbadge-cta { margin-left: 0; }

  .how-section { padding: 56px 20px; }
  .payroll-emp span { display: none; }
}

/* DEMOS PAGE net-new classes only. Everything else (nav, hero, badges, buttons, stats, CTA, footer) comes straight from phrhome.css. */

/* Hero: left-aligned two-column with featured demo */
.dg-hero{
  min-height:auto;
  flex-direction:row;
  align-items:center;
  gap:56px;
  padding:72px 48px 64px;
}
.dg-hero .hero-left{
  flex:0 0 460px;max-width:460px;
  text-align:left;z-index:2;
}
.dg-hero h1{font-size:46px;letter-spacing:-1.5px;}
.dg-hero .hero-body{margin-left:0;margin-right:0;font-size:16px;}
.dg-hero .hero-ctas{justify-content:flex-start;margin-bottom:0;}

/* Hero CTA buttons */
.dg-btn-anchor{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;
  padding:13px 26px;border-radius:10px;
  text-decoration:none;transition:all .2s;cursor:pointer;border:none;
  font-family:inherit;
}
.dg-btn-primary{
  background:var(--blue);color:#fff;
  box-shadow:0 4px 16px rgba(37,99,235,.28);
}
.dg-btn-primary:hover{background:#1d4ed8;transform:translateY(-2px);}
.dg-btn-secondary{
  background:#fff;color:#0d1b3e;
  border:1.5px solid #cbd5e1;
}
.dg-btn-secondary:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}

/* Featured demo panel (hero right) */
.dg-hero-demo{
  flex:1;position:relative;
  min-width:0;
}
.dg-hero-chrome{
  background:#f1f5f9;border-radius:12px 12px 0 0;
  padding:10px 16px;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-bottom:none;
}
.dg-hero-dots{display:flex;gap:5px;}
.dg-hero-dots span{width:10px;height:10px;border-radius:50%;display:block;}
.dg-hero-dots span:nth-child(1){background:#ef4444;}
.dg-hero-dots span:nth-child(2){background:#f59e0b;}
.dg-hero-dots span:nth-child(3){background:#22c55e;}
.dg-hero-url{
  flex:1;background:#fff;border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-size:11px;color:var(--text-muted);text-align:center;
}
.dg-hero-demo-frame{
  border:1px solid var(--border);border-radius:12px;
  overflow:hidden;background:#f8fafc;
  box-shadow:0 20px 60px rgba(13,27,62,.12);
  aspect-ratio:16/10;position:relative;
}
.dg-hero-demo-frame iframe{
  width:100%;height:100%;border:none;display:block;
}
.dg-hero-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Featured demo label */
.dg-hero-demo-label{
  position:absolute;bottom:14px;left:14px;z-index:10;
  background:rgba(13,27,62,.75);backdrop-filter:blur(6px);
  color:#fff;font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:20px;
  display:flex;align-items:center;gap:6px;
  pointer-events:none;
}
.dg-hero-demo-label span{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;display:inline-block;flex-shrink:0;
}

@media(max-width:1200px){
  .dg-hero{gap:36px;padding:60px 28px 52px;}
  .dg-hero .hero-left{flex:0 0 380px;max-width:380px;}
  .dg-hero h1{font-size:38px;}
}
@media(max-width:1024px){
  .dg-hero{flex-direction:column;padding:56px 28px 48px;gap:40px;}
  .dg-hero .hero-left{flex:none;max-width:100%;}
  .dg-hero h1{font-size:36px;}
  .dg-hero-demo{width:100%;}
}
@media(max-width:768px){
  .dg-hero{padding:44px 20px 40px;}
  .dg-hero h1{font-size:30px;letter-spacing:-1px;}
  /* keep the two hero CTAs side by side instead of the sitewide
     .hero-ctas mobile rule stacking them one above the other */
  .dg-hero .hero-ctas{flex-direction:row;flex-wrap:nowrap;gap:10px;}
  .dg-hero .hero-ctas .dg-btn-anchor{flex:1 1 0;min-width:0;justify-content:center;padding-left:14px;padding-right:14px;white-space:nowrap;}
}
@media(max-width:400px){
  .dg-hero .hero-ctas .dg-btn-anchor{font-size:13px;padding-left:10px;padding-right:10px;gap:5px;}
}

/* Social-proof strip (reuses .stats-bar colours) */
.dg-proof-logos{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.dg-cert-pill{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:6px 14px;font-size:12px;font-weight:700;color:var(--text-muted);
}

/* Category tabs bar */
.dg-cats-wrap{
  position:sticky;
  top:0vh;
  z-index:100;
  background:var(--bg-light);
  border-bottom:1px solid var(--border);
  padding:0 48px;
}
.dg-cats-wrap.dg-cats-hidden{
  visibility:hidden;
  pointer-events:none;
}
.dg-cats-inner{
  max-width:1240px;margin:0 auto;
  overflow-x:auto;scrollbar-width:none;
}
.dg-cats-inner::-webkit-scrollbar{display:none;}
.dg-cats-inner .industry-tabs{
  margin-bottom:0;
  padding:16px 0;
  flex-wrap:nowrap;
  justify-content:center;
  gap:8px;
}
.dg-cats-inner .industry-tab{
  white-space:nowrap;flex-shrink:0;
  font-size:13.5px;font-weight:600;
  padding:9px 22px;
}

/* Main content wrapper */
.dg-main{padding:60px 48px 80px;background:var(--bg-light);}
.dg-inner{max-width:1240px;margin:0 auto;}

/* Category section visibility */
.dg-section{display:none;}
.dg-section.visible{display:block;}

/* Cat section header */
.dg-cat-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;margin-bottom:36px;
}
.dg-cat-header-left{flex:1;}
.dg-cat-desc{
  font-size:15px;color:var(--text-body);
  line-height:1.65;margin-top:8px;max-width:560px;
}
.dg-cat-count-box{
  flex-shrink:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 22px;text-align:center;margin-top:4px;
}
.dg-cat-count-num{font-size:26px;font-weight:800;color:var(--blue);letter-spacing:-1px;}
.dg-cat-count-lbl{font-size:11px;color:var(--text-muted);margin-top:2px;font-weight:500;}

/* Demo card grid */
.dg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px;
}
.dg-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  cursor:pointer;display:flex;flex-direction:column;
}
.dg-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(13,27,62,.10);
  border-color:#bfdbfe;
}

/* Thumbnail */
.dg-thumb{
  height:180px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.dg-thumb-hr      {background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);}
.dg-thumb-timepay {background:linear-gradient(135deg,#064e3b 0%,#059669 100%);}
.dg-thumb-talent  {background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 100%);}
.dg-thumb-engage  {background:linear-gradient(135deg,#7c2d12 0%,#ea580c 100%);}
.dg-thumb-insights{background:linear-gradient(135deg,#0c4a6e 0%,#0284c7 100%);}
/* Subtle grid on thumbnail */
.dg-thumb::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;pointer-events:none;
}
/* Skeleton UI inside thumb */
.dg-thumb-ui{
  position:relative;z-index:1;
  width:80%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:10px;
  padding:12px;
}
.dg-ui-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.3);margin-bottom:8px;}
.dg-ui-bar.s{width:55%;}
.dg-ui-row{display:flex;gap:6px;margin-bottom:6px;}
.dg-ui-pill{height:18px;border-radius:4px;background:rgba(255,255,255,.2);flex:1;}
.dg-ui-pill.w55{flex:0 0 55%;}

.dg-hero-clickable { cursor: pointer; }

.dg-hero-play-btn {

  position: absolute; top: 50%; left: 50%;

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

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

  background: rgba(255,255,255,.92);

  display: flex; align-items: center; justify-content: center;

  box-shadow: 0 8px 32px rgba(0,0,0,.2);

  transition: transform .2s, box-shadow .2s;

  pointer-events: none; z-index: 5;

  font-size: 24px; color: #2563eb; padding-left: 5px;

}

.dg-hero-demo-frame:hover .dg-hero-play-btn {

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

  box-shadow: 0 12px 40px rgba(0,0,0,.25);

}
 

/* Hover-away overlay with play button */
.dg-thumb-overlay{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(to bottom,transparent 25%,rgba(10,20,50,.5) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .25s;
}
.dg-card:hover .dg-thumb-overlay{opacity:0;}
.dg-play{
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  transition:transform .2s;
}
.dg-card:hover .dg-play{transform:scale(1.12);}
.dg-play svg{width:18px;height:18px;color:var(--blue);margin-left:2px;}
/* NEW badge reuses .new-tag from phrhome.css but positioned */
.dg-thumb-new{
  position:absolute;top:10px;right:10px;z-index:5;
}

/* Card body */
.dg-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.dg-card-tag{
  font-size:10.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px;
}
.dg-card-title{
  font-size:15.5px;font-weight:700;color:#0d1b3e;
  margin-bottom:6px;line-height:1.35;
}
.dg-card-desc{
  font-size:13.5px;color:var(--text-body);line-height:1.65;margin-bottom:18px;flex:1;
}
.dg-card-footer{
  display:flex;align-items:center;justify-content:space-between;
}
.dg-card-cta{
  display:flex;align-items:center;gap:7px;
  background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;
  padding:9px 18px;border-radius:8px;border:none;cursor:pointer;
  transition:background .2s;font-family:inherit;
}
.dg-card-cta:hover{background:#1d4ed8;}
.dg-card-cta svg{width:13px;height:13px;transition:transform .2s;}
.dg-card-cta:hover svg{transform:translateX(2px);}
.dg-card-views{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--text-muted);font-weight:500;
}
.dg-card-views svg{width:13px;height:13px;}

/* OVERLAY backdrop */
.dg-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(8,15,35,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.dg-overlay.open{opacity:1;visibility:visible;}
.dg-modal{
  background:#fff;border-radius:20px;
  box-shadow:0 24px 72px rgba(13,27,62,.18);
  width:100%;overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(18px) scale(.97);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.dg-overlay.open .dg-modal{transform:translateY(0) scale(1);}

/* Gate state */
.dg-modal.gate{max-width:520px;max-height:92vh;}
.dg-modal.player{max-width:960px;max-height:92vh;}

.dg-gate,.dg-player{display:none;flex-direction:column;flex:1;}
.dg-modal.gate .dg-gate{display:flex;}
.dg-modal.player .dg-player{display:flex;}

/* Gate form */
.dg-gate-head{
  padding:32px 36px 24px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.dg-close{
  position:absolute;top:18px;right:18px;
  width:32px;height:32px;border-radius:8px;
  background:var(--bg-light);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-muted);transition:all .15s;
}
.dg-close:hover{background:var(--border);color:var(--text-dark);}
.dg-close svg{width:15px;height:15px;}
.dg-gate-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:1.5px;
  color:var(--blue);text-transform:none;margin-bottom:10px;
}
.dg-gate-title{
  font-size:21px;font-weight:700;letter-spacing:-.5px;
  color:#0d1b3e;margin-bottom:8px;
}
.dg-gate-sub{font-size:14px;color:var(--text-body);line-height:1.55;}

.dg-gate-body{padding:24px 36px 28px;overflow-y:auto;}
.dg-form{display:flex;flex-direction:column;gap:14px;}
.dg-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dg-form-group{display:flex;flex-direction:column;gap:5px;}
.dg-label{font-size:12.5px;font-weight:700;color:#0d1b3e;}
.dg-input{
  padding:11px 14px;border-radius:9px;
  border:1.5px solid var(--border);
  font-size:14px;font-family:inherit;color:var(--text-dark);
  outline:none;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.dg-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.dg-input.err{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.09);}
.dg-err-msg{font-size:11.5px;color:#ef4444;font-weight:600;display:none;}
.dg-err-msg.show{display:block;}
.dg-select{
  padding:11px 14px;padding-right:36px;border-radius:9px;
  border:1.5px solid var(--border);
  font-size:14px;font-family:inherit;color:var(--text-dark);
  background:#fff url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance:none;appearance:none;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.dg-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.dg-submit{
  margin-top:4px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;border-radius:10px;border:none;
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:background .2s,transform .15s;
}
.dg-submit:hover{background:#1d4ed8;transform:translateY(-1px);}
.dg-legal{
  text-align:center;font-size:11.5px;color:var(--text-muted);
  line-height:1.6;margin-top:12px;
}
.dg-legal a{color:var(--blue);}

.dg-gate-trust{
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  padding:14px 36px;
  background:var(--bg-light);border-top:1px solid var(--border);
}
.dg-trust-item{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-muted);font-weight:500;
}
.dg-trust-item svg{width:13px;height:13px;color:#16a34a;}

/* Player */
.dg-player-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;gap:12px;
}
.dg-player-info{display:flex;align-items:center;gap:10px;}
.dg-player-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;
  background:#eff6ff;color:var(--blue);
}
.dg-player-name{font-size:15px;font-weight:700;color:#0d1b3e;}
.dg-player-actions{display:flex;align-items:center;gap:8px;}
.dg-player-share{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--text-muted);
  background:var(--bg-light);border:1px solid var(--border);
  padding:7px 14px;border-radius:8px;cursor:pointer;
  transition:all .2s;border:none;font-family:inherit;
}
.dg-player-share:hover{border:1px solid var(--blue);color:var(--blue);}

.dg-iframe-wrap{
  flex:1;position:relative;background:#f1f5f9;min-height:480px;
}
.dg-iframe-wrap iframe{width:100%;height:100%;border:none;display:none;}
.dg-loading{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.dg-spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid #dbeafe;border-top-color:var(--blue);
  animation:dg-spin .75s linear infinite;
}
@keyframes dg-spin{to{transform:rotate(360deg);}}
.dg-loading p{font-size:14px;color:var(--text-muted);font-weight:500;}

.dg-player-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-top:1px solid var(--border);
  background:var(--bg-light);flex-shrink:0;gap:12px;flex-wrap:wrap;
}
.dg-nav-btns{display:flex;align-items:center;gap:8px;}
.dg-nav-btn{
  display:flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--text-muted);
  background:#fff;border:1px solid var(--border);
  padding:8px 14px;border-radius:8px;
  cursor:pointer;transition:all .2s;font-family:inherit;
}
.dg-nav-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);}
.dg-nav-btn:disabled{opacity:.38;cursor:default;}
.dg-nav-btn svg{width:13px;height:13px;}
.dg-foot-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dg-foot-cta{
  display:flex;align-items:center;gap:7px;
  background:var(--blue);color:#fff;
  font-size:13.5px;font-weight:700;font-family:inherit;
  padding:10px 20px;border-radius:9px;border:none;
  cursor:pointer;transition:background .2s;white-space:nowrap;
}
.dg-foot-cta:hover{background:#1d4ed8;}
.dg-foot-cta svg{width:14px;height:14px;}

/* Post-watch capture panel */
.dg-post{
  position:fixed;bottom:24px;right:24px;z-index:600;
  background:#fff;border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(13,27,62,.16),0 4px 16px rgba(13,27,62,.08);
  padding:24px;width:332px;
  transform:translateY(130%);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.dg-post.show{transform:translateY(0);}
.dg-post-close{
  position:absolute;top:12px;right:12px;
  width:26px;height:26px;border-radius:6px;
  background:var(--bg-light);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-muted);transition:background .15s;
}
.dg-post-close:hover{background:var(--border);}
.dg-post-close svg{width:12px;height:12px;}
.dg-post-icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:14px;
}
.dg-post h4{font-size:15.5px;font-weight:700;color:#0d1b3e;margin-bottom:6px;letter-spacing:-.3px;}
.dg-post p{font-size:13px;color:var(--text-body);line-height:1.55;margin-bottom:16px;}
.dg-post-form{display:flex;flex-direction:column;gap:10px;}
.dg-post-input{
  padding:10px 14px;border-radius:9px;
  border:1.5px solid var(--border);
  font-size:13.5px;font-family:inherit;color:var(--text-dark);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.dg-post-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.dg-post-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:#0d1b3e;color:#fff;
  font-size:13.5px;font-weight:700;font-family:inherit;
  padding:11px;border-radius:9px;border:none;cursor:pointer;
  transition:background .2s;
}
.dg-post-btn:hover{background:#1e3a8a;}
.dg-post-btn svg{width:13px;height:13px;}
.dg-post-ok{display:none;text-align:center;padding:4px 0;}
.dg-post-ok svg{width:38px;height:38px;color:#16a34a;margin:0 auto 12px;}
.dg-post-ok h4{font-size:15px;font-weight:700;color:#0d1b3e;margin-bottom:6px;}
.dg-post-ok p{font-size:13px;color:var(--text-body);}
.dg-post.submitted .dg-post-form{display:none;}
.dg-post.submitted .dg-post-ok{display:block;}

/* Responsive */
@media(max-width:1200px){
  .dg-cats-wrap{padding:0 28px;}
  .dg-hero{padding:64px 28px 48px;}
  .dg-main{padding:48px 28px 64px;}
  .dg-hero{padding:64px 28px 56px;}
  .dg-hero h1{font-size:42px;}
}
@media(max-width:1024px){
  .dg-form-row{grid-template-columns:1fr;}
  .dg-cat-header{flex-direction:column;gap:12px;}
  .dg-iframe-wrap{min-height:340px;}
}
@media(max-width:768px){
  .dg-hero{padding:48px 20px 44px;}
  .dg-hero h1{font-size:32px;letter-spacing:-1px;}
  .dg-cats-wrap{padding:0 20px;}
  .dg-hero{padding:48px 20px 40px;}
  .dg-main{padding:40px 20px 60px;}
  .dg-grid{grid-template-columns:1fr;}
  .dg-gate-head,.dg-gate-body,.dg-gate-trust{padding-left:24px;padding-right:24px;}
  .dg-iframe-wrap{min-height:260px;}
  .dg-player-foot{flex-direction:column;align-items:flex-start;}
  .dg-post{right:12px;bottom:12px;width:calc(100vw - 24px);max-width:360px;}
}

/* Bottom form section */
.dg-form-section{
  padding:80px 48px;
  background:#fff;
  border-top:1px solid var(--border);
}
.dg-form-section-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:start;
}
.dg-form-copy .section-label{margin-bottom:14px;}
.dg-form-copy h2{
  font-size:32px;font-weight:700;
  letter-spacing:-1px;color:#0d1b3e;
  line-height:1.2;margin-bottom:16px;
}
.dg-form-copy p{
  font-size:15px;color:var(--text-body);
  line-height:1.7;margin-bottom:28px;
}
.dg-form-bullets{
  list-style:none;display:flex;flex-direction:column;gap:12px;
}
.dg-form-bullets li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:var(--text-body);
}
.dg-form-bullets li svg{
  color:var(--blue);flex-shrink:0;
}
.dg-form-embed{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 32px;
  min-height:480px;
}
@media(max-width:1024px){
  .dg-form-section{padding:60px 28px;}
  .dg-form-section-inner{grid-template-columns:1fr;gap:40px;}
  .dg-form-copy h2{font-size:26px;}
}
@media(max-width:768px){
  .dg-form-section{padding:48px 20px;}
}

/* Lexi powered badge */
.lexi-powered-badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;
  background:linear-gradient(135deg,#0d1b3e 0%,#1e3a8a 100%);
  border-radius:100px;
  padding:6px 14px 6px 10px;
  width:fit-content;
}
.lexi-powered-badge .lpb-text{
  font-size:11.5px;font-weight:500;color:rgba(255,255,255,.65);
  letter-spacing:.2px;
}
.lexi-powered-badge .lpb-logo-img{
  height:18px;width:auto;
  mix-blend-mode:screen;
  display:block;
}
.lexi-powered-badge .lpb-icon{
  font-size:14px;
}

/* Disabled / coming soon tabs */
.industry-tab.dg-tab-disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
  pointer-events: all;
  position: relative;
}

/* Talent sub-category groups */
.dg-subcat {
  margin-bottom: 36px;
}
.dg-subcat:last-child { margin-bottom: 0; }
.dg-subcat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dg-subcat-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -.1px;
}
.dg-subcat-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-lt, #eff6ff);
  border-radius: 100px;
  padding: 3px 10px;
}

/* "Demo in development" toast */
.dg-dev-toast {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  background: #0d1b3e;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(13,27,62,.25);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: bottom .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.dg-dev-toast.show { bottom: 28px; }
.dg-dev-toast-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* demos3 - new classes */
.dg-section-heading{font-size:28px;font-weight:700;letter-spacing:-1px;color:#0d1b3e}.dg-hero-iframe{opacity:0;transition:opacity .4s}.dg-hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:var(--bg-light)}.dg-hero-placeholder-text{font-size:13.5px;font-weight:600;color:var(--text-muted)}.dg-logo-strip{padding:52px 0 0;background:#fff;border-top:1px solid var(--border)}.dg-logo-strip-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;margin-bottom:28px}.dg-logo-strip-inner{padding-bottom:52px}#hs-form-container{width:100%}.dg-hs-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;gap:14px;color:var(--text-muted)}.dg-hs-placeholder-icon{opacity:.35}.dg-hs-placeholder-text{font-size:13.5px;font-weight:500}@media(max-width:768px){.dg-card-cta{min-height:44px;padding:11px 18px}.dg-cats-inner .industry-tab{min-height:44px}.dg-btn-anchor{min-height:44px}.t-arrow{min-width:44px;min-height:44px}}@media(max-width:480px){.dg-cat-count-box{display:none}}
.dg-hero-spinner{width:48px;height:48px;border-radius:50%;border:3px solid #dbeafe;border-top-color:var(--blue);animation:dg-spin .8s linear infinite;}

/* demos3 - new classes */
.dg-section-heading{font-size:28px;font-weight:700;letter-spacing:-1px;color:#0d1b3e}
.dg-hero-iframe{opacity:0;transition:opacity .4s}
.dg-hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:var(--bg-light)}
.dg-hero-placeholder-text{font-size:13.5px;font-weight:600;color:var(--text-muted)}
.dg-hero-spinner{width:48px;height:48px;border-radius:50%;border:3px solid #dbeafe;border-top-color:var(--blue);animation:dg-spin .8s linear infinite}
.dg-logo-strip{padding:52px 0 0;background:#fff;border-top:1px solid var(--border)}
.dg-logo-strip-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;margin-bottom:28px}
.dg-logo-strip-inner{padding-bottom:52px}
#hs-form-container{width:100%}
.dg-hs-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;gap:14px;color:var(--text-muted)}
.dg-hs-placeholder-icon{opacity:.35}
.dg-hs-placeholder-text{font-size:13.5px;font-weight:500}
.dg-t-avatar-img{border-radius:50%;object-fit:cover;display:block}
@media(max-width:768px){.dg-card-cta{min-height:44px;padding:11px 18px}.dg-cats-inner .industry-tab{min-height:44px}.dg-btn-anchor{min-height:44px}.t-arrow{min-width:44px;min-height:44px}}
@media(max-width:480px){.dg-cat-count-box{display:none}}

.webinar-page{background:var(--bg-light);min-height:100vh;}

/* PAGE HERO */
.wb-page-hero{background:#eef2ff;border-bottom:1px solid #e2e8f0;padding:120px 64px;position:relative;overflow:hidden;}
.wb-page-hero::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.06) 0%,transparent 70%);top:-200px;right:-100px;pointer-events:none;}
.wb-page-hero::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%);bottom:-100px;left:200px;pointer-events:none;}
.wb-hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2;display:flex;align-items:center;gap:48px;}
.wb-hero-content{flex:1;position:relative;z-index:2;}
.wb-hero-img-col{flex:0 0 46%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.65);border-radius:20px;padding:16px;}
.wb-hero-img{display:block;width:100%;height:auto;border-radius:12px;}

/* Webinar hero lead-gen form column (replaces .wb-hero-img-col on this page only) */
.wb-hero-form-col{flex:0 0 44%;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 60px -24px rgba(13,27,62,.18);position:relative;z-index:2;min-height:620px;}
.wb-hero-form-col .wb-notify-inner{padding:24px 24px 4px;}
@media(max-width:768px){
  .wb-hero-form-col{flex:none;width:100%;min-height:710px;}
  .wb-hero-form-col .wb-notify-inner{padding:20px 20px 4px;}
}

/* Floating speaker avatars/icons around the hero title on the webinar hub */
.wb-hero-float-decor{position:absolute;inset:0;pointer-events:none;z-index:1;}
.wb-float{position:absolute;border-radius:50%;box-shadow:0 10px 24px -8px rgba(13,27,62,.25);animation:wbFloat 6s ease-in-out infinite;}
.wb-float-av{width:52px;height:52px;object-fit:cover;border:3px solid #fff;}
.wb-float-ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--ic,var(--blue));border:3px solid #fff;}
.wb-float-ic svg{width:42%;height:42%;}
.wb-float-1{top:0%;left:2%;width:68px;height:68px;border-width:4px;animation-duration:7s;animation-delay:0s;}
.wb-float-2{top:4%;left:34%;width:30px;height:30px;animation-duration:6.5s;animation-delay:.6s;}
.wb-float-6{top:14%;left:16%;width:48px;height:48px;animation-duration:6.2s;animation-delay:.9s;}
.wb-float-5{top:2%;left:46%;width:32px;height:32px;animation-duration:7.2s;animation-delay:1.6s;}
.wb-float-3{top:78%;left:0%;width:58px;height:58px;animation-duration:7.5s;animation-delay:1.2s;}
.wb-float-4{top:86%;left:28%;width:32px;height:32px;animation-duration:6.8s;animation-delay:.3s;}
.wb-float-7{top:74%;left:42%;width:34px;height:34px;animation-duration:7.8s;animation-delay:.2s;}
.wb-float-8{top:92%;left:12%;width:52px;height:52px;animation-duration:6.6s;animation-delay:1.4s;}
@keyframes wbFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-16px) rotate(4deg);}}
@media(prefers-reduced-motion:reduce){.wb-float{animation:none;}}
@media(max-width:1024px){.wb-hero-float-decor{display:none;}}

/* .wb-hero-title/.wb-page-hero/.wb-featured-right are shared with the
   blog/news/events/ebooks hero sections -- scope webinar-only tweaks to
   .webinar-page so those other pages are unaffected. */
/* min-width guard: this selector out-specifies the file's own <=768px
   .wb-hero-title override below, so without the guard it would win on
   mobile too and fight the mobile-tuned clamp. */
@media(min-width:769px){.webinar-page .wb-hero-title{font-size:clamp(2.1rem,3.2vw,2.8rem);}}
.webinar-page .wb-page-hero{padding-bottom:200px;}
.webinar-page .wb-featured-right{justify-content:center;padding-top:40px;}
@media(max-width:1024px){.webinar-page .wb-page-hero{padding-bottom:110px;}}
@media(max-width:768px){.webinar-page .wb-page-hero{padding-bottom:90px;}}
@media(max-width:480px){.webinar-page .wb-page-hero{padding-bottom:70px;}}
.wb-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:100px;padding:6px 18px;font-size:11px;font-weight:700;letter-spacing:1.5px;color:#2563eb;text-transform:uppercase;margin-bottom:24px;}
.wb-hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#2563eb;animation:pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.wb-hero-title{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800;color:#0d1b3e;letter-spacing:-.04em;line-height:1.1;margin-bottom:16px;}
.wb-hero-title span{color:#2563eb;}
.wb-hero-sub{font-size:1rem;color:#475569;max-width:520px;line-height:1.75;margin-bottom:0;}

/* BODY */
.wb-body{max-width:1200px;margin:-72px auto 0;padding:0 54px 80px;position:relative;z-index:10;}

/* FEATURED CARD */
.wb-featured-card{background:#fff;border-radius:24px;border:1px solid var(--border);box-shadow:0 24px 80px rgba(13,27,62,.14),0 4px 20px rgba(13,27,62,.06);overflow:hidden;display:grid;grid-template-columns:1fr 420px;margin-bottom:40px;transition:transform .3s ease;}
.wb-featured-card:hover{transform:translateY(-4px);}
.wb-comingsoon-card{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 24px 80px rgba(13,27,62,.10),0 4px 20px rgba(13,27,62,.05);padding:64px 48px;text-align:center;max-width:680px;margin:0 auto 40px;position:relative;overflow:hidden;}
.wb-comingsoon-card::before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.08) 0%,transparent 70%);top:-100px;right:-80px;pointer-events:none;}
.wb-comingsoon-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#3b82f6);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 8px 24px rgba(37,99,235,.25);position:relative;z-index:1;}
.wb-comingsoon-badge{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 16px;border-radius:100px;margin-bottom:20px;position:relative;z-index:1;}
.wb-soon-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse-dot 1.4s ease-in-out infinite;}
.wb-comingsoon-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-bottom:16px;position:relative;z-index:1;}
.wb-comingsoon-desc{font-size:.95rem;color:var(--text-body);line-height:1.75;max-width:480px;margin:0 auto 32px;position:relative;z-index:1;}
.wb-comingsoon-cta{position:relative;z-index:1;display:inline-flex;}
@media(max-width:768px){.wb-comingsoon-card{padding:48px 24px;border-radius:18px;}.wb-comingsoon-title{font-size:1.3rem;}.wb-comingsoon-desc{font-size:.88rem;}}
.wb-featured-left{padding:48px;display:flex;flex-direction:column;justify-content:space-between;}
.wb-featured-meta{display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
.wb-live-badge{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;font-size:11px;font-weight:700;letter-spacing:.8px;padding:5px 12px;border-radius:100px;}
.wb-live-dot{width:6px;height:6px;border-radius:50%;background:#2563eb;animation:pulse-dot 1.4s ease-in-out infinite;}
.wb-cat-pill{display:inline-block;background:#eff6ff;border:1px solid #bfdbfe;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.5px;padding:5px 14px;border-radius:100px;}
.wb-featured-title{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.2;margin-bottom:16px;}
.wb-featured-desc{font-size:.95rem;color:var(--text-body);line-height:1.75;margin-bottom:28px;max-width:440px;}
.wb-speakers{display:flex;gap:20px;margin-bottom:32px;flex-wrap:wrap;}
.wb-speaker{display:flex;align-items:center;gap:10px;}
.wb-speaker-av{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;object-fit:cover;}
.wb-speaker-name{font-size:13px;font-weight:700;color:var(--navy);line-height:1.2;}
.wb-speaker-role{font-size:11px;color:var(--text-muted);}
.wb-featured-footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.wb-date-chip{display:flex;align-items:center;gap:8px;background:var(--bg-card);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--navy);}
.wb-date-chip svg{flex-shrink:0;color:var(--blue);}

/* Featured right panel */
.wb-featured-right{background:url('../uploads/2026/05/featured-bg.webp') center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:15%;padding-left:40px;padding-right:40px;padding-bottom:40px;position:relative;overflow:hidden;gap:24px;}
.wb-featured-right::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(6,78,59,.25) 0%,rgba(30,64,175,.25) 100%);}
.wb-play-ring{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1;transition:all .25s ease;}
.wb-play-ring:hover{background:rgba(37,99,235,.5);border-color:rgba(255,255,255,.5);transform:scale(1.06);}
.wb-play-ring::before{content:'';position:absolute;width:108px;height:108px;border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:ring-pulse 2.5s ease-in-out infinite;}
@keyframes ring-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.4}}
.wb-countdown{text-align:center;position:relative;z-index:1;}
.wb-countdown-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:12px;}
.wb-countdown-tiles{display:flex;gap:8px;justify-content:center;}
.wb-tile{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px 14px;min-width:56px;text-align:center;}
.wb-tile-num{font-size:24px;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px;}
.wb-tile-unit{font-size:9px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:1px;text-transform:uppercase;margin-top:4px;}
.wb-sep{font-size:20px;font-weight:700;color:rgba(255,255,255,.3);align-self:flex-start;margin-top:10px;}
.wb-attendees{display:flex;align-items:center;gap:8px;position:relative;z-index:1;}
.wb-att-avatars{display:flex;}
.wb-att-av{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.3);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;}
.wb-att-av:first-child{margin-left:0;}
.wb-att-text{font-size:12px;color:rgba(255,255,255,.7);font-weight:500;}
.wb-att-text strong{color:#fff;}

/* SECTION HEADS */
.wb-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;margin-top:52px;}
.wb-section-title{font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-.03em;text-shadow:0 1px 4px rgba(0,0,0,.2);}
.wb-section-title span{color:#60a5fa;}
.wb-section-title--dark{color:var(--navy);text-shadow:none;}
.wb-section-title--dark span{color:var(--blue);}
.wb-slider-arrows{display:flex;gap:8px;}
.wb-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s;}
.wb-arrow:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.22);color:#fff;}
.wb-arrow:disabled{opacity:.25;cursor:not-allowed;}
.wb-arrow--dark{border:1.5px solid var(--border);background:#fff;color:var(--navy);backdrop-filter:none;}
.wb-arrow--dark:hover{border-color:var(--blue);background:#eff6ff;color:var(--blue);}
.wb-arrow--dark:disabled{opacity:.35;}

/* SLIDER */
.wb-slider-track-wrap{overflow:hidden;}
.wb-slider-track{display:flex;gap:20px;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.wb-upcoming-card{flex:0 0 calc(33.333% - 14px);background:#fff;border-radius:18px;border:1.5px solid var(--border);overflow:hidden;transition:all .25s;cursor:pointer;text-decoration:none;display:block;}
.wb-upcoming-card:hover{border-color:var(--blue);box-shadow:0 8px 32px rgba(37,99,235,.12);transform:translateY(-3px);}
.wb-uc-thumb{height:150px;position:relative;display:flex;align-items:flex-end;padding:16px;}
.wb-uc-thumb-grad-1{background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%);}
.wb-uc-thumb-grad-2{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);}
.wb-uc-thumb-grad-3{background:linear-gradient(135deg,#0f766e 0%,#06b6d4 100%);}
.wb-uc-thumb-grad-4{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.wb-uc-thumb-grad-5{background:linear-gradient(135deg,#be185d 0%,#ec4899 100%);}
.wb-uc-date-badge{background:rgba(255,255,255,.95);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--navy);letter-spacing:-.3px;}
.wb-uc-icon{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;}
.wb-uc-body{padding:18px 20px 20px;}
.wb-uc-cat-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.wb-uc-cat{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--blue);text-transform:uppercase;}
.wb-uc-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:12px;}
.wb-uc-speaker{display:flex;align-items:center;gap:7px;margin-bottom:12px;}
.wb-uc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid #f1f5f9;}
.wb-uc-time{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px;}
.wb-register-btn{font-size:11px;font-weight:700;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:3px;transition:gap .2s;}
.wb-register-btn:hover{gap:6px;}

/* RECORDINGS */
.wb-recordings-wrap{margin-top:64px;}
.wb-rec-header{display:flex;align-items:center;gap:16px;margin-bottom:40px;}
.wb-rec-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--blue);text-transform:uppercase;margin-bottom:6px;}
.wb-rec-h2{font-size:clamp(1.6rem,2.5vw,2rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;}
.wb-rec-count{margin-left:auto;font-size:13px;font-weight:600;color:var(--text-muted);}
.wb-cat-group{margin-bottom:48px;}
.wb-cat-label{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.wb-cat-label-text{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.wb-cat-label-line{flex:1;height:1px;background:var(--border);}
.wb-cat-label-pill{font-size:11px;font-weight:700;color:var(--text-muted);background:var(--bg-card);border-radius:100px;padding:4px 12px;}
.wb-rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* Recording card */
.wb-rec-card{background:#fff;border-radius:18px;border:1.5px solid #cbd5e1;overflow:hidden;transition:all .25s;cursor:pointer;}
.wb-rec-card:hover{border-color:rgba(37,99,235,.3);box-shadow:0 8px 32px rgba(13,27,62,.1);transform:translateY(-3px);}
.wb-rec-thumb{height:160px;position:relative;overflow:hidden;}
.wb-rec-thumb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.wb-rec-play{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 4px 20px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.wb-rec-card:hover .wb-rec-play{transform:scale(1.1);}
.wb-rec-duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.3px;}
.wb-rec-viewed{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.8);font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;display:flex;align-items:center;gap:4px;}
.wb-rec-body{padding:18px 20px 20px;}
.wb-rec-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.wb-rec-cat-dot{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--text-muted);text-transform:uppercase;}
.wb-rec-date-str{font-size:11px;color:var(--text-muted);}
.wb-rec-meta-right{display:flex;align-items:center;gap:6px;}
.wb-lang-badge{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:#f0f4ff;color:#2563eb;border:1px solid #dbeafe;border-radius:4px;padding:2px 6px;white-space:nowrap;}
.wb-featured-left .wb-lang-badge{display:inline-block;margin-bottom:16px;}
.wb-rec-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.45;margin-bottom:12px;}
.wb-rec-footer{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid #f1f5f9;}
.wb-rec-speakers{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;}
.wb-rec-speaker{display:flex;align-items:center;gap:7px;}
.wb-rec-sp-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0;}
.wb-rec-sp-photo{object-fit:cover;}
.wb-rec-sp-info{display:flex;flex-direction:column;min-width:0;}
.wb-rec-sp-name{font-size:11px;font-weight:700;color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-rec-sp-role{font-size:10px;color:var(--text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-watch-btn{flex-shrink:0;font-size:11px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:3px;transition:gap .2s;}
.wb-watch-btn:hover{gap:6px;}

/* CTA STRIP */
.wb-cta-strip{margin-top:56px;background:linear-gradient(135deg,#0d1b3e 0%,#1e3a8a 100%);border-radius:20px;padding:48px 56px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;overflow:hidden;}
.wb-cta-strip::before{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.2),transparent 70%);}
.wb-cta-strip-text{position:relative;z-index:1;}
.wb-cta-strip-text h3{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:8px;}
.wb-cta-strip-text p{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.6;max-width:480px;}
.wb-cta-strip-btns{display:flex;gap:12px;flex-shrink:0;position:relative;z-index:1;}

.wb-featured-cta{margin-left:auto;background:#16a34a;box-shadow:0 4px 16px rgba(22,163,74,0.35);}
.wb-featured-cta:hover{background:#15803d;box-shadow:0 8px 24px rgba(22,163,74,0.45);}

/* RESPONSIVE */

/* Tablet (1024px) */
@media(max-width:1024px){
  .wb-page-hero{padding:48px 32px;}
  .wb-hero-img-col{flex:0 0 44%;}
  .wb-body{padding:0 32px 64px;margin-top:-56px;}
  .wb-featured-card{grid-template-columns:1fr;}
  .wb-featured-left{padding:32px;}
  .wb-featured-desc{max-width:100%;}
  .wb-featured-right{order:-1;min-height:220px;padding:28px;flex-direction:row;flex-wrap:wrap;justify-content:space-around;gap:20px;}
  .wb-upcoming-card{flex:0 0 calc(50% - 10px);}
  .wb-rec-grid{grid-template-columns:repeat(2,1fr);}
  .wb-cta-strip{padding:36px 40px;}
}

/* Mobile (768px) */
@media(max-width:768px){
  /* Hero */
  .wb-page-hero{padding:40px 20px 48px;}
  .wb-hero-inner{flex-direction:column;align-items:stretch;}
  .wb-hero-img-col{display:none;}
  .wb-hero-title{font-size:clamp(1.9rem,7.5vw,2.6rem);}
  .wb-hero-sub{font-size:.9rem;max-width:100%;margin-bottom:24px;}

  /* Body */
  .wb-body{padding:0 16px 48px;margin-top:-40px;}

  /* Featured card */
  .wb-featured-card{border-radius:18px;margin-bottom:28px;}
  .wb-featured-left{padding:24px 20px;}
  .wb-featured-title{font-size:1.15rem;line-height:1.35;}
  .wb-featured-desc{font-size:.875rem;margin-bottom:20px;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
  .wb-featured-meta{flex-wrap:wrap;gap:6px;}
  .wb-speakers{gap:10px;}
  .wb-speaker-av{width:34px;height:34px;font-size:10px;}
  .wb-speaker-name{font-size:12px;}
  .wb-speaker-role{font-size:10px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wb-featured-footer{flex-direction:column;align-items:stretch;gap:10px;}
  .wb-date-chip{font-size:12px;padding:8px 12px;align-self:flex-start;}
  .wb-featured-footer .btn-primary{width:100%;justify-content:center;margin-left:0 !important;}

  /* Countdown panel move above card content on mobile */
  .wb-featured-right{order:-1;padding:28px 20px;gap:16px;min-height:auto;}
  .wb-countdown-tiles{gap:8px;}
  .wb-tile{min-width:52px;padding:10px 12px;}
  .wb-tile-num{font-size:22px;}
  .wb-tile-unit{font-size:9px;letter-spacing:.5px;}
  .wb-sep{font-size:18px;margin-top:10px;}

  /* Section heads */
  .wb-section-head{margin-top:36px;margin-bottom:14px;}
  .wb-section-title{font-size:1rem;}

  /* Upcoming slider native scroll */
  .wb-upcoming-card{flex:0 0 82vw;max-width:320px;}
  .wb-slider-track-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:0 16px;}
  .wb-slider-track-wrap::-webkit-scrollbar{display:none;}
  .wb-slider-track{gap:14px;padding-right:16px;}
  .wb-slider-arrows{display:none;}

  /* Recordings */
  .wb-recordings-wrap{margin-top:40px;}
  .wb-rec-header{flex-wrap:wrap;gap:8px;margin-bottom:20px;}
  .wb-rec-count{margin-left:0;width:100%;}
  .wb-rec-grid{grid-template-columns:1fr;gap:14px;}
  .wb-rec-thumb{height:150px;}
  .wb-rec-body{padding:14px 16px 16px;}
  .wb-rec-title{font-size:13px;line-height:1.45;}
  .wb-rec-footer{padding:12px 16px;}
  .wb-rec-sp-name{font-size:12px;}
  .wb-rec-sp-role{font-size:10px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* Category groups */
  .wb-cat-group{margin-bottom:32px;}
  .wb-cat-label-line{display:none;}

  /* CTA strip */
  .wb-cta-strip{flex-direction:column;padding:28px 20px;border-radius:16px;gap:20px;margin-top:40px;}
  .wb-cta-strip-text h3{font-size:1.15rem;}
  .wb-cta-strip-text p{font-size:.85rem;}
  .wb-cta-strip-btns{flex-direction:column;width:100%;gap:10px;}
  .wb-cta-strip-btns a{text-align:center;width:100% !important;box-sizing:border-box;}
}

/* Small mobile (480px) */
@media(max-width:480px){
  .wb-page-hero{padding:32px 16px 28px;}
  .wb-body{padding:0 12px 40px;}
  .wb-featured-card{border-radius:14px;}
  .wb-featured-left{padding:18px 16px;}
  .wb-featured-title{font-size:1.05rem;}
  .wb-countdown-tiles{gap:5px;}
  .wb-tile{min-width:44px;padding:8px 10px;}
  .wb-tile-num{font-size:18px;}
  .wb-sep{font-size:14px;margin-top:8px;}
  .wb-speakers{flex-direction:column;gap:8px;}
  .wb-upcoming-card{flex:0 0 86vw;}
  .wb-rec-grid{gap:10px;}
  .wb-rec-thumb{height:130px;}
}

/* Upcoming-webinar card cover taller on mobile (card is ~82vw there, so
   the flat 150px desktop height reads too short) */
@media(max-width:768px){
  .wb-uc-thumb{height:220px;}
}

/* VIDEO PREVIEW ON HOVER */
.wb-rec-thumb { overflow: hidden; }
.wb-rec-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
  pointer-events: none;
}
.wb-rec-card:hover .wb-rec-video { opacity: 1; }
/* Dim the play button when video is previewing */
.wb-rec-card:hover .wb-rec-thumb-inner { opacity: 0; transition: opacity .25s ease; }
.wb-rec-thumb-inner { transition: opacity .25s ease; }
/* Preview label */
.wb-preview-label {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 6px; z-index: 3;
  opacity: 0; transition: opacity .3s ease .1s;
  text-transform: uppercase; display: flex; align-items: center; gap: 5px;
}
.wb-preview-label::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%; background: #ef4444;
  display: inline-block;
  animation: pulse-dot 1s ease-in-out infinite;
}
.wb-rec-card:hover .wb-preview-label { opacity: 1; }
/* Members-only lock label stays visible at all times, not just on hover */
.wb-gated-label{opacity:1;background:rgba(13,27,62,.82);}
.wb-gated-label::before{display:none;}
/* Hide the "X views" badge when previewing */
.wb-rec-card:hover .wb-rec-viewed { opacity: 0; transition: opacity .2s; }
.wb-rec-viewed { transition: opacity .2s; }

/* Video Modal */
.wb-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:2000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
.wb-modal-backdrop.open{display:flex;}
.wb-modal-box{background:#000;border-radius:16px;overflow:hidden;width:100%;max-width:920px;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.7);animation:modal-in .22s ease;}
@keyframes modal-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.wb-modal-close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .2s;line-height:1;}
.wb-modal-close:hover{background:rgba(255,255,255,.35);}
.wb-modal-iframe-wrap{position:relative;padding-bottom:56.25%;height:0;}
.wb-modal-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;}
.wb-modal-title{padding:14px 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);background:#111;line-height:1.4;}
.wb-modal-box--form{background:#fff;max-width:520px;border-radius:20px;overflow:visible;}
.wb-modal-box--form .wb-modal-close{background:rgba(0,0,0,.08);color:#374151;top:-14px;right:-14px;}
.wb-modal-box--form .wb-modal-close:hover{background:rgba(0,0,0,.18);}
.wb-notify-inner{padding:48px;}
.wb-notify-title{font-size:1.4rem;font-weight:800;color:#0d1b3e;margin:0 0 8px;}
.wb-notify-sub{font-size:.95rem;color:#6b7280;margin:0 0 24px;line-height:1.6;}
.wb-notify-loader{display:flex;align-items:center;gap:10px;color:#6b7280;font-size:.9rem;padding:12px 0 20px;}
@media(max-width:600px){.wb-notify-inner{padding:32px 20px;}.wb-modal-box--form .wb-modal-close{top:10px;right:10px;}}
.wb-watch-btn{background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--blue);font-family:inherit;}
/* Interactive demo thumbnail image + gradient overlay */
.dg-thumb-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.dg-thumb:has(.dg-thumb-image)::before{z-index:3;}
.dg-thumb:has(.dg-thumb-image)::after{content:'';position:absolute;inset:0;z-index:1;}
.dg-thumb-hr:has(.dg-thumb-image)::after{background:linear-gradient(135deg,rgba(30,58,138,.3) 0%,rgba(37,99,235,.2) 100%);}
.dg-thumb-timepay:has(.dg-thumb-image)::after{background:linear-gradient(135deg,rgba(6,78,59,.3) 0%,rgba(5,150,105,.2) 100%);}
.dg-thumb-talent:has(.dg-thumb-image)::after{background:linear-gradient(135deg,rgba(76,29,149,.3) 0%,rgba(124,58,237,.2) 100%);}
.dg-thumb-engage:has(.dg-thumb-image)::after{background:linear-gradient(135deg,rgba(124,45,18,.3) 0%,rgba(234,88,12,.2) 100%);}
.dg-thumb-insights:has(.dg-thumb-image)::after{background:linear-gradient(135deg,rgba(12,74,110,.3) 0%,rgba(2,132,199,.2) 100%);}

/* ── Demo Gate Popup Overlay ────────────────────────────────────
   New popup gate — scoped to .dg-gate-overlay to avoid
   conflicts with existing .dg-gate-* modal classes above.
─────────────────────────────────────────────────────────────── */
.dg-gate-overlay{
  z-index:99999;
  position:fixed;
  inset:0;z-index:9999;
  background:rgba(13,27,62,.78);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.dg-gate-overlay.active{opacity:1;pointer-events:all;}

.dg-gate-card{
  margin-top: 6%;
  background:#fff;border-radius:20px;
  padding:44px 48px;max-width:500px;width:92%;
  position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.28);
  animation:dg-gate-in .35s ease;
}
@keyframes dg-gate-in{
  from{transform:translateY(20px) scale(.97);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}

.dg-gate-close{
  position:absolute;top:16px;right:18px;
  background:none;border:none;cursor:pointer;
  font-size:18px;color:#94a3b8;line-height:1;
  padding:4px 8px;border-radius:6px;
  transition:color .2s,background .2s;
}
.dg-gate-close:hover{color:#0d1b3e;background:#f1f5f9;}

.dg-gate-header{text-align:center;margin-bottom:20px;}

.dg-gate-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--blue,#2563eb);color:#fff;
  font-size:20px;display:flex;
  align-items:center;justify-content:center;
  margin:0 auto 16px;
}

/* Scoped overrides — prevent old .dg-gate-title/.dg-gate-sub rules from applying */
.dg-gate-overlay .dg-gate-title{
  font-size:22px;font-weight:800;
  color:#0d1b3e;letter-spacing:-.5px;
  margin:0 0 8px;
}
.dg-gate-overlay .dg-gate-sub{
  font-size:14px;color:#64748b;
  line-height:1.55;margin:0;
}

.dg-gate-loading{
  display:flex;flex-direction:column;
  align-items:center;gap:12px;
  padding:32px 0;color:#94a3b8;font-size:14px;
}
.dg-gate-spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid #dbeafe;
  border-top-color:var(--blue,#2563eb);
  animation:dg-spin .75s linear infinite;
}

/* HubSpot form overrides inside gate */
#dg-gate-form-container .hs-form fieldset{max-width:none!important;}
#dg-gate-form-container .hs-button{
  width:100%!important;
  background:var(--blue,#2563eb)!important;
  border-color:var(--blue,#2563eb)!important;
  border-radius:10px!important;
  font-weight:700!important;
  padding:13px!important;
  font-size:15px!important;
}

@media(max-width:480px){
  .dg-gate-card{padding:32px 24px;}
  .dg-gate-overlay .dg-gate-title{font-size:19px;}
}

/* ==========================================================================
   smsgt-lexi-ph-page.css
   Page-specific styles for SMSGT — AI-Powered HR Intelligence (Philippines).
   Requires: phrhome.css loaded first.
   ========================================================================== */

/* ── Meet PeoplesHR section ── */
.smsgtlx-section {
  padding: 100px 0;
  background: radial-gradient(ellipse at top right, #1e3a8a 0%, #0d1b3e 55%);
}
.smsgtlx-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.phr-left h2 {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.phr-left h2 span { color: #60a5fa; }
.phr-left p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 32px;
}
.phr-stat-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.phr-stat-val {
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1;
  display: block;
}
.phr-stat-lbl {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  display: block;
}
.phr-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.phr-module-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 22px;
}
.phr-module-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.phr-module-card h4 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.phr-module-card p {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}

/* ── Meet Lexi — Three Cards section ── */
.lexi-intro-section {
  padding: 100px 0;
  background: #fff;
}
.lexi-meet-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
}
.lexi-intro-section .section-center h2 { font-size: 40px; }
.lexi-intro-section .section-center h2 span { color: var(--blue); }
.lexi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}
.lexi-card {
  border-radius: var(--radius);
  padding: 32px 28px;
  border: 1px solid var(--border);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.lexi-card.featured {
  background: linear-gradient(145deg, var(--navy) 0%, #1e3a8a 100%);
  border: none;
}
.lexi-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.lexi-card-eyebrow.cxo { background: rgba(37,99,235,0.12); color: #2563eb; }
.lexi-card-eyebrow.emp { background: var(--bg-card); color: var(--text-muted); }
.lexi-card.featured .lexi-card-eyebrow.cxo { background: rgba(96,165,250,0.15); color: #93c5fd; }

/* Lexi wordmark inside cards */
.lexi-wordmark {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.lexi-wordmark-text {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.5px;
}
.lexi-card.featured .lexi-wordmark-text { color: #fff; }
.lexi-wordmark-x { position: relative; display: inline-block; }
.lexi-wordmark-x::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f59e0b, #10b981, #3b82f6);
  border-radius: 2px;
  opacity: 0.9;
}
.lexi-product-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
}
.lexi-card.featured .lexi-product-name { color: #60a5fa; }
.lexi-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-top: 4px;
}
.lexi-card.featured p { color: rgba(255,255,255,0.65); }

/* Decorative orb */
.lexi-card-orb {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  bottom: -30px;
  right: -30px;
  opacity: 0.12;
}
.lexi-card.featured .lexi-card-orb { background: #60a5fa; opacity: 0.15; }
.lexi-card:not(.featured) .lexi-card-orb { background: var(--blue-light); }

/* ── Why SMSGT section ── */
.smsgt-section {
  padding: 100px 0;
  background: var(--bg-light);
}
.smsgt-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.smsgt-left h2 {
  font-size: 40px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -1.5px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.smsgt-left h2 span { color: var(--blue); }
.smsgt-left > p {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 32px;
}
.smsgt-cred-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.smsgt-cred-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.smsgt-cred-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.smsgt-cred-item h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.smsgt-cred-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.smsgt-right {
  background: linear-gradient(145deg, var(--navy) 0%, #1a2f5e 100%);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  position: sticky;
  top: 100px;
}
.smsgt-right-mark {
  max-width: 50%;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #ffffff);  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.smsgt-right h3 {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.smsgt-right-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
  display: block;
}
.smsgt-right-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 24px;
}
.smsgt-right-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: 28px;
}
.smsgt-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37,99,235,0.25);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 24px;
}
.smsgt-right .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* ── CTA Banner overrides ── */
/* overrides phrhome.css .cta-banner — page uses 0 horizontal padding (padding via .page-wrap) */
.cta-banner {
  padding: 90px 0;
}
.cta-banner h2 {
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
}
.cta-banner > .page-wrap > p {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.cta-note {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* ── Accreditations overrides ── */
/* overrides phrhome.css .accreditations-section */
.accreditations-section {
  padding: 48px 0;
  background: #fff;
  border-top: 1px solid var(--border);
  text-align: center;
}
.accreditations-section .accred-text {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.6;
  font-weight: 400;
}
.accreditations-section .accred-badge {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accreditations-section .accred-badge img {
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter .2s;
}
.accreditations-section .accred-badge img:hover { filter: grayscale(0%); }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .phr-section,
  .lexi-intro-section,
  .smsgt-section { padding: 80px 0; }
  .cta-banner { padding: 72px 0; }
}
@media (max-width: 1024px) {
  .phr-inner { grid-template-columns: 1fr; gap: 48px; }
  .smsgt-inner { grid-template-columns: 1fr; gap: 40px; }
  .smsgt-right { position: static; }
}
@media (max-width: 980px) {
  .lexi-cards { grid-template-columns: 1fr; }
  .phr-right { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .phr-section,
  .lexi-intro-section,
  .smsgt-section { padding: 56px 0; }
  .cta-banner { padding: 52px 0; }
  .cta-banner h2 { font-size: 28px; }
  .lexi-intro-section .section-center h2 { font-size: 26px; }
  .smsgt-right { text-align: center; }
  .smsgt-left h2 { font-size: 28px; letter-spacing: -0.5px; }
}
@media (max-width: 480px) {
  .phr-right { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ROI Calculator
   ========================================================================== */
.roi-section{padding:80px 48px;background:var(--bg-light);}
.roi-wrap{max-width:1200px;margin:0 auto;}
.roi-card{background:#fff;border-radius:var(--radius);box-shadow:0 25px 50px -12px rgba(13,27,62,.18);padding:40px;}

.roi-header{text-align:center;margin-bottom:36px;}
.roi-header-top{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;}
.roi-header-icon{width:40px;height:40px;color:var(--blue);flex-shrink:0;}
.roi-header-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none;}
.roi-header h1{font-size:30px;font-weight:800;color:var(--text-dark);margin:0;letter-spacing:-.5px;}
.roi-sub{color:var(--text-muted);margin:0;font-size:15px;line-height:1.6;}

.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}

.roi-form{display:flex;flex-direction:column;gap:24px;}
.roi-label{display:flex;align-items:center;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px;}
.roi-label-icon{width:16px;height:16px;margin-right:8px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0;}
.roi-input,.roi-select{
  width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:10px;
  font-size:15px;box-sizing:border-box;background:#fff;font-family:inherit;color:var(--text-dark);
  transition:border-color .2s,box-shadow .2s;
}
.roi-input:focus,.roi-select:focus{outline:none;border-color:var(--blue-light);box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.roi-btn{
  width:100%;background:var(--blue);color:#fff;padding:13px 24px;border-radius:10px;
  border:none;font-weight:700;font-size:16px;cursor:pointer;transition:background-color .2s;
  font-family:inherit;
}
.roi-btn:hover{background:#1d4ed8;}

.roi-results-panel{background:var(--bg-light);border-radius:14px;padding:24px;}
.roi-results{display:none;}
.roi-results.roi-visible{display:block;}
.roi-results-title{font-size:20px;font-weight:700;color:var(--text-dark);margin:0 0 16px;}
.roi-savings-banner{
  background:linear-gradient(90deg,#10b981 0%,var(--blue) 100%);color:#fff;
  padding:24px;border-radius:12px;margin-bottom:24px;text-align:center;
}
.roi-savings-label{font-size:14px;opacity:.9;margin:0 0 8px;}
.roi-savings-range{font-size:26px;font-weight:800;margin:0;}
.roi-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.roi-stat-card{background:#fff;padding:16px;border-radius:10px;border:1px solid var(--border);}
.roi-stat-label{font-size:13px;color:var(--text-muted);margin:0 0 4px;}
.roi-stat-value{font-size:20px;font-weight:700;color:#10b981;margin:0;}

.roi-placeholder{text-align:center;color:var(--text-muted);padding:48px 0;}
.roi-placeholder.roi-hidden{display:none;}
.roi-placeholder-icon{width:64px;height:64px;margin:0 auto 16px;opacity:.3;stroke:currentColor;stroke-width:2;fill:none;}

@media(max-width:900px){
  .roi-grid{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:768px){
  .roi-section{padding:48px 20px;}
  .roi-card{padding:24px;}
  .roi-header h1{font-size:24px;}
  .roi-header-top{flex-direction:column;}
}

/* ROI page — supporting sections (explainer, consult CTA, 2-up case studies) */
.roi-explain-section{padding:100px 48px;background:#fff;}
.roi-explain-section .feature-list{max-width:760px;margin:0 auto;}
.roi-consult-section{padding:90px 48px;background:var(--bg-light);text-align:center;}
.roi-cta-center{display:flex;justify-content:center;margin-top:8px;}
.cs-grid--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto;}

@media(max-width:768px){
  .roi-explain-section,.roi-consult-section{padding:56px 20px;}
  .cs-grid--2{grid-template-columns:1fr;}
}

/* ==========================================================
   Core HR product page — feature sections, device mockups,
   accordions (reuses .phr-faq / .phr-faq-item), compare boxes.
   ========================================================== */

/* Hero: two-column split with a device-mockup visual */
.phr-hero__split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;max-width:none;margin:0;padding:0 48px}
.phr-hero__copy{max-width:none}
.phr-hero__title-icon{display:inline-flex;vertical-align:-6px;margin-right:8px;color:var(--phr-blue-600)}
.phr-hero__subhead{font-size:19px;margin:-6px 0 20px;line-height:1.3; color: #FE753E;}
.phr-hero__visual{position:relative;max-width:none;min-height:320px;display:flex;align-items:center;justify-content:center}
.phr-hero__visual .hero-banner-img{max-width:100%;width:100%}

/* Mobile: stack the hero instead of squeezing copy+image into two
   half-width columns. A @media(max-width:960px) override for this
   already existed further up the file, but this later, unconditional
   .phr-hero__split rule has the same specificity and comes after it in
   source order, so it silently won at every width, including mobile —
   re-declaring the stack here (after the rule that was clobbering it)
   is what actually makes it take effect on product-page heroes. */
@media(max-width:960px){
  .phr-hero__split{grid-template-columns:1fr;gap:32px;padding:0 20px}
  .phr-hero__visual{min-height:0}
}

/* Generic abstract device-screen mockup (no real screenshots available) */
.phr-device{background:#fff;border:1px solid var(--phr-border);border-radius:16px;box-shadow:var(--phr-shadow-hover);padding:16px;box-sizing:border-box}
.phr-device--laptop{width:82%}
.phr-device--phone{position:absolute;width:34%;border-radius:20px;box-shadow:var(--phr-shadow-card)}
.phr-hero__visual .phr-device--laptop{transform:rotate(-2deg)}
.phr-hero__visual .phr-device--phone{right:-4%;bottom:-6%;transform:rotate(3deg)}
.phr-device-bar{height:8px;border-radius:4px;background:var(--phr-blue-50);margin-bottom:10px}
.phr-device-bar.w60{width:60%}
.phr-device-bar.w40{width:40%}
.phr-device-row{display:flex;gap:8px;margin-bottom:8px}
.phr-device-pill{height:22px;border-radius:6px;background:var(--phr-blue-50);flex:1}
.phr-device-pill.w40{flex:0 0 40%}
.phr-device-dot{width:9px;height:9px;border-radius:50%;background:var(--phr-blue-500);flex-shrink:0}

/* Numbered feature sections */
.phr-feat-section{padding:88px 0}
.phr-feat-section--alt{background:var(--phr-blue-30)}
.phr-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.phr-feat-grid--rev .phr-feat-visual{order:-1}
.phr-feat-num{width:42px;height:42px;border-radius:11px;background:var(--phr-blue-700);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.phr-feat-title-icon{width:40px;height:40px;object-fit:contain;vertical-align:-10px;margin-right:10px}
.phr-feat-title{font-size:clamp(22px,2.6vw,29px);font-weight:800;color:var(--phr-text-dark);letter-spacing:-.5px;line-height:1.25;margin-bottom:14px}
.phr-feat-scenario{font-size:15px;color:var(--phr-text-mid);line-height:1.65;margin-bottom:12px}
.phr-feat-question{font-size:16px;font-weight:700;color:var(--phr-blue-700);margin-bottom:26px}
.phr-feat-cta{margin-top:26px}
.phr-feat-caption{font-size:13px;font-style:italic;color:var(--phr-text-light);margin-top:14px;line-height:1.6}
.phr-feat-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.phr-feat-visual .phr-device--phone{right:2%;bottom:-8%}
.phr-feat-visual--stack{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;gap:20px}
.phr-feat-visual--stack .hero-banner-img{max-width:100%;margin:0 auto}

.phr-info-card{background:var(--phr-blue-700);color:#fff;border-radius:14px;padding:20px 22px;font-size:14px;line-height:1.65}
.phr-info-card b{font-weight:700}

.phr-feat-list{display:flex;flex-direction:column;gap:14px;margin:20px 0 8px}
.phr-feat-list-item{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--phr-text-mid);line-height:1.55}
.phr-feat-list-item svg{flex-shrink:0;margin-top:2px}
.phr-feat-quotes{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.phr-feat-quote{font-size:14.5px;font-weight:600;color:var(--phr-text-dark);background:#fff;border:1px solid var(--phr-border);border-radius:10px;padding:12px 16px}

/* "Reality vs Now" comparison boxes */
.phr-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.phr-compare-card{border-radius:14px;padding:22px 24px;font-size:14px;line-height:1.65}
.phr-compare-card b{display:block;margin-bottom:8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px}
.phr-compare-card--before{background:var(--phr-blue-50);color:var(--phr-text-mid)}
.phr-compare-card--before b{color:var(--phr-text-light)}
.phr-compare-card--now{background:var(--phr-blue-700);color:#fff}
.phr-compare-card--now b{color:rgba(255,255,255,.75)}

/* Accordion groups reuse .phr-faq / .phr-faq-item; keep them left-aligned in feature sections */
.phr-feat-section .phr-faq{max-width:none;margin:0}

/* Full-width feature sections (match the full-bleed Hero layout) */
.phr-feat-section .phr-container{max-width:none;padding:0 48px}

.phr-feat-accent{color:#E2672E;font-weight:700;font-size:14.5px;margin:22px 0 8px}
.phr-uni-heading{font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--phr-blue-600);text-align:center;margin-bottom:22px}
.phr-uni-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.phr-uni-card{background:var(--phr-white);border:1px solid var(--phr-border);border-radius:var(--phr-radius-lg);padding:28px 18px;text-align:center;box-shadow:var(--phr-shadow-card);transition:transform var(--phr-transition),box-shadow var(--phr-transition),border-color var(--phr-transition)}
.phr-uni-card:hover{transform:translateY(-4px);box-shadow:var(--phr-shadow-hover);border-color:var(--phr-blue-200)}
.phr-uni-card__icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:var(--phr-blue-50);transition:background var(--phr-transition)}
.phr-uni-card:hover .phr-uni-card__icon{background:var(--phr-blue-700)}
.phr-uni-card:hover .phr-uni-card__icon svg path{fill:var(--phr-white)}
.phr-uni-card__icon svg{width:30px;height:30px}
.phr-uni-card__title{font-size:14px;font-weight:800;color:var(--phr-text-dark);margin-bottom:4px;line-height:1.3}
.phr-uni-card__desc{font-size:12.5px;color:var(--phr-text-mid);line-height:1.5}

@media(max-width:960px){
  .phr-feat-grid{grid-template-columns:1fr;gap:36px}
  .phr-feat-grid--rev .phr-feat-visual{order:0}
  .phr-feat-visual{min-height:240px}
}
@media(max-width:640px){
  .phr-feat-section{padding:56px 0}
  .phr-compare{grid-template-columns:1fr}
  .phr-uni-grid{grid-template-columns:1fr}
}

/* TRACKING PAGE: capabilities icon grid */
.trk-caps{padding:100px 48px;background:#fff;}
.trk-caps .section-center{max-width:820px;margin-left:auto;margin-right:auto;margin-bottom:56px;}
.trk-caps-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);row-gap:36px;column-gap:32px;}
.trk-cap-item{display:flex;align-items:center;gap:14px;}
.trk-cap-icon{width:42px;height:42px;object-fit:contain;flex-shrink:0;}
.trk-cap-label{font-size:.95rem;font-weight:700;color:#0d1b3e;line-height:1.3;}
@media(max-width:960px){
  .trk-caps{padding:72px 28px;}
  .trk-caps-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .trk-caps-grid{grid-template-columns:1fr;row-gap:24px;}
}

/* COMPANY PAGE: MILESTONES TIMELINE */
.milestones-section{padding:110px 48px;background:var(--bg-light);}
.milestones-section .section-center{max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:76px;}
.milestones-section .section-center p{font-size:16px;color:var(--text-muted);margin-top:14px;line-height:1.65;}

.milestones-timeline{position:relative;max-width:1020px;margin:0 auto;}
.milestones-timeline::before{
  content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--border) 6%,var(--border) 94%,transparent);
  transform:translateX(-50%);
}

.milestone-item{display:grid;grid-template-columns:1fr 56px 1fr;align-items:start;padding-bottom:52px;}
.milestone-item:last-child{padding-bottom:0;}

.milestone-spacer{grid-column:auto;}

.milestone-axis{display:flex;justify-content:center;padding-top:8px;}
.milestone-dot{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);
  box-shadow:0 0 0 6px var(--bg-light);
  position:relative;z-index:2;
  transition:transform .3s ease,background .3s ease;
}
.milestone-item:hover .milestone-dot{background:var(--blue);transform:scale(1.2);}

.milestone-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 26px;max-width:400px;
  box-shadow:0 2px 10px rgba(13,27,62,0.04);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.milestone-item:hover .milestone-card{transform:translateY(-5px);border-color:var(--blue-light);box-shadow:0 18px 44px rgba(13,27,62,0.1);}

/* Scroll-reveal is opt-in via .js-anim (added by JS once it's actually running), so
   cards stay visible by default if JS is slow, blocked, or errors out. */
.milestones-timeline.js-anim .milestone-card{opacity:0;transform:translateY(28px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,opacity .6s ease,transform .6s ease;}
.milestones-timeline.js-anim .milestone-item.in-view .milestone-card{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .milestones-timeline.js-anim .milestone-card{opacity:1;transform:none;transition:none;}
}

.milestone-card--left{margin-left:auto;text-align:right;}
.milestone-card--right{margin-right:auto;text-align:left;}

.milestone-card--left{margin-left:auto;text-align:right;}
.milestone-card--right{margin-right:auto;text-align:left;}

.milestone-year-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.milestone-card--left .milestone-year-row{justify-content:flex-end;}
.milestone-year{font-size:22px;font-weight:800;color:var(--blue);letter-spacing:-0.5px;line-height:1;}
.milestone-badge{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#fff;background:var(--blue);border-radius:100px;padding:3px 10px;
}
.milestone-text{font-size:14.5px;color:var(--text-body);line-height:1.65;}
.milestone-text strong{color:var(--navy);font-weight:700;}

/* Staggered reveal so cards cascade in rather than popping together */
.milestones-timeline.js-anim .milestone-item:nth-child(1) .milestone-card{transition-delay:0s;}
.milestones-timeline.js-anim .milestone-item:nth-child(2) .milestone-card{transition-delay:.06s;}
.milestones-timeline.js-anim .milestone-item:nth-child(3) .milestone-card{transition-delay:.12s;}
.milestones-timeline.js-anim .milestone-item:nth-child(4) .milestone-card{transition-delay:.18s;}
.milestones-timeline.js-anim .milestone-item:nth-child(5) .milestone-card{transition-delay:.24s;}
.milestones-timeline.js-anim .milestone-item:nth-child(6) .milestone-card{transition-delay:.3s;}
.milestones-timeline.js-anim .milestone-item:nth-child(7) .milestone-card{transition-delay:.36s;}
.milestones-timeline.js-anim .milestone-item:nth-child(8) .milestone-card{transition-delay:.42s;}
.milestones-timeline.js-anim .milestone-item:nth-child(9) .milestone-card{transition-delay:.48s;}
.milestones-timeline.js-anim .milestone-item:nth-child(10) .milestone-card{transition-delay:.54s;}

/* Latest milestone gets a pulsing marker to draw the eye */
@keyframes milestone-pulse{
  0%  { box-shadow:0 0 0 0 rgba(37,99,235,.45),0 0 0 6px var(--bg-light); }
  70% { box-shadow:0 0 0 12px rgba(37,99,235,0),0 0 0 6px var(--bg-light); }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 6px var(--bg-light); }
}
.milestone-item--latest .milestone-dot{background:var(--blue);animation:milestone-pulse 2.4s ease-out infinite;}
.milestone-item--latest .milestone-card{border-color:var(--blue-light);}

@media(max-width:860px){
  .milestones-section{padding:76px 24px;}
  .milestones-section .section-center{margin-bottom:52px;}
  .milestones-timeline::before{left:19px;}
  .milestone-item{grid-template-columns:40px 1fr;column-gap:20px;padding-bottom:36px;}
  .milestone-spacer{display:none;}
  /* grid-row:1 pins both cells to the item's single real row -- without
     it, auto-placement puts "left" cards (card comes before axis in the
     DOM for that variant) into row 1 but pushes the axis into row 2,
     since the placement cursor has already advanced past row 1 by the
     time the axis is placed. "right" cards don't show the bug because
     axis is first in their DOM order. */
  .milestone-axis{grid-column:1;grid-row:1;padding-top:4px;}
  .milestone-card--left,.milestone-card--right{grid-column:2;grid-row:1;margin:0;text-align:left;max-width:100%;}
  .milestone-card--left .milestone-year-row{justify-content:flex-start;}
}
@media(max-width:480px){
  .milestones-section{padding:64px 18px;}
  .milestone-card{padding:18px 20px;}
  .milestone-year{font-size:19px;}
  .milestone-text{font-size:14px;}
}

/* COMPANY PAGE: LEADERSHIP TEAM */
.team-section{padding:100px 48px;background:#fff;}
.team-section .section-center{margin-bottom:56px;}
.team-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;}
.team-card{text-align:center;transition:transform .3s ease;}
.team-card:hover{transform:translateY(-6px);}
.team-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:494/584;background:var(--bg-card);margin-bottom:18px;box-shadow:0 2px 10px rgba(13,27,62,.06);transition:box-shadow .3s ease;}
.team-card:hover .team-photo{box-shadow:0 20px 44px rgba(13,27,62,.14);}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.team-card:hover .team-photo img{transform:scale(1.05);}
.team-name{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:4px;letter-spacing:-0.01em;}
.team-role{font-size:13.5px;color:var(--text-muted);line-height:1.5;}

@media(max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px;}
}
@media(max-width:560px){
  .team-section{padding:64px 20px;}
  .team-grid{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto;gap:32px;}
}

/* CAREERS PAGE: perks grid — 4-column variant of the shared .benefit-cards/.benefit-card component */
.benefit-cards--4{grid-template-columns:repeat(4,1fr);}
.benefit-cards--4 .integration-icon img{width:46px;height:46px;object-fit:contain;}
@media(max-width:900px){
  .benefit-cards--4{grid-template-columns:repeat(2,1fr);max-width:520px;}
}
@media(max-width:560px){
  .benefit-cards--4{grid-template-columns:1fr;max-width:340px;}
}

/* CAREERS PAGE: values — numbered vertical list with connecting line + side image */
.values-section{padding:56px 24px 100px;background:var(--bg-light);}
.values-card{max-width:1200px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 8px 32px rgba(13,27,62,0.06);overflow:hidden;}
.values-header{padding:44px 48px;border-bottom:1px solid var(--border);text-align:center;}
.values-header h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;}

.values-grid{display:grid;grid-template-columns:1fr 300px;gap:56px;padding:48px;align-items:start;}
.values-list{display:flex;flex-direction:column;}
.values-item{display:flex;gap:20px;position:relative;padding-bottom:32px;}
.values-item:last-child{padding-bottom:0;}
.values-item:not(:last-child)::before{content:'';position:absolute;left:19px;top:44px;bottom:-2px;width:1px;background:var(--border);}
.values-num{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:#ede9fe;color:#6d28d9;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;position:relative;z-index:1;
}
.values-body h3{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-0.01em;}
.values-body p{font-size:14.5px;color:var(--text-muted);line-height:1.7;}

.values-img-wrap{display:flex;justify-content:center;}
.values-img{width:100%;max-width:283px;height:auto;border-radius:16px;object-fit:cover;display:block;}

@media(max-width:900px){
  .values-grid{grid-template-columns:1fr;gap:32px;padding:36px 28px;}
  .values-img-wrap{order:-1;}
  .values-img{max-width:220px;margin:0 auto;}
}
@media(max-width:560px){
  .values-section{padding:40px 16px 72px;}
  .values-header{padding:32px 24px;}
}

/* CAREERS PAGE: life-at-PeoplesHR photo carousel — reuses .testimonial-controls/.t-arrow/.t-dots */
.gallery-section{padding:80px 24px 100px;background:#fff;}
.gallery-track-wrap{max-width:1100px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgba(13,27,62,0.12);}
.gallery-track{display:flex;transition:transform .5s ease;}
.gallery-slide{flex:0 0 100%;min-width:0;}
.gallery-slide img{width:100%;aspect-ratio:1256/918;object-fit:cover;display:block;}

@media(max-width:560px){
  .gallery-section{padding:56px 16px 72px;}
}

/* COMMUNITY PAGE: "Why Join" 3-tile grid */
.community-why-section{padding:90px 48px 100px;background:var(--bg-light);}
.community-why-section .section-center{margin-bottom:56px;}
.community-why-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.community-why-card{background:var(--blue);border-radius:20px;padding:40px 32px;box-shadow:0 16px 36px rgba(37,99,235,0.22);transition:transform .3s ease,box-shadow .3s ease;}
.community-why-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(37,99,235,0.3);}
.community-why-card h3{font-size:26px;font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:-0.02em;}
.community-why-card p{font-size:15px;color:rgba(255,255,255,0.9);line-height:1.7;}

@media(max-width:900px){
  .community-why-grid{grid-template-columns:1fr;max-width:420px;}
}
@media(max-width:560px){
  .community-why-section{padding:64px 20px 72px;}
  .community-why-card{padding:32px 26px;}
  .community-why-card h3{font-size:22px;}
}

/* COMMUNITY PAGE: "Join the Community" vertical rotator */
.community-join-section{padding:100px 48px;background:#fff;}
.community-join-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.community-join-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:16px;}
.community-join-copy p{font-size:15.5px;color:var(--text-muted);line-height:1.75;max-width:480px;}

.community-rotator{
  position:relative;height:260px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.community-rotator-track{display:flex;flex-direction:column;gap:8px;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.community-rotator-item{
  font-size:28px;font-weight:800;color:#d1d5db;letter-spacing:-0.02em;
  padding:6px 0;opacity:.5;white-space:nowrap;
  transition:color .4s ease,opacity .4s ease;
}
.community-rotator-item .emoji{margin-left:8px;}
.community-rotator-item.active{color:var(--navy);opacity:1;}

@media(max-width:900px){
  .community-join-grid{grid-template-columns:1fr;gap:32px;text-align:center;}
  .community-join-copy p{margin-left:auto;margin-right:auto;}
  .community-rotator{height:220px;}
  .community-rotator-item{font-size:22px;text-align:center;}
}
@media(max-width:560px){
  .community-join-section{padding:64px 20px;}
  .community-rotator-item{font-size:19px;}
}

/* COMMUNITY PAGE: "Meet our Thought Leaders" horizontal carousel */
.thought-leaders-section{padding:90px 48px 100px;background:linear-gradient(160deg,#eef2f7 0%,#f7f9fc 100%);}
.thought-leaders-section .section-center{text-align:left;max-width:1180px;margin:0 auto 40px;}
.thought-leaders-section .section-center h2{color:#0f2a2e;}

.tl-track-wrap{
  max-width:1180px;margin:0 auto;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tl-track-wrap::-webkit-scrollbar{display:none;}
.tl-track{display:flex;gap:24px;}
.tl-card{
  flex:0 0 580px;scroll-snap-align:start;
  display:flex;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  transition:box-shadow .3s ease,transform .3s ease;
}
.tl-card:hover{box-shadow:0 16px 36px rgba(13,27,62,0.1);transform:translateY(-3px);}
.tl-photo{flex:0 0 42%;}
.tl-photo img{width:100%;height:100%;min-height:180px;object-fit:cover;display:block;}
.tl-info{flex:1;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.tl-name{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-0.01em;}
.tl-title{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:8px;}
.tl-company{font-size:13.5px;font-weight:800;color:var(--navy);margin-bottom:14px;}
.tl-linkedin{width:26px;height:26px;background:#000;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s;flex-shrink:0;}
.tl-linkedin:hover{background:#0a66c2;}
.tl-linkedin svg{width:14px;height:14px;}

@media(max-width:900px){
  .tl-card{flex:0 0 calc(50% - 12px);}
}
@media(max-width:640px){
  .thought-leaders-section{padding:64px 20px 72px;}
  .tl-card{flex:0 0 88%;flex-direction:column;}
  .tl-photo{flex:0 0 auto;height:200px;}
}

/* COMMUNITY PAGE: "Become a Thought Leader" CTA + HubSpot form */
.thought-leader-cta-section{padding:100px 48px;background:#fff;}
.tlc-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:center;}
.tlc-copy h2{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.15;margin-bottom:32px;}
.tlc-img{max-width:320px;width:100%;height:auto;display:block;}

/* Light HubSpot form styling scoped to .hero-form-body (shared card component) */
.hero-form-body .hs-form fieldset{max-width:100% !important;}
.hero-form-body .hs-form .hs-form-field{margin-bottom:16px !important;}
.hero-form-body .hs-form .hs-form-field label{
  display:block !important;font-size:12px !important;font-weight:700 !important;color:var(--navy) !important;
  margin-bottom:6px !important;letter-spacing:.02em !important;
}
.hero-form-body .hs-form input[type="text"],
.hero-form-body .hs-form input[type="email"],
.hero-form-body .hs-form input[type="tel"],
.hero-form-body .hs-form select,
.hero-form-body .hs-form textarea{
  width:100% !important;background:#f8fafc !important;border:1.5px solid var(--border) !important;
  border-radius:10px !important;padding:11px 14px !important;font-size:14px !important;color:var(--navy) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;outline:none !important;
  transition:border-color .2s,background .2s !important;appearance:none !important;
  box-shadow:none !important;-webkit-appearance:none !important;
}
.hero-form-body .hs-form input::placeholder,
.hero-form-body .hs-form textarea::placeholder{color:#94a3b8 !important;}
.hero-form-body .hs-form input:focus,
.hero-form-body .hs-form select:focus,
.hero-form-body .hs-form textarea:focus{border-color:var(--blue) !important;background:#fff !important;}

.hero-form-body .hs-form .form-columns-2 .hs-form-field{width:48% !important;float:left !important;}
.hero-form-body .hs-form .form-columns-2 .hs-form-field:first-child{margin-right:4% !important;}
.hero-form-body .hs-form .form-columns-2::after{content:'';display:table;clear:both;}

.hero-form-body .hs-form .hs-submit .hs-button,
.hero-form-body .hs-form input[type="submit"]{
  width:100% !important;background:var(--blue) !important;color:#fff !important;
  font-size:15px !important;font-weight:700 !important;font-family:'Plus Jakarta Sans',sans-serif !important;
  padding:13px !important;border-radius:100px !important;border:none !important;cursor:pointer !important;
  margin-top:6px !important;transition:background .2s,transform .2s !important;
  box-shadow:0 6px 20px rgba(37,99,235,0.25) !important;
}
.hero-form-body .hs-form .hs-submit .hs-button:hover,
.hero-form-body .hs-form input[type="submit"]:hover{background:#1d4ed8 !important;transform:translateY(-1px) !important;}

.hero-form-body .hs-form .hs-error-msgs label{
  color:#dc2626 !important;font-size:11px !important;text-transform:none !important;
  letter-spacing:0 !important;font-weight:500 !important;
}
.hero-form-body .hs-form .hs_recaptcha,
.hero-form-body .hubspot-link__container{display:none !important;}

@media(max-width:900px){
  .tlc-grid{grid-template-columns:1fr;gap:40px;}
  .tlc-copy{text-align:center;}
  .tlc-img{margin:0 auto;}
  .hero-form-card{max-width:440px;margin:0 auto;}
}
@media(max-width:560px){
  .thought-leader-cta-section{padding:64px 20px;}
  .tlc-copy h2{font-size:1.7rem;}
}

/* PARTNER PAGE: "Your Journey with PeoplesHR" — badge + numbered steps + image */
.partner-journey-section{padding:100px 48px;background:#fff;}
.pj-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:start;}
.pj-badge{display:inline-block;background:#f1efec;color:#ea580c;font-size:12.5px;font-weight:700;padding:6px 16px;border-radius:100px;margin-bottom:20px;}
.pj-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:40px;}
.pj-img{width:100%;height:auto;border-radius:16px;box-shadow:0 20px 50px rgba(13,27,62,0.14);display:block;}

@media(max-width:900px){
  .pj-grid{grid-template-columns:1fr;gap:36px;}
  .pj-img{max-width:420px;margin:0 auto;}
}
@media(max-width:560px){
  .partner-journey-section{padding:64px 20px;}
}

/* PARTNER PAGE: "Why Partner with PeoplesHR?" — image + simple feature list */
.partner-why-section{padding:100px 48px;background:var(--bg-light);}
.pw-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center;}
.pw-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:36px;}
.pw-feature{margin-bottom:28px;}
.pw-feature:last-child{margin-bottom:0;}
.pw-feature h3{font-size:16.5px;font-weight:800;color:var(--navy);margin-bottom:8px;letter-spacing:-0.01em;}
.pw-feature p{font-size:14.5px;color:var(--text-muted);line-height:1.7;}

@media(max-width:900px){
  .pw-grid{grid-template-columns:1fr;gap:36px;}
  .pw-grid .pj-img{max-width:420px;margin:0 auto;}
}
@media(max-width:560px){
  .partner-why-section{padding:64px 20px;}
}

/* PARTNER PAGE: Partner Conference — header + full-bleed multi-image gallery */
.partner-conf-header{padding:64px 48px 40px;background:var(--bg-light);}
.partner-conf-header .pc-inner{max-width:1180px;margin:0 auto;}
.partner-conf-header h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:16px;}
.partner-conf-header p{font-size:15px;color:var(--text-muted);line-height:1.75;max-width:820px;}

.partner-conf-gallery{padding:0 0 64px;background:#fff;}
.pcg-track-wrap{
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:0 48px;
}
.pcg-track-wrap::-webkit-scrollbar{display:none;}
.pcg-track{display:flex;gap:16px;}
.pcg-item{flex:0 0 340px;scroll-snap-align:start;}
.pcg-item img{width:100%;aspect-ratio:896/778;object-fit:cover;border-radius:12px;display:block;}

@media(max-width:640px){
  .partner-conf-header{padding:48px 20px 32px;}
  .pcg-track-wrap{padding:0 20px;}
  .pcg-item{flex:0 0 78%;}
}

/* REGIONS PAGE: 7-tile hover-reveal preview grid linking to each region */
.regions-preview-section{padding:90px 48px;background:#fff;}
.rp-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
.rp-card{position:relative;grid-column:span 3;grid-auto-rows:380px;height:380px;border-radius:12px;overflow:hidden;}
.rp-card:nth-child(n+5){grid-column:span 4;}
.rp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.rp-card:hover .rp-img{transform:scale(1.06);}
.rp-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:linear-gradient(180deg,rgba(13,27,62,0) 45%,rgba(13,27,62,.78) 100%);}
.rp-title{color:#fff;font-size:1.15rem;font-weight:800;letter-spacing:-0.01em;margin:0;}
.rp-txt{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease;margin-top:0;}
.rp-card:hover .rp-txt,.rp-card:focus-within .rp-txt{max-height:160px;opacity:1;margin-top:10px;}
.rp-txt p{color:rgba(255,255,255,.88);font-size:13.5px;line-height:1.6;margin:0 0 12px;}
.rp-btn{display:inline-block;background:var(--blue,#2563eb);color:#fff;font-size:13px;font-weight:700;padding:9px 18px;border-radius:8px;text-decoration:none;}
.rp-btn:hover{opacity:.9;}

@media(max-width:900px){
  .regions-preview-section{padding:64px 24px;}
  .rp-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .rp-card,.rp-card:nth-child(n+5){grid-column:span 1;height:300px;}
}
@media(max-width:560px){
  .regions-preview-section{padding:48px 20px;}
  .rp-grid{grid-template-columns:1fr;}
  .rp-card,.rp-card:nth-child(n+5){height:260px;}
  .rp-txt{max-height:none;opacity:1;margin-top:10px;overflow:visible;}
}

/* REGION-SINGAPORE PAGE: hero form card has no header bar, so give the body more top breathing room */
.hero-wrap .hero-form-body{padding-top:40px;}

/* REGION-SINGAPORE PAGE: "We let you focus on the outcome" impact stats strip */
.impact-stats-section{padding:64px 48px;background:var(--bg-light);}
.impact-stats-heading{font-size:1.15rem;font-weight:800;color:var(--navy);text-align:center;max-width:820px;margin:0 auto 48px;line-height:1.5;}
.impact-stats-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.impact-stat{padding-bottom:20px;border-bottom:2px solid #ececec;}
.impact-stat-num{font-size:42px;font-weight:700;color:var(--blue);letter-spacing:-1px;line-height:1;margin-bottom:10px;}
.impact-stat-text{font-size:14.5px;color:var(--text-muted);line-height:1.5;}

@media(max-width:900px){
  .impact-stats-section{padding:56px 28px;}
  .impact-stats-grid{grid-template-columns:repeat(2,1fr);gap:28px 24px;}
}
@media(max-width:560px){
  .impact-stats-section{padding:48px 20px;}
  .impact-stats-heading{font-size:1.05rem;margin-bottom:36px;}
  .impact-stats-grid{grid-template-columns:1fr;gap:24px;}
  .impact-stat-num{font-size:36px;}
}

/* REGION-SINGAPORE PAGE: G2 review-site badges strip */
.g2-badges-section{padding:80px 48px;background:#fff;text-align:center;}
.g2-badges-section h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;max-width:900px;margin:0 auto 18px;line-height:1.3;}
.g2-badges-section p{font-size:15.5px;color:var(--text-muted);max-width:720px;margin:0 auto 48px;line-height:1.6;}
.g2-badges-row{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px;}
.g2-badge-img{width:130px;height:auto;flex:0 0 auto;}

@media(max-width:900px){
  .g2-badges-section{padding:56px 24px;}
  .g2-badge-img{width:108px;}
}
@media(max-width:560px){
  .g2-badges-section{padding:44px 20px;}
  .g2-badges-section h2{font-size:1.5rem;}
  .g2-badges-row{gap:10px;}
  .g2-badge-img{width:76px;}
}

/* REGION-SINGAPORE PAGE: eBook download CTA banner */
.ebook-cta-section{background:linear-gradient(135deg,#eafbff 0%,#e5f4ff 100%);padding:90px 48px;overflow:hidden;}
.ebook-cta-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 560px;gap:48px;align-items:center;}
.ebook-cta-copy h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.28;margin-bottom:18px;}
.ebook-cta-copy h2 em{font-style:normal;color:#66ccff;}
.ebook-cta-copy p{font-size:15.5px;color:var(--text-muted);line-height:1.75;max-width:480px;margin-bottom:32px;}
.ebook-cta-btn{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--navy);font-weight:700;font-size:15px;padding:14px 30px 14px 24px;border-radius:100px;text-decoration:none;box-shadow:0 12px 32px rgba(13,27,62,0.1);transition:transform .2s ease,box-shadow .2s ease;}
.ebook-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(13,27,62,0.14);}
.ebook-cta-btn svg{flex-shrink:0;color:var(--navy);}
.ebook-cta-img{width:100%;height:auto;display:block;}

@media(max-width:900px){
  .ebook-cta-section{padding:64px 28px;}
  .ebook-cta-grid{grid-template-columns:1fr;gap:36px;text-align:center;}
  .ebook-cta-copy p{margin-left:auto;margin-right:auto;}
  .ebook-cta-img{max-width:420px;margin:0 auto;}
}
@media(max-width:560px){
  .ebook-cta-section{padding:48px 20px;}
}

/* REGION-SINGAPORE PAGE: "Why PeoplesHR?" numbered list + phone mockup card */
.why-phr-section{background:var(--bg-light);padding:64px 48px 80px;}
.why-phr-card{max-width:1180px;margin:0 auto;background:#fff;border-radius:30px;box-shadow:0 14px 55px rgba(208,202,239,0.3);padding-top:40px;overflow:hidden;position:relative;}
.why-phr-card h2{font-size:2.1rem;font-weight:800;color:var(--navy);text-align:center;margin-bottom:24px;}
.why-phr-arrow{position:absolute;top:70px;right:270px;width:60px;height:auto;opacity:.9;}
.why-phr-divider{border-top:1px solid rgba(0,0,0,0.07);}
.why-phr-body{display:flex;align-items:flex-end;}
.why-phr-list-col{flex:0 0 57%;padding:25px 20px 25px 70px;}
.why-phr-img-col{flex:1;display:flex;align-items:flex-end;justify-content:center;}
.why-phr-img{width:100%;max-width:420px;height:auto;display:block;}

.why-phr-list{list-style:none;margin:0;padding:0;}
.why-phr-list-item{display:flex;gap:20px;position:relative;padding-bottom:25px;}
.why-phr-list-item:not(:last-child)::after{content:'';position:absolute;left:19px;top:40px;bottom:0;width:1px;background:#e5e0f7;}
.why-phr-num{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#e8e4fb;color:#8777e0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;position:relative;z-index:1;}
.why-phr-list-item:last-child .why-phr-num{background:#8777e0;color:#fff;}
.why-phr-item-title{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.why-phr-item-text{font-size:14.5px;color:var(--text-muted);line-height:1.6;}

@media(max-width:1024px){
  .why-phr-arrow{display:none;}
  .why-phr-body{flex-direction:column-reverse;}
  .why-phr-list-col{flex:0 0 auto;width:100%;padding:25px 32px;}
  .why-phr-img-col{width:100%;}
  .why-phr-img{border-radius:0;}
}
@media(max-width:560px){
  .why-phr-section{padding:48px 20px 56px;}
  .why-phr-card h2{font-size:1.6rem;}
  .why-phr-list-col{padding:20px 20px;}
}

/* REGION-SINGAPORE PAGE: mobile app promo — checklist + App/Play store pill buttons */
.mobileapp-cta-section{background:var(--bg-light);padding:80px 48px;}
.mac-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:center;}
.mac-copy h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.25;margin-bottom:18px;}
.mac-copy>p{font-size:15.5px;color:var(--text-muted);line-height:1.7;max-width:480px;margin-bottom:28px;}
.mac-checklist{list-style:none;margin:0 0 32px;padding:0;}
.mac-checklist li{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:15px;color:var(--text-body);}
.mac-check-ic{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#eaf7ee;color:#22c55e;display:flex;align-items:center;justify-content:center;}
.mac-store-btns{display:flex;border-radius:100px;overflow:hidden;width:max-content;box-shadow:0 8px 24px rgba(13,27,62,.1);}
.mac-store-btn{display:flex;align-items:center;gap:9px;padding:13px 24px;font-size:13px;font-weight:700;letter-spacing:.03em;color:#fff;text-decoration:none;}
.mac-store-btn--apple{background:#f5820a;}
.mac-store-btn--google{background:var(--blue);}
.mac-store-btn:hover{opacity:.92;}
.mac-img{width:100%;height:auto;display:block;}

/* ═══════════════════════════════════════════════════════════════
   EBOOK LANDING PAGE (Top 8 Trends to Transform Your Workforce)
═══════════════════════════════════════════════════════════════ */
.ebk-discover-section{padding:88px 48px;background:#fff;}
.ebk-discover-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.ebk-discover-card{background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;}
.ebk-discover-icon{width:46px;height:46px;object-fit:contain;margin-bottom:18px;}
.ebk-discover-card h3{font-size:1.05rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin-bottom:8px;}
.ebk-discover-card p{font-size:14.5px;color:var(--text-muted);line-height:1.65;margin:0;}

.ebk-transition{max-width:760px;margin:0 auto;padding:0 20px 56px;text-align:center;}
.ebk-transition p{font-size:1.05rem;color:var(--text-body);line-height:1.7;margin:0 0 28px;}
.ebk-transition p em{font-style:normal;color:var(--blue);font-weight:700;}
.ebk-transition-divider{height:1px;background:var(--border);max-width:1180px;margin:0 auto;}

.ebk-whatsnew-section{background:var(--bg-light);padding:88px 48px;}
.ebk-whatsnew-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:460px 1fr;gap:56px;align-items:center;}
.ebk-whatsnew-img{width:100%;height:auto;border-radius:var(--radius);display:block;box-shadow:0 20px 50px rgba(13,27,62,.1);}
.ebk-whatsnew-copy h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.25;margin-bottom:18px;}
.ebk-whatsnew-copy h2 em{font-style:normal;color:var(--blue);}
.ebk-whatsnew-copy>p{font-size:15.5px;color:var(--text-muted);line-height:1.7;max-width:480px;margin-bottom:28px;}

@media(max-width:1024px){
  .ebk-discover-section{padding:64px 28px;}
  .ebk-discover-grid{grid-template-columns:repeat(2,1fr);}
  .ebk-whatsnew-section{padding:64px 28px;}
  .ebk-whatsnew-grid{grid-template-columns:1fr;gap:36px;}
  .ebk-whatsnew-img{max-width:460px;margin:0 auto;}
}
@media(max-width:560px){
  .ebk-discover-section{padding:48px 20px;}
  .ebk-discover-grid{grid-template-columns:1fr;gap:20px;}
  .ebk-whatsnew-section{padding:48px 20px;}
}

@media(max-width:900px){
  .mobileapp-cta-section{padding:56px 28px;}
  .mac-grid{grid-template-columns:1fr;gap:36px;text-align:center;}
  .mac-copy>p{margin-left:auto;margin-right:auto;}
  .mac-checklist li{justify-content:center;}
  .mac-store-btns{margin:0 auto;}
  .mac-img{max-width:340px;margin:0 auto;}
}
@media(max-width:560px){
  .mobileapp-cta-section{padding:48px 20px;}
}

/* INDONESIA PAGE: centered hero — badge + heading + subtext above a WhatsApp lead form card */
.hero-indo-section{
  position:relative;overflow:hidden;text-align:center;
  padding:80px 48px 96px;
  background:linear-gradient(160deg,#fff 0%,#eaf4ff 55%,#dce9fb 100%);
}
.hero-indo-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(37,99,235,.07) 0px,rgba(37,99,235,.07) 1px,transparent 1px,transparent 7px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,0) 85%);
}
.hero-indo-badge{position:relative;display:inline-block;background:linear-gradient(90deg,#f5820a,#fb923c);color:#fff;font-size:13.5px;font-weight:700;padding:11px 26px;border-radius:100px;margin-bottom:28px;box-shadow:0 8px 20px rgba(245,130,10,.25);}
.hero-indo-section h1{position:relative;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.25;max-width:920px;margin:0 auto 22px;}
.hero-indo-sub{position:relative;font-size:15.5px;color:var(--text-muted);max-width:760px;margin:0 auto 44px;line-height:1.75;}
.hero-indo-form-card{position:relative;max-width:560px;margin:0 auto;background:linear-gradient(160deg,#fff 0%,#d7f0e8 100%);border-radius:24px;padding:44px;box-shadow:0 24px 64px rgba(13,27,62,.12);text-align:left;}

@media(max-width:640px){
  .hero-indo-section{padding:56px 20px 64px;}
  .hero-indo-form-card{padding:28px 24px;border-radius:20px;}
  .hero-indo-badge{font-size:12.5px;padding:9px 18px;}
}

/* INDONESIA PAGE: static "trusted by" logo strip */
.indo-trust-section{padding:56px 48px;background:#fff;text-align:center;}
.indo-trust-heading{font-size:14px;font-weight:700;color:var(--text-muted);margin-bottom:36px;}
.indo-trust-logos{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;}
.indo-trust-logos img{max-height:66px;width:auto;object-fit:contain;}

@media(max-width:640px){
  .indo-trust-section{padding:40px 20px;}
  .indo-trust-logos{gap:28px;}
  .indo-trust-logos img{max-height:48px;}
}

/* INDONESIA PAGE: "Mengapa tim HR mempercayai PeoplesHR" checklist + image */
.why-team-section{padding:90px 48px;background:#fff;}
.why-team-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 560px;gap:64px;align-items:center;}
.why-team-copy h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.3;margin-bottom:32px;}
.why-team-list{list-style:none;margin:0;padding:0;}
.why-team-item{display:flex;align-items:flex-start;gap:16px;padding:12px 0;font-size:15px;color:var(--text-muted);line-height:1.6;}
.why-team-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#e8e4fb;color:#8777e0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.why-team-img{width:100%;height:auto;display:block;}

@media(max-width:900px){
  .why-team-section{padding:64px 24px;}
  .why-team-grid{grid-template-columns:1fr;gap:36px;}
  .why-team-img{max-width:480px;margin:0 auto;}
}
@media(max-width:560px){
  .why-team-section{padding:48px 20px;}
}

/* INDONESIA PAGE: dark sticky-image feature sections (reused 5x) */
.feature-sticky-section{background:linear-gradient(135deg,#0d1b3e 0%,#132a5e 100%);padding:80px 48px;}
.feature-sticky-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 560px;gap:64px;align-items:stretch;}
.feature-sticky-copy h3{color:#fff;font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;line-height:1.3;margin-bottom:20px;}
.feature-sticky-divider{border-top:1px solid rgba(255,255,255,.2);max-width:520px;margin-bottom:32px;}
.feature-sticky-img-mobile{display:none;width:100%;height:auto;border-radius:16px;margin-bottom:28px;}
.feature-sticky-eyebrow{color:#fb923c;font-weight:700;font-size:14.5px;margin:32px 0 16px;}
.feature-sticky-copy>.feature-sticky-eyebrow:first-of-type{margin-top:0;}
.feature-sticky-lead{color:rgba(255,255,255,.75);font-size:14.5px;line-height:1.7;margin-bottom:8px;}
.feature-sticky-list{list-style:none;margin:0;padding:0;}
.feature-sticky-item{display:flex;align-items:flex-start;gap:14px;padding:10px 0;font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.65;}
.feature-sticky-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:rgba(135,119,224,.25);color:#a78bfa;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.feature-sticky-visual{position:relative;}
.feature-sticky-img-wrap{position:sticky;top:100px;}
.feature-sticky-img-wrap img{width:100%;height:auto;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.3);display:block;}

@media(max-width:900px){
  .feature-sticky-section{padding:56px 24px;}
  .feature-sticky-grid{grid-template-columns:1fr;gap:0;}
  .feature-sticky-visual{display:none;}
  .feature-sticky-img-mobile{display:block;}
}
@media(max-width:560px){
  .feature-sticky-section{padding:48px 20px;}
}

/* INDONESIA PAGE: light (white bg, image-left) variant of the sticky feature section */
.feature-sticky-section--light{background:#fff;}
.feature-sticky-section--light .feature-sticky-grid{grid-template-columns:520px 1fr;}
.feature-sticky-section--light .feature-sticky-copy h2{color:var(--navy);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;line-height:1.3;margin-bottom:10px;}
.feature-sticky-section--light .feature-sticky-subtitle{color:var(--text-muted);font-size:16px;font-weight:600;margin-bottom:32px;}
.feature-sticky-section--light .feature-sticky-item{color:var(--text-body);}
.feature-sticky-section--light .feature-sticky-ic{background:#e8e4fb;color:#8777e0;}
.feature-sticky-section--light .feature-sticky-img-wrap img{box-shadow:0 24px 64px rgba(13,27,62,.12);}
.feature-sticky-badge-label{color:#ea580c;font-weight:700;font-size:13.5px;margin-bottom:10px;}
.feature-sticky-subtitle-strong{color:var(--navy);font-size:1.15rem;font-weight:800;line-height:1.4;margin-bottom:32px;}

@media(max-width:900px){
  .feature-sticky-section--light .feature-sticky-grid{grid-template-columns:1fr;}
}

/* INDONESIA PAGE: Lexi AI chat-bubble section, sticky heading+image on the right */
.lexi-section{background:#fff;padding:90px 48px;}
.lexi-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:stretch;}
.lexi-messages{display:flex;flex-direction:column;gap:16px;}
.lexi-msg-row{display:flex;align-items:center;gap:12px;}
.lexi-avatar{width:34px;height:34px;border-radius:50%;background:#e5f4fb;color:#0ea5e9;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lexi-avatar svg{width:16px;height:16px;}
.lexi-bubble{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(13,27,62,.08);padding:14px 20px;font-size:13.5px;color:var(--text-body);line-height:1.6;max-width:400px;}
.lexi-msg-row.lexi-in-a{margin-left:60px;}
.lexi-msg-row.lexi-in-b{margin-left:110px;}
.lexi-msg-row.lexi-no-avatar{margin-left:90px;}
.lexi-msg-row.lexi-no-avatar-b{margin-left:130px;}
.lexi-sticky-col{position:relative;}
.lexi-sticky-inner{position:sticky;top:100px;}
.lexi-eyebrow{color:var(--blue);font-weight:700;font-size:14.5px;margin-bottom:10px;}
.lexi-sticky-inner h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;color:var(--navy);line-height:1.3;margin-bottom:28px;}
.lexi-sticky-inner img{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;}

@media(max-width:900px){
  .lexi-section{padding:56px 24px;}
  .lexi-grid{grid-template-columns:1fr;gap:36px;}
  .lexi-msg-row.lexi-in-a,.lexi-msg-row.lexi-in-b,.lexi-msg-row.lexi-no-avatar,.lexi-msg-row.lexi-no-avatar-b{margin-left:0;}
  .lexi-bubble{max-width:100%;}
  .lexi-sticky-col{order:-1;}
  .lexi-sticky-inner{position:static;}
}
@media(max-width:560px){
  .lexi-section{padding:48px 20px;}
}

/* INDONESIA PAGE: "Manual vs. PeoplesHR" comparison table */
.compare-section{background:var(--bg-light);padding:90px 48px;}
.compare-section h2{text-align:center;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;max-width:820px;margin:0 auto 56px;line-height:1.3;}
.compare-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start;}
.compare-col{padding:0 12px;}
.compare-col--highlight{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(13,27,62,.08);padding:32px 28px;}
.compare-col-label{display:block;width:fit-content;margin:0 auto 32px;background:rgba(13,27,62,.05);color:var(--navy);font-weight:700;font-size:14px;padding:8px 20px;border-radius:100px;text-align:center;}
.compare-list{list-style:none;margin:0;padding:0;}
.compare-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:14.5px;color:var(--text-body);line-height:1.6;}
.compare-item svg{flex-shrink:0;margin-top:3px;}
.compare-col--feature .compare-item{color:var(--navy);font-weight:600;}
.compare-col--feature .compare-item svg{color:var(--navy);}
.compare-col--manual .compare-item{color:var(--text-muted);}
.compare-col--manual .compare-item svg{color:#94a3b8;}
.compare-col--highlight .compare-item svg{color:var(--blue);}

@media(max-width:900px){
  .compare-section{padding:64px 24px;}
  .compare-grid{grid-template-columns:1fr;gap:32px;}
  .compare-col{padding:0;}
}
@media(max-width:560px){
  .compare-section{padding:48px 20px;}
}

/* INDONESIA PAGE: client quote cards */
.quotes-section{background:#fff;padding:80px 48px;}
.quotes-section h2{text-align:center;font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;max-width:900px;margin:0 auto 48px;line-height:1.3;}
.quotes-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.quote-card{background:var(--bg-light);border-radius:16px;padding:36px 32px;text-align:center;}
.quote-card p{font-style:italic;font-size:15px;color:var(--text-body);line-height:1.75;margin-bottom:28px;}
.quote-card img{max-height:56px;width:auto;margin:0 auto;display:block;}

@media(max-width:900px){
  .quotes-section{padding:56px 24px;}
  .quotes-grid{grid-template-columns:1fr;gap:24px;}
}
@media(max-width:560px){
  .quotes-section{padding:48px 20px;}
}

/* INDONESIA PAGE: final CTA banner */
.final-cta-section{background:#fff;padding:80px 48px 96px;text-align:center;}
.final-cta-section h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:16px;}
.final-cta-section p{font-size:15px;color:var(--text-muted);max-width:640px;margin:0 auto 32px;line-height:1.7;}
.final-cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.final-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:100px;font-weight:700;font-size:14.5px;text-decoration:none;}
.final-cta-btn--blue{background:var(--blue);color:#fff;}
.final-cta-btn--blue:hover{background:#1d4ed8;}
.final-cta-btn--whatsapp{background:#22c55e;color:#0d1b3e;}
.final-cta-btn--whatsapp:hover{opacity:.9;}

@media(max-width:560px){
  .final-cta-section{padding:56px 20px 64px;}
  .final-cta-btns{flex-direction:column;align-items:stretch;}
}

/* INDONESIA PAGE: sticky WhatsApp floating button */
.whatsapp-float{position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.25);z-index:999;transition:transform .2s ease;}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:29px;height:29px;color:#fff;}

@media(max-width:560px){
  .whatsapp-float{bottom:16px;right:16px;width:52px;height:52px;}
  .whatsapp-float svg{width:26px;height:26px;}
}

/* MIDDLE-EAST PAGE: case study + video spotlight (Brandix) */
.cs-spotlight-section{background:#fff;padding:80px 64px;}
.cs-spotlight-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:460px 1fr;gap:64px;align-items:start;}
.cs-spotlight-imgwrap{position:relative;}
.cs-spotlight-cover{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 60px rgba(13,27,62,.14));}
.cs-spotlight-video-wrap{margin:28px 0 24px;}
.cs-spotlight-video{position:relative;display:block;border-radius:14px;overflow:hidden;}
.cs-spotlight-video-img{width:100%;height:auto;display:block;}
.cs-spotlight-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--blue);box-shadow:0 8px 28px rgba(0,0,0,.25);transition:transform .2s ease;}
.cs-spotlight-video:hover .cs-spotlight-play{transform:translate(-50%,-50%) scale(1.08);}

@media(max-width:900px){
  .cs-spotlight-section{padding:56px 24px;}
  .cs-spotlight-grid{grid-template-columns:1fr;gap:28px;}
  .cs-spotlight-imgwrap{order:1;max-width:320px;margin:0 auto;}
  .cs-spotlight-copy{order:2;}
}

/* MIDDLE-EAST PAGE: video popup modal (case study video) */
.video-modal-overlay{position:fixed;inset:0;z-index:99999;background:rgba(13,27,62,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:24px;}
.video-modal-overlay.active{opacity:1;pointer-events:all;}
.video-modal-box{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.4);animation:video-modal-in .3s ease;}
@keyframes video-modal-in{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
.video-modal-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-modal-close{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.55);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.video-modal-close:hover{background:rgba(0,0,0,.75);}

@media(max-width:600px){
  .video-modal-close{top:8px;right:8px;width:32px;height:32px;font-size:16px;}
}

/* LEGAL PAGES: shared title banner + prose body (Privacy Policy, Terms of Use, Cookie Policy, Legal) */
.legal-hero{background:var(--bg-light);padding:72px 24px 48px;text-align:center;border-bottom:1px solid var(--border);}
.legal-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin:0;}

.legal-body{max-width:820px;margin:0 auto;padding:64px 24px 96px;}
.legal-body h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;font-weight:800;color:var(--navy);margin:40px 0 16px;letter-spacing:-0.01em;}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin:28px 0 10px;}
.legal-body p{font-size:15px;line-height:1.8;color:var(--text-body);margin:0 0 16px;}
.legal-body ul{margin:0 0 16px;padding-left:22px;}
.legal-body li{font-size:15px;line-height:1.8;color:var(--text-body);margin-bottom:8px;}
.legal-body a{color:var(--blue);text-decoration:underline;}
.legal-body strong{color:var(--navy);}
.legal-updated{font-size:13px;color:var(--text-muted);font-style:italic;margin-top:32px;}

@media(max-width:600px){
  .legal-hero{padding:56px 20px 36px;}
  .legal-body{padding:48px 20px 72px;}
}

/* LEGAL PAGE: Agreements & Policies download list (reuses .phr-faq / .phr-faq-item accordion) */
.legal-body h2.legal-page-title{text-align:center;}
.legal-doc-group{margin-bottom:32px;}
.legal-doc-group:last-child{margin-bottom:0;}
.legal-doc-group h3{margin:0 0 4px;}
.legal-doc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);}
.legal-doc-row:last-child{border-bottom:none;}
.legal-doc-title{font-size:14.5px;color:var(--text-body);}
.legal-body .legal-doc-download{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;font-size:13.5px;text-decoration:none;flex-shrink:0;white-space:nowrap;}
.legal-body .legal-doc-download:hover{text-decoration:underline;}
.legal-doc-download svg{flex-shrink:0;}

@media(max-width:560px){
  .legal-doc-row{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* TRUST PORTAL PAGE: hero eyebrow + certification badges grid */
.trust-hero-eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.trust-badges-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:480px;}
.trust-badge-box{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;min-height:110px;box-shadow:0 4px 16px rgba(13,27,62,.05);}
.trust-badge-box img,.trust-badge-box svg{max-width:100%;max-height:64px;width:auto;height:auto;}

@media(max-width:560px){
  .trust-badges-grid{max-width:360px;gap:14px;}
  .trust-badge-box{padding:14px;min-height:88px;}
  .trust-badge-box img,.trust-badge-box svg{max-height:48px;}
}

/* TRUST PORTAL PAGE: Overview section with per-category accordions */
.trust-overview-section{background:#eef2fc;padding:72px 48px;}
.trust-overview-section h2{max-width:1100px;margin:0 auto 36px;font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;}
.trust-cat{max-width:1100px;margin:0 auto 48px;}
.trust-cat:last-child{margin-bottom:0;}
.trust-cat-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.trust-cat-heading img{width:34px;height:34px;flex-shrink:0;}
.trust-cat-heading h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.3rem;font-weight:800;color:var(--navy);margin:0;}

.trust-acc-item{border-bottom:1px solid rgba(13,27,62,.12);}
.trust-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;text-align:left;padding:22px 0;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);cursor:pointer;}
.trust-acc-trigger svg{flex-shrink:0;transition:transform .25s ease;color:var(--navy);}
.trust-acc-item--open .trust-acc-trigger svg{transform:rotate(180deg);}
.trust-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.trust-acc-body-inner{padding:0 0 24px;font-size:15px;line-height:1.8;color:var(--text-body);max-width:900px;}

@media(max-width:600px){
  .trust-overview-section{padding:48px 20px;}
  .trust-overview-section h2{font-size:1.6rem;margin-bottom:28px;}
  .trust-cat{margin-bottom:36px;}
  .trust-acc-trigger{font-size:.95rem;padding:18px 0;}
}

/* TRUST PORTAL PAGE: Product Security section (icon heading + intro/image, then accordion) */
.trust-feature-section{background:#fff;padding:72px 48px;}
.trust-feature-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.trust-feature-copy .trust-cat-heading{margin-bottom:20px;}
.trust-feature-copy h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin:0 0 16px;}
.trust-feature-copy p{font-size:15px;line-height:1.8;color:var(--text-body);margin:0 0 16px;}
.trust-feature-copy p:last-child{margin-bottom:0;}
.trust-feature-img{width:100%;height:auto;border-radius:16px;display:block;}
.trust-feature-acc{max-width:1100px;margin:56px auto 0;}
.trust-acc-body-inner ul{margin:14px 0 0;padding-left:22px;}
.trust-acc-body-inner li{margin-bottom:8px;}
.trust-acc-body-inner strong{color:var(--navy);}

@media(max-width:900px){
  .trust-feature-grid{grid-template-columns:1fr;gap:32px;}
  .trust-feature-img{order:-1;max-width:480px;margin:0 auto;}
}
@media(max-width:600px){
  .trust-feature-section{padding:48px 20px;}
  .trust-feature-acc{margin-top:36px;}
}

/* TRUST PORTAL PAGE: cloud model comparison table */
.trust-table-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:#fff;}
.trust-table{width:100%;min-width:920px;border-collapse:collapse;font-size:13.5px;}
.trust-table > thead > tr > th{background:var(--bg-light);color:var(--navy);font-weight:700;text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap;}
.trust-table > tbody > tr > td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-body);vertical-align:top;line-height:1.65;}
.trust-table > tbody > tr:last-child > td{border-bottom:none;}
.trust-table > tbody > tr:nth-child(even){background:rgba(37,99,235,.03);}
.trust-table > tbody > tr > td:first-child{font-weight:700;color:var(--navy);white-space:nowrap;}
.trust-table > tbody > tr > td:nth-child(3),
.trust-table > tbody > tr > td:nth-child(4),
.trust-table > tbody > tr > td:nth-child(5){white-space:nowrap;}
.trust-table td ul{margin:8px 0 0;padding-left:18px;}
.trust-table td li{margin-bottom:6px;}

/* nested backup-schedule sub-table inside a cell */
.trust-table td table{width:100%;margin-top:10px;border-collapse:collapse;font-size:12.5px;}
.trust-table td table th,
.trust-table td table td{padding:6px 8px;border:1px solid var(--border);white-space:normal;font-weight:400;color:var(--text-body);}
.trust-table td table th{background:#f1f5f9;font-weight:700;color:var(--navy);}

@media(max-width:600px){
  .trust-table-wrap{margin-top:28px;}
}

/* Data breach severity table: wider Description/Actions columns, fixed layout so colgroup widths are honored */
.trust-table--breach{table-layout:fixed;min-width:1150px;}
.trust-table--breach > thead > tr > th{white-space:normal;}
.trust-table--breach > tbody > tr > td:nth-child(3),
.trust-table--breach > tbody > tr > td:nth-child(4),
.trust-table--breach > tbody > tr > td:nth-child(5){white-space:normal;}

/* TRUST PORTAL PAGE: FAQ section (reuses .phr-faq / .phr-faq-item plus-minus accordion) */
.trust-faq-eyebrow{display:block;text-align:center;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-bottom:32px;}
.trust-faq-wrap{max-width:760px;margin:0 auto;}
.trust-faq-wrap .trust-cat-heading{margin-bottom:20px;}
.trust-faq-wrap .trust-cat-heading--spaced{margin-top:56px;}
.trust-faq-topic{font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);margin:8px 0 0;}
.trust-faq-wrap .phr-faq-item__body-inner ol,
.trust-faq-wrap .phr-faq-item__body-inner ul{margin:10px 0 0;padding-left:20px;}
.trust-faq-wrap .phr-faq-item__body-inner li{margin-bottom:6px;}
.trust-faq-wrap .phr-faq-item__body-inner p{margin:0;}
.trust-faq-wrap .phr-faq-item__body-inner p + p{margin-top:10px;}
.trust-faq-wrap .phr-faq-item__body-inner a{color:var(--blue);}
.trust-faq-wrap .trust-table-wrap{margin:14px 0;}

@media(max-width:600px){
  .trust-faq-wrap .trust-cat-heading--spaced{margin-top:40px;}
}

/* TRUST PORTAL PAGE: Documents section (tabs + certificate card grid + lightbox) */
.trust-doc-section{background:#fff;padding:72px 48px;}
.trust-doc-heading{max-width:1100px;margin:0 auto 32px;}
.trust-doc-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:44px;}
.trust-doc-tab{padding:10px 24px;border-radius:100px;border:1px solid var(--border);background:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--text-body);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.trust-doc-tab:hover{border-color:var(--blue);color:var(--blue);}
.trust-doc-tab.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.trust-doc-panel{display:none;}
.trust-doc-panel.active{display:block;}
.trust-doc-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;}
.trust-doc-card{text-align:center;}
.trust-doc-card-img-wrap{border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(13,27,62,.14);margin-bottom:18px;cursor:pointer;background:#f8fafc;}
.trust-doc-card-img-wrap img{width:100%;height:auto;display:block;transition:transform .3s ease;}
.trust-doc-card-img-wrap:hover img{transform:scale(1.03);}
.trust-doc-card-label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--navy);cursor:pointer;line-height:1.4;background:none;border:none;text-align:center;font-family:inherit;}
.trust-doc-card-label svg{flex-shrink:0;color:var(--blue);}
.trust-doc-card-label:hover{color:var(--blue);}

@media(max-width:900px){
  .trust-doc-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .trust-doc-section{padding:48px 20px;}
  .trust-doc-grid{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto;}
}

/* Image lightbox (certificate viewer) */
.doc-lightbox-overlay{position:fixed;inset:0;z-index:99999;background:rgba(13,27,62,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:24px;}
.doc-lightbox-overlay.active{opacity:1;pointer-events:all;}
.doc-lightbox-box{position:relative;max-width:90vw;}
.doc-lightbox-box img{max-width:90vw;max-height:78vh;width:auto;height:auto;display:block;margin:0 auto;border-radius:10px;box-shadow:0 32px 80px rgba(0,0,0,.4);}
.doc-lightbox-close{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.doc-lightbox-close:hover{background:rgba(0,0,0,.75);}
.doc-lightbox-caption{color:#fff;text-align:center;margin-top:16px;font-size:14px;font-weight:600;}

@media(max-width:600px){
  .doc-lightbox-close{top:6px;right:6px;width:32px;height:32px;font-size:16px;}
}

/* TRUST PORTAL PAGE: Reports tab (card grid) */
.trust-report-grid{max-width:1100px;margin:0 auto 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.trust-report-grid--4{grid-template-columns:repeat(4,1fr);}
.trust-report-card{position:relative;background:#f8f8f8;border-radius:10px;padding:50px 28px 26px;transition:background .3s ease,box-shadow .3s ease;}
.trust-report-card:hover{background:#fff;box-shadow:0 20px 50px rgba(65,94,148,.09);}
.trust-report-tag{position:absolute;top:20px;right:20px;background:#fff;padding:4px 10px;border-radius:20px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--navy);white-space:nowrap;}
.trust-report-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1rem;color:var(--navy);margin:0 0 12px;line-height:1.3;}
.trust-report-desc{font-size:13.5px;color:var(--text-body);line-height:1.6;margin:0 0 16px;}
.trust-report-divider{border:none;border-top:1px solid #e6e6e6;margin:0 0 16px;}
.trust-report-download{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;background:none;border:none;cursor:pointer;padding:0;}
.trust-report-download svg{color:var(--navy);flex-shrink:0;}
.trust-report-download:hover{color:var(--blue);}
.trust-report-download:hover svg{color:var(--blue);}
.trust-report-badge{width:64px;height:64px;margin-bottom:16px;display:block;}

@media(max-width:900px){
  .trust-report-grid,
  .trust-report-grid--4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .trust-report-grid,
  .trust-report-grid--4{grid-template-columns:1fr;}
}

/* TRUST PORTAL PAGE: "request a security document" slide-in popup (bottom-right) */
.doc-request-popup{position:fixed;bottom:24px;right:24px;z-index:99998;width:380px;max-width:calc(100vw - 32px);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(13,27,62,.25);padding:28px 26px;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
.doc-request-popup.active{opacity:1;transform:translateY(0) scale(1);pointer-events:all;}
.doc-request-popup-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:#6457a6;cursor:pointer;padding:4px;}
.doc-request-popup-close:hover{color:var(--navy);}
.doc-request-popup-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1rem;color:#6457a6;margin:0 0 12px;}
.doc-request-popup p{font-size:13.5px;line-height:1.6;color:#3d3d3d;margin:0 0 12px;}
.doc-request-popup p:last-child{margin-bottom:0;}
.doc-request-popup a{color:var(--blue);text-decoration:underline;}
.doc-request-popup strong{font-weight:700;color:#000;}

@media(max-width:480px){
  .doc-request-popup{right:16px;bottom:16px;left:16px;width:auto;padding:24px 20px;}
}

/* TRUST PORTAL PAGE: "Our Achievements" sticky stack */
.achv-section{background:var(--bg-light);padding:96px 48px 64px;}
.achv-head{max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:56px;}
.achv-icon{width:44px;height:44px;margin:0 auto 16px;}
.achv-icon img{width:100%;height:100%;object-fit:contain;display:block;}
.achv-head h2{font-size:34px;font-weight:700;letter-spacing:-1px;color:var(--navy);margin:0 0 12px;}
.achv-head p{font-size:15.5px;color:var(--text-muted);line-height:1.65;margin:0;}

.achv-stack{max-width:1100px;margin:0 auto;position:relative;}
.achv-card{position:sticky;padding-bottom:32px;}
.achv-card-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  background:#fff;border-radius:20px;padding:40px;
  border:1px solid var(--border);box-shadow:0 24px 56px rgba(13,27,62,.14);
}
.achv-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.35rem;font-weight:800;color:var(--navy);line-height:1.35;margin:0 0 18px;}
.achv-text{font-size:14.5px;color:var(--text-body);line-height:1.75;margin:0;}
.achv-link{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:700;font-size:14px;color:var(--blue);text-decoration:none;margin-top:4px;}
.achv-link svg{flex-shrink:0;transition:transform .2s ease;}
.achv-link:hover svg{transform:translateX(3px);}
.achv-media{border-radius:14px;overflow:hidden;background:var(--bg-card);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.achv-media img{width:100%;height:100%;object-fit:contain;display:block;}
.achv-media--portrait{aspect-ratio:3/4;}

@media(max-width:900px){
  .achv-section{padding:72px 24px 48px;}
  .achv-card-inner{grid-template-columns:1fr;gap:24px;padding:28px;}
  .achv-media,.achv-media--portrait{aspect-ratio:16/10;}
}
@media(max-width:560px){
  .achv-head h2{font-size:26px;}
  .achv-card-inner{padding:22px;border-radius:16px;}
  .achv-title{font-size:1.1rem;}
}

/* CASE STUDY DETAIL PAGE (Brandix, etc.) */
.csd-hero{position:relative;height:480px;background-size:cover;background-position:center;display:flex;align-items:flex-end;}
.csd-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(4deg,#6EC1E4 8%,#000A09 100%);opacity:.68;}
.csd-hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 48px 40px 0;width:100%;}
.csd-hero h1{font-size:clamp(28px,4vw,42px);font-weight:800;color:#fff;letter-spacing:-0.5px;line-height:1.2;max-width:800px;margin:0;}
.csd-intro{background:#fff;padding:32px 48px 0;}
.csd-intro-inner{max-width:1180px;margin:0 auto;}
.csd-intro p{font-size:16px;color:var(--text-body);line-height:1.7;max-width:760px;margin:0 0 24px;}

.csd-highlights{background:#fff;padding:32px 48px 64px;}
.csd-highlights-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.csd-highlight{padding-top:20px;border-top:1px solid var(--border);}
.csd-highlight-check{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.csd-highlight-check svg{width:14px;height:14px;}
.csd-highlight p{font-size:14.5px;color:var(--text-body);line-height:1.65;margin:0;}

.csd-body{background:#fff;padding:0 48px 80px;}
.csd-body-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;}

.csd-facts{background:var(--bg-light);border-radius:var(--radius);padding:28px;position:sticky;top:100px;}
.csd-facts img{max-width:160px;height:auto;display:block;margin-bottom:20px;}
.csd-fact{display:flex;gap:10px;padding:14px 0;border-top:1px solid var(--border);}
.csd-fact:first-of-type{border-top:none;}
.csd-fact svg{width:14px;height:14px;color:var(--blue);flex-shrink:0;margin-top:4px;}
.csd-fact-label{font-size:13.5px;color:var(--text-muted);margin:0 0 2px;}
.csd-fact-value{font-size:14.5px;font-weight:700;color:var(--navy);margin:0;}

.csd-main p{font-size:15px;color:var(--text-body);line-height:1.8;margin:0 0 28px;}
.csd-video{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;margin-bottom:28px;cursor:pointer;background:#000;}
.csd-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .2s;}
.csd-video:hover img{opacity:.65;}
.csd-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .2s;}
.csd-video:hover .csd-video-play{transform:translate(-50%,-50%) scale(1.08);}
.csd-video-play svg{width:24px;height:24px;color:var(--navy);margin-left:3px;}

.csd-cta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:8px;}
.csd-cta-row h2{font-size:22px;font-weight:800;color:var(--navy);margin:0;}

@media(max-width:900px){
  .csd-hero{height:380px;}
  .csd-hero-inner{padding:0 24px 32px 0;}
  .csd-intro{padding:28px 24px 0;}
  .csd-highlights{padding:28px 24px 48px;}
  .csd-highlights-grid{grid-template-columns:1fr;gap:24px;}
  .csd-body{padding:0 24px 56px;}
  .csd-body-grid{grid-template-columns:1fr;gap:32px;}
  .csd-facts{position:static;}
}
@media(max-width:560px){
  .csd-hero{height:320px;}
  .csd-video-play{width:56px;height:56px;}
  .csd-video-play svg{width:20px;height:20px;}
}

/* CASE STUDY DETAIL PAGE: intro/impact list + quote + inline final CTA variant */
.csd-section-label{display:flex;align-items:center;gap:16px;margin:36px 0 20px;}
.csd-section-label:first-child{margin-top:0;}
.csd-section-label span{background:var(--blue);color:#fff;font-weight:700;font-size:13px;padding:8px 18px;border-radius:6px;white-space:nowrap;flex-shrink:0;}
.csd-section-label i{flex:1;height:1px;background:var(--border);display:block;}

.csd-impact-list{display:flex;flex-direction:column;gap:26px;margin:0 0 36px;}
.csd-impact-item{display:flex;gap:16px;align-items:flex-start;}
.csd-impact-icon{width:44px;height:44px;border-radius:10px;flex-shrink:0;object-fit:contain;}
.csd-impact-item h3{font-size:15.5px;font-weight:700;color:var(--navy);margin:0 0 6px;}
.csd-impact-item p{font-size:14px;color:var(--text-body);line-height:1.65;margin:0;}

.csd-quote{background:var(--bg-light);border-radius:var(--radius);padding:32px;margin:0 0 36px;}
.csd-quote blockquote{margin:0 0 20px;}
.csd-quote blockquote p{font-size:14.5px;font-style:italic;color:var(--text-body);line-height:1.75;margin:0 0 14px;}
.csd-quote blockquote p:last-child{margin-bottom:0;}
.csd-quote-meta{display:flex;align-items:center;gap:12px;}
.csd-quote-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;}
.csd-quote-meta .csd-quote-name{font-size:14px;font-weight:700;color:var(--navy);margin:0 0 2px;}
.csd-quote-meta .csd-quote-title{font-size:12.5px;color:var(--text-muted);margin:0;}

.csd-final h3{font-size:22px;font-weight:800;color:var(--navy);margin:0 0 12px;}
.csd-final p{font-size:14.5px;color:var(--text-body);line-height:1.7;margin:0 0 20px;}
.csd-final-btns{display:flex;gap:14px;flex-wrap:wrap;}

@media(max-width:560px){
  .csd-section-label span{font-size:12px;padding:7px 14px;}
  .csd-impact-item{gap:12px;}
  .csd-impact-icon{width:38px;height:38px;}
  .csd-quote{padding:24px;}
}

/* PUBLIC SECTOR PAGE */
.pubsec-why{background:var(--bg-light);padding:96px 64px;}
.pubsec-why-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.pubsec-why-img{width:100%;border-radius:20px;display:block;object-fit:cover;box-shadow:0 24px 60px rgba(13,27,62,.1);}
.pubsec-why-copy h2{font-size:clamp(1.9rem,3vw,2.4rem);font-weight:800;color:var(--navy);margin:0 0 28px;letter-spacing:-0.02em;}
.pubsec-why-list{list-style:none;display:flex;flex-direction:column;gap:20px;margin:0;padding:0;}
.pubsec-why-item{display:flex;gap:14px;align-items:flex-start;}
.pubsec-why-check{width:26px;height:26px;border-radius:50%;background:#ece9fb;color:#6d5bd0;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.pubsec-why-check svg{width:14px;height:14px;}
.pubsec-why-item p{font-size:15px;color:var(--text-body);line-height:1.65;margin:0;}

/* ═══════════════════════════════════════════════════════════════
   EBOOK LANDING PAGE (Transform Your HR Operations in Manufacturing)
═══════════════════════════════════════════════════════════════ */
.mfe-hero{position:relative;background:#fff;overflow:hidden;padding:96px 48px 0;}
.mfe-hero-bg{position:absolute;inset:0;background-position:bottom left;background-size:cover;background-repeat:no-repeat;opacity:.4;z-index:0;}
.mfe-hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;align-items:center;gap:40px;padding-bottom:64px;}
.mfe-hero-copy{max-width:640px;}
.mfe-hero-copy h1{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:700;line-height:1.18;letter-spacing:-1px;color:var(--navy);margin-bottom:16px;}
.mfe-hero-copy h1 span{color:#1d9bf0;}
.mfe-hero-lead{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:14px;}
.mfe-hero-sub{font-size:15px;color:var(--text-body);line-height:1.75;max-width:560px;}
.mfe-hero-photo{justify-self:end;}
.mfe-hero-photo img{width:100%;max-width:300px;display:block;}

.mfe-section{padding:88px 48px;}
.mfe-section--alt{background:var(--bg-light);}
.mfe-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.mfe-cover-img{width:100%;max-width:420px;display:block;margin:0 auto;border-radius:var(--radius);box-shadow:0 24px 60px rgba(13,27,62,.14);}
.mfe-copy h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:16px;line-height:1.25;}
.mfe-copy>p{font-size:15.5px;color:var(--text-muted);line-height:1.75;margin-bottom:28px;}
.mfe-kicker{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px;}

.mfe-check-list{display:flex;flex-direction:column;gap:22px;margin:0;padding:0;list-style:none;}
.mfe-check-item{display:flex;gap:14px;align-items:flex-start;}
.mfe-check-ic{width:28px;height:28px;border-radius:50%;background:#e7f6ec;color:#22c55e;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.mfe-check-ic svg{width:15px;height:15px;}
.mfe-check-item h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.mfe-check-item p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0;}

.mfe-form-col h4{font-size:1.3rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin-bottom:20px;}
.mfe-form-card{background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(13,27,62,.12);padding:28px;max-width:440px;}

@media(max-width:1024px){
  .mfe-hero-inner{grid-template-columns:1fr;text-align:center;padding-bottom:40px;}
  .mfe-hero-copy{max-width:100%;margin:0 auto;}
  .mfe-hero-sub{margin:0 auto;}
  .mfe-hero-photo{justify-self:center;}
  .mfe-hero-photo img{max-width:220px;}
  .mfe-grid{grid-template-columns:1fr;gap:36px;}
  .mfe-form-card{max-width:100%;margin:0 auto;}
}
@media(max-width:768px){
  .mfe-hero{padding:56px 24px 0;}
  .mfe-section{padding:56px 24px;}
}

.pubsec-proof{background:#fff;padding:96px 64px;}
.pubsec-proof-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.pubsec-stats-grid{display:grid;grid-template-columns:1fr 1fr;}
.pubsec-stat{padding:28px 0;border-bottom:1px solid var(--border);}
.pubsec-stat:nth-child(odd){border-right:1px solid var(--border);padding-right:24px;}
.pubsec-stat:nth-child(even){padding-left:24px;}
.pubsec-stat-num{font-size:44px;font-weight:700;color:var(--navy);line-height:1;margin-bottom:10px;letter-spacing:-1px;}
.pubsec-stat-label{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;}
.pubsec-quote blockquote{font-size:14.5px;font-style:italic;color:var(--text-body);line-height:1.8;margin:0 0 24px;}
.pubsec-quote-name{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 2px;}
.pubsec-quote span{font-size:13px;color:var(--text-muted);}

.pubsec-cta{background:var(--bg-light);padding:96px 64px;}
.pubsec-cta-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.pubsec-cta-copy h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;color:var(--navy);margin:0 0 28px;letter-spacing:-0.02em;line-height:1.25;}
.pubsec-cta-img-wrap{display:flex;justify-content:center;}
.pubsec-cta-img{width:100%;max-width:380px;display:block;border-radius:12px;box-shadow:0 24px 60px rgba(13,27,62,.14);}

@media(max-width:900px){
  .pubsec-why,.pubsec-proof,.pubsec-cta{padding:56px 24px;}
  .pubsec-why-grid,.pubsec-proof-grid,.pubsec-cta-grid{grid-template-columns:1fr;gap:32px;}
  .pubsec-why-img{order:-1;}
  .pubsec-stat-num{font-size:36px;}
}

/* ═══════════════════════════════════════════════════════════════
   EBOOK LANDING PAGE (Your Guide to Selecting the Right HR Software)
═══════════════════════════════════════════════════════════════ */
.hsg-hero{position:relative;background-image:url('../uploads/2024/07/background_1.webp');background-position:center center;background-size:cover;padding:140px 48px;text-align:center;}
.hsg-hero-inner{max-width:820px;margin:0 auto;}
.hsg-hero-inner h1{font-size:clamp(2rem,4vw,2.9rem);font-weight:700;line-height:1.22;letter-spacing:-1px;color:#fff;margin-bottom:18px;}
.hsg-hero-inner h1 span{color:#66ccff;}
.hsg-hero-sub{font-size:16px;color:rgba(255,255,255,.8);line-height:1.7;max-width:600px;margin:0 auto 32px;}
.hsg-hero-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--blue);font-size:15px;font-weight:700;padding:15px 32px;border-radius:100px;text-decoration:none;transition:all .2s;}
.hsg-hero-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}

.hsg-guide{padding:88px 48px;background:#fff;text-align:center;}
.hsg-guide-inner{max-width:820px;margin:0 auto 56px;}
.hsg-guide-inner h2{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:20px;}
.hsg-guide-inner p{font-size:16px;color:var(--text-body);line-height:1.75;}
.hsg-guide-inner p b{color:var(--navy);}
.hsg-benefit-grid{max-width:820px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.hsg-benefit{text-align:center;}
.hsg-benefit-ic{width:52px;height:52px;border-radius:50%;background:var(--bg-light);color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.hsg-benefit-ic svg{width:24px;height:24px;}
.hsg-benefit h3{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:8px;}
.hsg-benefit p{font-size:14.5px;color:var(--text-muted);line-height:1.65;margin:0;}

.hsg-audience{background:var(--bg-light);padding:88px 48px;}
.hsg-audience-inner{max-width:760px;margin:0 auto;text-align:center;}
.hsg-audience-inner h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:36px;}
.hsg-audience-list{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none;text-align:left;}
.hsg-audience-item{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 22px;}
.hsg-audience-ic{width:32px;height:32px;border-radius:50%;background:#e7f0fe;color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hsg-audience-ic svg{width:15px;height:15px;}
.hsg-audience-item p{font-size:15px;color:var(--text-body);margin:0;font-weight:600;}

.hsg-download{padding:88px 48px;background:#fff;}
.hsg-download-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;}
.hsg-download-img{width:100%;max-width:380px;display:block;margin:0 auto;}
.hsg-download-col h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:22px;}

@media(max-width:1024px){
  .hsg-benefit-grid{grid-template-columns:1fr;gap:32px;}
  .hsg-download-grid{grid-template-columns:1fr;gap:36px;}
  .hsg-download-col{text-align:center;}
}
@media(max-width:768px){
  .hsg-hero{padding:88px 24px;}
  .hsg-guide,.hsg-audience,.hsg-download{padding:56px 24px;}
}

/* ═══════════════════════════════════════════════════════════════
   WEBINAR REGISTRATION PAGE (PeoplesHR v10.3 Walkthrough)
   Reuses .btn-primary, .wb-cta-strip, and .hs-modal-* directly rather
   than duplicating them.
═══════════════════════════════════════════════════════════════ */
.wreg-hero{
  background:#fff;
  padding:96px 48px;
}
.wreg-hero-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
}
.wreg-hero-text{text-align:left;}
.wreg-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-light);border:1px solid var(--border);
  border-radius:100px;padding:6px 18px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue);margin-bottom:24px;
}
.wreg-hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);}
.wreg-hero h1{
  font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;color:var(--text-dark);
  letter-spacing:-.03em;line-height:1.12;margin-bottom:20px;
}
.wreg-hero h1 span{color:var(--blue);}
.wreg-hero-sub{
  font-size:17px;color:var(--text-body);line-height:1.65;
  max-width:520px;margin:0 0 28px;
}
.wreg-hero-meta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bg-light);border:1px solid var(--border);
  border-radius:100px;padding:10px 22px;margin-bottom:36px;
  font-size:14.5px;font-weight:600;color:var(--text-dark);
}
.wreg-hero-meta svg{flex-shrink:0;color:var(--blue);}
.wreg-hero-cta{display:flex;}
.wreg-hero-visual{
  aspect-ratio:4/3.4;border-radius:20px;overflow:hidden;
}
.wreg-hero-visual img{width:100%;height:100%;object-fit:cover;display:block;}

.wreg-section{padding:88px 48px;max-width:820px;margin:0 auto;}
.wreg-section--alt{max-width:none;background:var(--bg-card);}
.wreg-section--alt .wreg-cover{max-width:1080px;margin-left:auto;margin-right:auto;}

.wreg-cover{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start;}
.wreg-cover-content h2{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--text-dark);letter-spacing:-.02em;margin-bottom:14px;}
.wreg-cover-content>p{font-size:16px;color:var(--text-muted);line-height:1.65;margin-bottom:28px;}

.wreg-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.wreg-bullet{
  position:relative;padding-left:32px;
  font-size:15px;font-weight:500;color:var(--text-body);line-height:1.6;
}
.wreg-bullet::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.wreg-cover-speakers{display:flex;flex-direction:column;gap:14px;}
.wreg-cover-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px;}
.wreg-speaker{
  display:flex;align-items:center;gap:14px;
  background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;
}
.wreg-speaker-av{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  object-fit:cover;object-position:center top;
  background:var(--bg-card);
}
.wreg-speaker-info{min-width:0;}
.wreg-speaker-name{font-size:14.5px;font-weight:800;color:var(--text-dark);margin-bottom:2px;}
.wreg-speaker-role{font-size:12.5px;color:var(--text-muted);line-height:1.4;}

.wreg-cta-wrap{max-width:1000px;margin:0 auto;padding:0 48px 96px;}

.wreg-form-loader{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-muted);padding:12px 0;}
.wreg-form-confirm{text-align:center;padding:24px 0;}
.wreg-form-confirm svg{color:#16a34a;margin-bottom:14px;}
.wreg-form-confirm p{font-size:16px;font-weight:600;color:var(--text-dark);}

@media(max-width:1024px){
  .wreg-hero{padding:72px 32px;}
  .wreg-hero-inner{gap:40px;}
  .wreg-section{padding:72px 32px;}
  .wreg-cover{gap:36px;}
}
@media(max-width:768px){
  .wreg-hero{padding:48px 20px;}
  .wreg-hero-inner{grid-template-columns:1fr;}
  .wreg-hero-visual{order:-1;aspect-ratio:auto;}
  .wreg-hero-visual img{height:auto;}
  .wreg-hero h1{font-size:clamp(1.9rem,7vw,2.4rem);}
  .wreg-hero-sub{font-size:15px;}
  .wreg-hero-meta{font-size:13px;padding:9px 18px;flex-wrap:wrap;}
  .wreg-section{padding:56px 20px;}
  .wreg-cover{grid-template-columns:1fr;gap:32px;}
  .wreg-cta-wrap{padding:0 20px 64px;}
}

/* ═══════════════════════════════════════════════════════════════
   SOLUTIONS OVERVIEW PAGE
═══════════════════════════════════════════════════════════════ */
.sol-hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,#16264d 100%);padding:120px 48px 96px;text-align:center;overflow:hidden;}
.sol-hero-inner{max-width:820px;margin:0 auto;position:relative;z-index:2;}
.sol-hero-inner h1{font-size:clamp(2.1rem,4vw,3rem);font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.18;margin-bottom:22px;}
.sol-hero-sub{font-size:15.5px;color:rgba(255,255,255,.7);line-height:1.75;max-width:680px;margin:0 auto 14px;}
.sol-hero-scroll{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:36px auto 0;border:1.5px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;position:relative;z-index:2;transition:border-color .2s,transform .2s;}
.sol-hero-scroll:hover{border-color:rgba(255,255,255,.6);transform:translateY(3px);}
.sol-hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;display:block;z-index:1;}

.sol-reality{background:#fff;padding:88px 48px;}
.sol-reality-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.sol-reality-copy h2{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:20px;}
.sol-reality-copy p{font-size:15.5px;color:var(--text-body);line-height:1.75;margin-bottom:16px;}
.sol-reality-copy p:last-child{margin-bottom:0;font-weight:700;color:var(--navy);}
.sol-reality-img{width:100%;border-radius:var(--radius);display:block;box-shadow:0 20px 50px rgba(13,27,62,.14);}

.sol-band{padding:88px 48px;text-align:center;}
.sol-band--dark{background:linear-gradient(160deg,var(--navy) 0%,#1c2f5c 100%);}
.sol-band-inner{max-width:760px;margin:0 auto 48px;}
.sol-band h2{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:18px;}
.sol-band--dark h2{color:#fff;}
.sol-band--light h2{color:var(--navy);}
.sol-pill{display:inline-block;background:rgba(254,117,62,.12);color:#fe753e;font-size:12px;font-weight:700;letter-spacing:.03em;padding:6px 18px;border-radius:100px;margin-bottom:18px;}
.sol-band p{font-size:15px;line-height:1.7;margin-bottom:10px;}
.sol-band--dark p{color:rgba(255,255,255,.68);}
.sol-band--light p{color:var(--text-body);}
.sol-band-explore{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:20px;}
.sol-band--dark .sol-band-explore{color:rgba(255,255,255,.4);}
.sol-band--light .sol-band-explore{color:var(--text-muted);}

.sol-icon-grid{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 32px;}
.sol-icon-card{display:flex;flex-direction:column;align-items:center;text-align:center;width:130px;text-decoration:none;transition:transform .2s;}
.sol-icon-card:hover{transform:translateY(-4px);}
.sol-icon-card img{width:56px;height:56px;object-fit:contain;margin-bottom:14px;}
.sol-icon-card span{font-size:13.5px;font-weight:700;line-height:1.4;}
.sol-band--dark .sol-icon-card span{color:#fff;}
.sol-band--light .sol-icon-card span{color:var(--navy);}

.sol-different{background:linear-gradient(160deg,var(--navy) 0%,#16264d 100%);padding:88px 48px;}
.sol-different-inner{max-width:1180px;margin:0 auto;text-align:center;}
.sol-different-inner>h2{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;color:#fff;letter-spacing:-0.02em;margin-bottom:48px;}
.sol-different-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;text-align:left;}
.sol-different-img{width:100%;border-radius:var(--radius);display:block;}
.sol-diff-eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fe753e;margin:0 0 18px;}
.sol-diff-list{display:flex;flex-direction:column;gap:18px;margin:0 0 24px;padding:0;list-style:none;}
.sol-diff-item{display:flex;gap:14px;align-items:flex-start;}
.sol-diff-ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(37,99,235,.18);color:#5b9cf6;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.sol-diff-ic svg{width:14px;height:14px;}
.sol-diff-item p{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.65;margin:0;}
.sol-diff-item p b{color:#fff;}
.sol-diff-quote{background:var(--blue);color:#fff;border-radius:14px;padding:22px 26px;font-size:14.5px;line-height:1.7;margin-bottom:24px;}
.sol-diff-plain{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:32px;}

.sol-cta-wrap{background:var(--bg-light);padding:0 48px 96px;}
.sol-cta-card{max-width:1180px;margin:0 auto;position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 24px 60px rgba(13,27,62,.1);padding:64px 64px;overflow:hidden;}
.sol-cta-card h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:16px;max-width:520px;}
.sol-cta-card p{font-size:15px;color:var(--text-muted);line-height:1.7;max-width:480px;margin-bottom:32px;}
.sol-cta-decor{position:absolute;right:48px;bottom:-10px;width:150px;height:auto;opacity:.9;pointer-events:none;}

@media(max-width:1024px){
  .sol-reality-grid{grid-template-columns:1fr;gap:36px;}
  .sol-different-grid{grid-template-columns:1fr;gap:36px;}
  .sol-different-img{max-width:420px;margin:0 auto;}
}
@media(max-width:768px){
  .sol-hero{padding:88px 24px 72px;}
  .sol-reality{padding:56px 24px;}
  .sol-band{padding:56px 24px;}
  .sol-different{padding:56px 24px;}
  .sol-cta-wrap{padding:0 20px 64px;}
  .sol-cta-card{padding:40px 28px;}
  .sol-cta-decor{display:none;}
  .sol-icon-card{width:100px;}
  .sol-icon-card img{width:46px;height:46px;}
}

/* ═══════════════════════════════════════════════════════════════
   GET IN TOUCH PAGE
═══════════════════════════════════════════════════════════════ */
.git-hero-sub{font-size:15.5px;color:var(--text-body);line-height:1.75;max-width:480px;margin-bottom:32px;}
.git-hero-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 16px;}
.git-contact-list{display:flex;flex-direction:column;gap:16px;margin:0 0 8px;}
.git-contact-item{display:flex;align-items:center;gap:14px;text-decoration:none;}
.git-contact-ic{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#e7f0fe;color:var(--blue);display:flex;align-items:center;justify-content:center;}
.git-contact-ic svg{width:17px;height:17px;}
.git-contact-item span{font-size:14.5px;font-weight:700;color:var(--navy);}

.git-form-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0 0 10px;}
.git-form-title{font-size:1.4rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin:0 0 22px;}

.git-regional{background:#fff;padding:64px 48px 24px;text-align:center;}
.git-regional-inner{max-width:640px;margin:0 auto;}
.git-regional h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:16px;}
.git-regional p{font-size:15px;color:var(--text-muted);line-height:1.7;margin:0;}

.git-offices{background:#fff;padding:40px 48px 96px;}
.git-offices-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;}
.git-office-card{text-align:left;}
.git-office-flag{width:100%;max-width:154px;height:auto;aspect-ratio:318/159;object-fit:cover;border-radius:10px;display:block;margin-bottom:18px;box-shadow:0 6px 18px rgba(13,27,62,.1);}
.git-office-card h3{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin-bottom:8px;}
.git-office-card p{font-size:14px;color:var(--text-muted);line-height:1.6;margin:0;}

@media(max-width:1024px){
  .git-offices-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .git-regional{padding:48px 24px 20px;}
  .git-offices{padding:32px 24px 64px;}
  .git-offices-grid{grid-template-columns:1fr;gap:32px;}
}

/* ═══════════════════════════════════════════════════════════════
   HR TECH SURVEY LANDING PAGE (Indonesia 2026)
═══════════════════════════════════════════════════════════════ */
.hrsv-hero{
  position:relative;background-color:#fff;
  background-image:url('../uploads/2025/02/s-top-3d-5-x2-copy.webp');
  background-position:bottom center;background-repeat:no-repeat;background-size:100% auto;
  padding:72px 48px 200px;
}
.hrsv-hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
.hrsv-hero-copy h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.2;margin-bottom:14px;}
.hrsv-hero-tagline{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:16px;}
.hrsv-hero-copy>p{font-size:14.5px;color:var(--text-muted);line-height:1.7;max-width:480px;margin-bottom:10px;}
.hrsv-hero-lead{font-size:14.5px;font-weight:700;color:var(--navy);margin:20px 0 14px;}

.hrsv-form-card{background:linear-gradient(160deg,#eef2fc 0%,#e6ecfa 100%);border-radius:20px;box-shadow:0 24px 60px rgba(13,27,62,.1);padding:28px;}

.hrsv-sneak{background:#fff;padding:88px 48px;}
.hrsv-sneak-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:start;}
.hrsv-sneak-img{width:100%;border-radius:var(--radius);display:block;box-shadow:0 24px 60px rgba(13,27,62,.16);position:sticky;top:100px;}
.hrsv-sneak-copy h2{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:28px;}

.hrsv-power{background:#fff;padding:0 48px 88px;}
.hrsv-power-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hrsv-power-copy h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:18px;}
.hrsv-power-copy>p{font-size:15px;color:var(--text-muted);line-height:1.75;margin-bottom:22px;}
.hrsv-power-teaser{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:22px;}
.hrsv-power-img{width:100%;border-radius:var(--radius);display:block;box-shadow:0 24px 60px rgba(13,27,62,.16);}

.hrsv-cta{background:var(--bg-light);padding:80px 48px;text-align:center;}
.hrsv-cta-inner{max-width:760px;margin:0 auto;}
.hrsv-cta h2{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:32px;}
.hrsv-cta h2 em{font-style:normal;color:var(--blue);}

@media(max-width:1024px){
  .hrsv-hero-grid{grid-template-columns:1fr;gap:32px;}
  .hrsv-sneak-grid{grid-template-columns:1fr;gap:32px;}
  .hrsv-sneak-img{position:static;max-width:340px;margin:0 auto;}
  .hrsv-power-grid{grid-template-columns:1fr;gap:32px;}
  .hrsv-power-img{max-width:400px;margin:0 auto;}
}
@media(max-width:768px){
  .hrsv-hero{padding:56px 20px 160px;}
  .hrsv-sneak{padding:56px 20px;}
  .hrsv-power{padding:0 20px 56px;}
  .hrsv-cta{padding:56px 20px;}
}

/* ═══════════════════════════════════════════════════════════════
   FUNCTIONAL PROPOSAL PAGE (PDF viewer)
═══════════════════════════════════════════════════════════════ */
.fpr-bar{background:var(--bg-light);border-bottom:1px solid var(--border);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.fpr-bar h1{font-size:1.4rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin:0;}
.fpr-viewer-wrap{background:var(--bg-light);padding:0 40px 40px;}
.fpr-viewer{width:100%;height:85vh;min-height:640px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;display:block;}
@media(max-width:768px){
  .fpr-bar{padding:20px;}
  .fpr-viewer-wrap{padding:0 20px 28px;}
  .fpr-viewer{height:75vh;min-height:480px;}
}

/* ═══════════════════════════════════════════════════════════════
   AI-X PAGE — Section 01: Video Hero
═══════════════════════════════════════════════════════════════ */
.aix-hero-video{background:#fff;padding:100px 24px 110px;text-align:center;}
.aix-hv-inner{max-width:620px;margin:0 auto;}
.aix-hv-inner img{width:100%;height:auto;display:block;margin:0 auto 40px;}
.aix-play-btn{width:78px;height:78px;border-radius:50%;border:1.5px solid #cbd5e1;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,border-color .2s ease;padding:0;}
.aix-play-btn:hover{transform:scale(1.06);border-color:var(--blue);}
.aix-play-btn svg{width:20px;height:20px;margin-left:3px;color:var(--navy);}
@media(max-width:768px){
  .aix-hero-video{padding:64px 20px 72px;}
  .aix-hv-inner img{margin-bottom:32px;}
  .aix-play-btn{width:66px;height:66px;}
}

/* ═══════════════════════════════════════════════════════════════
   AI-X PAGE — Section 02: Designed for Humans (feature stack)
═══════════════════════════════════════════════════════════════ */
.aix-df-wrap{background:var(--bg-light);padding-bottom:64px;}
.aix-df-intro{max-width:760px;margin:0 auto;text-align:center;padding:96px 24px 56px;}
.aix-df-eyebrow{display:inline-flex;align-items:center;gap:6px;background:#fde8df;color:#e8622c;font-weight:700;font-size:.85rem;padding:8px 18px;border-radius:999px;margin-bottom:24px;}
.aix-df-intro h2{font-size:2.6rem;font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin:0 0 24px;}
.aix-df-intro p{color:var(--text-muted);font-size:1.05rem;line-height:1.7;margin:0 0 10px;}
.aix-feature-card{max-width:1100px;margin:0 auto;border-radius:32px;padding:64px 40px 56px;text-align:center;position:sticky;top:110px;}
.aix-fc-1{top:80px;}
.aix-feature-card.blue{background:#dbe6fb;}
.aix-feature-card.lavender{background:#ede0fa;}
.aix-feature-card h3{font-size:2.1rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin:0 0 20px;}
.aix-feature-card p{max-width:700px;margin:0 auto 40px;color:#475569;font-size:1rem;line-height:1.7;}
.aix-feature-card img{max-width:100%;height:auto;display:block;margin:0 auto;}
@media(max-width:768px){
  .aix-df-intro{padding:64px 20px 40px;}
  .aix-df-intro h2{font-size:1.9rem;}
  .aix-feature-card{border-radius:24px;padding:40px 20px 32px;position:static;top:auto;margin-bottom:16px;}
  .aix-feature-card h3{font-size:1.5rem;}
  .aix-feature-card p{margin-bottom:24px;}
}

/* ═══════════════════════════════════════════════════════════════
   AI-X PAGE — Section 03: Meet Lexi (Smarter Workflows)
═══════════════════════════════════════════════════════════════ */
.aix-lexi{background:#fff;padding:96px 24px;}
.aix-lexi-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;max-width:1180px;margin:0 auto;align-items:center;}
.aix-lexi-img img{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.12);}
.aix-lexi-eyebrow{display:inline-flex;align-items:center;gap:6px;background:#fde8df;color:#e8622c;font-weight:700;font-size:.85rem;padding:8px 18px;border-radius:999px;margin-bottom:24px;}
.aix-lexi-content h2{font-size:2.5rem;font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin:0 0 20px;color:var(--navy);}
.aix-lexi-content h2 .muted{color:#94a3b8;}
.aix-lexi-content>p{color:var(--text-muted);font-size:1.02rem;line-height:1.75;margin:0 0 36px;max-width:560px;}
.aix-lexi-content .phr-faq{max-width:none;margin:0;}
@media(max-width:900px){
  .aix-lexi-grid{grid-template-columns:1fr;gap:40px;}
  .aix-lexi-img img{max-width:280px;}
}
@media(max-width:600px){
  .aix-lexi{padding:64px 20px;}
  .aix-lexi-content h2{font-size:1.9rem;}
}

/* ═══════════════════════════════════════════════════════════════
   AI-X PAGE — Section 04: The Power of People (Hire Smarter)
═══════════════════════════════════════════════════════════════ */
.aix-hire{background:var(--navy);position:relative;padding:110px 24px 90px;}
.aix-hire-divider{position:absolute;top:0;left:0;width:100%;height:70px;line-height:0;overflow:hidden;}
.aix-hire-divider svg{width:100%;height:100%;display:block;}
.aix-hire-intro{max-width:820px;margin:0 auto 56px;text-align:center;}
.aix-hire-eyebrow{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#ff5125;font-weight:700;font-size:.85rem;padding:8px 18px;border-radius:999px;margin-bottom:24px;}
.aix-hire-intro h2{color:#fff;font-size:2.3rem;font-weight:800;letter-spacing:-0.02em;margin:0 0 24px;}
.aix-hire-intro p{color:#cbd5e1;font-size:1.02rem;line-height:1.75;margin:0 0 14px;}
.aix-hire-intro p b{color:#ff8a5c;}
.aix-hire-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;max-width:1180px;margin:0 auto;align-items:start;}
.aix-hire-groups{display:flex;flex-direction:column;gap:40px;}
.aix-hire-group-label{display:inline-block;background:rgba(255,255,255,.08);color:#ff8a5c;font-weight:700;font-size:.92rem;padding:8px 18px;border-radius:999px;margin-bottom:20px;}
.aix-hire-item{display:flex;gap:16px;margin-bottom:20px;}
.aix-hire-item:last-child{margin-bottom:0;}
.aix-hire-ic{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;}
.aix-hire-ic svg{width:15px;height:15px;color:#fff;}
.aix-hire-item p{margin:0;color:#cbd5e1;font-size:.98rem;line-height:1.65;}
.aix-hire-item p b{color:#fff;}
.aix-hire-cta{display:flex;align-items:center;gap:20px;margin-top:44px;flex-wrap:wrap;}
.aix-hire-cta p{color:#fff;font-weight:600;margin:0;font-size:1.05rem;}
.aix-hire-visual{align-self:stretch;}
.aix-hire-visual img{position:sticky;top:110px;width:100%;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:block;}
@media(max-width:900px){
  .aix-hire-grid{grid-template-columns:1fr;}
  .aix-hire-visual{position:static;margin-top:40px;}
}
@media(max-width:600px){
  .aix-hire{padding:72px 20px 56px;}
  .aix-hire-intro h2{font-size:1.7rem;}
}

/* ═══════════════════════════════════════════════════════════════
   AI-X PAGE — Section 05: The Agile Engine (Integration tabs)
═══════════════════════════════════════════════════════════════ */
.aix-agile{background:#151515;padding:100px 24px 110px;}
.aix-agile-intro{max-width:820px;margin:0 auto 48px;text-align:center;}
.aix-agile-eyebrow{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#ff5125;font-weight:700;font-size:.85rem;padding:8px 18px;border-radius:999px;margin-bottom:24px;}
.aix-agile-intro h2{color:#fff;font-size:2.3rem;font-weight:800;letter-spacing:-0.02em;margin:0 0 20px;}
.aix-agile-intro p{color:#94a3b8;font-size:1.02rem;line-height:1.7;margin:0;}
.aix-agile-tabs{max-width:900px;margin:0 auto;}
.aix-agile-tabnav{display:flex;background:rgba(255,255,255,.05);border-radius:12px;padding:6px;gap:6px;margin-bottom:44px;}
.aix-agile-tabbtn{flex:1;background:none;border:none;cursor:pointer;padding:16px 20px;border-radius:8px;font-family:inherit;font-size:.98rem;font-weight:700;color:#94a3b8;transition:background .2s,color .2s;text-align:center;}
.aix-agile-tabbtn:hover{color:#fff;}
.aix-agile-tabbtn.active{background:#fff;color:#0d1b3e;}
.aix-agile-panel{display:none;}
.aix-agile-panel.active{display:block;}
.aix-agile-item{margin-bottom:28px;}
.aix-agile-item:last-child{margin-bottom:0;}
.aix-agile-item h3{color:#ff8a5c;font-weight:700;font-size:1rem;margin:0 0 8px;}
.aix-agile-item p{color:#cbd5e1;font-size:.98rem;line-height:1.7;margin:0;}
@media(max-width:700px){
  .aix-agile{padding:64px 20px 72px;}
  .aix-agile-intro h2{font-size:1.7rem;}
  .aix-agile-tabnav{flex-direction:column;}
}

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE — Cookie Consent Banner
   Injected by phr.js on every page (see js/phr.js); no per-page
   markup needed. Persists the visitor's choice in a cookie so the
   banner only shows once.
═══════════════════════════════════════════════════════════════ */
.phr-cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:5000;
  background:#fff;border-top:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(13,27,62,.12);
  padding:20px 24px;
  transform:translateY(100%);opacity:0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .35s ease;
}
.phr-cookie-banner.is-visible{transform:translateY(0);opacity:1;}
.phr-cookie-banner__inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.phr-cookie-banner__text{flex:1 1 420px;min-width:0;font-size:13.5px;line-height:1.6;color:var(--text-body);}
.phr-cookie-banner__text strong{color:var(--navy);}
.phr-cookie-banner__text a{color:var(--blue);font-weight:600;text-decoration:none;}
.phr-cookie-banner__text a:hover{text-decoration:underline;}
.phr-cookie-banner__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap;}
.phr-cookie-btn{
  font-family:inherit;font-size:13.5px;font-weight:700;
  padding:11px 20px;border-radius:9px;cursor:pointer;
  white-space:nowrap;transition:all .18s ease;
}
.phr-cookie-btn--accept{background:var(--blue);color:#fff;border:1.5px solid var(--blue);box-shadow:0 4px 14px rgba(37,99,235,.3);}
.phr-cookie-btn--accept:hover{background:#1d4ed8;transform:translateY(-1px);}
.phr-cookie-btn--reject{background:#fff;color:var(--navy);border:1.5px solid #cbd5e1;}
.phr-cookie-btn--reject:hover{border-color:var(--blue);color:var(--blue);}
@media(max-width:640px){
  .phr-cookie-banner{padding:18px 16px;}
  .phr-cookie-banner__inner{gap:14px;}
  .phr-cookie-banner__actions{width:100%;}
  .phr-cookie-btn{flex:1;text-align:center;}
}

/* PHILIPPINES PAYROLL LANDING PAGE (/philippines-payroll-lp.html) — appended styles.
   No existing rules modified. Reuses .hero-wrap/.hero/.trust-badges/.hero-form-card,
   .section-center, .phr-faq*, .g2-badges-*, .mac-*, .stats-bar/.stat-item and other
   classes already defined above; the handful of classes below cover the few bits
   those don't already have: a floating benefit-tag cloud, a rotated banner pill,
   and two written-testimonial cards. */
.pay-subhead{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-1px;color:var(--blue);margin-top:6px;}
.pay-accent{color:#F78F21;font-weight:800;}
.pay-lede{max-width:720px;margin:20px auto 0;color:var(--text-body);line-height:1.7;}
.pay-lede--strong{max-width:720px;margin:16px auto 0;color:var(--navy);font-weight:700;line-height:1.7;}

.pay-split{display:flex;gap:56px;align-items:center;flex-wrap:wrap;}
.pay-split + .pay-split{margin-top:48px;}
.pay-split-media,.pay-split-body{flex:1 1 420px;min-width:280px;}
.pay-split-media img{width:100%;border-radius:14px;box-shadow:0 20px 48px -14px rgba(20,29,48,.3);display:block;}
.pay-media-stack{display:flex;flex-direction:column;gap:20px;}
.pay-media-stack img:not(:first-child){border-radius:12px;box-shadow:0 14px 34px -12px rgba(20,29,48,.25);}
.pay-feat-section--alt{background:#F5F6F8;}

.pay-tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:44px auto 0;}
.pay-tag-chip{
  display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:100px;
  border:1px solid transparent;
  font-size:13.5px;font-weight:700;
  box-shadow:0 2px 10px rgba(13,27,62,.05);
  /* "Falling in" reveal: starts above and faded out, JS adds
     .is-inview to the parent .pay-tag-cloud (with a per-chip
     transition-delay it sets inline) once the cloud scrolls into
     view, and this transition animates each chip down into place. */
  opacity:0;
  transform:translateY(-36px) rotate(var(--r,0deg));
  transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1);
}
.pay-tag-cloud.is-inview .pay-tag-chip{
  opacity:1;
  transform:translateY(0) rotate(var(--r,0deg));
}
@media(prefers-reduced-motion:reduce){
  .pay-tag-chip{transition:none;opacity:1;transform:none;}
}
/* Theme-colored chips, cycling through the site's accent palette
   (blue/orange/green/purple/navy/teal) so the cloud reads as varied
   but still on-brand rather than one flat color. */
.pay-tag-chip:nth-child(6n+1){background:rgba(37,99,235,.10);color:#2563eb;--r:-2deg;}
.pay-tag-chip:nth-child(6n+2){background:rgba(247,143,33,.14);color:#c2670f;--r:1.5deg;}
.pay-tag-chip:nth-child(6n+3){background:rgba(16,185,129,.12);color:#059669;--r:-1deg;}
.pay-tag-chip:nth-child(6n+4){background:rgba(139,92,246,.12);color:#7c3aed;--r:2deg;}
.pay-tag-chip:nth-child(6n+5){background:rgba(13,27,62,.08);color:#0d1b3e;--r:-1.5deg;}
.pay-tag-chip:nth-child(6n+6){background:rgba(6,182,212,.12);color:#0e7490;--r:1deg;}

.pay-banner{
  display:inline-block;
  max-width:720px;
  margin:0 auto;
  padding:16px 32px;
  border-radius:14px;
  background:#F78F21;
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  transform:rotate(-3deg);
  box-shadow:0 12px 30px rgba(247,143,33,.35);
}
.pay-banner-wrap{text-align:center;padding:8px 24px;}

.pay-quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:44px auto 0;}

/* Match this page's content width to customers.html's 1200px centered
   column (.cs-section-inner) — scoped to .pay-lp on <body> so it can't
   leak onto other pages that share .hero-wrap/.phr-container/.mac-grid. */
.pay-lp .hero-wrap .hero{max-width:1200px;margin:0 auto;}
.pay-lp .phr-container{max-width:1200px;}
.pay-lp .mac-grid{max-width:1200px;}

/* Trust-strip logo row: fixed (no marquee scroll) with clear breathing
   room below the "Trusted by..." heading. Scoped so the shared
   .industries-section/.client-logos/.logo-slider-track classes keep
   scrolling normally everywhere else they're used (including the stats
   band further down this same page). */
.pay-lp .pay-trust-section{padding-top:56px;}
.pay-lp .pay-trust-section .client-logos{overflow:visible;padding-top:32px;padding-bottom:24px;min-height:0;}
.pay-lp .pay-trust-section .client-logos::before,
.pay-lp .pay-trust-section .client-logos::after{display:none;}
.pay-lp .logo-slider-track.pay-logos-fixed{
  animation:none;
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
  gap:48px 56px;
}
.pay-quote-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:32px 28px;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 4px 20px rgba(13,27,62,.06);
}
.pay-quote-mark{color:#93c5fd;flex-shrink:0;}
.pay-quote-text{font-size:15.5px;color:var(--navy);line-height:1.65;font-style:italic;margin:0;}
.pay-quote-foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:16px;border-top:1px solid var(--border);}
.pay-quote-logo{height:28px;width:auto;max-width:130px;object-fit:contain;flex-shrink:0;}
@media(max-width:760px){
  .pay-quote-grid{grid-template-columns:1fr;}
  .pay-banner{font-size:16px;padding:14px 22px;}
}

/* philippines-hris.html — appended styles.
   .phr-section__desc: centered intro paragraph under .phr-section__title
   (reused instead of repeating the same inline style on each section).
   .why-phr-intro: intro paragraph inside a .why-phr-list-col, above the list.
   .pay-cta-band: simple centered CTA band (heading + button). */
.phr-section__desc{max-width:720px;margin:16px auto 0;color:var(--text-muted);text-align:center;line-height:1.6;}
.why-phr-intro{margin-bottom:18px;color:var(--text-body);line-height:1.6;}
.pay-cta-band{padding:64px 48px;}
.pay-cta-band .section-center{margin-bottom:24px;}
.pay-cta-band__actions{text-align:center;}
.pay-cta-band__btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}

/* Match this page's content width to customers.html's 1200px centered
   column, same treatment as philippines-payroll-lp.html's .pay-lp rules —
   scoped to .hris-lp on <body> so it can't leak onto other pages that
   share .hero-wrap/.phr-container/.mac-grid. */
.hris-lp .hero-wrap .hero{max-width:1200px;margin:0 auto;}
.hris-lp .phr-container{max-width:1200px;}
.hris-lp .mac-grid{max-width:1200px;}

/* .pay-accent forces font-weight:800 for its usual use inside a normal-
   weight paragraph (philippines-payroll-lp.html's hero-subtitle). Inside
   this page's <h1>, the heading is already bold, so the accent color
   should just inherit that weight instead of forcing its own. */
.hris-lp .hero h1 .pay-accent{font-weight:inherit;}

/* Trust-strip logo carousel: slower scroll (was the shared 20s default,
   which reads as too fast with 27 logos in the track). Scoped so the
   shared .logo-slider-track animation keeps its normal speed everywhere
   else it's used. */
.hris-logo-strip .logo-slider-track{animation-duration:55s;}
.hris-logo-strip{padding:48px 48px 0;background:#fff;}

/* "Does this sound like you?" pain-point list: single-line items (icon
   only, no description paragraph), so center the icon against the text
   instead of the shared list's default top alignment, and back off the
   shared item title's heavy 800 weight since there's no longer a bold
   heading + lighter-body pairing to contrast against. */
.why-phr-list--plain .why-phr-list-item{align-items:center;}
.why-phr-list--plain .why-phr-item-title{font-weight:600;margin-bottom:0;}

/* "From Spreadsheets..." section: 5 full-width icon+text rows. */
.pay-feat-row-eyebrow{margin-top:18px;}
.pay-feat-row-list{max-width:820px;margin:32px auto 0;display:flex;flex-direction:column;gap:28px;}
.pay-feat-row{display:flex;align-items:flex-start;gap:22px;}
.pay-feat-row-icon{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.pay-feat-row-icon img{width:40px;height:40px;object-fit:contain;}
.pay-feat-row h3{font-size:18px;font-weight:700;color:var(--navy);margin:0 0 6px;}
.pay-feat-row p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0;}

/* "Where AI meets the Real Work of HR" — 3-column info grid
   (star-icon blurbs either side of a centered decorative sparkle). */
.pay-info-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center;max-width:1100px;margin:44px auto 0;}
.pay-info-col{display:flex;flex-direction:column;gap:28px;}
.pay-info-item{display:flex;gap:14px;align-items:flex-start;}
.pay-info-star{flex-shrink:0;margin-top:2px;color:#f6c343;}
.pay-info-item p{margin:0;font-size:14.5px;color:var(--text-muted);line-height:1.6;}
.pay-info-visual{display:flex;align-items:center;justify-content:center;}
@media(max-width:900px){
  .pay-info-grid{grid-template-columns:1fr;gap:32px;}
  .pay-info-visual{order:-1;}
}

/* indonesia-lp.html — appended styles. */

/* Hero eyebrow chip above the H1. */
.idn-hero-eyebrow{display:inline-flex;align-items:center;background:var(--e-global-color-accent,#F78F21);color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;padding:8px 18px;border-radius:99px;margin-bottom:18px;}

/* Trust logo strip: no heading row, just a small eyebrow above the logos. */
.idn-logo-strip{padding-top:40px;}
.idn-logo-strip__eyebrow{font-size:14px;font-weight:600;color:var(--text-muted);text-align:center;margin:0;}
/* Fixed (non-scrolling) logo row — same treatment as the payroll-lp/hris
   pages' trust strip, scoped so the shared marquee keeps animating
   everywhere else .logo-slider-track is used. */
.idn-logo-strip .client-logos{overflow:visible;padding-top:32px;padding-bottom:24px;min-height:0;}
.idn-logo-strip .client-logos::before,
.idn-logo-strip .client-logos::after{display:none;}
.idn-logo-strip .logo-slider-track.idn-logos-fixed{
  animation:none;
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
  gap:48px 56px;
}

/* Dark navy mega-sections ("Apa yang Anda Dapatkan", "Keunggulan AI", mobile app section). */
.idn-dark-section{background:linear-gradient(180deg,#212A3C 0%,#0E1F41 100%);padding:80px 48px;color:rgba(255,255,255,.82);}
.idn-dark-section .section-center h2{color:#fff;text-align:center;max-width:760px;margin:0 auto 56px;}
.idn-dark-section--alt{background:linear-gradient(180deg,#0E1F41FC 0%,#0E1F41 100%);}

/* --alt on white: same markup/structure as the dark variant, but on a
   white background with every text/icon color inverted for contrast. */
.idn-dark-section--alt{background:#fff;color:var(--text-muted);}
.idn-dark-section--alt .section-center h2{color:var(--navy);}
.idn-dark-section--alt .idn-dark-split-body h2,
.idn-dark-section--alt .idn-dark-split-body h3{color:var(--navy);}
.idn-dark-section--alt .idn-dark-lede{color:var(--navy)!important;}
.idn-dark-section--alt .idn-dark-subhead{color:var(--blue);}
.idn-dark-section--alt .idn-dark-subhead2{color:var(--text-muted);}
.idn-dark-section--alt .idn-dark-list-icon{background:#E8E4FB;color:#4338CA;}
.idn-dark-section--alt .idn-dark-list-item p{color:var(--text-body);}
.idn-dark-section--alt .idn-dark-list-item p b{color:var(--navy);}
.idn-dark-split{display:flex;gap:56px;align-items:center;max-width:1200px;margin:0 auto;}
.idn-dark-split + .idn-dark-split{margin-top:72px;}
.idn-dark-split--reverse{flex-direction:row-reverse;}
.idn-dark-split-media{flex:0 0 44%;}
.idn-dark-split-media img{width:100%;border-radius:18px;display:block;}
.idn-dark-split-body{flex:1;min-width:0;}
.idn-dark-split-body h2{color:#fff;margin:0 0 8px;}
.idn-dark-split-body h3{color:#fff;font-size:26px;margin:0 0 20px;}
.idn-dark-lede{color:rgba(255,255,255,.9)!important;font-size:19px!important;font-weight:500;margin:0 0 24px!important;}
.idn-dark-subhead{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8fb4ff;margin:26px 0 10px;}
.idn-dark-split-body>.idn-dark-subhead:first-of-type{margin-top:0;}
.idn-dark-subhead2{font-size:15px;font-weight:600;color:rgba(255,255,255,.65);margin:0 0 14px;}
.idn-dark-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:12px;}
.idn-dark-list-item{display:flex;gap:12px;align-items:flex-start;}
.idn-dark-list-icon{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.idn-dark-list-item p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);}
.idn-dark-list-item p b{color:#fff;}
@media(max-width:900px){
  .idn-dark-section{padding:56px 20px;}
  .idn-dark-split, .idn-dark-split--reverse{flex-direction:column;gap:28px;}
  .idn-dark-split-media{flex:0 0 auto;width:100%;}
  .idn-dark-split + .idn-dark-split{margin-top:48px;}
}

/* "Kenalkan Lexi" split: chat bubbles beside the Lexi illustration. */
.idn-lexi-wrap{display:flex;gap:56px;align-items:center;max-width:1200px;margin:0 auto;}
.idn-lexi-chat{flex:1;min-width:0;}
.idn-lexi-chat h2{margin:0 0 24px;}
.idn-lexi-img{flex:0 0 36%;}
.idn-lexi-img img{width:100%;border-radius:18px;display:block;}
.idn-chat-stack{display:flex;flex-direction:column;gap:12px;}
.idn-chat-bubble{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 20px;font-size:14.5px;line-height:1.6;color:var(--navy);box-shadow:0 4px 16px rgba(13,27,62,.05);max-width:92%;}
.idn-chat-bubble--user{align-self:flex-end;background:#F4F7FF;}
.idn-chat-bubble--ai{background:#E8E4FB;}
@media(max-width:900px){
  .idn-lexi-wrap{flex-direction:column;}
  .idn-lexi-img{flex:0 0 auto;width:100%;order:-1;}
}

/* Manual vs. PeoplesHR comparison table. */
.idn-compare{display:grid;grid-template-columns:1fr 1fr 1fr;max-width:1000px;margin:40px auto 0;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(13,27,62,.08);}
.idn-compare__head{background:var(--navy);color:#fff;font-weight:700;font-size:15px;padding:16px 20px;}
.idn-compare__head--label{background:#1a2540;}
.idn-compare__head--highlight{background:var(--e-global-color-accent,#F78F21);}
.idn-compare__cell{background:#fff;font-size:14px;color:var(--text-muted);padding:16px 20px;border-top:1px solid var(--border);}
.idn-compare__cell--label{font-weight:700;color:var(--navy);background:#F7F8FA;}
.idn-compare__cell--highlight{background:#F4F7FF;color:var(--navy);}
@media(max-width:760px){
  .idn-compare{grid-template-columns:1fr;}
  .idn-compare__head--label{display:none;}
}

/* CTA band: two buttons side by side (Jadwalkan Konsultasi + WhatsApp). */
.idn-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.idn-cta-actions__whatsapp{background:#25D366;}
@media(max-width:560px){
  .idn-cta-actions{flex-direction:column;align-items:stretch;}
}

/* Hero: BG-6.png background image, content centered (both axes), form
   stacked below the content instead of side-by-side, form padding
   removed. Scoped to .idn-hero so the shared .hero-wrap/.hero/
   .hero-left-col/.hero-img-placeholder/.hero-form-body layout is
   untouched everywhere else it's used. */
.idn-hero{
  background-image:linear-gradient(160deg,rgba(255,255,255,.9) 0%,rgba(240,246,255,.85) 100%),url('/uploads/2025/07/BG-6.png');
  background-repeat:no-repeat;
  background-position:top center;
  background-size:contain;
}
.idn-hero .idn-hero__inner{
  background:transparent;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:auto;
  gap:0;
  padding:130px 24px 90px;
}
.idn-hero .idn-hero__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:900px;
  padding-right:0;
  text-align:center;
  margin:0 auto;
}
.idn-hero .idn-hero__content p,
.idn-hero .idn-hero__content h1{
  margin-left:auto;
  margin-right:auto;
}
.idn-hero .idn-hero__form{
  width:100%;
  max-width:540px;
  margin-top:40px;
  justify-content:center;
  align-self:auto;
}
.idn-hero .idn-hero__form > div{margin:0 auto;}
.idn-hero .hero-form-body{padding:0;}
/* HubSpot injects its own rounded/shadowed wrapper around the embedded
   form; with the padding above removed it now sits flush against the
   card edge, showing as a mismatched second border-radius behind the
   card's own. Strip HubSpot's own box styling so only the card's
   border-radius/shadow shows. */
.idn-hero .hero-form-body .hs-form-frame,
.idn-hero .hero-form-body .hs-form-frame *{
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  border:none!important;
}
@media(max-width:768px){
  .idn-hero .idn-hero__inner{padding:90px 20px 60px;}
}

/* Hero description: lighter weight than the shared .hero-subtitle default. */
.idn-hero .hero-subtitle.phr-section__desc{font-weight:400;opacity:1;}

/* "Mengapa tim HR..." plain list: no bold weight on the item titles.
   Scoped to .indonesia-lp so the same .why-phr-list--plain component on
   philippines-hris.html keeps its bolder 600 weight. */
.indonesia-lp .why-phr-list--plain .why-phr-item-title{font-weight:400;}

/* "Mengapa tim HR..." image: let it fill its column instead of capping
   at the shared 420px. Scoped to .indonesia-lp so other pages using
   .why-phr-img keep the smaller cap. */
.indonesia-lp .why-phr-img{max-width:none;}

/* Site-wide: slow down the logo-carousel marquee on mobile (was the
   shared 20s used at every width, which reads too fast on a narrow
   screen with logos passing quickly). Desktop/tablet keep 20s. */
@media(max-width:768px){
  .logo-slider-track{animation-duration:45s;}
}

/* indonesia-lp.html — floating WhatsApp button, fixed bottom-right. */
.idn-whatsapp-float{
  position:fixed;right:24px;bottom:24px;z-index:999;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  transition:transform .2s ease;
}
.idn-whatsapp-float:hover{transform:translateY(-2px) scale(1.05);}
@media(max-width:600px){
  .idn-whatsapp-float{right:16px;bottom:16px;width:52px;height:52px;}
  .idn-whatsapp-float svg{width:24px;height:24px;}
}