/* =========================================================
   WAVE 07 V7 — MOBILE FIRST-SCREEN / PRACTICE / DOCK REFINEMENT
   ========================================================= */
@media(max-width:700px){
  /* Hero: grammar names become deliberate rows instead of awkward wrapping. */
  .wave07-feature .comparison-head h1{
    margin:2px 0 8px!important;
    font-size:clamp(30px,9.4vw,38px)!important;
    line-height:1.12!important;
    letter-spacing:-.025em!important;
  }
  .wave07-feature .comparison-head .grammar-title-inline.is-stack-3,
  .wave07-feature .comparison-head .grammar-title-inline.is-stack-2{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    max-width:none!important;
  }
  .wave07-feature .comparison-head .grammar-title-inline.is-stack-3 .grammar-sep,
  .wave07-feature .comparison-head .grammar-title-inline.is-stack-2 .grammar-sep{
    display:none!important;
  }
  .wave07-feature .comparison-head .grammar-piece{
    display:block!important;
    white-space:nowrap!important;
  }

  /* Three-target pages need a touch less size so every row breathes. */
  .wave07-feature .comparison-head .grammar-title-inline.is-stack-3{
    font-size:.94em!important;
  }

  .wave07-feature .comparison-head .hero-main-meaning{
    max-width:23em!important;
    margin:10px auto 0!important;
    font-size:16px!important;
    line-height:1.78!important;
  }
  .wave07-feature .comparison-head .hero-quick-hint{
    max-width:22em!important;
    margin:8px auto 0!important;
    font-size:14px!important;
    line-height:1.68!important;
  }
  .wave07-feature .comparison-head .article-tools{
    margin-top:12px!important;
  }

  /* JLPT heading: never overpower the actual question. */
  .wave07-feature #jlpt .feature-heading{
    margin-bottom:10px!important;
  }
  .wave07-feature #jlpt .feature-heading h2{
    max-width:15em!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(23px,6.8vw,28px)!important;
    line-height:1.34!important;
    letter-spacing:-.018em!important;
    text-align:center!important;
  }
  .wave07-feature #jlpt .beginner-practice{
    margin-top:8px!important;
  }
  .wave07-feature #jlpt .practice-head{
    padding-bottom:10px!important;
  }
  .wave07-feature #jlpt .practice-title{
    font-size:clamp(20px,5.8vw,24px)!important;
    line-height:1.62!important;
  }
  .wave07-feature #jlpt .practice-options{
    gap:8px!important;
  }
  .wave07-feature #jlpt .practice-options button{
    min-height:54px!important;
    padding:10px 12px!important;
    font-size:17px!important;
  }

  /* Bottom dock: smaller and less visually dominant. */
  .wave07-feature .grammar-mobile-dock a,
  .wave07-feature .grammar-mobile-dock button{
    min-height:40px!important;
  }
  .wave07-feature .grammar-mobile-dock a{
    padding:0 4px!important;
    font-size:10px!important;
    font-weight:760!important;
  }
  .wave07-feature .grammar-mobile-dock button{
    flex-basis:40px!important;
    font-size:16px!important;
  }

  /* Grammar nav labels follow the same identity colors. */
  .wave07-feature .grammar-mobile-dock a:nth-child(2){color:var(--cmp-a)!important}
  .wave07-feature .grammar-mobile-dock a:nth-child(3){color:var(--cmp-b)!important}
  .wave07-feature .grammar-mobile-dock a:nth-child(4){color:var(--cmp-c)!important}
  .wave07-feature.feature-659060134 .grammar-mobile-dock a:nth-child(4),
  .wave07-feature.feature-659060135 .grammar-mobile-dock a:nth-child(4){color:var(--cmp-c)!important}
  .wave07-feature .grammar-mobile-dock a.is-active{
    font-weight:900!important;
  }
}