/* Mobile-only homepage corrections. Kept separate to preserve the customized theme. */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  .top .wrap {
    min-height: 62px;
    gap: 8px;
  }
  .brand { flex: 0 0 auto; }
  .brand img { width: 44px; height: 44px; }
  .brand span { display: none; }
  .nav {
    flex: 0 1 auto;
    gap: 12px;
    font-size: .88rem;
    white-space: nowrap;
  }

  .hero, .mini-hero {
    gap: 20px;
    padding: 28px 0 30px;
  }
  .hero-logo img { width: min(68vw, 205px); }
  .tag {
    max-width: 100%;
    padding: 5px 10px;
    font-size: .82rem;
    line-height: 1.4;
  }
  .hero h1 {
    margin: 16px 0 14px;
    font-size: clamp(2rem, 10vw, 2.35rem);
    line-height: 1.08;
  }
  .hero p { font-size: 1rem; line-height: 1.6; }

  .portal {
    grid-template-columns: 62px minmax(0, 1fr) 18px;
    gap: 11px;
    min-height: 112px;
    padding: 15px;
  }
  .portal > img { width: 58px; }
  .portal > div { min-width: 0; }
  .portal h2 { overflow-wrap: anywhere; font-size: 1.08rem; line-height: 1.3; }
  .portal p { font-size: .86rem; line-height: 1.5; }
  .arrow { font-size: 1.6rem; }

  .card, .section { padding: 19px; }
  .section h2 { font-size: 1.4rem; line-height: 1.3; }

  .mobile-dock {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .mobile-dock a { min-width: 0; padding: 11px 6px; }
  footer { padding-bottom: 28px; }
}

@media (max-width: 350px) {
  .wrap { width: calc(100% - 20px); }
  .nav { gap: 9px; font-size: .83rem; }
  .hero h1 { font-size: 2rem; }
  .portal { grid-template-columns: 54px minmax(0, 1fr) 14px; padding: 13px; }
  .portal > img { width: 52px; }
}