/* =======================================================================
   TOP A Traders — Home C1.
   Loaded by resources/views/public/home/layout.blade.php only, after the
   design system (css/topa-ds.css). Every class here starts with «hm-», so it
   cannot reach the shared header, footer or any other page.

   21st references (patterns only, rebuilt here; see docs/handoff/C1_HANDOFF.md):
   hero — «Spotlight» + «Horizon Glow Hero» + «Sparkles Title»; TOP A System —
   «Scroll Reveal Content A» + «Sticky Content Wrapper»; services — «Services
   Stack» (desktop), «Stacking Cards» + «Scrollable Card Stack» (phones);
   «أيضاً من TOP A» — «Coverflow Carousel» + «Apple Card Carousel».
   ======================================================================= */

:root{
  --hm-bg:var(--t-bg); --hm-s1:var(--t-s1); --hm-s2:var(--t-s2); --hm-s3:var(--t-s3);
  --hm-ink:var(--t-ink); --hm-ink-2:var(--t-ink-2); --hm-mute:var(--t-mute); --hm-mute-2:var(--t-mute-2);
  --hm-line:var(--t-line); --hm-line-2:var(--t-line-2); --hm-line-3:var(--t-line-3);
  --hm-green:var(--t-green); --hm-green-3:var(--t-green-3); --hm-green-ink:var(--t-green-ink);
  --hm-green-soft:var(--t-green-soft); --hm-green-line:var(--t-green-line);
  --hm-blue:#8FC3F2; --hm-blue-soft:rgba(143,195,242,.10); --hm-blue-line:rgba(143,195,242,.38);
  --hm-red:var(--t-danger);
  --hm-font:var(--t-display);
  --hm-wrap:1180px; --hm-gut:var(--t-gutter);
  --hm-r:var(--t-r); --hm-r-l:var(--t-r-l); --hm-r-xl:var(--t-r-xl);
  --hm-e:var(--t-e-out); --hm-e2:var(--t-e-std);
  --hm-sec:var(--t-sec); --hm-hdr:var(--t-hdr-h);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hm-bg);color:var(--hm-ink);font-family:var(--hm-font);font-size:var(--t-fs-body);line-height:var(--t-lh-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--hm-green);outline-offset:3px;border-radius:6px}
.hm-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hm-ltr{direction:ltr;unicode-bidi:isolate}
.hm-nw{white-space:nowrap}
.hm-num{font-variant-numeric:tabular-nums}

.hm-wrap{width:100%;max-width:var(--hm-wrap);margin-inline:auto;padding-inline:var(--hm-gut)}
.hm-sec{padding-block:var(--hm-sec);position:relative}

/* type: one family (Thmanyah Sans), three sizes that matter */
.hm-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;font-weight:500;color:var(--hm-green)}
.hm-kicker::before{content:"";width:18px;height:1px;background:currentColor;opacity:.75}
.hm-h1{font-size:var(--t-fs-display);line-height:var(--t-lh-display);font-weight:700;text-wrap:balance}
.hm-h2{font-size:var(--t-fs-h1);line-height:var(--t-lh-head);font-weight:700;text-wrap:balance}
.hm-h3{font-size:var(--t-fs-h2);line-height:1.35;font-weight:700;text-wrap:balance}
.hm-em{color:var(--hm-green)}
.hm-lead{margin-top:16px;font-size:var(--t-fs-lead);line-height:1.8;color:var(--hm-ink-2);max-width:var(--t-measure);text-wrap:pretty}

/* buttons: the design-system shape */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:var(--hm-r);font-size:16px;font-weight:700;line-height:1;white-space:nowrap;transition:background var(--t-t1) var(--hm-e2),border-color var(--t-t1) var(--hm-e2),color var(--t-t1) var(--hm-e2),transform var(--t-t1) var(--hm-e2)}
.hm-btn svg{width:17px;height:17px;flex:none;transition:transform var(--t-t2) var(--hm-e)}
.hm-btn:hover svg,.hm-btn:focus-visible svg{transform:translateX(-3px)}
.hm-btn:active{transform:scale(.985)}
.hm-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--hm-bg),0 0 0 4px var(--hm-green)}
.hm-btn--p{background:var(--hm-green);border-color:var(--hm-green);color:var(--hm-green-ink)}
.hm-btn--p:hover,.hm-btn--p:focus-visible{background:var(--hm-green-3);border-color:var(--hm-green-3)}
.hm-btn--s{border-color:var(--hm-line-3);color:var(--hm-ink)}
.hm-btn--s:hover,.hm-btn--s:focus-visible{border-color:var(--hm-ink-2);background:var(--hm-s2)}
.hm-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--t-fs-small);font-weight:500;color:var(--hm-ink-2);transition:color var(--t-t1)}
.hm-link svg{width:15px;height:15px;flex:none;transition:transform var(--t-t2) var(--hm-e)}
.hm-link:hover,.hm-link:focus-visible{color:var(--hm-green)}
.hm-link:hover svg{transform:translateX(-3px)}
.hm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
[aria-disabled="true"]{cursor:default;opacity:.62}
.hm-soon{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--hm-line-2);border-radius:999px;font-size:var(--t-fs-label);font-weight:500;color:var(--hm-ink-2);white-space:nowrap;vertical-align:middle}
.hm-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-warn)}
.hm-cap{margin-top:10px;font-size:var(--t-fs-label);color:var(--hm-mute-2)}

/* reveal: visible at rest; only content below the fold enters, once */
.hm-rv.is-pre{opacity:0;transform:translateY(16px)}
.hm-rv.is-in{opacity:1;transform:none;transition:opacity var(--t-t3) var(--hm-e),transform var(--t-t3) var(--hm-e)}

@keyframes hm-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hm-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes hm-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hm-show{from{opacity:0}to{opacity:1}}
@keyframes hm-node{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}

/* =========================== hero: the words, the name TOP A Traders, the globe ===========================
   The glowing arc of v3 grown into a globe (canvas, js/topa-home.js); C1 colours only. */
.hm-hero{position:relative;padding-top:calc(var(--hm-hdr) + 40px);overflow:hidden;isolation:isolate;text-align:center;--mx:0;--my:0;--sy:0}
.hm-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 45% at 50% 100%,rgba(61,220,111,.12),transparent 70%),var(--hm-bg)}
/* the hero's last band melts into the page's own black, so the globe and its glow never end on a
   cut line before START TOP A; under the figures and the notice (z-index 3), over the globe (1) */
.hm-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:clamp(90px,16vw,200px);pointer-events:none;background:linear-gradient(180deg,rgba(4,7,5,0) 0%,rgba(4,7,5,.55) 48%,var(--hm-bg) 100%)}
.hm-hero__in{position:relative;z-index:3}
.hm-hero__copy{max-width:760px;margin-inline:auto}
.hm-hero .hm-h1{font-size:var(--t-fs-display);line-height:1.1}
.hm-hero__p{margin:16px auto 0;font-size:var(--t-fs-lead);line-height:1.8;color:var(--hm-ink-2);max-width:40ch;text-wrap:pretty}
.hm-hero .hm-acts{justify-content:center;margin-top:26px}
.hm-hero .hm-btn{min-height:54px;font-size:var(--t-fs-btn)}
.hm-hero__note{display:flex;gap:8px;justify-content:center;align-items:flex-start;margin:16px auto 0;font-size:var(--t-fs-label);line-height:1.7;color:var(--hm-mute-2);max-width:56ch}
.hm-hero__note svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--hm-mute)}
.hm-hero__note a{color:var(--hm-mute);text-decoration:underline;text-underline-offset:3px}
@media (max-width:519px){.hm-hero .hm-acts{flex-direction:column;align-items:stretch}.hm-hero .hm-btn{width:100%}}

/* the name, rising from the globe's horizon */
.hm-globe{position:relative;margin-top:clamp(14px,4vw,36px);margin-bottom:-1px;height:clamp(250px,64vw,460px);pointer-events:none}
.hm-brand{position:absolute;z-index:2;left:50%;top:0;display:flex;flex-direction:column;align-items:center;direction:ltr;margin:0;
  transform:translate3d(-50%,calc(var(--sy)*40px),0);white-space:nowrap}
