/* ==========================================================================

   PolicePrep Global Design System

   Version: 2.0



   Shared styles loaded on EVERY page.

   Scoped under .pp-modern to avoid conflicts with existing Bootstrap 3.

   Mobile-first responsive. Layer on top of existing stylesheets.

   ========================================================================== */



/* --------------------------------------------------------------------------

   0. GLOBAL RESET (outside .pp-modern scope)

   -------------------------------------------------------------------------- */

html, body {

  margin: 0;

  padding: 0;

}



/* --------------------------------------------------------------------------

   1. DESIGN TOKENS (Custom Properties)

   -------------------------------------------------------------------------- */



.pp-modern {

  /* Colors — Primary */

  --pp-navy: #1F3454;

  --pp-navy-light: #243656;

  --pp-navy-deep: #111D35;

  --pp-navy-mid: #182C44;

  --pp-navy-fade: #3A5878;

  --pp-gold: #D4A843;

  --pp-gold-light: #E8C876;

  --pp-gold-dim: rgba(212, 168, 67, 0.08);



  /* Colors — Brand (Logo Steel Blue) */

  --pp-steel: #6F8FAD;

  --pp-steel-light: #8BA5BE;

  --pp-steel-dim: rgba(111, 143, 173, 0.08);

  --pp-steel-border: rgba(111, 143, 173, 0.2);



  /* Colors — Interactive */

  --pp-blue: #2563EB;

  --pp-blue-hover: #1D4ED8;

  --pp-green: #16A34A;

  --pp-red: #DC2626;



  /* Colors — Neutrals */

  --pp-white: #FFFFFF;

  --pp-gray-50: #F9FAFB;

  --pp-gray-100: #F3F4F6;

  --pp-gray-200: #E5E7EB;

  --pp-gray-500: #6B7280;

  --pp-gray-700: #374151;

  --pp-gray-900: #111827;



  /* Typography */

  --pp-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pp-font-display: 'Plus Jakarta Sans', sans-serif;



  /* Spacing */

  --pp-space-xs: 0.25rem;

  --pp-space-sm: 0.5rem;

  --pp-space-md: 1rem;

  --pp-space-lg: 1.5rem;

  --pp-space-xl: 2rem;

  --pp-space-2xl: 3rem;

  --pp-space-3xl: 4rem;

  --pp-space-4xl: 6rem;

  --pp-space-5xl: 8rem;



  /* Border Radius */

  --pp-radius-sm: 6px;

  --pp-radius-md: 10px;

  --pp-radius-lg: 16px;

  --pp-radius-full: 9999px;



  /* Shadows */

  --pp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  --pp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

  --pp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  --pp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);



  /* Transitions */

  --pp-transition-fast: 150ms ease;

  --pp-transition-base: 250ms ease;

  --pp-transition-slow: 350ms ease;

}





/* --------------------------------------------------------------------------

   2. BASE RESETS (scoped)

   -------------------------------------------------------------------------- */



.pp-modern {

  font-family: var(--pp-font-body);

  font-size: 15px;

  line-height: 1.7;

  color: var(--pp-gray-700);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  max-width: 100vw;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



.pp-modern *,

.pp-modern *::before,

.pp-modern *::after {

  box-sizing: border-box;

}



.pp-modern img {

  max-width: 100%;

  height: auto;

  display: block;

}



.pp-modern a {

  color: var(--pp-blue);

  text-decoration: none;

  transition: color var(--pp-transition-fast);

}



.pp-modern a:hover {

  color: var(--pp-blue-hover);

}





/* --------------------------------------------------------------------------

   3. TYPOGRAPHY

   -------------------------------------------------------------------------- */



.pp-modern h1,

.pp-modern h2,

.pp-modern h3,

.pp-modern h4,

.pp-modern h5,

.pp-modern h6 {

  font-family: var(--pp-font-heading);

  color: var(--pp-gray-900);

  font-weight: 700;

  line-height: 1.25;

  margin: 0 0 var(--pp-space-md) 0;

}



.pp-modern h1 { font-size: 28px; }

.pp-modern h2 { font-size: 28px; }

.pp-modern h3 { font-size: 20px; }

.pp-modern h4 { font-size: 15px; }

.pp-modern h5 { font-size: 14px; }



.pp-modern p {

  margin: 0 0 var(--pp-space-md) 0;

}



.pp-modern .pp-text-sm { font-size: 12px; }

.pp-modern .pp-text-base { font-size: 14px; }

.pp-modern .pp-text-lg { font-size: 15px; }

.pp-modern .pp-text-xl { font-size: 18px; }

.pp-modern .pp-text-2xl { font-size: 21px; }

.pp-modern .pp-text-3xl { font-size: 28px; }



.pp-modern .pp-text-muted {

  color: var(--pp-gray-500);

}



.pp-modern .pp-text-white {

  color: var(--pp-white);

}



.pp-modern .pp-subheading {

  font-size: 15px;

  color: var(--pp-gray-500);

  font-weight: 400;

  line-height: 1.7;

}



/* Desktop typography scale-up */

@media (min-width: 768px) {

  .pp-modern h1 { font-size: 36px; }

  .pp-modern h2 { font-size: 32px; }

  .pp-modern h3 { font-size: 20px; }



  .pp-modern p,

  .pp-modern .pp-subheading {

    font-size: 15px;

  }

}



@media (min-width: 1024px) {

  .pp-modern h1 { font-size: 43px; }

  .pp-modern h2 { font-size: 39px; }

  .pp-modern h3 { font-size: 21px; }

  .pp-modern h4 { font-size: 17px; }



  .pp-modern p,

  .pp-modern .pp-subheading {

    font-size: 17px;

  }



  .pp-modern .pp-pricing__features li {

    font-size: 17px;

  }



  .pp-modern .pp-pricing__period {

    font-size: 17px;

  }



  .pp-modern .pp-hero__trust {

    font-size: 15px;

  }



  .pp-modern .pp-pricing__addon-title {

    font-size: 17px;

  }



  .pp-modern .pp-pricing__addon-desc,

  .pp-modern .pp-pricing__addon-link {

    font-size: 15px;

  }



  .pp-modern .pp-guarantee-section p {

    font-size: 17px;

  }



  .pp-modern .pp-faq__question {

    font-size: 17px;

  }



  .pp-modern .pp-faq__answer-inner {

    font-size: 15px;

  }

}



@media (min-width: 1440px) {

  .pp-modern h1 { font-size: 46px; }

  .pp-modern h2 { font-size: 43px; }

  .pp-modern h3 { font-size: 23px; }

  .pp-modern h4 { font-size: 18px; }



  .pp-modern p,

  .pp-modern .pp-subheading {

    font-size: 18px;

  }



  .pp-modern .pp-pricing__features li {

    font-size: 18px;

  }



  .pp-modern .pp-pricing__period {

    font-size: 18px;

  }



  .pp-modern .pp-hero__trust {

    font-size: 16px;

  }



  .pp-modern .pp-pricing__addon-title {

    font-size: 18px;

  }



  .pp-modern .pp-pricing__addon-desc,

  .pp-modern .pp-pricing__addon-link {

    font-size: 16px;

  }



  .pp-modern .pp-guarantee-section p {

    font-size: 18px;

  }



  .pp-modern .pp-faq__question {

    font-size: 18px;

  }



  .pp-modern .pp-faq__answer-inner {

    font-size: 16px;

  }

}





/* --------------------------------------------------------------------------

   4. LAYOUT — Containers & Sections

   -------------------------------------------------------------------------- */



.pp-modern .pp-container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--pp-space-md);

}



