/* state rules that cannot be inline */
.burger{display:none;}

@media (max-width:1023px){
  .desk-nav,.hdr-actions{display:none!important;}
  .burger{display:flex;}
  header{overflow:visible!important;}
  .hdr-inner{min-height:78px!important;padding:8px 16px!important;justify-content:space-between!important;gap:10px!important;}
  .hero-logo{
    left:16px!important;
    top:auto!important;
    bottom:0!important;
    width:104px!important;
    transform:translateY(42%)!important;
    z-index:90!important;
  }
  .logo-space{width:104px!important;}
  .lang-btn{font-size:12px!important;padding:7px 11px!important;border-radius:9px!important;}
  .sec-weekly{padding:26px 16px 56px!important;}
  .cards-grid{gap:30px!important;}
  .how-box{padding:48px 16px 30px!important;}
  .step-col{border-left:0!important;border-top:1.5px dashed #FBC521;padding:22px 12px 0!important;}
  .step-col:first-child{border-top:0;padding-top:0!important;}
  .sec-features{padding:26px 16px 0!important;}
  .sec-winners{padding:36px 0 0!important;}
  .how-pill{font-size:16px!important;padding:8px 24px!important;}
}

/* ---- tablet / phone: keep collage, scale overlays for readability ---- */
@media (max-width:820px){
  /* Hero: desktop keeps old full-bleed jpg; mobile uses transparent bag/house art */
  #home{display:block;position:relative;overflow:hidden;}
  .hero-bgimg-desk{display:none!important;}
  .hero-bgimg-mob{
    display:block!important;
    position:absolute!important;
    inset:auto!important;
    left:auto!important;
    right:1vw!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:46vw!important;
    max-width:none!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:right center!important;
    z-index:1!important;
    pointer-events:none;
  }
  .hero-grid{
    position:relative!important;
    z-index:3!important;
    height:64vw!important;
    min-height:240px;
    padding:0!important;
    order:unset!important;
  }
  .hero-copy{
    position:absolute!important;
    left:5vw!important;
    top:10vw!important;
    width:40vw!important;
    z-index:3;
  }
  .hero-copy h1{
    font-size:clamp(15px,4.2vw,26px)!important;
    line-height:1.2!important;
  }
  .hero-copy p{
    font-size:clamp(9px,2.2vw,13px)!important;
    line-height:1.4!important;
    margin-top:.8vw!important;
    max-width:100%!important;
  }
  .hero-copy p br{display:block;}
  .hero-btns{
    margin:2.2vw 0 0 0!important;
    gap:1.4vw!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:flex-start!important;
  }
  .hero-btn{
    height:clamp(26px,6.2vw,40px)!important;
    min-height:0!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    flex:none!important;
    font-size:clamp(8px,2.1vw,12px)!important;
    border-radius:clamp(4px,.55vw,8px)!important;
    padding:0 clamp(6px,1.6vw,12px)!important;
    gap:clamp(3px,.5vw,7px)!important;
    box-shadow:0 3px 8px rgba(11,63,168,.22)!important;
    white-space:nowrap!important;
  }
  .hero-btn .btn-arrow,
  .hero-btn img{width:clamp(10px,2.4vw,16px)!important;}
  .hero-decor,.hero-badge,.hero-bee{display:block!important;}
  /* Gap between copy and bag art for the bee */
  .hero-bee{
    width:clamp(34px,9.5vw,58px)!important;
    left:40vw!important;
    top:15vw!important;
    z-index:4!important;
  }
  .hero-badge{width:clamp(28px,7.5vw,56px)!important;left:30vw!important;top:1.2vw!important;}
  .hero-curve{
    position:absolute!important;
    left:0!important;
    bottom:-1px!important;
    width:100%!important;
    z-index:4!important;
    margin:0!important;
  }

  /* Journey cards: hide floating connector arrows that drift off-screen */
  .card-arrow{display:none!important;}
  .cards-grid{grid-template-columns:1fr!important;gap:36px!important;max-width:420px;margin:0 auto;}
  .card{padding:36px 18px 22px!important;}
  .card > img[src*="calculator"],
  .card > img[src*="flask"],
  .card > img[src*="robot"],
  .card > img[src*="icon-"]{max-height:110px!important;width:auto!important;margin:0 auto 16px!important;}

  /* How-to: pin step numbers next to icons */
  .step-icon{overflow:visible;}
  .step-num{
    top:-4px!important;
    right:-14px!important;
    width:26px!important;
    height:26px!important;
    font-size:13px!important;
  }
  [dir="rtl"] .step-num{right:auto!important;left:-14px!important;}
  .step-col img{height:72px!important;}
  .step-col h4{font-size:17px!important;}
  .step-col p{font-size:13px!important;}

  /* Works collage: scale text overlays, keep art positions */
  #works .tag-chip span{font-size:clamp(12px,3.8vw,18px)!important;}
  .works-h{
    font-size:clamp(16px,5vw,28px)!important;
    line-height:1.3!important;
    width:50%!important;
    right:16%!important;
    top:20%!important;
  }
  .works-h br{display:none;}
  .works-p{
    font-size:clamp(11px,2.8vw,15px)!important;
    line-height:1.4!important;
    width:50%!important;
    right:16%!important;
    top:50%!important;
  }
  .works-p br{display:none;}
  .works-bee{width:clamp(28px,9%,56px)!important;left:34%!important;top:58%!important;}

  /* Prizes collage */
  .prizes-h{
    font-size:clamp(15px,4.6vw,26px)!important;
    line-height:1.12!important;
    width:58%!important;
    -webkit-text-stroke:clamp(1.5px,.35vw,3px) #0B3FA8!important;
    text-shadow:0 1px 0 rgba(11,63,168,.4)!important;
  }
  .prizes-rib{width:clamp(36%,44%,52%)!important;left:50%!important;transform:translateX(-50%);top:64%!important;}

  /* Features: single column, readable */
  .feat-row{flex-direction:column!important;gap:14px!important;}
  .feat-card{
    flex:none!important;
    width:100%!important;
    grid-template-columns:1fr!important;
    padding:10px 8px!important;
  }
  .feat-item{
    border-left:0!important;
    border-top:1px solid #EBE5D7!important;
    padding:14px 14px!important;
    gap:14px!important;
  }
  .feat-item:first-child{border-top:0!important;}
  .feat-ico{width:56px!important;}
  .feat-item h3{font-size:16px!important;}
  .feat-item p{font-size:13px!important;}
  .feat-promo{
    flex:none!important;
    width:100%!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    gap:8px!important;
    padding:16px 12px!important;
  }
  .feat-promo-ico{width:48px!important;}
  .feat-promo-copy h3{font-size:20px!important;}
  .feat-promo-copy button{font-size:14px!important;padding:11px 18px!important;}

  /* Notebook / Get Ready collage — keep overlays inside art, still readable */
  .week-h{font-size:clamp(16px,4.5vw,24px)!important;gap:8px!important;padding:0 12px!important;}
  .week-h > img{width:22px!important;}
  .notebook-stage .tag-pill > div{
    gap:clamp(3px,.5vw,6px)!important;
    padding:0 3%!important;
  }
  .notebook-stage .tag-pill span.tag-pill-label,
  .notebook-stage .tag-pill > div > span{
    font-size:clamp(8px,2vw,11px)!important;
    white-space:nowrap!important;
    letter-spacing:-.01em!important;
    line-height:1!important;
  }
  .notebook-stage .tag-pill img{width:clamp(10px,2.2vw,14px)!important;flex:none!important;}
  /* Desktop shows full AI label; mobile uses short "AI" */
  .tag-label-short{display:none!important;}
  .tag-pill-ai .tag-label-full{display:none!important;}
  .tag-pill-ai .l-en.tag-label-short{display:inline!important;}
  [dir="rtl"] .tag-pill-ai .l-en.tag-label-short{display:none!important;}
  [dir="rtl"] .tag-pill-ai .l-ar.tag-label-short{display:inline!important;}
  .tag-pill-ai .tag-pill-label{font-size:clamp(8px,2.1vw,12px)!important;}
  .np-q{
    font-size:clamp(7px,1.9vw,11px)!important;
    line-height:1.3!important;
    width:21%!important;
    left:43%!important;
    top:46%!important;
  }
  .np-chips{gap:.5vw!important;}
  .np-chips span{font-size:clamp(7px,1.8vw,11px)!important;padding:.4vw 1vw!important;}
  .score-h{
    font-size:clamp(8px,2vw,12px)!important;
    white-space:normal!important;
    line-height:1.1!important;
    width:22%!important;
    left:68%!important;
    top:20%!important;
  }
  .score-h span[style*="1.3em"]{font-size:1.05em!important;}
  .score-rib{width:18%!important;left:59%!important;top:35%!important;}
  .np-stats{
    flex-direction:column!important;
    gap:3px!important;
    align-items:flex-start!important;
    top:65%!important;
  }
  .np-stats > span{
    font-size:clamp(6px,1.6vw,10px)!important;
    padding:2px 6px!important;
  }
  .np-stats img{width:10px!important;}
  .np-cta{
    font-size:clamp(6.5px,1.6vw,10px)!important;
    min-height:0!important;
    height:7.5%!important;
    width:21%!important;
    left:59%!important;
    gap:3px!important;
    padding:0 3px!important;
    white-space:nowrap!important;
    line-height:1!important;
  }
  .np-cta .btn-arrow{width:clamp(8px,1.7vw,12px)!important;flex:none!important;}
  .np-cta > span{white-space:nowrap!important;}

  .dash-h-wrap{padding:12px 0 0!important;}
  .footer-row{flex-direction:column!important;gap:14px!important;text-align:center!important;align-items:center!important;}
  .footer-row img{height:auto!important;max-height:40px;}
  .footer-row p{font-size:12.5px!important;}
}

@media (max-width:600px){
  .hdr-inner{min-height:64px!important;padding:6px 12px!important;}
  .hero-logo{left:12px!important;width:86px!important;transform:translateY(45%)!important;}
  .logo-space{width:86px!important;}
  .lang-btn{padding:5px 9px!important;font-size:11px!important;}
  .modal-panel{padding:18px 16px!important;border-radius:20px!important;}
  .journey-h{width:90%!important;margin-bottom:36px!important;font-size:clamp(22px,6.5vw,28px)!important;}
  .card{padding:32px 14px 20px!important;}
  .quiz-q{font-size:20px!important;}

  .how-pill{font-size:14px!important;padding:8px 18px!important;white-space:normal!important;text-align:center;max-width:90%;}
  .step-num{right:-10px!important;top:0!important;}

  /* Hero stays collage — transparent bag/house art scales on the right */
  .hero-grid{height:68vw!important;min-height:260px;}
  .hero-copy{left:4vw!important;top:10vw!important;width:38vw!important;}
  .hero-copy h1{font-size:clamp(14px,4.6vw,20px)!important;}
  .hero-copy p{font-size:clamp(8px,2.4vw,11px)!important;max-width:100%!important;}
  .hero-btn{height:clamp(24px,6.5vw,34px)!important;font-size:clamp(7px,2.2vw,10px)!important;padding:0 7px!important;}
  .hero-bgimg{width:52vw!important;right:0!important;}
  .hero-bgimg-mob{width:52vw!important;right:0!important;}
  .hero-bee{left:39vw!important;top:14vw!important;width:clamp(30px,8.5vw,48px)!important;}

  /* Tighter collage type on small phones — still overlay, not stacked */
  .works-h{font-size:clamp(14px,5vw,20px)!important;top:18%!important;right:14%!important;width:52%!important;}
  .works-p{font-size:clamp(10px,2.8vw,13px)!important;top:48%!important;}
  .prizes-h{font-size:clamp(13px,4.8vw,18px)!important;-webkit-text-stroke:1.5px #0B3FA8!important;}
  .prizes-rib{width:48%!important;top:62%!important;}
  .prizes-decor{opacity:.85;}

  .feat-promo-ico{width:40px!important;}
  .feat-promo{gap:6px!important;}
  .feat-promo-copy p{font-size:12px!important;}
  .feat-promo-copy h3{font-size:18px!important;}

  .np-q{width:21%!important;left:43%!important;font-size:clamp(7px,1.85vw,10px)!important;}
  .score-h{width:22%!important;left:68%!important;top:20%!important;font-size:clamp(7.5px,1.9vw,11px)!important;}
  .np-stats{left:58%!important;top:64%!important;}
  .np-cta{width:22%!important;left:58.5%!important;font-size:clamp(6.5px,1.55vw,9.5px)!important;}
  .tag-pill-ai .tag-pill-label{font-size:clamp(8px,2.1vw,11px)!important;}
}

/* Very small phones: keep collage but prevent text from vanishing */
@media (max-width:400px){
  .hero-grid{height:72vw!important;min-height:270px;}
  .hero-copy{width:36vw!important;}
  .hero-copy h1{font-size:clamp(13px,4.8vw,17px)!important;}
  .hero-copy p{font-size:clamp(8px,2.5vw,10px)!important;}
  .hero-btn{font-size:clamp(8px,2.5vw,10px)!important;padding:0 8px!important;}
  .hero-bgimg{width:54vw!important;}
  .hero-bgimg-mob{width:54vw!important;}
  .hero-bee{left:37vw!important;}
  .works-h{font-size:13px!important;}
  .works-p{font-size:10px!important;}
  .prizes-h{font-size:12px!important;}
  .tag-pill span{letter-spacing:-.02em;}
  .np-cta span.l-en,.np-cta span.l-ar{font-size:inherit;}
}