/* Mobile readability safety net loaded after main styles. */
@media (max-width: 700px){
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .container { width:100%; max-width:100%; padding-left:18px; padding-right:18px; }
  .hero, .portal-hero, .page-hero { overflow:hidden; }
  .hero-grid, .portal-grid, .split, .footer-grid { grid-template-columns:1fr !important; width:100%; max-width:100%; }
  .readable-title, h1, .section-title { max-width:100%; overflow-wrap:break-word; word-break:normal; hyphens:auto; }
  .readable-title { font-size:38px !important; line-height:1.02 !important; letter-spacing:-0.045em !important; }
  .readable-title span, .hero h1 span { display:inline !important; }
  .readable-title .highlight { display:block !important; }
  .lead, .readable-lead, .section-desc, .portal-panel p, .card p { max-width:100%; overflow-wrap:break-word; }
  .hero-primary, .btn { max-width:100%; width:100%; white-space:normal !important; text-align:center !important; line-height:1.18 !important; overflow-wrap:break-word; min-height:48px; padding:14px 16px; }
  .portal-panel { width:100%; max-width:100%; }
  .quick-grid a, .earn-feature, .mobile-map article, .card, .widget-card, .term-card, .resource-row, .reference-card { max-width:100%; overflow-wrap:break-word; }
}
@media (max-width: 420px){
  .container { padding-left:18px; padding-right:18px; }
  .readable-title { font-size:36px !important; line-height:1.03 !important; }
  .page-hero h1 { font-size:36px !important; }
  .section-title { font-size:34px !important; }
  .portal-panel h2 { font-size:32px !important; }
  .lead, .readable-lead { font-size:17px !important; }
}

@media (max-width: 700px){
  .hero-primary { font-size:15px !important; }
  .portal-panel p, .quick-grid a, .lead, .readable-lead { overflow-wrap:anywhere; }
  .portal-panel { margin-left:0; margin-right:0; }
}
@media (max-width: 420px){
  .hero-primary { font-size:14px !important; }
  .portal-panel p { font-size:15px; line-height:1.45; }
}

@media (max-width: 700px){
  .container { max-width:100vw !important; overflow:hidden; }
  .hero-copy, .portal-panel, .widget-card, .card, .term-card, .resource-row, .reference-card, .mobile-map, .footer-grid { width:100% !important; max-width:calc(100vw - 36px) !important; }
  .portal-panel p, .hero-copy p { max-width:calc(100vw - 76px) !important; }
  .quick-grid, .hero-actions { width:100% !important; max-width:100% !important; }
}

@media (max-width: 700px){
  .portal-panel p { max-width:calc(100vw - 104px) !important; }
}
@media (max-width: 420px){
  .portal-panel p { max-width:286px !important; }
}

/* Move hero content upward on desktop so important information is visible immediately. */
.hero, .portal-hero { place-items:start center !important; }
@media (min-width: 901px){
  .hero, .portal-hero { padding-top:96px !important; padding-bottom:96px !important; }
}

/* v6 hard mobile overflow fix for Index hero/panel. */
@media (max-width:700px){
  .hero-copy, .hero-actions, .portal-panel { max-width:calc(100vw - 40px)!important; width:calc(100vw - 40px)!important; }
  .hero-actions .btn { width:100%!important; max-width:100%!important; }
  .portal-panel { overflow:hidden; padding:20px!important; }
  .quick-grid { width:100%!important; max-width:100%!important; }
  .quick-grid a { width:100%!important; max-width:100%!important; }
  .lead, .readable-lead { max-width:calc(100vw - 40px)!important; }
}

/* v7 center mobile content with safe side gutters. */
@media (max-width:700px){
  .hero-copy, .hero-actions, .portal-panel { width:min(340px, calc(100vw - 56px))!important; max-width:min(340px, calc(100vw - 56px))!important; margin-left:auto!important; margin-right:auto!important; }
  .lead, .readable-lead { width:100%!important; max-width:100%!important; }
  .hero-actions .btn { width:100%!important; }
}

/* v8 final mobile: prevent horizontal drift by anchoring hero/panel to left gutter. */
@media (max-width:700px){
  .hero-grid, .portal-grid { justify-items:start!important; }
  .hero-copy, .hero-actions, .portal-panel { width:calc(100vw - 72px)!important; max-width:318px!important; margin-left:0!important; margin-right:0!important; justify-self:start!important; }
  .hero-actions .btn { width:100%!important; max-width:100%!important; }
}