/* RESPONSIVE — narrow-screen overrides and reduced-motion.
   MUST load last: these rules rely on coming after everything above.
   Breakpoints: 900px (tablet), 700px (phone / bottom nav appears), 430px (small phone). */

@media(max-width:900px) {
  .marketing-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .hero-copy {
    padding-bottom:10px
  }
  .hero-art {
    height:440px
  }
  .marketing-hero {
    min-height:auto
  }
  .marketing-hero::after {
    display:none
  }
  .steps {
    border-radius:32px 32px 0 0
  }
  .newsletter {
    grid-template-columns:1fr
  }
  .newsletter-art {
    height:150px
  }
  .library-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .library-card:last-child {
    grid-column:span 2
  }
  .stage-layout,.insight-hero {
    grid-template-columns:1fr
  }
  .stage-aside {
    position:static
  }
}

@media(max-width:700px) {
  .theme-toggle {
    min-width:44px;
    padding:8px 10px
  }
  .theme-toggle .theme-label {
    display:none
  }
  .container {
    width:min(100% - 24px,var(--max))
  }
  .narrow {
    width:min(100% - 22px,760px)
  }
  .desktop-nav {
    display:none
  }
  .bottom-nav {
    display:block
  }
  .page {
    padding-bottom:86px
  }
  .topbar-inner {
    min-height:58px
  }
  .brand-name {
    font-size:1.08rem
  }
  .marketing-hero {
    padding-top:10px
  }
  .hero-copy {
    padding-top:18px
  }
  .hero-title {
    font-size:3.45rem
  }
  .hero-hand {
    font-size:2.45rem
  }
  .hero-art {
    height:335px
  }
  .hero-copy .lead {
    font-size:.92rem
  }
  .steps-grid {
    grid-template-columns:1fr;
    gap:6px
  }
  .step {
    display:grid;
    grid-template-columns:62px 1fr;
    text-align:left;
    align-items:center;
    padding:8px 18px
  }
  .step-icon {
    width:56px;
    height:54px;
    margin:0
  }
  .cosmic-card {
    grid-template-columns:1fr;
    padding:24px
  }
  .cosmic-art {
    height:165px
  }
  .newsletter {
    padding:24px
  }
  .newsletter-form {
    flex-direction:column
  }
  .quote-card {
    grid-template-columns:1fr;
    padding-bottom:12px
  }
  .quote-card img {
    display:block;
    height:220px;
    width:min(82%,300px);
    justify-self:end;
    margin-top:-16px
  }
  .issue-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .issue-card {
    min-height:140px
  }
  .issue-card img {
    height:92px
  }
  .tip-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .question-options {
    grid-template-columns:1fr
  }
  .take-card {
    padding:21px 18px
  }
  .take-intro {
    grid-template-columns:1fr;
    gap:4px
  }
  .take-art {
    width:min(300px,88vw);
    max-width:100%;
    height:auto;
    justify-self:center;
    margin-top:4px
  }
  .take-note {
    grid-template-columns:minmax(0,1fr) 92px
  }
  .take-note img {
    display:block;
    height:96px
  }
  .library-hero {
    grid-template-columns:1fr;
    padding:28px 20px 10px
  }
  .library-hero h1 {
    font-size:2.7rem
  }
  .library-hero img {
    height:158px;
    width:min(78%,270px);
    justify-self:end
  }
  .library-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .library-card {
    min-height:190px
  }
  .library-card:last-child {
    grid-column:span 2;
    display:block
  }
  .library-card:last-child>span:first-child {
    display:block
  }
  .library-card:last-child .library-illustration {
    height:90px
  }
  .library-card p {
    display:none
  }
  .age-options {
    grid-template-columns:1fr
  }
  .home-heading {
    flex-direction:column
  }
  .home-heading .age-chip {
    align-self:flex-start
  }
  .stage-summary-card {
    min-height:340px
  }
  .stage-summary-copy {
    width:82%;
    max-width:360px
  }
  .stage-title {
    font-size:clamp(2.05rem,10vw,3rem)!important
  }
  .stage-title-long {
    font-size:clamp(1.9rem,8.2vw,2.25rem)!important
  }
  .stage-summary-card .stage-age-art {
    top:-1%;
    right:-12%;
    width:66%;
    max-height:94%;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 18%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.58) 56%,#000 80%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 18%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.58) 56%,#000 80%)
  }
}

@media(max-width:430px) {
  .hero-title {
    font-size:3rem
  }
  .hero-art {
    height:290px
  }
  .issue-grid {
    gap:9px
  }
  .issue-card h3 {
    font-size:.8rem
  }
  .issue-card img {
    height:82px
  }
  .library-card .age {
    font-size:1.1rem
  }
  .library-card {
    padding:10px
  }
  .library-illustration {
    height:78px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}


@media(max-width:700px){.bottom-nav-inner{align-items:end}}

@media(max-width:430px){.bottom-nav a{font-size:.67rem}.bottom-nav a span{white-space:nowrap}}