/* Direct app introduction and concise, illustration-led reading. */
.header{background:#fffffff5;backdrop-filter:blur(12px)}
h1,h2,h3{font-weight:800}
.section{padding-block:80px}
.benefit-strip{background:#f9fbff}

.app-hero{gap:72px;min-height:690px;padding-block:58px 62px}
.app-product-logo{width:128px;height:128px;object-fit:contain;margin-bottom:18px}
.app-hero h1{font-size:clamp(66px,5.5vw,80px);letter-spacing:-.06em;line-height:1.04}
.app-hero h1 .color-word{display:block}
.app-hero .intro-copy>p{font-size:17px;line-height:1.7;max-width:415px;margin-top:26px}
.app-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:396px;margin-top:30px}
.app-hero-actions>.button,.download-content>.store-button{width:100%;height:56px;min-height:56px;padding:8px 10px;font-size:14px;gap:9px}
.app-hero-actions>.button{min-width:0;white-space:nowrap}
.store-button{text-align:left;justify-content:center;white-space:nowrap;background:#111;border-bottom-color:#000;color:#fff}
.store-play-icon{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0}
.store-play-icon img{width:28px;height:28px;object-fit:contain}
.store-button-label{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.store-button-label small{font-size:8px;letter-spacing:.8px;font-weight:700}
.store-button-label strong{font-size:17px;font-weight:750;letter-spacing:-.35px}
.download-content>.store-button{width:192px}
.app-hero .app-visual{display:flex;flex-direction:column;justify-content:center;gap:25px;min-width:0;min-height:570px}
.app-hero .phone-halo{top:40px}
.app-hero .app-tabs{margin:0;position:relative;z-index:1}
/* Screen descriptions remain available to assistive technology when a tab changes. */
.app-hero .screen-caption{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.learn-word img{height:145px;object-fit:contain}
.learn-word-text{justify-content:center;min-height:235px;padding-block:24px}
.learn-word-text strong{font-size:54px}
.learn-word-text + .quiz-description{margin-bottom:18px}
.quiz-choices-text .choice{justify-content:center;min-height:110px;padding-inline:8px;font-size:15px}
.choice img,.translation-prompt img{object-fit:contain}
.path-note [lang=ar]{transform:none}
.article-visual{height:auto;aspect-ratio:1.65;display:block}
.article-visual img{width:100%;height:100%;max-width:none;object-fit:cover}
.article-body h3{font-size:24px}
.article-body small{font-size:10px;color:#617084;display:block;margin-top:18px}
.article-body>span:first-child{font-size:8px;letter-spacing:.8px}
.article-body{padding:24px}
.article-card{border-radius:20px}
.reads-heading h2{font-size:48px}
.footer .brand{font-weight:800}

@media(max-width:1050px){
  .app-hero{gap:32px;padding-block:46px 52px}
  .app-hero h1{font-size:60px}
  .app-hero .intro-copy>p{font-size:16px}
  .app-hero .app-visual{min-height:540px}
  .app-hero .phone-halo{width:360px;height:390px;max-width:100%}
  .app-hero-actions{gap:10px}
  .app-hero-actions>.button{font-size:13px;padding-inline:8px}
  .store-button-label strong{font-size:16px}
}
@media(max-width:800px){
  .section{padding-block:64px}
  .app-hero{grid-template-columns:1fr;min-height:0;gap:42px;padding-block:44px 42px}
  .app-hero .intro-copy{order:-1;text-align:center;width:100%}
  .app-product-logo{width:104px;height:104px;margin-inline:auto}
  .app-hero .intro-copy>p{margin-inline:auto}
  .app-hero h1{font-size:68px}
  .app-hero-actions{margin-inline:auto}
  .app-hero .app-visual{width:min(490px,100%);margin-inline:auto;min-height:0}
  .app-hero .phone-halo{top:20px}
  .article-body{padding:21px}
  .article-body h3{font-size:20px}
}
@media(max-width:580px){
  .section{padding-block:54px}
  .app-hero{display:flex;flex-direction:column;gap:38px;padding-block:37px 30px}
  .app-hero h1{font-size:clamp(46px,13vw,64px)}
  .app-hero .intro-copy>p{font-size:14px;max-width:340px;margin-top:20px}
  .app-hero-actions{gap:10px;margin-top:24px;max-width:396px}
  .app-hero-actions>.button{height:54px;min-height:54px;font-size:12px;padding-inline:7px;gap:6px}
  .app-hero-actions .store-play-icon{width:26px;height:28px}
  .app-hero-actions .store-play-icon img{width:26px;height:26px}
  .app-hero-actions .store-button-label strong{font-size:15px}
  .app-hero-actions .store-button-label small{font-size:7px;letter-spacing:.7px}
  .app-hero .app-visual{gap:22px}
  .app-hero .phone-frame{width:207px}
  .app-hero .phone-halo{width:320px;height:365px;max-width:95%;top:24px}
  .app-hero .app-tabs{margin:0}
  .benefits>span{font-size:10px}
  .article-card{display:flex;flex-direction:column;border-radius:18px}
  .article-visual{aspect-ratio:1.7;height:auto}
  .article-visual img{width:100%;height:100%;max-width:none}
  .article-body{padding:23px}
  .article-body h3{font-size:25px;margin-top:14px;padding-right:13px}
  .article-body small{font-size:10px}
  .article-body>span:first-child{font-size:9px}
  .article-arrow{font-size:23px;right:20px;bottom:20px}
  .reads-heading h2{font-size:36px}
  .article-grid{gap:22px}
  .lesson-path{gap:6px}
  .path-item{min-width:0;gap:8px}
  .path-item h3{font-size:10px;text-wrap:balance}
  .quiz-choices-text .choice{min-height:100px;font-size:13px;padding-inline:4px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}