/* home-2 · learn.miraqa.site landing — app-style, mobile first. Loaded only by "/" after app.css. */
body.h2{--f:"Readex Pro","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-family:var(--f);background:var(--paper);font-size:16px;line-height:1.8;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
@media(min-width:960px){body.h2{padding-bottom:0}}
.h2 h1,.h2 h2,.h2 h3{font-family:var(--fd);letter-spacing:0}
.h2 code{font-family:var(--fm);font-size:.9em;background:rgba(194,65,12,.1);color:var(--acc-ink);padding:1px 6px;border-radius:6px;unicode-bidi:isolate;white-space:nowrap}

/* chunky app button (Duolingo-style depth) */
.cb{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border-radius:16px;background:var(--acc);color:#fff;font:600 16.5px var(--f);text-decoration:none;box-shadow:0 4px 0 #7c2d12;transition:transform .08s,box-shadow .08s,background .15s;cursor:pointer;border:0;white-space:nowrap}
.cb:hover{background:#b23c0b}
.cb:active{transform:translateY(4px);box-shadow:0 0 0 #7c2d12}
.cb.block{display:flex;width:100%}
.cb:focus-visible{outline:3px solid #fdba74;outline-offset:3px}

/* dark top bar, part of the hero sheet */
.hx-top{background:rgba(28,25,23,.94);border-bottom:1px solid rgba(255,255,255,.06)}
.hx-top .wrap{height:58px}
.hx-top .logo .wm,.hx-top .logo .wm-en{color:#f5f0e8}.hx-top .logo small{color:#a8a29e}
.hx-top .logo>svg rect,.hx-foot .logo>svg rect{fill:#292524;stroke:rgba(255,255,255,.12);stroke-width:1}
.hx-top .logo .wm{height:34px}
.hx-top nav a{color:#d6d3d1}.hx-top nav a:hover{color:#fdba74}
.hx-top .lang{background:transparent;border-color:rgba(255,255,255,.18);color:#f5f0e8}
.hx-in{color:#f5f0e8;text-decoration:none;font-weight:500;font-size:14.5px;padding:8px 6px}
.hx-cta-top{display:none}
@media(min-width:960px){.hx-cta-top{display:inline-flex}}

/* hero sheet */
.hx-hero{background:radial-gradient(900px 420px at 12% -10%,rgba(251,146,60,.20),transparent 60%),radial-gradient(700px 380px at 100% 110%,rgba(253,230,138,.10),transparent 60%),var(--ink);color:#f5f0e8;border-radius:0 0 32px 32px;padding:22px 0 30px;margin-top:-1px}
.hx-hero-in{display:grid;gap:24px;align-items:center}
@media(min-width:960px){.hx-hero{padding:56px 0 64px;border-radius:0 0 48px 48px}.hx-hero-in{grid-template-columns:1.05fr .95fr;gap:48px}}
.hx-kick{display:inline-block;font:500 12.5px var(--f);color:#fdba74;background:rgba(251,146,60,.12);border:1px solid rgba(251,146,60,.3);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.hx-hero h1{font-size:clamp(30px,8.4vw,54px);line-height:1.22;font-weight:700;margin:0 0 12px;color:#fff}
.hx-hero h1 em{font-style:normal;color:#fdba74;position:relative;white-space:nowrap}
.hx-hero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.16em;background:#c2410c;border-radius:4px;z-index:-1;opacity:.85}
.hx-hero h1{position:relative;z-index:0}
.hx-lead{font-size:clamp(15.5px,4.1vw,19px);color:#d6d3d1;line-height:1.85;max-width:560px;margin:0 0 18px;font-weight:300}
.hx-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hx-ctas .cb{flex:1 1 auto}
@media(min-width:560px){.hx-ctas .cb{flex:0 0 auto}}
.hx-ghost{color:#f5f0e8;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(245,240,232,.35);padding:4px 0}
.hx-trust{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:14px 0 0;color:#a8a29e;font-size:13px}
.hx-trust li::before{content:"✓ ";color:#86efac;font-weight:700}

/* interactive demo card */
.hx-demo{background:#262220;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.hx-dbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hx-dots{display:flex;gap:6px}.hx-dots i{width:10px;height:10px;border-radius:50%;background:#57534e}
.hx-dots i:first-child{background:#f87171}.hx-dots i:nth-child(2){background:#fbbf24}.hx-dots i:nth-child(3){background:#4ade80}
.hx-file{font:500 12.5px var(--fm);color:#a8a29e}
.hx-try{margin-inline-start:auto;font-size:12px;color:#fde68a;background:rgba(253,230,138,.1);padding:2px 10px;border-radius:999px}
.hx-prog{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 10px}
.hx-prog li{flex:1;height:5px;border-radius:9px;background:#3f3a36;transition:background .3s}
.hx-demo[data-s="1"] .hx-prog li:nth-child(-n+1),.hx-demo[data-s="2"] .hx-prog li:nth-child(-n+2),.hx-demo[data-s="3"] .hx-prog li{background:#fb923c}
.hx-code{margin:0;background:#1c1917;border-radius:14px;padding:12px 14px;text-align:left;overflow-x:auto;font:400 13.5px/1.75 var(--fm);color:#e7e5e4}
.hx-code .ln{color:#78716c;margin-right:12px;user-select:none}.hx-code .k{color:#fdba74}
.hx-l3{display:inline-block;width:100%;border-radius:4px;transition:background .3s}
.hx-fix{display:none;color:#86efac}
.hx-demo[data-s="1"] .hx-l3,.hx-demo[data-s="2"] .hx-l3{background:rgba(248,113,113,.18)}
.hx-demo[data-s="3"] .hx-l3{background:rgba(74,222,128,.14)}
.hx-demo[data-s="3"] .hx-bug{display:none}.hx-demo[data-s="3"] .hx-fix{display:inline}
.hx-out{min-height:36px;margin:10px 2px 0;font-size:13.5px}
.hx-out p{margin:0;display:none}
.hx-out .o0{color:#a8a29e}.hx-out .o1{color:#fca5a5;font-family:var(--fm);text-align:left}.hx-out .o3{color:#86efac;font-family:var(--fm);text-align:left}
.hx-demo[data-s="0"] .o0,.hx-demo[data-s="1"] .o1,.hx-demo[data-s="2"] .o1,.hx-demo[data-s="3"] .o3{display:block}
.hx-bub{display:none;gap:10px;align-items:flex-start;margin-top:10px;animation:hxpop .35s cubic-bezier(.2,.9,.3,1.3)}
.hx-demo[data-s="2"] .hx-bub,.hx-demo[data-s="3"] .hx-bub{display:flex}
.hx-av{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#fb923c,#c2410c);color:#fff;display:grid;place-items:center;font:700 15px var(--fd)}
.hx-bub>div{background:#fff;color:var(--ink);border-radius:18px;border-start-start-radius:6px;padding:10px 14px;font-size:14.5px;line-height:1.8}
.hx-bub b{color:var(--acc-ink)}
.hx-bub p{margin:0}.hx-bub .b3{display:none}
.hx-demo[data-s="3"] .hx-bub .b2{display:none}.hx-demo[data-s="3"] .hx-bub .b3{display:block}
.hx-terms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hx-demo[data-s="3"] .hx-terms{display:none}
.hx-bub .wave{color:var(--acc-ink);margin-top:8px}.hx-bub .wave b{background:var(--acc)}
.hx-act{margin-top:12px;width:100%;min-height:50px;border-radius:14px;border:0;background:#fde68a;color:#1c1917;font:600 15.5px var(--f);cursor:pointer;box-shadow:0 4px 0 #b45309;transition:transform .08s,box-shadow .08s}
.hx-act:active{transform:translateY(4px);box-shadow:none}
.hx-act:focus-visible{outline:3px solid #fdba74;outline-offset:3px}
.hx-act span{display:none}
.hx-demo[data-s="0"] .a0,.hx-demo[data-s="1"] .a1,.hx-demo[data-s="2"] .a2,.hx-demo[data-s="3"] .a3{display:inline}
.hx-demo[data-s="0"] .hx-act{animation:hxpulse 2.2s infinite}
@keyframes hxpop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes hxpulse{0%,100%{box-shadow:0 4px 0 #b45309,0 0 0 0 rgba(253,230,138,.45)}50%{box-shadow:0 4px 0 #b45309,0 0 0 8px rgba(253,230,138,0)}}
@media (prefers-reduced-motion:reduce){.hx-bub{animation:none}.hx-demo[data-s="0"] .hx-act{animation:none}}

/* sections */
.hx-sec{padding:28px 0 2px}
@media(min-width:960px){.hx-sec{padding:64px 0 10px}}
.hx-k{display:block;font:600 12.5px var(--f);color:var(--acc-ink);margin-bottom:4px}
.hx-sec h2{font-size:clamp(22px,5.8vw,34px);line-height:1.35;margin:0}
.hx-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 16px;margin-bottom:14px}
.hx-head>h2{flex:1 1 260px}.hx-head>.hx-k{flex-basis:100%}
.hx-head1{margin-bottom:16px;max-width:720px}
.hx-sub,.hx-note{color:var(--mut);font-size:14px;margin:6px 0 0}
.hx-arrows{display:none}
.hx-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font:600 22px/1 var(--f);color:var(--ink);cursor:pointer}
.hx-arrows button:hover{background:var(--acc-soft);border-color:var(--acc-line)}

/* horizontal rails (scroll-snap, swipe) */
.hx-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding:4px 18px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:1120px;margin:0 auto}
.hx-rail::-webkit-scrollbar{display:none}
.hx-rail:focus-visible{outline:3px solid var(--acc-line);outline-offset:-3px;border-radius:20px}
.hx-rail>*{scroll-snap-align:start;flex:0 0 78%;max-width:340px}
@media(min-width:960px){.hx-rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:4px 18px 8px;gap:14px}.hx-rail>*{max-width:none}#rail-tracks{grid-template-columns:repeat(4,1fr)}}
.hx-fc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 1px 2px rgba(28,25,23,.04)}
.hx-fc .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 11%,#fff);margin-bottom:12px}
.hx-fc .ic svg{width:24px;height:24px}
.hx-fc h3,.hx-tc h3{font-size:17.5px;margin:0 0 6px}
.hx-fc p,.hx-tc p{color:var(--ink2);font-size:14.5px;line-height:1.8;margin:0}
.hx-tc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hx-tc::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--tc)}
.hx-tl{align-self:flex-start;font:500 12px var(--fm);color:var(--tc);background:color-mix(in srgb,var(--tc) 10%,#fff);padding:2px 10px;border-radius:999px;margin:4px 0 10px}
.hx-tc ul{margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink2)}
.hx-tc li{padding:3px 0;border-top:1px dashed var(--line)}
.hx-tc li::before{content:"●";color:var(--tc);font-size:9px;margin-inline-end:8px;vertical-align:2px}
.hx-kits{background:var(--ink);border-color:var(--ink);color:#f5f0e8}
.hx-kits h3{color:#fff}.hx-kits p{color:#d6d3d1}.hx-kits .hx-tl{color:#fde68a;background:rgba(253,230,138,.12)}
.hx-kits .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* ladder: one compact staircase stepper */
.hx-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;margin-top:6px}
.hx-ladder button{border:1px solid var(--line);background:#fff;border-radius:16px 16px 10px 10px;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;color:var(--ink);font:500 12.5px var(--f);transition:background .2s,transform .15s}
.hx-ladder button:nth-child(1){height:62px}.hx-ladder button:nth-child(2){height:78px}.hx-ladder button:nth-child(3){height:94px}.hx-ladder button:nth-child(4){height:110px}.hx-ladder button:nth-child(5){height:126px}
.hx-ladder b{font:700 24px var(--fd);color:var(--acc)}
.hx-ladder button[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 4px 0 #7c2d12;transform:translateY(-2px)}
.hx-ladder button[aria-selected="true"] b{color:#fde68a}
.hx-ladder button:focus-visible{outline:3px solid var(--acc-line);outline-offset:2px}
.hx-ldesc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin-top:12px;font-weight:500}
.hx-ldesc p{margin:0}
@media(min-width:960px){.hx-ladder{max-width:760px}.hx-ldesc{max-width:760px}}

/* pricing: segmented control on phones, all plans on desktop */
.hx-seg{display:grid;grid-template-columns:repeat(4,1fr);background:#efe8de;border-radius:14px;padding:4px;gap:2px;margin-bottom:18px}
.hx-seg button{border:0;background:transparent;border-radius:10px;min-height:42px;font:600 14px var(--f);color:var(--ink2);cursor:pointer}
.hx-seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,25,23,.12)}
.hx-seg button:focus-visible{outline:3px solid var(--acc-line)}
.hx-plans{display:grid;gap:14px}
.hx-plans .price{border-radius:22px}
.hx-plans .price li{padding:4px 0}.hx-plans .price .btn.block{min-height:50px;border-radius:14px}
@media(max-width:959px){.hx-plans .price:not(.on){display:none}}
@media(min-width:960px){.hx-seg{display:none}.hx-plans{grid-template-columns:repeat(4,1fr)}}

/* FAQ */
.hx-faq h2{margin-bottom:8px}
.hx-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin:6px 0;padding:0 14px}
.hx-faq summary{list-style:none;cursor:pointer;font-weight:500;padding:11px 0;display:flex;justify-content:space-between;gap:12px}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary::after{content:"+";color:var(--acc);font-weight:700;font-size:20px;line-height:1}
.hx-faq details[open] summary::after{content:"−"}
.hx-faq details p{margin:0 0 14px;color:var(--ink2);font-size:14.5px}
@media(min-width:960px){.hx-faq{max-width:820px}}

/* footer */
.hx-foot{background:var(--ink);color:#d6d3d1;margin-top:30px;padding:28px 0 24px;font-size:14px;border-radius:32px 32px 0 0}
.hx-foot .logo{color:#fff}.hx-foot .logo .wm{color:#fff;height:34px}
.hx-fdesc{margin:12px 0 10px;color:#a8a29e}
.hx-flinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.hx-flinks a{color:#f5f0e8;text-decoration:none}.hx-flinks a:hover{color:#fdba74}
.hx-copy-r{margin:18px 0 0;color:#a8a29e;font-size:12.5px}

/* sticky bottom CTA (phones) */
.hx-sticky{position:fixed;inset-inline:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,248,243,.9);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-top:1px solid var(--line);text-align:center;transition:transform .25s}
.hx-sticky span{display:block;font-size:12px;color:var(--mut);margin-top:8px;line-height:1}
.hx-sticky.off{transform:translateY(110%)}
@media(min-width:960px){.hx-sticky{display:none}}
html[dir="ltr"] .hx-code .ln{margin-right:12px}

@media(max-width:959px){.hx-hero-in{gap:18px}.hx-lead{margin-bottom:14px}.hx-trust{margin-top:10px}.hx-fc{padding:16px}.hx-fc .ic{width:40px;height:40px;margin-bottom:8px}}