/* Scoped additions for the two app categories; retain the existing stylesheet. */
    #desktop-apps, #mobile-apps { scroll-margin-top: 110px; }
    
    .site-header .nav-links { gap: 16px; }
    .site-header .nav-links > a { white-space: nowrap; }
    .app-status { display: inline-block; margin-bottom: 12px; padding: 5px 10px;
      border-radius: 20px; background: #edf3fc; color: #18366b; font-size: .8rem; font-weight: 600; }
    .app-note { margin-top: 24px; color: #526784; }
    .hero-card .metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hero-card a.metric { text-decoration: none; color: inherit; }
    .hero-card a.metric:hover { background: rgba(255,255,255,.18); }
    .app-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .app-category-grid .card { min-width: 0; }
    @media (max-width: 640px) { .app-category-grid { grid-template-columns: 1fr; } }
  
/* The longer navigation needs a mobile menu at tablet and small laptop widths. */
@media (min-width: 1181px) { .site-header .nav-links { gap: 14px; font-size: .9rem; } }
@media (max-width: 1180px) {
 .site-header .menu-toggle { display: grid; place-items: center; flex-shrink: 0; }
 .site-header .nav-links { display: none; position: absolute; top: 100%; left: 4%; right: 4%; padding: 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  flex-direction: column; align-items: stretch; gap: 8px; max-height: calc(100vh - 100px); overflow-y: auto; }
 .site-header .nav-links.open { display: flex; }
 .site-header .nav-links a { padding: 10px 8px; white-space: normal; }
}
/* Content remains readable when scripts are unavailable. */
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-up { transition: none; } }