/* ==========================================================================
   /assets/css/payroll/features.css
   Scoped styles for the Payroll Software Features page (pf- prefix)
   Load AFTER payroll_global.css via $extra_css
   ========================================================================== */

:root{
  --pf-ink:#0F172A;
  --pf-subtext:#64748B;
  --pf-blue:#2563EB;
  --pf-pill-bg:#EAF1FE;
  --pf-line:#E7EAF0;
}

/* ---------- Hero ---------- */
.pf-hero{
  padding:5rem 1rem 4rem;
  text-align:center;
  margin-top:60px;
}
.pf-pill{
  display:inline-block;
  background:var(--pf-pill-bg);
  color:#1D4ED8;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:.45rem 1rem;
  border-radius:999px;
  margin-bottom:1.5rem;
}
.pf-hero-title{
  font-weight:800;
  font-size:3rem;
  line-height:1.15;
  max-width:820px;
  margin:0 auto 1.4rem;
  letter-spacing:-0.02em;
  color:var(--pf-ink);
}
.pf-hero-subtitle{
  color:var(--pf-subtext);
  font-size:1.12rem;
  max-width:640px;
  margin:0 auto 2.2rem;
  line-height:1.6;
}
.pf-hero-cta{
  display:inline-block;
  background:#2041E2;
  color:#fff;
  font-weight:700;
  border:none;
  border-radius:999px;
  padding:.85rem 2rem;
  font-size:1rem;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(255,77,21,.25);
}
.pf-hero-cta:hover{ background:#e6440f; color:#fff; }

/* ---------- Layout ---------- */
.pf-layout-section{
  margin:3rem 0 6rem;
}



/* Sidebar */
.pf-sidebar{
  position:sticky;
  top:2rem;
  max-height:calc(100vh - 4rem);
  overflow-y:auto;
}
.pf-sidebar-link{
  display:block;
  padding:.6rem 0;
  color:var(--pf-ink);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  border-left:2px solid transparent;
  padding-left:1rem;
  transition:color .15s ease, border-color .15s ease;
}
.pf-sidebar-link:hover{ color:var(--pf-blue); }
.pf-sidebar-link.active{
  color:var(--pf-blue);
  font-weight:700;
  border-left:2px solid var(--pf-blue);
}

/* Content */
.pf-feature-section{
  padding-top:1rem;
  margin-bottom:5rem;
  scroll-margin-top:2rem;
}
.pf-feature-section:last-child{ margin-bottom:0; }
.pf-feature-section h2{
  font-weight:800;
  font-size:2.1rem;
  margin-bottom:.6rem;
  letter-spacing:-0.01em;
  color:var(--pf-ink);
}
.pf-feature-section > p{
  color:var(--pf-subtext);
  font-size:1.02rem;
  margin-bottom:2.4rem;
  max-width:640px;
}

.pf-feature-card{
  padding:1.6rem 1.4rem 1.6rem 0;
  border:none;
  height:100%;
}
.pf-feature-icon{
  width:44px;
  height:44px;
  border:1.5px solid #C7D7FE;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--pf-blue);
  margin-bottom:1.1rem;
  flex-shrink:0;
}
.pf-feature-icon svg{ width:22px; height:22px; }
.pf-feature-card h3{
  font-weight:700;
  font-size:1.12rem;
  margin-bottom:.5rem;
  color:var(--pf-ink);
}
.pf-feature-card p{
  color:var(--pf-subtext);
  font-size:.94rem;
  line-height:1.6;
  margin-bottom:1rem;
}
.pf-video-link{
  color:var(--pf-blue);
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  display:none;
  align-items:center;
  gap:.35rem;
}
.pf-video-link:hover{ text-decoration:underline; color:var(--pf-blue); }
.pf-video-link svg{ width:14px; height:14px; transition:transform .15s ease; }
.pf-video-link:hover svg{ transform:translateX(3px); }


@media (max-width: 991.98px){
    
    
    .pf-sidebar{
        
        display:none;
    }
    
    
}



/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .pf-sidebar{ position:static; margin-bottom:2rem; max-height:none; overflow-y:visible; }
  .pf-sidebar-scroll{
    display:flex;
    overflow-x:auto;
    gap:1.5rem;
    white-space:nowrap;
    padding-bottom:.5rem;
  }
  .pf-sidebar-link{
    border-left:none;
    border-bottom:2px solid transparent;
    padding-left:0;
  }
  .pf-sidebar-link.active{
    border-left:none;
    border-bottom:2px solid var(--pf-blue);
  }
  .pf-hero-title{ font-size:2.2rem; }
}



/* --- CTA Section --- */
.cta-section {
    background-color: #ffffff;
    padding-bottom: 80px;
}

.cta-box {
    background-color: #020617; /* Replaced dark purple base with deep blue slate */
    background-image: 
    radial-gradient(at 90% 10%, #476af0 0px, transparent 50%), /* Replaced with lighter blue */
    radial-gradient(at 30% 40%, #0f2785 0px, transparent 60%), /* Replaced with deeper blue */
    radial-gradient(at 0% 100%, #000000 0px, transparent 50%),
    radial-gradient(at 80% 80%, #081547 0px, transparent 50%); /* Replaced with dark navy */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    padding-right: 0px;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
    pointer-events: none;
}

.cta-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

.cta-btn {
    background-color: #ffffff;
    color: #0b1528;
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.cta-btn:hover {
    background-color: #f1f5f9;
    color: #0b1528;
    transform: scale(1.02);
}

.cta-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.cta-features li {
    color: #e2e8f0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.cta-features svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

.cta-illustration-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-illustration-container img{
    
    width:80%;
    
    
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-title { font-size: 1.8rem; }
    .stat-number { font-size: 2.2rem; }
    .cta-box { padding: 40px 30px; text-align: center; }
    .cta-features { justify-content: center; }
    .cta-title { font-size: 2rem; }
    .cta-illustration-container { margin-top: 40px; }
}




/* Option B: Keep a slim, styled scrollbar instead of hiding it */
.pf-sidebar-scroll {
    max-height: calc(100vh - 120px);
    overflow-y: auto;

    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #c9c9c9 transparent; /* Firefox: thumb / track */
}

.pf-sidebar-scroll::-webkit-scrollbar {
    width: 5px;
}

.pf-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pf-sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: #c9c9c9;
    border-radius: 10px;
}

.pf-sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
}