.hm-brand__a{font-weight:700;font-size:clamp(84px,25vw,300px);line-height:.8;letter-spacing:-.045em;
  background:linear-gradient(180deg,#F7F4EC 0%,rgba(241,237,227,.78) 38%,rgba(61,220,111,.32) 78%,rgba(61,220,111,0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.hm-brand__t{margin-top:clamp(4px,1.2vw,14px);padding-left:.62em;font-weight:500;font-size:clamp(12px,2.6vw,24px);letter-spacing:.62em;text-transform:uppercase;color:var(--hm-green);text-shadow:0 0 18px rgba(61,220,111,.55)}
/* the globe: only its cap shows; the rim is the lit arc */
.hm-globe__ball{position:absolute;z-index:1;left:50%;top:clamp(110px,30vw,250px);width:clamp(560px,160vw,1500px);aspect-ratio:1;transform:translateX(-50%) translateY(calc(var(--sy)*-30px));border-radius:50%}
.hm-globe__rim{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,#040705 88%,#071209 97%,transparent 100%);
  box-shadow:0 -1px 0 rgba(140,240,172,.75),0 -10px 34px -6px rgba(61,220,111,.55),0 -70px 160px -40px rgba(61,220,111,.38),inset 0 30px 60px -20px rgba(61,220,111,.28)}
.hm-globe__cv{position:absolute;left:0;top:0;width:100%;height:46%}
@media (min-width:980px){
  .hm-hero{padding-top:calc(var(--hm-hdr) + 30px)}
  .hm-hero__p{font-size:var(--t-fs-lead)}
  .hm-globe{height:300px;margin-top:14px}
  .hm-brand__a{font-size:min(19vw,230px)}
  .hm-brand__t{font-size:20px}
  .hm-globe__ball{top:120px;width:min(1500px,118vw)}
}
@media (prefers-reduced-motion:no-preference){
  .hm-hero__copy{animation:hm-up .9s var(--hm-e) .1s both}
  .hm-brand__a{animation:hm-word 1.6s var(--hm-e) .2s both}
  .hm-brand__t{animation:hm-show 1s linear .9s both}
  .hm-globe__ball{animation:hm-rise 1.6s var(--hm-e) backwards}
}
/* the figures of the published home, on the globe, one row, above the notice */
.hm-hero__foot{position:relative;z-index:3;margin-top:clamp(-150px,-30vw,-70px);padding-bottom:26px}
.hm-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,3vw,48px);max-width:720px;margin-inline:auto;background:none;border:0}
.hm-figs li{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:4px 2px;text-align:center}
/* no box: the numbers sit on the scene, kept legible by a soft dark halo in the text itself */
.hm-figs b{font-size:clamp(26px,7.4vw,40px);font-weight:700;line-height:1.05;color:#F7F4EC;white-space:nowrap;text-shadow:0 0 18px rgba(4,7,5,.95),0 2px 10px rgba(4,7,5,.9)}
.hm-figs b small{font-size:max(.48em,var(--t-fs-micro));font-weight:500;color:var(--hm-green);margin-inline:2px}
.hm-figs li>span{font-size:clamp(var(--t-fs-micro),2.9vw,var(--t-fs-label));line-height:1.45;color:var(--hm-ink-2);text-wrap:balance;text-shadow:0 0 12px rgba(4,7,5,1),0 1px 6px rgba(4,7,5,.95)}
.hm-hero__foot .hm-hero__note{text-shadow:0 0 10px rgba(4,7,5,1),0 1px 4px rgba(4,7,5,1)}
@media (min-width:980px){.hm-hero__foot{margin-top:-34px}}
@keyframes hm-word{from{opacity:0;letter-spacing:.01em}to{opacity:1;letter-spacing:-.045em}}
@keyframes hm-rise{from{opacity:0;transform:translateX(-50%) translateY(60px)}to{opacity:1;transform:translateX(-50%)}}

/* =========================== START =========================== */
.hm-start{background:radial-gradient(50% 60% at 78% 40%,rgba(143,195,242,.06),transparent 70%)}
.hm-start .hm-kicker,.hm-start .hm-em{color:var(--hm-blue)}
.hm-start__in{display:grid;gap:32px;align-items:center}
.hm-start__copy .hm-h2{margin-top:6px}
.hm-start__copy .hm-lead{max-width:44ch}
/* desktop: text and banner share the row evenly; the banner is centred on the text as it stands
   (closed sign-up) and stays put when the sign-up opens — js/topa-home.js sets --start-off once */
@media (min-width:980px){
  .hm-start__in{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,88px);align-items:start}
  .hm-start__media{order:2;margin-top:var(--start-off,0px)}
  .hm-start__copy{padding-block:8px;margin-top:var(--start-off,0px)}
}
/* the START TOP A banner: a blue cloth with soft folds drifting and a light passing behind the mark */
.hm-flag{isolation:isolate;background:#06142B;display:grid;place-items:center}
.hm-flag__cloth{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 42%,#1A4E93 0%,#0F3168 45%,#081B3B 78%,#050F22 100%)}
.hm-flag__cloth i{position:absolute;top:-20%;bottom:-20%;left:-50%;width:200%;will-change:transform}
/* folds: two gentle bands of light and shade, at slightly different angles, drifting apart */
.hm-flag__cloth i:nth-child(1){background:repeating-linear-gradient(101deg,rgba(255,255,255,0) 0,rgba(160,205,255,.08) 7%,rgba(0,8,24,.22) 15%,rgba(255,255,255,0) 22%);animation:hm-fold-a 16s ease-in-out infinite alternate}
.hm-flag__cloth i:nth-child(2){background:repeating-linear-gradient(80deg,rgba(255,255,255,0) 0,rgba(120,180,250,.06) 10%,rgba(0,6,20,.18) 19%,rgba(255,255,255,0) 30%);mix-blend-mode:soft-light;animation:hm-fold-b 22s ease-in-out infinite alternate}
/* the drape: light from the top corner, shade toward the far edge, so the surface reads as hanging cloth */
.hm-flag__cloth::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,rgba(170,210,255,.14) 0%,rgba(170,210,255,0) 38%,rgba(0,6,20,0) 62%,rgba(0,6,20,.38) 100%)}
/* the weave and the hem: a whisper of texture so the surface reads as cloth, not a gradient */
.hm-flag__cloth::after{content:"";position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.hm-flag__hem{position:absolute;z-index:1;left:0;right:0;top:0;height:10px;background:linear-gradient(180deg,rgba(143,195,242,.28),rgba(143,195,242,0));border-bottom:1px dashed rgba(143,195,242,.18)}
/* the light: a soft glow behind the mark that breathes, and one considered sheen across the cloth */
.hm-flag__light{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background:radial-gradient(38% 30% at 50% 46%,rgba(143,195,242,.30),transparent 72%)}
.hm-flag__light::after{content:"";position:absolute;top:-30%;bottom:-30%;width:28%;left:-40%;transform:skewX(-14deg);background:linear-gradient(90deg,transparent,rgba(200,226,255,.16),transparent);animation:hm-sheen 9s var(--hm-e) 1.2s infinite}
.hm-player.hm-flag .hm-flag__mark{position:relative;z-index:2;width:min(54%,330px);height:auto;object-fit:contain;mix-blend-mode:screen;
  /* the cut keeps the cover's dark ground around the letters: fade it out so only the mark sits on the cloth */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent);mask-composite:intersect}
