/* Mobile layout for the preview page. */
@media (max-width: 767px) {
  body { overflow-x:hidden; }
  .registration-form { width:100%; padding:12px 8px 0; }
  .registration-form form {
    width:100%;
    max-width:none;
    padding:20px 14px 28px;
    border-radius:12px;
  }
  .hero-brand { margin-bottom:20px; }
  .service-hero h1 { font-size:32px; line-height:1.08; letter-spacing:-.35px; }
  .hero-lead { font-size:16px; line-height:1.55; }
  .hero-art { max-width:none; }
  .hero-art img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; }
  .hero-invitation { margin-top:2px; }
  .hero-action { min-height:44px; padding:11px 16px; }
  .hero-guidance { margin-top:24px; padding-top:20px; }
  .hero-guidance > div + div { padding-top:20px; border-top:1px solid var(--border); }
  .registration-form form>[name=formdiv]>.row,
  .registration-form form>[name=formdiv]>.preview-new-services {
    grid-template-columns:1fr;
    width:100%;
  }
  .registration-form .card-header { grid-template-columns:minmax(0,1fr) auto; }
  .registration-form .card-header h5 { font-size:18px; }
  .registration-form .card-body { padding:18px 16px; }
  .registration-form .btn-outline-secondary,
  .preview-modal-link { width:100%; }
  .social-media { width:100%; }
}

@media (max-width: 400px) {
  .service-hero h1 { font-size:30px; }
  .hero-kicker { font-size:9px; letter-spacing:1.1px; }
  .hero-action { font-size:14px; }
}