@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;}
: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;}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text-dark);background:#fff;overflow-x:hidden;}

/* 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:200px;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 h4{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;
    }

/* 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: 440px;
  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;
  aspect-ratio: 16 / 11;
  filter: drop-shadow(0 20px 60px rgba(13, 27, 62, 0.1));
}
.mfg-img--proven {
  border-radius: 16px;
  aspect-ratio: 16 / 11;
}
.mfg-img--ai {
  border-radius: 16px;
  aspect-ratio: 4 / 3;
}
.mfg-img--why {
  border-radius: 20px;
  aspect-ratio: 16 / 11;
  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; }
.hero-img-col { aspect-ratio: 16 / 11; }
.hero-section-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 20px;
  filter: drop-shadow(0 20px 60px rgba(13,27,62,0.14));
}

/* 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%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; }
.ai-img-wrap img { width: 100%; height: 100%; object-fit: cover; 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; }
  .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; }

/* 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; }
}
/* 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);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 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 h4 { 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;
}
/* 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;}
}

/* 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;}
.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;}
.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('https://peopleshr.com/wp-content/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;}
}

/* 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; }
/* 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 ── */
.phr-section {
  padding: 100px 0;
  background: radial-gradient(ellipse at top right, #1e3a8a 0%, #0d1b3e 55%);
}
.phr-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%}

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