/* phones: the mark sits a little higher, clear of the «سبع حلقات مجاناً» badge */
@media (max-width:639px){.hm-flag{padding-bottom:44px}.hm-player.hm-flag .hm-flag__mark{width:52%}}
.hm-flag .hm-play{z-index:3}
.hm-flag:not(.is-live) .hm-flag__cloth i,.hm-flag:not(.is-live) .hm-flag__light::after{animation-play-state:paused}
@keyframes hm-fold-a{from{transform:translate3d(-4%,0,0) skewY(.6deg)}to{transform:translate3d(4%,0,0) skewY(-.6deg)}}
@keyframes hm-fold-b{from{transform:translate3d(5%,0,0)}to{transform:translate3d(-5%,0,0)}}
@keyframes hm-sheen{0%{left:-40%}38%,100%{left:120%}}
.hm-player{position:relative;aspect-ratio:16/9;border:1px solid var(--hm-blue-line);border-radius:var(--hm-r-xl);overflow:hidden;background:#0A0D12;box-shadow:0 40px 90px -40px rgba(143,195,242,.35)}
.hm-player img{width:100%;height:100%;object-fit:cover}
.hm-player .start-cover-trigger{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.hm-player .start-cover-trigger:focus-visible{outline:2px solid var(--hm-blue);outline-offset:-4px}
.hm-play{position:absolute;z-index:1;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border-radius:999px;background:rgba(8,11,15,.72);border:1px solid var(--hm-blue-line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--hm-ink);font-size:14px;font-weight:700;transition:background var(--t-t2),border-color var(--t-t2)}
.hm-play svg{width:15px;height:15px;color:var(--hm-blue)}
.hm-player:hover .hm-play{background:rgba(8,11,15,.9);border-color:var(--hm-blue)}
.hm-player .after{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;background:rgba(8,11,15,.9);opacity:0;pointer-events:none;transition:opacity var(--t-t3) var(--hm-e)}
.hm-player.ended .after{opacity:1;pointer-events:auto}
.hm-player.ended .start-cover-trigger,.hm-player.ended .hm-play{display:none}
.hm-player .after p{font-size:14px;color:var(--hm-mute)}
.hm-eprail{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.hm-eprail li{display:grid;gap:4px;padding-top:10px;border-top:2px solid var(--hm-line-2);font-size:12px;color:var(--hm-mute)}
.hm-eprail li b{font-weight:700}
.hm-eprail li span{display:none}
.hm-eprail li.on{border-top-color:var(--hm-blue);color:var(--hm-ink)}
@media (min-width:640px){.hm-eprail{grid-template-columns:repeat(8,1fr)}.hm-eprail li.on{grid-column:span 2}.hm-eprail li span{display:block;white-space:nowrap}}

/* the inline START sign-up (shared partial; styled here for this page only) */
#start-register{margin-top:26px;scroll-margin-top:110px}
#start-register summary{list-style:none;cursor:pointer;width:fit-content}
#start-register summary::-webkit-details-marker{display:none}
#start-register[open]>summary{display:none}
#start-register .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1px solid var(--hm-blue);border-radius:var(--hm-r);font-size:16px;font-weight:700;color:#06101F;background:var(--hm-blue);transition:background var(--t-t1),border-color var(--t-t1)}
#start-register .btn:hover,#start-register .btn:focus-visible{background:#B3D8F7;border-color:#B3D8F7}
#start-register .btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--hm-bg),0 0 0 4px var(--hm-blue)}
#start-register .start-inline-panel{padding:20px;border:1px solid var(--hm-line);border-radius:var(--hm-r-l);background:var(--hm-s1);max-width:460px}
/* the optional updates & offers box: a size smaller than the form, still readable and a full-size target */
#start-register .mp{margin:10px 0 2px;font-size:var(--t-fs-label);line-height:1.6;color:var(--hm-mute)}
#start-register .mp__row{min-height:44px;gap:10px;align-items:center}
#start-register .mp__row input{width:19px;height:19px;margin-top:0;accent-color:var(--hm-blue)}
#start-register .mp__link{font-size:inherit}
#start-register label{display:block;font-size:14px;color:var(--hm-mute);margin-bottom:8px}
#start-register input[type=email]{display:block;width:100%;min-width:0;min-height:50px;border:1px solid var(--hm-line-2);border-radius:var(--hm-r);background:#080a0a;color:var(--hm-ink);font-size:16px;padding:0 14px;direction:ltr;text-align:right}
#start-register input[type=email]:focus{outline:2px solid var(--hm-blue);outline-offset:2px}
#start-register button[type=submit]{margin-top:12px}
#start-register [role=status]{margin-top:12px;font-size:14px;line-height:1.7}
#start-register .start-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.start-inline-result{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--hm-ink)}
@media (prefers-reduced-motion:no-preference){#start-register[open] .start-inline-panel{animation:hm-up .4s var(--hm-e) both}}

/* =========================== TOP A System: steps + sticky stage =========================== */
.hm-sys{background:linear-gradient(180deg,var(--hm-bg),#08100B 40%,var(--hm-bg))}
.hm-sys__head{max-width:760px}
.hm-sys__grid{position:relative;display:grid;gap:28px;margin-top:44px}
.hm-sys__stage{position:sticky;top:calc(var(--hm-hdr) + 10px);z-index:2;order:-1}
.hm-sys__steps{position:relative;--p:0}
.hm-rail{position:absolute;inset-inline-start:15px;top:18px;bottom:18px;width:2px;background:var(--hm-line-2)}
.hm-rail__fill{position:absolute;inset:0;background:var(--hm-green);transform-origin:top;transform:scaleY(var(--p))}
.hm-steps{position:relative;display:grid}
.hm-step{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start;align-content:start;padding-block:18px;min-height:56vh;opacity:.42;transition:opacity var(--t-t3) var(--hm-e)}
.hm-step.is-on,.hm-step.is-done{opacity:1}
.hm-step__n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;border:1px solid var(--hm-line-3);background:var(--hm-bg);color:var(--hm-mute);transition:background var(--t-t3),color var(--t-t3),border-color var(--t-t3)}
.hm-step.is-on .hm-step__n,.hm-step.is-done .hm-step__n{background:var(--hm-green);border-color:var(--hm-green);color:var(--hm-green-ink)}
.hm-step b{display:block;font-size:var(--t-fs-h2);font-weight:700;line-height:1.3}
/* the step's title and its words stay in place while its phrases gather under it */
.hm-step>div{position:sticky;top:var(--hm-title-top,calc(var(--hm-hdr) + 10px))}
.hm-step.is-on>div>b{color:var(--hm-green)}
.hm-step p b{display:inline;font-size:inherit;line-height:inherit;color:var(--hm-ink)}
.hm-step p{margin-top:6px;font-size:var(--t-fs-lead);line-height:1.75;color:var(--hm-ink-2);max-width:32ch}
/* short phrases that gather one by one beside the step's title as it is read;
   all of them are shown at once without script, and with reduced motion */
.hm-acc{display:grid;gap:8px;margin-top:14px;justify-items:start}
.hm-acc li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--hm-line-2);border-radius:999px;font-size:14px;font-weight:500;color:var(--hm-ink-2);background:rgba(7,9,8,.6)}
.hm-acc li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--hm-green)}
.hm-step .hm-acc b{display:inline;font-size:14px;line-height:1.5;color:var(--hm-ink)}
.hm-acc .hm-acc__key{border-color:var(--hm-green-line);background:var(--hm-green-soft);color:var(--hm-ink);font-weight:700}
.hm-js-acc .hm-acc li{opacity:0;transform:translateY(8px);transition:opacity .45s var(--hm-e),transform .45s var(--hm-e)}
.hm-js-acc .hm-acc li.in{opacity:1;transform:none}
@media (min-width:980px){.hm-acc li{font-size:15px}.hm-step .hm-acc b{font-size:15px}}
.hm-sys__acts{margin-top:40px}
.hm-key{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border:1px solid var(--hm-green-line);border-radius:999px;background:var(--hm-green-soft);font-size:15px;font-weight:700;color:var(--hm-ink)}
.hm-key::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hm-green);box-shadow:0 0 8px rgba(61,220,111,.9)}
/* «اكتشف TOP A System»: a lit button with a light running round its edge */
.hm-btn--glow{position:relative;isolation:isolate;overflow:hidden;min-height:58px;padding:0 30px;font-size:17px;box-shadow:0 14px 40px -14px rgba(61,220,111,.65)}
.hm-btn--glow::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0}
@media (prefers-reduced-motion:no-preference){
  .hm-btn--glow::before{animation:hm-btnsheen 5s cubic-bezier(.4,0,.2,1) 1s infinite}
  .hm-btn--glow:hover{transform:translateY(-2px);box-shadow:0 20px 50px -14px rgba(61,220,111,.8)}
  .hm-sys__acts.is-pre .hm-btn--glow{transform:translateY(10px) scale(.97)}
}
@keyframes hm-btnsheen{0%{background-position:120% 0}30%,100%{background-position:-30% 0}}
@media (min-width:980px){
  .hm-sys__grid{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .hm-sys__stage{order:0;top:calc(var(--hm-hdr) + 48px)}
  .hm-step{min-height:70vh;padding-block:24px}
  .hm-step:first-child{padding-top:8vh}
  .hm-step b{font-size:var(--t-fs-h2)}
  .hm-step p{font-size:var(--t-fs-lead)}
}
@media (max-width:979px){
  .hm-step{min-height:58vh}
  .hm-sys__steps{padding-top:8px}
}

/* the stage frame and its four scenes */
.hm-frame{position:relative;border:1px solid var(--hm-line-2);border-radius:var(--hm-r-xl);background:linear-gradient(180deg,var(--hm-s2),#0B0E0D);box-shadow:var(--t-sh-3);overflow:hidden}
.hm-frame__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--hm-line);font-size:12.5px;color:var(--hm-mute)}
.hm-frame__bar i{width:8px;height:8px;border-radius:50%;background:var(--hm-s3);border:1px solid var(--hm-line-2)}
.hm-frame__bar span{margin-inline-start:8px;color:var(--hm-ink-2);font-weight:500}
.hm-frame__bar em{margin-inline-start:auto;font-style:normal}
.hm-frame__body{position:relative;height:290px}
@media (min-width:640px){.hm-frame__body{height:380px}}
@media (min-width:980px){.hm-frame__body{height:460px}}
.hm-sc{position:absolute;inset:0;display:grid;place-items:center;padding:20px;opacity:0;transform:scale(.97);transition:opacity .5s var(--hm-e),transform .6s var(--hm-e);pointer-events:none}
.hm-sc.is-on{opacity:1;transform:none}
.hm-sc__cap{position:absolute;inset-inline:20px;bottom:16px;display:flex;justify-content:space-between;gap:10px;font-size:var(--t-fs-label);color:var(--hm-mute)}
.hm-sc__cap b{color:var(--hm-ink);font-weight:700}

/* 1 · learn: the schools come together */
.hm-schools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:440px;padding-bottom:40px}
.hm-schools em{font-style:normal;padding:10px 18px;border:1px solid var(--hm-green-line);border-radius:999px;background:var(--hm-green-soft);font-size:16px;font-weight:500;color:var(--hm-ink);transition:transform .8s var(--hm-e),opacity .6s var(--hm-e),background .6s,border-color .6s}
.hm-sc--learn{background:radial-gradient(closest-side,rgba(61,220,111,.10),transparent 70%)}
.hm-sc--learn:not(.is-done) .hm-schools em{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:.55;background:var(--hm-s1);border-color:var(--hm-line-2)}
.hm-schools em:nth-child(2){transition-delay:.05s}.hm-schools em:nth-child(3){transition-delay:.1s}.hm-schools em:nth-child(4){transition-delay:.15s}
.hm-schools em:nth-child(5){transition-delay:.2s}.hm-schools em:nth-child(6){transition-delay:.25s}.hm-schools em:nth-child(7){transition-delay:.3s}