@media (min-width: 768px) {

  .pp-modern .pp-container {

    padding: 0 var(--pp-space-xl);

  }

}



.pp-modern .pp-section {

  padding: var(--pp-space-2xl) 0;

}



@media (min-width: 768px) {

  .pp-modern .pp-section {

    padding: var(--pp-space-3xl) 0;

  }

}



@media (min-width: 1024px) {

  .pp-modern .pp-section {

    padding: 6rem 0;

  }

}



.pp-modern .pp-section--compact {

  padding: var(--pp-space-xl) 0;

}



.pp-modern .pp-section--white {

  background-color: var(--pp-white);

}



.pp-modern .pp-section--gray {

  background: linear-gradient(180deg, #F3F4F6 0%, #F9FAFB 100%);

}



.pp-modern .pp-section--warm {

  background: linear-gradient(180deg, #FFFBF5 0%, #FFF8ED 100%);

}



.pp-modern .pp-section--navy {

  background-color: var(--pp-navy);

  color: var(--pp-white);

}



.pp-modern .pp-section--navy h1,

.pp-modern .pp-section--navy h2,

.pp-modern .pp-section--navy h3,

.pp-modern .pp-section--navy h4 {

  color: var(--pp-white);

}



.pp-modern .pp-section--navy .pp-subheading {

  color: rgba(255, 255, 255, 0.75);

  font-size: 15px;

  line-height: 1.7;

}



.pp-modern .pp-section-header {

  text-align: center;

  max-width: 720px;

  margin: 0 auto var(--pp-space-2xl);

}



.pp-modern .pp-section-label {

  display: inline-block;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--pp-steel);

  margin-bottom: var(--pp-space-sm);

}



.pp-modern .pp-section--navy .pp-section-label {

  color: var(--pp-gold-light);

}





/* --------------------------------------------------------------------------

   5. NAVIGATION BAR — White background, logo-friendly

   -------------------------------------------------------------------------- */



.pp-modern .pp-nav {

  background-color: var(--pp-white);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  transition: box-shadow var(--pp-transition-base), border-color var(--pp-transition-base);

  border-bottom: 1px solid var(--pp-gray-200);

}



/* Spacer to prevent content from hiding behind the fixed nav */

.pp-modern .pp-nav + * {

  margin-top: 72px;

}



.pp-modern .pp-nav.pp-nav--scrolled {

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);

  border-bottom-color: var(--pp-steel-border);

}



.pp-modern .pp-nav__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 72px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 7px;

}



@media (min-width: 1024px) {

  .pp-modern .pp-nav__inner {

    padding: 7px var(--pp-space-3xl);

  }

}



.pp-modern .pp-nav__logo {

  display: flex;

  align-items: center;

  gap: var(--pp-space-sm);

  text-decoration: none;

}



.pp-modern .pp-nav__logo img {

  height: 72px;

  width: auto;

  border: 1px solid var(--pp-gray-200);

  border-radius: 4px;

}



.pp-modern .pp-nav__links {

  display: none;

  list-style: none;

  margin: 0 auto 0 var(--pp-space-3xl);

  padding: 0;

  gap: var(--pp-space-lg);

  align-items: center;

}



@media (min-width: 1024px) {

  .pp-modern .pp-nav__links {

    display: flex;

  }

}



.pp-modern .pp-nav__links a {

  color: var(--pp-gray-700);

  font-size: 14px;

  font-weight: 500;

  text-decoration: none;

  transition: color var(--pp-transition-fast);

  white-space: nowrap;

}



.pp-modern .pp-nav__links a:hover {

  color: var(--pp-steel);

}



.pp-modern .pp-nav__cta {

  display: none;

  margin-left: auto;

  flex-shrink: 0;

}



@media (min-width: 1024px) {

  .pp-modern .pp-nav__cta {

    display: flex !important;

  }

}



