/* Educational Video service page */
:root { --pk: #FF0A7A; --vi: #8B5CF6; --ok: #2BD99F; }

/* ---------- hero: a lesson playing ---------- */
.ev-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 65% at 74% 50%, rgb(139 92 246 / .18), transparent 70%), radial-gradient(40% 50% at 70% 64%, rgb(255 10 122 / .12), transparent 70%), linear-gradient(180deg, #08060a, #050405 70%); }
.ev-hero > .wrap { width: 100%; }
.ev-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: calc(var(--hd, 72px) + 40px); padding-bottom: 100px; }
.ev-h1 { font: 900 clamp(3.2rem, 7.6vw, 7.6rem)/.9 var(--f-display); letter-spacing: -0.04em; text-wrap: balance; }
.ev-h1 em { font-style: normal; background: linear-gradient(100deg, var(--pk) 10%, #c04dff 60%, var(--vi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-lede { margin-top: 24px; font-size: var(--t-m); line-height: 1.4; color: var(--fg-2); max-width: 440px; }
.ev-hero .actions { margin-top: 32px; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.ev-tags li { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); padding: 9px 12px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; background: rgb(13 11 12 / .5); }

.ev-hplayer { position: relative; border-radius: 22px; padding: 12px; background: linear-gradient(150deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02)); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .9), 0 0 120px -30px rgb(255 10 122 / .35); transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transition: transform 1.2s var(--ease); }
.ev-hplayer:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.ev-hscreen { position: relative; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: #0c0a0f; }
.ev-hscreen img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; animation: ev-kb 18s var(--ease) infinite alternate; }
@keyframes ev-kb { to { transform: scale(1.08) translateX(-2%); } }
.ev-hscreen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .72), transparent 42%); }
.ev-hlive { position: absolute; left: 16px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; background: rgb(13 11 12 / .62); font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ev-hlive i { width: 7px; height: 7px; border-radius: 50%; background: var(--pk); animation: ev-blink 1.6s ease-in-out infinite; }
@keyframes ev-blink { 50% { opacity: .25; } }
.ev-hcap { position: absolute; left: 50%; bottom: 18px; z-index: 2; translate: -50% 0; width: max-content; max-width: 86%; padding: 8px 14px; border-radius: 8px; background: rgb(0 0 0 / .66); color: #fff; font: 600 clamp(13px, 1.1vw, 16px)/1.35 var(--f-body); text-align: center; transition: opacity .35s var(--ease); }
.ev-hcap.swap { opacity: 0; }
.ev-hquiz, .ev-quiz { position: absolute; right: 16px; top: 50%; z-index: 3; width: min(220px, 42%); padding: 14px; border-radius: 14px; background: rgb(255 255 255 / .94); color: #121016; display: grid; gap: 8px; translate: 0 -50%; opacity: 0; scale: .9; transition: opacity .45s var(--ease), scale .45s var(--ease); pointer-events: none; }
.ev-hquiz.on, .ev-quiz.on { opacity: 1; scale: 1; }
.ev-hquiz small, .ev-quiz small { font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pk); }
.ev-hquiz span, .ev-quiz span { height: 26px; border-radius: 7px; border: 1.5px solid rgb(18 16 22 / .14); position: relative; transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.ev-hquiz span::before, .ev-quiz span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 52%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgb(18 16 22 / .18); }
.ev-hquiz.done .ok, .ev-quiz.done .ok { background: color-mix(in oklab, var(--ok) 22%, #fff); border-color: var(--ok); }
.ev-hquiz.done .ok::after, .ev-quiz.done .ok::after { content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 5px; margin-top: -4px; border: solid #0d8a62; border-width: 0 0 2.5px 2.5px; rotate: -45deg; }
.ev-hbar { display: grid; grid-template-columns: 1fr 2fr 2.4fr 1.2fr 1.6fr; gap: 4px; margin-top: 12px; }
.ev-hbar i { height: 5px; border-radius: 3px; background: rgb(255 255 255 / .14); position: relative; overflow: hidden; }
.ev-hbar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--vi), var(--pk)); transform: scaleX(var(--f, 0)); transform-origin: left; }
.ev-hmeta, .ev-pmeta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.ev-hmeta span:first-child { color: #fff; }

/* ---------- the problem line ---------- */
.ev-prob { padding-block: clamp(80px, 14vh, 160px); }
.ev-prob-t { font: 700 var(--t-xl)/1.15 var(--f-display); letter-spacing: -0.025em; max-width: 24ch; text-wrap: balance; }
.ev-prob-t s { text-decoration: none; position: relative; color: var(--fg-3); }
.ev-prob-t s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: 4px; border-radius: 4px; background: var(--pk); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .6s; }
.ev-prob-t.is-in s::after, .still .ev-prob-t s::after { transform: scaleX(1); }

/* ---------- pinned story ---------- */
.ev-story { position: relative; border-top: 1px solid var(--rule-soft); background: radial-gradient(60% 60% at 75% 50%, oklch(0.2 0.07 320 / .55), transparent 70%), var(--ink-0); }
.motion .ev-story { height: 380vh; }
.ev-story-stage { padding-block: clamp(80px, 12vh, 140px); }
.motion .ev-story-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-block: calc(var(--hd, 72px) + 20px) 40px; }
.ev-story-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ev-steps { margin: 36px 0 0; display: grid; gap: 4px; }
.ev-steps li { display: grid; grid-template-columns: 10px 1fr; gap: 18px; padding: 14px 0 14px 18px; border-left: 2px solid rgb(255 255 255 / .12); opacity: .38; transition: opacity .5s var(--ease), border-color .5s var(--ease); cursor: pointer; }
.ev-steps li.on { opacity: 1; border-color: var(--pk); }
.ev-steps li:hover { opacity: .75; } .ev-steps li.on:hover { opacity: 1; }
.ev-steps li:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; opacity: 1; }
.ev-steps span { width: 8px; height: 8px; margin-top: .55em; background: var(--fg-3); transition: background-color .4s var(--ease); }
.ev-steps li.on span { background: var(--pk); }
.ev-steps h3 { font: 700 var(--t-m)/1.2 var(--f-display); margin-bottom: 4px; }
.ev-steps p { color: var(--fg-2); line-height: 1.45; max-width: 38ch; }
.ev-prog { margin-top: 28px; height: 2px; background: rgb(255 255 255 / .1); border-radius: 2px; overflow: hidden; max-width: 360px; }
.ev-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--vi), var(--pk)); transform: scaleX(var(--p, .25)); transform-origin: left; transition: transform .3s linear; }
.ev-story-vis { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 1px solid var(--rule-soft); background: var(--ink-1); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .85); }
.ev-shot { position: absolute; inset: 0; margin: 0; opacity: 0; clip-path: inset(0 0 0 100%); transform: scale(1.08); transition: opacity .6s var(--ease), clip-path 1.1s var(--ease), transform 1.6s var(--ease); }
.ev-shot.on { opacity: 1; clip-path: inset(0); transform: none; z-index: 1; }
.ev-shot img { width: 100%; height: 100%; object-fit: cover; }
.still .ev-shot { position: relative; opacity: 1; transform: none; clip-path: none; }
.still .ev-story-vis { aspect-ratio: auto; display: grid; gap: 12px; background: none; border: 0; box-shadow: none; }
.still .ev-prog { display: none; }