/* 2 · apply: a live session and a plan drawn on the chart */
.hm-sc--apply,.hm-sc--build{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:18px;align-items:center;padding:22px 24px}
.hm-coach{width:100%;padding:14px;border:1px solid var(--hm-line-2);border-radius:14px;background:var(--hm-bg)}
.hm-coach__h{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--hm-line)}
.hm-coach__h i{width:24px;height:24px;flex:none;border-radius:50%;border:1px solid var(--hm-green-line);background:var(--hm-green-soft) radial-gradient(circle at 50% 38%,var(--hm-green) 0 3.5px,transparent 4px)}
.hm-coach__h b{font-size:14px}
.hm-coach li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--hm-ink-2)}
.hm-coach__n{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--hm-green-soft);border:1px solid var(--hm-green-line);font-size:var(--t-fs-micro);font-weight:700;color:var(--hm-ink)}
.hm-coach__n b{color:var(--hm-green)}
.hm-coach li i{width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid var(--hm-green);position:relative}
.hm-coach li i::after{content:"";position:absolute;left:3px;top:2px;width:5px;height:3px;border-left:1.5px solid var(--hm-green);border-bottom:1.5px solid var(--hm-green);transform:rotate(-45deg)}
.hm-live{position:relative;width:100%;max-width:230px;aspect-ratio:3/4;justify-self:center;border-radius:14px;overflow:hidden;border:1px solid var(--hm-line-2);background:#000}
.hm-live img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hm-live__tag{position:absolute;top:10px;inset-inline-start:10px;display:inline-flex;white-space:nowrap;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(7,9,8,.78);font-size:var(--t-fs-micro);font-weight:700;color:var(--hm-ink)}
.hm-live__tag i{width:7px;height:7px;border-radius:50%;background:var(--hm-red);animation:hm-blink 1.6s ease-in-out infinite}
.hm-live__name{position:absolute;bottom:10px;inset-inline-start:10px;padding:4px 10px;border-radius:999px;background:var(--hm-green);color:var(--hm-green-ink);font-size:var(--t-fs-micro);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.hm-plan{width:100%;height:auto;direction:ltr}
.hm-plan .g{stroke:rgba(241,237,227,.06)}
.hm-plan .px{fill:none;stroke:#E9ECE8;stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hm-plan .tp,.hm-plan .en,.hm-plan .sl{stroke-width:1.6;stroke-dasharray:5 5}
.hm-plan .tp{stroke:var(--hm-green)}.hm-plan .en{stroke:var(--hm-ink-2)}.hm-plan .sl{stroke:var(--hm-red)}
.hm-plan text{font-family:var(--hm-font);font-size:11px;fill:var(--hm-mute)}
@media (max-width:519px){.hm-coach__n{font-size:var(--t-fs-micro);padding:3px 8px;margin-top:6px}.hm-live__name{bottom:6px;inset-inline-start:6px;padding:2px 7px;font-size:var(--t-fs-micro)}.hm-sc--apply{grid-template-columns:1fr 1fr}.hm-live__tag{top:6px;inset-inline-start:6px;font-size:var(--t-fs-micro);padding:3px 7px}.hm-sc--build{grid-template-columns:.62fr 1.38fr}.hm-sc--apply,.hm-sc--build{gap:10px;padding:14px}.hm-coach{padding:10px}.hm-coach li{font-size:var(--t-fs-micro);padding:4px 0;gap:6px}.hm-coach__h b{font-size:12.5px}}
@keyframes hm-blink{50%{opacity:.35}}

/* 3 · test: three exams confirmed in turn */
.hm-exams{display:grid;gap:12px;width:min(100%,380px);padding-bottom:34px}
.hm-exams li{display:grid;grid-template-columns:auto 1fr 26px;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--hm-line-2);border-radius:12px;background:var(--hm-bg);font-size:14.5px;font-weight:500}
.hm-exams li>i{height:6px;border-radius:3px;background:var(--hm-s3);overflow:hidden}
.hm-exams li>i>i{display:block;height:100%;background:var(--hm-green);transform-origin:right}
.hm-exams li>b{width:26px;height:26px;border-radius:50%;border:1px solid var(--hm-green-line);display:grid;place-items:center;background:var(--hm-green-soft)}
.hm-exams li>b::before{content:"";width:10px;height:5px;margin-top:-2px;border-left:2px solid var(--hm-green);border-bottom:2px solid var(--hm-green);transform:rotate(-45deg)}

/* 4 · build: the written system */
.hm-doc{--rot:-1.5deg;position:relative;width:min(100%,380px);padding:18px;border-radius:14px;background:#F1EDE3;color:#0B0D0C;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform:rotate(var(--rot))}
@keyframes hm-docin{from{opacity:0;transform:translateY(12px) rotate(var(--rot))}to{opacity:1;transform:rotate(var(--rot))}}
.hm-doc__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgba(11,13,12,.15)}
.hm-doc__h b{font-size:18px;font-weight:700}
.hm-doc__h span{font-size:var(--t-fs-micro);color:#4F554F}
.hm-doc ul,.hm-doc ol{display:grid;gap:2px}
.hm-doc ol li{gap:12px;font-size:17px;font-weight:700;padding:11px 0}
.hm-doc ol em{font-style:normal;font-size:var(--t-fs-micro);font-weight:700;color:#155C3A;padding:2px 6px;border:1.5px solid #155C3A;border-radius:6px}
.hm-doc li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14.5px;font-weight:500;line-height:1.45;border-bottom:1px dashed rgba(11,13,12,.15)}
.hm-doc li i{width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid #155C3A;background:rgba(61,220,111,.3)}
.hm-doc__seal{position:absolute;bottom:-14px;inset-inline-start:18px;padding:5px 12px;border-radius:999px;background:var(--hm-green);color:var(--hm-green-ink);font-size:var(--t-fs-micro);font-weight:700;transform:rotate(-4deg)}
@media (max-width:519px){.hm-sc{padding:12px 14px}.hm-schools em{font-size:12.5px;padding:6px 11px}.hm-schools{gap:7px;padding-bottom:34px}.hm-frame__bar{padding:10px 14px}.hm-exams{gap:8px}.hm-exams li{padding:9px 12px;font-size:13.5px}.hm-doc{--rot:-1deg;padding:10px 11px;width:100%}.hm-doc__h{padding-bottom:6px;margin-bottom:2px}.hm-doc__h b{font-size:13px}.hm-doc__h span{font-size:var(--t-fs-micro)}.hm-doc li{padding:3px 0;font-size:var(--t-fs-micro);gap:6px}.hm-doc li i{width:11px;height:11px}.hm-doc ol li{font-size:13px;padding:7px 0;gap:8px}.hm-doc ol em{font-size:var(--t-fs-micro);padding:1px 4px}.hm-doc__seal{bottom:auto;top:-11px;font-size:var(--t-fs-micro);padding:4px 10px}.hm-sc__cap{bottom:10px;font-size:var(--t-fs-micro)}}

/* each scene acts once it becomes the active one */
@media (prefers-reduced-motion:no-preference){
  .hm-sc--apply.is-on .hm-plan .px{stroke-dashoffset:1;animation:hm-draw 1.4s var(--hm-e) .2s forwards}
  .hm-sc--apply.is-on .hm-plan .tp,.hm-sc--apply.is-on .hm-plan .en,.hm-sc--apply.is-on .hm-plan .sl,.hm-sc--apply.is-on .hm-plan text{opacity:0;animation:hm-show .4s linear forwards}
  .hm-sc--apply.is-on .hm-plan .en,.hm-sc--apply.is-on .hm-plan text:nth-of-type(2){animation-delay:.9s}
  .hm-sc--apply.is-on .hm-plan .sl,.hm-sc--apply.is-on .hm-plan text:nth-of-type(3){animation-delay:1.2s}
  .hm-sc--apply.is-on .hm-plan .tp,.hm-sc--apply.is-on .hm-plan text:nth-of-type(1){animation-delay:1.5s}
  .hm-sc--test.is-on .hm-exams li>i>i{transform:scaleX(0);animation:hm-fill .7s var(--hm-e) forwards}
  .hm-sc--test.is-on .hm-exams li>b{opacity:0;animation:hm-pop .35s var(--hm-e) forwards}
  .hm-sc--test.is-on .hm-exams li:nth-child(1)>i>i{animation-delay:.2s}.hm-sc--test.is-on .hm-exams li:nth-child(1)>b{animation-delay:.9s}
  .hm-sc--test.is-on .hm-exams li:nth-child(2)>i>i{animation-delay:1s}.hm-sc--test.is-on .hm-exams li:nth-child(2)>b{animation-delay:1.7s}
  .hm-sc--test.is-on .hm-exams li:nth-child(3)>i>i{animation-delay:1.8s}.hm-sc--test.is-on .hm-exams li:nth-child(3)>b{animation-delay:2.5s}
  .hm-sc--build.is-on .hm-doc li{opacity:0;animation:hm-up .45s var(--hm-e) forwards}
  .hm-sc--build.is-on .hm-doc li:nth-child(1){animation-delay:.55s}.hm-sc--build.is-on .hm-doc li:nth-child(2){animation-delay:.75s}
  .hm-sc--build.is-on .hm-doc li:nth-child(3){animation-delay:.85s}.hm-sc--build.is-on .hm-doc li:nth-child(4){animation-delay:1.15s}
  .hm-sc--build.is-on .hm-doc li:nth-child(5){animation-delay:1.45s}
  .hm-sc--build.is-on .hm-live{animation:hm-node .6s var(--hm-e) both}
  .hm-sc--build.is-on .hm-doc{animation:hm-docin .6s var(--hm-e) .35s both}
  .hm-sc--build.is-on .hm-doc__seal{opacity:0;animation:hm-pop .4s var(--hm-e) 1.9s forwards}
  .hm-sc--apply.is-on .hm-coach li{opacity:0;animation:hm-up .45s var(--hm-e) forwards}
  .hm-sc--apply.is-on .hm-coach li:nth-child(1){animation-delay:.3s}.hm-sc--apply.is-on .hm-coach li:nth-child(2){animation-delay:.6s}.hm-sc--apply.is-on .hm-coach li:nth-child(3){animation-delay:.9s}
}

/* =========================== around your learning: stacked panels =========================== */
.hm-around__head{max-width:720px}
.hm-stack{display:grid;gap:20px;margin-top:40px}
.hm-panel{display:grid;gap:26px;padding:24px;border:1px solid var(--hm-line-2);border-radius:var(--hm-r-xl);background:linear-gradient(170deg,var(--hm-s2),var(--hm-s1) 60%);scroll-margin-top:calc(var(--hm-hdr) + 16px);transition:filter .4s}
.hm-panel__k{display:inline-block;margin-bottom:10px;font-size:var(--t-fs-label);font-weight:700;color:var(--hm-green)}
.hm-panel__p{margin-top:14px;font-size:var(--t-fs-body);line-height:1.8;color:var(--hm-mute);max-width:52ch}
/* «التدريب والتحليل»: the two tools, each with its state */
.hm-tools{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;max-width:52ch}
.hm-tools li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n s" "t t";align-items:center;gap:4px 12px;padding:12px 14px;border:1px solid var(--hm-line);border-radius:var(--hm-r);background:rgba(255,255,255,.015)}
.hm-tools b{grid-area:n;font-size:var(--t-fs-body);font-weight:700;color:var(--hm-ink)}
.hm-tools span{grid-area:t;font-size:var(--t-fs-small);line-height:1.7;color:var(--hm-mute)}
.hm-tools em{grid-area:s;justify-self:end;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:var(--t-fs-label);color:var(--hm-ink-2);white-space:nowrap}
.hm-tools em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-warn)}
.hm-tools em.is-open::before{background:var(--hm-green)}
.hm-panel .hm-acts{margin-top:20px}
.hm-panel__note{margin-top:10px;font-size:var(--t-fs-small);line-height:1.7;color:var(--hm-ink-2)}
.hm-agent{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;padding:10px 14px;border:1px solid var(--hm-line-2);border-radius:14px;background:var(--hm-s1);font-size:14.5px;color:var(--hm-ink-2);width:fit-content;max-width:100%}
.hm-agent b{color:var(--hm-ink)}
.hm-agent__ic{position:relative;width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--hm-blue-line);background:var(--hm-blue-soft);display:flex;align-items:center;justify-content:center;gap:2px}
.hm-agent__ic i{width:3px;height:3px;border-radius:50%;background:var(--hm-blue)}
.hm-lights{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hm-lights li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--hm-line-2);border-radius:999px;font-size:14px;font-weight:500;color:var(--hm-mute);transition:color .4s,border-color .4s,background .4s}
.hm-lights li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hm-mute-2);transition:background .4s,box-shadow .4s}
.hm-lights li.on{color:var(--hm-ink);border-color:var(--hm-green-line);background:var(--hm-green-soft)}
.hm-lights li.on::before{background:var(--hm-green);box-shadow:0 0 8px rgba(61,220,111,.8)}
@media (min-width:980px){.hm-panel{grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:40px}}
/* stacking only where a whole panel fits on screen */
@media (min-width:980px) and (min-height:780px){
  .hm-stack{gap:0}
  .hm-panel{position:sticky;top:calc(var(--hm-hdr) + 24px + var(--i) * 14px);min-height:min(600px,calc(100svh - var(--hm-hdr) - 90px));margin-bottom:14vh;box-shadow:0 -24px 60px -30px rgba(0,0,0,.9)}
  .hm-panel:last-child{margin-bottom:0}
  .hm-panel.is-under{filter:brightness(.6)}
}