.pp-modern .pp-nav__cta .pp-btn--gold {

  padding: 8px;

  font-size: 13px;

}



.pp-modern .pp-nav__phone {

  font-size: 12px;

  color: var(--pp-gray-500);

  white-space: nowrap;

}



.pp-modern .pp-nav__phone a {

  color: var(--pp-gray-700);

  font-weight: 600;

  text-decoration: none;

}



.pp-modern .pp-nav__phone a:hover {

  color: var(--pp-blue);

}



.pp-modern .pp-nav__login {

  font-size: 13px;

  font-weight: 500;

  color: var(--pp-gray-700);

  text-decoration: none;

  transition: color var(--pp-transition-fast);

}



.pp-modern .pp-nav__login:hover {

  color: var(--pp-steel);

}



.pp-modern .pp-nav__mobile-phone {

  color: var(--pp-gold-light) !important;

  font-weight: 600;

}



/* Hamburger Toggle */

.pp-modern .pp-nav__toggle {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 7px;

  width: 44px;

  height: 44px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 8px;

  margin-left: var(--pp-space-md);

}



@media (min-width: 1024px) {

  .pp-modern .pp-nav__toggle {

    display: none;

  }

}



.pp-modern .pp-nav__toggle span {

  display: block;

  width: 28px;

  height: 3.5px;

  background: var(--pp-steel);

  border-radius: 2px;

  transition: transform var(--pp-transition-base), opacity var(--pp-transition-base);

}



.pp-modern .pp-nav__toggle.pp-active span:nth-child(1) {

  transform: translateY(10.5px) rotate(45deg);

}



.pp-modern .pp-nav__toggle.pp-active span:nth-child(2) {

  opacity: 0;

}



.pp-modern .pp-nav__toggle.pp-active span:nth-child(3) {

  transform: translateY(-10.5px) rotate(-45deg);

}



/* Mobile Menu Drawer — Navy dropdown contrasts with white nav */

.pp-modern .pp-nav__mobile {

  display: none;

  background-color: var(--pp-navy);

  padding: var(--pp-space-md) var(--pp-space-md) var(--pp-space-lg);

}



.pp-modern .pp-nav__mobile.pp-active {

  display: block;

}



.pp-modern .pp-nav__mobile a {

  display: block;

  color: rgba(255, 255, 255, 0.85);

  padding: 14px 0;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.01em;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  text-decoration: none;

}



.pp-modern .pp-nav__mobile a:hover {

  color: var(--pp-white);

}



.pp-modern .pp-nav__mobile .pp-btn {

  margin-top: var(--pp-space-md);

  width: 100%;

  text-align: center;

}





/* --------------------------------------------------------------------------

   7. BUTTONS

   -------------------------------------------------------------------------- */



.pp-modern .pp-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--pp-space-sm);

  font-family: var(--pp-font-body);

  font-size: 14px;

  font-weight: 600;

  padding: 14px 28px;

  border-radius: var(--pp-radius-md);

  border: 2px solid transparent;

  cursor: pointer;

  text-decoration: none;

  transition: all var(--pp-transition-base);

  line-height: 1;

  white-space: nowrap;

}



.pp-modern .pp-btn:hover {

  text-decoration: none;

}



/* Primary — Blue */

.pp-modern .pp-btn--primary {

  background-color: var(--pp-blue);

  color: var(--pp-white);

  border-color: var(--pp-blue);

  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);

}



.pp-modern .pp-btn--primary:hover {

  background-color: var(--pp-blue-hover);

  border-color: var(--pp-blue-hover);

  color: var(--pp-white);

  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);

  transform: translateY(-2px);

}



/* Secondary — Outlined */

.pp-modern .pp-btn--secondary {

  background-color: transparent;

  color: var(--pp-navy);

  border-color: var(--pp-navy);

}



.pp-modern .pp-btn--secondary:hover {

  background-color: var(--pp-navy);

  color: var(--pp-white);

}



/* On dark backgrounds */

.pp-modern .pp-section--navy .pp-btn--secondary,

.pp-modern .pp-hero .pp-btn--secondary {

  background: transparent;

  color: var(--pp-white);

  border: 2px solid rgba(255, 255, 255, 0.5);

}



.pp-modern .pp-section--navy .pp-btn--secondary:hover,

.pp-modern .pp-hero .pp-btn--secondary:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.8);

  color: var(--pp-white);

}



/* Gold accent — for nav / special CTAs */

.pp-modern .pp-btn--gold {

  background-color: var(--pp-gold);

  color: var(--pp-navy);

  border-color: var(--pp-gold);

  font-weight: 700;

}



.pp-modern .pp-btn--gold:hover {

  background-color: var(--pp-gold-light);

  border-color: var(--pp-gold-light);

  color: var(--pp-navy);

  transform: translateY(-1px);

}



/* White — high-visibility CTA on dark backgrounds */

.pp-modern .pp-btn--white {

  background-color: var(--pp-white);

  color: var(--pp-navy);

  border-color: var(--pp-white);

  font-weight: 700;

}



.pp-modern .pp-btn--white:hover {

  background-color: var(--pp-gray-100);

  border-color: var(--pp-gray-100);

  color: var(--pp-navy);

  transform: translateY(-1px);

}



/* Ghost outline button on dark backgrounds */

.pp-modern .pp-hero .pp-btn--white,

.pp-modern .pp-section--navy .pp-btn--white {

  background: transparent;

  color: var(--pp-white);

  border: 2px solid rgba(255, 255, 255, 0.4);

}



.pp-modern .pp-hero .pp-btn--white:hover,

.pp-modern .pp-section--navy .pp-btn--white:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.7);

  color: var(--pp-white);

}