/* ---------- try it: the lesson lab ---------- */
.ev-try { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; }
.ev-try-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.ev-note { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.ev-lab { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ev-ctrl { display: grid; gap: 22px; align-content: start; }
.ev-field { display: grid; gap: 10px; }
.ev-field > span { font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.ev-field input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--ink-1); color: #fff; font: 700 var(--t-s, 1.1rem)/1.2 var(--f-display); }
.ev-field input:focus { outline: 2px solid var(--pk); outline-offset: 2px; }
.ev-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; border: 1px solid var(--rule-soft); background: var(--ink-1); width: fit-content; max-width: 100%; }
.ev-seg button { padding: 11px 16px; border: 0; border-radius: 10px; background: none; color: var(--fg-2); font: 600 var(--t-xs)/1 var(--f-body); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.ev-seg button:hover { color: #fff; }
.ev-seg button[aria-pressed="true"] { background: var(--pk); color: #fff; }
.ev-seg button:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }

.ev-stage { position: relative; display: grid; gap: 22px; }
.ev-stage::before { content: ""; position: absolute; top: -10%; left: 50%; width: 110%; aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(255 10 122 / .22), transparent); pointer-events: none; z-index: -1; }
.ev-player { border-radius: 20px; padding: 10px; background: var(--ink-1); border: 1px solid var(--rule-soft); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .85); }
.ev-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: radial-gradient(90% 90% at 70% 30%, #2a0f3a, #0c0a0f 70%); }
.ev-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .7), transparent 40%); pointer-events: none; }
.ev-pres, .ev-anim, .ev-ui { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.ev-pres { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.ev-player[data-style="presenter"] .ev-pres, .ev-player[data-style="anim"] .ev-anim, .ev-player[data-style="screen"] .ev-ui { opacity: 1; }
/* animation style: shapes that build a diagram */
.ev-anim i { position: absolute; top: 34%; width: 16%; aspect-ratio: 1; border-radius: 22%; border: 2px solid rgb(255 255 255 / .7); background: rgb(255 255 255 / .04); }
.ev-anim i:nth-child(1) { left: 16%; } .ev-anim i:nth-child(2) { left: 42%; border-color: var(--pk); background: rgb(255 10 122 / .16); } .ev-anim i:nth-child(3) { left: 68%; border-radius: 50%; }
.ev-anim b { position: absolute; left: 24%; right: 24%; top: 43%; height: 2px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .6) 0 8px, transparent 8px 14px); }
.ev-player.playing[data-style="anim"] .ev-anim i { animation: ev-pop 2.4s var(--ease) infinite; }
.ev-player.playing[data-style="anim"] .ev-anim i:nth-child(2) { animation-delay: .3s; } .ev-player.playing[data-style="anim"] .ev-anim i:nth-child(3) { animation-delay: .6s; }
@keyframes ev-pop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10%) scale(1.06); } }
/* screen walkthrough style: an app with a moving cursor */
.ev-ui { display: grid; grid-template-columns: 22% 1fr; gap: 3%; padding: 6% 6% 18%; }
.ev-ui-side, .ev-ui-main { border-radius: 10px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); padding: 10%; display: grid; align-content: start; gap: 12%; }
.ev-ui-main { padding: 5%; gap: 8%; }
.ev-ui i { display: block; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .16); }
.ev-ui-main i:nth-child(1) { width: 60%; height: 12px; background: rgb(255 255 255 / .3); } .ev-ui-main i:nth-child(2) { width: 90%; } .ev-ui-main i:nth-child(3) { width: 75%; }
.ev-ui u { display: block; width: 34%; height: 26px; border-radius: 8px; background: var(--pk); margin-top: 4%; }
.ev-cursor { position: absolute; left: 30%; top: 30%; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; rotate: -30deg; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .6)); }
.ev-player.playing[data-style="screen"] .ev-cursor { animation: ev-cur 4s var(--ease) infinite; }
@keyframes ev-cur { 0% { left: 20%; top: 30%; } 45% { left: 40%; top: 62%; } 55% { left: 40%; top: 62%; scale: .8; } 65% { scale: 1; } 100% { left: 20%; top: 30%; } }