/* TOP A Premium: a membership card, lit and quiet (illustrative, no names or numbers) */
.hm-panel--premium{background:radial-gradient(70% 90% at 15% 30%,rgba(214,180,106,.08),transparent 60%),linear-gradient(170deg,var(--hm-s2),var(--hm-s1) 60%)}
.hm-panel--premium .hm-panel__k{color:var(--t-gold);letter-spacing:.04em}
.hm-pcard{position:relative;isolation:isolate;aspect-ratio:1.586;width:min(100%,440px);margin-inline:auto;padding:22px 24px;border-radius:20px;overflow:hidden;direction:ltr;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(214,180,106,.38);
  background:radial-gradient(120% 120% at 100% 0%,rgba(214,180,106,.16),transparent 55%),linear-gradient(150deg,#141814,#070908 60%,#0d110e);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(900px) rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg));transition:transform .5s var(--hm-e)}
.hm-pcard__glow{position:absolute;z-index:-1;inset:auto -20% -60% -20%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(61,220,111,.16),transparent);filter:blur(10px)}
.hm-pcard__top{display:flex;align-items:center;justify-content:space-between}
.hm-pcard__top img{width:96px;height:auto;opacity:.95}
.hm-pcard__top span{font-size:var(--t-fs-micro);letter-spacing:.32em;color:rgba(214,180,106,.85)}
.hm-pcard__name{font-size:clamp(26px,6vw,34px);font-weight:700;letter-spacing:.01em;color:#F1EDE3;line-height:1.1}
.hm-pcard__name em{font-style:normal;background:linear-gradient(100deg,#E9D29A,#B8914A 60%,#F2E2B5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-pcard__row{display:flex;align-items:center;gap:10px;direction:rtl;font-size:13px;color:var(--hm-ink-2)}
.hm-pcard__row i{width:4px;height:4px;border-radius:50%;background:rgba(214,180,106,.7)}
.hm-pcard__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;direction:rtl}
.hm-pcard__tile{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(214,180,106,.28);border-radius:14px;background:rgba(7,9,8,.55);transition:opacity .6s var(--hm-e),transform .6s var(--hm-e)}
.hm-pcard__tile b{font-size:clamp(16px,4.4vw,20px);font-weight:700;color:#F7F4EC}
.hm-pcard__tile svg{width:38px;height:27px;flex:none;direction:ltr}
.hm-pcard__tile .w{stroke:rgba(241,237,227,.6);stroke-width:1.4}
.hm-pcard__tile .up{fill:var(--hm-green)}.hm-pcard__tile .dn{fill:#E9ECE8}
.hm-pcard__t1{display:inline-flex;align-items:flex-end;font-size:28px;font-weight:700;line-height:.8;letter-spacing:-.04em;color:#F7F4EC}
.hm-pcard__t1 em{font-style:normal;color:var(--hm-green)}
.hm-pcard__tile--t1 b{display:none}
.hm-pcard__tile--t1{justify-content:center}
.hm-panel.is-wait .hm-pcard__tile{opacity:0;transform:translateY(8px)}
.hm-panel.is-wait .hm-pcard__tile.lit{opacity:1;transform:none}
.hm-pcard__sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%);background-size:260% 100%;background-position:130% 0}
@media (prefers-reduced-motion:no-preference){
  .hm-panel.is-wait .hm-pcard{opacity:0;transform:perspective(900px) rotateX(14deg) translateY(18px)}
  .hm-panel.is-wait .hm-pcard.lit{opacity:1;transform:perspective(900px) rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg));transition:opacity .8s var(--hm-e),transform 1s var(--hm-e)}
  .hm-pcard.lit .hm-pcard__sheen{animation:hm-psheen 6s cubic-bezier(.4,0,.2,1) .6s infinite}
  .hm-panel.is-wait .hm-pcard__row{opacity:0;transition:opacity .6s var(--hm-e)}
  .hm-panel.is-wait .hm-pcard__row.lit{opacity:1}
}
@keyframes hm-psheen{0%{background-position:130% 0}25%,100%{background-position:-30% 0}}
.hm-legal{margin-top:14px;font-size:var(--t-fs-label);line-height:1.8;color:var(--hm-mute)}

/* chart scene: close to chart.topatraders.com, never a live price */
.hm-ch{position:relative;border:1px solid var(--hm-line-2);border-radius:16px;background:#050606;overflow:hidden}
/* each capability, pointed at on the interface itself */
.hm-note{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(7,9,8,.88);border:1px solid var(--hm-green-line);font-size:12px;font-weight:700;color:var(--hm-ink);white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.9);transition:opacity .5s var(--hm-e),transform .5s var(--hm-e)}
.hm-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hm-green);box-shadow:0 0 8px rgba(61,220,111,.9)}
.hm-note--tf{top:42px;left:96px}
.hm-note--draw{top:44%;left:42px;border-color:var(--hm-blue-line)}.hm-note--draw::before{background:var(--hm-blue);box-shadow:0 0 8px rgba(143,195,242,.9)}
.hm-note--ma{bottom:14px;right:14px;border-color:rgba(214,180,106,.5)}.hm-note--ma::before{background:var(--t-gold);box-shadow:0 0 8px rgba(214,180,106,.9)}
.hm-panel.is-wait .hm-note{opacity:0;transform:translateY(6px)}
.hm-panel.is-wait .hm-note.lit{opacity:1;transform:none}
.hm-ch__top{display:flex;align-items:center;gap:6px;padding:9px 10px;border-bottom:1px solid var(--hm-line);direction:ltr}
.hm-ch__sym{font-size:12px;font-weight:700;color:var(--hm-ink);margin-inline-end:6px}
.hm-ch__tf{font-size:var(--t-fs-micro);color:var(--hm-mute);padding:3px 6px;border-radius:5px;transition:color .4s,background .4s}
.hm-ch__tf.on{color:var(--hm-green);background:var(--hm-green-soft)}
.hm-ch__tf.lit{color:var(--hm-ink)}
.hm-ch__tf.on.lit{box-shadow:0 0 0 1px var(--hm-green-line),0 0 16px -2px rgba(61,220,111,.6)}
.hm-ch .draw{stroke-width:1.8}
.hm-ch__body{display:grid;grid-template-columns:30px 1fr;direction:ltr}
.hm-ch__tools{display:grid;align-content:start;gap:10px;padding:10px 0;justify-items:center;border-right:1px solid var(--hm-line)}
.hm-ch__tools i{width:12px;height:12px;border:1.5px solid var(--hm-mute);border-radius:3px;opacity:.7;transition:border-color .4s}
.hm-ch__tools i:nth-child(2){border-radius:50%}
.hm-ch__tools i:nth-child(3){border-width:0 0 1.5px 0;transform:rotate(-35deg);border-radius:0}
.hm-ch__tools.lit i{border-color:var(--hm-blue);opacity:1}
.hm-ch svg{width:100%;height:auto}
.hm-ch .c-up{fill:var(--hm-green);stroke:var(--hm-green)}
.hm-ch .c-dn{fill:#E9ECE8;stroke:#E9ECE8}
.hm-ch .wick{stroke-width:1}
.hm-ch .grid line{stroke:rgba(241,237,227,.05)}
.hm-ch .draw{fill:none;stroke:var(--hm-blue);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.hm-ch .ma{fill:none;stroke:var(--t-gold);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;opacity:.9}
.hm-panel.is-wait .hm-ch .draw,.hm-panel.is-wait .hm-ch .ma{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--hm-e)}
.hm-panel.is-wait .hm-ch .draw.lit,.hm-panel.is-wait .hm-ch .ma.lit{stroke-dashoffset:0}

/* Pips scene: the approved packages (config/pips.php), purchased and gift apart */
.hm-wal{border:1px solid var(--hm-line-2);border-radius:16px;background:var(--hm-bg);padding:18px}
.hm-wal__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--hm-line)}
.hm-wal__top b{font-size:15px}
.hm-wal__top span{font-size:12.5px;color:var(--hm-green)}
.hm-wal__pk{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hm-line);font-size:13.5px;color:var(--hm-ink-2)}
.hm-wal__pk>b{font-size:14px;color:var(--hm-ink)}
.hm-wal__pk>i{display:flex;height:8px;border-radius:4px;background:var(--hm-s3);overflow:hidden;direction:rtl}
.hm-wal__pk>i i{height:100%;transform-origin:right;transition:transform 1s var(--hm-e)}
.hm-wal__pk .buy{width:calc(var(--b)*100%);background:var(--hm-green)}
.hm-wal__pk .gift{width:calc(var(--g)*100%);background:var(--t-gold)}
.hm-wal__pk span b{color:var(--hm-ink)}
.hm-wal__pk>i{position:relative}
.hm-wal__pk>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(120%);pointer-events:none}
.hm-wal__pk:nth-of-type(3) b{color:var(--hm-green)}
@media (prefers-reduced-motion:no-preference){
  .hm-wal__pk.lit>i::after{animation:hm-pshine 4.5s ease-in-out 1.4s infinite}
  .hm-wal__pk.lit:nth-of-type(3)>i::after{animation-delay:1.9s}.hm-wal__pk.lit:nth-of-type(4)>i::after{animation-delay:2.4s}
  .hm-wal__pk.lit>span b{display:inline-block;animation:hm-pop .5s var(--hm-e) .9s backwards}
}
@keyframes hm-pshine{0%{transform:translateX(120%)}35%,100%{transform:translateX(-120%)}}
.hm-wal__key{display:flex;gap:16px;margin-top:12px;font-size:12.5px;color:var(--hm-mute)}
.hm-wal__key span{display:inline-flex;align-items:center;gap:6px}
.hm-wal__key i{width:10px;height:6px;border-radius:3px}
.hm-wal__key .buy{background:var(--hm-green)}.hm-wal__key .gift{background:var(--t-gold)}
.hm-panel.is-wait .hm-wal__pk>i i{transform:scaleX(0)}
.hm-panel.is-wait .hm-wal__pk.lit>i i{transform:none}
.hm-panel.is-wait .hm-wal__pk.lit>i .gift{transition-delay:.5s}