/* Green — for success/guarantee CTAs */

.pp-modern .pp-btn--green {

  background-color: var(--pp-green);

  color: var(--pp-white);

  border-color: var(--pp-green);

}



.pp-modern .pp-btn--green:hover {

  background-color: #15803d;

  border-color: #15803d;

  color: var(--pp-white);

  transform: translateY(-1px);

}



/* Size variants */

.pp-modern .pp-btn--sm {

  font-size: 12px;

  padding: 10px 20px;

}



.pp-modern .pp-btn--lg {

  font-size: 15px;

  padding: 18px 40px;

  border-radius: var(--pp-radius-md);

}



@media (min-width: 768px) {

  .pp-modern .pp-btn--lg {

    font-size: 16px;

  }

}



.pp-modern .pp-btn--full {

  width: 100%;

}





/* --------------------------------------------------------------------------

   8. CARDS (Generic) — Elevated, premium

   -------------------------------------------------------------------------- */



.pp-modern .pp-card {

  background: var(--pp-white);

  border-radius: var(--pp-radius-lg);

  box-shadow: var(--pp-shadow-md);

  padding: var(--pp-space-2xl);

  border: 1px solid rgba(0, 0, 0, 0.04);

  transition: box-shadow var(--pp-transition-base), transform var(--pp-transition-base);

}



.pp-modern .pp-card:hover {

  box-shadow: var(--pp-shadow-lg);

  transform: translateY(-2px);

}



/* Steel blue left border on cards in gray sections */

.pp-modern .pp-section--gray .pp-card {

  border-left: 3px solid var(--pp-steel);

}





/* --------------------------------------------------------------------------

   9. PRICING CARD — Premium, substantial

   -------------------------------------------------------------------------- */



.pp-modern .pp-pricing {

  background: var(--pp-white);

  border-radius: var(--pp-radius-lg);

  box-shadow: var(--pp-shadow-xl);

  border-top: 5px solid var(--pp-gold);

  padding: var(--pp-space-2xl) var(--pp-space-lg);

  text-align: center;

  max-width: 540px;

  margin: 0 var(--pp-space-sm);

  position: relative;

}



@media (min-width: 768px) {

  .pp-modern .pp-pricing {

    padding: var(--pp-space-2xl) var(--pp-space-xl);

    margin: 0 auto;

  }

}



/* Subtle gold ambient glow behind the card */

.pp-modern .pp-pricing::before {

  content: '';

  position: absolute;

  top: -20px;

  left: 50%;

  transform: translateX(-50%);

  width: 80%;

  height: 40px;

  background: radial-gradient(ellipse, rgba(212, 168, 67, 0.12) 0%, transparent 70%);

  z-index: -1;

  pointer-events: none;

}



@media (min-width: 768px) {

  .pp-modern .pp-pricing {

    padding: var(--pp-space-3xl) var(--pp-space-2xl);

  }

}



.pp-modern .pp-pricing__label {

  font-size: 14px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--pp-gold);

  margin-bottom: var(--pp-space-sm);

}



.pp-modern .pp-pricing__price {

  font-family: var(--pp-font-heading);

  font-size: 57px;

  font-weight: 800;

  color: var(--pp-gray-900);

  line-height: 1;

  margin-bottom: var(--pp-space-xs);

}



@media (min-width: 768px) {

  .pp-modern .pp-pricing__price {

    font-size: 64px;

  }

}



.pp-modern .pp-pricing__price span {

  font-size: 18px;

  font-weight: 500;

  color: var(--pp-gray-500);

}



.pp-modern .pp-pricing__period {

  font-size: 15px;

  color: var(--pp-gray-500);

  margin-bottom: var(--pp-space-lg);

}



.pp-modern .pp-pricing__original {

  font-size: 15px;

  color: var(--pp-gray-500);

  text-decoration: line-through;

  margin-bottom: var(--pp-space-xs);

}



.pp-modern .pp-pricing__save {

  display: inline-block;

  background: var(--pp-gold-dim);

  color: var(--pp-gold);

  font-size: 13px;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: var(--pp-radius-full);

  margin-bottom: var(--pp-space-lg);

}



.pp-modern .pp-pricing__divider {

  border: none;

  border-top: 1px solid var(--pp-gray-200);

  margin: var(--pp-space-lg) 0;

}



.pp-modern .pp-pricing__features {

  list-style: none;

  padding: 0;

  margin: 0 0 var(--pp-space-xl) 0;

  text-align: left;

}



.pp-modern .pp-pricing__features li {

  display: flex;

  align-items: flex-start;

  gap: var(--pp-space-sm);

  padding: var(--pp-space-sm) 0;

  font-size: 15px;

  color: var(--pp-gray-700);

  line-height: 1.7;

}



.pp-modern .pp-pricing__features li::before {

  content: "\2713";

  color: var(--pp-gold);

  font-weight: 700;

  font-size: 15px;

  flex-shrink: 0;

  margin-top: 1px;

}



.pp-modern .pp-pricing__upgrade-hint {

  text-align: center;

  font-size: 14px;

  color: var(--pp-gold);

  margin: 16px 0 7px;

  font-weight: 500;

}



.pp-modern .pp-pricing .pp-btn {

  width: 100%;

  font-size: 19px;

}



@media (min-width: 768px) {

  .pp-modern .pp-pricing .pp-btn {

    font-size: 20px;

  }

}





/* --------------------------------------------------------------------------

   14. FOOTER — Deeper navy

   -------------------------------------------------------------------------- */



.pp-modern .pp-footer {

  background-color: var(--pp-navy-deep);

  color: rgba(255, 255, 255, 0.7);

  padding: var(--pp-space-4xl) 0 var(--pp-space-xl);

}



