@font-face{font-family:Rubik;font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/rubik-arabic-500-normal.soGt7v5W.woff2) format("woff2"),url(../fonts/rubik-arabic-500-normal.DNk3Rzpj.woff) format("woff")}
@font-face{font-family:Rubik;font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/rubik-arabic-700-normal.DNWlnGaX.woff2) format("woff2"),url(../fonts/rubik-arabic-700-normal.BJDbbalN.woff) format("woff")}
@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.CyU-ddYS.woff2) format("woff2"),url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.EA1o-u_Q.woff) format("woff")}
@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.0pRdybE_.woff2) format("woff2"),url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.MJZ0liF5.woff) format("woff")}
:root{--ink: #0f1729;--ink-soft: #1b2436;--graphite: #55617a;--muted: #5e6a80;--canvas: #f2f4f7;--paper: #ffffff;--parchment: #f2f4f7;--hairline: #e2e6ec;--turquoise: #0e9594;--turquoise-deep: #0a6f6e;--clay: #c1666b;--clay-text: #9c3f45;--indigo: #4f46e5;--amber: #e8a33d;--spectrum: linear-gradient( to left, #4f46e5 0%, #0e9594 42%, #7fa83c 72%, #e8a33d 100% );--display: "Rubik", system-ui, sans-serif;--body: "IBM Plex Sans Arabic", system-ui, sans-serif;--measure: 38rem;--wide: 74rem;--r-sm: 8px;--r-md: 14px;--r-lg: 22px;--shadow-sm: 0 1px 2px rgb(15 23 41 / .05);--shadow-md: 0 4px 16px -4px rgb(15 23 41 / .1), 0 2px 6px -2px rgb(15 23 41 / .06);--shadow-lg: 0 18px 48px -12px rgb(15 23 41 / .18);--pad-x: clamp(1.1rem, 5vw, 2rem)}
*,*:before,*:after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.2;text-wrap:balance;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.25rem)}
h2{font-size:clamp(1.4rem,3vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--turquoise-deep);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px;border-radius:3px}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:1rem;top:1rem;z-index:20;background:var(--paper);padding:.6rem 1.1rem;border-radius:var(--r-sm);box-shadow:var(--shadow-md)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand__mark{inline-size:30px;block-size:30px;flex:none;border-radius:7px}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.masthead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(12px);border-block-end:1px solid var(--hairline)}
.masthead__inner{max-inline-size:var(--wide);margin-inline:auto;padding:.85rem var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;font-size:.92rem;font-weight:600;color:var(--graphite);text-decoration:none;padding:.45rem .7rem;border-radius:999px}
.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
@media(max-width:47.99em){.masthead__inner{flex-direction:column;align-items:stretch;gap:.6rem;padding-block:.7rem}.nav{margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x)}}
.wrap{max-inline-size:var(--measure);margin-inline:auto;padding:clamp(1.75rem,5vw,3.5rem) var(--pad-x) 4rem}
.wrap--wide{max-inline-size:var(--wide)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.06em;color:var(--turquoise-deep);margin:0 0 .85rem}
.tier-viral .eyebrow,.tier-viral a:not(.btn):not(.card){color:var(--clay-text)}
.lede{font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--graphite);max-inline-size:46ch}
.spectrum{block-size:6px;border-radius:999px;background:var(--spectrum)}
.btn,.btn:link,.btn:visited{color:var(--paper)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:600;font-size:1.02rem;padding:.85rem 1.9rem;min-block-size:48px;border:0;border-radius:999px;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.btn:hover{background:var(--turquoise-deep);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.footer{background:var(--ink);color:#c3cbd9;margin-block-start:4rem}
.footer__inner{max-inline-size:var(--wide);margin-inline:auto;padding:2.75rem var(--pad-x) 3rem;display:grid;gap:1.1rem}
.brand--footer,.brand--footer .brand__name{color:var(--paper)}
.footer__disclaimer{margin:0;font-size:.93rem;max-inline-size:46ch}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer__nav a{color:#c3cbd9;font-size:.93rem;text-decoration:none}
.footer__nav a:hover{color:var(--paper);text-decoration:underline}
@media(min-width:48em){.footer__inner{grid-template-columns:auto 1fr auto;align-items:center;gap:2.5rem}}
.stage{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:clamp(1.1rem,3vw,2rem)}
.stage__bar{display:flex;align-items:center;gap:1rem;margin-block-end:clamp(1.25rem,3vw,2rem)}
.stage__track{flex:1;block-size:8px;border-radius:999px;background:var(--canvas);overflow:hidden}
.stage__fill{block-size:100%;inline-size:0;background:var(--spectrum);transition:inline-size .3s ease}
.stage__count{margin:0;font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap}
.items{list-style:none;margin:0;padding:0}
.items--wizard{min-block-size:17rem;display:grid}
.items--wizard .item{grid-area:1 / 1;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
.items--wizard .item--on{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.item__num{font-family:var(--display);font-size:.8rem;font-weight:600;color:var(--turquoise-deep);margin:0 0 .9rem}
.item__num span{color:var(--muted);font-weight:500}
.field{border:0;margin:0;padding:0;inline-size:100%}
.item__text{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,1.75rem);font-weight:700;line-height:1.35;letter-spacing:-.015em;padding:0;margin-block-end:1.5rem;text-wrap:balance}
.choices{display:grid;gap:.6rem}
.choice{display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem;background:var(--canvas);border:1.5px solid transparent;border-radius:var(--r-md);cursor:pointer;min-block-size:56px;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.choice:hover{background:color-mix(in srgb,var(--ink) 5%,var(--canvas));transform:translate(-2px)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice__key{flex:none;inline-size:26px;block-size:26px;display:grid;place-items:center;border-radius:7px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hairline);font-family:var(--display);font-size:.8rem;font-weight:600;color:var(--muted)}
.choice__text{line-height:1.5}
.choice:has(input:checked){background:var(--paper);border-color:var(--ink);box-shadow:var(--shadow-sm)}
.choice:has(input:checked) .choice__key{background:var(--ink);color:var(--paper);box-shadow:none}
.choice:has(input:focus-visible){outline:3px solid var(--turquoise);outline-offset:2px}
.error{color:var(--clay);font-weight:600;margin-block:1rem 0}
.controls{display:flex;align-items:center;gap:.75rem;margin-block-start:clamp(1.5rem,3vw,2.25rem);padding-block-start:1.25rem;border-block-start:1px solid var(--hairline)}
.ctl{font-family:var(--display);font-weight:600;font-size:.98rem;padding:.7rem 1.5rem;min-block-size:48px;border-radius:999px;border:1.5px solid var(--hairline);background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color .14s ease,background .14s ease}
.ctl:hover:not(:disabled){border-color:var(--ink)}
.ctl:disabled{opacity:.4;cursor:not-allowed}
.ctl--next{margin-inline-start:auto;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ctl--next:hover:not(:disabled){background:var(--turquoise-deep);border-color:var(--turquoise-deep)}
.ctl--done{margin-inline-start:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.media{display:grid;place-items:center;block-size:min(272px,68vw);overflow:hidden;margin-block:.5rem 1.5rem}
.media svg{max-inline-size:min(272px,68vw);max-block-size:100%;inline-size:auto;block-size:auto}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.opt__face{display:grid;place-items:center;gap:.15rem;min-inline-size:56px;min-block-size:56px;padding:.4rem .9rem;background:var(--canvas);border:1.5px solid transparent;border-radius:var(--r-md);font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);transition:background .14s ease,border-color .14s ease,transform .12s ease}
.opt:hover .opt__face{background:color-mix(in srgb,var(--ink) 6%,var(--canvas))}
.opt:active .opt__face{transform:scale(.97)}
.opt input:checked+.opt__face{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:focus-visible+.opt__face{outline:3px solid var(--turquoise);outline-offset:3px}
.opt__face svg{inline-size:22px;block-size:22px;fill:currentColor}
.opt__word{font-size:.78rem;font-weight:600;opacity:.75}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,60px));gap:.5rem;justify-content:center}
.opts .opt[data-key=none]{grid-column:1 / -1}
.opts .opt[data-key=none] .opt__face{min-inline-size:0;font-size:.9rem;background:transparent;border-color:var(--hairline);color:var(--graphite)}
.opts .opt[data-key=none] input:checked+.opt__face{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dirpad{direction:ltr;display:grid;grid-template-areas:".    up    ." "left none  right" ".    down  .";gap:.5rem;justify-content:center;align-items:center}
.dirpad .opt[data-dir=up]{grid-area:up}
.dirpad .opt[data-dir=right]{grid-area:right}
.dirpad .opt[data-dir=down]{grid-area:down}
.dirpad .opt[data-dir=left]{grid-area:left}
.dirpad .opt[data-dir=none]{grid-area:none}
.dirpad .opt[data-dir=none] .opt__face{min-inline-size:0;min-block-size:44px;padding:.3rem .5rem;font-size:.78rem;background:transparent;border-color:var(--hairline);color:var(--graphite);text-align:center;line-height:1.25}
.dirpad .opt[data-dir=none] input:checked+.opt__face{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ad{min-block-size:90px;margin-block:2.25rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}