/* ============================================================
   RESPONSIVE + MEDIA-FEATURE RULES
   All @media blocks from the original stylesheet, kept in their
   original relative order. Loaded last so these overrides apply
   exactly as they did when interleaved in the single file.
   ============================================================ */

/* reduced motion (accessibility preference, not a viewport breakpoint —
   kept here per the file-responsibility rule that all media queries
   belong in this file) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* base.css breakpoints */
@media(max-width:640px){.container{padding:0 var(--space-3)}}

/* components.css breakpoints */
@media(max-width:900px){.section{padding:var(--space-12) 0}}
@media(max-width:640px){.section-title{font-size:var(--text-xl)}}
@media(max-width:860px){
  .nav-links{display:none}
  .mobile-nav-toggle{display:flex}
}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--space-6)}}
@media(max-width:640px){.hero-title{font-size:var(--text-2xl)}}
@media(max-width:480px){.hero-ctas{flex-direction:column}}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media(max-width:720px){.learn-list{grid-template-columns:1fr}}
@media(max-width:900px){.stack-groups{grid-template-columns:1fr}}
@media(max-width:860px){.about-strip{grid-template-columns:1fr}}