.pp-modern .pp-footer__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--pp-space-2xl);

  margin-bottom: var(--pp-space-2xl);

}



@media (min-width: 768px) {

  .pp-modern .pp-footer__grid {

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: var(--pp-space-xl);

  }

}



.pp-modern .pp-footer .pp-nav__logo img {

  filter: none;

  opacity: 1;

  border: none;

}



.pp-modern .pp-footer__brand img {

  height: 52px;

  width: auto;

  margin-bottom: var(--pp-space-sm);

}



.pp-modern .pp-footer__tagline {

  font-style: italic;

  font-size: 13px;

  color: var(--pp-steel-light);

  margin-bottom: var(--pp-space-md);

  letter-spacing: 0.01em;

}



.pp-modern .pp-footer__brand p {

  font-size: 13px;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.55);

  max-width: 300px;

}



.pp-modern .pp-footer__heading {

  font-family: var(--pp-font-heading);

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--pp-white);

  margin-bottom: var(--pp-space-md);

}



.pp-modern .pp-footer__links {

  list-style: none;

  padding: 0;

  margin: 0;

}



.pp-modern .pp-footer__links li {

  margin-bottom: var(--pp-space-sm);

}



.pp-modern .pp-footer__links a {

  color: rgba(255, 255, 255, 0.6);

  font-size: 13px;

  text-decoration: none;

  transition: color var(--pp-transition-fast);

}



.pp-modern .pp-footer__links a:hover {

  color: var(--pp-white);

}



.pp-modern .pp-footer__bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: var(--pp-space-xl);

  display: flex;

  flex-direction: column;

  gap: var(--pp-space-md);

  align-items: center;

  text-align: center;

}



@media (min-width: 768px) {

  .pp-modern .pp-footer__bottom {

    flex-direction: row;

    justify-content: space-between;

    text-align: left;

  }

}



.pp-modern .pp-footer__copy {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

}



.pp-modern .pp-footer__contact {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.55);

}



.pp-modern .pp-footer__contact a {

  color: var(--pp-gold-light);

}



.pp-modern .pp-footer__contact a:hover {

  color: var(--pp-gold);

}





/* --------------------------------------------------------------------------

   15. FORM STYLES

   -------------------------------------------------------------------------- */



.pp-modern .pp-form-group {

  margin-bottom: var(--pp-space-lg);

}



.pp-modern .pp-label {

  display: block;

  font-size: 12px;

  font-weight: 600;

  color: var(--pp-gray-700);

  margin-bottom: var(--pp-space-xs);

}



.pp-modern .pp-input,

.pp-modern .pp-select,

.pp-modern .pp-textarea {

  display: block;

  width: 100%;

  padding: 12px 14px;

  font-family: var(--pp-font-body);

  font-size: 14px;

  color: var(--pp-gray-900);

  background: var(--pp-white);

  border: 1.5px solid var(--pp-gray-200);

  border-radius: var(--pp-radius-sm);

  transition: border-color var(--pp-transition-fast), box-shadow var(--pp-transition-fast);

  outline: none;

}



.pp-modern .pp-input:focus,

.pp-modern .pp-select:focus,

.pp-modern .pp-textarea:focus {

  border-color: var(--pp-blue);

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);

}



.pp-modern .pp-input::placeholder {

  color: var(--pp-gray-500);

}



/* Validation states */

.pp-modern .pp-form-group--valid .pp-input,

.pp-modern .pp-form-group--valid .pp-select {

  border-color: var(--pp-green);

}



.pp-modern .pp-form-group--valid .pp-input:focus,

.pp-modern .pp-form-group--valid .pp-select:focus {

  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);

}



.pp-modern .pp-form-group--error .pp-input,

.pp-modern .pp-form-group--error .pp-select {

  border-color: var(--pp-red);

}



.pp-modern .pp-form-group--error .pp-input:focus,

.pp-modern .pp-form-group--error .pp-select:focus {

  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);

}



.pp-modern .pp-form-message {

  font-size: 12px;

  margin-top: var(--pp-space-xs);

}



.pp-modern .pp-form-group--valid .pp-form-message {

  color: var(--pp-green);

}



.pp-modern .pp-form-group--error .pp-form-message {

  color: var(--pp-red);

}



.pp-modern .pp-form-hint {

  font-size: 12px;

  color: var(--pp-gray-500);

  margin-top: var(--pp-space-xs);

}



/* Checkbox / Radio */

.pp-modern .pp-checkbox {

  display: flex;

  align-items: flex-start;

  gap: var(--pp-space-sm);

  cursor: pointer;

  font-size: 13px;

}



.pp-modern .pp-checkbox input[type="checkbox"] {

  width: 18px;

  height: 18px;

  margin-top: 2px;

  flex-shrink: 0;

  accent-color: var(--pp-blue);

}





/* --------------------------------------------------------------------------

   17. GUARANTEE / BADGE COMPONENT

   -------------------------------------------------------------------------- */



.pp-modern .pp-guarantee {

  display: flex;

  align-items: flex-start;

  gap: var(--pp-space-lg);

  background: rgba(212, 168, 67, 0.08);

  border: 1px solid rgba(212, 168, 67, 0.2);

  border-radius: var(--pp-radius-lg);

  padding: var(--pp-space-xl);

}



.pp-modern .pp-guarantee__icon {

  flex-shrink: 0;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(212, 168, 67, 0.1);

  border-radius: var(--pp-radius-full);

  color: var(--pp-gold);

  font-size: 21px;

}



.pp-modern .pp-guarantee h4 {

  color: var(--pp-gold);

  margin-bottom: var(--pp-space-xs);

}



.pp-modern .pp-guarantee p {

  color: var(--pp-gray-500);

  font-size: 14px;

  margin: 0;

}





