html { scroll-padding-top: 24px; }
body, main, .form-layout, .form-surface, .step, fieldset, label { min-width: 0; }
.masthead {
  min-height: 78px;
  height: auto;
  padding-block: max(14px, env(safe-area-inset-top, 0px)) 14px;
  padding-left: max(5%, env(safe-area-inset-left, 0px));
  padding-right: max(5%, env(safe-area-inset-right, 0px));
}
.wordmark { flex: 0 1 auto; }
.preview-label { flex: 0 0 auto; }
.registration { scroll-margin-top: 0; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-layout > *, .two-col > *, .choices > * { min-width: 0; }
.step-copy, .consent span, .identity-status, .policy-pending, .review dd { overflow-wrap: anywhere; }
.consent span { min-width: 0; }
.consent { min-height: 44px; padding-block: 4px; }
.primary, .back { min-height: 48px; white-space: normal; }
.primary { min-height: 56px; }
.form-actions { padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
input, select { scroll-margin-block: 24px; }
.phone-field input { flex: 1 1 0; width: 0 !important; }
.mobile-progress { flex-wrap: wrap; gap: 4px 16px; }
.mobile-progress span { min-width: 0; }
footer {
  flex-wrap: wrap;
  padding-left: max(5%, env(safe-area-inset-left, 0px));
  padding-right: max(5%, env(safe-area-inset-right, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.footer-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 5px; min-height: 44px; }
dialog {
  inset-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  inset-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
  max-width: calc(100% - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.policy-top {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  gap: 16px;
  padding-block: 4px;
  border-bottom: 1px solid var(--line);
}
.policy-top button { flex: 0 0 48px; width: 48px; height: 48px; }

@media (min-width: 1024px) {
  .form-layout { grid-template-columns: 235px minmax(0, 1fr); gap: 56px; }
  .journey { align-self: start; position: sticky; top: 24px; }
}

@media (max-width: 1023px) {
  .registration { padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
  .form-layout { display: block; margin-top: 32px; }
  .form-surface, .form-intro { max-width: 640px; margin-inline: auto; }
  .journey { display: none; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .welcome h1 { font-size: 56px; }
  .welcome-copy { padding-top: 68px; }
  .welcome-copy > p:not(.eyebrow):not(.already) { max-width: 410px; }
}

@media (max-width: 760px) {
  .masthead {
    min-height: 70px;
    gap: 12px;
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }
  .preview-label { max-width: 84px; padding-left: 12px; }
  .welcome {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: calc(100vh - 112px);
    min-height: calc(100svh - 112px);
    max-height: none;
  }
  .welcome-copy {
    position: relative;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px max(24px, env(safe-area-inset-right, 0px)) 26px max(24px, env(safe-area-inset-left, 0px));
  }
  .welcome-copy > p:not(.eyebrow):not(.already) { max-width: 390px; }
  .begin { max-width: 390px; }
  .registration { padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)); }
  .interests, .mobilization { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices label { min-height: 56px; align-items: flex-start; }
  .choices input { margin-top: 2px; }
  .choices label span { overflow-wrap: anywhere; }
  .consent { min-height: 44px; padding-block: 4px; }
  dialog { padding: 20px; }
}

@media (max-width: 479px) {
  .form-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .form-actions > * { width: 100%; flex: 0 0 auto; }
  .back { justify-content: center; padding: 10px 16px; }
  .form-actions .primary { min-height: 56px; }
  .primary { gap: 12px; padding-inline: 18px; }
}

@media (max-width: 359px) {
  .interests, .mobilization { grid-template-columns: 1fr; }
  .review div { grid-template-columns: 1fr; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .welcome-copy { padding-top: 18px; padding-bottom: 20px; }
  .welcome h1 { font-size: 36px; line-height: 1.1; margin: 10px 0 14px; }
  .welcome .already { display: none; }
  .begin { margin-top: 18px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .welcome { height: auto; min-height: 0; max-height: none; }
  .welcome-copy { position: relative; bottom: auto; margin: 0 auto; padding: 18px max(24px, env(safe-area-inset-right, 0px)) 20px max(24px, env(safe-area-inset-left, 0px)); }
  .welcome h1 { font-size: 36px; line-height: 1.15; margin: 8px 0 12px; }
  .welcome h1 br { display: none; }
  .welcome h1 strong { margin-left: .2em; }
  .welcome-copy > p:not(.eyebrow):not(.already) { max-width: 600px; font-size: 16px; line-height: 1.5; }
  .welcome .already, .hero-caption, .desktop-break { display: none; }
  .begin { margin-top: 16px; min-height: 48px; }
  dialog { max-height: calc(100dvh - 20px); }
}