/* Readability improvements and the requested two-line hero headline. */
@media screen {
  body { font-size: 16px; line-height: 1.7; }
  /* The existing <br> separates the two lines; don't wrap the second phrase. */
  .hero h1 { max-width: none; white-space: nowrap; }
  @media (max-width: 1050px) {
    .hero h1 { font-size: 7.6vw; }
  }

  nav { font-size: 14px; gap: 24px; color: #c5d5e4; }
  .header-contact { font-size: 14px; }
  .hero-content > p { font-size: 18px; line-height: 1.8; color: #c5d5e4; }
  .button, .hero-secondary { font-size: 15px; }
  .eyebrow, .hero .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
  .aurora-toggle { font-size: 12px; padding: 8px 13px; }
  .landscape-label > span { font-size: 12px; letter-spacing: 1.4px; }
  .hero-caption { font-size: 11px; letter-spacing: 1px; color: #a7bfd5; }

  .intro-strip div,
  .section-heading > p,
  .region p,
  .journey-intro > p,
  .personal-note p,
  .buyer-copy > p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8cbdc;
  }
  .section-heading > p { max-width: 34ch; }
  .region-content .eyebrow { font-size: 11px; color: #adc6dd; }
  .region-art .num { font-size: 13px; }
  .region-art .area { font-size: 12px; letter-spacing: .5px; right: 20px; }
  .guide-link { font-size: 14px; gap: 12px; }
  .consider { font-size: 14px; line-height: 1.8; }
  .consider span { color: #a9c0d5; }

  .progress-summary { font-size: 15px; }
  .journey small { font-size: 13px; line-height: 1.7; color: #a9c0d5; }
  .journey-intro > p { max-width: 40ch; }
  .check-tools { flex-wrap: wrap; }
  .check-tools button, .personal-note a { font-size: 14px; }
  .check-tools button { min-height: 40px; }
  .personal-note > span { font-size: 11px; letter-spacing: 1.4px; color: #adc6dd; }
  .personal-note p { max-width: 38ch; }
  .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tabs button { font-size: 13px; line-height: 1.4; min-height: 44px; white-space: normal; color: #bed0e0; }
  .task { padding: 19px 0; gap: 14px; }
  .task > div { min-width: 0; }
  .task input { width: 22px; height: 22px; margin-top: 3px; }
  .task label { font-size: 16px; line-height: 1.6; }
  .task p { font-size: 15px; line-height: 1.8; color: #b8cbdc; margin-top: 7px; }
  .task a { font-size: 14px; line-height: 1.7; margin-top: 10px; }
  .check-footer { font-size: 11px; letter-spacing: .6px; color: #a9c0d5; gap: 16px; }
  #stage-count { flex-shrink: 0; }

  .filters button { font-size: 13px; min-height: 42px; padding: 10px 15px; color: #bed0e0; }
  .filters button.active { color: #002349; }
  .search { min-height: 46px; }
  .search input { font-size: 16px; width: 190px; min-width: 0; }
  .search input::placeholder { color: #a9c0d5; opacity: 1; }
  .resource { align-items: flex-start; }
  .resource-copy { min-width: 0; }
  .resource-number { font-size: 13px; color: #a9c0d5; min-width: 22px; }
  .resource-copy small { font-size: 11px; letter-spacing: 1.2px; color: #adc6dd; }
  .resource h3 { font-size: 18px; line-height: 1.5; }
  .resource p { font-size: 15px; line-height: 1.8; color: #b8cbdc; }
  .resource-domain { font-size: 13px; overflow-wrap: anywhere; }
  .resource-arrow { flex-shrink: 0; margin-top: 5px; }
  .resource-note { font-size: 13px; line-height: 1.8; color: #a9c0d5; }

  .buyer-art small { font-size: 10px; color: #a9c0d5; }
  .buyer-links a { font-size: 15px; line-height: 1.7; }
  .contact-email { font-size: 16px; color: #b8d2e9; }
  .footer-top { flex-wrap: wrap; }
  .footer-top > span { font-size: 11px; color: #a9c0d5; }
  .footer-top button { font-size: 14px; min-height: 44px; }
  .footer-bottom { font-size: 13px; line-height: 1.8; color: #a9c0d5; }
  #toast { font-size: 15px; }
  dialog p { font-size: 16px; line-height: 1.8; color: #bed0e0; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { font-size: 14px; min-height: 44px; }

  @media (max-width: 1100px) {
    .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resource-toolbar .search { align-self: stretch; margin-top: 0; }
    .search input { width: 100%; }
  }

  /* Switch to the existing menu before larger navigation text gets cramped. */
  @media (min-width: 651px) and (max-width: 900px) {
    .header-contact { display: none; }
    .menu-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 9px 14px; border: 1px solid #ffffff25; border-radius: 30px; background: none; }
    nav { display: none; position: absolute; top: 84px; left: 0; right: 0; padding: 20px 24px; background: #0c2038f5; border: 1px solid #ffffff20; border-radius: 22px; }
    header.menu-open nav { display: flex; flex-direction: column; gap: 18px; }
  }

  @media (max-width: 650px) {
    .menu-toggle { font-size: 13px; padding: 8px 10px; gap: 8px; min-height: 40px; }
    header.menu-open nav { font-size: 16px; }
    .hero-content > p { font-size: 16px; }
    .hero .eyebrow { font-size: 10px; letter-spacing: 1px; }
    .hero-actions { flex-wrap: wrap; gap: 16px; }
    .button, .hero-secondary, .contact .button { font-size: 14px; }
    .button { gap: 16px; }
    .contact .button { max-width: 100%; text-align: left; gap: 14px; }
    .hero-caption { font-size: 10px; letter-spacing: .4px; gap: 16px; }
    .hero-caption span { max-width: 48%; }
    .landscape-label > span { font-size: 10px; letter-spacing: 1px; }
    .aurora-toggle { font-size: 11px; padding: 6px 10px; }
    .section-heading > p { max-width: none; }
    .region-content .eyebrow { font-size: 11px; }
    .tabs button { font-size: 14px; }
    .filters button { font-size: 13px; }
    .check-footer { font-size: 10px; }
    .resource { padding: 22px 18px; gap: 12px; }
    .footer-bottom { font-size: 13px; }
  }
}