/* PassYourCDL — Section Rhythm
   Spacing variables + alternating background pattern
   white → light neutral → dark navy w/ gold accents
*/
:root {
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
  --c-light: #F4F6FA;
  --c-dark:  #13243F;
  --c-gold-accent: #F5C518;
}

.sec-light {
  background: var(--c-light);
  padding: var(--sp-xl) 0;
}
.sec-dark {
  background: var(--c-dark);
  color: #fff;
  padding: var(--sp-xl) 0;
}
.sec-dark h2,
.sec-dark h3 {
  color: var(--c-gold-accent);
}
.sec-dark a {
  color: var(--c-gold-accent);
}
.sec-dark .btn-gold,
.sec-dark .btn {
  color: #0F2347;
}
.sec-white {
  background: #fff;
  padding: var(--sp-xl) 0;
}

/* ===== RESPONSIVE: NAV + LAYOUT (320–480px) ===== */

@media (max-width: 768px) {
  .nav-actions { gap: 6px; }
  #user-nav { display: flex; gap: 6px; }
  #user-nav .btn { padding: 6px 10px; font-size: 12px; }
}

@media (max-width: 767px) {
  #user-nav .btn-gold { display: none !important; }
  .nav-get-access-btn { display: none !important; }
  .btn-nav-cta { display: none !important; }
}

@media (max-width: 480px) {
  .nav-logo { font-size: 22px; }
  nav { padding: 0 12px; height: 56px; }
  .hamburger { font-size: 22px; padding: 2px; }
  .btn-cart { font-size: 20px; }
  #user-nav .btn { padding: 5px 8px; font-size: 11px; }

  .section { padding: 48px 16px; }
  .section-sm { padding: 32px 16px; }
  .container, .container-sm { padding: 0 16px; }

  .auth-card { padding: 28px 20px; }
  #guarantee { padding: 28px 16px; margin: 0 12px; }
  .legal-page { padding: 32px 16px; }
  .contact-page { padding: 32px 16px; }
  .stat-item { padding: 12px 16px; }
  .free-exam-card { padding: 20px 16px; }
  .how-card { padding: 20px; }
  .testimonial-card { padding: 20px; }

  footer { padding: 40px 16px 24px; }
  .footer-grid { gap: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .footer-bottom a { margin-left: 0; }

  .mobile-menu { width: 280px; padding: 24px 20px; }

  #hero { padding: 48px 16px; }
  .hero-btns { gap: 10px; }
  .hero-btns .btn { width: 100%; }

  .btn-xl { padding: 14px 24px; font-size: 16px; }
}

@media (max-width: 360px) {
  .nav-logo { font-size: 19px; }
  nav { padding: 0 10px; }
  #user-nav .btn { padding: 4px 6px; font-size: 10px; }
  .section { padding: 36px 12px; }
  .container, .container-sm { padding: 0 12px; }
  #hero { padding: 36px 12px; }
  .auth-card { padding: 24px 16px; }
  .legal-page { padding: 28px 12px; }
  .contact-page { padding: 28px 12px; }
  .mobile-menu { width: 260px; padding: 20px 16px; }
}

@media (max-width: 320px) {
  .nav-logo { font-size: 17px; }
  .hamburger { font-size: 20px; }
  .btn-cart { font-size: 18px; }
  #user-nav .btn { padding: 4px 5px; font-size: 10px; }
}