/* --------------------------------------------------------------------------

   17c. PRICING GRID — flex container for 1-2 cards

   -------------------------------------------------------------------------- */



/* pricing grid supports 1-2 cards */

.pp-modern .pp-pricing-grid {

  display: flex;

  justify-content: center;

  gap: var(--pp-space-xl);

  flex-wrap: wrap;

}



.pp-modern .pp-pricing-grid .pp-pricing {

  flex: 0 1 540px;

}





/* --------------------------------------------------------------------------

   PROGRESS STEPS (shared across signup flow pages)

   -------------------------------------------------------------------------- */



.pp-modern .pp-steps {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  max-width: 480px;

  margin: 32px auto;

  padding: 0 16px;

}



.pp-modern .pp-steps__item {

  display: flex;

  align-items: center;

  gap: 8px;

}



.pp-modern .pp-steps__number {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  font-weight: 700;

  background: #e5e7eb;

  color: #6b7280;

}



.pp-modern .pp-steps__item--active .pp-steps__number {

  background: var(--pp-blue);

  color: #fff;

}



.pp-modern .pp-steps__item--completed .pp-steps__number {

  background: #22c55e;

  color: #fff;

}



.pp-modern .pp-steps__label {

  font-size: 13px;

  font-weight: 600;

  color: #6b7280;

  white-space: nowrap;

}



.pp-modern .pp-steps__item--active .pp-steps__label {

  color: var(--pp-navy);

}



.pp-modern .pp-steps__item--completed .pp-steps__label {

  color: var(--pp-gray-700);

}



.pp-modern .pp-steps__connector {

  flex: 1;

  height: 2px;

  background: #e5e7eb;

  margin: 0 12px;

  min-width: 24px;

}



.pp-modern .pp-steps__label-short {

  display: none;

}





/* --------------------------------------------------------------------------

   CREDENTIAL UPGRADE ADD-ON

   -------------------------------------------------------------------------- */



.pp-modern .pp-pricing__addon {

  background: #f8f6f0;

  border-top: 2px solid var(--pp-gold);

  padding: 20px;

  margin: 24px 0 0;

  border-radius: 0;

  text-align: left;

}



.pp-modern .pp-pricing__addon-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 16px;

}



.pp-modern .pp-pricing__addon-label {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  cursor: pointer;

}



.pp-modern .pp-pricing__addon-label input[type="checkbox"] {

  width: 20px;

  height: 20px;

  accent-color: var(--pp-gold);

  cursor: pointer;

  flex-shrink: 0;

  margin-top: 2px;

}



.pp-modern .pp-pricing__addon-title-wrap {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.pp-modern .pp-pricing__addon-badge {

  display: inline-block;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--pp-gold);

  background: rgba(212, 168, 67, 0.12);

  padding: 2px 8px;

  border-radius: 4px;

  width: fit-content;

}



.pp-modern .pp-pricing__addon-title {

  font-size: 15px;

  font-weight: 700;

  color: var(--pp-navy);

  line-height: 1.3;

}



.pp-modern .pp-pricing__addon-price {

  font-size: 17px;

  font-weight: 700;

  color: var(--pp-gold);

  flex-shrink: 0;

  line-height: 1;

  margin-top: 14px;

}



/* SVG credential card preview */

.pp-modern .pp-pricing__addon-preview-card {

  margin: 0 0 16px;

  text-align: center;

}



.pp-modern .pp-pricing__addon-svg {

  width: 100%;

  max-width: 280px;

  height: auto;

  border-radius: 12px;

  filter: drop-shadow(0 2px 8px rgba(17, 29, 53, 0.15));

}



.pp-modern .pp-pricing__addon-desc {

  font-size: 14px;

  line-height: 1.6;

  color: var(--pp-navy);

  margin: 0 0 12px 0;

}



.pp-modern .pp-pricing__addon-perks {

  list-style: none;

  padding: 0;

  margin: 0 0 14px 0;

}



.pp-modern .pp-pricing__addon-perks li {

  position: relative;

  padding-left: 20px;

  font-size: 13px;

  line-height: 1.6;

  color: #4a5568;

  margin-bottom: 4px;

}



.pp-modern .pp-pricing__addon-perks li::before {

  content: "\2713";

  position: absolute;

  left: 0;

  color: var(--pp-gold);

  font-weight: 700;

}



.pp-modern .pp-pricing__addon-link {

  display: inline-block;

  font-size: 14px;

  font-weight: 600;

  color: var(--pp-blue);

  text-decoration: none;

}



.pp-modern .pp-pricing__addon-link:hover {

  text-decoration: underline;

}



.pp-modern .pp-pricing__addon-link--centered {

  display: block;

  text-align: center;

  margin-top: 10px;

}



.pp-modern .pp-pricing__addon-desc--narrow {

  display: none;

}



.pp-modern .pp-pricing__addon-inline-title {

  display: none;

}



/* Compact addon layout (signup confirmation page) */

.pp-modern .pp-pricing__addon-body--compact {

  padding-top: 12px;

  margin-left: 0;

}



@media (min-width: 768px) {

  .pp-modern .pp-pricing__addon-body--compact {

    padding-left: 2rem;

    padding-right: 2rem;

  }

}



.pp-modern .pp-pricing__addon-row {

  display: flex;

  gap: 14px;

  align-items: flex-start;

}



.pp-modern .pp-pricing__addon-thumb {

  width: 100px;

  min-width: 100px;

  height: auto;

  border-radius: 6px;

  filter: drop-shadow(0 1px 4px rgba(17, 29, 53, 0.12));

}



.pp-modern .pp-pricing__addon-copy {

  flex: 1;

}



