/* Ekal public website: the four audience pages (2026-10-28, the approved design; docs/WEBSITE.md):
   For clients, For lawyers, For law firms, For trainees. Linked after ek-site-pages.css (the home's
   system, which these pages extend: night hero with its own motion graphic, light glass sections,
   one night band, guilloche). Ported from the design preview (src/pages.css).
   Motion: step sequences (static/js/ek-site-pages.js) rendered at their final step; scroll reveals
   only under @supports; nothing moves under prefers-reduced-motion. */

:root { --dir: 1; }
[dir="rtl"] { --dir: -1; }

/* ---------- hero ---------- */
.ahero { min-height: min(840px, 100svh); }
/* centre the rosette with top, not translate: a translate applied with its scroll-linked spin made the first frames shift */
.ahero .guil { top: calc(50% - 380px); translate: none; }
.ahero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; }
.ahero h1 { font-size: clamp(36px, 3.9vw, 54px); }
:root:lang(ar) .ahero h1 { font-size: clamp(34px, 3.6vw, 50px); }
.ahero .lead { max-width: 35em; }
.ahero .hero-cta { margin-top: 30px; }
.ahero .proof .pill-offer { color: #ffe2a3; }
.ahero .proof > span { flex-wrap: wrap; }
.ahero[data-aud="clients"] .hero-bg.no-photo { background: var(--sky), radial-gradient(900px 600px at 82% 16%, #3b45b0 0%, transparent 60%), radial-gradient(680px 520px at 4% 98%, rgba(14, 122, 85, .5) 0%, transparent 62%), var(--night); }
.ahero[data-aud="firms"] .hero-bg.no-photo { background: var(--sky), radial-gradient(900px 600px at 82% 16%, #4637a6 0%, transparent 60%), radial-gradient(720px 520px at 6% 96%, #682f8e 0%, transparent 60%), var(--night); }
.ahero[data-aud="trainees"] .hero-bg.no-photo { background: var(--sky), radial-gradient(900px 600px at 82% 16%, #2f4db0 0%, transparent 60%), radial-gradient(680px 520px at 4% 98%, rgba(25, 118, 140, .6) 0%, transparent 62%), var(--night); }

/* the four pages as one family: a glass switch; the chosen pill travels between pages (cross-document view transition) */
.aud-sw { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 26px; max-width: 100%; border-radius: 17px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.aud-sw a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding-inline: 12px; border-radius: 13px; font-size: 14px; font-weight: 600; color: rgba(229, 233, 255, .82);
  white-space: nowrap; transition: background-color .2s, color .2s; }
.aud-sw a .i { font-size: 17px; }
.aud-sw a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.aud-sw a[aria-current="page"] { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 6px 18px rgba(3, 5, 30, .3); view-transition-name: aud-pill; }
.aud-sw a:active { transition-duration: 0s; transform: scale(.96); }
::view-transition-group(aud-pill) { animation-duration: .55s; animation-timing-function: var(--spring-1, ease); }

/* ---------- motion graphics: frame, caption, pause / replay ---------- */
.mgf { position: relative; margin: 0; min-width: 0; }
.mg { position: relative; }
.mg-cap { position: absolute; z-index: 4; inset-block-end: 14px; inset-inline-start: 16px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .05); pointer-events: none; }
.mg-pp { position: absolute; z-index: 4; inset-block-end: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 11px; border: 0; display: grid; place-items: center;
  color: var(--navy); background: rgba(42, 48, 110, .08); transition: background-color .2s, transform .45s var(--spring-1); }
.mg-pp:hover { background: rgba(42, 48, 110, .14); }
.mg-pp:active { transition-duration: 0s; transform: scale(.92); }
.mg-pp .i { font-size: 16px; }
.mg-night .mg-cap { color: rgba(226, 230, 255, .82); background: rgba(255, 255, 255, .1); }
.mg-night .mg-pp { color: #fff; background: rgba(255, 255, 255, .12); }
.mg-night .mg-pp:hover { background: rgba(255, 255, 255, .2); }

/* sequenced parts show from their step (data-in) until data-out; the HTML is rendered at the final step */
.mg [data-in], .mg [data-out] { transition: opacity .45s var(--ease), translate .7s var(--spring-1), scale .7s var(--spring-1), visibility 0s linear .45s; }
.mg [data-in]:not(.on), .mg [data-out]:not(.on) { opacity: 0; visibility: hidden; translate: 0 10px; scale: .98; }
.mg svg [data-in]:not(.on) { translate: none; scale: none; }
.mg .on { transition-delay: 0s; }
.mgf.is-paused *, .mgf.is-paused *::before, .mgf.is-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .mg [data-in], .mg [data-out], .mg * { transition: none !important; animation: none !important; }
  .mg-pp { display: none; }
}
/* the light sheet (clients, lawyers): the home's case-sheet glass */
/* no backdrop-filter: at 89-96 % white the blur showed nothing, and every frame of the graphic re-blurred the hero */
.mg-sheet .mg { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .89));
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 #fff, 0 40px 90px rgba(4, 6, 30, .5), 0 2px 10px rgba(4, 6, 30, .2); }
/* the night panel (firms, trainees): the home's trainee graphic */
.mg-night .mg { border-radius: 30px; padding: 18px 18px 58px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(520px 300px at 50% 0%, rgba(124, 136, 255, .34), transparent 70%), radial-gradient(420px 260px at 100% 100%, rgba(14, 122, 85, .2), transparent 70%), linear-gradient(180deg, #232a68, #171b4b);
  box-shadow: 0 34px 80px rgba(3, 4, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .09); }
@keyframes mg-in { from { opacity: 0; translate: 0 8px; } }
@keyframes mg-press { 40% { scale: .94; filter: brightness(1.15); } }
@keyframes mg-pop { from { opacity: 0; scale: .4; } 70% { scale: 1.08; } }
@keyframes mg-flow { to { stroke-dashoffset: -26; } }

/* ---------- clients hero: a booking, start to finish ---------- */
.mg-sheet .mg { border-radius: var(--r-xl); padding: 16px 16px 56px; }
.cj-rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 2px 4px; }
.cj-n { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cj-n i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: var(--navy); background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(42, 48, 110, .18), 0 0 0 4px rgba(255, 255, 255, .9); transition: background-color .4s, color .4s, box-shadow .4s, scale .5s var(--spring-1); }
.cj-n i .i { font-size: 17px; }
.cj-n em { font-style: normal; transition: color .3s; }
.cj-n.hit i { color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow: 0 6px 14px rgba(42, 48, 110, .3), 0 0 0 4px rgba(255, 255, 255, .9); }
.cj-n.hit em { color: var(--navy); }
.cj-line { position: absolute; top: 19px; inset-inline: 10%; height: 2px; border-radius: 2px; background: rgba(42, 48, 110, .12); }
.cj-line > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc((var(--st, 5) - 1) * 25%); border-radius: inherit; background: var(--navy-2); transition: width .8s var(--spring-1); }
.cj-view { position: relative; height: 270px; margin-top: 14px; }
.cj-sc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.cj-t { font-size: 16.5px; font-weight: 700; }
.cj-q { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cj-with { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.cj-with .ava { width: 32px; height: 32px; font-size: 11.5px; grid-row: auto; }
.cj-with .ver { margin-inline-start: auto; }
.cj-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cj-f { display: grid; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-f small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cj-f b { font-size: 15px; }
.cj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding-inline: 18px; border-radius: 13px; font-size: 14.5px; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow: 0 8px 18px rgba(42, 48, 110, .25); }
.cj-btn .i { font-size: 17px; }
.cj-res { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--seal); padding: 9px 12px; border-radius: 12px; background: var(--seal-soft); }
.cj-res .i { font-size: 17px; flex: none; }
.cj-sc .lawyer { box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 26px rgba(34, 40, 110, .1); }
.cj-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(42, 48, 110, .07); }
.cj-seg span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 11px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cj-seg span.sel { background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(34, 40, 110, .14); }
.cj-seg .i { font-size: 17px; }
.cj-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-slot, .cj-urg { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding-inline: 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-slot { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy-2); }
.cj-urg .i { color: #d98a00; }
.tog { position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(15, 23, 42, .14); flex: none; transition: background-color .3s; }
.tog::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start .45s var(--spring-1); }
.cj-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cj-pay .pay img { height: 22px; padding: 4px 6px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-held { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(14, 122, 85, .1), rgba(14, 122, 85, .03)); box-shadow: inset 0 0 0 1px rgba(14, 122, 85, .2); }
.cj-held .lk { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #13a070, var(--seal)); }
.cj-held .lk .i { font-size: 21px; }
.cj-held b { display: block; font-size: 15px; color: var(--seal); }
.cj-held small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.cj-call { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #252c6e, #141842); }
.cj-call .ava { width: 44px; height: 44px; }
.cj-call .me { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 16px; }
.cj-call-l { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: rgba(229, 233, 255, .92); }
.cj-call-l .i { color: #7fe3bf; }
.cj-done { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--seal); background: var(--seal-soft); }
.cj-rel .lk { background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.cj-rel b { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .js .cj-sc.on > * { animation: mg-in .6s var(--spring-1) both; }
  .js .cj-sc.on > :nth-child(2) { animation-delay: .2s; }
  .js .cj-sc.on > :nth-child(3) { animation-delay: .45s; }
  .js .cj-sc.on > :nth-child(4) { animation-delay: .7s; }
  .js .cj-sc.s1.on .cj-btn { animation: mg-in .6s .45s var(--spring-1) both, mg-press .45s 1.3s both; }
  .js .cj-sc.s1.on .cj-res { animation-delay: 1.75s; }
  .js .cj-sc.s3.on .cj-seg span { transition: background-color .35s, color .35s, box-shadow .35s; }
  .js .cj-sc.s4.on .cj-btn { animation: mg-press .45s 1s both; }
  .js .cj-sc.s4.on .cj-held { animation: mg-in .6s 1.5s var(--spring-1) both; }
  .js .cj-sc.s4.on .cj-held .lk { animation: mg-pop .6s 1.7s var(--spring-1) both; }
  .js .cj-sc.s5.on .cj-done { animation-delay: 1.1s; }
  .js .cj-sc.s5.on .cj-rel { animation-delay: 2s; }
  .js .cj-sc.s5.on .cj-call .ava { animation: cj-talk 1.1s ease-in-out .3s 2; }
  @keyframes cj-talk { 50% { box-shadow: 0 0 0 6px rgba(127, 227, 191, .35); } }
}

/* ---------- lawyers hero: an answer with its sources; the cited article opens over it ---------- */
.an-head { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.an-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.an-mark .i { font-size: 18px; }
.an-live { width: 7px; height: 7px; border-radius: 50%; background: #19a974; box-shadow: 0 0 0 3px rgba(25, 169, 116, .18); margin-inline-start: auto; }
.an-q { margin: 12px 0 0; margin-inline-start: 16%; padding: 10px 14px; border-radius: 16px; border-end-end-radius: 5px; font-size: 14px; line-height: 1.55; color: #fff;
  background: linear-gradient(180deg, var(--navy-2), var(--navy)); min-height: 3.3em; }
:root:lang(ar) .an-q { font-size: 14.5px; line-height: 1.7; }
.an-q.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: text-bottom; background: #fff; animation: caret 1s steps(1) infinite; }
.an-body { position: relative; margin-top: 12px; min-height: 150px; }
.an-wait { position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.an-dots { display: inline-flex; gap: 4px; }
.an-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-2); animation: an-dot 1s ease-in-out infinite; }
.an-dots i:nth-child(2) { animation-delay: .15s; } .an-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes an-dot { 50% { opacity: .25; translate: 0 -3px; } }
.an-a p { font-size: 14px; font-weight: 700; }
.an-a ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
:root:lang(ar) .an-a ul { font-size: 14px; line-height: 1.75; }
.an-a li + li { margin-top: 5px; }
.cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--navy); background: rgba(59, 69, 176, .13); vertical-align: 2px; }
.an-art { position: absolute; z-index: 2; inset: -6px -6px auto; padding: 12px 14px 14px; border-radius: 18px; color: var(--ink); background: #fffdf8;
  box-shadow: 0 24px 50px rgba(18, 21, 59, .22), inset 0 0 0 1px rgba(42, 48, 110, .1); }
.an-art-h { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); }
.an-art-h .i { font-size: 18px; flex: none; }
.an-art-h .i:last-child { margin-inline-start: auto; font-size: 15px; color: var(--muted); }
.an-off { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.an-art p { margin-top: 6px; font-family: "IBM Plex Sans Arabic", "Cairo", var(--font); font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.an-art mark { color: inherit; background: linear-gradient(transparent 52%, rgba(255, 212, 121, .75) 52%) no-repeat right / 100% 100%; border-radius: 2px; }
.an-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.an-src > small { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.src { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .2); transition: box-shadow .3s, background-color .3s; }
.src .i { font-size: 14px; }
.src b { font-size: 10.5px; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: var(--navy-2); }
.mgf-ans[data-step="4"] .src.s2, .mgf-ans[data-step="5"] .src.s2 { background: rgba(59, 69, 176, .08); box-shadow: inset 0 0 0 2px var(--navy-2); }
.an-cur { position: absolute; inset-inline-end: -8px; bottom: -15px; font-style: normal; color: var(--ink); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.an-cur .i { font-size: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .js .an-a.on li { animation: mg-in .6s var(--spring-1) both; }
  .js .an-a.on li:nth-child(1) { animation-delay: .5s; }
  .js .an-a.on li:nth-child(2) { animation-delay: 1.5s; }
  .js .an-a.on .cite { animation: mg-pop .5s var(--spring-1) both; }
  .js .an-a.on li:nth-child(1) .cite { animation-delay: 1.1s; }
  .js .an-a.on li:nth-child(2) .cite { animation-delay: 2.3s; }
  .js .an-src.on .src { animation: mg-in .5s var(--spring-1) both; }
  .js .an-src.on .src:nth-of-type(1) { animation-delay: 2.6s; }
  .js .an-src.on .src.s2 { animation-delay: 2.8s; }
  .js .an-art.on { animation: an-open .55s .45s var(--spring-1) both; }
  .js .an-art.on mark { animation: an-mark 1.1s 1.1s var(--ease) both; }
  .js .an-cur.on { animation: an-click .7s var(--spring-1) both; }
  @keyframes an-open { from { opacity: 0; translate: 0 14px; scale: .97; } }
  @keyframes an-mark { from { background-size: 0 100%; } }
  @keyframes an-click { 0% { opacity: 0; translate: 26px 22px; } 70% { opacity: 1; translate: 0 0; } 85% { scale: .86; } }
}

/* ---------- firms hero: one pool, each member's limit ---------- */
.pool-box { position: relative; aspect-ratio: 520 / 240; }
.pool-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-l { fill: none; stroke: rgba(170, 180, 255, .45); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }
.pl-ring { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .22); stroke-width: 10; }
.pl-arc { fill: none; stroke: #7fe3bf; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 46 100; transform: rotate(-90deg); transform-origin: 260px 78px;
  transition: stroke-dasharray 1.2s var(--ease); }
.mgf-pool[data-step="1"] .pl-arc { stroke-dasharray: 0 100; }
.mgf-pool[data-step="0"] .pl-arc { stroke-dasharray: 0 100; transition: none; }
.pl-node { fill: #fff; filter: drop-shadow(0 6px 14px rgba(3, 5, 30, .45)); }
.pl-node.tr { fill: #dff7ee; }
.pl-dot { fill: #ffd479; filter: drop-shadow(0 0 6px rgba(255, 212, 121, .95)); opacity: 0; }
.pool-c { position: absolute; left: 50%; top: 32.5%; translate: -50% -50%; display: grid; justify-items: center; text-align: center; line-height: 1.2; }
.pool-c small { font-size: 10.5px; font-weight: 600; color: rgba(226, 230, 255, .78); max-width: 9em; }
.pool-c b { font-family: "Inter", var(--font); font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pool-own { position: absolute; top: 2%; inset-inline-start: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #ffe2a3;
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 212, 121, .12); box-shadow: inset 0 0 0 1px rgba(255, 212, 121, .3); }
.pool-ini { position: absolute; top: 85.8%; translate: calc(-50% * var(--dir)) -50%; font-weight: 700; font-size: 16px; color: var(--navy); pointer-events: none; }
.pool-ini.i1 { inset-inline-start: 16.667%; } .pool-ini.i2 { inset-inline-start: 50%; } .pool-ini.i3 { inset-inline-start: 83.333%; }
[dir="rtl"] .pool-net { transform: scaleX(-1); }
.pool-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.pm { display: grid; justify-items: center; gap: 4px; padding-inline: 6px; text-align: center; }
.pm-n b { display: block; font-size: 14px; }
.pm-n small { display: block; font-size: 11.5px; color: rgba(226, 230, 255, .72); }
.pm-bar { position: relative; width: min(118px, 100%); height: 7px; border-radius: 7px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pm-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--u1); border-radius: inherit; background: linear-gradient(90deg, #7fe3bf, #8f9bff); transition: width .9s var(--ease), background-color .3s; }
.mgf-pool:not([data-step="4"]) .pm-fill { width: var(--u0); }
.mgf-pool:not([data-step="4"]) .fh .pm-fill { background: linear-gradient(90deg, #ffc86b, #ff9f5a); }
.pm-l { font-size: 11.5px; color: rgba(226, 230, 255, .72); }
.pm-lim { position: relative; display: inline-grid; color: #fff; }
.pm-lim > span { grid-area: 1 / 1; }
.pool-msg { position: relative; height: 50px; margin-top: 12px; }
.pool-req { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 15px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.pool-req > span:nth-child(2) { flex: 1; min-width: 0; }
.pool-req.ok { color: #c9f1de; background: rgba(25, 169, 116, .18); box-shadow: inset 0 0 0 1px rgba(127, 227, 191, .35); }
.pool-req.ok .i { font-size: 20px; color: #7fe3bf; flex: none; }
.pool-ap { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--navy); background: #fff; flex: none; }
.pm-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #5b66d6, #2a306e); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.pm-ava.sm { width: 30px; height: 30px; font-size: 12.5px; }
.pm-ava.alt { background: linear-gradient(135deg, #3f8f8a, #1d4d5c); }
@media (prefers-reduced-motion: no-preference) {
  .pl-l { animation: mg-flow 1.3s linear infinite; }
  .js .pm-fill.on { animation: pm-grow 1.1s var(--ease) backwards; }
  @keyframes pm-grow { from { width: 0; } }
  .js .pool-req.on .pool-ap { animation: mg-press .45s 1.5s both; }
}

/* ---------- trainees hero: the journey, extended ---------- */
.tj-net { position: relative; }
.tj-net .trm-net { width: 100%; height: auto; }
[dir="rtl"] .tj-net .trm-net { transform: scaleX(-1); }
.tj-me circle { fill: #fff; filter: drop-shadow(0 6px 16px rgba(3, 5, 30, .45)); }
.tj-ini { position: absolute; left: 50%; top: 86%; translate: -50% -50%; font-weight: 700; font-size: 19px; color: var(--navy); }
.tj-name { position: absolute; left: 50%; top: 100%; translate: -50% 0; font-size: 13px; font-weight: 600; color: rgba(226, 230, 255, .86); white-space: nowrap; }
.tj-case { fill: none; stroke: #7fe3bf; stroke-width: 2; stroke-dasharray: 5 6; }
.tj-casen circle { fill: rgba(25, 169, 116, .25); stroke: #7fe3bf; stroke-width: 1.2; }
.tj-casen use { color: #c9f1de; fill: currentColor; }
[dir="rtl"] .tj-ok { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.tj-dot { fill: #ffd479; filter: drop-shadow(0 0 7px rgba(255, 212, 121, .95)); opacity: 0; }
.mgf-tj .tj-f2 > circle { transition: fill .5s, stroke .5s; }
.mgf-tj[data-step="3"] .tj-f2 > circle, .mgf-tj[data-step="4"] .tj-f2 > circle, .mgf-tj[data-step="5"] .tj-f2 > circle { fill: rgba(25, 169, 116, .22); stroke: #7fe3bf; }
.tj-feed { position: relative; height: 66px; margin-top: 34px; }
.tj-card { position: absolute; inset: 0; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.tj-card > div { flex: 1; min-width: 0; }
.tj-card b { display: block; font-size: 14.5px; font-weight: 700; }
.tj-card small { display: block; font-size: 12.5px; color: rgba(226, 230, 255, .76); }
.tj-wal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tj-w { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.tj-w .i { font-size: 18px; color: #c9cfff; flex: none; }
.tj-w small { font-size: 12.5px; font-weight: 600; color: rgba(226, 230, 255, .8); flex: 1; min-width: 0; }
.tj-w b { font-family: "Inter", var(--font); font-size: 15px; font-variant-numeric: tabular-nums; }
.tj-w.pool { background: rgba(25, 169, 116, .16); box-shadow: inset 0 0 0 1px rgba(127, 227, 191, .35); }
.tj-w.pool .i { color: #7fe3bf; }
.tj-flow { position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(127, 227, 191, .28), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .mgf-tj .trm-l { animation: mg-flow 1.3s linear infinite; }
  .js .tj-w.pool.on .tj-flow { animation: tj-flow 1.6s ease-in-out infinite; }
  @keyframes tj-flow { from { translate: -100% 0; } to { translate: 260% 0; } }
  [dir="rtl"] .js .tj-w.pool.on .tj-flow { animation-name: tj-flow-rtl; }
  @keyframes tj-flow-rtl { from { translate: 100% 0; } to { translate: -260% 0; } }
  .js .tj-ok.on { animation: mg-pop .6s var(--spring-1) both; transform-box: fill-box; transform-origin: center; }
}

/* ---------- section rhythm on the audience pages ---------- */
.sec.how { padding-top: 40px; }
.sec.how .sec-h { justify-items: start; }
.jr-steps.n4 { grid-template-columns: repeat(4, 1fr); }
.jr-steps.n5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.jr-steps.n5::before, .jr-steps.n4::before { inset-inline: 9%; }
.jr-steps.n5 .jr-step { padding-inline: 6px; }
.jr-steps.n5 .jr-step b { font-size: 17.5px; }
.jr-steps.n5 .jr-step p { font-size: 15px; }
.split.rev > :first-child { order: 0; }
.vg-stage { min-width: 0; }

/* ---------- clients: what Ekal offers (tiles with their own small films) ---------- */
.cb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.tile { position: relative; display: grid; align-content: start; gap: 18px; padding: 26px; border-radius: 28px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(34, 40, 110, .09); min-width: 0; }
.tile.t7 { grid-column: span 7; } .tile.t5 { grid-column: span 5; } .tile.t12 { grid-column: span 12; }
.tile h3 { font-size: 21px; font-weight: 700; line-height: 1.3; }
.tile-tx p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.tile .note { margin-top: 10px; }
.tile .mgf { align-self: end; }
.tile .mg { padding: 14px; border-radius: 20px; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .78)); box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px rgba(34, 40, 110, .07); min-height: 200px; }
.tile .mg-cap { inset-block-end: 10px; inset-inline-start: 12px; }
.tile-night { gap: 22px; color: #fff; border: 0;
  background: radial-gradient(700px 360px at 90% 0%, rgba(99, 112, 255, .4), transparent 62%), radial-gradient(520px 320px at 0% 100%, rgba(14, 122, 85, .28), transparent 60%), linear-gradient(180deg, #1a1f52, var(--night));
  box-shadow: 0 30px 70px rgba(18, 21, 59, .3); }
.tile-night .tile-tx p { color: rgba(220, 225, 255, .8); }
.tile-night .pay { margin-top: 18px; flex-wrap: wrap; }
.tile-night .mg { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); min-height: 0; padding: 22px 20px 52px; }
.tile-night .mg-cap { color: rgba(226, 230, 255, .82); background: rgba(255, 255, 255, .1); }
.tile-night .mg-pp { color: #fff; background: rgba(255, 255, 255, .12); }
.tile-lib { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding-block: 22px; }
.lib-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--navy); background: rgba(59, 69, 176, .08); font-size: 28px; }
.tile-lib .tile-tx p { margin-top: 4px; }
.lib-k { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-k span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .16); }
/* describe -> reading -> lawyers */
.mgf-cd .mg { padding-bottom: 46px; }
.cd-box { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.cd-l { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cd-typed { min-height: 3.2em; font-size: 14.5px; line-height: 1.6; }
.cd-typed.is-typing::after, .gs-typed.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: text-bottom; background: var(--navy-2); animation: caret 1s steps(1) infinite; }
.mgf-cd .reading { margin-top: 10px; padding: 10px 12px; }
.mgf-cd .chips { margin-top: 8px; }
.cd-match { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--seal); }
.cd-match .i { font-size: 17px; flex: none; }
.cd-law { margin-top: 8px; }
.cd-law .lawyer { box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px rgba(34, 40, 110, .08); }
.avs { display: inline-flex; }
.avs i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b66d6, #2a306e);
  box-shadow: 0 0 0 2px #fff; }
.avs i + i { margin-inline-start: -8px; }
.avs i.alt { background: linear-gradient(135deg, #3f8f8a, #1d4d5c); } .avs i.alt2 { background: linear-gradient(135deg, #8a5bd6, #4a2a86); }
/* profile anatomy */
.mgf-pf .mg { padding: 16px 16px 48px; }
.pf-card { padding: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px rgba(34, 40, 110, .1); }
.pf-top { display: flex; gap: 12px; align-items: center; }
.pf-top .ava { grid-row: auto; }
.pf-id { display: grid; gap: 3px; min-width: 0; }
.pf-id b { font-size: 15.5px; }
.pf-id .ver { justify-self: start; }
.pf-rate { display: flex; align-items: center; gap: 2px; margin-top: 12px; font-size: 13.5px; }
.pf-rate .i { color: #f5a524; font-size: 15px; }
.pf-rate b { margin-inline-start: 6px; } .pf-rate em { font-style: normal; color: var(--muted); margin-inline-start: 4px; }
.pf-fees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; }
.pf-fees small { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pf-fees span { display: inline-flex; align-items: center; gap: 5px; } .pf-fees .i { color: var(--navy-2); }
.pf-fees em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.mgf-pf .mg { display: grid; gap: 10px; }
.pf-call { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--navy);
  background: rgba(59, 69, 176, .07); box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .16); }
.pf-call.k1 { color: var(--seal); background: var(--seal-soft); box-shadow: inset 0 0 0 1px rgba(14, 122, 85, .2); }
.pf-call .i { font-size: 15px; }
.pf-call.k2 .i { color: #f5a524; }
/* booking options */
.mgf-bk .mg { display: grid; gap: 12px; align-content: start; padding: 16px 16px 50px; }
.bk-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 14px; background: rgba(42, 48, 110, .07); isolation: isolate; }
.bk-seg span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.bk-bub { position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc((100% - 8px) / 3); border-radius: 11px; background: #fff;
  box-shadow: 0 4px 12px rgba(34, 40, 110, .14); translate: calc(var(--bi, 2) * 100% * var(--dir, 1)) 0; transition: translate .6s var(--spring-1); }
.mgf-bk[data-step="0"] .bk-bub, .mgf-bk[data-step="1"] .bk-bub { --bi: 0; }
.mgf-bk[data-step="2"] .bk-bub { --bi: 1; }
.bk-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.bk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-s { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 12px; border-radius: 11px; font-size: 13.5px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.bk-s.on { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy-2); }
.mg .bk-slots [data-in]:not(.on) { opacity: 1; visibility: visible; translate: none; scale: none; }
.bk-urg { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; font-size: 14px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.bk-urg > span { flex: 1; }
.bk-urg > .i { color: #d98a00; font-size: 18px; }
.bk-urg.on .tog { background: #f0a020; }
.bk-urg.on .tog::after { inset-inline-start: 16px; }
.mg .bk-urg:not(.on) { opacity: 1; visibility: visible; translate: none; scale: none; }
/* where the money goes: paid -> held, then completed (the lawyer is paid) or cancelled (the money comes back) */
.es-flow { display: flex; align-items: center; gap: 12px; }
.es-top { display: flex; align-items: center; gap: 10px; flex: none; }
.es-n { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 14px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.es-n .i { font-size: 18px; flex: none; color: #c9cfff; }
.es-held { background: rgba(255, 212, 121, .14); box-shadow: inset 0 0 0 1px rgba(255, 212, 121, .4); }
.es-held .i { color: #ffd479; }
.es-ln, .es-ar { display: inline-grid; color: rgba(255, 255, 255, .5); font-style: normal; }
.es-ln .i, .es-ar .i { font-size: 16px; }
.es-fork { position: relative; flex: 1; min-width: 0; display: grid; gap: 12px; padding-inline-start: 38px; }
.es-fork::before { content: ""; position: absolute; inset-inline-start: 16px; top: 21px; bottom: 21px; width: 22px; border: 2px solid rgba(255, 255, 255, .28); border-inline-end: 0;
  border-start-start-radius: 12px; border-end-start-radius: 12px; }
.es-fork::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 16px; height: 2px; background: rgba(255, 255, 255, .28); }
.es-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-out .es-end { color: #c9f1de; background: rgba(25, 169, 116, .2); box-shadow: inset 0 0 0 1px rgba(127, 227, 191, .45); }
.es-out .es-end .i { color: #7fe3bf; }
.es-re { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--navy); background: #fff; }
.es-re .i { font-size: 15px; }
.tile-night .tile-tx { max-width: 52em; }
/* case page */
.mgf-cp .mg { padding: 14px 14px 54px; }
.cp-page { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.cp-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.cp-st { font-size: 12px; font-weight: 700; color: var(--seal); background: var(--seal-soft); padding: 3px 10px; border-radius: 999px; flex: none; }
.cp-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(42, 48, 110, .06); }
.cp-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 11px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.mg .cp-tab:not(.on) { opacity: 1; visibility: visible; translate: none; scale: none; }
.cp-tab.on { background: #fff; color: var(--navy); box-shadow: 0 3px 10px rgba(34, 40, 110, .12); }
.cp-body { position: relative; min-height: 116px; }
.cp-pane { position: absolute; inset: 0; display: grid; gap: 8px; align-content: start; }
.cp-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.cp-row > .i { font-size: 20px; color: var(--navy-2); flex: none; }
.cp-row > span { flex: 1; min-width: 0; }
.cp-row b { display: block; } .cp-row small { display: block; font-size: 12px; color: var(--muted); }
.cp-row.new { box-shadow: inset 0 0 0 2px rgba(14, 122, 85, .35); background: #f6fdf9; }
.cp-ok { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--seal); }
.cp-msg { display: flex; gap: 10px; align-items: flex-start; }
.cp-msg .ava { width: 34px; height: 34px; font-size: 12px; flex: none; }
.cp-msg p { padding: 9px 12px; border-radius: 14px; border-start-start-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.55; }
.cp-hear { align-self: start; display: grid; justify-items: center; gap: 4px; width: 128px; padding: 12px 10px; border-radius: 16px; text-align: center; color: #fff;
  background: linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow: 0 10px 24px rgba(42, 48, 110, .25); }
.cp-hear > .i { font-size: 22px; color: #ffd479; }
.cp-hear small { display: block; font-size: 11.5px; color: rgba(229, 233, 255, .8); } .cp-hear b { display: block; font-size: 12.5px; line-height: 1.45; }
.cp-toast { position: absolute; inset-inline-end: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 13px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(18, 21, 59, .92); box-shadow: 0 12px 30px rgba(18, 21, 59, .35); }
.cp-toast .i { color: #ffd479; font-size: 17px; }
.mgf-cp .mg-pp { display: none; }
.mgf-cp .mg-cap { inset-block-end: 16px; }

/* fees: what a booking looks like before you pay */
.fees .split { align-items: center; }
.fees .ticks li { align-items: flex-start; }
.fees .ticks .i { margin-top: 3px; }
.bsum { position: relative; padding: 22px; border-radius: 26px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); max-width: 480px; justify-self: center; width: 100%; }
.bsum-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 17px; }
.bsum-r { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.bsum-r > span { color: var(--muted); }
.bsum-r b { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; text-align: end; }
.bsum-r.hold b { color: var(--seal); font-size: 13.5px; } .bsum-r.hold .i { font-size: 16px; }
.bsum-pay { margin-top: 14px; } .bsum-pay .pay img { height: 24px; padding: 4px 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.bsum-btn { width: 100%; margin-top: 14px; pointer-events: none; }
.end-alt { margin-top: 18px; font-size: 15.5px; position: relative; }

/* ---------- lawyers: recordings, practice, profile ---------- */
.pro .tx-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; color: rgba(220, 225, 255, .74); }
.pro .tx-note .i { font-size: 17px; }
.pro + .write { padding-top: 96px; }
.tx-light .tab { color: var(--ink-2); }
.tx-light .tab span { color: var(--muted); }
.tx-light .tab:hover { background: rgba(42, 48, 110, .05); color: var(--ink); }
.tx-light .tab[aria-selected="true"] { color: var(--navy); background: var(--glass); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(34, 40, 110, .1), inset 0 0 0 1px rgba(255, 255, 255, .9); }
.tx-light .tab .bar { background: rgba(42, 48, 110, .1); }
.tx-light .tab .bar::after { background: linear-gradient(90deg, var(--navy-2), #8f9bff); }
.tx-light .stage { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--glass-shadow); }
.tx-light .stage-bar { color: var(--muted); }
.tx-light .stage-bar .url { background: rgba(42, 48, 110, .06); }
.w-ticks { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.w-ticks li { display: inline-flex; align-items: center; gap: 10px; }
.w-ticks .i { font-size: 21px; color: var(--navy-2); }
.flist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.flist li { display: flex; align-items: flex-start; gap: 14px; }
.flist li > .i { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 13px; color: var(--navy); background: rgba(59, 69, 176, .08); }
.flist li > span { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.flist li b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 2px; }
.vg-stage .mg { padding: 20px 20px 56px; border-radius: 28px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); }
/* invoice to payout */
.mgf-mf .mg { display: grid; gap: 12px; }
.mf-hear { justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 14px; font-size: 13px; color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow: 0 10px 24px rgba(42, 48, 110, .22); }
.mf-hear .i { font-size: 20px; color: #ffd479; }
.mf-hear b { display: block; } .mf-hear small { display: block; color: rgba(229, 233, 255, .8); }
.mf-inv { padding: 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px rgba(34, 40, 110, .08); }
.mf-inv-h { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.mf-inv-h .i { font-size: 20px; color: var(--navy-2); }
.mf-inv-h em { margin-inline-start: auto; font-style: normal; font-weight: 700; font-family: "Inter", var(--font); font-variant-numeric: tabular-nums; }
.mf-inv-c { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.mf-inv-c .ava { width: 26px; height: 26px; font-size: 11px; grid-row: auto; }
.mf-st { position: relative; height: 38px; margin-top: 12px; }
.mf-s { position: absolute; inset-inline-start: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding-inline: 12px; border-radius: 11px; font-size: 13.5px; font-weight: 700;
  color: var(--navy); background: rgba(59, 69, 176, .08); }
.mf-s.warn { color: #9a5b00; background: #fff4dc; }
.mf-s.ok { color: var(--seal); background: var(--seal-soft); }
.mf-earn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #252c6e, #141842); }
.mf-earn > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(229, 233, 255, .85); }
.mf-earn b { font-family: "Inter", var(--font); font-size: 22px; font-variant-numeric: tabular-nums; }
.mf-earn .i { font-size: 19px; color: #7fe3bf; }
.mf-out { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 15px; font-size: 14px; font-weight: 600; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mf-out > .i:first-child { font-size: 20px; color: var(--navy-2); }
.mf-out > span { flex: 1; }
.mf-out > .i:last-child { color: var(--seal); font-size: 19px; }
/* search finds your profile */
.mgf-gs .mg { display: grid; gap: 12px; }
.gs-q { padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.gs-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.gs-l .i { color: #d98a00; }
.gs-typed { min-height: 1.6em; margin-top: 4px; font-size: 14.5px; }
.gs-area { padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(59, 69, 176, .08), rgba(59, 69, 176, .02)); box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .12); }
.gs-area .emb { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; flex: none; }
.gs-area strong { display: block; font-size: 14.5px; } .gs-area small { display: block; font-size: 12.5px; color: var(--muted); }
.gs-list { display: grid; gap: 8px; }
.gs-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, background-color .4s; }
.gs-row .ava { width: 36px; height: 36px; font-size: 12px; grid-row: auto; flex: none; }
.gs-row > span:nth-child(2) { flex: 1; min-width: 0; }
.gs-row b { display: block; font-size: 14px; } .gs-row small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.gs-row small .i { color: var(--seal); }
.gs-badge { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--seal); background: var(--seal-soft); padding: 4px 9px; border-radius: 999px; flex: none; }
.mgf-gs[data-step="3"] .gs-row.you { background: #f7f8ff; box-shadow: inset 0 0 0 2px var(--navy-2), 0 10px 24px rgba(42, 48, 110, .14); }
.gs-you { position: absolute; top: -12px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--navy); }
.gs-row.you { position: relative; margin-top: 8px; }
/* plans */
.plan-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan.is-pop .pl-seat { color: rgba(220, 225, 255, .75); }
.plan-link { background: rgba(255, 255, 255, .45); border-style: dashed; border-color: rgba(42, 48, 110, .2); box-shadow: none; }
.plan-link .pl-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 14px; color: var(--navy); background: rgba(59, 69, 176, .08); font-size: 24px; }
.plan-link .pl-who { line-height: 1.55; }
.plan-link .btn .i { font-size: 18px; }
.credits-x { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 16px 18px; border-radius: 18px; font-size: 15px; color: var(--ink-2); background: rgba(59, 69, 176, .05); box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .1); }
.credits-x > .i { font-size: 20px; color: var(--navy-2); margin-top: 2px; }
.pill-offer.lt { color: #8a5a00; background: #fff4dc; box-shadow: inset 0 0 0 1px rgba(217, 138, 0, .25); }

/* ---------- firms: limits, access levels, applications, members, price ---------- */
.mgf-lm .mg { padding: 16px 16px 54px; }
.lm-panel { display: grid; gap: 10px; }
.lm-h { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.lm-pool { display: inline-flex; align-items: center; gap: 6px; font-family: "Inter", var(--font); font-size: 14px; font-weight: 700; color: var(--navy); background: rgba(59, 69, 176, .08); padding: 5px 11px; border-radius: 999px; }
.lm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lm-n b { display: block; font-size: 14.5px; } .lm-n small { display: block; font-size: 12px; color: var(--muted); }
.lm-bar { position: relative; height: 8px; border-radius: 8px; background: rgba(42, 48, 110, .08); }
.lm-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--navy-2), #8f9bff); transition: width .9s var(--ease); }
.lm-bar.tr .lm-fill { background: linear-gradient(90deg, #13a070, #7fe3bf); }
.mgf-lm[data-step="1"] .lm-bar.tr .lm-fill { width: var(--w0); }
.lm-knob { position: absolute; top: 50%; inset-inline-start: 100%; width: 18px; height: 18px; margin-inline-start: -9px; translate: 0 -50%; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 0 0 3px rgba(19, 160, 112, .35); }
.lm-v { text-align: end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.lm-v small { display: block; font-size: 11.5px; color: var(--muted); }
.lm-v b { display: inline-grid; font-family: "Inter", var(--font); font-size: 14px; }
.lm-v b > span { grid-area: 1 / 1; }
.lm-feat { padding: 12px 12px 10px; border-radius: 16px; background: rgba(59, 69, 176, .04); box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .08); }
.lm-feat > small { font-size: 12px; font-weight: 700; color: var(--muted); }
.lm-stack { display: flex; height: 12px; margin-top: 8px; border-radius: 6px; overflow: hidden; gap: 2px; }
.lm-stack i { width: var(--w); }
.lf1 { background: #3b45b0; } .lf2 { background: #6d77e0; } .lf3 { background: #13a070; } .lf4 { background: #d9a033; }
.lm-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.lm-leg span { display: inline-flex; align-items: center; gap: 6px; }
.lm-leg i { width: 9px; height: 9px; border-radius: 3px; }
.lm-leg b { font-family: "Inter", var(--font); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .lm-fill.on { animation: pm-grow 1s var(--ease) backwards; }
  .js .lm-feat.on .lm-stack i { animation: lm-seg .9s var(--ease) backwards; }
  .js .lm-feat.on .lm-stack i:nth-child(2) { animation-delay: .12s; } .js .lm-feat.on .lm-stack i:nth-child(3) { animation-delay: .24s; } .js .lm-feat.on .lm-stack i:nth-child(4) { animation-delay: .36s; }
  @keyframes lm-seg { from { width: 0; } }
  .js .lm-knob.on { animation: mg-pop .5s var(--spring-1) both; }
}
.acc-band { margin-top: 0; }
.acc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }
.acc-ctl { display: grid; gap: 8px; }
.acc-o { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 0; text-align: start; color: rgba(225, 230, 255, .8); background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .3s, color .3s, box-shadow .3s; }
.acc-o > .i { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.acc-o b { display: block; font-size: 16px; color: inherit; } .acc-o small { display: block; font-size: 13.5px; color: rgba(220, 225, 255, .68); }
.acc-o:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.acc-o[aria-checked="true"] { color: var(--navy); background: #fff; box-shadow: 0 16px 40px rgba(2, 4, 24, .4); }
.acc-o[aria-checked="true"] small { color: var(--muted); }
.acc-o[aria-checked="true"] > .i { color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.acc-o:active { transition-duration: 0s; transform: scale(.985); }
.acc-vis { display: grid; align-content: center; gap: 18px; padding: 26px; border-radius: 26px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.acc-doc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; color: var(--ink); background: #fffdf8; box-shadow: 0 20px 50px rgba(2, 4, 24, .45); }
.acc-doc > .i { font-size: 30px; color: #c2410c; flex: none; }
.acc-doc > span:nth-child(2) { flex: 1; min-width: 0; }
.acc-doc b { display: block; font-size: 15.5px; } .acc-doc small { display: block; font-size: 12.5px; color: var(--muted); }
.acc-lv { flex: none; font-size: 12.5px; font-weight: 700; color: var(--navy); background: rgba(59, 69, 176, .08); padding: 5px 11px; border-radius: 999px; }
.acc-l { font-size: 13px; font-weight: 700; color: rgba(220, 225, 255, .74); }
.acc-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.acc-p { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; text-align: center; color: rgba(225, 230, 255, .45);
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: color .4s, background-color .4s, box-shadow .4s, scale .5s var(--spring-1); }
.acc-p .pm-ava { width: 40px; height: 40px; opacity: .4; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.acc-p b { font-size: 13px; }
.acc-p > .i { font-size: 16px; opacity: 0; transition: opacity .3s; }
.acc-p.on { color: #fff; background: rgba(127, 227, 191, .1); box-shadow: inset 0 0 0 1px rgba(127, 227, 191, .35); }
.acc-p.on .pm-ava { opacity: 1; filter: none; }
.acc-p.on > .i { opacity: 1; color: #7fe3bf; }
.acc-p[data-k="c"] .pm-ava { background: linear-gradient(135deg, #8a5bd6, #4a2a86); }
@media (prefers-reduced-motion: no-preference) { .acc-p.on { animation: acc-on .5s var(--spring-1); } @keyframes acc-on { 40% { scale: 1.05; } } }
.mgf-ap .mg { padding: 16px 16px 54px; }
.ap-panel { display: grid; gap: 10px; }
.ap-h { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.ap-h .i { font-size: 20px; color: var(--navy-2); }
.ap-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ap-row .lm-n { flex: 1; }
.ap-row.sel { box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px rgba(34, 40, 110, .08); }
.ap-btn { display: inline-flex; align-items: center; height: 34px; padding-inline: 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.ap-row .ap-ok { position: absolute; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--seal); background: var(--seal-soft); padding: 6px 11px; border-radius: 10px; }
.ap-row:not(.sel) .ap-btn { opacity: .5; }
.ap-as { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--navy); background: rgba(59, 69, 176, .07); }
.ap-as .i { font-size: 18px; flex: none; }
.ap-as.pool { color: var(--seal); background: var(--seal-soft); }
@media (prefers-reduced-motion: no-preference) { .js .ap-btn.on { animation: mg-press .45s 1s both; } }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mini { margin: 0; padding: 8px 8px 14px; border-radius: 24px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(34, 40, 110, .1); }
.mini-v { position: relative; aspect-ratio: 16 / 9; border-radius: 17px; overflow: hidden; background: #e9ecf8; }
.mini-v video { width: 100%; height: 100%; object-fit: cover; }
.mini figcaption { display: flex; align-items: center; gap: 8px; padding: 12px 10px 0; font-weight: 700; font-size: 15.5px; }
.mini figcaption .i { font-size: 20px; color: var(--navy-2); }
.fpl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 18px; align-items: stretch; }
.calc { display: grid; align-content: start; gap: 20px; padding: 26px; border-radius: 28px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); }
.calc-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 19px; }
.calc-n { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.stepper { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 15px; background: rgba(42, 48, 110, .07); }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 0; display: grid; place-items: center; color: var(--navy); background: #fff; box-shadow: 0 2px 8px rgba(34, 40, 110, .12); transition: transform .4s var(--spring-1), opacity .2s; }
.stepper button:active { transition-duration: 0s; transform: scale(.92); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper button .i { font-size: 18px; }
.stepper output { min-width: 3ch; text-align: center; font-family: "Inter", var(--font); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-out { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.calc-out > div { display: grid; align-content: start; gap: 2px; padding: 16px; border-radius: 18px; background: rgba(59, 69, 176, .05); box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .08); }
.calc-out small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.calc-out b { font-family: "Inter", var(--font); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.calc-out b span + span { font-size: 15px; letter-spacing: 0; }
.calc-out > div:nth-child(2) b { font-size: 24px; }
.calc-out em { font-style: normal; font-size: 13px; color: var(--muted); }
.calc-out .calc-f { margin-top: 6px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.calc-tr { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font) !important; font-size: 15px !important; letter-spacing: 0 !important; color: var(--seal); }
.calc-tr .i { font-size: 20px; }
.calc .cycle { align-self: auto; }
.calc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.calc-foot > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.calc-foot .pay img { height: 24px; padding: 4px 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- trainees ---------- */
.ttiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ttile { position: relative; display: grid; align-content: start; gap: 10px; padding: 24px 22px; border-radius: 26px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(34, 40, 110, .09); }
.tt-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: var(--navy); background: rgba(59, 69, 176, .08); font-size: 25px; margin-bottom: 6px; }
.ttile h3 { font-size: 18.5px; font-weight: 700; }
.ttile p { color: var(--muted); font-size: 15px; }
.tt-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--seal); background: var(--seal-soft); }
.tt-big { font-family: "Inter", var(--font); font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.ttile:last-child { background: linear-gradient(180deg, #1d2257, #12153b); color: #fff; border-color: rgba(255, 255, 255, .1); box-shadow: 0 26px 60px rgba(18, 21, 59, .3); }
.ttile:last-child p { color: rgba(220, 225, 255, .78); }
.ttile:last-child .tt-ic { color: #ffd479; background: rgba(255, 212, 121, .12); }
.ttile:last-child .tt-big { color: #ffd479; }
.mgf-wp .mg { display: grid; gap: 14px; }
.wp-lane { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.wp-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.wp-k .i { font-size: 17px; }
.wp-row { display: grid; justify-items: start; gap: 4px; }
.wp-s { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 13px; font-size: 14px; font-weight: 700; color: var(--navy); background: rgba(59, 69, 176, .07); box-shadow: inset 0 0 0 1px rgba(59, 69, 176, .12); }
.wp-s .i { font-size: 18px; }
.wp-s.first { color: var(--seal); background: var(--seal-soft); box-shadow: inset 0 0 0 1px rgba(14, 122, 85, .22); }
.wp-s em { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11.5px; color: #fff; background: var(--navy-2); }
.wp-s.first em { background: var(--seal); }
.wp-s.mine { color: #8a5a00; background: #fff4dc; box-shadow: inset 0 0 0 1px rgba(217, 138, 0, .25); }
.wp-ar { display: inline-grid; margin-inline-start: 22px; color: var(--faint); font-style: normal; }
.plan-free { background: rgba(255, 255, 255, .7); }
.plan-free .pl-price b { color: var(--seal); }

/* ---------- end: buttons instead of the composer ---------- */
.end-act { grid-template-columns: minmax(0, 1fr) auto; }
.end-btns { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: flex-end; }

/* ---------- scroll reveals (the home's "rise"), only where the browser links them to scroll ---------- */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise2 { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: none; } }
    /* cards full of small text slide in without fading, so they are never translucent while read */
    @keyframes rise3 { from { transform: translateY(40px) scale(.98); } to { transform: none; } }
    @keyframes lift2 { to { translate: 0 -48px; } }
    .tile, .flist li, .ttile, .vg-stage, .calc, .fpl .plan, .acc-o, .acc-vis, .mini, .bsum, .credits-x, .w-ticks li, .tx-note {
      animation: rise2 linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
    .tile, .ttile, .vg-stage, .calc, .bsum, .acc-vis { animation-name: rise3; }
    .tile.t5, .ttile:nth-child(2), .flist li:nth-child(2), .mini:nth-child(2), .acc-o:nth-child(2) { animation-range: entry 10% cover 30%; }
    .ttile:nth-child(3), .flist li:nth-child(3), .mini:nth-child(3), .acc-o:nth-child(3) { animation-range: entry 16% cover 34%; }
    .ttile:nth-child(4), .flist li:nth-child(4), .acc-o:nth-child(4) { animation-range: entry 22% cover 38%; }
    .jr-steps.n4::before, .jr-steps.n5::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .ahero .mgf { animation: lift2 linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .aud-sw { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .mg-sheet .mg, .an-card, .tile:not(.tile-night), .ttile:not(:last-child), .calc, .bsum, .mini, .vg-stage .mg { background: #fff !important; }
  .aud-sw { background: #1b1f52; }
}
@media (prefers-contrast: more) {
  .tile, .ttile, .calc, .bsum, .mini, .acc-o, .an-card, .vg-stage .mg, .mg-sheet .mg { box-shadow: 0 0 0 1.5px var(--ink) !important; }
  .aud-sw a { color: #fff; }
  .flist li > span, .tile-tx p, .ttile p { color: var(--ink-2) !important; }
}

/* ---------- compact desktops (1280x600, 1536x730) ---------- */
@media (min-width: 1024px) and (max-width: 1439.98px), (min-width: 1024px) and (max-height: 819.98px) {
  .ahero { min-height: 0; }
  .ahero h1 { font-size: clamp(34px, 3.2vw, 46px); }
  :root:lang(ar) .ahero h1 { font-size: clamp(32px, 3vw, 42px); }
  .aud-sw { margin-bottom: 18px; }
  .ahero .hero-cta { margin-top: 22px; }
  .cj-view { height: 252px; }
}
@media (min-width: 1024px) and (max-height: 699.98px) {
  .ahero .proof { display: none; }
  .ahero .lead { font-size: 16px; }
  .aud-sw a { height: 32px; font-size: 13.5px; }
  .cj-view { height: 236px; }
  .mg-sheet .mg { padding: 14px 14px 50px; }
  .cj-sc { gap: 8px; }
  .an-q { margin-top: 10px; }
  .an-body { min-height: 142px; }
}

/* ---------- tablets ---------- */
@media (max-width: 1023.98px) {
  .ahero .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ahero .guil { top: calc(72% - 380px); }
  .ahero .mgf { width: 100%; max-width: 620px; justify-self: center; }
  .cb { grid-template-columns: 1fr 1fr; }
  .tile.t7, .tile.t5 { grid-column: span 1; }
  .tile.t12 { grid-column: 1 / -1; }
  .tile-lib { grid-template-columns: auto minmax(0, 1fr); }
  .tile-lib .lib-k, .tile-lib .link { grid-column: 1 / -1; }
  .jr-steps.n4, .jr-steps.n5 { grid-template-columns: 1fr; }
  .split.rev > .vg-stage { order: 2; }
  .plan-grid.n3 { grid-template-columns: 1fr 1fr; }
  .plan-grid.n3 .plan-link { grid-column: 1 / -1; }
  .acc { grid-template-columns: 1fr; }
  .minis { grid-template-columns: 1fr 1fr; }
  .fpl { grid-template-columns: 1fr; }
  .ttiles { grid-template-columns: 1fr 1fr; }
  .end-act { grid-template-columns: 1fr; }
  .end-btns { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .cb { grid-template-columns: 1fr; }
  .tile.t7, .tile.t5, .tile.t12 { grid-column: 1 / -1; }
}

/* ---------- phones ---------- */
@media (max-width: 639.98px) {
  .aud-sw { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .aud-sw a { justify-content: center; padding-inline: 8px; }
  .ahero h1 { font-size: 31px; }
  :root:lang(ar) .ahero h1 { font-size: 29px; }
  .ahero .hero-cta .btn { flex: 1 1 100%; }
  .tile { padding: 18px; border-radius: 24px; }
  .tile h3 { font-size: 19px; }
  .cj-n em { font-size: 10.5px; }
  .cj-n i { width: 32px; height: 32px; }
  .cj-line { top: 17px; }
  .cj-view { height: 300px; }
  .cj-pay { flex-direction: column; align-items: stretch; }
  .an-q { margin-inline-start: 6%; }
  .pool-c b { font-size: 16px; }
  .pool-c small { display: none; }
  .pool-own { font-size: 11px; padding: 3px 8px; top: 0; }
  .cp-toast { position: relative; inset: auto; margin-top: 12px; }
  .pm-n b { font-size: 13px; }
  .pm-l { font-size: 10.5px; }
  .pool-req { font-size: 12px; }
  .pool-msg { height: 64px; }
  .es-flow { flex-direction: column; align-items: flex-start; }
  .es-fork { margin-inline-start: 14px; padding-inline-start: 30px; }
  .es-fork::after { top: -12px; height: 12px; width: 2px; inset-inline-start: 16px; }
  .cp-page { grid-template-columns: 1fr; }
  .cp-hear { width: auto; justify-items: start; grid-template-columns: auto 1fr; align-items: center; text-align: start; }
  .cp-body { min-height: 132px; }
  .lm-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lm-bar { grid-column: 1 / -1; grid-row: 2; }
  .acc-people { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .acc-p { padding: 10px 2px; }
  .acc-p .pm-ava { width: 34px; height: 34px; }
  .acc-p b { font-size: 11.5px; }
  .acc-vis { padding: 16px; }
  .acc-doc { flex-wrap: wrap; }
  .minis { grid-template-columns: 1fr; }
  .plan-grid.n3, .plan-grid.n2 { grid-template-columns: 1fr; }
  .calc { padding: 18px; }
  .calc-out { grid-template-columns: 1fr 1fr; }
  .calc-out > div:first-child { grid-column: 1 / -1; }
  .ttiles { grid-template-columns: 1fr; }
  .tj-feed { height: 74px; }
  .tj-wal { grid-template-columns: 1fr; }
  .bsum { padding: 16px; }
  .tile-lib { grid-template-columns: 1fr; }
}