@font-face{font-family:PulseArabic;src:url('arabic-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PulseArabic;src:url('arabic-semibold.ttf') format('truetype');font-weight:600 800;font-display:swap}
.download-card .play-download-option{margin-top:20px;padding-top:18px;border-top:1px solid #a8bd7145}
.download-card .play-download-option .platform-button{margin-top:0;background:transparent;color:var(--lime);border-color:#a8bd71;white-space:normal;line-height:1.6}
.download-card .play-download-option .platform-button:hover{background:#d8ed9817}
.download-card .play-download-option small{display:block;margin-top:9px}
#play-enrollment{width:min(720px,calc(100% - 24px));max-width:720px;max-height:90vh;max-height:90dvh;padding:0;overflow:auto;overscroll-behavior:contain;text-align:right;font-family:PulseArabic,Manrope,Arial,sans-serif}
#play-enrollment[open]{animation:play-enter .18s ease-out}
#play-enrollment .play-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line);padding:16px 24px;gap:16px}
#play-enrollment .play-brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;color:var(--muted)}
#play-enrollment .play-brand img{width:84px;height:auto}
#play-enrollment .play-close{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:transparent;font:26px/1 Arial,sans-serif;flex:none}
#play-enrollment .play-body{padding:24px 30px 30px}
#play-enrollment .play-kicker{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:600;color:var(--muted)}
#play-enrollment .play-kicker span{width:24px;height:24px;border-radius:50%;background:var(--lime);color:var(--ink);display:inline-grid;place-items:center}
#play-enrollment h2{font:600 clamp(24px,4vw,32px)/1.5 PulseArabic,Arial,sans-serif;letter-spacing:0;margin:10px 0}
#play-enrollment h3{font-size:23px;font-weight:600;line-height:1.6;margin:8px 0;letter-spacing:0}
#play-enrollment p{font-size:15px;line-height:1.85;color:var(--muted)}
#play-enrollment strong{color:var(--ink);font-weight:600}
#play-enrollment .play-guide{margin:20px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
#play-enrollment .play-guide-image{position:relative;line-height:0;aspect-ratio:1000/350;overflow:hidden}
#play-enrollment .play-guide img{display:block;width:100%;height:auto}
/* Annotation sits over the original screenshot; percentage coordinates scale with it. */
#play-enrollment .play-guide-highlight{position:absolute;left:30.1%;top:34.75%;width:31.4%;height:20.9%;border:3px solid #d92d20;border-radius:8px;box-shadow:0 0 0 3px #fff9;pointer-events:none}
#play-enrollment .play-guide figcaption{padding:12px 16px;background:#fff4ed;color:var(--ink);font-size:13px;line-height:1.8;border-top:1px solid #f1d8c9}
#play-enrollment .play-actions{display:grid;gap:10px;margin-top:20px}
#play-enrollment .play-action{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 18px;border:1px solid var(--ink);border-radius:9px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;text-align:center;line-height:1.6}
#play-enrollment .play-action:hover{background:#4b2f60}
#play-enrollment .play-hint{font-size:13px;text-align:center}
#play-enrollment .play-next{margin-top:24px;padding:22px;border:1px solid #b8ca8b;background:#edf3db;border-radius:12px;scroll-margin-block:90px 20px}
#play-enrollment .play-next[hidden]{display:none}
#play-enrollment .play-next .play-action{margin-top:18px}
#play-enrollment .play-next p+p{margin-top:10px}
#play-enrollment .play-help{margin-top:18px;color:var(--muted);font-size:13px;line-height:1.8}
#play-enrollment .play-help summary{cursor:pointer;color:var(--ink);font-weight:600;padding-block:8px}
#play-enrollment .play-help p{font-size:13px;margin-top:8px}
#play-enrollment .play-help a{text-decoration:underline;text-underline-offset:3px}
#play-enrollment .play-existing{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px}
@keyframes play-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){#play-enrollment .play-header{padding:12px 16px}#play-enrollment .play-body{padding:20px 18px}#play-enrollment p{font-size:14px}#play-enrollment .play-next{padding:16px}#play-enrollment .play-guide-highlight{border-width:2px;box-shadow:0 0 0 1px #fff9}#play-enrollment .play-brand{font-size:10px}#play-enrollment .play-brand img{width:72px}}
@media(prefers-reduced-motion:reduce){#play-enrollment[open]{animation:none}}
