/* ==========================================
   RESPONSIVE STYLES - Mobile & Tablet Breakpoints
   ========================================== */

/* Prevent horizontal scroll on mobile */
html, body{
  overflow-x:hidden;
  max-width:100vw;
}

body > *{
  max-width:100%;
}

/* Base Mobile Nav - Hidden on Desktop */
.mobile-nav{
  display:none;
}

.nav-toggle{
  display:none;
}

/* Page Hero */
.page-hero{
  padding:var(--spacing-xl) 0 var(--spacing-lg);
  text-align:center;
  background:linear-gradient(135deg, rgba(199,154,58,0.04) 0%, rgba(15,59,47,0.02) 100%);
  border-bottom-left-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
}
.page-hero h1{
  margin-bottom:var(--spacing-sm);
}
.page-hero .lede{
  max-width:60ch;
  margin:0 auto;
}

/* Tablet (≤980px) */
@media (max-width:980px){
  /* Grid adjustments */
  .story-grid{grid-template-columns:1fr}
  .impact-stats{grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}
  .resource-grid{grid-template-columns:1fr}
  .framework-grid{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
  .tools-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
  
  /* Typography scaling */
  h1{font-size:clamp(1.75rem, 5vw, 2.5rem)}
  h2{font-size:clamp(1.5rem, 4vw, 2rem)}
  h3{font-size:clamp(1.125rem, 3vw, 1.375rem)}
  
  /* Resources Page Tablet */
  .resource-feature{
    grid-template-columns:1fr;
    gap:var(--spacing-xl);
    padding:calc(var(--spacing-lg) * 1.5);
    margin-bottom:var(--spacing-xl);
  }
  .resource-feature:hover{
    transform:translateY(-6px);
  }
  .resource-content{
    text-align:center;
    padding:var(--spacing-md) 0;
  }
  .resource-content .btn{
    display:inline-flex;
    width:auto;
    min-width:180px;
    margin:var(--spacing-xs) var(--spacing-sm);
  }
  .cards{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:calc(var(--spacing-xl) * 1.25);
    padding:0 var(--spacing-md);
  }
  .cards .card{
    padding:calc(var(--spacing-lg) * 1.5);
    margin-bottom:var(--spacing-md);
  }
  .cards .card h3{
    margin-bottom:var(--spacing-md);
  }
  .cards .card p{
    margin-bottom:var(--spacing-lg);
  }
  .cards .card:hover{
    transform:translateY(-8px) scale(1.01);
  }
  .checklist-preview{
    padding:calc(var(--spacing-xl) * 1.25);
    margin:var(--spacing-xl) var(--spacing-md);
  }
  
  /* News Page Tablet */
  .news-grid{
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:calc(var(--spacing-xl) * 1.25);
    padding:0 var(--spacing-md);
  }
  .news-card{
    padding:calc(var(--spacing-lg) * 1.5);
    margin-bottom:var(--spacing-md);
  }
  .news-card h3{
    font-size:1.375rem;
    margin-bottom:var(--spacing-md);
  }
  .news-card p{
    margin-bottom:var(--spacing-lg);
  }
  .news-date{
    margin-bottom:var(--spacing-md);
  }
  .news-card:hover{
    transform:translateY(-8px) scale(1.01);
  }
  .press-item{
    padding:calc(var(--spacing-lg) * 1.5) calc(var(--spacing-lg) * 1.5) calc(var(--spacing-lg) * 1.5) calc(var(--spacing-xl) * 1.25);
    margin:0 var(--spacing-md) var(--spacing-md);
  }
  .press-item h3{
    margin-bottom:var(--spacing-md);
  }
  .press-item p{
    margin-bottom:var(--spacing-lg);
  }
  .press-item:hover{
    transform:translateX(10px) scale(1);
  }
  .newsletter-cta{
    padding:calc(var(--spacing-xl) * 1.25);
    margin:var(--spacing-xl) var(--spacing-md);
  }
  .newsletter-cta h3{
    margin-bottom:var(--spacing-md);
  }
  .newsletter-cta p{
    margin-bottom:var(--spacing-lg);
  }
  .newsletter-form{
    max-width:100%;
    gap:var(--spacing-md);
  }
  .newsletter-form input{
    padding:0.9375rem 1.375rem;
  }
  .newsletter-form .btn{
    padding:0.9375rem 1.75rem;
    white-space:nowrap;
  }
  
  /* Footer responsive */
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:var(--spacing-lg);
  }
  .brand-col{
    grid-column:1/-1;
    text-align:center;
  }
  .footer-logo{
    margin:0 auto var(--spacing-sm);
  }
  .social-links{
    justify-content:center;
  }
}

