/* Footer */
    .footer {
      text-align: center;
      padding: 20px 20px 80px;
      margin-top: auto;
      border-top: 1px solid var(--slate-200);
    }
       .footer-mission {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      color: var(--slate-700);
      font-weight: 500;
      margin-bottom: 12px;
      line-height: 1.5;
      white-space: nowrap;
    }
    .footer-mission-link {
      color: var(--cr-teal);
      text-decoration: underline;
      text-decoration-color: var(--cr-teal-light);
      text-underline-offset: 2px;
      transition: text-decoration-color 0.15s ease;
    }
    .footer-mission-link:hover {
      text-decoration-color: var(--cr-teal-dark);
      color: var(--cr-teal-dark);
    }
    .footer-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .footer-link-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .footer-links a {
      font-family: var(--font-sans);
      font-size: 0.625rem;
      color: var(--slate-500);
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .footer-links a:hover {
      color: var(--cr-teal);
    }
    .footer-sep {
      color: var(--slate-300);
      margin: 0 8px;
      font-size: 0.625rem;
    }
    .footer-copy {
      font-family: var(--font-sans);
      font-size: 0.625rem;
      color: var(--slate-400);
    }

    /* Loading spinner */
    .loading-spinner {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
    }

    .loading-spinner.visible { display: flex; }

    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid var(--slate-200);
      border-top-color: var(--cr-teal);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .loading-spinner p { color: var(--slate-500); font-size: 0.9375rem; }

    /* Responsive */
    @media (max-width: 640px) {
      .container { padding: 0 16px; }
      .header { min-height: 110px; }
      .header-inner { padding: 12px 16px; min-height: 110px; }
      .main {
        margin-top: 110px;
        height: calc(100vh - 110px);
        height: calc(100dvh - 110px);
      }
      .header-logo img { height: 70px; }
      .header-back-btn { padding: 8px 12px; min-width: 70px; font-size: 0.8125rem; }
      .header-spacer { width: 70px; }
      .landing-screen { padding-top: 24px; }
      .landing-screen h1 { font-size: 2rem; }
      .trust-points { flex-direction: column; gap: 12px; }
      .trust-accent { width: 100%; height: 3px; }
      .trust-list { text-align: left; }
      .trust-list p { text-align: left; }
      .role-options { flex-direction: column; gap: 12px; }
      .school-header { padding: 24px 20px; border-radius: 16px; }
      .category-pills { gap: 8px; }
      .checklist-card { padding: 16px; border-radius: 16px; }
      .actions { flex-direction: column; }
      .btn { width: 100%; }
      .confirmation-screen { padding-top: 40px; }
      .school-confirmation-card { padding: 32px 24px; }
      }

  /* ==================== BOTTOM NAV BAR (DEC-445) ==================== */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 68px;
      background: var(--white);
      border-top: 1px solid var(--slate-200);
      z-index: 90;
    }

    .nav-inner {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: space-around;
      padding: 8px 6px 0;
    }

    /* Desktop: constrain nav tab width */
    @media (min-width: 601px) {
      .nav-inner .nav-tab {
        width: 120px;
        max-width: 120px;
      }
    }

    .nav-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      cursor: pointer;
      padding: 2px 4px;
      min-width: 48px;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.1s ease;
      background: none;
      border: none;
    }
    .nav-tab:active { opacity: 0.7; }

    .nav-tab svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.8;
    }

    .nav-label {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.5625rem;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    /* Inactive state */
    .nav-tab.inactive svg { color: var(--slate-400); }
    .nav-tab.inactive .nav-label { color: var(--slate-400); }

    /* Active state — school color */
    .nav-tab.active-school svg { color: var(--school-primary, var(--cr-teal)); }
    .nav-tab.active-school .nav-label {
      color: var(--school-primary, var(--cr-teal));
      font-weight: 600;
    }

    /* Active state — always CR teal (Our Mission) */
    .nav-tab.active-teal svg { color: var(--cr-teal); }
    .nav-tab.active-teal .nav-label {
      color: var(--cr-teal);
      font-weight: 600;
    }

    /* Content displacement — prevent content behind fixed nav bar */
    .main {
      padding-bottom: 108px !important; /* 68px nav + 40px original */
    }

    /* ==================== END BOTTOM NAV BAR ==================== */