.ev-title { position: absolute; left: 5%; top: 7%; z-index: 2; max-width: 62%; padding: 10px 14px; border-radius: 10px; background: rgb(13 11 12 / .72); font: 700 clamp(14px, 1.4vw, 20px)/1.2 var(--f-display); color: #fff; }
.ev-cap { position: absolute; left: 50%; bottom: 7%; z-index: 2; translate: -50% 0; width: max-content; max-width: 88%; padding: 8px 14px; border-radius: 8px; background: rgb(0 0 0 / .7); color: #fff; font: 600 clamp(12px, 1.1vw, 15px)/1.4 var(--f-body); text-align: center; transition: opacity .3s var(--ease); }
.ev-cap:empty { opacity: 0; }
.ev-cap[dir="rtl"], .ev-title[dir="rtl"] { font-family: "Noto Kufi Arabic", "Geeza Pro", var(--f-body); }
.ev-title[dir="rtl"] { left: auto; right: 5%; }
.ev-play { position: absolute; left: 50%; top: 50%; z-index: 4; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; border: 0; background: var(--pk); cursor: pointer; box-shadow: 0 16px 40px -10px var(--pk); transition: scale .3s var(--ease), opacity .3s var(--ease); }
.ev-play:hover { scale: 1.08; }
.ev-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ev-play i { position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.ev-player.playing .ev-play { opacity: 0; pointer-events: none; }
.ev-bar { display: flex; gap: 4px; margin-top: 10px; }
.ev-bar i { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .14); position: relative; overflow: hidden; transition: flex-grow .5s var(--ease); }
.ev-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--vi), var(--pk)); transform: scaleX(var(--f, 0)); transform-origin: left; }
[dir="rtl"] .ev-bar i::after { transform-origin: right; }
.ev-pmeta span:first-child { color: #fff; }
.ev-chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ev-chapters li { padding: 14px; border-radius: 12px; border: 1px solid var(--rule-soft); background: var(--ink-1); transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.ev-chapters li.on { border-color: var(--pk); background: rgb(255 10 122 / .08); }
.ev-chapters b { display: block; font: 700 var(--t-xs)/1.25 var(--f-display); }
.ev-chapters small { display: block; margin-top: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--fg-3); }

/* ---------- videos we make: carousel ---------- */
.ev-kinds { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; }
.ev-kinds-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 56px); }
.ev-nav { display: flex; gap: 10px; }
.ev-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--fg); font-size: 20px; cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.ev-btn:hover { background: var(--pk); border-color: var(--pk); }
.ev-btn:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }
.ev-track { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad) 8px; scroll-padding-inline: var(--pad); cursor: grab; }
.ev-track::-webkit-scrollbar { display: none; }
.ev-track:focus-visible { outline: 2px solid var(--pk); outline-offset: -2px; }
.ev-track.drag { cursor: grabbing; scroll-snap-type: none; }
.ev-track.drag .ev-card { pointer-events: none; }
.ev-card { position: relative; flex: 0 0 clamp(270px, 29vw, 440px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--rule-soft); transition: border-color .5s var(--ease); }
.ev-card:hover { border-color: var(--rule); }
.ev-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; user-select: none; }
.ev-card:hover img { transform: scale(1.06); }
.ev-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .1) 48%, transparent 66%); }
.ev-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 30px); }
.ev-card h3 { font: 700 var(--t-l)/1.08 var(--f-display); margin: 0 0 8px; }
.ev-card p { color: var(--fg-2); line-height: 1.45; max-width: 28ch; }