/* Mobile & Tablet Navigation (≤980px) - Modern Design */
@media (max-width:980px){
  /* Enhanced header for mobile/tablet */
  .site-header{
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(20px) saturate(200%);
    -webkit-backdrop-filter:blur(20px) saturate(200%);
    box-shadow:0 4px 24px rgba(15,59,47,0.08), 
               0 1px 4px rgba(199,154,58,0.04);
  }
  
  /* Modern hamburger button */
  .nav-toggle{
    border:none;
    background:linear-gradient(135deg, 
                rgba(199,154,58,0.1) 0%, 
                rgba(199,154,58,0.05) 100%);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    font-size:1.5rem;
    color:var(--text);
    cursor:pointer;
    padding:0.625rem 0.75rem;
    line-height:1;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    border-radius:12px;
    box-shadow:0 2px 8px rgba(199,154,58,0.12), 
               inset 0 1px 0 rgba(255,255,255,0.5);
  }
  
  .nav-toggle:hover{
    background:linear-gradient(135deg, 
                rgba(199,154,58,0.15) 0%, 
                rgba(199,154,58,0.08) 100%);
    transform:scale(1.05);
    box-shadow:0 4px 16px rgba(199,154,58,0.2);
  }
  
  .nav-toggle:active{
    transform:scale(0.98);
  }
  
  .nav-toggle[aria-expanded="true"]{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:white;
    box-shadow:0 4px 16px rgba(199,154,58,0.3), 
               inset 0 1px 0 rgba(255,255,255,0.3);
  }
  
  /* Modern slide-down menu */
  .mobile-nav{
    display:block;
    position:fixed;
    top:70px;
    left:0;
    right:0;
    background:linear-gradient(180deg, 
                rgba(255,255,255,0.95) 0%, 
                rgba(250,246,239,0.93) 100%);
    backdrop-filter:blur(30px) saturate(200%);
    -webkit-backdrop-filter:blur(30px) saturate(200%);
    padding:0;
    border-top:1px solid rgba(199,154,58,0.2);
    border-bottom:2px solid rgba(199,154,58,0.15);
    box-shadow:0 16px 48px rgba(15,59,47,0.15), 
               0 4px 16px rgba(199,154,58,0.1),
               inset 0 1px 0 rgba(255,255,255,1);
    z-index:90;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1), 
               opacity 0.4s ease, 
               padding 0.5s ease;
  }
  
  .mobile-nav::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, 
                rgba(199,154,58,0.04) 0%, 
                transparent 30%,
                rgba(15,59,47,0.02) 100%);
    pointer-events:none;
  }
  
  .mobile-nav.open{
    max-height:600px;
    opacity:1;
    padding:var(--spacing-lg) var(--spacing-md);
  }
  
  /* Modern menu list */
  .mobile-nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  
  .mobile-nav li{
    opacity:0;
    animation:slideInLeft 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  
  .mobile-nav li:nth-child(1){animation-delay:0.05s}
  .mobile-nav li:nth-child(2){animation-delay:0.1s}
  .mobile-nav li:nth-child(3){animation-delay:0.15s}
  .mobile-nav li:nth-child(4){animation-delay:0.2s}
  .mobile-nav li:nth-child(5){animation-delay:0.25s}
  .mobile-nav li:nth-child(6){animation-delay:0.3s}
  .mobile-nav li:nth-child(7){animation-delay:0.35s}
  .mobile-nav li:nth-child(8){animation-delay:0.4s}
  .mobile-nav li:nth-child(9){animation-delay:0.45s}
  
  /* Modern menu links */
  .mobile-nav a{
    text-decoration:none;
    color:var(--text);
    padding:1rem 1.5rem;
    border-radius:14px;
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.01em;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    display:flex;
    align-items:center;
    border:1.5px solid rgba(199,154,58,0.12);
    background:linear-gradient(135deg, 
                rgba(255,255,255,0.7) 0%, 
                rgba(255,255,255,0.5) 100%);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    position:relative;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(15,59,47,0.04), 
               inset 0 1px 0 rgba(255,255,255,0.8);
  }
  
  .mobile-nav a::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
      120deg,
      transparent 0%,
      transparent 40%,
      rgba(199,154,58,0.15) 50%,
      transparent 60%,
      transparent 100%
    );
    background-size:200% 100%;
    background-position:200% center;
    animation:shimmer 3s linear infinite;
    opacity:0;
    transition:opacity 0.5s ease;
  }
  
  .mobile-nav a::after{
    content:'→';
    position:absolute;
    right:1.5rem;
    opacity:0;
    transform:translateX(-10px);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    color:var(--accent);
    font-size:1.25rem;
    font-weight:700;
  }
  
  .mobile-nav a:hover,
  .mobile-nav a:active{
    background:linear-gradient(135deg, 
                rgba(255,255,255,0.98) 0%, 
                rgba(250,246,239,0.95) 100%);
    color:var(--accent);
    border-color:rgba(199,154,58,0.5);
    transform:translateX(12px) scale(1.05);
    box-shadow:0 12px 32px rgba(199,154,58,0.35), 
               0 4px 12px rgba(199,154,58,0.2),
               inset 0 1px 0 rgba(255,255,255,1),
               inset -2px 0 8px rgba(199,154,58,0.1);
    padding-left:2rem;
    animation:navItemBounce 0.6s ease-in-out;
  }
  
  .mobile-nav a:hover::before,
  .mobile-nav a:active::before{
    opacity:1;
  }
  
  .mobile-nav a:hover::after,
  .mobile-nav a:active::after{
    opacity:1;
    transform:translateX(0);
  }
  
  /* Container padding for mobile/tablet */
  .container{
    padding-left:var(--spacing-md);
    padding-right:var(--spacing-md);
    max-width:100%;
    overflow-x:hidden;
  }
  
  /* Prevent overflow on all sections */
  section{
    max-width:100%;
    overflow-x:hidden;
  }
  
  /* Ensure cards don't overflow */
  .wellness-card,
  .age-group,
  .boundary-card,
  .responsibility-item,
  .training-track,
  .template-card,
  .case-study,
  .sponsor-tier,
  .principle-card,
  .hub-category{
    max-width:100%;
    box-sizing:border-box;
  }
  
  /* Content spacing adjustments */
  .hero{padding:var(--spacing-xl) 0 var(--spacing-lg)}
  .hero-grid{grid-template-columns:1fr; gap:var(--spacing-lg)}
  .cards{grid-template-columns:1fr; gap:var(--spacing-md)}
  
  /* About section mobile */
  .about-hero{
    grid-template-columns:1fr;
    gap:var(--spacing-xl);
    margin-bottom:var(--spacing-xl);
  }
  
  .about-content h2{
    text-align:center;
    font-size:2rem;
  }
  
  .about-content .muted{
    text-align:center;
    font-size:1.0625rem;
  }
  
  .about-image{
    order:-1;
    max-width:500px;
    margin:0 auto;
  }
  
  .initiatives-title{
    font-size:1.875rem;
  }
  
  .initiatives-subtitle{
    font-size:1rem;
  }
  
  .hero h1{
    font-size:clamp(1.75rem, 7vw, 2.25rem);
    line-height:1.15;
  }
  .hero .lede{
    font-size:1rem;
    line-height:1.6;
  }

  /* Stack CTAs on mobile */
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:var(--spacing-sm);
    width:100%;
  }
  .hero-actions .btn{
    width:100%;
    text-align:center;
    justify-content:center;
  }
  .meta{
    flex-wrap:wrap;
    justify-content:center;
    font-size:0.875rem;
  }
  
  /* Section spacing */
  .spotlight{padding:var(--spacing-xl) 0}
  .section-header{padding:0 var(--spacing-sm)}
  
  /* Better card spacing on mobile */
  .card{
    padding:var(--spacing-md);
  }
  .card h3{
    font-size:1.25rem;
  }
  
  /* Show mobile toggle, hide desktop nav */
  .nav{display:none}
  .nav-toggle{display:block}
  
  /* Layout resets */
  .contact-grid{grid-template-columns:1fr}
  
  /* Resources Page Mobile */
  .resource-feature{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
    padding:var(--spacing-lg);
    margin:0 0 var(--spacing-lg);
  }
  .resource-feature::before{
    height:3px;
    width:60px;
    left:50%;
    transform:translateX(-50%);
  }
  .resource-feature::after{
    display:none;
  }
  .resource-feature:hover{
    transform:translateY(-2px);
  }
  .resource-img{
    max-width:100%;
    margin:0 auto var(--spacing-md);
    border-radius:var(--radius);
  }
  .resource-content{
    text-align:center;
    padding:0 var(--spacing-sm);
  }
  .resource-content h2{
    font-size:1.5rem;
    margin-bottom:var(--spacing-md);
  }
  .resource-content p{
    font-size:1rem;
    margin-bottom:var(--spacing-lg);
  }
  .resource-content .btn{
    width:100%;
    margin-right:0;
    margin-bottom:var(--spacing-sm);
    padding:1rem 1.5rem;
    font-size:0.9375rem;
  }
  .checklist-preview{
    padding:var(--spacing-lg);
    margin:var(--spacing-lg) 0;
  }
  .checklist-preview::before{
    opacity:0.5;
  }
  
  /* Enhanced Cards Mobile */
  .cards{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
    margin:var(--spacing-lg) 0;
    padding:0;
  }
  .cards .card{
    padding:var(--spacing-lg);
    margin-bottom:var(--spacing-sm);
    border-radius:var(--radius-lg);
  }
  .cards .card::after{
    display:none;
  }
  .cards .card:hover{
    transform:translateY(-4px) scale(1);
    box-shadow:0 12px 24px rgba(15,59,47,0.12),
               0 4px 12px rgba(199,154,58,0.1);
  }
  .cards .card h3{
    font-size:1.25rem;
    margin-top:0;
    margin-bottom:var(--spacing-md);
  }
  .cards .card p{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:var(--spacing-lg);
  }
  .cards .card .chip{
    width:100%;
    text-align:center;
    justify-content:center;
    padding:0.875rem 1.25rem;
    margin-top:var(--spacing-xs);
  }
  
  /* News Page Mobile */
  .news-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
    margin:var(--spacing-lg) 0;
    padding:0;
  }
  .news-card{
    padding:var(--spacing-lg);
    margin-bottom:var(--spacing-sm);
    border-radius:var(--radius-lg);
  }
  .news-card::after{
    display:none;
  }
  .news-card:hover{
    transform:translateY(-4px) scale(1);
    box-shadow:0 12px 24px rgba(15,59,47,0.12),
               0 4px 12px rgba(199,154,58,0.1);
  }
  .news-card h3{
    font-size:1.25rem;
    line-height:1.3;
    margin-top:0;
    margin-bottom:var(--spacing-md);
  }
  .news-card:hover h3{
    transform:translateX(0);
  }
  .news-card p{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:var(--spacing-lg);
  }
  .news-date{
    padding:0.5rem 1rem;
    font-size:0.75rem;
    margin-bottom:var(--spacing-md);
  }
  .news-card .chip{
    width:100%;
    text-align:center;
    justify-content:center;
    padding:0.875rem 1.25rem;
    margin-top:var(--spacing-xs);
  }
  
  /* Press Items Mobile */
  .press-item{
    padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) + 0.875rem);
    margin:0 0 var(--spacing-md);
    border-radius:var(--radius-lg);
  }
  .press-item::before{
    width:5px;
  }
  .press-item::after{
    display:none;
  }
  .press-item:hover{
    transform:translateX(6px) scale(1);
    box-shadow:0 12px 24px rgba(15,59,47,0.1),
               0 4px 12px rgba(199,154,58,0.1);
  }
  .press-item:hover::before{
    width:6px;
  }
  .press-item h3{
    font-size:1.25rem;
    margin-top:0;
    margin-bottom:var(--spacing-md);
  }
  .press-item p{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:var(--spacing-lg);
  }
  .press-item .chip{
    width:100%;
    text-align:center;
    justify-content:center;
    padding:0.875rem 1.25rem;
  }
  
  /* Newsletter CTA Mobile */
  .newsletter-cta{
    padding:var(--spacing-lg);
    margin:var(--spacing-lg) 0;
    border-radius:var(--radius-lg);
  }
  .newsletter-cta::before{
    opacity:0.3;
  }
  .newsletter-cta h3{
    font-size:1.375rem;
    margin-top:0;
    margin-bottom:var(--spacing-md);
  }
  .newsletter-cta p{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:var(--spacing-lg);
  }
  .newsletter-form{
    flex-direction:column;
    max-width:100%;
    gap:var(--spacing-sm);
  }
  .newsletter-form input{
    width:100%;
    padding:1rem 1.25rem;
    font-size:1rem;
    border-radius:var(--radius-lg);
  }
  .newsletter-form input:focus{
    transform:translateY(-1px);
    box-shadow:0 0 0 3px rgba(199,154,58,0.12),
               0 4px 12px rgba(199,154,58,0.15);
  }
  .newsletter-form .btn{
    width:100%;
    padding:1rem 1.5rem;
    font-size:1rem;
    justify-content:center;
  }
  .newsletter-form .btn:hover{
    transform:translateY(-2px) scale(1);
  }
  
  .event-card{
    flex-direction:column;
    gap:var(--spacing-sm);
  }
  .framework-grid{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .shop-options{grid-template-columns:1fr; gap:var(--spacing-md)}
  .shop-card.featured{
    transform:scale(1);
    margin-bottom:var(--spacing-md);
  }
  .testimonials-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  
  /* Image adjustments for mobile */
  .card-icon{height:160px}
  .story-image{height:180px}
  .resource-card-image{height:200px}
  .testimonial-image{
    width:60px;
    height:60px;
  }
  
  /* Typography improvements */
  body{font-size:1rem}
  h1{font-size:clamp(1.625rem, 6vw, 2rem); line-height:1.2}
  h2{font-size:clamp(1.375rem, 5vw, 1.75rem); line-height:1.25}
  h3{font-size:clamp(1.125rem, 4vw, 1.25rem)}
  p, .lede{font-size:1rem; line-height:1.65}
  
  /* Card improvements */
  .card, .story-card, .tool-card, .resource-card{
    padding:var(--spacing-md);
  }
  .card h3, .story-card h3{
    font-size:1.125rem;
    margin-bottom:0.75rem;
  }
  
  /* Stat cards mobile */
  .stat-number{font-size:clamp(2rem, 8vw, 2.5rem)}
  .stat-label{font-size:0.9375rem}
  
  /* Shop cards mobile */
  .shop-card{
    padding:var(--spacing-lg) var(--spacing-md);
  }
  .price{font-size:2rem}
  
  /* Form improvements */
  .form-group input,
  .form-group textarea,
  .form-group select{
    font-size:1rem;
    padding:0.875rem 1rem;
  }
  .form-group label{
    font-size:0.9375rem;
  }
  
  /* Better button spacing */
  .btn{
    padding:0.875rem 1.5rem;
    font-size:1rem;
  }
  .btn.small{
    padding:0.625rem 1.125rem;
    font-size:0.9375rem;
  }

  /* Mobile-specific: make stacked buttons smaller and add spacing */
  .assessment-intro .btn.large,
  .form-actions .btn.large,
  .cta-actions .btn,
  .newsletter-form .btn {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    border-radius: 12px;
    margin-bottom: 14px;
  }

  /* Ensure the final button has a bit more visual separation */
  .form-actions .btn.large:last-child {
    margin-bottom: 18px;
  }
  
  /* Impact section mobile */
  .impact-stats{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
  }
  
  /* Page hero mobile */
  .page-hero{
    padding:var(--spacing-lg) 0;
  }
  .page-hero h1{
    font-size:clamp(1.75rem, 7vw, 2.25rem);
  }
  
  /* Newsletter form mobile */
  .newsletter-form{
    flex-direction:column;
  }
  .newsletter-form input{
    width:100%;
  }
  .newsletter-form .btn{
    width:100%;
  }
  
  /* Footer responsive */
  .footer-main{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
    text-align:center;
  }
  .footer-col h4{
    margin-bottom:var(--spacing-sm);
    font-size:1.0625rem;
  }
  .footer-links{
    text-align:center;
  }
  .footer-links a{
    font-size:0.9375rem;
    padding:0.375rem 0;
    display:inline-block;
  }
  .footer-bottom{
    flex-direction:column;
    text-align:center;
    gap:var(--spacing-sm);
  }
  .footer-legal{
    flex-direction:column;
    gap:var(--spacing-xs);
    align-items:center;
  }
  .footer-contact{
    text-align:center;
  }
  .cta-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .cta-actions .btn{
    width:100%;
  }

  /* AI for Families Page - Mobile/Tablet */
  .families-hero .container{
    grid-template-columns:1fr;
    gap:var(--spacing-xl);
  }
  
  .families-hero .hero-illustration{
    order:-1;
    max-width:500px;
    margin:0 auto;
  }
  
  .families-hero .hero-illustration img{
    height:350px;
  }
  
  .families-hero h1{
    font-size:2.5rem;
  }
  
  .families-hero .hero-subtitle{
    font-size:1.125rem;
    max-width:100%;
  }
  
  .education-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
  }
  
  .activity-grid{
    grid-template-columns:1fr;
  }
  
  .wellness-grid{
    grid-template-columns:1fr;
  }
  
  .case-study-grid{
    gap:var(--spacing-lg);
  }
  
  .resource-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
  }
  
  .newsletter-form{
    flex-direction:column;
  }
  
  .newsletter-form button{
    width:100%;
  }

  /* AI for Individuals Page - Mobile/Tablet */
  .individuals-hero h1{
    font-size:2.75rem;
  }
  
  .individuals-hero .hero-subtitle{
    font-size:1.125rem;
    max-width:100%;
  }
  
  .use-case-grid{
    grid-template-columns:1fr;
  }
  
  .principle-card{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
    text-align:center;
    padding:var(--spacing-lg);
  }
  
  .principle-number{
    margin:0 auto;
  }
  
  .boundaries-grid{
    grid-template-columns:1fr;
  }
  
  /* Reduce card padding on mobile for better space usage */
  .wellness-card,
  .age-group,
  .boundary-card,
  .training-track,
  .template-card,
  .case-study,
  .sponsor-tier,
  .responsibility-item,
  .hub-category{
    padding:var(--spacing-lg) !important;
  }
  
  .responsibility-grid{
    grid-template-columns:1fr;
  }
  
  .assessment-quiz{
    padding:var(--spacing-xl);
  }
  
  .quiz-question{
    margin-bottom:var(--spacing-lg);
    padding-bottom:var(--spacing-lg);
  }
  
  .hub-grid{
    grid-template-columns:1fr;
  }

  /* AI for Schools and businesses Page - Mobile/Tablet */
  .business-hero h1{
    font-size:2.5rem;
  }
  
  .business-hero .hero-subtitle{
    font-size:1.125rem;
    max-width:100%;
  }
  
  .business-hero .cta-button{
    display:flex;
    justify-content:center;
    width:100%;
    margin:var(--spacing-xs) 0;
  }
  
  .framework-grid{
    grid-template-columns:1fr;
  }
  
  /* Roadmap section improvements */
  .implementation-roadmap{
    padding:var(--spacing-lg) !important;
  }
  
  .implementation-roadmap h3{
    font-size:1.75rem;
    text-align:center !important;
    margin-bottom:calc(var(--spacing-xl) * 1.25);
  }
  
  .roadmap-stages{
    grid-template-columns:1fr;
    gap:calc(var(--spacing-xl) * 1.5);
  }
  
  .stage{
    padding:0 var(--spacing-sm);
    max-width:100%;
  }
  
  .stage-content{
    padding:0 var(--spacing-md);
  }
  
  .stage-content h4{
    font-size:1.375rem;
  }
  
  .stage-content p{
    font-size:1rem;
    line-height:1.7;
  }
  
  .stage:not(:last-child)::after{
    content:'↓';
    right:auto;
    top:auto;
    bottom:-30px;
    left:50%;
    transform:translateX(-50%);
    font-size:2.5rem;
  }
  
  .training-tracks{
    gap:var(--spacing-lg);
  }
  
  .track-modules{
    grid-template-columns:1fr;
  }
  
  .template-grid{
    grid-template-columns:1fr;
  }
  
  .business-case{
    padding:var(--spacing-lg) !important;
  }
  
  .case-badge{
    display:block;
    text-align:center;
    margin:0 auto var(--spacing-lg);
    max-width:fit-content;
  }
  
  .business-case h3{
    font-size:1.5rem;
    text-align:center;
    line-height:1.3;
    padding:0 var(--spacing-sm);
  }
  
  .case-stats{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
    max-width:100%;
    margin:0 0 calc(var(--spacing-lg) * 1.5);
  }
  
  .stat{
    padding:var(--spacing-lg);
  }
  
  .case-summary{
    text-align:center;
    font-size:1rem;
  }
  
  .case-link{
    display:block;
    text-align:center;
    margin-top:var(--spacing-md);
  }
  
  .pledge-benefits{
    grid-template-columns:1fr;
  }
  
  .sponsor-tiers{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
  }
  
  .sponsor-tier{
    max-width:400px;
    margin:0 auto;
  }

  /* Email Modal - Mobile */
  .email-modal{
    padding:var(--spacing-md);
  }

  .email-modal-content{
    width:94%;
    max-width:380px;
    padding:calc(var(--spacing-xl) * 1.25) var(--spacing-lg) var(--spacing-xl);
    max-height:90vh;
    border-radius:16px;
  }

  .modal-header{
    margin-bottom:var(--spacing-lg);
  }

  .modal-header h3{
    font-size:1.375rem;
  }

  .modal-header p{
    font-size:0.875rem;
    line-height:1.45;
  }

  .modal-close{
    width:28px;
    height:28px;
    font-size:20px;
    top:var(--spacing-md);
    right:var(--spacing-md);
  }

  .modal-icon{
    width:48px;
    height:48px;
    margin-bottom:var(--spacing-sm);
  }

  .email-modal .ml-form-fieldRow input[type="email"]{
    height:48px !important;
    font-size:0.9375rem !important;
  }

  .email-modal .ml-form-embedSubmit button.primary{
    height:48px !important;
    font-size:0.9375rem !important;
    padding:0.75rem 1.5rem !important;
  }

  .form-note{
    font-size:0.75rem;
  }

  .download-notification{
    right:var(--spacing-md);
    bottom:var(--spacing-md);
    left:var(--spacing-md);
  }
}

@keyframes slideInLeft{
  from{
    opacity:0;
    transform:translateX(-10px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes navItemBounce{
  0%, 100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-3px) scale(1.02);
  }
}

@keyframes shimmer{
  0%{
    background-position:200% center;
  }
  100%{
    background-position:-200% center;
  }
}

/* Utilities */
.muted{color:var(--muted)}
.hidden{display:none !important}