.pp-modern .pp-pricing__addon-copy .pp-pricing__addon-desc {

  font-size: 14px;

  line-height: 1.5;

  color: var(--pp-navy);

  margin: 0 0 6px 0;

}



.pp-modern .pp-pricing__addon-copy .pp-pricing__addon-link {

  font-size: 13px;

}



/* Addon body base transition */

.pp-modern .pp-pricing__addon-body {

  transition: opacity 0.3s ease, filter 0.3s ease;

}



/* Deselected (unchecked) state — faded "missing out" look */

.pp-modern .pp-pricing__addon.is-deselected .pp-pricing__addon-body {

  opacity: 0.45;

  filter: grayscale(0.8);

  transition: opacity 0.3s ease, filter 0.3s ease;

}



.pp-modern .pp-pricing__addon.is-deselected .pp-pricing__addon-price {

  color: #999;

  transition: color 0.3s ease;

}



.pp-modern .pp-pricing__addon.is-deselected .pp-pricing__addon-badge {

  background: rgba(150, 150, 150, 0.15);

  color: #999;

  transition: background 0.3s ease, color 0.3s ease;

}



.pp-modern .pp-pricing__addon.is-deselected {

  border-top-color: #ccc;

  transition: border-top-color 0.3s ease;

}



.pp-modern .pp-pricing__addon.is-deselected .pp-pricing__addon-title {

  color: #999;

  transition: color 0.3s ease;

}





/* --------------------------------------------------------------------------

   17d. GUARANTEE SECTION — Standalone reassurance block

   -------------------------------------------------------------------------- */



.pp-modern .pp-guarantee-section {

  text-align: center;

  max-width: 640px;

  margin: 0 auto;

}



.pp-modern .pp-guarantee-section__icon {

  width: 64px;

  height: 64px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto var(--pp-space-lg);

  background: var(--pp-gold-dim);

  border: 2px solid rgba(212, 168, 67, 0.2);

  border-radius: var(--pp-radius-full);

  color: var(--pp-gold);

  font-size: 25px;

}



.pp-modern .pp-guarantee-section h2 {

  color: var(--pp-gold);

  margin-bottom: var(--pp-space-md);

}



.pp-modern .pp-guarantee-section p {

  color: var(--pp-gray-500);

  font-size: 15px;

  line-height: 1.7;

  margin-bottom: var(--pp-space-md);

}



.pp-modern .pp-guarantee-section .pp-btn {

  margin-top: var(--pp-space-sm);

}





/* --------------------------------------------------------------------------

   17e. COMPACT FOOTER — Single-row for pricing/decision pages

   -------------------------------------------------------------------------- */



.pp-modern .pp-footer--compact {

  padding: var(--pp-space-lg) 0;

}



.pp-modern .pp-footer--compact .pp-footer__grid {

  display: none;

}



.pp-modern .pp-footer--compact .pp-footer__bottom {

  border-top: none;

  padding-top: 0;

}





/* --------------------------------------------------------------------------

   17e-ii. LANDING FOOTER — Compact with utility links for landing pages

   -------------------------------------------------------------------------- */



.pp-modern .pp-footer--landing {

  padding: var(--pp-space-lg) 0;

}



.pp-modern .pp-footer--landing .pp-footer__bottom {

  border-top: none;

  padding-top: 0;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: var(--pp-space-sm);

}



.pp-modern .pp-footer--landing .pp-footer__utility {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 2px 6px;

}



.pp-modern .pp-footer--landing .pp-footer__utility a {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.5);

  text-decoration: none;

  transition: color 0.15s ease;

}



.pp-modern .pp-footer--landing .pp-footer__utility a:hover {

  color: #fff;

}



.pp-modern .pp-footer--landing .pp-footer__utility span {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.2);

}





/* --------------------------------------------------------------------------

   17f. PAYMENT RESULT — Upgrade note callout

   -------------------------------------------------------------------------- */



.pp-modern .pp-result-upgrade-note {

  background: #f8f6f0;

  border-left: 3px solid var(--pp-gold);

  padding: 14px 16px;

  margin: 16px 0;

  font-size: 15px;

  line-height: 1.5;

  color: var(--pp-navy);

  text-align: left;

}





/* --------------------------------------------------------------------------

   RESPONSIVE OVERRIDES (steps, addon, order elements)

   -------------------------------------------------------------------------- */



@media (max-width: 767px) {

  .pp-modern .pp-confirm-section {

    padding-top: 0;

  }



  .pp-modern .pp-pricing__addon-row {

    display: block;

    overflow: hidden;

  }



  .pp-modern .pp-pricing__addon-thumb {

    float: left;

    min-width: unset;

    margin: 0 10px 6px 0;

  }



  .pp-modern .pp-pricing__addon-link--centered {

    clear: both;

    font-size: 12px;

  }



  .pp-modern .pp-pricing__addon-desc--wide {

    display: none;

  }



  .pp-modern .pp-pricing__addon-desc--narrow {

    display: block;

  }



  .pp-modern .pp-pricing__addon-body--compact {

    padding-top: 0;

  }



  .pp-modern .pp-pricing__addon-header {

    margin-bottom: 8px;

  }



  .pp-modern .pp-pricing__addon-title {

    display: none;

  }



  .pp-modern .pp-pricing__addon-inline-title {

    display: block;

    font-size: 16px;

    font-weight: 800;

    color: var(--pp-navy);

    line-height: 1.3;

  }



  .pp-modern .pp-pricing__addon-badge {

    font-size: 12px;

    padding: 1px 6px;

  }



  .pp-modern .pp-pricing__addon-price {

    font-size: 15px;

  }



  .pp-modern .pp-pricing__addon {

    padding: 14px;

  }



  .pp-modern .pp-pricing__addon-copy {

    display: none;

  }



  .pp-modern .pp-pricing__addon-copy .pp-pricing__addon-desc {

    font-size: 13px;

  }

}



