/* generated by tools/build_arabic.cjs from responsive.css — edit the source, not this file */
/* ---------- 8 · responsive ---------- */
@media (max-width:1180px){
  .nav-links{display:none}
  .svc-layer,.cl-wrap,.lms,.ck{grid-template-columns:1fr}
  .cl-wall{border-left:none;border-bottom:1px solid var(--pap-18)}
  .lms{--side:100%;grid-template-rows:auto auto;height:auto;min-height:0}
  .lms::after{display:none}
  .lms-play{order:1;overflow:visible;position:static;background:var(--white);border-bottom:1px solid var(--ink-12);
    padding:18px 20px;gap:14px}
  .lms-head{padding:14px 20px}
  /* V8.1 · width leads and the ratio follows it, so the stacked player keeps
     16:9 instead of stretching to whatever height the override asked for */
  .lms-video{aspect-ratio:16/9;height:auto;min-height:0;max-height:none;
    width:min(100%, calc(min(34vh,300px) * 16 / 9))}
  .lms-info p{-webkit-line-clamp:3}
  .lms-side{order:2;border-left:none;max-height:none;overflow:visible}
  /* under 1180 the whole layer scrolls once — no box inside a box */
  .layer-sheet[data-fill="1"] .layer-body{display:block;overflow-y:auto}
  .layer-sheet[data-fill="1"] .lms{height:auto;min-height:0;flex:none}
  .layer-sheet[data-fill="1"] .ck{min-height:0;max-height:none;margin:0}
  .svc-list{display:block}
  .svc-list button{min-height:58px}
  .contact-opt .drop{min-height:150px}
  .rail{display:none}
}
@media (max-width:900px){

  /* Phase 3: absolute mobile floor for mono labels */
  .rail button,
  .sec-open,.sec-visited,.pcard .flag,.pcard .ptools span,.svc .tag,.tcell .tkind,
  .side-count span,.side-chips span,.course-cards .ckind,.yt-nums span,.pcover .pfield,
  .pmeta .ptags span,.pplayer .plabel,.pplayer .phint,.tabs button,
  .drop-zone .zk,.trg b,.svc-list .s-num,.svc-list .s-tag,.svc-gets b,
  .svc-foot .rel,.svc-cart,.cl-wall button,.cl-detail .cfield,.copy-btn,.prev-bar,.run-btn,
  .demo-menu li span,.edit-box>b,.how-to b,.lms-head .k,.lms-prog-lg,.lms-mod,.lms-les .lt,
  .lms-video .src,.lms-info .k,.lms-nav,.c-me em,.c-req,.c-alt,.opt-k,.drop .k{font-size:10px}
  .checkup-wrap{grid-template-columns:1fr;gap:30px}
  .ck-list{grid-template-columns:1fr;gap:16px}
  .nav-links,.pdf-link{display:none}
  .cards-3,.svc-grid,.grid-6,.contact-grid{grid-template-columns:1fr}
  .pmeta{grid-template-columns:1fr;gap:18px}
  .pgal{grid-template-columns:repeat(2,1fr)}
  .menu-list{grid-template-columns:1fr}
  .code-col{border-right:none;border-left:none;border-top:1px solid var(--pap-18);border-bottom:1px solid var(--pap-18)}
  .cl-wall{grid-template-columns:repeat(2,1fr)}
  .svc-gets{grid-template-columns:1fr}
  .layer-sheet{top:34px;border-radius:0}
  .grabber{display:block;width:46px;height:4px;border-radius:0;background:var(--pap-30);margin:9px auto 0}
  [data-surface="light"] .grabber{background:var(--ink-30)}
  .layer-head{padding:14px var(--pad)}
  .layer-progress{display:none}
  .layer-body{padding:22px var(--pad) 30px}
  .contact-grid .contact-form{order:1}
  .contact-grid .contact-opt{order:2}
  .hire-bar{right:0;left:0;justify-content:center}
  .foot{padding-bottom:84px}
  .yt-wrap{grid-template-columns:1fr;gap:26px}
  .yt-3d{min-height:0;order:-1;justify-items:start}
  .yt-badge{width:min(62%,190px)}
  .yt-nums div{padding-left:12px}
  .yt-nums div+div{padding-right:14px}
  .demo-match{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lift-options{gap:6px}.lift-options button{padding-inline:4px}.lift-options button span{font-size:10px}
  .type-row{grid-template-columns:1fr}.type-row button{width:100%}
}
@media (max-width:480px){
  .lms-video{aspect-ratio:16/9;width:100%;height:auto;min-width:0;min-height:0;max-height:none}
  .sim-tools{grid-template-columns:1fr}.sim-tools button{border-left:0;border-bottom:1px solid var(--pap-18)}
  .resource-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resource-actions{grid-template-columns:1fr}
  .media-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .edit-row{flex-direction:column;align-items:flex-start}
  .prev-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
}
@media (max-width:360px){
  .tcell{padding:11px 12px 11px 14px}
}
/* V10 · card layout */
@media (max-width:1100px){
  .duo,.duo.is-flip,.yt-wrap.duo.is-flip{grid-template-columns:1fr;gap:30px}
  .duo.is-flip .duo-copy{order:0}
  .qcard{flex-basis:calc((100% - 16px) / 2)}
}
@media (max-width:900px){
  .band-head.is-split{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .toolkit-bar{grid-template-columns:1fr;gap:14px}
  .toolkit-label h2{font-size:22px}
}
@media (max-width:700px){
  .qcard{flex-basis:100%}
  .duo-side .svc-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos>:last-child:nth-child(odd){grid-column:1/-1}
  .cta-row .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* V42 hero — tablet keeps the side portrait; phone: portrait on top, headline over its faded bottom */
@media (max-width:1180px) and (min-width:901px){
  .hero{min-height:820px}
  .hero-photo{width:60%}
  .hero-copy{max-width:640px}
}
@media (max-width:900px){
  .hero{position:relative;z-index:0;display:block;min-height:0;padding:0}
  .hero-photo{position:relative;z-index:0;width:100%;height:clamp(400px,108vw,560px)}
  .hero-photo::after{background:linear-gradient(0deg,var(--ink) 4%,rgba(23,43,54,0) 52%),linear-gradient(-180deg,rgba(23,43,54,.55) 0%,rgba(23,43,54,0) 22%)}
  .hero-avail{position:absolute;z-index:2;top:76px;right:var(--pad);left:var(--pad);justify-content:space-between;padding:10px 12px;gap:10px}
  .hero-avail .k{font-size:7.6px;letter-spacing:.12em}
  .hero-avail b{font-size:12.5px}
  .hero-btns .btn{padding-right:18px;padding-left:18px}
  .hero-copy{position:relative;z-index:1;max-width:none;margin-top:-120px;padding:0 var(--pad)}
  .hero-copy h1{font-size:clamp(40px,11vw,64px)}
  .hero-foot{display:block;margin:34px var(--pad) 0;padding:22px 0 30px;min-height:0}
  .hero-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .hero-trust{height:auto;margin-top:22px;padding:18px 0 0;border-right:0;border-top:1px solid rgba(241,246,244,.18);flex-direction:column;align-items:flex-start;gap:14px}
  .hero-trust-logos{width:100%;gap:24px}
  .hero-trust-logos img{height:22px}
  .nav{padding:22px var(--pad) 0}
}
@media (max-width:480px){
  .hero-avail{right:auto}
  .hero-avail .k{font-size:0;gap:0}          /* very small phones: keep the breathing dot, drop the words */
  .hero-avail .k .availability-dot{margin-top:0}
}