/* T1 Protect: its own type mark (as on /vip-channal#t1) */
.hm-t1mark{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;direction:ltr}
.hm-t1mark__w{display:flex;align-items:flex-end;font-weight:700;font-size:64px;line-height:.8;letter-spacing:-.04em;color:var(--hm-ink)}
.hm-t1mark__w .g{color:var(--hm-green)}
.hm-t1mark>i{display:block;width:100%;height:1px;background:var(--hm-green)}
.hm-t1mark__p{font-size:10.5px;letter-spacing:.42em;padding-left:.42em;color:var(--hm-ink-2)}
@media (min-width:980px){.hm-t1mark__w{font-size:84px}}
/* T1 scene: the stop-loss moves up to the entry, then «تم التأمين» */
.hm-t1{position:relative;border:1px solid var(--hm-line-2);border-radius:16px;background:#050606;padding:16px}
.hm-t1 svg{width:100%;height:auto;direction:ltr;overflow:visible}
.hm-t1 .px{fill:none;stroke:#E9ECE8;stroke-width:1.6;stroke-linejoin:round}
.hm-t1 .entry{stroke:var(--hm-ink-2);stroke-dasharray:4 4}
.hm-t1 .tp{stroke:var(--hm-green);stroke-dasharray:4 4;opacity:.8}
.hm-t1 text{font-family:var(--hm-font);font-size:11px;fill:var(--hm-mute)}
/* The SVG scenes shrink on phones (×0.55–0.7); their chart labels grow so they read at about 10–12px there. */
@media (max-width:519px){.hm-plan text{font-size:18px}.hm-t1 text{font-size:17px}}
.hm-t1 .sl{stroke:var(--hm-red);stroke-width:1.8}
.hm-t1 .sl-lab{fill:var(--hm-red)}
.hm-t1 .slg{transform:translateY(-52px);transition:transform .7s cubic-bezier(.5,0,.2,1)}
.hm-t1.lit .slg .sl,.hm-t1:not(.is-arm) .slg .sl{stroke:var(--hm-green)}
.hm-t1.lit .slg .sl-lab,.hm-t1:not(.is-arm) .slg .sl-lab{fill:var(--hm-green)}
.hm-t1__ok{position:absolute;top:calc(16px + 52%);left:50%;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(7,9,8,.92);border:1px solid var(--hm-green-line);font-size:13px;font-weight:700;color:var(--hm-ink);transform:translate(-50%,-50%);box-shadow:0 0 30px -6px rgba(61,220,111,.5)}
.hm-t1__ok i{width:16px;height:16px;border-radius:50%;background:var(--hm-green);position:relative}
.hm-t1__ok i::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:4px;border-left:2px solid var(--hm-green-ink);border-bottom:2px solid var(--hm-green-ink);transform:rotate(-45deg)}
.hm-t1.is-arm .slg{transform:none}
.hm-t1.is-arm .hm-t1__ok{opacity:0;transform:translate(-50%,-30%) scale(.9);transition:opacity .5s var(--hm-e),transform .5s var(--hm-e)}
.hm-t1.is-arm.lit .slg{transform:translateY(-52px)}
.hm-t1.is-arm.lit .hm-t1__ok{opacity:1;transform:translate(-50%,-50%);transition-delay:.65s}
.hm-t1 .slg .sl,.hm-t1 .slg .sl-lab{transition:stroke .3s .6s,fill .3s .6s}

/* =========================== services on phones and tablets: pin, slide over, settle back =========================== */
@media (max-width:979px){
  .hm-panel__scene{max-width:520px}
  .hm-stack.is-stack{gap:0}
  .hm-stack.is-stack .hm-panel{position:sticky;top:calc(var(--hm-hdr) + 12px + var(--i) * 8px);margin-bottom:28px;transform-origin:50% 0;
    transform:scale(calc(1 - var(--u,0) * .06));filter:brightness(calc(1 - var(--u,0) * .45));box-shadow:0 -18px 40px -24px rgba(0,0,0,.95);will-change:transform}
  .hm-stack.is-stack .hm-panel:last-child{margin-bottom:0}
}

/* =========================== also from TOP A: cards revealed sideways while scrolling ===========================
   The section is as tall as the sideways travel; its inside pins and the row moves with
   the scroll (JS sets --hx, in px). Without script or with reduced motion: a plain
   horizontal swipe row (scroll-snap). Motion reference: Kyntra's «Every Visit Makes …» cards. */
.hm-more-sec{padding-block:0}
.hm-hx{position:relative}
.hm-hx__pin{padding-block:24px var(--hm-sec)}
.hm-more__head{margin-bottom:20px}
.hm-more__head .hm-h2{margin-top:2px}
.hm-hx__view{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.hm-hx__view::-webkit-scrollbar{display:none}
.hm-hx__track{--cw:min(76vw,360px);display:flex;gap:18px;width:max-content;padding-inline:max(var(--hm-gut),calc((100vw - var(--hm-wrap)) / 2 + var(--hm-gut)))}
.hm-hx__bar{height:2px;margin-top:22px;border-radius:2px;background:var(--hm-line-2);overflow:hidden;display:none}
.hm-hx__bar i{display:block;height:100%;background:var(--hm-green);transform-origin:right;transform:scaleX(var(--hp,0))}
.hm-hx.is-pinned{height:calc(100svh + var(--hd,0px))}
.hm-hx.is-pinned .hm-hx__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-block:calc(var(--hm-hdr) + 12px) 24px;overflow:clip}
.hm-hx.is-pinned .hm-hx__view{overflow:visible;scroll-snap-type:none}
.hm-hx.is-pinned .hm-hx__track{transform:translate3d(var(--hx,0px),0,0);will-change:transform}
.hm-hx.is-pinned .hm-hx__bar{display:block}
.hm-card{flex:0 0 var(--cw);scroll-snap-align:center;transition:transform .6s var(--hm-e),opacity .6s var(--hm-e)}
/* pinned: the script sets --k (0 = this card holds the centre, 1 = a neighbour) and --o for each card
   from the scroll, so the card in the centre is whole and the ones further away step back or wait */
.hm-hx.is-pinned .hm-card{opacity:var(--o,1);transform:translateY(calc(var(--k,0) * 18px)) scale(calc(1 - var(--k,0) * .05));transition:none}
.hm-hx.is-pinned .hm-card.is-off{pointer-events:none}
/* one treatment for the four cards: the same size, a full-bleed scene, a shade, the words at the foot */
.hm-card a{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;border:1px solid var(--hm-line-2);border-radius:var(--hm-r-xl);overflow:hidden;background:#050706;transition:border-color var(--t-t1)}
.hm-card a::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,6,0) 34%,rgba(5,7,6,.62) 58%,rgba(5,7,6,.97) 84%)}
.hm-card a::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hm-card a:hover,.hm-card a:focus-visible{border-color:var(--hm-green-line)}
.hm-card a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--hm-bg),0 0 0 4px var(--hm-green)}
.hm-card__media,.hm-card__photo{position:absolute;inset:0;width:100%;height:100%}
.hm-card__media{display:block;overflow:hidden}
.hm-card__photo{object-fit:cover;object-position:50% 14%;transition:transform 1.2s var(--hm-e)}
.hm-card__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;padding:20px 22px 22px}
.hm-card__k{font-size:var(--t-fs-label);font-weight:700;color:var(--hm-green)}
.hm-card__body>b{font-size:var(--t-fs-h2);font-weight:700;line-height:1.25;color:#F7F4EC}
.hm-card__body>.hm-ltr{text-align:right}
.hm-card__sub{font-size:var(--t-fs-small);line-height:1.65;color:var(--hm-ink-2)}
.hm-card__go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--t-fs-small);font-weight:700;color:var(--hm-ink)}
.hm-card__go svg{width:15px;height:15px;transition:transform var(--t-t2) var(--hm-e)}
.hm-card a:hover .hm-card__go svg{transform:translateX(-4px)}
.hm-card a:hover .hm-card__photo{transform:scale(1.03)}
/* each scene sits in the upper part, lit the same way: a soft green glow on near-black */
.hm-card--founder .hm-card__media::after,.hm-card--kharej .hm-card__media,.hm-card--partners .hm-card__media,.hm-card--support .hm-card__media{background:radial-gradient(70% 55% at 50% 34%,rgba(61,220,111,.16),transparent 70%),#050706}
.hm-card--founder .hm-card__sub{color:var(--hm-green);font-weight:700;letter-spacing:.06em}
/* outside the market: its own identity — a documentary viewfinder over the dot field (the original logo is not in the repo) */
.hm-kh{position:absolute;inset:0;background-image:radial-gradient(rgba(61,220,111,.32) 1px,transparent 1.4px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 32%,#000 40%,transparent 80%);mask-image:radial-gradient(75% 60% at 50% 32%,#000 40%,transparent 80%)}
.hm-kh__c{position:absolute;width:26px;height:26px;border-color:rgba(241,237,227,.7);border-style:solid;border-width:0}
.hm-kh__c--1{top:22px;left:22px;border-top-width:2px;border-left-width:2px}
.hm-kh__c--2{top:22px;right:22px;border-top-width:2px;border-right-width:2px}
.hm-kh__c--3{top:calc(58% - 26px);left:22px;border-bottom-width:2px;border-left-width:2px}
.hm-kh__c--4{top:calc(58% - 26px);right:22px;border-bottom-width:2px;border-right-width:2px}
.hm-kh__s{position:absolute;top:30px;left:56px;display:inline-flex;align-items:center;gap:8px;font:500 var(--t-fs-micro)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--hm-ink-2)}
.hm-kh__s i{width:7px;height:7px;border-radius:50%;background:var(--hm-red);box-shadow:0 0 8px rgba(240,119,106,.8)}
.hm-kh__m{position:absolute;top:calc(58% - 22px);right:56px;font:500 var(--t-fs-micro)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:var(--hm-mute)}
@media (prefers-reduced-motion:no-preference){.hm-kh__s i{animation:hm-blink 1.6s ease-in-out infinite}}
/* partners: two rings meeting, a network around them */
.hm-card--partners .hm-card__media{display:grid;place-items:start center;padding-top:8%}
.hm-rings{width:76%;height:auto;overflow:visible}
.hm-rings circle{fill:none;stroke:var(--hm-ink-2);stroke-width:1.4}
.hm-rings path{fill:rgba(61,220,111,.24);stroke:var(--hm-green);stroke-width:1.4}
.hm-rings .dot{fill:var(--hm-green);stroke:none}
.hm-rings .net line{stroke:rgba(61,220,111,.28);stroke-width:1;stroke-dasharray:3 4}
.hm-rings .net circle{fill:var(--hm-green);stroke:none;opacity:.7}
.hm-rings circle:not(.dot),.hm-rings path{transition:transform .8s var(--hm-e),opacity .6s var(--hm-e);transform-box:fill-box;transform-origin:center}
.hm-hx.is-pinned .hm-card--partners:not(.is-in) .hm-rings>circle:nth-of-type(1){transform:translateX(-16px)}
.hm-hx.is-pinned .hm-card--partners:not(.is-in) .hm-rings>circle:nth-of-type(2){transform:translateX(16px)}
.hm-hx.is-pinned .hm-card--partners:not(.is-in) .hm-rings path{opacity:0}
/* support: a request, its reply and its tracking number */
.hm-card--support .hm-card__media{display:grid;place-items:start center;padding:12% 22px 0}
.hm-tix{display:grid;gap:10px;width:min(100%,270px)}
.hm-tix__q{justify-self:start;padding:11px 15px;border-radius:16px 16px 16px 4px;background:var(--hm-s2);border:1px solid var(--hm-line-2);font-size:14.5px;font-weight:700}
.hm-tix__a{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--hm-green-soft);border:1px solid var(--hm-green-line);font-size:13px;color:var(--hm-ink);transition:opacity .5s var(--hm-e) .35s,transform .5s var(--hm-e) .35s}
.hm-tix__a i{width:7px;height:7px;border-radius:50%;background:var(--hm-green)}
.hm-tix__n{justify-self:end;padding:6px 12px;border:1px dashed var(--hm-line-3);border-radius:10px;font-size:12px;color:var(--hm-mute);transition:opacity .5s var(--hm-e) .6s}
.hm-tix__n b{color:var(--hm-green)}
.hm-hx.is-pinned .hm-card--support:not(.is-in) .hm-tix__a{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:no-preference){
  .hm-card--support.is-in .hm-tix__q{animation:hm-up .45s var(--hm-e) both}
  .hm-card--support.is-in .hm-tix__a{animation:hm-up .45s var(--hm-e) .75s both}
  .hm-card--support.is-in .hm-tix__n{animation:hm-up .45s var(--hm-e) 1.4s both}
}
.hm-hx.is-pinned .hm-card--support:not(.is-in) .hm-tix__n{opacity:0}
/* the golden mindset: its own mark in a warm light, a gold hairline drawn as the card takes the centre */
.hm-card--mindset .hm-card__media{background:radial-gradient(70% 52% at 50% 30%,rgba(226,177,78,.17),transparent 70%),#050706}
.hm-gm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:17%}
.hm-gm img{width:70%;max-width:260px;height:auto;filter:drop-shadow(0 0 24px rgba(226,177,78,.22))}
.hm-gm__line{display:block;width:34%;height:1px;background:linear-gradient(90deg,transparent,#E2B14E,transparent);transform-origin:center;transition:transform .9s var(--hm-e) .2s,opacity .9s var(--hm-e) .2s}
.hm-hx.is-pinned .hm-card--mindset:not(.is-in) .hm-gm__line{transform:scaleX(0);opacity:0}
/* desktop: the card follows the screen's height too, so a short or a very large screen shows the
   same scene — one card in the centre, its neighbours at the edges */
@media (min-width:980px){.hm-hx__track{--cw:clamp(280px,min(26vw,calc((100svh - 300px) * .75)),560px);gap:24px}}
/* tall screens: the scene (heading, cards, progress) sits in the middle of the screen, not on its top edge */
@media (min-width:980px) and (min-height:1000px){.hm-hx.is-pinned .hm-hx__pin{justify-content:center}}
@media (max-height:760px){.hm-hx.is-pinned .hm-card a{aspect-ratio:4/4.4}}
/* reduced motion: nothing moves with the scroll; on a wide screen every card is simply in view */
@media (prefers-reduced-motion:reduce) and (min-width:980px){
  .hm-hx__view{overflow:visible}
  .hm-hx__track{--cw:280px;flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--hm-gut)}
}

/* =========================== FAQ =========================== */
.hm-faq-wrap{max-width:880px}
.hm-faq{margin-top:26px;border-top:1px solid var(--hm-line)}
.hm-faq details{border-bottom:1px solid var(--hm-line)}
.hm-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:62px;padding:16px 0;font-size:var(--t-fs-h3);font-weight:700;line-height:1.5;transition:color var(--t-t1)}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--hm-line-2);display:grid;place-items:center;transition:transform var(--t-t2) var(--hm-e),border-color var(--t-t1)}
.hm-faq summary i::before{content:"+";font-style:normal;font-size:16px;line-height:1;color:var(--hm-mute)}
.hm-faq details[open] summary{color:var(--hm-green)}
.hm-faq details[open] summary i{transform:rotate(45deg);border-color:var(--hm-green)}
.hm-faq .a{padding:0 0 20px;font-size:var(--t-fs-body);line-height:1.85;color:var(--hm-ink-2);max-width:68ch}
.hm-faq .a a{color:var(--hm-green)}

/* =========================== closing =========================== */
.hm-close{text-align:center;border-top:1px solid var(--hm-line);background:radial-gradient(50% 70% at 50% 100%,rgba(61,220,111,.10),transparent 70%)}
.hm-close .hm-acts{justify-content:center}
.hm-close .hm-lead{margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .hm-rv.is-pre{opacity:1;transform:none}
  .hm-sc--learn .hm-schools em{transform:none!important;opacity:1!important}
}