@media (max-width: 425px) {

  .pp-modern .pp-steps__label-full {

    display: none;

  }



  .pp-modern .pp-steps__label-short {

    display: inline;

  }



  .pp-modern .pp-order-account {

    margin-bottom: 10px;

  }



  .pp-modern .pp-pricing__addon {

    margin-top: 10px;

  }



  .pp-modern .pp-order-divider {

    margin: 10px 0;

  }

}



@media (max-width: 375px) {

  .pp-modern .pp-pricing__addon-body .pp-pricing__addon-copy .pp-pricing__addon-desc {

    line-height: 1.4;

    margin: 0;

  }

}



@media (max-width: 320px) {

  .pp-modern .pp-steps__connector {

    min-width: 0;

  }

}





/* --------------------------------------------------------------------------

   18. SCROLL ANIMATIONS

   -------------------------------------------------------------------------- */



.pp-modern .pp-animate {

  opacity: 0;

  transform: translateY(24px);

  transition: opacity 0.5s ease, transform 0.5s ease;

}



.pp-modern .pp-animate.pp-visible {

  opacity: 1;

  transform: translateY(0);

}



/* Stagger children */

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(1) { transition-delay: 0ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(2) { transition-delay: 80ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(3) { transition-delay: 160ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(4) { transition-delay: 240ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(5) { transition-delay: 320ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(6) { transition-delay: 400ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(7) { transition-delay: 480ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(8) { transition-delay: 560ms; }

.pp-modern .pp-animate-stagger > .pp-animate:nth-child(9) { transition-delay: 640ms; }



/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .pp-modern .pp-animate {

    opacity: 1;

    transform: none;

    transition: none;

  }

}





/* --------------------------------------------------------------------------

   19. UTILITY CLASSES

   -------------------------------------------------------------------------- */



/* Text alignment */

.pp-modern .pp-text-center { text-align: center; }

.pp-modern .pp-text-left { text-align: left; }

.pp-modern .pp-text-right { text-align: right; }



/* Spacing */

.pp-modern .pp-mt-0 { margin-top: 0; }

.pp-modern .pp-mt-sm { margin-top: var(--pp-space-sm); }

.pp-modern .pp-mt-md { margin-top: var(--pp-space-md); }

.pp-modern .pp-mt-lg { margin-top: var(--pp-space-lg); }

.pp-modern .pp-mt-xl { margin-top: var(--pp-space-xl); }

.pp-modern .pp-mt-2xl { margin-top: var(--pp-space-2xl); }



.pp-modern .pp-mb-0 { margin-bottom: 0; }

.pp-modern .pp-mb-sm { margin-bottom: var(--pp-space-sm); }

.pp-modern .pp-mb-md { margin-bottom: var(--pp-space-md); }

.pp-modern .pp-mb-lg { margin-bottom: var(--pp-space-lg); }

.pp-modern .pp-mb-xl { margin-bottom: var(--pp-space-xl); }

.pp-modern .pp-mb-2xl { margin-bottom: var(--pp-space-2xl); }



.pp-modern .pp-pt-0 { padding-top: 0; }

.pp-modern .pp-pb-0 { padding-bottom: 0; }



/* Display */

.pp-modern .pp-hidden { display: none !important; }



.pp-modern .pp-show-mobile {

  display: block;

}



.pp-modern .pp-hide-mobile {

  display: none;

}



@media (min-width: 768px) {

  .pp-modern .pp-show-mobile {

    display: none;

  }

  .pp-modern .pp-hide-mobile {

    display: block;

  }

}



.pp-modern .pp-show-desktop {

  display: none;

}



@media (min-width: 1024px) {

  .pp-modern .pp-show-desktop {

    display: block;

  }

  .pp-modern .pp-hide-desktop {

    display: none;

  }

}



/* Flexbox helpers */

.pp-modern .pp-flex { display: flex; }

.pp-modern .pp-flex-col { flex-direction: column; }

.pp-modern .pp-flex-wrap { flex-wrap: wrap; }

.pp-modern .pp-items-center { align-items: center; }

.pp-modern .pp-justify-center { justify-content: center; }

.pp-modern .pp-justify-between { justify-content: space-between; }

.pp-modern .pp-gap-sm { gap: var(--pp-space-sm); }

.pp-modern .pp-gap-md { gap: var(--pp-space-md); }

.pp-modern .pp-gap-lg { gap: var(--pp-space-lg); }

.pp-modern .pp-gap-xl { gap: var(--pp-space-xl); }



/* Grid helpers */

.pp-modern .pp-grid-2 {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--pp-space-xl);

}



@media (min-width: 768px) {

  .pp-modern .pp-grid-2 {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* Divider */

.pp-modern .pp-divider {

  border: none;

  border-top: 1px solid var(--pp-gray-200);

  margin: var(--pp-space-2xl) 0;

}



.pp-modern .pp-section--navy .pp-divider {

  border-color: rgba(255, 255, 255, 0.1);

}



/* List with check marks */

.pp-modern .pp-checklist {

  list-style: none;

  padding: 0;

  margin: 0;

}



.pp-modern .pp-checklist li {

  display: flex;

  align-items: flex-start;

  gap: var(--pp-space-sm);

  padding: var(--pp-space-sm) 0;

  font-size: 15px;

  line-height: 1.7;

}



.pp-modern .pp-checklist li::before {

  content: "\2713";

  color: var(--pp-steel);

  font-weight: 700;

  flex-shrink: 0;

  margin-top: 1px;

}



/* Screen reader only */

.pp-modern .pp-sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}