/* ═══════════════════════════════════════════════════════════════
   The product picker and the jump between the three pages
   (2026-10-05): Premiere (/), After Effects (/ae), both (/both).

   His ask: a button above the headline that is lit, can't be missed,
   and carries both apps' icons; pressing After Effects plays a
   transition that is a moment in itself, then lands on its page.

   The picker is a pill with a ring of light turning around it, the
   three choices on it, and a glider under the chosen one. The jump
   is a full-screen cover that opens from the pressed button — rings,
   keyframe diamonds flying out, the app's icon sweeping to the middle
   — and the next page opens under the same cover and plays it away.

   Only on the server's say-so: every piece of this sits in markup
   that the server cuts out until the owner opens After Effects
   (<!--AE--> blocks), and the admin sees it before then.
   ═══════════════════════════════════════════════════════════════ */

@property --ps-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --pr-ink: #9999FF;     /* the apps' own letter colour */
  --pr-tile: #00005B;    /* and their tile */
  --ae-hue: #8B7CF6;
  --ae-hue-rgb: 139, 124, 246;
  --ae-lift: #B7A9FF;
}

/* ── the picker ─────────────────────────────────────────────── */

.ps-shell { display: flex; justify-content: center; margin-bottom: 34px; }

.pswitch-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 9px; max-width: 100%; }

/* the light under it: a blurred copy of the ring */
.pswitch-wrap::before {
  content: ''; position: absolute; inset: 6px 10% auto; height: 52px; z-index: 0;
  border-radius: 999px; pointer-events: none;
  background: conic-gradient(from var(--ps-ang), #2FD9BE, #8B7CF6, #E07AB0, #9999FF, #2FD9BE);
  filter: blur(22px); opacity: .5;
  animation: psSpin 7s linear infinite;
}

.pswitch {
  position: relative; z-index: 1; isolation: isolate;
  display: flex; align-items: stretch; gap: 2px;
  padding: 5px; border-radius: 999px;
  max-width: 100%;
}
/* the ring: a turning conic gradient one and a half pixels wide */
.pswitch::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--ps-ang), #2FD9BE, #8B7CF6 30%, #E07AB0 55%, #9999FF 78%, #2FD9BE);
  animation: psSpin 7s linear infinite;
}
.pswitch::after {
  content: ''; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, #17131F, #0C0A12);
}
@keyframes psSpin { to { --ps-ang: 360deg; } }