/* faq + closing */
.sv-faq { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sv-faq summary:focus-visible { outline: 2px solid var(--pk); outline-offset: 4px; }
.sv-faq details p { max-width: 66ch; }
.closing .closing-copy .body { color: var(--fg); text-shadow: 0 1px 18px rgb(0 0 0 / .75); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) { .ev-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ev-hero-in, .ev-story-grid, .ev-lab { grid-template-columns: minmax(0, 1fr); }
  .ev-hplayer { transform: none; }
  .ev-stage { order: -1; }
  .motion .ev-story { height: auto; }
  .motion .ev-story-stage { position: relative; height: auto; padding-block: clamp(80px, 12vh, 140px); }
}
@media (max-width: 767px) {
  .ev-hero-in { padding-bottom: 72px; }
  .ev-seg button { min-height: 44px; padding: 0 14px; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .close-alt .link { min-height: 44px; display: inline-flex; align-items: center; }
  .sv-faq summary { min-height: 44px; align-items: center; }
  .ev-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-hquiz, .ev-quiz { width: 46%; padding: 10px; gap: 6px; }
  .ev-hquiz span, .ev-quiz span { height: 18px; }
  .ev-play { width: 60px; height: 60px; }
  .ev-kinds-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-hscreen img, .ev-hlive i, .ev-anim i, .ev-cursor { animation: none !important; }
  .ev-card img, .ev-shot, .ev-hplayer { transition: none; }
  .ev-card:hover img { transform: none; }
}