/* Responsive utilities and layout adjustments for mobile */

/* Make media elements fluid */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure buttons and links wrap and can shrink on small screens */
a, button, .nav-btn, .hero-btn {
  max-width: 100%;
  box-sizing: border-box;
}

/* Shell and general containers */
.shell, .policy-shell {
  padding-left: 20px;
  padding-right: 20px;
}

/* Steps grid fallback */
.steps-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Benefits list fallback */
.benefits-card ul {
  grid-template-columns: repeat(2, 1fr);
}

/* Promo adjustments */
.promo-container { padding: 0 8px; }
.promo-card { width: 100%; max-width: 420px; box-sizing: border-box; }

/* Ctas and hero */
.cta-final { width: 100%; box-sizing: border-box; }

/* Policy pages */
.policy-shell { margin: 28px auto; padding: 20px; }
.policy-hero { align-items: flex-start; }

/* Small screens */
@media (max-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-card { max-width: 360px; }
}

@media (max-width: 768px) {
  .shell { padding: 36px 18px 60px; }
  .welcome-card { padding: 28px; border-radius: 18px; }
  .steps-grid { grid-template-columns: 1fr; }
  .benefits-card ul { grid-template-columns: 1fr; }
  .promo-container { justify-content: center; }
  .cta-final { flex-direction: column; align-items: stretch; padding: 18px; gap: 18px; }
  .hero-actions { gap: 10px; }
  .promo-card { width: 100%; }
  .hero-steps-row { width: 100%; padding: 0 8px; }
  .policy-hero { flex-direction: column; gap: 12px; }
  .policy-hero .icon { width:48px; height:48px; }

  /* Home policy buttons: make them responsive and well framed */
  .home-policy-links {
    display: flex;
    gap: 12px;
    margin: 18px auto 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 6px;
    box-sizing: border-box;
  }

  .home-policy-links .policy-btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 999px;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
  }
}

@media (max-width: 420px) {
  .site-header { padding: 8px 12px; }
  .header-container { padding: 0 6px; }
  .brand-name { font-size: 0.95rem; }
  .nav-btn { min-width: auto; padding: 8px 10px; }
  .hero-btn { padding: 10px 14px; font-size: 0.9rem; }
  .welcome-card { padding: 18px; }
  .promo-card { padding: 12px; }
  .policy-shell { margin: 18px 12px; padding: 14px; }
  .policy-section h3 { font-size: 1rem; }
  .lead { font-size: 1rem; }

  /* Ensure policy buttons fit nicely on very small screens */
  .home-policy-links { gap: 10px; padding: 0 4px; }
  .home-policy-links .policy-btn { flex-basis: 48%; padding: 10px 12px; font-size: 0.95rem; }
}

/* Accessibility helpers */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; z-index: 9999; }