
html, body { max-width: 100%; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
main { display: block; width: 100%; }
main > section { padding-top: max(64px, 5vw) !important; padding-bottom: max(64px, 5vw) !important; }
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.form-status-message { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--color-primary); font-weight: 600; }
.legal-dynamic-line { margin-top: 12px; font-size: 13px; line-height: 1.55; color: inherit; opacity: .92; }
.legal-dynamic-line [data-address] { overflow-wrap: anywhere; }

/* Keep every footer destination visibly active and consistent, including
   visited links and links enhanced from the original placeholders. */
.footer-nav-list a,
.footer-nav-list a:link,
.footer-nav-list a:visited,
.footer-social-list a,
.footer-social-list a:link,
.footer-social-list a:visited {
  color: color-mix(in srgb, var(--color-on-primary) 80%, transparent);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus-visible,
.footer-social-list a:hover,
.footer-social-list a:focus-visible {
  color: var(--color-accent);
}

.footer-nav-list a:focus-visible,
.footer-social-list a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  main > section { padding-top: 48px !important; padding-bottom: 48px !important; }
  h1, h2, h3, .hero-title, .section-title { text-align: center !important; overflow-wrap: anywhere; }
  h1, .hero-title { font-size: 34px !important; line-height: 1.15 !important; }
  h2, .section-title { font-size: 27px !important; line-height: 1.2 !important; }
  h3 { font-size: 21px !important; line-height: 1.25 !important; }
  form, [class*="form-grid"], [class*="form-row"], [class*="fields-row"], [class*="field-row"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [class*="form-grid"], [class*="form-row"], [class*="fields-row"], [class*="field-row"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  form input, form select, form textarea, form button { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  [class*="grid"], [class*="columns"], [class*="cards"] { max-width: 100%; }
}

@media (max-width: 480px) {
  main > section { padding-top: 40px !important; padding-bottom: 40px !important; }
  h1, .hero-title { font-size: 30px !important; }
  h2, .section-title { font-size: 24px !important; }
  .btn, button { white-space: normal; }
}

@media (max-width: 360px) {
  h1, .hero-title { font-size: 27px !important; }
  h2, .section-title { font-size: 22px !important; }
}

.home-free-roll-clarification { background: var(--color-surface-elevated); }
.home-free-roll-clarification .centered { width: 100%; display: flex; justify-content: center; padding: 0 24px; }
.home-free-roll-clarification .wrapper { width: 100%; max-width: var(--content-max-width); }
.home-free-roll-clarification p { margin-top: 18px; max-width: 78ch; }
@media (max-width: 768px) { .home-free-roll-clarification .centered { padding: 0 18px; } .home-free-roll-clarification p { text-align: left; } }