.ps-opt {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 18px 9px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  color: var(--tx-2); cursor: pointer; text-decoration: none;
  transition: color .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.ps-opt:hover { color: var(--tx); }
.ps-opt.on { color: #fff; }
.ps-opt:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; border-radius: 999px; }

/* the glider under the chosen one */
.ps-glider {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: 0 6px 22px -6px rgba(47,217,190,.65), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .42s cubic-bezier(.3,1.25,.4,1), width .42s cubic-bezier(.3,1.25,.4,1), background .3s var(--ease), box-shadow .3s var(--ease);
}
.pswitch[data-on="ae"] .ps-glider {
  background: linear-gradient(135deg, #5B47E8, #2B1C8F);
  box-shadow: 0 6px 24px -6px rgba(var(--ae-hue-rgb), .8), inset 0 0 0 1px rgba(255,255,255,.14);
}
.pswitch[data-on="both"] .ps-glider {
  background: linear-gradient(120deg, var(--red-ink-a), #4B3BD0 60%, #8E3E76);
  box-shadow: 0 6px 26px -6px rgba(217,107,162,.7), inset 0 0 0 1px rgba(255,255,255,.14);
}
.ps-glider.ready { opacity: 1; }

/* the apps' tiles: their own colours, drawn rather than copied */
.ps-ico {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 27px; height: 27px; border-radius: 7px;
  background: var(--pr-tile); color: var(--pr-ink);
  box-shadow: inset 0 0 0 1px rgba(153,153,255,.38), 0 3px 10px -3px rgba(0,0,91,.9);
  font-family: var(--num); font-size: 12.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
  direction: ltr;
}
.ps-duo { display: inline-flex; direction: ltr; }
.ps-duo .ps-ico { width: 24px; height: 24px; font-size: 11px; }
.ps-duo .ps-ico + .ps-ico { margin-left: -4px; box-shadow: inset 0 0 0 1px rgba(153,153,255,.38), -2px 0 0 #120F19; }

.ps-badge {
  font-family: var(--num); font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  padding: 2px 7px; border-radius: 999px;
  color: #1A0F05; background: linear-gradient(135deg, #FFC861, #F2A33C);
  box-shadow: 0 0 14px -2px rgba(242,163,60,.7);
  direction: ltr;
}

/* the admin's reminder that nobody else sees this yet */
.ps-preview {
  display: none; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #F5BE79;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(242,163,60,.1); border: 1px solid rgba(242,163,60,.4);
}
.ps-preview::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
html[data-ae="preview"] .ps-preview { display: inline-flex; }

@media (max-width: 560px) {
  .ps-shell { margin-bottom: 26px; }
  .pswitch-wrap { width: 100%; }
  .pswitch { width: 100%; }
  .ps-opt { flex: 1 1 0; padding: 9px 6px; gap: 6px; font-size: 13.5px; min-height: 46px; }
  .ps-opt .ps-long { display: none; }
  .ps-ico { width: 24px; height: 24px; font-size: 11px; }
  .ps-duo .ps-ico { width: 21px; height: 21px; font-size: 10px; }
  .ps-badge { font-size: 10.5px; padding: 1px 5px; }
}
@media (min-width: 561px) { .ps-opt .ps-short { display: none; } }
/* "أفتر إفكتس" in full (his word, 2026-10-05: never shortened): on a
   narrow phone a name may take two lines, and the −20% floats on the
   bundle's corner instead of taking a third of its room */
@media (max-width: 420px) {
  .ps-opt { white-space: normal; line-height: 1.15; text-align: center; padding: 7px 4px; gap: 5px; font-size: 12.5px; }
  .ps-opt .ps-badge { position: absolute; top: -9px; inset-inline-end: 0; font-size: 10px; padding: 1px 5px; }
}

/* ── the jump ───────────────────────────────────────────────────

   Timed so nothing is in flight when the page changes (2026-10-07).
   The browser keeps the last picture of this page on screen until the
   next one paints, so whatever was moving at that moment froze there:
   the name half written, the scan line in mid-air, and the light still
   centred on the button while the next page's cover has it in the
   middle. It stuck in the middle and then jumped. Now every piece has
   arrived by 0.6 s, the light has moved to the middle, and the next
   page starts from that very picture — only the bar still moves, and
   it is a progress bar, so a pause in it reads as loading. */

.pw {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
  --x: 50vw; --y: 20vh;
  --c1: #2B2390; --c2: #100B3A; --c3: #05040F; --ink: #9999FF; --glow: 139,124,246;
}
.pw[data-to="premiere"] { --c1: #0E6B5E; --c2: #06231F; --c3: #040707; --ink: #5BE8D3; --glow: 47,217,190; }
.pw[data-to="both"] { --c1: #3A2A8F; --c2: #2A0F2E; --c3: #050409; --ink: #F0A8D0; --glow: 217,107,162; }

/* the colour opens from the pressed button… */
.pw-fill {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--x) var(--y), var(--c1) 0, var(--c2) 38%, var(--c3) 78%);
  clip-path: circle(0 at var(--x) var(--y));
}
.pw.go .pw-fill { animation: pwOpen .5s cubic-bezier(.7,0,.25,1) forwards; }
@keyframes pwOpen { to { clip-path: circle(150vmax at var(--x) var(--y)); } }

/* …and settles into the picture the next page opens on: the light in
   the middle, a viewer's grid around it. One rule for both pages, so
   the two can't drift apart. */
.pw-calm, html.pw-in .pw-cover {
  background: radial-gradient(circle at 50% 50%, var(--c1) 0, var(--c2) 38%, var(--c3) 78%);
}
.pw-calm::after, .pw-cover::before {
  content: ''; position: absolute; inset: 0; opacity: .16;
  background:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
}
.pw-calm { position: absolute; inset: 0; opacity: 0; }
.pw.go .pw-calm { animation: pwShow .24s ease .34s forwards; }

.pw-ring {
  position: absolute; left: var(--x); top: var(--y); width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 2px solid rgba(var(--glow), .9);
  box-shadow: 0 0 30px rgba(var(--glow), .6), inset 0 0 30px rgba(var(--glow), .4);
  opacity: 0; transform: scale(.2);
}
.pw.go .pw-ring { animation: pwRing .52s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
@keyframes pwRing { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(9); } }

/* keyframe diamonds, the shape every animator knows */
.pw-k {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--ink); border-radius: 2px; transform: rotate(45deg) scale(0);
  box-shadow: 0 0 12px rgba(var(--glow), .9);
  opacity: 0;
}
.pw.go .pw-k { animation: pwKey .5s cubic-bezier(.15,.75,.25,1) var(--d, 0s) forwards; }
@keyframes pwKey {
  0%   { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(.2); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(225deg) scale(1.2); }
}

/* the light that runs across, like a render bar */
.pw-scan {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: 64px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow), .95) 45%, #fff 50%, rgba(var(--glow), .95) 55%, transparent);
  box-shadow: 0 0 18px rgba(var(--glow), .8);
  transform: scaleX(0); opacity: 0;
}
.pw.go .pw-scan { animation: pwScan .34s cubic-bezier(.6,0,.2,1) .22s forwards; }
@keyframes pwScan { 0% { opacity: 1; transform: scaleX(0); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* the app's tile, from the button to the middle */
.pw-mark {
  position: absolute; left: 50%; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  transform: translate(-50%, -50%); opacity: 0;
}
.pw-mark .pw-tiles { display: flex; direction: ltr; gap: 10px; }
.pw-tile {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 22px;
  background: var(--pr-tile); color: var(--pr-ink);
  font-family: var(--num); font-size: 42px; font-weight: 700; letter-spacing: -.03em;
  box-shadow: inset 0 0 0 2px rgba(153,153,255,.45), 0 0 60px rgba(var(--glow), .55), 0 20px 50px -10px rgba(0,0,0,.8);
}
.pw-name {
  font-family: var(--num); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff;
  direction: ltr; white-space: nowrap; text-shadow: 0 0 24px rgba(var(--glow), .8);
  /* set the same whether in separate letters (here, to animate them) or
     as plain text (the next page's cover), so the name does not shift */
  font-kerning: none; font-variant-ligatures: none;
}
.pw-name i { display: inline-block; font-style: normal; opacity: 0; filter: blur(6px); transform: translateY(10px); }
.pw.go .pw-mark { animation: pwMark .4s cubic-bezier(.2,.9,.25,1.2) .12s forwards; }
/* the letters share one stretch of time however long the name is —
   one step each made "Premiere + After Effects" run to 1.4 s */
.pw.go .pw-name i { animation: pwLetter .22s cubic-bezier(.2,.8,.2,1) var(--d, .2s) forwards; }
@keyframes pwMark { 0% { opacity: 0; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.32); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pwLetter { to { opacity: 1; filter: blur(0); transform: none; } }

/* Under the name, a bar that fills while the next page loads. It only
   ever moves forward: the next page works out how far it had got (the
   line in its <head>, same curve, from the time this page hands over)
   and finishes it from there. Here it fills by its width, on purpose:
   a transform would run on the compositor's own clock, which carries
   on past what the page's script can see — the bar got further than
   the script reported, and the next page started it behind that. */
.pw-bar { width: 190px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.12); opacity: 0; }
.pw-bar i {
  display: block; width: 0; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--glow), .55), rgb(var(--glow)) 70%, #fff);
}
html[dir="rtl"] .pw-bar i { background: linear-gradient(270deg, rgba(var(--glow), .55), rgb(var(--glow)) 70%, #fff); }
.pw.go .pw-bar { animation: pwShow .16s ease .3s forwards; }
.pw.go .pw-bar i { animation: pwProg 2.2s linear .4s forwards; }
@keyframes pwShow { to { opacity: 1; } }
@keyframes pwProg { 0% { width: 0; } 20% { width: 50%; } 50% { width: 75%; } 100% { width: 90%; } }

/* Once the colour covers the screen, the page under it stops being
   drawn — its videos, the picker's turning light — so the machine
   spends the next moment on the cover alone. */
html.pw-hide body > :not(.pw) { visibility: hidden; }

/* ── landing: the same picture on the new page, played away ──
   Driven by the stylesheet alone, from the page's first paint: the
   line in <head> sets html.pw-in before anything is drawn. A script
   would have to wait for every stylesheet (Google's fonts included).
   Only opacity and transform move here, which the browser animates
   off the main thread — the new page is busy with its own first
   layout and scripts right then, and a clipped circle or a blur
   (what was here) has to wait for it, frame by frame. It also starts
   at once: a still cover held for 0.28 s looked like a hang. */
.pw-cover { display: none; }
html.pw-in .pw-cover {
  display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
  animation: pwCoverOut .6s cubic-bezier(.45,0,.2,1) .14s forwards, pwGone 0s linear .74s forwards;
}
/* After Effects' colours by default, as on .pw — without --glow here the
   tile lost its light and the bar its colour on the /ae landing */
html.pw-in .pw-cover { --c1: #2B2390; --c2: #100B3A; --c3: #05040F; --glow: 139,124,246; }
html.pw-in[data-pw="premiere"] .pw-cover { --c1: #0E6B5E; --c2: #06231F; --c3: #040707; --glow: 47,217,190; }
html.pw-in[data-pw="both"] .pw-cover { --c1: #3A2A8F; --c2: #2A0F2E; --c3: #050409; --glow: 217,107,162; }
.pw-cover .pw-mark { opacity: 1; }
.pw-cover .pw-name i { opacity: 1; filter: none; transform: none; }
.pw-cover .pw-bar { opacity: 1; }
.pw-cover .pw-bar i { width: 100%; transform-origin: 0 50%; transform: scaleX(var(--pwp, .6)); }
html[dir="rtl"] .pw-cover .pw-bar i { transform-origin: 100% 50%; }
html.pw-in .pw-cover .pw-bar i { animation: pwDone .26s cubic-bezier(.3,.7,.3,1) forwards; }
html.pw-in .pw-cover .pw-mark { animation: pwFly .5s cubic-bezier(.5,0,.3,1) .12s forwards; }
@keyframes pwDone { to { transform: scaleX(1); } }
@keyframes pwCoverOut { to { opacity: 0; transform: scale(1.06); } }
@keyframes pwGone { to { visibility: hidden; } }
@keyframes pwFly { to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }

/* the page underneath settles in as the cover goes — from a touch
   smaller, never larger: a hero scaled up past the screen's edges made
   a phone's page wider than the phone for a moment, the browser zoomed
   out to fit, and the whole picture shifted under the cover */
html.pw-in .hero { animation: pwHero .8s cubic-bezier(.2,.75,.25,1) .16s both; }
@keyframes pwHero { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
html.pw-in .hero h1 > span { display: inline-block; animation: pwWord .6s cubic-bezier(.2,.8,.2,1) .3s both; }
html.pw-in .hero h1 > span:nth-child(2) { animation-delay: .36s; }
html.pw-in .hero h1 > span:nth-child(3) { animation-delay: .42s; }
html.pw-in .hero h1 > span:nth-child(4) { animation-delay: .48s; }
@keyframes pwWord { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pswitch::before, .pswitch-wrap::before { animation: none; }
  .ps-glider { transition: none; }
  html.pw-in .pw-cover { display: none; }
  html.pw-in .hero, html.pw-in .hero h1 > span { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   The After Effects page and the bundle page: what only they have.
   ═══════════════════════════════════════════════════════════════ */

/* The AE page's accent: the site's aqua stays the brand, violet is
   After Effects. */
.ae-page .eyebrow { color: var(--ae-lift); }
.ae-page .eyebrow::before { background: var(--ae-hue); }
.ae-page .h1-num { color: var(--ae-lift); text-shadow: 0 0 34px rgba(var(--ae-hue-rgb), .55), 0 0 12px rgba(47,217,190,.3); }
.ae-page .h1-a { background-image: linear-gradient(120deg, var(--ae-lift), var(--red-lift) 60%, var(--ember)); }
/* "على أفتر إفكتس" is longer than the column: the phrase breaks between
   its two halves, never inside them */
.ae-page .h1-a { display: block; white-space: normal; }
.ae-page .h1-a .nw { white-space: nowrap; }

/* ── the comp window: a real render playing, the panel docked ── */
.aew {
  border-radius: var(--r-big); overflow: hidden; direction: ltr;
  border: 1px solid #2C2840;
  background: linear-gradient(170deg, #15121F, #0A0910);
  box-shadow: var(--sink), 0 0 100px -36px rgba(var(--ae-hue-rgb), .7);
}
.aew-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid #221E31; background: #18151F;
  font-family: var(--num); font-size: 12.5px; font-weight: 500; letter-spacing: .03em; color: var(--tx-3);
}
.aew-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #2C2838; }
.aew-bar .dot.live { background: var(--ae-hue); box-shadow: 0 0 10px rgba(var(--ae-hue-rgb), .9); }
.aew-bar .grow { flex: 1 1 auto; }
.aew-bar .ps-ico { width: 20px; height: 20px; font-size: 9.5px; border-radius: 5px; }
.aew-body { display: grid; grid-template-columns: 1fr 172px; }
.aew-view { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.aew-view video, .aew-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the viewer's safe frame, faint */
.aew-view::after {
  content: ''; position: absolute; inset: 5%; border: 1px dashed rgba(255,255,255,.12); pointer-events: none;
}
.aew-panel { position: relative; border-left: 1px solid #221E31; background: #0D0C12; overflow: hidden; }
.aew-panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.aew-tl { border-top: 1px solid #221E31; padding: 8px 12px 10px; position: relative; }
.aew-row { display: flex; align-items: center; gap: 8px; height: 18px; margin: 4px 0; }
.aew-row b {
  flex: 0 0 64px; font-family: var(--num); font-size: 10.5px; font-weight: 500; color: var(--tx-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aew-row span { position: relative; flex: 1 1 auto; height: 12px; border-radius: 3px; }
.aew-row span.l1 { background: linear-gradient(90deg, #3A2E7A, #2A2160); margin-inline-start: 4%; margin-inline-end: 6%; }
.aew-row span.l2 { background: linear-gradient(90deg, #1E5D56, #144540); margin-inline-start: 10%; margin-inline-end: 2%; }
.aew-row span.l3 { background: linear-gradient(90deg, #5B2A48, #43203A); margin-inline-end: 30%; }
.aew-row span i {
  position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: #E9E5FF; transform: rotate(45deg); border-radius: 1px; box-shadow: 0 0 6px rgba(255,255,255,.6);
}
.aew-head {
  position: absolute; top: 4px; bottom: 6px; left: 84px; width: 2px; background: #6E8BFF;
  box-shadow: 0 0 10px rgba(110,139,255,.9);
}
.aew-head::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 8px; border-radius: 2px; background: #6E8BFF; }

@media (max-width: 760px) {
  .aew-body { grid-template-columns: 1fr; }
  .aew-panel { display: none; }
}

/* ── videos that play only while they are seen ── */
.vclip { position: relative; overflow: hidden; background: #07060B; }
.vclip video, .vclip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vclip img.poster { position: absolute; inset: 0; transition: opacity .35s var(--ease); }
.vclip.playing img.poster { opacity: 0; }

/* ── captions: phones ── */
.phones {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: end;
}
.phone {
  margin: 0; position: relative;
  border-radius: 30px; padding: 7px;
  background: linear-gradient(160deg, #2A2638, #121019);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.9), 0 0 60px -30px rgba(var(--ae-hue-rgb), .6);
  transition: transform .4s var(--ease);
}
.phone:hover { transform: translateY(-6px); }
.phone .vclip { border-radius: 24px; aspect-ratio: 9 / 16; }
.phone .vclip::before {
  content: ''; position: absolute; z-index: 2; top: 9px; left: 50%; width: 34%; height: 15px; margin-left: -17%;
  border-radius: 999px; background: #000;
}
.phone figcaption { text-align: center; margin-top: 10px; }
.phone figcaption b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.phone figcaption span { display: block; font-size: 12.5px; color: var(--tx-3); line-height: 1.5; }
.phone:nth-child(2n) { transform: translateY(-18px); }
.phone:nth-child(2n):hover { transform: translateY(-24px); }

@media (max-width: 1020px) { .phones { grid-template-columns: repeat(3, 1fr); } .phone:nth-child(2n) { transform: none; } }
@media (max-width: 560px) {
  .phones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 16px 18px; margin: 0 -16px; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phone { flex: 0 0 46%; scroll-snap-align: center; border-radius: 24px; padding: 5px; }
  .phone .vclip { border-radius: 20px; }
}

.chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.chips-row span {
  font-size: 13.5px; color: var(--tx-2); padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line-lift); background: var(--bg-100);
}
.chips-row span b { color: var(--ae-lift); font-weight: 600; }

/* ── video cards (text animations, effects, transitions) ── */
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vgrid.three { grid-template-columns: repeat(3, 1fr); }
.vcard {
  margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-100);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.vcard:hover { transform: translateY(-4px); border-color: rgba(var(--ae-hue-rgb), .45); box-shadow: var(--sink), 0 0 46px -24px rgba(var(--ae-hue-rgb), .8); }
.vcard .vclip { aspect-ratio: 16 / 9; }
.vcard figcaption { display: flex; align-items: center; gap: 8px; padding: 11px 14px 13px; }
.vcard figcaption b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.vcard figcaption span { font-size: 12.5px; color: var(--tx-3); margin-inline-start: auto; }
.vcard.big { grid-column: span 2; grid-row: span 2; }
.vcard.big figcaption b { font-size: 16px; }

@media (max-width: 1020px) { .vgrid { grid-template-columns: repeat(2, 1fr); } .vgrid.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .vgrid, .vgrid.three { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vcard.big { grid-column: span 2; grid-row: auto; }
  .vcard figcaption { padding: 9px 10px 10px; }
  .vcard figcaption b { font-size: 13px; }
  .vcard figcaption span { display: none; }
}

/* ── the effects wall: every effect, a strip of frames AE drew ── */
.fxwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.fxw {
  margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-100);
}
.fxw i {
  display: block; aspect-ratio: 16 / 9;
  background-size: 1200% 100%; background-position: 0 0; background-repeat: no-repeat;
}
.fxw.on i { animation: fxwPlay 1.5s steps(11) infinite alternate; }
@keyframes fxwPlay { to { background-position: 100% 0; } }
.fxw b { display: block; padding: 7px 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── a tool card that shows the thing itself ── */
.tool .tool-art.vart { padding: 0; display: block; position: relative; }
.tool .tool-art.vart .vclip { position: absolute; inset: 0; }
.ae-page .tool:hover { border-color: rgba(var(--ae-hue-rgb), .38); box-shadow: var(--sink), 0 0 46px -26px rgba(var(--ae-hue-rgb), .7); }
.ae-page .tool-art { background: radial-gradient(300px 120px at 50% 0%, rgba(var(--ae-hue-rgb), .1), transparent 70%), var(--bg-000); }
.ae-page .tag.ae { color: var(--ae-lift); border-color: rgba(var(--ae-hue-rgb), .45); background: rgba(var(--ae-hue-rgb), .1); }

/* ── the AI chat, staged ── */
.aechat { display: grid; gap: 10px; padding: 16px; }
.aechat > * { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.aechat > .in { opacity: 1; transform: none; }
.aechat .m { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14.2px; line-height: 1.75; }
.aechat .u { justify-self: start; background: linear-gradient(140deg, #3A2E86, #2A2163); color: #fff; border-end-start-radius: 4px; }
.aechat .a { justify-self: end; background: var(--bg-200); color: var(--tx-2); border-end-end-radius: 4px; }
.aechat .st { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-3); padding: 2px 4px; }
.aechat .st::before { content: ''; width: 15px; height: 15px; border-radius: 50%; background: rgba(74,222,110,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE6E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat; }

/* ── the bundle: two columns of what each half brings ── */
.duo-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.duo-col {
  border-radius: var(--r-big); border: 1px solid var(--line-lift); padding: 26px 24px 24px;
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
}
.duo-col.pr { box-shadow: 0 0 80px -40px rgba(47,217,190,.6); }
.duo-col.ae { box-shadow: 0 0 80px -40px rgba(var(--ae-hue-rgb), .75); }
.duo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.duo-head .ps-ico { width: 40px; height: 40px; font-size: 17px; border-radius: 10px; }
.duo-head h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.duo-head small { display: block; font-size: 13px; color: var(--tx-3); font-weight: 500; }
.duo-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duo-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tx-2); line-height: 1.7; }
.duo-col li a { color: var(--ae-lift); text-decoration: underline; text-underline-offset: 3px; }
.duo-col li::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: rgba(47,217,190,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BE8D3' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.duo-col.ae li::before { background-color: rgba(var(--ae-hue-rgb), .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7A9FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.duo-col li b { color: var(--tx); font-weight: 600; }
.duo-plus {
  align-self: center; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  font-family: var(--num); font-size: 28px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--red-ink-a), #4B3BD0);
  box-shadow: 0 0 40px -6px rgba(var(--ae-hue-rgb), .8);
}
.duo-shared {
  margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.duo-shared div {
  padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-100);
  font-size: 14px; color: var(--tx-2); line-height: 1.7;
}
.duo-shared b { display: block; color: var(--tx); font-size: 14.5px; margin-bottom: 2px; }
@media (max-width: 900px) {
  .duo-grid { grid-template-columns: 1fr; }
  .duo-plus { justify-self: center; }
  .duo-shared { grid-template-columns: 1fr 1fr; }
}

/* the saving, said once and big */
.save-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
  margin: 26px auto 0; max-width: 820px; padding: 16px 22px; border-radius: var(--r-card);
  border: 1px solid rgba(242,163,60,.38);
  background: radial-gradient(420px 120px at 50% 0%, rgba(242,163,60,.12), transparent 70%), var(--bg-100);
  font-size: 15.5px; color: var(--tx-2);
}
.save-strip b { color: #FFD08A; font-family: var(--num); font-weight: 700; }
.save-strip .eq { color: var(--tx-4); }
.save-strip .off { font-family: var(--num); font-weight: 700; color: #1A0F05; background: linear-gradient(135deg, #FFC861, #F2A33C); padding: 2px 9px; border-radius: 999px; }

/* the upsell under the AE prices */
.up-both {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-card);
  border: 1px solid rgba(217,107,162,.35);
  background: linear-gradient(120deg, rgba(47,217,190,.07), rgba(var(--ae-hue-rgb), .1), rgba(217,107,162,.08));
  font-size: 14.5px; color: var(--tx-2); text-decoration: none;
  transition: transform .25s var(--spring), border-color .25s var(--ease);
}
.up-both:hover { transform: translateY(-2px); border-color: rgba(217,107,162,.6); }
.up-both b { color: var(--tx); }
.up-both .ps-badge { margin-inline-start: auto; }

/* the bundle hero picture: the two windows, one over the other */
/* each window as tall as what is in it; the stage keeps their places */
.duo-stage { position: relative; height: 420px; }
.duo-stage .reel { position: absolute; inset: 0 18% auto 0; }
.duo-stage .aew { position: absolute; inset: 30% 0 auto 16%; }
html[dir="rtl"] .duo-stage .reel { inset: 0 0 auto 18%; }
html[dir="rtl"] .duo-stage .aew { inset: 30% 16% auto 0; }
@media (max-width: 1020px) { .duo-stage { height: 400px; } }
@media (max-width: 560px) {
  .duo-stage { height: auto; display: grid; gap: 14px; }
  .duo-stage .reel, .duo-stage .aew,
  html[dir="rtl"] .duo-stage .reel, html[dir="rtl"] .duo-stage .aew { position: relative; inset: auto; }
}

/* a heading inside a section, between two grids */
.sub-h { text-align: center; margin: 54px 0 18px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--tx-2); }
@media (max-width: 560px) { .sub-h { margin-top: 40px; font-size: 18px; } }

/* ── the payment page: which plugin ── */
.buy-pick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 10px;
}
.buy-opt {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 10px; border-radius: var(--r-ctl); cursor: pointer;
  border: 1px solid var(--line-lift); background: var(--bg-100); color: var(--tx-2);
  font-size: 14.5px; font-weight: 600;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .3s var(--ease), color .2s var(--ease);
}
.buy-opt:hover { border-color: var(--tx-4); color: var(--tx); }
.buy-opt.on { color: #fff; border-color: rgba(var(--ae-hue-rgb), .7); background: linear-gradient(150deg, rgba(var(--ae-hue-rgb), .22), var(--bg-200)); box-shadow: 0 8px 26px -10px rgba(var(--ae-hue-rgb), .7); }
.buy-opt[data-product="premiere"].on { border-color: var(--red); background: linear-gradient(150deg, rgba(47,217,190,.16), var(--bg-200)); box-shadow: var(--glow); }
.buy-opt .ps-ico { width: 24px; height: 24px; font-size: 11px; }
.buy-opt .ps-duo .ps-ico { width: 21px; height: 21px; font-size: 10px; }
.buy-note { margin: 0 0 14px; font-size: 13.5px; color: var(--tx-3); }
/* lit, each in its own colour (2026-10-10, «عايز البرامج تكون ظاهره اكتر و منوره»): four in a row on a computer,
   two by two on a phone; the chosen one brighter, with a check */
.buy-pick { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.buy-pick .buy-opt {
  --pc: 47, 217, 190;
  position: relative; padding: 17px 12px; font-size: 15.5px; font-weight: 700; color: var(--tx);
  border-color: rgba(var(--pc), .34);
  background: radial-gradient(120% 140% at 50% -10%, rgba(var(--pc), .16), transparent 62%), var(--bg-100);
  box-shadow: 0 12px 30px -20px rgba(var(--pc), .9), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .25s var(--ease), border-color .2s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease), color .2s var(--ease);
}
.buy-pick .buy-opt[data-product="ae"] { --pc: 139, 124, 246; }
.buy-pick .buy-opt[data-product="both"] { --pc: 111, 195, 240; }
.buy-pick .buy-opt[data-product="dv"] { --pc: 255, 140, 60; }
.buy-pick .buy-opt .ps-ico { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 20px -3px rgba(var(--pc), .75); }
.buy-pick .buy-opt .ps-duo .ps-ico { width: 26px; height: 26px; font-size: 11.5px; }
.buy-pick .buy-opt:hover { color: #fff; border-color: rgba(var(--pc), .75); transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(var(--pc), 1), inset 0 1px 0 rgba(255,255,255,.08); }
.buy-pick .buy-opt[data-product].on {
  color: #fff; border-color: rgba(var(--pc), .95);
  background: radial-gradient(120% 150% at 50% -10%, rgba(var(--pc), .38), transparent 66%), linear-gradient(160deg, rgba(var(--pc), .2), var(--bg-200));
  box-shadow: 0 0 0 1px rgba(var(--pc), .55), 0 16px 42px -12px rgba(var(--pc), .95), inset 0 1px 0 rgba(255,255,255,.14);
}
.buy-pick .buy-opt.on::after {
  content: ''; position: absolute; top: 7px; inset-inline-end: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: rgb(var(--pc)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071311' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 14px rgba(var(--pc), .85);
}
@media (max-width: 420px) {
  .buy-pick .buy-opt { padding: 15px 8px; font-size: 14.5px; gap: 7px; }
  .buy-pick .buy-opt .ps-badge { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .buy-pick .buy-opt:hover { transform: none; } }
@media (max-width: 420px) {
  .buy-opt { font-size: 13px; gap: 5px; padding: 10px 6px; }
  .buy-opt .ps-badge { display: none; }
}

/* the two tiles of "both", overlapping less so neither letter hides */
.ps-duo .ps-ico + .ps-ico { margin-left: -4px; }

/* ── the guides: which plugin's guide, and panel pictures in the cards ── */
.guide-pick { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.guide-pick a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px;
  border: 1px solid var(--line-lift); background: var(--bg-100); color: var(--tx-2); font-size: 14px; font-weight: 600;
}
.guide-pick a.on { color: #fff; border-color: rgba(var(--ae-hue-rgb), .6); background: linear-gradient(150deg, rgba(var(--ae-hue-rgb), .22), var(--bg-200)); }
.guide-pick a:not(.on):hover { color: var(--tx); border-color: var(--tx-4); }
.guide-pick .ps-ico { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
.how-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.guide-pick a[href="/guide.html"].on { border-color: var(--red); background: linear-gradient(150deg, rgba(47,217,190,.16), var(--bg-200)); }

/* ═══════════════════════════════════════════════════════════════
   EditFast AI on the After Effects page: the graphic changes as you
   talk (his word, 2026-10-05 — «تظهر جامد ان ال ai بيخليك تعدل على
   الجرافيك زي ما انت عايز بالظبط و تغير فيه عادي»). One chat, one
   comp: each request is typed, its tools tick by with the property
   each one changed, the same title changes and the comp plays; the
   last step is a hand on the Scale value. Driven by js/aiedit.js;
   the markup alone shows the finished graphic.
   ═══════════════════════════════════════════════════════════════ */

.aix {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 36px 30px 30px; border-radius: var(--r-big);
  border: 1px solid rgba(139,124,246,.3);
  background:
    radial-gradient(760px 320px at 100% 0%, rgba(47,217,190,.09), transparent 70%),
    radial-gradient(760px 360px at 0% 100%, rgba(var(--ae-hue-rgb), .17), transparent 70%),
    var(--bg-100);
  box-shadow: 0 40px 120px -60px rgba(var(--ae-hue-rgb), .55);
}
.aix::before {
  content: ''; position: absolute; top: 0; left: 30px; right: 30px; height: 1px;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 6s linear infinite;
}
.aix-head { text-align: center; max-width: 860px; margin: 0 auto 28px; }
.aix-brand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.aix h2 {
  margin: 0 auto 14px; max-width: 24ch; font-size: clamp(25px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.35;
}
.aix h2 em {
  font-style: normal;
  background: var(--ai-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aiFlow 9s linear infinite;
}
.aix-lede { margin: 0 auto 18px; max-width: 70ch; font-size: 16.5px; line-height: 1.9; color: var(--tx-2); }
.aix-lede b { color: var(--tx); font-weight: 600; }
.aix .aib-can { justify-content: center; }
.aix-actions { justify-content: center; margin-top: 24px; }

/* ── the stage: the chat beside the comp ── */
.aed { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: stretch; }

.aed-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.aed-st { transition: color .2s; }
.aed-log {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 4px 2px 2px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px);
          mask-image: linear-gradient(180deg, transparent 0, #000 70px);
}
.aed-log > * { flex: none; animation: aiRise .38s var(--ease) both; }
.aed-log .m { max-width: 92%; padding: 8px 12px; border-radius: 13px; font-size: 13.6px; line-height: 1.75; }
.aed-log .u { align-self: flex-start; background: linear-gradient(140deg, #3A2E86, #2A2163); color: #fff; border-end-start-radius: 4px; }
.aed-log .a { align-self: flex-end; background: var(--bg-200); color: var(--tx-2); border-end-end-radius: 4px; }
.aed-log .a b { color: var(--tx); font-weight: 600; }
.aed-log .t {
  align-self: flex-end; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; max-width: 100%;
  padding: 0 4px; font-size: 12.6px; line-height: 1.6; color: var(--tx-3);
}
.aed-log .t i {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(139,124,246,.3); border-top-color: var(--ai-b); animation: aiSpin .75s linear infinite;
}
.aed-log .t.ok i,
.aed-log .k.done b i {
  border: 0; animation: none;
  background: rgba(74,222,110,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE6E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.aed-log code {
  font-family: var(--num); font-size: 11.4px; direction: ltr; unicode-bidi: isolate; white-space: nowrap;
  color: var(--tx-2); background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 0 6px; border-radius: 6px;
}
.aed-log code s { text-decoration: none; color: var(--tx-4); }
.aed-log code u { text-decoration: none; color: var(--ai-a); }
/* the script card, as the panel shows it */
.aed-log .k {
  align-self: stretch; padding: 10px 11px; border-radius: 12px;
  border: 1px solid rgba(139,124,246,.38); background: rgba(139,124,246,.08);
  font-size: 12.6px; color: var(--tx-2);
}
.aed-log .k b { display: flex; align-items: center; gap: 7px; color: var(--tx); font-weight: 600; font-size: 13px; }
.aed-log .k b i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: rgba(139,124,246,.35); }
.aed-log .k p { margin: 4px 0 8px; color: var(--tx-3); line-height: 1.65; }
.aed-log .k .bt { display: flex; flex-wrap: wrap; gap: 6px; }
.aed-log .k .bt span {
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-lift); background: var(--bg-100);
  color: var(--tx-2); font-size: 12px; line-height: 1.6;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), border-color .2s var(--ease);
}
.aed-log .k .bt span.hit { background: var(--ai-b); border-color: transparent; color: #fff; transform: scale(.95); }
.aed-log .k.done { padding: 6px 10px; }
.aed-log .k.done p, .aed-log .k.done .bt { display: none; }
.aed-log .k.done b { font-size: 12.4px; font-weight: 500; color: var(--tx-2); }
.aed-log .n {
  align-self: center; text-align: center; font-size: 12.6px; color: var(--ai-d); line-height: 1.6;
  background: rgba(242,178,76,.08); border: 1px solid rgba(242,178,76,.3); padding: 4px 12px; border-radius: 999px;
}

/* the typing box */
.aed-in {
  display: flex; align-items: flex-end; gap: 8px; margin-top: 10px;
  padding: 7px 7px 7px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28);
}
html[dir="rtl"] .aed-in { padding: 7px 12px 7px 7px; }
.aed-in p { flex: 1 1 auto; margin: 0; min-height: 22px; padding: 4px 0; font-size: 13.4px; line-height: 1.6; color: var(--tx); }
.aed-in p:empty::before { content: attr(data-ph); color: var(--tx-4); }
.aed-in p.typing::after {
  content: ''; display: inline-block; width: 2px; height: 1em; margin-inline-start: 1px; vertical-align: -.14em;
  background: var(--ai-b); animation: aiBlink .9s steps(1) infinite;
}
.aed-send {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--tx-3); background: rgba(255,255,255,.05);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--spring);
}
.aed-send svg { width: 15px; height: 15px; }
html[dir="rtl"] .aed-send svg { transform: scaleX(-1); }
.aed-send.go { color: #fff; background: var(--ai-ink); transform: scale(.88); }

/* ── the comp ── */
.aed-comp { position: relative; display: flex; flex-direction: column; min-width: 0; }
.aed-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #07060B; container-type: inline-size; }
.aed-view::after { content: ''; position: absolute; inset: 5%; border: 1px dashed rgba(255,255,255,.1); pointer-events: none; }
.aed-stage { position: absolute; inset: 0; direction: rtl; font-family: var(--ff); }
.aed-bg {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 110%, #1B1335 0%, #0B0915 55%, #07060B 100%);
}
.aed-bg i {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  filter: blur(40px); filter: blur(6cqw); opacity: .26;
  transition: opacity 1s var(--ease);
  animation: aedDrift 11s ease-in-out infinite alternate;
}
.aed-bg i:nth-child(1) { width: 46%; left: 4%; top: -24%; background: #7B5CFF; }
.aed-bg i:nth-child(2) { width: 40%; right: 0; bottom: -34%; background: #FF4F9A; animation-delay: -4s; animation-duration: 13s; }
.aed-bg i:nth-child(3) { width: 28%; left: 38%; top: 26%; background: #2FD9BE; opacity: .1; animation-delay: -7s; }
.aed-stage.k-glass .aed-bg i { opacity: .9; }
.aed-stage.k-glass .aed-bg i:nth-child(3) { opacity: .6; }
@keyframes aedDrift { to { transform: translate(14%, 10%) scale(1.12); } }

.aed-card {
  position: absolute; left: 50%; top: 50%; width: 74%; height: 40%;
  border-radius: 18px; border-radius: 2.4cqw;
  transform: translate(-50%, -50%) scale(.86); opacity: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 62%);
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 24px 60px -20px rgba(0,0,0,.6);
  transition: opacity .6s var(--ease), transform .7s cubic-bezier(.2,1.35,.4,1), height .55s var(--ease), outline-color .25s;
  outline: 1px solid transparent; outline-offset: 4px;
}
.aed-card::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; width: 34%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
}
.aed-stage.k-glass .aed-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.aed-stage.k-glass.k-sub .aed-card { height: 52%; }
.aed-stage.k-glass.play .aed-card::after { animation: aedSweep 1.3s .35s var(--ease) both; }
.aed-stage.sel-c .aed-card { outline-color: #6E8BFF; }
@keyframes aedSweep { to { left: 125%; } }

.aed-tt {
  position: absolute; left: 50%; top: 50%; text-align: center; white-space: nowrap;
  transform: translate(-50%, calc(-50% + var(--ty, 0px))) scale(var(--sc, 1));
  transition: transform .55s var(--ease);
}
.aed-stage.k-sub .aed-tt { --ty: -3.4cqw; }
/* the layer's selection box, After Effects style */
.aed-tt::before {
  content: ''; position: absolute; inset: -8% -5%; opacity: 0; pointer-events: none;
  border: 1px solid #6E8BFF; transition: opacity .25s var(--ease);
  background:
    linear-gradient(#6E8BFF, #6E8BFF) left top / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) center top / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) right top / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) left center / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) right center / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) left bottom / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) center bottom / 6px 6px no-repeat,
    linear-gradient(#6E8BFF, #6E8BFF) right bottom / 6px 6px no-repeat;
}
.aed-stage.sel-t .aed-tt::before { opacity: 1; }
.aed-title {
  display: block; opacity: 0;
  font-size: 54px; font-size: 8cqw; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #fff;
  transition: color .6s var(--ease), text-shadow .6s var(--ease), font-weight .5s var(--ease);
}
.aed-title span { transition: color .6s var(--ease), text-shadow .6s var(--ease); }
.aed-stage.k-on .aed-title { opacity: 1; }
.aed-stage.k-on.play .aed-title { animation: aedUp .95s var(--ease) both; }
.aed-stage.k-bounce.play .aed-title { animation: aedBounce 1.05s linear both; }
.aed-stage.k-gold .aed-title { color: #FFC94A; text-shadow: 0 0 .22em rgba(255,183,60,.55), 0 0 .8em rgba(255,140,40,.28); }
.aed-stage.k-big .aed-title { font-weight: 900; }
.aed-stage.k-sub .aed-title .w2 { color: #3FE5CB; text-shadow: 0 0 .25em rgba(47,217,190,.6), 0 0 .8em rgba(47,217,190,.25); }
@keyframes aedUp { from { opacity: 0; transform: translateY(16%); filter: blur(5px); } }
@keyframes aedBounce {
  0%   { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  42%  { opacity: 1; transform: scale(1.16); animation-timing-function: ease-in-out; }
  64%  { transform: scale(.93); animation-timing-function: ease-in-out; }
  82%  { transform: scale(1.04); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
.aed-sub {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: .4cqw;
  font-size: 22px; font-size: 3.1cqw; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.84);
}
.aed-sub span { display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.aed-stage.k-sub .aed-sub span { opacity: 1; transform: none; }
.aed-stage.k-sub.play .aed-sub span { animation: aedWord .55s var(--ease) both; animation-delay: calc(.5s + var(--i, 0) * .14s); }
@keyframes aedWord { from { opacity: 0; transform: translateY(40%); } }

/* the AI looking at the frames */
.aed-look { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.aed-look::before {
  content: ''; position: absolute; inset: 6%;
  background:
    linear-gradient(#fff, #fff) left top / 20px 2px no-repeat,   linear-gradient(#fff, #fff) left top / 2px 20px no-repeat,
    linear-gradient(#fff, #fff) right top / 20px 2px no-repeat,  linear-gradient(#fff, #fff) right top / 2px 20px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 20px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 20px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 20px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 20px no-repeat;
  opacity: .85;
}
.aed-look i {
  position: absolute; top: 6%; bottom: 6%; left: 6%; width: 2px;
  background: linear-gradient(transparent, #B4A9FF, transparent); box-shadow: 0 0 16px 2px rgba(139,124,246,.8);
}
.aed-look b {
  position: absolute; top: 8%; left: 8%;
  font: 600 11px/1.6 var(--num); letter-spacing: .02em; color: #fff;
  background: rgba(139,124,246,.9); padding: 2px 8px; border-radius: 6px;
}
.aed-look.on { opacity: 1; }
.aed-look.on::before { animation: aedFocus .45s var(--ease) both; }
.aed-look.on i { animation: aedScan 1.05s var(--ease) both; }
@keyframes aedFocus { from { inset: 0; opacity: 0; } }
@keyframes aedScan { from { left: 6%; } to { left: 94%; } }

/* Effect Controls, the values After Effects shows in blue */
.aed-props {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 16px; padding: 7px 10px;
  border-top: 1px solid #221E31; background: #110F18;
  font-family: var(--num); font-size: 11.5px;
}
.aed-p {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; height: 24px; padding: 0 6px; border-radius: 5px;
}
.aed-p b { font-weight: 500; color: #9A96AE; white-space: nowrap; }
.aed-p > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #5AA8FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s var(--ease); }
.aed-p .rtl { direction: rtl; unicode-bidi: isolate; font-family: var(--ff); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.aed-p .sw { flex: none; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(255,255,255,.3); background: var(--c, #fff); transition: background .5s var(--ease); }
.aed-p.off > span { color: #4E4A63; }
.aed-p.hl { animation: aedHl 1.5s var(--ease); }
@keyframes aedHl { 0%, 55% { background: rgba(139,124,246,.24); } }

/* the timeline: keyframes appear, the comp plays, the cache fills */
.aed-tl { position: relative; padding: 9px 12px 8px; border-top: 1px solid #221E31; }
.aed-tl .aew-row { transition: opacity .45s var(--ease); }
.aed-tl .aew-row.off { opacity: 0; }
.aed-tl .aew-row span i { animation: aedKey .45s var(--spring) both; }
@keyframes aedKey { from { transform: rotate(45deg) scale(0); } }
.aed-cache {
  position: absolute; top: 3px; left: 84px; right: 12px; height: 3px; border-radius: 2px;
  background: rgba(74,222,110,.85); transform-origin: left; transform: scaleX(0);
}
.aed-head {
  position: absolute; top: 4px; bottom: 6px; left: 84px; width: 2px; background: #6E8BFF;
  box-shadow: 0 0 10px rgba(110,139,255,.9);
}
.aed-head::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 8px; border-radius: 2px; background: #6E8BFF; }
.aed-tl.run .aed-cache { animation: aedCache 1.5s linear both; }
.aed-tl.run .aed-head { animation: aedHead 1.5s linear both; }
@keyframes aedCache { to { transform: scaleX(1); } }
@keyframes aedHead { to { left: calc(100% - 12px); } }

/* a hand on the Scale value */
.aed-cur {
  position: absolute; z-index: 3; width: 26px; height: 26px; margin: -4px 0 0 -6px;
  pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
}
.aed-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.aed-cur.on { opacity: 1; }
.aed-cur.drag { transform: translateX(-46px); transition: opacity .25s var(--ease), transform .9s var(--ease); }

/* ── the steps under it: where it is, and a way to jump ── */
.aed-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.aed-step {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border-radius: 999px;
  border: 1px solid var(--line-lift); background: rgba(255,255,255,.03);
  color: var(--tx-3); font: 600 13px/1.6 var(--ff); cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
html[dir="rtl"] .aed-step { padding: 5px 6px 5px 13px; }
.aed-step b {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; background: rgba(255,255,255,.06); color: var(--tx-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.aed-step:hover { color: var(--tx); border-color: rgba(139,124,246,.45); }
.aed-step.done b { background: rgba(74,222,110,.16); color: #74E89C; }
.aed-step.on { color: var(--tx); border-color: rgba(139,124,246,.65); background: rgba(139,124,246,.13); box-shadow: 0 0 26px -8px rgba(139,124,246,.75); }
.aed-step.on b { background: var(--ai-b); color: #fff; }
.aed-step:focus-visible { outline: 2px solid var(--ai-b); outline-offset: 2px; }

/* ── three things it proves ── */
.aed-proof { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aed-proof li {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 15px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.aed-proof svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(139,124,246,.13); color: #B4A9FF; }
.aed-proof li:nth-child(2) svg { background: rgba(47,217,190,.12); color: var(--ai-a); }
.aed-proof li:nth-child(3) svg { background: rgba(242,178,76,.12); color: var(--ai-d); }
.aed-proof b { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.aed-proof span { display: block; font-size: 13.6px; line-height: 1.75; color: var(--tx-3); }

/* paused while off screen */
.aed.zz *, .aed.zz *::before, .aed.zz *::after { animation-play-state: paused !important; }
.aed-log, .aed-stage { transition: opacity .45s var(--ease); }
.aed.fade .aed-log, .aed.fade .aed-stage { opacity: 0; }

@media (max-width: 1020px) {
  .aed { grid-template-columns: 1fr; }
  .aed-comp { order: -1; }
  .aed-chat { height: 340px; }
}
@media (max-width: 860px) { .aed-proof { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .aix { padding: 26px 14px 18px; margin: 0 -2px; }
  .aed-comp .aew-bar { gap: 8px; font-size: 11.5px; white-space: nowrap; }
  .aed-comp .aew-bar .grow + span { display: none; }
  .aix-lede { font-size: 15px; }
  .aed-props { grid-template-columns: 1fr; padding: 6px 8px; }
  .aed-p[data-p="text"], .aed-p[data-p="ease"] { display: none; }
  .aed-chat { height: 320px; }
  .aed-step { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .aed-bg i, .aix::before, .aix h2 em { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DaVinci Resolve (2026-10-10): a fourth choice on the picker and its
   own colours in the jump — warm amber, its own tile ("DR", drawn,
   not Blackmagic's mark). Every piece of its markup sits in <!--DV-->
   blocks the server cuts until dv_on.
   ═══════════════════════════════════════════════════════════════ */
.ps-ico.dv { background: #1E1309; color: #FFB067; box-shadow: inset 0 0 0 1px rgba(255,166,92,.42), 0 3px 10px -3px rgba(60,25,0,.9); }
.pswitch[data-on="dv"] .ps-glider {
  background: linear-gradient(135deg, #E0782E, #7A3410);
  box-shadow: 0 6px 24px -6px rgba(255,140,60,.75), inset 0 0 0 1px rgba(255,255,255,.14);
}
.pw[data-to="dv"] { --c1: #8A400F; --c2: #2B1206; --c3: #070403; --ink: #FFB36B; --glow: 255,140,60; --pr-tile: #1E1309; --pr-ink: #FFB067; }
html.pw-in[data-pw="dv"] .pw-cover { --c1: #8A400F; --c2: #2B1206; --c3: #070403; --glow: 255,140,60; --pr-tile: #1E1309; --pr-ink: #FFB067; }
.buy-opt[data-product="dv"].on { border-color: rgba(255,140,60,.7); background: linear-gradient(150deg, rgba(255,140,60,.18), var(--bg-200)); box-shadow: 0 8px 26px -10px rgba(255,140,60,.7); }
.guide-pick a[href="/guide-dv"].on { border-color: rgba(255,140,60,.6); background: linear-gradient(150deg, rgba(255,140,60,.18), var(--bg-200)); }
html[data-dv="preview"] .dv-page .ps-preview { display: inline-flex; }

/* the glider follows its option's row as well (top and height are set
   by js/products.js), so four options can sit on two rows */
.ps-glider { transition: transform .42s cubic-bezier(.3,1.25,.4,1), width .42s cubic-bezier(.3,1.25,.4,1), top .42s cubic-bezier(.3,1.25,.4,1), background .3s var(--ease), box-shadow .3s var(--ease); }
@media (max-width: 560px) {
  .pswitch:has(.ps-opt[data-product="dv"]) { flex-wrap: wrap; border-radius: 26px; }
  .pswitch:has(.ps-opt[data-product="dv"]) .ps-opt { flex: 1 1 calc(50% - 2px); }
}

/* ── the DaVinci page (davinci.html) ── */
/* hero: what DaVinci rendered, in a phone, beside the EditFast window */
.dvh { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.dvh-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #08060a;
  box-shadow: 0 0 0 1px rgba(255,166,92,.28), 0 30px 70px -26px rgba(255,120,40,.55), 0 20px 50px -20px rgba(0,0,0,.85); }
.dvh-phone img, .dvh-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dvh-tag { position: absolute; z-index: 2; inset-inline-start: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 5px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #FFD7B0;
  background: rgba(20,12,6,.72); border: 1px solid rgba(255,166,92,.35); backdrop-filter: blur(6px); }
.dvh-tag .ps-ico { width: 20px; height: 20px; font-size: 9px; border-radius: 5px; }
.dvh-app { border-radius: 16px; overflow: hidden; background: #0d0b10; border: 1px solid var(--line-lift);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.9); max-height: 560px; }
.dvh-app img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .dvh { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 12px; } .dvh-app { max-height: 420px; } }

/* the AI section: three pictures of the app */
.dvx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0 8px; }
.dvx-shot { margin: 0; border-radius: 16px; overflow: hidden; background: #0d0b10; border: 1px solid var(--line-lift); }
.dvx-shot img { display: block; width: 100%; height: auto; }
.dvx-shot figcaption { padding: 10px 14px; font-size: 13.5px; color: var(--tx-2); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .dvx { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; } }

/* the tools without pictures: a tidy grid of cards */
.dv-tools { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dv-tools .tool { display: block; }
.dv-tools .tool.tool-ai { grid-column: 1 / -1; }
.dv-looks-row .phone { cursor: default; }

/* DaVinci's hero since 2026-10-10: two motions EditFast AI made, side by side, the second a step lower */
.dvh.dvh-ai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.dvh.dvh-ai .dvh-phone:nth-child(2) { margin-top: 56px; }
@media (max-width: 860px) { .dvh.dvh-ai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dvh.dvh-ai .dvh-phone:nth-child(2) { margin-top: 32px; } }
/* …and its three videos further down: centred while they fit, swiped when they do not; no arrows with nothing to scroll */
.dv-page .sc-track > .sc-card:first-child { margin-inline-start: auto; }
.dv-page .sc-track > .sc-card:last-child { margin-inline-end: auto; }
@media (min-width: 700px) { .dv-page .sc-arrow { display: none; } }