/* Mobile home: give the reading action a full row and every control room. */
@media(max-width:700px){
  .app-header{min-height:80px;padding:16px 18px;gap:12px}
  .brand{flex:1;min-width:0;gap:10px}
  .brand-mark{flex:0 0 36px;width:36px;height:36px;border-radius:11px}
  .brand-title{min-width:0;font-size:20px;line-height:1.2;letter-spacing:-.35px}
  .header-actions{flex:0 0 auto;gap:6px}
  .header-actions>.icon-button{display:inline-flex;min-width:44px;min-height:46px}
  .language-button{min-height:46px;padding:10px 11px}
  .home-content{padding-inline:18px;padding-bottom:28px}
  .home-content .hero{display:grid;grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:auto auto auto auto auto;column-gap:20px;row-gap:12px;align-items:center;min-height:0;padding:28px 0 34px}
  .home-content .hero-copy{display:contents}
  .home-content .hero-copy>.eyebrow{grid-column:1;grid-row:1;margin:0}
  .home-content .hero-title{grid-column:1;grid-row:2;margin:0;font-size:43px;line-height:1.08;letter-spacing:-1.2px}
  .home-content .hero-description{grid-column:1;grid-row:3;max-width:none;margin:0;font-size:14px;line-height:1.8}
  .home-content .hero-art{grid-column:2;grid-row:1 / 4;min-width:0;min-height:174px;margin:0;align-self:center;overflow:clip;overflow-clip-margin:12px}
  .home-content .hero-art::before,.home-content .hero-art::after{inset:50% auto auto 50%;transform:translate(-50%,-50%)}
  .home-content .hero-art::before{width:142px;height:168px;border-radius:85px 85px 50px 50px}
  .home-content .hero-art::after{width:156px;height:184px;border-radius:100px}
  .home-content .hero-book{width:106px}
  .home-content .hero-actions{grid-column:1 / -1;grid-row:4;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;width:100%;margin-top:8px}
  .home-content .hero-actions>.button-primary{width:100%;min-width:0;min-height:66px;justify-content:space-between;gap:12px;padding:14px 18px;font-size:15px}
  .home-content .hero-actions>.button-primary>span{flex:1;min-width:0;line-height:1.5}
  .home-content .hero-actions>.button-primary small{font-size:12px;line-height:1.6;margin-top:2px}
  .home-content .hero-actions>.button-ghost{max-width:100%;min-height:48px;justify-content:flex-start;padding:11px 14px;font-size:12px;text-align:start}
  .home-content .hero-note{grid-column:1 / -1;grid-row:5;min-width:0;margin:0;font-size:11px;line-height:1.7;align-items:flex-start}
  .home-content .hero-note .icon{margin-top:2px}
  .home-content .section-heading{gap:16px;margin:8px 0 18px;align-items:center}
  .home-content .section-heading>div{min-width:0}
  .home-content .section-heading .eyebrow{margin-bottom:7px}
  .home-content .section-heading>a{flex:0 0 auto;padding:10px 12px;gap:8px}
  .home-content .daily-grid{gap:14px;margin-bottom:28px}
  .home-content .reading-card{min-height:210px;padding:18px 16px;gap:8px}
  .home-content .reading-card-top{gap:8px;flex-wrap:wrap;align-items:center}
  .home-content .reading-card-title{font-size:17px;line-height:1.5;margin:0}
  .home-content .reading-card-meta{font-size:12px;line-height:1.7}
  .home-content .reading-card-footer{padding:0;margin-top:auto;gap:8px}
  .home-content .reading-card-footer .button{min-height:48px;line-height:1.5;overflow-wrap:normal}
  .home-content .utility-grid{gap:16px;margin-top:28px}
  .home-content .utility-card{grid-template-columns:28px minmax(0,1fr);gap:8px 14px;padding:22px}
  .home-content .utility-card h2{font-size:16px;line-height:1.5;margin-bottom:7px}
  .home-content .utility-card p{font-size:13px;line-height:1.8;margin-bottom:4px}
  .home-content .utility-card>.button{grid-column:1 / -1;justify-self:start;max-width:calc(100% - 42px);margin-inline-start:42px;min-height:50px;padding:12px 14px;white-space:normal;text-align:start}
  .home-content .utility-card>.button span{min-width:0}
  .home-content+.app-footer{margin-top:12px;padding-top:22px;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .bottom-nav{inset-inline:14px;inset-block-end:calc(10px + env(safe-area-inset-bottom));gap:4px;padding:6px;border-radius:18px}
  .bottom-nav .nav-item{flex-direction:column;min-width:0;min-height:60px;gap:5px;padding:8px 4px;font-size:11px;line-height:1.35}
  .bottom-nav .nav-item .icon{width:20px;height:20px}
  .bottom-nav .nav-item span{display:block;max-width:100%;text-align:center;white-space:normal}
  html[dir=rtl] .home-content .hero,html:is([lang=bn],[lang=hi],[lang=gu]) .home-content .hero{grid-template-columns:minmax(0,1fr) 110px}
  html[dir=rtl] .home-content .hero-title,html:is([lang=bn],[lang=hi],[lang=gu]) .home-content .hero-title{font-family:var(--body);font-size:29px;line-height:1.6;letter-spacing:0}
  html[dir=rtl] .brand-title,html:is([lang=bn],[lang=hi],[lang=gu]) .brand-title{font-size:15px;line-height:1.6;letter-spacing:0}
  html[dir=rtl] .home-content .hero-actions>.button-primary,html:is([lang=bn],[lang=hi],[lang=gu]) .home-content .hero-actions>.button-primary{font-size:15px}
  html[dir=rtl] .bottom-nav .nav-item,html:is([lang=bn],[lang=hi],[lang=gu]) .bottom-nav .nav-item{font-size:12px;line-height:1.5}
}
@media(max-width:360px){
  .app-header{padding-inline:14px;gap:8px}
  .brand{gap:8px}.brand-title{font-size:19px}
  .language-button{padding-inline:8px;font-size:11px}
  .home-content{padding-inline:14px}
  .home-content .hero{grid-template-columns:minmax(0,1fr) 88px;column-gap:16px;row-gap:10px;padding-top:24px}
  .home-content .hero-title{font-size:37px}
  .home-content .hero-art{min-height:150px}
  .home-content .hero-art::before{width:116px;height:146px}.home-content .hero-art::after{width:132px;height:162px}
  .home-content .hero-book{width:86px}
  .home-content .hero-actions>.button-primary{padding-inline:16px}
  .home-content .daily-grid{gap:12px}
  .home-content .reading-card{padding:17px 13px;min-height:210px}
  .home-content .reading-card-title{font-size:16px}
  .home-content .reading-card-footer{width:100%}
  .home-content .reading-card-footer .button{width:100%;justify-content:center;padding:10px;font-size:12px}
  .home-content .reading-card-footer .button>.icon{display:none}
  .home-content .utility-card{padding:19px}
  html[dir=rtl] .home-content .hero,html:is([lang=bn],[lang=hi],[lang=gu]) .home-content .hero{grid-template-columns:minmax(0,1fr) 88px}
  html[dir=rtl] .home-content .hero-title,html:is([lang=bn],[lang=hi],[lang=gu]) .home-content .hero-title{font-size:26px}
}